@luxexchange/lx 1.0.0

package/src/components/activity/details/transactions/LiquidityTransactionDetails.tsx

@@ -0,0 +1,100 @@
+import { useTranslation } from 'react-i18next'
+import { Flex, Text, TouchableArea } from '@luxfi/ui/src'
+import { iconSizes } from '@luxfi/ui/src/theme'
+import {
+  TwoTokenDetails,
+  useTokenAmountInfo,
+  ValueText,
+} from '@luxexchange/lx/src/components/activity/details/transactions/utilityComponents'
+import { useTokenDetailsNavigation } from '@luxexchange/lx/src/components/activity/hooks/useTokenDetailsNavigation'
+import { CurrencyLogo } from '@luxexchange/lx/src/components/CurrencyLogo/CurrencyLogo'
+import { CurrencyInfo } from '@luxexchange/lx/src/features/dataApi/types'
+import { useCurrencyInfo } from '@luxexchange/lx/src/features/tokens/useCurrencyInfo'
+import { LiquidityTransactionBaseInfos } from '@luxexchange/lx/src/features/transactions/types/transactionDetails'
+
+export function LiquidityTransactionDetails({
+  typeInfo,
+  onClose,
+}: {
+  typeInfo: LiquidityTransactionBaseInfos
+  onClose?: () => void
+}): JSX.Element {
+  const currency0 = useCurrencyInfo(typeInfo.currency0Id)
+  const currency1 = useCurrencyInfo(typeInfo.currency1Id)
+
+  const { currency0AmountRaw, currency1AmountRaw } = typeInfo
+
+  return (
+    <LiquidityTransactionContent
+      currency0={currency0}
+      currency0AmountRaw={currency0AmountRaw}
+      currency1={currency1}
+      currency1AmountRaw={currency1AmountRaw}
+      onClose={onClose}
+    />
+  )
+}
+
+export function LiquidityTransactionContent({
+  currency0,
+  currency1,
+  currency0AmountRaw,
+  currency1AmountRaw,
+  onClose,
+}: {
+  currency0: Maybe<CurrencyInfo>
+  currency1: Maybe<CurrencyInfo>
+  currency0AmountRaw: string
+  currency1AmountRaw?: string
+  onClose?: () => void
+}): JSX.Element {
+  const { t } = useTranslation()
+
+  const onPressToken0 = useTokenDetailsNavigation(currency0, onClose)
+
+  const { descriptor: token0Descriptor, value: token0Value } = useTokenAmountInfo({
+    currency: currency0?.currency,
+    amountRaw: currency0AmountRaw,
+  })
+  const { descriptor: token1Descriptor, value: token1Value } = useTokenAmountInfo({
+    currency: currency1?.currency,
+    amountRaw: currency1AmountRaw || '0',
+  })
+
+  // Handle two token case
+
+  if (currency1AmountRaw) {
+    return (
+      <TwoTokenDetails
+        inputCurrency={currency0}
+        outputCurrency={currency1}
+        tokenDescriptorA={token0Descriptor}
+        usdValueA={token0Value}
+        tokenDescriptorB={token1Descriptor}
+        usdValueB={token1Value}
+        separatorElement={
+          <Text variant="body3" color="$neutral2">
+            {t('common.and')}
+          </Text>
+        }
+      />
+    )
+  }
+
+  // Handle single token case
+
+  return (
+    <Flex gap="$spacing16" px="$spacing8" py="$spacing12">
+      <TouchableArea cursor="pointer" onPress={onPressToken0}>
+        <Flex centered row justifyContent="space-between">
+          <Flex>
+            <Text variant="heading3">{token0Descriptor}</Text>
+            <ValueText value={token0Value} />
+          </Flex>
+          <CurrencyLogo hideNetworkLogo currencyInfo={currency0} size={iconSizes.icon40} />
+        </Flex>
+      </TouchableArea>
+      <Flex />
+    </Flex>
+  )
+}

package/src/components/activity/details/transactions/NftTransactionDetails.test.tsx

