feat: token management screen

new-lamassu-admin/src/pages/TokenManagement/TokenManagement.js

@@ -0,0 +1,97 @@
+import { useQuery } from '@apollo/react-hooks'
+import { makeStyles } from '@material-ui/core/styles'
+import gql from 'graphql-tag'
+import moment from 'moment'
+import * as R from 'ramda'
+import React from 'react'
+
+import Title from 'src/components/Title'
+// import DataTable from 'src/components/tables/DataTable'
+import { Table as EditableTable } from 'src/components/editableTable'
+
+import { mainStyles } from './TokenManagement.styles'
+
+const useStyles = makeStyles(mainStyles)
+
+const GET_USER_TOKENS = gql`
+  {
+    userTokens {
+      token
+      name
+      created
+    }
+  }
+`
+
+const Tokens = () => {
+  const classes = useStyles()
+
+  const { data: tknResponse } = useQuery(GET_USER_TOKENS)
+
+  const elements = [
+    {
+      name: 'name',
+      header: 'Name',
+      width: 312,
+      textAlign: 'center',
+      size: 'sm'
+    },
+    {
+      name: 'token',
+      header: 'Token',
+      width: 520,
+      textAlign: 'center',
+      size: 'sm'
+    },
+    {
+      name: 'created',
+      header: 'Date (UTC)',
+      width: 140,
+      textAlign: 'right',
+      size: 'sm',
+      view: t => moment.utc(t).format('YYYY-MM-DD')
+    },
+    {
+      name: 'created',
+      header: 'Time (UTC)',
+      width: 140,
+      textAlign: 'right',
+      size: 'sm',
+      view: t => moment.utc(t).format('HH:mm:ss')
+    }
+  ]
+
+  return (
+    <>
+      {console.log(tknResponse)}
+      <div className={classes.titleWrapper}>
+        <div className={classes.titleAndButtonsContainer}>
+          <Title>Token Management</Title>
+        </div>
+      </div>
+      <EditableTable
+        name="tokenList"
+        elements={elements}
+        data={R.path(['userTokens'])(tknResponse)}
+        enableDelete
+      />
+    </>
+  )
+
+  /* return (
+    <>
+      {console.log(tknResponse)}
+      <div className={classes.titleWrapper}>
+        <div className={classes.titleAndButtonsContainer}>
+          <Title>Token Management</Title>
+        </div>
+      </div>
+      <DataTable
+        elements={elements}
+        data={R.path(['userTokens'])(tknResponse)}
+      />
+    </>
+  ) */
+}
+
+export default Tokens

new-lamassu-admin/src/pages/TokenManagement/TokenManagement.styles.js

@@ -0,0 +1,33 @@
+import typographyStyles from 'src/components/typography/styles'
+import baseStyles from 'src/pages/Logs.styles'
+
+const { label1 } = typographyStyles
+const { titleWrapper, titleAndButtonsContainer, buttonsWrapper } = baseStyles
+
+const mainStyles = {
+  titleWrapper,
+  titleAndButtonsContainer,
+  buttonsWrapper,
+  headerLabels: {
+    display: 'flex',
+    flexDirection: 'row',
+    '& div': {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    '& > div:first-child': {
+      marginRight: 24
+    },
+    '& span': {
+      extend: label1,
+      marginLeft: 6
+    }
+  },
+  overflowTd: {
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis'
+  }
+}
+
+export { mainStyles }

new-lamassu-admin/src/routing/routes.js

@@ -22,6 +22,7 @@ import Notifications from 'src/pages/Notifications/Notifications'
 import OperatorInfo from 'src/pages/OperatorInfo/OperatorInfo'
 import ServerLogs from 'src/pages/ServerLogs'
 import Services from 'src/pages/Services/Services'
+import TokenManagement from 'src/pages/TokenManagement/TokenManagement'
 import Transactions from 'src/pages/Transactions/Transactions'
 import Triggers from 'src/pages/Triggers'
 import WalletSettings from 'src/pages/Wallet/Wallet'
@@ -153,6 +154,22 @@ const tree = [
         component: CustomerProfile
       }
     ]
+  },
+  {
+    key: 'system',
+    label: 'System',
+    route: '/system',
+    get component() {
+      return () => <Redirect to={this.children[0].route} />
+    },
+    children: [
+      {
+        key: 'token-management',
+        label: 'Token Management',
+        route: '/system/token-management',
+        component: TokenManagement
+      }
+    ]
   }
 ]