@getpara/react-common 2.0.0-alpha.64 → 2.0.0-alpha.66

package/dist/{chunk-GOCCUU3Z.js → chunk-MMUBH76A.js}

@@ -1,5 +1,7 @@
 "use client";
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -15,6 +17,19 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -38,5 +53,7 @@ var __async = (__this, __arguments, generator) => {
 
 export {
   __spreadValues,
+  __spreadProps,
+  __objRest,
   __async
 };

package/dist/classes/ParaInternal.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import "../chunk-MMUBH76A.js";
 import ParaWeb from "@getpara/web-sdk";
 class ParaInternal extends ParaWeb {
   constructor() {

package/dist/components/HeroSpinner.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import "../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CpslIcon, CpslSpinner, CpslText } from "@getpara/react-components";
 import { safeStyled } from "../utils/index.js";

package/dist/components/KnownDevices.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import "../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
 import { CenteredColumnContainer, FullWidthFilledDisabledInput, CenteredText } from "./common.js";

package/dist/components/MoonPayEmbed.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   __async
-} from "../chunk-GOCCUU3Z.js";
+} from "../chunk-MMUBH76A.js";
 import { jsx } from "react/jsx-runtime";
 import { OnRampProvider } from "@getpara/web-sdk";
 import { lazy, useCallback, useEffect, useMemo, useState } from "react";

package/dist/components/NetworkSpeedBanner.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import "../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { CpslIcon } from "@getpara/react-components";

package/dist/components/QRCode.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import "../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpara/react-components";
 import { useCopyToClipboard } from "../hooks/index.js";

package/dist/components/RampEmbed.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   __async
-} from "../chunk-GOCCUU3Z.js";
+} from "../chunk-MMUBH76A.js";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { RampInstantSDK } from "@ramp-network/ramp-instant-sdk";

package/dist/components/UserIdentifier.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   __spreadValues
-} from "../chunk-GOCCUU3Z.js";
+} from "../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CpslAvatar, CpslIcon, CpslText } from "@getpara/react-components";
 import { displayPhoneNumber, truncateAddress } from "@getpara/web-sdk";

package/dist/components/WalletSelect.d.ts

