Fixed UI issues from Andres (#110)

* add staging deployment to ci * Fix transaction UI issues. * Updated Difficulty, Hashrate, PslPrice, TransactionFee * Fixed yarn build issues. * fix-ci: build it in circle ci * fix-ci: cleanup * fix typo * use new context for staging build * fix typo * fix context issue on staging build * do it right man :) * update front end with fixing UI * add hassh rate and transaction fee * fix prettier issue * filter, theme update * Fix style issue * fix style issues * fix style issue of theme * fix mempool size chart * fix theme style issues * sort table * missing collapsesection * Fix and update CollapseSection * Update filter part * update filter part * Fixed Scrollbar style * filter table - add filter movement and transactions tables * filter - close after select time * Change color twitter, telegram, github icon to white * no message * Add border for boxed on explorer * Update Color of Sidebar * change color of button * Fixed UI issues * movement - fix add depend change date * Fixed icon color and background * Fixed table issue, block issue, new chart * Fixed style issues * adding space on boxes * Change "NonStandard TX" to "Shielded Transaction" * update * transaction - fix block confirmed number * volume of transactions - update list volume of transactions * historical statistics - fix the transaction fee chart * transaction count - add the transaction count chart and update the transaction fee * historical statistics - add the total transaction count chart * Fix responsive issue * add missing images. * charts - responsive mobile and refactor, clean code * charts - fix responsive axis * Fix issue from PR * fix mobile response, add the go back button and create layout, get realtime sumary stats, fix get data with socket listen, fix offset value, set default period chart, fix search, sidebar and chart * explorer - add transactions live * explorer - hide lastest block section * lastest block - feat add leatest blocks realtime and setup redux thunk for blocks * cherry-pick CI commit from master, resolve ci failure * transaction - change name file and variables, transactions - add trasaction realtime and fix ui * add transactions link * updated path. * Fixed CircleCI/CD * fix(view): chart ui - fix responsive chart ui * fix(setup): lint - end of line * fix(view): block chart - fix title * fix(view): historical statistics - remove back icon * fix(setup): redux thunk - update type for selector Co-authored-by: crazyoptimist <[email protected]>
pastelnetwork · Aug 10, 2021 · a3128c0 · a3128c0
1 parent f0274cd
commit a3128c0
Show file tree

Hide file tree

Showing 41 changed files with 805 additions and 240 deletions.
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+/.vscode
diff --git a/src/apis/blocks.ts b/src/apis/blocks.ts
@@ -0,0 +1,17 @@
+import { axiosInstance } from '@utils/helpers/useFetch/useFetch';
+import { BLOCK_URL } from '@utils/constants/urls';
+import { IBlock } from '@utils/types/IBlocks';
+
+const getLatestBlock = async (limit = 8) => {
+  const {
+    data: { data, timestamp },
+  }: { data: { data: IBlock[]; timestamp: number } } = await axiosInstance.get(BLOCK_URL, {
+    params: { limit },
+  });
+
+  const blockTuple: [string, IBlock][] = data.map((block: IBlock) => [block.id, block]);
+  const mapDate = new Map(blockTuple);
+  return { data: mapDate, timestamp };
+};
+
+export default { getLatestBlock };
diff --git a/src/apis/transactions.ts b/src/apis/transactions.ts
@@ -0,0 +1,20 @@
+import { axiosInstance } from '@utils/helpers/useFetch/useFetch';
+import { TRANSACTION_URL } from '@utils/constants/urls';
+import { ITransaction } from '@utils/types/ITransactions';
+
+const getLatestTransactions = async (limit = 8) => {
+  const {
+    data: { data, timestamp },
+  }: { data: { data: ITransaction[]; timestamp: number } } = await axiosInstance.get(
+    TRANSACTION_URL,
+    {
+      params: { offset: 0, limit, sortBy: 'timestamp', sortDirection: 'DESC' },
+    },
+  );
+
+  const blockTuple: [string, ITransaction][] = data.map((block: ITransaction) => [block.id, block]);
+  const mapDate = new Map(blockTuple);
+  return { data: mapDate, timestamp };
+};
+
+export default { getLatestTransactions };
diff --git a/src/components/SearchBar/SearchBar.styles.ts b/src/components/SearchBar/SearchBar.styles.ts
@@ -19,6 +19,7 @@ export const AppBar = styled(MuiAppBar)`
 
 export const IconButton = styled(MuiIconButton)`
   svg {
+    color: ${props => props.theme.palette.text.primary};
     width: 22px;
     height: 22px;
   }

