Merge pull request #725 from lightninglabs/upgrade-mobx

Upgrade mobx

Author: tanx

mobile/package-lock.json

@@ -31,8 +31,8 @@
   "dependencies": {
     "expo": "^27.0.1",
     "locale-currency": "0.0.2",
-    "mobx": "^3.6.2",
-    "mobx-react": "^4.4.3",
+    "mobx": "^4.5.0",
+    "mobx-react": "^5.2.8",
     "node-libs-react-native": "^1.0.2",
     "qr-image": "^3.2.0",
     "react": "~16.3.2",

mobile/package.json

@@ -33,8 +33,8 @@
     "electron-updater": "^3.1.2",
     "grpc": "^1.15.1",
     "locale-currency": "0.0.2",
-    "mobx": "^3.6.2",
-    "mobx-react": "^4.4.3",
+    "mobx": "^4.5.0",
+    "mobx-react": "^5.2.8",
     "qr-image": "^3.2.0",
     "react": "^16.5.2",
     "react-art": "^16.5.2",

package-lock.json

@@ -2,12 +2,12 @@
  * @fileOverview computed values that are used in channel UI components.
  */
 
-import { computed, extendObservable } from 'mobx';
+import { extendObservable } from 'mobx';
 import { toAmountLabel, toCaps } from '../helper';
 
 const ComputedChannel = store => {
   extendObservable(store, {
-    computedChannels: computed(() => {
+    get computedChannels() {
       const { channels, pendingChannels, settings } = store;
       const c = channels ? channels.slice() : [];
       const p = pendingChannels ? pendingChannels.slice() : [];
@@ -23,31 +23,33 @@ const ComputedChannel = store => {
         c.remoteBalanceLabel = toAmountLabel(c.remoteBalance, settings);
       });
       return all;
-    }),
-    channelBalanceOpenLabel: computed(() => {
+    },
+    get channelBalanceOpenLabel() {
       const { channels, settings } = store;
       const sum = (channels || [])
         .map(c => Number(c.localBalance))
         .reduce((a, b) => a + b, 0);
       return toAmountLabel(sum, settings);
-    }),
-    channelBalancePendingLabel: computed(() => {
+    },
+    get channelBalancePendingLabel() {
       const { pendingChannels, settings } = store;
       const sum = (pendingChannels || [])
         .filter(c => c.status.includes('open'))
         .map(c => Number(c.localBalance))
         .reduce((a, b) => a + b, 0);
       return toAmountLabel(sum, settings);
-    }),
-    channelBalanceClosingLabel: computed(() => {
+    },
+    get channelBalanceClosingLabel() {
       const { pendingChannels, settings } = store;
       const sum = (pendingChannels || [])
         .filter(c => !c.status.includes('open'))
         .map(c => Number(c.localBalance))
         .reduce((a, b) => a + b, 0);
       return toAmountLabel(sum, settings);
-    }),
-    showChannelAlert: computed(() => (store.channels || []).length === 0),
+    },
+    get showChannelAlert() {
+      return (store.channels || []).length === 0;
+    },
   });
 };
 

package.json

@@ -2,14 +2,14 @@
  * @fileOverview computed values that are used in invoice UI components.
  */
 
-import { computed, extendObservable } from 'mobx';
+import { extendObservable } from 'mobx';
 import { toLabel } from '../helper';
 
 const ComputedInvoice = store => {
   extendObservable(store, {
-    invoiceAmountLabel: computed(() =>
-      toLabel(store.invoice.amount, store.settings)
-    ),
+    get invoiceAmountLabel() {
+      return toLabel(store.invoice.amount, store.settings);
+    },
   });
 };
 

src/computed/channel.js

@@ -2,14 +2,14 @@
  * @fileOverview computed values that are used in loader UI components.
  */
 
-import { computed, extendObservable } from 'mobx';
+import { extendObservable } from 'mobx';
 
 const ComputedLoaderMsg = store => {
   extendObservable(store, {
-    loadingMsg: computed(() => {
+    get loadingMsg() {
       const { percentSynced: percent } = store;
       return getLoadingMsg(percent);
-    }),
+    },
   });
 };
 

src/computed/invoice.js

@@ -2,20 +2,20 @@
  * @fileOverview computed values that are used in notification UI components.
  */
 
