@turnkey/react-wallet-kit 2.0.0 → 2.1.0

package/dist/components/auth/wallet/DisconnectWalletScreen.mjs

@@ -0,0 +1,80 @@
+import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../../_virtual/_rollupPluginBabelHelpers.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ActionButton } from '../../design/Buttons.mjs';
+import { useState } from 'react';
+import clsx from 'clsx';
+import { useModal } from '../../../providers/modal/Hook.mjs';
+
+function DisconnectWalletScreen(props) {
+  var _provider$info$icon;
+  var provider = props.provider,
+    onDisconnect = props.onDisconnect;
+  var _useModal = useModal(),
+    isMobile = _useModal.isMobile;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hasError = _useState4[0],
+    setHasError = _useState4[1];
+  var handleDisconnect = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.p = _context.n) {
+          case 0:
+            setIsLoading(true);
+            setHasError(false);
+            _context.p = 1;
+            _context.n = 2;
+            return onDisconnect(provider);
+          case 2:
+            _context.n = 4;
+            break;
+          case 3:
+            _context.p = 3;
+            _context.v;
+            setHasError(true);
+          case 4:
+            _context.p = 4;
+            setIsLoading(false);
+            return _context.f(4);
+          case 5:
+            return _context.a(2);
+        }
+      }, _callee, null, [[1, 3, 4, 5]]);
+    }));
+    return function handleDisconnect() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  return jsxs("div", {
+    className: clsx("mt-8", isMobile ? "w-full" : "w-96"),
+    children: [jsxs("div", {
+      className: "mt-6 mb-5 flex flex-col items-center gap-3",
+      children: [jsx("img", {
+        src: (_provider$info$icon = provider.info.icon) !== null && _provider$info$icon !== void 0 ? _provider$info$icon : "",
+        className: "size-14 rounded-full"
+      }), jsx("div", {
+        className: clsx("text-2xl font-bold text-center", hasError && "text-danger-light dark:text-danger-dark"),
+        children: hasError ? "You can't disconnect this wallet!" : "Disconnect ".concat(provider.info.name)
+      }), jsx("div", {
+        className: "text-icon-text-light dark:text-icon-text-dark text-center !p-0",
+        children: hasError ? "Try disconnecting directly from the ".concat(provider.info.name, " app") : "You can always connect this wallet again later."
+      })]
+    }), jsx("div", {
+      className: "flex my-2 mt-0",
+      children: jsx(ActionButton, {
+        onClick: handleDisconnect,
+        loading: isLoading,
+        className: clsx("w-full max-w-md bg-danger-light dark:bg-danger-dark text-primary-text-light dark:text-primary-text-dark", hasError && "animate-shake opacity-50"),
+        spinnerClassName: "text-primary-danger-text-light dark:text-primary-danger-text-dark",
+        children: "Disconnect Wallet"
+      })
+    })]
+  });
+}
+
+export { DisconnectWalletScreen };
+//# sourceMappingURL=DisconnectWalletScreen.mjs.map

package/dist/components/auth/wallet/DisconnectWalletScreen.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisconnectWalletScreen.mjs","sources":["../../../../src/components/auth/wallet/DisconnectWalletScreen.tsx"],"sourcesContent":[null],"names":["DisconnectWalletScreen","props","_provider$info$icon","provider","onDisconnect","_useModal","useModal","isMobile","_useState","useState","_useState2","_slicedToArray","isLoading","setIsLoading","_useState3","_useState4","hasError","setHasError","handleDisconnect","_ref","_asyncToGenerator","_regenerator","m","_callee","w","_context","p","n","v","f","a","apply","arguments","_jsxs","className","clsx","children","_jsx","src","info","icon","concat","name","ActionButton","onClick","loading","spinnerClassName"],"mappings":"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"}

package/dist/components/auth/wallet/ExternalWalletChainSelector.d.ts

