From 1346d8d4c5c351e706ac63910cb01146a413e187 Mon Sep 17 00:00:00 2001
From: Dmytro Savchenko <login.was.here@gmail.com>
Date: Sat, 13 Feb 2021 19:59:53 +0200
Subject: [PATCH] Add light theme, start adding translations

---
 Dockerfile                        |   2 +-
 components/Footer/index.js        |   5 +-
 components/Header/index.js        |   7 +-
 components/Node/index.js          |   5 +-
 components/Nodes/index.js         |  46 +++++++-----
 components/TableControls/index.js |  18 ++---
 i18n.js                           |  32 ++++++--
 i18nLocales/en.js                 |  35 +++++++++
 i18nLocales/index.js              |  13 ++++
 i18nLocales/ja.js                 |  35 +++++++++
 i18nLocales/ko.js                 |  35 +++++++++
 i18nLocales/nl.js                 |  35 +++++++++
 i18nLocales/zh.js                 |  35 +++++++++
 next.config.js                    |   7 ++
 package.json                      |   2 +
 pages/_app.js                     |  32 ++++++--
 pages/home.js                     |  29 +++++---
 styles/main.css                   |   1 +
 yarn.lock                         | 119 +++++++++++++++++++++++++++++-
 19 files changed, 428 insertions(+), 65 deletions(-)
 create mode 100644 i18nLocales/en.js
 create mode 100644 i18nLocales/index.js
 create mode 100644 i18nLocales/ja.js
 create mode 100644 i18nLocales/ko.js
 create mode 100644 i18nLocales/nl.js
 create mode 100644 i18nLocales/zh.js

diff --git a/Dockerfile b/Dockerfile
index ecc6730..77d3d4f 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:12.18.3-alpine3.12
+FROM node:14.15.4-alpine3.12
 
 COPY . /app
 WORKDIR /app
diff --git a/components/Footer/index.js b/components/Footer/index.js
index 5ef3e73..0ecc7fa 100644
--- a/components/Footer/index.js
+++ b/components/Footer/index.js
@@ -1,9 +1,12 @@
 import React from 'react'
