@getpara/react-sdk 0.1.0

package/dist/modal/components/Hero/Hero.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CpslHero, CpslIcon, CpslIdenticon } from '@getpara/react-components';
+import styled from 'styled-components';
+import { ModalStep } from '../../utils/steps.js';
+import { useParaStore, useModalStore } from '../../stores/index.js';
+import { useExternalWallets } from '../../providers/ExternalWalletContext.js';
+import { NETWORK_NOT_SUPPORTED_ERROR } from '../../constants/constants.js';
+import { useEffect, useState } from 'react';
+import { isMobile } from '@getpara/web-sdk';
+import { useActiveWallet } from '../../hooks/useActiveWallet.js';
+const getStepConfig = ({ externalWalletError, }) => {
+    var _a;
+    return ({
+        [ModalStep.EX_WALLET_SELECTED]: {
+            variant: 'externalWalletConnection',
+            topOffset: 40,
+            spacerHeight: 158,
+            hideFadeOut: true,
+        },
+        [ModalStep.CHAIN_SWITCH]: {
+            variant: ((_a = externalWalletError === null || externalWalletError === void 0 ? void 0 : externalWalletError[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === NETWORK_NOT_SUPPORTED_ERROR ? 'failed' : 'externalWalletConnection',
+            topOffset: 20,
+            spacerHeight: 158,
+            hideFadeOut: true,
+        },
+        [ModalStep.ACCOUNT_MAIN]: {
+            variant: 'customContent',
+            topOffset: 0,
+            spacerHeight: 104,
+            hideFadeOut: true,
+        },
+        [ModalStep.FARCASTER_OAUTH]: {
+            variant: 'externalWalletConnection',
+            topOffset: 40,
+            spacerHeight: 158,
+            hideFadeOut: true,
+        },
+    });
+};
+export const Hero = () => {
+    const para = useParaStore(state => state.para);
+    const { wallet: connector, walletDisplayHelpers, avatar } = useExternalWallets();
+    const step = useModalStore(state => state.step);
+    const externalWalletError = useModalStore(state => state.externalWalletError);
+    const activeWallet = useActiveWallet();
+    const [currentStep, setCurrentStep] = useState(step);
+    const stepConfig = getStepConfig({
+        externalWalletError,
+    })[currentStep];
+    // Watching the step here to make the animation in/out of the hero look correct
+    useEffect(() => {
+        const prevStepConfig = getStepConfig({
+            externalWalletError,
+        })[currentStep];
+        const newStepConfig = getStepConfig({
+            externalWalletError,
+        })[step];
+        const delay = newStepConfig && prevStepConfig ? 0 : newStepConfig && !prevStepConfig ? 0 : 200;
+        setTimeout(() => {
+            setCurrentStep(step);
+        }, delay);
+    }, [step]);
+    const isExternalStep = currentStep === ModalStep.EX_WALLET_SELECTED;
+    const isChainSwitchStep = currentStep === ModalStep.CHAIN_SWITCH;
+    const isAccountStep = currentStep === ModalStep.ACCOUNT_MAIN;
+    const isFarcasterStep = currentStep === ModalStep.FARCASTER_OAUTH;
+    const { showExtension, isCosmosMobileWallet } = walletDisplayHelpers;
+    // Hide if:
+    // 1. On a step with no hero config
+    // 2. On the external wallet step and not showing the extension connection screen
+    // 3. On the network switch step on web for Cosmos mobile connectors
+    // 4. On the farcaster step on desktop
+    const shouldHide = !stepConfig ||
+        (!isMobile() && isExternalStep && !showExtension) ||
+        (!isMobile() && isChainSwitchStep && isCosmosMobileWallet) ||
+        (!isMobile() && isFarcasterStep);
+    const { variant, topOffset, spacerHeight, hideFadeOut } = stepConfig !== null && stepConfig !== void 0 ? stepConfig : {};
+    return (_jsxs(_Fragment, { children: [_jsx(Container, { "$top": -45 + topOffset, children: shouldHide ? null : (_jsxs(StyledHero, { "$isAccount": isAccountStep, hideFadeOut: hideFadeOut, variant: variant, height: 480, withDefaultTheme: true, children: [(isExternalStep || isChainSwitchStep) && _jsx(WalletLogo, { slot: "connectionLeft", src: connector === null || connector === void 0 ? void 0 : connector.iconUrl }), isFarcasterStep && _jsx(WalletLogo, { slot: "connectionLeft", icon: "farcasterBrand" }), isAccountStep &&
+                            (avatar ? (_jsx(Avatar, { slot: "image", src: avatar })) : activeWallet ? (_jsx(IconAvatar, { slot: "image", size: "100%", hash: para.getIdenticonHash(activeWallet.id, activeWallet.type) })) : null)] })) }), !shouldHide && _jsx(Spacer, { "$height": spacerHeight })] }));
+};
+const Container = styled.div `
+  display: flex;
+  position: absolute;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+
+  top: ${({ $top }) => `${$top}px`};
+`;
+const Spacer = styled.div `
+  height: ${({ $height }) => `${$height}px`};
+`;
+const WalletLogo = styled(CpslIcon) `
+  --height: 60px;
+  --width: 60px;
+`;
+const Avatar = styled.img `
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+`;
+const IconAvatar = styled(CpslIdenticon) `
+  border-radius: 1000px;
+`;
+const StyledHero = styled(CpslHero) `
+  ${({ $isAccount }) => $isAccount &&
+    `
+      --ring-3-size: 560px;
+      --ring-2-size: 402px;
+      --ring-1-size: 228px;
+      --ring-0-size: 104px;
+      
+      --default-theme-ring-3-opacity: 0.02;
+      --default-theme-ring-2-opacity: 0.04;
+      --default-theme-ring-1-opacity: 0.06;
+      --default-theme-ring-0-opacity: 0.1;
+  `}
+`;

package/dist/modal/components/IFrameStep/IFrameStep.d.ts

@@ -0,0 +1 @@
+export declare const IFrameStep: () => import("react/jsx-runtime").JSX.Element;

package/dist/modal/components/IFrameStep/IFrameStep.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useModalStore, useThemeStore } from '../../stores/index.js';
+import { IFrameSteps } from '../../utils/steps.js';
+import styled from 'styled-components';
+import { SpinnerContainer } from '@getpara/react-common';
+import { CpslSpinner } from '@getpara/react-components';
+import { MOBILE_SIZE } from '../../constants/constants.js';
+export const IFrameStep = () => {
+    const iFrameUrl = useModalStore(state => state.iFrameUrl);
+    const setIsReady = useModalStore(state => state.setIsIFrameReady);
+    const isReady = useModalStore(state => state.isIFrameReady);
+    const currentStep = useModalStore(state => state.step);
+    const embeddedModal = useThemeStore(state => state.embeddedModal);
+    return (_jsxs(OuterContainer, { "$isVisible": IFrameSteps.includes(currentStep), "$embeddedModal": embeddedModal, children: [_jsx(Container, { "$isReady": isReady, children: _jsx("iframe", { src: iFrameUrl, onLoad: () => {
+                        setIsReady(true);
+                    } }) }), !isReady && (_jsx(SpinnerContainer, { style: { width: '100%', height: '100%', flex: 1 }, children: _jsx(CpslSpinner, { size: 100 }) }))] }));
+};
+const OuterContainer = styled.div `
+  height: ${({ $isVisible }) => ($isVisible ? '100%' : '0px')};
+  width: ${({ $isVisible }) => ($isVisible ? '100%' : '0px')};
+  flex: ${({ $isVisible }) => ($isVisible ? 1 : 'auto')};
+  padding: ${({ $embeddedModal, $isVisible }) => (!$isVisible ? '0px' : $embeddedModal ? '12px 0px 0px' : '72px 72px 32px')};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  @media (max-width: ${MOBILE_SIZE}px) {
+    padding: ${({ $embeddedModal, $isVisible }) => !$isVisible ? '0px' : $embeddedModal ? '12px 0px 0px' : '72px 16px 0px'};
+  }
+`;
+const Container = styled.div `
+  height: 100%;
+  width: 100%;
+  display: ${({ $isReady }) => ($isReady ? 'block' : 'none')};
+
+  & > iframe {
+    height: 360px;
+    width: 100%;
+    border: none;
+  }
+`;

package/dist/modal/components/LoginDoneStep/LoginDoneStep.d.ts

@@ -0,0 +1 @@
+export declare const LoginDoneStep: ({ onClose }: LoginDoneStep) => import("react/jsx-runtime").JSX.Element;

package/dist/modal/components/LoginDoneStep/LoginDoneStep.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Heading, HeroIcon, StepContainer } from '../common.js';
+import { ExternalWalletCard, WalletCard, WalletCards } from '../WalletCard/WalletCard.js';
+import { useParaStore, useThemeStore } from '../../stores/index.js';
+export const LoginDoneStep = ({ onClose }) => {
+    var _a;
+    const para = useParaStore(state => state.para);
+    const hideWallets = useThemeStore(state => state.hideWallets);
+    useEffect(() => {
+        setTimeout(() => {
+            onClose();
+        }, 1600);
+    }, []);
+    return (_jsxs(StepContainer, { children: [_jsx(HeroIcon, { icon: "checkCircleFilled" }), _jsx(Heading, { variant: "headingS", weight: "bold", children: "Connected" }), !hideWallets && (_jsx(WalletCards, { children: para.isUsingExternalWallet() ? (_jsx(ExternalWalletCard, { address: (_a = para.currentExternalWalletAddresses) === null || _a === void 0 ? void 0 : _a[0] })) : (para.currentWalletIdsArray.map(([id, type]) => {
+                    return _jsx(WalletCard, { id: id, type: type }, `${id}-${type}`);
+                })) }))] }));
+};

package/dist/modal/components/ModalContent/ModalContent.d.ts

@@ -0,0 +1,10 @@
+import { ParaModalProps } from '../../types/modalProps.js';
+type ModalContentProps = Omit<ParaModalProps, 'para' | 'isOpen' | 'theme' | 'branding' | 'onModalStepChange' | 'onExpandModalChange'>;
+export type ModalContentHandle = {
+    /**
+     * Trigger the modal close handler
+     */
+    handleModalClose: () => void;
+};
+export declare const ModalContent: import("react").ForwardRefExoticComponent<ModalContentProps & import("react").RefAttributes<ModalContentHandle>>;
+export {};

package/dist/modal/components/ModalContent/ModalContent.js

@@ -0,0 +1,276 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { entityToWallet, OnRampProvider, OnRampAsset, Network, EnabledFlow, } from '@getpara/web-sdk';
+import { useParaStore, useModalStore, useUserInfoStore } from '../../stores/index.js';
+import { ModalStep } from '../../utils/steps.js';
+import { Body } from '../Body/Body.js';
+import { Footer } from '../Footer/Footer.js';
+import { DEFAULTS } from '../../constants/defaults.js';
+import { useGoBack } from '../../hooks/useGoBack.js';
+import { openPopup } from '../../utils/openPopup.js';
+import { useEmbeddedExternalConnection } from '../../hooks/useEmbeddedExternalConnection.js';
+function isRampConfig(config) {
+    return 'hostApiKey' in config;
+}
+const AssetNetworks = {
+    [OnRampAsset.SOLANA]: Network.SOLANA,
+    [OnRampAsset.ATOM]: Network.COSMOS,
+    [OnRampAsset.CELO]: Network.CELO,
+    [OnRampAsset.POLYGON]: Network.POLYGON,
+};
+const AssetMap = {
+    SOLANA: OnRampAsset.SOLANA,
+    SOL: OnRampAsset.SOLANA,
+    ATOM: OnRampAsset.ATOM,
+    CELO: OnRampAsset.CELO,
+    POLYGON: OnRampAsset.POLYGON,
+    MATIC: OnRampAsset.POLYGON,
+    USDC: OnRampAsset.USDC,
+    ETH: OnRampAsset.ETHEREUM,
+    ETHEREUM: OnRampAsset.ETHEREUM,
+};
+export const ModalContent = forwardRef(({ onRampConfig: propsOnRampConfig, twoFactorAuthEnabled = false, recoverySecretStepEnabled = false, oAuthMethods, disableEmailLogin, disablePhoneLogin, onClose, onRampTestMode, loginTransitionOverride, createWalletOverride, }, ref) => {
+    const para = useParaStore(state => state.para);
+    const currentStep = useModalStore(state => state.step);
+    const webAuthURLForLogin = useModalStore(state => state.webAuthURLForLogin);
+    const webAuthURLForCreate = useModalStore(state => state.webAuthURLForCreate);
+    const passwordUrlForLogin = useModalStore(state => state.passwordUrlForLogin);
+    const isLogin = useModalStore(state => state.isLogin());
+    const popupWindow = useModalStore(state => state.popupWindow);
+    const onRampConfig = useModalStore(state => state.onRampConfig);
+    const setStep = useModalStore(state => state.setStep);
+    const setBiometricLocationHints = useModalStore(state => state.setBiometricLocationHints);
+    const setWebAuthURLForLogin = useModalStore(state => state.setWebAuthURLForLogin);
+    const setWebAuthURLForCreate = useModalStore(state => state.setWebAuthURLForCreate);
+    const setPopupWindow = useModalStore(state => state.setPopupWindow);
+    const setIFrameUrl = useModalStore(state => state.setIFrameUrl);
+    const setPasswordUrlForLogin = useModalStore(state => state.setPasswordUrlForLogin);
+    const setSupportedAuthMethods = useModalStore(state => state.setSupportedAuthMethods);
+    const setOnRampConfig = useModalStore(state => state.setOnRampConfig);
+    const accountAddFundTab = useModalStore(state => state.accountAddFundTab);
+    const setAccountAddFundTab = useModalStore(state => state.setAccountAddFundTab);
+    const setRecoveryShare = useUserInfoStore(state => state.setRecoveryShare);
+    const goBack = useGoBack();
+    const loginTimeout = useRef();
+    const createAccountTimeout = useRef();
+    const [walletCreationInProgress, setWalletCreationInProgress] = useState(false);
+    const connectEmbeddedToExternalConnectors = useEmbeddedExternalConnection();
+    useImperativeHandle(ref, () => {
+        return {
+            handleModalClose() {
+                handleClose();
+            },
+        };
+    }, []);
+    const is2FASetup = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (!twoFactorAuthEnabled) {
+            return true;
+        }
+        try {
+            const { isSetup } = yield para.check2FAStatus();
+            return isSetup;
+        }
+        catch (error) {
+            console.error('An error occurred while checking 2FA:', error);
+            return false;
+        }
+    });
+    function awaitLoginTransition() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { isComplete, isError, needsWallet } = yield para.waitForLoginAndSetup({ popupWindow });
+            setPopupWindow(undefined);
+            if (isError) {
+                goBack();
+                return;
+            }
+            if (isComplete) {
+                setWebAuthURLForLogin('');
+                setPasswordUrlForLogin('');
+                setSupportedAuthMethods(new Set());
+                setBiometricLocationHints();
+                if (needsWallet) {
+                    setStep(ModalStep.AWAITING_WALLET_CREATION);
+                }
+                else {
+                    yield connectEmbeddedToExternalConnectors();
+                    if (yield is2FASetup()) {
+                        setStep(ModalStep.LOGIN_DONE);
+                    }
+                    else {
+                        setStep(ModalStep.SETUP_2FA);
+                    }
+                }
+            }
+        });
+    }
+    function awaitWalletCreationTransition() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const isComplete = yield para.waitForAccountCreation();
+            if (isComplete) {
+                setWebAuthURLForCreate('');
+                setIFrameUrl('');
+                setStep(ModalStep.AWAITING_WALLET_CREATION);
+            }
+        });
+    }
+    // generate/claim wallet once we know it's account creation
+    useEffect(() => {
+        if (currentStep !== ModalStep.AWAITING_WALLET_CREATION || walletCreationInProgress) {
+            return;
+        }
+        function genWallet() {
+            return __awaiter(this, void 0, void 0, function* () {
+                setWalletCreationInProgress(true);
+                let recoverySecret, walletIds;
+                if (!createWalletOverride) {
+                    const created = yield para.waitForPasskeyAndCreateWallet();
+                    recoverySecret = created.recoverySecret;
+                    walletIds = created.walletIds;
+                }
+                else {
+                    const created = yield createWalletOverride(para);
+                    const fetchedWallets = (yield para.fetchWallets()).filter(wallet => !!wallet.address);
+                    const newWallets = {};
+                    for (const wallet of fetchedWallets) {
+                        newWallets[wallet.id] = Object.assign(Object.assign({}, entityToWallet(wallet)), { signer: '' });
+                    }
+                    para.setWallets(newWallets);
+                    recoverySecret = created.recoverySecret;
+                    walletIds = created.walletIds;
+                }
+                yield para.setCurrentWalletIds(walletIds);
+                if (recoverySecretStepEnabled) {
+                    setRecoveryShare(recoverySecret);
+                }
+                setWalletCreationInProgress(false);
+                if (!recoverySecret || !recoverySecretStepEnabled) {
+                    setStep(ModalStep.WALLET_CREATION_DONE);
+                }
+                else {
+                    setStep(ModalStep.SECRET);
+                }
+            });
+        }
+        genWallet();
+    }, [isLogin, currentStep]);
+    function createAccountWithPassword() {
+        return __awaiter(this, void 0, void 0, function* () {
+            clearTimeout(createAccountTimeout.current);
+            createAccountTimeout.current = window.setTimeout(awaitWalletCreationTransition, DEFAULTS.POLLING_INTERVAL_MS);
+            setStep(ModalStep.PASSWORD_CREATION);
+        });
+    }
+    function createAccountWithPasskey() {
+        return __awaiter(this, void 0, void 0, function* () {
+            clearTimeout(createAccountTimeout.current);
+            createAccountTimeout.current = window.setTimeout(awaitWalletCreationTransition, DEFAULTS.POLLING_INTERVAL_MS);
+            openPopup(webAuthURLForCreate, 'ParaPasskey', 'CREATE_PASSKEY');
+            setStep(ModalStep.AWAITING_BIOMETRIC_CREATION);
+        });
+    }
+    // wait for login auth to do post login setup
+    useEffect(() => {
+        if (webAuthURLForLogin || passwordUrlForLogin) {
+            if (loginTransitionOverride) {
+                function loginOverride() {
+                    return __awaiter(this, void 0, void 0, function* () {
+                        yield loginTransitionOverride(para);
+                        setWebAuthURLForLogin('');
+                        setPasswordUrlForLogin('');
+                        setBiometricLocationHints();
+                        yield connectEmbeddedToExternalConnectors();
+                        if (yield is2FASetup()) {
+                            setStep(ModalStep.LOGIN_DONE);
+                        }
+                        else {
+                            setStep(ModalStep.SETUP_2FA);
+                        }
+                    });
+                }
+                loginOverride();
+                return;
+            }
+            loginTimeout.current = window.setTimeout(awaitLoginTransition, DEFAULTS.LOGGIN_POLLING_DELAY_MS);
+        }
+        return () => {
+            window.clearTimeout(loginTimeout.current);
+            para.exitLogin();
+        };
+    }, [webAuthURLForLogin, passwordUrlForLogin, popupWindow]);
+    const handleClose = () => {
+        onClose();
+    };
+    useEffect(() => {
+        if (![ModalStep.BIOMETRIC_CREATION, ModalStep.AWAITING_BIOMETRIC_CREATION].includes(currentStep)) {
+            para.exitAccountCreation();
+        }
+        if (![ModalStep.BIOMETRIC_LOGIN, ModalStep.AWAITING_BIOMETRIC_LOGIN].includes(currentStep)) {
+            para.exitLogin();
+        }
+        if (![ModalStep.AWAITING_OAUTH, ModalStep.FARCASTER_OAUTH].includes(currentStep)) {
+            para.exitOAuth();
+        }
+    }, [currentStep]);
+    useEffect(() => {
+        if (!onRampConfig) {
+            para.ctx.client
+                .getOnRampConfig()
+                .then(res => {
+                var _a, _b;
+                let newOnRampConfig;
+                if (!!propsOnRampConfig) {
+                    const { enabledFlows, network, asset, providers, testMode } = propsOnRampConfig;
+                    const rampConfig = providers.find(config => isRampConfig(config));
+                    newOnRampConfig = {
+                        isBuyEnabled: !enabledFlows || enabledFlows.some(str => EnabledFlow[str] === EnabledFlow.BUY),
+                        isReceiveEnabled: !enabledFlows || enabledFlows.some(str => EnabledFlow[str] === EnabledFlow.RECEIVE),
+                        isWithdrawEnabled: !enabledFlows || enabledFlows.some(str => EnabledFlow[str] === EnabledFlow.WITHDRAW),
+                        allowedAssets: network
+                            ? { [Network[network]]: asset ? [AssetMap[asset]] : true }
+                            : asset
+                                ? { [(_a = AssetNetworks[AssetMap[asset]]) !== null && _a !== void 0 ? _a : Network.ETHEREUM]: [AssetMap[asset]] }
+                                : res.allowedAssets,
+                        assetInfo: res.assetInfo,
+                        providers: providers.map(({ id }) => OnRampProvider[id]),
+                        rampApiKey: (_b = rampConfig === null || rampConfig === void 0 ? void 0 : rampConfig.hostApiKey) !== null && _b !== void 0 ? _b : res.rampApiKey,
+                        testMode: testMode !== null && testMode !== void 0 ? testMode : onRampTestMode,
+                    };
+                }
+                else {
+                    newOnRampConfig = Object.assign(Object.assign({}, res), { testMode: onRampTestMode });
+                }
+                setOnRampConfig(newOnRampConfig);
+                if (!accountAddFundTab) {
+                    setAccountAddFundTab(newOnRampConfig.isBuyEnabled
+                        ? EnabledFlow.BUY
+                        : newOnRampConfig.isReceiveEnabled
+                            ? EnabledFlow.RECEIVE
+                            : newOnRampConfig.isWithdrawEnabled
+                                ? EnabledFlow.WITHDRAW
+                                : undefined);
+                }
+            })
+                .catch();
+        }
+    }, []);
+    useEffect(() => {
+        if (!!onRampConfig) {
+            setOnRampConfig(Object.assign(Object.assign({}, onRampConfig), { testMode: onRampTestMode }));
+        }
+    }, [onRampTestMode]);
+    useEffect(() => {
+        return () => {
+            para.exitLoops();
+        };
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(Body, { oAuthMethods: oAuthMethods, twoFactorAuthEnabled: twoFactorAuthEnabled, disableEmailLogin: disableEmailLogin, disablePhoneLogin: disablePhoneLogin, onClose: handleClose, createAccountWithPasskey: createAccountWithPasskey, createAccountWithPassword: createAccountWithPassword }), _jsx(Footer, {})] }));
+});

