From 16adf550f0b9e1e50b0c73f6353edffbb5313d33 Mon Sep 17 00:00:00 2001
From: Shubham Patel <46487179+Shubham2503@users.noreply.github.com>
Date: Wed, 25 Oct 2023 16:22:12 +0530
Subject: [PATCH] feat: basis point fee explanation (#2091)

---
 packages/frontend/app/routes/assets.$assetId.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/app/routes/assets.$assetId.tsx b/packages/frontend/app/routes/assets.$assetId.tsx
index d229efd836..9d563cfbff 100644
--- 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