style

package.json

@@ -12,6 +12,7 @@
     "@types/node-fetch": "^2.5.7",
     "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",
+    "bootstrap": "^4.5.3",
     "react": "^17.0.1",
     "react-bootstrap": "^1.4.0",
     "react-dom": "^17.0.1",
@@ -20,7 +21,7 @@
     "web-vitals": "^0.2.4"
   },
   "scripts": {
-    "start": "PORT=3030 react-scripts start",
+    "start": "HOST=localhost PORT=3030 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
@@ -42,5 +43,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/bootstrap": "^5.0.1",
+    "@types/react-bootstrap": "^0.32.25"
   }
 }

public/manifest.json

@@ -21,5 +21,5 @@
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "background_color": "#000000"
 }

src/App.tsx

@@ -1,9 +1,11 @@
 import React from "react";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './index.css';
 import { Dashboard, Loading } from "./components";
 //import { withRouter } from "react-router-dom";
 import moment from "moment";
 import * as get from "./lib/getters";
-import { wsLocation } from "./config";
+import { domain, wsLocation } from "./config";
 
 // types
 import { Block, NominatorsEntries, Proposals } from "./types";
@@ -24,6 +26,7 @@ interface IState {
   posts: number[];
   categories: number[];
   threads: number[];
+  domain: string;
 }
 
 const initialState = {
@@ -41,7 +44,8 @@ const initialState = {
     last: 0,
     active: [],
     executing: []
-  }
+  },
+  domain
 };
 
 class App extends React.Component<IProps, IState> {

src/components/Dashboard/Blocks.tsx

@@ -6,7 +6,7 @@ const Blocks = (props: { blocks: Block[] }) => {
     .sort((a: Block, b: Block) => b.timestamp - a.timestamp)
     .slice(0, 10);
   return (
-    <div>
+    <div className='box overflow-hidden' style={{height: '13em'}}>
       <h3>previous blocks</h3>
       <div>
         {blocks.map(b => (

src/components/Dashboard/index.tsx

@@ -9,16 +9,18 @@ interface IProps {
   blocks: Block[];
   nominators: string[];
   validators: string[];
+  domain: string;
 }
 
 const Dashboard = (props: IProps) => {
-  const { block, blocks, nominators, validators } = props;
-
+  const { domain, block, blocks, nominators, validators } = props;
+  
   return (
-    <div className="w-100 h-100 d-flex flex-grow-1 align-items-center justify-content-center d-flex flex-column">
-      <div>
+    <div className="w-100 h-80 position-fixed flex-grow-1 d-flex align-items-center justify-content-center d-flex flex-column">
+    <h1><a href={`${domain}`}>Joystream</a></h1>
+      <div className='box'>
         <h3>latest block</h3>
-        <h2>{block}</h2>
+        {block}
       </div>
       <Blocks blocks={blocks} />
       <Validators validators={validators} />

src/components/Loading.tsx

@@ -3,8 +3,8 @@ import { Spinner } from "react-bootstrap";
 
 const Loading = () => {
   return (
-    <div className="w-100 h-100 d-flex flex-grow-1 align-items-center justify-content-center">
-      <Spinner animation="grow" variant="dark" />
+    <div className="h-100 bg-dark d-flex flex-column flex-grow-1 align-items-center justify-content-center">
+      <Spinner animation="grow" variant="light" title="Connecting to Websocket" />
     </div>
   );
 };

src/config.ts

@@ -1 +1,4 @@
-export const wsLocation = 'ws://joystreamstats.live:9944'
+//export const wsLocation = 'wss://joystreamstats.live:9944/'
+export const domain = 'https://testnet.joystream.org'
+
+export const wsLocation = 'wss://rome-rpc-endpoint.joystream.org:9944/'

src/index.css

@@ -1,13 +1,37 @@
+html,
+body,
+#root,
+.App {
+  height: 100%;
+  background-color: #343a40;
+  font-size: 0.8rem;
+}
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+a:link,
+a:active,
+a:visited,
+a:hover {
+  color: #001414;
+  text-decoration: none !important;
+}
+
+h3 {
+  font-size: 1rem;
+}
+
+.box {
+  color: white;
+  margin: 5px;
+  padding: 15px;
+  background-color: teal;
+  text-align: center;
 }