channel: round fee rate % to two decimals and display tooltip with exact value

Author: jamaljsr

app/src/__tests__/components/loop/ChannelRow.spec.tsx

@@ -50,6 +50,14 @@ describe('ChannelRow component', () => {
     expect(getByText(channel.uptime.toString())).toBeInTheDocument();
   });
 
+  it('should display the fee rate', () => {
+    const { getByText } = render();
+    channel.remoteFeeRate = 500;
+    expect(getByText(channel.remoteFeePct)).toBeInTheDocument();
+    fireEvent.mouseEnter(getByText(channel.remoteFeePct));
+    expect(getByText(`${channel.remoteFeeRate} ppm`)).toBeInTheDocument();
+  });
+
   it('should display the peer pubkey or alias', () => {
     const { getByText } = render();
     expect(getByText(channel.aliasLabel)).toBeInTheDocument();

app/src/__tests__/store/channelStore.spec.ts

@@ -164,10 +164,7 @@ describe('ChannelStore', () => {
     expect(channel.remoteFeeRate).toBe(0);
     // the alias is fetched from the API and should be updated after a few ticks
     await waitFor(() => {
-      const rate = +Big(lndGetChanInfo.node1Policy.feeRateMilliMsat)
-        .div(1000000)
-        .mul(100);
-      expect(channel.remoteFeeRate).toBe(rate);
+      expect(channel.remoteFeeRate).toBe(lndGetChanInfo.node1Policy.feeRateMilliMsat);
     });
   });
 

app/src/components/loop/ChannelRow.tsx

@@ -155,7 +155,11 @@ const ChannelRow: React.FC<Props> = ({ channel, style }) => {
       <Column>
         <Unit sats={channel.localBalance} suffix={false} />
       </Column>
-      <Column cols={1}>{channel.remoteFeeRate}</Column>
+      <Column cols={1}>
+        <Tip overlay={`${channel.remoteFeeRate} ppm`} placement="left" capitalize={false}>
+          <span>{channel.remoteFeePct}</span>
+        </Tip>
+      </Column>
       <Column cols={1}>{channel.uptimePercent}</Column>
       <WideColumn cols={2}>
         <Tip

app/src/store/models/channel.ts

@@ -71,6 +71,16 @@ export default class Channel {
     return percentage(this.localBalance, this.capacity);
   }
 
+  /**
+   * The remote peer's fee as a percentage
+   */
+  @computed get remoteFeePct(): string {
+    // the fee returned from the RPC is a number representing the amount of
+    // msats charged as a fee per one million msats to forward. To convert to
+    // a percentage, the value must be divided by 1M
+    return Big(this.remoteFeeRate).div(1000000).mul(100).round(2).toFixed(2);
+  }
+
   /**
    * The order to sort this channel based on the current mode
    */

app/src/store/stores/channelStore.ts

@@ -162,7 +162,7 @@ export default class ChannelStore {
           const localPubkey = this._store.nodeStore.pubkey;
           const policy = node1Pub === localPubkey ? node2Policy : node1Policy;
           if (policy) {
-            acc[channelId] = +Big(policy.feeRateMilliMsat).div(1000000).mul(100);
+            acc[channelId] = policy.feeRateMilliMsat;
           }
           return acc;
         }, data);