+
+ );
+};
diff --git a/src/components/Atoms/AddressAvatar/AddressAvatar.stories.tsx b/src/components/Atoms/AddressAvatar/AddressAvatar.stories.tsx
new file mode 100644
index 00000000..60410f44
--- /dev/null
+++ b/src/components/Atoms/AddressAvatar/AddressAvatar.stories.tsx
@@ -0,0 +1,65 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { AddressAvatar } from "./AddressAvatar";
+import { type AddressAvatarProps } from "@/utils/types/atoms.types";
+import { GRK_SIZES } from "@/utils/constants/shared.constants";
+
+const meta: Meta{truncate(address)}
+ +
+
+
+
+
+
+ );
+};
+
+export const AvatarSizes: Story = {
+ args: {
+ size: GRK_SIZES.SMALL,
+ type: "fingerprint",
+ address: "0xd8da6bf26964af9d7eed9e03e53415d37aa96045",
+ },
+ render: render,
+};
diff --git a/src/components/Atoms/AddressAvatar/AddressAvatar.tsx b/src/components/Atoms/AddressAvatar/AddressAvatar.tsx
new file mode 100644
index 00000000..49e0254c
--- /dev/null
+++ b/src/components/Atoms/AddressAvatar/AddressAvatar.tsx
@@ -0,0 +1,67 @@
+import Fingerprint from "@/static/avatar/fingerprint.svg";
+import WalletRound from "@/static/avatar/wallet-round.svg";
+import WalletSquare from "@/static/avatar/wallet-square.svg";
+import { stringToColor } from "@/utils/functions";
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
+import { type AddressAvatarProps } from "@/utils/types/atoms.types";
+import { useMemo } from "react";
+
+export const AddressAvatar: React.FC
+
+ {iconClassName}
+
+
+ );
+};
diff --git a/src/components/Atoms/NetPriceDelta/NetPriceDelta.tsx b/src/components/Atoms/NetPriceDelta/NetPriceDelta.tsx
new file mode 100644
index 00000000..a4fadffa
--- /dev/null
+++ b/src/components/Atoms/NetPriceDelta/NetPriceDelta.tsx
@@ -0,0 +1,34 @@
+import { useMemo } from "react";
+import { type NetPriceDeltaProps } from "@/utils/types/atoms.types";
+
+export const NetPriceDelta: React.FC
+
+ );
+};
+
+const renderColors = (changeOnlyColor: any) => {
+ const color500Array = Object.keys(COLORS).map((key) => [
+ key,
+ COLORS[key]["500"],
+ ]);
+ return (
+ + Pick dark/light mode +
+
+
+
+
+
+
+ );
+};
+
+const renderButtons = () => {
+ return (
+ + Pick a color +
+
+ {color500Array.map((color, index) => {
+ return (
+
+ changeOnlyColor(color[0])}
+ className={`neo-shadow cursor-pointer rounded p-2 text-white`}
+ >
+ {" "}
+ {color[0]}
+
+ );
+ })}
+
+
+ );
+};
+
+const renderBadges = () => {
+ return (
+ + Buttons +
+
+
+
+
+
+ Default
+ +
+
+
+ Secondary
+ +
+
+
+ Link
+ +
+
+
+ Destructive
+ +
+
+
+ Outline
+ +
+
+ Ghost
+ +
+
+ Disabled
+ +
+
+ );
+};
+
+const renderCheckboxes = () => {
+ return (
+
+ Badges
+
+
+
+
+ Badge
+
+
+ Default
+
+ Badge
+
+ Secondary
+
+ Badge
+
+ Destructive
+
+ Badge
+
+ Outline
+
+
+ );
+};
+
+const renderSkeleton = () => {
+ return (
+
+ Checkboxes
+
+
+
+
+ Checkbox
+
+
+ Default
+
+ Checkbox
+
+
+ Checked
+
+ Checkbox
+
+ Disabled
+
+
+ );
+};
+
+const renderNeoBrutalism = ({ changeToNeo, changeToClassic }: any) => {
+ return (
+
+ Skeleton
+
+
+
+
+
+ Large
+
+
+ Medium
+
+
+ Small
+
+
+ Extra Small
+
+
+ Extra Extra Small
+
+
+
+
+ );
+};
+
+export const ChangeColor: Story = {
+ render: ({ default_color, border_radius }) => {
+ function changeColor(accentcolor: string, border_radius: string) {
+ const theme = {
+ accentcolor: accentcolor,
+ borderradius: border_radius,
+ };
+ updateTheme(theme);
+ }
+
+ function changeOnlyColor(accentcolor: string) {
+ const theme = {
+ accentcolor: accentcolor,
+ };
+ updateTheme(theme);
+ }
+ function changeDarkMode() {
+ const body = document.body;
+ const root = document.documentElement;
+
+ body.classList.add("dark");
+ root.classList.add("dark");
+ }
+ function changeLightMode() {
+ const body = document.body;
+ const root = document.documentElement;
+
+ body.classList.remove("dark");
+ root.classList.remove("dark");
+ }
+
+ function changeToNeo() {
+ const theme = {
+ backgroundColor: {
+ light: "#eff6ff",
+ dark: "#1d4ed8",
+ },
+ borderColor: {
+ light: "#bfdbfe",
+ dark: "#1e40af",
+ },
+ secondary: {
+ light: "#64748b",
+ },
+ surfaceColor: {
+ light: "#bfdbfe",
+ dark: "#bfdbfe",
+ },
+ secondaryColor: {
+ light: "#64748b",
+ dark: "#64748b",
+ },
+ };
+ updateTheme(theme);
+ const body = document.body;
+ body.classList.add("neo");
+ }
+
+ function changeToClassic() {
+ const theme = {
+ backgroundColor: {
+ light: "#ffffff",
+ dark: "#030711",
+ },
+ borderColor: {
+ light: "#e5e7eb",
+ dark: "#1f2937",
+ },
+ surfaceColor: {
+ light: "#e5e7eb",
+ dark: "#e5e7eb",
+ },
+ secondaryColor: {
+ light: "#94a3b8",
+ dark: "#94a3b8",
+ },
+ };
+ updateTheme(theme);
+ const body = document.body;
+ body.classList.remove("neo");
+ }
+
+ useEffect(() => {
+ // changeSurfaceColor();
+ }, []);
+
+ useEffect(() => {
+ changeColor(default_color, border_radius);
+ }, [default_color, border_radius]);
+
+ return (
+
+ {renderDarkLightMode(changeDarkMode, changeLightMode)}
+ {renderColors(changeOnlyColor)}
+ {/* {renderSurfaceColors(changeSurfaceColor)} */}
+ {renderNeoBrutalism({ changeToClassic, changeToNeo })}
+ {renderButtons()}
+ {renderBadges()}
+ {renderCheckboxes()}
+ {renderSkeleton()}
+
+ );
+ },
+ args: {
+ default_color: "red",
+ border_radius: "medium",
+ },
+};
diff --git a/src/components/Atoms/TokenAvatar/TokenAvatar.stories.tsx b/src/components/Atoms/TokenAvatar/TokenAvatar.stories.tsx
new file mode 100644
index 00000000..e4f25dde
--- /dev/null
+++ b/src/components/Atoms/TokenAvatar/TokenAvatar.stories.tsx
@@ -0,0 +1,87 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { GRK_SIZES } from "@/utils/constants/shared.constants";
+import { TokenAvatar } from "./TokenAvatar";
+
+const meta: Meta
+
+
+
+
+
+
+ );
+ },
+};
diff --git a/src/components/Atoms/TokenAvatar/TokenAvatar.tsx b/src/components/Atoms/TokenAvatar/TokenAvatar.tsx
new file mode 100644
index 00000000..907d6437
--- /dev/null
+++ b/src/components/Atoms/TokenAvatar/TokenAvatar.tsx
@@ -0,0 +1,117 @@
+import { useEffect, useMemo, useRef } from "react";
+import { type TokenAvatarProps } from "@/utils/types/atoms.types";
+import { GRK_SIZES } from "@/utils/constants/shared.constants";
+
+export const TokenAvatar: React.FC
+ 
{
+ e.currentTarget.src =
+ "https://goldrush.vercel.app/icons/token.svg";
+ }}
+ />
+ {subUrl && (
+ 
{
+ e.currentTarget.src =
+ "https://goldrush.vercel.app/icons/token.svg";
+ }}
+ />
+ )}
+
+ );
+};
diff --git a/src/components/Molecules/AccountCardView/AccountCardView.stories.tsx b/src/components/Molecules/AccountCardView/AccountCardView.stories.tsx
new file mode 100644
index 00000000..334a66dc
--- /dev/null
+++ b/src/components/Molecules/AccountCardView/AccountCardView.stories.tsx
@@ -0,0 +1,18 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { AccountCardView } from "./AccountCardView";
+
+type Story = StoryObj
+
+
+ );
+};
diff --git a/src/components/Molecules/NFTs/NFTFloorPriceView/NFTFloorPriceView.stories.tsx b/src/components/Molecules/NFTs/NFTFloorPriceView/NFTFloorPriceView.stories.tsx
new file mode 100644
index 00000000..51d3a76c
--- /dev/null
+++ b/src/components/Molecules/NFTs/NFTFloorPriceView/NFTFloorPriceView.stories.tsx
@@ -0,0 +1,19 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { NFTFloorPriceView } from "./NFTFloorPriceView";
+import { NFT_COLLECTIONS } from "@/utils/constants/shared.constants";
+
+type Story = StoryObj
+
+ + {name} +
+
+
+ + {truncate(address)} +
+ copyToClipboard(address)}
+ >
+ {showCopy ? (
+ handleCopyClick()}
+ />
+ )}
+
+
+
+
+
+
+ );
+ },
+ Some: (result) => {
+ const floor_price_native =
+ "Floor price (" +
+ nativeCurrency.match({ None: () => "", Some: (n) => n }) +
+ ")";
+ return (
+
+
+ );
+ },
+ });
+
+ return (
+
+
+ );
+};
diff --git a/src/components/Molecules/NFTs/NFTSalesCountView/NFTSalesCountView.stories.tsx b/src/components/Molecules/NFTs/NFTSalesCountView/NFTSalesCountView.stories.tsx
new file mode 100644
index 00000000..f7342b53
--- /dev/null
+++ b/src/components/Molecules/NFTs/NFTSalesCountView/NFTSalesCountView.stories.tsx
@@ -0,0 +1,19 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { NFTSalesCountView } from "./NFTSalesCountView";
+import { NFT_COLLECTIONS } from "@/utils/constants/shared.constants";
+
+type Story = StoryObj
+ Floor Price
+
+
+
+
+
+ {body}
+
+
+ {maybeResult.match({
+ None: () => (
+
+ ),
+ Some: () => (
+
+ ),
+ })}
+
+
+
+
+
+
+
+
+ );
+ },
+ Some: (result) => {
+ return (
+
+
+ );
+ },
+ });
+
+ return (
+
+
+ );
+};
diff --git a/src/components/Molecules/NFTs/NFTVolumeView/NFTVolumeView.stories.tsx b/src/components/Molecules/NFTs/NFTVolumeView/NFTVolumeView.stories.tsx
new file mode 100644
index 00000000..266162db
--- /dev/null
+++ b/src/components/Molecules/NFTs/NFTVolumeView/NFTVolumeView.stories.tsx
@@ -0,0 +1,19 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { NFTVolumeView } from "./NFTVolumeView";
+import { NFT_COLLECTIONS } from "@/utils/constants/shared.constants";
+
+type Story = StoryObj
+ Sales History
+
+
+
+
+
+
+ {body}
+
+
+
+
+
+
+
+ );
+ },
+ Some: (result) => {
+ const floor_price_native =
+ "Volume (" +
+ nativeCurrency.match({ None: () => "", Some: (n) => n }) +
+ ")";
+ return (
+
+
+ );
+ },
+ });
+
+ return (
+
+
+ );
+};
diff --git a/src/components/Organisms/NFTs/NFTDetailView/NFTDetailView.stories.tsx b/src/components/Organisms/NFTs/NFTDetailView/NFTDetailView.stories.tsx
new file mode 100644
index 00000000..7af61473
--- /dev/null
+++ b/src/components/Organisms/NFTs/NFTDetailView/NFTDetailView.stories.tsx
@@ -0,0 +1,19 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { NFTDetailView } from "./NFTDetailView";
+
+type Story = StoryObj
+ Volume
+
+
+
+
+
+ {body}
+
+
+ {maybeResult.match({
+ None: () => (
+
+ ),
+ Some: () => (
+
+ ),
+ })}
+
+
+
+
+
+
+ Loading...
,
+ Some: (result) => {
+ return (
+
+
+ {result.contract_name} #
+ {result.nft_data.token_id?.toString()}{" "}
+
+
+
+ );
+ },
+ });
+};
diff --git a/src/components/Organisms/NFTs/NFTWalletCollectionView/NFTWalletCollectionView.stories.tsx b/src/components/Organisms/NFTs/NFTWalletCollectionView/NFTWalletCollectionView.stories.tsx
new file mode 100644
index 00000000..f3e04611
--- /dev/null
+++ b/src/components/Organisms/NFTs/NFTWalletCollectionView/NFTWalletCollectionView.stories.tsx
@@ -0,0 +1,18 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { NFTWalletCollectionView } from "./NFTWalletCollectionView";
+
+type Story = StoryObj
+
+
+
+ 
+
+
+
+ Attributes
+
+
+
+ {result.nft_data.external_data?.attributes.map(
+ (attrs, i) => {
+ return (
+
+
+
+ );
+ }
+ )}
+ + {attrs.trait_type} +
+{attrs.value}
+
+
+
+
+
+
+
+
+ );
+ });
+
+ return (
+
+
+
+
+
+
+ {items.contract_name}{" "}
+
+ {" "}
+ {items.nft_data.length} items{" "}
+ {" "}
+
+
+ {items.nft_data.map((it, j) => {
+ return (
+
+
+ 
{
+ e.currentTarget.classList.remove("object-cover");
+ e.currentTarget.classList.add("p-2");
+ e.currentTarget.src =
+ "https://www.datocms-assets.com/86369/1685489960-nft.svg";
+ }}
+ />
+
+
+ );
+ })}
+
+
+
+ {" "}
+ {items.contract_name}
+
+
+ #{it.token_id?.toString()}
+
+
+
+
+ Est. Value
+
+
+ + {" "} + { + items.pretty_floor_price_quote + } +
+
+
+ );
+ },
+ });
+};
diff --git a/src/components/Organisms/NFTs/NFTWalletTokenListView/NFTWalletTokenListView.stories.tsx b/src/components/Organisms/NFTs/NFTWalletTokenListView/NFTWalletTokenListView.stories.tsx
new file mode 100644
index 00000000..b2009ec0
--- /dev/null
+++ b/src/components/Organisms/NFTs/NFTWalletTokenListView/NFTWalletTokenListView.stories.tsx
@@ -0,0 +1,18 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { NFTWalletTokenListView } from "./NFTWalletTokenListView";
+
+type Story = StoryObj
+
+
+
+ + Total Quote +
+
+
+ {maybeResult.match({
+ None: () => (
+
+
+
+ {" "}
+ (
+ {maybeResult.match({
+ None: () => (
+
+ {body}
+
+
+ {" "}
+ {items.contract_name}
+
+
+ #{it.token_id?.toString()}
+
+
+
+
+ Est. Value
+
+
+ {items.pretty_floor_price_quote}
+
+
+ );
+ },
+ });
+};
diff --git a/src/components/Organisms/TokenBalances/AddressActivityListView/AddressActivityListView.stories.tsx b/src/components/Organisms/TokenBalances/AddressActivityListView/AddressActivityListView.stories.tsx
new file mode 100644
index 00000000..9aef9f6b
--- /dev/null
+++ b/src/components/Organisms/TokenBalances/AddressActivityListView/AddressActivityListView.stories.tsx
@@ -0,0 +1,17 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { AddressActivityListView } from "./AddressActivityListView";
+
+type Story = StoryObj
+
+
+
+
+ + Total Quote +
+
+
+ {maybeResult.match({
+ None: () => (
+
+
+
+ {" "}
+ (
+ {maybeResult.match({
+ None: () => (
+
+ {body}
+
+
+ );
+ },
+ },
+ {
+ accessorKey: "last_seen_at",
+ header: ({ column }) => (
+ {timestampParser(t, "relative")}
;
+ },
+ },
+ {
+ accessorKey: "is_testnet",
+ header: ({ column }) => (
+
+ {t ? (
+ ""
+ ) : (
+
+ );
+ },
+ },
+];
+
+export const AddressActivityListView: React.FC<
+ AddressActivityListViewProps
+> = ({ address }) => {
+ const { covalentClient } = useGoldrush();
+ const [sorting, setSorting] = useState
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView.stories.tsx b/src/components/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView.stories.tsx
new file mode 100644
index 00000000..a63af1aa
--- /dev/null
+++ b/src/components/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView.stories.tsx
@@ -0,0 +1,78 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { TokenBalancesListView } from "./TokenBalancesListView";
+import { useEffect, useState } from "react";
+import { type Option, None, Some } from "@/utils/option";
+import { useGoldrush } from "@/utils/store/Goldrush";
+import { type TokenBalancesListViewProps } from "@/utils/types/organisms.types";
+
+type Story = StoryObj
+
+
+
+
+
+ {" "}
+ Mainnet Chains Active{" "}
+
+ {" "}
+ {maybeResult.match({
+ None: () => (
+
+
+
+ {" "}
+ Testnet Chains Active{" "}
+
+ {" "}
+ {maybeResult.match({
+ None: () => (
+
+
+
+ );
+ },
+ });
+ },
+};
diff --git a/src/components/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView.tsx b/src/components/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView.tsx
new file mode 100644
index 00000000..19f459b4
--- /dev/null
+++ b/src/components/Organisms/TokenBalances/TokenBalancesListView/TokenBalancesListView.tsx
@@ -0,0 +1,680 @@
+import { type Option, None, Some } from "@/utils/option";
+import {
+ type BalanceItem,
+ type ChainItem,
+ calculatePrettyBalance,
+} from "@covalenthq/client-sdk";
+import { useEffect, useState } from "react";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+ type ColumnDef,
+ type SortingState,
+ flexRender,
+ getCoreRowModel,
+ getSortedRowModel,
+ useReactTable,
+} from "@tanstack/react-table";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Skeleton } from "@/components/ui/skeleton";
+import { TokenAvatar } from "../../../Atoms/TokenAvatar/TokenAvatar";
+import { Button } from "@/components/ui/button";
+import { prettyCurrency, timestampParser } from "@/utils/functions";
+import { BalancePriceDelta } from "@/components/Atoms/BalancePriceDelta/BalancePriceDelta";
+import { AccountCardView } from "@/components/Molecules/AccountCardView/AccountCardView";
+import { TableHeaderSorting } from "@/components/ui/tableHeaderSorting";
+import { sum } from "lodash";
+import { IconWrapper } from "@/components/Atoms/IconWrapper/IconWrapper";
+import { GRK_SIZES } from "@/utils/constants/shared.constants";
+import { useGoldrush } from "@/utils/store/Goldrush";
+import {
+ type CrossChainBalanceItem,
+ type TokenBalancesListViewProps,
+} from "@/utils/types/organisms.types";
+
+export const TokenBalancesListView: React.FCToken
,
+ header: ({ column }) => (
+
+
+ );
+ },
+ });
+ },
+ },
+ {
+ id: "quote_rate",
+ accessorKey: "quote_rate",
+ header: ({ column }) => (
+
+
+
+ {chain_label}
+
+
+
+ {" "}
+ {prettyCurrency(row.getValue("quote_rate"))}{" "}
+
+ );
+ },
+ },
+ {
+ id: "balance",
+ accessorKey: "balance",
+ header: ({ column }) => (
+
+ {!mask_balances ? valueFormatted : "*****"}{" "}
+ {row.original.contract_ticker_symbol}
+
+ );
+ },
+ },
+ {
+ id: "pretty_quote",
+ accessorKey: "quote",
+ header: ({ column }) => (
+
+ {" "}
+ {row.original.pretty_quote
+ ? row.original.pretty_quote
+ : "$0.00"}{" "}
+
+ );
+ },
+ },
+ {
+ id: "delta",
+ accessorKey: "quote_24h",
+ header: ({ column }) => (
+
+ {" "}
+
+ );
+ },
+ },
+ {
+ id: "actions",
+ cell: ({ row }) => {
+ return (
+
+
+
+
+
+
+ Actions
+
+
+
+
+
+
+
+
+
+ );
+ },
+ },
+ ];
+
+ const mobile_columns: ColumnDef
+
{" "}
+ Token
,
+ header: ({ column }) => (
+
+
+ );
+ },
+ });
+ },
+ },
+ {
+ id: "pretty_quote",
+ accessorKey: "quote",
+ header: ({ column }) => (
+
+
+
+ {chain_label}
+
+
+
+ {!mask_balances
+ ? formattedNumber
+ : "*****"}{" "}
+ {row.original.contract_ticker_symbol}
+
+
+
+ );
+ },
+ },
+ {
+ id: "actions",
+ cell: ({ row }) => {
+ return (
+
+ {row.original.pretty_quote
+ ? row.original.pretty_quote
+ : "$0.00"}
+
+
+
+
+
+
+
+
+
+ Actions
+
+
+
+
+
+
+
+
+
+ );
+ },
+ },
+ ];
+
+ const table = useReactTable({
+ data: filterResult.match({
+ None: () => [],
+ Some: (result) => result,
+ }),
+ columns: windowWidth < 700 ? mobile_columns : columns,
+ onSortingChange: setSorting,
+ getCoreRowModel: getCoreRowModel(),
+ getSortedRowModel: getSortedRowModel(),
+ onRowSelectionChange: setRowSelection,
+ state: {
+ sorting,
+ rowSelection,
+ },
+ });
+
+ const body = filterResult.match({
+ None: () => (
+
+
{" "}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/Organisms/TokenBalances/TokenTransfersListView/TokenTransfersListView.stories.tsx b/src/components/Organisms/TokenBalances/TokenTransfersListView/TokenTransfersListView.stories.tsx
new file mode 100644
index 00000000..b5151355
--- /dev/null
+++ b/src/components/Organisms/TokenBalances/TokenTransfersListView/TokenTransfersListView.stories.tsx
@@ -0,0 +1,19 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { TokenTransfersListView } from "./TokenTransfersListView";
+
+type Story = StoryObj
+
+
+
+
+ Total Quote
+
+
+ {filterResult.match({
+ None: () => (
+
+
+
+ {" "}
+ (
+ {filterResult.match({
+ None: () => (
+
+ {timestampParser(t, "relative")}
;
+ },
+ },
+ {
+ accessorKey: "from_address",
+ header: "From",
+ cell: ({ row }) => {
+ return (
+
+
+ );
+ },
+ },
+ {
+ accessorKey: "to_address",
+ header: "To",
+ cell: ({ row }) => {
+ return (
+
+
+ );
+ },
+ },
+ {
+ accessorKey: "transfer_type",
+ header: "In/Out",
+ cell: ({ row }) => {
+ return
+ {calculatePrettyBalance(
+ transfer?.delta ?? 0,
+ transfer?.contract_decimals
+ )}{" "}
+ {transfer?.contract_ticker_symbol}
+
+ );
+ }
+ return null;
+ },
+ },
+ {
+ id: "value",
+ accessorKey: "delta_quote",
+ header: ({ column }) => (
+
+ {prettyCurrency(row.original.transfers[0].delta_quote)}
+
+ );
+ },
+ },
+ {
+ accessorKey: "tx_hash",
+ header: "Transaction",
+ cell: ({ row }) => {
+ const txHash: string = row.getValue("tx_hash");
+ return (
+
+ {truncate(txHash)}
+
+ );
+ },
+ },
+];
+
+export const TokenTransfersListView: React.FC
+
+
+
+
+
+
+
+
+
+ {maybePagination.match({
+ None: () =>
+ );
+};
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
new file mode 100644
index 00000000..43f3886f
--- /dev/null
+++ b/src/components/ui/avatar.tsx
@@ -0,0 +1,47 @@
+import { forwardRef } from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../../utils/functions";
+
+const Avatar = forwardRef<
+ React.ElementRef
+
+
+
+
+
+ {" "}
+ Network
+
+
+
+
+ {maybeMeta.match({
+ None: () => (
+
+
+ {" "}
+ Token
+
+
+
+
+ {maybeMeta.match({
+ None: () => (
+
+
+
+ );
+ },
+ })}
+
+
+ Page {data.page_number + 1}
+
+
+
+ {/*
+
+
+
+
+
+ Choose rows per page
+
+ {
+ handlePageSize(pageSize);
+ }}
+ >
+ {pageSize}
+
+ ))}
+
+
+
+
+ Skip to page:
+ {
+ const page = e.target.value
+ ? Number(e.target.value)
+ : 0;
+ handleSkipPagination(page);
+ }}
+ className="p-1 rounded w-16 border text-accent dark:text-text-color-50 bg-transparent shadow-sm hover:bg-accent border-accent-foreground hover:bg-accent-foreground"
+ />
+
*/}
+
+
+
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes column.toggleSorting(column.getIsSorted() === "asc")}
+ >
+ {header_name}
+
+ );
+};
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
new file mode 100644
index 00000000..f3969234
--- /dev/null
+++ b/src/components/ui/toast.tsx
@@ -0,0 +1,127 @@
+import * as React from "react";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../utils/functions";
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+ React.ElementRef
+ {title && {title} }
+ {description && (
+
+ {description}
+
+ )}
+
+ {action}
+