diff --git a/src/components/Molecules/ChainSelector/ChainSelector.stories.tsx b/src/components/Molecules/ChainSelector/ChainSelector.stories.tsx index 80bf8d26..ee43f5e3 100644 --- a/src/components/Molecules/ChainSelector/ChainSelector.stories.tsx +++ b/src/components/Molecules/ChainSelector/ChainSelector.stories.tsx @@ -6,18 +6,17 @@ type Story = StoryObj; const meta: Meta = { title: "Molecules/Chain Selector", component: ChainSelectorComponent, - argTypes: { - onChangeChain: { - control: false, - table: { - disable: true, - }, - }, - }, }; export default meta; export const ChainSelector: Story = { - args: {}, + args: { + chain_options: [ + "eth-mainnet", + "matic-mainnet", + "arbitrum-mainnet", + "solana-mainnet", + ], + }, }; diff --git a/src/components/Molecules/ChainSelector/ChainSelector.tsx b/src/components/Molecules/ChainSelector/ChainSelector.tsx index ad98dd96..b9b4918c 100644 --- a/src/components/Molecules/ChainSelector/ChainSelector.tsx +++ b/src/components/Molecules/ChainSelector/ChainSelector.tsx @@ -11,16 +11,33 @@ import { PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; -import { useState } from "react"; +import { useMemo, useState } from "react"; import { CheckIcon, DoubleArrowDownIcon } from "@radix-ui/react-icons"; import { Button } from "@/components/ui/button"; import { type ChainSelectorProps } from "@/utils/types/molecules.types"; +import { type ChainItem, type Chain } from "@covalenthq/client-sdk"; +import { CommandLoading } from "cmdk"; +import { Skeleton } from "@/components/ui/skeleton"; +import { GRK_SIZES } from "@/utils/constants/shared.constants"; export const ChainSelector: React.FC = ({ + chain_options = [], onChangeChain, }) => { const { chains, selectedChain, setSelectedChain } = useGoldRush(); - const [open, setOpen] = useState(false); + const [open, setOpen] = useState(!false); + + const dropdownChains = useMemo(() => { + if (!chains) { + return null; + } + const chainOptionsSet = new Set(chain_options); + if (chainOptionsSet.size === 0) { + return chains; + } + + return chains.filter(({ name }) => chainOptionsSet.has(name as Chain)); + }, [chains, chain_options]); return ( @@ -40,31 +57,41 @@ export const ChainSelector: React.FC = ({ No chain found. - - {chains?.map((chain) => ( - { - setSelectedChain(chain); - setOpen(false); - if (onChangeChain) { - onChangeChain(chain); - } - }} - > - {chain.label} - - - ))} - + {!dropdownChains ? ( + +
+ + + +
+
+ ) : ( + + {dropdownChains.map((chain) => ( + { + setSelectedChain(chain); + setOpen(false); + if (onChangeChain) { + onChangeChain(chain); + } + }} + > + {chain.label} + + + ))} + + )}
diff --git a/src/utils/types/molecules.types.ts b/src/utils/types/molecules.types.ts index df52599e..512ad5bc 100644 --- a/src/utils/types/molecules.types.ts +++ b/src/utils/types/molecules.types.ts @@ -42,6 +42,7 @@ export interface AddressDetailsProps { } export interface ChainSelectorProps { + chain_options?: Chain[]; onChangeChain?: (chain: ChainItem) => unknown; }