@getpara/react-sdk 1.1.0 → 1.3.0

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 (146) hide show
  1. package/dist/MoonPayEmbed-GAWXP6V7.js +2 -0
  2. package/dist/MoonPayEmbed-GAWXP6V7.js.br +0 -0
  3. package/dist/MoonPayEmbed-GAWXP6V7.js.gz +0 -0
  4. package/dist/index.js +675 -5
  5. package/dist/index.js.br +0 -0
  6. package/dist/index.js.gz +0 -0
  7. package/dist/provider/hooks/utils/useEventListeners.d.ts +1 -1
  8. package/dist/provider/stores/useStore.d.ts +7 -2
  9. package/dist/provider/types/provider.d.ts +15 -3
  10. package/package.json +8 -7
  11. package/dist/modal/ParaModal.js +0 -281
  12. package/dist/modal/components/Account/Account.js +0 -60
  13. package/dist/modal/components/AddFunds/AddFunds.js +0 -147
  14. package/dist/modal/components/AddFunds/AddFundsAwaiting.js +0 -65
  15. package/dist/modal/components/AddFunds/AddFundsDone.js +0 -26
  16. package/dist/modal/components/AddFunds/MoonPayEmbed.js +0 -2
  17. package/dist/modal/components/AddFunds/index.js +0 -3
  18. package/dist/modal/components/AuthInput/AuthInput.js +0 -221
  19. package/dist/modal/components/AuthInput/countryCodes.js +0 -40
  20. package/dist/modal/components/AuthInput/hooks/useDropdownPosition.js +0 -23
  21. package/dist/modal/components/AuthInput/phoneMasks.js +0 -247
  22. package/dist/modal/components/AuthMainStep/AuthMainStep.js +0 -21
  23. package/dist/modal/components/AuthMainStep/AuthMainStepContent.js +0 -89
  24. package/dist/modal/components/AuthOptions/AuthOptions.js +0 -28
  25. package/dist/modal/components/AwaitingBiometricsStep/AwaitingBiometricsStep.js +0 -7
  26. package/dist/modal/components/AwaitingOAuthStep/AwaitingOAuthStep.js +0 -5
  27. package/dist/modal/components/AwaitingPasswordStep/AwaitingPasswordStep.js +0 -7
  28. package/dist/modal/components/AwaitingWalletCreationStep/AwaitingWalletCreationStep.js +0 -18
  29. package/dist/modal/components/BiometricCreationStep/BiometricCreationStep.js +0 -17
  30. package/dist/modal/components/BiometricLoginStep/BiometricLoginStep.js +0 -131
  31. package/dist/modal/components/Body/AnimatedHeightWrapper.js +0 -26
  32. package/dist/modal/components/Body/Body.js +0 -232
  33. package/dist/modal/components/ChainSwitch/ChainSwitch.js +0 -77
  34. package/dist/modal/components/ChainSwitch/config.js +0 -11
  35. package/dist/modal/components/Controls/Controls.js +0 -54
  36. package/dist/modal/components/Controls/Selects.js +0 -159
  37. package/dist/modal/components/ExternalWalletStep/ExternalWalletStep.js +0 -116
  38. package/dist/modal/components/ExternalWalletStep/config.js +0 -11
  39. package/dist/modal/components/ExternalWallets/ExternalWallets.js +0 -142
  40. package/dist/modal/components/ExternalWalletsWrapper/ExternalWalletsWrapper.js +0 -119
  41. package/dist/modal/components/Footer/Footer.js +0 -71
  42. package/dist/modal/components/Header/Header.js +0 -24
  43. package/dist/modal/components/Header/hooks/useStepTitle.js +0 -42
  44. package/dist/modal/components/Hero/Hero.js +0 -119
  45. package/dist/modal/components/IFrameStep/IFrameStep.js +0 -41
  46. package/dist/modal/components/LoginDoneStep/LoginDoneStep.js +0 -19
  47. package/dist/modal/components/ModalContent/ModalContent.js +0 -280
  48. package/dist/modal/components/OAuth/FarcasterOAuthStep.js +0 -82
  49. package/dist/modal/components/OAuth/OAuth.js +0 -125
  50. package/dist/modal/components/OAuth/TelegramOAuthStep.js +0 -133
  51. package/dist/modal/components/OnRampComponents/AddingFunds.js +0 -10
  52. package/dist/modal/components/OnRampComponents/OnRampProviderButton.js +0 -72
  53. package/dist/modal/components/RecoverySecretStep/RecoverySecretStep.js +0 -67
  54. package/dist/modal/components/Setup2FAStep/Setup2FAStep.js +0 -105
  55. package/dist/modal/components/StripeComponents/StripeComponents.js +0 -78
  56. package/dist/modal/components/TwoFactorDoneStep/TwoFactorDoneStep.js +0 -8
  57. package/dist/modal/components/VerificationCodeStep/VerificationCodeStep.js +0 -135
  58. package/dist/modal/components/Waiting/Waiting.js +0 -6
  59. package/dist/modal/components/WalletCard/PartnerIcon.js +0 -29
  60. package/dist/modal/components/WalletCard/WalletCard.js +0 -93
  61. package/dist/modal/components/WalletCreationDoneStep/WalletCreationDoneStep.js +0 -50
  62. package/dist/modal/components/common.js +0 -67
  63. package/dist/modal/components/index.js +0 -1
  64. package/dist/modal/constants/constants.js +0 -93
  65. package/dist/modal/constants/defaults.js +0 -5
  66. package/dist/modal/constants/oAuthLogos.js +0 -18
  67. package/dist/modal/hooks/useActiveWallet.js +0 -11
  68. package/dist/modal/hooks/useEmbeddedExternalConnection.js +0 -46
  69. package/dist/modal/hooks/useGoBack.js +0 -34
  70. package/dist/modal/index.js +0 -9
  71. package/dist/modal/providers/CosmosExternalWalletContextStub.js +0 -18
  72. package/dist/modal/providers/EvmExternalWalletContextStub.js +0 -22
  73. package/dist/modal/providers/ExternalWalletContext.js +0 -253
  74. package/dist/modal/providers/SolanaExternalWalletContextStub.js +0 -12
  75. package/dist/modal/stores/externalWalletProvider/actions.js +0 -5
  76. package/dist/modal/stores/externalWalletProvider/useExternalWalletProviderStore.js +0 -13
  77. package/dist/modal/stores/index.js +0 -3
  78. package/dist/modal/stores/modal/actions.js +0 -64
  79. package/dist/modal/stores/modal/useModalStore.js +0 -41
  80. package/dist/modal/stores/para/actions.js +0 -5
  81. package/dist/modal/stores/para/useParaStore.js +0 -3
  82. package/dist/modal/stores/theme/actions.js +0 -24
  83. package/dist/modal/stores/theme/useThemeStore.js +0 -14
  84. package/dist/modal/stores/userInfo/actions.js +0 -34
  85. package/dist/modal/stores/userInfo/useUserInfoStore.js +0 -9
  86. package/dist/modal/types/commonTypes.js +0 -1
  87. package/dist/modal/types/externalWallets.js +0 -21
  88. package/dist/modal/types/modalProps.js +0 -7
  89. package/dist/modal/utils/authLayoutHelpers.js +0 -2
  90. package/dist/modal/utils/getMailtoLink.js +0 -5
  91. package/dist/modal/utils/getTileButtonFlex.js +0 -15
  92. package/dist/modal/utils/isPasskeySupported.js +0 -10
  93. package/dist/modal/utils/openPopup.js +0 -55
  94. package/dist/modal/utils/routeMobileExternalWallet.js +0 -35
  95. package/dist/modal/utils/steps.js +0 -215
  96. package/dist/modal/utils/stringFormatters.js +0 -12
  97. package/dist/modal/utils/validateOnRampConfig.js +0 -26
  98. package/dist/provider/ParaProvider.js +0 -16
  99. package/dist/provider/actions/checkIfUserExists.js +0 -26
  100. package/dist/provider/actions/createUser.js +0 -30
  101. package/dist/provider/actions/getAccount.js +0 -24
  102. package/dist/provider/actions/getWallet.js +0 -16
  103. package/dist/provider/actions/initiateLogin.js +0 -23
  104. package/dist/provider/actions/keepSessionAlive.js +0 -23
  105. package/dist/provider/actions/logout.js +0 -20
  106. package/dist/provider/actions/signMessage.js +0 -23
  107. package/dist/provider/actions/signTransaction.js +0 -23
  108. package/dist/provider/actions/waitForAccountCreation.js +0 -24
  109. package/dist/provider/actions/waitForLoginAndSetup.js +0 -27
  110. package/dist/provider/actions/waitForPasskeyAndCreateWallet.js +0 -24
  111. package/dist/provider/hooks/index.js +0 -3
  112. package/dist/provider/hooks/mutations/index.js +0 -10
  113. package/dist/provider/hooks/mutations/useCheckIfUserExists.js +0 -23
  114. package/dist/provider/hooks/mutations/useCreateUser.js +0 -23
  115. package/dist/provider/hooks/mutations/useInitiateLogin.js +0 -23
  116. package/dist/provider/hooks/mutations/useKeepSessionAlive.js +0 -23
  117. package/dist/provider/hooks/mutations/useLogout.js +0 -33
  118. package/dist/provider/hooks/mutations/useSignMessage.js +0 -33
  119. package/dist/provider/hooks/mutations/useSignTransaction.js +0 -33
  120. package/dist/provider/hooks/mutations/useWaitForAccountCreation.js +0 -30
  121. package/dist/provider/hooks/mutations/useWaitForLoginAndSetup.js +0 -30
  122. package/dist/provider/hooks/mutations/useWaitForPasskeyAndCreateWallet.js +0 -30
  123. package/dist/provider/hooks/queries/index.js +0 -2
  124. package/dist/provider/hooks/queries/useAccount.js +0 -23
  125. package/dist/provider/hooks/queries/useWallet.js +0 -24
  126. package/dist/provider/hooks/utils/index.js +0 -3
  127. package/dist/provider/hooks/utils/useAutoSessionKeepAlive.js +0 -79
  128. package/dist/provider/hooks/utils/useClient.js +0 -8
  129. package/dist/provider/hooks/utils/useEventListeners.js +0 -87
  130. package/dist/provider/hooks/utils/useInternalClient.js +0 -9
  131. package/dist/provider/hooks/utils/useModal.js +0 -15
  132. package/dist/provider/hooks/utils/useWalletState.js +0 -33
  133. package/dist/provider/index.js +0 -3
  134. package/dist/provider/stores/getters.js +0 -5
  135. package/dist/provider/stores/slices/client.js +0 -4
  136. package/dist/provider/stores/slices/index.js +0 -3
  137. package/dist/provider/stores/slices/modal.js +0 -4
  138. package/dist/provider/stores/slices/wallet.js +0 -6
  139. package/dist/provider/stores/types.js +0 -1
  140. package/dist/provider/stores/useStore.js +0 -12
  141. package/dist/provider/types/provider.js +0 -1
  142. package/dist/provider/types/query.js +0 -1
  143. package/dist/provider/types/utils.js +0 -1
  144. package/dist/provider/utils/renameMutations.js +0 -19
  145. /package/dist/{modal/css → css}/modal.css +0 -0
  146. /package/dist/{modal/public → public}/Inter-VariableFont_slnt,wght.ttf +0 -0
