Redesign the backup file.

diff --git a/src/features/backup/actions.js b/src/features/backup/actions.js
index fb43c44..5848037 100644 (file)
--- a/src/features/backup/actions.js
+++ b/src/features/backup/actions.js
@@ -1,20 +1,6 @@
 import { chainClient } from 'utility/environment'
 
 let actions = {
-  rescan: () => {
-    return (dispatch) => {
-      return chainClient().backUp.rescan()
-        .then((resp) => {
-          if (resp.status === 'fail') {
-            dispatch({type: 'ERROR', payload: { 'message': resp.msg}})
-          }else {
-            dispatch({type: 'START_RESCAN'})
-          }
-        })
-        .catch(err => { throw {_error: err} })
-    }
-  },
-
   restore: (backupData) => {
     return (dispatch) => {
       return chainClient().backUp.restore(backupData)
@@ -25,7 +11,9 @@ let actions = {
             dispatch({type: 'RESTORE_SUCCESS'})
           }
         })
-        .catch(err => { throw {_error: err} })
+        .catch(err => {
+          dispatch({type: 'ERROR', payload: err})
+        })
     }
   },
 

diff --git a/src/features/backup/components/Backup.jsx b/src/features/backup/components/Backup.jsx
index e201306..facc797 100644 (file)
--- a/src/features/backup/components/Backup.jsx
+++ b/src/features/backup/components/Backup.jsx
@@ -72,9 +72,9 @@ class Backup extends React.Component {
     const restoreButton = <button className={`btn btn-primary btn-lg ${styles.submit}`} onClick={this.restore.bind(this)}>
       {lang === 'zh' ? '选择备份文件' : 'Select Restore File'}
     </button>
-    const rescanButton = <button className={`btn btn-primary btn-lg ${styles.submit}`}  onClick={() => this.props.rescan()}>
-      {lang === 'zh' ? '重新扫描' : 'Rescan'}
-    </button>
+    // const rescanButton = <button className={`btn btn-primary btn-lg ${styles.submit}`}  onClick={() => this.props.rescan()}>
+    //   {lang === 'zh' ? '重新扫描' : 'Rescan'}
+    // </button>
 
     return (
       <div className='flex-container'>
@@ -89,12 +89,12 @@ class Backup extends React.Component {
                          type='radio'
                          name='type'
                          value='backup'/>
-                  <div className={`${styles.choice} ${styles.new} `}>
+                  <div className={`${styles.choice} ${styles.backup} `}>
                     <span className={styles.choice_title}>{lang === 'zh' ?'备份':'Back Up'}</span>
                     <p>
-                      This option will back up all data stored in this core,
-                      including blockchain data, accounts, assets
-                      and balances.
+                      {lang === 'zh' ?
+                        '这个选项备份所有本地数据，包括账户，资产和余额。 请妥善保管你的备份文件。' :
+                      'This option will back up all data stored in this core, including blockchain data, accounts, assets and balances.'}
                     </p>
                   </div>
                 </label>
@@ -106,32 +106,18 @@ class Backup extends React.Component {
                          type='radio'
                          name='type'
                          value='restore' />
-                  <div className={`${styles.choice} ${styles.join}`}>
+                  <div className={`${styles.choice} ${styles.restore}`}>
                     <span className={styles.choice_title}>{lang === 'zh' ?'恢复':'Restore'}</span>
                     <p>
-                      This option will restore the wallet data form files.
-                      You might need to rescan your wallet, if you balance is not up to date
+                      {
+                        lang === 'zh' ?
+                        '这个选项将从文件中恢复钱包数据。 如果你的钱包余额显示不正确，请点滴扫描钱包的按钮。' :
+                        'This option will restore the wallet data form files. You might need to rescan your wallet, if you balance is not up to date'
+                      }
                     </p>
                   </div>
                 </label>
               </div>
-
-              <div className={styles.choice_wrapper}>
-                <label>
-                  <input className={styles.choice_radio_button}
-                         type='radio'
-                         name='type'
-                         value='rescan' />
-                  <div className={`${styles.choice} ${styles.join}`}>
-                    <span className={styles.choice_title}>{lang === 'zh' ?'重新扫描':'Rescan'}</span>
-                    <p>
-                      This option will rescan your wallet and update your balance.
-                    </p>
-                  </div>
-                </label>
-              </div>
-
-
             </div>
 
             <div className={styles.choices}>
@@ -152,13 +138,6 @@ class Backup extends React.Component {
                        style={{'display': 'none', 'alignItems': 'center', 'fontSize': '12px'}}
                        onChange={this.handleFileChange.bind(this)}/>
               </div>
-              <div>
-                {
-                  this.state.value === 'rescan'
-                  &&
-                  <span className={styles.submitWrapper}>{rescanButton}</span>
-                }
-              </div>
             </div>
           </div>
 

diff --git a/src/features/backup/components/Backup.scss b/src/features/backup/components/Backup.scss
index e902b39..aeafa5d 100644 (file)
--- a/src/features/backup/components/Backup.scss
+++ b/src/features/backup/components/Backup.scss
@@ -13,7 +13,7 @@ code {
   justify-content: space-between;
 
   > div {
-    width: 30%;
+    width: 45%;
     min-height: 100%;
   }
 }
@@ -82,16 +82,12 @@ code {
   }
 }
 
-.new {
-  background-image: url('images/config/new.png')
+.backup {
+  background-image: url('images/backup/backup.svg')
 }
 
-.join {
-  background-image: url('images/config/join.png')
-}
-
-.testnet {
-  background-image: url('images/config/testnet.png')
+.restore {
+  background-image: url('images/backup/restore.svg')
 }
 
 input[type=radio]:checked ~ .choice {
@@ -103,19 +99,14 @@ input[type=radio]:checked ~ .choice {
     background-color: $background-color;
   }
 
-  &.new {
-    background-image: url('images/config/new-active.png')
+  &.backup {
+    background-image: url('images/backup/backup-active.svg')
   }
 
-  &.join {
-    background-image: url('images/config/join-active.png')
+  &.restore {
+    background-image: url('images/backup/restore-active.svg')
   }
 
-  &.testnet {
-    background-image: url('images/config/testnet-active.png')
-  }
-
-
   .choice_title {
     color: $brand-primary;
   }

diff --git a/src/sdk/api/backUp.js b/src/sdk/api/backUp.js
index 9f0164b..ab44aab 100644 (file)
--- a/src/sdk/api/backUp.js
+++ b/src/sdk/api/backUp.js
@@ -16,6 +16,11 @@ const backUp = (client) => {
       client.request('/rescan-wallet'),
       cb
     ),
+
+    info: (cb) => shared.tryCallback(
+      client.request('/wallet-info'),
+      cb
+    ),
   }
 }
 

diff --git a/static/images/backup/backup-active.svg b/static/images/backup/backup-active.svg
new file mode 100644 (file)
index 0000000..1ffa9ef
--- /dev/null
+++ b/static/images/backup/backup-active.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 180 180">
+  <defs>
+    <style>
+      .cls-1 {
+        clip-path: url(#clip-backup-active);
+      }
+
+      .cls-2 {
+        fill: #b9f4ee;
+      }
+
+      .cls-2, .cls-3, .cls-4, .cls-5 {
+        fill-rule: evenodd;
+      }
+
+      .cls-3 {
+        fill: #00bfaa;
+      }
+
+      .cls-4 {
+        fill: #d0faf6;
+      }
+
+      .cls-5 {
+        fill: #eafdfb;
+      }
+    </style>
+    <clipPath id="clip-backup-active">
+      <rect width="180" height="180"/>
+    </clipPath>
+  </defs>
+  <g id="backup-active" class="cls-1">
+    <path id="路径_4790" data-name="路径 4790" class="cls-2" d="M75.6-87.606,3.606-46.041,75.6-4.476l71.993-41.565Z" transform="translate(14.394 177.736)"/>
+    <path id="路径_4791" data-name="路径 4791" class="cls-3" d="M147.591-46.041,75.6-4.476,3.606-46.041,75.6-87.606Zm-136.068,0L75.6-9.047l64.076-36.994L75.6-83.035Z" transform="translate(14.394 177.736)"/>
+    <path id="路径_4792" data-name="路径 4792" class="cls-4" d="M75.6-131.606,3.606-90.041,75.6-48.476l71.993-41.565Z" transform="translate(14.394 178.192)"/>
+    <path id="路径_4793" data-name="路径 4793" class="cls-3" d="M147.591-90.041,75.6-48.476,3.606-90.041,75.6-131.606Zm-136.068,0L75.6-53.047l64.076-36.994L75.6-127.035Z" transform="translate(14.394 178.192)"/>
+    <path id="路径_4794" data-name="路径 4794" class="cls-5" d="M75.6-171.606,3.606-130.041,75.6-88.476l71.993-41.565Z" transform="translate(14.394 178.606)"/>
+    <path id="路径_4795" data-name="路径 4795" class="cls-3" d="M147.591-130.041,75.6-88.476,3.606-130.041,75.6-171.606Zm-136.068,0L75.6-93.047l64.076-36.994L75.6-167.035Z" transform="translate(14.394 178.606)"/>
+  </g>
+</svg>

diff --git a/static/images/backup/backup.svg b/static/images/backup/backup.svg
new file mode 100644 (file)
index 0000000..1bc6f87
--- /dev/null
+++ b/static/images/backup/backup.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 180 180">
+  <defs>
+    <style>
+      .cls-1 {
+        clip-path: url(#clip-backup);
+      }
+
+      .cls-2 {
+        fill: #f2f2f2;
+      }
+
+      .cls-2, .cls-3, .cls-4, .cls-5 {
+        fill-rule: evenodd;
+      }
+
+      .cls-3 {
+        fill: #a3a9b8;
+      }
+
+      .cls-4 {
+        fill: #f7f7f7;
+      }
+
+      .cls-5 {
+        fill: #fff;
+      }
+    </style>
+    <clipPath id="clip-backup">
+      <rect width="180" height="180"/>
+    </clipPath>
+  </defs>
+  <g id="backup" class="cls-1">
+    <path id="路径_4790" data-name="路径 4790" class="cls-2" d="M75.6-87.606,3.606-46.041,75.6-4.476l71.993-41.565Z" transform="translate(14.394 177.736)"/>
+    <path id="路径_4791" data-name="路径 4791" class="cls-3" d="M147.591-46.041,75.6-4.476,3.606-46.041,75.6-87.606Zm-136.068,0L75.6-9.047l64.076-36.994L75.6-83.035Z" transform="translate(14.394 177.736)"/>
+    <path id="路径_4792" data-name="路径 4792" class="cls-4" d="M75.6-131.606,3.606-90.041,75.6-48.476l71.993-41.565Z" transform="translate(14.394 178.192)"/>
+    <path id="路径_4793" data-name="路径 4793" class="cls-3" d="M147.591-90.041,75.6-48.476,3.606-90.041,75.6-131.606Zm-136.068,0L75.6-53.047l64.076-36.994L75.6-127.035Z" transform="translate(14.394 178.192)"/>
+    <path id="路径_4794" data-name="路径 4794" class="cls-5" d="M75.6-171.606,3.606-130.041,75.6-88.476l71.993-41.565Z" transform="translate(14.394 178.606)"/>
+    <path id="路径_4795" data-name="路径 4795" class="cls-3" d="M147.591-130.041,75.6-88.476,3.606-130.041,75.6-171.606Zm-136.068,0L75.6-93.047l64.076-36.994L75.6-167.035Z" transform="translate(14.394 178.606)"/>
+  </g>
+</svg>

diff --git a/static/images/backup/restore-active.svg b/static/images/backup/restore-active.svg
new file mode 100644 (file)
index 0000000..66b8824
--- /dev/null
+++ b/static/images/backup/restore-active.svg
@@ -0,0 +1,42 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 180 180">
+  <defs>
+    <style>
+      .cls-1 {
+        clip-path: url(#clip-restore-active);
+      }
+
+      .cls-2 {
+        fill: #b9f4ee;
+      }
+
+      .cls-2, .cls-3, .cls-4, .cls-5 {
+        fill-rule: evenodd;
+      }
+
+      .cls-3 {
+        fill: #00bfaa;
+      }
+
+      .cls-4 {
+        fill: #d0faf6;
+      }
+
+      .cls-5 {
+        fill: #eafdfb;
+      }
+    </style>
+    <clipPath id="clip-restore-active">
+      <rect width="180" height="180"/>
+    </clipPath>
+  </defs>
+  <g id="restore-active" class="cls-1">
+    <path id="路径_4811" data-name="路径 4811" class="cls-2" d="M75.6-87.606,3.606-46.041,75.6-4.476l71.993-41.565Z" transform="translate(14.394 177.736)"/>
+    <path id="路径_4812" data-name="路径 4812" class="cls-3" d="M147.591-46.041,75.6-4.476,3.606-46.041,75.6-87.606Zm-136.068,0L75.6-9.047l64.076-36.994L75.6-83.035Z" transform="translate(14.394 177.736)"/>
+    <path id="路径_4813" data-name="路径 4813" class="cls-4" d="M75.944-108.306,37.034-85.841,75.944-63.376l38.911-22.465Z" transform="translate(14.048 177.95)"/>
+    <path id="路径_4814" data-name="路径 4814" class="cls-3" d="M114.855-85.841,75.944-63.376,37.034-85.841l38.911-22.465Zm-69.9,0L75.944-67.946l30.994-17.894L75.944-103.735Z" transform="translate(14.048 177.95)"/>
+    <path id="路径_4815" data-name="路径 4815" class="cls-4" d="M76.029-63.606,45.175-45.792,76.029-27.979l30.854-17.814Z" transform="translate(13.964 177.487)"/>
+    <path id="路径_4816" data-name="路径 4816" class="cls-5" d="M75.6-171.606,3.606-130.041,75.6-88.476l71.993-41.565Z" transform="translate(14.394 178.606)"/>
+    <path id="路径_4817" data-name="路径 4817" class="cls-3" d="M147.591-130.041,75.6-88.476,3.606-130.041,75.6-171.606Zm-136.068,0L75.6-93.047l64.076-36.994L75.6-167.035Z" transform="translate(14.394 178.606)"/>
+    <path id="路径_4818" data-name="路径 4818" class="cls-4" d="M76.029-147.606,45.175-129.792l30.854,17.814,30.854-17.814Z" transform="translate(13.964 178.357)"/>
+  </g>
+</svg>

diff --git a/static/images/backup/restore.svg b/static/images/backup/restore.svg
new file mode 100644 (file)
index 0000000..a1760f2
--- /dev/null
+++ b/static/images/backup/restore.svg
@@ -0,0 +1,42 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 180 180">
+  <defs>
+    <style>
+      .cls-1 {
+        clip-path: url(#clip-restore);
+      }
+
+      .cls-2 {
+        fill: #f2f2f2;
+      }
+
+      .cls-2, .cls-3, .cls-4, .cls-5 {
+        fill-rule: evenodd;
+      }
+
+      .cls-3 {
+        fill: #a3a9b8;
+      }
+
+      .cls-4 {
+        fill: #f7f7f7;
+      }
+
+      .cls-5 {
+        fill: #fff;
+      }
+    </style>
+    <clipPath id="clip-restore">
+      <rect width="180" height="180"/>
+    </clipPath>
+  </defs>
+  <g id="restore" class="cls-1">
+    <path id="路径_4819" data-name="路径 4819" class="cls-2" d="M75.6-87.606,3.606-46.041,75.6-4.476l71.993-41.565Z" transform="translate(14.394 177.736)"/>
+    <path id="路径_4820" data-name="路径 4820" class="cls-3" d="M147.591-46.041,75.6-4.476,3.606-46.041,75.6-87.606Zm-136.068,0L75.6-9.047l64.076-36.994L75.6-83.035Z" transform="translate(14.394 177.736)"/>
+    <path id="路径_4821" data-name="路径 4821" class="cls-4" d="M75.944-108.306,37.034-85.841,75.944-63.376l38.911-22.465Z" transform="translate(14.048 177.95)"/>
+    <path id="路径_4822" data-name="路径 4822" class="cls-3" d="M114.855-85.841,75.944-63.376,37.034-85.841l38.911-22.465Zm-69.9,0L75.944-67.946l30.994-17.894L75.944-103.735Z" transform="translate(14.048 177.95)"/>
+    <path id="路径_4823" data-name="路径 4823" class="cls-4" d="M76.029-63.606,45.175-45.792,76.029-27.979l30.854-17.814Z" transform="translate(13.964 177.487)"/>
+    <path id="路径_4824" data-name="路径 4824" class="cls-5" d="M75.6-171.606,3.606-130.041,75.6-88.476l71.993-41.565Z" transform="translate(14.394 178.606)"/>
+    <path id="路径_4825" data-name="路径 4825" class="cls-3" d="M147.591-130.041,75.6-88.476,3.606-130.041,75.6-171.606Zm-136.068,0L75.6-93.047l64.076-36.994L75.6-167.035Z" transform="translate(14.394 178.606)"/>
+    <path id="路径_4826" data-name="路径 4826" class="cls-4" d="M76.029-147.606,45.175-129.792l30.854,17.814,30.854-17.814Z" transform="translate(13.964 178.357)"/>
+  </g>
+</svg>