Rafiki Admin UI feature

packages/admin/.eslintrc.yml

@@ -0,0 +1,29 @@
+env:
+  browser: true
+  es2021: true
+  node: true
+extends:
+  - '@remix-run/eslint-config'
+  - '@remix-run/eslint-config/node'
+  - 'eslint:recommended'
+  - 'plugin:react/recommended'
+  - 'plugin:@typescript-eslint/recommended'
+  - 'prettier'
+root: true
+parser: '@typescript-eslint/parser'
+parserOptions:
+  ecmaFeatures:
+    jsx: true
+  ecmaVersion: 2020
+  sourceType: module
+plugins:
+  - react
+  - '@typescript-eslint'
+rules:
+  '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }]
+  'react/jsx-uses-react': 'off'
+  'react/react-in-jsx-scope': 'off'
+  '@typescript-eslint/quotes': ['warn', 'single', { avoidEscape: true, allowTemplateLiterals: true }]
+settings:
+  react:
+    version: "detect"

packages/admin/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+
+/.cache
+/build
+/public/build
+app/styles/dist
+.env

packages/admin/README.md

@@ -0,0 +1,26 @@
+# Rafiki Admin UI
+
+## Development
+
+This project assumes that you have a local Rafiki backend instance up and running. See the Environment Setup and Local Development sections in the main [README](../../README.md).
+
+This project is using Node version 19.
+
+To start the project in development mode:
+
+```sh
+npm run dev
+```
+
+This starts your app in development mode, rebuilding assets on file changes. You can access your app on [http://localhost:3005](http://localhost:3005).
+
+
+Currently you need to also manually build your CSS assets:
+```sh
+npm run scss
+```
+
+To format and lint code:
+```sh
+npm run format
+```

packages/admin/app/components/DisplayAsset.jsx

@@ -0,0 +1,40 @@
+import styles from '../styles/dist/DisplayItem.css'
+import { useLoaderData } from '@remix-run/react'
+
+function DisplayAsset() {
+  const { asset } = useLoaderData()
+  return (
+    <table>
+      <tbody>
+        <tr>
+          <th>ID</th>
+          <td>{asset.id}</td>
+        </tr>
+        <tr>
+          <th>Code</th>
+          <td>{asset.code}</td>
+        </tr>
+        <tr>
+          <th>Scale</th>
+          <td>{asset.scale}</td>
+        </tr>
+        <tr>
+          <th>Withdrawl threshold</th>
+          <td>
+            {asset.withdrawalThreshold ? asset.withdrawalThreshold : 'null'}
+          </td>
+        </tr>
+        <tr>
+          <th>Created at</th>
+          <td>{new Date(asset.createdAt).toLocaleString()}</td>
+        </tr>
+      </tbody>
+    </table>
+  )
+}
+
+export default DisplayAsset
+
+export function links() {
+  return [{ rel: 'stylesheet', href: styles }]
+}

packages/admin/app/components/DisplayAssets.jsx

@@ -0,0 +1,44 @@
+import styles from '../styles/dist/DisplayItems.css'
+import { Link } from '@remix-run/react'
+import * as R from 'ramda'
+
+function DisplayAssets({ assets }) {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Asset ID</th>
+          <th>Code</th>
+          <th>Scale</th>
+          <th>Withdrawl threshold</th>
+        </tr>
+      </thead>
+      <tbody>
+        {assets.length
+          ? assets.map((asset) => (
+              <tr key={R.path(['node', 'id'], asset)}>
+                <td>
+                  <Link to={R.path(['node', 'id'], asset)}>
+                    {R.path(['node', 'id'], asset)}
+                  </Link>
+                </td>
+                <td>{R.path(['node', 'code'], asset)}</td>
+                <td>{R.path(['node', 'scale'], asset)}</td>
+                <td>
+                  {R.path(['node', 'withdrawalThreshold'], asset)
+                    ? R.path(['node', 'withdrawalThreshold'], asset)
+                    : 'null'}
+                </td>
+              </tr>
+            ))
+          : ''}
+      </tbody>
+    </table>
+  )
+}
+
+export default DisplayAssets
+
+export function links() {
+  return [{ rel: 'stylesheet', href: styles }]
+}

packages/admin/app/components/DisplayItem.scss

