@getpara/react-common 2.0.0-dev.1 → 2.0.0-dev.2

package/dist/chunk-GOCCUU3Z.js

@@ -0,0 +1,42 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+export {
+  __spreadValues,
+  __async
+};

package/dist/classes/ParaInternal.d.ts

@@ -1,10 +1,9 @@
-import ParaWeb from '@getpara/web-sdk';
-export declare class ParaInternal extends ParaWeb {
+import ParaWeb, { InternalInterface } from '@getpara/web-sdk';
+export declare class ParaInternal extends ParaWeb implements InternalInterface {
     setupAfterLogin: ({ temporaryShares, skipSessionRefresh, }?: {
         temporaryShares?: any[];
         skipSessionRefresh?: boolean;
     }) => Promise<void>;
-    getSupportedCreateAuthMethods: () => Promise<Set<import("@getpara/web-sdk").AuthMethod>>;
     getTransmissionKeyShares: ({ isForNewDevice }?: {
         isForNewDevice?: boolean;
     }) => Promise<any>;
@@ -12,11 +11,21 @@ export declare class ParaInternal extends ParaWeb {
     setLoginEncryptionKeyPair: (keyPair?: import("node-forge").pki.rsa.KeyPair) => Promise<void>;
     getPortalURL: () => Promise<string>;
     isProviderModalDisabled: () => boolean;
-    supportedAuthMethods: (auth: import("@getpara/user-management-client").Auth<import("@getpara/user-management-client").PrimaryAuthType | "userId">) => Promise<Set<import("@getpara/web-sdk").AuthMethod>>;
-    getUserBiometricLocationHints: () => Promise<import("@getpara/user-management-client").BiometricLocationHint[]>;
-    exitLoops: () => void;
-    exitLogin: () => void;
-    exitAccountCreation: () => void;
-    exitOAuth: () => void;
-    exitFarcaster: () => void;
+    setAuth: (auth: import("@getpara/user-management-client").PrimaryAuth, { extras, userId }?: {
+        extras?: import("@getpara/web-sdk").AuthExtras;
+        userId?: string;
+    }) => Promise<typeof this.authInfo>;
+    supportedAuthMethods: (auth: import("@getpara/web-sdk").Auth<import("@getpara/user-management-client").PrimaryAuthType | "userId">) => Promise<Set<import("@getpara/web-sdk").AuthMethod>>;
+    constructPortalUrl: (type: import("@getpara/core-sdk/dist/types/types").PortalUrlType, opts?: import("@getpara/core-sdk/dist/types/types").PortalUrlOptions) => Promise<string>;
+    getNewCredentialAndUrl: ({ authMethod, isForNewDevice, portalTheme, shorten, }?: import("@getpara/core-sdk/dist/types/types").NewCredentialUrlParams) => Promise<{
+        credentialId: string;
+        url?: string;
+    }>;
+    linkAccount: (opts: import("@getpara/web-sdk").InternalMethodParams<"linkAccount">) => import("@getpara/web-sdk").InternalMethodResponse<"linkAccount">;
+    unlinkAccount: ({ linkedAccountId, }: import("@getpara/web-sdk").InternalMethodParams<"unlinkAccount">) => import("@getpara/web-sdk").InternalMethodResponse<"unlinkAccount">;
+    verifyEmailOrPhoneLink: ({ verificationCode, }: import("@getpara/web-sdk").InternalMethodParams<"verifyEmailOrPhoneLink">) => import("@getpara/web-sdk").InternalMethodResponse<"verifyEmailOrPhoneLink">;
+    verifyOAuthLink: (opts: import("@getpara/web-sdk").InternalMethodParams<"verifyOAuthLink">) => import("@getpara/web-sdk").InternalMethodResponse<"verifyOAuthLink">;
+    verifyTelegramLink: (opts: import("@getpara/web-sdk").InternalMethodParams<"verifyTelegramLink">) => import("@getpara/web-sdk").InternalMethodResponse<"verifyTelegramLink">;
+    verifyFarcasterLink: (opts: import("@getpara/web-sdk").InternalMethodParams<"verifyFarcasterLink">) => import("@getpara/web-sdk").InternalMethodResponse<"verifyFarcasterLink">;
+    verifyExternalWalletLink: (opts: import("@getpara/web-sdk").InternalMethodParams<"verifyExternalWalletLink">) => import("@getpara/web-sdk").InternalMethodResponse<"verifyExternalWalletLink">;
 }

package/dist/classes/ParaInternal.js

@@ -0,0 +1,28 @@
+"use client";
+import "../chunk-GOCCUU3Z.js";
+import ParaWeb from "@getpara/web-sdk";
+class ParaInternal extends ParaWeb {
+  constructor() {
+    super(...arguments);
+    this.setupAfterLogin = super.setupAfterLogin;
+    this.getTransmissionKeyShares = super.getTransmissionKeyShares;
+    this.userSetupAfterLogin = super.userSetupAfterLogin;
+    this.setLoginEncryptionKeyPair = super.setLoginEncryptionKeyPair;
+    this.getPortalURL = super.getPortalURL;
+    this.isProviderModalDisabled = super.isProviderModalDisabled;
+    this.setAuth = super.setAuth;
+    this.supportedAuthMethods = super.supportedAuthMethods;
+    this.constructPortalUrl = super.constructPortalUrl;
+    this.getNewCredentialAndUrl = super.getNewCredentialAndUrl;
+    this.linkAccount = super.linkAccount;
+    this.unlinkAccount = super.unlinkAccount;
+    this.verifyEmailOrPhoneLink = super.verifyEmailOrPhoneLink;
+    this.verifyOAuthLink = super.verifyOAuthLink;
+    this.verifyTelegramLink = super.verifyTelegramLink;
+    this.verifyFarcasterLink = super.verifyFarcasterLink;
+    this.verifyExternalWalletLink = super.verifyExternalWalletLink;
+  }
+}
+export {
+  ParaInternal
+};

package/dist/classes/index.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "./ParaInternal.js";

package/dist/components/HeroSpinner.d.ts

@@ -1,8 +1,8 @@
 import { IconType } from '@getpara/react-components';
 import { PropsWithChildren, ReactNode } from 'react';
-type Status = 'loading' | 'error' | 'inactive';
+type Status = 'pending' | 'error' | 'idle' | 'success';
 export declare function HeroSpinner({ icon, status, text, }: PropsWithChildren<{
-    icon?: IconType;
+    icon?: IconType | ReactNode;
     status?: Status;
     text?: ReactNode;
 }>): import("react/jsx-runtime").JSX.Element;

package/dist/components/HeroSpinner.js

@@ -0,0 +1,63 @@
+"use client";
+import "../chunk-GOCCUU3Z.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CpslIcon, CpslSpinner, CpslText } from "@getpara/react-components";
+import { safeStyled } from "../utils/index.js";
+function HeroSpinner({
+  icon,
+  status = "idle",
+  text
+}) {
+  return /* @__PURE__ */ jsxs(Root, { children: [
+    /* @__PURE__ */ jsxs(Hero, { children: [
+      /* @__PURE__ */ jsx(Spinner, { size: 155, barWidth: 8, variant: status }),
+      typeof icon === "string" ? /* @__PURE__ */ jsx(CpslIcon, { icon, size: "80px" }) : icon
+    ] }),
+    /* @__PURE__ */ jsxs(Text, { status, children: [
+      status === "error" && /* @__PURE__ */ jsx(CpslIcon, { icon: "alertCircle", size: "16px", style: { stroke: "currentColor" } }),
+      status === "success" && /* @__PURE__ */ jsx(CpslIcon, { icon: "checkCircle", size: "16px", style: { stroke: "currentColor" } }),
+      /* @__PURE__ */ jsx(
+        CpslText,
+        {
+          variant: "bodyM",
+          weight: "semiBold",
+          color: status === "error" ? "error" : status === "success" ? "success" : "primary",
+          children: text
+        }
+      )
+    ] })
+  ] });
+}
+const Root = safeStyled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+const Hero = safeStyled.div`
+  width: 150px;
+  height: 150px;
+  margin: 16px 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+`;
+const Text = safeStyled.div`
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  color: ${({ status }) => status === "error" ? "var(--cpsl-color-utility-red)" : status === "success" ? "var(--cpsl-color-utility-green)" : "auto"};
+`;
+const Spinner = safeStyled(CpslSpinner)`
+  position: absolute;
+  width: 150px;
+  height: 150px;
+  top: 0;
+  left: 0;
+  right: 0;
+  transition: 0.2s color;
+`;
+export {
+  HeroSpinner
+};

package/dist/components/KnownDevices.js

@@ -0,0 +1,59 @@
+"use client";
+import "../chunk-GOCCUU3Z.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
+import { CenteredColumnContainer, FullWidthFilledDisabledInput, CenteredText } from "./common.js";
+import { QRCode } from "./QRCode.js";
+import { getDeviceLogo, getDeviceModelName, safeStyled } from "../utils/index.js";
+import { useCopyToClipboard } from "../hooks/index.js";
+const KnownDevices = ({ hints, link, showCurrentDevice }) => {
+  const [isCopied, copy] = useCopyToClipboard();
+  const handleCopy = () => {
+    copy(link);
+  };
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsx(CenteredText, { weight: "semiBold", children: "Continue with one of your other known devices" }),
+    !!hints.formattedHints.length && /* @__PURE__ */ jsx(DevicesContainer, { children: hints.formattedHints.map(
+      (hint) => {
+        var _a, _b, _c;
+        return (showCurrentDevice && hint.isKnownDevice || !hint.isKnownDevice) && /* @__PURE__ */ jsxs(DeviceListItem, { children: [
+          /* @__PURE__ */ jsx(DeviceLogo, { icon: getDeviceLogo(hint.device.vendor, hint.isMobile) }),
+          /* @__PURE__ */ jsx(CpslText, { weight: "medium", color: "contrast", children: (_b = (_a = getDeviceModelName(hint.device.model)) != null ? _a : hint.device.vendor) != null ? _b : hint.os.name }),
+          (hint.browser || hint.passwordManager) && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(CpslText, { weight: "medium", color: "secondary", children: "using" }),
+            /* @__PURE__ */ jsx(CpslText, { weight: "medium", color: "contrast", children: (_c = hint.passwordManager) != null ? _c : hint.browser.name })
+          ] })
+        ] }, hint.key);
+      }
+    ) }),
+    hints.hasMobileDevice ? /* @__PURE__ */ jsx(QRCode, { link, icon: "paraIconQr" }) : /* @__PURE__ */ jsxs(CenteredColumnContainer, { children: [
+      /* @__PURE__ */ jsx(FullWidthFilledDisabledInput, { noAutoDisable: true, readonly: true, disabled: true, value: link, children: /* @__PURE__ */ jsx(CpslButton, { slot: "end", variant: "ghost", onClick: handleCopy, children: /* @__PURE__ */ jsx(CpslIcon, { icon: isCopied ? "check" : "copy" }) }) }),
+      /* @__PURE__ */ jsx(CenteredText, { color: "secondary", variant: "bodyS", weight: "medium", children: "Navigate to this link using your other device" })
+    ] })
+  ] });
+};
+const Container = safeStyled(CenteredColumnContainer)`
+  gap: 16px;
+`;
+const DevicesContainer = safeStyled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background: var(--cpsl-color-background-4);
+  padding: 16px;
+  width: 100%;
+  border-radius: 16px;
+`;
+const DeviceListItem = safeStyled.div`
+  display: flex;
+  gap: 4px;
+  align-items: center;
+`;
+const DeviceLogo = safeStyled(CpslIcon)`
+  --icon-color: var(--cpsl-color-text-contrast);
+  --height: 16px;
+  --width: 16px;
+`;
+export {
+  KnownDevices
+};

package/dist/components/MoonPayEmbed.d.ts

@@ -1,3 +1,3 @@
-import { Props } from '../types/index.js';
-export declare const MoonPayEmbed: ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase, setOnRampPurchase }: Props) => import("react/jsx-runtime").JSX.Element;
+import { OnRampProps } from '../types/index.js';
+export declare const MoonPayEmbed: ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase, setOnRampPurchase }: OnRampProps) => import("react/jsx-runtime").JSX.Element;
 export default MoonPayEmbed;

package/dist/components/MoonPayEmbed.js

@@ -0,0 +1,183 @@
+"use client";
+import {
+  __async
+} from "../chunk-GOCCUU3Z.js";
+import { jsx } from "react/jsx-runtime";
+import { getNetworkPrefix, OnRampProvider, OnRampPurchaseStatus } from "@getpara/web-sdk";
+import { lazy, useCallback, useEffect, useMemo, useState } from "react";
+import { reverseCurrencyLookup, offRampSend, getCurrencyCode, safeStyled } from "../utils/index.js";
+const MOONPAY_PUBLISHABLE_KEY = "pk_live_EQva4LydtNDE0Rwd9X7SG9w58wqOzbux";
+const MOONPAY_PUBLISHABLE_KEY_TEST = "pk_test_HYobzemmTBXxcSStVA4dSED6jT";
+const MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase, setOnRampPurchase }) => {
+  const [LazyMoonPayBuyWidget, setLazyMoonPayBuyWidget] = useState(null);
+  const [LazyMoonPaySellWidget, setLazyMoonPaySellWidget] = useState(null);
+  const [LazyMoonPayProvider, setLazyMoonPayProvider] = useState(null);
+  useEffect(() => {
+    const _LazyMoonPayBuyWidget = lazy(
+      () => import("@moonpay/moonpay-react").then((mod) => ({ default: mod.MoonPayBuyWidget }))
+    );
+    const _LazyMoonPaySellWidget = lazy(
+      () => import("@moonpay/moonpay-react").then((mod) => ({ default: mod.MoonPaySellWidget }))
+    );
+    const _LazyMoonPayProvider = lazy(
+      () => import("@moonpay/moonpay-react").then((mod) => ({ default: mod.MoonPayProvider }))
+    );
+    setLazyMoonPayBuyWidget(_LazyMoonPayBuyWidget);
+    setLazyMoonPaySellWidget(_LazyMoonPaySellWidget);
+    setLazyMoonPayProvider(_LazyMoonPayProvider);
+  }, []);
+  const apiKey = onRampPurchase.testMode ? MOONPAY_PUBLISHABLE_KEY_TEST : MOONPAY_PUBLISHABLE_KEY;
+  const onUrlSignatureRequested = useCallback(
+    (url) => __async(void 0, null, function* () {
+      if (!para.getUserId() || !onRampPurchase.walletType) {
+        throw new Error("missing required fields");
+      }
+      const res = yield para.ctx.client.signMoonPayUrl(para.getUserId(), {
+        url,
+        type: onRampPurchase.walletType,
+        cosmosPrefix: getNetworkPrefix(onRampPurchase.network),
+        testMode: onRampPurchase.testMode,
+        walletId: onRampPurchase.walletId || void 0,
+        externalWalletAddress: onRampPurchase.externalWalletAddress || void 0
+      });
+      return res.data.signature;
+    }),
+    [onRampPurchase.walletId, onRampPurchase.walletType, para.cosmosPrefix, onRampPurchase.testMode, para]
+  );
+  const onTransactionCompleted = useCallback(
+    (payload) => __async(void 0, null, function* () {
+      try {
+        const [network, asset] = reverseCurrencyLookup(
+          onRampConfig.assetInfo,
+          OnRampProvider.MOONPAY,
+          payload.quoteCurrency.code
+        );
+        const updated = yield para.ctx.client.updateOnRampPurchase({
+          userId: para.getUserId(),
+          walletId: onRampPurchase.walletId,
+          purchaseId: onRampPurchase.id,
+          externalWalletAddress: onRampPurchase.externalWalletAddress,
+          updates: {
+            fiatQuantity: payload.baseCurrencyAmount.toString(),
+            fiat: payload.baseCurrency.code,
+            network,
+            asset,
+            assetQuantity: payload.quoteCurrencyAmount.toString(),
+            status: OnRampPurchaseStatus.FINISHED
+          }
+        });
+        setOnRampPurchase(updated);
+        if (!isEmbedded) {
+          setTimeout(() => {
+            if (typeof window !== "undefined") {
+              window.close();
+            }
+          }, 5e3);
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    }),
+    [onRampPurchase.walletId, onRampPurchase.id, onRampPurchase.externalWalletAddress, isEmbedded]
+  );
+  const onInitiateDeposit = useCallback(
+    (payload) => __async(void 0, null, function* () {
+      const txHash = yield offRampSend(para, onRampPurchase, setOnRampPurchase, {
+        assetQuantity: payload.cryptoCurrencyAmount,
+        fiatQuantity: payload.fiatCurrencyAmount || void 0,
+        fiat: payload.fiatCurrency.code.toUpperCase(),
+        destinationAddress: payload.depositWalletAddress,
+        contractAddress: payload.cryptoCurrency.contractAddress,
+        chainId: payload.cryptoCurrency.chainId
+      });
+      return { depositId: txHash, cancelTransactionOnError: false };
+    }),
+    [
+      para,
+      onRampPurchase.id,
+      onRampPurchase.testMode,
+      onRampPurchase.walletId,
+      onRampPurchase.walletType,
+      setOnRampPurchase
+    ]
+  );
+  const embed = useMemo(() => {
+    if (!LazyMoonPayBuyWidget || !LazyMoonPaySellWidget) {
+      return null;
+    }
+    const currencyCode = getCurrencyCode(onRampConfig, {
+      network: onRampPurchase.network,
+      asset: onRampPurchase.asset,
+      provider: OnRampProvider.MOONPAY
+    });
+    return onRampPurchase.type === "BUY" ? /* @__PURE__ */ jsx(
+      LazyMoonPayBuyWidget,
+      {
+        variant: "embedded",
+        baseCurrencyCode: onRampPurchase.fiat,
+        baseCurrencyAmount: onRampPurchase.fiatQuantity,
+        currencyCode,
+        walletAddress: onRampPurchase.address,
+        visible: true,
+        theme: isDark ? "dark" : "light",
+        style: {
+          height: "100%",
+          width: "100%",
+          border: "none",
+          borderRadius: 0,
+          margin: 0
+        },
+        onTransactionCompleted,
+        onUrlSignatureRequested
+      }
+    ) : /* @__PURE__ */ jsx(
+      LazyMoonPaySellWidget,
+      {
+        variant: "embedded",
+        visible: true,
+        theme: isDark ? "dark" : "light",
+        style: {
+          height: "100%",
+          width: "100%",
+          border: "none",
+          borderRadius: 0,
+          margin: 0
+        },
+        baseCurrencyCode: currencyCode,
+        refundWalletAddress: onRampPurchase.address,
+        onInitiateDeposit,
+        onTransactionCompleted,
+        onUrlSignatureRequested
+      }
+    );
+  }, [
+    onRampPurchase.type,
+    onRampPurchase.address,
+    onRampPurchase.walletId,
+    onRampPurchase.walletType,
+    onRampPurchase.asset,
+    onInitiateDeposit,
+    onTransactionCompleted,
+    onUrlSignatureRequested,
+    isDark,
+    LazyMoonPayBuyWidget,
+    LazyMoonPaySellWidget
+  ]);
+  if (!LazyMoonPayProvider) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Container, { isEmbedded, children: /* @__PURE__ */ jsx(LazyMoonPayProvider, { apiKey, debug: onRampPurchase.testMode, children: embed }) });
+};
+var MoonPayEmbed_default = MoonPayEmbed;
+const Container = safeStyled.div`
+  width: ${({ isEmbedded }) => isEmbedded ? "100%" : "100vw"};
+  height: ${({ isEmbedded }) => isEmbedded ? "640px" : "100vh"};
+
+  iframe {
+    border: 0 !important;
+  }
+`;
+export {
+  MoonPayEmbed,
+  MoonPayEmbed_default as default
+};

package/dist/components/NetworkSpeedBanner.d.ts

@@ -0,0 +1,5 @@
+export declare const NetworkSpeedBanner: ({ fontSize, iconSize, maxWidth, }: {
+    fontSize?: string;
+    iconSize?: string;
+    maxWidth?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/NetworkSpeedBanner.js

@@ -0,0 +1,80 @@
+"use client";
+import "../chunk-GOCCUU3Z.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { CpslIcon } from "@getpara/react-components";
+import { safeStyled } from "../utils/index.js";
+const BannerContainerWrapper = safeStyled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  background-color: transparent;
+`;
+const BannerContainer = safeStyled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: ${({ $maxWidth }) => $maxWidth || "100%"};
+  box-sizing: border-box;
+  padding: 6px;
+  border-radius: 12px;
+  background-color: transparent;
+  position: relative;
+  z-index: 10;
+  display: inline-flex;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+const WarningIcon = safeStyled(CpslIcon)`
+  --icon-color: #fbbc04;
+  --width: ${({ $size }) => $size || "24px"};
+  --height: ${({ $size }) => $size || "24px"};
+  margin-right: 6px;
+  flex-shrink: 0;
+`;
+const BannerText = safeStyled.span`
+  font-family: var(--cpsl-default-font);
+  font-weight: 500;
+  font-size: ${({ $fontSize }) => $fontSize || "14px"};
+  color: var(--cpsl-color-black);
+  flex: 1;
+`;
+const NetworkSpeedBanner = ({
+  fontSize,
+  iconSize,
+  maxWidth
+}) => {
+  const [isSlowNetwork, setIsSlowNetwork] = useState(false);
+  useEffect(() => {
+    var _a;
+    const connection = navigator == null ? void 0 : navigator.connection;
+    const checkNetworkSpeed = () => {
+      if (connection) {
+        const isSlow = connection.effectiveType === "2g" || connection.effectiveType === "slow-2g" || connection.downlink && connection.downlink < 0.5;
+        setIsSlowNetwork(isSlow);
+      } else {
+        setIsSlowNetwork(false);
+      }
+    };
+    checkNetworkSpeed();
+    (_a = connection == null ? void 0 : connection.addEventListener) == null ? void 0 : _a.call(connection, "change", checkNetworkSpeed);
+    const intervalId = setInterval(checkNetworkSpeed, 15e3);
+    return () => {
+      var _a2;
+      clearInterval(intervalId);
+      (_a2 = connection == null ? void 0 : connection.removeEventListener) == null ? void 0 : _a2.call(connection, "change", checkNetworkSpeed);
+    };
+  }, []);
+  if (!isSlowNetwork) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(BannerContainerWrapper, { children: /* @__PURE__ */ jsxs(BannerContainer, { $maxWidth: maxWidth, children: [
+    /* @__PURE__ */ jsx(WarningIcon, { $size: iconSize, icon: "alertTriangle" }),
+    /* @__PURE__ */ jsx(BannerText, { $fontSize: fontSize, children: "Your network is slow. This may impact your experience." })
+  ] }) });
+};
+export {
+  NetworkSpeedBanner
+};

