Merge pull request #5 from andrerfneves/develop

Release v0.3.3

Author: andrerfneves

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lightning-decoder",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "author": {
     "email": "andrerfneves@protonmail.com",
     "name": "André Neves",

src/app.js

@@ -11,13 +11,17 @@ import './assets/styles/main.scss';
 // Assets
 import arrowImage from './assets/images/arrow.svg';
 import closeImage from './assets/images/close.svg';
+import githubImage from './assets/images/github.svg';
+import bitcoinImage from './assets/images/bitcoin.svg';
 import boltImage from './assets/images/bolt.png';
 
 // Constants
 import {
   APP_NAME,
   APP_TAGLINE,
   APP_INPUT_PLACEHOLDER,
+  APP_GITHUB,
+  DONATION_BTC,
 } from './constants/app';
 import {
   TAGS_KEY,
@@ -31,6 +35,7 @@ const INITIAL_STATE = {
   error: {},
   hasError: false,
   isInvoiceLoaded: false,
+  isBitcoinAddrOpened: false,
   text: '',
 };
 
@@ -70,6 +75,10 @@ class App extends PureComponent {
     if (event.key === 'Enter') this.getInvoiceDetails(text);
   }
 
+  handleBitcoinClick = () => this.setState(prevState => ({
+    isBitcoinAddrOpened: !prevState.isBitcoinAddrOpened,
+  }));
+
   renderErrorDetails = () => {
     const { hasError, error } = this.state;
 
@@ -256,9 +265,52 @@ class App extends PureComponent {
     );
   }
 
+  renderOptions = () => {
+    const { isBitcoinAddrOpened } = this.state;
+    const bitcoinClassnames = cx({
+      'options__bitcoin': true,
+      'options__bitcoin--opened': isBitcoinAddrOpened,
+    });
+
+    return (
+      <div className='options'>
+        <div className='options__wrapper'>
+          <div className={bitcoinClassnames}>
+            <div className='options__bitcoin-address'>
+              {DONATION_BTC}
+            </div>
+            <button
+              onClick={this.handleBitcoinClick}
+              className='options__bitcoin-icon-wrapper'
+            >
+              <img
+                className='options__bitcoin-icon'
+                src={bitcoinImage}
+                alt='Bitcoin'
+              />
+            </button>
+          </div>
+          <a
+            href={APP_GITHUB}
+            className='options__github'
+            target='_blank'
+            rel='noopener noreferrer'
+          >
+            <img
+              className='options__github-icon'
+              src={githubImage}
+              alt='GitHub'
+            />
+          </a>
+        </div>
+      </div>
+    );
+  }
+
   render() {
     return (
       <div className='app'>
+        {this.renderOptions()}
         {this.renderLogo()}
         <div className='app__row'>
           {this.renderInput()}

src/assets/images/bitcoin.svg

@@ -16,4 +16,5 @@
 @import 'modules/invoice';
 @import 'modules/logo';
 @import 'modules/submit';
+@import 'modules/options';
 

src/assets/images/github.svg

@@ -4,11 +4,14 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
   height: 100%;
   width: 100%;
   padding: $base-spacing 0;
 
+  @include larger-than(mobile) {
+    justify-content: center;
+  }
+
   &__row {
     display: flex;
     flex-direction: row;

src/assets/styles/main.scss

@@ -0,0 +1,105 @@
+.options {
+  position: absolute;
+  bottom: $base-spacing;
+  right: $base-spacing;
+  left: $base-spacing;
+
+  @include larger-than(mobile) {
+    top: $base-spacing;
+    right: $base-spacing;
+    bottom: auto;
+    left: auto;
+  }
+
+  &__wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    @include larger-than(mobile) {
+      justify-content: flex-end;
+    }
+  }
+
+  &__bitcoin {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    order: 2;
+
+    @include larger-than(mobile) {
+      order: 1;
+    }
+
+    &--opened {
+      .options__bitcoin-address {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      .options__bitcoin-icon {
+        opacity: 1;
+      }
+    }
+  }
+
+  &__bitcoin-address {
+    opacity: 0;
+    visibility: hidden;
+    padding-right: $base-spacing / 2;
+    color: #ffffff;
+    font-weight: 900;
+    font-size: 14px;
+  }
+
+  &__bitcoin-icon-wrapper {
+    @include reset-button;
+    width: 40px;
+    height: 40px;
+    background: $background-primary;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      .options__bitcoin-icon {
+        opacity: 1;
+      }
+    }
+  }
+
+  &__bitcoin-icon {
+    width: 25px;
+    height: 25px;
+    opacity: 0.6;
+  }
+
+  &__github {
+    width: 40px;
+    height: 40px;
+    background: $background-primary;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    order: 1;
+
+    @include larger-than(mobile) {
+      order: 2;
+      margin-left: $base-spacing / 2;
+    }
+
+    &:hover {
+      .options__github-icon {
+        opacity: 1;
+      }
+    }
+  }
+
+  &__github-icon {
+    width: 25px;
+    height: 25px;
+    opacity: 0.6;
+  }
+}

src/assets/styles/modules/app.scss

@@ -1,4 +1,6 @@
 // App-Wide Constants
 export const APP_NAME = 'Lightning Decoder';
 export const APP_TAGLINE = 'Decode Lightning Network Invoices (BOLT11)';
-export const APP_INPUT_PLACEHOLDER = 'BOLT11 Payment Request';
+export const APP_INPUT_PLACEHOLDER = 'BOLT11 Payment Request';
+export const APP_GITHUB = 'https://github.com/andrerfneves/lightning-decoder';
+export const DONATION_BTC = '33sFHnYAnNXBteG8jH8HoGU5YgywN2A3tv';