@@ -0,0 +1,48 @@
+@import '../styles/_variables';
+
+table {
+  font-family: arial, sans-serif;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+thead {
+  background-color: $admin-panel-background;
+}
+
+td,
+th {
+  border: none;
+  text-align: left;
+  padding: 8px;
+}
+
+tr:nth-child(odd) {
+  background-color: $admin-panel-background;
+}
+
+ul {
+  margin: 0;
+  list-style-type: none;
+  list-style: none;
+
+  li {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+}
+
+ul.values {
+  padding-inline-start: 0;
+}
+
+th,
+td {
+  a:link,
+  a:visited,
+  a:active,
+  a:hover {
+    text-decoration: none;
+    color: $black;
+  }
+}

packages/admin/app/components/DisplayItems.scss

@@ -0,0 +1,32 @@
+@import '../styles/_variables';
+
+table {
+  font-family: arial, sans-serif;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+thead {
+  background-color: $admin-panel-background;
+}
+
+td,
+th {
+  border: 1px solid $admin-panel-background;
+  text-align: left;
+  padding: 8px;
+}
+
+tr {
+  a:link,
+  a:visited,
+  a:active,
+  a:hover {
+    text-decoration: none;
+    color: $black;
+  }
+}
+
+tr:nth-child(even) {
+  background-color: $admin-panel-background;
+}

packages/admin/app/components/DisplayPeer.jsx

@@ -0,0 +1,55 @@
+import styles from '../styles/dist/DisplayItem.css'
+import { useLoaderData, Link } from '@remix-run/react'
+
+function DisplayPeers() {
+  const { peer } = useLoaderData()
+
+  return (
+    <table>
+      <tbody>
+        <tr>
+          <th>ID</th>
+          <td>{peer.id}</td>
+        </tr>
+        <tr>
+          <th>Static ILP address</th>
+          <td>{peer.staticIlpAddress}</td>
+        </tr>
+        <tr>
+          <th>
+            <Link to={'/assets/' + peer.asset.id}>
+              Asset
+              <ul>
+                <li>Code</li>
+                <li>Scale</li>
+              </ul>
+            </Link>
+          </th>
+          <td>
+            <Link to={'/assets/' + peer.asset.id}>
+              <br></br>
+              <ul className='values'>
+                <li>{peer.asset.code}</li>
+                <li>{peer.asset.scale}</li>
+              </ul>
+            </Link>
+          </td>
+        </tr>
+        <tr>
+          <th>Outgoing endpoint</th>
+          <td>{peer.http.outgoing.endpoint}</td>
+        </tr>
+        <tr>
+          <th>Created at</th>
+          <td>{new Date(peer.createdAt).toLocaleString()}</td>
+        </tr>
+      </tbody>
+    </table>
+  )
+}
+
+export default DisplayPeers
+
+export function links() {
+  return [{ rel: 'stylesheet', href: styles }]
+}

packages/admin/app/components/DisplayPeers.jsx

@@ -0,0 +1,44 @@
+import styles from '../styles/dist/DisplayItems.css'
+import { Link } from '@remix-run/react'
+import * as R from 'ramda'
+
+function DisplayPeers({ peers }) {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Peer ID</th>
+          <th>Static ILP address</th>
+          <th>Asset code</th>
+          <th>Asset scale</th>
+          <th>Outgoing endpoint</th>
+        </tr>
+      </thead>
+      <tbody>
+        {peers.length
+          ? peers.map((peer) => (
+              <tr key={R.path(['node', 'id'], peer)}>
+                <td>
+                  <Link to={R.path(['node', 'id'], peer)}>
+                    {R.path(['node', 'id'], peer)}
+                  </Link>
+                </td>
+                <td>{R.path(['node', 'staticIlpAddress'], peer)}</td>
+                <td>{R.path(['node', 'asset', 'code'], peer)}</td>
+                <td>{R.path(['node', 'asset', 'scale'], peer)}</td>
+                <td>
+                  {R.path(['node', 'http', 'outgoing', 'endpoint'], peer)}
+                </td>
+              </tr>
+            ))
+          : ''}
+      </tbody>
+    </table>
+  )
+}
+
+export default DisplayPeers
+
+export function links() {
+  return [{ rel: 'stylesheet', href: styles }]
+}