Merge pull request #5241 from trufflesuite/dash-woah

Dashboard frontend
trufflesuite · Aug 18, 2022 · b806843 · b806843
2 parents 0d96061 + 602c02d
commit b806843
Show file tree

Hide file tree

Showing 91 changed files with 7,736 additions and 6,042 deletions.
diff --git a/packages/contract/package.json b/packages/contract/package.json
@@ -37,11 +37,15 @@
     "web3-utils": "1.7.4"
   },
   "devDependencies": {
+    "assert": "^2.0.0",
     "buffer": "6.0.3",
     "crypto-browserify": "^3.12.0",
+    "https-browserify": "^1.0.0",
     "os-browserify": "^0.3.0",
     "path-browserify": "^1.0.1",
     "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
+    "url": "^0.11.0",
     "vm-browserify": "^1.1.2",
     "webpack": "^5.73.0",
     "webpack-cli": "^4.10.0"

diff --git a/packages/contract/webpack.config.js b/packages/contract/webpack.config.js
@@ -26,11 +26,13 @@ module.exports = {
     }),
     new webpack.ProvidePlugin({
       process: "process/browser"
-    }),
+    })
   ],
   resolve: {
     fallback: {
       crypto: require.resolve("crypto-browserify"),
+      assert: require.resolve("assert/"),
+      url: require.resolve("url/"),
       http: require.resolve("stream-http"),
       https: require.resolve("https-browserify"),
       os: require.resolve("os-browserify/browser"),

diff --git a/packages/core/lib/services/analytics/google.js b/packages/core/lib/services/analytics/google.js
@@ -10,7 +10,7 @@
 const Config = require("@truffle/config");
 const userConfig = Config.getUserConfig();
 const ua = require("universal-analytics");
-const uuid = require("uuid/v4");
+const { v4: uuid } = require("uuid");
 
 const inquirer = require("inquirer");
 
@@ -49,7 +49,7 @@ const googleAnalytics = {
   /**
    * set user-level unique id
    */
-  setUserId: function() {
+  setUserId: function () {
     if (!userConfig.get("uniqueId")) {
       let userId = uuid();
       userConfig.set({ uniqueId: userId });
@@ -60,25 +60,25 @@ const googleAnalytics = {
    * @param {Object} userConfig
    * @returns {bool}
    */
-  getAnalytics: function() {
+  getAnalytics: function () {
     return userConfig.get("enableAnalytics");
   },
   /**
    * set user-level options for analytics
    * @param {bool} analyticsBool
    * @param {Object} userConfig
    */
-  setAnalytics: function(analyticsBool) {
+  setAnalytics: function (analyticsBool) {
     if (analyticsBool === true) {
       this.setUserId();
-      console.log('Analytics enabled');
+      console.log("Analytics enabled");
       userConfig.set({
         enableAnalytics: true,
         analyticsSet: true,
         analyticsMessageDateTime: Date.now()
       });
     } else if (analyticsBool === false) {
-      console.log('Analytics disabled');
+      console.log("Analytics disabled");
       userConfig.set({
         enableAnalytics: false,
         analyticsSet: true,
@@ -97,7 +97,7 @@ const googleAnalytics = {
    * prompt user to determine values for user-level analytics config options
    * @param {Object} userConfig
    */
-  setUserConfigViaPrompt: async function() {
+  setUserConfigViaPrompt: async function () {
     if (!userConfig.get("analyticsSet") && process.stdin.isTTY === true) {
       let answer = await inquirer.prompt(analyticsInquiry);
       if (answer.analyticsInquiry === analyticsInquiry[0].choices[0]) {
@@ -134,7 +134,7 @@ const googleAnalytics = {
    * check user-level config to see if user has enabled analytics
    * @returns {bool}
    */
-  checkIfAnalyticsEnabled: function() {
+  checkIfAnalyticsEnabled: function () {
     if (userConfig.get("enableAnalytics")) {
       return true;
     } else {
@@ -146,7 +146,7 @@ const googleAnalytics = {
    * set data that will be the same in future calls
    * @returns {Object} visitor
    */
-  setPersistentAnalyticsData: function() {
+  setPersistentAnalyticsData: function () {
     if (this.checkIfAnalyticsEnabled() === true) {
       let userId = userConfig.get("uniqueId");
       let visitor = ua(truffleAnalyticsId, { cid: userId });
@@ -159,7 +159,7 @@ const googleAnalytics = {
    * @param {Object}
    */
   // eslint-disable-next-line no-unused-vars
-  sendAnalyticsEvent: function(eventObject, callback) {
+  sendAnalyticsEvent: function (eventObject, callback) {
     let visitor = this.setPersistentAnalyticsData();
     let sendObject = {};
     if (eventObject["command"]) {
@@ -177,7 +177,7 @@ const googleAnalytics = {
 
     if (visitor) {
       // eslint-disable-next-line no-unused-vars
-      visitor.event(sendObject, function(err) {});
+      visitor.event(sendObject, function (err) {});
     }
 
     return true;

diff --git a/packages/dashboard/.eslintrc.json b/packages/dashboard/.eslintrc.json
@@ -1,8 +1,15 @@
 {
-  "extends": ["../../.eslintrc.package.json"],
+  "extends": [
+    "../../.eslintrc.package.json",
+    "react-app",
+    "react-app/jest"
+  ],
   "env": {
     "browser": true,
     "node": true,
     "jest": true
+  },
+  "globals": {
+    "JSX": "readonly"
   }
 }
diff --git a/packages/dashboard/bin/start-dashboard.ts b/packages/dashboard/bin/start-dashboard.ts
@@ -1,7 +1,6 @@
 import { base64ToJson } from "@truffle/dashboard-message-bus-common";
 import { DashboardServer } from "../lib/DashboardServer";
 
-//TODO: remove all the base64 strangeness
 const [optionsBase64] = process.argv.slice(2);
 const options = base64ToJson(optionsBase64);
 const dashboardServer = new DashboardServer(options);

diff --git a/packages/dashboard/craco.config.js b/packages/dashboard/craco.config.js
diff --git a/packages/dashboard/lib/DashboardServer.ts b/packages/dashboard/lib/DashboardServer.ts
@@ -91,7 +91,6 @@ export class DashboardServer {
 
     this.expressApp.use(cors());
     this.expressApp.use(express.json());
-    this.expressApp.use(express.static(this.frontendPath));
 
     this.expressApp.get("/ports", this.getPorts.bind(this));
 
@@ -100,6 +99,11 @@ export class DashboardServer {
       this.expressApp.post("/rpc", this.postRpc.bind(this));
     }
 
+    this.expressApp.use(express.static(this.frontendPath));
+    this.expressApp.get("*", (_req, res) => {
+      res.sendFile("index.html", { root: this.frontendPath });
+    });
+
     await new Promise<void>(resolve => {
       this.httpServer = this.expressApp!.listen(this.port, this.host, () => {
         if (this.autoOpen) {

diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json
@@ -22,60 +22,59 @@
   ],
   "scripts": {
     "build": "yarn build:react && yarn build:server && yarn copy:react",
-    "build:react": "cross-env DISABLE_ESLINT_PLUGIN=true SKIP_PREFLIGHT_CHECK=true craco build",
+    "build:react": "react-scripts build",
     "build:server": "tsc -p tsconfig.server.json",
     "copy:react": "cpy build/** dist/lib/dashboard-frontend/ --parents --dot",
     "prepare": "yarn build",
     "start": "concurrently --kill-others \"yarn start:dev-server\" \"NODE_ENV=\"development\" yarn start:react\"",
     "start:dev-server": "ts-node --project tsconfig.server.json bin/start-dev-server.ts",
     "start:prebuilt": "node dist/bin/start-dev-server.js",
-    "start:react": "cross-env DISABLE_ESLINT_PLUGIN=true SKIP_PREFLIGHT_CHECK=true craco start",
+    "start:react": "react-scripts start",
     "test": "jest --passWithNoTests"
   },
   "types": "dist/lib/index.d.ts",
   "dependencies": {
+    "@emotion/react": "^11.9.3",
+    "@mantine/core": "^5.0.0",
+    "@mantine/hooks": "^5.0.0",
+    "@mantine/notifications": "^5.0.0",
+    "@mantine/prism": "^5.0.0",
     "@truffle/dashboard-message-bus": "^0.1.7",
     "@truffle/dashboard-message-bus-client": "^0.1.5",
     "@truffle/dashboard-message-bus-common": "^0.1.3",
     "cors": "^2.8.5",
     "debug": "^4.3.2",
+    "ethers": "^5.6.9",
     "express": "^4.17.1",
     "get-port": "^5.1.1",
     "isomorphic-ws": "^4.0.1",
     "open": "^8.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-feather": "^2.0.10",
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "^5.0.1",
+    "wagmi": "^0.6.3",
     "ws": "^7.2.0"
   },
   "devDependencies": {
-    "@craco/craco": "^6.4.3",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^13.5.0",
+    "@babel/core": "^7.18.10",
+    "@babel/plugin-syntax-flow": "^7.18.6",
+    "@babel/plugin-transform-react-jsx": "^7.18.10",
     "@types/cors": "^2.8.12",
-    "@types/ethereum-protocol": "^1.0.2",
     "@types/express": "^4.17.13",
     "@types/jest": "27.4.1",
     "@types/node": "~12.12.0",
-    "@types/react": "^17.0.37",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/ws": "^7.2.0",
-    "autoprefixer": "^9",
-    "axios": "0.27.2",
     "concurrently": "^6.5.1",
     "cpy-cli": "^3.1.1",
     "cross-env": "^7.0.3",
-    "delay": "^5.0.0",
-    "ethereum-protocol": "^1.0.1",
-    "ethers": "^5.6.1",
-    "postcss": "^8",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-json-view": "^1.21.3",
-    "react-scripts": "^4.0.0",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
+    "eslint-config-react-app": "^7.0.1",
     "ts-jest": "28.0.7",
     "ts-node": "10.7.0",
-    "typescript": "^4.7.4",
-    "wagmi": "^0.2.21"
+    "typescript": "^4.7.4"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/dashboard/public/truffle-logomark.svg b/packages/dashboard/public/truffle-logomark.svg
diff --git a/packages/dashboard/src/App.tsx b/packages/dashboard/src/App.tsx
@@ -1,45 +1,41 @@
-import Dashboard from "./Dashboard";
+// Wrappers
+import MantineWrapper from "src/components/wrappers/MantineWrapper";
+import ColorSchemeWrapper from "src/components/wrappers/ColorSchemeWrapper";
+import WagmiWrapper from "src/components/wrappers/WagmiWrapper";
+import { DashProvider } from "src/contexts/DashContext";
+// Router
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+// Components
+import Layout from "src/components/composed/Layout";
+import RPCs from "src/components/composed/RPCs";
+import Palette from "src/components/composed/Palette";
+import MantineGlobal from "src/components/MantineGlobal";
 
-import { Provider, chain, defaultChains, Connector } from "wagmi";
-import { InjectedConnector } from "wagmi/connectors/injected";
-
-import { getDefaultProvider, providers as ethproviders } from "ethers";
-import { getNetwork } from "@ethersproject/providers";
-
-const defaultChain = chain.mainnet;
-
-const getProvider = (_config: { chainId?: number; connector?: Connector }) => {
-  let wProvider = _config.connector?.getProvider(true);
-  console.debug("getProvider", {
-    wProvider,
-    winEth: window.ethereum,
-    _config
-  });
-  let ret: any;
-  if (!wProvider) {
-    ret = getDefaultProvider(getNetwork(_config.chainId ?? defaultChain.id));
-  } else {
-    wProvider
-      .enable()
-      .then((r: any) => console.debug(r))
-      .catch((e: any) => console.error(e));
-    ret = new ethproviders.Web3Provider(wProvider);
-  }
-  console.debug("getProvider.returning", {
-    wProvider,
-    winEth: window.ethereum,
-    ret
-  });
-  return ret;
-};
-
-const connectors = [new InjectedConnector({ chains: defaultChains })];
-
-function App() {
+function App(): JSX.Element {
   return (
-    <Provider connectors={connectors} provider={getProvider}>
-      <Dashboard />
-    </Provider>
+    <div id="app">
+      <ColorSchemeWrapper>
+        <MantineWrapper>
+          <MantineGlobal /> {/* Set global styles */}
+          <WagmiWrapper>
+            <DashProvider>
+              <BrowserRouter>
+                <Routes>
+                  <Route path="/" element={<Layout />}>
+                    <Route index element={<Navigate to="/rpcs" replace />} />
+                    <Route path="rpcs" element={<RPCs />} />
+                  </Route>
+                  {process.env.NODE_ENV === "development" && (
+                    <Route path="colors" element={<Palette />} />
+                  )}
+                  <Route path="*" element={<Navigate to="/" replace />} />
+                </Routes>
+              </BrowserRouter>
+            </DashProvider>
+          </WagmiWrapper>
+        </MantineWrapper>
+      </ColorSchemeWrapper>
+    </div>
   );
 }