network: display testnet/regtest badge on Loop page

Author: jamaljsr

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

@@ -28,6 +28,16 @@ describe('LoopPage component', () => {
     expect(getByText('Lightning Loop')).toBeInTheDocument();
   });
 
+  it('should display the network badge', () => {
+    const { getByText, queryByText } = render();
+    store.nodeStore.network = 'regtest';
+    expect(getByText('regtest')).toBeInTheDocument();
+    store.nodeStore.network = 'testnet';
+    expect(getByText('testnet')).toBeInTheDocument();
+    store.nodeStore.network = 'mainnet';
+    expect(queryByText('mainnet')).not.toBeInTheDocument();
+  });
+
   it('should display the three tiles', () => {
     const { getByText } = render();
     expect(getByText('Loop History')).toBeInTheDocument();

app/src/components/base/shared.tsx

@@ -25,6 +25,20 @@ export const Pill = styled.span`
   border-radius: 40px;
 `;
 
+export const Badge = styled.span`
+  display: inline-block;
+  margin-left: 10px;
+  font-family: ${props => props.theme.fonts.open.light};
+  font-size: ${props => props.theme.sizes.xxs};
+  color: ${props => props.theme.colors.orange};
+  border: 1px solid ${props => props.theme.colors.orange};
+  border-radius: 4px;
+  padding: 3px 5px 5px;
+  text-transform: lowercase;
+  line-height: 1;
+  letter-spacing: 1.8px;
+`;
+
 //
 // Button
 //

app/src/components/common/PageHeader.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { observer } from 'mobx-react-lite';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
@@ -41,7 +41,7 @@ const Styled = {
 };
 
 interface Props {
-  title: string;
+  title: ReactNode;
   onBackClick?: () => void;
   backText?: string;
   onHistoryClick?: () => void;

app/src/components/loop/LoopPage.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
+import { Badge } from 'components/base';
 import PageHeader from 'components/common/PageHeader';
 import { styled } from 'components/theme';
 import ChannelList from './ChannelList';
@@ -18,7 +19,18 @@ const Styled = {
 
 const LoopPage: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.loop.LoopPage');
-  const { uiStore, buildSwapStore, channelStore } = useStore();
+  const { uiStore, buildSwapStore, channelStore, nodeStore } = useStore();
+
+  const title = (
+    <>
+      {l('pageTitle')}
+      {nodeStore.network !== 'mainnet' && (
+        <sup>
+          <Badge>{nodeStore.network}</Badge>
+        </sup>
+      )}
+    </>
+  );
 
   const { PageWrap } = Styled;
   return (
@@ -30,7 +42,7 @@ const LoopPage: React.FC = () => {
       ) : (
         <>
           <PageHeader
-            title={l('pageTitle')}
+            title={title}
             onHistoryClick={uiStore.goToHistory}
             onExportClick={channelStore.exportChannels}
           />