diff --git a/explorer/package-lock.json b/explorer/package-lock.json
index ae5a139d2a..058a29c8b3 100644
--- a/explorer/package-lock.json
+++ b/explorer/package-lock.json
@@ -7,6 +7,7 @@
"": {
"name": "@nym/network-explorer",
"version": "1.0.0",
+ "license": "Apache-2.0",
"dependencies": {
"@cosmjs/math": "^0.26.2",
"@emotion/react": "^11.4.1",
@@ -15,7 +16,7 @@
"@mui/material": "^5.0.1",
"@mui/styles": "^5.0.1",
"@mui/system": "^5.0.1",
- "@mui/x-data-grid": "^5.0.0-beta.2",
+ "@mui/x-data-grid": "^5.0.0-beta.5",
"@nymproject/nym-validator-client": "^0.18.0",
"d3-scale": "^4.0.0",
"date-fns": "^2.24.0",
@@ -519,9 +520,9 @@
}
},
"node_modules/@babel/runtime": {
- "version": "7.15.4",
- "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
- "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+ "version": "7.16.3",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.3.tgz",
+ "integrity": "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==",
"dependencies": {
"regenerator-runtime": "^0.13.4"
},
@@ -2228,13 +2229,14 @@
}
},
"node_modules/@mui/core": {
- "version": "5.0.0-alpha.48",
- "resolved": "https://registry.npmjs.org/@mui/core/-/core-5.0.0-alpha.48.tgz",
- "integrity": "sha512-H/QQwKsr2EqPAnP35DGDpWihk5BOFYGhO52rIHb3XKOfoUjDCrCHBy2kvr3dLWJDmJXr/QzYj3AX10n5XzlaMg==",
+ "version": "5.0.0-alpha.54",
+ "resolved": "https://registry.npmjs.org/@mui/core/-/core-5.0.0-alpha.54.tgz",
+ "integrity": "sha512-8TxdHqDdSb6wjhsnpE5n7qtkFKDG3PUSlVY0gR3VcdsHXscUY13l3VbMQW1brI4D/R9zx5VYmxIHWaHFgw4RtA==",
"dependencies": {
- "@babel/runtime": "^7.15.4",
+ "@babel/runtime": "^7.16.0",
"@emotion/is-prop-valid": "^1.1.0",
- "@mui/utils": "^5.0.1",
+ "@mui/utils": "^5.1.0",
+ "@popperjs/core": "^2.4.4",
"clsx": "^1.1.1",
"prop-types": "^15.7.2",
"react-is": "^17.0.2"
@@ -2275,17 +2277,16 @@
}
},
"node_modules/@mui/material": {
- "version": "5.0.1",
- "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.0.1.tgz",
- "integrity": "sha512-+/JJzRcORUf5MiZnzuqsPFRgxm3/0CUi1wE97ZQ2y7r+EnDVsjJLcjAH9Q9GY3k9zkPIpYb9Hig/+HT6AGZRnQ==",
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.1.0.tgz",
+ "integrity": "sha512-K76v7zRhpJToInSI8sRcEmTwpVFBZ223VIusjZRKXN8JzX+PuErG7skfa1yUuhc3f4VEqcYYUw0LvI+DJJ05eg==",
"dependencies": {
- "@babel/runtime": "^7.15.4",
- "@mui/core": "5.0.0-alpha.48",
- "@mui/system": "^5.0.1",
- "@mui/types": "^7.0.0",
- "@mui/utils": "^5.0.1",
- "@popperjs/core": "^2.4.4",
- "@types/react-transition-group": "^4.4.3",
+ "@babel/runtime": "^7.16.0",
+ "@mui/core": "5.0.0-alpha.54",
+ "@mui/system": "^5.1.0",
+ "@mui/types": "^7.1.0",
+ "@mui/utils": "^5.1.0",
+ "@types/react-transition-group": "^4.4.4",
"clsx": "^1.1.1",
"csstype": "^3.0.9",
"hoist-non-react-statics": "^3.3.2",
@@ -2301,7 +2302,7 @@
"url": "https://opencollective.com/material-ui"
},
"peerDependencies": {
- "@emotion/react": "^11.4.1",
+ "@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@types/react": "^16.8.6 || ^17.0.0",
"react": "^17.0.2",
@@ -2325,12 +2326,12 @@
"integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw=="
},
"node_modules/@mui/private-theming": {
- "version": "5.0.1",
- "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.0.1.tgz",
- "integrity": "sha512-R8Cf2+32cG1OXFAqTighA5Mx9R5BQ57cN1ZVaNgfgdbI87Yig2fVMdFSPrw3txcjKlnwsvFJF8AdwQMqq1tJ3Q==",
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.1.0.tgz",
+ "integrity": "sha512-RWzpvwZTNoCUlWFtf7uMDY4QkNL6pI3V2Ac4MZeVzJr3DLluQrt0JjUdsy8CVS7HCTp1YGiyZsJ7H8PfR9jIOw==",
"dependencies": {
- "@babel/runtime": "^7.15.4",
- "@mui/utils": "^5.0.1",
+ "@babel/runtime": "^7.16.0",
+ "@mui/utils": "^5.1.0",
"prop-types": "^15.7.2"
},
"engines": {
@@ -2351,11 +2352,11 @@
}
},
"node_modules/@mui/styled-engine": {
- "version": "5.0.2",
- "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.0.2.tgz",
- "integrity": "sha512-vApnXLj/5V+SbBy+jGFtPgu3tgs0ybSdwWLwXcnUAdNdRyJBffi2KyOP8fhUONLOcZBMU2heNXWz/Zqn5kbDKQ==",
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.1.0.tgz",
+ "integrity": "sha512-Z27hexqYL21z+iVat47n1E/Tj4r83JK6hXaOFj2rYMYz0lJQ6YGLF+c2B3NNJoglL76Vo0w4yKC63FsO+015kw==",
"dependencies": {
- "@babel/runtime": "^7.15.4",
+ "@babel/runtime": "^7.16.0",
"@emotion/cache": "^11.5.0",
"prop-types": "^15.7.2"
},
@@ -2426,15 +2427,15 @@
"integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw=="
},
"node_modules/@mui/system": {
- "version": "5.0.6",
- "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.0.6.tgz",
- "integrity": "sha512-qZdgODiO82/r1bH9KV5bdqqx/q14i32OGUK/bO6phhXM/DX0TmWSUsnPqFX4F7/UKrvBHsGzIb8ohdRuihQD+Q==",
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.1.0.tgz",
+ "integrity": "sha512-1h+YDnPGfTWZkf7lgeNV+vw6altxXGLclXLdxs9GPzEMNYXX7xveUjmndYpO1p/yx7GNG2gLWWkFZ1TYCeo4+Q==",
"dependencies": {
- "@babel/runtime": "^7.15.4",
- "@mui/private-theming": "^5.0.1",
- "@mui/styled-engine": "^5.0.2",
- "@mui/types": "^7.0.0",
- "@mui/utils": "^5.0.1",
+ "@babel/runtime": "^7.16.0",
+ "@mui/private-theming": "^5.1.0",
+ "@mui/styled-engine": "^5.1.0",
+ "@mui/types": "^7.1.0",
+ "@mui/utils": "^5.1.0",
"clsx": "^1.1.1",
"csstype": "^3.0.9",
"prop-types": "^15.7.2"
@@ -2470,9 +2471,9 @@
"integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw=="
},
"node_modules/@mui/types": {
- "version": "7.0.0",
- "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.0.0.tgz",
- "integrity": "sha512-M/tkF2pZ4uoPhZ8pnNhlVnOFtz6F3dnYKIsnj8MuXKT6d26IE2u0UjA8B0275ggN74dR9rlHG5xJt5jgDx/Ung==",
+ "version": "7.1.0",
+ "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.1.0.tgz",
+ "integrity": "sha512-Hh7ALdq/GjfIwLvqH3XftuY3bcKhupktTm+S6qRIDGOtPtRuq2L21VWzOK4p7kblirK0XgGVH5BLwa6u8z/6QQ==",
"peerDependencies": {
"@types/react": "*"
},
@@ -2483,11 +2484,11 @@
}
},
"node_modules/@mui/utils": {
- "version": "5.0.1",
- "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.0.1.tgz",
- "integrity": "sha512-GWO104N+o9KG5fKiTEYnAg7kONKEg3vLN+VROAU0f3it6lFGLCVPcQYex/1gJ4QAy96u6Ez8/Hmmhi1+3cX0tQ==",
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.1.0.tgz",
+ "integrity": "sha512-TbAa3DZBGE6xjrVsQ6e0Iw0jwgGZqPg/48aZJJWXJJjU8NU5OhBRutYhrk/kbdDRmsIArHNdpJayBSi7yETYvg==",
"dependencies": {
- "@babel/runtime": "^7.15.4",
+ "@babel/runtime": "^7.16.0",
"@types/prop-types": "^15.7.4",
"@types/react-is": "^16.7.1 || ^17.0.0",
"prop-types": "^15.7.2",
@@ -2501,21 +2502,20 @@
}
},
"node_modules/@mui/x-data-grid": {
- "version": "5.0.0-beta.2",
- "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-5.0.0-beta.2.tgz",
- "integrity": "sha512-3pY8i6ABfBH16UhuA4loD66buwPABEmfhBq/JZKUA7BkaqrsDvNv2ceuhAwVWK4KzlKiPNcUtmtJ3d+joWw4Og==",
+ "version": "5.0.0-beta.7",
+ "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-5.0.0-beta.7.tgz",
+ "integrity": "sha512-0h7uJ/1xvXghJwGPRFcPUPB0zNlKpfAqFU2dBdAtUl6DK2ca1cPfd+sLNzApa4yvxjGUxLyNxvcc5xutka0t8A==",
"dependencies": {
- "@mui/utils": "^5.0.0",
+ "@mui/utils": "^5.0.1",
"clsx": "^1.1.1",
"prop-types": "^15.7.2",
- "reselect": "^4.0.0"
+ "reselect": "^4.1.1"
},
"engines": {
"node": ">=12.0.0"
},
"peerDependencies": {
- "@mui/material": "^5.0.0",
- "@mui/styles": "^5.0.0",
+ "@mui/material": "^5.0.6",
"react": "^17.0.2"
}
},
@@ -2689,9 +2689,9 @@
}
},
"node_modules/@popperjs/core": {
- "version": "2.10.1",
- "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.1.tgz",
- "integrity": "sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==",
+ "version": "2.10.2",
+ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz",
+ "integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
@@ -3298,9 +3298,9 @@
}
},
"node_modules/@types/react-transition-group": {
- "version": "4.4.3",
- "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.3.tgz",
- "integrity": "sha512-fUx5muOWSYP8Bw2BUQ9M9RK9+W1XBK/7FLJ8PTQpnpTEkn0ccyMffyEQvan4C3h53gHdx7KE5Qrxi/LnUGQtdg==",
+ "version": "4.4.4",
+ "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz",
+ "integrity": "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==",
"dependencies": {
"@types/react": "*"
}
@@ -14107,9 +14107,9 @@
"dev": true
},
"node_modules/reselect": {
- "version": "4.0.0",
- "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.0.0.tgz",
- "integrity": "sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA=="
+ "version": "4.1.2",
+ "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.2.tgz",
+ "integrity": "sha512-wg60ebcPOtxcptIUfrr7Jt3h4BR86cCW3R7y4qt65lnNb4yz4QgrXcbSioVsIOYguyz42+XTHIyJ5TEruzkFgQ=="
},
"node_modules/resize-img": {
"version": "1.1.2",
@@ -17395,9 +17395,9 @@
}
},
"@babel/runtime": {
- "version": "7.15.4",
- "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
- "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
+ "version": "7.16.3",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.3.tgz",
+ "integrity": "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==",
"requires": {
"regenerator-runtime": "^0.13.4"
}
@@ -18774,13 +18774,14 @@
}
},
"@mui/core": {
- "version": "5.0.0-alpha.48",
- "resolved": "https://registry.npmjs.org/@mui/core/-/core-5.0.0-alpha.48.tgz",
- "integrity": "sha512-H/QQwKsr2EqPAnP35DGDpWihk5BOFYGhO52rIHb3XKOfoUjDCrCHBy2kvr3dLWJDmJXr/QzYj3AX10n5XzlaMg==",
+ "version": "5.0.0-alpha.54",
+ "resolved": "https://registry.npmjs.org/@mui/core/-/core-5.0.0-alpha.54.tgz",
+ "integrity": "sha512-8TxdHqDdSb6wjhsnpE5n7qtkFKDG3PUSlVY0gR3VcdsHXscUY13l3VbMQW1brI4D/R9zx5VYmxIHWaHFgw4RtA==",
"requires": {
- "@babel/runtime": "^7.15.4",
+ "@babel/runtime": "^7.16.0",
"@emotion/is-prop-valid": "^1.1.0",
- "@mui/utils": "^5.0.1",
+ "@mui/utils": "^5.1.0",
+ "@popperjs/core": "^2.4.4",
"clsx": "^1.1.1",
"prop-types": "^15.7.2",
"react-is": "^17.0.2"
@@ -18795,17 +18796,16 @@
}
},
"@mui/material": {
- "version": "5.0.1",
- "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.0.1.tgz",
- "integrity": "sha512-+/JJzRcORUf5MiZnzuqsPFRgxm3/0CUi1wE97ZQ2y7r+EnDVsjJLcjAH9Q9GY3k9zkPIpYb9Hig/+HT6AGZRnQ==",
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.1.0.tgz",
+ "integrity": "sha512-K76v7zRhpJToInSI8sRcEmTwpVFBZ223VIusjZRKXN8JzX+PuErG7skfa1yUuhc3f4VEqcYYUw0LvI+DJJ05eg==",
"requires": {
- "@babel/runtime": "^7.15.4",
- "@mui/core": "5.0.0-alpha.48",
- "@mui/system": "^5.0.1",
- "@mui/types": "^7.0.0",
- "@mui/utils": "^5.0.1",
- "@popperjs/core": "^2.4.4",
- "@types/react-transition-group": "^4.4.3",
+ "@babel/runtime": "^7.16.0",
+ "@mui/core": "5.0.0-alpha.54",
+ "@mui/system": "^5.1.0",
+ "@mui/types": "^7.1.0",
+ "@mui/utils": "^5.1.0",
+ "@types/react-transition-group": "^4.4.4",
"clsx": "^1.1.1",
"csstype": "^3.0.9",
"hoist-non-react-statics": "^3.3.2",
@@ -18822,21 +18822,21 @@
}
},
"@mui/private-theming": {
- "version": "5.0.1",
- "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.0.1.tgz",
- "integrity": "sha512-R8Cf2+32cG1OXFAqTighA5Mx9R5BQ57cN1ZVaNgfgdbI87Yig2fVMdFSPrw3txcjKlnwsvFJF8AdwQMqq1tJ3Q==",
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.1.0.tgz",
+ "integrity": "sha512-RWzpvwZTNoCUlWFtf7uMDY4QkNL6pI3V2Ac4MZeVzJr3DLluQrt0JjUdsy8CVS7HCTp1YGiyZsJ7H8PfR9jIOw==",
"requires": {
- "@babel/runtime": "^7.15.4",
- "@mui/utils": "^5.0.1",
+ "@babel/runtime": "^7.16.0",
+ "@mui/utils": "^5.1.0",
"prop-types": "^15.7.2"
}
},
"@mui/styled-engine": {
- "version": "5.0.2",
- "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.0.2.tgz",
- "integrity": "sha512-vApnXLj/5V+SbBy+jGFtPgu3tgs0ybSdwWLwXcnUAdNdRyJBffi2KyOP8fhUONLOcZBMU2heNXWz/Zqn5kbDKQ==",
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.1.0.tgz",
+ "integrity": "sha512-Z27hexqYL21z+iVat47n1E/Tj4r83JK6hXaOFj2rYMYz0lJQ6YGLF+c2B3NNJoglL76Vo0w4yKC63FsO+015kw==",
"requires": {
- "@babel/runtime": "^7.15.4",
+ "@babel/runtime": "^7.16.0",
"@emotion/cache": "^11.5.0",
"prop-types": "^15.7.2"
}
@@ -18873,15 +18873,15 @@
}
},
"@mui/system": {
- "version": "5.0.6",
- "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.0.6.tgz",
- "integrity": "sha512-qZdgODiO82/r1bH9KV5bdqqx/q14i32OGUK/bO6phhXM/DX0TmWSUsnPqFX4F7/UKrvBHsGzIb8ohdRuihQD+Q==",
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.1.0.tgz",
+ "integrity": "sha512-1h+YDnPGfTWZkf7lgeNV+vw6altxXGLclXLdxs9GPzEMNYXX7xveUjmndYpO1p/yx7GNG2gLWWkFZ1TYCeo4+Q==",
"requires": {
- "@babel/runtime": "^7.15.4",
- "@mui/private-theming": "^5.0.1",
- "@mui/styled-engine": "^5.0.2",
- "@mui/types": "^7.0.0",
- "@mui/utils": "^5.0.1",
+ "@babel/runtime": "^7.16.0",
+ "@mui/private-theming": "^5.1.0",
+ "@mui/styled-engine": "^5.1.0",
+ "@mui/types": "^7.1.0",
+ "@mui/utils": "^5.1.0",
"clsx": "^1.1.1",
"csstype": "^3.0.9",
"prop-types": "^15.7.2"
@@ -18895,17 +18895,17 @@
}
},
"@mui/types": {
- "version": "7.0.0",
- "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.0.0.tgz",
- "integrity": "sha512-M/tkF2pZ4uoPhZ8pnNhlVnOFtz6F3dnYKIsnj8MuXKT6d26IE2u0UjA8B0275ggN74dR9rlHG5xJt5jgDx/Ung==",
+ "version": "7.1.0",
+ "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.1.0.tgz",
+ "integrity": "sha512-Hh7ALdq/GjfIwLvqH3XftuY3bcKhupktTm+S6qRIDGOtPtRuq2L21VWzOK4p7kblirK0XgGVH5BLwa6u8z/6QQ==",
"requires": {}
},
"@mui/utils": {
- "version": "5.0.1",
- "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.0.1.tgz",
- "integrity": "sha512-GWO104N+o9KG5fKiTEYnAg7kONKEg3vLN+VROAU0f3it6lFGLCVPcQYex/1gJ4QAy96u6Ez8/Hmmhi1+3cX0tQ==",
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.1.0.tgz",
+ "integrity": "sha512-TbAa3DZBGE6xjrVsQ6e0Iw0jwgGZqPg/48aZJJWXJJjU8NU5OhBRutYhrk/kbdDRmsIArHNdpJayBSi7yETYvg==",
"requires": {
- "@babel/runtime": "^7.15.4",
+ "@babel/runtime": "^7.16.0",
"@types/prop-types": "^15.7.4",
"@types/react-is": "^16.7.1 || ^17.0.0",
"prop-types": "^15.7.2",
@@ -18913,14 +18913,14 @@
}
},
"@mui/x-data-grid": {
- "version": "5.0.0-beta.2",
- "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-5.0.0-beta.2.tgz",
- "integrity": "sha512-3pY8i6ABfBH16UhuA4loD66buwPABEmfhBq/JZKUA7BkaqrsDvNv2ceuhAwVWK4KzlKiPNcUtmtJ3d+joWw4Og==",
+ "version": "5.0.0-beta.7",
+ "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-5.0.0-beta.7.tgz",
+ "integrity": "sha512-0h7uJ/1xvXghJwGPRFcPUPB0zNlKpfAqFU2dBdAtUl6DK2ca1cPfd+sLNzApa4yvxjGUxLyNxvcc5xutka0t8A==",
"requires": {
- "@mui/utils": "^5.0.0",
+ "@mui/utils": "^5.0.1",
"clsx": "^1.1.1",
"prop-types": "^15.7.2",
- "reselect": "^4.0.0"
+ "reselect": "^4.1.1"
}
},
"@nodelib/fs.scandir": {
@@ -19031,9 +19031,9 @@
}
},
"@popperjs/core": {
- "version": "2.10.1",
- "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.1.tgz",
- "integrity": "sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw=="
+ "version": "2.10.2",
+ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz",
+ "integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ=="
},
"@protobufjs/aspromise": {
"version": "1.1.2",
@@ -19581,9 +19581,9 @@
}
},
"@types/react-transition-group": {
- "version": "4.4.3",
- "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.3.tgz",
- "integrity": "sha512-fUx5muOWSYP8Bw2BUQ9M9RK9+W1XBK/7FLJ8PTQpnpTEkn0ccyMffyEQvan4C3h53gHdx7KE5Qrxi/LnUGQtdg==",
+ "version": "4.4.4",
+ "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz",
+ "integrity": "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==",
"requires": {
"@types/react": "*"
}
@@ -27858,9 +27858,9 @@
"dev": true
},
"reselect": {
- "version": "4.0.0",
- "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.0.0.tgz",
- "integrity": "sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA=="
+ "version": "4.1.2",
+ "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.2.tgz",
+ "integrity": "sha512-wg60ebcPOtxcptIUfrr7Jt3h4BR86cCW3R7y4qt65lnNb4yz4QgrXcbSioVsIOYguyz42+XTHIyJ5TEruzkFgQ=="
},
"resize-img": {
"version": "1.1.2",
diff --git a/explorer/package.json b/explorer/package.json
index 41d34f7d4b..5d296ce0f6 100644
--- a/explorer/package.json
+++ b/explorer/package.json
@@ -11,7 +11,7 @@
"@mui/material": "^5.0.1",
"@mui/styles": "^5.0.1",
"@mui/system": "^5.0.1",
- "@mui/x-data-grid": "^5.0.0-beta.2",
+ "@mui/x-data-grid": "^5.0.0-beta.5",
"@nymproject/nym-validator-client": "^0.18.0",
"d3-scale": "^4.0.0",
"date-fns": "^2.24.0",
diff --git a/explorer/src/App.tsx b/explorer/src/App.tsx
index c40c9e67d8..a33b49c8ca 100644
--- a/explorer/src/App.tsx
+++ b/explorer/src/App.tsx
@@ -1,9 +1,24 @@
import * as React from 'react';
+import { useMediaQuery } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
import { Nav } from './components/Nav';
+import { MobileNav } from './components/MobileNav';
import { Routes } from './routes/index';
-export const App: React.FC = () => (
-
-);
+export const App: React.FC = () => {
+ const theme = useTheme();
+ const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+
+ if (isMobile) {
+ return (
+
+
+
+ );
+ }
+ return (
+
+ );
+};
diff --git a/explorer/src/components/MobileNav.tsx b/explorer/src/components/MobileNav.tsx
new file mode 100644
index 0000000000..42189d148b
--- /dev/null
+++ b/explorer/src/components/MobileNav.tsx
@@ -0,0 +1,169 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { useTheme } from '@mui/material/styles';
+import MuiLink from '@mui/material/Link';
+import {
+ AppBar,
+ Box,
+ Button,
+ Drawer,
+ IconButton,
+ List,
+ ListItem,
+ ListItemButton,
+ ListItemIcon,
+ Toolbar,
+ Typography,
+} from '@mui/material';
+import { Menu } from '@mui/icons-material';
+import { NymLogoSVG } from 'src/icons/NymLogoSVG';
+import { useMainContext } from 'src/context/main';
+import { MobileDrawerClose } from 'src/icons/MobileDrawerClose';
+import { Footer } from './Footer';
+import { NYM_WEBSITE } from '../api/constants';
+import { ExpandableButton } from './Nav';
+import { DarkLightSwitchMobile } from './Switch';
+
+type MobileNavProps = {
+ children: React.ReactNode;
+};
+
+export const MobileNav: React.FC<{ children: React.ReactNode }> = ({
+ children,
+}: MobileNavProps) => {
+ const theme = useTheme();
+ const { navState, updateNavState } = useMainContext();
+ const [drawerOpen, setDrawerOpen] = React.useState(false);
+
+ const toggleDrawer = () => {
+ setDrawerOpen(!drawerOpen);
+ };
+
+ const handleClick = (id: number) => {
+ updateNavState(id);
+ toggleDrawer();
+ };
+
+ const openDrawer = () => {
+ setDrawerOpen(true);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+ Network Explorer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {navState.map((props) => (
+
+ ))}
+
+
+
+
+
+ {children}
+
+
+
+ );
+};
diff --git a/explorer/src/components/Nav.tsx b/explorer/src/components/Nav.tsx
index a8ebd570e7..0f94a3223e 100644
--- a/explorer/src/components/Nav.tsx
+++ b/explorer/src/components/Nav.tsx
@@ -1,7 +1,6 @@
-/* eslint-disable no-nested-ternary */
import * as React from 'react';
import { Link } from 'react-router-dom';
-import { ChevronLeft, ExpandLess, ExpandMore, Menu } from '@mui/icons-material';
+import { ExpandLess, ExpandMore, Menu } from '@mui/icons-material';
import { CSSObject, styled, Theme, useTheme } from '@mui/material/styles';
import MuiLink from '@mui/material/Link';
import Box from '@mui/material/Box';
@@ -17,13 +16,14 @@ import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import { NymLogoSVG } from 'src/icons/NymLogoSVG';
import { BIG_DIPPER, NYM_WEBSITE } from 'src/api/constants';
-import { useMediaQuery } from '@mui/material';
+import { useMainContext } from 'src/context/main';
+import { MobileDrawerClose } from 'src/icons/MobileDrawerClose';
import { OverviewSVG } from '../icons/OverviewSVG';
import { NetworkComponentsSVG } from '../icons/NetworksSVG';
import { NodemapSVG } from '../icons/NodemapSVG';
import { Socials } from './Socials';
import { Footer } from './Footer';
-import { DarkLightSwitchDesktop, DarkLightSwitchMobile } from './Switch';
+import { DarkLightSwitchDesktop } from './Switch';
const drawerWidth = 300;
@@ -80,7 +80,7 @@ type navOptionType = {
isExpandedChild?: boolean;
};
-const originalNavOptions: navOptionType[] = [
+export const originalNavOptions: navOptionType[] = [
{
id: 0,
isActive: false,
@@ -130,22 +130,28 @@ type ExpandableButtonType = {
nested?: navOptionType[];
isChild?: boolean;
openDrawer: () => void;
- closeDrawer: () => void;
- drawIsOpen: boolean;
+ closeDrawer?: () => void;
+ drawIsTempOpen: boolean;
+ drawIsFixed: boolean;
+ fixDrawerClose?: () => void;
+ isMobile: boolean;
setToActive: (num: number) => void;
};
-const ExpandableButton: React.FC = ({
+export const ExpandableButton: React.FC = ({
id,
url,
setToActive,
isActive,
openDrawer,
closeDrawer,
- drawIsOpen,
+ drawIsTempOpen,
+ drawIsFixed,
+ fixDrawerClose,
Icon,
title,
nested,
+ isMobile,
isChild,
}) => {
const [dynamicStyle, setDynamicStyle] = React.useState({});
@@ -154,11 +160,17 @@ const ExpandableButton: React.FC = ({
const { palette } = useTheme();
const handleClick = () => {
- openDrawer();
+ setToActive(id);
if (title === 'Network Components' && nested) {
+ openDrawer();
toggleNestedOptions(!nestedOptions);
}
- setToActive(id);
+ if (!nested && !drawIsFixed) {
+ closeDrawer?.();
+ }
+ if (!nested && isMobile) {
+ fixDrawerClose?.();
+ }
};
React.useEffect(() => {
@@ -167,29 +179,29 @@ const ExpandableButton: React.FC = ({
}
if (nested) {
setDynamicStyle({
- background: '#242C3D',
+ background: palette.nym.networkExplorer.nav.selected.main,
borderRight: `3px solid ${palette.nym.highlight}`,
});
}
if (isChild) {
setDynamicStyle({
- background: '#3C4558',
+ background: palette.nym.networkExplorer.nav.selected.nested,
fontWeight: 800,
});
}
if (!nested && !isChild) {
setDynamicStyle({
- background: '#242C3D',
+ background: palette.nym.networkExplorer.nav.selected.main,
borderRight: `3px solid ${palette.nym.highlight}`,
});
}
}, [url]);
React.useEffect(() => {
- if (!drawIsOpen && nestedOptions) {
+ if (!drawIsTempOpen && nestedOptions) {
toggleNestedOptions(false);
}
- }, [drawIsOpen]);
+ }, [drawIsTempOpen]);
return (
<>
@@ -199,18 +211,24 @@ const ExpandableButton: React.FC = ({
component={!nested ? Link : 'div'}
to={isExternal ? { pathname: url } : url}
target={isExternal ? '_blank' : ''}
- sx={
- isActive
+ sx={{
+ borderBottom: isChild ? 'none' : '1px solid rgba(255, 255, 255, 0.1)',
+ ...(isActive
? dynamicStyle
- : { background: '#111826', borderRight: 'none' }
- }
+ : {
+ background: palette.nym.networkExplorer.nav.background,
+ borderRight: 'none',
+ }),
+ }}
>
{Icon}
@@ -236,11 +254,13 @@ const ExpandableButton: React.FC = ({
url={each.url}
key={each.title}
title={each.title}
- data-testid={each.title}
openDrawer={openDrawer}
- drawIsOpen={drawIsOpen}
+ drawIsTempOpen={drawIsTempOpen}
closeDrawer={closeDrawer}
setToActive={setToActive}
+ drawIsFixed={drawIsFixed}
+ fixDrawerClose={fixDrawerClose}
+ isMobile={isMobile}
isChild
/>
))}
@@ -253,147 +273,164 @@ ExpandableButton.defaultProps = {
nested: undefined,
isChild: false,
isActive: false,
+ fixDrawerClose: undefined,
+ closeDrawer: undefined,
};
export const Nav: React.FC = ({ children }) => {
- const [navOptionsState, updateNavOptionsState] =
- React.useState(originalNavOptions);
- const [open, setOpen] = React.useState(false);
+ const { updateNavState, navState } = useMainContext();
+ const [drawerIsOpen, setDrawerToOpen] = React.useState(false);
+ const [fixedOpen, setFixedOpen] = React.useState(false);
const theme = useTheme();
- const isMobile = useMediaQuery(theme.breakpoints.down('md'));
const setToActive = (id: number) => {
- const updated = navOptionsState.map((option) => ({
- ...option,
- isActive: option.id === id,
- }));
- updateNavOptionsState(updated);
+ updateNavState(id);
};
- const handleDrawerOpen = () => {
- setOpen(true);
+ const fixDrawerOpen = () => {
+ setFixedOpen(true);
+ setDrawerToOpen(true);
};
- const handleDrawerClose = () => {
- setOpen(false);
+ const fixDrawerClose = () => {
+ setFixedOpen(false);
+ setDrawerToOpen(false);
+ };
+
+ const tempDrawerOpen = () => {
+ if (!fixedOpen) {
+ setDrawerToOpen(true);
+ }
+ };
+
+ const tempDrawerClose = () => {
+ if (!fixedOpen) {
+ setDrawerToOpen(false);
+ }
};
return (
- <>
-
-
+
+
-
+
+
+
+
+
+ Network Explorer
+
+
+
+
-
-
-
-
-
- Network Explorer
-
-
+
+
-
- {!isMobile && (
-
-
-
-
- )}
- {isMobile && }
-
-
-
-
+
+
+
+
-
-
- {open ? : }
-
-
+ {drawerIsOpen ? : }
+
+
-
- {navOptionsState.map((props) => (
-
- ))}
-
-
-
- {children}
-
-
+
+ {navState.map((props) => (
+
+ ))}
+
+
+
+ {children}
+
-
+
);
};
diff --git a/explorer/src/components/Universal-DataGrid.tsx b/explorer/src/components/Universal-DataGrid.tsx
index d9a84d2642..909962899c 100644
--- a/explorer/src/components/Universal-DataGrid.tsx
+++ b/explorer/src/components/Universal-DataGrid.tsx
@@ -3,9 +3,10 @@ import { makeStyles } from '@mui/styles';
import {
DataGrid,
GridColumns,
- GridRowData,
+ GridRowModel,
GridSortModel,
- useGridSlotComponentProps,
+ useGridApiContext,
+ useGridState,
} from '@mui/x-data-grid';
import Pagination from '@mui/material/Pagination';
import { SxProps } from '@mui/system';
@@ -18,7 +19,7 @@ const useStyles = makeStyles({
type DataGridProps = {
loading?: boolean;
- rows: GridRowData[];
+ rows: GridRowModel[];
columnsData: GridColumns;
pageSize?: string;
pagination?: boolean;
@@ -41,7 +42,9 @@ export const cellStyles: SxProps = {
};
function CustomPagination() {
- const { state, apiRef } = useGridSlotComponentProps();
+ const apiRef = useGridApiContext();
+ const [state] = useGridState(apiRef);
+
const classes = useStyles();
return (
diff --git a/explorer/src/context/main.tsx b/explorer/src/context/main.tsx
index fd981906ed..d2dd1fd55f 100644
--- a/explorer/src/context/main.tsx
+++ b/explorer/src/context/main.tsx
@@ -1,5 +1,5 @@
-import { PaletteMode } from '@mui/material';
import * as React from 'react';
+import { PaletteMode } from '@mui/material';
import { MIXNODE_API_ERROR } from 'src/api/constants';
import {
CountryDataResponse,
@@ -15,10 +15,13 @@ import {
UptimeStoryResponse,
} from 'src/typeDefs/explorer-api';
import { Api } from '../api';
+import { navOptionType, originalNavOptions } from './nav';
interface State {
mode: PaletteMode;
toggleMode: () => void;
+ navState: navOptionType[];
+ updateNavState: (id: number) => void;
mixnodes?: ApiState;
fetchMixnodes: () => void;
filterMixnodes: (arg: MixNodeResponse) => void;
@@ -39,9 +42,10 @@ interface State {
uptimeStory?: ApiState;
}
-// TODO: remove the export and replace all uses with `useMainContext()` hook
export const MainContext = React.createContext({
mode: 'dark',
+ updateNavState: () => null,
+ navState: originalNavOptions,
fetchMixnodeById: () => null,
toggleMode: () => undefined,
fetchDelegationsById: () => null,
@@ -63,6 +67,10 @@ export const MainContextProvider: React.FC = ({ children }) => {
// light/dark mode
const [mode, setMode] = React.useState('dark');
+ // nav state
+ const [navState, updateNav] =
+ React.useState(originalNavOptions);
+
// global / banner error messaging
const [globalError, setGlobalError] = React.useState();
@@ -87,7 +95,6 @@ export const MainContextProvider: React.FC = ({ children }) => {
const toggleMode = () => setMode((m) => (m !== 'light' ? 'light' : 'dark'));
- // actions passed down to Overview and Detail pages
const fetchUptimeStoryById = async (id: string) => {
setUptimeStory({
data: uptimeStory?.data,
@@ -105,7 +112,6 @@ export const MainContextProvider: React.FC = ({ children }) => {
});
}
};
-
const fetchDelegationsById = async (id: string) => {
setDelegations({ data: delegations?.data, isLoading: true });
try {
@@ -119,7 +125,6 @@ export const MainContextProvider: React.FC = ({ children }) => {
});
}
};
-
const fetchStatusById = async (id: string) => {
setStatus({ data: status?.data, isLoading: true, error: status?.error });
try {
@@ -132,7 +137,6 @@ export const MainContextProvider: React.FC = ({ children }) => {
});
}
};
-
const fetchStatsById = async (id: string) => {
setStats({ data: stats?.data, isLoading: true, error: stats?.error });
try {
@@ -145,7 +149,6 @@ export const MainContextProvider: React.FC = ({ children }) => {
});
}
};
-
const fetchMixnodeById = async (id: string) => {
setMixnodeDetailInfo({ data: mixnodeDetailInfo?.data, isLoading: true });
@@ -214,7 +217,6 @@ export const MainContextProvider: React.FC = ({ children }) => {
});
}
};
-
const fetchValidators = async () => {
try {
const data = await Api.fetchValidators();
@@ -227,7 +229,6 @@ export const MainContextProvider: React.FC = ({ children }) => {
});
}
};
-
const fetchBlock = async () => {
try {
const data = await Api.fetchBlock();
@@ -239,7 +240,6 @@ export const MainContextProvider: React.FC = ({ children }) => {
});
}
};
-
const fetchCountryData = async () => {
setCountryData({ data: undefined, isLoading: true });
try {
@@ -253,7 +253,13 @@ export const MainContextProvider: React.FC = ({ children }) => {
});
}
};
-
+ const updateNavState = (id: number) => {
+ const updated = navState.map((option) => ({
+ ...option,
+ isActive: option.id === id,
+ }));
+ updateNav(updated);
+ };
React.useEffect(() => {
Promise.all([
fetchMixnodes(),
@@ -268,6 +274,8 @@ export const MainContextProvider: React.FC = ({ children }) => {
,
+ },
+ {
+ id: 1,
+ isActive: false,
+ url: '/network-components',
+ title: 'Network Components',
+ Icon: ,
+ nested: [
+ {
+ id: 3,
+ url: '/network-components/mixnodes',
+ title: 'Mixnodes',
+ },
+ {
+ id: 4,
+ url: '/network-components/gateways',
+ title: 'Gateways',
+ },
+ {
+ id: 5,
+ url: `${BIG_DIPPER}/validators`,
+ title: 'Validators',
+ },
+ ],
+ },
+ {
+ id: 2,
+ isActive: false,
+ url: '/nodemap',
+ title: 'Nodemap',
+ Icon: ,
+ },
+];
diff --git a/explorer/src/icons/MobileDrawerClose.tsx b/explorer/src/icons/MobileDrawerClose.tsx
new file mode 100644
index 0000000000..d312fe6e12
--- /dev/null
+++ b/explorer/src/icons/MobileDrawerClose.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+export const MobileDrawerClose: React.FC = (props) => (
+
+);
diff --git a/explorer/src/styles.css b/explorer/src/styles.css
index a73cf97d00..38f4b9de4a 100644
--- a/explorer/src/styles.css
+++ b/explorer/src/styles.css
@@ -26,8 +26,9 @@ div div.MuiDataGrid-root .MuiDataGrid-columnHeaderTitleContainer {
padding-left: 0;
}
-/* Unable to style nested MUI paper within the Drawer
-so styling manually here */
-div.MuiDrawer-root > .MuiDrawer-paperAnchorLeft {
- background-color: #111826;
+@media screen and (max-width: 900px) {
+ .MuiDrawer-paperAnchorLeft {
+ min-width: 100vw;
+ margin-top: 58px;
+ }
}
\ No newline at end of file
diff --git a/explorer/src/theme/mui-theme.d.ts b/explorer/src/theme/mui-theme.d.ts
index 884111b14c..75dba00907 100644
--- a/explorer/src/theme/mui-theme.d.ts
+++ b/explorer/src/theme/mui-theme.d.ts
@@ -73,6 +73,7 @@ declare module '@mui/material/styles' {
topNav: {
background: string;
socialIcons: string;
+ appBar: string;
};
nav: {
selected: {
diff --git a/explorer/src/theme/theme.ts b/explorer/src/theme/theme.ts
index b72722ad28..75556b4275 100644
--- a/explorer/src/theme/theme.ts
+++ b/explorer/src/theme/theme.ts
@@ -94,6 +94,7 @@ const networkExplorerPalette = (
},
topNav: {
...variant.topNav,
+ appBar: '#070B15',
socialIcons: '#F2F2F2',
},
footer: {