-
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.
user tx history and transfer history dev is complete for now, this co…
…mmit is ready for testing
- Loading branch information
Showing
6 changed files
with
218 additions
and
67 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
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 |
|---|---|---|
| @@ -1,46 +1,66 @@ | ||
| import { Disclosure, Transition } from "@headlessui/react"; | ||
| import { PickleModelJson } from "picklefinance-core"; | ||
| import { RawChain } from "picklefinance-core/lib/chain/Chains"; | ||
| 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 TxTableBody: FC<{ | ||
| txs: UserTx[]; | ||
| core: PickleModelJson.PickleModelJson; | ||
| addrs: { [key: string]: string }; | ||
| }> = ({ txs, core, addrs }) => ( | ||
| <>{txs && txs.map((tx) => <TxTableRow key={tx.hash} core={core} 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> | ||
| const TxTableRow: FC<{ | ||
| tx: UserTx; | ||
| core: PickleModelJson.PickleModelJson; | ||
| addrs: { [key: string]: string }; | ||
| }> = ({ tx, core, addrs }) => { | ||
| const chain: RawChain | undefined = core.chains.filter((c) => c.chainId === tx.chain_id)[0]; | ||
| return ( | ||
| <> | ||
| <Disclosure as={Fragment}> | ||
| {({ open }) => ( | ||
| <> | ||
| <Disclosure.Button | ||
| as="tr" | ||
| // No hover state when the row is expaned. | ||
| className={classNames(!open && "group", "cursor-pointer")} | ||
| > | ||
| {core && <TxTableRowHeader tx={tx} core={core} 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 /> | ||
| </> | ||
| ); | ||
| <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"> | ||
| {core && chain && ( | ||
| <TxTableRowBody | ||
| transfers={tx.transfers} | ||
| core={core} | ||
| chain={chain} | ||
| 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 |
|---|---|---|
| @@ -1,47 +1,170 @@ | ||
| import { PickleModelJson } from "picklefinance-core"; | ||
| import { RawChain } from "picklefinance-core/lib/chain/Chains"; | ||
| import { FC } from "react"; | ||
| import { UserTransfer } from "v2/types"; | ||
| import { formatNumber } from "v2/utils"; | ||
| import { classNames, formatNumber } from "v2/utils"; | ||
| import Link from "v2/components/Link"; | ||
|
|
||
| const TxTableRowBody: FC<{ transfers: UserTransfer[]; addrs: { [key: string]: string } }> = ({ | ||
| transfers, | ||
| addrs, | ||
| }) => ( | ||
| const TxTableRowBody: FC<{ | ||
| transfers: UserTransfer[]; | ||
| core: PickleModelJson.PickleModelJson; | ||
| chain: RawChain; | ||
| addrs: { [key: string]: string }; | ||
| }> = ({ transfers, core, chain, addrs }) => ( | ||
| <td | ||
| colSpan={6} | ||
| className="bg-background-light rounded-b-xl p-6 border-t border-foreground-alt-500" | ||
| className="bg-background-light rounded-b-xl p-2 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> | ||
| <TransferDescription | ||
| key={t.log_index} | ||
| transfer={t} | ||
| core={core} | ||
| chain={chain} | ||
| tmpAddrs={addrs} | ||
| /> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| </td> | ||
| ); | ||
|
|
||
| const transferToString = (transfer: UserTransfer, addrs: { [key: string]: string }) => { | ||
| const TransferDescription: FC<{ | ||
| transfer: UserTransfer; | ||
| core: PickleModelJson.PickleModelJson; | ||
| chain: RawChain; | ||
| tmpAddrs: { [addr: string]: string }; | ||
| }> = ({ transfer, core, chain, tmpAddrs }) => { | ||
| const { fromAddr, toAddr, burned, minted, nTokens, value, tokenName } = transferData( | ||
| transfer, | ||
| core, | ||
| tmpAddrs, | ||
| ); | ||
| const useFromLink = fromAddr.includes("...") && chain !== undefined; | ||
| const useToLink = toAddr.includes("...") && chain !== undefined; | ||
|
|
||
| return ( | ||
| <> | ||
| {burned && ( | ||
| <p className="text-xs text-foreground-alt-200">{`${nTokens}${ | ||
| " " + tokenName | ||
| } tokens ${value} were burned.`}</p> | ||
| )} | ||
| {minted && ( | ||
| <> | ||
| {useToLink ? ( | ||
| <span className="whitespace-nowrap flex"> | ||
| <p className="text-xs text-foreground-alt-200"> | ||
| {`${nTokens}${" " + tokenName} tokens ${value} were minted and sent to`} | ||
| </p> | ||
| <AddrLink chain={chain} addr={toAddr} className="pl-1" /> | ||
| </span> | ||
| ) : ( | ||
| <p className="text-xs text-foreground-alt-200"> | ||
| {`${nTokens}${" " + tokenName} tokens ${value} were minted and sent to ${toAddr}`} | ||
| </p> | ||
| )} | ||
| </> | ||
| )} | ||
| {!minted && !burned && ( | ||
| <> | ||
| {useFromLink && useToLink && ( | ||
| <div className="flex inline whitespace-nowrap"> | ||
| <AddrLink chain={chain} addr={fromAddr} className="pr-1" /> | ||
| <p className="text-xs pl-1 text-foreground-alt-200"> | ||
| {`sent ${nTokens}${" " + tokenName} tokens ${value} to `} | ||
| </p> | ||
| <AddrLink chain={chain} addr={toAddr} className="pl-1" /> | ||
| </div> | ||
| )} | ||
| {useFromLink && !useToLink && ( | ||
| <div className="flex inline whitespace-nowrap"> | ||
| <AddrLink chain={chain} addr={fromAddr} className="pr-1" /> | ||
| <p className="text-xs pl-1 text-foreground-alt-200"> | ||
| {`sent ${nTokens}${" " + tokenName} tokens ${value} to ${toAddr}`} | ||
| </p> | ||
| </div> | ||
| )} | ||
| {!useFromLink && useToLink && ( | ||
| <div className="flex inline whitespace-nowrap"> | ||
| <p className="text-xs text-foreground-alt-200"> | ||
| {`${fromAddr} sent ${nTokens}${" " + tokenName} tokens ${value} to`} | ||
| </p> | ||
| <AddrLink chain={chain} addr={toAddr} className="pl-1" /> | ||
| </div> | ||
| )} | ||
| {!useFromLink && !useToLink && ( | ||
| <p className="text-xs text-foreground-alt-200"> | ||
| {`${fromAddr} sent ${nTokens}${" " + tokenName} tokens ${value} to ${toAddr}`} | ||
| </p> | ||
| )} | ||
| </> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const AddrLink: FC<{ chain: RawChain; addr: string; className?: string }> = ({ | ||
| chain, | ||
| addr, | ||
| className, | ||
| }) => ( | ||
| <Link href={`${chain.explorer}/${addr}`} primary className={className}> | ||
| {addr} | ||
| </Link> | ||
| ); | ||
|
|
||
| const transferData = ( | ||
| transfer: UserTransfer, | ||
| core: PickleModelJson.PickleModelJson, | ||
| addrs: { [addr: string]: string }, | ||
| ) => { | ||
| const tmp = core && coreToAddrMap(core); | ||
| addrs = tmp && { ...tmp, ...addrs }; | ||
| const fromAddr = | ||
| addrs[transfer.fromAddress] || | ||
| addrs[transfer.fromAddress.toLowerCase()] || | ||
| transfer.fromAddress.slice(0, 5) + "..." + transfer.fromAddress.slice(-3); | ||
| const toAddr = | ||
| addrs[transfer.toAddress] || | ||
| addrs[transfer.toAddress.toLowerCase()] || | ||
| 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}`; | ||
| const tokenName = addrs[transfer.tokenAddress.toLowerCase()] || ""; | ||
| return { | ||
| addrs: addrs, | ||
| fromAddr: fromAddr, | ||
| toAddr: toAddr, | ||
| burned: burned, | ||
| minted: minted, | ||
| nTokens: nTokens, | ||
| value: value, | ||
| tokenName: tokenName, | ||
| }; | ||
| }; | ||
|
|
||
| const coreToAddrMap = (core: PickleModelJson.PickleModelJson) => { | ||
| let addrs: { [addr: string]: string } = {}; | ||
| core.assets.jars.forEach((a) => { | ||
| const depositTokenAddr = a.depositToken.addr.toLowerCase(); | ||
| const depositTokenName = a.depositToken.name; | ||
| const pTokenAddr = a.contract.toLowerCase(); | ||
| const pTokenName = "p" + depositTokenName; | ||
| addrs[depositTokenAddr] = depositTokenName; | ||
| addrs[pTokenAddr] = pTokenName; | ||
| }); | ||
| core.tokens.forEach((t) => { | ||
| const tokenAddr = t.contractAddr.toLowerCase(); | ||
| const tokenName = t.name ? t.name : t.id; | ||
| addrs[tokenAddr] = tokenName; | ||
| }); | ||
| return addrs; | ||
| }; | ||
|
|
||
| export default TxTableRowBody; |
Oops, something went wrong.