style(token): Fixing token view interface

src/components/admin-lte/tokens/index.js

@@ -18,8 +18,8 @@ class Tokens extends React.Component {
       showModal: false,
       inFetch: true,
       onEmptyTokensMsg: 'No tokens found on this wallet..',
-      selectedTokenToSend: ''
-
+      selectedTokenToSend: '',
+      showForm: false
     }
   }
 
@@ -64,33 +64,45 @@ class Tokens extends React.Component {
                 </Row>
               </Box>
             )}
-
-            <SendTokens
-              bchWallet={_this.props.bchWallet}
-              walletInfo={_this.props.walletInfo}
-              selectedToken={_this.state.selectedTokenToSend ? _this.state.selectedTokenToSend : {}}
-            />
-            {_this.state.tokens.length && (
-              <Row>
-                {_this.state.tokens.map((val, i) => {
-                  return (
-                    <Col sm={4} key={`token-${i}`}>
-                      <TokenCard
-                        key={`token-${i}`}
-                        id={`token-${i}`}
-                        token={val}
-                        showToken={_this.showToken}
-                        selectToken={_this.selectToken}
-                      />
-                    </Col>
-                  )
-                })}
-              </Row>
+            {_this.state.showForm && (
+              <SendTokens
+                bchWallet={_this.props.bchWallet}
+                walletInfo={_this.props.walletInfo}
+                handleBack={_this.onHandleForm}
+                selectedToken={
+                  _this.state.selectedTokenToSend
+                    ? _this.state.selectedTokenToSend
+                    : {}
+                }
+              />
+            )}
+            {_this.state.tokens.length > 0 && (
+              <>
+                <Row>
+                  {_this.state.tokens.map((val, i) => {
+                    return (
+                      <Col sm={4} key={`token-${i}`}>
+                        <TokenCard
+                          key={`token-${i}`}
+                          id={`token-${i}`}
+                          token={val}
+                          showToken={_this.showToken}
+                          selectToken={_this.selectToken}
+                        />
+                      </Col>
+                    )
+                  })}
+                </Row>
+              </>
             )}
           </Content>
         )}
         <TokenModal
-          token={_this.state.selectedTokenToView ? _this.state.selectedTokenToView : {}}
+          token={
+            _this.state.selectedTokenToView
+              ? _this.state.selectedTokenToView
+              : {}
+          }
           handleOnHide={_this.onHandleToggleModal}
           show={_this.state.showModal}
         />
@@ -98,6 +110,12 @@ class Tokens extends React.Component {
     )
   }
 
+  onHandleForm () {
+    _this.setState({
+      showForm: !_this.state.showForm
+    })
+  }
+
   async componentDidMount () {
     const { mnemonic } = _this.props.walletInfo
     const bchWallet = _this.props.bchWallet
@@ -135,12 +153,10 @@ class Tokens extends React.Component {
     _this.setState({
       selectedTokenToSend
     })
-    const ele = document.getElementById('___gatsby')
-    ele.scrollIntoView(true)
+    !_this.state.showForm && _this.onHandleForm()
 
-    setTimeout(() => {
-      console.log(_this.state.selectedTokenToSend)
-    }, 500)
+    const ele = document.getElementById('___gatsby')
+    ele.scrollIntoView({ behavior: 'smooth' })
   }
 
   onHandleToggleModal () {

src/components/admin-lte/tokens/send-tokens.js

@@ -66,12 +66,19 @@ class SendTokens extends React.Component {
                       labelPosition='above'
                       onChange={_this.handleUpdate}
                     />
+                    <Button
+                      text='Close'
+                      type='primary'
+                      className='btn-lg mr-2'
+                      onClick={_this.props.handleBack}
+                    />
                     <Button
                       text='Send'
                       type='primary'
-                      className='btn-lg'
+                      className='btn-lg '
                       onClick={_this.handleSend}
                     />
+
                   </Box>
                 </Col>
                 <Col sm={12} className='text-center'>
@@ -116,13 +123,13 @@ class SendTokens extends React.Component {
       if (!tokenId) {
         throw new Error('There is no token selected')
       }
-      const receivers = {
+      const receiver = {
         address,
         tokenId,
         qty: Math.floor(Number(amountSat))
       }
 
-      console.log('receivers', receivers)
+      console.log('receiver', receiver)
 
       if (!bchWalletLib) {
         throw new Error('Wallet not found')
@@ -136,8 +143,9 @@ class SendTokens extends React.Component {
       bchWalletLib.utxos.tokenUtxos = await bchWalletLib.utxos.initUtxoStore(
         walletAddr
       )
-      // Send the BCH.
-      const result = await bchWalletLib.sendTokens(receivers)
+
+      // Send token.
+      const result = await bchWalletLib.sendTokens(receiver)
       // console.log('result',result)
 
       _this.setState({
@@ -259,6 +267,7 @@ class SendTokens extends React.Component {
 SendTokens.propTypes = {
   walletInfo: PropTypes.object.isRequired, // wallet info
   bchWallet: PropTypes.object, // get minimal-slp-wallet instance
-  selectedToken: PropTypes.object
+  selectedToken: PropTypes.object,
+  handleBack: PropTypes.func.isRequired
 }
 export default SendTokens