feat: add empty Loop page with tests and stories

app/src/App.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import './App.scss';
 import { Store, StoreProvider } from 'store';
 import { Layout } from 'components/layout';
-import SamplePage from 'components/pages/SamplePage';
+import LoopPage from 'components/loop/LoopPage';
 import { ThemeProvider } from 'components/theme';
 
 const App = () => {
@@ -11,7 +11,7 @@ const App = () => {
     <StoreProvider store={store}>
       <ThemeProvider>
         <Layout>
-          <SamplePage />
+          <LoopPage />
         </Layout>
       </ThemeProvider>
     </StoreProvider>

app/src/__stories__/LoopPage.stories.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import LoopPage from 'components/loop/LoopPage';
+
+export default {
+  title: 'Loop Page',
+  component: LoopPage,
+};
+
+export const Default = () => <LoopPage />;

app/src/__tests__/App.spec.tsx

@@ -4,6 +4,6 @@ import App from '../App';
 
 it('renders the App', () => {
   const { getByText } = render(<App />);
-  const linkElement = getByText('Node Info');
+  const linkElement = getByText('Node Status');
   expect(linkElement).toBeInTheDocument();
 });

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { renderWithProviders } from 'util/tests';
+import LoopPage from 'components/loop/LoopPage';
+
+describe('LoopPage component', () => {
+  const render = () => {
+    return renderWithProviders(<LoopPage />);
+  };
+
+  it('should display the page title', () => {
+    const { getByText } = render();
+    expect(getByText('Lightning Loop')).toBeInTheDocument();
+  });
+});

app/src/components/common/text.tsx

@@ -30,3 +30,12 @@ export const XLargeText = styled.span<BlockProps>`
   font-size: ${props => props.theme.sizes.xl};
   letter-spacing: 0.43px;
 `;
+
+export const PageTitle = styled.h1`
+  font-size: ${props => props.theme.sizes.l};
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 2.7px;
+  line-height: 30px;
+  margin-top: 40px;
+`;

app/src/components/loop/LoopPage.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import usePrefixedTranslation from 'hooks/usePrefixedTranslation';
+import { PageTitle } from 'components/common/text';
+
+const LoopPage: React.FC = () => {
+  const { l } = usePrefixedTranslation('cmps.loop.LoopPage');
+
+  return (
+    <>
+      <PageTitle>{l('pageTitle')}</PageTitle>
+    </>
+  );
+};
+
+export default LoopPage;

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

@@ -1,4 +1,5 @@
 {
+  "cmps.loop.LoopPage.pageTitle": "Lightning Loop",
   "App.nodeInfo": "Node Info",
   "App.pubkey": "Pubkey",
   "App.alias": "Alias",