[SDK] Add Monad chain definition (#8465)

Author: joaquim-verges

.changeset/angry-monkeys-dress.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Add customization options for the signIn modal shown from useFetchWithPayment

.changeset/moody-camels-hear.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Add monad chain definition

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" },
+});

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";

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);
   };
 }

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);

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<UseConnectModalOptions, "client" | "theme">;
+  /**
+   * 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(
           <SignInRequiredModal
             theme={theme}
+            title={options?.signInRequiredModal?.title}
+            description={options?.signInRequiredModal?.description}
+            buttonLabel={options?.signInRequiredModal?.buttonLabel}
             onSignIn={async () => {
               // Close the SignInRequiredModal
               setRootEl(null);

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 (
     <CustomThemeProvider theme={theme}>
@@ -35,10 +45,10 @@ export function SignInRequiredModal(props: SignInRequiredModalProps) {
           }
         }}
         size="compact"
-        title="Sign in required"
+        title={title}
       >
         <Container p="lg">
-          <ModalHeader title="Sign in required" />
+          <ModalHeader title={title} />
 
           <Container
             flex="column"
@@ -55,15 +65,15 @@ export function SignInRequiredModal(props: SignInRequiredModalProps) {
                 lineHeight: 1.5,
               }}
             >
-              Account required to complete payment, please sign in to continue.
+              {description}
             </Text>
           </Container>
         </Container>
 
         {/* Action Buttons */}
         <ScreenBottomContainer>
           <Button fullWidth gap="xs" onClick={onSignIn} variant="accent">
-            Sign in
+            {buttonLabel}
           </Button>
           <Button fullWidth gap="xs" onClick={onCancel} variant="secondary">
             Cancel