fix: connect-to-metamask button adds mainnet instead of moderato

src/components/ConnectWallet.tsx

@@ -1,10 +1,24 @@
 'use client'
 import * as React from 'react'
+import { tempo } from 'viem/chains'
 import { useChains, useConnect, useConnection, useConnectors, useSwitchChain } from 'wagmi'
 import { Button, Logout } from './guides/Demo'
 import { filterSupportedInjectedConnectors } from './lib/wallets'
 
-export function ConnectWallet({ showAddChain = true }: { showAddChain?: boolean }) {
+const mainnetParams = {
+  chainId: tempo.id,
+  addEthereumChainParameter: {
+    chainName: tempo.name,
+    nativeCurrency: { name: 'USD', decimals: 18, symbol: 'USD' },
+    rpcUrls: [tempo.rpcUrls.default.http[0]],
+    blockExplorerUrls: ['https://explore.tempo.xyz'],
+  },
+}
+
+export function ConnectWallet({
+  showAddChain = true,
+  network = 'testnet',
+}: { showAddChain?: boolean; network?: 'mainnet' | 'testnet' }) {
   const { address, chain, connector } = useConnection()
   const connect = useConnect()
   const connectors = useConnectors()
@@ -14,7 +28,9 @@ export function ConnectWallet({ showAddChain = true }: { showAddChain?: boolean
   )
   const switchChain = useSwitchChain()
   const chains = useChains()
-  const isSupported = chains.some((c) => c.id === chain?.id)
+  const targetChainId = network === 'mainnet' ? tempo.id : chains[0].id
+  const isSupported =
+    network === 'mainnet' ? chain?.id === targetChainId : chains.some((c) => c.id === chain?.id)
   if (!injectedConnectors.length)
     return (
       <div className="flex items-center text-[14px] -tracking-[2%]">No browser wallets found.</div>
@@ -39,26 +55,26 @@ export function ConnectWallet({ showAddChain = true }: { showAddChain?: boolean
         ))}
       </div>
     )
+
+  const switchParams =
+    network === 'mainnet'
+      ? mainnetParams
+      : {
+          chainId: chains[0].id,
+          addEthereumChainParameter: {
+            nativeCurrency: { name: 'USD', decimals: 18, symbol: 'USD' },
+            blockExplorerUrls: ['https://explore.testnet.tempo.xyz'],
+          },
+        }
+
   return (
     <div className="flex flex-col gap-2">
       <Logout />
       {showAddChain && !isSupported && (
         <Button
           className="w-fit"
           variant="accent"
-          onClick={() =>
-            switchChain.switchChain({
-              chainId: chains[0].id,
-              addEthereumChainParameter: {
-                nativeCurrency: {
-                  name: 'USD',
-                  decimals: 18,
-                  symbol: 'USD',
-                },
-                blockExplorerUrls: ['https://explore.tempo.xyz'],
-              },
-            })
-          }
+          onClick={() => switchChain.switchChain(switchParams)}
         >
           Add Tempo to {connector?.name ?? 'Wallet'}
         </Button>

src/pages/quickstart/connection-details.mdx

@@ -15,7 +15,7 @@ You can connect with Tempo like you would with any other EVM chain.
 
 Click on your browser wallet below to automatically connect it to the Tempo network.
 
-<ConnectWallet />
+<ConnectWallet network="mainnet" />
 
 :::warning
 Note that on some wallets, you might see an unusually high "balance". This is because, historically, blockchain wallets have always assumed that a blockchain has a "native gas token". On Tempo, there is no native gas token, and so the value shown is a placeholder. See [EVM Differences](/quickstart/evm-compatibility#handling-eth-balance-checks) for more information on this quirk.

src/wagmi.config.ts

@@ -2,7 +2,7 @@ import { QueryClient } from '@tanstack/react-query'
 import { Expiry } from 'accounts'
 import * as React from 'react'
 import { parseUnits } from 'viem'
-import { tempoDevnet, tempoLocalnet, tempoModerato } from 'viem/chains'
+import { tempo, tempoDevnet, tempoLocalnet, tempoModerato } from 'viem/chains'
 import { withRelay } from 'viem/tempo'
 import {
   type CreateConfigParameters,
@@ -48,7 +48,7 @@ export function getConfig(options: getConfig.Options = {}) {
     batch: {
       multicall: false,
     },
-    chains: [chain],
+    chains: [chain, tempo],
     connectors: [
       ...(import.meta.env.VITE_E2E === 'true'
         ? [webAuthn()]
@@ -97,6 +97,7 @@ export function getConfig(options: getConfig.Options = {}) {
         http('https://sponsor.devnet.tempo.xyz'),
         { policy: 'sign-only' },
       ),
+      [tempo.id]: http(tempo.rpcUrls.default.http[0]),
       [tempoLocalnet.id]: http(undefined, { batch: true }),
     },
   })