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(() => {