Merge pull request #138 from sigp/unstable

v0.1.0-beta.1

.eslintrc.json

@@ -27,6 +27,7 @@
         "quotes": ["error", "single"],
         "no-duplicate-imports": "error",
         "react/prop-types": 0,
+        "@typescript-eslint/no-explicit-any": "off",
         "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
     },
     "settings": {

Dockerfile

@@ -1,4 +1,4 @@
-ARG node_version=16.16
+ARG node_version=18
 ARG node_image=node:${node_version}
 
 # STAGE 1: builder
@@ -9,7 +9,7 @@ WORKDIR /app
 
 ENV NODE_ENV=development
 # install (dev) deps
-RUN yarn 
+RUN yarn
 
 ENV NODE_ENV=production
 # build (prod) app
@@ -18,4 +18,4 @@ RUN yarn build
 # STAGE 2
 FROM nginx:alpine AS production
 
-COPY --from=builder /app/build/ /usr/share/nginx/html/
+COPY --from=builder /app/build/ /usr/share/nginx/html/

Dockerfile.dev

@@ -1,4 +1,4 @@
-ARG node_version=16.16
+ARG node_version=18
 ARG node_image=node:${node_version}
 FROM $node_image
 
@@ -9,4 +9,4 @@ COPY . /app/
 WORKDIR /app
 
 RUN yarn install
-CMD ["yarn", "run", "dev"]
+CMD ["yarn", "run", "dev"]

Makefile

@@ -0,0 +1,19 @@
+# Make the Siren App
+
+
+# Default rule
+# Builds the electron app and executes it
+build:
+	yarn && yarn dev
+
+# Builds a development server
+dev:
+	yarn && yarn start
+
+# Runs a docker production webserver
+docker:
+	docker build -t siren . && docker run --rm -it --name siren -p 80:80 siren
+
+# Compile into a number of releases
+release:
+	yarn && yarn build-all

README.md

@@ -1,6 +1,87 @@
-# lighthouse-ui
-User interface for Lighthouse
+# Siren
 
+This is an open-source User Interface for the Lighthouse Ethereum Beacon Node
+and Validator Client.
+
+[![Book Status]][Book Link] [![Chat Badge]][Chat Link]
+
+[Chat Badge]: https://img.shields.io/badge/chat-discord-%237289da
+[Chat Link]: https://discord.gg/jpqcHXPRVJ
+[Book Status]:https://img.shields.io/badge/user--docs-unstable-informational
+[Book Link]: https://lighthouse-book.sigmaprime.io/lighthouse-ui.html
+[stable]: https://github.com/sigp/siren/tree/stable
+[unstable]: https://github.com/sigp/siren/tree/unstable
+
+## Documentation
+
+The [Lighthouse Book](https://lighthouse-book.sigmaprime.io) contains information for users and
+developers. Specifically the [Lighthouse UI](https://lighthouse-book.sigmaprime.io/lighthouse-ui.html) section of the book.
+
+## Building From Source
+
+### Requirements
+
+Building from source requires `Node v18` and `yarn`. 
+
+### Building From Source
+
+The electron app can be built from source by first cloning the repository and
+entering the directory:
+
+```
+$ git clone https://github.com/sigp/siren.git
+$ cd siren
+```
+
+Once cloned, the electron app can be built and ran via the Makefile by:
+
+```
+$ make
+```
+
+alternatively it can be built via:
+
+```
+$ yarn
+```
+
+Once completed successfully the electron app can be run via:
+
+```
+$ yarn dev
+```
+
+### Running In The Browser
+
+#### Docker (Recommended)
+
+Docker is the recommended way to run a webserver that hosts Siren and can be
+connected to via a web browser. We recommend this method as it established a
+production-grade web-server to host the application.
+
+`docker` is required to be installed with the service running.
+
+The docker image can be built and run via the Makefile by running:
+```
+$ make docker
+```
+
+Alternatively, to run with Docker, the image needs to be built. From the repository directory
+run:
+```
+$ docker build -t siren .
+```
+
+Then to run the image:
+```
+$ docker run --rm -ti --name siren -p 80:80 siren
+```
+
+This will open port 80 and allow your browser to connect. You can choose
+another local port by modifying the command. For example `-p 8000:80` will open
+port 8000.
+
+To view Siren, simply go to `http://localhost` in your web browser.
 
 # Running a Local Testnet
 
@@ -59,34 +140,3 @@ subdirectories will create a new testnet when running these commands again.
 ## Logs and Errors
 
 Logs and errors can be found in the `./local-testnet/testnet-data` directory.
-
-
-# Running Local Electron App
-You can run this app locally with react scripts and electronJs. 
-
-## Requirements
-`Node v16.16.0` and `yarn`
-
-## How to setup and run local
-
-CD into root of the project and run to setup node modules
-```bash 
-yarn
-```
-
-Then run local server and electron by running:
-```bash 
-yarn dev
-```
-
-## Run webapp in docker
-
-build image:  
-`docker build -t lighthouse-ui -f Dockerfile .`
-
-run it:  
-`docker run --rm -ti -name lh-ui -p 80:80 lighthouse-ui`
-
-If you're diskspace-constrained, make sure to clear your builder cache (when using buildx) or prune images (regular build) since the intermediate image is quite large (3.5 - 4.5GB to be reclaimed).  
-
-a Dockerfile for a dev environment is also provided: `Dockerfile.dev`

forge.config.js

@@ -1,14 +1,19 @@
+// eslint-disable-next-line no-undef
 module.exports = {
-  packagerConfig: {},
+  packagerConfig: {
+    icon: 'src/assets/images/sigma', // no file extension required
+  },
   rebuildConfig: {},
   makers: [
     {
       name: '@electron-forge/maker-squirrel',
-      config: {},
+      config: {
+        name: 'Siren',
+      },
     },
     {
       name: '@electron-forge/maker-zip',
-      platforms: ['darwin'],
+      platforms: ['darwin', 'mas', 'win32', 'linux'],
     },
     {
       name: '@electron-forge/maker-deb',
@@ -18,5 +23,11 @@ module.exports = {
       name: '@electron-forge/maker-rpm',
       config: {},
     },
+    {
+      name: '@electron-forge/maker-dmg',
+      config: {
+        format: 'ULFO',
+      },
+    },
   ],
-};
+}

package.json

@@ -3,10 +3,11 @@
   "description": "Electron Forge & Create React App Template",
   "license": "MIT",
   "homepage": "./",
-  "name": "lighthouse-ui",
-  "version": "0.1.0",
+  "name": "Siren",
+  "version": "0.1.0-beta.1",
   "private": true,
   "dependencies": {
+    "@electron-forge/maker-dmg": "^6.0.5",
     "@hookform/resolvers": "^2.9.8",
     "@storybook/theming": "^6.5.10",
     "@testing-library/jest-dom": "^5.14.1",
@@ -51,25 +52,21 @@
     "yup": "^0.32.11"
   },
   "scripts": {
-    "dev": "nf start",
+    "dev": "electron .",
     "start": "BROWSER=none react-scripts start",
     "build": "react-scripts build",
     "test": "jest",
     "coverage": "jest --coverage",
     "eject": "react-scripts eject",
-    "electron": "WEB_URL=http://localhost:3000 electron .",
-    "electron-prd": "electron .",
-    "electron-forge": "WEB_URL=http://localhost:3000 electron-forge start",
-    "electron-forge-prd": "electron-forge start",
-    "build-all": "npm run build; npm run make",
+    "build-all": "yarn build && yarn make",
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook -s public",
     "test-storybook": "test-storybook",
     "lint": "eslint src/**/*.{ts,tsx}",
     "lint:fix": "eslint --fix 'src/**/*.{ts,tsx}'",
     "format": "prettier --write './src/**/*.{ts,tsx}' --config ./.prettierrc",
     "package": "electron-forge package",
-    "make": "electron-forge make"
+    "make": "electron-forge make --arch=x64,arm64"
   },
   "eslintConfig": {
     "extends": [

public/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/sigma.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -23,7 +23,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Lighthouse</title>
+    <title>Siren</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

src/components/AccountEarnings/AccountEarning.tsx

@@ -136,7 +136,7 @@ const AccountEarning = () => {
               >
                 <div className='flex space-x-2'>
                   <Typography type='text-caption1' className='uppercase' color='text-dark400'>
-                    Eth
+                    ETH
                   </Typography>
                   <i
                     id='tooltip'

src/components/DiagnosticTable/HardwareInfo.tsx

@@ -98,7 +98,7 @@ const HardwareInfo = () => {
             <DiagnosticCard
               size={size}
               maxHeight='flex-1'
-              title='Ethereum Geth'
+              title='Ethereum Mainnet'
               metric=' '
               percent={syncPercentage}
               isBackground={false}

src/components/DisclosureModal/DisclosureModal.tsx

@@ -0,0 +1,65 @@
+import Rodal from 'rodal'
+import React, { FC, ReactNode } from 'react'
+import { UiMode } from '../../constants/enums'
+import useMediaQuery from '../../hooks/useMediaQuery'
+import Button, { ButtonFace } from '../Button/Button'
+import { useTranslation } from 'react-i18next'
+
+export interface DisclosureModalProps {
+  isOpen: boolean
+  backgroundImage: string
+  onClose: () => void
+  externalUrl?: string
+  externalTarget?: '_self' | '_blank'
+  mode?: UiMode
+  children: ReactNode
+}
+
+const DisclosureModal: FC<DisclosureModalProps> = ({
+  isOpen,
+  backgroundImage,
+  mode,
+  onClose,
+  externalUrl,
+  externalTarget,
+  children,
+}) => {
+  const { t } = useTranslation()
+  const isTablet = useMediaQuery('(max-width: 1024px)')
+
+  return (
+    <Rodal
+      visible={isOpen}
+      customStyles={{
+        backgroundColor: mode === UiMode.DARK ? '#1E1E1E' : 'white',
+        width: '100%',
+        maxWidth: isTablet ? '448px' : '949px',
+        height: 'max-content',
+        overflow: 'scroll',
+        zIndex: 999,
+      }}
+      onClose={onClose}
+    >
+      <div className='w-full h-full flex'>
+        <div
+          className='hidden lg:block flex-shrink-0 w-80 bg-dark100'
+          style={{
+            backgroundImage: `Url(${backgroundImage})`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+          }}
+        />
+        <div className='p-10 flex flex-col justify-between'>
+          <div>{children}</div>
+          {externalUrl && (
+            <Button target={externalTarget} href={externalUrl} type={ButtonFace.SECONDARY}>
+              {t('learnMore')} <i className='bi-arrow-right ml-2' />
+            </Button>
+          )}
+        </div>
+      </div>
+    </Rodal>
+  )
+}
+
+export default DisclosureModal