@0xsequence/wallet-widget 0.0.0-20250314205219

package/src/views/Home/components/AssetSummary/CoinTile/index.tsx

@@ -0,0 +1,93 @@
+import { compareAddress, formatDisplay, getNativeTokenInfoByChainId } from '@0xsequence/connect'
+import { TokenBalance } from '@0xsequence/indexer'
+import { useGetContractInfo, useGetCoinPrices, useGetExchangeRate } from '@0xsequence/react-hooks'
+import { formatUnits, zeroAddress } from 'viem'
+import { useConfig } from 'wagmi'
+
+import { useSettings } from '../../../../../hooks'
+import { computeBalanceFiat, getPercentagePriceChange } from '../../../../../utils'
+
+import { CoinTileContent } from './CoinTileContent'
+
+interface CoinTileProps {
+  balance: TokenBalance
+}
+
+export const CoinTile = ({ balance }: CoinTileProps) => {
+  const { chains } = useConfig()
+  const { fiatCurrency } = useSettings()
+  const isNativeToken = compareAddress(balance.contractAddress, zeroAddress)
+  const nativeTokenInfo = getNativeTokenInfoByChainId(balance.chainId, chains)
+
+  const { data: dataCoinPrices = [], isPending: isPendingCoinPrice } = useGetCoinPrices([
+    {
+      chainId: balance.chainId,
+      contractAddress: balance.contractAddress
+    }
+  ])
+
+  const { data: conversionRate = 1, isPending: isPendingConversionRate } = useGetExchangeRate(fiatCurrency.symbol)
+
+  const { data: contractInfo, isPending: isPendingContractInfo } = useGetContractInfo({
+    chainID: String(balance.chainId),
+    contractAddress: balance.contractAddress
+  })
+
+  const isPending = isPendingCoinPrice || isPendingConversionRate || isPendingContractInfo
+  if (isPending) {
+    return <div className="bg-background-secondary w-full h-full rounded-xl" />
+  }
+
+  if (isNativeToken) {
+    const computedBalance = computeBalanceFiat({
+      balance,
+      prices: dataCoinPrices,
+      conversionRate,
+      decimals: nativeTokenInfo.decimals
+    })
+    const priceChangePercentage = getPercentagePriceChange(balance, dataCoinPrices)
+    const formattedBalance = formatUnits(BigInt(balance.balance), nativeTokenInfo.decimals)
+    const balanceDisplayed = formatDisplay(formattedBalance)
+
+    return (
+      <CoinTileContent
+        chainId={balance.chainId}
+        logoUrl={nativeTokenInfo.logoURI}
+        tokenName={nativeTokenInfo.name}
+        balance={balanceDisplayed}
+        balanceFiat={computedBalance}
+        priceChangePercentage={priceChangePercentage}
+        symbol={nativeTokenInfo.symbol}
+      />
+    )
+  }
+
+  const decimals = contractInfo?.decimals ?? 18
+
+  const computedBalance = computeBalanceFiat({
+    balance,
+    prices: dataCoinPrices,
+    conversionRate,
+    decimals
+  })
+  const priceChangePercentage = getPercentagePriceChange(balance, dataCoinPrices)
+
+  const formattedBalance = formatUnits(BigInt(balance.balance), decimals)
+  const balanceDisplayed = formatDisplay(formattedBalance)
+
+  const name = contractInfo?.name || 'Unknown'
+  const symbol = contractInfo?.name || 'TOKEN'
+  const url = contractInfo?.logoURI
+
+  return (
+    <CoinTileContent
+      chainId={balance.chainId}
+      logoUrl={url}
+      tokenName={name}
+      balance={balanceDisplayed}
+      balanceFiat={computedBalance}
+      priceChangePercentage={priceChangePercentage}
+      symbol={symbol}
+    />
+  )
+}

package/src/views/Home/components/AssetSummary/CollectibleTile/index.tsx

@@ -0,0 +1,20 @@
+import { TokenBalance } from '@0xsequence/indexer'
+import { useGetTokenMetadata } from '@0xsequence/react-hooks'
+
+import { CollectibleTileImage } from '../../../../../components/CollectibleTileImage'
+
+interface CollectibleTileProps {
+  balance: TokenBalance
+}
+
+export const CollectibleTile = ({ balance }: CollectibleTileProps) => {
+  const { data: tokenMetadata } = useGetTokenMetadata({
+    chainID: String(balance.chainId),
+    contractAddress: balance.contractAddress,
+    tokenIDs: [balance.tokenID || '']
+  })
+
+  const imageUrl = tokenMetadata?.[0]?.image
+
+  return <CollectibleTileImage imageUrl={imageUrl} />
+}