@@ -0,0 +1,10 @@
+import type { WalletProvider } from "@turnkey/core";
+interface ExternalWalletChainSelectorProps {
+    providers: WalletProvider[];
+    onSelect: (provider: WalletProvider) => Promise<void>;
+    /** When provided, connected providers show disconnect UI and this handler is called on click. */
+    onDisconnect?: ((provider: WalletProvider) => Promise<void>) | undefined;
+}
+export declare function ExternalWalletChainSelector(props: ExternalWalletChainSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ExternalWalletChainSelector.d.ts.map

package/dist/components/auth/wallet/ExternalWalletChainSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalWalletChainSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/auth/wallet/ExternalWalletChainSelector.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAOpD,UAAU,gCAAgC;IACxC,SAAS,EAAE,cAAc,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD,iGAAiG;IACjG,YAAY,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,SAAS,CAAC;CAC1E;AACD,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,gCAAgC,2CAiIxC"}

package/dist/components/auth/wallet/ExternalWalletChainSelector.js

@@ -0,0 +1,115 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Buttons = require('../../design/Buttons.js');
+var Svg = require('../../design/Svg.js');
+var reactFontawesome = require('@fortawesome/react-fontawesome');
+var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
+var react = require('react');
+var clsx = require('clsx');
+var core = require('@turnkey/core');
+var Hook$1 = require('../../../providers/modal/Hook.js');
+var Hook = require('../../../providers/client/Hook.js');
+var ConnectedIndicator = require('../../design/ConnectedIndicator.js');
+var utils = require('./utils.js');
+
+function ExternalWalletChainSelector(props) {
+  const {
+    providers,
+    onSelect,
+    onDisconnect
+  } = props;
+  const {
+    walletProviders
+  } = Hook.useTurnkey();
+  const {
+    isMobile,
+    popPage
+  } = Hook$1.useModal();
+  const [loadingProvider, setLoadingProvider] = react.useState();
+  // we find matching providers in current state
+  const currentProviders = providers.map(inputProvider => walletProviders.find(p => p.interfaceType === inputProvider.interfaceType && p.chainInfo.namespace === inputProvider.chainInfo.namespace)).filter(p => p !== undefined);
+  // if no providers are found then that means that the user entered this screen
+  // while WalletConnect was still initializing, and then it failed to initialize
+  react.useEffect(() => {
+    if (currentProviders.length === 0) {
+      popPage();
+    }
+  }, [currentProviders.length, popPage]);
+  const shouldShowDisconnect = onDisconnect !== undefined;
+  const handleSelect = async provider => {
+    setLoadingProvider(provider);
+    if (utils.canDisconnect(provider, shouldShowDisconnect)) {
+      await onDisconnect(provider);
+    } else {
+      await onSelect(provider);
+    }
+    setLoadingProvider(undefined);
+  };
+  return jsxRuntime.jsxs("div", {
+    className: clsx("flex flex-col w-72 gap-4 mt-11 items-center justify-center", isMobile ? "w-full" : "w-72"),
+    children: [jsxRuntime.jsx("img", {
+      src: providers[0]?.info.icon,
+      className: "size-14 rounded-full"
+    }), jsxRuntime.jsxs("span", {
+      className: "text-sm text-center text-icon-text-light dark:text-icon-text-dark",
+      children: [providers[0]?.info.name ?? "This wallet provider", " supports multiple chains. Select which chain you would like to use."]
+    }), jsxRuntime.jsx("div", {
+      className: "w-full flex flex-col gap-2",
+      children: currentProviders.map(p => {
+        const [isHovering, setIsHovering] = react.useState(false);
+        return jsxRuntime.jsxs(Buttons.ActionButton, {
+          loading: loadingProvider === p,
+          loadingText: "Preparing...",
+          onClick: () => handleSelect(p),
+          ...(!isMobile && {
+            // This looks weird on mobile since there's no hover state
+            onMouseEnter: () => setIsHovering(true),
+            onMouseLeave: () => setIsHovering(false)
+          }),
+          className: "relative overflow-hidden flex items-center justify-start gap-2 w-full text-inherit bg-button-light dark:bg-button-dark",
+          children: [core.isEthereumProvider(p) ? jsxRuntime.jsxs("div", {
+            className: "relative",
+            children: [jsxRuntime.jsx(Svg.EthereumLogo, {
+              className: "size-5"
+            }), utils.canDisconnect(p, shouldShowDisconnect) && jsxRuntime.jsx(ConnectedIndicator.ConnectedIndicator, {
+              isPinging: true
+            })]
+          }) : core.isSolanaProvider(p) ? jsxRuntime.jsxs("div", {
+            className: "relative",
+            children: [jsxRuntime.jsx(Svg.SolanaLogo, {
+              className: "size-5"
+            }), utils.canDisconnect(p, shouldShowDisconnect) && jsxRuntime.jsx(ConnectedIndicator.ConnectedIndicator, {
+              isPinging: true
+            })]
+          }) :
+          // we should never reach here
+          // if we do then it means we forgot to update the auth component after adding a new chain
+          jsxRuntime.jsx("div", {
+            className: "relative",
+            children: jsxRuntime.jsx("span", {
+              className: "size-5 flex items-center justify-center rounded bg-gray-300 dark:bg-gray-700",
+              children: "?"
+            })
+          }), jsxRuntime.jsxs("div", {
+            className: "flex flex-col items-start",
+            children: [core.isEthereumProvider(p) ? "EVM" : core.isSolanaProvider(p) ? "Solana" :
+            // we should never reach here
+            // if we do then it means we forgot to update the auth component after adding a new chain
+            `?`, utils.canDisconnect(p, shouldShowDisconnect) && jsxRuntime.jsxs("span", {
+              className: "text-xs text-icon-text-light dark:text-icon-text-dark",
+              children: ["Connected: ", p.connectedAddresses[0]?.slice(0, 4), "...", p.connectedAddresses[0]?.slice(-3)]
+            })]
+          }), jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
+            className: clsx(`absolute transition-all duration-200`, isHovering ? "right-4" : "-right-4", utils.canDisconnect(p, shouldShowDisconnect) ? "text-danger-light dark:text-danger-dark" : "text-icon-text-light dark:text-icon-text-dark"),
+            size: utils.canDisconnect(p, shouldShowDisconnect) ? "lg" : "1x",
+            icon: utils.canDisconnect(p, shouldShowDisconnect) ? freeSolidSvgIcons.faClose : freeSolidSvgIcons.faChevronRight
+          })]
+        }, p.chainInfo.namespace);
+      })
+    })]
+  });
+}
+
+exports.ExternalWalletChainSelector = ExternalWalletChainSelector;
+//# sourceMappingURL=ExternalWalletChainSelector.js.map

