@openfort/react 0.0.26 → 0.0.27

package/build/index.es.js

@@ -1,6 +1,6 @@
 import { Openfort as Openfort$1, EmbeddedState, AccountTypeEnum, RecoveryMethod, MissingRecoveryPasswordError, ChainTypeEnum, OAuthProvider } from '@openfort/openfort-js';
 export { AccountTypeEnum, OAuthProvider, OpenfortEvents, RecoveryMethod, ThirdPartyOAuthProvider, openfortEvents } from '@openfort/openfort-js';
-import { http, useConfig, useConnectors as useConnectors$1, useConnect as useConnect$1, useAccount, useDisconnect, useChainId, useSwitchChain, createConfig, useEnsAddress, useEnsName, useEnsAvatar, useBalance, WagmiContext, useBlockNumber } from 'wagmi';
+import { http, useConfig, useConnectors as useConnectors$1, useConnect as useConnect$1, useAccount, useDisconnect, useChainId, useSwitchChain, createConfig, useEnsAddress, useEnsName, useEnsAvatar, useBalance, usePublicClient, WagmiContext, useBlockNumber } from 'wagmi';
 import { mainnet, polygon, optimism, arbitrum, sepolia } from 'wagmi/chains';
 import { safe, injected, coinbaseWallet, walletConnect } from '@wagmi/connectors';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -13,18 +13,18 @@ import { createPortal } from 'react-dom';
 import { detect } from 'detect-browser';
 import { useTransition } from 'react-transition-state';
 import ResizeObserver from 'resize-observer-polyfill';
+import { walletConnect as walletConnect$1 } from 'wagmi/connectors';
 import useMeasure from 'react-use-measure';
 import QRCodeUtil from 'qrcode';
-import { walletConnect as walletConnect$1 } from 'wagmi/connectors';
 import { normalize } from 'viem/ens';
 import { AxiosError } from 'axios';
 import { createSiweMessage } from 'viem/siwe';
-import { signMessage } from '@wagmi/core';
+import { switchChain, signMessage } from '@wagmi/core';
 import calculateEntropy from 'fast-password-entropy';
 import { parseSignature } from 'viem';
 import { hashAuthorization } from 'viem/utils';
 
-const OPENFORT_VERSION = '0.0.26';
+const OPENFORT_VERSION = '0.0.27';
 
 var OpenfortErrorType;
 (function (OpenfortErrorType) {
@@ -416,7 +416,7 @@ const walletConfigs = {
         shortName: 'Browser',
         icon: jsx(Logos.Injected, {}),
     },
-    'metaMask, metaMask-io, io.metamask, io.metamask.mobile, metaMaskSDK': {
+    'metaMask, MetaMask, metaMask-io, io.metamask, io.metamask.mobile, metaMaskSDK': {
         name: 'MetaMask',
         icon: jsx(Logos.MetaMask, {}),
         iconConnector: jsx(Logos.MetaMask, {}),
@@ -5988,269 +5988,6 @@ const About = () => {
                         } }, i))) }) }), jsx(Button, { href: ctaUrl, arrow: true, children: locales.aboutScreen_ctaText })] }));
 };
 
