npm - @kodiak-finance/orderly-ui-chain-selector - Versions diffs - 2.7.4 - Mend

@kodiak-finance/orderly-ui-chain-selector 2.7.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

package/dist/index.d.mts ADDED Viewed

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

package/dist/index.d.ts ADDED Viewed

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

package/dist/index.js ADDED Viewed

@@ -0,0 +1,16 @@
+'use strict';
+var orderlyUi = require('@kodiak-finance/orderly-ui');
+var react = require('react');
+var orderlyHooks = require('@kodiak-finance/orderly-hooks');
+var orderlyReactApp = require('@kodiak-finance/orderly-react-app');
+var orderlyI18n = require('@kodiak-finance/orderly-i18n');
+var jsxRuntime = require('react/jsx-runtime');
+var te="orderly_selected_chains",ne=6,L=e=>{let{networkId:o,bridgeLessOnly:r}=e||{},{setStorageChain:l}=orderlyHooks.useStorageChain(),m=orderlyHooks.useConfig(),[n,{checkChainSupport:c}]=orderlyHooks.useChains(),{setChain:d,connectedChain:f}=orderlyHooks.useWalletConnector(),{onChainChanged:u,currentChainId:T,setCurrentChainId:s,wrongNetwork:C}=orderlyReactApp.useAppContext(),[B,N]=react.useState(T),{getComponentTheme:U}=orderlyUi.useOrderlyTheme(),h=react.useMemo(()=>({mainnet:(r?n.mainnet.filter(i=>i.network_infos.bridgeless):n.mainnet).map(i=>({name:i.network_infos.name,id:i.network_infos.chain_id,lowestFee:i.network_infos.bridgeless,isTestnet:false})),testnet:n.testnet.map(i=>({name:i.network_infos.name,id:i.network_infos.chain_id,lowestFee:i.network_infos.bridgeless,isTestnet:true}))}),[n,r]),x=react.useMemo(()=>!(U("chainSelector",{showTestnet:true}).showTestnet===false||!h.testnet.length),[h.testnet]),{recentChains:z,saveRecentChain:D}=oe(h),E=async t=>{if(f){let i=await d({chainId:t.id});return i&&{result:i,wrongNetwork:!c(t.id,m.get("networkId")),chainId:t.id}}return l(t.id),s(t.id),{result:true,wrongNetwork:false,chainId:t.id}},S=(t,i)=>{let v={isTestnet:t.isTestnet,isWalletConnected:i};e.onChainChangeAfter?.(t.id,v),u?.(t.id,v);},V=async t=>{N(t.id),e.onChainChangeBefore?.(t.id,{isTestnet:t.isTestnet});try{let i=await E?.(t);i?(e.resolve?.(i),e.close?.(),D(t),S(t,!0)):(N(void 0),S(t,!1));}catch{S(t,false);}},{selectedTab:H,onTabChange:K}=ie(h,T,C,x);return {recentChains:z,chains:h,selectChainId:B,onChainClick:V,selectedTab:H,onTabChange:K,showTestnet:x}};function ie(e,o,r,l){let[m,n]=react.useState("Mainnet"),c=d=>{n(d);};return react.useEffect(()=>{if(!l){n("Mainnet");return}if(o){if(e.mainnet?.some(u=>u.id===o)){n(r?"Testnet":"Mainnet");return}if(e.testnet?.some(u=>u.id===o)){n(r?"Mainnet":"Testnet");return}}},[o,e,r,l]),{selectedTab:m,onTabChange:c}}function oe(e){let[o,r]=orderlyHooks.useLocalStorage(te,[]),l=react.useMemo(()=>o?.map(n=>e.mainnet?.find(c=>c.id===parseInt(n))).filter(n=>!!n),[e,o]),m=react.useCallback(n=>{if(n.isTestnet)return;let c=o?.filter(d=>d!==n.id);c=[n.id,...c].slice(0,ne),r(c);},[o]);return {recentChains:l,saveRecentChain:m}}var ce=orderlyUi.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}}),P=e=>{let{isWrongNetwork:o,variant:r="wide"}=e,{t:l}=orderlyI18n.useTranslation(),{list:m,recentList:n,mainnetList:c,testnetList:d,icon:f,item:u,tip:T}=ce({variant:r});return jsxRuntime.jsxs(orderlyUi.Box,{className:orderlyUi.cn("oui-font-semibold",e.className),children:[jsxRuntime.jsxs(orderlyUi.Tabs,{value:e.selectedTab,variant:"contained",size:r==="wide"?"md":"lg",onValueChange:s=>e.onTabChange(s),children:[jsxRuntime.jsxs(orderlyUi.TabPanel,{value:"Mainnet",title:l("connector.mainnet"),children:[!!e.recentChains?.length&&jsxRuntime.jsx(orderlyUi.Flex,{gap:2,className:n(),children:e.recentChains?.map(s=>jsxRuntime.jsx(le,{item:s,onClick:()=>e.onChainClick(s),iconClassName:f()},s.id))}),jsxRuntime.jsx(orderlyUi.Box,{r:"2xl",className:orderlyUi.cn(m(),c()),children:e.chains.mainnet?.map(s=>{let C=e.selectChainId===s.id;return jsxRuntime.jsx(W,{selected:C,item:s,onClick:()=>e.onChainClick(s),className:u({selected:C})},s.id)})})]}),e.showTestnet&&jsxRuntime.jsx(orderlyUi.TabPanel,{value:"Testnet",title:l("connector.testnet"),children:jsxRuntime.jsx(orderlyUi.Box,{r:"2xl",className:orderlyUi.cn(m(),d()),children:e.chains.testnet?.map(s=>{let C=e.selectChainId===s.id;return jsxRuntime.jsx(W,{selected:C,item:s,onClick:()=>e.onChainClick(s),className:u({selected:C})},s.id)})})})]}),o&&jsxRuntime.jsx(orderlyUi.Box,{className:T(),children:jsxRuntime.jsx(orderlyUi.Text,{color:"warning",size:"xs",children:l("connector.wrongNetwork.tooltip")})})]})},W=e=>{let{item:o}=e;return jsxRuntime.jsx("button",{className:e.className,onClick:e.onClick,children:jsxRuntime.jsxs(orderlyUi.Flex,{justify:"between",className:"oui-py-2.5",px:3,children:[jsxRuntime.jsxs(orderlyUi.Flex,{itemAlign:"center",width:"100%",className:"oui-gap-x-[6px]",children:[jsxRuntime.jsx(orderlyUi.ChainIcon,{chainId:o.id,size:"xs"}),jsxRuntime.jsx(orderlyUi.Text,{size:"2xs",children:o.name})]}),e.selected&&jsxRuntime.jsx(orderlyUi.Box,{gradient:"brand",r:"full",width:4,height:4})]})})},le=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(orderlyUi.Flex,{itemAlign:"center",p:2,children:jsxRuntime.jsx(orderlyUi.ChainIcon,{chainId:e.item.id,className:e.iconClassName})})});var I=e=>{let o=L(e);return jsxRuntime.jsx(P,{...o,variant:e.variant,isWrongNetwork:e.isWrongNetwork})},F="ChainSelectorDialogId",A="ChainSelectorSheetId";orderlyUi.registerSimpleDialog(F,I,{size:"lg",title:()=>orderlyI18n.i18n.t("connector.switchNetwork"),variant:"wide",isWrongNetwork:true});orderlyUi.registerSimpleSheet(A,I,{title:()=>orderlyI18n.i18n.t("connector.switchNetwork"),classNames:{content:"!oui-bg-base-8",body:"!oui-bg-base-8"},variant:"compact",isWrongNetwork:true});
+exports.ChainSelectorDialogId = F;
+exports.ChainSelectorSheetId = A;
+exports.ChainSelectorWidget = I;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/chainSelector.widget.tsx","../src/chainSelector.script.ts","../src/chainSelector.ui.tsx"],"names":["registerSimpleDialog","registerSimpleSheet","useMemo","useCallback","useState","useEffect","useConfig","useStorageChain","useChains","useWalletConnector","useLocalStorage","useAppContext","useOrderlyTheme","KEY","MAX_RECENT_CHAINS","useChainSelectorScript","options","networkId","bridgeLessOnly","setStorageChain","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","useTranslation","jsx","jsxs","chainSelectorVariants","ChainSelector","props","isWrongNetwork","variant","t","list","recentList","mainnetList","testnetList","icon","tip","e","RecentChainItem","selected","ChainItem","i18n","ChainSelectorWidget","state","ChainSelectorDialogId","ChainSelectorSheetId"],"mappings":"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","sourcesContent":["import { registerSimpleDialog, registerSimpleSheet } from \"@kodiak-finance/orderly-ui\";\nimport {\n useChainSelectorScript,\n UseChainSelectorScriptOptions,\n} from \"./chainSelector.script\";\nimport { ChainSelector, ChainSelectorProps } from \"./chainSelector.ui\";\nimport { i18n } from \"@kodiak-finance/orderly-i18n\";\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: () => i18n.t(\"connector.switchNetwork\"),\n variant: \"wide\",\n isWrongNetwork: true,\n});\n\nregisterSimpleSheet(ChainSelectorSheetId, ChainSelectorWidget, {\n title: () => i18n.t(\"connector.switchNetwork\"),\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, useStorageChain } from \"@kodiak-finance/orderly-hooks\";\nimport {\n useChains,\n useWalletConnector,\n useLocalStorage,\n} from \"@kodiak-finance/orderly-hooks\";\nimport { NetworkId } from \"@kodiak-finance/orderly-types\";\nimport { useAppContext } from \"@kodiak-finance/orderly-react-app\";\nimport { ChainType, TChainItem } from \"./type\";\nimport { useOrderlyTheme } from \"@kodiak-finance/orderly-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 const { setStorageChain } = useStorageChain();\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 setStorageChain(chain.id);\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 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 \"@kodiak-finance/orderly-ui\";\nimport { ChainType, TChainItem } from \"./type\";\nimport { UseChainSelectorScriptReturn } from \"./chainSelector.script\";\nimport { useTranslation } from \"@kodiak-finance/orderly-i18n\";\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 const { t } = useTranslation();\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={t(\"connector.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={t(\"connector.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 {t(\"connector.wrongNetwork.tooltip\")}\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 ADDED Viewed

