Origin/feat/walletconnect

apps/api/src/main.ts

@@ -3,6 +3,7 @@ import { NestFactory } from "@nestjs/core"
 import { SwaggerModule, DocumentBuilder } from "@nestjs/swagger"
 import { ironSession } from "iron-session/express"
 import { AppModule } from "./app/app.module"
+import fetch from 'node-fetch';
 
 async function bootstrap() {
     const app = await NestFactory.create(AppModule)

apps/client/package.json

@@ -15,6 +15,7 @@
         "@emotion/react": "^11.10.6",
         "@emotion/styled": "^11.10.6",
         "@fontsource-variable/unbounded": "^5.0.5",
+        "@rainbow-me/rainbowkit": "^1.0.11",
         "@semaphore-protocol/identity": "3.10.1",
         "@web3-react/core": "^6.1.9",
         "@web3-react/injected-connector": "^6.0.7",
@@ -24,7 +25,8 @@
         "react-dom": "^18.2.0",
         "react-icons": "^4.10.1",
         "react-router-dom": "^6.8.1",
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.13.11",
+        "wagmi": "^1.4.2"
     },
     "devDependencies": {
         "@types/react": "^18.0.27",

apps/client/src/main.tsx

@@ -5,15 +5,46 @@ import { providers } from "ethers"
 import * as ReactDOM from "react-dom/client"
 import Routes from "./routes"
 import theme from "./styles"
+import './polyfills';
+import '@rainbow-me/rainbowkit/styles.css';
+
+import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
+import { configureChains,createConfig, WagmiConfig } from 'wagmi';
+import { mainnet, polygon, optimism, arbitrum, base, zora } from 'wagmi/chains';
+import { publicProvider } from 'wagmi/providers/public';
+import React from 'react';
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
 
+const { chains, publicClient } = configureChains(
+  [mainnet, polygon, optimism, arbitrum, base, zora],
+  [publicProvider()]
+);
+
+const { connectors } = getDefaultWallets({
+  appName: 'RainbowKit demo',
+  projectId: 'YOUR_PROJECT_ID',
+  chains,
+});
+
+const config = createConfig({
+  autoConnect: false,
+  connectors,
+  publicClient,
+});
+
+
 root.render(
     <Web3ReactProvider
         getLibrary={(provider) => new providers.Web3Provider(provider)}
     >
+    <WagmiConfig config={config}>
+    <RainbowKitProvider chains={chains}>
         <ChakraProvider theme={theme}>
             <Routes />
         </ChakraProvider>
+        </RainbowKitProvider>
+        </WagmiConfig>
     </Web3ReactProvider>
 )
+

apps/client/src/pages/home.tsx

@@ -25,6 +25,8 @@ import {
     isGroupMember
 } from "../utils/api"
 
+import { ConnectButton } from '@rainbow-me/rainbowkit';
+
 const injectedConnector = new InjectedConnector({})
 
 export default function HomePage(): JSX.Element {
@@ -181,13 +183,17 @@ export default function HomePage(): JSX.Element {
                 </Heading>
 
                 {!active ? (
-                    <Button
-                        colorScheme="secondary"
-                        variant="solid"
-                        onClick={() => activate(injectedConnector)}
+                    <div
+                        style={{
+                        display: 'flex',
+                        justifyContent: 'flex-end',
+                        padding: 12,
+                        }}
                     >
-                        Connect Metamask
-                    </Button>
+                        <ConnectButton />
+                    </div>
+
+
                 ) : (
                     <VStack w="400px" spacing="5">
                         <VStack align="left" w="100%">

apps/client/src/polyfills.ts

@@ -3,5 +3,13 @@
  *
  * See: https://github.com/zloirock/core-js#babel
  */
-import "core-js/stable"
+// import "core-js/stable"
 import "regenerator-runtime/runtime"
+
+import { Buffer } from 'buffer';
+
+window.global = window.global ?? window;
+window.Buffer = window.Buffer ?? Buffer;
+window.process = window.process ?? { env: {} }; // Minimal process polyfill
+
+export {};

yarn.lock

@@ -21463,4 +21463,4 @@ __metadata:
       optional: true
   checksum: fc443abf5bc9deac0d4e375847e7914e44c7ffc9f7f09b60e466cb9bbbcf5a46706bf2f9c8b9e6e6c9a1c5aea0bd6123cbf9fbcd39788ae27d8494d505969ae8
   languageName: node
-  linkType: hard
+  linkType: hard