Merge pull request #90 from Permissionless-Software-Foundation/feature/TXIDcard

feat(tokens): Move TXID to its own card

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,29 @@ 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 +70,7 @@ class Tokens extends React.Component {
                 : {}
             }
             handleSend={_this.onHandleGetTokens}
+            setTxId={_this.setTxId}
           />
         )}
         {_this.state.inFetch ? (
@@ -98,6 +123,12 @@ class Tokens extends React.Component {
     )
   }
 
+  setTxId (txId = null) {
+    _this.setState({
+      txId: txId
+    })
+  }
+
   onHandleForm () {
     _this.setState({
       showForm: !_this.state.showForm
@@ -201,7 +232,7 @@ class Tokens extends React.Component {
       return {
         ...prevState,
         errMsg: errMsg,
-        txId: '',
+        txId: null,
         inFetch: false
       }
     })

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

src/components/admin-lte/tokens/token.css

@@ -71,4 +71,28 @@
         margin-left: 0;
     }
   }
- 
+ 
+.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; 
+}