@openfort/react 0.3.1 → 1.0.0

package/build/components/ConnectModal/ConnectWithOAuth.js

@@ -0,0 +1,128 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { providersLogos } from '../../assets/logos.js';
+import { useOpenfortCore } from '../../openfort/useOpenfort.js';
+import { logger } from '../../utils/logger.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 ConnectWithOAuth = () => {
+    const { connector, setRoute, triggerResize } = useOpenfort();
+    const { client, user } = useOpenfortCore();
+    const [status, setStatus] = useState(states.INIT);
+    const [description, setDescription] = useState(undefined);
+    useEffect(() => {
+        (async () => {
+            const win = typeof window !== 'undefined' ? window : null;
+            const doc = typeof document !== 'undefined' ? document : null;
+            if (!win || !doc)
+                return;
+            if (connector.type !== 'oauth')
+                throw new Error('Invalid connector type');
+            const url = new URL(win.location.href.replace('?access_token=', '&access_token=')); // handle both ? and & cases
+            const hasProvider = !!url.searchParams.get('openfortAuthProviderUI');
+            const provider = connector.id;
+            switch (status) {
+                case states.INIT:
+                    if (hasProvider)
+                        setStatus(states.CONNECTING);
+                    else
+                        setTimeout(() => setStatus(states.REDIRECT), 150); // UX: wait a bit before redirecting
+                    break;
+                case states.CONNECTING: {
+                    const userId = url.searchParams.get('user_id');
+                    const token = url.searchParams.get('access_token');
+                    const error = url.searchParams.get('error');
+                    ['openfortAuthProviderUI', 'access_token', 'user_id', 'error'].forEach((key) => {
+                        url.searchParams.delete(key);
+                    });
+                    win.history.replaceState({}, doc.title, url.toString());
+                    if (!userId || !token || error) {
+                        logger.error(`Missing user id or access token: userId=${userId}, accessToken=${token ? `${token.substring(0, 10)}...` : token}`);
+                        setStatus(states.ERROR);
+                        if (error) {
+                            switch (error) {
+                                case "email_doesn't_match":
+                                    setDescription('The email associated with this OAuth provider does not match your account email.');
+                                    break;
+                                default:
+                                    setDescription('There was an error during authentication. Please try again.');
+                            }
+                        }
+                        else {
+                            setDescription('There was an error during authentication. Please try again.');
+                        }
+                        triggerResize();
+                        return;
+                    }
+                    await client.auth.storeCredentials({
+                        token,
+                        userId,
+                    });
+                    setRoute(routes.LOADING);
+                    break;
+                }
+                case states.REDIRECT: {
+                    if (hasProvider)
+                        return;
+                    const cleanURL = win.location.origin + win.location.pathname;
+                    const queryParams = Object.fromEntries([...url.searchParams.entries()].filter(([key]) => ['openfortAuthProviderUI', 'refresh_token', 'access_token', 'player_id'].includes(key)));
+                    queryParams.openfortAuthProviderUI = provider;
+                    try {
+                        if (user) {
+                            const authToken = await client.getAccessToken();
+                            if (!authToken) {
+                                logger.error('No auth token found');
+                                setRoute(routes.LOADING);
+                                return;
+                            }
+                            const linkResponse = await client.auth.initLinkOAuth({
+                                provider,
+                                redirectTo: `${cleanURL}?${new URLSearchParams(queryParams).toString()}`,
+                            });
+                            logger.log(linkResponse);
+                            win.location.href = linkResponse;
+                        }
+                        else {
+                            const r = await client.auth.initOAuth({
+                                provider,
+                                redirectTo: `${cleanURL}?${new URLSearchParams(queryParams).toString()}`,
+                            });
+                            logger.log(r);
+                            win.location.href = r;
+                        }
+                    }
+                    catch (e) {
+                        logger.error('Error during OAuth initialization:', e);
+                        setStatus(states.ERROR);
+                        triggerResize();
+                        if (e instanceof Error) {
+                            if (e.message.includes('not enabled')) {
+                                setDescription(`The ${provider} provider is not enabled. Please contact support.`);
+                            }
+                            else {
+                                setDescription('There was an error during authentication. Please try again.');
+                            }
+                        }
+                    }
+                    break;
+                }
+            }
+        })();
+    }, [status]);
+    return (jsx(PageContent, { children: jsx(Loader, { header: `Connecting with ${connector.id}`, icon: providersLogos[connector.id], isError: status === states.ERROR, description: description, onRetry: () => {
+                setStatus(states.INIT);
+                setDescription(undefined);
+            } }) }));
+};
+
+export { ConnectWithOAuth as default };
+//# sourceMappingURL=ConnectWithOAuth.js.map

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

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

