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

pull/135/head
Victa Kwok Wai Phu 3 years ago
parent 4e64b1aa32
commit cdded1324d
  1. 8
      .env.devnet
  2. 8
      .env.testnet
  3. 126
      package-lock.json
  4. 15
      package.json
  5. 2
      src/App.tsx
  6. 2
      src/api/rpc.ts
  7. 269
      src/components/metrics/index.tsx
  8. 5
      src/pages/AddressPage/index.tsx

@ -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

@ -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/

126
package-lock.json generated

@ -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"
}

@ -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"
}
}

@ -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)}`;

@ -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>) => {
/**

@ -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 }>`

@ -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;
}

Loading…
Cancel
Save