From 122f616f337f37295c1da74d25a13460122c9163 Mon Sep 17 00:00:00 2001
From: Emanuel Palestino <emanuel.palestino.h@gmail.com>
Date: Thu, 18 Jul 2024 11:17:57 -0600
Subject: [PATCH 1/8] Added onchange handler in liquidity dialog

---
 packages/frontend/app/components/LiquidityDialog.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/frontend/app/components/LiquidityDialog.tsx b/packages/frontend/app/components/LiquidityDialog.tsx
index dc8e43c1a5..ba94d6049e 100644
--- a/packages/frontend/app/components/LiquidityDialog.tsx
+++ b/packages/frontend/app/components/LiquidityDialog.tsx
@@ -1,5 +1,6 @@
 import { Dialog } from '@headlessui/react'
 import { Form } from '@remix-run/react'
+import { useState } from 'react'
 import { XIcon } from '~/components/icons'
 import { Button, Input } from '~/components/ui'
 
@@ -14,6 +15,8 @@ export const LiquidityDialog = ({
   onClose,
   type
 }: LiquidityDialogProps) => {
+  const [amount, setAmount] = useState(0)
+
   return (
     <Dialog as='div' className='relative z-10' onClose={onClose} open={true}>
       <div className='fixed inset-0 bg-tealish/30 bg-opacity-75 transition-opacity' />
@@ -46,6 +49,10 @@ export const LiquidityDialog = ({
                     name='amount'
                     label='Amount'
                   />
+                  <div className='mt-2'>
+                    <p>Based on the asset:</p>
+                    <p>Amount {amount} = {amount / 100} USD </p>
+                  </div>
                   <div className='flex justify-end py-3'>
                     <Button aria-label={`${type} liquidity`} type='submit'>
                       {type} liquidity

From 3a6e74623dcaf536b0d62733745cfcb2e6e7ee5f Mon Sep 17 00:00:00 2001
From: Emanuel Palestino <emanuel.palestino.h@gmail.com>
Date: Thu, 18 Jul 2024 12:24:00 -0600
Subject: [PATCH 2/8] fix(frontend): [peers] getting asset details in loader of
 deposit and withdraw liquidity components

---
 .../app/components/LiquidityDialog.tsx        | 14 +++++++---
 .../peers.$peerId.deposit-liquidity.tsx       | 27 +++++++++++++++----
 .../peers.$peerId.withdraw-liquidity.tsx      | 27 +++++++++++++++----
 3 files changed, 55 insertions(+), 13 deletions(-)

diff --git a/packages/frontend/app/components/LiquidityDialog.tsx b/packages/frontend/app/components/LiquidityDialog.tsx
index ba94d6049e..e243677b5d 100644
--- a/packages/frontend/app/components/LiquidityDialog.tsx
+++ b/packages/frontend/app/components/LiquidityDialog.tsx
@@ -4,18 +4,25 @@ import { useState } from 'react'
 import { XIcon } from '~/components/icons'
 import { Button, Input } from '~/components/ui'
 
+type BasicAsset = {
+  code: string
+  scale: number
+}
+
 type LiquidityDialogProps = {
   title: string
   onClose: () => void
   type: 'Deposit' | 'Withdraw'
+  asset: BasicAsset
 }
 
 export const LiquidityDialog = ({
   title,
   onClose,
-  type
+  type,
+  asset
 }: LiquidityDialogProps) => {
-  const [amount, setAmount] = useState(0)
+  const [amount, setAmount] = useState<number>(0)
 
   return (
     <Dialog as='div' className='relative z-10' onClose={onClose} open={true}>
@@ -48,10 +55,11 @@ export const LiquidityDialog = ({
                     type='number'
                     name='amount'
                     label='Amount'
+                    onChange={e => setAmount(Number(e.target.value))}
                   />
                   <div className='mt-2'>
                     <p>Based on the asset:</p>
-                    <p>Amount {amount} = {amount / 100} USD </p>
+                    <p>Amount {amount} = {amount / Math.pow(10, asset.scale)} {asset.code} </p>
                   </div>
                   <div className='flex justify-end py-3'>
                     <Button aria-label={`${type} liquidity`} type='submit'>
diff --git a/packages/frontend/app/routes/peers.$peerId.deposit-liquidity.tsx b/packages/frontend/app/routes/peers.$peerId.deposit-liquidity.tsx
index 3b1fbd2558..3b0055e5d5 100644
--- a/packages/frontend/app/routes/peers.$peerId.deposit-liquidity.tsx
+++ b/packages/frontend/app/routes/peers.$peerId.deposit-liquidity.tsx
@@ -1,28 +1,45 @@
-import { type ActionFunctionArgs } from '@remix-run/node'
-import { useNavigate } from '@remix-run/react'
+import { json, type ActionFunctionArgs } from '@remix-run/node'
+import { useLoaderData, useNavigate } from '@remix-run/react'
 import { v4 } from 'uuid'
 import { LiquidityDialog } from '~/components/LiquidityDialog'
-import { depositPeerLiquidity } from '~/lib/api/peer.server'
+import { depositPeerLiquidity, getPeer } from '~/lib/api/peer.server'
 import { messageStorage, setMessageAndRedirect } from '~/lib/message.server'
 import { amountSchema } from '~/lib/validate.server'
 import { redirectIfUnauthorizedAccess } from '../lib/kratos_checks.server'
 import { type LoaderFunctionArgs } from '@remix-run/node'
+import { z } from 'zod'
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const cookies = request.headers.get('cookie')
   await redirectIfUnauthorizedAccess(request.url, cookies)
-  return null
+
+  const peerId = params.peerId
+
+  const result = z.string().uuid().safeParse(peerId)
+  if (!result.success) {
+    throw json(null, { status: 400, statusText: 'Invalid peer ID.' })
+  }
+
+  const peer = await getPeer({ id: result.data })
+
+  if (!peer) {
+    throw json(null, { status: 400, statusText: 'Peer not found.' })
+  }
+
+  return json({ asset: peer.asset })
 }
 
 export default function PeerDepositLiquidity() {
   const navigate = useNavigate()
   const dismissDialog = () => navigate('..', { preventScrollReset: true })
+  const { asset } = useLoaderData<typeof loader>()
 
   return (
     <LiquidityDialog
       onClose={dismissDialog}
       title='Deposit peer liquidity'
       type='Deposit'
+      asset={asset}
     />
   )
 }
diff --git a/packages/frontend/app/routes/peers.$peerId.withdraw-liquidity.tsx b/packages/frontend/app/routes/peers.$peerId.withdraw-liquidity.tsx
index 228651adc9..1aeb7899fc 100644
--- a/packages/frontend/app/routes/peers.$peerId.withdraw-liquidity.tsx
+++ b/packages/frontend/app/routes/peers.$peerId.withdraw-liquidity.tsx
@@ -1,28 +1,45 @@
-import { type ActionFunctionArgs } from '@remix-run/node'
-import { useNavigate } from '@remix-run/react'
+import { json, type ActionFunctionArgs } from '@remix-run/node'
+import { useLoaderData, useNavigate } from '@remix-run/react'
 import { v4 } from 'uuid'
 import { LiquidityDialog } from '~/components/LiquidityDialog'
-import { withdrawPeerLiquidity } from '~/lib/api/peer.server'
+import { getPeer, withdrawPeerLiquidity } from '~/lib/api/peer.server'
 import { messageStorage, setMessageAndRedirect } from '~/lib/message.server'
 import { amountSchema } from '~/lib/validate.server'
 import { redirectIfUnauthorizedAccess } from '../lib/kratos_checks.server'
 import { type LoaderFunctionArgs } from '@remix-run/node'
+import { z } from 'zod'
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const cookies = request.headers.get('cookie')
   await redirectIfUnauthorizedAccess(request.url, cookies)
-  return null
+
+  const peerId = params.peerId
+
+  const result = z.string().uuid().safeParse(peerId)
+  if (!result.success) {
+    throw json(null, { status: 400, statusText: 'Invalid peer ID.' })
+  }
+
+  const peer = await getPeer({ id: result.data })
+
+  if (!peer) {
+    throw json(null, { status: 400, statusText: 'Peer not found.' })
+  }
+
+  return json({ asset: peer.asset })
 }
 
 export default function PeerWithdrawLiquidity() {
   const navigate = useNavigate()
   const dismissDialog = () => navigate('..', { preventScrollReset: true })
+  const { asset } = useLoaderData<typeof loader>()
 
   return (
     <LiquidityDialog
       onClose={dismissDialog}
       title='Withdraw peer liquidity'
       type='Withdraw'
+      asset={asset}
     />
   )
 }

From 0198a914668ee9205e215dc37dff4aa5aa7410b8 Mon Sep 17 00:00:00 2001
From: Emanuel Palestino <emanuel.palestino.h@gmail.com>
Date: Thu, 18 Jul 2024 12:37:14 -0600
Subject: [PATCH 3/8] fix(frontend): [assets] getting asset details in loader
 of deposit and withdraw liquidity components

---
 .../assets.$assetId.deposit-liquidity.tsx     | 27 +++++++++++++++----
 .../assets.$assetId.withdraw-liquidity.tsx    | 27 +++++++++++++++----
 2 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/app/routes/assets.$assetId.deposit-liquidity.tsx b/packages/frontend/app/routes/assets.$assetId.deposit-liquidity.tsx
index 64b86ac5aa..a14f5c62f3 100644
--- a/packages/frontend/app/routes/assets.$assetId.deposit-liquidity.tsx
+++ b/packages/frontend/app/routes/assets.$assetId.deposit-liquidity.tsx
@@ -1,28 +1,45 @@
-import { type ActionFunctionArgs } from '@remix-run/node'
-import { useNavigate } from '@remix-run/react'
+import { json, type ActionFunctionArgs } from '@remix-run/node'
+import { useLoaderData, useNavigate } from '@remix-run/react'
 import { v4 } from 'uuid'
 import { LiquidityDialog } from '~/components/LiquidityDialog'
-import { depositAssetLiquidity } from '~/lib/api/asset.server'
+import { depositAssetLiquidity, getAssetInfo } from '~/lib/api/asset.server'
 import { messageStorage, setMessageAndRedirect } from '~/lib/message.server'
 import { amountSchema } from '~/lib/validate.server'
 import { redirectIfUnauthorizedAccess } from '../lib/kratos_checks.server'
 import { type LoaderFunctionArgs } from '@remix-run/node'
+import { z } from 'zod'
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const cookies = request.headers.get('cookie')
   await redirectIfUnauthorizedAccess(request.url, cookies)
-  return null
+
+  const assetId = params.assetId
+
+  const result = z.string().uuid().safeParse(assetId)
+  if (!result.success) {
+    throw json(null, { status: 400, statusText: 'Invalid asset ID.' })
+  }
+
+  const asset = await getAssetInfo({ id: result.data })
+
+  if (!asset) {
+    throw json(null, { status: 404, statusText: 'Asset not found.' })
+  }
+
+  return json({ asset })
 }
 
 export default function AssetDepositLiquidity() {
   const navigate = useNavigate()
   const dismissDialog = () => navigate('..', { preventScrollReset: true })
+  const { asset } = useLoaderData<typeof loader>()
 
   return (
     <LiquidityDialog
       onClose={dismissDialog}
       title='Deposit asset liquidity'
       type='Deposit'
+      asset={asset}
     />
   )
 }
diff --git a/packages/frontend/app/routes/assets.$assetId.withdraw-liquidity.tsx b/packages/frontend/app/routes/assets.$assetId.withdraw-liquidity.tsx
index c8b4a8d7a1..e6fbbb9c08 100644
--- a/packages/frontend/app/routes/assets.$assetId.withdraw-liquidity.tsx
+++ b/packages/frontend/app/routes/assets.$assetId.withdraw-liquidity.tsx
@@ -1,28 +1,45 @@
-import { type ActionFunctionArgs } from '@remix-run/node'
-import { useNavigate } from '@remix-run/react'
+import { json, type ActionFunctionArgs } from '@remix-run/node'
+import { useLoaderData, useNavigate } from '@remix-run/react'
 import { v4 } from 'uuid'
 import { LiquidityDialog } from '~/components/LiquidityDialog'
-import { withdrawAssetLiquidity } from '~/lib/api/asset.server'
+import { getAssetInfo, withdrawAssetLiquidity } from '~/lib/api/asset.server'
 import { messageStorage, setMessageAndRedirect } from '~/lib/message.server'
 import { amountSchema } from '~/lib/validate.server'
 import { redirectIfUnauthorizedAccess } from '~/lib/kratos_checks.server'
 import { type LoaderFunctionArgs } from '@remix-run/node'
+import { z } from 'zod'
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const cookies = request.headers.get('cookie')
   await redirectIfUnauthorizedAccess(request.url, cookies)
-  return null
+
+  const assetId = params.assetId
+
+  const result = z.string().uuid().safeParse(assetId)
+  if (!result.success) {
+    throw json(null, { status: 400, statusText: 'Invalid asset ID.' })
+  }
+
+  const asset = await getAssetInfo({ id: result.data })
+
+  if (!asset) {
+    throw json(null, { status: 404, statusText: 'Asset not found.' })
+  }
+
+  return json({ asset })
 }
 
 export default function AssetWithdrawLiquidity() {
   const navigate = useNavigate()
   const dismissDialog = () => navigate('..', { preventScrollReset: true })
+  const { asset } = useLoaderData<typeof loader>()
 
   return (
     <LiquidityDialog
       onClose={dismissDialog}
       title='Withdraw asset liquidity'
       type='Withdraw'
+      asset={asset}
     />
   )
 }

From 21aebadeb59728bd9b37bb6ddc03e82d0b22c199 Mon Sep 17 00:00:00 2001
From: Emanuel Palestino <75344407+Emanuel-Palestino@users.noreply.github.com>
Date: Tue, 23 Jul 2024 08:34:19 -0600
Subject: [PATCH 4/8] Update
 packages/frontend/app/components/LiquidityDialog.tsx

Added styles for fields consistent

Co-authored-by: Blair Currey <12960453+BlairCurrey@users.noreply.github.com>
---
 packages/frontend/app/components/LiquidityDialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/app/components/LiquidityDialog.tsx b/packages/frontend/app/components/LiquidityDialog.tsx
index e243677b5d..d26ffceac9 100644
--- a/packages/frontend/app/components/LiquidityDialog.tsx
+++ b/packages/frontend/app/components/LiquidityDialog.tsx
@@ -57,7 +57,7 @@ export const LiquidityDialog = ({
                     label='Amount'
                     onChange={e => setAmount(Number(e.target.value))}
                   />
-                  <div className='mt-2'>
+                  <div className='text-gray-500 text-sm mt-2'>
                     <p>Based on the asset:</p>
                     <p>Amount {amount} = {amount / Math.pow(10, asset.scale)} {asset.code} </p>
                   </div>

From 4ca92fe9634ca1912bee001c409b5ab276756dda Mon Sep 17 00:00:00 2001
From: Emanuel Palestino <emanuel.palestino.h@gmail.com>
Date: Thu, 25 Jul 2024 09:05:10 -0600
Subject: [PATCH 5/8] fix(frontend) [assets, peers] improved the type matching
 when asset is passed as a prop

---
 .../frontend/app/routes/assets.$assetId.deposit-liquidity.tsx   | 2 +-
 .../frontend/app/routes/assets.$assetId.withdraw-liquidity.tsx  | 2 +-
 .../frontend/app/routes/peers.$peerId.deposit-liquidity.tsx     | 2 +-
 .../frontend/app/routes/peers.$peerId.withdraw-liquidity.tsx    | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/app/routes/assets.$assetId.deposit-liquidity.tsx b/packages/frontend/app/routes/assets.$assetId.deposit-liquidity.tsx
index a14f5c62f3..b7bf81dc85 100644
--- a/packages/frontend/app/routes/assets.$assetId.deposit-liquidity.tsx
+++ b/packages/frontend/app/routes/assets.$assetId.deposit-liquidity.tsx
@@ -39,7 +39,7 @@ export default function AssetDepositLiquidity() {
       onClose={dismissDialog}
       title='Deposit asset liquidity'
       type='Deposit'
-      asset={asset}
+      asset={{ code: asset.code, scale: asset.scale }}
     />
   )
 }
diff --git a/packages/frontend/app/routes/assets.$assetId.withdraw-liquidity.tsx b/packages/frontend/app/routes/assets.$assetId.withdraw-liquidity.tsx
index e6fbbb9c08..678c908a7d 100644
--- a/packages/frontend/app/routes/assets.$assetId.withdraw-liquidity.tsx
+++ b/packages/frontend/app/routes/assets.$assetId.withdraw-liquidity.tsx
@@ -39,7 +39,7 @@ export default function AssetWithdrawLiquidity() {
       onClose={dismissDialog}
       title='Withdraw asset liquidity'
       type='Withdraw'
-      asset={asset}
+      asset={{ code: asset.code, scale: asset.scale }}
     />
   )
 }
diff --git a/packages/frontend/app/routes/peers.$peerId.deposit-liquidity.tsx b/packages/frontend/app/routes/peers.$peerId.deposit-liquidity.tsx
index 3b0055e5d5..847912e672 100644
--- a/packages/frontend/app/routes/peers.$peerId.deposit-liquidity.tsx
+++ b/packages/frontend/app/routes/peers.$peerId.deposit-liquidity.tsx
@@ -39,7 +39,7 @@ export default function PeerDepositLiquidity() {
       onClose={dismissDialog}
       title='Deposit peer liquidity'
       type='Deposit'
-      asset={asset}
+      asset={{ code: asset.code, scale: asset.scale }}
     />
   )
 }
diff --git a/packages/frontend/app/routes/peers.$peerId.withdraw-liquidity.tsx b/packages/frontend/app/routes/peers.$peerId.withdraw-liquidity.tsx
index 1aeb7899fc..d00c8eabbe 100644
--- a/packages/frontend/app/routes/peers.$peerId.withdraw-liquidity.tsx
+++ b/packages/frontend/app/routes/peers.$peerId.withdraw-liquidity.tsx
@@ -39,7 +39,7 @@ export default function PeerWithdrawLiquidity() {
       onClose={dismissDialog}
       title='Withdraw peer liquidity'
       type='Withdraw'
-      asset={asset}
+      asset={{ code: asset.code, scale: asset.scale }}
     />
   )
 }

From b988929122169672854a9c71fb4343b1f4ef906b Mon Sep 17 00:00:00 2001
From: Emanuel Palestino <emanuel.palestino.h@gmail.com>
Date: Thu, 25 Jul 2024 09:47:52 -0600
Subject: [PATCH 6/8] fix(frontend) Added asset code in user input and handle
 convertion in on change input event

---
 .../app/components/LiquidityDialog.tsx        | 38 ++++++++++++++-----
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/app/components/LiquidityDialog.tsx b/packages/frontend/app/components/LiquidityDialog.tsx
index d26ffceac9..ae56469fa5 100644
--- a/packages/frontend/app/components/LiquidityDialog.tsx
+++ b/packages/frontend/app/components/LiquidityDialog.tsx
@@ -1,6 +1,6 @@
 import { Dialog } from '@headlessui/react'
 import { Form } from '@remix-run/react'
-import { useState } from 'react'
+import { ChangeEvent, useState } from 'react'
 import { XIcon } from '~/components/icons'
 import { Button, Input } from '~/components/ui'
 
@@ -22,7 +22,21 @@ export const LiquidityDialog = ({
   type,
   asset
 }: LiquidityDialogProps) => {
-  const [amount, setAmount] = useState<number>(0)
+  const [actualAmount, setActualAmount] = useState<number>(0)
+  const [errorMessage, setErrorMessage] = useState<string>('')
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const userInput = e.target.value
+    const scaledInput = parseFloat(userInput) * Math.pow(10, asset.scale)
+    const integerScaledInput = Math.floor(scaledInput)
+    if (scaledInput !== integerScaledInput) {
+      const error = 'The asset scale cannot accomodate this value'
+      setErrorMessage(error)
+    } else {
+      setErrorMessage('')
+    }
+    setActualAmount(integerScaledInput)
+  }
 
   return (
     <Dialog as='div' className='relative z-10' onClose={onClose} open={true}>
@@ -51,16 +65,22 @@ export const LiquidityDialog = ({
                 <Form method='post' replace preventScrollReset>
                   <Input
                     required
-                    min={1}
                     type='number'
-                    name='amount'
+                    name='displayAmount'
                     label='Amount'
-                    onChange={e => setAmount(Number(e.target.value))}
+                    onChange={handleChange}
+                    addOn={asset.code}
+                    step='any'
+                    min={1 / Math.pow(10, asset.scale)}
+                    error={errorMessage}
+                  />
+                  <Input
+                    required
+                    min={1}
+                    type='hidden'
+                    name='amount'
+                    value={actualAmount}
                   />
-                  <div className='text-gray-500 text-sm mt-2'>
-                    <p>Based on the asset:</p>
-                    <p>Amount {amount} = {amount / Math.pow(10, asset.scale)} {asset.code} </p>
-                  </div>
                   <div className='flex justify-end py-3'>
                     <Button aria-label={`${type} liquidity`} type='submit'>
                       {type} liquidity

From d39ffe04187602c907baae063054867c4250fc48 Mon Sep 17 00:00:00 2001
From: Emanuel Palestino <emanuel.palestino.h@gmail.com>
Date: Thu, 25 Jul 2024 13:25:33 -0600
Subject: [PATCH 7/8] Format fixes

---
 packages/frontend/app/components/LiquidityDialog.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/app/components/LiquidityDialog.tsx b/packages/frontend/app/components/LiquidityDialog.tsx
index ae56469fa5..578b152e09 100644
--- a/packages/frontend/app/components/LiquidityDialog.tsx
+++ b/packages/frontend/app/components/LiquidityDialog.tsx
@@ -1,6 +1,7 @@
 import { Dialog } from '@headlessui/react'
 import { Form } from '@remix-run/react'
-import { ChangeEvent, useState } from 'react'
+import type { ChangeEvent } from 'react'
+import { useState } from 'react'
 import { XIcon } from '~/components/icons'
 import { Button, Input } from '~/components/ui'
 

From 4232609e5f7651dcf00eb848e2a6c8ae9307c9fc Mon Sep 17 00:00:00 2001
From: Emanuel Palestino <emanuel.palestino.h@gmail.com>
Date: Tue, 30 Jul 2024 10:24:57 -0600
Subject: [PATCH 8/8] fix(frontend) added non positive validation in liquidity
 dialog

---
 .../app/components/LiquidityDialog.tsx        | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/frontend/app/components/LiquidityDialog.tsx b/packages/frontend/app/components/LiquidityDialog.tsx
index 578b152e09..00757aea2f 100644
--- a/packages/frontend/app/components/LiquidityDialog.tsx
+++ b/packages/frontend/app/components/LiquidityDialog.tsx
@@ -30,7 +30,10 @@ export const LiquidityDialog = ({
     const userInput = e.target.value
     const scaledInput = parseFloat(userInput) * Math.pow(10, asset.scale)
     const integerScaledInput = Math.floor(scaledInput)
-    if (scaledInput !== integerScaledInput) {
+    if (scaledInput < 0) {
+      const error = 'The amount should be a positive value'
+      setErrorMessage(error)
+    } else if (scaledInput !== integerScaledInput) {
       const error = 'The asset scale cannot accomodate this value'
       setErrorMessage(error)
     } else {
@@ -63,18 +66,17 @@ export const LiquidityDialog = ({
                 {title}
               </Dialog.Title>
               <div className='mt-2'>
+                <Input
+                  required
+                  type='number'
+                  name='displayAmount'
+                  label='Amount'
+                  onChange={handleChange}
+                  addOn={asset.code}
+                  step='any'
+                  error={errorMessage}
+                />
                 <Form method='post' replace preventScrollReset>
-                  <Input
-                    required
-                    type='number'
-                    name='displayAmount'
-                    label='Amount'
-                    onChange={handleChange}
-                    addOn={asset.code}
-                    step='any'
-                    min={1 / Math.pow(10, asset.scale)}
-                    error={errorMessage}
-                  />
                   <Input
                     required
                     min={1}