@openfort/react 0.3.2 → 1.0.0

package/build/components/Common/Tooltip/styles.js

@@ -0,0 +1,81 @@
+import { motion } from 'framer-motion';
+import styled from '../../../styles/styled/index.js';
+
+const TooltipWindow = styled(motion.div) `
+  z-index: 2147483647;
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+`;
+const TooltipContainer = styled(motion.div) `
+  --shadow: var(--ck-tooltip-shadow);
+  z-index: 2147483647;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  gap: 8px;
+  width: fit-content;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(
+    --ck-tooltip-border-radius,
+    ${(props) => (props.$size === 'small' ? 11 : 14)}px
+  );
+  border-radius: ;
+  padding: 10px 16px 10px 12px;
+  font-size: 14px;
+  line-height: 19px;
+  font-weight: 500;
+  letter-spacing: -0.1px;
+  color: var(--ck-tooltip-color);
+  background: var(--ck-tooltip-background);
+  box-shadow: var(--shadow);
+  > span {
+    z-index: 3;
+    position: relative;
+  }
+  > div {
+    margin: -4px 0; // offset for icon
+  }
+  strong {
+    color: var(--ck-spinner-color);
+  }
+
+  .ck-tt-logo {
+    display: inline-block;
+    vertical-align: text-bottom;
+    height: 1em;
+    width: 1.25em;
+    svg {
+      display: block;
+      height: 100%;
+      transform: translate(0.5px, -1px) scale(1.75);
+    }
+  }
+`;
+const TooltipTail = styled(motion.div) `
+  z-index: 2;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${(props) => (props.$size === 'small' ? 14 : 18)}px;
+  right: 100%;
+  top: 0;
+  bottom: 0;
+  overflow: hidden;
+  &:before {
+    content: '';
+    position: absolute;
+    box-shadow: var(--shadow);
+    width: ${(props) => (props.$size === 'small' ? 14 : 18)}px;
+    height: ${(props) => (props.$size === 'small' ? 14 : 18)}px;
+    transform: translate(75%, 0) rotate(45deg);
+    background: var(--ck-tooltip-background);
+    border-radius: ${(props) => (props.$size === 'small' ? 2 : 3)}px 0 0 0;
+  }
+`;
+
+export { TooltipContainer, TooltipTail, TooltipWindow };
+//# sourceMappingURL=styles.js.map

package/build/components/Common/Tooltip/styles.js.map

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

package/build/components/Common/WalletRecoveryIcon/index.d.ts

