From fde8c079fdcf9a2212f9ccccd4b2f720e6a002ad Mon Sep 17 00:00:00 2001 From: Yashvardhan Jagnani <60016972+jagnani73@users.noreply.github.com> Date: Fri, 24 May 2024 05:20:47 +0530 Subject: [PATCH] fix: address card action (#178) --- .../Atoms/Address/Address.stories.tsx | 12 +----- .../Atoms/AddressCard/AddressCard.stories.tsx | 2 + src/components/Atoms/Pool/Pool.stories.tsx | 2 + .../AddressTransactions.stories.tsx | 11 +---- .../BlockTransactions.stories.tsx | 11 +---- .../LatestBlocks/LatestBlocks.stories.tsx | 11 +---- .../NFTApprovalList.stories.tsx | 20 ++------- .../NFTWalletCollectionList.stories.tsx | 12 +----- .../TokenApprovalList.stories.tsx | 20 ++------- .../TokenBalancesList.stories.tsx | 11 +---- .../TokenTransfersList.stories.tsx | 22 ++-------- .../LatestTransactions.stories.tsx | 32 ++------------- .../TransactionDetails.stories.tsx | 41 +++---------------- .../TransactionReceipt.stories.tsx | 32 ++------------- .../TransactionsList.stories.tsx | 41 +++---------------- .../XYKPoolDetails/XYKPoolDetails.stories.tsx | 32 ++------------- .../Pool/XYKPoolList/XYKPoolList.stories.tsx | 12 +----- .../XYKPoolTransactionsList.stories.tsx | 32 ++------------- .../XYKTokenDetails.stories.tsx | 12 +----- .../XYKTokenList/XYKTokenList.stories.tsx | 12 +----- .../XYKTokenPoolList.stories.tsx | 12 +----- .../XYKTokenTransactionsList.stories.tsx | 32 ++------------- .../XYKWalletPoolList.stories.tsx | 12 +----- .../XYKWalletPositionsList.stories.tsx | 12 +----- .../XYKTransactionsList.stories.tsx | 32 ++------------- .../AddressActivityView.stories.tsx | 2 + .../AddressActivityView.tsx | 6 ++- .../NFTCollectionView.stories.tsx | 2 + .../NFTCollectionView/NFTCollectionView.tsx | 6 ++- .../NFTWalletCollectionView.stories.tsx | 2 + .../NFTWalletCollectionView.tsx | 7 +++- .../XYKPoolView/XYKPoolView.stories.tsx | 4 ++ src/utils/functions/index.ts | 1 + src/utils/functions/story-action.ts | 14 +++++++ src/utils/types/organisms.types.ts | 7 ++++ 35 files changed, 118 insertions(+), 413 deletions(-) create mode 100644 src/utils/functions/story-action.ts diff --git a/src/components/Atoms/Address/Address.stories.tsx b/src/components/Atoms/Address/Address.stories.tsx index cbf6b5c8..78d1f6b4 100644 --- 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 = { 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 index baa05f83..0a78b73f 100644 --- 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; @@ -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 index 329d7167..bb79e13c 100644 --- 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 = { 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 index 03c89e66..3929eef9 100644 --- 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; @@ -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 index 98ffd2a9..359e4236 100644 --- 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; @@ -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 index 36ec34fc..09af2de1 100644 --- 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; @@ -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 index 364ff750..2f71246b 100644 --- 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; @@ -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 index 6a074edc..952e0056 100644 --- 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; @@ -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 index 630ce696..7e9c2871 100644 --- 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; @@ -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 index 557cbd5a..545e45bb 100644 --- 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; @@ -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 index fc77c873..6bb23666 100644 --- 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; @@ -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 index 02941e41..79350c6c 100644 --- 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; @@ -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 index bf6880cb..0d52c674 100644 --- 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; @@ -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), }, }; diff --git a/src/components/Molecules/Transaction/TransactionReceipt/TransactionReceipt.stories.tsx b/src/components/Molecules/Transaction/TransactionReceipt/TransactionReceipt.stories.tsx index 69a7314e..4e7f8abf 100644 --- a/src/components/Molecules/Transaction/TransactionReceipt/TransactionReceipt.stories.tsx +++ b/src/components/Molecules/Transaction/TransactionReceipt/TransactionReceipt.stories.tsx @@ -1,6 +1,6 @@ import { type Meta, type StoryObj } from "@storybook/react"; import { TransactionReceipt as TransactionReceiptComponent } from "./TransactionReceipt"; -import { fn } from "@storybook/test"; +import { storyAction } from "@/utils/functions"; type Story = StoryObj; @@ -16,32 +16,8 @@ export const TransactionReceipt: Story = { chain_name: "eth-mainnet", tx_hash: "0x7a038d2f5be4d196a3ff389497f8d61a639e4a32d353758b4f062cafbc5d475c", - 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/TransactionsList/TransactionsList.stories.tsx b/src/components/Molecules/Transaction/TransactionsList/TransactionsList.stories.tsx index da9c16f3..12dc8212 100644 --- a/src/components/Molecules/Transaction/TransactionsList/TransactionsList.stories.tsx +++ b/src/components/Molecules/Transaction/TransactionsList/TransactionsList.stories.tsx @@ -1,6 +1,6 @@ import { type Meta, type StoryObj } from "@storybook/react"; import { TransactionsList as TransactionsListComponent } from "./TransactionsList"; -import { fn } from "@storybook/test"; +import { storyAction } from "@/utils/functions"; type Story = StoryObj; @@ -14,40 +14,9 @@ export default meta; export const TransactionsList: Story = { args: { chain_name: "eth-mainnet", - 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), }, }; diff --git a/src/components/Molecules/XYK/Pool/XYKPoolDetails/XYKPoolDetails.stories.tsx b/src/components/Molecules/XYK/Pool/XYKPoolDetails/XYKPoolDetails.stories.tsx index 4dd63d43..aacf7a35 100644 --- a/src/components/Molecules/XYK/Pool/XYKPoolDetails/XYKPoolDetails.stories.tsx +++ b/src/components/Molecules/XYK/Pool/XYKPoolDetails/XYKPoolDetails.stories.tsx @@ -1,6 +1,6 @@ import { type Meta, type StoryObj } from "@storybook/react"; import { XYKPoolDetails as XYKPoolDetailsComponent } from "./XYKPoolDetails"; -import { fn } from "@storybook/test"; +import { storyAction } from "@/utils/functions"; type Story = StoryObj; @@ -16,32 +16,8 @@ export const XYKPoolDetails: Story = { pool_address: "0x21b8065d10f73ee2e260e5b47d3344d3ced7596e", dex_name: "uniswap_v2", chain_name: "eth-mainnet", - actionable_address: (address: string) => ({ - parent: "button", - parentProps: { - onClick: fn(() => { - console.log(address); - }), - className: "hover:underline", - }, - }), - actionable_token_0: (address: string) => ({ - parent: "button", - parentProps: { - onClick: fn(() => { - console.log(address); - }), - className: "hover:underline", - }, - }), - actionable_token_1: (address: string) => ({ - parent: "button", - parentProps: { - onClick: fn(() => { - console.log(address); - }), - className: "hover:underline", - }, - }), + actionable_address: (address: string) => storyAction(address), + actionable_token_0: (address: string) => storyAction(address), + actionable_token_1: (address: string) => storyAction(address), }, }; diff --git a/src/components/Molecules/XYK/Pool/XYKPoolList/XYKPoolList.stories.tsx b/src/components/Molecules/XYK/Pool/XYKPoolList/XYKPoolList.stories.tsx index 3db470a3..f999b367 100644 --- a/src/components/Molecules/XYK/Pool/XYKPoolList/XYKPoolList.stories.tsx +++ b/src/components/Molecules/XYK/Pool/XYKPoolList/XYKPoolList.stories.tsx @@ -1,6 +1,6 @@ import { type Meta, type StoryObj } from "@storybook/react"; import { XYKPoolList as XYKPoolListComponent } from "./XYKPoolList"; -import { fn } from "@storybook/test"; +import { storyAction } from "@/utils/functions"; type Story = StoryObj; @@ -15,14 +15,6 @@ export const XYKPoolList: Story = { args: { chain_name: "eth-mainnet", dex_name: "uniswap_v2", - actionable_pool: (address: string) => ({ - parent: "button", - parentProps: { - onClick: fn(() => { - console.log(address); - }), - className: "hover:underline", - }, - }), + actionable_pool: (address: string) => storyAction(address), }, }; diff --git a/src/components/Molecules/XYK/Pool/XYKPoolTransactionsList/XYKPoolTransactionsList.stories.tsx b/src/components/Molecules/XYK/Pool/XYKPoolTransactionsList/XYKPoolTransactionsList.stories.tsx index 17619e05..3c4de81d 100644 --- a/src/components/Molecules/XYK/Pool/XYKPoolTransactionsList/XYKPoolTransactionsList.stories.tsx +++ b/src/components/Molecules/XYK/Pool/XYKPoolTransactionsList/XYKPoolTransactionsList.stories.tsx @@ -1,6 +1,6 @@ import { type Meta, type StoryObj } from "@storybook/react"; import { XYKPoolTransactionsList as XYKPoolTransactionsListComponent } from "./XYKPoolTransactionsList"; -import { fn } from "@storybook/test"; +import { storyAction } from "@/utils/functions"; type Story = StoryObj; @@ -16,32 +16,8 @@ export const XYKPoolTransactionsList: Story = { chain_name: "eth-mainnet", dex_name: "uniswap_v2", pool_address: "0x21b8065d10f73ee2e260e5b47d3344d3ced7596e", - actionable_transaction: (address: string) => ({ - parent: "button", - parentProps: { - onClick: fn(() => { - console.log(address); - }), - className: "hover:underline", - }, - }), - actionable_token_0: (address: string) => ({ - parent: "button", - parentProps: { - onClick: fn(() => { - console.log(address); - }), - className: "hover:underline", - }, - }), - actionable_token_1: (address: string) => ({ - parent: "button", - parentProps: { - onClick: fn(() => { - console.log(address); - }), - className: "hover:underline", - }, - }), + actionable_transaction: (address: string) => storyAction(address), + actionable_token_0: (address: string) => storyAction(address), + actionable_token_1: (address: string) => storyAction(address), }, }; diff --git a/src/components/Molecules/XYK/Token/XYKTokenDetails/XYKTokenDetails.stories.tsx b/src/components/Molecules/XYK/Token/XYKTokenDetails/XYKTokenDetails.stories.tsx index ac8c906a..48bafd72 100644 --- a/src/components/Molecules/XYK/Token/XYKTokenDetails/XYKTokenDetails.stories.tsx +++ b/src/components/Molecules/XYK/Token/XYKTokenDetails/XYKTokenDetails.stories.tsx @@ -1,6 +1,6 @@ import { type Meta, type StoryObj } from "@storybook/react"; import { XYKTokenDetails as XYKTokenDetailsComponent } from "./XYKTokenDetails"; -import { fn } from "@storybook/test"; +import { storyAction } from "@/utils/functions"; type Story = StoryObj; @@ -16,14 +16,6 @@ export const XYKTokenDetails: Story = { token_address: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2", dex_name: "uniswap_v2", chain_name: "eth-mainnet", - 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/Molecules/XYK/Token/XYKTokenList/XYKTokenList.stories.tsx b/src/components/Molecules/XYK/Token/XYKTokenList/XYKTokenList.stories.tsx index a941d9a3..c48fdf25 100644 --- a/src/components/Molecules/XYK/Token/XYKTokenList/XYKTokenList.stories.tsx +++ b/src/components/Molecules/XYK/Token/XYKTokenList/XYKTokenList.stories.tsx @@ -1,6 +1,6 @@ import { type Meta, type StoryObj } from "@storybook/react"; import { XYKTokenList as XYKTokenListComponent } from "./XYKTokenList"; -import { fn } from "@storybook/test"; +import { storyAction } from "@/utils/functions"; type Story = StoryObj; @@ -15,14 +15,6 @@ export const XYKTokenList: Story = { args: { chain_name: "eth-mainnet", dex_name: "uniswap_v2", - 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/Molecules/XYK/Token/XYKTokenPoolList/XYKTokenPoolList.stories.tsx b/src/components/Molecules/XYK/Token/XYKTokenPoolList/XYKTokenPoolList.stories.tsx index 67c7816f..648a52a7 100644 --- a/src/components/Molecules/XYK/Token/XYKTokenPoolList/XYKTokenPoolList.stories.tsx +++ b/src/components/Molecules/XYK/Token/XYKTokenPoolList/XYKTokenPoolList.stories.tsx @@ -1,6 +1,6 @@ import { type Meta, type StoryObj } from "@storybook/react"; import { XYKTokenPoolList as XYKTokenPoolListComponent } from "./XYKTokenPoolList"; -import { fn } from "@storybook/test"; +import { storyAction } from "@/utils/functions"; type Story = StoryObj; @@ -16,14 +16,6 @@ export const XYKTokenPoolList: Story = { chain_name: "eth-mainnet", dex_name: "uniswap_v2", token_address: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2", - actionable_pool: (address: string) => ({ - parent: "button", - parentProps: { - onClick: fn(() => { - console.log(address); - }), - className: "hover:underline", - }, - }), + actionable_pool: (address: string) => storyAction(address), }, }; diff --git a/src/components/Molecules/XYK/Token/XYKTokenTransactionsList/XYKTokenTransactionsList.stories.tsx b/src/components/Molecules/XYK/Token/XYKTokenTransactionsList/XYKTokenTransactionsList.stories.tsx index 93a56246..083f5a2e 100644 --- a/src/components/Molecules/XYK/Token/XYKTokenTransactionsList/XYKTokenTransactionsList.stories.tsx +++ b/src/components/Molecules/XYK/Token/XYKTokenTransactionsList/XYKTokenTransactionsList.stories.tsx @@ -1,6 +1,6 @@ import { type Meta, type StoryObj } from "@storybook/react"; import { XYKTokenTransactionsList as XYKTokenTransactionsListComponent } from "./XYKTokenTransactionsList"; -import { fn } from "@storybook/test"; +import { storyAction } from "@/utils/functions"; type Story = StoryObj; @@ -16,32 +16,8 @@ export const XYKTokenTransactionsList: Story = { chain_name: "eth-mainnet", dex_name: "uniswap_v2", token_address: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2", - actionable_transaction: (address: string) => ({ - parent: "button", - parentProps: { - onClick: fn(() => { - console.log(address); - }), - className: "hover:underline", - }, - }), - actionable_token_0: (address: string) => ({ - parent: "button", - parentProps: { - onClick: fn(() => { - console.log(address); - }), - className: "hover:underline", - }, - }), - actionable_token_1: (address: string) => ({ - parent: "button", - parentProps: { - onClick: fn(() => { - console.log(address); - }), - className: "hover:underline", - }, - }), + actionable_transaction: (address: string) => storyAction(address), + actionable_token_0: (address: string) => storyAction(address), + actionable_token_1: (address: string) => storyAction(address), }, }; diff --git a/src/components/Molecules/XYK/Wallet/XYKWalletPoolList/XYKWalletPoolList.stories.tsx b/src/components/Molecules/XYK/Wallet/XYKWalletPoolList/XYKWalletPoolList.stories.tsx index 82e360ff..559a9c7f 100644 --- a/src/components/Molecules/XYK/Wallet/XYKWalletPoolList/XYKWalletPoolList.stories.tsx +++ b/src/components/Molecules/XYK/Wallet/XYKWalletPoolList/XYKWalletPoolList.stories.tsx @@ -1,6 +1,6 @@ import { type Meta, type StoryObj } from "@storybook/react"; import { XYKWalletPoolList as XYKWalletPoolListComponent } from "./XYKWalletPoolList"; -import { fn } from "@storybook/test"; +import { storyAction } from "@/utils/functions"; type Story = StoryObj; @@ -16,14 +16,6 @@ export const XYKWalletPoolList: Story = { chain_name: "eth-mainnet", dex_name: "uniswap_v2", wallet_address: "0xfC43f5F9dd45258b3AFf31Bdbe6561D97e8B71de", - actionable_pool: (address: string) => ({ - parent: "button", - parentProps: { - onClick: fn(() => { - console.log(address); - }), - className: "hover:underline", - }, - }), + actionable_pool: (address: string) => storyAction(address), }, }; diff --git a/src/components/Molecules/XYK/Wallet/XYKWalletPositionsList/XYKWalletPositionsList.stories.tsx b/src/components/Molecules/XYK/Wallet/XYKWalletPositionsList/XYKWalletPositionsList.stories.tsx index 1c2460a3..c0e07189 100644 --- a/src/components/Molecules/XYK/Wallet/XYKWalletPositionsList/XYKWalletPositionsList.stories.tsx +++ b/src/components/Molecules/XYK/Wallet/XYKWalletPositionsList/XYKWalletPositionsList.stories.tsx @@ -1,6 +1,6 @@ import { type Meta, type StoryObj } from "@storybook/react"; import { XYKWalletPositionsList as XYKWalletPositionsListComponent } from "./XYKWalletPositionsList"; -import { fn } from "@storybook/test"; +import { storyAction } from "@/utils/functions"; type Story = StoryObj; @@ -16,14 +16,6 @@ export const XYKWalletPositionsList: Story = { chain_name: "eth-mainnet", dex_name: "uniswap_v2", wallet_address: "0xfC43f5F9dd45258b3AFf31Bdbe6561D97e8B71de", - actionable_pool: (address: string) => ({ - parent: "button", - parentProps: { - onClick: fn(() => { - console.log(address); - }), - className: "hover:underline", - }, - }), + actionable_pool: (address: string) => storyAction(address), }, }; diff --git a/src/components/Molecules/XYK/XYKTransactionsList/XYKTransactionsList.stories.tsx b/src/components/Molecules/XYK/XYKTransactionsList/XYKTransactionsList.stories.tsx index 89e0a4fd..c6bd5f31 100644 --- a/src/components/Molecules/XYK/XYKTransactionsList/XYKTransactionsList.stories.tsx +++ b/src/components/Molecules/XYK/XYKTransactionsList/XYKTransactionsList.stories.tsx @@ -1,6 +1,6 @@ import { type Meta, type StoryObj } from "@storybook/react"; import { XYKTransactionsList as XYKTransactionsListComponent } from "./XYKTransactionsList"; -import { fn } from "@storybook/test"; +import { storyAction } from "@/utils/functions"; type Story = StoryObj; @@ -15,32 +15,8 @@ export const XYKTransactionsList: Story = { args: { chain_name: "eth-mainnet", dex_name: "uniswap_v2", - actionable_transaction: (address: string) => ({ - parent: "button", - parentProps: { - onClick: fn(() => { - console.log(address); - }), - className: "hover:underline", - }, - }), - actionable_token_0: (address: string) => ({ - parent: "button", - parentProps: { - onClick: fn(() => { - console.log(address); - }), - className: "hover:underline", - }, - }), - actionable_token_1: (address: string) => ({ - parent: "button", - parentProps: { - onClick: fn(() => { - console.log(address); - }), - className: "hover:underline", - }, - }), + actionable_transaction: (address: string) => storyAction(address), + actionable_token_0: (address: string) => storyAction(address), + actionable_token_1: (address: string) => storyAction(address), }, }; diff --git a/src/components/Organisms/AddressActivityView/AddressActivityView.stories.tsx b/src/components/Organisms/AddressActivityView/AddressActivityView.stories.tsx index ee0bf406..1343f815 100644 --- a/src/components/Organisms/AddressActivityView/AddressActivityView.stories.tsx +++ b/src/components/Organisms/AddressActivityView/AddressActivityView.stories.tsx @@ -1,5 +1,6 @@ import { type Meta, type StoryObj } from "@storybook/react"; import { AddressActivityView as AddressActivityViewComponent } from "./AddressActivityView"; +import { storyAction } from "@/utils/functions"; type Story = StoryObj; @@ -13,5 +14,6 @@ export default meta; export const AddressActivityView: Story = { args: { address: "ganeshswami.eth", + actionable_address: (address: string) => storyAction(address), }, }; diff --git a/src/components/Organisms/AddressActivityView/AddressActivityView.tsx b/src/components/Organisms/AddressActivityView/AddressActivityView.tsx index 1fe76cb0..1d1a482e 100644 --- a/src/components/Organisms/AddressActivityView/AddressActivityView.tsx +++ b/src/components/Organisms/AddressActivityView/AddressActivityView.tsx @@ -13,6 +13,7 @@ import { defaultErrorMessage } from "@/utils/constants/shared.constants"; export const AddressActivityView: React.FC = ({ address, + actionable_address, }) => { const { covalentClient } = useGoldRush(); const [maybeResult, setMaybeResult] = @@ -45,7 +46,10 @@ export const AddressActivityView: React.FC = ({ return (
- + ; @@ -14,5 +15,6 @@ export const NFTCollectionView: Story = { args: { chain_name: "eth-mainnet", collection_address: "0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D", + actionable_address: (address: string) => storyAction(address), }, }; diff --git a/src/components/Organisms/NFTCollectionView/NFTCollectionView.tsx b/src/components/Organisms/NFTCollectionView/NFTCollectionView.tsx index 283b4d5d..cab82d62 100644 --- a/src/components/Organisms/NFTCollectionView/NFTCollectionView.tsx +++ b/src/components/Organisms/NFTCollectionView/NFTCollectionView.tsx @@ -9,10 +9,14 @@ export const NFTCollectionView: React.FC = ({ chain_name, collection_address, page_size = 10, + actionable_address, }) => { return (
- + ; @@ -14,5 +15,6 @@ export const NFTWalletCollectionView: Story = { args: { chain_name: "eth-mainnet", address: "0x1ae705a28f1cca0363b5d709159220aa2fe551de", + actionable_address: (address: string) => storyAction(address), }, }; diff --git a/src/components/Organisms/NFTWalletCollectionView/NFTWalletCollectionView.tsx b/src/components/Organisms/NFTWalletCollectionView/NFTWalletCollectionView.tsx index 7c417c19..33d96757 100644 --- a/src/components/Organisms/NFTWalletCollectionView/NFTWalletCollectionView.tsx +++ b/src/components/Organisms/NFTWalletCollectionView/NFTWalletCollectionView.tsx @@ -13,7 +13,7 @@ import { export const NFTWalletCollectionView: React.FC< NFTWalletCollectionViewProps -> = ({ chain_name, address }) => { +> = ({ chain_name, address, actionable_address }) => { const { covalentClient } = useGoldRush(); const [maybeResult, setMaybeResult] = useState>(None); @@ -43,7 +43,10 @@ export const NFTWalletCollectionView: React.FC< return (
- + ; @@ -15,5 +16,8 @@ export const XYKPoolView: Story = { chain_name: "eth-mainnet", dex_name: "uniswap_v2", pool_address: "0x21b8065d10f73ee2e260e5b47d3344d3ced7596e", + actionable_address: (address: string) => storyAction(address), + actionable_token_0: (address: string) => storyAction(address), + actionable_token_1: (address: string) => storyAction(address), }, }; diff --git a/src/utils/functions/index.ts b/src/utils/functions/index.ts index 6b34a083..624b4aee 100644 --- a/src/utils/functions/index.ts +++ b/src/utils/functions/index.ts @@ -3,6 +3,7 @@ export { actionableWrapper } from "./actionable-wrapper"; export { calculateTimeSeriesGroup } from "./calculate-time-series-group"; export { cn } from "./cn"; export { primaryShades } from "./primary-shades"; +export { storyAction } from "./story-action"; export { stringToColor } from "./string-to-color"; export { timestampParser } from "./timestamp-parser"; export { truncate } from "./truncate"; diff --git a/src/utils/functions/story-action.ts b/src/utils/functions/story-action.ts new file mode 100644 index 00000000..31b93172 --- /dev/null +++ b/src/utils/functions/story-action.ts @@ -0,0 +1,14 @@ +import { fn } from "@storybook/test"; +import { type ActionableType } from "../types/shared.types"; + +export const storyAction = (data: unknown): ActionableType => { + return { + parent: "button", + parentProps: { + onClick: fn(() => { + console.log(data); + }), + className: "hover:underline", + }, + }; +}; diff --git a/src/utils/types/organisms.types.ts b/src/utils/types/organisms.types.ts index f32acc8c..cbb48301 100644 --- a/src/utils/types/organisms.types.ts +++ b/src/utils/types/organisms.types.ts @@ -1,4 +1,5 @@ import { type Chain } from "@covalenthq/client-sdk"; +import { type ActionableType } from "./shared.types"; export interface NFTDetailsViewProps { chain_name: Chain; @@ -10,11 +11,15 @@ export interface XYKPoolViewProps { chain_name: Chain; dex_name: string; pool_address: string; + actionable_token_0?: (address: string) => ActionableType; + actionable_token_1?: (address: string) => ActionableType; + actionable_address?: (address: string) => ActionableType; } export interface NFTWalletCollectionViewProps { chain_name: Chain; address: string; + actionable_address?: (address: string) => ActionableType; } export interface NFTWalletTokenListViewProps { @@ -26,10 +31,12 @@ export interface NFTCollectionViewProps { chain_name: Chain; collection_address: string; page_size?: number; + actionable_address?: (address: string) => ActionableType; } export interface AddressActivityViewProps { address: string; + actionable_address?: (address: string) => ActionableType; } export interface XYKTokenViewProps {