package/build/components/ConnectModal/ConnectWithQRCode.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useEffect, useState, useCallback } from 'react';
+import { useEthereumBridge } from '../../ethereum/OpenfortEthereumBridgeContext.js';
+import { useWalletConnectModal } from '../../hooks/useWalletConnectModal.js';
+import 'detect-browser';
+import { truncateEthAddress } from '../../utils/format.js';
+import { useConnectWithSiwe } from '../../wagmi/useConnectWithSiwe.js';
+import { useExternalConnector } from '../../wallets/useExternalConnectors.js';
+import { CopyText } from '../Common/CopyToClipboard/CopyText.js';
+import Loader from '../Common/Loading/index.js';
+import { ModalBody } from '../Common/Modal/styles.js';
+import { routes } from '../Openfort/types.js';
+import { useOpenfort } from '../Openfort/useOpenfort.js';
+import { PageContent } from '../PageContent/index.js';
+
+const ConnectWithSiwe = () => {
+    var _a, _b, _c, _d;
+    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 address = (_c = bridge === null || bridge === void 0 ? void 0 : bridge.account) === null || _c === void 0 ? void 0 : _c.address;
+    const ensName = (_d = bridge === null || bridge === void 0 ? void 0 : bridge.account) === null || _d === void 0 ? void 0 : _d.ensName;
+    const { connector, setRoute } = useOpenfort();
+    const wallet = useExternalConnector(connector.id);
+    const { connectWithSiwe } = useConnectWithSiwe();
+    const [error, setError] = useState(undefined);
+    const [description, setDescription] = useState(undefined);
+    const runSiwe = useCallback(() => {
+        setDescription('Requesting signature to verify wallet...');
+        connectWithSiwe({
+            walletClientType: connector.id,
+            onConnect: () => setRoute(routes.CONNECTED),
+            onError: (err) => {
+                setError(err || 'Connection failed');
+                setDescription(undefined);
+            },
+        });
+    }, [connectWithSiwe, connector.id, setRoute]);
+    useEffect(() => {
+        if (isConnected)
+            runSiwe();
+    }, [isConnected, runSiwe]);
+    return (jsxs(PageContent, { children: [jsxs(ModalBody, { style: { textAlign: 'center' }, children: ["Connected with ", jsx(CopyText, { value: address || '', children: ensName !== null && ensName !== void 0 ? ensName : truncateEthAddress(address) })] }), jsx(Loader, { header: 'Sign in to your wallet', icon: wallet === null || wallet === void 0 ? void 0 : wallet.icon, isError: !!error, description: error !== null && error !== void 0 ? error : description, onRetry: runSiwe })] }));
+};
+const ConnectWithWalletConnect = () => {
+    const { connector } = useOpenfort();
+    const wallet = useExternalConnector(connector.id);
+    const { open: openWalletConnectModal } = useWalletConnectModal();
+    const [error, setError] = useState(undefined);
+    const openModal = useCallback(async () => {
+        setError(undefined);
+        const { error } = await openWalletConnectModal();
+        if (error)
+            setError(error);
+    }, [openWalletConnectModal]);
+    useEffect(() => {
+        openModal();
+    }, [openModal]);
+    return (jsx(PageContent, { children: jsx(Loader, { header: error ? 'Error connecting wallet.' : `Connecting...`, icon: wallet === null || wallet === void 0 ? void 0 : wallet.icon, isError: !!error, description: error, onRetry: openModal }) }));
+};
+const ConnectWithQRCode = () => {
+    var _a, _b;
+    const { connector, triggerResize } = useOpenfort();
+    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;
+    useEffect(() => {
+        triggerResize();
+    }, [isConnected]);
+    const wallet = useExternalConnector(connector.id);
+    if (!wallet)
+        return jsx(Loader, { header: `Connector not found: ${connector.id}`, isError: true });
+    if (isConnected) {
+        return jsx(ConnectWithSiwe, {});
+    }
+    return jsx(ConnectWithWalletConnect, {});
+};
+
+export { ConnectWithQRCode as default };
+//# sourceMappingURL=ConnectWithQRCode.js.map

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

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

