@getpara/react-common 2.0.0-dev.1 → 2.0.0-dev.2

package/dist/components/RampEmbed.js

@@ -0,0 +1,103 @@
+"use client";
+import {
+  __async
+} from "../chunk-GOCCUU3Z.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/UserIdentifier.d.ts

@@ -1,2 +1,4 @@
-import { ModalAuthInfo } from '../types/index.js';
-export declare const UserIdentifier: ({ identifier, authType, displayName, pfpUrl }: ModalAuthInfo) => import("react/jsx-runtime").JSX.Element;
+import { CoreAuthInfo } from '@getpara/web-sdk';
+export declare const UserIdentifier: ({ authInfo }: {
+    authInfo?: CoreAuthInfo;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/UserIdentifier.js

@@ -0,0 +1,65 @@
+"use client";
+import "../chunk-GOCCUU3Z.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CpslAvatar, CpslIcon, CpslText } from "@getpara/react-components";
+import { displayPhoneNumber } from "@getpara/web-sdk";
+import { getExternalWalletDisplayName, safeStyled } 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 = safeStyled.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 = safeStyled(CpslText)`
+  --color-override: var(--cpsl-color-background-96);
+`;
+const IconContainer = safeStyled.div`
+  display: flex;
+  background: var(--cpsl-color-background-0);
+  align-items: center;
+  justify-content: center;
+  border-radius: 1000px;
+  width: 20px;
+  height: 20px;
+`;
+const Icon = safeStyled(CpslIcon)`
+  --icon-color: var(--cpsl-color-text-primary);
+`;
+const Avatar = safeStyled(CpslAvatar)`
+  --container-border-width: 0;
+  --container-padding: 0;
+`;
+export {
+  UserIdentifier
+};

package/dist/components/common.d.ts

@@ -1,9 +1,9 @@
 import { CpslInput, CpslText } from '@getpara/react-components';
-export declare const SpinnerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CenteredColumnContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SpinnerContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CenteredColumnContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 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.js").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 { safeStyled } from "../utils/index.js";
+const SpinnerContainer = safeStyled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const CenteredColumnContainer = safeStyled.div`
+  width: 100%;
+  height: 100%;
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+`;
+const FilledDisabledInput = safeStyled(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 = safeStyled(FilledDisabledInput)`
+  width: 100%;
+`;
+const CenteredText = safeStyled(CpslText)`
+  width: 100%;
+  text-align: center;
+`;
+const HeaderButton = safeStyled(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

@@ -1,8 +1,8 @@
 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';

package/dist/components/index.js

@@ -0,0 +1,9 @@
+"use client";
+export * from "./MoonPayEmbed.js";
+export * from "./RampEmbed.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";