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

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 (7) hide show
  1. package/dist/index.d.mts +1 -0
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.js +4 -4
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +4 -4
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +6 -6
package/dist/index.d.mts CHANGED
@@ -47,6 +47,7 @@ declare const useChainSelectorScript: (options: UseChainSelectorScriptOptions) =
47
47
  onChainClick: (chain: TChainItem) => Promise<void>;
48
48
  selectedTab: ChainType;
49
49
  onTabChange: (tab: ChainType) => void;
50
+ showTestnet: boolean;
50
51
  };
51
52
 
52
53
  type ChainSelectorProps = {
package/dist/index.d.ts CHANGED
@@ -47,6 +47,7 @@ declare const useChainSelectorScript: (options: UseChainSelectorScriptOptions) =
47
47
  onChainClick: (chain: TChainItem) => Promise<void>;
48
48
  selectedTab: ChainType;
49
49
  onTabChange: (tab: ChainType) => void;
50
+ showTestnet: boolean;
50
51
  };
51
52
 
52
53
  type ChainSelectorProps = {
package/dist/index.js CHANGED
@@ -6,10 +6,10 @@ var hooks = require('@orderly.network/hooks');
6
6
  var reactApp = require('@orderly.network/react-app');
7
7
  var jsxRuntime = require('react/jsx-runtime');
8
8
 
9
- var G="orderly_selected_chains",J=6,v=e=>{let{networkId:i,bridgeLessOnly:c}=e||{},d=hooks.useConfig(),[a,{checkChainSupport:l}]=hooks.useChains(),{setChain:r,connectedChain:C}=hooks.useWalletConnector(),{onChainChanged:m,currentChainId:b,setCurrentChainId:o,wrongNetwork:u}=reactApp.useAppContext(),[F,k]=react.useState(b),p=react.useMemo(()=>({mainnet:(c?a.mainnet.filter(n=>n.network_infos.bridgeless):a.mainnet).map(n=>({name:n.network_infos.name,id:n.network_infos.chain_id,lowestFee:n.network_infos.bridgeless,isTestnet:!1})),testnet:a.testnet.map(n=>({name:n.network_infos.name,id:n.network_infos.chain_id,lowestFee:n.network_infos.bridgeless,isTestnet:!0}))}),[a,c]),{recentChains:A,saveRecentChain:B}=Z(p),U=async t=>{if(C){let n=await r({chainId:t.id});return n&&{result:n,wrongNetwork:!l(t.id,d.get("networkId")),chainId:t.id}}return o(t.id),{result:!0,wrongNetwork:!1,chainId:t.id}},S=(t,n)=>{let I={isTestnet:t.isTestnet,isWalletConnected:n};e.onChainChangeAfter?.(t.id,I),m?.(t.id,I);},O=async t=>{k(t.id),e.onChainChangeBefore?.(t.id,{isTestnet:t.isTestnet});try{let n=await U?.(t);n?(e.resolve?.(n),e.close?.(),B(t),S(t,!0)):(k(void 0),S(t,!1));}catch{S(t,!1);}},{selectedTab:z,onTabChange:D}=Q(p,b,u);return {recentChains:A,chains:p,selectChainId:F,onChainClick:O,selectedTab:z,onTabChange:D}};function Q(e,i,c){let[d,a]=react.useState("Mainnet"),l=r=>{a(r);};return react.useEffect(()=>{if(i){if(e.mainnet?.some(m=>m.id===i)){a(c?"Testnet":"Mainnet");return}if(e.testnet?.some(m=>m.id===i)){a(c?"Mainnet":"Testnet");return}}},[i,e,c]),{selectedTab:d,onTabChange:l}}function Z(e){let[i,c]=hooks.useLocalStorage(G,[]),d=react.useMemo(()=>i?.map(l=>e.mainnet?.find(r=>r.id===parseInt(l))),[e,i]),a=react.useCallback(l=>{if(l.isTestnet)return;let r=i?.filter(C=>C!==l.id);r=[l.id,...r].slice(0,J),c(r);},[i]);return {recentChains:d,saveRecentChain:a}}var te=ui.tv({slots:{icon:"",list:"oui-grid oui-grid-cols-1 oui-gap-1",mainnetList:'"',testnetList:'"',recentList:"",item:"oui-w-full oui-rounded-md",tip:"oui-text-center"},variants:{variant:{compact:{icon:"oui-w-6 oui-h-6",list:"oui-bg-base-9 oui-rounded-lg oui-p-1",mainnetList:"oui-grid-cols-2 oui-mt-4",testnetList:"oui-grid-cols-1 oui-mt-4",recentList:"oui-mt-4",item:"oui-bg-base-6 hover:oui-bg-base-7",tip:"oui-pt-6"},wide:{icon:"oui-w-[18px] oui-h-[18px]",mainnetList:"oui-grid-cols-3 oui-mt-3",testnetList:"oui-grid-cols-2 oui-mt-3",recentList:"oui-mt-3",item:"oui-bg-base-5 hover:oui-bg-base-6",tip:"oui-pt-8"}},selected:{true:{item:""},false:{item:"oui-bg-transparent"}}},compoundVariants:[{variant:"compact",selected:!0,className:{item:"hover:oui-bg-base-6"}},{variant:"wide",selected:!0,className:{item:"hover:oui-bg-base-5"}}],defaultVariants:{variant:"wide",selected:!1}}),R=e=>{let{isWrongNetwork:i,variant:c="wide"}=e,{list:d,recentList:a,mainnetList:l,testnetList:r,icon:C,item:m,tip:b}=te({variant:c});return jsxRuntime.jsxs(ui.Box,{className:ui.cn("oui-font-semibold",e.className),children:[jsxRuntime.jsxs(ui.Tabs,{value:e.selectedTab,variant:"contained",size:c==="wide"?"md":"lg",onValueChange:o=>e.onTabChange(o),children:[jsxRuntime.jsxs(ui.TabPanel,{value:"Mainnet",title:"Mainnet",children:[!!e.recentChains?.length&&jsxRuntime.jsx(ui.Flex,{gap:2,className:a(),children:e.recentChains?.map(o=>jsxRuntime.jsx(ne,{item:o,onClick:()=>e.onChainClick(o),iconClassName:C()},o.id))}),jsxRuntime.jsx(ui.Box,{r:"2xl",className:ui.cn(d(),l()),children:e.chains.mainnet?.map(o=>{let u=e.selectChainId===o.id;return jsxRuntime.jsx(L,{selected:u,item:o,onClick:()=>e.onChainClick(o),className:m({selected:u})},o.id)})})]}),jsxRuntime.jsx(ui.TabPanel,{value:"Testnet",title:"Testnet",children:jsxRuntime.jsx(ui.Box,{r:"2xl",className:ui.cn(d(),r()),children:e.chains.testnet?.map(o=>{let u=e.selectChainId===o.id;return jsxRuntime.jsx(L,{selected:u,item:o,onClick:()=>e.onChainClick(o),className:m({selected:u})},o.id)})})})]}),i&&jsxRuntime.jsx(ui.Box,{className:b(),children:jsxRuntime.jsx(ui.Text,{color:"warning",size:"xs",children:"Please switch to a supported network to continue."})})]})},L=e=>{let{item:i}=e;return jsxRuntime.jsx("button",{className:e.className,onClick:e.onClick,children:jsxRuntime.jsxs(ui.Flex,{justify:"between",className:"oui-py-2.5",px:3,children:[jsxRuntime.jsxs(ui.Flex,{itemAlign:"center",width:"100%",className:"oui-gap-x-[6px]",children:[jsxRuntime.jsx(ui.ChainIcon,{chainId:i.id,size:"xs"}),jsxRuntime.jsx(ui.Text,{size:"2xs",children:i.name})]}),e.selected&&jsxRuntime.jsx(ui.Box,{gradient:"brand",r:"full",width:4,height:4})]})})},ne=e=>jsxRuntime.jsx("button",{className:"oui-border oui-border-line-12 oui-rounded-lg hover:oui-border-primary-light",onClick:e.onClick,children:jsxRuntime.jsx(ui.Flex,{itemAlign:"center",p:2,children:jsxRuntime.jsx(ui.ChainIcon,{chainId:e.item.id,className:e.iconClassName})})});var w=e=>{let i=v(e);return jsxRuntime.jsx(R,{...i,variant:e.variant,isWrongNetwork:e.isWrongNetwork})},M="ChainSelectorDialogId",P="ChainSelectorSheetId";ui.registerSimpleDialog(M,w,{size:"lg",title:"Switch Network",variant:"wide",isWrongNetwork:!0});ui.registerSimpleSheet(P,w,{title:"Switch Network",classNames:{content:"!oui-bg-base-8",body:"!oui-bg-base-8"},variant:"compact",isWrongNetwork:!0});
9
+ var Z="orderly_selected_chains",$=6,y=e=>{let{networkId:i,bridgeLessOnly:r}=e||{},d=hooks.useConfig(),[l,{checkChainSupport:s}]=hooks.useChains(),{setChain:c,connectedChain:m}=hooks.useWalletConnector(),{onChainChanged:h,currentChainId:u,setCurrentChainId:o,wrongNetwork:C}=reactApp.useAppContext(),[F,I]=react.useState(u),{getComponentTheme:A}=ui.useOrderlyTheme(),g=react.useMemo(()=>({mainnet:(r?l.mainnet.filter(n=>n.network_infos.bridgeless):l.mainnet).map(n=>({name:n.network_infos.name,id:n.network_infos.chain_id,lowestFee:n.network_infos.bridgeless,isTestnet:false})),testnet:l.testnet.map(n=>({name:n.network_infos.name,id:n.network_infos.chain_id,lowestFee:n.network_infos.bridgeless,isTestnet:true}))}),[l,r]),N=react.useMemo(()=>!(A("chainSelector",{showTestnet:true}).showTestnet===false||!g.testnet.length),[g.testnet]),{recentChains:B,saveRecentChain:U}=te(g),z=async t=>{if(m){let n=await c({chainId:t.id});return n&&{result:n,wrongNetwork:!s(t.id,d.get("networkId")),chainId:t.id}}return o(t.id),{result:true,wrongNetwork:false,chainId:t.id}},S=(t,n)=>{let x={isTestnet:t.isTestnet,isWalletConnected:n};e.onChainChangeAfter?.(t.id,x),h?.(t.id,x);},D=async t=>{I(t.id),e.onChainChangeBefore?.(t.id,{isTestnet:t.isTestnet});try{let n=await z?.(t);n?(e.resolve?.(n),e.close?.(),U(t),S(t,!0)):(I(void 0),S(t,!1));}catch{S(t,false);}},{selectedTab:E,onTabChange:V}=ee(g,u,C,N);return {recentChains:B,chains:g,selectChainId:F,onChainClick:D,selectedTab:E,onTabChange:V,showTestnet:N}};function ee(e,i,r,d){let[l,s]=react.useState("Mainnet"),c=m=>{s(m);};return react.useEffect(()=>{if(!d){s("Mainnet");return}if(i){if(e.mainnet?.some(u=>u.id===i)){s(r?"Testnet":"Mainnet");return}if(e.testnet?.some(u=>u.id===i)){s(r?"Mainnet":"Testnet");return}}},[i,e,r,d]),{selectedTab:l,onTabChange:c}}function te(e){let[i,r]=hooks.useLocalStorage(Z,[]),d=react.useMemo(()=>i?.map(s=>e.mainnet?.find(c=>c.id===parseInt(s))).filter(s=>!!s),[e,i]),l=react.useCallback(s=>{if(s.isTestnet)return;let c=i?.filter(m=>m!==s.id);c=[s.id,...c].slice(0,$),r(c);},[i]);return {recentChains:d,saveRecentChain:l}}var oe=ui.tv({slots:{icon:"",list:"oui-grid oui-grid-cols-1 oui-gap-1",mainnetList:'"',testnetList:'"',recentList:"",item:"oui-w-full oui-rounded-md",tip:"oui-text-center"},variants:{variant:{compact:{icon:"oui-w-6 oui-h-6",list:"oui-bg-base-9 oui-rounded-lg oui-p-1",mainnetList:"oui-grid-cols-2 oui-mt-4",testnetList:"oui-grid-cols-1 oui-mt-4",recentList:"oui-mt-4",item:"oui-bg-base-6 hover:oui-bg-base-7",tip:"oui-pt-6"},wide:{icon:"oui-w-[18px] oui-h-[18px]",mainnetList:"oui-grid-cols-3 oui-mt-3",testnetList:"oui-grid-cols-2 oui-mt-3",recentList:"oui-mt-3",item:"oui-bg-base-5 hover:oui-bg-base-6",tip:"oui-pt-8"}},selected:{true:{item:""},false:{item:"oui-bg-transparent"}}},compoundVariants:[{variant:"compact",selected:true,className:{item:"hover:oui-bg-base-6"}},{variant:"wide",selected:true,className:{item:"hover:oui-bg-base-5"}}],defaultVariants:{variant:"wide",selected:false}}),R=e=>{let{isWrongNetwork:i,variant:r="wide"}=e,{list:d,recentList:l,mainnetList:s,testnetList:c,icon:m,item:h,tip:u}=oe({variant:r});return jsxRuntime.jsxs(ui.Box,{className:ui.cn("oui-font-semibold",e.className),children:[jsxRuntime.jsxs(ui.Tabs,{value:e.selectedTab,variant:"contained",size:r==="wide"?"md":"lg",onValueChange:o=>e.onTabChange(o),children:[jsxRuntime.jsxs(ui.TabPanel,{value:"Mainnet",title:"Mainnet",children:[!!e.recentChains?.length&&jsxRuntime.jsx(ui.Flex,{gap:2,className:l(),children:e.recentChains?.map(o=>jsxRuntime.jsx(se,{item:o,onClick:()=>e.onChainClick(o),iconClassName:m()},o.id))}),jsxRuntime.jsx(ui.Box,{r:"2xl",className:ui.cn(d(),s()),children:e.chains.mainnet?.map(o=>{let C=e.selectChainId===o.id;return jsxRuntime.jsx(_,{selected:C,item:o,onClick:()=>e.onChainClick(o),className:h({selected:C})},o.id)})})]}),e.showTestnet&&jsxRuntime.jsx(ui.TabPanel,{value:"Testnet",title:"Testnet",children:jsxRuntime.jsx(ui.Box,{r:"2xl",className:ui.cn(d(),c()),children:e.chains.testnet?.map(o=>{let C=e.selectChainId===o.id;return jsxRuntime.jsx(_,{selected:C,item:o,onClick:()=>e.onChainClick(o),className:h({selected:C})},o.id)})})})]}),i&&jsxRuntime.jsx(ui.Box,{className:u(),children:jsxRuntime.jsx(ui.Text,{color:"warning",size:"xs",children:"Please switch to a supported network to continue."})})]})},_=e=>{let{item:i}=e;return jsxRuntime.jsx("button",{className:e.className,onClick:e.onClick,children:jsxRuntime.jsxs(ui.Flex,{justify:"between",className:"oui-py-2.5",px:3,children:[jsxRuntime.jsxs(ui.Flex,{itemAlign:"center",width:"100%",className:"oui-gap-x-[6px]",children:[jsxRuntime.jsx(ui.ChainIcon,{chainId:i.id,size:"xs"}),jsxRuntime.jsx(ui.Text,{size:"2xs",children:i.name})]}),e.selected&&jsxRuntime.jsx(ui.Box,{gradient:"brand",r:"full",width:4,height:4})]})})},se=e=>jsxRuntime.jsx("button",{className:"oui-border oui-border-line-12 oui-rounded-lg hover:oui-border-primary-light",onClick:e.onClick,children:jsxRuntime.jsx(ui.Flex,{itemAlign:"center",p:2,children:jsxRuntime.jsx(ui.ChainIcon,{chainId:e.item.id,className:e.iconClassName})})});var k=e=>{let i=y(e);return jsxRuntime.jsx(R,{...i,variant:e.variant,isWrongNetwork:e.isWrongNetwork})},P="ChainSelectorDialogId",O="ChainSelectorSheetId";ui.registerSimpleDialog(P,k,{size:"lg",title:"Switch Network",variant:"wide",isWrongNetwork:true});ui.registerSimpleSheet(O,k,{title:"Switch Network",classNames:{content:"!oui-bg-base-8",body:"!oui-bg-base-8"},variant:"compact",isWrongNetwork:true});
10
10
 
11
- exports.ChainSelectorDialogId = M;
12
- exports.ChainSelectorSheetId = P;
13
- exports.ChainSelectorWidget = w;
11
+ exports.ChainSelectorDialogId = P;
12
+ exports.ChainSelectorSheetId = O;
13
+ exports.ChainSelectorWidget = k;
14
14
  //# sourceMappingURL=out.js.map
15
15
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/chainSelector.widget.tsx","../src/chainSelector.script.ts","../src/chainSelector.ui.tsx"],"names":["registerSimpleDialog","registerSimpleSheet","useMemo","useCallback","useState","useEffect","useConfig","useChains","useWalletConnector","useLocalStorage","useAppContext","KEY","MAX_RECENT_CHAINS","useChainSelectorScript","options","networkId","bridgeLessOnly","config","_chains","checkChainSupport","setChain","connectedChain","onChainChanged","currentChainId","setCurrentChainId","wrongNetwork","selectChainId","setSelectChainId","chains","chain","recentChains","saveRecentChain","useRecentChains","onChainChange","result","changedCallback","isWalletConnected","params","onChainClick","complete","selectedTab","onTabChange","useChainTab","setSelectedTab","tab","recentChainsIds","setRecentChainsIds","id","item","ids","Box","Flex","Text","ChainIcon","Tabs","TabPanel","cn","tv","jsx","jsxs","chainSelectorVariants","ChainSelector","props","isWrongNetwork","variant","list","recentList","mainnetList","testnetList","icon","tip","e","RecentChainItem","selected","ChainItem","ChainSelectorWidget","state","ChainSelectorDialogId","ChainSelectorSheetId"],"mappings":"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","sourcesContent":["import { registerSimpleDialog, registerSimpleSheet } from \"@orderly.network/ui\";\nimport {\n useChainSelectorScript,\n UseChainSelectorScriptOptions,\n} from \"./chainSelector.script\";\nimport { ChainSelector, ChainSelectorProps } from \"./chainSelector.ui\";\n\nexport type ChainSelectorWidgetProps = UseChainSelectorScriptOptions &\n Pick<ChainSelectorProps, \"isWrongNetwork\" | \"variant\" | \"className\">;\n\nexport const ChainSelectorWidget = (props: ChainSelectorWidgetProps) => {\n const state = useChainSelectorScript(props);\n\n return (\n <ChainSelector\n {...state}\n variant={props.variant}\n isWrongNetwork={props.isWrongNetwork}\n />\n );\n};\n\nexport const ChainSelectorDialogId = \"ChainSelectorDialogId\";\nexport const ChainSelectorSheetId = \"ChainSelectorSheetId\";\n\nregisterSimpleDialog(ChainSelectorDialogId, ChainSelectorWidget, {\n size: \"lg\",\n title: \"Switch Network\",\n variant: \"wide\",\n isWrongNetwork: true,\n});\n\nregisterSimpleSheet(ChainSelectorSheetId, ChainSelectorWidget, {\n title: \"Switch Network\",\n classNames: {\n content: \"!oui-bg-base-8\",\n body: \"!oui-bg-base-8\",\n },\n variant: \"compact\",\n isWrongNetwork: true,\n});\n","import { useMemo, useCallback, useState, useEffect } from \"react\";\nimport { useConfig } from \"@orderly.network/hooks\";\nimport {\n useChains,\n useWalletConnector,\n useLocalStorage,\n} from \"@orderly.network/hooks\";\nimport { NetworkId } from \"@orderly.network/types\";\nimport { useAppContext } from \"@orderly.network/react-app\";\nimport { ChainType, TChainItem } from \"./type\";\n\nconst KEY = \"orderly_selected_chains\";\nconst MAX_RECENT_CHAINS = 6;\n\nexport type UseChainSelectorScriptReturn = ReturnType<\n typeof useChainSelectorScript\n>;\n\nexport type UseChainSelectorScriptOptions = {\n networkId?: NetworkId;\n bridgeLessOnly?: boolean;\n close?: () => void;\n resolve?: (isSuccess: boolean) => void;\n reject?: () => void;\n onChainChangeBefore?: (\n chainId: number,\n state: {\n isTestnet: boolean;\n }\n ) => void;\n onChainChangeAfter?: (\n chainId: number,\n state: {\n isTestnet: boolean;\n isWalletConnected: boolean;\n }\n ) => void;\n};\n\nexport const useChainSelectorScript = (\n options: UseChainSelectorScriptOptions\n) => {\n const { networkId, bridgeLessOnly } = options || {};\n\n const config = useConfig();\n const [_chains, { checkChainSupport }] = useChains();\n const { setChain, connectedChain } = useWalletConnector();\n\n const { onChainChanged, currentChainId, setCurrentChainId, wrongNetwork } =\n useAppContext();\n\n const [selectChainId, setSelectChainId] = useState<number | undefined>(\n currentChainId\n );\n\n const chains = useMemo(() => {\n const bridgeLessChains = bridgeLessOnly\n ? _chains.mainnet.filter((chain) => chain.network_infos.bridgeless)\n : _chains.mainnet;\n\n return {\n mainnet: bridgeLessChains.map((chain) => ({\n name: chain.network_infos.name,\n id: chain.network_infos.chain_id,\n lowestFee: chain.network_infos.bridgeless,\n isTestnet: false,\n })),\n testnet: _chains.testnet.map((chain) => ({\n name: chain.network_infos.name,\n id: chain.network_infos.chain_id,\n lowestFee: chain.network_infos.bridgeless,\n isTestnet: true,\n })),\n };\n }, [_chains, bridgeLessOnly]);\n\n const { recentChains, saveRecentChain } = useRecentChains(chains);\n\n const onChainChange = async (chain: TChainItem) => {\n if (connectedChain) {\n const result = await setChain({ chainId: chain.id });\n\n if (!result) return result;\n\n return {\n result,\n wrongNetwork: !checkChainSupport(chain.id, config.get(\"networkId\")),\n chainId: chain.id,\n };\n }\n\n setCurrentChainId(chain.id);\n return {\n result: true,\n wrongNetwork: false,\n chainId: chain.id,\n };\n // return Promise.reject(\"No connected chain\");\n };\n\n const changedCallback = (chain: TChainItem, isWalletConnected: boolean) => {\n const params = {\n isTestnet: chain.isTestnet,\n isWalletConnected,\n };\n options.onChainChangeAfter?.(chain.id, params);\n onChainChanged?.(chain.id, params);\n };\n\n const onChainClick = async (chain: TChainItem) => {\n setSelectChainId(chain.id);\n options.onChainChangeBefore?.(chain.id, { isTestnet: chain.isTestnet });\n try {\n const complete = await onChainChange?.(chain);\n\n if (complete) {\n options.resolve?.(complete);\n options.close?.();\n saveRecentChain(chain);\n changedCallback(chain, true);\n } else {\n setSelectChainId(undefined);\n changedCallback(chain, false);\n }\n } catch (err) {\n changedCallback(chain, false);\n }\n };\n\n const { selectedTab, onTabChange } = useChainTab(\n chains,\n currentChainId,\n wrongNetwork\n );\n\n return {\n recentChains,\n chains,\n selectChainId,\n onChainClick,\n selectedTab,\n onTabChange,\n };\n};\n\nfunction useChainTab(\n chains: Record<NetworkId, TChainItem[]>,\n currentChainId?: number,\n wrongNetwork?: boolean\n) {\n const [selectedTab, setSelectedTab] = useState<ChainType>(ChainType.Mainnet);\n\n const onTabChange = (tab: ChainType) => {\n setSelectedTab(tab);\n };\n\n useEffect(() => {\n if (currentChainId) {\n const isMainnet = chains.mainnet?.some(\n (chain) => chain.id === currentChainId\n );\n if (isMainnet) {\n setSelectedTab(wrongNetwork ? ChainType.Testnet : ChainType.Mainnet);\n return;\n }\n\n const isTestnet = chains.testnet?.some(\n (chain) => chain.id === currentChainId\n );\n\n if (isTestnet) {\n setSelectedTab(wrongNetwork ? ChainType.Mainnet : ChainType.Testnet);\n return;\n }\n }\n }, [currentChainId, chains, wrongNetwork]);\n\n return { selectedTab, onTabChange };\n}\n\nfunction useRecentChains(chains: Record<NetworkId, TChainItem[]>) {\n const [recentChainsIds, setRecentChainsIds] = useLocalStorage<string[]>(\n KEY,\n []\n );\n\n const recentChains = useMemo<TChainItem[]>(() => {\n return recentChainsIds?.map((id: string) =>\n chains.mainnet?.find((item) => item.id === parseInt(id))\n );\n }, [chains, recentChainsIds]);\n\n const saveRecentChain = useCallback(\n (chain: TChainItem) => {\n // only mainnet can save chain id to local storage\n if (chain.isTestnet) {\n return;\n }\n let ids = recentChainsIds?.filter((id: number) => id !== chain.id);\n ids = [chain.id, ...ids].slice(0, MAX_RECENT_CHAINS);\n setRecentChainsIds(ids);\n },\n [recentChainsIds]\n );\n\n return { recentChains, saveRecentChain };\n}\n","import {\n Box,\n Flex,\n Text,\n ChainIcon,\n Tabs,\n TabPanel,\n cn,\n tv,\n} from \"@orderly.network/ui\";\nimport { ChainType, TChainItem } from \"./type\";\nimport { UseChainSelectorScriptReturn } from \"./chainSelector.script\";\n\nexport type ChainSelectorProps = {\n isWrongNetwork?: boolean;\n /**\n * wide: This represents the wide screen (desktop) UI mode\n * compact: This indicates a compact (mobile) UI pattern.\n */\n variant?: \"wide\" | \"compact\";\n className?: string;\n} & UseChainSelectorScriptReturn;\n\nconst chainSelectorVariants = tv({\n slots: {\n icon: \"\",\n list: \"oui-grid oui-grid-cols-1 oui-gap-1\",\n mainnetList: '\"',\n testnetList: '\"',\n recentList: \"\",\n item: \"oui-w-full oui-rounded-md\",\n tip: \"oui-text-center\",\n },\n variants: {\n variant: {\n compact: {\n icon: \"oui-w-6 oui-h-6\",\n list: \"oui-bg-base-9 oui-rounded-lg oui-p-1\",\n mainnetList: \"oui-grid-cols-2 oui-mt-4\",\n testnetList: \"oui-grid-cols-1 oui-mt-4\",\n recentList: \"oui-mt-4\",\n item: \"oui-bg-base-6 hover:oui-bg-base-7\",\n tip: \"oui-pt-6\",\n },\n wide: {\n icon: \"oui-w-[18px] oui-h-[18px]\",\n mainnetList: \"oui-grid-cols-3 oui-mt-3\",\n testnetList: \"oui-grid-cols-2 oui-mt-3\",\n recentList: \"oui-mt-3\",\n item: \"oui-bg-base-5 hover:oui-bg-base-6\",\n tip: \"oui-pt-8\",\n },\n },\n selected: {\n true: {\n item: \"\",\n },\n false: { item: \"oui-bg-transparent\" },\n },\n },\n compoundVariants: [\n {\n variant: \"compact\",\n selected: true,\n className: {\n item: \"hover:oui-bg-base-6\",\n },\n },\n {\n variant: \"wide\",\n selected: true,\n className: {\n item: \"hover:oui-bg-base-5\",\n },\n },\n ],\n defaultVariants: {\n variant: \"wide\",\n selected: false,\n },\n});\n\n//------------------ ChainSelector start ------------------\nexport const ChainSelector = (props: ChainSelectorProps) => {\n const { isWrongNetwork, variant = \"wide\" } = props;\n\n const { list, recentList, mainnetList, testnetList, icon, item, tip } =\n chainSelectorVariants({ variant });\n\n return (\n <Box className={cn(\"oui-font-semibold\", props.className)}>\n <Tabs\n value={props.selectedTab}\n variant=\"contained\"\n size={variant === \"wide\" ? \"md\" : \"lg\"}\n onValueChange={(e) => props.onTabChange(e as ChainType)}\n >\n <TabPanel value={ChainType.Mainnet} title={ChainType.Mainnet}>\n {!!props.recentChains?.length && (\n <Flex gap={2} className={recentList()}>\n {props.recentChains?.map((item) => {\n return (\n <RecentChainItem\n key={item.id}\n item={item}\n onClick={() => props.onChainClick(item)}\n iconClassName={icon()}\n />\n );\n })}\n </Flex>\n )}\n\n <Box r=\"2xl\" className={cn(list(), mainnetList())}>\n {props.chains.mainnet?.map((chain) => {\n const selected = props.selectChainId === chain.id;\n return (\n <ChainItem\n key={chain.id}\n selected={selected}\n item={chain}\n onClick={() => props.onChainClick(chain)}\n className={item({ selected })}\n />\n );\n })}\n </Box>\n </TabPanel>\n\n <TabPanel value={ChainType.Testnet} title={ChainType.Testnet}>\n <Box r=\"2xl\" className={cn(list(), testnetList())}>\n {props.chains.testnet?.map((chain) => {\n const selected = props.selectChainId === chain.id;\n return (\n <ChainItem\n key={chain.id}\n selected={selected}\n item={chain}\n onClick={() => props.onChainClick(chain)}\n className={item({ selected })}\n />\n );\n })}\n </Box>\n </TabPanel>\n </Tabs>\n\n {isWrongNetwork && (\n <Box className={tip()}>\n <Text color=\"warning\" size=\"xs\">\n Please switch to a supported network to continue.\n </Text>\n </Box>\n )}\n </Box>\n );\n};\n// ------------------ ChainSelector end ------------------\n\n// ------------------ ChainItem start ------------------\nexport const ChainItem = (props: {\n selected: boolean;\n item: TChainItem;\n onClick?: () => void;\n className?: string;\n}) => {\n const { item } = props;\n return (\n <button className={props.className} onClick={props.onClick}>\n <Flex justify=\"between\" className=\"oui-py-2.5\" px={3}>\n <Flex itemAlign=\"center\" width=\"100%\" className=\"oui-gap-x-[6px]\">\n <ChainIcon chainId={item.id} size=\"xs\" />\n <Text size=\"2xs\">{item.name}</Text>\n </Flex>\n {props.selected && (\n <Box gradient=\"brand\" r=\"full\" width={4} height={4} />\n )}\n </Flex>\n </button>\n );\n};\n\n// ------------------ Recent ChainItem start ------------------\nexport const RecentChainItem = (props: {\n item: TChainItem;\n onClick?: () => void;\n iconClassName?: string;\n}) => {\n return (\n <button\n className=\"oui-border oui-border-line-12 oui-rounded-lg hover:oui-border-primary-light\"\n onClick={props.onClick}\n >\n <Flex itemAlign=\"center\" p={2}>\n <ChainIcon chainId={props.item.id} className={props.iconClassName} />\n </Flex>\n </button>\n );\n};\n"]}
1
+ {"version":3,"sources":["../src/chainSelector.widget.tsx","../src/chainSelector.script.ts","../src/chainSelector.ui.tsx"],"names":["registerSimpleDialog","registerSimpleSheet","useMemo","useCallback","useState","useEffect","useConfig","useChains","useWalletConnector","useLocalStorage","useAppContext","useOrderlyTheme","KEY","MAX_RECENT_CHAINS","useChainSelectorScript","options","networkId","bridgeLessOnly","config","_chains","checkChainSupport","setChain","connectedChain","onChainChanged","currentChainId","setCurrentChainId","wrongNetwork","selectChainId","setSelectChainId","getComponentTheme","chains","chain","showTestnet","recentChains","saveRecentChain","useRecentChains","onChainChange","result","changedCallback","isWalletConnected","params","onChainClick","complete","selectedTab","onTabChange","useChainTab","setSelectedTab","tab","recentChainsIds","setRecentChainsIds","id","item","ids","Box","Flex","Text","ChainIcon","Tabs","TabPanel","cn","tv","jsx","jsxs","chainSelectorVariants","ChainSelector","props","isWrongNetwork","variant","list","recentList","mainnetList","testnetList","icon","tip","e","RecentChainItem","selected","ChainItem","ChainSelectorWidget","state","ChainSelectorDialogId","ChainSelectorSheetId"],"mappings":"AAAA,OAAS,wBAAAA,GAAsB,uBAAAC,OAA2B,sBCA1D,OAAS,WAAAC,EAAS,eAAAC,EAAa,YAAAC,EAAU,aAAAC,MAAiB,QAC1D,OAAS,aAAAC,MAAiB,yBAC1B,OACE,aAAAC,EACA,sBAAAC,EACA,mBAAAC,MACK,yBAEP,OAAS,iBAAAC,MAAqB,6BAE9B,OAAS,mBAAAC,MAAuB,sBAEhC,IAAMC,EAAM,0BACNC,EAAoB,EA2BbC,EACXC,GACG,CACH,GAAM,CAAE,UAAAC,EAAW,eAAAC,CAAe,EAAIF,GAAW,CAAC,EAE5CG,EAASZ,EAAU,EACnB,CAACa,EAAS,CAAE,kBAAAC,CAAkB,CAAC,EAAIb,EAAU,EAC7C,CAAE,SAAAc,EAAU,eAAAC,CAAe,EAAId,EAAmB,EAElD,CAAE,eAAAe,EAAgB,eAAAC,EAAgB,kBAAAC,EAAmB,aAAAC,CAAa,EACtEhB,EAAc,EAEV,CAACiB,EAAeC,CAAgB,EAAIxB,EACxCoB,CACF,EAEM,CAAE,kBAAAK,CAAkB,EAAIlB,EAAgB,EAExCmB,EAAS5B,EAAQ,KAKd,CACL,SALuBe,EACrBE,EAAQ,QAAQ,OAAQY,GAAUA,EAAM,cAAc,UAAU,EAChEZ,EAAQ,SAGgB,IAAKY,IAAW,CACxC,KAAMA,EAAM,cAAc,KAC1B,GAAIA,EAAM,cAAc,SACxB,UAAWA,EAAM,cAAc,WAC/B,UAAW,EACb,EAAE,EACF,QAASZ,EAAQ,QAAQ,IAAKY,IAAW,CACvC,KAAMA,EAAM,cAAc,KAC1B,GAAIA,EAAM,cAAc,SACxB,UAAWA,EAAM,cAAc,WAC/B,UAAW,EACb,EAAE,CACJ,GACC,CAACZ,EAASF,CAAc,CAAC,EAEtBe,EAAc9B,EAAQ,IAMxB,EAL6B2B,EAAkB,gBAAiB,CAChE,YAAa,EACf,CAAC,EAGwB,cAAgB,IACvC,CAACC,EAAO,QAAQ,QAMjB,CAACA,EAAO,OAAO,CAAC,EAEb,CAAE,aAAAG,EAAc,gBAAAC,CAAgB,EAAIC,GAAgBL,CAAM,EAE1DM,EAAgB,MAAOL,GAAsB,CACjD,GAAIT,EAAgB,CAClB,IAAMe,EAAS,MAAMhB,EAAS,CAAE,QAASU,EAAM,EAAG,CAAC,EAEnD,OAAKM,GAEE,CACL,OAAAA,EACA,aAAc,CAACjB,EAAkBW,EAAM,GAAIb,EAAO,IAAI,WAAW,CAAC,EAClE,QAASa,EAAM,EACjB,CACF,CAEA,OAAAN,EAAkBM,EAAM,EAAE,EACnB,CACL,OAAQ,GACR,aAAc,GACd,QAASA,EAAM,EACjB,CAEF,EAEMO,EAAkB,CAACP,EAAmBQ,IAA+B,CACzE,IAAMC,EAAS,CACb,UAAWT,EAAM,UACjB,kBAAAQ,CACF,EACAxB,EAAQ,qBAAqBgB,EAAM,GAAIS,CAAM,EAC7CjB,IAAiBQ,EAAM,GAAIS,CAAM,CACnC,EAEMC,EAAe,MAAOV,GAAsB,CAChDH,EAAiBG,EAAM,EAAE,EACzBhB,EAAQ,sBAAsBgB,EAAM,GAAI,CAAE,UAAWA,EAAM,SAAU,CAAC,EACtE,GAAI,CACF,IAAMW,EAAW,MAAMN,IAAgBL,CAAK,EAExCW,GACF3B,EAAQ,UAAU2B,CAAQ,EAC1B3B,EAAQ,QAAQ,EAChBmB,EAAgBH,CAAK,EACrBO,EAAgBP,EAAO,EAAI,IAE3BH,EAAiB,MAAS,EAC1BU,EAAgBP,EAAO,EAAK,EAEhC,MAAc,CACZO,EAAgBP,EAAO,EAAK,CAC9B,CACF,EAEM,CAAE,YAAAY,EAAa,YAAAC,CAAY,EAAIC,GACnCf,EACAN,EACAE,EACAM,CACF,EAEA,MAAO,CACL,aAAAC,EACA,OAAAH,EACA,cAAAH,EACA,aAAAc,EACA,YAAAE,EACA,YAAAC,EACA,YAAAZ,CACF,CACF,EAEA,SAASa,GACPf,EACAN,EACAE,EACAM,EACA,CACA,GAAM,CAACW,EAAaG,CAAc,EAAI1C,WAAqC,EAErEwC,EAAeG,GAAmB,CACtCD,EAAeC,CAAG,CACpB,EAEA,OAAA1C,EAAU,IAAM,CACd,GAAI,CAAC2B,EAAa,CAChBc,WAAgC,EAChC,MACF,CAEA,GAAItB,EAAgB,CAIlB,GAHkBM,EAAO,SAAS,KAC/BC,GAAUA,EAAM,KAAOP,CAC1B,EACe,CACbsB,EAAepB,qBAAoD,EACnE,MACF,CAMA,GAJkBI,EAAO,SAAS,KAC/BC,GAAUA,EAAM,KAAOP,CAC1B,EAEe,CACbsB,EAAepB,qBAAoD,EACnE,MACF,CACF,CACF,EAAG,CAACF,EAAgBM,EAAQJ,EAAcM,CAAW,CAAC,EAE/C,CAAE,YAAAW,EAAa,YAAAC,CAAY,CACpC,CAEA,SAAST,GAAgBL,EAAyC,CAChE,GAAM,CAACkB,EAAiBC,CAAkB,EAAIxC,EAC5CG,EACA,CAAC,CACH,EAEMqB,EAAe/B,EAAsB,IAClC8C,GACH,IAAKE,GACLpB,EAAO,SAAS,KAAMqB,GAASA,EAAK,KAAO,SAASD,CAAE,CAAC,CACzD,EACC,OAAQpB,GAAuB,CAAC,CAACA,CAAM,EACzC,CAACA,EAAQkB,CAAe,CAAC,EAEtBd,EAAkB/B,EACrB4B,GAAsB,CAErB,GAAIA,EAAM,UACR,OAEF,IAAIqB,EAAMJ,GAAiB,OAAQE,GAAeA,IAAOnB,EAAM,EAAE,EACjEqB,EAAM,CAACrB,EAAM,GAAI,GAAGqB,CAAG,EAAE,MAAM,EAAGvC,CAAiB,EACnDoC,EAAmBG,CAAG,CACxB,EACA,CAACJ,CAAe,CAClB,EAEA,MAAO,CAAE,aAAAf,EAAc,gBAAAC,CAAgB,CACzC,CC1OA,OACE,OAAAmB,EACA,QAAAC,EACA,QAAAC,EACA,aAAAC,EACA,QAAAC,GACA,YAAAC,EACA,MAAAC,EACA,MAAAC,OACK,sBAwFC,OAKU,OAAAC,EALV,QAAAC,MAAA,oBA1ER,IAAMC,GAAwBH,GAAG,CAC/B,MAAO,CACL,KAAM,GACN,KAAM,qCACN,YAAa,IACb,YAAa,IACb,WAAY,GACZ,KAAM,4BACN,IAAK,iBACP,EACA,SAAU,CACR,QAAS,CACP,QAAS,CACP,KAAM,kBACN,KAAM,uCACN,YAAa,2BACb,YAAa,2BACb,WAAY,WACZ,KAAM,oCACN,IAAK,UACP,EACA,KAAM,CACJ,KAAM,4BACN,YAAa,2BACb,YAAa,2BACb,WAAY,WACZ,KAAM,oCACN,IAAK,UACP,CACF,EACA,SAAU,CACR,KAAM,CACJ,KAAM,EACR,EACA,MAAO,CAAE,KAAM,oBAAqB,CACtC,CACF,EACA,iBAAkB,CAChB,CACE,QAAS,UACT,SAAU,GACV,UAAW,CACT,KAAM,qBACR,CACF,EACA,CACE,QAAS,OACT,SAAU,GACV,UAAW,CACT,KAAM,qBACR,CACF,CACF,EACA,gBAAiB,CACf,QAAS,OACT,SAAU,EACZ,CACF,CAAC,EAGYI,EAAiBC,GAA8B,CAC1D,GAAM,CAAE,eAAAC,EAAgB,QAAAC,EAAU,MAAO,EAAIF,EAEvC,CAAE,KAAAG,EAAM,WAAAC,EAAY,YAAAC,EAAa,YAAAC,EAAa,KAAAC,EAAM,KAAArB,EAAM,IAAAsB,CAAI,EAClEV,GAAsB,CAAE,QAAAI,CAAQ,CAAC,EAEnC,OACEL,EAACT,EAAA,CAAI,UAAWM,EAAG,oBAAqBM,EAAM,SAAS,EACrD,UAAAH,EAACL,GAAA,CACC,MAAOQ,EAAM,YACb,QAAQ,YACR,KAAME,IAAY,OAAS,KAAO,KAClC,cAAgBO,GAAMT,EAAM,YAAYS,CAAc,EAEtD,UAAAZ,EAACJ,EAAA,CAAS,gBAA0B,gBACjC,WAAC,CAACO,EAAM,cAAc,QACrBJ,EAACP,EAAA,CAAK,IAAK,EAAG,UAAWe,EAAW,EACjC,SAAAJ,EAAM,cAAc,IAAKd,GAEtBU,EAACc,GAAA,CAEC,KAAMxB,EACN,QAAS,IAAMc,EAAM,aAAad,CAAI,EACtC,cAAeqB,EAAK,GAHfrB,EAAK,EAIZ,CAEH,EACH,EAGFU,EAACR,EAAA,CAAI,EAAE,MAAM,UAAWM,EAAGS,EAAK,EAAGE,EAAY,CAAC,EAC7C,SAAAL,EAAM,OAAO,SAAS,IAAKlC,GAAU,CACpC,IAAM6C,EAAWX,EAAM,gBAAkBlC,EAAM,GAC/C,OACE8B,EAACgB,EAAA,CAEC,SAAUD,EACV,KAAM7C,EACN,QAAS,IAAMkC,EAAM,aAAalC,CAAK,EACvC,UAAWoB,EAAK,CAAE,SAAAyB,CAAS,CAAC,GAJvB7C,EAAM,EAKb,CAEJ,CAAC,EACH,GACF,EAECkC,EAAM,aACLJ,EAACH,EAAA,CAAS,gBAA0B,gBAClC,SAAAG,EAACR,EAAA,CAAI,EAAE,MAAM,UAAWM,EAAGS,EAAK,EAAGG,EAAY,CAAC,EAC7C,SAAAN,EAAM,OAAO,SAAS,IAAKlC,GAAU,CACpC,IAAM6C,EAAWX,EAAM,gBAAkBlC,EAAM,GAC/C,OACE8B,EAACgB,EAAA,CAEC,SAAUD,EACV,KAAM7C,EACN,QAAS,IAAMkC,EAAM,aAAalC,CAAK,EACvC,UAAWoB,EAAK,CAAE,SAAAyB,CAAS,CAAC,GAJvB7C,EAAM,EAKb,CAEJ,CAAC,EACH,EACF,GAEJ,EAECmC,GACCL,EAACR,EAAA,CAAI,UAAWoB,EAAI,EAClB,SAAAZ,EAACN,EAAA,CAAK,MAAM,UAAU,KAAK,KAAK,6DAEhC,EACF,GAEJ,CAEJ,EAIasB,EAAaZ,GAKpB,CACJ,GAAM,CAAE,KAAAd,CAAK,EAAIc,EACjB,OACEJ,EAAC,UAAO,UAAWI,EAAM,UAAW,QAASA,EAAM,QACjD,SAAAH,EAACR,EAAA,CAAK,QAAQ,UAAU,UAAU,aAAa,GAAI,EACjD,UAAAQ,EAACR,EAAA,CAAK,UAAU,SAAS,MAAM,OAAO,UAAU,kBAC9C,UAAAO,EAACL,EAAA,CAAU,QAASL,EAAK,GAAI,KAAK,KAAK,EACvCU,EAACN,EAAA,CAAK,KAAK,MAAO,SAAAJ,EAAK,KAAK,GAC9B,EACCc,EAAM,UACLJ,EAACR,EAAA,CAAI,SAAS,QAAQ,EAAE,OAAO,MAAO,EAAG,OAAQ,EAAG,GAExD,EACF,CAEJ,EAGasB,GAAmBV,GAM5BJ,EAAC,UACC,UAAU,8EACV,QAASI,EAAM,QAEf,SAAAJ,EAACP,EAAA,CAAK,UAAU,SAAS,EAAG,EAC1B,SAAAO,EAACL,EAAA,CAAU,QAASS,EAAM,KAAK,GAAI,UAAWA,EAAM,cAAe,EACrE,EACF,EFxLA,cAAAJ,OAAA,oBAJG,IAAMiB,EAAuBb,GAAoC,CACtE,IAAMc,EAAQjE,EAAuBmD,CAAK,EAE1C,OACEJ,GAACG,EAAA,CACE,GAAGe,EACJ,QAASd,EAAM,QACf,eAAgBA,EAAM,eACxB,CAEJ,EAEae,EAAwB,wBACxBC,EAAuB,uBAEpCjF,GAAqBgF,EAAuBF,EAAqB,CAC/D,KAAM,KACN,MAAO,iBACP,QAAS,OACT,eAAgB,EAClB,CAAC,EAED7E,GAAoBgF,EAAsBH,EAAqB,CAC7D,MAAO,iBACP,WAAY,CACV,QAAS,iBACT,KAAM,gBACR,EACA,QAAS,UACT,eAAgB,EAClB,CAAC","sourcesContent":["import { registerSimpleDialog, registerSimpleSheet } from \"@orderly.network/ui\";\nimport {\n useChainSelectorScript,\n UseChainSelectorScriptOptions,\n} from \"./chainSelector.script\";\nimport { ChainSelector, ChainSelectorProps } from \"./chainSelector.ui\";\n\nexport type ChainSelectorWidgetProps = UseChainSelectorScriptOptions &\n Pick<ChainSelectorProps, \"isWrongNetwork\" | \"variant\" | \"className\">;\n\nexport const ChainSelectorWidget = (props: ChainSelectorWidgetProps) => {\n const state = useChainSelectorScript(props);\n\n return (\n <ChainSelector\n {...state}\n variant={props.variant}\n isWrongNetwork={props.isWrongNetwork}\n />\n );\n};\n\nexport const ChainSelectorDialogId = \"ChainSelectorDialogId\";\nexport const ChainSelectorSheetId = \"ChainSelectorSheetId\";\n\nregisterSimpleDialog(ChainSelectorDialogId, ChainSelectorWidget, {\n size: \"lg\",\n title: \"Switch Network\",\n variant: \"wide\",\n isWrongNetwork: true,\n});\n\nregisterSimpleSheet(ChainSelectorSheetId, ChainSelectorWidget, {\n title: \"Switch Network\",\n classNames: {\n content: \"!oui-bg-base-8\",\n body: \"!oui-bg-base-8\",\n },\n variant: \"compact\",\n isWrongNetwork: true,\n});\n","import { useMemo, useCallback, useState, useEffect } from \"react\";\nimport { useConfig } from \"@orderly.network/hooks\";\nimport {\n useChains,\n useWalletConnector,\n useLocalStorage,\n} from \"@orderly.network/hooks\";\nimport { NetworkId } from \"@orderly.network/types\";\nimport { useAppContext } from \"@orderly.network/react-app\";\nimport { ChainType, TChainItem } from \"./type\";\nimport { useOrderlyTheme } from \"@orderly.network/ui\";\n\nconst KEY = \"orderly_selected_chains\";\nconst MAX_RECENT_CHAINS = 6;\n\nexport type UseChainSelectorScriptReturn = ReturnType<\n typeof useChainSelectorScript\n>;\n\nexport type UseChainSelectorScriptOptions = {\n networkId?: NetworkId;\n bridgeLessOnly?: boolean;\n close?: () => void;\n resolve?: (isSuccess: boolean) => void;\n reject?: () => void;\n onChainChangeBefore?: (\n chainId: number,\n state: {\n isTestnet: boolean;\n }\n ) => void;\n onChainChangeAfter?: (\n chainId: number,\n state: {\n isTestnet: boolean;\n isWalletConnected: boolean;\n }\n ) => void;\n};\n\nexport const useChainSelectorScript = (\n options: UseChainSelectorScriptOptions\n) => {\n const { networkId, bridgeLessOnly } = options || {};\n\n const config = useConfig();\n const [_chains, { checkChainSupport }] = useChains();\n const { setChain, connectedChain } = useWalletConnector();\n\n const { onChainChanged, currentChainId, setCurrentChainId, wrongNetwork } =\n useAppContext();\n\n const [selectChainId, setSelectChainId] = useState<number | undefined>(\n currentChainId\n );\n\n const { getComponentTheme } = useOrderlyTheme();\n\n const chains = useMemo(() => {\n const bridgeLessChains = bridgeLessOnly\n ? _chains.mainnet.filter((chain) => chain.network_infos.bridgeless)\n : _chains.mainnet;\n\n return {\n mainnet: bridgeLessChains.map((chain) => ({\n name: chain.network_infos.name,\n id: chain.network_infos.chain_id,\n lowestFee: chain.network_infos.bridgeless,\n isTestnet: false,\n })),\n testnet: _chains.testnet.map((chain) => ({\n name: chain.network_infos.name,\n id: chain.network_infos.chain_id,\n lowestFee: chain.network_infos.bridgeless,\n isTestnet: true,\n })),\n };\n }, [_chains, bridgeLessOnly]);\n\n const showTestnet = useMemo(() => {\n const chainSelectorOverrides = getComponentTheme(\"chainSelector\", {\n showTestnet: true,\n });\n\n if (\n chainSelectorOverrides.showTestnet === false ||\n !chains.testnet.length\n ) {\n return false;\n }\n\n return true;\n }, [chains.testnet]);\n\n const { recentChains, saveRecentChain } = useRecentChains(chains);\n\n const onChainChange = async (chain: TChainItem) => {\n if (connectedChain) {\n const result = await setChain({ chainId: chain.id });\n\n if (!result) return result;\n\n return {\n result,\n wrongNetwork: !checkChainSupport(chain.id, config.get(\"networkId\")),\n chainId: chain.id,\n };\n }\n\n setCurrentChainId(chain.id);\n return {\n result: true,\n wrongNetwork: false,\n chainId: chain.id,\n };\n // return Promise.reject(\"No connected chain\");\n };\n\n const changedCallback = (chain: TChainItem, isWalletConnected: boolean) => {\n const params = {\n isTestnet: chain.isTestnet,\n isWalletConnected,\n };\n options.onChainChangeAfter?.(chain.id, params);\n onChainChanged?.(chain.id, params);\n };\n\n const onChainClick = async (chain: TChainItem) => {\n setSelectChainId(chain.id);\n options.onChainChangeBefore?.(chain.id, { isTestnet: chain.isTestnet });\n try {\n const complete = await onChainChange?.(chain);\n\n if (complete) {\n options.resolve?.(complete);\n options.close?.();\n saveRecentChain(chain);\n changedCallback(chain, true);\n } else {\n setSelectChainId(undefined);\n changedCallback(chain, false);\n }\n } catch (err) {\n changedCallback(chain, false);\n }\n };\n\n const { selectedTab, onTabChange } = useChainTab(\n chains,\n currentChainId,\n wrongNetwork,\n showTestnet\n );\n\n return {\n recentChains,\n chains,\n selectChainId,\n onChainClick,\n selectedTab,\n onTabChange,\n showTestnet,\n };\n};\n\nfunction useChainTab(\n chains: Record<NetworkId, TChainItem[]>,\n currentChainId?: number,\n wrongNetwork?: boolean,\n showTestnet?: boolean\n) {\n const [selectedTab, setSelectedTab] = useState<ChainType>(ChainType.Mainnet);\n\n const onTabChange = (tab: ChainType) => {\n setSelectedTab(tab);\n };\n\n useEffect(() => {\n if (!showTestnet) {\n setSelectedTab(ChainType.Mainnet);\n return;\n }\n\n if (currentChainId) {\n const isMainnet = chains.mainnet?.some(\n (chain) => chain.id === currentChainId\n );\n if (isMainnet) {\n setSelectedTab(wrongNetwork ? ChainType.Testnet : ChainType.Mainnet);\n return;\n }\n\n const isTestnet = chains.testnet?.some(\n (chain) => chain.id === currentChainId\n );\n\n if (isTestnet) {\n setSelectedTab(wrongNetwork ? ChainType.Mainnet : ChainType.Testnet);\n return;\n }\n }\n }, [currentChainId, chains, wrongNetwork, showTestnet]);\n\n return { selectedTab, onTabChange };\n}\n\nfunction useRecentChains(chains: Record<NetworkId, TChainItem[]>) {\n const [recentChainsIds, setRecentChainsIds] = useLocalStorage<string[]>(\n KEY,\n []\n );\n\n const recentChains = useMemo<TChainItem[]>(() => {\n return recentChainsIds\n ?.map((id: string) =>\n chains.mainnet?.find((item) => item.id === parseInt(id))\n )\n .filter((chains: TChainItem) => !!chains);\n }, [chains, recentChainsIds]);\n\n const saveRecentChain = useCallback(\n (chain: TChainItem) => {\n // only mainnet can save chain id to local storage\n if (chain.isTestnet) {\n return;\n }\n let ids = recentChainsIds?.filter((id: number) => id !== chain.id);\n ids = [chain.id, ...ids].slice(0, MAX_RECENT_CHAINS);\n setRecentChainsIds(ids);\n },\n [recentChainsIds]\n );\n\n return { recentChains, saveRecentChain };\n}\n","import {\n Box,\n Flex,\n Text,\n ChainIcon,\n Tabs,\n TabPanel,\n cn,\n tv,\n} from \"@orderly.network/ui\";\nimport { ChainType, TChainItem } from \"./type\";\nimport { UseChainSelectorScriptReturn } from \"./chainSelector.script\";\n\nexport type ChainSelectorProps = {\n isWrongNetwork?: boolean;\n /**\n * wide: This represents the wide screen (desktop) UI mode\n * compact: This indicates a compact (mobile) UI pattern.\n */\n variant?: \"wide\" | \"compact\";\n className?: string;\n} & UseChainSelectorScriptReturn;\n\nconst chainSelectorVariants = tv({\n slots: {\n icon: \"\",\n list: \"oui-grid oui-grid-cols-1 oui-gap-1\",\n mainnetList: '\"',\n testnetList: '\"',\n recentList: \"\",\n item: \"oui-w-full oui-rounded-md\",\n tip: \"oui-text-center\",\n },\n variants: {\n variant: {\n compact: {\n icon: \"oui-w-6 oui-h-6\",\n list: \"oui-bg-base-9 oui-rounded-lg oui-p-1\",\n mainnetList: \"oui-grid-cols-2 oui-mt-4\",\n testnetList: \"oui-grid-cols-1 oui-mt-4\",\n recentList: \"oui-mt-4\",\n item: \"oui-bg-base-6 hover:oui-bg-base-7\",\n tip: \"oui-pt-6\",\n },\n wide: {\n icon: \"oui-w-[18px] oui-h-[18px]\",\n mainnetList: \"oui-grid-cols-3 oui-mt-3\",\n testnetList: \"oui-grid-cols-2 oui-mt-3\",\n recentList: \"oui-mt-3\",\n item: \"oui-bg-base-5 hover:oui-bg-base-6\",\n tip: \"oui-pt-8\",\n },\n },\n selected: {\n true: {\n item: \"\",\n },\n false: { item: \"oui-bg-transparent\" },\n },\n },\n compoundVariants: [\n {\n variant: \"compact\",\n selected: true,\n className: {\n item: \"hover:oui-bg-base-6\",\n },\n },\n {\n variant: \"wide\",\n selected: true,\n className: {\n item: \"hover:oui-bg-base-5\",\n },\n },\n ],\n defaultVariants: {\n variant: \"wide\",\n selected: false,\n },\n});\n\n//------------------ ChainSelector start ------------------\nexport const ChainSelector = (props: ChainSelectorProps) => {\n const { isWrongNetwork, variant = \"wide\" } = props;\n\n const { list, recentList, mainnetList, testnetList, icon, item, tip } =\n chainSelectorVariants({ variant });\n\n return (\n <Box className={cn(\"oui-font-semibold\", props.className)}>\n <Tabs\n value={props.selectedTab}\n variant=\"contained\"\n size={variant === \"wide\" ? \"md\" : \"lg\"}\n onValueChange={(e) => props.onTabChange(e as ChainType)}\n >\n <TabPanel value={ChainType.Mainnet} title={ChainType.Mainnet}>\n {!!props.recentChains?.length && (\n <Flex gap={2} className={recentList()}>\n {props.recentChains?.map((item) => {\n return (\n <RecentChainItem\n key={item.id}\n item={item}\n onClick={() => props.onChainClick(item)}\n iconClassName={icon()}\n />\n );\n })}\n </Flex>\n )}\n\n <Box r=\"2xl\" className={cn(list(), mainnetList())}>\n {props.chains.mainnet?.map((chain) => {\n const selected = props.selectChainId === chain.id;\n return (\n <ChainItem\n key={chain.id}\n selected={selected}\n item={chain}\n onClick={() => props.onChainClick(chain)}\n className={item({ selected })}\n />\n );\n })}\n </Box>\n </TabPanel>\n\n {props.showTestnet && (\n <TabPanel value={ChainType.Testnet} title={ChainType.Testnet}>\n <Box r=\"2xl\" className={cn(list(), testnetList())}>\n {props.chains.testnet?.map((chain) => {\n const selected = props.selectChainId === chain.id;\n return (\n <ChainItem\n key={chain.id}\n selected={selected}\n item={chain}\n onClick={() => props.onChainClick(chain)}\n className={item({ selected })}\n />\n );\n })}\n </Box>\n </TabPanel>\n )}\n </Tabs>\n\n {isWrongNetwork && (\n <Box className={tip()}>\n <Text color=\"warning\" size=\"xs\">\n Please switch to a supported network to continue.\n </Text>\n </Box>\n )}\n </Box>\n );\n};\n// ------------------ ChainSelector end ------------------\n\n// ------------------ ChainItem start ------------------\nexport const ChainItem = (props: {\n selected: boolean;\n item: TChainItem;\n onClick?: () => void;\n className?: string;\n}) => {\n const { item } = props;\n return (\n <button className={props.className} onClick={props.onClick}>\n <Flex justify=\"between\" className=\"oui-py-2.5\" px={3}>\n <Flex itemAlign=\"center\" width=\"100%\" className=\"oui-gap-x-[6px]\">\n <ChainIcon chainId={item.id} size=\"xs\" />\n <Text size=\"2xs\">{item.name}</Text>\n </Flex>\n {props.selected && (\n <Box gradient=\"brand\" r=\"full\" width={4} height={4} />\n )}\n </Flex>\n </button>\n );\n};\n\n// ------------------ Recent ChainItem start ------------------\nexport const RecentChainItem = (props: {\n item: TChainItem;\n onClick?: () => void;\n iconClassName?: string;\n}) => {\n return (\n <button\n className=\"oui-border oui-border-line-12 oui-rounded-lg hover:oui-border-primary-light\"\n onClick={props.onClick}\n >\n <Flex itemAlign=\"center\" p={2}>\n <ChainIcon chainId={props.item.id} className={props.iconClassName} />\n </Flex>\n </button>\n );\n};\n"]}
package/dist/index.mjs CHANGED
@@ -1,11 +1,11 @@
1
- import { tv, registerSimpleDialog, registerSimpleSheet, Box, cn, Tabs, TabPanel, Flex, Text, ChainIcon } from '@orderly.network/ui';
2
- import { useState, useMemo, useEffect, useCallback } from 'react';
1
+ import { tv, registerSimpleDialog, registerSimpleSheet, useOrderlyTheme, Box, cn, Tabs, TabPanel, Flex, Text, ChainIcon } from '@orderly.network/ui';
2
+ import { useState, useMemo, useCallback, useEffect } from 'react';
3
3
  import { useConfig, useChains, useWalletConnector, useLocalStorage } from '@orderly.network/hooks';
