@0xsequence/wallet-widget 0.0.0-20250314205219

package/src/views/Search/SearchWalletViewAll.tsx

@@ -0,0 +1,265 @@
+import { getNativeTokenInfoByChainId, ContractVerificationStatus, compareAddress } from '@0xsequence/connect'
+import { SearchIcon, Skeleton, TabsContent, TabsHeader, TabsRoot, TextInput } from '@0xsequence/design-system'
+import { useGetTokenBalancesSummary, useGetCoinPrices, useGetExchangeRate } from '@0xsequence/react-hooks'
+import Fuse from 'fuse.js'
+import { useState, useEffect } from 'react'
+import { zeroAddress } from 'viem'
+import { useAccount, useConfig } from 'wagmi'
+
+import { useSettings } from '../../hooks'
+import { computeBalanceFiat } from '../../utils'
+
+import { CoinsTab } from './components/CoinsTab'
+import { CollectionsTab } from './components/CollectionsTab'
+
+interface SearchWalletViewAllProps {
+  defaultTab: 'coins' | 'collections'
+}
+
+export interface IndexedData {
+  index: number
+  name: string
+}
+
+export const SearchWalletViewAll = ({ defaultTab }: SearchWalletViewAllProps) => {
+  const { chains } = useConfig()
+  const { fiatCurrency, hideUnlistedTokens, selectedNetworks } = useSettings()
+  const [search, setSearch] = useState('')
+  const [selectedTab, setSelectedTab] = useState(defaultTab)
+
+  const pageSize = 20
+  const [displayedCoinBalances, setDisplayedCoinBalances] = useState<IndexedData[]>([])
+  const [displayedCollectionBalances, setDisplayedCollectionBalances] = useState<IndexedData[]>([])
+
+  const [displayedSearchCoinBalances, setDisplayedSearchCoinBalances] = useState<IndexedData[]>([])
+  const [displayedSearchCollectionBalances, setDisplayedSearchCollectionBalances] = useState<IndexedData[]>([])
+
+  const [initCoinsFlag, setInitCoinsFlag] = useState(false)
+  const [initCollectionsFlag, setInitCollectionsFlag] = useState(false)
+
+  const [hasMoreCoins, sethasMoreCoins] = useState(false)
+  const [hasMoreCollections, sethasMoreCollections] = useState(false)
+
+  const [hasMoreSearchCoins, sethasMoreSearchCoins] = useState(false)
+  const [hasMoreSearchCollections, sethasMoreSearchCollections] = useState(false)
+
+  const { address: accountAddress } = useAccount()
+
+  const { data: tokenBalancesData, isPending: isPendingTokenBalances } = useGetTokenBalancesSummary({
+    chainIds: selectedNetworks,
+    filter: {
+      accountAddresses: accountAddress ? [accountAddress] : [],
+      contractStatus: hideUnlistedTokens ? ContractVerificationStatus.VERIFIED : ContractVerificationStatus.ALL,
+      omitNativeBalances: false
+    }
+  })
+
+  const coinBalancesUnordered =
+    tokenBalancesData?.filter(b => b.contractType === 'ERC20' || compareAddress(b.contractAddress, zeroAddress)) || []
+
+  const { data: coinPrices = [], isPending: isPendingCoinPrices } = useGetCoinPrices(
+    coinBalancesUnordered.map(token => ({
+      chainId: token.chainId,
+      contractAddress: token.contractAddress
+    }))
+  )
+
+  const { data: conversionRate = 1, isPending: isPendingConversionRate } = useGetExchangeRate(fiatCurrency.symbol)
+
+  const coinBalances = coinBalancesUnordered.sort((a, b) => {
+    const fiatA = computeBalanceFiat({
+      balance: a,
+      prices: coinPrices,
+      conversionRate,
+      decimals: a.contractInfo?.decimals || 18
+    })
+    const fiatB = computeBalanceFiat({
+      balance: b,
+      prices: coinPrices,
+      conversionRate,
+      decimals: b.contractInfo?.decimals || 18
+    })
+    return Number(fiatB) - Number(fiatA)
+  })
+
+  const collectionBalancesUnordered =
+    tokenBalancesData?.filter(b => b.contractType === 'ERC721' || b.contractType === 'ERC1155') || []
+
+  const collectionBalances = collectionBalancesUnordered.sort((a, b) => {
+    return Number(b.balance) - Number(a.balance)
+  })
+
+  const coinBalancesAmount = coinBalances.length
+  const collectionBalancesAmount = collectionBalances.length
+
+  const isPending = isPendingTokenBalances || isPendingCoinPrices || isPendingConversionRate
+
+  const indexedCoinBalances: IndexedData[] = coinBalances.map((balance, index) => {
+    if (compareAddress(balance.contractAddress, zeroAddress)) {
+      const nativeTokenInfo = getNativeTokenInfoByChainId(balance.chainId, chains)
+
+      return {
+        index,
+        name: nativeTokenInfo.name
+      }
+    } else {
+      return {
+        index,
+        name: balance.contractInfo?.name || 'Unknown'
+      }
+    }
+  })
+
+  const indexedCollectionBalances: IndexedData[] = collectionBalances.map((balance, index) => ({
+    index,
+    name: balance.contractInfo?.name || 'Unknown'
+  }))
+
+  useEffect(() => {
+    if (!initCoinsFlag && indexedCoinBalances.length > 0) {
+      setDisplayedCoinBalances(indexedCoinBalances.slice(0, pageSize))
+      sethasMoreCoins(indexedCoinBalances.length > pageSize)
+      setInitCoinsFlag(true)
+    }
+  }, [initCoinsFlag])
+
+  useEffect(() => {
+    if (!initCollectionsFlag && indexedCollectionBalances.length > 0) {
+      setDisplayedCollectionBalances(indexedCollectionBalances.slice(0, pageSize))
+      sethasMoreCollections(indexedCollectionBalances.length > pageSize)
+      setInitCollectionsFlag(true)
+    }
+  }, [initCollectionsFlag])
+
+  useEffect(() => {
+    if (search !== '') {
+      setDisplayedSearchCoinBalances(
+        fuzzySearchCoinBalances
+          .search(search)
+          .map(result => result.item)
+          .slice(0, pageSize)
+      )
+      sethasMoreSearchCoins(fuzzySearchCoinBalances.search(search).length > pageSize)
+    }
+  }, [search])
+
+  useEffect(() => {
+    if (search !== '') {
+      setDisplayedSearchCollectionBalances(
+        fuzzySearchCollections
+          .search(search)
+          .map(result => result.item)
+          .slice(0, pageSize)
+      )
+      sethasMoreSearchCollections(fuzzySearchCollections.search(search).length > pageSize)
+    }
+  }, [search])
+
+  const fetchMoreCoinBalances = () => {
+    if (displayedCoinBalances.length >= indexedCoinBalances.length) {
+      sethasMoreCoins(false)
+      return
+    }
+    setDisplayedCoinBalances(indexedCoinBalances.slice(0, displayedCoinBalances.length + pageSize))
+  }
+
+  const fetchMoreCollectionBalances = () => {
+    if (displayedCollectionBalances.length >= indexedCollectionBalances.length) {
+      sethasMoreCollections(false)
+      return
+    }
+    setDisplayedCollectionBalances(indexedCollectionBalances.slice(0, displayedCollectionBalances.length + pageSize))
+  }
+
+  const fetchMoreSearchCoinBalances = () => {
+    if (displayedSearchCoinBalances.length >= fuzzySearchCoinBalances.search(search).length) {
+      sethasMoreSearchCoins(false)
+      return
+    }
+    setDisplayedSearchCoinBalances(
+      fuzzySearchCoinBalances
+        .search(search)
+        .map(result => result.item)
+        .slice(0, displayedSearchCoinBalances.length + pageSize)
+    )
+  }
+
+  const fetchMoreSearchCollectionBalances = () => {
+    if (displayedSearchCollectionBalances.length >= fuzzySearchCollections.search(search).length) {
+      sethasMoreSearchCollections(false)
+      return
+    }
+    setDisplayedSearchCollectionBalances(
+      fuzzySearchCollections
+        .search(search)
+        .map(result => result.item)
+        .slice(0, displayedSearchCollectionBalances.length + pageSize)
+    )
+  }
+
+  const fuzzySearchCoinBalances = new Fuse(indexedCoinBalances, {
+    keys: ['name']
+  })
+
+  const fuzzySearchCollections = new Fuse(indexedCollectionBalances, {
+    keys: ['name']
+  })
+
+  return (
+    <div className="flex px-4 pb-5 pt-3 flex-col gap-5 items-center justify-center">
+      <div className="w-full">
+        <TextInput
+          autoFocus
+          name="search wallet"
+          leftIcon={SearchIcon}
+          value={search}
+          onChange={ev => setSearch(ev.target.value)}
+          placeholder="Search your wallet"
+          data-1p-ignore
+        />
+      </div>
+      <div className="w-full">
+        <TabsRoot value={selectedTab} onValueChange={value => setSelectedTab(value as 'coins' | 'collections')}>
+          <div className="mb-5">
+            {!isPending && (
+              <TabsHeader
+                value={selectedTab}
+                tabs={[
+                  { label: `Coins (${coinBalancesAmount})`, value: 'coins' },
+                  { label: `Collections (${collectionBalancesAmount})`, value: 'collections' }
+                ]}
+              />
+            )}
+            {isPending && <Skeleton style={{ width: '360px', height: '48px' }} />}
+          </div>
+
+          <TabsContent value="collections">
+            <CollectionsTab
+              displayedCollectionBalances={search ? displayedSearchCollectionBalances : displayedCollectionBalances}
+              fetchMoreCollectionBalances={fetchMoreCollectionBalances}
+              fetchMoreSearchCollectionBalances={fetchMoreSearchCollectionBalances}
+              hasMoreCollections={hasMoreCollections}
+              hasMoreSearchCollections={hasMoreSearchCollections}
+              isSearching={search !== ''}
+              isPending={isPending}
+              collectionBalances={collectionBalances}
+            />
+          </TabsContent>
+
+          <TabsContent value="coins">
+            <CoinsTab
+              displayedCoinBalances={search ? displayedSearchCoinBalances : displayedCoinBalances}
+              fetchMoreCoinBalances={fetchMoreCoinBalances}
+              fetchMoreSearchCoinBalances={fetchMoreSearchCoinBalances}
+              hasMoreCoins={hasMoreCoins}
+              hasMoreSearchCoins={hasMoreSearchCoins}
+              isSearching={search !== ''}
+              isPending={isPending}
+              coinBalances={coinBalances}
+            />
+          </TabsContent>
+        </TabsRoot>
+      </div>
+    </div>
+  )
+}

