Changed styling for mobile, fixed recovering wallet button bug

0xsequence · Dec 3, 2024 · aaf431b · aaf431b
1 parent bb4e08d
commit aaf431b
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 78 deletions.
diff --git a/src/assets/images/trial.jpg b/src/assets/images/trial.jpg
diff --git a/src/components/network/NetworkTag.tsx b/src/components/network/NetworkTag.tsx
@@ -21,7 +21,16 @@ export default function NetworkTag({
       paddingBottom={paddingBottom}
       paddingX="2"
     >
-      <Text variant="xsmall" color="text80">
+      <Text
+        variant="xsmall"
+        color="text80"
+        style={{
+          whiteSpace: 'nowrap',
+          maxWidth: '100px',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis'
+        }}
+      >
         {getNetworkTitle(chainId)}
       </Text>
     </Box>

diff --git a/src/components/recovery/WalletList.tsx b/src/components/recovery/WalletList.tsx
@@ -1,8 +1,6 @@
-import { Box, Button, Text } from '@0xsequence/design-system'
+import { Box, Text, truncateAddress, useMediaQuery } from '@0xsequence/design-system'
 import { useState } from 'react'
 
-import { WALLET_WIDTH } from '~/routes/Wallet'
-
 import FilledRoundCheckBox, { ROUND_CHECKBOX_SIZE } from '~/components/helpers/FilledRoundCheckBox'
 
 export default function WalletList({
@@ -12,6 +10,7 @@ export default function WalletList({
   possibleWallets: string[]
   handleSelectWallet: (wallet: string) => void
 }) {
+  const isMobile = useMediaQuery('isMobile')
   const [selectedWallet, setSelectedWallet] = useState<string>(possibleWallets[0])
 
   const gapWidth = 2
@@ -24,38 +23,39 @@ export default function WalletList({
       {possibleWallets.map(wallet => {
         return (
           <Box key={wallet}>
-            <Button
-              shape="square"
-              width="full"
-              variant="text"
-              label={
-                <Box flexDirection="row" alignItems="center" gap={`${gapWidth}`} style={{ height: '52px' }}>
-                  <FilledRoundCheckBox checked={selectedWallet === wallet} />
-
-                  <Box
-                    background="buttonGlass"
-                    borderRadius="md"
-                    alignItems="center"
-                    height="full"
-                    paddingX="4"
-                    style={{ width: `${WALLET_WIDTH - ROUND_CHECKBOX_SIZE * 4 - gapWidth * 4}px` }}
-                  >
-                    <Text
-                      variant="normal"
-                      fontWeight="medium"
-                      color="text100"
-                      style={{ fontFamily: 'monospace' }}
-                    >
-                      {wallet}
-                    </Text>
-                  </Box>
-                </Box>
-              }
+            <Box
+              flexDirection="row"
+              alignItems="center"
+              gap={`${gapWidth}`}
+              style={{ height: '52px' }}
+              cursor="pointer"
               onClick={() => {
                 setSelectedWallet(wallet)
                 handleSelectWallet(wallet)
               }}
-            />
+            >
+              <Box style={{ minWidth: `${ROUND_CHECKBOX_SIZE * 4}px` }}>
+                <FilledRoundCheckBox checked={selectedWallet === wallet} />
+              </Box>
+
+              <Box
+                background="buttonGlass"
+                borderRadius="md"
+                alignItems="center"
+                height="full"
+                paddingX="4"
+                width="full"
+              >
+                <Text
+                  variant='normal'
+                  fontWeight="medium"
+                  color="text100"
+                  style={{ fontFamily: 'monospace' }}
+                >
+                  {truncateAddress(wallet, 20, 6)}
+                </Text>
+              </Box>
+            </Box>
           </Box>
         )
       })}

diff --git a/src/components/wallet/ExternalWallet.tsx b/src/components/wallet/ExternalWallet.tsx
@@ -9,7 +9,8 @@ import {
   Divider,
   Modal,
   Text,
-  WalletIcon
+  WalletIcon,
+  truncateAddress
 } from '@0xsequence/design-system'
 import EthereumProvider from '@walletconnect/ethereum-provider'
 import { useObservable } from 'micro-observables'
@@ -97,7 +98,7 @@ export default function ExternalWallet() {
 
                 <Box gap="1">
                   <Text variant="normal" fontWeight="medium" color="text50" width="full">
-                    {selectedExternalWalletAddress}
+                    {truncateAddress(selectedExternalWalletAddress || '', 10, 4)}
                   </Text>
 
                   {isCopied ? (

diff --git a/src/components/wallet/tokens/TokenBalanceItem.tsx b/src/components/wallet/tokens/TokenBalanceItem.tsx
@@ -24,6 +24,8 @@ export default function TokenBalanceItem({
   const formattedBalance = ethers.formatUnits(tokenBalance.balance, tokenBalance.contractInfo?.decimals ?? 18)
   const truncatedBalance = truncateNumber(Number(formattedBalance), 5)
 
+  console.log(tokenBalance)
+
   return (
     <Card flexDirection="row" alignItems="center" gap="3">
       <ExternalIcon
@@ -34,7 +36,7 @@ export default function TokenBalanceItem({
       <Box flexDirection="column">
         <Box gap="1" alignItems="center">
           <Text variant="normal" fontWeight="bold" color="text80">
-            {tokenBalance.contractInfo?.symbol ?? 'Native Token'}
+            {tokenBalance.contractInfo?.symbol ?? 'Native'}
           </Text>
 
           <NetworkTag chainId={tokenBalance.chainId} />

diff --git a/src/routes/Landing.tsx b/src/routes/Landing.tsx
@@ -1,4 +1,14 @@
-import { Box, Button, Card, Divider, Image, Modal, Text, TextInput, useMediaQuery } from '@0xsequence/design-system'
+import {
+  Box,
+  Button,
+  Card,
+  Divider,
+  Image,
+  Modal,
+  Text,
+  TextInput,
+  useMediaQuery
+} from '@0xsequence/design-system'
 import { ChangeEvent, useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
 
@@ -7,17 +17,9 @@ import { AuthStore } from '~/stores/AuthStore'
 
 import contractsIcon from '~/assets/icons/contracts.svg'
 import walletIcon from '~/assets/icons/wallet.svg'
-import bgImageMobile from '~/assets/images/recovery-wallet-bg-mobile.jpg'
 import bgImage from '~/assets/images/recovery-wallet-bg.jpg'
 import SequenceRecoveryLogo from '~/assets/images/sequence-wallet-recovery.svg'
-
-const mobileBg = {
-  backgroundImage: `url(${bgImageMobile})`,
-  backgroundSize: '100%',
-  backgroundPosition: 'top',
-  backgroundRepeat: 'no-repeat',
-  paddingTop: '60px'
-}
+import trial from '~/assets/images/trial.jpg'
 
 const desktopBg = {
   backgroundImage: `url(${bgImage})`,
@@ -62,36 +64,27 @@ export default function Landing() {
   return (
     <Box
       justifyContent={isMobile ? 'center' : 'flex-start'}
-      height="vh"
-      width="vw"
-      style={isMobile ? mobileBg : desktopBg}
+      style={isMobile ? { paddingTop: '40px' } : desktopBg}
       padding={isMobile ? '4' : '20'}
-      marginBottom={isMobile ? '10' : undefined}
     >
       <Box
         flexDirection="column"
         justifyContent={isMobile ? 'flex-start' : 'center'}
         alignItems={isMobile ? 'center' : 'flex-start'}
-        width={isMobile ? 'full' : '3/4'}
-        style={{ maxWidth: '1000px' }}
+        style={{ maxWidth: '800px' }}
         gap="10"
         zIndex="20"
       >
-        <Box
-          flexDirection="column"
-          justifyContent={isMobile ? 'space-between' : 'center'}
-          height={isMobile ? 'full' : undefined}
-          alignItems={isMobile ? 'center' : 'flex-start'}
-          gap="6"
-        >
-          <Image src={SequenceRecoveryLogo} height="8"/>
+        <Box flexDirection="column" justifyContent="center" alignItems={isMobile ? 'center' : 'flex-start'}>
+          <Image src={SequenceRecoveryLogo} height="8" paddingX="4" />
 
-          {isMobile && <Divider color="transparent" style={{ minHeight: '160px'}} />}
+          {isMobile && <Image src={trial} style={{ maxWidth: 'calc(100% + 32px)' }} />}
 
           <Text
             textAlign={isMobile ? 'center' : 'left'}
             variant="xlarge"
             color="text100"
+            paddingX="4"
             style={
               isMobile ? { fontSize: '28px', lineHeight: '32px' } : { fontSize: '40px', lineHeight: '44px' }
             }
@@ -102,10 +95,17 @@ export default function Landing() {
 
         {isLoadingAccount ? (
           <>
-            <Text variant="normal" fontWeight="medium" color="text80">
+            <Text
+              variant="normal"
+              fontWeight="medium"
+              textAlign="center"
+              color="text80"
+              paddingX="8"
+              style={{ marginBottom: '-16px' }}
+            >
               Enter your password to continue and unlock your wallet
             </Text>
-            <Box flexDirection="column" gap="4" width="3/4">
+            <Box flexDirection="column" gap="4" width="full">
               <Box flexDirection="column" gap="1">
                 <Text variant="normal" fontWeight="medium" color="text80">
                   Password
@@ -148,7 +148,7 @@ export default function Landing() {
               <Button
                 label="Learn more"
                 size="md"
-                onClick={() => window.open('https://docs.sequence.xyz/')}
+                onClick={() => window.open('https://github.com/0xsequence/wallet-recovery-app')}
               />
               <Button as={Link} to="/recovery" label="Start Recovery" variant="primary" size="md" />
             </Box>
@@ -157,22 +157,22 @@ export default function Landing() {
                 <Box flexDirection="row" gap="2">
                   <Image src={contractsIcon} />
                   <Text variant="normal" fontWeight="bold" color="text100">
-                    Connect to Applications
+                    Connect to apps
                   </Text>
                 </Box>
                 <Text variant="normal" fontWeight="medium" color="text50">
-                  Connect your wallet to any web3 application via Walletconnect
+                  Connect your wallet to any web3 application via WalletConnect
                 </Text>
               </Card>
               <Card flexDirection="column" gap="2">
                 <Box flexDirection="row" gap="2">
                   <Image src={walletIcon} />
                   <Text variant="normal" fontWeight="bold" color="text100">
-                    Move funds anywhere
+                    Move assets anywhere
                   </Text>
                 </Box>
                 <Text variant="normal" fontWeight="medium" color="text50">
-                  Transfer funds securely to any wallet, fully decentralized
+                  Transfer your assets securely to any wallet, fully decentralized
                 </Text>
               </Card>
             </Box>
@@ -200,5 +200,3 @@ export default function Landing() {
     </Box>
   )
 }
-
-
diff --git a/src/routes/Recovery.tsx b/src/routes/Recovery.tsx
@@ -8,7 +8,8 @@ import {
   Modal,
   Spinner,
   Text,
-  TextInput
+  TextInput,
+  useMediaQuery
 } from '@0xsequence/design-system'
 import { ChainId } from '@0xsequence/network'
 import { Orchestrator } from '@0xsequence/signhub'
@@ -34,6 +35,8 @@ import WalletList from '~/components/recovery/WalletList'
 import { WALLET_WIDTH } from './Wallet'
 
 function Recovery() {
+  const isMobile = useMediaQuery('isMobile')
+
   const authStore = useStore(AuthStore)
   const networkStore = useStore(NetworkStore)
   const walletStore = useStore(WalletStore)
@@ -120,9 +123,11 @@ function Recovery() {
     setIsLoadingWallets(false)
   }
 
-  const updateWallet = async (wallet: string) => {
-    setWallet(wallet)
-    setIsReadyToContinue(false)
+  const updateWallet = async (selectedWallet: string) => {
+    if (wallet !== selectedWallet) {
+      setWallet(selectedWallet)
+      setIsReadyToContinue(false)
+    }
   }
 
   const validateAddress = async (wallet: string) => {
@@ -271,7 +276,7 @@ function Recovery() {
 
         {showManualAddress && (
           <Box flexDirection="column" gap="1">
-            <Text variant="normal" fontWeight="bold" color="text100">
+            <Text variant="normal" fontWeight="bold" color="text80">
               Enter wallet address manually
             </Text>
             <TextInput
@@ -306,11 +311,11 @@ function Recovery() {
           </>
         )}
 
-        <Box flexDirection="row">
+        <Box flexDirection="row" gap="4">
           {!showManualAddress && (
             <Button
               label="Enter wallet address manually"
-              size="md"
+              size={isMobile ? 'lg' : 'md'}
               shape="square"
               onClick={() => setShowManualAddress(true)}
               style={{ whiteSpace: 'normal' }}
@@ -319,7 +324,7 @@ function Recovery() {
 
           <Button
             variant="primary"
-            size="md"
+            size={isMobile ? 'lg' : 'md'}
             shape="square"
             label="Recover wallet"
             marginLeft="auto"

diff --git a/src/routes/Wallet.tsx b/src/routes/Wallet.tsx
@@ -307,7 +307,7 @@ function Wallet() {
     <Box>
       <RecoveryHeader />
 
-      <Box flexDirection="column" alignItems="center" paddingX="4">
+      <Box flexDirection="column" alignItems="center" >
         <Box
           flexDirection="column"
           padding="5"