4
4
  import { useAppContext } from '@orderly.network/react-app';
5
5
  import { jsx, jsxs } from 'react/jsx-runtime';
6
6
 
7
- var G="orderly_selected_chains",J=6,v=e=>{let{networkId:i,bridgeLessOnly:c}=e||{},d=useConfig(),[a,{checkChainSupport:l}]=useChains(),{setChain:r,connectedChain:C}=useWalletConnector(),{onChainChanged:m,currentChainId:b,setCurrentChainId:o,wrongNetwork:u}=useAppContext(),[F,k]=useState(b),p=useMemo(()=>({mainnet:(c?a.mainnet.filter(n=>n.network_infos.bridgeless):a.mainnet).map(n=>({name:n.network_infos.name,id:n.network_infos.chain_id,lowestFee:n.network_infos.bridgeless,isTestnet:!1})),testnet:a.testnet.map(n=>({name:n.network_infos.name,id:n.network_infos.chain_id,lowestFee:n.network_infos.bridgeless,isTestnet:!0}))}),[a,c]),{recentChains:A,saveRecentChain:B}=Z(p),U=async t=>{if(C){let n=await r({chainId:t.id});return n&&{result:n,wrongNetwork:!l(t.id,d.get("networkId")),chainId:t.id}}return o(t.id),{result:!0,wrongNetwork:!1,chainId:t.id}},S=(t,n)=>{let I={isTestnet:t.isTestnet,isWalletConnected:n};e.onChainChangeAfter?.(t.id,I),m?.(t.id,I);},O=async t=>{k(t.id),e.onChainChangeBefore?.(t.id,{isTestnet:t.isTestnet});try{let n=await U?.(t);n?(e.resolve?.(n),e.close?.(),B(t),S(t,!0)):(k(void 0),S(t,!1));}catch{S(t,!1);}},{selectedTab:z,onTabChange:D}=Q(p,b,u);return {recentChains:A,chains:p,selectChainId:F,onChainClick:O,selectedTab:z,onTabChange:D}};function Q(e,i,c){let[d,a]=useState("Mainnet"),l=r=>{a(r);};return useEffect(()=>{if(i){if(e.mainnet?.some(m=>m.id===i)){a(c?"Testnet":"Mainnet");return}if(e.testnet?.some(m=>m.id===i)){a(c?"Mainnet":"Testnet");return}}},[i,e,c]),{selectedTab:d,onTabChange:l}}function Z(e){let[i,c]=useLocalStorage(G,[]),d=useMemo(()=>i?.map(l=>e.mainnet?.find(r=>r.id===parseInt(l))),[e,i]),a=useCallback(l=>{if(l.isTestnet)return;let r=i?.filter(C=>C!==l.id);r=[l.id,...r].slice(0,J),c(r);},[i]);return {recentChains:d,saveRecentChain:a}}var te=tv({slots:{icon:"",list:"oui-grid oui-grid-cols-1 oui-gap-1",mainnetList:'"',testnetList:'"',recentList:"",item:"oui-w-full oui-rounded-md",tip:"oui-text-center"},variants:{variant:{compact:{icon:"oui-w-6 oui-h-6",list:"oui-bg-base-9 oui-rounded-lg oui-p-1",mainnetList:"oui-grid-cols-2 oui-mt-4",testnetList:"oui-grid-cols-1 oui-mt-4",recentList:"oui-mt-4",item:"oui-bg-base-6 hover:oui-bg-base-7",tip:"oui-pt-6"},wide:{icon:"oui-w-[18px] oui-h-[18px]",mainnetList:"oui-grid-cols-3 oui-mt-3",testnetList:"oui-grid-cols-2 oui-mt-3",recentList:"oui-mt-3",item:"oui-bg-base-5 hover:oui-bg-base-6",tip:"oui-pt-8"}},selected:{true:{item:""},false:{item:"oui-bg-transparent"}}},compoundVariants:[{variant:"compact",selected:!0,className:{item:"hover:oui-bg-base-6"}},{variant:"wide",selected:!0,className:{item:"hover:oui-bg-base-5"}}],defaultVariants:{variant:"wide",selected:!1}}),R=e=>{let{isWrongNetwork:i,variant:c="wide"}=e,{list:d,recentList:a,mainnetList:l,testnetList:r,icon:C,item:m,tip:b}=te({variant:c});return jsxs(Box,{className:cn("oui-font-semibold",e.className),children:[jsxs(Tabs,{value:e.selectedTab,variant:"contained",size:c==="wide"?"md":"lg",onValueChange:o=>e.onTabChange(o),children:[jsxs(TabPanel,{value:"Mainnet",title:"Mainnet",children:[!!e.recentChains?.length&&jsx(Flex,{gap:2,className:a(),children:e.recentChains?.map(o=>jsx(ne,{item:o,onClick:()=>e.onChainClick(o),iconClassName:C()},o.id))}),jsx(Box,{r:"2xl",className:cn(d(),l()),children:e.chains.mainnet?.map(o=>{let u=e.selectChainId===o.id;return jsx(L,{selected:u,item:o,onClick:()=>e.onChainClick(o),className:m({selected:u})},o.id)})})]}),jsx(TabPanel,{value:"Testnet",title:"Testnet",children:jsx(Box,{r:"2xl",className:cn(d(),r()),children:e.chains.testnet?.map(o=>{let u=e.selectChainId===o.id;return jsx(L,{selected:u,item:o,onClick:()=>e.onChainClick(o),className:m({selected:u})},o.id)})})})]}),i&&jsx(Box,{className:b(),children:jsx(Text,{color:"warning",size:"xs",children:"Please switch to a supported network to continue."})})]})},L=e=>{let{item:i}=e;return jsx("button",{className:e.className,onClick:e.onClick,children:jsxs(Flex,{justify:"between",className:"oui-py-2.5",px:3,children:[jsxs(Flex,{itemAlign:"center",width:"100%",className:"oui-gap-x-[6px]",children:[jsx(ChainIcon,{chainId:i.id,size:"xs"}),jsx(Text,{size:"2xs",children:i.name})]}),e.selected&&jsx(Box,{gradient:"brand",r:"full",width:4,height:4})]})})},ne=e=>jsx("button",{className:"oui-border oui-border-line-12 oui-rounded-lg hover:oui-border-primary-light",onClick:e.onClick,children:jsx(Flex,{itemAlign:"center",p:2,children:jsx(ChainIcon,{chainId:e.item.id,className:e.iconClassName})})});var w=e=>{let i=v(e);return jsx(R,{...i,variant:e.variant,isWrongNetwork:e.isWrongNetwork})},M="ChainSelectorDialogId",P="ChainSelectorSheetId";registerSimpleDialog(M,w,{size:"lg",title:"Switch Network",variant:"wide",isWrongNetwork:!0});registerSimpleSheet(P,w,{title:"Switch Network",classNames:{content:"!oui-bg-base-8",body:"!oui-bg-base-8"},variant:"compact",isWrongNetwork:!0});
7
+ var Z="orderly_selected_chains",$=6,y=e=>{let{networkId:i,bridgeLessOnly:r}=e||{},d=useConfig(),[l,{checkChainSupport:s}]=useChains(),{setChain:c,connectedChain:m}=useWalletConnector(),{onChainChanged:h,currentChainId:u,setCurrentChainId:o,wrongNetwork:C}=useAppContext(),[F,I]=useState(u),{getComponentTheme:A}=useOrderlyTheme(),g=useMemo(()=>({mainnet:(r?l.mainnet.filter(n=>n.network_infos.bridgeless):l.mainnet).map(n=>({name:n.network_infos.name,id:n.network_infos.chain_id,lowestFee:n.network_infos.bridgeless,isTestnet:false})),testnet:l.testnet.map(n=>({name:n.network_infos.name,id:n.network_infos.chain_id,lowestFee:n.network_infos.bridgeless,isTestnet:true}))}),[l,r]),N=useMemo(()=>!(A("chainSelector",{showTestnet:true}).showTestnet===false||!g.testnet.length),[g.testnet]),{recentChains:B,saveRecentChain:U}=te(g),z=async t=>{if(m){let n=await c({chainId:t.id});return n&&{result:n,wrongNetwork:!s(t.id,d.get("networkId")),chainId:t.id}}return o(t.id),{result:true,wrongNetwork:false,chainId:t.id}},S=(t,n)=>{let x={isTestnet:t.isTestnet,isWalletConnected:n};e.onChainChangeAfter?.(t.id,x),h?.(t.id,x);},D=async t=>{I(t.id),e.onChainChangeBefore?.(t.id,{isTestnet:t.isTestnet});try{let n=await z?.(t);n?(e.resolve?.(n),e.close?.(),U(t),S(t,!0)):(I(void 0),S(t,!1));}catch{S(t,false);}},{selectedTab:E,onTabChange:V}=ee(g,u,C,N);return {recentChains:B,chains:g,selectChainId:F,onChainClick:D,selectedTab:E,onTabChange:V,showTestnet:N}};function ee(e,i,r,d){let[l,s]=useState("Mainnet"),c=m=>{s(m);};return useEffect(()=>{if(!d){s("Mainnet");return}if(i){if(e.mainnet?.some(u=>u.id===i)){s(r?"Testnet":"Mainnet");return}if(e.testnet?.some(u=>u.id===i)){s(r?"Mainnet":"Testnet");return}}},[i,e,r,d]),{selectedTab:l,onTabChange:c}}function te(e){let[i,r]=useLocalStorage(Z,[]),d=useMemo(()=>i?.map(s=>e.mainnet?.find(c=>c.id===parseInt(s))).filter(s=>!!s),[e,i]),l=useCallback(s=>{if(s.isTestnet)return;let c=i?.filter(m=>m!==s.id);c=[s.id,...c].slice(0,$),r(c);},[i]);return {recentChains:d,saveRecentChain:l}}var oe=tv({slots:{icon:"",list:"oui-grid oui-grid-cols-1 oui-gap-1",mainnetList:'"',testnetList:'"',recentList:"",item:"oui-w-full oui-rounded-md",tip:"oui-text-center"},variants:{variant:{compact:{icon:"oui-w-6 oui-h-6",list:"oui-bg-base-9 oui-rounded-lg oui-p-1",mainnetList:"oui-grid-cols-2 oui-mt-4",testnetList:"oui-grid-cols-1 oui-mt-4",recentList:"oui-mt-4",item:"oui-bg-base-6 hover:oui-bg-base-7",tip:"oui-pt-6"},wide:{icon:"oui-w-[18px] oui-h-[18px]",mainnetList:"oui-grid-cols-3 oui-mt-3",testnetList:"oui-grid-cols-2 oui-mt-3",recentList:"oui-mt-3",item:"oui-bg-base-5 hover:oui-bg-base-6",tip:"oui-pt-8"}},selected:{true:{item:""},false:{item:"oui-bg-transparent"}}},compoundVariants:[{variant:"compact",selected:true,className:{item:"hover:oui-bg-base-6"}},{variant:"wide",selected:true,className:{item:"hover:oui-bg-base-5"}}],defaultVariants:{variant:"wide",selected:false}}),R=e=>{let{isWrongNetwork:i,variant:r="wide"}=e,{list:d,recentList:l,mainnetList:s,testnetList:c,icon:m,item:h,tip:u}=oe({variant:r});return jsxs(Box,{className:cn("oui-font-semibold",e.className),children:[jsxs(Tabs,{value:e.selectedTab,variant:"contained",size:r==="wide"?"md":"lg",onValueChange:o=>e.onTabChange(o),children:[jsxs(TabPanel,{value:"Mainnet",title:"Mainnet",children:[!!e.recentChains?.length&&jsx(Flex,{gap:2,className:l(),children:e.recentChains?.map(o=>jsx(se,{item:o,onClick:()=>e.onChainClick(o),iconClassName:m()},o.id))}),jsx(Box,{r:"2xl",className:cn(d(),s()),children:e.chains.mainnet?.map(o=>{let C=e.selectChainId===o.id;return jsx(_,{selected:C,item:o,onClick:()=>e.onChainClick(o),className:h({selected:C})},o.id)})})]}),e.showTestnet&&jsx(TabPanel,{value:"Testnet",title:"Testnet",children:jsx(Box,{r:"2xl",className:cn(d(),c()),children:e.chains.testnet?.map(o=>{let C=e.selectChainId===o.id;return jsx(_,{selected:C,item:o,onClick:()=>e.onChainClick(o),className:h({selected:C})},o.id)})})})]}),i&&jsx(Box,{className:u(),children:jsx(Text,{color:"warning",size:"xs",children:"Please switch to a supported network to continue."})})]})},_=e=>{let{item:i}=e;return jsx("button",{className:e.className,onClick:e.onClick,children:jsxs(Flex,{justify:"between",className:"oui-py-2.5",px:3,children:[jsxs(Flex,{itemAlign:"center",width:"100%",className:"oui-gap-x-[6px]",children:[jsx(ChainIcon,{chainId:i.id,size:"xs"}),jsx(Text,{size:"2xs",children:i.name})]}),e.selected&&jsx(Box,{gradient:"brand",r:"full",width:4,height:4})]})})},se=e=>jsx("button",{className:"oui-border oui-border-line-12 oui-rounded-lg hover:oui-border-primary-light",onClick:e.onClick,children:jsx(Flex,{itemAlign:"center",p:2,children:jsx(ChainIcon,{chainId:e.item.id,className:e.iconClassName})})});var k=e=>{let i=y(e);return jsx(R,{...i,variant:e.variant,isWrongNetwork:e.isWrongNetwork})},P="ChainSelectorDialogId",O="ChainSelectorSheetId";registerSimpleDialog(P,k,{size:"lg",title:"Switch Network",variant:"wide",isWrongNetwork:true});registerSimpleSheet(O,k,{title:"Switch Network",classNames:{content:"!oui-bg-base-8",body:"!oui-bg-base-8"},variant:"compact",isWrongNetwork:true});
8
8
 
