import { formatEther } from 'viem' import { useAccount, useEnsName, useNetwork } from 'wagmi' import type { SendTransactionArgs, WriteContractPreparedArgs } from 'wagmi/actions' import styles from './Data.module.css' import { useStore } from '@nanostores/react' import { $selectedToken } from '@features/Web3/stores' export function Data({ to, ensResolved, txConfig, isDisabled }: { to: `0x${string}` | null | undefined ensResolved: string | null | undefined txConfig: SendTransactionArgs | WriteContractPreparedArgs | undefined isDisabled: boolean }) { const { chain } = useNetwork() const { address: from } = useAccount() const { data: ensFrom } = useEnsName({ address: from, chainId: 1 }) const selectedToken = useStore($selectedToken) // Derive display values in preview from actual tx config // instead from our form stores const value = (txConfig as SendTransactionArgs)?.value || (txConfig as WriteContractPreparedArgs)?.request?.args?.[1] || '0' const displayAmountFromConfig = formatEther(value as bigint) return (
You are | {ensFrom ? (
{ensFrom}
{`→ ${from}`}
|
) : (
{from}
|
)}
sending | {displayAmountFromConfig} {selectedToken?.symbol} | |
on | {chain?.name} | |
to |
{ensResolved}
{`→ ${to}`}
|