refactor: styles fix and update to keys and string

s

Author: andrerfneves

src/app.js

@@ -25,6 +25,7 @@ import {
   TIMESTAMP_KEY,
   WORDS_TEMP_KEY,
   TIMESTAMP_STRING_KEY,
+  COMPLETE_KEY,
 } from './constants/keys';
 
 // Styles
@@ -85,10 +86,6 @@ export class App extends PureComponent {
     }
   }
 
-  handleBitcoinClick = () => this.setState(prevState => ({
-    isBitcoinAddrOpened: !prevState.isBitcoinAddrOpened,
-  }));
-
   handleQRCode = () => this.setState(prevState => ({
     isQRCodeOpened: !prevState.isQRCodeOpened
   }))
@@ -140,10 +137,13 @@ export class App extends PureComponent {
 
     const invoiceDetails = Object.keys(decodedInvoice)
       .map((key) => {
+        console.log(key);
         switch (key) {
-          case WORDS_TEMP_KEY:
-          case TIMESTAMP_KEY:
+          case COMPLETE_KEY:
             return null;
+          // case WORDS_TEMP_KEY:
+          // case TIMESTAMP_KEY:
+          //   return null;
           case TAGS_KEY:
             return this.renderInvoiceInnerItem(key);
           case TIMESTAMP_STRING_KEY:
@@ -173,7 +173,7 @@ export class App extends PureComponent {
     ) ? renderNestedTag(tag) : renderNormalTag(tag);
 
     const renderNestedTag = (tag) => (
-      <div className='invoice__item invoice__item--nested'>
+      <div key={tag.data.key} className='invoice__item invoice__item--nested'>
         <div className='invoice__item-title'>
           {formatDetailsKey(tag.tagName)}
         </div>
@@ -187,7 +187,7 @@ export class App extends PureComponent {
                 {formatDetailsKey(key)}
               </div>
               <div className='invoice__nested-value'>
-                {`${tag.data[key]}`}
+                {`${tag.data[key] || '--'}`}
               </div>
             </div>
           ))}
@@ -196,12 +196,12 @@ export class App extends PureComponent {
     );
 
     const renderNormalTag = (tag) => (
-      <div className='invoice__item'>
+      <div key={tag.data.key} className='invoice__item'>
         <div className='invoice__item-title'>
           {formatDetailsKey(tag.tagName)}
         </div>
         <div className='invoice__item-value'>
-          {`${tag.data}`}
+          {`${tag.data || '--'}`}
         </div>
       </div>
     )
@@ -211,6 +211,7 @@ export class App extends PureComponent {
 
   renderInvoiceItem = (key, valuePropFormat) => {
     const { decodedInvoice } = this.state;
+    console.log({decodedInvoice})
 
     let value = `${decodedInvoice[key]}`;
     if (

src/assets/styles/modules/app.scss

@@ -1,6 +1,10 @@
 $container-width: 700px;
 
 // App Layout
+body {
+  background: $app-background;
+}
+
 .app {
   background: $app-background;
   display: flex;
@@ -32,9 +36,7 @@ $container-width: 700px;
     @include larger-than(mobile) {
       width: 100%;
       max-width: $container-width;
-      margin-bottom: 2 * $base-spacing;
       flex-direction: row;
-      margin-left: 4 * $base-spacing;
     }
   }
 

src/assets/styles/modules/error.scss

@@ -15,7 +15,6 @@
     color: $text-primary;
     font-size: $font-extra-small-size;
     font-weight: $font-weight-bold;
-    overflow-x: scroll;
 
     @include larger-than(mobile) {
       font-size: $font-small-size;

src/assets/styles/modules/invoice.scss

@@ -5,20 +5,25 @@
   width: 100%;
 
   margin: 0 auto;
-  overflow-x: scroll;
   padding: ($base-spacing / 2) 0;
   opacity: 0;
   visibility: hidden;
   border: $border;
+  margin-bottom: 20px;
+
   &--opened {
     opacity: 1;
     visibility: visible;
   }
 
   &__item {
-    padding: ($base-spacing / 2) 25px;
+    padding: ($base-spacing / 2) 20px;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
+
+    @include larger-than(mobile) {
+      flex-direction: row;
+    }
 
     &--nested {
       flex-direction: column;
@@ -29,12 +34,18 @@
     color: $text-secondary;
     font-weight: $font-weight-bold;
     min-width: 200px;
+    padding-bottom: 5px;
+
+    @include larger-than(mobile) {
+      padding-bottom: 0;
+    }
   }
 
   &__item-value {
     font-weight: $font-weight-bold;
     color: $text-primary;
     width: 100%;
+    word-break: break-all;
 
     &--nested {
       padding: ($base-spacing / 2) 0;

src/constants/keys.js

@@ -6,6 +6,7 @@ export const PAYMENT_REQUEST_KEY = 'paymentRequest';
 export const PREFIX_KEY = 'prefix';
 export const RECOVERY_FLAG_KEY = 'recoveryFlag';
 export const SATOSHIS_KEY = 'satoshis';
+export const MILLISATOSHIS_KEY = 'millisatoshis';
 export const SIGNATURE_KEY = 'signature';
 export const TIMESTAMP_KEY = 'timestamp';
 export const TIMESTAMP_STRING_KEY = 'timestampString';
@@ -18,4 +19,12 @@ export const CODE_KEY = 'code';
 export const ADDRESS_KEY = 'address';
 export const ADDRESS_HASH_KEY = 'addressHash';
 export const DESCRIPTION_KEY = 'description';
-export const EXPIRY_HTLC = 'min_final_cltv_expiry';
+export const EXPIRE_TIME = 'expire_time';
+export const EXPIRY_HTLC = 'expiry_htlc';
+export const MIN_FINAL_CLTV_EXPIRY = 'min_final_cltv_expiry';
+export const TIME_EXPIRE_DATE_STRING = 'timeExpireDateString';
+export const TIME_EXPIRE_DATE = 'timeExpireDate';
+export const timeExpireDate = 'min_final_cltv_expiry';
+// export const EXPIRY_HTLC = 'min_final_cltv_expiry';
+// export const EXPIRY_HTLC = 'min_final_cltv_expiry';
+// export const EXPIRY_HTLC = 'min_final_cltv_expiry';

src/utils/keys.js

@@ -1,11 +1,11 @@
 // Key Formatting Utilities
 import {
   COIN_TYPE_KEY,
-  COMPLETE_KEY,
   PAYEE_NODE_KEY,
   PAYMENT_REQUEST_KEY,
   PREFIX_KEY,
   TIMESTAMP_STRING_KEY,
+  TIMESTAMP_KEY,
   SATOSHIS_KEY,
   SIGNATURE_KEY,
   RECOVERY_FLAG_KEY,
@@ -14,31 +14,41 @@ import {
   FALLBACK_ADDRESS_KEY,
   ADDRESS_HASH_KEY,
   ADDRESS_KEY,
+  MILLISATOSHIS_KEY,
   CODE_KEY,
   DESCRIPTION_KEY,
   EXPIRY_HTLC,
+  TIME_EXPIRE_DATE,
+  WORDS_TEMP_KEY,
+  EXPIRE_TIME,
+  TIME_EXPIRE_DATE_STRING,
+  MIN_FINAL_CLTV_EXPIRY,
 } from '../constants/keys';
 
 export const formatDetailsKey = (key: string) => {
   switch (key) {
     case COIN_TYPE_KEY:
       return 'Chain';
-    case COMPLETE_KEY:
-      return 'Tx Complete?';
     case PAYEE_NODE_KEY:
       return 'Payee Pub Key';
+    case EXPIRE_TIME:
+      return 'Expire Time';
     case PAYMENT_REQUEST_KEY:
-      return 'Payment Request';
+      return 'Invoice';
     case PREFIX_KEY:
       return 'Prefix';
     case RECOVERY_FLAG_KEY:
       return 'Recovery Flag';
     case SATOSHIS_KEY:
-      return 'Payment Amount';
+      return 'Amount (Satoshis)';
+    case MILLISATOSHIS_KEY:
+      return 'Amount (Millisatoshis)';
     case SIGNATURE_KEY:
-      return 'Tx Signature';
+      return 'Transaction Signature';
     case TIMESTAMP_STRING_KEY:
-      return 'Timestamp';
+      return 'Timestamp String';
+    case WORDS_TEMP_KEY:
+      return 'Words Temp';
     case COMMIT_HASH_KEY:
       return 'Commit Hash';
     case PAYMENT_HASH_KEY:
@@ -55,6 +65,14 @@ export const formatDetailsKey = (key: string) => {
       return 'Description';
     case EXPIRY_HTLC:
       return 'Expiry CLTV';
+    case TIME_EXPIRE_DATE_STRING:
+      return 'Time Expire Date String';
+    case TIME_EXPIRE_DATE:
+      return 'Time Expire Date';
+    case TIMESTAMP_KEY:
+      return 'Timestamp';
+    case MIN_FINAL_CLTV_EXPIRY:
+      return 'Minimum Final CLTV Expiry';
     default:
       break;
   }