From a895d3ca98f7d37f799e135c59a736d879cb3f2f Mon Sep 17 00:00:00 2001 From: ghgoodreau Date: Thu, 13 Mar 2025 16:27:58 -0500 Subject: [PATCH 01/11] feat: allows pasting external addresses and autoselecting them --- app/_locales/en/messages.json | 3 + .../components/destination-account-picker.tsx | 69 ++++++++++++++++++- ...destination-selected-account-list-item.tsx | 15 +++- 3 files changed, 82 insertions(+), 5 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 7c3731f7714a..a0ac32a09073 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1982,6 +1982,9 @@ "exportYourDataDescription": { "message": "You can export data like your contacts and preferences." }, + "externalAccount": { + "message": "External Account" + }, "extendWalletWithSnaps": { "message": "Explore community-built Snaps to customize your web3 experience", "description": "Banner description displayed on Snaps list page in Settings when less than 6 Snaps is installed." diff --git a/ui/pages/bridge/prepare/components/destination-account-picker.tsx b/ui/pages/bridge/prepare/components/destination-account-picker.tsx index e5a583c15f33..07474b2ef423 100644 --- a/ui/pages/bridge/prepare/components/destination-account-picker.tsx +++ b/ui/pages/bridge/prepare/components/destination-account-picker.tsx @@ -25,12 +25,25 @@ import { } from '../../../../helpers/constants/design-system'; // eslint-disable-next-line import/no-restricted-paths import { t } from '../../../../../app/scripts/translate'; +// eslint-disable-next-line import/no-restricted-paths +import { isEthAddress } from '../../../../../app/scripts/lib/multichain/address'; +import { isSolanaAddress } from '../../../../../shared/lib/multichain/accounts'; import DestinationSelectedAccountListItem from './destination-selected-account-list-item'; import DestinationAccountListItem from './destination-account-list-item'; +// eslint-disable-next-line import/no-restricted-paths +// eslint-disable-next-line import/no-restricted-paths + +type ExternalAccount = { + address: string; + metadata: { + name: string; + }; + isExternal: true; +}; type DestinationAccountPickerProps = { - onAccountSelect: (account: InternalAccount | null) => void; - selectedSwapToAccount: InternalAccount | null; + onAccountSelect: (account: InternalAccount | ExternalAccount | null) => void; + selectedSwapToAccount: InternalAccount | ExternalAccount | null; isDestinationSolana: boolean; }; @@ -43,13 +56,63 @@ export const DestinationAccountPicker = ({ const selectedAccount = useSelector(getSelectedInternalAccount); const accounts = useSelector(getInternalAccounts); + // Check if search query is a valid address + const isValidAddress = useMemo(() => { + const trimmedQuery = searchQuery.trim(); + if (!trimmedQuery) { + return false; + } + + return isDestinationSolana + ? isSolanaAddress(trimmedQuery) + : isEthAddress(trimmedQuery); + }, [searchQuery, isDestinationSolana]); + + // Create an external account object if valid address is not in internal accounts + const externalAccount = useMemo(() => { + if (!isValidAddress) { + return null; + } + + const trimmedQuery = searchQuery.trim(); + const addressExists = accounts.some( + (account) => account.address.toLowerCase() === trimmedQuery.toLowerCase(), + ); + + if (addressExists) { + return null; + } + + return { + address: trimmedQuery, + metadata: { + name: `${trimmedQuery.slice(0, 6)}...${trimmedQuery.slice(-4)}`, + }, + isExternal: true, + } as ExternalAccount; + }, [accounts, isValidAddress, searchQuery]); + + // Auto-select the external account if valid and not already selected + React.useEffect(() => { + if (externalAccount && !selectedSwapToAccount) { + onAccountSelect(externalAccount); + setSearchQuery(''); // Clear search after selection + } + }, [externalAccount, onAccountSelect, selectedSwapToAccount]); + const filteredAccounts = useMemo( () => accounts.filter((account) => { - const matchesSearch = account.metadata.name + const matchesSearchByName = account.metadata.name .toLowerCase() .includes(searchQuery.toLowerCase()); + const matchesSearchByAddress = account.address + .toLowerCase() + .includes(searchQuery.toLowerCase()); + + const matchesSearch = matchesSearchByName || matchesSearchByAddress; + const matchesChain = isDestinationSolana ? isSolanaAccount(account) : !isSolanaAccount(account); diff --git a/ui/pages/bridge/prepare/components/destination-selected-account-list-item.tsx b/ui/pages/bridge/prepare/components/destination-selected-account-list-item.tsx index 7d2441c42ba1..206289ebd88c 100644 --- a/ui/pages/bridge/prepare/components/destination-selected-account-list-item.tsx +++ b/ui/pages/bridge/prepare/components/destination-selected-account-list-item.tsx @@ -24,9 +24,19 @@ import { import { getUseBlockie } from '../../../../selectors'; // eslint-disable-next-line import/no-restricted-paths import { normalizeSafeAddress } from '../../../../../app/scripts/lib/multichain/address'; +// eslint-disable-next-line import/no-restricted-paths +import { t } from '../../../../../app/scripts/translate'; + +type ExternalAccount = { + address: string; + metadata: { + name: string; + }; + isExternal: true; +}; type DestinationSelectedAccountListItemProps = { - account: InternalAccount; + account: InternalAccount | ExternalAccount; selected: boolean; onClick?: () => void; }; @@ -35,6 +45,7 @@ const DestinationSelectedAccountListItem: React.FC< DestinationSelectedAccountListItemProps > = ({ account, selected, onClick }) => { const useBlockie = useSelector(getUseBlockie); + const isExternalAccount = 'isExternal' in account && account.isExternal; return ( - {account.metadata.name} + {isExternalAccount ? t('externalAccount') : account.metadata.name} Date: Thu, 13 Mar 2025 17:55:32 -0500 Subject: [PATCH 02/11] fix: fix lint, add localization to en_GB file --- app/_locales/en/messages.json | 6 +++--- app/_locales/en_GB/messages.json | 3 +++ 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index a0ac32a09073..ed8030bd4254 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1982,13 +1982,13 @@ "exportYourDataDescription": { "message": "You can export data like your contacts and preferences." }, - "externalAccount": { - "message": "External Account" - }, "extendWalletWithSnaps": { "message": "Explore community-built Snaps to customize your web3 experience", "description": "Banner description displayed on Snaps list page in Settings when less than 6 Snaps is installed." }, + "externalAccount": { + "message": "External Account" + }, "externalExtension": { "message": "External extension" }, diff --git a/app/_locales/en_GB/messages.json b/app/_locales/en_GB/messages.json index 7c3731f7714a..ed8030bd4254 100644 --- a/app/_locales/en_GB/messages.json +++ b/app/_locales/en_GB/messages.json @@ -1986,6 +1986,9 @@ "message": "Explore community-built Snaps to customize your web3 experience", "description": "Banner description displayed on Snaps list page in Settings when less than 6 Snaps is installed." }, + "externalAccount": { + "message": "External Account" + }, "externalExtension": { "message": "External extension" }, From 0cbf2a370a9baf73149540c29a32e426c7af6d5b Mon Sep 17 00:00:00 2001 From: ghgoodreau Date: Mon, 17 Mar 2025 14:13:06 -0500 Subject: [PATCH 03/11] fix: shared type, fix lint error --- shared/types/bridge.ts | 8 ++++++++ ui/pages/bridge/hooks/useDestinationAccount.ts | 6 ++++-- .../prepare/components/destination-account-picker.tsx | 11 +---------- .../destination-selected-account-list-item.tsx | 9 +-------- 4 files changed, 14 insertions(+), 20 deletions(-) diff --git a/shared/types/bridge.ts b/shared/types/bridge.ts index 0d818da80974..c851f733a270 100644 --- a/shared/types/bridge.ts +++ b/shared/types/bridge.ts @@ -234,3 +234,11 @@ export type TokenV3Asset = { name: string; decimals: number; }; + +export type ExternalAccount = { + address: string; + metadata: { + name: string; + }; + isExternal: true; +}; diff --git a/ui/pages/bridge/hooks/useDestinationAccount.ts b/ui/pages/bridge/hooks/useDestinationAccount.ts index 6175e4b024b6..20efb54f0f79 100644 --- a/ui/pages/bridge/hooks/useDestinationAccount.ts +++ b/ui/pages/bridge/hooks/useDestinationAccount.ts @@ -13,10 +13,12 @@ import { import { useMultichainSelector } from '../../../hooks/useMultichainSelector'; import { formatChainIdToCaip } from '../../../../shared/modules/bridge-utils/caip-formatters'; import { MultichainNetworks } from '../../../../shared/constants/multichain/networks'; +import { ExternalAccount } from '../../../../shared/types/bridge'; export const useDestinationAccount = (isSwap = false) => { - const [selectedDestinationAccount, setSelectedDestinationAccount] = - useState(null); + const [selectedDestinationAccount, setSelectedDestinationAccount] = useState< + InternalAccount | ExternalAccount | null + >(null); const isEvm = useMultichainSelector(getMultichainIsEvm); const selectedEvmAccount = useSelector(getSelectedEvmInternalAccount); diff --git a/ui/pages/bridge/prepare/components/destination-account-picker.tsx b/ui/pages/bridge/prepare/components/destination-account-picker.tsx index 07474b2ef423..e8e911cd9c58 100644 --- a/ui/pages/bridge/prepare/components/destination-account-picker.tsx +++ b/ui/pages/bridge/prepare/components/destination-account-picker.tsx @@ -28,18 +28,9 @@ import { t } from '../../../../../app/scripts/translate'; // eslint-disable-next-line import/no-restricted-paths import { isEthAddress } from '../../../../../app/scripts/lib/multichain/address'; import { isSolanaAddress } from '../../../../../shared/lib/multichain/accounts'; +import { ExternalAccount } from '../../../../../shared/types/bridge'; import DestinationSelectedAccountListItem from './destination-selected-account-list-item'; import DestinationAccountListItem from './destination-account-list-item'; -// eslint-disable-next-line import/no-restricted-paths -// eslint-disable-next-line import/no-restricted-paths - -type ExternalAccount = { - address: string; - metadata: { - name: string; - }; - isExternal: true; -}; type DestinationAccountPickerProps = { onAccountSelect: (account: InternalAccount | ExternalAccount | null) => void; diff --git a/ui/pages/bridge/prepare/components/destination-selected-account-list-item.tsx b/ui/pages/bridge/prepare/components/destination-selected-account-list-item.tsx index 206289ebd88c..cef9ae2a9317 100644 --- a/ui/pages/bridge/prepare/components/destination-selected-account-list-item.tsx +++ b/ui/pages/bridge/prepare/components/destination-selected-account-list-item.tsx @@ -26,14 +26,7 @@ import { getUseBlockie } from '../../../../selectors'; import { normalizeSafeAddress } from '../../../../../app/scripts/lib/multichain/address'; // eslint-disable-next-line import/no-restricted-paths import { t } from '../../../../../app/scripts/translate'; - -type ExternalAccount = { - address: string; - metadata: { - name: string; - }; - isExternal: true; -}; +import { ExternalAccount } from '../../../../../shared/types/bridge'; type DestinationSelectedAccountListItemProps = { account: InternalAccount | ExternalAccount; From 6e564ec7cee6c4dcbeb47c2bcb4b6fc33a4f4862 Mon Sep 17 00:00:00 2001 From: ghgoodreau Date: Mon, 17 Mar 2025 14:50:10 -0500 Subject: [PATCH 04/11] fix: types --- ui/pages/bridge/hooks/useDestinationAccount.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ui/pages/bridge/hooks/useDestinationAccount.ts b/ui/pages/bridge/hooks/useDestinationAccount.ts index 20efb54f0f79..6fe9776443de 100644 --- a/ui/pages/bridge/hooks/useDestinationAccount.ts +++ b/ui/pages/bridge/hooks/useDestinationAccount.ts @@ -13,12 +13,12 @@ import { import { useMultichainSelector } from '../../../hooks/useMultichainSelector'; import { formatChainIdToCaip } from '../../../../shared/modules/bridge-utils/caip-formatters'; import { MultichainNetworks } from '../../../../shared/constants/multichain/networks'; -import { ExternalAccount } from '../../../../shared/types/bridge'; + +type DestinationAccount = InternalAccount | { address: string }; export const useDestinationAccount = (isSwap = false) => { - const [selectedDestinationAccount, setSelectedDestinationAccount] = useState< - InternalAccount | ExternalAccount | null - >(null); + const [selectedDestinationAccount, setSelectedDestinationAccount] = + useState(null); const isEvm = useMultichainSelector(getMultichainIsEvm); const selectedEvmAccount = useSelector(getSelectedEvmInternalAccount); From c9eb3488eee4da947216af8301371da7cd99ddb1 Mon Sep 17 00:00:00 2001 From: ghgoodreau Date: Tue, 18 Mar 2025 13:35:44 -0500 Subject: [PATCH 05/11] feat: adds externalaccountlistitem instead of autoselecting external account --- .../components/destination-account-picker.tsx | 23 +++--- .../components/external-account-list-item.tsx | 76 +++++++++++++++++++ 2 files changed, 90 insertions(+), 9 deletions(-) create mode 100644 ui/pages/bridge/prepare/components/external-account-list-item.tsx diff --git a/ui/pages/bridge/prepare/components/destination-account-picker.tsx b/ui/pages/bridge/prepare/components/destination-account-picker.tsx index e8e911cd9c58..5bab89abeab1 100644 --- a/ui/pages/bridge/prepare/components/destination-account-picker.tsx +++ b/ui/pages/bridge/prepare/components/destination-account-picker.tsx @@ -31,6 +31,7 @@ import { isSolanaAddress } from '../../../../../shared/lib/multichain/accounts'; import { ExternalAccount } from '../../../../../shared/types/bridge'; import DestinationSelectedAccountListItem from './destination-selected-account-list-item'; import DestinationAccountListItem from './destination-account-list-item'; +import { ExternalAccountListItem } from './external-account-list-item'; type DestinationAccountPickerProps = { onAccountSelect: (account: InternalAccount | ExternalAccount | null) => void; @@ -83,14 +84,6 @@ export const DestinationAccountPicker = ({ } as ExternalAccount; }, [accounts, isValidAddress, searchQuery]); - // Auto-select the external account if valid and not already selected - React.useEffect(() => { - if (externalAccount && !selectedSwapToAccount) { - onAccountSelect(externalAccount); - setSearchQuery(''); // Clear search after selection - } - }, [externalAccount, onAccountSelect, selectedSwapToAccount]); - const filteredAccounts = useMemo( () => accounts.filter((account) => { @@ -231,8 +224,20 @@ export const DestinationAccountPicker = ({ showOptions={false} /> ))} + {externalAccount && ( + onAccountSelect(externalAccount)} + /> + )} - {filteredAccounts.length === 0 && ( + {filteredAccounts.length === 0 && !externalAccount && ( void; +}; + +export const ExternalAccountListItem: React.FC< + ExternalAccountListItemProps +> = ({ account, selected, onClick }) => { + const useBlockie = useSelector(getUseBlockie); + + return ( + + + + + + {t('externalAccount')} + + + {shortenAddress(normalizeSafeAddress(account.address))} + + + + ); +}; From d5b2a584444e88b24d47f149bb6a98e547aeb8e1 Mon Sep 17 00:00:00 2001 From: ghgoodreau Date: Tue, 18 Mar 2025 13:41:45 -0500 Subject: [PATCH 06/11] fix: types --- ui/pages/bridge/hooks/useDestinationAccount.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/pages/bridge/hooks/useDestinationAccount.ts b/ui/pages/bridge/hooks/useDestinationAccount.ts index 6fe9776443de..cfecbc4bf37b 100644 --- a/ui/pages/bridge/hooks/useDestinationAccount.ts +++ b/ui/pages/bridge/hooks/useDestinationAccount.ts @@ -13,8 +13,9 @@ import { import { useMultichainSelector } from '../../../hooks/useMultichainSelector'; import { formatChainIdToCaip } from '../../../../shared/modules/bridge-utils/caip-formatters'; import { MultichainNetworks } from '../../../../shared/constants/multichain/networks'; +import { ExternalAccount } from '../../../../shared/types/bridge'; -type DestinationAccount = InternalAccount | { address: string }; +type DestinationAccount = InternalAccount | ExternalAccount; export const useDestinationAccount = (isSwap = false) => { const [selectedDestinationAccount, setSelectedDestinationAccount] = From a429e2dc8e4518b388eca282d11b7f431ab5df88 Mon Sep 17 00:00:00 2001 From: ghgoodreau Date: Tue, 18 Mar 2025 13:57:34 -0500 Subject: [PATCH 07/11] chore: fixes import lint --- .../bridge/prepare/components/external-account-list-item.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/ui/pages/bridge/prepare/components/external-account-list-item.tsx b/ui/pages/bridge/prepare/components/external-account-list-item.tsx index d6f25df9fe14..77122b180511 100644 --- a/ui/pages/bridge/prepare/components/external-account-list-item.tsx +++ b/ui/pages/bridge/prepare/components/external-account-list-item.tsx @@ -15,12 +15,14 @@ import { BackgroundColor, BorderColor, Display, + FlexDirection, TextColor, TextVariant, - FlexDirection, } from '../../../../helpers/constants/design-system'; import { getUseBlockie } from '../../../../selectors'; +// eslint-disable-next-line import/no-restricted-paths import { normalizeSafeAddress } from '../../../../../app/scripts/lib/multichain/address'; +// eslint-disable-next-line import/no-restricted-paths import { t } from '../../../../../app/scripts/translate'; type ExternalAccountListItemProps = { From 7709b3ac533d4e1329b6bfa387066ad214984d11 Mon Sep 17 00:00:00 2001 From: ghgoodreau Date: Tue, 18 Mar 2025 18:32:26 -0500 Subject: [PATCH 08/11] chore: export DestinationAccount type --- shared/types/bridge.ts | 3 +++ ui/pages/bridge/hooks/useDestinationAccount.ts | 5 +---- .../components/destination-account-picker.tsx | 14 ++++++++------ .../destination-selected-account-list-item.tsx | 5 ++--- 4 files changed, 14 insertions(+), 13 deletions(-) diff --git a/shared/types/bridge.ts b/shared/types/bridge.ts index c851f733a270..bd47fa2499c2 100644 --- a/shared/types/bridge.ts +++ b/shared/types/bridge.ts @@ -1,3 +1,4 @@ +import { InternalAccount } from '@metamask/keyring-internal-api'; import type { CaipAccountId, CaipAssetId, @@ -242,3 +243,5 @@ export type ExternalAccount = { }; isExternal: true; }; + +export type DestinationAccount = InternalAccount | ExternalAccount; diff --git a/ui/pages/bridge/hooks/useDestinationAccount.ts b/ui/pages/bridge/hooks/useDestinationAccount.ts index cfecbc4bf37b..44f1dc562cb0 100644 --- a/ui/pages/bridge/hooks/useDestinationAccount.ts +++ b/ui/pages/bridge/hooks/useDestinationAccount.ts @@ -1,6 +1,5 @@ import { useSelector } from 'react-redux'; import { useEffect, useState } from 'react'; -import type { InternalAccount } from '@metamask/keyring-internal-api'; import { getSelectedInternalAccount, getSelectedEvmInternalAccount, @@ -13,9 +12,7 @@ import { import { useMultichainSelector } from '../../../hooks/useMultichainSelector'; import { formatChainIdToCaip } from '../../../../shared/modules/bridge-utils/caip-formatters'; import { MultichainNetworks } from '../../../../shared/constants/multichain/networks'; -import { ExternalAccount } from '../../../../shared/types/bridge'; - -type DestinationAccount = InternalAccount | ExternalAccount; +import { DestinationAccount } from '../../../../shared/types/bridge'; export const useDestinationAccount = (isSwap = false) => { const [selectedDestinationAccount, setSelectedDestinationAccount] = diff --git a/ui/pages/bridge/prepare/components/destination-account-picker.tsx b/ui/pages/bridge/prepare/components/destination-account-picker.tsx index 5bab89abeab1..ca2704a0a20d 100644 --- a/ui/pages/bridge/prepare/components/destination-account-picker.tsx +++ b/ui/pages/bridge/prepare/components/destination-account-picker.tsx @@ -1,6 +1,5 @@ import React, { useMemo, useState } from 'react'; import { useSelector } from 'react-redux'; -import { InternalAccount } from '@metamask/keyring-internal-api'; import { TextField, Box, @@ -28,14 +27,17 @@ import { t } from '../../../../../app/scripts/translate'; // eslint-disable-next-line import/no-restricted-paths import { isEthAddress } from '../../../../../app/scripts/lib/multichain/address'; import { isSolanaAddress } from '../../../../../shared/lib/multichain/accounts'; -import { ExternalAccount } from '../../../../../shared/types/bridge'; +import { + ExternalAccount, + DestinationAccount, +} from '../../../../../shared/types/bridge'; import DestinationSelectedAccountListItem from './destination-selected-account-list-item'; import DestinationAccountListItem from './destination-account-list-item'; import { ExternalAccountListItem } from './external-account-list-item'; type DestinationAccountPickerProps = { - onAccountSelect: (account: InternalAccount | ExternalAccount | null) => void; - selectedSwapToAccount: InternalAccount | ExternalAccount | null; + onAccountSelect: (account: DestinationAccount | null) => void; + selectedSwapToAccount: DestinationAccount | null; isDestinationSolana: boolean; }; @@ -230,8 +232,8 @@ export const DestinationAccountPicker = ({ account={externalAccount} selected={Boolean( selectedSwapToAccount && - (selectedSwapToAccount as ExternalAccount | InternalAccount) - .address === externalAccount.address, + (selectedSwapToAccount as DestinationAccount).address === + externalAccount.address, )} onClick={() => onAccountSelect(externalAccount)} /> diff --git a/ui/pages/bridge/prepare/components/destination-selected-account-list-item.tsx b/ui/pages/bridge/prepare/components/destination-selected-account-list-item.tsx index cef9ae2a9317..8e4de0d1ba47 100644 --- a/ui/pages/bridge/prepare/components/destination-selected-account-list-item.tsx +++ b/ui/pages/bridge/prepare/components/destination-selected-account-list-item.tsx @@ -1,7 +1,6 @@ import React from 'react'; import classnames from 'classnames'; import { useSelector } from 'react-redux'; -import { InternalAccount } from '@metamask/keyring-internal-api'; import { shortenAddress } from '../../../../helpers/utils/util'; import { @@ -26,10 +25,10 @@ import { getUseBlockie } from '../../../../selectors'; import { normalizeSafeAddress } from '../../../../../app/scripts/lib/multichain/address'; // eslint-disable-next-line import/no-restricted-paths import { t } from '../../../../../app/scripts/translate'; -import { ExternalAccount } from '../../../../../shared/types/bridge'; +import { DestinationAccount } from '../../../../../shared/types/bridge'; type DestinationSelectedAccountListItemProps = { - account: InternalAccount | ExternalAccount; + account: DestinationAccount; selected: boolean; onClick?: () => void; }; From d270b59f23197333e9730368f7eff56ea24ccab3 Mon Sep 17 00:00:00 2001 From: ghgoodreau Date: Wed, 19 Mar 2025 12:38:32 -0500 Subject: [PATCH 09/11] chore: address comments --- shared/types/bridge.ts | 11 ----------- ui/pages/bridge/hooks/useDestinationAccount.ts | 2 +- .../prepare/components/destination-account-picker.tsx | 7 ++----- .../destination-selected-account-list-item.tsx | 6 +++--- .../prepare/components/external-account-list-item.tsx | 11 ++++------- ui/pages/bridge/prepare/types.ts | 11 +++++++++++ 6 files changed, 21 insertions(+), 27 deletions(-) create mode 100644 ui/pages/bridge/prepare/types.ts diff --git a/shared/types/bridge.ts b/shared/types/bridge.ts index bd47fa2499c2..0d818da80974 100644 --- a/shared/types/bridge.ts +++ b/shared/types/bridge.ts @@ -1,4 +1,3 @@ -import { InternalAccount } from '@metamask/keyring-internal-api'; import type { CaipAccountId, CaipAssetId, @@ -235,13 +234,3 @@ export type TokenV3Asset = { name: string; decimals: number; }; - -export type ExternalAccount = { - address: string; - metadata: { - name: string; - }; - isExternal: true; -}; - -export type DestinationAccount = InternalAccount | ExternalAccount; diff --git a/ui/pages/bridge/hooks/useDestinationAccount.ts b/ui/pages/bridge/hooks/useDestinationAccount.ts index 44f1dc562cb0..308d7a72b9e1 100644 --- a/ui/pages/bridge/hooks/useDestinationAccount.ts +++ b/ui/pages/bridge/hooks/useDestinationAccount.ts @@ -12,7 +12,7 @@ import { import { useMultichainSelector } from '../../../hooks/useMultichainSelector'; import { formatChainIdToCaip } from '../../../../shared/modules/bridge-utils/caip-formatters'; import { MultichainNetworks } from '../../../../shared/constants/multichain/networks'; -import { DestinationAccount } from '../../../../shared/types/bridge'; +import { DestinationAccount } from '../prepare/types'; export const useDestinationAccount = (isSwap = false) => { const [selectedDestinationAccount, setSelectedDestinationAccount] = diff --git a/ui/pages/bridge/prepare/components/destination-account-picker.tsx b/ui/pages/bridge/prepare/components/destination-account-picker.tsx index ca2704a0a20d..736d6d36a118 100644 --- a/ui/pages/bridge/prepare/components/destination-account-picker.tsx +++ b/ui/pages/bridge/prepare/components/destination-account-picker.tsx @@ -27,10 +27,7 @@ import { t } from '../../../../../app/scripts/translate'; // eslint-disable-next-line import/no-restricted-paths import { isEthAddress } from '../../../../../app/scripts/lib/multichain/address'; import { isSolanaAddress } from '../../../../../shared/lib/multichain/accounts'; -import { - ExternalAccount, - DestinationAccount, -} from '../../../../../shared/types/bridge'; +import { DestinationAccount } from '../types'; import DestinationSelectedAccountListItem from './destination-selected-account-list-item'; import DestinationAccountListItem from './destination-account-list-item'; import { ExternalAccountListItem } from './external-account-list-item'; @@ -83,7 +80,7 @@ export const DestinationAccountPicker = ({ name: `${trimmedQuery.slice(0, 6)}...${trimmedQuery.slice(-4)}`, }, isExternal: true, - } as ExternalAccount; + }; }, [accounts, isValidAddress, searchQuery]); const filteredAccounts = useMemo( diff --git a/ui/pages/bridge/prepare/components/destination-selected-account-list-item.tsx b/ui/pages/bridge/prepare/components/destination-selected-account-list-item.tsx index 8e4de0d1ba47..6e1802a4902e 100644 --- a/ui/pages/bridge/prepare/components/destination-selected-account-list-item.tsx +++ b/ui/pages/bridge/prepare/components/destination-selected-account-list-item.tsx @@ -23,9 +23,8 @@ import { import { getUseBlockie } from '../../../../selectors'; // eslint-disable-next-line import/no-restricted-paths import { normalizeSafeAddress } from '../../../../../app/scripts/lib/multichain/address'; -// eslint-disable-next-line import/no-restricted-paths -import { t } from '../../../../../app/scripts/translate'; -import { DestinationAccount } from '../../../../../shared/types/bridge'; +import { useI18nContext } from '../../../../hooks/useI18nContext'; +import { DestinationAccount } from './types'; type DestinationSelectedAccountListItemProps = { account: DestinationAccount; @@ -37,6 +36,7 @@ const DestinationSelectedAccountListItem: React.FC< DestinationSelectedAccountListItemProps > = ({ account, selected, onClick }) => { const useBlockie = useSelector(getUseBlockie); + const t = useI18nContext(); const isExternalAccount = 'isExternal' in account && account.isExternal; return ( diff --git a/ui/pages/bridge/prepare/components/external-account-list-item.tsx b/ui/pages/bridge/prepare/components/external-account-list-item.tsx index 77122b180511..ca79cfa49236 100644 --- a/ui/pages/bridge/prepare/components/external-account-list-item.tsx +++ b/ui/pages/bridge/prepare/components/external-account-list-item.tsx @@ -1,7 +1,7 @@ import React from 'react'; import classnames from 'classnames'; import { useSelector } from 'react-redux'; -import { ExternalAccount } from '../../../../../shared/types/bridge'; +import { ExternalAccount } from '../types'; import { shortenAddress } from '../../../../helpers/utils/util'; import { AvatarAccount, @@ -20,10 +20,8 @@ import { TextVariant, } from '../../../../helpers/constants/design-system'; import { getUseBlockie } from '../../../../selectors'; -// eslint-disable-next-line import/no-restricted-paths import { normalizeSafeAddress } from '../../../../../app/scripts/lib/multichain/address'; -// eslint-disable-next-line import/no-restricted-paths -import { t } from '../../../../../app/scripts/translate'; +import { useI18nContext } from '../../../../hooks/useI18nContext'; type ExternalAccountListItemProps = { account: ExternalAccount; @@ -35,14 +33,13 @@ export const ExternalAccountListItem: React.FC< ExternalAccountListItemProps > = ({ account, selected, onClick }) => { const useBlockie = useSelector(getUseBlockie); + const t = useI18nContext(); return ( Date: Wed, 19 Mar 2025 12:44:57 -0500 Subject: [PATCH 10/11] fix: import --- .../components/destination-selected-account-list-item.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/pages/bridge/prepare/components/destination-selected-account-list-item.tsx b/ui/pages/bridge/prepare/components/destination-selected-account-list-item.tsx index 6e1802a4902e..4f03cc8e83a3 100644 --- a/ui/pages/bridge/prepare/components/destination-selected-account-list-item.tsx +++ b/ui/pages/bridge/prepare/components/destination-selected-account-list-item.tsx @@ -24,7 +24,7 @@ import { getUseBlockie } from '../../../../selectors'; // eslint-disable-next-line import/no-restricted-paths import { normalizeSafeAddress } from '../../../../../app/scripts/lib/multichain/address'; import { useI18nContext } from '../../../../hooks/useI18nContext'; -import { DestinationAccount } from './types'; +import { DestinationAccount } from '../types'; type DestinationSelectedAccountListItemProps = { account: DestinationAccount; From fd172ee0c864ddf9c24b1b8e87b3b502913a0a41 Mon Sep 17 00:00:00 2001 From: ghgoodreau Date: Wed, 19 Mar 2025 13:00:51 -0500 Subject: [PATCH 11/11] fix: lint --- .../bridge/prepare/components/external-account-list-item.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/pages/bridge/prepare/components/external-account-list-item.tsx b/ui/pages/bridge/prepare/components/external-account-list-item.tsx index ca79cfa49236..f619fc92f23c 100644 --- a/ui/pages/bridge/prepare/components/external-account-list-item.tsx +++ b/ui/pages/bridge/prepare/components/external-account-list-item.tsx @@ -20,6 +20,7 @@ import { TextVariant, } from '../../../../helpers/constants/design-system'; import { getUseBlockie } from '../../../../selectors'; +// eslint-disable-next-line import/no-restricted-paths import { normalizeSafeAddress } from '../../../../../app/scripts/lib/multichain/address'; import { useI18nContext } from '../../../../hooks/useI18nContext';