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>