@orderly.network/ui-chain-selector 2.0.0-alpha.1

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.
@@ -0,0 +1,26 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { NetworkId } from '@orderly.network/types';
3
+
4
+ type ChainItem = {
5
+ name: string;
6
+ id: number;
7
+ lowestFee?: boolean;
8
+ isTestnet?: boolean;
9
+ };
10
+
11
+ declare const ChainTile: (props: {
12
+ selected: boolean;
13
+ item: ChainItem;
14
+ onClick?: ((chain: ChainItem) => void) | undefined;
15
+ }) => react_jsx_runtime.JSX.Element;
16
+
17
+ declare const ChainSelectorWidget: (props: {
18
+ networkId?: NetworkId | undefined;
19
+ bridgeLessOnly?: boolean | undefined;
20
+ close?: (() => void) | undefined;
21
+ resolve?: ((isSuccess: boolean) => void) | undefined;
22
+ reject?: (() => void) | undefined;
23
+ }) => react_jsx_runtime.JSX.Element;
24
+ declare const ChainSelectorId = "ChainSelector";
25
+
26
+ export { ChainSelectorId, ChainSelectorWidget, ChainTile };
@@ -0,0 +1,26 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { NetworkId } from '@orderly.network/types';
3
+
4
+ type ChainItem = {
5
+ name: string;
6
+ id: number;
7
+ lowestFee?: boolean;
8
+ isTestnet?: boolean;
9
+ };
10
+
11
+ declare const ChainTile: (props: {
12
+ selected: boolean;
13
+ item: ChainItem;
14
+ onClick?: ((chain: ChainItem) => void) | undefined;
15
+ }) => react_jsx_runtime.JSX.Element;
16
+
17
+ declare const ChainSelectorWidget: (props: {
18
+ networkId?: NetworkId | undefined;
19
+ bridgeLessOnly?: boolean | undefined;
20
+ close?: (() => void) | undefined;
21
+ resolve?: ((isSuccess: boolean) => void) | undefined;
22
+ reject?: (() => void) | undefined;
23
+ }) => react_jsx_runtime.JSX.Element;
24
+ declare const ChainSelectorId = "ChainSelector";
25
+
26
+ export { ChainSelectorId, ChainSelectorWidget, ChainTile };
package/dist/index.js ADDED
@@ -0,0 +1,15 @@
1
+ 'use strict';
2
+
3
+ var react = require('react');
4
+ var ui = require('@orderly.network/ui');
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var hooks = require('@orderly.network/hooks');
7
+ var reactApp = require('@orderly.network/react-app');
8
+
9
+ var b=e=>{let[n,a]=react.useState(),c=async t=>{a(t.id);let s=await e.onChainChange?.(t);s?(e.resolve?.(s),e.close?.(),e.chainChangedCallback?.(t.id,{isTestnet:t.isTestnet??!1,isWalletConnected:!0})):a(void 0);};return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs(ui.Box,{intensity:900,r:"2xl",p:1,children:[Array.isArray(e.chains.mainnet)&&jsxRuntime.jsx(ui.Text,{as:"div",className:"oui-px-4 oui-pt-2",intensity:54,size:"2xs",children:"Mainnet"}),e.chains.mainnet?.map((t,s)=>jsxRuntime.jsx(C,{selected:n===t.id,item:t,onClick:l=>c(l)},s)),Array.isArray(e.chains.testnet)&&jsxRuntime.jsx(ui.Text,{as:"div",className:"oui-px-4",intensity:54,size:"2xs",children:"Testnet"}),e.chains.testnet?.map((t,s)=>jsxRuntime.jsx(C,{selected:n===t.id,onClick:l=>c(l),item:t},t.id))]}),jsxRuntime.jsx(ui.Box,{pt:5,pb:4,className:"oui-text-center",children:jsxRuntime.jsx(ui.Text,{color:"warning",size:"xs",children:"Please switch to a supported network to continue."})})]})},C=e=>{let{item:n}=e;return jsxRuntime.jsx("button",{className:e.selected?"oui-w-full oui-bg-base-6 oui-rounded-lg hover:oui-bg-base-6":"oui-w-full oui-rounded-lg hover:oui-bg-base-6 ",onClick:()=>{e.onClick?.(n);},children:jsxRuntime.jsxs(ui.Flex,{justify:"between",children:[jsxRuntime.jsxs(ui.Flex,{itemAlign:"center",width:"100%",py:3,px:4,gap:2,children:[jsxRuntime.jsx(ui.ChainIcon,{chainId:n.id}),jsxRuntime.jsx(ui.Text,{size:"2xs",children:n.name}),n.lowestFee&&jsxRuntime.jsx("div",{className:"oui-text-success oui-px-2 oui-bg-success/20 oui-rounded oui-text-2xs",children:"lowest fee"})]}),e.selected&&jsxRuntime.jsx(ui.Box,{gradient:"brand",r:"full",width:"6px",height:"6px",mr:4})]})})};var g=e=>{let{networkId:n,bridgeLessOnly:a}=e||{},c=hooks.useConfig(),[t,{checkChainSupport:s}]=hooks.useChains(),{setChain:l,connectedChain:f}=hooks.useWalletConnector(),{onChainChanged:I}=reactApp.useAppContext(),p=async d=>{if(!f)return Promise.reject("No connected chain");let r=await l({chainId:d.id});return r&&{result:r,wrongNetwork:!s(d.id,c.get("networkId")),chainId:d.id}};return {chains:react.useMemo(()=>{let r={mainnet:(a?t.mainnet.filter(o=>o.network_infos.bridgeless):t.mainnet).map(o=>({name:o.network_infos.name,id:o.network_infos.chain_id,lowestFee:o.network_infos.bridgeless,isTestnet:!1})),testnet:t.testnet.map(o=>({name:o.network_infos.name,id:o.network_infos.chain_id,lowestFee:o.network_infos.bridgeless,isTestnet:!0}))};return typeof n>"u"?r:n==="testnet"?{testnet:r.testnet}:{mainnet:r.mainnet}},[t,n,a]),onChainChange:p,chainChangedCallback:I,currentChainId:f?.id}};var x=e=>{let n=g(e);return jsxRuntime.jsx(b,{...n,close:e.close,resolve:e.resolve})},k="ChainSelector";ui.registerSimpleDialog(k,x,{size:"sm",title:"Switch Network"});
10
+
11
+ exports.ChainSelectorId = k;
12
+ exports.ChainSelectorWidget = x;
13
+ exports.ChainTile = C;
14
+ //# sourceMappingURL=out.js.map
15
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/chainSelector.ui.tsx","../src/chainSelector.widget.tsx","../src/chainSelector.script.ts"],"names":["useState","Box","Flex","Text","ChainIcon","Fragment","jsx","jsxs","ChainSelector","props","select","setSelect","onChange","chain","complete","item","index","ChainTile","registerSimpleDialog","useMemo","useConfig","useChains","useWalletConnector","useAppContext","useChainSelectorBuilder","options","networkId","bridgeLessOnly","config","chains","checkChainSupport","setChain","connectedChain","onChainChanged","onChainChange","result","_chains","ChainSelectorWidget","state","ChainSelectorId"],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { Box, Flex, Text, ChainIcon } from \"@orderly.network/ui\";\nimport type { ChainItem } from \"./types\";\n\n//------------------ ChainSelector start ------------------\nexport const ChainSelector = (props: {\n chains: {\n mainnet?: ChainItem[];\n testnet?: ChainItem[];\n };\n onChainChange?: (chain: ChainItem) => Promise<any>;\n currentChainId?: number;\n close?: () => void;\n resolve?: (isSuccess: boolean) => void;\n chainChangedCallback?: (\n chainId: number,\n state: {\n isTestnet: boolean;\n isWalletConnected: boolean;\n }\n ) => void;\n}) => {\n const [select, setSelect] = useState<number | undefined>();\n // props.currentChainId\n const onChange = async (chain: ChainItem) => {\n setSelect(chain.id);\n const complete = await props.onChainChange?.(chain);\n\n if (complete) {\n props.resolve?.(complete);\n props.close?.();\n\n props.chainChangedCallback?.(chain.id, {\n isTestnet: chain.isTestnet ?? false,\n isWalletConnected: true,\n });\n } else {\n setSelect(undefined);\n }\n };\n\n return (\n <>\n <Box intensity={900} r=\"2xl\" p={1}>\n {Array.isArray(props.chains.mainnet) && (\n <Text\n as=\"div\"\n className=\"oui-px-4 oui-pt-2\"\n intensity={54}\n size=\"2xs\"\n >\n Mainnet\n </Text>\n )}\n\n {props.chains.mainnet?.map((item, index) => {\n return (\n <ChainTile\n key={index}\n selected={select === item.id}\n // {...item}\n item={item}\n onClick={(chain: ChainItem) => onChange(chain)}\n />\n );\n })}\n {Array.isArray(props.chains.testnet) && (\n <Text as=\"div\" className=\"oui-px-4\" intensity={54} size=\"2xs\">\n Testnet\n </Text>\n )}\n {props.chains.testnet?.map((item, index) => {\n return (\n <ChainTile\n key={item.id}\n selected={select === item.id}\n // {...item}\n onClick={(chain: ChainItem) => onChange(chain)}\n item={item}\n />\n );\n })}\n </Box>\n <Box pt={5} pb={4} className=\"oui-text-center\">\n <Text color=\"warning\" size=\"xs\">\n Please switch to a supported network to continue.\n </Text>\n </Box>\n </>\n );\n};\n// ------------------ ChainSelector end ------------------\n\n// ------------------ ChainItem start ------------------\nexport const ChainTile = (props: {\n // id: number;\n // name: string;\n // lowestFee?: boolean;\n selected: boolean;\n item: ChainItem;\n onClick?: (chain: ChainItem) => void;\n}) => {\n const { item } = props;\n return (\n <button\n className={\n props.selected\n ? \"oui-w-full oui-bg-base-6 oui-rounded-lg hover:oui-bg-base-6\"\n : \"oui-w-full oui-rounded-lg hover:oui-bg-base-6 \"\n }\n onClick={() => {\n props.onClick?.(item);\n }}\n >\n <Flex justify={\"between\"}>\n <Flex itemAlign={\"center\"} width={\"100%\"} py={3} px={4} gap={2}>\n <ChainIcon chainId={item.id} />\n <Text size=\"2xs\">{item.name}</Text>\n {item.lowestFee && (\n <div className=\"oui-text-success oui-px-2 oui-bg-success/20 oui-rounded oui-text-2xs\">\n lowest fee\n </div>\n )}\n </Flex>\n {props.selected && (\n <Box\n gradient={\"brand\"}\n r={\"full\"}\n width={\"6px\"}\n height={\"6px\"}\n mr={4}\n />\n )}\n </Flex>\n </button>\n );\n};\n","import { registerSimpleDialog } from \"@orderly.network/ui\";\nimport { useChainSelectorBuilder } from \"./chainSelector.script\";\nimport { ChainSelector } from \"./chainSelector.ui\";\nimport { NetworkId } from \"@orderly.network/types\";\n\nexport const ChainSelectorWidget = (props: {\n networkId?: NetworkId;\n bridgeLessOnly?: boolean;\n close?: () => void;\n resolve?: (isSuccess: boolean) => void;\n reject?: () => void;\n}) => {\n const state = useChainSelectorBuilder(props);\n return (\n <ChainSelector {...state} close={props.close} resolve={props.resolve} />\n );\n};\n\nexport const ChainSelectorId = \"ChainSelector\";\n\nregisterSimpleDialog(ChainSelectorId, ChainSelectorWidget, {\n size: \"sm\",\n title: \"Switch Network\",\n});\n","import { useMemo } from \"react\";\nimport { useConfig } from \"@orderly.network/hooks\";\nimport { useChains, useWalletConnector } from \"@orderly.network/hooks\";\nimport { NetworkId } from \"@orderly.network/types\";\nimport { useAppContext } from \"@orderly.network/react-app\";\n\nexport const useChainSelectorBuilder = (options?: {\n networkId?: NetworkId;\n bridgeLessOnly?: boolean;\n}) => {\n const { networkId, bridgeLessOnly } = options || {};\n const config = useConfig();\n const [chains, { checkChainSupport }] = useChains();\n const { setChain, connectedChain } = useWalletConnector();\n\n const { onChainChanged } = useAppContext();\n\n const onChainChange = async (chain: { id: number }) => {\n if (!connectedChain) {\n return Promise.reject(\"No connected chain\");\n }\n const result = await setChain({\n chainId: chain.id,\n });\n\n if (!result) return result;\n\n return {\n result,\n wrongNetwork: !checkChainSupport(\n chain.id,\n config.get(\"networkId\") as NetworkId\n ),\n chainId: chain.id,\n };\n };\n\n const filteredChains = useMemo(() => {\n const filteredChains = bridgeLessOnly\n ? chains.mainnet.filter((chain) => chain.network_infos.bridgeless)\n : chains.mainnet;\n\n const _chains = {\n mainnet: filteredChains.map((chain) => ({\n name: chain.network_infos.name,\n id: chain.network_infos.chain_id,\n lowestFee: chain.network_infos.bridgeless,\n isTestnet: false,\n })),\n testnet: chains.testnet.map((chain) => ({\n name: chain.network_infos.name,\n id: chain.network_infos.chain_id,\n lowestFee: chain.network_infos.bridgeless,\n isTestnet: true,\n })),\n };\n\n if (typeof networkId === \"undefined\") {\n return _chains;\n }\n\n if (networkId === \"testnet\") {\n return {\n testnet: _chains.testnet,\n };\n }\n\n return {\n mainnet: _chains.mainnet,\n };\n }, [chains, networkId, bridgeLessOnly]);\n\n return {\n chains: filteredChains,\n onChainChange,\n chainChangedCallback: onChainChanged,\n currentChainId: connectedChain?.id as number | undefined,\n };\n};\n"]}
package/dist/index.mjs ADDED
@@ -0,0 +1,11 @@
1
+ import { useState, useMemo } from 'react';
2
+ import { registerSimpleDialog, Flex, ChainIcon, Text, Box } from '@orderly.network/ui';
3
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
4
+ import { useConfig, useChains, useWalletConnector } from '@orderly.network/hooks';
5
+ import { useAppContext } from '@orderly.network/react-app';
6
+
7
+ var b=e=>{let[n,a]=useState(),c=async t=>{a(t.id);let s=await e.onChainChange?.(t);s?(e.resolve?.(s),e.close?.(),e.chainChangedCallback?.(t.id,{isTestnet:t.isTestnet??!1,isWalletConnected:!0})):a(void 0);};return jsxs(Fragment,{children:[jsxs(Box,{intensity:900,r:"2xl",p:1,children:[Array.isArray(e.chains.mainnet)&&jsx(Text,{as:"div",className:"oui-px-4 oui-pt-2",intensity:54,size:"2xs",children:"Mainnet"}),e.chains.mainnet?.map((t,s)=>jsx(C,{selected:n===t.id,item:t,onClick:l=>c(l)},s)),Array.isArray(e.chains.testnet)&&jsx(Text,{as:"div",className:"oui-px-4",intensity:54,size:"2xs",children:"Testnet"}),e.chains.testnet?.map((t,s)=>jsx(C,{selected:n===t.id,onClick:l=>c(l),item:t},t.id))]}),jsx(Box,{pt:5,pb:4,className:"oui-text-center",children:jsx(Text,{color:"warning",size:"xs",children:"Please switch to a supported network to continue."})})]})},C=e=>{let{item:n}=e;return jsx("button",{className:e.selected?"oui-w-full oui-bg-base-6 oui-rounded-lg hover:oui-bg-base-6":"oui-w-full oui-rounded-lg hover:oui-bg-base-6 ",onClick:()=>{e.onClick?.(n);},children:jsxs(Flex,{justify:"between",children:[jsxs(Flex,{itemAlign:"center",width:"100%",py:3,px:4,gap:2,children:[jsx(ChainIcon,{chainId:n.id}),jsx(Text,{size:"2xs",children:n.name}),n.lowestFee&&jsx("div",{className:"oui-text-success oui-px-2 oui-bg-success/20 oui-rounded oui-text-2xs",children:"lowest fee"})]}),e.selected&&jsx(Box,{gradient:"brand",r:"full",width:"6px",height:"6px",mr:4})]})})};var g=e=>{let{networkId:n,bridgeLessOnly:a}=e||{},c=useConfig(),[t,{checkChainSupport:s}]=useChains(),{setChain:l,connectedChain:f}=useWalletConnector(),{onChainChanged:I}=useAppContext(),p=async d=>{if(!f)return Promise.reject("No connected chain");let r=await l({chainId:d.id});return r&&{result:r,wrongNetwork:!s(d.id,c.get("networkId")),chainId:d.id}};return {chains:useMemo(()=>{let r={mainnet:(a?t.mainnet.filter(o=>o.network_infos.bridgeless):t.mainnet).map(o=>({name:o.network_infos.name,id:o.network_infos.chain_id,lowestFee:o.network_infos.bridgeless,isTestnet:!1})),testnet:t.testnet.map(o=>({name:o.network_infos.name,id:o.network_infos.chain_id,lowestFee:o.network_infos.bridgeless,isTestnet:!0}))};return typeof n>"u"?r:n==="testnet"?{testnet:r.testnet}:{mainnet:r.mainnet}},[t,n,a]),onChainChange:p,chainChangedCallback:I,currentChainId:f?.id}};var x=e=>{let n=g(e);return jsx(b,{...n,close:e.close,resolve:e.resolve})},k="ChainSelector";registerSimpleDialog(k,x,{size:"sm",title:"Switch Network"});
8
+
9
+ export { k as ChainSelectorId, x as ChainSelectorWidget, C as ChainTile };
10
+ //# sourceMappingURL=out.js.map
11
+ //# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/chainSelector.ui.tsx","../src/chainSelector.widget.tsx","../src/chainSelector.script.ts"],"names":["useState","Box","Flex","Text","ChainIcon","Fragment","jsx","jsxs","ChainSelector","props","select","setSelect","onChange","chain","complete","item","index","ChainTile","registerSimpleDialog","useMemo","useConfig","useChains","useWalletConnector","useAppContext","useChainSelectorBuilder","options","networkId","bridgeLessOnly","config","chains","checkChainSupport","setChain","connectedChain","onChainChanged","onChainChange","result","_chains","ChainSelectorWidget","state","ChainSelectorId"],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { Box, Flex, Text, ChainIcon } from \"@orderly.network/ui\";\nimport type { ChainItem } from \"./types\";\n\n//------------------ ChainSelector start ------------------\nexport const ChainSelector = (props: {\n chains: {\n mainnet?: ChainItem[];\n testnet?: ChainItem[];\n };\n onChainChange?: (chain: ChainItem) => Promise<any>;\n currentChainId?: number;\n close?: () => void;\n resolve?: (isSuccess: boolean) => void;\n chainChangedCallback?: (\n chainId: number,\n state: {\n isTestnet: boolean;\n isWalletConnected: boolean;\n }\n ) => void;\n}) => {\n const [select, setSelect] = useState<number | undefined>();\n // props.currentChainId\n const onChange = async (chain: ChainItem) => {\n setSelect(chain.id);\n const complete = await props.onChainChange?.(chain);\n\n if (complete) {\n props.resolve?.(complete);\n props.close?.();\n\n props.chainChangedCallback?.(chain.id, {\n isTestnet: chain.isTestnet ?? false,\n isWalletConnected: true,\n });\n } else {\n setSelect(undefined);\n }\n };\n\n return (\n <>\n <Box intensity={900} r=\"2xl\" p={1}>\n {Array.isArray(props.chains.mainnet) && (\n <Text\n as=\"div\"\n className=\"oui-px-4 oui-pt-2\"\n intensity={54}\n size=\"2xs\"\n >\n Mainnet\n </Text>\n )}\n\n {props.chains.mainnet?.map((item, index) => {\n return (\n <ChainTile\n key={index}\n selected={select === item.id}\n // {...item}\n item={item}\n onClick={(chain: ChainItem) => onChange(chain)}\n />\n );\n })}\n {Array.isArray(props.chains.testnet) && (\n <Text as=\"div\" className=\"oui-px-4\" intensity={54} size=\"2xs\">\n Testnet\n </Text>\n )}\n {props.chains.testnet?.map((item, index) => {\n return (\n <ChainTile\n key={item.id}\n selected={select === item.id}\n // {...item}\n onClick={(chain: ChainItem) => onChange(chain)}\n item={item}\n />\n );\n })}\n </Box>\n <Box pt={5} pb={4} className=\"oui-text-center\">\n <Text color=\"warning\" size=\"xs\">\n Please switch to a supported network to continue.\n </Text>\n </Box>\n </>\n );\n};\n// ------------------ ChainSelector end ------------------\n\n// ------------------ ChainItem start ------------------\nexport const ChainTile = (props: {\n // id: number;\n // name: string;\n // lowestFee?: boolean;\n selected: boolean;\n item: ChainItem;\n onClick?: (chain: ChainItem) => void;\n}) => {\n const { item } = props;\n return (\n <button\n className={\n props.selected\n ? \"oui-w-full oui-bg-base-6 oui-rounded-lg hover:oui-bg-base-6\"\n : \"oui-w-full oui-rounded-lg hover:oui-bg-base-6 \"\n }\n onClick={() => {\n props.onClick?.(item);\n }}\n >\n <Flex justify={\"between\"}>\n <Flex itemAlign={\"center\"} width={\"100%\"} py={3} px={4} gap={2}>\n <ChainIcon chainId={item.id} />\n <Text size=\"2xs\">{item.name}</Text>\n {item.lowestFee && (\n <div className=\"oui-text-success oui-px-2 oui-bg-success/20 oui-rounded oui-text-2xs\">\n lowest fee\n </div>\n )}\n </Flex>\n {props.selected && (\n <Box\n gradient={\"brand\"}\n r={\"full\"}\n width={\"6px\"}\n height={\"6px\"}\n mr={4}\n />\n )}\n </Flex>\n </button>\n );\n};\n","import { registerSimpleDialog } from \"@orderly.network/ui\";\nimport { useChainSelectorBuilder } from \"./chainSelector.script\";\nimport { ChainSelector } from \"./chainSelector.ui\";\nimport { NetworkId } from \"@orderly.network/types\";\n\nexport const ChainSelectorWidget = (props: {\n networkId?: NetworkId;\n bridgeLessOnly?: boolean;\n close?: () => void;\n resolve?: (isSuccess: boolean) => void;\n reject?: () => void;\n}) => {\n const state = useChainSelectorBuilder(props);\n return (\n <ChainSelector {...state} close={props.close} resolve={props.resolve} />\n );\n};\n\nexport const ChainSelectorId = \"ChainSelector\";\n\nregisterSimpleDialog(ChainSelectorId, ChainSelectorWidget, {\n size: \"sm\",\n title: \"Switch Network\",\n});\n","import { useMemo } from \"react\";\nimport { useConfig } from \"@orderly.network/hooks\";\nimport { useChains, useWalletConnector } from \"@orderly.network/hooks\";\nimport { NetworkId } from \"@orderly.network/types\";\nimport { useAppContext } from \"@orderly.network/react-app\";\n\nexport const useChainSelectorBuilder = (options?: {\n networkId?: NetworkId;\n bridgeLessOnly?: boolean;\n}) => {\n const { networkId, bridgeLessOnly } = options || {};\n const config = useConfig();\n const [chains, { checkChainSupport }] = useChains();\n const { setChain, connectedChain } = useWalletConnector();\n\n const { onChainChanged } = useAppContext();\n\n const onChainChange = async (chain: { id: number }) => {\n if (!connectedChain) {\n return Promise.reject(\"No connected chain\");\n }\n const result = await setChain({\n chainId: chain.id,\n });\n\n if (!result) return result;\n\n return {\n result,\n wrongNetwork: !checkChainSupport(\n chain.id,\n config.get(\"networkId\") as NetworkId\n ),\n chainId: chain.id,\n };\n };\n\n const filteredChains = useMemo(() => {\n const filteredChains = bridgeLessOnly\n ? chains.mainnet.filter((chain) => chain.network_infos.bridgeless)\n : chains.mainnet;\n\n const _chains = {\n mainnet: filteredChains.map((chain) => ({\n name: chain.network_infos.name,\n id: chain.network_infos.chain_id,\n lowestFee: chain.network_infos.bridgeless,\n isTestnet: false,\n })),\n testnet: chains.testnet.map((chain) => ({\n name: chain.network_infos.name,\n id: chain.network_infos.chain_id,\n lowestFee: chain.network_infos.bridgeless,\n isTestnet: true,\n })),\n };\n\n if (typeof networkId === \"undefined\") {\n return _chains;\n }\n\n if (networkId === \"testnet\") {\n return {\n testnet: _chains.testnet,\n };\n }\n\n return {\n mainnet: _chains.mainnet,\n };\n }, [chains, networkId, bridgeLessOnly]);\n\n return {\n chains: filteredChains,\n onChainChange,\n chainChangedCallback: onChainChanged,\n currentChainId: connectedChain?.id as number | undefined,\n };\n};\n"]}
package/package.json ADDED
@@ -0,0 +1,41 @@
1
+ {
2
+ "name": "@orderly.network/ui-chain-selector",
3
+ "version": "2.0.0-alpha.1",
4
+ "description": "",
5
+ "main": "dist/index.js",
6
+ "module": "dist/index.mjs",
7
+ "keywords": [
8
+ "Orderly"
9
+ ],
10
+ "files": [
11
+ "dist"
12
+ ],
13
+ "publishConfig": {
14
+ "access": "public"
15
+ },
16
+ "dependencies": {
17
+ "@orderly.network/ui": "2.0.0-alpha.1",
18
+ "@orderly.network/hooks": "2.0.0-alpha.1",
19
+ "@orderly.network/types": "2.0.0-alpha.1",
20
+ "@orderly.network/react-app": "2.0.0-alpha.1"
21
+ },
22
+ "devDependencies": {
23
+ "@types/react": "^18.3.2",
24
+ "@types/react-dom": "^18.3.0",
25
+ "autoprefixer": "^10.4.19",
26
+ "postcss": "^8.4.39",
27
+ "react": "^18.3.1",
28
+ "react-dom": "^18.2.0",
29
+ "tailwindcss": "^3.4.4",
30
+ "tsup": "^7.1.0",
31
+ "tsconfig": "0.3.12"
32
+ },
33
+ "peerDependencies": {
34
+ "react": "^18.3.1",
35
+ "react-dom": "^18.2.0"
36
+ },
37
+ "scripts": {
38
+ "build": "tsup",
39
+ "test": "echo \"Error: no test specified\" && exit 1"
40
+ }
41
+ }