feat: add chronik URLs to admin dashboard

Author: chedieck

components/Admin/ChronikURLs.tsx

@@ -0,0 +1,24 @@
+import { MainNetworkSlugsType } from 'constants/index'
+
+interface IProps {
+  chronikUrls: Record<MainNetworkSlugsType, string[]>
+}
+export default function ChronikURLs ({ chronikUrls }: IProps): JSX.Element {
+  return <>
+  <h2>Chronik URLs</h2>
+  <div className="paybutton-table-ctn columns">
+    <div>
+      <h4>eCash</h4>
+      <ol>
+        {chronikUrls.ecash.map((url, idx) => <li key={idx}>{url}</li>)}
+      </ol>
+    </div>
+    <div>
+      <h4>Bitcoin Cash</h4>
+      <ol>
+        {chronikUrls.bitcoincash.map((url, idx) => <li key={idx}>{url}</li>)}
+      </ol>
+    </div>
+  </div>
+</>
+}

components/Admin/RegisteredUsers.tsx

@@ -2,26 +2,27 @@ import { UserWithSupertokens } from 'services/userService'
 import style from './admin.module.css'
 import moment from 'moment'
 import TableContainer from '../../components/TableContainer/TableContainer'
+import { Cell, CellProps } from 'react-table'
 
 interface IProps {
   users: UserWithSupertokens[]
 }
 
-export default function RegisteredUsers({ users }: IProps): JSX.Element {
+export default function RegisteredUsers ({ users }: IProps): JSX.Element {
   if (users === undefined) return <></>
 
   const columns = [
     {
       Header: 'Registered',
       accessor: 'registered',
-      Cell: ({ cell }: any) => <span>{cell.value}</span>
+      Cell: ({ cell }: CellProps<UserWithSupertokens>) => <span>{cell.value}</span>
     },
     {
       Header: 'Email',
       accessor: 'email',
-      Cell: ({ cell }: any) => (
+      Cell: ({ cell }: Cell<UserWithSupertokens>) => (
         <a
-          href={`/api/auth/dashboard/?userid=${cell.row.original.id}&recipeId=emailpassword`}
+          href={`/api/auth/dashboard/?userid=${cell.row.original.id as string}&recipeId=emailpassword`}
           target="_blank"
           rel="noopener noreferrer"
         >
@@ -32,18 +33,21 @@ export default function RegisteredUsers({ users }: IProps): JSX.Element {
     {
       Header: 'Admin',
       accessor: 'isAdmin',
-      Cell: ({ cell }: any) => (
+      Cell: ({ cell }: CellProps<UserWithSupertokens>) => (
         cell.value === true ? <span className={style.admin}>Yes</span> : 'No'
       )
     }
   ]
-  console.log({users})
+  console.log({ users })
   const data = users.map(user => ({
     id: (user.stUser?.id === undefined || user.stUser?.id === '') ? user.userProfile?.id : user.stUser?.id,
-    registered: user.stUser ? moment(user.stUser.timeJoined).fromNow() : 'NO ST USER FOUND',
+    registered: (user.stUser != null) ? moment(user.stUser.timeJoined).fromNow() : 'NO ST USER FOUND',
     email: (user.stUser?.email === undefined || user.stUser?.email === '') ? user.userProfile?.id : user.stUser?.email,
     isAdmin: user.userProfile?.isAdmin
   }))
 
-  return <TableContainer columns={columns} data={data} ssr />
+  return <>
+    <h2>Registered Users</h2>
+    <TableContainer columns={columns} data={data} ssr />
+  </>
 }

components/Admin/SubscribedAddresses.tsx

@@ -42,6 +42,7 @@ export default function SubscribedAddresses (): JSX.Element {
   )
 
   return <>
+    <h2>Subscribed Addresses</h2>
         <h3> eCash</h3>
       <TableContainer columns={columns} data={ecashSubscribedAddresses ?? []} ssr/>
         <h3> Bitcoin Cash</h3>

pages/admin/admin.module.css

@@ -21,3 +21,7 @@
   border-radius: 5px;
   max-width: 600px;
 }
+
+.divisor {
+  margin: 3rem;
+}

pages/admin/index.tsx

@@ -11,6 +11,8 @@ import RegisteredUsers from 'components/Admin/RegisteredUsers'
 import { removeUnserializableFields } from 'utils'
 import { multiBlockchainClient } from 'services/chronikService'
 import { MainNetworkSlugsType } from 'constants/index'
+import SubscribedAddresses from 'components/Admin/SubscribedAddresses'
+import ChronikURLs from 'components/Admin/ChronikURLs'
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
   // this runs on the backend, so we must call init on supertokens-node SDK
@@ -52,7 +54,7 @@ interface IProps {
 
 }
 
-export default function Admin ({ user, isAdmin }: IProps): JSX.Element {
+export default function Admin ({ user, isAdmin, chronikUrls }: IProps): JSX.Element {
   const router = useRouter()
   const [users, setUsers] = useState<UserWithSupertokens[]>([])
 
@@ -71,8 +73,8 @@ export default function Admin ({ user, isAdmin }: IProps): JSX.Element {
 
   if (user !== null && isAdmin) {
     return <>
-      <h2>Admin Dashboard</h2>
       <div className={style.admin_ctn}>
+        <h2>Admin Dashboard</h2>
         <a
           target="_blank"
           rel="noopener noreferrer"
@@ -81,9 +83,12 @@ export default function Admin ({ user, isAdmin }: IProps): JSX.Element {
         >
           Go to Supertokens Admin Dashboard
         </a>
-        <h4>Registered Users</h4>
-        <RegisteredUsers users={users}/>
       </div>
+      <ChronikURLs chronikUrls={chronikUrls}/>
+      <hr className={style.divisor}/>
+      <SubscribedAddresses/>
+      <hr className={style.divisor}/>
+      <RegisteredUsers users={users}/>
     </>
   } else {
     return <Page/>

styles/global.css

@@ -470,3 +470,12 @@ body[data-theme='dark'] .button_outline:hover {
 .export_btn:hover {
   cursor: pointer;
 }
+
+.columns {
+  display: flex;
+}
+
+.paybutton-table-ctn.columns > div {
+  flex: 1;
+}
+