a
/
otterscan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Revamp token transfer list table

This commit is contained in:
Willian Mitsuda 2022-04-06 00:27:35 -03:00
parent fe20885b07
commit c804b19284
1 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/TokenTransferItem.tsx
View File

@ -1,6 +1,7 @@
import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
import { faSackDollar } from "@fortawesome/free-solid-svg-icons/faSackDollar";
import TransactionAddress from "./components/TransactionAddress";
import ValueHighlighter from "./components/ValueHighlighter";
import FormattedBalance from "./components/FormattedBalance";
@ -26,12 +27,8 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
}) => {
return (
<div className="flex items-baseline space-x-2 px-2 py-1 truncate hover:bg-gray-100">
<span className="text-gray-500">
<FontAwesomeIcon icon={faCaretRight} size="1x" />
</span>
<div className="grid grid-cols-7 gap-x-1 w-full">
<div className="col-span-2 flex space-x-1">
<span className="font-bold">From</span>
<div className="grid grid-cols-4 gap-x-1 w-full items-baseline">
<div className="flex items-baseline space-x-1">
<TransactionAddress
address={t.from}
addressCtx={AddressContext.FROM}
@ -39,8 +36,10 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
showCodeIndicator
/>
</div>
<div className="col-span-2 flex space-x-1">
<span className="font-bold">To</span>
<div className="flex items-baseline space-x-1">
<span className="text-gray-500">
<FontAwesomeIcon icon={faCaretRight} size="1x" />
</span>
<TransactionAddress
address={t.to}
addressCtx={AddressContext.TO}
@ -48,8 +47,10 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
showCodeIndicator
/>
</div>
<div className="col-span-3 flex space-x-1">
<span className="font-bold">For</span>
<div className="col-span-2 flex items-baseline space-x-1">
<span className="text-gray-500">
<FontAwesomeIcon icon={faSackDollar} size="1x" />
</span>
<span>
<ValueHighlighter value={t.value}>
<FormattedBalance