@getpara/react-common 2.0.0-alpha.7 → 2.0.0-alpha.71

package/README.md

@@ -0,0 +1,13 @@
+https://www.npmjs.com/package/@getpara/react-common
+
+`@getpara/react-common` is a package that contains shared React components and utilities used across Para's React SDK ecosystem
+
+###Prerequisites
+
+To use Para, you need an API key. This key authenticates your requests to Para services and is essential for integration.
+
+Don't have an API key yet? Request access to the [Developer Portal](https://developer.getpara.com/) to create API keys, manage billing, teams, and more.
+
+###Learn more
+
+For more information on Para’s React SDK visit the [Para Docs](https://docs.getpara.com/v2/react/quickstart)

package/dist/{chunk-GOCCUU3Z.js → chunk-MMUBH76A.js}

@@ -1,5 +1,7 @@
 "use client";
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -15,6 +17,19 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -38,5 +53,7 @@ var __async = (__this, __arguments, generator) => {
 
 export {
   __spreadValues,
+  __spreadProps,
+  __objRest,
   __async
 };

package/dist/classes/ParaInternal.d.ts

@@ -1,25 +1,44 @@
-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>;
-    userSetupAfterLogin: () => Promise<import("@getpara/user-management-client").SessionInfo>;
+    userSetupAfterLogin: () => Promise<import("@getpara/shared").SessionInfo>;
     setLoginEncryptionKeyPair: (keyPair?: import("node-forge").pki.rsa.KeyPair) => Promise<void>;
     getPortalURL: () => Promise<string>;
     isProviderModalDisabled: () => boolean;
-    setAuth: (auth: import("@getpara/user-management-client").PrimaryAuth, { extras, userId }?: {
+    setAuth: (auth: import("@getpara/shared").PrimaryAuth, { extras, userId }?: {
         extras?: import("@getpara/web-sdk").AuthExtras;
         userId?: string;
     }) => Promise<typeof this.authInfo>;
-    supportedAuthMethods: (auth: import("@getpara/user-management-client").Auth<import("@getpara/user-management-client").PrimaryAuthType | "userId">) => Promise<Set<import("@getpara/web-sdk").AuthMethod>>;
+    supportedAuthMethods: (auth: import("@getpara/web-sdk").Auth<import("@getpara/shared").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<{
+    getSwitchWalletsUrl: () => Promise<string>;
+    getNewCredentialAndUrl: ({ authMethod: optsAuthMethod, isForNewDevice, portalTheme, shorten, }?: import("@getpara/core-sdk/dist/types/types").NewCredentialUrlParams) => Promise<{
         credentialId: string;
         url?: string;
     }>;
+    prepareLogin: () => import("@getpara/web-sdk").InternalMethodResponse<"prepareLogin">;
+    supportedUserAuthMethods: () => Promise<Set<import("@getpara/web-sdk").AuthMethod>>;
+    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">;
+    sendLoginCode: () => Promise<void>;
+    getProfileBalance: ({ config, refetch }?: {
+        config?: import("@getpara/web-sdk").BalancesConfig;
+        refetch?: boolean;
+    }) => Promise<import("@getpara/web-sdk").ProfileBalance>;
+    setModalError: (_error?: string) => void;
+    waitForWalletSwitching: (args: import("@getpara/web-sdk").CoreMethodParams<"waitForLogin">) => import("@getpara/web-sdk").CoreMethodResponse<"waitForLogin">;
+    displayModalError: (error?: string) => void;
+    get partnerLogo(): string;
+    get partnerName(): string;
 }

package/dist/classes/ParaInternal.js

@@ -1,11 +1,10 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import "../chunk-MMUBH76A.js";
 import ParaWeb from "@getpara/web-sdk";
 class ParaInternal extends ParaWeb {
   constructor() {
     super(...arguments);
     this.setupAfterLogin = super.setupAfterLogin;
-    this.getSupportedCreateAuthMethods = super.getSupportedCreateAuthMethods;
     this.getTransmissionKeyShares = super.getTransmissionKeyShares;
     this.userSetupAfterLogin = super.userSetupAfterLogin;
     this.setLoginEncryptionKeyPair = super.setLoginEncryptionKeyPair;
@@ -14,7 +13,28 @@ class ParaInternal extends ParaWeb {
     this.setAuth = super.setAuth;
     this.supportedAuthMethods = super.supportedAuthMethods;
     this.constructPortalUrl = super.constructPortalUrl;
+    this.getSwitchWalletsUrl = super.getSwitchWalletsUrl;
     this.getNewCredentialAndUrl = super.getNewCredentialAndUrl;
+    this.prepareLogin = super.prepareLogin;
+    this.supportedUserAuthMethods = super.supportedUserAuthMethods;
+    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;
+    this.sendLoginCode = super.sendLoginCode;
+    this.getProfileBalance = super.getProfileBalance;
+    this.setModalError = super.setModalError;
+    this.waitForWalletSwitching = super.waitForWalletSwitching;
+    this.displayModalError = super.displayModalError;
+  }
+  get partnerLogo() {
+    return super.partnerLogo;
+  }
+  get partnerName() {
+    return super.partnerName;
   }
 }
 export {

package/dist/components/HeroSpinner.d.ts

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

package/dist/components/HeroSpinner.js

@@ -1,33 +1,43 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import "../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CpslIcon, CpslSpinner, CpslText } from "@getpara/react-components";
-import styled from "styled-components";
+import { safeStyled } from "../utils/index.js";
 function HeroSpinner({
   icon,
-  status = "inactive",
-  text
+  status = "idle",
+  text,
+  secondaryText
 }) {
   return /* @__PURE__ */ jsxs(Root, { children: [
     /* @__PURE__ */ jsxs(Hero, { children: [
-      /* @__PURE__ */ jsx(Spinner, { size: 150, barWidth: 9, variant: status === "loading" ? "default" : status }),
-      icon && /* @__PURE__ */ jsx(CpslIcon, { icon, size: "80px" })
+      /* @__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" } }),
-      /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", weight: "semiBold", color: status === "error" ? "error" : "primary", children: text })
-    ] })
+      status === "success" && /* @__PURE__ */ jsx(CpslIcon, { icon: "checkCircle", size: "16px", style: { stroke: "currentColor" } }),
+      /* @__PURE__ */ jsx(
+        CpslText,
+        {
+          variant: "bodyM",
+          weight: "semiBold",
+          align: "center",
+          color: status === "error" ? "error" : status === "success" ? "success" : "primary",
+          children: text
+        }
+      )
+    ] }),
+    secondaryText && /* @__PURE__ */ jsx(SecondaryText, { align: "center", color: "secondary", variant: "semiBold", children: secondaryText })
   ] });
 }
-const Root = styled.div`
-  height: 276px;
+const Root = safeStyled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  gap: 16px;
 `;
-const Hero = styled.div`
+const Hero = safeStyled.div`
   width: 150px;
   height: 150px;
   margin: 16px 0;
@@ -36,19 +46,23 @@ const Hero = styled.div`
   align-items: center;
   position: relative;
 `;
-const Text = styled.div`
+const Text = safeStyled.div`
   display: flex;
   gap: 4px;
   align-items: center;
-  color: ${({ status }) => status === "error" ? "var(--cpsl-color-utility-red)" : "auto"};
+  color: ${({ status }) => status === "error" ? "var(--cpsl-color-utility-red)" : status === "success" ? "var(--cpsl-color-utility-green)" : "auto"};
+`;
+const SecondaryText = safeStyled(CpslText)`
+  margin-top: 8px;
 `;
-const Spinner = styled(CpslSpinner)`
+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

@@ -1,11 +1,10 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import "../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
-import styled from "styled-components";
 import { CenteredColumnContainer, FullWidthFilledDisabledInput, CenteredText } from "./common.js";
 import { QRCode } from "./QRCode.js";
-import { getDeviceLogo, getDeviceModelName } from "../utils/index.js";
+import { getDeviceLogo, getDeviceModelName, safeStyled } from "../utils/index.js";
 import { useCopyToClipboard } from "../hooks/index.js";
 const KnownDevices = ({ hints, link, showCurrentDevice }) => {
   const [isCopied, copy] = useCopyToClipboard();
@@ -33,10 +32,10 @@ const KnownDevices = ({ hints, link, showCurrentDevice }) => {
     ] })
   ] });
 };
-const Container = styled(CenteredColumnContainer)`
+const Container = safeStyled(CenteredColumnContainer)`
   gap: 16px;
 `;
-const DevicesContainer = styled.div`
+const DevicesContainer = safeStyled.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -45,12 +44,12 @@ const DevicesContainer = styled.div`
   width: 100%;
   border-radius: 16px;
 `;
-const DeviceListItem = styled.div`
+const DeviceListItem = safeStyled.div`
   display: flex;
   gap: 4px;
   align-items: center;
 `;
-const DeviceLogo = styled(CpslIcon)`
+const DeviceLogo = safeStyled(CpslIcon)`
   --icon-color: var(--cpsl-color-text-contrast);
   --height: 16px;
   --width: 16px;

package/dist/components/MoonPayEmbed.d.ts

@@ -1,3 +1,5 @@
-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: ({ email, isDark, isEmbedded, onRampConfig, onRampPurchase, onSuccess, onDepositRequest, onUrlSignatureRequest, }: OnRampProps & {
+    onUrlSignatureRequest: (url: string) => Promise<string>;
+}) => import("react/jsx-runtime").JSX.Element;
 export default MoonPayEmbed;

package/dist/components/MoonPayEmbed.js

@@ -1,18 +1,24 @@
 "use client";
 import {
   __async
-} from "../chunk-GOCCUU3Z.js";
+} from "../chunk-MMUBH76A.js";
 import { jsx } from "react/jsx-runtime";
-import { getNetworkPrefix, OnRampProvider, OnRampPurchaseStatus } from "@getpara/web-sdk";
+import { OnRampProvider } from "@getpara/web-sdk";
 import { lazy, useCallback, useEffect, useMemo, useState } from "react";
-import { reverseCurrencyLookup, offRampSend, getCurrencyCode } from "../utils/index.js";
-import styled from "styled-components";
+import { reverseCurrencyLookup, 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);
+const MoonPayEmbed = ({
+  email,
+  isDark,
+  isEmbedded,
+  onRampConfig,
+  onRampPurchase,
+  onSuccess,
+  onDepositRequest,
+  onUrlSignatureRequest
+}) => {
+  const [components, setComponents] = useState(null);
   useEffect(() => {
     const _LazyMoonPayBuyWidget = lazy(
       () => import("@moonpay/moonpay-react").then((mod) => ({ default: mod.MoonPayBuyWidget }))
@@ -23,28 +29,13 @@ const MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase,
     const _LazyMoonPayProvider = lazy(
       () => import("@moonpay/moonpay-react").then((mod) => ({ default: mod.MoonPayProvider }))
     );
-    setLazyMoonPayBuyWidget(_LazyMoonPayBuyWidget);
-    setLazyMoonPaySellWidget(_LazyMoonPaySellWidget);
-    setLazyMoonPayProvider(_LazyMoonPayProvider);
+    setComponents({
+      MoonPayBuyWidget: _LazyMoonPayBuyWidget,
+      MoonPaySellWidget: _LazyMoonPaySellWidget,
+      MoonPayProvider: _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 {
@@ -53,57 +44,39 @@ const MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase,
           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
-          }
+        onSuccess({
+          fiatQuantity: payload.baseCurrencyAmount.toString(),
+          fiat: payload.baseCurrency.code,
+          network,
+          asset,
+          assetQuantity: payload.quoteCurrencyAmount.toString()
         });
-        setOnRampPurchase(updated);
-        if (!isEmbedded) {
-          setTimeout(() => {
-            if (typeof window !== "undefined") {
-              window.close();
-            }
-          }, 5e3);
-        }
       } catch (e) {
-        console.error(e);
+        throw e instanceof Error ? e : new Error(e);
       }
     }),
-    [onRampPurchase.walletId, onRampPurchase.id, onRampPurchase.externalWalletAddress, isEmbedded]
+    [onRampConfig]
   );
   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 };
+      try {
+        const txHash = yield onDepositRequest({
+          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 };
+      } catch (e) {
+        throw e instanceof Error ? e : new Error(e);
+      }
     }),
-    [
-      para,
-      onRampPurchase.id,
-      onRampPurchase.testMode,
-      onRampPurchase.walletId,
-      onRampPurchase.walletType,
-      setOnRampPurchase
-    ]
+    []
   );
   const embed = useMemo(() => {
-    if (!LazyMoonPayBuyWidget || !LazyMoonPaySellWidget) {
+    if (!components) {
       return null;
     }
     const currencyCode = getCurrencyCode(onRampConfig, {
@@ -111,10 +84,11 @@ const MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase,
       asset: onRampPurchase.asset,
       provider: OnRampProvider.MOONPAY
     });
-    return onRampPurchase.type === "BUY" ? /* @__PURE__ */ jsx(
-      LazyMoonPayBuyWidget,
+    return /* @__PURE__ */ jsx(components.MoonPayProvider, { apiKey, debug: onRampPurchase.testMode, children: onRampPurchase.type === "BUY" ? /* @__PURE__ */ jsx(
+      components.MoonPayBuyWidget,
       {
         variant: "embedded",
+        email,
         baseCurrencyCode: onRampPurchase.fiat,
         baseCurrencyAmount: onRampPurchase.fiatQuantity,
         currencyCode,
@@ -129,10 +103,10 @@ const MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase,
           margin: 0
         },
         onTransactionCompleted,
-        onUrlSignatureRequested
+        onUrlSignatureRequested: onUrlSignatureRequest
       }
     ) : /* @__PURE__ */ jsx(
-      LazyMoonPaySellWidget,
+      components.MoonPaySellWidget,
       {
         variant: "embedded",
         visible: true,
@@ -144,33 +118,32 @@ const MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase,
           borderRadius: 0,
           margin: 0
         },
+        email,
         baseCurrencyCode: currencyCode,
+        quoteCurrencyAmount: onRampPurchase.fiatQuantity,
         refundWalletAddress: onRampPurchase.address,
         onInitiateDeposit,
         onTransactionCompleted,
-        onUrlSignatureRequested
+        onUrlSignatureRequested: onUrlSignatureRequest
       }
-    );
+    ) });
   }, [
+    apiKey,
+    email,
     onRampPurchase.type,
     onRampPurchase.address,
     onRampPurchase.walletId,
     onRampPurchase.walletType,
     onRampPurchase.asset,
-    onInitiateDeposit,
+    onRampPurchase.testMode,
     onTransactionCompleted,
-    onUrlSignatureRequested,
     isDark,
-    LazyMoonPayBuyWidget,
-    LazyMoonPaySellWidget
+    components
   ]);
-  if (!LazyMoonPayProvider) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Container, { isEmbedded, children: /* @__PURE__ */ jsx(LazyMoonPayProvider, { apiKey, debug: onRampPurchase.testMode, children: embed }) });
+  return /* @__PURE__ */ jsx(Container, { isEmbedded, children: embed });
 };
 var MoonPayEmbed_default = MoonPayEmbed;
-const Container = styled.div`
+const Container = safeStyled.div`
   width: ${({ isEmbedded }) => isEmbedded ? "100%" : "100vw"};
   height: ${({ isEmbedded }) => isEmbedded ? "640px" : "100vh"};
 

package/dist/components/NetworkSpeedBanner.js

@@ -1,17 +1,17 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import "../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import styled from "styled-components";
 import { CpslIcon } from "@getpara/react-components";
-const BannerContainerWrapper = styled.div`
+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 = styled.div`
+const BannerContainer = safeStyled.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -27,14 +27,14 @@ const BannerContainer = styled.div`
   text-overflow: ellipsis;
   overflow: hidden;
 `;
-const WarningIcon = styled(CpslIcon)`
+const WarningIcon = safeStyled(CpslIcon)`
   --icon-color: #fbbc04;
   --width: ${({ $size }) => $size || "24px"};
   --height: ${({ $size }) => $size || "24px"};
   margin-right: 6px;
   flex-shrink: 0;
 `;
-const BannerText = styled.span`
+const BannerText = safeStyled.span`
   font-family: var(--cpsl-default-font);
   font-weight: 500;
   font-size: ${({ $fontSize }) => $fontSize || "14px"};

package/dist/components/QRCode.js

@@ -1,10 +1,10 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import "../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpara/react-components";
-import styled from "styled-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();
@@ -23,7 +23,7 @@ const QRCode = ({ link, imageSrc, icon, qrSize = 202, spinnerSize = 60 }) => {
     ] })
   ] });
 };
