fix: address card action (#178)

covalenthq · May 23, 2024 · fde8c07 · fde8c07
1 parent d0b3a97
commit fde8c07
Show file tree

Hide file tree

Showing 35 changed files with 118 additions and 413 deletions.
diff --git a/src/components/Atoms/Address/Address.stories.tsx b/src/components/Atoms/Address/Address.stories.tsx
@@ -1,6 +1,6 @@
 import { type Meta, type StoryObj } from "@storybook/react";
 import { Address as AddressComponent } from "./Address";
-import { fn } from "@storybook/test";
+import { storyAction } from "@/utils/functions";
 
 const meta: Meta<typeof AddressComponent> = {
     title: "Atoms/Address",
@@ -15,14 +15,6 @@ export const Address: Story = {
     args: {
         address: "0xd8da6bf26964af9d7eed9e03e53415d37aa96045",
         show_copy_icon: true,
-        actionable_address: (address: string) => ({
-            parent: "button",
-            parentProps: {
-                onClick: fn(() => {
-                    console.log(address);
-                }),
-                className: "hover:underline",
-            },
-        }),
+        actionable_address: (address: string) => storyAction(address),
     },
 };
diff --git a/src/components/Atoms/AddressCard/AddressCard.stories.tsx b/src/components/Atoms/AddressCard/AddressCard.stories.tsx
@@ -1,5 +1,6 @@
 import { type Meta, type StoryObj } from "@storybook/react";
 import { AddressCard as AddressCardComponent } from "./AddressCard";
+import { storyAction } from "@/utils/functions";
 
 type Story = StoryObj<typeof AddressCardComponent>;
 
@@ -14,5 +15,6 @@ export const AddressCard: Story = {
     args: {
         address: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
         type: "effigy",
+        actionable_address: (address: string) => storyAction(address),
     },
 };
diff --git a/src/components/Atoms/Pool/Pool.stories.tsx b/src/components/Atoms/Pool/Pool.stories.tsx
@@ -1,5 +1,6 @@
 import { type Meta, type StoryObj } from "@storybook/react";
 import { Pool as PoolComponent } from "./Pool";
+import { storyAction } from "@/utils/functions";
 
 const meta: Meta<typeof PoolComponent> = {
     title: "Atoms/Pool",
@@ -19,5 +20,6 @@ export const Pool: Story = {
             "https://logos.covalenthq.com/tokens/1/0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2.png",
         token_1_ticker_symbol: "WETH",
         pool_address: "0x66a0f676479cee1d7373f3dc2e2952778bff5bd6",
+        actionable_pool: (address: string) => storyAction(address),
     },
 };
diff --git a/src/components/Molecules/Address/AddressTransactions/AddressTransactions.stories.tsx b/src/components/Molecules/Address/AddressTransactions/AddressTransactions.stories.tsx
@@ -1,6 +1,6 @@
 import { type Meta, type StoryObj } from "@storybook/react";
 import { AddressTransactions as AddressTransactionsComponent } from "./AddressTransactions";
-import { fn } from "@storybook/test";
+import { storyAction } from "@/utils/functions";
 
 type Story = StoryObj<typeof AddressTransactionsComponent>;
 
@@ -15,13 +15,6 @@ export const AddressTransactions: Story = {
     args: {
         chain_name: "eth-mainnet",
         address: "0x972B8FAD70de6e430D8b368198AbFF1E42eFf022",
-        actionable_transaction: (tx_hash) => ({
-            parent: "button",
-            parentProps: {
-                onClick: fn(() => {
-                    console.log(tx_hash);
-                }),
-            },
-        }),
+        actionable_transaction: (tx_hash) => storyAction(tx_hash),
     },
 };
diff --git a/src/components/Molecules/Block/BlockTransactions/BlockTransactions.stories.tsx b/src/components/Molecules/Block/BlockTransactions/BlockTransactions.stories.tsx
@@ -1,6 +1,6 @@
 import { type Meta, type StoryObj } from "@storybook/react";
 import { BlockTransactions as BlockTransactionsComponent } from "./BlockTransactions";
-import { fn } from "@storybook/test";
+import { storyAction } from "@/utils/functions";
 
 type Story = StoryObj<typeof BlockTransactionsComponent>;
 
@@ -15,13 +15,6 @@ export const BlockTransactions: Story = {
     args: {
         chain_name: "eth-mainnet",
         block_height: 19575410,
-        actionable_transaction: (tx_hash) => ({
-            parent: "button",
-            parentProps: {
-                onClick: fn(() => {
-                    console.log(tx_hash);
-                }),
-            },
-        }),
+        actionable_transaction: (tx_hash) => storyAction(tx_hash),
     },
 };
diff --git a/src/components/Molecules/Block/LatestBlocks/LatestBlocks.stories.tsx b/src/components/Molecules/Block/LatestBlocks/LatestBlocks.stories.tsx
@@ -1,7 +1,7 @@
 import { type Meta, type StoryObj } from "@storybook/react";
 import { LatestBlocks as LatestBlocksComponent } from "./LatestBlocks";
 import { type Block } from "@covalenthq/client-sdk";
-import { fn } from "@storybook/test";
+import { storyAction } from "@/utils/functions";
 
 type Story = StoryObj<typeof LatestBlocksComponent>;
 
@@ -15,13 +15,6 @@ export default meta;
 export const LatestBlocks: Story = {
     args: {
         chain_name: "eth-mainnet",
-        actionable_block: (block: Block) => ({
-            parent: "button",
-            parentProps: {
-                onClick: fn(() => {
-                    console.log(block);
-                }),
-            },
-        }),
+        actionable_block: (block: Block) => storyAction(block),
     },
 };
diff --git a/src/components/Molecules/NFT/NFTApprovalList/NFTApprovalList.stories.tsx b/src/components/Molecules/NFT/NFTApprovalList/NFTApprovalList.stories.tsx
@@ -1,6 +1,6 @@
 import { type Meta, type StoryObj } from "@storybook/react";
 import { NFTApprovalList as NFTApprovalListComponent } from "./NFTApprovalList";
-import { fn } from "@storybook/test";
+import { storyAction } from "@/utils/functions";
 
 type Story = StoryObj<typeof NFTApprovalListComponent>;
 
@@ -15,21 +15,7 @@ export const NFTApprovalList: Story = {
     args: {
         chain_name: "eth-mainnet",
         address: "demo.eth",
-        actionable_token: (approval) => ({
-            parent: "button",
-            parentProps: {
-                onClick: fn(() => {
-                    console.log(approval);
-                }),
-            },
-        }),
-        actionable_spender: (approval) => ({
-            parent: "button",
-            parentProps: {
-                onClick: fn(() => {
-                    console.log(approval);
-                }),
-            },
-        }),
+        actionable_token: (approval) => storyAction(approval),
+        actionable_spender: (approval) => storyAction(approval),
     },
 };
diff --git a/src/components/Molecules/NFT/NFTWalletCollectionList/NFTWalletCollectionList.stories.tsx b/src/components/Molecules/NFT/NFTWalletCollectionList/NFTWalletCollectionList.stories.tsx
@@ -1,6 +1,6 @@
 import { type Meta, type StoryObj } from "@storybook/react";
 import { NFTWalletCollectionList as NFTWalletCollectionListComponent } from "./NFTWalletCollectionList";
-import { fn } from "@storybook/test";
+import { storyAction } from "@/utils/functions";
 
 type Story = StoryObj<typeof NFTWalletCollectionListComponent>;
 
@@ -15,14 +15,6 @@ export const NFTWalletCollectionList: Story = {
     args: {
         chain_name: "eth-mainnet",
         address: "0x1ae705a28f1cca0363b5d709159220aa2fe551de",
-        actionable_contract: (address: string) => ({
-            parent: "button",
-            parentProps: {
-                onClick: fn(() => {
-                    console.log(address);
-                }),
-                className: "hover:underline",
-            },
-        }),
+        actionable_contract: (address: string) => storyAction(address),
     },
 };
diff --git a/src/components/Molecules/Token/TokenApprovalList/TokenApprovalList.stories.tsx b/src/components/Molecules/Token/TokenApprovalList/TokenApprovalList.stories.tsx
@@ -1,6 +1,6 @@
 import { type Meta, type StoryObj } from "@storybook/react";
 import { TokenApprovalList as TokenApprovalListComponent } from "./TokenApprovalList";
-import { fn } from "@storybook/test";
+import { storyAction } from "@/utils/functions";
 
 type Story = StoryObj<typeof TokenApprovalListComponent>;
 
@@ -15,21 +15,7 @@ export const TokenApprovalList: Story = {
     args: {
         chain_name: "eth-mainnet",
         address: "demo.eth",
-        actionable_token: (approval) => ({
-            parent: "button",
-            parentProps: {
-                onClick: fn(() => {
-                    console.log(approval);
-                }),
-            },
-        }),
-        actionable_spender: (approval) => ({
-            parent: "button",
-            parentProps: {
-                onClick: fn(() => {
-                    console.log(approval);
-                }),
-            },
-        }),
+        actionable_token: (approval) => storyAction(approval),
+        actionable_spender: (approval) => storyAction(approval),
     },
 };
diff --git a/src/components/Molecules/Token/TokenBalancesList/TokenBalancesList.stories.tsx b/src/components/Molecules/Token/TokenBalancesList/TokenBalancesList.stories.tsx
@@ -1,7 +1,7 @@
 import { type Meta, type StoryObj } from "@storybook/react";
 import { TokenBalancesList as TokenBalancesListComponent } from "./TokenBalancesList";
 import { type CrossChainBalanceItem } from "@/utils/types/molecules.types";
-import { fn } from "@storybook/test";
+import { storyAction } from "@/utils/functions";
 
 type Story = StoryObj<typeof TokenBalancesListComponent>;
 
@@ -18,13 +18,6 @@ export const TokenBalancesList: Story = {
         address: "0xf8cb94cda3552a427b87d8beb04729beb93dac5c",
         mask_balances: false,
         hide_small_balances: false,
-        actionable_token: (token: CrossChainBalanceItem) => ({
-            parent: "button",
-            parentProps: {
-                onClick: fn(() => {
-                    console.log(token);
-                }),
-            },
-        }),
+        actionable_token: (token: CrossChainBalanceItem) => storyAction(token),
     },
 };
diff --git a/src/components/Molecules/Token/TokenTransfersList/TokenTransfersList.stories.tsx b/src/components/Molecules/Token/TokenTransfersList/TokenTransfersList.stories.tsx
@@ -1,6 +1,6 @@
 import { type Meta, type StoryObj } from "@storybook/react";
 import { TokenTransfersList as TokenTransfersListComponent } from "./TokenTransfersList";
-import { fn } from "@storybook/test";
+import { storyAction } from "@/utils/functions";
 
 type Story = StoryObj<typeof TokenTransfersListComponent>;
 
@@ -16,23 +16,7 @@ export const TokenTransfersList: Story = {
         chain_name: "eth-mainnet",
         address: "0x1dc3bcc07b93c73c476d7e1056b64c8bd947184a",
         contract_address: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
-        actionable_from: (address) => ({
-            parent: "button",
-            parentProps: {
-                onClick: fn(() => {
-                    console.log(address);
-                }),
-                className: "hover:underline",
-            },
-        }),
-        actionable_to: (address) => ({
-            parent: "button",
-            parentProps: {
-                onClick: fn(() => {
-                    console.log(address);
-                }),
-                className: "hover:underline",
-            },
-        }),
+        actionable_from: (address) => storyAction(address),
+        actionable_to: (address) => storyAction(address),
     },
 };
