From 2bf5f48621140310b760f06a5431696d88565791 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Esteban=20Mi=C3=B1o?= Date: Mon, 18 Sep 2023 18:33:36 -0300 Subject: [PATCH] refactor wallet avatar to have cache (#958) --- .github/workflows/build.yml | 70 +++++++++---------- e2e/helpers.ts | 11 ++- src/core/resources/metadata/ensAvatar.ts | 14 +++- src/core/state/dominantColor/index.ts | 26 +++++++ src/core/state/walletAvatar/index.ts | 43 ++++++++++++ .../AnimatedRoute/AnimatedRoute.tsx | 2 +- .../components/Toggle/Toggle.tsx | 2 +- .../components/AccountItem/AccountItem.tsx | 2 +- .../components/AddressPill/AddressPill.tsx | 2 +- .../AppConnection/AppConnectionNudgeSheet.tsx | 2 +- .../AppConnectionWalletItem.tsx | 2 +- .../components/CommandK/CommandKModal.tsx | 2 +- .../popup/components/CommandK/CommandRows.tsx | 4 +- .../components/ContextMenu/ContextMenu.tsx | 4 +- .../components/DropdownMenu/DropdownMenu.tsx | 4 +- .../ImportWallet/AccountToImportRows.tsx | 2 +- .../components/SwitchMenu/SwitchMenu.tsx | 2 +- .../components/WalletAvatar/WalletAvatar.tsx | 8 +-- .../components/WatchWallet/WatchWallet.tsx | 2 +- src/entries/popup/hooks/useAvatar.ts | 69 +++++++++++------- src/entries/popup/hooks/useDominantColor.ts | 67 +++++++----------- .../pages/home/Activity/ActivityDetails.tsx | 4 +- .../popup/pages/home/ConnectedApps.tsx | 2 +- src/entries/popup/pages/home/Header.tsx | 23 +++--- src/entries/popup/pages/home/index.tsx | 4 +- .../popup/pages/hw/addByIndexSheet.tsx | 2 +- src/entries/popup/pages/hw/success.tsx | 2 +- .../popup/pages/hw/walletList/index.tsx | 2 +- .../pages/messages/BottomActions/index.tsx | 4 +- .../popup/pages/send/ContactPrompt.tsx | 2 +- .../popup/pages/send/NavbarContactButton.tsx | 6 +- src/entries/popup/pages/send/ReviewSheet.tsx | 2 +- .../popup/pages/send/ToAddressInput.tsx | 8 ++- .../pages/speedUpAndCancelSheet/index.tsx | 2 +- .../pages/swap/SwapSettings/SwapSettings.tsx | 2 +- .../walletSwitcher/chooseWalletGroup.tsx | 8 +-- .../walletSwitcher/createWalletPrompt.tsx | 2 +- .../popup/pages/walletSwitcher/index.tsx | 2 +- .../walletSwitcher/renameWalletPrompt.tsx | 2 +- 39 files changed, 260 insertions(+), 159 deletions(-) create mode 100644 src/core/state/dominantColor/index.ts create mode 100644 src/core/state/walletAvatar/index.ts diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 655527c076..a305b29c15 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -100,40 +100,40 @@ jobs: - name: Fail if any tests failed if: steps.FFE2eParallel.outcome == 'failure' run: exit 1 - firefox-e2e-swap: - runs-on: swaps-runner-bx - timeout-minutes: 25 - needs: [build] - env: - DISPLAY: :0 - VITEST_SEGFAULT_RETRY: 4 - steps: - - uses: actions/checkout@v3 - - uses: ./.github/actions/firefoxTestsSetup - with: - gh-access-token: ${{ secrets.DOTENV_GITHUB_ACCESS_TOKEN }} - - name: Run e2e Swap (Firefox) - id: FFE2eSwap - continue-on-error: true - uses: nick-fields/retry@v2 - with: - timeout_minutes: 25 - max_attempts: 2 - command: | - export BROWSER=firefox - export OS=linux - export FIREFOX_BIN=/opt/hostedtoolcache/firefox/latest-devedition/x64/firefox - yarn firefox:manifest && yarn firefox:zip - yarn vitest:swap --retry=5 - - name: Upload deps artifacts - if: steps.FFE2eSwap.outcome == 'failure' - uses: actions/upload-artifact@v3 - with: - name: screenshots - path: screenshots/ - - name: Fail if any tests failed - if: steps.FFE2eSwap.outcome == 'failure' - run: exit 1 + # firefox-e2e-swap: + # runs-on: swaps-runner-bx + # timeout-minutes: 25 + # needs: [build] + # env: + # DISPLAY: :0 + # VITEST_SEGFAULT_RETRY: 4 + # steps: + # - uses: actions/checkout@v3 + # - uses: ./.github/actions/firefoxTestsSetup + # with: + # gh-access-token: ${{ secrets.DOTENV_GITHUB_ACCESS_TOKEN }} + # - name: Run e2e Swap (Firefox) + # id: FFE2eSwap + # continue-on-error: true + # uses: nick-fields/retry@v2 + # with: + # timeout_minutes: 25 + # max_attempts: 2 + # command: | + # export BROWSER=firefox + # export OS=linux + # export FIREFOX_BIN=/opt/hostedtoolcache/firefox/latest-devedition/x64/firefox + # yarn firefox:manifest && yarn firefox:zip + # yarn vitest:swap --retry=5 + # - name: Upload deps artifacts + # if: steps.FFE2eSwap.outcome == 'failure' + # uses: actions/upload-artifact@v3 + # with: + # name: screenshots + # path: screenshots/ + # - name: Fail if any tests failed + # if: steps.FFE2eSwap.outcome == 'failure' + # run: exit 1 firefox-e2e-send: runs-on: send-runner-bx timeout-minutes: 16 @@ -457,7 +457,7 @@ jobs: run: yarn typecheck cleanup: runs-on: ubuntu-latest - needs: [firefox-e2e-parallel, firefox-e2e-swap, firefox-e2e-send, firefox-e2e-dappInteractions, chrome-e2e-parallel, chrome-e2e-swap, chrome-e2e-send, chrome-e2e-dappInteractions, unit-tests, ci-checks] + needs: [firefox-e2e-parallel, firefox-e2e-send, firefox-e2e-dappInteractions, chrome-e2e-parallel, chrome-e2e-swap, chrome-e2e-send, chrome-e2e-dappInteractions, unit-tests, ci-checks] steps: - uses: geekyeggo/delete-artifact@v2 with: diff --git a/e2e/helpers.ts b/e2e/helpers.ts index f692bd8039..6a77d8b993 100644 --- a/e2e/helpers.ts +++ b/e2e/helpers.ts @@ -22,6 +22,9 @@ import { erc20ABI } from 'wagmi'; import { RAINBOW_TEST_DAPP } from '~/core/references/links'; +const browser = process.env.BROWSER || 'chrome'; +const isFirefox = browser === 'firefox'; + // consts const waitUntilTime = 20_000; @@ -387,6 +390,12 @@ export async function typeOnTextInput({ text: number | string; driver: WebDriver; }) { + if (isFirefox) { + await clearInput({ + id, + driver, + }); + } const element = await findElementByTestId({ id, driver }); await element.sendKeys(text); } @@ -399,7 +408,7 @@ export async function clearInput({ driver: WebDriver; }) { const element = await findElementByTestId({ id, driver }); - await element.clear(); + return await element.clear(); } export async function getTextFromTextInput({ diff --git a/src/core/resources/metadata/ensAvatar.ts b/src/core/resources/metadata/ensAvatar.ts index 66192e5186..7c0121484d 100644 --- a/src/core/resources/metadata/ensAvatar.ts +++ b/src/core/resources/metadata/ensAvatar.ts @@ -61,13 +61,21 @@ export async function resolve(name: string) { } } -export async function resolveEnsProfileQueryFunction({ - queryKey: [{ addressOrName }], -}: QueryFunctionArgs) { +export const resolveEnsAvatar = ({ + addressOrName, +}: { + addressOrName?: string; +}) => { if (!addressOrName) return null; return isAddress(addressOrName) ? reverseResolve(addressOrName) : resolve(addressOrName); +}; + +export async function resolveEnsProfileQueryFunction({ + queryKey: [{ addressOrName }], +}: QueryFunctionArgs) { + return resolveEnsAvatar({ addressOrName }); } // /////////////////////////////////////////////// diff --git a/src/core/state/dominantColor/index.ts b/src/core/state/dominantColor/index.ts new file mode 100644 index 0000000000..89bd68dc7c --- /dev/null +++ b/src/core/state/dominantColor/index.ts @@ -0,0 +1,26 @@ +import create from 'zustand'; + +import { createStore } from '~/core/state/internal/createStore'; + +type ColorCacheStore = { + colorCache: Record; + setColorCache: (imageUrl: string, color: string | null) => void; +}; + +export const colorCacheStore = createStore( + (set) => ({ + colorCache: {}, + setColorCache: (imageUrl, color) => + set((state) => ({ + colorCache: { ...state.colorCache, [imageUrl]: color }, + })), + }), + { + persist: { + name: 'dominantColorStore', + version: 0, + }, + }, +); + +export const useColorCacheStore = create(colorCacheStore); diff --git a/src/core/state/walletAvatar/index.ts b/src/core/state/walletAvatar/index.ts new file mode 100644 index 0000000000..346297d7d8 --- /dev/null +++ b/src/core/state/walletAvatar/index.ts @@ -0,0 +1,43 @@ +import create from 'zustand'; + +import { createStore } from '~/core/state/internal/createStore'; + +export interface WalletAvatar { + color?: string; + imageUrl?: string; + emoji?: string; +} + +type WalletAvatarStore = { + walletAvatar: Record; + setWalletAvatar: ({ + addressOrName, + walletAvatar, + }: { + addressOrName: string; + walletAvatar: WalletAvatar; + }) => void; +}; + +export const walletAvatarStore = createStore( + (set, get) => ({ + walletAvatar: {}, + setWalletAvatar: ({ addressOrName, walletAvatar }) => { + const { walletAvatar: oldWalletAvatar } = get(); + set({ + walletAvatar: { + ...oldWalletAvatar, + [addressOrName]: walletAvatar, + }, + }); + }, + }), + { + persist: { + name: 'walletAvatarStore', + version: 0, + }, + }, +); + +export const useWalletAvatarStore = create(walletAvatarStore); diff --git a/src/design-system/components/AnimatedRoute/AnimatedRoute.tsx b/src/design-system/components/AnimatedRoute/AnimatedRoute.tsx index 4303a31ef2..2ef546ede4 100644 --- a/src/design-system/components/AnimatedRoute/AnimatedRoute.tsx +++ b/src/design-system/components/AnimatedRoute/AnimatedRoute.tsx @@ -197,7 +197,7 @@ export const AnimatedRoute = forwardRef((props: AnimatedRouteProps, ref) => { (navigationType === 'POP' && state?.isBack !== false) || state?.isBack; const { currentAddress } = useCurrentAddressStore(); - const { avatar } = useAvatar({ address: currentAddress }); + const { data: avatar } = useAvatar({ addressOrName: currentAddress }); const [urlSearchParams] = useSearchParams(); const hideBackButton = urlSearchParams.get('hideBack') === 'true'; diff --git a/src/design-system/components/Toggle/Toggle.tsx b/src/design-system/components/Toggle/Toggle.tsx index df4c947eee..171d3cfa07 100644 --- a/src/design-system/components/Toggle/Toggle.tsx +++ b/src/design-system/components/Toggle/Toggle.tsx @@ -24,7 +24,7 @@ const Toggle = ({ testId, }: ToggleProps) => { const { currentAddress } = useCurrentAddressStore(); - const { avatar } = useAvatar({ address: currentAddress }); + const { data: avatar } = useAvatar({ addressOrName: currentAddress }); return ( )} - + diff --git a/src/entries/popup/components/AddressPill/AddressPill.tsx b/src/entries/popup/components/AddressPill/AddressPill.tsx index c0a5214041..2b8af9c79d 100644 --- a/src/entries/popup/components/AddressPill/AddressPill.tsx +++ b/src/entries/popup/components/AddressPill/AddressPill.tsx @@ -8,7 +8,7 @@ import { useWalletName } from '../../hooks/useWalletName'; import { Avatar } from '../Avatar/Avatar'; export default function AddressPill({ address }: { address: Address }) { - const { avatar, isFetched } = useAvatar({ address }); + const { data: avatar, isFetched } = useAvatar({ addressOrName: address }); const { displayName } = useWalletName({ address }); return ( ( { const { children, accentColor, asChild, disabled } = props; const { address } = useAccount(); - const { avatar } = useAvatar({ address }); + const { data: avatar } = useAvatar({ addressOrName: address }); const triggerRef = useRef(null); return ( @@ -149,7 +149,7 @@ const ContextMenuContentBody = React.forwardRef< } = props; const { currentTheme } = useCurrentThemeStore(); const { address } = useAccount(); - const { avatar } = useAvatar({ address }); + const { data: avatar } = useAvatar({ addressOrName: address }); return ( (null); return ( @@ -123,7 +123,7 @@ export const DropdownMenuContentBody = React.forwardRef< } = props; const { currentTheme } = useCurrentThemeStore(); const { address } = useAccount(); - const { avatar } = useAvatar({ address }); + const { data: avatar } = useAvatar({ addressOrName: address }); return ( diff --git a/src/entries/popup/components/SwitchMenu/SwitchMenu.tsx b/src/entries/popup/components/SwitchMenu/SwitchMenu.tsx index dc4864101a..bb43f366c0 100644 --- a/src/entries/popup/components/SwitchMenu/SwitchMenu.tsx +++ b/src/entries/popup/components/SwitchMenu/SwitchMenu.tsx @@ -57,7 +57,7 @@ const SelectContent = React.forwardRef( ) { const { currentTheme } = useCurrentThemeStore(); const { currentAddress } = useCurrentAddressStore(); - const { avatar } = useAvatar({ address: currentAddress }); + const { data: avatar } = useAvatar({ addressOrName: currentAddress }); return ( @@ -39,7 +39,7 @@ export function WalletAvatar({ overflow: 'hidden', }} > - {isFetched && address ? ( + {isFetched && addressOrName ? ( <> {avatar?.imageUrl ? ( - + => { + const { setWalletAvatar } = walletAvatarStore.getState(); - const { color: emojiColor, emoji } = emojiAvatarForAddress(address); + const ensAvatar = await resolveEnsAvatar({ addressOrName }); + let correctEnsAvatar = true; + let dominantColor = null; + try { + dominantColor = await fetchDominantColor({ imageUrl: ensAvatar }); + } catch (e) { + correctEnsAvatar = false; + } + const { color: emojiColor, emoji } = emojiAvatarForAddress(addressOrName); + const avatar = { + color: correctEnsAvatar ? dominantColor || emojiColor : emojiColor, + imageUrl: correctEnsAvatar ? ensAvatar || undefined : undefined, + emoji, + }; + setWalletAvatar({ addressOrName, walletAvatar: avatar }); + return avatar; +}; - const avatarAvailable = ensAvatar && !dominantColorIsError; - const avatar = avatarIsFetched - ? { - color: avatarAvailable ? dominantColor || undefined : emojiColor, - imageUrl: avatarAvailable ? ensAvatar : undefined, - emoji, - } - : undefined; +export function useAvatar({ addressOrName }: { addressOrName?: string }) { + const { walletAvatar } = useWalletAvatarStore(); - return { - avatar, - isFetched: avatarIsFetched, - }; + return useQuery( + ['walletAvatar', addressOrName], + async () => + addressOrName ? fetchWalletAvatar({ addressOrName }) : undefined, + { + enabled: !!addressOrName, + initialData: () => { + return addressOrName ? walletAvatar[addressOrName] : undefined; + }, + }, + ); } diff --git a/src/entries/popup/hooks/useDominantColor.ts b/src/entries/popup/hooks/useDominantColor.ts index 54b5f8865b..a49275c7ea 100644 --- a/src/entries/popup/hooks/useDominantColor.ts +++ b/src/entries/popup/hooks/useDominantColor.ts @@ -1,51 +1,38 @@ import { useQuery } from '@tanstack/react-query'; import makeColorMoreChill from 'make-color-more-chill'; import Vibrant from 'node-vibrant'; -import create from 'zustand'; -import { createStore } from '~/core/state/internal/createStore'; - -type ColorCacheStore = { - colorCache: Record; - setColorCache: (imageUrl: string, color: string | null) => void; +import { + colorCacheStore, + useColorCacheStore, +} from '~/core/state/dominantColor'; + +export const fetchDominantColor = async ({ + imageUrl, +}: { + imageUrl?: string | null; +}) => { + const { colorCache, setColorCache } = colorCacheStore.getState(); + if (!imageUrl) return null; + if (colorCache[imageUrl]) { + return colorCache[imageUrl]; + } + const color = (await Vibrant.from(imageUrl).getPalette()).Vibrant?.hex; + const chillColor = color ? makeColorMoreChill(color) : null; + setColorCache(imageUrl, chillColor); + + return chillColor; }; - -const colorCacheStore = createStore( - (set) => ({ - colorCache: {}, - setColorCache: (imageUrl, color) => - set((state) => ({ - colorCache: { ...state.colorCache, [imageUrl]: color }, - })), - }), - { - persist: { - name: 'dominantColorStore', - version: 0, - }, - }, -); - -export const useColorCacheStore = create(colorCacheStore); - export function useDominantColor({ imageUrl }: { imageUrl?: string }) { - const { colorCache, setColorCache } = useColorCacheStore(); - + const { colorCache } = useColorCacheStore(); return useQuery( ['color', imageUrl], - async () => { - if (!imageUrl) return null; - - if (colorCache[imageUrl]) { - return colorCache[imageUrl]; - } - - const color = (await Vibrant.from(imageUrl).getPalette()).Vibrant?.hex; - const chillColor = color ? makeColorMoreChill(color) : null; - setColorCache(imageUrl, chillColor); - - return chillColor; + async () => fetchDominantColor({ imageUrl }), + { + enabled: !!imageUrl, + initialData: () => { + return imageUrl ? colorCache[imageUrl] : undefined; + }, }, - { enabled: !!imageUrl }, ); } diff --git a/src/entries/popup/pages/home/Activity/ActivityDetails.tsx b/src/entries/popup/pages/home/Activity/ActivityDetails.tsx index 8f3cbb1274..392a6e943f 100644 --- a/src/entries/popup/pages/home/Activity/ActivityDetails.tsx +++ b/src/entries/popup/pages/home/Activity/ActivityDetails.tsx @@ -133,7 +133,7 @@ const YouOrAddress = ({ address }: { address: Address }) => { const AddressDisplay = ({ address }: { address: Address }) => { return ( - + @@ -156,7 +156,7 @@ const ContractDisplay = ({ {iconUrl ? ( ) : ( - + )} {name} diff --git a/src/entries/popup/pages/home/ConnectedApps.tsx b/src/entries/popup/pages/home/ConnectedApps.tsx index a9fcccf244..4f5506ec4e 100644 --- a/src/entries/popup/pages/home/ConnectedApps.tsx +++ b/src/entries/popup/pages/home/ConnectedApps.tsx @@ -269,7 +269,7 @@ const ConnectedApp = ({ }} > diff --git a/src/entries/popup/pages/home/Header.tsx b/src/entries/popup/pages/home/Header.tsx index 7971fcd016..a40cd0183c 100644 --- a/src/entries/popup/pages/home/Header.tsx +++ b/src/entries/popup/pages/home/Header.tsx @@ -86,7 +86,7 @@ export const Header = React.memo(function Header() { paddingRight="2px" > @@ -108,18 +108,17 @@ export const Header = React.memo(function Header() { export function AvatarSection() { const { address } = useAccount(); - const { avatar, isFetched } = useAvatar({ address }); + const { data: avatar } = useAvatar({ addressOrName: address }); + return ( - {isFetched ? ( - <> - {avatar?.imageUrl ? ( - - ) : ( - - )} - - ) : null} + <> + {avatar?.imageUrl ? ( + + ) : ( + + )} + ); @@ -127,7 +126,7 @@ export function AvatarSection() { function ActionButtonsSection() { const { address } = useAccount(); - const { avatar } = useAvatar({ address }); + const { data: avatar } = useAvatar({ addressOrName: address }); const { isWatchingWallet } = useWallets(); const { featureFlags } = useFeatureFlagsStore(); diff --git a/src/entries/popup/pages/home/index.tsx b/src/entries/popup/pages/home/index.tsx index ce259b28a9..5433f68202 100644 --- a/src/entries/popup/pages/home/index.tsx +++ b/src/entries/popup/pages/home/index.tsx @@ -135,7 +135,7 @@ const Tabs = memo(function Tabs() { export const Home = memo(function Home() { const { currentAddress } = useCurrentAddressStore(); - const { avatar } = useAvatar({ address: currentAddress }); + const { data: avatar } = useAvatar({ addressOrName: currentAddress }); const { currentHomeSheet, isDisplayingSheet } = useCurrentHomeSheet(); usePendingTransactionWatcher({ address: currentAddress }); @@ -231,7 +231,7 @@ const TopNav = memo(function TopNav() { address && ( diff --git a/src/entries/popup/pages/hw/addByIndexSheet.tsx b/src/entries/popup/pages/hw/addByIndexSheet.tsx index f82c606490..01a97e7f52 100644 --- a/src/entries/popup/pages/hw/addByIndexSheet.tsx +++ b/src/entries/popup/pages/hw/addByIndexSheet.tsx @@ -420,7 +420,7 @@ export const AddByIndexSheet = ({ /> ) : ( diff --git a/src/entries/popup/pages/hw/success.tsx b/src/entries/popup/pages/hw/success.tsx index 56262b4b91..6599a7f477 100644 --- a/src/entries/popup/pages/hw/success.tsx +++ b/src/entries/popup/pages/hw/success.tsx @@ -63,7 +63,7 @@ const PyramidAvatar = ({ accounts }: { accounts: Address[] }) => { }} > { alignVertical="center" > diff --git a/src/entries/popup/pages/messages/BottomActions/index.tsx b/src/entries/popup/pages/messages/BottomActions/index.tsx index 9911b2d508..1b1039951e 100644 --- a/src/entries/popup/pages/messages/BottomActions/index.tsx +++ b/src/entries/popup/pages/messages/BottomActions/index.tsx @@ -98,7 +98,7 @@ export const BottomWallet = React.forwardRef( }} > @@ -199,7 +199,7 @@ export const BottomSwitchWallet = ({ diff --git a/src/entries/popup/pages/send/ContactPrompt.tsx b/src/entries/popup/pages/send/ContactPrompt.tsx index 11616a4916..182643ed1e 100644 --- a/src/entries/popup/pages/send/ContactPrompt.tsx +++ b/src/entries/popup/pages/send/ContactPrompt.tsx @@ -69,7 +69,7 @@ const SaveOrEditContact = ({ - + {toAddress ? ( - + ) : ( - + diff --git a/src/entries/popup/pages/send/ToAddressInput.tsx b/src/entries/popup/pages/send/ToAddressInput.tsx index 4249f71ce8..3bac366af0 100644 --- a/src/entries/popup/pages/send/ToAddressInput.tsx +++ b/src/entries/popup/pages/send/ToAddressInput.tsx @@ -117,7 +117,7 @@ const WalletRow = ({ > - + @@ -350,7 +350,11 @@ export const ToAddressInput = React.forwardRef( testId={'to-address-input'} leftComponent={ - + } centerComponent={ diff --git a/src/entries/popup/pages/speedUpAndCancelSheet/index.tsx b/src/entries/popup/pages/speedUpAndCancelSheet/index.tsx index 27eee53edb..01a9548311 100644 --- a/src/entries/popup/pages/speedUpAndCancelSheet/index.tsx +++ b/src/entries/popup/pages/speedUpAndCancelSheet/index.tsx @@ -330,7 +330,7 @@ export function SpeedUpAndCancelSheet({ {transaction?.to && ( diff --git a/src/entries/popup/pages/swap/SwapSettings/SwapSettings.tsx b/src/entries/popup/pages/swap/SwapSettings/SwapSettings.tsx index 5bdd69f60b..912fb5e8eb 100644 --- a/src/entries/popup/pages/swap/SwapSettings/SwapSettings.tsx +++ b/src/entries/popup/pages/swap/SwapSettings/SwapSettings.tsx @@ -201,7 +201,7 @@ export const SwapSettings = ({ onDone, }: SwapSettingsProps) => { const { currentAddress } = useCurrentAddressStore(); - const { avatar } = useAvatar({ address: currentAddress }); + const { data: avatar } = useAvatar({ addressOrName: currentAddress }); const { flashbots_enabled: flashbotsEnabledGlobally } = config; const { swapFlashbotsEnabled, setSwapFlashbotsEnabled } = useSwapFlashbotsEnabledStore(); diff --git a/src/entries/popup/pages/walletSwitcher/chooseWalletGroup.tsx b/src/entries/popup/pages/walletSwitcher/chooseWalletGroup.tsx index 326fc40c82..3be79a055d 100644 --- a/src/entries/popup/pages/walletSwitcher/chooseWalletGroup.tsx +++ b/src/entries/popup/pages/walletSwitcher/chooseWalletGroup.tsx @@ -53,7 +53,7 @@ const GroupAvatar = ({ accounts }: { accounts: Address[] }) => { @@ -64,7 +64,7 @@ const GroupAvatar = ({ accounts }: { accounts: Address[] }) => { @@ -79,7 +79,7 @@ const GroupAvatar = ({ accounts }: { accounts: Address[] }) => { @@ -90,7 +90,7 @@ const GroupAvatar = ({ accounts }: { accounts: Address[] }) => { diff --git a/src/entries/popup/pages/walletSwitcher/createWalletPrompt.tsx b/src/entries/popup/pages/walletSwitcher/createWalletPrompt.tsx index b58707482c..e510ac648a 100644 --- a/src/entries/popup/pages/walletSwitcher/createWalletPrompt.tsx +++ b/src/entries/popup/pages/walletSwitcher/createWalletPrompt.tsx @@ -153,7 +153,7 @@ export const CreateWalletPrompt = ({ {address && ( diff --git a/src/entries/popup/pages/walletSwitcher/index.tsx b/src/entries/popup/pages/walletSwitcher/index.tsx index ccf0304d95..75b29deacd 100644 --- a/src/entries/popup/pages/walletSwitcher/index.tsx +++ b/src/entries/popup/pages/walletSwitcher/index.tsx @@ -189,7 +189,7 @@ export function WalletSwitcher() { const [searchQuery, setSearchQuery] = useState(''); const navigate = useRainbowNavigate(); const { visibleWallets: accounts, allWallets, fetchWallets } = useWallets(); - const { avatar } = useAvatar({ address: currentAddress }); + const { data: avatar } = useAvatar({ addressOrName: currentAddress }); const { featureFlags } = useFeatureFlagsStore(); const { trackShortcut } = useKeyboardAnalytics(); diff --git a/src/entries/popup/pages/walletSwitcher/renameWalletPrompt.tsx b/src/entries/popup/pages/walletSwitcher/renameWalletPrompt.tsx index 4b0ed49764..2cf46ed4c7 100644 --- a/src/entries/popup/pages/walletSwitcher/renameWalletPrompt.tsx +++ b/src/entries/popup/pages/walletSwitcher/renameWalletPrompt.tsx @@ -41,7 +41,7 @@ const RenameWallet = ({ - +