@getpara/react-common 2.0.0-fc.2 → 2.0.0

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

@@ -7,20 +7,23 @@ export declare class ParaInternal extends ParaWeb implements InternalInterface {
     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/web-sdk").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">;
@@ -28,4 +31,14 @@ export declare class ParaInternal extends ParaWeb implements InternalInterface {
     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,5 +1,5 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import "../chunk-MMUBH76A.js";
 import ParaWeb from "@getpara/web-sdk";
 class ParaInternal extends ParaWeb {
   constructor() {
@@ -13,7 +13,10 @@ 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;
@@ -21,6 +24,17 @@ class ParaInternal extends ParaWeb {
     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 = 'pending' | 'error' | 'idle' | 'success';
-export declare function HeroSpinner({ icon, status, text, }: PropsWithChildren<{
+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,12 +1,13 @@
 "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 { safeStyled } from "../utils/index.js";
 function HeroSpinner({
   icon,
   status = "idle",
-  text
+  text,
+  secondaryText
 }) {
   return /* @__PURE__ */ jsxs(Root, { children: [
     /* @__PURE__ */ jsxs(Hero, { children: [
@@ -21,11 +22,13 @@ function HeroSpinner({
         {
           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 = safeStyled.div`
@@ -49,6 +52,9 @@ const Text = safeStyled.div`
   align-items: center;
   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 = safeStyled(CpslSpinner)`
   position: absolute;
   width: 150px;

package/dist/components/KnownDevices.js

@@ -1,5 +1,5 @@
 "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 { CenteredColumnContainer, FullWidthFilledDisabledInput, CenteredText } from "./common.js";

package/dist/components/MoonPayEmbed.d.ts

@@ -1,3 +1,5 @@
 import { OnRampProps } from '../types/index.js';
-export declare const MoonPayEmbed: ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase, setOnRampPurchase }: OnRampProps) => import("react/jsx-runtime").JSX.Element;
+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,17 +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, safeStyled } from "../utils/index.js";
+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 }))
@@ -22,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 {
@@ -52,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, {
@@ -110,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,
@@ -128,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,
@@ -143,30 +118,29 @@ 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 = safeStyled.div`

package/dist/components/NetworkSpeedBanner.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import "../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { CpslIcon } from "@getpara/react-components";
@@ -23,9 +23,7 @@ const BannerContainer = safeStyled.div`
   position: relative;
   z-index: 10;
   display: inline-flex;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
+  flex-wrap: wrap;
 `;
 const WarningIcon = safeStyled(CpslIcon)`
   --icon-color: #fbbc04;

package/dist/components/QRCode.js

@@ -1,5 +1,5 @@
 "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 { useCopyToClipboard } from "../hooks/index.js";

package/dist/components/RampEmbed.d.ts

@@ -1,4 +1,4 @@
 import { OnRampProps } from '../types/index.js';
-export declare const RampEmbed: ({ para, appName, onRampConfig, onRampPurchase, isEmbedded, apiKey, onClose, setOnRampPurchase, }: OnRampProps & {
+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

@@ -1,28 +1,23 @@
 "use client";
 import {
   __async
-} from "../chunk-GOCCUU3Z.js";
+} from "../chunk-MMUBH76A.js";
 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;

package/dist/components/UserIdentifier.js

@@ -1,35 +1,43 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import {
+  __spreadValues
+} from "../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CpslAvatar, CpslIcon, CpslText } from "@getpara/react-components";
-import { displayPhoneNumber } from "@getpara/web-sdk";
-import { getExternalWalletDisplayName, safeStyled } from "../utils/index.js";
-function defaultDisplay(authInfo) {
-  const { authType, identifier, externalWallet } = authInfo;
+import { displayPhoneNumber, truncateAddress } from "@getpara/web-sdk";
+import { getExternalWalletDisplayName, getExternalWalletIcon, safeStyled } from "../utils/index.js";
+function getAuthDisplay(authInfo, { withAddress = false } = {}) {
+  var _a;
+  const { authType, displayName, identifier, pfpUrl, externalWallet } = authInfo;
   switch (authType) {
     case "email":
-      return { defaultName: identifier.toLowerCase(), defaultIcon: "mail" };
+      return { name: identifier.toLowerCase(), icon: "mail" };
     case "phone":
-      return { defaultName: displayPhoneNumber(identifier), defaultIcon: "phone" };
+      return { name: displayPhoneNumber(identifier), icon: "phone" };
     case "farcaster":
-      return { defaultName: `@${identifier}`, defaultIcon: "farcasterBrand" };
+      return __spreadValues({ name: displayName != null ? displayName : `@${identifier}` }, pfpUrl ? { src: pfpUrl } : { icon: "farcasterBrand" });
     case "telegram":
-      return { defaultName: `Telegram User @${identifier}`, defaultIcon: "telegramBrand" };
+      return __spreadValues({
+        name: displayName != null ? displayName : `Telegram User @${identifier}`
+      }, pfpUrl ? { src: pfpUrl } : { icon: "telegramBrand" });
     case "externalWallet":
-      return { defaultName: getExternalWalletDisplayName(externalWallet), defaultIcon: "wallet" };
+      return {
+        name: externalWallet ? getExternalWalletDisplayName(externalWallet, { withAddress }) : truncateAddress(identifier, "EVM"),
+        icon: (_a = getExternalWalletIcon(externalWallet == null ? void 0 : externalWallet.providerId)) != null ? _a : "wallet02"
+      };
     default:
-      return { defaultName: null, defaultIcon: null };
+      return { name: null, icon: null };
   }
 }
 const UserIdentifier = ({ authInfo }) => {
   if (!authInfo) {
     return null;
   }
-  const { authType, displayName, pfpUrl } = authInfo;
-  const { defaultName, defaultIcon } = defaultDisplay(authInfo);
+  const { authType } = authInfo;
+  const { name, icon, src } = getAuthDisplay(authInfo, { withAddress: true });
   return /* @__PURE__ */ jsxs(Container, { children: [
-    /* @__PURE__ */ jsx(IconContainer, { children: pfpUrl ? /* @__PURE__ */ jsx(Avatar, { src: pfpUrl, size: "20px", variant: "round" }) : /* @__PURE__ */ jsx(Icon, { icon: defaultIcon, size: authType === "telegram" ? "20px" : "13px" }) }),
-    /* @__PURE__ */ jsx(IdentifierText, { variant: "bodyS", weight: "medium", children: displayName || defaultName })
+    /* @__PURE__ */ jsx(IconContainer, { children: src ? /* @__PURE__ */ jsx(Avatar, { src, size: "20px", variant: "round" }) : /* @__PURE__ */ jsx(Icon, { icon, size: authType === "telegram" ? "20px" : "13px" }) }),
+    /* @__PURE__ */ jsx(IdentifierText, { variant: "bodyS", weight: "medium", children: name })
   ] });
 };
 const Container = safeStyled.div`
@@ -61,5 +69,6 @@ const Avatar = safeStyled(CpslAvatar)`
   --container-padding: 0;
 `;
 export {
-  UserIdentifier
+  UserIdentifier,
+  getAuthDisplay
 };

package/dist/components/WalletSelect.d.ts

@@ -0,0 +1,33 @@
+import { AvailableWallet, TWalletType, TExternalWallet } from '@getpara/web-sdk';
+type EntryProps = {
+    name?: string;
+    type?: TWalletType;
+    externalWallet?: TExternalWallet | string;
+    withCopy?: boolean;
+    withIcon?: boolean;
+    copyValue?: string;
+};
+export declare const WalletSelect: ({ isDark, style, className, value, onChange, options, getEntryProps, getSelectValue, helperText, }: {
+    isDark: any;
+    style?: React.CSSProperties;
+    className?: string;
+    value: AvailableWallet;
+    onChange: (_: AvailableWallet) => void;
+    options: AvailableWallet[];
+    getEntryProps: (wallet: AvailableWallet) => EntryProps;
+    getSelectValue: (wallet: AvailableWallet) => `${string}~${TWalletType}`;
+    helperText?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
+    ref?: import("react").Ref<any>;
+}, {
+    $width: number;
+    $top?: number;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;
+export declare const SelectItem: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
+    ref?: import("react").Ref<any>;
+}, {
+    isMultiOption?: boolean;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;
+export declare const SelectContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export {};