package/build/components/ConnectModal/index.js

@@ -0,0 +1,230 @@
+import { jsx } from 'react/jsx-runtime';
+import { ChainTypeEnum, OAuthProvider } from '@openfort/openfort-js';
+import { useMemo, useRef, useEffect } from 'react';
+import { useConnectionStrategy } from '../../core/ConnectionStrategyContext.js';
+import { useOpenfortCore } from '../../openfort/useOpenfort.js';
+import { logger } from '../../utils/logger.js';
+import SwitchNetworks from '../../wagmi/components/SwitchNetworks/index.js';
+import Modal from '../Common/Modal/index.js';
+import { ConnectKitThemeProvider } from '../ConnectKitThemeProvider/ConnectKitThemeProvider.js';
+import { routes } from '../Openfort/types.js';
+import { useOpenfort } from '../Openfort/useOpenfort.js';
+import About from '../Pages/About/index.js';
+import { AssetInventory } from '../Pages/AssetInventory/index.js';
+import Buy from '../Pages/Buy/index.js';
+import BuyComplete from '../Pages/BuyComplete/index.js';
+import BuyProcessing from '../Pages/BuyProcessing/index.js';
+import BuyProviderSelect from '../Pages/BuyProviderSelect/index.js';
+import BuySelectProvider from '../Pages/BuySelectProvider/index.js';
+import { Connected } from '../Pages/Connected/index.js';
+import ConnectedSuccess from '../Pages/ConnectedSuccess/index.js';
+import Connectors from '../Pages/Connectors/index.js';
+import CreateGuestUserPage from '../Pages/CreateGuestUserPage/index.js';
+import CreateWallet from '../Pages/CreateWallet/index.js';
+import DownloadApp from '../Pages/DownloadApp/index.js';
+import EmailLogin from '../Pages/EmailLogin/index.js';
+import EmailOTP from '../Pages/EmailOTP/index.js';
+import EmailVerification from '../Pages/EmailVerification/index.js';
+import ExportKey from '../Pages/ExportKey/index.js';
+import ForgotPassword from '../Pages/ForgotPassword/index.js';
+import LinkEmail from '../Pages/LinkEmail/index.js';
+import LinkedProvider from '../Pages/LinkedProvider/index.js';
+import LinkedProviders from '../Pages/LinkedProviders/index.js';
+import Loading from '../Pages/Loading/index.js';
+import LoadWallets from '../Pages/LoadWallets/index.js';
+import MobileConnectors from '../Pages/MobileConnectors/index.js';
+import { NoAssetsAvailable } from '../Pages/NoAssetsAvailable/index.js';
+import Introduction from '../Pages/Onboarding/index.js';
+import PhoneOTP from '../Pages/PhoneOTP/index.js';
+import Profile from '../Pages/Profile/index.js';
+import Providers from '../Pages/Providers/index.js';
+import Receive from '../Pages/Receive/index.js';
+import RecoverPage from '../Pages/Recover/index.js';
+import RemoveLinkedProvider from '../Pages/RemoveLinkedProvider/index.js';
+import SelectToken from '../Pages/SelectToken/index.js';
+import SelectWalletToRecover from '../Pages/SelectWalletToRecover/index.js';
+import Send from '../Pages/Send/index.js';
+import { SolanaSend } from '../Pages/Send/SolanaSend.js';
+import SendConfirmation from '../Pages/SendConfirmation/index.js';
+import SocialProviders from '../Pages/SocialProviders/index.js';
+import SolanaSendConfirmation from '../Pages/SolanaSendConfirmation/index.js';
+import SolanaWallets from '../Pages/SolanaWallets/index.js';
+import ConnectUsing from './ConnectUsing.js';
+import ConnectWithMobile from './ConnectWithMobile.js';
+
+function buildSharedPages() {
+    return {
+        onboarding: jsx(Introduction, {}),
+        about: jsx(About, {}),
+        loading: jsx(Loading, {}),
+        loadWallets: jsx(LoadWallets, {}),
+        connectedSuccess: jsx(ConnectedSuccess, {}),
+        createGuestUser: jsx(CreateGuestUserPage, {}),
+        socialProviders: jsx(SocialProviders, {}),
+        emailLogin: jsx(EmailLogin, {}),
+        emailOtp: jsx(EmailOTP, {}),
+        phoneOtp: jsx(PhoneOTP, {}),
+        forgotPassword: jsx(ForgotPassword, {}),
+        emailVerification: jsx(EmailVerification, {}),
+        linkEmail: jsx(LinkEmail, {}),
+        createWallet: jsx(CreateWallet, {}),
+        recoverWallets: jsx(RecoverPage, {}),
+        download: jsx(DownloadApp, {}),
+        connectors: jsx(Connectors, {}),
+        mobileConnectors: jsx(MobileConnectors, {}),
+        selectWalletToRecover: jsx(SelectWalletToRecover, {}),
+        providers: jsx(Providers, {}),
+        connect: jsx(ConnectUsing, {}),
+        connected: jsx(Connected, {}),
+        profile: jsx(Profile, {}),
+        linkedProviders: jsx(LinkedProviders, {}),
+        linkedProvider: jsx(LinkedProvider, {}),
+        removeLinkedProvider: jsx(RemoveLinkedProvider, {}),
+        connectWithMobile: jsx(ConnectWithMobile, {}),
+        noAssetsAvailable: jsx(NoAssetsAvailable, {}),
+        assetInventory: jsx(AssetInventory, {}),
+        send: jsx(Send, {}),
+        sendConfirmation: jsx(SendConfirmation, {}),
+        sendTokenSelect: jsx(SelectToken, { isBuyFlow: false }),
+        buyTokenSelect: jsx(SelectToken, { isBuyFlow: true }),
+        buySelectProvider: jsx(BuySelectProvider, {}),
+        buyProcessing: jsx(BuyProcessing, {}),
+        buyComplete: jsx(BuyComplete, {}),
+        buyProviderSelect: jsx(BuyProviderSelect, {}),
+        receive: jsx(Receive, {}),
+        buy: jsx(Buy, {}),
+        exportKey: jsx(ExportKey, {}),
+        walletOverview: jsx(Connected, {}),
+    };
+}
+const CHAIN_PREFIXED_PAGES = {
+    [ChainTypeEnum.EVM]: {
+        'eth:connected': jsx(Connected, {}),
+        'eth:createWallet': jsx(CreateWallet, {}),
+        'eth:recoverWallet': jsx(RecoverPage, {}),
+        'eth:switchNetworks': jsx(SwitchNetworks, {}),
+        'eth:send': jsx(Send, {}),
+        'eth:receive': jsx(Receive, {}),
+        'eth:buy': jsx(Buy, {}),
+        'eth:connectors': jsx(Connectors, {}),
+    },
+    [ChainTypeEnum.SVM]: {
+        'sol:connected': jsx(Connected, {}),
+        'sol:createWallet': jsx(CreateWallet, {}),
+        'sol:recoverWallet': jsx(RecoverPage, {}),
+        'sol:send': jsx(SolanaSend, {}),
+        'sol:sendConfirmation': jsx(SolanaSendConfirmation, {}),
+        'sol:receive': jsx(Receive, {}),
+        'sol:wallets': jsx(SolanaWallets, {}),
+    },
+};
+const DEFAULT_CONNECTED_ROUTE = {
+    [ChainTypeEnum.EVM]: routes.ETH_CONNECTED,
+    [ChainTypeEnum.SVM]: routes.SOL_CONNECTED,
+};
+const customThemeDefault = {};
+const ConnectModal = ({ mode = 'auto', theme = 'auto', customTheme = customThemeDefault, lang = 'en-US' }) => {
+    var _a;
+    const context = useOpenfort();
+    const core = useOpenfortCore();
+    const strategy = useConnectionStrategy();
+    const state = useMemo(() => ({
+        user: core.user,
+        embeddedAccounts: core.embeddedAccounts,
+        activeEmbeddedAddress: core.activeEmbeddedAddress,
+        chainType: context.chainType,
+        embeddedState: core.embeddedState,
+    }), [core.user, core.embeddedAccounts, core.activeEmbeddedAddress, context.chainType, core.embeddedState]);
+    const isConnected = (_a = strategy === null || strategy === void 0 ? void 0 : strategy.isConnected(state)) !== null && _a !== void 0 ? _a : false;
+    const chainId = strategy === null || strategy === void 0 ? void 0 : strategy.getChainId();
+    const chainIsSupported = chainId != null && context.chains.some((c) => c.id === chainId);
+    // Auto-close when the user goes from not-connected → connected while the modal is open.
+    // Using a ref to track the previous value so we only react to the false → true transition,
+    // not when the modal is opened while already connected (e.g. user opens profile).
+    const prevIsConnectedRef = useRef(isConnected);
+    useEffect(() => {
+        const wasConnected = prevIsConnectedRef.current;
+        prevIsConnectedRef.current = isConnected;
+        if (!wasConnected && isConnected && context.open) {
+            context.setOpen(false);
+        }
+    }, [isConnected]);
+    //if chain is unsupported we enforce a "switch chain" prompt
+    const closeable = !(context.uiConfig.enforceSupportedChains && isConnected && !chainIsSupported);
+    const route = context.route.route;
+    const chainType = context.chainType;
+    const sharedPages = useMemo(buildSharedPages, []);
+    const pages = useMemo(() => ({ ...sharedPages, ...CHAIN_PREFIXED_PAGES[chainType] }), [sharedPages, chainType]);
+    const effectivePageId = route in pages && pages[route] != null ? route : DEFAULT_CONNECTED_ROUTE[chainType];
+    useEffect(() => {
+        if (effectivePageId !== route) {
+            context.setRoute(effectivePageId);
+        }
+    }, [effectivePageId, route, context.setRoute]);
+    function hide() {
+        context.setOpen(false);
+    }
+    // if auth redirect
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const url = new URL(window.location.href.replace('?access_token=', '&access_token=')); // handle both ? and & cases
+        const provider = url.searchParams.get('openfortAuthProviderUI');
+        const emailVerification = url.searchParams.get('openfortEmailVerificationUI');
+        const forgotPassword = url.searchParams.get('openfortForgotPasswordUI');
+        logger.log('Checking for search parameters', { url, provider, emailVerification, forgotPassword });
+        if (emailVerification) {
+            context.setOpen(true);
+            context.setRoute(routes.EMAIL_VERIFICATION);
+            return;
+        }
+        if (forgotPassword) {
+            context.setOpen(true);
+            context.setRoute(routes.FORGOT_PASSWORD);
+            return;
+        }
+        function isProvider(value) {
+            if (!value)
+                return false;
+            return Object.values(OAuthProvider).includes(value);
+        }
+        if (isProvider(provider)) {
+            logger.log('Found auth provider', provider);
+            context.setOpen(true);
+            context.setConnector({ id: provider, type: 'oauth' });
+            context.setRoute({ route: routes.CONNECT, connectType: 'linkIfUserConnectIfNoUser' });
+        }
+    }, []);
+    useEffect(() => context.setMode(mode), [mode]);
+    useEffect(() => context.setTheme(theme), [theme]);
+    useEffect(() => context.setCustomTheme(customTheme), [customTheme]);
+    useEffect(() => context.setLang(lang), [lang]);
+    /* When pulling data into WalletConnect, it prioritises the og:title tag over the title tag */
+    useEffect(() => {
+        var _a;
+        const appName = (_a = context.uiConfig.appName) !== null && _a !== void 0 ? _a : 'Openfort';
+        if (!appName || !context.open)
+            return;
+        const title = document.createElement('meta');
+        title.setAttribute('property', 'og:title');
+        title.setAttribute('content', appName);
+        document.head.prepend(title);
+        /*
+        // OLD_TODO:  When pulling data into WalletConnect, figure out which icon gets used and replace with appIcon if available
+        const appIcon = getAppIcon();
+        const icon = document.createElement('link');
+        if (appIcon) {
+          icon.setAttribute('rel', 'icon');
+          icon.setAttribute('href', appIcon);
+          document.head.prepend(icon);
+        }*/
+        return () => {
+            document.head.removeChild(title);
+            //if (appIcon) document.head.removeChild(icon);
+        };
+    }, [context.open]);
+    return (jsx(ConnectKitThemeProvider, { theme: theme, customTheme: customTheme, mode: mode, children: jsx(Modal, { open: context.open, pages: pages, pageId: effectivePageId, onClose: closeable ? hide : undefined }) }));
+};
+
+export { ConnectModal as default };
+//# sourceMappingURL=index.js.map

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

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

