@liberfi.io/ui-chain-select 0.1.1

package/dist/index.d.mts

@@ -0,0 +1,61 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _liberfi_io_types from '@liberfi.io/types';
+import { Chain, ChainNamespace } from '@liberfi.io/types';
+import * as jotai from 'jotai';
+import * as jotai_utils from 'jotai/utils';
+
+declare global {
+    interface Window {
+        __LIBERFI_VERSION__?: {
+            [key: string]: string;
+        };
+    }
+}
+declare const _default: "0.1.1";
+
+type ChainSelectUIProps = {
+    size?: "sm" | "md" | "lg";
+    chain?: Chain;
+    candidates?: Chain[];
+    onSelectChain?: (chain: Chain) => void;
+    className?: string;
+};
+declare function ChainSelectUI({ size, chain, candidates, onSelectChain, className, }: ChainSelectUIProps): react_jsx_runtime.JSX.Element;
+
+type ChainSelectMobileUIProps = {
+    size?: "sm" | "md" | "lg";
+    candidates: Chain[];
+    chain?: Chain;
+    onSelectChain?: (chain: Chain) => void;
+    className?: string;
+};
+declare function ChainSelectMobileUI({ size, candidates, chain, onSelectChain, className, }: ChainSelectMobileUIProps): react_jsx_runtime.JSX.Element;
+
+type ChainSelectDesktopUIProps = {
+    size?: "sm" | "md" | "lg";
+    candidates: Chain[];
+    chain?: Chain;
+    onSelectChain?: (chain: Chain) => void;
+    className?: string;
+};
+declare function ChainSelectDesktopUI({ size, candidates, chain, onSelectChain, className, }: ChainSelectDesktopUIProps): react_jsx_runtime.JSX.Element;
+
+type ChainSelectWidgetProps = {
+    size?: "sm" | "md" | "lg";
+    className?: string;
+};
+declare function ChainSelectWidget({ size, className }: ChainSelectWidgetProps): react_jsx_runtime.JSX.Element;
+
+declare function useSelectChain(): (chain: Chain) => void;
+
+declare function useCurrentChain(): {
+    chain: _liberfi_io_types.Chain;
+    chainNamespace: _liberfi_io_types.ChainNamespace;
+};
+
+/** current chain */
+declare const chainAtom: jotai.WritableAtom<Chain, [Chain | typeof jotai_utils.RESET | ((prev: Chain) => Chain | typeof jotai_utils.RESET)], void>;
+/** current chain namespace */
+declare const chainNamespaceAtom: jotai.WritableAtom<ChainNamespace, [typeof jotai_utils.RESET | ChainNamespace | ((prev: ChainNamespace) => typeof jotai_utils.RESET | ChainNamespace)], void>;
+
+export { ChainSelectDesktopUI, type ChainSelectDesktopUIProps, ChainSelectMobileUI, type ChainSelectMobileUIProps, ChainSelectUI, type ChainSelectUIProps, ChainSelectWidget, type ChainSelectWidgetProps, chainAtom, chainNamespaceAtom, useCurrentChain, useSelectChain, _default as version };

package/dist/index.d.ts

@@ -0,0 +1,61 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _liberfi_io_types from '@liberfi.io/types';
+import { Chain, ChainNamespace } from '@liberfi.io/types';
+import * as jotai from 'jotai';
+import * as jotai_utils from 'jotai/utils';
+
+declare global {
+    interface Window {
+        __LIBERFI_VERSION__?: {
+            [key: string]: string;
+        };
+    }
+}
+declare const _default: "0.1.1";
+
+type ChainSelectUIProps = {
+    size?: "sm" | "md" | "lg";
+    chain?: Chain;
+    candidates?: Chain[];
+    onSelectChain?: (chain: Chain) => void;
+    className?: string;
+};
+declare function ChainSelectUI({ size, chain, candidates, onSelectChain, className, }: ChainSelectUIProps): react_jsx_runtime.JSX.Element;
+
+type ChainSelectMobileUIProps = {
+    size?: "sm" | "md" | "lg";
+    candidates: Chain[];
+    chain?: Chain;
+    onSelectChain?: (chain: Chain) => void;
+    className?: string;
+};
+declare function ChainSelectMobileUI({ size, candidates, chain, onSelectChain, className, }: ChainSelectMobileUIProps): react_jsx_runtime.JSX.Element;
+
+type ChainSelectDesktopUIProps = {
+    size?: "sm" | "md" | "lg";
+    candidates: Chain[];
+    chain?: Chain;
+    onSelectChain?: (chain: Chain) => void;
+    className?: string;
+};
+declare function ChainSelectDesktopUI({ size, candidates, chain, onSelectChain, className, }: ChainSelectDesktopUIProps): react_jsx_runtime.JSX.Element;
+
+type ChainSelectWidgetProps = {
+    size?: "sm" | "md" | "lg";
+    className?: string;
+};
+declare function ChainSelectWidget({ size, className }: ChainSelectWidgetProps): react_jsx_runtime.JSX.Element;
+
+declare function useSelectChain(): (chain: Chain) => void;
+
+declare function useCurrentChain(): {
+    chain: _liberfi_io_types.Chain;
+    chainNamespace: _liberfi_io_types.ChainNamespace;
+};
+
+/** current chain */
+declare const chainAtom: jotai.WritableAtom<Chain, [Chain | typeof jotai_utils.RESET | ((prev: Chain) => Chain | typeof jotai_utils.RESET)], void>;
+/** current chain namespace */
+declare const chainNamespaceAtom: jotai.WritableAtom<ChainNamespace, [typeof jotai_utils.RESET | ChainNamespace | ((prev: ChainNamespace) => typeof jotai_utils.RESET | ChainNamespace)], void>;
+
+export { ChainSelectDesktopUI, type ChainSelectDesktopUIProps, ChainSelectMobileUI, type ChainSelectMobileUIProps, ChainSelectUI, type ChainSelectUIProps, ChainSelectWidget, type ChainSelectWidgetProps, chainAtom, chainNamespaceAtom, useCurrentChain, useSelectChain, _default as version };

package/dist/index.js

