add hardware wallet badge for send wallet list (#1659)

Co-authored-by: Daniel Sinclair <[email protected]>
rainbow-me · Aug 15, 2024 · add44e3 · add44e3
1 parent d300f4f
commit add44e3
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 30 deletions.
diff --git a/src/entries/popup/components/LabelPill/LabelPill.tsx b/src/entries/popup/components/LabelPill/LabelPill.tsx
@@ -1,10 +1,19 @@
 import React from 'react';
 
 import { Box, Inline, Text } from '~/design-system';
+import type { BackgroundColor } from '~/design-system/styles/designTokens';
 
-const LabelPill = ({ label, dot }: { label: string; dot?: boolean }) => (
+const LabelPill = ({
+  label,
+  dot,
+  background,
+}: {
+  label: string;
+  dot?: boolean;
+  background?: BackgroundColor;
+}) => (
   <Box
-    background="surfacePrimaryElevatedSecondary"
+    background={background || 'surfacePrimaryElevatedSecondary'}
     borderRadius="round"
     padding="8px"
   >

diff --git a/src/entries/popup/hooks/send/useAllFilteredWallets.ts b/src/entries/popup/hooks/send/useAllFilteredWallets.ts
@@ -36,7 +36,7 @@ export const useAllFilteredWallets = ({ filter }: { filter?: string }) => {
 
   return useMemo(
     () => ({
-      wallets: filterWallets(visibleOwnedWallets, filter).map((a) => a.address),
+      wallets: filterWallets(visibleOwnedWallets, filter),
       watchedWallets: filterWallets(watchedWallets, filter).map(
         (a) => a.address,
       ),
@@ -45,3 +45,9 @@ export const useAllFilteredWallets = ({ filter }: { filter?: string }) => {
     [visibleOwnedWallets, watchedWallets, contacts, filter],
   );
 };
+
+export type VisibleOwnedWallets = ReturnType<
+  typeof useAllFilteredWallets
+>['wallets'];
+
+export type VisibleOwnedWallet = VisibleOwnedWallets[number];
diff --git a/src/entries/popup/pages/send/ToAddressInput.tsx b/src/entries/popup/pages/send/ToAddressInput.tsx
@@ -15,6 +15,7 @@ import { i18n } from '~/core/languages';
 import { useCurrentAddressStore } from '~/core/state';
 import { useTestnetModeStore } from '~/core/state/currentSettings/testnetMode';
 import { usePopupInstanceStore } from '~/core/state/popupInstances';
+import { KeychainType } from '~/core/types/keychainTypes';
 import { truncateAddress } from '~/core/utils/address';
 import { TESTNET_MODE_BAR_HEIGHT } from '~/core/utils/dimensions';
 import {
@@ -34,10 +35,15 @@ import { TextOverflow } from '~/design-system/components/TextOverflow/TextOverfl
 import { SymbolName } from '~/design-system/styles/designTokens';
 
 import { DropdownInputWrapper } from '../../components/DropdownInputWrapper/DropdownInputWrapper';
+import { LabelPill } from '../../components/LabelPill/LabelPill';
 import { CursorTooltip } from '../../components/Tooltip/CursorTooltip';
 import { WalletAvatar } from '../../components/WalletAvatar/WalletAvatar';
 import { WalletContextMenu } from '../../components/WalletContextMenu';
-import { useAllFilteredWallets } from '../../hooks/send/useAllFilteredWallets';
+import {
+  VisibleOwnedWallet,
+  VisibleOwnedWallets,
+  useAllFilteredWallets,
+} from '../../hooks/send/useAllFilteredWallets';
 import { useWalletInfo } from '../../hooks/useWalletInfo';
 
 import { InputActionButton } from './InputActionButton';
@@ -51,7 +57,7 @@ const WalletSection = ({
   section,
 }: {
   title: string;
-  wallets: Address[];
+  wallets: Address[] | VisibleOwnedWallets;
   onClickWallet: (address: Address) => void;
   symbol: SymbolName;
   section: 'contacts' | 'my_wallets' | 'watching';
@@ -73,23 +79,30 @@ const WalletSection = ({
       </Box>
 
       <Box>
-        {wallets.map((wallet, i) => (
-          <Bleed horizontal="12px" key={i}>
-            <Lens borderRadius="12px" onKeyDown={() => onClickWallet(wallet)}>
-              <RowHighlightWrapper key={i}>
-                <Inset horizontal="12px" key={i}>
-                  <WalletRow
-                    testId={`wallet-${i + 1}`}
-                    onClick={onClickWallet}
-                    key={wallet}
-                    section={section}
-                    wallet={wallet}
-                  />
-                </Inset>
-              </RowHighlightWrapper>
-            </Lens>
-          </Bleed>
-        ))}
+        {wallets.map((wallet, i) => {
+          const address = typeof wallet === 'string' ? wallet : wallet.address;
+
+          return (
+            <Bleed horizontal="12px" key={i}>
+              <Lens
+                borderRadius="12px"
+                onKeyDown={() => onClickWallet(address)}
+              >
+                <RowHighlightWrapper key={i}>
+                  <Inset horizontal="12px" key={i}>
+                    <WalletRow
+                      testId={`wallet-${i + 1}`}
+                      onClick={onClickWallet}
+                      key={address}
+                      section={section}
+                      wallet={wallet}
+                    />
+                  </Inset>
+                </RowHighlightWrapper>
+              </Lens>
+            </Bleed>
+          );
+        })}
       </Box>
     </Stack>
   ) : null;
@@ -101,30 +114,38 @@ const WalletRow = ({
   section,
   testId,
 }: {
-  wallet: Address;
+  wallet: Address | VisibleOwnedWallet;
   onClick: (address: Address) => void;
   section: 'contacts' | 'my_wallets' | 'watching';
   testId?: string;
 }) => {
+  const address = typeof wallet === 'string' ? wallet : wallet.address;
+
   const { displayName, contactAddress, contactName, isNameDefined } =
     useWalletInfo({
-      address: wallet,
+      address,
     });
   const name =
     section === 'contacts'
       ? contactName || truncateAddress(contactAddress)
       : displayName;
 
+  const hardwareWalletVendor =
+    typeof wallet !== 'string' &&
+    wallet.type === KeychainType.HardwareWalletKeychain
+      ? wallet.vendor
+      : null;
+
   return (
     <Box
       testId={testId}
-      key={wallet}
-      onClick={() => onClick(wallet)}
+      key={address}
+      onClick={() => onClick(address)}
       paddingVertical="8px"
     >
       <Columns alignVertical="center" space="8px">
         <Column width="content">
-          <WalletAvatar size={36} addressOrName={wallet} emojiSize="20pt" />
+          <WalletAvatar size={36} addressOrName={address} emojiSize="20pt" />
         </Column>
         <Column>
           <Stack space="8px">
@@ -134,11 +155,23 @@ const WalletRow = ({
 
             {isNameDefined && (
               <Text weight="semibold" size="12pt" color="labelTertiary">
-                {truncateAddress(wallet)}
+                {truncateAddress(address)}
               </Text>
             )}
           </Stack>
         </Column>
+
+        {!!hardwareWalletVendor && (
+          <Column width="content">
+            <LabelPill
+              dot
+              label={i18n.t(
+                `wallet_switcher.${hardwareWalletVendor.toLowerCase()}`,
+              )}
+              background="surfaceSecondary"
+            />
+          </Column>
+        )}
       </Columns>
     </Box>
   );
@@ -150,7 +183,7 @@ const DropdownWalletsList = ({
   watchedWallets,
   selectWalletAndCloseDropdown,
 }: {
-  wallets: Address[];
+  wallets: VisibleOwnedWallets;
   contacts: Address[];
   watchedWallets: Address[];
   selectWalletAndCloseDropdown: (address: Address) => void;
@@ -322,7 +355,9 @@ export const ToAddressInput = React.forwardRef<InputRefAPI, ToAddressProps>(
       filter: toAddress ? undefined : toAddressOrName,
     });
     const { currentAddress } = useCurrentAddressStore();
-    const selectableWallets = wallets.filter((a) => a !== currentAddress);
+    const selectableWallets = wallets.filter(
+      (w) => w.address !== currentAddress,
+    );
     const { sendAddress: savedSendAddress } = usePopupInstanceStore();
 
     useEffect(() => {