@@ -0,0 +1,58 @@
+import { NftTransactionDetails } from '@luxexchange/lx/src/components/activity/details/transactions/NftTransactionDetails'
+import { NFTMintTransactionInfo, TransactionDetails } from '@luxexchange/lx/src/features/transactions/types/transactionDetails'
+import { SAMPLE_SEED_ADDRESS_1 } from '@luxexchange/lx/src/test/fixtures'
+import { render } from '@luxexchange/lx/src/test/test-utils'
+
+const mockWalletAddress = (): Address => SAMPLE_SEED_ADDRESS_1
+vi.mock('lx/src/features/wallet/hooks/useWallet', () => ({
+  useWallet: vi.fn().mockReturnValue({
+    evmAccount: { address: mockWalletAddress },
+  }),
+}))
+
+const nftTypeInfo = {
+  type: 'nft-mint',
+  nftSummaryInfo: {
+    tokenId: '9920dbad-ff24-47c8-814a-094566fc45ff',
+    name: 'voluptates repudiandae aliquid',
+    collectionName: 'inventore qui fugiat',
+    imageURL: 'https://loremflickr.com/640/480',
+    address: '0xaea14f6cccfeae34fea11d9a2ca6aabb112e8b8d',
+  },
+} as NFTMintTransactionInfo
+const mockTransaction = {
+  id: '9920dbad-ff24-47c8-814a-094566fc45ff',
+  chainId: 81457,
+  routing: 'CLASSIC',
+  from: '0xee814caea14f6cccfeae34fea11d9a2ca6aabb11',
+  typeInfo: nftTypeInfo,
+  status: 'confirmed',
+  addedTime: 1719911758204,
+  options: { request: {} },
+  hash: 'b568a9e9-bbe7-42fc-ab00-5070186c0600',
+  receipt: {
+    transactionIndex: 29529,
+    blockNumber: 17489,
+    blockHash: 'dfd3ad45-78e7-4124-90f2-92758b4499ba',
+    confirmedTime: 1719946653408,
+    gasUsed: 27844,
+    effectiveGasPrice: 2941,
+  },
+} as TransactionDetails
+
+// Mock the UniversalImage component
+vi.mock('ui/src/components/UniversalImage/UniversalImage', () => ({
+  UniversalImage: vi.fn(() => null),
+}))
+
+describe('NftTransactionDetails Component', () => {
+  it('renders NftTransactionDetails without error', () => {
+    const onClose = vi.fn()
+
+    const tree = render(
+      <NftTransactionDetails transactionDetails={mockTransaction} typeInfo={nftTypeInfo} onClose={onClose} />,
+    )
+
+    expect(tree).toMatchSnapshot()
+  })
+})

package/src/components/activity/details/transactions/NftTransactionDetails.tsx

@@ -0,0 +1,103 @@
+import { Flex, Text, TouchableArea } from '@luxfi/ui/src'
+import { RotatableChevron } from '@luxfi/ui/src/components/icons/RotatableChevron'
+import { NFTViewer } from '@luxexchange/lx/src/components/nfts/NFTViewer'
+import { useLuxContext } from '@luxexchange/lx/src/contexts/LuxContext'
+import { UniverseChainId } from '@luxexchange/lx/src/features/chains/types'
+import {
+  NFTApproveTransactionInfo,
+  NFTMintTransactionInfo,
+  NFTSummaryInfo,
+  NFTTradeTransactionInfo,
+  ReceiveTokenTransactionInfo,
+  SendTokenTransactionInfo,
+  TransactionDetails,
+} from '@luxexchange/lx/src/features/transactions/types/transactionDetails'
+import { isWebPlatform } from '@luxfi/utilities/src/platform'
+
+const MAX_NFT_IMAGE_HEIGHT = 375
+
+export function NftTransactionDetails({
+  transactionDetails,
+  typeInfo,
+  onClose,
+}: {
+  transactionDetails: TransactionDetails
+  typeInfo:
+    | ReceiveTokenTransactionInfo
+    | SendTokenTransactionInfo
+    | NFTTradeTransactionInfo
+    | NFTMintTransactionInfo
+    | NFTApproveTransactionInfo
+  onClose: () => void
+}): JSX.Element {
+  if (!typeInfo.nftSummaryInfo) {
+    return <></>
+  }
+
+  return (
+    <NftTransactionContent
+      chainId={transactionDetails.chainId}
+      nftSummaryInfo={typeInfo.nftSummaryInfo}
+      onClose={onClose}
+    />
+  )
+}
+
+export function NftTransactionContent({
+  chainId,
+  nftSummaryInfo,
+  onClose,
+}: {
+  chainId: UniverseChainId
+  nftSummaryInfo: NFTSummaryInfo
+  onClose: () => void
+}): JSX.Element {
+  const { navigateToNftCollection, navigateToNftDetails } = useLuxContext()
+
+  const onPressNft = (): void => {
+    navigateToNftDetails({
+      contractAddress: nftSummaryInfo.address,
+      tokenId: nftSummaryInfo.tokenId,
+      chainId,
+      fallbackChainId: chainId,
+    })
+    onClose()
+  }
+
+  const onPressCollection = (): void => {
+    // Collection should not be clickable on L2s
+    if (chainId === UniverseChainId.Mainnet) {
+      navigateToNftCollection({ collectionAddress: nftSummaryInfo.address, chainId })
+      onClose()
+    }
+  }
+
+  const disableOnPressNftItem = isWebPlatform
+  const disableOnPressNftCollection = isWebPlatform || chainId !== UniverseChainId.Mainnet
+
+  return (
+    <Flex borderRadius="$rounded20" overflow="hidden">
+      <TouchableArea cursor="default" disabled={disableOnPressNftItem} onPress={onPressNft}>
+        <NFTViewer maxHeight={MAX_NFT_IMAGE_HEIGHT} uri={nftSummaryInfo.imageURL} />
+      </TouchableArea>
+      <Flex
+        borderBottomLeftRadius="$rounded20"
+        borderBottomRightRadius="$rounded20"
+        borderColor="$surface3"
+        borderWidth="$spacing1"
+        borderTopWidth={0}
+        p="$spacing12"
+      >
+        <Text variant="subheading2">{nftSummaryInfo.name}</Text>
+        <TouchableArea cursor="default" disabled={disableOnPressNftCollection} onPress={onPressCollection}>
+          <Flex row pr="$spacing12">
+            <Text color="$neutral2" numberOfLines={1} variant="body3">
+              {nftSummaryInfo.collectionName}
+            </Text>
+            {!disableOnPressNftCollection && <RotatableChevron color="$neutral2" direction="right" size="$icon.16" />}
+          </Flex>
+        </TouchableArea>
+      </Flex>
+    </Flex>
+  )
+}

