frontend/account-summary: add coins total balance

strmci · strmci · commit ce1bb69039eb · 2024-03-26T11:39:46.000+01:00
Before this update, the account summary didn't show total coin balances, especially when managing multiple wallets with the watch-only feature. This commit addresses that by adding a new coin balances table below the chart. It appears only when there are multiple wallets in the portfolio. Restored backend code previously removed in commit d8c6ba0.
diff --git a/backend/handlers/handlers.go b/backend/handlers/handlers.go
@@ -213,6 +213,7 @@ func NewHandlers(
 	getAPIRouterNoError(apiRouter)("/keystores", handlers.getKeystores).Methods("GET")
 	getAPIRouterNoError(apiRouter)("/accounts", handlers.getAccounts).Methods("GET")
 	getAPIRouter(apiRouter)("/accounts/balance", handlers.getAccountsBalance).Methods("GET")
+	getAPIRouter(apiRouter)("/accounts/coins-balance", handlers.getCoinsTotalBalance).Methods("GET")
 	getAPIRouter(apiRouter)("/accounts/total-balance", handlers.getAccountsTotalBalance).Methods("GET")
 	getAPIRouterNoError(apiRouter)("/set-account-active", handlers.postSetAccountActive).Methods("POST")
 	getAPIRouterNoError(apiRouter)("/set-token-active", handlers.postSetTokenActive).Methods("POST")
@@ -749,6 +750,59 @@ func (handlers *Handlers) getAccountsBalance(*http.Request) (interface{}, error)
 	return totalAmount, nil
 }
 
