Merge pull request #22 from XinFinOrg/demo

Merge demo code to master

backend/src/storage/block.ts

@@ -8,7 +8,7 @@ const TTL = 60;
 
 const LATEST_COMMITTEDBLOCK_KEY = 'LATEST_COMMITTED_BLOCK';
 
-/** 
+/**
   This class is created so that we can easily swap with real DB without making changes to any other files.
   We using Promise for all the method eventho there is no need for that. This is also just to make it convenient when we move to a proper cache/db
 */

frontend/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;700&display=swap" rel="stylesheet">
     <link rel="icon" href="/src/assets/icon/icon.ico">
     <title>Subnet blockchain</title>
   </head>

frontend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "cryptoexplorer",
+  "name": "crypto-explorer",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -12,11 +12,13 @@
   "dependencies": {
     "autoprefixer": "^10.4.14",
     "axios": "^1.4.0",
+    "lodash.debounce": "^4.0.8",
     "postcss": "^8.4.24",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.0",
     "sass": "^1.63.6",
+    "tailwind-merge": "^1.13.2",
     "tailwindcss": "^3.3.2",
     "vite-tsconfig-paths": "^4.2.0",
     "web3": "1.6.1",
@@ -26,6 +28,8 @@
     "@vitejs/plugin-react": "^4.0.0"
   },
   "devDependencies": {
+    "@types/axios": "^0.14.0",
+    "@types/lodash.debounce": "^4.0.7",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "@typescript-eslint/parser": "^5.59.0",
     "eslint": "^8.38.0",

frontend/src/App.tsx

@@ -1,23 +1,40 @@
-import { useState } from 'react';
-import { Outlet } from 'react-router-dom';
+import { Outlet, useNavigation } from 'react-router-dom';
 
+import Alert from '@/components/alert/Alert';
+import Loader from '@/components/loader/Loader';
 import Nav from '@/components/nav/Nav';
-import { ThemeModes } from '@/components/theme-switch/ThemeSwitch';
-import { ThemeContext } from '@/contexts/themeContext';
+import AlertProvider from '@/contexts/AlertContext';
+import ThemeContextProvider from '@/contexts/ThemeContext';
+import TimeContextProvider from '@/contexts/TimeContext';
+import { useIsDesktop } from '@/hooks/useMediaQuery';
 
 function App() {
-  const [theme, setTheme] = useState<ThemeModes>('light');
+  const navigation = useNavigation();
+  const isDesktop = useIsDesktop();
 
   return (
-    <ThemeContext.Provider value={{ theme, setTheme }}>
-      <div className='relative max-w-[1440px] m-auto flex font-nunito-sans text-text-dark dark:text-text-white dark:bg-bg-dark-900'>
-        <Nav />
-        <main className="mx-6 my-8 grow w-[1146px]">
-          <Outlet />
-        </main>
-      </div>
-    </ThemeContext.Provider>
+    <TimeContextProvider>
+      <ThemeContextProvider>
+        <AlertProvider>
+          <div className={`${!isDesktop ? 'flex-col' : ''}
+            relative max-w-[1440px] mx-auto flex font-nunito-sans text-text-dark dark:text-text-white dark:bg-bg-dark-900`
+          }>
+            <Nav />
+            <main className='mx-6 my-8 grow llg-w-[1146px] relative'>
+              {navigation.state === 'loading' ? (
+                <Loader />
+              ) : (
+                <>
+                  <Outlet />
+                  <Alert />
+                </>
+              )}
+            </main>
+          </div>
+        </AlertProvider>
+      </ThemeContextProvider>
+    </TimeContextProvider>
   );
 }
 
-export default App;
+export default App;