@getpara/react-common 2.0.0-alpha.5 → 2.0.0-alpha.50

package/dist/types/index.d.ts

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

package/dist/types/index.js

@@ -1,2 +1,3 @@
 "use client";
 export * from "./externalWalletCommon.js";
+export * from "./commonTypes.js";

package/dist/utils/formatBiometricHints.d.ts

@@ -10,5 +10,5 @@ export type BiometricHints = {
     isOnKnownDevice: boolean;
     formattedHints: FormattedBiometricHint[];
 };
-export declare const formatBiometricHints: (hints: BiometricLocationHint[]) => BiometricHints;
+export declare const formatBiometricHints: (hints: BiometricLocationHint[], isPasskeySupported?: boolean) => BiometricHints;
 export {};

package/dist/utils/formatBiometricHints.js

@@ -10,7 +10,7 @@ const formatStringToUUID = (str) => {
   }
   return `${str.slice(0, 8)}-${str.slice(8, 12)}-${str.slice(12, 16)}-${str.slice(16, 20)}-${str.slice(20)}`;
 };
-const formatBiometricHints = (hints) => {
+const formatBiometricHints = (hints, isPasskeySupported = false) => {
   let hasMobileDevice = false, isOnKnownDevice = false;
   const deviceParsedUA = UAParser();
   const formattedHintsByKey = {};
@@ -24,7 +24,7 @@ const formatBiometricHints = (hints) => {
         hasMobileDevice = true;
       }
       if (deviceParsedUA) {
-        if (deviceParsedUA.browser.name === parsedUA.browser.name && deviceParsedUA.device.type === parsedUA.device.type && deviceParsedUA.device.vendor === parsedUA.device.vendor && deviceParsedUA.device.model === parsedUA.device.model) {
+        if (isPasskeySupported && deviceParsedUA.browser.name === parsedUA.browser.name && deviceParsedUA.device.type === parsedUA.device.type && deviceParsedUA.device.vendor === parsedUA.device.vendor && deviceParsedUA.device.model === parsedUA.device.model) {
           isOnKnownDevice = true;
           isKnownDevice = true;
         }

package/dist/utils/getExternalWalletDisplayName.d.ts

@@ -1,2 +1,4 @@
 import { ExternalWalletInfo } from '@getpara/user-management-client';
-export declare const getExternalWalletDisplayName: ({ address, type, addressBech32 }: ExternalWalletInfo) => string;
+export declare const getExternalWalletDisplayName: ({ address, type, providerId, addressBech32 }: ExternalWalletInfo, { withAddress }?: {
+    withAddress?: boolean;
+}) => string;

package/dist/utils/getExternalWalletDisplayName.js

@@ -1,21 +1,13 @@
 "use client";
 import "../chunk-GOCCUU3Z.js";
 import { truncateAddress } from "@getpara/web-sdk";
-const getExternalWalletDisplayName = ({ address, type, addressBech32 }) => {
+const getExternalWalletDisplayName = ({ address, type, providerId, addressBech32 }, { withAddress = false } = {}) => {
   const walletType = type;
-  let walletTypeDisplay;
-  switch (walletType) {
-    case "EVM":
-      walletTypeDisplay = "EVM";
-      break;
-    case "SOLANA":
-      walletTypeDisplay = "Solana";
-      break;
-    case "COSMOS":
-      walletTypeDisplay = "Cosmos";
-      break;
-  }
-  return `${walletTypeDisplay} ${truncateAddress(addressBech32 != null ? addressBech32 : address, walletType)}`;
+  return `${providerId != null ? providerId : {
+    EVM: "EVM",
+    SOLANA: "Solana",
+    COSMOS: "Cosmos"
+  }[type]}${withAddress ? ` ${truncateAddress(addressBech32 != null ? addressBech32 : address, walletType)}` : ""}`;
 };
 export {
   getExternalWalletDisplayName

package/dist/utils/getExternalWalletIcon.d.ts

@@ -0,0 +1,5 @@
+import { TExternalWallet } from '@getpara/web-sdk';
+import { IconType } from '@getpara/react-components';
+export declare function getExternalWalletIcon(internalId: TExternalWallet | string | undefined, { branded }?: {
+    branded?: boolean;
+}): IconType | undefined;

package/dist/utils/getExternalWalletIcon.js

@@ -0,0 +1,17 @@
+"use client";
+import "../chunk-GOCCUU3Z.js";
+import { ACCOUNT_TYPES } from "../constants/oAuthLogos.js";
+function getExternalWalletIcon(internalId, { branded = false } = {}) {
+  var _a;
+  if (!internalId) {
+    return "wallet02";
+  }
+  const data = (_a = ACCOUNT_TYPES) == null ? void 0 : _a[internalId];
+  if (!data) {
+    return "wallet02";
+  }
+  return branded ? data.iconBranded || data.icon : data.icon;
+}
+export {
+  getExternalWalletIcon
+};

package/dist/utils/index.d.ts

@@ -32,9 +32,10 @@ export declare const NetworkAssetAddresses: {
 }[];
 export declare function getAssetFromContractAddress(network: Network, contractAddress: string): OnRampAsset | undefined;
 export declare function getContractAddressFromAsset(network: Network, asset: OnRampAsset): string | undefined;
-export * from './offRampSend.js';
 export * from './getDeviceLogo.js';
 export * from './getDeviceModelName.js';
 export * from './getBrowserName.js';
 export * from './formatBiometricHints.js';
 export * from './getExternalWalletDisplayName.js';
+export * from './getExternalWalletIcon.js';
+export * from './safeStyled.js';

package/dist/utils/index.js

@@ -102,12 +102,13 @@ function getContractAddressFromAsset(network, asset) {
   }
   return (_a = NetworkAssetAddresses.find((row) => row.network === network && row.asset === asset)) == null ? void 0 : _a.address;
 }
-export * from "./offRampSend.js";
 export * from "./getDeviceLogo.js";
 export * from "./getDeviceModelName.js";
 export * from "./getBrowserName.js";
 export * from "./formatBiometricHints.js";
 export * from "./getExternalWalletDisplayName.js";
+export * from "./getExternalWalletIcon.js";
+export * from "./safeStyled.js";
 export {
   NetworkAssetAddresses,
   NetworkChainIds,

package/dist/utils/safeStyled.d.ts

@@ -0,0 +1,2 @@
+import styled from 'styled-components';
+export declare const safeStyled: typeof styled;

package/dist/utils/safeStyled.js

@@ -0,0 +1,25 @@
+"use client";
+import "../chunk-GOCCUU3Z.js";
+import styled from "styled-components";
+const createStubComponent = () => {
+  const StubComponent = () => null;
+  StubComponent.attrs = () => createStubComponent();
+  StubComponent.withConfig = () => createStubComponent();
+  return StubComponent;
+};
+const createStubStyled = () => {
+  const styledStub = () => createStubComponent();
+  const handler = {
+    get: (_target, _prop) => {
+      return createStubComponent;
+    },
+    apply: () => {
+      return createStubComponent();
+    }
+  };
+  return new Proxy(styledStub, handler);
+};
+const safeStyled = typeof window !== "undefined" ? styled : createStubStyled();
+export {
+  safeStyled
+};

package/package.json

@@ -1,46 +1,44 @@
 {
   "name": "@getpara/react-common",
-  "version": "2.0.0-alpha.5",
-  "type": "module",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": "./dist/index.js"
-  },
-  "sideEffects": [
-    "*.css"
-  ],
+  "version": "2.0.0-alpha.50",
   "dependencies": {
-    "@getpara/react-components": "2.0.0-alpha.5",
-    "@getpara/web-sdk": "2.0.0-alpha.5",
+    "@getpara/react-components": "2.0.0-alpha.50",
+    "@getpara/web-sdk": "2.0.0-alpha.50",
     "@moonpay/moonpay-react": "^1.8.3",
     "@ramp-network/ramp-instant-sdk": "^4.0.5",
-    "@stripe/crypto": "^0.0.4",
-    "@stripe/stripe-js": "^3.4.0",
-    "libphonenumber-js": "^1.11.1",
+    "libphonenumber-js": "^1.11.7",
     "styled-components": "^6.1.8",
     "ua-parser-js": "^2.0.2"
   },
-  "scripts": {
-    "build": "rm -rf dist && yarn typegen && node ./scripts/build.mjs",
-    "typegen": "tsc --emitDeclarationOnly"
-  },
   "devDependencies": {
     "@types/react": "^18.0.31",
     "@types/react-dom": "^18.2.7",
-    "typescript": "^5.4.3"
+    "typescript": "^5.8.3"
   },
-  "peerDependencies": {
-    "react": "*",
-    "react-dom": "*"
+  "exports": {
+    ".": "./dist/index.js"
   },
   "files": [
     "dist",
     "package.json",
     "styles.css"
   ],
+  "main": "dist/index.js",
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
   "resolutions": {
     "styled-components": "^6"
   },
-  "gitHead": "3ecfca088f24489f2e8fa5493d0f4459b08880e1"
+  "scripts": {
+    "build": "rm -rf dist && yarn typegen && node ./scripts/build.mjs",
+    "typegen": "tsc --emitDeclarationOnly"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "gitHead": "688b92a7ca207593a4a3be09cb5cc580092614fc"
 }

package/dist/components/StripeEmbed.d.ts

@@ -1,4 +0,0 @@
-import { Props } from '../types/index.js';
-export declare const STRIPE_PUBLISHABLE_KEY = "pk_live_51MvquNGrzDeP5yP9EgVSMBPQbrbg0oHDjPIIXypePd0jzOFjbadyfO7wBKLHhUtbKIUiEUVC3YYcTJyAmJ8xA7JE00T2UDfYKz";
-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,138 +0,0 @@
-"use client";
-import {
-  __async
-} from "../chunk-GOCCUU3Z.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { loadStripeOnramp } from "@stripe/crypto";
-import { Network, OnRampAsset, OnRampProvider, OnRampPurchaseStatus } from "@getpara/web-sdk";
-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_51MvquNGrzDeP5yP98WgPaAUgQ50I3OpfPhVfiLO47FBHepJnZRPO62IzZY2uxT5ovhSS10RwcTcnaVil1mcJOzIi00dHapODdS";
-const AssetCodes = {
-  eth: OnRampAsset.ETHEREUM,
-  matic: OnRampAsset.POLYGON,
-  sol: OnRampAsset.SOLANA,
-  usdc: OnRampAsset.USDC
-};
-const NetworkCodes = {
-  base: Network.BASE,
-  ethereum: Network.ETHEREUM,
-  polygon: Network.POLYGON,
-  solana: Network.SOLANA
-};
-const CryptoElementsContext = React.createContext(null);
-CryptoElementsContext.displayName = "CryptoElementsContext";
-const useOnrampSessionListener = (type, session, callback) => {
-  React.useEffect(() => {
-    if (session && callback) {
-      const listener = (e) => callback(e.payload);
-      session.addEventListener(type, listener);
-      return () => {
-        session.removeEventListener(type, listener);
-      };
-    }
-    return () => {
-    };
-  }, [session, callback, type]);
-};
-const StripeEmbed = ({ para, isDark, isEmbedded, onRampPurchase, setOnRampPurchase }) => {
-  const [isReady, setIsReady] = useState(false);
-  const isStripeEmbed = useMemo(() => onRampPurchase.provider === OnRampProvider.STRIPE, [onRampPurchase]);
-  const clientSecret = useMemo(
-    () => (onRampPurchase == null ? void 0 : onRampPurchase.provider) === OnRampProvider.STRIPE ? onRampPurchase == null ? void 0 : onRampPurchase.providerKey : void 0,
-    [onRampPurchase == null ? void 0 : onRampPurchase.provider, onRampPurchase == null ? void 0 : onRampPurchase.providerKey]
-  );
-  const [stripeOnRamp, setStripeOnRamp] = useState();
-  const onrampElementRef = React.useRef(null);
-  const [session, setSession] = React.useState();
-  useEffect(() => {
-    const containerRef = onrampElementRef.current;
-    if (containerRef) {
-      containerRef.innerHTML = "";
-      if (clientSecret && stripeOnRamp) {
-        setSession(
-          stripeOnRamp.createSession({
-            clientSecret,
-            appearance: { theme: isDark ? "dark" : "light" }
-          }).mount(containerRef)
-        );
-      }
-    }
-  }, [clientSecret, stripeOnRamp]);
-  useEffect(() => {
-    loadStripeOnramp((onRampPurchase == null ? void 0 : onRampPurchase.testMode) ? STRIPE_PUBLISHABLE_KEY_TEST : STRIPE_PUBLISHABLE_KEY).then(setStripeOnRamp);
-  }, []);
-  const onReady = useCallback(() => {
-    setIsReady(true);
-  }, []);
-  const onSessionChange = useCallback(
-    (_0) => __async(void 0, [_0], function* ({ session: session2 }) {
-      if (!isStripeEmbed) {
-        return;
-      }
-      switch (session2.status) {
-        case "fulfillment_processing":
-        case "fulfillment_complete":
-          const updatedPurchase = yield para.ctx.client.updateOnRampPurchase({
-            userId: para.getUserId(),
-            walletId: onRampPurchase.walletId,
-            externalWalletAddress: onRampPurchase.externalWalletAddress,
-            purchaseId: onRampPurchase.id,
-            updates: {
-              status: OnRampPurchaseStatus.FINISHED,
-              fiatQuantity: session2.quote.source_amount,
-              fiat: session2.quote.source_currency.asset_code,
-              network: NetworkCodes[session2.quote.destination_currency.currency_network],
-              asset: AssetCodes[session2.quote.destination_currency.asset_code],
-              assetQuantity: session2.quote.destination_amount,
-              providerKey: null
-            }
-          });
-          setOnRampPurchase(updatedPurchase);
-          if (!isEmbedded) {
-            setTimeout(() => {
-              if (typeof window !== "undefined") {
-                window.close();
-              }
-            }, 5e3);
-          }
-          break;
-        default:
-          break;
-      }
-    }),
-    [isStripeEmbed]
-  );
-  useOnrampSessionListener("onramp_ui_loaded", session, onReady);
-  useOnrampSessionListener("onramp_session_updated", session, onSessionChange);
-  return /* @__PURE__ */ jsxs(OuterContainer, { children: [
-    /* @__PURE__ */ jsx(Container, { isReady, ref: onrampElementRef }),
-    !isReady && /* @__PURE__ */ jsx(SpinnerContainer, { style: { width: "100%", height: "100%", flex: 1 }, children: /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) })
-  ] });
-};
-const OuterContainer = styled.div`
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-`;
-const Container = styled.div`
-  height: 100%;
-  width: 100%;
-  display: ${({ isReady }) => isReady ? "flex" : "none"};
-  justify-content: center;
-
-  & > iframe {
-    height: 100%;
-  }
-`;
-export {
-  STRIPE_PUBLISHABLE_KEY,
-  STRIPE_PUBLISHABLE_KEY_TEST,
-  StripeEmbed
-};

package/dist/utils/offRampSend.d.ts

@@ -1,7 +0,0 @@
-import { OnRampPurchaseUpdateParams } from '@getpara/user-management-client';
-import Para, { OnRampPurchase } from '@getpara/web-sdk';
-export declare function offRampSend(para: Para, { id: purchaseId, provider, walletId, walletType, address, testMode }: Partial<OnRampPurchase>, setOnRampPurchase: (_: OnRampPurchase) => void, { assetQuantity, fiat, fiatQuantity, chainId, destinationAddress, contractAddress, }: OnRampPurchaseUpdateParams & {
-    chainId?: string;
-    destinationAddress: string;
-    contractAddress?: string | null;
-}): Promise<string | undefined>;

package/dist/utils/offRampSend.js

@@ -1,75 +0,0 @@
-"use client";
-import {
-  __async
-} from "../chunk-GOCCUU3Z.js";
-import { hexStringToBase64 } 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, {
-    assetQuantity,
-    fiat,
-    fiatQuantity,
-    chainId,
-    destinationAddress,
-    contractAddress
-  }) {
-    var _a, _b, _c;
-    if (!purchaseId || !walletId || !walletType || !provider) {
-      throw new Error("Missing required fields");
-    }
-    try {
-      const { tx, message, network, asset } = yield para.ctx.client.generateOffRampTx(para.getUserId(), {
-        walletId,
-        walletType,
-        provider,
-        chainId,
-        destinationAddress,
-        sourceAddress: address,
-        contractAddress,
-        testMode,
-        assetQuantity
-      });
-      let signature;
-      switch (walletType) {
-        case "EVM":
-          signature = (_a = yield para.signTransaction({
-            walletId,
-            rlpEncodedTxBase64: hexStringToBase64(tx),
-            chainId
-          })) == null ? void 0 : _a.signature;
-          break;
-        case "SOLANA":
-          signature = (_b = yield para.signMessage({ walletId, messageBase64: message })) == null ? void 0 : _b.signature;
-          break;
-        default:
-          throw new Error(`Unsupported wallet type: ${walletType}`);
-      }
-      const { txHash } = yield para.ctx.client.sendOffRampTx(para.getUserId(), {
-        tx,
-        signature: walletType === "EVM" ? `0x${signature}` : signature,
-        sourceAddress: address,
-        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(((_c = e.response) == null ? void 0 : _c.data) || e.message);
-    }
-  });
-}
-export {
-  offRampSend
-};