@orderly.network/ui-chain-selector 2.0.2 → 2.0.3

package/dist/index.d.mts

@@ -1,28 +1,67 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { NetworkId } from '@orderly.network/types';
 
-type ChainItem = {
+type TChainItem = {
     name: string;
     id: number;
     lowestFee?: boolean;
-    isTestnet?: boolean;
+    isTestnet: boolean;
 };
+declare enum ChainType {
+    Mainnet = "Mainnet",
+    Testnet = "Testnet"
+}
 
-declare const ChainTile: (props: {
-    selected: boolean;
-    item: ChainItem;
-    onClick?: ((chain: ChainItem) => void) | undefined;
-}) => react_jsx_runtime.JSX.Element;
+type UseChainSelectorScriptReturn = ReturnType<typeof useChainSelectorScript>;
+type UseChainSelectorScriptOptions = {
+    networkId?: NetworkId;
+    bridgeLessOnly?: boolean;
+    close?: () => void;
+    resolve?: (isSuccess: boolean) => void;
+    reject?: () => void;
+    onChainChangeBefore?: (chainId: number, state: {
+        isTestnet: boolean;
+    }) => void;
+    onChainChangeAfter?: (chainId: number, state: {
+        isTestnet: boolean;
+        isWalletConnected: boolean;
+    }) => void;
+};
+declare const useChainSelectorScript: (options: UseChainSelectorScriptOptions) => {
+    recentChains: TChainItem[];
+    chains: {
+        mainnet: {
+            name: string;
+            id: number;
+            lowestFee: boolean | undefined;
+            isTestnet: boolean;
+        }[];
+        testnet: {
+            name: string;
+            id: number;
+            lowestFee: boolean | undefined;
+            isTestnet: boolean;
+        }[];
+    };
+    selectChainId: number | undefined;
+    onChainClick: (chain: TChainItem) => Promise<void>;
+    selectedTab: ChainType;
+    onTabChange: (tab: ChainType) => void;
+};
+
+type ChainSelectorProps = {
+    isWrongNetwork?: boolean;
+    /**
+     * wide: This represents the wide screen (desktop) UI mode
+     * compact: This indicates a compact (mobile) UI pattern.
+     */
+    variant?: "wide" | "compact";
+    className?: string;
+} & UseChainSelectorScriptReturn;
 
-declare const ChainSelectorWidget: (props: {
-    networkId?: NetworkId | undefined;
-    bridgeLessOnly?: boolean | undefined;
-    close?: (() => void) | undefined;
-    resolve?: ((isSuccess: boolean) => void) | undefined;
-    reject?: (() => void) | undefined;
-    isWrongNetwork?: boolean | undefined;
-}) => react_jsx_runtime.JSX.Element;
-declare const ChainSelectorId = "ChainSelector";
+type ChainSelectorWidgetProps = UseChainSelectorScriptOptions & Pick<ChainSelectorProps, "isWrongNetwork" | "variant" | "className">;
+declare const ChainSelectorWidget: (props: ChainSelectorWidgetProps) => react_jsx_runtime.JSX.Element;
+declare const ChainSelectorDialogId = "ChainSelectorDialogId";
 declare const ChainSelectorSheetId = "ChainSelectorSheetId";
 
-export { ChainSelectorId, ChainSelectorSheetId, ChainSelectorWidget, ChainTile };
+export { ChainSelectorDialogId, ChainSelectorSheetId, ChainSelectorWidget };

package/dist/index.d.ts

@@ -1,28 +1,67 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { NetworkId } from '@orderly.network/types';
 
-type ChainItem = {
+type TChainItem = {
     name: string;
     id: number;
     lowestFee?: boolean;
-    isTestnet?: boolean;
+    isTestnet: boolean;
 };
+declare enum ChainType {
+    Mainnet = "Mainnet",
+    Testnet = "Testnet"
+}
 
-declare const ChainTile: (props: {
-    selected: boolean;
-    item: ChainItem;
-    onClick?: ((chain: ChainItem) => void) | undefined;
-}) => react_jsx_runtime.JSX.Element;
+type UseChainSelectorScriptReturn = ReturnType<typeof useChainSelectorScript>;
+type UseChainSelectorScriptOptions = {
+    networkId?: NetworkId;
+    bridgeLessOnly?: boolean;
+    close?: () => void;
+    resolve?: (isSuccess: boolean) => void;
+    reject?: () => void;
+    onChainChangeBefore?: (chainId: number, state: {
+        isTestnet: boolean;
+    }) => void;
+    onChainChangeAfter?: (chainId: number, state: {
+        isTestnet: boolean;
+        isWalletConnected: boolean;
+    }) => void;
+};
+declare const useChainSelectorScript: (options: UseChainSelectorScriptOptions) => {
+    recentChains: TChainItem[];
+    chains: {
+        mainnet: {
+            name: string;
+            id: number;
+            lowestFee: boolean | undefined;
+            isTestnet: boolean;
+        }[];
+        testnet: {
+            name: string;
+            id: number;
+            lowestFee: boolean | undefined;
+            isTestnet: boolean;
+        }[];
+    };
+    selectChainId: number | undefined;
+    onChainClick: (chain: TChainItem) => Promise<void>;
+    selectedTab: ChainType;
+    onTabChange: (tab: ChainType) => void;
+};
+
+type ChainSelectorProps = {
+    isWrongNetwork?: boolean;
+    /**
+     * wide: This represents the wide screen (desktop) UI mode
+     * compact: This indicates a compact (mobile) UI pattern.
+     */
+    variant?: "wide" | "compact";
+    className?: string;
+} & UseChainSelectorScriptReturn;
 
-declare const ChainSelectorWidget: (props: {
-    networkId?: NetworkId | undefined;
-    bridgeLessOnly?: boolean | undefined;
-    close?: (() => void) | undefined;
-    resolve?: ((isSuccess: boolean) => void) | undefined;
-    reject?: (() => void) | undefined;
-    isWrongNetwork?: boolean | undefined;
-}) => react_jsx_runtime.JSX.Element;
-declare const ChainSelectorId = "ChainSelector";
+type ChainSelectorWidgetProps = UseChainSelectorScriptOptions & Pick<ChainSelectorProps, "isWrongNetwork" | "variant" | "className">;
+declare const ChainSelectorWidget: (props: ChainSelectorWidgetProps) => react_jsx_runtime.JSX.Element;
+declare const ChainSelectorDialogId = "ChainSelectorDialogId";
 declare const ChainSelectorSheetId = "ChainSelectorSheetId";
 
-export { ChainSelectorId, ChainSelectorSheetId, ChainSelectorWidget, ChainTile };
+export { ChainSelectorDialogId, ChainSelectorSheetId, ChainSelectorWidget };

package/dist/index.js

@@ -1,16 +1,15 @@
 'use strict';
 
-var react = require('react');
 var ui = require('@orderly.network/ui');
-var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var hooks = require('@orderly.network/hooks');
 var reactApp = require('@orderly.network/react-app');
+var jsxRuntime = require('react/jsx-runtime');
 
-var v=e=>{let{isWrongNetwork:a=!0}=e,[c,f]=react.useState(e.currentChainId),[d,u]=react.useState("Mainnet");react.useEffect(()=>{if(e.currentChainId){let t=e.chains.mainnet?.some(r=>r.id===e.currentChainId),s=e.chains.testnet?.some(r=>r.id===e.currentChainId);t?u("Mainnet"):s&&u("Testnet");}},[e.currentChainId,e.chains]);let h=async t=>{f(t.id);let s=await e.onChainChange?.(t);s?(e.resolve?.(s),e.close?.(),e.chainChangedCallback?.(t.id,{isTestnet:t.isTestnet??!1,isWalletConnected:!0})):f(void 0);},I=t=>{u(t);};return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(ui.Box,{intensity:900,className:"oui-bg-base-8",children:jsxRuntime.jsxs(ui.Tabs,{value:d,variant:"contained",size:"sm",classNames:{tabsList:"oui-mt-3"},onValueChange:t=>I(t),children:[jsxRuntime.jsxs(ui.TabPanel,{value:"Mainnet",title:"Mainnet",children:[e.storageChains?.length?jsxRuntime.jsx(ui.Flex,{gap:2,className:"oui-text-center oui-my-3",children:e.storageChains?.map(t=>jsxRuntime.jsx(z,{item:t,selected:c===t.id,onClick:s=>h(s)},t.id))}):null,jsxRuntime.jsx(ui.Box,{r:"2xl",p:1,className:"oui-bg-base-9 oui-mt-3 oui-overflow-auto oui-max-h-[562px] xl:oui-max-h-[500px] oui-hide-scrollbar oui-grid oui-grid-cols-2 oui-rounded-lg oui-gap-1",children:e.chains.mainnet?.map((t,s)=>jsxRuntime.jsx(w,{selected:c===t.id,item:t,onClick:r=>h(r)},t.id))})]}),jsxRuntime.jsx(ui.TabPanel,{value:"Testnet",title:"Testnet",children:jsxRuntime.jsx(ui.Box,{r:"2xl",p:1,className:"oui-bg-base-9 oui-mt-3 oui-grid oui-grid-cols-1 oui-rounded-lg oui-gap-1",children:e.chains.testnet?.map((t,s)=>jsxRuntime.jsx(w,{selected:c===t.id,onClick:r=>h(r),item:t},t.id))})})]})}),a&&jsxRuntime.jsx(ui.Box,{pt:5,pb:4,className:"oui-text-center",children:jsxRuntime.jsx(ui.Text,{color:"warning",size:"xs",children:"Please switch to a supported network to continue."})})]})},w=e=>{let{item:a}=e;return jsxRuntime.jsx("button",{className:e.selected?"oui-w-full oui-bg-base-6 oui-rounded-lg hover:oui-bg-base-7":"oui-w-full oui-rounded-lg hover:oui-bg-base-7 ",onClick:()=>{e.onClick?.(a);},children:jsxRuntime.jsxs(ui.Flex,{justify:"between",children:[jsxRuntime.jsxs(ui.Flex,{itemAlign:"center",width:"100%",py:3,px:4,gap:2,children:[jsxRuntime.jsx(ui.ChainIcon,{chainId:a.id}),jsxRuntime.jsx(ui.Text,{size:"2xs",children:a.name})]}),e.selected&&jsxRuntime.jsx(ui.Box,{gradient:"brand",r:"full",width:"6px",height:"6px",mr:4})]})})},z=e=>{let{item:a}=e;return jsxRuntime.jsx("button",{className:e.selected?"oui-border oui-border-line-12 oui-rounded-md oui-border-primary-light":"oui-border oui-border-line-12 oui-rounded-md hover:oui-border-primary-light",onClick:()=>{e.onClick?.(a);},children:jsxRuntime.jsx(ui.Flex,{justify:"between",children:jsxRuntime.jsx(ui.Flex,{itemAlign:"center",width:"100%",p:2,gap:1,children:jsxRuntime.jsx(ui.ChainIcon,{chainId:a.id,className:"oui-w-[18px] oui-h-[18px]"})})})})};var K="orderly_selected_chains",V=6,p=e=>{let{networkId:a,bridgeLessOnly:c}=e||{},f=hooks.useConfig(),[d,{checkChainSupport:u}]=hooks.useChains(),{setChain:h,connectedChain:I}=hooks.useWalletConnector(),[t,s]=hooks.useLocalStorage(K,[]),{onChainChanged:r,currentChainId:F,setCurrentChainId:B}=reactApp.useAppContext(),m=react.useMemo(()=>({mainnet:(c?d.mainnet.filter(o=>o.network_infos.bridgeless):d.mainnet).map(o=>({name:o.network_infos.name,id:o.network_infos.chain_id,lowestFee:o.network_infos.bridgeless,isTestnet:!1})),testnet:d.testnet.map(o=>({name:o.network_infos.name,id:o.network_infos.chain_id,lowestFee:o.network_infos.bridgeless,isTestnet:!0}))}),[d,a,c]),L=react.useMemo(()=>m?.mainnet?.filter(i=>t.includes(i.id)),[t,m])||[],x=react.useCallback(i=>{if(!m.mainnet?.filter(o=>o.id===i))return;let l=t?.filter(o=>o!==i);l=[i,...l].slice(0,V),s(l);},[m.mainnet,t,s]);return {storageChains:L,chains:m,onChainChange:async i=>{if(!I)return B(i.id),x(i.id),{result:!0,wrongNetwork:!1,chainId:i.id};let l=await h({chainId:i.id});return l&&(x(i.id),{result:l,wrongNetwork:!u(i.id,f.get("networkId")),chainId:i.id})},chainChangedCallback:r,currentChainId:I?.id??F}};var k=e=>{let a=p(e);return jsxRuntime.jsx(v,{...a,close:e.close,resolve:e.resolve,isWrongNetwork:e.isWrongNetwork})},M="ChainSelector",W="ChainSelectorSheetId";ui.registerSimpleDialog(M,k,{size:"sm",title:"Switch Network"});ui.registerSimpleSheet(W,k,{title:"Switch Network",classNames:{content:"!oui-bg-base-8",body:"!oui-bg-base-8"}});
+var G="orderly_selected_chains",J=6,v=e=>{let{networkId:i,bridgeLessOnly:c}=e||{},d=hooks.useConfig(),[a,{checkChainSupport:l}]=hooks.useChains(),{setChain:r,connectedChain:C}=hooks.useWalletConnector(),{onChainChanged:m,currentChainId:b,setCurrentChainId:o,wrongNetwork:u}=reactApp.useAppContext(),[F,k]=react.useState(b),p=react.useMemo(()=>({mainnet:(c?a.mainnet.filter(n=>n.network_infos.bridgeless):a.mainnet).map(n=>({name:n.network_infos.name,id:n.network_infos.chain_id,lowestFee:n.network_infos.bridgeless,isTestnet:!1})),testnet:a.testnet.map(n=>({name:n.network_infos.name,id:n.network_infos.chain_id,lowestFee:n.network_infos.bridgeless,isTestnet:!0}))}),[a,c]),{recentChains:A,saveRecentChain:B}=Z(p),U=async t=>{if(C){let n=await r({chainId:t.id});return n&&{result:n,wrongNetwork:!l(t.id,d.get("networkId")),chainId:t.id}}return o(t.id),{result:!0,wrongNetwork:!1,chainId:t.id}},S=(t,n)=>{let I={isTestnet:t.isTestnet,isWalletConnected:n};e.onChainChangeAfter?.(t.id,I),m?.(t.id,I);},O=async t=>{k(t.id),e.onChainChangeBefore?.(t.id,{isTestnet:t.isTestnet});try{let n=await U?.(t);n?(e.resolve?.(n),e.close?.(),B(t),S(t,!0)):(k(void 0),S(t,!1));}catch{S(t,!1);}},{selectedTab:z,onTabChange:D}=Q(p,b,u);return {recentChains:A,chains:p,selectChainId:F,onChainClick:O,selectedTab:z,onTabChange:D}};function Q(e,i,c){let[d,a]=react.useState("Mainnet"),l=r=>{a(r);};return react.useEffect(()=>{if(i){if(e.mainnet?.some(m=>m.id===i)){a(c?"Testnet":"Mainnet");return}if(e.testnet?.some(m=>m.id===i)){a(c?"Mainnet":"Testnet");return}}},[i,e,c]),{selectedTab:d,onTabChange:l}}function Z(e){let[i,c]=hooks.useLocalStorage(G,[]),d=react.useMemo(()=>i?.map(l=>e.mainnet?.find(r=>r.id===parseInt(l))),[e,i]),a=react.useCallback(l=>{if(l.isTestnet)return;let r=i?.filter(C=>C!==l.id);r=[l.id,...r].slice(0,J),c(r);},[i]);return {recentChains:d,saveRecentChain:a}}var te=ui.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:!0,className:{item:"hover:oui-bg-base-6"}},{variant:"wide",selected:!0,className:{item:"hover:oui-bg-base-5"}}],defaultVariants:{variant:"wide",selected:!1}}),R=e=>{let{isWrongNetwork:i,variant:c="wide"}=e,{list:d,recentList:a,mainnetList:l,testnetList:r,icon:C,item:m,tip:b}=te({variant:c});return jsxRuntime.jsxs(ui.Box,{className:ui.cn("oui-font-semibold",e.className),children:[jsxRuntime.jsxs(ui.Tabs,{value:e.selectedTab,variant:"contained",size:c==="wide"?"md":"lg",onValueChange:o=>e.onTabChange(o),children:[jsxRuntime.jsxs(ui.TabPanel,{value:"Mainnet",title:"Mainnet",children:[!!e.recentChains?.length&&jsxRuntime.jsx(ui.Flex,{gap:2,className:a(),children:e.recentChains?.map(o=>jsxRuntime.jsx(ne,{item:o,onClick:()=>e.onChainClick(o),iconClassName:C()},o.id))}),jsxRuntime.jsx(ui.Box,{r:"2xl",className:ui.cn(d(),l()),children:e.chains.mainnet?.map(o=>{let u=e.selectChainId===o.id;return jsxRuntime.jsx(L,{selected:u,item:o,onClick:()=>e.onChainClick(o),className:m({selected:u})},o.id)})})]}),jsxRuntime.jsx(ui.TabPanel,{value:"Testnet",title:"Testnet",children:jsxRuntime.jsx(ui.Box,{r:"2xl",className:ui.cn(d(),r()),children:e.chains.testnet?.map(o=>{let u=e.selectChainId===o.id;return jsxRuntime.jsx(L,{selected:u,item:o,onClick:()=>e.onChainClick(o),className:m({selected:u})},o.id)})})})]}),i&&jsxRuntime.jsx(ui.Box,{className:b(),children:jsxRuntime.jsx(ui.Text,{color:"warning",size:"xs",children:"Please switch to a supported network to continue."})})]})},L=e=>{let{item:i}=e;return jsxRuntime.jsx("button",{className:e.className,onClick:e.onClick,children:jsxRuntime.jsxs(ui.Flex,{justify:"between",className:"oui-py-2.5",px:3,children:[jsxRuntime.jsxs(ui.Flex,{itemAlign:"center",width:"100%",className:"oui-gap-x-[6px]",children:[jsxRuntime.jsx(ui.ChainIcon,{chainId:i.id,size:"xs"}),jsxRuntime.jsx(ui.Text,{size:"2xs",children:i.name})]}),e.selected&&jsxRuntime.jsx(ui.Box,{gradient:"brand",r:"full",width:4,height:4})]})})},ne=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(ui.Flex,{itemAlign:"center",p:2,children:jsxRuntime.jsx(ui.ChainIcon,{chainId:e.item.id,className:e.iconClassName})})});var w=e=>{let i=v(e);return jsxRuntime.jsx(R,{...i,variant:e.variant,isWrongNetwork:e.isWrongNetwork})},M="ChainSelectorDialogId",P="ChainSelectorSheetId";ui.registerSimpleDialog(M,w,{size:"lg",title:"Switch Network",variant:"wide",isWrongNetwork:!0});ui.registerSimpleSheet(P,w,{title:"Switch Network",classNames:{content:"!oui-bg-base-8",body:"!oui-bg-base-8"},variant:"compact",isWrongNetwork:!0});
 
