@getpara/react-sdk-lite 2.11.0 → 2.12.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.
- package/dist/modal/ParaModal.js +12 -1
- package/dist/modal/components/Account/AccountSend/context.js +14 -1
- package/dist/modal/components/Account/AccountWallet.js +1 -6
- package/dist/modal/components/Account/AccountWalletSelect.js +5 -12
- package/dist/modal/components/AuthInput/hooks/useDropdownPosition.d.ts +1 -1
- package/dist/modal/components/AuthInput/hooks/useDropdownPosition.js +25 -17
- package/dist/modal/components/AuthOptions/AuthOptions.js +1 -1
- package/dist/modal/components/Controls/ChainSelect.js +2 -3
- package/dist/modal/components/ExternalWalletStep/ExternalWalletStep.js +1 -1
- package/dist/modal/components/WalletSelectOld/WalletSelectOld.js +6 -13
- package/dist/modal/components/common.d.ts +5 -0
- package/dist/modal/components/common.js +17 -10
- package/dist/modal/hooks/useFarcasterLogin.js +1 -1
- package/dist/modal/hooks/useTelegramLogin.js +1 -1
- package/dist/modal/stores/modal/useModalStore.d.ts +1 -0
- package/dist/modal/stores/modal/useModalStore.js +2 -1
- package/dist/provider/hooks/mutations/utils.js +1 -1
- package/dist/provider/hooks/utils/useAutoSessionKeepAlive.js +1 -1
- package/dist/provider/hooks/utils/useModal.d.ts +2 -1
- package/dist/provider/hooks/utils/useModal.js +10 -3
- package/dist/provider/providers/ExternalWalletProvider.js +2 -2
- package/package.json +8 -8
package/dist/modal/ParaModal.js
CHANGED
|
@@ -29,6 +29,7 @@ const ParaModal = forwardRef((props, ref) => {
|
|
|
29
29
|
const storedModalConfig = useStore((state) => state.modalConfig);
|
|
30
30
|
const refs = useStore((state) => state.refs);
|
|
31
31
|
const modalContentRef = useRef(null);
|
|
32
|
+
const modalRef = useRef(null);
|
|
32
33
|
const modalRefs = useModalStore((state) => state.refs);
|
|
33
34
|
const flow = useModalStore((state) => state.flow);
|
|
34
35
|
const currentStep = useModalStore((state) => state.step);
|
|
@@ -111,7 +112,7 @@ const ParaModal = forwardRef((props, ref) => {
|
|
|
111
112
|
onClose,
|
|
112
113
|
defaultAuthIdentifier
|
|
113
114
|
}), rest),
|
|
114
|
-
reactSdkVersion: "2.
|
|
115
|
+
reactSdkVersion: "2.12.0"
|
|
115
116
|
});
|
|
116
117
|
} catch (e) {
|
|
117
118
|
}
|
|
@@ -273,6 +274,15 @@ const ParaModal = forwardRef((props, ref) => {
|
|
|
273
274
|
setStep(ModalStep.LOGIN_DONE);
|
|
274
275
|
}
|
|
275
276
|
});
|
|
277
|
+
useEffect(() => {
|
|
278
|
+
var _a2;
|
|
279
|
+
if ((_a2 = modalRef.current) == null ? void 0 : _a2.shadowRoot) {
|
|
280
|
+
const container = modalRef.current.shadowRoot.getElementById("modal-container");
|
|
281
|
+
if (container && modalRefs.modalContainer) {
|
|
282
|
+
modalRefs.modalContainer.current = container;
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
}, [isModalMounted]);
|
|
276
286
|
if (!para) {
|
|
277
287
|
console.error("A Para instance is required.");
|
|
278
288
|
return null;
|
|
@@ -297,6 +307,7 @@ const ParaModal = forwardRef((props, ref) => {
|
|
|
297
307
|
return /* @__PURE__ */ jsx(
|
|
298
308
|
StyledAuthModal,
|
|
299
309
|
{
|
|
310
|
+
ref: modalRef,
|
|
300
311
|
enterTransitionDuration: DEFAULTS.ANIMATION_DURATION,
|
|
301
312
|
exitTransitionDuration: DEFAULTS.ANIMATION_DURATION,
|
|
302
313
|
open: isOpen,
|
|
@@ -61,7 +61,8 @@ function AccountSendProvider({ children, step }) {
|
|
|
61
61
|
var _a2;
|
|
62
62
|
return (_a2 = state.modalConfig) == null ? void 0 : _a2.balances;
|
|
63
63
|
});
|
|
64
|
-
const
|
|
64
|
+
const [refetchTrigger, setRefetchTrigger] = useState(0);
|
|
65
|
+
const { data: balances } = useProfileBalance({ isComprehensive: true, refetchTrigger });
|
|
65
66
|
const { selectedWallet, setSelectedWallet } = useWalletState();
|
|
66
67
|
const [estimate, setEstimate] = useState(null);
|
|
67
68
|
const [broadcast, setBroadcast] = useState(null);
|
|
@@ -161,6 +162,7 @@ function AccountSendProvider({ children, step }) {
|
|
|
161
162
|
const prevWalletAddressRef = useRef(selectedWallet == null ? void 0 : selectedWallet.address);
|
|
162
163
|
const isSettingMaxRef = useRef(false);
|
|
163
164
|
const isResettingRef = useRef(false);
|
|
165
|
+
const recentTxCompletedRef = useRef(false);
|
|
164
166
|
const resetState = useCallback(() => {
|
|
165
167
|
if (isResettingRef.current) {
|
|
166
168
|
return;
|
|
@@ -291,6 +293,17 @@ function AccountSendProvider({ children, step }) {
|
|
|
291
293
|
assetAmountOnNetwork,
|
|
292
294
|
isMax
|
|
293
295
|
]);
|
|
296
|
+
useEffect(() => {
|
|
297
|
+
if (broadcast && !broadcast.error) {
|
|
298
|
+
recentTxCompletedRef.current = true;
|
|
299
|
+
}
|
|
300
|
+
}, [broadcast]);
|
|
301
|
+
useEffect(() => {
|
|
302
|
+
if (step === "SEND_FORM" && recentTxCompletedRef.current) {
|
|
303
|
+
setRefetchTrigger((prev) => prev + 1);
|
|
304
|
+
recentTxCompletedRef.current = false;
|
|
305
|
+
}
|
|
306
|
+
}, [step]);
|
|
294
307
|
const value = useMemo(() => {
|
|
295
308
|
return {
|
|
296
309
|
step,
|
|
@@ -7,7 +7,7 @@ import { safeStyled, SpinnerContainer } from "@getpara/react-common";
|
|
|
7
7
|
import { CpslButton, CpslIcon, CpslSpinner } from "@getpara/react-components";
|
|
8
8
|
import { useModalStore } from "../../stores/modal/useModalStore.js";
|
|
9
9
|
import { WalletEntry } from "./AccountProfileEntry.js";
|
|
10
|
-
import {
|
|
10
|
+
import { useMemo } from "react";
|
|
11
11
|
import { useAccount, useExportPrivateKey } from "../../../provider/index.js";
|
|
12
12
|
import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
|
|
13
13
|
import { ModalStep } from "../../utils/steps.js";
|
|
@@ -113,11 +113,6 @@ const AccountWallet = () => {
|
|
|
113
113
|
)
|
|
114
114
|
] });
|
|
115
115
|
}, [profileWallet, connectionType, disconnectStatus]);
|
|
116
|
-
useEffect(() => {
|
|
117
|
-
return () => {
|
|
118
|
-
setProfileWallet(void 0);
|
|
119
|
-
};
|
|
120
|
-
}, []);
|
|
121
116
|
return /* @__PURE__ */ jsx(Container, { children: Content });
|
|
122
117
|
};
|
|
123
118
|
const Container = safeStyled.div`
|
|
@@ -4,10 +4,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
4
4
|
import { useEffect, useMemo, useRef } from "react";
|
|
5
5
|
import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
|
|
6
6
|
import { useDropdownPosition } from "../AuthInput/hooks/useDropdownPosition.js";
|
|
7
|
-
import { getExternalWalletIcon,
|
|
7
|
+
import { getExternalWalletIcon, safeStyled, useCopyToClipboard } 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
10
|
import { truncateAddress } from "@getpara/web-sdk";
|
|
11
|
+
import { getMobilePopoverPositionCSS } from "../common.js";
|
|
11
12
|
const getValue = (id, type) => {
|
|
12
13
|
return id && type ? `${id}~${type}` : void 0;
|
|
13
14
|
};
|
|
@@ -79,7 +80,7 @@ const AccountWalletSelect = () => {
|
|
|
79
80
|
resize();
|
|
80
81
|
}
|
|
81
82
|
}, [activeWallet, availableWallets, dropdownMaxHeight]);
|
|
82
|
-
return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(SelectContainer, { ref: containerRef,
|
|
83
|
+
return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(SelectContainer, { ref: containerRef, children: /* @__PURE__ */ jsxs(
|
|
83
84
|
Select,
|
|
84
85
|
{
|
|
85
86
|
selectedValue: getValue(activeWallet == null ? void 0 : activeWallet.id, activeWallet == null ? void 0 : activeWallet.type),
|
|
@@ -89,10 +90,9 @@ const AccountWalletSelect = () => {
|
|
|
89
90
|
},
|
|
90
91
|
showFormattedSelectedItem: true,
|
|
91
92
|
placeholder: "Choose wallet...",
|
|
92
|
-
anchorElId: "addressInputContainer",
|
|
93
93
|
dropdownMaxHeight,
|
|
94
94
|
$width: dropdownWidth != null ? dropdownWidth : 0,
|
|
95
|
-
$top:
|
|
95
|
+
$top: mobileAnchor != null ? mobileAnchor : void 0,
|
|
96
96
|
selectedItemVariant: "bodyXS",
|
|
97
97
|
icon: isMultiWallet ? "chevronUp" : null,
|
|
98
98
|
disabled: !isMultiWallet,
|
|
@@ -148,14 +148,7 @@ const Select = safeStyled(CpslSelect)`
|
|
|
148
148
|
|
|
149
149
|
&::part(popover) {
|
|
150
150
|
/* Have to adjust the top of the popover here since we're using a transform on the modal which causes fixed position items to not be relative to the viewport */
|
|
151
|
-
|
|
152
|
-
top: ${({ $top }) => $top ? `${$top}px` : "0px"};
|
|
153
|
-
bottom: 16px;
|
|
154
|
-
}
|
|
155
|
-
cpsl-auth-modal.force-mobile-media & {
|
|
156
|
-
top: ${({ $top }) => $top ? `${$top}px` : "0px"};
|
|
157
|
-
bottom: 16px;
|
|
158
|
-
}
|
|
151
|
+
${({ $top }) => getMobilePopoverPositionCSS($top)}
|
|
159
152
|
}
|
|
160
153
|
|
|
161
154
|
&::part(icon) {
|
|
@@ -2,6 +2,6 @@ import { MutableRefObject } from 'react';
|
|
|
2
2
|
export declare const useDropdownPosition: (inputRef: MutableRefObject<HTMLCpslInputElement | HTMLDivElement | null>) => {
|
|
3
3
|
dropdownMaxHeight: number | undefined;
|
|
4
4
|
dropdownWidth: number | undefined;
|
|
5
|
-
mobileAnchor: number |
|
|
5
|
+
mobileAnchor: number | null;
|
|
6
6
|
resize: () => void;
|
|
7
7
|
};
|
|
@@ -1,31 +1,39 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import "../../../../chunk-MMUBH76A.js";
|
|
3
|
-
import { useEffect, useState } from "react";
|
|
3
|
+
import { useCallback, useEffect, useState } from "react";
|
|
4
|
+
import { useModalStore } from "../../../stores/index.js";
|
|
4
5
|
const useDropdownPosition = (inputRef) => {
|
|
5
6
|
const [dropdownMaxHeight, setDropdownMaxHeight] = useState();
|
|
6
7
|
const [dropdownWidth, setDropdownWidth] = useState();
|
|
7
|
-
const [mobileAnchor, setMobileAnchor] = useState();
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
if (typeof window !== "undefined") {
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
);
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
8
|
+
const [mobileAnchor, setMobileAnchor] = useState(null);
|
|
9
|
+
const modalContainerRef = useModalStore((state) => state.refs.modalContainer);
|
|
10
|
+
const resize = useCallback(() => {
|
|
11
|
+
if (typeof window !== "undefined" && inputRef.current) {
|
|
12
|
+
const rect = inputRef.current.getBoundingClientRect();
|
|
13
|
+
const newMaxHeight = Math.max(window.innerHeight - rect.bottom - 20, window.innerHeight * 0.25);
|
|
14
|
+
setDropdownMaxHeight((prev) => prev !== newMaxHeight ? newMaxHeight : prev);
|
|
15
|
+
setDropdownWidth((prev) => prev !== rect.width ? rect.width : prev);
|
|
16
|
+
const isMobile = window.innerWidth <= 480;
|
|
17
|
+
if (isMobile) {
|
|
18
|
+
const modalContainer = modalContainerRef.current;
|
|
19
|
+
if (modalContainer) {
|
|
20
|
+
const modalRect = modalContainer.getBoundingClientRect();
|
|
21
|
+
const topFromModal = rect.top - modalRect.top;
|
|
22
|
+
const bottomFromModal = topFromModal + rect.height;
|
|
23
|
+
setMobileAnchor((prev) => prev !== bottomFromModal ? bottomFromModal : prev);
|
|
24
|
+
}
|
|
25
|
+
} else {
|
|
26
|
+
setMobileAnchor(null);
|
|
27
|
+
}
|
|
18
28
|
}
|
|
19
|
-
};
|
|
20
|
-
if (inputRef.current && !dropdownMaxHeight) {
|
|
21
|
-
resize();
|
|
22
|
-
}
|
|
29
|
+
}, [inputRef, modalContainerRef]);
|
|
23
30
|
useEffect(() => {
|
|
31
|
+
resize();
|
|
24
32
|
typeof window !== "undefined" && window.addEventListener("resize", resize);
|
|
25
33
|
return () => {
|
|
26
34
|
typeof window !== "undefined" && window.removeEventListener("resize", resize);
|
|
27
35
|
};
|
|
28
|
-
}, []);
|
|
36
|
+
}, [resize]);
|
|
29
37
|
return { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize };
|
|
30
38
|
};
|
|
31
39
|
export {
|
|
@@ -50,7 +50,7 @@ const AuthOptions = ({
|
|
|
50
50
|
);
|
|
51
51
|
}
|
|
52
52
|
return /* @__PURE__ */ jsx(Fragment, { children: Methods });
|
|
53
|
-
}, [oAuthMethods, disableEmailLogin, disablePhoneLogin, isGuestModeEnabled, wallets]);
|
|
53
|
+
}, [oAuthMethods, disableEmailLogin, disablePhoneLogin, isGuestModeEnabled, wallets, defaultAuth]);
|
|
54
54
|
return /* @__PURE__ */ jsxs(Container, { children: [
|
|
55
55
|
guestAddFundsTab && /* @__PURE__ */ jsxs(CompleteAccountSetup, { children: [
|
|
56
56
|
/* @__PURE__ */ jsx(CompleteAccountIcon, { icon: "stars02", size: "16px" }),
|
|
@@ -48,7 +48,7 @@ const ChainSelect = () => {
|
|
|
48
48
|
return null;
|
|
49
49
|
}
|
|
50
50
|
const chainIdToUse = chainIdSwitchingTo != null ? chainIdSwitchingTo : chainId;
|
|
51
|
-
return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(HeaderSelectContainer, { ref: containerRef,
|
|
51
|
+
return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(HeaderSelectContainer, { ref: containerRef, children: /* @__PURE__ */ jsxs(
|
|
52
52
|
HeaderSelect,
|
|
53
53
|
{
|
|
54
54
|
selectedValue: (_a = chainIdToUse == null ? void 0 : chainIdToUse.toString()) != null ? _a : "",
|
|
@@ -57,10 +57,9 @@ const ChainSelect = () => {
|
|
|
57
57
|
},
|
|
58
58
|
showFormattedSelectedItem: true,
|
|
59
59
|
placeholder: "Choose chain...",
|
|
60
|
-
anchorElId: "inputContainer",
|
|
61
60
|
dropdownMaxHeight,
|
|
62
61
|
$width: dropdownWidth != null ? dropdownWidth : 0,
|
|
63
|
-
$top:
|
|
62
|
+
$top: mobileAnchor != null ? mobileAnchor : void 0,
|
|
64
63
|
autoWidth: true,
|
|
65
64
|
alignCenter: true,
|
|
66
65
|
selectedItemVariant: "bodyXS",
|
|
@@ -4,9 +4,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
4
4
|
import { useEffect, useMemo, useRef } from "react";
|
|
5
5
|
import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
|
|
6
6
|
import { useDropdownPosition } from "../AuthInput/hooks/useDropdownPosition.js";
|
|
7
|
-
import {
|
|
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 { getMobilePopoverPositionCSS } from "../common.js";
|
|
10
11
|
const getValue = (id, type) => {
|
|
11
12
|
return id && type ? `${id}~${type}` : void 0;
|
|
12
13
|
};
|
|
@@ -69,7 +70,7 @@ const WalletSelectOld = ({
|
|
|
69
70
|
}, [activeWallet, availableWallets, dropdownMaxHeight]);
|
|
70
71
|
return /* @__PURE__ */ jsxs(Container, { style, children: [
|
|
71
72
|
isMultiWallet && !noTitle && /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", color: "secondary", weight: "semiBold", children: "Select Wallet" }),
|
|
72
|
-
/* @__PURE__ */ jsx(SelectContainer, { ref: containerRef,
|
|
73
|
+
/* @__PURE__ */ jsx(SelectContainer, { ref: containerRef, style: { width: "100%" }, children: /* @__PURE__ */ jsxs(
|
|
73
74
|
Select,
|
|
74
75
|
{
|
|
75
76
|
selectedValue: getValue(activeWallet == null ? void 0 : activeWallet.id, activeWallet == null ? void 0 : activeWallet.type),
|
|
@@ -79,10 +80,9 @@ const WalletSelectOld = ({
|
|
|
79
80
|
},
|
|
80
81
|
showFormattedSelectedItem: true,
|
|
81
82
|
placeholder: "Choose wallet...",
|
|
82
|
-
anchorElId: "addressInputContainerOld",
|
|
83
83
|
dropdownMaxHeight,
|
|
84
84
|
$width: dropdownWidth != null ? dropdownWidth : 0,
|
|
85
|
-
$top:
|
|
85
|
+
$top: mobileAnchor != null ? mobileAnchor : void 0,
|
|
86
86
|
selectedItemVariant: "bodyXS",
|
|
87
87
|
icon: isMultiWallet ? "chevronUp" : null,
|
|
88
88
|
disabled: !isMultiWallet,
|
|
@@ -127,15 +127,8 @@ const Select = safeStyled(CpslSelect)`
|
|
|
127
127
|
|
|
128
128
|
&::part(popover) {
|
|
129
129
|
/* Have to adjust the top of the popover here since we're using a transform on the modal which causes fixed position items to not be relative to the viewport */
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
bottom: 16px;
|
|
133
|
-
}
|
|
134
|
-
cpsl-auth-modal.force-mobile-media & {
|
|
135
|
-
top: ${({ $top }) => $top ? `${$top}px` : "0px"};
|
|
136
|
-
bottom: 16px;
|
|
137
|
-
}
|
|
138
|
-
}
|
|
130
|
+
${({ $top }) => getMobilePopoverPositionCSS($top)}
|
|
131
|
+
}
|
|
139
132
|
|
|
140
133
|
|
|
141
134
|
&::part(icon) {
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import { CpslInput, CpslText, CpslTileButton } from '@getpara/react-components';
|
|
2
2
|
import { TLinkedAccountType, TNetwork, TOnRampAsset } from '@getpara/web-sdk';
|
|
3
3
|
import { ComponentProps, PropsWithChildren, ReactNode } from 'react';
|
|
4
|
+
/**
|
|
5
|
+
* Generates CSS for mobile positioning of select dropdowns.
|
|
6
|
+
* Adjusts popover position when modal uses transform which affects fixed positioning.
|
|
7
|
+
*/
|
|
8
|
+
export declare const getMobilePopoverPositionCSS: ($top?: number) => string;
|
|
4
9
|
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;
|
|
5
10
|
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;
|
|
6
11
|
export declare const InfoBoxContent: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
@@ -9,6 +9,19 @@ import { CpslIcon, CpslInput, CpslSelect, CpslSelectItem, CpslText, CpslTileButt
|
|
|
9
9
|
import { ACCOUNT_TYPES, safeStyled, MOBILE_SIZE, NETWORKS, ON_RAMP_ASSETS } from "@getpara/react-common";
|
|
10
10
|
import { useStore } from "../../provider/stores/useStore.js";
|
|
11
11
|
import { useEffect, useRef, useState } from "react";
|
|
12
|
+
const getMobilePopoverPositionCSS = ($top) => {
|
|
13
|
+
if ($top === void 0 || $top === null) return "";
|
|
14
|
+
return `
|
|
15
|
+
@media (max-width: ${MOBILE_SIZE}px) {
|
|
16
|
+
top: ${$top}px;
|
|
17
|
+
bottom: 16px;
|
|
18
|
+
}
|
|
19
|
+
cpsl-auth-modal.force-mobile-media & {
|
|
20
|
+
top: ${$top}px;
|
|
21
|
+
bottom: 16px;
|
|
22
|
+
}
|
|
23
|
+
`;
|
|
24
|
+
};
|
|
12
25
|
const SpinnerContainer = safeStyled.div`
|
|
13
26
|
display: flex;
|
|
14
27
|
align-items: center;
|
|
@@ -99,16 +112,9 @@ const HeaderSelect = safeStyled(CpslSelect)`
|
|
|
99
112
|
}
|
|
100
113
|
|
|
101
114
|
&::part(popover) {
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
top: ${({ $top }) => $top ? `${$top}px` : "0px"};
|
|
105
|
-
bottom: 16px;
|
|
106
|
-
}
|
|
107
|
-
cpsl-auth-modal.force-mobile-media & {
|
|
108
|
-
top: ${({ $top }) => $top ? `${$top}px` : "0px"};
|
|
109
|
-
bottom: 16px;
|
|
115
|
+
/* Have to adjust the top of the popover here since we're using a transform on the modal which causes fixed position items to not be relative to the viewport */
|
|
116
|
+
${({ $top }) => getMobilePopoverPositionCSS($top)}
|
|
110
117
|
}
|
|
111
|
-
}
|
|
112
118
|
|
|
113
119
|
&::part(icon) {
|
|
114
120
|
--icon-color: var(--cpsl-color-contrast);
|
|
@@ -330,5 +336,6 @@ export {
|
|
|
330
336
|
QRContainer,
|
|
331
337
|
SpinnerContainer,
|
|
332
338
|
StepContainer,
|
|
333
|
-
StyledCpslTileButton
|
|
339
|
+
StyledCpslTileButton,
|
|
340
|
+
getMobilePopoverPositionCSS
|
|
334
341
|
};
|
|
@@ -48,7 +48,7 @@ const useFarcasterLogin = ({
|
|
|
48
48
|
if (!!event.data.payload) {
|
|
49
49
|
const authObject = event.data.payload;
|
|
50
50
|
try {
|
|
51
|
-
|
|
51
|
+
verifyFarcaster(authObject);
|
|
52
52
|
} catch (e) {
|
|
53
53
|
(_b = (_a = refs.telegramIFrame.current) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.postMessage({ type: "FARCASTER_RETRY" }, "*");
|
|
54
54
|
}
|
|
@@ -50,7 +50,7 @@ const useTelegramLogin = ({
|
|
|
50
50
|
if (!!event.data.payload) {
|
|
51
51
|
const authObject = event.data.payload;
|
|
52
52
|
try {
|
|
53
|
-
|
|
53
|
+
onSubmit == null ? void 0 : onSubmit(authObject);
|
|
54
54
|
} catch (e) {
|
|
55
55
|
(_b = (_a = refs.telegramIFrame.current) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.postMessage({ type: "TELEGRAM_RETRY" }, "*");
|
|
56
56
|
}
|
|
@@ -57,6 +57,7 @@ interface ModalState {
|
|
|
57
57
|
wasSignedIn: MutableRefObject<boolean | null>;
|
|
58
58
|
initialFarcasterConnected: MutableRefObject<boolean | null>;
|
|
59
59
|
iFrame: MutableRefObject<HTMLIFrameElement | null>;
|
|
60
|
+
modalContainer: MutableRefObject<HTMLElement | null>;
|
|
60
61
|
};
|
|
61
62
|
isPasskeySupported: boolean;
|
|
62
63
|
accountLinkOptions: SupportedAccountLinks;
|
|
@@ -45,7 +45,8 @@ const DEFAULT_MODAL_STATE = {
|
|
|
45
45
|
telegramIFrame: createRef(),
|
|
46
46
|
wasSignedIn: createRef(),
|
|
47
47
|
initialFarcasterConnected: createRef(),
|
|
48
|
-
iFrame: createRef()
|
|
48
|
+
iFrame: createRef(),
|
|
49
|
+
modalContainer: createRef()
|
|
49
50
|
},
|
|
50
51
|
isPasskeySupported: true,
|
|
51
52
|
accountLinkOptions: [...LINKED_ACCOUNT_TYPES],
|
|
@@ -17,7 +17,7 @@ function generateInternalMutation(method, action, {
|
|
|
17
17
|
mutationFn: (args) => __async(this, null, function* () {
|
|
18
18
|
if (typeof delay === "number") yield new Promise((resolve) => setTimeout(resolve, delay));
|
|
19
19
|
try {
|
|
20
|
-
const result =
|
|
20
|
+
const result = action(para, args != null ? args : defaultParams);
|
|
21
21
|
return result;
|
|
22
22
|
} catch (error) {
|
|
23
23
|
throw error;
|
|
@@ -27,7 +27,7 @@ const useAutoSessionKeepAlive = ({ disabled }) => {
|
|
|
27
27
|
}, [client, embedded, disabled]);
|
|
28
28
|
const getSessionExpiry = () => __async(void 0, null, function* () {
|
|
29
29
|
try {
|
|
30
|
-
const sessionCookie =
|
|
30
|
+
const sessionCookie = client == null ? void 0 : client.retrieveSessionCookie();
|
|
31
31
|
if (!sessionCookie) return null;
|
|
32
32
|
const expiresMatch = sessionCookie.match(/Expires=([^;]+)/);
|
|
33
33
|
return expiresMatch ? new Date(expiresMatch[1]) : null;
|
|
@@ -4,8 +4,9 @@ import { ModalStep } from '../../../modal/index.js';
|
|
|
4
4
|
*/
|
|
5
5
|
export declare const useModal: () => {
|
|
6
6
|
isOpen: boolean;
|
|
7
|
-
openModal: ({ step }?: {
|
|
7
|
+
openModal: ({ step, defaultAuthIdentifier }?: {
|
|
8
8
|
step?: ModalStep;
|
|
9
|
+
defaultAuthIdentifier?: string;
|
|
9
10
|
}) => void;
|
|
10
11
|
closeModal: () => void;
|
|
11
12
|
};
|
|
@@ -1,13 +1,20 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import
|
|
2
|
+
import {
|
|
3
|
+
__spreadProps,
|
|
4
|
+
__spreadValues
|
|
5
|
+
} from "../../../chunk-MMUBH76A.js";
|
|
3
6
|
import { useModalStore } from "../../../modal/stores/index.js";
|
|
4
|
-
import { useStore } from "../../stores/useStore.js";
|
|
7
|
+
import { useStore, vanillaStore } from "../../stores/useStore.js";
|
|
5
8
|
const useModal = () => {
|
|
6
9
|
const isOpen = useStore((state) => state.isOpen);
|
|
7
10
|
const setIsOpen = useStore((state) => state.setIsOpen);
|
|
8
11
|
const refs = useStore((state) => state.refs);
|
|
9
12
|
const setStep = useModalStore((state) => state.setStep);
|
|
10
|
-
const openModal = ({ step } = {}) => {
|
|
13
|
+
const openModal = ({ step, defaultAuthIdentifier } = {}) => {
|
|
14
|
+
if (defaultAuthIdentifier !== void 0) {
|
|
15
|
+
const { modalConfig, setModalConfig } = vanillaStore.getState();
|
|
16
|
+
setModalConfig(__spreadProps(__spreadValues({}, modalConfig), { defaultAuthIdentifier }));
|
|
17
|
+
}
|
|
11
18
|
if (step) {
|
|
12
19
|
refs.openedToStep.current = step;
|
|
13
20
|
setStep(step);
|
|
@@ -352,7 +352,7 @@ function ExternalWalletProvider({ children }) {
|
|
|
352
352
|
const d = yield verifyExternalWalletAsync(verifyExternalWalletParams);
|
|
353
353
|
yield queryClient.refetchQueries({ queryKey: [IS_FULLY_LOGGED_IN_BASE_KEY] });
|
|
354
354
|
if (wallet2 && isWithFullAuth(wallet2)) {
|
|
355
|
-
|
|
355
|
+
onNewAuthState(d);
|
|
356
356
|
} else {
|
|
357
357
|
setStep(ModalStep.LOGIN_DONE);
|
|
358
358
|
}
|
|
@@ -500,7 +500,7 @@ function ExternalWalletProvider({ children }) {
|
|
|
500
500
|
const serverAuthState = (_b = event.data) == null ? void 0 : _b.serverAuthState;
|
|
501
501
|
if (serverAuthState && ((_c = serverAuthState.externalWallet) == null ? void 0 : _c.withFullParaAuth)) {
|
|
502
502
|
const authState = yield para.verifyExternalWallet({ serverAuthState });
|
|
503
|
-
|
|
503
|
+
onNewAuthState(authState);
|
|
504
504
|
} else {
|
|
505
505
|
setStep(ModalStep.LOGIN_DONE);
|
|
506
506
|
}
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@getpara/react-sdk-lite",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.12.0",
|
|
4
4
|
"bin": {
|
|
5
5
|
"setup-para": "dist/cli/cli.mjs"
|
|
6
6
|
},
|
|
7
7
|
"dependencies": {
|
|
8
|
-
"@getpara/react-common": "2.
|
|
9
|
-
"@getpara/react-components": "2.
|
|
10
|
-
"@getpara/web-sdk": "2.
|
|
8
|
+
"@getpara/react-common": "2.12.0",
|
|
9
|
+
"@getpara/react-components": "2.12.0",
|
|
10
|
+
"@getpara/web-sdk": "2.12.0",
|
|
11
11
|
"date-fns": "^3.6.0",
|
|
12
12
|
"framer-motion": "^11.3.31",
|
|
13
13
|
"libphonenumber-js": "^1.11.7",
|
|
@@ -17,9 +17,9 @@
|
|
|
17
17
|
"zustand-sync-tabs": "^0.2.2"
|
|
18
18
|
},
|
|
19
19
|
"devDependencies": {
|
|
20
|
-
"@getpara/cosmos-wallet-connectors": "2.
|
|
21
|
-
"@getpara/evm-wallet-connectors": "2.
|
|
22
|
-
"@getpara/solana-wallet-connectors": "2.
|
|
20
|
+
"@getpara/cosmos-wallet-connectors": "2.12.0",
|
|
21
|
+
"@getpara/evm-wallet-connectors": "2.12.0",
|
|
22
|
+
"@getpara/solana-wallet-connectors": "2.12.0",
|
|
23
23
|
"@tanstack/react-query": "^5.74.0",
|
|
24
24
|
"@testing-library/dom": "^10.4.0",
|
|
25
25
|
"@testing-library/react": "^16.3.0",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"package.json",
|
|
40
40
|
"styles.css"
|
|
41
41
|
],
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "09c114d148f7a0c2ad250d6346a76aa3b332b2d4",
|
|
43
43
|
"main": "dist/index.js",
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"@tanstack/react-query": ">=5.0.0",
|