@@ -0,0 +1,4 @@
+import { RecoveryMethod } from '@openfort/openfort-js';
+export declare const WalletRecoveryIcon: ({ recovery }: {
+    recovery: RecoveryMethod | undefined;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/build/components/Common/WalletRecoveryIcon/index.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { RecoveryMethod } from '@openfort/openfort-js';
+import { LockIcon, FingerPrintIcon, KeyIcon } from '../../../assets/icons.js';
+
+const WalletRecoveryIcon = ({ recovery }) => {
+    switch (recovery) {
+        case RecoveryMethod.PASSWORD:
+            return jsx(KeyIcon, {});
+        case RecoveryMethod.PASSKEY:
+            return jsx(FingerPrintIcon, {});
+        case RecoveryMethod.AUTOMATIC:
+            return jsx(LockIcon, {});
+        default:
+            return null;
+    }
+};
+
+export { WalletRecoveryIcon };
+//# sourceMappingURL=index.js.map

package/build/components/Common/WalletRecoveryIcon/index.js.map

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

package/build/components/ConnectButton/index.d.ts

@@ -1,20 +1,17 @@
 import type React from 'react';
-import type { Chain } from 'viem';
 import type { CustomTheme, Mode, Theme } from '../../types';
 type Hash = `0x${string}`;
 type ConnectButtonRendererProps = {
     children?: (renderProps: {
         show?: () => void;
         hide?: () => void;
-        chain?: Chain & {
-            unsupported?: boolean;
-        };
         unsupported: boolean;
         isConnected: boolean;
         isConnecting: boolean;
         address?: Hash;
         truncatedAddress?: string;
         ensName?: string;
+        chainId?: number;
     }) => React.ReactNode;
 };
 type OpenfortButtonProps = {
@@ -26,6 +23,17 @@ type OpenfortButtonProps = {
     customTheme?: CustomTheme;
     onClick?: (open: () => void) => void;
 };
+/**
+ * Connect button component. Shows balance, avatar, and chain when connected;
+ * opens connect modal when disconnected. Use `OpenfortButton.Custom` for custom render.
+ *
+ * @example
+ * ```tsx
+ * <OpenfortButton />
+ * <OpenfortButton label="Connect" showAvatar />
+ * <OpenfortButton.Custom>{(props) => <CustomButton {...props} />}</OpenfortButton.Custom>
+ * ```
+ */
 export declare function OpenfortButton({ label, showBalance, showAvatar, theme, mode, customTheme, onClick, }: OpenfortButtonProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace OpenfortButton {
     var Custom: React.FC<ConnectButtonRendererProps>;

package/build/components/ConnectButton/index.js

@@ -0,0 +1,266 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ChainTypeEnum } from '@openfort/openfort-js';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useConnectionStrategy } from '../../core/ConnectionStrategyContext.js';
+import { useUI } from '../../hooks/openfort/useUI.js';
+import useIsMounted from '../../hooks/useIsMounted.js';
+import useLocales from '../../hooks/useLocales.js';
+import { useResolvedIdentity } from '../../hooks/useResolvedIdentity.js';
+import { useOpenfortCore } from '../../openfort/useOpenfort.js';
+import { ResetContainer } from '../../styles/index.js';
+import { formatAddress } from '../../utils/format.js';
+import { logger } from '../../utils/logger.js';
+import { Balance } from '../BalanceButton/index.js';
+import Avatar from '../Common/Avatar/index.js';
+import ThemedButton from '../Common/ThemedButton/index.js';
+import { routes } from '../Openfort/types.js';
+import { useOpenfort } from '../Openfort/useOpenfort.js';
+import { TextContainer, IconContainer, UnsupportedNetworkContainer } from './styles.js';
+import { ThemeContainer } from '../Common/ThemedButton/styles.js';
+
+const contentVariants = {
+    initial: {
+        zIndex: 2,
+        opacity: 0,
+        x: '-100%',
+    },
+    animate: {
+        opacity: 1,
+        x: 0.1,
+        transition: {
+            duration: 0.4,
+            ease: [0.25, 1, 0.5, 1],
+        },
+    },
+    exit: {
+        zIndex: 1,
+        opacity: 0,
+        x: '-100%',
+        pointerEvents: 'none',
+        position: 'absolute',
+        transition: {
+            duration: 0.4,
+            ease: [0.25, 1, 0.5, 1],
+        },
+    },
+};
+const addressVariants = {
+    initial: {
+        zIndex: 2,
+        opacity: 0,
+        x: '100%',
+    },
+    animate: {
+        x: 0.2,
+        opacity: 1,
+        transition: {
+            duration: 0.4,
+            ease: [0.25, 1, 0.5, 1],
+        },
+    },
+    exit: {
+        zIndex: 1,
+        x: '100%',
+        opacity: 0,
+        pointerEvents: 'none',
+        position: 'absolute',
+        transition: {
+            duration: 0.4,
+            ease: [0.25, 1, 0.5, 1],
+        },
+    },
+};
+const textVariants = {
+    initial: {
+        opacity: 0,
+    },
+    animate: {
+        opacity: 1,
+        transition: {
+            duration: 0.3,
+            ease: [0.25, 1, 0.5, 1],
+        },
+    },
+    exit: {
+        position: 'absolute',
+        opacity: 0,
+        transition: {
+            duration: 0.3,
+            ease: [0.25, 1, 0.5, 1],
+        },
+    },
+};
+const ConnectButtonRenderer = ({ children }) => {
+    var _a;
+    const isMounted = useIsMounted();
+    const context = useOpenfort();
+    const { open, close, isOpen } = useUI();
+    const { user, chainType, embeddedAccounts, activeEmbeddedAddress, embeddedState } = useOpenfortCore();
+    const strategy = useConnectionStrategy();
+    const strategyState = { user, embeddedAccounts, activeEmbeddedAddress, embeddedState, chainType };
+    const isConnected = (_a = strategy === null || strategy === void 0 ? void 0 : strategy.isConnected(strategyState)) !== null && _a !== void 0 ? _a : false;
+    const address = isConnected ? strategy === null || strategy === void 0 ? void 0 : strategy.getAddress(strategyState) : undefined;
+    const chainId = isConnected && chainType === ChainTypeEnum.EVM ? strategy === null || strategy === void 0 ? void 0 : strategy.getChainId() : undefined;
+    const chainIsSupported = chainId != null && context.chains.some((c) => c.id === chainId);
+    const identity = useResolvedIdentity({
+        address: address !== null && address !== void 0 ? address : '',
+        chainType: chainType,
+        ensChainId: chainId !== null && chainId !== void 0 ? chainId : 0,
+        enabled: isConnected && !!address,
+    });
+    const ensName = identity.status === 'success' ? identity.name : undefined;
+    function hide() {
+        close();
+    }
+    function show() {
+        open();
+        context.setRoute(isConnected ? routes.CONNECTED : routes.PROVIDERS);
+    }
+    if (!children)
+        return null;
+    if (!isMounted)
+        return null;
+    return (jsx(Fragment, { children: children({
+            show,
+            hide,
+            unsupported: !chainIsSupported,
+            isConnected: isConnected,
+            isConnecting: isOpen,
+            address: address,
+            truncatedAddress: address ? formatAddress(address, chainType) : undefined,
+            ensName: ensName !== null && ensName !== void 0 ? ensName : undefined,
+            chainId,
+        }) }));
+};
+ConnectButtonRenderer.displayName = 'OpenfortButton.Custom';
+const ConnectedLabel = ({ separator }) => {
+    var _a;
+    const { user, chainType, embeddedAccounts, activeEmbeddedAddress, embeddedState, isLoadingAccounts, walletStatus } = useOpenfortCore();
+    const strategy = useConnectionStrategy();
+    const strategyState = { user, embeddedAccounts, activeEmbeddedAddress, embeddedState, chainType };
+    const isLoading = isLoadingAccounts || walletStatus.status === 'creating' || walletStatus.status === 'connecting';
+    const isConnected = (_a = strategy === null || strategy === void 0 ? void 0 : strategy.isConnected(strategyState)) !== null && _a !== void 0 ? _a : false;
+    const address = strategy === null || strategy === void 0 ? void 0 : strategy.getAddress(strategyState);
+    if (isLoading)
+        return 'Loading...';
+    if (!isConnected || !address) {
+        if (!user)
+            return 'Loading user...';
+        return 'Not connected';
+    }
+    return separator ? `${address.slice(0, 6)}${separator}${address.slice(-4)}` : formatAddress(address, chainType);
+};
+function OpenfortButtonInner({ label, showAvatar, separator, }) {
+    var _a;
+    const locales = useLocales({});
+    const { user, chainType, embeddedAccounts, activeEmbeddedAddress, embeddedState } = useOpenfortCore();
+    const context = useOpenfort();
+    const strategy = useConnectionStrategy();
+    const strategyState = { user, embeddedAccounts, activeEmbeddedAddress, embeddedState, chainType };
+    const isConnected = (_a = strategy === null || strategy === void 0 ? void 0 : strategy.isConnected(strategyState)) !== null && _a !== void 0 ? _a : false;
+    const address = isConnected ? strategy === null || strategy === void 0 ? void 0 : strategy.getAddress(strategyState) : undefined;
+    const chainId = isConnected && chainType === ChainTypeEnum.EVM ? strategy === null || strategy === void 0 ? void 0 : strategy.getChainId() : undefined;
+    const chainIsSupported = chainId != null && context.chains.some((c) => c.id === chainId);
+    const showUnsupportedWarning = chainType === ChainTypeEnum.EVM && !chainIsSupported;
+    const identity = useResolvedIdentity({
+        address: address !== null && address !== void 0 ? address : '',
+        chainType: chainType,
+        ensChainId: chainId !== null && chainId !== void 0 ? chainId : 0,
+        enabled: isConnected && !!address,
+    });
+    const ensName = identity.status === 'success' ? identity.name : undefined;
+    const defaultLabel = locales.connectWallet;
+    return (jsx(AnimatePresence, { initial: false, children: user || (isConnected && address) ? (jsxs(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: addressVariants, style: {
+                height: 40,
+            }, children: [showAvatar && (jsxs(IconContainer, { children: [jsx(AnimatePresence, { initial: false, children: showUnsupportedWarning && (jsx(UnsupportedNetworkContainer, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("title", { children: "Unsupported network" }), jsx("path", { d: "M1.68831 13.5H12.0764C13.1026 13.5 13.7647 12.7197 13.7647 11.763C13.7647 11.4781 13.6985 11.1863 13.5462 10.9149L8.34225 1.37526C8.02445 0.791754 7.45505 0.5 6.88566 0.5C6.31627 0.5 5.73364 0.791754 5.42246 1.37526L0.225108 10.9217C0.0728291 11.1863 0 11.4781 0 11.763C0 12.7197 0.662083 13.5 1.68831 13.5ZM6.88566 8.8048C6.49503 8.8048 6.27655 8.5809 6.26331 8.1738L6.16399 5.0595C6.15075 4.64562 6.44869 4.34708 6.87904 4.34708C7.30278 4.34708 7.61396 4.6524 7.60071 5.06628L7.5014 8.16701C7.48154 8.5809 7.26305 8.8048 6.88566 8.8048ZM6.88566 11.3492C6.44207 11.3492 6.07792 11.0303 6.07792 10.5757C6.07792 10.1211 6.44207 9.80219 6.88566 9.80219C7.32926 9.80219 7.69341 10.1143 7.69341 10.5757C7.69341 11.0371 7.32264 11.3492 6.88566 11.3492Z", fill: "currentColor" })] }) })) }), jsx(Avatar, { size: 24, address: address })] })), jsx("div", { style: {
+                        position: 'relative',
+                        paddingRight: showAvatar ? 1 : 0,
+                    }, children: jsx(AnimatePresence, { initial: false, children: jsx(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants, style: {
+                                position: ensName ? 'absolute' : 'relative',
+                            }, children: jsx(ConnectedLabel, { separator: separator }) }, "ckTruncatedAddress") }) })] }, 'connectedText')) : (jsx(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: contentVariants, style: {
+                height: 40,
+            }, children: label ? label : defaultLabel }, "connectWalletText")) }));
+}
+/**
+ * Connect button component. Shows balance, avatar, and chain when connected;
+ * opens connect modal when disconnected. Use `OpenfortButton.Custom` for custom render.
+ *
+ * @example
+ * ```tsx
+ * <OpenfortButton />
+ * <OpenfortButton label="Connect" showAvatar />
+ * <OpenfortButton.Custom>{(props) => <CustomButton {...props} />}</OpenfortButton.Custom>
+ * ```
+ */
+function OpenfortButton({ 
+// Options
+label, showBalance = false, showAvatar = true, 
+// Theming
+theme, mode, customTheme, 
+// Events
+onClick, }) {
+    var _a, _b;
+    const isMounted = useIsMounted();
+    const context = useOpenfort();
+    const { open } = useUI();
+    const { user, chainType, embeddedAccounts, activeEmbeddedAddress, embeddedState } = useOpenfortCore();
+    const strategy = useConnectionStrategy();
+    const strategyState = { user, embeddedAccounts, activeEmbeddedAddress, embeddedState, chainType };
+    const isConnected = (_a = strategy === null || strategy === void 0 ? void 0 : strategy.isConnected(strategyState)) !== null && _a !== void 0 ? _a : false;
+    const chainId = isConnected && chainType === ChainTypeEnum.EVM ? strategy === null || strategy === void 0 ? void 0 : strategy.getChainId() : undefined;
+    const chainIsSupported = chainId != null && context.chains.some((c) => c.id === chainId);
+    const separator = ['web95', 'rounded', 'minimal'].includes((_b = theme !== null && theme !== void 0 ? theme : context.uiConfig.theme) !== null && _b !== void 0 ? _b : '') ? '....' : undefined;
+    if (!isMounted)
+        return null;
+    const shouldShowBalance = showBalance && (chainType === ChainTypeEnum.SVM || chainIsSupported);
+    const willShowBalance = isConnected && shouldShowBalance;
+    return (jsx(ResetContainer, { "$useTheme": theme !== null && theme !== void 0 ? theme : context.uiConfig.theme, "$useMode": mode !== null && mode !== void 0 ? mode : context.mode, "$customTheme": customTheme !== null && customTheme !== void 0 ? customTheme : context.uiConfig.customTheme, children: jsxs(ThemeContainer, { onClick: () => {
+                logger.log('OpenfortButton click', {
+                    chainType,
+                    isConnected,
+                    address: strategy === null || strategy === void 0 ? void 0 : strategy.getAddress(strategyState),
+                });
+                if (onClick) {
+                    onClick(() => open());
+                }
+                else {
+                    open();
+                }
+            }, children: [shouldShowBalance && (jsx(AnimatePresence, { initial: false, children: willShowBalance && (jsx(motion.div, { initial: {
+                            opacity: 0,
+                            x: '100%',
+                            width: 0,
+                            marginRight: 0,
+                        }, animate: {
+                            opacity: 1,
+                            x: 0,
+                            width: 'auto',
+                            marginRight: -24,
+                            transition: {
+                                duration: 0.4,
+                                ease: [0.25, 1, 0.5, 1],
+                            },
+                        }, exit: {
+                            opacity: 0,
+                            x: '100%',
+                            width: 0,
+                            marginRight: 0,
+                            transition: {
+                                duration: 0.4,
+                                ease: [0.25, 1, 0.5, 1],
+                            },
+                        }, children: jsx(ThemedButton, { variant: 'secondary', theme: theme !== null && theme !== void 0 ? theme : context.uiConfig.theme, mode: mode !== null && mode !== void 0 ? mode : context.mode, customTheme: customTheme !== null && customTheme !== void 0 ? customTheme : context.uiConfig.customTheme, style: { overflow: 'hidden' }, children: jsx(motion.div, { style: { paddingRight: 24 }, children: jsx(Balance, { hideSymbol: true }) }) }) }, 'balance')) })), jsx(ThemedButton, { theme: theme !== null && theme !== void 0 ? theme : context.uiConfig.theme, mode: mode !== null && mode !== void 0 ? mode : context.mode, customTheme: customTheme !== null && customTheme !== void 0 ? customTheme : context.uiConfig.customTheme, style: shouldShowBalance && showBalance && isConnected && (theme === 'retro' || context.uiConfig.theme === 'retro')
+                        ? {
+                            /* Special fix for the retro theme... not happy about this one */
+                            boxShadow: 'var(--ck-connectbutton-balance-connectbutton-box-shadow)',
+                            borderRadius: 'var(--ck-connectbutton-balance-connectbutton-border-radius)',
+                            overflow: 'hidden',
+                        }
+                        : {
+                            overflow: 'hidden',
+                        }, children: jsx(OpenfortButtonInner, { separator: separator, showAvatar: showAvatar, label: label }) })] }) }));
+}
+OpenfortButton.Custom = ConnectButtonRenderer;
+
+export { OpenfortButton };
+//# sourceMappingURL=index.js.map

