fix: #237: add available balance field to the limit order form (#293)

penumbra-zone · Jan 17, 2025 · db00112 · db00112
1 parent ac232f3
commit db00112
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/src/pages/trade/ui/order-form/info-row.tsx b/src/pages/trade/ui/order-form/info-row.tsx
@@ -10,7 +10,7 @@ interface InfoRowProps {
   isLoading?: boolean;
   value?: string | number;
   valueColor?: 'success' | 'error';
-  toolTip: string;
+  toolTip?: string;
 }
 
 const getValueColor = (valueColor: InfoRowProps['valueColor']) => {
@@ -42,9 +42,11 @@ export const InfoRow = observer(
               </Text>
             )}
           </div>
-          <Tooltip message={toolTip}>
-            <Icon IconComponent={InfoIcon} size='sm' color='text.primary' />
-          </Tooltip>
+          {toolTip && (
+            <Tooltip message={toolTip}>
+              <Icon IconComponent={InfoIcon} size='sm' color='text.primary' />
+            </Tooltip>
+          )}
         </div>
       </div>
     );

diff --git a/src/pages/trade/ui/order-form/order-form-limit.tsx b/src/pages/trade/ui/order-form/order-form-limit.tsx
@@ -10,6 +10,7 @@ import { InfoRowGasFee } from './info-row-gas-fee';
 import { SelectGroup } from './select-group';
 import { OrderFormStore } from './store/OrderFormStore';
 import { BuyLimitOrderOptions, SellLimitOrderOptions } from './store/LimitOrderFormStore';
+import { InfoRow } from '@/pages/trade/ui/order-form/info-row';
 
 export const LimitOrderForm = observer(({ parentStore }: { parentStore: OrderFormStore }) => {
   const { connected } = connectionStore;
@@ -54,6 +55,7 @@ export const LimitOrderForm = observer(({ parentStore }: { parentStore: OrderFor
         />
       </div>
       <div className='mb-4'>
+        <InfoRow label='Available balance' value={store.balance} />
         <InfoRowTradingFee />
         <InfoRowGasFee
           gasFee={parentStore.gasFee.display}

diff --git a/src/pages/trade/ui/order-form/store/LimitOrderFormStore.ts b/src/pages/trade/ui/order-form/store/LimitOrderFormStore.ts
@@ -141,6 +141,16 @@ export class LimitOrderFormStore {
     });
   }
 
+  get balance(): string {
+    if (this.direction === 'buy' && this._quoteAsset?.balance) {
+      return this._quoteAsset.formatDisplayAmount(this._quoteAsset.balance);
+    }
+    if (this.direction === 'sell' && this._baseAsset?.balance) {
+      return this._baseAsset.formatDisplayAmount(this._baseAsset.balance);
+    }
+    return '--';
+  }
+
   setAssets(base: AssetInfo, quote: AssetInfo, resetInputs = false) {
     this._baseAsset = base;
     this._quoteAsset = quote;