feat: make the wallet modal better (#8923)

* polish: make the wallet modal better * feat: wcv2 too * chore: fine I'll call it feat then
shapeshift · Feb 25, 2025 · d00d798 · d00d798
1 parent d31149b
commit d00d798
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 22 deletions.
diff --git a/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx b/src/context/WalletProvider/NewWalletViews/NewWalletViewsSwitch.tsx
@@ -272,7 +272,7 @@ export const NewWalletViewsSwitch = () => {
               top={3}
               zIndex={1}
               bg={buttonContainerBgColor}
-              borderRadius='full'
+              borderRadius='2xl'
             >
               <IconButton
                 icon={arrowBackIcon}

diff --git a/src/context/WalletProvider/NewWalletViews/sections/HardwareWalletsSection.tsx b/src/context/WalletProvider/NewWalletViews/sections/HardwareWalletsSection.tsx
@@ -25,11 +25,12 @@ const WalletOption = ({ connect, isSelected, isDisabled, icon: Icon, name }: Wal
     <Box
       as={Button}
       variant='ghost'
+      whiteSpace='normal'
       px={4}
-      ml={-4}
-      py={6}
+      ml='-16px'
+      mr='-16px'
+      py={2.5}
       borderRadius='md'
-      width='full'
       onClick={connect}
       bg={isSelected ? backgroundColor : undefined}
       isDisabled={isDisabled}

diff --git a/src/context/WalletProvider/NewWalletViews/sections/InstalledWalletsSection.tsx b/src/context/WalletProvider/NewWalletViews/sections/InstalledWalletsSection.tsx
@@ -30,11 +30,12 @@ const MipdProviderSelectItem = ({
       as={Button}
       key={provider.info.rdns}
       variant='ghost'
+      whiteSpace='normal'
       px={4}
-      ml={-4}
-      py={6}
+      ml='-16px'
+      mr='-16px'
+      py={2.5}
       borderRadius='md'
-      width='full'
       onClick={handleConnect}
       bg={isSelected ? backgroundColor : undefined}
       isDisabled={isDisabled}

diff --git a/src/context/WalletProvider/NewWalletViews/sections/OthersSection.tsx b/src/context/WalletProvider/NewWalletViews/sections/OthersSection.tsx
@@ -23,11 +23,12 @@ const WalletConnectOption = ({
       as={Button}
       key='walletconnect'
       variant='ghost'
+      whiteSpace='normal'
       px={4}
-      ml={-4}
-      py={6}
+      ml='-16px'
+      mr='-16px'
+      py={2.5}
       borderRadius='md'
-      width='full'
       onClick={connect}
       bg={isSelected ? backgroundColor : undefined}
       isDisabled={isDisabled}
@@ -62,11 +63,12 @@ const CoinbaseQROption = ({
       as={Button}
       key='coinbaseqr'
       variant='ghost'
+      whiteSpace='normal'
       px={4}
-      ml={-4}
-      py={6}
+      ml='-16px'
+      mr='-16px'
+      py={2.5}
       borderRadius='md'
-      width='full'
       onClick={connect}
       bg={isSelected ? selectedBackgroundColor : undefined}
       isDisabled={isDisabled}

diff --git a/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx b/src/context/WalletProvider/NewWalletViews/sections/SavedWalletsSection.tsx
@@ -32,11 +32,12 @@ const WalletCard = ({ wallet, onClick, isSelected }: WalletCardProps) => {
     <Box
       as={Button}
       variant='ghost'
+      whiteSpace='normal'
       px={4}
-      ml={-4}
-      py={6}
+      ml='-16px'
+      mr='-16px'
+      py={2.5}
       borderRadius='md'
-      width='full'
       onClick={handleClick}
       bg={isSelected ? bgColor : undefined}
     >
@@ -61,8 +62,6 @@ export const SavedWalletsSection = ({
   selectedWalletId: string | null
   onWalletSelect: (id: string, initialRoute: string) => void
 }) => {
-  const buttonBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50')
-
   const history = useHistory()
   const localWallet = useLocalWallet()
   const { getAdapter, dispatch } = useWallet()
@@ -147,12 +146,11 @@ export const SavedWalletsSection = ({
           variant='ghost'
           whiteSpace='normal'
           px={4}
-          ml={-4}
-          py={6}
+          ml='-16px'
+          mr='-16px'
+          py={2.5}
           borderRadius='md'
-          width='full'
           onClick={handleAddNewWalletClick}
-          bg={buttonBgColor}
         >
           <Flex alignItems='center' width='full' color='gray.500'>
             <Icon as={FaPlus} boxSize='12px' mr={3} />