package/dist/components/auth/wallet/ExternalWalletChainSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalWalletChainSelector.js","sources":["../../../../src/components/auth/wallet/ExternalWalletChainSelector.tsx"],"sourcesContent":[null],"names":["ExternalWalletChainSelector","props","providers","onSelect","onDisconnect","walletProviders","useTurnkey","isMobile","popPage","useModal","loadingProvider","setLoadingProvider","useState","currentProviders","map","inputProvider","find","p","interfaceType","chainInfo","namespace","filter","undefined","useEffect","length","shouldShowDisconnect","handleSelect","provider","canDisconnect","_jsxs","className","clsx","children","_jsx","src","info","icon","name","isHovering","setIsHovering","ActionButton","loading","loadingText","onClick","onMouseEnter","onMouseLeave","isEthereumProvider","EthereumLogo","ConnectedIndicator","isPinging","isSolanaProvider","SolanaLogo","connectedAddresses","slice","FontAwesomeIcon","size","faClose","faChevronRight"],"mappings":";;;;;;;;;;;;;;;AAmBM,SAAUA,2BAA2BA,CACzCC,KAAuC,EAAA;EAEvC,MAAM;IAAEC,SAAS;IAAEC,QAAQ;AAAEC,IAAAA;AAAY,GAAE,GAAGH,KAAK;EAEnD,MAAM;AAAEI,IAAAA;GAAiB,GAAGC,eAAU,EAAE;EACxC,MAAM;IAAEC,QAAQ;AAAEC,IAAAA;GAAS,GAAGC,eAAQ,EAAE;EAExC,MAAM,CAACC,eAAe,EAAEC,kBAAkB,CAAC,GAAGC,cAAQ,EAAkB;AAExE;AACA,EAAA,MAAMC,gBAAgB,GAAGX,SAAS,CAC/BY,GAAG,CAAEC,aAAa,IACjBV,eAAe,CAACW,IAAI,CACjBC,CAAC,IACAA,CAAC,CAACC,aAAa,KAAKH,aAAa,CAACG,aAAa,IAC/CD,CAAC,CAACE,SAAS,CAACC,SAAS,KAAKL,aAAa,CAACI,SAAS,CAACC,SAAS,CAC9D,CACF,CACAC,MAAM,CAAEJ,CAAC,IAA0BA,CAAC,KAAKK,SAAS,CAAC;AAEtD;AACA;AACAC,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,IAAIV,gBAAgB,CAACW,MAAM,KAAK,CAAC,EAAE;AACjChB,MAAAA,OAAO,EAAE;AACX,IAAA;EACF,CAAC,EAAE,CAACK,gBAAgB,CAACW,MAAM,EAAEhB,OAAO,CAAC,CAAC;AAEtC,EAAA,MAAMiB,oBAAoB,GAAGrB,YAAY,KAAKkB,SAAS;AAEvD,EAAA,MAAMI,YAAY,GAAG,MAAOC,QAAwB,IAAI;IACtDhB,kBAAkB,CAACgB,QAAQ,CAAC;AAC5B,IAAA,IAAIC,mBAAa,CAACD,QAAQ,EAAEF,oBAAoB,CAAC,EAAE;MACjD,MAAMrB,YAAa,CAACuB,QAAQ,CAAC;AAC/B,IAAA,CAAC,MAAM;MACL,MAAMxB,QAAQ,CAACwB,QAAQ,CAAC;AAC1B,IAAA;IACAhB,kBAAkB,CAACW,SAAS,CAAC;EAC/B,CAAC;EAED,OACEO,eAAA,CAAA,KAAA,EAAA;IACEC,SAAS,EAAEC,IAAI,CACb,4DAA4D,EAC5DxB,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAC7B;AAAAyB,IAAAA,QAAA,EAAA,CAEDC,cAAA,CAAA,KAAA,EAAA;MAAKC,GAAG,EAAEhC,SAAS,CAAC,CAAC,CAAC,EAAEiC,IAAI,CAACC,IAAI;AAAEN,MAAAA,SAAS,EAAC;AAAsB,KAAA,CAAG,EACtED,eAAA,CAAA,MAAA,EAAA;AAAMC,MAAAA,SAAS,EAAC,mEAAmE;AAAAE,MAAAA,QAAA,EAAA,CAChF9B,SAAS,CAAC,CAAC,CAAC,EAAEiC,IAAI,CAACE,IAAI,IAAI,sBAAsB,EACjD,sEAAsE;AAAA,KAAA,CAClE,EACPJ,cAAA,CAAA,KAAA,EAAA;AAAKH,MAAAA,SAAS,EAAC,4BAA4B;AAAAE,MAAAA,QAAA,EACxCnB,gBAAgB,CAACC,GAAG,CAAEG,CAAC,IAAI;QAC1B,MAAM,CAACqB,UAAU,EAAEC,aAAa,CAAC,GAAG3B,cAAQ,CAAC,KAAK,CAAC;QACnD,OACEiB,eAAA,CAACW,oBAAY,EAAA;UAEXC,OAAO,EAAE/B,eAAe,KAAKO,CAAC;AAC9ByB,UAAAA,WAAW,EAAC,cAAc;AAC1BC,UAAAA,OAAO,EAAEA,MAAMjB,YAAY,CAACT,CAAC,CAAC;UAAA,IACzB,CAACV,QAAQ,IAAI;AAChB;AACAqC,YAAAA,YAAY,EAAEA,MAAML,aAAa,CAAC,IAAI,CAAC;AACvCM,YAAAA,YAAY,EAAEA,MAAMN,aAAa,CAAC,KAAK;AACxC,WAAA,CAAC;AACFT,UAAAA,SAAS,EAAC,wHAAwH;UAAAE,QAAA,EAAA,CAEjIc,uBAAkB,CAAC7B,CAAC,CAAC,GACpBY,eAAA,CAAA,KAAA,EAAA;AAAKC,YAAAA,SAAS,EAAC,UAAU;uBACvBG,cAAA,CAACc,gBAAY,EAAA;AAACjB,cAAAA,SAAS,EAAC;AAAQ,aAAA,CAAG,EAClCF,mBAAa,CAACX,CAAC,EAAEQ,oBAAoB,CAAC,IACrCQ,cAAA,CAACe,qCAAkB;AAACC,cAAAA,SAAS,EAAA;AAAA,aAAA,CAC9B;WAAA,CACG,GACJC,qBAAgB,CAACjC,CAAC,CAAC,GACrBY,eAAA,CAAA,KAAA,EAAA;AAAKC,YAAAA,SAAS,EAAC,UAAU;AAAAE,YAAAA,QAAA,EAAA,CACvBC,eAACkB,cAAU,EAAA;AAACrB,cAAAA,SAAS,EAAC;AAAQ,aAAA,CAAG,EAChCF,mBAAa,CAACX,CAAC,EAAEQ,oBAAoB,CAAC,IACrCQ,cAAA,CAACe,qCAAkB,EAAA;AAACC,cAAAA,SAAS,EAAA;AAAA,aAAA,CAC9B;YACG;AAEN;AACA;UACAhB,cAAA,CAAA,KAAA,EAAA;AAAKH,YAAAA,SAAS,EAAC,UAAU;AAAAE,YAAAA,QAAA,EACvBC;AAAMH,cAAAA,SAAS,EAAC,8EAA8E;AAAAE,cAAAA,QAAA,EAAA;aAAA;AAEvF,WAAA,CAEV,EAEDH,eAAA,CAAA,KAAA,EAAA;AAAKC,YAAAA,SAAS,EAAC,2BAA2B;uBACvCgB,uBAAkB,CAAC7B,CAAC,CAAC,GAClB,KAAK,GACLiC,qBAAgB,CAACjC,CAAC,CAAC,GACjB,QAAQ;AACR;AACA;YACA,CAAA,CAAA,CAAG,EACRW,mBAAa,CAACX,CAAC,EAAEQ,oBAAoB,CAAC,IACrCI,eAAA,CAAA,MAAA,EAAA;AAAMC,cAAAA,SAAS,EAAC,uDAAuD;wCACzDb,CAAC,CAACmC,kBAAkB,CAAC,CAAC,CAAC,EAAEC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAA,KAAA,EAC/CpC,CAAC,CAACmC,kBAAkB,CAAC,CAAC,CAAC,EAAEC,KAAK,CAAC,EAAE,CAAC;cAEtC;AAAA,WAAA,CACG,EAENpB,cAAA,CAACqB,gCAAe,EAAA;YACdxB,SAAS,EAAEC,IAAI,CACb,CAAA,oCAAA,CAAsC,EACtCO,UAAU,GAAG,SAAS,GAAG,UAAU,EACnCV,mBAAa,CAACX,CAAC,EAAEQ,oBAAoB,CAAC,GAClC,yCAAyC,GACzC,+CAA+C,CACpD;YACD8B,IAAI,EAAE3B,mBAAa,CAACX,CAAC,EAAEQ,oBAAoB,CAAC,GAAG,IAAI,GAAG,IAAI;YAC1DW,IAAI,EACFR,mBAAa,CAACX,CAAC,EAAEQ,oBAAoB,CAAC,GAClC+B,yBAAO,GACPC;AAAc,WAAA,CAEpB;AAAA,SAAA,EAjEGxC,CAAC,CAACE,SAAS,CAACC,SAAS,CAkEb;MAEnB,CAAC;AAAC,KAAA,CACE;AAAA,GAAA,CACF;AAEV;;;;"}

