Works

frankudoags · Oct 23, 2022 · 4333dee · 4333dee · vercel · Oct 23, 2022
1 parent d0ee9b4
commit 4333dee
Show file tree

Hide file tree

Showing 62 changed files with 4,059 additions and 29 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,14 +8,25 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@tremor/react": "^1.0.8",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.11.68",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
+    "big.js": "^6.2.1",
+    "dayjs": "^1.11.6",
+    "grommet": "^2.27.0",
+    "grommet-icons": "^4.8.0",
+    "idb-keyval": "^6.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.0",
+    "react-responsive": "^9.0.0",
     "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
+    "react-singleton-hook": "^4.0.0",
+    "socket.io-client": "^4.5.3",
+    "styled-components": "^5.3.6",
     "typescript": "^4.8.4",
     "web-vitals": "^2.1.4"
   },
@@ -44,6 +55,8 @@
     ]
   },
   "devDependencies": {
+    "@types/big.js": "^6.1.6",
+    "@types/styled-components": "^5.1.26",
     "autoprefixer": "^10.4.12",
     "postcss": "^8.4.18",
     "tailwindcss": "^3.2.0"

diff --git a/public/index.html b/public/index.html
@@ -15,16 +15,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <title>Harmony</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,25 @@
 import React from 'react';
+import Routes from './Routes';
+import { Footer, Navbar, Search } from './components';
+import { HRC20, HRC721, HRC1155 } from './components/helpers';
+import { BrowserRouter as Router } from "react-router-dom";
+import { Toaster } from 'react-hot-toast';
+function App() {
+  return (
+    <Router>
+      <Toaster />
+    <div className="max-w-8xl mx-auto">
+      <Navbar />
+      <Search />
+      <Routes />
+    </div>
+      <Footer />
+      {/* Helper components */}
+      <HRC20 />
+      <HRC721 />
+      <HRC1155 />
+    </Router>
+  );
+}
 
-  export default function App() {
-    return (
-      <h1 className="text-3xl font-bold underline text-red-800">
-        Hello world!
-      </h1>
-    )
-  }
+export default App;
diff --git a/src/Responive/breakpoints.ts b/src/Responive/breakpoints.ts
@@ -0,0 +1,8 @@
+export const breakpoints = {
+  mobile: '375px',
+  mobileL: '425px',
+  tablet: '768px',
+  tabletM: '868px',
+  laptop: '1024px',
+  desktop: '1280px',
+};
diff --git a/src/Routes.tsx b/src/Routes.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { Home, Address } from "./components"
+import { Routes, Route } from "react-router-dom";
+import { Box, Grommet } from "grommet";
+import { useThemeMode } from "../src/hooks/themeSwitcherHook";
+import { theme, darkTheme } from "./theme";
+
+const AllRoutes = () => {
+  const themeMode = useThemeMode();
+  return (
+    <div className='max-w-8xl mx-auto'>
+      <Grommet
+        theme={themeMode === "light" ? theme : darkTheme}
+        themeMode={themeMode}
+        full
+      >
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/address/:id" element={<Address />} />
+        </Routes>
+      </Grommet>
+    </div>
+  )
+}
+
+export default AllRoutes
diff --git a/src/api/client.ts b/src/api/client.ts
@@ -0,0 +1,80 @@
+import { transport } from './explorer';
+import {Block, InternalTransaction, RPCStakingTransactionHarmony, RPCTransactionHarmony, RelatedTransaction} from "../types";
+
+export function getBlockByNumber(params: any[]) {
+  return transport('getBlockByNumber', params) as Promise<Block>;
+}
+
+export function getBlockByHash(params: any[]) {
+  return transport('getBlockByHash', params) as Promise<Block>;
+}
+
+export function getBlocks(params: any[]) {
+  return transport('getBlocks', params) as Promise<Block[]>;
+}
+
+export function getCount(params: any[]) {
+  return transport('getCount', params) as Promise<{ count: string }>;
+}
+
+export function getTransactions(params: any[]) {
+  return transport('getTransactions', params) as Promise<RPCTransactionHarmony[]>;
+}
+
+export function getTransactionByField(params: any[]) {
+  return transport('getTransactionByField', params) as Promise<RPCStakingTransactionHarmony>;
+}
+
+export function getStakingTransactionByField(params: any[]) {
+  return transport('getStakingTransactionsByField', params) as Promise<RPCStakingTransactionHarmony>;
+}
+
+export function getInternalTransactionsByField(params: any[]) {
+  return transport('getInternalTransactionsByField', params) as Promise<InternalTransaction[]>;
+}
+
+export function getTransactionLogsByField(params: any[]) {
+  return transport('getLogsByField', params) as Promise<any>;
+}
+
+export function getByteCodeSignatureByHash(params: any[]) {
+  return transport('getSignaturesByHash', params) as Promise<any>;
+}
+
+export function getRelatedTransactions(params: any[]) {
+  return transport('getRelatedTransactions', params) as Promise<RelatedTransaction[]>;
+}
+export function getRelatedTransactionsByType(params: any[]) {
+  return transport('getRelatedTransactionsByType', params) as Promise<any[]>;
+}
+
+export function getTransactionCountLast14Days() {
+  return transport('getTransactionCountLast14Days', []) as Promise<any[]>;
+}
+
+export function getContractsByField(params: any[]) {
+  return transport('getContractsByField', params) as Promise<any[]>;
+}
+
+export function getAllERC20() {
+  return transport('getAllERC20', []) as Promise<any[]>;
+}
+
+export function getAllERC721() {
+  return transport('getAllERC721', []) as Promise<any[]>;
+}
+export function getAllERC1155() {
+  return transport('getAllERC1155', []) as Promise<any[]>;
+}
+
+export function getUserERC20Balances(params: any[]) {
+  return transport('getUserERC20Balances', params) as Promise<any[]>;
+}
+export function getUserERC721Balances(params: any[]) {
+  return transport('getUserERC721Assets', params) as Promise<any[]>;
+}
+export function getUserERC1155Balances(params: any[]) {
+  return transport('getUserERC1155Balances', params) as Promise<any[]>;
+}
+
+
diff --git a/src/api/explorer/index.ts b/src/api/explorer/index.ts
@@ -0,0 +1 @@
+export {transport} from './ws'
diff --git a/src/api/explorer/ws/index.ts b/src/api/explorer/ws/index.ts
@@ -0,0 +1,25 @@
+import { io } from "socket.io-client";
+
+const socket = io("https://ws.explorer-v2-api.hmny.io", {
+  transports: ["websocket"],
+});
+
+socket.connect();
+
+export const transport = (method: string, params: any[]) => {
+  return new Promise((resolve, reject) => {
+    socket.emit(method, params, (res: any) => {
+      try {
+        const payload = JSON.parse(res.payload);
+
+        if (res.event === "Response") {
+          resolve(payload);
+        } else {
+          reject(payload);
+        }
+      } catch (err) {
+        reject(null);
+      }
+    });
+  });
+};
diff --git a/src/assets/index.js b/src/assets/index.js
@@ -0,0 +1,3 @@
+export { default as Logo } from './logo.svg';
+export { default as LogoWhite } from './logoWhite.svg';
+export { default as OneLogo } from './one-logo.png';
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
diff --git a/src/assets/logoWhite.svg b/src/assets/logoWhite.svg
diff --git a/src/assets/one-logo.png b/src/assets/one-logo.png