mirror of https://github.com/kremalicious/blog.git
93 lines
2.7 KiB
TypeScript
93 lines
2.7 KiB
TypeScript
import { formatEther, formatUnits } 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'
|
|
import { truncateAddress } from '@features/Web3/lib/truncateAddress'
|
|
|
|
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 =
|
|
selectedToken?.decimals === 18
|
|
? formatEther(value as bigint)
|
|
: selectedToken?.decimals
|
|
? formatUnits(value as bigint, selectedToken.decimals)
|
|
: '0'
|
|
|
|
return (
|
|
<table className={styles.table} aria-disabled={isDisabled}>
|
|
<tbody>
|
|
<tr>
|
|
<td className={styles.label}>You are</td>
|
|
<td>
|
|
{ensFrom ? (
|
|
<abbr title={`${ensFrom} successfully resolved to ${from}`}>
|
|
<span className={styles.from}>{ensFrom}</span>
|
|
</abbr>
|
|
) : (
|
|
<code className={styles.from}>
|
|
{from ? truncateAddress(from) : ''}
|
|
</code>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td className={styles.label}>sending</td>
|
|
<td className={styles.amount}>
|
|
<div className="TokenLogo">
|
|
<img
|
|
src={selectedToken?.logo || ''}
|
|
alt={selectedToken?.name || ''}
|
|
/>
|
|
</div>
|
|
<span className={styles.amount}>
|
|
{displayAmountFromConfig} {selectedToken?.symbol}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td className={styles.label}>on</td>
|
|
<td>
|
|
<span className={styles.network}>{chain?.name}</span>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td className={styles.label}>to</td>
|
|
<td>
|
|
<abbr title={`${ensResolved} successfully resolved to ${to}`}>
|
|
<span className={styles.to}>{ensResolved}</span>
|
|
</abbr>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
)
|
|
}
|