-exports.ChainSelectorId = M;
-exports.ChainSelectorSheetId = W;
-exports.ChainSelectorWidget = k;
-exports.ChainTile = w;
+exports.ChainSelectorDialogId = M;
+exports.ChainSelectorSheetId = P;
+exports.ChainSelectorWidget = w;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/chainSelector.ui.tsx","../src/chainSelector.widget.tsx","../src/chainSelector.script.ts"],"names":["useState","useEffect","Box","Flex","Text","ChainIcon","Tabs","TabPanel","Fragment","jsx","jsxs","ChainSelector","props","isWrongNetwork","select","setSelect","selectedTab","setSelectedTab","isMainnet","chain","isTestnet","onChange","complete","onTabChange","tab","e","item","RecommandChain","index","ChainTile","registerSimpleDialog","registerSimpleSheet","useMemo","useCallback","useConfig","useChains","useWalletConnector","useLocalStorage","useAppContext","KEY","MAX_STORAGE_CHAINS","useChainSelectorBuilder","options","networkId","bridgeLessOnly","config","chains","checkChainSupport","setChain","connectedChain","storageChainsIds","setStorageChainsIds","onChainChanged","currentChainId","setCurrentChainId","filteredChains","storageChains","saveChainIdToLocalStorage","id","_storageChains","storageChainsId","result","ChainSelectorWidget","state","ChainSelectorId","ChainSelectorSheetId"],"mappings":"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","sourcesContent":["import { useState, useMemo, useEffect, useCallback } from \"react\";\nimport {\n  Box,\n  Flex,\n  Text,\n  ChainIcon,\n  Tabs,\n  TabPanel,\n  TabsList,\n} from \"@orderly.network/ui\";\nimport type { ChainItem } from \"./types\";\nimport { ChainSelectorType } from \"./types\";\n\n//------------------ ChainSelector start ------------------\nexport const ChainSelector = (props: {\n  chains: {\n    mainnet?: ChainItem[];\n    testnet?: ChainItem[];\n  };\n  storageChains?: ChainItem[];\n  onChainChange?: (chain: ChainItem) => Promise<any>;\n  currentChainId?: number;\n  close?: () => void;\n  resolve?: (isSuccess: boolean) => void;\n  chainChangedCallback?: (\n    chainId: number,\n    state: {\n      isTestnet: boolean;\n      isWalletConnected: boolean;\n    }\n  ) => void;\n  isWrongNetwork?: boolean;\n}) => {\n  const { isWrongNetwork = true } = props;\n  const [select, setSelect] = useState<number | undefined>(\n    props.currentChainId\n  );\n  const [selectedTab, setSelectedTab] = useState<ChainSelectorType>(\n    ChainSelectorType.Mainnet\n  );\n\n  useEffect(() => {\n    if (props.currentChainId) {\n      const isMainnet = props.chains.mainnet?.some(\n        (chain) => chain.id === props.currentChainId\n      );\n      const isTestnet = props.chains.testnet?.some(\n        (chain) => chain.id === props.currentChainId\n      );\n      if (isMainnet) {\n        setSelectedTab(ChainSelectorType.Mainnet);\n      } else if (isTestnet) {\n        setSelectedTab(ChainSelectorType.Testnet);\n      }\n    }\n  }, [props.currentChainId, props.chains]);\n\n  // props.currentChainId\n  const onChange = async (chain: ChainItem) => {\n    setSelect(chain.id);\n    const complete = await props.onChainChange?.(chain);\n\n    if (complete) {\n      props.resolve?.(complete);\n      props.close?.();\n\n      props.chainChangedCallback?.(chain.id, {\n        isTestnet: chain.isTestnet ?? false,\n        isWalletConnected: true,\n      });\n    } else {\n      setSelect(undefined);\n    }\n  };\n\n  const onTabChange = (tab: ChainSelectorType) => {\n    setSelectedTab(tab);\n  };\n\n  return (\n    <>\n      <Box intensity={900} className=\"oui-bg-base-8\">\n        <Tabs\n          value={selectedTab}\n          variant=\"contained\"\n          size=\"sm\"\n          classNames={{\n            tabsList: \"oui-mt-3\",\n          }}\n          onValueChange={(e) => onTabChange(e as ChainSelectorType)}\n        >\n          <TabPanel\n            value={ChainSelectorType.Mainnet}\n            title={ChainSelectorType.Mainnet}\n          >\n            {props.storageChains?.length ? (\n              <Flex gap={2} className=\"oui-text-center oui-my-3\">\n                {props.storageChains?.map((item) => {\n                  return (\n                    <RecommandChain\n                      item={item}\n                      key={item.id}\n                      selected={select === item.id}\n                      onClick={(chain: ChainItem) => onChange(chain)}\n                    />\n                  );\n                })}\n              </Flex>\n            ) : null}\n            <Box\n              r=\"2xl\"\n              p={1}\n              className=\"oui-bg-base-9 oui-mt-3 oui-overflow-auto oui-max-h-[562px] xl:oui-max-h-[500px] oui-hide-scrollbar oui-grid oui-grid-cols-2 oui-rounded-lg oui-gap-1\"\n            >\n              {props.chains.mainnet?.map((item, index) => {\n                return (\n                  <ChainTile\n                    key={item.id}\n                    selected={select === item.id}\n                    // {...item}\n                    item={item}\n                    onClick={(chain: ChainItem) => onChange(chain)}\n                  />\n                );\n              })}\n            </Box>\n          </TabPanel>\n\n          <TabPanel\n            value={ChainSelectorType.Testnet}\n            title={ChainSelectorType.Testnet}\n          >\n            <Box r=\"2xl\" p={1} className=\"oui-bg-base-9 oui-mt-3 oui-grid oui-grid-cols-1 oui-rounded-lg oui-gap-1\">\n              {props.chains.testnet?.map((item, index) => {\n                return (\n                  <ChainTile\n                    key={item.id}\n                    selected={select === item.id}\n                    // {...item}\n                    onClick={(chain: ChainItem) => onChange(chain)}\n                    item={item}\n                  />\n                );\n              })}\n            </Box>\n          </TabPanel>\n        </Tabs>\n      </Box>\n\n      {isWrongNetwork && (\n        <Box pt={5} pb={4} className=\"oui-text-center\">\n          <Text color=\"warning\" size=\"xs\">\n            Please switch to a supported network to continue.\n          </Text>\n        </Box>\n      )}\n    </>\n  );\n};\n// ------------------ ChainSelector end ------------------\n\n// ------------------ ChainItem start ------------------\nexport const ChainTile = (props: {\n  // id: number;\n  // name: string;\n  // lowestFee?: boolean;\n  selected: boolean;\n  item: ChainItem;\n  onClick?: (chain: ChainItem) => void;\n}) => {\n  const { item } = props;\n  return (\n    <button\n      className={\n        props.selected\n          ? \"oui-w-full oui-bg-base-6 oui-rounded-lg hover:oui-bg-base-7\"\n          : \"oui-w-full oui-rounded-lg hover:oui-bg-base-7 \"\n      }\n      onClick={() => {\n        props.onClick?.(item);\n      }}\n    >\n      <Flex justify={\"between\"}>\n        <Flex itemAlign={\"center\"} width={\"100%\"} py={3} px={4} gap={2}>\n          <ChainIcon chainId={item.id} />\n          <Text size=\"2xs\">{item.name}</Text>\n          {/* {item.lowestFee && (\n            <div className=\"oui-text-success oui-px-2 oui-bg-success/20 oui-rounded oui-text-2xs\">\n              lowest fee\n            </div>\n          )} */}\n        </Flex>\n        {props.selected && (\n          <Box\n            gradient={\"brand\"}\n            r={\"full\"}\n            width={\"6px\"}\n            height={\"6px\"}\n            mr={4}\n          />\n        )}\n      </Flex>\n    </button>\n  );\n};\n\n// ------------------ Recommand Chain start ------------------\nexport const RecommandChain = (props: {\n  selected: boolean;\n  item: ChainItem;\n  onClick?: (chain: ChainItem) => void;\n}) => {\n  const { item } = props;\n  return (\n    <button\n      className={\n        props.selected\n          ? \"oui-border oui-border-line-12 oui-rounded-md oui-border-primary-light\"\n          : \"oui-border oui-border-line-12 oui-rounded-md hover:oui-border-primary-light\"\n      }\n      onClick={() => {\n        props.onClick?.(item);\n      }}\n    >\n      <Flex justify={\"between\"}>\n        <Flex itemAlign={\"center\"} width={\"100%\"} p={2} gap={1}>\n          <ChainIcon chainId={item.id} className=\"oui-w-[18px] oui-h-[18px]\" />\n        </Flex>\n      </Flex>\n    </button>\n  );\n};\n","import { registerSimpleDialog, registerSimpleSheet } from \"@orderly.network/ui\";\nimport { useChainSelectorBuilder } from \"./chainSelector.script\";\nimport { ChainSelector } from \"./chainSelector.ui\";\nimport { NetworkId } from \"@orderly.network/types\";\n\nexport const ChainSelectorWidget = (props: {\n  networkId?: NetworkId;\n  bridgeLessOnly?: boolean;\n  close?: () => void;\n  resolve?: (isSuccess: boolean) => void;\n  reject?: () => void;\n  isWrongNetwork?: boolean;\n}) => {\n  const state = useChainSelectorBuilder(props);\n  return (\n    <ChainSelector\n      {...state}\n      close={props.close}\n      resolve={props.resolve}\n      isWrongNetwork={props.isWrongNetwork}\n    />\n  );\n};\n\nexport const ChainSelectorId = \"ChainSelector\";\nexport const ChainSelectorSheetId = \"ChainSelectorSheetId\";\n\nregisterSimpleDialog(ChainSelectorId, ChainSelectorWidget, {\n  size: \"sm\",\n  title: \"Switch Network\",\n});\n\nregisterSimpleSheet(ChainSelectorSheetId, ChainSelectorWidget, {\n  title: \"Switch Network\",\n  classNames: {\n    content: \"!oui-bg-base-8\",\n    body: \"!oui-bg-base-8\",\n  },\n});\n","import { useState, useMemo, useCallback, useEffect} from \"react\";\nimport { useConfig } from \"@orderly.network/hooks\";\nimport { useChains, useWalletConnector, useLocalStorage } from \"@orderly.network/hooks\";\nimport { NetworkId } from \"@orderly.network/types\";\nimport { useAppContext } from \"@orderly.network/react-app\";\n\nconst KEY = 'orderly_selected_chains'\nconst MAX_STORAGE_CHAINS = 6\nexport const useChainSelectorBuilder = (options?: {\n  networkId?: NetworkId;\n  bridgeLessOnly?: boolean;\n}) => {\n  const { networkId, bridgeLessOnly } = options || {};\n  const config = useConfig();\n  const [chains, { checkChainSupport }] = useChains();\n  const { setChain, connectedChain } = useWalletConnector();\n  const [storageChainsIds, setStorageChainsIds] = useLocalStorage<string[]>(KEY, []);\n\n  const { onChainChanged, currentChainId, setCurrentChainId } = useAppContext();\n\n  const filteredChains = useMemo(() => {\n  const filteredChains = bridgeLessOnly\n    ? chains.mainnet.filter((chain) => chain.network_infos.bridgeless)\n    : chains.mainnet;\n\n    const _chains = {\n      mainnet: filteredChains.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\n    return _chains\n  }, [chains, networkId, bridgeLessOnly]);\n\n  const storageChains = useMemo(() =>  filteredChains?.mainnet?.filter(item => storageChainsIds.includes(item.id)) , [storageChainsIds, filteredChains]) || []; \n\n  const saveChainIdToLocalStorage = useCallback((id: number) => {\n    // if (!storageChainsIds) return \n    if(!filteredChains.mainnet?.filter(item => item.id === id)) return \n    let _storageChains = storageChainsIds?.filter((storageChainsId: number) => storageChainsId !== id)\n    _storageChains = [id, ..._storageChains].slice(0, MAX_STORAGE_CHAINS)\n    setStorageChainsIds(_storageChains)\n  }, [filteredChains.mainnet, storageChainsIds, setStorageChainsIds]);\n  \n  const onChainChange = async (chain: { id: number }) => {\n    // console.log('-- on chanin change ', chain, connectedChain, currentChainId);\n    if (!connectedChain) {\n      setCurrentChainId(chain.id);\n      saveChainIdToLocalStorage(chain.id)\n      return {\n        result: true,\n        wrongNetwork: false,\n        chainId: chain.id,\n      }\n      // return Promise.reject(\"No connected chain\");\n    }\n    const result = await setChain({\n      chainId: chain.id,\n    });\n\n    if (!result) return result;\n    saveChainIdToLocalStorage(chain.id)\n    return {\n      result,\n      wrongNetwork: !checkChainSupport(\n        chain.id,\n        config.get(\"networkId\") as NetworkId\n      ),\n      chainId: chain.id,\n    };\n  };\n\n\n  return {\n    storageChains,\n    chains: filteredChains,\n    onChainChange,\n    chainChangedCallback: onChainChanged,\n    currentChainId: (connectedChain?.id ?? currentChainId )  as number | undefined,\n  };\n};\n"]}
+{"version":3,"sources":["../src/chainSelector.widget.tsx","../src/chainSelector.script.ts","../src/chainSelector.ui.tsx"],"names":["registerSimpleDialog","registerSimpleSheet","useMemo","useCallback","useState","useEffect","useConfig","useChains","useWalletConnector","useLocalStorage","useAppContext","KEY","MAX_RECENT_CHAINS","useChainSelectorScript","options","networkId","bridgeLessOnly","config","_chains","checkChainSupport","setChain","connectedChain","onChainChanged","currentChainId","setCurrentChainId","wrongNetwork","selectChainId","setSelectChainId","chains","chain","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","jsx","jsxs","chainSelectorVariants","ChainSelector","props","isWrongNetwork","variant","list","recentList","mainnetList","testnetList","icon","tip","e","RecentChainItem","selected","ChainItem","ChainSelectorWidget","state","ChainSelectorDialogId","ChainSelectorSheetId"],"mappings":"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","sourcesContent":["import { registerSimpleDialog, registerSimpleSheet } from \"@orderly.network/ui\";\nimport {\n  useChainSelectorScript,\n  UseChainSelectorScriptOptions,\n} from \"./chainSelector.script\";\nimport { ChainSelector, ChainSelectorProps } from \"./chainSelector.ui\";\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: \"Switch Network\",\n  variant: \"wide\",\n  isWrongNetwork: true,\n});\n\nregisterSimpleSheet(ChainSelectorSheetId, ChainSelectorWidget, {\n  title: \"Switch Network\",\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 } from \"@orderly.network/hooks\";\nimport {\n  useChains,\n  useWalletConnector,\n  useLocalStorage,\n} from \"@orderly.network/hooks\";\nimport { NetworkId } from \"@orderly.network/types\";\nimport { useAppContext } from \"@orderly.network/react-app\";\nimport { ChainType, TChainItem } from \"./type\";\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\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 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 { 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    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  );\n\n  return {\n    recentChains,\n    chains,\n    selectChainId,\n    onChainClick,\n    selectedTab,\n    onTabChange,\n  };\n};\n\nfunction useChainTab(\n  chains: Record<NetworkId, TChainItem[]>,\n  currentChainId?: number,\n  wrongNetwork?: 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 (currentChainId) {\n      const isMainnet = chains.mainnet?.some(\n        (chain) => chain.id === currentChainId\n      );\n      if (isMainnet) {\n        setSelectedTab(wrongNetwork ? ChainType.Testnet : ChainType.Mainnet);\n        return;\n      }\n\n      const isTestnet = chains.testnet?.some(\n        (chain) => chain.id === currentChainId\n      );\n\n      if (isTestnet) {\n        setSelectedTab(wrongNetwork ? ChainType.Mainnet : ChainType.Testnet);\n        return;\n      }\n    }\n  }, [currentChainId, chains, wrongNetwork]);\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?.map((id: string) =>\n      chains.mainnet?.find((item) => item.id === parseInt(id))\n    );\n  }, [chains, recentChainsIds]);\n\n  const saveRecentChain = useCallback(\n    (chain: TChainItem) => {\n      // only mainnet can save chain id to local storage\n      if (chain.isTestnet) {\n        return;\n      }\n      let ids = recentChainsIds?.filter((id: number) => id !== chain.id);\n      ids = [chain.id, ...ids].slice(0, MAX_RECENT_CHAINS);\n      setRecentChainsIds(ids);\n    },\n    [recentChainsIds]\n  );\n\n  return { recentChains, saveRecentChain };\n}\n","import {\n  Box,\n  Flex,\n  Text,\n  ChainIcon,\n  Tabs,\n  TabPanel,\n  cn,\n  tv,\n} from \"@orderly.network/ui\";\nimport { ChainType, TChainItem } from \"./type\";\nimport { UseChainSelectorScriptReturn } from \"./chainSelector.script\";\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\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={ChainType.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        <TabPanel value={ChainType.Testnet} title={ChainType.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      </Tabs>\n\n      {isWrongNetwork && (\n        <Box className={tip()}>\n          <Text color=\"warning\" size=\"xs\">\n            Please switch to a supported network to continue.\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

@@ -1,11 +1,11 @@
-import { useState, useEffect, useMemo, useCallback } from 'react';
-import { registerSimpleDialog, registerSimpleSheet, Flex, ChainIcon, Text, Box, Tabs, TabPanel } from '@orderly.network/ui';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { tv, registerSimpleDialog, registerSimpleSheet, Box, cn, Tabs, TabPanel, Flex, Text, ChainIcon } from '@orderly.network/ui';
+import { useState, useMemo, useEffect, useCallback } from 'react';
 import { useConfig, useChains, useWalletConnector, useLocalStorage } from '@orderly.network/hooks';
 import { useAppContext } from '@orderly.network/react-app';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
-var v=e=>{let{isWrongNetwork:a=!0}=e,[c,f]=useState(e.currentChainId),[d,u]=useState("Mainnet");useEffect(()=>{if(e.currentChainId){let t=e.chains.mainnet?.some(r=>r.id===e.currentChainId),s=e.chains.testnet?.some(r=>r.id===e.currentChainId);t?u("Mainnet"):s&&u("Testnet");}},[e.currentChainId,e.chains]);let h=async t=>{f(t.id);let s=await e.onChainChange?.(t);s?(e.resolve?.(s),e.close?.(),e.chainChangedCallback?.(t.id,{isTestnet:t.isTestnet??!1,isWalletConnected:!0})):f(void 0);},I=t=>{u(t);};return jsxs(Fragment,{children:[jsx(Box,{intensity:900,className:"oui-bg-base-8",children:jsxs(Tabs,{value:d,variant:"contained",size:"sm",classNames:{tabsList:"oui-mt-3"},onValueChange:t=>I(t),children:[jsxs(TabPanel,{value:"Mainnet",title:"Mainnet",children:[e.storageChains?.length?jsx(Flex,{gap:2,className:"oui-text-center oui-my-3",children:e.storageChains?.map(t=>jsx(z,{item:t,selected:c===t.id,onClick:s=>h(s)},t.id))}):null,jsx(Box,{r:"2xl",p:1,className:"oui-bg-base-9 oui-mt-3 oui-overflow-auto oui-max-h-[562px] xl:oui-max-h-[500px] oui-hide-scrollbar oui-grid oui-grid-cols-2 oui-rounded-lg oui-gap-1",children:e.chains.mainnet?.map((t,s)=>jsx(w,{selected:c===t.id,item:t,onClick:r=>h(r)},t.id))})]}),jsx(TabPanel,{value:"Testnet",title:"Testnet",children:jsx(Box,{r:"2xl",p:1,className:"oui-bg-base-9 oui-mt-3 oui-grid oui-grid-cols-1 oui-rounded-lg oui-gap-1",children:e.chains.testnet?.map((t,s)=>jsx(w,{selected:c===t.id,onClick:r=>h(r),item:t},t.id))})})]})}),a&&jsx(Box,{pt:5,pb:4,className:"oui-text-center",children:jsx(Text,{color:"warning",size:"xs",children:"Please switch to a supported network to continue."})})]})},w=e=>{let{item:a}=e;return jsx("button",{className:e.selected?"oui-w-full oui-bg-base-6 oui-rounded-lg hover:oui-bg-base-7":"oui-w-full oui-rounded-lg hover:oui-bg-base-7 ",onClick:()=>{e.onClick?.(a);},children:jsxs(Flex,{justify:"between",children:[jsxs(Flex,{itemAlign:"center",width:"100%",py:3,px:4,gap:2,children:[jsx(ChainIcon,{chainId:a.id}),jsx(Text,{size:"2xs",children:a.name})]}),e.selected&&jsx(Box,{gradient:"brand",r:"full",width:"6px",height:"6px",mr:4})]})})},z=e=>{let{item:a}=e;return jsx("button",{className:e.selected?"oui-border oui-border-line-12 oui-rounded-md oui-border-primary-light":"oui-border oui-border-line-12 oui-rounded-md hover:oui-border-primary-light",onClick:()=>{e.onClick?.(a);},children:jsx(Flex,{justify:"between",children:jsx(Flex,{itemAlign:"center",width:"100%",p:2,gap:1,children:jsx(ChainIcon,{chainId:a.id,className:"oui-w-[18px] oui-h-[18px]"})})})})};var K="orderly_selected_chains",V=6,p=e=>{let{networkId:a,bridgeLessOnly:c}=e||{},f=useConfig(),[d,{checkChainSupport:u}]=useChains(),{setChain:h,connectedChain:I}=useWalletConnector(),[t,s]=useLocalStorage(K,[]),{onChainChanged:r,currentChainId:F,setCurrentChainId:B}=useAppContext(),m=useMemo(()=>({mainnet:(c?d.mainnet.filter(o=>o.network_infos.bridgeless):d.mainnet).map(o=>({name:o.network_infos.name,id:o.network_infos.chain_id,lowestFee:o.network_infos.bridgeless,isTestnet:!1})),testnet:d.testnet.map(o=>({name:o.network_infos.name,id:o.network_infos.chain_id,lowestFee:o.network_infos.bridgeless,isTestnet:!0}))}),[d,a,c]),L=useMemo(()=>m?.mainnet?.filter(i=>t.includes(i.id)),[t,m])||[],x=useCallback(i=>{if(!m.mainnet?.filter(o=>o.id===i))return;let l=t?.filter(o=>o!==i);l=[i,...l].slice(0,V),s(l);},[m.mainnet,t,s]);return {storageChains:L,chains:m,onChainChange:async i=>{if(!I)return B(i.id),x(i.id),{result:!0,wrongNetwork:!1,chainId:i.id};let l=await h({chainId:i.id});return l&&(x(i.id),{result:l,wrongNetwork:!u(i.id,f.get("networkId")),chainId:i.id})},chainChangedCallback:r,currentChainId:I?.id??F}};var k=e=>{let a=p(e);return jsx(v,{...a,close:e.close,resolve:e.resolve,isWrongNetwork:e.isWrongNetwork})},M="ChainSelector",W="ChainSelectorSheetId";registerSimpleDialog(M,k,{size:"sm",title:"Switch Network"});registerSimpleSheet(W,k,{title:"Switch Network",classNames:{content:"!oui-bg-base-8",body:"!oui-bg-base-8"}});
+var G="orderly_selected_chains",J=6,v=e=>{let{networkId:i,bridgeLessOnly:c}=e||{},d=useConfig(),[a,{checkChainSupport:l}]=useChains(),{setChain:r,connectedChain:C}=useWalletConnector(),{onChainChanged:m,currentChainId:b,setCurrentChainId:o,wrongNetwork:u}=useAppContext(),[F,k]=useState(b),p=useMemo(()=>({mainnet:(c?a.mainnet.filter(n=>n.network_infos.bridgeless):a.mainnet).map(n=>({name:n.network_infos.name,id:n.network_infos.chain_id,lowestFee:n.network_infos.bridgeless,isTestnet:!1})),testnet:a.testnet.map(n=>({name:n.network_infos.name,id:n.network_infos.chain_id,lowestFee:n.network_infos.bridgeless,isTestnet:!0}))}),[a,c]),{recentChains:A,saveRecentChain:B}=Z(p),U=async t=>{if(C){let n=await r({chainId:t.id});return n&&{result:n,wrongNetwork:!l(t.id,d.get("networkId")),chainId:t.id}}return o(t.id),{result:!0,wrongNetwork:!1,chainId:t.id}},S=(t,n)=>{let I={isTestnet:t.isTestnet,isWalletConnected:n};e.onChainChangeAfter?.(t.id,I),m?.(t.id,I);},O=async t=>{k(t.id),e.onChainChangeBefore?.(t.id,{isTestnet:t.isTestnet});try{let n=await U?.(t);n?(e.resolve?.(n),e.close?.(),B(t),S(t,!0)):(k(void 0),S(t,!1));}catch{S(t,!1);}},{selectedTab:z,onTabChange:D}=Q(p,b,u);return {recentChains:A,chains:p,selectChainId:F,onChainClick:O,selectedTab:z,onTabChange:D}};function Q(e,i,c){let[d,a]=useState("Mainnet"),l=r=>{a(r);};return useEffect(()=>{if(i){if(e.mainnet?.some(m=>m.id===i)){a(c?"Testnet":"Mainnet");return}if(e.testnet?.some(m=>m.id===i)){a(c?"Mainnet":"Testnet");return}}},[i,e,c]),{selectedTab:d,onTabChange:l}}function Z(e){let[i,c]=useLocalStorage(G,[]),d=useMemo(()=>i?.map(l=>e.mainnet?.find(r=>r.id===parseInt(l))),[e,i]),a=useCallback(l=>{if(l.isTestnet)return;let r=i?.filter(C=>C!==l.id);r=[l.id,...r].slice(0,J),c(r);},[i]);return {recentChains:d,saveRecentChain:a}}var te=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:!0,className:{item:"hover:oui-bg-base-6"}},{variant:"wide",selected:!0,className:{item:"hover:oui-bg-base-5"}}],defaultVariants:{variant:"wide",selected:!1}}),R=e=>{let{isWrongNetwork:i,variant:c="wide"}=e,{list:d,recentList:a,mainnetList:l,testnetList:r,icon:C,item:m,tip:b}=te({variant:c});return jsxs(Box,{className:cn("oui-font-semibold",e.className),children:[jsxs(Tabs,{value:e.selectedTab,variant:"contained",size:c==="wide"?"md":"lg",onValueChange:o=>e.onTabChange(o),children:[jsxs(TabPanel,{value:"Mainnet",title:"Mainnet",children:[!!e.recentChains?.length&&jsx(Flex,{gap:2,className:a(),children:e.recentChains?.map(o=>jsx(ne,{item:o,onClick:()=>e.onChainClick(o),iconClassName:C()},o.id))}),jsx(Box,{r:"2xl",className:cn(d(),l()),children:e.chains.mainnet?.map(o=>{let u=e.selectChainId===o.id;return jsx(L,{selected:u,item:o,onClick:()=>e.onChainClick(o),className:m({selected:u})},o.id)})})]}),jsx(TabPanel,{value:"Testnet",title:"Testnet",children:jsx(Box,{r:"2xl",className:cn(d(),r()),children:e.chains.testnet?.map(o=>{let u=e.selectChainId===o.id;return jsx(L,{selected:u,item:o,onClick:()=>e.onChainClick(o),className:m({selected:u})},o.id)})})})]}),i&&jsx(Box,{className:b(),children:jsx(Text,{color:"warning",size:"xs",children:"Please switch to a supported network to continue."})})]})},L=e=>{let{item:i}=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:i.id,size:"xs"}),jsx(Text,{size:"2xs",children:i.name})]}),e.selected&&jsx(Box,{gradient:"brand",r:"full",width:4,height:4})]})})},ne=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 w=e=>{let i=v(e);return jsx(R,{...i,variant:e.variant,isWrongNetwork:e.isWrongNetwork})},M="ChainSelectorDialogId",P="ChainSelectorSheetId";registerSimpleDialog(M,w,{size:"lg",title:"Switch Network",variant:"wide",isWrongNetwork:!0});registerSimpleSheet(P,w,{title:"Switch Network",classNames:{content:"!oui-bg-base-8",body:"!oui-bg-base-8"},variant:"compact",isWrongNetwork:!0});
 