+// getCoinsTotalBalance returns the total balances grouped by coins.
+func (handlers *Handlers) getCoinsTotalBalance(_ *http.Request) (interface{}, error) {
+	totalPerCoin := make(map[coin.Code]*big.Int)
+	conversionsPerCoin := make(map[coin.Code]map[string]string)
+
+	totalAmount := make(map[coin.Code]accountHandlers.FormattedAmount)
+
+	for _, account := range handlers.backend.Accounts() {
+		if account.Config().Config.Inactive || account.Config().Config.HiddenBecauseUnused {
+			continue
+		}
+		if account.FatalError() {
+			continue
+		}
+		err := account.Initialize()
+		if err != nil {
+			return nil, err
+		}
+		coinCode := account.Coin().Code()
+		b, err := account.Balance()
+		if err != nil {
+			return nil, err
+		}
+		amount := b.Available()
+		if _, ok := totalPerCoin[coinCode]; !ok {
+			totalPerCoin[coinCode] = amount.BigInt()
+
+		} else {
+			totalPerCoin[coinCode] = new(big.Int).Add(totalPerCoin[coinCode], amount.BigInt())
+		}
+
+		conversionsPerCoin[coinCode] = coin.Conversions(
+			coin.NewAmount(totalPerCoin[coinCode]),
+			account.Coin(),
+			false,
+			account.Config().RateUpdater,
+			util.FormatBtcAsSat(handlers.backend.Config().AppConfig().Backend.BtcUnit))
+	}
+
+	for k, v := range totalPerCoin {
+		currentCoin, err := handlers.backend.Coin(k)
+		if err != nil {
+			return nil, err
+		}
+		totalAmount[k] = accountHandlers.FormattedAmount{
+			Amount:      currentCoin.FormatAmount(coin.NewAmount(v), false),
+			Unit:        currentCoin.GetFormatUnit(false),
+			Conversions: conversionsPerCoin[k],
+		}
+	}
+	return totalAmount, nil
+}
+
 // getAccountsTotalBalanceHandler returns the total balance of all the accounts, gruped by keystore.
 func (handlers *Handlers) getAccountsTotalBalance(*http.Request) (interface{}, error) {
 	type response struct {
diff --git a/frontends/web/src/api/account.ts b/frontends/web/src/api/account.ts
@@ -103,6 +103,14 @@ export const getAccountsTotalBalance = (): Promise<TAccountsTotalBalanceResponse
   return apiGet('accounts/total-balance');
 };
 
+export type TCoinsTotalBalance = {
+  [key: string]: IAmount;
+};
+
+export const getCoinsTotalBalance = (): Promise<TCoinsTotalBalance> => {
+  return apiGet('accounts/coins-balance');
+};
+
 type TEthAccountCodeAndNameByAddress = SuccessResponse & {
   code: AccountCode;
   name: string;
diff --git a/frontends/web/src/locales/en/app.json b/frontends/web/src/locales/en/app.json
@@ -41,6 +41,7 @@
   "accountSummary": {
     "availableBalance": "Available balance",
     "balance": "Balance",
+    "coin": "Coin",
     "exportSummary": "Export accounts summary to downloads folder as CSV file",
     "fiatBalance": "Fiat balance",
     "name": "Account name",
diff --git a/frontends/web/src/routes/account/summary/accountssummary.tsx b/frontends/web/src/routes/account/summary/accountssummary.tsx
@@ -28,6 +28,7 @@ import { GuideWrapper, GuidedContent, Header, Main } from '../../../components/l
 import { View } from '../../../components/view/view';
 import { Chart } from './chart';
 import { SummaryBalance } from './summarybalance';
+import { CoinBalance } from './coinbalance';
 import { AddBuyReceiveOnEmptyBalances } from '../info/buyReceiveCTA';
 import { Entry } from '../../../components/guide/entry';
 import { Guide } from '../../../components/guide/guide';
@@ -60,6 +61,7 @@ export function AccountsSummary({
   const [summaryData, setSummaryData] = useState<accountApi.ISummary>();
   const [balancePerCoin, setBalancePerCoin] = useState<accountApi.TAccountsBalance>();
   const [accountsTotalBalance, setAccountsTotalBalance] = useState<accountApi.TAccountsTotalBalance>();
+  const [coinsTotalBalance, setCoinsTotalBalance] = useState<accountApi.TCoinsTotalBalance>();
   const [balances, setBalances] = useState<Balances>();
 
   const hasCard = useSDCard(devices);
@@ -109,6 +111,17 @@ export function AccountsSummary({
     }
   }, [mounted]);
 
+  const getCoinsTotalBalance = useCallback(async () => {
+    try {
+      const coinBalance = await accountApi.getCoinsTotalBalance();
+      if (!mounted.current) {
+        return;
+      }
+      setCoinsTotalBalance(coinBalance);
+    } catch (err) {
+      console.error(err);
+    }
+  }, [mounted]);
 
   const onStatusChanged = useCallback(async (
     code: accountApi.AccountCode,
@@ -157,7 +170,8 @@ export function AccountsSummary({
     getAccountSummary();
     getAccountsBalance();
     getAccountsTotalBalance();
-  }, [getAccountSummary, getAccountsBalance, getAccountsTotalBalance, defaultCurrency]);
+    getCoinsTotalBalance();
+  }, [getAccountSummary, getAccountsBalance, getAccountsTotalBalance, getCoinsTotalBalance, defaultCurrency]);
 
   // update the timer to get a new account summary update when receiving the previous call result.
   useEffect(() => {
@@ -177,8 +191,8 @@ export function AccountsSummary({
       onStatusChanged(account.code);
     });
     getAccountsBalance();
-  }, [onStatusChanged, getAccountsBalance, accounts]);
-
+    getCoinsTotalBalance();
+  }, [onStatusChanged, getAccountsBalance, getCoinsTotalBalance, accounts]);
   return (
     <GuideWrapper>
       <GuidedContent>
@@ -198,6 +212,13 @@ export function AccountsSummary({
                   <AddBuyReceiveOnEmptyBalances accounts={accounts} balances={balances} />
                 ) : undefined
               } />
+            {accountsByKeystore.length > 1 && (
+              <CoinBalance
+                accounts={accounts}
+                summaryData={summaryData}
+                coinsBalances={coinsTotalBalance}
+              />
+            )}
             {accountsByKeystore &&
               (accountsByKeystore.map(({ keystore, accounts }) =>
                 <SummaryBalance
diff --git a/frontends/web/src/routes/account/summary/coinbalance.tsx b/frontends/web/src/routes/account/summary/coinbalance.tsx
@@ -0,0 +1,113 @@
+/**
+ * Copyright 2024 Shift Crypto AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useTranslation } from 'react-i18next';
+import * as accountApi from '../../../api/account';
+import { SubTotalCoinRow } from './subtotalrow';
+import { Amount } from '../../../components/amount/amount';
+import { Skeleton } from '../../../components/skeleton/skeleton';
+import style from './accountssummary.module.css';
+
+type TProps = {
+  accounts: accountApi.IAccount[],
+  summaryData?: accountApi.ISummary,
+  coinsBalances?: accountApi.TCoinsTotalBalance,
+}
+
+type TAccountCoinMap = {
+    [code in accountApi.CoinCode]: accountApi.IAccount[];
+};
+
+export function CoinBalance ({
+  accounts,
+  summaryData,
+  coinsBalances,
+}: TProps) {
+  const { t } = useTranslation();
+
+  const getAccountsPerCoin = () => {
+    return accounts.reduce((accountPerCoin, account) => {
+      accountPerCoin[account.coinCode]
+        ? accountPerCoin[account.coinCode].push(account)
+        : accountPerCoin[account.coinCode] = [account];
+      return accountPerCoin;
+    }, {} as TAccountCoinMap);
+  };
+
+  const accountsPerCoin = getAccountsPerCoin();
+  const coins = Object.keys(accountsPerCoin) as accountApi.CoinCode[];
+
+  return (
+    <div>
+      <div className={style.accountName}>
+        <p>{t('accountSummary.total')}</p>
+      </div>
+      <div className={style.balanceTable}>
+        <table className={style.table}>
+          <colgroup>
+            <col width="33%" />
+            <col width="33%" />
+            <col width="*" />
+          </colgroup>
+          <thead>
+            <tr>
+              <th>{t('accountSummary.coin')}</th>
+              <th>{t('accountSummary.balance')}</th>
+              <th>{t('accountSummary.fiatBalance')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            { accounts.length > 0 ? (
+              coins.map(coinCode => {
+                if (accountsPerCoin[coinCode]?.length >= 1) {
+                  const account = accountsPerCoin[coinCode][0];
+                  return (
+                    <SubTotalCoinRow
+                      key={account.coinCode}
+                      coinCode={account.coinCode}
+                      coinName={account.coinName}
+                      balance={coinsBalances && coinsBalances[coinCode]}
+                    />
+                  );
+                }
+                return null;
+              })) : null}
+          </tbody>
+          <tfoot>
+            <tr>
+              <th>
+                <strong>{t('accountSummary.total')}</strong>
+              </th>
+              <td colSpan={2}>
+                {(summaryData && summaryData.formattedChartTotal !== null) ? (
+                  <>
+                    <strong>
+                      <Amount amount={summaryData.formattedChartTotal} unit={summaryData.chartFiat}/>
+                    </strong>
+                    {' '}
+                    <span className={style.coinUnit}>
+                      {summaryData.chartFiat}
+                    </span>
+                  </>
+                ) : (<Skeleton />) }
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+    </div>
+  );
+}
diff --git a/frontends/web/src/routes/account/summary/subtotalrow.tsx b/frontends/web/src/routes/account/summary/subtotalrow.tsx
@@ -65,3 +65,36 @@ export function SubTotalRow ({ coinCode, coinName, balance }: TProps) {
     </tr>
   );
 }
+
+
+export function SubTotalCoinRow ({ coinCode, coinName, balance }: TProps) {
+  const { t } = useTranslation();
+  const nameCol = (
+    <td data-label={t('accountSummary.total')}>
+      <div className={style.coinName}>
+        <Logo className={style.coincode} coinCode={coinCode} active={true} alt={coinCode} />
+        <span className={style.showOnTableView}>
+          {coinName}
+        </span>
+      </div>
+    </td>
+  );
+  if (!balance) {
+    return null;
+  }
+  return (
+    <tr key={`${coinCode}_subtotal`} className={style.subTotal}>
+      { nameCol }
+      <td data-label={t('accountSummary.balance')}>
+        <span className={style.summaryTableBalance}>
+          <Amount amount={balance.amount} unit={balance.unit}/>
+          {' '}
+          <span className={style.coinUnit}>{balance.unit}</span>
+        </span>
+      </td>
+      <td data-label={t('accountSummary.fiatBalance')}>
+        <FiatConversion amount={balance} noAction={true} />
+      </td>
+    </tr>
+  );
+}