package/dist/components/auth/wallet/ExternalWalletChainSelector.mjs

@@ -0,0 +1,149 @@
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../../_virtual/_rollupPluginBabelHelpers.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ActionButton } from '../../design/Buttons.mjs';
+import { EthereumLogo, SolanaLogo } from '../../design/Svg.mjs';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faClose, faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import { useState, useEffect } from 'react';
+import clsx from 'clsx';
+import { isEthereumProvider, isSolanaProvider } from '@turnkey/core';
+import { useModal } from '../../../providers/modal/Hook.mjs';
+import { useTurnkey } from '../../../providers/client/Hook.mjs';
+import { ConnectedIndicator } from '../../design/ConnectedIndicator.mjs';
+import { canDisconnect } from './utils.mjs';
+
+function ExternalWalletChainSelector(props) {
+  var _providers$, _providers$0$info$nam, _providers$2;
+  var providers = props.providers,
+    onSelect = props.onSelect,
+    onDisconnect = props.onDisconnect;
+  var _useTurnkey = useTurnkey(),
+    walletProviders = _useTurnkey.walletProviders;
+  var _useModal = useModal(),
+    isMobile = _useModal.isMobile,
+    popPage = _useModal.popPage;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    loadingProvider = _useState2[0],
+    setLoadingProvider = _useState2[1];
+  // we find matching providers in current state
+  var currentProviders = providers.map(function (inputProvider) {
+    return walletProviders.find(function (p) {
+      return p.interfaceType === inputProvider.interfaceType && p.chainInfo.namespace === inputProvider.chainInfo.namespace;
+    });
+  }).filter(function (p) {
+    return p !== undefined;
+  });
+  // if no providers are found then that means that the user entered this screen
+  // while WalletConnect was still initializing, and then it failed to initialize
+  useEffect(function () {
+    if (currentProviders.length === 0) {
+      popPage();
+    }
+  }, [currentProviders.length, popPage]);
+  var shouldShowDisconnect = onDisconnect !== undefined;
+  var handleSelect = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(provider) {
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
+          case 0:
+            setLoadingProvider(provider);
+            if (!canDisconnect(provider, shouldShowDisconnect)) {
+              _context.n = 2;
+              break;
+            }
+            _context.n = 1;
+            return onDisconnect(provider);
+          case 1:
+            _context.n = 3;
+            break;
+          case 2:
+            _context.n = 3;
+            return onSelect(provider);
+          case 3:
+            setLoadingProvider(undefined);
+          case 4:
+            return _context.a(2);
+        }
+      }, _callee);
+    }));
+    return function handleSelect(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  return jsxs("div", {
+    className: clsx("flex flex-col w-72 gap-4 mt-11 items-center justify-center", isMobile ? "w-full" : "w-72"),
+    children: [jsx("img", {
+      src: (_providers$ = providers[0]) === null || _providers$ === void 0 ? void 0 : _providers$.info.icon,
+      className: "size-14 rounded-full"
+    }), jsxs("span", {
+      className: "text-sm text-center text-icon-text-light dark:text-icon-text-dark",
+      children: [(_providers$0$info$nam = (_providers$2 = providers[0]) === null || _providers$2 === void 0 ? void 0 : _providers$2.info.name) !== null && _providers$0$info$nam !== void 0 ? _providers$0$info$nam : "This wallet provider", " supports multiple chains. Select which chain you would like to use."]
+    }), jsx("div", {
+      className: "w-full flex flex-col gap-2",
+      children: currentProviders.map(function (p) {
+        var _p$connectedAddresses, _p$connectedAddresses2;
+        var _useState3 = useState(false),
+          _useState4 = _slicedToArray(_useState3, 2),
+          isHovering = _useState4[0],
+          setIsHovering = _useState4[1];
+        return jsxs(ActionButton, _objectSpread2(_objectSpread2({
+          loading: loadingProvider === p,
+          loadingText: "Preparing...",
+          onClick: function onClick() {
+            return handleSelect(p);
+          }
+        }, !isMobile && {
+          // This looks weird on mobile since there's no hover state
+          onMouseEnter: function onMouseEnter() {
+            return setIsHovering(true);
+          },
+          onMouseLeave: function onMouseLeave() {
+            return setIsHovering(false);
+          }
+        }), {}, {
+          className: "relative overflow-hidden flex items-center justify-start gap-2 w-full text-inherit bg-button-light dark:bg-button-dark",
+          children: [isEthereumProvider(p) ? jsxs("div", {
+            className: "relative",
+            children: [jsx(EthereumLogo, {
+              className: "size-5"
+            }), canDisconnect(p, shouldShowDisconnect) && jsx(ConnectedIndicator, {
+              isPinging: true
+            })]
+          }) : isSolanaProvider(p) ? jsxs("div", {
+            className: "relative",
+            children: [jsx(SolanaLogo, {
+              className: "size-5"
+            }), canDisconnect(p, shouldShowDisconnect) && jsx(ConnectedIndicator, {
+              isPinging: true
+            })]
+          }) :
+          // we should never reach here
+          // if we do then it means we forgot to update the auth component after adding a new chain
+          jsx("div", {
+            className: "relative",
+            children: jsx("span", {
+              className: "size-5 flex items-center justify-center rounded bg-gray-300 dark:bg-gray-700",
+              children: "?"
+            })
+          }), jsxs("div", {
+            className: "flex flex-col items-start",
+            children: [isEthereumProvider(p) ? "EVM" : isSolanaProvider(p) ? "Solana" : // we should never reach here
+            // if we do then it means we forgot to update the auth component after adding a new chain
+            "?", canDisconnect(p, shouldShowDisconnect) && jsxs("span", {
+              className: "text-xs text-icon-text-light dark:text-icon-text-dark",
+              children: ["Connected: ", (_p$connectedAddresses = p.connectedAddresses[0]) === null || _p$connectedAddresses === void 0 ? void 0 : _p$connectedAddresses.slice(0, 4), "...", (_p$connectedAddresses2 = p.connectedAddresses[0]) === null || _p$connectedAddresses2 === void 0 ? void 0 : _p$connectedAddresses2.slice(-3)]
+            })]
+          }), jsx(FontAwesomeIcon, {
+            className: clsx("absolute transition-all duration-200", isHovering ? "right-4" : "-right-4", canDisconnect(p, shouldShowDisconnect) ? "text-danger-light dark:text-danger-dark" : "text-icon-text-light dark:text-icon-text-dark"),
+            size: canDisconnect(p, shouldShowDisconnect) ? "lg" : "1x",
+            icon: canDisconnect(p, shouldShowDisconnect) ? faClose : faChevronRight
+          })]
+        }), p.chainInfo.namespace);
+      })
+    })]
+  });
+}
+
+export { ExternalWalletChainSelector };
+//# sourceMappingURL=ExternalWalletChainSelector.mjs.map

