From c720f7f67b112b79cd81dd1f5e6ce66e999a7aa5 Mon Sep 17 00:00:00 2001 From: Joaquim Verges Date: Thu, 27 Nov 2025 09:56:17 +1300 Subject: [PATCH] [SDK] Add Monad chain definition --- .changeset/angry-monkeys-dress.md | 5 ++++ .changeset/moody-camels-hear.md | 5 ++++ .../src/chains/chain-definitions/monad.ts | 20 ++++++++++++++ packages/thirdweb/src/exports/chains.ts | 1 + .../hooks/others/useInvalidateBalances.ts | 2 +- .../hooks/x402/useFetchWithPaymentCore.ts | 3 ++- .../web/hooks/x402/useFetchWithPayment.tsx | 26 +++++++++++++++++++ .../react/web/ui/x402/SignInRequiredModal.tsx | 20 ++++++++++---- 8 files changed, 75 insertions(+), 7 deletions(-) create mode 100644 .changeset/angry-monkeys-dress.md create mode 100644 .changeset/moody-camels-hear.md create mode 100644 packages/thirdweb/src/chains/chain-definitions/monad.ts diff --git a/.changeset/angry-monkeys-dress.md b/.changeset/angry-monkeys-dress.md new file mode 100644 index 00000000000..f6c8424c5d2 --- /dev/null +++ b/.changeset/angry-monkeys-dress.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +Add customization options for the signIn modal shown from useFetchWithPayment diff --git a/.changeset/moody-camels-hear.md b/.changeset/moody-camels-hear.md new file mode 100644 index 00000000000..1d248866c71 --- /dev/null +++ b/.changeset/moody-camels-hear.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +Add monad chain definition diff --git a/packages/thirdweb/src/chains/chain-definitions/monad.ts b/packages/thirdweb/src/chains/chain-definitions/monad.ts new file mode 100644 index 00000000000..294d9012edd --- /dev/null +++ b/packages/thirdweb/src/chains/chain-definitions/monad.ts @@ -0,0 +1,20 @@ +import { defineChain } from "../utils.js"; + +/** + * @chain + */ +export const monad = /*@__PURE__*/ defineChain({ + blockExplorers: [ + { + name: "Monad Vision", + url: "https://monadvision.com/", + }, + { + name: "Monad Scan", + url: "https://monadscan.com/", + }, + ], + id: 143, + name: "Monad", + nativeCurrency: { decimals: 18, name: "Mon", symbol: "MON" }, +}); diff --git a/packages/thirdweb/src/exports/chains.ts b/packages/thirdweb/src/exports/chains.ts index de552aae8f2..b02fc44e5cb 100644 --- a/packages/thirdweb/src/exports/chains.ts +++ b/packages/thirdweb/src/exports/chains.ts @@ -52,6 +52,7 @@ export { mantaPacificTestnet } from "../chains/chain-definitions/manta-pacific-t export { metalL2Testnet } from "../chains/chain-definitions/metal-l2-testnet.js"; export { mode } from "../chains/chain-definitions/mode.js"; export { modeTestnet } from "../chains/chain-definitions/mode-testnet.js"; +export { monad } from "../chains/chain-definitions/monad.js"; export { monadTestnet } from "../chains/chain-definitions/monad-testnet.js"; export { moonbeam } from "../chains/chain-definitions/moonbeam.js"; export { optimism } from "../chains/chain-definitions/optimism.js"; diff --git a/packages/thirdweb/src/react/core/hooks/others/useInvalidateBalances.ts b/packages/thirdweb/src/react/core/hooks/others/useInvalidateBalances.ts index 67b95698b69..1c8d321ac68 100644 --- a/packages/thirdweb/src/react/core/hooks/others/useInvalidateBalances.ts +++ b/packages/thirdweb/src/react/core/hooks/others/useInvalidateBalances.ts @@ -12,7 +12,7 @@ import { invalidateWalletBalance } from "../../providers/invalidateWalletBalance export function useInvalidateBalances() { const queryClient = useQueryClient(); - return ({ chainId }: { chainId?: number }) => { + return ({ chainId }: { chainId?: number } = {}) => { invalidateWalletBalance(queryClient, chainId); }; } diff --git a/packages/thirdweb/src/react/core/hooks/x402/useFetchWithPaymentCore.ts b/packages/thirdweb/src/react/core/hooks/x402/useFetchWithPaymentCore.ts index e40812fd201..6d3d567c152 100644 --- a/packages/thirdweb/src/react/core/hooks/x402/useFetchWithPaymentCore.ts +++ b/packages/thirdweb/src/react/core/hooks/x402/useFetchWithPaymentCore.ts @@ -99,8 +99,9 @@ export function useFetchWithPaymentCore( errorData: errorBody, onRetry: async () => { // Retry the entire fetch+error handling logic recursively + // Pass currentWallet to avoid re-showing connect modal with stale wallet state try { - const result = await executeFetch(); + const result = await executeFetch(currentWallet); resolve(result); } catch (error) { reject(error); diff --git a/packages/thirdweb/src/react/web/hooks/x402/useFetchWithPayment.tsx b/packages/thirdweb/src/react/web/hooks/x402/useFetchWithPayment.tsx index 1dcc2e116dd..02edb823aa1 100644 --- a/packages/thirdweb/src/react/web/hooks/x402/useFetchWithPayment.tsx +++ b/packages/thirdweb/src/react/web/hooks/x402/useFetchWithPayment.tsx @@ -46,6 +46,17 @@ type UseFetchWithPaymentConfig = UseFetchWithPaymentOptions & { * These options will be merged with the client, theme, and chain from the hook. */ connectOptions?: Omit; + /** + * Options to customize the SignInRequiredModal that appears when the user needs to sign in. + */ + signInRequiredModal?: { + /** Custom title for the modal header */ + title?: string; + /** Custom description text */ + description?: string; + /** Custom label for the sign in button */ + buttonLabel?: string; + }; }; /** @@ -73,6 +84,7 @@ type UseFetchWithPaymentConfig = UseFetchWithPaymentOptions & { * @param options.theme - Theme for the payment error modal (defaults to "dark") * @param options.fundWalletOptions - Customize the BuyWidget shown when user needs to fund their wallet * @param options.connectOptions - Customize the ConnectModal shown when user needs to sign in + * @param options.signInRequiredModal - Customize the SignInRequiredModal shown when user needs to sign in (title, description, buttonLabel) * @returns An object containing: * - `fetchWithPayment`: Function to make fetch requests with automatic payment handling (returns parsed data) * - `isPending`: Boolean indicating if a request is in progress @@ -146,6 +158,17 @@ type UseFetchWithPaymentConfig = UseFetchWithPaymentOptions & { * }); * ``` * + * ### Customize the sign in required modal + * ```tsx + * const { fetchWithPayment } = useFetchWithPayment(client, { + * signInRequiredModal: { + * title: "Authentication Required", + * description: "Please sign in to access this paid content.", + * buttonLabel: "Connect Wallet", + * } + * }); + * ``` + * * ### Disable the UI and handle errors yourself * ```tsx * const { fetchWithPayment, error } = useFetchWithPayment(client, { @@ -201,6 +224,9 @@ export function useFetchWithPayment( setRootEl( { // Close the SignInRequiredModal setRootEl(null); diff --git a/packages/thirdweb/src/react/web/ui/x402/SignInRequiredModal.tsx b/packages/thirdweb/src/react/web/ui/x402/SignInRequiredModal.tsx index 3aa312d4c3f..e573dbf2f5a 100644 --- a/packages/thirdweb/src/react/web/ui/x402/SignInRequiredModal.tsx +++ b/packages/thirdweb/src/react/web/ui/x402/SignInRequiredModal.tsx @@ -15,13 +15,23 @@ type SignInRequiredModalProps = { theme: Theme | "light" | "dark"; onSignIn: () => void; onCancel: () => void; + title?: string; + description?: string; + buttonLabel?: string; }; /** * @internal */ export function SignInRequiredModal(props: SignInRequiredModalProps) { - const { theme, onSignIn, onCancel } = props; + const { + theme, + onSignIn, + onCancel, + title = "Sign in required", + description = "Account required to complete payment, please sign in to continue.", + buttonLabel = "Sign in", + } = props; return ( @@ -35,10 +45,10 @@ export function SignInRequiredModal(props: SignInRequiredModalProps) { } }} size="compact" - title="Sign in required" + title={title} > - + - Account required to complete payment, please sign in to continue. + {description} @@ -63,7 +73,7 @@ export function SignInRequiredModal(props: SignInRequiredModalProps) { {/* Action Buttons */}