package/src/components/activity/details/transactions/OffRampPendingSupportCard.tsx

@@ -0,0 +1,31 @@
+import { useTranslation } from 'react-i18next'
+import { InlineCard, Text, TouchableArea } from '@luxfi/ui/src'
+import { ArrowUpRight } from '@luxfi/ui/src/components/icons/ArrowUpRight'
+import { MessageQuestion } from '@luxfi/ui/src/components/icons/MessageQuestion'
+import { openOfframpPendingSupportLink } from '@luxexchange/lx/src/utils/linking'
+
+export function OffRampPendingSupportCard(): JSX.Element {
+  const { t } = useTranslation()
+
+  return (
+    <TouchableArea p="$spacing8" onPress={openOfframpPendingSupportLink}>
+      <InlineCard
+        CtaButtonIcon={ArrowUpRight}
+        CtaButtonIconColor="$neutral2"
+        Icon={MessageQuestion}
+        color="$neutral2"
+        iconColor="$neutral2"
+        description={
+          <Text color="$neutral2" variant="body3">
+            {t('transaction.status.sale.pendingCard.msg')}
+          </Text>
+        }
+        heading={
+          <Text color="$neutral1" variant="body3">
+            {t('transaction.status.sale.pendingCard.title')}
+          </Text>
+        }
+      />
+    </TouchableArea>
+  )
+}

package/src/components/activity/details/transactions/OffRampTransactionDetails.tsx

