@getpara/react-sdk-lite 2.0.0-alpha.64 → 2.0.0-alpha.65
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.
- package/dist/modal/ParaModal.js +8 -3
- package/dist/modal/components/Account/AccountHeader.js +2 -2
- package/dist/modal/components/Account/AccountProfile.js +2 -2
- package/dist/modal/components/{WalletSelect/WalletSelect.d.ts → Account/AccountWalletSelect.d.ts} +1 -1
- package/dist/modal/components/{WalletSelect/WalletSelect.js → Account/AccountWalletSelect.js} +5 -4
- package/dist/modal/components/AddFunds/AddFundsAsset.js +1 -2
- package/dist/modal/components/AddFunds/AddFundsSettings.js +1 -2
- package/dist/modal/components/AuthInput/AuthInput.js +1 -2
- package/dist/modal/components/Body/Body.js +1 -2
- package/dist/modal/components/ChainSwitch/ChainSwitch.js +1 -3
- package/dist/modal/components/Controls/ChainSelect.js +1 -2
- package/dist/modal/components/Footer/Footer.js +1 -2
- package/dist/modal/components/Header/Header.js +1 -2
- package/dist/modal/components/Hero/Hero.js +5 -3
- package/dist/modal/components/IFrameStep/IFrameStep.js +1 -2
- package/dist/modal/components/LoginDoneStep/LoginDoneStep.js +4 -1
- package/dist/modal/components/OnRampComponents/AddingFunds.js +1 -1
- package/dist/modal/components/OnRampComponents/OnRampProviderButton.js +1 -2
- package/dist/modal/components/Setup2FAStep/Setup2FAStep.js +4 -1
- package/dist/modal/components/VerificationCodeStep/VerificationCodeStep.js +13 -2
- package/dist/modal/components/WalletCard/WalletCard.js +1 -2
- package/dist/modal/components/WalletSelectOld/WalletSelectOld.js +2 -3
- package/dist/modal/components/common.d.ts +2 -8
- package/dist/modal/components/common.js +2 -38
- package/dist/modal/index.d.ts +1 -1
- package/dist/modal/index.js +1 -1
- package/dist/modal/utils/authInputHelpers.js +1 -1
- package/dist/modal/utils/getWalletDisplayName.js +1 -1
- package/dist/modal/utils/stringFormatters.js +1 -1
- package/dist/provider/ParaProviderMin.js +5 -0
- package/dist/provider/actions/getEmbeddedAccount.js +0 -1
- package/dist/provider/actions/index.d.ts +1 -0
- package/dist/provider/actions/index.js +2 -0
- package/dist/provider/hooks/mutations/index.d.ts +1 -0
- package/dist/provider/hooks/mutations/index.js +2 -0
- package/dist/provider/hooks/mutations/useExportPrivateKey.d.ts +15 -0
- package/dist/provider/hooks/mutations/useExportPrivateKey.js +32 -0
- package/dist/provider/providers/AuthProvider.js +7 -1
- package/package.json +8 -8
- package/dist/modal/constants/constants.d.ts +0 -35
- package/dist/modal/constants/constants.js +0 -148
package/dist/modal/ParaModal.js
CHANGED
|
@@ -14,7 +14,7 @@ import { ModalStep, RESET_TO_ACCOUNT_STEPS, RESET_TO_AUTH_STEPS } from "./utils/
|
|
|
14
14
|
import { AuthLayout } from "./types/modalProps.js";
|
|
15
15
|
import { DEFAULTS } from "./constants/defaults.js";
|
|
16
16
|
import { useGoBack } from "./hooks/useGoBack.js";
|
|
17
|
-
import { safeStyled } from "@getpara/react-common";
|
|
17
|
+
import { safeStyled, SDK_VERSION } from "@getpara/react-common";
|
|
18
18
|
import { hasEmbeddedAuth, hasExternalWallet } from "./utils/authLayoutHelpers.js";
|
|
19
19
|
import { useAccount, useModal, useParaStatus, useWalletState } from "../provider/index.js";
|
|
20
20
|
import { useInternalClient } from "../provider/hooks/utils/useInternalClient.js";
|
|
@@ -23,7 +23,6 @@ import { useStore } from "../provider/stores/useStore.js";
|
|
|
23
23
|
import parsePhoneNumberFromString from "libphonenumber-js";
|
|
24
24
|
import { useAuthActions } from "../provider/providers/AuthProvider.js";
|
|
25
25
|
import { validateInput } from "./utils/authInputHelpers.js";
|
|
26
|
-
import { SDK_VERSION } from "./constants/constants.js";
|
|
27
26
|
defineCustomElements();
|
|
28
27
|
const ParaModal = forwardRef((props, ref) => {
|
|
29
28
|
const storedModalConfig = useStore((state) => state.modalConfig);
|
|
@@ -193,12 +192,18 @@ const ParaModal = forwardRef((props, ref) => {
|
|
|
193
192
|
initModal(isOpen);
|
|
194
193
|
isInitialized.current = true;
|
|
195
194
|
}
|
|
195
|
+
let timerId;
|
|
196
196
|
if (!bareModal && isReady && !isOpen && isInitialized.current) {
|
|
197
|
-
setTimeout(() => {
|
|
197
|
+
timerId = setTimeout(() => {
|
|
198
198
|
initModal();
|
|
199
199
|
isInitialized.current = false;
|
|
200
200
|
}, 250);
|
|
201
201
|
}
|
|
202
|
+
return () => {
|
|
203
|
+
if (timerId) {
|
|
204
|
+
clearTimeout(timerId);
|
|
205
|
+
}
|
|
206
|
+
};
|
|
202
207
|
}, [bareModal, isReady, isOpen, isAccountLoading]);
|
|
203
208
|
useEffect(() => {
|
|
204
209
|
let _authLayout = authLayout;
|
|
@@ -8,7 +8,7 @@ import { truncateAddress } from "@getpara/web-sdk";
|
|
|
8
8
|
import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
|
|
9
9
|
import { useAssets } from "../../../provider/providers/AssetsProvider.js";
|
|
10
10
|
import { useAccount, useWallet } from "../../../provider/index.js";
|
|
11
|
-
import {
|
|
11
|
+
import { AccountWalletSelect } from "./AccountWalletSelect.js";
|
|
12
12
|
const AccountHeader = ({ withBalance = false } = {}) => {
|
|
13
13
|
const para = useInternalClient();
|
|
14
14
|
const { connectionType } = useAccount();
|
|
@@ -44,7 +44,7 @@ const AccountHeader = ({ withBalance = false } = {}) => {
|
|
|
44
44
|
src
|
|
45
45
|
}
|
|
46
46
|
),
|
|
47
|
-
connectionType === "both" ? /* @__PURE__ */ jsx(
|
|
47
|
+
connectionType === "both" ? /* @__PURE__ */ jsx(AccountWalletSelect, {}) : /* @__PURE__ */ jsx(CpslText, { variant: "headingXS", weight: "semiBold", color: "contrast", children: name }),
|
|
48
48
|
withBalance && typeof totalBalance === "string" && totalBalance !== "" && /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", weight: "medium", style: { visibility: profileBalance ? "visible" : "hidden" }, children: totalBalance })
|
|
49
49
|
] });
|
|
50
50
|
};
|
|
@@ -4,7 +4,7 @@ import {
|
|
|
4
4
|
__spreadValues
|
|
5
5
|
} from "../../../chunk-MMUBH76A.js";
|
|
6
6
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
-
import { AccountTypeIcon, GradientScroll, StepContainer
|
|
7
|
+
import { AccountTypeIcon, GradientScroll, StepContainer } from "../common.js";
|
|
8
8
|
import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
|
|
9
9
|
import { useAccount } from "../../../provider/index.js";
|
|
10
10
|
import { useLinkedAccounts } from "../../../provider/hooks/index.js";
|
|
@@ -15,7 +15,7 @@ import {
|
|
|
15
15
|
} from "@getpara/web-sdk";
|
|
16
16
|
import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
|
|
17
17
|
import { useEffect, useMemo } from "react";
|
|
18
|
-
import { ACCOUNT_TYPES, safeStyled, useCopyToClipboard } from "@getpara/react-common";
|
|
18
|
+
import { ACCOUNT_TYPES, safeStyled, useCopyToClipboard, WalletTypeIcon } from "@getpara/react-common";
|
|
19
19
|
import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
|
|
20
20
|
import { useStore } from "../../../provider/stores/useStore.js";
|
|
21
21
|
import { useAssets } from "../../../provider/providers/AssetsProvider.js";
|
package/dist/modal/components/{WalletSelect/WalletSelect.d.ts → Account/AccountWalletSelect.d.ts}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const
|
|
1
|
+
export declare const AccountWalletSelect: () => import("react/jsx-runtime").JSX.Element;
|
|
2
2
|
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"> & {
|
|
3
3
|
ref?: ((instance: any) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<any> | null | undefined;
|
|
4
4
|
}, {
|
package/dist/modal/components/{WalletSelect/WalletSelect.js → Account/AccountWalletSelect.js}
RENAMED
|
@@ -62,7 +62,7 @@ const Wallet = ({
|
|
|
62
62
|
)
|
|
63
63
|
] });
|
|
64
64
|
};
|
|
65
|
-
const
|
|
65
|
+
const AccountWalletSelect = () => {
|
|
66
66
|
var _a, _b, _c;
|
|
67
67
|
const containerRef = useRef(null);
|
|
68
68
|
const { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize } = useDropdownPosition(containerRef);
|
|
@@ -170,7 +170,8 @@ const SelectContainer = safeStyled.div`
|
|
|
170
170
|
border-radius: var(--cpsl-border-radius-tile-button);
|
|
171
171
|
background-color: transparent;
|
|
172
172
|
`;
|
|
173
|
-
const WalletIcon = safeStyled(CpslIcon)`
|
|
173
|
+
const WalletIcon = safeStyled(CpslIcon)`
|
|
174
|
+
--icon-border: 1px solid var(--cpsl-color-background-8);
|
|
174
175
|
--icon-background: var(--cpsl-color-background-0);
|
|
175
176
|
--icon-border-radius: 4px;
|
|
176
177
|
`;
|
|
@@ -181,8 +182,8 @@ const CopyButton = safeStyled(CpslButton)`
|
|
|
181
182
|
}
|
|
182
183
|
`;
|
|
183
184
|
export {
|
|
185
|
+
AccountWalletSelect,
|
|
184
186
|
Select,
|
|
185
187
|
SelectContainer,
|
|
186
|
-
SelectItem
|
|
187
|
-
WalletSelect
|
|
188
|
+
SelectItem
|
|
188
189
|
};
|
|
@@ -7,8 +7,7 @@ import {
|
|
|
7
7
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
8
8
|
import * as comp from "@getpara/react-components";
|
|
9
9
|
import { formatCurrency, getOnRampNetworks } from "@getpara/web-sdk";
|
|
10
|
-
import { safeStyled } from "@getpara/react-common";
|
|
11
|
-
import { getAssetCode, getAssetName, ON_RAMP_ASSETS } from "../../constants/constants.js";
|
|
10
|
+
import { safeStyled, getAssetCode, getAssetName, ON_RAMP_ASSETS } from "@getpara/react-common";
|
|
12
11
|
import { useModalStore } from "../../stores/index.js";
|
|
13
12
|
import { useState } from "react";
|
|
14
13
|
import { useAddFunds } from "./AddFundsContext.js";
|
|
@@ -8,11 +8,10 @@ import { useEffect, useMemo, useState } from "react";
|
|
|
8
8
|
import { useAddFunds } from "./AddFundsContext.js";
|
|
9
9
|
import { CpslButton, CpslIcon, CpslInput, CpslRow, CpslText } from "@getpara/react-components";
|
|
10
10
|
import { AssetIcon, HeaderSelect, HeaderSelectContainer, HeaderSelectItem, NetworkIcon } from "../common.js";
|
|
11
|
-
import { getAssetCode, getNetworkName } from "../../constants/constants.js";
|
|
12
11
|
import { EnabledFlow, getOnRampNetworks, OnRampPurchaseType } from "@getpara/web-sdk";
|
|
13
12
|
import { OnRampStep, useModalStore } from "../../stores/index.js";
|
|
14
13
|
import { useStore } from "../../../provider/stores/useStore.js";
|
|
15
|
-
import { safeStyled } from "@getpara/react-common";
|
|
14
|
+
import { safeStyled, getAssetCode, getNetworkName } from "@getpara/react-common";
|
|
16
15
|
import { contentMotionProps, NoProviders } from "./common.js";
|
|
17
16
|
import { AnimatePresence, motion, useIsPresent } from "framer-motion";
|
|
18
17
|
import { AddFundsAsset } from "./AddFundsAsset.js";
|
|
@@ -13,9 +13,8 @@ import {
|
|
|
13
13
|
CpslText
|
|
14
14
|
} from "@getpara/react-components";
|
|
15
15
|
import { useEffect, useMemo, useRef, useState } from "react";
|
|
16
|
-
import { safeStyled } from "@getpara/react-common";
|
|
16
|
+
import { safeStyled, MOBILE_SIZE } from "@getpara/react-common";
|
|
17
17
|
import countryCodes from "../../utils/countryCodes.js";
|
|
18
|
-
import { MOBILE_SIZE } from "../../constants/constants.js";
|
|
19
18
|
import { useDropdownPosition } from "./hooks/useDropdownPosition.js";
|
|
20
19
|
import { defaultPhoneMask, phoneMasks } from "./phoneMasks.js";
|
|
21
20
|
import { extractAuthInfo } from "@getpara/user-management-client";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import "../../../chunk-MMUBH76A.js";
|
|
3
3
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
-
import { safeStyled, WarningBanner } from "@getpara/react-common";
|
|
4
|
+
import { safeStyled, WarningBanner, BODY_MOTION_VARIANTS, BODY_TRANSITION, MOBILE_SIZE } from "@getpara/react-common";
|
|
5
5
|
import { IFrameSteps, ModalStep } from "../../utils/steps.js";
|
|
6
6
|
import { CpslAlert, CpslIcon } from "@getpara/react-components";
|
|
7
7
|
import { VerificationCodeStep } from "../VerificationCodeStep/VerificationCodeStep.js";
|
|
@@ -21,7 +21,6 @@ import { AddFundsAwaiting, AddFundsDone, AddFunds } from "../AddFunds/index.js";
|
|
|
21
21
|
import { FarcasterOAuthStep } from "../OAuth/FarcasterOAuthStep.js";
|
|
22
22
|
import { Header } from "../Header/Header.js";
|
|
23
23
|
import { AuthMainStep } from "../AuthMainStep/AuthMainStep.js";
|
|
24
|
-
import { BODY_MOTION_VARIANTS, BODY_TRANSITION, MOBILE_SIZE } from "../../constants/constants.js";
|
|
25
24
|
import { Account } from "../Account/Account.js";
|
|
26
25
|
import { AuthOptions } from "../AuthOptions/AuthOptions.js";
|
|
27
26
|
import { ExternalWallets } from "../ExternalWallets/ExternalWallets.js";
|
|
@@ -7,11 +7,9 @@ import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpar
|
|
|
7
7
|
import { HeroAccountTypeIcon, InnerStepContainer, QRContainer, StepContainer } from "../common.js";
|
|
8
8
|
import { useEffect, useMemo } from "react";
|
|
9
9
|
import { useModalStore } from "../../stores/index.js";
|
|
10
|
-
import { HeroSpinner, safeStyled } from "@getpara/react-common";
|
|
11
|
-
import { useCopyToClipboard } from "@getpara/react-common";
|
|
10
|
+
import { HeroSpinner, safeStyled, NETWORK_NOT_SUPPORTED_ERROR, useCopyToClipboard } from "@getpara/react-common";
|
|
12
11
|
import { ModalStep } from "../../utils/steps.js";
|
|
13
12
|
import { routeMobileExternalWallet } from "../../utils/routeMobileExternalWallet.js";
|
|
14
|
-
import { NETWORK_NOT_SUPPORTED_ERROR } from "../../constants/constants.js";
|
|
15
13
|
import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
|
|
16
14
|
const ChainSwitch = () => {
|
|
17
15
|
const [isCopied, copy] = useCopyToClipboard();
|
|
@@ -4,13 +4,12 @@ import {
|
|
|
4
4
|
} from "../../../chunk-MMUBH76A.js";
|
|
5
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
import { CpslText } from "@getpara/react-components";
|
|
7
|
-
import { getNetworkFromChainId, safeStyled } from "@getpara/react-common";
|
|
7
|
+
import { getNetworkFromChainId, getNetworkName, safeStyled } from "@getpara/react-common";
|
|
8
8
|
import { useEffect, useRef } from "react";
|
|
9
9
|
import { useDropdownPosition } from "../AuthInput/hooks/useDropdownPosition.js";
|
|
10
10
|
import { useWallet } from "../../../provider/index.js";
|
|
11
11
|
import { HeaderSelect, HeaderSelectContainer, HeaderSelectItem, NetworkIcon } from "../common.js";
|
|
12
12
|
import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
|
|
13
|
-
import { getNetworkName } from "../../constants/constants.js";
|
|
14
13
|
const Chain = ({
|
|
15
14
|
chain: { id, name },
|
|
16
15
|
slot,
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import "../../../chunk-MMUBH76A.js";
|
|
3
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
-
import { safeStyled } from "@getpara/react-common";
|
|
4
|
+
import { safeStyled, PARA_TERMS_AND_CONDITIONS } from "@getpara/react-common";
|
|
5
5
|
import { CpslIcon, CpslText } from "@getpara/react-components";
|
|
6
|
-
import { PARA_TERMS_AND_CONDITIONS } from "../../constants/constants.js";
|
|
7
6
|
import { useModalStore } from "../../stores/index.js";
|
|
8
7
|
import { ModalStep } from "../../utils/steps.js";
|
|
9
8
|
import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import "../../../chunk-MMUBH76A.js";
|
|
3
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
-
import { getAuthDisplay, safeStyled } from "@getpara/react-common";
|
|
4
|
+
import { getAuthDisplay, safeStyled, BODY_MOTION_VARIANTS, BODY_TRANSITION } from "@getpara/react-common";
|
|
5
5
|
import { useStepTitle } from "./hooks/useStepTitle.js";
|
|
6
6
|
import { CenteredText } from "../common.js";
|
|
7
7
|
import { AnimatePresence, motion } from "framer-motion";
|
|
8
8
|
import { useModalStore } from "../../stores/index.js";
|
|
9
|
-
import { BODY_MOTION_VARIANTS, BODY_TRANSITION } from "../../constants/constants.js";
|
|
10
9
|
import { useAccount } from "../../../provider/index.js";
|
|
11
10
|
import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
|
|
12
11
|
import { CpslIcon, CpslText } from "@getpara/react-components";
|
|
@@ -2,10 +2,9 @@
|
|
|
2
2
|
import "../../../chunk-MMUBH76A.js";
|
|
3
3
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
4
4
|
import { CpslHero, CpslIcon, CpslIdenticon } from "@getpara/react-components";
|
|
5
|
-
import { safeStyled } from "@getpara/react-common";
|
|
5
|
+
import { safeStyled, NETWORK_NOT_SUPPORTED_ERROR } from "@getpara/react-common";
|
|
6
6
|
import { ModalStep } from "../../utils/steps.js";
|
|
7
7
|
import { useModalStore } from "../../stores/index.js";
|
|
8
|
-
import { NETWORK_NOT_SUPPORTED_ERROR } from "../../constants/constants.js";
|
|
9
8
|
import { useEffect, useState } from "react";
|
|
10
9
|
import { isMobile } from "@getpara/web-sdk";
|
|
11
10
|
import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
|
|
@@ -54,9 +53,12 @@ const Hero = () => {
|
|
|
54
53
|
externalWalletError
|
|
55
54
|
})[step];
|
|
56
55
|
const delay = newStepConfig && prevStepConfig ? 0 : newStepConfig && !prevStepConfig ? 0 : 200;
|
|
57
|
-
setTimeout(() => {
|
|
56
|
+
const timerId = setTimeout(() => {
|
|
58
57
|
setCurrentStep(step);
|
|
59
58
|
}, delay);
|
|
59
|
+
return () => {
|
|
60
|
+
clearTimeout(timerId);
|
|
61
|
+
};
|
|
60
62
|
}, [step]);
|
|
61
63
|
const isExternalStep = currentStep === ModalStep.EX_WALLET_SELECTED;
|
|
62
64
|
const isChainSwitchStep = currentStep === ModalStep.CHAIN_SWITCH;
|
|
@@ -5,10 +5,9 @@ import { useEffect, useState } from "react";
|
|
|
5
5
|
import { useModalStore } from "../../stores/index.js";
|
|
6
6
|
import { IFrameSteps } from "../../utils/steps.js";
|
|
7
7
|
import { safeStyled } from "@getpara/react-common";
|
|
8
|
-
import { SpinnerContainer } from "@getpara/react-common";
|
|
8
|
+
import { SpinnerContainer, MOBILE_SIZE } from "@getpara/react-common";
|
|
9
9
|
import { CpslSpinner } from "@getpara/react-components";
|
|
10
10
|
import { getPortalBaseURL } from "@getpara/web-sdk";
|
|
11
|
-
import { MOBILE_SIZE } from "../../constants/constants.js";
|
|
12
11
|
import { useStore } from "../../../provider/stores/useStore.js";
|
|
13
12
|
import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
|
|
14
13
|
const IFrameStep = () => {
|
|
@@ -30,7 +30,7 @@ const LoginDoneStep = ({ onClose }) => {
|
|
|
30
30
|
return /* @__PURE__ */ jsx(WalletCard, { id, type, showAddFunds: false }, `${id}-${type}`);
|
|
31
31
|
}, [para.externalWalletConnectionType, para.externalWallets, para.wallets]);
|
|
32
32
|
useEffect(() => {
|
|
33
|
-
setTimeout(() => {
|
|
33
|
+
const timerId = setTimeout(() => {
|
|
34
34
|
if (bareModal) {
|
|
35
35
|
setFlow("account");
|
|
36
36
|
setStep(ModalStep.ACCOUNT_MAIN);
|
|
@@ -38,6 +38,9 @@ const LoginDoneStep = ({ onClose }) => {
|
|
|
38
38
|
onClose();
|
|
39
39
|
}
|
|
40
40
|
}, 1600);
|
|
41
|
+
return () => {
|
|
42
|
+
clearTimeout(timerId);
|
|
43
|
+
};
|
|
41
44
|
}, []);
|
|
42
45
|
return /* @__PURE__ */ jsxs(StepContainer, { children: [
|
|
43
46
|
/* @__PURE__ */ jsx(HeroIcon, { icon: "checkCircleFilled" }),
|
|
@@ -3,7 +3,7 @@ import "../../../chunk-MMUBH76A.js";
|
|
|
3
3
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
4
4
|
import { OnRampPurchaseStatus } from "@getpara/web-sdk";
|
|
5
5
|
import { SpinnerContainer } from "../common.js";
|
|
6
|
-
import { ON_RAMP_PROVIDERS } from "
|
|
6
|
+
import { ON_RAMP_PROVIDERS } from "@getpara/react-common";
|
|
7
7
|
import { useModalStore } from "../../stores/index.js";
|
|
8
8
|
import { CpslSpinner, CpslText } from "@getpara/react-components";
|
|
9
9
|
const AddingFunds = () => {
|
|
@@ -4,8 +4,7 @@ import {
|
|
|
4
4
|
} from "../../../chunk-MMUBH76A.js";
|
|
5
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
import { useState } from "react";
|
|
7
|
-
import { ON_RAMP_PROVIDERS } from "
|
|
8
|
-
import { safeStyled } from "@getpara/react-common";
|
|
7
|
+
import { safeStyled, ON_RAMP_PROVIDERS } from "@getpara/react-common";
|
|
9
8
|
import { CpslButton, CpslIcon, CpslSpinner, CpslText } from "@getpara/react-components";
|
|
10
9
|
import { motion } from "framer-motion";
|
|
11
10
|
const OnRampProviderButton = ({ config, index, onClick: _onClick }) => {
|
|
@@ -32,10 +32,13 @@ const Setup2FAStep = ({ onClose }) => {
|
|
|
32
32
|
const params = (twoFactorStatus == null ? void 0 : twoFactorStatus.uri) ? new URL(twoFactorStatus.uri).searchParams : void 0;
|
|
33
33
|
const secret = params == null ? void 0 : params.get("secret");
|
|
34
34
|
useEffect(() => {
|
|
35
|
-
setTimeout(() => {
|
|
35
|
+
const timerId = setTimeout(() => {
|
|
36
36
|
var _a, _b, _c, _d;
|
|
37
37
|
(_d = (_c = (_b = (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.querySelectorAll("input")) == null ? void 0 : _c[0]) == null ? void 0 : _d.focus();
|
|
38
38
|
}, 10);
|
|
39
|
+
return () => {
|
|
40
|
+
clearTimeout(timerId);
|
|
41
|
+
};
|
|
39
42
|
}, [isVerifying]);
|
|
40
43
|
useEffect(() => {
|
|
41
44
|
if (code.length === 6) {
|
|
@@ -13,16 +13,20 @@ import { useResendVerificationCode } from "../../../provider/index.js";
|
|
|
13
13
|
import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
|
|
14
14
|
const VerificationCode = ({ authInfo, onResend, onSubmit, status, error }) => {
|
|
15
15
|
const inputRef = useRef(null);
|
|
16
|
+
const resendTimerRef = useRef();
|
|
16
17
|
const [code, setCode] = useState("");
|
|
17
18
|
const [isPending, setIsPending] = useState(status === "pending");
|
|
18
19
|
const [codeError, setCodeError] = useState(null);
|
|
19
20
|
const [resendDisabled, setResendDisabled] = useState(false);
|
|
20
21
|
const isEmail = (authInfo == null ? void 0 : authInfo.authType) === "email";
|
|
21
22
|
useEffect(() => {
|
|
22
|
-
setTimeout(() => {
|
|
23
|
+
const timerId = setTimeout(() => {
|
|
23
24
|
var _a, _b, _c, _d;
|
|
24
25
|
(_d = (_c = (_b = (_a = inputRef.current) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.querySelectorAll("input")) == null ? void 0 : _c[0]) == null ? void 0 : _d.focus();
|
|
25
26
|
}, 10);
|
|
27
|
+
return () => {
|
|
28
|
+
clearTimeout(timerId);
|
|
29
|
+
};
|
|
26
30
|
}, []);
|
|
27
31
|
useEffect(() => {
|
|
28
32
|
setCodeError(null);
|
|
@@ -41,12 +45,19 @@ const VerificationCode = ({ authInfo, onResend, onSubmit, status, error }) => {
|
|
|
41
45
|
try {
|
|
42
46
|
onResend();
|
|
43
47
|
} finally {
|
|
44
|
-
setTimeout(() => {
|
|
48
|
+
resendTimerRef.current = setTimeout(() => {
|
|
45
49
|
setResendDisabled(false);
|
|
46
50
|
}, 3e3);
|
|
47
51
|
}
|
|
48
52
|
}
|
|
49
53
|
});
|
|
54
|
+
useEffect(() => {
|
|
55
|
+
return () => {
|
|
56
|
+
if (resendTimerRef.current) {
|
|
57
|
+
clearTimeout(resendTimerRef.current);
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
}, []);
|
|
50
61
|
const handleCodeInput = (e) => {
|
|
51
62
|
setCode(e.detail.value.trim());
|
|
52
63
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import "../../../chunk-MMUBH76A.js";
|
|
3
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
-
import { safeStyled } from "@getpara/react-common";
|
|
4
|
+
import { safeStyled, WalletTypeIcon } from "@getpara/react-common";
|
|
5
5
|
import { useModalStore } from "../../stores/index.js";
|
|
6
6
|
import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
|
|
7
7
|
import { truncateAddress } from "@getpara/web-sdk";
|
|
@@ -9,7 +9,6 @@ import { ModalStep } from "../../utils/steps.js";
|
|
|
9
9
|
import { useWalletState } from "../../../provider/index.js";
|
|
10
10
|
import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
|
|
11
11
|
import { useStore } from "../../../provider/stores/useStore.js";
|
|
12
|
-
import { WalletTypeIcon } from "../common.js";
|
|
13
12
|
const ExternalWalletCard = ({
|
|
14
13
|
address,
|
|
15
14
|
showAddFunds
|
|
@@ -4,10 +4,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
4
4
|
import { useEffect, useRef } from "react";
|
|
5
5
|
import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
|
|
6
6
|
import { useDropdownPosition } from "../AuthInput/hooks/useDropdownPosition.js";
|
|
7
|
-
import { safeStyled, useCopyToClipboard } from "@getpara/react-common";
|
|
7
|
+
import { safeStyled, useCopyToClipboard, WalletTypeIcon as WalletTypeIconBase } from "@getpara/react-common";
|
|
8
8
|
import { useAccount, useWallet, useWalletState } from "../../../provider/index.js";
|
|
9
9
|
import { CpslButton, CpslIcon, CpslSelect, CpslSelectItem, CpslText } from "@getpara/react-components";
|
|
10
|
-
import * as common from "../common.js";
|
|
11
10
|
const getValue = (id, type) => {
|
|
12
11
|
return id && type ? `${id}~${type}` : void 0;
|
|
13
12
|
};
|
|
@@ -139,7 +138,7 @@ const SelectContainer = safeStyled.div`
|
|
|
139
138
|
border-radius: var(--cpsl-border-radius-tile-button);
|
|
140
139
|
background-color: var(--cpsl-color-background-4);
|
|
141
140
|
`;
|
|
142
|
-
const WalletTypeIcon = safeStyled(
|
|
141
|
+
const WalletTypeIcon = safeStyled(WalletTypeIconBase)`
|
|
143
142
|
--border: 1px solid var(--cpsl-color-background-8);
|
|
144
143
|
--background: var(--cpsl-color-background-0);
|
|
145
144
|
--border-radius: 4px;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import { TExternalWallet, TLinkedAccountType, TNetwork, TOnRampAsset, TWalletType } from '@getpara/web-sdk';
|
|
1
|
+
import { CpslInput, CpslText, CpslTileButton } from '@getpara/react-components';
|
|
2
|
+
import { TLinkedAccountType, TNetwork, TOnRampAsset } from '@getpara/web-sdk';
|
|
4
3
|
import { ComponentProps, PropsWithChildren } from 'react';
|
|
5
4
|
export declare const SpinnerContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
6
5
|
export declare const QRContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
@@ -38,11 +37,6 @@ export declare function NetworkIcon({ network, size }: {
|
|
|
38
37
|
network?: TNetwork;
|
|
39
38
|
size?: string;
|
|
40
39
|
}): import("react/jsx-runtime").JSX.Element;
|
|
41
|
-
export declare function WalletTypeIcon({ className, walletType, externalWallet, ...props }: {
|
|
42
|
-
className?: string;
|
|
43
|
-
walletType: TWalletType;
|
|
44
|
-
externalWallet?: TExternalWallet | CommonWallet | string;
|
|
45
|
-
} & Parameters<typeof CpslIcon>[0]): import("react/jsx-runtime").JSX.Element;
|
|
46
40
|
export declare const ErrorContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
47
41
|
export declare const ErrorIcon: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
|
|
48
42
|
ref?: ((instance: any) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<any> | null | undefined;
|
|
@@ -6,8 +6,7 @@ import {
|
|
|
6
6
|
} from "../../chunk-MMUBH76A.js";
|
|
7
7
|
import { jsx } from "react/jsx-runtime";
|
|
8
8
|
import { CpslIcon, CpslInput, CpslSelect, CpslSelectItem, CpslText, CpslTileButton } from "@getpara/react-components";
|
|
9
|
-
import { ACCOUNT_TYPES, safeStyled } from "@getpara/react-common";
|
|
10
|
-
import { MOBILE_SIZE, NETWORKS, ON_RAMP_ASSETS, WALLET_TYPES_METADATA } from "../constants/constants.js";
|
|
9
|
+
import { ACCOUNT_TYPES, safeStyled, MOBILE_SIZE, NETWORKS, ON_RAMP_ASSETS } from "@getpara/react-common";
|
|
11
10
|
import { useStore } from "../../provider/stores/useStore.js";
|
|
12
11
|
import { useEffect, useRef, useState } from "react";
|
|
13
12
|
const SpinnerContainer = safeStyled.div`
|
|
@@ -167,40 +166,6 @@ function NetworkIcon({ network, size }) {
|
|
|
167
166
|
}
|
|
168
167
|
);
|
|
169
168
|
}
|
|
170
|
-
function WalletTypeIcon(_c) {
|
|
171
|
-
var _d = _c, {
|
|
172
|
-
className,
|
|
173
|
-
walletType,
|
|
174
|
-
externalWallet
|
|
175
|
-
} = _d, props = __objRest(_d, [
|
|
176
|
-
"className",
|
|
177
|
-
"walletType",
|
|
178
|
-
"externalWallet"
|
|
179
|
-
]);
|
|
180
|
-
var _a, _b;
|
|
181
|
-
const isDark = useStore((state) => {
|
|
182
|
-
var _a2, _b2;
|
|
183
|
-
return ((_b2 = (_a2 = state.modalConfig) == null ? void 0 : _a2.theme) == null ? void 0 : _b2.mode) === "dark";
|
|
184
|
-
});
|
|
185
|
-
if (typeof externalWallet === "object" && "iconUrl" in externalWallet) {
|
|
186
|
-
return /* @__PURE__ */ jsx(CpslIcon, __spreadProps(__spreadValues({ className, src: externalWallet.iconUrl }, props), { inset: (_a = props.inset) != null ? _a : "10%" }));
|
|
187
|
-
}
|
|
188
|
-
const data = (externalWallet ? ACCOUNT_TYPES[externalWallet] : WALLET_TYPES_METADATA[walletType]) || {
|
|
189
|
-
icon: "wallet02",
|
|
190
|
-
isDark: true
|
|
191
|
-
};
|
|
192
|
-
props.size;
|
|
193
|
-
return /* @__PURE__ */ jsx(
|
|
194
|
-
CpslIcon,
|
|
195
|
-
__spreadProps(__spreadValues({
|
|
196
|
-
className,
|
|
197
|
-
icon: data.icon,
|
|
198
|
-
invert: isDark && data.isDark
|
|
199
|
-
}, props), {
|
|
200
|
-
inset: (_b = props.inset) != null ? _b : "10%"
|
|
201
|
-
})
|
|
202
|
-
);
|
|
203
|
-
}
|
|
204
169
|
const ErrorContainer = safeStyled.div`
|
|
205
170
|
display: flex;
|
|
206
171
|
align-items: center;
|
|
@@ -326,6 +291,5 @@ export {
|
|
|
326
291
|
QRContainer,
|
|
327
292
|
SpinnerContainer,
|
|
328
293
|
StepContainer,
|
|
329
|
-
StyledCpslTileButton
|
|
330
|
-
WalletTypeIcon
|
|
294
|
+
StyledCpslTileButton
|
|
331
295
|
};
|
package/dist/modal/index.d.ts
CHANGED
|
@@ -3,6 +3,6 @@ export type { ParaModalProps, ParaModalHandle, ParaModalTheme } from './types/mo
|
|
|
3
3
|
export { ModalStep, type ModalStepProp } from './utils/steps.js';
|
|
4
4
|
export { AuthLayout } from './types/modalProps.js';
|
|
5
5
|
export * from './utils/openPopup.js';
|
|
6
|
-
export { ON_RAMP_PROVIDERS, ON_RAMP_ASSETS, NETWORKS, getAssetIcon, getAssetCode, getNetworkIcon, getNetworkName, } from '
|
|
6
|
+
export { ON_RAMP_PROVIDERS, ON_RAMP_ASSETS, NETWORKS, getAssetIcon, getAssetCode, getNetworkIcon, getNetworkName, } from '@getpara/react-common';
|
|
7
7
|
export { SaveRecoverySecret } from './components/RecoverySecretStep/RecoverySecretStep.js';
|
|
8
8
|
export * from './utils/validateOnRampConfig.js';
|
package/dist/modal/index.js
CHANGED
|
@@ -12,7 +12,7 @@ import {
|
|
|
12
12
|
getAssetCode,
|
|
13
13
|
getNetworkIcon,
|
|
14
14
|
getNetworkName
|
|
15
|
-
} from "
|
|
15
|
+
} from "@getpara/react-common";
|
|
16
16
|
import { SaveRecoverySecret } from "./components/RecoverySecretStep/RecoverySecretStep.js";
|
|
17
17
|
export * from "./utils/validateOnRampConfig.js";
|
|
18
18
|
export {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import "../../chunk-MMUBH76A.js";
|
|
3
|
-
import { EMAIL_REGEX } from "
|
|
3
|
+
import { EMAIL_REGEX } from "@getpara/react-common";
|
|
4
4
|
import { formatPhoneNumber } from "@getpara/web-sdk";
|
|
5
5
|
function isCcMatch(countryCode, option) {
|
|
6
6
|
return countryCode === "+1" ? option.selectedLabel === "US" : option.value === countryCode;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import "../../chunk-MMUBH76A.js";
|
|
3
|
-
import { getNetworkName } from "
|
|
3
|
+
import { getNetworkName } from "@getpara/react-common";
|
|
4
4
|
import { format } from "date-fns";
|
|
5
5
|
const formatNetworkList = (networks) => {
|
|
6
6
|
return networks.length === 1 ? getNetworkName(networks[0]) : `${networks.map((id) => getNetworkName(id)).slice(0, -1).join(", ")}${networks.length > 2 ? "," : ""} and ${getNetworkName(networks[networks.length - 1])}`;
|
|
@@ -109,6 +109,11 @@ const ParaProviderMin = forwardRef(({ children, paraClientConfig, callbacks, con
|
|
|
109
109
|
}
|
|
110
110
|
setClient(newClient);
|
|
111
111
|
}, [paraClientConfig]);
|
|
112
|
+
useEffect(() => {
|
|
113
|
+
if (client) {
|
|
114
|
+
client.portalTheme = paraModalConfig == null ? void 0 : paraModalConfig.theme;
|
|
115
|
+
}
|
|
116
|
+
}, [paraModalConfig == null ? void 0 : paraModalConfig.theme, client]);
|
|
112
117
|
useEffect(() => {
|
|
113
118
|
if (client && !client.isReady) {
|
|
114
119
|
client.ready().then(() => {
|
|
@@ -26,7 +26,6 @@ const getEmbeddedAccount = (para, isFullyLoggedIn) => __async(void 0, null, func
|
|
|
26
26
|
try {
|
|
27
27
|
authMethods = yield para.supportedUserAuthMethods();
|
|
28
28
|
} catch (error) {
|
|
29
|
-
console.error("Error getting supported auth methods:", error);
|
|
30
29
|
authMethods = /* @__PURE__ */ new Set();
|
|
31
30
|
}
|
|
32
31
|
const value = {
|
|
@@ -46,3 +46,4 @@ export declare const verifyFarcasterLink: (_?: import("@getpara/core-sdk").defau
|
|
|
46
46
|
export declare const verifyTelegramLink: (_?: import("@getpara/core-sdk").default, __?: import("@getpara/core-sdk/dist/types/types/methods.js").TelegramParams | undefined) => Promise<import("@getpara/shared").LinkedAccounts>;
|
|
47
47
|
export declare const verifyOAuthLink: (_?: import("@getpara/core-sdk").default, __?: import("@getpara/core-sdk/dist/types/types/methods.js").OAuthParams | undefined) => Promise<import("@getpara/shared").LinkedAccounts>;
|
|
48
48
|
export declare const verifyExternalWalletLink: (_?: import("@getpara/core-sdk").default, __?: Omit<import("@getpara/shared").VerifyExternalWalletParams, "externalWallet"> | undefined) => Promise<import("@getpara/shared").LinkedAccounts>;
|
|
49
|
+
export declare const exportPrivateKey: import("./utils.js").CoreAction<"exportPrivateKey">;
|
|
@@ -39,6 +39,7 @@ const verifyFarcasterLink = generateInternalAction("verifyFarcasterLink");
|
|
|
39
39
|
const verifyTelegramLink = generateInternalAction("verifyTelegramLink");
|
|
40
40
|
const verifyOAuthLink = generateInternalAction("verifyOAuthLink");
|
|
41
41
|
const verifyExternalWalletLink = generateInternalAction("verifyExternalWalletLink");
|
|
42
|
+
const exportPrivateKey = generateCoreAction("exportPrivateKey");
|
|
42
43
|
export {
|
|
43
44
|
accountLinkInProgress,
|
|
44
45
|
addCredential,
|
|
@@ -49,6 +50,7 @@ export {
|
|
|
49
50
|
createWallet,
|
|
50
51
|
createWalletPerType,
|
|
51
52
|
enable2fa,
|
|
53
|
+
exportPrivateKey,
|
|
52
54
|
getLinkedAccounts,
|
|
53
55
|
getWalletBalance,
|
|
54
56
|
hasPregenWallet,
|
|
@@ -27,4 +27,5 @@ export { useSignMessage } from './useSignMessage.js';
|
|
|
27
27
|
export { useSignTransaction } from './useSignTransaction.js';
|
|
28
28
|
export { useIssueJwt } from './useIssueJwt.js';
|
|
29
29
|
export { useAddAuthMethod } from './useAddAuthMethod.js';
|
|
30
|
+
export { useExportPrivateKey } from './useExportPrivateKey.js';
|
|
30
31
|
export declare const useCreateGuestWalletsState: import("../../types/utils.js").CoreMethodMutationStateHook<"createGuestWallets">;
|
|
@@ -30,6 +30,7 @@ import { useSignMessage } from "./useSignMessage.js";
|
|
|
30
30
|
import { useSignTransaction } from "./useSignTransaction.js";
|
|
31
31
|
import { useIssueJwt } from "./useIssueJwt.js";
|
|
32
32
|
import { useAddAuthMethod } from "./useAddAuthMethod.js";
|
|
33
|
+
import { useExportPrivateKey } from "./useExportPrivateKey.js";
|
|
33
34
|
const useCreateGuestWalletsState = generateStateHook("createGuestWallets");
|
|
34
35
|
export {
|
|
35
36
|
useAddAuthMethod,
|
|
@@ -41,6 +42,7 @@ export {
|
|
|
41
42
|
useCreateWallet,
|
|
42
43
|
useCreateWalletPerType,
|
|
43
44
|
useEnable2fa,
|
|
45
|
+
useExportPrivateKey,
|
|
44
46
|
useHasPregenWallet,
|
|
45
47
|
useIssueJwt,
|
|
46
48
|
useKeepSessionAlive,
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export declare const EXPORT_PRIVATE_KEY_KEY = "EXPORT_PRIVATE_KEY";
|
|
2
|
+
/**
|
|
3
|
+
* React hook for the `exportPrivateKey` mutation.
|
|
4
|
+
*
|
|
5
|
+
* @example
|
|
6
|
+
* const { mutateAsync: exportPrivateKeyAsync } = useExportPrivateKey();
|
|
7
|
+
* await exportPrivateKeyAsync({ walletId: '...' });
|
|
8
|
+
*/
|
|
9
|
+
export declare const useExportPrivateKey: () => import("@tanstack/react-query").UseMutationResult<{
|
|
10
|
+
popupWindow?: Window;
|
|
11
|
+
url: string;
|
|
12
|
+
}, Error, {
|
|
13
|
+
walletId?: string;
|
|
14
|
+
shouldOpenPopup?: boolean;
|
|
15
|
+
} | undefined, unknown>;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import {
|
|
3
|
+
__async,
|
|
4
|
+
__spreadValues
|
|
5
|
+
} from "../../../chunk-MMUBH76A.js";
|
|
6
|
+
import { useMutation } from "@tanstack/react-query";
|
|
7
|
+
import { useClient } from "../utils/index.js";
|
|
8
|
+
import { exportPrivateKey } from "../../actions/index.js";
|
|
9
|
+
import { useWallet } from "../queries/useWallet.js";
|
|
10
|
+
const EXPORT_PRIVATE_KEY_KEY = "EXPORT_PRIVATE_KEY";
|
|
11
|
+
const useExportPrivateKey = () => {
|
|
12
|
+
const para = useClient();
|
|
13
|
+
const { data: activeWallet } = useWallet();
|
|
14
|
+
return useMutation({
|
|
15
|
+
mutationKey: [EXPORT_PRIVATE_KEY_KEY],
|
|
16
|
+
mutationFn: (args) => __async(void 0, null, function* () {
|
|
17
|
+
try {
|
|
18
|
+
const result = yield exportPrivateKey(para, __spreadValues({
|
|
19
|
+
walletId: activeWallet == null ? void 0 : activeWallet.id,
|
|
20
|
+
shouldOpenPopup: true
|
|
21
|
+
}, args));
|
|
22
|
+
return result;
|
|
23
|
+
} catch (error) {
|
|
24
|
+
throw error;
|
|
25
|
+
}
|
|
26
|
+
})
|
|
27
|
+
});
|
|
28
|
+
};
|
|
29
|
+
export {
|
|
30
|
+
EXPORT_PRIVATE_KEY_KEY,
|
|
31
|
+
useExportPrivateKey
|
|
32
|
+
};
|
|
@@ -695,11 +695,17 @@ function AuthProvider({
|
|
|
695
695
|
]
|
|
696
696
|
);
|
|
697
697
|
useEffect(() => {
|
|
698
|
+
let timerId;
|
|
698
699
|
if (!!authStepRoute && refs.currentStep.current !== authStepRoute) {
|
|
699
|
-
setTimeout(() => {
|
|
700
|
+
timerId = setTimeout(() => {
|
|
700
701
|
setStep(authStepRoute);
|
|
701
702
|
}, 200);
|
|
702
703
|
}
|
|
704
|
+
return () => {
|
|
705
|
+
if (timerId) {
|
|
706
|
+
clearTimeout(timerId);
|
|
707
|
+
}
|
|
708
|
+
};
|
|
703
709
|
}, [authStepRoute]);
|
|
704
710
|
useEffect(() => {
|
|
705
711
|
refs.currentStep.current = currentStep;
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@getpara/react-sdk-lite",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.65",
|
|
4
4
|
"bin": {
|
|
5
5
|
"setup-para": "dist/cli/cli.mjs"
|
|
6
6
|
},
|
|
7
7
|
"dependencies": {
|
|
8
|
-
"@getpara/react-common": "2.0.0-alpha.
|
|
9
|
-
"@getpara/react-components": "2.0.0-alpha.
|
|
10
|
-
"@getpara/web-sdk": "2.0.0-alpha.
|
|
8
|
+
"@getpara/react-common": "2.0.0-alpha.65",
|
|
9
|
+
"@getpara/react-components": "2.0.0-alpha.65",
|
|
10
|
+
"@getpara/web-sdk": "2.0.0-alpha.65",
|
|
11
11
|
"date-fns": "^3.6.0",
|
|
12
12
|
"framer-motion": "^11.3.31",
|
|
13
13
|
"libphonenumber-js": "^1.11.7",
|
|
@@ -16,9 +16,9 @@
|
|
|
16
16
|
"zustand-sync-tabs": "^0.2.2"
|
|
17
17
|
},
|
|
18
18
|
"devDependencies": {
|
|
19
|
-
"@getpara/cosmos-wallet-connectors": "2.0.0-alpha.
|
|
20
|
-
"@getpara/evm-wallet-connectors": "2.0.0-alpha.
|
|
21
|
-
"@getpara/solana-wallet-connectors": "2.0.0-alpha.
|
|
19
|
+
"@getpara/cosmos-wallet-connectors": "2.0.0-alpha.65",
|
|
20
|
+
"@getpara/evm-wallet-connectors": "2.0.0-alpha.65",
|
|
21
|
+
"@getpara/solana-wallet-connectors": "2.0.0-alpha.65",
|
|
22
22
|
"@tanstack/react-query": "^5.74.0",
|
|
23
23
|
"@testing-library/dom": "^10.4.0",
|
|
24
24
|
"@testing-library/react": "^16.3.0",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"package.json",
|
|
39
39
|
"styles.css"
|
|
40
40
|
],
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "9945ab14944c22851eb81c5bbb831b23bf7eaf2a",
|
|
42
42
|
"main": "dist/index.js",
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"@tanstack/react-query": ">=5.0.0",
|
|
@@ -1,35 +0,0 @@
|
|
|
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 '@getpara/react-common';
|
|
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): "key" | "phone" | "farcaster" | "telegram" | "discord" | "x" | "search" | "wallet" | "cosmos" | "solana" | "para" | "walletConnect" | "close" | "copy" | "safe" | "stripeBrand" | "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" | "clubhouseBrand" | "clubhouse" | "code" | "coinbase" | "copy07" | "cosmosCircle" | "cosmostation" | "creditCard02" | "creditCard" | "cube03" | "cubeOutline" | "cube" | "currencyDollar" | "decentBrand" | "decent" | "dell" | "discordBrand" | "dot" | "dotsSquare" | "dots" | "downloadCloud" | "download" | "dribbbleBrand" | "dribbble" | "earth" | "edit02" | "emptyCircle" | "ethCircle" | "ethereum" | "eyeOff" | "eye" | "facebookBrand" | "facebook" | "farcasterBrand" | "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" | "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" | "passcode" | "phantom" | "pintrestBrand" | "pintrest" | "plusCircle" | "plus" | "polygonBrand" | "polygon" | "puzzlePiece" | "qrCode02" | "qrCode" | "rabby" | "rainbow" | "rampNetworkBrand" | "rampNetwork" | "redditBrand" | "reddit" | "refresh" | "samsung" | "send" | "settings" | "share" | "shield" | "shuffle" | "signalBrand" | "signal" | "sliders" | "snapchatBrand" | "snapchat" | "solanaCircle" | "solflare" | "spacingHeight" | "star04Filled" | "star05" | "stars01Filled" | "stars02" | "stars" | "stopSquare" | "telegramBrand" | "tetherBrand" | "tikTokBrand" | "tikTok" | "trash" | "tumblrBrand" | "tumblr" | "twitterBrand" | "twitter" | "usdcBrand" | "user01" | "userCircle" | "userPlus" | "user" | "valora" | "wallet02" | "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";
|
|
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 {};
|
|
@@ -1,148 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import {
|
|
3
|
-
__spreadProps,
|
|
4
|
-
__spreadValues
|
|
5
|
-
} from "../../chunk-MMUBH76A.js";
|
|
6
|
-
import { OnRampMethod, OnRampProvider } from "@getpara/core-sdk";
|
|
7
|
-
const PARA_CONNECT = "https://connect.getpara.com/";
|
|
8
|
-
const PARA_TERMS_AND_CONDITIONS = "https://getpara.com/terms";
|
|
9
|
-
const ON_RAMP_PROVIDERS = {
|
|
10
|
-
[OnRampProvider.STRIPE]: {
|
|
11
|
-
name: "Stripe",
|
|
12
|
-
feeLower: 0.99,
|
|
13
|
-
feeUpper: 4.49,
|
|
14
|
-
methods: [OnRampMethod.ACH, OnRampMethod.DEBIT, OnRampMethod.CREDIT],
|
|
15
|
-
icon: "stripeBrand",
|
|
16
|
-
backgroundColors: ["#6772E5", "#808AF4"]
|
|
17
|
-
},
|
|
18
|
-
[OnRampProvider.RAMP]: {
|
|
19
|
-
name: "Ramp",
|
|
20
|
-
feeLower: 0.99,
|
|
21
|
-
feeUpper: 4.49,
|
|
22
|
-
methods: [OnRampMethod.ACH, OnRampMethod.DEBIT, OnRampMethod.CREDIT],
|
|
23
|
-
icon: "rampNetworkBrand",
|
|
24
|
-
backgroundColors: ["#21BF73", "#3AE492"]
|
|
25
|
-
},
|
|
26
|
-
[OnRampProvider.MOONPAY]: {
|
|
27
|
-
name: "MoonPay",
|
|
28
|
-
feeLower: 1,
|
|
29
|
-
feeUpper: 4.5,
|
|
30
|
-
methods: [OnRampMethod.ACH, OnRampMethod.DEBIT, OnRampMethod.CREDIT],
|
|
31
|
-
icon: "moonpayBrand",
|
|
32
|
-
backgroundColors: ["#7715F5", "#9647fd"]
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
const ICON_TYPES = {
|
|
36
|
-
ethereum: { isDark: true },
|
|
37
|
-
usdcBrand: { isCircular: true },
|
|
38
|
-
arbitrumBrand: { isCircular: true },
|
|
39
|
-
baseBrand: { isCircular: true },
|
|
40
|
-
optimismBrand: { isCircular: true },
|
|
41
|
-
cosmos: { isCircular: true, isDark: true },
|
|
42
|
-
celoBrand: { isCircular: true },
|
|
43
|
-
tetherBrand: { isCircular: true }
|
|
44
|
-
};
|
|
45
|
-
const WALLET_TYPES_METADATA = {
|
|
46
|
-
EVM: { name: "EVM", icon: "ethereum", isDark: true },
|
|
47
|
-
SOLANA: { name: "Solana", icon: "solana" },
|
|
48
|
-
COSMOS: { name: "Cosmos", icon: "cosmos", isCircular: true, isDark: true }
|
|
49
|
-
};
|
|
50
|
-
const NETWORKS = Object.entries({
|
|
51
|
-
["ETHEREUM"]: { name: "Ethereum", icon: "ethereum" },
|
|
52
|
-
["SEPOLIA"]: { name: "Sepolia", icon: "ethereum" },
|
|
53
|
-
["ARBITRUM"]: { name: "Arbitrum", icon: "arbitrumBrand" },
|
|
54
|
-
["BASE"]: { name: "Base", icon: "baseBrand" },
|
|
55
|
-
["OPTIMISM"]: { name: "Optimism", icon: "optimismBrand" },
|
|
56
|
-
["POLYGON"]: { name: "Polygon", icon: "polygonBrand" },
|
|
57
|
-
["SOLANA"]: { name: "Solana", icon: "solana" },
|
|
58
|
-
["COSMOS"]: { name: "Cosmos", icon: "cosmos" },
|
|
59
|
-
["CELO"]: { name: "Celo", icon: "celoBrand" },
|
|
60
|
-
["SOLANA_DEVNET"]: { name: "Solana Devnet", icon: "solana" },
|
|
61
|
-
["NOBLE"]: { name: "Noble", icon: "nobleBrand" },
|
|
62
|
-
["BERACHAIN"]: { name: "Berachain", icon: "beraBrand" }
|
|
63
|
-
}).reduce((acc, [key, entry]) => {
|
|
64
|
-
return __spreadProps(__spreadValues({}, acc), {
|
|
65
|
-
[key]: __spreadValues(__spreadValues({}, entry), ICON_TYPES[entry.icon])
|
|
66
|
-
});
|
|
67
|
-
}, {});
|
|
68
|
-
const ON_RAMP_ASSETS = Object.entries({
|
|
69
|
-
["ETHEREUM"]: { name: "Ethereum", code: "ETH", icon: "ethereum" },
|
|
70
|
-
["USDC"]: { name: "USD Coin", code: "USDC", icon: "usdcBrand" },
|
|
71
|
-
["POLYGON"]: { name: "Polygon", code: "POL", icon: "polygonBrand" },
|
|
72
|
-
["SOLANA"]: { name: "Solana", code: "SOL", icon: "solana" },
|
|
73
|
-
["ATOM"]: { name: "Atom", code: "ATOM", icon: "cosmos" },
|
|
74
|
-
["CELO"]: { name: "Celo", code: "CELO", icon: "celoBrand" },
|
|
75
|
-
["TETHER"]: { name: "Tether", code: "USDT", icon: "tetherBrand" },
|
|
76
|
-
["CUSD"]: { name: "Celo Dollar", code: "CUSD", icon: "celoBrand" },
|
|
77
|
-
["CEUR"]: { name: "Celo Euro", code: "CEUR", icon: "celoBrand" },
|
|
78
|
-
["CREAL"]: { name: "Celo Real", code: "CREAL", icon: "celoBrand" },
|
|
79
|
-
["BERA"]: { name: "Berachain", code: "BERA", icon: "beraBrand" }
|
|
80
|
-
}).reduce((acc, [key, entry]) => {
|
|
81
|
-
return __spreadProps(__spreadValues({}, acc), {
|
|
82
|
-
[key]: __spreadValues(__spreadValues({}, entry), ICON_TYPES[entry.icon])
|
|
83
|
-
});
|
|
84
|
-
}, {});
|
|
85
|
-
function getNetworkName(str) {
|
|
86
|
-
var _a, _b;
|
|
87
|
-
return (_b = (_a = NETWORKS[str]) == null ? void 0 : _a.name) != null ? _b : `${str[0]}${str.slice(1).toLowerCase()}`;
|
|
88
|
-
}
|
|
89
|
-
function getNetworkIcon(str) {
|
|
90
|
-
var _a, _b;
|
|
91
|
-
return (_b = (_a = NETWORKS[str]) == null ? void 0 : _a.icon) != null ? _b : "globe";
|
|
92
|
-
}
|
|
93
|
-
function getAssetCode(str) {
|
|
94
|
-
var _a, _b;
|
|
95
|
-
return (_b = (_a = ON_RAMP_ASSETS[str]) == null ? void 0 : _a.code) != null ? _b : str;
|
|
96
|
-
}
|
|
97
|
-
function getAssetName(str) {
|
|
98
|
-
var _a, _b;
|
|
99
|
-
return (_b = (_a = ON_RAMP_ASSETS[str]) == null ? void 0 : _a.name) != null ? _b : str;
|
|
100
|
-
}
|
|
101
|
-
function getAssetIcon(str) {
|
|
102
|
-
var _a, _b;
|
|
103
|
-
return (_b = (_a = ON_RAMP_ASSETS[str]) == null ? void 0 : _a.icon) != null ? _b : "emptyCircle";
|
|
104
|
-
}
|
|
105
|
-
const MOBILE_SIZE = 480;
|
|
106
|
-
const NETWORK_NOT_SUPPORTED_ERROR = "network not supported";
|
|
107
|
-
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,}))$/;
|
|
108
|
-
const BODY_MOTION_VARIANTS = {
|
|
109
|
-
enter: (direction) => {
|
|
110
|
-
return {
|
|
111
|
-
scale: direction > 0 ? 0.9 : 1.1,
|
|
112
|
-
opacity: 0
|
|
113
|
-
};
|
|
114
|
-
},
|
|
115
|
-
center: {
|
|
116
|
-
scale: 1,
|
|
117
|
-
opacity: 1
|
|
118
|
-
},
|
|
119
|
-
exit: (direction) => {
|
|
120
|
-
return {
|
|
121
|
-
scale: direction < 0 ? 0.9 : 1.1,
|
|
122
|
-
opacity: 0
|
|
123
|
-
};
|
|
124
|
-
}
|
|
125
|
-
};
|
|
126
|
-
const BODY_TRANSITION = {
|
|
127
|
-
duration: 0.2
|
|
128
|
-
};
|
|
129
|
-
const SDK_VERSION = "2.0.0-alpha.64";
|
|
130
|
-
export {
|
|
131
|
-
BODY_MOTION_VARIANTS,
|
|
132
|
-
BODY_TRANSITION,
|
|
133
|
-
EMAIL_REGEX,
|
|
134
|
-
MOBILE_SIZE,
|
|
135
|
-
NETWORKS,
|
|
136
|
-
NETWORK_NOT_SUPPORTED_ERROR,
|
|
137
|
-
ON_RAMP_ASSETS,
|
|
138
|
-
ON_RAMP_PROVIDERS,
|
|
139
|
-
PARA_CONNECT,
|
|
140
|
-
PARA_TERMS_AND_CONDITIONS,
|
|
141
|
-
SDK_VERSION,
|
|
142
|
-
WALLET_TYPES_METADATA,
|
|
143
|
-
getAssetCode,
|
|
144
|
-
getAssetIcon,
|
|
145
|
-
getAssetName,
|
|
146
|
-
getNetworkIcon,
|
|
147
|
-
getNetworkName
|
|
148
|
-
};
|