From 19e59b6d7e355de82b593274be9f868c728dcd95 Mon Sep 17 00:00:00 2001 From: Udit Takkar Date: Sun, 19 Nov 2023 18:17:22 +0530 Subject: [PATCH 01/23] feat: add wallet selector --- app/package.json | 3 + app/src/context/Web3Modal.tsx | 30 + app/src/pages/_app.tsx | 6 +- app/src/ui/wallet-selector/WalletSelector.tsx | 89 +- app/yarn.lock | 1374 ++++++++++++++++- 5 files changed, 1401 insertions(+), 101 deletions(-) create mode 100644 app/src/context/Web3Modal.tsx diff --git a/app/package.json b/app/package.json index e3715738..024a3f4e 100644 --- a/app/package.json +++ b/app/package.json @@ -30,6 +30,7 @@ "@near-wallet-selector/sender": "^8.5.1", "@near-wallet-selector/wallet-connect": "^8.5.1", "@popperjs/core": "^2.11.5", + "@web3modal/wagmi": "^3.3.2", "ag-grid-community": "^27.3.0", "ag-grid-react": "^27.3.0", "bn.js": "^5.2.0", @@ -59,6 +60,8 @@ "replicate": "^0.12.3", "rxjs": "^6.6.6", "uuid": "^9.0.0", + "viem": "^1.19.3", + "wagmi": "^1.4.7", "winston": "^3.9.0", "ws": "^8.13.0" }, diff --git a/app/src/context/Web3Modal.tsx b/app/src/context/Web3Modal.tsx new file mode 100644 index 00000000..dfda0da8 --- /dev/null +++ b/app/src/context/Web3Modal.tsx @@ -0,0 +1,30 @@ +import { createWeb3Modal, defaultWagmiConfig } from "@web3modal/wagmi/react"; +import { WagmiConfig } from "wagmi"; +import { arbitrum, mainnet, optimism, polygon, avalanche, bsc, gnosis, fantom } from "viem/chains"; +import React from "react"; + +const projectId = process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID; + +if (!projectId) { + throw new Error("No WalletConnect Project Id found"); +} + +const metadata = { + name: "Web3Modal", + description: "Web3Modal Example", + url: "https://web3modal.com", + icons: ["https://avatars.githubusercontent.com/u/37784886"], +}; + +const chains = [mainnet, polygon, avalanche, arbitrum, bsc, optimism, gnosis, fantom]; +const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata }); + +createWeb3Modal({ + wagmiConfig, + projectId, + chains, +}); + +export function Web3Modal({ children }: { children: React.ReactNode }) { + return {children}; +} diff --git a/app/src/pages/_app.tsx b/app/src/pages/_app.tsx index 6ff64516..39419764 100644 --- a/app/src/pages/_app.tsx +++ b/app/src/pages/_app.tsx @@ -5,6 +5,8 @@ import "../theme/globals.scss"; import Script from "next/script"; import { useEffect } from "react"; +import { Web3Modal } from "../context/Web3Modal"; + setConfiguration({ containerWidths: [540, 740, 960, 1280, 1540], gutterWidth: 32 }); function MyApp({ Component, pageProps }: AppProps) { @@ -20,7 +22,9 @@ function MyApp({ Component, pageProps }: AppProps) { return ( <> - + + +