Merge pull request #801 from lidofinance/feat/clone-nor-simpledvt-hol…

…esky

Feat/clone nor simpledvt holesky

accounts.sample.json

@@ -1,24 +1,12 @@
 {
   "eth": {
-    "localhost": {
+    "dev-example": {
       "mnemonic": "test test test test test test test test test test test junk",
       "path": "m/44'/60'/0'/0",
       "initialIndex": 0,
       "count": 20
     },
-    "dev": {
-      "mnemonic": "rich dune dash tag exercise veteran sword speed spike absorb disease brush bracket doll noodle",
-      "path": "m/44'/60'/0'/0",
-      "initialIndex": 0,
-      "count": 20
-    },
-    "e2e": {
-      "mnemonic": "explain tackle mirror kit van hammer degree position ginger unfair soup bonus",
-      "path": "m/44'/60'/0'/0",
-      "initialIndex": 0,
-      "count": 50
-    },
-    "mainnet-fork-shapella-upgrade": ["4f3edf983ac636a65a842ce7c78d9aa706d3b113bce9c46f30d7d21715b23b1d"]
+    "fork-example": ["ac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80"]
   },
   "infura": {
     "projectId": "INFURA_PROJECT_ID"

apps/simple-dvt/README.md

@@ -0,0 +1,82 @@
+# StakingRouter Aragon App
+
+This directory contains source files for the [StakingRouter Aragon frontend app](https://mainnet.lido.fi/#/lido-dao/0x55032650b14df07b85bf18a3a3ec8e0af2e028d5/).
+
+## Verifying source code
+
+To verify that the StakingRouter app frontend was built from this source code, please follow instructions below.
+
+### Prerequisites
+
+- git
+- Node.js 16.14.2
+- ipfs 0.19.0
+
+### 1. Replicating IPFS hash and content URI
+
+Clone the Lido DAO repo,
+
+```bash
+git clone https://github.com/lidofinance/lido-dao.git
+```
+
+Go into the directory,
+
+```bash
+cd lido-dao
+```
+
+Checkout [this commit](https://github.com/lidofinance/lido-dao/commit/34f5d0d428fcb51aae74f0cb7387b9bd59916817) (the latest `yarn.lock` update for the StakingRouter app),
+
+```bash
+git checkout 34f5d0d428fcb51aae74f0cb7387b9bd59916817
+```
+
+Install dependencies **without updating the lockfile**. This will make sure that you're using the same versions of the dependencies that were used to develop the app,
+
+```bash
+yarn install --immutable
+```
+
+Build the static assets for the app,
+
+```bash
+# legacy app name
+export APPS=simple-dvt
+npx hardhat run scripts/build-apps-frontend.js
+```
+
+Get the IPFS hash of the build folder,
+
+```bash
+ipfs add -qr --only-hash apps/simple-dvt/dist/ | tail -n 1
+```
+
+
+This command should output `QmaSSujHCGcnFuetAPGwVW5BegaMBvn5SCsgi3LSfvraSo`.
+
+
+Now we have to obtain the content URI, which is this hash encoded for Aragon.
+
+Now we run the script,
+
+```bash
+export IPFS_HASH=QmaSSujHCGcnFuetAPGwVW5BegaMBvn5SCsgi3LSfvraSo
+npx hardhat run scripts/helpers/getContentUri.js
+```
+
+This command should print `0x697066733a516d54346a64693146684d454b5576575351316877786e33365748394b6a656743755a7441684a6b6368526b7a70`, which is our content URI.
+
+### 2. Verifying on-chain StakingRouter App content URI
+
+Open the [NodeOperatorsRegistry App Repo](https://etherscan.io/address/0x0D97E876ad14DB2b183CFeEB8aa1A5C788eB1831#readProxyContract) and scroll down to `getLatest` method, open the dropdown and click "Query". This will give you the NodeOperatorsRegistry app version, contract address and the content URI. Now check that the content URI that you've obtained in the previous step matches the one that Etherscan fetched for you from the contract.
+
+### 3. Verifying client-side resources
+
+Now that we have the IPFS hash and content URI, let's see that it is, in fact, the one that's used on the DAO website.
+
+Open the [StakingRouter app](https://mainnet.lido.fi/#/lido-dao/0x55032650b14df07b85bf18a3a3ec8e0af2e028d5/) in your browser, then open the network inspector and refresh the page to track all of the network requests that the website makes.
+
+You will find that one of the two HTML files has, in fact, been loaded from `https://ipfs.mainnet.fi/ipfs/QmaSSujHCGcnFuetAPGwVW5BegaMBvn5SCsgi3LSfvraSo/index.html`.
+
+You are done! ✨

apps/simple-dvt/app/.babelrc

@@ -0,0 +1,30 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": {
+          "browsers": [
+            "> 1%",
+            "last 3 versions",
+            "ie >= 9",
+            "ios >= 8",
+            "android >= 4.2"
+          ]
+        },
+        "useBuiltIns": "entry",
+        "corejs": 3,
+        "shippedProposals": true,
+      }
+    ]
+  ],
+  "plugins": [
+    [
+      "styled-components",
+      {
+        "displayName": true
+      }
+    ]
+  ]
+}

apps/simple-dvt/app/.eslintrc

@@ -0,0 +1,21 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": [
+    "standard",
+    "standard-react",
+    "plugin:prettier/recommended",
+    "prettier/react"
+  ],
+  "parser": "babel-eslint",
+  "plugins": ["prettier", "react", "react-hooks"],
+  "rules": {
+    "valid-jsdoc": "error",
+    "react/prop-types": 0,
+    "linebreak-style": ["error", "unix"],
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
+  }
+}

