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

package/dist/components/RampEmbed.js

@@ -1,103 +0,0 @@
-"use client";
-import {
-  __async
-} from "../chunk-IV3L3JVM.js";
-import { jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-import { RampInstantSDK } from "@ramp-network/ramp-instant-sdk";
-import { Network, OnRampAsset, OnRampProvider, getPortalBaseURL } from "@getpara/web-sdk";
-import {
-  getChainId,
-  getContractAddressFromAsset,
-  getCurrencyCodes,
-  reverseCurrencyLookup,
-  offRampSend
-} from "../utils/index.js";
-const TEST_MODE_FORBIDDEN = ["ETH_ETH", "ETH_USDC"];
-const RampEmbed = ({
-  para,
-  appName,
-  onRampConfig,
-  onRampPurchase,
-  isEmbedded,
-  apiKey,
-  onClose,
-  setOnRampPurchase
-}) => {
-  const { currencyCodes } = getCurrencyCodes(onRampConfig, {
-    provider: OnRampProvider.RAMP,
-    purchaseType: onRampPurchase.type,
-    walletType: onRampPurchase.walletType
-  });
-  const isMounted = useRef(false);
-  useEffect(() => {
-    if (!isMounted.current) {
-      try {
-        const widget = new RampInstantSDK({
-          hostAppName: appName,
-          swapAsset: currencyCodes.filter((code) => !onRampPurchase.testMode || !TEST_MODE_FORBIDDEN.includes(code)).join(","),
-          fiatValue: onRampPurchase.fiatQuantity,
-          fiatCurrency: onRampPurchase.fiat,
-          hostLogoUrl: `${getPortalBaseURL(para.ctx)}/wordmark_black.svg`,
-          hostApiKey: apiKey,
-          userAddress: onRampPurchase.address,
-          userEmailAddress: para.getEmail(),
-          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", (e) => __async(void 0, null, function* () {
-          const p = e.payload.purchase;
-          const [network, asset] = onRampPurchase.testMode ? [Network.ETHEREUM, OnRampAsset.ETHEREUM] : reverseCurrencyLookup(onRampConfig.assetInfo, OnRampProvider.RAMP, p.asset.symbol) || [];
-          const updated = yield para.ctx.client.updateOnRampPurchase({
-            userId: para.getUserId(),
-            walletId: onRampPurchase.walletId,
-            externalWalletAddress: onRampPurchase.externalWalletAddress,
-            purchaseId: onRampPurchase.id,
-            updates: {
-              providerKey: p.id,
-              fiatQuantity: p.fiatValue,
-              fiat: p.fiatCurrency,
-              assetQuantity: p.cryptoAmount,
-              asset,
-              network
-            }
-          });
-          setOnRampPurchase(updated);
-        })).on("WIDGET_CLOSE", () => __async(void 0, null, function* () {
-          onClose == null ? void 0 : onClose();
-          if (!isEmbedded) {
-            setTimeout(() => {
-              if (typeof window !== "undefined") {
-                window.close();
-              }
-            }, 5e3);
-          }
-        })).onSendCrypto((assetInfo, amount, address) => __async(void 0, null, function* () {
-          try {
-            const [network, asset] = reverseCurrencyLookup(onRampConfig.assetInfo, OnRampProvider.RAMP, assetInfo.symbol);
-            const txHash = yield offRampSend(para, onRampPurchase, setOnRampPurchase, {
-              assetQuantity: amount,
-              destinationAddress: address,
-              contractAddress: getContractAddressFromAsset(network, asset),
-              chainId: getChainId(network),
-              testMode: onRampPurchase.testMode
-            });
-            return { txHash };
-          } catch (e) {
-            console.error(e);
-          }
-        }));
-        widget.show();
-        isMounted.current = true;
-      } catch (e) {
-        console.error(e);
-      }
-    }
-  }, []);
-  return /* @__PURE__ */ jsx("div", { id: "ramp-container", style: { minWidth: "320px", width: "100%", height: "767px" } });
-};
-export {
-  RampEmbed
-};

package/dist/components/StripeEmbed.js

@@ -1,138 +0,0 @@
-"use client";
-import {
-  __async
-} from "../chunk-IV3L3JVM.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_51Q2z5k2epVn9Kq0ZSbUzuetKb4azH6E6UPcvWmjRxvHmxLAJbIK0pwDbPQo63W9OyDng337ntNu3ZXx3AJ7MhFmR00XgfRmPgP";
-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

@@ -1,73 +0,0 @@
-"use client";
-import "../chunk-IV3L3JVM.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { CpslAvatar, CpslIcon, CpslText } from "@getpara/react-components";
-import styled from "styled-components";
-import { formatPhoneNumber } from "../utils/formatPhoneNumber.js";
-function defaultDisplayName({ authType, identifier }) {
-  switch (authType) {
-    case "email":
-      return identifier.toLowerCase();
-    case "phone":
-      return formatPhoneNumber(identifier);
-    case "farcaster":
-      return `@${identifier}`;
-    case "telegram":
-      return `Telegram User @${identifier}`;
-    default:
-      return null;
-  }
-}
-const UserIdentifier = ({ identifier, authType, displayName, pfpUrl }) => {
-  const shouldHideAvatar = authType === "externalWallet";
-  let icon;
-  switch (authType) {
-    case "email":
-      icon = "mail";
-      break;
-    case "phone":
-      icon = "phone";
-      break;
-    case "farcaster":
-      icon = "farcasterBrand";
-      break;
-    case "telegram":
-      icon = "telegramBrand";
-      break;
-  }
-  return /* @__PURE__ */ jsxs(Container, { children: [
-    !shouldHideAvatar && /* @__PURE__ */ jsx(IconContainer, { children: pfpUrl ? /* @__PURE__ */ jsx(Avatar, { src: pfpUrl, size: "20px" }) : /* @__PURE__ */ jsx(Icon, { icon, size: authType === "telegram" ? "20px" : "13px" }) }),
-    /* @__PURE__ */ jsx(IdentifierText, { variant: "bodyS", weight: "medium", children: displayName || defaultDisplayName({ authType, identifier }) })
-  ] });
-};
-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.js

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

@@ -1,9 +0,0 @@
-"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";