@openfort/react 0.3.2 → 1.0.0

package/build/components/ConnectModal/ConnectWithInjector/CircleSpinner/styles.js

@@ -0,0 +1,118 @@
+import { motion } from 'framer-motion';
+import { css } from 'styled-components';
+import styled from '../../../../styles/styled/index.js';
+
+const LogoContainer = styled(motion.div) `
+  z-index: 4;
+  position: relative;
+  width: 100px;
+  height: 100px;
+  svg {
+    z-index: 3;
+    position: relative;
+    display: block;
+  }
+`;
+const Logo = styled(motion.div) `
+  z-index: 2;
+  position: absolute;
+  overflow: hidden;
+  inset: 6px;
+  border-radius: 50px;
+  background: var(--ck-body-background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg,
+  img {
+    pointer-events: none;
+    display: block;
+    margin: 0 auto;
+    width: 100%;
+    height: 100%;
+    ${(props) => props.$small &&
+    css `
+        width: 85%;
+        height: 85%;
+      `}
+  }
+`;
+const SpinnerContainer = styled(motion.div) `
+  position: absolute;
+  inset: -5px;
+`;
+const ExpiringSpinner = styled(motion.div) `
+  pointer-events: none;
+  user-select: none;
+  z-index: 1;
+  position: absolute;
+  inset: -25%;
+  background: var(--ck-body-background);
+  div:first-child {
+    position: absolute;
+    left: 50%;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    overflow: hidden;
+    &:before {
+      position: absolute;
+      content: '';
+      inset: 0;
+      background: var(--ck-spinner-color);
+      transform-origin: 0% 50%;
+      animation: rotateExpiringSpinner 5000ms ease-in both;
+    }
+  }
+  div:last-child {
+    position: absolute;
+    left: 0;
+    right: 50%;
+    top: 0;
+    bottom: 0;
+    overflow: hidden;
+    &:before {
+      position: absolute;
+      content: '';
+      inset: 0;
+      background: var(--ck-spinner-color);
+      transform-origin: 100% 50%;
+      animation: rotateExpiringSpinner 5000ms ease-out 5000ms both;
+    }
+  }
+  @keyframes rotateExpiringSpinner {
+    0% {
+      transform: rotate(-180deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+`;
+const Spinner = styled(motion.div) `
+  pointer-events: none;
+  user-select: none;
+  z-index: 1;
+  position: absolute;
+  inset: 0;
+  svg {
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    animation: rotateSpinner 1200ms linear infinite;
+  }
+  @keyframes rotateSpinner {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+export { ExpiringSpinner, Logo, LogoContainer, Spinner, SpinnerContainer };
+//# sourceMappingURL=styles.js.map

package/build/components/ConnectModal/ConnectWithInjector/CircleSpinner/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/ConnectModal/ConnectWithInjector/index.d.ts

@@ -2,12 +2,10 @@ import type React from 'react';
 declare const states: {
     CONNECTED: string;
     CONNECTING: string;
-    EXPIRING: string;
     FAILED: string;
     REJECTED: string;
     NOTCONNECTED: string;
     UNAVAILABLE: string;
-    DUPLICATED: string;
     SIWE: string;
     RECOVER_ADDRESS_MISMATCH: string;
 };

package/build/components/ConnectModal/ConnectWithInjector/index.js

@@ -0,0 +1,295 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { AnimatePresence } from 'framer-motion';
+import { useCallback, useState, useEffect } from 'react';
+import { RetryIconCircle, AlertIcon, TickIcon } from '../../../assets/icons.js';
+import { useEthereumBridge } from '../../../ethereum/OpenfortEthereumBridgeContext.js';
+import { useUser } from '../../../hooks/openfort/useUser.js';
+import useLocales from '../../../hooks/useLocales.js';
+import { useRouteProps } from '../../../hooks/useRouteProps.js';
+import { detectBrowser, isWalletConnectConnector } from '../../../utils/index.js';
+import { logger } from '../../../utils/logger.js';
+import { useConnectWithSiwe } from '../../../wagmi/useConnectWithSiwe.js';
+import { useExternalConnector } from '../../../wallets/useExternalConnectors.js';
+import Alert from '../../Common/Alert/index.js';
+import BrowserIcon from '../../Common/BrowserIcon/index.js';
+import Button from '../../Common/Button/index.js';
+import { ModalHeading, ModalContent, ModalContentContainer, ModalH1, ModalBody } from '../../Common/Modal/styles.js';
+import SquircleSpinner from '../../Common/SquircleSpinner/index.js';
+import Tooltip from '../../Common/Tooltip/index.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+import CircleSpinner from './CircleSpinner/index.js';
+import { Container, ConnectingContainer, ConnectingAnimation, RetryButton, RetryIconContainer, Content } from './styles.js';
+
+const states = {
+    CONNECTED: 'connected',
+    CONNECTING: 'connecting',
+    FAILED: 'failed',
+    REJECTED: 'rejected',
+    NOTCONNECTED: 'notconnected',
+    UNAVAILABLE: 'unavailable',
+    SIWE: 'siwe',
+    RECOVER_ADDRESS_MISMATCH: 'recoverAddressMismatch',
+};
+const contentVariants = {
+    initial: {
+        willChange: 'transform,opacity',
+        position: 'relative',
+        opacity: 0,
+        scale: 0.95,
+    },
+    animate: {
+        position: 'relative',
+        opacity: 1,
+        scale: 1,
+        transition: {
+            ease: [0.16, 1, 0.3, 1],
+            duration: 0.4,
+            delay: 0.05,
+            position: { delay: 0 },
+        },
+    },
+    exit: {
+        position: 'absolute',
+        opacity: 0,
+        scale: 0.95,
+        transition: {
+            ease: [0.16, 1, 0.3, 1],
+            duration: 0.3,
+        },
+    },
+};
+const ConnectWithInjector = ({ forceState }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const { setOpen } = useOpenfort();
+    const bridge = useEthereumBridge();
+    const { connectWithSiwe } = useConnectWithSiwe();
+    const props = useRouteProps(routes.CONNECT);
+    const { linkedAccounts, user } = useUser();
+    const { triggerResize, connector: c } = useOpenfort();
+    const id = c.id;
+    const wallet = useExternalConnector(id);
+    const onConnect = useCallback(() => {
+        setStatus(states.CONNECTED);
+        setTimeout(() => {
+            triggerResize();
+        }, 250);
+        setTimeout(() => {
+            setOpen(false);
+        }, 1250);
+    }, [setOpen, triggerResize]);
+    const handleConnectSettled = useCallback(async (walletItem, connectResult) => {
+        var _a, _b, _c;
+        if (!bridge)
+            return;
+        const disconnect = bridge.disconnect;
+        const getConnectorAccounts = bridge.getConnectorAccounts;
+        if (props.connectType === 'recover' && getConnectorAccounts) {
+            const acc = await getConnectorAccounts(walletItem.connector);
+            if (acc.some((v) => { var _a; return v === ((_a = props.wallet) === null || _a === void 0 ? void 0 : _a.address); })) {
+                onConnect();
+            }
+            else {
+                setStatus(states.RECOVER_ADDRESS_MISMATCH);
+                await disconnect();
+            }
+            return;
+        }
+        // Only skip SIWE when user is logged in AND this wallet is already linked (reconnecting)
+        const userWallets = user
+            ? linkedAccounts === null || linkedAccounts === void 0 ? void 0 : linkedAccounts.filter((acc) => {
+                var _a, _b, _c;
+                return acc.walletClientType === ((_b = (_a = walletItem.connector) === null || _a === void 0 ? void 0 : _a.name) === null || _b === void 0 ? void 0 : _b.toLowerCase()) ||
+                    acc.walletClientType === ((_c = walletItem.connector) === null || _c === void 0 ? void 0 : _c.id);
+            })
+            : [];
+        if (userWallets && userWallets.length > 0 && getConnectorAccounts) {
+            const acc = await getConnectorAccounts(walletItem.connector);
+            if (acc.some((v) => userWallets.some((w) => w.accountId === v))) {
+                onConnect();
+                return;
+            }
+        }
+        setStatus(states.SIWE);
+        const addressFromResult = (_a = connectResult === null || connectResult === void 0 ? void 0 : connectResult.accounts) === null || _a === void 0 ? void 0 : _a[0];
+        connectWithSiwe({
+            address: addressFromResult,
+            connectorType: (_b = walletItem.connector) === null || _b === void 0 ? void 0 : _b.type,
+            walletClientType: (_c = walletItem.connector) === null || _c === void 0 ? void 0 : _c.id,
+            onError: (error, _errorType) => {
+                logger.error(error);
+                disconnect();
+                setStatus(states.FAILED);
+            },
+            onConnect: () => {
+                onConnect();
+            },
+        });
+    }, [
+        bridge,
+        user,
+        linkedAccounts,
+        onConnect,
+        props.connectType,
+        'wallet' in props ? (_a = props.wallet) === null || _a === void 0 ? void 0 : _a.address : undefined,
+        connectWithSiwe,
+    ]);
+    const handleConnectError = useCallback((error) => {
+        setShowTryAgainTooltip(true);
+        setTimeout(() => setShowTryAgainTooltip(false), 3500);
+        if ((error === null || error === void 0 ? void 0 : error.code) !== undefined) {
+            switch (error.code) {
+                case -32002:
+                    setStatus(states.NOTCONNECTED);
+                    break;
+                case 4001:
+                    setStatus(states.REJECTED);
+                    break;
+                default:
+                    setStatus(states.FAILED);
+                    break;
+            }
+        }
+        else if (error === null || error === void 0 ? void 0 : error.message) {
+            if (error.message === 'User rejected request') {
+                setStatus(states.REJECTED);
+            }
+            else {
+                setStatus(states.FAILED);
+            }
+        }
+        else {
+            setStatus(states.FAILED);
+        }
+    }, []);
+    const walletInfo = {
+        name: wallet === null || wallet === void 0 ? void 0 : wallet.name,
+        shortName: (_b = wallet === null || wallet === void 0 ? void 0 : wallet.shortName) !== null && _b !== void 0 ? _b : wallet === null || wallet === void 0 ? void 0 : wallet.name,
+        icon: (_c = wallet === null || wallet === void 0 ? void 0 : wallet.iconConnector) !== null && _c !== void 0 ? _c : wallet === null || wallet === void 0 ? void 0 : wallet.icon,
+        iconShape: (_d = wallet === null || wallet === void 0 ? void 0 : wallet.iconShape) !== null && _d !== void 0 ? _d : 'circle',
+        iconShouldShrink: wallet === null || wallet === void 0 ? void 0 : wallet.iconShouldShrink,
+    };
+    const [showTryAgainTooltip, setShowTryAgainTooltip] = useState(false);
+    const browser = detectBrowser();
+    const extensionUrl = (_e = wallet === null || wallet === void 0 ? void 0 : wallet.downloadUrls) === null || _e === void 0 ? void 0 : _e[browser];
+    const suggestedExtension = (wallet === null || wallet === void 0 ? void 0 : wallet.downloadUrls)
+        ? {
+            name: Object.keys(wallet === null || wallet === void 0 ? void 0 : wallet.downloadUrls)[0],
+            label: ((_f = Object.keys(wallet === null || wallet === void 0 ? void 0 : wallet.downloadUrls)[0]) === null || _f === void 0 ? void 0 : _f.charAt(0).toUpperCase()) +
+                ((_g = Object.keys(wallet === null || wallet === void 0 ? void 0 : wallet.downloadUrls)[0]) === null || _g === void 0 ? void 0 : _g.slice(1)), // Capitalise first letter, but this might be better suited as a lookup table
+            url: wallet === null || wallet === void 0 ? void 0 : wallet.downloadUrls[Object.keys(wallet === null || wallet === void 0 ? void 0 : wallet.downloadUrls)[0]],
+        }
+        : undefined;
+    const [status, setStatus] = useState(forceState ? forceState : !(wallet === null || wallet === void 0 ? void 0 : wallet.isInstalled) ? states.UNAVAILABLE : states.CONNECTING);
+    const locales = useLocales({
+        CONNECTORNAME: (_h = walletInfo.name) !== null && _h !== void 0 ? _h : 'UNKNOWN CONNECTOR',
+        CONNECTORSHORTNAME: (_k = (_j = walletInfo.shortName) !== null && _j !== void 0 ? _j : walletInfo.name) !== null && _k !== void 0 ? _k : 'UNKNOWN CONNECTOR',
+        SUGGESTEDEXTENSIONBROWSER: (_l = suggestedExtension === null || suggestedExtension === void 0 ? void 0 : suggestedExtension.label) !== null && _l !== void 0 ? _l : 'your browser',
+    });
+    const runConnect = useCallback(async () => {
+        if (!bridge || !(wallet === null || wallet === void 0 ? void 0 : wallet.isInstalled) || !(wallet === null || wallet === void 0 ? void 0 : wallet.connector)) {
+            setStatus(states.UNAVAILABLE);
+            return;
+        }
+        if (bridge.account.isConnected) {
+            await bridge.disconnect();
+        }
+        setStatus(states.CONNECTING);
+        try {
+            let connectResult;
+            if (bridge.connectAsync) {
+                const result = await bridge.connectAsync({ connector: wallet.connector });
+                connectResult =
+                    result && typeof result === 'object' && 'accounts' in result
+                        ? result
+                        : undefined;
+            }
+            else {
+                bridge.connect({ connector: wallet.connector });
+                return;
+            }
+            if (!wallet) {
+                setStatus(states.FAILED);
+                logger.error('No wallet found');
+                return;
+            }
+            logger.log('Connect type is:', props.connectType);
+            await handleConnectSettled(wallet, connectResult);
+        }
+        catch (err) {
+            logger.error(err);
+            handleConnectError(err && typeof err === 'object' && 'code' in err
+                ? err
+                : {
+                    message: err instanceof Error && err.message === 'User rejected request'
+                        ? 'User rejected request'
+                        : 'Connection failed',
+                });
+        }
+        setTimeout(triggerResize, 100);
+    }, [bridge, wallet, props.connectType, handleConnectSettled, handleConnectError, triggerResize]);
+    let connectTimeout;
+    useEffect(() => {
+        if (status === states.UNAVAILABLE)
+            return;
+        // UX: Give user time to see the UI before opening the extension
+        connectTimeout = setTimeout(runConnect, 600);
+        return () => {
+            clearTimeout(connectTimeout);
+        };
+    }, []);
+    /* Timeout functionality if necessary
+    let expiryTimeout: any;
+    useEffect(() => {
+      if (status === states.EXPIRING) {
+        expiryTimeout = setTimeout(
+          () => {
+            if (expiryTimer <= 0) {
+              setStatus(states.FAILED);
+              setExpiryTimer(expiryDefault);
+            } else {
+              setExpiryTimer(expiryTimer - 1);
+            }
+          },
+          expiryTimer === 9 ? 1500 : 1000 // Google: Chronostasis
+        );
+      }
+      return () => {
+        clearTimeout(expiryTimeout);
+      };
+    }, [status, expiryTimer]);
+    */
+    if (!wallet) {
+        return (jsx(PageContent, { children: jsxs(Container, { 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, { 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.FAILED || status === states.REJECTED || status === states.RECOVER_ADDRESS_MISMATCH;
+    return (jsx(PageContent, { children: jsxs(Container, { children: [jsx(ConnectingContainer, { children: jsxs(ConnectingAnimation, { "$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.UNAVAILABLE ? (jsx("div", { style: {
+                                        transform: 'scale(1.14)',
+                                        position: 'relative',
+                                        width: '100%',
+                                    }, children: walletInfo.icon })) : (walletInfo.icon), smallLogo: walletInfo.iconShouldShrink, connecting: status === states.CONNECTING || status === states.SIWE, unavailable: status === states.UNAVAILABLE })) : (jsx(SquircleSpinner, { logo: status === states.UNAVAILABLE ? (jsx("div", { style: {
+                                        transform: 'scale(1.14)',
+                                        position: 'relative',
+                                        width: '100%',
+                                    }, children: walletInfo.icon })) : (walletInfo.icon), connecting: status === states.CONNECTING || status === states.SIWE }))] }) }), jsx(ModalContentContainer, { children: jsxs(AnimatePresence, { initial: false, children: [status === states.FAILED && (jsx(Content, { initial: 'initial', animate: 'animate', exit: 'exit', variants: contentVariants, children: jsxs(ModalContent, { children: [jsxs(ModalH1, { "$error": true, children: [jsx(AlertIcon, {}), locales.injectionScreen_failed_h1] }), jsx(ModalBody, { children: locales.injectionScreen_failed_p })] }) }, states.FAILED)), status === states.REJECTED && (jsx(Content, { initial: 'initial', animate: 'animate', exit: 'exit', variants: contentVariants, children: jsxs(ModalContent, { style: {
+                                        paddingBottom: 28,
+                                    }, children: [jsx(ModalH1, { children: locales.injectionScreen_rejected_h1 }), jsx(ModalBody, { children: locales.injectionScreen_rejected_p })] }) }, states.REJECTED)), status === states.RECOVER_ADDRESS_MISMATCH && (jsx(Content, { initial: 'initial', animate: 'animate', exit: 'exit', variants: contentVariants, children: jsxs(ModalContent, { style: {
+                                        paddingBottom: 28,
+                                    }, children: [jsx(ModalH1, { children: "Wallet mismatch" }), jsx(ModalBody, { children: "The wallet address you are trying to recover does not belong to this user." })] }) }, states.RECOVER_ADDRESS_MISMATCH)), status === states.CONNECTING && (jsx(Content, { initial: 'initial', animate: 'animate', exit: 'exit', variants: contentVariants, children: jsxs(ModalContent, { style: {
+                                        paddingBottom: 28,
+                                    }, children: [jsx(ModalH1, { children: wallet.connector.id === 'injected'
+                                                ? locales.injectionScreen_connecting_injected_h1
+                                                : locales.injectionScreen_connecting_h1 }), jsx(ModalBody, { children: wallet.connector.id === 'injected'
+                                                ? locales.injectionScreen_connecting_injected_p
+                                                : locales.injectionScreen_connecting_p })] }) }, states.CONNECTING)), status === states.SIWE && (jsx(Content, { initial: 'initial', animate: 'animate', exit: 'exit', variants: contentVariants, children: jsxs(ModalContent, { style: {
+                                        paddingBottom: 28,
+                                    }, children: [jsx(ModalH1, { children: "Confirm in your wallet" }), jsx(ModalBody, { children: "Sign the message in your wallet to confirm that you own this wallet and complete the connection." })] }) }, states.SIWE)), status === states.CONNECTED && (jsx(Content, { initial: 'initial', animate: 'animate', exit: 'exit', variants: contentVariants, children: jsxs(ModalContent, { children: [jsxs(ModalH1, { "$valid": true, children: [jsx(TickIcon, {}), " Connected"] }), jsxs(ModalBody, { children: ["Successfully connected with ", walletInfo.name, "."] })] }) }, states.CONNECTED)), status === states.NOTCONNECTED && (jsx(Content, { initial: 'initial', animate: 'animate', exit: 'exit', variants: contentVariants, children: jsxs(ModalContent, { children: [jsx(ModalH1, { children: locales.injectionScreen_notconnected_h1 }), jsx(ModalBody, { children: locales.injectionScreen_notconnected_p })] }) }, states.NOTCONNECTED)), status === states.UNAVAILABLE && (jsx(Content, { initial: 'initial', animate: 'animate', exit: 'exit', variants: contentVariants, children: !extensionUrl ? (jsxs(Fragment, { children: [jsxs(ModalContent, { style: { paddingBottom: 12 }, children: [jsx(ModalH1, { children: locales.injectionScreen_unavailable_h1 }), jsx(ModalBody, { children: locales.injectionScreen_unavailable_p })] }), !wallet.isInstalled && suggestedExtension && (jsxs(Button, { href: suggestedExtension === null || suggestedExtension === void 0 ? void 0 : suggestedExtension.url, icon: jsx(BrowserIcon, { browser: suggestedExtension === null || suggestedExtension === void 0 ? void 0 : suggestedExtension.name }), children: ["Install on ", suggestedExtension === null || suggestedExtension === void 0 ? void 0 : suggestedExtension.label] }))] })) : (jsxs(Fragment, { children: [jsxs(ModalContent, { style: { paddingBottom: 18 }, children: [jsx(ModalH1, { children: locales.injectionScreen_install_h1 }), jsx(ModalBody, { children: locales.injectionScreen_install_p })] }), !wallet.isInstalled && extensionUrl && (jsx(Button, { href: extensionUrl, icon: jsx(BrowserIcon, {}), children: locales.installTheExtension }))] })) }, states.UNAVAILABLE))] }) })] }) }));
+};
+
+export { ConnectWithInjector as default };
+//# sourceMappingURL=index.js.map

package/build/components/ConnectModal/ConnectWithInjector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/ConnectModal/ConnectWithInjector/styles.js

@@ -0,0 +1,133 @@
+import { motion } from 'framer-motion';
+import { keyframes, css } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+import { ModalContent } from '../../Common/Modal/styles.js';
+
+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 = 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:1; }
+  100%{ opacity:0; }
+`;
+const Container = styled(motion.div) `
+  /*
+  background: var(
+    --ck-body-background
+  ); // To stop the overlay issue during transition for the squircle spinner
+  */
+`;
+const ConnectingContainer = 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 = 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} 220ms ease-out both;
+      &:before {
+        animation: ${outlineKeyframes} 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%;
+  }
+`;
+
+export { ConnectingAnimation, ConnectingContainer, Container, Content, RetryButton, RetryIconContainer };
+//# sourceMappingURL=styles.js.map

package/build/components/ConnectModal/ConnectWithInjector/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/ConnectModal/ConnectWithMobile.js

@@ -0,0 +1,99 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { useEthereumBridge } from '../../ethereum/OpenfortEthereumBridgeContext.js';
+import styled from '../../styles/styled/index.js';
+import { isAndroid } from '../../utils/index.js';
+import { useOnUserReturn } from '../../utils/useOnUserReturn.js';
+import { useConnectWithSiwe } from '../../wagmi/useConnectWithSiwe.js';
+import { useExternalConnector } from '../../wallets/useExternalConnectors.js';
+import { walletConfigs } from '../../wallets/walletConfigs.js';
+import Button from '../Common/Button/index.js';
+import FitText from '../Common/FitText/index.js';
+import Loader from '../Common/Loading/index.js';
+import { routes } from '../Openfort/types.js';
+import { useOpenfort } from '../Openfort/useOpenfort.js';
+import { PageContent } from '../PageContent/index.js';
+
+const states = {
+    INIT: 'init',
+    REDIRECT: 'redirect',
+    CONNECTING: 'connecting',
+    ERROR: 'error',
+};
+const DownloadFooter = styled.div `
+  margin-top: 30px;
+  color: var(--ck-body-color-muted);
+`;
+const ConnectWithMobile = () => {
+    var _a, _b, _c, _d, _e;
+    const { connector, setRoute } = useOpenfort();
+    const walletId = Object.keys(walletConfigs).find(
+    // where id is comma separated list
+    (id) => id
+        .split(',')
+        .map((i) => i.trim())
+        .indexOf(connector.id) !== -1);
+    const wallet = useExternalConnector(connector.id) || (walletId && walletConfigs[walletId]) || {};
+    const bridge = useEthereumBridge();
+    const isConnected = (_b = (_a = bridge === null || bridge === void 0 ? void 0 : bridge.account) === null || _a === void 0 ? void 0 : _a.isConnected) !== null && _b !== void 0 ? _b : false;
+    const [status, setStatus] = useState(isConnected ? states.INIT : states.CONNECTING);
+    const [description, setDescription] = useState(undefined);
+    const [hasReturned, setHasReturned] = useState(false);
+    const { connectWithSiwe } = useConnectWithSiwe();
+    const openApp = () => {
+        var _a;
+        const uri = (_a = wallet === null || wallet === void 0 ? void 0 : wallet.getWalletConnectDeeplink) === null || _a === void 0 ? void 0 : _a.call(wallet, '');
+        if (uri) {
+            window.location.href = uri.replace('?uri=', '');
+        }
+        else {
+            setStatus(states.ERROR);
+            setDescription('Wallet does not support deeplink');
+        }
+    };
+    useOnUserReturn(() => {
+        setTimeout(() => {
+            setHasReturned(true);
+        }, 250);
+    });
+    useEffect(() => {
+        if (hasReturned) {
+            setHasReturned(false);
+            if (isConnected) {
+                setStatus(states.CONNECTING);
+            }
+            else {
+                setStatus(states.ERROR);
+                setDescription('Connection failed or cancelled');
+            }
+        }
+    }, [hasReturned, isConnected]);
+    useEffect(() => {
+        switch (status) {
+            case states.INIT:
+                break;
+            case states.CONNECTING:
+                setDescription('Requesting signature to verify wallet...');
+                connectWithSiwe({
+                    walletClientType: walletId,
+                    onConnect: () => setRoute(routes.CONNECTED),
+                    onError: (err) => {
+                        setStatus(states.ERROR);
+                        setDescription(err || 'Connection failed');
+                    },
+                });
+                break;
+        }
+    }, [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: () => {
+                    setStatus(isConnected ? states.CONNECTING : states.INIT);
+                    setDescription('');
+                } }), isConnected ? (jsx(Button, { onClick: () => {
+                    openApp();
+                }, children: "Sign in App" })) : (jsx(Button, { onClick: () => {
+                    openApp();
+                }, children: "Sign in App" })), jsx(DownloadFooter, { children: jsxs(FitText, { children: ["Don't have ", (_c = wallet.name) !== null && _c !== void 0 ? _c : connector.id.split(',')[0], " installed?", ' ', jsx("a", { style: { marginLeft: 5 }, href: isAndroid() ? (_d = wallet === null || wallet === void 0 ? void 0 : wallet.downloadUrls) === null || _d === void 0 ? void 0 : _d.android : (_e = wallet === null || wallet === void 0 ? void 0 : wallet.downloadUrls) === null || _e === void 0 ? void 0 : _e.ios, target: "_blank", rel: "noreferrer", children: "GET" })] }) })] }));
+};
+
+export { ConnectWithMobile as default };
+//# sourceMappingURL=ConnectWithMobile.js.map

package/build/components/ConnectModal/ConnectWithMobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectWithMobile.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}