Skip to content

Commit

Permalink
feat: add in/out to tx list (#218)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jagnani73
jagnani73 authored Oct 17, 2024
1 parent 21c30c0 commit d42e0fe
Show file tree
Hide file tree
Showing 9 changed files with 95 additions and 183 deletions.
2 changes: 1 addition & 1 deletion src/components/Molecules/Address/AddressTransactions/AddressTransactions.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default meta;
export const AddressTransactions: Story = {
args: {
chain_name: "eth-mainnet",
address: "0x972B8FAD70de6e430D8b368198AbFF1E42eFf022",
address: "0x49b5eae7e881c22001c0daf6f211db1473310b7b",
actionable_address: (address) => storyAction(address),
actionable_block: (block_height) => storyAction(block_height),
actionable_transaction: (tx_hash) => storyAction(tx_hash),
Expand Down
5 changes: 5 additions & 0 deletions src/components/Molecules/Address/AddressTransactions/AddressTransactions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import { useEffect, useState } from "react";
export const AddressTransactions: React.FC<AddressTransactionsProps> = ({
chain_name,
address,
actionable_address,
actionable_block,
actionable_transaction,
}) => {
const { goldrushClient } = useGoldRush();
Expand Down Expand Up @@ -52,8 +54,11 @@ export const AddressTransactions: React.FC<AddressTransactionsProps> = ({

return (
<Transactions
address={address}
errorMessage={errorMessage}
maybeResult={maybeResult}
actionable_address={actionable_address}
actionable_block={actionable_block}
actionable_transaction={actionable_transaction}
/>
);
Expand Down
4 changes: 4 additions & 0 deletions src/components/Molecules/Block/BlockTransactions/BlockTransactions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import { useEffect, useState } from "react";
export const BlockTransactions: React.FC<BlockTransactionsProps> = ({
chain_name,
block_height,
actionable_address,
actionable_block,
actionable_transaction,
}) => {
const { goldrushClient } = useGoldRush();
Expand Down Expand Up @@ -54,6 +56,8 @@ export const BlockTransactions: React.FC<BlockTransactionsProps> = ({
<Transactions
errorMessage={errorMessage}
maybeResult={maybeResult}
actionable_address={actionable_address}
actionable_block={actionable_block}
actionable_transaction={actionable_transaction}
/>
);
Expand Down
4 changes: 2 additions & 2 deletions src/components/Molecules/Transaction/TransactionsList/TransactionsList.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ export default meta;
export const TransactionsList: Story = {
args: {
chain_name: "eth-mainnet",
actionable_block: (block) => storyAction(block),
actionable_transaction: (address) => storyAction(address),
actionable_address: (address) => storyAction(address),
actionable_block: (block_height) => storyAction(block_height),
actionable_transaction: (tx_hash) => storyAction(tx_hash),
},
};
171 changes: 15 additions & 156 deletions src/components/Molecules/Transaction/TransactionsList/TransactionsList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,22 @@
import { Address, Timestamp } from "@/components/Atoms";
import { TableHeaderSorting, TableList } from "@/components/Shared";
import { Transactions } from "@/components/Shared";
import {
DEFAULT_ERROR_MESSAGE,
FALLBACK_ERROR,
} from "@/utils/constants/shared.constants";
import { actionableWrapper } from "@/utils/functions";
import { None, Some, type Option } from "@/utils/option";
import { useGoldRush } from "@/utils/store";
import { type TransactionsListProps } from "@/utils/types/molecules.types";
import {
calculatePrettyBalance,
type Transaction,
type GoldRushResponse,
timestampParser,
} from "@covalenthq/client-sdk";
import { type ColumnDef } from "@tanstack/react-table";
import { useEffect, useState } from "react";

export const TransactionsList: React.FC<TransactionsListProps> = ({
chain_name,
actionable_block = () => null,
actionable_transaction,
actionable_address,
actionable_block,
actionable_transaction,
}) => {
const { goldrushClient } = useGoldRush();
const [errorMessage, setErrorMessage] = useState<string | null>(null);
Expand All @@ -33,41 +28,24 @@ export const TransactionsList: React.FC<TransactionsListProps> = ({
try {
setMaybeResult(None);
setErrorMessage(null);
const { data: blockData, ...blockError } =
await goldrushClient.BaseService.getBlockHeightsByPage(
chain_name,
timestampParser(new Date(), "YYYY MM DD"),
"2100-01-01",
{
pageSize: 1,
},
);
if (blockError.error) {
setErrorMessage(blockError.error_message);
throw blockError;
}
if (!blockData?.items?.[0]) {
throw FALLBACK_ERROR;
}
const latestBlock = blockData.items[0];
const { data: txData, ...txError } =
const { data, ...error } =
await goldrushClient.TransactionService.getTransactionsForBlock(
chain_name,
Number(latestBlock.height) - 2,
"latest",
{
noLogs: true,
quoteCurrency: "USD",
withSafe: false,
},
);
if (txError.error) {
setErrorMessage(txError.error_message);
throw txError;
if (error.error) {
setErrorMessage(error.error_message);
throw error;
}
if (!txData?.items) {
if (!data?.items) {
throw FALLBACK_ERROR;
}
setMaybeResult(new Some(txData.items));
setMaybeResult(new Some(data.items));
} catch (error: GoldRushResponse<null> | any) {
setErrorMessage(error?.error_message ?? DEFAULT_ERROR_MESSAGE);
setMaybeResult(new Some(null));
Expand All @@ -76,132 +54,13 @@ export const TransactionsList: React.FC<TransactionsListProps> = ({
})();
}, [chain_name]);

const columns: ColumnDef<Transaction>[] = [
{
accessorKey: "tx_hash",
id: "tx_hash",
header: "Transaction Hash",
cell: ({ row }) => (
<Address
address={row.original.tx_hash}
actionable_address={actionable_transaction}
/>
),
},
{
accessorKey: "block_signed_at",
id: "block_signed_at",
header: ({ column }) => (
<TableHeaderSorting<Transaction>
align="left"
header="Signed At"
column={column}
/>
),
cell: ({ row }) => (
<Timestamp
timestamp={row.original.block_signed_at}
defaultType="relative"
/>
),
},
{
accessorKey: "block_height",
id: "block_height",
header: ({ column }) => (
<TableHeaderSorting<Transaction>
align="left"
header="Block Height"
column={column}
/>
),
cell: ({ row }) =>
actionableWrapper(
actionable_block(row.original.block_height),
row.original.block_height?.toLocaleString(),
),
},
{
accessorKey: "from",
id: "from",
header: "From",
cell: ({ row }) => (
<Address
address={row.original.from_address}
avatar={{}}
actionable_address={actionable_address}
/>
),
},
{
accessorKey: "to",
id: "to",
header: "To",
cell: ({ row }) => (
<Address
address={row.original.to_address}
avatar={{}}
actionable_address={actionable_address}
/>
),
},
{
accessorKey: "value",
id: "value",
header: ({ column }) => (
<TableHeaderSorting<Transaction>
align="left"
header="Value"
column={column}
/>
),
cell: ({ row }) => (
<div>
{calculatePrettyBalance(
row.original.value ?? 0,
row.original.gas_metadata?.contract_decimals,
true,
4,
)}{" "}
{row.original.gas_metadata?.contract_ticker_symbol}
<p className="text-xs opacity-80">
{row.original.pretty_value_quote}
</p>
</div>
),
},
{
accessorKey: "tx_fee",
id: "tx_fee",
header: ({ column }) => (
<TableHeaderSorting<Transaction>
align="left"
header="Fee"
column={column}
/>
),
cell: ({ row }) => (
<div>
{calculatePrettyBalance(
BigInt(row.original.fees_paid || 0)!,
row.original.gas_metadata?.contract_decimals,
true,
4,
)}{" "}
{row.original.gas_metadata?.contract_ticker_symbol}
<p className="text-xs opacity-80">
{row.original.pretty_gas_quote}
</p>
</div>
),
},
];

return (
<TableList<Transaction>
columns={columns}
<Transactions
errorMessage={errorMessage}
maybeData={maybeResult}
maybeResult={maybeResult}
actionable_address={actionable_address}
actionable_block={actionable_block}
actionable_transaction={actionable_transaction}
/>
);
};
65 changes: 52 additions & 13 deletions src/components/Shared/Transactions.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { TableHeaderSorting, TableList } from ".";
import { IconWrapper, TableHeaderSorting, TableList } from ".";
import { Badge } from "../ui/badge";
import { Address } from "@/components/Atoms";
import { Timestamp } from "@/components/Atoms";
import { actionableWrapper } from "@/utils/functions";
Expand All @@ -11,6 +12,7 @@ import {
import { type ColumnDef } from "@tanstack/react-table";

export const Transactions: React.FC<TransactionsProps> = ({
address = null,
errorMessage = null,
maybeResult = new Some(null),
actionable_address,
Expand Down Expand Up @@ -94,6 +96,43 @@ export const Transactions: React.FC<TransactionsProps> = ({
/>
),
},
{
id: "in_out",
accessorKey: "in_out",
header: () => null,
cell: ({ row }) => (
<div className="w-10 flex justify-center">
<Badge
variant={
(address
? address?.toLowerCase() ===
row.original.from_address?.toLowerCase()
? "danger"
: address?.toLowerCase() ===
row.original.to_address?.toLowerCase()
? "success"
: null
: null) || "ghost"
}
>
{(address
? address.toLowerCase() ===
row.original.from_address?.toLowerCase()
? "OUT"
: address.toLowerCase() ===
row.original.to_address?.toLowerCase()
? "IN"
: null
: null) || (
<IconWrapper
icon_class_name="arrow_right_alt"
class_name="opacity-60 text-foreground-light dark:text-foreground-dark"
/>
)}
</Badge>
</div>
),
},
{
id: "to_address",
accessorKey: "to_address",
Expand Down Expand Up @@ -123,19 +162,19 @@ export const Transactions: React.FC<TransactionsProps> = ({
column={column}
/>
),
cell: ({ row }) => {
return row.original.value ? (
<p className="text-right">
{calculatePrettyBalance(
row.original.value,
row.original.gas_metadata?.contract_decimals,
)}{" "}
{row.original.gas_metadata?.contract_ticker_symbol}
cell: ({ row }) => (
<div className="text-right">
{`${calculatePrettyBalance(
row.original.value ?? 0,
row.original.gas_metadata?.contract_decimals,
true,
4,
)} ${row.original.gas_metadata?.contract_ticker_symbol}`}
<p className="text-xs opacity-80">
{row.original.pretty_value_quote}
</p>
) : (
<p className="text-center">-</p>
);
},
</div>
),
},
{
id: "fees_paid",
Expand Down
Loading

0 comments on commit d42e0fe

Please sign in to comment.