WIP

CrommVardek · Jun 14, 2021 · b71b8f0 · b71b8f0
1 parent 15aec3e
commit b71b8f0
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 44 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,30 +2,37 @@ import React from 'react';
 import logo from './Polkadot_logo.svg';
 import './App.css';
 import { Header } from './components/Header';
-import { Blockchain } from './models/Chain';
+import { RelayChain } from './models/Chain';
 
 function App() {
 
   const chains = [
-    { name: "Kusama", unit: "KSM", mainColor: "#000000", secondaryColor: "#ffffff" } as Blockchain,
-    { name: "Polkadot", unit: "DOT", mainColor: "#e6007a", secondaryColor: "#ffffff" } as Blockchain,
+    {
+      name: 'Kusama',
+      unit: 'KSM',
+      mainColor: '#000000',
+      secondaryColor: '#ffffff',
+      website: 'https://kusama.network/',
+    } as RelayChain,
+    {
+      name: 'Polkadot',
+      unit: 'DOT',
+      mainColor: '#e6007a',
+      secondaryColor: '#ffffff',
+      website: 'https://polkadot.network/',
+    } as RelayChain,
   ];
 
   return (
     <>
-      <Header chains={chains} logo={logo} applicationName={"Polk-Auction"} />
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
+      <Header chains={chains} applicationName={'Polk-Auction'} />
+      <div className='App'>
+        <header className='App-header'>
+          <img src={logo} className='App-logo' alt='logo' />
           <p>
             Edit <code>src/App.tsx</code> and save to reload.
           </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          <a className='App-link' href='https://reactjs.org' target='_blank' rel='noopener noreferrer'>
             Learn React
           </a>
         </header>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,53 +1,110 @@
-import { AppBar, makeStyles, Tab, Tabs, Toolbar, Typography } from '@material-ui/core';
+import { AppBar, IconButton, makeStyles, SvgIcon, Tab, Tabs, Toolbar, Typography } from '@material-ui/core';
 import { useCallback, useState } from 'react';
-import { Blockchain } from '../models/Chain';
+import { RelayChain } from '../models/Chain';
+import githubLogo from '../github_logo.svg';
+import logo from '../Polkadot_logo.svg';
 
 interface HeaderProps {
   applicationName: string;
-  chains: Array<Blockchain>;
-  logo: string;
+  chains: Array<RelayChain>;
 }
 
-const useStyles = (chain: Blockchain) => makeStyles((theme) => ({
-  root: {
-    flexGrow: 1,
-    '&:focus': {
-      opacity: 1,
+interface RelayChainIconProps {
+  website: string;
+}
+
+const useStyles = (chain: RelayChain) =>
+  makeStyles((theme) => {
+  return ({
+    root: {
+      flexGrow: 1,
+      '&:focus': {
+        opacity: 1,
+      },
+    },
+    indicator: {
+      backgroundColor: chain.secondaryColor ?? '#ffffff',
+      height: '10px',
+      display: 'flex',
+      width: '100%',
+    },
+    toolbar: {
+      backgroundColor: chain.mainColor ?? '#000000',
+      color: chain.secondaryColor ?? '#ffffff',
     },
-  },
-  indicator: {
-    backgroundColor: chain ? chain.secondaryColor : '#ffffff',
-    height: "10px",
-    display: "flex",
-    width: "100%",
-  },
-  toolbar: {
-    backgroundColor: chain ? chain.mainColor : '#000000',
-  },
-  chains: {
-    backgroundColor: chain ? chain.mainColor : '#000000',
-  }
-}));
-
-export const Header: (props: HeaderProps) => JSX.Element = ({ applicationName, chains, logo }: HeaderProps) => {
+    toolbarButtons: {
+      marginLeft: 'auto',
+      color: chain.secondaryColor ?? '#ffffff',
+    },
+    chains: {
+      backgroundColor: chain.mainColor ?? '#000000',
+    },
+    title: {
+      flexGrow: 1,
+    },
+  });
+});
+
+const GithubIcon = () => {
+  return (
+    <a href="https://github.com/CrommVardek/polk-auction-ui">
+      <SvgIcon >
+        <path d={githubLogo} />
+      </SvgIcon>
+    </a>);
+}
+
+const RelayChainIcon: (props: RelayChainIconProps) => JSX.Element = ({website} : RelayChainIconProps) => {
+  return (
+    <a href={website}>
+      <SvgIcon>
+        <path d={logo} />
+      </SvgIcon>
+    </a>
+  );
+}
+
+export const Header: (props: HeaderProps) => JSX.Element = ({ applicationName, chains }: HeaderProps) => {
 
   const [selectedChain, setSelectedChain] = useState(chains[0]);
   const classes = useStyles(selectedChain)();
 
   const switchChain = useCallback((event, newValue) => {
     setSelectedChain(chains[newValue]);
-  }, []);
+  }, [chains]);
 
   return (
     <div className={classes.root}>
       <AppBar position='static'>
         <div className={classes.toolbar}>
-          <Toolbar>// TODO</Toolbar>
+          <Toolbar>
+          <Typography variant="h6" className={classes.title}>
+            {applicationName}
+          </Typography>
+            <div className={classes.toolbarButtons}>
+              <IconButton aria-label='github'>
+                  <GithubIcon />
+              </IconButton>
+              <IconButton aria-label='relay-chain'>
+                  <RelayChainIcon website={selectedChain.website ?? ''} />
+              </IconButton>
+            </div>
+          </Toolbar>
         </div>
         <div className={classes.chains}>
-          <Tabs value={selectedChain} onChange={switchChain} aria-label='blockchains' TabIndicatorProps={{ className: classes.indicator }}>
+          <Tabs
+            value={selectedChain}
+            onChange={switchChain}
+            aria-label='blockchains'
+            TabIndicatorProps={{ className: classes.indicator }}
+          >
             {chains.map((chain) => {
-              return <Tab label={chain.name} style={{ color: chain.name === selectedChain.name ? chain.secondaryColor : "#bebebe" }} />;
+              return (
+                <Tab
+                  label={chain.name}
+                  style={{ color: chain.name === selectedChain.name ? chain.secondaryColor : '#bebebe' }}
+                />
+              );
             })}
           </Tabs>
         </div>

diff --git a/src/github_logo.svg b/src/github_logo.svg
diff --git a/src/models/Chain.ts b/src/models/Chain.ts
@@ -1,7 +1,15 @@
 
+export interface RelayChain extends Blockchain {
+    mainColor: string,
+    secondaryColor?: string,
+    website?: string,
+}
+
+export interface ParaChain extends Blockchain {
+    paraId: number,
+}
+
 export type Blockchain = {
     name: string,
     unit: string,
-    mainColor: string,
-    secondaryColor?: string,
 }
diff --git a/tslint.json b/tslint.json
@@ -0,0 +1,29 @@
+{
+    "extends": [
+      "tslint:recommended",
+      "tslint-react",
+      "tslint-plugin-prettier",
+      "tslint-config-prettier"
+    ],
+    "linterOptions": {
+      "exclude": ["config/**/*.js", "node_modules/**/*.ts"]
+    },
+    "rules": {
+      "prettier": true,
+      "ordered-imports": false,
+      "object-literal-sort-keys": false,
+      "no-console": false,
+      "no-empty": false,
+      "no-namespace": false,
+      "no-bitwise": false,
+      "quotemark": [true, "single", "jsx-double"],
+      "semicolon": [true, "always", "ignore-bound-class-methods"],
+      "interface-name": false,
+      "array-type": false,
+      "max-classes-per-file": false,
+      "variable-name": [
+        true,
+        "allow-leading-underscore"
+      ]
+    }
+  }