package/src/views/Search/components/BalanceItem.tsx

@@ -0,0 +1,76 @@
+import { compareAddress, formatDisplay, getNativeTokenInfoByChainId } from '@0xsequence/connect'
+import { Text, ChevronRightIcon, TokenImage } from '@0xsequence/design-system'
+import { TokenBalance } from '@0xsequence/indexer'
+import React from 'react'
+import { formatUnits, zeroAddress } from 'viem'
+import { useConfig } from 'wagmi'
+
+import { useNavigation } from '../../../hooks'
+
+interface BalanceItemProps {
+  balance: TokenBalance
+}
+
+export const BalanceItem = ({ balance }: BalanceItemProps) => {
+  const { chains } = useConfig()
+  const { setNavigation } = useNavigation()
+  const isNativeToken = compareAddress(balance.contractAddress, zeroAddress)
+  const nativeTokenInfo = getNativeTokenInfoByChainId(balance.chainId, chains)
+  const logoURI = isNativeToken ? nativeTokenInfo.logoURI : balance?.contractInfo?.logoURI
+  const tokenName = isNativeToken ? nativeTokenInfo.name : balance?.contractInfo?.name || 'Unknown'
+  const symbol = isNativeToken ? nativeTokenInfo.symbol : balance?.contractInfo?.symbol
+
+  const getQuantity = () => {
+    if (balance.contractType === 'ERC721' || balance.contractType === 'ERC1155') {
+      return balance.uniqueCollectibles
+    }
+    const decimals = isNativeToken ? nativeTokenInfo.decimals : balance?.contractInfo?.decimals
+    const bal = formatUnits(BigInt(balance.balance), decimals || 0)
+    const displayBalance = formatDisplay(bal)
+    const symbol = isNativeToken ? nativeTokenInfo.symbol : balance?.contractInfo?.symbol
+
+    return `${displayBalance} ${symbol}`
+  }
+
+  const onClick = () => {
+    const isCollection = balance.contractType === 'ERC721' || balance.contractType === 'ERC1155'
+    if (isCollection) {
+      setNavigation({
+        location: 'collection-details',
+        params: {
+          contractAddress: balance.contractAddress,
+          chainId: balance.chainId
+        }
+      })
+    } else {
+      setNavigation({
+        location: 'coin-details',
+        params: {
+          contractAddress: balance.contractAddress,
+          chainId: balance.chainId
+        }
+      })
+    }
+  }
+
+  return (
+    <div
+      className="flex w-full flex-row justify-between items-center select-none cursor-pointer"
+      key={balance.contractAddress}
+      onClick={onClick}
+    >
+      <div className="flex gap-3 flex-row items-center justify-center min-w-0">
+        <TokenImage src={logoURI} symbol={symbol} size="md" withNetwork={balance.chainId} />
+        <Text className="overflow-hidden whitespace-nowrap" variant="normal" color="primary" fontWeight="bold" ellipsis>
+          {tokenName}
+        </Text>
+      </div>
+      <div className="flex flex-row items-center justify-center gap-1 max-w-1/2">
+        <Text className="text-right whitespace-nowrap" variant="normal" color="muted" fontWeight="bold" ellipsis>
+          {getQuantity()}
+        </Text>
+        <ChevronRightIcon className="text-muted" />
+      </div>
+    </div>
+  )
+}

