@getpara/react-common 1.9.0 → 1.11.0

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

@@ -1,7 +1,5 @@
 "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;
@@ -17,7 +15,6 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -41,6 +38,5 @@ var __async = (__this, __arguments, generator) => {
 
 export {
   __spreadValues,
-  __spreadProps,
   __async
 };

package/dist/classes/ParaInternal.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-IV3L3JVM.js";
+import "../chunk-GOCCUU3Z.js";
 import ParaWeb from "@getpara/web-sdk";
 class ParaInternal extends ParaWeb {
   constructor() {

package/dist/components/HeroSpinner.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-IV3L3JVM.js";
+import "../chunk-GOCCUU3Z.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CpslIcon, CpslSpinner, CpslText } from "@getpara/react-components";
 import styled from "styled-components";

package/dist/components/KnownDevices.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-IV3L3JVM.js";
+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";

package/dist/components/MoonPayEmbed.js

@@ -1,13 +1,11 @@
 "use client";
 import {
-  __async,
-  __spreadProps,
-  __spreadValues
-} from "../chunk-IV3L3JVM.js";
+  __async
+} from "../chunk-GOCCUU3Z.js";
 import { jsx } from "react/jsx-runtime";
-import { OnRampProvider, OnRampPurchaseStatus } from "@getpara/web-sdk";
+import { getNetworkPrefix, OnRampProvider, OnRampPurchaseStatus } from "@getpara/web-sdk";
 import { lazy, useCallback, useEffect, useMemo, useState } from "react";
-import { getCurrencyCodes, reverseCurrencyLookup, offRampSend } from "../utils/index.js";
+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";
@@ -38,7 +36,7 @@ const MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase,
       const res = yield para.ctx.client.signMoonPayUrl(para.getUserId(), {
         url,
         type: onRampPurchase.walletType,
-        cosmosPrefix: para.cosmosPrefix,
+        cosmosPrefix: getNetworkPrefix(onRampPurchase.network),
         testMode: onRampPurchase.testMode,
         walletId: onRampPurchase.walletId || void 0,
         externalWalletAddress: onRampPurchase.externalWalletAddress || void 0
@@ -47,14 +45,6 @@ const MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase,
     }),
     [onRampPurchase.walletId, onRampPurchase.walletType, para.cosmosPrefix, onRampPurchase.testMode, para]
   );
-  const { currencyCodes, defaultCurrencyCode } = useMemo(
-    () => getCurrencyCodes(onRampConfig, {
-      provider: OnRampProvider.MOONPAY,
-      walletType: onRampPurchase.walletType,
-      purchaseType: onRampPurchase.type
-    }),
-    [onRampPurchase.walletType, onRampPurchase.type, onRampConfig.assetInfo, onRampConfig == null ? void 0 : onRampConfig.allowedAssets]
-  );
   const onTransactionCompleted = useCallback(
     (payload) => __async(void 0, null, function* () {
       try {
@@ -116,18 +106,19 @@ const MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase,
     if (!LazyMoonPayBuyWidget || !LazyMoonPaySellWidget) {
       return null;
     }
-    const walletAddresses = currencyCodes.reduce((acc, code) => {
-      return __spreadProps(__spreadValues({}, acc), { [code.toLowerCase()]: onRampPurchase.address });
-    }, {});
+    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,
-        showOnlyCurrencies: currencyCodes.join(","),
-        defaultCurrencyCode,
-        walletAddresses: JSON.stringify(walletAddresses),
+        currencyCode,
+        walletAddress: onRampPurchase.address,
         visible: true,
         theme: isDark ? "dark" : "light",
         style: {
@@ -144,7 +135,6 @@ const MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase,
       LazyMoonPaySellWidget,
       {
         variant: "embedded",
-        refundWalletAddresses: JSON.stringify(walletAddresses),
         visible: true,
         theme: isDark ? "dark" : "light",
         style: {
@@ -154,7 +144,8 @@ const MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase,
           borderRadius: 0,
           margin: 0
         },
-        defaultBaseCurrencyCode: currencyCodes[0],
+        baseCurrencyCode: currencyCode,
+        refundWalletAddress: onRampPurchase.address,
         onInitiateDeposit,
         onTransactionCompleted,
         onUrlSignatureRequested
@@ -165,8 +156,7 @@ const MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase,
     onRampPurchase.address,
     onRampPurchase.walletId,
     onRampPurchase.walletType,
-    defaultCurrencyCode,
-    currencyCodes,
+    onRampPurchase.asset,
     onInitiateDeposit,
     onTransactionCompleted,
     onUrlSignatureRequested,

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

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-IV3L3JVM.js";
+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";

package/dist/components/RampEmbed.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   __async
-} from "../chunk-IV3L3JVM.js";
+} from "../chunk-GOCCUU3Z.js";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { RampInstantSDK } from "@ramp-network/ramp-instant-sdk";

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;

package/dist/components/StripeEmbed.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   __async
-} from "../chunk-IV3L3JVM.js";
+} from "../chunk-GOCCUU3Z.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { loadStripeOnramp } from "@stripe/crypto";
@@ -10,7 +10,7 @@ import { CpslSpinner } from "@getpara/react-components";
 import { SpinnerContainer } from "./common.js";
 import styled from "styled-components";
 const STRIPE_PUBLISHABLE_KEY = "pk_live_51MvquNGrzDeP5yP9EgVSMBPQbrbg0oHDjPIIXypePd0jzOFjbadyfO7wBKLHhUtbKIUiEUVC3YYcTJyAmJ8xA7JE00T2UDfYKz";
-const STRIPE_PUBLISHABLE_KEY_TEST = "pk_test_51Q2z5k2epVn9Kq0ZSbUzuetKb4azH6E6UPcvWmjRxvHmxLAJbIK0pwDbPQo63W9OyDng337ntNu3ZXx3AJ7MhFmR00XgfRmPgP";
+const STRIPE_PUBLISHABLE_KEY_TEST = "pk_test_51MvquNGrzDeP5yP98WgPaAUgQ50I3OpfPhVfiLO47FBHepJnZRPO62IzZY2uxT5ovhSS10RwcTcnaVil1mcJOzIi00dHapODdS";
 const AssetCodes = {
   eth: OnRampAsset.ETHEREUM,
   matic: OnRampAsset.POLYGON,

package/dist/components/UserIdentifier.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-IV3L3JVM.js";
+import "../chunk-GOCCUU3Z.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CpslAvatar, CpslIcon, CpslText } from "@getpara/react-components";
 import styled from "styled-components";

package/dist/components/common.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-IV3L3JVM.js";
+import "../chunk-GOCCUU3Z.js";
 import { CpslButton, CpslInput, CpslText } from "@getpara/react-components";
 import styled from "styled-components";
 const SpinnerContainer = styled.div`

package/dist/components/index.d.ts

@@ -6,3 +6,4 @@ export * from './HeroSpinner.js';
 export * from './KnownDevices.js';
 export * from './QRCode.js';
 export * from './UserIdentifier.js';
+export * from './NetworkSpeedBanner.js';

package/dist/components/index.js

@@ -7,3 +7,4 @@ export * from "./HeroSpinner.js";
 export * from "./KnownDevices.js";
 export * from "./QRCode.js";
 export * from "./UserIdentifier.js";
+export * from "./NetworkSpeedBanner.js";

package/dist/constants/aaguiMetadata.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-IV3L3JVM.js";
+import "../chunk-GOCCUU3Z.js";
 const aaguidMetadata = {
   "ea9b8d66-4d01-1d21-3ce4-b6b48cb575d4": {
     name: "Google Password Manager",

package/dist/hooks/useCopyToClipboard.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   __async
-} from "../chunk-IV3L3JVM.js";
+} from "../chunk-GOCCUU3Z.js";
 import { useCallback, useState } from "react";
 function useCopyToClipboard() {
   const [copied, setCopied] = useState(false);

package/dist/utils/formatBiometricHints.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   __spreadValues
-} from "../chunk-IV3L3JVM.js";
+} from "../chunk-GOCCUU3Z.js";
 import { UAParser } from "ua-parser-js";
 import { aaguidMetadata } from "../constants/aaguiMetadata.js";
 const formatStringToUUID = (str) => {

package/dist/utils/formatPhoneNumber.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-IV3L3JVM.js";
+import "../chunk-GOCCUU3Z.js";
 import parsePhoneNumberFromString from "libphonenumber-js";
 const formatPhoneNumber = (phone, countryCode) => {
   phone = phone.toString();

package/dist/utils/getBrowserName.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-IV3L3JVM.js";
+import "../chunk-GOCCUU3Z.js";
 import { UAParser } from "ua-parser-js";
 const getBrowserName = () => new UAParser().getBrowser().name;
 export {

package/dist/utils/getDeviceLogo.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-IV3L3JVM.js";
+import "../chunk-GOCCUU3Z.js";
 const getDeviceLogo = (vendor, isMobile) => {
   switch (vendor == null ? void 0 : vendor.toLowerCase()) {
     case "apple": {

package/dist/utils/getDeviceModelName.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-IV3L3JVM.js";
+import "../chunk-GOCCUU3Z.js";
 const getDeviceModelName = (model) => {
   if (!model) {
     return void 0;

package/dist/utils/getExternalWalletDisplayName.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-IV3L3JVM.js";
+import "../chunk-GOCCUU3Z.js";
 import { truncateAddress, WalletType } from "@getpara/web-sdk";
 const getExternalWalletDisplayName = ({ address, type }) => {
   const walletType = type;

package/dist/utils/index.d.ts

@@ -1,4 +1,9 @@
 import { OnRampAsset, OnRampAssetInfo, OnRampProvider, Network, OnRampPurchaseType, OnRampConfig, WalletType } from '@getpara/web-sdk';
+export declare function getCurrencyCode({ assetInfo }: OnRampConfig, { network, asset, provider }: {
+    network: Network;
+    asset: OnRampAsset;
+    provider: OnRampProvider;
+}): string | undefined;
 export declare function getCurrencyCodes({ assetInfo, allowedAssets, defaultOnRampNetwork, defaultOnRampAsset }: OnRampConfig, { provider, purchaseType, walletType, }: {
     provider: OnRampProvider;
     purchaseType: OnRampPurchaseType;

package/dist/utils/index.js

@@ -1,5 +1,7 @@
 "use client";
-import "../chunk-IV3L3JVM.js";
+import {
+  __spreadValues
+} from "../chunk-GOCCUU3Z.js";
 import {
   OnRampAsset,
   Network,
@@ -7,6 +9,10 @@ import {
   getOnRampAssets,
   toAssetInfoArray
 } from "@getpara/web-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,
@@ -110,6 +116,7 @@ export {
   getAssetFromContractAddress,
   getChainId,
   getContractAddressFromAsset,
+  getCurrencyCode,
   getCurrencyCodes,
   getNetworkFromChainId,
   getNetworkOrMainNetEquivalent,

package/dist/utils/offRampSend.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   __async
-} from "../chunk-IV3L3JVM.js";
+} from "../chunk-GOCCUU3Z.js";
 import { hexStringToBase64, WalletType } from "@getpara/web-sdk";
 function offRampSend(_0, _1, _2, _3) {
   return __async(this, arguments, function* (para, { id: purchaseId, provider, walletId, walletType, address, testMode = false }, setOnRampPurchase, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpara/react-common",
-  "version": "1.9.0",
+  "version": "1.11.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,8 +11,8 @@
     "*.css"
   ],
   "dependencies": {
-    "@getpara/react-components": "1.9.0",
-    "@getpara/web-sdk": "1.9.0",
+    "@getpara/react-components": "1.11.0",
+    "@getpara/web-sdk": "1.11.0",
     "@moonpay/moonpay-react": "^1.8.3",
     "@ramp-network/ramp-instant-sdk": "^4.0.5",
     "@stripe/crypto": "^0.0.4",
@@ -43,5 +43,5 @@
   "resolutions": {
     "styled-components": "^6"
   },
-  "gitHead": "3d749844bf071e2c8de2769dd16e17c026951109"
+  "gitHead": "91b68e4ead22e2104307c934f2a582245b176619"
 }