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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +1 -1
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +6 -6
package/dist/index.js CHANGED
@@ -6,7 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
6
6
  var hooks = require('@orderly.network/hooks');
7
7
  var reactApp = require('@orderly.network/react-app');
8
8
 
9
- 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 ",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",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-6":"oui-w-full oui-rounded-lg hover:oui-bg-base-6 ",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"}});
9
+ 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"}});
10
10
 
11
11
  exports.ChainSelectorId = M;
12
12
  exports.ChainSelectorSheetId = W;
package/dist/index.js.map CHANGED
@@ -1 +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 \"\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\">\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-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\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"]}
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"]}
package/dist/index.mjs CHANGED
@@ -4,7 +4,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
4
4
  import { useConfig, useChains, useWalletConnector, useLocalStorage } from '@orderly.network/hooks';
5
5
  import { useAppContext } from '@orderly.network/react-app';
6
6
 
7
- 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 ",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",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-6":"oui-w-full oui-rounded-lg hover:oui-bg-base-6 ",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"}});
7
+ 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"}});
8
8
 
9
9
  export { M as ChainSelectorId, W as ChainSelectorSheetId, k as ChainSelectorWidget, w as ChainTile };
10
10
  //# sourceMappingURL=out.js.map
package/dist/index.mjs.map CHANGED
@@ -1 +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 \"\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\">\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-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\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"]}
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"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orderly.network/ui-chain-selector",
3
- "version": "2.0.1",
3
+ "version": "2.0.2",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -14,10 +14,10 @@
14
14
  "access": "public"
15
15
  },
16
16
  "dependencies": {
17
- "@orderly.network/ui": "2.0.1",
18
- "@orderly.network/hooks": "2.0.1",
19
- "@orderly.network/react-app": "2.0.1",
20
- "@orderly.network/types": "2.0.1"
17
+ "@orderly.network/react-app": "2.0.2",
18
+ "@orderly.network/hooks": "2.0.2",
19
+ "@orderly.network/ui": "2.0.2",
20
+ "@orderly.network/types": "2.0.2"
21
21
  },
22
22
  "devDependencies": {
23
23
  "@types/react": "^18.3.2",
@@ -29,7 +29,7 @@
29
29
  "tailwindcss": "^3.4.4",
30
30
  "typescript": "^5.1.6",
31
31
  "tsup": "^7.1.0",
32
- "tsconfig": "0.3.17"
32
+ "tsconfig": "0.3.18"
33
33
  },
34
34
  "peerDependencies": {
35
35
  "react": ">=18",