package/dist/components/QRCode.js

@@ -0,0 +1,80 @@
+"use client";
+import "../chunk-GOCCUU3Z.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpara/react-components";
+import { useCopyToClipboard } from "../hooks/index.js";
+import { isMobile } from "@getpara/web-sdk";
+import { safeStyled } from "../utils/index.js";
+const QRCode = ({ link, imageSrc, icon, qrSize = 202, spinnerSize = 60 }) => {
+  const [isCopied, copy] = useCopyToClipboard();
+  const isMobileScreen = isMobile();
+  const handleCopy = () => {
+    copy(link);
+  };
+  return /* @__PURE__ */ jsxs(QRContainer, { $isMobile: isMobileScreen, children: [
+    isMobileScreen && /* @__PURE__ */ jsxs(MobileCopyButton, { fullWidth: true, onClick: handleCopy, children: [
+      /* @__PURE__ */ jsx(CopyIcon, { slot: "start", icon: isCopied ? "check" : "copy" }),
+      /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", children: isCopied ? "Copied" : "Copy Link Instead" })
+    ] }),
+    !link ? /* @__PURE__ */ jsx(LoadingContainer, { $size: qrSize, children: /* @__PURE__ */ jsx(CpslSpinner, { size: spinnerSize }) }) : /* @__PURE__ */ jsx(StyledQRCode, { url: link, size: qrSize, icon, imageSrc }),
+    !isMobileScreen && /* @__PURE__ */ jsxs(CopyButton, { size: "small", onClick: handleCopy, children: [
+      /* @__PURE__ */ jsx(CopyIcon, { slot: "start", icon: isCopied ? "check" : "copy" }),
+      /* @__PURE__ */ jsx(CpslText, { variant: "body2XS", children: isCopied ? "Copied" : "Copy Link Instead" })
+    ] })
+  ] });
+};
+const QRContainer = safeStyled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid;
+  border-color: var(--cpsl-color-background-16);
+  border-radius: 16px;
+  background-color: white;
+  overflow: hidden;
+  padding-bottom: ${({ $isMobile }) => $isMobile ? "0px" : "16px"};
+  padding-top: ${({ $isMobile }) => $isMobile ? "16px" : "0px"};
+`;
+const StyledQRCode = safeStyled(CpslQrCode)`
+  --qr-box-shadow: none;
+  --qr-border-radius: 0px;
+`;
+const CopyButton = safeStyled(CpslButton)`
+  --button-primary-color: var(--cpsl-color-text-contrast);
+  --button-primary-background-color: var(--cpsl-color-background-4);
+
+  --button-primary-hover-color: var(--cpsl-color-text-contrast);
+  --button-primary-hover-background-color: var(--cpsl-color-background-16);
+
+  --button-primary-active-color: var(--cpsl-color-text-contrast);
+  --button-primary-active-background-color: var(--cpsl-color-background-4);
+
+  --button-padding-start: 8px;
+  --button-padding-end: 8px;
+  --button-padding-top: 2px;
+  --button-padding-bottom: 2px;
+
+  --button-border-radius: 1000px;
+`;
+const MobileCopyButton = safeStyled(CopyButton)`
+  --button-padding-top: 4px;
+  --button-padding-bottom: 4px;
+
+  padding: 0px 12px;
+`;
+const CopyIcon = safeStyled(CpslIcon)`
+  --width: 16px;
+  --height: 16px;
+  --icon-color: var(--cpsl-color-text-contrast);
+`;
+const LoadingContainer = safeStyled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: ${({ $size }) => `${$size}px`};
+  width: ${({ $size }) => `${$size}px`};
+`;
+export {
+  QRCode
+};

package/dist/components/RampEmbed.d.ts

@@ -1,4 +1,4 @@
-import { Props } from '../types/index.js';
-export declare const RampEmbed: ({ para, appName, onRampConfig, onRampPurchase, isEmbedded, apiKey, onClose, setOnRampPurchase, }: Props & {
+import { OnRampProps } from '../types/index.js';
+export declare const RampEmbed: ({ para, appName, onRampConfig, onRampPurchase, isEmbedded, apiKey, onClose, setOnRampPurchase, }: OnRampProps & {
     apiKey: string;
 }) => import("react/jsx-runtime").JSX.Element;