@kodiak-finance/orderly-ui-chain-selector 2.8.18 → 2.8.19-rc.0

package/dist/index.js

@@ -7,10 +7,327 @@ var orderlyReactApp = require('@kodiak-finance/orderly-react-app');
 var orderlyI18n = require('@kodiak-finance/orderly-i18n');
 var jsxRuntime = require('react/jsx-runtime');
 
-var te="orderly_selected_chains",ne=6,L=e=>{let{networkId:o,bridgeLessOnly:r}=e||{},{setStorageChain:l}=orderlyHooks.useStorageChain(),m=orderlyHooks.useConfig(),[n,{checkChainSupport:c}]=orderlyHooks.useChains(),{setChain:d,connectedChain:f}=orderlyHooks.useWalletConnector(),{onChainChanged:u,currentChainId:T,setCurrentChainId:s,wrongNetwork:C}=orderlyReactApp.useAppContext(),[B,N]=react.useState(T),{getComponentTheme:U}=orderlyUi.useOrderlyTheme(),h=react.useMemo(()=>({mainnet:(r?n.mainnet.filter(i=>i.network_infos.bridgeless):n.mainnet).map(i=>({name:i.network_infos.name,id:i.network_infos.chain_id,lowestFee:i.network_infos.bridgeless,isTestnet:false})),testnet:n.testnet.map(i=>({name:i.network_infos.name,id:i.network_infos.chain_id,lowestFee:i.network_infos.bridgeless,isTestnet:true}))}),[n,r]),x=react.useMemo(()=>!(U("chainSelector",{showTestnet:true}).showTestnet===false||!h.testnet.length),[h.testnet]),{recentChains:z,saveRecentChain:D}=oe(h),E=async t=>{if(f){let i=await d({chainId:t.id});return i&&{result:i,wrongNetwork:!c(t.id,m.get("networkId")),chainId:t.id}}return l(t.id),s(t.id),{result:true,wrongNetwork:false,chainId:t.id}},S=(t,i)=>{let v={isTestnet:t.isTestnet,isWalletConnected:i};e.onChainChangeAfter?.(t.id,v),u?.(t.id,v);},V=async t=>{N(t.id),e.onChainChangeBefore?.(t.id,{isTestnet:t.isTestnet});try{let i=await E?.(t);i?(e.resolve?.(i),e.close?.(),D(t),S(t,!0)):(N(void 0),S(t,!1));}catch{S(t,false);}},{selectedTab:H,onTabChange:K}=ie(h,T,C,x);return {recentChains:z,chains:h,selectChainId:B,onChainClick:V,selectedTab:H,onTabChange:K,showTestnet:x}};function ie(e,o,r,l){let[m,n]=react.useState("Mainnet"),c=d=>{n(d);};return react.useEffect(()=>{if(!l){n("Mainnet");return}if(o){if(e.mainnet?.some(u=>u.id===o)){n(r?"Testnet":"Mainnet");return}if(e.testnet?.some(u=>u.id===o)){n(r?"Mainnet":"Testnet");return}}},[o,e,r,l]),{selectedTab:m,onTabChange:c}}function oe(e){let[o,r]=orderlyHooks.useLocalStorage(te,[]),l=react.useMemo(()=>o?.map(n=>e.mainnet?.find(c=>c.id===parseInt(n))).filter(n=>!!n),[e,o]),m=react.useCallback(n=>{if(n.isTestnet)return;let c=o?.filter(d=>d!==n.id);c=[n.id,...c].slice(0,ne),r(c);},[o]);return {recentChains:l,saveRecentChain:m}}var ce=orderlyUi.tv({slots:{icon:"",list:"oui-grid oui-grid-cols-1 oui-gap-1",mainnetList:'"',testnetList:'"',recentList:"",item:"oui-w-full oui-rounded-md",tip:"oui-text-center"},variants:{variant:{compact:{icon:"oui-w-6 oui-h-6",list:"oui-bg-base-9 oui-rounded-lg oui-p-1",mainnetList:"oui-grid-cols-2 oui-mt-4",testnetList:"oui-grid-cols-1 oui-mt-4",recentList:"oui-mt-4",item:"oui-bg-base-6 hover:oui-bg-base-7",tip:"oui-pt-6"},wide:{icon:"oui-w-[18px] oui-h-[18px]",mainnetList:"oui-grid-cols-3 oui-mt-3",testnetList:"oui-grid-cols-2 oui-mt-3",recentList:"oui-mt-3",item:"oui-bg-base-5 hover:oui-bg-base-6",tip:"oui-pt-8"}},selected:{true:{item:""},false:{item:"oui-bg-transparent"}}},compoundVariants:[{variant:"compact",selected:true,className:{item:"hover:oui-bg-base-6"}},{variant:"wide",selected:true,className:{item:"hover:oui-bg-base-5"}}],defaultVariants:{variant:"wide",selected:false}}),P=e=>{let{isWrongNetwork:o,variant:r="wide"}=e,{t:l}=orderlyI18n.useTranslation(),{list:m,recentList:n,mainnetList:c,testnetList:d,icon:f,item:u,tip:T}=ce({variant:r});return jsxRuntime.jsxs(orderlyUi.Box,{className:orderlyUi.cn("oui-font-semibold",e.className),children:[jsxRuntime.jsxs(orderlyUi.Tabs,{value:e.selectedTab,variant:"contained",size:r==="wide"?"md":"lg",onValueChange:s=>e.onTabChange(s),children:[jsxRuntime.jsxs(orderlyUi.TabPanel,{value:"Mainnet",title:l("connector.mainnet"),children:[!!e.recentChains?.length&&jsxRuntime.jsx(orderlyUi.Flex,{gap:2,className:n(),children:e.recentChains?.map(s=>jsxRuntime.jsx(le,{item:s,onClick:()=>e.onChainClick(s),iconClassName:f()},s.id))}),jsxRuntime.jsx(orderlyUi.Box,{r:"2xl",className:orderlyUi.cn(m(),c()),children:e.chains.mainnet?.map(s=>{let C=e.selectChainId===s.id;return jsxRuntime.jsx(W,{selected:C,item:s,onClick:()=>e.onChainClick(s),className:u({selected:C})},s.id)})})]}),e.showTestnet&&jsxRuntime.jsx(orderlyUi.TabPanel,{value:"Testnet",title:l("connector.testnet"),children:jsxRuntime.jsx(orderlyUi.Box,{r:"2xl",className:orderlyUi.cn(m(),d()),children:e.chains.testnet?.map(s=>{let C=e.selectChainId===s.id;return jsxRuntime.jsx(W,{selected:C,item:s,onClick:()=>e.onChainClick(s),className:u({selected:C})},s.id)})})})]}),o&&jsxRuntime.jsx(orderlyUi.Box,{className:T(),children:jsxRuntime.jsx(orderlyUi.Text,{color:"warning",size:"xs",children:l("connector.wrongNetwork.tooltip")})})]})},W=e=>{let{item:o}=e;return jsxRuntime.jsx("button",{className:e.className,onClick:e.onClick,children:jsxRuntime.jsxs(orderlyUi.Flex,{justify:"between",className:"oui-py-2.5",px:3,children:[jsxRuntime.jsxs(orderlyUi.Flex,{itemAlign:"center",width:"100%",className:"oui-gap-x-[6px]",children:[jsxRuntime.jsx(orderlyUi.ChainIcon,{chainId:o.id,size:"xs"}),jsxRuntime.jsx(orderlyUi.Text,{size:"2xs",children:o.name})]}),e.selected&&jsxRuntime.jsx(orderlyUi.Box,{gradient:"brand",r:"full",width:4,height:4})]})})},le=e=>jsxRuntime.jsx("button",{className:"oui-border oui-border-line-12 oui-rounded-lg hover:oui-border-primary-light",onClick:e.onClick,children:jsxRuntime.jsx(orderlyUi.Flex,{itemAlign:"center",p:2,children:jsxRuntime.jsx(orderlyUi.ChainIcon,{chainId:e.item.id,className:e.iconClassName})})});var I=e=>{let o=L(e);return jsxRuntime.jsx(P,{...o,variant:e.variant,isWrongNetwork:e.isWrongNetwork})},F="ChainSelectorDialogId",A="ChainSelectorSheetId";orderlyUi.registerSimpleDialog(F,I,{size:"lg",title:()=>orderlyI18n.i18n.t("connector.switchNetwork"),variant:"wide",isWrongNetwork:true});orderlyUi.registerSimpleSheet(A,I,{title:()=>orderlyI18n.i18n.t("connector.switchNetwork"),classNames:{content:"!oui-bg-base-8",body:"!oui-bg-base-8"},variant:"compact",isWrongNetwork:true});
+// src/chainSelector.widget.tsx
+var KEY = "orderly_selected_chains";
+var MAX_RECENT_CHAINS = 6;
+var useChainSelectorScript = (options) => {
+  const { networkId, bridgeLessOnly } = options || {};
+  const { setStorageChain } = orderlyHooks.useStorageChain();
+  const config = orderlyHooks.useConfig();
+  const [_chains, { checkChainSupport }] = orderlyHooks.useChains();
+  const { setChain, connectedChain } = orderlyHooks.useWalletConnector();
+  const { onChainChanged, currentChainId, setCurrentChainId, wrongNetwork } = orderlyReactApp.useAppContext();
+  const [selectChainId, setSelectChainId] = react.useState(
+    currentChainId
+  );
+  const { getComponentTheme } = orderlyUi.useOrderlyTheme();
+  const chains = react.useMemo(() => {
+    const bridgeLessChains = bridgeLessOnly ? _chains.mainnet.filter((chain) => chain.network_infos.bridgeless) : _chains.mainnet;
+    return {
+      mainnet: bridgeLessChains.map((chain) => ({
+        name: chain.network_infos.name,
+        id: chain.network_infos.chain_id,
+        lowestFee: chain.network_infos.bridgeless,
+        isTestnet: false
+      })),
+      testnet: _chains.testnet.map((chain) => ({
+        name: chain.network_infos.name,
+        id: chain.network_infos.chain_id,
+        lowestFee: chain.network_infos.bridgeless,
+        isTestnet: true
+      }))
+    };
+  }, [_chains, bridgeLessOnly]);
+  const showTestnet = react.useMemo(() => {
+    const chainSelectorOverrides = getComponentTheme("chainSelector", {
+      showTestnet: true
+    });
+    if (chainSelectorOverrides.showTestnet === false || !chains.testnet.length) {
+      return false;
+    }
+    return true;
+  }, [chains.testnet]);
+  const { recentChains, saveRecentChain } = useRecentChains(chains);
+  const onChainChange = async (chain) => {
+    if (connectedChain) {
+      const result = await setChain({ chainId: chain.id });
+      if (!result)
+        return result;
+      return {
+        result,
+        wrongNetwork: !checkChainSupport(chain.id, config.get("networkId")),
+        chainId: chain.id
+      };
+    }
+    setStorageChain(chain.id);
+    setCurrentChainId(chain.id);
+    return {
+      result: true,
+      wrongNetwork: false,
+      chainId: chain.id
+    };
+  };
+  const changedCallback = (chain, isWalletConnected) => {
+    const params = {
+      isTestnet: chain.isTestnet,
+      isWalletConnected
+    };
+    options.onChainChangeAfter?.(chain.id, params);
+    onChainChanged?.(chain.id, params);
+  };
+  const onChainClick = async (chain) => {
+    setSelectChainId(chain.id);
+    options.onChainChangeBefore?.(chain.id, { isTestnet: chain.isTestnet });
+    try {
+      const complete = await onChainChange?.(chain);
+      if (complete) {
+        options.resolve?.(complete);
+        options.close?.();
+        saveRecentChain(chain);
+        changedCallback(chain, true);
+      } else {
+        setSelectChainId(void 0);
+        changedCallback(chain, false);
+      }
+    } catch (err) {
+      changedCallback(chain, false);
+    }
+  };
+  const { selectedTab, onTabChange } = useChainTab(
+    chains,
+    currentChainId,
+    wrongNetwork,
+    showTestnet
+  );
+  return {
+    recentChains,
+    chains,
+    selectChainId,
+    onChainClick,
+    selectedTab,
+    onTabChange,
+    showTestnet
+  };
+};
+function useChainTab(chains, currentChainId, wrongNetwork, showTestnet) {
+  const [selectedTab, setSelectedTab] = react.useState("Mainnet" /* Mainnet */);
+  const onTabChange = (tab) => {
+    setSelectedTab(tab);
+  };
+  react.useEffect(() => {
+    if (!showTestnet) {
+      setSelectedTab("Mainnet" /* Mainnet */);
+      return;
+    }
+    if (currentChainId) {
+      const isMainnet = chains.mainnet?.some(
+        (chain) => chain.id === currentChainId
+      );
+      if (isMainnet) {
+        setSelectedTab(wrongNetwork ? "Testnet" /* Testnet */ : "Mainnet" /* Mainnet */);
+        return;
+      }
+      const isTestnet = chains.testnet?.some(
+        (chain) => chain.id === currentChainId
+      );
+      if (isTestnet) {
+        setSelectedTab(wrongNetwork ? "Mainnet" /* Mainnet */ : "Testnet" /* Testnet */);
+        return;
+      }
+    }
+  }, [currentChainId, chains, wrongNetwork, showTestnet]);
+  return { selectedTab, onTabChange };
+}
+function useRecentChains(chains) {
+  const [recentChainsIds, setRecentChainsIds] = orderlyHooks.useLocalStorage(
+    KEY,
+    []
+  );
+  const recentChains = react.useMemo(() => {
+    return recentChainsIds?.map(
+      (id) => chains.mainnet?.find((item) => item.id === parseInt(id))
+    ).filter((chains2) => !!chains2);
+  }, [chains, recentChainsIds]);
+  const saveRecentChain = react.useCallback(
+    (chain) => {
+      if (chain.isTestnet) {
+        return;
+      }
+      let ids = recentChainsIds?.filter((id) => id !== chain.id);
+      ids = [chain.id, ...ids].slice(0, MAX_RECENT_CHAINS);
+      setRecentChainsIds(ids);
+    },
+    [recentChainsIds]
+  );
+  return { recentChains, saveRecentChain };
+}
+var chainSelectorVariants = orderlyUi.tv({
+  slots: {
+    icon: "",
+    list: "oui-grid oui-grid-cols-1 oui-gap-1",
+    mainnetList: '"',
+    testnetList: '"',
+    recentList: "",
+    item: "oui-w-full oui-rounded-md",
+    tip: "oui-text-center"
+  },
+  variants: {
+    variant: {
+      compact: {
+        icon: "oui-w-6 oui-h-6",
+        list: "oui-bg-base-9 oui-rounded-lg oui-p-1",
+        mainnetList: "oui-grid-cols-2 oui-mt-4",
+        testnetList: "oui-grid-cols-1 oui-mt-4",
+        recentList: "oui-mt-4",
+        item: "oui-bg-base-6 hover:oui-bg-base-7",
+        tip: "oui-pt-6"
+      },
+      wide: {
+        icon: "oui-w-[18px] oui-h-[18px]",
+        mainnetList: "oui-grid-cols-3 oui-mt-3",
+        testnetList: "oui-grid-cols-2 oui-mt-3",
+        recentList: "oui-mt-3",
+        item: "oui-bg-base-5 hover:oui-bg-base-6",
+        tip: "oui-pt-8"
+      }
+    },
+    selected: {
+      true: {
+        item: ""
+      },
+      false: { item: "oui-bg-transparent" }
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "compact",
+      selected: true,
+      className: {
+        item: "hover:oui-bg-base-6"
+      }
+    },
+    {
+      variant: "wide",
+      selected: true,
+      className: {
+        item: "hover:oui-bg-base-5"
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: "wide",
+    selected: false
+  }
+});
+var ChainSelector = (props) => {
+  const { isWrongNetwork, variant = "wide" } = props;
+  const { t } = orderlyI18n.useTranslation();
+  const { list, recentList, mainnetList, testnetList, icon, item, tip } = chainSelectorVariants({ variant });
+  return /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Box, { className: orderlyUi.cn("oui-font-semibold", props.className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      orderlyUi.Tabs,
+      {
+        value: props.selectedTab,
+        variant: "contained",
+        size: variant === "wide" ? "md" : "lg",
+        onValueChange: (e) => props.onTabChange(e),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.TabPanel, { value: "Mainnet" /* Mainnet */, title: t("connector.mainnet"), children: [
+            !!props.recentChains?.length && /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Flex, { gap: 2, className: recentList(), children: props.recentChains?.map((item2) => {
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                RecentChainItem,
+                {
+                  item: item2,
+                  onClick: () => props.onChainClick(item2),
+                  iconClassName: icon()
+                },
+                item2.id
+              );
+            }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { r: "2xl", className: orderlyUi.cn(list(), mainnetList()), children: props.chains.mainnet?.map((chain) => {
+              const selected = props.selectChainId === chain.id;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                ChainItem,
+                {
+                  selected,
+                  item: chain,
+                  onClick: () => props.onChainClick(chain),
+                  className: item({ selected })
+                },
+                chain.id
+              );
+            }) })
+          ] }),
+          props.showTestnet && /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.TabPanel, { value: "Testnet" /* Testnet */, title: t("connector.testnet"), children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { r: "2xl", className: orderlyUi.cn(list(), testnetList()), children: props.chains.testnet?.map((chain) => {
+            const selected = props.selectChainId === chain.id;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              ChainItem,
+              {
+                selected,
+                item: chain,
+                onClick: () => props.onChainClick(chain),
+                className: item({ selected })
+              },
+              chain.id
+            );
+          }) }) })
+        ]
+      }
+    ),
+    isWrongNetwork && /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { className: tip(), children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { color: "warning", size: "xs", children: t("connector.wrongNetwork.tooltip") }) })
+  ] });
+};
+var ChainItem = (props) => {
+  const { item } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { className: props.className, onClick: props.onClick, children: /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { justify: "between", className: "oui-py-2.5", px: 3, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Flex, { itemAlign: "center", width: "100%", className: "oui-gap-x-[6px]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.ChainIcon, { chainId: item.id, size: "xs" }),
+      /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "2xs", children: item.name })
+    ] }),
+    props.selected && /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { gradient: "brand", r: "full", width: 4, height: 4 })
+  ] }) });
+};
+var RecentChainItem = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      className: "oui-border oui-border-line-12 oui-rounded-lg hover:oui-border-primary-light",
+      onClick: props.onClick,
+      children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Flex, { itemAlign: "center", p: 2, children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.ChainIcon, { chainId: props.item.id, className: props.iconClassName }) })
+    }
+  );
+};
+var ChainSelectorWidget = (props) => {
+  const state = useChainSelectorScript(props);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ChainSelector,
+    {
+      ...state,
+      variant: props.variant,
+      isWrongNetwork: props.isWrongNetwork
+    }
+  );
+};
+var ChainSelectorDialogId = "ChainSelectorDialogId";
+var ChainSelectorSheetId = "ChainSelectorSheetId";
+orderlyUi.registerSimpleDialog(ChainSelectorDialogId, ChainSelectorWidget, {
+  size: "lg",
+  title: () => orderlyI18n.i18n.t("connector.switchNetwork"),
+  variant: "wide",
+  isWrongNetwork: true
+});
+orderlyUi.registerSimpleSheet(ChainSelectorSheetId, ChainSelectorWidget, {
+  title: () => orderlyI18n.i18n.t("connector.switchNetwork"),
+  classNames: {
+    content: "!oui-bg-base-8",
+    body: "!oui-bg-base-8"
+  },
+  variant: "compact",
+  isWrongNetwork: true
+});
 
