From 8dd0b3e52109ff2dc6e193eb6c8d093c4f93e431 Mon Sep 17 00:00:00 2001
From: nicocappabianca <nicolas.cappabianca@gmail.com>
Date: Wed, 21 Oct 2020 20:02:46 -0300
Subject: [PATCH 1/2] feat(tokens): Move TXID to its own card

---
 src/components/admin-lte/tokens/index.js      | 36 +++++++++++++++++--
 .../admin-lte/tokens/send-tokens.js           | 10 ++++--
 src/components/admin-lte/tokens/token.css     | 26 +++++++++++++-
 3 files changed, 66 insertions(+), 6 deletions(-)

diff --git a/src/components/admin-lte/tokens/index.js b/src/components/admin-lte/tokens/index.js
index ea7ef33..b75068e 100644
--- a/src/components/admin-lte/tokens/index.js
+++ b/src/components/admin-lte/tokens/index.js
@@ -19,7 +19,8 @@ class Tokens extends React.Component {
       inFetch: true,
       errMsg: '',
       selectedTokenToSend: '',
-      showForm: false
+      showForm: false, 
+      txId: null
     }
   }
 
@@ -35,6 +36,30 @@ class Tokens extends React.Component {
           className='btn-md ml-1 mt-1 mb-1'
           onClick={_this.handleGetTokens}
         />
+        {_this.state.txId && 
+          <div className="txIdContainer">
+            <button
+              onClick={() => _this.setState({txId: null})}
+            >
+              &times;
+            </button>
+            <Col xs={12} className="text-center mt-1">
+              <Box 
+                title='Transaction ID'
+                type='primary' 
+                className="p-0"
+              >
+                <a
+                  target='_blank'
+                  rel='noopener noreferrer'
+                  href={`https://explorer.bitcoin.com/bch/tx/${_this.state.txId}`}
+                >
+                  {_this.state.txId}
+                </a>
+              </Box>
+            </Col>
+          </div>
+        }
         {_this.state.showForm && (
           <SendTokens
             bchWallet={_this.props.bchWallet}
@@ -46,6 +71,7 @@ class Tokens extends React.Component {
                 : {}
             }
             handleSend={_this.onHandleGetTokens}
+            setTxId={_this.setTxId}
           />
         )}
         {_this.state.inFetch ? (
@@ -98,6 +124,12 @@ class Tokens extends React.Component {
     )
   }
 
+  setTxId (txId = null) { 
+    _this.setState({
+      txId: txId
+    })
+  }
+
   onHandleForm () {
     _this.setState({
       showForm: !_this.state.showForm
@@ -201,7 +233,7 @@ class Tokens extends React.Component {
       return {
         ...prevState,
         errMsg: errMsg,
-        txId: '',
+        txId: null,
         inFetch: false
       }
     })
diff --git a/src/components/admin-lte/tokens/send-tokens.js b/src/components/admin-lte/tokens/send-tokens.js
index 0739aa4..a322383 100644
--- a/src/components/admin-lte/tokens/send-tokens.js
+++ b/src/components/admin-lte/tokens/send-tokens.js
@@ -100,7 +100,7 @@ class SendTokens extends React.Component {
                   {_this.state.errMsg && (
                     <p className='error-color'>{_this.state.errMsg}</p>
                   )}
-                  {_this.state.txId && (
+                  {/* {_this.state.txId && (
                     <p className=''>
                       Transaction ID:
                       <a
@@ -111,7 +111,7 @@ class SendTokens extends React.Component {
                         {_this.state.txId}
                       </a>
                     </p>
-                  )}
+                  )} */}
                   {name && (
                     <span>
                       Selected Token : <b>{name}</b>
@@ -213,10 +213,13 @@ class SendTokens extends React.Component {
         inFetch: false
       })
 
+      _this.props.setTxId(result) /* Set the transaction ID in Tokens state */
+
       _this.resetValues()
 
       setTimeout(() => {
         _this.props.handleSend(true)
+        _this.props.handleBack()
       }, 3000)
     } catch (error) {
       _this.handleError(error)
@@ -369,6 +372,7 @@ SendTokens.propTypes = {
   bchWallet: PropTypes.object, // get minimal-slp-wallet instance
   selectedToken: PropTypes.object,
   handleBack: PropTypes.func.isRequired,
-  handleSend: PropTypes.func.isRequired
+  handleSend: PropTypes.func.isRequired,
+  setTxId: PropTypes.func.isRequired
 }
 export default SendTokens
diff --git a/src/components/admin-lte/tokens/token.css b/src/components/admin-lte/tokens/token.css
index 2d68a4b..cd6b642 100644
--- a/src/components/admin-lte/tokens/token.css
+++ b/src/components/admin-lte/tokens/token.css
@@ -71,4 +71,28 @@
         margin-left: 0;
     }
   }
- 
\ No newline at end of file
+ 
+.txIdContainer { 
+    position: relative; 
+    margin-bottom: 100px; 
+}
+@media only screen and (min-width: 768px) {
+    .txIdContainer { 
+        margin-bottom: 0px; 
+    }
+}
+.txIdContainer button { 
+    background-color: transparent; 
+    position: absolute; 
+    right: 20px; 
+    top: 20px;
+    font-size: 18px; 
+    font-weight: bold;  
+    z-index: 999;
+    border: none; 
+    color: #606c84; 
+}
+.txIdContainer button:focus { 
+    border: none; 
+    outline: none; 
+}
\ No newline at end of file

From 0914e15348b4613e4363609b7445c8793c9b5c79 Mon Sep 17 00:00:00 2001
From: nicocappabianca <nicolas.cappabianca@gmail.com>
Date: Wed, 21 Oct 2020 20:03:12 -0300
Subject: [PATCH 2/2] feat(tokens): Move TXID to its own card

---
 src/components/admin-lte/tokens/index.js | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/admin-lte/tokens/index.js b/src/components/admin-lte/tokens/index.js
index b75068e..0b25172 100644
--- a/src/components/admin-lte/tokens/index.js
+++ b/src/components/admin-lte/tokens/index.js
@@ -19,7 +19,7 @@ class Tokens extends React.Component {
       inFetch: true,
       errMsg: '',
       selectedTokenToSend: '',
-      showForm: false, 
+      showForm: false,
       txId: null
     }
   }
@@ -36,18 +36,18 @@ class Tokens extends React.Component {
           className='btn-md ml-1 mt-1 mb-1'
           onClick={_this.handleGetTokens}
         />
-        {_this.state.txId && 
-          <div className="txIdContainer">
+        {_this.state.txId &&
+          <div className='txIdContainer'>
             <button
-              onClick={() => _this.setState({txId: null})}
+              onClick={() => _this.setState({ txId: null })}
             >
               &times;
             </button>
-            <Col xs={12} className="text-center mt-1">
-              <Box 
+            <Col xs={12} className='text-center mt-1'>
+              <Box
                 title='Transaction ID'
-                type='primary' 
-                className="p-0"
+                type='primary'
+                className='p-0'
               >
                 <a
                   target='_blank'
@@ -58,8 +58,7 @@ class Tokens extends React.Component {
                 </a>
               </Box>
             </Col>
-          </div>
-        }
+          </div>}
         {_this.state.showForm && (
           <SendTokens
             bchWallet={_this.props.bchWallet}
@@ -124,7 +123,7 @@ class Tokens extends React.Component {
     )
   }
 
-  setTxId (txId = null) { 
+  setTxId (txId = null) {
     _this.setState({
       txId: txId
     })