Switch from 0-100 percent range for loading network to 0-1

Author: valentinewallace

src/component/spinner.js

@@ -185,11 +185,11 @@ SpinnerFill.propTypes = {
 
 const generateArc = (percentage, radius) => {
   if (percentage === 0) {
-    percentage = 1;
-  } else if (percentage === 100) {
-    percentage = 99.999;
+    percentage = 0.001;
+  } else if (percentage === 1) {
+    percentage = 0.999;
   }
-  const a = percentage * 2 * Math.PI / 100; // angle (in radian) depends on percentage
+  const a = percentage * 2 * Math.PI; // angle (in radian) depends on percentage
   const r = radius; // radius of the circle
   var rx = r,
     ry = r,
@@ -198,7 +198,7 @@ const generateArc = (percentage, radius) => {
     sweepFlag = 1,
     x = r + r * Math.sin(a),
     y = r - r * Math.cos(a);
-  if (percentage <= 50) {
+  if (percentage <= 0.5) {
     largeArcFlag = 0;
   } else {
     largeArcFlag = 1;

src/computed/loader-msg.js

@@ -12,8 +12,8 @@ const ComputedLoaderMsg = store => {
 export const LOADING_COPY_START = 'Loading network...';
 export const LOADING_COPY_MID = 'Almost done...';
 export const LOADING_COPY_END = 'Just a few seconds...';
-export const LOADING_PERCENT_MID = 50;
-export const LOADING_PERCENT_END = 95;
+export const LOADING_PERCENT_MID = 0.5;
+export const LOADING_PERCENT_END = 0.95;
 
 /**
  * Retrieve the loading message corresponding to the percent
@@ -27,8 +27,8 @@ export const getLoadingMsg = percent => {
     percent = 0;
   } else if (percent < 0) {
     percent = 0;
-  } else if (percent > 100) {
-    percent = 100;
+  } else if (percent > 1) {
+    percent = 1;
   }
   if (percent < LOADING_PERCENT_MID) {
     return LOADING_COPY_START;

src/store.js

@@ -18,7 +18,7 @@ export class Store {
       walletUnlocked: false, // Is the wallet unlocked
       lndReady: false, // Is lnd process running
       syncedToChain: false, // Is lnd synced to blockchain
-      percentSynced: 0, // Expects 0-100 range
+      percentSynced: 0, // Expects 0-1 range
       route: DEFAULT_ROUTE,
       blockHeight: null,
       balanceSatoshis: 0,

stories/component/spinner.js

@@ -18,17 +18,17 @@ storiesOf('Spinner', module)
   .add('Load Network Spinner', () => (
     <MainContent style={{ alignItems: 'flex-start', flexDirection: 'row' }}>
       <LoadNetworkSpinner
-        percentage={30}
+        percentage={0.3}
         msg="Loading network..."
         style={{ margin: 20 }}
       />
       <LoadNetworkSpinner
-        percentage={50}
+        percentage={0.5}
         msg="Almost done..."
         style={{ margin: 20 }}
       />
       <LoadNetworkSpinner
-        percentage={100}
+        percentage={1}
         msg="Just a few seconds..."
         style={{ margin: 20 }}
       />

stories/screen.js

@@ -220,7 +220,7 @@ store.pendingChannels = [...Array(6)].map((x, i) => ({
   status: i % 2 === 0 ? 'pending-closing' : 'pending-open',
 }));
 store.selectedChannel = store.computedChannels && store.computedChannels[0];
-store.percentSynced = 30;
+store.percentSynced = 0.3;
 store.seedMnemonic = [
   'empower',
   'neglect',

test/unit/computed/loader-msg.spec.js

@@ -26,17 +26,17 @@ describe('Computed Loader Msg Unit Tests', () => {
       expect(store.loadingMsg, 'to equal', LOADING_COPY_START);
     });
 
-    it('should work for < 0 and > 100 percentages', () => {
+    it('should work for < 0 and > 1 percentages', () => {
       store.percentSynced = -1;
       ComputedLoaderMsg(store);
       expect(store.loadingMsg, 'to equal', LOADING_COPY_START);
-      store.percentSynced = 101;
+      store.percentSynced = 1.01;
       ComputedLoaderMsg(store);
       expect(store.loadingMsg, 'to equal', LOADING_COPY_END);
     });
 
     it('should work for each milestone percentage', () => {
-      store.percentSynced = 10;
+      store.percentSynced = 0.1;
       ComputedLoaderMsg(store);
       expect(store.loadingMsg, 'to equal', LOADING_COPY_START);
       store.percentSynced = LOADING_PERCENT_MID;