pool+stats: display node tier in the stats bar

Author: jamaljsr

app/src/components/pool/batches/BatchStats.tsx

@@ -3,6 +3,7 @@ import { observer } from 'mobx-react-lite';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
 import { BarChart, List } from 'components/base';
+import LoaderLines from 'components/common/LoaderLines';
 import Stat from 'components/common/Stat';
 import Unit from 'components/common/Unit';
 import { styled } from 'components/theme';
@@ -19,7 +20,11 @@ const StyledStat = styled.div`
     margin: 0 10px;
 
     > div {
-      font-size: ${props => props.theme.sizes.l};
+      font-size: ${props => props.theme.sizes.m};
+    }
+
+    > h4 {
+      font-size: ${props => props.theme.sizes.xxs};
     }
   }
 `;
@@ -48,6 +53,12 @@ const Styled = {
       opacity: 1;
     }
   `,
+  LoaderLines: styled(LoaderLines)`
+    .line {
+      margin: 10px 1px;
+      height: 10px;
+    }
+  `,
 };
 
 const BatchStats: React.FC = () => {
@@ -59,7 +70,7 @@ const BatchStats: React.FC = () => {
 
   const tipProps = { tipPlacement: 'bottom', tipCapitalize: false };
 
-  const { Wrapper, Stat, BatchCountdown, ViewMode } = Styled;
+  const { Wrapper, Stat, BatchCountdown, ViewMode, LoaderLines } = Styled;
   return (
     <Wrapper>
       <div>
@@ -90,6 +101,7 @@ const BatchStats: React.FC = () => {
         />
       </div>
       <div>
+        <Stat label={l('tier')} value={batchesView.tier || <LoaderLines />} />
         <Stat
           label={l('earned')}
           value={<Unit sats={batchesView.earnedSats} suffix={false} />}

app/src/i18n/locales/en-US.json

@@ -156,6 +156,7 @@
   "cmps.pool.batches.BatchStats.prevRateTip": "The rate cleared in the previous batch ({{fixedRate}} per block)",
   "cmps.pool.batches.BatchStats.rateChange": "Change",
   "cmps.pool.batches.BatchStats.rateChangeTip": "The percentage change in rate between the previous batch and the one prior",
+  "cmps.pool.batches.BatchStats.tier": "Node Tier",
   "cmps.pool.batches.BatchStats.earned": "Earned",
   "cmps.pool.batches.BatchStats.paid": "Paid",
   "cmps.pool.orders.OrdersList.emptyMsg": "You do not have any {{filter}} orders.",

app/src/store/store.ts

@@ -106,6 +106,7 @@ export class Store {
   async init() {
     this.settingsStore.init();
     this.swapStore.init();
+    this.batchStore.init();
     await this.authStore.init();
     runInAction(() => {
       this.initialized = true;

app/src/store/views/batchesView.ts

@@ -1,4 +1,5 @@
 import { makeAutoObservable } from 'mobx';
+import { NodeTier } from 'types/generated/auctioneer_pb';
 import { toPercent } from 'util/bigmath';
 import { Store } from 'store';
 
@@ -51,6 +52,19 @@ export default class BatchesView {
     return this.batches.length ? this.batches[0].feeLabel : 0;
   }
 
+  /** the tier of the current LND node as a user-friendly string */
+  get tier() {
+    switch (this._store.batchStore.nodeTier) {
+      case NodeTier.TIER_1:
+        return 'T1';
+      case NodeTier.TIER_0:
+      case NodeTier.TIER_DEFAULT:
+        return 'T0';
+      default:
+        return '';
+    }
+  }
+
   /** that amount earned from sold leases */
   get earnedSats() {
     return this._store.orderStore.earnedSats;

app/src/util/tests/sampleData.ts

@@ -599,6 +599,15 @@ export const poolNextBatchInfo: POOL.NextBatchInfoResponse.AsObject = {
   feeRateSatPerKw: 12500,
 };
 
+export const poolNodeRatings: POOL.NodeRatingResponse.AsObject = {
+  nodeRatingsList: [
+    {
+      nodePubkey: b64(lndGetInfo.identityPubkey),
+      nodeTier: AUCT.NodeTier.TIER_1,
+    },
+  ],
+};
+
 const stringToChannelPoint = (cp: string) => ({
   txid: b64(cp.split(':')[0], true),
   outputIndex: parseInt(cp.split(':')[1]),
@@ -713,5 +722,6 @@ export const sampleApiResponses: Record<string, any> = {
   'poolrpc.Trader.BatchSnapshot': poolBatchSnapshot,
   'poolrpc.Trader.BatchSnapshots': poolBatchSnapshots,
   'poolrpc.Trader.NextBatchInfo': poolNextBatchInfo,
+  'poolrpc.Trader.NodeRatings': poolNodeRatings,
   'poolrpc.Trader.Leases': poolLeases,
 };