From d6da8a9e2069032ef1dfaeb8765b2a7691a09368 Mon Sep 17 00:00:00 2001
From: Dmytro Savchenko <login.was.here@gmail.com>
Date: Sat, 13 Feb 2021 16:20:41 +0200
Subject: [PATCH] Add light theme

---
 .env                                          |   1 +
 components/Header/index.js                    |  47 ++--
 components/Node/index.js                      |   9 +-
 components/Nodes/index.js                     |  34 ++-
 components/TableControls/index.js             |  21 +-
 .../fixtures/platform.getCurrentSupply.json   |   7 +
 .../platform.getCurrentValidators.json        |   0
 lib/api/fixtures/platform.getHeight.json      |   7 +
 lib/api/fixtures/platform.getTotalStake.json  |   7 +
 lib/api/index.js                              | 151 ++++++++++++
 pages/404.js                                  |   1 +
 pages/_app.js                                 |   7 +
 pages/api/graphql/resolvers/index.js          | 226 +-----------------
 pages/api/graphql/resolvers/node.js           |  33 +++
 pages/api/graphql/resolvers/nodes.js          |  56 +++++
 pages/api/graphql/resolvers/stats.js          |  31 +++
 pages/home.js                                 |  36 ++-
 pages/node.js                                 |   4 +-
 styles/main.css                               | 206 ++++++++++++++--
 19 files changed, 589 insertions(+), 295 deletions(-)
 create mode 100644 lib/api/fixtures/platform.getCurrentSupply.json
 rename pages/api/graphql/schemas/nodes.json => lib/api/fixtures/platform.getCurrentValidators.json (100%)
 create mode 100644 lib/api/fixtures/platform.getHeight.json
 create mode 100644 lib/api/fixtures/platform.getTotalStake.json
 create mode 100644 lib/api/index.js
 create mode 100644 pages/api/graphql/resolvers/node.js
 create mode 100644 pages/api/graphql/resolvers/nodes.js
 create mode 100644 pages/api/graphql/resolvers/stats.js

diff --git a/.env b/.env
index af53dd3..483f4ac 100644
--- a/.env
+++ b/.env
@@ -1 +1,2 @@
 NEXT_PUBLIC_APP_URL=https://test.avaxnodes.com
+NEXT_PUBLIC_USE_MOCK_DATA=true
diff --git a/components/Header/index.js b/components/Header/index.js
index 9fb5182..766c011 100644
--- a/components/Header/index.js
+++ b/components/Header/index.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { NavDropdown } from 'react-bootstrap'
+import { NavDropdown, Navbar } from 'react-bootstrap'
 import { useRouter } from 'next/router'
 import { useDarkMode } from 'next-dark-mode'
 
