Merge pull request #9 from AElfProject/PostcssLoader

Update: Postcss-loader & Logic modification
AElfProject · Dec 15, 2018 · 7f60562 · 7f60562
2 parents 97db16c + 904a65f
commit 7f60562
Show file tree

Hide file tree

Showing 38 changed files with 2,739 additions and 448 deletions.
diff --git a/app/web/js/components/NoticePanel/NoticePanel.scss b/app/web/js/components/NoticePanel/NoticePanel.scss
@@ -9,10 +9,6 @@
   margin-bottom: 0;
 }
 
-//.note div {
-//  margin-bottom: 0;
-//}
-
 .mainTitle {
   font-size: 28px;
   color: #FFF;

diff --git a/app/web/js/constants.js b/app/web/js/constants.js
@@ -1,28 +1,30 @@
-/*
- * huangzongzhe
+/**
+ * @file
+ * @author huangzongzhe
  * 2018.11.09
  */
 
-import React from "react";
+import React from 'react';
 
 const SCROLLLIST = {
     loading: 'Loading...',
-    loading: 'Loaded',
-    end: 'No More o((⊙﹏⊙))o',
-}
+    loaded: 'Loading',
+    end: 'No More o((⊙﹏⊙))o'
+};
+
 const SCROLLFOOTER = (isLoading, hasMore) => {
     return (
-        <div style={{ padding: 6, textAlign: 'center', color: 'rgba(255, 255, 255, 0.7)' }}>
+        <div style={{padding: 6, textAlign: 'center', color: 'rgba(255, 255, 255, 0.7)'}}>
             {
                 isLoading
                     ? SCROLLLIST.loading
-                    : (hasMore ? SCROLLLIST.loaded : SCROLLLIST.end)
+                    : (hasMore ? SCROLLLIST.loading : SCROLLLIST.end)
             }
         </div>
     );
-}
+};
 
 export {
     SCROLLLIST,
     SCROLLFOOTER
-}
+};
diff --git a/app/web/js/langConfig/en-US.js b/app/web/js/langConfig/en-US.js
@@ -138,7 +138,13 @@ const en_US = {
     'aelf.Modaltimes': 'more chances',
     'aelf.Back Home': 'Back Home',
     'aelf.error page': 'error page',
-    'aelf.cannot connect chain': 'cannot connect chain'
+    'aelf.cannot connect chain': 'cannot connect chain',
+    'aelf.PleaseBackUp': 'NOTE! Please Back Up!',
+    'aelf.BackUpCon01':'Aelf reminds you again that the blockchain wallet is different from the traditional website account, which is a cryptographic-based decentralized account system.',
+    'aelf.BackUpCon02':"You must save the wallet's private key and transaction password, and any accidents will result in the loss of assets.",
+    'aelf.BackUpCon03':'Aelf prompts you to make a backup, conduct a small transaction test, and start the journey of use.',
+    'aelf.BackUpCon04':'Backup your wallet recovery phrase is extremely important when your wallet is lost or forgotten.',
+    'aelf.Backup now':'Backup now'
 
 };
 

diff --git a/app/web/js/langConfig/zh-CN.js b/app/web/js/langConfig/zh-CN.js
@@ -131,7 +131,13 @@ const zh_CN = {
     'aelf.Modaltimes': '次机会',
     'aelf.Back Home': '返回',
     'aelf.error page': '错误页',
-    'aelf.cannot connect chain': '无法连接到链'
+    'aelf.cannot connect chain': '无法连接到链',
+    'aelf.PleaseBackUp': '注意!请立即备份钱包!',
+    'aelf.BackUpCon01':'aelf在此提示您，区块链钱包不同于传统网站账户，它是基于密码学的去中心化账户系统。',
+    'aelf.BackUpCon02':"你必须保存好钱包和私钥和交易密码，任何意外发生将导致资产丢失。",
+    'aelf.BackUpCon03':'aelf提示您做好备份，在进行小额交易测试后，再开启使用之旅。',
+    'aelf.BackUpCon04':'备份助记词在您丢失钱包或忘记密码时，能帮助您恢复钱包。',
+    'aelf.Backup now':'立即备份助记词'
 };
 
 export default zh_CN;
