frontend: update 'My portfolio' with lightning account

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>
+  );
+}