@@ -0,0 +1,2 @@
+'use strict';var types=require('@liberfi.io/types'),ui=require('@liberfi.io/ui'),react=require('react'),utils=require('@liberfi.io/utils'),jsxRuntime=require('react/jsx-runtime');typeof window<"u"&&(window.__LIBERFI_VERSION__=window.__LIBERFI_VERSION__||{},window.__LIBERFI_VERSION__["@liberfi.io/ui-chain-select"]="0.1.1");var B="0.1.1";function c({chain:e,className:n}){switch(e){case types.Chain.SOLANA:return jsxRuntime.jsx(ui.SolanaIcon,{className:n});case types.Chain.ETHEREUM:return jsxRuntime.jsx(ui.EthereumIcon,{className:n});case types.Chain.BINANCE:return jsxRuntime.jsx(ui.BinanceIcon,{className:n});default:return jsxRuntime.jsx(ui.Avatar,{className:n,name:utils.capitalizeString(utils.chainSlug(e)??"")})}}function w({size:e,candidates:n,chain:o=n[0],onSelectChain:t,className:i}){let{isOpen:a,onClose:S,onOpenChange:L}=ui.useDisclosure(),k=react.useCallback(r=>{t?.(r),S();},[t,S]);return jsxRuntime.jsxs(ui.Popover,{isOpen:a,onOpenChange:L,placement:"bottom-end",className:i,classNames:{content:"w-38 bg-content1 border border-border"},children:[jsxRuntime.jsx(ui.PopoverTrigger,{children:jsxRuntime.jsx(ui.Button,{size:e,variant:"bordered",radius:"full",startContent:jsxRuntime.jsx(c,{chain:o,className:ui.clsx(e==="sm"?"w-6 h-6":e==="md"||e===void 0?"w-7 h-7":"w-8 h-8")}),children:utils.capitalizeString(utils.chainSlug(o)??"")})}),jsxRuntime.jsx(ui.PopoverContent,{className:"w-40 flex flex-col gap-1 p-1 rounded-md",children:n.map(r=>jsxRuntime.jsxs("div",{className:ui.clsx("w-full h-10 hover:bg-content2/80 cursor-pointer rounded-md px-3","flex gap-2 items-center",r===o?"bg-content2 text-foreground":"text-neutral"),onClick:()=>k(r),children:[jsxRuntime.jsx(c,{chain:r,className:ui.clsx(e==="sm"?"w-6 h-6":e==="md"||e===void 0?"w-7 h-7":"w-8 h-8")}),utils.capitalizeString(utils.chainSlug(r)??"")]},r))})]})}function x({size:e,candidates:n,chain:o=types.Chain.SOLANA,onSelectChain:t,className:i}){return jsxRuntime.jsx("div",{className:ui.clsx("flex items-center gap-1",i),children:n.map(a=>jsxRuntime.jsx(ui.Button,{isIconOnly:true,radius:"full",className:ui.clsx("min-w-0 min-h-0",e==="sm"?"w-6 h-6":e==="md"||e===void 0?"w-7 h-7":"w-8 h-8",a===o?"bg-content1 scale-110 hover:opacity-100":"bg-transparent scale-90 opacity-50 hover:opacity-100"),onPress:()=>t?.(a),children:jsxRuntime.jsx(c,{chain:a,className:ui.clsx(e==="sm"?"w-5 h-5":e==="md"||e===void 0?"w-6 h-6":"w-7 h-7")})},a))})}var Y=[types.Chain.SOLANA,types.Chain.ETHEREUM,types.Chain.BINANCE];function E({size:e,chain:n=types.Chain.SOLANA,candidates:o=Y,onSelectChain:t,className:i}){let{isMobile:a}=ui.useScreen();return a?jsxRuntime.jsx(x,{size:e,chain:n,onSelectChain:t,candidates:o,className:i}):jsxRuntime.jsx(w,{size:e,chain:n,onSelectChain:t,candidates:o,className:i})}var h=ui.atomWithStorage("chain",types.Chain.SOLANA,void 0,{getOnInit:true}),l=ui.atomWithStorage("chainNamespace",types.ChainNamespace.SOLANA,void 0,{getOnInit:true});function P(){let e=ui.useSetAtom(h),n=ui.useSetAtom(l);return react.useCallback(o=>{switch(o){case types.Chain.ETHEREUM:case types.Chain.BINANCE:n(types.ChainNamespace.EVM);break;case types.Chain.SOLANA:n(types.ChainNamespace.SOLANA);break;default:throw new Error(`Unsupported chain: ${o}`)}e(o);},[e,n])}function y(){let e=ui.useAtomValue(h),n=ui.useAtomValue(l);return {chain:e,chainNamespace:n}}function Fe({size:e,className:n}){let{chain:o}=y(),t=P();return jsxRuntime.jsx(E,{chain:o,onSelectChain:t,size:e,className:n})}exports.ChainSelectDesktopUI=w;exports.ChainSelectMobileUI=x;exports.ChainSelectUI=E;exports.ChainSelectWidget=Fe;exports.chainAtom=h;exports.chainNamespaceAtom=l;exports.useCurrentChain=y;exports.useSelectChain=P;exports.version=B;//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/version.ts","../src/components/chain-avatar.tsx","../src/components/chain-select.desktop.ui.tsx","../src/components/chain-select.mobile.ui.tsx","../src/components/chain-select.ui.tsx","../src/states.ts","../src/hooks/useSelectChain.tsx","../src/hooks/useCurrentChain.tsx","../src/components/chain-select.widget.tsx"],"names":["version_default","ChainAvatar","chain","className","Chain","jsx","SolanaIcon","EthereumIcon","BinanceIcon","Avatar","capitalizeString","chainSlug","ChainSelectDesktopUI","size","candidates","onSelectChain","isOpen","onClose","onOpenChange","useDisclosure","handleSelect","useCallback","jsxs","Popover","PopoverTrigger","Button","clsx","PopoverContent","it","ChainSelectMobileUI","DEFAULT_CANDIDATES","ChainSelectUI","isMobile","useScreen","chainAtom","atomWithStorage","chainNamespaceAtom","ChainNamespace","useSelectChain","setChain","useSetAtom","setChainNamespace","useCurrentChain","useAtomValue","chainNamespace","ChainSelectWidget","selectChain"],"mappings":"mLAOI,OAAO,MAAA,CAAW,GAAA,GACpB,MAAA,CAAO,mBAAA,CAAsB,OAAO,mBAAA,EAAuB,EAAC,CAC5D,MAAA,CAAO,oBAAoB,6BAA6B,CAAA,CAAI,OAAA,CAAA,CAG9D,IAAOA,EAAQ,QCHR,SAASC,CAAAA,CAAY,CAAE,KAAA,CAAAC,CAAAA,CAAO,SAAA,CAAAC,CAAU,CAAA,CAAqB,CAClE,OAAQD,CAAAA,EACN,KAAKE,WAAAA,CAAM,MAAA,CACT,OAAOC,eAACC,aAAAA,CAAA,CAAW,SAAA,CAAWH,CAAAA,CAAW,EAC3C,KAAKC,WAAAA,CAAM,QAAA,CACT,OAAOC,eAACE,eAAAA,CAAA,CAAa,SAAA,CAAWJ,CAAAA,CAAW,EAC7C,KAAKC,WAAAA,CAAM,OAAA,CACT,OAAOC,eAACG,cAAAA,CAAA,CAAY,SAAA,CAAWL,CAAAA,CAAW,EAC5C,QACE,OACEE,cAAAA,CAACI,SAAAA,CAAA,CACC,SAAA,CAAWN,CAAAA,CACX,IAAA,CAAMO,uBAAiBC,eAAAA,CAAUT,CAAK,CAAA,EAAK,EAAE,EAC/C,CAEN,CACF,CCJO,SAASU,EAAqB,CACnC,IAAA,CAAAC,CAAAA,CACA,UAAA,CAAAC,EACA,KAAA,CAAAZ,CAAAA,CAAQY,CAAAA,CAAW,CAAC,EACpB,aAAA,CAAAC,CAAAA,CACA,SAAA,CAAAZ,CACF,EAA8B,CAC5B,GAAM,CAAE,MAAA,CAAAa,CAAAA,CAAQ,OAAA,CAAAC,CAAAA,CAAS,YAAA,CAAAC,CAAa,CAAA,CAAIC,gBAAAA,EAAc,CAElDC,CAAAA,CAAeC,kBAClBnB,CAAAA,EAAiB,CAChBa,CAAAA,GAAgBb,CAAK,EACrBe,CAAAA,GACF,CAAA,CACA,CAACF,EAAeE,CAAO,CACzB,CAAA,CAEA,OACEK,gBAACC,UAAAA,CAAA,CACC,MAAA,CAAQP,CAAAA,CACR,aAAcE,CAAAA,CACd,SAAA,CAAU,YAAA,CACV,SAAA,CAAWf,EACX,UAAA,CAAY,CAAE,OAAA,CAAS,uCAAwC,CAAA,CAE/D,QAAA,CAAA,CAAAE,cAAAA,CAACmB,iBAAAA,CAAA,CACC,QAAA,CAAAnB,cAAAA,CAACoB,SAAAA,CAAA,CACC,KAAMZ,CAAAA,CACN,OAAA,CAAQ,UAAA,CACR,MAAA,CAAO,OACP,YAAA,CACER,cAAAA,CAACJ,CAAAA,CAAA,CACC,MAAOC,CAAAA,CACP,SAAA,CAAWwB,OAAAA,CACTb,CAAAA,GAAS,KACL,SAAA,CACAA,CAAAA,GAAS,IAAA,EAAQA,CAAAA,GAAS,OACxB,SAAA,CACA,SACR,CAAA,CACF,CAAA,CAGD,SAAAH,sBAAAA,CAAiBC,eAAAA,CAAUT,CAAK,CAAA,EAAK,EAAE,CAAA,CAC1C,CAAA,CACF,CAAA,CACAG,eAACsB,iBAAAA,CAAA,CAAe,SAAA,CAAU,yCAAA,CACvB,SAAAb,CAAAA,CAAW,GAAA,CAAKc,CAAAA,EACfN,eAAAA,CAAC,OAEC,SAAA,CAAWI,OAAAA,CACT,iEAAA,CACA,yBAAA,CACAE,IAAO1B,CAAAA,CAAQ,6BAAA,CAAgC,cACjD,CAAA,CACA,QAAS,IAAMkB,CAAAA,CAAaQ,CAAE,CAAA,CAE9B,UAAAvB,cAAAA,CAACJ,CAAAA,CAAA,CACC,KAAA,CAAO2B,EACP,SAAA,CAAWF,OAAAA,CACTb,CAAAA,GAAS,IAAA,CACL,SAAA,CACAA,CAAAA,GAAS,IAAA,EAAQA,CAAAA,GAAS,OACxB,SAAA,CACA,SACR,CAAA,CACF,CAAA,CACCH,uBAAiBC,eAAAA,CAAUiB,CAAE,CAAA,EAAK,EAAE,IAlBhCA,CAmBP,CACD,CAAA,CACH,CAAA,CAAA,CACF,CAEJ,CClFO,SAASC,CAAAA,CAAoB,CAClC,IAAA,CAAAhB,CAAAA,CACA,UAAA,CAAAC,CAAAA,CACA,KAAA,CAAAZ,CAAAA,CAAQE,YAAM,MAAA,CACd,aAAA,CAAAW,CAAAA,CACA,SAAA,CAAAZ,CACF,CAAA,CAA6B,CAC3B,OACEE,cAAAA,CAAC,OAAI,SAAA,CAAWqB,OAAAA,CAAK,yBAAA,CAA2BvB,CAAS,EACtD,QAAA,CAAAW,CAAAA,CAAW,GAAA,CAAKc,CAAAA,EACfvB,eAACoB,SAAAA,CAAA,CACC,UAAA,CAAU,IAAA,CACV,OAAO,MAAA,CACP,SAAA,CAAWC,OAAAA,CACT,iBAAA,CACAb,IAAS,IAAA,CACL,SAAA,CACAA,CAAAA,GAAS,IAAA,EAAQA,CAAAA,GAAS,MAAA,CACxB,SAAA,CACA,SAAA,CACNe,IAAO1B,CAAAA,CACH,yCAAA,CACA,sDACN,CAAA,CAEA,QAAS,IAAMa,CAAAA,GAAgBa,CAAE,CAAA,CAEjC,SAAAvB,cAAAA,CAACJ,CAAAA,CAAA,CACC,KAAA,CAAO2B,EACP,SAAA,CAAWF,OAAAA,CACTb,CAAAA,GAAS,IAAA,CACL,UACAA,CAAAA,GAAS,IAAA,EAAQA,CAAAA,GAAS,MAAA,CACxB,UACA,SACR,CAAA,CACF,CAAA,CAAA,CAZKe,CAaP,CACD,CAAA,CACH,CAEJ,CChDA,IAAME,CAAAA,CAAqB,CAAC1B,WAAAA,CAAM,MAAA,CAAQA,WAAAA,CAAM,QAAA,CAAUA,YAAM,OAAO,CAAA,CAUhE,SAAS2B,CAAAA,CAAc,CAC5B,IAAA,CAAAlB,CAAAA,CACA,KAAA,CAAAX,CAAAA,CAAQE,YAAM,MAAA,CACd,UAAA,CAAAU,CAAAA,CAAagB,CAAAA,CACb,cAAAf,CAAAA,CACA,SAAA,CAAAZ,CACF,CAAA,CAAuB,CACrB,GAAM,CAAE,QAAA,CAAA6B,CAAS,EAAIC,YAAAA,EAAU,CAE/B,OAAID,CAAAA,CAEA3B,cAAAA,CAACwB,CAAAA,CAAA,CACC,IAAA,CAAMhB,EACN,KAAA,CAAOX,CAAAA,CACP,aAAA,CAAea,CAAAA,CACf,WAAYD,CAAAA,CACZ,SAAA,CAAWX,CAAAA,CACb,CAAA,CAIAE,eAACO,CAAAA,CAAA,CACC,IAAA,CAAMC,CAAAA,CACN,MAAOX,CAAAA,CACP,aAAA,CAAea,CAAAA,CACf,UAAA,CAAYD,EACZ,SAAA,CAAWX,CAAAA,CACb,CAGN,KCzCa+B,CAAAA,CAAYC,kBAAAA,CACvB,OAAA,CACA/B,WAAAA,CAAM,OACN,MAAA,CACA,CACE,SAAA,CAAW,IACb,CACF,CAAA,CAGagC,CAAAA,CAAqBD,kBAAAA,CAChC,gBAAA,CACAE,qBAAe,MAAA,CACf,MAAA,CACA,CACE,SAAA,CAAW,IACb,CACF,EChBO,SAASC,CAAAA,EAAyC,CACvD,IAAMC,CAAAA,CAAWC,aAAAA,CAAWN,CAAS,CAAA,CAC/BO,CAAAA,CAAoBD,aAAAA,CAAWJ,CAAkB,EAEvD,OAAOf,iBAAAA,CACJnB,CAAAA,EAAiB,CAChB,OAAQA,CAAAA,EACN,KAAKE,WAAAA,CAAM,SACX,KAAKA,WAAAA,CAAM,OAAA,CACTqC,CAAAA,CAAkBJ,qBAAe,GAAG,CAAA,CACpC,MACF,KAAKjC,YAAM,MAAA,CACTqC,CAAAA,CAAkBJ,oBAAAA,CAAe,MAAM,EACvC,MACF,QACE,MAAM,IAAI,KAAA,CAAM,CAAA,mBAAA,EAAsBnC,CAAK,CAAA,CAAE,CACjD,CACAqC,CAAAA,CAASrC,CAAK,EAChB,EACA,CAACqC,CAAAA,CAAUE,CAAiB,CAC9B,CACF,CCvBO,SAASC,CAAAA,EAAkB,CAChC,IAAMxC,EAAQyC,eAAAA,CAAaT,CAAS,CAAA,CAC9BU,CAAAA,CAAiBD,gBAAaP,CAAkB,CAAA,CACtD,OAAO,CAAE,MAAAlC,CAAAA,CAAO,cAAA,CAAA0C,CAAe,CACjC,CCCO,SAASC,EAAAA,CAAkB,CAAE,IAAA,CAAAhC,CAAAA,CAAM,UAAAV,CAAU,CAAA,CAA2B,CAC7E,GAAM,CAAE,KAAA,CAAAD,CAAM,CAAA,CAAIwC,CAAAA,GACZI,CAAAA,CAAcR,CAAAA,EAAe,CACnC,OACEjC,eAAC0B,CAAAA,CAAA,CACC,KAAA,CAAO7B,CAAAA,CACP,cAAe4C,CAAAA,CACf,IAAA,CAAMjC,CAAAA,CACN,SAAA,CAAWV,EACb,CAEJ","file":"index.js","sourcesContent":["declare global {\n  interface Window {\n    __LIBERFI_VERSION__?: {\n      [key: string]: string;\n    };\n  }\n}\nif (typeof window !== \"undefined\") {\n  window.__LIBERFI_VERSION__ = window.__LIBERFI_VERSION__ || {};\n  window.__LIBERFI_VERSION__[\"@liberfi.io/ui-chain-select\"] = \"0.1.1\";\n}\n\nexport default \"0.1.1\";\n","import { Chain } from \"@liberfi.io/types\";\nimport { Avatar, BinanceIcon, EthereumIcon, SolanaIcon } from \"@liberfi.io/ui\";\nimport { capitalizeString, chainSlug } from \"@liberfi.io/utils\";\n\nexport type ChainAvatarProps = {\n  chain: Chain;\n  className?: string;\n};\n\nexport function ChainAvatar({ chain, className }: ChainAvatarProps) {\n  switch (chain) {\n    case Chain.SOLANA:\n      return <SolanaIcon className={className} />;\n    case Chain.ETHEREUM:\n      return <EthereumIcon className={className} />;\n    case Chain.BINANCE:\n      return <BinanceIcon className={className} />;\n    default:\n      return (\n        <Avatar\n          className={className}\n          name={capitalizeString(chainSlug(chain) ?? \"\")}\n        />\n      );\n  }\n}\n","import { useCallback } from \"react\";\nimport { Chain } from \"@liberfi.io/types\";\nimport {\n  Button,\n  clsx,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  useDisclosure,\n} from \"@liberfi.io/ui\";\nimport { capitalizeString, chainSlug } from \"@liberfi.io/utils\";\nimport { ChainAvatar } from \"./chain-avatar\";\n\nexport type ChainSelectDesktopUIProps = {\n  size?: \"sm\" | \"md\" | \"lg\";\n  candidates: Chain[];\n  chain?: Chain;\n  onSelectChain?: (chain: Chain) => void;\n  className?: string;\n};\n\nexport function ChainSelectDesktopUI({\n  size,\n  candidates,\n  chain = candidates[0],\n  onSelectChain,\n  className,\n}: ChainSelectDesktopUIProps) {\n  const { isOpen, onClose, onOpenChange } = useDisclosure();\n\n  const handleSelect = useCallback(\n    (chain: Chain) => {\n      onSelectChain?.(chain);\n      onClose();\n    },\n    [onSelectChain, onClose],\n  );\n\n  return (\n    <Popover\n      isOpen={isOpen}\n      onOpenChange={onOpenChange}\n      placement=\"bottom-end\"\n      className={className}\n      classNames={{ content: \"w-38 bg-content1 border border-border\" }}\n    >\n      <PopoverTrigger>\n        <Button\n          size={size}\n          variant=\"bordered\"\n          radius=\"full\"\n          startContent={\n            <ChainAvatar\n              chain={chain}\n              className={clsx(\n                size === \"sm\"\n                  ? \"w-6 h-6\"\n                  : size === \"md\" || size === undefined\n                    ? \"w-7 h-7\"\n                    : \"w-8 h-8\",\n              )}\n            />\n          }\n        >\n          {capitalizeString(chainSlug(chain) ?? \"\")}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-40 flex flex-col gap-1 p-1 rounded-md\">\n        {candidates.map((it) => (\n          <div\n            key={it}\n            className={clsx(\n              \"w-full h-10 hover:bg-content2/80 cursor-pointer rounded-md px-3\",\n              \"flex gap-2 items-center\",\n              it === chain ? \"bg-content2 text-foreground\" : \"text-neutral\",\n            )}\n            onClick={() => handleSelect(it)}\n          >\n            <ChainAvatar\n              chain={it}\n              className={clsx(\n                size === \"sm\"\n                  ? \"w-6 h-6\"\n                  : size === \"md\" || size === undefined\n                    ? \"w-7 h-7\"\n                    : \"w-8 h-8\",\n              )}\n            />\n            {capitalizeString(chainSlug(it) ?? \"\")}\n          </div>\n        ))}\n      </PopoverContent>\n    </Popover>\n  );\n}\n","import { Chain } from \"@liberfi.io/types\";\nimport { Button, clsx } from \"@liberfi.io/ui\";\nimport { ChainAvatar } from \"./chain-avatar\";\n\nexport type ChainSelectMobileUIProps = {\n  size?: \"sm\" | \"md\" | \"lg\";\n  candidates: Chain[];\n  chain?: Chain;\n  onSelectChain?: (chain: Chain) => void;\n  className?: string;\n};\n\nexport function ChainSelectMobileUI({\n  size,\n  candidates,\n  chain = Chain.SOLANA,\n  onSelectChain,\n  className,\n}: ChainSelectMobileUIProps) {\n  return (\n    <div className={clsx(\"flex items-center gap-1\", className)}>\n      {candidates.map((it) => (\n        <Button\n          isIconOnly\n          radius=\"full\"\n          className={clsx(\n            \"min-w-0 min-h-0\",\n            size === \"sm\"\n              ? \"w-6 h-6\"\n              : size === \"md\" || size === undefined\n                ? \"w-7 h-7\"\n                : \"w-8 h-8\",\n            it === chain\n              ? \"bg-content1 scale-110 hover:opacity-100\"\n              : \"bg-transparent scale-90 opacity-50 hover:opacity-100\",\n          )}\n          key={it}\n          onPress={() => onSelectChain?.(it)}\n        >\n          <ChainAvatar\n            chain={it}\n            className={clsx(\n              size === \"sm\"\n                ? \"w-5 h-5\"\n                : size === \"md\" || size === undefined\n                  ? \"w-6 h-6\"\n                  : \"w-7 h-7\",\n            )}\n          />\n        </Button>\n      ))}\n    </div>\n  );\n}\n","import { Chain } from \"@liberfi.io/types\";\nimport { useScreen } from \"@liberfi.io/ui\";\nimport { ChainSelectDesktopUI } from \"./chain-select.desktop.ui\";\nimport { ChainSelectMobileUI } from \"./chain-select.mobile.ui\";\n\nconst DEFAULT_CANDIDATES = [Chain.SOLANA, Chain.ETHEREUM, Chain.BINANCE];\n\nexport type ChainSelectUIProps = {\n  size?: \"sm\" | \"md\" | \"lg\";\n  chain?: Chain;\n  candidates?: Chain[];\n  onSelectChain?: (chain: Chain) => void;\n  className?: string;\n};\n\nexport function ChainSelectUI({\n  size,\n  chain = Chain.SOLANA,\n  candidates = DEFAULT_CANDIDATES,\n  onSelectChain,\n  className,\n}: ChainSelectUIProps) {\n  const { isMobile } = useScreen();\n\n  if (isMobile) {\n    return (\n      <ChainSelectMobileUI\n        size={size}\n        chain={chain}\n        onSelectChain={onSelectChain}\n        candidates={candidates}\n        className={className}\n      />\n    );\n  } else {\n    return (\n      <ChainSelectDesktopUI\n        size={size}\n        chain={chain}\n        onSelectChain={onSelectChain}\n        candidates={candidates}\n        className={className}\n      />\n    );\n  }\n}\n","import { Chain, ChainNamespace } from \"@liberfi.io/types\";\nimport { atomWithStorage } from \"@liberfi.io/ui\";\n\n/** current chain */\nexport const chainAtom = atomWithStorage<Chain>(\n  \"chain\",\n  Chain.SOLANA,\n  undefined,\n  {\n    getOnInit: true,\n  },\n);\n\n/** current chain namespace */\nexport const chainNamespaceAtom = atomWithStorage<ChainNamespace>(\n  \"chainNamespace\",\n  ChainNamespace.SOLANA,\n  undefined,\n  {\n    getOnInit: true,\n  },\n);\n","import { useCallback } from \"react\";\nimport { Chain, ChainNamespace } from \"@liberfi.io/types\";\nimport { useSetAtom } from \"@liberfi.io/ui\";\nimport { chainAtom, chainNamespaceAtom } from \"../states\";\n\nexport function useSelectChain(): (chain: Chain) => void {\n  const setChain = useSetAtom(chainAtom);\n  const setChainNamespace = useSetAtom(chainNamespaceAtom);\n\n  return useCallback(\n    (chain: Chain) => {\n      switch (chain) {\n        case Chain.ETHEREUM:\n        case Chain.BINANCE:\n          setChainNamespace(ChainNamespace.EVM);\n          break;\n        case Chain.SOLANA:\n          setChainNamespace(ChainNamespace.SOLANA);\n          break;\n        default:\n          throw new Error(`Unsupported chain: ${chain}`);\n      }\n      setChain(chain);\n    },\n    [setChain, setChainNamespace],\n  );\n}\n","import { useAtomValue } from \"@liberfi.io/ui\";\nimport { chainAtom, chainNamespaceAtom } from \"../states\";\n\nexport function useCurrentChain() {\n  const chain = useAtomValue(chainAtom);\n  const chainNamespace = useAtomValue(chainNamespaceAtom);\n  return { chain, chainNamespace };\n}\n","import { useSelectChain, useCurrentChain } from \"../hooks\";\nimport { ChainSelectUI } from \"./chain-select.ui\";\n\nexport type ChainSelectWidgetProps = {\n  size?: \"sm\" | \"md\" | \"lg\";\n  className?: string;\n};\n\nexport function ChainSelectWidget({ size, className }: ChainSelectWidgetProps) {\n  const { chain } = useCurrentChain();\n  const selectChain = useSelectChain();\n  return (\n    <ChainSelectUI\n      chain={chain}\n      onSelectChain={selectChain}\n      size={size}\n      className={className}\n    />\n  );\n}\n"]}

