fix: wallet ui wrong position when window size change (#2415)

* fix: wallet ui wrong position when window size change * fix: tokenlist empty
KyberNetwork · Dec 5, 2023 · 1d4b84a · 1d4b84a
1 parent 4ae24f8
commit 1d4b84a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git 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 (
     <ContentWrapper>
       <PaddedColumn gap="14px">
@@ -446,13 +453,13 @@ export function CurrencySearch({
               columnGap: '24px',
             }}
           >
-            <TabButton data-active={activeTab === Tab.All} onClick={() => setActiveTab(Tab.All)} data-testid="tab-all">
+            <TabButton data-active={activeTab === Tab.All} onClick={() => onChangeTab(Tab.All)} data-testid="tab-all">
               <Text as="span" fontSize={14} fontWeight={500}>
                 <Trans>All</Trans>
               </Text>
             </TabButton>
 
-            <TabButton data-active={isImportedTab} onClick={() => setActiveTab(Tab.Imported)} data-testid="tab-import">
+            <TabButton data-active={isImportedTab} onClick={() => onChangeTab(Tab.Imported)} data-testid="tab-import">
               <Text as="span" fontSize={14} fontWeight={500}>
                 <Trans>Imported</Trans>
               </Text>

diff --git 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<Props> = ({ 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<Props> = ({ isModalOpen, onDismissModal, isPinned, s
       </Modal>
     )
   }
-
+  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<Props> = ({ isModalOpen, onDismissModal, isPinned, s
       {shouldOpenPopup &&
         createPortal(
           <Rnd
+            key={key}
             default={{
               x: left,
               y: top,