added provider for FiatWalletsMap to fix reloading bug

andrewlee348 · andrewlee348 · commit ad4a7693bd1f · 2025-04-02T10:01:09.000-04:00
diff --git a/packages/wallet-widget/src/components/SelectWalletRow.tsx b/packages/wallet-widget/src/components/SelectWalletRow.tsx
@@ -2,6 +2,7 @@ import { formatAddress, ConnectedWallet } from '@0xsequence/connect'
 import { Text } from '@0xsequence/design-system'
 
 import { useSettings } from '../hooks'
+import { useFiatWalletsMap } from '../hooks/useFiatWalletsMap'
 import { getConnectorLogo } from '../utils/wallets'
 
 import { ListCardSelect } from './ListCard'
@@ -16,14 +17,15 @@ export const SelectWalletRow = ({
   setActiveWallet: (address: string) => void
   onClose: () => void
 }) => {
-  const { fiatCurrency, walletsWithFiatValue } = useSettings()
+  const { fiatCurrency } = useSettings()
+  const { fiatWalletsMap } = useFiatWalletsMap()
 
-  const onSelectWallet = () => {
+  function onSelectWallet() {
     setActiveWallet(wallet.address)
     onClose()
   }
 
-  const fiatValue = walletsWithFiatValue.find(w => w.accountAddress === wallet.address)?.fiatValue
+  const fiatValue = fiatWalletsMap.find(w => w.accountAddress === wallet.address)?.fiatValue
 
   return (
     <ListCardSelect
diff --git a/packages/wallet-widget/src/components/SequenceWalletProvider/ProviderComponents/FiatWalletsMapProvider.tsx b/packages/wallet-widget/src/components/SequenceWalletProvider/ProviderComponents/FiatWalletsMapProvider.tsx
@@ -0,0 +1,75 @@
+import { compareAddress, ContractVerificationStatus, useWallets } from '@0xsequence/connect'
+import { useGetExchangeRate, useGetCoinPrices, useGetTokenBalancesDetails } from '@0xsequence/hooks'
+import { useState, ReactNode, useEffect } from 'react'
+import { zeroAddress, getAddress } from 'viem'
+
+import { FiatWalletPair, FiatWalletsMapContextProvider } from '../../../contexts'
+import { useSettings } from '../../../hooks'
+import { computeBalanceFiat } from '../../../utils'
+
+// Define the provider component
+export const FiatWalletsMapProvider = ({ children }: { children: ReactNode }) => {
+  const { wallets } = useWallets()
+  const { selectedNetworks, selectedWallets, hideUnlistedTokens, fiatCurrency } = useSettings()
+
+  const [fiatWalletsMap, setFiatWalletsMap] = useState<FiatWalletPair[]>([])
+
+  const { data: tokenBalancesData, isPending: isTokenBalancesPending } = useGetTokenBalancesDetails({
+    chainIds: selectedNetworks,
+    filter: {
+      accountAddresses: selectedWallets.map(wallet => wallet.address),
+      contractStatus: hideUnlistedTokens ? ContractVerificationStatus.VERIFIED : ContractVerificationStatus.ALL,
+      omitNativeBalances: false
+    }
+  })
+
+  const coinBalancesUnordered =
+    tokenBalancesData?.filter(b => b.contractType === 'ERC20' || compareAddress(b.contractAddress, zeroAddress)) || []
+
+  const { data: coinPrices = [], isPending: isCoinPricesPending } = useGetCoinPrices(
+    coinBalancesUnordered.map(token => ({
+      chainId: token.chainId,
+      contractAddress: token.contractAddress
+    }))
+  )
+
+  const { data: conversionRate, isPending: isConversionRatePending } = useGetExchangeRate(fiatCurrency.symbol)
+
+  useEffect(() => {
+    if (
+      !isTokenBalancesPending &&
+      !isCoinPricesPending &&
+      !isConversionRatePending &&
+      coinBalancesUnordered.length > 0 &&
+      coinPrices.length > 0 &&
+      conversionRate
+    ) {
+      const newFiatWalletsMap = wallets.map(wallet => {
+        const walletBalances = coinBalancesUnordered.filter(b => getAddress(b.accountAddress) === getAddress(wallet.address))
+        const walletFiatValue = walletBalances.reduce((acc, coin) => {
+          return (
+            acc +
+            Number(
+              computeBalanceFiat({
+                balance: coin,
+                prices: coinPrices,
+                conversionRate,
+                decimals: coin.contractInfo?.decimals || 18
+              })
+            )
+          )
+        }, 0)
+        return {
+          accountAddress: wallet.address,
+          fiatValue: walletFiatValue.toFixed(2)
+        } as FiatWalletPair
+      })
+
+      if (JSON.stringify(newFiatWalletsMap) !== JSON.stringify(fiatWalletsMap)) {
+        setFiatWalletsMap(newFiatWalletsMap)
+      }
+    }
+  }, [coinBalancesUnordered, coinPrices, conversionRate, fiatCurrency, selectedNetworks, selectedWallets, hideUnlistedTokens])
+
+  return <FiatWalletsMapContextProvider value={{ fiatWalletsMap, setFiatWalletsMap }}>{children}</FiatWalletsMapContextProvider>
+}
diff --git a/packages/wallet-widget/src/components/SequenceWalletProvider/ProviderComponents/WalletConnectSignClientProvider.tsx b/packages/wallet-widget/src/components/SequenceWalletProvider/ProviderComponents/WalletConnectSignClientProvider.tsx
diff --git a/packages/wallet-widget/src/components/SequenceWalletProvider/SequenceWalletProvider.tsx b/packages/wallet-widget/src/components/SequenceWalletProvider/SequenceWalletProvider.tsx
@@ -9,6 +9,7 @@ import React, { useState } from 'react'
 import { HEADER_HEIGHT, HEADER_HEIGHT_WITH_LABEL } from '../../constants'
 import { History, Navigation, NavigationContextProvider, WalletModalContextProvider, WalletOptions } from '../../contexts'
 
+import { FiatWalletsMapProvider } from './ProviderComponents/FiatWalletsMapProvider'
 import { getHeader, getContent } from './utils'
 
 export const WALLET_WIDTH = 460
@@ -86,36 +87,38 @@ export const WalletContent = ({ children }: SequenceWalletProviderProps) => {
   return (
     <WalletModalContextProvider value={{ setOpenWalletModal, openWalletModalState: openWalletModal }}>
       <NavigationContextProvider value={{ setHistory, history, isBackButtonEnabled, setIsBackButtonEnabled }}>
-        <ShadowRoot theme={theme}>
-          <AnimatePresence>
-            {openWalletModal && !isAddFundsModalOpen && !isConnectModalOpen && (
-              <Modal
-                contentProps={{
-                  style: {
-                    maxWidth: WALLET_WIDTH,
-                    height: 'fit-content',
-                    ...getModalPositionCss(position),
-                    scrollbarColor: 'gray black',
-                    scrollbarWidth: 'thin'
-                  }
-                }}
-                scroll={false}
-                onClose={() => setOpenWalletModal(false)}
-              >
-                <div id="sequence-kit-wallet-content">
-                  {getHeader(navigation)}
+        <FiatWalletsMapProvider>
+          <ShadowRoot theme={theme}>
+            <AnimatePresence>
+              {openWalletModal && !isAddFundsModalOpen && !isConnectModalOpen && (
+                <Modal
+                  contentProps={{
+                    style: {
+                      maxWidth: WALLET_WIDTH,
+                      height: 'fit-content',
+                      ...getModalPositionCss(position),
+                      scrollbarColor: 'gray black',
+                      scrollbarWidth: 'thin'
+                    }
+                  }}
+                  scroll={false}
+                  onClose={() => setOpenWalletModal(false)}
+                >
+                  <div id="sequence-kit-wallet-content">
+                    {getHeader(navigation)}
 
-                  {displayScrollbar ? (
-                    <Scroll style={{ paddingTop: paddingTop, height: 'min(800px, 90vh)' }}>{getContent(navigation)}</Scroll>
-                  ) : (
-                    getContent(navigation)
-                  )}
-                </div>
-              </Modal>
-            )}
-          </AnimatePresence>
-        </ShadowRoot>
-        {children}
+                    {displayScrollbar ? (
+                      <Scroll style={{ paddingTop: paddingTop, height: 'min(800px, 90vh)' }}>{getContent(navigation)}</Scroll>
+                    ) : (
+                      getContent(navigation)
+                    )}
+                  </div>
+                </Modal>
+              )}
+            </AnimatePresence>
+          </ShadowRoot>
+          {children}
+        </FiatWalletsMapProvider>
       </NavigationContextProvider>
     </WalletModalContextProvider>
   )
diff --git a/packages/wallet-widget/src/contexts/FiatWalletsMap.ts b/packages/wallet-widget/src/contexts/FiatWalletsMap.ts
@@ -0,0 +1,15 @@
+import { createGenericContext } from './genericContext'
+
+export interface FiatWalletPair {
+  accountAddress: string
+  fiatValue: string
+}
+
+export interface FiatWalletsMapContext {
+  fiatWalletsMap: FiatWalletPair[]
+  setFiatWalletsMap: (fiatWalletsMap: FiatWalletPair[]) => void
+}
+
+const [useFiatWalletsMapContext, FiatWalletsMapContextProvider] = createGenericContext<FiatWalletsMapContext>()
+
+export { useFiatWalletsMapContext, FiatWalletsMapContextProvider }
diff --git a/packages/wallet-widget/src/contexts/index.ts b/packages/wallet-widget/src/contexts/index.ts
@@ -1,2 +1,3 @@
 export * from './WalletModal'
 export * from './Navigation'
+export * from './FiatWalletsMap'
diff --git a/packages/wallet-widget/src/hooks/useFiatWalletsMap.ts b/packages/wallet-widget/src/hooks/useFiatWalletsMap.ts
@@ -0,0 +1,7 @@
+import { useFiatWalletsMapContext } from '../contexts/FiatWalletsMap'
+
+export const useFiatWalletsMap = () => {
+  const { fiatWalletsMap, setFiatWalletsMap } = useFiatWalletsMapContext()
+
+  return { fiatWalletsMap, setFiatWalletsMap }
+}
diff --git a/packages/wallet-widget/src/hooks/useSettings.ts b/packages/wallet-widget/src/hooks/useSettings.ts
@@ -16,11 +16,6 @@ export interface SettingsCollection {
   }
 }
 
-export interface WalletsWithFiatValue {
-  accountAddress: string
-  fiatValue: string
-}
-
 interface Settings {
   hideCollectibles: boolean
   hideUnlistedTokens: boolean
@@ -29,21 +24,18 @@ interface Settings {
   allNetworks: number[]
   selectedWallets: ConnectedWallet[]
   selectedCollections: SettingsCollection[]
-  walletsWithFiatValue: WalletsWithFiatValue[]
   hideCollectiblesObservable: Observable<boolean>
   hideUnlistedTokensObservable: Observable<boolean>
   fiatCurrencyObservable: Observable<FiatCurrency>
   selectedNetworksObservable: Observable<number[]>
   selectedWalletsObservable: Observable<ConnectedWallet[]>
   selectedCollectionsObservable: Observable<SettingsCollection[]>
-  walletsWithFiatValueObservable: Observable<WalletsWithFiatValue[]>
   setFiatCurrency: (newFiatCurrency: FiatCurrency) => void
   setHideCollectibles: (newState: boolean) => void
   setHideUnlistedTokens: (newState: boolean) => void
   setSelectedWallets: (newWallets: ConnectedWallet[]) => void
   setSelectedNetworks: (newNetworks: number[]) => void
   setSelectedCollections: (newCollections: SettingsCollection[]) => void
-  setWalletsWithFiatValue: (newWalletsWithFiatValue: WalletsWithFiatValue[]) => void
 }
 
 type SettingsItems = {
@@ -53,7 +45,6 @@ type SettingsItems = {
   selectedWalletsObservable: MutableObservable<ConnectedWallet[]>
   selectedNetworksObservable: MutableObservable<number[]>
   selectedCollectionsObservable: MutableObservable<SettingsCollection[]>
-  walletsWithFiatValueObservable: MutableObservable<WalletsWithFiatValue[]>
 }
 
 let settingsObservables: SettingsItems | null = null
@@ -74,7 +65,6 @@ export const useSettings = (): Settings => {
     let selectedWallets: ConnectedWallet[] = allWallets
     let selectedNetworks: number[] = allNetworks
     let selectedCollections: SettingsCollection[] = []
-    const walletsWithFiatValue: WalletsWithFiatValue[] = []
 
     try {
       const settingsStorage = localStorage.getItem(LocalStorageKey.Settings)
@@ -133,8 +123,7 @@ export const useSettings = (): Settings => {
       fiatCurrencyObservable: observable(fiatCurrency),
       selectedWalletsObservable: observable(selectedWallets),
       selectedNetworksObservable: observable(selectedNetworks),
-      selectedCollectionsObservable: observable(selectedCollections),
-      walletsWithFiatValueObservable: observable(walletsWithFiatValue)
+      selectedCollectionsObservable: observable(selectedCollections)
     }
   }
 
@@ -167,8 +156,7 @@ export const useSettings = (): Settings => {
     fiatCurrencyObservable,
     selectedWalletsObservable,
     selectedNetworksObservable,
-    selectedCollectionsObservable,
-    walletsWithFiatValueObservable
+    selectedCollectionsObservable
   } = settingsObservables
 
   const setHideUnlistedTokens = (newState: boolean) => {
@@ -217,20 +205,14 @@ export const useSettings = (): Settings => {
     }
   }
 
-  const setWalletsWithFiatValue = (newWalletsWithFiatValue: WalletsWithFiatValue[]) => {
-    walletsWithFiatValueObservable.set(newWalletsWithFiatValue)
-    updateLocalStorage()
-  }
-
   const updateLocalStorage = () => {
     const newSettings = {
       hideUnlistedTokens: hideUnlistedTokensObservable.get(),
       hideCollectibles: hideCollectiblesObservable.get(),
       fiatCurrency: fiatCurrencyObservable.get(),
       selectedWallets: selectedWalletsObservable.get(),
       selectedNetworks: selectedNetworksObservable.get(),
-      selectedCollections: selectedCollectionsObservable.get(),
-      walletsWithFiatValue: walletsWithFiatValueObservable.get()
+      selectedCollections: selectedCollectionsObservable.get()
     }
     console.log('settings updated', newSettings)
     localStorage.setItem(LocalStorageKey.Settings, JSON.stringify(newSettings))
@@ -244,20 +226,17 @@ export const useSettings = (): Settings => {
     selectedNetworks: selectedNetworksObservable.get(),
     allNetworks: allNetworks,
     selectedCollections: selectedCollectionsObservable.get(),
-    walletsWithFiatValue: walletsWithFiatValueObservable.get(),
     hideUnlistedTokensObservable,
     hideCollectiblesObservable,
     fiatCurrencyObservable,
     selectedWalletsObservable,
     selectedNetworksObservable,
     selectedCollectionsObservable,
-    walletsWithFiatValueObservable,
     setFiatCurrency,
     setHideCollectibles,
     setHideUnlistedTokens,
     setSelectedWallets,
     setSelectedNetworks,
-    setSelectedCollections,
-    setWalletsWithFiatValue
+    setSelectedCollections
   }
 }
diff --git a/packages/wallet-widget/src/views/FilterMenu.tsx b/packages/wallet-widget/src/views/FilterMenu.tsx
@@ -12,6 +12,7 @@ import { ListCardSelect } from '../components/ListCard/ListCardSelect'
 import { SlideupDrawer } from '../components/SlideupDrawer'
 import { WalletAccountGradient } from '../components/WalletAccountGradient'
 import { useSettings } from '../hooks'
+import { useFiatWalletsMap } from '../hooks/useFiatWalletsMap'
 import { getConnectorLogo } from '../utils/wallets'
 
 enum FilterType {
@@ -41,17 +42,17 @@ export const FilterMenu = ({
     selectedNetworksObservable,
     selectedCollectionsObservable,
     fiatCurrency,
-    walletsWithFiatValue,
     setSelectedWallets,
     setSelectedNetworks,
     setSelectedCollections
   } = useSettings()
+  const { fiatWalletsMap } = useFiatWalletsMap()
 
   const selectedWallets = useObservable(selectedWalletsObservable)
   const selectedNetworks = useObservable(selectedNetworksObservable)
   const selectedCollections = useObservable(selectedCollectionsObservable)
 
-  const totalFiatValue = walletsWithFiatValue.reduce((acc, wallet) => acc + Number(wallet.fiatValue), 0)
+  const totalFiatValue = fiatWalletsMap.reduce((acc, wallet) => acc + Number(wallet.fiatValue), 0)
 
   const { data: tokens } = useGetTokenBalancesSummary({
     chainIds: selectedNetworks,
@@ -185,7 +186,7 @@ export const FilterMenu = ({
               rightChildren={
                 <Text color="muted" fontWeight="medium" variant="normal">
                   {fiatCurrency.sign}
-                  {walletsWithFiatValue.find(w => w.accountAddress === wallet.address)?.fiatValue}
+                  {fiatWalletsMap.find(w => w.accountAddress === wallet.address)?.fiatValue}
                 </Text>
               }
               onClick={() => setSelectedWallets([wallet])}
diff --git a/packages/wallet-widget/src/views/Home/IntegratedWallet/index.tsx b/packages/wallet-widget/src/views/Home/IntegratedWallet/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,3 @@`
`1`	`1`	`export * from './WalletModal'`
`2`	`2`	`export * from './Navigation'`
	`3`	`+export * from './FiatWalletsMap'`