package/dist/modal/components/OAuth/FarcasterOAuthStep.d.ts

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

package/dist/modal/components/OAuth/FarcasterOAuthStep.js

@@ -0,0 +1,81 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from '@getpara/react-components';
+import { CenteredText, Heading, InnerStepContainer, QRContainer, StepContainer } from '../common.js';
+import { useParaStore, useModalStore, useThemeStore, useUserInfoStore } from '../../stores/index.js';
+import { ModalStep } from '../../utils/steps.js';
+import { AuthMethod, isMobile } from '@getpara/web-sdk';
+const FarcasterOAuthStep = () => {
+    const setAuthInfo = useUserInfoStore(state => state.setAuthInfo);
+    const setStep = useModalStore(state => state.setStep);
+    const setWebAuthURLForCreate = useModalStore(state => state.setWebAuthURLForCreate);
+    const setIFrameUrl = useModalStore(state => state.setIFrameUrl);
+    const setIsIFrameReady = useModalStore(state => state.setIsIFrameReady);
+    const isIFrameReady = useModalStore(state => state.isIFrameReady);
+    const setSupportedAuthMethods = useModalStore(state => state.setSupportedAuthMethods);
+    const setBiometricLocationHints = useModalStore(state => state.setBiometricLocationHints);
+    const para = useParaStore(state => state.para);
+    const setFlow = useModalStore(state => state.setFlow);
+    const farcasterConnectUri = useModalStore(state => state.farcasterConnectUri);
+    const setFarcasterConnectUri = useModalStore(state => state.setFarcasterConnectUri);
+    const theme = useThemeStore(state => state.theme);
+    const [shouldRouteToStep, setShouldRouteToStep] = useState();
+    useEffect(() => {
+        if (!!shouldRouteToStep && isIFrameReady) {
+            // Using a small timeout here to fully ensure the iframe is loaded before triggering any animation
+            setTimeout(() => {
+                setStep(shouldRouteToStep);
+            }, 200);
+        }
+    }, [shouldRouteToStep, isIFrameReady]);
+    useEffect(() => {
+        if (farcasterConnectUri) {
+            const pollStatus = () => __awaiter(void 0, void 0, void 0, function* () {
+                const { userExists, username, pfpUrl } = yield para.waitForFarcasterStatus();
+                setAuthInfo({ farcasterUsername: username, pfpUrl });
+                setStep(ModalStep.AWAITING_OAUTH);
+                if (userExists) {
+                    const supportedAuthMethods = yield para.initiateUserLoginV2({ farcasterUsername: username });
+                    if (supportedAuthMethods.size > 0) {
+                        setSupportedAuthMethods(supportedAuthMethods);
+                        const biometricLocationHints = supportedAuthMethods.has(AuthMethod.PASSKEY)
+                            ? yield para.getUserBiometricLocationHints()
+                            : [];
+                        setFlow('login');
+                        setStep(ModalStep.BIOMETRIC_LOGIN);
+                        setBiometricLocationHints(biometricLocationHints);
+                        return;
+                    }
+                }
+                const supportedCreateAuthMethods = yield para.getSupportedCreateAuthMethods();
+                setIsIFrameReady(false);
+                setFlow('signUp');
+                const supportsPasskey = supportedCreateAuthMethods.has(AuthMethod.PASSKEY);
+                if (supportsPasskey) {
+                    setWebAuthURLForCreate(yield para.shortenLoginLink(yield para.getSetUpBiometricsURL({ authType: 'farcaster' })));
+                    setStep(ModalStep.BIOMETRIC_CREATION);
+                }
+                if (supportedCreateAuthMethods.has(AuthMethod.PASSWORD)) {
+                    setIFrameUrl(yield para.shortenLoginLink(yield para.getSetupPasswordURL({ authType: 'farcaster', theme })));
+                    setShouldRouteToStep(supportsPasskey ? ModalStep.BIOMETRIC_CREATION : ModalStep.PASSWORD_CREATION);
+                }
+                return;
+            });
+            pollStatus();
+            return () => {
+                setFarcasterConnectUri(undefined);
+            };
+        }
+    }, [farcasterConnectUri]);
+    return (_jsx(StepContainer, { "$wide": true, children: isMobile() ? (_jsxs(InnerStepContainer, { children: [_jsx(CpslText, { weight: "medium", color: "secondary", children: `Don’t have Farcaster` }), _jsxs(CpslButton, { as: "a", href: 'https://link.warpcast.com/download-qr', target: "_blank", variant: "secondary", children: [_jsx(CpslIcon, { slot: "start", icon: "linkExternal" }), `Get Farcaster`] })] })) : (_jsxs(_Fragment, { children: [_jsx(Heading, { variant: "headingS", weight: "bold", children: "Sign in using Farcaster" }), _jsxs(InnerStepContainer, { children: [_jsx(CenteredText, { variant: "bodyS", color: "secondary", weight: "medium", children: "Scan the QR code with your phone's camera to proceed." }), _jsx(QRContainer, { children: !farcasterConnectUri ? _jsx(CpslSpinner, { size: 100 }) : _jsx(CpslQrCode, { url: farcasterConnectUri }) })] })] })) }));
+};
+export default FarcasterOAuthStep;

package/dist/modal/components/OAuth/OAuth.d.ts

@@ -0,0 +1,6 @@
+import { OAuthMethod } from '@getpara/web-sdk';
+interface OAuthProps {
+    methods: OAuthMethod[];
+}
+export declare const OAuth: ({ methods }: OAuthProps) => import("react/jsx-runtime").JSX.Element;
+export {};