feat(bridge-ui): Simplify the wallet connection modal (#509)

* feat(bridge-ui): Simplify the wallet connection modal * Fix copy on metadata Co-authored-by: The Dark Jester <thedarkjester@users.noreply.github.com> Signed-off-by: Alain Nicolas <alainncls@users.noreply.github.com> --------- Signed-off-by: Alain Nicolas <alainncls@users.noreply.github.com> Co-authored-by: The Dark Jester <thedarkjester@users.noreply.github.com>
Consensys · Jan 9, 2025 · 06294fd · 06294fd
1 parent 50d4516
commit 06294fd
Show file tree

Hide file tree

Showing 5 changed files with 758 additions and 520 deletions.
diff --git a/bridge-ui/package.json b/bridge-ui/package.json
@@ -22,10 +22,11 @@
   "dependencies": {
     "@consensys/linea-sdk": "0.3.0",
     "@headlessui/react": "2.1.9",
-    "@tanstack/react-query": "5.59.3",
+    "@tanstack/react-query": "5.62.16",
     "@wagmi/connectors": "5.1.15",
-    "@wagmi/core": "2.13.8",
-    "@web3modal/wagmi": "5.1.11",
+    "@wagmi/core": "2.16.3",
+    "@reown/appkit": "1.6.3",
+    "@reown/appkit-adapter-wagmi": "1.6.3",
     "clsx": "^2.1.1",
     "compare-versions": "6.1.1",
     "date-fns": "4.1.0",
@@ -44,8 +45,8 @@
     "sharp": "0.33.5",
     "swiper": "11.1.14",
     "tailwind-merge": "^2.5.3",
-    "viem": "2.21.19",
-    "wagmi": "2.12.17",
+    "viem": "2.22.4",
+    "wagmi": "2.14.6",
     "zustand": "4.5.4"
   },
   "devDependencies": {

diff --git a/bridge-ui/src/components/ConnectButton.tsx b/bridge-ui/src/components/ConnectButton.tsx
@@ -1,4 +1,4 @@
-import { useWeb3Modal } from "@web3modal/wagmi/react";
+import { useAppKit } from "@reown/appkit/react";
 import { cn } from "@/utils/cn";
 import { Button } from "./ui";
 
@@ -7,7 +7,7 @@ type ConnectButtonProps = {
 };
 
 export default function ConnectButton({ fullWidth }: ConnectButtonProps) {
-  const { open } = useWeb3Modal();
+  const { open } = useAppKit();
   return (
     <Button
       id="wallet-connect-btn"

diff --git a/bridge-ui/src/config/wagmi.ts b/bridge-ui/src/config/wagmi.ts
@@ -1,45 +1,28 @@
-import { defaultWagmiConfig } from "@web3modal/wagmi/react/config";
-import { http, injected } from "@wagmi/core";
+import { http } from "@wagmi/core";
 import { mainnet, sepolia, linea, lineaSepolia } from "@wagmi/core/chains";
-import { walletConnect, coinbaseWallet } from "@wagmi/connectors";
 import { config } from "./config";
+import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
+import { AppKitNetwork } from "@reown/appkit/networks";
 
 if (!config.walletConnectId) throw new Error("Project ID is not defined");
 
-const metadata = {
-  name: "Linea Bridge",
-  description: `Linea Bridge is a bridge solution, providing secure and efficient cross-chain transactions between Layer 1 and Linea networks.
-  Discover the future of blockchain interaction with Linea Bridge.`,
-  url: "https://bridge.linea.build",
-  icons: [],
-};
+export const chains: [AppKitNetwork, ...AppKitNetwork[]] = [mainnet, sepolia, linea, lineaSepolia];
 
-const chains = [mainnet, sepolia, linea, lineaSepolia] as const;
-
-export const wagmiConfig = defaultWagmiConfig({
-  chains,
+export const wagmiAdapter = new WagmiAdapter({
+  networks: chains,
   projectId: config.walletConnectId,
-  metadata,
   multiInjectedProviderDiscovery: true,
   ssr: true,
-  enableEIP6963: true,
+
   batch: {
     multicall: true,
   },
-  connectors: [
-    walletConnect({
-      projectId: config.walletConnectId,
-      showQrModal: false,
-    }),
-    injected({ shimDisconnect: true }),
-    coinbaseWallet({
-      appName: "Linea Bridge",
-    }),
-  ],
   transports: {
     [mainnet.id]: http(`https://mainnet.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_ID}`, { batch: true }),
     [sepolia.id]: http(`https://sepolia.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_ID}`, { batch: true }),
     [linea.id]: http(`https://linea-mainnet.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_ID}`, { batch: true }),
     [lineaSepolia.id]: http(`https://linea-sepolia.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_ID}`, { batch: true }),
   },
 });
+
+export const wagmiConfig = wagmiAdapter.wagmiConfig;
diff --git a/bridge-ui/src/contexts/web3.context.tsx b/bridge-ui/src/contexts/web3.context.tsx
@@ -2,15 +2,39 @@
 
 import { ReactNode } from "react";
 import { WagmiProvider } from "wagmi";
-import { createWeb3Modal } from "@web3modal/wagmi/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { config, wagmiConfig } from "@/config";
+import { createAppKit } from "@reown/appkit/react";
+import { chains, wagmiAdapter } from "@/config/wagmi";
 
 const queryClient = new QueryClient();
 
 if (!config.walletConnectId) throw new Error("Project ID is not defined");
 
-createWeb3Modal({ wagmiConfig, projectId: config.walletConnectId });
+const metadata = {
+  name: "Linea Bridge",
+  description: `The Linea Bridge is a bridge solution, providing secure and efficient cross-chain transactions between Ethereum Layer 1 and Linea networks.
+  Discover the future of blockchain interaction with Linea Bridge.`,
+  url: "https://bridge.linea.build",
+  icons: [],
+};
+
+createAppKit({
+  adapters: [wagmiAdapter],
+  networks: chains,
+  projectId: config.walletConnectId,
+  metadata,
+  features: {
+    analytics: true,
+    email: false,
+    socials: false,
+    swaps: false,
+    onramp: false,
+    history: false,
+  },
+  enableEIP6963: true,
+  coinbasePreference: "eoaOnly",
+});
 
 type Web3ProviderProps = {
   children: ReactNode;