update: added different environments for loading, fixed #133, fixed #119

3 years ago · cdded1324d
parent 4e64b1aa32
commit cdded1324d
8 changed files with 251 additions and 184 deletions
--- a/.env.devnet
+++ b/.env.devnet
@ -0,0 +1,8 @@
+REACT_APP_RPC_URL_SHARD0=https://api.s0.ps.hmny.io/
+REACT_APP_RPC_URL_SHARD1=https://api.s1.ps.hmny.io/
+REACT_APP_RPC_URL_SHARD2=https://api.s2.t.hmny.io/
+REACT_APP_RPC_URL_SHARD3=https://api.s3.t.hmny.io/
+REACT_APP_AVAILABLE_SHARDS=0,1
+REACT_APP_EXPLORER_V1_API_URL=https://ctrver.t.hmny.io/
+REACT_APP_INDEXER_IPFS_GATEWAY=https://ipfs.io/ipfs/
+REACT_APP_PROD_ADDRESS=https://explorer-v2-api.ps.hmny.io
--- a/.env.testnet
+++ b/.env.testnet
@ -0,0 +1,8 @@
+REACT_APP_RPC_URL_SHARD0=https://api.s0.pops.one/
+REACT_APP_RPC_URL_SHARD1=https://api.s1.b.hmny.io/
+REACT_APP_RPC_URL_SHARD2=https://api.s2.b.hmny.io/
+REACT_APP_RPC_URL_SHARD3=https://api.s3.b.hmny.io/
+REACT_APP_AVAILABLE_SHARDS=0,1,2,3
+REACT_APP_EXPLORER_V1_API_URL=https://ctrver.t.hmny.io/
+REACT_APP_INDEXER_IPFS_GATEWAY=https://ipfs.io/ipfs/
+REACT_APP_PROD_ADDRESS=https://api.explorer.pops.one/
--- a/package-lock.json
+++ b/package-lock.json
@ -10,10 +10,13 @@
      "dependencies": {
        "@metamask/detect-provider": "^1.2.0",
        "big.js": "^6.1.1",
+        "chart.js": "^3.7.0",
        "dayjs": "^1.10.4",
+        "env-cmd": "^10.1.0",
        "grommet": "2.17.2",
        "grommet-icons": "^4.5.0",
        "react": "^17.0.2",
+        "react-chartjs-2": "^4.0.1",
        "react-dom": "^17.0.2",
        "react-responsive": "^8.2.0",
        "react-router-dom": "^5.2.0",
@ -4489,6 +4492,18 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/ansi-escapes/node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/ansi-html": {
      "version": "0.0.7",
      "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
@ -5991,6 +6006,11 @@
        "node": ">=10"
      }
    },
+    "node_modules/chart.js": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.0.tgz",
+      "integrity": "sha512-31gVuqqKp3lDIFmzpKIrBeum4OpZsQjSIAqlOpgjosHDJZlULtvwLEZKtEhIAZc7JMPaHlYMys40Qy9Mf+1AAg=="
+    },
    "node_modules/check-types": {
      "version": "11.1.2",
      "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
@ -6416,7 +6436,6 @@
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
      "engines": {
        "node": ">= 6"
      }
@ -6824,7 +6843,6 @@
      "version": "7.0.3",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
      "dependencies": {
        "path-key": "^3.1.0",
        "shebang-command": "^2.0.0",
@ -8236,6 +8254,21 @@
        "url": "https://github.com/fb55/entities?sponsor=1"
      }
    },
+    "node_modules/env-cmd": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/env-cmd/-/env-cmd-10.1.0.tgz",
+      "integrity": "sha512-mMdWTT9XKN7yNth/6N6g2GuKuJTsKMDHlQFUDacb/heQRRWOTIZ42t1rMHnQu4jYxU1ajdTeJM+9eEETlqToMA==",
+      "dependencies": {
+        "commander": "^4.0.0",
+        "cross-spawn": "^7.0.0"
+      },
+      "bin": {
+        "env-cmd": "bin/env-cmd.js"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
    "node_modules/errno": {
      "version": "0.1.8",
      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
@ -12346,8 +12379,7 @@
    "node_modules/isexe": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
-      "dev": true
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
    },
    "node_modules/isobject": {
      "version": "3.0.1",
@ -15428,7 +15460,6 @@
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
      "engines": {
        "node": ">=8"
      }
@ -17390,6 +17421,15 @@
        "node": ">=10"
      }
    },
