From 6be39c750b85af368a7a3a33d01c33303b0f85df Mon Sep 17 00:00:00 2001 From: Timezone-design Date: Fri, 22 Oct 2021 23:25:49 +0900 Subject: [PATCH 01/10] first commit --- src/App.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/App.tsx b/src/App.tsx index d5b1242..771f3a0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,6 +7,7 @@ import { Navbar } from "components/Navbar"; import { ClusterStatusBanner } from "components/ClusterStatusButton"; import { SearchBar } from "components/SearchBar"; + import { AccountDetailsPage } from "pages/AccountDetailsPage"; import { TransactionInspectorPage } from "pages/inspector/InspectorPage"; import { ClusterStatsPage } from "pages/ClusterStatsPage"; From 92c5b2570225adad7ff0d441d5d8d0493cc63135 Mon Sep 17 00:00:00 2001 From: Timezone-design Date: Fri, 29 Oct 2021 09:26:56 +0900 Subject: [PATCH 02/10] sidebar color --- .gitignore | 3 + .idea/.gitignore | 8 + .idea/misc.xml | 6 + .idea/modules.xml | 8 + .idea/native-explorer.iml | 9 + .idea/runConfigurations.xml | 10 + .idea/vcs.xml | 6 + package-lock.json | 25 ++- package.json | 1 + src/App.tsx | 152 ++++++++------- src/components/ClusterStatusButton.tsx | 6 +- src/components/Navbar.tsx | 83 +++----- src/components/SearchBar.tsx | 2 +- src/components/Sidebar.tsx | 38 ++++ src/img/logos-solana/dark-explorer-logo.svg | 2 +- src/img/staking-card/price-dark.png | Bin 0 -> 889 bytes src/img/staking-card/price-graph.png | Bin 0 -> 543 bytes src/img/staking-card/stake-dark.png | Bin 0 -> 1119 bytes src/img/staking-card/stake-graph.png | Bin 0 -> 634 bytes src/img/staking-card/supply-dark.png | Bin 0 -> 1917 bytes src/img/staking-card/supply-graph.png | Bin 0 -> 609 bytes src/pages/ClusterStatsPage.tsx | 204 ++++++++++++-------- src/scss/_solana-dark-overrides.scss | 4 +- src/scss/_solana-variables-dark.scss | 7 +- src/scss/_solana-variables.scss | 10 +- src/scss/_solana.scss | 17 +- src/scss/dashkit/_card.scss | 4 +- src/scss/dashkit/_dashkit.scss | 1 + src/scss/dashkit/_navbar.scss | 11 +- src/scss/dashkit/_sidebar.scss | 35 ++++ src/scss/dashkit/_variables.scss | 2 +- 31 files changed, 424 insertions(+), 230 deletions(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/native-explorer.iml create mode 100644 .idea/runConfigurations.xml create mode 100644 .idea/vcs.xml create mode 100644 src/components/Sidebar.tsx create mode 100644 src/img/staking-card/price-dark.png create mode 100644 src/img/staking-card/price-graph.png create mode 100644 src/img/staking-card/stake-dark.png create mode 100644 src/img/staking-card/stake-graph.png create mode 100644 src/img/staking-card/supply-dark.png create mode 100644 src/img/staking-card/supply-graph.png create mode 100644 src/scss/dashkit/_sidebar.scss diff --git a/.gitignore b/.gitignore index df50e4b..269fe10 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,6 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +#design +/design \ No newline at end of file diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..73f69e0 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..639900d --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..c743aa4 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/native-explorer.iml b/.idea/native-explorer.iml new file mode 100644 index 0000000..d6ebd48 --- /dev/null +++ b/.idea/native-explorer.iml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/.idea/runConfigurations.xml b/.idea/runConfigurations.xml new file mode 100644 index 0000000..797acea --- /dev/null +++ b/.idea/runConfigurations.xml @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 7f2e912..8936bac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -52,6 +52,7 @@ "react-router-dom": "^5.2.1", "react-scripts": "^4.0.3", "react-select": "^4.3.1", + "react-switch": "^6.0.0", "superstruct": "^0.15.2", "typescript": "^4.4.2" } @@ -1743,7 +1744,7 @@ }, "node_modules/@blockworks-foundation/mango-client/node_modules/borsh": { "version": "0.3.1", - "resolved": "git+https://github.com/defactojob/borsh-js.git#33a0d24af281112c0a48efb3fa503f3212443de9", + "resolved": "git+ssh://git@github.com/defactojob/borsh-js.git#33a0d24af281112c0a48efb3fa503f3212443de9", "integrity": "sha512-+lHB+uOyMqSmP7QACL5UgCFxBy2D2UkQhO1m5n/3MHV5jdj0SjLCuQnJW9ogP1WwO4zDzdz4wT5r/HZMNpnaoA==", "license": "Apache-2.0", "dependencies": { @@ -21358,6 +21359,18 @@ "react-dom": "^16.8.0 || ^17.0.0" } }, + "node_modules/react-switch": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/react-switch/-/react-switch-6.0.0.tgz", + "integrity": "sha512-QV3/6eRK5/5epdQzIqvDAHRoGLbCv/wDpHUi6yBMXY1Xco5XGuIZxvB49PHoV1v/SpEgOCJLD/Zo43iic+aEIw==", + "dependencies": { + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "^15.3.0 || ^16.0.0 || ^17.0.0", + "react-dom": "^15.3.0 || ^16.0.0 || ^17.0.0" + } + }, "node_modules/react-transition-group": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz", @@ -28091,7 +28104,7 @@ "integrity": "sha512-1vObw81a8ylZO5ePrtMay0n018TcftpTA5HFKDaSuiUDBo8biRBtjIobw60OpwuvrGk+FsxKamqN4cnmj/eXdg==" }, "borsh": { - "version": "git+https://github.com/defactojob/borsh-js.git#33a0d24af281112c0a48efb3fa503f3212443de9", + "version": "git+ssh://git@github.com/defactojob/borsh-js.git#33a0d24af281112c0a48efb3fa503f3212443de9", "integrity": "sha512-+lHB+uOyMqSmP7QACL5UgCFxBy2D2UkQhO1m5n/3MHV5jdj0SjLCuQnJW9ogP1WwO4zDzdz4wT5r/HZMNpnaoA==", "from": "borsh@git+https://github.com/defactojob/borsh-js.git#field-mapper", "requires": { @@ -43291,6 +43304,14 @@ "react-transition-group": "^4.3.0" } }, + "react-switch": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/react-switch/-/react-switch-6.0.0.tgz", + "integrity": "sha512-QV3/6eRK5/5epdQzIqvDAHRoGLbCv/wDpHUi6yBMXY1Xco5XGuIZxvB49PHoV1v/SpEgOCJLD/Zo43iic+aEIw==", + "requires": { + "prop-types": "^15.7.2" + } + }, "react-transition-group": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz", diff --git a/package.json b/package.json index 1f8836c..b225f54 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "react-router-dom": "^5.2.1", "react-scripts": "^4.0.3", "react-select": "^4.3.1", + "react-switch": "^6.0.0", "superstruct": "^0.15.2", "typescript": "^4.4.2" }, diff --git a/src/App.tsx b/src/App.tsx index 771f3a0..86240ea 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,6 +4,7 @@ import { Switch, Route, Redirect } from "react-router-dom"; import { ClusterModal } from "components/ClusterModal"; import { MessageBanner } from "components/MessageBanner"; import { Navbar } from "components/Navbar"; +import { Sidebar } from "./components/Sidebar"; import { ClusterStatusBanner } from "components/ClusterStatusButton"; import { SearchBar } from "components/SearchBar"; @@ -20,81 +21,88 @@ const TX_ALIASES = ["txs", "txn", "txns", "transaction", "transactions"]; function App() { return ( - <> +
-
- - - - - - - - - `/${tx}/:signature`)} - render={({ match, location }) => { - let pathname = `/tx/${match.params.signature}`; - return ; - }} - /> - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> - `/${path}/:address`), - ...ADDRESS_ALIASES.map((path) => `/${path}/:address/:tab`), - ]} - render={({ match, location }) => { - let pathname = `/address/${match.params.address}`; - if (match.params.tab) { - pathname += `/${match.params.tab}`; - } - return ; - }} - /> - ( - + +
+ + + {/**/} +
+ +
+
+ + + + + `/${tx}/:signature`)} + render={({ match, location }) => { + let pathname = `/tx/${match.params.signature}`; + return ; + }} /> - )} - /> - - - - ( - - )} - /> - + ( + + )} + /> + ( + + )} + /> + ( + + )} + /> + `/${path}/:address`), + ...ADDRESS_ALIASES.map((path) => `/${path}/:address/:tab`), + ]} + render={({ match, location }) => { + let pathname = `/address/${match.params.address}`; + if (match.params.tab) { + pathname += `/${match.params.tab}`; + } + return ; + }} + /> + ( + + )} + /> + + + + ( + + )} + /> + +
+
- +
); } diff --git a/src/components/ClusterStatusButton.tsx b/src/components/ClusterStatusButton.tsx index dd42c9d..0337ef0 100644 --- a/src/components/ClusterStatusButton.tsx +++ b/src/components/ClusterStatusButton.tsx @@ -42,7 +42,7 @@ function Button() { case ClusterStatus.Connected: return ( - + {statusName} ); @@ -54,7 +54,7 @@ function Button() { className={spinnerClasses} role="status" aria-hidden="true" - > + /> {statusName} ); @@ -62,7 +62,7 @@ function Button() { case ClusterStatus.Failure: return ( - + {statusName} ); diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 843373a..3defa94 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,67 +1,36 @@ import React from "react"; -import Logo from "img/logos-solana/dark-explorer-logo.svg"; -import { clusterPath } from "utils/url"; -import { Link, NavLink } from "react-router-dom"; +import Switch from 'react-switch'; import { ClusterStatusButton } from "components/ClusterStatusButton"; +import {SearchBar} from "./SearchBar"; + export function Navbar() { // TODO: use `collapsing` to animate collapsible navbar - const [collapse, setCollapse] = React.useState(false); - - return ( -