mirror of https://github.com/kremalicious/blog.git
73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
import { useAccount, useEnsName } from 'wagmi'
|
|
import styles from './Data.module.css'
|
|
import { useStore } from '@nanostores/react'
|
|
import { $amount, $selectedToken } from '@features/Web3/stores'
|
|
import { truncateAddress } from '@features/Web3/lib/truncateAddress'
|
|
|
|
export function Data({
|
|
to,
|
|
ensResolved,
|
|
isDisabled
|
|
}: {
|
|
to: `0x${string}` | null | undefined
|
|
ensResolved: string | null | undefined
|
|
isDisabled: boolean
|
|
}) {
|
|
const { address: from, chain } = useAccount()
|
|
const { data: ensFrom } = useEnsName({ address: from, chainId: 1 })
|
|
const selectedToken = useStore($selectedToken)
|
|
const amount = useStore($amount)
|
|
|
|
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}>
|
|
{amount} {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>
|
|
)
|
|
}
|