@0xsequence/wallet-widget 0.0.0-20250314205219

package/src/views/SwapCoin/SwapList.tsx

@@ -0,0 +1,320 @@
+import {
+  CryptoOption,
+  compareAddress,
+  formatDisplay,
+  sendTransactions,
+  useAnalyticsContext,
+  ExtendedConnector
+} from '@0xsequence/connect'
+import { Button, Spinner, Text } from '@0xsequence/design-system'
+import {
+  useGetSwapPrices,
+  useGetSwapQuote,
+  useClearCachedBalances,
+  useGetContractInfo,
+  useIndexerClient
+} from '@0xsequence/react-hooks'
+import { useState, useEffect } from 'react'
+import { zeroAddress, formatUnits, Hex } from 'viem'
+import { useAccount, useChainId, usePublicClient, useSwitchChain, useWalletClient } from 'wagmi'
+
+import { HEADER_HEIGHT } from '../../constants'
+import { useNavigation } from '../../hooks'
+
+interface SwapListProps {
+  chainId: number
+  contractAddress: string
+  amount: string
+}
+
+export const SwapList = ({ chainId, contractAddress, amount }: SwapListProps) => {
+  const { clearCachedBalances } = useClearCachedBalances()
+  const { setNavigation } = useNavigation()
+  const { address: userAddress, connector } = useAccount()
+  const [isTxsPending, setIsTxsPending] = useState(false)
+  const [isErrorTx, setIsErrorTx] = useState(false)
+  const [selectedCurrency, setSelectedCurrency] = useState<string>()
+  const publicClient = usePublicClient({ chainId })
+  const { data: walletClient } = useWalletClient({ chainId })
+  const { switchChainAsync } = useSwitchChain()
+
+  const isConnectorSequenceBased = !!(connector as ExtendedConnector)?._wallet?.isSequenceBased
+  const { analytics } = useAnalyticsContext()
+  const connectedChainId = useChainId()
+  const isCorrectChainId = connectedChainId === chainId
+  const showSwitchNetwork = !isCorrectChainId && !isConnectorSequenceBased
+
+  const buyCurrencyAddress = contractAddress
+  const sellCurrencyAddress = selectedCurrency || ''
+
+  const {
+    data: swapPrices = [],
+    isLoading: swapPricesIsLoading,
+    isError: isErrorSwapPrices
+  } = useGetSwapPrices({
+    userAddress: userAddress ?? '',
+    buyCurrencyAddress,
+    chainId: chainId,
+    buyAmount: amount,
+    withContractInfo: true
+  })
+
+  const { data: currencyInfo, isLoading: isLoadingCurrencyInfo } = useGetContractInfo({
+    chainID: String(chainId),
+    contractAddress: contractAddress
+  })
+
+  useEffect(() => {
+    if (!swapPricesIsLoading && swapPrices.length > 0) {
+      setSelectedCurrency(swapPrices[0].info?.address)
+    }
+  }, [swapPricesIsLoading])
+
+  const disableSwapQuote = !selectedCurrency || compareAddress(selectedCurrency, buyCurrencyAddress)
+
+  const {
+    data: swapQuote,
+    isLoading: isLoadingSwapQuote,
+    isError: isErrorSwapQuote
+  } = useGetSwapQuote(
+    {
+      userAddress: userAddress ?? '',
+      buyCurrencyAddress,
+
+      buyAmount: amount,
+      chainId: chainId,
+      sellCurrencyAddress,
+      includeApprove: true
+    },
+    {
+      disabled: disableSwapQuote
+    }
+  )
+
+  const indexerClient = useIndexerClient(chainId)
+
+  const quoteFetchInProgress = isLoadingSwapQuote
+
+  const isLoading = swapPricesIsLoading || isLoadingCurrencyInfo
+
+  const onClickProceed = async () => {
+    if (!userAddress || !publicClient || !walletClient || !connector) {
+      return
+    }
+
+    setIsErrorTx(false)
+    setIsTxsPending(true)
+    try {
+      const swapPrice = swapPrices?.find(price => price.info?.address === selectedCurrency)
+      const isSwapNativeToken = compareAddress(zeroAddress, swapPrice?.price.currencyAddress || '')
+
+      const getSwapTransactions = () => {
+        if (!swapQuote || !swapPrice) {
+          return []
+        }
+
+        const swapTransactions = [
+          // Swap quote optional approve step
+          ...(swapQuote?.approveData && !isSwapNativeToken
+            ? [
+                {
+                  to: swapPrice.price.currencyAddress as Hex,
+                  data: swapQuote.approveData as Hex,
+                  chain: chainId
+                }
+              ]
+            : []),
+          // Swap quote tx
+          {
+            to: swapQuote.to as Hex,
+            data: swapQuote.transactionData as Hex,
+            chain: chainId,
+            ...(isSwapNativeToken
+              ? {
+                  value: BigInt(swapQuote.transactionValue)
+                }
+              : {})
+          }
+        ]
+        return swapTransactions
+      }
+
+      const walletClientChainId = await walletClient.getChainId()
+      if (walletClientChainId !== chainId) {
+        await walletClient.switchChain({ id: chainId })
+      }
+
+      const txHash = await sendTransactions({
+        connector,
+        walletClient,
+        publicClient,
+        chainId,
+        indexerClient,
+        senderAddress: userAddress,
+        transactions: [...getSwapTransactions()]
+      })
+
+      analytics?.track({
+        event: 'SEND_TRANSACTION_REQUEST',
+        props: {
+          type: 'crypto',
+          walletClient: (connector as ExtendedConnector | undefined)?._wallet?.id || 'unknown',
+          source: 'sequence-kit/wallet',
+          chainId: String(chainId),
+          origin: window.location.origin,
+          txHash
+        }
+      })
+
+      clearCachedBalances()
+
+      setNavigation({
+        location: 'coin-details',
+        params: {
+          chainId,
+          contractAddress
+        }
+      })
+    } catch (e) {
+      setIsTxsPending(false)
+      setIsErrorTx(true)
+      console.error('Failed to send transactions', e)
+    }
+  }
+
+  const noOptionsFound = swapPrices.length === 0
+
+  const SwapContent = () => {
+    if (isLoading) {
+      return (
+        <div className="flex w-full justify-center items-center">
+          <Spinner />
+        </div>
+      )
+    } else if (isErrorSwapPrices) {
+      return (
+        <div className="flex w-full justify-center items-center">
+          <Text variant="normal" color="primary">
+            A problem occurred while fetching swap options.
+          </Text>
+        </div>
+      )
+    } else if (noOptionsFound) {
+      return (
+        <div className="flex w-full justify-center items-center">
+          <Text variant="normal" color="primary">
+            No swap option found!
+          </Text>
+        </div>
+      )
+    } else {
+      const buyCurrencySymbol = currencyInfo?.symbol || ''
+      const buyCurrencyDecimals = currencyInfo?.decimals || 0
+      const displayedAmount = formatDisplay(formatUnits(BigInt(amount), buyCurrencyDecimals), {
+        disableScientificNotation: true,
+        disableCompactNotation: true,
+        significantDigits: 6
+      })
+
+      const getButtonLabel = () => {
+        if (quoteFetchInProgress) {
+          return 'Preparing swap...'
+        } else if (isTxsPending) {
+          return 'Processing...'
+        } else {
+          return 'Proceed'
+        }
+      }
+
+      return (
+        <div className="flex w-full gap-3 flex-col">
+          <div className="flex w-full flex-col gap-2">
+            <Text variant="small" color="primary">
+              Select a token in your wallet to swap for {displayedAmount} {buyCurrencySymbol}.
+            </Text>
+            {swapPrices.map(swapPrice => {
+              const sellCurrencyAddress = swapPrice.info?.address || ''
+
+              const formattedPrice = formatUnits(BigInt(swapPrice.price.price), swapPrice.info?.decimals || 0)
+              const displayPrice = formatDisplay(formattedPrice, {
+                disableScientificNotation: true,
+                disableCompactNotation: true,
+                significantDigits: 6
+              })
+              return (
+                <CryptoOption
+                  key={sellCurrencyAddress}
+                  chainId={chainId}
+                  currencyName={swapPrice.info?.name || swapPrice.info?.symbol || ''}
+                  symbol={swapPrice.info?.symbol || ''}
+                  isSelected={compareAddress(selectedCurrency || '', sellCurrencyAddress)}
+                  iconUrl={swapPrice.info?.logoURI}
+                  price={displayPrice}
+                  onClick={() => {
+                    setIsErrorTx(false)
+                    setSelectedCurrency(sellCurrencyAddress)
+                  }}
+                  disabled={isTxsPending}
+                />
+              )
+            })}
+          </div>
+          {isErrorTx && (
+            <div className="w-full">
+              <Text color="negative" variant="small">
+                A problem occurred while executing the transaction.
+              </Text>
+            </div>
+          )}
+
+          {isErrorSwapQuote && (
+            <div className="w-full">
+              <Text color="negative" variant="small">
+                A problem occurred while fetching swap quote.
+              </Text>
+            </div>
+          )}
+
+          {showSwitchNetwork && (
+            <div className="mt-3">
+              <Text className="mb-2" variant="small" color="primary">
+                The wallet is connected to the wrong network. Please switch network before proceeding
+              </Text>
+              <Button
+                className="mt-2 w-full"
+                variant="primary"
+                size="lg"
+                type="button"
+                label="Switch Network"
+                onClick={async () => await switchChainAsync({ chainId })}
+                disabled={isCorrectChainId}
+              />
+            </div>
+          )}
+          <Button
+            className="w-full"
+            type="button"
+            disabled={
+              noOptionsFound ||
+              !selectedCurrency ||
+              quoteFetchInProgress ||
+              isTxsPending ||
+              (!isCorrectChainId && !isConnectorSequenceBased) ||
+              showSwitchNetwork
+            }
+            variant="primary"
+            size="lg"
+            label={getButtonLabel()}
+            onClick={onClickProceed}
+          />
+        </div>
+      )
+    }
+  }
+
+  return (
+    <div className="flex p-5 gap-2 flex-col" style={{ marginTop: HEADER_HEIGHT }}>
+      <SwapContent />
+    </div>
+  )
+}