diff --git a/src/components/SearchBar/SwitchMode.tsx b/src/components/SearchBar/SwitchMode.tsx
@@ -1,34 +1,47 @@
-import { useCallback, ChangeEvent } from 'react';
-import Switch from '@material-ui/core/Switch';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
+import { useCallback, MouseEvent } from 'react';
+import Brightness4Icon from '@material-ui/icons/Brightness4';
+import Brightness7Icon from '@material-ui/icons/Brightness7';
 import { useDispatch, useSelector } from 'react-redux';
 import { setAppThemeAction } from '@redux/actions/appThemeAction';
 import { getThemeState } from '@redux/reducers/appThemeReducer';
-import themeVariant from '@theme/variants';
+import { IconButton } from '@material-ui/core';
 
-const {
-  custom: {
-    blue: { solitude, licorice },
-  },
-} = themeVariant;
-const SwitchMode = () => {
+interface IProps {
+  isMobile?: boolean;
+}
+function SwitchMode({ isMobile }: IProps) {
   const dispatch = useDispatch();
   const isDarkMode = useSelector(getThemeState).darkMode;
-  const handleChangeMode = useCallback((event: ChangeEvent<HTMLInputElement>) => {
-    const { checked: value } = event.target;
-    dispatch(setAppThemeAction(value));
-    localStorage.setItem('darkMode', value ? 'true' : 'false');
-  }, []);
+  const handleChangeMode = useCallback(
+    (event: MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      dispatch(setAppThemeAction(!isDarkMode));
+      localStorage.setItem('darkMode', !isDarkMode ? 'true' : 'false');
+    },
+    [isDarkMode],
+  );
 
   return (
-    <div>
-      <FormControlLabel
-        control={<Switch checked={isDarkMode} onChange={handleChangeMode} />}
-        label={isDarkMode ? 'Light' : 'Dark'}
-        style={{ color: isDarkMode ? solitude : licorice }}
-      />
-    </div>
+    <IconButton
+      title="Toggle light/dark theme"
+      onClick={handleChangeMode}
+      style={{
+        fontSize: 'inherit',
+        color: 'inherit',
+        borderRadius: 15,
+        width: isMobile ? '100%' : 'auto',
+      }}
+    >
+      {isDarkMode ? (
+        <Brightness4Icon fill="white" style={{ fill: 'white' }} />
+      ) : (
+        <Brightness7Icon />
+      )}
+      {isMobile && <span style={{ paddingLeft: 8 }}>Toggle light/dark theme</span>}
+    </IconButton>
   );
+}
+SwitchMode.defaultProps = {
+  isMobile: false,
 };
-
 export default SwitchMode;
diff --git a/src/components/Sidebar/Sidebar.styles.ts b/src/components/Sidebar/Sidebar.styles.ts
@@ -97,6 +97,7 @@ export const Category = styled(ListItem)<CategoryType>`
 
   &:hover {
     background: rgba(0, 0, 0, 0.08);
+    border-radius: ${props => props.theme.sidebar.radius.active};
   }
   transition: all 0.3s ease-in-out;
   &.${props => props.activeClassName} {

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
@@ -199,8 +199,8 @@ const Sidebar: React.FC<RouteComponentProps & SidebarPropsType> = ({ location, .
               </React.Fragment>
             ))}
             <Hidden mdUp>
-              <ListItem style={{ justifyContent: 'flex-end' }}>
-                <SwitchMode />
+              <ListItem style={{ justifyContent: 'flex-start', padding: '8px 0' }}>
+                <SwitchMode isMobile />
               </ListItem>
             </Hidden>
           </Styles.Items>

diff --git a/src/components/Summary/Summary.tsx b/src/components/Summary/Summary.tsx
@@ -1,21 +1,33 @@
 import * as React from 'react';
 
-// import { Grid } from '@material-ui/core';
+import { darken } from '@material-ui/core';
 import { Skeleton } from '@material-ui/lab';
 import { makeStyles } from '@material-ui/styles';
+import { useDispatch } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+// application
 import { TAppTheme } from '@theme/index';
 import * as URLS from '@utils/constants/urls';
 import { useFetch } from '@utils/helpers/useFetch/useFetch';
 import { formatNumber } from '@utils/helpers/formatNumbers/formatNumbers';
 import { ISummary, ISummaryStats } from '@utils/types/ISummary';
 import { SocketContext } from '@context/socket';
-
 import themeVariant from '@theme/variants';
-
+import { AppThunkDispatch } from '@redux/types';
+import { BlockThunks, TransactionThunks } from '@redux/thunk';
+import { ISocketData } from '@utils/types/ISocketData';
 import * as Styles from './Summary.styles';
 import { initialSummaryList, calculateDifference } from './Summary.helpers';
 
 const useStyles = makeStyles((_theme: TAppTheme) => ({
+  wrapper: {
+    [_theme.breakpoints.up('md')]: {
+      width: 'calc(100vw - 273px)',
+    },
+    [_theme.breakpoints.up('xl')]: {
+      width: '100%',
+    },
+  },
   root: {
     display: 'flex',
     padding: `${_theme.spacing(4)}px ${_theme.spacing(3)}px ${_theme.spacing(6)}px`,
@@ -24,10 +36,17 @@ const useStyles = makeStyles((_theme: TAppTheme) => ({
     [_theme.breakpoints.down('md')]: {
       padding: `${_theme.spacing(2)}px`,
     },
+    '&::-webkit-scrollbar': {
+      background: _theme.palette.background.default,
+    },
+    '&::-webkit-scrollbar-thumb': {
+      background: darken(_theme.palette.background.paper, 0.5),
+    },
   },
   cardItem: {
     margin: `0 ${_theme.spacing(3)}px`,
     minWidth: '142px',
+    flex: '0 0 auto',
     [_theme.breakpoints.down('md')]: {
       margin: `0 ${_theme.spacing(2)}px`,
     },
@@ -45,7 +64,8 @@ const Summary: React.FC = () => {
   const { fetchData } = useFetch<ISummary>({ method: 'get', url: URLS.SUMMARY_URL });
   const socket = React.useContext(SocketContext);
   const classes = useStyles();
-
+  const { pathname } = useLocation();
+  const dispatch = useDispatch<AppThunkDispatch>();
   const generateSummaryData = React.useCallback((summary: ISummary) => {
     const { currentStats, lastDayStats } = summary;
 
@@ -77,82 +97,101 @@ const Summary: React.FC = () => {
   }, [fetchData]);
 
   React.useEffect(() => {
-    socket.on('getUpdateBlock', () => {
-      updateSummaryList();
-    });
+    socket.on(
+      'getUpdateBlock',
+      ({ blocks, unconfirmedTransactions = [], rawTransactions = [] }: ISocketData) => {
+        updateSummaryList();
+        if (pathname === '/') {
+          if (blocks && blocks.length) {
+            dispatch(BlockThunks.updateBlocksNewest(blocks[0]));
+          }
+          if (blocks.length || unconfirmedTransactions.length || rawTransactions.length) {
+            dispatch(
+              TransactionThunks.updateTransactionsNewest({
+                blocks,
+                unconfirmedTransactions,
+                rawTransactions,
+              }),
+            );
+          }
+        }
+      },
+    );
     return () => {
       socket.off('getUpdateBlock');
     };
   }, []);
   React.useEffect(() => updateSummaryList(), []);
 
   return (
-    <div className={classes.root}>
-      {summaryList.map(({ id, name, value, difference }) => (
-        <Styles.Card key={id} classes={{ root: classes.cardItem }}>
-          <Styles.CardContent>
-            <Styles.Typography variant="h6" my={2} className={classes.textTitle}>
-              {name}
-            </Styles.Typography>
-            <Styles.Typography variant="h4" my={2} className={classes.textNumber}>
-              <Styles.Values>
-                {value === null ? <Skeleton animation="wave" variant="text" /> : value}
-              </Styles.Values>
-            </Styles.Typography>
-            {difference === null ? (
-              <Skeleton animation="wave" variant="text" />
-            ) : (
-              <Styles.Percentage
-                variant="subtitle2"
-                mb={4}
-                color="textSecondary"
-                noWrap
-                percentagecolor={`${
-                  difference > 0 ? themeVariant.custom.green.dark : themeVariant.custom.red.dark
-                }`}
-              >
-                Since yesterday
-                <br />
-                <span style={{ fontWeight: 'normal', marginTop: 8, fontSize: 16 }}>
-                  {`${difference > 0 ? '+' : ''}`}
-                  {difference}%&nbsp;
-                  {difference > 0 ? (
-                    <svg
-                      width="10"
-                      height="10"
-                      viewBox="0 0 10 10"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        fillRule="evenodd"
-                        clipRule="evenodd"
-                        d="M4.23381 2.93331L1.08356 6.08356L4.37114e-07 5L5 4.37114e-07L10 5L8.91644 6.08356L5.76619 2.93331L5.76619 10L4.23381 10L4.23381 2.93331Z"
-                        fill="#00D097"
-                      />
-                    </svg>
-                  ) : (
-                    <svg
-                      width="10"
-                      height="10"
-                      viewBox="0 0 10 10"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        fillRule="evenodd"
-                        clipRule="evenodd"
-                        d="M5.76619 7.06669L8.91644 3.91644L10 5L5 10L-2.18557e-07 5L1.08356 3.91644L4.23381 7.06669L4.23381 -2.52048e-07L5.76619 -1.85066e-07L5.76619 7.06669Z"
-                        fill="#FF754C"
-                      />
-                    </svg>
-                  )}
-                </span>
-              </Styles.Percentage>
-            )}
-          </Styles.CardContent>
-        </Styles.Card>
-      ))}
+    <div className={classes.wrapper}>
+      <div className={classes.root}>
+        {summaryList.map(({ id, name, value, difference }) => (
+          <Styles.Card key={id} classes={{ root: classes.cardItem }}>
+            <Styles.CardContent>
+              <Styles.Typography variant="h6" my={2} className={classes.textTitle}>
+                {name}
+              </Styles.Typography>
+              <Styles.Typography variant="h4" my={2} className={classes.textNumber}>
+                <Styles.Values>
+                  {value === null ? <Skeleton animation="wave" variant="text" /> : value}
+                </Styles.Values>
+              </Styles.Typography>
+              {difference === null ? (
+                <Skeleton animation="wave" variant="text" />
+              ) : (
+                <Styles.Percentage
+                  variant="subtitle2"
+                  mb={4}
+                  color="textSecondary"
+                  noWrap
+                  percentagecolor={`${
+                    difference > 0 ? themeVariant.custom.green.dark : themeVariant.custom.red.dark
+                  }`}
+                >
+                  Since yesterday
+                  <br />
+                  <span style={{ fontWeight: 'normal', marginTop: 8, fontSize: 16 }}>
+                    {`${difference > 0 ? '+' : ''}`}
+                    {difference}%&nbsp;
+                    {difference > 0 ? (
+                      <svg
+                        width="10"
+                        height="10"
+                        viewBox="0 0 10 10"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          fillRule="evenodd"
+                          clipRule="evenodd"
+                          d="M4.23381 2.93331L1.08356 6.08356L4.37114e-07 5L5 4.37114e-07L10 5L8.91644 6.08356L5.76619 2.93331L5.76619 10L4.23381 10L4.23381 2.93331Z"
+                          fill="#00D097"
+                        />
+                      </svg>
+                    ) : (
+                      <svg
+                        width="10"
+                        height="10"
+                        viewBox="0 0 10 10"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          fillRule="evenodd"
+                          clipRule="evenodd"
+                          d="M5.76619 7.06669L8.91644 3.91644L10 5L5 10L-2.18557e-07 5L1.08356 3.91644L4.23381 7.06669L4.23381 -2.52048e-07L5.76619 -1.85066e-07L5.76619 7.06669Z"
+                          fill="#FF754C"
+                        />
+                      </svg>
+                    )}
+                  </span>
+                </Styles.Percentage>
+              )}
+            </Styles.CardContent>
+          </Styles.Card>
+        ))}
+      </div>
     </div>
   );
 };

diff --git a/src/context/socket.tsx b/src/context/socket.tsx
@@ -2,6 +2,10 @@ import { createContext } from 'react';
 import { io, Socket } from 'socket.io-client';
 import { BASE_URL } from '@utils/constants/urls';
 
-export const socket = io(BASE_URL || '');
+export const socket = io(BASE_URL || '', {
+  path: '/socket.io',
+  transports: ['websocket', 'polling'],
+  secure: true,
+});
 
 export const SocketContext = createContext<Socket>(socket);