@0xsequence/wallet-widget 5.0.0-ecosystem-beta → 5.0.0

package/src/views/CollectibleDetails/index.tsx

@@ -1,184 +0,0 @@
-import { formatDisplay, ContractVerificationStatus } from '@0xsequence/connect'
-import { Button, Image, NetworkImage, SendIcon, Text } from '@0xsequence/design-system'
-import {
-  useGetTokenBalancesDetails,
-  useGetTransactionHistory,
-  useGetCollectiblePrices,
-  useGetExchangeRate
-} from '@0xsequence/react-hooks'
-import { formatUnits } from 'viem'
-import { useAccount, useConfig } from 'wagmi'
-
-import { CollectibleTileImage } from '../../components/CollectibleTileImage'
-import { InfiniteScroll } from '../../components/InfiniteScroll'
-import { TransactionHistoryList } from '../../components/TransactionHistoryList'
-import { HEADER_HEIGHT } from '../../constants'
-import { useSettings, useNavigation } from '../../hooks'
-import { computeBalanceFiat, flattenPaginatedTransactionHistory } from '../../utils'
-
-import { CollectibleDetailsSkeleton } from './Skeleton'
-
-export interface CollectibleDetailsProps {
-  contractAddress: string
-  chainId: number
-  tokenId: string
-}
-
-export const CollectibleDetails = ({ contractAddress, chainId, tokenId }: CollectibleDetailsProps) => {
-  const { chains } = useConfig()
-
-  const { address: accountAddress } = useAccount()
-  const { fiatCurrency } = useSettings()
-  const { setNavigation } = useNavigation()
-
-  const isReadOnly = !chains.map(chain => chain.id).includes(chainId)
-
-  const {
-    data: dataTransactionHistory,
-    isPending: isPendingTransactionHistory,
-    fetchNextPage,
-    hasNextPage,
-    isFetchingNextPage
-  } = useGetTransactionHistory({
-    chainId,
-    accountAddress: accountAddress || '',
-    contractAddress,
-    tokenId
-  })
-
-  const transactionHistory = flattenPaginatedTransactionHistory(dataTransactionHistory)
-
-  const { data: dataTokens, isPending: isPendingCollectibleBalance } = useGetTokenBalancesDetails({
-    filter: {
-      accountAddresses: accountAddress ? [accountAddress] : [],
-      contractStatus: ContractVerificationStatus.ALL,
-      contractWhitelist: [contractAddress],
-      omitNativeBalances: true
-    },
-    chainIds: [chainId]
-  })
-
-  const dataCollectibleBalance =
-    dataTokens && dataTokens.length > 0 ? dataTokens.find(token => token.tokenID === tokenId) : undefined
-
-  const { data: dataCollectiblePrices, isPending: isPendingCollectiblePrices } = useGetCollectiblePrices([
-    {
-      chainId,
-      contractAddress,
-      tokenId
-    }
-  ])
-
-  const { data: conversionRate = 1, isPending: isPendingConversionRate } = useGetExchangeRate(fiatCurrency.symbol)
-
-  const isPending = isPendingCollectibleBalance || isPendingCollectiblePrices || isPendingConversionRate
-
-  if (isPending) {
-    return <CollectibleDetailsSkeleton isReadOnly={isReadOnly} />
-  }
-
-  const onClickSend = () => {
-    setNavigation({
-      location: 'send-collectible',
-      params: {
-        chainId,
-        contractAddress,
-        tokenId
-      }
-    })
-  }
-
-  const collectionLogo = dataCollectibleBalance?.contractInfo?.logoURI
-  const collectionName = dataCollectibleBalance?.contractInfo?.name || 'Unknown Collection'
-
-  const decimals = dataCollectibleBalance?.tokenMetadata?.decimals || 0
-  const rawBalance = dataCollectibleBalance?.balance || '0'
-  const balance = formatUnits(BigInt(rawBalance), decimals)
-  const formattedBalance = formatDisplay(Number(balance))
-
-  const valueFiat = dataCollectibleBalance
-    ? computeBalanceFiat({
-        balance: dataCollectibleBalance,
-        prices: dataCollectiblePrices || [],
-        conversionRate,
-        decimals: decimals
-      })
-    : '0'
-
-  return (
-    <div style={{ paddingTop: HEADER_HEIGHT }}>
-      <div
-        className="flex flex-col gap-10 pb-5 px-4 pt-0"
-        style={{
-          marginTop: '-20px'
-        }}
-      >
-        <div className="flex gap-3 items-center justify-center flex-col">
-          <div className="flex flex-row gap-2 justify-center items-center">
-            {collectionLogo && (
-              <Image
-                className="rounded-full w-8"
-                src={collectionLogo}
-                alt="collection logo"
-                style={{
-                  objectFit: 'cover'
-                }}
-              />
-            )}
-            <div className="flex gap-1 flex-row justify-center items-center">
-              <Text variant="small" fontWeight="bold" color="primary">
-                {collectionName}
-              </Text>
-              <NetworkImage chainId={chainId} size="xs" />
-            </div>
-          </div>
-          <div className="flex flex-col justify-center items-center">
-            <Text variant="large" color="primary" fontWeight="bold">
-              {dataCollectibleBalance?.tokenMetadata?.name || 'Unknown Collectible'}
-            </Text>
-            <Text variant="small" color="muted" fontWeight="medium">
-              {`#${tokenId}`}
-            </Text>
-          </div>
-        </div>
-        <div>
-          <CollectibleTileImage imageUrl={dataCollectibleBalance?.tokenMetadata?.image} />
-        </div>
-        <div>
-          {/* balance */}
-          <div>
-            <Text variant="normal" fontWeight="medium" color="muted">
-              Balance
-            </Text>
-            <div className="flex flex-row items-end justify-between">
-              <Text variant="xlarge" fontWeight="bold" color="primary">
-                {formattedBalance}
-              </Text>
-              {dataCollectiblePrices && dataCollectiblePrices[0].price?.value && (
-                <Text variant="normal" fontWeight="medium" color="muted">{`${fiatCurrency.symbol} ${valueFiat}`}</Text>
-              )}
-            </div>
-          </div>
-          {!isReadOnly && (
-            <Button
-              className="text-primary mt-4 w-full"
-              variant="primary"
-              leftIcon={SendIcon}
-              label="Send"
-              onClick={onClickSend}
-            />
-          )}
-        </div>
-        <div>
-          <InfiniteScroll onLoad={() => fetchNextPage()} hasMore={hasNextPage}>
-            <TransactionHistoryList
-              transactions={transactionHistory}
-              isPending={isPendingTransactionHistory}
-              isFetchingNextPage={isFetchingNextPage}
-            />
-          </InfiniteScroll>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/views/CollectionDetails/Skeleton.tsx

@@ -1,36 +0,0 @@
-import { Skeleton } from '@0xsequence/design-system'
-import React from 'react'
-
-import { NetworkBadge } from '../../components/NetworkBadge'
-
-interface CollectionDetailsSkeletonProps {
-  chainId: number
-}
-
-export const CollectionDetailsSkeleton = ({ chainId }: CollectionDetailsSkeletonProps) => {
-  return (
-    <div className="flex px-4 pb-5 pt-3 mt-8 flex-col items-center justify-center gap-10">
-      <div className="flex flex-col gap-2 justify-center items-center">
-        <Skeleton style={{ width: '32px', height: '32px' }} />
-        <Skeleton style={{ width: '100px', height: '24px' }} />
-        <NetworkBadge chainId={chainId} />
-        <Skeleton style={{ width: '142px', height: '17px' }} />
-      </div>
-      <div className="w-full">
-        <Skeleton style={{ width: '168px', height: '20px' }} />
-        <div
-          className="w-full mt-3 grid gap-2"
-          style={{
-            gridTemplateColumns: `calc(50% - 4px) calc(50% - 4px)`
-          }}
-        >
-          {Array(8)
-            .fill(null)
-            .map((_, i) => (
-              <Skeleton className="w-full aspect-square" key={i} />
-            ))}
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/views/CollectionDetails/index.tsx

@@ -1,98 +0,0 @@
-import { formatDisplay, ContractVerificationStatus } from '@0xsequence/connect'
-import { Image, Text, TokenImage } from '@0xsequence/design-system'
-import { TokenBalance } from '@0xsequence/indexer'
-import { useGetTokenBalancesDetails } from '@0xsequence/react-hooks'
-import { formatUnits } from 'viem'
-import { useAccount } from 'wagmi'
-
-import { NetworkBadge } from '../../components/NetworkBadge'
-import { useNavigation } from '../../hooks'
-
-import { CollectionDetailsSkeleton } from './Skeleton'
-
-interface CollectionDetailsProps {
-  chainId: number
-  contractAddress: string
-}
-
-export const CollectionDetails = ({ chainId, contractAddress }: CollectionDetailsProps) => {
-  const { setNavigation } = useNavigation()
-  const { address: accountAddress } = useAccount()
-  const { data: collectionBalanceData, isPending: isPendingCollectionBalance } = useGetTokenBalancesDetails({
-    chainIds: [chainId],
-    filter: {
-      accountAddresses: accountAddress ? [accountAddress] : [],
-      contractStatus: ContractVerificationStatus.ALL,
-      contractWhitelist: [contractAddress],
-      omitNativeBalances: true
-    }
-  })
-
-  const contractInfo = collectionBalanceData?.[0]?.contractInfo
-  const collectionLogoURI = contractInfo?.logoURI
-
-  if (isPendingCollectionBalance) {
-    return <CollectionDetailsSkeleton chainId={chainId} />
-  }
-
-  const onClickItem = (balance: TokenBalance) => {
-    setNavigation({
-      location: 'collectible-details',
-      params: {
-        contractAddress: balance.contractAddress,
-        chainId: balance.chainId,
-        tokenId: balance.tokenID || ''
-      }
-    })
-  }
-
-  return (
-    <div className="flex px-4 pb-5 pt-3 mt-8 flex-col items-center justify-center gap-10">
-      <div className="flex flex-col gap-2 justify-center items-center">
-        <TokenImage src={collectionLogoURI} size="lg" />
-        <Text variant="large" fontWeight="bold" color="primary">
-          {contractInfo?.name || 'Unknown'}
-        </Text>
-        <NetworkBadge chainId={chainId} />
-        <Text variant="normal" fontWeight="medium" color="muted">{`${
-          collectionBalanceData?.length || 0
-        } Unique Collectibles`}</Text>
-      </div>
-      <div className="w-full">
-        <Text variant="normal" fontWeight="medium" color="muted">
-          {`Owned (${collectionBalanceData?.length || 0})`}
-        </Text>
-        <div
-          className="w-full mt-3 grid gap-2"
-          style={{
-            gridTemplateColumns: `calc(50% - 4px) calc(50% - 4px)`
-          }}
-        >
-          {collectionBalanceData?.map((balance, index) => {
-            const unformattedBalance = balance.balance
-            const decimals = balance?.tokenMetadata?.decimals || 0
-            const formattedBalance = formatDisplay(formatUnits(BigInt(unformattedBalance), decimals))
-
-            return (
-              <div className="select-none cursor-pointer" key={index} onClick={() => onClickItem(balance)}>
-                <div className="flex bg-background-secondary aspect-square w-full rounded-xl justify-center items-center mb-2">
-                  <Image className="rounded-lg" style={{ height: '100%' }} src={balance.tokenMetadata?.image} />
-                </div>
-                <div>
-                  <Text variant="normal" fontWeight="bold" color="primary">
-                    {`${balance.tokenMetadata?.name}`}
-                  </Text>
-                </div>
-                <div>
-                  <Text className="mt-1" variant="normal" fontWeight="medium" color="muted">
-                    {formattedBalance} Owned
-                  </Text>
-                </div>
-              </div>
-            )
-          })}
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/views/History.tsx

@@ -1,28 +0,0 @@
-import { useGetTransactionHistorySummary } from '@0xsequence/react-hooks'
-import React from 'react'
-import { useAccount } from 'wagmi'
-
-import { TransactionHistoryList } from '../components/TransactionHistoryList'
-import { useSettings } from '../hooks'
-
-export const History = () => {
-  const { selectedNetworks } = useSettings()
-  const { address: accountAddress } = useAccount()
-
-  const { data: transactionHistory = [], isPending: isPendingTransactionHistory } = useGetTransactionHistorySummary({
-    accountAddress: accountAddress || '',
-    chainIds: selectedNetworks
-  })
-
-  return (
-    <div>
-      <div className="px-4 pb-5 pt-3">
-        <TransactionHistoryList
-          transactions={transactionHistory}
-          isPending={isPendingTransactionHistory}
-          isFetchingNextPage={false}
-        />
-      </div>
-    </div>
-  )
-}

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

@@ -1,60 +0,0 @@
-import { NetworkImage, Text, TokenImage } from '@0xsequence/design-system'
-import React from 'react'
-
-import { useSettings } from '../../../../../hooks'
-import { getPercentageColor } from '../../../../../utils'
-
-interface CoinTileContentProps {
-  logoUrl?: string
-  tokenName: string
-  balance: string
-  balanceFiat: string
-  priceChangePercentage: number
-  symbol: string
-  chainId: number
-}
-
-export const CoinTileContent = ({
-  logoUrl,
-  tokenName,
-  balance,
-  balanceFiat,
-  priceChangePercentage,
-  symbol,
-  chainId
-}: CoinTileContentProps) => {
-  const { fiatCurrency } = useSettings()
-  const priceChangeSymbol = priceChangePercentage > 0 ? '+' : ''
-
-  return (
-    <div className="flex bg-background-secondary w-full h-full rounded-xl p-4 flex-col justify-center items-start gap-1">
-      <div className="mb-1">
-        <TokenImage src={logoUrl} symbol={symbol} size="lg" />
-      </div>
-      <div className="mb-3">
-        <div className="flex flex-row gap-1 justify-start items-center">
-          <Text
-            className="whitespace-nowrap"
-            fontWeight="bold"
-            color="primary"
-            style={{ maxWidth: '130px', textOverflow: 'ellipsis', overflow: 'hidden' }}
-          >
-            {tokenName}
-          </Text>
-          <NetworkImage chainId={chainId} size="xs" />
-        </div>
-        <Text color="muted" ellipsis nowrap block style={{ maxWidth: '150px' }}>
-          {`${balance} ${symbol}`}
-        </Text>
-      </div>
-      <div>
-        <div>
-          <Text variant="normal" fontWeight="bold" color="primary">{`${fiatCurrency.sign}${balanceFiat}`}</Text>
-        </div>
-        <Text variant="normal" color={getPercentageColor(priceChangePercentage)}>
-          {`${priceChangeSymbol}${priceChangePercentage.toFixed(2)}%`}
-        </Text>
-      </div>
-    </div>
-  )
-}

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

@@ -1,93 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,128 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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>
-  )
-}