package/dist/index.mjs

@@ -0,0 +1,2 @@
+import {Chain,ChainNamespace}from'@liberfi.io/types';import {atomWithStorage,useDisclosure,Popover,PopoverTrigger,Button,clsx,PopoverContent,useScreen,useSetAtom,useAtomValue,Avatar,BinanceIcon,EthereumIcon,SolanaIcon}from'@liberfi.io/ui';import {useCallback}from'react';import {capitalizeString,chainSlug}from'@liberfi.io/utils';import {jsxs,jsx}from'react/jsx-runtime';typeof window<"u"&&(window.__LIBERFI_VERSION__=window.__LIBERFI_VERSION__||{},window.__LIBERFI_VERSION__["@liberfi.io/ui-chain-select"]="0.1.1");var B="0.1.1";function c({chain:e,className:n}){switch(e){case Chain.SOLANA:return jsx(SolanaIcon,{className:n});case Chain.ETHEREUM:return jsx(EthereumIcon,{className:n});case Chain.BINANCE:return jsx(BinanceIcon,{className:n});default:return jsx(Avatar,{className:n,name:capitalizeString(chainSlug(e)??"")})}}function w({size:e,candidates:n,chain:o=n[0],onSelectChain:t,className:i}){let{isOpen:a,onClose:S,onOpenChange:L}=useDisclosure(),k=useCallback(r=>{t?.(r),S();},[t,S]);return jsxs(Popover,{isOpen:a,onOpenChange:L,placement:"bottom-end",className:i,classNames:{content:"w-38 bg-content1 border border-border"},children:[jsx(PopoverTrigger,{children:jsx(Button,{size:e,variant:"bordered",radius:"full",startContent:jsx(c,{chain:o,className:clsx(e==="sm"?"w-6 h-6":e==="md"||e===void 0?"w-7 h-7":"w-8 h-8")}),children:capitalizeString(chainSlug(o)??"")})}),jsx(PopoverContent,{className:"w-40 flex flex-col gap-1 p-1 rounded-md",children:n.map(r=>jsxs("div",{className:clsx("w-full h-10 hover:bg-content2/80 cursor-pointer rounded-md px-3","flex gap-2 items-center",r===o?"bg-content2 text-foreground":"text-neutral"),onClick:()=>k(r),children:[jsx(c,{chain:r,className:clsx(e==="sm"?"w-6 h-6":e==="md"||e===void 0?"w-7 h-7":"w-8 h-8")}),capitalizeString(chainSlug(r)??"")]},r))})]})}function x({size:e,candidates:n,chain:o=Chain.SOLANA,onSelectChain:t,className:i}){return jsx("div",{className:clsx("flex items-center gap-1",i),children:n.map(a=>jsx(Button,{isIconOnly:true,radius:"full",className:clsx("min-w-0 min-h-0",e==="sm"?"w-6 h-6":e==="md"||e===void 0?"w-7 h-7":"w-8 h-8",a===o?"bg-content1 scale-110 hover:opacity-100":"bg-transparent scale-90 opacity-50 hover:opacity-100"),onPress:()=>t?.(a),children:jsx(c,{chain:a,className:clsx(e==="sm"?"w-5 h-5":e==="md"||e===void 0?"w-6 h-6":"w-7 h-7")})},a))})}var Y=[Chain.SOLANA,Chain.ETHEREUM,Chain.BINANCE];function E({size:e,chain:n=Chain.SOLANA,candidates:o=Y,onSelectChain:t,className:i}){let{isMobile:a}=useScreen();return a?jsx(x,{size:e,chain:n,onSelectChain:t,candidates:o,className:i}):jsx(w,{size:e,chain:n,onSelectChain:t,candidates:o,className:i})}var h=atomWithStorage("chain",Chain.SOLANA,void 0,{getOnInit:true}),l=atomWithStorage("chainNamespace",ChainNamespace.SOLANA,void 0,{getOnInit:true});function P(){let e=useSetAtom(h),n=useSetAtom(l);return useCallback(o=>{switch(o){case Chain.ETHEREUM:case Chain.BINANCE:n(ChainNamespace.EVM);break;case Chain.SOLANA:n(ChainNamespace.SOLANA);break;default:throw new Error(`Unsupported chain: ${o}`)}e(o);},[e,n])}function y(){let e=useAtomValue(h),n=useAtomValue(l);return {chain:e,chainNamespace:n}}function Fe({size:e,className:n}){let{chain:o}=y(),t=P();return jsx(E,{chain:o,onSelectChain:t,size:e,className:n})}export{w as ChainSelectDesktopUI,x as ChainSelectMobileUI,E as ChainSelectUI,Fe as ChainSelectWidget,h as chainAtom,l as chainNamespaceAtom,y as useCurrentChain,P as useSelectChain,B as version};//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/version.ts","../src/components/chain-avatar.tsx","../src/components/chain-select.desktop.ui.tsx","../src/components/chain-select.mobile.ui.tsx","../src/components/chain-select.ui.tsx","../src/states.ts","../src/hooks/useSelectChain.tsx","../src/hooks/useCurrentChain.tsx","../src/components/chain-select.widget.tsx"],"names":["version_default","ChainAvatar","chain","className","Chain","jsx","SolanaIcon","EthereumIcon","BinanceIcon","Avatar","capitalizeString","chainSlug","ChainSelectDesktopUI","size","candidates","onSelectChain","isOpen","onClose","onOpenChange","useDisclosure","handleSelect","useCallback","jsxs","Popover","PopoverTrigger","Button","clsx","PopoverContent","it","ChainSelectMobileUI","DEFAULT_CANDIDATES","ChainSelectUI","isMobile","useScreen","chainAtom","atomWithStorage","chainNamespaceAtom","ChainNamespace","useSelectChain","setChain","useSetAtom","setChainNamespace","useCurrentChain","useAtomValue","chainNamespace","ChainSelectWidget","selectChain"],"mappings":"mXAOI,OAAO,MAAA,CAAW,GAAA,GACpB,MAAA,CAAO,mBAAA,CAAsB,OAAO,mBAAA,EAAuB,EAAC,CAC5D,MAAA,CAAO,oBAAoB,6BAA6B,CAAA,CAAI,OAAA,CAAA,CAG9D,IAAOA,EAAQ,QCHR,SAASC,CAAAA,CAAY,CAAE,KAAA,CAAAC,CAAAA,CAAO,SAAA,CAAAC,CAAU,CAAA,CAAqB,CAClE,OAAQD,CAAAA,EACN,KAAKE,KAAAA,CAAM,MAAA,CACT,OAAOC,IAACC,UAAAA,CAAA,CAAW,SAAA,CAAWH,CAAAA,CAAW,EAC3C,KAAKC,KAAAA,CAAM,QAAA,CACT,OAAOC,IAACE,YAAAA,CAAA,CAAa,SAAA,CAAWJ,CAAAA,CAAW,EAC7C,KAAKC,KAAAA,CAAM,OAAA,CACT,OAAOC,IAACG,WAAAA,CAAA,CAAY,SAAA,CAAWL,CAAAA,CAAW,EAC5C,QACE,OACEE,GAAAA,CAACI,MAAAA,CAAA,CACC,SAAA,CAAWN,CAAAA,CACX,IAAA,CAAMO,iBAAiBC,SAAAA,CAAUT,CAAK,CAAA,EAAK,EAAE,EAC/C,CAEN,CACF,CCJO,SAASU,EAAqB,CACnC,IAAA,CAAAC,CAAAA,CACA,UAAA,CAAAC,EACA,KAAA,CAAAZ,CAAAA,CAAQY,CAAAA,CAAW,CAAC,EACpB,aAAA,CAAAC,CAAAA,CACA,SAAA,CAAAZ,CACF,EAA8B,CAC5B,GAAM,CAAE,MAAA,CAAAa,CAAAA,CAAQ,OAAA,CAAAC,CAAAA,CAAS,YAAA,CAAAC,CAAa,CAAA,CAAIC,aAAAA,EAAc,CAElDC,CAAAA,CAAeC,YAClBnB,CAAAA,EAAiB,CAChBa,CAAAA,GAAgBb,CAAK,EACrBe,CAAAA,GACF,CAAA,CACA,CAACF,EAAeE,CAAO,CACzB,CAAA,CAEA,OACEK,KAACC,OAAAA,CAAA,CACC,MAAA,CAAQP,CAAAA,CACR,aAAcE,CAAAA,CACd,SAAA,CAAU,YAAA,CACV,SAAA,CAAWf,EACX,UAAA,CAAY,CAAE,OAAA,CAAS,uCAAwC,CAAA,CAE/D,QAAA,CAAA,CAAAE,GAAAA,CAACmB,cAAAA,CAAA,CACC,QAAA,CAAAnB,GAAAA,CAACoB,MAAAA,CAAA,CACC,KAAMZ,CAAAA,CACN,OAAA,CAAQ,UAAA,CACR,MAAA,CAAO,OACP,YAAA,CACER,GAAAA,CAACJ,CAAAA,CAAA,CACC,MAAOC,CAAAA,CACP,SAAA,CAAWwB,IAAAA,CACTb,CAAAA,GAAS,KACL,SAAA,CACAA,CAAAA,GAAS,IAAA,EAAQA,CAAAA,GAAS,OACxB,SAAA,CACA,SACR,CAAA,CACF,CAAA,CAGD,SAAAH,gBAAAA,CAAiBC,SAAAA,CAAUT,CAAK,CAAA,EAAK,EAAE,CAAA,CAC1C,CAAA,CACF,CAAA,CACAG,IAACsB,cAAAA,CAAA,CAAe,SAAA,CAAU,yCAAA,CACvB,SAAAb,CAAAA,CAAW,GAAA,CAAKc,CAAAA,EACfN,IAAAA,CAAC,OAEC,SAAA,CAAWI,IAAAA,CACT,iEAAA,CACA,yBAAA,CACAE,IAAO1B,CAAAA,CAAQ,6BAAA,CAAgC,cACjD,CAAA,CACA,QAAS,IAAMkB,CAAAA,CAAaQ,CAAE,CAAA,CAE9B,UAAAvB,GAAAA,CAACJ,CAAAA,CAAA,CACC,KAAA,CAAO2B,EACP,SAAA,CAAWF,IAAAA,CACTb,CAAAA,GAAS,IAAA,CACL,SAAA,CACAA,CAAAA,GAAS,IAAA,EAAQA,CAAAA,GAAS,OACxB,SAAA,CACA,SACR,CAAA,CACF,CAAA,CACCH,iBAAiBC,SAAAA,CAAUiB,CAAE,CAAA,EAAK,EAAE,IAlBhCA,CAmBP,CACD,CAAA,CACH,CAAA,CAAA,CACF,CAEJ,CClFO,SAASC,CAAAA,CAAoB,CAClC,IAAA,CAAAhB,CAAAA,CACA,UAAA,CAAAC,CAAAA,CACA,KAAA,CAAAZ,CAAAA,CAAQE,MAAM,MAAA,CACd,aAAA,CAAAW,CAAAA,CACA,SAAA,CAAAZ,CACF,CAAA,CAA6B,CAC3B,OACEE,GAAAA,CAAC,OAAI,SAAA,CAAWqB,IAAAA,CAAK,yBAAA,CAA2BvB,CAAS,EACtD,QAAA,CAAAW,CAAAA,CAAW,GAAA,CAAKc,CAAAA,EACfvB,IAACoB,MAAAA,CAAA,CACC,UAAA,CAAU,IAAA,CACV,OAAO,MAAA,CACP,SAAA,CAAWC,IAAAA,CACT,iBAAA,CACAb,IAAS,IAAA,CACL,SAAA,CACAA,CAAAA,GAAS,IAAA,EAAQA,CAAAA,GAAS,MAAA,CACxB,SAAA,CACA,SAAA,CACNe,IAAO1B,CAAAA,CACH,yCAAA,CACA,sDACN,CAAA,CAEA,QAAS,IAAMa,CAAAA,GAAgBa,CAAE,CAAA,CAEjC,SAAAvB,GAAAA,CAACJ,CAAAA,CAAA,CACC,KAAA,CAAO2B,EACP,SAAA,CAAWF,IAAAA,CACTb,CAAAA,GAAS,IAAA,CACL,UACAA,CAAAA,GAAS,IAAA,EAAQA,CAAAA,GAAS,MAAA,CACxB,UACA,SACR,CAAA,CACF,CAAA,CAAA,CAZKe,CAaP,CACD,CAAA,CACH,CAEJ,CChDA,IAAME,CAAAA,CAAqB,CAAC1B,KAAAA,CAAM,MAAA,CAAQA,KAAAA,CAAM,QAAA,CAAUA,MAAM,OAAO,CAAA,CAUhE,SAAS2B,CAAAA,CAAc,CAC5B,IAAA,CAAAlB,CAAAA,CACA,KAAA,CAAAX,CAAAA,CAAQE,MAAM,MAAA,CACd,UAAA,CAAAU,CAAAA,CAAagB,CAAAA,CACb,cAAAf,CAAAA,CACA,SAAA,CAAAZ,CACF,CAAA,CAAuB,CACrB,GAAM,CAAE,QAAA,CAAA6B,CAAS,EAAIC,SAAAA,EAAU,CAE/B,OAAID,CAAAA,CAEA3B,GAAAA,CAACwB,CAAAA,CAAA,CACC,IAAA,CAAMhB,EACN,KAAA,CAAOX,CAAAA,CACP,aAAA,CAAea,CAAAA,CACf,WAAYD,CAAAA,CACZ,SAAA,CAAWX,CAAAA,CACb,CAAA,CAIAE,IAACO,CAAAA,CAAA,CACC,IAAA,CAAMC,CAAAA,CACN,MAAOX,CAAAA,CACP,aAAA,CAAea,CAAAA,CACf,UAAA,CAAYD,EACZ,SAAA,CAAWX,CAAAA,CACb,CAGN,KCzCa+B,CAAAA,CAAYC,eAAAA,CACvB,OAAA,CACA/B,KAAAA,CAAM,OACN,MAAA,CACA,CACE,SAAA,CAAW,IACb,CACF,CAAA,CAGagC,CAAAA,CAAqBD,eAAAA,CAChC,gBAAA,CACAE,eAAe,MAAA,CACf,MAAA,CACA,CACE,SAAA,CAAW,IACb,CACF,EChBO,SAASC,CAAAA,EAAyC,CACvD,IAAMC,CAAAA,CAAWC,UAAAA,CAAWN,CAAS,CAAA,CAC/BO,CAAAA,CAAoBD,UAAAA,CAAWJ,CAAkB,EAEvD,OAAOf,WAAAA,CACJnB,CAAAA,EAAiB,CAChB,OAAQA,CAAAA,EACN,KAAKE,KAAAA,CAAM,SACX,KAAKA,KAAAA,CAAM,OAAA,CACTqC,CAAAA,CAAkBJ,eAAe,GAAG,CAAA,CACpC,MACF,KAAKjC,MAAM,MAAA,CACTqC,CAAAA,CAAkBJ,cAAAA,CAAe,MAAM,EACvC,MACF,QACE,MAAM,IAAI,KAAA,CAAM,CAAA,mBAAA,EAAsBnC,CAAK,CAAA,CAAE,CACjD,CACAqC,CAAAA,CAASrC,CAAK,EAChB,EACA,CAACqC,CAAAA,CAAUE,CAAiB,CAC9B,CACF,CCvBO,SAASC,CAAAA,EAAkB,CAChC,IAAMxC,EAAQyC,YAAAA,CAAaT,CAAS,CAAA,CAC9BU,CAAAA,CAAiBD,aAAaP,CAAkB,CAAA,CACtD,OAAO,CAAE,MAAAlC,CAAAA,CAAO,cAAA,CAAA0C,CAAe,CACjC,CCCO,SAASC,EAAAA,CAAkB,CAAE,IAAA,CAAAhC,CAAAA,CAAM,UAAAV,CAAU,CAAA,CAA2B,CAC7E,GAAM,CAAE,KAAA,CAAAD,CAAM,CAAA,CAAIwC,CAAAA,GACZI,CAAAA,CAAcR,CAAAA,EAAe,CACnC,OACEjC,IAAC0B,CAAAA,CAAA,CACC,KAAA,CAAO7B,CAAAA,CACP,cAAe4C,CAAAA,CACf,IAAA,CAAMjC,CAAAA,CACN,SAAA,CAAWV,EACb,CAEJ","file":"index.mjs","sourcesContent":["declare global {\n  interface Window {\n    __LIBERFI_VERSION__?: {\n      [key: string]: string;\n    };\n  }\n}\nif (typeof window !== \"undefined\") {\n  window.__LIBERFI_VERSION__ = window.__LIBERFI_VERSION__ || {};\n  window.__LIBERFI_VERSION__[\"@liberfi.io/ui-chain-select\"] = \"0.1.1\";\n}\n\nexport default \"0.1.1\";\n","import { Chain } from \"@liberfi.io/types\";\nimport { Avatar, BinanceIcon, EthereumIcon, SolanaIcon } from \"@liberfi.io/ui\";\nimport { capitalizeString, chainSlug } from \"@liberfi.io/utils\";\n\nexport type ChainAvatarProps = {\n  chain: Chain;\n  className?: string;\n};\n\nexport function ChainAvatar({ chain, className }: ChainAvatarProps) {\n  switch (chain) {\n    case Chain.SOLANA:\n      return <SolanaIcon className={className} />;\n    case Chain.ETHEREUM:\n      return <EthereumIcon className={className} />;\n    case Chain.BINANCE:\n      return <BinanceIcon className={className} />;\n    default:\n      return (\n        <Avatar\n          className={className}\n          name={capitalizeString(chainSlug(chain) ?? \"\")}\n        />\n      );\n  }\n}\n","import { useCallback } from \"react\";\nimport { Chain } from \"@liberfi.io/types\";\nimport {\n  Button,\n  clsx,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  useDisclosure,\n} from \"@liberfi.io/ui\";\nimport { capitalizeString, chainSlug } from \"@liberfi.io/utils\";\nimport { ChainAvatar } from \"./chain-avatar\";\n\nexport type ChainSelectDesktopUIProps = {\n  size?: \"sm\" | \"md\" | \"lg\";\n  candidates: Chain[];\n  chain?: Chain;\n  onSelectChain?: (chain: Chain) => void;\n  className?: string;\n};\n\nexport function ChainSelectDesktopUI({\n  size,\n  candidates,\n  chain = candidates[0],\n  onSelectChain,\n  className,\n}: ChainSelectDesktopUIProps) {\n  const { isOpen, onClose, onOpenChange } = useDisclosure();\n\n  const handleSelect = useCallback(\n    (chain: Chain) => {\n      onSelectChain?.(chain);\n      onClose();\n    },\n    [onSelectChain, onClose],\n  );\n\n  return (\n    <Popover\n      isOpen={isOpen}\n      onOpenChange={onOpenChange}\n      placement=\"bottom-end\"\n      className={className}\n      classNames={{ content: \"w-38 bg-content1 border border-border\" }}\n    >\n      <PopoverTrigger>\n        <Button\n          size={size}\n          variant=\"bordered\"\n          radius=\"full\"\n          startContent={\n            <ChainAvatar\n              chain={chain}\n              className={clsx(\n                size === \"sm\"\n                  ? \"w-6 h-6\"\n                  : size === \"md\" || size === undefined\n                    ? \"w-7 h-7\"\n                    : \"w-8 h-8\",\n              )}\n            />\n          }\n        >\n          {capitalizeString(chainSlug(chain) ?? \"\")}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-40 flex flex-col gap-1 p-1 rounded-md\">\n        {candidates.map((it) => (\n          <div\n            key={it}\n            className={clsx(\n              \"w-full h-10 hover:bg-content2/80 cursor-pointer rounded-md px-3\",\n              \"flex gap-2 items-center\",\n              it === chain ? \"bg-content2 text-foreground\" : \"text-neutral\",\n            )}\n            onClick={() => handleSelect(it)}\n          >\n            <ChainAvatar\n              chain={it}\n              className={clsx(\n                size === \"sm\"\n                  ? \"w-6 h-6\"\n                  : size === \"md\" || size === undefined\n                    ? \"w-7 h-7\"\n                    : \"w-8 h-8\",\n              )}\n            />\n            {capitalizeString(chainSlug(it) ?? \"\")}\n          </div>\n        ))}\n      </PopoverContent>\n    </Popover>\n  );\n}\n","import { Chain } from \"@liberfi.io/types\";\nimport { Button, clsx } from \"@liberfi.io/ui\";\nimport { ChainAvatar } from \"./chain-avatar\";\n\nexport type ChainSelectMobileUIProps = {\n  size?: \"sm\" | \"md\" | \"lg\";\n  candidates: Chain[];\n  chain?: Chain;\n  onSelectChain?: (chain: Chain) => void;\n  className?: string;\n};\n\nexport function ChainSelectMobileUI({\n  size,\n  candidates,\n  chain = Chain.SOLANA,\n  onSelectChain,\n  className,\n}: ChainSelectMobileUIProps) {\n  return (\n    <div className={clsx(\"flex items-center gap-1\", className)}>\n      {candidates.map((it) => (\n        <Button\n          isIconOnly\n          radius=\"full\"\n          className={clsx(\n            \"min-w-0 min-h-0\",\n            size === \"sm\"\n              ? \"w-6 h-6\"\n              : size === \"md\" || size === undefined\n                ? \"w-7 h-7\"\n                : \"w-8 h-8\",\n            it === chain\n              ? \"bg-content1 scale-110 hover:opacity-100\"\n              : \"bg-transparent scale-90 opacity-50 hover:opacity-100\",\n          )}\n          key={it}\n          onPress={() => onSelectChain?.(it)}\n        >\n          <ChainAvatar\n            chain={it}\n            className={clsx(\n              size === \"sm\"\n                ? \"w-5 h-5\"\n                : size === \"md\" || size === undefined\n                  ? \"w-6 h-6\"\n                  : \"w-7 h-7\",\n            )}\n          />\n        </Button>\n      ))}\n    </div>\n  );\n}\n","import { Chain } from \"@liberfi.io/types\";\nimport { useScreen } from \"@liberfi.io/ui\";\nimport { ChainSelectDesktopUI } from \"./chain-select.desktop.ui\";\nimport { ChainSelectMobileUI } from \"./chain-select.mobile.ui\";\n\nconst DEFAULT_CANDIDATES = [Chain.SOLANA, Chain.ETHEREUM, Chain.BINANCE];\n\nexport type ChainSelectUIProps = {\n  size?: \"sm\" | \"md\" | \"lg\";\n  chain?: Chain;\n  candidates?: Chain[];\n  onSelectChain?: (chain: Chain) => void;\n  className?: string;\n};\n\nexport function ChainSelectUI({\n  size,\n  chain = Chain.SOLANA,\n  candidates = DEFAULT_CANDIDATES,\n  onSelectChain,\n  className,\n}: ChainSelectUIProps) {\n  const { isMobile } = useScreen();\n\n  if (isMobile) {\n    return (\n      <ChainSelectMobileUI\n        size={size}\n        chain={chain}\n        onSelectChain={onSelectChain}\n        candidates={candidates}\n        className={className}\n      />\n    );\n  } else {\n    return (\n      <ChainSelectDesktopUI\n        size={size}\n        chain={chain}\n        onSelectChain={onSelectChain}\n        candidates={candidates}\n        className={className}\n      />\n    );\n  }\n}\n","import { Chain, ChainNamespace } from \"@liberfi.io/types\";\nimport { atomWithStorage } from \"@liberfi.io/ui\";\n\n/** current chain */\nexport const chainAtom = atomWithStorage<Chain>(\n  \"chain\",\n  Chain.SOLANA,\n  undefined,\n  {\n    getOnInit: true,\n  },\n);\n\n/** current chain namespace */\nexport const chainNamespaceAtom = atomWithStorage<ChainNamespace>(\n  \"chainNamespace\",\n  ChainNamespace.SOLANA,\n  undefined,\n  {\n    getOnInit: true,\n  },\n);\n","import { useCallback } from \"react\";\nimport { Chain, ChainNamespace } from \"@liberfi.io/types\";\nimport { useSetAtom } from \"@liberfi.io/ui\";\nimport { chainAtom, chainNamespaceAtom } from \"../states\";\n\nexport function useSelectChain(): (chain: Chain) => void {\n  const setChain = useSetAtom(chainAtom);\n  const setChainNamespace = useSetAtom(chainNamespaceAtom);\n\n  return useCallback(\n    (chain: Chain) => {\n      switch (chain) {\n        case Chain.ETHEREUM:\n        case Chain.BINANCE:\n          setChainNamespace(ChainNamespace.EVM);\n          break;\n        case Chain.SOLANA:\n          setChainNamespace(ChainNamespace.SOLANA);\n          break;\n        default:\n          throw new Error(`Unsupported chain: ${chain}`);\n      }\n      setChain(chain);\n    },\n    [setChain, setChainNamespace],\n  );\n}\n","import { useAtomValue } from \"@liberfi.io/ui\";\nimport { chainAtom, chainNamespaceAtom } from \"../states\";\n\nexport function useCurrentChain() {\n  const chain = useAtomValue(chainAtom);\n  const chainNamespace = useAtomValue(chainNamespaceAtom);\n  return { chain, chainNamespace };\n}\n","import { useSelectChain, useCurrentChain } from \"../hooks\";\nimport { ChainSelectUI } from \"./chain-select.ui\";\n\nexport type ChainSelectWidgetProps = {\n  size?: \"sm\" | \"md\" | \"lg\";\n  className?: string;\n};\n\nexport function ChainSelectWidget({ size, className }: ChainSelectWidgetProps) {\n  const { chain } = useCurrentChain();\n  const selectChain = useSelectChain();\n  return (\n    <ChainSelectUI\n      chain={chain}\n      onSelectChain={selectChain}\n      size={size}\n      className={className}\n    />\n  );\n}\n"]}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@liberfi.io/ui-chain-select",
+  "version": "0.1.1",
+  "description": "Chain Management for Liberfi React SDK",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "keywords": [],
+  "author": "liberfi.io",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.90.2",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "tailwind-variants": "^3.1.1",
+    "@liberfi.io/utils": "0.1.10",
+    "@liberfi.io/ui": "0.1.12",
+    "@liberfi.io/types": "0.1.11"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.1.13",
+    "@tailwindcss/postcss": "^4.1.13",
+    "@types/node": "^24.5.0",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.13",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.2",
+    "tsconfig": "0.1.4"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "build:css": "pnpm dlx @tailwindcss/cli -i ./src/tailwind/tailwind.css -o ./dist/styles.css",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}