@getpara/react-common 2.0.0-alpha.7 → 2.0.0-alpha.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/README.md +13 -0
  2. package/dist/{chunk-GOCCUU3Z.js → chunk-MMUBH76A.js} +17 -0
  3. package/dist/classes/ParaInternal.d.ts +26 -7
  4. package/dist/classes/ParaInternal.js +22 -2
  5. package/dist/components/HeroSpinner.d.ts +4 -3
  6. package/dist/components/HeroSpinner.js +29 -15
  7. package/dist/components/KnownDevices.js +6 -7
  8. package/dist/components/MoonPayEmbed.d.ts +4 -2
  9. package/dist/components/MoonPayEmbed.js +57 -84
  10. package/dist/components/NetworkSpeedBanner.js +6 -6
  11. package/dist/components/QRCode.js +8 -8
  12. package/dist/components/RampEmbed.d.ts +2 -2
  13. package/dist/components/RampEmbed.js +17 -29
  14. package/dist/components/UserIdentifier.d.ts +8 -0
  15. package/dist/components/UserIdentifier.js +30 -22
  16. package/dist/components/WalletSelect.d.ts +33 -0
  17. package/dist/components/WalletSelect.js +171 -0
  18. package/dist/components/WalletTypeIcon.d.ts +9 -0
  19. package/dist/components/WalletTypeIcon.js +45 -0
  20. package/dist/components/WarningBanner.d.ts +7 -0
  21. package/dist/components/WarningBanner.js +60 -0
  22. package/dist/components/common.d.ts +3 -3
  23. package/dist/components/common.js +8 -8
  24. package/dist/components/index.d.ts +3 -1
  25. package/dist/components/index.js +3 -1
  26. package/dist/constants/aaguiMetadata.js +1 -1
  27. package/dist/constants/externalWalletDefaults.d.ts +50 -0
  28. package/dist/constants/externalWalletDefaults.js +52 -0
  29. package/dist/constants/index.d.ts +37 -0
  30. package/dist/constants/index.js +152 -0
  31. package/dist/constants/oAuthLogos.d.ts +12 -0
  32. package/dist/constants/oAuthLogos.js +160 -0
  33. package/dist/hooks/index.d.ts +2 -0
  34. package/dist/hooks/index.js +2 -0
  35. package/dist/hooks/useCopyToClipboard.js +1 -1
  36. package/dist/hooks/useDropdownPosition.d.ts +7 -0
  37. package/dist/hooks/useDropdownPosition.js +33 -0
  38. package/dist/hooks/useUserAgent.d.ts +2 -0
  39. package/dist/hooks/useUserAgent.js +10 -0
  40. package/dist/index.d.ts +1 -0
  41. package/dist/index.js +1 -0
  42. package/dist/types/commonTypes.d.ts +15 -0
  43. package/dist/types/commonTypes.js +1 -0
  44. package/dist/types/externalWalletCommon.d.ts +75 -37
  45. package/dist/types/externalWalletCommon.js +0 -31
  46. package/dist/types/index.d.ts +8 -5
  47. package/dist/types/index.js +1 -0
  48. package/dist/utils/formatBiometricHints.d.ts +1 -1
  49. package/dist/utils/formatBiometricHints.js +3 -3
  50. package/dist/utils/getBrowserName.js +1 -1
  51. package/dist/utils/getDeviceLogo.js +1 -1
  52. package/dist/utils/getDeviceModelName.js +1 -1
  53. package/dist/utils/getExternalWalletDisplayName.d.ts +3 -1
  54. package/dist/utils/getExternalWalletDisplayName.js +7 -15
  55. package/dist/utils/getExternalWalletIcon.d.ts +5 -0
  56. package/dist/utils/getExternalWalletIcon.js +17 -0
  57. package/dist/utils/index.d.ts +18 -16
  58. package/dist/utils/index.js +27 -31
  59. package/dist/utils/openMobileUrl.d.ts +1 -0
  60. package/dist/utils/openMobileUrl.js +34 -0
  61. package/dist/utils/safeStyled.d.ts +2 -0
  62. package/dist/utils/safeStyled.js +25 -0
  63. package/package.json +22 -24
  64. package/dist/components/StripeEmbed.d.ts +0 -4
  65. package/dist/components/StripeEmbed.js +0 -138
  66. package/dist/utils/offRampSend.d.ts +0 -7
  67. package/dist/utils/offRampSend.js +0 -75
