@0xsequence/wallet-widget 0.0.0-20250314205219

package/src/components/TransactionHistoryList/TransactionHistoryItem.tsx

@@ -0,0 +1,190 @@
+import { TokenPrice } from '@0xsequence/api'
+import { compareAddress, formatDisplay, getNativeTokenInfoByChainId } from '@0xsequence/connect'
+import { ArrowRightIcon, Text, Image, TransactionIcon, Skeleton, NetworkImage } from '@0xsequence/design-system'
+import { Transaction, TxnTransfer, TxnTransferType } from '@0xsequence/indexer'
+import { useGetCoinPrices, useGetExchangeRate } from '@0xsequence/react-hooks'
+import dayjs from 'dayjs'
+import React from 'react'
+import { formatUnits, zeroAddress } from 'viem'
+import { useConfig } from 'wagmi'
+
+import { useSettings, useNavigation } from '../../hooks'
+
+interface TransactionHistoryItemProps {
+  transaction: Transaction
+}
+
+export const TransactionHistoryItem = ({ transaction }: TransactionHistoryItemProps) => {
+  const { chains } = useConfig()
+  const { fiatCurrency } = useSettings()
+  const { setNavigation } = useNavigation()
+
+  const onClickTransaction = () => {
+    setNavigation({
+      location: 'transaction-details',
+      params: {
+        transaction
+      }
+    })
+  }
+
+  const tokenContractAddresses: string[] = []
+
+  transaction.transfers?.forEach(transfer => {
+    const tokenContractAddress = transfer.contractAddress
+    if (!tokenContractAddresses.includes(tokenContractAddress)) {
+      tokenContractAddresses.push(tokenContractAddress)
+    }
+  })
+
+  const { data: coinPrices = [], isPending: isPendingCoinPrices } = useGetCoinPrices(
+    tokenContractAddresses.map(contractAddress => ({
+      contractAddress,
+      chainId: transaction.chainId
+    }))
+  )
+
+  const { data: conversionRate = 1, isPending: isPendingConversionRate } = useGetExchangeRate(fiatCurrency.symbol)
+
+  const isPending = isPendingCoinPrices || isPendingConversionRate
+
+  const { transfers } = transaction
+
+  const getTransactionIconByType = (transferType: TxnTransferType) => {
+    switch (transferType) {
+      case TxnTransferType.SEND:
+        return (
+          <ArrowRightIcon
+            style={{
+              transform: 'rotate(270deg)',
+              width: '16px'
+            }}
+          />
+        )
+      case TxnTransferType.RECEIVE:
+        return (
+          <ArrowRightIcon
+            style={{
+              transform: 'rotate(90deg)',
+              width: '16px'
+            }}
+          />
+        )
+      case TxnTransferType.UNKNOWN:
+      default:
+        return <TransactionIcon style={{ width: '14px' }} />
+    }
+  }
+
+  const getTansactionLabelByType = (transferType: TxnTransferType) => {
+    switch (transferType) {
+      case TxnTransferType.SEND:
+        return 'Sent'
+      case TxnTransferType.RECEIVE:
+        return 'Received'
+      case TxnTransferType.UNKNOWN:
+      default:
+        return 'Transacted'
+    }
+  }
+
+  const getTransferAmountLabel = (amount: string, symbol: string, transferType: TxnTransferType) => {
+    let sign = ''
+    if (transferType === TxnTransferType.SEND) {
+      sign = '-'
+    } else if (transferType === TxnTransferType.RECEIVE) {
+      sign = '+'
+    }
+
+    let textColor: 'muted' | 'negative' | 'positive' = 'muted'
+    if (transferType === TxnTransferType.SEND) {
+      textColor = 'negative'
+    } else if (transferType === TxnTransferType.RECEIVE) {
+      textColor = 'positive'
+    }
+
+    return <Text variant="normal" fontWeight="bold" color={textColor}>{`${sign}${amount} ${symbol}`}</Text>
+  }
+
+  interface GetTransfer {
+    transfer: TxnTransfer
+    isFirstItem: boolean
+  }
+
+  const getTransfer = ({ transfer, isFirstItem }: GetTransfer) => {
+    const { amounts } = transfer
+    const date = dayjs(transaction.timestamp).format('MMM DD, YYYY')
+    return (
+      <div className="flex gap-2 w-full flex-col justify-between">
+        <div className="flex flex-row justify-between">
+          <div className="flex text-muted gap-1 flex-row justify-center items-center">
+            {getTransactionIconByType(transfer.transferType)}
+            <Text variant="normal" fontWeight="medium" color="primary">
+              {getTansactionLabelByType(transfer.transferType)}
+            </Text>
+            <NetworkImage chainId={transaction.chainId} size="xs" />
+          </div>
+          {isFirstItem && (
+            <div>
+              <Text variant="normal" fontWeight="medium" color="muted">
+                {date}
+              </Text>
+            </div>
+          )}
+        </div>
+        {amounts.map((amount, index) => {
+          const nativeTokenInfo = getNativeTokenInfoByChainId(transaction.chainId, chains)
+          const isNativeToken = compareAddress(transfer.contractAddress, zeroAddress)
+          const isCollectible = transfer.contractInfo?.type === 'ERC721' || transfer.contractInfo?.type === 'ERC1155'
+          let decimals
+          const tokenId = transfer.tokenIds?.[index]
+          if (isCollectible && tokenId) {
+            decimals = transfer.tokenMetadata?.[tokenId]?.decimals || 0
+          } else {
+            decimals = isNativeToken ? nativeTokenInfo.decimals : transfer.contractInfo?.decimals
+          }
+          const amountValue = formatUnits(BigInt(amount), decimals || 18)
+          const symbol = isNativeToken ? nativeTokenInfo.symbol : transfer.contractInfo?.symbol || ''
+          const tokenLogoUri = isNativeToken ? nativeTokenInfo.logoURI : transfer.contractInfo?.logoURI
+
+          const fiatConversionRate = coinPrices.find((coinPrice: TokenPrice) =>
+            compareAddress(coinPrice.token.contractAddress, transfer.contractAddress)
+          )?.price?.value
+
+          return (
+            <div className="flex flex-row justify-between" key={index}>
+              <div className="flex flex-row gap-2 justify-center items-center">
+                {tokenLogoUri && <Image className="w-5" src={tokenLogoUri} alt="token logo" />}
+                {getTransferAmountLabel(formatDisplay(amountValue), symbol, transfer.transferType)}
+              </div>
+              {isPending && <Skeleton style={{ width: '35px', height: '20px' }} />}
+              {fiatConversionRate && (
+                <Text variant="normal" fontWeight="medium" color="muted">
+                  {`${fiatCurrency.sign}${(Number(amountValue) * fiatConversionRate * conversionRate).toFixed(2)}`}
+                </Text>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className="flex bg-background-secondary rounded-xl p-4 gap-2 items-center justify-center flex-col select-none cursor-pointer"
+      onClick={() => onClickTransaction()}
+    >
+      {transfers?.map((transfer, position) => {
+        return (
+          <div className="w-full" key={`${transaction.txnHash}-${position}`}>
+            {getTransfer({
+              transfer,
+              isFirstItem: position === 0
+            })}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/TransactionHistoryList/TransactionHistorySkeleton.tsx

@@ -0,0 +1,36 @@
+import { Skeleton } from '@0xsequence/design-system'
+import React from 'react'
+
+export const TransactionHistorySkeleton = () => {
+  const getTransactionItem = () => {
+    return (
+      <div className="flex flex-col gap-2 w-full justify-between">
+        <div className="flex flex-row justify-between">
+          <Skeleton style={{ width: '65px', height: '20px' }} />
+          <Skeleton style={{ width: '75px', height: '17px' }} />
+        </div>
+        <div className="flex flex-row justify-between">
+          <Skeleton style={{ width: '120px', height: '20px' }} />
+          <Skeleton style={{ width: '35px', height: '17px' }} />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Skeleton style={{ width: '70px', height: '17px' }} />
+      <div className="flex flex-col gap-2">
+        {Array(8)
+          .fill(null)
+          .map((_, index) => {
+            return (
+              <div className="flex rounded-xl p-4 gap-2 items-center justify-center flex-col bg-background-secondary" key={index}>
+                {getTransactionItem()}
+              </div>
+            )
+          })}
+      </div>
+    </div>
+  )
+}

package/src/components/TransactionHistoryList/index.tsx

@@ -0,0 +1,160 @@
+import { Spinner, Text } from '@0xsequence/design-system'
+import { Transaction } from '@0xsequence/indexer'
+import { useMemo } from 'react'
+
+import { TransactionHistoryItem } from './TransactionHistoryItem'
+import { TransactionHistorySkeleton } from './TransactionHistorySkeleton'
+
+interface TransactionHistoryListProps {
+  transactions: Transaction[]
+  isPending: boolean
+  isFetchingNextPage: boolean
+}
+
+export const TransactionHistoryList = ({ transactions, isPending, isFetchingNextPage }: TransactionHistoryListProps) => {
+  type TransactionPeriodId = 'today' | 'yesterday' | 'week' | 'month' | 'year' | 'past'
+
+  interface TransactionPeriods {
+    id: TransactionPeriodId
+    label: string
+  }
+
+  const transactionPeriods: TransactionPeriods[] = [
+    {
+      id: 'today',
+      label: 'Today'
+    },
+    {
+      id: 'yesterday',
+      label: 'Yesterday'
+    },
+    {
+      id: 'week',
+      label: 'This Week'
+    },
+    {
+      id: 'month',
+      label: 'This Month'
+    },
+    {
+      id: 'year',
+      label: 'This Year'
+    },
+    {
+      id: 'past',
+      label: 'Past'
+    }
+  ]
+
+  const transactionsByTime = useMemo(() => {
+    const todayThreshold = new Date(new Date().setHours(0, 0, 0, 0)).getTime()
+    const yesterdayThreshold = new Date(new Date().setDate(new Date(todayThreshold).getDate() - 1)).getTime()
+
+    const currentDate = new Date(new Date().setHours(0, 0, 0, 0))
+    const firstDayOfWeek = new Date(currentDate.setDate(currentDate.getDate() - currentDate.getDay()))
+    const firstDayOfMonth = new Date(currentDate.setDate(1))
+    const firstDayOfYear = new Date(currentDate.setMonth(0, 1))
+
+    const weekThreshold = firstDayOfWeek.getTime()
+    const monthThreshold = firstDayOfMonth.getTime()
+    const yearThreshold = firstDayOfYear.getTime()
+
+    const transactionsByTime: {
+      [key in TransactionPeriodId]: Transaction[]
+    } = {
+      today: [],
+      yesterday: [],
+      week: [],
+      month: [],
+      year: [],
+      past: []
+    }
+
+    transactions.forEach(transaction => {
+      const transactionTime = new Date(transaction.timestamp).getTime()
+      if (transactionTime >= todayThreshold) {
+        transactionsByTime.today.push(transaction)
+      } else if (transactionTime >= yesterdayThreshold) {
+        transactionsByTime.yesterday.push(transaction)
+      } else if (transactionTime >= weekThreshold) {
+        transactionsByTime.week.push(transaction)
+      } else if (transactionTime >= monthThreshold) {
+        transactionsByTime.month.push(transaction)
+      } else if (transactionTime >= yearThreshold) {
+        transactionsByTime.year.push(transaction)
+      } else {
+        transactionsByTime.past.push(transaction)
+      }
+    })
+
+    return transactionsByTime
+  }, [transactions])
+
+  if (isPending) {
+    return (
+      <div className="flex flex-col gap-2">
+        <TransactionHistorySkeleton />
+      </div>
+    )
+  }
+
+  interface TimeLabelProps {
+    label: string
+  }
+
+  const TimeLabel = ({ label }: TimeLabelProps) => {
+    return (
+      <div>
+        <Text variant="normal" color="muted" fontWeight="medium">
+          {label}
+        </Text>
+      </div>
+    )
+  }
+
+  interface TransactionsListProps {
+    transactions: Transaction[]
+  }
+
+  const TransactionsList = ({ transactions }: TransactionsListProps) => {
+    return (
+      <div className="flex flex-col gap-2">
+        {transactions.map((transaction, index) => {
+          return (
+            <div className="flex flex-col gap-2" key={`${transaction.txnHash}-${index}`}>
+              <TransactionHistoryItem transaction={transaction} />
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-5">
+      {transactionPeriods.map(period => {
+        const txs = transactionsByTime[period.id]
+        if (txs.length === 0) {
+          return null
+        }
+        return (
+          <div className="flex flex-col gap-3" key={period.id}>
+            <TimeLabel label={period.label} />
+            <TransactionsList transactions={txs} />
+          </div>
+        )
+      })}
+      {transactions.length === 0 && (
+        <div className="flex flex-col gap-3">
+          <TimeLabel label={'History'} />
+          <Text color="primary">No Recent Transaction History Found</Text>
+        </div>
+      )}
+      {isFetchingNextPage && (
+        <div className="flex m-4 items-center justify-center">
+          <Spinner />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/WalletHeader/components/AccountInformation.tsx

@@ -0,0 +1,31 @@
+import { formatAddress } from '@0xsequence/connect'
+import { Text, GradientAvatar, ChevronDownIcon } from '@0xsequence/design-system'
+import React, { forwardRef } from 'react'
+import { useAccount } from 'wagmi'
+
+interface AccountInformationProps {
+  onClickAccount: () => void
+}
+
+export const AccountInformation = forwardRef(({ onClickAccount }: AccountInformationProps, ref) => {
+  const { address } = useAccount()
+
+  return (
+    <div className="flex gap-2 items-center">
+      <div className="flex w-full flex-col items-center justify-center">
+        <div
+          className="flex gap-2 items-center justify-center relative select-none cursor-pointer"
+          onClick={onClickAccount}
+          // @ts-ignore-next-line
+          ref={ref}
+        >
+          <GradientAvatar size="sm" address={address || ''} />
+          <Text color="primary" fontWeight="medium" variant="normal">
+            {formatAddress(address || '')}
+          </Text>
+          <ChevronDownIcon className="text-primary" />
+        </div>
+      </div>
+    </div>
+  )
+})

package/src/components/WalletHeader/components/WalletDropdownContent.tsx

@@ -0,0 +1,96 @@
+import { formatAddress, useTheme } from '@0xsequence/connect'
+import {
+  Button,
+  IconButton,
+  CloseIcon,
+  GradientAvatar,
+  Text,
+  QrCodeIcon,
+  SettingsIcon,
+  SignoutIcon,
+  TransactionIcon
+} from '@0xsequence/design-system'
+import React, { forwardRef } from 'react'
+import { useDisconnect, useAccount } from 'wagmi'
+
+import { useNavigation } from '../../../hooks'
+import { useOpenWalletModal } from '../../../hooks/useOpenWalletModal'
+import { CopyButton } from '../../CopyButton'
+
+interface WalletDropdownContentProps {
+  setOpenWalletDropdown: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+export const WalletDropdownContent = forwardRef(({ setOpenWalletDropdown }: WalletDropdownContentProps, ref: any) => {
+  const { setNavigation } = useNavigation()
+  const { setOpenWalletModal } = useOpenWalletModal()
+  const { address } = useAccount()
+  const { disconnect } = useDisconnect()
+  const { theme } = useTheme()
+  const onClickReceive = () => {
+    setOpenWalletDropdown(false)
+    setNavigation({
+      location: 'receive'
+    })
+  }
+
+  const onClickHistory = () => {
+    setOpenWalletDropdown(false)
+    setNavigation({
+      location: 'history'
+    })
+  }
+
+  const onClickSettings = () => {
+    setOpenWalletDropdown(false)
+    setNavigation({
+      location: 'settings'
+    })
+  }
+
+  const onClickSignout = () => {
+    setOpenWalletModal(false)
+    setOpenWalletDropdown(false)
+    disconnect()
+  }
+
+  const getDropdownBackgroundColor = () => {
+    switch (theme) {
+      case 'dark':
+        return 'rgba(38, 38, 38, 0.85)'
+      case 'light':
+        return 'rgba(217, 217, 217, 0.85)'
+      default:
+        return 'transparent'
+    }
+  }
+
+  return (
+    <div
+      className="relative pointer-events-auto backdrop-blur-md p-3 z-30 top-4 left-4 rounded-xl"
+      ref={ref}
+      style={{
+        width: 'calc(100vw - 30px)',
+        maxWidth: '370px',
+        background: getDropdownBackgroundColor()
+      }}
+    >
+      <div className="flex flex-row justify-between items-start">
+        <div className="flex flex-row justify-center items-center gap-3 ml-2 text-primary">
+          <GradientAvatar size="md" address={address || ''} />
+          <Text variant="large" fontWeight="bold" color="primary">
+            {formatAddress(address || '')}
+          </Text>
+          <CopyButton className="ml-[-16px]" buttonVariant="icon" size="md" text={address || ''} />
+        </div>
+        <IconButton className="bg-button-glass" onClick={() => setOpenWalletDropdown(false)} size="xs" icon={CloseIcon} />
+      </div>
+      <div className="flex gap-2 mt-3 flex-col">
+        <Button className="w-full rounded-xl" variant="glass" leftIcon={QrCodeIcon} label="Receive" onClick={onClickReceive} />
+        <Button className="w-full rounded-xl" leftIcon={TransactionIcon} label="History" onClick={onClickHistory} />
+        <Button className="w-full rounded-xl" leftIcon={SettingsIcon} label="Settings" onClick={onClickSettings} />
+        <Button className="w-full rounded-xl" label="Sign Out" leftIcon={SignoutIcon} onClick={onClickSignout} />
+      </div>
+    </div>
+  )
+})

package/src/components/WalletHeader/index.tsx

@@ -0,0 +1,84 @@
+import { ChevronLeftIcon, IconButton, SearchIcon } from '@0xsequence/design-system'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import { AnimatePresence, motion } from 'motion/react'
+import React, { useState, useRef, useEffect } from 'react'
+
+import { HEADER_HEIGHT } from '../../constants'
+import { useNavigation, useOpenWalletModal } from '../../hooks'
+
+import { AccountInformation } from './components/AccountInformation'
+import { WalletDropdownContent } from './components/WalletDropdownContent'
+
+export const WalletHeader = () => {
+  const { openWalletModalState } = useOpenWalletModal()
+
+  const [openWalletDropdown, setOpenWalletDropdown] = useState<boolean>(false)
+  const { goBack, history, setNavigation } = useNavigation()
+  const hasDropdownOpened = useRef<boolean>(false)
+
+  useEffect(() => {
+    if (!openWalletModalState) {
+      setOpenWalletDropdown(false)
+    }
+  }, [openWalletModalState])
+
+  // Close dropdown when navigating to a new page
+  useEffect(() => {
+    if (openWalletDropdown) {
+      if (!hasDropdownOpened.current) {
+        hasDropdownOpened.current = true
+      } else {
+        setOpenWalletDropdown(false)
+      }
+    } else {
+      hasDropdownOpened.current = false
+    }
+  }, [history.length, openWalletDropdown])
+
+  const onClickAccount = () => {
+    setOpenWalletDropdown(true)
+  }
+
+  const onClickBack = () => {
+    goBack()
+  }
+
+  const onClickSearch = () => {
+    setNavigation({
+      location: 'search'
+    })
+  }
+
+  return (
+    <motion.div>
+      <PopoverPrimitive.Root open={openWalletDropdown}>
+        <PopoverPrimitive.Anchor />
+        <div
+          className="flex bg-background-primary z-20 fixed flex-row items-center justify-between w-full px-4"
+          style={{
+            height: HEADER_HEIGHT,
+            paddingTop: '6px'
+          }}
+        >
+          {history.length > 0 ? (
+            <IconButton onClick={onClickBack} icon={ChevronLeftIcon} size="xs" />
+          ) : (
+            <IconButton onClick={onClickSearch} icon={SearchIcon} size="xs" />
+          )}
+          <PopoverPrimitive.Trigger asChild>
+            <AccountInformation onClickAccount={onClickAccount} />
+          </PopoverPrimitive.Trigger>
+          <div style={{ width: '44px' }} />
+        </div>
+
+        <AnimatePresence>
+          {openWalletDropdown && (
+            <PopoverPrimitive.Content asChild side="bottom" align="start">
+              <WalletDropdownContent setOpenWalletDropdown={setOpenWalletDropdown} />
+            </PopoverPrimitive.Content>
+          )}
+        </AnimatePresence>
+      </PopoverPrimitive.Root>
+    </motion.div>
+  )
+}

package/src/constants/abi.ts

@@ -0,0 +1,90 @@
+export const ERC_1155_ABI = [
+  {
+    inputs: [
+      {
+        internalType: 'address',
+        name: '_from',
+        type: 'address'
+      },
+      {
+        internalType: 'address',
+        name: '_to',
+        type: 'address'
+      },
+      {
+        internalType: 'uint256[]',
+        name: '_ids',
+        type: 'uint256[]'
+      },
+      {
+        internalType: 'uint256[]',
+        name: '_amounts',
+        type: 'uint256[]'
+      },
+      {
+        internalType: 'bytes',
+        name: '_data',
+        type: 'bytes'
+      }
+    ],
+    name: 'safeBatchTransferFrom',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function'
+  }
+]
+
+export const ERC_20_ABI = [
+  {
+    constant: false,
+    inputs: [
+      {
+        internalType: 'address',
+        name: 'recipient',
+        type: 'address'
+      },
+      {
+        internalType: 'uint256',
+        name: 'amount',
+        type: 'uint256'
+      }
+    ],
+    name: 'transfer',
+    outputs: [
+      {
+        internalType: 'bool',
+        name: '',
+        type: 'bool'
+      }
+    ],
+    payable: false,
+    stateMutability: 'nonpayable',
+    type: 'function'
+  }
+]
+
+export const ERC_721_ABI = [
+  {
+    inputs: [
+      {
+        internalType: 'address',
+        name: 'from',
+        type: 'address'
+      },
+      {
+        internalType: 'address',
+        name: 'to',
+        type: 'address'
+      },
+      {
+        internalType: 'uint256',
+        name: 'tokenId',
+        type: 'uint256'
+      }
+    ],
+    name: 'safeTransferFrom',
+    outputs: [],
+    stateMutability: 'nonpayable',
+    type: 'function'
+  }
+]