@getpara/react-common 2.0.0-dev.3 → 2.0.0-dev.7

package/dist/classes/ParaInternal.d.ts

@@ -21,6 +21,7 @@ export declare class ParaInternal extends ParaWeb implements InternalInterface {
         credentialId: string;
         url?: string;
     }>;
+    prepareLogin: () => import("@getpara/web-sdk").InternalMethodResponse<"prepareLogin">;
     linkAccount: (opts: import("@getpara/web-sdk").InternalMethodParams<"linkAccount">) => import("@getpara/web-sdk").InternalMethodResponse<"linkAccount">;
     unlinkAccount: ({ linkedAccountId, }: import("@getpara/web-sdk").InternalMethodParams<"unlinkAccount">) => import("@getpara/web-sdk").InternalMethodResponse<"unlinkAccount">;
     verifyEmailOrPhoneLink: ({ verificationCode, }: import("@getpara/web-sdk").InternalMethodParams<"verifyEmailOrPhoneLink">) => import("@getpara/web-sdk").InternalMethodResponse<"verifyEmailOrPhoneLink">;
@@ -28,4 +29,7 @@ export declare class ParaInternal extends ParaWeb implements InternalInterface {
     verifyTelegramLink: (opts: import("@getpara/web-sdk").InternalMethodParams<"verifyTelegramLink">) => import("@getpara/web-sdk").InternalMethodResponse<"verifyTelegramLink">;
     verifyFarcasterLink: (opts: import("@getpara/web-sdk").InternalMethodParams<"verifyFarcasterLink">) => import("@getpara/web-sdk").InternalMethodResponse<"verifyFarcasterLink">;
     verifyExternalWalletLink: (opts: import("@getpara/web-sdk").InternalMethodParams<"verifyExternalWalletLink">) => import("@getpara/web-sdk").InternalMethodResponse<"verifyExternalWalletLink">;
+    sendLoginCode: () => Promise<void>;
+    get partnerLogo(): string;
+    get partnerName(): string;
 }

package/dist/classes/ParaInternal.js