@@ -0,0 +1,33 @@
+import { AvailableWallet, TWalletType, TExternalWallet } from '@getpara/web-sdk';
+type EntryProps = {
+    name?: string;
+    type?: TWalletType;
+    externalWallet?: TExternalWallet | string;
+    withCopy?: boolean;
+    withIcon?: boolean;
+    copyValue?: string;
+};
+export declare const WalletSelect: ({ isDark, style, className, value, onChange, options, getEntryProps, getSelectValue, helperText, }: {
+    isDark: any;
+    style?: React.CSSProperties;
+    className?: string;
+    value: AvailableWallet;
+    onChange: (_: AvailableWallet) => void;
+    options: AvailableWallet[];
+    getEntryProps: (wallet: AvailableWallet) => EntryProps;
+    getSelectValue: (wallet: AvailableWallet) => `${string}~${TWalletType}`;
+    helperText?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
+    ref?: import("react").Ref<any>;
+}, {
+    $width: number;
+    $top?: number;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;
+export declare const SelectItem: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
+    ref?: import("react").Ref<any>;
+}, {
+    isMultiOption?: boolean;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;
+export declare const SelectContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export {};

package/dist/components/WalletSelect.js

@@ -0,0 +1,172 @@
+"use client";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { useDropdownPosition, useCopyToClipboard } from "../hooks/index.js";
+import { safeStyled } from "../utils/index.js";
+import { CpslButton, CpslIcon, CpslSelect, CpslSelectItem, CpslText } from "@getpara/react-components";
+import { WalletTypeIcon as WalletTypeIconBase } from "./WalletTypeIcon.js";
+const Entry = ({
+  isDark = false,
+  withCopy,
+  slot,
+  withIcon,
+  name,
+  type,
+  externalWallet,
+  copyValue,
+  isMultiOption
+}) => {
+  const [isCopied, copy] = useCopyToClipboard();
+  return /* @__PURE__ */ jsxs(WalletContainer, { slot, style: { flex: "1" }, isMultiOption, children: [
+    withIcon && /* @__PURE__ */ jsx(WalletTypeIcon, { isDark, externalWallet, walletType: type, size: "32px", inset: "6px" }),
+    /* @__PURE__ */ jsx(
+      CpslText,
+      {
+        variant: "bodyM",
+        color: "contrast",
+        style: { flex: "1", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "clip" },
+        children: name
+      }
+    ),
+    withCopy && copyValue && /* @__PURE__ */ jsx(
+      CopyButton,
+      {
+        id: "ignore-click",
+        size: "small",
+        variant: "ghost",
+        onClick: (e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          copy(copyValue);
+        },
+        children: /* @__PURE__ */ jsx(CpslIcon, { id: "ignore-click", slot: "start", icon: isCopied ? "check" : "copy" })
+      }
+    )
+  ] });
+};
+const WalletSelect = ({
+  isDark = false,
+  style,
+  className,
+  value,
+  onChange,
+  options,
+  getEntryProps,
+  getSelectValue,
+  helperText
+}) => {
+  const containerRef = useRef(null);
+  const { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize } = useDropdownPosition(containerRef);
+  const isMulti = options.length > 1;
+  const ActiveEntry = value ? /* @__PURE__ */ jsx(Entry, __spreadProps(__spreadValues({ isDark, withCopy: true, slot: "selected-item" }, getEntryProps(value)), { isMultiOption: isMulti })) : null;
+  useEffect(() => {
+    if (dropdownMaxHeight && (value == null ? void 0 : value.address)) {
+      resize();
+    }
+  }, [value, options, dropdownMaxHeight]);
+  return /* @__PURE__ */ jsxs(Container, { className, style, children: [
+    isMulti && helperText && /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", color: "secondary", weight: "semiBold", children: helperText }),
+    /* @__PURE__ */ jsx(SelectContainer, { ref: containerRef, id: "addressInputContainer", children: /* @__PURE__ */ jsxs(
+      Select,
+      {
+        selectedValue: getSelectValue(value),
+        onCpslSelectValueChange: (e) => {
+          const [id, type] = e.detail.split("~");
+          onChange(options.find((o) => o.id === id && o.type === type));
+        },
+        showFormattedSelectedItem: true,
+        placeholder: "Choose wallet...",
+        anchorElId: "addressInputContainer",
+        dropdownMaxHeight,
+        $width: dropdownWidth != null ? dropdownWidth : 0,
+        $top: (mobileAnchor != null ? mobileAnchor : 0) + 16 + 1,
+        selectedItemVariant: "bodyXS",
+        icon: isMulti ? "chevronUp" : null,
+        disabled: !isMulti,
+        isMultiOption: isMulti,
+        children: [
+          value && ActiveEntry,
+          (options || []).map((wallet) => {
+            const key = getSelectValue(wallet);
+            return /* @__PURE__ */ jsx(SelectItem, { slot: "items", value: key, children: /* @__PURE__ */ jsx(Entry, __spreadValues({ isDark }, getEntryProps(wallet))) }, key);
+          })
+        ]
+      }
+    ) })
+  ] });
+};
+const Container = safeStyled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+`;
+const WalletContainer = safeStyled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 100%;
+  padding-inline-end: ${({ isMultiOption }) => isMultiOption ? "40px" : "0px"};
+`;
+const Select = safeStyled(CpslSelect)`
+  --icon-width: 32px;
+  --icon-height: 32px;
+  --container-border-color: var(--cpsl-color-background-16);
+  --container-background-color-disabled: var(--container-background-color);
+  width: 100%;
+  position: relative;
+
+  &::part(selected-text) {
+    white-space: nowrap;
+  }
+
+  &::part(dropdown) {
+    min-width: ${({ $width }) => `${$width - 2}px`};
+  }
+
+  &::part(icon) {
+    --icon-color: var(--cpsl-color-text-primary);
+    position: absolute;
+    right: 12px;
+  }
+`;
+const SelectItem = safeStyled(CpslSelectItem)`
+  --outer-container-padding-start: 0px;
+  --outer-container-padding-end: 0px;
+  --outer-container-padding-top: 0px;
+  --outer-container-padding-bottom: 0px;
+  --container-padding-start: 12px;
+  --container-padding-end: ${({ isMultiOption }) => isMultiOption ? "40px" : "12px"};
+  --container-padding-top: 8px;
+  --container-padding-bottom: 8px;
+`;
+const SelectContainer = safeStyled.div`
+  width: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: var(--cpsl-border-radius-tile-button);
+  background-color: var(--cpsl-color-background-4);
+`;
+const WalletTypeIcon = safeStyled(WalletTypeIconBase)`
+  --border: 1px solid var(--cpsl-color-background-8);
+  --background: var(--cpsl-color-background-0);
+  --border-radius: 4px;
+`;
+const CopyButton = safeStyled(CpslButton)`
+  cpsl-icon {
+    --height: 24px;
+    --width: 24px;
+  }
+`;
+export {
+  Select,
+  SelectContainer,
+  SelectItem,
+  WalletSelect
+};

package/dist/components/WalletTypeIcon.d.ts

@@ -0,0 +1,9 @@
+import { CpslIcon } from '@getpara/react-components';
+import { TExternalWallet, TWalletType } from '@getpara/web-sdk';
+import { CommonWallet } from '../types/index.js';
+export declare function WalletTypeIcon({ className, walletType, externalWallet, isDark, ...props }: {
+    className?: string;
+    walletType: TWalletType;
+    isDark?: boolean;
+    externalWallet?: TExternalWallet | CommonWallet | string;
+} & Parameters<typeof CpslIcon>[0]): import("react/jsx-runtime").JSX.Element;

package/dist/components/WalletTypeIcon.js

@@ -0,0 +1,45 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-MMUBH76A.js";
+import { jsx } from "react/jsx-runtime";
+import { CpslIcon } from "@getpara/react-components";
+import { ACCOUNT_TYPES } from "../constants/oAuthLogos.js";
+import { WALLET_TYPES_METADATA } from "../constants/index.js";
+function WalletTypeIcon(_a) {
+  var _b = _a, {
+    className,
+    walletType,
+    externalWallet,
+    isDark = false
+  } = _b, props = __objRest(_b, [
+    "className",
+    "walletType",
+    "externalWallet",
+    "isDark"
+  ]);
+  var _a2, _b2;
+  if (typeof externalWallet === "object" && "iconUrl" in externalWallet) {
+    return /* @__PURE__ */ jsx(CpslIcon, __spreadProps(__spreadValues({ className, src: externalWallet.iconUrl }, props), { inset: (_a2 = props.inset) != null ? _a2 : "10%" }));
+  }
+  const data = (externalWallet ? ACCOUNT_TYPES[externalWallet] : WALLET_TYPES_METADATA[walletType]) || {
+    icon: "wallet02",
+    isDark: true
+  };
+  props.size;
+  return /* @__PURE__ */ jsx(
+    CpslIcon,
+    __spreadProps(__spreadValues({
+      className,
+      icon: data.icon,
+      invert: isDark && data.isDark
+    }, props), {
+      inset: (_b2 = props.inset) != null ? _b2 : "10%"
+    })
+  );
+}
+export {
+  WalletTypeIcon
+};

package/dist/components/WarningBanner.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import "../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { CpslIcon } from "@getpara/react-components";

package/dist/components/common.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import "../chunk-MMUBH76A.js";
 import { CpslButton, CpslInput, CpslText } from "@getpara/react-components";
 import { safeStyled } from "../utils/index.js";
 const SpinnerContainer = safeStyled.div`

package/dist/components/index.d.ts

@@ -7,3 +7,5 @@ export * from './QRCode.js';
 export * from './UserIdentifier.js';
 export * from './NetworkSpeedBanner.js';
 export * from './WarningBanner.js';
+export * from './WalletSelect.js';
+export * from './WalletTypeIcon.js';

package/dist/components/index.js

@@ -8,3 +8,5 @@ export * from "./QRCode.js";
 export * from "./UserIdentifier.js";
 export * from "./NetworkSpeedBanner.js";
 export * from "./WarningBanner.js";
+export * from "./WalletSelect.js";
+export * from "./WalletTypeIcon.js";

package/dist/constants/aaguiMetadata.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import "../chunk-MMUBH76A.js";
 const aaguidMetadata = {
   "ea9b8d66-4d01-1d21-3ce4-b6b48cb575d4": {
     name: "Google Password Manager",

package/dist/constants/externalWalletDefaults.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import "../chunk-MMUBH76A.js";
 const defaultCosmosExternalWallet = {
   wallets: [],
   chains: [],

package/dist/constants/index.d.ts

@@ -0,0 +1,37 @@
+import { TNetwork, TOnRampAsset, OnRampMethod, OnRampProvider, TWalletType } from '@getpara/core-sdk';
+import { IconType } from '@getpara/react-components';
+import { Transition, Variants } from 'framer-motion';
+import { DisplayMetadata } from '../types/commonTypes.js';
+export declare const PARA_CONNECT = "https://connect.getpara.com/";
+export declare const PARA_TERMS_AND_CONDITIONS = "https://getpara.com/terms";
+export type OnRampProviderConfig = DisplayMetadata & {
+    feeLower: number;
+    feeUpper?: number;
+    methods: OnRampMethod[];
+    backgroundColors: string[];
+};
+export declare const ON_RAMP_PROVIDERS: Record<OnRampProvider, OnRampProviderConfig>;
+type Networks = Record<TNetwork, DisplayMetadata>;
+export declare const WALLET_TYPES_METADATA: Record<TWalletType, DisplayMetadata>;
+export declare const NETWORKS: Networks;
+export declare const ON_RAMP_ASSETS: Record<TOnRampAsset, {
+    name: string;
+    code: string;
+    icon: IconType;
+    isCircular?: boolean;
+    isDark?: boolean;
+}>;
+export declare function getNetworkName(str: TNetwork | string): string;
+export declare function getNetworkIcon(str: TNetwork | string): IconType;
+export declare function getAssetCode(str: TOnRampAsset | string): string;
+export declare function getAssetName(str: TOnRampAsset | string): string;
+export declare function getAssetIcon(str: TOnRampAsset | string): "alertCircle" | "alertTriangle" | "alignVerticalCenter" | "angelListBrand" | "angelList" | "appleBrand" | "apple" | "arbitrumBrand" | "arrowCircleBrokenDownLeft" | "arrowCircleDownFilled" | "arrowCircleDown" | "arrowNarrow" | "arrow" | "asterisk" | "backpack" | "backupKit" | "bank" | "baseBrand" | "beraBrand" | "brush" | "celoBrand" | "checkCircleFilled" | "checkCircle" | "checkSquare" | "check" | "chevronDown" | "chevronRight" | "chevronSelectorVertical" | "chevronUp" | "clock" | "close" | "clubhouseBrand" | "clubhouse" | "code" | "coinbase" | "copy07" | "copy" | "cosmosCircle" | "cosmos" | "cosmostation" | "creditCard02" | "creditCard" | "cube03" | "cubeOutline" | "cube" | "currencyDollar" | "decentBrand" | "decent" | "dell" | "discordBrand" | "discord" | "dot" | "dotsSquare" | "dots" | "downloadCloud" | "download" | "dribbbleBrand" | "dribbble" | "earth" | "edit02" | "emptyCircle" | "ethCircle" | "ethereum" | "eyeOff" | "eye" | "facebookBrand" | "facebook" | "farcasterBrand" | "farcaster" | "figmaBrand" | "figma" | "file" | "folder" | "githubBrand" | "github" | "globe" | "glow" | "googleBrand" | "google" | "gridDots" | "haha" | "helpCircle" | "heroAlertCircle" | "heroCheckmarkCapsule" | "heroCheckmark" | "heroEmail" | "heroExternalConnection" | "heroLock" | "heroPasskey" | "heroPhone" | "heroPlusCircleCapsule" | "heroPlusCircle" | "heroWallet" | "home" | "hp" | "image" | "infoCircle" | "instagramBrand" | "instagram" | "keplr" | "key" | "laptop" | "leap" | "lenovo" | "lg" | "lightning01" | "lightning" | "linkExternal" | "linkedinBrand" | "linkedin" | "lockKeyholeCircle" | "logOut" | "mail" | "menu" | "metamask" | "monitor" | "moonpayBrand" | "moreLoginOptions" | "motorola" | "nobleBrand" | "okx" | "optimismBrand" | "paraArrow" | "paraBlackBg" | "paraBrand" | "paraIconBrand" | "paraIconQr" | "paraIcon" | "paraLogo" | "paraRingsDark" | "paraRings" | "para" | "passcode" | "phantom" | "phone" | "pintrestBrand" | "pintrest" | "plusCircle" | "plus" | "polygonBrand" | "polygon" | "puzzlePiece" | "qrCode02" | "qrCode" | "rabby" | "rainbow" | "rampNetworkBrand" | "rampNetwork" | "redditBrand" | "reddit" | "refresh" | "safe" | "samsung" | "search" | "send" | "settings" | "share" | "shield" | "shuffle" | "signalBrand" | "signal" | "sliders" | "snapchatBrand" | "snapchat" | "solanaCircle" | "solana" | "solflare" | "spacingHeight" | "star04Filled" | "star05" | "stars01Filled" | "stars02" | "stars" | "stopSquare" | "stripeBrand" | "telegramBrand" | "telegram" | "tetherBrand" | "tikTokBrand" | "tikTok" | "trash" | "tumblrBrand" | "tumblr" | "twitterBrand" | "twitter" | "usdcBrand" | "user01" | "userCircle" | "userPlus" | "user" | "valora" | "wallet02" | "walletConnect" | "wallet" | "x" | "youtubeBrand" | "youtube" | "zerion" | "AD" | "AE" | "AF" | "AG" | "AI" | "AL" | "AM" | "AO" | "AR" | "AS" | "AT" | "AU" | "AW" | "AX" | "AZ" | "BA" | "BB" | "BD" | "BE" | "BF" | "BG" | "BH" | "BI" | "BJ" | "BL" | "BM" | "BN" | "BO" | "BQ" | "BQ2" | "BQ3" | "BR" | "BS" | "BT" | "BW" | "BY" | "BZ" | "CA" | "CC" | "CD" | "CD2" | "CF" | "CH" | "CK" | "CL" | "CM" | "CN" | "CO" | "CR" | "CU" | "CW" | "CX" | "CY" | "CZ" | "DE" | "DJ" | "DK" | "DM" | "DO" | "DS" | "DZ" | "EC" | "EE" | "EG" | "EH" | "ER" | "ES" | "ET" | "FI" | "FJ" | "FK" | "FM" | "FO" | "FR" | "GA" | "GB2" | "GB" | "GD" | "GE" | "GG" | "GH" | "GI" | "GL" | "GM" | "GN" | "GQ" | "GR" | "GT" | "GU" | "GW" | "GY" | "HK" | "HN" | "HR" | "HT" | "HU" | "ID" | "IE" | "IL" | "IM" | "IN" | "IO" | "IQ" | "IR" | "IS" | "IT" | "JE" | "JM" | "JO" | "JP" | "KE" | "KG" | "KH" | "KI" | "KM" | "KN" | "KP" | "KR" | "KW" | "KY" | "KZ" | "LA" | "LB" | "LC" | "LI" | "LK" | "LR" | "LS" | "LT" | "LU" | "LV" | "LY" | "MA" | "MC" | "MD" | "ME" | "MG" | "MH" | "MK" | "ML" | "MM" | "MN" | "MO" | "MP" | "MQ" | "MR" | "MS" | "MT" | "MU" | "MV" | "MW" | "MX" | "MY" | "MZ" | "NA" | "NE" | "NF" | "NG" | "NI" | "NL" | "NO" | "NP" | "NR" | "NU" | "NZ" | "OM" | "PA" | "PE" | "PF" | "PG" | "PH" | "PK" | "PL" | "PN" | "PR" | "PS" | "PT" | "PW" | "PY" | "QA" | "RO" | "RS" | "RU" | "RW" | "SA" | "SB" | "SC" | "SE" | "SG" | "SI" | "SK" | "SL" | "SM" | "SN" | "SO" | "SR" | "SS" | "ST" | "SV" | "SX" | "SY" | "SZ" | "TC" | "TD" | "TG" | "TH" | "TJ" | "TK" | "TL" | "TM" | "TN" | "TO" | "TR" | "TT" | "TV" | "TW" | "TZ" | "UA" | "UG" | "US" | "UY" | "UZ" | "VC" | "VE" | "VG" | "VI" | "VN" | "VU" | "WS" | "YE" | "ZA" | "ZM" | "ZW";
+export declare const MOBILE_SIZE = 480;
+export declare const NETWORK_NOT_SUPPORTED_ERROR = "network not supported";
+export declare const EMAIL_REGEX: RegExp;
+export declare const BODY_MOTION_VARIANTS: Variants;
+export declare const BODY_TRANSITION: Transition;
+export declare const SDK_VERSION: string;
+export * from './aaguiMetadata.js';
+export * from './externalWalletDefaults.js';
+export * from './oAuthLogos.js';

package/dist/constants/index.js

@@ -0,0 +1,152 @@
+"use client";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-MMUBH76A.js";
+var _a;
+import { OnRampMethod, OnRampProvider } from "@getpara/core-sdk";
+const PARA_CONNECT = "https://connect.getpara.com/";
+const PARA_TERMS_AND_CONDITIONS = "https://getpara.com/terms";
+const ON_RAMP_PROVIDERS = {
+  [OnRampProvider.STRIPE]: {
+    name: "Stripe",
+    feeLower: 0.99,
+    feeUpper: 4.49,
+    methods: [OnRampMethod.ACH, OnRampMethod.DEBIT, OnRampMethod.CREDIT],
+    icon: "stripeBrand",
+    backgroundColors: ["#6772E5", "#808AF4"]
+  },
+  [OnRampProvider.RAMP]: {
+    name: "Ramp",
+    feeLower: 0.99,
+    feeUpper: 4.49,
+    methods: [OnRampMethod.ACH, OnRampMethod.DEBIT, OnRampMethod.CREDIT],
+    icon: "rampNetworkBrand",
+    backgroundColors: ["#21BF73", "#3AE492"]
+  },
+  [OnRampProvider.MOONPAY]: {
+    name: "MoonPay",
+    feeLower: 1,
+    feeUpper: 4.5,
+    methods: [OnRampMethod.ACH, OnRampMethod.DEBIT, OnRampMethod.CREDIT],
+    icon: "moonpayBrand",
+    backgroundColors: ["#7715F5", "#9647fd"]
+  }
+};
+const ICON_TYPES = {
+  ethereum: { isDark: true },
+  usdcBrand: { isCircular: true },
+  arbitrumBrand: { isCircular: true },
+  baseBrand: { isCircular: true },
+  optimismBrand: { isCircular: true },
+  cosmos: { isCircular: true, isDark: true },
+  celoBrand: { isCircular: true },
+  tetherBrand: { isCircular: true }
+};
+const WALLET_TYPES_METADATA = {
+  EVM: { name: "EVM", icon: "ethereum", isDark: true },
+  SOLANA: { name: "Solana", icon: "solana" },
+  COSMOS: { name: "Cosmos", icon: "cosmos", isCircular: true, isDark: true }
+};
+const NETWORKS = Object.entries({
+  ["ETHEREUM"]: { name: "Ethereum", icon: "ethereum" },
+  ["SEPOLIA"]: { name: "Sepolia", icon: "ethereum" },
+  ["ARBITRUM"]: { name: "Arbitrum", icon: "arbitrumBrand" },
+  ["BASE"]: { name: "Base", icon: "baseBrand" },
+  ["OPTIMISM"]: { name: "Optimism", icon: "optimismBrand" },
+  ["POLYGON"]: { name: "Polygon", icon: "polygonBrand" },
+  ["SOLANA"]: { name: "Solana", icon: "solana" },
+  ["COSMOS"]: { name: "Cosmos", icon: "cosmos" },
+  ["CELO"]: { name: "Celo", icon: "celoBrand" },
+  ["SOLANA_DEVNET"]: { name: "Solana Devnet", icon: "solana" },
+  ["NOBLE"]: { name: "Noble", icon: "nobleBrand" },
+  ["BERACHAIN"]: { name: "Berachain", icon: "beraBrand" }
+}).reduce((acc, [key, entry]) => {
+  return __spreadProps(__spreadValues({}, acc), {
+    [key]: __spreadValues(__spreadValues({}, entry), ICON_TYPES[entry.icon])
+  });
+}, {});
+const ON_RAMP_ASSETS = Object.entries({
+  ["ETHEREUM"]: { name: "Ethereum", code: "ETH", icon: "ethereum" },
+  ["USDC"]: { name: "USD Coin", code: "USDC", icon: "usdcBrand" },
+  ["POLYGON"]: { name: "Polygon", code: "POL", icon: "polygonBrand" },
+  ["SOLANA"]: { name: "Solana", code: "SOL", icon: "solana" },
+  ["ATOM"]: { name: "Atom", code: "ATOM", icon: "cosmos" },
+  ["CELO"]: { name: "Celo", code: "CELO", icon: "celoBrand" },
+  ["TETHER"]: { name: "Tether", code: "USDT", icon: "tetherBrand" },
+  ["CUSD"]: { name: "Celo Dollar", code: "CUSD", icon: "celoBrand" },
+  ["CEUR"]: { name: "Celo Euro", code: "CEUR", icon: "celoBrand" },
+  ["CREAL"]: { name: "Celo Real", code: "CREAL", icon: "celoBrand" },
+  ["BERA"]: { name: "Berachain", code: "BERA", icon: "beraBrand" }
+}).reduce((acc, [key, entry]) => {
+  return __spreadProps(__spreadValues({}, acc), {
+    [key]: __spreadValues(__spreadValues({}, entry), ICON_TYPES[entry.icon])
+  });
+}, {});
+function getNetworkName(str) {
+  var _a2, _b;
+  return (_b = (_a2 = NETWORKS[str]) == null ? void 0 : _a2.name) != null ? _b : `${str[0]}${str.slice(1).toLowerCase()}`;
+}
+function getNetworkIcon(str) {
+  var _a2, _b;
+  return (_b = (_a2 = NETWORKS[str]) == null ? void 0 : _a2.icon) != null ? _b : "globe";
+}
+function getAssetCode(str) {
+  var _a2, _b;
+  return (_b = (_a2 = ON_RAMP_ASSETS[str]) == null ? void 0 : _a2.code) != null ? _b : str;
+}
+function getAssetName(str) {
+  var _a2, _b;
+  return (_b = (_a2 = ON_RAMP_ASSETS[str]) == null ? void 0 : _a2.name) != null ? _b : str;
+}
+function getAssetIcon(str) {
+  var _a2, _b;
+  return (_b = (_a2 = ON_RAMP_ASSETS[str]) == null ? void 0 : _a2.icon) != null ? _b : "emptyCircle";
+}
+const MOBILE_SIZE = 480;
+const NETWORK_NOT_SUPPORTED_ERROR = "network not supported";
+const EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+const BODY_MOTION_VARIANTS = {
+  enter: (direction) => {
+    return {
+      scale: direction > 0 ? 0.9 : 1.1,
+      opacity: 0
+    };
+  },
+  center: {
+    scale: 1,
+    opacity: 1
+  },
+  exit: (direction) => {
+    return {
+      scale: direction < 0 ? 0.9 : 1.1,
+      opacity: 0
+    };
+  }
+};
+const BODY_TRANSITION = {
+  duration: 0.2
+};
+const SDK_VERSION = (_a = process.env.PARA_REACT_SDK_VERSION) != null ? _a : "";
+export * from "./aaguiMetadata.js";
+export * from "./externalWalletDefaults.js";
+export * from "./oAuthLogos.js";
+export {
+  BODY_MOTION_VARIANTS,
+  BODY_TRANSITION,
+  EMAIL_REGEX,
+  MOBILE_SIZE,
+  NETWORKS,
+  NETWORK_NOT_SUPPORTED_ERROR,
+  ON_RAMP_ASSETS,
+  ON_RAMP_PROVIDERS,
+  PARA_CONNECT,
+  PARA_TERMS_AND_CONDITIONS,
+  SDK_VERSION,
+  WALLET_TYPES_METADATA,
+  getAssetCode,
+  getAssetIcon,
+  getAssetName,
+  getNetworkIcon,
+  getNetworkName
+};

package/dist/constants/oAuthLogos.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import "../chunk-MMUBH76A.js";
 const ACCOUNT_TYPES = {
   "EMAIL": {
     icon: "mail",

package/dist/hooks/index.d.ts

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

package/dist/hooks/index.js

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

package/dist/hooks/useCopyToClipboard.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   __async
-} from "../chunk-GOCCUU3Z.js";
+} from "../chunk-MMUBH76A.js";
 import { useCallback, useState } from "react";
 function useCopyToClipboard() {
   const [copied, setCopied] = useState(false);

package/dist/hooks/useDropdownPosition.d.ts

@@ -0,0 +1,7 @@
+import { MutableRefObject } from 'react';
+export declare const useDropdownPosition: (inputRef: MutableRefObject<HTMLCpslInputElement | HTMLDivElement | null>) => {
+    dropdownMaxHeight: number;
+    dropdownWidth: number;
+    mobileAnchor: number;
+    resize: () => void;
+};

package/dist/hooks/useDropdownPosition.js

@@ -0,0 +1,33 @@
+"use client";
+import "../chunk-MMUBH76A.js";
+import { useEffect, useState } from "react";
+const useDropdownPosition = (inputRef) => {
+  const [dropdownMaxHeight, setDropdownMaxHeight] = useState();
+  const [dropdownWidth, setDropdownWidth] = useState();
+  const [mobileAnchor, setMobileAnchor] = useState();
+  const resize = () => {
+    var _a, _b, _c, _d;
+    if (typeof window !== "undefined") {
+      const newMaxHeight = Math.max(
+        window.innerHeight - ((_b = (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.getBoundingClientRect().bottom) != null ? _b : 0) - 20,
+        window.innerHeight * 0.25
+      );
+      setDropdownMaxHeight(newMaxHeight);
+      setDropdownWidth((_c = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _c.getBoundingClientRect().width);
+      setMobileAnchor((_d = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _d.getBoundingClientRect().height);
+    }
+  };
+  if (inputRef.current && !dropdownMaxHeight) {
+    resize();
+  }
+  useEffect(() => {
+    typeof window !== "undefined" && window.addEventListener("resize", resize);
+    return () => {
+      typeof window !== "undefined" && window.removeEventListener("resize", resize);
+    };
+  }, []);
+  return { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize };
+};
+export {
+  useDropdownPosition
+};

package/dist/hooks/useUserAgent.js

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

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/utils/formatBiometricHints.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   __spreadValues
-} from "../chunk-GOCCUU3Z.js";
+} from "../chunk-MMUBH76A.js";
 import { UAParser } from "ua-parser-js";
 import { aaguidMetadata } from "../constants/aaguiMetadata.js";
 const formatStringToUUID = (str) => {

package/dist/utils/getBrowserName.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import "../chunk-MMUBH76A.js";
 import { UAParser } from "ua-parser-js";
 const getBrowserName = () => new UAParser().getBrowser().name;
 export {

package/dist/utils/getDeviceLogo.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import "../chunk-MMUBH76A.js";
 const getDeviceLogo = (vendor, isMobile) => {
   switch (vendor == null ? void 0 : vendor.toLowerCase()) {
     case "apple": {

package/dist/utils/getDeviceModelName.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import "../chunk-MMUBH76A.js";
 const getDeviceModelName = (model) => {
   if (!model) {
     return void 0;

package/dist/utils/getExternalWalletDisplayName.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import "../chunk-MMUBH76A.js";
 import { truncateAddress } from "@getpara/web-sdk";
 const getExternalWalletDisplayName = ({ address, type, providerId, addressBech32 }, { withAddress = false } = {}) => {
   const walletType = type;

package/dist/utils/getExternalWalletIcon.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import "../chunk-MMUBH76A.js";
 import { ACCOUNT_TYPES } from "../constants/oAuthLogos.js";
 function getExternalWalletIcon(internalId, { branded = false } = {}) {
   var _a;

package/dist/utils/index.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   __spreadValues
-} from "../chunk-GOCCUU3Z.js";
+} from "../chunk-MMUBH76A.js";
 import { getOnRampNetworks, getOnRampAssets, toAssetInfoArray } from "@getpara/core-sdk";
 function getCurrencyCode({ assetInfo }, { network, asset, provider }) {
   var _a, _b, _c;

package/dist/utils/safeStyled.js

@@ -1,5 +1,5 @@
 "use client";
-import "../chunk-GOCCUU3Z.js";
+import "../chunk-MMUBH76A.js";
 import styled from "styled-components";
 const createStubComponent = () => {
   const StubComponent = () => null;

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@getpara/react-common",
-  "version": "2.0.0-alpha.64",
+  "version": "2.0.0-alpha.66",
   "dependencies": {
-    "@getpara/react-components": "2.0.0-alpha.64",
-    "@getpara/web-sdk": "2.0.0-alpha.64",
+    "@getpara/react-components": "2.0.0-alpha.66",
+    "@getpara/web-sdk": "2.0.0-alpha.66",
     "@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": "c55ecfbbd200053ddb78d88c93c597c0f781a6bb"
+  "gitHead": "07c8b7b68aa36dec6071e3b3b3a66de2870312c8"
 }