9
- export { M as ChainSelectorDialogId, P as ChainSelectorSheetId, w as ChainSelectorWidget };
9
+ export { P as ChainSelectorDialogId, O as ChainSelectorSheetId, k as ChainSelectorWidget };
10
10
  //# sourceMappingURL=out.js.map
11
11
  //# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/chainSelector.widget.tsx","../src/chainSelector.script.ts","../src/chainSelector.ui.tsx"],"names":["registerSimpleDialog","registerSimpleSheet","useMemo","useCallback","useState","useEffect","useConfig","useChains","useWalletConnector","useLocalStorage","useAppContext","KEY","MAX_RECENT_CHAINS","useChainSelectorScript","options","networkId","bridgeLessOnly","config","_chains","checkChainSupport","setChain","connectedChain","onChainChanged","currentChainId","setCurrentChainId","wrongNetwork","selectChainId","setSelectChainId","chains","chain","recentChains","saveRecentChain","useRecentChains","onChainChange","result","changedCallback","isWalletConnected","params","onChainClick","complete","selectedTab","onTabChange","useChainTab","setSelectedTab","tab","recentChainsIds","setRecentChainsIds","id","item","ids","Box","Flex","Text","ChainIcon","Tabs","TabPanel","cn","tv","jsx","jsxs","chainSelectorVariants","ChainSelector","props","isWrongNetwork","variant","list","recentList","mainnetList","testnetList","icon","tip","e","RecentChainItem","selected","ChainItem","ChainSelectorWidget","state","ChainSelectorDialogId","ChainSelectorSheetId"],"mappings":"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","sourcesContent":["import { registerSimpleDialog, registerSimpleSheet } from \"@orderly.network/ui\";\nimport {\n useChainSelectorScript,\n UseChainSelectorScriptOptions,\n} from \"./chainSelector.script\";\nimport { ChainSelector, ChainSelectorProps } from \"./chainSelector.ui\";\n\nexport type ChainSelectorWidgetProps = UseChainSelectorScriptOptions &\n Pick<ChainSelectorProps, \"isWrongNetwork\" | \"variant\" | \"className\">;\n\nexport const ChainSelectorWidget = (props: ChainSelectorWidgetProps) => {\n const state = useChainSelectorScript(props);\n\n return (\n <ChainSelector\n {...state}\n variant={props.variant}\n isWrongNetwork={props.isWrongNetwork}\n />\n );\n};\n\nexport const ChainSelectorDialogId = \"ChainSelectorDialogId\";\nexport const ChainSelectorSheetId = \"ChainSelectorSheetId\";\n\nregisterSimpleDialog(ChainSelectorDialogId, ChainSelectorWidget, {\n size: \"lg\",\n title: \"Switch Network\",\n variant: \"wide\",\n isWrongNetwork: true,\n});\n\nregisterSimpleSheet(ChainSelectorSheetId, ChainSelectorWidget, {\n title: \"Switch Network\",\n classNames: {\n content: \"!oui-bg-base-8\",\n body: \"!oui-bg-base-8\",\n },\n variant: \"compact\",\n isWrongNetwork: true,\n});\n","import { useMemo, useCallback, useState, useEffect } from \"react\";\nimport { useConfig } from \"@orderly.network/hooks\";\nimport {\n useChains,\n useWalletConnector,\n useLocalStorage,\n} from \"@orderly.network/hooks\";\nimport { NetworkId } from \"@orderly.network/types\";\nimport { useAppContext } from \"@orderly.network/react-app\";\nimport { ChainType, TChainItem } from \"./type\";\n\nconst KEY = \"orderly_selected_chains\";\nconst MAX_RECENT_CHAINS = 6;\n\nexport type UseChainSelectorScriptReturn = ReturnType<\n typeof useChainSelectorScript\n>;\n\nexport type UseChainSelectorScriptOptions = {\n networkId?: NetworkId;\n bridgeLessOnly?: boolean;\n close?: () => void;\n resolve?: (isSuccess: boolean) => void;\n reject?: () => void;\n onChainChangeBefore?: (\n chainId: number,\n state: {\n isTestnet: boolean;\n }\n ) => void;\n onChainChangeAfter?: (\n chainId: number,\n state: {\n isTestnet: boolean;\n isWalletConnected: boolean;\n }\n ) => void;\n};\n\nexport const useChainSelectorScript = (\n options: UseChainSelectorScriptOptions\n) => {\n const { networkId, bridgeLessOnly } = options || {};\n\n const config = useConfig();\n const [_chains, { checkChainSupport }] = useChains();\n const { setChain, connectedChain } = useWalletConnector();\n\n const { onChainChanged, currentChainId, setCurrentChainId, wrongNetwork } =\n useAppContext();\n\n const [selectChainId, setSelectChainId] = useState<number | undefined>(\n currentChainId\n );\n\n const chains = useMemo(() => {\n const bridgeLessChains = bridgeLessOnly\n ? _chains.mainnet.filter((chain) => chain.network_infos.bridgeless)\n : _chains.mainnet;\n\n return {\n mainnet: bridgeLessChains.map((chain) => ({\n name: chain.network_infos.name,\n id: chain.network_infos.chain_id,\n lowestFee: chain.network_infos.bridgeless,\n isTestnet: false,\n })),\n testnet: _chains.testnet.map((chain) => ({\n name: chain.network_infos.name,\n id: chain.network_infos.chain_id,\n lowestFee: chain.network_infos.bridgeless,\n isTestnet: true,\n })),\n };\n }, [_chains, bridgeLessOnly]);\n\n const { recentChains, saveRecentChain } = useRecentChains(chains);\n\n const onChainChange = async (chain: TChainItem) => {\n if (connectedChain) {\n const result = await setChain({ chainId: chain.id });\n\n if (!result) return result;\n\n return {\n result,\n wrongNetwork: !checkChainSupport(chain.id, config.get(\"networkId\")),\n chainId: chain.id,\n };\n }\n\n setCurrentChainId(chain.id);\n return {\n result: true,\n wrongNetwork: false,\n chainId: chain.id,\n };\n // return Promise.reject(\"No connected chain\");\n };\n\n const changedCallback = (chain: TChainItem, isWalletConnected: boolean) => {\n const params = {\n isTestnet: chain.isTestnet,\n isWalletConnected,\n };\n options.onChainChangeAfter?.(chain.id, params);\n onChainChanged?.(chain.id, params);\n };\n\n const onChainClick = async (chain: TChainItem) => {\n setSelectChainId(chain.id);\n options.onChainChangeBefore?.(chain.id, { isTestnet: chain.isTestnet });\n try {\n const complete = await onChainChange?.(chain);\n\n if (complete) {\n options.resolve?.(complete);\n options.close?.();\n saveRecentChain(chain);\n changedCallback(chain, true);\n } else {\n setSelectChainId(undefined);\n changedCallback(chain, false);\n }\n } catch (err) {\n changedCallback(chain, false);\n }\n };\n\n const { selectedTab, onTabChange } = useChainTab(\n chains,\n currentChainId,\n wrongNetwork\n );\n\n return {\n recentChains,\n chains,\n selectChainId,\n onChainClick,\n selectedTab,\n onTabChange,\n };\n};\n\nfunction useChainTab(\n chains: Record<NetworkId, TChainItem[]>,\n currentChainId?: number,\n wrongNetwork?: boolean\n) {\n const [selectedTab, setSelectedTab] = useState<ChainType>(ChainType.Mainnet);\n\n const onTabChange = (tab: ChainType) => {\n setSelectedTab(tab);\n };\n\n useEffect(() => {\n if (currentChainId) {\n const isMainnet = chains.mainnet?.some(\n (chain) => chain.id === currentChainId\n );\n if (isMainnet) {\n setSelectedTab(wrongNetwork ? ChainType.Testnet : ChainType.Mainnet);\n return;\n }\n\n const isTestnet = chains.testnet?.some(\n (chain) => chain.id === currentChainId\n );\n\n if (isTestnet) {\n setSelectedTab(wrongNetwork ? ChainType.Mainnet : ChainType.Testnet);\n return;\n }\n }\n }, [currentChainId, chains, wrongNetwork]);\n\n return { selectedTab, onTabChange };\n}\n\nfunction useRecentChains(chains: Record<NetworkId, TChainItem[]>) {\n const [recentChainsIds, setRecentChainsIds] = useLocalStorage<string[]>(\n KEY,\n []\n );\n\n const recentChains = useMemo<TChainItem[]>(() => {\n return recentChainsIds?.map((id: string) =>\n chains.mainnet?.find((item) => item.id === parseInt(id))\n );\n }, [chains, recentChainsIds]);\n\n const saveRecentChain = useCallback(\n (chain: TChainItem) => {\n // only mainnet can save chain id to local storage\n if (chain.isTestnet) {\n return;\n }\n let ids = recentChainsIds?.filter((id: number) => id !== chain.id);\n ids = [chain.id, ...ids].slice(0, MAX_RECENT_CHAINS);\n setRecentChainsIds(ids);\n },\n [recentChainsIds]\n );\n\n return { recentChains, saveRecentChain };\n}\n","import {\n Box,\n Flex,\n Text,\n ChainIcon,\n Tabs,\n TabPanel,\n cn,\n tv,\n} from \"@orderly.network/ui\";\nimport { ChainType, TChainItem } from \"./type\";\nimport { UseChainSelectorScriptReturn } from \"./chainSelector.script\";\n\nexport type ChainSelectorProps = {\n isWrongNetwork?: boolean;\n /**\n * wide: This represents the wide screen (desktop) UI mode\n * compact: This indicates a compact (mobile) UI pattern.\n */\n variant?: \"wide\" | \"compact\";\n className?: string;\n} & UseChainSelectorScriptReturn;\n\nconst chainSelectorVariants = tv({\n slots: {\n icon: \"\",\n list: \"oui-grid oui-grid-cols-1 oui-gap-1\",\n mainnetList: '\"',\n testnetList: '\"',\n recentList: \"\",\n item: \"oui-w-full oui-rounded-md\",\n tip: \"oui-text-center\",\n },\n variants: {\n variant: {\n compact: {\n icon: \"oui-w-6 oui-h-6\",\n list: \"oui-bg-base-9 oui-rounded-lg oui-p-1\",\n mainnetList: \"oui-grid-cols-2 oui-mt-4\",\n testnetList: \"oui-grid-cols-1 oui-mt-4\",\n recentList: \"oui-mt-4\",\n item: \"oui-bg-base-6 hover:oui-bg-base-7\",\n tip: \"oui-pt-6\",\n },\n wide: {\n icon: \"oui-w-[18px] oui-h-[18px]\",\n mainnetList: \"oui-grid-cols-3 oui-mt-3\",\n testnetList: \"oui-grid-cols-2 oui-mt-3\",\n recentList: \"oui-mt-3\",\n item: \"oui-bg-base-5 hover:oui-bg-base-6\",\n tip: \"oui-pt-8\",\n },\n },\n selected: {\n true: {\n item: \"\",\n },\n false: { item: \"oui-bg-transparent\" },\n },\n },\n compoundVariants: [\n {\n variant: \"compact\",\n selected: true,\n className: {\n item: \"hover:oui-bg-base-6\",\n },\n },\n {\n variant: \"wide\",\n selected: true,\n className: {\n item: \"hover:oui-bg-base-5\",\n },\n },\n ],\n defaultVariants: {\n variant: \"wide\",\n selected: false,\n },\n});\n\n//------------------ ChainSelector start ------------------\nexport const ChainSelector = (props: ChainSelectorProps) => {\n const { isWrongNetwork, variant = \"wide\" } = props;\n\n const { list, recentList, mainnetList, testnetList, icon, item, tip } =\n chainSelectorVariants({ variant });\n\n return (\n <Box className={cn(\"oui-font-semibold\", props.className)}>\n <Tabs\n value={props.selectedTab}\n variant=\"contained\"\n size={variant === \"wide\" ? \"md\" : \"lg\"}\n onValueChange={(e) => props.onTabChange(e as ChainType)}\n >\n <TabPanel value={ChainType.Mainnet} title={ChainType.Mainnet}>\n {!!props.recentChains?.length && (\n <Flex gap={2} className={recentList()}>\n {props.recentChains?.map((item) => {\n return (\n <RecentChainItem\n key={item.id}\n item={item}\n onClick={() => props.onChainClick(item)}\n iconClassName={icon()}\n />\n );\n })}\n </Flex>\n )}\n\n <Box r=\"2xl\" className={cn(list(), mainnetList())}>\n {props.chains.mainnet?.map((chain) => {\n const selected = props.selectChainId === chain.id;\n return (\n <ChainItem\n key={chain.id}\n selected={selected}\n item={chain}\n onClick={() => props.onChainClick(chain)}\n className={item({ selected })}\n />\n );\n })}\n </Box>\n </TabPanel>\n\n <TabPanel value={ChainType.Testnet} title={ChainType.Testnet}>\n <Box r=\"2xl\" className={cn(list(), testnetList())}>\n {props.chains.testnet?.map((chain) => {\n const selected = props.selectChainId === chain.id;\n return (\n <ChainItem\n key={chain.id}\n selected={selected}\n item={chain}\n onClick={() => props.onChainClick(chain)}\n className={item({ selected })}\n />\n );\n })}\n </Box>\n </TabPanel>\n </Tabs>\n\n {isWrongNetwork && (\n <Box className={tip()}>\n <Text color=\"warning\" size=\"xs\">\n Please switch to a supported network to continue.\n </Text>\n </Box>\n )}\n </Box>\n );\n};\n// ------------------ ChainSelector end ------------------\n\n// ------------------ ChainItem start ------------------\nexport const ChainItem = (props: {\n selected: boolean;\n item: TChainItem;\n onClick?: () => void;\n className?: string;\n}) => {\n const { item } = props;\n return (\n <button className={props.className} onClick={props.onClick}>\n <Flex justify=\"between\" className=\"oui-py-2.5\" px={3}>\n <Flex itemAlign=\"center\" width=\"100%\" className=\"oui-gap-x-[6px]\">\n <ChainIcon chainId={item.id} size=\"xs\" />\n <Text size=\"2xs\">{item.name}</Text>\n </Flex>\n {props.selected && (\n <Box gradient=\"brand\" r=\"full\" width={4} height={4} />\n )}\n </Flex>\n </button>\n );\n};\n\n// ------------------ Recent ChainItem start ------------------\nexport const RecentChainItem = (props: {\n item: TChainItem;\n onClick?: () => void;\n iconClassName?: string;\n}) => {\n return (\n <button\n className=\"oui-border oui-border-line-12 oui-rounded-lg hover:oui-border-primary-light\"\n onClick={props.onClick}\n >\n <Flex itemAlign=\"center\" p={2}>\n <ChainIcon chainId={props.item.id} className={props.iconClassName} />\n </Flex>\n </button>\n );\n};\n"]}
