@getpara/react-sdk-lite 2.0.0-alpha.53 → 2.0.0-dev.6

package/dist/modal/ParaModal.js

@@ -168,6 +168,7 @@ const ParaModal = forwardRef((props, ref) => {
           yield disconnectExternalWallet();
           setSelectedWallet({ id: void 0, type: void 0 });
         }
+        yield para.logout();
         if (shouldAutoLogin) {
           if (defaultAuthIdentifier && ((_a2 = para.authInfo) == null ? void 0 : _a2.identifier) !== defaultAuthIdentifier) {
             const number = parsePhoneNumberFromString(defaultAuthIdentifier);

package/dist/modal/components/Account/AccountProfileLink.js

@@ -9,7 +9,7 @@ import { useEffect, useMemo } from "react";
 import { HeroAccountTypeIcon, HeroSuccessIcon } from "../common.js";
 import { VerificationCode } from "../VerificationCodeStep/VerificationCodeStep.js";
 import { extractAuthInfo } from "@getpara/user-management-client";
-import { FarcasterConnectQR } from "../OAuth/FarcasterOAuthStep.js";
+import { FarcasterLink } from "../OAuth/FarcasterLink.js";
 import { useTelegramLogin } from "../../hooks/useTelegramLogin.js";
 import { TelegramIFrame } from "../OAuth/TelegramOAuthStep.js";
 import { AuthInput } from "../AuthInput/AuthInput.js";
@@ -35,7 +35,7 @@ function AccountProfileLink() {
     isLoaded,
     setIsLoaded
   } = useTelegramLogin(
-    isTelegram ? { isActive: isTelegram, status: linkAccountStatus, onSubmit: verifyTelegramLink } : { isActive: false }
+    isTelegram ? { isActive: isTelegram, status: linkAccountStatus, onSubmit: verifyTelegramLink, isLinking: true } : { isActive: false, isLinking: true }
   ), status = (accountLinkInProgress == null ? void 0 : accountLinkInProgress.isComplete) ? "success" : isTelegram ? telegramStatus : linkAccountStatus, commonWallet = useMemo(() => {
     const wallet = wallets.find(
       (w) => [w.name, w.internalId, w.id].includes(externalWalletProvider != null ? externalWalletProvider : "") && w.type === externalWalletType
@@ -140,7 +140,7 @@ function AccountProfileLink() {
         break;
       // Farcaster Connect QR
       case (accountLinkType === "FARCASTER" && status !== "success"):
-        lower2 = /* @__PURE__ */ jsx(FarcasterConnectQR, {});
+        lower2 = /* @__PURE__ */ jsx(FarcasterLink, {});
         break;
       // OAuth, External Wallet, Telegram
       default:

package/dist/modal/components/AddFunds/AddFunds.js

@@ -17,7 +17,6 @@ import { AnimatePresence } from "framer-motion";
 import { AddFundsSettings } from "./AddFundsSettings.js";
 import { WalletSelectOld } from "../WalletSelectOld/WalletSelectOld.js";
 const AddFunds = () => {
-  var _a;
   const step = useModalStore((state) => state.step);
   const onRampConfig = useModalStore((state) => state.onRampConfig);
   const onRampStep = useModalStore((state) => state.onRampStep);
@@ -30,7 +29,7 @@ const AddFunds = () => {
   const tabs = TABS.filter(
     ([enabledFlow, key]) => !!(onRampConfig == null ? void 0 : onRampConfig[key]) && (!isGuestMode || enabledFlow === EnabledFlow.RECEIVE)
   );
-  const tab = storedTab != null ? storedTab : (_a = tabs[0]) == null ? void 0 : _a[0];
+  const tab = storedTab != null ? storedTab : tabs[0][0];
   const isMultiFlow = (tab === EnabledFlow.BUY || tab === EnabledFlow.RECEIVE) && (onRampConfig == null ? void 0 : onRampConfig.isBuyEnabled) && (onRampConfig == null ? void 0 : onRampConfig.isReceiveEnabled);
   const onSetTab = (event) => {
     setModalStep(getAddFundsStep(event.detail.tab));
@@ -53,7 +52,7 @@ const AddFunds = () => {
   useEffect(() => {
     setOnRampPurchase(void 0);
   }, []);
-  if (!onRampConfig || !activeWallet || !tab) {
+  if (!onRampConfig || !activeWallet) {
     return /* @__PURE__ */ jsx(SpinnerContainer, { children: /* @__PURE__ */ jsx(CpslSpinner, {}) });
   }
   return /* @__PURE__ */ jsxs(StepContainer, { children: [

package/dist/modal/components/AddFunds/AddFundsContext.d.ts

@@ -1,6 +1,6 @@
 import { Dispatch, PropsWithChildren, ReactNode, SetStateAction } from 'react';
 import { useWallet } from '../../../provider/hooks/index.js';
-import { EnabledFlow, TNetwork, TOnRampAsset, OnRampConfig, OnRampProvider } from '@getpara/web-sdk';
+import { EnabledFlow, Network, OnRampAsset, OnRampConfig, OnRampProvider } from '@getpara/web-sdk';
 import { IconType } from '@getpara/react-components';
 export type Tab = EnabledFlow;
 export declare const TABS: [
@@ -10,14 +10,14 @@ export declare const TABS: [
     ReactNode
 ][];
 type Value = {
-    network: TNetwork | undefined;
+    network: Network | undefined;
     setNetwork: Dispatch<SetStateAction<Value['network']>>;
-    asset: TOnRampAsset | undefined;
+    asset: OnRampAsset | undefined;
     setAsset: Dispatch<SetStateAction<Value['asset']>>;
     fiatQuantity: string | undefined;
     setFiatQuantity: Dispatch<SetStateAction<Value['fiatQuantity']>>;
-    networks: TNetwork[];
-    assets: TOnRampAsset[];
+    networks: Network[];
+    assets: OnRampAsset[];
     isProviderAllowed: Partial<Record<OnRampProvider, boolean>>;
     tab: Tab;
     activeWallet: ReturnType<typeof useWallet>['data'];

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

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

package/dist/modal/components/{AwaitingIFrameStep/AwaitingIFrameStep.js → AwaitingAccountStep/AwaitingAccountStep.js}

@@ -3,10 +3,10 @@ import "../../../chunk-MMUBH76A.js";
 import { jsx } from "react/jsx-runtime";
 import { useModalStore } from "../../stores/index.js";
 import { Waiting } from "../Waiting/Waiting.js";
-const AwaitingIFrameStep = () => {
+const AwaitingAccountStep = () => {
   const isLogin = useModalStore((state) => state.isLogin());
   return /* @__PURE__ */ jsx(Waiting, { heading: isLogin ? "Logging you in..." : "Creating your account..." });
 };
 export {
-  AwaitingIFrameStep
+  AwaitingAccountStep
 };

package/dist/modal/components/Body/Body.js

@@ -18,7 +18,7 @@ import { TwoFactorDoneStep } from "../TwoFactorDoneStep/TwoFactorDoneStep.js";
 import { BiometricCreationStep } from "../BiometricCreationStep/BiometricCreationStep.js";
 import { AwaitingOAuthStep } from "../AwaitingOAuthStep/AwaitingOAuthStep.js";
 import { AddFundsAwaiting, AddFundsDone, AddFunds } from "../AddFunds/index.js";
-import FarcasterOAuthStep from "../OAuth/FarcasterOAuthStep.js";
+import { FarcasterOAuthStep } from "../OAuth/FarcasterOAuthStep.js";
 import { Header } from "../Header/Header.js";
 import { AuthMainStep } from "../AuthMainStep/AuthMainStep.js";
 import { BODY_MOTION_VARIANTS, BODY_TRANSITION, MOBILE_SIZE } from "../../constants/constants.js";
@@ -42,9 +42,8 @@ import { AccountProfileLinkOptions } from "../Account/AccountProfileLinkOptions.
 import { AccountProfileLink } from "../Account/AccountProfileLink.js";
 import { AccountProfileUnlink } from "../Account/AccountProfileUnlink.js";
 import { ExternalWalletNetworkSelectStep } from "../ExternalWalletNetworkSelectStep/ExternalWalletNetworkSelectStep.js";
-import { AwaitingIFrameStep } from "../AwaitingIFrameStep/AwaitingIFrameStep.js";
+import { AwaitingAccountStep } from "../AwaitingAccountStep/AwaitingAccountStep.js";
 import { Footer } from "../Footer/Footer.js";
-import { renderTextWithLinks } from "../../utils/renderTextWithLinks.js";
 const MIN_HEIGHT = {
   [ModalStep.ADD_FUNDS_AWAITING]: "680px"
 };
@@ -67,8 +66,6 @@ const Body = ({
   const setStepDirection = useModalStore((state) => state.setStepDirection);
   const accountAddFundTab = useModalStore((state) => state.accountAddFundTab);
   const setAccountAddFundTab = useModalStore((state) => state.setAccountAddFundTab);
-  const modalError = useModalStore((state) => state.modalError);
-  const setModalError = useModalStore((state) => state.setModalError);
   const embeddedModal = useStore((state) => {
     var _a;
     return (_a = state.modalConfig) == null ? void 0 : _a.embeddedModal;
@@ -192,8 +189,8 @@ const Body = ({
       case ModalStep.EX_WALLET_NETWORK_SELECT: {
         return /* @__PURE__ */ jsx(ExternalWalletNetworkSelectStep, {});
       }
-      case ModalStep.AWAITING_IFRAME: {
-        return /* @__PURE__ */ jsx(AwaitingIFrameStep, {});
+      case ModalStep.AWAITING_ACCOUNT: {
+        return /* @__PURE__ */ jsx(AwaitingAccountStep, {});
       }
       default: {
         if (IFrameSteps.includes(currentStep)) {
@@ -237,7 +234,7 @@ const Body = ({
             setStepDirection(1);
           },
           custom: stepDirection,
-          children: /* @__PURE__ */ jsxs(
+          children: /* @__PURE__ */ jsx(
             BodyContainer,
             {
               custom: stepDirection,
@@ -246,38 +243,32 @@ const Body = ({
               animate: "center",
               exit: "exit",
               transition: BODY_TRANSITION,
-              children: [
-                /* @__PURE__ */ jsxs(
-                  InnerContainer,
-                  {
-                    $embeddedModal: !!embeddedModal,
-                    $step: currentStep,
-                    $isIFrameStep: IFrameSteps.includes(currentStep),
-                    children: [
-                      /* @__PURE__ */ jsx(NetworkSpeedBanner, { fontSize: "12px", iconSize: "16px" }),
-                      Content(),
-                      (onRampConfig == null ? void 0 : onRampConfig.testMode) && [
-                        ModalStep.ADD_FUNDS_BUY,
-                        ModalStep.ADD_FUNDS_WITHDRAW,
-                        ModalStep.ADD_FUNDS_AWAITING,
-                        ModalStep.ADD_FUNDS_FAILURE,
-                        ModalStep.ADD_FUNDS_SUCCESS
-                      ].includes(currentStep) && isTestModeAlert && accountAddFundTab !== EnabledFlow.RECEIVE && /* @__PURE__ */ jsx(TestModeAlert, { children: /* @__PURE__ */ jsxs("div", { style: { fontSize: "14px" }, children: [
-                        "This Para Modal is configured to run on-ramp services in ",
-                        /* @__PURE__ */ jsx("b", { children: "test mode" }),
-                        " only, for development purposes. If you are a user of ",
-                        appName,
-                        ", please contact support.",
-                        /* @__PURE__ */ jsx(CloseButton, { onClick: () => setIsTestModeAlert(false), children: /* @__PURE__ */ jsx(CloseX, { icon: "x" }) })
-                      ] }) })
-                    ]
-                  }
-                ),
-                modalError && /* @__PURE__ */ jsx(ModalErrorAlert, { children: /* @__PURE__ */ jsxs(ErrorContent, { children: [
-                  /* @__PURE__ */ jsx(ErrorCloseButton, { onClick: () => setModalError(void 0), children: /* @__PURE__ */ jsx(ErrorCloseIcon, { icon: "x" }) }),
-                  /* @__PURE__ */ jsx(ErrorText, { children: renderTextWithLinks(modalError) })
-                ] }) })
-              ]
+              children: /* @__PURE__ */ jsxs(
+                InnerContainer,
+                {
+                  $embeddedModal: !!embeddedModal,
+                  $step: currentStep,
+                  $isIFrameStep: IFrameSteps.includes(currentStep),
+                  children: [
+                    /* @__PURE__ */ jsx(NetworkSpeedBanner, { fontSize: "12px", iconSize: "16px" }),
+                    Content(),
+                    (onRampConfig == null ? void 0 : onRampConfig.testMode) && [
+                      ModalStep.ADD_FUNDS_BUY,
+                      ModalStep.ADD_FUNDS_WITHDRAW,
+                      ModalStep.ADD_FUNDS_AWAITING,
+                      ModalStep.ADD_FUNDS_FAILURE,
+                      ModalStep.ADD_FUNDS_SUCCESS
+                    ].includes(currentStep) && isTestModeAlert && accountAddFundTab !== EnabledFlow.RECEIVE && /* @__PURE__ */ jsx(TestModeAlert, { children: /* @__PURE__ */ jsxs("div", { style: { fontSize: "14px" }, children: [
+                      "This Para Modal is configured to run on-ramp services in ",
+                      /* @__PURE__ */ jsx("b", { children: "test mode" }),
+                      " only, for development purposes. If you are a user of ",
+                      appName,
+                      ", please contact support.",
+                      /* @__PURE__ */ jsx(CloseButton, { onClick: () => setIsTestModeAlert(false), children: /* @__PURE__ */ jsx(CloseX, { icon: "x" }) })
+                    ] }) })
+                  ]
+                }
+              )
             },
             ["ADD_FUNDS_BUY", "ADD_FUNDS_RECEIVE", "ADD_FUNDS_WITHDRAW"].includes(currentStep) ? "ADD_FUNDS" : currentStep
           )
@@ -300,7 +291,7 @@ const BodyContainer = safeStyled(motion.div)`
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 24px;
   will-change: auto !important;
 `;
 const InnerContainer = safeStyled.div`
@@ -339,59 +330,17 @@ const TestModeAlert = safeStyled(CpslAlert)`
   right: 16px;
   z-index: 1000;
 `;
-const ModalErrorAlert = safeStyled.div`
-  background: #fffcec;
-  border: 2px solid var(--cpsl-color-utility-yellow);
-  border-radius: 4px;
-  padding: 8px 8px;
-`;
-const ErrorContent = safeStyled.div`
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  position: relative;
-`;
-const ErrorText = safeStyled.div`
-  flex: 1;
-  font-size: 14px;
-  line-height: 1.4;
-  color: var(--cpsl-color-black);
-  font-weight: 400;
-`;
-const ErrorCloseButton = safeStyled.button`
-  background-color: transparent;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  margin-top: 1px;
-`;
-const ErrorCloseIcon = safeStyled(CpslIcon)`
-  --icon-color: var(--cpsl-color-utility-yellow);
-  --height: 20px;
-  --width: 20px;
-`;
 const CloseButton = safeStyled.button`
   background-color: transparent;
   border: none;
-  padding: 0;
+  padding: 4px;
   cursor: pointer;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
+  position: absolute;
+  top: 0;
+  right: 0;
 `;
 const CloseX = safeStyled(CpslIcon)`
-  --icon-color: var(--cpsl-color-utility-yellow-dark, #92400e);
-  --height: 18px;
-  --width: 18px;
+  --icon-color: var(--cpsl-color-foreground-0);
 `;
 export {
   Body

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

@@ -69,7 +69,7 @@ const useStepTitle = () => {
       [ModalStep.ACCOUNT_PROFILE_LIST]: "Link Account",
       [ModalStep.ACCOUNT_PROFILE_ADD]: "Link Account",
       [ModalStep.ACCOUNT_PROFILE_REMOVE]: "Unlink Account",
-      [ModalStep.AWAITING_IFRAME]: isLogin ? "Login" : "Sign Up"
+      [ModalStep.AWAITING_ACCOUNT]: isLogin ? "Login" : "Sign Up"
     }),
     [isLogin, chainId, hideWallets, authStepTitle]
   );

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

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

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

@@ -0,0 +1,30 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpara/react-components";
+import { CenteredText, Heading, InnerStepContainer, QRContainer, StepContainer } from "../common.js";
+import { useModalStore } from "../../stores/index.js";
+import { isMobile } from "@getpara/web-sdk";
+function FarcasterConnectQR() {
+  const farcasterConnectUri = useModalStore((state) => state.farcasterConnectUri);
+  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" }),
+      `Get Farcaster`
+    ] })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Heading, { children: "Sign in using Farcaster" }),
+    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+      /* @__PURE__ */ jsx(CenteredText, { variant: "bodyS", color: "secondary", weight: "medium", children: "Scan the QR code with your phone's camera to proceed." }),
+      /* @__PURE__ */ jsx(QRContainer, { children: !farcasterConnectUri ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: farcasterConnectUri }) })
+    ] })
+  ] }) });
+}
+const FarcasterLink = () => {
+  return /* @__PURE__ */ jsx(StepContainer, { $wide: true, children: /* @__PURE__ */ jsx(FarcasterConnectQR, {}) });
+};
+export {
+  FarcasterConnectQR,
+  FarcasterLink
+};

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

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

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

@@ -1,31 +1,52 @@
 "use client";
 import "../../../chunk-MMUBH76A.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpara/react-components";
-import { CenteredText, Heading, InnerStepContainer, QRContainer, StepContainer } from "../common.js";
-import { useModalStore } from "../../stores/index.js";
-import { isMobile } from "@getpara/web-sdk";
-function FarcasterConnectQR() {
-  const farcasterConnectUri = useModalStore((state) => state.farcasterConnectUri);
-  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" }),
-      `Get Farcaster`
-    ] })
-  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Heading, { children: "Sign in using Farcaster" }),
-    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-      /* @__PURE__ */ jsx(CenteredText, { variant: "bodyS", color: "secondary", weight: "medium", children: "Scan the QR code with your phone's camera to proceed." }),
-      /* @__PURE__ */ jsx(QRContainer, { children: !farcasterConnectUri ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: farcasterConnectUri }) })
-    ] })
-  ] }) });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CpslSpinner } from "@getpara/react-components";
+import { useFarcasterLogin } from "../../hooks/useFarcasterLogin.js";
+import { safeStyled } from "@getpara/react-common";
+import { useEffect, useState } from "react";
+import { getPortalBaseURL } from "@getpara/web-sdk";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+function FarcasterOAuthStep() {
+  const { url, isLoaded, setIsLoaded } = useFarcasterLogin({
+    isActive: true
+  });
+  const para = useInternalClient();
+  const [height, setHeight] = useState(0);
+  useEffect(() => {
+    const handleMessage = (event) => {
+      if (!url) {
+        return;
+      }
+      const portalBase = getPortalBaseURL(para.ctx);
+      if (!event.origin.startsWith(portalBase)) {
+        return;
+      }
+      if (event.data) {
+        if (event.data.type === "HEIGHT") {
+          setHeight(event.data.height);
+        }
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [url]);
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    url && /* @__PURE__ */ jsx(IFrame, { style: { display: isLoaded ? "block" : "none", height }, src: url, onLoad: () => setIsLoaded(true) }),
+    (!url || !isLoaded) && /* @__PURE__ */ jsx(CpslSpinner, {})
+  ] });
 }
-const FarcasterOAuthStep = () => {
-  return /* @__PURE__ */ jsx(StepContainer, { $wide: true, children: /* @__PURE__ */ jsx(FarcasterConnectQR, {}) });
-};
-var FarcasterOAuthStep_default = FarcasterOAuthStep;
+const Container = safeStyled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+`;
+const IFrame = safeStyled.iframe`
+  width: 100%;
+  border: none;
+`;
 export {
-  FarcasterConnectQR,
-  FarcasterOAuthStep_default as default
+  FarcasterOAuthStep
 };

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

@@ -16,7 +16,7 @@ const OAuth = ({ methods }) => {
   const isDark = useStore((state) => state.isDarkTheme);
   const setStep = useModalStore((state) => state.setStep);
   const showAll = useModalStore((state) => state.step === ModalStep.AUTH_MORE || state.step === ModalStep.AUTH_GUEST_SIGNUP);
-  const { verifyFarcaster, verifyOAuth } = useAuthActions();
+  const { verifyOAuth } = useAuthActions();
   const hasMore = methods.length > HAS_MORE_LENGTH;
   const methodsToShow = showAll || !hasMore ? methods : methods.slice(0, HAS_MORE_LENGTH - 1);
   const handleShowAll = () => {
@@ -25,7 +25,7 @@ const OAuth = ({ methods }) => {
   const handleMethodClick = (method) => () => __async(void 0, null, function* () {
     switch (method) {
       case "FARCASTER":
-        verifyFarcaster();
+        setStep(ModalStep.FARCASTER_OAUTH);
         break;
       case "TELEGRAM":
         setStep(ModalStep.TELEGRAM_OAUTH);

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

@@ -13,7 +13,8 @@ function TelegramOAuthStep() {
   const { url, status, isLoaded, setIsLoaded } = useTelegramLogin({
     isActive: true,
     status: verifyTelegramStatus,
-    onSubmit: verifyTelegram
+    onSubmit: verifyTelegram,
+    isLinking: false
   });
   const isError = status === "error", isPending = status === "pending";
   return /* @__PURE__ */ jsxs(Container, { children: [

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

@@ -1,5 +1,5 @@
 import { CpslIcon, CpslInput, CpslText, CpslTileButton } from '@getpara/react-components';
-import { TExternalWallet, TLinkedAccountType, TNetwork, TOnRampAsset, TWalletType } from '@getpara/web-sdk';
+import { Network, OnRampAsset, TExternalWallet, TLinkedAccountType, TWalletType } from '@getpara/web-sdk';
 import { ComponentProps, 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;
@@ -30,11 +30,11 @@ export declare const HeaderSelectItem: import("styled-components/dist/types.js")
 }, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;
 export declare const HeaderSelectContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare function AssetIcon({ asset, size }: {
-    asset: TOnRampAsset;
+    asset: OnRampAsset;
     size?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function NetworkIcon({ network, size }: {
-    network?: TNetwork;
+    network?: Network;
     size?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function WalletTypeIcon({ className, walletType, externalWallet, ...props }: {

package/dist/modal/constants/constants.d.ts

@@ -1,4 +1,4 @@
-import { TNetwork, TOnRampAsset, OnRampMethod, OnRampProvider, TWalletType } from '@getpara/core-sdk';
+import { Network, OnRampAsset, OnRampMethod, OnRampProvider, TWalletType } from '@getpara/core-sdk';
 import { IconType } from '@getpara/react-components';
 import { Transition, Variants } from 'framer-motion';
 import { DisplayMetadata } from '@getpara/react-common';
@@ -11,21 +11,21 @@ export type OnRampProviderConfig = DisplayMetadata & {
     backgroundColors: string[];
 };
 export declare const ON_RAMP_PROVIDERS: Record<OnRampProvider, OnRampProviderConfig>;
-type Networks = Record<TNetwork, DisplayMetadata>;
+type Networks = Record<Network, DisplayMetadata>;
 export declare const WALLET_TYPES_METADATA: Record<TWalletType, DisplayMetadata>;
 export declare const NETWORKS: Networks;
-export declare const ON_RAMP_ASSETS: Record<TOnRampAsset, {
+export declare const ON_RAMP_ASSETS: Record<OnRampAsset, {
     name: string;
     code: string;
     icon: IconType;
     isCircular?: boolean;
     isDark?: boolean;
 }>;
-export declare function getNetworkName(str: TNetwork | string): string;
-export declare function getNetworkIcon(str: TNetwork | string): IconType;
-export declare function getAssetCode(str: TOnRampAsset | string): string;
-export declare function getAssetName(str: TOnRampAsset | string): string;
-export declare function getAssetIcon(str: TOnRampAsset | string): "key" | "phone" | "farcaster" | "telegram" | "discord" | "x" | "search" | "wallet" | "cosmos" | "solana" | "para" | "walletConnect" | "close" | "copy" | "safe" | "stripeBrand" | "alertCircle" | "alertTriangle" | "alignVerticalCenter" | "angelListBrand" | "angelList" | "appleBrand" | "apple" | "arbitrumBrand" | "arrowCircleBrokenDownLeft" | "arrowCircleDownFilled" | "arrowCircleDown" | "arrowNarrow" | "arrow" | "asterisk" | "backpack" | "backupKit" | "bank" | "baseBrand" | "beraBrand" | "brush" | "celoBrand" | "checkCircleFilled" | "checkCircle" | "checkSquare" | "check" | "chevronDown" | "chevronRight" | "chevronSelectorVertical" | "chevronUp" | "clock" | "clubhouseBrand" | "clubhouse" | "code" | "coinbase" | "copy07" | "cosmosCircle" | "cosmostation" | "creditCard02" | "creditCard" | "cube03" | "cubeOutline" | "cube" | "currencyDollar" | "decentBrand" | "decent" | "dell" | "discordBrand" | "dot" | "dotsSquare" | "dots" | "downloadCloud" | "download" | "dribbbleBrand" | "dribbble" | "earth" | "edit02" | "emptyCircle" | "ethCircle" | "ethereum" | "eyeOff" | "eye" | "facebookBrand" | "facebook" | "farcasterBrand" | "figmaBrand" | "figma" | "file" | "folder" | "githubBrand" | "github" | "globe" | "glow" | "googleBrand" | "google" | "gridDots" | "haha" | "helpCircle" | "heroAlertCircle" | "heroCheckmarkCapsule" | "heroCheckmark" | "heroEmail" | "heroExternalConnection" | "heroLock" | "heroPasskey" | "heroPhone" | "heroPlusCircleCapsule" | "heroPlusCircle" | "heroWallet" | "home" | "hp" | "image" | "infoCircle" | "instagramBrand" | "instagram" | "keplr" | "laptop" | "leap" | "lenovo" | "lg" | "lightning01" | "lightning" | "linkExternal" | "linkedinBrand" | "linkedin" | "lockKeyholeCircle" | "logOut" | "mail" | "menu" | "metamask" | "monitor" | "moonpayBrand" | "moreLoginOptions" | "motorola" | "nobleBrand" | "okx" | "optimismBrand" | "paraArrow" | "paraBlackBg" | "paraBrand" | "paraIconBrand" | "paraIconQr" | "paraIcon" | "paraLogo" | "paraRingsDark" | "paraRings" | "passcode" | "phantom" | "pintrestBrand" | "pintrest" | "plusCircle" | "plus" | "polygonBrand" | "polygon" | "puzzlePiece" | "qrCode02" | "qrCode" | "rabby" | "rainbow" | "rampNetworkBrand" | "rampNetwork" | "redditBrand" | "reddit" | "refresh" | "samsung" | "send" | "settings" | "share" | "shield" | "signalBrand" | "signal" | "sliders" | "snapchatBrand" | "snapchat" | "solanaCircle" | "solflare" | "spacingHeight" | "star04Filled" | "star05" | "stars01Filled" | "stars02" | "stars" | "stopSquare" | "telegramBrand" | "tetherBrand" | "tikTokBrand" | "tikTok" | "trash" | "tumblrBrand" | "tumblr" | "twitterBrand" | "twitter" | "usdcBrand" | "user01" | "userCircle" | "userPlus" | "user" | "valora" | "wallet02" | "youtubeBrand" | "youtube" | "zerion" | "AD" | "AE" | "AF" | "AG" | "AI" | "AL" | "AM" | "AO" | "AR" | "AS" | "AT" | "AU" | "AW" | "AX" | "AZ" | "BA" | "BB" | "BD" | "BE" | "BF" | "BG" | "BH" | "BI" | "BJ" | "BL" | "BM" | "BN" | "BO" | "BQ" | "BQ2" | "BQ3" | "BR" | "BS" | "BT" | "BW" | "BY" | "BZ" | "CA" | "CC" | "CD" | "CD2" | "CF" | "CH" | "CK" | "CL" | "CM" | "CN" | "CO" | "CR" | "CU" | "CW" | "CX" | "CY" | "CZ" | "DE" | "DJ" | "DK" | "DM" | "DO" | "DS" | "DZ" | "EC" | "EE" | "EG" | "EH" | "ER" | "ES" | "ET" | "FI" | "FJ" | "FK" | "FM" | "FO" | "FR" | "GA" | "GB2" | "GB" | "GD" | "GE" | "GG" | "GH" | "GI" | "GL" | "GM" | "GN" | "GQ" | "GR" | "GT" | "GU" | "GW" | "GY" | "HK" | "HN" | "HR" | "HT" | "HU" | "ID" | "IE" | "IL" | "IM" | "IN" | "IO" | "IQ" | "IR" | "IS" | "IT" | "JE" | "JM" | "JO" | "JP" | "KE" | "KG" | "KH" | "KI" | "KM" | "KN" | "KP" | "KR" | "KW" | "KY" | "KZ" | "LA" | "LB" | "LC" | "LI" | "LK" | "LR" | "LS" | "LT" | "LU" | "LV" | "LY" | "MA" | "MC" | "MD" | "ME" | "MG" | "MH" | "MK" | "ML" | "MM" | "MN" | "MO" | "MP" | "MQ" | "MR" | "MS" | "MT" | "MU" | "MV" | "MW" | "MX" | "MY" | "MZ" | "NA" | "NE" | "NF" | "NG" | "NI" | "NL" | "NO" | "NP" | "NR" | "NU" | "NZ" | "OM" | "PA" | "PE" | "PF" | "PG" | "PH" | "PK" | "PL" | "PN" | "PR" | "PS" | "PT" | "PW" | "PY" | "QA" | "RO" | "RS" | "RU" | "RW" | "SA" | "SB" | "SC" | "SE" | "SG" | "SI" | "SK" | "SL" | "SM" | "SN" | "SO" | "SR" | "SS" | "ST" | "SV" | "SX" | "SY" | "SZ" | "TC" | "TD" | "TG" | "TH" | "TJ" | "TK" | "TL" | "TM" | "TN" | "TO" | "TR" | "TT" | "TV" | "TW" | "TZ" | "UA" | "UG" | "US" | "UY" | "UZ" | "VC" | "VE" | "VG" | "VI" | "VN" | "VU" | "WS" | "YE" | "ZA" | "ZM" | "ZW";
+export declare function getNetworkName(str: Network | string): string;
+export declare function getNetworkIcon(str: Network | string): IconType;
+export declare function getAssetCode(str: OnRampAsset | string): string;
+export declare function getAssetName(str: OnRampAsset | string): string;
+export declare function getAssetIcon(str: OnRampAsset | string): "key" | "phone" | "farcaster" | "telegram" | "discord" | "x" | "search" | "wallet" | "cosmos" | "solana" | "para" | "walletConnect" | "close" | "copy" | "safe" | "stripeBrand" | "alertCircle" | "alertTriangle" | "alignVerticalCenter" | "angelListBrand" | "angelList" | "appleBrand" | "apple" | "arbitrumBrand" | "arrowCircleBrokenDownLeft" | "arrowCircleDownFilled" | "arrowCircleDown" | "arrowNarrow" | "arrow" | "asterisk" | "backpack" | "backupKit" | "bank" | "baseBrand" | "beraBrand" | "brush" | "celoBrand" | "checkCircleFilled" | "checkCircle" | "checkSquare" | "check" | "chevronDown" | "chevronRight" | "chevronSelectorVertical" | "chevronUp" | "clock" | "clubhouseBrand" | "clubhouse" | "code" | "coinbase" | "copy07" | "cosmosCircle" | "cosmostation" | "creditCard02" | "creditCard" | "cube03" | "cubeOutline" | "cube" | "currencyDollar" | "decentBrand" | "decent" | "dell" | "discordBrand" | "dot" | "dotsSquare" | "dots" | "downloadCloud" | "download" | "dribbbleBrand" | "dribbble" | "earth" | "edit02" | "emptyCircle" | "ethCircle" | "ethereum" | "eyeOff" | "eye" | "facebookBrand" | "facebook" | "farcasterBrand" | "figmaBrand" | "figma" | "file" | "folder" | "githubBrand" | "github" | "globe" | "glow" | "googleBrand" | "google" | "gridDots" | "haha" | "helpCircle" | "heroAlertCircle" | "heroCheckmarkCapsule" | "heroCheckmark" | "heroEmail" | "heroExternalConnection" | "heroLock" | "heroPasskey" | "heroPhone" | "heroPlusCircleCapsule" | "heroPlusCircle" | "heroWallet" | "home" | "hp" | "image" | "infoCircle" | "instagramBrand" | "instagram" | "keplr" | "laptop" | "leap" | "lenovo" | "lg" | "lightning01" | "lightning" | "linkExternal" | "linkedinBrand" | "linkedin" | "lockKeyholeCircle" | "logOut" | "mail" | "menu" | "metamask" | "monitor" | "moonpayBrand" | "moreLoginOptions" | "motorola" | "nobleBrand" | "okx" | "optimismBrand" | "paraArrow" | "paraBlackBg" | "paraBrand" | "paraIconBrand" | "paraIconQr" | "paraIcon" | "paraLogo" | "paraRingsDark" | "paraRings" | "passcode" | "phantom" | "pintrestBrand" | "pintrest" | "plusCircle" | "plus" | "polygonBrand" | "polygon" | "puzzlePiece" | "qrCode02" | "qrCode" | "rabby" | "rainbow" | "rampNetworkBrand" | "rampNetwork" | "redditBrand" | "reddit" | "refresh" | "samsung" | "send" | "settings" | "share" | "shield" | "signalBrand" | "signal" | "sliders" | "snapchatBrand" | "snapchat" | "solanaCircle" | "solflare" | "spacingHeight" | "star04Filled" | "star05" | "stars01Filled" | "stars02" | "stars" | "stopSquare" | "telegramBrand" | "tetherBrand" | "tikTokBrand" | "tikTok" | "trash" | "tumblrBrand" | "tumblr" | "twitterBrand" | "twitter" | "usdcBrand" | "user01" | "userCircle" | "userPlus" | "user" | "valora" | "wallet02" | "youtubeBrand" | "youtube" | "zerion" | "AD" | "AE" | "AF" | "AG" | "AI" | "AL" | "AM" | "AO" | "AR" | "AS" | "AT" | "AU" | "AW" | "AX" | "AZ" | "BA" | "BB" | "BD" | "BE" | "BF" | "BG" | "BH" | "BI" | "BJ" | "BL" | "BM" | "BN" | "BO" | "BQ" | "BQ2" | "BQ3" | "BR" | "BS" | "BT" | "BW" | "BY" | "BZ" | "CA" | "CC" | "CD" | "CD2" | "CF" | "CH" | "CK" | "CL" | "CM" | "CN" | "CO" | "CR" | "CU" | "CW" | "CX" | "CY" | "CZ" | "DE" | "DJ" | "DK" | "DM" | "DO" | "DS" | "DZ" | "EC" | "EE" | "EG" | "EH" | "ER" | "ES" | "ET" | "FI" | "FJ" | "FK" | "FM" | "FO" | "FR" | "GA" | "GB2" | "GB" | "GD" | "GE" | "GG" | "GH" | "GI" | "GL" | "GM" | "GN" | "GQ" | "GR" | "GT" | "GU" | "GW" | "GY" | "HK" | "HN" | "HR" | "HT" | "HU" | "ID" | "IE" | "IL" | "IM" | "IN" | "IO" | "IQ" | "IR" | "IS" | "IT" | "JE" | "JM" | "JO" | "JP" | "KE" | "KG" | "KH" | "KI" | "KM" | "KN" | "KP" | "KR" | "KW" | "KY" | "KZ" | "LA" | "LB" | "LC" | "LI" | "LK" | "LR" | "LS" | "LT" | "LU" | "LV" | "LY" | "MA" | "MC" | "MD" | "ME" | "MG" | "MH" | "MK" | "ML" | "MM" | "MN" | "MO" | "MP" | "MQ" | "MR" | "MS" | "MT" | "MU" | "MV" | "MW" | "MX" | "MY" | "MZ" | "NA" | "NE" | "NF" | "NG" | "NI" | "NL" | "NO" | "NP" | "NR" | "NU" | "NZ" | "OM" | "PA" | "PE" | "PF" | "PG" | "PH" | "PK" | "PL" | "PN" | "PR" | "PS" | "PT" | "PW" | "PY" | "QA" | "RO" | "RS" | "RU" | "RW" | "SA" | "SB" | "SC" | "SE" | "SG" | "SI" | "SK" | "SL" | "SM" | "SN" | "SO" | "SR" | "SS" | "ST" | "SV" | "SX" | "SY" | "SZ" | "TC" | "TD" | "TG" | "TH" | "TJ" | "TK" | "TL" | "TM" | "TN" | "TO" | "TR" | "TT" | "TV" | "TW" | "TZ" | "UA" | "UG" | "US" | "UY" | "UZ" | "VC" | "VE" | "VG" | "VI" | "VN" | "VU" | "WS" | "YE" | "ZA" | "ZM" | "ZW";
 export declare const MOBILE_SIZE = 480;
 export declare const NETWORK_NOT_SUPPORTED_ERROR = "network not supported";
 export declare const EMAIL_REGEX: RegExp;