@getpara/react-common 2.0.0-alpha.15 → 2.0.0-alpha.16

package/dist/components/MoonPayEmbed.d.ts

@@ -1,3 +1,3 @@
-import { Props } from '../types/index.js';
-export declare const MoonPayEmbed: ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase, setOnRampPurchase }: Props) => import("react/jsx-runtime").JSX.Element;
+import { OnRampProps } from '../types/index.js';
+export declare const MoonPayEmbed: ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase, setOnRampPurchase }: OnRampProps) => import("react/jsx-runtime").JSX.Element;
 export default MoonPayEmbed;

package/dist/components/RampEmbed.d.ts

@@ -1,4 +1,4 @@
-import { Props } from '../types/index.js';
-export declare const RampEmbed: ({ para, appName, onRampConfig, onRampPurchase, isEmbedded, apiKey, onClose, setOnRampPurchase, }: Props & {
+import { OnRampProps } from '../types/index.js';
+export declare const RampEmbed: ({ para, appName, onRampConfig, onRampPurchase, isEmbedded, apiKey, onClose, setOnRampPurchase, }: OnRampProps & {
     apiKey: string;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/index.d.ts

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

package/dist/components/index.js

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

package/dist/types/index.d.ts

@@ -1,7 +1,7 @@
 import { AuthInfo } from '@getpara/user-management-client';
 import ParaWeb, { type OnRampConfig, type OnRampPurchase } from '@getpara/web-sdk';
 export * from './externalWalletCommon.js';
-export type Props = {
+export type OnRampProps = {
     appName?: string;
     para: ParaWeb;
     isDark?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getpara/react-common",
-  "version": "2.0.0-alpha.15",
+  "version": "2.0.0-alpha.16",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,12 +11,10 @@
     "*.css"
   ],
   "dependencies": {
-    "@getpara/react-components": "2.0.0-alpha.15",
-    "@getpara/web-sdk": "2.0.0-alpha.15",
+    "@getpara/react-components": "2.0.0-alpha.16",
+    "@getpara/web-sdk": "2.0.0-alpha.16",
     "@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",
     "styled-components": "^6.1.8",
     "ua-parser-js": "^2.0.2"
@@ -42,5 +40,5 @@
   "resolutions": {
     "styled-components": "^6"
   },
-  "gitHead": "f837a1584f2a0b5d61c9b7a91cd74a68c01d5161"
+  "gitHead": "84eb1a14fa8918c449ae4b163fe173d34688cdcd"
 }

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
-};