-const Shimmer$1 = keyframes `
-  0%{ transform: translate(-100%) rotate(-45deg); }
-  100%{ transform: translate(100%) rotate(-80deg); }
-`;
-styled(motion.div) `
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-`;
-const InfoBox = styled.div `
-  padding: 24px 24px 28px;
-  border-radius: var(--ck-tertiary-border-radius, 24px);
-  box-shadow: var(--ck-tertiary-box-shadow, none);
-  background: var(--ck-body-background-tertiary);
-  ${ModalBody} {
-    max-width: none;
-  }
-`;
-const InfoBoxButtons = styled.div `
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-  margin: 5px -8px -12px;
-  button {
-  }
-`;
-styled(motion.div) `
-  text-align: center;
-  margin-top: 16px;
-  margin-bottom: -6px;
-`;
-styled(motion.button) `
-  appearance: none;
-  user-select: none;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  height: 42px;
-  padding: 0 16px;
-  border-radius: 6px;
-  background: none;
-  color: var(--ck-body-color-muted);
-  font-size: 15px;
-  line-height: 18px;
-  font-weight: 500;
-  /* will-change: transform; */
-  transition: color 200ms ease, transform 100ms ease;
-  svg {
-    transition: all 100ms ease-out;
-    display: block;
-    position: relative;
-    top: 2px;
-    left: 2px;
-    transform: translateZ(0px);
-    path,
-    circle {
-      transition: all 100ms ease-out;
-    }
-    path:last-of-type {
-      transform-origin: 0 0;
-      transform: scaleX(1.3) skewY(-12deg);
-      opacity: 0;
-    }
-    circle {
-      transform: translate(20%, -15%);
-    }
-  }
-  &:hover {
-    color: var(--ck-body-color-muted-hover);
-    svg {
-      path,
-      circle {
-        opacity: 1;
-        transform: none;
-      }
-    }
-  }
-  &:active {
-    transform: scale(0.96);
-  }
-`;
-styled(motion.div) `
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 0 0 16px;
-  overflow-y: scroll;
-  max-height: 20rem;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-`;
-styled(motion.button) `
-  cursor: pointer;
-  user-select: none;
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: 0 20px;
-  width: 100%;
-  height: 64px;
-  font-size: 17px;
-  font-weight: var(--ck-primary-button-font-weight, 500);
-  line-height: 20px;
-  text-align: var(--ck-body-button-text-align, left);
-  transition: 180ms ease;
-  transition-property: background, color, box-shadow, transform, opacity;
-  will-change: transform, box-shadow, background-color, color, opacity;
-
-  --fallback-color: var(--ck-primary-button-color);
-  --fallback-background: var(--ck-primary-button-background);
-  --fallback-box-shadow: var(--ck-primary-button-box-shadow);
-  --fallback-border-radius: var(--ck-primary-button-border-radius);
-
-  --color: var(--ck-primary-button-color, var(--fallback-color));
-  --background: var(--ck-primary-button-background, var(--fallback-background));
-  --box-shadow: var(--ck-primary-button-box-shadow, var(--fallback-box-shadow));
-  --border-radius: var(
-    --ck-primary-button-border-radius,
-    var(--fallback-border-radius)
-  );
-
-  --hover-color: var(--ck-primary-button-hover-color, var(--color));
-  --hover-background: var(
-    --ck-primary-button-hover-background,
-    var(--background)
-  );
-  --hover-box-shadow: var(
-    --ck-primary-button-hover-box-shadow,
-    var(--box-shadow)
-  );
-  --hover-border-radius: var(
-    --ck-primary-button-hover-border-radius,
-    var(--border-radius)
-  );
-
-  --active-color: var(--ck-primary-button-active-color, var(--hover-color));
-  --active-background: var(
-    --ck-primary-button-active-background,
-    var(--hover-background)
-  );
-  --active-box-shadow: var(
-    --ck-primary-button-active-box-shadow,
-    var(--hover-box-shadow)
-  );
-  --active-border-radius: var(
-    --ck-primary-button-active-border-radius,
-    var(--hover-border-radius)
-  );
-
-  color: var(--color);
-  background: var(--background);
-  box-shadow: var(--box-shadow);
-  border-radius: var(--border-radius);
-
-  &:disabled {
-    transition: 180ms ease;
-    opacity: 0.4;
-  }
-
-  --bg: var(--background);
-  &:not(:disabled) {
-    &:hover {
-      color: var(--hover-color);
-      background: var(--hover-background);
-      box-shadow: var(--hover-box-shadow);
-      border-radius: var(--hover-border-radius);
-      --bg: var(--hover-background, var(--background));
-    }
-    &:focus-visible {
-      transition-duration: 100ms;
-      color: var(--hover-color);
-      background: var(--hover-background);
-      box-shadow: var(--hover-box-shadow);
-      border-radius: var(--hover-border-radius);
-      --bg: var(--hover-background, var(--background));
-    }
-    &:active {
-      color: var(--active-color);
-      background: var(--active-background);
-      box-shadow: var(--active-box-shadow);
-      border-radius: var(--active-border-radius);
-      --bg: var(--active-background, var(--background));
-    }
-  }
-`;
-styled(motion.span) `
-  position: relative;
-  top: var(--ck-recent-badge-top-offset, 0.5px);
-  display: inline-block;
-  padding: 10px 7px;
-  line-height: 0;
-  font-size: 13px;
-  font-weight: 400;
-  border-radius: var(--ck-recent-badge-border-radius, var(--border-radius));
-  color: var(
-    --ck-recent-badge-color,
-    var(--ck-accent-color, var(--ck-body-color-muted, currentColor))
-  );
-  background: var(--ck-recent-badge-background, transparent);
-  overflow: hidden;
-  span {
-    display: inline-block;
-    position: relative;
-  }
-  &:before {
-    z-index: 1;
-    content: '';
-    position: absolute;
-    inset: 0;
-    opacity: 0.4;
-    box-shadow: var(--ck-recent-badge-box-shadow, inset 0 0 0 1px currentColor);
-    border-radius: inherit;
-  }
-  &:after {
-    z-index: 2;
-    content: '';
-    position: absolute;
-    inset: -10%;
-    top: -110%;
-    aspect-ratio: 1/1;
-    opacity: 0.7;
-    background: linear-gradient(
-      170deg,
-      transparent 10%,
-      var(--ck-recent-badge-background, var(--bg)) 50%,
-      transparent 90%
-    );
-    animation: ${Shimmer$1} 2s linear infinite;
-  }
-`;
-styled(motion.span) `
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  padding: 2px 0;
-  padding-right: 38px;
-`;
-styled(motion.div) `
-  position: absolute;
-  right: 20px;
-  width: 32px;
-  height: 32px;
-  overflow: hidden;
-  svg,
-  img {
-    display: block;
-    position: relative;
-    pointer-events: none;
-    overflow: hidden;
-    border-radius: 27.5%;
-    width: 100%;
-    height: 100%;
-  }
-`;
-
 function useIsMobile() {
     const [mobile, setMobile] = useState(isMobile());
     useEffect(() => {
@@ -6263,6 +6000,58 @@ function useIsMobile() {
     return mobile;
 }
 
+function useWalletConnectModal() {
+    const { log } = useOpenfort();
+    const { connectAsync, connectors } = useConnect();
+    const [isOpen, setIsOpen] = useState(false);
+    return {
+        isOpen,
+        open: async () => {
+            // add modal styling because wagmi does not let you add styling to the modal
+            const w3mcss = document.createElement('style');
+            w3mcss.innerHTML = `w3m-modal, wcm-modal{ --wcm-z-index: 2147483647; --w3m-z-index:2147483647; }`;
+            document.head.appendChild(w3mcss);
+            const clientConnector = connectors.find((c) => isWalletConnectConnector(c.id));
+            if (clientConnector) {
+                try {
+                    const provider = await clientConnector.getProvider();
+                    const projectId = provider.rpc.projectId;
+                    const connector = walletConnect$1({
+                        projectId,
+                        showQrModal: true,
+                    });
+                    setIsOpen(true);
+                    try {
+                        await connectAsync({ connector: connector });
+                    }
+                    catch (err) {
+                        log('WalletConnect', err);
+                        return {
+                            error: 'Connection failed',
+                        };
+                    }
+                    setIsOpen(false);
+                    // remove modal styling
+                    document.head.removeChild(w3mcss);
+                    return {};
+                }
+                catch (err) {
+                    log('Could not get WalletConnect provider', err);
+                    return {
+                        error: 'Could not get WalletConnect provider',
+                    };
+                }
+            }
+            else {
+                log('Configuration error: Please provide a WalletConnect Project ID in your wagmi config.');
+                return {
+                    error: 'Configuration error: Please provide a WalletConnect Project ID in your wagmi config.',
+                };
+            }
+        },
+    };
+}
+
 const Shimmer = keyframes `
   0%{ transform: translate(-100%) rotate(-45deg); }
   100%{ transform: translate(100%) rotate(-80deg); }
@@ -7076,161 +6865,200 @@ const ConnectorItem = ({ wallet, isRecent, }) => {
         }, children: content() }));
 };
 
-const Wallets = () => {
-    var _a, _b;
-    const context = useOpenfort();
-    const locales = useLocales({});
-    const isMobile = useIsMobile();
-    return (jsxs(PageContent, { style: { width: 312 }, children: [jsx(ConnectorList, {}), isMobile ? (jsx(Fragment, { children: jsxs(InfoBox, { children: [jsxs(ModalContent, { style: { padding: 0, textAlign: 'left' }, children: [jsx(ModalH1, { "$small": true, children: locales.connectorsScreen_h1 }), jsx(ModalBody, { children: locales.connectorsScreen_p })] }), jsxs(InfoBoxButtons, { children: [!((_a = context.uiConfig) === null || _a === void 0 ? void 0 : _a.hideQuestionMarkCTA) && (jsx(Button, { variant: 'tertiary', onClick: () => context.setRoute(routes.ABOUT), children: locales.learnMore })), !((_b = context.uiConfig) === null || _b === void 0 ? void 0 : _b.hideNoWalletCTA) && (jsx(Button, { variant: 'tertiary', onClick: () => context.setRoute(routes.ONBOARDING), children: locales.getWallet }))] })] }) })) : (jsx(Fragment, {}))] }));
-};
-
-const QRCodeContainer = styled(motion.div) `
-  z-index: 3;
+const LogoContainer$3 = styled(motion.div) `
+  z-index: 4;
   position: relative;
   overflow: hidden;
-  height: 0;
-  padding-bottom: 100% !important;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 1px 0 2px;
-  border-radius: var(--ck-qr-border-radius, 24px);
-  background: var(--ck-qr-background, transparent);
-  box-shadow: 0 0 0 1px var(--ck-qr-border-color);
-  backface-visibility: hidden;
   svg {
+    z-index: 3;
+    position: relative;
     display: block;
-    max-width: 100%;
-    width: 100%;
-    height: auto;
   }
 `;
-const QRCodeContent = styled(motion.div) `
+const Logo$2 = styled(motion.div) `
+  z-index: 2;
   position: absolute;
-  inset: 13px;
-  svg {
-    width: 100% !important;
-    height: auto !important;
+  overflow: hidden;
+  inset: 6px;
+  border-radius: 24px;
+  background: var(--ck-body-background);
+  svg,
+  img {
+    pointer-events: none;
+    display: block;
+    width: 100%;
+    height: 100%;
   }
 `;
-const PlaceholderKeyframes$2 = keyframes `
-  0%{ background-position: 100% 0; }
-  100%{ background-position: -100% 0; }
+const SpinnerContainer$1 = styled(motion.div) `
+  position: absolute;
+  inset: 1px;
+  overflow: hidden;
 `;
-const QRPlaceholder = styled(motion.div) `
-  --color: var(--ck-qr-dot-color);
-  --bg: var(--ck-qr-background, var(--ck-body-background));
-
+const Spinner$3 = styled(motion.div) `
+  pointer-events: none;
+  user-select: none;
+  z-index: 1;
   position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  > div {
-    z-index: 4;
-    position: relative;
-    width: 28%;
-    height: 28%;
-    border-radius: 20px;
-    background: var(--bg);
-    box-shadow: 0 0 0 7px var(--bg);
-  }
-  > span {
-    z-index: 4;
+  inset: -25%;
+  &:before {
+    content: '';
     position: absolute;
-    background: var(--color);
-    border-radius: 12px;
-    width: 13.25%;
-    height: 13.25%;
-    box-shadow: 0 0 0 4px var(--bg);
-    &:before {
-      content: '';
-      position: absolute;
-      inset: 9px;
-      border-radius: 3px;
-      box-shadow: 0 0 0 4px var(--bg);
-    }
-    &:nth-child(1) {
-      top: 0;
-      left: 0;
-    }
-    &:nth-child(2) {
-      top: 0;
-      right: 0;
+    inset: 0;
+    background: conic-gradient(
+      from -90deg,
+      transparent,
+      transparent,
+      transparent,
+      transparent,
+      transparent,
+      var(--ck-spinner-color)
+    );
+    animation: rotateSpinner 1200ms linear infinite;
+  }
+  @keyframes rotateSpinner {
+    0% {
+      transform: rotate(0deg);
     }
-    &:nth-child(3) {
-      bottom: 0;
-      left: 0;
+    100% {
+      transform: rotate(360deg);
     }
   }
+`;
+
+const SquircleSpinner = ({ logo, connecting = true, }) => {
+    return (jsxs(LogoContainer$3, { transition: { duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }, children: [jsx(Logo$2, { children: logo }), jsx(SpinnerContainer$1, { children: jsx(AnimatePresence, { children: connecting && (jsx(Spinner$3, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: {
+                            opacity: 0,
+                            transition: {
+                                duration: 0,
+                            },
+                        } }, "Spinner")) }) }), jsxs("svg", { "aria-hidden": "true", width: "102", height: "102", viewBox: "0 0 102 102", fill: "none", children: [jsx("rect", { x: "7.57895", y: "7.57895", width: "86.8421", height: "86.8421", rx: "19.2211", stroke: "black", strokeOpacity: "0.02", strokeWidth: "1.15789" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 0H102V102H0V0ZM7 38.284C7 27.5684 7 22.2106 9.01905 18.0892C10.9522 14.1431 14.1431 10.9522 18.0892 9.01905C22.2106 7 27.5684 7 38.284 7H63.716C74.4316 7 79.7894 7 83.9108 9.01905C87.8569 10.9522 91.0478 14.1431 92.9809 18.0892C95 22.2106 95 27.5684 95 38.284V63.716C95 74.4316 95 79.7894 92.9809 83.9108C91.0478 87.8569 87.8569 91.0478 83.9108 92.9809C79.7894 95 74.4316 95 63.716 95H38.284C27.5684 95 22.2106 95 18.0892 92.9809C14.1431 91.0478 10.9522 87.8569 9.01905 83.9108C7 79.7894 7 74.4316 7 63.716V38.284ZM41.5 0.5H41.4325C34.7246 0.499996 29.6023 0.499994 25.5104 0.823325C21.388 1.14906 18.1839 1.80986 15.3416 3.20227C10.0602 5.78959 5.78959 10.0602 3.20227 15.3416C1.80986 18.1839 1.14906 21.388 0.823325 25.5104C0.499994 29.6023 0.499996 34.7246 0.5 41.4325V41.5V55.5938C0.5 55.6808 0.507407 55.766 0.521624 55.849C0.507407 55.9319 0.5 56.0172 0.5 56.1042V60.5V60.5675C0.499996 67.2754 0.499994 72.3977 0.823325 76.4896C1.14906 80.612 1.80986 83.8161 3.20227 86.6584C5.78959 91.9398 10.0602 96.2104 15.3416 98.7977C18.1839 100.19 21.388 100.851 25.5104 101.177C29.6022 101.5 34.7244 101.5 41.432 101.5H41.4324H41.5H43.4227H60.5H60.5675H60.568C67.2756 101.5 72.3977 101.5 76.4896 101.177C80.612 100.851 83.8161 100.19 86.6584 98.7977C91.9398 96.2104 96.2104 91.9398 98.7977 86.6584C100.19 83.8161 100.851 80.612 101.177 76.4896C101.5 72.3978 101.5 67.2756 101.5 60.568V60.5676V60.5V41.5V41.4324V41.432C101.5 34.7244 101.5 29.6022 101.177 25.5104C100.851 21.388 100.19 18.1839 98.7977 15.3416C96.2104 10.0602 91.9398 5.78959 86.6584 3.20227C83.8161 1.80986 80.612 1.14906 76.4896 0.823325C72.3977 0.499994 67.2754 0.499996 60.5675 0.5H60.5H41.5ZM3.5 56.1042C3.5 56.0172 3.49259 55.9319 3.47838 55.849C3.49259 55.766 3.5 55.6808 3.5 55.5938V41.5C3.5 34.7112 3.50109 29.7068 3.814 25.7467C4.1256 21.8032 4.73946 19.0229 5.89635 16.6614C8.19077 11.9779 11.9779 8.19077 16.6614 5.89635C19.0229 4.73946 21.8032 4.1256 25.7467 3.814C29.7068 3.50109 34.7112 3.5 41.5 3.5H60.5C67.2888 3.5 72.2932 3.50109 76.2533 3.814C80.1968 4.1256 82.977 4.73946 85.3386 5.89635C90.022 8.19077 93.8092 11.9779 96.1036 16.6614C97.2605 19.0229 97.8744 21.8032 98.186 25.7467C98.4989 29.7068 98.5 34.7112 98.5 41.5V60.5C98.5 67.2888 98.4989 72.2932 98.186 76.2533C97.8744 80.1968 97.2605 82.9771 96.1036 85.3386C93.8092 90.022 90.022 93.8092 85.3386 96.1036C82.977 97.2605 80.1968 97.8744 76.2533 98.186C72.2932 98.4989 67.2888 98.5 60.5 98.5H43.4227H41.5C34.7112 98.5 29.7068 98.4989 25.7467 98.186C21.8032 97.8744 19.0229 97.2605 16.6614 96.1036C11.9779 93.8092 8.19077 90.022 5.89635 85.3386C4.73946 82.9771 4.1256 80.1968 3.814 76.2533C3.50109 72.2932 3.5 67.2888 3.5 60.5V56.1042Z", fill: "var(--ck-body-background)" })] })] }));
+};
+
+const Content = styled(motion.div) `
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  position: relative;
+  left: 0;
+  right: 0;
+  ${ModalContent} {
+    padding: 0 8px 32px;
+    gap: 12px;
+  }
+`;
+const dist$1 = 2;
+const shakeKeyframes$1 = keyframes `
+  0%{ transform:none; }
+  25%{ transform:translateX(${dist$1}px); }
+  50%{ transform:translateX(-${dist$1}px); }
+  75%{ transform:translateX(${dist$1}px); }
+  100%{ transform:none; }
+`;
+const outlineKeyframes$1 = keyframes `
+  0%{ opacity:1; }
+  100%{ opacity:0; }
+`;
+const Container$7 = styled(motion.div) `
+  /*
+  background: var(
+    --ck-body-background
+  ); // To stop the overlay issue during transition for the squircle spinner
+  */
+`;
+const ConnectingContainer$1 = styled(motion.div) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10px auto 16px;
+  height: 120px;
+  //transform: scale(1.001); // fixes shifting issue between states
+`;
+const ConnectingAnimation$1 = styled(motion.div) `
+  user-select: none;
+  position: relative;
+  --spinner-error-opacity: 0;
   &:before {
-    z-index: 3;
     content: '';
     position: absolute;
-    inset: 0;
-    background: repeat;
-    background-size: 1.888% 1.888%;
-    background-image: radial-gradient(var(--color) 41%, transparent 41%);
+    inset: 1px;
+    opacity: 0;
+    background: var(--ck-body-color-danger);
+    ${(props) => props.$circle &&
+    css `
+        inset: -5px;
+        border-radius: 50%;
+        background: none;
+        box-shadow: inset 0 0 0 3.5px var(--ck-body-color-danger);
+      `}
   }
-  &:after {
-    z-index: 5;
+  ${(props) => props.$shake &&
+    css `
+      animation: ${shakeKeyframes$1} 220ms ease-out both;
+      &:before {
+        animation: ${outlineKeyframes$1} 220ms ease-out 750ms both;
+      }
+    `}
+`;
+const RetryButton = styled(motion.button) `
+  z-index: 5;
+  appearance: none;
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 16px;
+  cursor: pointer;
+  overflow: hidden;
+  background: none;
+
+  color: var(--ck-body-background-secondary);
+  transition: color 200ms ease;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
+
+  &:before {
+    z-index: 3;
     content: '';
     position: absolute;
     inset: 0;
-    transform: scale(1.5) rotate(45deg);
-    background-image: linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0) 50%,
-      rgba(255, 255, 255, 1),
-      rgba(255, 255, 255, 0)
-    );
-    background-size: 200% 100%;
-    animation: ${PlaceholderKeyframes$2} 1000ms linear infinite both;
+    opacity: 0;
+    transition: opacity 200ms ease;
+    background: var(--ck-body-color);
+  }
+
+  &:hover:before {
+    opacity: 0.1;
   }
 `;
-const LogoContainer$3 = styled(motion.div) `
-  z-index: 6;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  transform: translateY(50%) scale(0.9999); // Shifting fix
-`;
-const LogoIcon = styled(motion.div) `
-  z-index: 6;
+const RetryIconContainer = styled(motion.div) `
   position: absolute;
-  left: 50%;
-  overflow: hidden;
+  inset: 0;
 
-  transform: translate(-50%, -50%) scale(0.9999); // Shifting fix
+  &:before {
+    z-index: 1;
+    content: '';
+    position: absolute;
+    inset: 3px;
+    border-radius: 16px;
+    background: conic-gradient(
+      from 90deg,
+      currentColor 10%,
+      var(--ck-body-color) 80%
+    );
+  }
 
   svg {
+    z-index: 2;
     display: block;
     position: relative;
     width: 100%;
     height: 100%;
   }
-
-  ${(props) => props.$wcLogo
-    ? css `
-          width: 29%;
-          height: 20.5%;
-        `
-    : css `
-          width: 28%;
-          height: 28%;
-          border-radius: 17px;
-          &:before {
-            pointer-events: none;
-            z-index: 2;
-            content: '';
-            position: absolute;
-            inset: 0;
-            border-radius: inherit;
-            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
-          }
-        `}
 `;
 
 const TooltipWindow = styled(motion.div) `
@@ -7395,13 +7223,278 @@ const Tooltip = ({ children, message, open, xOffset = 0, yOffset = 0, delay, })
                                 }, children: [message, jsx(TooltipTail, { "$size": size })] }) }) })) }) })] }));
 };
 