-const QRContainer = styled.div`
+const QRContainer = safeStyled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -36,11 +36,11 @@ const QRContainer = styled.div`
   padding-bottom: ${({ $isMobile }) => $isMobile ? "0px" : "16px"};
   padding-top: ${({ $isMobile }) => $isMobile ? "16px" : "0px"};
 `;
-const StyledQRCode = styled(CpslQrCode)`
+const StyledQRCode = safeStyled(CpslQrCode)`
   --qr-box-shadow: none;
   --qr-border-radius: 0px;
 `;
-const CopyButton = styled(CpslButton)`
+const CopyButton = safeStyled(CpslButton)`
   --button-primary-color: var(--cpsl-color-text-contrast);
   --button-primary-background-color: var(--cpsl-color-background-4);
 
@@ -57,18 +57,18 @@ const CopyButton = styled(CpslButton)`
 
   --button-border-radius: 1000px;
 `;
-const MobileCopyButton = styled(CopyButton)`
+const MobileCopyButton = safeStyled(CopyButton)`
   --button-padding-top: 4px;
   --button-padding-bottom: 4px;
 
   padding: 0px 12px;
 `;
-const CopyIcon = styled(CpslIcon)`
+const CopyIcon = safeStyled(CpslIcon)`
   --width: 16px;
   --height: 16px;
   --icon-color: var(--cpsl-color-text-contrast);
 `;
-const LoadingContainer = styled.div`
+const LoadingContainer = safeStyled.div`
   display: flex;
   justify-content: center;
   align-items: center;

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: ({ appName, email, onRampConfig, onRampPurchase, isEmbedded, apiKey, onClose, onUpdate, onDepositRequest, }: OnRampProps & {
     apiKey: string;
 }) => import("react/jsx-runtime").JSX.Element;