@b3dotfun/sdk 0.1.69-alpha.21 → 0.1.69-alpha.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/dist/cjs/anyspend/react/components/AnySpend.d.ts +2 -0
  2. package/dist/cjs/anyspend/react/components/AnySpend.js +12 -4
  3. package/dist/cjs/anyspend/react/components/AnySpendCollectorClubPurchase.d.ts +5 -1
  4. package/dist/cjs/anyspend/react/components/AnySpendCollectorClubPurchase.js +2 -2
  5. package/dist/cjs/anyspend/react/components/AnySpendCustom.d.ts +2 -0
  6. package/dist/cjs/anyspend/react/components/AnySpendCustom.js +7 -3
  7. package/dist/cjs/anyspend/react/components/AnySpendDeposit.d.ts +3 -1
  8. package/dist/cjs/anyspend/react/components/AnySpendDeposit.js +3 -3
  9. package/dist/cjs/anyspend/react/components/AnySpendNFT.d.ts +3 -1
  10. package/dist/cjs/anyspend/react/components/AnySpendNFT.js +2 -2
  11. package/dist/cjs/anyspend/react/components/AnySpendStakeUpside.d.ts +3 -1
  12. package/dist/cjs/anyspend/react/components/AnySpendStakeUpside.js +2 -2
  13. package/dist/cjs/global-account/react/components/SignInWithB3/BetterAuthResetPassword.js +3 -2
  14. package/dist/cjs/global-account/react/components/SignInWithB3/BetterAuthSignIn.js +13 -3
  15. package/dist/cjs/global-account/react/components/SignInWithB3/components/PasswordInput.d.ts +10 -0
  16. package/dist/cjs/global-account/react/components/SignInWithB3/components/PasswordInput.js +10 -0
  17. package/dist/cjs/global-account/react/components/SignInWithB3/steps/LoginStepBetterAuth.js +6 -3
  18. package/dist/cjs/global-account/react/stores/useModalStore.d.ts +2 -0
  19. package/dist/esm/anyspend/react/components/AnySpend.d.ts +2 -0
  20. package/dist/esm/anyspend/react/components/AnySpend.js +12 -4
  21. package/dist/esm/anyspend/react/components/AnySpendCollectorClubPurchase.d.ts +5 -1
  22. package/dist/esm/anyspend/react/components/AnySpendCollectorClubPurchase.js +2 -2
  23. package/dist/esm/anyspend/react/components/AnySpendCustom.d.ts +2 -0
  24. package/dist/esm/anyspend/react/components/AnySpendCustom.js +7 -3
  25. package/dist/esm/anyspend/react/components/AnySpendDeposit.d.ts +3 -1
  26. package/dist/esm/anyspend/react/components/AnySpendDeposit.js +3 -3
  27. package/dist/esm/anyspend/react/components/AnySpendNFT.d.ts +3 -1
  28. package/dist/esm/anyspend/react/components/AnySpendNFT.js +2 -2
  29. package/dist/esm/anyspend/react/components/AnySpendStakeUpside.d.ts +3 -1
  30. package/dist/esm/anyspend/react/components/AnySpendStakeUpside.js +2 -2
  31. package/dist/esm/global-account/react/components/SignInWithB3/BetterAuthResetPassword.js +4 -3
  32. package/dist/esm/global-account/react/components/SignInWithB3/BetterAuthSignIn.js +14 -4
  33. package/dist/esm/global-account/react/components/SignInWithB3/components/PasswordInput.d.ts +10 -0
  34. package/dist/esm/global-account/react/components/SignInWithB3/components/PasswordInput.js +7 -0
  35. package/dist/esm/global-account/react/components/SignInWithB3/steps/LoginStepBetterAuth.js +6 -3
  36. package/dist/esm/global-account/react/stores/useModalStore.d.ts +2 -0
  37. package/dist/styles/index.css +1 -1
  38. package/dist/types/anyspend/react/components/AnySpend.d.ts +2 -0
  39. package/dist/types/anyspend/react/components/AnySpendCollectorClubPurchase.d.ts +5 -1
  40. package/dist/types/anyspend/react/components/AnySpendCustom.d.ts +2 -0
  41. package/dist/types/anyspend/react/components/AnySpendDeposit.d.ts +3 -1
  42. package/dist/types/anyspend/react/components/AnySpendNFT.d.ts +3 -1
  43. package/dist/types/anyspend/react/components/AnySpendStakeUpside.d.ts +3 -1
  44. package/dist/types/global-account/react/components/SignInWithB3/components/PasswordInput.d.ts +10 -0
  45. package/dist/types/global-account/react/stores/useModalStore.d.ts +2 -0
  46. package/package.json +1 -1
  47. package/src/anyspend/react/components/AnySpend.tsx +24 -12
  48. package/src/anyspend/react/components/AnySpendCollectorClubPurchase.tsx +6 -0
  49. package/src/anyspend/react/components/AnySpendCustom.tsx +12 -2
  50. package/src/anyspend/react/components/AnySpendDeposit.tsx +38 -31
  51. package/src/anyspend/react/components/AnySpendNFT.tsx +4 -0
  52. package/src/anyspend/react/components/AnySpendStakeUpside.tsx +4 -0
  53. package/src/global-account/react/components/SignInWithB3/BetterAuthResetPassword.tsx +6 -7
  54. package/src/global-account/react/components/SignInWithB3/BetterAuthSignIn.tsx +20 -6
  55. package/src/global-account/react/components/SignInWithB3/components/PasswordInput.tsx +62 -0
  56. package/src/global-account/react/components/SignInWithB3/steps/LoginStepBetterAuth.tsx +9 -4
  57. package/src/global-account/react/stores/useModalStore.ts +2 -0
