feat: 🎸 add change wallet; fix NaN with new version of extensio

hzz780 · hzz780 · commit 71e30dcf934f · 2020-01-02T20:50:19.000+08:00
diff --git a/src/pages/Resource/Resource.js b/src/pages/Resource/Resource.js
@@ -47,7 +47,6 @@ class Resource extends Component {
   }
 
   componentDidMount() {
-    let httpProvider = DEFAUTRPCSERVER;
     getContractAddress().then(result => {
       this.setState({
         contracts: result
@@ -81,21 +80,8 @@ class Resource extends Component {
     NightElfCheck.getInstance()
       .check.then(item => {
         if (item) {
-          nightElf = new window.NightElf.AElf({
-            httpProvider: [
-              httpProvider,
-              null,
-              null,
-              null,
-              [
-                {
-                  name: 'Accept',
-                  value: 'text/plain;v=1.0'
-                }
-              ]
-            ],
-            appName // TODO: 这个需要content.js 主动获取
-          });
+          const nightElf = NightElfCheck.getAelfInstanceByExtension();
+
           if (nightElf) {
             this.setState({
               nightElf
diff --git a/src/pages/Resource/components/ResourceAElfWallet/ResourceAElfWallet.js b/src/pages/Resource/components/ResourceAElfWallet/ResourceAElfWallet.js
@@ -10,12 +10,14 @@ import {
   Col,
   Spin,
   Button,
-  Icon
+  Icon, message
 } from 'antd';
 import {ADDRESS_INFO} from '../../../../../config/config';
 import { SYMBOL, ELF_DECIMAL } from '@src/constants';
 import { thousandsCommaWithDecimal } from '@utils/formater';
+import { APPNAME } from '@config/config';
 import './ResourceAElfWallet.less';
+import NightElfCheck from "../../../../utils/NightElfCheck";
 
 export default class ResourceAElfWallet extends PureComponent {
 
@@ -34,6 +36,7 @@ export default class ResourceAElfWallet extends PureComponent {
       loading: false
     };
     this.refreshWalletInfo = this.refreshWalletInfo.bind(this);
+    this.extensionLogout = this.extensionLogout.bind(this);
   }
 
   componentDidMount() {
@@ -77,6 +80,26 @@ export default class ResourceAElfWallet extends PureComponent {
     }
   }
 
+  extensionLogout() {
+    const nightElf = NightElfCheck.getAelfInstanceByExtension();
+    const {
+      currentWallet,
+    } = this.props;
+    nightElf.logout({
+      appName: APPNAME,
+      address: currentWallet.address
+    }, (error, result) => {
+      localStorage.removeItem('currentWallet');
+      this.refreshWalletInfo();
+      // TODO: more refactor actions for login and logout; repeated code, MyWalletCard.js
+      message.success('Logout successful, refresh after 3s.', 3, () => {
+        window.location.reload();
+      });
+    }).catch(error => {
+      message.error('logout failed');
+    });
+  }
+
   getCurrentWalletBalance = async () => {
     const {
       tokenContract,
@@ -159,13 +182,24 @@ export default class ResourceAElfWallet extends PureComponent {
                   Transaction Details
                 </Link> }
               </span>
-              <Button
-                  className='resource-wallet-address-update update-btn'
+
+              <div>
+                <Button
+                    className='resource-wallet-address-update update-btn'
+                    disabled={!(currentWallet && currentWallet.address && tokenContract)}
+                    onClick={this.refreshWalletInfo}
+                >
+                  <Icon type='sync' spin={loading} />
+                </Button>
+
+                { currentWallet && currentWallet.name && <Button
+                  className="resource-wallet-address-update update-btn"
                   disabled={!(currentWallet && currentWallet.address && tokenContract)}
-                  onClick={this.refreshWalletInfo}
-              >
-                <Icon type='sync' spin={loading} />
-              </Button>
+                  onClick={this.extensionLogout}
+                >
+                  change wallet<Icon type="logout"/>
+                </Button>}
+              </div>
             </div>
 
             <div className='resource-wallet-info'>
diff --git a/src/pages/Vote/ElectionNotification/MyWalletCard/MyWalletCard.js b/src/pages/Vote/ElectionNotification/MyWalletCard/MyWalletCard.js
@@ -16,6 +16,7 @@ import { thousandsCommaWithDecimal } from '@utils/formater';
 import getCurrentWallet from '@utils/getCurrentWallet';
 import { ELF_DECIMAL, SYMBOL } from '@src/constants';
 import { APPNAME } from '@config/config';
+import NightElfCheck from "../../../../utils/NightElfCheck";
 
 // @inject('contractsStore') @observer
 // todo: move the code fetch data on the upper component
@@ -38,6 +39,7 @@ export default class MyWalletCard extends PureComponent {
     // this.handleClaimDividendClick = this.handleClaimDividendClick.bind(this);
     // this.updateWallet = this.updateWallet.bind(this);
     this.handleUpdateWalletClick = this.handleUpdateWalletClick.bind(this);
+    this.extensionLogout = this.extensionLogout.bind(this);
 
     this.hasRun = false;
   }
@@ -249,6 +251,24 @@ export default class MyWalletCard extends PureComponent {
     });
   }
 
+  extensionLogout() {
+    const nightElf = NightElfCheck.getAelfInstanceByExtension();
+    const currentWallet = getCurrentWallet();
+    nightElf.logout({
+      appName: APPNAME,
+      address: currentWallet.address
+    }, (error, result) => {
+      localStorage.removeItem('currentWallet');
+      this.handleUpdateWalletClick();
+      // TODO: more refactor actions for login and logout
+      message.success('Logout successful, refresh after 3s.', 3, () => {
+        window.location.reload();
+      });
+    }).catch(error => {
+      message.error('logout failed');
+    });
+  }
+
   render() {
     const { handleDividendClick, dividends } = this.props;
     const {
@@ -312,8 +332,16 @@ export default class MyWalletCard extends PureComponent {
             />
             My Wallet
           </h2>
+          { currentWallet && currentWallet.name && <Button
+            className="my-wallet-card-header-sync-btn update-btn"
+            disabled={!(currentWallet && currentWallet.address)}
+            onClick={this.extensionLogout}
+          >
+            change wallet<Icon type="logout"/>
+          </Button>}
           <Button
             className="my-wallet-card-header-sync-btn update-btn"
+            disabled={!(currentWallet && currentWallet.address)}
             onClick={this.handleUpdateWalletClick}
           >
             <Icon type="sync" spin={loading} />
diff --git a/src/pages/Vote/ElectionNotification/MyWalletCard/MyWalletCard.less b/src/pages/Vote/ElectionNotification/MyWalletCard/MyWalletCard.less
@@ -27,6 +27,10 @@
     }
     &-sync-btn {
       float: right;
+      color: @linkMain !important;
+      &:hover {
+        color: @linkHover;
+      }
     }
   }
   &-body {
diff --git a/src/pages/Vote/Vote.js b/src/pages/Vote/Vote.js
@@ -390,26 +390,11 @@ class VoteContainer extends Component {
   }
 
   getExtensionKeypairList() {
-    const httpProvider = DEFAUT_RPC_SERVER;
-
     NightElfCheck.getInstance()
       .check.then(item => {
         if (item) {
-          const nightElf = new window.NightElf.AElf({
-            httpProvider: [
-              httpProvider,
-              null,
-              null,
-              null,
-              [
-                {
-                  name: 'Accept',
-                  value: 'text/plain;v=1.0'
-                }
-              ]
-            ],
-            APPNAME // TODO: 这个需要content.js 主动获取
-          });
+          const nightElf = NightElfCheck.getAelfInstanceByExtension();
+
           if (nightElf) {
             this.setState({
               nightElf
@@ -1304,7 +1289,7 @@ class VoteContainer extends Component {
           if (profitItem.error) {
             amount = 0;
           } else {
-            amount = +profitItem.value;
+            amount = isNaN(+profitItem.value) ? 0 : +profitItem.value;
           }
           // todo: remove the judge when need
           amount = amount === undefined ? 0 : +amount / ELF_DECIMAL;
diff --git a/src/utils/NightElfCheck.js b/src/utils/NightElfCheck.js
@@ -2,8 +2,13 @@
  * @file NightElfCheck
  * @author zhouminghui
  */
+import config, {
+    DEFAUTRPCSERVER,
+    APPNAME,
+} from '@config/config';
 
 let nightElfInstance = null;
+let aelfInstanceByExtension = null;
 export default class NightElfCheck {
     constructor() {
         let resovleTemp = null;
@@ -31,4 +36,22 @@ export default class NightElfCheck {
         }
         return nightElfInstance;
     }
+
+    // For extension users
+    static getAelfInstanceByExtension() {
+        if (!aelfInstanceByExtension) {
+            NightElfCheck.initAelfInstanceByExtension();
+        }
+        return aelfInstanceByExtension;
+    }
+
+    static initAelfInstanceByExtension() {
+        aelfInstanceByExtension = new window.NightElf.AElf({
+            httpProvider: [
+                DEFAUTRPCSERVER
+            ],
+            APPNAME
+        });
+        return aelfInstanceByExtension;
+    }
 }

Original file line number	Diff line number	Diff line change
`@@ -27,6 +27,10 @@`
`27`	`27`	`}`
`28`	`28`	`&-sync-btn {`
`29`	`29`	`float: right;`
	`30`	`+ color: @linkMain !important;`
	`31`	`+ &:hover {`
	`32`	`+ color: @linkHover;`
	`33`	`+ }`
`30`	`34`	`}`
`31`	`35`	`}`
`32`	`36`	`&-body {`