diff --git a/src/components/Molecules/Transaction/LatestTransactions/LatestTransactions.stories.tsx b/src/components/Molecules/Transaction/LatestTransactions/LatestTransactions.stories.tsx
@@ -1,6 +1,6 @@
 import { type Meta, type StoryObj } from "@storybook/react";
 import { LatestTransactions as LatestTransactionsComponent } from "./LatestTransactions";
-import { fn } from "@storybook/test";
+import { storyAction } from "@/utils/functions";
 
 type Story = StoryObj<typeof LatestTransactionsComponent>;
 
@@ -14,32 +14,8 @@ export default meta;
 export const LatestTransactions: Story = {
     args: {
         chain_name: "eth-mainnet",
-        actionable_transaction: (address) => ({
-            parent: "button",
-            parentProps: {
-                onClick: fn(() => {
-                    console.log(address);
-                }),
-                className: "hover:underline",
-            },
-        }),
-        actionable_from: (address) => ({
-            parent: "button",
-            parentProps: {
-                onClick: fn(() => {
-                    console.log(address);
-                }),
-                className: "hover:underline",
-            },
-        }),
-        actionable_to: (address) => ({
-            parent: "button",
-            parentProps: {
-                onClick: fn(() => {
-                    console.log(address);
-                }),
-                className: "hover:underline",
-            },
-        }),
+        actionable_transaction: (address) => storyAction(address),
+        actionable_from: (address) => storyAction(address),
+        actionable_to: (address) => storyAction(address),
     },
 };