-import { computed, extendObservable } from 'mobx';
+import { extendObservable } from 'mobx';
 import { toCaps, formatNumber } from '../helper';
 
 const ComputedNotification = store => {
   extendObservable(store, {
-    lastNotification: computed(() => {
+    get lastNotification() {
       const { notifications: nots } = store;
       return nots.length ? nots[nots.length - 1] : null;
-    }),
-    displayNotification: computed(() => {
+    },
+    get displayNotification() {
       const { lastNotification: last } = store;
       return last ? last.display : false;
-    }),
-    computedNotifications: computed(() => {
+    },
+    get computedNotifications() {
       const { notifications } = store;
       const all = [];
       notifications.forEach(n => {
@@ -31,10 +31,10 @@ const ComputedNotification = store => {
         n.dateTimeLabel = n.date.toLocaleString();
       });
       return all;
-    }),
-    notificationCountLabel: computed(() =>
-      formatNumber(store.computedNotifications.length)
-    ),
+    },
+    get notificationCountLabel() {
+      return formatNumber(store.computedNotifications.length);
+    },
   });
 };
 

src/computed/loader-msg.js

@@ -2,21 +2,23 @@
  * @fileOverview computed values that are used in payment UI components.
  */
 
-import { computed, extendObservable } from 'mobx';
+import { extendObservable } from 'mobx';
 import { toSatoshis, toAmountLabel, toLabel } from '../helper';
 
 const ComputedPayment = store => {
   extendObservable(store, {
-    paymentAmountLabel: computed(() =>
-      toLabel(store.payment.amount, store.settings)
-    ),
-    paymentFeeLabel: computed(() => toLabel(store.payment.fee, store.settings)),
-    paymentTotalLabel: computed(() => {
+    get paymentAmountLabel() {
+      return toLabel(store.payment.amount, store.settings);
+    },
+    get paymentFeeLabel() {
+      return toLabel(store.payment.fee, store.settings);
+    },
+    get paymentTotalLabel() {
       const { payment, settings } = store;
       const satAmount = toSatoshis(payment.amount, settings);
       const satFee = toSatoshis(payment.fee, settings);
       return toAmountLabel(satAmount + satFee, settings);
-    }),
+    },
   });
 };
 

src/computed/notification.js

@@ -2,34 +2,36 @@
  * @fileOverview computed values that are used in seed UI components.
  */
 
-import { computed, extendObservable } from 'mobx';
+import { extendObservable } from 'mobx';
 
 const ComputedSeed = store => {
   extendObservable(store, {
-    seedVerifyIndexes: computed(() => {
+    get seedVerifyIndexes() {
       const { seedMnemonic: words } = store;
       return words.length ? getSeedIndexes(1, words.length, 3) : [];
-    }),
-    seedVerifyCopy: computed(() => {
+    },
+    get seedVerifyCopy() {
       const { seedVerifyIndexes } = store;
       const c0 = formatOrdinal(seedVerifyIndexes[0]);
       const c1 = formatOrdinal(seedVerifyIndexes[1]);
       const c2 = formatOrdinal(seedVerifyIndexes[2]);
       return `Type the ${c0}, ${c1}, and ${c2} words of your recovery phrase.`;
-    }),
-    restoreIndexes: computed(() => [...Array(24).keys()].map(x => ++x)),
-    restoreVerifyIndexes: computed(() => {
+    },
+    get restoreIndexes() {
+      return [...Array(24).keys()].map(x => ++x);
+    },
+    get restoreVerifyIndexes() {
       const { restoreIndexes } = store;
       const { restoreIndex } = store.wallet;
       return restoreIndexes.slice(restoreIndex, restoreIndex + 3);
-    }),
-    restoreVerifyCopy: computed(() => {
+    },
+    get restoreVerifyCopy() {
       const { restoreVerifyIndexes } = store;
       const c0 = formatOrdinal(restoreVerifyIndexes[0]);
       const c1 = formatOrdinal(restoreVerifyIndexes[1]);
       const c2 = formatOrdinal(restoreVerifyIndexes[2]);
       return `Type the ${c0}, ${c1}, and ${c2} words of your recovery phrase.`;
-    }),
+    },
   });
 };