refactor: use big.js to handle large numbers that JS cannot support

Author: jamaljsr

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__/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__/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__/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 />;

app/src/__tests__/components/NodeStatus.spec.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Big from 'big.js';
 import { renderWithProviders } from 'util/tests';
 import NodeStatus from 'components/NodeStatus';
 
@@ -14,13 +15,13 @@ describe('NodeStatus component', () => {
 
   it('should display the lightning balance', () => {
     const { getByText, store } = render();
-    store.nodeStore.wallet = { channelBalance: 123, walletBalance: 0 };
+    store.nodeStore.wallet = { channelBalance: Big(123), walletBalance: Big(0) };
     expect(getByText('123 sats')).toBeInTheDocument();
   });
 
   it('should display the bitcoin balance', () => {
     const { getByText, store } = render();
-    store.nodeStore.wallet = { channelBalance: 0, walletBalance: 234 };
+    store.nodeStore.wallet = { channelBalance: Big(0), walletBalance: Big(234) };
     expect(getByText('234')).toBeInTheDocument();
   });
 });

app/src/__tests__/components/common/Range.spec.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import { fireEvent } from '@testing-library/react';
+import Big from 'big.js';
 import { renderWithProviders } from 'util/tests';
 import Range from 'components/common/Range';
 
 describe('Range component', () => {
   const handleChange = jest.fn();
 
   const render = (options?: {
-    value?: number;
-    min?: number;
-    max?: number;
+    value?: Big;
+    min?: Big;
+    max?: Big;
     step?: number;
     showRadios?: boolean;
   }) => {
@@ -34,9 +35,9 @@ describe('Range component', () => {
 
   it('should accept custom props', () => {
     const { getByText, getByLabelText } = render({
-      value: 5000,
-      min: 2500,
-      max: 7500,
+      value: Big(5000),
+      min: Big(2500),
+      max: Big(7500),
       step: 100,
       showRadios: true,
     });
@@ -49,30 +50,30 @@ describe('Range component', () => {
   });
 
   it('should highlight Min radio when value equals min', () => {
-    const { getByText } = render({ value: 0, showRadios: true });
+    const { getByText } = render({ value: Big(0), showRadios: true });
     expect(getByText('Min')).toHaveAttribute('aria-checked', 'true');
   });
 
   it('should highlight Max radio when value equals max', () => {
-    const { getByText } = render({ value: 100, showRadios: true });
+    const { getByText } = render({ value: Big(100), showRadios: true });
     expect(getByText('Max')).toHaveAttribute('aria-checked', 'true');
   });
 
   it('should trigger the event when slider changed', () => {
     const { getByLabelText } = render();
     fireEvent.change(getByLabelText('range-slider'), { target: { value: '25' } });
-    expect(handleChange).toBeCalledWith(25);
+    expect(handleChange).toBeCalledWith(Big(25));
   });
 
   it('should trigger the event when min button clicked', () => {
     const { getByText } = render({ showRadios: true });
     fireEvent.click(getByText('Min'));
-    expect(handleChange).toBeCalledWith(0);
+    expect(handleChange).toBeCalledWith(Big(0));
   });
 
   it('should trigger the event when max button clicked', () => {
     const { getByText } = render({ showRadios: true });
     fireEvent.click(getByText('Max'));
-    expect(handleChange).toBeCalledWith(100);
+    expect(handleChange).toBeCalledWith(Big(100));
   });
 });

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

@@ -14,8 +14,8 @@ describe('ChannelBalance component', () => {
   const render = (ratio: number, active = true) => {
     const store = createStore();
     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);
     channel.active = active;
 
     const result = renderWithProviders(<ChannelBalance channel={channel} />, store);