From 704b3d252ee9e98fa2033343473a6e3b13d4be2c Mon Sep 17 00:00:00 2001
From: Alain Nicolas <alainncls@users.noreply.github.com>
Date: Sun, 7 Jan 2024 00:51:43 +0100
Subject: [PATCH] feat: Better Web3Modal support for the website (#507)

---
 .github/workflows/website-deploy.yml    |  3 +++
 website/src/assets/arbitrum-mainnet.svg | 36 +++++++++++++++++++++++++
 website/src/assets/arbitrum-testnet.svg | 36 +++++++++++++++++++++++++
 website/src/assets/linea-mainnet.svg    |  7 +++++
 website/src/assets/linea-testnet.svg    |  7 +++++
 website/src/main.tsx                    | 19 +++++++++++--
 6 files changed, 106 insertions(+), 2 deletions(-)
 create mode 100644 website/src/assets/arbitrum-mainnet.svg
 create mode 100644 website/src/assets/arbitrum-testnet.svg
 create mode 100644 website/src/assets/linea-mainnet.svg
 create mode 100644 website/src/assets/linea-testnet.svg

diff --git a/.github/workflows/website-deploy.yml b/.github/workflows/website-deploy.yml
index a8e232c8..af9bfb04 100644
--- 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
new file mode 100644
index 00000000..ae766afc
--- /dev/null
+++ b/website/src/assets/arbitrum-mainnet.svg
@@ -0,0 +1,36 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <mask
+    id="mask0_1825_10562"
+    style="mask-type: luminance"
+    maskUnits="userSpaceOnUse"
+    x="1"
+    y="0"
+    width="22"
+    height="24"
+  >
+    <path d="M22.875 0H1.125V24H22.875V0Z" fill="white" />
+  </mask>
+  <g mask="url(#mask0_1825_10562)">
+    <path
+      d="M13.8227 13.8239L12.6328 17.0099C12.5977 17.0982 12.5977 17.1964 12.6328 17.2847L14.6762 22.7681L17.041 21.4328L14.2043 13.8239C14.139 13.6472 13.888 13.6472 13.8227 13.8239Z"
+      fill="#FEFEFE"
+    />
+    <path
+      d="M16.2023 8.4626C16.1371 8.2859 15.8861 8.2859 15.8208 8.4626L14.6309 11.6485C14.5957 11.737 14.5957 11.8351 14.6309 11.9235L17.9797 20.902L20.3445 19.5667L16.2023 8.4626Z"
+      fill="#FEFEFE"
+    />
+    <path
+      d="M12 1.48742C12.0602 1.48742 12.1155 1.50215 12.1707 1.53161L21.188 6.62222C21.2935 6.68112 21.3587 6.78912 21.3587 6.90694V17.0882C21.3587 17.206 21.2935 17.314 21.188 17.3728L12.1707 22.4684C12.1205 22.4978 12.0602 22.5126 12 22.5126C11.9398 22.5126 11.8845 22.4978 11.8293 22.4684L2.817 17.3778C2.71157 17.3188 2.64629 17.2108 2.64629 17.0931V6.90694C2.64629 6.78912 2.71157 6.68112 2.817 6.62222L11.8343 1.53161C11.8845 1.50215 11.9448 1.48742 12 1.48742ZM12 0C11.6787 0 11.3573 0.0834525 11.0711 0.245449L2.05384 5.33606C1.48147 5.66006 1.125 6.25895 1.125 6.90694V17.0882C1.125 17.7362 1.48147 18.34 2.05384 18.664L11.0711 23.7545C11.3573 23.9165 11.6787 24 12 24C12.3213 24 12.6427 23.9165 12.9289 23.7545L21.9461 18.664C22.5236 18.34 22.875 17.741 22.875 17.0882V6.90694C22.875 6.25895 22.5185 5.65514 21.9461 5.33115L12.9339 0.245449C12.6427 0.0834525 12.3213 0 12 0Z"
+      fill="#FEFEFE"
+    />
+    <path d="M6.04102 20.9122L6.86944 18.6934L8.53634 20.0482L6.9799 21.4423L6.04102 20.9122Z" fill="#FEFEFE" />
+    <path
+      d="M11.2411 6.18066H8.95669C8.78599 6.18066 8.63029 6.28375 8.57508 6.44084L3.6748 19.5773L6.03959 20.9125L11.4369 6.44575C11.4821 6.31812 11.3867 6.18066 11.2411 6.18066Z"
+      fill="#FEFEFE"
+    />
+    <path
+      d="M15.2427 6.18066H12.9583C12.7876 6.18066 12.6319 6.28375 12.5767 6.44084L6.97852 21.4427L9.34327 22.778L15.4335 6.45066C15.4837 6.31812 15.3833 6.18066 15.2427 6.18066Z"
+      fill="#FEFEFE"
+    />
+  </g>
+</svg>
diff --git a/website/src/assets/arbitrum-testnet.svg b/website/src/assets/arbitrum-testnet.svg
new file mode 100644
index 00000000..ea09a8cc
--- /dev/null
+++ b/website/src/assets/arbitrum-testnet.svg
@@ -0,0 +1,36 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <mask
+    id="mask0_1825_34774"
+    style="mask-type: luminance"
+    maskUnits="userSpaceOnUse"
+    x="1"
+    y="0"
+    width="22"
+    height="24"
+  >
+    <path d="M22.875 0H1.125V24H22.875V0Z" fill="white" />
+  </mask>
+  <g mask="url(#mask0_1825_34774)">
+    <path
+      d="M13.8227 13.8237L12.6328 17.0096C12.5977 17.098 12.5977 17.1961 12.6328 17.2845L14.6762 22.7679L17.041 21.4326L14.2043 13.8237C14.139 13.647 13.888 13.647 13.8227 13.8237Z"
+      fill="#9096B2"
+    />
+    <path
+      d="M16.2023 8.46309C16.1371 8.28639 15.8861 8.28639 15.8208 8.46309L14.6309 11.649C14.5957 11.7374 14.5957 11.8356 14.6309 11.924L17.9797 20.9025L20.3445 19.5672L16.2023 8.46309Z"
+      fill="#9096B2"
+    />
+    <path
+      d="M12 1.48742C12.0602 1.48742 12.1155 1.50215 12.1707 1.53161L21.188 6.62222C21.2935 6.68112 21.3587 6.78912 21.3587 6.90694V17.0882C21.3587 17.206 21.2935 17.314 21.188 17.3728L12.1707 22.4684C12.1205 22.4978 12.0602 22.5126 12 22.5126C11.9398 22.5126 11.8845 22.4978 11.8293 22.4684L2.817 17.3778C2.71157 17.3188 2.64629 17.2108 2.64629 17.0931V6.90694C2.64629 6.78912 2.71157 6.68112 2.817 6.62222L11.8343 1.53161C11.8845 1.50215 11.9448 1.48742 12 1.48742ZM12 0C11.6787 0 11.3573 0.0834525 11.0711 0.245449L2.05384 5.33606C1.48147 5.66006 1.125 6.25895 1.125 6.90694V17.0882C1.125 17.7362 1.48147 18.34 2.05384 18.664L11.0711 23.7545C11.3573 23.9165 11.6787 24 12 24C12.3213 24 12.6427 23.9165 12.9289 23.7545L21.9461 18.664C22.5236 18.34 22.875 17.741 22.875 17.0882V6.90694C22.875 6.25895 22.5185 5.65514 21.9461 5.33115L12.9339 0.245449C12.6427 0.0834525 12.3213 0 12 0Z"
+      fill="#9096B2"
+    />
+    <path d="M6.04102 20.9123L6.86944 18.6935L8.53634 20.0484L6.9799 21.4425L6.04102 20.9123Z" fill="#9096B2" />
+    <path
+      d="M11.2411 6.18036H8.95669C8.78599 6.18036 8.63029 6.28345 8.57508 6.44053L3.6748 19.5769L6.03959 20.9122L11.4369 6.44545C11.4821 6.31781 11.3867 6.18036 11.2411 6.18036Z"
+      fill="#9096B2"
+    />
+    <path
+      d="M15.2427 6.18036H12.9583C12.7876 6.18036 12.6319 6.28345 12.5767 6.44053L6.97852 21.4423L9.34327 22.7776L15.4335 6.45035C15.4837 6.31781 15.3833 6.18036 15.2427 6.18036Z"
+      fill="#9096B2"
+    />
+  </g>
+</svg>
diff --git a/website/src/assets/linea-mainnet.svg b/website/src/assets/linea-mainnet.svg
new file mode 100644
index 00000000..e77dbeea
--- /dev/null
+++ b/website/src/assets/linea-mainnet.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+  <circle cx="12" cy="12" r="12" fill="#111" />
+  <path
+    fill="#fff"
+    d="M16.286 9.209a1.714 1.714 0 1 0 0-3.429 1.714 1.714 0 0 0 0 3.429ZM6 7.494h2.505v8.572h7.78v2.373H6V7.494Z"
+  />
+</svg>
diff --git a/website/src/assets/linea-testnet.svg b/website/src/assets/linea-testnet.svg
new file mode 100644
index 00000000..0eddf2a8
--- /dev/null
+++ b/website/src/assets/linea-testnet.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+  <circle cx="12" cy="12" r="12" fill="#D0D2D8" />
+  <path
+    fill="#fff"
+    d="M16.286 9.209a1.714 1.714 0 1 0 0-3.429 1.714 1.714 0 0 0 0 3.429ZM6 7.494h2.506v8.572h7.78v2.373H6V7.494Z"
+  />
+</svg>
diff --git a/website/src/main.tsx b/website/src/main.tsx
index ec27a57e..953bd88f 100644
--- 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>