Add a Mobile Nav to the Network Explorer (#895)
* desktop onMouseEnter and leave handlers added * clicking nav option closes drawer * All AC met * removed dead bool * added hamburger to AppBar for mobile users small refactor * nuts and bolts working needs a lot of tidying though * Functionally complete. * change hardcode colors to theming * UI theme and border changes * bug fix removed collapse nav flicker * dead code * resetting drawer to closed onload * removal of hardcoded color * made null functions into optional props * Nested sx styling not global * paperprops now working * fixed breaking changes for DataGrid * linting fix * linting fix Co-authored-by: Aid Thompson <adrian@nymtech.net>
This commit is contained in:
Aid19801
Generated
+116
-116
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
+20
-5
@@ -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 = () => (
|
||||
<Nav>
|
||||
<Routes />
|
||||
</Nav>
|
||||
);
|
||||
export const App: React.FC = () => {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<MobileNav>
|
||||
<Routes />
|
||||
</MobileNav>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Nav>
|
||||
<Routes />
|
||||
</Nav>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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 (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<AppBar
|
||||
sx={{
|
||||
background: theme.palette.nym.networkExplorer.topNav.appBar,
|
||||
}}
|
||||
>
|
||||
<Toolbar
|
||||
disableGutters
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
width: 'auto',
|
||||
}}
|
||||
>
|
||||
<IconButton component="a" href={NYM_WEBSITE} target="_blank">
|
||||
<NymLogoSVG />
|
||||
</IconButton>
|
||||
<Typography
|
||||
variant="h6"
|
||||
noWrap
|
||||
sx={{
|
||||
color: theme.palette.nym.networkExplorer.nav.text,
|
||||
fontSize: '18px',
|
||||
fontWeight: 800,
|
||||
ml: 2,
|
||||
}}
|
||||
>
|
||||
<MuiLink
|
||||
component={Link}
|
||||
to="/overview"
|
||||
underline="none"
|
||||
color="inherit"
|
||||
>
|
||||
Network Explorer
|
||||
</MuiLink>
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<DarkLightSwitchMobile />
|
||||
<Button onClick={toggleDrawer}>
|
||||
<Menu sx={{ color: theme.palette.primary.contrastText }} />
|
||||
</Button>
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<Drawer
|
||||
anchor="left"
|
||||
open={drawerOpen}
|
||||
onClose={toggleDrawer}
|
||||
PaperProps={{
|
||||
style: {
|
||||
background: theme.palette.nym.networkExplorer.nav.background,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box role="presentation">
|
||||
<List sx={{ pt: 0, pb: 0 }}>
|
||||
<ListItem
|
||||
disablePadding
|
||||
disableGutters
|
||||
sx={{
|
||||
height: 64,
|
||||
background: theme.palette.nym.networkExplorer.nav.background,
|
||||
borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
|
||||
}}
|
||||
>
|
||||
<ListItemButton
|
||||
onClick={toggleDrawer}
|
||||
sx={{
|
||||
pt: 2,
|
||||
pb: 2,
|
||||
background: theme.palette.nym.networkExplorer.nav.background,
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-start',
|
||||
}}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<MobileDrawerClose />
|
||||
</ListItemIcon>
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
{navState.map((props) => (
|
||||
<ExpandableButton
|
||||
key={props.url}
|
||||
id={props.id}
|
||||
title={props.title}
|
||||
openDrawer={openDrawer}
|
||||
url={props.url}
|
||||
drawIsTempOpen={drawerOpen === true}
|
||||
drawIsFixed={false}
|
||||
Icon={props.Icon}
|
||||
setToActive={handleClick}
|
||||
nested={props.nested}
|
||||
isMobile
|
||||
isActive={props.isActive}
|
||||
/>
|
||||
))}
|
||||
</List>
|
||||
</Box>
|
||||
</Drawer>
|
||||
|
||||
<Box sx={{ width: '100%', p: 4, mt: 7 }}>
|
||||
{children}
|
||||
<Footer />
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
+165
-128
@@ -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<ExpandableButtonType> = ({
|
||||
export const ExpandableButton: React.FC<ExpandableButtonType> = ({
|
||||
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<ExpandableButtonType> = ({
|
||||
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<ExpandableButtonType> = ({
|
||||
}
|
||||
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<ExpandableButtonType> = ({
|
||||
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',
|
||||
}),
|
||||
}}
|
||||
>
|
||||
<ListItemButton
|
||||
onClick={handleClick}
|
||||
sx={{
|
||||
pt: 2,
|
||||
pb: 2,
|
||||
background: isChild ? '#3C4558' : 'none',
|
||||
background: isChild
|
||||
? palette.nym.networkExplorer.nav.selected.nested
|
||||
: 'none',
|
||||
}}
|
||||
>
|
||||
<ListItemIcon>{Icon}</ListItemIcon>
|
||||
@@ -236,11 +254,13 @@ const ExpandableButton: React.FC<ExpandableButtonType> = ({
|
||||
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 (
|
||||
<>
|
||||
<Box sx={{ display: 'flex' }}>
|
||||
<AppBar
|
||||
<Box sx={{ display: 'flex' }}>
|
||||
<AppBar
|
||||
sx={{
|
||||
background: theme.palette.nym.networkExplorer.topNav.appBar,
|
||||
}}
|
||||
>
|
||||
<Toolbar
|
||||
disableGutters
|
||||
sx={{
|
||||
background: theme.palette.nym.networkExplorer.nav.background,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<Toolbar
|
||||
disableGutters
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
width: 205,
|
||||
ml: 0.5,
|
||||
}}
|
||||
>
|
||||
<IconButton component="a" href={NYM_WEBSITE} target="_blank">
|
||||
<NymLogoSVG />
|
||||
</IconButton>
|
||||
<Typography
|
||||
variant="h6"
|
||||
noWrap
|
||||
sx={{
|
||||
color: theme.palette.nym.networkExplorer.nav.text,
|
||||
fontSize: '18px',
|
||||
fontWeight: 800,
|
||||
}}
|
||||
>
|
||||
<MuiLink
|
||||
component={Link}
|
||||
to="/overview"
|
||||
underline="none"
|
||||
color="inherit"
|
||||
>
|
||||
Network Explorer
|
||||
</MuiLink>
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mr: 2,
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
width: 'auto',
|
||||
pr: 0,
|
||||
pl: 2,
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
width: 205,
|
||||
}}
|
||||
>
|
||||
<IconButton component="a" href={NYM_WEBSITE} target="_blank">
|
||||
<NymLogoSVG />
|
||||
</IconButton>
|
||||
<Typography
|
||||
variant="h6"
|
||||
noWrap
|
||||
sx={{
|
||||
color: theme.palette.nym.networkExplorer.nav.text,
|
||||
fontSize: '18px',
|
||||
}}
|
||||
>
|
||||
<MuiLink
|
||||
component={Link}
|
||||
to="/overview"
|
||||
underline="none"
|
||||
color="inherit"
|
||||
>
|
||||
Network Explorer
|
||||
</MuiLink>
|
||||
</Typography>
|
||||
<Socials />
|
||||
<DarkLightSwitchDesktop defaultChecked />
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mr: 2,
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
}}
|
||||
>
|
||||
{!isMobile && (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
width: 'auto',
|
||||
pr: 0,
|
||||
pl: 2,
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Socials />
|
||||
<DarkLightSwitchDesktop defaultChecked />
|
||||
</Box>
|
||||
)}
|
||||
{isMobile && <DarkLightSwitchMobile />}
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<Drawer
|
||||
variant="permanent"
|
||||
open={open}
|
||||
sx={{
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<Drawer
|
||||
variant="permanent"
|
||||
open={drawerIsOpen}
|
||||
PaperProps={{
|
||||
style: {
|
||||
background: theme.palette.nym.networkExplorer.nav.background,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<DrawerHeader
|
||||
sx={{
|
||||
borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
|
||||
justifyContent: 'flex-start',
|
||||
paddingLeft: 0,
|
||||
}}
|
||||
>
|
||||
<DrawerHeader
|
||||
<IconButton
|
||||
onClick={drawerIsOpen ? fixDrawerClose : fixDrawerOpen}
|
||||
sx={{
|
||||
justifyContent: open ? 'flex-end' : 'center',
|
||||
paddingLeft: 0,
|
||||
padding: 1,
|
||||
ml: 1,
|
||||
color: theme.palette.nym.networkExplorer.nav.text,
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
onClick={open ? handleDrawerClose : handleDrawerOpen}
|
||||
sx={{
|
||||
padding: 0,
|
||||
ml: '7px',
|
||||
color: theme.palette.nym.networkExplorer.nav.text,
|
||||
}}
|
||||
data-testid="menu-buttons"
|
||||
>
|
||||
{open ? <ChevronLeft /> : <Menu />}
|
||||
</IconButton>
|
||||
</DrawerHeader>
|
||||
{drawerIsOpen ? <MobileDrawerClose /> : <Menu />}
|
||||
</IconButton>
|
||||
</DrawerHeader>
|
||||
|
||||
<List sx={{ pt: 0, pb: 0 }}>
|
||||
{navOptionsState.map((props) => (
|
||||
<ExpandableButton
|
||||
setToActive={setToActive}
|
||||
key={props.url}
|
||||
openDrawer={handleDrawerOpen}
|
||||
drawIsOpen={open}
|
||||
closeDrawer={handleDrawerClose}
|
||||
{...props}
|
||||
/>
|
||||
))}
|
||||
</List>
|
||||
</Drawer>
|
||||
<Box sx={{ width: '100%', p: 4, mt: 7 }}>
|
||||
{children}
|
||||
<Footer />
|
||||
</Box>
|
||||
<List
|
||||
sx={{ pt: 0, pb: 0 }}
|
||||
onMouseEnter={tempDrawerOpen}
|
||||
onMouseLeave={tempDrawerClose}
|
||||
>
|
||||
{navState.map((props) => (
|
||||
<ExpandableButton
|
||||
key={props.url}
|
||||
closeDrawer={tempDrawerClose}
|
||||
drawIsTempOpen={drawerIsOpen}
|
||||
drawIsFixed={fixedOpen}
|
||||
fixDrawerClose={fixDrawerClose}
|
||||
openDrawer={tempDrawerOpen}
|
||||
setToActive={setToActive}
|
||||
isMobile={false}
|
||||
{...props}
|
||||
/>
|
||||
))}
|
||||
</List>
|
||||
</Drawer>
|
||||
<Box sx={{ width: '100%', p: 4, mt: 7 }}>
|
||||
{children}
|
||||
<Footer />
|
||||
</Box>
|
||||
</>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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 (
|
||||
|
||||
@@ -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<MixNodeResponse>;
|
||||
fetchMixnodes: () => void;
|
||||
filterMixnodes: (arg: MixNodeResponse) => void;
|
||||
@@ -39,9 +42,10 @@ interface State {
|
||||
uptimeStory?: ApiState<UptimeStoryResponse>;
|
||||
}
|
||||
|
||||
// TODO: remove the export and replace all uses with `useMainContext()` hook
|
||||
export const MainContext = React.createContext<State>({
|
||||
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<PaletteMode>('dark');
|
||||
|
||||
// nav state
|
||||
const [navState, updateNav] =
|
||||
React.useState<navOptionType[]>(originalNavOptions);
|
||||
|
||||
// global / banner error messaging
|
||||
const [globalError, setGlobalError] = React.useState<string>();
|
||||
|
||||
@@ -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 }) => {
|
||||
<MainContext.Provider
|
||||
value={{
|
||||
mode,
|
||||
updateNavState,
|
||||
navState,
|
||||
toggleMode,
|
||||
mixnodes,
|
||||
filterMixnodes,
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
import * as React from 'react';
|
||||
import { BIG_DIPPER } from 'src/api/constants';
|
||||
import { OverviewSVG } from '../icons/OverviewSVG';
|
||||
import { NodemapSVG } from '../icons/NodemapSVG';
|
||||
import { NetworkComponentsSVG } from '../icons/NetworksSVG';
|
||||
|
||||
export type navOptionType = {
|
||||
id: number;
|
||||
isActive?: boolean;
|
||||
url: string;
|
||||
title: string;
|
||||
Icon?: React.ReactNode;
|
||||
nested?: navOptionType[];
|
||||
isExpandedChild?: boolean;
|
||||
};
|
||||
|
||||
export const originalNavOptions: navOptionType[] = [
|
||||
{
|
||||
id: 0,
|
||||
isActive: false,
|
||||
url: '/overview',
|
||||
title: 'Overview',
|
||||
Icon: <OverviewSVG />,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
isActive: false,
|
||||
url: '/network-components',
|
||||
title: 'Network Components',
|
||||
Icon: <NetworkComponentsSVG />,
|
||||
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: <NodemapSVG />,
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,16 @@
|
||||
import * as React from 'react';
|
||||
|
||||
export const MobileDrawerClose: React.FC = (props) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="-3 -5 24 24"
|
||||
width="25"
|
||||
height="25"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M0 12H13V10H0V12ZM0 7H10V5H0V7ZM0 0V2H13V0H0ZM18 9.59L14.42 6L18 2.41L16.59 1L11.59 6L16.59 11L18 9.59Z"
|
||||
fill="#F2F2F2"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Vendored
+1
@@ -73,6 +73,7 @@ declare module '@mui/material/styles' {
|
||||
topNav: {
|
||||
background: string;
|
||||
socialIcons: string;
|
||||
appBar: string;
|
||||
};
|
||||
nav: {
|
||||
selected: {
|
||||
|
||||
@@ -94,6 +94,7 @@ const networkExplorerPalette = (
|
||||
},
|
||||
topNav: {
|
||||
...variant.topNav,
|
||||
appBar: '#070B15',
|
||||
socialIcons: '#F2F2F2',
|
||||
},
|
||||
footer: {
|
||||
|
||||
Reference in New Issue
Block a user