apps/simple-dvt/app/.gitignore

@@ -0,0 +1,31 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# cache
+.cache
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+
+# misc
+.env
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# built assets
+/public/aragon-ui
+/public/script.js
+/public/script.map

apps/simple-dvt/app/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "semi": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false
+}

apps/simple-dvt/app/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <title>Aragon App</title>
+</head>
+<body>
+<noscript>
+    You need to enable JavaScript to run this app.
+</noscript>
+<div id="root"></div>
+<script src="./src/index.js"></script>
+</body>
+</html>

apps/simple-dvt/app/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "simple-dvt-frontend",
+  "version": "1.0.0",
+  "main": "src/index.js",
+  "dependencies": {
+    "@aragon/api": "^2.0.0",
+    "@aragon/api-react": "^2.0.0",
+    "@aragon/ui": "^1.7.0",
+    "core-js": "^3.6.5",
+    "formik": "^2.2.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "regenerator-runtime": "^0.13.7",
+    "styled-components": "^5.2.0",
+    "yup": "^0.29.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.21.0",
+    "@babel/preset-env": "^7.11.5",
+    "@babel/preset-react": "^7.10.1",
+    "babel-eslint": "^10.1.0",
+    "babel-plugin-styled-components": "^1.11.1",
+    "copyfiles": "^2.3.0",
+    "eslint": "^8.34.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-config-standard-react": "^9.2.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.20.6",
+    "eslint-plugin-react-hooks": "^4.1.2",
+    "eslint-plugin-standard": "^5.0.0",
+    "parcel-bundler": "^1.12.4",
+    "prettier": "^2.8.4"
+  },
+  "scripts": {
+    "build": "yarn sync-assets && yarn build:app && yarn build:script",
+    "build:app": "parcel build index.html -d ../dist/ --public-url \".\" --no-cache",
+    "build:script": "parcel build src/script.js --out-dir ../dist/ --no-cache",
+    "watch:script": "parcel watch src/script.js --out-dir ../dist/ --no-hmr",
+    "serve": "parcel serve index.html --out-dir ../dist/ --no-cache",
+    "watch": "yarn watch:script",
+    "sync-assets": "copy-aragon-ui-assets ../dist && copyfiles -u 1 './public/**/*' ../dist",
+    "start": "yarn sync-assets && yarn watch:script & yarn serve",
+    "dev": "yarn sync-assets && yarn watch:script & yarn serve -- --port 3012",
+    "dev-fallback": "bash -c 'yarn sync-assets && yarn watch:script & yarn serve --port 3012'"
+  }
+}

