@getpara/react-sdk-lite 2.10.0 → 2.12.0

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

@@ -6,17 +6,17 @@ import {
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { useAddFunds } from "./AddFundsContext.js";
+import { isAmountWithinProviderLimits, PROVIDER_LIMITS } from "../../utils/onramps.js";
 import { CpslButton, CpslIcon, CpslRow, CpslText } from "@getpara/react-components";
 import { AssetIcon, contentMotionProps } from "../common.js";
 import { QuantityInput } from "../QuantityInput.js";
-import { formatAssetQuantity } from "@getpara/web-sdk";
+import { formatAssetQuantity, OnRampPurchaseType, EnabledFlow } from "@getpara/web-sdk";
 import { OnRampStep, useModalStore } from "../../stores/index.js";
 import { safeStyled, getAssetCode, getNetworkName } from "@getpara/react-common";
 import { AnimatePresence, motion, useIsPresent } from "framer-motion";
 import { AddFundsAsset } from "./AddFundsAsset.js";
 import { WalletSelectOld } from "../WalletSelectOld/WalletSelectOld.js";
 import { useAccount } from "../../../provider/index.js";
-import { useDebounce } from "../../hooks/useDebounce.js";
 import { useAssetInfo } from "../../../provider/hooks/utils/useAssetInfo.js";
 import { AddFundsNetwork } from "./AddFundsNetwork.js";
 import { useStore } from "../../../provider/stores/useStore.js";
@@ -31,6 +31,7 @@ function AddFundsSettings() {
   const { embedded } = useAccount();
   const {
     assets,
+    networks,
     narrowedNetworks,
     asset,
     setAsset,
@@ -40,25 +41,90 @@ function AddFundsSettings() {
     setFiatQuantity,
     isProviderAllowed,
     settingsStep,
-    TestModeAlert
+    TestModeAlert,
+    onRampConfig,
+    activeWallet,
+    tab
   } = useAddFunds();
-  const [value, setValue] = useState(parseFloat(fiatQuantity || "25.00").toFixed(2));
-  const dbValue = useDebounce(value, 200);
+  const [value, setValue] = useState(parseFloat(String(fiatQuantity || "25.00")).toFixed(2));
   const assetQuantity = useMemo(() => {
     var _a, _b, _c;
     if (!asset) {
       return -1;
     }
     const assetValue = (_c = (_b = (_a = assetInfo.data) == null ? void 0 : _a[asset]) == null ? void 0 : _b.price) == null ? void 0 : _c.value;
-    const dbValueFloat = !dbValue || isNaN(parseFloat(dbValue)) ? null : parseFloat(dbValue);
-    if (!assetValue || !asset || !dbValueFloat) {
+    const valueFloat = !value || isNaN(parseFloat(value)) ? null : parseFloat(value);
+    if (!assetValue || !asset || !valueFloat) {
       return -1;
     }
     if (["TETHER", "USDC", "CUSD"].includes(asset)) {
-      return dbValueFloat;
+      return valueFloat;
+    }
+    return valueFloat / assetValue;
+  }, [asset, assetInfo, value]);
+  const providerAvailability = useMemo(() => {
+    if (!value || value.trim() === "") {
+      return { hasProviders: false, reason: null, minAmount: null, maxAmount: null };
+    }
+    const hasBasicSupport = Object.values(isProviderAllowed).some((allowed) => allowed === true);
+    if (!hasBasicSupport) {
+      return { hasProviders: false, reason: "NO_SUPPORT", minAmount: null, maxAmount: null };
+    }
+    if (!onRampConfig || !(activeWallet == null ? void 0 : activeWallet.type) || !asset || !network) {
+      return { hasProviders: hasBasicSupport, reason: null, minAmount: null, maxAmount: null };
+    }
+    const amount = parseFloat(value);
+    if (isNaN(amount)) {
+      return { hasProviders: false, reason: "INVALID_AMOUNT", minAmount: null, maxAmount: null };
+    }
+    const purchaseType = tab === EnabledFlow.BUY ? OnRampPurchaseType.BUY : OnRampPurchaseType.SELL;
+    let hasAtLeastOne = false;
+    let allBelowMin = true;
+    let allAboveMax = true;
+    const mins = [];
+    const maxes = [];
+    onRampConfig.providers.forEach((id) => {
+      if (!isProviderAllowed[id]) return;
+      const withinLimits = isAmountWithinProviderLimits(amount, id, purchaseType);
+      if (withinLimits) {
+        hasAtLeastOne = true;
+        allBelowMin = false;
+        allAboveMax = false;
+      } else {
+        const limits = PROVIDER_LIMITS[id][purchaseType];
+        if (limits.min !== null) mins.push(limits.min);
+        if (limits.max !== null) maxes.push(limits.max);
+        if (limits.min !== null && amount >= limits.min) allBelowMin = false;
+        if (limits.max !== null && amount <= limits.max) allAboveMax = false;
+      }
+    });
+    if (hasAtLeastOne) {
+      return { hasProviders: true, reason: null, minAmount: null, maxAmount: null };
+    }
+    if (allBelowMin && mins.length > 0) {
+      return {
+        hasProviders: false,
+        reason: "BELOW_MIN",
+        minAmount: Math.min(...mins),
+        maxAmount: null
+      };
+    }
+    if (allAboveMax && maxes.length > 0) {
+      return {
+        hasProviders: false,
+        reason: "ABOVE_MAX",
+        minAmount: null,
+        maxAmount: Math.max(...maxes)
+      };
     }
-    return dbValueFloat / assetValue;
-  }, [asset, assetInfo, dbValue]);
+    return {
+      hasProviders: false,
+      reason: "NO_PROVIDERS",
+      minAmount: null,
+      maxAmount: null
+    };
+  }, [isProviderAllowed, value, onRampConfig, activeWallet == null ? void 0 : activeWallet.type, asset, network, tab]);
+  const hasAvailableProviders = providerAvailability.hasProviders;
   const { key, Content } = useMemo(() => {
     switch (settingsStep) {
       case "NO_PROVIDERS":
@@ -70,6 +136,7 @@ function AddFundsSettings() {
           ] })
         };
       case "FORM": {
+        const isClickable = !!network && (assets.length > 1 || networks.length > 1);
         return {
           key: "form",
           Content: /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -79,7 +146,9 @@ function AddFundsSettings() {
                 AssetButton,
                 {
                   variant: "tertiary",
-                  onClick: network && (assets.length > 1 || narrowedNetworks.length > 1) ? () => {
+                  $isClickable: isClickable,
+                  cursor: isClickable ? "pointer" : "auto",
+                  onClick: isClickable ? () => {
                     switch (true) {
                       case assets.length === 1:
                         setNetwork(null);
@@ -92,7 +161,7 @@ function AddFundsSettings() {
                   children: [
                     /* @__PURE__ */ jsx(AssetIcon, { asset, size: "24px" }),
                     /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "contrast", children: assetQuantity > 0 ? formatAssetQuantity({ quantity: assetQuantity, symbol: getAssetCode(asset) }) : getAssetCode(asset) }),
-                    /* @__PURE__ */ jsx(CpslIcon, { icon: "chevronRight", size: "24px", color: "var(--cpsl-color-text-contrast)" })
+                    isClickable && /* @__PURE__ */ jsx(CpslIcon, { icon: "chevronRight", size: "24px", color: "var(--cpsl-color-text-contrast)" })
                   ]
                 }
               ),
@@ -101,21 +170,37 @@ function AddFundsSettings() {
                 getNetworkName(network)
               ] })
             ] }),
-            /* @__PURE__ */ jsxs(
-              CpslButton,
-              {
-                fullWidth: true,
-                disabled: value === "",
-                onClick: () => {
-                  setFiatQuantity(value != null ? value : void 0);
-                  setOnRampStep(OnRampStep.PROVIDER);
-                },
-                children: [
-                  "Continue",
-                  /* @__PURE__ */ jsx(CpslIcon, { icon: "arrow" })
-                ]
-              }
-            )
+            /* @__PURE__ */ jsxs(CpslRow, { col: true, gap: "8px", children: [
+              /* @__PURE__ */ jsxs(
+                CpslButton,
+                {
+                  fullWidth: true,
+                  disabled: !hasAvailableProviders,
+                  onClick: () => {
+                    setFiatQuantity(value != null ? value : void 0);
+                    setOnRampStep(OnRampStep.PROVIDER);
+                  },
+                  children: [
+                    "Continue",
+                    /* @__PURE__ */ jsx(CpslIcon, { icon: "arrow" })
+                  ]
+                }
+              ),
+              !hasAvailableProviders && value !== "" && asset && network && (() => {
+                const { reason, minAmount, maxAmount } = providerAvailability;
+                let message = "No providers available for this transaction";
+                if (reason === "INVALID_AMOUNT") {
+                  message = "Please enter a valid amount";
+                } else if (reason === "BELOW_MIN" && minAmount !== null) {
+                  message = `Amount too low, must be $${minAmount.toFixed(2)} or greater`;
+                } else if (reason === "ABOVE_MAX" && maxAmount !== null) {
+                  message = `Amount too high, must be $${maxAmount.toFixed(2)} or less`;
+                } else if (reason) {
+                  message = "No providers available for this transaction";
+                }
+                return /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "error", align: "center", children: message });
+              })()
+            ] })
           ] })
         };
       }
