Merge pull request #5875 from JDonadio/feat/low-fee-warning

Feat/Add warning for low fee

src/sass/views/includes/txp-details.scss

@@ -89,6 +89,17 @@
           flex-grow: 1;
         }
       }
+      &.low-fees {
+        border-top: none;
+        display: flex;
+        font-size: 14px;
+        color: #aaa;
+        align-items: center;
+        margin-top: -20px;
+        i {
+          padding-right: 20px;
+        }
+      }
     }
     .item-divider {
       padding-top: 1.2rem;

src/sass/views/walletDetails.scss

@@ -209,6 +209,20 @@
     font-size: 13px;
     color: $v-mid-gray;
   }
+  .low-fees {
+    .comment {
+      color: $v-mid-gray;
+      font-size: 12.5px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-left: 25px;
+    }
+    img {
+      position: absolute;
+      margin-top: 3px;
+    }
+  }
 }
 
 .wallet-details-wallet-info {
@@ -238,7 +252,7 @@ a.item {
 
 .recent svg {
   margin-left:5px;
-  width:0.7em; 
+  width:0.7em;
   height:0.7em;
   stroke: #eee;
 }

www/views/tx-details.html

@@ -84,6 +84,10 @@
             <span ng-if="toggleFeeFiat">{{feeFiatStr}}</span>
           </span>
         </div>
+        <div class="item low-fees" ng-if="btx.action == 'received' && btx.lowFees">
+          <i class="icon"><img src="img/icon-warning.png" width="20px"></i>
+          <span translate>This transaction could take a long time to confirm or could be dropped due to the low fees set by the sender</span>
+        </div>
         <div class="item single-line">
           <span class="label" translate>Confirmations</span>
           <span class="item-note">

www/views/walletDetails.html

@@ -238,6 +238,10 @@
                 <div ng-show="btx.action == 'received'" class="ellipsis">
                   <div ng-if="btx.note.body" class="wallet-details__tx-message ellipsis">{{btx.note.body}}</div>
                   <div ng-if="!btx.note.body" class="wallet-details__tx-message ellipsis" translate>Received</div>
+                  <div class="low-fees" ng-if="btx.lowFees">
+                    <i class="icon"><img src="img/icon-warning.png" width="20px"></i>
+                    <span class="comment" translate>Low fees</span>
+                  </div>
                 </div>
 
                 <div ng-show="btx.action == 'sent'" class="ellipsis">