update balance table when performing an action (#56)

* update balance table when performing an action

* filter assets with no amount as a result of an action

* feat: slippage tolerance input added

* update default slippage to 1%

components/BorrowModal.tsx

@@ -310,7 +310,7 @@ const BorrowModal = ({ show, onClose, tokenDenom }: Props) => {
                           </tr>
                         </thead>
                         <tbody>
-                          {positionsData?.coins.map((coin) => (
+                          {accountStats?.assets.map((coin) => (
                             <tr key={coin.denom} className='text-xs text-white/50'>
                               <td>{getTokenSymbol(coin.denom)}</td>
                               <td>
@@ -327,7 +327,7 @@ const BorrowModal = ({ show, onClose, tokenDenom }: Props) => {
                               <td className='text-right'>-</td>
                             </tr>
                           ))}
-                          {positionsData?.debts.map((coin) => (
+                          {accountStats?.debts.map((coin) => (
                             <tr key={coin.denom} className='text-xs text-red-500'>
                               <td className='text-white/50'>{getTokenSymbol(coin.denom)}</td>
                               <td>

components/Trade/TradeActionModule.tsx

@@ -27,6 +27,7 @@ const TradeActionModule = () => {
   const [selectedTokenOut, setSelectedTokenOut] = useState('')
   const [amountIn, setAmountIn] = useState(0)
   const [amountOut, setAmountOut] = useState(0)
+  const [slippageTolerance, setSlippageTolerance] = useState(1)
   const [fundingMode, setFundingMode] = useState<FundingMode>(FundingMode.WalletAndAccount)
 
   const [isMarginEnabled, setIsMarginEnabled] = React.useState(false)
@@ -87,7 +88,7 @@ const TradeActionModule = () => {
     depositAmount,
     selectedTokenIn,
     selectedTokenOut,
-    0.1,
+    slippageTolerance / 100,
     {
       onSuccess: () => {
         toast.success(
@@ -320,8 +321,18 @@ const TradeActionModule = () => {
           <p>{isMarginEnabled ? `${(borrowRate * 100).toFixed(2)}%` : '-'}</p>
         </div>
       </div>
-      <div className='h-[100px] p-2'>
+      <div className='p-2'>
         <div className='mb-6'>OTHER INFO PLACEHOLDER</div>
+        <div className='mb-2 flex justify-between'>
+          <p>Slippage Tolerance:</p>
+          <input
+            type='number'
+            step='0.1'
+            className='w-20 px-2 text-black'
+            onChange={(e) => setSlippageTolerance(e.target.valueAsNumber)}
+            value={slippageTolerance}
+          />
+        </div>
         <div className='flex justify-between'>
           <p>Funded From</p>
           <select value={fundingMode} className='text-black' onChange={handleFundingModeChange}>

components/WithdrawModal.tsx

@@ -1,5 +1,4 @@
 import { Dialog, Switch, Transition } from '@headlessui/react'
-import * as RSlider from '@radix-ui/react-slider'
 import BigNumber from 'bignumber.js'
 import React, { useEffect, useMemo, useState } from 'react'
 import { toast } from 'react-toastify'
@@ -303,7 +302,7 @@ const WithdrawModal = ({ show, onClose }: any) => {
                           </tr>
                         </thead>
                         <tbody>
-                          {positionsData?.coins.map((coin) => (
+                          {accountStats?.assets.map((coin) => (
                             <tr key={coin.denom} className='text-xs text-white/50'>
                               <td>{getTokenSymbol(coin.denom)}</td>
                               <td>
@@ -320,7 +319,7 @@ const WithdrawModal = ({ show, onClose }: any) => {
                               <td className='text-right'>-</td>
                             </tr>
                           ))}
-                          {positionsData?.debts.map((coin) => (
+                          {accountStats?.debts.map((coin) => (
                             <tr key={coin.denom} className='text-xs text-red-500'>
                               <td className='text-white/50'>{getTokenSymbol(coin.denom)}</td>
                               <td>

hooks/useAccountStats.tsx

@@ -124,6 +124,8 @@ const useAccountStats = (actions?: AccountStatsAction[]) => {
       risk,
       totalPosition,
       totalDebt,
+      assets,
+      debts,
     }
   }, [marketsData, positionsData, tokenPrices])
 
@@ -215,16 +217,18 @@ const useAccountStats = (actions?: AccountStatsAction[]) => {
       }
     })
 
-    const assets = resultPositionsCoins.map((coin) => {
-      const market = marketsData[coin.denom]
+    const assets = resultPositionsCoins
+      .filter((coin) => coin.amount !== '0')
+      .map((coin) => {
+        const market = marketsData[coin.denom]
 
-      return {
-        amount: coin.amount,
-        denom: coin.denom,
-        liquidationThreshold: market.liquidation_threshold,
-        basePrice: tokenPrices[coin.denom],
-      }
-    })
+        return {
+          amount: coin.amount,
+          denom: coin.denom,
+          liquidationThreshold: market.liquidation_threshold,
+          basePrice: tokenPrices[coin.denom],
+        }
+      })
 
     const debts = resultPositionsDebts.map((debt) => {
       return {
@@ -245,6 +249,8 @@ const useAccountStats = (actions?: AccountStatsAction[]) => {
       risk,
       totalPosition,
       totalDebt,
+      assets,
+      debts,
     }
   }, [actions, marketsData, positionsData, tokenPrices])