package/src/views/Search/components/CoinsTab.tsx

@@ -0,0 +1,89 @@
+import { Spinner, Skeleton, Text } from '@0xsequence/design-system'
+import { TokenBalance } from '@0xsequence/indexer'
+import React, { useEffect, useRef, useState } from 'react'
+
+import { IndexedData } from '../SearchWalletViewAll'
+
+import { BalanceItem } from './BalanceItem'
+
+interface CoinsTabProps {
+  displayedCoinBalances: IndexedData[]
+  fetchMoreCoinBalances: () => void
+  fetchMoreSearchCoinBalances: () => void
+  hasMoreCoins: boolean
+  hasMoreSearchCoins: boolean
+  isSearching: boolean
+  isPending: boolean
+  coinBalances: TokenBalance[]
+}
+
+export const CoinsTab: React.FC<CoinsTabProps> = ({
+  displayedCoinBalances,
+  fetchMoreCoinBalances,
+  fetchMoreSearchCoinBalances,
+  hasMoreCoins,
+  hasMoreSearchCoins,
+  isSearching,
+  isPending,
+  coinBalances
+}) => {
+  const [isLoading, setIsLoading] = useState(false)
+
+  const endOfPageRefCoins = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (!endOfPageRefCoins.current) {
+      return
+    }
+
+    const observer = new IntersectionObserver(entries => {
+      const endOfPage = entries[0]
+      if (!endOfPage.isIntersecting) {
+        return
+      }
+      if (isSearching && hasMoreSearchCoins) {
+        setIsLoading(true)
+        setTimeout(() => {
+          fetchMoreSearchCoinBalances()
+          setIsLoading(false)
+        }, 500)
+      } else if (!isSearching && hasMoreCoins) {
+        setIsLoading(true)
+        setTimeout(() => {
+          fetchMoreCoinBalances()
+          setIsLoading(false)
+        }, 500)
+      }
+    })
+
+    observer.observe(endOfPageRefCoins.current)
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [fetchMoreCoinBalances, fetchMoreSearchCoinBalances, isSearching])
+
+  return (
+    <div>
+      <div className="flex flex-col gap-3">
+        {isPending && (
+          <>
+            {Array(8)
+              .fill(null)
+              .map((_, i) => (
+                <Skeleton className="w-full h-8" key={i} />
+              ))}
+          </>
+        )}
+        {!isPending && displayedCoinBalances.length === 0 && <Text color="primary">No Coins Found</Text>}
+        {!isPending &&
+          displayedCoinBalances.map((indexItem, index) => {
+            const balance = coinBalances[indexItem.index]
+            return <BalanceItem key={index} balance={balance} />
+          })}
+        {isLoading && <Spinner className="flex self-center mt-3" />}
+      </div>
+      <div ref={endOfPageRefCoins} style={{ height: '1px' }} />
+    </div>
+  )
+}