package/build/components/ConnectButton/index.js.map

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

package/build/components/ConnectButton/styles.js

@@ -0,0 +1,50 @@
+import { motion } from 'framer-motion';
+import styled from '../../styles/styled/index.js';
+
+const TextContainer = styled(motion.div) `
+  top: 0;
+  bottom: 0;
+  left: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+`;
+styled(motion.div) `
+  position: relative;
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  overflow: hidden;
+  svg {
+    display: block;
+  }
+`;
+const IconContainer = styled(motion.div) `
+  pointer-events: none;
+  user-select: none;
+  position: relative;
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+`;
+const UnsupportedNetworkContainer = styled(motion.div) `
+  z-index: 1;
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
+  background: var(--ck-body-color-danger, red);
+  color: #fff;
+  svg {
+    display: block;
+    position: relative;
+    top: -1px;
+  }
+`;
+
+export { IconContainer, TextContainer, UnsupportedNetworkContainer };
+//# sourceMappingURL=styles.js.map

package/build/components/ConnectButton/styles.js.map

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

package/build/components/ConnectKitThemeProvider/ConnectKitThemeProvider.js

@@ -0,0 +1,20 @@
+import React, { createContext, createElement } from 'react';
+
+const Context = createContext(null);
+const ConnectKitThemeProvider = ({ children, theme = 'auto', mode = 'auto', customTheme, }) => {
+    const value = {
+        theme,
+        mode,
+        customTheme,
+    };
+    return createElement(Context.Provider, { value }, children);
+};
+const useThemeContext = () => {
+    const context = React.useContext(Context);
+    if (!context)
+        throw Error('ConnectKitThemeProvider must be inside a Provider.');
+    return context;
+};
+
+export { ConnectKitThemeProvider, useThemeContext };
+//# sourceMappingURL=ConnectKitThemeProvider.js.map

