update icon and time displayed format

diff --git a/src/features/shared/components/RelativeTime.jsx b/src/features/shared/components/RelativeTime.jsx
index 0415bde..ae8d749 100644 (file)
--- a/src/features/shared/components/RelativeTime.jsx
+++ b/src/features/shared/components/RelativeTime.jsx
@@ -13,11 +13,11 @@ class RelativeTime extends React.Component {
       timestamp = humanizeDuration(diff/1000) + ' ahead of local time'
     }
     else if( moment.duration(diff).asHours()<-24){
-      timestamp = momentTime.format('ll')
+      timestamp = momentTime.format('YYYY-MM-DD HH:mm:ss')
     }
 
     return(
-      <span title={this.props.timestamp}>{timestamp}</span>
+      <span>{timestamp}</span>
     )
   }
 }

diff --git a/src/features/transactions/components/DetailSummary/DetailSummary.jsx b/src/features/transactions/components/DetailSummary/DetailSummary.jsx
index 9ae7a20..dd49157 100644 (file)
--- a/src/features/transactions/components/DetailSummary/DetailSummary.jsx
+++ b/src/features/transactions/components/DetailSummary/DetailSummary.jsx
@@ -50,7 +50,9 @@ class DetailSummary extends React.Component {
 
   render() {
     const item = this.props.transaction
+    const confirmation = item.confirmations
     const isCoinbase = item.inputs.length > 0 && item.inputs[0].type === 'coinbase'
+    const mature = isCoinbase && confirmation >= 100
 
     const inouts = this.props.transaction.inputs.concat(this.props.transaction.outputs)
     const summary = this.normalizeInouts(inouts)
@@ -118,16 +120,21 @@ class DetailSummary extends React.Component {
     })
 
 
+
     return(<table className={styles.main}>
       <tbody>
         {items.map((item, index) =>
           <tr key={index}>
+            {/*<td className={styles.colLabel}><img src={require(`images/transactions/${isCoinbase?'coinbase':item.type}.svg`)}/></td>*/}
             {
-              !isCoinbase && <td className={styles.colAction}>{lang==='zh'? INOUT_TYPES_ZH[item.type] : item.type}</td>
+              !isCoinbase && <td className={styles.colAction}>
+                <img src={require(`images/transactions/${item.type}.svg`)}/> {lang==='zh'? INOUT_TYPES_ZH[item.type] : item.type}
+                </td>
             }
             {
               isCoinbase && <td className={styles.colAction}>
-                {lang==='zh'? '挖矿收入':'coinbase'}
+                <img src={require('images/transactions/coinbase.svg')}/> {lang==='zh'? '挖矿收入':'coinbase'}
+                {!mature && <small className={styles.immature}>{ lang === 'zh' ? '未成熟' : 'immature' }</small>}
               </td>
             }
 
@@ -140,7 +147,9 @@ class DetailSummary extends React.Component {
             </td>
 
             <td className={`${styles.colAmount} ${styles.recievedAmount}`}>
-              <code className={ `${styles.amount} ${addType.includes(item.type)? styles.emphasisLabel : 'text-danger'}`}> {item.type && ( addType.includes(item.type) ? '+' : '-' )}{item.amount}</code>
+              <code className={ `${styles.amount} ${addType.includes(item.type)? styles.emphasisLabel : 'text-danger'}`}> {item.type && ( addType.includes(item.type) ? '+' : '-' )} {item.amount}</code>
+            </td>
+            <td className={styles.colUnit}>
               <Link to={`/assets/${item.assetId}`}>
                 {item.asset}
               </Link>

diff --git a/src/features/transactions/components/DetailSummary/DetailSummary.scss b/src/features/transactions/components/DetailSummary/DetailSummary.scss
index 4733f26..22f97a2 100644 (file)
--- a/src/features/transactions/components/DetailSummary/DetailSummary.scss
+++ b/src/features/transactions/components/DetailSummary/DetailSummary.scss
@@ -45,13 +45,22 @@
   padding-left: 25px ;
   text-transform: uppercase;
   font-weight: 500;
+  img {
+    width: 20px;
+    margin-bottom: 4px;
+    margin-right: 6px;
+  }
 }
 
-.colAction, .colAmount, .colAsset, .colAccount {
+.colAction, .colAmount {
   color: $text-strong-color;
   width: 20%;
 }
 
+.colAccount {
+  width: 10%;
+}
+
 .amount {
   background: none;
 }
@@ -66,7 +75,21 @@
   width: 7%;
 }
 
+.colUnit {
+  text-align: right;
+  width: 1%;
+  white-space: nowrap;
+
+  > a{
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+  }
+}
+
 .immature {
+  text-transform: lowercase;
   margin-left: 5px;
   color: $text-danger;
 }

diff --git a/src/features/transactions/components/ListItem/ListItem.jsx b/src/features/transactions/components/ListItem/ListItem.jsx
index 47b3382..0bd9925 100644 (file)
--- a/src/features/transactions/components/ListItem/ListItem.jsx
+++ b/src/features/transactions/components/ListItem/ListItem.jsx
@@ -3,6 +3,7 @@ import { Link } from 'react-router'
 import { DetailSummary } from 'features/transactions/components'
 import { RelativeTime } from 'features/shared/components'
 import styles from './ListItem.scss'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 
 class ListItem extends React.Component {
   render() {
@@ -11,15 +12,24 @@ class ListItem extends React.Component {
     const confirmation = item.highest - item.blockHeight + 1
     item.confirmations = confirmation
 
-    const immatured = confirmation> 0 && confirmation<100
+    const isCoinbase = item.inputs.length > 0 && item.inputs[0].type === 'coinbase'
 
     const unconfirmedTx = item.blockHeight === 0 && item.blockHash === '0000000000000000000000000000000000000000000000000000000000000000'
 
+    const confirmView =(confirmation<=6?
+        [confirmation, (lang === 'zh' ? ' 确认数' :` confirmation${confirmation>1?'s':''}`)]
+      :
+      (lang === 'zh' ? '已确认': 'confirmed'))
 
-    const confirmView =(<span>
-          <span className={immatured? 'text-danger': null}>{confirmation}</span>
-      {lang === 'zh' ? ` 确认数${immatured?' (100)': ''}` :' of 100 confirmations'}
-      </span>)
+    const tooltip = (
+      <Tooltip id='tooltip'>
+        {lang === 'zh' ? '合约运行状态' : 'Contract Execution Status'}
+      </Tooltip>
+    )
+
+    const icon = <OverlayTrigger placement='top' overlay={tooltip}>
+      <img src={require(`images/transactions/${item.statusFail?'fail': 'success'}.svg`)}/>
+    </OverlayTrigger>
 
     return(
       <div className={styles.main}>
@@ -28,18 +38,20 @@ class ListItem extends React.Component {
             <label>{lang === 'zh' ? '交易ID:' : 'Tx ID:'}</label>
             &nbsp;<code>{item.id}</code>&nbsp;
 
-            <span className={`${styles.confirmation} ${unconfirmedTx?'text-danger': null}`}>
+            {!isCoinbase && <span className={`${styles.confirmation} ${unconfirmedTx ? 'text-danger' : null}`}>
               {
                 unconfirmedTx ?
-                  (lang === 'zh' ? '未确认交易' : 'unconfirmed Transaction'):
-                  confirmView
+                  (lang === 'zh' ? '未确认交易' : 'unconfirmed Transaction') :
+                  [confirmView, icon]
               }
             </span>
-
+            }
           </div>
+
           {unconfirmedTx? null : <span className={styles.timestamp}>
               <RelativeTime timestamp={item.timestamp} />
             </span>}
+
           <Link className={styles.viewLink} to={`/transactions/${item.id}`}>
             {lang === 'zh' ? '查看详情' : 'View details'}
           </Link>

diff --git a/src/features/transactions/components/ListItem/ListItem.scss b/src/features/transactions/components/ListItem/ListItem.scss
index 71cfe36..9d9dc6a 100644 (file)
--- a/src/features/transactions/components/ListItem/ListItem.scss
+++ b/src/features/transactions/components/ListItem/ListItem.scss
@@ -8,7 +8,7 @@
   border-bottom: 1px solid $border-color;
   display: flex;
   align-items: center;
-  padding: 13px 25px;
+  padding: 16px 25px;
 
   code {
     display: inline-block;
@@ -26,6 +26,8 @@
 
 .title {
   flex-grow: 1;
+  align-items: center;
+  display: flex;
 
   label {
     color: $text-strong-color;
@@ -34,17 +36,23 @@
     font-weight: 500;
     margin: 0 8px 0 0;
   }
+  img{
+    width: 20px;
+    margin-left: $gutter-size/2;
+    margin-bottom: 2px;
+  }
 }
 
 .timestamp {
-  flex-grow: 3;
-  text-align: center;
+  position: absolute;
+  left: 59%;
 }
 
 .confirmation {
-  margin-left: $gutter-size/2;
+  margin-left: $gutter-size;
 }
 
+
 .viewLink {
   margin: -15px 0;
   padding: 15px;

diff --git a/static/images/transactions/coinbase.svg b/static/images/transactions/coinbase.svg
new file mode 100644 (file)
index 0000000..11a55a6
--- /dev/null
+++ b/static/images/transactions/coinbase.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-2 {
+        fill: #20252d;
+      }
+    </style>
+  </defs>
+  <g id="coinbase" transform="translate(-61 -5)">
+    <rect id="矩形_3694" data-name="矩形 3694" class="cls-1" width="18" height="18" transform="translate(61 5)"/>
+    <path id="联合_121" data-name="联合 121" class="cls-2" d="M-2900-4980h-13v-13h13v13h0Zm-11.693-1.312h10.377v-10.447h-10.377Zm2.494-2.2v-5.975h5.357v1.334h-4.006v3.318h4.006v1.321h-5.357Z" transform="translate(2976.5 5000.5)"/>
+  </g>
+</svg>

diff --git a/static/images/transactions/fail.svg b/static/images/transactions/fail.svg
new file mode 100644 (file)
index 0000000..926d68c
--- /dev/null
+++ b/static/images/transactions/fail.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1536905437076" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3373" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M511.998977 961.610044c-248.306272 0-449.607998-201.307865-449.607998-449.614138S263.692704 62.389956 511.998977 62.389956c248.364601 0 449.610044 201.299679 449.610044 449.606974S760.363577 961.610044 511.998977 961.610044L511.998977 961.610044zM718.186989 380.921639c8.457626-8.462742 8.457626-22.202675 0-30.658254l-45.927005-45.871747c-8.459672-8.459672-22.138206-8.459672-30.599925 0L511.603981 434.44874 381.546879 304.391638c-8.459672-8.459672-22.1423-8.459672-30.599925 0l-45.927005 45.871747c-8.457626 8.455579-8.457626 22.195511 0 30.658254l130.057101 130.053008L305.019948 641.031748c-8.457626 8.455579-8.457626 22.140253 0 30.599925L350.946954 717.555609c8.457626 8.404414 22.140253 8.404414 30.599925 0l130.057101-130.057101L641.661082 717.555609c8.461719 8.404414 22.140253 8.404414 30.599925 0l45.927005-45.922912c8.457626-8.459672 8.457626-22.144346 0-30.599925L588.129888 510.97567 718.186989 380.921639 718.186989 380.921639z" p-id="3374" fill="#d44c4c"></path></svg>
\ No newline at end of file

diff --git a/static/images/transactions/issue.svg b/static/images/transactions/issue.svg
new file mode 100644 (file)
index 0000000..58d0d00
--- /dev/null
+++ b/static/images/transactions/issue.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-2 {
+        fill: #20252d;
+      }
+    </style>
+  </defs>
+  <g id="issue" transform="translate(-61 -89)">
+    <rect id="矩形_3673" data-name="矩形 3673" class="cls-1" width="18" height="18" transform="translate(61 89)"/>
+    <g id="组_2965" data-name="组 2965" transform="translate(-183.738 -1151.178)">
+      <path id="路径_4955" data-name="路径 4955" class="cls-2" d="M300.064,554.158h-1.282v2.159h-2.225V557.6h2.225v2.154h1.282V557.6H302.3v-1.282h-2.233Z" transform="translate(-51.419 697.98)"/>
+      <path id="减去_14" data-name="减去 14" class="cls-2" d="M9.483,13.193h0l-2.989-1.7-2.2,1.433V11.594L5.9,10.487V7.833L3.623,6.5,1.337,7.783v.924H0V7.164L2.99,5.39V2.01L6.494,0,10,2.01V5.318l2.99,1.846v4.02l-3.5,2.009ZM9.4,6.6,7.159,7.882v2.573L9.4,11.74l2.242-1.286V7.882L9.4,6.6ZM6.539,1.408l-2.3,1.318V5.362l2.3,1.317,2.3-1.317V2.726l-2.3-1.318Z" transform="translate(247.314 1242.678)"/>
+    </g>
+  </g>
+</svg>

diff --git a/static/images/transactions/received.svg b/static/images/transactions/received.svg
new file mode 100644 (file)
index 0000000..382622b
--- /dev/null
+++ b/static/images/transactions/received.svg
@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18 18">
+  <defs>
+    <style>
+      .cls-1, .cls-2 {
+        fill: #20252d;
+      }
+
+      .cls-1 {
+        clip-rule: evenodd;
+      }
+
+      .cls-3 {
+        fill: none;
+      }
+
+      .cls-4 {
+        clip-path: url(#clip-path);
+      }
+
+      .cls-5 {
+        clip-path: url(#clip-path-2);
+      }
+    </style>
+    <clipPath id="clip-path">
+      <path id="路径_5108" data-name="路径 5108" class="cls-1" d="M5.376-13.527l3.036,3.216.945-.885L7.779-12.85H13v-1.3H7.779l1.578-1.685-.945-.876ZM6.5-7H0V-20H6.5v2.6H5.2v-1.3H1.3V-8.3H5.2V-9.6H6.5Z" transform="translate(0 0)"/>
+    </clipPath>
+    <clipPath id="clip-path-2">
+      <path id="路径_5107" data-name="路径 5107" class="cls-2" d="M-220,389H53V-40H-220Z" transform="translate(220 40)"/>
+    </clipPath>
+  </defs>
+  <g id="recieved" transform="translate(-61 -33)">
+    <rect id="矩形_3673" data-name="矩形 3673" class="cls-3" width="18" height="18" transform="translate(61 33)"/>
+    <g id="组_2964" data-name="组 2964" class="cls-4" transform="translate(83.5 48.5) rotate(-90)">
+      <g id="组_2963" data-name="组 2963" class="cls-5" transform="translate(-143 -33)">
+        <path id="路径_5106" data-name="路径 5106" class="cls-2" d="M-5-5.5H14.5V-25H-5Z" transform="translate(144.75 34.75)"/>
+      </g>
+    </g>
+  </g>
+</svg>

diff --git a/static/images/transactions/retire.svg b/static/images/transactions/retire.svg
new file mode 100644 (file)
index 0000000..e417b08
--- /dev/null
+++ b/static/images/transactions/retire.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18 18">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-2 {
+        clip-path: url(#clip-path);
+      }
+
+      .cls-3 {
+        fill: #20252d;
+      }
+    </style>
+    <clipPath id="clip-path">
+      <rect id="矩形_3673" data-name="矩形 3673" class="cls-1" width="18" height="18" transform="translate(61 117)"/>
+    </clipPath>
+  </defs>
+  <g id="retire" transform="translate(-61 -117)">
+    <g id="蒙版组_66" data-name="蒙版组 66" class="cls-2">
+      <g id="组_2967" data-name="组 2967" transform="translate(-183.7 -1123.178)">
+        <path id="路径_4955" data-name="路径 4955" class="cls-3" d="M3.508,0H2.226V2.159H0V3.441H2.226V5.6H3.508V3.441H5.741V2.159H3.508Z" transform="translate(247.915 1250.93) rotate(45)"/>
+        <path id="减去_14" data-name="减去 14" class="cls-3" d="M9.485,13.2h0L6.5,11.5,4.29,12.93V11.6L5.9,10.489V7.835L3.624,6.5,1.338,7.784v.924H0V7.166L2.99,5.391V2.01L6.5,0,10,2.01V5.32l2.99,1.846v4.021L9.486,13.2ZM9.4,6.6,7.161,7.883v2.573L9.4,11.743l2.242-1.286V7.883L9.4,6.6ZM6.541,1.408l-2.3,1.318V5.363l2.3,1.318,2.3-1.318V2.727l-2.3-1.318Z" transform="translate(247.272 1242.678)"/>
+      </g>
+    </g>
+  </g>
+</svg>

diff --git a/static/images/transactions/sent.svg b/static/images/transactions/sent.svg
new file mode 100644 (file)
index 0000000..01d933c
--- /dev/null
+++ b/static/images/transactions/sent.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-2 {
+        fill: #20252d;
+      }
+    </style>
+  </defs>
+  <g id="sent" transform="translate(-61 -61)">
+    <rect id="矩形_3673" data-name="矩形 3673" class="cls-1" width="18" height="18" transform="translate(61 61)"/>
+    <path id="联合_120" data-name="联合 120" class="cls-2" d="M-2913-4980v-6.5h2.6v1.3h-1.3v3.9h10.4v-3.9h-1.3v-1.3h2.6v6.5Zm5.828-5.377v-5.221l-1.654,1.578-.886-.945,3.217-3.036,3.184,3.036-.877.945-1.684-1.578v5.221Z" transform="translate(2976.5 5056.5)"/>
+  </g>
+</svg>

diff --git a/static/images/transactions/success.svg b/static/images/transactions/success.svg
new file mode 100644 (file)
index 0000000..f297b4b
--- /dev/null
+++ b/static/images/transactions/success.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1536908540612" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1845" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M515.479165 66.922754c-243.541521 0-441.035275 197.391426-441.035276 441.035275s197.391426 441.035275 441.035276 441.035276 441.035275-197.391426 441.035275-441.035276-197.493754-441.035275-441.035275-441.035275z m266.770061 336.251024L486.315579 699.107425c-7.776956 7.776956-17.907465 11.665434-28.037973 11.665434-10.130509 0-20.261017-3.888478-28.037974-11.665434L285.035675 554.005796c-15.553912-15.451584-15.553912-40.624363 0-56.075947 15.553912-15.553912 40.624363-15.553912 56.075947 0l117.063655 117.063656 267.793345-267.793345c15.553912-15.553912 40.624363-15.553912 56.075947 0 15.656241 15.349256 15.656241 40.522035 0.204657 55.973618z" p-id="1846" fill="#dff0d3"></path></svg>
\ No newline at end of file