@@ -10,29 +10,11 @@ export const Header = ({ children, currentLocale, currentRoute, route }) => {
   const router = useRouter()
   const { darkModeActive, switchToDarkMode, switchToLightMode } = useDarkMode()
 
-  // const findActive = (text) => {
-  //   if (autoModeActive) return text === 'auto'
-  //   else if (darkModeActive) return text === 'dark'
-  //   else return text === 'light'
-  // }
-
-  console.log({darkModeActive})
-
-  // const toggleMode = () => {
-  //   if (darkModeActive) {
-  //     console.log('toggleMode switchToLightMode')
-  //     switchToLightMode()
-  //   } else {
-  //     console.log('toggleMode switchToDarkMode')
-  //     switchToDarkMode()
-  //   }
-  // }
-
   const dropdownLocales = locales.filter(item => item !== currentLocale)
-  console.log(currentRoute, `${currentLocale}-home`)
   const locale = currentLocale === defaultLocale ? undefined : currentLocale
   return (
-    <nav className={`navbar navbar-expand-lg navbar-dark fixed-top ${darkModeActive ? 'bg-dark' : 'bg-light'}`}>
+    <Navbar collapseOnSelect expand="lg" bg={darkModeActive ? 'dark' : 'light'} variant={darkModeActive ? 'dark' : 'light'} fixed="top">
+    {/* <nav className={`navbar navbar-expand-lg navbar-dark fixed-top ${darkModeActive ? 'bg-dark' : 'bg-light'}`}> */}
       <div className="container">
         <Link route={route} params={{ locale }}>
           <a className="navbar-brand">
@@ -44,7 +26,8 @@ export const Header = ({ children, currentLocale, currentRoute, route }) => {
           </a>
         </Link>
 
-        <div className="collapse navbar-collapse" id="navbarResponsive">
+        <Navbar.Toggle aria-controls="navbarResponsive" />
+        <Navbar.Collapse id="navbarResponsive">
 
           <ul className="navbar-nav">
             <li className={`nav-item ${currentRoute === 'home' ? 'active' : ''}`}>
@@ -65,15 +48,21 @@ export const Header = ({ children, currentLocale, currentRoute, route }) => {
           </ul>
 
           <ul className="navbar-nav ml-auto">
-            <li className="nav-item toggle-wrap" id="toggel_btn">
-              <input type="checkbox" id="toggle_checkbox" />
+            <li className="nav-item toggle-wrap" id="toggel_btn" onClick={() => {
+              if (darkModeActive) {
+                switchToLightMode()
+              } else {
+                switchToDarkMode()
+              }
+            }}>
+              {/* <input type="checkbox" id="toggle_checkbox" /> */}
               <label htmlFor="toggle_checkbox">
                 {darkModeActive ? (
                   <img src="/static/images/switch1.svg" className="night" />
                 ) : (
-                  <img src="/static/images/light-moon.svg" className="night-light" onClick={() => switchToDarkMode()} />
+                  <img src="/static/images/light-moon.svg" className="night-light" />
                 )}
-                <img src="/static/images/day.svg" className="day" onClick={() => switchToLightMode()} />
+                <img src="/static/images/day.svg" className="day" />
               </label>
             </li>
           </ul>
@@ -89,7 +78,7 @@ export const Header = ({ children, currentLocale, currentRoute, route }) => {
               border: 'none',
             }}
             title={(
-              <span className="mr-2 d-flex align-items-center text-white">
+              <span className="mr-2 d-flex align-items-center">
                 <img
                   src={`/static/images/icons/flag-${currentLocale}.svg`}
                   width={25}
@@ -130,10 +119,10 @@ export const Header = ({ children, currentLocale, currentRoute, route }) => {
             ))}
           </NavDropdown>
 
-        </div>
+        </Navbar.Collapse>
 
       </div>
-    </nav>
+    </Navbar>
   )
 }
 
diff --git a/components/Node/index.js b/components/Node/index.js
index f15e6c1..726a495 100644
--- a/components/Node/index.js
+++ b/components/Node/index.js
@@ -146,8 +146,9 @@ export const Node = ({
               </div>
               <div className=" col-3 col-md-4 col-sm-4 ">
                 {item && item.connected && (
-                  <div className="PagesubTitle"><i className="fas fa-circle"></i>
-                  ACTIVE
+                  <div className="PagesubTitle d-flex justify-content-end align-items-center">
+                    <FaCircle fill={item.connected ? '#5DA574' : undefined} fontSize={10} />
+                    <span className="ml-2">{'ACTIVE'}</span>
                   </div>
                 )}
               </div>
@@ -161,8 +162,8 @@ export const Node = ({
                 <p className="progress-title">Available space</p>
                 <div className="progress-bar-wrap relative">
                   <div className="label-wrap">
-                    <label className="available-label"><strong>{numberFormat(maxStaked)}</strong> AVAX total</label>
-                    <label className="total-label"><strong>{numberFormat(leftToStack)}</strong> AVAX free</label>
+                    <label className="available-label"><strong>{numberFormat(maxStaked, 0)}</strong> AVAX total</label>
+                    <label className="total-label"><strong>{numberFormat(leftToStack, 0)}</strong> AVAX free</label>
                   </div>
                   <div className="progress">
                     <div
diff --git a/components/Nodes/index.js b/components/Nodes/index.js
index aa6db0f..7a4286c 100644
--- a/components/Nodes/index.js
+++ b/components/Nodes/index.js
@@ -2,6 +2,7 @@ import React from 'react'
 import { gql, useQuery } from '@apollo/client';
 import { FaCircle } from "react-icons/fa";
 import moment from 'moment'
+import { useDarkMode } from 'next-dark-mode'
 
 import shortNodeId from '../../utils/shortNodeId';
 import numberFormat from '../../utils/numberFormat';
@@ -111,6 +112,9 @@ const Filters = ({
   setFilter,
   setPage,
 }) => {
+  const [selectFilterOpen, setSelectFilterOpen] = React.useState(false);
+  const [selectFilterOptionsOpen, setSelectFilterOptionsOpen] = React.useState(false);
+  const { darkModeActive } = useDarkMode()
   return (
     <div className="filter-wrapper">
       <div className="search-container">
@@ -127,8 +131,11 @@ const Filters = ({
             }}
           />
           <img src="/static/images/search.svg" alt="search" className="search" />
-          <img src="/static/images/right-arrow.svg" className="right-arrow dark" />
-          <img src="/static/images/search2.svg" className="right-arrow light" />
+          {darkModeActive ? (
+            <img src="/static/images/right-arrow.svg" className="right-arrow" />
+          ): (
+            <img src="/static/images/search2.svg" className="right-arrow" />
+          )}
         </div>
       </div>
       <div className="freespace-wrap">
@@ -147,6 +154,7 @@ const Filters = ({
             aria-haspopup="listbox"
             aria-expanded="false"
             title="Free Space"
+            onClick={() => setSelectFilterOpen(!selectFilterOpen)}
           >
             <div className="filter-option">
               <div className="filter-option-inner">
@@ -154,7 +162,10 @@ const Filters = ({
               </div>
             </div>
           </button>
-          <div className="dropdown-menu" style={{ maxHeight: '588.422px', overflow: 'hidden', minHeight: '0px', willChange: 'transform' }}>
+          <div
+            className={`dropdown-menu ${selectFilterOpen ? 'd-block' : ''}`}
+            style={{ maxHeight: '588.422px', overflow: 'hidden', minHeight: '0px', willChange: 'transform' }}
+          >
             <div className="inner show" role="listbox" id="bs-select-1" tabIndex="-1" aria-activedescendant="bs-select-1-0"
               style={{ maxHeight: '570.422px', overflowY: 'auto', minHeight: '0px' }}
             >
@@ -186,8 +197,16 @@ const Filters = ({
             <option>More than 10%</option>
             <option>More than 15%2</option>
           </select>
-          <button type="button" className="btn dropdown-toggle btn-light" data-toggle="dropdown"
-            role="combobox" aria-owns="bs-select-2" aria-haspopup="listbox" aria-expanded="false" title="More than 5%"
+          <button
+            type="button"
+            className="btn dropdown-toggle btn-light"
+            data-toggle="dropdown"
+            role="combobox"
+            aria-owns="bs-select-2"
+            aria-haspopup="listbox"
+            aria-expanded="false"
+            title="More than 5%"
+            onClick={() => setSelectFilterOptionsOpen(!selectFilterOptionsOpen)}
           >
             <div className="filter-option">
               <div className="filter-option-inner">
@@ -195,7 +214,8 @@ const Filters = ({
               </div>
             </div>
           </button>
-          <div className="dropdown-menu"
+          <div
+            className={`dropdown-menu ${selectFilterOptionsOpen ? 'd-block' : ''}`}
             style={{ maxHeight: '588.422px', overflow: 'hidden', minHeight: '0px', willChange: 'transform' }}
           >
             <div className="inner show" role="listbox" id="bs-select-2" tabIndex="-1" aria-activedescendant="bs-select-2-0"
@@ -338,7 +358,7 @@ export const Nodes = ({ currentLocale }) => {
                           <tr key={index}>
                             <td scope="row" style={{ position: 'relative' }}>
                               <Link route={`${currentLocale}-node`} params={{ locale, id: item.nodeID }}>
-                                <a className="stretched-link text-white">
+                                <a className="stretched-link">
 
                                   <span id="code">{shortNodeId(item.nodeID)}</span>
                                   <img
diff --git a/components/TableControls/index.js b/components/TableControls/index.js
index a667f3b..115d904 100644
--- a/components/TableControls/index.js
+++ b/components/TableControls/index.js
@@ -1,3 +1,5 @@
+import { useDarkMode } from 'next-dark-mode'
+
 const maxPagesToShow = 5
 
 const TableControls = ({
@@ -7,6 +9,7 @@ const TableControls = ({
   setPerPage,
   pagination = {},
 }) => {
+  const { darkModeActive } = useDarkMode()
 
   const numberOfPages = Math.ceil(pagination.count / perPage) || 0
 
@@ -53,8 +56,8 @@ const TableControls = ({
           </label>
         </div>
       </div>
-      <div className="col-sm-3"></div>
-      <div className="col-sm-6">
+      <div className="col-sm-1"></div>
+      <div className="col-sm-8">
         <div className="dataTables_paginate paging_simple_numbers" id="datatable_paginate">
           <a
             className={`paginate_button previous ${page === 1 ? 'disabled' : ''}`}
@@ -68,8 +71,11 @@ const TableControls = ({
             }}
           >
             <div>
-              <img src="/static/images/prev.svg" className="dark-angle" />
-              <img src="/static/images/left-angle.svg" className="light-angle" style={{ display: 'none' }} />
+              {darkModeActive ? (
+                <img src="/static/images/prev.svg" className="dark-angle" />
+              ) : (
+                <img src="/static/images/left-angle.svg" className="light-angle" />
+              )}
             </div>
           </a>
           <span>
@@ -104,8 +110,11 @@ const TableControls = ({
             }}
           >
             <div>
-              <img src="/static/images/next.svg" className="dark-angle" />
-              <img src="/static/images/right-angle.svg" className="light-angle" style={{ display: 'none' }} />
+              {darkModeActive ? (
+                <img src="/static/images/next.svg" className="dark-angle" />
+              ) : (
+                <img src="/static/images/right-angle.svg" className="light-angle" />
+              )}
             </div>
           </a>
         </div>
diff --git a/lib/api/fixtures/platform.getCurrentSupply.json b/lib/api/fixtures/platform.getCurrentSupply.json
new file mode 100644
index 0000000..ecc83cb
--- /dev/null
+++ b/lib/api/fixtures/platform.getCurrentSupply.json
@@ -0,0 +1,7 @@
+{
+  "jsonrpc": "2.0",
+  "result": {
+    "supply": 10
+  },
+  "id": 1
+}
diff --git a/pages/api/graphql/schemas/nodes.json b/lib/api/fixtures/platform.getCurrentValidators.json
similarity index 100%
rename from pages/api/graphql/schemas/nodes.json
rename to lib/api/fixtures/platform.getCurrentValidators.json
diff --git a/lib/api/fixtures/platform.getHeight.json b/lib/api/fixtures/platform.getHeight.json
new file mode 100644
index 0000000..c5f7034
--- /dev/null
+++ b/lib/api/fixtures/platform.getHeight.json
@@ -0,0 +1,7 @@
+{
+  "jsonrpc": "2.0",
+  "result": {
+    "height": 10
+  },
+  "id": 1
+}
diff --git a/lib/api/fixtures/platform.getTotalStake.json b/lib/api/fixtures/platform.getTotalStake.json
new file mode 100644
index 0000000..0e9c352
--- /dev/null
+++ b/lib/api/fixtures/platform.getTotalStake.json
@@ -0,0 +1,7 @@
+{
+  "jsonrpc": "2.0",
+  "result": {
+    "stake": 10
+  },
+  "id": 1
+}
diff --git a/lib/api/index.js b/lib/api/index.js
new file mode 100644
index 0000000..6ba1be3
--- /dev/null
+++ b/lib/api/index.js
@@ -0,0 +1,151 @@
+import axios from "axios";
+import { setupCache, serializeQuery } from 'axios-cache-adapter'
+
+// Create `axios-cache-adapter` instance
+const cache = setupCache({
+  maxAge: 60 * 60 * 1000,
+  invalidate: async (config, request) => {
+    const method = request.method.toLowerCase()
+
+    if (method !== 'get' && method !== 'post') {
+      await config.store.removeItem(config.uuid)
+    }
+  },
+})
+
+// Create `axios` instance passing the newly created `cache.adapter`
+const api = axios.create({
+  adapter: cache.adapter
+})
+
+export const getAllValidators = async () => {
+  const payload = {
+    "jsonrpc": "2.0",
+    "method": "platform.getCurrentValidators",
+    "params": {
+      "subnetID": "11111111111111111111111111111111LpoYY"
+    },
+    "id": 1
+  }
+
+  let validators
+  if (process.env.NEXT_PUBLIC_USE_MOCK_DATA) {
+    const fixture = require('./fixtures/platform.getCurrentValidators.json')
+    validators = {
+      data: fixture,
+    }
+  } else {
+    validators = await api.post(`https://api.avax.network/ext/P?method=platform.getCurrentValidators`, payload, {
+      cache: {
+        key: "platform.getCurrentValidators"
+      }
+    })
+  }
+
+
+
+  const allItems = validators.data.result.validators
+
+  return allItems
+}
+
+export const getLastBlockHeight = async () => {
+  const payload = {
+    "jsonrpc": "2.0",
+    "method": "platform.getHeight",
+    "params": {},
+    "id": 1
+  }
+
+  let result
+  if (process.env.NEXT_PUBLIC_USE_MOCK_DATA) {
+    const fixture = require('./fixtures/platform.getHeight.json')
+    result = {
+      data: fixture,
+    }
+  } else {
+    result = await api.post(`https://api.avax.network/ext/P?method=platform.getHeight`, payload, {
+      cache: {
+        key: "platform.getHeight"
+      }
+    })
+  }
+
+  const blockHeight = result.data.result.height
+
+  return blockHeight
+}
+
+export const getCurrentSupply = async () => {
+  const payload = {
+    "jsonrpc": "2.0",
+    "method": "platform.getCurrentSupply",
+    "params": {},
+    "id": 1
+  }
+
+  let result
+  if (process.env.NEXT_PUBLIC_USE_MOCK_DATA) {
+    const fixture = require('./fixtures/platform.getCurrentSupply.json')
+    result = {
+      data: fixture,
+    }
+  } else {
+    result = await api.post(`https://api.avax.network/ext/P?method=platform.getCurrentSupply`, payload, {
+      cache: {
+        key: "platform.getCurrentSupply"
+      }
+    })
+  }
+
+  const supply = result.data.result.supply
+
+  return supply
+}
+
+export const getTotalStake = async () => {
+  const payload = {
+    "jsonrpc": "2.0",
+    "method": "platform.getTotalStake",
+    "params": {},
+    "id": 1
+  }
+
+  let result
+  if (process.env.NEXT_PUBLIC_USE_MOCK_DATA) {
+    const fixture = require('./fixtures/platform.getTotalStake.json')
+    result = {
+      data: fixture,
+    }
+  } else {
+    result = await api.post(`https://api.avax.network/ext/P?method=platform.getTotalStake`, payload, {
+      cache: {
+        key: "platform.getTotalStake"
+      }
+    })
+  }
+
+  const stake = result.data.result.stake
+
+  return stake
+}
+
+// const getTransactionsCount = async () => {
+//   const payload = {
+//     "jsonrpc": "2.0",
+//     "method": "platform.getHeight",
+//     "params": {},
+//     "id": 1
+//   }
+
+//   const result = await api.post(`https://api.avax.network/ext/P?method=platform.getHeight`, payload, {
+//     cache: {
+//       key: "platform.getHeight"
+//     }
+//   })
+
+//   console.log('getLastBlockHeight', result)
+//   const blockHeight = result.data.result.height
+
+//   return blockHeight
+// }
diff --git a/pages/404.js b/pages/404.js
index 7e490d2..bc0c6fe 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -1,3 +1,4 @@
+import React from 'react'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 
diff --git a/pages/_app.js b/pages/_app.js
index 831684e..9756277 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -2,6 +2,7 @@ import React from 'react';
 import Routes from '../routes';
 // import App from 'next/app'
 import withDarkMode from 'next-dark-mode'
+import { useDarkMode } from 'next-dark-mode'
 
 import { ApolloProvider } from "@apollo/react-hooks";
 // import ApolloClient from "apollo-boost";
@@ -19,6 +20,12 @@ import 'bootstrap-select/dist/css/bootstrap-select.min.css'
 function App({ Component, pageProps }) {
   const apolloClient = useApollo(pageProps)
 
+  const { darkModeActive } = useDarkMode()
+
+  React.useEffect(() => {
+    document.querySelector("body").classList.toggle('mode-light', !darkModeActive)
+  }, [darkModeActive]);
+
   return (
     <ApolloProvider client={apolloClient}>
       <Component {...pageProps} />
diff --git a/pages/api/graphql/resolvers/index.js b/pages/api/graphql/resolvers/index.js
index 5c6811c..206b4dc 100644
--- a/pages/api/graphql/resolvers/index.js
+++ b/pages/api/graphql/resolvers/index.js
@@ -1,225 +1,11 @@
-import axios from "axios";
-import { setupCache, serializeQuery } from 'axios-cache-adapter'
-
-// Create `axios-cache-adapter` instance
-const cache = setupCache({
-  maxAge: 60 * 60 * 1000,
-  invalidate: async (config, request) => {
-    const method = request.method.toLowerCase()
-
-    if (method !== 'get' && method !== 'post') {
-      await config.store.removeItem(config.uuid)
-    }
-  },
-})
-
-// Create `axios` instance passing the newly created `cache.adapter`
-const api = axios.create({
-  adapter: cache.adapter
-})
-
-const getAllValidators = async () => {
-  const payload = {
-    "jsonrpc": "2.0",
-    "method": "platform.getCurrentValidators",
-    "params": {
-      "subnetID": "11111111111111111111111111111111LpoYY"
-    },
-    "id": 1
-  }
-
-  const validators = await api.post(`https://api.avax.network/ext/P?method=platform.getCurrentValidators`, payload, {
-    cache: {
-      key: "platform.getCurrentValidators"
-    }
-  })
-
-  const allItems = validators.data.result.validators
-
-  return allItems
-}
-
-const getLastBlockHeight = async () => {
-  const payload = {
-    "jsonrpc": "2.0",
-    "method": "platform.getHeight",
-    "params": {},
-    "id": 1
-  }
-
-  const result = await api.post(`https://api.avax.network/ext/P?method=platform.getHeight`, payload, {
-    cache: {
-      key: "platform.getHeight"
-    }
-  })
-
-  const blockHeight = result.data.result.height
-
-  return blockHeight
-}
-
-const getCurrentSupply = async () => {
-  const payload = {
-    "jsonrpc": "2.0",
-    "method": "platform.getCurrentSupply",
-    "params": {},
-    "id": 1
-  }
-
-  const result = await api.post(`https://api.avax.network/ext/P?method=platform.getCurrentSupply`, payload, {
-    cache: {
-      key: "platform.getCurrentSupply"
-    }
-  })
-
-  const supply = result.data.result.supply
-
-  return supply
-}
-
-const getTotalStake = async () => {
-  const payload = {
-    "jsonrpc": "2.0",
-    "method": "platform.getTotalStake",
-    "params": {},
-    "id": 1
-  }
-
-  const result = await api.post(`https://api.avax.network/ext/P?method=platform.getTotalStake`, payload, {
-    cache: {
-      key: "platform.getTotalStake"
-    }
-  })
-
-  const stake = result.data.result.stake
-
-  return stake
-}
-
-// const getTransactionsCount = async () => {
-//   const payload = {
-//     "jsonrpc": "2.0",
-//     "method": "platform.getHeight",
-//     "params": {},
-//     "id": 1
-//   }
-
-//   const result = await api.post(`https://api.avax.network/ext/P?method=platform.getHeight`, payload, {
-//     cache: {
-//       key: "platform.getHeight"
-//     }
-//   })
-
-//   console.log('getLastBlockHeight', result)
-//   const blockHeight = result.data.result.height
-
-//   return blockHeight
-// }
+import node from "./node";
+import nodes from "./nodes";
+import stats from "./stats";
 
 export const resolvers = {
   Query: {
-    stats: async (parent, args, context, info) => {
-      const validators = await getAllValidators()
-      const totalDelegations = validators
-        .map(item => (item.delegators || []).length)
-        .reduce((result, current) => result + current, 0)
-      const totalBlocks = await getLastBlockHeight()
-      const currentSupply = await getCurrentSupply()
-      const totalStake = await getTotalStake()
-      const totalParticipation = ((totalStake / 1000000000) / (currentSupply / 1000000000)) * 100
-
-      return {
-        totalNodes: validators.length,
-        totalTransactions: 0,
-        totalProviders: 0,
-        totalDelegations,
-        totalBlocks,
-        totalParticipation,
-      }
-    },
-    nodes: async (parent, args, context, info) => {
-      try {
-        const validators = await getAllValidators()
-
-        let currentValidators = validators
-        if (args.filter.filter) {
-          currentValidators = validators.filter(item => item.nodeID.includes(args.filter.filter))
-        }
-
-        const page = Math.abs(args.filter.page) || 1
-        const perPage = Math.min(Math.max(Math.abs(args.filter.perPage), 1), 100)
-        const count = currentValidators.length
-
-        return {
-          items: currentValidators.slice((page - 1) * perPage, page * perPage).map((item, index) => {
-            let isPartner = false
-            let isSponsored = false
-            if (index === 0) {
-              isPartner = true
-              isSponsored = true
-
-            }
-            if (index === 1) {
-              isPartner = true
-            }
-            const delegators = item.delegators || []
-            return {
-              ...item,
-              isPartner,
-              isSponsored,
-              delegators: {
-                items: delegators.slice((page - 1) * perPage, page * perPage),
-                pagination: {
-                  page,
-                  perPage,
-                  count: delegators.length
-                },
-                totalStaked: delegators
-                  .map(delegator => delegator.stakeAmount / 1000000000)
-                  .reduce((result, current) => result + current, 0)
-              }
-            }
-          }),
-          pagination: {
-            page,
-            perPage,
-            count,
-          },
-        }
-      } catch (error) {
-        throw error;
-      }
-    },
-    node: async (parent, args, context, info) => {
-      try {
-        const validators = await getAllValidators()
-
-        const node = validators
-          .find(item => item.nodeID === args.filter.nodeID)
-
-        const delegators = node.delegators || []
-
-        const page = Math.abs(args.filter.page) || 1
-        const perPage = Math.min(Math.max(Math.abs(args.filter.perPage), 1), 100)
-        const count = delegators.length
-
-        return {
-          ...node,
-          delegators: {
-            items: delegators.slice((page - 1) * perPage, page * perPage),
-            pagination: {
-              page,
-              perPage,
-              count,
-            },
-            totalStaked: delegators
-              .map(delegator => delegator.stakeAmount / 1000000000)
-              .reduce((result, current) => result + current, 0)
-          }
-        };
-      } catch (error) {
-        throw error;
-      }
-    }
+    stats: stats,
+    nodes: nodes,
+    node: node
   }
 };
diff --git a/pages/api/graphql/resolvers/node.js b/pages/api/graphql/resolvers/node.js
new file mode 100644
index 0000000..6ced6b1
--- /dev/null
+++ b/pages/api/graphql/resolvers/node.js
@@ -0,0 +1,33 @@
+import { getAllValidators } from "../../../../lib/api"
+
+export default async (parent, args, context, info) => {
+  try {
+    const validators = await getAllValidators()
+
+    const node = validators
+      .find(item => item.nodeID === args.filter.nodeID)
+
+    const delegators = node.delegators || []
+
+    const page = Math.abs(args.filter.page) || 1
+    const perPage = Math.min(Math.max(Math.abs(args.filter.perPage), 1), 100)
+    const count = delegators.length
+
+    return {
+      ...node,
+      delegators: {
+        items: delegators.slice((page - 1) * perPage, page * perPage),
+        pagination: {
+          page,
+          perPage,
+          count,
+        },
+        totalStaked: delegators
+          .map(delegator => delegator.stakeAmount / 1000000000)
+          .reduce((result, current) => result + current, 0)
+      }
+    };
+  } catch (error) {
+    throw error;
+  }
+}
diff --git a/pages/api/graphql/resolvers/nodes.js b/pages/api/graphql/resolvers/nodes.js
new file mode 100644
index 0000000..b2de0cd
--- /dev/null
+++ b/pages/api/graphql/resolvers/nodes.js
@@ -0,0 +1,56 @@
+import { getAllValidators } from "../../../../lib/api"
+
+export default async (parent, args, context, info) => {
+  try {
+    const validators = await getAllValidators()
+
+    let currentValidators = validators
+    if (args.filter.filter) {
+      currentValidators = validators.filter(item => item.nodeID.includes(args.filter.filter))
+    }
+
+    const page = Math.abs(args.filter.page) || 1
+    const perPage = Math.min(Math.max(Math.abs(args.filter.perPage), 1), 100)
+    const count = currentValidators.length
+
+    return {
+      items: currentValidators.slice((page - 1) * perPage, page * perPage).map((item, index) => {
+        let isPartner = false
+        let isSponsored = false
+        if (index === 0) {
+          isPartner = true
+          isSponsored = true
+
+        }
+        if (index === 1) {
+          isPartner = true
+        }
+        const delegators = item.delegators || []
+        return {
+          ...item,
+          isPartner,
+          isSponsored,
+          delegators: {
+            items: delegators.slice((page - 1) * perPage, page * perPage),
+            pagination: {
+              page,
+              perPage,
+              count: delegators.length
+            },
+            totalStaked: delegators
+              .map(delegator => delegator.stakeAmount / 1000000000)
+              .reduce((result, current) => result + current, 0)
+          }
+        }
+      }),
+      pagination: {
+        page,
+        perPage,
+        count,
+      },
+    }
+  } catch (error) {
+    console.log('!!!!!!!!!!!', error)
+    throw error;
+  }
+}
diff --git a/pages/api/graphql/resolvers/stats.js b/pages/api/graphql/resolvers/stats.js
new file mode 100644
index 0000000..60d562f
--- /dev/null
+++ b/pages/api/graphql/resolvers/stats.js
@@ -0,0 +1,31 @@
+import {
+  getAllValidators,
+  getCurrentSupply,
+  getLastBlockHeight,
+  getTotalStake,
+} from "../../../../lib/api"
+
+export default async (parent, args, context, info) => {
+  try {
+    const validators = await getAllValidators()
+    const totalDelegations = validators
+      .map(item => (item.delegators || []).length)
+      .reduce((result, current) => result + current, 0)
+    const totalBlocks = await getLastBlockHeight()
+    const currentSupply = await getCurrentSupply()
+    const totalStake = await getTotalStake()
+    const totalParticipation = ((totalStake / 1000000000) / (currentSupply / 1000000000)) * 100
+
+    return {
+      totalNodes: validators.length,
+      totalTransactions: 0,
+      totalProviders: 0,
+      totalDelegations,
+      totalBlocks,
+      totalParticipation,
+    }
+  } catch (error) {
+    console.log('!!!!!!!!!!!', error)
+    throw error;
+  }
+}
diff --git a/pages/home.js b/pages/home.js
index 710690b..cb88cc9 100644
--- a/pages/home.js
+++ b/pages/home.js
@@ -1,6 +1,8 @@
+// import React from 'react'
 import Head from 'next/head'
 
 import { useRouter } from 'next/router'
+// import { useDarkMode } from 'next-dark-mode'
 
 import Nodes, { GET_NODES } from '../components/Nodes';
 import Layout from '../components/Layout';
@@ -17,8 +19,14 @@ export default function Home(props) {
 
   console.log('Home', router, currentRoute, currentLocale)
 
+  // const { darkModeActive } = useDarkMode()
+
+  // React.useEffect(() => {
+  //   document.querySelector("body").classList.toggle('mode-dark', darkModeActive)
+  // }, [darkModeActive]);
+
   return (
-    <div className={styles.container}>
+    <>
       <Head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
@@ -29,7 +37,7 @@ export default function Home(props) {
       <Layout {...props} currentLocale={currentLocale} currentRoute={currentRoute} router={router}>
         <Nodes currentLocale={currentLocale} currentRoute={currentRoute} />
       </Layout>
-    </div>
+    </>
   )
 }
 
@@ -39,15 +47,21 @@ export const getServerSideProps = async (ctx) => {
 
   const apolloClient = initializeApollo()
 
-  await apolloClient.query({
-    query: GET_NODES,
-    variables: {
-      filter: {
-        page: 1,
-        perPage: 10,
-      }
-    },
-  })
+  try {
+    await apolloClient.query({
+      query: GET_NODES,
+      variables: {
+        filter: {
+          filter: '',
+          page: 1,
+          perPage: 10,
+        }
+      },
+    })
+  } catch (e) {
+    console.log(e.networkError)
+  }
+
 
   return addApolloState(apolloClient, {
     props: {
diff --git a/pages/node.js b/pages/node.js
index 2005307..f7c2f60 100644
--- a/pages/node.js
+++ b/pages/node.js
@@ -16,7 +16,7 @@ export default function NodePage(props) {
   const currentRoute = `${((router || {}).route || 'home').replace('/', '')}`
 
   return (
-    <div className={styles.container}>
+    <>
       <Head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
@@ -27,7 +27,7 @@ export default function NodePage(props) {
       <Layout {...props} currentLocale={currentLocale} currentRoute={currentRoute}>
         <Node router={router} currentLocale={currentLocale} currentRoute={currentRoute} />
       </Layout>
-    </div>
+    </>
   )
 }
 
diff --git a/styles/main.css b/styles/main.css
index 5305a5e..1bef53e 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -1,5 +1,5 @@
 body {
-  padding-top: 56px;
+  /* padding-top: 56px; */
   background-color: #13131A;
   font-family: 'Roboto', sans-serif;
   font-weight: 400;
@@ -69,7 +69,7 @@ body {
 .navbar-nav .nav-item.active:after {
   content: "";
   position: absolute;
-  top: 42px;
+  top: 44px;
   height: 2px;
   background-color: #fff;
   width: 100%;
@@ -77,7 +77,10 @@ body {
 }
 .bg-dark {
   background-color: #292932 !important;
-  padding: 9px 0px;
+  padding: 14px 0px;
+}
+.bg-light {
+  padding: 14px 0px;
 }
 .flag{
   background-size: cover !important;
@@ -133,7 +136,7 @@ span#countries_title {
 .content-wrapper {
   background-color: #32C5FF;
   padding: 25px 0% 34px !important;
-  margin-top: 10px;
+  margin-top: 66px;
 }
 
 .main-content {
@@ -241,10 +244,14 @@ table.dataTable thead th{
   border-bottom: 8px solid #13131a;
   font-size: 13px;
   letter-spacing: -0.06px;
-  padding-top: 21px;
-  padding-bottom: 18px;
+  padding: 9px 10px;
   font-weight: 500;
   border-top: 0px;
+  height: 58px;
+}
+#datatable_wrapper table.dataTable tbody td a {
+  text-decoration: none;
+  color: #fff;
 }
 .table-tab-wrapper {
   position: absolute;
@@ -445,7 +452,7 @@ dropdown.language {
 .contact-wrapper{
  background-color: #32C5FF;
  padding: 53px 0% 50px !important;
- margin-top: 10px;
+ margin-top: 55px;
 }
 .TitleNodeID .fa-circle:before {
   position: absolute;
@@ -562,7 +569,8 @@ dropdown.language {
   text-align: right;
 }
 .progress-bar-wrap .progress {
-  background-color: #111116;
+  /* background-color: #111116; */
+  background-color: #E4EBF1;
   border-radius: 2px;
   width: 100%;
   height: 5px;
@@ -665,11 +673,11 @@ dropdown.language {
 .contact-table #datatable_wrapper table.dataTable tbody td {
   background: #1C1C24;
   border-bottom: 10px solid #13131a;
-  padding-top: 21px;
+  /* padding-top: 21px; */
   font-size: 16px;
   letter-spacing: -0.07px;
   line-height: 19px;
-  padding-bottom: 18px;
+  /* padding-bottom: 18px; */
   border-top: 0px;
 }
 table.dataTable tbody tr {
@@ -1367,7 +1375,7 @@ table.dataTable.transactions tbody tr td:first-child {
   color: #484848 !important;
 }
 .node-details-wrapper .dataTables_paginate.paging_simple_numbers {
-  width: 100%;
+  /* width: 100%; */
   float: left !important;
 }
 .box-wrapper .content-inner .right .card-wrapper {
@@ -1481,8 +1489,8 @@ table.dataTable.transactions tbody tr td:first-child {
     left: auto !important;
   }
   .content-wrapper {
-   margin-top: 0;
- }
+    /* margin-top: 0; */
+  }
 
 }
 
@@ -1557,7 +1565,7 @@ table.dataTable.transactions tbody tr td:first-child {
   margin-right: 6px;
 }
 .form-control{
-  background-color: #20202A !important;
+  background-color: #20202A;
   border-radius: 4px;
   box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.06);
   border: none;
@@ -1652,7 +1660,7 @@ table.dataTable.transactions tbody tr td:first-child {
 }
 @media (min-width: 768px) and (max-width: 1024px) {
   .bg-dark {
-    padding: 13px 0px;
+    padding: 14px 0px;
   }
   .navbar-nav .nav-item.active:after {
     background-color: transparent;
@@ -2043,6 +2051,17 @@ table.dataTable.transactions tbody tr td:first-child {
 .bootstrap-select .dropdown-toggle .filter-option {
   height: auto !important;
 }
+.dropdown .dropdown-menu {
+  max-width: 100%;
+  min-width: 100%;
+  color: #000;
+}
+.dropdown .dropdown-toggle {
+  color: #ffffff;
+  border-radius: 3px;
+  box-shadow: 0 4px 4px 0 rgb(0 0 0 / 3%);
+  border: none;
+}
 .dropdown-menu .dropdown-item,
 .dropdown-menu .dropdown-item a {
   color: #000;
@@ -2052,4 +2071,159 @@ table.dataTable.transactions tbody tr td:first-child {
   outline: none;
   color: #000;
   background-color: #f2f2f2;
-}
\ No newline at end of file
+}
+
+body.mode-light {
+  background-color: white;
+}
+.mode-light .navbar-nav .nav-item.active:after {
+  background-color: #FF6832;
+}
+
+.mode-light #toggel_btn label {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.mode-light #toggel_btn label img.night-light {
+  background-color: transparent;
+}
+.mode-light #toggel_btn label img.day {
+  opacity: 1;
+}
+.mode-light .footer {
+  background-color: #32C5FF;
+}
+.mode-light .footer .copyright {
+  color: #FFFFFF;
+}
+.mode-light .footer .join-us {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: #FFFFFF;
+}
+.mode-light .main-content {
+  background-color: #F5F6FB;
+}
+.mode-light .PageTitleFont {
+  color: #20202A;
+}
+.mode-light .form-control {
+  background-color: white;
+  color: #81818C;
+}
+.mode-light .dropdown .dropdown-toggle {
+  color: #292932;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.mode-light table.dataTable thead th {
+  border-bottom: none;
+}
+.mode-light #datatable_wrapper table.dataTable tbody td {
+  background: white;
+  border-top: 6px solid #f5f6fb;
+  border-bottom: none;
+}
+.mode-light #datatable_wrapper table.dataTable tbody td a {
+  color: #292932;
+}
+.mode-light #datatable_wrapper table.dataTable tbody td img.pdf-image {
+  background-color: rgba(0, 0, 0, 0.06);
+}
+.mode-light table.dataTable tbody tr {
+  background-color: transparent !important;
+}
+
+.mode-light div.dataTables_wrapper div.dataTables_length select {
+  background-color: #FFFFFF;
+  color: #81818C;
+  background-image: url('/static/images/light-dropdown.svg');
+  border: none;
+  outline: none;
+}
+.mode-light table.dataTable tbody tr td:first-child {
+  color: #20202A !important;
+}
+
+.mode-light .bootstrap-select .dropdown-toggle {
+  background-color: #fff!important;
+  color: #81818C!important;
+  background-image: url('/static/images/dropdown1.svg');
+}
+.mode-light .bootstrap-select .dropdown-menu {
+  background-color: #FFFFFF!important;
+}
+.mode-light .bootstrap-select .dropdown-item {
+  background-color: #FFFFFF!important;
+  color: #81818C!important;
+}
+.mode-light .bootstrap-select .dropdown-item.active {
+  background-color: #f2f2f2!important;
+  color: #000!important;
+}
+.mode-light .bootstrap-select .dropdown-item:hover {
+  background-color: #f2f2f2!important;
+  color: #000!important;
+}
+
+.mode-light .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
+.mode-light .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
+.mode-light .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
+  color: #666 !important;
+  border: 1px solid transparent;
+  background: transparent;
+}
+.mode-light .dataTables_wrapper .dataTables_paginate a.paginate_button {
+  border: 1px solid #E7E7E7 !important;
+}
+
+.mode-light .dataTables_wrapper .dataTables_paginate a.paginate_button {
+  border: 1px solid #E7E7E7 !important;
+}
+.mode-light .dataTables_wrapper .dataTables_paginate .paginate_button {
+  color: #333 !important;
+  border: 1px solid transparent;
+}
+.mode-light .dataTables_wrapper .dataTables_paginate .paginate_button {
+  border: 1px solid rgba(255, 255, 255, 0.15) !important;
+  background: transparent;
+  border: 1px solid #E7E7E7;
+  opacity: 0.87;
+}
+
+.mode-light .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
+  color: white !important;
+  border: 1px solid #111;
+}
+.mode-light .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
+  background-color: #E0E0E0 !important;
+}
+.mode-light .Title {
+  color: #20202A;
+}
+.mode-light .content-inner img.pdf-image {
+  background-color: rgba(0, 0, 0, 0.06);
+}
+.mode-light .PagesubTitle {
+  color: #81818C;
+}
+.mode-light .main-progress-wrapper .progress-title {
+  color: #20202A;
+}
+.mode-light .main-progress-wrapper .right-side .progress-bar-wrap .progress,
+.mode-light .main-progress-wrapper .left-side .progress-bar-wrap .progress {
+  background-color: #EDEDED;
+}
+.mode-light .box-wrapper {
+  background-color: #F5F6FB;
+}
+.mode-light .card-wrapper {
+  background-color: #FFFFFF;
+}
+.mode-light .card-content {
+  background-color: #F5F9FA;
+}
+.mode-light .card-wrapper span {
+  color: #919191;
+}
+.mode-light .card-wrapper p.subtext {
+  color: #20202A;
+}