package/build/components/ConnectKitThemeProvider/ConnectKitThemeProvider.js.map

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

package/build/components/ConnectModal/ConnectUsing.d.ts

@@ -1,2 +1,2 @@
-declare const ConnectUsing: () => import("react/jsx-runtime").JSX.Element;
+declare const ConnectUsing: () => import("react/jsx-runtime").JSX.Element | null;
 export default ConnectUsing;

package/build/components/ConnectModal/ConnectUsing.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useState, useEffect } from 'react';
+import { logger } from '../../utils/logger.js';
+import { useExternalConnector } from '../../wallets/useExternalConnectors.js';
+import Alert from '../Common/Alert/index.js';
+import { contentVariants } from '../Common/Modal/index.js';
+import { routes } from '../Openfort/types.js';
+import { useOpenfort } from '../Openfort/useOpenfort.js';
+import ConnectWithInjector from './ConnectWithInjector/index.js';
+import ConnectWithOAuth from './ConnectWithOAuth.js';
+import ConnectWithQRCode from './ConnectWithQRCode.js';
+
+const states = {
+    QRCODE: 'qrcode',
+    INJECTOR: 'injector',
+};
+/** Connector id must be a wallet connector (e.g. injected, walletConnect), not an Openfort account id. */
+function isAccountId(id) {
+    return id.startsWith('acc_');
+}
+const ConnectUsing = () => {
+    const context = useOpenfort();
+    const connectorId = context.connector.id;
+    const isConnectorAccountId = isAccountId(connectorId);
+    const effectiveConnectorId = isConnectorAccountId ? '' : connectorId;
+    const wallet = useExternalConnector(effectiveConnectorId);
+    const isQrCode = !(wallet === null || wallet === void 0 ? void 0 : wallet.isInstalled) && (wallet === null || wallet === void 0 ? void 0 : wallet.getWalletConnectDeeplink);
+    const isOauth = context.connector.type === 'oauth';
+    const [status, setStatus] = useState(isQrCode ? states.QRCODE : states.INJECTOR);
+    useEffect(() => {
+        if (isConnectorAccountId) {
+            context.setConnector({ id: '' });
+            context.setRoute(routes.PROVIDERS);
+        }
+    }, [isConnectorAccountId, context]);
+    useEffect(() => {
+        const connector = context.connector;
+        logger.log('ConnectUsing', { status, isQrCode, isOauth, connector });
+        if (isOauth)
+            return;
+        // if no provider, change to qrcode
+        const checkProvider = async () => {
+            var _a, _b;
+            const res = await ((_b = (_a = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _a === void 0 ? void 0 : _a.getProvider) === null || _b === void 0 ? void 0 : _b.call(_a));
+            if (!res) {
+                setStatus(states.QRCODE);
+                setTimeout(context.triggerResize, 10); // delay required here for modal to resize
+            }
+        };
+        if (status === states.INJECTOR)
+            checkProvider();
+    }, []);
+    if (isConnectorAccountId)
+        return null;
+    if (isOauth)
+        return jsx(ConnectWithOAuth, {});
+    if (!wallet)
+        return jsxs(Alert, { children: ["Connector not found ", context.connector.id] });
+    return (jsxs(AnimatePresence, { children: [status === states.QRCODE && (jsx(motion.div, { initial: 'initial', animate: 'animate', exit: 'exit', variants: contentVariants, children: jsx(ConnectWithQRCode, {}) }, states.QRCODE)), status === states.INJECTOR && (jsx(motion.div, { initial: 'initial', animate: 'animate', exit: 'exit', variants: contentVariants, children: jsx(ConnectWithInjector, { switchConnectMethod: (_id) => {
+                        //if (id) setId(id);
+                        setStatus(states.QRCODE);
+                        setTimeout(context.triggerResize, 10); // delay required here for modal to resize
+                    } }) }, states.INJECTOR))] }));
+};
+
+export { ConnectUsing as default };
+//# sourceMappingURL=ConnectUsing.js.map

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

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

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

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { AnimatePresence } from 'framer-motion';
+import { useId } from 'react';
+import { LogoContainer, Logo, SpinnerContainer, Spinner, ExpiringSpinner } from './styles.js';
+
+const CircleSpinner = ({ logo, smallLogo, connecting = true, unavailable = false, countdown = false, }) => {
+    const id = useId();
+    return (jsxs(LogoContainer, { transition: { duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }, children: [jsx(Logo, { "$small": !unavailable && smallLogo, style: unavailable ? { borderRadius: 0 } : undefined, children: logo }), jsx(SpinnerContainer, { children: jsxs(AnimatePresence, { children: [connecting && (jsx(Spinner, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: {
+                                opacity: 0,
+                                transition: {
+                                    duration: countdown ? 1 : 0,
+                                },
+                            }, children: jsxs("svg", { "aria-hidden": "true", width: "102", height: "102", viewBox: "0 0 102 102", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M52 100C24.3858 100 2 77.6142 2 50", stroke: `url(#paint0_linear_${id})`, strokeWidth: "3.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("defs", { children: jsxs("linearGradient", { id: `paint0_linear_${id}`, x1: "2", y1: "48.5", x2: "53", y2: "100", gradientUnits: "userSpaceOnUse", children: [jsx("stop", { stopColor: "var(--ck-spinner-color)" }), jsx("stop", { offset: "1", stopColor: "var(--ck-spinner-color)", stopOpacity: "0" })] }) })] }) }, "Spinner")), countdown && (jsxs(ExpiringSpinner, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.25 }, children: [jsx("div", {}), jsx("div", {})] }, "ExpiringSpinner"))] }) })] }));
+};
+
+export { CircleSpinner as default };
+//# sourceMappingURL=index.js.map

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

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