@getpara/react-sdk-lite 2.0.0-dev.7 → 2.0.0

package/dist/modal/components/WalletSelectOld/WalletSelectOld.js

@@ -1,13 +1,12 @@
 "use client";
 import "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 import { useDropdownPosition } from "../AuthInput/hooks/useDropdownPosition.js";
-import { safeStyled, useCopyToClipboard } from "@getpara/react-common";
+import { MOBILE_SIZE, safeStyled, useCopyToClipboard, WalletTypeIcon as WalletTypeIconBase } from "@getpara/react-common";
 import { useAccount, useWallet, useWalletState } from "../../../provider/index.js";
 import { CpslButton, CpslIcon, CpslSelect, CpslSelectItem, CpslText } from "@getpara/react-components";
-import * as common from "../common.js";
 const getValue = (id, type) => {
   return id && type ? `${id}~${type}` : void 0;
 };
@@ -46,13 +45,21 @@ const Wallet = ({
     )
   ] });
 };
-const WalletSelectOld = () => {
+const WalletSelectOld = ({
+  style,
+  noTitle,
+  types,
+  isEmbeddedOnly
+}) => {
   const containerRef = useRef(null);
   const { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize } = useDropdownPosition(containerRef);
   const { setSelectedWallet } = useWalletState();
   const { data: activeWallet } = useWallet();
   const { embedded } = useAccount();
-  const availableWallets = embedded == null ? void 0 : embedded.wallets;
+  const availableWallets = useMemo(() => {
+    var _a;
+    return (_a = embedded == null ? void 0 : embedded.wallets) == null ? void 0 : _a.filter((wallet) => !isEmbeddedOnly || !wallet.isExternal);
+  }, [embedded, isEmbeddedOnly]);
   const isMultiWallet = availableWallets && availableWallets.length > 1;
   const ActiveWalletNode = activeWallet ? /* @__PURE__ */ jsx(Wallet, { withCopy: true, wallet: activeWallet, slot: "selected-item", withIcon: true }) : null;
   useEffect(() => {
@@ -60,9 +67,9 @@ const WalletSelectOld = () => {
       resize();
     }
   }, [activeWallet, availableWallets, dropdownMaxHeight]);
-  return /* @__PURE__ */ jsxs(Container, { children: [
-    isMultiWallet && /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", color: "secondary", weight: "semiBold", children: "Select Wallet" }),
-    /* @__PURE__ */ jsx(SelectContainer, { ref: containerRef, id: "addressInputContainer", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(Container, { style, children: [
+    isMultiWallet && !noTitle && /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", color: "secondary", weight: "semiBold", children: "Select Wallet" }),
+    /* @__PURE__ */ jsx(SelectContainer, { ref: containerRef, id: "addressInputContainerOld", style: { width: "100%" }, children: /* @__PURE__ */ jsxs(
       Select,
       {
         selectedValue: getValue(activeWallet == null ? void 0 : activeWallet.id, activeWallet == null ? void 0 : activeWallet.type),
@@ -72,16 +79,17 @@ const WalletSelectOld = () => {
         },
         showFormattedSelectedItem: true,
         placeholder: "Choose wallet...",
-        anchorElId: "addressInputContainer",
+        anchorElId: "addressInputContainerOld",
         dropdownMaxHeight,
         $width: dropdownWidth != null ? dropdownWidth : 0,
-        $top: (mobileAnchor != null ? mobileAnchor : 0) + 16 + 1,
+        $top: (mobileAnchor != null ? mobileAnchor : 0) + 220 + 1,
         selectedItemVariant: "bodyXS",
         icon: isMultiWallet ? "chevronUp" : null,
         disabled: !isMultiWallet,
+        style: { width: "100%" },
         children: [
           activeWallet && ActiveWalletNode,
-          (availableWallets || []).map((wallet) => {
+          (availableWallets || []).filter((wallet) => !types || !wallet.type || types.includes(wallet.type)).map((wallet) => {
             const key = getValue(wallet.id, wallet.type);
             return /* @__PURE__ */ jsx(SelectItem, { slot: "items", value: key, children: /* @__PURE__ */ jsx(Wallet, { wallet, withIcon: true }) }, key);
           })
@@ -115,7 +123,20 @@ const Select = safeStyled(CpslSelect)`
 
   &::part(dropdown) {
     min-width: ${({ $width }) => `${$width - 2}px`};
+  } 
+
+  &::part(popover) {
+      /* Have to adjust the top of the popover here since we're using a transform on the modal which causes fixed position items to not be relative to the viewport */
+      @media (max-width: ${MOBILE_SIZE}px) {
+        top: ${({ $top }) => $top ? `${$top}px` : "0px"};
+        bottom: 16px;
+      }
+      cpsl-auth-modal.force-mobile-media & {
+        top: ${({ $top }) => $top ? `${$top}px` : "0px"};
+        bottom: 16px;
+      }
   }
+  
 
   &::part(icon) {
     --icon-color: var(--cpsl-color-text-primary);
@@ -139,7 +160,7 @@ const SelectContainer = safeStyled.div`
   border-radius: var(--cpsl-border-radius-tile-button);
   background-color: var(--cpsl-color-background-4);
 `;
-const WalletTypeIcon = safeStyled(common.WalletTypeIcon)`
+const WalletTypeIcon = safeStyled(WalletTypeIconBase)`
   --border: 1px solid var(--cpsl-color-background-8);
   --background: var(--cpsl-color-background-0);
   --border-radius: 4px;

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 { CpslInput, CpslText, CpslTileButton } from '@getpara/react-components';
+import { TLinkedAccountType, TNetwork, TOnRampAsset } 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;
@@ -10,7 +10,7 @@ export declare const FullWidthFilledDisabledInput: typeof CpslInput;
 export declare const CenteredText: typeof CpslText;
 export declare const InnerStepContainer: 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 StepContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => 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<HTMLDivElement> | null | undefined;
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => 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]) | null | undefined;
 }, {
     $wide?: boolean;
 }>> & string;
@@ -30,18 +30,13 @@ 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 }: {
-    className?: string;
-    walletType: TWalletType;
-    externalWallet?: TExternalWallet | string;
-} & Parameters<typeof CpslIcon>[0]): import("react/jsx-runtime").JSX.Element;
 export declare const ErrorContainer: 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 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;
@@ -64,3 +59,6 @@ export declare function GradientScroll({ height, gap, children }: PropsWithChild
 export declare const HeroGenericIcon: ({ accountType }: {
     accountType: "EMAIL" | "PHONE";
 }) => import("react/jsx-runtime").JSX.Element;
+export * from './SearchableButtonList.js';
+export * from './QuantityInput.js';
+export { AnimatedHeightWrapper } from './Body/AnimatedHeightWrapper.js';

package/dist/modal/components/common.js

@@ -6,8 +6,7 @@ import {
 } from "../../chunk-MMUBH76A.js";
 import { jsx } from "react/jsx-runtime";
 import { CpslIcon, CpslInput, CpslSelect, CpslSelectItem, CpslText, CpslTileButton } from "@getpara/react-components";
-import { ACCOUNT_TYPES, safeStyled } from "@getpara/react-common";
-import { MOBILE_SIZE, NETWORKS, ON_RAMP_ASSETS, WALLET_TYPES_METADATA } from "../constants/constants.js";
+import { ACCOUNT_TYPES, safeStyled, MOBILE_SIZE, NETWORKS, ON_RAMP_ASSETS } from "@getpara/react-common";
 import { useStore } from "../../provider/stores/useStore.js";
 import { useEffect, useRef, useState } from "react";
 const SpinnerContainer = safeStyled.div`
@@ -167,37 +166,6 @@ function NetworkIcon({ network, size }) {
     }
   );
 }
-function WalletTypeIcon(_c) {
-  var _d = _c, {
-    className,
-    walletType,
-    externalWallet
-  } = _d, props = __objRest(_d, [
-    "className",
-    "walletType",
-    "externalWallet"
-  ]);
-  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 = (externalWallet ? ACCOUNT_TYPES[externalWallet] : WALLET_TYPES_METADATA[walletType]) || {
-    icon: "wallet02",
-    isDark: true
-  };
-  props.size;
-  return /* @__PURE__ */ jsx(
-    CpslIcon,
-    __spreadProps(__spreadValues({
-      className,
-      icon: data.icon,
-      invert: isDark && data.isDark
-    }, props), {
-      inset: (_a = props.inset) != null ? _a : "10%"
-    })
-  );
-}
 const ErrorContainer = safeStyled.div`
   display: flex;
   align-items: center;
@@ -249,7 +217,7 @@ function GradientScroll({ height, gap, children }) {
   const onScroll = () => {
     if (ref.current) {
       const { scrollTop, scrollHeight, clientHeight } = ref.current;
-      if (height && scrollHeight <= parseInt(height)) {
+      if (scrollHeight <= clientHeight) {
         setIsNotAtTop(false);
         setIsNotAtBottom(false);
       } else {
@@ -260,6 +228,15 @@ function GradientScroll({ height, gap, children }) {
   };
   useEffect(() => {
     onScroll();
+    const resizeObserver = new ResizeObserver(() => {
+      onScroll();
+    });
+    if (ref.current) {
+      resizeObserver.observe(ref.current);
+    }
+    return () => {
+      resizeObserver.disconnect();
+    };
   }, []);
   return /* @__PURE__ */ jsx(
     GradientScrollContainer,
@@ -299,8 +276,12 @@ const Avatar = safeStyled.div`
   justify-content: center;
   background-color: var(--cpsl-color-background-8);
 `;
+export * from "./SearchableButtonList.js";
+export * from "./QuantityInput.js";
+import { AnimatedHeightWrapper } from "./Body/AnimatedHeightWrapper.js";
 export {
   AccountTypeIcon,
+  AnimatedHeightWrapper,
   AssetIcon,
   CenteredText,
   ErrorContainer,
@@ -323,6 +304,5 @@ export {
   QRContainer,
   SpinnerContainer,
   StepContainer,
-  StyledCpslTileButton,
-  WalletTypeIcon
+  StyledCpslTileButton
 };

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

@@ -0,0 +1,4 @@
+export * from './useDebounce.js';
+export * from './useFarcasterLogin.js';
+export * from './useGoBack.js';
+export * from './useTelegramLogin.js';

package/dist/modal/hooks/index.js

@@ -0,0 +1,5 @@
+"use client";
+export * from "./useDebounce.js";
+export * from "./useFarcasterLogin.js";
+export * from "./useGoBack.js";
+export * from "./useTelegramLogin.js";

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

@@ -0,0 +1,4 @@
+/**
+ * Debounce a changing value by the specified delay.
+ */
+export declare function useDebounce<T>(value: T, delay?: number): T;

package/dist/modal/hooks/useDebounce.js

@@ -0,0 +1,16 @@
+"use client";
+import "../../chunk-MMUBH76A.js";
+import { useEffect, useState } from "react";
+function useDebounce(value, delay = 500) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const timer = window.setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => window.clearTimeout(timer);
+  }, [value, delay]);
+  return debouncedValue;
+}
+export {
+  useDebounce
+};

package/dist/modal/hooks/useFarcasterLogin.js

@@ -6,6 +6,7 @@ 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";
+import { validatePortalOrigin } from "../utils/validatePortalOrigin.js";
 const useFarcasterLogin = ({
   isActive = false
 } = {}) => {
@@ -29,8 +30,12 @@ const useFarcasterLogin = ({
     }
   }, [isActive, url]);
   useEffect(() => {
+    if (typeof window === "undefined") return;
     const updateState = (event) => __async(void 0, null, function* () {
       var _a, _b;
+      if (!validatePortalOrigin(event, para.ctx)) {
+        return;
+      }
       switch (event.data.type) {
         case "FARCASTER_LOGIN":
           setMsgStatus("pending");
@@ -55,7 +60,9 @@ const useFarcasterLogin = ({
       window == null ? void 0 : window.addEventListener("message", updateState, false);
     }
     return () => {
-      window == null ? void 0 : window.removeEventListener("message", updateState, false);
+      if (typeof window !== "undefined") {
+        window.removeEventListener("message", updateState, false);
+      }
     };
   }, [isActive]);
   return {

package/dist/modal/hooks/useTelegramLogin.js

@@ -5,6 +5,7 @@ import {
 import { useEffect, useState } from "react";
 import { useInternalClient } from "../../provider/hooks/utils/useInternalClient.js";
 import { useModalStore } from "../stores/index.js";
+import { validatePortalOrigin } from "../utils/validatePortalOrigin.js";
 const useTelegramLogin = ({
   isActive = false,
   onSubmit,
@@ -34,6 +35,9 @@ const useTelegramLogin = ({
   useEffect(() => {
     const updateState = (event) => __async(void 0, null, function* () {
       var _a, _b;
+      if (!validatePortalOrigin(event, para.ctx)) {
+        return;
+      }
       switch (event.data.type) {
         case "TELEGRAM_LOGIN":
           setMsgStatus("pending");

package/dist/modal/index.d.ts

@@ -3,6 +3,6 @@ export type { ParaModalProps, ParaModalHandle, ParaModalTheme } from './types/mo
 export { ModalStep, type ModalStepProp } from './utils/steps.js';
 export { AuthLayout } from './types/modalProps.js';
 export * from './utils/openPopup.js';
-export { ON_RAMP_PROVIDERS, ON_RAMP_ASSETS, NETWORKS, getAssetIcon, getAssetCode, getNetworkIcon, getNetworkName, } from './constants/constants.js';
+export { ON_RAMP_PROVIDERS, ON_RAMP_ASSETS, NETWORKS, getAssetIcon, getAssetCode, getNetworkIcon, getNetworkName, } from '@getpara/react-common';
 export { SaveRecoverySecret } from './components/RecoverySecretStep/RecoverySecretStep.js';
 export * from './utils/validateOnRampConfig.js';

package/dist/modal/index.js

@@ -12,7 +12,7 @@ import {
   getAssetCode,
   getNetworkIcon,
   getNetworkName
-} from "./constants/constants.js";
+} from "@getpara/react-common";
 import { SaveRecoverySecret } from "./components/RecoverySecretStep/RecoverySecretStep.js";
 export * from "./utils/validateOnRampConfig.js";
 export {

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

@@ -22,6 +22,7 @@ const getActions = (set, get) => ({
     const previousStep = get().step;
     const refs = get().refs;
     set({ step });
+    refs.currentStep.current = step;
     onModalStepChange == null ? void 0 : onModalStepChange({ previousStep, currentStep: step, canGoBack: get().hasPreviousStep() });
     if (step === ModalStep.ACCOUNT_MAIN) {
       refs.wasSignedIn.current = true;
@@ -57,6 +58,7 @@ const getActions = (set, get) => ({
         step: prevStep,
         stepDirection: -1
       }, prevStep === ModalStep.AUTH_MAIN && { flow: void 0 }));
+      refs.currentStep.current = prevStep;
       onModalStepChange == null ? void 0 : onModalStepChange({ previousStep: currentStep, currentStep: prevStep, canGoBack: get().hasPreviousStep() });
     }
     (_a = refs.popupWindow.current) == null ? void 0 : _a.close();
@@ -71,7 +73,9 @@ const getActions = (set, get) => ({
     }
     return !!getPreviousStep(flow, currentStep);
   },
-  setFlow: (flow) => set({ flow }),
+  setFlow: (flow) => {
+    set({ flow });
+  },
   isLogin: () => get().flow === "login",
   isAccount: () => get().flow === "account",
   setAuthState: (authState) => {
@@ -110,6 +114,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 }),
@@ -132,7 +137,9 @@ const getActions = (set, get) => ({
   },
   setAuthStepRoute: (authStepRoute) => set({ authStepRoute }),
   setIsPasskeySupported: (isPasskeySupported) => set({ isPasskeySupported }),
-  setAccountLinkOptions: (accountLinkOptions) => set({ accountLinkOptions })
+  setAccountLinkOptions: (accountLinkOptions) => set({ accountLinkOptions }),
+  setProfileWallet: (profileWallet) => set({ profileWallet }),
+  setSendTx: (sendTx) => set({ sendTx })
 });
 export {
   getActions

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

@@ -1,5 +1,6 @@
+import { AvailableWallet } from '@getpara/core-sdk';
 import { ModalStep } from '../../utils/steps.js';
-import { AuthStateLogin, AuthStateSignup, AuthState, AuthStateVerify, OnRampConfig as OnRampConfigBase, OnRampPurchase, TWalletType, Setup2faResponse, SupportedAccountLinks } from '@getpara/web-sdk';
+import { AuthStateLogin, AuthStateSignup, AuthState, AuthStateVerify, OnRampConfig as OnRampConfigBase, OnRampPurchase, TWalletType, Setup2faResponse, SupportedAccountLinks, BroadcastTransactionResult } from '@getpara/web-sdk';
 import { Tab as AddFundsTabType } from '../../components/AddFunds/AddFundsContext.js';
 import { TAuthLayout } from '../../types/modalProps.js';
 import { MutableRefObject } from 'react';
@@ -37,6 +38,7 @@ interface ModalState {
     isUsingMobileConnector?: boolean;
     isExternalWalletConnecting?: boolean;
     externalWalletError?: string[];
+    modalError?: string;
     activeWallet: ActiveWallet | undefined;
     farcasterConnectUri: string | undefined;
     twoFactorStatus: Setup2faResponse | undefined;
@@ -54,9 +56,12 @@ interface ModalState {
         telegramIFrame: MutableRefObject<HTMLIFrameElement | null>;
         wasSignedIn: MutableRefObject<boolean | null>;
         initialFarcasterConnected: MutableRefObject<boolean | null>;
+        iFrame: MutableRefObject<HTMLIFrameElement | null>;
     };
     isPasskeySupported: boolean;
     accountLinkOptions: SupportedAccountLinks;
+    profileWallet?: AvailableWallet;
+    sendTx?: BroadcastTransactionResult;
 }
 export interface ModalActions {
     resetState: () => void;
@@ -85,6 +90,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;
@@ -94,6 +100,8 @@ export interface ModalActions {
     setAuthStepRoute: (_?: ModalStep) => void;
     setIsPasskeySupported: (_: boolean) => void;
     setAccountLinkOptions: (_: SupportedAccountLinks) => void;
+    setProfileWallet: (_?: AvailableWallet) => void;
+    setSendTx: (_?: BroadcastTransactionResult) => void;
 }
 export type ModalStore = ModalState & ModalActions;
 export declare const DEFAULT_MODAL_STATE: Omit<ModalState, 'step' | 'onRampConfig'>;

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,
@@ -43,10 +44,13 @@ const DEFAULT_MODAL_STATE = {
     currentStep: createRef(),
     telegramIFrame: createRef(),
     wasSignedIn: createRef(),
-    initialFarcasterConnected: createRef()
+    initialFarcasterConnected: createRef(),
+    iFrame: createRef()
   },
   isPasskeySupported: true,
-  accountLinkOptions: [...LINKED_ACCOUNT_TYPES]
+  accountLinkOptions: [...LINKED_ACCOUNT_TYPES],
+  profileWallet: void 0,
+  sendTx: void 0
 };
 const useModalStore = create()(
   persist(

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/authInputHelpers.js

@@ -1,6 +1,6 @@
 "use client";
 import "../../chunk-MMUBH76A.js";
-import { EMAIL_REGEX } from "../constants/constants.js";
+import { EMAIL_REGEX } from "@getpara/react-common";
 import { formatPhoneNumber } from "@getpara/web-sdk";
 function isCcMatch(countryCode, option) {
   return countryCode === "+1" ? option.selectedLabel === "US" : option.value === countryCode;

package/dist/modal/utils/countryCodes.js

@@ -3,23 +3,72 @@ import "../../chunk-MMUBH76A.js";
 import { getCountries, getCountryCallingCode } from "libphonenumber-js";
 const excludedCountries = [
   "AC",
+  "AF",
+  "AO",
+  "AZ",
+  "BI",
+  "BD",
+  "BO",
   "CG",
   "CI",
   "CV",
+  "DZ",
+  "ER",
+  "EG",
+  "ET",
+  "GE",
   "GF",
+  "GG",
+  "GH",
   "GP",
+  "ID",
+  "IQ",
+  "JE",
+  "JO",
+  "KG",
+  "KH",
+  "KM",
+  "KW",
+  "KZ",
+  "LA",
+  "LB",
+  "LK",
+  "LS",
+  "LY",
+  "MA",
   "MF",
+  "MG",
+  "MM",
+  "MR",
+  "MZ",
   "NC",
+  "NG",
+  "NP",
+  "OM",
+  "PK",
   "PM",
+  "PS",
   "RE",
+  "RU",
+  "RW",
   "SD",
   "SH",
   "SJ",
+  "SS",
   "TA",
+  "TJ",
+  "TM",
+  "TN",
+  "UG",
+  "UZ",
   "VA",
+  "VN",
   "WF",
   "XK",
-  "YT"
+  "YE",
+  "YT",
+  "ZM",
+  "ZW"
 ];
 const generateCountryCodes = () => {
   const countries = getCountries();

package/dist/modal/utils/getWalletDisplayName.js

@@ -1,6 +1,6 @@
 "use client";
 import "../../chunk-MMUBH76A.js";
-import { WALLET_TYPES_METADATA } from "../constants/constants.js";
+import { WALLET_TYPES_METADATA } from "@getpara/react-common";
 function getWalletDisplayName(para, {
   type,
   isExternal,

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

@@ -1,6 +1,6 @@
 export declare function openPopup({ url, target, type, current, }: {
     url: string;
     target: string;
-    type: 'OAUTH' | 'LOGIN_PASSKEY' | 'CREATE_PASSKEY' | 'TRANSACTION_REVIEW' | 'CREATE_PASSWORD' | 'LOGIN_PASSWORD';
+    type: 'OAUTH' | 'LOGIN_PASSKEY' | 'CREATE_PASSKEY' | 'TRANSACTION_REVIEW' | 'CREATE_PASSWORD' | 'LOGIN_PASSWORD' | 'SWITCH_WALLETS' | 'ADD_CREDENTIAL' | 'LOGIN_EXTERNAL_WALLET';
     current?: Window | null;
 }): Window | null;

package/dist/modal/utils/openPopup.js

@@ -1,5 +1,6 @@
 "use client";
 import "../../chunk-MMUBH76A.js";
+import { isMobile } from "@getpara/web-sdk";
 function openPopup({
   url,
   target,
@@ -17,7 +18,8 @@ function openPopup({
       popUpHeight = 798;
       break;
     }
-    case "LOGIN_PASSKEY": {
+    case "LOGIN_PASSKEY":
+    case "SWITCH_WALLETS": {
       popUpHeight = 798;
       break;
     }
@@ -34,6 +36,8 @@ function openPopup({
       break;
     }
     case "OAUTH":
+    case "ADD_CREDENTIAL":
+    case "LOGIN_EXTERNAL_WALLET":
     default: {
       popUpHeight = 768;
       break;
@@ -47,7 +51,7 @@ function openPopup({
   const top = (height - popUpHeight) / 2 + dualScreenTop;
   const windowFeatures = `toolbar=no, menubar=no, width=${popUpWidth}, 
     height=${popUpHeight}, top=${top}, left=${left}`;
-  let popupWindow = window.open(url, target, windowFeatures);
+  let popupWindow = window.open(url, isMobile() ? "_blank" : target, windowFeatures);
   if (!popupWindow) {
     setTimeout(() => {
       popupWindow = window.open(url, "_blank");

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
+};