-
Notifications
You must be signed in to change notification settings - Fork 51
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
tx table and expandable transfer descriptions looking great and user …
…history container has been integrated into the jar stats page nicely
- Loading branch information
Showing
9 changed files
with
309 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import { TFunction } from "next-i18next"; | ||
import { FC } from "react"; | ||
import { UserTx } from "v2/types"; | ||
import { classNames } from "v2/utils"; | ||
import TxHistoryTable from "./TxHistoryTable"; | ||
|
||
const TxHistoryContainer: FC<{ | ||
txHistory: UserTx[]; | ||
addrs: { [key: string]: string }; | ||
t: TFunction; | ||
className?: string; | ||
}> = ({ txHistory, addrs, t, className }) => ( | ||
<div className={classNames("pr-5", className)}> | ||
<h2 className="font-body font-bold text-xl text-foreground-alt-200 mt-3 mb-5"> | ||
{"User History"} | ||
</h2> | ||
<TxHistoryTable txHistory={txHistory} addrs={addrs} /> | ||
</div> | ||
); | ||
|
||
export default TxHistoryContainer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
import { FC } from "react"; | ||
import { UserTx } from "v2/types"; | ||
import { classNames } from "v2/utils"; | ||
import TxTableBody from "./TxTableBody"; | ||
|
||
const TxHistoryTable: FC<{ | ||
txHistory: UserTx[]; | ||
addrs: { [key: string]: string }; | ||
className?: string; | ||
}> = ({ txHistory, addrs, className }) => { | ||
return ( | ||
<div className={classNames("flex flex-col", className)}> | ||
<div className="-my-2 overflow-x-auto"> | ||
<div className="py-2 align-middle inline-block min-w-full"> | ||
<table className="min-w-1/2 table-auto border-collapse"> | ||
<thead className="bg-background uppercase"> | ||
<tr> | ||
<TxTableHeaderCell label="Date/Time" /> | ||
<TxTableHeaderCell label="Block Num." /> | ||
<TxTableHeaderCell label="TX Type" /> | ||
<TxTableHeaderCell label="TX Hash" /> | ||
{/* Chevron down/up column */} | ||
</tr> | ||
</thead> | ||
<tbody className="text-foreground"> | ||
<TxTableBody txs={txHistory} addrs={addrs} /> | ||
</tbody> | ||
</table> | ||
{/* <div className="flex justify-center mt-4"> | ||
<Pagination /> | ||
</div> */} | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
const TxTableHeaderCell: FC<{ label: string }> = ({ label }) => ( | ||
<th | ||
scope="col" | ||
className="px-4 py-1 h-8 text-left text-xs font-bold text-foreground-alt-200 tracking-normal sm:px-6" | ||
> | ||
{label} | ||
</th> | ||
); | ||
|
||
export default TxHistoryTable; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
import { Disclosure, Transition } from "@headlessui/react"; | ||
import { FC, Fragment } from "react"; | ||
import { UserTx } from "v2/types"; | ||
import { classNames } from "v2/utils"; | ||
import TxTableRowBody from "./TxTableRowBody"; | ||
import TxTableRowHeader from "./TxTableRowHeader"; | ||
import TxTableSpacerRow from "./TxTableSpacerRow"; | ||
|
||
const TxTableBody: FC<{ txs: UserTx[]; addrs: { [key: string]: string } }> = ({ txs, addrs }) => ( | ||
<>{txs && txs.map((tx) => <TxTableRow key={tx.hash} tx={tx} addrs={addrs} />)}</> | ||
); | ||
|
||
const TxTableRow: FC<{ tx: UserTx; addrs: { [key: string]: string } }> = ({ tx, addrs }) => ( | ||
<> | ||
<Disclosure as={Fragment}> | ||
{({ open }) => ( | ||
<> | ||
<Disclosure.Button | ||
as="tr" | ||
// No hover state when the row is expaned. | ||
className={classNames(!open && "group", "cursor-pointer")} | ||
> | ||
<TxTableRowHeader tx={tx} open={open} /> | ||
</Disclosure.Button> | ||
|
||
<Transition | ||
as={Fragment} | ||
enter="transition duration-100 ease-out" | ||
enterFrom="opacity-0" | ||
enterTo="opacity-100" | ||
leave="transition duration-100 ease-out" | ||
leaveFrom="opacity-100" | ||
leaveTo="opacity-0" | ||
> | ||
<Disclosure.Panel as="tr"> | ||
<TxTableRowBody transfers={tx.transfers} addrs={addrs} /> | ||
</Disclosure.Panel> | ||
</Transition> | ||
</> | ||
)} | ||
</Disclosure> | ||
<TxTableSpacerRow /> | ||
</> | ||
); | ||
|
||
export default TxTableBody; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
import { FC } from "react"; | ||
import { UserTransfer } from "v2/types"; | ||
import { formatNumber } from "v2/utils"; | ||
|
||
const TxTableRowBody: FC<{ transfers: UserTransfer[]; addrs: { [key: string]: string } }> = ({ | ||
transfers, | ||
addrs, | ||
}) => ( | ||
<td | ||
colSpan={6} | ||
className="bg-background-light rounded-b-xl p-6 border-t border-foreground-alt-500" | ||
> | ||
<div className="flex justify-evenly"> | ||
<div className="py-2 flex-shrink-0 mr-6"> | ||
{transfers.map((t) => ( | ||
<p className="text-foreground-alt-200" key={t.log_index}> | ||
{transferToString(t, addrs)} | ||
</p> | ||
))} | ||
</div> | ||
</div> | ||
</td> | ||
); | ||
|
||
const transferToString = (transfer: UserTransfer, addrs: { [key: string]: string }) => { | ||
const fromAddr = | ||
addrs[transfer.fromAddress] || | ||
transfer.fromAddress.slice(0, 5) + "..." + transfer.fromAddress.slice(-3); | ||
const toAddr = | ||
addrs[transfer.toAddress] || | ||
transfer.toAddress.slice(0, 5) + "..." + transfer.toAddress.slice(-3); | ||
|
||
const burned = toAddr === "Null"; | ||
const minted = fromAddr === "Null"; | ||
const nTokens = | ||
transfer.price && transfer.value | ||
? formatNumber(+transfer.price / transfer.value, 8) | ||
: "an unknown number of"; | ||
const value = transfer.value ? "(" + formatNumber(transfer.value, 2) + " USD)" : ""; | ||
return burned | ||
? `${fromAddr} burned ${nTokens} tokens ${value}` | ||
: minted | ||
? `${nTokens} ${value} were minted and sent to ${toAddr}` | ||
: `${fromAddr} sent ${nTokens} tokens ${value} to ${toAddr}`; | ||
}; | ||
|
||
export default TxTableRowBody; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
import { ChevronDownIcon } from "@heroicons/react/solid"; | ||
import { FC, HTMLAttributes } from "react"; | ||
import { UserTx } from "v2/types"; | ||
import { classNames, formatDate } from "v2/utils"; | ||
|
||
const TxTableRowHeader: FC<{ tx: UserTx; open: boolean }> = ({ tx, open }) => { | ||
return ( | ||
<> | ||
<RowCell className={classNames(!open && "rounded-bl-xl", "rounded-tl-xl flex items-center")}> | ||
<p className="font-title font-medium text-base leading-5 text-foreground-alt-200"> | ||
{formatDate(new Date(tx.timestamp * 1000))} | ||
</p> | ||
</RowCell> | ||
<RowCell> | ||
<p className="font-title font-medium text-base leading-5 text-foreground-alt-200"> | ||
{tx.blocknumber} | ||
</p> | ||
</RowCell> | ||
<RowCell> | ||
<div className="flex items-center"> | ||
<div className="ml-2"> | ||
<p className="font-title font-medium text-base leading-5 text-foreground-alt-200"> | ||
{tx.transaction_type} | ||
</p> | ||
</div> | ||
</div> | ||
</RowCell> | ||
<RowCell> | ||
<p | ||
className={classNames( | ||
"font-title font-medium text-base leading-5 text-foreground-alt-200", | ||
)} | ||
> | ||
{tx.hash.slice(0, 5) + "..." + tx.hash.slice(-3)} | ||
</p> | ||
</RowCell> | ||
<RowCell className={classNames(!open && "rounded-br-xl", "rounded-tr-xl w-10")}> | ||
<div className="flex justify-end pr-3"> | ||
<ChevronDownIcon | ||
className={classNames( | ||
open && "rotate-180", | ||
"text-foreground ml-2 h-5 w-5 transition duration-300 ease-in-out", | ||
)} | ||
aria-hidden="true" | ||
/> | ||
</div> | ||
</RowCell> | ||
</> | ||
); | ||
}; | ||
|
||
const RowCell: FC<HTMLAttributes<HTMLElement>> = ({ children, className }) => ( | ||
<td | ||
className={classNames( | ||
"bg-background-light p-4 whitespace-nowrap text-sm text-foreground sm:p-6 group-hover:bg-background-lightest transition duration-300 ease-in-out", | ||
className, | ||
)} | ||
> | ||
{children} | ||
</td> | ||
); | ||
|
||
export default TxTableRowHeader; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { FC } from "react"; | ||
|
||
const TxTableSpacerRow: FC = () => { | ||
return ( | ||
<tr> | ||
<td colSpan={5} className="bg-background p-1"></td> | ||
</tr> | ||
); | ||
}; | ||
|
||
export default TxTableSpacerRow; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters