Skip to content

Commit

Permalink
feat: decoded tx
Browse files Browse the repository at this point in the history
  • Loading branch information
@jagnani73
jagnani73 committed Dec 5, 2023
1 parent db62c55 commit 13c478f
Show file tree
Hide file tree
Showing 4 changed files with 389 additions and 4 deletions.
35 changes: 35 additions & 0 deletions src/components/Molecules/DecodedTransaction/DecodedTransaction.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { type Meta, type StoryObj } from "@storybook/react";
import { DecodedTransactionView } from "./DecodedTransactionView";

type Story = StoryObj<typeof DecodedTransactionView>;

const meta: Meta<typeof DecodedTransactionView> = {
title: "Molecules/DecodedTransactions",
component: DecodedTransactionView,
};

export default meta;

export const TokensTransaction: Story = {
args: {
chain_name: "eth-mainnet",
tx_hash:
"0x7c0d75a2c4407917a0f70c48655f8a66f35f9aba7d36e615bcabc2c191ac2658",
},
};

export const NFTSTransaction: Story = {
args: {
chain_name: "eth-mainnet",
tx_hash:
"0x7a038d2f5be4d196a3ff389497f8d61a639e4a32d353758b4f062cafbc5d475c",
},
};

export const DetailsTransaction: Story = {
args: {
chain_name: "moonbeam-mainnet",
tx_hash:
"0x34ff300049313fde3ffb055d4fcbea1257fd8ca341c913033ccff6976eb7b231",
},
};
287 changes: 287 additions & 0 deletions src/components/Molecules/DecodedTransaction/DecodedTransactionView.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,287 @@
import { useEffect, useMemo, useState } from "react";
import {
type DecodedEventType,
type DecodedTransactionProps,
} from "@/utils/types/molecules.types";
import { type Option, None, Some } from "@/utils/option";
import { TokenAvatar } from "@/components/Atoms/TokenAvatar/TokenAvatar";
import { GRK_SIZES } from "@/utils/constants/shared.constants";
import {
TypographyH1,
TypographyH2,
TypographyH4,
} from "@/components/ui/typography";
import { useChains } from "@/utils/store/Chains";
import { type ChainItem } from "@covalenthq/client-sdk";
import { Badge } from "@/components/ui/badge";
import {
Card,
CardContent,
CardDescription,
CardTitle,
} from "@/components/ui/card";