-exports.ChainSelectorDialogId = F;
-exports.ChainSelectorSheetId = A;
-exports.ChainSelectorWidget = I;
+exports.ChainSelectorDialogId = ChainSelectorDialogId;
+exports.ChainSelectorSheetId = ChainSelectorSheetId;
+exports.ChainSelectorWidget = ChainSelectorWidget;
 //# sourceMappingURL=out.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":["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 \"@kodiak-finance/orderly-ui\";\nimport {\n  useChainSelectorScript,\n  UseChainSelectorScriptOptions,\n} from \"./chainSelector.script\";\nimport { ChainSelector, ChainSelectorProps } from \"./chainSelector.ui\";\nimport { i18n } from \"@kodiak-finance/orderly-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 \"@kodiak-finance/orderly-hooks\";\nimport {\n  useChains,\n  useWalletConnector,\n  useLocalStorage,\n} from \"@kodiak-finance/orderly-hooks\";\nimport { NetworkId } from \"@kodiak-finance/orderly-types\";\nimport { useAppContext } from \"@kodiak-finance/orderly-react-app\";\nimport { ChainType, TChainItem } from \"./type\";\nimport { useOrderlyTheme } from \"@kodiak-finance/orderly-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 \"@kodiak-finance/orderly-ui\";\nimport { ChainType, TChainItem } from \"./type\";\nimport { UseChainSelectorScriptReturn } from \"./chainSelector.script\";\nimport { useTranslation } from \"@kodiak-finance/orderly-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.widget.tsx","../src/chainSelector.script.ts","../src/chainSelector.ui.tsx"],"names":["chains","item","jsx"],"mappings":"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","sourcesContent":["import { registerSimpleDialog, registerSimpleSheet } from \"@kodiak-finance/orderly-ui\";\nimport {\n  useChainSelectorScript,\n  UseChainSelectorScriptOptions,\n} from \"./chainSelector.script\";\nimport { ChainSelector, ChainSelectorProps } from \"./chainSelector.ui\";\nimport { i18n } from \"@kodiak-finance/orderly-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 \"@kodiak-finance/orderly-hooks\";\nimport {\n  useChains,\n  useWalletConnector,\n  useLocalStorage,\n} from \"@kodiak-finance/orderly-hooks\";\nimport { NetworkId } from \"@kodiak-finance/orderly-types\";\nimport { useAppContext } from \"@kodiak-finance/orderly-react-app\";\nimport { ChainType, TChainItem } from \"./type\";\nimport { useOrderlyTheme } from \"@kodiak-finance/orderly-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 \"@kodiak-finance/orderly-ui\";\nimport { ChainType, TChainItem } from \"./type\";\nimport { UseChainSelectorScriptReturn } from \"./chainSelector.script\";\nimport { useTranslation } from \"@kodiak-finance/orderly-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