-export { M as ChainSelectorId, W as ChainSelectorSheetId, k as ChainSelectorWidget, w as ChainTile };
+export { M as ChainSelectorDialogId, P as ChainSelectorSheetId, w as ChainSelectorWidget };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/chainSelector.ui.tsx","../src/chainSelector.widget.tsx","../src/chainSelector.script.ts"],"names":["useState","useEffect","Box","Flex","Text","ChainIcon","Tabs","TabPanel","Fragment","jsx","jsxs","ChainSelector","props","isWrongNetwork","select","setSelect","selectedTab","setSelectedTab","isMainnet","chain","isTestnet","onChange","complete","onTabChange","tab","e","item","RecommandChain","index","ChainTile","registerSimpleDialog","registerSimpleSheet","useMemo","useCallback","useConfig","useChains","useWalletConnector","useLocalStorage","useAppContext","KEY","MAX_STORAGE_CHAINS","useChainSelectorBuilder","options","networkId","bridgeLessOnly","config","chains","checkChainSupport","setChain","connectedChain","storageChainsIds","setStorageChainsIds","onChainChanged","currentChainId","setCurrentChainId","filteredChains","storageChains","saveChainIdToLocalStorage","id","_storageChains","storageChainsId","result","ChainSelectorWidget","state","ChainSelectorId","ChainSelectorSheetId"],"mappings":"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","sourcesContent":["import { useState, useMemo, useEffect, useCallback } from \"react\";\nimport {\n  Box,\n  Flex,\n  Text,\n  ChainIcon,\n  Tabs,\n  TabPanel,\n  TabsList,\n} from \"@orderly.network/ui\";\nimport type { ChainItem } from \"./types\";\nimport { ChainSelectorType } from \"./types\";\n\n//------------------ ChainSelector start ------------------\nexport const ChainSelector = (props: {\n  chains: {\n    mainnet?: ChainItem[];\n    testnet?: ChainItem[];\n  };\n  storageChains?: ChainItem[];\n  onChainChange?: (chain: ChainItem) => Promise<any>;\n  currentChainId?: number;\n  close?: () => void;\n  resolve?: (isSuccess: boolean) => void;\n  chainChangedCallback?: (\n    chainId: number,\n    state: {\n      isTestnet: boolean;\n      isWalletConnected: boolean;\n    }\n  ) => void;\n  isWrongNetwork?: boolean;\n}) => {\n  const { isWrongNetwork = true } = props;\n  const [select, setSelect] = useState<number | undefined>(\n    props.currentChainId\n  );\n  const [selectedTab, setSelectedTab] = useState<ChainSelectorType>(\n    ChainSelectorType.Mainnet\n  );\n\n  useEffect(() => {\n    if (props.currentChainId) {\n      const isMainnet = props.chains.mainnet?.some(\n        (chain) => chain.id === props.currentChainId\n      );\n      const isTestnet = props.chains.testnet?.some(\n        (chain) => chain.id === props.currentChainId\n      );\n      if (isMainnet) {\n        setSelectedTab(ChainSelectorType.Mainnet);\n      } else if (isTestnet) {\n        setSelectedTab(ChainSelectorType.Testnet);\n      }\n    }\n  }, [props.currentChainId, props.chains]);\n\n  // props.currentChainId\n  const onChange = async (chain: ChainItem) => {\n    setSelect(chain.id);\n    const complete = await props.onChainChange?.(chain);\n\n    if (complete) {\n      props.resolve?.(complete);\n      props.close?.();\n\n      props.chainChangedCallback?.(chain.id, {\n        isTestnet: chain.isTestnet ?? false,\n        isWalletConnected: true,\n      });\n    } else {\n      setSelect(undefined);\n    }\n  };\n\n  const onTabChange = (tab: ChainSelectorType) => {\n    setSelectedTab(tab);\n  };\n\n  return (\n    <>\n      <Box intensity={900} className=\"oui-bg-base-8\">\n        <Tabs\n          value={selectedTab}\n          variant=\"contained\"\n          size=\"sm\"\n          classNames={{\n            tabsList: \"oui-mt-3\",\n          }}\n          onValueChange={(e) => onTabChange(e as ChainSelectorType)}\n        >\n          <TabPanel\n            value={ChainSelectorType.Mainnet}\n            title={ChainSelectorType.Mainnet}\n          >\n            {props.storageChains?.length ? (\n              <Flex gap={2} className=\"oui-text-center oui-my-3\">\n                {props.storageChains?.map((item) => {\n                  return (\n                    <RecommandChain\n                      item={item}\n                      key={item.id}\n                      selected={select === item.id}\n                      onClick={(chain: ChainItem) => onChange(chain)}\n                    />\n                  );\n                })}\n              </Flex>\n            ) : null}\n            <Box\n              r=\"2xl\"\n              p={1}\n              className=\"oui-bg-base-9 oui-mt-3 oui-overflow-auto oui-max-h-[562px] xl:oui-max-h-[500px] oui-hide-scrollbar oui-grid oui-grid-cols-2 oui-rounded-lg oui-gap-1\"\n            >\n              {props.chains.mainnet?.map((item, index) => {\n                return (\n                  <ChainTile\n                    key={item.id}\n                    selected={select === item.id}\n                    // {...item}\n                    item={item}\n                    onClick={(chain: ChainItem) => onChange(chain)}\n                  />\n                );\n              })}\n            </Box>\n          </TabPanel>\n\n          <TabPanel\n            value={ChainSelectorType.Testnet}\n            title={ChainSelectorType.Testnet}\n          >\n            <Box r=\"2xl\" p={1} className=\"oui-bg-base-9 oui-mt-3 oui-grid oui-grid-cols-1 oui-rounded-lg oui-gap-1\">\n              {props.chains.testnet?.map((item, index) => {\n                return (\n                  <ChainTile\n                    key={item.id}\n                    selected={select === item.id}\n                    // {...item}\n                    onClick={(chain: ChainItem) => onChange(chain)}\n                    item={item}\n                  />\n                );\n              })}\n            </Box>\n          </TabPanel>\n        </Tabs>\n      </Box>\n\n      {isWrongNetwork && (\n        <Box pt={5} pb={4} className=\"oui-text-center\">\n          <Text color=\"warning\" size=\"xs\">\n            Please switch to a supported network to continue.\n          </Text>\n        </Box>\n      )}\n    </>\n  );\n};\n// ------------------ ChainSelector end ------------------\n\n// ------------------ ChainItem start ------------------\nexport const ChainTile = (props: {\n  // id: number;\n  // name: string;\n  // lowestFee?: boolean;\n  selected: boolean;\n  item: ChainItem;\n  onClick?: (chain: ChainItem) => void;\n}) => {\n  const { item } = props;\n  return (\n    <button\n      className={\n        props.selected\n          ? \"oui-w-full oui-bg-base-6 oui-rounded-lg hover:oui-bg-base-7\"\n          : \"oui-w-full oui-rounded-lg hover:oui-bg-base-7 \"\n      }\n      onClick={() => {\n        props.onClick?.(item);\n      }}\n    >\n      <Flex justify={\"between\"}>\n        <Flex itemAlign={\"center\"} width={\"100%\"} py={3} px={4} gap={2}>\n          <ChainIcon chainId={item.id} />\n          <Text size=\"2xs\">{item.name}</Text>\n          {/* {item.lowestFee && (\n            <div className=\"oui-text-success oui-px-2 oui-bg-success/20 oui-rounded oui-text-2xs\">\n              lowest fee\n            </div>\n          )} */}\n        </Flex>\n        {props.selected && (\n          <Box\n            gradient={\"brand\"}\n            r={\"full\"}\n            width={\"6px\"}\n            height={\"6px\"}\n            mr={4}\n          />\n        )}\n      </Flex>\n    </button>\n  );\n};\n\n// ------------------ Recommand Chain start ------------------\nexport const RecommandChain = (props: {\n  selected: boolean;\n  item: ChainItem;\n  onClick?: (chain: ChainItem) => void;\n}) => {\n  const { item } = props;\n  return (\n    <button\n      className={\n        props.selected\n          ? \"oui-border oui-border-line-12 oui-rounded-md oui-border-primary-light\"\n          : \"oui-border oui-border-line-12 oui-rounded-md hover:oui-border-primary-light\"\n      }\n      onClick={() => {\n        props.onClick?.(item);\n      }}\n    >\n      <Flex justify={\"between\"}>\n        <Flex itemAlign={\"center\"} width={\"100%\"} p={2} gap={1}>\n          <ChainIcon chainId={item.id} className=\"oui-w-[18px] oui-h-[18px]\" />\n        </Flex>\n      </Flex>\n    </button>\n  );\n};\n","import { registerSimpleDialog, registerSimpleSheet } from \"@orderly.network/ui\";\nimport { useChainSelectorBuilder } from \"./chainSelector.script\";\nimport { ChainSelector } from \"./chainSelector.ui\";\nimport { NetworkId } from \"@orderly.network/types\";\n\nexport const ChainSelectorWidget = (props: {\n  networkId?: NetworkId;\n  bridgeLessOnly?: boolean;\n  close?: () => void;\n  resolve?: (isSuccess: boolean) => void;\n  reject?: () => void;\n  isWrongNetwork?: boolean;\n}) => {\n  const state = useChainSelectorBuilder(props);\n  return (\n    <ChainSelector\n      {...state}\n      close={props.close}\n      resolve={props.resolve}\n      isWrongNetwork={props.isWrongNetwork}\n    />\n  );\n};\n\nexport const ChainSelectorId = \"ChainSelector\";\nexport const ChainSelectorSheetId = \"ChainSelectorSheetId\";\n\nregisterSimpleDialog(ChainSelectorId, ChainSelectorWidget, {\n  size: \"sm\",\n  title: \"Switch Network\",\n});\n\nregisterSimpleSheet(ChainSelectorSheetId, ChainSelectorWidget, {\n  title: \"Switch Network\",\n  classNames: {\n    content: \"!oui-bg-base-8\",\n    body: \"!oui-bg-base-8\",\n  },\n});\n","import { useState, useMemo, useCallback, useEffect} from \"react\";\nimport { useConfig } from \"@orderly.network/hooks\";\nimport { useChains, useWalletConnector, useLocalStorage } from \"@orderly.network/hooks\";\nimport { NetworkId } from \"@orderly.network/types\";\nimport { useAppContext } from \"@orderly.network/react-app\";\n\nconst KEY = 'orderly_selected_chains'\nconst MAX_STORAGE_CHAINS = 6\nexport const useChainSelectorBuilder = (options?: {\n  networkId?: NetworkId;\n  bridgeLessOnly?: boolean;\n}) => {\n  const { networkId, bridgeLessOnly } = options || {};\n  const config = useConfig();\n  const [chains, { checkChainSupport }] = useChains();\n  const { setChain, connectedChain } = useWalletConnector();\n  const [storageChainsIds, setStorageChainsIds] = useLocalStorage<string[]>(KEY, []);\n\n  const { onChainChanged, currentChainId, setCurrentChainId } = useAppContext();\n\n  const filteredChains = useMemo(() => {\n  const filteredChains = bridgeLessOnly\n    ? chains.mainnet.filter((chain) => chain.network_infos.bridgeless)\n    : chains.mainnet;\n\n    const _chains = {\n      mainnet: filteredChains.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\n    return _chains\n  }, [chains, networkId, bridgeLessOnly]);\n\n  const storageChains = useMemo(() =>  filteredChains?.mainnet?.filter(item => storageChainsIds.includes(item.id)) , [storageChainsIds, filteredChains]) || []; \n\n  const saveChainIdToLocalStorage = useCallback((id: number) => {\n    // if (!storageChainsIds) return \n    if(!filteredChains.mainnet?.filter(item => item.id === id)) return \n    let _storageChains = storageChainsIds?.filter((storageChainsId: number) => storageChainsId !== id)\n    _storageChains = [id, ..._storageChains].slice(0, MAX_STORAGE_CHAINS)\n    setStorageChainsIds(_storageChains)\n  }, [filteredChains.mainnet, storageChainsIds, setStorageChainsIds]);\n  \n  const onChainChange = async (chain: { id: number }) => {\n    // console.log('-- on chanin change ', chain, connectedChain, currentChainId);\n    if (!connectedChain) {\n      setCurrentChainId(chain.id);\n      saveChainIdToLocalStorage(chain.id)\n      return {\n        result: true,\n        wrongNetwork: false,\n        chainId: chain.id,\n      }\n      // return Promise.reject(\"No connected chain\");\n    }\n    const result = await setChain({\n      chainId: chain.id,\n    });\n\n    if (!result) return result;\n    saveChainIdToLocalStorage(chain.id)\n    return {\n      result,\n      wrongNetwork: !checkChainSupport(\n        chain.id,\n        config.get(\"networkId\") as NetworkId\n      ),\n      chainId: chain.id,\n    };\n  };\n\n\n  return {\n    storageChains,\n    chains: filteredChains,\n    onChainChange,\n    chainChangedCallback: onChainChanged,\n    currentChainId: (connectedChain?.id ?? currentChainId )  as number | undefined,\n  };\n};\n"]}
+{"version":3,"sources":["../src/chainSelector.widget.tsx","../src/chainSelector.script.ts","../src/chainSelector.ui.tsx"],"names":["registerSimpleDialog","registerSimpleSheet","useMemo","useCallback","useState","useEffect","useConfig","useChains","useWalletConnector","useLocalStorage","useAppContext","KEY","MAX_RECENT_CHAINS","useChainSelectorScript","options","networkId","bridgeLessOnly","config","_chains","checkChainSupport","setChain","connectedChain","onChainChanged","currentChainId","setCurrentChainId","wrongNetwork","selectChainId","setSelectChainId","chains","chain","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","jsx","jsxs","chainSelectorVariants","ChainSelector","props","isWrongNetwork","variant","list","recentList","mainnetList","testnetList","icon","tip","e","RecentChainItem","selected","ChainItem","ChainSelectorWidget","state","ChainSelectorDialogId","ChainSelectorSheetId"],"mappings":"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","sourcesContent":["import { registerSimpleDialog, registerSimpleSheet } from \"@orderly.network/ui\";\nimport {\n  useChainSelectorScript,\n  UseChainSelectorScriptOptions,\n} from \"./chainSelector.script\";\nimport { ChainSelector, ChainSelectorProps } from \"./chainSelector.ui\";\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: \"Switch Network\",\n  variant: \"wide\",\n  isWrongNetwork: true,\n});\n\nregisterSimpleSheet(ChainSelectorSheetId, ChainSelectorWidget, {\n  title: \"Switch Network\",\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 } from \"@orderly.network/hooks\";\nimport {\n  useChains,\n  useWalletConnector,\n  useLocalStorage,\n} from \"@orderly.network/hooks\";\nimport { NetworkId } from \"@orderly.network/types\";\nimport { useAppContext } from \"@orderly.network/react-app\";\nimport { ChainType, TChainItem } from \"./type\";\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\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 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 { 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    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  );\n\n  return {\n    recentChains,\n    chains,\n    selectChainId,\n    onChainClick,\n    selectedTab,\n    onTabChange,\n  };\n};\n\nfunction useChainTab(\n  chains: Record<NetworkId, TChainItem[]>,\n  currentChainId?: number,\n  wrongNetwork?: 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 (currentChainId) {\n      const isMainnet = chains.mainnet?.some(\n        (chain) => chain.id === currentChainId\n      );\n      if (isMainnet) {\n        setSelectedTab(wrongNetwork ? ChainType.Testnet : ChainType.Mainnet);\n        return;\n      }\n\n      const isTestnet = chains.testnet?.some(\n        (chain) => chain.id === currentChainId\n      );\n\n      if (isTestnet) {\n        setSelectedTab(wrongNetwork ? ChainType.Mainnet : ChainType.Testnet);\n        return;\n      }\n    }\n  }, [currentChainId, chains, wrongNetwork]);\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?.map((id: string) =>\n      chains.mainnet?.find((item) => item.id === parseInt(id))\n    );\n  }, [chains, recentChainsIds]);\n\n  const saveRecentChain = useCallback(\n    (chain: TChainItem) => {\n      // only mainnet can save chain id to local storage\n      if (chain.isTestnet) {\n        return;\n      }\n      let ids = recentChainsIds?.filter((id: number) => id !== chain.id);\n      ids = [chain.id, ...ids].slice(0, MAX_RECENT_CHAINS);\n      setRecentChainsIds(ids);\n    },\n    [recentChainsIds]\n  );\n\n  return { recentChains, saveRecentChain };\n}\n","import {\n  Box,\n  Flex,\n  Text,\n  ChainIcon,\n  Tabs,\n  TabPanel,\n  cn,\n  tv,\n} from \"@orderly.network/ui\";\nimport { ChainType, TChainItem } from \"./type\";\nimport { UseChainSelectorScriptReturn } from \"./chainSelector.script\";\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\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={ChainType.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        <TabPanel value={ChainType.Testnet} title={ChainType.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      </Tabs>\n\n      {isWrongNetwork && (\n        <Box className={tip()}>\n          <Text color=\"warning\" size=\"xs\">\n            Please switch to a supported network to continue.\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": "@orderly.network/ui-chain-selector",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -14,10 +14,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@orderly.network/react-app": "2.0.2",
-    "@orderly.network/hooks": "2.0.2",
-    "@orderly.network/ui": "2.0.2",
-    "@orderly.network/types": "2.0.2"
+    "@orderly.network/hooks": "2.0.3",
+    "@orderly.network/react-app": "2.0.3",
+    "@orderly.network/types": "2.0.3",
+    "@orderly.network/ui": "2.0.3"
   },
   "devDependencies": {
     "@types/react": "^18.3.2",
@@ -29,7 +29,7 @@
     "tailwindcss": "^3.4.4",
     "typescript": "^5.1.6",
     "tsup": "^7.1.0",
-    "tsconfig": "0.3.18"
+    "tsconfig": "0.3.19"
   },
   "peerDependencies": {
     "react": ">=18",