Gaming Dashboard overhaul (#1504)

* Updating the dashboard api

* Reflected functionality

* lingui extract

* CS favicon

* Update packages/gaming-ui/src/Components/Modules/ApiKeys.tsx

Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>

* Update packages/gaming-ui/src/Components/Pages/LoginPage.tsx

Co-authored-by: Tanmoy Basak Anjan <tanmoy3399@gmail.com>

Co-authored-by: GitHub Actions <actions@github.com>
Co-authored-by: Thibaut Sardan <github@thib.top>
Co-authored-by: Michael Yankelev <12774278+FSM1@users.noreply.github.com>
Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Co-authored-by: Tanmoy Basak Anjan <tanmoy3399@gmail.com>

packages/gaming-ui/package.json

@@ -6,7 +6,7 @@
     "@babel/core": "^7.12.10",
     "@babel/runtime": "^7.0.0",
     "@chainsafe/browser-storage-hooks": "^1.0.1",
-    "@chainsafe/files-api-client": "1.17.5",
+    "@chainsafe/files-api-client": "^1.18.5",
     "@chainsafe/web3-context": "1.1.4",
     "@lingui/core": "^3.7.2",
     "@lingui/react": "^3.7.2",
@@ -18,22 +18,15 @@
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "bnc-onboard": "1.32.0",
-    "cids": "^1.1.6",
     "clsx": "^1.1.1",
     "dayjs": "^1.9.7",
     "eth-crypto": "^1.8.0",
     "ethers": "^5.4.3",
     "formik": "^2.2.5",
     "mime-matcher": "^1.0.5",
     "react": "^16.14.0",
-    "react-beforeunload": "^2.4.0",
-    "react-dnd": "14.0.2",
-    "react-dnd-html5-backend": "14.0.0",
     "react-dom": "^16.14.0",
-    "react-h5-audio-player": "^3.5.0",
     "react-hotkeys-hook": "^2.4.0",
-    "react-markdown": "^5.0.3",
-    "react-pdf": "5.3.0",
     "react-scripts": "3.4.4",
     "react-swipeable": "^6.0.1",
     "react-toast-notifications": "^2.4.0",
@@ -73,9 +66,8 @@
     "build": "craco --max_old_space_size=4096 build",
     "sentry": "(export REACT_APP_SENTRY_RELEASE=$(sentry-cli releases propose-version); node scripts/sentry.js)",
     "release": "(export REACT_APP_SENTRY_RELEASE=$(sentry-cli releases propose-version); yarn compile && yarn build && node scripts/sentry.js)",
-    "test": "yarn test:clean && cypress open",
-    "test:ci": "yarn test:clean && cypress run --browser chrome --headless",
-    "test:clean": "rimraf cypress/fixtures/storage",
+    "test": "cypress open",
+    "test:ci": "cypress run --browser chrome --headless",
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "extract": "lingui extract",
     "compile": "lingui compile",

packages/gaming-ui/src/App.tsx

@@ -11,6 +11,7 @@ import { lightTheme } from "./Themes/LightTheme"
 import { darkTheme } from "./Themes/DarkTheme"
 import { useLocalStorage } from "@chainsafe/browser-storage-hooks"
 import { GamingApiProvider }  from "./Contexts/GamingApiContext"
+import { UserProvider } from "./Contexts/UserContext"
 
 if (
   process.env.NODE_ENV === "production" &&
@@ -101,11 +102,13 @@ const App = () => {
                 apiUrl={apiUrl}
                 withLocalStorage={true}
               >
-                <Router>
-                  <AppWrapper>
-                    <StorageRoutes />
-                  </AppWrapper>
-                </Router>
+                <UserProvider>
+                  <Router>
+                    <AppWrapper>
+                      <StorageRoutes />
+                    </AppWrapper>
+                  </Router>
+                </UserProvider>
               </GamingApiProvider>
             </Web3Provider>
           </ToastProvider>

packages/gaming-ui/src/Components/Elements/CustomModal.tsx

@@ -25,7 +25,7 @@ const useStyles = makeStyles(({ constants, breakpoints }: CSGTheme) =>
         borderRadiusRightBottom: 0
       }
     },
-    close: {
+    closeIcon: {
       [breakpoints.down("md")]: {}
     }
   })
@@ -48,7 +48,7 @@ const CustomModal: React.FC<ICustomModal> = ({
     <Modal
       className={clsx(classes.root, className)}
       injectedClass={{
-        closeIcon: clsx(classes.close, injectedClass?.closeIcon),
+        closeIcon: clsx(classes.closeIcon, injectedClass?.closeIcon),
         inner: clsx(classes.inner, injectedClass?.inner)
       }}
       {...rest}

packages/gaming-ui/src/Components/GamingRoutes.tsx

@@ -3,37 +3,43 @@ import { Switch, ConditionalRoute } from "@chainsafe/common-components"
 import LoginPage from "./Pages/LoginPage"
 import { useGamingApi }  from "../Contexts/GamingApiContext"
 import SettingsPage from "./Pages/SettingsPage"
+import DashboardPage from "./Pages/DashboardPage"
 
 export const SETTINGS_PATHS = ["apiKeys"] as const
 export type SettingsPath = typeof SETTINGS_PATHS[number]
 
 export const ROUTE_LINKS = {
   Landing: "/",
+  Dashboard: "/dashboard",
   SettingsRoot: "/settings",
   Settings: (path: SettingsPath) => `/settings/${path}`,
   PrivacyPolicy: "https://files.chainsafe.io/privacy-policy",
   Terms: "https://files.chainsafe.io/terms-of-service",
   ChainSafe: "https://chainsafe.io/"
 }
 
-
-
 const GamingRoutes = () => {
   const { isLoggedIn } = useGamingApi()
 
   return (
     <Switch>
+      <ConditionalRoute
+        path={ROUTE_LINKS.Dashboard}
+        isAuthorized={isLoggedIn}
+        component={DashboardPage}
+        redirectPath={ROUTE_LINKS.Landing}
+      />
       <ConditionalRoute
         path={ROUTE_LINKS.SettingsRoot}
         isAuthorized={isLoggedIn}
         component={SettingsPage}
-        redirectPath={ROUTE_LINKS.SettingsRoot}
+        redirectPath={ROUTE_LINKS.Landing}
       />
       <ConditionalRoute
         path={ROUTE_LINKS.Landing}
         isAuthorized={!isLoggedIn}
         component={LoginPage}
-        redirectPath={ROUTE_LINKS.SettingsRoot}
+        redirectPath={ROUTE_LINKS.Dashboard}
         redirectToSource
       />
     </Switch>

packages/gaming-ui/src/Components/Layouts/AppHeader.tsx

@@ -14,6 +14,7 @@ import { ROUTE_LINKS } from "../GamingRoutes"
 import { Trans } from "@lingui/macro"
 import { CSGTheme } from "../../Themes/types"
 import { useGamingApi } from "../../Contexts/GamingApiContext"
+import { useUser } from "../../Contexts/UserContext"
 
 const useStyles = makeStyles(
   ({ palette, animation, breakpoints, constants, zIndex }: CSGTheme) => {
@@ -154,6 +155,7 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
   const classes = useStyles()
   const { isLoggedIn, logout } = useGamingApi()
   const { history } = useHistory()
+  const { getProfileTitle } = useUser()
 
   const signOut = useCallback(async () => {
     logout()
@@ -173,17 +175,21 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
             <>
               <section className={classes.accountControls}>
                 <MenuDropdown
-                  title=''
+                  title={getProfileTitle()}
                   anchor="bottom-right"
                   classNames={{
                     icon: classes.icon,
                     options: classes.options
                   }}
+                  testId="sign-out"
                   menuItems={[
                     {
                       onClick: () => signOut(),
                       contents: (
-                        <div className={classes.menuItem}>
+                        <div
+                          data-cy="menu-sign-out"
+                          className={classes.menuItem}
+                        >
                           <PowerDownSvg />
                           <Typography>
                             <Trans>Sign Out</Trans>
@@ -205,14 +211,14 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
               />
               <Link
                 className={classes.logo}
-                to={ROUTE_LINKS.SettingsRoot}
+                to={ROUTE_LINKS.Dashboard}
               >
                 <ChainsafeLogo />
                 <Typography
                   variant="h5"
                   className={classes.title}
                 >
-                  Gaming
+                  Dashboard
                 </Typography>
               </Link>
             </>

packages/gaming-ui/src/Components/Layouts/AppNav.tsx

@@ -229,7 +229,7 @@ const AppNav: React.FC<IAppNav> = ({ navOpen, setNavOpen }: IAppNav) => {
             <div>
               <Link
                 className={classes.logo}
-                to={ROUTE_LINKS.SettingsRoot}
+                to={ROUTE_LINKS.Dashboard}
               >
                 <ChainsafeLogo />
                 <Typography variant="body1">