@@ -0,0 +1,50 @@
1
+ import { ExternalWalletInfo } from '@getpara/web-sdk';
2
+ export declare const defaultCosmosExternalWallet: {
3
+ wallets: any[];
4
+ chains: any[];
5
+ chainId: any;
6
+ disconnect: () => Promise<void>;
7
+ disconnectStatus: string;
8
+ switchChain: () => Promise<void>;
9
+ connectParaEmbedded: () => Promise<{}>;
10
+ signMessage: () => Promise<{}>;
11
+ signVerificationMessage: () => Promise<{}>;
12
+ requestInfo: () => Promise<any>;
13
+ disconnectBase: () => Promise<void>;
14
+ useAccount: () => any;
15
+ };
16
+ export declare const defaultEvmExternalWallet: {
17
+ wallets: any[];
18
+ chains: any[];
19
+ chainId: any;
20
+ username: any;
21
+ avatar: any;
22
+ balance: any;
23
+ disconnect: () => Promise<void>;
24
+ disconnectStatus: string;
25
+ switchChain: () => Promise<void>;
26
+ connectParaEmbedded: () => Promise<{}>;
27
+ signMessage: () => Promise<{}>;
28
+ signVerificationMessage: () => Promise<{}>;
29
+ getWalletBalance: () => Promise<any>;
30
+ requestInfo: () => Promise<ExternalWalletInfo>;
31
+ disconnectBase: () => Promise<void>;
32
+ useAccount: () => any;
33
+ farcasterStatus: {
34
+ isPresent: false;
35
+ };
36
+ verificationStage: any;
37
+ };
38
+ export declare const defaultSolanaExternalWallet: {
39
+ wallets: any[];
40
+ disconnect: () => Promise<void>;
41
+ disconnectStatus: string;
42
+ signMessage: () => Promise<{}>;
43
+ signVerificationMessage: () => Promise<{}>;
44
+ requestInfo: () => Promise<ExternalWalletInfo>;
45
+ disconnectBase: () => Promise<void>;
46
+ useWallet: () => any;
47
+ farcasterStatus: {
48
+ isPresent: false;
49
+ };
50
+ };
@@ -0,0 +1,52 @@
1
+ "use client";
2
+ import "../chunk-MMUBH76A.js";
3
+ const defaultCosmosExternalWallet = {
4
+ wallets: [],
5
+ chains: [],
6
+ chainId: void 0,
7
+ disconnect: () => Promise.resolve(),
8
+ disconnectStatus: "idle",
9
+ switchChain: () => Promise.resolve(),
10
+ connectParaEmbedded: () => Promise.resolve({}),
11
+ signMessage: () => Promise.resolve({}),
12
+ signVerificationMessage: () => Promise.resolve({}),
13
+ requestInfo: () => Promise.resolve({}),
14
+ disconnectBase: () => Promise.resolve(),
15
+ useAccount: () => void 0
16
+ };
17
+ const defaultEvmExternalWallet = {
18
+ wallets: [],
19
+ chains: [],
20
+ chainId: void 0,
21
+ username: void 0,
22
+ avatar: void 0,
23
+ balance: void 0,
24
+ disconnect: () => Promise.resolve(),
25
+ disconnectStatus: "idle",
26
+ switchChain: () => Promise.resolve(),
27
+ connectParaEmbedded: () => Promise.resolve({}),
28
+ signMessage: () => Promise.resolve({}),
29
+ signVerificationMessage: () => Promise.resolve({}),
30
+ getWalletBalance: () => Promise.resolve(void 0),
31
+ requestInfo: () => Promise.resolve({}),
32
+ disconnectBase: () => Promise.resolve(),
33
+ useAccount: () => void 0,
34
+ farcasterStatus: { isPresent: false },
35
+ verificationStage: void 0
36
+ };
37
+ const defaultSolanaExternalWallet = {
38
+ wallets: [],
39
+ disconnect: () => Promise.resolve(),
40
+ disconnectStatus: "idle",
41
+ signMessage: () => Promise.resolve({}),
42
+ signVerificationMessage: () => Promise.resolve({}),
43
+ requestInfo: () => Promise.resolve({}),
44
+ disconnectBase: () => Promise.resolve(),
45
+ useWallet: () => void 0,
46
+ farcasterStatus: { isPresent: false }
47
+ };
48
+ export {
49
+ defaultCosmosExternalWallet,
50
+ defaultEvmExternalWallet,
51
+ defaultSolanaExternalWallet
52
+ };
@@ -0,0 +1,37 @@
1
+ import { TNetwork, TOnRampAsset, OnRampMethod, OnRampProvider, TWalletType } from '@getpara/core-sdk';
2
+ import { IconType } from '@getpara/react-components';
3
+ import { Transition, Variants } from 'framer-motion';
4
+ import { DisplayMetadata } from '../types/commonTypes.js';
5
+ export declare const PARA_CONNECT = "https://connect.getpara.com/";
6
+ export declare const PARA_TERMS_AND_CONDITIONS = "https://getpara.com/terms";
7
+ export type OnRampProviderConfig = DisplayMetadata & {
8
+ feeLower: number;
9
+ feeUpper?: number;
10
+ methods: OnRampMethod[];
11
+ backgroundColors: string[];
12
+ };
13
+ export declare const ON_RAMP_PROVIDERS: Record<OnRampProvider, OnRampProviderConfig>;
14
+ type Networks = Record<TNetwork, DisplayMetadata>;
15
+ export declare const WALLET_TYPES_METADATA: Record<TWalletType, DisplayMetadata>;
16
+ export declare const NETWORKS: Networks;
17
+ export declare const ON_RAMP_ASSETS: Record<TOnRampAsset, {
18
+ name: string;
19
+ code: string;
20
+ icon: IconType;
21
+ isCircular?: boolean;
22
+ isDark?: boolean;
23
+ }>;
24
+ export declare function getNetworkName(str: TNetwork | string): string;
25
+ export declare function getNetworkIcon(str: TNetwork | string): IconType;
26
+ export declare function getAssetCode(str: TOnRampAsset | string): string;
27
+ export declare function getAssetName(str: TOnRampAsset | string): string;
28
+ 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" | "zap" | "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";
29
+ export declare const MOBILE_SIZE = 480;
30
+ export declare const NETWORK_NOT_SUPPORTED_ERROR = "network not supported";
31
+ export declare const EMAIL_REGEX: RegExp;
32
+ export declare const BODY_MOTION_VARIANTS: Variants;
33
+ export declare const BODY_TRANSITION: Transition;
34
+ export declare const SDK_VERSION: string;
35
+ export * from './aaguiMetadata.js';
36
+ export * from './externalWalletDefaults.js';
37
+ export * from './oAuthLogos.js';
@@ -0,0 +1,152 @@
1
+ "use client";
2
+ import {
3
+ __spreadProps,
4
+ __spreadValues
5
+ } from "../chunk-MMUBH76A.js";
6
+ var _a;
7
+ import { OnRampMethod, OnRampProvider } from "@getpara/core-sdk";
8
+ const PARA_CONNECT = "https://connect.getpara.com/";
9
+ const PARA_TERMS_AND_CONDITIONS = "https://getpara.com/terms";
10
+ const ON_RAMP_PROVIDERS = {
11
+ [OnRampProvider.STRIPE]: {
12
+ name: "Stripe",
13
+ feeLower: 0.99,
14
+ feeUpper: 4.49,
15
+ methods: [OnRampMethod.ACH, OnRampMethod.DEBIT, OnRampMethod.CREDIT],
16
+ icon: "stripeBrand",
17
+ backgroundColors: ["#6772E5", "#808AF4"]
18
+ },
19
+ [OnRampProvider.RAMP]: {
20
+ name: "Ramp",
21
+ feeLower: 0.99,
22
+ feeUpper: 4.49,
23
+ methods: [OnRampMethod.ACH, OnRampMethod.DEBIT, OnRampMethod.CREDIT],
24
+ icon: "rampNetworkBrand",
25
+ backgroundColors: ["#21BF73", "#3AE492"]
26
+ },
27
+ [OnRampProvider.MOONPAY]: {
28
+ name: "MoonPay",
29
+ feeLower: 1,
30
+ feeUpper: 4.5,
31
+ methods: [OnRampMethod.ACH, OnRampMethod.DEBIT, OnRampMethod.CREDIT],
32
+ icon: "moonpayBrand",
33
+ backgroundColors: ["#7715F5", "#9647fd"]
34
+ }
35
+ };
36
+ const ICON_TYPES = {
37
+ ethereum: { isDark: true },
38
+ usdcBrand: { isCircular: true },
39
+ arbitrumBrand: { isCircular: true },
40
+ baseBrand: { isCircular: true },
41
+ optimismBrand: { isCircular: true },
42
+ cosmos: { isCircular: true, isDark: true },
43
+ celoBrand: { isCircular: true },
44
+ tetherBrand: { isCircular: true }
45
+ };
46
+ const WALLET_TYPES_METADATA = {
47
+ EVM: { name: "EVM", icon: "ethCircle", isCircular: true },
48
+ SOLANA: { name: "Solana", icon: "solana" },
49
+ COSMOS: { name: "Cosmos", icon: "cosmos", isCircular: true, isDark: true }
50
+ };
51
+ const NETWORKS = Object.entries({
52
+ ["ETHEREUM"]: { name: "Ethereum", icon: "ethereum" },
53
+ ["SEPOLIA"]: { name: "Sepolia", icon: "ethereum" },
54
+ ["ARBITRUM"]: { name: "Arbitrum", icon: "arbitrumBrand" },
55
+ ["BASE"]: { name: "Base", icon: "baseBrand" },
56
+ ["OPTIMISM"]: { name: "Optimism", icon: "optimismBrand" },
57
+ ["POLYGON"]: { name: "Polygon", icon: "polygonBrand" },
58
+ ["SOLANA"]: { name: "Solana", icon: "solana" },
59
+ ["COSMOS"]: { name: "Cosmos", icon: "cosmos" },
60
+ ["CELO"]: { name: "Celo", icon: "celoBrand" },
61
+ ["SOLANA_DEVNET"]: { name: "Solana Devnet", icon: "solana" },
62
+ ["NOBLE"]: { name: "Noble", icon: "nobleBrand" },
63
+ ["BERACHAIN"]: { name: "Berachain", icon: "beraBrand" }
64
+ }).reduce((acc, [key, entry]) => {
65
+ return __spreadProps(__spreadValues({}, acc), {
66
+ [key]: __spreadValues(__spreadValues({}, entry), ICON_TYPES[entry.icon])
67
+ });
68
+ }, {});
69
+ const ON_RAMP_ASSETS = Object.entries({
70
+ ["ETHEREUM"]: { name: "Ethereum", code: "ETH", icon: "ethereum" },
71
+ ["USDC"]: { name: "USD Coin", code: "USDC", icon: "usdcBrand" },
72
+ ["POLYGON"]: { name: "Polygon", code: "POL", icon: "polygonBrand" },
73
+ ["SOLANA"]: { name: "Solana", code: "SOL", icon: "solana" },
74
+ ["ATOM"]: { name: "Atom", code: "ATOM", icon: "cosmos" },
75
+ ["CELO"]: { name: "Celo", code: "CELO", icon: "celoBrand" },
76
+ ["TETHER"]: { name: "Tether", code: "USDT", icon: "tetherBrand" },
77
+ ["CUSD"]: { name: "Celo Dollar", code: "CUSD", icon: "celoBrand" },
78
+ ["CEUR"]: { name: "Celo Euro", code: "CEUR", icon: "celoBrand" },
79
+ ["CREAL"]: { name: "Celo Real", code: "CREAL", icon: "celoBrand" },
80
+ ["BERA"]: { name: "Berachain", code: "BERA", icon: "beraBrand" }
81
+ }).reduce((acc, [key, entry]) => {
82
+ return __spreadProps(__spreadValues({}, acc), {
83
+ [key]: __spreadValues(__spreadValues({}, entry), ICON_TYPES[entry.icon])
84
+ });
85
+ }, {});
86
+ function getNetworkName(str) {
87
+ var _a2, _b;
88
+ return (_b = (_a2 = NETWORKS[str]) == null ? void 0 : _a2.name) != null ? _b : `${str[0]}${str.slice(1).toLowerCase()}`;
89
+ }
90
+ function getNetworkIcon(str) {
91
+ var _a2, _b;
92
+ return (_b = (_a2 = NETWORKS[str]) == null ? void 0 : _a2.icon) != null ? _b : "globe";
93
+ }
94
+ function getAssetCode(str) {
95
+ var _a2, _b;
96
+ return (_b = (_a2 = ON_RAMP_ASSETS[str]) == null ? void 0 : _a2.code) != null ? _b : str;
97
+ }
98
+ function getAssetName(str) {
99
+ var _a2, _b;
100
+ return (_b = (_a2 = ON_RAMP_ASSETS[str]) == null ? void 0 : _a2.name) != null ? _b : str;
101
+ }
102
+ function getAssetIcon(str) {
103
+ var _a2, _b;
104
+ return (_b = (_a2 = ON_RAMP_ASSETS[str]) == null ? void 0 : _a2.icon) != null ? _b : "emptyCircle";
105
+ }
106
+ const MOBILE_SIZE = 480;
107
+ const NETWORK_NOT_SUPPORTED_ERROR = "network not supported";
108
+ 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,}))$/;
109
+ const BODY_MOTION_VARIANTS = {
110
+ enter: (direction) => {
111
+ return {
112
+ scale: direction > 0 ? 0.9 : 1.1,
113
+ opacity: 0
114
+ };
115
+ },
116
+ center: {
117
+ scale: 1,
118
+ opacity: 1
119
+ },
120
+ exit: (direction) => {
121
+ return {
122
+ scale: direction < 0 ? 0.9 : 1.1,
123
+ opacity: 0
124
+ };
125
+ }
126
+ };
127
+ const BODY_TRANSITION = {
128
+ duration: 0.2
129
+ };
130
+ const SDK_VERSION = (_a = process.env.PARA_REACT_SDK_VERSION) != null ? _a : "";
131
+ export * from "./aaguiMetadata.js";
132
+ export * from "./externalWalletDefaults.js";
133
+ export * from "./oAuthLogos.js";
134
+ export {
135
+ BODY_MOTION_VARIANTS,
136
+ BODY_TRANSITION,
137
+ EMAIL_REGEX,
138
+ MOBILE_SIZE,
139
+ NETWORKS,
140
+ NETWORK_NOT_SUPPORTED_ERROR,
141
+ ON_RAMP_ASSETS,
142
+ ON_RAMP_PROVIDERS,
143
+ PARA_CONNECT,
144
+ PARA_TERMS_AND_CONDITIONS,
145
+ SDK_VERSION,
146
+ WALLET_TYPES_METADATA,
147
+ getAssetCode,
148
+ getAssetIcon,
149
+ getAssetName,
150
+ getNetworkIcon,
151
+ getNetworkName
152
+ };
@@ -0,0 +1,12 @@
1
+ import { IconType } from '@getpara/react-components';
2
+ import { TLinkedAccountType } from '@getpara/web-sdk';
3
+ import { DisplayMetadata } from '../types/commonTypes.js';
4
+ export declare const ACCOUNT_TYPES: {
5
+ [key in TLinkedAccountType | string]: DisplayMetadata & {
6
+ isExternalWallet?: boolean;
7
+ };
8
+ };
9
+ export declare function getAccountTypeName(type: TLinkedAccountType | string | undefined, { inline }?: {
10
+ inline?: boolean;
11
+ }): string | undefined;
12
+ export declare function getAccountTypeLogo(type: TLinkedAccountType | undefined): IconType | undefined;
@@ -0,0 +1,160 @@
1
+ "use client";
2
+ import "../chunk-MMUBH76A.js";
3
+ const ACCOUNT_TYPES = {
4
+ "EMAIL": {
5
+ icon: "mail",
6
+ name: "Email",
7
+ inlineText: "email address",
8
+ isPlain: true
9
+ },
10
+ "PHONE": {
11
+ icon: "phone",
12
+ name: "Phone",
13
+ inlineText: "phone number",
14
+ isPlain: true
15
+ },
16
+ "EXTERNAL_WALLET": {
17
+ icon: "wallet",
18
+ name: "External Wallet",
19
+ inlineText: "external wallet",
20
+ isPlain: true
21
+ },
22
+ "GOOGLE": {
23
+ icon: "google",
24
+ iconBranded: "googleBrand",
25
+ name: "Google"
26
+ },
27
+ "TWITTER": {
28
+ icon: "twitter",
29
+ // Not using branded here to ensure the icon looks correct in dark mode
30
+ iconBranded: "twitter",
31
+ name: "X / Twitter",
32
+ inlineText: "X account",
33
+ isDark: true
34
+ },
35
+ "APPLE": {
36
+ icon: "apple",
37
+ // Not using branded here to ensure the icon looks correct in dark mode
38
+ iconBranded: "apple",
39
+ name: "Apple",
40
+ isDark: true
41
+ },
42
+ "DISCORD": {
43
+ icon: "discord",
44
+ iconBranded: "discordBrand",
45
+ name: "Discord"
46
+ },
47
+ "FACEBOOK": {
48
+ icon: "facebook",
49
+ iconBranded: "facebookBrand",
50
+ name: "Facebook"
51
+ },
52
+ "FARCASTER": {
53
+ icon: "farcaster",
54
+ iconBranded: "farcasterBrand",
55
+ name: "Farcaster"
56
+ },
57
+ "TELEGRAM": {
58
+ icon: "telegram",
59
+ iconBranded: "telegramBrand",
60
+ name: "Telegram"
61
+ },
62
+ "MetaMask": {
63
+ icon: "metamask",
64
+ name: "MetaMask",
65
+ isExternalWallet: true
66
+ },
67
+ "Rainbow": {
68
+ icon: "rainbow",
69
+ name: "Rainbow",
70
+ isExternalWallet: true
71
+ },
72
+ "Coinbase Wallet": {
73
+ icon: "coinbase",
74
+ name: "Coinbase Wallet",
75
+ isExternalWallet: true
76
+ },
77
+ "WalletConnect": {
78
+ icon: "walletConnect",
79
+ name: "WalletConnect",
80
+ isExternalWallet: true
81
+ },
82
+ "Zerion": {
83
+ icon: "zerion",
84
+ name: "Zerion",
85
+ isExternalWallet: true
86
+ },
87
+ "Safe": {
88
+ icon: "safe",
89
+ name: "Safe",
90
+ isExternalWallet: true
91
+ },
92
+ "Rabby": {
93
+ icon: "rabby",
94
+ name: "Rabby",
95
+ isExternalWallet: true
96
+ },
97
+ "OKX Wallet": {
98
+ icon: "okx",
99
+ name: "OKX Wallet",
100
+ isExternalWallet: true
101
+ },
102
+ "Phantom": {
103
+ icon: "phantom",
104
+ name: "Phantom",
105
+ isExternalWallet: true
106
+ },
107
+ "Glow": {
108
+ icon: "glow",
109
+ name: "Glow",
110
+ isExternalWallet: true
111
+ },
112
+ "Backpack": {
113
+ icon: "backpack",
114
+ name: "Backpack",
115
+ isExternalWallet: true
116
+ },
117
+ "Keplr": {
118
+ icon: "keplr",
119
+ name: "Keplr",
120
+ isExternalWallet: true
121
+ },
122
+ "Leap": {
123
+ icon: "leap",
124
+ name: "Leap",
125
+ isExternalWallet: true
126
+ },
127
+ "HaHa": {
128
+ icon: "haha",
129
+ name: "HaHa",
130
+ isExternalWallet: true
131
+ },
132
+ "Cosmostation": {
133
+ icon: "cosmostation",
134
+ name: "Cosmostation",
135
+ isExternalWallet: true
136
+ },
137
+ "Solflare": {
138
+ icon: "solflare",
139
+ name: "Solflare",
140
+ isExternalWallet: true
141
+ },
142
+ "Valora": {
143
+ icon: "valora",
144
+ name: "Valora",
145
+ isExternalWallet: true
146
+ }
147
+ };
148
+ function getAccountTypeName(type, { inline = false } = {}) {
149
+ var _a;
150
+ const data = type ? ACCOUNT_TYPES[type] : void 0;
151
+ return data ? inline ? (_a = data.inlineText) != null ? _a : `${data.name} ${data.isExternalWallet ? "wallet" : "account"}` : data.name : void 0;
152
+ }
153
+ function getAccountTypeLogo(type) {
154
+ return type ? ACCOUNT_TYPES[type].iconBranded || ACCOUNT_TYPES[type].icon : void 0;
155
+ }
156
+ export {
157
+ ACCOUNT_TYPES,
158
+ getAccountTypeLogo,
159
+ getAccountTypeName
160
+ };
@@ -1 +1,3 @@
1
1
  export * from './useCopyToClipboard.js';
