feat: Better Web3Modal support for the website

Consensys · Jan 6, 2024 · 717123b · 717123b
1 parent a1924be
commit 717123b
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 2 deletions.
diff --git a/.github/workflows/website-deploy.yml b/.github/workflows/website-deploy.yml
@@ -61,6 +61,9 @@ jobs:
 
       - name: Build
         run: pnpm run build
+        env:
+          VITE_WALLETCONNECT_PROJECT_ID: ${{ secrets.VITE_WALLETCONNECT_PROJECT_ID }}
+          VITE_INFURA_API_KEY: ${{ secrets.VITE_INFURA_API_KEY }}
 
       - name: Setup Pages
         uses: actions/configure-pages@v3

diff --git a/website/src/assets/arbitrum-mainnet.svg b/website/src/assets/arbitrum-mainnet.svg
diff --git a/website/src/assets/arbitrum-testnet.svg b/website/src/assets/arbitrum-testnet.svg
diff --git a/website/src/assets/linea-mainnet.svg b/website/src/assets/linea-mainnet.svg
diff --git a/website/src/assets/linea-testnet.svg b/website/src/assets/linea-testnet.svg
diff --git a/website/src/main.tsx b/website/src/main.tsx
@@ -3,8 +3,12 @@ import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
 import { WagmiConfig } from "wagmi";
-import { linea, lineaTestnet, arbitrum, arbitrumGoerli, mainnet } from "wagmi/chains";
+import { arbitrum, arbitrumGoerli, linea, lineaTestnet, mainnet } from "wagmi/chains";
 import { createWeb3Modal, defaultWagmiConfig } from "@web3modal/wagmi/react";
+import LineaMainnetIcon from "./assets/linea-mainnet.svg";
+import LineaTestnetIcon from "./assets/linea-testnet.svg";
+import ArbitrumMainnetIcon from "./assets/arbitrum-mainnet.svg";
+import ArbitrumTestnetIcon from "./assets/arbitrum-testnet.svg";
 
 const projectId = import.meta.env.VITE_WALLETCONNECT_PROJECT_ID || "";
 
@@ -16,7 +20,18 @@ const metadata = {
 const chains = [linea, lineaTestnet, arbitrum, arbitrumGoerli, mainnet];
 const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata });
 
-createWeb3Modal({ wagmiConfig, projectId, chains });
+createWeb3Modal({
+  wagmiConfig,
+  projectId,
+  chains,
+  defaultChain: linea,
+  chainImages: {
+    59144: LineaMainnetIcon,
+    59140: LineaTestnetIcon,
+    42161: ArbitrumMainnetIcon,
+    421613: ArbitrumTestnetIcon,
+  },
+});
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>