@getpara/react-common 2.0.0-alpha.6 → 2.0.0-alpha.61

package/dist/classes/ParaInternal.d.ts

@@ -1,25 +1,40 @@
-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<{
         credentialId: string;
         url?: string;
     }>;
+    prepareLogin: () => import("@getpara/web-sdk").InternalMethodResponse<"prepareLogin">;
+    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;
+    get partnerLogo(): string;
+    get partnerName(): string;
 }

package/dist/classes/ParaInternal.js

@@ -5,7 +5,6 @@ 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;
@@ -15,6 +14,23 @@ class ParaInternal extends ParaWeb {
     this.supportedAuthMethods = super.supportedAuthMethods;
     this.constructPortalUrl = super.constructPortalUrl;
     this.getNewCredentialAndUrl = super.getNewCredentialAndUrl;
+    this.prepareLogin = super.prepareLogin;
+    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;
+  }
+  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

@@ -2,32 +2,42 @@
 import "../chunk-GOCCUU3Z.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

@@ -2,10 +2,9 @@
 import "../chunk-GOCCUU3Z.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

@@ -3,16 +3,22 @@ import {
   __async
 } from "../chunk-GOCCUU3Z.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

@@ -2,16 +2,16 @@
 import "../chunk-GOCCUU3Z.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

@@ -2,9 +2,9 @@
 import "../chunk-GOCCUU3Z.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;

package/dist/components/RampEmbed.js

@@ -5,24 +5,19 @@ import {
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { RampInstantSDK } from "@ramp-network/ramp-instant-sdk";
-import { Network, OnRampAsset, OnRampProvider, getPortalBaseURL } from "@getpara/web-sdk";
-import {
-  getChainId,
-  getContractAddressFromAsset,
-  getCurrencyCodes,
-  reverseCurrencyLookup,
-  offRampSend
-} from "../utils/index.js";
+import { OnRampProvider } from "@getpara/web-sdk";
+import { getChainId, getContractAddressFromAsset, getCurrencyCodes, reverseCurrencyLookup } from "../utils/index.js";
 const TEST_MODE_FORBIDDEN = ["ETH_ETH", "ETH_USDC"];
 const RampEmbed = ({
-  para,
   appName,
+  email,
   onRampConfig,
   onRampPurchase,
   isEmbedded,
   apiKey,
   onClose,
-  setOnRampPurchase
+  onUpdate,
+  onDepositRequest
 }) => {
   const { currencyCodes } = getCurrencyCodes(onRampConfig, {
     provider: OnRampProvider.RAMP,
@@ -38,10 +33,10 @@ const RampEmbed = ({
           swapAsset: currencyCodes.filter((code) => !onRampPurchase.testMode || !TEST_MODE_FORBIDDEN.includes(code)).join(","),
           fiatValue: onRampPurchase.fiatQuantity,
           fiatCurrency: onRampPurchase.fiat,
-          hostLogoUrl: `${getPortalBaseURL(para.ctx)}/wordmark_black.svg`,
+          hostLogoUrl: `${window.location.hostname}/wordmark_black.svg`,
           hostApiKey: apiKey,
           userAddress: onRampPurchase.address,
-          userEmailAddress: para.getEmail(),
+          userEmailAddress: email,
           url: (onRampPurchase == null ? void 0 : onRampPurchase.testMode) ? "https://app.demo.ramp.network" : "https://app.ramp.network",
           enabledFlows: [onRampPurchase.type === "BUY" ? "ONRAMP" : "OFFRAMP"],
           useSendCryptoCallback: true,
@@ -49,22 +44,15 @@ const RampEmbed = ({
           containerNode: document.getElementById("ramp-container")
         }).on("PURCHASE_CREATED", (e) => __async(void 0, null, function* () {
           const p = e.payload.purchase;
-          const [network, asset] = onRampPurchase.testMode ? [Network.ETHEREUM, OnRampAsset.ETHEREUM] : reverseCurrencyLookup(onRampConfig.assetInfo, OnRampProvider.RAMP, p.asset.symbol) || [];
-          const updated = yield para.ctx.client.updateOnRampPurchase({
-            userId: para.getUserId(),
-            walletId: onRampPurchase.walletId,
-            externalWalletAddress: onRampPurchase.externalWalletAddress,
-            purchaseId: onRampPurchase.id,
-            updates: {
-              providerKey: p.id,
-              fiatQuantity: p.fiatValue,
-              fiat: p.fiatCurrency,
-              assetQuantity: p.cryptoAmount,
-              asset,
-              network
-            }
+          const [network, asset] = onRampPurchase.testMode ? ["ETHEREUM", "ETHEREUM"] : reverseCurrencyLookup(onRampConfig.assetInfo, OnRampProvider.RAMP, p.asset.symbol) || [];
+          onUpdate({
+            providerKey: p.id,
+            fiatQuantity: p.fiatValue,
+            fiat: p.fiatCurrency,
+            assetQuantity: p.cryptoAmount,
+            asset,
+            network
           });
-          setOnRampPurchase(updated);
         })).on("WIDGET_CLOSE", () => __async(void 0, null, function* () {
           onClose == null ? void 0 : onClose();
           if (!isEmbedded) {
@@ -77,7 +65,7 @@ const RampEmbed = ({
         })).onSendCrypto((assetInfo, amount, address) => __async(void 0, null, function* () {
           try {
             const [network, asset] = reverseCurrencyLookup(onRampConfig.assetInfo, OnRampProvider.RAMP, assetInfo.symbol);
-            const txHash = yield offRampSend(para, onRampPurchase, setOnRampPurchase, {
+            const txHash = yield onDepositRequest({
               assetQuantity: amount,
               destinationAddress: address,
               contractAddress: getContractAddressFromAsset(network, asset),

package/dist/components/UserIdentifier.d.ts

@@ -1,4 +1,12 @@
+import { IconType } from '@getpara/react-components';
 import { CoreAuthInfo } from '@getpara/web-sdk';
+export declare function getAuthDisplay(authInfo: CoreAuthInfo, { withAddress }?: {
+    withAddress?: boolean;
+}): {
+    name: string | null;
+    icon?: IconType;
+    src?: string;
+};
 export declare const UserIdentifier: ({ authInfo }: {
     authInfo?: CoreAuthInfo;
 }) => import("react/jsx-runtime").JSX.Element;