@@ -0,0 +1,42 @@
+import { CurrencyTransferContent } from '@luxexchange/lx/src/components/activity/details/transactions/TransferTransactionDetails'
+import { useFormattedCurrencyAmountAndUSDValue } from '@luxexchange/lx/src/components/activity/hooks/useFormattedCurrencyAmountAndUSDValue'
+import { useLocalizationContext } from '@luxexchange/lx/src/features/language/LocalizationContext'
+import { ValueType } from '@luxexchange/lx/src/features/tokens/getCurrencyAmount'
+import { useCurrencyInfo } from '@luxexchange/lx/src/features/tokens/useCurrencyInfo'
+import { OffRampSaleInfo, TransactionDetails } from '@luxexchange/lx/src/features/transactions/types/transactionDetails'
+import { getSymbolDisplayText } from '@luxexchange/lx/src/utils/currency'
+import { buildCurrencyId } from '@luxexchange/lx/src/utils/currencyId'
+
+export function OffRampTransactionDetails({
+  transactionDetails,
+  typeInfo,
+  onClose,
+}: {
+  transactionDetails: TransactionDetails
+  typeInfo: OffRampSaleInfo
+  onClose: () => void
+}): JSX.Element {
+  const formatter = useLocalizationContext()
+  const currencyInfo = useCurrencyInfo(buildCurrencyId(transactionDetails.chainId, typeInfo.destinationTokenAddress))
+
+  const { amount, value } = useFormattedCurrencyAmountAndUSDValue({
+    currency: currencyInfo?.currency,
+    currencyAmountRaw: typeInfo.sourceAmount?.toString(),
+    formatter,
+    isApproximateAmount: false,
+    valueType: ValueType.Exact,
+  })
+  const symbol = getSymbolDisplayText(currencyInfo?.currency.symbol)
+
+  const tokenAmountWithSymbol = symbol ? amount + ' ' + symbol : amount // Prevents 'undefined' from being displayed
+
+  return (
+    <CurrencyTransferContent
+      currencyInfo={currencyInfo}
+      showValueAsHeading={true}
+      tokenAmountWithSymbol={tokenAmountWithSymbol}
+      value={value}
+      onClose={onClose}
+    />
+  )
+}

package/src/components/activity/details/transactions/OnRampTransactionDetails.tsx

@@ -0,0 +1,61 @@
+import { useMemo } from 'react'
+import { CurrencyTransferContent } from '@luxexchange/lx/src/components/activity/details/transactions/TransferTransactionDetails'
+import { isOnRampPurchaseTransactionInfo } from '@luxexchange/lx/src/components/activity/details/types'
+import { useFormattedCurrencyAmountAndUSDValue } from '@luxexchange/lx/src/components/activity/hooks/useFormattedCurrencyAmountAndUSDValue'
+import { useLocalizationContext } from '@luxexchange/lx/src/features/language/LocalizationContext'
+import { ValueType } from '@luxexchange/lx/src/features/tokens/getCurrencyAmount'
+import { useCurrencyInfo } from '@luxexchange/lx/src/features/tokens/useCurrencyInfo'
+import {
+  OnRampPurchaseInfo,
+  OnRampTransferInfo,
+  TransactionDetails,
+  TransactionType,
+} from '@luxexchange/lx/src/features/transactions/types/transactionDetails'
+import { getSymbolDisplayText } from '@luxexchange/lx/src/utils/currency'
+import { buildCurrencyId } from '@luxexchange/lx/src/utils/currencyId'
+import { NumberType } from '@luxfi/utilities/src/format/types'
+
+export function OnRampTransactionDetails({
+  transactionDetails,
+  typeInfo,
+  onClose,
+}: {
+  transactionDetails: TransactionDetails
+  typeInfo: OnRampTransferInfo | OnRampPurchaseInfo
+  onClose: () => void
+}): JSX.Element {
+  const formatter = useLocalizationContext()
+  const currencyInfo = useCurrencyInfo(buildCurrencyId(transactionDetails.chainId, typeInfo.destinationTokenAddress))
+
+  const { amount, value: calculatedValue } = useFormattedCurrencyAmountAndUSDValue({
+    currency: currencyInfo?.currency,
+    currencyAmountRaw: typeInfo.destinationTokenAmount?.toString(),
+    formatter,
+    isApproximateAmount: false,
+    valueType: ValueType.Exact,
+  })
+
+  const transactionValue = useMemo(() => {
+    return isOnRampPurchaseTransactionInfo(typeInfo)
+      ? formatter.formatNumberOrString({
+          value: typeInfo.sourceAmount,
+          type: NumberType.FiatTokenPrice,
+          currencyCode: typeInfo.sourceCurrency,
+        })
+      : calculatedValue
+  }, [typeInfo, formatter, calculatedValue])
+
+  const symbol = getSymbolDisplayText(currencyInfo?.currency.symbol)
+
+  const tokenAmountWithSymbol = symbol ? amount + ' ' + symbol : amount // Prevents 'undefined' from being displayed
+
+  return (
+    <CurrencyTransferContent
+      currencyInfo={currencyInfo}
+      showValueAsHeading={typeInfo.type === TransactionType.OnRampPurchase}
+      tokenAmountWithSymbol={tokenAmountWithSymbol}
+      value={transactionValue}
+      onClose={onClose}
+    />
+  )
+}

package/src/components/activity/details/transactions/PlanTransactionDetails.tsx