@@ -14,6 +14,7 @@ class ParaInternal extends ParaWeb {
     this.supportedAuthMethods = super.supportedAuthMethods;
     this.constructPortalUrl = super.constructPortalUrl;
     this.getNewCredentialAndUrl = super.getNewCredentialAndUrl;
+    this.prepareLogin = super.prepareLogin;
     this.linkAccount = super.linkAccount;
     this.unlinkAccount = super.unlinkAccount;
     this.verifyEmailOrPhoneLink = super.verifyEmailOrPhoneLink;
@@ -21,6 +22,13 @@ class ParaInternal extends ParaWeb {
     this.verifyTelegramLink = super.verifyTelegramLink;
     this.verifyFarcasterLink = super.verifyFarcasterLink;
     this.verifyExternalWalletLink = super.verifyExternalWalletLink;
+    this.sendLoginCode = super.sendLoginCode;
+  }
+  get partnerLogo() {
+    return super.partnerLogo;
+  }
+  get partnerName() {
+    return super.partnerName;
   }
 }
 export {

package/dist/components/HeroSpinner.d.ts

@@ -1,9 +1,10 @@
 import { IconType } from '@getpara/react-components';
 import { PropsWithChildren, ReactNode } from 'react';
 type Status = 'pending' | 'error' | 'idle' | 'success';
-export declare function HeroSpinner({ icon, status, text, }: PropsWithChildren<{
+export declare function HeroSpinner({ icon, status, text, secondaryText, }: PropsWithChildren<{
     icon?: IconType | ReactNode;
     status?: Status;
     text?: ReactNode;
+    secondaryText?: ReactNode;
 }>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/HeroSpinner.js

@@ -6,7 +6,8 @@ import { safeStyled } from "../utils/index.js";
 function HeroSpinner({
   icon,
   status = "idle",
-  text
+  text,
+  secondaryText
 }) {
   return /* @__PURE__ */ jsxs(Root, { children: [
     /* @__PURE__ */ jsxs(Hero, { children: [
@@ -21,11 +22,13 @@ function HeroSpinner({
         {
           variant: "bodyM",
           weight: "semiBold",
+          align: "center",
           color: status === "error" ? "error" : status === "success" ? "success" : "primary",
           children: text
         }
       )
-    ] })
+    ] }),
+    secondaryText && /* @__PURE__ */ jsx(SecondaryText, { align: "center", color: "secondary", variant: "semiBold", children: secondaryText })
   ] });
 }
 const Root = safeStyled.div`
@@ -49,6 +52,9 @@ const Text = safeStyled.div`
   align-items: center;
   color: ${({ status }) => status === "error" ? "var(--cpsl-color-utility-red)" : status === "success" ? "var(--cpsl-color-utility-green)" : "auto"};
 `;
+const SecondaryText = safeStyled(CpslText)`
+  margin-top: 8px;
+`;
 const Spinner = safeStyled(CpslSpinner)`
   position: absolute;
   width: 150px;

package/dist/components/MoonPayEmbed.d.ts

@@ -1,3 +1,5 @@
 import { OnRampProps } from '../types/index.js';
-export declare const MoonPayEmbed: ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase, setOnRampPurchase }: OnRampProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MoonPayEmbed: ({ email, isDark, isEmbedded, onRampConfig, onRampPurchase, onSuccess, onDepositRequest, onUrlSignatureRequest, }: OnRampProps & {
+    onUrlSignatureRequest: (url: string) => Promise<string>;
+}) => import("react/jsx-runtime").JSX.Element;
 export default MoonPayEmbed;

package/dist/components/MoonPayEmbed.js

@@ -3,15 +3,22 @@ import {
   __async
 } from "../chunk-GOCCUU3Z.js";
 import { jsx } from "react/jsx-runtime";
-import { getNetworkPrefix, OnRampProvider, OnRampPurchaseStatus } from "@getpara/web-sdk";
+import { OnRampProvider } from "@getpara/web-sdk";
 import { lazy, useCallback, useEffect, useMemo, useState } from "react";
-import { reverseCurrencyLookup, offRampSend, getCurrencyCode, safeStyled } from "../utils/index.js";
+import { reverseCurrencyLookup, getCurrencyCode, safeStyled } from "../utils/index.js";
 const MOONPAY_PUBLISHABLE_KEY = "pk_live_EQva4LydtNDE0Rwd9X7SG9w58wqOzbux";
 const MOONPAY_PUBLISHABLE_KEY_TEST = "pk_test_HYobzemmTBXxcSStVA4dSED6jT";
-const MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase, setOnRampPurchase }) => {
-  const [LazyMoonPayBuyWidget, setLazyMoonPayBuyWidget] = useState(null);
-  const [LazyMoonPaySellWidget, setLazyMoonPaySellWidget] = useState(null);
-  const [LazyMoonPayProvider, setLazyMoonPayProvider] = useState(null);
+const MoonPayEmbed = ({
+  email,
+  isDark,
+  isEmbedded,
+  onRampConfig,
+  onRampPurchase,
+  onSuccess,
+  onDepositRequest,
+  onUrlSignatureRequest
+}) => {
+  const [components, setComponents] = useState(null);
   useEffect(() => {
     const _LazyMoonPayBuyWidget = lazy(
       () => import("@moonpay/moonpay-react").then((mod) => ({ default: mod.MoonPayBuyWidget }))
@@ -22,28 +29,13 @@ const MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase,
     const _LazyMoonPayProvider = lazy(
       () => import("@moonpay/moonpay-react").then((mod) => ({ default: mod.MoonPayProvider }))
     );
-    setLazyMoonPayBuyWidget(_LazyMoonPayBuyWidget);
-    setLazyMoonPaySellWidget(_LazyMoonPaySellWidget);
-    setLazyMoonPayProvider(_LazyMoonPayProvider);
+    setComponents({
+      MoonPayBuyWidget: _LazyMoonPayBuyWidget,
+      MoonPaySellWidget: _LazyMoonPaySellWidget,
+      MoonPayProvider: _LazyMoonPayProvider
+    });
   }, []);
   const apiKey = onRampPurchase.testMode ? MOONPAY_PUBLISHABLE_KEY_TEST : MOONPAY_PUBLISHABLE_KEY;
-  const onUrlSignatureRequested = useCallback(
-    (url) => __async(void 0, null, function* () {
-      if (!para.getUserId() || !onRampPurchase.walletType) {
-        throw new Error("missing required fields");
-      }
-      const res = yield para.ctx.client.signMoonPayUrl(para.getUserId(), {
-        url,
-        type: onRampPurchase.walletType,
-        cosmosPrefix: getNetworkPrefix(onRampPurchase.network),
-        testMode: onRampPurchase.testMode,
-        walletId: onRampPurchase.walletId || void 0,
-        externalWalletAddress: onRampPurchase.externalWalletAddress || void 0
-      });
-      return res.data.signature;
-    }),
-    [onRampPurchase.walletId, onRampPurchase.walletType, para.cosmosPrefix, onRampPurchase.testMode, para]
-  );
   const onTransactionCompleted = useCallback(
     (payload) => __async(void 0, null, function* () {
       try {
@@ -52,57 +44,39 @@ const MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase,
           OnRampProvider.MOONPAY,
           payload.quoteCurrency.code
         );
-        const updated = yield para.ctx.client.updateOnRampPurchase({
-          userId: para.getUserId(),
-          walletId: onRampPurchase.walletId,
-          purchaseId: onRampPurchase.id,
-          externalWalletAddress: onRampPurchase.externalWalletAddress,
-          updates: {
-            fiatQuantity: payload.baseCurrencyAmount.toString(),
-            fiat: payload.baseCurrency.code,
-            network,
-            asset,
-            assetQuantity: payload.quoteCurrencyAmount.toString(),
-            status: OnRampPurchaseStatus.FINISHED
-          }
+        onSuccess({
+          fiatQuantity: payload.baseCurrencyAmount.toString(),
+          fiat: payload.baseCurrency.code,
+          network,
+          asset,
+          assetQuantity: payload.quoteCurrencyAmount.toString()
         });
-        setOnRampPurchase(updated);
-        if (!isEmbedded) {
-          setTimeout(() => {
-            if (typeof window !== "undefined") {
-              window.close();
-            }
-          }, 5e3);
-        }
       } catch (e) {
-        console.error(e);
+        throw e instanceof Error ? e : new Error(e);
       }
     }),
-    [onRampPurchase.walletId, onRampPurchase.id, onRampPurchase.externalWalletAddress, isEmbedded]
+    [onRampConfig]
   );
   const onInitiateDeposit = useCallback(
     (payload) => __async(void 0, null, function* () {
-      const txHash = yield offRampSend(para, onRampPurchase, setOnRampPurchase, {
-        assetQuantity: payload.cryptoCurrencyAmount,
-        fiatQuantity: payload.fiatCurrencyAmount || void 0,
-        fiat: payload.fiatCurrency.code.toUpperCase(),
-        destinationAddress: payload.depositWalletAddress,
-        contractAddress: payload.cryptoCurrency.contractAddress,
-        chainId: payload.cryptoCurrency.chainId
-      });
-      return { depositId: txHash, cancelTransactionOnError: false };
+      try {
+        const txHash = yield onDepositRequest({
+          assetQuantity: payload.cryptoCurrencyAmount,
+          fiatQuantity: payload.fiatCurrencyAmount || void 0,
+          fiat: payload.fiatCurrency.code.toUpperCase(),
+          destinationAddress: payload.depositWalletAddress,
+          contractAddress: payload.cryptoCurrency.contractAddress,
+          chainId: payload.cryptoCurrency.chainId
+        });
+        return { depositId: txHash, cancelTransactionOnError: false };
+      } catch (e) {
+        throw e instanceof Error ? e : new Error(e);
+      }
     }),
-    [
-      para,
-      onRampPurchase.id,
-      onRampPurchase.testMode,
-      onRampPurchase.walletId,
-      onRampPurchase.walletType,
-      setOnRampPurchase
-    ]
+    []
   );
   const embed = useMemo(() => {
-    if (!LazyMoonPayBuyWidget || !LazyMoonPaySellWidget) {
+    if (!components) {
       return null;
     }
     const currencyCode = getCurrencyCode(onRampConfig, {
@@ -110,10 +84,11 @@ const MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase,
       asset: onRampPurchase.asset,
       provider: OnRampProvider.MOONPAY
     });
-    return onRampPurchase.type === "BUY" ? /* @__PURE__ */ jsx(
-      LazyMoonPayBuyWidget,
+    return /* @__PURE__ */ jsx(components.MoonPayProvider, { apiKey, debug: onRampPurchase.testMode, children: onRampPurchase.type === "BUY" ? /* @__PURE__ */ jsx(
+      components.MoonPayBuyWidget,
       {
         variant: "embedded",
+        email,
         baseCurrencyCode: onRampPurchase.fiat,
         baseCurrencyAmount: onRampPurchase.fiatQuantity,
         currencyCode,
@@ -128,10 +103,10 @@ const MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase,
           margin: 0
         },
         onTransactionCompleted,
-        onUrlSignatureRequested
+        onUrlSignatureRequested: onUrlSignatureRequest
       }
     ) : /* @__PURE__ */ jsx(
-      LazyMoonPaySellWidget,
+      components.MoonPaySellWidget,
       {
         variant: "embedded",
         visible: true,
@@ -143,30 +118,29 @@ const MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase,
           borderRadius: 0,
           margin: 0
         },
+        email,
         baseCurrencyCode: currencyCode,
+        quoteCurrencyAmount: onRampPurchase.fiatQuantity,
         refundWalletAddress: onRampPurchase.address,
         onInitiateDeposit,
         onTransactionCompleted,
-        onUrlSignatureRequested
+        onUrlSignatureRequested: onUrlSignatureRequest
       }
-    );
+    ) });
   }, [
+    apiKey,
+    email,
     onRampPurchase.type,
     onRampPurchase.address,
     onRampPurchase.walletId,
     onRampPurchase.walletType,
     onRampPurchase.asset,
-    onInitiateDeposit,
+    onRampPurchase.testMode,
     onTransactionCompleted,
-    onUrlSignatureRequested,
     isDark,
-    LazyMoonPayBuyWidget,
-    LazyMoonPaySellWidget
+    components
   ]);
-  if (!LazyMoonPayProvider) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Container, { isEmbedded, children: /* @__PURE__ */ jsx(LazyMoonPayProvider, { apiKey, debug: onRampPurchase.testMode, children: embed }) });
+  return /* @__PURE__ */ jsx(Container, { isEmbedded, children: embed });
 };
 var MoonPayEmbed_default = MoonPayEmbed;
 const Container = safeStyled.div`

package/dist/components/RampEmbed.d.ts

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

package/dist/components/RampEmbed.js

@@ -5,24 +5,19 @@ import {
 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";
+import { Network, OnRampAsset, OnRampProvider } from "@getpara/web-sdk";
+import { getChainId, getContractAddressFromAsset, getCurrencyCodes, reverseCurrencyLookup } from "../utils/index.js";
 const TEST_MODE_FORBIDDEN = ["ETH_ETH", "ETH_USDC"];
 const RampEmbed = ({
-  para,
   appName,
+  email,
   onRampConfig,
   onRampPurchase,
   isEmbedded,
   apiKey,
   onClose,
-  setOnRampPurchase
+  onUpdate,
+  onDepositRequest
 }) => {
   const { currencyCodes } = getCurrencyCodes(onRampConfig, {
     provider: OnRampProvider.RAMP,
@@ -38,10 +33,10 @@ const RampEmbed = ({
           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`,
+          hostLogoUrl: `${window.location.hostname}/wordmark_black.svg`,
           hostApiKey: apiKey,
           userAddress: onRampPurchase.address,
-          userEmailAddress: para.getEmail(),
+          userEmailAddress: email,
           url: (onRampPurchase == null ? void 0 : onRampPurchase.testMode) ? "https://app.demo.ramp.network" : "https://app.ramp.network",
           enabledFlows: [onRampPurchase.type === "BUY" ? "ONRAMP" : "OFFRAMP"],
           useSendCryptoCallback: true,
@@ -50,21 +45,14 @@ const RampEmbed = ({
         }).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
-            }
+          onUpdate({
+            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) {
@@ -77,7 +65,7 @@ const RampEmbed = ({
         })).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, {
+            const txHash = yield onDepositRequest({
               assetQuantity: amount,
               destinationAddress: address,
               contractAddress: getContractAddressFromAsset(network, asset),

package/dist/components/UserIdentifier.d.ts

@@ -1,4 +1,12 @@
+import { IconType } from '@getpara/react-components';
 import { CoreAuthInfo } from '@getpara/web-sdk';
+export declare function getAuthDisplay(authInfo: CoreAuthInfo, { withAddress }?: {
+    withAddress?: boolean;
+}): {
+    name: string | null;
+    icon?: IconType;
+    src?: string;
+};
 export declare const UserIdentifier: ({ authInfo }: {
     authInfo?: CoreAuthInfo;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/UserIdentifier.js

@@ -1,35 +1,43 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import {
+  __spreadValues
+} from "../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;
+import { displayPhoneNumber, truncateAddress } from "@getpara/web-sdk";
+import { getExternalWalletDisplayName, getExternalWalletIcon, safeStyled } from "../utils/index.js";
+function getAuthDisplay(authInfo, { withAddress = false } = {}) {
+  var _a;
+  const { authType, displayName, identifier, pfpUrl, externalWallet } = authInfo;
   switch (authType) {
     case "email":
-      return { defaultName: identifier.toLowerCase(), defaultIcon: "mail" };
+      return { name: identifier.toLowerCase(), icon: "mail" };
     case "phone":
-      return { defaultName: displayPhoneNumber(identifier), defaultIcon: "phone" };
+      return { name: displayPhoneNumber(identifier), icon: "phone" };
     case "farcaster":
-      return { defaultName: `@${identifier}`, defaultIcon: "farcasterBrand" };
+      return __spreadValues({ name: displayName != null ? displayName : `@${identifier}` }, pfpUrl ? { src: pfpUrl } : { icon: "farcasterBrand" });
     case "telegram":
-      return { defaultName: `Telegram User @${identifier}`, defaultIcon: "telegramBrand" };
+      return __spreadValues({
+        name: displayName != null ? displayName : `Telegram User @${identifier}`
+      }, pfpUrl ? { src: pfpUrl } : { icon: "telegramBrand" });
     case "externalWallet":
-      return { defaultName: getExternalWalletDisplayName(externalWallet), defaultIcon: "wallet" };
+      return {
+        name: externalWallet ? getExternalWalletDisplayName(externalWallet, { withAddress }) : truncateAddress(identifier, "EVM"),
+        icon: (_a = getExternalWalletIcon(externalWallet == null ? void 0 : externalWallet.providerId)) != null ? _a : "wallet02"
+      };
     default:
-      return { defaultName: null, defaultIcon: null };
+      return { name: null, icon: null };
   }
 }
 const UserIdentifier = ({ authInfo }) => {
   if (!authInfo) {
     return null;
   }
-  const { authType, displayName, pfpUrl } = authInfo;
-  const { defaultName, defaultIcon } = defaultDisplay(authInfo);
+  const { authType } = authInfo;
+  const { name, icon, src } = getAuthDisplay(authInfo, { withAddress: true });
   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 })
+    /* @__PURE__ */ jsx(IconContainer, { children: src ? /* @__PURE__ */ jsx(Avatar, { src, size: "20px", variant: "round" }) : /* @__PURE__ */ jsx(Icon, { icon, size: authType === "telegram" ? "20px" : "13px" }) }),
+    /* @__PURE__ */ jsx(IdentifierText, { variant: "bodyS", weight: "medium", children: name })
   ] });
 };
 const Container = safeStyled.div`
@@ -61,5 +69,6 @@ const Avatar = safeStyled(CpslAvatar)`
   --container-padding: 0;
 `;
 export {
-  UserIdentifier
+  UserIdentifier,
+  getAuthDisplay
 };

package/dist/constants/externalWalletDefaults.d.ts

@@ -28,7 +28,10 @@ export declare const defaultEvmExternalWallet: {
     requestInfo: () => Promise<ExternalWalletInfo>;
     disconnectBase: () => Promise<void>;
     useAccount: () => any;
-    farcasterStatus: any;
+    farcasterStatus: {
+        isPresent: false;
+    };
+    verificationStage: any;
 };
 export declare const defaultSolanaExternalWallet: {
     wallets: any[];
@@ -38,4 +41,7 @@ export declare const defaultSolanaExternalWallet: {
     requestInfo: () => Promise<ExternalWalletInfo>;
     disconnectBase: () => Promise<void>;
     useWallet: () => any;
+    farcasterStatus: {
+        isPresent: false;
+    };
 };

package/dist/constants/externalWalletDefaults.js

@@ -29,7 +29,8 @@ const defaultEvmExternalWallet = {
   requestInfo: () => Promise.resolve({}),
   disconnectBase: () => Promise.resolve(),
   useAccount: () => void 0,
-  farcasterStatus: void 0
+  farcasterStatus: { isPresent: false },
+  verificationStage: void 0
 };
 const defaultSolanaExternalWallet = {
   wallets: [],
@@ -38,7 +39,8 @@ const defaultSolanaExternalWallet = {
   signVerificationMessage: () => Promise.resolve({}),
   requestInfo: () => Promise.resolve({}),
   disconnectBase: () => Promise.resolve(),
-  useWallet: () => void 0
+  useWallet: () => void 0,
+  farcasterStatus: { isPresent: false }
 };
 export {
   defaultCosmosExternalWallet,

package/dist/constants/oAuthLogos.d.ts

@@ -0,0 +1,12 @@
+import { IconType } from '@getpara/react-components';
+import { TLinkedAccountType } from '@getpara/web-sdk';
+import { DisplayMetadata } from '../types/commonTypes.js';
+export declare const ACCOUNT_TYPES: {
+    [key in TLinkedAccountType | string]: DisplayMetadata & {
+        isExternalWallet?: boolean;
+    };
+};
+export declare function getAccountTypeName(type: TLinkedAccountType | string | undefined, { inline }?: {
+    inline?: boolean;
+}): string | undefined;
+export declare function getAccountTypeLogo(type: TLinkedAccountType | undefined): IconType | undefined;

package/dist/constants/oAuthLogos.js

@@ -0,0 +1,160 @@
+"use client";
+import "../chunk-GOCCUU3Z.js";
+const ACCOUNT_TYPES = {
+  "EMAIL": {
+    icon: "mail",
+    name: "Email",
+    inlineText: "email address",
+    isPlain: true
+  },
+  "PHONE": {
+    icon: "phone",
+    name: "Phone",
+    inlineText: "phone number",
+    isPlain: true
+  },
+  "EXTERNAL_WALLET": {
+    icon: "wallet",
+    name: "External Wallet",
+    inlineText: "external wallet",
+    isPlain: true
+  },
+  "GOOGLE": {
+    icon: "google",
+    iconBranded: "googleBrand",
+    name: "Google"
+  },
+  "TWITTER": {
+    icon: "twitter",
+    // Not using branded here to ensure the icon looks correct in dark mode
+    iconBranded: "twitter",
+    name: "X / Twitter",
+    inlineText: "X account",
+    isDark: true
+  },
+  "APPLE": {
+    icon: "apple",
+    // Not using branded here to ensure the icon looks correct in dark mode
+    iconBranded: "apple",
+    name: "Apple",
+    isDark: true
+  },
+  "DISCORD": {
+    icon: "discord",
+    iconBranded: "discordBrand",
+    name: "Discord"
+  },
+  "FACEBOOK": {
+    icon: "facebook",
+    iconBranded: "facebookBrand",
+    name: "Facebook"
+  },
+  "FARCASTER": {
+    icon: "farcaster",
+    iconBranded: "farcasterBrand",
+    name: "Farcaster"
+  },
+  "TELEGRAM": {
+    icon: "telegram",
+    iconBranded: "telegramBrand",
+    name: "Telegram"
+  },
+  "MetaMask": {
+    icon: "metamask",
+    name: "MetaMask",
+    isExternalWallet: true
+  },
+  "Rainbow": {
+    icon: "rainbow",
+    name: "Rainbow",
+    isExternalWallet: true
+  },
+  "Coinbase Wallet": {
+    icon: "coinbase",
+    name: "Coinbase Wallet",
+    isExternalWallet: true
+  },
+  "WalletConnect": {
+    icon: "walletConnect",
+    name: "WalletConnect",
+    isExternalWallet: true
+  },
+  "Zerion": {
+    icon: "zerion",
+    name: "Zerion",
+    isExternalWallet: true
+  },
+  "Safe": {
+    icon: "safe",
+    name: "Safe",
+    isExternalWallet: true
+  },
+  "Rabby": {
+    icon: "rabby",
+    name: "Rabby",
+    isExternalWallet: true
+  },
+  "OKX Wallet": {
+    icon: "okx",
+    name: "OKX Wallet",
+    isExternalWallet: true
+  },
+  "Phantom": {
+    icon: "phantom",
+    name: "Phantom",
+    isExternalWallet: true
+  },
+  "Glow": {
+    icon: "glow",
+    name: "Glow",
+    isExternalWallet: true
+  },
+  "Backpack": {
+    icon: "backpack",
+    name: "Backpack",
+    isExternalWallet: true
+  },
+  "Keplr": {
+    icon: "keplr",
+    name: "Keplr",
+    isExternalWallet: true
+  },
+  "Leap": {
+    icon: "leap",
+    name: "Leap",
+    isExternalWallet: true
+  },
+  "HaHa": {
+    icon: "haha",
+    name: "HaHa",
+    isExternalWallet: true
+  },
+  "Cosmostation": {
+    icon: "cosmostation",
+    name: "Cosmostation",
+    isExternalWallet: true
+  },
+  "Solflare": {
+    icon: "solflare",
+    name: "Solflare",
+    isExternalWallet: true
+  },
+  "Valora": {
+    icon: "valora",
+    name: "Valora",
+    isExternalWallet: true
+  }
+};
+function getAccountTypeName(type, { inline = false } = {}) {
+  var _a;
+  const data = type ? ACCOUNT_TYPES[type] : void 0;
+  return data ? inline ? (_a = data.inlineText) != null ? _a : `${data.name} ${data.isExternalWallet ? "wallet" : "account"}` : data.name : void 0;
+}
+function getAccountTypeLogo(type) {
+  return type ? ACCOUNT_TYPES[type].iconBranded || ACCOUNT_TYPES[type].icon : void 0;
+}
+export {
+  ACCOUNT_TYPES,
+  getAccountTypeLogo,
+  getAccountTypeName
+};

package/dist/index.d.ts

@@ -4,3 +4,4 @@ export * from './utils/index.js';
 export * from './hooks/index.js';
 export * from './types/index.js';
 export * from './constants/externalWalletDefaults.js';
+export * from './constants/oAuthLogos.js';

package/dist/index.js

@@ -5,3 +5,4 @@ export * from "./utils/index.js";
 export * from "./hooks/index.js";
 export * from "./types/index.js";
 export * from "./constants/externalWalletDefaults.js";
+export * from "./constants/oAuthLogos.js";

package/dist/types/commonTypes.d.ts

@@ -0,0 +1,15 @@
+import { IconType } from '@getpara/react-components';
+export type Tab<T> = {
+    label: string;
+    value: T;
+    icon: IconType;
+};
+export type DisplayMetadata = {
+    name: string;
+    inlineText?: string;
+    icon: IconType;
+    iconBranded?: IconType;
+    isDark?: boolean;
+    isCircular?: boolean;
+    isPlain?: boolean;
+};

package/dist/types/commonTypes.js

@@ -0,0 +1 @@
+"use client";

package/dist/types/externalWalletCommon.d.ts

@@ -77,9 +77,13 @@ export type BalanceManagement<B = string> = {
 };
 export type FarcasterMiniAppManagement = {
     farcasterStatus: {
+        isPresent: false;
+    } | {
+        isPresent: true;
         isConnected: false;
         address?: undefined;
     } | {
+        isPresent: true;
         isConnected: true;
         address: string;
     } | undefined;
@@ -89,8 +93,8 @@ export type ExternalWalletContextType<S extends SignResult = SignResult> = {
     disconnect: () => Promise<void>;
     signMessage: (_: SignArgs) => Promise<S>;
     signVerificationMessage: () => Promise<S>;
-    requestInfo: (_: TExternalWallet) => Promise<ExternalWalletInfo>;
-    disconnectBase: (_?: TExternalWallet) => Promise<void>;
+    requestInfo: (_: string) => Promise<ExternalWalletInfo>;
+    disconnectBase: (_?: string) => Promise<void>;
 };
 export type ExternalWalletProviderConfigBase = {
     onSwitchWallet?: (args: {

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 * 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/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,10 +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,12 @@ 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,

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@getpara/react-common",
-  "version": "2.0.0-dev.3",
+  "version": "2.0.0-dev.7",
   "dependencies": {
-    "@getpara/react-components": "2.0.0-dev.3",
-    "@getpara/web-sdk": "2.0.0-dev.3",
+    "@getpara/react-components": "2.0.0-dev.7",
+    "@getpara/web-sdk": "2.0.0-dev.7",
     "@moonpay/moonpay-react": "^1.8.3",
     "@ramp-network/ramp-instant-sdk": "^4.0.5",
     "libphonenumber-js": "^1.11.7",
@@ -40,5 +40,5 @@
   ],
   "type": "module",
   "types": "dist/index.d.ts",
-  "gitHead": "ffe34f7d8df2dd3c2327ca1f35bcc9764e0a68a2"
+  "gitHead": "225cd3693edaab4dac81df7285956d2616e5717f"
 }

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