Merge pull request #723 from hemilabs/add-min-deposit-withdraw-operation

Show min amount to deposit/withdraw Bitcoin
hemilabs · Dec 30, 2024 · c3f400d · c3f400d
2 parents c9bb92e + 4bbba88
commit c3f400d
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 9 deletions.
diff --git a/webapp/app/[locale]/tunnel/_components/deposit.tsx b/webapp/app/[locale]/tunnel/_components/deposit.tsx
@@ -122,8 +122,6 @@ const BtcDeposit = function ({ state }: BtcDepositProps) {
   const bitcoin = useBitcoin()
   const { balance } = useBtcBalance()
 
-  // TODO we need to let the user know about the min value to deposit
-  // See https://github.com/hemilabs/ui-monorepo/issues/454
   const canDeposit =
     canSubmit({
       balance: BigInt(balance?.confirmed ?? 0),
@@ -203,6 +201,10 @@ const BtcDeposit = function ({ state }: BtcDepositProps) {
         formContent={
           <FormContent
             isRunningOperation={isDepositing}
+            minInputMsg={t('tunnel-page.form.min-deposit', {
+              amount: minBitcoinDeposit,
+              symbol: bitcoin.nativeCurrency.symbol,
+            })}
             setMaxBalanceButton={
               <SetMaxBtcBalance
                 fromToken={fromToken}

diff --git a/webapp/app/[locale]/tunnel/_components/form.tsx b/webapp/app/[locale]/tunnel/_components/form.tsx
@@ -26,17 +26,19 @@ const TransactionStatus = dynamic(
 )
 
 type FormContentProps = {
+  isRunningOperation: boolean
+  minInputMsg?: string
   setMaxBalanceButton: ReactNode
   tokenApproval?: ReactNode
   tunnelState: ReturnType<typeof useTunnelState>
-  isRunningOperation: boolean
 }
 
 export const FormContent = function ({
+  isRunningOperation,
+  minInputMsg,
   setMaxBalanceButton,
   tokenApproval,
   tunnelState,
-  isRunningOperation,
 }: FormContentProps) {
   const {
     fromNetworkId,
@@ -85,6 +87,7 @@ export const FormContent = function ({
         isRunningOperation={isRunningOperation}
         label={t('form.send')}
         maxBalanceButton={setMaxBalanceButton}
+        minInputMsg={minInputMsg}
         onChange={updateFromInput}
         onSelectToken={updateFromToken}
         token={fromToken}

diff --git a/webapp/app/[locale]/tunnel/_components/tokenInput.tsx b/webapp/app/[locale]/tunnel/_components/tokenInput.tsx
@@ -23,6 +23,7 @@ type Props = {
   isRunningOperation: boolean
   label: string
   maxBalanceButton?: ReactNode
+  minInputMsg?: string
   onChange: (value: string) => void
   token: Token
   value: string
@@ -35,6 +36,7 @@ export const TokenInput = function ({
   isRunningOperation,
   label,
   maxBalanceButton,
+  minInputMsg,
   token,
   value,
   ...props
@@ -48,7 +50,7 @@ export const TokenInput = function ({
       p-4 font-medium text-neutral-500 hover:border-neutral-300/55"
     >
       <div className="flex h-full items-center justify-between">
-        <div className="flex flex-shrink flex-grow flex-col items-start">
+        <div className="flex h-full flex-shrink flex-grow flex-col items-start">
           <span className="text-sm">{label}</span>
           <input
             className={`
@@ -61,6 +63,11 @@ export const TokenInput = function ({
             type="text"
             value={value}
           />
+          {!!minInputMsg && (
+            <span className="mt-auto text-sm font-medium text-neutral-500">
+              {minInputMsg}
+            </span>
+          )}
         </div>
         <div className="flex h-full flex-col items-end justify-end gap-y-3 text-sm">
           {readOnly ? (

diff --git a/webapp/app/[locale]/tunnel/_components/withdraw.tsx b/webapp/app/[locale]/tunnel/_components/withdraw.tsx
@@ -39,7 +39,7 @@ import { FormContent, TunnelForm } from './form'
 import { ReceivingAddress } from './receivingAddress'
 import { SubmitWithTwoWallets } from './submitWithTwoWallets'
 
-const MinBitcoinWithdraw = '0.005'
+const minBitcoinWithdraw = '0.01'
 
 const SetMaxEvmBalance = dynamic(
   () => import('./setMaxBalance').then(mod => mod.SetMaxEvmBalance),
@@ -153,16 +153,14 @@ const BtcWithdraw = function ({ state }: BtcWithdrawProps) {
     setIsWithdrawing(true)
   }
 
-  // TODO we need to let the user know about the min value to withdraw
-  // See https://github.com/hemilabs/ui-monorepo/issues/454
   const canWithdraw =
     canSubmit({
       balance: bitcoinBalance,
       chainId: evmChainId,
       fromInput,
       fromNetworkId,
       fromToken,
-    }) && Big(fromInput).gte(MinBitcoinWithdraw)
+    }) && Big(fromInput).gte(minBitcoinWithdraw)
 
   const gas = {
     amount: formatUnits(estimatedFees, fromChain?.nativeCurrency.decimals),
@@ -219,6 +217,10 @@ const BtcWithdraw = function ({ state }: BtcWithdrawProps) {
       formContent={
         <FormContent
           isRunningOperation={isWithdrawing}
+          minInputMsg={t('tunnel-page.form.min-withdraw', {
+            amount: minBitcoinWithdraw,
+            symbol: fromToken.symbol,
+          })}
           setMaxBalanceButton={
             <SetMaxEvmBalance
               fromToken={fromToken}

diff --git a/webapp/messages/en.json b/webapp/messages/en.json
@@ -213,6 +213,8 @@
       "hemi-receiving-address": "Receiving Hemi address",
       "hemi-receiving-address-description": "You will receive your tunneled {symbol} to the connected EVM wallet address.",
       "max": "max",
+      "min-deposit": "Minimum deposit is {amount} {symbol}",
+      "min-withdraw": "Minimum withdraw is {amount} {symbol}",
       "receive": "Receive",
       "send": "Send",
       "switch-to-prove": "Switch to {network} to complete transaction",

diff --git a/webapp/messages/es.json b/webapp/messages/es.json
@@ -213,6 +213,8 @@
       "hemi-receiving-address": "Dirección de recepción en Hemi",
       "hemi-receiving-address-description": "Recibirá su {symbol} tunelizado en la dirección de la billetera EVM conectada.",
       "max": "max",
+      "min-deposit": "El monto mínimo para depositar es {amount} {symbol}",
+      "min-withdraw": "El monto mínimo para retirar es {amount} {symbol}",
       "receive": "Recibir",
       "send": "Enviar",
       "switch-to-prove": "Cambie a {network} para completar la transacción",