@0xsequence/wallet-widget 0.0.0-20250314205219

package/src/views/CoinDetails/index.tsx

@@ -0,0 +1,153 @@
+import { compareAddress, formatDisplay, getNativeTokenInfoByChainId, ContractVerificationStatus } from '@0xsequence/connect'
+import { Button, SendIcon, SwapIcon, Text, TokenImage } from '@0xsequence/design-system'
+import {
+  useGetTokenBalancesSummary,
+  useGetCoinPrices,
+  useGetExchangeRate,
+  useGetTransactionHistory
+} from '@0xsequence/react-hooks'
+import { formatUnits, zeroAddress } from 'viem'
+import { useAccount, useConfig } from 'wagmi'
+
+import { InfiniteScroll } from '../../components/InfiniteScroll'
+import { NetworkBadge } from '../../components/NetworkBadge'
+import { TransactionHistoryList } from '../../components/TransactionHistoryList'
+import { HEADER_HEIGHT } from '../../constants'
+import { useSettings, useNavigation } from '../../hooks'
+import { computeBalanceFiat, flattenPaginatedTransactionHistory } from '../../utils'
+
+import { CoinDetailsSkeleton } from './Skeleton'
+
+export interface CoinDetailsProps {
+  contractAddress: string
+  chainId: number
+}
+
+export const CoinDetails = ({ contractAddress, chainId }: CoinDetailsProps) => {
+  const { chains } = useConfig()
+  const { setNavigation } = useNavigation()
+  const { fiatCurrency, hideUnlistedTokens } = useSettings()
+  const { address: accountAddress } = useAccount()
+
+  const isReadOnly = !chains.map(chain => chain.id).includes(chainId)
+
+  const {
+    data: dataTransactionHistory,
+    isPending: isPendingTransactionHistory,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage
+  } = useGetTransactionHistory({
+    chainId,
+    accountAddress: accountAddress || '',
+    contractAddress
+  })
+
+  const transactionHistory = flattenPaginatedTransactionHistory(dataTransactionHistory)
+
+  const { data: tokenBalance, isPending: isPendingCoinBalance } = useGetTokenBalancesSummary({
+    chainIds: [chainId],
+    filter: {
+      accountAddresses: [accountAddress || ''],
+      contractWhitelist: [contractAddress],
+      contractStatus: hideUnlistedTokens ? ContractVerificationStatus.VERIFIED : ContractVerificationStatus.ALL,
+      omitNativeBalances: false
+    }
+  })
+
+  const dataCoinBalance =
+    tokenBalance && tokenBalance.length > 0
+      ? compareAddress(contractAddress, zeroAddress)
+        ? tokenBalance?.[0]
+        : tokenBalance?.[1]
+      : undefined
+
+  const { data: dataCoinPrices, isPending: isPendingCoinPrices } = useGetCoinPrices([
+    {
+      chainId,
+      contractAddress
+    }
+  ])
+
+  const { data: conversionRate = 1, isPending: isPendingConversionRate } = useGetExchangeRate(fiatCurrency.symbol)
+
+  const isPending = isPendingCoinBalance || isPendingCoinPrices || isPendingConversionRate
+
+  if (isPending) {
+    return <CoinDetailsSkeleton chainId={chainId} isReadOnly={isReadOnly} />
+  }
+
+  const isNativeToken = compareAddress(contractAddress, zeroAddress)
+  const logo = isNativeToken ? getNativeTokenInfoByChainId(chainId, chains).logoURI : dataCoinBalance?.contractInfo?.logoURI
+  const symbol = isNativeToken ? getNativeTokenInfoByChainId(chainId, chains).symbol : dataCoinBalance?.contractInfo?.symbol
+  const name = isNativeToken ? getNativeTokenInfoByChainId(chainId, chains).name : dataCoinBalance?.contractInfo?.name
+  const decimals = isNativeToken ? getNativeTokenInfoByChainId(chainId, chains).decimals : dataCoinBalance?.contractInfo?.decimals
+  const formattedBalance = formatUnits(BigInt(dataCoinBalance?.balance || '0'), decimals || 18)
+  const balanceDisplayed = formatDisplay(formattedBalance)
+
+  const coinBalanceFiat = dataCoinBalance
+    ? computeBalanceFiat({
+        balance: dataCoinBalance,
+        prices: dataCoinPrices || [],
+        conversionRate,
+        decimals: decimals || 0
+      })
+    : '0'
+
+  const onClickSend = () => {
+    setNavigation({
+      location: 'send-coin',
+      params: {
+        chainId,
+        contractAddress
+      }
+    })
+  }
+
+  const onClickSwap = () => {
+    setNavigation({
+      location: 'swap-coin',
+      params: {
+        chainId,
+        contractAddress
+      }
+    })
+  }
+  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 mb-10 gap-2 items-center justify-center flex-col">
+          <TokenImage src={logo} size="xl" />
+          <Text variant="large" color="primary" fontWeight="bold">
+            {name}
+          </Text>
+          <NetworkBadge chainId={chainId} />
+        </div>
+        <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">{`${balanceDisplayed} ${symbol}`}</Text>
+            <Text variant="normal" fontWeight="medium" color="muted">{`${fiatCurrency.sign}${coinBalanceFiat}`}</Text>
+          </div>
+        </div>
+        {!isReadOnly && (
+          <div className="flex gap-2">
+            <Button className="w-full text-primary" variant="primary" leftIcon={SendIcon} label="Send" onClick={onClickSend} />
+            <Button className="w-full text-primary" variant="primary" leftIcon={SwapIcon} label="Buy" onClick={onClickSwap} />
+          </div>
+        )}
+        <div>
+          <InfiniteScroll onLoad={() => fetchNextPage()} hasMore={hasNextPage}>
+            <TransactionHistoryList
+              transactions={transactionHistory}
+              isPending={isPendingTransactionHistory}
+              isFetchingNextPage={isFetchingNextPage}
+            />
+          </InfiniteScroll>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/views/CollectibleDetails/Skeleton.tsx

@@ -0,0 +1,50 @@
+import { Button, SendIcon, Skeleton, Text } from '@0xsequence/design-system'
+
+import { TransactionHistorySkeleton } from '../../components/TransactionHistoryList/TransactionHistorySkeleton'
+import { HEADER_HEIGHT } from '../../constants'
+
+interface CollectibleDetailsSkeletonProps {
+  isReadOnly: boolean
+}
+
+export const CollectibleDetailsSkeleton = ({ isReadOnly }: CollectibleDetailsSkeletonProps) => {
+  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">
+          <Skeleton style={{ width: '120px', height: '16px' }} />
+          <Skeleton style={{ width: '140px', height: '44px' }} />
+        </div>
+        <div>
+          <Skeleton style={{ width: '100%', aspectRatio: '1/1' }} />
+        </div>
+        <div>
+          {/* balance */}
+          <div>
+            <Text variant="normal" fontWeight="medium" color="muted">
+              Balance
+            </Text>
+            <div className="flex flex-row items-end justify-between">
+              <Skeleton style={{ width: '44px', height: '36px' }} />
+              <Skeleton style={{ width: '34px', height: '17px' }} />
+            </div>
+          </div>
+          {!isReadOnly && (
+            <Button className="text-primary mt-4 w-full" variant="primary" leftIcon={SendIcon} label="Send" onClick={() => {}} />
+          )}
+        </div>
+        <div>
+          <Text variant="normal" color="muted" fontWeight="medium">
+            This week
+          </Text>
+          <TransactionHistorySkeleton />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/views/CollectibleDetails/index.tsx

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

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

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

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

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