@@ -5,8 +5,325 @@ import { useAppContext } from '@kodiak-finance/orderly-react-app';
 import { i18n, useTranslation } from '@kodiak-finance/orderly-i18n';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var te="orderly_selected_chains",ne=6,L=e=>{let{networkId:o,bridgeLessOnly:r}=e||{},{setStorageChain:l}=useStorageChain(),m=useConfig(),[n,{checkChainSupport:c}]=useChains(),{setChain:d,connectedChain:f}=useWalletConnector(),{onChainChanged:u,currentChainId:T,setCurrentChainId:s,wrongNetwork:C}=useAppContext(),[B,N]=useState(T),{getComponentTheme:U}=useOrderlyTheme(),h=useMemo(()=>({mainnet:(r?n.mainnet.filter(i=>i.network_infos.bridgeless):n.mainnet).map(i=>({name:i.network_infos.name,id:i.network_infos.chain_id,lowestFee:i.network_infos.bridgeless,isTestnet:false})),testnet:n.testnet.map(i=>({name:i.network_infos.name,id:i.network_infos.chain_id,lowestFee:i.network_infos.bridgeless,isTestnet:true}))}),[n,r]),x=useMemo(()=>!(U("chainSelector",{showTestnet:true}).showTestnet===false||!h.testnet.length),[h.testnet]),{recentChains:z,saveRecentChain:D}=oe(h),E=async t=>{if(f){let i=await d({chainId:t.id});return i&&{result:i,wrongNetwork:!c(t.id,m.get("networkId")),chainId:t.id}}return l(t.id),s(t.id),{result:true,wrongNetwork:false,chainId:t.id}},S=(t,i)=>{let v={isTestnet:t.isTestnet,isWalletConnected:i};e.onChainChangeAfter?.(t.id,v),u?.(t.id,v);},V=async t=>{N(t.id),e.onChainChangeBefore?.(t.id,{isTestnet:t.isTestnet});try{let i=await E?.(t);i?(e.resolve?.(i),e.close?.(),D(t),S(t,!0)):(N(void 0),S(t,!1));}catch{S(t,false);}},{selectedTab:H,onTabChange:K}=ie(h,T,C,x);return {recentChains:z,chains:h,selectChainId:B,onChainClick:V,selectedTab:H,onTabChange:K,showTestnet:x}};function ie(e,o,r,l){let[m,n]=useState("Mainnet"),c=d=>{n(d);};return useEffect(()=>{if(!l){n("Mainnet");return}if(o){if(e.mainnet?.some(u=>u.id===o)){n(r?"Testnet":"Mainnet");return}if(e.testnet?.some(u=>u.id===o)){n(r?"Mainnet":"Testnet");return}}},[o,e,r,l]),{selectedTab:m,onTabChange:c}}function oe(e){let[o,r]=useLocalStorage(te,[]),l=useMemo(()=>o?.map(n=>e.mainnet?.find(c=>c.id===parseInt(n))).filter(n=>!!n),[e,o]),m=useCallback(n=>{if(n.isTestnet)return;let c=o?.filter(d=>d!==n.id);c=[n.id,...c].slice(0,ne),r(c);},[o]);return {recentChains:l,saveRecentChain:m}}var ce=tv({slots:{icon:"",list:"oui-grid oui-grid-cols-1 oui-gap-1",mainnetList:'"',testnetList:'"',recentList:"",item:"oui-w-full oui-rounded-md",tip:"oui-text-center"},variants:{variant:{compact:{icon:"oui-w-6 oui-h-6",list:"oui-bg-base-9 oui-rounded-lg oui-p-1",mainnetList:"oui-grid-cols-2 oui-mt-4",testnetList:"oui-grid-cols-1 oui-mt-4",recentList:"oui-mt-4",item:"oui-bg-base-6 hover:oui-bg-base-7",tip:"oui-pt-6"},wide:{icon:"oui-w-[18px] oui-h-[18px]",mainnetList:"oui-grid-cols-3 oui-mt-3",testnetList:"oui-grid-cols-2 oui-mt-3",recentList:"oui-mt-3",item:"oui-bg-base-5 hover:oui-bg-base-6",tip:"oui-pt-8"}},selected:{true:{item:""},false:{item:"oui-bg-transparent"}}},compoundVariants:[{variant:"compact",selected:true,className:{item:"hover:oui-bg-base-6"}},{variant:"wide",selected:true,className:{item:"hover:oui-bg-base-5"}}],defaultVariants:{variant:"wide",selected:false}}),P=e=>{let{isWrongNetwork:o,variant:r="wide"}=e,{t:l}=useTranslation(),{list:m,recentList:n,mainnetList:c,testnetList:d,icon:f,item:u,tip:T}=ce({variant:r});return jsxs(Box,{className:cn("oui-font-semibold",e.className),children:[jsxs(Tabs,{value:e.selectedTab,variant:"contained",size:r==="wide"?"md":"lg",onValueChange:s=>e.onTabChange(s),children:[jsxs(TabPanel,{value:"Mainnet",title:l("connector.mainnet"),children:[!!e.recentChains?.length&&jsx(Flex,{gap:2,className:n(),children:e.recentChains?.map(s=>jsx(le,{item:s,onClick:()=>e.onChainClick(s),iconClassName:f()},s.id))}),jsx(Box,{r:"2xl",className:cn(m(),c()),children:e.chains.mainnet?.map(s=>{let C=e.selectChainId===s.id;return jsx(W,{selected:C,item:s,onClick:()=>e.onChainClick(s),className:u({selected:C})},s.id)})})]}),e.showTestnet&&jsx(TabPanel,{value:"Testnet",title:l("connector.testnet"),children:jsx(Box,{r:"2xl",className:cn(m(),d()),children:e.chains.testnet?.map(s=>{let C=e.selectChainId===s.id;return jsx(W,{selected:C,item:s,onClick:()=>e.onChainClick(s),className:u({selected:C})},s.id)})})})]}),o&&jsx(Box,{className:T(),children:jsx(Text,{color:"warning",size:"xs",children:l("connector.wrongNetwork.tooltip")})})]})},W=e=>{let{item:o}=e;return jsx("button",{className:e.className,onClick:e.onClick,children:jsxs(Flex,{justify:"between",className:"oui-py-2.5",px:3,children:[jsxs(Flex,{itemAlign:"center",width:"100%",className:"oui-gap-x-[6px]",children:[jsx(ChainIcon,{chainId:o.id,size:"xs"}),jsx(Text,{size:"2xs",children:o.name})]}),e.selected&&jsx(Box,{gradient:"brand",r:"full",width:4,height:4})]})})},le=e=>jsx("button",{className:"oui-border oui-border-line-12 oui-rounded-lg hover:oui-border-primary-light",onClick:e.onClick,children:jsx(Flex,{itemAlign:"center",p:2,children:jsx(ChainIcon,{chainId:e.item.id,className:e.iconClassName})})});var I=e=>{let o=L(e);return jsx(P,{...o,variant:e.variant,isWrongNetwork:e.isWrongNetwork})},F="ChainSelectorDialogId",A="ChainSelectorSheetId";registerSimpleDialog(F,I,{size:"lg",title:()=>i18n.t("connector.switchNetwork"),variant:"wide",isWrongNetwork:true});registerSimpleSheet(A,I,{title:()=>i18n.t("connector.switchNetwork"),classNames:{content:"!oui-bg-base-8",body:"!oui-bg-base-8"},variant:"compact",isWrongNetwork:true});