package/src/views/SwapCoin/index.tsx

@@ -0,0 +1,150 @@
+import { compareAddress, getNativeTokenInfoByChainId } from '@0xsequence/connect'
+import { Button, ChevronRightIcon, Text, NumericInput } from '@0xsequence/design-system'
+import { ContractVerificationStatus, TokenBalance } from '@0xsequence/indexer'
+import { useGetTokenBalancesSummary, useGetCoinPrices, useGetExchangeRate } from '@0xsequence/react-hooks'
+import { useRef, useState, ChangeEvent } from 'react'
+import { parseUnits, zeroAddress } from 'viem'
+import { useAccount, useConfig } from 'wagmi'
+
+import { SendItemInfo } from '../../components/SendItemInfo'
+import { HEADER_HEIGHT } from '../../constants'
+import { useSettings, useNavigation } from '../../hooks'
+import { computeBalanceFiat, limitDecimals } from '../../utils'
+
+export interface SwapCoinProps {
+  contractAddress: string
+  chainId: number
+}
+
+export const SwapCoin = ({ contractAddress, chainId }: SwapCoinProps) => {
+  const { setNavigation } = useNavigation()
+  const { chains } = useConfig()
+  const { address: accountAddress = '' } = useAccount()
+
+  const amountInputRef = useRef<HTMLInputElement>(null)
+  const { fiatCurrency } = useSettings()
+  const [amount, setAmount] = useState<string>('0')
+
+  const { data: balances = [], isPending: isPendingBalances } = useGetTokenBalancesSummary({
+    chainIds: [chainId],
+    filter: {
+      accountAddresses: [accountAddress],
+      contractStatus: ContractVerificationStatus.ALL,
+      contractWhitelist: [contractAddress],
+      omitNativeBalances: false
+    }
+  })
+
+  const nativeTokenInfo = getNativeTokenInfoByChainId(chainId, chains)
+  const tokenBalance = (balances as TokenBalance[]).find(b => b.contractAddress === contractAddress)
+  const { data: coinPrices = [], isPending: isPendingCoinPrices } = useGetCoinPrices([
+    {
+      chainId,
+      contractAddress
+    }
+  ])
+
+  const { data: conversionRate = 1, isPending: isPendingConversionRate } = useGetExchangeRate(fiatCurrency.symbol)
+
+  const isPending = isPendingBalances || isPendingCoinPrices || isPendingConversionRate
+
+  const handleChangeAmount = (ev: ChangeEvent<HTMLInputElement>) => {
+    const { value } = ev.target
+
+    // Prevent value from having more decimals than the token supports
+    const formattedValue = limitDecimals(value, decimals)
+
+    setAmount(formattedValue)
+  }
+
+  const handleFindQuotesClick = (e: ChangeEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setNavigation({
+      location: 'swap-coin-list',
+      params: {
+        chainId,
+        contractAddress,
+        amount: amountRaw.toString()
+      }
+    })
+  }
+
+  if (isPending) {
+    return null
+  }
+
+  const isNativeCoin = compareAddress(contractAddress, zeroAddress)
+  const decimals = isNativeCoin ? nativeTokenInfo.decimals : tokenBalance?.contractInfo?.decimals || 18
+  const name = isNativeCoin ? nativeTokenInfo.name : tokenBalance?.contractInfo?.name || ''
+  const imageUrl = isNativeCoin ? nativeTokenInfo.logoURI : tokenBalance?.contractInfo?.logoURI
+  const symbol = isNativeCoin ? nativeTokenInfo.symbol : tokenBalance?.contractInfo?.symbol || ''
+  const amountToSendFormatted = amount === '' ? '0' : amount
+  const amountRaw = parseUnits(amountToSendFormatted, decimals)
+
+  const amountToSendFiat = computeBalanceFiat({
+    balance: {
+      ...(tokenBalance as TokenBalance),
+      balance: amountRaw.toString()
+    },
+    prices: coinPrices,
+    conversionRate,
+    decimals
+  })
+
+  const isNonZeroAmount = amountRaw > 0n
+
+  return (
+    <form
+      className="flex p-5 gap-2 flex-col"
+      onSubmit={handleFindQuotesClick}
+      style={{
+        marginTop: HEADER_HEIGHT
+      }}
+    >
+      <div className="flex bg-background-secondary rounded-xl p-4 gap-2 flex-col">
+        <SendItemInfo
+          imageUrl={imageUrl}
+          decimals={decimals}
+          name={name}
+          symbol={symbol}
+          balance={tokenBalance?.balance || '0'}
+          fiatValue={computeBalanceFiat({
+            balance: tokenBalance as TokenBalance,
+            prices: coinPrices,
+            conversionRate,
+            decimals
+          })}
+          chainId={chainId}
+          balanceSuffix="owned"
+        />
+        <NumericInput
+          ref={amountInputRef}
+          name="amount"
+          value={amount}
+          onChange={handleChangeAmount}
+          controls={
+            <>
+              <Text className="whitespace-nowrap" variant="small" color="muted">
+                {`~${fiatCurrency.sign}${amountToSendFiat}`}
+              </Text>
+              <Text variant="xlarge" fontWeight="bold" color="text100">
+                {symbol}
+              </Text>
+            </>
+          }
+        />
+      </div>
+      <div className="flex items-center justify-center" style={{ height: '52px' }}>
+        <Button
+          className="text-primary mt-3 w-full"
+          variant="primary"
+          size="lg"
+          type="submit"
+          disabled={!isNonZeroAmount}
+          label="Continue"
+          rightIcon={ChevronRightIcon}
+        />
+      </div>
+    </form>
+  )
+}

