feat: add example config for web3modal

src/App.tsx

@@ -1,6 +1,11 @@
 import { TamaguiProvider, Theme } from 'tamagui'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 import { Provider as StatusProvider } from '@status-im/components'
+import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
+import { Web3Modal } from '@web3modal/react'
+import { configureChains, createConfig, WagmiConfig } from 'wagmi'
+import { arbitrum, mainnet, polygon } from 'wagmi/chains'
+
 import './App.css'
 import config from '../tamagui.config'
 import LandingPage from './pages/LandingPage/LandingPage'
@@ -39,6 +44,17 @@ const router = createBrowserRouter([
   { path: '/validator-onboarding', element: <ValidatorOnboarding /> },
 ])
 
+const chains = [arbitrum, mainnet, polygon]
+const projectId = 'YOUR_PROJECT_ID'
+
+const { publicClient } = configureChains(chains, [w3mProvider({ projectId })])
+const wagmiConfig = createConfig({
+  autoConnect: true,
+  connectors: w3mConnectors({ projectId, chains }),
+  publicClient,
+})
+const ethereumClient = new EthereumClient(wagmiConfig, chains)
+
 function App() {
   const theme = useSelector((state: RootState) => state.theme)
 
@@ -46,8 +62,11 @@ function App() {
     <TamaguiProvider config={config}>
       <StatusProvider>
         <Theme name={theme}>
-          <PinnedNotification />
-          <RouterProvider router={router} />
+          <WagmiConfig config={wagmiConfig}>
+            <PinnedNotification />
+            <RouterProvider router={router} />
+          </WagmiConfig>
+          <Web3Modal projectId={projectId} ethereumClient={ethereumClient} />
         </Theme>
       </StatusProvider>
     </TamaguiProvider>

src/pages/ValidatorOnboarding/Deposit/ConnectWallet.tsx

@@ -1,8 +1,13 @@
 import { Avatar, Button } from '@status-im/components'
+import { useWeb3Modal } from '@web3modal/react'
 import { XStack } from 'tamagui'
 
 const ConnectWallet = () => {
-  const onConnectWalletClick = () => {}
+  const { open } = useWeb3Modal()
+
+  const onConnectWalletClick = () => {
+    open()
+  }
 
   return (
     <XStack space={'$2'} alignItems={'center'}>