package/src/views/Home/components/AssetSummary/SkeletonTiles.tsx

@@ -0,0 +1,21 @@
+import { Skeleton } from '@0xsequence/design-system'
+import React from 'react'
+
+export const SkeletonTiles = () => {
+  return (
+    <div
+      className="grid gap-2"
+      style={{
+        gridTemplateColumns: `calc(50% - 4px) calc(50% - 4px)`
+      }}
+    >
+      {Array(12)
+        .fill(null)
+        .map((_, i) => (
+          <div key={i}>
+            <Skeleton className="h-full w-full aspect-square" />
+          </div>
+        ))}
+    </div>
+  )
+}

package/src/views/Home/components/AssetSummary/index.tsx

@@ -0,0 +1,128 @@
+import { useWalletSettings } from '@0xsequence/connect'
+import { Spinner } from '@0xsequence/design-system'
+import { ContractVerificationStatus, TokenBalance } from '@0xsequence/indexer'
+import { useGetTokenBalancesDetails } from '@0xsequence/react-hooks'
+import { useEffect, useRef, useState } from 'react'
+import { useAccount } from 'wagmi'
+
+import { useNavigation, useSettings } from '../../../../hooks'
+
+import { CoinTile } from './CoinTile'
+import { CollectibleTile } from './CollectibleTile'
+import { SkeletonTiles } from './SkeletonTiles'
+
+export const AssetSummary = () => {
+  const { address } = useAccount()
+  const { setNavigation } = useNavigation()
+  const { displayedAssets } = useWalletSettings()
+  const { hideUnlistedTokens, hideCollectibles, selectedNetworks } = useSettings()
+
+  const pageSize = 10
+  const [isLoading, setIsLoading] = useState(false)
+  const [displayedTokens, setDisplayedTokens] = useState<TokenBalance[]>([])
+  const [hasMoreTokens, setHasMoreTokens] = useState(false)
+
+  const endOfPageRef = useRef<HTMLDivElement | null>(null)
+
+  const fetchMoreTokens = () => {
+    if (displayedTokens.length >= balances.length) {
+      setHasMoreTokens(false)
+      return
+    }
+    setDisplayedTokens(balances.slice(0, displayedTokens.length + pageSize))
+  }
+
+  useEffect(() => {
+    if (!endOfPageRef.current) {
+      return
+    }
+
+    const observer = new IntersectionObserver(entries => {
+      const endOfPage = entries[0]
+      if (endOfPage.isIntersecting && hasMoreTokens) {
+        setIsLoading(true)
+        setTimeout(() => {
+          fetchMoreTokens()
+          setIsLoading(false)
+        }, 500)
+      }
+    })
+
+    observer.observe(endOfPageRef.current)
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [hasMoreTokens, fetchMoreTokens])
+
+  const { data: balances = [], isPending: isPendingBalances } = useGetTokenBalancesDetails(
+    {
+      filter: {
+        accountAddresses: [address || ''],
+        contractWhitelist: displayedAssets.map(asset => asset.contractAddress),
+        contractStatus: hideUnlistedTokens ? ContractVerificationStatus.VERIFIED : ContractVerificationStatus.ALL,
+        omitNativeBalances: false
+      },
+      chainIds: selectedNetworks
+    },
+    { hideCollectibles }
+  )
+
+  useEffect(() => {
+    if (!isPendingBalances && balances.length > 0) {
+      setDisplayedTokens(balances.slice(0, pageSize))
+      setHasMoreTokens(balances.length > pageSize)
+    }
+    // only runs once after balances are fetched
+  }, [balances, isPendingBalances])
+
+  if (isPendingBalances) {
+    return <SkeletonTiles />
+  }
+
+  const onClickItem = (balance: TokenBalance) => {
+    if (balance.contractType === 'ERC1155' || balance.contractType === 'ERC721') {
+      setNavigation({
+        location: 'collectible-details',
+        params: {
+          contractAddress: balance.contractAddress,
+          chainId: balance.chainId,
+          tokenId: balance.tokenID || ''
+        }
+      })
+    } else {
+      setNavigation({
+        location: 'coin-details',
+        params: {
+          contractAddress: balance.contractAddress,
+          chainId: balance.chainId
+        }
+      })
+    }
+  }
+
+  return (
+    <div>
+      <div
+        className="grid gap-2"
+        style={{
+          gridTemplateColumns: `calc(50% - 4px) calc(50% - 4px)`
+        }}
+      >
+        {displayedTokens.map((balance, index) => {
+          return (
+            <div className="select-none cursor-pointer aspect-square" key={index} onClick={() => onClickItem(balance)}>
+              {balance.contractType === 'ERC1155' || balance.contractType === 'ERC721' ? (
+                <CollectibleTile balance={balance} />
+              ) : (
+                <CoinTile balance={balance} />
+              )}
+            </div>
+          )
+        })}
+      </div>
+      {isLoading && <Spinner className="flex justify-self-center mt-3" />}
+      <div ref={endOfPageRef} style={{ height: '1px' }} />
+    </div>
+  )
+}

package/src/views/Home/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import { AssetSummary } from './components/AssetSummary'
+
+export const Home = () => {
+  return (
+    <div className="flex px-4 pb-5 gap-4 flex-col">
+      <AssetSummary />
+    </div>
+  )
+}

package/src/views/Receive.tsx

@@ -0,0 +1,83 @@
+import { getNativeTokenInfoByChainId } from '@0xsequence/connect'
+import { Button, Text, CopyIcon, ShareIcon, Image } from '@0xsequence/design-system'
+import { QRCodeCanvas } from 'qrcode.react'
+import React, { useState, useEffect } from 'react'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
+import { useAccount, useConfig } from 'wagmi'
+
+import { HEADER_HEIGHT } from '../constants'
+
+export const Receive = () => {
+  const { address, chain } = useAccount()
+  const { chains } = useConfig()
+  const [isCopied, setCopied] = useState<boolean>(false)
+
+  const nativeTokenInfo = getNativeTokenInfoByChainId(chain?.id || 1, chains)
+
+  useEffect(() => {
+    if (isCopied) {
+      setTimeout(() => {
+        setCopied(false)
+      }, 4000)
+    }
+  }, [isCopied])
+
+  const onClickCopy = () => {
+    setCopied(true)
+  }
+
+  const onClickShare = () => {
+    if (typeof window !== 'undefined') {
+      window.open(`https://twitter.com/intent/tweet?text=Here%20is%20my%20address%20${address}`)
+    }
+  }
+
+  return (
+    <div style={{ paddingTop: HEADER_HEIGHT }}>
+      <div className="flex p-5 pt-3 flex-col justify-center items-center gap-4">
+        <div className="flex mt-1 w-fit bg-white rounded-xl items-center justify-center p-4">
+          <QRCodeCanvas value={address || ''} size={200} bgColor="white" fgColor="black" data-id="receiveQR" />
+        </div>
+        <div>
+          <div className="flex flex-row items-center justify-center gap-2">
+            <Text className="text-center leading-[inherit]" variant="medium" color="primary" style={{ fontWeight: '700' }}>
+              My Wallet
+            </Text>
+            <Image className="w-5" src={nativeTokenInfo.logoURI} alt="icon" />
+          </div>
+          <div className="mt-2" style={{ maxWidth: '180px', textAlign: 'center' }}>
+            <Text
+              className="text-center"
+              color="muted"
+              style={{
+                fontSize: '14px',
+                maxWidth: '180px',
+                overflowWrap: 'anywhere'
+              }}
+            >
+              {address}
+            </Text>
+          </div>
+        </div>
+        <div className="flex gap-3">
+          <CopyToClipboard text={address || ''}>
+            <Button onClick={onClickCopy} leftIcon={CopyIcon} label={isCopied ? 'Copied!' : 'Copy'} />
+          </CopyToClipboard>
+          <Button onClick={onClickShare} leftIcon={ShareIcon} label="Share" />
+        </div>
+        <div className="flex justify-center items-center" style={{ maxWidth: '260px', textAlign: 'center' }}>
+          <Text
+            color="primary"
+            variant="small"
+            style={{
+              maxWidth: '260px',
+              overflowWrap: 'anywhere'
+            }}
+          >
+            {`This is a ${nativeTokenInfo.name} address. Please only send assets on the ${nativeTokenInfo.name} network.`}
+          </Text>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/views/Search/SearchWallet.tsx

@@ -0,0 +1,177 @@
+import { getNativeTokenInfoByChainId, ContractVerificationStatus, compareAddress } from '@0xsequence/connect'
+import { SearchIcon, Skeleton, Text, TextInput } from '@0xsequence/design-system'
+import { useGetTokenBalancesSummary, useGetCoinPrices, useGetExchangeRate } from '@0xsequence/react-hooks'
+import Fuse from 'fuse.js'
+import { useState } from 'react'
+import { zeroAddress } from 'viem'
+import { useAccount, useConfig } from 'wagmi'
+
+import { useSettings } from '../../hooks'
+import { computeBalanceFiat } from '../../utils'
+
+import { BalanceItem } from './components/BalanceItem'
+import { WalletLink } from './components/WalletLink'
+
+export const SearchWallet = () => {
+  const { chains } = useConfig()
+  const { fiatCurrency, hideUnlistedTokens, selectedNetworks } = useSettings()
+  const [search, setSearch] = useState('')
+  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 isHigherFiat =
+      Number(
+        computeBalanceFiat({
+          balance: b,
+          prices: coinPrices,
+          conversionRate,
+          decimals: b.contractInfo?.decimals || 18
+        })
+      ) -
+      Number(
+        computeBalanceFiat({
+          balance: a,
+          prices: coinPrices,
+          conversionRate,
+          decimals: a.contractInfo?.decimals || 18
+        })
+      )
+    return isHigherFiat
+  })
+
+  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 isPending = isPendingTokenBalances || isPendingCoinPrices || isPendingConversionRate
+
+  interface IndexedData {
+    index: number
+    name: string
+  }
+  const indexedCollectionBalances: IndexedData[] = collectionBalances.map((balance, index) => {
+    return {
+      index,
+      name: balance.contractInfo?.name || 'Unknown'
+    }
+  })
+
+  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 coinBalancesAmount = coinBalances.length
+  const collectionBalancesAmount = collectionBalances.length
+
+  const fuzzySearchCoinBalances = new Fuse(indexedCoinBalances, {
+    keys: ['name']
+  })
+
+  const fuzzySearchCollections = new Fuse(indexedCollectionBalances, {
+    keys: ['name']
+  })
+
+  const foundCoinBalances = (
+    search === '' ? indexedCoinBalances : fuzzySearchCoinBalances.search(search).map(result => result.item)
+  ).slice(0, 5)
+  const foundCollectionBalances = (
+    search === '' ? indexedCollectionBalances : fuzzySearchCollections.search(search).map(result => result.item)
+  ).slice(0, 5)
+
+  return (
+    <div className="flex px-4 pb-5 pt-3 flex-col gap-10 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="flex w-full flex-col items-center justify-center gap-5">
+        <WalletLink
+          toLocation={{
+            location: 'search-view-all',
+            params: {
+              defaultTab: 'coins'
+            }
+          }}
+          label={`Coins (${coinBalancesAmount})`}
+        />
+        {isPending ? (
+          Array(5)
+            .fill(null)
+            .map((_, i) => <Skeleton className="w-full h-8" key={i} />)
+        ) : foundCoinBalances.length === 0 ? (
+          <Text color="primary">No coins found</Text>
+        ) : (
+          foundCoinBalances.map((indexItem, index) => {
+            const balance = coinBalances[indexItem.index]
+            return <BalanceItem key={index} balance={balance} />
+          })
+        )}
+      </div>
+      <div className="flex w-full flex-col items-center justify-center gap-5">
+        <WalletLink
+          toLocation={{
+            location: 'search-view-all',
+            params: {
+              defaultTab: 'collections'
+            }
+          }}
+          label={`Collections (${collectionBalancesAmount})`}
+        />
+        {isPending ? (
+          Array(5)
+            .fill(null)
+            .map((_, i) => <Skeleton className="w-full h-8" key={i} />)
+        ) : foundCollectionBalances.length === 0 ? (
+          <Text color="primary">No collections found</Text>
+        ) : (
+          foundCollectionBalances.map((indexedItem, index) => {
+            const balance = collectionBalances[indexedItem.index]
+            return <BalanceItem key={index} balance={balance} />
+          })
+        )}
+      </div>
+    </div>
+  )
+}