-const generateMatrix = (value, errorCorrectionLevel) => {
-    const arr = Array.prototype.slice.call(QRCodeUtil.create(value, { errorCorrectionLevel }).modules.data, 0);
-    const sqrt = Math.sqrt(arr.length);
-    return arr.reduce((rows, key, index) => (index % sqrt === 0
-        ? rows.push([key])
-        : rows[rows.length - 1].push(key)) && rows, []);
-};
+const LoadingTextWrapper = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 12px;
+  padding: 0 8px 16px;
+  text-align: center;
+`;
+const ConnectingContainer = styled(motion.div) `
+display: flex;
+align-items: center;
+justify-content: center;
+margin: 10px auto 16px;
+height: 120px;
+`;
+const dist = 2;
+const shakeKeyframes = keyframes `
+  0%{ transform:none; }
+  25%{ transform:translateX(${dist}px); }
+  50%{ transform:translateX(-${dist}px); }
+  75%{ transform:translateX(${dist}px); }
+  100%{ transform:none; }
+`;
+const outlineKeyframes = keyframes `
+  0%{ opacity:0; }
+  100%{ opacity:1; }
+`;
+const ConnectingAnimation = styled(motion.div) `
+  position: relative;
+  user-select: none;
+  position: relative;
+  --spinner-error-opacity: 0;
+  &:before {
+    content: '';
+    position: absolute;
+    inset: 1px;
+    opacity: 0;
+    background: ${(props) => props.$color};
+  }
+  ${(props) => !!props.$color &&
+    css `
+    &:before {
+      opacity: 1;
+    }
+  `}
+  ${(props) => props.$shake &&
+    css `
+      animation: ${shakeKeyframes} 220ms ease-out both;
+      &:before {
+        animation: ${outlineKeyframes} 220ms ease-out both;
+      }
+    `}
+`;
+const Loader = ({ header, description, icon, isError = false, isSuccess = false, isLoading = !isError && !isSuccess, onRetry, }) => {
+    const { uiConfig: options } = useOpenfort();
+    const { triggerResize } = useOpenfort();
+    const locales = useLocales();
+    useEffect(() => {
+        return () => triggerResize();
+    }, []);
+    const renderLogo = () => {
+        if (icon) {
+            return icon;
+        }
+        if (options === null || options === void 0 ? void 0 : options.logo) {
+            if (typeof options.logo === 'string') {
+                return jsx("img", { src: options.logo, alt: "Logo", style: { width: '100%' } });
+            }
+            return options.logo;
+        }
+        return jsx(Logos.Openfort, {});
+    };
+    return (jsxs(Fragment, { children: [jsx(ConnectingContainer, { children: jsxs(ConnectingAnimation, { "$color": isSuccess ? 'var(--ck-body-color-valid)' : isError ? 'var(--ck-body-color-danger)' : undefined, "$shake": isError, children: [jsx(AnimatePresence, { children: (isError && onRetry) && (jsx(RetryButton, { "aria-label": "Retry", initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, whileTap: { scale: 0.9 }, transition: { duration: 0.1 }, onClick: onRetry, children: jsx(RetryIconContainer, { children: jsx(Tooltip, { open: isError, message: locales.tryAgainQuestion, xOffset: -6, children: jsx(RetryIconCircle, {}) }) }) })) }), jsx(SquircleSpinner, { logo: jsx("div", { style: {
+                                    padding: '12px',
+                                    position: 'relative',
+                                    width: '100%',
+                                }, children: renderLogo() }), connecting: isLoading })] }) }), jsxs(LoadingTextWrapper, { children: [isLoading && (jsxs(Fragment, { children: [jsx(ModalH1, { children: "Loading, please wait" }), jsx(ModalBody, { children: description !== null && description !== void 0 ? description : header })] })), isSuccess && (jsxs(Fragment, { children: [jsxs(ModalH1, { "$valid": true, children: [jsx(TickIcon, {}), " ", header] }), jsx(ModalBody, { children: description })] })), isError && (jsxs(Fragment, { children: [jsx(ModalH1, { "$error": true, children: header }), jsx(ModalBody, { children: description })] }))] })] }));
+};
+
+const ConnectWithMobile$1 = () => {
+    const { open: openWalletConnectModal } = useWalletConnectModal();
+    const [error, setError] = useState(undefined);
+    const { connect, connectors } = useConnect$1();
+    const { connector, address } = useAccount();
+    const { setRoute, setConnector } = useOpenfort();
+    const openWCModal = async () => {
+        setError(undefined);
+        const { error } = await openWalletConnectModal();
+        if (error) {
+            setError(error);
+        }
+    };
+    useEffect(() => {
+        openWCModal();
+    }, [connect, connectors]);
+    useEffect(() => {
+        if (connector && address) {
+            const walletConnectDeeplinkChoice = localStorage.getItem("WALLETCONNECT_DEEPLINK_CHOICE");
+            if (walletConnectDeeplinkChoice) {
+                const parsedChoice = JSON.parse(walletConnectDeeplinkChoice);
+                setConnector({ id: parsedChoice.name });
+            }
+            else {
+                setConnector({ id: connector.id });
+            }
+            setRoute(routes.CONNECT_WITH_MOBILE);
+        }
+    }, [address, connector]);
+    return (jsx(Loader, { header: error ? "Error connecting wallet." : `Connecting...`, isError: !!error, description: error, onRetry: () => openWCModal() }));
+};
+const Wallets = () => {
+    const isMobile = useIsMobile();
+    return (jsx(PageContent, { style: { width: 312 }, children: isMobile ? (jsx(ConnectWithMobile$1, {})) : (jsx(ConnectorList, {})) }));
+};
+
+const QRCodeContainer = styled(motion.div) `
+  z-index: 3;
+  position: relative;
+  overflow: hidden;
+  height: 0;
+  padding-bottom: 100% !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 1px 0 2px;
+  border-radius: var(--ck-qr-border-radius, 24px);
+  background: var(--ck-qr-background, transparent);
+  box-shadow: 0 0 0 1px var(--ck-qr-border-color);
+  backface-visibility: hidden;
+  svg {
+    display: block;
+    max-width: 100%;
+    width: 100%;
+    height: auto;
+  }
+`;
+const QRCodeContent = styled(motion.div) `
+  position: absolute;
+  inset: 13px;
+  svg {
+    width: 100% !important;
+    height: auto !important;
+  }
+`;
+const PlaceholderKeyframes$2 = keyframes `
+  0%{ background-position: 100% 0; }
+  100%{ background-position: -100% 0; }
+`;
+const QRPlaceholder = styled(motion.div) `
+  --color: var(--ck-qr-dot-color);
+  --bg: var(--ck-qr-background, var(--ck-body-background));
+
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  > div {
+    z-index: 4;
+    position: relative;
+    width: 28%;
+    height: 28%;
+    border-radius: 20px;
+    background: var(--bg);
+    box-shadow: 0 0 0 7px var(--bg);
+  }
+  > span {
+    z-index: 4;
+    position: absolute;
+    background: var(--color);
+    border-radius: 12px;
+    width: 13.25%;
+    height: 13.25%;
+    box-shadow: 0 0 0 4px var(--bg);
+    &:before {
+      content: '';
+      position: absolute;
+      inset: 9px;
+      border-radius: 3px;
+      box-shadow: 0 0 0 4px var(--bg);
+    }
+    &:nth-child(1) {
+      top: 0;
+      left: 0;
+    }
+    &:nth-child(2) {
+      top: 0;
+      right: 0;
+    }
+    &:nth-child(3) {
+      bottom: 0;
+      left: 0;
+    }
+  }
+  &:before {
+    z-index: 3;
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: repeat;
+    background-size: 1.888% 1.888%;
+    background-image: radial-gradient(var(--color) 41%, transparent 41%);
+  }
+  &:after {
+    z-index: 5;
+    content: '';
+    position: absolute;
+    inset: 0;
+    transform: scale(1.5) rotate(45deg);
+    background-image: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0) 50%,
+      rgba(255, 255, 255, 1),
+      rgba(255, 255, 255, 0)
+    );
+    background-size: 200% 100%;
+    animation: ${PlaceholderKeyframes$2} 1000ms linear infinite both;
+  }
+`;
+const LogoContainer$2 = styled(motion.div) `
+  z-index: 6;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: translateY(50%) scale(0.9999); // Shifting fix
+`;
+const LogoIcon = styled(motion.div) `
+  z-index: 6;
+  position: absolute;
+  left: 50%;
+  overflow: hidden;
+
+  transform: translate(-50%, -50%) scale(0.9999); // Shifting fix
+
+  svg {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  ${(props) => props.$wcLogo
+    ? css `
+          width: 29%;
+          height: 20.5%;
+        `
+    : css `
+          width: 28%;
+          height: 28%;
+          border-radius: 17px;
+          &:before {
+            pointer-events: none;
+            z-index: 2;
+            content: '';
+            position: absolute;
+            inset: 0;
+            border-radius: inherit;
+            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
+          }
+        `}
+`;
+
+const generateMatrix = (value, errorCorrectionLevel) => {
+    const arr = Array.prototype.slice.call(QRCodeUtil.create(value, { errorCorrectionLevel }).modules.data, 0);
+    const sqrt = Math.sqrt(arr.length);
+    return arr.reduce((rows, key, index) => (index % sqrt === 0
+        ? rows.push([key])
+        : rows[rows.length - 1].push(key)) && rows, []);
+};
 function QRCode({ ecl = 'M', size: sizeProp = 200, uri, clearArea = false, image, imageBackground = 'transparent', }) {
     const logoSize = clearArea ? 76 : 0;
     const size = sizeProp - 10 * 2;
@@ -7480,7 +7573,7 @@ function useWindowSize() {
 function CustomQRCode({ value, image, imageBackground, imagePosition = 'center', tooltipMessage, }) {
     const windowSize = useWindowSize();
     const Logo = windowSize.width > 920 && tooltipMessage ? (jsx(Tooltip, { xOffset: 139, yOffset: 5, delay: 0.1, message: tooltipMessage, children: image })) : (image);
-    return (jsx(QRCodeContainer, { children: jsxs(QRCodeContent, { children: [image && (jsx(LogoContainer$3, { children: jsx(LogoIcon, { "$wcLogo": imagePosition !== 'center', style: {
+    return (jsx(QRCodeContainer, { children: jsxs(QRCodeContent, { children: [image && (jsx(LogoContainer$2, { children: jsx(LogoIcon, { "$wcLogo": imagePosition !== 'center', style: {
                             background: imagePosition === 'center' ? imageBackground : undefined,
                         }, children: Logo }) })), jsx(AnimatePresence, { initial: false, children: value ? (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, position: 'absolute', inset: [0, 0] }, transition: {
                             duration: 0.2,
@@ -7570,49 +7663,7 @@ const WalletList = styled.div `
       }
     `}
 `;
