feat(frontend): manage incoming auth tokens

packages/backend/src/graphql/resolvers/peer.ts

@@ -122,6 +122,9 @@ export const peerToGraphql = (peer: Peer): SchemaPeer => ({
   id: peer.id,
   maxPacketAmount: peer.maxPacketAmount,
   http: peer.http,
+  incomingTokens: peer.incomingTokens?.map(
+    (incomingToken) => incomingToken.token
+  ),
   asset: assetToGraphql(peer.asset),
   staticIlpAddress: peer.staticIlpAddress,
   name: peer.name,

packages/backend/src/graphql/schema.graphql

@@ -619,6 +619,8 @@ type Peer implements Model {
   maxPacketAmount: UInt64
   "Peering connection details"
   http: Http!
+  "Incoming tokens"
+  incomingTokens: [String!]!
   "Asset of peering relationship"
   asset: Asset!
   "Peer's ILP address"

packages/backend/src/payment-method/ilp/peer/service.ts

@@ -114,7 +114,10 @@ async function getPeer(
   deps: ServiceDependencies,
   id: string
 ): Promise<Peer | undefined> {
-  return Peer.query(deps.knex).findById(id).withGraphFetched('asset')
+  return Peer.query(deps.knex)
+    .findById(id)
+    .withGraphFetched('asset')
+    .withGraphFetched('incomingTokens')
 }
 
 async function createPeer(
@@ -222,14 +225,16 @@ async function updatePeer(
     return await Peer.transaction(deps.knex, async (trx) => {
       if (options.http?.incoming) {
         await deps.httpTokenService.deleteByPeer(options.id, trx)
-        const err = await addIncomingHttpTokens({
-          deps,
-          peerId: options.id,
-          tokens: options.http?.incoming?.authTokens,
-          trx
-        })
-        if (err) {
-          throw err
+        if (options.http?.incoming?.authTokens.length > 0) {
+          const err = await addIncomingHttpTokens({
+            deps,
+            peerId: options.id,
+            tokens: options.http?.incoming?.authTokens,
+            trx
+          })
+          if (err) {
+            throw err
+          }
         }
       }
       return await Peer.query(trx)

packages/frontend/app/components/ui/EditableTable.tsx

@@ -0,0 +1,149 @@
+import type { ReactNode } from 'react'
+import { useEffect, useState } from 'react'
+import { Input } from './Input'
+import { Table } from './Table'
+import { FieldError } from './FieldError'
+import { Button } from './Button'
+
+type EditableTableProps = {
+  name: string
+  label: string
+  options: EditableTableOption[]
+  error?: string | string[]
+  description?: ReactNode
+  required?: boolean
+}
+
+type EditableTableOption = {
+  label: string
+  value: string
+  canDelete?: boolean
+  canEdit?: boolean
+  showInput?: boolean
+}
+
+export const EditableTable = ({
+  name,
+  label,
+  options,
+  error,
+  description = undefined,
+  required = false
+}: EditableTableProps) => {
+  const [optionsList, setOptionsList] = useState<EditableTableOption[]>(options)
+  const [values, setValues] = useState<string[]>()
+
+  const toggleEditInput = (index: number) => {
+    setOptionsList(
+      optionsList.map((option, i) => {
+        if (i === index) {
+          return {
+            ...option,
+            showInput: true
+          }
+        }
+        return option
+      })
+    )
+  }
+
+  const editOption = (index: number, value: string) => {
+    if (!value) {
+      deleteOption(index)
+      return
+    }
+    setOptionsList(
+      optionsList.map((option, i) => {
+        if (i === index) {
+          return {
+            ...option,
+            showInput: false,
+            value
+          }
+        }
+        return option
+      })
+    )
+  }
+
+  const deleteOption = (index: number) => {
+    setOptionsList(optionsList.filter((_, i) => i !== index))
+  }
+
+  const addOption = () => {
+    setOptionsList([
+      ...optionsList,
+      { label: '', value: '', canDelete: true, canEdit: true, showInput: true }
+    ])
+  }
+
+  useEffect(
+    () => setValues(optionsList.map((option) => option.value)),
+    [optionsList]
+  )
+
+  return (
+    <>
+      <Input
+        type='hidden'
+        name={name}
+        value={values}
+        required={required}
+        label={label}
+      />
+      <Table>
+        <Table.Head columns={['Token', 'Action']} />
+        <Table.Body>
+          {(optionsList || []).map((option, index) => (
+            <Table.Row key={index}>
+              <Table.Cell key={0}>
+                {option.showInput ? (
+                  <Input
+                    type='text'
+                    onKeyDown={(e) =>
+                      e.key === 'Enter' &&
+                      (e.preventDefault(),
+                      editOption(index, e.currentTarget.value))
+                    }
+                    defaultValue={option.value}
+                    required={required}
+                  />
+                ) : (
+                  <span>{option.value}</span>
+                )}
+              </Table.Cell>
+              <Table.Cell key={1}>
+                {option.canEdit && !option.showInput ? (
+                  <Button
+                    aria-label='edit'
+                    onClick={() => toggleEditInput(index)}
+                  >
+                    Edit
+                  </Button>
+                ) : null}
+                {option.canDelete ? (
+                  <Button
+                    className='ml-2'
+                    aria-label='delete'
+                    onClick={() => deleteOption(index)}
+                  >
+                    Delete
+                  </Button>
+                ) : null}
+              </Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+      <div className='flex justify-end mt-2'>
+        <Button aria-label='add' onClick={() => addOption()}>
+          Add
+        </Button>
+      </div>
+      {description ? (
+        <div className='font-medium text-sm'>{description}</div>
+      ) : null}
+      <FieldError error={error} />
+    </>
+  )
+}

packages/frontend/app/lib/api/peer.server.ts

@@ -50,6 +50,7 @@ export const getPeer = async (args: QueryPeerArgs) => {
               authToken
             }
           }
+          incomingTokens
         }
       }
     `,

packages/frontend/app/lib/validate.server.ts

@@ -47,7 +47,7 @@ export const peerGeneralInfoSchema = z
 
 export const peerHttpInfoSchema = z
   .object({
-    incomingAuthTokens: z.string().optional(),
+    incomingAuthTokens: z.array(z.string()),
     outgoingAuthToken: z.string(),
     outgoingEndpoint: z
       .string()

packages/frontend/app/routes/peers.$peerId.tsx

@@ -30,6 +30,7 @@ import {
 import type { ZodFieldErrors } from '~/shared/types'
 import { formatAmount } from '~/shared/utils'
 import { checkAuthAndRedirect } from '../lib/kratos_checks.server'
+import { EditableTable } from '~/components/ui/EditableTable'
 
 export async function loader({ request, params }: LoaderFunctionArgs) {
   const cookies = request.headers.get('cookie')
@@ -204,10 +205,15 @@ export default function ViewPeerPage() {
               <fieldset disabled={currentPageAction}>
                 <div className='w-full p-4 space-y-3'>
                   <Input type='hidden' name='id' value={peer.id} />
-                  <Input
+                  <EditableTable
                     name='incomingAuthTokens'
                     label='Incoming Auth Tokens'
-                    placeholder='Accepts a comma separated list of tokens'
+                    options={(peer.incomingTokens || []).map((token) => ({
+                      label: token,
+                      value: token,
+                      canDelete: true,
+                      canEdit: true
+                    }))}
                     error={response?.errors.http.fieldErrors.incomingAuthTokens}
                     description={
                       <>
@@ -428,23 +434,25 @@ export async function action({ request }: ActionFunctionArgs) {
       break
     }
     case 'http': {
-      const result = peerHttpInfoSchema.safeParse(Object.fromEntries(formData))
-
+      const formDataEntries = Object.fromEntries(formData)
+      const result = peerHttpInfoSchema.safeParse({
+        ...formDataEntries,
+        incomingAuthTokens: formDataEntries.incomingAuthTokens
+          ? formDataEntries.incomingAuthTokens.toString().split(',')
+          : []
+      })
       if (!result.success) {
         actionResponse.errors.http.fieldErrors =
           result.error.flatten().fieldErrors
         return json({ ...actionResponse }, { status: 400 })
       }
-
       const response = await updatePeer({
         id: result.data.id,
         http: {
           ...(result.data.incomingAuthTokens
             ? {
                 incoming: {
                   authTokens: result.data.incomingAuthTokens
-                    ?.replace(/ /g, '')
-                    .split(',')
                 }
               }
             : {}),