diff --git a/src/components/SearchModal/CurrencySearch.tsx b/src/components/SearchModal/CurrencySearch.tsx index b0f90d852a..aed2696ce4 100644 --- a/src/components/SearchModal/CurrencySearch.tsx +++ b/src/components/SearchModal/CurrencySearch.tsx @@ -379,6 +379,13 @@ export function CurrencySearch({ tokenImports?.forEach(removeImportedToken) } + const onChangeTab = (tab: Tab) => { + if (!debouncedQuery && tab === Tab.All) { + setFetchedTokens(Object.values(defaultTokens)) + } + setActiveTab(tab) + } + return ( @@ -446,13 +453,13 @@ export function CurrencySearch({ columnGap: '24px', }} > - setActiveTab(Tab.All)} data-testid="tab-all"> + onChangeTab(Tab.All)} data-testid="tab-all"> All - setActiveTab(Tab.Imported)} data-testid="tab-import"> + onChangeTab(Tab.Imported)} data-testid="tab-import"> Imported diff --git a/src/components/WalletPopup/index.tsx b/src/components/WalletPopup/index.tsx index aa2fef74e8..9d03be970a 100644 --- a/src/components/WalletPopup/index.tsx +++ b/src/components/WalletPopup/index.tsx @@ -1,4 +1,4 @@ -import { useCallback, useState } from 'react' +import { useCallback, useEffect, useState } from 'react' import { isMobile } from 'react-device-detect' import { createPortal } from 'react-dom' import { Rnd } from 'react-rnd' @@ -21,8 +21,6 @@ const GlobalStyle = createGlobalStyle<{ $pinned: boolean }>` } ` -const viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0) -const viewportHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0) const defaultWidth = 410 const defaultHeight = 680 @@ -61,6 +59,15 @@ const WalletPopup: React.FC = ({ isModalOpen, onDismissModal, isPinned, s mixpanelHandler(MIXPANEL_TYPE.WUI_UNPINNED_WALLET) } + const [key, setKey] = useState(0) + useEffect(() => { + const resizeHandler = () => { + if (isPinned) setKey(Date.now()) + } + window.addEventListener('resize', resizeHandler) + return () => window.removeEventListener('resize', resizeHandler) + }, [isPinned]) + if (!rootNode) { return null } @@ -98,7 +105,8 @@ const WalletPopup: React.FC = ({ isModalOpen, onDismissModal, isPinned, s ) } - + const viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0) + const viewportHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0) const offset = isPinned ? 10 : 0 const left = viewportWidth - offset - defaultWidth const top = viewportHeight - offset - defaultHeight @@ -109,6 +117,7 @@ const WalletPopup: React.FC = ({ isModalOpen, onDismissModal, isPinned, s {shouldOpenPopup && createPortal(