@@ -136,7 +221,18 @@ function AddFundsSettings() {
         };
       }
     }
-  }, [asset, network, assets, narrowedNetworks, isProviderAllowed, assetQuantity, isPresent, value, hideWallets]);
+  }, [
+    asset,
+    network,
+    assets,
+    narrowedNetworks,
+    isProviderAllowed,
+    assetQuantity,
+    isPresent,
+    value,
+    hideWallets,
+    providerAvailability
+  ]);
   const isWalletSelectVisible = useMemo(() => {
     return settingsStep && ["FORM", "NO_PROVIDERS"].includes(settingsStep) && (embedded == null ? void 0 : embedded.wallets) && embedded.wallets.length > 1;
   }, [embedded, settingsStep]);
@@ -171,8 +267,17 @@ const AssetButton = safeStyled(CpslButton)`
   --button-padding-top: 8px;
   --button-padding-bottom: 8px;
   --button-padding-start: 8px;
-  --button-padding-end: 8px;
+  --button-padding-end: ${({ $isClickable }) => $isClickable ? "8px" : "16px"};
   --button-gap: 4px;
+
+  ${({ $isClickable }) => !$isClickable && `
+    &:hover {
+      --button-tertiary-hover-background-color: var(--button-tertiary-background-color);
+      --button-tertiary-hover-border-color: var(--button-tertiary-border-color);
+      --button-tertiary-active-background-color: var(--button-tertiary-background-color);
+      --button-tertiary-active-border-color: var(--button-tertiary-border-color);
+    }
+  `}
 `;
 export {
   AddFundsSettings

package/dist/modal/components/AuthInput/hooks/useDropdownPosition.d.ts

@@ -2,6 +2,6 @@ import { MutableRefObject } from 'react';
 export declare const useDropdownPosition: (inputRef: MutableRefObject<HTMLCpslInputElement | HTMLDivElement | null>) => {
     dropdownMaxHeight: number | undefined;
     dropdownWidth: number | undefined;
-    mobileAnchor: number | undefined;
+    mobileAnchor: number | null;
     resize: () => void;
 };

package/dist/modal/components/AuthInput/hooks/useDropdownPosition.js

@@ -1,31 +1,39 @@
 "use client";
 import "../../../../chunk-MMUBH76A.js";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
+import { useModalStore } from "../../../stores/index.js";
 const useDropdownPosition = (inputRef) => {
   const [dropdownMaxHeight, setDropdownMaxHeight] = useState();
   const [dropdownWidth, setDropdownWidth] = useState();
-  const [mobileAnchor, setMobileAnchor] = useState();
-  const resize = () => {
-    var _a, _b, _c, _d;
-    if (typeof window !== "undefined") {
-      const newMaxHeight = Math.max(
-        window.innerHeight - ((_b = (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.getBoundingClientRect().bottom) != null ? _b : 0) - 20,
-        window.innerHeight * 0.25
-      );
-      setDropdownMaxHeight(newMaxHeight);
-      setDropdownWidth((_c = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _c.getBoundingClientRect().width);
-      setMobileAnchor((_d = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _d.getBoundingClientRect().height);
+  const [mobileAnchor, setMobileAnchor] = useState(null);
+  const modalContainerRef = useModalStore((state) => state.refs.modalContainer);
+  const resize = useCallback(() => {
+    if (typeof window !== "undefined" && inputRef.current) {
+      const rect = inputRef.current.getBoundingClientRect();
+      const newMaxHeight = Math.max(window.innerHeight - rect.bottom - 20, window.innerHeight * 0.25);
+      setDropdownMaxHeight((prev) => prev !== newMaxHeight ? newMaxHeight : prev);
+      setDropdownWidth((prev) => prev !== rect.width ? rect.width : prev);
+      const isMobile = window.innerWidth <= 480;
+      if (isMobile) {
+        const modalContainer = modalContainerRef.current;
+        if (modalContainer) {
+          const modalRect = modalContainer.getBoundingClientRect();
+          const topFromModal = rect.top - modalRect.top;
+          const bottomFromModal = topFromModal + rect.height;
+          setMobileAnchor((prev) => prev !== bottomFromModal ? bottomFromModal : prev);
+        }
+      } else {
+        setMobileAnchor(null);
+      }
     }
-  };
-  if (inputRef.current && !dropdownMaxHeight) {
-    resize();
-  }
+  }, [inputRef, modalContainerRef]);
   useEffect(() => {
+    resize();
     typeof window !== "undefined" && window.addEventListener("resize", resize);
     return () => {
       typeof window !== "undefined" && window.removeEventListener("resize", resize);
     };
-  }, []);
+  }, [resize]);
   return { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize };
 };
 export {

package/dist/modal/components/AuthOptions/AuthOptions.js

@@ -50,7 +50,7 @@ const AuthOptions = ({
       );
     }
     return /* @__PURE__ */ jsx(Fragment, { children: Methods });
-  }, [oAuthMethods, disableEmailLogin, disablePhoneLogin, isGuestModeEnabled, wallets]);
+  }, [oAuthMethods, disableEmailLogin, disablePhoneLogin, isGuestModeEnabled, wallets, defaultAuth]);
   return /* @__PURE__ */ jsxs(Container, { children: [
     guestAddFundsTab && /* @__PURE__ */ jsxs(CompleteAccountSetup, { children: [
       /* @__PURE__ */ jsx(CompleteAccountIcon, { icon: "stars02", size: "16px" }),

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

@@ -46,6 +46,7 @@ import { Footer } from "../Footer/Footer.js";
 import { renderTextWithLinks } from "../../utils/renderTextWithLinks.js";
 import { AccountWallet } from "../Account/AccountWallet.js";
 import { AccountSend } from "../Account/AccountSend/index.js";
+import { AccountMonitorTx } from "../Account/AccountMonitorTx.js";
 const MIN_HEIGHT = {
   [ModalStep.ADD_FUNDS_AWAITING]: "680px"
 };
@@ -219,6 +220,9 @@ const Body = ({
       case ModalStep.ACCOUNT_SEND_NETWORK: {
         return /* @__PURE__ */ jsx(AccountSend, { step: "SEND_NETWORK" });
       }
+      case ModalStep.ACCOUNT_MONITOR_TX: {
+        return /* @__PURE__ */ jsx(AccountMonitorTx, {});
+      }
       default: {
         if (IFrameSteps.includes(currentStep)) {
           return null;

package/dist/modal/components/Controls/ChainSelect.js

@@ -48,7 +48,7 @@ const ChainSelect = () => {
     return null;
   }
   const chainIdToUse = chainIdSwitchingTo != null ? chainIdSwitchingTo : chainId;
-  return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(HeaderSelectContainer, { ref: containerRef, id: "inputContainer", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(HeaderSelectContainer, { ref: containerRef, children: /* @__PURE__ */ jsxs(
     HeaderSelect,
     {
       selectedValue: (_a = chainIdToUse == null ? void 0 : chainIdToUse.toString()) != null ? _a : "",
@@ -57,10 +57,9 @@ const ChainSelect = () => {
       },
       showFormattedSelectedItem: true,
       placeholder: "Choose chain...",
-      anchorElId: "inputContainer",
       dropdownMaxHeight,
       $width: dropdownWidth != null ? dropdownWidth : 0,
-      $top: (mobileAnchor != null ? mobileAnchor : 0) + 16 + 1,
+      $top: mobileAnchor != null ? mobileAnchor : void 0,
       autoWidth: true,
       alignCenter: true,
       selectedItemVariant: "bodyXS",

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

@@ -0,0 +1,20 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+interface Props {
+    children: ReactNode;
+    fallback?: ReactNode;
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+interface State {
+    hasError: boolean;
+}
+/**
+ * Error boundary component that catches JavaScript errors in child components
+ * and displays a fallback UI instead of crashing the entire component tree.
+ */
+export declare class ErrorBoundary extends Component<Props, State> {
+    constructor(props: Props);
+    static getDerivedStateFromError(): State;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): ReactNode;
+}
+export {};

package/dist/modal/components/ErrorBoundary.js

@@ -0,0 +1,27 @@
+"use client";
+import "../../chunk-MMUBH76A.js";
+import { Component } from "react";
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error, errorInfo) {
+    var _a, _b;
+    console.error("[ErrorBoundary] Caught error:", error, errorInfo);
+    (_b = (_a = this.props).onError) == null ? void 0 : _b.call(_a, error, errorInfo);
+  }
+  render() {
+    var _a;
+    if (this.state.hasError) {
+      return (_a = this.props.fallback) != null ? _a : null;
+    }
+    return this.props.children;
+  }
+}
+export {
+  ErrorBoundary
+};

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

@@ -49,7 +49,7 @@ const ExternalWalletMobileConnect = ({
     if (isError && onRetryClick) {
       yield onRetryClick();
     } else {
-      yield openMobileUrl(qrUri);
+      openMobileUrl(qrUri);
     }
   });
   if (wallet.type === "SOLANA" || isMobile() && !isTablet()) {

package/dist/modal/components/OnRampComponents/OnRampProviderButton.js

@@ -16,10 +16,10 @@ const OnRampProviderButton = ({ config, index, onClick: _onClick }) => {
   return /* @__PURE__ */ jsx(StyledButton, { variant: "tertiary", fullWidth: true, onClick, children: /* @__PURE__ */ jsxs(Container, { children: [
     /* @__PURE__ */ jsx(IconContainer, { children: /* @__PURE__ */ jsx(CpslIcon, { icon, color: backgroundColors[0] }) }),
     /* @__PURE__ */ jsxs(ProviderInfoContainer, { children: [
-      /* @__PURE__ */ jsx(Text, { variant: "bodyL", weight: "medium", children: name }),
+      /* @__PURE__ */ jsx(CpslText, { variant: "bodyL", weight: "medium", children: name }),
       /* @__PURE__ */ jsxs(ProviderInfoInnerContainer, { children: [
-        /* @__PURE__ */ jsx(Text, { variant: "bodyXS", weight: "medium", children: methods.join(", ") }),
-        /* @__PURE__ */ jsx(Text, { variant: "bodyXS", weight: "medium", children: feeString })
+        /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", weight: "medium", children: methods.join(", ") }),
+        /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", weight: "medium", children: feeString })
       ] })
     ] })
   ] }) });
@@ -57,11 +57,6 @@ const IconContainer = safeStyled.span`
   width: 48px;
   flex-shrink: 0;
 `;
-const Text = safeStyled(CpslText)`
-  &::part(text-element) {
-    color: #fff;
-  }
-`;
 export {
   OnRampProviderButton
 };

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

@@ -4,9 +4,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef } from "react";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 import { useDropdownPosition } from "../AuthInput/hooks/useDropdownPosition.js";
-import { MOBILE_SIZE, safeStyled, useCopyToClipboard, WalletTypeIcon as WalletTypeIconBase } from "@getpara/react-common";
+import { 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 { getMobilePopoverPositionCSS } from "../common.js";
 const getValue = (id, type) => {
   return id && type ? `${id}~${type}` : void 0;
 };
@@ -69,7 +70,7 @@ const WalletSelectOld = ({
   }, [activeWallet, availableWallets, dropdownMaxHeight]);
   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(
+    /* @__PURE__ */ jsx(SelectContainer, { ref: containerRef, style: { width: "100%" }, children: /* @__PURE__ */ jsxs(
       Select,
       {
         selectedValue: getValue(activeWallet == null ? void 0 : activeWallet.id, activeWallet == null ? void 0 : activeWallet.type),
@@ -79,10 +80,9 @@ const WalletSelectOld = ({
         },
         showFormattedSelectedItem: true,
         placeholder: "Choose wallet...",
-        anchorElId: "addressInputContainerOld",
         dropdownMaxHeight,
         $width: dropdownWidth != null ? dropdownWidth : 0,
-        $top: (mobileAnchor != null ? mobileAnchor : 0) + 220 + 1,
+        $top: mobileAnchor != null ? mobileAnchor : void 0,
         selectedItemVariant: "bodyXS",
         icon: isMultiWallet ? "chevronUp" : null,
         disabled: !isMultiWallet,
@@ -127,15 +127,8 @@ const Select = safeStyled(CpslSelect)`
 
   &::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;
-      }
-  }
+      ${({ $top }) => getMobilePopoverPositionCSS($top)}
+    }
   
 
   &::part(icon) {

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

@@ -1,6 +1,11 @@
 import { CpslInput, CpslText, CpslTileButton } from '@getpara/react-components';
 import { TLinkedAccountType, TNetwork, TOnRampAsset } from '@getpara/web-sdk';
-import { ComponentProps, PropsWithChildren } from 'react';
+import { ComponentProps, PropsWithChildren, ReactNode } from 'react';
+/**
+ * Generates CSS for mobile positioning of select dropdowns.
+ * Adjusts popover position when modal uses transform which affects fixed positioning.
+ */
+export declare const getMobilePopoverPositionCSS: ($top?: number) => string;
 export declare const SpinnerContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const QRContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const InfoBoxContent: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
@@ -59,6 +64,10 @@ export declare function GradientScroll({ height, gap, children }: PropsWithChild
 export declare const HeroGenericIcon: ({ accountType }: {
     accountType: "EMAIL" | "PHONE";
 }) => import("react/jsx-runtime").JSX.Element;
+export declare const ExplorerLink: ({ href, text }: {
+    href: string;
+    text: ReactNode;
+}) => 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

@@ -4,11 +4,24 @@ import {
   __spreadProps,
   __spreadValues
 } from "../../chunk-MMUBH76A.js";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { CpslIcon, CpslInput, CpslSelect, CpslSelectItem, CpslText, CpslTileButton } from "@getpara/react-components";
 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 getMobilePopoverPositionCSS = ($top) => {
+  if ($top === void 0 || $top === null) return "";
+  return `
+    @media (max-width: ${MOBILE_SIZE}px) {
+      top: ${$top}px;
+      bottom: 16px;
+    }
+    cpsl-auth-modal.force-mobile-media & {
+      top: ${$top}px;
+      bottom: 16px;
+    }
+  `;
+};
 const SpinnerContainer = safeStyled.div`
   display: flex;
   align-items: center;
@@ -99,16 +112,9 @@ const HeaderSelect = safeStyled(CpslSelect)`
   }
 
   &::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;
+      /* 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 */
+      ${({ $top }) => getMobilePopoverPositionCSS($top)}
     }
-  }
 
   &::part(icon) {
     --icon-color: var(--cpsl-color-contrast);
@@ -276,6 +282,31 @@ const Avatar = safeStyled.div`
   justify-content: center;
   background-color: var(--cpsl-color-background-8);
 `;
+const ExplorerLinkBase = safeStyled.a`
+  font-family: var(--cpsl-font-family);
+  font-size: 14px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--cpsl-color-text-primary);
+  --icon-color: var(--cpsl-color-text-primary);
+
+  &:hover {
+    color: var(--cpsl-color-text-contrast);
+    --icon-color: var(--cpsl-color-text-contrast);
+  }
+`;
+const ExplorerLink = ({ href, text }) => {
+  return /* @__PURE__ */ jsxs(ExplorerLinkBase, { target: "_blank", href, rel: "noopener noreferrer", children: [
+    /* @__PURE__ */ jsx("span", { children: text }),
+    /* @__PURE__ */ jsx(CpslIcon, { icon: "externalLink", size: "16px", style: { marginLeft: "6px" } })
+  ] });
+};
 export * from "./SearchableButtonList.js";
 export * from "./QuantityInput.js";
 import { AnimatedHeightWrapper } from "./Body/AnimatedHeightWrapper.js";
@@ -286,6 +317,7 @@ export {
   CenteredText,
   ErrorContainer,
   ErrorIcon,
+  ExplorerLink,
   FilledDisabledInput,
   FullWidthFilledDisabledInput,
   GradientScroll,
@@ -304,5 +336,6 @@ export {
   QRContainer,
   SpinnerContainer,
   StepContainer,
-  StyledCpslTileButton
+  StyledCpslTileButton,
+  getMobilePopoverPositionCSS
 };

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

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

package/dist/modal/hooks/index.js

@@ -2,4 +2,5 @@
 export * from "./useDebounce.js";
 export * from "./useFarcasterLogin.js";
 export * from "./useGoBack.js";
+export * from "./useSendMutations.js";
 export * from "./useTelegramLogin.js";

package/dist/modal/hooks/useFarcasterLogin.js

@@ -48,7 +48,7 @@ const useFarcasterLogin = ({
           if (!!event.data.payload) {
             const authObject = event.data.payload;
             try {
-              yield verifyFarcaster(authObject);
+              verifyFarcaster(authObject);
             } catch (e) {
               (_b = (_a = refs.telegramIFrame.current) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.postMessage({ type: "FARCASTER_RETRY" }, "*");
             }