From 9b7fcdc3ef91c3716ba7940a801dbe8173f08eac Mon Sep 17 00:00:00 2001 From: Emanuel Palestino <75344407+Emanuel-Palestino@users.noreply.github.com> Date: Wed, 31 Jul 2024 03:24:21 -0600 Subject: [PATCH 01/15] fix(frontend): It is ambiguous on what scale is the withdrawal and deposit input (#2817) * fix(frontend): asset scale consistency in liquidity dialogs. * Ensure asset scale consistency when displaying and withdrawing liquidity by adding asset info to the liquidity dialog component and updating the input handling in Rafiki Admin UI. --------- Co-authored-by: Blair Currey <12960453+BlairCurrey@users.noreply.github.com> --- .../app/components/LiquidityDialog.tsx | 44 +++++++++++++++++-- .../assets.$assetId.deposit-liquidity.tsx | 27 +++++++++--- .../assets.$assetId.withdraw-liquidity.tsx | 27 +++++++++--- .../peers.$peerId.deposit-liquidity.tsx | 27 +++++++++--- .../peers.$peerId.withdraw-liquidity.tsx | 27 +++++++++--- 5 files changed, 129 insertions(+), 23 deletions(-) diff --git a/packages/frontend/app/components/LiquidityDialog.tsx b/packages/frontend/app/components/LiquidityDialog.tsx index dc8e43c1a5..00757aea2f 100644 --- a/packages/frontend/app/components/LiquidityDialog.tsx +++ b/packages/frontend/app/components/LiquidityDialog.tsx @@ -1,19 +1,47 @@ import { Dialog } from '@headlessui/react' import { Form } from '@remix-run/react' +import type { ChangeEvent } from 'react' +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 [actualAmount, setActualAmount] = useState(0) + const [errorMessage, setErrorMessage] = useState('') + + const handleChange = (e: ChangeEvent) => { + const userInput = e.target.value + const scaledInput = parseFloat(userInput) * Math.pow(10, asset.scale) + const integerScaledInput = Math.floor(scaledInput) + 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 { + setErrorMessage('') + } + setActualAmount(integerScaledInput) + } + return (
@@ -38,13 +66,23 @@ export const LiquidityDialog = ({ {title}
+