diff --git a/src/components/Molecules/Transaction/TransactionDetails/TransactionDetails.stories.tsx b/src/components/Molecules/Transaction/TransactionDetails/TransactionDetails.stories.tsx
@@ -1,6 +1,6 @@
 import { type Meta, type StoryObj } from "@storybook/react";
 import { TransactionDetails as TransactionDetailsComponent } from "./TransactionDetails";
-import { fn } from "@storybook/test";
+import { storyAction } from "@/utils/functions";
 
 type Story = StoryObj<typeof TransactionDetailsComponent>;
 
@@ -16,40 +16,9 @@ export const TransactionDetails: Story = {
         chain_name: "eth-mainnet",
         tx_hash:
             "0x7a038d2f5be4d196a3ff389497f8d61a639e4a32d353758b4f062cafbc5d475c",
-        actionable_block: (block: number) => ({
-            parent: "button",
-            parentProps: {
-                onClick: fn(() => {
-                    console.log(block);
-                }),
-            },
-        }),
-        actionable_transaction: (address: string) => ({
-            parent: "button",
-            parentProps: {
-                onClick: fn(() => {
-                    console.log(address);
-                }),
-                className: "hover:underline",
-            },
-        }),
-        actionable_from: (address) => ({
-            parent: "button",
-            parentProps: {
-                onClick: fn(() => {
-                    console.log(address);
-                }),
-                className: "hover:underline",
-            },
-        }),
-        actionable_to: (address) => ({
-            parent: "button",
-            parentProps: {
-                onClick: fn(() => {
-                    console.log(address);
-                }),
-                className: "hover:underline",
-            },
-        }),
+        actionable_block: (block: number) => storyAction(block),
+        actionable_transaction: (address: string) => storyAction(address),
+        actionable_from: (address) => storyAction(address),
+        actionable_to: (address) => storyAction(address),
     },
 };