-const Container$7 = styled.div ``;
-
-function useWalletConnectModal() {
-    const { log } = useOpenfort();
-    const { connectAsync, connectors } = useConnect();
-    const [isOpen, setIsOpen] = useState(false);
-    return {
-        isOpen,
-        open: async () => {
-            // add modal styling because wagmi does not let you add styling to the modal
-            const w3mcss = document.createElement('style');
-            w3mcss.innerHTML = `w3m-modal, wcm-modal{ --wcm-z-index: 2147483647; --w3m-z-index:2147483647; }`;
-            document.head.appendChild(w3mcss);
-            const clientConnector = connectors.find((c) => isWalletConnectConnector(c.id));
-            if (clientConnector) {
-                try {
-                    const provider = await clientConnector.getProvider();
-                    const projectId = provider.rpc.projectId;
-                    const connector = walletConnect$1({
-                        projectId,
-                        showQrModal: true,
-                    });
-                    setIsOpen(true);
-                    try {
-                        await connectAsync({ connector: connector });
-                    }
-                    catch (err) {
-                        log('WalletConnect', err);
-                    }
-                    setIsOpen(false);
-                    // remove modal styling
-                    document.head.removeChild(w3mcss);
-                }
-                catch (err) {
-                    log('Could not get WalletConnect provider', err);
-                }
-            }
-            else {
-                log('No WalletConnect connector available');
-            }
-        },
-    };
-}
+const Container$6 = styled.div ``;
 
 const IconContainer$3 = styled(motion.div) `
   transition: all 220ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
@@ -7677,7 +7728,7 @@ const CopyToClipboardIcon = ({ copied, small, }) => (jsx(IconContainer$3, { "$cl
             opacity: small || copied ? 1 : 0.3,
         } }) }));
 
-const Container$6 = styled.div `
+const Container$5 = styled.div `
   --color: var(--ck-copytoclipboard-stroke);
   --bg: var(--ck-body-background);
   transition: all 220ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
@@ -7727,7 +7778,7 @@ const CopyToClipboard = ({ string, children, variant }) => {
     };
     if (variant === 'button')
         return (jsx(Button, { disabled: !string, onClick: onCopy, icon: jsx(CopyToClipboardIcon, { copied: clipboard }), children: children }));
-    return (jsx(Container$6, { onClick: onCopy, "$disabled": !string, children: jsxs(OffsetContainer, { children: [children, jsx(CopyToClipboardIcon, { copied: clipboard, small: true })] }) }));
+    return (jsx(Container$5, { onClick: onCopy, "$disabled": !string, children: jsxs(OffsetContainer, { children: [children, jsx(CopyToClipboardIcon, { copied: clipboard, small: true })] }) }));
 };
 
 const MoreIcon = (jsx("svg", { width: "60", height: "60", viewBox: "0 0 60 60", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M30 42V19M19 30.5H42", stroke: "var(--ck-body-color-muted)", strokeWidth: "3", strokeLinecap: "round" }) }));
@@ -7752,7 +7803,7 @@ const MobileConnectors = () => {
         context.setRoute(routes.CONNECT_WITH_MOBILE);
         context.setConnector({ id: walletId });
     };
-    return (jsx(PageContent, { style: { width: 312 }, children: jsxs(Container$7, { children: [jsx(ModalContent, { style: { paddingBottom: 0 }, children: jsx(ScrollArea, { height: 340, children: jsxs(WalletList, { "$disabled": !wcUri, children: [walletsIdsToDisplay
+    return (jsx(PageContent, { style: { width: 312 }, children: jsxs(Container$6, { children: [jsx(ModalContent, { style: { paddingBottom: 0 }, children: jsx(ScrollArea, { height: 340, children: jsxs(WalletList, { "$disabled": !wcUri, children: [walletsIdsToDisplay
                                     .sort(
                                 // sort by name
                                 (a, b) => {
@@ -7897,7 +7948,7 @@ const RotateWrapper = styled(motion.div) `
   animation-name: ${rotate};
   animation-duration: 3200ms;
 `;
-const Logo$2 = styled(motion.div) `
+const Logo$1 = styled(motion.div) `
   position: absolute;
   inset: 0;
 
@@ -7960,7 +8011,7 @@ const Introduction = () => {
     const context = useOpenfort();
     const locales = useLocales({});
     const ctaUrl = (_b = (_a = context.uiConfig) === null || _a === void 0 ? void 0 : _a.walletOnboardingUrl) !== null && _b !== void 0 ? _b : locales.onboardingScreen_ctaUrl;
-    return (jsxs(PageContent, { children: [jsxs(Graphic, { children: [jsxs(LogoGroup, { children: [jsx(Logo$2, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic$1, { children: jsx(Logos.Coinbase, { background: true }) }) }) }) }) }) }), jsx(Logo$2, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic$1, { children: jsx(Logos.MetaMask, { background: true }) }) }) }) }) }) }), jsx(Logo$2, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic$1, { children: jsx(Logos.Trust, {}) }) }) }) }) }) }), jsx(Logo$2, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic$1, { children: jsx(Logos.Argent, {}) }) }) }) }) }) }), jsx(Logo$2, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic$1, { children: jsx(Logos.ImToken, {}) }) }) }) }) }) })] }), jsx(GraphicBackground, { children: wave })] }), jsxs(ModalContent, { style: { paddingBottom: 18 }, children: [jsx(ModalH1, { "$small": true, children: locales.onboardingScreen_h1 }), jsx(ModalBody, { children: locales.onboardingScreen_p })] }), jsx(Button, { href: ctaUrl, arrow: true, children: locales.onboardingScreen_ctaText })] }));
+    return (jsxs(PageContent, { children: [jsxs(Graphic, { children: [jsxs(LogoGroup, { children: [jsx(Logo$1, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic$1, { children: jsx(Logos.Coinbase, { background: true }) }) }) }) }) }) }), jsx(Logo$1, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic$1, { children: jsx(Logos.MetaMask, { background: true }) }) }) }) }) }) }), jsx(Logo$1, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic$1, { children: jsx(Logos.Trust, {}) }) }) }) }) }) }), jsx(Logo$1, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic$1, { children: jsx(Logos.Argent, {}) }) }) }) }) }) }), jsx(Logo$1, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic$1, { children: jsx(Logos.ImToken, {}) }) }) }) }) }) })] }), jsx(GraphicBackground, { children: wave })] }), jsxs(ModalContent, { style: { paddingBottom: 18 }, children: [jsx(ModalH1, { "$small": true, children: locales.onboardingScreen_h1 }), jsx(ModalBody, { children: locales.onboardingScreen_p })] }), jsx(Button, { href: ctaUrl, arrow: true, children: locales.onboardingScreen_ctaText })] }));
 };
 
 const AvatarContainer = styled(motion.div) `
@@ -8200,7 +8251,7 @@ const ChainContainer = styled.div `
     justify-content: center;
   }
 `;
-const LogoContainer$2 = styled(motion.div) `
+const LogoContainer$1 = styled(motion.div) `
   display: block;
   position: absolute;
   inset: 0;
@@ -8700,7 +8751,7 @@ const chainConfigs = [
     },
 ];
 