@@ -1,65 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { StepContainer } from '../common.js';
3
- import { OnRampProvider } from '@getpara/web-sdk';
4
- import { useModalStore, useThemeStore } from '../../stores/index.js';
5
- import { lazy, useEffect, useMemo, useState } from 'react';
6
- import { ModalStep } from '../../utils/steps.js';
7
- import { RampEmbed, StripeEmbed } from '@getpara/react-common';
8
- import styled from 'styled-components';
9
- import { useGoBack } from '../../hooks/useGoBack.js';
10
- import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
11
- const STEPS = {
12
- CANCELLED: ModalStep.ADD_FUNDS_FAILURE,
13
- FINISHED: ModalStep.ADD_FUNDS_SUCCESS,
14
- };
15
- export const AddFundsAwaiting = () => {
16
- const setStep = useModalStore(state => state.setStep);
17
- const goBack = useGoBack();
18
- const onRampConfig = useModalStore(state => state.onRampConfig);
19
- const onRampPurchase = useModalStore(state => state.onRampPurchase);
20
- const setOnRampPurchase = useModalStore(state => state.setOnRampPurchase);
21
- const para = useInternalClient();
22
- const appName = useThemeStore(state => state.appName);
23
- const isDark = useThemeStore(state => state.isDark);
24
- const [MoonPayEmbed, setMoonPayEmbed] = useState(null);
25
- const props = {
26
- para,
27
- appName,
28
- onRampConfig,
29
- onRampPurchase: onRampPurchase,
30
- isDark,
31
- isEmbedded: true,
32
- setOnRampPurchase,
33
- onClose: goBack,
34
- };
35
- useEffect(() => {
36
- const _MoonPayEmbed = lazy(() => import(`./MoonPayEmbed.js`));
37
- setMoonPayEmbed(_MoonPayEmbed);
38
- }, []);
39
- const onRampEmbed = useMemo(() => {
40
- if (!onRampPurchase.id) {
41
- return null;
42
- }
43
- switch (onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.provider) {
44
- case OnRampProvider.STRIPE:
45
- return _jsx(StripeEmbed, Object.assign({}, props));
46
- case OnRampProvider.MOONPAY:
47
- return !MoonPayEmbed || typeof window === 'undefined' ? null : _jsx(MoonPayEmbed, Object.assign({}, props));
48
- case OnRampProvider.RAMP:
49
- return _jsx(RampEmbed, Object.assign({ apiKey: onRampConfig.rampApiKey }, props));
50
- }
51
- }, [onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.provider, MoonPayEmbed]);
52
- useEffect(() => {
53
- let timeoutId;
54
- if ((onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.status) && ['CANCELLED', 'FINISHED'].includes(onRampPurchase.status)) {
55
- timeoutId = setTimeout(() => {
56
- setStep(STEPS[onRampPurchase.status]);
57
- }, 5000);
58
- }
59
- return () => clearTimeout(timeoutId);
60
- }, [onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.status]);
61
- return _jsx(Container, { "$wide": true, children: onRampEmbed });
62
- };
63
- const Container = styled(StepContainer) `
64
- flex: 1;
65
- `;
@@ -1,26 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Heading, HeroIcon, InnerStepContainer, StepContainer } from '../common.js';
3
- import { useModalStore, useThemeStore } from '../../stores/index.js';
4
- import { useMemo } from 'react';
5
- import { CpslButton, CpslText } from '@getpara/react-components';
6
- import { getAddFundsStep } from '../../utils/steps.js';
7
- export const AddFundsDone = ({ isSuccess, onClose }) => {
8
- const hideWallets = useThemeStore(state => state.hideWallets);
9
- const setStep = useModalStore(state => state.setStep);
10
- const onRampPurchase = useModalStore(state => state.onRampPurchase);
11
- const accountAddFundTab = useModalStore(state => state.accountAddFundTab);
12
- const formatter = useMemo(() => {
13
- return new Intl.NumberFormat('en-US', {
14
- style: 'currency',
15
- currency: (onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.fiat) || 'USD',
16
- });
17
- }, [onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.fiat]);
18
- const heading = isSuccess ? 'Transaction Successful' : 'Something Went Wrong';
19
- const text = isSuccess
20
- ? `${formatter.format(parseFloat(onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.fiatQuantity))} is now available in your ${hideWallets ? 'account' : 'wallet'}.`
21
- : `No funds were added to your ${hideWallets ? 'account' : 'wallet'}.`;
22
- const buttonText = isSuccess ? 'Done' : 'Try Again';
23
- return (_jsxs(StepContainer, { children: [_jsx(HeroIcon, { icon: "checkCircleFilled" }), _jsxs(InnerStepContainer, { children: [_jsx(Heading, { variant: "headingS", weight: "bold", children: heading }), _jsx(CpslText, { variant: "bodyS", color: "secondary", children: text })] }), _jsx(CpslButton, { fullWidth: true, onClick: () => {
24
- isSuccess ? onClose() : setStep(getAddFundsStep(accountAddFundTab));
25
- }, children: buttonText })] }));
26
- };
@@ -1,2 +0,0 @@
1
- import { MoonPayEmbed } from '@getpara/react-common';
2
- export default MoonPayEmbed;
@@ -1,3 +0,0 @@
1
- export * from './AddFunds.js';
2
- export * from './AddFundsAwaiting.js';
3
- export * from './AddFundsDone.js';
@@ -1,221 +0,0 @@
1
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
- return new (P || (P = Promise))(function (resolve, reject) {
4
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
- step((generator = generator.apply(thisArg, _arguments || [])).next());
8
- });
9
- };
10
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
11
- import { CpslButton, CpslIcon, CpslInput, CpslSelect, CpslSelectItem, CpslSpinner, CpslText, } from '@getpara/react-components';
12
- import { useRef, useState } from 'react';
13
- import styled from 'styled-components';
14
- import countryCodes from './countryCodes.js';
15
- import { useModalStore, useUserInfoStore } from '../../stores/index.js';
16
- import { EMAIL_REGEX, MOBILE_SIZE } from '../../constants/constants.js';
17
- import { useDropdownPosition } from './hooks/useDropdownPosition.js';
18
- import { ModalStep } from '../../utils/steps.js';
19
- import { defaultPhoneMask, phoneMasks } from './phoneMasks.js';
20
- import { AuthMethod } from '@getpara/web-sdk';
21
- import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
22
- const DEFAULT_COUNTRY = { label: 'United States', value: '+1', selectedLabel: 'US', icon: 'US' };
23
- export const AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
24
- var _a;
25
- const inputRef = useRef(null);
26
- const { dropdownMaxHeight, dropdownWidth } = useDropdownPosition(inputRef);
27
- const para = useInternalClient();
28
- const setAuthInfo = useUserInfoStore(state => state.setAuthInfo);
29
- const authInfo = useUserInfoStore(state => state.getAuthInfo());
30
- const setFlow = useModalStore(state => state.setFlow);
31
- const setStep = useModalStore(state => state.setStep);
32
- const setSupportedAuthMethods = useModalStore(state => state.setSupportedAuthMethods);
33
- const setBiometricLocationHints = useModalStore(state => state.setBiometricLocationHints);
34
- const [countryCode, setCountryCode] = useState(((authInfo === null || authInfo === void 0 ? void 0 : authInfo.authType) === 'phone' ? authInfo.auth.countryCode : '+1'));
35
- const [identifier, setIdentifier] = useState((() => {
36
- if (!authInfo || ['telegramUserId', 'farcasterUsername'].includes(authInfo.authType)) {
37
- return '';
38
- }
39
- if (authInfo.authType !== 'phone') {
40
- return authInfo.identifier;
41
- }
42
- return authInfo.auth.phone;
43
- })());
44
- const [identifierType, setIdentifierType] = useState(authInfo && (authInfo.authType === 'email' || authInfo.authType === 'phone') ? authInfo.authType : undefined);
45
- const [matchedCountryCode, setMatchedCountryCode] = useState(DEFAULT_COUNTRY);
46
- const [isLoggingIn, setIsLoggingIn] = useState(false);
47
- const [error, setError] = useState('');
48
- const [search, setSearch] = useState('');
49
- const isEmail = identifierType === 'email';
50
- const isPhone = identifierType === 'phone';
51
- const isUnknown = !identifierType;
52
- const filteredCountryCodes = search
53
- ? countryCodes.filter(cc => cc.selectedLabel.toLowerCase().includes(search.toLowerCase()) ||
54
- cc.label.toLowerCase().includes(search.toLowerCase()) ||
55
- cc.value.toLowerCase().includes(search.toLowerCase()))
56
- : countryCodes;
57
- const handleSearchInput = (ev) => {
58
- setSearch(ev.detail);
59
- };
60
- const handleIdentifierInput = (ev) => {
61
- const newIdentifier = ev.detail.value;
62
- let isNewPhone = false, isNewEmail = false;
63
- if (!disablePhoneLogin) {
64
- const countryCodeInputMatch = countryCodes.find(cc => cc.value === newIdentifier);
65
- if (countryCodeInputMatch) {
66
- setCountryCode(countryCodeInputMatch.value);
67
- setMatchedCountryCode(countryCodeInputMatch);
68
- setIdentifierType('phone');
69
- setIdentifier('');
70
- return;
71
- }
72
- isNewPhone = !isEmail && isPhone ? /\d+$/.test(newIdentifier) : /\d\d\d+$/.test(newIdentifier);
73
- }
74
- if (!disableEmailLogin) {
75
- isNewEmail = /\D.*$/.test(newIdentifier);
76
- }
77
- setIdentifierType(isNewEmail ? 'email' : isNewPhone ? 'phone' : undefined);
78
- setIdentifier(newIdentifier);
79
- };
80
- const handleCountryCodeInput = (ev) => {
81
- const matchedCountryCode = countryCodes.find(code => code.selectedLabel === ev.detail);
82
- setCountryCode(matchedCountryCode.value);
83
- setMatchedCountryCode(matchedCountryCode);
84
- };
85
- const login = () => __awaiter(void 0, void 0, void 0, function* () {
86
- setError('');
87
- if (isUnknown) {
88
- setError('Please enter a valid email or phone number!');
89
- return;
90
- }
91
- let auth;
92
- if (isEmail) {
93
- if (!EMAIL_REGEX.test(identifier)) {
94
- setError('Please enter a valid email!');
95
- return;
96
- }
97
- // Logout to ensure cleared Capsule state but preserve pregen wallets
98
- // TODO: migrate to hook once we force the use of the CapsuleProvider
99
- yield para.logout();
100
- auth = { email: identifier };
101
- setAuthInfo(auth);
102
- const userExists = yield para.checkIfUserExists({ email: identifier });
103
- if (userExists) {
104
- const supportedAuthMethods = yield para.initiateUserLoginV2(auth);
105
- const biometricLocationHints = supportedAuthMethods.has(AuthMethod.PASSKEY)
106
- ? yield para.getUserBiometricLocationHints()
107
- : [];
108
- setFlow('login');
109
- setStep(ModalStep.BIOMETRIC_LOGIN);
110
- setSupportedAuthMethods(supportedAuthMethods);
111
- setBiometricLocationHints(biometricLocationHints);
112
- return;
113
- }
114
- // TODO: migrate to hook once we force the use of the CapsuleProvider
115
- yield para.createUser(auth);
116
- setFlow('signUp');
117
- setStep(ModalStep.VERIFICATIONS);
118
- return;
119
- }
120
- if (isPhone) {
121
- // Logout to ensure cleared Capsule state but preserve pregen wallets
122
- // TODO: migrate to hook once we force the use of the CapsuleProvider
123
- yield para.logout();
124
- let userExists = false;
125
- try {
126
- userExists = yield para.checkIfUserExistsByPhone({ phone: identifier, countryCode });
127
- }
128
- catch (error) {
129
- setError('Please enter a valid phone number!');
130
- return;
131
- }
132
- auth = { phone: identifier, countryCode };
133
- setAuthInfo(auth);
134
- if (userExists) {
135
- // TODO: migrate to hook once we force the use of the CapsuleProvider
136
- const supportedAuthMethods = yield para.initiateUserLoginV2(auth);
137
- const biometricLocationHints = supportedAuthMethods.has(AuthMethod.PASSKEY)
138
- ? yield para.getUserBiometricLocationHints()
139
- : [];
140
- setFlow('login');
141
- setStep(ModalStep.BIOMETRIC_LOGIN);
142
- setSupportedAuthMethods(supportedAuthMethods);
143
- setBiometricLocationHints(biometricLocationHints);
144
- return;
145
- }
146
- // TODO: migrate to hook once we force the use of the CapsuleProvider
147
- yield para.createUserByPhone(auth);
148
- setFlow('signUp');
149
- setStep(ModalStep.VERIFICATIONS);
150
- return;
151
- }
152
- });
153
- const handleSubmit = () => __awaiter(void 0, void 0, void 0, function* () {
154
- setIsLoggingIn(true);
155
- yield login();
156
- setIsLoggingIn(false);
157
- });
158
- if (disableEmailLogin && disablePhoneLogin) {
159
- return null;
160
- }
161
- return (_jsx("form", { onSubmit: (e) => __awaiter(void 0, void 0, void 0, function* () {
162
- e.preventDefault();
163
- yield handleSubmit();
164
- }), children: _jsxs(StyledInput, { ref: inputRef, id: "authInput", placeholder: isEmail || disablePhoneLogin
165
- ? 'Enter email'
166
- : isPhone || disableEmailLogin
167
- ? 'Enter phone'
168
- : 'Enter email or phone', onCpslInput: handleIdentifierInput, value: identifier, errorText: error, autofocus: true, inputMode: "email", onKeyDown: (e) => __awaiter(void 0, void 0, void 0, function* () { return e.key === 'Enter' && handleSubmit(); }), contrastText: true, isPhone: isPhone, mask: identifierType === 'phone' ? ((_a = phoneMasks[matchedCountryCode.selectedLabel]) !== null && _a !== void 0 ? _a : defaultPhoneMask) : undefined, enterkeyhint: "go", noAutoDisable: true, disabled: isLoggingIn, "data-testid": "auth-input", children: [_jsxs(IconContainer, { slot: "start", children: [!disableEmailLogin && (isUnknown || isEmail) && _jsx(CpslIcon, { "aria-label": "email", icon: "mail" }), !disablePhoneLogin && isUnknown && _jsx(CpslIcon, { "aria-label": "phone", icon: "phone" }), isPhone && (_jsxs(CountryCodeSelect, { selectedValue: matchedCountryCode.selectedLabel, onCpslSelectValueChange: handleCountryCodeInput, showFormattedSelectedItem: true, autoWidth: true, dropdownMaxHeight: dropdownMaxHeight, anchorElId: "authInput", "$width": dropdownWidth, showSearch: true, searchPlaceholder: "Search Countries", onCpslSearchChange: handleSearchInput, "data-testid": "country-code-select", children: [matchedCountryCode && (_jsxs(SelectedItem, { slot: "selected-item", children: [_jsx(CpslText, { children: matchedCountryCode.selectedLabel }), _jsx(CpslText, { children: matchedCountryCode.value })] })), filteredCountryCodes.map(cc => (_jsxs(StyledSelectItem, { slot: "items", value: cc.selectedLabel, children: [_jsx(CpslText, { children: cc.label }), _jsx(CpslText, { children: cc.value })] }, cc.selectedLabel)))] }))] }), identifier && (_jsx(CpslButton, { slot: "end", size: "small", fullWidth: true, disabled: isLoggingIn, onClick: handleSubmit, children: isLoggingIn ? _jsx(CpslSpinner, { size: 16 }) : _jsx(CpslIcon, { icon: "arrowNarrow" }) }))] }, 'email') }));
169
- };
170
- const IconContainer = styled.div `
171
- height: 100%;
172
- display: flex;
173
- align-items: center;
174
- gap: 8px;
175
- padding-right: 12px;
176
- border-right: 1px solid var(--cpsl-color-background-16);
177
-
178
- & cpsl-icon {
179
- --icon-color: var(--cpsl-color-contrast);
180
- }
181
- `;
182
- const CountryCodeSelect = styled(CpslSelect) `
183
- --container-height: 100%;
184
- --container-padding-start: 0px;
185
- --container-padding-end: 0px;
186
- --container-border-width: 0px;
187
- --container-gap: 4px;
188
- --container-background-color: transparent;
189
- --container-box-shadow: none;
190
-
191
- &::part(dropdown) {
192
- width: ${({ $width }) => `${$width - 2}px`};
193
- }
194
-
195
- &::part(popover) {
196
- @media (max-width: ${MOBILE_SIZE}px) {
197
- top: unset !important;
198
- bottom: 16px;
199
- }
200
-
201
- cpsl-auth-modal.force-mobile-media & {
202
- top: unset !important;
203
- bottom: 16px;
204
- }
205
- }
206
- `;
207
- const StyledSelectItem = styled(CpslSelectItem) `
208
- &::part(inner-container) {
209
- justify-content: space-between;
210
- }
211
- `;
212
- const SelectedItem = styled.div `
213
- display: flex;
214
- gap: 4px;
215
- align-items: center;
216
- `;
217
- const StyledInput = styled(CpslInput) `
218
- --container-background-color: var(--cpsl-color-background-8);
219
- --input-background-color: var(--cpsl-color-background-8);
220
- --container-padding-end: 8px;
221
- `;
@@ -1,40 +0,0 @@
1
- import { getCountries, getCountryCallingCode } from 'libphonenumber-js';
2
- const excludedCountries = [
3
- 'AC',
4
- 'CG',
5
- 'CI',
6
- 'CV',
7
- 'GF',
8
- 'GP',
9
- 'MF',
10
- 'NC',
11
- 'PM',
12
- 'RE',
13
- 'SD',
14
- 'SH',
15
- 'SJ',
16
- 'TA',
17
- 'VA',
18
- 'WF',
19
- 'XK',
20
- 'YT',
21
- ];
22
- const generateCountryCodes = () => {
23
- const countries = getCountries();
24
- const countryList = countries
25
- .filter(country => !excludedCountries.includes(country))
26
- .map(country => {
27
- const countryCode = getCountryCallingCode(country);
28
- const countryName = new Intl.DisplayNames(['en'], { type: 'region' }).of(country);
29
- return {
30
- label: countryName,
31
- value: `+${countryCode}`,
32
- selectedLabel: country,
33
- icon: country,
34
- };
35
- })
36
- .sort((a, b) => a.label.localeCompare(b.label));
37
- return countryList;
38
- };
39
- const countryCodes = generateCountryCodes();
40
- export default countryCodes;
@@ -1,23 +0,0 @@
1
- import { useEffect, useState } from 'react';
2
- export const useDropdownPosition = (inputRef) => {
3
- const [dropdownMaxHeight, setDropdownMaxHeight] = useState();
4
- const [dropdownWidth, setDropdownWidth] = useState();
5
- const [mobileAnchor, setMobileAnchor] = useState();
6
- const resize = () => {
7
- var _a, _b, _c;
8
- const newMaxHeight = Math.max(window.innerHeight - ((_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().bottom) - 20, window.innerHeight * 0.25);
9
- setDropdownMaxHeight(newMaxHeight);
10
- setDropdownWidth((_b = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width);
11
- setMobileAnchor((_c = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().height);
12
- };
13
- if (inputRef.current && !dropdownMaxHeight) {
14
- resize();
15
- }
16
- useEffect(() => {
17
- window.addEventListener('resize', resize);
18
- return () => {
19
- window.removeEventListener('resize', resize);
20
- };
21
- }, []);
22
- return { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize };
23
- };
@@ -1,247 +0,0 @@
1
- export const defaultPhoneMask = '#################';
2
- export const phoneMasks = {
3
- AF: '### ### ####',
4
- AX: '## ### ####',
5
- AL: '(###) ### ###',
6
- DZ: '(###) ### ###',
7
- AS: '(###) ###-####',
8
- AD: '### ###',
9
- AO: '(###) ### ###',
10
- AI: '(###) ###-####',
11
- AG: '(###) ###-####',
12
- AR: '(###) ###-####',
13
- AM: '## ### ###',
14
- AW: '### ####',
15
- AU: '# #### ####',
16
- AT: '(###) ### ####',
17
- AZ: '(###) ### ## ##',
18
- BS: '(###) ###-####',
19
- BH: '#### ####',
20
- BD: '# ### ###',
21
- BB: '(###) ###-####',
22
- BY: '(##) ###-##-##',
23
- BE: '(###) ### ###',
24
- BZ: '###-####',
25
- BJ: '##-##-####',
26
- BM: '(###) ###-####',
27
- BT: '# ### ###',
28
- BO: '# ### ####',
29
- BA: '## ###-###',
30
- BW: '## ### ###',
31
- BR: '(##) ####-####',
32
- IO: '### ####',
33
- BN: '### ####',
34
- BG: '(###) ### ###',
35
- BF: '## ## ####',
36
- BI: '## ## ####',
37
- KH: '## ### ###',
38
- CM: '#### ####',
39
- CA: '(###) ###-####',
40
- CV: '(###) ## ##',
41
- KY: '(###) ###-####',
42
- CF: '## ## ####',
43
- TD: '## ## ## ##',
44
- CL: '# #### ####',
45
- CN: '(###) #### ####',
46
- CX: '# ## ## ##',
47
- CC: '# ## ## ##',
48
- CO: '(###) ### ####',
49
- KM: '## ## ## ##',
50
- CG: '## ### ####',
51
- CK: '## ###',
52
- CR: '#### ####',
53
- HR: '## #### ###',
54
- CU: '# ### ####',
55
- CY: '## ### ###',
56
- CZ: '### ### ###',
57
- CD: '### ### ###',
58
- DK: '## ## ## ##',
59
- DJ: '## ## ## ##',
60
- DM: '(###) ###-####',
61
- DO: '(###) ###-####',
62
- EC: '## ### ####',
63
- EG: '# #### ####',
64
- SV: '#### ####',
65
- GQ: '## ### ####',
66
- ER: '# ### ###',
67
- EE: '#### ####',
68
- SZ: '#### ####',
69
- ET: '## ### ####',
70
- FK: '#####',
71
- FO: '######',
72
- FJ: '### ####',
73
- FI: '## ### ####',
74
- FR: '## ## ## ## ##',
75
- GF: '### ## ## ##',
76
- PF: '## ## ##',
77
- GA: '# ## ## ##',
78
- GM: '### ####',
79
- GE: '(###) ## ## ##',
80
- DE: '(###) ### ####',
81
- GH: '## ### ####',
82
- GI: '### #####',
83
- GR: '(###) ### ####',
84
- GL: '## ## ##',
85
- GD: '(###) ###-####',
86
- GP: '### ## ## ##',
87
- GU: '(###) ###-####',
88
- GT: '# ### ####',
89
- GG: '(####) ### ###',
90
- GN: '## ### ###',
91
- GW: '# #######',
92
- GY: '### ####',
93
- HT: '## ## ####',
94
- VA: '### ####',
95
- HN: '####-####',
96
- HK: '#### ####',
97
- HU: '(##) ### ####',
98
- IS: '### ####',
99
- IN: '####### ###',
100
- ID: '(###) ###-####',
101
- IR: '(###) ### ####',
102
- IQ: '(###) ### ####',
103
- IE: '(###) ### ###',
104
- IM: '(####) ### ###',
105
- IL: '#-###-####',
106
- IT: '(###) #### ###',
107
- CI: '## ## ## ##',
108
- JM: '(###) ###-####',
109
- JP: '(###) ###-####',
110
- JE: '(####) ### ###',
111
- JO: '# #### ####',
112
- KZ: '(###) ###-##-##',
113
- KE: '### ######',
114
- KI: '## ###',
115
- KP: '###-###-####',
116
- KR: '(###) ####-####',
117
- XK: '## ### ###',
118
- KW: '#### ####',
119
- KG: '(###) ###-###',
120
- LA: '## ## ####',
121
- LV: '## ### ###',
122
- LB: '## ### ###',
123
- LS: '# ### ####',
124
- LR: '## ### ###',
125
- LY: '##-#######',
126
- LI: '(###) ###-####',
127
- LT: '(###) ## ###',
128
- LU: '### ### ###',
129
- MO: '#### ####',
130
- MG: '## ## ### ##',
131
- MW: '# #### ####',
132
- MY: '(###) ###-###',
133
- MV: '###-####',
134
- ML: '## ## ####',
135
- MT: '#### ####',
136
- MH: '###-####',
137
- MQ: '### ## ## ##',
138
- MR: '## ## ####',
139
- MU: '### ####',
140
- YT: '### ## ## ##',
141
- MX: '(###) ###-####',
142
- FM: '### ####',
143
- MD: '#### ####',
144
- MC: '(###) ###-###',
145
- MN: '## ## ####',
146
- ME: '## ### ###',
147
- MS: '(###) ###-####',
148
- MA: '#-####-####',
149
- MZ: '## ### ####',
150
- MM: '# ### ####',
151
- NA: '## ### ####',
152
- NR: '### ####',
153
- NP: '#-######',
154
- NL: '## ### ####',
155
- NC: '##.##.##',
156
- NZ: '## ### ###',
157
- NI: '#### ####',
158
- NE: '## ## ## ##',
159
- NG: '## ### ####',
160
- NU: '####',
161
- NF: '### ###',
162
- MK: '## ### ###',
163
- MP: '(###) ###-####',
164
- NO: '### ## ###',
165
- OM: '#### ####',
166
- PK: '(###) #######',
167
- PW: '### ####',
168
- PS: '## ### ####',
169
- PA: '####-####',
170
- PG: '(###) ## ###',
171
- PY: '## ### ####',
172
- PE: '(###) ### ###',
173
- PH: '(###) ###-####',
174
- PN: '### ####',
175
- PL: '### ### ###',
176
- PT: '## ### ####',
177
- PR: '(###) ###-####',
178
- QA: '#### ####',
179
- RE: '##### ####',
180
- RO: '## ### ####',
181
- RU: '(###) ###-##-##',
182
- RW: '(###) ### ###',
183
- BL: '### ## ## ##',
184
- SH: '####',
185
- KN: '(###) ###-####',
186
- LC: '(###) ###-####',
187
- MF: '### ## ## ##',
188
- PM: '## ## ##',
189
- VC: '(###) ###-####',
190
- WS: '####',
191
- SM: '(####) ######',
192
- ST: '## ####',
193
- SA: '# ### ####',
194
- SN: '## ### ####',
195
- RS: '## ### ####',
196
- SC: '# ### ###',
197
- SL: '## ######',
198
- SG: '#### ####',
199
- SX: '(###) ###-####',
200
- SK: '(###) ### ###',
201
- SI: '## ### ###',
202
- SB: '### ####',
203
- SO: '# ### ###',
204
- ZA: '## ### ####',
205
- GS: '####',
206
- SS: '# ### ####',
207
- ES: '### ### ###',
208
- LK: '## ### ####',
209
- SD: '## ### ####',
210
- SR: '###-####',
211
- SJ: '### ## ###',
212
- SE: '## ### ####',
213
- CH: '## ### ####',
214
- SY: '## #### ###',
215
- TW: '#### ####',
216
- TJ: '## ### ####',
217
- TZ: '## ### ####',
218
- TH: '# #### ####',
219
- TL: '#### ####',
220
- TG: '## ## ## ##',
221
- TK: '####',
222
- TO: '####',
223
- TT: '(###) ###-####',
224
- TN: '## ### ###',
225
- TR: '(###) ### ####',
226
- TM: '# ### ###',
227
- TC: '(###) ###-####',
228
- TV: '####',
229
- UG: '## ### ####',
230
- UA: '## ### ####',
231
- AE: '# ### ####',
232
- GB: '#### ### ###',
233
- US: '(###) ###-####',
234
- UM: '(###) ###-####',
235
- UY: '# ### ## ##',
236
- UZ: '## ### ####',
237
- VU: '## ####',
238
- VE: '###-###-####',
239
- VN: '## #### ###',
240
- VG: '(###) ###-####',
241
- VI: '(###) ###-####',
242
- WF: '## ####',
243
- EH: '###-###-###',
244
- YE: '# ### ###',
245
- ZM: '## ### ####',
246
- ZW: '# #######',
247
- };
@@ -1,21 +0,0 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import styled from 'styled-components';
3
- import { useThemeStore } from '../../stores/theme/useThemeStore.js';
4
- import { AuthMainStepContent } from './AuthMainStepContent.js';
5
- import { CenteredText } from '../common.js';
6
- export const AuthMainStep = ({ oAuthMethods, disableEmailLogin, disablePhoneLogin }) => {
7
- const logo = useThemeStore(state => state.getLogo());
8
- const appName = useThemeStore(state => state.appName);
9
- const authLayout = useThemeStore(state => state.authLayout);
10
- const embeddedModal = useThemeStore(state => state.embeddedModal);
11
- const firstLayoutType = authLayout[0].split(':')[0];
12
- const heading = firstLayoutType === 'AUTH' ? 'Sign Up or Login' : 'Connect Wallet';
13
- return (_jsxs(_Fragment, { children: [logo && _jsx(Logo, { src: logo, alt: `${appName ? `${appName} -` : ''}logo` }), !embeddedModal && (_jsx(CenteredText, { variant: logo ? 'bodyM' : 'headingS', weight: "semiBold", children: heading })), _jsx(AuthMainStepContent, { disableEmailLogin: disableEmailLogin, disablePhoneLogin: disablePhoneLogin, oAuthMethods: oAuthMethods })] }));
14
- };
15
- const Logo = styled.img `
16
- height: 100px;
17
- max-width: 260px;
18
- object-fit: contain;
19
- box-sizing: content-box;
20
- align-self: center;
21
- `;