[react] Add switchNetworkBtnTitle prop in ConnectWallet and Web3Button (thirdweb-dev#1884)

Co-authored-by: Manan Tank <[email protected]>

Author: tommaay

.changeset/five-walls-smash.md

@@ -0,0 +1,17 @@
+---
+"@thirdweb-dev/react": patch
+---
+
+Add prop `switchNetworkBtnTitle` to `ConnectWallet` and `Web3Button` components to allow changing the "Switch Network" label on the button which is displayed when user needs to switch the network in the connected wallet.
+
+```tsx
+<ConnectWallet switchNetworkBtnTitle="Switch Chain" />
+```
+
+```tsx
+<Web3Button
+  switchNetworkBtnTitle="Switch Chain"
+  contractAddress="0x..."
+  action={someAction}
+/>
+```

packages/react/src/evm/components/Web3Button/index.tsx

@@ -186,6 +186,11 @@ export interface Web3ButtonProps<TActionFn extends ActionFn> {
      */
     welcomeScreen?: WelcomeScreen;
   };
+
+  /**
+   * Set a custom label for the "Switch Network" button
+   */
+  switchNetworkBtnTitle?: string;
 }
 
 /**
@@ -255,6 +260,8 @@ export const Web3Button = <TAction extends ActionFn>(
   const theme = props.theme || contextTheme || "dark";
 
   const locale = useTWLocale();
+  const switchNetworkLabel =
+    props.switchNetworkBtnTitle || locale.connectWallet.switchNetwork;
 
   const [confirmStatus, setConfirmStatus] = useState<"idle" | "waiting">(
     "idle",
@@ -337,7 +344,7 @@ export const Web3Button = <TAction extends ActionFn>(
         {confirmStatus === "waiting" ? (
           <Spinner size="sm" color={"primaryButtonText"} />
         ) : (
-          locale.connectWallet.switchNetwork
+          switchNetworkLabel
         )}
       </Button>
     );

packages/react/src/wallet/ConnectWallet/ConnectWallet.tsx

@@ -79,6 +79,11 @@ export type ConnectWalletProps = {
    */
   btnTitle?: string;
 
+  /**
+   * Set a custom label for the "Switch Network" button
+   */
+  switchNetworkBtnTitle?: string;
+
   /**
    * Change the title of ConnectWallet Modal
    *
@@ -722,6 +727,7 @@ export function ConnectWallet(props: ConnectWalletProps) {
             <SwitchNetworkButton
               style={props.style}
               className={props.className}
+              switchNetworkBtnTitle={props.switchNetworkBtnTitle}
             />
           );
         }
@@ -784,12 +790,16 @@ export function ConnectWallet(props: ConnectWalletProps) {
 function SwitchNetworkButton(props: {
   style?: React.CSSProperties;
   className?: string;
+  switchNetworkBtnTitle?: string;
 }) {
   const { activeChain } = useWalletContext();
   const switchChain = useSwitchChain();
   const [switching, setSwitching] = useState(false);
   const locale = useTWLocale();
 
+  const switchNetworkBtnTitle =
+    props.switchNetworkBtnTitle ?? locale.connectWallet.switchNetwork;
+
   return (
     <AnimatedButton
       className={`${TW_CONNECT_WALLET}--switch-network ${
@@ -818,7 +828,7 @@ function SwitchNetworkButton(props: {
       {switching ? (
         <Spinner size="sm" color="primaryButtonText" />
       ) : (
-        locale.connectWallet.switchNetwork
+        switchNetworkBtnTitle
       )}
     </AnimatedButton>
   );