refactor: move sampleData into tes utils dir

app/.storybook/preview.tsx

@@ -7,7 +7,7 @@ import { createActions } from '../src/action';
 import { Background } from '../src/components/common/base';
 import { ThemeProvider } from '../src/components/theme';
 import { Store, StoreProvider } from '../src/store';
-import { sampleApiResponses } from '../src/util/sampleData';
+import { sampleApiResponses } from '../src/util/tests/sampleData';
 
 /**
  * Create a store with dummy data to use for stories

app/src/__mocks__/@improbable-eng/grpc-web.ts

@@ -1,7 +1,7 @@
 import { ProtobufMessage } from '@improbable-eng/grpc-web/dist/typings/message';
 import { UnaryMethodDefinition } from '@improbable-eng/grpc-web/dist/typings/service';
 import { UnaryRpcOptions } from '@improbable-eng/grpc-web/dist/typings/unary';
-import { sampleApiResponses } from 'util/sampleData';
+import { sampleApiResponses } from 'util/tests/sampleData';
 
 // mock grpc module
 export const grpc = {

app/src/__tests__/action/node.spec.ts

@@ -1,4 +1,4 @@
-import { lndChannelBalance, lndWalletBalance } from 'util/sampleData';
+import { lndChannelBalance, lndWalletBalance } from 'util/tests/sampleData';
 import NodeAction from 'action/node';
 import { GrpcClient, LndApi } from 'api';
 import { Store } from 'store';

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

@@ -1,4 +1,4 @@
-import { lndListChannels } from 'util/sampleData';
+import { lndListChannels } from 'util/tests/sampleData';
 import { createActions, StoreActions } from 'action';
 import { Store } from 'store';
 

app/src/components/pages/SamplePage.tsx

@@ -1,129 +0,0 @@
-import React, { useEffect } from 'react';
-import { observer } from 'mobx-react-lite';
-import { usePrefixedTranslation } from 'hooks';
-import { useActions, useStore } from 'store/provider';
-
-const SamplePage: React.FC = () => {
-  const store = useStore();
-  const { node, channel, swap } = useActions();
-  const { l } = usePrefixedTranslation('App');
-  useEffect(() => {
-    // fetch node info when the component is mounted
-    const fetchInfo = async () => {
-      try {
-        await node.getInfo();
-        await node.getBalances();
-      } catch (error) {
-        console.log('Failed to fetch node info', error);
-      }
-    };
-
-    fetchInfo();
-  }, [node]);
-
-  const balances = store.balances || { channelBalance: 0, walletBalance: 0 };
-
-  return (
-    <>
-      <header className="text-center">
-        <h3>Lightning Loop</h3>
-      </header>
-      <section className="mt-4">
-        <h1>{l('App.nodeInfo')}</h1>
-        {store.info && (
-          <table className="table" style={{ color: '#fff' }}>
-            <tbody>
-              <tr>
-                <th>{l('pubkey')}</th>
-                <td>{store.info.identityPubkey}</td>
-              </tr>
-              <tr>
-                <th>{l('alias')}</th>
-                <td>{store.info.alias}</td>
-              </tr>
-              <tr>
-                <th>{l('version')}</th>
-                <td>{store.info.version}</td>
-              </tr>
-              <tr>
-                <th>{l('numChannels')}</th>
-                <td>{store.info.numActiveChannels}</td>
-              </tr>
-              <tr>
-                <th>{l('balances')}</th>
-                <td>{`${balances.channelBalance} in channels, ${balances.walletBalance} in wallet`}</td>
-              </tr>
-            </tbody>
-          </table>
-        )}
-      </section>
-      <section className="mt-4">
-        <h2>
-          {store.channels.length} Channels
-          <button
-            className="btn btn-outline-light float-right"
-            onClick={channel.getChannels}
-          >
-            Fetch
-          </button>
-        </h2>
-        <table className="table" style={{ color: '#fff' }}>
-          <thead>
-            <tr>
-              <td>Can Receive</td>
-              <td>Can Send</td>
-              <td>In Fee %</td>
-              <td>Up time %</td>
-              <td>Volume (24h)</td>
-              <td>Peer/Alias</td>
-              <td>Capacity</td>
-            </tr>
-          </thead>
-          <tbody>
-            {store.channels.map(c => (
-              <tr key={c.chanId}>
-                <td>{c.remoteBalance}</td>
-                <td>{c.localBalance}</td>
-                <td></td>
-                <td>{c.uptime}</td>
-                <td></td>
-                <td>{c.remotePubkey.substring(0, 12)}</td>
-                <td>{c.capacity}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </section>
-      <section className="mt-4">
-        <h2>
-          {store.swaps.length} Swaps
-          <button className="btn btn-outline-light float-right" onClick={swap.listSwaps}>
-            Fetch
-          </button>
-        </h2>
-        <table className="table" style={{ color: '#fff' }}>
-          <thead>
-            <tr>
-              <td>Date</td>
-              <td>Type</td>
-              <td>Amount</td>
-              <td>Status</td>
-            </tr>
-          </thead>
-          <tbody>
-            {store.swaps.map(s => (
-              <tr key={s.id}>
-                <td>{s.createdOn.toString()}</td>
-                <td>{s.type}</td>
-                <td>{s.amount.toString()}</td>
-                <td>{s.status}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </section>
-    </>
-  );
-};
-
-export default observer(SamplePage);