package/dist/components/auth/wallet/ExternalWalletChainSelector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalWalletChainSelector.mjs","sources":["../../../../src/components/auth/wallet/ExternalWalletChainSelector.tsx"],"sourcesContent":[null],"names":["ExternalWalletChainSelector","props","_providers$","_providers$0$info$nam","_providers$2","providers","onSelect","onDisconnect","_useTurnkey","useTurnkey","walletProviders","_useModal","useModal","isMobile","popPage","_useState","useState","_useState2","_slicedToArray","loadingProvider","setLoadingProvider","currentProviders","map","inputProvider","find","p","interfaceType","chainInfo","namespace","filter","undefined","useEffect","length","shouldShowDisconnect","handleSelect","_ref","_asyncToGenerator","_regenerator","m","_callee","provider","w","_context","n","canDisconnect","a","_x","apply","arguments","_jsxs","className","clsx","children","_jsx","src","info","icon","name","_p$connectedAddresses","_p$connectedAddresses2","_useState3","_useState4","isHovering","setIsHovering","ActionButton","_objectSpread","loading","loadingText","onClick","onMouseEnter","onMouseLeave","isEthereumProvider","EthereumLogo","ConnectedIndicator","isPinging","isSolanaProvider","SolanaLogo","connectedAddresses","slice","FontAwesomeIcon","size","faClose","faChevronRight"],"mappings":"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"}