package/src/views/Search/components/CollectionsTab.tsx

@@ -0,0 +1,88 @@
+import { Spinner, Skeleton, Text } from '@0xsequence/design-system'
+import { TokenBalance } from '@0xsequence/indexer'
+import React, { useEffect, useRef, useState } from 'react'
+
+import { IndexedData } from '../SearchWalletViewAll'
+
+import { BalanceItem } from './BalanceItem'
+
+interface CollectionsTabProps {
+  displayedCollectionBalances: IndexedData[]
+  fetchMoreCollectionBalances: () => void
+  fetchMoreSearchCollectionBalances: () => void
+  hasMoreCollections: boolean
+  hasMoreSearchCollections: boolean
+  isSearching: boolean
+  isPending: boolean
+  collectionBalances: TokenBalance[]
+}
+
+export const CollectionsTab: React.FC<CollectionsTabProps> = ({
+  displayedCollectionBalances,
+  fetchMoreCollectionBalances,
+  fetchMoreSearchCollectionBalances,
+  hasMoreCollections,
+  hasMoreSearchCollections,
+  isSearching,
+  isPending,
+  collectionBalances
+}) => {
+  const [isLoading, setIsLoading] = useState(false)
+
+  const endOfPageRefCollections = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (!endOfPageRefCollections.current) {
+      return
+    }
+
+    const observer = new IntersectionObserver(entries => {
+      const endOfPage = entries[0]
+      if (!endOfPage.isIntersecting) {
+        return
+      }
+      if (isSearching && hasMoreSearchCollections) {
+        setIsLoading(true)
+        setTimeout(() => {
+          fetchMoreSearchCollectionBalances()
+          setIsLoading(false)
+        }, 500)
+      } else if (!isSearching && hasMoreCollections) {
+        setIsLoading(true)
+        setTimeout(() => {
+          fetchMoreCollectionBalances()
+          setIsLoading(false)
+        }, 500)
+      }
+    })
+    observer.observe(endOfPageRefCollections.current)
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [fetchMoreCollectionBalances, fetchMoreSearchCollectionBalances, isSearching])
+
+  return (
+    <div>
+      <div className="flex flex-col gap-3">
+        {isPending && (
+          <>
+            {Array(8)
+              .fill(null)
+              .map((_, i) => (
+                <Skeleton className="w-full h-8" key={i} />
+              ))}
+          </>
+        )}
+        {!isPending && displayedCollectionBalances.length === 0 && <Text color="primary">No Collectibles Found</Text>}
+        {!isPending &&
+          displayedCollectionBalances.map((indexItem, index) => {
+            const balance = collectionBalances[indexItem.index]
+            return <BalanceItem key={index} balance={balance} />
+          })}
+        {isLoading && <Spinner className="flex self-center mt-3" />}
+      </div>
+      <div ref={endOfPageRefCollections} style={{ height: '1px' }} />
+    </div>
+  )
+}

package/src/views/Search/components/WalletLink.tsx

@@ -0,0 +1,32 @@
+import { Text, ChevronRightIcon } from '@0xsequence/design-system'
+import React from 'react'
+
+import { Navigation } from '../../../contexts'
+import { useNavigation } from '../../../hooks'
+
+interface WalletLinkProps {
+  toLocation: Navigation
+  label: string
+}
+
+export const WalletLink = ({ toLocation, label }: WalletLinkProps) => {
+  const { setNavigation } = useNavigation()
+
+  const onClick = () => {
+    setNavigation(toLocation)
+  }
+
+  return (
+    <div className="flex w-full flex-row justify-between items-center select-none cursor-pointer" onClick={onClick}>
+      <Text variant="normal" color="muted" fontWeight="medium">
+        {label}
+      </Text>
+      <div className="flex flex-row justify-center items-center">
+        <Text variant="normal" color="muted" fontWeight="medium">
+          View all
+        </Text>
+        <ChevronRightIcon className="text-muted" size="sm" />
+      </div>
+    </div>
+  )
+}

package/src/views/Search/index.ts

@@ -0,0 +1,2 @@
+export * from './SearchWallet'
+export * from './SearchWalletViewAll'