diff --git a/app/web/js/pages/AddToken/AddToken.jsx b/app/web/js/pages/AddToken/AddToken.jsx
@@ -1,13 +1,14 @@
 /**
  *  @file
  *  @author zhouminghui
- *  列表与搜索包含在该页面
+ *  Lists and searches are included on this page
  */
 
 import React from 'react';
 
 import NavToken from './NavToken/NavToken';
 import TokenList from './TokenList/TokenList';
+import SearchTokenList from './SearchTokenList/SearchTokenList';
 
 require('./AddToken.css');
 
@@ -16,7 +17,8 @@ export default class AddToken extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            searchTokenName: null
+            searchTokenName: '',
+            searchShow: false
         };
     }
 
@@ -26,11 +28,33 @@ export default class AddToken extends React.Component {
         });
     }
 
+    searchShow() {
+        this.setState({
+            searchShow: true
+        });
+    }
+
+    searchHide() {
+        this.setState({
+            searchShow: false
+        });
+    }
+
     render() {
         return (
             <div className = 'Tokenlist' >
-                <NavToken getTokenName={this.getTokenName.bind(this)} />
-                <TokenList />
+                <NavToken
+                    getTokenName={this.getTokenName.bind(this)}
+                    searchShow={this.searchShow.bind(this)}
+                    searchHide={this.searchHide.bind(this)}
+                />
+                <TokenList
+                    searchShow={this.state.searchShow}
+                />
+                <SearchTokenList
+                    value={this.state.searchTokenName}
+                    searchShow={this.state.searchShow}
+                />
             </div>
         );
     }

diff --git a/app/web/js/pages/AddToken/NavToken/NavToken.css b/app/web/js/pages/AddToken/NavToken/NavToken.css
@@ -6,4 +6,15 @@
     color: #fff;
     font-size: 14px;
     opacity: .3;
+}
+
+.clearBtn {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border: 1px solid #fff;
+    border-radius: 50%;
+    color: #fff;
+    text-align: center;
+    line-height: 16px;
 }
diff --git a/app/web/js/pages/AddToken/NavToken/NavToken.jsx b/app/web/js/pages/AddToken/NavToken/NavToken.jsx
@@ -1,12 +1,13 @@
 /**
  *  @file
  *  @author zhouminghui
- *  token 搜索组件
+ *  Token Search component
  */
 
 import React from 'react';
 import Svg from '../../../components/Svg/Svg';
