diff --git a/src/entries/popup/components/LabelPill/LabelPill.tsx b/src/entries/popup/components/LabelPill/LabelPill.tsx index c2a7385724..7005227fb2 100644 --- 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; +}) => ( diff --git a/src/entries/popup/hooks/send/useAllFilteredWallets.ts b/src/entries/popup/hooks/send/useAllFilteredWallets.ts index ec2e53d942..7258a2abd9 100644 --- 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 index b00c7c2914..2dd5d72a0f 100644 --- 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 = ({ - {wallets.map((wallet, i) => ( - - onClickWallet(wallet)}> - - - - - - - - ))} + {wallets.map((wallet, i) => { + const address = typeof wallet === 'string' ? wallet : wallet.address; + + return ( + + onClickWallet(address)} + > + + + + + + + + ); + })} ) : 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 ( onClick(wallet)} + key={address} + onClick={() => onClick(address)} paddingVertical="8px" > - + @@ -134,11 +155,23 @@ const WalletRow = ({ {isNameDefined && ( - {truncateAddress(wallet)} + {truncateAddress(address)} )} + + {!!hardwareWalletVendor && ( + + + + )} ); @@ -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( 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(() => {