@@ -0,0 +1,12 @@
+import { tv, registerSimpleDialog, registerSimpleSheet, useOrderlyTheme, Box, cn, Tabs, TabPanel, Flex, Text, ChainIcon } from '@kodiak-finance/orderly-ui';
+import { useState, useMemo, useCallback, useEffect } from 'react';
+import { useStorageChain, useConfig, useChains, useWalletConnector, useLocalStorage } from '@kodiak-finance/orderly-hooks';
+import { useAppContext } from '@kodiak-finance/orderly-react-app';
+import { i18n, useTranslation } from '@kodiak-finance/orderly-i18n';
+import { jsx, jsxs } from 'react/jsx-runtime';
+var te="orderly_selected_chains",ne=6,L=e=>{let{networkId:o,bridgeLessOnly:r}=e||{},{setStorageChain:l}=useStorageChain(),m=useConfig(),[n,{checkChainSupport:c}]=useChains(),{setChain:d,connectedChain:f}=useWalletConnector(),{onChainChanged:u,currentChainId:T,setCurrentChainId:s,wrongNetwork:C}=useAppContext(),[B,N]=useState(T),{getComponentTheme:U}=useOrderlyTheme(),h=useMemo(()=>({mainnet:(r?n.mainnet.filter(i=>i.network_infos.bridgeless):n.mainnet).map(i=>({name:i.network_infos.name,id:i.network_infos.chain_id,lowestFee:i.network_infos.bridgeless,isTestnet:false})),testnet:n.testnet.map(i=>({name:i.network_infos.name,id:i.network_infos.chain_id,lowestFee:i.network_infos.bridgeless,isTestnet:true}))}),[n,r]),x=useMemo(()=>!(U("chainSelector",{showTestnet:true}).showTestnet===false||!h.testnet.length),[h.testnet]),{recentChains:z,saveRecentChain:D}=oe(h),E=async t=>{if(f){let i=await d({chainId:t.id});return i&&{result:i,wrongNetwork:!c(t.id,m.get("networkId")),chainId:t.id}}return l(t.id),s(t.id),{result:true,wrongNetwork:false,chainId:t.id}},S=(t,i)=>{let v={isTestnet:t.isTestnet,isWalletConnected:i};e.onChainChangeAfter?.(t.id,v),u?.(t.id,v);},V=async t=>{N(t.id),e.onChainChangeBefore?.(t.id,{isTestnet:t.isTestnet});try{let i=await E?.(t);i?(e.resolve?.(i),e.close?.(),D(t),S(t,!0)):(N(void 0),S(t,!1));}catch{S(t,false);}},{selectedTab:H,onTabChange:K}=ie(h,T,C,x);return {recentChains:z,chains:h,selectChainId:B,onChainClick:V,selectedTab:H,onTabChange:K,showTestnet:x}};function ie(e,o,r,l){let[m,n]=useState("Mainnet"),c=d=>{n(d);};return useEffect(()=>{if(!l){n("Mainnet");return}if(o){if(e.mainnet?.some(u=>u.id===o)){n(r?"Testnet":"Mainnet");return}if(e.testnet?.some(u=>u.id===o)){n(r?"Mainnet":"Testnet");return}}},[o,e,r,l]),{selectedTab:m,onTabChange:c}}function oe(e){let[o,r]=useLocalStorage(te,[]),l=useMemo(()=>o?.map(n=>e.mainnet?.find(c=>c.id===parseInt(n))).filter(n=>!!n),[e,o]),m=useCallback(n=>{if(n.isTestnet)return;let c=o?.filter(d=>d!==n.id);c=[n.id,...c].slice(0,ne),r(c);},[o]);return {recentChains:l,saveRecentChain:m}}var ce=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}}),P=e=>{let{isWrongNetwork:o,variant:r="wide"}=e,{t:l}=useTranslation(),{list:m,recentList:n,mainnetList:c,testnetList:d,icon:f,item:u,tip:T}=ce({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:s=>e.onTabChange(s),children:[jsxs(TabPanel,{value:"Mainnet",title:l("connector.mainnet"),children:[!!e.recentChains?.length&&jsx(Flex,{gap:2,className:n(),children:e.recentChains?.map(s=>jsx(le,{item:s,onClick:()=>e.onChainClick(s),iconClassName:f()},s.id))}),jsx(Box,{r:"2xl",className:cn(m(),c()),children:e.chains.mainnet?.map(s=>{let C=e.selectChainId===s.id;return jsx(W,{selected:C,item:s,onClick:()=>e.onChainClick(s),className:u({selected:C})},s.id)})})]}),e.showTestnet&&jsx(TabPanel,{value:"Testnet",title:l("connector.testnet"),children:jsx(Box,{r:"2xl",className:cn(m(),d()),children:e.chains.testnet?.map(s=>{let C=e.selectChainId===s.id;return jsx(W,{selected:C,item:s,onClick:()=>e.onChainClick(s),className:u({selected:C})},s.id)})})})]}),o&&jsx(Box,{className:T(),children:jsx(Text,{color:"warning",size:"xs",children:l("connector.wrongNetwork.tooltip")})})]})},W=e=>{let{item:o}=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:o.id,size:"xs"}),jsx(Text,{size:"2xs",children:o.name})]}),e.selected&&jsx(Box,{gradient:"brand",r:"full",width:4,height:4})]})})},le=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 I=e=>{let o=L(e);return jsx(P,{...o,variant:e.variant,isWrongNetwork:e.isWrongNetwork})},F="ChainSelectorDialogId",A="ChainSelectorSheetId";registerSimpleDialog(F,I,{size:"lg",title:()=>i18n.t("connector.switchNetwork"),variant:"wide",isWrongNetwork:true});registerSimpleSheet(A,I,{title:()=>i18n.t("connector.switchNetwork"),classNames:{content:"!oui-bg-base-8",body:"!oui-bg-base-8"},variant:"compact",isWrongNetwork:true});
+export { F as ChainSelectorDialogId, A as ChainSelectorSheetId, I as ChainSelectorWidget };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,43 @@
+{
+  "name": "@kodiak-finance/orderly-ui-chain-selector",
+  "version": "2.7.4",
+  "description": "",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "keywords": [
+    "Orderly"
+  ],
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@kodiak-finance/orderly-i18n": "2.7.4",
+    "@kodiak-finance/orderly-types": "2.7.4",
+    "@kodiak-finance/orderly-hooks": "2.7.4",
+    "@kodiak-finance/orderly-ui": "2.7.4",
+    "@kodiak-finance/orderly-react-app": "2.7.4"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.39",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.1.6",
+    "tsup": "^7.1.0",
+    "tsconfig": "0.10.4"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}