@getpara/react-common 2.18.0 → 2.19.0

package/dist/components/index.d.ts

@@ -1,5 +1,3 @@
-export * from './MoonPayEmbed.js';
-export * from './RampEmbed.js';
 export * from './common.js';
 export * from './HeroSpinner.js';
 export * from './KnownDevices.js';

package/dist/components/index.js

@@ -1,6 +1,4 @@
 "use client";
-export * from "./MoonPayEmbed.js";
-export * from "./RampEmbed.js";
 export * from "./common.js";
 export * from "./HeroSpinner.js";
 export * from "./KnownDevices.js";

package/dist/types/index.d.ts

@@ -1,19 +1,6 @@
-import { AuthInfo, OnRampPurchaseUpdateParams } from '@getpara/user-management-client';
-import { OfframpDepositRequest, type OnRampConfig, type OnRampPurchase } from '@getpara/web-sdk';
+import { AuthInfo } from '@getpara/user-management-client';
 export * from './externalWalletCommon.js';
 export * from './commonTypes.js';
-export type OnRampProps = {
-    appName?: string;
-    email?: string;
-    isDark?: boolean;
-    isEmbedded?: boolean;
-    onClose?: () => void;
-    onRampConfig: OnRampConfig;
-    onRampPurchase: OnRampPurchase;
-    onDepositRequest: (_: OfframpDepositRequest) => Promise<string>;
-    onUpdate: (_: OnRampPurchaseUpdateParams) => Promise<void>;
-    onSuccess: (_: OnRampPurchaseUpdateParams) => Promise<void>;
-};
 export type ModalAuthInfo = AuthInfo & Partial<{
     pfpUrl: string | null;
     displayName: string | null;

package/dist/utils/index.d.ts

@@ -1,37 +1,6 @@
-import { TOnRampAsset, OnRampAssetInfo, OnRampProvider, TNetwork, OnRampPurchaseType, OnRampConfig, TWalletType } from '@getpara/user-management-client';
-export declare function getCurrencyCode({ assetInfo }: OnRampConfig, { network, asset, provider }: {
-    network: TNetwork;
-    asset: TOnRampAsset;
-    provider: OnRampProvider;
-}): string | undefined;
-export declare function getCurrencyCodes({ assetInfo, allowedAssets, defaultOnRampNetwork, defaultOnRampAsset }: OnRampConfig, { provider, purchaseType, walletType, }: {
-    provider: OnRampProvider;
-    purchaseType: OnRampPurchaseType;
-    walletType: TWalletType;
-}): {
-    currencyCodes: string[];
-    defaultCurrencyCode?: string;
-};
-export declare function reverseCurrencyLookup(data: OnRampAssetInfo, provider: OnRampProvider, code: string): [TNetwork, TOnRampAsset];
-export declare const TestNetworks: {
-    main: TNetwork;
-    test: TNetwork;
-}[];
-export declare function getNetworkTestEquivalent(network: TNetwork): TNetwork | undefined;
+import { TNetwork } from '@getpara/user-management-client';
 export declare function getNetworkOrMainNetEquivalent(network: TNetwork, testMode?: boolean): TNetwork;
-export declare const NetworkChainIds: {
-    chainId: string;
-    network: TNetwork;
-}[];
-export declare function getChainId(network: TNetwork): string | undefined;
 export declare function getNetworkFromChainId(chainId?: string | undefined): TNetwork | undefined;
-export declare const NetworkAssetAddresses: {
-    network: TNetwork;
-    asset: TOnRampAsset;
-    address: string;
-}[];
-export declare function getAssetFromContractAddress(network: TNetwork, contractAddress: string): TOnRampAsset | undefined;
-export declare function getContractAddressFromAsset(network: TNetwork, asset: TOnRampAsset): string | undefined;
 export * from './getDeviceLogo.js';
 export * from './getDeviceModelName.js';
 export * from './getBrowserName.js';

package/dist/utils/index.js

@@ -1,50 +1,9 @@
 "use client";
-import {
-  __spreadValues
-} from "../chunk-MMUBH76A.js";
-import { getOnRampNetworks, getOnRampAssets, toAssetInfoArray } from "@getpara/core-sdk";
-function getCurrencyCode({ assetInfo }, { network, asset, provider }) {
-  var _a, _b, _c;
-  return (_c = (_b = (_a = Object.values(assetInfo).reduce((acc, record) => __spreadValues(__spreadValues({}, acc), record), {})[network]) == null ? void 0 : _a[asset]) == null ? void 0 : _b[provider]) == null ? void 0 : _c[0];
-}
-function getCurrencyCodes({ assetInfo, allowedAssets, defaultOnRampNetwork, defaultOnRampAsset }, {
-  provider,
-  purchaseType,
-  walletType
-}) {
-  let defaultCurrencyCode;
-  const currencyCodes = getOnRampNetworks(assetInfo, {
-    walletType,
-    allowed: allowedAssets ? Object.keys(allowedAssets) : void 0
-  }).sort((a, b) => a === defaultOnRampNetwork ? -1 : b === defaultOnRampNetwork ? 1 : 0).reduce((acc, network) => {
-    const allowed = Array.isArray(allowedAssets == null ? void 0 : allowedAssets[network]) ? allowedAssets[network] : void 0;
-    return [
-      ...acc,
-      ...getOnRampAssets(assetInfo, { walletType, network, allowed }).sort((a, b) => a === defaultOnRampAsset ? -1 : b === defaultOnRampAsset ? 1 : 0).map((asset) => {
-        var _a, _b, _c, _d, _e, _f;
-        if (network === defaultOnRampNetwork && asset === defaultOnRampAsset) {
-          defaultCurrencyCode = (_c = (_b = (_a = assetInfo[walletType]) == null ? void 0 : _a[network]) == null ? void 0 : _b[asset]) == null ? void 0 : _c[provider][0];
-        }
-        return (_f = (_e = (_d = assetInfo[walletType]) == null ? void 0 : _d[network]) == null ? void 0 : _e[asset]) == null ? void 0 : _f[provider];
-      }).filter((entry) => !!entry && !!entry[1][purchaseType]).map(([code]) => code)
-    ];
-  }, []).filter((code) => !!code);
-  return { currencyCodes, defaultCurrencyCode: defaultCurrencyCode || currencyCodes[0] };
-}
-function reverseCurrencyLookup(data, provider, code) {
-  const row = toAssetInfoArray(data).find(
-    ([_, __, ___, providers]) => [code.toUpperCase(), code.toLowerCase()].includes(providers[provider][0])
-  );
-  return [row == null ? void 0 : row[1], row == null ? void 0 : row[2]];
-}
+import "../chunk-MMUBH76A.js";
 const TestNetworks = [
   { main: "ETHEREUM", test: "SEPOLIA" },
   { main: "SOLANA", test: "SOLANA_DEVNET" }
 ];
-function getNetworkTestEquivalent(network) {
-  var _a;
-  return (_a = TestNetworks.find(({ main }) => main === network)) == null ? void 0 : _a.test;
-}
 function getNetworkOrMainNetEquivalent(network, testMode) {
   var _a, _b;
   return testMode ? (_b = (_a = TestNetworks.find(({ test }) => test === network)) == null ? void 0 : _a.main) != null ? _b : network : network;
@@ -58,44 +17,10 @@ const NetworkChainIds = [
   { chainId: "42161", network: "ARBITRUM" },
   { chainId: "10", network: "OPTIMISM" }
 ];
-function getChainId(network) {
-  var _a, _b;
-  return (_b = (_a = NetworkChainIds.find(({ network: n }) => n === network)) == null ? void 0 : _a.chainId) != null ? _b : void 0;
-}
 function getNetworkFromChainId(chainId) {
   var _a;
   return chainId ? (_a = NetworkChainIds.find(({ chainId: c }) => c === chainId)) == null ? void 0 : _a.network : void 0;
 }
-const ETH_CONTRACT_ADDRESS = "0x0000000000000000000000000000000000000000";
-const NetworkAssetAddresses = [
-  { network: "ETHEREUM", asset: "USDC", address: "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48" },
-  { network: "POLYGON", asset: "USDC", address: "0x3c499c542cef5e3811e1192ce70d8cc03d5c3359" },
-  { network: "CELO", asset: "USDC", address: "0xcebA9300f2b948710d2653dD7B07f33A8B32118C" },
-  { network: "BASE", asset: "USDC", address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913" },
-  { network: "ARBITRUM", asset: "USDC", address: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831" },
-  { network: "OPTIMISM", asset: "USDC", address: "0x0b2c639c533813f4aa9d7837caf62653d097ff85" },
-  { network: "SOLANA", asset: "USDC", address: "EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v" },
-  { network: "SOLANA_DEVNET", asset: "USDC", address: "4zMMC9srt5Ri5X14GAgXhaHii3GnPAEERYPJgZJDncDU" },
-  { network: "SEPOLIA", asset: "USDC", address: "0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238" },
-  { network: "SOLANA_DEVNET", asset: "TETHER", address: "EJwZgeZrdC8TXTQbQBoL6bfuAnFUUy1PVCMB4DYPzVaS" }
-];
-function getAssetFromContractAddress(network, contractAddress) {
-  var _a, _b;
-  if (contractAddress === ETH_CONTRACT_ADDRESS) {
-    return "USDC";
-  }
-  const checkNetworks = [network, (_a = getNetworkOrMainNetEquivalent(network)) != null ? _a : void 0].filter((n) => !!n).map((n) => n);
-  return (_b = NetworkAssetAddresses.find(
-    (row) => checkNetworks.includes(row.network) && row.asset.toLowerCase() === contractAddress.toLowerCase()
-  )) == null ? void 0 : _b.asset;
-}
-function getContractAddressFromAsset(network, asset) {
-  var _a;
-  if (asset === "USDC") {
-    return ETH_CONTRACT_ADDRESS;
-  }
-  return (_a = NetworkAssetAddresses.find((row) => row.network === network && row.asset === asset)) == null ? void 0 : _a.address;
-}
 export * from "./getDeviceLogo.js";
 export * from "./getDeviceModelName.js";
 export * from "./getBrowserName.js";
@@ -105,16 +30,6 @@ export * from "./getExternalWalletIcon.js";
 export * from "./safeStyled.js";
 export * from "./openMobileUrl.js";
 export {
-  NetworkAssetAddresses,
-  NetworkChainIds,
-  TestNetworks,
-  getAssetFromContractAddress,
-  getChainId,
-  getContractAddressFromAsset,
-  getCurrencyCode,
-  getCurrencyCodes,
   getNetworkFromChainId,
-  getNetworkOrMainNetEquivalent,
-  getNetworkTestEquivalent,
-  reverseCurrencyLookup
+  getNetworkOrMainNetEquivalent
 };

package/package.json

@@ -1,11 +1,9 @@
 {
   "name": "@getpara/react-common",
-  "version": "2.18.0",
+  "version": "2.19.0",
   "dependencies": {
-    "@getpara/react-components": "2.18.0",
-    "@getpara/web-sdk": "2.18.0",
-    "@moonpay/moonpay-react": "^1.10.6",
-    "@ramp-network/ramp-instant-sdk": "^4.0.5",
+    "@getpara/react-components": "2.19.0",
+    "@getpara/web-sdk": "2.19.0",
     "framer-motion": "^11.3.31",
     "libphonenumber-js": "^1.11.7",
     "styled-components": "^6",
@@ -38,5 +36,5 @@
   ],
   "type": "module",
   "types": "dist/index.d.ts",
-  "gitHead": "4481f6f4e108e682d14c74d4433696141c47fc58"
+  "gitHead": "7dc9400777adb653c0cc28e0d9236424eb384467"
 }

package/dist/components/MoonPayEmbed.d.ts

@@ -1,5 +0,0 @@
-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,151 +0,0 @@
-"use client";
-import {
-  __async
-} from "../chunk-MMUBH76A.js";
-import { jsx } from "react/jsx-runtime";
-import { OnRampProvider } from "@getpara/web-sdk";
-import { lazy, useCallback, useEffect, useMemo, useRef, useState } from "react";
-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 = ({
-  email,
-  isDark,
-  isEmbedded,
-  onRampConfig,
-  onRampPurchase,
-  onSuccess,
-  onDepositRequest,
-  onUrlSignatureRequest
-}) => {
-  const [components, setComponents] = useState(null);
-  const widgetEmbedRef = useRef(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 }))
-    );
-    setComponents({
-      MoonPayBuyWidget: _LazyMoonPayBuyWidget,
-      MoonPaySellWidget: _LazyMoonPaySellWidget,
-      MoonPayProvider: _LazyMoonPayProvider
-    });
-  }, []);
-  const apiKey = onRampPurchase.testMode ? MOONPAY_PUBLISHABLE_KEY_TEST : MOONPAY_PUBLISHABLE_KEY;
-  const onTransactionCompleted = useCallback(
-    (payload) => __async(void 0, null, function* () {
-      try {
-        const [network, asset] = reverseCurrencyLookup(
-          onRampConfig.assetInfo,
-          OnRampProvider.MOONPAY,
-          payload.quoteCurrency.code
-        );
-        onSuccess({
-          fiatQuantity: payload.baseCurrencyAmount.toString(),
-          fiat: payload.baseCurrency.code,
-          network,
-          asset,
-          assetQuantity: payload.quoteCurrencyAmount.toString()
-        });
-      } catch (e) {
-        throw e instanceof Error ? e : new Error(e);
-      }
-    }),
-    [onRampConfig]
-  );
-  const onInitiateDeposit = useCallback(
-    (payload) => __async(void 0, null, function* () {
-      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);
-      }
-    }),
-    []
-  );
-  const widgetEmbed = useMemo(() => {
-    if (widgetEmbedRef.current) {
-      return widgetEmbedRef.current;
-    }
-    if (!components) {
-      return null;
-    }
-    const currencyCode = getCurrencyCode(onRampConfig, {
-      network: onRampPurchase.network,
-      asset: onRampPurchase.asset,
-      provider: OnRampProvider.MOONPAY
-    });
-    const widget = /* @__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,
-        walletAddress: onRampPurchase.address,
-        visible: true,
-        theme: isDark ? "dark" : "light",
-        style: {
-          height: "100%",
-          width: "100%",
-          border: "none",
-          borderRadius: 0,
-          margin: 0
-        },
-        onTransactionCompleted,
-        onUrlSignatureRequested: onUrlSignatureRequest
-      }
-    ) : /* @__PURE__ */ jsx(
-      components.MoonPaySellWidget,
-      {
-        variant: "embedded",
-        visible: true,
-        theme: isDark ? "dark" : "light",
-        style: {
-          height: "100%",
-          width: "100%",
-          border: "none",
-          borderRadius: 0,
-          margin: 0
-        },
-        email,
-        baseCurrencyCode: currencyCode,
-        quoteCurrencyAmount: onRampPurchase.fiatQuantity,
-        refundWalletAddress: onRampPurchase.address,
-        onInitiateDeposit,
-        onTransactionCompleted,
-        onUrlSignatureRequested: onUrlSignatureRequest
-      }
-    ) });
-    widgetEmbedRef.current = widget;
-    return widget;
-  }, [components]);
-  return /* @__PURE__ */ jsx(Container, { isEmbedded, children: widgetEmbed });
-};
-var MoonPayEmbed_default = MoonPayEmbed;
-const Container = safeStyled.div`
-  width: ${({ isEmbedded }) => isEmbedded ? "100%" : "100vw"};
-  height: ${({ isEmbedded }) => isEmbedded ? "640px" : "100vh"};
-
-  iframe {
-    border: 0 !important;
-  }
-`;
-export {
-  MoonPayEmbed,
-  MoonPayEmbed_default as default
-};

package/dist/components/RampEmbed.d.ts

@@ -1,4 +0,0 @@
-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

@@ -1,91 +0,0 @@
-"use client";
-import {
-  __async
-} from "../chunk-MMUBH76A.js";
-import { jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-import { RampInstantSDK } from "@ramp-network/ramp-instant-sdk";
-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 = ({
-  appName,
-  email,
-  onRampConfig,
-  onRampPurchase,
-  isEmbedded,
-  apiKey,
-  onClose,
-  onUpdate,
-  onDepositRequest
-}) => {
-  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: `${window.location.hostname}/wordmark_black.svg`,
-          hostApiKey: apiKey,
-          userAddress: onRampPurchase.address,
-          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,
-          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 ? ["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
-          });
-        })).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 onDepositRequest({
-              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
-};