@b3dotfun/sdk 0.1.69-alpha.22 → 0.1.69-alpha.24
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/cjs/anyspend/react/components/AnySpend.d.ts +2 -0
- package/dist/cjs/anyspend/react/components/AnySpend.js +12 -4
- package/dist/cjs/anyspend/react/components/AnySpendCollectorClubPurchase.d.ts +5 -1
- package/dist/cjs/anyspend/react/components/AnySpendCollectorClubPurchase.js +2 -2
- package/dist/cjs/anyspend/react/components/AnySpendCustom.d.ts +2 -0
- package/dist/cjs/anyspend/react/components/AnySpendCustom.js +7 -3
- package/dist/cjs/anyspend/react/components/AnySpendDeposit.d.ts +3 -1
- package/dist/cjs/anyspend/react/components/AnySpendDeposit.js +3 -3
- package/dist/cjs/anyspend/react/components/AnySpendNFT.d.ts +3 -1
- package/dist/cjs/anyspend/react/components/AnySpendNFT.js +2 -2
- package/dist/cjs/anyspend/react/components/AnySpendStakeUpside.d.ts +3 -1
- package/dist/cjs/anyspend/react/components/AnySpendStakeUpside.js +2 -2
- package/dist/cjs/global-account/react/components/SignInWithB3/BetterAuthSignIn.d.ts +6 -1
- package/dist/cjs/global-account/react/components/SignInWithB3/BetterAuthSignIn.js +2 -2
- package/dist/cjs/global-account/react/components/SignInWithB3/BetterAuthVerifyEmail.d.ts +37 -0
- package/dist/cjs/global-account/react/components/SignInWithB3/BetterAuthVerifyEmail.js +85 -0
- package/dist/cjs/global-account/react/components/SignInWithB3/SignInWithB3Flow.d.ts +1 -1
- package/dist/cjs/global-account/react/components/SignInWithB3/SignInWithB3Flow.js +2 -2
- package/dist/cjs/global-account/react/components/SignInWithB3/steps/LoginStepBetterAuth.d.ts +3 -1
- package/dist/cjs/global-account/react/components/SignInWithB3/steps/LoginStepBetterAuth.js +2 -2
- package/dist/cjs/global-account/react/components/index.d.ts +1 -0
- package/dist/cjs/global-account/react/components/index.js +5 -3
- package/dist/cjs/global-account/react/hooks/useBetterAuth.d.ts +1 -1
- package/dist/cjs/global-account/react/hooks/useBetterAuth.js +5 -4
- package/dist/cjs/global-account/react/stores/useModalStore.d.ts +4 -0
- package/dist/esm/anyspend/react/components/AnySpend.d.ts +2 -0
- package/dist/esm/anyspend/react/components/AnySpend.js +12 -4
- package/dist/esm/anyspend/react/components/AnySpendCollectorClubPurchase.d.ts +5 -1
- package/dist/esm/anyspend/react/components/AnySpendCollectorClubPurchase.js +2 -2
- package/dist/esm/anyspend/react/components/AnySpendCustom.d.ts +2 -0
- package/dist/esm/anyspend/react/components/AnySpendCustom.js +7 -3
- package/dist/esm/anyspend/react/components/AnySpendDeposit.d.ts +3 -1
- package/dist/esm/anyspend/react/components/AnySpendDeposit.js +3 -3
- package/dist/esm/anyspend/react/components/AnySpendNFT.d.ts +3 -1
- package/dist/esm/anyspend/react/components/AnySpendNFT.js +2 -2
- package/dist/esm/anyspend/react/components/AnySpendStakeUpside.d.ts +3 -1
- package/dist/esm/anyspend/react/components/AnySpendStakeUpside.js +2 -2
- package/dist/esm/global-account/react/components/SignInWithB3/BetterAuthSignIn.d.ts +6 -1
- package/dist/esm/global-account/react/components/SignInWithB3/BetterAuthSignIn.js +2 -2
- package/dist/esm/global-account/react/components/SignInWithB3/BetterAuthVerifyEmail.d.ts +37 -0
- package/dist/esm/global-account/react/components/SignInWithB3/BetterAuthVerifyEmail.js +82 -0
- package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3Flow.d.ts +1 -1
- package/dist/esm/global-account/react/components/SignInWithB3/SignInWithB3Flow.js +2 -2
- package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStepBetterAuth.d.ts +3 -1
- package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStepBetterAuth.js +2 -2
- package/dist/esm/global-account/react/components/index.d.ts +1 -0
- package/dist/esm/global-account/react/components/index.js +1 -0
- package/dist/esm/global-account/react/hooks/useBetterAuth.d.ts +1 -1
- package/dist/esm/global-account/react/hooks/useBetterAuth.js +5 -4
- package/dist/esm/global-account/react/stores/useModalStore.d.ts +4 -0
- package/dist/styles/index.css +1 -1
- package/dist/types/anyspend/react/components/AnySpend.d.ts +2 -0
- package/dist/types/anyspend/react/components/AnySpendCollectorClubPurchase.d.ts +5 -1
- package/dist/types/anyspend/react/components/AnySpendCustom.d.ts +2 -0
- package/dist/types/anyspend/react/components/AnySpendDeposit.d.ts +3 -1
- package/dist/types/anyspend/react/components/AnySpendNFT.d.ts +3 -1
- package/dist/types/anyspend/react/components/AnySpendStakeUpside.d.ts +3 -1
- package/dist/types/global-account/react/components/SignInWithB3/BetterAuthSignIn.d.ts +6 -1
- package/dist/types/global-account/react/components/SignInWithB3/BetterAuthVerifyEmail.d.ts +37 -0
- package/dist/types/global-account/react/components/SignInWithB3/SignInWithB3Flow.d.ts +1 -1
- package/dist/types/global-account/react/components/SignInWithB3/steps/LoginStepBetterAuth.d.ts +3 -1
- package/dist/types/global-account/react/components/index.d.ts +1 -0
- package/dist/types/global-account/react/hooks/useBetterAuth.d.ts +1 -1
- package/dist/types/global-account/react/stores/useModalStore.d.ts +4 -0
- package/package.json +1 -1
- package/src/anyspend/react/components/AnySpend.tsx +24 -12
- package/src/anyspend/react/components/AnySpendCollectorClubPurchase.tsx +6 -0
- package/src/anyspend/react/components/AnySpendCustom.tsx +12 -2
- package/src/anyspend/react/components/AnySpendDeposit.tsx +38 -31
- package/src/anyspend/react/components/AnySpendNFT.tsx +4 -0
- package/src/anyspend/react/components/AnySpendStakeUpside.tsx +4 -0
- package/src/global-account/react/components/SignInWithB3/BetterAuthSignIn.tsx +7 -1
- package/src/global-account/react/components/SignInWithB3/BetterAuthVerifyEmail.tsx +155 -0
- package/src/global-account/react/components/SignInWithB3/SignInWithB3Flow.tsx +8 -1
- package/src/global-account/react/components/SignInWithB3/steps/LoginStepBetterAuth.tsx +4 -2
- package/src/global-account/react/components/index.ts +5 -0
- package/src/global-account/react/hooks/useBetterAuth.ts +5 -4
- package/src/global-account/react/stores/useModalStore.ts +4 -0
|
@@ -60,7 +60,7 @@ export function AnySpend(props) {
|
|
|
60
60
|
const fingerprintConfig = getFingerprintConfig();
|
|
61
61
|
return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendCustomizationProvider, { slots: props.slots, content: props.content, theme: props.theme, children: _jsx(AnySpendInner, { ...props }) }) }));
|
|
62
62
|
}
|
|
63
|
-
function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, hideHeader, hideBottomNavigation = false, disableUrlParamManagement = false, returnToHomeUrl, customRecipientLabel, returnHomeLabel, classes, allowDirectTransfer = false, destinationTokenAmount, callbackMetadata, senderAddress, kycEnabled = false, }) {
|
|
63
|
+
function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationTokenChainId, mode = "modal", defaultActiveTab = "crypto", loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps, onTokenSelect, onSuccess, customUsdInputValues, hideHeader, hideBottomNavigation = false, disableUrlParamManagement = false, returnToHomeUrl, customRecipientLabel, returnHomeLabel, classes, allowDirectTransfer = false, destinationTokenAmount, callbackMetadata, senderAddress, kycEnabled = false, showFiatOption = true, }) {
|
|
64
64
|
const { slots, content } = useAnySpendCustomization();
|
|
65
65
|
const searchParams = useSearchParamsSSR();
|
|
66
66
|
const router = useRouter();
|
|
@@ -84,6 +84,8 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
|
|
|
84
84
|
// Track previous panel for proper back navigation
|
|
85
85
|
const previousPanel = useRef(PanelView.MAIN);
|
|
86
86
|
const [activeTab, setActiveTab] = useState(() => {
|
|
87
|
+
if (!showFiatOption)
|
|
88
|
+
return "crypto";
|
|
87
89
|
if (typeof window !== "undefined") {
|
|
88
90
|
const stored = sessionStorage.getItem("anyspend_active_tab");
|
|
89
91
|
if (stored === "crypto" || stored === "fiat")
|
|
@@ -92,8 +94,14 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
|
|
|
92
94
|
return defaultActiveTab;
|
|
93
95
|
});
|
|
94
96
|
useEffect(() => {
|
|
97
|
+
if (!showFiatOption && activeTab === "fiat")
|
|
98
|
+
setActiveTab("crypto");
|
|
99
|
+
}, [showFiatOption, activeTab]);
|
|
100
|
+
useEffect(() => {
|
|
101
|
+
if (!showFiatOption)
|
|
102
|
+
return;
|
|
95
103
|
sessionStorage.setItem("anyspend_active_tab", activeTab);
|
|
96
|
-
}, [activeTab]);
|
|
104
|
+
}, [activeTab, showFiatOption]);
|
|
97
105
|
const [orderId, setOrderId] = useState(loadOrder);
|
|
98
106
|
const [directTransferTxHash, setDirectTransferTxHash] = useState();
|
|
99
107
|
const { orderAndTransactions: oat, getOrderAndTransactionsError } = useAnyspendOrderAndTransactions(orderId);
|
|
@@ -972,12 +980,12 @@ function AnySpendInner({ sourceChainId, destinationTokenAddress, destinationToke
|
|
|
972
980
|
// Reset payment methods when going back
|
|
973
981
|
resetPaymentMethods();
|
|
974
982
|
}, returnToHomeUrl: returnToHomeUrl, returnHomeLabel: returnHomeLabel, disableUrlParamManagement: disableUrlParamManagement })) }) }));
|
|
975
|
-
const mainView = (_jsxs("div", { className: classes?.mainContent || "mx-auto flex w-full max-w-[460px] flex-col items-center gap-2 pt-5", children: [_jsxs("div", { className: "flex w-full max-w-full flex-col items-center gap-2 px-5", children: [isBuyMode && !hideHeader && (_jsxs("div", { className: classes?.header || "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: classes?.headerLogo || "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: classes?.headerTitle || "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), _jsx(TabSection, { activeTab: activeTab, setActiveTab: tab => {
|
|
983
|
+
const mainView = (_jsxs("div", { className: classes?.mainContent || "mx-auto flex w-full max-w-[460px] flex-col items-center gap-2 pt-5", children: [_jsxs("div", { className: "flex w-full max-w-full flex-col items-center gap-2 px-5", children: [isBuyMode && !hideHeader && (_jsxs("div", { className: classes?.header || "mb-4 flex flex-col items-center gap-3 text-center", children: [selectedDstToken.metadata?.logoURI && (_jsx("div", { className: "relative", children: _jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: classes?.headerLogo || "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md" }) })), _jsx("div", { children: _jsxs("h1", { className: classes?.headerTitle || "text-as-primary text-xl font-bold", children: ["Buy ", selectedDstToken.symbol] }) })] })), showFiatOption && (_jsx(TabSection, { activeTab: activeTab, setActiveTab: tab => {
|
|
976
984
|
setActiveTab(tab);
|
|
977
985
|
// Reset payment methods when switching tabs
|
|
978
986
|
resetPaymentMethods();
|
|
979
987
|
setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
|
|
980
|
-
}, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward"), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect, onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward") })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: (panelIndex) => {
|
|
988
|
+
}, setSelectedCryptoPaymentMethod: setSelectedCryptoPaymentMethod, setSelectedFiatPaymentMethod: setSelectedFiatPaymentMethod })), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsx(CryptoPaySection, { selectedSrcChainId: selectedSrcChainId, setSelectedSrcChainId: setSelectedSrcChainId, selectedSrcToken: selectedSrcToken, setSelectedSrcToken: setSelectedSrcToken, srcAmount: srcAmount, setSrcAmount: setSrcAmount, isSrcInputDirty: isSrcInputDirty, setIsSrcInputDirty: setIsSrcInputDirty, selectedCryptoPaymentMethod: effectiveCryptoPaymentMethod, onSelectCryptoPaymentMethod: () => navigateToPanel(PanelView.CRYPTO_PAYMENT_METHOD, "forward"), anyspendQuote: anyspendQuote, onTokenSelect: onTokenSelect, onShowFeeDetail: () => navigateToPanel(PanelView.FEE_DETAIL, "forward") })) : (_jsx(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, children: _jsx(PanelOnramp, { srcAmountOnRamp: srcAmountOnRamp, setSrcAmountOnRamp: setSrcAmountOnRamp, selectedPaymentMethod: selectedFiatPaymentMethod, setActivePanel: (panelIndex) => {
|
|
981
989
|
// Map panel index to navigation with direction
|
|
982
990
|
const panelsWithForwardNav = [PanelView.FIAT_PAYMENT_METHOD, PanelView.RECIPIENT_SELECTION];
|
|
983
991
|
if (panelsWithForwardNav.includes(panelIndex)) {
|
|
@@ -70,6 +70,10 @@ export interface AnySpendCollectorClubPurchaseProps {
|
|
|
70
70
|
* Force fiat payment
|
|
71
71
|
*/
|
|
72
72
|
forceFiatPayment?: boolean;
|
|
73
|
+
/**
|
|
74
|
+
* Whether to show the "Pay with fiat" tab. Defaults to true.
|
|
75
|
+
*/
|
|
76
|
+
showFiatOption?: boolean;
|
|
73
77
|
/**
|
|
74
78
|
* Optional discount code to apply to the purchase.
|
|
75
79
|
* When provided, validates on-chain and adjusts the price accordingly.
|
|
@@ -79,4 +83,4 @@ export interface AnySpendCollectorClubPurchaseProps {
|
|
|
79
83
|
content?: AnySpendContent;
|
|
80
84
|
theme?: AnySpendTheme;
|
|
81
85
|
}
|
|
82
|
-
export declare function AnySpendCollectorClubPurchase({ loadOrder, mode, activeTab, packId, packAmount, pricePerPack, paymentToken, recipientAddress, spenderAddress, isStaging, onSuccess, header, showRecipient, vendingMachineId, packType, forceFiatPayment, discountCode, slots, content, theme, }: AnySpendCollectorClubPurchaseProps): import("react/jsx-runtime").JSX.Element;
|
|
86
|
+
export declare function AnySpendCollectorClubPurchase({ loadOrder, mode, activeTab, packId, packAmount, pricePerPack, paymentToken, recipientAddress, spenderAddress, isStaging, onSuccess, header, showRecipient, vendingMachineId, packType, forceFiatPayment, showFiatOption, discountCode, slots, content, theme, }: AnySpendCollectorClubPurchaseProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -41,7 +41,7 @@ const basePublicClient = createPublicClient({
|
|
|
41
41
|
chain: base,
|
|
42
42
|
transport: http(PUBLIC_BASE_RPC_URL),
|
|
43
43
|
});
|
|
44
|
-
export function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activeTab = "crypto", packId, packAmount, pricePerPack, paymentToken = USDC_BASE, recipientAddress, spenderAddress, isStaging = false, onSuccess, header, showRecipient = true, vendingMachineId, packType, forceFiatPayment, discountCode, slots, content, theme, }) {
|
|
44
|
+
export function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activeTab = "crypto", packId, packAmount, pricePerPack, paymentToken = USDC_BASE, recipientAddress, spenderAddress, isStaging = false, onSuccess, header, showRecipient = true, vendingMachineId, packType, forceFiatPayment, showFiatOption = true, discountCode, slots, content, theme, }) {
|
|
45
45
|
const ccShopAddress = isStaging ? CC_SHOP_ADDRESS_STAGING : CC_SHOP_ADDRESS;
|
|
46
46
|
// Calculate total amount needed (pricePerPack * packAmount)
|
|
47
47
|
const totalAmount = useMemo(() => {
|
|
@@ -215,5 +215,5 @@ export function AnySpendCollectorClubPurchase({ loadOrder, mode = "modal", activ
|
|
|
215
215
|
...(discountCode && discountInfo.isValid
|
|
216
216
|
? { discountCode, discountAmount: discountInfo.discountAmount.toString() }
|
|
217
217
|
: {}),
|
|
218
|
-
}, header: header || defaultHeader, onSuccess: onSuccess, showRecipient: showRecipient, srcFiatAmount: srcFiatAmount, forceFiatPayment: forceFiatPayment, slots: slots, content: content, theme: theme }));
|
|
218
|
+
}, header: header || defaultHeader, onSuccess: onSuccess, showRecipient: showRecipient, srcFiatAmount: srcFiatAmount, forceFiatPayment: forceFiatPayment, showFiatOption: showFiatOption, slots: slots, content: content, theme: theme }));
|
|
219
219
|
}
|
|
@@ -13,6 +13,8 @@ export declare function AnySpendCustom(props: {
|
|
|
13
13
|
dstToken: components["schemas"]["Token"];
|
|
14
14
|
dstAmount: string;
|
|
15
15
|
forceFiatPayment?: boolean;
|
|
16
|
+
/** Whether to show the "Pay with fiat" tab. Defaults to true. When false, the fiat tab is hidden and activeTab is forced to "crypto". */
|
|
17
|
+
showFiatOption?: boolean;
|
|
16
18
|
contractAddress: string;
|
|
17
19
|
encodedData: string;
|
|
18
20
|
metadata: any;
|
|
@@ -109,12 +109,16 @@ export function AnySpendCustom(props) {
|
|
|
109
109
|
const fingerprintConfig = getFingerprintConfig();
|
|
110
110
|
return (_jsx(AnySpendFingerprintWrapper, { fingerprint: fingerprintConfig, children: _jsx(AnySpendCustomizationProvider, { slots: props.slots, content: props.content, theme: props.theme, children: _jsx(AnySpendCustomInner, { ...props }) }) }));
|
|
111
111
|
}
|
|
112
|
-
function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabProps = "crypto", recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient = true, onShowPointsDetail, srcFiatAmount: srcFiatAmountProps, forceFiatPayment, senderAddress, }) {
|
|
112
|
+
function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabProps = "crypto", recipientAddress: recipientAddressProps, spenderAddress, orderType, dstChainId, dstToken, dstAmount, contractAddress, encodedData, metadata, header, onSuccess, showRecipient = true, onShowPointsDetail, srcFiatAmount: srcFiatAmountProps, forceFiatPayment, showFiatOption = true, senderAddress, }) {
|
|
113
113
|
const hasMounted = useHasMounted();
|
|
114
114
|
const searchParams = useSearchParamsSSR();
|
|
115
115
|
const router = useRouter();
|
|
116
116
|
const [activePanel, setActivePanel] = useState(loadOrder ? PanelView.ORDER_DETAILS : PanelView.CONFIRM_ORDER);
|
|
117
|
-
const [activeTab, setActiveTab] = useState(forceFiatPayment ? "fiat" : activeTabProps);
|
|
117
|
+
const [activeTab, setActiveTab] = useState(!showFiatOption ? "crypto" : forceFiatPayment ? "fiat" : activeTabProps);
|
|
118
|
+
useEffect(() => {
|
|
119
|
+
if (!showFiatOption && activeTab === "fiat")
|
|
120
|
+
setActiveTab("crypto");
|
|
121
|
+
}, [showFiatOption, activeTab]);
|
|
118
122
|
// Payment method state with dual-state system (auto + explicit user selection)
|
|
119
123
|
// Note: AnySpendCustom doesn't use auto-selection, only explicit user selection
|
|
120
124
|
const { setSelectedCryptoPaymentMethod, effectiveCryptoPaymentMethod, resetPaymentMethods } = useCryptoPaymentMethodState();
|
|
@@ -495,7 +499,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
495
499
|
return null;
|
|
496
500
|
};
|
|
497
501
|
// Confirm order view.
|
|
498
|
-
const confirmOrderView = (_jsxs("div", { className: "relative mx-auto flex w-full flex-col items-center", children: [header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote }), _jsxs(Tabs, { value: activeTab, onValueChange: value => setActiveTab(value), className: "bg-b3-react-background max-h-[60dvh] w-full overflow-y-auto p-5", children: [!forceFiatPayment && (_jsx("div", { className: "w-full", children: _jsxs("div", { className: "bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl", children: [_jsx("div", { className: cn("bg-as-brand absolute bottom-0 left-0 top-0 z-0 rounded-xl transition-transform duration-100", "h-full w-1/2", activeTab === "fiat" ? "translate-x-full" : "translate-x-0"), style: { willChange: "transform" } }), _jsx("button", { className: cn("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => {
|
|
502
|
+
const confirmOrderView = (_jsxs("div", { className: "relative mx-auto flex w-full flex-col items-center", children: [header({ anyspendPrice: anyspendQuote, isLoadingAnyspendPrice: isLoadingAnyspendQuote }), _jsxs(Tabs, { value: activeTab, onValueChange: value => setActiveTab(value), className: "bg-b3-react-background max-h-[60dvh] w-full overflow-y-auto p-5", children: [!forceFiatPayment && showFiatOption && (_jsx("div", { className: "w-full", children: _jsxs("div", { className: "bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl", children: [_jsx("div", { className: cn("bg-as-brand absolute bottom-0 left-0 top-0 z-0 rounded-xl transition-transform duration-100", "h-full w-1/2", activeTab === "fiat" ? "translate-x-full" : "translate-x-0"), style: { willChange: "transform" } }), _jsx("button", { className: cn("relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100", activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent"), onClick: () => {
|
|
499
503
|
setActiveTab("crypto");
|
|
500
504
|
// Reset payment methods when switching tabs
|
|
501
505
|
resetPaymentMethods();
|
|
@@ -73,6 +73,8 @@ export interface AnySpendDepositProps {
|
|
|
73
73
|
depositContractConfig?: DepositContractConfig;
|
|
74
74
|
/** Whether to show chain selection step. Defaults to true if sourceTokenChainId is not provided */
|
|
75
75
|
showChainSelection?: boolean;
|
|
76
|
+
/** Whether to show the "Fund with Fiat" option in the deposit options list. Defaults to true */
|
|
77
|
+
showFiatOption?: boolean;
|
|
76
78
|
/** Custom list of supported chains. If not provided, uses default chains */
|
|
77
79
|
supportedChains?: ChainConfig[];
|
|
78
80
|
/** Minimum pool size for filtering tokens (default: 1,000,000) */
|
|
@@ -148,4 +150,4 @@ export interface AnySpendDepositProps {
|
|
|
148
150
|
* onSuccess={(amount) => console.log(`Deposited ${amount}`)}
|
|
149
151
|
* />
|
|
150
152
|
*/
|
|
151
|
-
export declare function AnySpendDeposit({ loadOrder, mode, recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, supportedChains, minPoolSize, topChainsCount, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit, classes, allowDirectTransfer, destinationTokenAmount, callbackMetadata, senderAddress, slots, content, theme, }: AnySpendDepositProps): import("react/jsx-runtime").JSX.Element | null;
|
|
153
|
+
export declare function AnySpendDeposit({ loadOrder, mode, recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, showFiatOption, supportedChains, minPoolSize, topChainsCount, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit, classes, allowDirectTransfer, destinationTokenAmount, callbackMetadata, senderAddress, slots, content, theme, }: AnySpendDepositProps): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -94,7 +94,7 @@ function ChainIcon({ chainId, className }) {
|
|
|
94
94
|
* onSuccess={(amount) => console.log(`Deposited ${amount}`)}
|
|
95
95
|
* />
|
|
96
96
|
*/
|
|
97
|
-
export function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, supportedChains = DEFAULT_SUPPORTED_CHAINS, minPoolSize = DEFAULT_MIN_POOL_SIZE, topChainsCount = 3, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit = false, classes, allowDirectTransfer = false, destinationTokenAmount, callbackMetadata, senderAddress, slots, content, theme, }) {
|
|
97
|
+
export function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, paymentType: initialPaymentType, sourceTokenAddress, sourceTokenChainId: initialSourceChainId, destinationTokenAddress, destinationTokenChainId, onSuccess, onOpenCustomModal, mainFooter, onTokenSelect, customUsdInputValues, preferEoa, minDestinationAmount, header, orderType, depositContractConfig, showChainSelection, showFiatOption = true, supportedChains = DEFAULT_SUPPORTED_CHAINS, minPoolSize = DEFAULT_MIN_POOL_SIZE, topChainsCount = 3, onClose, returnToHomeUrl, customRecipientLabel, returnHomeLabel, isCustomDeposit = false, classes, allowDirectTransfer = false, destinationTokenAmount, callbackMetadata, senderAddress, slots, content, theme, }) {
|
|
98
98
|
// Extract deposit-specific classes for convenience
|
|
99
99
|
const depositClasses = classes?.deposit;
|
|
100
100
|
const { connectedEOAWallet } = useAccountWallet();
|
|
@@ -196,9 +196,9 @@ export function AnySpendDeposit({ loadOrder, mode = "modal", recipientAddress, p
|
|
|
196
196
|
"anyspend-deposit-option-button anyspend-deposit-crypto-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all", children: [_jsx("div", { className: depositClasses?.optionContent || "anyspend-deposit-option-content", children: _jsxs("div", { className: depositClasses?.optionInfo || "anyspend-deposit-option-info", children: [_jsx("span", { className: depositClasses?.optionTitle || "anyspend-deposit-option-title text-as-primary font-medium", children: "Deposit Crypto" }), _jsx("p", { className: depositClasses?.optionDescription ||
|
|
197
197
|
"anyspend-deposit-option-description text-as-secondary text-xs", children: "Swap from any token on any chain" })] }) }), _jsx(ChevronRight, { className: depositClasses?.optionChevron || "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] }), _jsxs("div", { className: depositClasses?.divider || "anyspend-deposit-divider flex items-center gap-3", children: [_jsx("div", { className: depositClasses?.dividerLine || "bg-as-stroke h-px flex-1" }), _jsx("span", { className: depositClasses?.dividerText || "anyspend-deposit-divider-text text-as-secondary text-sm", children: "More options" }), _jsx("div", { className: depositClasses?.dividerLine || "bg-as-stroke h-px flex-1" })] }), _jsxs("button", { onClick: handleSelectQrDeposit, className: depositClasses?.qrButton ||
|
|
198
198
|
"anyspend-deposit-option-button anyspend-deposit-qr-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all", children: [_jsxs("div", { className: depositClasses?.optionContent || "anyspend-deposit-option-content flex items-center gap-3", children: [_jsx(QrCodeIcon, { className: depositClasses?.optionIcon || "anyspend-deposit-option-icon h-10 w-10" }), _jsxs("div", { className: depositClasses?.optionInfo || "anyspend-deposit-option-info", children: [_jsx("span", { className: depositClasses?.optionTitle || "anyspend-deposit-option-title text-as-primary font-medium", children: "Deposit with QR Code" }), _jsx("p", { className: depositClasses?.optionDescription ||
|
|
199
|
-
"anyspend-deposit-option-description text-as-secondary text-xs", children: "Send tokens directly to deposit address" })] })] }), _jsx(ChevronRight, { className: depositClasses?.optionChevron || "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] }), _jsxs("button", { onClick: handleSelectFiat, className: depositClasses?.fiatButton ||
|
|
199
|
+
"anyspend-deposit-option-description text-as-secondary text-xs", children: "Send tokens directly to deposit address" })] })] }), _jsx(ChevronRight, { className: depositClasses?.optionChevron || "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] }), showFiatOption && (_jsxs("button", { onClick: handleSelectFiat, className: depositClasses?.fiatButton ||
|
|
200
200
|
"anyspend-deposit-option-button anyspend-deposit-fiat-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left transition-all", children: [_jsxs("div", { className: depositClasses?.optionContent || "anyspend-deposit-option-content flex items-center gap-3", children: [_jsx(CreditCardIcon, { className: depositClasses?.optionIcon || "anyspend-deposit-option-icon h-10 w-10" }), _jsxs("div", { className: depositClasses?.optionInfo || "anyspend-deposit-option-info", children: [_jsx("span", { className: depositClasses?.optionTitle || "anyspend-deposit-option-title text-as-primary font-medium", children: "Fund with Fiat" }), _jsx("p", { className: depositClasses?.optionDescription ||
|
|
201
|
-
"anyspend-deposit-option-description text-as-secondary text-xs", children: "Pay with card or bank transfer" })] })] }), _jsx(ChevronRight, { className: depositClasses?.optionChevron || "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] })] }), _jsx(ChainWarningText, { chainId: destinationTokenChainId, classes: classes?.chainWarningText || { root: "mt-2" } })] })] }));
|
|
201
|
+
"anyspend-deposit-option-description text-as-secondary text-xs", children: "Pay with card or bank transfer" })] })] }), _jsx(ChevronRight, { className: depositClasses?.optionChevron || "anyspend-deposit-option-chevron text-as-secondary h-5 w-5" })] }))] }), _jsx(ChainWarningText, { chainId: destinationTokenChainId, classes: classes?.chainWarningText || { root: "mt-2" } })] })] }));
|
|
202
202
|
}
|
|
203
203
|
// QR Deposit view
|
|
204
204
|
if (step === "qr-deposit") {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { components } from "../../../anyspend/types/api";
|
|
2
2
|
import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
|
|
3
|
-
export declare function AnySpendNFT({ loadOrder, mode, recipientAddress, nftContract, onSuccess, onShowPointsDetail, senderAddress, slots, content, theme, }: {
|
|
3
|
+
export declare function AnySpendNFT({ loadOrder, mode, recipientAddress, nftContract, onSuccess, onShowPointsDetail, senderAddress, slots, content, theme, showFiatOption, }: {
|
|
4
4
|
loadOrder?: string;
|
|
5
5
|
mode?: "modal" | "page";
|
|
6
6
|
recipientAddress?: string;
|
|
@@ -12,4 +12,6 @@ export declare function AnySpendNFT({ loadOrder, mode, recipientAddress, nftCont
|
|
|
12
12
|
slots?: AnySpendSlots;
|
|
13
13
|
content?: AnySpendContent;
|
|
14
14
|
theme?: AnySpendTheme;
|
|
15
|
+
/** Whether to show the "Pay with fiat" tab. Defaults to true. */
|
|
16
|
+
showFiatOption?: boolean;
|
|
15
17
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -26,7 +26,7 @@ const CONTRACT_URI_ABI = [
|
|
|
26
26
|
type: "function",
|
|
27
27
|
},
|
|
28
28
|
];
|
|
29
|
-
export function AnySpendNFT({ loadOrder, mode = "modal", recipientAddress, nftContract, onSuccess, onShowPointsDetail, senderAddress, slots, content, theme, }) {
|
|
29
|
+
export function AnySpendNFT({ loadOrder, mode = "modal", recipientAddress, nftContract, onSuccess, onShowPointsDetail, senderAddress, slots, content, theme, showFiatOption = true, }) {
|
|
30
30
|
const [imageUrlWithFallback, setFallbackImageUrl] = useState(nftContract.imageUrl);
|
|
31
31
|
const hasFetchedRef = useRef(false);
|
|
32
32
|
// Fetch contract metadata when imageUrl is empty
|
|
@@ -80,7 +80,7 @@ export function AnySpendNFT({ loadOrder, mode = "modal", recipientAddress, nftCo
|
|
|
80
80
|
const header = useCallback(({ anyspendPrice, isLoadingAnyspendPrice, }) => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative size-[200px]", children: [_jsx("div", { className: "absolute inset-0 scale-95 bg-black/30 blur-md" }), _jsxs(GlareCard, { className: "overflow-hidden", children: [imageUrlWithFallback && (_jsx("img", { src: imageUrlWithFallback, alt: nftContract.name, className: "size-full object-cover" })), _jsx("div", { className: "absolute inset-0 rounded-xl border border-white/10" })] }), _jsx(DropdownMenu, { nftContract: nftContract })] }), _jsxs("div", { className: "from-b3-react-background to-as-on-surface-1 -mb-5 mt-[-100px] w-full rounded-t-lg bg-gradient-to-t", children: [_jsx("div", { className: "h-[100px] w-full" }), _jsxs("div", { className: "mb-1 flex w-full flex-col items-center gap-2 p-5", children: [_jsx("span", { className: "font-sf-rounded text-2xl font-semibold", children: nftContract.name }), _jsx("div", { className: "flex w-fit items-center gap-1", children: anyspendPrice ? (_jsx(AnimatePresence, { mode: "wait", children: _jsx("div", { className: cn("text-as-primary group flex items-center text-3xl font-semibold transition-all", {
|
|
81
81
|
"opacity-0": isLoadingAnyspendPrice,
|
|
82
82
|
}), children: formatDisplayNumber(anyspendPrice?.data?.currencyIn?.amountUsd, { style: "currency" }) }) })) : (_jsx("div", { className: "h-[36px] w-full" })) })] })] })] })), [imageUrlWithFallback, nftContract]);
|
|
83
|
-
return (_jsx(AnySpendCustom, { loadOrder: loadOrder, mode: mode, activeTab: "fiat", recipientAddress: recipientAddress, orderType: "mint_nft", dstChainId: nftContract.chainId, dstToken: nftContract.currency, dstAmount: nftContract.price, contractAddress: nftContract.contractAddress, encodedData: "0x", metadata: {
|
|
83
|
+
return (_jsx(AnySpendCustom, { loadOrder: loadOrder, mode: mode, activeTab: "fiat", showFiatOption: showFiatOption, recipientAddress: recipientAddress, orderType: "mint_nft", dstChainId: nftContract.chainId, dstToken: nftContract.currency, dstAmount: nftContract.price, contractAddress: nftContract.contractAddress, encodedData: "0x", metadata: {
|
|
84
84
|
type: "mint_nft",
|
|
85
85
|
nftContract: nftContract,
|
|
86
86
|
}, header: header, onSuccess: onSuccess, onShowPointsDetail: onShowPointsDetail, senderAddress: senderAddress, slots: slots, content: content, theme: theme }));
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { components } from "../../../anyspend/types/api";
|
|
2
2
|
import type { AnySpendContent, AnySpendSlots, AnySpendTheme } from "./types/customization";
|
|
3
|
-
export declare function AnySpendStakeUpside({ loadOrder, mode, beneficiaryAddress, stakeAmount, stakingContractAddress, token, onSuccess, activeTab, senderAddress, slots, content, theme, }: {
|
|
3
|
+
export declare function AnySpendStakeUpside({ loadOrder, mode, beneficiaryAddress, stakeAmount, stakingContractAddress, token, onSuccess, activeTab, senderAddress, slots, content, theme, showFiatOption, }: {
|
|
4
4
|
loadOrder?: string;
|
|
5
5
|
mode?: "modal" | "page";
|
|
6
6
|
beneficiaryAddress: string;
|
|
@@ -14,4 +14,6 @@ export declare function AnySpendStakeUpside({ loadOrder, mode, beneficiaryAddres
|
|
|
14
14
|
slots?: AnySpendSlots;
|
|
15
15
|
content?: AnySpendContent;
|
|
16
16
|
theme?: AnySpendTheme;
|
|
17
|
+
/** Whether to show the "Pay with fiat" tab. Defaults to true. */
|
|
18
|
+
showFiatOption?: boolean;
|
|
17
19
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -14,7 +14,7 @@ function generateEncodedDataForStaking(amount, beneficiary) {
|
|
|
14
14
|
args: [beneficiary, BigInt(amount)],
|
|
15
15
|
});
|
|
16
16
|
}
|
|
17
|
-
export function AnySpendStakeUpside({ loadOrder, mode = "modal", beneficiaryAddress, stakeAmount, stakingContractAddress, token, onSuccess, activeTab, senderAddress, slots, content, theme, }) {
|
|
17
|
+
export function AnySpendStakeUpside({ loadOrder, mode = "modal", beneficiaryAddress, stakeAmount, stakingContractAddress, token, onSuccess, activeTab, senderAddress, slots, content, theme, showFiatOption = true, }) {
|
|
18
18
|
const header = () => (_jsx(_Fragment, { children: _jsxs("div", { className: "from-b3-react-background to-as-on-surface-1 mt-[-60px] w-full rounded-t-lg bg-gradient-to-t", children: [_jsx("div", { className: "h-[60px] w-full" }), _jsx("div", { className: "mb-1 flex w-full flex-col items-center gap-2 p-5", children: _jsxs("span", { className: "font-sf-rounded text-2xl font-semibold", children: ["Swap & Stake ", stakeAmount ? formatTokenAmount(BigInt(stakeAmount), token.decimals) : "", " ", token.symbol] }) })] }) }));
|
|
19
19
|
// Only generate encoded data if we have a valid beneficiary address
|
|
20
20
|
// This is used for the AnySpendCustom swap & stake flow
|
|
@@ -24,5 +24,5 @@ export function AnySpendStakeUpside({ loadOrder, mode = "modal", beneficiaryAddr
|
|
|
24
24
|
const encodedData = generateEncodedDataForStaking(stakeAmount, beneficiaryAddress);
|
|
25
25
|
return (_jsx(AnySpendCustom, { loadOrder: loadOrder, mode: mode, recipientAddress: beneficiaryAddress, orderType: "custom", dstChainId: base.id, dstToken: token, dstAmount: stakeAmount, contractAddress: stakingContractAddress, encodedData: encodedData, metadata: {
|
|
26
26
|
action: `stake ${token.symbol}`,
|
|
27
|
-
}, header: header, onSuccess: onSuccess, showRecipient: true, activeTab: activeTab, senderAddress: senderAddress, slots: slots, content: content, theme: theme }));
|
|
27
|
+
}, header: header, onSuccess: onSuccess, showRecipient: true, activeTab: activeTab, showFiatOption: showFiatOption, senderAddress: senderAddress, slots: slots, content: content, theme: theme }));
|
|
28
28
|
}
|
|
@@ -10,6 +10,11 @@ export interface BetterAuthSignInProps {
|
|
|
10
10
|
showEmail?: boolean;
|
|
11
11
|
/** URL to redirect to after password reset link is clicked. Token is appended as ?token=... */
|
|
12
12
|
passwordResetRedirectTo?: string;
|
|
13
|
+
/**
|
|
14
|
+
* URL Better Auth redirects to after server-side email verification. Render
|
|
15
|
+
* `BetterAuthVerifyEmail` at this route so the user gets a confirmation page.
|
|
16
|
+
*/
|
|
17
|
+
verifyEmailRedirectTo?: string;
|
|
13
18
|
/** Called after successful authentication */
|
|
14
19
|
onSuccess?: () => void;
|
|
15
20
|
/** Called on authentication error */
|
|
@@ -31,4 +36,4 @@ export interface BetterAuthSignInProps {
|
|
|
31
36
|
* />
|
|
32
37
|
* ```
|
|
33
38
|
*/
|
|
34
|
-
export declare function BetterAuthSignIn({ title, subtitle, socialProviders, showEmail, passwordResetRedirectTo, onSuccess, onError, className, }: BetterAuthSignInProps): import("react/jsx-runtime").JSX.Element | null;
|
|
39
|
+
export declare function BetterAuthSignIn({ title, subtitle, socialProviders, showEmail, passwordResetRedirectTo, verifyEmailRedirectTo, onSuccess, onError, className, }: BetterAuthSignInProps): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -28,7 +28,7 @@ const DEFAULT_SOCIAL_PROVIDERS = [
|
|
|
28
28
|
* />
|
|
29
29
|
* ```
|
|
30
30
|
*/
|
|
31
|
-
export function BetterAuthSignIn({ title, subtitle = "Enter your credentials to access your account", socialProviders = DEFAULT_SOCIAL_PROVIDERS.map(p => p.id), showEmail = true, passwordResetRedirectTo, onSuccess, onError, className, }) {
|
|
31
|
+
export function BetterAuthSignIn({ title, subtitle = "Enter your credentials to access your account", socialProviders = DEFAULT_SOCIAL_PROVIDERS.map(p => p.id), showEmail = true, passwordResetRedirectTo, verifyEmailRedirectTo, onSuccess, onError, className, }) {
|
|
32
32
|
const { signInWithEmail, signUpWithEmail, signInWithSocial, requestPasswordReset } = useBetterAuth();
|
|
33
33
|
const isAuthenticated = useAuthStore(state => state.isAuthenticated);
|
|
34
34
|
const isAuthenticating = useAuthStore(state => state.isAuthenticating);
|
|
@@ -98,7 +98,7 @@ export function BetterAuthSignIn({ title, subtitle = "Enter your credentials to
|
|
|
98
98
|
setIsLoading(true);
|
|
99
99
|
setError(null);
|
|
100
100
|
if (mode === "sign-up") {
|
|
101
|
-
await signUpWithEmail(normalizedEmail, password, name.trim());
|
|
101
|
+
await signUpWithEmail(normalizedEmail, password, name.trim(), verifyEmailRedirectTo);
|
|
102
102
|
}
|
|
103
103
|
else {
|
|
104
104
|
await signInWithEmail(normalizedEmail, password);
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
export type BetterAuthVerifyEmailState = "success" | "expired" | "invalid" | "already-verified" | "error";
|
|
2
|
+
export interface BetterAuthVerifyEmailProps {
|
|
3
|
+
/**
|
|
4
|
+
* Error code from the callback URL's `?error=` query param. Pass `null` /
|
|
5
|
+
* `undefined` when the user landed here cleanly (successful verification).
|
|
6
|
+
* Better Auth appends this param when server-side verification fails.
|
|
7
|
+
*/
|
|
8
|
+
errorCode?: string | null;
|
|
9
|
+
/** Called when the user clicks the "Go to sign in" button. */
|
|
10
|
+
onGoToSignIn?: () => void;
|
|
11
|
+
/** Fallback href used when `onGoToSignIn` is not provided. Defaults to "/login". */
|
|
12
|
+
signInHref?: string;
|
|
13
|
+
/** Optional override for the success headline. */
|
|
14
|
+
successTitle?: string;
|
|
15
|
+
/** Optional override for the success body text. */
|
|
16
|
+
successMessage?: string;
|
|
17
|
+
/** Optional class name for the root container. */
|
|
18
|
+
className?: string;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Standalone email-verification confirmation page. Render on the route you
|
|
22
|
+
* set as `callbackURL` when calling `betterAuthClient.sendVerificationEmail`
|
|
23
|
+
* (or the `verifyCallbackURL` arg on `useBetterAuth().signUpWithEmail`).
|
|
24
|
+
*
|
|
25
|
+
* Better Auth verifies the token server-side before redirecting here. This
|
|
26
|
+
* component only displays the outcome based on the `?error=` query param.
|
|
27
|
+
*
|
|
28
|
+
* Usage:
|
|
29
|
+
* ```tsx
|
|
30
|
+
* const error = new URLSearchParams(window.location.search).get("error");
|
|
31
|
+
* <BetterAuthVerifyEmail
|
|
32
|
+
* errorCode={error}
|
|
33
|
+
* onGoToSignIn={() => router.push("/login")}
|
|
34
|
+
* />
|
|
35
|
+
* ```
|
|
36
|
+
*/
|
|
37
|
+
export declare function BetterAuthVerifyEmail({ errorCode, onGoToSignIn, signInHref, successTitle, successMessage, className, }: BetterAuthVerifyEmailProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Button } from "../../../../global-account/react/index.js";
|
|
3
|
+
import { debugB3React } from "../../../../shared/utils/debug.js";
|
|
4
|
+
const debug = debugB3React("BetterAuthVerifyEmail");
|
|
5
|
+
function classifyError(code) {
|
|
6
|
+
if (!code)
|
|
7
|
+
return "success";
|
|
8
|
+
const normalized = code.toLowerCase();
|
|
9
|
+
// Exact matches for Better Auth's documented verification error codes.
|
|
10
|
+
if (normalized === "expired_token")
|
|
11
|
+
return "expired";
|
|
12
|
+
if (normalized === "invalid_token")
|
|
13
|
+
return "invalid";
|
|
14
|
+
if (normalized === "already_verified" || normalized === "email_already_verified")
|
|
15
|
+
return "already-verified";
|
|
16
|
+
// Loose fallbacks for close variants. Order matters — check "already" before
|
|
17
|
+
// "verified" so `email_already_verified` maps to already-verified, not invalid.
|
|
18
|
+
if (normalized.includes("expired"))
|
|
19
|
+
return "expired";
|
|
20
|
+
if (normalized.includes("already"))
|
|
21
|
+
return "already-verified";
|
|
22
|
+
if (normalized.includes("invalid"))
|
|
23
|
+
return "invalid";
|
|
24
|
+
return "error";
|
|
25
|
+
}
|
|
26
|
+
const COPY = {
|
|
27
|
+
success: {
|
|
28
|
+
title: "Email verified",
|
|
29
|
+
message: "Your email is confirmed. You can now sign in to your account.",
|
|
30
|
+
},
|
|
31
|
+
expired: {
|
|
32
|
+
title: "Link expired",
|
|
33
|
+
message: "This verification link has expired. Request a new one from the sign-in page.",
|
|
34
|
+
},
|
|
35
|
+
invalid: {
|
|
36
|
+
title: "Invalid link",
|
|
37
|
+
message: "This verification link is invalid or has already been used. Try signing in or request a new link.",
|
|
38
|
+
},
|
|
39
|
+
"already-verified": {
|
|
40
|
+
title: "Already verified",
|
|
41
|
+
message: "Your email was already confirmed. You can sign in now.",
|
|
42
|
+
},
|
|
43
|
+
error: {
|
|
44
|
+
title: "Verification failed",
|
|
45
|
+
message: "We couldn't verify your email. Request a new link from the sign-in page.",
|
|
46
|
+
},
|
|
47
|
+
};
|
|
48
|
+
/**
|
|
49
|
+
* Standalone email-verification confirmation page. Render on the route you
|
|
50
|
+
* set as `callbackURL` when calling `betterAuthClient.sendVerificationEmail`
|
|
51
|
+
* (or the `verifyCallbackURL` arg on `useBetterAuth().signUpWithEmail`).
|
|
52
|
+
*
|
|
53
|
+
* Better Auth verifies the token server-side before redirecting here. This
|
|
54
|
+
* component only displays the outcome based on the `?error=` query param.
|
|
55
|
+
*
|
|
56
|
+
* Usage:
|
|
57
|
+
* ```tsx
|
|
58
|
+
* const error = new URLSearchParams(window.location.search).get("error");
|
|
59
|
+
* <BetterAuthVerifyEmail
|
|
60
|
+
* errorCode={error}
|
|
61
|
+
* onGoToSignIn={() => router.push("/login")}
|
|
62
|
+
* />
|
|
63
|
+
* ```
|
|
64
|
+
*/
|
|
65
|
+
export function BetterAuthVerifyEmail({ errorCode, onGoToSignIn, signInHref = "/login", successTitle, successMessage, className, }) {
|
|
66
|
+
const state = classifyError(errorCode);
|
|
67
|
+
const isSuccess = state === "success" || state === "already-verified";
|
|
68
|
+
const copy = COPY[state];
|
|
69
|
+
const title = isSuccess && successTitle ? successTitle : copy.title;
|
|
70
|
+
const message = isSuccess && successMessage ? successMessage : copy.message;
|
|
71
|
+
debug("Rendering verify-email state", { state, errorCode });
|
|
72
|
+
const handleClick = () => {
|
|
73
|
+
if (onGoToSignIn) {
|
|
74
|
+
onGoToSignIn();
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
if (typeof window !== "undefined") {
|
|
78
|
+
window.location.href = signInHref;
|
|
79
|
+
}
|
|
80
|
+
};
|
|
81
|
+
return (_jsx("div", { className: `w-full max-w-[400px] px-6 ${className || ""}`, children: _jsxs("div", { className: "space-y-6 text-center", children: [_jsx("div", { className: `mx-auto flex h-12 w-12 items-center justify-center rounded-full ${isSuccess ? "bg-green-100" : "bg-red-100"}`, children: isSuccess ? (_jsx("svg", { className: "h-6 w-6 text-green-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })) : (_jsx("svg", { className: "h-6 w-6 text-red-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })) }), _jsxs("div", { children: [_jsx("h1", { className: "text-[28px] font-semibold tracking-tight text-gray-900 dark:text-gray-100", children: title }), _jsx("p", { className: "mt-3 text-[15px] text-gray-500 dark:text-gray-400", children: message })] }), _jsx(Button, { onClick: handleClick, className: "h-11 w-full bg-gray-900 text-[15px] font-medium text-white hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100", children: isSuccess ? "Go to sign in" : "Back to sign in" })] }) }));
|
|
82
|
+
}
|
|
@@ -3,4 +3,4 @@ import { SignInWithB3ModalProps } from "../../../../global-account/react";
|
|
|
3
3
|
* Component that manages the authentication flow for Sign In With B3
|
|
4
4
|
* Handles different login providers, authentication steps, and session key management
|
|
5
5
|
*/
|
|
6
|
-
export declare function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onError, chain, sessionKeyAddress, partnerId, closeAfterLogin, source, signersEnabled, }: SignInWithB3ModalProps): import("react/jsx-runtime").JSX.Element | null;
|
|
6
|
+
export declare function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onError, chain, sessionKeyAddress, partnerId, closeAfterLogin, source, signersEnabled, verifyEmailRedirectTo, }: SignInWithB3ModalProps): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -13,7 +13,7 @@ const MAX_REFETCH_ATTEMPTS = 20;
|
|
|
13
13
|
* Component that manages the authentication flow for Sign In With B3
|
|
14
14
|
* Handles different login providers, authentication steps, and session key management
|
|
15
15
|
*/
|
|
16
|
-
export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onError, chain, sessionKeyAddress, partnerId, closeAfterLogin = false, source = "signInWithB3Button", signersEnabled = false, }) {
|
|
16
|
+
export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySuccess, onError, chain, sessionKeyAddress, partnerId, closeAfterLogin = false, source = "signInWithB3Button", signersEnabled = false, verifyEmailRedirectTo, }) {
|
|
17
17
|
const { automaticallySetFirstEoa, authStrategy } = useB3Config();
|
|
18
18
|
// skipAutoConnect: this component intentionally logs out on mount to show a fresh login screen.
|
|
19
19
|
// AuthenticationProvider is the sole owner of useAutoConnect to avoid competing auth cycles.
|
|
@@ -244,7 +244,7 @@ export function SignInWithB3Flow({ strategies, onLoginSuccess, onSessionKeySucce
|
|
|
244
244
|
// Better Auth manages its own loading/verification states internally.
|
|
245
245
|
// Don't gate on isAuthenticating — it would unmount the component
|
|
246
246
|
// and lose verification state when setIsAuthenticating(false) fires.
|
|
247
|
-
content = _jsx(LoginStepBetterAuth, { onSuccess: () => handleLoginSuccess({}), onError: onError });
|
|
247
|
+
content = (_jsx(LoginStepBetterAuth, { onSuccess: () => handleLoginSuccess({}), onError: onError, verifyEmailRedirectTo: verifyEmailRedirectTo }));
|
|
248
248
|
}
|
|
249
249
|
else if (!readyToShowLogin || isAuthenticating || isFetchingSigners) {
|
|
250
250
|
content = (_jsx(LoginStepContainer, { partnerId: partnerId, children: _jsx("div", { className: "my-8 flex min-h-[350px] items-center justify-center", children: _jsx(Loading, { variant: "white", size: "lg" }) }) }));
|
package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStepBetterAuth.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
interface LoginStepBetterAuthProps {
|
|
2
2
|
onSuccess?: () => void;
|
|
3
3
|
onError?: (error: Error) => Promise<void>;
|
|
4
|
+
/** URL Better Auth redirects to after server-side email verification. */
|
|
5
|
+
verifyEmailRedirectTo?: string;
|
|
4
6
|
}
|
|
5
|
-
export declare function LoginStepBetterAuth({ onSuccess, onError }: LoginStepBetterAuthProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export declare function LoginStepBetterAuth({ onSuccess, onError, verifyEmailRedirectTo }: LoginStepBetterAuthProps): import("react/jsx-runtime").JSX.Element;
|
|
6
8
|
export {};
|
|
@@ -14,7 +14,7 @@ const SOCIAL_PROVIDERS = [
|
|
|
14
14
|
{ id: "microsoft", label: "Microsoft" },
|
|
15
15
|
{ id: "slack", label: "Slack" },
|
|
16
16
|
];
|
|
17
|
-
export function LoginStepBetterAuth({ onSuccess, onError }) {
|
|
17
|
+
export function LoginStepBetterAuth({ onSuccess, onError, verifyEmailRedirectTo }) {
|
|
18
18
|
const { partnerId } = useB3Config();
|
|
19
19
|
const { signInWithEmail, signUpWithEmail, signInWithSocial, requestPasswordReset } = useBetterAuth();
|
|
20
20
|
const [mode, setMode] = useState("sign-in");
|
|
@@ -45,7 +45,7 @@ export function LoginStepBetterAuth({ onSuccess, onError }) {
|
|
|
45
45
|
setError(null);
|
|
46
46
|
if (mode === "sign-up") {
|
|
47
47
|
debug("Signing up", { email: normalizedEmail, name: name.trim() });
|
|
48
|
-
await signUpWithEmail(normalizedEmail, password, name.trim());
|
|
48
|
+
await signUpWithEmail(normalizedEmail, password, name.trim(), verifyEmailRedirectTo);
|
|
49
49
|
}
|
|
50
50
|
else {
|
|
51
51
|
debug("Signing in", { email: normalizedEmail });
|
|
@@ -8,6 +8,7 @@ export { useB3Config } from "./B3Provider/useB3Config";
|
|
|
8
8
|
export { StyleRoot } from "./StyleRoot";
|
|
9
9
|
export { BetterAuthResetPassword, type BetterAuthResetPasswordProps } from "./SignInWithB3/BetterAuthResetPassword";
|
|
10
10
|
export { BetterAuthSignIn, type BetterAuthSignInProps } from "./SignInWithB3/BetterAuthSignIn";
|
|
11
|
+
export { BetterAuthVerifyEmail, type BetterAuthVerifyEmailProps, type BetterAuthVerifyEmailState, } from "./SignInWithB3/BetterAuthVerifyEmail";
|
|
11
12
|
export { AuthButton } from "./SignInWithB3/components/AuthButton";
|
|
12
13
|
export { PermissionItem } from "./SignInWithB3/components/PermissionItem";
|
|
13
14
|
export { WalletRow } from "./SignInWithB3/components/WalletRow";
|
|
@@ -10,6 +10,7 @@ export { StyleRoot } from "./StyleRoot.js";
|
|
|
10
10
|
// SignInWithB3 Components
|
|
11
11
|
export { BetterAuthResetPassword } from "./SignInWithB3/BetterAuthResetPassword.js";
|
|
12
12
|
export { BetterAuthSignIn } from "./SignInWithB3/BetterAuthSignIn.js";
|
|
13
|
+
export { BetterAuthVerifyEmail, } from "./SignInWithB3/BetterAuthVerifyEmail.js";
|
|
13
14
|
export { AuthButton } from "./SignInWithB3/components/AuthButton.js";
|
|
14
15
|
export { PermissionItem } from "./SignInWithB3/components/PermissionItem.js";
|
|
15
16
|
export { WalletRow } from "./SignInWithB3/components/WalletRow.js";
|
|
@@ -13,7 +13,7 @@ export declare class EmailVerificationRequiredError extends Error {
|
|
|
13
13
|
*/
|
|
14
14
|
export declare function useBetterAuth(): {
|
|
15
15
|
signInWithEmail: (email: string, password: string) => Promise<import("@feathersjs/authentication").AuthenticationResult>;
|
|
16
|
-
signUpWithEmail: (email: string, password: string, name: string) => Promise<import("@feathersjs/authentication").AuthenticationResult>;
|
|
16
|
+
signUpWithEmail: (email: string, password: string, name: string, verifyCallbackURL?: string) => Promise<import("@feathersjs/authentication").AuthenticationResult>;
|
|
17
17
|
signInWithSocial: (provider: BetterAuthSocialProvider) => Promise<void>;
|
|
18
18
|
requestPasswordReset: (email: string, redirectTo?: string) => Promise<{
|
|
19
19
|
data: {
|
|
@@ -65,7 +65,7 @@ export function useBetterAuth() {
|
|
|
65
65
|
throw error;
|
|
66
66
|
}
|
|
67
67
|
}, [exchangeForFeathersJWT, setIsAuthenticating, setHasStartedConnecting]);
|
|
68
|
-
const signUpWithEmail = useCallback(async (email, password, name) => {
|
|
68
|
+
const signUpWithEmail = useCallback(async (email, password, name, verifyCallbackURL) => {
|
|
69
69
|
debug("Signing up with email", { email, name });
|
|
70
70
|
setHasStartedConnecting(true);
|
|
71
71
|
setIsAuthenticating(true);
|
|
@@ -76,11 +76,12 @@ export function useBetterAuth() {
|
|
|
76
76
|
}
|
|
77
77
|
const token = result.data?.token;
|
|
78
78
|
if (!token) {
|
|
79
|
-
// requireEmailVerification is enabled — send verification email
|
|
80
|
-
//
|
|
79
|
+
// requireEmailVerification is enabled — send verification email with
|
|
80
|
+
// a callbackURL Better Auth redirects to after server-side verify.
|
|
81
|
+
// Pass verifyCallbackURL to land on a dedicated confirmation page.
|
|
81
82
|
await betterAuthClient.sendVerificationEmail({
|
|
82
83
|
email,
|
|
83
|
-
callbackURL: `${window.location.origin}?authStrategy=better-auth`,
|
|
84
|
+
callbackURL: verifyCallbackURL || `${window.location.origin}?authStrategy=better-auth`,
|
|
84
85
|
});
|
|
85
86
|
throw new EmailVerificationRequiredError();
|
|
86
87
|
}
|
|
@@ -41,6 +41,8 @@ export interface SignInWithB3ModalProps extends BaseModalProps {
|
|
|
41
41
|
source?: "signInWithB3Button" | "requestPermissions";
|
|
42
42
|
/** Whether to show the signers enabled modal */
|
|
43
43
|
signersEnabled?: boolean;
|
|
44
|
+
/** URL Better Auth redirects to after server-side email verification. */
|
|
45
|
+
verifyEmailRedirectTo?: string;
|
|
44
46
|
}
|
|
45
47
|
/**
|
|
46
48
|
* Props for the Request Permissions modal
|
|
@@ -609,6 +611,8 @@ export interface AnySpendDepositModalProps extends BaseModalProps {
|
|
|
609
611
|
actionLabel?: string;
|
|
610
612
|
/** Whether to show chain selection step. Defaults to true if sourceTokenChainId is not provided */
|
|
611
613
|
showChainSelection?: boolean;
|
|
614
|
+
/** Whether to show the "Fund with Fiat" option in the deposit options list. Defaults to true */
|
|
615
|
+
showFiatOption?: boolean;
|
|
612
616
|
/** Minimum pool size for filtering tokens (default: 1,000,000) */
|
|
613
617
|
minPoolSize?: number;
|
|
614
618
|
/** Custom title for chain selection step */
|