package/src/views/TransactionDetails/index.tsx

@@ -0,0 +1,213 @@
+import { Token } from '@0xsequence/api'
+import { compareAddress, formatDisplay, getNativeTokenInfoByChainId } from '@0xsequence/connect'
+import {
+  ArrowRightIcon,
+  Button,
+  Divider,
+  GradientAvatar,
+  LinkIcon,
+  NetworkImage,
+  Skeleton,
+  Text,
+  TokenImage
+} from '@0xsequence/design-system'
+import { Transaction, TxnTransfer } from '@0xsequence/indexer'
+import { useGetCoinPrices, useGetCollectiblePrices, useGetExchangeRate } from '@0xsequence/react-hooks'
+import dayjs from 'dayjs'
+import { formatUnits, zeroAddress } from 'viem'
+import { useConfig } from 'wagmi'
+
+import { CopyButton } from '../../components/CopyButton'
+import { NetworkBadge } from '../../components/NetworkBadge'
+import { useSettings } from '../../hooks'
+
+interface TransactionDetailProps {
+  transaction: Transaction
+}
+
+export const TransactionDetails = ({ transaction }: TransactionDetailProps) => {
+  const { chains } = useConfig()
+  const { fiatCurrency } = useSettings()
+
+  const coins: Token[] = []
+  const collectibles: Token[] = []
+  transaction.transfers?.forEach(transfer => {
+    if (transfer.contractInfo?.type === 'ERC721' || transfer.contractInfo?.type === 'ERC1155') {
+      transfer.tokenIds?.forEach(tokenId => {
+        const foundCollectible = collectibles.find(
+          collectible =>
+            collectible.chainId === transaction.chainId &&
+            compareAddress(collectible.contractAddress, transfer.contractInfo?.address || '') &&
+            collectible.tokenId === tokenId
+        )
+        if (!foundCollectible) {
+          collectibles.push({
+            chainId: transaction.chainId,
+            contractAddress: transfer.contractInfo?.address || '',
+            tokenId
+          })
+        }
+      })
+    } else {
+      const contractAddress = transfer?.contractInfo?.address || zeroAddress
+      const foundCoin = coins.find(
+        coin => coin.chainId === transaction.chainId && compareAddress(coin.contractAddress, contractAddress)
+      )
+      if (!foundCoin) {
+        coins.push({
+          chainId: transaction.chainId,
+          contractAddress
+        })
+      }
+    }
+  })
+
+  const { data: coinPricesData, isPending: isPendingCoinPrices } = useGetCoinPrices(coins)
+
+  const { data: collectiblePricesData, isPending: isPendingCollectiblePrices } = useGetCollectiblePrices(collectibles)
+
+  const { data: conversionRate = 1, isPending: isPendingConversionRate } = useGetExchangeRate(fiatCurrency.symbol)
+
+  const arePricesLoading =
+    (coins.length > 0 && isPendingCoinPrices) ||
+    (collectibles.length > 0 && isPendingCollectiblePrices) ||
+    isPendingConversionRate
+
+  const nativeTokenInfo = getNativeTokenInfoByChainId(transaction.chainId, chains)
+
+  const date = dayjs(transaction.timestamp).format('ddd MMM DD YYYY, h:m:s a')
+
+  const onClickBlockExplorer = () => {
+    if (typeof window !== 'undefined') {
+      window.open(`${nativeTokenInfo.blockExplorerUrl}/tx/${transaction.txnHash}`, '_blank')
+    }
+  }
+
+  interface TransferProps {
+    transfer: TxnTransfer
+  }
+  const Transfer = ({ transfer }: TransferProps) => {
+    const recipientAddress = transfer.to
+    const recipientAddressFormatted =
+      recipientAddress.substring(0, 10) + '...' + recipientAddress.substring(transfer.to.length - 4, transfer.to.length)
+    const isNativeToken = compareAddress(transfer?.contractInfo?.address || '', zeroAddress)
+    const logoURI = isNativeToken ? nativeTokenInfo.logoURI : transfer?.contractInfo?.logoURI
+    const symbol = isNativeToken ? nativeTokenInfo.symbol : transfer?.contractInfo?.symbol || ''
+
+    return (
+      <>
+        {transfer.amounts?.map((amount, index) => {
+          const isCollectible = transfer.contractType === 'ERC721' || transfer.contractType === 'ERC1155'
+          const tokenId = transfer.tokenIds?.[index] || '0'
+          const collectibleDecimals = transfer?.tokenMetadata?.[tokenId]?.decimals || 0
+          const coinDecimals = isNativeToken ? nativeTokenInfo.decimals : transfer?.contractInfo?.decimals || 0
+          const decimals = isCollectible ? collectibleDecimals : coinDecimals
+          const formattedBalance = formatUnits(BigInt(amount), decimals)
+          const balanceDisplayed = formatDisplay(formattedBalance)
+          const fiatPrice = isCollectible
+            ? collectiblePricesData?.find(
+                collectible =>
+                  compareAddress(collectible.token.contractAddress, transfer.contractInfo?.address || '') &&
+                  collectible.token.tokenId === transfer.tokenIds?.[index] &&
+                  collectible.token.chainId === transaction.chainId
+              )?.price?.value
+            : coinPricesData?.find(
+                coin =>
+                  compareAddress(coin.token.contractAddress, transfer.contractInfo?.address || zeroAddress) &&
+                  coin.token.chainId === transaction.chainId
+              )?.price?.value
+
+          const fiatValue = (parseFloat(formattedBalance) * (conversionRate * (fiatPrice || 0))).toFixed(2)
+
+          return (
+            <div className="flex w-full flex-row gap-2 justify-between items-center" key={index}>
+              <div
+                className="flex flex-row justify-start items-center gap-2 h-12 rounded-xl bg-button-glass p-2"
+                style={{ flexBasis: '100%' }}
+              >
+                <TokenImage src={logoURI} symbol={symbol} size="sm" />
+                <div className="flex gap-0.5 flex-col items-start justify-center">
+                  <Text variant="xsmall" fontWeight="bold" color="primary">
+                    {`${balanceDisplayed} ${symbol}`}
+                  </Text>
+                  {arePricesLoading ? (
+                    <Skeleton style={{ width: '44px', height: '12px' }} />
+                  ) : (
+                    <Text variant="xsmall" fontWeight="bold" color="muted">
+                      {fiatPrice ? `${fiatCurrency.sign}${fiatValue}` : ''}
+                    </Text>
+                  )}
+                </div>
+              </div>
+              <ArrowRightIcon className="text-muted" style={{ width: '16px' }} />
+              <div
+                className="flex flex-row justify-start items-center gap-2 h-12 rounded-xl bg-button-glass p-2"
+                style={{ flexBasis: '100%' }}
+              >
+                <GradientAvatar size="sm" address={recipientAddress} />
+                <Text variant="xsmall" fontWeight="bold" color="primary">
+                  {recipientAddressFormatted}
+                </Text>
+              </div>
+            </div>
+          )
+        })}
+      </>
+    )
+  }
+
+  return (
+    <div className="flex p-5 pt-3 flex-col items-center justify-center gap-10 mt-5">
+      <div className="flex mt-6 flex-col justify-center items-center gap-1">
+        <Text variant="normal" fontWeight="medium" color="primary">
+          Transaction details
+        </Text>
+        <Text className="mb-1" variant="small" fontWeight="medium" color="muted">
+          {date}
+        </Text>
+        <NetworkBadge chainId={transaction.chainId} />
+      </div>
+      <div className="flex flex-col items-center justify-center gap-4 w-full p-4 bg-background-secondary rounded-xl">
+        <div className="flex w-full gap-1 flex-row items-center justify-start">
+          <Text variant="normal" fontWeight="medium" color="muted">
+            Transfer
+          </Text>
+          <NetworkImage chainId={transaction.chainId} size="xs" />
+        </div>
+        {transaction.transfers?.map((transfer, index) => (
+          <div className="flex w-full flex-col justify-center items-center gap-4" key={`transfer-${index}`}>
+            <Transfer transfer={transfer} />
+          </div>
+        ))}
+      </div>
+      <Button
+        className="w-full rounded-xl"
+        onClick={onClickBlockExplorer}
+        rightIcon={LinkIcon}
+        label={`View on ${nativeTokenInfo.blockExplorerName}`}
+      />
+      <div>
+        <Divider className="w-full my-2" />
+        <div className="flex w-full flex-col gap-2 justify-center items-start">
+          <Text variant="normal" color="muted" fontWeight="medium">
+            Status
+          </Text>
+          <Text variant="normal" fontWeight="medium" color="primary">
+            Complete
+          </Text>
+        </div>
+
+        <Divider className="w-full my-2" />
+        <div className="flex w-full flex-col gap-2 justify-center items-start">
+          <Text variant="normal" color="muted" fontWeight="medium">
+            Transaction Hash
+          </Text>
+          <Text variant="normal" color="primary" fontWeight="medium" style={{ overflowWrap: 'anywhere' }}>
+            {transaction.txnHash}
+          </Text>
+          <CopyButton className="mt-2" buttonVariant="with-label" text={transaction.txnHash} />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/views/index.ts

@@ -0,0 +1,13 @@
+export * from './Home'
+export * from './Receive'
+export * from './SendCoin'
+export * from './SendCollectible'
+export * from './History'
+export * from './Search'
+export * from './Settings'
+export * from './CoinDetails'
+export * from './CollectionDetails'
+export * from './CollectibleDetails'
+export * from './TransactionDetails'
+export * from './SwapCoin'
+export * from './SwapCoin/SwapList'