@orderly.network/ui-chain-selector 2.8.10 → 2.8.11-alpha.0

package/dist/index.js

@@ -51,8 +51,7 @@ var useChainSelectorScript = (options) => {
   const onChainChange = async (chain) => {
     if (connectedChain) {
       const result = await setChain({ chainId: chain.id });
-      if (!result)
-        return result;
+      if (!result) return result;
       return {
         result,
         wrongNetwork: !checkChainSupport(chain.id, config.get("networkId")),
@@ -329,5 +328,5 @@ ui.registerSimpleSheet(ChainSelectorSheetId, ChainSelectorWidget, {
 exports.ChainSelectorDialogId = ChainSelectorDialogId;
 exports.ChainSelectorSheetId = ChainSelectorSheetId;
 exports.ChainSelectorWidget = ChainSelectorWidget;
-//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/chainSelector.widget.tsx","../src/chainSelector.script.ts","../src/chainSelector.ui.tsx"],"names":["chains","item","jsx"],"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"]}
+{"version":3,"sources":["../src/chainSelector.script.ts","../src/chainSelector.ui.tsx","../src/chainSelector.widget.tsx"],"names":["useStorageChain","useConfig","useChains","useWalletConnector","useAppContext","useState","useOrderlyTheme","useMemo","useEffect","useLocalStorage","chains","useCallback","tv","useTranslation","Box","cn","jsxs","Tabs","TabPanel","Flex","item","jsx","Text","ChainIcon","registerSimpleDialog","i18n","registerSimpleSheet"],"mappings":"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","file":"index.js","sourcesContent":["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","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"]}

package/dist/index.mjs

@@ -49,8 +49,7 @@ var useChainSelectorScript = (options) => {
   const onChainChange = async (chain) => {
     if (connectedChain) {
       const result = await setChain({ chainId: chain.id });
-      if (!result)
-        return result;
+      if (!result) return result;
       return {
         result,
         wrongNetwork: !checkChainSupport(chain.id, config.get("networkId")),
@@ -325,5 +324,5 @@ registerSimpleSheet(ChainSelectorSheetId, ChainSelectorWidget, {
 });
 
 export { ChainSelectorDialogId, ChainSelectorSheetId, ChainSelectorWidget };
-//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/chainSelector.widget.tsx","../src/chainSelector.script.ts","../src/chainSelector.ui.tsx"],"names":["chains","item","jsx"],"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"]}
+{"version":3,"sources":["../src/chainSelector.script.ts","../src/chainSelector.ui.tsx","../src/chainSelector.widget.tsx"],"names":["chains","item","jsx"],"mappings":"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","file":"index.mjs","sourcesContent":["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","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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orderly.network/ui-chain-selector",
-  "version": "2.8.10",
+  "version": "2.8.11-alpha.0",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -14,11 +14,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@orderly.network/i18n": "2.8.10",
-    "@orderly.network/hooks": "2.8.10",
-    "@orderly.network/ui": "2.8.10",
-    "@orderly.network/types": "2.8.10",
-    "@orderly.network/react-app": "2.8.10"
+    "@orderly.network/i18n": "2.8.11-alpha.0",
+    "@orderly.network/hooks": "2.8.11-alpha.0",
+    "@orderly.network/types": "2.8.11-alpha.0",
+    "@orderly.network/ui": "2.8.11-alpha.0",
+    "@orderly.network/react-app": "2.8.11-alpha.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.2",
@@ -29,8 +29,8 @@
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.1.6",
-    "tsup": "^7.1.0",
-    "tsconfig": "0.11.10"
+    "tsup": "^8.5.1",
+    "tsconfig": "0.11.11-alpha.0"
   },
   "peerDependencies": {
     "react": ">=18",