fixed zIndex of header, fixed scroll for modals (#51)

0xsequence · Jan 8, 2025 · 10dfbfb · 10dfbfb
1 parent d8cbb55
commit 10dfbfb
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 23 deletions.
diff --git a/src/components/header/RecoveryHeader.tsx b/src/components/header/RecoveryHeader.tsx
@@ -35,7 +35,7 @@ export default function RecoveryHeader() {
 
   return (
     <Box flexDirection="column" style={{ paddingBottom: `${RECOVERY_HEADER_HEIGHT}px` }}>
-      <Box background="backgroundPrimary" position="fixed" width="full">
+      <Box background="backgroundPrimary" position="fixed" width="full" zIndex="50">
         <Box
           flexDirection="row"
           justifyContent="space-between"

diff --git a/src/components/wallet/collectibles/CollectibleList.tsx b/src/components/wallet/collectibles/CollectibleList.tsx
@@ -1,4 +1,15 @@
-import { AddIcon, Box, Button, Card, Divider, Image, Modal, Spinner, Text } from '@0xsequence/design-system'
+import {
+  AddIcon,
+  Box,
+  Button,
+  Card,
+  Divider,
+  Image,
+  Modal,
+  Spinner,
+  Text,
+  useMediaQuery
+} from '@0xsequence/design-system'
 import { useMemo, useState } from 'react'
 
 import { useObservable, useStore } from '~/stores'
@@ -16,6 +27,8 @@ export default function CollectibleList({
 }: {
   onSendClick: (collectibleInfo: CollectibleInfo) => void
 }) {
+  const isMobile = useMediaQuery('isMobile')
+
   const collectibleStore = useStore(CollectibleStore)
   const networkStore = useStore(NetworkStore)
 
@@ -98,11 +111,16 @@ export default function CollectibleList({
 
       {isImportCollectibleViewOpen && (
         <Modal
+          size="lg"
           onClose={() => setIsImportCollectibleViewOpen(false)}
           contentProps={{
             style: {
               scrollbarColor: 'gray black',
-              scrollbarWidth: 'thin'
+              scrollbarWidth: 'thin',
+              width: !isMobile ? '800px' : '100%',
+              minHeight: 'auto',
+              maxHeight: '80%',
+              overflow: 'hidden'
             }
           }}
         >

diff --git a/src/components/wallet/collectibles/ImportCollectible.tsx b/src/components/wallet/collectibles/ImportCollectible.tsx
@@ -80,14 +80,19 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
   useEffect(() => {
     const fetchCollectibleList = async () => {
       if (selectedNetwork && contractType) {
-        if (contractType === CollectibleContractTypeValues.ERC721) {
-          const data = await collectibleStore.getERC721List(selectedNetwork.chainId)
-          setCollectionList(data.tokens)
-          setCollectionListDate(new Date(data.date))
-        } else if (contractType === CollectibleContractTypeValues.ERC1155) {
-          const data = await collectibleStore.getERC1155List(selectedNetwork.chainId)
-          setCollectionList(data.tokens)
-          setCollectionListDate(new Date(data.date))
+        try {
+          if (contractType === CollectibleContractTypeValues.ERC721) {
+            const data = await collectibleStore.getERC721List(selectedNetwork.chainId)
+            setCollectionList(data.tokens)
+            setCollectionListDate(new Date(data.date))
+          } else if (contractType === CollectibleContractTypeValues.ERC1155) {
+            const data = await collectibleStore.getERC1155List(selectedNetwork.chainId)
+            setCollectionList(data.tokens)
+            setCollectionListDate(new Date(data.date))
+          }
+        } catch {
+          setCollectionList([])
+          setCollectionListDate(undefined)
         }
       }
     }
@@ -424,6 +429,7 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
                   fontWeight="semibold"
                   color={contractType === CollectibleContractTypeValues.ERC721 ? 'text100' : 'text50'}
                   paddingX="4"
+                  cursor="pointer"
                 >
                   ERC721
                 </Text>
@@ -444,6 +450,7 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
                   fontWeight="semibold"
                   color={contractType === CollectibleContractTypeValues.ERC1155 ? 'text100' : 'text50'}
                   paddingX="4"
+                  cursor="pointer"
                 >
                   ERC1155
                 </Text>
@@ -654,7 +661,13 @@ export default function ImportCollectible({ onClose }: { onClose: () => void })
 
             <Box alignSelf="flex-end" flexDirection="row" gap="3">
               <Button label="Cancel" size="md" shape="square" onClick={() => setConfirmRefreshList(false)} />
-              <Button label="Confirm" variant="danger" size="md" shape="square" onClick={handleRefreshCollectibleList} />
+              <Button
+                label="Confirm"
+                variant="danger"
+                size="md"
+                shape="square"
+                onClick={handleRefreshCollectibleList}
+              />
             </Box>
           </Box>
         </Modal>

diff --git a/src/components/wallet/tokens/ImportToken.tsx b/src/components/wallet/tokens/ImportToken.tsx
@@ -81,7 +81,6 @@ export default function ImportToken({ onClose }: { onClose: () => void }) {
       if (selectedNetwork) {
         try {
           const tokenData = await tokenStore.getTokenList(selectedNetwork.chainId)
-          console.log('tokenData', tokenData)
 
           const tokenList = tokenData.tokens
           const tokenListDate = new Date(tokenData.date)

diff --git a/src/components/wallet/tokens/TokenList.tsx b/src/components/wallet/tokens/TokenList.tsx
@@ -1,4 +1,4 @@
-import { AddIcon, Box, Button, Card, Divider, Image, Modal, Spinner, Text } from '@0xsequence/design-system'
+import { AddIcon, Box, Button, Card, Divider, Image, Modal, Spinner, Text, useMediaQuery } from '@0xsequence/design-system'
 import { ContractType, TokenBalance } from '@0xsequence/indexer'
 import { useMemo, useState } from 'react'
 
@@ -15,6 +15,8 @@ import ImportToken from './ImportToken'
 import TokenBalanceItem from './TokenBalanceItem'
 
 export default function TokenList({ onSendClick }: { onSendClick: (tokenBalance: TokenBalance) => void }) {
+  const isMobile = useMediaQuery('isMobile')
+
   const walletStore = useStore(WalletStore)
   const tokenStore = useStore(TokenStore)
   const networkStore = useStore(NetworkStore)
@@ -128,11 +130,16 @@ export default function TokenList({ onSendClick }: { onSendClick: (tokenBalance:
 
       {isImportTokenViewOpen && (
         <Modal
+          size="lg"
           onClose={() => setIsImportTokenViewOpen(false)}
           contentProps={{
             style: {
               scrollbarColor: 'gray black',
-              scrollbarWidth: 'thin'
+              scrollbarWidth: 'thin',
+              width: !isMobile ? '800px' : '100%',
+              minHeight: 'auto',
+              maxHeight: '80%',
+              overflow: 'hidden'
             }
           }}
         >

diff --git a/src/routes/Wallet.tsx b/src/routes/Wallet.tsx
@@ -22,11 +22,11 @@ import RecoveryHeader from '~/components/header/RecoveryHeader'
 import Networks from '~/components/network/Networks'
 import SignClientTransactionConfirm from '~/components/signing/SignClientTransactionConfirm'
 import SignClientTransactionRelay from '~/components/signing/SignClientTransactionRelay'
-import DappList from '~/components/wallet/dapps/DappList'
-import ExternalWallet from '~/components/wallet/externalprovider/ExternalWallet'
 import PendingIndicator from '~/components/wallet/PendingIndicator'
 import CollectibleList from '~/components/wallet/collectibles/CollectibleList'
 import SendCollectible from '~/components/wallet/collectibles/SendCollectible'
+import DappList from '~/components/wallet/dapps/DappList'
+import ExternalWallet from '~/components/wallet/externalprovider/ExternalWallet'
 import SendToken from '~/components/wallet/tokens/SendToken'
 import TokenList from '~/components/wallet/tokens/TokenList'
 
@@ -362,9 +362,9 @@ function Wallet() {
       {isSigningTxn && (
         <Modal
           isDismissible={false}
-          size="md"
+          size="sm"
           contentProps={{
-            style: { width: !isMobile ? '800px' : '100%', maxHeight: '100%', overflowY: 'auto' }
+            style: { width: !isMobile ? '800px' : '100%' }
           }}
         >
           <SignClientTransactionRelay
@@ -379,9 +379,9 @@ function Wallet() {
       {isSigningMsg && (
         <Modal
           isDismissible={false}
-          size="md"
+          size="sm"
           contentProps={{
-            style: { width: !isMobile ? '800px' : '100%', maxHeight: '90%', overflowY: 'auto' }
+            style: { width: !isMobile ? '800px' : '100%' }
           }}
         >
           <SignClientTransactionConfirm
@@ -398,7 +398,7 @@ function Wallet() {
       )}
 
       {isSendTokenModalOpen && (
-        <Modal size="md" onClose={() => setIsSendTokenModalOpen(false)}>
+        <Modal size="sm" onClose={() => setIsSendTokenModalOpen(false)}>
           <SendToken
             tokenBalance={pendingSendToken}
             onClose={(to, amount) => {
@@ -413,7 +413,7 @@ function Wallet() {
       )}
 
       {isSendCollectibleModalOpen && (
-        <Modal size="md" onClose={() => setIsSendCollectibleModalOpen(false)}>
+        <Modal size="sm" onClose={() => setIsSendCollectibleModalOpen(false)}>
           <SendCollectible
             collectibleInfo={pendingSendCollectible}
             onClose={(to, amount) => {