Fix Multisig wallet settings (#5560)

* Improve add/remove owner in Wallet (use changeOwner)

* fix linting

js/src/modals/WalletSettings/walletSettings.js

@@ -246,8 +246,6 @@ class WalletSettings extends Component {
   }
 
   renderChange (change) {
-    const { accountsInfo } = this.props;
-
     switch (change.type) {
       case 'dailylimit':
         return (
@@ -278,14 +276,50 @@ class WalletSettings extends Component {
                 id='walletSettings.ownersChange.details'
                 defaultMessage=' from {from} to {to} '
                 values={ {
-                  from: <code>change.initial.toNumber()</code>,
-                  to: <code>change.value.toNumber()</code>
+                  from: <code>{ change.initial.toNumber() }</code>,
+                  to: <code>{ change.value.toNumber() }</code>
                 } }
               />
             </div>
           </div>
         );
 
+      case 'change_owner':
+        return (
+          <div className={ [ styles.change ].join(' ') }>
+            <div className={ styles.label }>
+              <FormattedMessage
+                id='walletSettings.changeOwner.title'
+                defaultMessage='Change Owner'
+              />
+            </div>
+            <div>
+              <InputAddress
+                disabled
+                label={
+                  <FormattedMessage
+                    id='walletSettings.changeOwner.labelFrom'
+                    defaultMessage='From'
+                  />
+                }
+                text
+                value={ change.value.from }
+              />
+              <InputAddress
+                disabled
+                label={
+                  <FormattedMessage
+                    id='walletSettings.changeOwner.labelTo'
+                    defaultMessage='To'
+                  />
+                }
+                text
+                value={ change.value.to }
+              />
+            </div>
+          </div>
+        );
+
       case 'add_owner':
         return (
           <div className={ [ styles.change, styles.add ].join(' ') }>
@@ -298,8 +332,8 @@ class WalletSettings extends Component {
             <div>
               <InputAddress
                 disabled
+                text
                 value={ change.value }
-                accounts={ accountsInfo }
               />
             </div>
           </div>
@@ -317,8 +351,8 @@ class WalletSettings extends Component {
             <div>
               <InputAddress
                 disabled
+                text
                 value={ change.value }
-                accounts={ accountsInfo }
               />
             </div>
           </div>

js/src/modals/WalletSettings/walletSettingsStore.js

@@ -78,12 +78,16 @@ export default class WalletSettingsStore {
       const changes = data.map((datum) => {
         const [ type, valueStr ] = datum.split(';');
 
-        let value = valueStr;
+        let value;
 
-        // Only addresses start with `0x`, the others
-        // are BigNumbers
-        if (!/^0x/.test(valueStr)) {
-          value = new BigNumber(valueStr, 16);
+        if (/^#BN#/.test(valueStr)) {
+          value = new BigNumber(valueStr.replace(/^#BN#/, ''), 16);
+        } else {
+          try {
+            value = JSON.parse(valueStr);
+          } catch (e) {
+            value = valueStr;
+          }
         }
 
         return { type, value };
@@ -104,8 +108,8 @@ export default class WalletSettingsStore {
       const { type, value } = change;
 
       const valueStr = (value && typeof value.plus === 'function')
-        ? value.toString(16)
-        : value;
+        ? '#BN#' + value.toString(16)
+        : JSON.stringify(value);
 
       return [
         type,
@@ -147,14 +151,26 @@ export default class WalletSettingsStore {
     const ownersToRemove = prevOwners.filter((owner) => !nextOwners.includes(owner));
     const ownersToAdd = nextOwners.filter((owner) => !prevOwners.includes(owner));
 
-    ownersToRemove.forEach((owner) => {
+    const ownersChangeCount = Math.min(ownersToRemove.length, ownersToAdd.length);
+
+    for (let i = 0; i < ownersChangeCount; i++) {
+      changes.push({
+        type: 'change_owner',
+        value: {
+          from: ownersToRemove[i],
+          to: ownersToAdd[i]
+        }
+      });
+    }
+
+    ownersToRemove.slice(ownersChangeCount).forEach((owner) => {
       changes.push({
         type: 'remove_owner',
         value: owner
       });
     });
 
-    ownersToAdd.forEach((owner) => {
+    ownersToAdd.slice(ownersChangeCount).forEach((owner) => {
       changes.push({
         type: 'add_owner',
         value: owner
@@ -182,6 +198,12 @@ export default class WalletSettingsStore {
             this.wallet.require = value;
             break;
 
+          case 'change_owner':
+            this.wallet.owners = this.wallet.owners
+              .filter((owner) => owner !== value.from)
+              .concat(value.to);
+            break;
+
           case 'remove_owner':
             this.wallet.owners = this.wallet.owners.filter((owner) => owner !== value);
             break;
@@ -309,6 +331,13 @@ export default class WalletSettingsStore {
       };
     }
 
+    if (change.type === 'change_owner') {
+      return {
+        method: walletInstance.changeOwner,
+        values: [ change.value.from, change.value.to ]
+      };
+    }
+
     if (change.type === 'remove_owner') {
       return {
         method: walletInstance.removeOwner,