2
+ export * from './useDropdownPosition.js';
3
+ export * from './useUserAgent.js';
@@ -1,2 +1,4 @@
1
1
  "use client";
2
2
  export * from "./useCopyToClipboard.js";
3
+ export * from "./useDropdownPosition.js";
4
+ export * from "./useUserAgent.js";
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  __async
4
- } from "../chunk-GOCCUU3Z.js";
4
+ } from "../chunk-MMUBH76A.js";
5
5
  import { useCallback, useState } from "react";
6
6
  function useCopyToClipboard() {
7
7
  const [copied, setCopied] = useState(false);
@@ -0,0 +1,7 @@
1
+ import { MutableRefObject } from 'react';
2
+ export declare const useDropdownPosition: (inputRef: MutableRefObject<HTMLCpslInputElement | HTMLDivElement | null>) => {
3
+ dropdownMaxHeight: number;
4
+ dropdownWidth: number;
5
+ mobileAnchor: number;
6
+ resize: () => void;
7
+ };
@@ -0,0 +1,33 @@
1
+ "use client";
2
+ import "../chunk-MMUBH76A.js";
3
+ import { useEffect, useState } from "react";
4
+ const useDropdownPosition = (inputRef) => {
5
+ const [dropdownMaxHeight, setDropdownMaxHeight] = useState();
6
+ const [dropdownWidth, setDropdownWidth] = useState();
7
+ const [mobileAnchor, setMobileAnchor] = useState();
8
+ const resize = () => {
9
+ var _a, _b, _c, _d;
10
+ if (typeof window !== "undefined") {
11
+ const newMaxHeight = Math.max(
12
+ window.innerHeight - ((_b = (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.getBoundingClientRect().bottom) != null ? _b : 0) - 20,
13
+ window.innerHeight * 0.25
14
+ );
15
+ setDropdownMaxHeight(newMaxHeight);
16
+ setDropdownWidth((_c = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _c.getBoundingClientRect().width);
17
+ setMobileAnchor((_d = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _d.getBoundingClientRect().height);
18
+ }
19
+ };
20
+ if (inputRef.current && !dropdownMaxHeight) {
21
+ resize();
22
+ }
23
+ useEffect(() => {
24
+ typeof window !== "undefined" && window.addEventListener("resize", resize);
25
+ return () => {
26
+ typeof window !== "undefined" && window.removeEventListener("resize", resize);
27
+ };
28
+ }, []);
29
+ return { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize };
30
+ };
31
+ export {
32
+ useDropdownPosition
33
+ };
@@ -0,0 +1,2 @@
1
+ import { IResult } from 'ua-parser-js';
2
+ export declare function useUserAgent(): IResult;
@@ -0,0 +1,10 @@
1
+ "use client";
2
+ import "../chunk-MMUBH76A.js";
3
+ import { UAParser } from "ua-parser-js";
4
+ function useUserAgent() {
5
+ const userAgent = typeof window !== "undefined" ? window.navigator.userAgent : void 0;
6
+ return UAParser(userAgent);
7
+ }
8
+ export {
9
+ useUserAgent
10
+ };
package/dist/index.d.ts CHANGED
@@ -3,3 +3,4 @@ export * from './components/index.js';
3
3
  export * from './utils/index.js';
4
4
  export * from './hooks/index.js';
5
5
  export * from './types/index.js';
6
+ export * from './constants/index.js';
package/dist/index.js CHANGED
@@ -4,3 +4,4 @@ export * from "./components/index.js";
4
4
  export * from "./utils/index.js";
5
5
  export * from "./hooks/index.js";
6
6
  export * from "./types/index.js";
7
+ export * from "./constants/index.js";
@@ -0,0 +1,15 @@
1
+ import { IconType } from '@getpara/react-components';
2
+ export type Tab<T> = {
3
+ label: string;
4
+ value: T;
5
+ icon: IconType;
6
+ };
7
+ export type DisplayMetadata = {
8
+ name: string;
9
+ inlineText?: string;
10
+ icon: IconType;
11
+ iconBranded?: IconType;
12
+ isDark?: boolean;
13
+ isCircular?: boolean;
14
+ isPlain?: boolean;
15
+ };
@@ -0,0 +1 @@
1
+ "use client";