@orderly.network/ui-chain-selector 2.0.0 → 2.0.1-alpha.0

package/dist/index.d.mts

@@ -11,16 +11,18 @@ type ChainItem = {
 declare const ChainTile: (props: {
     selected: boolean;
     item: ChainItem;
-    onClick?: ((chain: ChainItem) => void) | undefined;
+    onClick?: (chain: ChainItem) => void;
 }) => react_jsx_runtime.JSX.Element;
 
 declare const ChainSelectorWidget: (props: {
-    networkId?: NetworkId | undefined;
-    bridgeLessOnly?: boolean | undefined;
-    close?: (() => void) | undefined;
-    resolve?: ((isSuccess: boolean) => void) | undefined;
-    reject?: (() => void) | undefined;
+    networkId?: NetworkId;
+    bridgeLessOnly?: boolean;
+    close?: () => void;
+    resolve?: (isSuccess: boolean) => void;
+    reject?: () => void;
+    isWrongNetwork?: boolean;
 }) => react_jsx_runtime.JSX.Element;
 declare const ChainSelectorId = "ChainSelector";
+declare const ChainSelectorSheetId = "ChainSelectorSheetId";
 
-export { ChainSelectorId, ChainSelectorWidget, ChainTile };
+export { ChainSelectorId, ChainSelectorSheetId, ChainSelectorWidget, ChainTile };

package/dist/index.d.ts

@@ -11,16 +11,18 @@ type ChainItem = {
 declare const ChainTile: (props: {
     selected: boolean;
     item: ChainItem;
-    onClick?: ((chain: ChainItem) => void) | undefined;
+    onClick?: (chain: ChainItem) => void;
 }) => react_jsx_runtime.JSX.Element;
 
 declare const ChainSelectorWidget: (props: {
-    networkId?: NetworkId | undefined;
-    bridgeLessOnly?: boolean | undefined;
-    close?: (() => void) | undefined;
-    resolve?: ((isSuccess: boolean) => void) | undefined;
-    reject?: (() => void) | undefined;
+    networkId?: NetworkId;
+    bridgeLessOnly?: boolean;
+    close?: () => void;
+    resolve?: (isSuccess: boolean) => void;
+    reject?: () => void;
+    isWrongNetwork?: boolean;
 }) => react_jsx_runtime.JSX.Element;
 declare const ChainSelectorId = "ChainSelector";
+declare const ChainSelectorSheetId = "ChainSelectorSheetId";
 
-export { ChainSelectorId, ChainSelectorWidget, ChainTile };
+export { ChainSelectorId, ChainSelectorSheetId, ChainSelectorWidget, ChainTile };

package/dist/index.js

@@ -6,10 +6,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var hooks = require('@orderly.network/hooks');
 var reactApp = require('@orderly.network/react-app');
 
-var b=e=>{let[n,a]=react.useState(),c=async t=>{a(t.id);let s=await e.onChainChange?.(t);s?(e.resolve?.(s),e.close?.(),e.chainChangedCallback?.(t.id,{isTestnet:t.isTestnet??!1,isWalletConnected:!0})):a(void 0);};return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs(ui.Box,{intensity:900,r:"2xl",p:1,children:[Array.isArray(e.chains.mainnet)&&jsxRuntime.jsx(ui.Text,{as:"div",className:"oui-px-4 oui-pt-2",intensity:54,size:"2xs",children:"Mainnet"}),e.chains.mainnet?.map((t,s)=>jsxRuntime.jsx(C,{selected:n===t.id,item:t,onClick:l=>c(l)},s)),Array.isArray(e.chains.testnet)&&jsxRuntime.jsx(ui.Text,{as:"div",className:"oui-px-4",intensity:54,size:"2xs",children:"Testnet"}),e.chains.testnet?.map((t,s)=>jsxRuntime.jsx(C,{selected:n===t.id,onClick:l=>c(l),item:t},t.id))]}),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."})})]})},C=e=>{let{item:n}=e;return jsxRuntime.jsx("button",{className:e.selected?"oui-w-full oui-bg-base-6 oui-rounded-lg hover:oui-bg-base-6":"oui-w-full oui-rounded-lg hover:oui-bg-base-6 ",onClick:()=>{e.onClick?.(n);},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:n.id}),jsxRuntime.jsx(ui.Text,{size:"2xs",children:n.name}),n.lowestFee&&jsxRuntime.jsx("div",{className:"oui-text-success oui-px-2 oui-bg-success/20 oui-rounded oui-text-2xs",children:"lowest fee"})]}),e.selected&&jsxRuntime.jsx(ui.Box,{gradient:"brand",r:"full",width:"6px",height:"6px",mr:4})]})})};var g=e=>{let{networkId:n,bridgeLessOnly:a}=e||{},c=hooks.useConfig(),[t,{checkChainSupport:s}]=hooks.useChains(),{setChain:l,connectedChain:f}=hooks.useWalletConnector(),{onChainChanged:I}=reactApp.useAppContext(),p=async d=>{if(!f)return Promise.reject("No connected chain");let r=await l({chainId:d.id});return r&&{result:r,wrongNetwork:!s(d.id,c.get("networkId")),chainId:d.id}};return {chains:react.useMemo(()=>{let r={mainnet:(a?t.mainnet.filter(o=>o.network_infos.bridgeless):t.mainnet).map(o=>({name:o.network_infos.name,id:o.network_infos.chain_id,lowestFee:o.network_infos.bridgeless,isTestnet:!1})),testnet:t.testnet.map(o=>({name:o.network_infos.name,id:o.network_infos.chain_id,lowestFee:o.network_infos.bridgeless,isTestnet:!0}))};return typeof n>"u"?r:n==="testnet"?{testnet:r.testnet}:{mainnet:r.mainnet}},[t,n,a]),onChainChange:p,chainChangedCallback:I,currentChainId:f?.id}};var x=e=>{let n=g(e);return jsxRuntime.jsx(b,{...n,close:e.close,resolve:e.resolve})},k="ChainSelector";ui.registerSimpleDialog(k,x,{size:"sm",title:"Switch Network"});
+var x=e=>{let{isWrongNetwork:n=!0}=e,[d,h]=react.useState(e.currentChainId),s=async t=>{h(t.id);let r=await e.onChainChange?.(t);r?(e.resolve?.(r),e.close?.(),e.chainChangedCallback?.(t.id,{isTestnet:t.isTestnet??!1,isWalletConnected:!0})):h(void 0);};return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs(ui.Box,{intensity:900,r:"2xl",p:1,className:"oui-overflow-auto oui-max-h-[463px] xl:oui-max-h-[562px] oui-hide-scrollbar",children:[Array.isArray(e.chains.mainnet)&&jsxRuntime.jsx(ui.Text,{as:"div",className:"oui-px-4 oui-pt-2",intensity:54,size:"2xs",children:"Mainnet"}),e.chains.mainnet?.map((t,r)=>jsxRuntime.jsx(f,{selected:d===t.id,item:t,onClick:l=>s(l)},r)),Array.isArray(e.chains.testnet)&&jsxRuntime.jsx(ui.Text,{as:"div",className:"oui-px-4",intensity:54,size:"2xs",children:"Testnet"}),e.chains.testnet?.map((t,r)=>jsxRuntime.jsx(f,{selected:d===t.id,onClick:l=>s(l),item:t},t.id))]}),n&&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."})})]})},f=e=>{let{item:n}=e;return jsxRuntime.jsx("button",{className:e.selected?"oui-w-full oui-bg-base-6 oui-rounded-lg hover:oui-bg-base-6":"oui-w-full oui-rounded-lg hover:oui-bg-base-6 ",onClick:()=>{e.onClick?.(n);},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:n.id}),jsxRuntime.jsx(ui.Text,{size:"2xs",children:n.name}),n.lowestFee&&jsxRuntime.jsx("div",{className:"oui-text-success oui-px-2 oui-bg-success/20 oui-rounded oui-text-2xs",children:"lowest fee"})]}),e.selected&&jsxRuntime.jsx(ui.Box,{gradient:"brand",r:"full",width:"6px",height:"6px",mr:4})]})})};var k=e=>{let{networkId:n,bridgeLessOnly:d}=e||{},h=hooks.useConfig(),[s,{checkChainSupport:t}]=hooks.useChains(),{setChain:r,connectedChain:l}=hooks.useWalletConnector(),{onChainChanged:S,currentChainId:p,setCurrentChainId:y}=reactApp.useAppContext(),N=async c=>{if(!l)return y(c.id),{result:!0,wrongNetwork:!1,chainId:c.id};let a=await r({chainId:c.id});return a&&{result:a,wrongNetwork:!t(c.id,h.get("networkId")),chainId:c.id}};return {chains:react.useMemo(()=>{let a={mainnet:(d?s.mainnet.filter(o=>o.network_infos.bridgeless):s.mainnet).map(o=>({name:o.network_infos.name,id:o.network_infos.chain_id,lowestFee:o.network_infos.bridgeless,isTestnet:!1})),testnet:s.testnet.map(o=>({name:o.network_infos.name,id:o.network_infos.chain_id,lowestFee:o.network_infos.bridgeless,isTestnet:!0}))};return typeof n>"u"?a:n==="testnet"?{testnet:a.testnet}:{mainnet:a.mainnet}},[s,n,d]),onChainChange:N,chainChangedCallback:S,currentChainId:l?.id??p}};var w=e=>{let n=k(e);return jsxRuntime.jsx(x,{...n,close:e.close,resolve:e.resolve,isWrongNetwork:e.isWrongNetwork})},b="ChainSelector",I="ChainSelectorSheetId";ui.registerSimpleDialog(b,w,{size:"sm",title:"Switch Network"});ui.registerSimpleSheet(I,w,{title:"Switch Network"});
 
-exports.ChainSelectorId = k;
-exports.ChainSelectorWidget = x;
-exports.ChainTile = C;
+exports.ChainSelectorId = b;
+exports.ChainSelectorSheetId = I;
+exports.ChainSelectorWidget = w;
+exports.ChainTile = f;
 //# 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","Box","Flex","Text","ChainIcon","Fragment","jsx","jsxs","ChainSelector","props","select","setSelect","onChange","chain","complete","item","index","ChainTile","registerSimpleDialog","useMemo","useConfig","useChains","useWalletConnector","useAppContext","useChainSelectorBuilder","options","networkId","bridgeLessOnly","config","chains","checkChainSupport","setChain","connectedChain","onChainChanged","onChainChange","result","_chains","ChainSelectorWidget","state","ChainSelectorId"],"mappings":"AAAA,OAAS,YAAAA,MAAgB,QACzB,OAAS,OAAAC,EAAK,QAAAC,EAAM,QAAAC,EAAM,aAAAC,MAAiB,sBAyCvC,mBAAAC,EAGM,OAAAC,EAFJ,QAAAC,MADF,oBArCG,IAAMC,EAAiBC,GAgBxB,CACJ,GAAM,CAACC,EAAQC,CAAS,EAAIX,EAA6B,EAEnDY,EAAW,MAAOC,GAAqB,CAC3CF,EAAUE,EAAM,EAAE,EAClB,IAAMC,EAAW,MAAML,EAAM,gBAAgBI,CAAK,EAE9CC,GACFL,EAAM,UAAUK,CAAQ,EACxBL,EAAM,QAAQ,EAEdA,EAAM,uBAAuBI,EAAM,GAAI,CACrC,UAAWA,EAAM,WAAa,GAC9B,kBAAmB,EACrB,CAAC,GAEDF,EAAU,MAAS,CAEvB,EAEA,OACEJ,EAAAF,EAAA,CACE,UAAAE,EAACN,EAAA,CAAI,UAAW,IAAK,EAAE,MAAM,EAAG,EAC7B,gBAAM,QAAQQ,EAAM,OAAO,OAAO,GACjCH,EAACH,EAAA,CACC,GAAG,MACH,UAAU,oBACV,UAAW,GACX,KAAK,MACN,mBAED,EAGDM,EAAM,OAAO,SAAS,IAAI,CAACM,EAAMC,IAE9BV,EAACW,EAAA,CAEC,SAAUP,IAAWK,EAAK,GAE1B,KAAMA,EACN,QAAUF,GAAqBD,EAASC,CAAK,GAJxCG,CAKP,CAEH,EACA,MAAM,QAAQP,EAAM,OAAO,OAAO,GACjCH,EAACH,EAAA,CAAK,GAAG,MAAM,UAAU,WAAW,UAAW,GAAI,KAAK,MAAM,mBAE9D,EAEDM,EAAM,OAAO,SAAS,IAAI,CAACM,EAAMC,IAE9BV,EAACW,EAAA,CAEC,SAAUP,IAAWK,EAAK,GAE1B,QAAUF,GAAqBD,EAASC,CAAK,EAC7C,KAAME,GAJDA,EAAK,EAKZ,CAEH,GACH,EACAT,EAACL,EAAA,CAAI,GAAI,EAAG,GAAI,EAAG,UAAU,kBAC3B,SAAAK,EAACH,EAAA,CAAK,MAAM,UAAU,KAAK,KAAK,6DAEhC,EACF,GACF,CAEJ,EAIac,EAAaR,GAOpB,CACJ,GAAM,CAAE,KAAAM,CAAK,EAAIN,EACjB,OACEH,EAAC,UACC,UACEG,EAAM,SACF,8DACA,iDAEN,QAAS,IAAM,CACbA,EAAM,UAAUM,CAAI,CACtB,EAEA,SAAAR,EAACL,EAAA,CAAK,QAAS,UACb,UAAAK,EAACL,EAAA,CAAK,UAAW,SAAU,MAAO,OAAQ,GAAI,EAAG,GAAI,EAAG,IAAK,EAC3D,UAAAI,EAACF,EAAA,CAAU,QAASW,EAAK,GAAI,EAC7BT,EAACH,EAAA,CAAK,KAAK,MAAO,SAAAY,EAAK,KAAK,EAC3BA,EAAK,WACJT,EAAC,OAAI,UAAU,uEAAuE,sBAEtF,GAEJ,EACCG,EAAM,UACLH,EAACL,EAAA,CACC,SAAU,QACV,EAAG,OACH,MAAO,MACP,OAAQ,MACR,GAAI,EACN,GAEJ,EACF,CAEJ,ECxIA,OAAS,wBAAAiB,MAA4B,sBCArC,OAAS,WAAAC,MAAe,QACxB,OAAS,aAAAC,MAAiB,yBAC1B,OAAS,aAAAC,EAAW,sBAAAC,MAA0B,yBAE9C,OAAS,iBAAAC,MAAqB,6BAEvB,IAAMC,EAA2BC,GAGlC,CACJ,GAAM,CAAE,UAAAC,EAAW,eAAAC,CAAe,EAAIF,GAAW,CAAC,EAC5CG,EAASR,EAAU,EACnB,CAACS,EAAQ,CAAE,kBAAAC,CAAkB,CAAC,EAAIT,EAAU,EAC5C,CAAE,SAAAU,EAAU,eAAAC,CAAe,EAAIV,EAAmB,EAElD,CAAE,eAAAW,CAAe,EAAIV,EAAc,EAEnCW,EAAgB,MAAOrB,GAA0B,CACrD,GAAI,CAACmB,EACH,OAAO,QAAQ,OAAO,oBAAoB,EAE5C,IAAMG,EAAS,MAAMJ,EAAS,CAC5B,QAASlB,EAAM,EACjB,CAAC,EAED,OAAKsB,GAEE,CACL,OAAAA,EACA,aAAc,CAACL,EACbjB,EAAM,GACNe,EAAO,IAAI,WAAW,CACxB,EACA,QAASf,EAAM,EACjB,CACF,EAqCA,MAAO,CACL,OApCqBM,EAAQ,IAAM,CAKnC,IAAMiB,EAAU,CACd,SALqBT,EACnBE,EAAO,QAAQ,OAAQhB,GAAUA,EAAM,cAAc,UAAU,EAC/DgB,EAAO,SAGe,IAAKhB,IAAW,CACtC,KAAMA,EAAM,cAAc,KAC1B,GAAIA,EAAM,cAAc,SACxB,UAAWA,EAAM,cAAc,WAC/B,UAAW,EACb,EAAE,EACF,QAASgB,EAAO,QAAQ,IAAKhB,IAAW,CACtC,KAAMA,EAAM,cAAc,KAC1B,GAAIA,EAAM,cAAc,SACxB,UAAWA,EAAM,cAAc,WAC/B,UAAW,EACb,EAAE,CACJ,EAEA,OAAI,OAAOa,EAAc,IAChBU,EAGLV,IAAc,UACT,CACL,QAASU,EAAQ,OACnB,EAGK,CACL,QAASA,EAAQ,OACnB,CACF,EAAG,CAACP,EAAQH,EAAWC,CAAc,CAAC,EAIpC,cAAAO,EACA,qBAAsBD,EACtB,eAAgBD,GAAgB,EAClC,CACF,EDhEI,cAAA1B,MAAA,oBATG,IAAM+B,EAAuB5B,GAM9B,CACJ,IAAM6B,EAAQd,EAAwBf,CAAK,EAC3C,OACEH,EAACE,EAAA,CAAe,GAAG8B,EAAO,MAAO7B,EAAM,MAAO,QAASA,EAAM,QAAS,CAE1E,EAEa8B,EAAkB,gBAE/BrB,EAAqBqB,EAAiBF,EAAqB,CACzD,KAAM,KACN,MAAO,gBACT,CAAC","sourcesContent":["import { useState } from \"react\";\nimport { Box, Flex, Text, ChainIcon } from \"@orderly.network/ui\";\nimport type { ChainItem } from \"./types\";\n\n//------------------ ChainSelector start ------------------\nexport const ChainSelector = (props: {\n  chains: {\n    mainnet?: ChainItem[];\n    testnet?: ChainItem[];\n  };\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}) => {\n  const [select, setSelect] = useState<number | undefined>();\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  return (\n    <>\n      <Box intensity={900} r=\"2xl\" p={1}>\n        {Array.isArray(props.chains.mainnet) && (\n          <Text\n            as=\"div\"\n            className=\"oui-px-4 oui-pt-2\"\n            intensity={54}\n            size=\"2xs\"\n          >\n            Mainnet\n          </Text>\n        )}\n\n        {props.chains.mainnet?.map((item, index) => {\n          return (\n            <ChainTile\n              key={index}\n              selected={select === item.id}\n              // {...item}\n              item={item}\n              onClick={(chain: ChainItem) => onChange(chain)}\n            />\n          );\n        })}\n        {Array.isArray(props.chains.testnet) && (\n          <Text as=\"div\" className=\"oui-px-4\" intensity={54} size=\"2xs\">\n            Testnet\n          </Text>\n        )}\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      <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// ------------------ 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-6\"\n          : \"oui-w-full oui-rounded-lg hover:oui-bg-base-6 \"\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","import { registerSimpleDialog } 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}) => {\n  const state = useChainSelectorBuilder(props);\n  return (\n    <ChainSelector {...state} close={props.close} resolve={props.resolve} />\n  );\n};\n\nexport const ChainSelectorId = \"ChainSelector\";\n\nregisterSimpleDialog(ChainSelectorId, ChainSelectorWidget, {\n  size: \"sm\",\n  title: \"Switch Network\",\n});\n","import { useMemo } from \"react\";\nimport { useConfig } from \"@orderly.network/hooks\";\nimport { useChains, useWalletConnector } from \"@orderly.network/hooks\";\nimport { NetworkId } from \"@orderly.network/types\";\nimport { useAppContext } from \"@orderly.network/react-app\";\n\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\n  const { onChainChanged } = useAppContext();\n\n  const onChainChange = async (chain: { id: number }) => {\n    if (!connectedChain) {\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\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  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    if (typeof networkId === \"undefined\") {\n      return _chains;\n    }\n\n    if (networkId === \"testnet\") {\n      return {\n        testnet: _chains.testnet,\n      };\n    }\n\n    return {\n      mainnet: _chains.mainnet,\n    };\n  }, [chains, networkId, bridgeLessOnly]);\n\n  return {\n    chains: filteredChains,\n    onChainChange,\n    chainChangedCallback: onChainChanged,\n    currentChainId: connectedChain?.id as number | undefined,\n  };\n};\n"]}
+{"version":3,"sources":["../src/chainSelector.ui.tsx","../src/chainSelector.widget.tsx","../src/chainSelector.script.ts"],"names":["useState","Box","Flex","Text","ChainIcon","Fragment","jsx","jsxs","ChainSelector","props","isWrongNetwork","select","setSelect","onChange","chain","complete","item","index","ChainTile","registerSimpleDialog","registerSimpleSheet","useMemo","useConfig","useChains","useWalletConnector","useAppContext","useChainSelectorBuilder","options","networkId","bridgeLessOnly","config","chains","checkChainSupport","setChain","connectedChain","onChainChanged","currentChainId","setCurrentChainId","onChainChange","result","_chains","ChainSelectorWidget","state","ChainSelectorId","ChainSelectorSheetId"],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { Box, Flex, Text, ChainIcon } from \"@orderly.network/ui\";\nimport type { ChainItem } from \"./types\";\n\n//------------------ ChainSelector start ------------------\nexport const ChainSelector = (props: {\n  chains: {\n    mainnet?: ChainItem[];\n    testnet?: ChainItem[];\n  };\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>(props.currentChainId);\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  return (\n    <>\n      <Box intensity={900} r=\"2xl\" p={1} className=\"oui-overflow-auto oui-max-h-[463px] xl:oui-max-h-[562px] oui-hide-scrollbar\">\n        {Array.isArray(props.chains.mainnet) && (\n          <Text\n            as=\"div\"\n            className=\"oui-px-4 oui-pt-2\"\n            intensity={54}\n            size=\"2xs\"\n          >\n            Mainnet\n          </Text>\n        )}\n\n        {props.chains.mainnet?.map((item, index) => {\n          return (\n            <ChainTile\n              key={index}\n              selected={select === item.id}\n              // {...item}\n              item={item}\n              onClick={(chain: ChainItem) => onChange(chain)}\n            />\n          );\n        })}\n        {Array.isArray(props.chains.testnet) && (\n          <Text as=\"div\" className=\"oui-px-4\" intensity={54} size=\"2xs\">\n            Testnet\n          </Text>\n        )}\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      {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-6\"\n          : \"oui-w-full oui-rounded-lg hover:oui-bg-base-6 \"\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","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 {...state} close={props.close} resolve={props.resolve} isWrongNetwork={props.isWrongNetwork} />\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})\n","import { useMemo } from \"react\";\nimport { useConfig } from \"@orderly.network/hooks\";\nimport { useChains, useWalletConnector } from \"@orderly.network/hooks\";\nimport { NetworkId } from \"@orderly.network/types\";\nimport { useAppContext } from \"@orderly.network/react-app\";\n\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\n  const { onChainChanged, currentChainId, setCurrentChainId } = useAppContext();\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      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\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  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    if (typeof networkId === \"undefined\") {\n      return _chains;\n    }\n\n    if (networkId === \"testnet\") {\n      return {\n        testnet: _chains.testnet,\n      };\n    }\n\n    return {\n      mainnet: _chains.mainnet,\n    };\n  }, [chains, networkId, bridgeLessOnly]);\n\n  return {\n    chains: filteredChains,\n    onChainChange,\n    chainChangedCallback: onChainChanged,\n    currentChainId: (connectedChain?.id ?? currentChainId )  as number | undefined,\n  };\n};\n"]}

package/dist/index.mjs

@@ -1,11 +1,11 @@
 import { useState, useMemo } from 'react';
-import { registerSimpleDialog, Flex, ChainIcon, Text, Box } from '@orderly.network/ui';
+import { registerSimpleDialog, registerSimpleSheet, Flex, ChainIcon, Text, Box } from '@orderly.network/ui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useConfig, useChains, useWalletConnector } from '@orderly.network/hooks';
 import { useAppContext } from '@orderly.network/react-app';
 
-var b=e=>{let[n,a]=useState(),c=async t=>{a(t.id);let s=await e.onChainChange?.(t);s?(e.resolve?.(s),e.close?.(),e.chainChangedCallback?.(t.id,{isTestnet:t.isTestnet??!1,isWalletConnected:!0})):a(void 0);};return jsxs(Fragment,{children:[jsxs(Box,{intensity:900,r:"2xl",p:1,children:[Array.isArray(e.chains.mainnet)&&jsx(Text,{as:"div",className:"oui-px-4 oui-pt-2",intensity:54,size:"2xs",children:"Mainnet"}),e.chains.mainnet?.map((t,s)=>jsx(C,{selected:n===t.id,item:t,onClick:l=>c(l)},s)),Array.isArray(e.chains.testnet)&&jsx(Text,{as:"div",className:"oui-px-4",intensity:54,size:"2xs",children:"Testnet"}),e.chains.testnet?.map((t,s)=>jsx(C,{selected:n===t.id,onClick:l=>c(l),item:t},t.id))]}),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."})})]})},C=e=>{let{item:n}=e;return jsx("button",{className:e.selected?"oui-w-full oui-bg-base-6 oui-rounded-lg hover:oui-bg-base-6":"oui-w-full oui-rounded-lg hover:oui-bg-base-6 ",onClick:()=>{e.onClick?.(n);},children:jsxs(Flex,{justify:"between",children:[jsxs(Flex,{itemAlign:"center",width:"100%",py:3,px:4,gap:2,children:[jsx(ChainIcon,{chainId:n.id}),jsx(Text,{size:"2xs",children:n.name}),n.lowestFee&&jsx("div",{className:"oui-text-success oui-px-2 oui-bg-success/20 oui-rounded oui-text-2xs",children:"lowest fee"})]}),e.selected&&jsx(Box,{gradient:"brand",r:"full",width:"6px",height:"6px",mr:4})]})})};var g=e=>{let{networkId:n,bridgeLessOnly:a}=e||{},c=useConfig(),[t,{checkChainSupport:s}]=useChains(),{setChain:l,connectedChain:f}=useWalletConnector(),{onChainChanged:I}=useAppContext(),p=async d=>{if(!f)return Promise.reject("No connected chain");let r=await l({chainId:d.id});return r&&{result:r,wrongNetwork:!s(d.id,c.get("networkId")),chainId:d.id}};return {chains:useMemo(()=>{let r={mainnet:(a?t.mainnet.filter(o=>o.network_infos.bridgeless):t.mainnet).map(o=>({name:o.network_infos.name,id:o.network_infos.chain_id,lowestFee:o.network_infos.bridgeless,isTestnet:!1})),testnet:t.testnet.map(o=>({name:o.network_infos.name,id:o.network_infos.chain_id,lowestFee:o.network_infos.bridgeless,isTestnet:!0}))};return typeof n>"u"?r:n==="testnet"?{testnet:r.testnet}:{mainnet:r.mainnet}},[t,n,a]),onChainChange:p,chainChangedCallback:I,currentChainId:f?.id}};var x=e=>{let n=g(e);return jsx(b,{...n,close:e.close,resolve:e.resolve})},k="ChainSelector";registerSimpleDialog(k,x,{size:"sm",title:"Switch Network"});
+var x=e=>{let{isWrongNetwork:n=!0}=e,[d,h]=useState(e.currentChainId),s=async t=>{h(t.id);let r=await e.onChainChange?.(t);r?(e.resolve?.(r),e.close?.(),e.chainChangedCallback?.(t.id,{isTestnet:t.isTestnet??!1,isWalletConnected:!0})):h(void 0);};return jsxs(Fragment,{children:[jsxs(Box,{intensity:900,r:"2xl",p:1,className:"oui-overflow-auto oui-max-h-[463px] xl:oui-max-h-[562px] oui-hide-scrollbar",children:[Array.isArray(e.chains.mainnet)&&jsx(Text,{as:"div",className:"oui-px-4 oui-pt-2",intensity:54,size:"2xs",children:"Mainnet"}),e.chains.mainnet?.map((t,r)=>jsx(f,{selected:d===t.id,item:t,onClick:l=>s(l)},r)),Array.isArray(e.chains.testnet)&&jsx(Text,{as:"div",className:"oui-px-4",intensity:54,size:"2xs",children:"Testnet"}),e.chains.testnet?.map((t,r)=>jsx(f,{selected:d===t.id,onClick:l=>s(l),item:t},t.id))]}),n&&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."})})]})},f=e=>{let{item:n}=e;return jsx("button",{className:e.selected?"oui-w-full oui-bg-base-6 oui-rounded-lg hover:oui-bg-base-6":"oui-w-full oui-rounded-lg hover:oui-bg-base-6 ",onClick:()=>{e.onClick?.(n);},children:jsxs(Flex,{justify:"between",children:[jsxs(Flex,{itemAlign:"center",width:"100%",py:3,px:4,gap:2,children:[jsx(ChainIcon,{chainId:n.id}),jsx(Text,{size:"2xs",children:n.name}),n.lowestFee&&jsx("div",{className:"oui-text-success oui-px-2 oui-bg-success/20 oui-rounded oui-text-2xs",children:"lowest fee"})]}),e.selected&&jsx(Box,{gradient:"brand",r:"full",width:"6px",height:"6px",mr:4})]})})};var k=e=>{let{networkId:n,bridgeLessOnly:d}=e||{},h=useConfig(),[s,{checkChainSupport:t}]=useChains(),{setChain:r,connectedChain:l}=useWalletConnector(),{onChainChanged:S,currentChainId:p,setCurrentChainId:y}=useAppContext(),N=async c=>{if(!l)return y(c.id),{result:!0,wrongNetwork:!1,chainId:c.id};let a=await r({chainId:c.id});return a&&{result:a,wrongNetwork:!t(c.id,h.get("networkId")),chainId:c.id}};return {chains:useMemo(()=>{let a={mainnet:(d?s.mainnet.filter(o=>o.network_infos.bridgeless):s.mainnet).map(o=>({name:o.network_infos.name,id:o.network_infos.chain_id,lowestFee:o.network_infos.bridgeless,isTestnet:!1})),testnet:s.testnet.map(o=>({name:o.network_infos.name,id:o.network_infos.chain_id,lowestFee:o.network_infos.bridgeless,isTestnet:!0}))};return typeof n>"u"?a:n==="testnet"?{testnet:a.testnet}:{mainnet:a.mainnet}},[s,n,d]),onChainChange:N,chainChangedCallback:S,currentChainId:l?.id??p}};var w=e=>{let n=k(e);return jsx(x,{...n,close:e.close,resolve:e.resolve,isWrongNetwork:e.isWrongNetwork})},b="ChainSelector",I="ChainSelectorSheetId";registerSimpleDialog(b,w,{size:"sm",title:"Switch Network"});registerSimpleSheet(I,w,{title:"Switch Network"});
 
-export { k as ChainSelectorId, x as ChainSelectorWidget, C as ChainTile };
+export { b as ChainSelectorId, I as ChainSelectorSheetId, w as ChainSelectorWidget, f as ChainTile };
 //# 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","Box","Flex","Text","ChainIcon","Fragment","jsx","jsxs","ChainSelector","props","select","setSelect","onChange","chain","complete","item","index","ChainTile","registerSimpleDialog","useMemo","useConfig","useChains","useWalletConnector","useAppContext","useChainSelectorBuilder","options","networkId","bridgeLessOnly","config","chains","checkChainSupport","setChain","connectedChain","onChainChanged","onChainChange","result","_chains","ChainSelectorWidget","state","ChainSelectorId"],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { Box, Flex, Text, ChainIcon } from \"@orderly.network/ui\";\nimport type { ChainItem } from \"./types\";\n\n//------------------ ChainSelector start ------------------\nexport const ChainSelector = (props: {\n  chains: {\n    mainnet?: ChainItem[];\n    testnet?: ChainItem[];\n  };\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}) => {\n  const [select, setSelect] = useState<number | undefined>();\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  return (\n    <>\n      <Box intensity={900} r=\"2xl\" p={1}>\n        {Array.isArray(props.chains.mainnet) && (\n          <Text\n            as=\"div\"\n            className=\"oui-px-4 oui-pt-2\"\n            intensity={54}\n            size=\"2xs\"\n          >\n            Mainnet\n          </Text>\n        )}\n\n        {props.chains.mainnet?.map((item, index) => {\n          return (\n            <ChainTile\n              key={index}\n              selected={select === item.id}\n              // {...item}\n              item={item}\n              onClick={(chain: ChainItem) => onChange(chain)}\n            />\n          );\n        })}\n        {Array.isArray(props.chains.testnet) && (\n          <Text as=\"div\" className=\"oui-px-4\" intensity={54} size=\"2xs\">\n            Testnet\n          </Text>\n        )}\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      <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// ------------------ 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-6\"\n          : \"oui-w-full oui-rounded-lg hover:oui-bg-base-6 \"\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","import { registerSimpleDialog } 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}) => {\n  const state = useChainSelectorBuilder(props);\n  return (\n    <ChainSelector {...state} close={props.close} resolve={props.resolve} />\n  );\n};\n\nexport const ChainSelectorId = \"ChainSelector\";\n\nregisterSimpleDialog(ChainSelectorId, ChainSelectorWidget, {\n  size: \"sm\",\n  title: \"Switch Network\",\n});\n","import { useMemo } from \"react\";\nimport { useConfig } from \"@orderly.network/hooks\";\nimport { useChains, useWalletConnector } from \"@orderly.network/hooks\";\nimport { NetworkId } from \"@orderly.network/types\";\nimport { useAppContext } from \"@orderly.network/react-app\";\n\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\n  const { onChainChanged } = useAppContext();\n\n  const onChainChange = async (chain: { id: number }) => {\n    if (!connectedChain) {\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\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  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    if (typeof networkId === \"undefined\") {\n      return _chains;\n    }\n\n    if (networkId === \"testnet\") {\n      return {\n        testnet: _chains.testnet,\n      };\n    }\n\n    return {\n      mainnet: _chains.mainnet,\n    };\n  }, [chains, networkId, bridgeLessOnly]);\n\n  return {\n    chains: filteredChains,\n    onChainChange,\n    chainChangedCallback: onChainChanged,\n    currentChainId: connectedChain?.id as number | undefined,\n  };\n};\n"]}
+{"version":3,"sources":["../src/chainSelector.ui.tsx","../src/chainSelector.widget.tsx","../src/chainSelector.script.ts"],"names":["useState","Box","Flex","Text","ChainIcon","Fragment","jsx","jsxs","ChainSelector","props","isWrongNetwork","select","setSelect","onChange","chain","complete","item","index","ChainTile","registerSimpleDialog","registerSimpleSheet","useMemo","useConfig","useChains","useWalletConnector","useAppContext","useChainSelectorBuilder","options","networkId","bridgeLessOnly","config","chains","checkChainSupport","setChain","connectedChain","onChainChanged","currentChainId","setCurrentChainId","onChainChange","result","_chains","ChainSelectorWidget","state","ChainSelectorId","ChainSelectorSheetId"],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { Box, Flex, Text, ChainIcon } from \"@orderly.network/ui\";\nimport type { ChainItem } from \"./types\";\n\n//------------------ ChainSelector start ------------------\nexport const ChainSelector = (props: {\n  chains: {\n    mainnet?: ChainItem[];\n    testnet?: ChainItem[];\n  };\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>(props.currentChainId);\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  return (\n    <>\n      <Box intensity={900} r=\"2xl\" p={1} className=\"oui-overflow-auto oui-max-h-[463px] xl:oui-max-h-[562px] oui-hide-scrollbar\">\n        {Array.isArray(props.chains.mainnet) && (\n          <Text\n            as=\"div\"\n            className=\"oui-px-4 oui-pt-2\"\n            intensity={54}\n            size=\"2xs\"\n          >\n            Mainnet\n          </Text>\n        )}\n\n        {props.chains.mainnet?.map((item, index) => {\n          return (\n            <ChainTile\n              key={index}\n              selected={select === item.id}\n              // {...item}\n              item={item}\n              onClick={(chain: ChainItem) => onChange(chain)}\n            />\n          );\n        })}\n        {Array.isArray(props.chains.testnet) && (\n          <Text as=\"div\" className=\"oui-px-4\" intensity={54} size=\"2xs\">\n            Testnet\n          </Text>\n        )}\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      {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-6\"\n          : \"oui-w-full oui-rounded-lg hover:oui-bg-base-6 \"\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","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 {...state} close={props.close} resolve={props.resolve} isWrongNetwork={props.isWrongNetwork} />\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})\n","import { useMemo } from \"react\";\nimport { useConfig } from \"@orderly.network/hooks\";\nimport { useChains, useWalletConnector } from \"@orderly.network/hooks\";\nimport { NetworkId } from \"@orderly.network/types\";\nimport { useAppContext } from \"@orderly.network/react-app\";\n\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\n  const { onChainChanged, currentChainId, setCurrentChainId } = useAppContext();\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      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\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  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    if (typeof networkId === \"undefined\") {\n      return _chains;\n    }\n\n    if (networkId === \"testnet\") {\n      return {\n        testnet: _chains.testnet,\n      };\n    }\n\n    return {\n      mainnet: _chains.mainnet,\n    };\n  }, [chains, networkId, bridgeLessOnly]);\n\n  return {\n    chains: filteredChains,\n    onChainChange,\n    chainChangedCallback: onChainChanged,\n    currentChainId: (connectedChain?.id ?? currentChainId )  as number | undefined,\n  };\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orderly.network/ui-chain-selector",
-  "version": "2.0.0",
+  "version": "2.0.1-alpha.0",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -14,10 +14,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@orderly.network/types": "2.0.0",
-    "@orderly.network/hooks": "2.0.0",
-    "@orderly.network/ui": "2.0.0",
-    "@orderly.network/react-app": "2.0.0"
+    "@orderly.network/ui": "2.0.1-alpha.0",
+    "@orderly.network/hooks": "2.0.1-alpha.0",
+    "@orderly.network/react-app": "2.0.1-alpha.0",
+    "@orderly.network/types": "2.0.1-alpha.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.2",
@@ -27,8 +27,9 @@
     "react": "^18.3.1",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.4.4",
+    "typescript": "^5.1.6",
     "tsup": "^7.1.0",
-    "tsconfig": "0.3.12"
+    "tsconfig": "0.3.16"
   },
   "peerDependencies": {
     "react": "^18.3.1",