2023-11-02 22:47:14 +01:00
|
|
|
import { formatEther } from 'viem'
|
2023-11-03 00:33:06 +01:00
|
|
|
import { useAccount, useEnsName, useNetwork } from 'wagmi'
|
2023-11-02 22:47:14 +01:00
|
|
|
import type {
|
|
|
|
SendTransactionArgs,
|
|
|
|
WriteContractPreparedArgs
|
|
|
|
} from 'wagmi/actions'
|
2023-11-03 21:56:08 +01:00
|
|
|
import styles from './Data.module.css'
|
2023-11-02 22:47:14 +01:00
|
|
|
import { useStore } from '@nanostores/react'
|
|
|
|
import { $selectedToken } from '@features/Web3/stores'
|
|
|
|
|
2023-11-03 21:56:08 +01:00
|
|
|
export function Data({
|
2023-11-02 22:47:14 +01:00
|
|
|
to,
|
|
|
|
ensResolved,
|
|
|
|
txConfig,
|
|
|
|
isDisabled
|
|
|
|
}: {
|
|
|
|
to: `0x${string}` | null | undefined
|
|
|
|
ensResolved: string | null | undefined
|
|
|
|
txConfig: SendTransactionArgs | WriteContractPreparedArgs | undefined
|
|
|
|
isDisabled: boolean
|
|
|
|
}) {
|
|
|
|
const { chain } = useNetwork()
|
2023-11-03 00:33:06 +01:00
|
|
|
const { address: from } = useAccount()
|
|
|
|
const { data: ensFrom } = useEnsName({ address: from, chainId: 1 })
|
2023-11-02 22:47:14 +01:00
|
|
|
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 (
|
|
|
|
<table className={styles.table} aria-disabled={isDisabled}>
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
2023-11-03 00:33:06 +01:00
|
|
|
<td className={styles.label}>You are</td>
|
|
|
|
{ensFrom ? (
|
|
|
|
<td title={`${ensFrom} successfully resolved to ${from}`}>
|
|
|
|
<code className={styles.from}>{ensFrom}</code>
|
|
|
|
<code className={styles.from}>{`→ ${from}`}</code>
|
|
|
|
</td>
|
|
|
|
) : (
|
|
|
|
<td>
|
|
|
|
<code className={styles.from}>{from}</code>
|
|
|
|
</td>
|
|
|
|
)}
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
<td className={styles.label}>sending</td>
|
2023-11-02 22:47:14 +01:00
|
|
|
<td>
|
|
|
|
<span className={styles.amount}>
|
|
|
|
{displayAmountFromConfig} {selectedToken?.symbol}
|
|
|
|
</span>
|
|
|
|
</td>
|
|
|
|
</tr>
|
2023-11-03 00:33:06 +01:00
|
|
|
|
2023-11-02 22:47:14 +01:00
|
|
|
<tr>
|
|
|
|
<td className={styles.label}>on</td>
|
|
|
|
<td>
|
|
|
|
<span className={styles.network}>{chain?.name}</span>
|
|
|
|
</td>
|
|
|
|
</tr>
|
2023-11-03 00:33:06 +01:00
|
|
|
|
2023-11-02 22:47:14 +01:00
|
|
|
<tr>
|
|
|
|
<td className={styles.label}>to</td>
|
|
|
|
<td title={`${ensResolved} successfully resolved to ${to}`}>
|
|
|
|
<code className={styles.to}>{ensResolved}</code>
|
|
|
|
<code className={styles.to}>{`→ ${to}`}</code>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
)
|
|
|
|
}
|