feat: basis point fee explanation (#2091)

interledger · Oct 25, 2023 · 16adf55 · 16adf55
1 parent 5ad8671
commit 16adf55
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/packages/frontend/app/routes/assets.$assetId.tsx b/packages/frontend/app/routes/assets.$assetId.tsx
@@ -7,6 +7,7 @@ import {
   useLoaderData,
   useNavigation
 } from '@remix-run/react'
+import { useState } from 'react'
 import { z } from 'zod'
 import { PageHeader } from '~/components'
 import { Button, ErrorPanel, Input } from '~/components/ui'
@@ -56,6 +57,10 @@ export default function ViewAssetPage() {
   const isSubmitting = navigation.state === 'submitting'
   const currentPageAction = isSubmitting && navigation.formAction === formAction
 
+  const [basisPointsInput, setBasisPointsInput] = useState(
+    asset.sendingFee?.basisPoints ?? undefined
+  )
+
   return (
     <div className='pt-4 flex flex-col space-y-4'>
       <div className='flex flex-col rounded-md bg-offwhite px-6'>
@@ -170,12 +175,16 @@ export default function ViewAssetPage() {
                     type='number'
                     name='basisPoints'
                     label='Basis Points'
-                    defaultValue={asset.sendingFee?.basisPoints ?? undefined}
                     error={response?.errors.sendingFee.fieldErrors.basisPoints}
+                    value={basisPointsInput}
+                    onChange={(e) =>
+                      setBasisPointsInput(parseFloat(e?.target?.value))
+                    }
                   />
                   <p className='text-gray-500 text-sm mt-2'>
                     A single basis point is a fee equal to 0.01% of the total
-                    amount. A fee of 1 basis point on $100 is $0.01.
+                    amount. A fee of {basisPointsInput || 1} basis point on $100
+                    is ${((basisPointsInput || 1) * 0.01).toFixed(4)}.
                   </p>
                   <div className='flex justify-end p-4'>
                     <Button