+    "node_modules/react-chartjs-2": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.0.1.tgz",
+      "integrity": "sha512-q8bgWzKoFvBvD7YcjT/hXG8jt55TaMAuJ1dmI3tKFJ7CijUWYz4pIfOhkTI6PBTwqu/pmeWsClBRd/7HiWzN1g==",
+      "peerDependencies": {
+        "chart.js": "^3.5.0",
+        "react": "^16.8.0 || ^17.0.0"
+      }
+    },
    "node_modules/react-desc": {
      "version": "4.1.3",
      "resolved": "https://registry.npmjs.org/react-desc/-/react-desc-4.1.3.tgz",
@ -19461,7 +19501,6 @@
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
      "dependencies": {
        "shebang-regex": "^3.0.0"
      },
@ -19473,7 +19512,6 @@
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
      "engines": {
        "node": ">=8"
      }
@ -19530,9 +19568,9 @@
      ]
    },
    "node_modules/simple-get": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-2.8.1.tgz",
-      "integrity": "sha512-lSSHRSw3mQNUGPAYRqo7xy9dhKmxFXIjLjp4KHpf99GEH2VH7C3AM+Qfx6du6jhfUi6Vm7XnbEVEf7Wb6N8jRw==",
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-2.8.2.tgz",
+      "integrity": "sha512-Ijd/rV5o+mSBBs4F/x9oDPtTx9Zb6X9brmnXvMW4J7IR15ngi9q5xxqWBKU744jTZiaXtxaPL7uHG6vtN8kUkw==",
      "dependencies": {
        "decompress-response": "^3.3.0",
        "once": "^1.3.1",
@ -21664,10 +21702,12 @@
      }
    },
    "node_modules/type-fest": {
-      "version": "0.21.3",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
+      "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
      "dev": true,
+      "optional": true,
+      "peer": true,
      "engines": {
        "node": ">=10"
      },
@ -24194,7 +24234,6 @@
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
      "dependencies": {
        "isexe": "^2.0.0"
      },
@ -27980,6 +28019,14 @@
      "dev": true,
      "requires": {
        "type-fest": "^0.21.3"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "0.21.3",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+          "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+          "dev": true
+        }
      }
    },
    "ansi-html": {
@ -29181,6 +29228,11 @@
      "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
      "dev": true
    },
+    "chart.js": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.0.tgz",
+      "integrity": "sha512-31gVuqqKp3lDIFmzpKIrBeum4OpZsQjSIAqlOpgjosHDJZlULtvwLEZKtEhIAZc7JMPaHlYMys40Qy9Mf+1AAg=="
+    },
    "check-types": {
      "version": "11.1.2",
      "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
@ -29533,8 +29585,7 @@
    "commander": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="
    },
    "common-tags": {
      "version": "1.8.2",
@ -29873,7 +29924,6 @@
      "version": "7.0.3",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
      "requires": {
        "path-key": "^3.1.0",
        "shebang-command": "^2.0.0",
@ -31006,6 +31056,15 @@
      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
      "dev": true
    },
+    "env-cmd": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/env-cmd/-/env-cmd-10.1.0.tgz",
+      "integrity": "sha512-mMdWTT9XKN7yNth/6N6g2GuKuJTsKMDHlQFUDacb/heQRRWOTIZ42t1rMHnQu4jYxU1ajdTeJM+9eEETlqToMA==",
+      "requires": {
+        "commander": "^4.0.0",
+        "cross-spawn": "^7.0.0"
+      }
+    },
    "errno": {
      "version": "0.1.8",
      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
@ -34180,8 +34239,7 @@
    "isexe": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
-      "dev": true
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
    },
    "isobject": {
      "version": "3.0.1",
@ -36701,8 +36759,7 @@
    "path-key": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
    },
    "path-parse": {
      "version": "1.0.7",
@ -38303,6 +38360,12 @@
        "whatwg-fetch": "^3.4.1"
      }
    },