@@ -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
  }
@@ -1,8 +1,9 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Button, Input } from "../../../../global-account/react/index.js";
2
+ import { Button } from "../../../../global-account/react/index.js";
3
3
  import { debugB3React } from "../../../../shared/utils/debug.js";
4
4
  import { useState } from "react";
5
5
  import { useBetterAuth } from "../../hooks/useBetterAuth.js";
6
+ import { PasswordInput } from "./components/PasswordInput.js";
6
7
  const debug = debugB3React("BetterAuthResetPassword");
7
8
  /**
8
9
  * Standalone reset password form. Render this on your reset password page.
@@ -57,8 +58,8 @@ export function BetterAuthResetPassword({ token, onSuccess, onError, className }
57
58
  if (!token) {
58
59
  return (_jsx("div", { className: `w-full max-w-[400px] px-6 text-center ${className || ""}`, children: _jsx("p", { className: "text-sm text-red-500", children: "Invalid or missing reset token." }) }));
59
60
  }
60
- return (_jsxs("div", { className: `w-full max-w-[400px] px-6 ${className || ""}`, children: [_jsxs("div", { className: "mb-10 text-center", children: [_jsx("h1", { className: "text-[28px] font-semibold tracking-tight text-gray-900 dark:text-gray-100", children: success ? "Password reset" : "Set new password" }), _jsx("p", { className: "mt-3 text-[15px] text-gray-500 dark:text-gray-400", children: success ? "Your password has been updated." : "Enter your new password below." })] }), success ? (_jsx("div", { className: "space-y-4 text-center", children: _jsx("div", { className: "mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100", children: _jsx("svg", { className: "h-6 w-6 text-green-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }) })) : (_jsxs("div", { className: "space-y-5", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300", children: "New password" }), _jsx(Input, { type: "password", placeholder: "At least 8 characters", value: password, onChange: e => setPassword(e.target.value), disabled: isLoading, className: "h-11 px-4 text-[15px]" })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300", children: "Confirm password" }), _jsx(Input, { type: "password", placeholder: "Repeat your password", value: confirmPassword, onChange: e => setConfirmPassword(e.target.value), disabled: isLoading, onKeyDown: e => {
61
+ return (_jsxs("div", { className: `w-full max-w-[400px] px-6 ${className || ""}`, children: [_jsxs("div", { className: "mb-10 text-center", children: [_jsx("h1", { className: "text-[28px] font-semibold tracking-tight text-gray-900 dark:text-gray-100", children: success ? "Password reset" : "Set new password" }), _jsx("p", { className: "mt-3 text-[15px] text-gray-500 dark:text-gray-400", children: success ? "Your password has been updated." : "Enter your new password below." })] }), success ? (_jsx("div", { className: "space-y-4 text-center", children: _jsx("div", { className: "mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100", children: _jsx("svg", { className: "h-6 w-6 text-green-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }) })) : (_jsxs("div", { className: "space-y-5", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300", children: "New password" }), _jsx(PasswordInput, { placeholder: "At least 8 characters", value: password, onChange: e => setPassword(e.target.value), disabled: isLoading, className: "h-11 px-4 pr-11 text-[15px]" })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300", children: "Confirm password" }), _jsx(PasswordInput, { placeholder: "Repeat your password", value: confirmPassword, onChange: e => setConfirmPassword(e.target.value), disabled: isLoading, onKeyDown: e => {
61
62
  if (e.key === "Enter")
62
63
  handleSubmit();
63
- }, className: "h-11 px-4 text-[15px]" })] }), error && _jsx("p", { className: "text-sm text-red-500", children: error }), _jsx(Button, { onClick: handleSubmit, disabled: isLoading, 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: isLoading ? "Resetting..." : "Reset password" })] }))] }));
64
+ }, className: "h-11 px-4 pr-11 text-[15px]" })] }), error && _jsx("p", { className: "text-sm text-red-500", children: error }), _jsx(Button, { onClick: handleSubmit, disabled: isLoading, 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: isLoading ? "Resetting..." : "Reset password" })] }))] }));
64
65
  }
@@ -1,8 +1,9 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { Button, Input, useAuthStore } from "../../../../global-account/react/index.js";
2
+ import { Button, Input, Loading, useAuthStore } from "../../../../global-account/react/index.js";
3
3
  import { debugB3React } from "../../../../shared/utils/debug.js";
4
4
  import { useState } from "react";
5
5
  import { EmailVerificationRequiredError, useBetterAuth, } from "../../hooks/useBetterAuth.js";
6
+ import { PasswordInput } from "./components/PasswordInput.js";
6
7
  import { strategyIcons, strategyLabels } from "./utils/signInUtils.js";
7
8
  const debug = debugB3React("BetterAuthSignIn");
8
9
  const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -30,6 +31,8 @@ const DEFAULT_SOCIAL_PROVIDERS = [
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
32
  const { signInWithEmail, signUpWithEmail, signInWithSocial, requestPasswordReset } = useBetterAuth();
32
33
  const isAuthenticated = useAuthStore(state => state.isAuthenticated);
34
+ const isAuthenticating = useAuthStore(state => state.isAuthenticating);
35
+ const hasStartedConnecting = useAuthStore(state => state.hasStartedConnecting);
33
36
  const [mode, setMode] = useState("sign-in");
34
37
  const [email, setEmail] = useState("");
35
38
  const [password, setPassword] = useState("");
@@ -42,7 +45,9 @@ export function BetterAuthSignIn({ title, subtitle = "Enter your credentials to
42
45
  const resolvedTitle = title ||
43
46
  (mode === "forgot-password" ? "Reset password" : mode === "sign-in" ? "Welcome back" : "Create an account");
44
47
  const resolvedSubtitle = mode === "forgot-password"
45
- ? "Enter your email and we'll send you a reset link"
48
+ ? resetEmailSent
49
+ ? "We've sent a password reset link to your email"
50
+ : "Enter your email and we'll send you a reset link"
46
51
  : subtitle || "Enter your credentials to access your account";
47
52
  const handleForgotPassword = async () => {
48
53
  const normalizedEmail = email.trim().toLowerCase();
@@ -67,6 +72,11 @@ export function BetterAuthSignIn({ title, subtitle = "Enter your credentials to
67
72
  const providers = socialProviders
68
73
  .map(id => DEFAULT_SOCIAL_PROVIDERS.find(p => p.id === id))
69
74
  .filter((p) => !!p);
75
+ // Show loading during session restore (before any user interaction) to prevent
76
+ // the login form from flashing briefly after OAuth redirect.
77
+ if (isAuthenticating && !hasStartedConnecting) {
78
+ return (_jsx("div", { className: `flex w-full max-w-[400px] items-center justify-center px-6 py-20 ${className || ""}`, children: _jsx(Loading, { variant: "primary", size: "lg" }) }));
79
+ }
70
80
  if (isAuthenticated) {
71
81
  return null;
72
82
  }
@@ -145,10 +155,10 @@ export function BetterAuthSignIn({ title, subtitle = "Enter your credentials to
145
155
  }, className: "font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400", children: "Back to sign in" }) })] })), showEmail && mode !== "forgot-password" && (_jsxs("div", { className: "space-y-5", children: [mode === "sign-up" && (_jsxs("div", { children: [_jsx("label", { className: "mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300", children: "Name" }), _jsx(Input, { type: "text", placeholder: "Your name", value: name, onChange: e => setName(e.target.value), disabled: isLoading, className: "h-11 px-4 text-[15px]" })] })), _jsxs("div", { children: [_jsx("label", { className: "mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300", children: "Email" }), _jsx(Input, { type: "email", placeholder: "name@company.com", value: email, onChange: e => setEmail(e.target.value), disabled: isLoading, className: "h-11 px-4 text-[15px]" })] }), _jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("label", { className: "block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300", children: "Password" }), mode === "sign-in" && (_jsx("button", { type: "button", onClick: () => {
146
156
  setMode("forgot-password");
147
157
  setError(null);
148
- }, className: "text-xs font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400", children: "Forgot password?" }))] }), _jsx(Input, { type: "password", placeholder: "Password", value: password, onChange: e => setPassword(e.target.value), disabled: isLoading, onKeyDown: e => {
158
+ }, className: "text-xs font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400", children: "Forgot password?" }))] }), _jsx(PasswordInput, { value: password, onChange: e => setPassword(e.target.value), disabled: isLoading, onKeyDown: e => {
149
159
  if (e.key === "Enter")
150
160
  handleEmailSubmit();
151
- }, className: "h-11 px-4 text-[15px]" })] }), error && _jsx("p", { className: "text-sm text-red-500", children: error }), _jsx(Button, { onClick: handleEmailSubmit, disabled: isLoading, 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: isLoading ? "Loading..." : mode === "sign-in" ? "Sign in" : "Sign up" })] })), providers.length > 0 && mode !== "forgot-password" && (_jsxs(_Fragment, { children: [showEmail && (_jsxs("div", { className: "my-8 flex items-center gap-4", children: [_jsx("div", { className: "h-px flex-1 bg-gray-200 dark:bg-gray-700" }), _jsx("span", { className: "text-xs text-gray-400", children: "Or continue with" }), _jsx("div", { className: "h-px flex-1 bg-gray-200 dark:bg-gray-700" })] })), _jsx("div", { className: "space-y-4", children: providers.map(provider => {
161
+ }, className: "h-11 px-4 pr-11 text-[15px]" }, mode)] }), error && _jsx("p", { className: "text-sm text-red-500", children: error }), _jsx(Button, { onClick: handleEmailSubmit, disabled: isLoading, 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: isLoading ? "Loading..." : mode === "sign-in" ? "Sign in" : "Sign up" })] })), providers.length > 0 && mode !== "forgot-password" && (_jsxs(_Fragment, { children: [showEmail && (_jsxs("div", { className: "my-8 flex items-center gap-4", children: [_jsx("div", { className: "h-px flex-1 bg-gray-200 dark:bg-gray-700" }), _jsx("span", { className: "text-xs text-gray-400", children: "Or continue with" }), _jsx("div", { className: "h-px flex-1 bg-gray-200 dark:bg-gray-700" })] })), _jsx("div", { className: "space-y-4", children: providers.map(provider => {
152
162
  const icon = strategyIcons[provider.id];
153
163
  const label = strategyLabels[provider.id] || provider.label;
154
164
  const isProviderLoading = loadingProvider === provider.id;
@@ -0,0 +1,10 @@
1
+ interface PasswordInputProps {
2
+ value: string;
3
+ onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
4
+ disabled?: boolean;
5
+ placeholder?: string;
6
+ onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
7
+ className?: string;
8
+ }
9
+ export declare function PasswordInput({ value, onChange, disabled, placeholder, onKeyDown, className, }: PasswordInputProps): import("react/jsx-runtime").JSX.Element;
10
+ export {};
@@ -0,0 +1,7 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Input } from "../../../../../global-account/react/index.js";
3
+ import { useState } from "react";
4
+ export function PasswordInput({ value, onChange, disabled, placeholder = "Password", onKeyDown, className, }) {
5
+ const [showPassword, setShowPassword] = useState(false);
6
+ return (_jsxs("div", { className: "relative", children: [_jsx(Input, { type: showPassword ? "text" : "password", placeholder: placeholder, value: value, onChange: onChange, disabled: disabled, onKeyDown: onKeyDown, className: className }), _jsx("button", { type: "button", onClick: () => setShowPassword(!showPassword), "aria-label": showPassword ? "Hide password" : "Show password", className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300", tabIndex: -1, children: showPassword ? (_jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" }) })) : (_jsxs("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: [_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" }), _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })] })) })] }));
7
+ }
@@ -4,6 +4,7 @@ import { debugB3React } from "../../../../../shared/utils/debug.js";
4
4
  import { useState } from "react";
5
5
  import { EmailVerificationRequiredError, useBetterAuth, } from "../../../hooks/useBetterAuth.js";
6
6
  import { AuthButton } from "../components/AuthButton.js";
7
+ import { PasswordInput } from "../components/PasswordInput.js";
7
8
  const debug = debugB3React("LoginStepBetterAuth");
8
9
  const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
9
10
  const SOCIAL_PROVIDERS = [
@@ -111,7 +112,9 @@ export function LoginStepBetterAuth({ onSuccess, onError }) {
111
112
  setPassword("");
112
113
  }, className: "text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300", children: "Back to sign in" })] }) }));
113
114
  }
114
- return (_jsx(LoginStepContainer, { partnerId: partnerId, children: mode === "forgot-password" ? (_jsxs("div", { className: "mb-6 w-full space-y-3 px-3", children: [_jsx("p", { className: "text-center text-sm font-medium text-gray-900 dark:text-gray-100", children: "Reset password" }), _jsx("p", { className: "text-center text-xs text-gray-500", children: "Enter your email and we'll send you a reset link" }), resetEmailSent ? (_jsx("div", { className: "space-y-3 py-4 text-center", children: _jsx("p", { className: "text-sm text-green-600", children: "Check your email for a reset link." }) })) : (_jsxs(_Fragment, { children: [_jsx(Input, { type: "email", placeholder: "you@example.com", value: email, onChange: event => setEmail(event.target.value), disabled: isLoading, onKeyDown: event => {
115
+ return (_jsx(LoginStepContainer, { partnerId: partnerId, children: mode === "forgot-password" ? (_jsxs("div", { className: "mb-6 w-full space-y-3 px-3", children: [_jsx("p", { className: "text-center text-sm font-medium text-gray-900 dark:text-gray-100", children: "Reset password" }), _jsx("p", { className: "text-center text-xs text-gray-500", children: resetEmailSent
116
+ ? "We've sent a password reset link to your email"
117
+ : "Enter your email and we'll send you a reset link" }), resetEmailSent ? (_jsx("div", { className: "space-y-3 py-4 text-center", children: _jsx("p", { className: "text-sm text-green-600", children: "Check your email for a reset link." }) })) : (_jsxs(_Fragment, { children: [_jsx(Input, { type: "email", placeholder: "you@example.com", value: email, onChange: event => setEmail(event.target.value), disabled: isLoading, onKeyDown: event => {
115
118
  if (event.key === "Enter")
116
119
  handleForgotPassword();
117
120
  } }), error && _jsx("p", { className: "text-sm text-red-500", children: error }), _jsx(Button, { onClick: handleForgotPassword, disabled: isLoading, className: "w-full", children: isLoading ? "Sending..." : "Send reset link" })] })), _jsx("button", { onClick: () => {
@@ -119,10 +122,10 @@ export function LoginStepBetterAuth({ onSuccess, onError }) {
119
122
  setShowEmailForm(true);
120
123
  setError(null);
121
124
  setResetEmailSent(false);
122
- }, className: "w-full text-center text-sm text-gray-500 hover:text-gray-700", children: "Back to sign in" })] })) : showEmailForm ? (_jsxs("div", { className: "mb-6 w-full space-y-3 px-3", children: [_jsx("p", { className: "text-center text-sm font-medium text-gray-900 dark:text-gray-100", children: mode === "sign-in" ? "Sign in with email" : "Create an account" }), mode === "sign-up" && (_jsx(Input, { type: "text", placeholder: "Your name", value: name, onChange: event => setName(event.target.value), disabled: isLoading })), _jsx(Input, { type: "email", placeholder: "you@example.com", value: email, onChange: event => setEmail(event.target.value), disabled: isLoading }), _jsx(Input, { type: "password", placeholder: "Password", value: password, onChange: event => setPassword(event.target.value), disabled: isLoading, onKeyDown: event => {
125
+ }, className: "w-full text-center text-sm text-gray-500 hover:text-gray-700", children: "Back to sign in" })] })) : showEmailForm ? (_jsxs("div", { className: "mb-6 w-full space-y-3 px-3", children: [_jsx("p", { className: "text-center text-sm font-medium text-gray-900 dark:text-gray-100", children: mode === "sign-in" ? "Sign in with email" : "Create an account" }), mode === "sign-up" && (_jsx(Input, { type: "text", placeholder: "Your name", value: name, onChange: event => setName(event.target.value), disabled: isLoading })), _jsx(Input, { type: "email", placeholder: "you@example.com", value: email, onChange: event => setEmail(event.target.value), disabled: isLoading }), _jsx(PasswordInput, { value: password, onChange: event => setPassword(event.target.value), disabled: isLoading, onKeyDown: event => {
123
126
  if (event.key === "Enter")
124
127
  handleEmailSubmit();
125
- } }), error && _jsx("p", { className: "text-sm text-red-500", children: error }), _jsx(Button, { onClick: handleEmailSubmit, disabled: isLoading, className: "w-full", children: isLoading ? "Loading..." : mode === "sign-in" ? "Sign in" : "Sign up" }), mode === "sign-in" && (_jsx("button", { onClick: () => {
128
+ }, className: "pr-11" }, mode), error && _jsx("p", { className: "text-sm text-red-500", children: error }), _jsx(Button, { onClick: handleEmailSubmit, disabled: isLoading, className: "w-full", children: isLoading ? "Loading..." : mode === "sign-in" ? "Sign in" : "Sign up" }), mode === "sign-in" && (_jsx("button", { onClick: () => {
126
129
  setMode("forgot-password");
127
130
  setError(null);
128
131
  }, disabled: isLoading, className: "w-full text-center text-xs text-gray-500 hover:text-gray-700", children: "Forgot password?" })), _jsx("button", { onClick: () => {
@@ -609,6 +609,8 @@ export interface AnySpendDepositModalProps extends BaseModalProps {
609
609
  actionLabel?: string;
610
610
  /** Whether to show chain selection step. Defaults to true if sourceTokenChainId is not provided */
611
611
  showChainSelection?: boolean;
612
+ /** Whether to show the "Fund with Fiat" option in the deposit options list. Defaults to true */
613
+ showFiatOption?: boolean;
612
614
  /** Minimum pool size for filtering tokens (default: 1,000,000) */
613
615
  minPoolSize?: number;
614
616
  /** Custom title for chain selection step */