@0xkey-io/react-wallet-kit 0.1.0

package/dist/components/auth/Wallet.mjs

@@ -0,0 +1,618 @@
+import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../_virtual/_rollupPluginBabelHelpers.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ActionButton, BaseButton } from '../design/Buttons.mjs';
+import { EthereumLogo, SolanaLogo } from '../design/Svg.mjs';
+import { Spinner } from '../design/Spinners.mjs';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faWallet, faClose, faChevronRight, faMobileScreen, faLaptop, faCheck, faCopy } from '@fortawesome/free-solid-svg-icons';
+import { useState, useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import { QRCodeSVG } from 'qrcode.react';
+import { SuccessPage } from '../design/Success.mjs';
+import { isEthereumProvider, isSolanaProvider } from '@0xkey-io/core';
+import { useModal } from '../../providers/modal/Hook.mjs';
+import { useZeroXKey } from '../../providers/client/Hook.mjs';
+import { useDebouncedCallback } from '../../utils/utils.mjs';
+
+function WalletAuthButton(props) {
+  var onContinue = props.onContinue;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  var handleContinue = /*#__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);
+            _context.p = 1;
+            _context.n = 2;
+            return Promise.resolve(onContinue());
+          case 2:
+            _context.p = 2;
+            setIsLoading(false);
+            return _context.f(2);
+          case 3:
+            return _context.a(2);
+        }
+      }, _callee, null, [[1,, 2, 3]]);
+    }));
+    return function handleContinue() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  return jsx("div", {
+    className: "flex flex-col w-full",
+    children: jsxs(ActionButton, {
+      name: "wallet-auth-button",
+      onClick: handleContinue,
+      loading: isLoading,
+      className: "flex h-10 w-full items-center justify-center gap-2 border-modal-background-dark/15 bg-button-light py-2.5 text-sm text-inherit dark:border-modal-background-light/20 dark:bg-button-dark dark:text-white",
+      children: [jsx(FontAwesomeIcon, {
+        icon: faWallet,
+        className: "shrink-0"
+      }), "Continue with wallet"]
+    })
+  });
+}
+var canDisconnect = function canDisconnect(provider, shouldShowDisconnect) {
+  return shouldShowDisconnect && provider.connectedAddresses && provider.connectedAddresses.length > 0;
+};
+function ExternalWalletChainSelector(props) {
+  var _providers$, _providers$0$info$nam, _providers$2;
+  var providers = props.providers,
+    onSelect = props.onSelect,
+    onDisconnect = props.onDisconnect;
+  var _useZeroXKey = useZeroXKey(),
+    walletProviders = _useZeroXKey.walletProviders;
+  var _useModal = useModal(),
+    isMobile = _useModal.isMobile,
+    popPage = _useModal.popPage;
+  // 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 = function handleSelect(provider) {
+    if (canDisconnect(provider, shouldShowDisconnect)) {
+      onDisconnect(provider);
+    } else {
+      onSelect(provider);
+    }
+  };
+  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: providers.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, {
+          onClick: function onClick() {
+            return handleSelect(p);
+          },
+          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);
+      })
+    })]
+  });
+}
+function ExternalWalletSelector(props) {
+  var onDisconnect = props.onDisconnect,
+    onSelect = props.onSelect;
+  var _useModal2 = useModal(),
+    pushPage = _useModal2.pushPage,
+    popPage = _useModal2.popPage,
+    isMobile = _useModal2.isMobile;
+  var _useZeroXKey2 = useZeroXKey(),
+    walletProviders = _useZeroXKey2.walletProviders;
+  var shouldShowDisconnect = onDisconnect !== undefined;
+  // Group providers by name
+  var grouped = walletProviders.reduce(function (acc, provider) {
+    var name = provider.info.name;
+    if (!acc[name]) acc[name] = [];
+    acc[name].push(provider);
+    return acc;
+  }, {});
+  var handleSelectGroup = function handleSelectGroup(group) {
+    if (group.length === 1) {
+      if (canDisconnect(group[0], shouldShowDisconnect)) {
+        onDisconnect(group[0]);
+      } else {
+        onSelect(group[0]);
+      }
+    } else {
+      pushPage({
+        key: "Select chain",
+        content: jsx(ExternalWalletChainSelector, {
+          providers: group,
+          onDisconnect: onDisconnect,
+          onSelect: onSelect
+        })
+      });
+    }
+  };
+  useEffect(function () {
+    // Don't show the selector if there's only one wallet provider
+    var groupedValues = Object.values(grouped);
+    if (groupedValues.length === 1) {
+      popPage(); // Remove this page from the stack so user doesn't get stuck in an infinite loop when pressing back
+      handleSelectGroup(groupedValues[0]);
+    }
+  }, [grouped]);
+  return Object.keys(grouped).length === 0 ? 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-72"),
+    children: [jsx("span", {
+      className: "text-sm font-medium",
+      children: "No wallet providers available."
+    }), jsx("span", {
+      children: "Only wallets supporting EIP-1193 (Ethereum) or the Solana wallet standard are supported."
+    })]
+  }) : jsx("div", {
+    className: clsx("w-72 min-h-42 max-h-64 mt-12 overflow-y-auto zeroxkey-scrollbar p-0.5", isMobile ? "w-full" : "w-72"),
+    children: jsx("div", {
+      className: "flex flex-col gap-2",
+      children: Object.entries(grouped).map(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+          name = _ref3[0],
+          group = _ref3[1];
+        var _useState5 = useState(false),
+          _useState6 = _slicedToArray(_useState5, 2),
+          isHovering = _useState6[0],
+          setIsHovering = _useState6[1];
+        var first = group[0];
+        return jsxs(ActionButton, {
+          onMouseEnter: function onMouseEnter() {
+            return setIsHovering(true);
+          },
+          onMouseLeave: function onMouseLeave() {
+            return setIsHovering(false);
+          },
+          onClick: function onClick() {
+            return handleSelectGroup(group);
+          },
+          className: "relative flex items-center justify-between w-full text-inherit bg-button-light dark:bg-button-dark overflow-hidden",
+          children: [jsxs("div", {
+            className: "flex items-center gap-2 overflow-hidden",
+            children: [jsx("img", {
+              src: first === null || first === void 0 ? void 0 : first.info.icon,
+              alt: first === null || first === void 0 ? void 0 : first.info.name,
+              className: "size-6 rounded-full"
+            }), first === null || first === void 0 ? void 0 : first.info.name]
+          }), jsx("div", {
+            className: clsx("flex items-center transition-all gap-1"),
+            children: group.map(function (c, idx) {
+              var Logo;
+              if (isEthereumProvider(c)) {
+                Logo = EthereumLogo;
+              } else if (isSolanaProvider(c)) {
+                Logo = SolanaLogo;
+              } else {
+                // we should never reach here
+                // if we do then it means we forgot to update the auth component after adding a new chain
+                throw new Error("Unsupported provider namespace. Expected Ethereum or Solana.");
+              }
+              var delay = 50 + idx * 30; // Staggered delay: leftmost has largest
+              return jsxs("div", {
+                style: {
+                  transitionDelay: "".concat(delay, "ms")
+                },
+                className: clsx("relative", "size-4", "transition-all duration-200", isHovering ? "-translate-x-8" : "translate-x-0"),
+                children: [jsx(Logo, {
+                  className: "size-4"
+                }), canDisconnect(c, shouldShowDisconnect) && jsx(ConnectedIndicator, {
+                  isPinging: isHovering
+                })]
+              }, c.chainInfo.namespace);
+            })
+          }), jsx(FontAwesomeIcon, {
+            className: clsx("absolute transition-all duration-200", isHovering ? "right-4" : "-right-4", group.length === 1 && canDisconnect(group[0], shouldShowDisconnect) ? "text-danger-light dark:text-danger-dark" : "text-icon-text-light dark:text-icon-text-dark"),
+            size: group.length === 1 && canDisconnect(group[0], shouldShowDisconnect) ? "lg" : "1x",
+            icon: group.length === 1 && canDisconnect(group[0], shouldShowDisconnect) ? faClose : faChevronRight
+          })]
+        }, name);
+      })
+    })
+  });
+}
+function DisconnectWalletScreen(props) {
+  var _provider$info$icon;
+  var provider = props.provider,
+    onDisconnect = props.onDisconnect;
+  var _useModal3 = useModal(),
+    isMobile = _useModal3.isMobile;
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isLoading = _useState8[0],
+    setIsLoading = _useState8[1];
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    hasError = _useState0[0],
+    setHasError = _useState0[1];
+  var handleDisconnect = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+      return _regenerator().w(function (_context2) {
+        while (1) switch (_context2.p = _context2.n) {
+          case 0:
+            setIsLoading(true);
+            setHasError(false);
+            _context2.p = 1;
+            _context2.n = 2;
+            return onDisconnect(provider);
+          case 2:
+            _context2.n = 4;
+            break;
+          case 3:
+            _context2.p = 3;
+            _context2.v;
+            setHasError(true);
+          case 4:
+            _context2.p = 4;
+            setIsLoading(false);
+            return _context2.f(4);
+          case 5:
+            return _context2.a(2);
+        }
+      }, _callee2, null, [[1, 3, 4, 5]]);
+    }));
+    return function handleDisconnect() {
+      return _ref4.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"
+      })
+    })]
+  });
+}
+function ConnectedIndicator(props) {
+  var _props$isPinging = props.isPinging,
+    isPinging = _props$isPinging === void 0 ? false : _props$isPinging;
+  return jsxs("div", {
+    className: "flex absolute top-[-2px] right-0",
+    children: [isPinging && jsx("div", {
+      className: "absolute animate-ping size-[6px] bg-success-light dark:bg-success-dark rounded-full border border-modal-background-light dark:border-modal-background-dark"
+    }), jsx("div", {
+      className: "size-[6px] bg-success-light dark:bg-success-dark rounded-full border border-modal-background-light dark:border-modal-background-dark"
+    })]
+  });
+}
+function QRCodeDisplay(props) {
+  var uri = props.uri,
+    icon = props.icon,
+    isLoading = props.isLoading;
+  return jsxs("div", {
+    className: "relative inline-block",
+    children: [jsx(QRCodeSVG, {
+      className: clsx("block border border-modal-background-dark/20 dark:border-modal-background-light/20", "shadow-[0_0_42px] shadow-primary-light/50 dark:shadow-[0_0_42px] dark:shadow-primary-dark/50", isLoading && "blur-sm"),
+      value: uri,
+      imageSettings: {
+        src: icon,
+        width: 24,
+        height: 24,
+        excavate: true
+      },
+      size: 200
+    }), isLoading && jsx("div", {
+      className: "absolute inset-0 flex items-center justify-center",
+      children: jsx(Spinner, {
+        className: "size-12",
+        strokeWidth: 2
+      })
+    })]
+  });
+}
+function WalletConnectScreen(props) {
+  var _inputProvider$connec, _provider$connectedAd, _provider$connectedAd2, _provider$uri, _provider$info$icon2;
+  var inputProvider = props.provider,
+    onAction = props.onAction,
+    onDisconnect = props.onDisconnect,
+    successPageDuration = props.successPageDuration;
+  var _useModal4 = useModal(),
+    pushPage = _useModal4.pushPage,
+    popPages = _useModal4.popPages,
+    closeModal = _useModal4.closeModal,
+    isMobile = _useModal4.isMobile;
+  var _useZeroXKey3 = useZeroXKey(),
+    walletProviders = _useZeroXKey3.walletProviders;
+  var _useState1 = useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    isDisconnecting = _useState10[0],
+    setIsDisconnecting = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    isConnecting = _useState12[0],
+    setIsConnecting = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    disconnectError = _useState14[0],
+    setDisconnectError = _useState14[1];
+  var _useState15 = useState(((_inputProvider$connec = inputProvider.connectedAddresses) === null || _inputProvider$connec === void 0 ? void 0 : _inputProvider$connec.length) > 0),
+    _useState16 = _slicedToArray(_useState15, 2),
+    showConnectedScreen = _useState16[0],
+    setShowConnectedScreen = _useState16[1];
+  var _useState17 = useState(false),
+    _useState18 = _slicedToArray(_useState17, 2),
+    showCopied = _useState18[0],
+    setShowCopied = _useState18[1];
+  // Use a ref to track the latest provider for use in callbacks
+  var latestProviderRef = useRef(null);
+  // Find the current provider state
+  var provider = walletProviders.find(function (p) {
+    return p.interfaceType === inputProvider.interfaceType && p.chainInfo.namespace === inputProvider.chainInfo.namespace;
+  });
+  // if provider is not found then that means that the user entered this screen
+  // while WalletConnect was still initializing, and then it failed to initialize
+  useEffect(function () {
+    if (!provider) {
+      // we have to go back two pages here since thats the screen
+      // we get wallet providers from state
+      popPages(2);
+    }
+  }, [provider, popPages]);
+  var connectedAccount = (_provider$connectedAd = provider === null || provider === void 0 ? void 0 : (_provider$connectedAd2 = provider.connectedAddresses) === null || _provider$connectedAd2 === void 0 ? void 0 : _provider$connectedAd2[0]) !== null && _provider$connectedAd !== void 0 ? _provider$connectedAd : null;
+  // Initial connection effect
+  useEffect(function () {
+    if (provider) {
+      latestProviderRef.current = provider;
+      // we don't try to connect if WalletConnect is still initializing or we are already connecting
+      if (!isConnecting && !provider.isLoading) {
+        var _provider$connectedAd3;
+        setShowConnectedScreen(((_provider$connectedAd3 = provider.connectedAddresses) === null || _provider$connectedAd3 === void 0 ? void 0 : _provider$connectedAd3.length) > 0);
+        runAction(provider);
+      }
+    }
+  }, [provider]);
+  // Handle the connection action - uses the ref to get latest provider
+  var runAction = useDebouncedCallback(/*#__PURE__*/function () {
+    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(targetProvider) {
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.p = _context3.n) {
+          case 0:
+            setIsConnecting(true);
+            _context3.p = 1;
+            _context3.n = 2;
+            return onAction(targetProvider);
+          case 2:
+            pushPage({
+              key: "Connect Success",
+              content: jsx(SuccessPage, {
+                text: "Successfully connected to WalletConnect!",
+                onComplete: closeModal,
+                duration: successPageDuration
+              }),
+              preventBack: true,
+              showTitle: false
+            });
+            _context3.n = 4;
+            break;
+          case 3:
+            _context3.p = 3;
+            _context3.v;
+          case 4:
+            _context3.p = 4;
+            setIsConnecting(false);
+            return _context3.f(4);
+          case 5:
+            return _context3.a(2);
+        }
+      }, _callee3, null, [[1, 3, 4, 5]]);
+    }));
+    return function (_x) {
+      return _ref5.apply(this, arguments);
+    };
+  }(), 100);
+  var handleCopy = function handleCopy() {
+    setShowCopied(true);
+    navigator.clipboard.writeText("".concat(provider === null || provider === void 0 ? void 0 : provider.uri));
+    setTimeout(function () {
+      setShowCopied(false);
+    }, 1500);
+  };
+  // Handle disconnection - uses the ref to get the correct provider after state update
+  var handleDisconnect = /*#__PURE__*/function () {
+    var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+      var _t3;
+      return _regenerator().w(function (_context4) {
+        while (1) switch (_context4.p = _context4.n) {
+          case 0:
+            setIsDisconnecting(true);
+            setDisconnectError(false);
+            _context4.p = 1;
+            _context4.n = 2;
+            return onDisconnect === null || onDisconnect === void 0 ? void 0 : onDisconnect(latestProviderRef.current);
+          case 2:
+            _context4.n = 4;
+            break;
+          case 3:
+            _context4.p = 3;
+            _t3 = _context4.v;
+            console.error("Error disconnecting wallet:", _t3);
+            setDisconnectError(true);
+          case 4:
+            _context4.p = 4;
+            setIsDisconnecting(false);
+            setShowConnectedScreen(false);
+            return _context4.f(4);
+          case 5:
+            return _context4.a(2);
+        }
+      }, _callee4, null, [[1, 3, 4, 5]]);
+    }));
+    return function handleDisconnect() {
+      return _ref6.apply(this, arguments);
+    };
+  }();
+  return jsx("div", {
+    className: "p-3 flex flex-col items-center",
+    children: showConnectedScreen ? jsxs("div", {
+      className: clsx("mt-8 flex flex-col items-center gap-3", isMobile ? "w-full" : "w-96"),
+      children: [jsxs("div", {
+        className: "w-full justify-between flex items-center flex-1",
+        children: [jsx("div", {
+          className: clsx("flex items-center justify-center bg-icon-background-light dark:bg-icon-background-dark rounded-full p-2 text-icon-text-light dark:text-icon-text-dark", isMobile ? "size-18" : "size-24"),
+          children: jsx(FontAwesomeIcon, {
+            icon: faMobileScreen,
+            size: isMobile ? "3x" : "4x"
+          })
+        }), jsxs("div", {
+          className: "flex flex-row items-center justify-center space-x-2.5 font-medium text-icon-text-light dark:text-icon-text-dark",
+          children: [jsxs("div", {
+            className: "flex items-center justify-center",
+            children: [jsx("img", {
+              className: "size-5",
+              src: provider === null || provider === void 0 ? void 0 : provider.info.icon,
+              alt: "Wallet connect logo"
+            }), jsx("img", {
+              className: "size-5 absolute animate-ping",
+              src: provider === null || provider === void 0 ? void 0 : provider.info.icon,
+              alt: "Wallet connect logo"
+            })]
+          }), jsxs("span", {
+            children: [connectedAccount === null || connectedAccount === void 0 ? void 0 : connectedAccount.slice(0, 3), "...", connectedAccount === null || connectedAccount === void 0 ? void 0 : connectedAccount.slice(-3)]
+          })]
+        }), jsx("div", {
+          className: clsx("flex items-center justify-center bg-icon-background-light dark:bg-icon-background-dark rounded-full p-2 text-icon-text-light dark:text-icon-text-dark", isMobile ? "size-18" : "size-24"),
+          children: jsx(FontAwesomeIcon, {
+            icon: faLaptop,
+            size: isMobile ? "3x" : "4x"
+          })
+        })]
+      }), jsx("div", {
+        className: clsx("flex flex-row items-center mt-5 text-2xl font-bold text-center"),
+        children: "Already connected"
+      }), jsxs("div", {
+        className: "text-icon-text-light dark:text-icon-text-dark text-center text-xs flex flex-col space-y-2 !p-0",
+        children: [jsx("span", {
+          children: "Please open the wallet app on your phone to sign the message."
+        }), isDisconnecting ? jsx("span", {
+          className: "text-danger-light dark:text-danger-dark opacity-50",
+          children: "Disconnecting..."
+        }) : disconnectError ? jsx("span", {
+          className: "text-danger-light dark:text-danger-dark opacity-50",
+          children: "Error disconnecting wallet."
+        }) : jsxs("span", {
+          children: ["Need to connect a different wallet?", " ", jsx("span", {
+            className: "text-danger-light dark:text-danger-dark cursor-pointer underline",
+            onClick: handleDisconnect,
+            children: "Disconnect"
+          }), " ", "this wallet first."]
+        })]
+      })]
+    }) : jsxs("div", {
+      className: clsx("mt-8 flex flex-col items-center gap-3", isMobile ? "w-full" : "w-96"),
+      children: [jsx(QRCodeDisplay, {
+        uri: provider !== null && provider !== void 0 && provider.isLoading ? "https://www.0xkey.com/" : (_provider$uri = provider === null || provider === void 0 ? void 0 : provider.uri) !== null && _provider$uri !== void 0 ? _provider$uri : "",
+        icon: (_provider$info$icon2 = provider === null || provider === void 0 ? void 0 : provider.info.icon) !== null && _provider$info$icon2 !== void 0 ? _provider$info$icon2 : "",
+        isLoading: !!(provider !== null && provider !== void 0 && provider.isLoading)
+      }), jsxs(BaseButton, {
+        onClick: handleCopy,
+        className: clsx("text-xs font-semibold bg-transparent border-none text-icon-text-light dark:text-icon-text-dark", "flex flex-row items-center gap-x-2 px-3 py-2 rounded-full transition-all", "hover:bg-icon-background-light dark:hover:bg-icon-background-dark active:scale-95", (provider === null || provider === void 0 ? void 0 : provider.isLoading) && "invisible pointer-events-none"),
+        children: [jsx("span", {
+          children: "Copy link"
+        }), jsxs("div", {
+          className: "relative",
+          children: [jsx(FontAwesomeIcon, {
+            icon: showCopied ? faCheck : faCopy,
+            className: clsx("transition-colors", showCopied ? "text-success-light dark:text-success-dark" : "text-icon-text-light dark:text-icon-text-dark")
+          }), showCopied && jsx(FontAwesomeIcon, {
+            icon: faCheck,
+            className: "absolute inset-0 m-auto text-success-light dark:text-success-dark animate-ping"
+          })]
+        })]
+      }), jsx("div", {
+        className: clsx("text-2xl font-bold text-center"),
+        children: provider !== null && provider !== void 0 && provider.isLoading ? "Initializing WalletConnect..." : "Use your phone"
+      }), jsx("div", {
+        className: "text-icon-text-light dark:text-icon-text-dark text-center !p-0",
+        children: provider !== null && provider !== void 0 && provider.isLoading ? "Preparing your connection. This will only take a moment." : "Scan this QR code with your WalletConnect-compatible wallet to connect"
+      })]
+    })
+  });
+}
+
+export { ConnectedIndicator, DisconnectWalletScreen, ExternalWalletChainSelector, ExternalWalletSelector, WalletAuthButton, WalletConnectScreen };
+//# sourceMappingURL=Wallet.mjs.map