@luxexchange/lx 1.0.0

package/src/components/MultichainTokenDetails/MultichainAddressList.test.tsx

@@ -0,0 +1,90 @@
+import {
+  COPY_FEEDBACK_RESET_MS,
+  MultichainAddressList,
+} from '@luxexchange/lx/src/components/MultichainTokenDetails/MultichainAddressList'
+import type { MultichainTokenEntry } from '@luxexchange/lx/src/components/MultichainTokenDetails/useOrderedMultichainEntries'
+import { UniverseChainId } from '@luxexchange/lx/src/features/chains/types'
+import { ON_PRESS_EVENT_PAYLOAD } from '@luxexchange/lx/src/test/fixtures'
+import { TestID } from '@luxexchange/lx/src/test/fixtures/testIDs'
+import { act, fireEvent, render } from '@luxexchange/lx/src/test/test-utils'
+
+vi.mock('@luxfi/utilities/src/addresses', async (importOriginal) => {
+  return {
+    ...(await importOriginal()),
+    shortenAddress: vi.fn(({ address }: { address: string }) => `${address.slice(0, 6)}...`),
+  }
+})
+
+const TEST_ENTRIES: MultichainTokenEntry[] = [
+  { chainId: UniverseChainId.Mainnet, address: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48' },
+  { chainId: UniverseChainId.Base, address: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913' },
+  { chainId: UniverseChainId.ArbitrumOne, address: '0xaf88d065e77c8cC2239327C5EDb3A432268e5831' },
+]
+
+describe(MultichainAddressList, () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('renders a row per chain', () => {
+    const { queryByText } = render(<MultichainAddressList chains={TEST_ENTRIES} onCopyAddress={vi.fn()} />)
+
+    expect(queryByText('Ethereum')).toBeTruthy()
+    expect(queryByText('Base')).toBeTruthy()
+    expect(queryByText('Arbitrum')).toBeTruthy()
+  })
+
+  it('shows shortened address text', () => {
+    const { queryByText } = render(<MultichainAddressList chains={TEST_ENTRIES} onCopyAddress={vi.fn()} />)
+
+    expect(queryByText('0xA0b8...')).toBeTruthy()
+    expect(queryByText('0x8335...')).toBeTruthy()
+  })
+
+  it('calls onCopyAddress on row press', () => {
+    const onCopyAddress = vi.fn()
+    const { getAllByTestId } = render(<MultichainAddressList chains={TEST_ENTRIES} onCopyAddress={onCopyAddress} />)
+
+    const rows = getAllByTestId(TestID.MultichainCopyAddress)
+    fireEvent.press(rows[0]!, ON_PRESS_EVENT_PAYLOAD)
+
+    expect(onCopyAddress).toHaveBeenCalledWith(TEST_ENTRIES[0]!.address)
+  })
+
+  it('sets copied state when showInlineFeedback is true and resets after timeout', () => {
+    const onCopyAddress = vi.fn()
+    const { getAllByTestId } = render(
+      <MultichainAddressList showInlineFeedback chains={TEST_ENTRIES} onCopyAddress={onCopyAddress} />,
+    )
+
+    const rows = getAllByTestId(TestID.MultichainCopyAddress)
+    fireEvent.press(rows[0]!, ON_PRESS_EVENT_PAYLOAD)
+
+    expect(onCopyAddress).toHaveBeenCalledWith(TEST_ENTRIES[0]!.address)
+
+    // Timer resets the copied state after COPY_FEEDBACK_RESET_MS
+    act(() => {
+      vi.advanceTimersByTime(COPY_FEEDBACK_RESET_MS)
+    })
+
+    // After timeout, no pending timers remain
+    expect(vi.getTimerCount()).toBe(0)
+  })
+
+  it('does not show "Copied!" text when showInlineFeedback is false', () => {
+    const onCopyAddress = vi.fn()
+    const { getAllByTestId, queryByText } = render(
+      <MultichainAddressList chains={TEST_ENTRIES} showInlineFeedback={false} onCopyAddress={onCopyAddress} />,
+    )
+
+    const rows = getAllByTestId(TestID.MultichainCopyAddress)
+    fireEvent.press(rows[0]!, ON_PRESS_EVENT_PAYLOAD)
+
+    expect(onCopyAddress).toHaveBeenCalledWith(TEST_ENTRIES[0]!.address)
+    expect(queryByText('Copied')).toBeFalsy()
+  })
+})

package/src/components/MultichainTokenDetails/MultichainAddressList.tsx

@@ -0,0 +1,82 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { AnimatedCopyLabel } from '@luxfi/ui/src'
+import { iconSizes } from '@luxfi/ui/src/theme'
+import { MultichainOptionRow } from '@luxexchange/lx/src/components/MultichainTokenDetails/MultichainOptionRow'
+import { MultichainScrollableList } from '@luxexchange/lx/src/components/MultichainTokenDetails/MultichainScrollableList'
+import type { MultichainTokenEntry } from '@luxexchange/lx/src/components/MultichainTokenDetails/useOrderedMultichainEntries'
+import { UniverseChainId } from '@luxexchange/lx/src/features/chains/types'
+import { TestID } from '@luxexchange/lx/src/test/fixtures/testIDs'
+import { shortenAddress } from '@luxfi/utilities/src/addresses'
+
+export const COPY_FEEDBACK_RESET_MS = 750
+
+interface MultichainAddressListProps {
+  chains: MultichainTokenEntry[]
+  onCopyAddress: (address: string) => void
+  showInlineFeedback?: boolean
+  /** Pass true when rendered inside a Modal to enable BottomSheetScrollView on native. */
+  renderedInModal?: boolean
+}
+
+/**
+ * Scrollable list of per-chain contract addresses with copy functionality.
+ * Each row shows chain logo, chain name, shortened address, and a copy icon
+ * that animates to a checkmark when copied.
+ */
+export function MultichainAddressList({
+  chains,
+  onCopyAddress,
+  showInlineFeedback = true,
+  renderedInModal,
+}: MultichainAddressListProps): JSX.Element {
+  const { t } = useTranslation()
+  const [copiedChainId, setCopiedChainId] = useState<UniverseChainId | null>(null)
+
+  useEffect(() => {
+    if (copiedChainId === null) {
+      return undefined
+    }
+    const timeoutId = setTimeout(() => {
+      setCopiedChainId(null)
+    }, COPY_FEEDBACK_RESET_MS)
+    return () => clearTimeout(timeoutId)
+  }, [copiedChainId])
+
+  const handleCopy = useCallback(
+    (chainId: UniverseChainId, address: string) => {
+      onCopyAddress(address)
+      if (showInlineFeedback) {
+        setCopiedChainId(chainId)
+      }
+    },
+    [onCopyAddress, showInlineFeedback],
+  )
+
+  const renderAddressRow = useCallback(
+    (entry: MultichainTokenEntry) => {
+      const isCopied = showInlineFeedback && copiedChainId === entry.chainId
+      const shortened = shortenAddress({ address: entry.address })
+
+      return (
+        <MultichainOptionRow
+          chainId={entry.chainId}
+          testID={TestID.MultichainCopyAddress}
+          rightContent={
+            <AnimatedCopyLabel
+              isCopied={isCopied}
+              label={shortened}
+              copiedLabel={t('common.copied')}
+              iconSize={iconSizes.icon16}
+              iconColor="$neutral1"
+            />
+          }
+          onPress={() => handleCopy(entry.chainId, entry.address)}
+        />
+      )
+    },
+    [copiedChainId, handleCopy, showInlineFeedback, t],
+  )
+
+  return <MultichainScrollableList data={chains} renderItem={renderAddressRow} renderedInModal={renderedInModal} />
+}

package/src/components/MultichainTokenDetails/MultichainExplorerList.test.tsx

@@ -0,0 +1,46 @@
+import { MultichainExplorerList } from '@luxexchange/lx/src/components/MultichainTokenDetails/MultichainExplorerList'
+import type { MultichainTokenEntry } from '@luxexchange/lx/src/components/MultichainTokenDetails/useOrderedMultichainEntries'
+import { UniverseChainId } from '@luxexchange/lx/src/features/chains/types'
+import { ON_PRESS_EVENT_PAYLOAD } from '@luxexchange/lx/src/test/fixtures'
+import { TestID } from '@luxexchange/lx/src/test/fixtures/testIDs'
+import { fireEvent, render } from '@luxexchange/lx/src/test/test-utils'
+
+const TEST_ENTRIES: MultichainTokenEntry[] = [
+  { chainId: UniverseChainId.Mainnet, address: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48' },
+  { chainId: UniverseChainId.Base, address: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913' },
+]
+
+describe(MultichainExplorerList, () => {
+  it('renders explorer name for each chain', () => {
+    const { queryByText } = render(<MultichainExplorerList chains={TEST_ENTRIES} />)
+
+    expect(queryByText('Etherscan')).toBeTruthy()
+    expect(queryByText('BaseScan')).toBeTruthy()
+  })
+
+  it('renders chain names', () => {
+    const { queryByText } = render(<MultichainExplorerList chains={TEST_ENTRIES} />)
+
+    expect(queryByText('Ethereum')).toBeTruthy()
+    expect(queryByText('Base')).toBeTruthy()
+  })
+
+  it('calls onExplorerPress with correct URL when row is pressed', () => {
+    const onExplorerPress = vi.fn()
+    const { getAllByTestId } = render(
+      <MultichainExplorerList chains={TEST_ENTRIES} onExplorerPress={onExplorerPress} />,
+    )
+
+    const rows = getAllByTestId(TestID.MultichainExplorerLink)
+    fireEvent.press(rows[0]!, ON_PRESS_EVENT_PAYLOAD)
+
+    expect(onExplorerPress).toHaveBeenCalledTimes(1)
+    expect(onExplorerPress).toHaveBeenCalledWith(expect.stringContaining('etherscan.io'))
+  })
+
+  it('renders without error when no onExplorerPress is provided', () => {
+    const tree = render(<MultichainExplorerList chains={TEST_ENTRIES} />)
+
+    expect(tree).toMatchSnapshot()
+  })
+})

package/src/components/MultichainTokenDetails/MultichainExplorerList.tsx

@@ -0,0 +1,63 @@
+import { useCallback } from 'react'
+import { Flex, Text } from '@luxfi/ui/src'
+import { ExternalLink } from '@luxfi/ui/src/components/icons/ExternalLink'
+import { iconSizes } from '@luxfi/ui/src/theme'
+import { MultichainOptionRow } from '@luxexchange/lx/src/components/MultichainTokenDetails/MultichainOptionRow'
+import { MultichainScrollableList } from '@luxexchange/lx/src/components/MultichainTokenDetails/MultichainScrollableList'
+import type { MultichainTokenEntry } from '@luxexchange/lx/src/components/MultichainTokenDetails/useOrderedMultichainEntries'
+import { getChainInfo } from '@luxexchange/lx/src/features/chains/chainInfo'
+import { TestID } from '@luxexchange/lx/src/test/fixtures/testIDs'
+import { ExplorerDataType, getExplorerLink } from '@luxexchange/lx/src/utils/linking'
+
+interface MultichainExplorerListProps {
+  chains: MultichainTokenEntry[]
+  isNativeToken?: boolean
+  onExplorerPress?: (url: string) => void
+  /** Pass true when rendered inside a Modal to enable BottomSheetScrollView on native. */
+  renderedInModal?: boolean
+}
+
+/**
+ * Scrollable list of per-chain block explorer links.
+ * Each row shows chain logo, chain name, and a linked explorer name.
+ */
+export function MultichainExplorerList({
+  chains,
+  isNativeToken = false,
+  onExplorerPress,
+  renderedInModal,
+}: MultichainExplorerListProps): JSX.Element {
+  const renderExplorerRow = useCallback(
+    (entry: MultichainTokenEntry) => {
+      const explorerName = getChainInfo(entry.chainId).explorer.name
+      const explorerUrl = getExplorerLink({
+        chainId: entry.chainId,
+        data: entry.address,
+        type: isNativeToken ? ExplorerDataType.NATIVE : ExplorerDataType.TOKEN,
+      })
+
+      return (
+        <MultichainOptionRow
+          chainId={entry.chainId}
+          href={explorerUrl}
+          rel="noopener noreferrer"
+          tag="a"
+          target="_blank"
+          testID={TestID.MultichainExplorerLink}
+          rightContent={
+            <Flex row alignItems="center" gap="$spacing8">
+              <Text color="$neutral2" variant="buttonLabel3">
+                {explorerName}
+              </Text>
+              <ExternalLink color="$neutral2" size={iconSizes.icon16} />
+            </Flex>
+          }
+          onPress={onExplorerPress ? (): void => onExplorerPress(explorerUrl) : undefined}
+        />
+      )
+    },
+    [isNativeToken, onExplorerPress],
+  )
+
+  return <MultichainScrollableList data={chains} renderItem={renderExplorerRow} renderedInModal={renderedInModal} />
+}

package/src/components/MultichainTokenDetails/MultichainOptionRow.test.tsx

@@ -0,0 +1,41 @@
+import { Flex } from '@luxfi/ui/src'
+import { MultichainOptionRow } from '@luxexchange/lx/src/components/MultichainTokenDetails/MultichainOptionRow'
+import { UniverseChainId } from '@luxexchange/lx/src/features/chains/types'
+import { ON_PRESS_EVENT_PAYLOAD } from '@luxexchange/lx/src/test/fixtures'
+import { fireEvent, render } from '@luxexchange/lx/src/test/test-utils'
+
+describe(MultichainOptionRow, () => {
+  const defaultProps = {
+    chainId: UniverseChainId.Mainnet,
+    rightContent: <Flex testID="right-content" />,
+  }
+
+  it('renders chain name', () => {
+    const { queryByText } = render(<MultichainOptionRow {...defaultProps} />)
+
+    expect(queryByText('Ethereum')).toBeTruthy()
+  })
+
+  it('renders right content slot', () => {
+    const { queryByTestId } = render(<MultichainOptionRow {...defaultProps} />)
+
+    expect(queryByTestId('right-content')).toBeTruthy()
+  })
+
+  it('calls onPress when tapped', () => {
+    const onPress = vi.fn()
+    const { getByTestId } = render(<MultichainOptionRow {...defaultProps} testID="row" onPress={onPress} />)
+
+    expect(onPress).toHaveBeenCalledTimes(0)
+
+    fireEvent.press(getByTestId('row'), ON_PRESS_EVENT_PAYLOAD)
+
+    expect(onPress).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders without TouchableArea when no onPress or href', () => {
+    const tree = render(<MultichainOptionRow {...defaultProps} />)
+
+    expect(tree).toMatchSnapshot()
+  })
+})

package/src/components/MultichainTokenDetails/MultichainOptionRow.tsx

@@ -0,0 +1,87 @@
+import { ReactNode } from 'react'
+import { Flex, Text, TouchableArea, useMedia } from '@luxfi/ui/src'
+import { iconSizes } from '@luxfi/ui/src/theme'
+import { NetworkLogo } from '@luxexchange/lx/src/components/CurrencyLogo/NetworkLogo'
+import { getChainInfo } from '@luxexchange/lx/src/features/chains/chainInfo'
+import { UniverseChainId } from '@luxexchange/lx/src/features/chains/types'
+
+interface MultichainOptionRowProps {
+  chainId: UniverseChainId
+  rightContent: ReactNode
+  onPress?: () => void
+  testID?: string
+  /** Web-only: render as an anchor tag */
+  href?: string
+  tag?: string
+  target?: string
+  rel?: string
+}
+
+/**
+ * A single row in the multichain explorer/address dropdown.
+ * Shows a chain logo, chain name, and a right-side action slot.
+ * When `onPress` is provided, the entire row is tappable.
+ */
+export function MultichainOptionRow({
+  chainId,
+  rightContent,
+  onPress,
+  testID,
+  href,
+  tag,
+  target,
+  rel,
+}: MultichainOptionRowProps): JSX.Element {
+  const chainName = getChainInfo(chainId).label
+  const media = useMedia()
+  const isMobileLayout = media.md
+  const logoSize = isMobileLayout ? iconSizes.icon28 : iconSizes.icon20
+  const logoBorderRadius = isMobileLayout ? 8 : undefined
+
+  const content = (
+    <Flex
+      row
+      alignItems="center"
+      borderRadius="$rounded16"
+      gap="$spacing8"
+      px="$spacing8"
+      py="$spacing8"
+      width="100%"
+      $md={{ gap: '$spacing12', px: 0, height: '$spacing48' }}
+    >
+      <NetworkLogo borderRadius={logoBorderRadius} chainId={chainId} size={logoSize} />
+      <Text color="$neutral1" flex={1} numberOfLines={1} variant={isMobileLayout ? 'body1' : 'body2'}>
+        {chainName}
+      </Text>
+      {rightContent}
+    </Flex>
+  )
+
+  if (onPress || href) {
+    return (
+      <TouchableArea
+        $platform-web={{ textDecorationLine: 'none' }}
+        href={href}
+        tag={tag}
+        target={target}
+        rel={rel}
+        testID={testID}
+        onPress={
+          onPress
+            ? (e): void => {
+                // Prevent the <a> tag's default navigation when onPress handles it
+                if (href && 'preventDefault' in e) {
+                  e.preventDefault()
+                }
+                onPress()
+              }
+            : undefined
+        }
+      >
+        {content}
+      </TouchableArea>
+    )
+  }
+
+  return content
+}

package/src/components/MultichainTokenDetails/MultichainScrollableList.tsx

@@ -0,0 +1,98 @@
+import { Fragment, useCallback, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Flex, Text, useSporeColors } from '@luxfi/ui/src'
+import { opacify } from '@luxfi/ui/src/theme'
+import type { MultichainTokenEntry } from '@luxexchange/lx/src/components/MultichainTokenDetails/useOrderedMultichainEntries'
+
+const GRADIENT_THRESHOLD = 4
+
+export interface MultichainScrollableListProps {
+  data: MultichainTokenEntry[]
+  renderItem: (entry: MultichainTokenEntry, index: number) => JSX.Element
+  /**
+   * When true, skips the internal ScrollView wrapper because the parent
+   * provides its own scrollable container (e.g. BottomSheetScrollView on native).
+   */
+  renderedInModal?: boolean
+}
+
+/**
+ * Shared scrollable container for multichain list components.
+ * When rendered inside a native bottom-sheet Modal, set renderedInModal=true
+ * so the parent BottomSheetScrollView handles scrolling instead.
+ */
+export function MultichainScrollableList({
+  data,
+  renderItem,
+  renderedInModal,
+}: MultichainScrollableListProps): JSX.Element {
+  const { t } = useTranslation()
+  const colors = useSporeColors()
+  const isEmpty = data.length === 0
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const [showBottomGradient, setShowBottomGradient] = useState(true)
+
+  const updateGradient = useCallback(() => {
+    const el = scrollRef.current
+    if (!el) {
+      return
+    }
+    const isAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= GRADIENT_THRESHOLD
+    setShowBottomGradient(!isAtBottom)
+  }, [])
+
+  useEffect(() => {
+    if (renderedInModal) {
+      return undefined
+    }
+    const el = scrollRef.current
+    if (!el) {
+      return undefined
+    }
+    el.addEventListener('scroll', updateGradient)
+    updateGradient()
+    return () => el.removeEventListener('scroll', updateGradient)
+  }, [renderedInModal, updateGradient])
+
+  const items = (
+    <Flex gap="$spacing2" py="$spacing8" $md={{ gap: '$spacing4' }}>
+      {data.map((entry, index) => (
+        <Fragment key={entry.chainId}>{renderItem(entry, index)}</Fragment>
+      ))}
+      {isEmpty && (
+        <Flex px="$spacing8" py="$spacing12">
+          <Text color="$neutral3" variant="body3">
+            {t('common.noResults')}
+          </Text>
+        </Flex>
+      )}
+    </Flex>
+  )
+
+  if (renderedInModal) {
+    return items
+  }
+
+  return (
+    <Flex position="relative" overflow="hidden" flex={1} $md={{ flex: 0 }}>
+      <Flex ref={scrollRef} overflow="scroll" scrollbarWidth="none" flex={1}>
+        {items}
+      </Flex>
+      {/* Bottom fade gradient (desktop web popover only, hidden when scrolled to bottom) */}
+      {showBottomGradient && (
+        <Flex
+          position="absolute"
+          bottom={0}
+          left={0}
+          right={0}
+          height={64}
+          pointerEvents="none"
+          $md={{ display: 'none' }}
+          style={{
+            background: `linear-gradient(180deg, ${opacify(0, colors.surface1.val)} 0%, ${opacify(60, colors.surface1.val)} 100%)`,
+          }}
+        />
+      )}
+    </Flex>
+  )
+}

package/src/components/MultichainTokenDetails/__snapshots__/MultichainExplorerList.test.tsx.snap

@@ -0,0 +1,150 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MultichainExplorerList > renders without error when no onExplorerPress is provided 1`] = `
+<DocumentFragment>
+  <span
+    class=""
+    style="display: contents;"
+  >
+    <div
+      class="_flexGrow-_md_0 _flexShrink-_md_1 _flexBasis-_md_auto _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _minHeight-0px _minWidth-0px _flexShrink-1 _flexDirection-column _position-relative _overflowX-hidden _overflowY-hidden _flexGrow-1"
+    >
+      <div
+        class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-1 _flexDirection-column _overflowX-scroll _overflowY-scroll _scrollbarWidth-none _flexGrow-1"
+      >
+        <div
+          class="_gap-_md_t-space-spa94665589 _display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _gap-t-space-spa94665587 _pt-t-space-spa94665593 _pb-t-space-spa94665593"
+        >
+          <a
+            class="is_TouchableArea  t_group_true"
+            data-testid="multichain-explorer-link"
+            href="https://etherscan.io/token/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
+            rel="noopener noreferrer"
+            role="button"
+            style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; border-top-left-radius: var(--t-radius-rounded12); border-top-right-radius: var(--t-radius-rounded12); border-bottom-right-radius: var(--t-radius-rounded12); border-bottom-left-radius: var(--t-radius-rounded12); cursor: pointer; outline-color: rgba(0, 0, 0, 0); opacity: 1; text-decoration-line: none; transform: scale(1);"
+            target="_blank"
+          >
+            <div
+              class="_gap-_md_t-space-spa1360334080 _pr-_md_0px _pl-_md_0px _height-_md_t-size-spac100347366 _color-_grouptrue-hover_accent3Hove112785 _display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _borderTopLeftRadius-t-radius-ro291586449 _borderTopRightRadius-t-radius-ro291586449 _borderBottomRightRadius-t-radius-ro291586449 _borderBottomLeftRadius-t-radius-ro291586449 _gap-t-space-spa94665593 _pr-t-space-spa94665593 _pl-t-space-spa94665593 _pt-t-space-spa94665593 _pb-t-space-spa94665593 _width-10037 _color-accent3"
+            >
+              <div
+                class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _overflowX-hidden _overflowY-hidden _zIndex-10"
+                data-testid="network-logo"
+                style="width: 20px; height: 20px; border-radius: 6px; border-width: 0px; border-color: #131313; border-style: solid;"
+              >
+                <div
+                  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+                  style="width: 20px; height: 20px;"
+                >
+                  <div
+                    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+                    style="background-image: url(mock-asset-ETHEREUM_LOGO.png);"
+                  />
+                  <img
+                    alt=""
+                    class="css-accessibilityImage-9pa8cd"
+                    draggable="false"
+                    src="mock-asset-ETHEREUM_LOGO.png"
+                  />
+                </div>
+              </div>
+              <span
+                class="font_body _display-inline _boxSizing-border-box _whiteSpace-nowrap _mt-0px _mr-0px _mb-0px _ml-0px _color-neutral1 _fontFamily-f-family _wordWrap-break-word _flexGrow-1 _flexShrink-1 _flexBasis-auto _maxWidth-10037 _overflowX-hidden _overflowY-hidden _textOverflow-ellipsis _fontSize-f-size-medi3736 _lineHeight-f-lineHeigh507465454 _fontWeight-f-weight-bo3548"
+                data-disable-theme="true"
+              >
+                Ethereum
+              </span>
+              <div
+                class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _gap-t-space-spa94665593"
+              >
+                <span
+                  class="font_button _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-neutral2 _fontFamily-f-family _wordWrap-break-word _fontSize-f-size-smal108 _lineHeight-f-lineHeigh1269072494 _fontWeight-f-weight-me3083741"
+                  data-disable-theme="true"
+                >
+                  Etherscan
+                </span>
+                <div
+                  fill="none"
+                  stroke-width="8"
+                  style="width: 16px; height: 16px; color: rgba(255, 255, 255, 0.65);"
+                  viewbox="0 0 24 24"
+                >
+                  <div
+                    d="M21 4V9C21 9.552 20.553 10 20 10C19.447 10 19 9.552 19 9V6.41406L11.707 13.707C11.512 13.902 11.256 14 11 14C10.744 14 10.488 13.902 10.293 13.707C9.90197 13.316 9.90197 12.684 10.293 12.293L17.5859 5H15C14.447 5 14 4.552 14 4C14 3.448 14.447 3 15 3H20C20.13 3 20.2601 3.0269 20.3821 3.0769C20.6271 3.1779 20.8221 3.37292 20.9231 3.61792C20.9741 3.73992 21 3.87 21 4ZM20 12C19.447 12 19 12.448 19 13V17C19 18.439 18.439 19 17 19H7C5.561 19 5 18.439 5 17V7C5 5.561 5.561 5 7 5H11C11.553 5 12 4.552 12 4C12 3.448 11.553 3 11 3H7C4.458 3 3 4.458 3 7V17C3 19.542 4.458 21 7 21H17C19.542 21 21 19.542 21 17V13C21 12.448 20.553 12 20 12Z"
+                    fill="currentColor"
+                  />
+                </div>
+              </div>
+            </div>
+          </a>
+          <a
+            class="is_TouchableArea  t_group_true"
+            data-testid="multichain-explorer-link"
+            href="https://basescan.org/token/0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
+            rel="noopener noreferrer"
+            role="button"
+            style="display: flex; align-items: stretch; flex-basis: auto; box-sizing: border-box; position: relative; min-height: 0px; min-width: 0px; flex-shrink: 0; flex-direction: column; border-top-left-radius: var(--t-radius-rounded12); border-top-right-radius: var(--t-radius-rounded12); border-bottom-right-radius: var(--t-radius-rounded12); border-bottom-left-radius: var(--t-radius-rounded12); cursor: pointer; outline-color: rgba(0, 0, 0, 0); opacity: 1; text-decoration-line: none; transform: scale(1);"
+            target="_blank"
+          >
+            <div
+              class="_gap-_md_t-space-spa1360334080 _pr-_md_0px _pl-_md_0px _height-_md_t-size-spac100347366 _color-_grouptrue-hover_accent3Hove112785 _display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _borderTopLeftRadius-t-radius-ro291586449 _borderTopRightRadius-t-radius-ro291586449 _borderBottomRightRadius-t-radius-ro291586449 _borderBottomLeftRadius-t-radius-ro291586449 _gap-t-space-spa94665593 _pr-t-space-spa94665593 _pl-t-space-spa94665593 _pt-t-space-spa94665593 _pb-t-space-spa94665593 _width-10037 _color-accent3"
+            >
+              <div
+                class="_display-flex _alignItems-stretch _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-column _overflowX-hidden _overflowY-hidden _zIndex-10"
+                data-testid="network-logo"
+                style="width: 20px; height: 20px; border-radius: 6px; border-width: 0px; border-color: #131313; border-style: solid;"
+              >
+                <div
+                  class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+                  style="width: 20px; height: 20px;"
+                >
+                  <div
+                    class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+                    style="background-image: url(mock-asset-BASE_LOGO.png);"
+                  />
+                  <img
+                    alt=""
+                    class="css-accessibilityImage-9pa8cd"
+                    draggable="false"
+                    src="mock-asset-BASE_LOGO.png"
+                  />
+                </div>
+              </div>
+              <span
+                class="font_body _display-inline _boxSizing-border-box _whiteSpace-nowrap _mt-0px _mr-0px _mb-0px _ml-0px _color-neutral1 _fontFamily-f-family _wordWrap-break-word _flexGrow-1 _flexShrink-1 _flexBasis-auto _maxWidth-10037 _overflowX-hidden _overflowY-hidden _textOverflow-ellipsis _fontSize-f-size-medi3736 _lineHeight-f-lineHeigh507465454 _fontWeight-f-weight-bo3548"
+                data-disable-theme="true"
+              >
+                Base
+              </span>
+              <div
+                class="_display-flex _flexBasis-auto _boxSizing-border-box _position-relative _minHeight-0px _minWidth-0px _flexShrink-0 _flexDirection-row _alignItems-center _gap-t-space-spa94665593"
+              >
+                <span
+                  class="font_button _display-inline _boxSizing-border-box _whiteSpace-pre-wrap _mt-0px _mr-0px _mb-0px _ml-0px _color-neutral2 _fontFamily-f-family _wordWrap-break-word _fontSize-f-size-smal108 _lineHeight-f-lineHeigh1269072494 _fontWeight-f-weight-me3083741"
+                  data-disable-theme="true"
+                >
+                  BaseScan
+                </span>
+                <div
+                  fill="none"
+                  stroke-width="8"
+                  style="width: 16px; height: 16px; color: rgba(255, 255, 255, 0.65);"
+                  viewbox="0 0 24 24"
+                >
+                  <div
+                    d="M21 4V9C21 9.552 20.553 10 20 10C19.447 10 19 9.552 19 9V6.41406L11.707 13.707C11.512 13.902 11.256 14 11 14C10.744 14 10.488 13.902 10.293 13.707C9.90197 13.316 9.90197 12.684 10.293 12.293L17.5859 5H15C14.447 5 14 4.552 14 4C14 3.448 14.447 3 15 3H20C20.13 3 20.2601 3.0269 20.3821 3.0769C20.6271 3.1779 20.8221 3.37292 20.9231 3.61792C20.9741 3.73992 21 3.87 21 4ZM20 12C19.447 12 19 12.448 19 13V17C19 18.439 18.439 19 17 19H7C5.561 19 5 18.439 5 17V7C5 5.561 5.561 5 7 5H11C11.553 5 12 4.552 12 4C12 3.448 11.553 3 11 3H7C4.458 3 3 4.458 3 7V17C3 19.542 4.458 21 7 21H17C19.542 21 21 19.542 21 17V13C21 12.448 20.553 12 20 12Z"
+                    fill="currentColor"
+                  />
+                </div>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div
+      style="display: contents;"
+    />
+  </span>
+</DocumentFragment>
+`;