fix: Use Web3Modal for the website (#495)

website/package.json

@@ -28,8 +28,8 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@lens-protocol/widgets-react": "^2.1.0",
     "@verax-attestation-registry/verax-sdk": "1.0.0",
+    "@web3modal/wagmi": "^3.5.0",
     "axios": "^1.6.1",
-    "connectkit": "^1.5.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.19.0",

website/src/components/ConnectWallet.css

@@ -0,0 +1,11 @@
+.connect-wallet {
+    background-color: #353535;
+    border-radius: 30px;
+    color: #ffffff;
+    padding: 12px 20px;
+
+    &:hover {
+        background-color: #464646;
+    }
+}
+

website/src/components/ConnectWallet.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from "react";
+import "./ConnectWallet.css";
+import { useWeb3Modal } from "@web3modal/wagmi/react";
+import { useAccount, useEnsName } from "wagmi";
+
+const ConnectWallet: React.FC = () => {
+  const [truncatedAddress, setTruncatedAddress] = useState<string>();
+
+  const { open } = useWeb3Modal();
+  const { isConnected, address } = useAccount();
+  const { data: ensName } = useEnsName({
+    address,
+    chainId: 1,
+  });
+
+  useEffect(() => {
+    if (address) {
+      setTruncatedAddress(`${address.slice(0, 6)}••••${address.slice(address.length - 4, address.length)}`);
+    }
+  }, [address]);
+
+  return (
+    <button onClick={() => open()} className={"connect-wallet"}>
+      {isConnected ? ensName ?? truncatedAddress : "CONNECT WALLET"}
+    </button>
+  );
+};
+
+export default ConnectWallet;

website/src/components/Footer.tsx

@@ -4,35 +4,35 @@ import { faDiscord, faGithub, faTelegram } from "@fortawesome/free-brands-svg-ic
 import { Link } from "react-router-dom";
 import { faBook } from "@fortawesome/free-solid-svg-icons";
 import { FollowOnLens } from "@lens-protocol/widgets-react";
+import React from "react";
 
-function Navbar() {
-
+const Footer: React.FC = () => {
   return (
     <ul className="social-icon">
       <li className="social-icon__item">
-        <Link className="social-icon__link" to={"https://discord.gg/Sq4EmYdBEk"}
-              target={"_blank"}>
+        <Link className="social-icon__link" to={"https://discord.gg/Sq4EmYdBEk"} target={"_blank"}>
           <FontAwesomeIcon icon={faDiscord} />
         </Link>
       </li>
 
       <li className="social-icon__item">
-        <Link className="social-icon__link" to={"https://t.me/+C94-EJOoVjVhM2U0"}
-              target={"_blank"}>
+        <Link className="social-icon__link" to={"https://t.me/+C94-EJOoVjVhM2U0"} target={"_blank"}>
           <FontAwesomeIcon icon={faTelegram} />
         </Link>
       </li>
 
       <li className="social-icon__item">
-        <Link className="social-icon__link" to={"https://github.com/Consensys/linea-attestation-registry"}
-              target={"_blank"}>
+        <Link
+          className="social-icon__link"
+          to={"https://github.com/Consensys/linea-attestation-registry"}
+          target={"_blank"}
+        >
           <FontAwesomeIcon icon={faGithub} />
         </Link>
       </li>
 
       <li className="social-icon__item">
-        <Link className="social-icon__link" to={"https://docs.ver.ax"}
-              target={"_blank"}>
+        <Link className="social-icon__link" to={"https://docs.ver.ax"} target={"_blank"}>
           <FontAwesomeIcon icon={faBook} />
         </Link>
       </li>
@@ -42,6 +42,6 @@ function Navbar() {
       </li>
     </ul>
   );
-}
+};
 
-export default Navbar;
+export default Footer;

website/src/components/Navbar.tsx

@@ -1,7 +1,8 @@
 import { NavLink } from "react-router-dom";
 import "./Navbar.css";
+import React from "react";
 
-function Navbar() {
+const Navbar: React.FC = () => {
   return (
     <nav className="navbar navbar-light">
       <div className="container">
@@ -16,10 +17,15 @@ function Navbar() {
               Linea POH
             </NavLink>
           </li>
+          <li className="nav-item">
+            <NavLink className="navbar-brand" to="/sdk-demo" end>
+              SDK Demo
+            </NavLink>
+          </li>
         </ul>
       </div>
     </nav>
   );
-}
+};
 
 export default Navbar;

website/src/main.tsx

@@ -2,25 +2,26 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
-import { createConfig, WagmiConfig } from "wagmi";
-import { ConnectKitProvider, getDefaultConfig } from "connectkit";
-import { linea, lineaTestnet, arbitrum, arbitrumGoerli } from "wagmi/chains";
+import { WagmiConfig } from "wagmi";
+import { linea, lineaTestnet, arbitrum, arbitrumGoerli, mainnet } from "wagmi/chains";
+import { createWeb3Modal, defaultWagmiConfig } from "@web3modal/wagmi/react";
 
-const config = createConfig(
-  getDefaultConfig({
-    infuraId: import.meta.env.VITE_INFURA_API_KEY,
-    walletConnectProjectId: import.meta.env.VITE_WALLETCONNECT_PROJECT_ID || "",
-    appName: "Verax Website",
-    chains: [linea, lineaTestnet, arbitrum, arbitrumGoerli],
-  }),
-);
+const projectId = import.meta.env.VITE_WALLETCONNECT_PROJECT_ID || "";
+
+const metadata = {
+  name: "Verax Attestation Registry",
+  url: "https://ver.ax",
+};
+
+const chains = [linea, lineaTestnet, arbitrum, arbitrumGoerli, mainnet];
+const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata });
+
+createWeb3Modal({ wagmiConfig, projectId, chains });
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <WagmiConfig config={config}>
-      <ConnectKitProvider>
-        <App />
-      </ConnectKitProvider>
+    <WagmiConfig config={wagmiConfig}>
+      <App />
     </WagmiConfig>
   </React.StrictMode>,
 );

website/src/pages/Home.tsx

@@ -6,7 +6,7 @@ export type HomeProps = {
   title: string;
 };
 
-export const Home: FunctionComponent<HomeProps> = ({ title }) => {
+const Home: FunctionComponent<HomeProps> = ({ title }) => {
   useEffect(() => {
     document.title = title;
   }, [title]);