diff --git a/src/entries/popup/components/WatchWallet/WatchWallet.tsx b/src/entries/popup/components/WatchWallet/WatchWallet.tsx index df1b3074fb..a0a4f93858 100644 --- a/src/entries/popup/components/WatchWallet/WatchWallet.tsx +++ b/src/entries/popup/components/WatchWallet/WatchWallet.tsx @@ -2,11 +2,12 @@ import { isAddress } from '@ethersproject/address'; import { Address } from '@wagmi/core'; import { motion } from 'framer-motion'; import { ChangeEvent, useCallback, useMemo, useReducer, useState } from 'react'; -import { useEnsAddress } from 'wagmi'; +import { useEnsAddress, useEnsName } from 'wagmi'; import { i18n } from '~/core/languages'; import { useCurrentAddressStore } from '~/core/state'; import { useSavedEnsNames } from '~/core/state/savedEnsNames'; +import { ChainId } from '~/core/types/chains'; import { isENSAddressFormat } from '~/core/utils/ethereum'; import { Box, @@ -32,6 +33,7 @@ import { import * as wallet from '../../handlers/wallet'; import { useDebounce } from '../../hooks/useDebounce'; import { AddressAndType, useWallets } from '../../hooks/useWallets'; +import { RenameWalletPrompt } from '../../pages/walletSwitcher/renameWalletPrompt'; import { AddressOrEns } from '../AddressOrEns/AddressorEns'; import { Checkbox } from '../Checkbox/Checkbox'; import { Spinner } from '../Spinner/Spinner'; @@ -197,9 +199,12 @@ const getError = ( }; export const useValidateInput = (input: string) => { + const isInputEns = isENSAddressFormat(input); + const { data: addressFromEns, isFetching: isFetchingEns } = useEnsAddress({ name: input, - enabled: isENSAddressFormat(input), + enabled: isInputEns, + chainId: ChainId.mainnet, }); const { savedNames } = useSavedEnsNames(); @@ -221,6 +226,7 @@ export const useValidateInput = (input: string) => { return { ensName: !!addressFromEns && input, + isInputEns, address, isLoading, isValid, @@ -249,6 +255,7 @@ export const WatchWallet = ({ isLoading, isValid: inputIsValid, error, + isInputEns, } = useValidateInput(input.trim()); const addressesToImport = useMemo( @@ -256,11 +263,22 @@ export const WatchWallet = ({ [address, selectedAddresses], ); - const isValid = input ? inputIsValid : !!addressesToImport.length; - const { setCurrentAddress } = useCurrentAddressStore(); const { save } = useSavedEnsNames(); + const [renameAccount, setRenameAccount] = useState
(); + const { data: ensFromAddress, isFetching: isFetchingAddressEns } = useEnsName( + { + address, + enabled: !isInputEns && !!address, + chainId: ChainId.mainnet, + }, + ); + + const isValid = input + ? inputIsValid && !isFetchingAddressEns + : !!addressesToImport.length; + const handleWatchWallet = useCallback(async () => { const importedAddresses = await Promise.all( addressesToImport.map(wallet.importWithSecret), @@ -273,163 +291,175 @@ export const WatchWallet = ({ save(ensName, address); } setCurrentAddress(importedAddresses[0]); - onFinishImporting?.(); + if (!onboarding && !ensName && !ensFromAddress) setRenameAccount(address); + else onFinishImporting?.(); } }, [ addressesToImport, ensName, + ensFromAddress, address, setCurrentAddress, + onboarding, onFinishImporting, save, ]); return ( - - - - - - {i18n.t('watch_wallet.title')} - - - - {i18n.t('watch_wallet.description')} + <> + { + setRenameAccount(undefined); + onFinishImporting?.(); + }} + /> + + + + + + {i18n.t('watch_wallet.title')} - - + + + {i18n.t('watch_wallet.description')} + + + - - - + + + - - - - - + + + + { - if (isValid && e.key === 'Enter') handleWatchWallet(); - }} - tabIndex={1} - autoFocus - spellCheck={false} - onChange={onInputChange} - className={[ - placeholderStyle, - textStyles({ - color: 'label', - fontSize: '14pt', - fontWeight: 'regular', - fontFamily: 'rounded', - }), - ]} - style={{ - caretColor: accentColorAsHsl, - transition: 'border-color 200ms', - height: '96px', - resize: 'none', - }} - /> - - {isLoading && ( - - - - )} - {error && ( - - - - {error.message} - - - )} + { + if (isValid && e.key === 'Enter') handleWatchWallet(); + }} + tabIndex={1} + autoFocus + spellCheck={false} + onChange={onInputChange} + className={[ + placeholderStyle, + textStyles({ + color: 'label', + fontSize: '14pt', + fontWeight: 'regular', + fontFamily: 'rounded', + }), + ]} + style={{ + caretColor: accentColorAsHsl, + transition: 'border-color 200ms', + height: '96px', + resize: 'none', + }} + /> + + {(isLoading || isFetchingAddressEns) && ( + + + + )} + {error && ( + + + + {error.message} + + + )} + - - - - + + + + + {onboarding && ( + <> + + + + + setSelectedAddresses((all) => { + if (all[address]) delete all[address]; + else all[address] = true; + return { ...all }; + }) + } + /> + + )} + + + + + - {onboarding && ( - <> - - - - - setSelectedAddresses((all) => { - if (all[address]) delete all[address]; - else all[address] = true; - return { ...all }; - }) - } - /> - - )} - - - - - - - - + + + ); };