complete rework of the token and collectible views

Author: andrewlee348

packages/react-wallet/package.json

@@ -32,6 +32,7 @@
   },
   "dependencies": {
     "@radix-ui/react-popover": "^1.0.7",
+    "micro-observables": "1.7.2",
     "dayjs": "^1.11.11",
     "fuse.js": "^6.6.2",
     "qrcode.react": "^4.0.1",

packages/react-wallet/src/components/InfiniteScroll.tsx

@@ -22,16 +22,21 @@ export const useIntersectionObserver = (ref: RefObject<Element | null>, options?
 interface InfiniteScrollProps {
   onLoad: (pageNumber: number) => Promise<any>
   hasMore?: boolean
+  resetTrigger?: boolean
 }
 
 export const InfiniteScroll = (props: PropsWithChildren<InfiniteScrollProps>) => {
-  const { onLoad, hasMore = true, children } = props
+  const { onLoad, hasMore = true, children, resetTrigger } = props
 
   const [pageNumber, setPageNumber] = useState(0)
   const [isLoading, setLoading] = useState(false)
   const bottomRef = useRef<HTMLDivElement>(null)
   const isBottom = useIntersectionObserver(bottomRef)
 
+  useEffect(() => {
+    setPageNumber(0)
+  }, [resetTrigger])
+
   useEffect(() => {
     if (isBottom && hasMore && !isLoading) {
       handleLoad()

packages/react-wallet/src/components/SlideupDrawer.tsx

@@ -49,11 +49,14 @@ export const SlideupDrawer = ({
           position: 'absolute',
           bottom: 0,
           left: 0,
-          width: '100%'
+          width: '100%',
+          height: '80%',
+          display: 'flex',
+          flexDirection: 'column'
         }}
         onClick={e => e.stopPropagation()}
       >
-        <Card className="p-0 bg-background-primary">
+        <Card className="bg-background-primary p-0" style={{ flex: 1 }}>
           <Card className={cn('flex flex-row rounded-none pt-2', onBackPress ? 'justify-between' : 'justify-center')}>
             {onBackPress && (
               <Button variant="text" className="pt-2" onClick={onBackPress}>
@@ -72,7 +75,9 @@ export const SlideupDrawer = ({
             </div>
             {onBackPress && <div style={{ width: '20px' }}></div>}
           </Card>
-          <Card className="rounded-none bg-background-raised">{children}</Card>
+          <Card className="rounded-none bg-background-raised" style={{ height: '80%', overflowY: 'auto' }}>
+            {children}
+          </Card>
           <Divider className="my-0" />
           <Card className="rounded-none">
             <div

packages/react-wallet/src/hooks/useSettings.ts

@@ -1,16 +1,27 @@
 import { ConnectedWallet, useWallets, LocalStorageKey, useWalletSettings } from '@0xsequence/react-connect'
-import { useState } from 'react'
+import { Observable, observable } from 'micro-observables'
 import { useConfig } from 'wagmi'
 
 import { FiatCurrency, defaultFiatCurrency } from '../constants'
 
+interface MutableObservable<T> extends Observable<T> {
+  set(value: T): void
+}
+
 interface Settings {
   hideCollectibles: boolean
   hideUnlistedTokens: boolean
   fiatCurrency: FiatCurrency
   selectedNetworks: number[]
+  allNetworks: number[]
   selectedWallets: ConnectedWallet[]
   selectedCollections: string[]
+  hideCollectiblesObservable: Observable<boolean>
+  hideUnlistedTokensObservable: Observable<boolean>
+  fiatCurrencyObservable: Observable<FiatCurrency>
+  selectedNetworksObservable: Observable<number[]>
+  selectedWalletsObservable: Observable<ConnectedWallet[]>
+  selectedCollectionsObservable: Observable<string[]>
   setFiatCurrency: (newFiatCurrency: FiatCurrency) => void
   setHideCollectibles: (newState: boolean) => void
   setHideUnlistedTokens: (newState: boolean) => void
@@ -19,27 +30,33 @@ interface Settings {
   setSelectedCollections: (newCollections: string[]) => void
 }
 
-type SettingsItems = Pick<
-  Settings,
-  'hideCollectibles' | 'hideUnlistedTokens' | 'fiatCurrency' | 'selectedWallets' | 'selectedNetworks' | 'selectedCollections'
->
+type SettingsItems = {
+  hideCollectiblesObservable: MutableObservable<boolean>
+  hideUnlistedTokensObservable: MutableObservable<boolean>
+  fiatCurrencyObservable: MutableObservable<FiatCurrency>
+  selectedWalletsObservable: MutableObservable<ConnectedWallet[]>
+  selectedNetworksObservable: MutableObservable<number[]>
+  selectedCollectionsObservable: MutableObservable<string[]>
+}
+
+let settingsObservables: SettingsItems | null = null
 
 export const useSettings = (): Settings => {
   const { readOnlyNetworks, displayedAssets } = useWalletSettings()
   const { chains } = useConfig()
   const { wallets: allWallets } = useWallets()
 
-  const allChains = [
+  const allNetworks = [
     ...new Set([...chains.map(chain => chain.id), ...(readOnlyNetworks || []), ...displayedAssets.map(asset => asset.chainId)])
   ]
 
   const getSettingsFromStorage = (): SettingsItems => {
     let hideUnlistedTokens = true
     let hideCollectibles = false
     let fiatCurrency = defaultFiatCurrency
-    const selectedWallets: ConnectedWallet[] = allWallets
-    let selectedNetworks: number[] = allChains
-    const selectedCollections: string[] = []
+    let selectedWallets: ConnectedWallet[] = allWallets
+    let selectedNetworks: number[] = allNetworks
+    let selectedCollections: string[] = []
 
     try {
       const settingsStorage = localStorage.getItem(LocalStorageKey.Settings)
@@ -54,98 +71,118 @@ export const useSettings = (): Settings => {
       if (settings?.fiatCurrency !== undefined) {
         fiatCurrency = settings?.fiatCurrency as FiatCurrency
       }
+      if (settings?.selectedWallets !== undefined) {
+        selectedWallets = settings?.selectedWallets as ConnectedWallet[]
 
+        const hasInvalidWallets = selectedWallets.some(
+          wallet => !allWallets.some((w: ConnectedWallet) => w.address === wallet.address)
+        )
+
+        const isPartialSelection = selectedWallets.length > 1 && selectedWallets.length !== allWallets.length
+
+        if (hasInvalidWallets || isPartialSelection) {
+          selectedWallets = allWallets
+        }
+      }
       if (settings?.selectedNetworks !== undefined) {
         let areSelectedNetworksValid = true
         settings.selectedNetworks.forEach((chainId: number) => {
-          if (allChains.find(chain => chain === chainId) === undefined) {
+          if (allNetworks.find(chain => chain === chainId) === undefined) {
             areSelectedNetworksValid = false
           }
         })
         if (areSelectedNetworksValid) {
           selectedNetworks = settings?.selectedNetworks as number[]
         }
       }
+      if (settings?.selectedCollections !== undefined) {
+        selectedCollections = settings?.selectedCollections as string[]
+      }
     } catch (e) {
       console.error(e, 'Failed to fetch settings')
     }
 
+    console.log('Creating observable instance', Math.random())
+
     return {
-      hideUnlistedTokens,
-      hideCollectibles,
-      fiatCurrency,
-      selectedWallets,
-      selectedNetworks,
-      selectedCollections
+      hideUnlistedTokensObservable: observable(hideUnlistedTokens),
+      hideCollectiblesObservable: observable(hideCollectibles),
+      fiatCurrencyObservable: observable(fiatCurrency),
+      selectedWalletsObservable: observable(selectedWallets),
+      selectedNetworksObservable: observable(selectedNetworks),
+      selectedCollectionsObservable: observable(selectedCollections)
     }
   }
-  const defaultSettings = getSettingsFromStorage()
 
-  const [settings, setSettings] = useState(defaultSettings)
+  if (!settingsObservables) {
+    settingsObservables = getSettingsFromStorage()
+  }
+
+  const {
+    hideUnlistedTokensObservable,
+    hideCollectiblesObservable,
+    fiatCurrencyObservable,
+    selectedWalletsObservable,
+    selectedNetworksObservable,
+    selectedCollectionsObservable
+  } = settingsObservables
 
   const setHideUnlistedTokens = (newState: boolean) => {
-    const oldSettings = getSettingsFromStorage()
-    const newSettings = {
-      ...oldSettings,
-      hideUnlistedTokens: newState
-    }
-    localStorage.setItem(LocalStorageKey.Settings, JSON.stringify(newSettings))
-    setSettings(newSettings)
+    hideUnlistedTokensObservable.set(newState)
+    updateLocalStorage()
   }
 
-  // TODO: remove later
   const setHideCollectibles = (newState: boolean) => {
-    const oldSettings = getSettingsFromStorage()
-    const newSettings = {
-      ...oldSettings,
-      hideCollectibles: newState
-    }
-    localStorage.setItem(LocalStorageKey.Settings, JSON.stringify(newSettings))
-    setSettings(newSettings)
+    hideCollectiblesObservable.set(newState)
+    updateLocalStorage()
   }
 
   const setFiatCurrency = (newFiatCurrency: FiatCurrency) => {
-    const oldSettings = getSettingsFromStorage()
-    const newSettings = {
-      ...oldSettings,
-      fiatCurrency: newFiatCurrency
-    }
-    localStorage.setItem(LocalStorageKey.Settings, JSON.stringify(newSettings))
-    setSettings(newSettings)
+    fiatCurrencyObservable.set(newFiatCurrency)
+    updateLocalStorage()
   }
 
   const setSelectedWallets = (newSelectedWallets: ConnectedWallet[]) => {
-    const oldSettings = getSettingsFromStorage()
-    const newSettings = {
-      ...oldSettings,
-      selectedWallets: newSelectedWallets
-    }
-    localStorage.setItem(LocalStorageKey.Settings, JSON.stringify(newSettings))
-    setSettings(newSettings)
+    selectedWalletsObservable.set(newSelectedWallets)
+    updateLocalStorage()
   }
 
   const setSelectedNetworks = (newSelectedNetworks: number[]) => {
-    const oldSettings = getSettingsFromStorage()
-    const newSettings = {
-      ...oldSettings,
-      selectedNetworks: newSelectedNetworks
-    }
-    localStorage.setItem(LocalStorageKey.Settings, JSON.stringify(newSettings))
-    setSettings(newSettings)
+    selectedNetworksObservable.set(newSelectedNetworks)
+    updateLocalStorage()
   }
 
   const setSelectedCollections = (newSelectedCollections: string[]) => {
-    const oldSettings = getSettingsFromStorage()
+    selectedCollectionsObservable.set(newSelectedCollections)
+    updateLocalStorage()
+  }
+
+  const updateLocalStorage = () => {
     const newSettings = {
-      ...oldSettings,
-      selectedCollections: newSelectedCollections
+      hideUnlistedTokens: hideUnlistedTokensObservable.get(),
+      hideCollectibles: hideCollectiblesObservable.get(),
+      fiatCurrency: fiatCurrencyObservable.get(),
+      selectedWallets: selectedWalletsObservable.get(),
+      selectedNetworks: selectedNetworksObservable.get(),
+      selectedCollections: selectedCollectionsObservable.get()
     }
     localStorage.setItem(LocalStorageKey.Settings, JSON.stringify(newSettings))
-    setSettings(newSettings)
   }
 
   return {
-    ...settings,
+    hideUnlistedTokens: hideUnlistedTokensObservable.get(),
+    hideCollectibles: hideCollectiblesObservable.get(),
+    fiatCurrency: fiatCurrencyObservable.get(),
+    selectedWallets: selectedWalletsObservable.get(),
+    selectedNetworks: selectedNetworksObservable.get(),
+    allNetworks: allNetworks,
+    selectedCollections: selectedCollectionsObservable.get(),
+    hideUnlistedTokensObservable,
+    hideCollectiblesObservable,
+    fiatCurrencyObservable,
+    selectedWalletsObservable,
+    selectedNetworksObservable,
+    selectedCollectionsObservable,
     setFiatCurrency,
     setHideCollectibles,
     setHideUnlistedTokens,

packages/react-wallet/src/utils/tokens.ts

@@ -1,7 +1,7 @@
 import { TokenPrice } from '@0xsequence/api'
 import { TokenBalance, GetTransactionHistoryReturn, Transaction } from '@0xsequence/indexer'
 import { compareAddress } from '@0xsequence/react-connect'
-import { InfiniteData } from '@tanstack/react-query'
+import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query'
 import { ethers } from 'ethers'
 
 export const getPercentageColor = (value: number) => {
@@ -96,3 +96,21 @@ export const flattenPaginatedTransactionHistory = (
 
   return transactionHistory
 }
+
+export const getMoreBalances = (balances: TokenBalance[], pageSize: number, options?: { enabled: boolean }) => {
+  return useInfiniteQuery({
+    queryKey: ['infiniteBalances', balances],
+    queryFn: ({ pageParam }) => {
+      const startIndex = pageParam * pageSize
+      return balances.slice(startIndex, startIndex + pageSize)
+    },
+    getNextPageParam: (lastPage, allPages) => {
+      if (lastPage.length < pageSize) {
+        return undefined
+      }
+      return allPages.length
+    },
+    initialPageParam: 0,
+    enabled: !!balances.length && (options?.enabled ?? true)
+  })
+}