Merge pull request #46 from lightninglabs/misc-tweaks

Misc improvements throughout the app

Author: guggero

app/package.json

@@ -21,8 +21,10 @@
     "@emotion/core": "10.0.28",
     "@emotion/styled": "10.0.27",
     "@improbable-eng/grpc-web": "0.12.0",
+    "@types/big.js": "4.0.5",
     "@types/file-saver": "2.0.1",
     "@types/react-virtualized": "^9.21.9",
+    "big.js": "5.2.2",
     "debug": "4.1.1",
     "emotion-theming": "10.0.27",
     "file-saver": "2.0.2",

app/src/__stories__/AlertContainer.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useStore } from 'store';
+import { Button } from 'components/base';
 import AlertContainer from 'components/common/AlertContainer';
-import { Button } from 'components/common/base';
 
 export default {
   title: 'Components/Alerts',

app/src/__stories__/ChannelBalance.stories.tsx

@@ -12,8 +12,8 @@ export default {
 
 const getChannel = (store: Store, ratio: number) => {
   const channel = new Channel(store, lndListChannelsOne.channelsList[0]);
-  channel.localBalance = channel.capacity * ratio;
-  channel.remoteBalance = channel.capacity * (1 - ratio);
+  channel.localBalance = channel.capacity.mul(ratio);
+  channel.remoteBalance = channel.capacity.mul(1 - ratio);
   return channel;
 };
 

app/src/__stories__/ChannelRow.stories.tsx

@@ -20,8 +20,8 @@ const renderStory = (
   },
 ) => {
   if (options && options.ratio) {
-    channel.localBalance = channel.capacity * options.ratio;
-    channel.remoteBalance = channel.capacity * (1 - options.ratio);
+    channel.localBalance = channel.capacity.mul(options.ratio);
+    channel.remoteBalance = channel.capacity.mul(1 - options.ratio);
   }
   return useObserver(() => (
     <div style={{ paddingTop: 50 }}>

app/src/__stories__/LoopActions.stories.tsx

@@ -7,9 +7,6 @@ export default {
   title: 'Components/Loop Actions',
   component: LoopActions,
   parameters: { contained: true },
-  decorators: [
-    (storyFn: any) => <div style={{ width: 600, margin: 'auto' }}>{storyFn()}</div>,
-  ],
 };
 
 export const Default = () => {
@@ -19,7 +16,15 @@ export const Default = () => {
 export const Opened = () => {
   const store = useStore();
   store.buildSwapStore.startSwap();
-  // select 3 channels
+  lndListChannels.channelsList.slice(0, 1).forEach(c => {
+    store.buildSwapStore.toggleSelectedChannel(c.chanId);
+  });
+  return <LoopActions />;
+};
+
+export const LoopInWarn = () => {
+  const store = useStore();
+  store.buildSwapStore.startSwap();
   lndListChannels.channelsList.slice(0, 3).forEach(c => {
     store.buildSwapStore.toggleSelectedChannel(c.chanId);
   });

app/src/__stories__/LoopHistory.stories.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { observable } from 'mobx';
+import { useStore } from 'store';
 import Tile from 'components/common/Tile';
 import LoopHistory from 'components/loop/LoopHistory';
 
@@ -19,3 +21,13 @@ export const InsideTile = () => {
     </Tile>
   );
 };
+
+export const Empty = () => {
+  const { swapStore } = useStore();
+  swapStore.swaps = observable.map();
+  return (
+    <Tile title="Loop History" onMaximizeClick={() => null}>
+      <LoopHistory />
+    </Tile>
+  );
+};

app/src/__stories__/NodeStatus.stories.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import Big from 'big.js';
 import { useStore } from 'store';
 import NodeStatus from 'components/NodeStatus';
 
@@ -12,7 +13,7 @@ export const Default = () => {
   const store = useStore();
   useEffect(() => {
     const { channelBalance, walletBalance } = store.nodeStore.wallet;
-    store.nodeStore.wallet = { channelBalance: 0, walletBalance: 0 };
+    store.nodeStore.wallet = { channelBalance: Big(0), walletBalance: Big(0) };
 
     // change back to sample data when the component is unmounted
     return () => {

app/src/__stories__/Range.stories.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import Big from 'big.js';
 import Range from 'components/common/Range';
 
 export default {
@@ -8,16 +9,16 @@ export default {
 };
 
 export const Default = () => {
-  const [value, setValue] = useState(50);
+  const [value, setValue] = useState(Big(50));
   return <Range value={value} onChange={setValue} />;
 };
 
 export const StepByFive = () => {
-  const [value, setValue] = useState(50);
+  const [value, setValue] = useState(Big(50));
   return <Range value={value} onChange={setValue} step={5} />;
 };
 
 export const WithMinMax = () => {
-  const [value, setValue] = useState(50);
+  const [value, setValue] = useState(Big(50));
   return <Range value={value} onChange={setValue} showRadios />;
 };

app/src/__stories__/StoryWrapper.tsx

@@ -4,7 +4,7 @@ import { BalanceMode, Unit } from 'util/constants';
 import { sampleApiResponses } from 'util/tests/sampleData';
 import { createStore, StoreProvider } from 'store';
 import { PersistentSettings } from 'store/stores/settingsStore';
-import { Background } from 'components/common/base';
+import { Background } from 'components/base';
 import { ThemeProvider } from 'components/theme';
 
 // mock the GRPC client to return sample data instead of making an actual request

app/src/__stories__/SwapWizard.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { observable } from 'mobx';
 import { SwapDirection } from 'types/state';
+import Big from 'big.js';
 import { lndListChannels } from 'util/tests/sampleData';
 import { useStore } from 'store';
 import SwapWizard from 'components/loop/swap/SwapWizard';
@@ -35,7 +36,7 @@ export const Step2Fees = () => {
   build.startSwap();
   build.selectedChanIds = selectedChannels;
   build.setDirection(SwapDirection.OUT);
-  build.setAmount(500000);
+  build.setAmount(Big(500000));
   build.goToNextStep();
   return <SwapWizard />;
 };
@@ -45,7 +46,7 @@ export const Step3Processing = () => {
   build.startSwap();
   build.selectedChanIds = selectedChannels;
   build.setDirection(SwapDirection.OUT);
-  build.setAmount(500000);
+  build.setAmount(Big(500000));
   build.goToNextStep();
   build.goToNextStep();
   return <SwapWizard />;