+    "react-chartjs-2": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.0.1.tgz",
+      "integrity": "sha512-q8bgWzKoFvBvD7YcjT/hXG8jt55TaMAuJ1dmI3tKFJ7CijUWYz4pIfOhkTI6PBTwqu/pmeWsClBRd/7HiWzN1g==",
+      "requires": {}
+    },
    "react-desc": {
      "version": "4.1.3",
      "resolved": "https://registry.npmjs.org/react-desc/-/react-desc-4.1.3.tgz",
@ -39957,7 +40020,6 @@
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
      "requires": {
        "shebang-regex": "^3.0.0"
      }
@ -39965,8 +40027,7 @@
    "shebang-regex": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
    },
    "shell-quote": {
      "version": "1.7.2",
@ -40003,9 +40064,9 @@
      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q=="
    },
    "simple-get": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-2.8.1.tgz",
-      "integrity": "sha512-lSSHRSw3mQNUGPAYRqo7xy9dhKmxFXIjLjp4KHpf99GEH2VH7C3AM+Qfx6du6jhfUi6Vm7XnbEVEf7Wb6N8jRw==",
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-2.8.2.tgz",
+      "integrity": "sha512-Ijd/rV5o+mSBBs4F/x9oDPtTx9Zb6X9brmnXvMW4J7IR15ngi9q5xxqWBKU744jTZiaXtxaPL7uHG6vtN8kUkw==",
      "requires": {
        "decompress-response": "^3.3.0",
        "once": "^1.3.1",
@ -41730,10 +41791,12 @@
      "dev": true
    },
    "type-fest": {
-      "version": "0.21.3",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
-      "dev": true
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
+      "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
+      "dev": true,
+      "optional": true,
+      "peer": true
    },
    "type-is": {
      "version": "1.6.18",
@ -43791,7 +43854,6 @@
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
      "requires": {
        "isexe": "^2.0.0"
      }
--- a/package.json
+++ b/package.json
@ -5,10 +5,13 @@
  "dependencies": {
    "@metamask/detect-provider": "^1.2.0",
    "big.js": "^6.1.1",
+    "chart.js": "^3.7.0",
    "dayjs": "^1.10.4",
+    "env-cmd": "^10.1.0",
    "grommet": "2.17.2",
    "grommet-icons": "^4.5.0",
    "react": "^17.0.2",
+    "react-chartjs-2": "^4.0.1",
    "react-dom": "^17.0.2",
    "react-responsive": "^8.2.0",
    "react-router-dom": "^5.2.0",
@ -20,8 +23,12 @@
    "web3": "^1.3.6"
  },
  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "env-cmd -f .env react-scripts start",
+    "start:testnet": "env-cmd -f .env.testnet react-scripts start",
+    "start:devnet": "env-cmd -f .env.devnet react-scripts start",
+    "build": "env-cmd -f .env react-scripts build",
+    "build:testnet": "env-cmd -f .env.testnet react-scripts build",
+    "build:devnet": "env-cmd -f .env.devnet react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
@ -59,9 +66,9 @@
    "@types/styled-components": "^5.1.9",
    "js-sha3": "^0.8.0",
    "prettier": "^2.2.1",
+    "react-error-overlay": "6.0.9",
    "react-scripts": "4.0.3",
    "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1",
-    "react-error-overlay": "6.0.9"
+    "web-vitals": "^1.0.1"
  }
 }