-import style from './Navtoken.scss';
+import style from './NavToken.scss';
+import {historyReplace} from '../../../utils/historyChange';
 
 export default class NavToken extends React.Component {
 
@@ -26,13 +27,16 @@ export default class NavToken extends React.Component {
     handleClick(e) {
         if (e.which === 13) {
             this.props.getTokenName(this.state.value);
+            this.props.searchShow();
         }
     }
 
     render() {
         return (
             <div className={style.Navtoken}>
-                <div className={style.goBackBtn} >
+                <div className={style.goBackBtn}
+                    onClick={() => historyReplace('/assets')}
+                >
                     <Svg icon={'back22'}
                         style={{display: 'inline-block', height: 36, width: 16}}
                     >
@@ -48,10 +52,19 @@ export default class NavToken extends React.Component {
                         className={style.searchinput}
                         placeholder='Please input token name.'
                         type='text'
-                        onKeyPress = {this.handleClick.bind(this)}
-                        onChange = {value => this.handleChange(value)}
+                        onKeyPress={this.handleClick.bind(this)}
+                        onChange={value => this.handleChange(value)}
                         ref='search'
                     />
+                    <span className='clearBtn'
+                        onClick={() => {
+                            this.refs.search.value = '';
+                            this.setState({
+                                key: ''
+                            });
+                            this.props.searchHide();
+                        }}
+                    >&Chi;</span>
                 </div>
             </div>
         );

diff --git a/app/web/js/pages/AddToken/SearchTokenList/SearchTokenList.jsx b/app/web/js/pages/AddToken/SearchTokenList/SearchTokenList.jsx
@@ -5,15 +5,164 @@
 */
 
 import React from 'react';
+import ReactDOM from 'react-dom';
+import {List, Switch, ListView, Toast} from 'antd-mobile';
+import getSearchToken from '../../../utils/getSearchToken';
+import getTokens from '../../../utils/getTokens';
+import contractMergeArr from '../../../utils/contractMergeArr';
+import bindToken from '../../../utils/bindToken';
+import unbindToken from '../../../utils/unbindToken';
+import {SCROLLFOOTER} from '../../../constants';
 
-export default class SearchToeknList extends React.Component {
+export default class SearchTokenList extends React.Component {
     constructor(props) {
         super(props);
+
+        const dataSource = new ListView.DataSource({
+            rowHasChanged: (row1, row2) => row1 !== row2
+        });
+
+        this.hide = {
+            display: 'none'
+        };
+
+        this.show = {
+            display: 'block'
+        };
+
+        this.state = {
+            value: this.props.value,
+            searchShow: this.props.searchShow,
+            dataSource,
+            height: document.documentElement.clientHeight,
+            searchTokens: null,
+            isLoading: false,
+            bindToken: null,
+            compare: null,
+            useBodyScroll: false
+        };
+    }
+
+    getSearchTokenList(name) {
+        return new Promise((resolve, reject) => {
+            getSearchToken(result => {
+                resolve(result);
+            }, name);
+        });
+    }
+
+    getBindTokenList() {
+        return new Promise((resolve, reject) => {
+            getTokens(result => {
+                resolve(result);
+            });
+        });
+    }
+
+    static getDerivedStateFromProps(props, state) {
+        if (props.value !== state.value) {
+            return {
+                value: props.value
+            };
+        }
+
+        if (props.searchShow !== state.searchShow) {
+            return {
+                searchShow: props.searchShow
+            };
+        }
+
+        return null;
+    }
+
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        if (prevProps.value !== this.props.value) {
+            this.setState({
+                isLoading: true
+            });
+            const hei = this.state.height - ReactDOM.findDOMNode(this.lv).offsetTop;
+            Promise.all([this.getSearchTokenList(this.props.value), this.getBindTokenList()]).then(value => {
+                this.sData = value[0];
+                this.tData = value[1];
+                this.setState({
+                    searchTokens: this.sData,
+                    bindToken: this.tData,
+                    isLoading: false,
+                    height: hei,
+                    dataSource: this.state.dataSource.cloneWithRows(this.sData),
+                    compare: contractMergeArr(this.sData, this.tData)
+                });
+            });
+        }
     }
 
     render() {
+        const row = (rowData, sectionID, rowID) => {
+            let tokenName = rowData.name;
+            let tokenAddress = rowData.contract_address;
+            return (
+                <div key={rowID}
+                    className='addtoken-list-con'
+                >
+                    <List.Item
+                        extra={<Switch
+                            checked={this.state.compare[rowID]}
+                            color='#AC00E6'
+                            onChange={() => {
+                                let compare = this.state.compare;
+                                compare[rowID] = !compare[rowID];
+                                this.setState({
+                                    compare
+                                });
+
+                                let walletInfoList = JSON.parse(localStorage.getItem('walletInfoList'));
+                                let address = JSON.parse(localStorage.lastuse).address;
+                                let TokenMessage = {
+                                    address: address,
+                                    contract_address: tokenAddress,
+                                    signed_address: walletInfoList[address].signedAddress,
+                                    public_key: walletInfoList[address].publicKey
+                                };
+
+                                if (compare[rowID]) {
+                                    bindToken(TokenMessage, () => {
+                                        Toast.success('bind Success', 3);
+                                    });
+                                }
+                                else {
+                                    unbindToken(TokenMessage, () => {
+                                        Toast.success('unbind Success', 3);
+                                    });
+                                }
+                            }}
+                        />}
+                    >
+                        <div className='addtoken-list-tokenname' >{tokenName}</div>
+                        <div className='addtoken-list-name' >{tokenName} Chain</div>
+                        <div className='addtoken-list-tokenaddress' >{tokenAddress}</div>
+                    </List.Item>
+                </div>
+            );
+        };
         return (
-            <div></div>
+            <div className='transaction-list-container'
+                style={this.state.searchShow ? this.show : this.hide}
+            >
+                <ListView
+                    initialListSize={1000}
+                    key={this.state.useBodyScroll ? '0' : '1'}
+                    ref={el => this.lv = el}
+                    dataSource={this.state.dataSource}
+                    renderFooter={() => SCROLLFOOTER(this.state.isLoading, this.state.hasMore)}
+                    renderRow={row}
+                    useBodyScroll={this.state.useBodyScroll}
+                    style={this.state.useBodyScroll ? {} : {
+                        height: '100%',
+                        margin: '5px 0'
+                    }}
+                    pageSize={10}
+                />
+            </div>
         );
     }
 }