package/build/components/FloatingGraphic/index.js

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import wave from '../../assets/wave.js';
+import { Graphic, LogoGroup, GraphicBackground, Logo, LogoPosition, LogoInner, FloatWrapper, RotateWrapper, LogoGraphic as LogoGraphic$1 } from './styles.js';
+
+const LogoGraphic = ({ size = '100%', logo }) => {
+    return (jsx(Logo, { 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', marginBottom, marginTop, logoCenter, logoTopRight, logoTopLeft, logoBottomRight, logoBottomLeft, }) => {
+    return (jsxs(Graphic, { "$height": height, "$marginBottom": marginBottom, "$marginTop": marginTop, 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 })] }));
+};
+
+export { FloatingGraphic };
+//# sourceMappingURL=index.js.map

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

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

package/build/components/FloatingGraphic/styles.js

@@ -0,0 +1,175 @@
+import { motion } from 'framer-motion';
+import { keyframes } from 'styled-components';
+import defaultTheme from '../../constants/defaultTheme.js';
+import styled from '../../styles/styled/index.js';
+
+const Graphic = styled(motion.div) `
+  position: relative;
+  margin-top: ${({ $marginTop }) => $marginTop !== null && $marginTop !== void 0 ? $marginTop : '16px'};
+  margin-bottom: ${({ $marginBottom }) => $marginBottom !== null && $marginBottom !== void 0 ? $marginBottom : '20px'};
+  margin-left: auto;
+  margin-right: auto;
+  height: ${({ $height }) => $height !== null && $height !== void 0 ? $height : '190px'};
+  max-width: 295px;
+  pointer-events: none;
+  user-select: none;
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    height: 200px;
+    max-width: 100%;
+    margin-bottom: 32px;
+  }
+`;
+const LogoGroup = styled(motion.div) `
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+`;
+const graphicIn = keyframes `
+  0%{
+    opacity:0;
+    transform:scale(0.9);
+  }
+  100%{
+    opacity:1;
+    transform:none;
+  }
+`;
+const GraphicBackground = styled(motion.div) `
+  z-index: 1;
+  position: absolute;
+  inset: 0;
+  top: -2px;
+  overflow: hidden;
+  &:before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--ck-body-background);
+    background: radial-gradient(
+      closest-side,
+      var(--ck-body-background-transparent, transparent) 18.75%,
+      var(--ck-body-background) 100%
+    );
+    background-size: 100%;
+  }
+  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+  animation: ${graphicIn} 1000ms 100ms ease both;
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    animation: none;
+  }
+`;
+const logoIn = keyframes `
+  0%{
+    opacity:0;
+    transform:scale(0) translateY(40%);
+  }
+  100%{
+    opacity:1;
+    transform:none;
+  }
+`;
+const LogoPosition = styled(motion.div) `
+  position: absolute;
+  inset: 0;
+  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
+  animation-delay: inherit;
+`;
+const LogoInner = styled(motion.div) `
+  position: absolute;
+`;
+const LogoGraphic = styled(motion.div) `
+  position: relative;
+  overflow: hidden;
+  height: 58px;
+  width: 58px;
+  border-radius: 13.84px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 20px 0 rgba(0, 0, 0, 0.03);
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+`;
+const float = keyframes `
+  0%,100%{ transform:none; }
+  50%{ transform: translateY(-10%) }
+`;
+const FloatWrapper = styled(motion.div) `
+  position: relative;
+  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
+  animation-name: ${float};
+  animation-duration: 3600ms;
+`;
+const rotate = keyframes `
+  0%,100%{ transform:rotate(-3deg); }
+  50%{ transform:rotate(3deg); }
+`;
+const RotateWrapper = styled(motion.div) `
+  position: relative;
+  animation: cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
+  animation-name: ${rotate};
+  animation-duration: 3200ms;
+`;
+const Logo = styled(motion.div) `
+  position: absolute;
+  inset: 0;
+
+  animation: ${logoIn} 750ms cubic-bezier(0.19, 1, 0.22, 1) both;
+  &:nth-child(1){ z-index:2; animation-delay:0ms;  }
+  &:nth-child(2){ z-index:1; animation-delay:60ms; }
+  &:nth-child(3){ z-index:1; animation-delay:30ms; }
+  &:nth-child(4){ z-index:1; animation-delay:90ms; }
+  &:nth-child(5){ z-index:1; animation-delay:120ms;}
+
+  &:nth-child(1){ ${RotateWrapper}{ animation-delay:0ms; } }
+  &:nth-child(2){ ${RotateWrapper}{ animation-delay:-600ms; } }
+  &:nth-child(3){ ${RotateWrapper}{ animation-delay:-1200ms; } }
+  &:nth-child(4){ ${RotateWrapper}{ animation-delay:-1800ms; } }
+  &:nth-child(5){ ${RotateWrapper}{ animation-delay:-2400ms; } }
+
+  &:nth-child(1){ ${FloatWrapper}{ animation-delay:-200ms; } }
+  &:nth-child(2){ ${FloatWrapper}{ animation-delay:-600ms; } }
+  &:nth-child(3){ ${FloatWrapper}{ animation-delay:-800ms; } }
+  &:nth-child(4){ ${FloatWrapper}{ animation-delay:-300ms; } }
+  &:nth-child(5){ ${FloatWrapper}{ animation-delay:-3200ms; } }
+
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    animation: none !important;
+    ${RotateWrapper},${FloatWrapper} {
+      animation: none !important;
+    }
+  }
+
+  ${LogoInner} {
+    transform: translate(-50%, -50%);
+  }
+
+  &:nth-child(1) ${LogoPosition} {
+    transform: translate(50%, 50%);
+    ${LogoGraphic} {
+      border-radius: 17.2px;
+      width: 72px;
+      height: 72px;
+    }
+  }
+  &:nth-child(2) ${LogoPosition} {
+    transform: translate(21%, 21.5%);
+  }
+  &:nth-child(3) ${LogoPosition} {
+    transform: translate(78%, 14%);
+  }
+  &:nth-child(4) ${LogoPosition} {
+    transform: translate(22.5%, 76%);
+  }
+  &:nth-child(5) ${LogoPosition} {
+    transform: translate(76%, 80%);
+  }
+`;
+
+export { FloatWrapper, Graphic, GraphicBackground, Logo, LogoGraphic, LogoGroup, LogoInner, LogoPosition, RotateWrapper };
+//# sourceMappingURL=styles.js.map

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

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