@orderly.network/ui-chain-selector 2.1.0 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js.map +1 -1
  2. package/dist/index.mjs.map +1 -1
  3. package/package.json +7 -7
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/chainSelector.widget.tsx","../src/chainSelector.script.ts","../src/chainSelector.ui.tsx"],"names":["registerSimpleDialog","registerSimpleSheet","useMemo","useCallback","useState","useEffect","useConfig","useStorageChain","useChains","useWalletConnector","useLocalStorage","useAppContext","useOrderlyTheme","KEY","MAX_RECENT_CHAINS","useChainSelectorScript","options","networkId","bridgeLessOnly","setStorageChain","config","_chains","checkChainSupport","setChain","connectedChain","onChainChanged","currentChainId","setCurrentChainId","wrongNetwork","selectChainId","setSelectChainId","getComponentTheme","chains","chain","showTestnet","recentChains","saveRecentChain","useRecentChains","onChainChange","result","changedCallback","isWalletConnected","params","onChainClick","complete","selectedTab","onTabChange","useChainTab","setSelectedTab","tab","recentChainsIds","setRecentChainsIds","id","item","ids","Box","Flex","Text","ChainIcon","Tabs","TabPanel","cn","tv","useTranslation","jsx","jsxs","chainSelectorVariants","ChainSelector","props","isWrongNetwork","variant","t","list","recentList","mainnetList","testnetList","icon","tip","e","RecentChainItem","selected","ChainItem","i18n","ChainSelectorWidget","state","ChainSelectorDialogId","ChainSelectorSheetId"],"mappings":"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","sourcesContent":["import { registerSimpleDialog, registerSimpleSheet } from \"@orderly.network/ui\";\nimport {\n useChainSelectorScript,\n UseChainSelectorScriptOptions,\n} from \"./chainSelector.script\";\nimport { ChainSelector, ChainSelectorProps } from \"./chainSelector.ui\";\nimport { i18n } from \"@orderly.network/i18n\";\n\nexport type ChainSelectorWidgetProps = UseChainSelectorScriptOptions &\n Pick<ChainSelectorProps, \"isWrongNetwork\" | \"variant\" | \"className\">;\n\nexport const ChainSelectorWidget = (props: ChainSelectorWidgetProps) => {\n const state = useChainSelectorScript(props);\n\n return (\n <ChainSelector\n {...state}\n variant={props.variant}\n isWrongNetwork={props.isWrongNetwork}\n />\n );\n};\n\nexport const ChainSelectorDialogId = \"ChainSelectorDialogId\";\nexport const ChainSelectorSheetId = \"ChainSelectorSheetId\";\n\nregisterSimpleDialog(ChainSelectorDialogId, ChainSelectorWidget, {\n size: \"lg\",\n title: () => i18n.t(\"connector.switchNetwork\"),\n variant: \"wide\",\n isWrongNetwork: true,\n});\n\nregisterSimpleSheet(ChainSelectorSheetId, ChainSelectorWidget, {\n title: () => i18n.t(\"connector.switchNetwork\"),\n classNames: {\n content: \"!oui-bg-base-8\",\n body: \"!oui-bg-base-8\",\n },\n variant: \"compact\",\n isWrongNetwork: true,\n});\n","import { useMemo, useCallback, useState, useEffect } from \"react\";\nimport { useConfig, useStorageChain } from \"@orderly.network/hooks\";\nimport {\n useChains,\n useWalletConnector,\n useLocalStorage,\n} from \"@orderly.network/hooks\";\nimport { NetworkId } from \"@orderly.network/types\";\nimport { useAppContext } from \"@orderly.network/react-app\";\nimport { ChainType, TChainItem } from \"./type\";\nimport { useOrderlyTheme } from \"@orderly.network/ui\";\n\nconst KEY = \"orderly_selected_chains\";\nconst MAX_RECENT_CHAINS = 6;\n\nexport type UseChainSelectorScriptReturn = ReturnType<\n typeof useChainSelectorScript\n>;\n\nexport type UseChainSelectorScriptOptions = {\n networkId?: NetworkId;\n bridgeLessOnly?: boolean;\n close?: () => void;\n resolve?: (isSuccess: boolean) => void;\n reject?: () => void;\n onChainChangeBefore?: (\n chainId: number,\n state: {\n isTestnet: boolean;\n }\n ) => void;\n onChainChangeAfter?: (\n chainId: number,\n state: {\n isTestnet: boolean;\n isWalletConnected: boolean;\n }\n ) => void;\n};\n\nexport const useChainSelectorScript = (\n options: UseChainSelectorScriptOptions\n) => {\n const { networkId, bridgeLessOnly } = options || {};\n const { setStorageChain } = useStorageChain();\n\n const config = useConfig();\n const [_chains, { checkChainSupport }] = useChains();\n const { setChain, connectedChain } = useWalletConnector();\n\n const { onChainChanged, currentChainId, setCurrentChainId, wrongNetwork } =\n useAppContext();\n\n const [selectChainId, setSelectChainId] = useState<number | undefined>(\n currentChainId\n );\n\n const { getComponentTheme } = useOrderlyTheme();\n\n const chains = useMemo(() => {\n const bridgeLessChains = bridgeLessOnly\n ? _chains.mainnet.filter((chain) => chain.network_infos.bridgeless)\n : _chains.mainnet;\n\n return {\n mainnet: bridgeLessChains.map((chain) => ({\n name: chain.network_infos.name,\n id: chain.network_infos.chain_id,\n lowestFee: chain.network_infos.bridgeless,\n isTestnet: false,\n })),\n testnet: _chains.testnet.map((chain) => ({\n name: chain.network_infos.name,\n id: chain.network_infos.chain_id,\n lowestFee: chain.network_infos.bridgeless,\n isTestnet: true,\n })),\n };\n }, [_chains, bridgeLessOnly]);\n\n const showTestnet = useMemo(() => {\n const chainSelectorOverrides = getComponentTheme(\"chainSelector\", {\n showTestnet: true,\n });\n\n if (\n chainSelectorOverrides.showTestnet === false ||\n !chains.testnet.length\n ) {\n return false;\n }\n\n return true;\n }, [chains.testnet]);\n\n const { recentChains, saveRecentChain } = useRecentChains(chains);\n\n const onChainChange = async (chain: TChainItem) => {\n if (connectedChain) {\n const result = await setChain({ chainId: chain.id });\n\n if (!result) return result;\n\n return {\n result,\n wrongNetwork: !checkChainSupport(chain.id, config.get(\"networkId\")),\n chainId: chain.id,\n };\n }\n\n setStorageChain(chain.id);\n\n setCurrentChainId(chain.id);\n return {\n result: true,\n wrongNetwork: false,\n chainId: chain.id,\n };\n // return Promise.reject(\"No connected chain\");\n };\n\n const changedCallback = (chain: TChainItem, isWalletConnected: boolean) => {\n const params = {\n isTestnet: chain.isTestnet,\n isWalletConnected,\n };\n options.onChainChangeAfter?.(chain.id, params);\n onChainChanged?.(chain.id, params);\n };\n\n const onChainClick = async (chain: TChainItem) => {\n setSelectChainId(chain.id);\n options.onChainChangeBefore?.(chain.id, { isTestnet: chain.isTestnet });\n try {\n const complete = await onChainChange?.(chain);\n\n if (complete) {\n options.resolve?.(complete);\n options.close?.();\n saveRecentChain(chain);\n changedCallback(chain, true);\n } else {\n setSelectChainId(undefined);\n changedCallback(chain, false);\n }\n } catch (err) {\n changedCallback(chain, false);\n }\n };\n\n const { selectedTab, onTabChange } = useChainTab(\n chains,\n currentChainId,\n wrongNetwork,\n showTestnet\n );\n\n return {\n recentChains,\n chains,\n selectChainId,\n onChainClick,\n selectedTab,\n onTabChange,\n showTestnet,\n };\n};\n\nfunction useChainTab(\n chains: Record<NetworkId, TChainItem[]>,\n currentChainId?: number,\n wrongNetwork?: boolean,\n showTestnet?: boolean\n) {\n const [selectedTab, setSelectedTab] = useState<ChainType>(ChainType.Mainnet);\n\n const onTabChange = (tab: ChainType) => {\n setSelectedTab(tab);\n };\n\n useEffect(() => {\n if (!showTestnet) {\n setSelectedTab(ChainType.Mainnet);\n return;\n }\n\n if (currentChainId) {\n const isMainnet = chains.mainnet?.some(\n (chain) => chain.id === currentChainId\n );\n if (isMainnet) {\n setSelectedTab(wrongNetwork ? ChainType.Testnet : ChainType.Mainnet);\n return;\n }\n\n const isTestnet = chains.testnet?.some(\n (chain) => chain.id === currentChainId\n );\n\n if (isTestnet) {\n setSelectedTab(wrongNetwork ? ChainType.Mainnet : ChainType.Testnet);\n return;\n }\n }\n }, [currentChainId, chains, wrongNetwork, showTestnet]);\n\n return { selectedTab, onTabChange };\n}\n\nfunction useRecentChains(chains: Record<NetworkId, TChainItem[]>) {\n const [recentChainsIds, setRecentChainsIds] = useLocalStorage<string[]>(\n KEY,\n []\n );\n\n const recentChains = useMemo<TChainItem[]>(() => {\n return recentChainsIds\n ?.map((id: string) =>\n chains.mainnet?.find((item) => item.id === parseInt(id))\n )\n .filter((chains: TChainItem) => !!chains);\n }, [chains, recentChainsIds]);\n\n const saveRecentChain = useCallback(\n (chain: TChainItem) => {\n // only mainnet can save chain id to local storage\n if (chain.isTestnet) {\n return;\n }\n let ids = recentChainsIds?.filter((id: number) => id !== chain.id);\n ids = [chain.id, ...ids].slice(0, MAX_RECENT_CHAINS);\n setRecentChainsIds(ids);\n },\n [recentChainsIds]\n );\n\n return { recentChains, saveRecentChain };\n}\n","import {\n Box,\n Flex,\n Text,\n ChainIcon,\n Tabs,\n TabPanel,\n cn,\n tv,\n} from \"@orderly.network/ui\";\nimport { ChainType, TChainItem } from \"./type\";\nimport { UseChainSelectorScriptReturn } from \"./chainSelector.script\";\nimport { useTranslation } from \"@orderly.network/i18n\";\n\nexport type ChainSelectorProps = {\n isWrongNetwork?: boolean;\n /**\n * wide: This represents the wide screen (desktop) UI mode\n * compact: This indicates a compact (mobile) UI pattern.\n */\n variant?: \"wide\" | \"compact\";\n className?: string;\n} & UseChainSelectorScriptReturn;\n\nconst chainSelectorVariants = tv({\n slots: {\n icon: \"\",\n list: \"oui-grid oui-grid-cols-1 oui-gap-1\",\n mainnetList: '\"',\n testnetList: '\"',\n recentList: \"\",\n item: \"oui-w-full oui-rounded-md\",\n tip: \"oui-text-center\",\n },\n variants: {\n variant: {\n compact: {\n icon: \"oui-w-6 oui-h-6\",\n list: \"oui-bg-base-9 oui-rounded-lg oui-p-1\",\n mainnetList: \"oui-grid-cols-2 oui-mt-4\",\n testnetList: \"oui-grid-cols-1 oui-mt-4\",\n recentList: \"oui-mt-4\",\n item: \"oui-bg-base-6 hover:oui-bg-base-7\",\n tip: \"oui-pt-6\",\n },\n wide: {\n icon: \"oui-w-[18px] oui-h-[18px]\",\n mainnetList: \"oui-grid-cols-3 oui-mt-3\",\n testnetList: \"oui-grid-cols-2 oui-mt-3\",\n recentList: \"oui-mt-3\",\n item: \"oui-bg-base-5 hover:oui-bg-base-6\",\n tip: \"oui-pt-8\",\n },\n },\n selected: {\n true: {\n item: \"\",\n },\n false: { item: \"oui-bg-transparent\" },\n },\n },\n compoundVariants: [\n {\n variant: \"compact\",\n selected: true,\n className: {\n item: \"hover:oui-bg-base-6\",\n },\n },\n {\n variant: \"wide\",\n selected: true,\n className: {\n item: \"hover:oui-bg-base-5\",\n },\n },\n ],\n defaultVariants: {\n variant: \"wide\",\n selected: false,\n },\n});\n\n//------------------ ChainSelector start ------------------\nexport const ChainSelector = (props: ChainSelectorProps) => {\n const { isWrongNetwork, variant = \"wide\" } = props;\n const { t } = useTranslation();\n const { list, recentList, mainnetList, testnetList, icon, item, tip } =\n chainSelectorVariants({ variant });\n\n return (\n <Box className={cn(\"oui-font-semibold\", props.className)}>\n <Tabs\n value={props.selectedTab}\n variant=\"contained\"\n size={variant === \"wide\" ? \"md\" : \"lg\"}\n onValueChange={(e) => props.onTabChange(e as ChainType)}\n >\n <TabPanel value={ChainType.Mainnet} title={t(\"connector.mainnet\")}>\n {!!props.recentChains?.length && (\n <Flex gap={2} className={recentList()}>\n {props.recentChains?.map((item) => {\n return (\n <RecentChainItem\n key={item.id}\n item={item}\n onClick={() => props.onChainClick(item)}\n iconClassName={icon()}\n />\n );\n })}\n </Flex>\n )}\n\n <Box r=\"2xl\" className={cn(list(), mainnetList())}>\n {props.chains.mainnet?.map((chain) => {\n const selected = props.selectChainId === chain.id;\n return (\n <ChainItem\n key={chain.id}\n selected={selected}\n item={chain}\n onClick={() => props.onChainClick(chain)}\n className={item({ selected })}\n />\n );\n })}\n </Box>\n </TabPanel>\n\n {props.showTestnet && (\n <TabPanel value={ChainType.Testnet} title={t(\"connector.testnet\")}>\n <Box r=\"2xl\" className={cn(list(), testnetList())}>\n {props.chains.testnet?.map((chain) => {\n const selected = props.selectChainId === chain.id;\n return (\n <ChainItem\n key={chain.id}\n selected={selected}\n item={chain}\n onClick={() => props.onChainClick(chain)}\n className={item({ selected })}\n />\n );\n })}\n </Box>\n </TabPanel>\n )}\n </Tabs>\n\n {isWrongNetwork && (\n <Box className={tip()}>\n <Text color=\"warning\" size=\"xs\">\n {t(\"connector.wrongNetwork.tooltip\")}\n </Text>\n </Box>\n )}\n </Box>\n );\n};\n// ------------------ ChainSelector end ------------------\n\n// ------------------ ChainItem start ------------------\nexport const ChainItem = (props: {\n selected: boolean;\n item: TChainItem;\n onClick?: () => void;\n className?: string;\n}) => {\n const { item } = props;\n return (\n <button className={props.className} onClick={props.onClick}>\n <Flex justify=\"between\" className=\"oui-py-2.5\" px={3}>\n <Flex itemAlign=\"center\" width=\"100%\" className=\"oui-gap-x-[6px]\">\n <ChainIcon chainId={item.id} size=\"xs\" />\n <Text size=\"2xs\">{item.name}</Text>\n </Flex>\n {props.selected && (\n <Box gradient=\"brand\" r=\"full\" width={4} height={4} />\n )}\n </Flex>\n </button>\n );\n};\n\n// ------------------ Recent ChainItem start ------------------\nexport const RecentChainItem = (props: {\n item: TChainItem;\n onClick?: () => void;\n iconClassName?: string;\n}) => {\n return (\n <button\n className=\"oui-border oui-border-line-12 oui-rounded-lg hover:oui-border-primary-light\"\n onClick={props.onClick}\n >\n <Flex itemAlign=\"center\" p={2}>\n <ChainIcon chainId={props.item.id} className={props.iconClassName} />\n </Flex>\n </button>\n );\n};\n"]}
1
+ {"version":3,"sources":["../src/chainSelector.widget.tsx","../src/chainSelector.script.ts","../src/chainSelector.ui.tsx"],"names":["registerSimpleDialog","registerSimpleSheet","useMemo","useCallback","useState","useEffect","useConfig","useStorageChain","useChains","useWalletConnector","useLocalStorage","useAppContext","useOrderlyTheme","KEY","MAX_RECENT_CHAINS","useChainSelectorScript","options","networkId","bridgeLessOnly","setStorageChain","config","_chains","checkChainSupport","setChain","connectedChain","onChainChanged","currentChainId","setCurrentChainId","wrongNetwork","selectChainId","setSelectChainId","getComponentTheme","chains","chain","showTestnet","recentChains","saveRecentChain","useRecentChains","onChainChange","result","changedCallback","isWalletConnected","params","onChainClick","complete","selectedTab","onTabChange","useChainTab","setSelectedTab","tab","recentChainsIds","setRecentChainsIds","id","item","ids","Box","Flex","Text","ChainIcon","Tabs","TabPanel","cn","tv","useTranslation","jsx","jsxs","chainSelectorVariants","ChainSelector","props","isWrongNetwork","variant","t","list","recentList","mainnetList","testnetList","icon","tip","e","RecentChainItem","selected","ChainItem","i18n","ChainSelectorWidget","state","ChainSelectorDialogId","ChainSelectorSheetId"],"mappings":"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","sourcesContent":["import { registerSimpleDialog, registerSimpleSheet } from \"@orderly.network/ui\";\nimport {\n useChainSelectorScript,\n UseChainSelectorScriptOptions,\n} from \"./chainSelector.script\";\nimport { ChainSelector, ChainSelectorProps } from \"./chainSelector.ui\";\nimport { i18n } from \"@orderly.network/i18n\";\n\nexport type ChainSelectorWidgetProps = UseChainSelectorScriptOptions &\n Pick<ChainSelectorProps, \"isWrongNetwork\" | \"variant\" | \"className\">;\n\nexport const ChainSelectorWidget = (props: ChainSelectorWidgetProps) => {\n const state = useChainSelectorScript(props);\n\n return (\n <ChainSelector\n {...state}\n variant={props.variant}\n isWrongNetwork={props.isWrongNetwork}\n />\n );\n};\n\nexport const ChainSelectorDialogId = \"ChainSelectorDialogId\";\nexport const ChainSelectorSheetId = \"ChainSelectorSheetId\";\n\nregisterSimpleDialog(ChainSelectorDialogId, ChainSelectorWidget, {\n size: \"lg\",\n title: () => i18n.t(\"connector.switchNetwork\"),\n variant: \"wide\",\n isWrongNetwork: true,\n});\n\nregisterSimpleSheet(ChainSelectorSheetId, ChainSelectorWidget, {\n title: () => i18n.t(\"connector.switchNetwork\"),\n classNames: {\n content: \"!oui-bg-base-8\",\n body: \"!oui-bg-base-8\",\n },\n variant: \"compact\",\n isWrongNetwork: true,\n});\n","import { useMemo, useCallback, useState, useEffect } from \"react\";\nimport { useConfig, useStorageChain } from \"@orderly.network/hooks\";\nimport {\n useChains,\n useWalletConnector,\n useLocalStorage,\n} from \"@orderly.network/hooks\";\nimport { NetworkId } from \"@orderly.network/types\";\nimport { useAppContext } from \"@orderly.network/react-app\";\nimport { ChainType, TChainItem } from \"./type\";\nimport { useOrderlyTheme } from \"@orderly.network/ui\";\n\nconst KEY = \"orderly_selected_chains\";\nconst MAX_RECENT_CHAINS = 6;\n\nexport type UseChainSelectorScriptReturn = ReturnType<\n typeof useChainSelectorScript\n>;\n\nexport type UseChainSelectorScriptOptions = {\n networkId?: NetworkId;\n bridgeLessOnly?: boolean;\n close?: () => void;\n resolve?: (isSuccess: boolean) => void;\n reject?: () => void;\n onChainChangeBefore?: (\n chainId: number,\n state: {\n isTestnet: boolean;\n }\n ) => void;\n onChainChangeAfter?: (\n chainId: number,\n state: {\n isTestnet: boolean;\n isWalletConnected: boolean;\n }\n ) => void;\n};\n\nexport const useChainSelectorScript = (\n options: UseChainSelectorScriptOptions\n) => {\n const { networkId, bridgeLessOnly } = options || {};\n const { setStorageChain } = useStorageChain();\n\n const config = useConfig();\n const [_chains, { checkChainSupport }] = useChains();\n const { setChain, connectedChain } = useWalletConnector();\n\n const { onChainChanged, currentChainId, setCurrentChainId, wrongNetwork } =\n useAppContext();\n\n const [selectChainId, setSelectChainId] = useState<number | undefined>(\n currentChainId\n );\n\n const { getComponentTheme } = useOrderlyTheme();\n\n const chains = useMemo(() => {\n const bridgeLessChains = bridgeLessOnly\n ? _chains.mainnet.filter((chain) => chain.network_infos.bridgeless)\n : _chains.mainnet;\n\n return {\n mainnet: bridgeLessChains.map((chain) => ({\n name: chain.network_infos.name,\n id: chain.network_infos.chain_id,\n lowestFee: chain.network_infos.bridgeless,\n isTestnet: false,\n })),\n testnet: _chains.testnet.map((chain) => ({\n name: chain.network_infos.name,\n id: chain.network_infos.chain_id,\n lowestFee: chain.network_infos.bridgeless,\n isTestnet: true,\n })),\n };\n }, [_chains, bridgeLessOnly]);\n\n const showTestnet = useMemo(() => {\n const chainSelectorOverrides = getComponentTheme(\"chainSelector\", {\n showTestnet: true,\n });\n\n if (\n chainSelectorOverrides.showTestnet === false ||\n !chains.testnet.length\n ) {\n return false;\n }\n\n return true;\n }, [chains.testnet]);\n\n const { recentChains, saveRecentChain } = useRecentChains(chains);\n\n const onChainChange = async (chain: TChainItem) => {\n if (connectedChain) {\n const result = await setChain({ chainId: chain.id });\n\n if (!result) return result;\n\n return {\n result,\n wrongNetwork: !checkChainSupport(chain.id, config.get(\"networkId\")),\n chainId: chain.id,\n };\n }\n\n setStorageChain(chain.id);\n\n setCurrentChainId(chain.id);\n return {\n result: true,\n wrongNetwork: false,\n chainId: chain.id,\n };\n // return Promise.reject(\"No connected chain\");\n };\n\n const changedCallback = (chain: TChainItem, isWalletConnected: boolean) => {\n const params = {\n isTestnet: chain.isTestnet,\n isWalletConnected,\n };\n options.onChainChangeAfter?.(chain.id, params);\n onChainChanged?.(chain.id, params);\n };\n\n const onChainClick = async (chain: TChainItem) => {\n setSelectChainId(chain.id);\n options.onChainChangeBefore?.(chain.id, { isTestnet: chain.isTestnet });\n try {\n const complete = await onChainChange?.(chain);\n\n if (complete) {\n options.resolve?.(complete);\n options.close?.();\n saveRecentChain(chain);\n changedCallback(chain, true);\n } else {\n setSelectChainId(undefined);\n changedCallback(chain, false);\n }\n } catch (err) {\n changedCallback(chain, false);\n }\n };\n\n const { selectedTab, onTabChange } = useChainTab(\n chains,\n currentChainId,\n wrongNetwork,\n showTestnet\n );\n\n return {\n recentChains,\n chains,\n selectChainId,\n onChainClick,\n selectedTab,\n onTabChange,\n showTestnet,\n };\n};\n\nfunction useChainTab(\n chains: Record<NetworkId, TChainItem[]>,\n currentChainId?: number,\n wrongNetwork?: boolean,\n showTestnet?: boolean\n) {\n const [selectedTab, setSelectedTab] = useState<ChainType>(ChainType.Mainnet);\n\n const onTabChange = (tab: ChainType) => {\n setSelectedTab(tab);\n };\n\n useEffect(() => {\n if (!showTestnet) {\n setSelectedTab(ChainType.Mainnet);\n return;\n }\n\n if (currentChainId) {\n const isMainnet = chains.mainnet?.some(\n (chain) => chain.id === currentChainId\n );\n if (isMainnet) {\n setSelectedTab(wrongNetwork ? ChainType.Testnet : ChainType.Mainnet);\n return;\n }\n\n const isTestnet = chains.testnet?.some(\n (chain) => chain.id === currentChainId\n );\n if (isTestnet) {\n setSelectedTab(wrongNetwork ? ChainType.Mainnet : ChainType.Testnet);\n return;\n }\n }\n }, [currentChainId, chains, wrongNetwork, showTestnet]);\n\n return { selectedTab, onTabChange };\n}\n\nfunction useRecentChains(chains: Record<NetworkId, TChainItem[]>) {\n const [recentChainsIds, setRecentChainsIds] = useLocalStorage<string[]>(\n KEY,\n []\n );\n\n const recentChains = useMemo<TChainItem[]>(() => {\n return recentChainsIds\n ?.map((id: string) =>\n chains.mainnet?.find((item) => item.id === parseInt(id))\n )\n .filter((chains: TChainItem) => !!chains);\n }, [chains, recentChainsIds]);\n\n const saveRecentChain = useCallback(\n (chain: TChainItem) => {\n // only mainnet can save chain id to local storage\n if (chain.isTestnet) {\n return;\n }\n let ids = recentChainsIds?.filter((id: number) => id !== chain.id);\n ids = [chain.id, ...ids].slice(0, MAX_RECENT_CHAINS);\n setRecentChainsIds(ids);\n },\n [recentChainsIds]\n );\n\n return { recentChains, saveRecentChain };\n}\n","import {\n Box,\n Flex,\n Text,\n ChainIcon,\n Tabs,\n TabPanel,\n cn,\n tv,\n} from \"@orderly.network/ui\";\nimport { ChainType, TChainItem } from \"./type\";\nimport { UseChainSelectorScriptReturn } from \"./chainSelector.script\";\nimport { useTranslation } from \"@orderly.network/i18n\";\n\nexport type ChainSelectorProps = {\n isWrongNetwork?: boolean;\n /**\n * wide: This represents the wide screen (desktop) UI mode\n * compact: This indicates a compact (mobile) UI pattern.\n */\n variant?: \"wide\" | \"compact\";\n className?: string;\n} & UseChainSelectorScriptReturn;\n\nconst chainSelectorVariants = tv({\n slots: {\n icon: \"\",\n list: \"oui-grid oui-grid-cols-1 oui-gap-1\",\n mainnetList: '\"',\n testnetList: '\"',\n recentList: \"\",\n item: \"oui-w-full oui-rounded-md\",\n tip: \"oui-text-center\",\n },\n variants: {\n variant: {\n compact: {\n icon: \"oui-w-6 oui-h-6\",\n list: \"oui-bg-base-9 oui-rounded-lg oui-p-1\",\n mainnetList: \"oui-grid-cols-2 oui-mt-4\",\n testnetList: \"oui-grid-cols-1 oui-mt-4\",\n recentList: \"oui-mt-4\",\n item: \"oui-bg-base-6 hover:oui-bg-base-7\",\n tip: \"oui-pt-6\",\n },\n wide: {\n icon: \"oui-w-[18px] oui-h-[18px]\",\n mainnetList: \"oui-grid-cols-3 oui-mt-3\",\n testnetList: \"oui-grid-cols-2 oui-mt-3\",\n recentList: \"oui-mt-3\",\n item: \"oui-bg-base-5 hover:oui-bg-base-6\",\n tip: \"oui-pt-8\",\n },\n },\n selected: {\n true: {\n item: \"\",\n },\n false: { item: \"oui-bg-transparent\" },\n },\n },\n compoundVariants: [\n {\n variant: \"compact\",\n selected: true,\n className: {\n item: \"hover:oui-bg-base-6\",\n },\n },\n {\n variant: \"wide\",\n selected: true,\n className: {\n item: \"hover:oui-bg-base-5\",\n },\n },\n ],\n defaultVariants: {\n variant: \"wide\",\n selected: false,\n },\n});\n\n//------------------ ChainSelector start ------------------\nexport const ChainSelector = (props: ChainSelectorProps) => {\n const { isWrongNetwork, variant = \"wide\" } = props;\n const { t } = useTranslation();\n const { list, recentList, mainnetList, testnetList, icon, item, tip } =\n chainSelectorVariants({ variant });\n\n return (\n <Box className={cn(\"oui-font-semibold\", props.className)}>\n <Tabs\n value={props.selectedTab}\n variant=\"contained\"\n size={variant === \"wide\" ? \"md\" : \"lg\"}\n onValueChange={(e) => props.onTabChange(e as ChainType)}\n >\n <TabPanel value={ChainType.Mainnet} title={t(\"connector.mainnet\")}>\n {!!props.recentChains?.length && (\n <Flex gap={2} className={recentList()}>\n {props.recentChains?.map((item) => {\n return (\n <RecentChainItem\n key={item.id}\n item={item}\n onClick={() => props.onChainClick(item)}\n iconClassName={icon()}\n />\n );\n })}\n </Flex>\n )}\n\n <Box r=\"2xl\" className={cn(list(), mainnetList())}>\n {props.chains.mainnet?.map((chain) => {\n const selected = props.selectChainId === chain.id;\n return (\n <ChainItem\n key={chain.id}\n selected={selected}\n item={chain}\n onClick={() => props.onChainClick(chain)}\n className={item({ selected })}\n />\n );\n })}\n </Box>\n </TabPanel>\n\n {props.showTestnet && (\n <TabPanel value={ChainType.Testnet} title={t(\"connector.testnet\")}>\n <Box r=\"2xl\" className={cn(list(), testnetList())}>\n {props.chains.testnet?.map((chain) => {\n const selected = props.selectChainId === chain.id;\n return (\n <ChainItem\n key={chain.id}\n selected={selected}\n item={chain}\n onClick={() => props.onChainClick(chain)}\n className={item({ selected })}\n />\n );\n })}\n </Box>\n </TabPanel>\n )}\n </Tabs>\n\n {isWrongNetwork && (\n <Box className={tip()}>\n <Text color=\"warning\" size=\"xs\">\n {t(\"connector.wrongNetwork.tooltip\")}\n </Text>\n </Box>\n )}\n </Box>\n );\n};\n// ------------------ ChainSelector end ------------------\n\n// ------------------ ChainItem start ------------------\nexport const ChainItem = (props: {\n selected: boolean;\n item: TChainItem;\n onClick?: () => void;\n className?: string;\n}) => {\n const { item } = props;\n return (\n <button className={props.className} onClick={props.onClick}>\n <Flex justify=\"between\" className=\"oui-py-2.5\" px={3}>\n <Flex itemAlign=\"center\" width=\"100%\" className=\"oui-gap-x-[6px]\">\n <ChainIcon chainId={item.id} size=\"xs\" />\n <Text size=\"2xs\">{item.name}</Text>\n </Flex>\n {props.selected && (\n <Box gradient=\"brand\" r=\"full\" width={4} height={4} />\n )}\n </Flex>\n </button>\n );\n};\n\n// ------------------ Recent ChainItem start ------------------\nexport const RecentChainItem = (props: {\n item: TChainItem;\n onClick?: () => void;\n iconClassName?: string;\n}) => {\n return (\n <button\n className=\"oui-border oui-border-line-12 oui-rounded-lg hover:oui-border-primary-light\"\n onClick={props.onClick}\n >\n <Flex itemAlign=\"center\" p={2}>\n <ChainIcon chainId={props.item.id} className={props.iconClassName} />\n </Flex>\n </button>\n );\n};\n"]}
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/chainSelector.widget.tsx","../src/chainSelector.script.ts","../src/chainSelector.ui.tsx"],"names":["registerSimpleDialog","registerSimpleSheet","useMemo","useCallback","useState","useEffect","useConfig","useStorageChain","useChains","useWalletConnector","useLocalStorage","useAppContext","useOrderlyTheme","KEY","MAX_RECENT_CHAINS","useChainSelectorScript","options","networkId","bridgeLessOnly","setStorageChain","config","_chains","checkChainSupport","setChain","connectedChain","onChainChanged","currentChainId","setCurrentChainId","wrongNetwork","selectChainId","setSelectChainId","getComponentTheme","chains","chain","showTestnet","recentChains","saveRecentChain","useRecentChains","onChainChange","result","changedCallback","isWalletConnected","params","onChainClick","complete","selectedTab","onTabChange","useChainTab","setSelectedTab","tab","recentChainsIds","setRecentChainsIds","id","item","ids","Box","Flex","Text","ChainIcon","Tabs","TabPanel","cn","tv","useTranslation","jsx","jsxs","chainSelectorVariants","ChainSelector","props","isWrongNetwork","variant","t","list","recentList","mainnetList","testnetList","icon","tip","e","RecentChainItem","selected","ChainItem","i18n","ChainSelectorWidget","state","ChainSelectorDialogId","ChainSelectorSheetId"],"mappings":"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","sourcesContent":["import { registerSimpleDialog, registerSimpleSheet } from \"@orderly.network/ui\";\nimport {\n useChainSelectorScript,\n UseChainSelectorScriptOptions,\n} from \"./chainSelector.script\";\nimport { ChainSelector, ChainSelectorProps } from \"./chainSelector.ui\";\nimport { i18n } from \"@orderly.network/i18n\";\n\nexport type ChainSelectorWidgetProps = UseChainSelectorScriptOptions &\n Pick<ChainSelectorProps, \"isWrongNetwork\" | \"variant\" | \"className\">;\n\nexport const ChainSelectorWidget = (props: ChainSelectorWidgetProps) => {\n const state = useChainSelectorScript(props);\n\n return (\n <ChainSelector\n {...state}\n variant={props.variant}\n isWrongNetwork={props.isWrongNetwork}\n />\n );\n};\n\nexport const ChainSelectorDialogId = \"ChainSelectorDialogId\";\nexport const ChainSelectorSheetId = \"ChainSelectorSheetId\";\n\nregisterSimpleDialog(ChainSelectorDialogId, ChainSelectorWidget, {\n size: \"lg\",\n title: () => i18n.t(\"connector.switchNetwork\"),\n variant: \"wide\",\n isWrongNetwork: true,\n});\n\nregisterSimpleSheet(ChainSelectorSheetId, ChainSelectorWidget, {\n title: () => i18n.t(\"connector.switchNetwork\"),\n classNames: {\n content: \"!oui-bg-base-8\",\n body: \"!oui-bg-base-8\",\n },\n variant: \"compact\",\n isWrongNetwork: true,\n});\n","import { useMemo, useCallback, useState, useEffect } from \"react\";\nimport { useConfig, useStorageChain } from \"@orderly.network/hooks\";\nimport {\n useChains,\n useWalletConnector,\n useLocalStorage,\n} from \"@orderly.network/hooks\";\nimport { NetworkId } from \"@orderly.network/types\";\nimport { useAppContext } from \"@orderly.network/react-app\";\nimport { ChainType, TChainItem } from \"./type\";\nimport { useOrderlyTheme } from \"@orderly.network/ui\";\n\nconst KEY = \"orderly_selected_chains\";\nconst MAX_RECENT_CHAINS = 6;\n\nexport type UseChainSelectorScriptReturn = ReturnType<\n typeof useChainSelectorScript\n>;\n\nexport type UseChainSelectorScriptOptions = {\n networkId?: NetworkId;\n bridgeLessOnly?: boolean;\n close?: () => void;\n resolve?: (isSuccess: boolean) => void;\n reject?: () => void;\n onChainChangeBefore?: (\n chainId: number,\n state: {\n isTestnet: boolean;\n }\n ) => void;\n onChainChangeAfter?: (\n chainId: number,\n state: {\n isTestnet: boolean;\n isWalletConnected: boolean;\n }\n ) => void;\n};\n\nexport const useChainSelectorScript = (\n options: UseChainSelectorScriptOptions\n) => {\n const { networkId, bridgeLessOnly } = options || {};\n const { setStorageChain } = useStorageChain();\n\n const config = useConfig();\n const [_chains, { checkChainSupport }] = useChains();\n const { setChain, connectedChain } = useWalletConnector();\n\n const { onChainChanged, currentChainId, setCurrentChainId, wrongNetwork } =\n useAppContext();\n\n const [selectChainId, setSelectChainId] = useState<number | undefined>(\n currentChainId\n );\n\n const { getComponentTheme } = useOrderlyTheme();\n\n const chains = useMemo(() => {\n const bridgeLessChains = bridgeLessOnly\n ? _chains.mainnet.filter((chain) => chain.network_infos.bridgeless)\n : _chains.mainnet;\n\n return {\n mainnet: bridgeLessChains.map((chain) => ({\n name: chain.network_infos.name,\n id: chain.network_infos.chain_id,\n lowestFee: chain.network_infos.bridgeless,\n isTestnet: false,\n })),\n testnet: _chains.testnet.map((chain) => ({\n name: chain.network_infos.name,\n id: chain.network_infos.chain_id,\n lowestFee: chain.network_infos.bridgeless,\n isTestnet: true,\n })),\n };\n }, [_chains, bridgeLessOnly]);\n\n const showTestnet = useMemo(() => {\n const chainSelectorOverrides = getComponentTheme(\"chainSelector\", {\n showTestnet: true,\n });\n\n if (\n chainSelectorOverrides.showTestnet === false ||\n !chains.testnet.length\n ) {\n return false;\n }\n\n return true;\n }, [chains.testnet]);\n\n const { recentChains, saveRecentChain } = useRecentChains(chains);\n\n const onChainChange = async (chain: TChainItem) => {\n if (connectedChain) {\n const result = await setChain({ chainId: chain.id });\n\n if (!result) return result;\n\n return {\n result,\n wrongNetwork: !checkChainSupport(chain.id, config.get(\"networkId\")),\n chainId: chain.id,\n };\n }\n\n setStorageChain(chain.id);\n\n setCurrentChainId(chain.id);\n return {\n result: true,\n wrongNetwork: false,\n chainId: chain.id,\n };\n // return Promise.reject(\"No connected chain\");\n };\n\n const changedCallback = (chain: TChainItem, isWalletConnected: boolean) => {\n const params = {\n isTestnet: chain.isTestnet,\n isWalletConnected,\n };\n options.onChainChangeAfter?.(chain.id, params);\n onChainChanged?.(chain.id, params);\n };\n\n const onChainClick = async (chain: TChainItem) => {\n setSelectChainId(chain.id);\n options.onChainChangeBefore?.(chain.id, { isTestnet: chain.isTestnet });\n try {\n const complete = await onChainChange?.(chain);\n\n if (complete) {\n options.resolve?.(complete);\n options.close?.();\n saveRecentChain(chain);\n changedCallback(chain, true);\n } else {\n setSelectChainId(undefined);\n changedCallback(chain, false);\n }\n } catch (err) {\n changedCallback(chain, false);\n }\n };\n\n const { selectedTab, onTabChange } = useChainTab(\n chains,\n currentChainId,\n wrongNetwork,\n showTestnet\n );\n\n return {\n recentChains,\n chains,\n selectChainId,\n onChainClick,\n selectedTab,\n onTabChange,\n showTestnet,\n };\n};\n\nfunction useChainTab(\n chains: Record<NetworkId, TChainItem[]>,\n currentChainId?: number,\n wrongNetwork?: boolean,\n showTestnet?: boolean\n) {\n const [selectedTab, setSelectedTab] = useState<ChainType>(ChainType.Mainnet);\n\n const onTabChange = (tab: ChainType) => {\n setSelectedTab(tab);\n };\n\n useEffect(() => {\n if (!showTestnet) {\n setSelectedTab(ChainType.Mainnet);\n return;\n }\n\n if (currentChainId) {\n const isMainnet = chains.mainnet?.some(\n (chain) => chain.id === currentChainId\n );\n if (isMainnet) {\n setSelectedTab(wrongNetwork ? ChainType.Testnet : ChainType.Mainnet);\n return;\n }\n\n const isTestnet = chains.testnet?.some(\n (chain) => chain.id === currentChainId\n );\n\n if (isTestnet) {\n setSelectedTab(wrongNetwork ? ChainType.Mainnet : ChainType.Testnet);\n return;\n }\n }\n }, [currentChainId, chains, wrongNetwork, showTestnet]);\n\n return { selectedTab, onTabChange };\n}\n\nfunction useRecentChains(chains: Record<NetworkId, TChainItem[]>) {\n const [recentChainsIds, setRecentChainsIds] = useLocalStorage<string[]>(\n KEY,\n []\n );\n\n const recentChains = useMemo<TChainItem[]>(() => {\n return recentChainsIds\n ?.map((id: string) =>\n chains.mainnet?.find((item) => item.id === parseInt(id))\n )\n .filter((chains: TChainItem) => !!chains);\n }, [chains, recentChainsIds]);\n\n const saveRecentChain = useCallback(\n (chain: TChainItem) => {\n // only mainnet can save chain id to local storage\n if (chain.isTestnet) {\n return;\n }\n let ids = recentChainsIds?.filter((id: number) => id !== chain.id);\n ids = [chain.id, ...ids].slice(0, MAX_RECENT_CHAINS);\n setRecentChainsIds(ids);\n },\n [recentChainsIds]\n );\n\n return { recentChains, saveRecentChain };\n}\n","import {\n Box,\n Flex,\n Text,\n ChainIcon,\n Tabs,\n TabPanel,\n cn,\n tv,\n} from \"@orderly.network/ui\";\nimport { ChainType, TChainItem } from \"./type\";\nimport { UseChainSelectorScriptReturn } from \"./chainSelector.script\";\nimport { useTranslation } from \"@orderly.network/i18n\";\n\nexport type ChainSelectorProps = {\n isWrongNetwork?: boolean;\n /**\n * wide: This represents the wide screen (desktop) UI mode\n * compact: This indicates a compact (mobile) UI pattern.\n */\n variant?: \"wide\" | \"compact\";\n className?: string;\n} & UseChainSelectorScriptReturn;\n\nconst chainSelectorVariants = tv({\n slots: {\n icon: \"\",\n list: \"oui-grid oui-grid-cols-1 oui-gap-1\",\n mainnetList: '\"',\n testnetList: '\"',\n recentList: \"\",\n item: \"oui-w-full oui-rounded-md\",\n tip: \"oui-text-center\",\n },\n variants: {\n variant: {\n compact: {\n icon: \"oui-w-6 oui-h-6\",\n list: \"oui-bg-base-9 oui-rounded-lg oui-p-1\",\n mainnetList: \"oui-grid-cols-2 oui-mt-4\",\n testnetList: \"oui-grid-cols-1 oui-mt-4\",\n recentList: \"oui-mt-4\",\n item: \"oui-bg-base-6 hover:oui-bg-base-7\",\n tip: \"oui-pt-6\",\n },\n wide: {\n icon: \"oui-w-[18px] oui-h-[18px]\",\n mainnetList: \"oui-grid-cols-3 oui-mt-3\",\n testnetList: \"oui-grid-cols-2 oui-mt-3\",\n recentList: \"oui-mt-3\",\n item: \"oui-bg-base-5 hover:oui-bg-base-6\",\n tip: \"oui-pt-8\",\n },\n },\n selected: {\n true: {\n item: \"\",\n },\n false: { item: \"oui-bg-transparent\" },\n },\n },\n compoundVariants: [\n {\n variant: \"compact\",\n selected: true,\n className: {\n item: \"hover:oui-bg-base-6\",\n },\n },\n {\n variant: \"wide\",\n selected: true,\n className: {\n item: \"hover:oui-bg-base-5\",\n },\n },\n ],\n defaultVariants: {\n variant: \"wide\",\n selected: false,\n },\n});\n\n//------------------ ChainSelector start ------------------\nexport const ChainSelector = (props: ChainSelectorProps) => {\n const { isWrongNetwork, variant = \"wide\" } = props;\n const { t } = useTranslation();\n const { list, recentList, mainnetList, testnetList, icon, item, tip } =\n chainSelectorVariants({ variant });\n\n return (\n <Box className={cn(\"oui-font-semibold\", props.className)}>\n <Tabs\n value={props.selectedTab}\n variant=\"contained\"\n size={variant === \"wide\" ? \"md\" : \"lg\"}\n onValueChange={(e) => props.onTabChange(e as ChainType)}\n >\n <TabPanel value={ChainType.Mainnet} title={t(\"connector.mainnet\")}>\n {!!props.recentChains?.length && (\n <Flex gap={2} className={recentList()}>\n {props.recentChains?.map((item) => {\n return (\n <RecentChainItem\n key={item.id}\n item={item}\n onClick={() => props.onChainClick(item)}\n iconClassName={icon()}\n />\n );\n })}\n </Flex>\n )}\n\n <Box r=\"2xl\" className={cn(list(), mainnetList())}>\n {props.chains.mainnet?.map((chain) => {\n const selected = props.selectChainId === chain.id;\n return (\n <ChainItem\n key={chain.id}\n selected={selected}\n item={chain}\n onClick={() => props.onChainClick(chain)}\n className={item({ selected })}\n />\n );\n })}\n </Box>\n </TabPanel>\n\n {props.showTestnet && (\n <TabPanel value={ChainType.Testnet} title={t(\"connector.testnet\")}>\n <Box r=\"2xl\" className={cn(list(), testnetList())}>\n {props.chains.testnet?.map((chain) => {\n const selected = props.selectChainId === chain.id;\n return (\n <ChainItem\n key={chain.id}\n selected={selected}\n item={chain}\n onClick={() => props.onChainClick(chain)}\n className={item({ selected })}\n />\n );\n })}\n </Box>\n </TabPanel>\n )}\n </Tabs>\n\n {isWrongNetwork && (\n <Box className={tip()}>\n <Text color=\"warning\" size=\"xs\">\n {t(\"connector.wrongNetwork.tooltip\")}\n </Text>\n </Box>\n )}\n </Box>\n );\n};\n// ------------------ ChainSelector end ------------------\n\n// ------------------ ChainItem start ------------------\nexport const ChainItem = (props: {\n selected: boolean;\n item: TChainItem;\n onClick?: () => void;\n className?: string;\n}) => {\n const { item } = props;\n return (\n <button className={props.className} onClick={props.onClick}>\n <Flex justify=\"between\" className=\"oui-py-2.5\" px={3}>\n <Flex itemAlign=\"center\" width=\"100%\" className=\"oui-gap-x-[6px]\">\n <ChainIcon chainId={item.id} size=\"xs\" />\n <Text size=\"2xs\">{item.name}</Text>\n </Flex>\n {props.selected && (\n <Box gradient=\"brand\" r=\"full\" width={4} height={4} />\n )}\n </Flex>\n </button>\n );\n};\n\n// ------------------ Recent ChainItem start ------------------\nexport const RecentChainItem = (props: {\n item: TChainItem;\n onClick?: () => void;\n iconClassName?: string;\n}) => {\n return (\n <button\n className=\"oui-border oui-border-line-12 oui-rounded-lg hover:oui-border-primary-light\"\n onClick={props.onClick}\n >\n <Flex itemAlign=\"center\" p={2}>\n <ChainIcon chainId={props.item.id} className={props.iconClassName} />\n </Flex>\n </button>\n );\n};\n"]}
1
+ {"version":3,"sources":["../src/chainSelector.widget.tsx","../src/chainSelector.script.ts","../src/chainSelector.ui.tsx"],"names":["registerSimpleDialog","registerSimpleSheet","useMemo","useCallback","useState","useEffect","useConfig","useStorageChain","useChains","useWalletConnector","useLocalStorage","useAppContext","useOrderlyTheme","KEY","MAX_RECENT_CHAINS","useChainSelectorScript","options","networkId","bridgeLessOnly","setStorageChain","config","_chains","checkChainSupport","setChain","connectedChain","onChainChanged","currentChainId","setCurrentChainId","wrongNetwork","selectChainId","setSelectChainId","getComponentTheme","chains","chain","showTestnet","recentChains","saveRecentChain","useRecentChains","onChainChange","result","changedCallback","isWalletConnected","params","onChainClick","complete","selectedTab","onTabChange","useChainTab","setSelectedTab","tab","recentChainsIds","setRecentChainsIds","id","item","ids","Box","Flex","Text","ChainIcon","Tabs","TabPanel","cn","tv","useTranslation","jsx","jsxs","chainSelectorVariants","ChainSelector","props","isWrongNetwork","variant","t","list","recentList","mainnetList","testnetList","icon","tip","e","RecentChainItem","selected","ChainItem","i18n","ChainSelectorWidget","state","ChainSelectorDialogId","ChainSelectorSheetId"],"mappings":"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","sourcesContent":["import { registerSimpleDialog, registerSimpleSheet } from \"@orderly.network/ui\";\nimport {\n useChainSelectorScript,\n UseChainSelectorScriptOptions,\n} from \"./chainSelector.script\";\nimport { ChainSelector, ChainSelectorProps } from \"./chainSelector.ui\";\nimport { i18n } from \"@orderly.network/i18n\";\n\nexport type ChainSelectorWidgetProps = UseChainSelectorScriptOptions &\n Pick<ChainSelectorProps, \"isWrongNetwork\" | \"variant\" | \"className\">;\n\nexport const ChainSelectorWidget = (props: ChainSelectorWidgetProps) => {\n const state = useChainSelectorScript(props);\n\n return (\n <ChainSelector\n {...state}\n variant={props.variant}\n isWrongNetwork={props.isWrongNetwork}\n />\n );\n};\n\nexport const ChainSelectorDialogId = \"ChainSelectorDialogId\";\nexport const ChainSelectorSheetId = \"ChainSelectorSheetId\";\n\nregisterSimpleDialog(ChainSelectorDialogId, ChainSelectorWidget, {\n size: \"lg\",\n title: () => i18n.t(\"connector.switchNetwork\"),\n variant: \"wide\",\n isWrongNetwork: true,\n});\n\nregisterSimpleSheet(ChainSelectorSheetId, ChainSelectorWidget, {\n title: () => i18n.t(\"connector.switchNetwork\"),\n classNames: {\n content: \"!oui-bg-base-8\",\n body: \"!oui-bg-base-8\",\n },\n variant: \"compact\",\n isWrongNetwork: true,\n});\n","import { useMemo, useCallback, useState, useEffect } from \"react\";\nimport { useConfig, useStorageChain } from \"@orderly.network/hooks\";\nimport {\n useChains,\n useWalletConnector,\n useLocalStorage,\n} from \"@orderly.network/hooks\";\nimport { NetworkId } from \"@orderly.network/types\";\nimport { useAppContext } from \"@orderly.network/react-app\";\nimport { ChainType, TChainItem } from \"./type\";\nimport { useOrderlyTheme } from \"@orderly.network/ui\";\n\nconst KEY = \"orderly_selected_chains\";\nconst MAX_RECENT_CHAINS = 6;\n\nexport type UseChainSelectorScriptReturn = ReturnType<\n typeof useChainSelectorScript\n>;\n\nexport type UseChainSelectorScriptOptions = {\n networkId?: NetworkId;\n bridgeLessOnly?: boolean;\n close?: () => void;\n resolve?: (isSuccess: boolean) => void;\n reject?: () => void;\n onChainChangeBefore?: (\n chainId: number,\n state: {\n isTestnet: boolean;\n }\n ) => void;\n onChainChangeAfter?: (\n chainId: number,\n state: {\n isTestnet: boolean;\n isWalletConnected: boolean;\n }\n ) => void;\n};\n\nexport const useChainSelectorScript = (\n options: UseChainSelectorScriptOptions\n) => {\n const { networkId, bridgeLessOnly } = options || {};\n const { setStorageChain } = useStorageChain();\n\n const config = useConfig();\n const [_chains, { checkChainSupport }] = useChains();\n const { setChain, connectedChain } = useWalletConnector();\n\n const { onChainChanged, currentChainId, setCurrentChainId, wrongNetwork } =\n useAppContext();\n\n const [selectChainId, setSelectChainId] = useState<number | undefined>(\n currentChainId\n );\n\n const { getComponentTheme } = useOrderlyTheme();\n\n const chains = useMemo(() => {\n const bridgeLessChains = bridgeLessOnly\n ? _chains.mainnet.filter((chain) => chain.network_infos.bridgeless)\n : _chains.mainnet;\n\n return {\n mainnet: bridgeLessChains.map((chain) => ({\n name: chain.network_infos.name,\n id: chain.network_infos.chain_id,\n lowestFee: chain.network_infos.bridgeless,\n isTestnet: false,\n })),\n testnet: _chains.testnet.map((chain) => ({\n name: chain.network_infos.name,\n id: chain.network_infos.chain_id,\n lowestFee: chain.network_infos.bridgeless,\n isTestnet: true,\n })),\n };\n }, [_chains, bridgeLessOnly]);\n\n const showTestnet = useMemo(() => {\n const chainSelectorOverrides = getComponentTheme(\"chainSelector\", {\n showTestnet: true,\n });\n\n if (\n chainSelectorOverrides.showTestnet === false ||\n !chains.testnet.length\n ) {\n return false;\n }\n\n return true;\n }, [chains.testnet]);\n\n const { recentChains, saveRecentChain } = useRecentChains(chains);\n\n const onChainChange = async (chain: TChainItem) => {\n if (connectedChain) {\n const result = await setChain({ chainId: chain.id });\n\n if (!result) return result;\n\n return {\n result,\n wrongNetwork: !checkChainSupport(chain.id, config.get(\"networkId\")),\n chainId: chain.id,\n };\n }\n\n setStorageChain(chain.id);\n\n setCurrentChainId(chain.id);\n return {\n result: true,\n wrongNetwork: false,\n chainId: chain.id,\n };\n // return Promise.reject(\"No connected chain\");\n };\n\n const changedCallback = (chain: TChainItem, isWalletConnected: boolean) => {\n const params = {\n isTestnet: chain.isTestnet,\n isWalletConnected,\n };\n options.onChainChangeAfter?.(chain.id, params);\n onChainChanged?.(chain.id, params);\n };\n\n const onChainClick = async (chain: TChainItem) => {\n setSelectChainId(chain.id);\n options.onChainChangeBefore?.(chain.id, { isTestnet: chain.isTestnet });\n try {\n const complete = await onChainChange?.(chain);\n\n if (complete) {\n options.resolve?.(complete);\n options.close?.();\n saveRecentChain(chain);\n changedCallback(chain, true);\n } else {\n setSelectChainId(undefined);\n changedCallback(chain, false);\n }\n } catch (err) {\n changedCallback(chain, false);\n }\n };\n\n const { selectedTab, onTabChange } = useChainTab(\n chains,\n currentChainId,\n wrongNetwork,\n showTestnet\n );\n\n return {\n recentChains,\n chains,\n selectChainId,\n onChainClick,\n selectedTab,\n onTabChange,\n showTestnet,\n };\n};\n\nfunction useChainTab(\n chains: Record<NetworkId, TChainItem[]>,\n currentChainId?: number,\n wrongNetwork?: boolean,\n showTestnet?: boolean\n) {\n const [selectedTab, setSelectedTab] = useState<ChainType>(ChainType.Mainnet);\n\n const onTabChange = (tab: ChainType) => {\n setSelectedTab(tab);\n };\n\n useEffect(() => {\n if (!showTestnet) {\n setSelectedTab(ChainType.Mainnet);\n return;\n }\n\n if (currentChainId) {\n const isMainnet = chains.mainnet?.some(\n (chain) => chain.id === currentChainId\n );\n if (isMainnet) {\n setSelectedTab(wrongNetwork ? ChainType.Testnet : ChainType.Mainnet);\n return;\n }\n\n const isTestnet = chains.testnet?.some(\n (chain) => chain.id === currentChainId\n );\n if (isTestnet) {\n setSelectedTab(wrongNetwork ? ChainType.Mainnet : ChainType.Testnet);\n return;\n }\n }\n }, [currentChainId, chains, wrongNetwork, showTestnet]);\n\n return { selectedTab, onTabChange };\n}\n\nfunction useRecentChains(chains: Record<NetworkId, TChainItem[]>) {\n const [recentChainsIds, setRecentChainsIds] = useLocalStorage<string[]>(\n KEY,\n []\n );\n\n const recentChains = useMemo<TChainItem[]>(() => {\n return recentChainsIds\n ?.map((id: string) =>\n chains.mainnet?.find((item) => item.id === parseInt(id))\n )\n .filter((chains: TChainItem) => !!chains);\n }, [chains, recentChainsIds]);\n\n const saveRecentChain = useCallback(\n (chain: TChainItem) => {\n // only mainnet can save chain id to local storage\n if (chain.isTestnet) {\n return;\n }\n let ids = recentChainsIds?.filter((id: number) => id !== chain.id);\n ids = [chain.id, ...ids].slice(0, MAX_RECENT_CHAINS);\n setRecentChainsIds(ids);\n },\n [recentChainsIds]\n );\n\n return { recentChains, saveRecentChain };\n}\n","import {\n Box,\n Flex,\n Text,\n ChainIcon,\n Tabs,\n TabPanel,\n cn,\n tv,\n} from \"@orderly.network/ui\";\nimport { ChainType, TChainItem } from \"./type\";\nimport { UseChainSelectorScriptReturn } from \"./chainSelector.script\";\nimport { useTranslation } from \"@orderly.network/i18n\";\n\nexport type ChainSelectorProps = {\n isWrongNetwork?: boolean;\n /**\n * wide: This represents the wide screen (desktop) UI mode\n * compact: This indicates a compact (mobile) UI pattern.\n */\n variant?: \"wide\" | \"compact\";\n className?: string;\n} & UseChainSelectorScriptReturn;\n\nconst chainSelectorVariants = tv({\n slots: {\n icon: \"\",\n list: \"oui-grid oui-grid-cols-1 oui-gap-1\",\n mainnetList: '\"',\n testnetList: '\"',\n recentList: \"\",\n item: \"oui-w-full oui-rounded-md\",\n tip: \"oui-text-center\",\n },\n variants: {\n variant: {\n compact: {\n icon: \"oui-w-6 oui-h-6\",\n list: \"oui-bg-base-9 oui-rounded-lg oui-p-1\",\n mainnetList: \"oui-grid-cols-2 oui-mt-4\",\n testnetList: \"oui-grid-cols-1 oui-mt-4\",\n recentList: \"oui-mt-4\",\n item: \"oui-bg-base-6 hover:oui-bg-base-7\",\n tip: \"oui-pt-6\",\n },\n wide: {\n icon: \"oui-w-[18px] oui-h-[18px]\",\n mainnetList: \"oui-grid-cols-3 oui-mt-3\",\n testnetList: \"oui-grid-cols-2 oui-mt-3\",\n recentList: \"oui-mt-3\",\n item: \"oui-bg-base-5 hover:oui-bg-base-6\",\n tip: \"oui-pt-8\",\n },\n },\n selected: {\n true: {\n item: \"\",\n },\n false: { item: \"oui-bg-transparent\" },\n },\n },\n compoundVariants: [\n {\n variant: \"compact\",\n selected: true,\n className: {\n item: \"hover:oui-bg-base-6\",\n },\n },\n {\n variant: \"wide\",\n selected: true,\n className: {\n item: \"hover:oui-bg-base-5\",\n },\n },\n ],\n defaultVariants: {\n variant: \"wide\",\n selected: false,\n },\n});\n\n//------------------ ChainSelector start ------------------\nexport const ChainSelector = (props: ChainSelectorProps) => {\n const { isWrongNetwork, variant = \"wide\" } = props;\n const { t } = useTranslation();\n const { list, recentList, mainnetList, testnetList, icon, item, tip } =\n chainSelectorVariants({ variant });\n\n return (\n <Box className={cn(\"oui-font-semibold\", props.className)}>\n <Tabs\n value={props.selectedTab}\n variant=\"contained\"\n size={variant === \"wide\" ? \"md\" : \"lg\"}\n onValueChange={(e) => props.onTabChange(e as ChainType)}\n >\n <TabPanel value={ChainType.Mainnet} title={t(\"connector.mainnet\")}>\n {!!props.recentChains?.length && (\n <Flex gap={2} className={recentList()}>\n {props.recentChains?.map((item) => {\n return (\n <RecentChainItem\n key={item.id}\n item={item}\n onClick={() => props.onChainClick(item)}\n iconClassName={icon()}\n />\n );\n })}\n </Flex>\n )}\n\n <Box r=\"2xl\" className={cn(list(), mainnetList())}>\n {props.chains.mainnet?.map((chain) => {\n const selected = props.selectChainId === chain.id;\n return (\n <ChainItem\n key={chain.id}\n selected={selected}\n item={chain}\n onClick={() => props.onChainClick(chain)}\n className={item({ selected })}\n />\n );\n })}\n </Box>\n </TabPanel>\n\n {props.showTestnet && (\n <TabPanel value={ChainType.Testnet} title={t(\"connector.testnet\")}>\n <Box r=\"2xl\" className={cn(list(), testnetList())}>\n {props.chains.testnet?.map((chain) => {\n const selected = props.selectChainId === chain.id;\n return (\n <ChainItem\n key={chain.id}\n selected={selected}\n item={chain}\n onClick={() => props.onChainClick(chain)}\n className={item({ selected })}\n />\n );\n })}\n </Box>\n </TabPanel>\n )}\n </Tabs>\n\n {isWrongNetwork && (\n <Box className={tip()}>\n <Text color=\"warning\" size=\"xs\">\n {t(\"connector.wrongNetwork.tooltip\")}\n </Text>\n </Box>\n )}\n </Box>\n );\n};\n// ------------------ ChainSelector end ------------------\n\n// ------------------ ChainItem start ------------------\nexport const ChainItem = (props: {\n selected: boolean;\n item: TChainItem;\n onClick?: () => void;\n className?: string;\n}) => {\n const { item } = props;\n return (\n <button className={props.className} onClick={props.onClick}>\n <Flex justify=\"between\" className=\"oui-py-2.5\" px={3}>\n <Flex itemAlign=\"center\" width=\"100%\" className=\"oui-gap-x-[6px]\">\n <ChainIcon chainId={item.id} size=\"xs\" />\n <Text size=\"2xs\">{item.name}</Text>\n </Flex>\n {props.selected && (\n <Box gradient=\"brand\" r=\"full\" width={4} height={4} />\n )}\n </Flex>\n </button>\n );\n};\n\n// ------------------ Recent ChainItem start ------------------\nexport const RecentChainItem = (props: {\n item: TChainItem;\n onClick?: () => void;\n iconClassName?: string;\n}) => {\n return (\n <button\n className=\"oui-border oui-border-line-12 oui-rounded-lg hover:oui-border-primary-light\"\n onClick={props.onClick}\n >\n <Flex itemAlign=\"center\" p={2}>\n <ChainIcon chainId={props.item.id} className={props.iconClassName} />\n </Flex>\n </button>\n );\n};\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orderly.network/ui-chain-selector",
3
- "version": "2.1.0",
3
+ "version": "2.1.1",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -14,11 +14,11 @@
14
14
  "access": "public"
15
15
  },
16
16
  "dependencies": {
17
- "@orderly.network/hooks": "2.1.0",
18
- "@orderly.network/ui": "2.1.0",
19
- "@orderly.network/i18n": "2.1.0",
20
- "@orderly.network/react-app": "2.1.0",
21
- "@orderly.network/types": "2.1.0"
17
+ "@orderly.network/i18n": "2.1.1",
18
+ "@orderly.network/ui": "2.1.1",
19
+ "@orderly.network/types": "2.1.1",
20
+ "@orderly.network/hooks": "2.1.1",
21
+ "@orderly.network/react-app": "2.1.1"
22
22
  },
23
23
  "devDependencies": {
24
24
  "@types/react": "^18.3.2",
@@ -30,7 +30,7 @@
30
30
  "tailwindcss": "^3.4.4",
31
31
  "typescript": "^5.1.6",
32
32
  "tsup": "^7.1.0",
33
- "tsconfig": "0.4.0"
33
+ "tsconfig": "0.4.1"
34
34
  },
35
35
  "peerDependencies": {
36
36
  "react": ">=18",