@getpara/react-common 1.5.0 → 1.5.1

package/dist/index.js

@@ -1,4 +1,43 @@
 "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;
+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 __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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());
+  });
+};
 
 // src/classes/ParaInternal.ts
 import ParaWeb from "@getpara/web-sdk";
@@ -37,70 +76,73 @@ import {
 
 // src/utils/offRampSend.ts
 import { hexStringToBase64, WalletType } from "@getpara/web-sdk";
-async function offRampSend(para, { id: purchaseId, provider, walletId, walletType, address, testMode = false }, setOnRampPurchase, {
-  assetQuantity,
-  fiat,
-  fiatQuantity,
-  chainId,
-  destinationAddress,
-  contractAddress
-}) {
-  if (!purchaseId || !walletId || !walletType || !provider) {
-    throw new Error("Missing required fields");
-  }
-  try {
-    const { tx, network, asset } = await para.ctx.client.generateOffRampTx(para.getUserId(), {
-      walletId,
-      walletType,
-      provider,
-      chainId,
-      destinationAddress,
-      sourceAddress: address,
-      contractAddress,
-      testMode,
-      assetQuantity
-    });
-    let signature;
-    switch (walletType) {
-      case WalletType.EVM:
-        signature = (await para.signTransaction({
-          walletId,
-          rlpEncodedTxBase64: hexStringToBase64(tx),
-          chainId
-        }))?.signature;
-        break;
-      default:
-        throw new Error(`Unsupported wallet type: ${walletType}`);
+function offRampSend(_0, _1, _2, _3) {
+  return __async(this, arguments, function* (para, { id: purchaseId, provider, walletId, walletType, address, testMode = false }, setOnRampPurchase, {
+    assetQuantity,
+    fiat,
+    fiatQuantity,
+    chainId,
+    destinationAddress,
+    contractAddress
+  }) {
+    var _a, _b;
+    if (!purchaseId || !walletId || !walletType || !provider) {
+      throw new Error("Missing required fields");
     }
-    const { txHash } = await para.ctx.client.sendOffRampTx(para.getUserId(), {
-      tx,
-      signature: walletType === "EVM" ? `0x${signature}` : signature,
-      network,
-      walletId,
-      walletType
-    });
-    const updated = await para.ctx.client.updateOnRampPurchase({
-      userId: para.getUserId(),
-      walletId,
-      purchaseId,
-      updates: {
-        fiat,
-        fiatQuantity,
-        assetQuantity,
-        network,
-        asset
+    try {
+      const { tx, network, asset } = yield para.ctx.client.generateOffRampTx(para.getUserId(), {
+        walletId,
+        walletType,
+        provider,
+        chainId,
+        destinationAddress,
+        sourceAddress: address,
+        contractAddress,
+        testMode,
+        assetQuantity
+      });
+      let signature;
+      switch (walletType) {
+        case WalletType.EVM:
+          signature = (_a = yield para.signTransaction({
+            walletId,
+            rlpEncodedTxBase64: hexStringToBase64(tx),
+            chainId
+          })) == null ? void 0 : _a.signature;
+          break;
+        default:
+          throw new Error(`Unsupported wallet type: ${walletType}`);
       }
-    });
-    setOnRampPurchase(updated);
-    return txHash;
-  } catch (e) {
-    throw new Error(e.response?.data || e.message);
-  }
+      const { txHash } = yield para.ctx.client.sendOffRampTx(para.getUserId(), {
+        tx,
+        signature: walletType === "EVM" ? `0x${signature}` : signature,
+        network,
+        walletId,
+        walletType
+      });
+      const updated = yield para.ctx.client.updateOnRampPurchase({
+        userId: para.getUserId(),
+        walletId,
+        purchaseId,
+        updates: {
+          fiat,
+          fiatQuantity,
+          assetQuantity,
+          network,
+          asset
+        }
+      });
+      setOnRampPurchase(updated);
+      return txHash;
+    } catch (e) {
+      throw new Error(((_b = e.response) == null ? void 0 : _b.data) || e.message);
+    }
+  });
 }
 
 // src/utils/getDeviceLogo.ts
 var getDeviceLogo = (vendor, isMobile2) => {
-  switch (vendor?.toLowerCase()) {
+  switch (vendor == null ? void 0 : vendor.toLowerCase()) {
     case "apple": {
       return "apple";
     }
@@ -309,7 +351,8 @@ var formatBiometricHints = (hints) => {
   let hasMobileDevice = false, isOnKnownDevice = false;
   const deviceParsedUA = UAParser2();
   const formattedHintsByKey = {};
-  hints?.forEach((hint) => {
+  hints == null ? void 0 : hints.forEach((hint) => {
+    var _a;
     let isMobile2 = false, isKnownDevice = false, passwordManager, parsedUA, key = "";
     if (hint.useragent) {
       parsedUA = new UAParser2(hint.useragent).getResult();
@@ -323,16 +366,16 @@ var formatBiometricHints = (hints) => {
           isKnownDevice = true;
         }
       }
-      key = `${parsedUA?.browser.name}-${parsedUA?.device.type}-${parsedUA?.device.vendor}-${parsedUA?.device.model}`;
+      key = `${parsedUA == null ? void 0 : parsedUA.browser.name}-${parsedUA == null ? void 0 : parsedUA.device.type}-${parsedUA == null ? void 0 : parsedUA.device.vendor}-${parsedUA == null ? void 0 : parsedUA.device.model}`;
     }
     if (hint.aaguid) {
       const formattedAaguid = formatStringToUUID(hint.aaguid);
       if (formattedAaguid) {
-        passwordManager = aaguidMetadata[formattedAaguid]?.name;
+        passwordManager = (_a = aaguidMetadata[formattedAaguid]) == null ? void 0 : _a.name;
       }
       key = `${key}${key ? "-" : ""}${passwordManager}`;
     }
-    formattedHintsByKey[key] = { passwordManager, isMobile: isMobile2, isKnownDevice, key, ...parsedUA };
+    formattedHintsByKey[key] = __spreadValues({ passwordManager, isMobile: isMobile2, isKnownDevice, key }, parsedUA);
   });
   return {
     hasMobileDevice,
@@ -345,7 +388,7 @@ var formatBiometricHints = (hints) => {
 import parsePhoneNumberFromString from "libphonenumber-js";
 var formatPhoneNumber = (phone, countryCode) => {
   phone = phone.toString();
-  countryCode = countryCode?.toString();
+  countryCode = countryCode == null ? void 0 : countryCode.toString();
   let sanitizedNumber, parsedNumber;
   if (!!countryCode) {
     sanitizedNumber = phone.replace(/\D/g, "");
@@ -357,7 +400,7 @@ var formatPhoneNumber = (phone, countryCode) => {
     sanitizedNumber = `${phone.startsWith("+") ? "" : "+"}${phone.replace(/[^\d+]/g, "")}`;
     parsedNumber = parsePhoneNumberFromString(sanitizedNumber);
   }
-  if (parsedNumber?.isValid()) {
+  if (parsedNumber == null ? void 0 : parsedNumber.isValid()) {
     return parsedNumber.formatInternational();
   }
   return null;
@@ -374,14 +417,15 @@ function getCurrencyCodes({ assetInfo, allowedAssets, defaultOnRampNetwork, defa
     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?.[network]) ? allowedAssets[network] : void 0;
+    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 = assetInfo[walletType]?.[network]?.[asset]?.[provider][0];
+          defaultCurrencyCode = (_c = (_b = (_a = assetInfo[walletType]) == null ? void 0 : _a[network]) == null ? void 0 : _b[asset]) == null ? void 0 : _c[provider][0];
         }
-        return assetInfo[walletType]?.[network]?.[asset]?.[provider];
+        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);
@@ -391,14 +435,16 @@ function reverseCurrencyLookup(data, provider, code) {
   const row = toAssetInfoArray(data).find(
     ([_, __, ___, providers]) => [code.toUpperCase(), code.toLowerCase()].includes(providers[provider][0])
   );
-  return [row?.[1], row?.[2]];
+  return [row == null ? void 0 : row[1], row == null ? void 0 : row[2]];
 }
 var TestNetworks = [{ main: Network.ETHEREUM, test: Network.SEPOLIA }];
 function getNetworkTestEquivalent(network) {
-  return TestNetworks.find(({ main }) => main === network)?.test;
+  var _a;
+  return (_a = TestNetworks.find(({ main }) => main === network)) == null ? void 0 : _a.test;
 }
 function getNetworkOrMainNetEquivalent(network, testMode) {
-  return testMode ? TestNetworks.find(({ test }) => test === network)?.main ?? network : network;
+  var _a, _b;
+  return testMode ? (_b = (_a = TestNetworks.find(({ test }) => test === network)) == null ? void 0 : _a.main) != null ? _b : network : network;
 }
 var NetworkChainIds = [
   { chainId: "11155111", network: Network.SEPOLIA },
@@ -410,10 +456,12 @@ var NetworkChainIds = [
   { chainId: "10", network: Network.OPTIMISM }
 ];
 function getChainId(network) {
-  return NetworkChainIds.find(({ network: n }) => n === network)?.chainId ?? void 0;
+  var _a, _b;
+  return (_b = (_a = NetworkChainIds.find(({ network: n }) => n === network)) == null ? void 0 : _a.chainId) != null ? _b : void 0;
 }
 function getNetworkFromChainId(chainId) {
-  return chainId ? NetworkChainIds.find(({ chainId: c }) => c === chainId)?.network : void 0;
+  var _a;
+  return chainId ? (_a = NetworkChainIds.find(({ chainId: c }) => c === chainId)) == null ? void 0 : _a.network : void 0;
 }
 var ETH_CONTRACT_ADDRESS = "0x0000000000000000000000000000000000000000";
 var NetworkAssetAddresses = [
@@ -427,19 +475,21 @@ var NetworkAssetAddresses = [
   { network: Network.SEPOLIA, asset: OnRampAsset.USDC, address: "0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238" }
 ];
 function getAssetFromContractAddress(network, contractAddress) {
+  var _a, _b;
   if (contractAddress === ETH_CONTRACT_ADDRESS) {
     return OnRampAsset.ETHEREUM;
   }
-  const checkNetworks = [network, getNetworkOrMainNetEquivalent(network) ?? void 0].filter((n) => !!n).map((n) => Network[n]);
-  return NetworkAssetAddresses.find(
+  const checkNetworks = [network, (_a = getNetworkOrMainNetEquivalent(network)) != null ? _a : void 0].filter((n) => !!n).map((n) => Network[n]);
+  return (_b = NetworkAssetAddresses.find(
     (row) => checkNetworks.includes(row.network) && row.asset.toLowerCase() === contractAddress.toLowerCase()
-  )?.asset;
+  )) == null ? void 0 : _b.asset;
 }
 function getContractAddressFromAsset(network, asset) {
+  var _a;
   if (asset === OnRampAsset.ETHEREUM) {
     return ETH_CONTRACT_ADDRESS;
   }
-  return NetworkAssetAddresses.find((row) => row.network === network && row.asset === asset)?.address;
+  return (_a = NetworkAssetAddresses.find((row) => row.network === network && row.asset === asset)) == null ? void 0 : _a.address;
 }
 
 // src/components/MoonPayEmbed.tsx
@@ -467,11 +517,11 @@ var MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase, se
   }, []);
   const apiKey = onRampPurchase.testMode ? MOONPAY_PUBLISHABLE_KEY_TEST : MOONPAY_PUBLISHABLE_KEY;
   const onUrlSignatureRequested = useCallback(
-    async (url) => {
+    (url) => __async(void 0, null, function* () {
       if (!para.getUserId() || !onRampPurchase.walletType) {
         throw new Error("missing required fields");
       }
-      const res = await para.ctx.client.signMoonPayUrl(para.getUserId(), {
+      const res = yield para.ctx.client.signMoonPayUrl(para.getUserId(), {
         url,
         type: onRampPurchase.walletType,
         cosmosPrefix: para.cosmosPrefix,
@@ -480,7 +530,7 @@ var MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase, se
         externalWalletAddress: onRampPurchase.externalWalletAddress || void 0
       });
       return res.data.signature;
-    },
+    }),
     [onRampPurchase.walletId, onRampPurchase.walletType, para.cosmosPrefix, onRampPurchase.testMode, para]
   );
   const { currencyCodes, defaultCurrencyCode } = useMemo(
@@ -489,17 +539,17 @@ var MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase, se
       walletType: onRampPurchase.walletType,
       purchaseType: onRampPurchase.type
     }),
-    [onRampPurchase.walletType, onRampPurchase.type, onRampConfig.assetInfo, onRampConfig?.allowedAssets]
+    [onRampPurchase.walletType, onRampPurchase.type, onRampConfig.assetInfo, onRampConfig == null ? void 0 : onRampConfig.allowedAssets]
   );
   const onTransactionCompleted = useCallback(
-    async (payload) => {
+    (payload) => __async(void 0, null, function* () {
       try {
         const [network, asset] = reverseCurrencyLookup(
           onRampConfig.assetInfo,
           OnRampProvider2.MOONPAY,
           payload.quoteCurrency.code
         );
-        const updated = await para.ctx.client.updateOnRampPurchase({
+        const updated = yield para.ctx.client.updateOnRampPurchase({
           userId: para.getUserId(),
           walletId: onRampPurchase.walletId,
           purchaseId: onRampPurchase.id,
@@ -524,12 +574,12 @@ var MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase, se
       } catch (e) {
         console.error(e);
       }
-    },
+    }),
     [onRampPurchase.walletId, onRampPurchase.id, onRampPurchase.externalWalletAddress, isEmbedded]
   );
   const onInitiateDeposit = useCallback(
-    async (payload) => {
-      const txHash = await offRampSend(para, onRampPurchase, setOnRampPurchase, {
+    (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(),
@@ -538,7 +588,7 @@ var MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase, se
         chainId: payload.cryptoCurrency.chainId
       });
       return { depositId: txHash, cancelTransactionOnError: false };
-    },
+    }),
     [
       para,
       onRampPurchase.id,
@@ -553,7 +603,7 @@ var MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase, se
       return null;
     }
     const walletAddresses = currencyCodes.reduce((acc, code) => {
-      return { ...acc, [code.toLowerCase()]: onRampPurchase.address };
+      return __spreadProps(__spreadValues({}, acc), { [code.toLowerCase()]: onRampPurchase.address });
     }, {});
     return onRampPurchase.type === "BUY" ? /* @__PURE__ */ jsx(
       LazyMoonPayBuyWidget,
@@ -659,15 +709,15 @@ var RampEmbed = ({
           hostApiKey: apiKey,
           userAddress: onRampPurchase.address,
           userEmailAddress: para.getEmail(),
-          url: onRampPurchase?.testMode ? "https://app.demo.ramp.network" : "https://app.ramp.network",
+          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", async (e) => {
+        }).on("PURCHASE_CREATED", (e) => __async(void 0, null, function* () {
           const p = e.payload.purchase;
           const [network, asset] = onRampPurchase.testMode ? [Network2.ETHEREUM, OnRampAsset2.ETHEREUM] : reverseCurrencyLookup(onRampConfig.assetInfo, OnRampProvider3.RAMP, p.asset.symbol) || [];
-          const updated = await para.ctx.client.updateOnRampPurchase({
+          const updated = yield para.ctx.client.updateOnRampPurchase({
             userId: para.getUserId(),
             walletId: onRampPurchase.walletId,
             externalWalletAddress: onRampPurchase.externalWalletAddress,
@@ -682,8 +732,8 @@ var RampEmbed = ({
             }
           });
           setOnRampPurchase(updated);
-        }).on("WIDGET_CLOSE", async () => {
-          onClose?.();
+        })).on("WIDGET_CLOSE", () => __async(void 0, null, function* () {
+          onClose == null ? void 0 : onClose();
           if (!isEmbedded) {
             setTimeout(() => {
               if (typeof window !== "undefined") {
@@ -691,10 +741,10 @@ var RampEmbed = ({
               }
             }, 5e3);
           }
-        }).onSendCrypto(async (assetInfo, amount, address) => {
+        })).onSendCrypto((assetInfo, amount, address) => __async(void 0, null, function* () {
           try {
             const [network, asset] = reverseCurrencyLookup(onRampConfig.assetInfo, OnRampProvider3.RAMP, assetInfo.symbol);
-            const txHash = await offRampSend(para, onRampPurchase, setOnRampPurchase, {
+            const txHash = yield offRampSend(para, onRampPurchase, setOnRampPurchase, {
               assetQuantity: amount,
               destinationAddress: address,
               contractAddress: getContractAddressFromAsset(network, asset),
@@ -705,7 +755,7 @@ var RampEmbed = ({
           } catch (e) {
             console.error(e);
           }
-        });
+        }));
         widget.show();
         isMounted.current = true;
       } catch (e) {
@@ -804,8 +854,8 @@ var StripeEmbed = ({ para, isDark, isEmbedded, onRampPurchase, setOnRampPurchase
   const [isReady, setIsReady] = useState2(false);
   const isStripeEmbed = useMemo2(() => onRampPurchase.provider === OnRampProvider4.STRIPE, [onRampPurchase]);
   const clientSecret = useMemo2(
-    () => onRampPurchase?.provider === OnRampProvider4.STRIPE ? onRampPurchase?.providerKey : void 0,
-    [onRampPurchase?.provider, onRampPurchase?.providerKey]
+    () => (onRampPurchase == null ? void 0 : onRampPurchase.provider) === OnRampProvider4.STRIPE ? onRampPurchase == null ? void 0 : onRampPurchase.providerKey : void 0,
+    [onRampPurchase == null ? void 0 : onRampPurchase.provider, onRampPurchase == null ? void 0 : onRampPurchase.providerKey]
   );
   const [stripeOnRamp, setStripeOnRamp] = useState2();
   const onrampElementRef = React.useRef(null);
@@ -825,20 +875,20 @@ var StripeEmbed = ({ para, isDark, isEmbedded, onRampPurchase, setOnRampPurchase
     }
   }, [clientSecret, stripeOnRamp]);
   useEffect3(() => {
-    loadStripeOnramp(onRampPurchase?.testMode ? STRIPE_PUBLISHABLE_KEY_TEST : STRIPE_PUBLISHABLE_KEY).then(setStripeOnRamp);
+    loadStripeOnramp((onRampPurchase == null ? void 0 : onRampPurchase.testMode) ? STRIPE_PUBLISHABLE_KEY_TEST : STRIPE_PUBLISHABLE_KEY).then(setStripeOnRamp);
   }, []);
   const onReady = useCallback2(() => {
     setIsReady(true);
   }, []);
   const onSessionChange = useCallback2(
-    async ({ session: session2 }) => {
+    (_0) => __async(void 0, [_0], function* ({ session: session2 }) {
       if (!isStripeEmbed) {
         return;
       }
       switch (session2.status) {
         case "fulfillment_processing":
         case "fulfillment_complete":
-          const updatedPurchase = await para.ctx.client.updateOnRampPurchase({
+          const updatedPurchase = yield para.ctx.client.updateOnRampPurchase({
             userId: para.getUserId(),
             walletId: onRampPurchase.walletId,
             externalWalletAddress: onRampPurchase.externalWalletAddress,
@@ -865,7 +915,7 @@ var StripeEmbed = ({ para, isDark, isEmbedded, onRampPurchase, setOnRampPurchase
         default:
           break;
       }
-    },
+    }),
     [isStripeEmbed]
   );
   useOnrampSessionListener("onramp_ui_loaded", session, onReady);
@@ -963,16 +1013,16 @@ function useCopyToClipboard() {
       setCopied(false);
     }, 3e3);
   };
-  const copy = useCallback3(async (text) => {
+  const copy = useCallback3((text) => __async(this, null, function* () {
     if (typeof navigator === "undefined") {
       return;
     }
-    if (!navigator?.clipboard) {
+    if (!(navigator == null ? void 0 : navigator.clipboard)) {
       console.warn("Clipboard not supported");
       return false;
     }
     try {
-      await navigator.clipboard.writeText(text);
+      yield navigator.clipboard.writeText(text);
       setCopied(true);
       clearState();
       return true;
@@ -981,7 +1031,7 @@ function useCopyToClipboard() {
       setCopied(false);
       return false;
     }
-  }, []);
+  }), []);
   return [copied, copy];
 }
 
@@ -1069,14 +1119,17 @@ var KnownDevices = ({ hints, link, showCurrentDevice }) => {
   return /* @__PURE__ */ jsxs4(Container3, { children: [
     /* @__PURE__ */ jsx6(CenteredText, { weight: "semiBold", children: "Continue with one of your other known devices" }),
     !!hints.formattedHints.length && /* @__PURE__ */ jsx6(DevicesContainer, { children: hints.formattedHints.map(
-      (hint) => (showCurrentDevice && hint.isKnownDevice || !hint.isKnownDevice) && /* @__PURE__ */ jsxs4(DeviceListItem, { children: [
-        /* @__PURE__ */ jsx6(DeviceLogo, { icon: getDeviceLogo(hint.device.vendor, hint.isMobile) }),
-        /* @__PURE__ */ jsx6(CpslText4, { weight: "medium", color: "contrast", children: getDeviceModelName(hint.device.model) ?? hint.device.vendor ?? hint.os.name }),
-        (hint.browser || hint.passwordManager) && /* @__PURE__ */ jsxs4(Fragment, { children: [
-          /* @__PURE__ */ jsx6(CpslText4, { weight: "medium", color: "secondary", children: "using" }),
-          /* @__PURE__ */ jsx6(CpslText4, { weight: "medium", color: "contrast", children: hint.passwordManager ?? hint.browser.name })
-        ] })
-      ] }, hint.key)
+      (hint) => {
+        var _a, _b, _c;
+        return (showCurrentDevice && hint.isKnownDevice || !hint.isKnownDevice) && /* @__PURE__ */ jsxs4(DeviceListItem, { children: [
+          /* @__PURE__ */ jsx6(DeviceLogo, { icon: getDeviceLogo(hint.device.vendor, hint.isMobile) }),
+          /* @__PURE__ */ jsx6(CpslText4, { 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__ */ jsxs4(Fragment, { children: [
+            /* @__PURE__ */ jsx6(CpslText4, { weight: "medium", color: "secondary", children: "using" }),
+            /* @__PURE__ */ jsx6(CpslText4, { weight: "medium", color: "contrast", children: (_c = hint.passwordManager) != null ? _c : hint.browser.name })
+          ] })
+        ] }, hint.key);
+      }
     ) }),
     hints.hasMobileDevice ? /* @__PURE__ */ jsx6(QRCode, { link, icon: "paraIconQr" }) : /* @__PURE__ */ jsxs4(CenteredColumnContainer, { children: [
       /* @__PURE__ */ jsx6(FullWidthFilledDisabledInput, { noAutoDisable: true, readonly: true, disabled: true, value: link, children: /* @__PURE__ */ jsx6(CpslButton3, { slot: "end", variant: "ghost", onClick: handleCopy, children: /* @__PURE__ */ jsx6(CpslIcon3, { icon: isCopied ? "check" : "copy" }) }) }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpara/react-common",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,8 +11,8 @@
     "*.css"
   ],
   "dependencies": {
-    "@getpara/react-components": "1.5.0",
-    "@getpara/web-sdk": "1.5.0",
+    "@getpara/react-components": "1.5.1",
+    "@getpara/web-sdk": "1.5.1",
     "@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": "0e3c1401b4f1da60b288cdde7695077c9bcbc48f"
+  "gitHead": "f77e0f5e162a1672219b01dbf7c06a3baadd2f35"
 }