chore+feat: Install and configure Rainbowkit

NOTE! Source maps generated in Webpack under react-scripts are busted.

mswjs/msw#1030

GENERATE_SOURCEMAP=false

Author: davidvuong

package.json

@@ -9,15 +9,15 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
-    "typescript": "^4.7.4",
-    "prettier": "^2.7.1",
-    "prettier-plugin-solidity": "^1.0.0-beta.13",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-standard": "^16.0.3",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-promise": "^5.2.0"
+    "eslint-plugin-promise": "^5.2.0",
+    "prettier": "^2.7.1",
+    "prettier-plugin-solidity": "^1.0.0-beta.13",
+    "typescript": "^4.7.4"
   }
 }

packages/app/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@rainbow-me/rainbowkit": "^0.4.2",
     "axios": "^0.21.4",
     "ethers": "^5.6.9",
     "react": "^18.2.0",
@@ -11,6 +12,7 @@
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "styled-components": "^5.3.5",
+    "wagmi": "^0.5.9",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
@@ -28,7 +30,7 @@
     "tailwindcss": "^3.1.5"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "GENERATE_SOURCEMAP=false react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

packages/app/src/index.tsx

@@ -1,13 +1,38 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { App } from "./App";
 import { BrowserRouter } from "react-router-dom";
-
+import "@rainbow-me/rainbowkit/styles.css";
+import { getDefaultWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit";
+import { chain, configureChains, createClient, WagmiConfig } from "wagmi";
+import { alchemyProvider } from "wagmi/providers/alchemy";
+import { publicProvider } from "wagmi/providers/public";
+import { App } from "./App";
 import "./index.css";
 
+const { chains, provider } = configureChains(
+  [chain.mainnet, chain.optimism],
+  [alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }), publicProvider()]
+);
+
+const { connectors } = getDefaultWallets({
+  appName: "Pozition",
+  chains,
+});
+
+const wagmiClient = createClient({
+  autoConnect: true,
+  connectors,
+  provider,
+});
+
 ReactDOM.render(
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>,
+  <WagmiConfig client={wagmiClient}>
+    <RainbowKitProvider chains={chains}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+      ,
+    </RainbowKitProvider>
+  </WagmiConfig>,
   document.getElementById("root")
 );