fix: component changes

src/components/Molecules/Address/NFTApproval/NFTApprovals.stories.tsx → src/components/Molecules/Address/NFTApprovalList/NFTApprovalList.stories.tsx

@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from "@storybook/react";
-import { NFTApprovals as NFTApprovalsComponent } from "./NFTApprovals";
+import { NFTApprovals as NFTApprovalsComponent } from "./NFTApprovalList";
 
 type Story = StoryObj<typeof NFTApprovalsComponent>;
 

src/components/Shared/NFTTokenApprovals.tsx → src/components/Molecules/Address/NFTApprovalList/NFTApprovalList.tsx

@@ -1,13 +1,47 @@
-import { type NftApprovalsItem } from "@covalenthq/client-sdk";
-import { type ColumnDef } from "@tanstack/react-table";
-import { TableHeaderSorting, TableList } from ".";
-import { type NFTApprovalsTableProps } from "@/utils/types/shared.types";
+import { type Option, None, Some } from "@/utils/option";
+import type { NftApprovalsItem } from "@covalenthq/client-sdk";
+import { useEffect, useState } from "react";
+import { type NFTApprovalListProps } from "@/utils/types/molecules.types";
+import { useGoldRush } from "@/utils/store";
+import { type CovalentAPIError } from "@/utils/types/shared.types";
+import { defaultErrorMessage } from "@/utils/constants/shared.constants";
+import { TableHeaderSorting, TableList } from "@/components/Shared";
+import { ColumnDef } from "@tanstack/react-table";
 import { Address } from "@/components/Atoms";
 
-export const NFTApprovalsTable: React.FC<NFTApprovalsTableProps> = ({
-    errorMessage,
-    maybeResult,
+export const NFTApprovalList: React.FC<NFTApprovalListProps> = ({
+    chain_name,
+    address,
+    ...props
 }) => {
+    const { covalentClient } = useGoldRush();
+
+    const [maybeResult, setMaybeResult] =
+        useState<Option<NftApprovalsItem[] | null>>(None);
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+    useEffect(() => {
+        (async () => {
+            setMaybeResult(None);
+            setErrorMessage(null);
+            try {
+                const { data, ...error } =
+                    await covalentClient.SecurityService.getNftApprovals(
+                        chain_name,
+                        address.trim()
+                    );
+                if (error.error) {
+                    throw error;
+                }
+                setMaybeResult(new Some(data.items));
+            } catch (error: CovalentAPIError | any) {
+                setErrorMessage(error?.error_message ?? defaultErrorMessage);
+                setMaybeResult(new Some(null));
+                console.error(error);
+            }
+        })();
+    }, [chain_name, address]);
+
     const columns: ColumnDef<NftApprovalsItem>[] = [
         {
             id: "token_details",

src/components/Molecules/Address/TokenApproval/TokenApprovals.stories.tsx → src/components/Molecules/Address/TokenApprovalList/TokenApprovalList.stories.tsx

@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from "@storybook/react";
-import { TokenApprovals as TokenApprovalsComponent } from "./TokenApprovals";
+import { TokenApprovals as TokenApprovalsComponent } from "./TokenApprovalList";
 
 type Story = StoryObj<typeof TokenApprovalsComponent>;
 

src/components/Shared/TokenApprovalsTable.tsx → src/components/Molecules/Address/TokenApprovalList/TokenApprovalList.tsx

@@ -1,13 +1,47 @@
+import { type Option, None, Some } from "@/utils/option";
 import { type TokensApprovalItem } from "@covalenthq/client-sdk";
-import { type ColumnDef } from "@tanstack/react-table";
-import { TableHeaderSorting, TableList } from ".";
-import { type TokenApprovalsTableProps } from "@/utils/types/shared.types";
+import { useEffect, useState } from "react";
+import { type TokenApprovalListProps } from "@/utils/types/molecules.types";
+import { useGoldRush } from "@/utils/store";
+import { type CovalentAPIError } from "@/utils/types/shared.types";
+import { defaultErrorMessage } from "@/utils/constants/shared.constants";
+import { TableHeaderSorting, TableList } from "@/components/Shared";
+import { ColumnDef } from "@tanstack/react-table";
 import { Address } from "@/components/Atoms";
 
-export const TokenApprovalsTable: React.FC<TokenApprovalsTableProps> = ({
-    errorMessage,
-    maybeResult,
+export const TokenApprovalList: React.FC<TokenApprovalListProps> = ({
+    chain_name,
+    address,
+    ...props
 }) => {
+    const { covalentClient } = useGoldRush();
+
+    const [maybeResult, setMaybeResult] =
+        useState<Option<TokensApprovalItem[] | null>>(None);
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+    useEffect(() => {
+        (async () => {
+            setMaybeResult(None);
+            setErrorMessage(null);
+            try {
+                const { data, ...error } =
+                    await covalentClient.SecurityService.getApprovals(
+                        chain_name,
+                        address.trim()
+                    );
+                if (error.error) {
+                    throw error;
+                }
+                setMaybeResult(new Some(data.items));
+            } catch (error: CovalentAPIError | any) {
+                setErrorMessage(error?.error_message ?? defaultErrorMessage);
+                setMaybeResult(new Some(null));
+                console.error(error);
+            }
+        })();
+    }, [chain_name, address]);
+
     const columns: ColumnDef<TokensApprovalItem>[] = [
         {
             id: "token_details",

src/components/Molecules/index.ts

@@ -8,7 +8,8 @@ export { LatestBlocks } from "./Block/LatestBlocks/LatestBlocks";
 export { ChainSelector } from "./ChainSelector/ChainSelector";
 export { GasCard } from "./GasCard/GasCard";
 export { LatestPrice } from "./LatestPrice/LatestPrice";
-export { TokenApprovals } from "./Address/TokenApproval/TokenApprovals";
+export { TokenApprovalList } from "./Address/TokenApprovalList/TokenApprovalList";
+export { NFTApprovalList } from "./Address/NFTApprovalList/NFTApprovalList";
 export { NFTCollectionDetails } from "./NFT/NFTCollectionDetails/NFTCollectionDetails";
 export { NFTCollectionTokensList } from "./NFT/NFTCollectionTokensList/NFTCollectionTokensList";
 export { NFTFloorPrice } from "./NFT/NFTFloorPrice/NFTFloorPrice";

src/utils/types/molecules.types.ts

@@ -30,12 +30,12 @@ export interface AddressActivityListProps {
     errorMessage?: string | null;
 }
 
-export interface NFTApprovalsProps {
+export interface NFTApprovalListProps {
     chain_name: Chain;
     address: string;
 }
 
-export interface TokenApprovalsProps {
+export interface TokenApprovalListProps {
     chain_name: Chain;
     address: string;
 }