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

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

@@ -20,6 +20,6 @@ export declare class ParaInternal extends ParaWeb {
     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;
+        url?: string;
     }>;
 }

package/dist/classes/ParaInternal.js

@@ -0,0 +1,22 @@
+"use client";
+import "../chunk-GOCCUU3Z.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;
+    this.getPortalURL = super.getPortalURL;
+    this.isProviderModalDisabled = super.isProviderModalDisabled;
+    this.setAuth = super.setAuth;
+    this.supportedAuthMethods = super.supportedAuthMethods;
+    this.constructPortalUrl = super.constructPortalUrl;
+    this.getNewCredentialAndUrl = super.getNewCredentialAndUrl;
+  }
+}
+export {
+  ParaInternal
+};

package/dist/classes/index.js

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

package/dist/components/HeroSpinner.js

@@ -0,0 +1,55 @@
+"use client";
+import "../chunk-GOCCUU3Z.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CpslIcon, CpslSpinner, CpslText } from "@getpara/react-components";
+import styled from "styled-components";
+function HeroSpinner({
+  icon,
+  status = "inactive",
+  text
+}) {
+  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__ */ 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 })
+    ] })
+  ] });
+}
+const Root = styled.div`
+  height: 276px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+`;
+const Hero = styled.div`
+  width: 150px;
+  height: 150px;
+  margin: 16px 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+`;
+const Text = styled.div`
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  color: ${({ status }) => status === "error" ? "var(--cpsl-color-utility-red)" : "auto"};
+`;
+const Spinner = styled(CpslSpinner)`
+  position: absolute;
+  width: 150px;
+  height: 150px;
+  top: 0;
+  left: 0;
+  right: 0;
+`;
+export {
+  HeroSpinner
+};

package/dist/components/KnownDevices.js

@@ -0,0 +1,60 @@
+"use client";
+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 { 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 = styled(CenteredColumnContainer)`
+  gap: 16px;
+`;
+const DevicesContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background: var(--cpsl-color-background-4);
+  padding: 16px;
+  width: 100%;
+  border-radius: 16px;
+`;
+const DeviceListItem = styled.div`
+  display: flex;
+  gap: 4px;
+  align-items: center;
+`;
+const DeviceLogo = styled(CpslIcon)`
+  --icon-color: var(--cpsl-color-text-contrast);
+  --height: 16px;
+  --width: 16px;
+`;
+export {
+  KnownDevices
+};

package/dist/components/MoonPayEmbed.js

@@ -0,0 +1,184 @@
+"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 } from "../utils/index.js";
+import styled from "styled-components";
+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 = styled.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 styled from "styled-components";
+import { CpslIcon } from "@getpara/react-components";
+const BannerContainerWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  background-color: transparent;
+`;
+const BannerContainer = styled.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 = styled(CpslIcon)`
+  --icon-color: #fbbc04;
+  --width: ${({ $size }) => $size || "24px"};
+  --height: ${({ $size }) => $size || "24px"};
+  margin-right: 6px;
+  flex-shrink: 0;
+`;
+const BannerText = styled.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 styled from "styled-components";
+import { useCopyToClipboard } from "../hooks/index.js";
+import { isMobile } from "@getpara/web-sdk";
+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 = styled.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 = styled(CpslQrCode)`
+  --qr-box-shadow: none;
+  --qr-border-radius: 0px;
+`;
+const CopyButton = styled(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 = styled(CopyButton)`
+  --button-padding-top: 4px;
+  --button-padding-bottom: 4px;
+
+  padding: 0px 12px;
+`;
+const CopyIcon = styled(CpslIcon)`
+  --width: 16px;
+  --height: 16px;
+  --icon-color: var(--cpsl-color-text-contrast);
+`;
+const LoadingContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: ${({ $size }) => `${$size}px`};
+  width: ${({ $size }) => `${$size}px`};
+`;
+export {
+  QRCode
+};

package/dist/components/RampEmbed.js

@@ -0,0 +1,103 @@
+"use client";
+import {
+  __async
+} from "../chunk-GOCCUU3Z.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";
+const TEST_MODE_FORBIDDEN = ["ETH_ETH", "ETH_USDC"];
+const RampEmbed = ({
+  para,
+  appName,
+  onRampConfig,
+  onRampPurchase,
+  isEmbedded,
+  apiKey,
+  onClose,
+  setOnRampPurchase
+}) => {
+  const { currencyCodes } = getCurrencyCodes(onRampConfig, {
+    provider: OnRampProvider.RAMP,
+    purchaseType: onRampPurchase.type,
+    walletType: onRampPurchase.walletType
+  });
+  const isMounted = useRef(false);
+  useEffect(() => {
+    if (!isMounted.current) {
+      try {
+        const widget = new RampInstantSDK({
+          hostAppName: appName,
+          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`,
+          hostApiKey: apiKey,
+          userAddress: onRampPurchase.address,
+          userEmailAddress: para.getEmail(),
+          url: (onRampPurchase == null ? void 0 : onRampPurchase.testMode) ? "https://app.demo.ramp.network" : "https://app.ramp.network",
+          enabledFlows: [onRampPurchase.type === "BUY" ? "ONRAMP" : "OFFRAMP"],
+          useSendCryptoCallback: true,
+          variant: "embedded-mobile",
+          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
+            }
+          });
+          setOnRampPurchase(updated);
+        })).on("WIDGET_CLOSE", () => __async(void 0, null, function* () {
+          onClose == null ? void 0 : onClose();
+          if (!isEmbedded) {
+            setTimeout(() => {
+              if (typeof window !== "undefined") {
+                window.close();
+              }
+            }, 5e3);
+          }
+        })).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, {
+              assetQuantity: amount,
+              destinationAddress: address,
+              contractAddress: getContractAddressFromAsset(network, asset),
+              chainId: getChainId(network),
+              testMode: onRampPurchase.testMode
+            });
+            return { txHash };
+          } catch (e) {
+            console.error(e);
+          }
+        }));
+        widget.show();
+        isMounted.current = true;
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }, []);
+  return /* @__PURE__ */ jsx("div", { id: "ramp-container", style: { minWidth: "320px", width: "100%", height: "767px" } });
+};
+export {
+  RampEmbed
+};

package/dist/components/StripeEmbed.d.ts

@@ -1,4 +1,4 @@
 import { Props } from '../types/index.js';
 export declare const STRIPE_PUBLISHABLE_KEY = "pk_live_51MvquNGrzDeP5yP9EgVSMBPQbrbg0oHDjPIIXypePd0jzOFjbadyfO7wBKLHhUtbKIUiEUVC3YYcTJyAmJ8xA7JE00T2UDfYKz";
-export declare const STRIPE_PUBLISHABLE_KEY_TEST = "pk_test_51Q2z5k2epVn9Kq0ZSbUzuetKb4azH6E6UPcvWmjRxvHmxLAJbIK0pwDbPQo63W9OyDng337ntNu3ZXx3AJ7MhFmR00XgfRmPgP";
+export declare const STRIPE_PUBLISHABLE_KEY_TEST = "pk_test_51MvquNGrzDeP5yP98WgPaAUgQ50I3OpfPhVfiLO47FBHepJnZRPO62IzZY2uxT5ovhSS10RwcTcnaVil1mcJOzIi00dHapODdS";
 export declare const StripeEmbed: ({ para, isDark, isEmbedded, onRampPurchase, setOnRampPurchase }: Props) => import("react/jsx-runtime").JSX.Element;