Merge pull request #90 from casper-network/feat-add-org-name-to-env

Feat add org name to env

.env.example

@@ -0,0 +1,5 @@
+MIDDLEWARE_URL=
+NODE_URLS=
+ORG_NAME=
+ORG_LOGO_URL=
+DISABLE_LOGO=true

README.md

@@ -9,13 +9,20 @@ You need to have Docker and Docker Compose set and running.
 1. Create `.env` file in a root of a project.
 
 Example:
+
 ```
 MIDDLEWARE_URL=http://localhost:4000/rpc # middleware URL, by default its http://localhost:4000/rpc
 NODE_URLS=http://3.138.177.248:7777/rpc # it can be comma separated list of RPCs
-NETWORK_NAME=integration-test # network name, you can check it in chainspec
+```
+
+And if so desired, change the application brand name and brand logo by adding:
+
+```
+ORG_NAME=your org name
+ORG_LOGO_URL=https://example.com/your-org-logo
+DISABLE_LOGO=false // disable default casper logo
 ```
 
 2. Run `make prod-build` or `make dev-build` if you are using the app for development purposes. (HMR and debug modes will be enabled)
-3. Run `make prod-start` if you are using the app for production (optimized builds) or `make dev-start` for development. 
+3. Run `make prod-start` if you are using the app for production (optimized builds) or `make dev-start` for development.
 4. The frontend will be running at port `3000` and middleware at port `4000`.
-

docker/docker-compose.yml

@@ -7,10 +7,16 @@ services:
       dockerfile: frontend/Dockerfile
       args:
         - REACT_APP_MIDDLEWARE_URL=${MIDDLEWARE_URL}
+        - REACT_APP_ORG_NAME=${ORG_NAME}
+        - REACT_APP_ORG_LOGO_URL=${ORG_LOGO_URL}
+        - REACT_APP_DISABLE_LOGO=${DISABLE_LOGO}
     image: blockexplorer-frontend
     environment:
       - NODE_ENV=development
       - REACT_APP_MIDDLEWARE_URL=${MIDDLEWARE_URL}
+      - REACT_APP_ORG_NAME=${ORG_NAME}
+      - REACT_APP_ORG_LOGO_URL=${ORG_LOGO_URL}
+      - REACT_APP_DISABLE_LOGO=${DISABLE_LOGO}
     restart: on-failure
     volumes:
       - ./../frontend:/usr/src/app

frontend/Dockerfile

@@ -3,6 +3,12 @@ FROM node:16.14.0-alpine AS base
 ARG REACT_APP_MIDDLEWARE_URL
 ENV REACT_APP_MIDDLEWARE_URL "$REACT_APP_MIDDLEWARE_URL"
 
+ARG REACT_APP_ORG_NAME
+ENV REACT_APP_ORG_NAME "$REACT_APP_ORG_NAME"
+
+ARG REACT_APP_ORG_LOGO_URL
+ENV REACT_APP_ORG_LOGO_URL "$REACT_APP_ORG_LOGO_URL"
+
 WORKDIR /usr/src/app
 
 EXPOSE 3000
@@ -23,8 +29,8 @@ ENV NODE_ENV "production"
 USER root
 
 RUN \
-apk --no-cache --update add dumb-init && \
-rm -rf /var/cache/apk/*
+  apk --no-cache --update add dumb-init && \
+  rm -rf /var/cache/apk/*
 
 RUN npm install -g serve
 

frontend/README.md

@@ -1,10 +1,4 @@
-# Getting Started with Create React App
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-## Available Scripts
-
-In the project directory, you can run:
+## Scripts
 
 ### `npm start`
 
@@ -29,18 +23,14 @@ Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+### `npm run lint`
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+### `npm run style:check`
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+### `npm run style:fix`
 
-## Learn More
+### `npm run test`
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+### `npm run test:watch`
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+### `npm run test:coverage`

frontend/public/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Casper Labs CSPR Block Explorer" />
+    <meta name="description" content="Block Explorer" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

frontend/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "CSPR Block Explorer",
-  "name": "Casper Block Explorer",
+  "short_name": "Block Explorer",
+  "name": "Block Explorer",
   "icons": [
     {
       "src": "favicon.ico",

frontend/src/App.tsx

@@ -2,7 +2,7 @@ import React, { StrictMode, useEffect } from 'react';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import useMeasure from 'react-use-measure';
 
-import { DemoHeader, Footer } from './components';
+import { Header, Footer } from './components';
 import {
   AccountPage,
   BlockPage,
@@ -32,7 +32,7 @@ const App = () => {
         ref={ref}
         className="bg-light-grey grid min-h-screen grid-rows-layout">
         <BrowserRouter>
-          <DemoHeader />
+          <Header />
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/peers" element={<Peers />} />

frontend/src/api/rpc-client.test.ts

@@ -883,5 +883,3 @@ describe('rpc-client', () => {
     });
   });
 });
-
-export {};

frontend/src/api/rpc-client.ts

@@ -4,14 +4,16 @@ import {
   CLPublicKey,
 } from 'casper-js-sdk';
 import { Block, Deploy, DeployStatus, Peer, NetworkStatus } from '../types';
-import { formatDate, formatTimeAgo } from '../utils';
+import { formatDate, formatTimeAgo, loadConfig } from '../utils';
 import { ApiError } from './api-error';
 import {
   JsonBlockWithBody,
   JsonDeployPayment,
   GetStatusResultExtended,
 } from './missing-sdk-types';
 
+const { middlewareUrl } = loadConfig();
+
 export const DEFAULT_NUM_TO_SHOW = 10;
 export class RpcApi {
   constructor(
@@ -388,8 +390,6 @@ export enum RpcApiError {
   GetStatusFailed = 'getStatus/fetch-failed',
 }
 
-const casperJsonRpcService = new CasperServiceByJsonRPC(
-  process.env.REACT_APP_MIDDLEWARE_URL!,
-);
+const casperJsonRpcService = new CasperServiceByJsonRPC(middlewareUrl);
 
 export const casperApi = new RpcApi(casperJsonRpcService);