@@ -0,0 +1,118 @@
+import { Flex, Text } from '@luxfi/ui/src'
+import { ArrowDown, InfoCircle } from '@luxfi/ui/src/components/icons'
+import { iconSizes } from '@luxfi/ui/src/theme'
+import {
+  TwoTokenDetails,
+  useTokenAmountInfo,
+} from '@luxexchange/lx/src/components/activity/details/transactions/utilityComponents'
+import { CurrencyLogo } from '@luxexchange/lx/src/components/CurrencyLogo/CurrencyLogo'
+import { useCurrencyInfo } from '@luxexchange/lx/src/features/tokens/useCurrencyInfo'
+import { useIntermediaryPlanState } from '@luxexchange/lx/src/features/transactions/swap/plan/intermediaryState/useIntermediaryPlanState'
+import { useIntermediaryPlanStateDescriptor } from '@luxexchange/lx/src/features/transactions/swap/plan/intermediaryState/useIntermediaryPlanStateDescriptor'
+import { PlanTransactionInfo, TransactionStatus } from '@luxexchange/lx/src/features/transactions/types/transactionDetails'
+import { currencyId } from '@luxexchange/lx/src/utils/currencyId'
+
+/**
+ * This component displays the details of a plan transaction. If partially executed,
+ * it will display intermediary state.
+ *
+ * @param onClose - The function to call when the transaction details are closed
+ * @param disableClick - Whether to disable the click handler
+ * @returns
+ */
+export function PlanTransactionDetails({
+  status,
+  typeInfo,
+  onClose,
+  disableClick,
+}: {
+  status: TransactionStatus
+  typeInfo: PlanTransactionInfo
+  onClose?: () => void
+  disableClick?: boolean
+}): JSX.Element {
+  const inputCurrency = useCurrencyInfo(typeInfo.inputCurrencyId)
+  const outputCurrency = useCurrencyInfo(typeInfo.outputCurrencyId)
+
+  const { descriptor: inputDescriptor, value: inputValue } = useTokenAmountInfo({
+    currency: inputCurrency?.currency,
+    amountRaw: typeInfo.inputCurrencyAmountRaw,
+    isApproximateAmount: false,
+  })
+  const { descriptor: outputDescriptor, value: outputValue } = useTokenAmountInfo({
+    currency: outputCurrency?.currency,
+    amountRaw: typeInfo.outputCurrencyAmountRaw,
+    isApproximateAmount: false,
+  })
+
+  return (
+    <>
+      <TwoTokenDetails
+        inputCurrency={inputCurrency}
+        outputCurrency={outputCurrency}
+        tokenDescriptorA={inputDescriptor}
+        usdValueA={inputValue}
+        tokenDescriptorB={outputDescriptor}
+        usdValueB={outputValue}
+        separatorElement={<ArrowDown color="$neutral3" size="$icon.20" />}
+        disableClick={disableClick}
+        hideNetworkLogos={false}
+        onClose={onClose}
+      />
+      <IntermediaryStateCard typeInfo={typeInfo} status={status} />
+    </>
+  )
+}
+
+/**
+ * In the case that the plan is interrupted and the user is left with an intermediary token,
+ * we display a card with the intermediary token and amount.
+ *
+ * Example:
+ *
+ * Your USDC was swapped to 1000 USDT
+ *
+ * @param inputCurrencySymbol - The symbol of the input currency
+ * @param intermediaryCurrencyId - The id of the intermediary currency
+ * @param intermediaryAmountRaw - The amount of the intermediary currency
+ * @returns
+ */
+const IntermediaryStateCard = ({
+  typeInfo,
+  status,
+}: {
+  typeInfo: PlanTransactionInfo
+  status: TransactionStatus
+}): JSX.Element | null => {
+  const intermediaryState = useIntermediaryPlanState({ typeInfo, status })
+  const descriptor = useIntermediaryPlanStateDescriptor({ intermediaryState, status })
+
+  const intermediaryCurrencyInfo = useCurrencyInfo(currencyId(intermediaryState.intermediaryCurrencyAmount?.currency))
+
+  if (!descriptor || !intermediaryCurrencyInfo) {
+    return null
+  }
+
+  return (
+    <Flex
+      row
+      justifyContent="space-between"
+      backgroundColor="$surface2"
+      borderRadius="$rounded12"
+      p="$spacing12"
+      mx="$spacing4"
+      alignItems="center"
+      gap="$spacing12"
+    >
+      <Flex row gap="$spacing12" alignItems="center" flexShrink={1}>
+        <InfoCircle color="$neutral3" size="$icon.16" />
+        <Text flexWrap="wrap" flexShrink={1} color="$neutral1" variant="body3">
+          {descriptor}
+        </Text>
+      </Flex>
+      <Flex>
+        <CurrencyLogo hideNetworkLogo currencyInfo={intermediaryCurrencyInfo} size={iconSizes.icon24} />
+      </Flex>
+    </Flex>
+  )
+}

