frontend: update 'My portfolio' with lightning account

This commit adds functionality to display lightning account in 'My portfolio' in cases where it is active but not associated with a connected or remembered wallet, or when all mainnet accounts in the connected wallet are disabled.
BitBoxSwiss · May 7, 2024 · 4a1bd10 · 4a1bd10
1 parent 9571381
commit 4a1bd10
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 29 deletions.
diff --git a/frontends/web/src/routes/account/summary/accountssummary.tsx b/frontends/web/src/routes/account/summary/accountssummary.tsx
@@ -27,7 +27,7 @@ import { Status } from '../../../components/status/status';
 import { GuideWrapper, GuidedContent, Header, Main } from '../../../components/layout';
 import { View } from '../../../components/view/view';
 import { Chart } from './chart';
-import { SummaryBalance } from './summarybalance';
+import { SummaryBalance, LightningBalance } from './summarybalance';
 import { CoinBalance } from './coinbalance';
 import { AddBuyReceiveOnEmptyBalances } from '../info/buyReceiveCTA';
 import { Entry } from '../../../components/guide/entry';
@@ -36,6 +36,7 @@ import { HideAmountsButton } from '../../../components/hideamountsbutton/hideamo
 import { AppContext } from '../../../contexts/AppContext';
 import { getAccountsByKeystore, isAmbiguiousName } from '../utils';
 import { RatesContext } from '../../../contexts/RatesContext';
+import { useLightning } from '../../../hooks/lightning';
 
 type TProps = {
   accounts: accountApi.IAccount[];
@@ -60,9 +61,26 @@ export function AccountsSummary({ accounts, devices }: TProps) {
   const [accountsTotalBalance, setAccountsTotalBalance] = useState<accountApi.TAccountsTotalBalance>();
   const [coinsTotalBalance, setCoinsTotalBalance] = useState<accountApi.TCoinsTotalBalance>();
   const [balances, setBalances] = useState<Balances>();
+  const { lightningConfig } = useLightning();
 
   const hasCard = useSDCard(devices);
 
+  // this function returns true when the lightning account exists but outside of connected or remembered accounts
+  const isUnlinkedLightningAccount = () => {
+    if (lightningConfig.accounts.length !== 0) {
+      if (accountsByKeystore.length === 0) {
+        return true;
+      } else {
+        const foundLightning = accountsByKeystore.some((accountsKeystore) => {
+          return accountsKeystore.keystore.rootFingerprint === lightningConfig.accounts[0].rootFingerprint;
+        });
+        return !foundLightning;
+      }
+    } else {
+      return false;
+    }
+  };
+
   const getAccountSummary = useCallback(async () => {
     // replace previous timer if present
     if (summaryReqTimerID.current) {
@@ -220,6 +238,9 @@ export function AccountsSummary({ accounts, devices }: TProps) {
                 coinsBalances={coinsTotalBalance}
               />
             )}
+            {isUnlinkedLightningAccount() && (
+              <LightningBalance/>
+            )}
             {accountsByKeystore &&
               (accountsByKeystore.map(({ keystore, accounts }) =>
                 <SummaryBalance

diff --git a/frontends/web/src/routes/account/summary/chart.tsx b/frontends/web/src/routes/account/summary/chart.tsx
@@ -540,35 +540,37 @@ class Chart extends Component<Props, State> {
           </div>
           {!isMobile && <Filters {...chartFiltersProps} />}
         </header>
-        <div className={styles.chartCanvas} style={{ minHeight: chartHeight }}>
-          {chartDataMissing ? (
-            <div className={styles.chartUpdatingMessage} style={{ height: chartHeight }}>
-              {t('chart.dataMissing')}
-            </div>
-          ) : hasData ? !chartIsUpToDate && (
-            <div className={styles.chartUpdatingMessage}>
-              {t('chart.dataOldTimestamp', { time: new Date(lastTimestamp).toLocaleString(this.props.i18n.language), })}
-            </div>
-          ) : noDataPlaceholder}
-          <div ref={this.ref} className={styles.invisible}></div>
-          <span
-            ref={this.refToolTip}
-            className={styles.tooltip}
-            style={{ left: toolTipLeft, top: toolTipTop }}
-            hidden={!toolTipVisible || isMobile}>
-            {toolTipValue !== undefined ? (
-              <span>
-                <h2 className={styles.toolTipValue}>
-                  <Amount amount={toolTipValue} unit={chartFiat}/>
-                  <span className={styles.toolTipUnit}>{chartFiat}</span>
-                </h2>
-                <span className={styles.toolTipTime}>
-                  {this.renderDate(toolTipTime * 1000)}
+        {hasData ? (
+          <div className={styles.chartCanvas} style={{ minHeight: chartHeight }}>
+            {chartDataMissing ? (
+              <div className={styles.chartUpdatingMessage} style={{ height: chartHeight }}>
+                {t('chart.dataMissing')}
+              </div>
+            ) : hasData ? !chartIsUpToDate && (
+              <div className={styles.chartUpdatingMessage}>
+                {t('chart.dataOldTimestamp', { time: new Date(lastTimestamp).toLocaleString(this.props.i18n.language), })}
+              </div>
+            ) : noDataPlaceholder}
+            <div ref={this.ref} className={styles.invisible}></div>
+            <span
+              ref={this.refToolTip}
+              className={styles.tooltip}
+              style={{ left: toolTipLeft, top: toolTipTop }}
+              hidden={!toolTipVisible || isMobile}>
+              {toolTipValue !== undefined ? (
+                <span>
+                  <h2 className={styles.toolTipValue}>
+                    <Amount amount={toolTipValue} unit={chartFiat}/>
+                    <span className={styles.toolTipUnit}>{chartFiat}</span>
+                  </h2>
+                  <span className={styles.toolTipTime}>
+                    {this.renderDate(toolTipTime * 1000)}
+                  </span>
                 </span>
-              </span>
-            ) : null}
-          </span>
-        </div>
+              ) : null}
+            </span>
+          </div>
+        ) : null}
         {isMobile && <Filters {...chartFiltersProps} />}
       </section>
     );

diff --git a/frontends/web/src/routes/account/summary/summarybalance.tsx b/frontends/web/src/routes/account/summary/summarybalance.tsx
@@ -166,3 +166,44 @@ export function SummaryBalance({
     </div>
   );
 }
+
+
+export function LightningBalance() {
+  const { t } = useTranslation();
+  const { lightningConfig } = useLightning();
+  const [lightningBalance, setLightningBalance] = useState<accountApi.IBalance>();
+
+  const fetchLightningBalance = useCallback(async () => {
+    setLightningBalance(await getLightningBalance());
+  }, []);
+
+  useEffect(() => {
+    fetchLightningBalance();
+    const subscriptions = [subscribeNodeState(fetchLightningBalance)];
+    return () => unsubscribe(subscriptions);
+  }, [fetchLightningBalance, lightningConfig]);
+
+  return (
+    <div className={style.balanceTable}>
+      <table className={style.table}>
+        <colgroup>
+          <col width="33%" />
+          <col width="33%" />
+          <col width="*" />
+        </colgroup>
+        <thead>
+          <tr>
+            <th>{t('accountSummary.name')}</th>
+            <th>{t('accountSummary.balance')}</th>
+            <th>{t('accountSummary.fiatBalance')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {lightningBalance && (
+            <BalanceRow key="lightning" code="lightning" name="Lightning" coinCode="lightning" balance={lightningBalance} />
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}