--- a/src/App.tsx
+++ b/src/App.tsx
@ -21,7 +21,7 @@ export const toaster = new Toaster();
 export const settingsService = new SettingsService();

 function App() {
-  if (document.location.hash) {
+  if (document.location.hash && document.location.hash !== "#code") {
    document.location.href = `${
      document.location.origin
    }/${document.location.hash.slice(2)}`;
--- a/src/api/rpc.ts
+++ b/src/api/rpc.ts
@ -2,7 +2,7 @@ import { IGetTxsHistoryParams, RequestOrder, RequestTxType, RPCTransactionHarmon

 export type TRPCResponse<T> = { id: number; jsonrpc: "2.0"; result: T, error?: { code: number, message: string } };

-const API_URL = 'https://a.api.s0.t.hmny.io/'
+const API_URL = process.env.REACT_APP_RPC_URL_SHARD0 || 'https://a.api.s0.t.hmny.io/';

 export const rpcAdapter = <T = any>(...args: Parameters<typeof fetch>) => {
  /**
--- a/src/components/metrics/index.tsx
+++ b/src/components/metrics/index.tsx
@ -10,8 +10,58 @@ import { useMediaQuery } from "react-responsive";
 import { breakpoints } from "src/responsive/breakpoints";
 import { useONEExchangeRate } from "../../hooks/useONEExchangeRate";
 import { getTransactionCountLast14Days, getWalletsCountLast14Days } from "src/api/client";
+import { Bar } from 'react-chartjs-2';

 import { getCount } from "src/api/client";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+} from 'chart.js';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+export const options = {
+  responsive: true,
+  plugins: {
+    legend: {
+      display: false
+    },
+    tooltip: {
+      backgroundColor: 'rgb(0,0,0)'
+    },
+  },
+  scales: {
+    x: {
+      grid: {
+        display: false,
+        drawBorder: false,
+      },
+      ticks: {
+        autoSkip: true,
+        maxRotation: 0,
+        minRotation: 0
+      },
+    },
+    y: {
+      grid: {
+        display: false,
+        drawBorder: false,
+      }
+    }
+  }
+};

 export const Metrics = (params: {
  latency: number;
@ -83,23 +133,23 @@ export const Metrics = (params: {
        <BlockTransactionsHistory />
      </Box>

-        {isLessLaptop && (
-            <Line
-                horizontal
-                style={{ marginTop: isLessTablet ? "16px" : "24px" }}
-            />
-        )}
+      {isLessLaptop && (
+        <Line
+          horizontal
+          style={{ marginTop: isLessTablet ? "16px" : "24px" }}
+        />
+      )}

-        <Box
-            justify="between"
-            pad={{
-                left: isLessLaptop ? "0" : "medium",
-            }}
-            margin={{ top: isLessLaptop ? "medium" : "0" }}
-            style={{ height: "140px", flex: "1 1 100%" }}
-        >
-            <WalletsHistory />
-        </Box>
+      <Box
+        justify="between"
+        pad={{
+          left: isLessLaptop ? "0" : "medium",
+        }}
+        margin={{ top: isLessLaptop ? "medium" : "0" }}
+        style={{ height: "140px", flex: "1 1 100%" }}
+      >
+        <WalletsHistory />
+      </Box>

    </BasePage>
  );
@ -289,67 +339,28 @@ function BlockTransactionsHistory() {
    getElements();
  }, []);

-  const data = result.map((i) => ({
-    date: dayjs(i.timestamp).format("DD-MM"),
-    count: +i.count,
-  }));
+  const data = {
+    labels: result.map((i) => dayjs(i.timestamp).format("DD-MM")),
+    datasets: [{
+      label: "Wallets",
+      data: result.map((i) => +i.count),
+      backgroundColor: 'rgba(0, 174, 233, 0.5)'
+    }]
+  }

  return (
    <Box>
      <Text size="small" color="minorText" style={{ flex: "1 0 auto" }}>
        {"TRANSACTION HISTORY"}
      </Text>
-      <Box style={{ flex: "1 1 100%", marginTop: "30px" }}>
+      <Box style={{ flex: "1 1 100%", marginTop: "10px" }}>
        {isLoading && (
          <Box justify="center" align="center" height="110px">
            <Spinner />
          </Box>
        )}
        {!isLoading && (
-          <DataChart
-            data={data}
-            detail
-            axis={{
-              x: {
-                granularity: "medium",
-                property: "date",
-              },
-              y: {
-                granularity: "medium",
-                property: "count",
-              },
-            }}
-            series={[
-              {
-                property: "date",
-                label: "Date",
-                render: (value) => (
-                  <Text size="xsmall" color="minorText">
-                    {value}
-                  </Text>
-                ),
-              },
-              {
-                property: "count",
-                label: "Transactions",
-                render: (value) => (
-                  <Text size="xsmall" color="minorText">
-                    {formatNumber(value)}
-                  </Text>
-                ),
-              },
-            ]}
-            size="fill"
-            chart={[
-              {
-                property: "count",
-                type: "bar",
-                color: "brand",
-                opacity: "medium",
-                thickness: "small",
-              },
-            ]}
-          />
+          <Bar options={options} data={data} height="110px" />
        )}
      </Box>
    </Box>
@ -358,90 +369,56 @@ function BlockTransactionsHistory() {


 interface WalletHitoryItem {
-    date: string;
-    count: string;
+  date: string;
+  count: string;
 }

 function WalletsHistory() {
-    const [result, setResult] = useState<WalletHitoryItem[]>([]);
-    const [isLoading, setIsLoading] = useState<boolean>(false);
-
-    useEffect(() => {
-        const getElements = async () => {
-            setIsLoading(true);
-            const res = await getWalletsCountLast14Days();
-            setResult(res);
-            setIsLoading(false);
-        };
-
-        getElements();
-    }, []);
-
-    const data = result.map((i) => ({
-        date: dayjs(i.date).format("DD-MM"),
-        count: +i.count,
-    }));
-
-    return (
-        <Box>
-            <Text size="small" color="minorText" style={{ flex: "1 0 auto" }}>
-                {"WALLETS"}
-            </Text>
-            <Box style={{ flex: "1 1 100%", marginTop: "30px" }}>
-                {isLoading && (
-                    <Box justify="center" align="center" height="110px">
-                        <Spinner />
-                    </Box>
-                )}
-                {!isLoading && (
-                    <DataChart
-                        data={data}
-                        detail
-                        axis={{
-                            x: {
-                                granularity: "medium",
-                                property: "date",
-                            },
-                            y: {
-                                granularity: "medium",
-                                property: "count",
-                            },
-                        }}
-                        series={[
-                            {
-                                property: "date",
-                                label: "Date",
-                                render: (value) => (
-                                    <Text size="xsmall" color="minorText">
-                                        {value}
-                                    </Text>
-                                ),
-                            },
-                            {
-                                property: "count",
-                                label: "Wallets",
-                                render: (value) => (
-                                    <Text size="xsmall" color="minorText">
-                                        {formatNumber(value)}
-                                    </Text>
-                                ),
-                            },
-                        ]}
-                        size="fill"
-                        chart={[
-                            {
-                                property: "count",
-                                type: "bar",
-                                color: "brand",
-                                opacity: "medium",
-                                thickness: "small",
-                            },
-                        ]}
-                    />
-                )}
-            </Box>
-        </Box>
-    );
+  const [result, setResult] = useState<WalletHitoryItem[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    const getElements = async () => {
+      setIsLoading(true);
+      const res = await getWalletsCountLast14Days();
+      setResult(res);
+      setIsLoading(false);
+    };
+
+    getElements();
+  }, []);
+
+  // const data = result.map((i) => ({
+  //     date: dayjs(i.date).format("DD-MM"),
+  //     count: +i.count,
+  // }));
+
+  const data = {
+    labels: result.map((i) => dayjs(i.date).format("DD-MM")),
+    datasets: [{
+      label: "Wallets",
+      data: result.map((i) => +i.count),
+      backgroundColor: 'rgba(0, 174, 233, 0.5)'
+    }]
+  }
+
+  return (
+    <Box>
+      <Text size="small" color="minorText" style={{ flex: "1 0 auto" }}>
+        {"WALLETS"}
+      </Text>
+      <Box style={{ flex: "1 1 100%", marginTop: "10px" }}>
+        {isLoading && (
+          <Box justify="center" align="center" height="110px">
+            <Spinner />
+          </Box>
+        )}
+        {!isLoading && (
+          <Bar options={options} data={data} height="110px" />
+        )}
+      </Box>
+    </Box>
+  );
 }

 const Line = styled.div<{ horizontal?: boolean; vertical?: boolean }>`
--- a/src/pages/AddressPage/index.tsx
+++ b/src/pages/AddressPage/index.tsx
@ -38,6 +38,7 @@ export function AddressPage() {
  const tabParamName = "activeTab=";
  const oldTabParamName = "txType=";
  let activeTab = 0;
+
  try {
    const newValue = +history.location.search.slice(
      history.location.search.indexOf("activeTab=") + tabParamName.length
@ -79,6 +80,10 @@ export function AddressPage() {
      default: {
      }
    }
+
+    if (activeTab === 0 && history.location.hash === "#code") {
+      activeTab = 7; // note how do i derive this active tab? its a bit hard coded atm
+    }
  } catch {
    activeTab = 0;
  }