export const DecodedTransactionView: React.FC<DecodedTransactionProps> = ({
chain_name,
tx_hash,
}) => {
const { chains } = useChains();

const [maybeResult, setResult] = useState<Option<DecodedEventType[]>>(None);

const CHAIN = useMemo<ChainItem | null>(() => {
return chains?.find((o) => o.name === chain_name) ?? null;
}, [chains, chain_name]);

useEffect(() => {
(async () => {
try {
const response = await fetch(
"http://localhost:8080/api/v1/tx/decode",
{
body: JSON.stringify({
network: chain_name,
tx_hash: tx_hash,
}),
headers: {
"content-type": "application/json",
"x-covalent-api-key": import.meta.env
.STORYBOOK_COVALENT_API_KEY as string,
},
method: "POST",
}
);
const { events } = (await response.json()) as {
events: DecodedEventType[];
};
setResult(new Some(events));
} catch (exception) {
console.error(exception);
setResult(new Some([]));
}
})();
}, [chain_name, tx_hash]);

return (
<>
{maybeResult.match({
None: () => <p>Loading...</p>,
Some: (events) => (
<div>
<TypographyH1>Decoded Transaction</TypographyH1>

{!events.length ? (
<TypographyH4>No decoded Events.</TypographyH4>
) : (
events.map(
({
action,
category,
name,
details,
nfts,
protocol,
tokens,
}) => (
<article
key={name}
className="flex w-full flex-col gap-y-8"
>
<TypographyH2>
<div className="mt-4 flex items-center gap-x-8">
{protocol?.name}
<div className="flex items-center justify-between gap-x-4">
<Badge>{action}</Badge>
<Badge>{category}</Badge>
</div>
</div>
</TypographyH2>

{tokens?.length && (
<div>
<TypographyH4>
Tokens
</TypographyH4>

<div className="mt-4 grid grid-cols-4 items-center justify-evenly gap-4">
{tokens.map(
(
{
heading,
pretty,
ticker_logo,
ticker_symbol,
},
i
) => (
<div
key={
ticker_symbol ||
"" + i
}
>
<CardDescription
className="truncate text-ellipsis"
title={
heading
}
>
{heading ||
"Token Amount"}
</CardDescription>
<CardTitle className="flex items-center gap-x-2 truncate">
<TokenAvatar
size={
GRK_SIZES.EXTRA_SMALL
}
chainColor={
CHAIN
?.color_theme
.hex
}
tokenUrl={
ticker_logo
}
/>
{pretty}{" "}
{
ticker_symbol
}
</CardTitle>
</div>
)
)}
</div>
</div>
)}

{details?.length && (
<div>
<TypographyH4>
Details
</TypographyH4>

<div className="mt-4 grid grid-cols-4 items-center justify-evenly gap-4">
{details.map(
(
{ title, value },
i
) => (
<div
key={title + i}
className="truncate text-ellipsis"
>
<CardDescription
className="truncate text-ellipsis"
title={
title
}
>
{title}
</CardDescription>
<CardTitle
className="truncate text-ellipsis"
title={
value
}
>
{value}
</CardTitle>
</div>
)
)}
</div>
</div>
)}

{nfts?.length && (
<div>
<TypographyH4>
NFTs
</TypographyH4>

<div className="mt-4 grid grid-cols-4 items-center justify-evenly gap-4">
{nfts.map(
({
collection_address,
collection_name,
heading,
images,
token_identifier,
}) => (
<Card
key={
collection_address +
token_identifier
}
className="w-64 rounded border"
>
<CardContent>
<img
className={`block h-64 w-64 rounded-t`}
src={
images[256] ||
images[512] ||
images[1024] ||
images.default ||
""
}
onError={(
e
) => {
e.currentTarget.classList.remove(
"object-cover"
);
e.currentTarget.classList.add(
"p-2"
);
e.currentTarget.src =
"https://www.datocms-assets.com/86369/1685489960-nft.svg";
}}
/>
</CardContent>

<div className="truncate text-ellipsis p-4">
<p
title={
heading
}
>
{
heading
}
</p>

<CardDescription
title={
collection_name ||
"<NO COLLECTION NAME>"
}
className="truncate text-ellipsis"
>
{collection_name ||
"<NO COLLECTION NAME>"}
</CardDescription>
<CardTitle>
#
{
token_identifier
}
</CardTitle>
</div>
</Card>
)
)}
</div>
</div>
)}
</article>
)
)
)}
</div>
),
})}
</>
);
};
28 changes: 24 additions & 4 deletions src/utils/constants/shared.constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,6 @@ export enum GRK_SIZES {
EXTRA_EXTRA_SMALL = "xxs",
}

export type GRK_NFT_SIZES = "lg" | "md" | "sm" | "default";

export type GRK_WALLET_TYPES = "effigy" | "fingerprint" | "wallet";

export const CHART_COLORS: Color[] = [
"slate",
"violet",
Expand Down Expand Up @@ -339,3 +335,27 @@ export enum CURRENCY {
USD,
NATIVE,
}

export enum DECODED_EVENT_CATEGORY {
NFT = "NFT Transaction",
LENDING = "Lending",
SAFE = "SAFE",
DEX = "DEX",
TOKEN = "Token",
SWAP = "Swap",
MINT = "Mint",
DEFI = "DeFi",
BRIDGE = "Bridge",
GAMING = "Gaming",
SOCIAL = "Social",
OTHERS = "Others",
}

export enum DECODED_ACTION {
SWAPPED = "Swapped",
MULTISIG_ACTION = "MultiSig",
APPROVAL = "Approval",
TRANSFERRED = "Transferred",
RECEIVED_BRIDGE = "Received Bridge",
ACCOUNT_ABSTRACTION = "Account Abstraction Transaction",
}
Loading

0 comments on commit 13c478f

Please sign in to comment.