From d0d87e75e255634ab8afffcda2135785e6b4a70a Mon Sep 17 00:00:00 2001
From: Linkie Link <linkielink.dev@gmail.com>
Date: Tue, 24 Oct 2023 09:18:23 +0200
Subject: [PATCH] User feedback (#575)

* feat: added debt indicator and adjusted the borrowModal

* fix: wallet interaction fix
---
 .../Account/AccountBalancesTable/index.tsx    |  1 +
 src/components/Modals/BorrowModal.tsx         | 37 ++++++++++++++-----
 .../Wallet/WalletConnectedButton.tsx          | 12 ++++--
 src/components/Wallet/index.tsx               |  5 +--
 4 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/src/components/Account/AccountBalancesTable/index.tsx b/src/components/Account/AccountBalancesTable/index.tsx
index 13c6a3a6..334e4d18 100644
--- a/src/components/Account/AccountBalancesTable/index.tsx
+++ b/src/components/Account/AccountBalancesTable/index.tsx
@@ -64,6 +64,7 @@ export default function Index(props: Props) {
           return (
             <Text size='xs'>
               {row.original.symbol}
+              {row.original.type === 'borrowing' && <span className='ml-1 text-loss'>(debt)</span>}
               {row.original.type === 'lending' && <span className='ml-1 text-profit'>(lent)</span>}
               {row.original.type === 'vault' && <span className='ml-1 text-profit'>(farm)</span>}
             </Text>
diff --git a/src/components/Modals/BorrowModal.tsx b/src/components/Modals/BorrowModal.tsx
index f131c7b2..a94b8c85 100644
--- a/src/components/Modals/BorrowModal.tsx
+++ b/src/components/Modals/BorrowModal.tsx
@@ -24,7 +24,7 @@ import { getDepositAndLendCoinsToSpend } from 'hooks/useUpdatedAccount/functions
 import useStore from 'store'
 import { BNCoin } from 'types/classes/BNCoin'
 import { byDenom } from 'utils/array'
-import { formatPercent, formatValue } from 'utils/formatters'
+import { formatPercent } from 'utils/formatters'
 import { BN } from 'utils/helpers'
 import { getDebtAmountWithInterest } from 'utils/tokens'
 
@@ -204,15 +204,32 @@ function BorrowModal(props: Props) {
           title={formatPercent(modal.marketData.borrowRate || '0')}
           sub={'Borrow rate'}
         />
-        <div className='h-100 w-[1px] bg-white/10' />
-        <TitleAndSubCell
-          title={formatValue(getDebtAmount(modal), {
-            abbreviated: false,
-            decimals: asset.decimals,
-            maxDecimals: asset.decimals,
-          })}
-          sub={'Borrowed'}
-        />
+        {totalDebt.isGreaterThan(0) && (
+          <>
+            <div className='h-100 w-[1px] bg-white/10' />
+            <div className='flex flex-col gap-0.5'>
+              <div className='flex gap-2'>
+                <FormattedNumber
+                  className='text-xs'
+                  amount={totalDebt.toNumber()}
+                  options={{
+                    decimals: asset.decimals,
+                    abbreviated: false,
+                    suffix: ` ${asset.symbol}`,
+                  }}
+                />
+                <DisplayCurrency
+                  className='text-xs'
+                  coin={BNCoin.fromDenomAndBigNumber(asset.denom, totalDebt)}
+                  parentheses
+                />
+              </div>
+              <Text size='xs' className='text-white/50' tag='span'>
+                Borrowed
+              </Text>
+            </div>
+          </>
+        )}
         <div className='h-100 w-[1px] bg-white/10' />
         <div className='flex flex-col gap-0.5'>
           <div className='flex gap-2'>
diff --git a/src/components/Wallet/WalletConnectedButton.tsx b/src/components/Wallet/WalletConnectedButton.tsx
index 649f620d..71ec06d8 100644
--- a/src/components/Wallet/WalletConnectedButton.tsx
+++ b/src/components/Wallet/WalletConnectedButton.tsx
@@ -61,9 +61,15 @@ export default function WalletConnectedButton() {
   }, [network, address])
 
   const onDisconnectWallet = () => {
-    if (!currentWallet) return
-    disconnectWallet(currentWallet)
-    useStore.setState({ client: undefined, address: undefined, accounts: null, balances: [] })
+    if (currentWallet) disconnectWallet(currentWallet)
+
+    useStore.setState({
+      client: undefined,
+      address: undefined,
+      accounts: null,
+      balances: [],
+      focusComponent: null,
+    })
 
     if (focusComponent) {
       useStore.setState({
diff --git a/src/components/Wallet/index.tsx b/src/components/Wallet/index.tsx
index 76b8c79d..e507c16a 100644
--- a/src/components/Wallet/index.tsx
+++ b/src/components/Wallet/index.tsx
@@ -11,11 +11,10 @@ export default function Wallet() {
   const { disconnectWallet } = useShuttle()
   const currentWallet = useCurrentWallet()
   const address = useStore((s) => s.address)
-  const focusComponent = useStore((s) => s.focusComponent)
 
   useEffect(() => {
     if (!currentWallet) return
-    if (currentWallet.account.address === address || focusComponent) return
+    if (currentWallet.account.address === address) return
     useStore.setState({
       address: undefined,
       client: undefined,
@@ -33,7 +32,7 @@ export default function Wallet() {
         },
       },
     })
-  }, [currentWallet, address, focusComponent, disconnectWallet])
+  }, [currentWallet, address, disconnectWallet])
 
   return address ? <WalletConnectedButton /> : <WalletConnectButton />
 }