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

package/dist/components/UserIdentifier.js

@@ -1,39 +1,46 @@
 "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 styled from "styled-components";
-import { displayPhoneNumber } from "@getpara/web-sdk";
-import { getExternalWalletDisplayName } 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 = styled.div`
+const Container = safeStyled.div`
   padding: 8px 12px 8px 8px;
   border-radius: 1000px;
   background-color: var(--cpsl-color-background-4);
@@ -42,10 +49,10 @@ const Container = styled.div`
   justify-content: flex-start;
   gap: 4px;
 `;
-const IdentifierText = styled(CpslText)`
+const IdentifierText = safeStyled(CpslText)`
   --color-override: var(--cpsl-color-background-96);
 `;
-const IconContainer = styled.div`
+const IconContainer = safeStyled.div`
   display: flex;
   background: var(--cpsl-color-background-0);
   align-items: center;
@@ -54,13 +61,14 @@ const IconContainer = styled.div`
   width: 20px;
   height: 20px;
 `;
-const Icon = styled(CpslIcon)`
+const Icon = safeStyled(CpslIcon)`
   --icon-color: var(--cpsl-color-text-primary);
 `;
-const Avatar = styled(CpslAvatar)`
+const Avatar = safeStyled(CpslAvatar)`
   --container-border-width: 0;
   --container-padding: 0;
 `;
 export {
-  UserIdentifier
+  UserIdentifier,
+  getAuthDisplay
 };

package/dist/components/WarningBanner.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface WarningBannerProps {
+    children: ReactNode;
+    onClose?: () => void;
+}
+export declare const WarningBanner: ({ children, onClose }: WarningBannerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/WarningBanner.js

@@ -0,0 +1,60 @@
+"use client";
+import "../chunk-GOCCUU3Z.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { CpslIcon } from "@getpara/react-components";
+import { safeStyled } from "../utils/index.js";
+const BannerContainer = safeStyled.div`
+  background: #fffcec;
+  border: 2px solid var(--cpsl-color-utility-yellow);
+  border-radius: 4px;
+  padding: 8px 8px;
+`;
+const Content = safeStyled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  position: relative;
+`;
+const Text = safeStyled.div`
+  flex: 1;
+  font-size: 14px;
+  line-height: 1.4;
+  color: var(--cpsl-color-black);
+  font-weight: 400;
+`;
+const CloseButton = safeStyled.button`
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-top: 1px;
+`;
+const CloseIcon = safeStyled(CpslIcon)`
+  --icon-color: var(--cpsl-color-utility-yellow);
+  --height: 20px;
+  --width: 20px;
+`;
+const WarningBanner = ({ children, onClose }) => {
+  const [isVisible, setIsVisible] = useState(true);
+  const handleClose = () => {
+    setIsVisible(false);
+    onClose == null ? void 0 : onClose();
+  };
+  if (!isVisible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(BannerContainer, { children: /* @__PURE__ */ jsxs(Content, { children: [
+    /* @__PURE__ */ jsx(CloseButton, { onClick: handleClose, "aria-label": "Close warning", children: /* @__PURE__ */ jsx(CloseIcon, { icon: "x" }) }),
+    /* @__PURE__ */ jsx(Text, { children })
+  ] }) });
+};
+export {
+  WarningBanner
+};

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<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
+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

@@ -1,13 +1,13 @@
 "use client";
 import "../chunk-GOCCUU3Z.js";
 import { CpslButton, CpslInput, CpslText } from "@getpara/react-components";
-import styled from "styled-components";
-const SpinnerContainer = styled.div`
+import { safeStyled } from "../utils/index.js";
+const SpinnerContainer = safeStyled.div`
   display: flex;
   align-items: center;
   justify-content: center;
 `;
-const CenteredColumnContainer = styled.div`
+const CenteredColumnContainer = safeStyled.div`
   width: 100%;
   height: 100%;
   align-self: center;
@@ -16,21 +16,21 @@ const CenteredColumnContainer = styled.div`
   align-items: center;
   gap: 8px;
 `;
-const FilledDisabledInput = styled(CpslInput)`
+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 = styled(FilledDisabledInput)`
+const FullWidthFilledDisabledInput = safeStyled(FilledDisabledInput)`
   width: 100%;
 `;
-const CenteredText = styled(CpslText)`
+const CenteredText = safeStyled(CpslText)`
   width: 100%;
   text-align: center;
 `;
-const HeaderButton = styled(CpslButton)`
+const HeaderButton = safeStyled(CpslButton)`
   flex: 0;
   --button-padding-top: 2px;
   --button-padding-bottom: 2px;

package/dist/components/index.d.ts

@@ -1,9 +1,9 @@
 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';
+export * from './WarningBanner.js';

package/dist/components/index.js

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

package/dist/constants/externalWalletDefaults.d.ts

@@ -0,0 +1,47 @@
+import { ExternalWalletInfo } from '@getpara/web-sdk';
+export declare const defaultCosmosExternalWallet: {
+    wallets: any[];
+    chains: any[];
+    chainId: any;
+    disconnect: () => Promise<void>;
+    switchChain: () => Promise<void>;
+    connectParaEmbedded: () => Promise<{}>;
+    signMessage: () => Promise<{}>;
+    signVerificationMessage: () => Promise<{}>;
+    requestInfo: () => Promise<any>;
+    disconnectBase: () => Promise<void>;
+    useAccount: () => any;
+};
+export declare const defaultEvmExternalWallet: {
+    wallets: any[];
+    chains: any[];
+    chainId: any;
+    username: any;
+    avatar: any;
+    balance: any;
+    disconnect: () => Promise<void>;
+    switchChain: () => Promise<void>;
+    connectParaEmbedded: () => Promise<{}>;
+    signMessage: () => Promise<{}>;
+    signVerificationMessage: () => Promise<{}>;
+    getWalletBalance: () => Promise<any>;
+    requestInfo: () => Promise<ExternalWalletInfo>;
+    disconnectBase: () => Promise<void>;
+    useAccount: () => any;
+    farcasterStatus: {
+        isPresent: false;
+    };
+    verificationStage: any;
+};
+export declare const defaultSolanaExternalWallet: {
+    wallets: any[];
+    disconnect: () => Promise<void>;
+    signMessage: () => Promise<{}>;
+    signVerificationMessage: () => Promise<{}>;
+    requestInfo: () => Promise<ExternalWalletInfo>;
+    disconnectBase: () => Promise<void>;
+    useWallet: () => any;
+    farcasterStatus: {
+        isPresent: false;
+    };
+};

package/dist/constants/externalWalletDefaults.js

@@ -0,0 +1,49 @@
+"use client";
+import "../chunk-GOCCUU3Z.js";
+const defaultCosmosExternalWallet = {
+  wallets: [],
+  chains: [],
+  chainId: void 0,
+  disconnect: () => Promise.resolve(),
+  switchChain: () => Promise.resolve(),
+  connectParaEmbedded: () => Promise.resolve({}),
+  signMessage: () => Promise.resolve({}),
+  signVerificationMessage: () => Promise.resolve({}),
+  requestInfo: () => Promise.resolve({}),
+  disconnectBase: () => Promise.resolve(),
+  useAccount: () => void 0
+};
+const defaultEvmExternalWallet = {
+  wallets: [],
+  chains: [],
+  chainId: void 0,
+  username: void 0,
+  avatar: void 0,
+  balance: void 0,
+  disconnect: () => Promise.resolve(),
+  switchChain: () => Promise.resolve(),
+  connectParaEmbedded: () => Promise.resolve({}),
+  signMessage: () => Promise.resolve({}),
+  signVerificationMessage: () => Promise.resolve({}),
+  getWalletBalance: () => Promise.resolve(void 0),
+  requestInfo: () => Promise.resolve({}),
+  disconnectBase: () => Promise.resolve(),
+  useAccount: () => void 0,
+  farcasterStatus: { isPresent: false },
+  verificationStage: void 0
+};
+const defaultSolanaExternalWallet = {
+  wallets: [],
+  disconnect: () => Promise.resolve(),
+  signMessage: () => Promise.resolve({}),
+  signVerificationMessage: () => Promise.resolve({}),
+  requestInfo: () => Promise.resolve({}),
+  disconnectBase: () => Promise.resolve(),
+  useWallet: () => void 0,
+  farcasterStatus: { isPresent: false }
+};
+export {
+  defaultCosmosExternalWallet,
+  defaultEvmExternalWallet,
+  defaultSolanaExternalWallet
+};

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

@@ -1 +1,2 @@
 export * from './useCopyToClipboard.js';
+export * from './useUserAgent.js';

package/dist/hooks/index.js

@@ -1,2 +1,3 @@
 "use client";
 export * from "./useCopyToClipboard.js";
+export * from "./useUserAgent.js";

package/dist/hooks/useUserAgent.d.ts

@@ -0,0 +1,2 @@
+import { IResult } from 'ua-parser-js';
+export declare function useUserAgent(): IResult;

package/dist/hooks/useUserAgent.js

@@ -0,0 +1,10 @@
+"use client";
+import "../chunk-GOCCUU3Z.js";
+import { UAParser } from "ua-parser-js";
+function useUserAgent() {
+  const userAgent = typeof window !== "undefined" ? window.navigator.userAgent : void 0;
+  return UAParser(userAgent);
+}
+export {
+  useUserAgent
+};

package/dist/index.d.ts

@@ -3,3 +3,5 @@ export * from './components/index.js';
 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

@@ -4,3 +4,5 @@ export * from "./components/index.js";
 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";