+// src/chainSelector.widget.tsx
+var KEY = "orderly_selected_chains";
+var MAX_RECENT_CHAINS = 6;
+var useChainSelectorScript = (options) => {
+  const { networkId, bridgeLessOnly } = options || {};
+  const { setStorageChain } = useStorageChain();
+  const config = useConfig();
+  const [_chains, { checkChainSupport }] = useChains();
+  const { setChain, connectedChain } = useWalletConnector();
+  const { onChainChanged, currentChainId, setCurrentChainId, wrongNetwork } = useAppContext();
+  const [selectChainId, setSelectChainId] = useState(
+    currentChainId
+  );
+  const { getComponentTheme } = useOrderlyTheme();
+  const chains = useMemo(() => {
+    const bridgeLessChains = bridgeLessOnly ? _chains.mainnet.filter((chain) => chain.network_infos.bridgeless) : _chains.mainnet;
+    return {
+      mainnet: bridgeLessChains.map((chain) => ({
+        name: chain.network_infos.name,
+        id: chain.network_infos.chain_id,
+        lowestFee: chain.network_infos.bridgeless,
+        isTestnet: false
+      })),
+      testnet: _chains.testnet.map((chain) => ({
+        name: chain.network_infos.name,
+        id: chain.network_infos.chain_id,
+        lowestFee: chain.network_infos.bridgeless,
+        isTestnet: true
+      }))
+    };
+  }, [_chains, bridgeLessOnly]);
+  const showTestnet = useMemo(() => {
+    const chainSelectorOverrides = getComponentTheme("chainSelector", {
+      showTestnet: true
+    });
+    if (chainSelectorOverrides.showTestnet === false || !chains.testnet.length) {
+      return false;
+    }
+    return true;
+  }, [chains.testnet]);
+  const { recentChains, saveRecentChain } = useRecentChains(chains);
+  const onChainChange = async (chain) => {
+    if (connectedChain) {
+      const result = await setChain({ chainId: chain.id });
+      if (!result)
+        return result;
+      return {
+        result,
+        wrongNetwork: !checkChainSupport(chain.id, config.get("networkId")),
+        chainId: chain.id
+      };
+    }
+    setStorageChain(chain.id);
+    setCurrentChainId(chain.id);
+    return {
+      result: true,
+      wrongNetwork: false,
+      chainId: chain.id
+    };
+  };
+  const changedCallback = (chain, isWalletConnected) => {
+    const params = {
+      isTestnet: chain.isTestnet,
+      isWalletConnected
+    };
+    options.onChainChangeAfter?.(chain.id, params);
+    onChainChanged?.(chain.id, params);
+  };
+  const onChainClick = async (chain) => {
+    setSelectChainId(chain.id);
+    options.onChainChangeBefore?.(chain.id, { isTestnet: chain.isTestnet });
+    try {
+      const complete = await onChainChange?.(chain);
+      if (complete) {
+        options.resolve?.(complete);
+        options.close?.();
+        saveRecentChain(chain);
+        changedCallback(chain, true);
+      } else {
+        setSelectChainId(void 0);
+        changedCallback(chain, false);
+      }
+    } catch (err) {
+      changedCallback(chain, false);
+    }
+  };
+  const { selectedTab, onTabChange } = useChainTab(
+    chains,
+    currentChainId,
+    wrongNetwork,
+    showTestnet
+  );
+  return {
+    recentChains,
+    chains,
+    selectChainId,
+    onChainClick,
+    selectedTab,
+    onTabChange,
+    showTestnet
+  };
+};
+function useChainTab(chains, currentChainId, wrongNetwork, showTestnet) {
+  const [selectedTab, setSelectedTab] = useState("Mainnet" /* Mainnet */);
+  const onTabChange = (tab) => {
+    setSelectedTab(tab);
+  };
+  useEffect(() => {
+    if (!showTestnet) {
+      setSelectedTab("Mainnet" /* Mainnet */);
+      return;
+    }
+    if (currentChainId) {
+      const isMainnet = chains.mainnet?.some(
+        (chain) => chain.id === currentChainId
+      );
+      if (isMainnet) {
+        setSelectedTab(wrongNetwork ? "Testnet" /* Testnet */ : "Mainnet" /* Mainnet */);
+        return;
+      }
+      const isTestnet = chains.testnet?.some(
+        (chain) => chain.id === currentChainId
+      );
+      if (isTestnet) {
+        setSelectedTab(wrongNetwork ? "Mainnet" /* Mainnet */ : "Testnet" /* Testnet */);
+        return;
+      }
+    }
+  }, [currentChainId, chains, wrongNetwork, showTestnet]);
+  return { selectedTab, onTabChange };
+}
+function useRecentChains(chains) {
+  const [recentChainsIds, setRecentChainsIds] = useLocalStorage(
+    KEY,
+    []
+  );
+  const recentChains = useMemo(() => {
+    return recentChainsIds?.map(
+      (id) => chains.mainnet?.find((item) => item.id === parseInt(id))
+    ).filter((chains2) => !!chains2);
+  }, [chains, recentChainsIds]);
+  const saveRecentChain = useCallback(
+    (chain) => {
+      if (chain.isTestnet) {
+        return;
+      }
+      let ids = recentChainsIds?.filter((id) => id !== chain.id);
+      ids = [chain.id, ...ids].slice(0, MAX_RECENT_CHAINS);
+      setRecentChainsIds(ids);
+    },
+    [recentChainsIds]
+  );
+  return { recentChains, saveRecentChain };
+}
+var chainSelectorVariants = tv({
+  slots: {
+    icon: "",
+    list: "oui-grid oui-grid-cols-1 oui-gap-1",
+    mainnetList: '"',
+    testnetList: '"',
+    recentList: "",
+    item: "oui-w-full oui-rounded-md",
+    tip: "oui-text-center"
+  },
+  variants: {
+    variant: {
+      compact: {
+        icon: "oui-w-6 oui-h-6",
+        list: "oui-bg-base-9 oui-rounded-lg oui-p-1",
+        mainnetList: "oui-grid-cols-2 oui-mt-4",
+        testnetList: "oui-grid-cols-1 oui-mt-4",
+        recentList: "oui-mt-4",
+        item: "oui-bg-base-6 hover:oui-bg-base-7",
+        tip: "oui-pt-6"
+      },
+      wide: {
+        icon: "oui-w-[18px] oui-h-[18px]",
+        mainnetList: "oui-grid-cols-3 oui-mt-3",
+        testnetList: "oui-grid-cols-2 oui-mt-3",
+        recentList: "oui-mt-3",
+        item: "oui-bg-base-5 hover:oui-bg-base-6",
+        tip: "oui-pt-8"
+      }
+    },
+    selected: {
+      true: {
+        item: ""
+      },
+      false: { item: "oui-bg-transparent" }
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "compact",
+      selected: true,
+      className: {
+        item: "hover:oui-bg-base-6"
+      }
+    },
+    {
+      variant: "wide",
+      selected: true,
+      className: {
+        item: "hover:oui-bg-base-5"
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: "wide",
+    selected: false
+  }
+});
+var ChainSelector = (props) => {
+  const { isWrongNetwork, variant = "wide" } = props;
+  const { t } = useTranslation();
+  const { list, recentList, mainnetList, testnetList, icon, item, tip } = chainSelectorVariants({ variant });
+  return /* @__PURE__ */ jsxs(Box, { className: cn("oui-font-semibold", props.className), children: [
+    /* @__PURE__ */ jsxs(
+      Tabs,
+      {
+        value: props.selectedTab,
+        variant: "contained",
+        size: variant === "wide" ? "md" : "lg",
+        onValueChange: (e) => props.onTabChange(e),
+        children: [
+          /* @__PURE__ */ jsxs(TabPanel, { value: "Mainnet" /* Mainnet */, title: t("connector.mainnet"), children: [
+            !!props.recentChains?.length && /* @__PURE__ */ jsx(Flex, { gap: 2, className: recentList(), children: props.recentChains?.map((item2) => {
+              return /* @__PURE__ */ jsx(
+                RecentChainItem,
+                {
+                  item: item2,
+                  onClick: () => props.onChainClick(item2),
+                  iconClassName: icon()
+                },
+                item2.id
+              );
+            }) }),
+            /* @__PURE__ */ jsx(Box, { r: "2xl", className: cn(list(), mainnetList()), children: props.chains.mainnet?.map((chain) => {
+              const selected = props.selectChainId === chain.id;
+              return /* @__PURE__ */ jsx(
+                ChainItem,
+                {
+                  selected,
+                  item: chain,
+                  onClick: () => props.onChainClick(chain),
+                  className: item({ selected })
+                },
+                chain.id
+              );
+            }) })
+          ] }),
+          props.showTestnet && /* @__PURE__ */ jsx(TabPanel, { value: "Testnet" /* Testnet */, title: t("connector.testnet"), children: /* @__PURE__ */ jsx(Box, { r: "2xl", className: cn(list(), testnetList()), children: props.chains.testnet?.map((chain) => {
+            const selected = props.selectChainId === chain.id;
+            return /* @__PURE__ */ jsx(
+              ChainItem,
+              {
+                selected,
+                item: chain,
+                onClick: () => props.onChainClick(chain),
+                className: item({ selected })
+              },
+              chain.id
+            );
+          }) }) })
+        ]
+      }
+    ),
+    isWrongNetwork && /* @__PURE__ */ jsx(Box, { className: tip(), children: /* @__PURE__ */ jsx(Text, { color: "warning", size: "xs", children: t("connector.wrongNetwork.tooltip") }) })
+  ] });
+};
+var ChainItem = (props) => {
+  const { item } = props;
+  return /* @__PURE__ */ jsx("button", { className: props.className, onClick: props.onClick, children: /* @__PURE__ */ jsxs(Flex, { justify: "between", className: "oui-py-2.5", px: 3, children: [
+    /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", width: "100%", className: "oui-gap-x-[6px]", children: [
+      /* @__PURE__ */ jsx(ChainIcon, { chainId: item.id, size: "xs" }),
+      /* @__PURE__ */ jsx(Text, { size: "2xs", children: item.name })
+    ] }),
+    props.selected && /* @__PURE__ */ jsx(Box, { gradient: "brand", r: "full", width: 4, height: 4 })
+  ] }) });
+};
+var RecentChainItem = (props) => {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: "oui-border oui-border-line-12 oui-rounded-lg hover:oui-border-primary-light",
+      onClick: props.onClick,
+      children: /* @__PURE__ */ jsx(Flex, { itemAlign: "center", p: 2, children: /* @__PURE__ */ jsx(ChainIcon, { chainId: props.item.id, className: props.iconClassName }) })
+    }
+  );
+};
+var ChainSelectorWidget = (props) => {
+  const state = useChainSelectorScript(props);
+  return /* @__PURE__ */ jsx(
+    ChainSelector,
+    {
+      ...state,
+      variant: props.variant,
+      isWrongNetwork: props.isWrongNetwork
+    }
+  );
+};
+var ChainSelectorDialogId = "ChainSelectorDialogId";
+var ChainSelectorSheetId = "ChainSelectorSheetId";
+registerSimpleDialog(ChainSelectorDialogId, ChainSelectorWidget, {
+  size: "lg",
+  title: () => i18n.t("connector.switchNetwork"),
+  variant: "wide",
+  isWrongNetwork: true
+});
+registerSimpleSheet(ChainSelectorSheetId, ChainSelectorWidget, {
+  title: () => i18n.t("connector.switchNetwork"),
+  classNames: {
+    content: "!oui-bg-base-8",
+    body: "!oui-bg-base-8"
+  },
+  variant: "compact",
+  isWrongNetwork: true
+});
 