+import { useIntl } from "react-intl"
 
 import { defaultLocale, locales } from '../../locales';
 import { Link } from '../../routes'
 
 export const Footer = ({ children }) => {
+  const { formatMessage } = useIntl()
+  const f = id => formatMessage({ id })
   return (
     <div className="footer">
       <div className="container">
@@ -14,7 +17,7 @@ export const Footer = ({ children }) => {
             </div>
           </div>
           <div className="right">
-            <button type="button" className="btn btn-secondary join-us">Join us on Telegram</button>
+            <button type="button" className="btn btn-secondary join-us">{f('footer.join.us.telegram')}</button>
             <ul className="social-icon">
               <li><a href="#"><img src="/static/images/instagram.png" alt="" className="footer-dark" />
                 <img src="/static/images/light-instagram.png" alt="" className="footer-light" style={{ display: 'none' }} /></a></li>
diff --git a/components/Header/index.js b/components/Header/index.js
index 766c011..06fe6e4 100644
--- a/components/Header/index.js
+++ b/components/Header/index.js
@@ -2,11 +2,14 @@ import React from 'react'
 import { NavDropdown, Navbar } from 'react-bootstrap'
 import { useRouter } from 'next/router'
 import { useDarkMode } from 'next-dark-mode'
+import { useIntl } from "react-intl"
 
 import { defaultLocale, locales } from '../../locales';
 import { Link } from '../../routes'
 
 export const Header = ({ children, currentLocale, currentRoute, route }) => {
+  const { formatMessage } = useIntl()
+  const f = id => formatMessage({ id })
   const router = useRouter()
   const { darkModeActive, switchToDarkMode, switchToLightMode } = useDarkMode()
 
@@ -33,7 +36,7 @@ export const Header = ({ children, currentLocale, currentRoute, route }) => {
             <li className={`nav-item ${currentRoute === 'home' ? 'active' : ''}`}>
               <Link route={`${currentLocale}-home`} params={{ locale }}>
                 <a className="nav-link">
-                  Nodes
+                  {f('header.pages.nodes.title')}
                   <span className="sr-only">(current)</span>
                 </a>
               </Link>
@@ -41,7 +44,7 @@ export const Header = ({ children, currentLocale, currentRoute, route }) => {
             <li className={`nav-item ${currentRoute === 'notifier' ? 'active' : ''}`}>
               <Link route={`${currentLocale}-notifier`} params={{ locale }}>
                 <a className="nav-link">
-                  Notifier
+                  {f('header.pages.notifier.title')}
                 </a>
               </Link>
             </li>
diff --git a/components/Node/index.js b/components/Node/index.js
index 726a495..c90ab5c 100644
--- a/components/Node/index.js
+++ b/components/Node/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 { useIntl } from "react-intl"
 
 import dynamic from "next/dynamic";
 
@@ -57,8 +58,6 @@ export const Node = ({
   const [page, setPage] = React.useState(1);
   const [perPage, setPerPage] = React.useState(10);
 
-  console.log({ router })
-
   const filter = {
     nodeID: router.query.id,
     page,
@@ -70,8 +69,6 @@ export const Node = ({
     },
   });
 
-  console.log(data)
-
   const position = [51.505, -0.09]
 
   const MapWithNoSSR = dynamic(() => import("../Map"), {
diff --git a/components/Nodes/index.js b/components/Nodes/index.js
index 7a4286c..b9c2938 100644
--- a/components/Nodes/index.js
+++ b/components/Nodes/index.js
@@ -3,6 +3,7 @@ import { gql, useQuery } from '@apollo/client';
 import { FaCircle } from "react-icons/fa";
 import moment from 'moment'
 import { useDarkMode } from 'next-dark-mode'
+import { useIntl } from "react-intl"
 
 import shortNodeId from '../../utils/shortNodeId';
 import numberFormat from '../../utils/numberFormat';
@@ -49,12 +50,14 @@ export const GET_NODES = gql`
 `;
 
 const Stats = ({ data = {} }) => {
+  const { formatMessage } = useIntl()
+  const f = id => formatMessage({ id })
   return (
     <div className="col-md-9 col-sm-9 rectangleSmall">
       <div className="row total-node-wrapper">
         <div className="col-6 col-md-3 col-sm-3">
           <div className="TitleText">
-            TOTAL NODES
+            {f('stats.total.nodes.title')}
           </div>
           <div className="FigurText">
             {numberFormat(data.totalNodes || 0, 0)}
@@ -62,7 +65,7 @@ const Stats = ({ data = {} }) => {
         </div>
         <div className="col-6 col-md-3 col-sm-3">
           <div className="TitleText">
-            TOTAL PROVIDERS
+            {f('stats.total.providers.title')}
           </div>
           <div className="FigurText">
             {numberFormat(data.totalProviders || 0, 0)}
@@ -70,7 +73,7 @@ const Stats = ({ data = {} }) => {
         </div>
         <div className="col-6 col-md-3 col-sm-3">
           <div className="TitleText">
-            TOTAL DELIGATIONS
+            {f('stats.total.delegations.title')}
           </div>
           <div className="FigurText">
             {numberFormat(data.totalDelegations || 0, 0)}
@@ -78,7 +81,7 @@ const Stats = ({ data = {} }) => {
         </div>
         <div className="col-6 col-md-3 col-sm-3">
           <div className="TitleText">
-            TOTAL BLOCKS
+            {f('stats.total.blocks.title')}
           </div>
           <div className="FigurText">
             {numberFormat(data.totalBlocks || 0, 0)}
@@ -88,7 +91,7 @@ const Stats = ({ data = {} }) => {
       <div className="row">
         <div className="col-6 col-md-3 col-sm-3">
           <div className="TitleText">
-            TOTAL TRANSACTIONS
+            {f('stats.total.transactions.title')}
           </div>
           <div className="FigurText">
             {numberFormat(data.totalTransactions || 0, 0)}
@@ -96,7 +99,7 @@ const Stats = ({ data = {} }) => {
         </div>
         <div className="col-6 col-md-3 col-sm-3">
           <div className="TitleText">
-            TOTAL PARTICIPATION
+            {f('stats.total.participation.title')}
           </div>
           <div className="FigurText">
             {numberFormat(data.totalParticipation || 0, 1)}
@@ -115,6 +118,8 @@ const Filters = ({
   const [selectFilterOpen, setSelectFilterOpen] = React.useState(false);
   const [selectFilterOptionsOpen, setSelectFilterOptionsOpen] = React.useState(false);
   const { darkModeActive } = useDarkMode()
+  const { formatMessage } = useIntl()
+  const f = id => formatMessage({ id })
   return (
     <div className="filter-wrapper">
       <div className="search-container">
@@ -123,7 +128,7 @@ const Filters = ({
             id="text1"
             type="text"
             className="form-control search-field"
-            placeholder="Search Address / TX / Asset / Blockchain / Subnet"
+            placeholder={f('filter.search.placeolder')}
             value={filter}
             onChange={(event) => {
               setFilter(event.target.value)
@@ -261,10 +266,11 @@ export const Nodes = ({ currentLocale }) => {
     },
   });
 
-  console.log(data)
-
   const locale = currentLocale === defaultLocale ? undefined : currentLocale
 
+  const { formatMessage } = useIntl()
+  const f = id => formatMessage({ id })
+
   // if (loading) return 'Loading...';
   // if (error) return `Error! ${error.message}`;
 
@@ -283,7 +289,7 @@ export const Nodes = ({ currentLocale }) => {
                 <span style={{ color: '#fff' }}> / </span>
                 <Link route={`${currentLocale}-home`} params={{ locale }}>
                   <a className="nodes">
-                    Nodes
+                    {f('page.nodes.header')}
                   </a>
                 </Link>
               </div>
@@ -304,7 +310,7 @@ export const Nodes = ({ currentLocale }) => {
           <div className="container">
             <div className="">
               <div className="PageTitleFont">
-                Nodes
+                {f('page.nodes.header')}
               </div>
             </div>
           </div>
@@ -325,15 +331,15 @@ export const Nodes = ({ currentLocale }) => {
                   <table id="datatable" className="display responsive nowrap dataTable table-hover" style={{ width: '100%' }}>
                     <thead>
                       <tr>
-                        <th>Node ID</th>
-                        <th>Delegators</th>
-                        <th>Total stake</th>
-                        <th className="free-space">Free space</th>
-                        <th>Started on</th>
-                        <th>Time left</th>
-                        <th>Fee</th>
-                        <th>Max yield</th>
-                        <th>Country</th>
+                        <th>{f('page.nodes.table.header.nodeid.title')}</th>
+                        <th>{f('page.nodes.table.header.delegators.title')}</th>
+                        <th>{f('page.nodes.table.header.totalstake.title')}</th>
+                        <th className="free-space">{f('page.nodes.table.header.freespace.title')}</th>
+                        <th>{f('page.nodes.table.header.startedon.title')}</th>
+                        <th>{f('page.nodes.table.header.timeleft.title')}</th>
+                        <th>{f('page.nodes.table.header.fee.title')}</th>
+                        <th>{f('page.nodes.table.header.maxyield.title')}</th>
+                        <th>{f('page.nodes.table.header.country.title')}</th>
                         <th></th>
                       </tr>
                     </thead>
diff --git a/components/TableControls/index.js b/components/TableControls/index.js
index 115d904..496b1ea 100644
--- a/components/TableControls/index.js
+++ b/components/TableControls/index.js
@@ -1,4 +1,5 @@
 import { useDarkMode } from 'next-dark-mode'
+import { useIntl } from "react-intl"
 
 const maxPagesToShow = 5
 
@@ -10,6 +11,8 @@ const TableControls = ({
   pagination = {},
 }) => {
   const { darkModeActive } = useDarkMode()
+  const { formatMessage } = useIntl()
+  const f = id => formatMessage({ id })
 
   const numberOfPages = Math.ceil(pagination.count / perPage) || 0
 
@@ -22,21 +25,12 @@ const TableControls = ({
   }
   const endPage = Math.min(startPage + maxPagesToShow, numberOfPages)
 
-  console.log({
-    page,
-    startPage,
-    endPage,
-    pagination,
-    perPage,
-    numberOfPages,
-  })
-
   return (
     <div className="row">
       <div className="col-sm-3">
         <div className="dataTables_length bs-select" id="datatable_length">
           <label>
-            Show
+            {f('pagination.show')}
             {' '}
             <select
               name="datatable_length"
@@ -52,7 +46,7 @@ const TableControls = ({
               <option value="-1">All</option>
             </select>
             {' '}
-            entries
+            {f('pagination.entries')}
           </label>
         </div>
       </div>
@@ -119,7 +113,7 @@ const TableControls = ({
           </a>
         </div>
         <div id="jump-to-page">
-          <span>Jump to page:</span>
+          <span>{f('pagination.jump.to.page')}:</span>
           <div className="dataTables_length bs-select">
             <select
               disabled={numberOfPages < 40}
diff --git a/i18n.js b/i18n.js
index a599a81..57403d6 100644
--- a/i18n.js
+++ b/i18n.js
@@ -1,9 +1,25 @@
-const NextI18Next = require('next-i18next').default
-const { localeSubpaths } = require('next/config').default().publicRuntimeConfig
-const path = require('path')
+const { locales, defaultLocale } = require("./locales");
 
-module.exports = new NextI18Next({
-  otherLanguages: ['en'],
-  localeSubpaths,
-  localePath: path.resolve('./public/static/locales')
-})
+module.exports = {
+  locales: locales,
+  defaultLocale: defaultLocale,
+  // pages: {
+  //   "*": ["common"],
+  //   "/home": ["home"],
+  //   "/node": ["node"]
+  // },
+  // loader: false,
+  // loadLocaleFrom: (locale, namespace) =>
+  //   import(`./locales/${locale}/${namespace}`).then((m) => m.default),
+}
+
+// const NextI18Next = require('next-i18next').default
+// // const { localeSubpaths } = require('next/config').default().publicRuntimeConfig
+// const path = require('path')
+
+// module.exports = new NextI18Next({
+//   otherLanguages: locales,
+//   defaultLanguage: defaultLocale,
+//   // localeSubpaths,
+//   localePath: path.resolve('./public/static/locales')
+// })
\ No newline at end of file
diff --git a/i18nLocales/en.js b/i18nLocales/en.js
new file mode 100644
index 0000000..d7f0963
--- /dev/null
+++ b/i18nLocales/en.js
@@ -0,0 +1,35 @@
+module.exports = {
+
+  "header.pages.nodes.title": "Nodes",
+  "header.pages.notifier.title": "Notifier",
+
+  "stats.total.nodes.title": "Total nodes",
+  "stats.total.providers.title": "Total providers",
+  "stats.total.delegations.title": "Total delegations",
+  "stats.total.blocks.title": "Total blocks",
+  "stats.total.transactions.title": "Total transactions",
+  "stats.total.participation.title": "Total participation",
+
+  "page.nodes.title": "Nodes",
+  "page.nodes.header": "Nodes",
+
+  "page.nodes.table.header.nodeid.title": "Node id",
+  "page.nodes.table.header.delegators.title": "Delegators",
+  "page.nodes.table.header.totalstake.title": "Total stake",
+  "page.nodes.table.header.freespace.title": "Free space",
+  "page.nodes.table.header.startedon.title": "Started on",
+  "page.nodes.table.header.timeleft.title": "Time left",
+  "page.nodes.table.header.fee.title": "Fee",
+  "page.nodes.table.header.maxyield.title": "Max yield",
+  "page.nodes.table.header.country.title": "Country",
+
+  "pagination.show": "Show",
+  "pagination.entries": "entries",
+  "pagination.jump.to.page": "Jump to page",
+
+  "filter.search.placeolder": "Search Address / TX / Asset / Blockchain / Subnet",
+
+  "space.available": "Available space",
+
+  "footer.join.us.telegram": "Join us on Telegram"
+}
diff --git a/i18nLocales/index.js b/i18nLocales/index.js
new file mode 100644
index 0000000..0a22a7d
--- /dev/null
+++ b/i18nLocales/index.js
@@ -0,0 +1,13 @@
+import en from './en'
+import nl from './nl'
+import ja from './ja'
+import ko from './ko'
+import zh from './zh'
+
+export default {
+  en: en,
+  nl: nl,
+  ja: ja,
+  ko: ko,
+  zh: zh,
+}
\ No newline at end of file
diff --git a/i18nLocales/ja.js b/i18nLocales/ja.js
new file mode 100644
index 0000000..fdd2c17
--- /dev/null
+++ b/i18nLocales/ja.js
@@ -0,0 +1,35 @@
+module.exports = {
+
+  "header.pages.nodes.title": "ノード",
+  "header.pages.notifier.title": "通知機能",
+
+  "stats.total.nodes.title": "合計ノード",
+  "stats.total.providers.title": "トータルプロバイダー",
+  "stats.total.delegations.title": "総代表団",
+  "stats.total.blocks.title": "総ブロック数",
+  "stats.total.transactions.title": "総取引数",
+  "stats.total.participation.title": "総参加",
+
+  "page.nodes.title": "ノード",
+  "page.nodes.header": "ノード",
+
+  "page.nodes.table.header.nodeid.title": "ノードID",
+  "page.nodes.table.header.delegators.title": "委任者",
+  "page.nodes.table.header.totalstake.title": "総賭け金",
+  "page.nodes.table.header.freespace.title": "フリースペース",
+  "page.nodes.table.header.startedon.title": "開始",
+  "page.nodes.table.header.timeleft.title": "残り時間",
+  "page.nodes.table.header.fee.title": "費用",
+  "page.nodes.table.header.maxyield.title": "最大収量",
+  "page.nodes.table.header.country.title": "国",
+
+  "pagination.show": "公演",
+  "pagination.entries": "エントリ",
+  "pagination.jump.to.page": "ページにジャンプ",
+
+  "filter.search.placeolder": "検索アドレス/ TX /アセット/ブロックチェーン/サブネット",
+
+  "space.available": "利用可能なスペース",
+
+  "footer.join.us.telegram": "Telegramにご参加ください"
+}
diff --git a/i18nLocales/ko.js b/i18nLocales/ko.js
new file mode 100644
index 0000000..467c57a
--- /dev/null
+++ b/i18nLocales/ko.js
@@ -0,0 +1,35 @@
+module.exports = {
+
+  "header.pages.nodes.title": "노드",
+  "header.pages.notifier.title": "알리미",
+
+  "stats.total.nodes.title": "총 노드",
+  "stats.total.providers.title": "총 제공자",
+  "stats.total.delegations.title": "총 대표단",
+  "stats.total.blocks.title": "총 블록",
+  "stats.total.transactions.title": "총 거래",
+  "stats.total.participation.title": "총 참여",
+
+  "page.nodes.title": "노드",
+  "page.nodes.header": "노드",
+
+  "page.nodes.table.header.nodeid.title": "노드 ID",
+  "page.nodes.table.header.delegators.title": "위임자",
+  "page.nodes.table.header.totalstake.title": "총 지분",
+  "page.nodes.table.header.freespace.title": "자유 공간",
+  "page.nodes.table.header.startedon.title": "시작일",
+  "page.nodes.table.header.timeleft.title": "남은 시간",
+  "page.nodes.table.header.fee.title": "회비",
+  "page.nodes.table.header.maxyield.title": "최대 수율",
+  "page.nodes.table.header.country.title": "국가",
+
+  "pagination.show": "보여 주다",
+  "pagination.entries": "항목",
+  "pagination.jump.to.page": "페이지로 이동",
+
+  "filter.search.placeolder": "주소 / TX / 자산 / 블록 체인 / 서브넷 검색",
+
+  "space.available": "사용 가능한 공간",
+
+  "footer.join.us.telegram": "Telegram에 가입하세요"
+}
diff --git a/i18nLocales/nl.js b/i18nLocales/nl.js
new file mode 100644
index 0000000..9b19ef7
--- /dev/null
+++ b/i18nLocales/nl.js
@@ -0,0 +1,35 @@
+module.exports = {
+
+  "header.pages.nodes.title": "Knooppunten",
+  "header.pages.notifier.title": "Kennisgever",
+
+  "stats.total.nodes.title": "Totaal aantal knooppunten",
+  "stats.total.providers.title": "Totaal aanbieders",
+  "stats.total.delegations.title": "Totaal aantal delegaties",
+  "stats.total.blocks.title": "Totaal aantal blokken",
+  "stats.total.transactions.title": "Totaal transacties",
+  "stats.total.participation.title": "Totale deelname",
+
+  "page.nodes.title": "Knooppunten",
+  "page.nodes.header": "Knooppunten",
+
+  "page.nodes.table.header.nodeid.title": "Knooppunt-ID",
+  "page.nodes.table.header.delegators.title": "Delegatoren",
+  "page.nodes.table.header.totalstake.title": "Totale inzet",
+  "page.nodes.table.header.freespace.title": "Vrije ruimte",
+  "page.nodes.table.header.startedon.title": "Begon op",
+  "page.nodes.table.header.timeleft.title": "Time left",
+  "page.nodes.table.header.fee.title": "Vergoeding",
+  "page.nodes.table.header.maxyield.title": "Maximale opbrengst",
+  "page.nodes.table.header.country.title": "Land",
+
+  "pagination.show": "Laten zien",
+  "pagination.entries": "inzendingen",
+  "pagination.jump.to.page": "Spring naar pagina",
+
+  "filter.search.placeolder": "Zoekadres / TX / Asset / Blockchain / Subnet",
+
+  "space.available": "Beschikbare ruimte",
+
+  "footer.join.us.telegram": "Doe mee op Telegram"
+}
diff --git a/i18nLocales/zh.js b/i18nLocales/zh.js
new file mode 100644
index 0000000..dcc1933
--- /dev/null
+++ b/i18nLocales/zh.js
@@ -0,0 +1,35 @@
+module.exports = {
+
+  "header.pages.nodes.title": "节点数",
+  "header.pages.notifier.title": "通知者",
+
+  "stats.total.nodes.title": "总节点",
+  "stats.total.providers.title": "提供者总数",
+  "stats.total.delegations.title": "代表团总数",
+  "stats.total.blocks.title": "总块数",
+  "stats.total.transactions.title": "总交易",
+  "stats.total.participation.title": "总参与",
+
+  "page.nodes.title": "节点数",
+  "page.nodes.header": "节点数",
+
+  "page.nodes.table.header.nodeid.title": "节点编号",
+  "page.nodes.table.header.delegators.title": "委托人",
+  "page.nodes.table.header.totalstake.title": "总股份",
+  "page.nodes.table.header.freespace.title": "可用空间",
+  "page.nodes.table.header.startedon.title": "开始于",
+  "page.nodes.table.header.timeleft.title": "剩余时间",
+  "page.nodes.table.header.fee.title": "费用",
+  "page.nodes.table.header.maxyield.title": "最大产量",
+  "page.nodes.table.header.country.title": "国家",
+
+  "pagination.show": "展示",
+  "pagination.entries": "参赛作品",
+  "pagination.jump.to.page": "跳转到页面",
+
+  "filter.search.placeolder": "搜索地址/ TX /资产/区块链/子网",
+
+  "space.available": "可用空间",
+
+  "footer.join.us.telegram": "加入我们的电报"
+}
diff --git a/next.config.js b/next.config.js
index d891c7f..f213c2f 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,3 +1,10 @@
+// const nextTranslate = require('next-translate')
+
+// module.exports = nextTranslate({
+//   webpack: (config, { isServer, webpack }) => {
+//     return config;
+//   },
+
 module.exports = {
   async redirects() {
     return [
diff --git a/package.json b/package.json
index 0611fe8..a272fbe 100644
--- a/package.json
+++ b/package.json
@@ -29,11 +29,13 @@
     "next-dark-mode": "^2.3.2",
     "next-i18next": "^7.0.1",
     "next-routes": "^1.4.2",
+    "next-translate": "^1.0.2",
     "react": "17.0.1",
     "react-bootstrap": "^1.4.3",
     "react-dom": "17.0.1",
     "react-i18next": "^11.8.5",
     "react-icons": "^4.1.0",
+    "react-intl": "^5.12.3",
     "react-leaflet": "^3.1.0"
   }
 }
diff --git a/pages/_app.js b/pages/_app.js
index 9756277..02efb0a 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,14 +1,22 @@
 import React from 'react';
 import Routes from '../routes';
-// import App from 'next/app'
+import App from 'next/app'
 import withDarkMode from 'next-dark-mode'
 import { useDarkMode } from 'next-dark-mode'
+// import appWithI18n from 'next-translate/appWithI18n'
+import { useRouter } from "next/router"
 
+// import i18nConfig from '../i18n'
 import { ApolloProvider } from "@apollo/react-hooks";
 // import ApolloClient from "apollo-boost";
+// import { appWithTranslation } from '../i18n'
+import { IntlProvider } from "react-intl"
 
 import { useApollo } from '../lib/apolloClient'
 
+import allMessages from '../i18nLocales'
+import { defaultLocale } from '../locales'
+
 import '../styles/globals.css'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import '../styles/main.css'
@@ -17,23 +25,35 @@ import '../styles/flags.css'
 import '../styles/jquery.dataTables.min.css'
 import 'bootstrap-select/dist/css/bootstrap-select.min.css'
 
-function App({ Component, pageProps }) {
+function MyApp({ Component, pageProps }) {
   const apolloClient = useApollo(pageProps)
 
   const { darkModeActive } = useDarkMode()
 
+  const router = useRouter()
+
+  const locale = ((router || {}).query || {}).locale || defaultLocale
+
+  const messages = allMessages[locale]
+
   React.useEffect(() => {
     document.querySelector("body").classList.toggle('mode-light', !darkModeActive)
   }, [darkModeActive]);
 
   return (
     <ApolloProvider client={apolloClient}>
-      <Component {...pageProps} />
+      <IntlProvider
+        locale={locale}
+        defaultLocale={defaultLocale}
+        messages={messages}
+      >
+        <Component {...pageProps} />
+      </IntlProvider>
     </ApolloProvider>
   )
 }
 
-App.getInitialProps = async (props) => {
+MyApp.getInitialProps = async (props) => {
   const { Component, ctx } = props
   let pageProps = {};
 
@@ -46,4 +66,6 @@ App.getInitialProps = async (props) => {
   return { pageProps }
 }
 
-export default withDarkMode(App)
+// MyApp.getInitialProps = async (appContext) => ({ ...await App.getInitialProps(appContext) })
+
+export default withDarkMode(MyApp)
diff --git a/pages/home.js b/pages/home.js
index cb88cc9..2572dda 100644
--- a/pages/home.js
+++ b/pages/home.js
@@ -1,8 +1,10 @@
 // import React from 'react'
 import Head from 'next/head'
 
+import { useIntl } from "react-intl"
 import { useRouter } from 'next/router'
 // import { useDarkMode } from 'next-dark-mode'
+// import I18nProvider from 'next-translate/I18nProvider'
 
 import Nodes, { GET_NODES } from '../components/Nodes';
 import Layout from '../components/Layout';
@@ -17,7 +19,7 @@ export default function Home(props) {
   const currentLocale = ((router || {}).query || {}).locale || defaultLocale
   const currentRoute = `${((router || {}).route || 'home').replace('/', '')}`
 
-  console.log('Home', router, currentRoute, currentLocale)
+  console.log('Home', currentRoute, currentLocale)
 
   // const { darkModeActive } = useDarkMode()
 
@@ -25,18 +27,23 @@ export default function Home(props) {
   //   document.querySelector("body").classList.toggle('mode-dark', darkModeActive)
   // }, [darkModeActive]);
 
+  const { formatMessage } = useIntl()
+  const f = id => formatMessage({ id })
+
   return (
     <>
-      <Head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-        <title>Avaxnodes</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
-      <Layout {...props} currentLocale={currentLocale} currentRoute={currentRoute} router={router}>
-        <Nodes currentLocale={currentLocale} currentRoute={currentRoute} />
-      </Layout>
+      {/* <I18nProvider lang={currentLocale}> */}
+        <Head>
+          <meta charset="utf-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+          <title>Avaxnodes {f('page.nodes.title')}</title>
+          <link rel="icon" href="/favicon.ico" />
+        </Head>
+
+        <Layout {...props} currentLocale={currentLocale} currentRoute={currentRoute} router={router}>
+          <Nodes currentLocale={currentLocale} currentRoute={currentRoute} />
+        </Layout>
+      {/* </I18nProvider> */}
     </>
   )
 }
diff --git a/styles/main.css b/styles/main.css
index 1bef53e..7123e70 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -371,6 +371,7 @@ table.dataTable thead .sorting_desc {
   line-height: 14px;
   text-align: left;
   margin-bottom: 4px;
+  text-transform: uppercase;
 }
 
 .total-node-wrapper {
diff --git a/yarn.lock b/yarn.lock
index 825ba41..758cf13 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -154,6 +154,60 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@formatjs/ecma402-abstract@1.5.2":
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.5.2.tgz#6c20c24f814ebf8e9dd46e34310a67895853a931"
+  integrity sha512-rscxoLyIwH2x+l15Z4eD580ioO3CkFVoWDLgDtgiOnWzDzpL5EigDRg9V4mINb8W6bQRT1xnCxiRwvw3bgvqrA==
+  dependencies:
+    tslib "^2.0.1"
+
+"@formatjs/intl-datetimeformat@3.2.7":
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-datetimeformat/-/intl-datetimeformat-3.2.7.tgz#2cd32add6d79242394c3f5057b8b6e385f8665b6"
+  integrity sha512-DN3y19Hek9DhGSlwXhjgTQIHOf65XrPc7MbVw6JVnYUlsI/rkKV3fQFcEU77zCPHQjBqaM6R2OCkI4lj+uFrSA==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.5.2"
+    tslib "^2.0.1"
+
+"@formatjs/intl-displaynames@4.0.5":
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-4.0.5.tgz#2102a2bc984ce8391bf1216f6cde8d68d9f741ae"
+  integrity sha512-+01kv4Lqao245SrNW1uhYjzYlUgg8xLjxqSlbWrkAplwGBG9JNnmOze1Jmv3ls+cUe9KA0oifL6Yn28u7Gm78g==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.5.2"
+    tslib "^2.0.1"
+
+"@formatjs/intl-listformat@5.0.5":
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-5.0.5.tgz#a00b5b9c5dc140fa81cba8dea7356fe40e91fb01"
+  integrity sha512-YHmAlmUkrnoJvZtUnEuxC0N8dWPABRNDdSJksjKC1xjdpZrzHplsiY4ugw7eO56lLjsBQ1DPOAfH10iZDtmzxA==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.5.2"
+    tslib "^2.0.1"
+
+"@formatjs/intl-relativetimeformat@8.0.4":
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-relativetimeformat/-/intl-relativetimeformat-8.0.4.tgz#eca86236320802c7c7d0f7500573ebab679d607d"
+  integrity sha512-MUxsXa/cukBa4+8waUS7rQcVz0CKt7UufU9nXcUGh1FR85urqh42dz+3bM2klg51P5Mhove2mecQGeFwOhFYBQ==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.5.2"
+    tslib "^2.0.1"
+
+"@formatjs/intl@1.6.8":
+  version "1.6.8"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl/-/intl-1.6.8.tgz#c147cb3b5779e5a37bda791bc09be97a863d249a"
+  integrity sha512-cN4pUXFoUvbbLk9nq46QkDTSLzh8KN2ddK+Fi3py9Yv28xFQBl1HrSIZM4P8CFolzfoB3i7HsdI/yq0WocOx1A==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.5.2"
+    "@formatjs/intl-datetimeformat" "3.2.7"
+    "@formatjs/intl-displaynames" "4.0.5"
+    "@formatjs/intl-listformat" "5.0.5"
+    "@formatjs/intl-relativetimeformat" "8.0.4"
+    fast-memoize "^2.5.2"
+    intl-messageformat "9.4.7"
+    intl-messageformat-parser "6.3.2"
+    tslib "^2.0.1"
+
 "@graphql-typed-document-node/core@^3.0.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.1.0.tgz#0eee6373e11418bfe0b5638f654df7a4ca6a3950"
@@ -383,6 +437,14 @@
     "@types/koa" "*"
     graphql "^15.3.0"
 
+"@types/hoist-non-react-statics@^3.3.1":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/http-assert@*":
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/@types/http-assert/-/http-assert-1.5.1.tgz#d775e93630c2469c2f980fc27e3143240335db3b"
@@ -2508,6 +2570,11 @@ fast-json-stable-stringify@^2.0.0:
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
   integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
 
+fast-memoize@^2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.5.2.tgz#79e3bb6a4ec867ea40ba0e7146816f6cdce9b57e"
+  integrity sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw==
+
 figgy-pudding@^3.5.1:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
@@ -2887,7 +2954,7 @@ hoek@6.x.x:
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-6.1.3.tgz#73b7d33952e01fe27a38b0457294b79dd8da242c"
   integrity sha512-YXXAAhmF9zpQbC7LEcREFtXfGq5K1fmd+4PHkBq8NUqmzW3G+Dq10bI/i0KucLRwss3YYFQ0fSfoxBZYiGUqtQ==
 
-hoist-non-react-statics@^3.2.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.2.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -3085,6 +3152,23 @@ ini@~1.3.0:
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.6.tgz#f1c46a2a93a253e7b3905115e74d527cd23061a1"
   integrity sha512-IZUoxEjNjubzrmvzZU4lKP7OnYmX72XRl3sqkfJhBKweKi5rnGi5+IUdlj/H1M+Ip5JQ1WzaDMOBRY90Ajc5jg==
 
+intl-messageformat-parser@6.3.2:
+  version "6.3.2"
+  resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-6.3.2.tgz#5104d23b175f1c9aaccacdc98d558930b6890d00"
+  integrity sha512-n6To2TG0ictSMDBXvenS+BalJDzbIAT/e6ByPXPEBhaouVEaHbqII02gZbusAoEUI3Xq19bKyrDkkOBP0PapIA==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.5.2"
+    tslib "^2.0.1"
+
+intl-messageformat@9.4.7:
+  version "9.4.7"
+  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-9.4.7.tgz#02696a819ade1ae847639335199e3b6d8ba825c9"
+  integrity sha512-BUGRv2MI2m4CQFcZH09pf+zl1msaCe+G4e63dPT0wEEuySOMfoEilGftOJ/jxnOvDs6udD2OVCRUuv2/xt8bag==
+  dependencies:
+    fast-memoize "^2.5.2"
+    intl-messageformat-parser "6.3.2"
+    tslib "^2.0.1"
+
 invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -3815,6 +3899,11 @@ next-tick@~1.0.0:
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
   integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
 
+next-translate@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/next-translate/-/next-translate-1.0.2.tgz#af93208221d08a09b96545b2e3d853b69a6ddeb5"
+  integrity sha512-dRJdRkcBeO2cxxvyM+G9rNZ7gSng8fAGQk03C1PsIMRFpZK9WnVfKjK5buaFYG78XfBrBIEEz2d/wnJQIBy8Ow==
+
 next@10.0.3:
   version "10.0.3"
   resolved "https://registry.yarnpkg.com/next/-/next-10.0.3.tgz#2bf9a1625dcd0afc8c31be19fc5516af68d99e80"
@@ -4569,6 +4658,24 @@ react-icons@^4.1.0:
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.1.0.tgz#9ca9bcbf2e3aee8e86e378bb9d465842947bbfc3"
   integrity sha512-FCXBg1JbbR0vWALXIxmFAfozHdVIJmmwCD81Jk0EKOt7Ax4AdBNcaRkWhR0NaKy9ugJgoY3fFvo0PHpte55pXg==
 
+react-intl@^5.12.3:
+  version "5.12.3"
+  resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-5.12.3.tgz#edac4339ac28feb71923c5ec5965aa0c51672b4c"
+  integrity sha512-xzqsorTC7LYYS29bokeg3HuEL4gZ4xhrrme7PHx+wum4S6d+TEMERJbdsJTrU95ClWiqZ8u7BsT7Ep+0yTXkyw==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.5.2"
+    "@formatjs/intl" "1.6.8"
+    "@formatjs/intl-displaynames" "4.0.5"
+    "@formatjs/intl-listformat" "5.0.5"
+    "@formatjs/intl-relativetimeformat" "8.0.4"
+    "@types/hoist-non-react-statics" "^3.3.1"
+    fast-memoize "^2.5.2"
+    hoist-non-react-statics "^3.3.2"
+    intl-messageformat "9.4.7"
+    intl-messageformat-parser "6.3.2"
+    shallow-equal "^1.2.1"
+    tslib "^2.0.1"
+
 react-is@16.13.1, react-is@^16.3.2, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -4929,6 +5036,11 @@ sha.js@^2.4.0, sha.js@^2.4.11, sha.js@^2.4.8:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+shallow-equal@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
+  integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
+
 sharp@0.26.2:
   version "0.26.2"
   resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.26.2.tgz#3d5777d246ae32890afe82a783c1cbb98456a88c"
@@ -5455,6 +5567,11 @@ tslib@^1.10.0, tslib@^1.14.1, tslib@^1.9.0, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
+  integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==
+
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"