@getpara/react-sdk-lite 2.0.0-alpha.52 → 2.0.0-alpha.54

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

@@ -2,30 +2,53 @@
 import "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { safeStyled } from "@getpara/react-common";
-import { HeroSpinner } from "@getpara/react-common";
 import { CpslSpinner } from "@getpara/react-components";
 import { useTelegramLogin } from "../../hooks/useTelegramLogin.js";
+import { useEffect, useState } from "react";
 import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
-import { AccountTypeIcon } from "../common.js";
 import { useModalStore } from "../../stores/index.js";
+import { getPortalBaseURL } from "@getpara/web-sdk";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 function TelegramOAuthStep() {
   const { verifyTelegramStatus, verifyTelegram } = useAuthActions();
-  const { url, status, isLoaded, setIsLoaded } = useTelegramLogin({
+  const { url, isLoaded, setIsLoaded } = useTelegramLogin({
     isActive: true,
     status: verifyTelegramStatus,
-    onSubmit: verifyTelegram
+    onSubmit: verifyTelegram,
+    isLinking: false
   });
-  const isError = status === "error", isPending = status === "pending";
+  const refs = useModalStore((state) => state.refs);
+  const para = useInternalClient();
+  const [height, setHeight] = useState(0);
+  useEffect(() => {
+    const handleMessage = (event) => {
+      if (!url) {
+        return;
+      }
+      const portalBase = getPortalBaseURL(para.ctx, true);
+      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: [
-    /* @__PURE__ */ jsx(HeroContainer, { children: /* @__PURE__ */ jsx(
-      HeroSpinner,
+    url && /* @__PURE__ */ jsx(
+      IFrame,
       {
-        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
+        ref: refs.telegramIFrame,
+        style: { display: isLoaded ? "block" : "none", height },
+        src: url,
+        onLoad: () => setIsLoaded(true)
       }
-    ) }),
-    /* @__PURE__ */ jsx(TelegramIFrame, { url, isLoaded, setIsLoaded, isVisible: isLoaded })
+    ),
+    (!url || !isLoaded) && /* @__PURE__ */ jsx(CpslSpinner, {})
   ] });
 }
 function TelegramIFrame({
@@ -56,13 +79,6 @@ const Container = safeStyled.div`
   justify-content: center;
   width: 100%;
 `;
-const HeroContainer = safeStyled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  flex: 1;
-`;
 const IFrame = safeStyled.iframe`
   width: 100%;
   height: 52px;

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

@@ -1,5 +1,5 @@
 import { CpslIcon, CpslInput, CpslText, CpslTileButton } from '@getpara/react-components';
-import { Network, OnRampAsset, TExternalWallet, TLinkedAccountType, TWalletType } from '@getpara/web-sdk';
+import { TExternalWallet, TLinkedAccountType, TNetwork, TOnRampAsset, 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: OnRampAsset;
+    asset: TOnRampAsset;
     size?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function NetworkIcon({ network, size }: {
-    network?: Network;
+    network?: TNetwork;
     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 { Network, OnRampAsset, OnRampMethod, OnRampProvider, TWalletType } from '@getpara/core-sdk';
+import { TNetwork, TOnRampAsset, 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<Network, DisplayMetadata>;
+type Networks = Record<TNetwork, DisplayMetadata>;
 export declare const WALLET_TYPES_METADATA: Record<TWalletType, DisplayMetadata>;
 export declare const NETWORKS: Networks;
-export declare const ON_RAMP_ASSETS: Record<OnRampAsset, {
+export declare const ON_RAMP_ASSETS: Record<TOnRampAsset, {
     name: string;
     code: string;
     icon: IconType;
     isCircular?: boolean;
     isDark?: boolean;
 }>;
-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 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 const MOBILE_SIZE = 480;
 export declare const NETWORK_NOT_SUPPORTED_ERROR = "network not supported";
 export declare const EMAIL_REGEX: RegExp;

package/dist/modal/constants/constants.js

@@ -3,7 +3,7 @@ import {
   __spreadProps,
   __spreadValues
 } from "../../chunk-MMUBH76A.js";
-import { Network, OnRampAsset, OnRampMethod, OnRampProvider } from "@getpara/core-sdk";
+import { OnRampMethod, OnRampProvider } from "@getpara/core-sdk";
 const PARA_CONNECT = "https://connect.getpara.com/";
 const PARA_TERMS_AND_CONDITIONS = "https://getpara.com/terms";
 const ON_RAMP_PROVIDERS = {
@@ -48,35 +48,35 @@ const WALLET_TYPES_METADATA = {
   COSMOS: { name: "Cosmos", icon: "cosmos", isCircular: true, isDark: true }
 };
 const NETWORKS = Object.entries({
-  [Network.ETHEREUM]: { name: "Ethereum", icon: "ethereum" },
-  [Network.SEPOLIA]: { name: "Sepolia", icon: "ethereum" },
-  [Network.ARBITRUM]: { name: "Arbitrum", icon: "arbitrumBrand" },
-  [Network.BASE]: { name: "Base", icon: "baseBrand" },
-  [Network.OPTIMISM]: { name: "Optimism", icon: "optimismBrand" },
-  [Network.POLYGON]: { name: "Polygon", icon: "polygonBrand" },
-  [Network.SOLANA]: { name: "Solana", icon: "solana" },
-  [Network.COSMOS]: { name: "Cosmos", icon: "cosmos" },
-  [Network.CELO]: { name: "Celo", icon: "celoBrand" },
-  [Network.SOLANA_DEVNET]: { name: "Solana Devnet", icon: "solana" },
-  [Network.NOBLE]: { name: "Noble", icon: "nobleBrand" },
-  [Network.BERACHAIN]: { name: "Berachain", icon: "beraBrand" }
+  ["ETHEREUM"]: { name: "Ethereum", icon: "ethereum" },
+  ["SEPOLIA"]: { name: "Sepolia", icon: "ethereum" },
+  ["ARBITRUM"]: { name: "Arbitrum", icon: "arbitrumBrand" },
+  ["BASE"]: { name: "Base", icon: "baseBrand" },
+  ["OPTIMISM"]: { name: "Optimism", icon: "optimismBrand" },
+  ["POLYGON"]: { name: "Polygon", icon: "polygonBrand" },
+  ["SOLANA"]: { name: "Solana", icon: "solana" },
+  ["COSMOS"]: { name: "Cosmos", icon: "cosmos" },
+  ["CELO"]: { name: "Celo", icon: "celoBrand" },
+  ["SOLANA_DEVNET"]: { name: "Solana Devnet", icon: "solana" },
+  ["NOBLE"]: { name: "Noble", icon: "nobleBrand" },
+  ["BERACHAIN"]: { name: "Berachain", icon: "beraBrand" }
 }).reduce((acc, [key, entry]) => {
   return __spreadProps(__spreadValues({}, acc), {
     [key]: __spreadValues(__spreadValues({}, entry), ICON_TYPES[entry.icon])
   });
 }, {});
 const ON_RAMP_ASSETS = Object.entries({
-  [OnRampAsset.ETHEREUM]: { name: "Ethereum", code: "ETH", icon: "ethereum" },
-  [OnRampAsset.USDC]: { name: "USD Coin", code: "USDC", icon: "usdcBrand" },
-  [OnRampAsset.POLYGON]: { name: "Polygon", code: "POL", icon: "polygonBrand" },
-  [OnRampAsset.SOLANA]: { name: "Solana", code: "SOL", icon: "solana" },
-  [OnRampAsset.ATOM]: { name: "Atom", code: "ATOM", icon: "cosmos" },
-  [OnRampAsset.CELO]: { name: "Celo", code: "CELO", icon: "celoBrand" },
-  [OnRampAsset.TETHER]: { name: "Tether", code: "USDT", icon: "tetherBrand" },
-  [OnRampAsset.CUSD]: { name: "Celo Dollar", code: "CUSD", icon: "celoBrand" },
-  [OnRampAsset.CEUR]: { name: "Celo Euro", code: "CEUR", icon: "celoBrand" },
-  [OnRampAsset.CREAL]: { name: "Celo Real", code: "CREAL", icon: "celoBrand" },
-  [OnRampAsset.BERA]: { name: "Berachain", code: "BERA", icon: "beraBrand" }
+  ["ETHEREUM"]: { name: "Ethereum", code: "ETH", icon: "ethereum" },
+  ["USDC"]: { name: "USD Coin", code: "USDC", icon: "usdcBrand" },
+  ["POLYGON"]: { name: "Polygon", code: "POL", icon: "polygonBrand" },
+  ["SOLANA"]: { name: "Solana", code: "SOL", icon: "solana" },
+  ["ATOM"]: { name: "Atom", code: "ATOM", icon: "cosmos" },
+  ["CELO"]: { name: "Celo", code: "CELO", icon: "celoBrand" },
+  ["TETHER"]: { name: "Tether", code: "USDT", icon: "tetherBrand" },
+  ["CUSD"]: { name: "Celo Dollar", code: "CUSD", icon: "celoBrand" },
+  ["CEUR"]: { name: "Celo Euro", code: "CEUR", icon: "celoBrand" },
+  ["CREAL"]: { name: "Celo Real", code: "CREAL", icon: "celoBrand" },
+  ["BERA"]: { name: "Berachain", code: "BERA", icon: "beraBrand" }
 }).reduce((acc, [key, entry]) => {
   return __spreadProps(__spreadValues({}, acc), {
     [key]: __spreadValues(__spreadValues({}, entry), ICON_TYPES[entry.icon])
@@ -126,7 +126,7 @@ const BODY_MOTION_VARIANTS = {
 const BODY_TRANSITION = {
   duration: 0.2
 };
-const SDK_VERSION = "2.0.0-alpha.52";
+const SDK_VERSION = "2.0.0-alpha.54";
 export {
   BODY_MOTION_VARIANTS,
   BODY_TRANSITION,

package/dist/modal/hooks/useFarcasterLogin.d.ts

@@ -0,0 +1,9 @@
+import { MutationStatus } from '@tanstack/react-query';
+export declare const useFarcasterLogin: ({ isActive, }?: {
+    isActive?: boolean;
+}) => {
+    url: string | undefined;
+    isLoaded: boolean;
+    setIsLoaded: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    status: MutationStatus;
+};

package/dist/modal/hooks/useFarcasterLogin.js

@@ -0,0 +1,70 @@
+"use client";
+import {
+  __async
+} from "../../chunk-MMUBH76A.js";
+import { useEffect, useState } from "react";
+import { useInternalClient } from "../../provider/hooks/utils/useInternalClient.js";
+import { useModalStore } from "../stores/index.js";
+import { useAuthActions } from "../../provider/providers/AuthProvider.js";
+const useFarcasterLogin = ({
+  isActive = false
+} = {}) => {
+  const para = useInternalClient();
+  const refs = useModalStore((state) => state.refs);
+  const { verifyFarcasterStatus, verifyFarcaster } = useAuthActions();
+  const [url, setUrl] = useState();
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [msgStatus, setMsgStatus] = useState("idle");
+  const status = msgStatus === "success" ? verifyFarcasterStatus : msgStatus;
+  useEffect(() => {
+    const setup = () => __async(void 0, null, function* () {
+      if (!url) {
+        yield para.logout();
+        yield para.touchSession(true);
+        para.constructPortalUrl("loginFarcaster").then(setUrl);
+      }
+    });
+    if (isActive) {
+      setup();
+    }
+  }, [isActive, url]);
+  useEffect(() => {
+    const updateState = (event) => __async(void 0, null, function* () {
+      var _a, _b;
+      switch (event.data.type) {
+        case "FARCASTER_LOGIN":
+          setMsgStatus("pending");
+          break;
+        case "FARCASTER_FAILED":
+          setMsgStatus("error");
+          break;
+        case "FARCASTER_SUCCESS":
+          setMsgStatus("success");
+          if (!!event.data.payload) {
+            const authObject = event.data.payload;
+            try {
+              yield verifyFarcaster(authObject);
+            } catch (e) {
+              (_b = (_a = refs.telegramIFrame.current) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.postMessage({ type: "FARCASTER_RETRY" }, "*");
+            }
+          }
+          break;
+      }
+    });
+    if (isActive) {
+      window == null ? void 0 : window.addEventListener("message", updateState, false);
+    }
+    return () => {
+      window == null ? void 0 : window.removeEventListener("message", updateState, false);
+    };
+  }, [isActive]);
+  return {
+    url,
+    isLoaded,
+    setIsLoaded,
+    status
+  };
+};
+export {
+  useFarcasterLogin
+};

package/dist/modal/hooks/useTelegramLogin.d.ts

@@ -1,9 +1,10 @@
-import { TelegramAuthResponse } from '@getpara/user-management-client';
+import { TelegramAuthResponse, VerifyThirdPartyAuth } from '@getpara/user-management-client';
 import { MutationStatus } from '@tanstack/react-query';
-export declare const useTelegramLogin: ({ isActive, onSubmit, status: propsStatus, }?: {
+export declare const useTelegramLogin: ({ isActive, onSubmit, status: propsStatus, isLinking, }?: {
     isActive?: boolean;
-    onSubmit?: (_: TelegramAuthResponse) => void;
+    onSubmit?: (_: VerifyThirdPartyAuth | TelegramAuthResponse) => void;
     status?: MutationStatus;
+    isLinking?: boolean;
 }) => {
     url: string | undefined;
     isLoaded: boolean;

package/dist/modal/hooks/useTelegramLogin.js

@@ -8,7 +8,8 @@ import { useModalStore } from "../stores/index.js";
 const useTelegramLogin = ({
   isActive = false,
   onSubmit,
-  status: propsStatus
+  status: propsStatus,
+  isLinking
 } = {}) => {
   const para = useInternalClient();
   const refs = useModalStore((state) => state.refs);
@@ -17,10 +18,17 @@ const useTelegramLogin = ({
   const [msgStatus, setMsgStatus] = useState("idle");
   const status = msgStatus === "success" ? propsStatus : msgStatus;
   useEffect(() => {
-    if (isActive) {
+    const setup = () => __async(void 0, null, function* () {
       if (!url) {
-        para.constructPortalUrl("telegramLogin").then(setUrl);
+        if (!isLinking) {
+          yield para.logout();
+          yield para.touchSession(true);
+        }
+        para.constructPortalUrl(!isLinking ? "telegramLoginVerify" : "telegramLogin").then(setUrl);
       }
+    });
+    if (isActive) {
+      setup();
     }
   }, [isActive, url]);
   useEffect(() => {

package/dist/modal/stores/modal/actions.js

@@ -110,6 +110,7 @@ const getActions = (set, get) => ({
   setSelectedExternalWallet: (selectedExternalWallet) => set({ selectedExternalWallet }),
   setIsExternalWalletConnecting: (isExternalWalletConnecting) => set({ isExternalWalletConnecting }),
   setExternalWalletError: (externalWalletError) => set({ externalWalletError }),
+  setModalError: (modalError) => set({ modalError }),
   setIsUsingMobileConnector: (isUsingMobileConnector) => set({ isUsingMobileConnector }),
   setStepDirection: (stepDirection) => set({ stepDirection }),
   setFarcasterConnectUri: (farcasterConnectUri) => set({ farcasterConnectUri }),

package/dist/modal/stores/modal/useModalStore.d.ts

@@ -37,6 +37,7 @@ interface ModalState {
     isUsingMobileConnector?: boolean;
     isExternalWalletConnecting?: boolean;
     externalWalletError?: string[];
+    modalError?: string;
     activeWallet: ActiveWallet | undefined;
     farcasterConnectUri: string | undefined;
     twoFactorStatus: Setup2faResponse | undefined;
@@ -85,6 +86,7 @@ export interface ModalActions {
     setIsUsingMobileConnector: (isUsingMobileConnector?: boolean) => void;
     setIsExternalWalletConnecting: (isExternalWalletConnecting: boolean) => void;
     setExternalWalletError: (externalWalletError?: string[]) => void;
+    setModalError: (modalError?: string) => void;
     setStepDirection: (stepDirection: 1 | -1) => void;
     setFarcasterConnectUri: (_: string | undefined) => void;
     setTwoFactorStatus: (twoFactorStatus?: Setup2faResponse) => void;

package/dist/modal/stores/modal/useModalStore.js

@@ -30,6 +30,7 @@ const DEFAULT_MODAL_STATE = {
   guestAddFundsTab: void 0,
   isExternalWalletConnecting: false,
   externalWalletError: void 0,
+  modalError: void 0,
   activeWallet: [void 0, void 0],
   farcasterConnectUri: void 0,
   twoFactorStatus: void 0,

package/dist/modal/types/modalProps.d.ts

@@ -1,4 +1,4 @@
-import ParaWeb, { CurrentWalletIds, SupportedAccountLinks, TOAuthMethod } from '@getpara/web-sdk';
+import ParaWeb, { BalancesConfig, CurrentWalletIds, SupportedAccountLinks, TOAuthMethod } from '@getpara/web-sdk';
 import { Theme } from '@getpara/react-components';
 import { OnModalStepChangeValue } from '../stores/index.js';
 import { ModalStep, ModalStepProp } from '../utils/steps.js';
@@ -126,4 +126,8 @@ export interface ParaModalProps {
      * If not provided, will default to your Developer Portal configuration or to all available account types.
      */
     supportedAccountLinks?: SupportedAccountLinks;
+    /**
+     * Configuration for the profile balances displayed in the Para Modal.
+     */
+    balances?: BalancesConfig;
 }

package/dist/modal/utils/renderTextWithLinks.d.ts

@@ -0,0 +1,2 @@
+import { ReactElement } from 'react';
+export declare const renderTextWithLinks: (text: string) => ReactElement[];

package/dist/modal/utils/renderTextWithLinks.js

@@ -0,0 +1,34 @@
+"use client";
+import "../../chunk-MMUBH76A.js";
+import { jsx } from "react/jsx-runtime";
+import { Fragment } from "react";
+const renderTextWithLinks = (text) => {
+  if (!text) return [/* @__PURE__ */ jsx(Fragment, { children: "" }, 0)];
+  const linkStyle = { color: "inherit", textDecoration: "underline", fontWeight: "500" };
+  const combinedRegex = /(\[([^\]]+)\]\((https?:\/\/[^)]+)\))|(https?:\/\/[^\s]+)/g;
+  const parts = [];
+  let lastIndex = 0;
+  let match;
+  while ((match = combinedRegex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(/* @__PURE__ */ jsx(Fragment, { children: text.slice(lastIndex, match.index) }, parts.length));
+    }
+    if (match[1]) {
+      parts.push(
+        /* @__PURE__ */ jsx("a", { href: match[3], target: "_blank", rel: "noopener noreferrer", style: linkStyle, children: match[2] }, parts.length)
+      );
+    } else if (match[4]) {
+      parts.push(
+        /* @__PURE__ */ jsx("a", { href: match[4], target: "_blank", rel: "noopener noreferrer", style: linkStyle, children: match[4] }, parts.length)
+      );
+    }
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < text.length) {
+    parts.push(/* @__PURE__ */ jsx(Fragment, { children: text.slice(lastIndex) }, parts.length));
+  }
+  return parts.length ? parts : [/* @__PURE__ */ jsx(Fragment, { children: text }, 0)];
+};
+export {
+  renderTextWithLinks
+};

package/dist/modal/utils/steps.d.ts

@@ -39,7 +39,8 @@ export declare enum ModalStep {
     ACCOUNT_PROFILE_ADD = "ACCOUNT_PROFILE_ADD",
     ACCOUNT_PROFILE_LIST = "ACCOUNT_PROFILE_LIST",
     ACCOUNT_PROFILE_REMOVE = "ACCOUNT_PROFILE_REMOVE",
-    AWAITING_IFRAME = "AWAITING_IFRAME"
+    AWAITING_ACCOUNT = "AWAITING_ACCOUNT",
+    OTP = "OTP"
 }
 export type ModalStepPropU = keyof typeof ModalStep | ModalStep;
 export type ModalStepPropL = Lowercase<ModalStepPropU>;
@@ -91,7 +92,8 @@ declare enum SignUpModalStep {
     ADD_FUNDS_AWAITING = "ADD_FUNDS_AWAITING",
     ADD_FUNDS_SUCCESS = "ADD_FUNDS_SUCCESS",
     ADD_FUNDS_FAILURE = "ADD_FUNDS_FAILURE",
-    AWAITING_IFRAME = "AWAITING_IFRAME"
+    AWAITING_ACCOUNT = "AWAITING_ACCOUNT",
+    OTP = "OTP"
 }
 export declare const SignUpPreviousStep: {
     [key in SignUpModalStep]: ModalStep | undefined;
@@ -125,7 +127,8 @@ declare enum LoginModalStep {
     ADD_FUNDS_AWAITING = "ADD_FUNDS_AWAITING",
     ADD_FUNDS_SUCCESS = "ADD_FUNDS_SUCCESS",
     ADD_FUNDS_FAILURE = "ADD_FUNDS_FAILURE",
-    AWAITING_IFRAME = "AWAITING_IFRAME"
+    AWAITING_ACCOUNT = "AWAITING_ACCOUNT",
+    OTP = "OTP"
 }
 export declare const LoginPreviousStep: {
     [key in LoginModalStep]: ModalStep | undefined;