@getpara/react-common 2.0.0-alpha.3 → 2.0.0-alpha.6

package/dist/components/StripeEmbed.js

@@ -0,0 +1,138 @@
+"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/components/UserIdentifier.js

@@ -0,0 +1,66 @@
+"use client";
+import "../chunk-GOCCUU3Z.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CpslAvatar, CpslIcon, CpslText } from "@getpara/react-components";
+import styled from "styled-components";
+import { displayPhoneNumber } from "@getpara/web-sdk";
+import { getExternalWalletDisplayName } from "../utils/index.js";
+function defaultDisplay(authInfo) {
+  const { authType, identifier, externalWallet } = authInfo;
+  switch (authType) {
+    case "email":
+      return { defaultName: identifier.toLowerCase(), defaultIcon: "mail" };
+    case "phone":
+      return { defaultName: displayPhoneNumber(identifier), defaultIcon: "phone" };
+    case "farcaster":
+      return { defaultName: `@${identifier}`, defaultIcon: "farcasterBrand" };
+    case "telegram":
+      return { defaultName: `Telegram User @${identifier}`, defaultIcon: "telegramBrand" };
+    case "externalWallet":
+      return { defaultName: getExternalWalletDisplayName(externalWallet), defaultIcon: "wallet" };
+    default:
+      return { defaultName: null, defaultIcon: null };
+  }
+}
+const UserIdentifier = ({ authInfo }) => {
+  if (!authInfo) {
+    return null;
+  }
+  const { authType, displayName, pfpUrl } = authInfo;
+  const { defaultName, defaultIcon } = defaultDisplay(authInfo);
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsx(IconContainer, { children: pfpUrl ? /* @__PURE__ */ jsx(Avatar, { src: pfpUrl, size: "20px", variant: "round" }) : /* @__PURE__ */ jsx(Icon, { icon: defaultIcon, size: authType === "telegram" ? "20px" : "13px" }) }),
+    /* @__PURE__ */ jsx(IdentifierText, { variant: "bodyS", weight: "medium", children: displayName || defaultName })
+  ] });
+};
+const Container = styled.div`
+  padding: 8px 12px 8px 8px;
+  border-radius: 1000px;
+  background-color: var(--cpsl-color-background-4);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 4px;
+`;
+const IdentifierText = styled(CpslText)`
+  --color-override: var(--cpsl-color-background-96);
+`;
+const IconContainer = styled.div`
+  display: flex;
+  background: var(--cpsl-color-background-0);
+  align-items: center;
+  justify-content: center;
+  border-radius: 1000px;
+  width: 20px;
+  height: 20px;
+`;
+const Icon = styled(CpslIcon)`
+  --icon-color: var(--cpsl-color-text-primary);
+`;
+const Avatar = styled(CpslAvatar)`
+  --container-border-width: 0;
+  --container-padding: 0;
+`;
+export {
+  UserIdentifier
+};

package/dist/components/common.d.ts

@@ -4,6 +4,6 @@ export declare const CenteredColumnContainer: import("styled-components/dist/typ
 export declare const FilledDisabledInput: typeof CpslInput;
 export declare const FullWidthFilledDisabledInput: typeof CpslInput;
 export declare const CenteredText: typeof CpslText;
-export declare const HeaderButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("@getpara/core-components").JSX.CpslButton & Omit<import("react").HTMLAttributes<HTMLCpslButtonElement>, "style"> & import("@getpara/react-components/dist/types/components/stencil-generated/react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLCpslButtonElement>, "ref"> & {
-    ref?: import("react").Ref<HTMLCpslButtonElement>;
-}, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("@getpara/core-components").JSX.CpslButton & Omit<import("react").HTMLAttributes<HTMLCpslButtonElement>, "style"> & import("@getpara/react-components/dist/types/components/stencil-generated/react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLCpslButtonElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const HeaderButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
+    ref?: import("react").Ref<any>;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;

package/dist/components/common.js

@@ -0,0 +1,54 @@
+"use client";
+import "../chunk-GOCCUU3Z.js";
+import { CpslButton, CpslInput, CpslText } from "@getpara/react-components";
+import styled from "styled-components";
+const SpinnerContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const CenteredColumnContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+`;
+const FilledDisabledInput = styled(CpslInput)`
+  --container-border-color: var(--cpsl-color-input-border-placeholder);
+  --container-background-color: var(--cpsl-color-background-0);
+  --input-background-color: transparent;
+  --input-font-weight: 500;
+  --input-color: var(--cpsl-color-text-secondary) !important;
+`;
+const FullWidthFilledDisabledInput = styled(FilledDisabledInput)`
+  width: 100%;
+`;
+const CenteredText = styled(CpslText)`
+  width: 100%;
+  text-align: center;
+`;
+const HeaderButton = styled(CpslButton)`
+  flex: 0;
+  --button-padding-top: 2px;
+  --button-padding-bottom: 2px;
+  --button-padding-start: 2px;
+  --button-padding-end: 2px;
+  --button-border-radius: 1000px;
+  --button-background-color: var(--cpsl-color-background-4);
+
+  cpsl-icon {
+    --height: 20px;
+    --width: 20px;
+  }
+`;
+export {
+  CenteredColumnContainer,
+  CenteredText,
+  FilledDisabledInput,
+  FullWidthFilledDisabledInput,
+  HeaderButton,
+  SpinnerContainer
+};

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

@@ -0,0 +1,10 @@
+"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";
+export * from "./QRCode.js";
+export * from "./UserIdentifier.js";
+export * from "./NetworkSpeedBanner.js";