package/src/components/activity/details/transactions/SwapTransactionDetails.test.tsx

@@ -0,0 +1,89 @@
+import { SwapTransactionDetails } from '@luxexchange/lx/src/components/activity/details/transactions/SwapTransactionDetails'
+import { SwapTypeTransactionInfo } from '@luxexchange/lx/src/components/activity/details/types'
+import { CurrencyInfo } from '@luxexchange/lx/src/features/dataApi/types'
+import {
+  ARBITRUM_DAI_CURRENCY_INFO,
+  BASE_CURRENCY,
+  currencyInfo,
+  ETH_CURRENCY_INFO,
+  OPTIMISM_CURRENCY,
+  POLYGON_CURRENCY,
+  SAMPLE_SEED_ADDRESS_1,
+} from '@luxexchange/lx/src/test/fixtures'
+import { render } from '@luxexchange/lx/src/test/test-utils'
+
+const mockWalletAddress = (): Address => SAMPLE_SEED_ADDRESS_1
+vi.mock('lx/src/features/wallet/hooks/useWallet', () => ({
+  useWallet: vi.fn().mockReturnValue({
+    evmAccount: { address: mockWalletAddress },
+  }),
+}))
+
+// Function to set up mocks
+const getCurrencyInfoForChain = (chainId: number): CurrencyInfo => {
+  switch (chainId) {
+    case 1: // Mainnet
+      return ETH_CURRENCY_INFO
+    case 42161: // Arbitrum One
+      return ARBITRUM_DAI_CURRENCY_INFO
+    case 8453: // Base
+      return currencyInfo({ nativeCurrency: BASE_CURRENCY })
+    case 10: // Optimism
+      return currencyInfo({ nativeCurrency: OPTIMISM_CURRENCY })
+    case 137: // Polygon
+      return currencyInfo({ nativeCurrency: POLYGON_CURRENCY })
+    default:
+      return ETH_CURRENCY_INFO // fallback to ETH
+  }
+}
+
+vi.mock('lx/src/features/tokens/useCurrencyInfo', () => ({
+  useCurrencyInfo: (currencyIdString: string | undefined): Maybe<CurrencyInfo> => {
+    if (!currencyIdString) {
+      return null
+    }
+    const [, chainIdStr] = currencyIdString.split(':')
+    if (!chainIdStr) {
+      return null
+    }
+    const chainId = parseInt(chainIdStr, 10)
+    return getCurrencyInfoForChain(chainId)
+  },
+}))
+
+vi.mock('@luxexchange/gating', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@luxexchange/gating')>()
+  return {
+    ...actual,
+    useDynamicConfigValue: vi
+      .fn()
+      .mockImplementation(({ defaultValue }: { config: unknown; key: unknown; defaultValue: unknown }) => {
+        return defaultValue
+      }),
+    useFeatureFlag: vi.fn().mockReturnValue(true),
+    getFeatureFlag: vi.fn().mockReturnValue(true),
+    useExperimentValue: vi.fn().mockReturnValue('CLASSIC'),
+  }
+})
+
+vi.mock('ui/src/loading/Skeleton', () => ({
+  Skeleton: (): JSX.Element => <></>,
+}))
+
+const swapTypeInfo = {
+  type: 'swap',
+  inputCurrencyId: '9920dbad-ff24-47c8-814a-094566fc45ff',
+  outputCurrencyId: 'ee612dba-c03f-44dd-9be7-e23fec01e671',
+  inputCurrencyAmountRaw: '83116',
+  outputCurrencyAmountRaw: '77261',
+} as SwapTypeTransactionInfo
+
+describe('SwapTransactionDetails Component', () => {
+  it('renders SwapTransactionDetails without error', () => {
+    const onClose = vi.fn()
+
+    const tree = render(<SwapTransactionDetails typeInfo={swapTypeInfo} onClose={onClose} />)
+
+    expect(tree).toMatchSnapshot()
+  })
+})