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.

The total coins table is updated to include the Lightning account,
and the Lightning configuration now also contains the keystore
name.

backend/config/config_test.go

@@ -116,6 +116,7 @@ func TestSetLightningConfig(t *testing.T) {
 		Code:            "v0-test-ln-0",
 		Number:          0,
 		RootFingerprint: []byte("fingerprint"),
+		KeyStoreName:    "test",
 	})
 	require.NoError(t, cfg.SetLightningConfig(lightningCfg))
 

backend/config/lightning.go

@@ -26,6 +26,8 @@ type LightningAccountConfig struct {
 	Mnemonic string `json:"mnemonic"`
 	// RootFingerprint is fingerprint of the keystore that generated the entropy.
 	RootFingerprint jsonp.HexBytes `json:"rootFingerprint"`
+	// KeyStoreName is name of the keystore.
+	KeyStoreName string `json:"keystoreName"`
 	// Code is the code of the lightning account.
 	Code types.Code `json:"code"`
 	// Number is the lightning account incremental number.

backend/handlers/handlers.go

@@ -781,6 +781,15 @@ func (handlers *Handlers) getCoinsTotalBalance(_ *http.Request) (interface{}, er
 	var sortedCoins []coin.Code
 	totalCoinsBalances := make(map[coin.Code]*big.Int)
 
+	if handlers.backend.Config().LightningConfig().LightningEnabled() {
+		lightningBalance, err := handlers.backend.Lightning().Balance()
+		if err != nil {
+			return nil, err
+		}
+		totalCoinsBalances[coin.CodeBTC] = lightningBalance.Available().BigInt()
+		sortedCoins = append(sortedCoins, coin.CodeBTC)
+	}
+
 	for _, account := range handlers.backend.Accounts() {
 		if account.Config().Config.Inactive || account.Config().Config.HiddenBecauseUnused {
 			continue

backend/lightning/lightning.go

@@ -102,6 +102,11 @@ func (lightning *Lightning) Activate() error {
 		return err
 	}
 
+	keystoreName, err := keystore.Name()
+	if err != nil {
+		return err
+	}
+
 	entropyMnemonic, err := bip39.NewMnemonic(entropy)
 	if err != nil {
 		lightning.log.WithError(err).Warn("Error generating mnemonic")
@@ -111,6 +116,7 @@ func (lightning *Lightning) Activate() error {
 	lightningAccount := config.LightningAccountConfig{
 		Mnemonic:        entropyMnemonic,
 		RootFingerprint: fingerprint,
+		KeyStoreName:    keystoreName,
 		Code:            types.Code(strings.Join([]string{"v0-", hex.EncodeToString(fingerprint), "-ln-0"}, "")),
 		Number:          0,
 	}

frontends/web/src/api/lightning.ts

@@ -29,6 +29,7 @@ export interface ILightningResponse<T> {
 export type TLightningAccountConfig = {
   mnemonic: string;
   rootFingerprint: string;
+  keystoreName: string;
   code: AccountCode;
   num: number;
 };

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 { LightningBalance, SummaryBalance } from './summarybalance';
 import { CoinBalance } from './coinbalance';
 import { AddBuyReceiveOnEmptyBalances } from '@/routes/account/info/buyReceiveCTA';
 import { Entry } from '@/components/guide/entry';
@@ -36,6 +36,7 @@ import { HideAmountsButton } from '@/components/hideamountsbutton/hideamountsbut
 import { AppContext } from '@/contexts/AppContext';
 import { getAccountsByKeystore, isAmbiguiousName } from '@/routes/account/utils';
 import { RatesContext } from '@/contexts/RatesContext';
+import { useLightning } from '@/hooks/lightning';
 
 type TProps = {
   accounts: accountApi.IAccount[];
@@ -63,9 +64,24 @@ export const AccountsSummary = ({
   const [accountsTotalBalance, setAccountsTotalBalance] = useState<accountApi.TAccountsTotalBalance>();
   const [coinsTotalBalance, setCoinsTotalBalance] = useState<accountApi.TCoinsTotalBalance>();
   const [balances, setBalances] = useState<Balances>();
+  const { lightningConfig } = useLightning();
 
   const hasCard = useSDCard(devices);
 
+  // lightning account exists but is not from any connected or remembered keystores
+  const hasLightningFromOtherKeystore = (
+    lightningConfig.accounts.length !== 0
+    && (
+      !accountsByKeystore.some(({ keystore }) => {
+        return keystore.rootFingerprint === lightningConfig.accounts[0].rootFingerprint;
+      })
+    )
+  );
+  let keystores = accountsByKeystore.length;
+  if (hasLightningFromOtherKeystore) {
+    keystores += 1;
+  }
+
   const getAccountSummary = useCallback(async () => {
     // replace previous timer if present
     if (summaryReqTimerID.current) {
@@ -216,12 +232,15 @@ export const AccountsSummary = ({
                   <AddBuyReceiveOnEmptyBalances accounts={accounts} balances={balances} />
                 ) : undefined
               } />
-            {accountsByKeystore.length > 1 && (
+            {keystores > 1 && (
               <CoinBalance
                 summaryData={summaryData}
                 coinsBalances={coinsTotalBalance}
               />
             )}
+            {hasLightningFromOtherKeystore && (
+              <LightningBalance/>
+            )}
             {accountsByKeystore &&
               (accountsByKeystore.map(({ keystore, accounts }) =>
                 <SummaryBalance

frontends/web/src/routes/account/summary/summarybalance.tsx

@@ -158,3 +158,51 @@ export const 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>
+      <div className={style.accountName}>
+        <p>
+          {lightningConfig.accounts[0].keystoreName} ({lightningConfig.accounts[0].rootFingerprint})
+        </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.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>
+    </div>
+  );
+}