Skip to content

Commit

Permalink
feat(tx details): add (#156)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jagnani73
jagnani73 committed Apr 17, 2024
1 parent f5ca3e6 commit 16cbc51
Show file tree
Hide file tree
Showing 5 changed files with 202 additions and 15 deletions.
16 changes: 1 addition & 15 deletions src/components/Molecules/DecodedTransaction/DecodedTransaction.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import { type Meta, type StoryObj } from "@storybook/react";
import { DecodedTransaction as DecodedTransactionComponent } from "./DecodedTransaction";
import { Heading } from "@/components/Shared";

type Story = StoryObj<typeof DecodedTransactionComponent>;

const meta: Meta<typeof DecodedTransactionComponent> = {
title: "Molecules",
title: "Molecules/Decoded Transaction",
component: DecodedTransactionComponent,
argTypes: {
setTxMetadata: {
Expand All @@ -15,19 +14,6 @@ const meta: Meta<typeof DecodedTransactionComponent> = {
},
},
},
render: ({ chain_name, tx_hash, setTxMetadata }) => (
<section>
<div className="mb-8">
<Heading size={1}>Decoded Transaction</Heading>
</div>

<DecodedTransactionComponent
chain_name={chain_name}
tx_hash={tx_hash}
setTxMetadata={setTxMetadata}
/>
</section>
),
};

export default meta;
Expand Down
19 changes: 19 additions & 0 deletions src/components/Molecules/TransactionDetails/TransactionDetails.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { type Meta, type StoryObj } from "@storybook/react";
import { TransactionDetails as TransactionDetailsComponent } from "./TransactionDetails";

type Story = StoryObj<typeof TransactionDetailsComponent>;

const meta: Meta<typeof TransactionDetailsComponent> = {
title: "Molecules/Transaction Details",
component: TransactionDetailsComponent,
};

export default meta;

export const TransactionDetails: Story = {
args: {
chain_name: "eth-mainnet",
tx_hash:
"0x7a038d2f5be4d196a3ff389497f8d61a639e4a32d353758b4f062cafbc5d475c",
},
};
176 changes: 176 additions & 0 deletions src/components/Molecules/TransactionDetails/TransactionDetails.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
import { Address } from "@/components/Atoms";
import { Card, CardDescription, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { GRK_SIZES } from "@/utils/constants/shared.constants";
import { timestampParser } from "@/utils/functions";
import { None, Some, type Option } from "@/utils/option";
import { useGoldRush } from "@/utils/store";
import { type TransactionDetailsProps } from "@/utils/types/molecules.types";
import {
calculatePrettyBalance,
type Transaction,
} from "@covalenthq/client-sdk";
import { useEffect, useState } from "react";

export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
chain_name,
tx_hash,
}) => {
const { covalentClient } = useGoldRush();
const [errorMessage, setErrorMessage] = useState<string | null>(null);
const [maybeResult, setResult] = useState<Option<Transaction>>(None);

useEffect(() => {
(async () => {
setResult(None);
setErrorMessage(null);
try {
const { data, ...error } =
await covalentClient.TransactionService.getTransaction(
chain_name,
tx_hash,
{
noLogs: true,
quoteCurrency: "USD",
withDex: false,
withLending: false,
withNftSales: false,
withSafe: false,
}
);
if (error.error) {
setErrorMessage(error.error_message);
throw error;
}
setResult(new Some(data.items[0]));
} catch (error) {
console.error(error);
}
})();
}, [chain_name, tx_hash]);

return (
<Card className="flex w-full flex-col items-start gap-x-4 rounded border border-secondary-light p-2 dark:border-secondary-dark dark:bg-background-dark dark:text-white">
<CardTitle className="">Overview</CardTitle>
{maybeResult.match({
None: () => (
<div className="mt-4">
<Skeleton size={GRK_SIZES.LARGE} />
</div>
),
Some: (tx) =>
errorMessage ? (
<p className="mt-4">{errorMessage}</p>
) : (
<div className="mt-2 grid w-full grid-cols-3 gap-16 gap-y-4">
<div>
<CardDescription>TX HASH</CardDescription>

<div>
<Address address={tx.tx_hash} />
</div>
</div>

<div>
<CardDescription>BLOCK</CardDescription>

<p>{tx.block_height.toLocaleString()}</p>
</div>

<div>
<CardDescription>SIGNED AT</CardDescription>

<div className="flex items-center gap-x-2">
<div className="flex items-center gap-x-2">
{timestampParser(
tx.block_signed_at,
"descriptive"
)}{" "}
<CardDescription>
(
{timestampParser(
tx.block_signed_at,
"relative"
)}
)
</CardDescription>
</div>
</div>
</div>

<div>
<CardDescription>BLOCK HASH</CardDescription>

<div className="flex items-end gap-x-2">
<Address address={tx.block_hash} />
</div>
</div>

<div>
<CardDescription>FROM</CardDescription>

<div>
<Address address={tx.from_address} />
</div>
</div>

<div>
<CardDescription>TO</CardDescription>

<div>
<Address address={tx.to_address} />
</div>
</div>

<div>
<CardDescription>VALUE</CardDescription>

<div className="flex items-center gap-x-2">
{Number(tx.value) /
Math.pow(
10,
tx.gas_metadata.contract_decimals
)}{" "}
{tx.gas_metadata.contract_ticker_symbol}{" "}
<CardDescription>
{tx.pretty_value_quote}
</CardDescription>
</div>
</div>

<div>
<CardDescription>TX FEE</CardDescription>

<div className="flex items-center gap-x-2">
{calculatePrettyBalance(
BigInt(tx.fees_paid || 0)!,
tx.gas_metadata.contract_decimals,
true,
4
)}{" "}
{tx.gas_metadata.contract_ticker_symbol}{" "}
<CardDescription>
{tx.pretty_gas_quote}
</CardDescription>
</div>
</div>

<div>
<CardDescription>GAS PRICE</CardDescription>

<p className="flex items-center gap-x-2">
{calculatePrettyBalance(
BigInt(tx.gas_price),
tx.gas_metadata.contract_decimals,
true,
10
)}{" "}
{tx.gas_metadata.contract_ticker_symbol}
</p>
</div>
</div>
),
})}
</Card>
);
};
1 change: 1 addition & 0 deletions src/components/Molecules/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export { LatestBlocks } from "./LatestBlocks/LatestBlocks";
export { NFTFloorPrice } from "./NFTs/NFTFloorPrice/NFTFloorPrice";
export { NFTSalesCount } from "./NFTs/NFTSalesCount/NFTSalesCount";
export { NFTVolume } from "./NFTs/NFTVolume/NFTVolume";
export { TransactionDetails } from "./TransactionDetails/TransactionDetails";
export { XYKOverviewTimeSeries } from "./XYK/XYKOverviewTimeSeries/XYKOverviewTimeSeries";
export { XYKPoolInformation } from "./XYK/XYKPoolInformation/XYKPoolInformation";
export { XYKPoolTimeSeries } from "./XYK/XYKPoolTimeSeries/XYKPoolTimeSeries";
Expand Down
5 changes: 5 additions & 0 deletions src/utils/types/molecules.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,11 @@ export interface DecodedTransactionProps {
>;
}

export interface TransactionDetailsProps {
chain_name: Chain;
tx_hash: string;
}

export type EventDetails = {
heading: string;
value: string;
Expand Down

0 comments on commit 16cbc51

Please sign in to comment.