1
+ {"version":3,"sources":["../src/chainSelector.widget.tsx","../src/chainSelector.script.ts","../src/chainSelector.ui.tsx"],"names":["registerSimpleDialog","registerSimpleSheet","useMemo","useCallback","useState","useEffect","useConfig","useChains","useWalletConnector","useLocalStorage","useAppContext","useOrderlyTheme","KEY","MAX_RECENT_CHAINS","useChainSelectorScript","options","networkId","bridgeLessOnly","config","_chains","checkChainSupport","setChain","connectedChain","onChainChanged","currentChainId","setCurrentChainId","wrongNetwork","selectChainId","setSelectChainId","getComponentTheme","chains","chain","showTestnet","recentChains","saveRecentChain","useRecentChains","onChainChange","result","changedCallback","isWalletConnected","params","onChainClick","complete","selectedTab","onTabChange","useChainTab","setSelectedTab","tab","recentChainsIds","setRecentChainsIds","id","item","ids","Box","Flex","Text","ChainIcon","Tabs","TabPanel","cn","tv","jsx","jsxs","chainSelectorVariants","ChainSelector","props","isWrongNetwork","variant","list","recentList","mainnetList","testnetList","icon","tip","e","RecentChainItem","selected","ChainItem","ChainSelectorWidget","state","ChainSelectorDialogId","ChainSelectorSheetId"],"mappings":"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","sourcesContent":["import { registerSimpleDialog, registerSimpleSheet } from \"@orderly.network/ui\";\nimport {\n useChainSelectorScript,\n UseChainSelectorScriptOptions,\n} from \"./chainSelector.script\";\nimport { ChainSelector, ChainSelectorProps } from \"./chainSelector.ui\";\n\nexport type ChainSelectorWidgetProps = UseChainSelectorScriptOptions &\n Pick<ChainSelectorProps, \"isWrongNetwork\" | \"variant\" | \"className\">;\n\nexport const ChainSelectorWidget = (props: ChainSelectorWidgetProps) => {\n const state = useChainSelectorScript(props);\n\n return (\n <ChainSelector\n {...state}\n variant={props.variant}\n isWrongNetwork={props.isWrongNetwork}\n />\n );\n};\n\nexport const ChainSelectorDialogId = \"ChainSelectorDialogId\";\nexport const ChainSelectorSheetId = \"ChainSelectorSheetId\";\n\nregisterSimpleDialog(ChainSelectorDialogId, ChainSelectorWidget, {\n size: \"lg\",\n title: \"Switch Network\",\n variant: \"wide\",\n isWrongNetwork: true,\n});\n\nregisterSimpleSheet(ChainSelectorSheetId, ChainSelectorWidget, {\n title: \"Switch Network\",\n classNames: {\n content: \"!oui-bg-base-8\",\n body: \"!oui-bg-base-8\",\n },\n variant: \"compact\",\n isWrongNetwork: true,\n});\n","import { useMemo, useCallback, useState, useEffect } from \"react\";\nimport { useConfig } from \"@orderly.network/hooks\";\nimport {\n useChains,\n useWalletConnector,\n useLocalStorage,\n} from \"@orderly.network/hooks\";\nimport { NetworkId } from \"@orderly.network/types\";\nimport { useAppContext } from \"@orderly.network/react-app\";\nimport { ChainType, TChainItem } from \"./type\";\nimport { useOrderlyTheme } from \"@orderly.network/ui\";\n\nconst KEY = \"orderly_selected_chains\";\nconst MAX_RECENT_CHAINS = 6;\n\nexport type UseChainSelectorScriptReturn = ReturnType<\n typeof useChainSelectorScript\n>;\n\nexport type UseChainSelectorScriptOptions = {\n networkId?: NetworkId;\n bridgeLessOnly?: boolean;\n close?: () => void;\n resolve?: (isSuccess: boolean) => void;\n reject?: () => void;\n onChainChangeBefore?: (\n chainId: number,\n state: {\n isTestnet: boolean;\n }\n ) => void;\n onChainChangeAfter?: (\n chainId: number,\n state: {\n isTestnet: boolean;\n isWalletConnected: boolean;\n }\n ) => void;\n};\n\nexport const useChainSelectorScript = (\n options: UseChainSelectorScriptOptions\n) => {\n const { networkId, bridgeLessOnly } = options || {};\n\n const config = useConfig();\n const [_chains, { checkChainSupport }] = useChains();\n const { setChain, connectedChain } = useWalletConnector();\n\n const { onChainChanged, currentChainId, setCurrentChainId, wrongNetwork } =\n useAppContext();\n\n const [selectChainId, setSelectChainId] = useState<number | undefined>(\n currentChainId\n );\n\n const { getComponentTheme } = useOrderlyTheme();\n\n const chains = useMemo(() => {\n const bridgeLessChains = bridgeLessOnly\n ? _chains.mainnet.filter((chain) => chain.network_infos.bridgeless)\n : _chains.mainnet;\n\n return {\n mainnet: bridgeLessChains.map((chain) => ({\n name: chain.network_infos.name,\n id: chain.network_infos.chain_id,\n lowestFee: chain.network_infos.bridgeless,\n isTestnet: false,\n })),\n testnet: _chains.testnet.map((chain) => ({\n name: chain.network_infos.name,\n id: chain.network_infos.chain_id,\n lowestFee: chain.network_infos.bridgeless,\n isTestnet: true,\n })),\n };\n }, [_chains, bridgeLessOnly]);\n\n const showTestnet = useMemo(() => {\n const chainSelectorOverrides = getComponentTheme(\"chainSelector\", {\n showTestnet: true,\n });\n\n if (\n chainSelectorOverrides.showTestnet === false ||\n !chains.testnet.length\n ) {\n return false;\n }\n\n return true;\n }, [chains.testnet]);\n\n const { recentChains, saveRecentChain } = useRecentChains(chains);\n\n const onChainChange = async (chain: TChainItem) => {\n if (connectedChain) {\n const result = await setChain({ chainId: chain.id });\n\n if (!result) return result;\n\n return {\n result,\n wrongNetwork: !checkChainSupport(chain.id, config.get(\"networkId\")),\n chainId: chain.id,\n };\n }\n\n setCurrentChainId(chain.id);\n return {\n result: true,\n wrongNetwork: false,\n chainId: chain.id,\n };\n // return Promise.reject(\"No connected chain\");\n };\n\n const changedCallback = (chain: TChainItem, isWalletConnected: boolean) => {\n const params = {\n isTestnet: chain.isTestnet,\n isWalletConnected,\n };\n options.onChainChangeAfter?.(chain.id, params);\n onChainChanged?.(chain.id, params);\n };\n\n const onChainClick = async (chain: TChainItem) => {\n setSelectChainId(chain.id);\n options.onChainChangeBefore?.(chain.id, { isTestnet: chain.isTestnet });\n try {\n const complete = await onChainChange?.(chain);\n\n if (complete) {\n options.resolve?.(complete);\n options.close?.();\n saveRecentChain(chain);\n changedCallback(chain, true);\n } else {\n setSelectChainId(undefined);\n changedCallback(chain, false);\n }\n } catch (err) {\n changedCallback(chain, false);\n }\n };\n\n const { selectedTab, onTabChange } = useChainTab(\n chains,\n currentChainId,\n wrongNetwork,\n showTestnet\n );\n\n return {\n recentChains,\n chains,\n selectChainId,\n onChainClick,\n selectedTab,\n onTabChange,\n showTestnet,\n };\n};\n\nfunction useChainTab(\n chains: Record<NetworkId, TChainItem[]>,\n currentChainId?: number,\n wrongNetwork?: boolean,\n showTestnet?: boolean\n) {\n const [selectedTab, setSelectedTab] = useState<ChainType>(ChainType.Mainnet);\n\n const onTabChange = (tab: ChainType) => {\n setSelectedTab(tab);\n };\n\n useEffect(() => {\n if (!showTestnet) {\n setSelectedTab(ChainType.Mainnet);\n return;\n }\n\n if (currentChainId) {\n const isMainnet = chains.mainnet?.some(\n (chain) => chain.id === currentChainId\n );\n if (isMainnet) {\n setSelectedTab(wrongNetwork ? ChainType.Testnet : ChainType.Mainnet);\n return;\n }\n\n const isTestnet = chains.testnet?.some(\n (chain) => chain.id === currentChainId\n );\n\n if (isTestnet) {\n setSelectedTab(wrongNetwork ? ChainType.Mainnet : ChainType.Testnet);\n return;\n }\n }\n }, [currentChainId, chains, wrongNetwork, showTestnet]);\n\n return { selectedTab, onTabChange };\n}\n\nfunction useRecentChains(chains: Record<NetworkId, TChainItem[]>) {\n const [recentChainsIds, setRecentChainsIds] = useLocalStorage<string[]>(\n KEY,\n []\n );\n\n const recentChains = useMemo<TChainItem[]>(() => {\n return recentChainsIds\n ?.map((id: string) =>\n chains.mainnet?.find((item) => item.id === parseInt(id))\n )\n .filter((chains: TChainItem) => !!chains);\n }, [chains, recentChainsIds]);\n\n const saveRecentChain = useCallback(\n (chain: TChainItem) => {\n // only mainnet can save chain id to local storage\n if (chain.isTestnet) {\n return;\n }\n let ids = recentChainsIds?.filter((id: number) => id !== chain.id);\n ids = [chain.id, ...ids].slice(0, MAX_RECENT_CHAINS);\n setRecentChainsIds(ids);\n },\n [recentChainsIds]\n );\n\n return { recentChains, saveRecentChain };\n}\n","import {\n Box,\n Flex,\n Text,\n ChainIcon,\n Tabs,\n TabPanel,\n cn,\n tv,\n} from \"@orderly.network/ui\";\nimport { ChainType, TChainItem } from \"./type\";\nimport { UseChainSelectorScriptReturn } from \"./chainSelector.script\";\n\nexport type ChainSelectorProps = {\n isWrongNetwork?: boolean;\n /**\n * wide: This represents the wide screen (desktop) UI mode\n * compact: This indicates a compact (mobile) UI pattern.\n */\n variant?: \"wide\" | \"compact\";\n className?: string;\n} & UseChainSelectorScriptReturn;\n\nconst chainSelectorVariants = tv({\n slots: {\n icon: \"\",\n list: \"oui-grid oui-grid-cols-1 oui-gap-1\",\n mainnetList: '\"',\n testnetList: '\"',\n recentList: \"\",\n item: \"oui-w-full oui-rounded-md\",\n tip: \"oui-text-center\",\n },\n variants: {\n variant: {\n compact: {\n icon: \"oui-w-6 oui-h-6\",\n list: \"oui-bg-base-9 oui-rounded-lg oui-p-1\",\n mainnetList: \"oui-grid-cols-2 oui-mt-4\",\n testnetList: \"oui-grid-cols-1 oui-mt-4\",\n recentList: \"oui-mt-4\",\n item: \"oui-bg-base-6 hover:oui-bg-base-7\",\n tip: \"oui-pt-6\",\n },\n wide: {\n icon: \"oui-w-[18px] oui-h-[18px]\",\n mainnetList: \"oui-grid-cols-3 oui-mt-3\",\n testnetList: \"oui-grid-cols-2 oui-mt-3\",\n recentList: \"oui-mt-3\",\n item: \"oui-bg-base-5 hover:oui-bg-base-6\",\n tip: \"oui-pt-8\",\n },\n },\n selected: {\n true: {\n item: \"\",\n },\n false: { item: \"oui-bg-transparent\" },\n },\n },\n compoundVariants: [\n {\n variant: \"compact\",\n selected: true,\n className: {\n item: \"hover:oui-bg-base-6\",\n },\n },\n {\n variant: \"wide\",\n selected: true,\n className: {\n item: \"hover:oui-bg-base-5\",\n },\n },\n ],\n defaultVariants: {\n variant: \"wide\",\n selected: false,\n },\n});\n\n//------------------ ChainSelector start ------------------\nexport const ChainSelector = (props: ChainSelectorProps) => {\n const { isWrongNetwork, variant = \"wide\" } = props;\n\n const { list, recentList, mainnetList, testnetList, icon, item, tip } =\n chainSelectorVariants({ variant });\n\n return (\n <Box className={cn(\"oui-font-semibold\", props.className)}>\n <Tabs\n value={props.selectedTab}\n variant=\"contained\"\n size={variant === \"wide\" ? \"md\" : \"lg\"}\n onValueChange={(e) => props.onTabChange(e as ChainType)}\n >\n <TabPanel value={ChainType.Mainnet} title={ChainType.Mainnet}>\n {!!props.recentChains?.length && (\n <Flex gap={2} className={recentList()}>\n {props.recentChains?.map((item) => {\n return (\n <RecentChainItem\n key={item.id}\n item={item}\n onClick={() => props.onChainClick(item)}\n iconClassName={icon()}\n />\n );\n })}\n </Flex>\n )}\n\n <Box r=\"2xl\" className={cn(list(), mainnetList())}>\n {props.chains.mainnet?.map((chain) => {\n const selected = props.selectChainId === chain.id;\n return (\n <ChainItem\n key={chain.id}\n selected={selected}\n item={chain}\n onClick={() => props.onChainClick(chain)}\n className={item({ selected })}\n />\n );\n })}\n </Box>\n </TabPanel>\n\n {props.showTestnet && (\n <TabPanel value={ChainType.Testnet} title={ChainType.Testnet}>\n <Box r=\"2xl\" className={cn(list(), testnetList())}>\n {props.chains.testnet?.map((chain) => {\n const selected = props.selectChainId === chain.id;\n return (\n <ChainItem\n key={chain.id}\n selected={selected}\n item={chain}\n onClick={() => props.onChainClick(chain)}\n className={item({ selected })}\n />\n );\n })}\n </Box>\n </TabPanel>\n )}\n </Tabs>\n\n {isWrongNetwork && (\n <Box className={tip()}>\n <Text color=\"warning\" size=\"xs\">\n Please switch to a supported network to continue.\n </Text>\n </Box>\n )}\n </Box>\n );\n};\n// ------------------ ChainSelector end ------------------\n\n// ------------------ ChainItem start ------------------\nexport const ChainItem = (props: {\n selected: boolean;\n item: TChainItem;\n onClick?: () => void;\n className?: string;\n}) => {\n const { item } = props;\n return (\n <button className={props.className} onClick={props.onClick}>\n <Flex justify=\"between\" className=\"oui-py-2.5\" px={3}>\n <Flex itemAlign=\"center\" width=\"100%\" className=\"oui-gap-x-[6px]\">\n <ChainIcon chainId={item.id} size=\"xs\" />\n <Text size=\"2xs\">{item.name}</Text>\n </Flex>\n {props.selected && (\n <Box gradient=\"brand\" r=\"full\" width={4} height={4} />\n )}\n </Flex>\n </button>\n );\n};\n\n// ------------------ Recent ChainItem start ------------------\nexport const RecentChainItem = (props: {\n item: TChainItem;\n onClick?: () => void;\n iconClassName?: string;\n}) => {\n return (\n <button\n className=\"oui-border oui-border-line-12 oui-rounded-lg hover:oui-border-primary-light\"\n onClick={props.onClick}\n >\n <Flex itemAlign=\"center\" p={2}>\n <ChainIcon chainId={props.item.id} className={props.iconClassName} />\n </Flex>\n </button>\n );\n};\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orderly.network/ui-chain-selector",
3
- "version": "2.0.3",
3
+ "version": "2.0.4",
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/hooks": "2.0.3",
18
- "@orderly.network/react-app": "2.0.3",
19
- "@orderly.network/types": "2.0.3",
20
- "@orderly.network/ui": "2.0.3"
17
+ "@orderly.network/hooks": "2.0.4",
18
+ "@orderly.network/ui": "2.0.4",
19
+ "@orderly.network/react-app": "2.0.4",
20
+ "@orderly.network/types": "2.0.4"
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.19"
32
+ "tsconfig": "0.3.20"
33
33
  },
34
34
  "peerDependencies": {
35
35
  "react": ">=18",