-export { F as ChainSelectorDialogId, A as ChainSelectorSheetId, I as ChainSelectorWidget };
+export { ChainSelectorDialogId, ChainSelectorSheetId, ChainSelectorWidget };
 //# sourceMappingURL=out.js.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":["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 \"@kodiak-finance/orderly-ui\";\nimport {\n  useChainSelectorScript,\n  UseChainSelectorScriptOptions,\n} from \"./chainSelector.script\";\nimport { ChainSelector, ChainSelectorProps } from \"./chainSelector.ui\";\nimport { i18n } from \"@kodiak-finance/orderly-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 \"@kodiak-finance/orderly-hooks\";\nimport {\n  useChains,\n  useWalletConnector,\n  useLocalStorage,\n} from \"@kodiak-finance/orderly-hooks\";\nimport { NetworkId } from \"@kodiak-finance/orderly-types\";\nimport { useAppContext } from \"@kodiak-finance/orderly-react-app\";\nimport { ChainType, TChainItem } from \"./type\";\nimport { useOrderlyTheme } from \"@kodiak-finance/orderly-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 \"@kodiak-finance/orderly-ui\";\nimport { ChainType, TChainItem } from \"./type\";\nimport { UseChainSelectorScriptReturn } from \"./chainSelector.script\";\nimport { useTranslation } from \"@kodiak-finance/orderly-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.widget.tsx","../src/chainSelector.script.ts","../src/chainSelector.ui.tsx"],"names":["chains","item","jsx"],"mappings":"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","sourcesContent":["import { registerSimpleDialog, registerSimpleSheet } from \"@kodiak-finance/orderly-ui\";\nimport {\n  useChainSelectorScript,\n  UseChainSelectorScriptOptions,\n} from \"./chainSelector.script\";\nimport { ChainSelector, ChainSelectorProps } from \"./chainSelector.ui\";\nimport { i18n } from \"@kodiak-finance/orderly-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 \"@kodiak-finance/orderly-hooks\";\nimport {\n  useChains,\n  useWalletConnector,\n  useLocalStorage,\n} from \"@kodiak-finance/orderly-hooks\";\nimport { NetworkId } from \"@kodiak-finance/orderly-types\";\nimport { useAppContext } from \"@kodiak-finance/orderly-react-app\";\nimport { ChainType, TChainItem } from \"./type\";\nimport { useOrderlyTheme } from \"@kodiak-finance/orderly-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 \"@kodiak-finance/orderly-ui\";\nimport { ChainType, TChainItem } from \"./type\";\nimport { UseChainSelectorScriptReturn } from \"./chainSelector.script\";\nimport { useTranslation } from \"@kodiak-finance/orderly-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

@@ -1,6 +1,6 @@
 {
   "name": "@kodiak-finance/orderly-ui-chain-selector",
-  "version": "2.8.18",
+  "version": "2.8.19-rc.0",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -14,11 +14,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@kodiak-finance/orderly-i18n": "2.8.18",
-    "@kodiak-finance/orderly-hooks": "2.8.18",
-    "@kodiak-finance/orderly-types": "2.8.18",
-    "@kodiak-finance/orderly-ui": "2.8.18",
-    "@kodiak-finance/orderly-react-app": "2.8.18"
+    "@kodiak-finance/orderly-i18n": "2.8.19-rc.0",
+    "@kodiak-finance/orderly-hooks": "2.8.19-rc.0",
+    "@kodiak-finance/orderly-types": "2.8.19-rc.0",
+    "@kodiak-finance/orderly-react-app": "2.8.19-rc.0",
+    "@kodiak-finance/orderly-ui": "2.8.19-rc.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.2",
@@ -30,7 +30,7 @@
     "tailwindcss": "^3.4.4",
     "typescript": "^5.1.6",
     "tsup": "^7.1.0",
-    "tsconfig": "0.11.17"
+    "tsconfig": "0.11.18-rc.0"
   },
   "peerDependencies": {
     "react": ">=18",