@getpara/react-common 2.0.0-alpha.42 → 2.0.0-alpha.43

package/dist/components/UserIdentifier.d.ts

@@ -1,6 +1,8 @@
 import { IconType } from '@getpara/react-components';
 import { CoreAuthInfo } from '@getpara/web-sdk';
-export declare function getAuthDisplay(authInfo: CoreAuthInfo): {
+export declare function getAuthDisplay(authInfo: CoreAuthInfo, { withAddress }?: {
+    withAddress?: boolean;
+}): {
     name: string | null;
     icon?: IconType;
     src?: string;

package/dist/components/UserIdentifier.js

@@ -5,8 +5,9 @@ import {
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CpslAvatar, CpslIcon, CpslText } from "@getpara/react-components";
 import { displayPhoneNumber, truncateAddress } from "@getpara/web-sdk";
-import { getExternalWalletDisplayName, safeStyled } from "../utils/index.js";
-function getAuthDisplay(authInfo) {
+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":
@@ -21,8 +22,8 @@ function getAuthDisplay(authInfo) {
       }, pfpUrl ? { src: pfpUrl } : { icon: "telegramBrand" });
     case "externalWallet":
       return {
-        name: externalWallet ? getExternalWalletDisplayName(externalWallet) : truncateAddress(identifier, "EVM"),
-        icon: "wallet"
+        name: externalWallet ? getExternalWalletDisplayName(externalWallet, { withAddress }) : truncateAddress(identifier, "EVM"),
+        icon: (_a = getExternalWalletIcon(externalWallet == null ? void 0 : externalWallet.providerId)) != null ? _a : "wallet02"
       };
     default:
       return { name: null, icon: null };
@@ -33,7 +34,7 @@ const UserIdentifier = ({ authInfo }) => {
     return null;
   }
   const { authType } = authInfo;
-  const { name, icon, src } = getAuthDisplay(authInfo);
+  const { name, icon, src } = getAuthDisplay(authInfo, { withAddress: true });
   return /* @__PURE__ */ jsxs(Container, { children: [
     /* @__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 })

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/index.d.ts

@@ -1,6 +1,7 @@
 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;
     email?: string;

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

@@ -37,4 +37,5 @@ 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

@@ -107,6 +107,7 @@ 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-alpha.42",
+  "version": "2.0.0-alpha.43",
   "dependencies": {
-    "@getpara/react-components": "2.0.0-alpha.42",
-    "@getpara/web-sdk": "2.0.0-alpha.42",
+    "@getpara/react-components": "2.0.0-alpha.43",
+    "@getpara/web-sdk": "2.0.0-alpha.43",
     "@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": "6f44dc050550a1f567088c81b3ae06c7f1f8ebcb"
+  "gitHead": "6c4b7915c54f51ca0d4abb5c947e5997508669d1"
 }