package/dist/components/auth/wallet/ExternalWalletSelector.d.ts

@@ -0,0 +1,18 @@
+import { type WalletAccount } from "@turnkey/core";
+import { WalletSelectorMode } from "../../../types/base";
+export { WalletSelectorMode } from "../../../types/base";
+interface AuthModeProps {
+    mode: WalletSelectorMode.Auth;
+    /** Session key for the auth flow */
+    sessionKey?: string | undefined;
+}
+interface ConnectModeProps {
+    mode: WalletSelectorMode.Connect;
+    /** Called when a wallet is successfully connected or disconnected */
+    onSuccess: (type: "connect" | "disconnect", account: WalletAccount) => void;
+    /** Duration to show success page (ms). If 0 or undefined, closes immediately */
+    successPageDuration?: number | undefined;
+}
+export type ExternalWalletSelectorProps = AuthModeProps | ConnectModeProps;
+export declare function ExternalWalletSelector(props: ExternalWalletSelectorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ExternalWalletSelector.d.ts.map

package/dist/components/auth/wallet/ExternalWalletSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalWalletSelector.d.ts","sourceRoot":"","sources":["../../../../src/components/auth/wallet/ExternalWalletSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,aAAa,EAEnB,MAAM,eAAe,CAAC;AAWvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAGzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzD,UAAU,aAAa;IACrB,IAAI,EAAE,kBAAkB,CAAC,IAAI,CAAC;IAC9B,oCAAoC;IACpC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACjC;AAED,UAAU,gBAAgB;IACxB,IAAI,EAAE,kBAAkB,CAAC,OAAO,CAAC;IACjC,qEAAqE;IACrE,SAAS,EAAE,CAAC,IAAI,EAAE,SAAS,GAAG,YAAY,EAAE,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC5E,gFAAgF;IAChF,mBAAmB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC1C;AAED,MAAM,MAAM,2BAA2B,GAAG,aAAa,GAAG,gBAAgB,CAAC;AAE3E,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,2CAqQxE"}

package/dist/components/auth/wallet/ExternalWalletSelector.js

@@ -0,0 +1,233 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('clsx');
+var core = require('@turnkey/core');
+var Hook = require('../../../providers/modal/Hook.js');
+var Hook$1 = require('../../../providers/client/Hook.js');
+var utils$1 = require('../../../utils/utils.js');
+var WalletButton = require('./WalletButton.js');
+var ExternalWalletChainSelector = require('./ExternalWalletChainSelector.js');
+var WalletConnectFlow = require('./WalletConnectFlow.js');
+var utils = require('./utils.js');
+var Action = require('../Action.js');
+var Success = require('../../design/Success.js');
+var DisconnectWalletScreen = require('./DisconnectWalletScreen.js');
+var base = require('../../../types/base.js');
+
+function ExternalWalletSelector(props) {
+  const {
+    mode
+  } = props;
+  const {
+    pushPage,
+    popPage,
+    closeModal,
+    isMobile
+  } = Hook.useModal();
+  const {
+    walletProviders,
+    wallets,
+    loginOrSignupWithWallet,
+    connectWalletAccount,
+    disconnectWalletAccount
+  } = Hook$1.useTurnkey();
+  // Derive config based on mode
+  const isConnectMode = mode === base.WalletSelectorMode.Connect;
+  const sessionKey = isConnectMode ? undefined : props.sessionKey;
+  const shouldShowDisconnect = isConnectMode;
+  const successPageDuration = isConnectMode ? props.successPageDuration : undefined;
+  const onSuccess = isConnectMode ? props.onSuccess : undefined;
+  // Auth mode: show ActionPage and call loginOrSignupWithWallet
+  const handleAuthSelect = async provider => {
+    pushPage({
+      key: "Wallet Login/Signup",
+      content: jsxRuntime.jsx(Action.ActionPage, {
+        title: `Authenticating with ${provider.info.name}...`,
+        action: async () => {
+          await loginOrSignupWithWallet({
+            walletProvider: provider,
+            ...(sessionKey && {
+              sessionKey
+            })
+          });
+        },
+        icon: jsxRuntime.jsx("img", {
+          className: "size-11 rounded-full",
+          src: provider.info.icon || ""
+        })
+      }),
+      showTitle: false
+    });
+  };
+  // Connect mode: show ActionPage, connect wallet, show success
+  const handleConnectSelect = async provider => {
+    pushPage({
+      key: `Connect ${provider.info.name}`,
+      content: jsxRuntime.jsx(Action.ActionPage, {
+        title: `Connecting ${provider.info.name}`,
+        icon: jsxRuntime.jsx("img", {
+          className: "size-11 rounded-full",
+          src: provider.info.icon || ""
+        }),
+        closeOnComplete: false,
+        action: async () => {
+          const account = await connectWalletAccount(provider);
+          onSuccess?.("connect", account);
+          if (successPageDuration && successPageDuration > 0) {
+            pushPage({
+              key: "Connecting Success",
+              content: jsxRuntime.jsx(Success.SuccessPage, {
+                text: "Successfully connected wallet!",
+                onComplete: () => closeModal(),
+                duration: successPageDuration
+              }),
+              preventBack: true,
+              showTitle: false
+            });
+          } else {
+            closeModal();
+          }
+        }
+      }),
+      showTitle: false
+    });
+  };
+  // Connect mode: show disconnect confirmation, then disconnect
+  const handleDisconnect = async provider => {
+    pushPage({
+      key: `Disconnect ${provider.info.name}`,
+      content: jsxRuntime.jsx(DisconnectWalletScreen.DisconnectWalletScreen, {
+        provider: provider,
+        onDisconnect: async () => {
+          const address = provider.connectedAddresses[0];
+          // Find the matching account from connected wallets
+          const connectedWallets = wallets.filter(w => w.source === core.WalletSource.Connected);
+          const matchedAccount = connectedWallets.flatMap(w => w.accounts).find(a => a.address === address);
+          await disconnectWalletAccount(provider);
+          onSuccess?.("disconnect", matchedAccount);
+          if (successPageDuration && successPageDuration > 0) {
+            pushPage({
+              key: "Disconnect Success",
+              content: jsxRuntime.jsx(Success.SuccessPage, {
+                text: "Successfully disconnected wallet!",
+                onComplete: () => closeModal(),
+                duration: successPageDuration
+              }),
+              preventBack: true,
+              showTitle: false
+            });
+          } else {
+            closeModal();
+          }
+        }
+      }),
+      showTitle: false
+    });
+  };
+  // Select the appropriate handler based on mode
+  const onSelect = isConnectMode ? handleConnectSelect : handleAuthSelect;
+  // Group providers by name
+  const grouped = walletProviders.reduce((acc, provider) => {
+    const name = provider.info.name;
+    if (!acc[name]) acc[name] = [];
+    acc[name].push(provider);
+    return acc;
+  }, {});
+  const pushStandardChainSelector = group => {
+    pushPage({
+      key: `Select chain`,
+      content: jsxRuntime.jsx(ExternalWalletChainSelector.ExternalWalletChainSelector, {
+        providers: group,
+        onSelect: onSelect,
+        onDisconnect: isConnectMode ? handleDisconnect : undefined
+      })
+    });
+  };
+  const pushWalletConnectFlow = group => {
+    pushPage({
+      key: "WalletConnect",
+      content: jsxRuntime.jsx(WalletConnectFlow.WalletConnectFlow, {
+        providers: group,
+        mode: mode,
+        sessionKey: sessionKey,
+        onDisconnect: isConnectMode ? handleDisconnect : undefined
+      }),
+      showTitle: false
+    });
+  };
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Selection handlers
+  // ─────────────────────────────────────────────────────────────────────────────
+  const handleSelectGroup = group => {
+    const provider = group[0];
+    const isConnected = !!utils.canDisconnect(provider, shouldShowDisconnect);
+    // Single chain - direct action
+    if (group.length === 1) {
+      if (isConnected) {
+        handleDisconnect(provider);
+      } else {
+        onSelect(provider);
+      }
+      return;
+    }
+    // Multiple chains - need chain selector
+    if (utils$1.isWalletConnect(provider)) {
+      pushWalletConnectFlow(group);
+    } else {
+      pushStandardChainSelector(group);
+    }
+  };
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Auto-navigation when only one provider group exists
+  // ─────────────────────────────────────────────────────────────────────────────
+  react.useEffect(() => {
+    const groupedValues = Object.values(grouped);
+    if (groupedValues.length === 1) {
+      popPage(); // Remove this page to prevent back-button loops
+      handleSelectGroup(groupedValues[0]);
+    }
+  }, [grouped]);
+  // ─────────────────────────────────────────────────────────────────────────────
+  // Render
+  // ─────────────────────────────────────────────────────────────────────────────
+  if (Object.keys(grouped).length === 0) {
+    return jsxRuntime.jsxs("div", {
+      className: clsx("flex flex-col h-40 mt-4 gap-2 justify-center items-center text-xs text-center text-icon-text-light dark:text-icon-text-dark", isMobile ? "w-full" : "w-80"),
+      children: [jsxRuntime.jsx("span", {
+        className: "text-sm font-medium",
+        children: "No wallet providers available."
+      }), jsxRuntime.jsx("span", {
+        children: "Only wallets supporting EIP-1193 (Ethereum) or the Solana wallet standard are supported."
+      })]
+    });
+  }
+  return jsxRuntime.jsx("div", {
+    className: clsx("min-h-42 max-h-64 mt-12 overflow-y-auto tk-scrollbar p-0.5", isMobile ? "w-full" : "w-80"),
+    children: jsxRuntime.jsx("div", {
+      className: "flex flex-col gap-2",
+      children: Object.entries(grouped).map(([name, group]) => {
+        const first = group[0];
+        return jsxRuntime.jsx(WalletButton.WalletButton, {
+          icon: first.info.icon ?? "",
+          name: first.info.name ?? "",
+          chains: group.map(c => ({
+            namespace: c.chainInfo.namespace,
+            isConnected: !!utils.canDisconnect(c, shouldShowDisconnect)
+          })),
+          onClick: () => handleSelectGroup(group),
+          shouldShowDisconnect: shouldShowDisconnect,
+          isMobile: isMobile
+        }, name);
+      })
+    })
+  });
+}
+
+Object.defineProperty(exports, "WalletSelectorMode", {
+    enumerable: true,
+    get: function () { return base.WalletSelectorMode; }
+});
+exports.ExternalWalletSelector = ExternalWalletSelector;
+//# sourceMappingURL=ExternalWalletSelector.js.map