-const Spinner$3 = (jsxs("svg", { "aria-hidden": "true", width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.3592 30.1654C10.0472 29.4491 8.85718 28.524 7.83713 27.424C6.81708 26.324 5.98425 25.0677 5.36889 23.7054C5.20157 23.335 5.05033 22.9567 4.91578 22.5717C4.51465 21.4237 4.26735 20.2308 4.17794 19.0239C4.16599 18.8626 4.13894 18.7041 4.09809 18.5507C3.85023 17.6197 3.09399 16.8738 2.11531 16.7999C0.975331 16.7138 -0.0310983 17.5702 0.0141657 18.7125C0.0223289 18.9185 0.0340286 19.1243 0.049253 19.3298C0.165374 20.8971 0.486545 22.4464 1.00749 23.9373C1.10424 24.2142 1.20764 24.4884 1.31755 24.7596C2.13617 26.7799 3.31595 28.6371 4.80146 30.239C6.28696 31.841 8.04998 33.1573 10.0029 34.1258C10.2651 34.2558 10.5307 34.3796 10.7995 34.4969C12.247 35.1287 13.7676 35.5656 15.3217 35.7995C15.5255 35.8301 15.7298 35.8573 15.9346 35.881C17.0703 36.0122 18.0001 35.0731 18.0001 33.9299C18.0001 32.9484 17.3133 32.1381 16.4036 31.8208C16.2537 31.7685 16.0977 31.7296 15.9377 31.7056C14.7411 31.5255 13.5702 31.1891 12.4556 30.7026C12.0818 30.5394 11.716 30.3601 11.3592 30.1654Z", fill: "url(#paint0_linear_1288_1870)" }), jsx("defs", { children: jsxs("linearGradient", { id: "paint0_linear_1288_1870", x1: "2", y1: "19.4884", x2: "16.8752", y2: "33.7485", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "var(--ck-connectbutton-balance-color,currentColor)", stopOpacity: "0.7" }), jsx("stop", { offset: "1", stopColor: "var(--ck-connectbutton-balance-color,currentColor)", stopOpacity: "0" })] }) })] }));
+const Spinner$2 = (jsxs("svg", { "aria-hidden": "true", width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.3592 30.1654C10.0472 29.4491 8.85718 28.524 7.83713 27.424C6.81708 26.324 5.98425 25.0677 5.36889 23.7054C5.20157 23.335 5.05033 22.9567 4.91578 22.5717C4.51465 21.4237 4.26735 20.2308 4.17794 19.0239C4.16599 18.8626 4.13894 18.7041 4.09809 18.5507C3.85023 17.6197 3.09399 16.8738 2.11531 16.7999C0.975331 16.7138 -0.0310983 17.5702 0.0141657 18.7125C0.0223289 18.9185 0.0340286 19.1243 0.049253 19.3298C0.165374 20.8971 0.486545 22.4464 1.00749 23.9373C1.10424 24.2142 1.20764 24.4884 1.31755 24.7596C2.13617 26.7799 3.31595 28.6371 4.80146 30.239C6.28696 31.841 8.04998 33.1573 10.0029 34.1258C10.2651 34.2558 10.5307 34.3796 10.7995 34.4969C12.247 35.1287 13.7676 35.5656 15.3217 35.7995C15.5255 35.8301 15.7298 35.8573 15.9346 35.881C17.0703 36.0122 18.0001 35.0731 18.0001 33.9299C18.0001 32.9484 17.3133 32.1381 16.4036 31.8208C16.2537 31.7685 16.0977 31.7296 15.9377 31.7056C14.7411 31.5255 13.5702 31.1891 12.4556 30.7026C12.0818 30.5394 11.716 30.3601 11.3592 30.1654Z", fill: "url(#paint0_linear_1288_1870)" }), jsx("defs", { children: jsxs("linearGradient", { id: "paint0_linear_1288_1870", x1: "2", y1: "19.4884", x2: "16.8752", y2: "33.7485", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "var(--ck-connectbutton-balance-color,currentColor)", stopOpacity: "0.7" }), jsx("stop", { offset: "1", stopColor: "var(--ck-connectbutton-balance-color,currentColor)", stopOpacity: "0" })] }) })] }));
 const Chain = ({ id, unsupported: controlledUnsupported, radius = '50%', size = 24, }) => {
     var _a;
     const isChainSupported = useChainIsSupported(id);
@@ -8712,7 +8763,7 @@ const Chain = ({ id, unsupported: controlledUnsupported, radius = '50%', size =
                 width: size,
                 height: size,
             } }));
-    return (jsx(ChainContainer, { size: size, radius: radius, children: jsxs(AnimatePresence, { initial: false, children: [unsupported && (jsx(Unsupported, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsxs("svg", { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M2.61317 11.2501H9.46246C10.6009 11.2501 11.3256 10.3506 11.3256 9.3549C11.3256 9.05145 11.255 8.73244 11.0881 8.43303L7.65903 2.14708C7.659 2.14702 7.65897 2.14696 7.65893 2.1469C7.65889 2.14682 7.65884 2.14673 7.65879 2.14664C7.31045 1.50746 6.6741 1.17871 6.04 1.17871C5.41478 1.17871 4.763 1.50043 4.41518 2.14968L0.993416 8.43476C0.828865 8.72426 0.75 9.04297 0.75 9.3549C0.75 10.3506 1.47471 11.2501 2.61317 11.2501Z", fill: "currentColor", stroke: "var(--ck-body-background, #fff)", strokeWidth: "1.5" }), jsx("path", { d: "M6.03258 7.43916C5.77502 7.43916 5.63096 7.29153 5.62223 7.02311L5.55675 4.96973C5.54802 4.69684 5.74446 4.5 6.02821 4.5C6.3076 4.5 6.51277 4.70131 6.50404 4.9742L6.43856 7.01864C6.42546 7.29153 6.2814 7.43916 6.03258 7.43916ZM6.03258 9.11676C5.7401 9.11676 5.5 8.9065 5.5 8.60677C5.5 8.30704 5.7401 8.09678 6.03258 8.09678C6.32506 8.09678 6.56515 8.30256 6.56515 8.60677C6.56515 8.91097 6.32069 9.11676 6.03258 9.11676Z", fill: "white" })] }) })), id ? (jsx(LogoContainer$2, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3 }, children: (_a = chain === null || chain === void 0 ? void 0 : chain.logo) !== null && _a !== void 0 ? _a : jsx(ChainIcons.UnknownChain, {}) }, `${chain === null || chain === void 0 ? void 0 : chain.id}-${chain === null || chain === void 0 ? void 0 : chain.name}-${id}`)) : (jsx(LoadingContainer, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3 }, children: Spinner$3 }, "loading"))] }) }));
+    return (jsx(ChainContainer, { size: size, radius: radius, children: jsxs(AnimatePresence, { initial: false, children: [unsupported && (jsx(Unsupported, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsxs("svg", { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M2.61317 11.2501H9.46246C10.6009 11.2501 11.3256 10.3506 11.3256 9.3549C11.3256 9.05145 11.255 8.73244 11.0881 8.43303L7.65903 2.14708C7.659 2.14702 7.65897 2.14696 7.65893 2.1469C7.65889 2.14682 7.65884 2.14673 7.65879 2.14664C7.31045 1.50746 6.6741 1.17871 6.04 1.17871C5.41478 1.17871 4.763 1.50043 4.41518 2.14968L0.993416 8.43476C0.828865 8.72426 0.75 9.04297 0.75 9.3549C0.75 10.3506 1.47471 11.2501 2.61317 11.2501Z", fill: "currentColor", stroke: "var(--ck-body-background, #fff)", strokeWidth: "1.5" }), jsx("path", { d: "M6.03258 7.43916C5.77502 7.43916 5.63096 7.29153 5.62223 7.02311L5.55675 4.96973C5.54802 4.69684 5.74446 4.5 6.02821 4.5C6.3076 4.5 6.51277 4.70131 6.50404 4.9742L6.43856 7.01864C6.42546 7.29153 6.2814 7.43916 6.03258 7.43916ZM6.03258 9.11676C5.7401 9.11676 5.5 8.9065 5.5 8.60677C5.5 8.30704 5.7401 8.09678 6.03258 8.09678C6.32506 8.09678 6.56515 8.30256 6.56515 8.60677C6.56515 8.91097 6.32069 9.11676 6.03258 9.11676Z", fill: "white" })] }) })), id ? (jsx(LogoContainer$1, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3 }, children: (_a = chain === null || chain === void 0 ? void 0 : chain.logo) !== null && _a !== void 0 ? _a : jsx(ChainIcons.UnknownChain, {}) }, `${chain === null || chain === void 0 ? void 0 : chain.id}-${chain === null || chain === void 0 ? void 0 : chain.name}-${id}`)) : (jsx(LoadingContainer, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3 }, children: Spinner$2 }, "loading"))] }) }));
 };
 
 const SwitchNetworksContainer = styled.div `
@@ -8933,7 +8984,7 @@ const ChainButtonBg = styled(motion.div) `
   }
 `;
 
-const Spinner$2 = (jsxs("svg", { "aria-hidden": "true", width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 16.75C2.69036 16.75 3.25 17.3096 3.25 18V19C3.25 26.5939 9.40609 32.75 17 32.75V35.25C8.02537 35.25 0.75 27.9746 0.75 19V18C0.75 17.3096 1.30964 16.75 2 16.75Z", fill: "url(#paint0_linear_1288_18701)" }), jsx("defs", { children: jsxs("linearGradient", { id: "paint0_linear_1288_18701", x1: "2", y1: "19.4884", x2: "16.8752", y2: "33.7485", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "var(--ck-spinner-color)" }), jsx("stop", { offset: "1", stopColor: "var(--ck-spinner-color)", stopOpacity: "0" })] }) })] }));
+const Spinner$1 = (jsxs("svg", { "aria-hidden": "true", width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 16.75C2.69036 16.75 3.25 17.3096 3.25 18V19C3.25 26.5939 9.40609 32.75 17 32.75V35.25C8.02537 35.25 0.75 27.9746 0.75 19V18C0.75 17.3096 1.30964 16.75 2 16.75Z", fill: "url(#paint0_linear_1288_18701)" }), jsx("defs", { children: jsxs("linearGradient", { id: "paint0_linear_1288_18701", x1: "2", y1: "19.4884", x2: "16.8752", y2: "33.7485", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "var(--ck-spinner-color)" }), jsx("stop", { offset: "1", stopColor: "var(--ck-spinner-color)", stopOpacity: "0" })] }) })] }));
 const ChainSelectList = ({ variant, }) => {
     const { connector, chain } = useAccount();
     const { chains, isPending, switchChain, error } = useSwitchChain();
@@ -8981,7 +9032,7 @@ const ChainSelectList = ({ variant, }) => {
                                                                 opacity: [1, 0],
                                                                 transition: { delay: 4, duration: 3 },
                                                             }
-                                                            : { opacity: 1 }, children: Spinner$2 }, `${ch === null || ch === void 0 ? void 0 : ch.id}-${ch === null || ch === void 0 ? void 0 : ch.name}`) }), jsx(ChainIcon, { children: (_a = ch.logo) !== null && _a !== void 0 ? _a : jsx(ChainIcons.UnknownChain, {}) })] }), ch.name] }), variant !== 'secondary' && (jsx(ChainButtonStatus, { children: jsxs(AnimatePresence, { initial: false, exitBeforeEnter: true, children: [ch.id === (chain === null || chain === void 0 ? void 0 : chain.id) && (jsx(motion.span, { style: {
+                                                            : { opacity: 1 }, children: Spinner$1 }, `${ch === null || ch === void 0 ? void 0 : ch.id}-${ch === null || ch === void 0 ? void 0 : ch.name}`) }), jsx(ChainIcon, { children: (_a = ch.logo) !== null && _a !== void 0 ? _a : jsx(ChainIcons.UnknownChain, {}) })] }), ch.name] }), variant !== 'secondary' && (jsx(ChainButtonStatus, { children: jsxs(AnimatePresence, { initial: false, exitBeforeEnter: true, children: [ch.id === (chain === null || chain === void 0 ? void 0 : chain.id) && (jsx(motion.span, { style: {
                                                     color: 'var(--ck-dropdown-active-color, var(--ck-focus-color))',
                                                     display: 'block',
                                                     position: 'relative',
@@ -9221,7 +9272,7 @@ const ChainSelectDropdown = ({ children, open, onClose, offsetX = 0, offsetY = 8
                                         }, children: [jsx(DropdownHeading, { children: locales.switchNetworks }), jsx(ChainSelectList, {})] })] }) }) }) })) })] }));
 };
 
-const Container$5 = styled(motion.div) ``;
+const Container$4 = styled(motion.div) ``;
 const SwitchChainButton = styled(motion.button) `
   --color: var(
     --ck-dropdown-button-color,
@@ -9330,7 +9381,7 @@ const ChainSelector = () => {
             setIsOpen(false);
     }, [context.open]);
     const disabled = chains.length <= 1;
-    return (jsx(Fragment, { children: jsx(Container$5, { children: jsx(ChainSelectDropdown, { offsetX: -12, open: !mobile && isOpen, onClose: () => setIsOpen(false), children: chain && (jsxs(SwitchChainButton, { "aria-label": flattenChildren(locales.switchNetworks).toString(), disabled: disabled, onClick: () => {
+    return (jsx(Fragment, { children: jsx(Container$4, { children: jsx(ChainSelectDropdown, { offsetX: -12, open: !mobile && isOpen, onClose: () => setIsOpen(false), children: chain && (jsxs(SwitchChainButton, { "aria-label": flattenChildren(locales.switchNetworks).toString(), disabled: disabled, onClick: () => {
                         if (mobile) {
                             context.setRoute(routes.SWITCHNETWORKS);
                         }
@@ -9343,7 +9394,7 @@ const ChainSelector = () => {
 const PoweredByFooter = ({ showDisclaimer }) => {
     var _a, _b;
     const { uiConfig: options } = useOpenfort();
-    return (jsxs(Container$4, { children: [showDisclaimer && (jsx(Disclaimer, { children: (options === null || options === void 0 ? void 0 : options.disclaimer) ? (jsx(Fragment, { children: options.disclaimer })) : (jsxs("div", { children: ["By logging in, you agree to our ", jsx("a", { href: (_a = options === null || options === void 0 ? void 0 : options.termsOfServiceUrl) !== null && _a !== void 0 ? _a : "https://www.openfort.io/terms", target: "_blank", rel: "noopener noreferrer", children: "Terms of Service" }), " & ", jsx("a", { href: (_b = options === null || options === void 0 ? void 0 : options.privacyPolicyUrl) !== null && _b !== void 0 ? _b : "https://www.openfort.io/privacy", target: "_blank", rel: "noopener noreferrer", children: "Privacy Policy" }), "."] })) })), jsxs(TextButton, { onClick: () => {
+    return (jsxs(Container$3, { children: [showDisclaimer && (jsx(Disclaimer, { children: (options === null || options === void 0 ? void 0 : options.disclaimer) ? (jsx(Fragment, { children: options.disclaimer })) : (jsxs("div", { children: ["By logging in, you agree to our ", jsx("a", { href: (_a = options === null || options === void 0 ? void 0 : options.termsOfServiceUrl) !== null && _a !== void 0 ? _a : "https://www.openfort.io/terms", target: "_blank", rel: "noopener noreferrer", children: "Terms of Service" }), " & ", jsx("a", { href: (_b = options === null || options === void 0 ? void 0 : options.privacyPolicyUrl) !== null && _b !== void 0 ? _b : "https://www.openfort.io/privacy", target: "_blank", rel: "noopener noreferrer", children: "Privacy Policy" }), "."] })) })), jsxs(TextButton, { onClick: () => {
                     window.open("https://www.openfort.io/", "_blank");
                 }, children: [jsx("span", { children: "Powered by" }), jsx(IconContainer$2, { children: jsx(Logos.Openfort, {}) }), jsx("span", { children: "Openfort" })] })] }));
 };
@@ -9392,7 +9443,7 @@ const IconContainer$2 = styled.div `
     border-radius: 0;
   }
 `;
-const Container$4 = styled(motion.div) `
+const Container$3 = styled(motion.div) `
   text-align: center;
   margin-top: 4px;
   margin-bottom: -16px;
@@ -9573,334 +9624,138 @@ const ProvidersButton = styled.div `
     padding: 0 20px;
     justify-content: space-between;
   }
-
-  ${InnerContainer} {
-    justify-content: space-between;
-    width: 100%;
-    max-width: 100%;
-  }
-`;
-const ProviderLabel = styled.span `
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  padding: 2px 0;
-`;
-const ProviderIcon$1 = styled.div `
-  width: 32px;
-  height: 32px;
-  svg,
-  img {
-    display: block;
-    position: relative;
-    pointer-events: none;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-  }
-
-  &[data-shape='squircle'] {
-    border-radius: 22.5%;
-  }
-  &[data-shape='circle'] {
-    border-radius: 100%;
-  }
-  &[data-shape='square'] {
-    border-radius: 0;
-  }
-`;
-
-const WalletIcon = ({ provider }) => {
-    var _a;
-    if (provider.walletClientType === "walletconnect")
-        return jsx(Logos.WalletConnect, {});
-    const wallets = useWallets$1();
-    const wallet = useMemo(() => {
-        return wallets.find(w => { var _a; return ((_a = w.id) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === provider.walletClientType; });
-    }, [provider]);
-    if (wallet)
-        return jsx(Fragment, { children: (_a = wallet.iconConnector) !== null && _a !== void 0 ? _a : wallet.icon });
-    return jsx(Wallet, {});
-};
-const ProviderIcon = ({ provider }) => {
-    switch (provider.provider) {
-        case "email":
-            return jsx(EmailIcon, {});
-        case "wallet":
-            return jsx(WalletIcon, { provider: provider });
-        case "google":
-        case "twitter":
-        case "facebook":
-            return providersLogos[provider.provider];
-        default:
-            return jsx(FitText, { children: provider.provider.substring(0, 4).toUpperCase() });
-    }
-};
-const LinkedProvider = ({ provider }) => {
-    return (jsx(LinkedProviderButton, { disabled: true, children: jsx(ProviderIcon$1, { children: jsx(ProviderIcon, { provider: provider }) }) }));
-};
-const AddLinkedProviderButton = () => {
-    const { setRoute } = useOpenfort();
-    const { availableProviders: unlinkedProviders } = useProviders();
-    return (jsx(LinkedProviderButton, { disabled: unlinkedProviders.length === 0, onClick: () => setRoute(routes.PROVIDERS), children: "+" }));
-};
-const LinkedProviders = () => {
-    const { user } = useOpenfortCore();
-    if (!user || !user.linkedAccounts) {
-        return (jsx("div", { children: jsx("p", { children: "No linked providers" }) }));
-    }
-    return (jsxs(Fragment, { children: [jsx(ProvidersHeader, { children: "Linked providers" }), jsxs(LinkedProviderContainer, { children: [user.linkedAccounts.map((provider, i) => (jsx(LinkedProvider, { provider: provider }, provider.provider + i))), jsx(AddLinkedProviderButton, {})] })] }));
-};
-
-const Profile = ({ closeModal }) => {
-    var _a, _b, _c, _d;
-    const context = useOpenfort();
-    const themeContext = useThemeContext();
-    const locales = useLocales();
-    const { address, isConnected, connector, chain } = useAccount();
-    const ensFallbackConfig = useEnsFallbackConfig();
-    const { data: ensName } = useEnsName({
-        chainId: 1,
-        address: address,
-        config: ensFallbackConfig,
-    });
-    const { data: balance } = useBalance({
-        address,
-        //watch: true,
-    });
-    const [shouldDisconnect, setShouldDisconnect] = useState(false);
-    const { logout } = useOpenfortCore();
-    useEffect(() => {
-        if (!shouldDisconnect)
-            return;
-        // Close before disconnecting to avoid layout shifting while modal is still open
-        if (closeModal) {
-            closeModal();
-        }
-        else {
-            context.setOpen(false);
-        }
-        return () => {
-            logout();
-        };
-    }, [shouldDisconnect, logout]);
-    const separator = ['web95', 'rounded', 'minimal'].includes((_c = (_a = themeContext.theme) !== null && _a !== void 0 ? _a : (_b = context.uiConfig) === null || _b === void 0 ? void 0 : _b.theme) !== null && _c !== void 0 ? _c : '')
-        ? '....'
-        : undefined;
-    return (jsxs(PageContent, { children: [jsxs(ModalContent, { style: { paddingBottom: 22, gap: 6 }, children: [address ? (jsxs(Fragment, { children: [jsx(AvatarContainer, { children: jsxs(AvatarInner, { children: [jsx(ChainSelectorContainer, { children: jsx(ChainSelector, {}) }), jsx(Avatar, { address: address })] }) }), jsx(ModalH1, { children: jsx(CopyToClipboard, { string: address, children: ensName !== null && ensName !== void 0 ? ensName : truncateEthAddress(address, separator) }) }), ((_d = context === null || context === void 0 ? void 0 : context.uiConfig) === null || _d === void 0 ? void 0 : _d.hideBalance) ? null : (jsx(ModalBody, { children: jsx(BalanceContainer, { children: jsxs(AnimatePresence, { exitBeforeEnter: true, initial: false, children: [balance && (jsxs(Balance$1, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, children: [nFormatter(Number(balance === null || balance === void 0 ? void 0 : balance.formatted)), ` `, balance === null || balance === void 0 ? void 0 : balance.symbol] }, `chain-${chain === null || chain === void 0 ? void 0 : chain.id}`)), !balance && (jsx(LoadingBalance, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, children: "\u00A0" }))] }) }) }))] })) : (jsx(Button, { onClick: () => context.setRoute(routes.CONNECTORS), icon: jsx(Unsupported$1, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsxs("svg", { width: "130", height: "120", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M2.61317 11.2501H9.46246C10.6009 11.2501 11.3256 10.3506 11.3256 9.3549C11.3256 9.05145 11.255 8.73244 11.0881 8.43303L7.65903 2.14708C7.659 2.14702 7.65897 2.14696 7.65893 2.1469C7.65889 2.14682 7.65884 2.14673 7.65879 2.14664C7.31045 1.50746 6.6741 1.17871 6.04 1.17871C5.41478 1.17871 4.763 1.50043 4.41518 2.14968L0.993416 8.43476C0.828865 8.72426 0.75 9.04297 0.75 9.3549C0.75 10.3506 1.47471 11.2501 2.61317 11.2501Z", fill: "currentColor", stroke: "var(--ck-body-background, #fff)", strokeWidth: "1.5" }), jsx("path", { d: "M6.03258 7.43916C5.77502 7.43916 5.63096 7.29153 5.62223 7.02311L5.55675 4.96973C5.54802 4.69684 5.74446 4.5 6.02821 4.5C6.3076 4.5 6.51277 4.70131 6.50404 4.9742L6.43856 7.01864C6.42546 7.29153 6.2814 7.43916 6.03258 7.43916ZM6.03258 9.11676C5.7401 9.11676 5.5 8.9065 5.5 8.60677C5.5 8.30704 5.7401 8.09678 6.03258 8.09678C6.32506 8.09678 6.56515 8.30256 6.56515 8.60677C6.56515 8.91097 6.32069 9.11676 6.03258 9.11676Z", fill: "white" })] }) }), children: "Connect wallet" })), jsx(LinkedProviders, {})] }), !isSafeConnector(connector === null || connector === void 0 ? void 0 : connector.id) && (jsx(Button, { onClick: () => setShouldDisconnect(true), icon: jsx(DisconnectIcon, {}), children: locales.disconnect })), jsx(PoweredByFooter, {})] }));
-};
-
-const SwitchNetworks = () => {
-    const { reset } = useConnect$1();
-    const { disconnect } = useDisconnect();
-    const { connector, chain } = useAccount();
-    const isChainSupported = useChainIsSupported(chain === null || chain === void 0 ? void 0 : chain.id);
-    const locales = useLocales({});
-    const onDisconnect = () => {
-        disconnect();
-        reset();
-    };
-    return (jsx(PageContent, { style: { width: 278 }, children: jsxs(ModalContent, { style: { padding: 0, marginTop: -10 }, children: [!isChainSupported && (jsxs(ModalBody, { children: [locales.warnings_chainUnsupported, ' ', locales.warnings_chainUnsupportedResolve] })), jsx("div", { style: { padding: '6px 8px' }, children: jsx(ChainSelectList, { variant: "secondary" }) }), !isChainSupported && !isSafeConnector(connector === null || connector === void 0 ? void 0 : connector.id) && (jsxs("div", { style: { paddingTop: 12 }, children: [jsx(OrDivider, {}), jsx(Button, { icon: jsx(DisconnectIcon, {}), variant: "secondary", onClick: onDisconnect, children: locales.disconnect })] }))] }) }));
-};
-
-const Content = styled(motion.div) `
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  position: relative;
-  left: 0;
-  right: 0;
-  ${ModalContent} {
-    padding: 0 8px 32px;
-    gap: 12px;
-  }
-`;
-const dist$1 = 2;
-const shakeKeyframes$1 = keyframes `
-  0%{ transform:none; }
-  25%{ transform:translateX(${dist$1}px); }
-  50%{ transform:translateX(-${dist$1}px); }
-  75%{ transform:translateX(${dist$1}px); }
-  100%{ transform:none; }
-`;
-const outlineKeyframes$1 = keyframes `
-  0%{ opacity:1; }
-  100%{ opacity:0; }
-`;
-const Container$3 = styled(motion.div) `
-  /*
-  background: var(
-    --ck-body-background
-  ); // To stop the overlay issue during transition for the squircle spinner
-  */
-`;
-const ConnectingContainer$1 = styled(motion.div) `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 10px auto 16px;
-  height: 120px;
-  //transform: scale(1.001); // fixes shifting issue between states
-`;
-const ConnectingAnimation$1 = styled(motion.div) `
-  user-select: none;
-  position: relative;
-  --spinner-error-opacity: 0;
-  &:before {
-    content: '';
-    position: absolute;
-    inset: 1px;
-    opacity: 0;
-    background: var(--ck-body-color-danger);
-    ${(props) => props.$circle &&
-    css `
-        inset: -5px;
-        border-radius: 50%;
-        background: none;
-        box-shadow: inset 0 0 0 3.5px var(--ck-body-color-danger);
-      `}
-  }
-  ${(props) => props.$shake &&
-    css `
-      animation: ${shakeKeyframes$1} 220ms ease-out both;
-      &:before {
-        animation: ${outlineKeyframes$1} 220ms ease-out 750ms both;
-      }
-    `}
-`;
-const RetryButton = styled(motion.button) `
-  z-index: 5;
-  appearance: none;
-  position: absolute;
-  right: 10px;
-  bottom: 10px;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 16px;
-  cursor: pointer;
-  overflow: hidden;
-  background: none;
-
-  color: var(--ck-body-background-secondary);
-  transition: color 200ms ease;
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
-
-  &:before {
-    z-index: 3;
-    content: '';
-    position: absolute;
-    inset: 0;
-    opacity: 0;
-    transition: opacity 200ms ease;
-    background: var(--ck-body-color);
-  }
-
-  &:hover:before {
-    opacity: 0.1;
-  }
-`;
-const RetryIconContainer = styled(motion.div) `
-  position: absolute;
-  inset: 0;
-
-  &:before {
-    z-index: 1;
-    content: '';
-    position: absolute;
-    inset: 3px;
-    border-radius: 16px;
-    background: conic-gradient(
-      from 90deg,
-      currentColor 10%,
-      var(--ck-body-color) 80%
-    );
-  }
-
-  svg {
-    z-index: 2;
-    display: block;
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-`;
-
-const LogoContainer$1 = styled(motion.div) `
-  z-index: 4;
-  position: relative;
-  overflow: hidden;
-  svg {
-    z-index: 3;
-    position: relative;
-    display: block;
+
+  ${InnerContainer} {
+    justify-content: space-between;
+    width: 100%;
+    max-width: 100%;
   }
 `;
-const Logo$1 = styled(motion.div) `
-  z-index: 2;
-  position: absolute;
+const ProviderLabel = styled.span `
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
   overflow: hidden;
-  inset: 6px;
-  border-radius: 24px;
-  background: var(--ck-body-background);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding: 2px 0;
+`;
+const ProviderIcon$1 = styled.div `
+  width: 32px;
+  height: 32px;
   svg,
   img {
-    pointer-events: none;
     display: block;
+    position: relative;
+    pointer-events: none;
+    overflow: hidden;
     width: 100%;
     height: 100%;
   }
-`;
-const SpinnerContainer$1 = styled(motion.div) `
-  position: absolute;
-  inset: 1px;
-  overflow: hidden;
-`;
-const Spinner$1 = styled(motion.div) `
-  pointer-events: none;
-  user-select: none;
-  z-index: 1;
-  position: absolute;
-  inset: -25%;
-  &:before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: conic-gradient(
-      from -90deg,
-      transparent,
-      transparent,
-      transparent,
-      transparent,
-      transparent,
-      var(--ck-spinner-color)
-    );
-    animation: rotateSpinner 1200ms linear infinite;
+
+  &[data-shape='squircle'] {
+    border-radius: 22.5%;
   }
-  @keyframes rotateSpinner {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
+  &[data-shape='circle'] {
+    border-radius: 100%;
+  }
+  &[data-shape='square'] {
+    border-radius: 0;
   }
 `;
 
-const SquircleSpinner = ({ logo, connecting = true, }) => {
-    return (jsxs(LogoContainer$1, { transition: { duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }, children: [jsx(Logo$1, { children: logo }), jsx(SpinnerContainer$1, { children: jsx(AnimatePresence, { children: connecting && (jsx(Spinner$1, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: {
-                            opacity: 0,
-                            transition: {
-                                duration: 0,
-                            },
-                        } }, "Spinner")) }) }), jsxs("svg", { "aria-hidden": "true", width: "102", height: "102", viewBox: "0 0 102 102", fill: "none", children: [jsx("rect", { x: "7.57895", y: "7.57895", width: "86.8421", height: "86.8421", rx: "19.2211", stroke: "black", strokeOpacity: "0.02", strokeWidth: "1.15789" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 0H102V102H0V0ZM7 38.284C7 27.5684 7 22.2106 9.01905 18.0892C10.9522 14.1431 14.1431 10.9522 18.0892 9.01905C22.2106 7 27.5684 7 38.284 7H63.716C74.4316 7 79.7894 7 83.9108 9.01905C87.8569 10.9522 91.0478 14.1431 92.9809 18.0892C95 22.2106 95 27.5684 95 38.284V63.716C95 74.4316 95 79.7894 92.9809 83.9108C91.0478 87.8569 87.8569 91.0478 83.9108 92.9809C79.7894 95 74.4316 95 63.716 95H38.284C27.5684 95 22.2106 95 18.0892 92.9809C14.1431 91.0478 10.9522 87.8569 9.01905 83.9108C7 79.7894 7 74.4316 7 63.716V38.284ZM41.5 0.5H41.4325C34.7246 0.499996 29.6023 0.499994 25.5104 0.823325C21.388 1.14906 18.1839 1.80986 15.3416 3.20227C10.0602 5.78959 5.78959 10.0602 3.20227 15.3416C1.80986 18.1839 1.14906 21.388 0.823325 25.5104C0.499994 29.6023 0.499996 34.7246 0.5 41.4325V41.5V55.5938C0.5 55.6808 0.507407 55.766 0.521624 55.849C0.507407 55.9319 0.5 56.0172 0.5 56.1042V60.5V60.5675C0.499996 67.2754 0.499994 72.3977 0.823325 76.4896C1.14906 80.612 1.80986 83.8161 3.20227 86.6584C5.78959 91.9398 10.0602 96.2104 15.3416 98.7977C18.1839 100.19 21.388 100.851 25.5104 101.177C29.6022 101.5 34.7244 101.5 41.432 101.5H41.4324H41.5H43.4227H60.5H60.5675H60.568C67.2756 101.5 72.3977 101.5 76.4896 101.177C80.612 100.851 83.8161 100.19 86.6584 98.7977C91.9398 96.2104 96.2104 91.9398 98.7977 86.6584C100.19 83.8161 100.851 80.612 101.177 76.4896C101.5 72.3978 101.5 67.2756 101.5 60.568V60.5676V60.5V41.5V41.4324V41.432C101.5 34.7244 101.5 29.6022 101.177 25.5104C100.851 21.388 100.19 18.1839 98.7977 15.3416C96.2104 10.0602 91.9398 5.78959 86.6584 3.20227C83.8161 1.80986 80.612 1.14906 76.4896 0.823325C72.3977 0.499994 67.2754 0.499996 60.5675 0.5H60.5H41.5ZM3.5 56.1042C3.5 56.0172 3.49259 55.9319 3.47838 55.849C3.49259 55.766 3.5 55.6808 3.5 55.5938V41.5C3.5 34.7112 3.50109 29.7068 3.814 25.7467C4.1256 21.8032 4.73946 19.0229 5.89635 16.6614C8.19077 11.9779 11.9779 8.19077 16.6614 5.89635C19.0229 4.73946 21.8032 4.1256 25.7467 3.814C29.7068 3.50109 34.7112 3.5 41.5 3.5H60.5C67.2888 3.5 72.2932 3.50109 76.2533 3.814C80.1968 4.1256 82.977 4.73946 85.3386 5.89635C90.022 8.19077 93.8092 11.9779 96.1036 16.6614C97.2605 19.0229 97.8744 21.8032 98.186 25.7467C98.4989 29.7068 98.5 34.7112 98.5 41.5V60.5C98.5 67.2888 98.4989 72.2932 98.186 76.2533C97.8744 80.1968 97.2605 82.9771 96.1036 85.3386C93.8092 90.022 90.022 93.8092 85.3386 96.1036C82.977 97.2605 80.1968 97.8744 76.2533 98.186C72.2932 98.4989 67.2888 98.5 60.5 98.5H43.4227H41.5C34.7112 98.5 29.7068 98.4989 25.7467 98.186C21.8032 97.8744 19.0229 97.2605 16.6614 96.1036C11.9779 93.8092 8.19077 90.022 5.89635 85.3386C4.73946 82.9771 4.1256 80.1968 3.814 76.2533C3.50109 72.2932 3.5 67.2888 3.5 60.5V56.1042Z", fill: "var(--ck-body-background)" })] })] }));
+const WalletIcon = ({ provider }) => {
+    var _a;
+    if (provider.walletClientType === "walletconnect")
+        return jsx(Logos.WalletConnect, {});
+    const wallets = useWallets$1();
+    const wallet = useMemo(() => {
+        return wallets.find(w => { var _a; return ((_a = w.id) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === provider.walletClientType; });
+    }, [provider]);
+    if (wallet)
+        return jsx(Fragment, { children: (_a = wallet.iconConnector) !== null && _a !== void 0 ? _a : wallet.icon });
+    return jsx(Wallet, {});
+};
+const ProviderIcon = ({ provider }) => {
+    switch (provider.provider) {
+        case "email":
+            return jsx(EmailIcon, {});
+        case "wallet":
+            return jsx(WalletIcon, { provider: provider });
+        case "google":
+        case "twitter":
+        case "facebook":
+            return providersLogos[provider.provider];
+        default:
+            return jsx(FitText, { children: provider.provider.substring(0, 4).toUpperCase() });
+    }
+};
+const LinkedProvider = ({ provider }) => {
+    return (jsx(LinkedProviderButton, { disabled: true, children: jsx(ProviderIcon$1, { children: jsx(ProviderIcon, { provider: provider }) }) }));
+};
+const AddLinkedProviderButton = () => {
+    const { setRoute } = useOpenfort();
+    const { availableProviders: unlinkedProviders } = useProviders();
+    return (jsx(LinkedProviderButton, { disabled: unlinkedProviders.length === 0, onClick: () => setRoute(routes.PROVIDERS), children: "+" }));
+};
+const LinkedProviders = () => {
+    const { user } = useOpenfortCore();
+    if (!user || !user.linkedAccounts) {
+        return (jsx("div", { children: jsx("p", { children: "No linked providers" }) }));
+    }
+    return (jsxs(Fragment, { children: [jsx(ProvidersHeader, { children: "Linked providers" }), jsxs(LinkedProviderContainer, { children: [user.linkedAccounts.map((provider, i) => (jsx(LinkedProvider, { provider: provider }, provider.provider + i))), jsx(AddLinkedProviderButton, {})] })] }));
+};
+
+const Profile = ({ closeModal }) => {
+    var _a, _b, _c, _d;
+    const context = useOpenfort();
+    const themeContext = useThemeContext();
+    const locales = useLocales();
+    const { address, isConnected, connector, chain } = useAccount();
+    const ensFallbackConfig = useEnsFallbackConfig();
+    const { data: ensName } = useEnsName({
+        chainId: 1,
+        address: address,
+        config: ensFallbackConfig,
+    });
+    const { data: balance } = useBalance({
+        address,
+        //watch: true,
+    });
+    const [shouldDisconnect, setShouldDisconnect] = useState(false);
+    const { logout } = useOpenfortCore();
+    useEffect(() => {
+        if (!shouldDisconnect)
+            return;
+        // Close before disconnecting to avoid layout shifting while modal is still open
+        if (closeModal) {
+            closeModal();
+        }
+        else {
+            context.setOpen(false);
+        }
+        return () => {
+            logout();
+        };
+    }, [shouldDisconnect, logout]);
+    const separator = ['web95', 'rounded', 'minimal'].includes((_c = (_a = themeContext.theme) !== null && _a !== void 0 ? _a : (_b = context.uiConfig) === null || _b === void 0 ? void 0 : _b.theme) !== null && _c !== void 0 ? _c : '')
+        ? '....'
+        : undefined;
+    return (jsxs(PageContent, { children: [jsxs(ModalContent, { style: { paddingBottom: 22, gap: 6 }, children: [address ? (jsxs(Fragment, { children: [jsx(AvatarContainer, { children: jsxs(AvatarInner, { children: [jsx(ChainSelectorContainer, { children: jsx(ChainSelector, {}) }), jsx(Avatar, { address: address })] }) }), jsx(ModalH1, { children: jsx(CopyToClipboard, { string: address, children: ensName !== null && ensName !== void 0 ? ensName : truncateEthAddress(address, separator) }) }), ((_d = context === null || context === void 0 ? void 0 : context.uiConfig) === null || _d === void 0 ? void 0 : _d.hideBalance) ? null : (jsx(ModalBody, { children: jsx(BalanceContainer, { children: jsxs(AnimatePresence, { exitBeforeEnter: true, initial: false, children: [balance && (jsxs(Balance$1, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, children: [nFormatter(Number(balance === null || balance === void 0 ? void 0 : balance.formatted)), ` `, balance === null || balance === void 0 ? void 0 : balance.symbol] }, `chain-${chain === null || chain === void 0 ? void 0 : chain.id}`)), !balance && (jsx(LoadingBalance, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, children: "\u00A0" }))] }) }) }))] })) : (jsx(Button, { onClick: () => context.setRoute(routes.CONNECTORS), icon: jsx(Unsupported$1, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsxs("svg", { width: "130", height: "120", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M2.61317 11.2501H9.46246C10.6009 11.2501 11.3256 10.3506 11.3256 9.3549C11.3256 9.05145 11.255 8.73244 11.0881 8.43303L7.65903 2.14708C7.659 2.14702 7.65897 2.14696 7.65893 2.1469C7.65889 2.14682 7.65884 2.14673 7.65879 2.14664C7.31045 1.50746 6.6741 1.17871 6.04 1.17871C5.41478 1.17871 4.763 1.50043 4.41518 2.14968L0.993416 8.43476C0.828865 8.72426 0.75 9.04297 0.75 9.3549C0.75 10.3506 1.47471 11.2501 2.61317 11.2501Z", fill: "currentColor", stroke: "var(--ck-body-background, #fff)", strokeWidth: "1.5" }), jsx("path", { d: "M6.03258 7.43916C5.77502 7.43916 5.63096 7.29153 5.62223 7.02311L5.55675 4.96973C5.54802 4.69684 5.74446 4.5 6.02821 4.5C6.3076 4.5 6.51277 4.70131 6.50404 4.9742L6.43856 7.01864C6.42546 7.29153 6.2814 7.43916 6.03258 7.43916ZM6.03258 9.11676C5.7401 9.11676 5.5 8.9065 5.5 8.60677C5.5 8.30704 5.7401 8.09678 6.03258 8.09678C6.32506 8.09678 6.56515 8.30256 6.56515 8.60677C6.56515 8.91097 6.32069 9.11676 6.03258 9.11676Z", fill: "white" })] }) }), children: "Connect wallet" })), jsx(LinkedProviders, {})] }), !isSafeConnector(connector === null || connector === void 0 ? void 0 : connector.id) && (jsx(Button, { onClick: () => setShouldDisconnect(true), icon: jsx(DisconnectIcon, {}), children: locales.disconnect })), jsx(PoweredByFooter, {})] }));
+};
+
+const SwitchNetworks = () => {
+    const { reset } = useConnect$1();
+    const { disconnect } = useDisconnect();
+    const { connector, chain } = useAccount();
+    const isChainSupported = useChainIsSupported(chain === null || chain === void 0 ? void 0 : chain.id);
+    const locales = useLocales({});
+    const onDisconnect = () => {
+        disconnect();
+        reset();
+    };
+    return (jsx(PageContent, { style: { width: 278 }, children: jsxs(ModalContent, { style: { padding: 0, marginTop: -10 }, children: [!isChainSupported && (jsxs(ModalBody, { children: [locales.warnings_chainUnsupported, ' ', locales.warnings_chainUnsupportedResolve] })), jsx("div", { style: { padding: '6px 8px' }, children: jsx(ChainSelectList, { variant: "secondary" }) }), !isChainSupported && !isSafeConnector(connector === null || connector === void 0 ? void 0 : connector.id) && (jsxs("div", { style: { paddingTop: 12 }, children: [jsx(OrDivider, {}), jsx(Button, { icon: jsx(DisconnectIcon, {}), variant: "secondary", onClick: onDisconnect, children: locales.disconnect })] }))] }) }));
 };
 
 const BrowserIconContainer = styled(motion.div) `
@@ -10084,19 +9939,25 @@ const createSIWEMessage = (address, nonce, chainId) => createSiweMessage({
 function useConnectWithSiwe() {
     const { client, user, updateUser } = useOpenfortCore();
     const { log } = useOpenfort();
-    const { address, connector } = useAccount();
+    const { address, connector, chainId: accountChainId } = useAccount();
     const chainId = useChainId();
     const config = useConfig();
-    useWallet((connector === null || connector === void 0 ? void 0 : connector.id) || "");
-    const connectWithSiwe = useCallback(async ({ onError, onConnect, } = {}) => {
-        const connectorType = connector === null || connector === void 0 ? void 0 : connector.type;
-        const walletClientType = connector === null || connector === void 0 ? void 0 : connector.id;
+    const publicClient = usePublicClient();
+    const connectWithSiwe = useCallback(async ({ onError, onConnect, connectorType: propsConnectorType, walletClientType: propsWalletClientType, } = {}) => {
+        var _a, _b;
+        const connectorType = propsConnectorType !== null && propsConnectorType !== void 0 ? propsConnectorType : connector === null || connector === void 0 ? void 0 : connector.type;
+        const walletClientType = propsWalletClientType !== null && propsWalletClientType !== void 0 ? propsWalletClientType : connector === null || connector === void 0 ? void 0 : connector.id;
         if (!address || !connectorType || !walletClientType) {
             log("No address found", { address, connectorType, walletClientType });
             onError && onError("No address found");
             return;
         }
         try {
+            if (accountChainId !== chainId) {
+                switchChain(config, {
+                    chainId,
+                });
+            }
             const { nonce } = await client.auth.initSIWE({ address });
             const SIWEMessage = createSIWEMessage(address, nonce, chainId);
             const signature = await signMessage(config, { message: SIWEMessage });
@@ -10135,7 +9996,7 @@ function useConnectWithSiwe() {
                 message = "Invalid signature. Please try again.";
             }
             else if (message.includes("An error occurred when attempting to switch chain")) {
-                message = "Failed to switch chain. Please switch your wallet to the correct network and try again.";
+                message = `Failed to switch chain. Please switch your wallet to ${(_b = (_a = publicClient === null || publicClient === void 0 ? void 0 : publicClient.chain) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : "the correct network"} and try again.`;
             }
             else {
                 message = "Failed to connect with SIWE.";
@@ -10347,14 +10208,14 @@ const ConnectWithInjector = ({ switchConnectMethod, forceState }) => {
     }, [status, expiryTimer]);
     */
     if (!wallet) {
-        return (jsx(PageContent, { children: jsxs(Container$3, { children: [jsx(ModalHeading, { children: "Invalid State" }), jsx(ModalContent, { children: jsx(Alert, { children: "No connectors match the id given. This state should never happen." }) })] }) }));
+        return (jsx(PageContent, { children: jsxs(Container$7, { children: [jsx(ModalHeading, { children: "Invalid State" }), jsx(ModalContent, { children: jsx(Alert, { children: "No connectors match the id given. This state should never happen." }) })] }) }));
     }
     // OLD_TODO: Make this more generic
     if (isWalletConnectConnector(wallet === null || wallet === void 0 ? void 0 : wallet.connector.id)) {
-        return (jsx(PageContent, { children: jsxs(Container$3, { children: [jsx(ModalHeading, { children: "Invalid State" }), jsx(ModalContent, { children: jsx(Alert, { children: "WalletConnect does not have an injection flow. This state should never happen." }) })] }) }));
+        return (jsx(PageContent, { children: jsxs(Container$7, { children: [jsx(ModalHeading, { children: "Invalid State" }), jsx(ModalContent, { children: jsx(Alert, { children: "WalletConnect does not have an injection flow. This state should never happen." }) })] }) }));
     }
     const hasError = status === states$3.FAILED || status === states$3.REJECTED || status === states$3.DUPLICATED;
-    return (jsx(PageContent, { children: jsxs(Container$3, { children: [jsx(ConnectingContainer$1, { children: jsxs(ConnectingAnimation$1, { "$shake": hasError, "$circle": walletInfo.iconShape === 'circle', children: [jsx(AnimatePresence, { children: (hasError) && (jsx(RetryButton, { "aria-label": "Retry", initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, whileTap: { scale: 0.9 }, transition: { duration: 0.1 }, onClick: runConnect, children: jsx(RetryIconContainer, { children: jsx(Tooltip, { open: showTryAgainTooltip &&
+    return (jsx(PageContent, { children: jsxs(Container$7, { children: [jsx(ConnectingContainer$1, { children: jsxs(ConnectingAnimation$1, { "$shake": hasError, "$circle": walletInfo.iconShape === 'circle', children: [jsx(AnimatePresence, { children: (hasError) && (jsx(RetryButton, { "aria-label": "Retry", initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, whileTap: { scale: 0.9 }, transition: { duration: 0.1 }, onClick: runConnect, children: jsx(RetryIconContainer, { children: jsx(Tooltip, { open: showTryAgainTooltip &&
                                                 (hasError), message: locales.tryAgainQuestion, xOffset: -6, children: jsx(RetryIconCircle, {}) }) }) })) }), walletInfo.iconShape === 'circle' ? (jsx(CircleSpinner, { logo: status === states$3.UNAVAILABLE ? (jsx("div", { style: {
                                         transform: 'scale(1.14)',
                                         position: 'relative',
@@ -10490,86 +10351,6 @@ const ConnectWithQRCode = ({ switchConnectMethod }) => {
                     download: true, children: locales.getWalletName }) }))] }));
 };
 
-const LoadingTextWrapper = styled.div `
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  gap: 12px;
-  padding: 0 8px 16px;
-  text-align: center;
-`;
-const ConnectingContainer = styled(motion.div) `
-display: flex;
-align-items: center;
-justify-content: center;
-margin: 10px auto 16px;
-height: 120px;
-`;
-const dist = 2;
-const shakeKeyframes = keyframes `
-  0%{ transform:none; }
-  25%{ transform:translateX(${dist}px); }
-  50%{ transform:translateX(-${dist}px); }
-  75%{ transform:translateX(${dist}px); }
-  100%{ transform:none; }
-`;
-const outlineKeyframes = keyframes `
-  0%{ opacity:0; }
-  100%{ opacity:1; }
-`;
-const ConnectingAnimation = styled(motion.div) `
-  position: relative;
-  user-select: none;
-  position: relative;
-  --spinner-error-opacity: 0;
-  &:before {
-    content: '';
-    position: absolute;
-    inset: 1px;
-    opacity: 0;
-    background: ${(props) => props.$color};
-  }
-  ${(props) => !!props.$color &&
-    css `
-    &:before {
-      opacity: 1;
-    }
-  `}
-  ${(props) => props.$shake &&
-    css `
-      animation: ${shakeKeyframes} 220ms ease-out both;
-      &:before {
-        animation: ${outlineKeyframes} 220ms ease-out both;
-      }
-    `}
-`;
-const Loader = ({ header, description, icon, isError = false, isSuccess = false, isLoading = !isError && !isSuccess, onRetry, }) => {
-    const { uiConfig: options } = useOpenfort();
-    const { triggerResize } = useOpenfort();
-    const locales = useLocales();
-    useEffect(() => {
-        return () => triggerResize();
-    }, []);
-    const renderLogo = () => {
-        if (icon) {
-            return icon;
-        }
-        if (options === null || options === void 0 ? void 0 : options.logo) {
-            if (typeof options.logo === 'string') {
-                return jsx("img", { src: options.logo, alt: "Logo", style: { width: '100%' } });
-            }
-            return options.logo;
-        }
-        return jsx(Logos.Openfort, {});
-    };
-    return (jsxs(Fragment, { children: [jsx(ConnectingContainer, { children: jsxs(ConnectingAnimation, { "$color": isSuccess ? 'var(--ck-body-color-valid)' : isError ? 'var(--ck-body-color-danger)' : undefined, "$shake": isError, children: [jsx(AnimatePresence, { children: (isError && onRetry) && (jsx(RetryButton, { "aria-label": "Retry", initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, whileTap: { scale: 0.9 }, transition: { duration: 0.1 }, onClick: onRetry, children: jsx(RetryIconContainer, { children: jsx(Tooltip, { open: isError, message: locales.tryAgainQuestion, xOffset: -6, children: jsx(RetryIconCircle, {}) }) }) })) }), jsx(SquircleSpinner, { logo: jsx("div", { style: {
-                                    padding: '12px',
-                                    position: 'relative',
-                                    width: '100%',
-                                }, children: renderLogo() }), connecting: isLoading })] }) }), jsxs(LoadingTextWrapper, { children: [isLoading && (jsxs(Fragment, { children: [jsx(ModalH1, { children: "Loading, please wait" }), jsx(ModalBody, { children: description !== null && description !== void 0 ? description : header })] })), isSuccess && (jsxs(Fragment, { children: [jsxs(ModalH1, { "$valid": true, children: [jsx(TickIcon, {}), " ", header] }), jsx(ModalBody, { children: description })] })), isError && (jsxs(Fragment, { children: [jsx(ModalH1, { "$error": true, children: header }), jsx(ModalBody, { children: description })] }))] })] }));
-};
-
 const states$2 = {
     INIT: "init",
     REDIRECT: "redirect",
@@ -12156,7 +11937,7 @@ const EmailLogin = () => {
 };
 
 const LogoGraphic = ({ size = "100%", logo }) => {
-    return (jsx(Logo$2, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic$1, { style: { transform: `scale(${size})` }, children: logo }) }) }) }) }) }));
+    return (jsx(Logo$1, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic$1, { style: { transform: `scale(${size})` }, children: logo }) }) }) }) }) }));
 };
 const FloatingGraphic = ({ height = "130px", logoCenter, logoTopRight, logoTopLeft, logoBottomRight, logoBottomLeft }) => {
     return (jsxs(Graphic, { "$height": height, children: [jsxs(LogoGroup, { children: [jsx(LogoGraphic, { ...logoCenter }), logoTopLeft ? jsx(LogoGraphic, { ...logoTopLeft }) : jsx("div", {}), logoTopRight ? jsx(LogoGraphic, { ...logoTopRight }) : jsx("div", {}), logoBottomLeft ? jsx(LogoGraphic, { ...logoBottomLeft }) : jsx("div", {}), logoBottomRight ? jsx(LogoGraphic, { ...logoBottomRight }) : jsx("div", {})] }), jsx(GraphicBackground, { children: wave })] }));
@@ -13217,19 +12998,25 @@ const DownloadFooter = styled.div `
 `;
 const ConnectWithMobile = ({}) => {
     var _a, _b, _c;
-    const { connector, setRoute } = useOpenfort();
-    const wallet = useWallet(connector.id) || walletConfigs[connector.id];
-    const [status, setStatus] = useState(states.INIT);
+    const { connector, setRoute, log } = useOpenfort();
+    const walletId = Object.keys(walletConfigs).find(
+    // where id is comma seperated list
+    (id) => id
+        .split(',')
+        .map((i) => i.trim())
+        .indexOf(connector.id) !== -1);
+    const wallet = useWallet(connector.id) || (walletId && walletConfigs[walletId]) || {};
+    const { isConnected } = useAccount();
+    const [status, setStatus] = useState(isConnected ? states.INIT : states.CONNECTING);
     const [description, setDescription] = useState(undefined);
     const { connect: { getUri }, } = useWeb3();
     const wcUri = getUri();
     const [hasReturned, setHasReturned] = useState(false);
-    const { isConnected } = useAccount();
-    const [shouldRedirectToWalletApp, setShouldRedirectToWalletApp] = useState(false);
     const siwe = useConnectWithSiwe();
     const openApp = (url) => {
         var _a;
         const uri = (_a = wallet === null || wallet === void 0 ? void 0 : wallet.getWalletConnectDeeplink) === null || _a === void 0 ? void 0 : _a.call(wallet, url !== null && url !== void 0 ? url : "");
+        log("Opening wallet app with uri", { uri, url, wallet, walletId, walletConfigs, connectorId: connector.id });
         if (uri) {
             if (url) {
                 window.location.href = uri;
@@ -13266,8 +13053,9 @@ const ConnectWithMobile = ({}) => {
                 openApp(wcUri);
                 break;
             case states.CONNECTING:
-                setDescription("Requesting signature...");
+                setDescription("Requesting signature to verify wallet...");
                 siwe({
+                    walletClientType: walletId,
                     onConnect: () => {
                         setRoute(routes.PROFILE);
                     },
@@ -13276,23 +13064,11 @@ const ConnectWithMobile = ({}) => {
                         setDescription(error || "Connection failed");
                     }
                 });
-                setTimeout(() => {
-                    setShouldRedirectToWalletApp(true);
-                }, 1500);
                 break;
         }
     }, [status]);
-    useEffect(() => {
-        if (shouldRedirectToWalletApp && status === states.CONNECTING) {
-            openApp();
-        }
-    }, [shouldRedirectToWalletApp, status]);
     return (jsxs(PageContent, { children: [jsx(Loader, { header: `Connecting with ${connector.id.split(",")[0]}`, icon: wallet === null || wallet === void 0 ? void 0 : wallet.icon, isError: status === states.ERROR, description: description, onRetry: () => {
-                    if (isConnected) {
-                        setStatus(states.CONNECTING);
-                        return;
-                    }
-                    setStatus(states.INIT);
+                    setStatus(isConnected ? states.CONNECTING : states.INIT);
                     setDescription("");
                 } }), isConnected ? (jsx(Button, { onClick: () => {
                     openApp();