@getpara/react-sdk 2.0.0-alpha.20 → 2.0.0-alpha.21

package/dist/modal/components/ExternalWalletStep/ExternalWalletStep.js

@@ -5,7 +5,7 @@ import {
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpara/react-components";
 import { CenteredText, ErrorContainer, ErrorIcon, InnerStepContainer, QRContainer, StepContainer } from "../common.js";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useModalStore } from "../../stores/index.js";
 import { safeStyled } from "@getpara/react-common";
 import { useCopyToClipboard } from "@getpara/react-common";
@@ -14,10 +14,65 @@ import { isMobile, isTablet } from "@getpara/web-sdk";
 import { routeMobileExternalWallet } from "../../utils/routeMobileExternalWallet.js";
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
 import { useStore } from "../../../provider/stores/useStore.js";
-const ExternalWalletStep = () => {
+const ExternalWalletMobileConnect = ({
+  wallet,
+  qrUri: propsQrUri,
+  onConnectWc,
+  isSelfFetching = false
+}) => {
+  var _a, _b;
   const [isCopied, copy] = useCopyToClipboard();
-  const externalWalletError = useModalStore((state) => state.externalWalletError);
   const appName = useStore((state) => state.appName);
+  const [qrUri, setQrUri] = useState(isSelfFetching ? void 0 : propsQrUri);
+  const isWalletConnect = wallet.id === "walletConnect";
+  const handleCopy = () => {
+    if (qrUri) {
+      copy(qrUri);
+    }
+  };
+  useEffect(() => {
+    const fetchQrUri = () => {
+      var _a2;
+      if (!isSelfFetching) {
+        return;
+      }
+      (_a2 = wallet.getQrUri) == null ? void 0 : _a2.call(wallet).then(setQrUri).catch();
+    };
+    fetchQrUri();
+  }, [wallet, isSelfFetching]);
+  useEffect(() => {
+    setQrUri(propsQrUri);
+  }, [propsQrUri]);
+  if (wallet.type === "SOLANA" || isMobile() && !isTablet()) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      wallet.type === "SOLANA" && qrUri && /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(CpslText, { weight: "semiBold", color: "error", children: `Continue in the ${wallet.name} mobile app.` }) }),
+      wallet.id !== "walletConnect" && /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+        wallet.type === "SOLANA" && qrUri && !wallet.hasIosSafariExtension || wallet.type !== "SOLANA" ? /* @__PURE__ */ jsx(CpslButton, { onClick: () => routeMobileExternalWallet(qrUri), fullWidth: true, children: "Connect Wallet" }) : /* @__PURE__ */ jsx(Text, { weight: "semiBold", children: wallet.hasIosSafariExtension ? `Please install and use the ${wallet.name} extension for iOS Safari.` : `Please navigate to ${appName} in the ${wallet.name} wallet.` }),
+        !wallet.hasIosSafariExtension && /* @__PURE__ */ jsx(Link, { href: (_a = wallet.downloadUrl) != null ? _a : "", target: "_blank", children: /* @__PURE__ */ jsxs(ExternalButton, { variant: "secondary", children: [
+          `Get ${wallet.name}`,
+          /* @__PURE__ */ jsx(ExternalIcon, { icon: "linkExternal" })
+        ] }) })
+      ] })
+    ] });
+  }
+  const GetWalletButton = /* @__PURE__ */ jsxs(ExternalButton, { variant: "secondary", onClick: isWalletConnect ? onConnectWc : void 0, children: [
+    `${isWalletConnect ? "Open" : "Get"} ${wallet.name}`,
+    /* @__PURE__ */ jsx(ExternalIcon, { icon: "linkExternal" })
+  ] });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+      /* @__PURE__ */ jsx(CpslText, { weight: "semiBold", children: "Scan with your mobile device" }),
+      /* @__PURE__ */ jsx(QRContainer, { children: !qrUri ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: qrUri, imageSrc: wallet.iconUrl }) }),
+      /* @__PURE__ */ jsxs(CpslButton, { size: "small", variant: "ghost", onClick: handleCopy, children: [
+        /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: isCopied ? "check" : "copy" }),
+        isCopied ? "Copied" : "Copy Link"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(InnerStepContainer, { children: isWalletConnect ? /* @__PURE__ */ jsx(Fragment, { children: GetWalletButton }) : /* @__PURE__ */ jsx(Link, { href: (_b = wallet.downloadUrl) != null ? _b : "", target: "_blank", children: GetWalletButton }) })
+  ] });
+};
+const ExternalWalletStep = () => {
+  const externalWalletError = useModalStore((state) => state.externalWalletError);
   const setStep = useModalStore((state) => state.setStep);
   const { connectExternalWallet, wallet, qrUri, walletDisplayHelpers } = useExternalWallets();
   useEffect(() => {
@@ -28,13 +83,8 @@ const ExternalWalletStep = () => {
       yield connectExternalWallet(wallet);
     }
   });
-  const handleCopy = () => {
-    if (qrUri) {
-      copy(qrUri);
-    }
-  };
   const Content = useMemo(() => {
-    var _a, _b, _c;
+    var _a;
     if (!wallet) {
       return null;
     }
@@ -73,36 +123,16 @@ Please choose another wallet or continue on desktop.` }) });
       ] });
     }
     if (showMobile) {
-      if (wallet.type === "SOLANA" || isMobile() && !isTablet()) {
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          wallet.type === "SOLANA" && qrUri && /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(CpslText, { weight: "semiBold", color: "error", children: `Continue in the ${wallet.name} mobile app.` }) }),
-          wallet.id !== "walletConnect" && /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-            wallet.type === "SOLANA" && qrUri && !wallet.hasIosSafariExtension || wallet.type !== "SOLANA" ? /* @__PURE__ */ jsx(CpslButton, { onClick: () => routeMobileExternalWallet(qrUri), fullWidth: true, children: "Connect Wallet" }) : /* @__PURE__ */ jsx(Text, { weight: "semiBold", children: wallet.hasIosSafariExtension ? `Please install and use the ${wallet.name} extension for iOS Safari.` : `Please navigate to ${appName} in the ${wallet.name} wallet.` }),
-            !wallet.hasIosSafariExtension && /* @__PURE__ */ jsx(Link, { href: (_b = wallet.downloadUrl) != null ? _b : "", target: "_blank", children: /* @__PURE__ */ jsxs(ExternalButton, { variant: "secondary", children: [
-              `Get ${wallet.name}`,
-              /* @__PURE__ */ jsx(ExternalIcon, { icon: "linkExternal" })
-            ] }) })
-          ] })
-        ] });
-      }
-      const openWCModal = () => __async(void 0, null, function* () {
-        yield connectExternalWallet(wallet, true, true);
-      });
-      const GetWalletButton = /* @__PURE__ */ jsxs(ExternalButton, { variant: "secondary", onClick: isWalletConnect ? openWCModal : void 0, children: [
-        `${isWalletConnect ? "Open" : "Get"} ${wallet.name}`,
-        /* @__PURE__ */ jsx(ExternalIcon, { icon: "linkExternal" })
-      ] });
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-          /* @__PURE__ */ jsx(CpslText, { weight: "semiBold", children: "Scan with your mobile device" }),
-          /* @__PURE__ */ jsx(QRContainer, { children: !qrUri ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: qrUri, imageSrc: wallet.iconUrl }) }),
-          /* @__PURE__ */ jsxs(CpslButton, { size: "small", variant: "ghost", onClick: handleCopy, children: [
-            /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: isCopied ? "check" : "copy" }),
-            isCopied ? "Copied" : "Copy Link"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(InnerStepContainer, { children: isWalletConnect ? /* @__PURE__ */ jsx(Fragment, { children: GetWalletButton }) : /* @__PURE__ */ jsx(Link, { href: (_c = wallet.downloadUrl) != null ? _c : "", target: "_blank", children: GetWalletButton }) })
-      ] });
+      return /* @__PURE__ */ jsx(
+        ExternalWalletMobileConnect,
+        {
+          wallet,
+          qrUri,
+          onConnectWc: (w) => __async(void 0, null, function* () {
+            yield connectExternalWallet(w, true, true);
+          })
+        }
+      );
     }
   }, [wallet, walletDisplayHelpers, externalWalletError, qrUri]);
   useEffect(() => {
@@ -140,5 +170,6 @@ const Link = safeStyled.a`
   text-decoration: none;
 `;
 export {
+  ExternalWalletMobileConnect,
   ExternalWalletStep
 };

package/dist/modal/components/Header/hooks/useStepTitle.js

@@ -5,6 +5,7 @@ import { useModalStore } from "../../../stores/modal/useModalStore.js";
 import { ModalStep } from "../../../utils/steps.js";
 import { useExternalWallets } from "../../../../provider/providers/ExternalWalletProvider.js";
 import { useStore } from "../../../../provider/stores/useStore.js";
+import { useAccountLinking } from "../../../../provider/providers/AccountLinkProvider.js";
 const useStepTitle = () => {
   const hideWallets = useStore((state) => {
     var _a;
@@ -13,6 +14,7 @@ const useStepTitle = () => {
   const isLogin = useModalStore((state) => state.isLogin());
   const currentStep = useModalStore((state) => state.step);
   const { chainId } = useExternalWallets();
+  const { isEnabled: isAccountLinkingEnabled } = useAccountLinking();
   const titles = useMemo(
     () => ({
       [ModalStep.AUTH_MAIN]: "",
@@ -44,7 +46,11 @@ const useStepTitle = () => {
       [ModalStep.ADD_FUNDS_SUCCESS]: "",
       [ModalStep.ADD_FUNDS_FAILURE]: "",
       [ModalStep.ACCOUNT_MAIN]: "",
-      [ModalStep.CHAIN_SWITCH]: ""
+      [ModalStep.CHAIN_SWITCH]: "",
+      [ModalStep.ACCOUNT_PROFILE]: isAccountLinkingEnabled ? "Profile" : "Settings",
+      [ModalStep.ACCOUNT_PROFILE_LIST]: "Link Account",
+      [ModalStep.ACCOUNT_PROFILE_ADD]: "Link Account",
+      [ModalStep.ACCOUNT_PROFILE_REMOVE]: "Unlink Account"
     }),
     [isLogin, chainId, hideWallets]
   );

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

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

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

@@ -5,9 +5,9 @@ import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpar
 import { CenteredText, Heading, InnerStepContainer, QRContainer, StepContainer } from "../common.js";
 import { useModalStore } from "../../stores/index.js";
 import { isMobile } from "@getpara/web-sdk";
-const FarcasterOAuthStep = () => {
+function FarcasterConnectQR() {
   const farcasterConnectUri = useModalStore((state) => state.farcasterConnectUri);
-  return /* @__PURE__ */ jsx(StepContainer, { $wide: true, children: isMobile() ? /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: isMobile() ? /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
     /* @__PURE__ */ jsx(CpslText, { weight: "medium", color: "secondary", children: `Don\u2019t have Farcaster` }),
     /* @__PURE__ */ jsxs(CpslButton, { as: "a", href: "https://link.warpcast.com/download-qr", target: "_blank", variant: "secondary", children: [
       /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "linkExternal" }),
@@ -20,8 +20,12 @@ const FarcasterOAuthStep = () => {
       /* @__PURE__ */ jsx(QRContainer, { children: !farcasterConnectUri ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: farcasterConnectUri }) })
     ] })
   ] }) });
+}
+const FarcasterOAuthStep = () => {
+  return /* @__PURE__ */ jsx(StepContainer, { $wide: true, children: /* @__PURE__ */ jsx(FarcasterConnectQR, {}) });
 };
 var FarcasterOAuthStep_default = FarcasterOAuthStep;
 export {
+  FarcasterConnectQR,
   FarcasterOAuthStep_default as default
 };

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

@@ -8,7 +8,7 @@ import { useModalStore } from "../../stores/index.js";
 import { ModalStep } from "../../utils/steps.js";
 import { getTileButtonFlex } from "../../utils/getTileButtonFlex.js";
 import { StyledCpslTileButton } from "../common.js";
-import { brandedOAuthLogos, oAuthLogos } from "../../constants/oAuthLogos.js";
+import { ACCOUNT_TYPES } from "../../constants/oAuthLogos.js";
 import { useStore } from "../../../provider/stores/useStore.js";
 import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
 const HAS_MORE_LENGTH = 3;
@@ -44,7 +44,7 @@ const OAuth = ({ methods }) => {
       OAuthButton,
       {
         $isDark: useDarkLogos,
-        icon: useBrandedLogos ? brandedOAuthLogos[method] : oAuthLogos[method],
+        icon: ACCOUNT_TYPES[method][useBrandedLogos ? "logoBranded" : "logo"],
         onClick: handleMethodClick(method),
         $index: index,
         $totalItems: showMoreButton ? HAS_MORE_LENGTH : methodsToShow.length

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

@@ -1 +1,8 @@
+import React from 'react';
 export declare function TelegramOAuthStep(): import("react/jsx-runtime").JSX.Element;
+export declare function TelegramIFrame({ url, isLoaded, setIsLoaded, isVisible, }: {
+    url?: string;
+    isLoaded: boolean;
+    setIsLoaded: React.Dispatch<React.SetStateAction<boolean>>;
+    isVisible?: boolean;
+}): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,67 +1,51 @@
 "use client";
-import {
-  __async
-} from "../../../chunk-MMUBH76A.js";
+import "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { constructUrl, getPortalBaseURL } from "@getpara/web-sdk";
 import { safeStyled } from "@getpara/react-common";
-import { useEffect, useRef, useState } from "react";
 import { HeroSpinner } from "@getpara/react-common";
 import { CpslSpinner } from "@getpara/react-components";
-import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useTelegramLogin } from "../../hooks/useTelegramLogin.js";
 import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
+import { AccountTypeIcon } from "../common.js";
+import { useModalStore } from "../../stores/index.js";
 function TelegramOAuthStep() {
-  const iframe = useRef();
-  const para = useInternalClient();
-  const { verifyTelegram } = useAuthActions();
-  const [url, setUrl] = useState();
-  const [isWaiting, setIsWaiting] = useState(false);
-  const [isLoaded, setIsLoaded] = useState(false);
-  const [isError, setIsError] = useState(false);
-  useEffect(() => {
-    if (!url) {
-      setUrl(
-        constructUrl({
-          base: getPortalBaseURL(para.ctx, true),
-          path: "/auth/telegram"
-        })
-      );
-    }
-  }, [url]);
-  useEffect(() => {
-    const updateState = (event) => __async(this, null, function* () {
-      switch (event.data.type) {
-        case "TELEGRAM_LOGIN":
-          setIsWaiting(true);
-          setIsError(false);
-          break;
-        case "TELEGRAM_FAILED":
-          setIsWaiting(false);
-          setIsError(true);
-          break;
-        case "TELEGRAM_SUCCESS":
-          if (!!event.data.payload) {
-            const authObject = event.data.payload;
-            verifyTelegram(authObject);
-          }
-          break;
-      }
-    });
-    window == null ? void 0 : window.addEventListener("message", updateState, false);
-    return () => {
-      window == null ? void 0 : window.removeEventListener("message", updateState, false);
-    };
-  }, []);
+  const { verifyTelegramStatus, verifyTelegram } = useAuthActions();
+  const { url, status, isLoaded, setIsLoaded } = useTelegramLogin({
+    isActive: true,
+    status: verifyTelegramStatus,
+    onSubmit: verifyTelegram
+  });
+  const isError = status === "error", isPending = status === "pending";
   return /* @__PURE__ */ jsxs(Container, { children: [
     /* @__PURE__ */ jsx(HeroContainer, { children: /* @__PURE__ */ jsx(
       HeroSpinner,
       {
-        icon: "telegramBrand",
-        status: isWaiting ? "loading" : isError ? "error" : "inactive",
-        text: isWaiting ? "Follow the on-screen prompts." : isError ? "Login Failed" : void 0
+        icon: /* @__PURE__ */ jsx(AccountTypeIcon, { accountType: "TELEGRAM", size: "48px" }),
+        status: isPending ? "pending" : isError ? "error" : "idle",
+        text: isPending ? "Follow the on-screen prompts." : isError ? "Login Failed" : void 0
       }
     ) }),
-    url && /* @__PURE__ */ jsx(IFrame, { ref: iframe, style: { display: isLoaded ? "block" : "none" }, src: url, onLoad: () => setIsLoaded(true) }),
+    /* @__PURE__ */ jsx(TelegramIFrame, { url, isLoaded, setIsLoaded, isVisible: isLoaded })
+  ] });
+}
+function TelegramIFrame({
+  url,
+  isLoaded,
+  setIsLoaded,
+  isVisible = false
+}) {
+  const refs = useModalStore((state) => state.refs);
+  if (!url) return null;
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    url && /* @__PURE__ */ jsx(
+      IFrame,
+      {
+        ref: refs.telegramIFrame,
+        style: { display: isLoaded && isVisible ? "block" : "none" },
+        src: url,
+        onLoad: () => setIsLoaded(true)
+      }
+    ),
     (!url || !isLoaded) && /* @__PURE__ */ jsx(CpslSpinner, {})
   ] });
 }
@@ -74,7 +58,6 @@ const Container = safeStyled.div`
 `;
 const HeroContainer = safeStyled.div`
   display: flex;
-  min-height: 276px;
   flex-direction: column;
   align-items: center;
   gap: 16px;
@@ -86,5 +69,6 @@ const IFrame = safeStyled.iframe`
   border: none;
 `;
 export {
+  TelegramIFrame,
   TelegramOAuthStep
 };

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

@@ -1 +1,12 @@
-export declare const VerificationCodeStep: () => import("react/jsx-runtime").JSX.Element;
+import { AuthInfo } from '@getpara/user-management-client';
+import { MutationStatus } from '@tanstack/react-query';
+type Props = {
+    authInfo: AuthInfo<'email' | 'phone'>;
+    onSubmit: (_: string) => void;
+    onResend: () => void;
+    status: MutationStatus;
+    error?: Error | string | null;
+};
+export declare const VerificationCode: ({ authInfo, onResend, onSubmit, status, error }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VerificationCodeStep: () => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/modal/components/VerificationCodeStep/VerificationCodeStep.js

@@ -8,17 +8,13 @@ import { useEffect, useRef, useState } from "react";
 import { safeStyled } from "@getpara/react-common";
 import { Heading, InnerStepContainer, StepContainer } from "../common.js";
 import { displayPhoneNumber } from "@getpara/core-sdk";
-import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
 import { useResendVerificationCode } from "../../../provider/index.js";
-const VerificationCodeStep = () => {
-  const para = useInternalClient();
-  const authInfo = para.authInfo;
-  const { verifyNewAccount, isVerifyNewAccountPending, verifyNewAccountError } = useAuthActions();
-  const { resendVerificationCode } = useResendVerificationCode();
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+const VerificationCode = ({ authInfo, onResend, onSubmit, status, error }) => {
   const inputRef = useRef(null);
   const [code, setCode] = useState("");
-  const [isPending, setIsPending] = useState(false);
+  const [isPending, setIsPending] = useState(status === "pending");
   const [codeError, setCodeError] = useState(null);
   const [resendDisabled, setResendDisabled] = useState(false);
   const isEmail = (authInfo == null ? void 0 : authInfo.authType) === "email";
@@ -35,20 +31,20 @@ const VerificationCodeStep = () => {
     }
   }, [code]);
   useEffect(() => {
-    if (isVerifyNewAccountPending) {
-      setIsPending(isVerifyNewAccountPending);
+    if (status === "pending") {
+      setIsPending(true);
     }
-  }, [isVerifyNewAccountPending]);
+  }, [status]);
   const handleResendClick = () => __async(void 0, null, function* () {
     if (!resendDisabled) {
       setResendDisabled(true);
-      resendVerificationCode(void 0, {
-        onSettled: () => {
-          setTimeout(() => {
-            setResendDisabled(false);
-          }, 3e3);
-        }
-      });
+      try {
+        onResend();
+      } finally {
+        setTimeout(() => {
+          setResendDisabled(false);
+        }, 3e3);
+      }
     }
   });
   const handleCodeInput = (e) => {
@@ -56,16 +52,16 @@ const VerificationCodeStep = () => {
   };
   const handleSubmitCode = () => __async(void 0, null, function* () {
     if (code.length === 6 && /^\d+$/.test(code)) {
-      verifyNewAccount(code);
+      onSubmit(code);
     } else {
       setCodeError("Incorrect code.");
     }
   });
   useEffect(() => {
-    if (!!verifyNewAccountError) {
+    if (!!error) {
       setIsPending(false);
-      const status = verifyNewAccountError.status;
-      switch (status) {
+      const status2 = error.status;
+      switch (status2) {
         case 429:
           setCodeError("Too many incorrect attempts. Please try again in 10 minutes.");
           break;
@@ -74,8 +70,8 @@ const VerificationCodeStep = () => {
           break;
       }
     }
-  }, [verifyNewAccountError]);
-  return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
+  }, [error]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
       /* @__PURE__ */ jsxs(Heading, { variant: "headingS", weight: "bold", children: [
         "Verify ",
@@ -127,6 +123,26 @@ const VerificationCodeStep = () => {
     ] }) })
   ] });
 };
+const VerificationCodeStep = () => {
+  const { verifyNewAccount, verifyNewAccountStatus, verifyNewAccountError } = useAuthActions();
+  const { mutateAsync: resendVerificationCode } = useResendVerificationCode();
+  const para = useInternalClient();
+  if (!para.authInfo) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(StepContainer, { $wide: true, children: /* @__PURE__ */ jsx(
+    VerificationCode,
+    {
+      authInfo: para.authInfo,
+      onSubmit: verifyNewAccount,
+      onResend: () => {
+        resendVerificationCode({ type: "SIGNUP" });
+      },
+      status: verifyNewAccountStatus,
+      error: verifyNewAccountError
+    }
+  ) });
+};
 const StyledCodeInput = safeStyled(CpslCodeInput)`
   align-self: center;
 `;
@@ -139,5 +155,6 @@ const ClickableText = safeStyled(InlineText)`
   display: inline-block;
 `;
 export {
+  VerificationCode,
   VerificationCodeStep
 };

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

@@ -1,5 +1,6 @@
 import { CpslInput, CpslText, CpslTileButton } from '@getpara/react-components';
-import { Network, OnRampAsset } from '@getpara/web-sdk';
+import { Network, OnRampAsset, TExternalWallet, TLinkedAccountType } from '@getpara/web-sdk';
+import { PropsWithChildren } from 'react';
 export declare const SpinnerContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const QRContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const InfoBoxContent: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
@@ -40,3 +41,19 @@ export declare const ErrorContainer: import("styled-components/dist/types.js").I
 export declare const ErrorIcon: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
     ref?: ((instance: any) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<any> | null | undefined;
 }, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;
+export declare function AccountTypeIcon({ accountType, size, inset, }: {
+    accountType?: TLinkedAccountType | TExternalWallet;
+    size?: string;
+    inset?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function HeroAccountTypeIcon({ accountType }: {
+    accountType: TLinkedAccountType | TExternalWallet;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function HeroSuccessIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function GradientScroll({ height, gap, children }: PropsWithChildren<{
+    gap?: string;
+    height?: string;
+}>): import("react/jsx-runtime").JSX.Element;
+export declare const HeroGenericIcon: ({ accountType }: {
+    accountType: "EMAIL" | "PHONE";
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/modal/components/common.js

@@ -5,6 +5,8 @@ import { CpslIcon, CpslInput, CpslSelect, CpslSelectItem, CpslText, CpslTileButt
 import { safeStyled } from "@getpara/react-common";
 import { MOBILE_SIZE, NETWORKS, ON_RAMP_ASSETS } from "../constants/constants.js";
 import { useStore } from "../../provider/stores/useStore.js";
+import { ACCOUNT_TYPES } from "../constants/oAuthLogos.js";
+import { useEffect, useRef, useState } from "react";
 const SpinnerContainer = safeStyled.div`
   display: flex;
   align-items: center;
@@ -152,18 +154,102 @@ const ErrorIcon = safeStyled(CpslIcon)`
   --width: 16px;
   --icon-color: var(--cpsl-color-text-error);
 `;
+function AccountTypeIcon({
+  accountType,
+  size,
+  inset
+}) {
+  var _a;
+  const isDark = useStore((state) => {
+    var _a2, _b;
+    return ((_b = (_a2 = state.modalConfig) == null ? void 0 : _a2.theme) == null ? void 0 : _b.mode) === "dark";
+  });
+  const data = accountType ? ACCOUNT_TYPES[accountType] : null;
+  return data ? /* @__PURE__ */ jsx(CpslIcon, { size, inset, icon: (_a = data.logoBranded) != null ? _a : data.logo, invert: isDark && data.isDark }) : null;
+}
+function HeroAccountTypeIcon({ accountType }) {
+  if (accountType === "EMAIL" || accountType === "PHONE") {
+    return /* @__PURE__ */ jsx(HeroGenericIcon, { accountType });
+  }
+  return /* @__PURE__ */ jsx(AccountTypeIcon, { accountType, size: "60px" });
+}
+function HeroSuccessIcon() {
+  return /* @__PURE__ */ jsx(CpslIcon, { icon: "checkCircleFilled", size: "80px", style: { ["--icon-color"]: "var(--cpsl-color-utility-green" } });
+}
+function GradientScroll({ height, gap, children }) {
+  const [isNotAtBottom, setIsNotAtBottom] = useState(false);
+  const [isNotAtTop, setIsNotAtTop] = useState(false);
+  const ref = useRef(null);
+  const onScroll = () => {
+    if (ref.current) {
+      const { scrollTop, scrollHeight, clientHeight } = ref.current;
+      if (height && scrollHeight <= parseInt(height)) {
+        setIsNotAtTop(false);
+        setIsNotAtBottom(false);
+      } else {
+        setIsNotAtTop(scrollTop > 30);
+        setIsNotAtBottom(scrollTop + clientHeight < scrollHeight - 30);
+      }
+    }
+  };
+  useEffect(() => {
+    onScroll();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    GradientScrollContainer,
+    {
+      ref,
+      height,
+      gap,
+      isNotAtBottom,
+      isNotAtTop,
+      onScroll,
+      children: /* @__PURE__ */ jsx("div", { children })
+    }
+  );
+}
+const HeroGenericIcon = ({ accountType }) => {
+  return /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AccountTypeIcon, { accountType, size: "24px" }) });
+};
+const GradientScrollContainer = safeStyled.div`
+  max-height: ${({ height }) => height || "100%"};
+  width: 100%;
+  overflow-y: auto;
+  mask-image: ${({ isNotAtBottom, isNotAtTop }) => isNotAtBottom && isNotAtTop ? "linear-gradient(to bottom, transparent 0%, black 24px, black calc(100% - 24px), transparent 100%)" : isNotAtBottom ? "linear-gradient(to bottom, black calc(100% - 24px), transparent 100%)" : isNotAtTop ? "linear-gradient(to top, black calc(100% - 24px), transparent 100%)" : "none"};
+
+  & > div {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: ${({ gap }) => gap || "8px"};
+  }
+`;
+const Avatar = safeStyled.div`
+  width: 80px;
+  height: 80px;
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--cpsl-color-background-8);
+`;
 export {
+  AccountTypeIcon,
   AssetIcon,
   CenteredText,
   ErrorContainer,
   ErrorIcon,
   FilledDisabledInput,
   FullWidthFilledDisabledInput,
+  GradientScroll,
   HeaderSelect,
   HeaderSelectContainer,
   HeaderSelectItem,
   Heading,
+  HeroAccountTypeIcon,
+  HeroGenericIcon,
   HeroIcon,
+  HeroSuccessIcon,
   InfoBoxContent,
   InfoBoxHeader,
   InnerStepContainer,