apps/simple-dvt/app/public/meta/details.md

@@ -0,0 +1,6 @@
+An application for Aragon.
+
+**Features**
+- Feature \#1.
+- Feature \#2.
+- Feature \#3.

apps/simple-dvt/app/sample.env

@@ -0,0 +1,3 @@
+SK_LIMIT=20
+SUBGRAPH_ENDPOINT=https://holesky.lido.fi/key-checker/api/subgraph
+SIGNATURE_VERIFY_ENDPOINT=https://holesky.lido.fi/key-checker/api/signature

apps/simple-dvt/app/src/App.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import { useAragonApi, useGuiStyle } from '@aragon/api-react'
+import {
+  Button,
+  Header,
+  Main,
+  Split,
+  SyncIndicator,
+  useTheme,
+} from '@aragon/ui'
+import { ThemeProvider } from 'styled-components'
+import { SimpleDVTPrimary, SimpleDVTSecondary } from './components/SimpleDVT'
+
+const App = () => {
+  const { appState } = useAragonApi()
+  const { appearance } = useGuiStyle()
+  const { isSyncing } = appState
+
+  console.log(appState)
+
+  const theme = useTheme()
+
+  return (
+    <Main theme={appearance}>
+      <ThemeProvider theme={theme}>
+        <SyncIndicator visible={isSyncing} shift={50} />
+        <Header
+          primary="SimpleDVT"
+        />
+        <Split primary={<SimpleDVTPrimary />} secondary={<SimpleDVTSecondary />} />
+      </ThemeProvider>
+    </Main>
+  )
+}
+
+export default App

apps/simple-dvt/app/src/components/AddNodeOperatorSidePanel.js

@@ -0,0 +1,76 @@
+import { Button, GU, SidePanel } from '@aragon/ui'
+import React from 'react'
+import { Formik, Field } from 'formik'
+import * as yup from 'yup'
+import TextField from './TextField'
+
+const initialValues = {
+  name: '',
+  address: '',
+}
+
+const validationSchema = yup.object().shape({
+  name: yup.string().required().min(1),
+  address: yup.string().required().min(1),
+})
+
+function PanelContent({ addNodeOperatorApi, onClose }) {
+  const onSubmit = ({ name, address }) => {
+    addNodeOperatorApi(name, address)
+      .catch(console.error)
+      .finally(() => {
+        onClose()
+      })
+  }
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      validationSchema={validationSchema}
+      onSubmit={onSubmit}
+      validateOnBlur={false}
+      validateOnChange={false}
+    >
+      {({ submitForm, isSubmitting, errors, values }) => {
+        return (
+          <form
+            css={`
+              margin-top: ${3 * GU}px;
+            `}
+            onSubmit={(e) => {
+              e.preventDefault()
+              submitForm()
+            }}
+          >
+            <pre>
+              {JSON.stringify(errors, null, 2)}
+              {JSON.stringify(values, null, 2)}
+            </pre>
+            <Field name="name" label="Name" required component={TextField} />
+            <Field
+              name="address"
+              label="Address"
+              required
+              component={TextField}
+            />
+
+            <Button
+              mode="strong"
+              wide
+              required
+              disabled={isSubmitting}
+              label="Add Node Operator"
+              type="submit"
+            />
+          </form>
+        )
+      }}
+    </Formik>
+  )
+}
+
+export default (props) => (
+  <SidePanel title="ADD NODE OPERATOR" {...props}>
+    <PanelContent {...props} />
+  </SidePanel>
+)