Added transactions support

dfinityexplorer · May 31, 2021 · a350bb8 · a350bb8
1 parent 7954263
commit a350bb8
Show file tree

Hide file tree

Showing 19 changed files with 2,253 additions and 7 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "pwa-chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:8080",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -7,11 +7,17 @@
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
     "@types/d3": "^5.16.4",
+    "@types/javascript-time-ago": "^2.0.2",
+    "@types/json-bigint": "^1.0.0",
     "@types/pixi.js": "^4.8.9",
+    "@types/react-router-dom": "^5.1.7",
+    "@types/styled-components": "^5.1.9",
     "@types/throttle-debounce": "^1.1.1",
     "axios": "^0.21.1",
     "d3": "^5.16.0",
     "fg-loadcss": "^2.1.0",
+    "javascript-time-ago": "^2.3.6",
+    "json-bigint": "^1.0.0",
     "konva": "^7.2.5",
     "pixi-filters": "^2.7.1",
     "pixi.js": "^4.8.9",
@@ -29,7 +35,8 @@
     "react-twitter-embed": "^3.0.3",
     "recharts": "^2.0.9",
     "styled-components": "^5.2.3",
-    "throttle-debounce": "^3.0.1"
+    "throttle-debounce": "^3.0.1",
+    "typescript": "^4.2.4"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/web/src/App.js b/web/src/App.js
@@ -19,6 +19,8 @@ import { duration, easing } from '@material-ui/core/styles/transitions';
 import { GlobalStyle, themeLight, themeDark } from './theme/globalStyle';
 import HomePage from './Components/HomePage/HomePage';
 import DataCentersPage from './Components/DataCentersPage/DataCentersPage';
+import TransactionPage from './Components/TransactionPage/TransactionPage';
+import TransactionsPage from './Components/TransactionsPage/TransactionsPage';
 import AboutPage from './Components/AboutPage/AboutPage';
 import DEAppBar from './Components/DEAppBar/DEAppBar';
 import Footer from './Components/Footer/Footer';
@@ -215,6 +217,15 @@ class App extends Component {
                       />
                     }
                   />
+                  <Route
+                    exact path='/txs'
+                    render={(props) => 
+                      <TransactionsPage
+                        {...props}
+                        breakpoint={breakpoint}
+                      />
+                    }
+                  />
                   <Route
                     exact path='/about'
                     render={(props) => 
@@ -226,6 +237,15 @@ class App extends Component {
                       />
                     }
                   />
+                  <Route
+                    exact path="/tx/:hash"
+                    render={(props) => 
+                      <TransactionPage
+                        {...props}
+                        breakpoint={breakpoint}
+                      />
+                    }
+                  />
                   <FooterDiv
                     breakpoint={breakpoint}
                     isDesktopDrawerOpen={isDesktopDrawerOpen}

diff --git a/web/src/Components/DEAppBar/DEAppBar.js b/web/src/Components/DEAppBar/DEAppBar.js
@@ -138,6 +138,69 @@ const TypographyExplorer = styled(TypographyAppName)`
   }
 `;
 
+/* Rebranding Experimental - KEEP
+// Internet Computer | Explorer
+const TypographyDfinity = styled(TypographyAppName)`
+  && {
+    margin-left: 20px;
+    margin-right: 7px;
+    letter-spacing: 3px;
+    color: ${props => props.theme.colorAppBarDfinityText};
+    ${({ breakpoint }) =>
+      breakpoint === Breakpoints.XS && `
+        margin-left: 8.4px;
+        letter-spacing: 3px;
+      `
+    }
+  }
+`;
+
+const TypographyExplorer = styled(TypographyAppName)`
+ && {
+   margin-left: 10px;
+   letter-spacing: 3px;
+   color: ${props => props.theme.colorAppBarExplorerText};
+   ${({ breakpoint }) =>
+     breakpoint === Breakpoints.XS && `
+       margin-left: 9.8px;
+       letter-spacing: 3px;
+     `
+   }
+ }
+`;
+
+// INTERNET COMPUTER | EXPLORER
+const TypographyDfinity = styled(TypographyAppName)`
+  && {
+    margin-left: 12px;
+    margin-right: 8px;
+    //letter-spacing: 1px;
+    color: ${props => props.theme.colorAppBarDfinityText};
+    ${({ breakpoint }) =>
+      breakpoint === Breakpoints.XS && `
+        margin-left: 8.4px;
+        letter-spacing: 8.4px;
+      `
+    }
+  }
+`;
+
+const TypographyExplorer = styled(TypographyAppName)`
+ && {
+   margin-left: 10px;
+   //letter-spacing: 1px;
+   color: ${props => props.theme.colorAppBarExplorerText};
+   ${({ breakpoint }) =>
+     breakpoint === Breakpoints.XS && `
+       margin-left: 9.8px;
+       letter-spacing: 5.25px;
+     `
+   }
+ }
+`;
+
+*/
+
 const StyledIconButton = styled(IconButton)`
   && {
     color: ${props => props.theme.colorAppBarTextButton};
@@ -521,7 +584,15 @@ class DEAppBar extends ResponsiveComponent {
               </DrawerSvgIcon>
             </DrawerListItemIcon>
             <DrawerListItemText primary='Data Centers' />
-          </DrawerListItem>            
+          </DrawerListItem>
+          <DrawerListItem button component={Link} to='/txs' selected={this.isActiveRoute('/txs')}>
+            <DrawerListItemIcon>
+              <SvgIcon>
+                <path d={Constants.ICON_SVG_PATH_MPS} />
+              </SvgIcon>
+            </DrawerListItemIcon>
+            <DrawerListItemText primary='Transactions' />
+          </DrawerListItem>
           <StyledDivider />
           <DrawerListItem button component={Link} to='/about' selected={this.isActiveRoute('/about')}>
             <DrawerListItemIcon>

diff --git a/web/src/Components/Footer/Footer.js b/web/src/Components/Footer/Footer.js
@@ -260,11 +260,11 @@ class Footer extends ResponsiveComponent {
     const breakpoint = getBreakpoint();
     switch (breakpoint) {
       case Breakpoints.XS:
-        return '© 2021 dfinityexplorer';
+        return '© 2021 IC Explorer';
       case Breakpoints.SM:
-        return '© 2021 dfinityexplorer contributors';
+        return '© 2021 Internet Computer Explorer';
       default:
-        return '© 2021 dfinityexplorer contributors | All rights reserved';
+        return '© 2021 Internet Computer Explorer | All rights reserved';
     }
   }