From 9cd328fc71145aa8bb25f52bb6b06645a0f25f15 Mon Sep 17 00:00:00 2001
From: Daniel Gonzalez <danielhumgon@gmail.com>
Date: Mon, 29 Mar 2021 18:14:12 -0400
Subject: [PATCH] feat(burn): Added token burn functionality

---
 src/components/admin-lte/tokens/index.js      |  33 +-
 .../admin-lte/tokens/token-modal.js           | 328 +++++++++++-------
 2 files changed, 215 insertions(+), 146 deletions(-)

diff --git a/src/components/admin-lte/tokens/index.js b/src/components/admin-lte/tokens/index.js
index 62cb9f8..9d618f5 100644
--- a/src/components/admin-lte/tokens/index.js
+++ b/src/components/admin-lte/tokens/index.js
@@ -91,17 +91,21 @@ class Tokens extends React.Component {
                 <>
                   <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>
-                      )
+                      if (val.qty > 0) {
+                        return (
+                          <Col sm={4} key={`token-${i}`}>
+                            <TokenCard
+                              key={`token-${i}`}
+                              id={`token-${i}`}
+                              token={val}
+                              showToken={_this.showToken}
+                              selectToken={_this.selectToken}
+                            />
+                          </Col>
+                        )
+                      } else {
+                        return <span key={`token-${i}`} />
+                      }
                     })}
                   </Row>
                 </>
@@ -109,6 +113,7 @@ class Tokens extends React.Component {
             </Content>
             )}
         <TokenModal
+          bchWallet={_this.props.bchWallet}
           token={
             _this.state.selectedTokenToView
               ? _this.state.selectedTokenToView
@@ -116,6 +121,7 @@ class Tokens extends React.Component {
           }
           handleOnHide={_this.onHandleToggleModal}
           show={_this.state.showModal}
+          explorerURL={_this.state.explorerURL}
         />
       </>
     )
@@ -198,10 +204,13 @@ class Tokens extends React.Component {
     ele.scrollIntoView({ behavior: 'smooth' })
   }
 
-  onHandleToggleModal () {
+  onHandleToggleModal (refresh = null) {
     _this.setState({
       showModal: !_this.state.showModal
     })
+    if (refresh) {
+      _this.handleGetTokens(true)
+    }
   }
 
   handleError (error) {
diff --git a/src/components/admin-lte/tokens/token-modal.js b/src/components/admin-lte/tokens/token-modal.js
index 0c979ce..3447365 100644
--- a/src/components/admin-lte/tokens/token-modal.js
+++ b/src/components/admin-lte/tokens/token-modal.js
@@ -11,7 +11,10 @@ class TokenModal extends React.Component {
     _this = this
     this.state = {
       copySuccess: '',
-      isBurnView: false
+      isBurnView: false,
+      txId: '',
+      errMsg: '',
+      inFetch: false
     }
 
     this.modalFooter = (
@@ -36,6 +39,15 @@ class TokenModal extends React.Component {
         />
       </>
     )
+    this.onDoneFooter = (
+      <>
+        <Button
+          text='Close'
+          pullLeft
+          onClick={() => this.handleBurnAll(false)}
+        />
+      </>
+    )
   }
 
   render () {
@@ -46,7 +58,11 @@ class TokenModal extends React.Component {
           title={_this.state.isBurnView ? `Burn All ${token.name}` : token.name}
           modal
           modalFooter={
-            _this.state.isBurnView ? this.burnFooter : this.modalFooter
+            !_this.state.isBurnView
+              ? this.modalFooter
+              : _this.state.txId || _this.state.errMsg
+                ? this.onDoneFooter
+                : this.burnFooter
           }
           show={_this.props.show}
           modalCloseButton
@@ -54,138 +70,159 @@ class TokenModal extends React.Component {
         >
           <Row>
             <Col sm={12}>
-              {_this.state.isBurnView
-                ? (
+              {_this.state.isBurnView && !_this.state.txId && (
+                <Box loaded={!_this.state.inFetch} className='border-none'>
                   <p>
                     Are you sure you want to burn {`${token.qty} `}
                     tokens?
                   </p>
-                  )
-                : (
-                  <Box className=' border-none '>
-                    <Row>
-                      <Col
-                        sm={12}
-                        className='text-center   tokenModal-info-container'
-                      >
-                        <Row className='tokenModal-info-content mt-1 text-left'>
-                          <Col xs={12}>
-                            <Row>
-                              <Col xs={12} sm={3}>
-                                <b>TokenId:</b>
-                              </Col>
-                              <Col xs={9} sm={7}>
-                                {token.tokenId}
-                              </Col>
-                              <Col
-                                xs={3}
-                                sm={2}
-                                className={
+                </Box>
+              )}
+
+              {_this.state.isBurnView && _this.state.txId && (
+                <div className='text-center '>
+                  <p>Transaction ID:</p>
+                  <a
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    href={`${_this.props.explorerURL}/${_this.state.txId}`}
+                  >
+                    {_this.state.txId}
+                  </a>
+                </div>
+              )}
+
+              {_this.state.isBurnView && _this.state.errMsg && (
+                <div className='text-center'>
+                  <p className='error-color'> {_this.state.errMsg}</p>
+                </div>
+              )}
+
+              {!_this.state.isBurnView && (
+                <Box className=' border-none '>
+                  <Row>
+                    <Col
+                      sm={12}
+                      className='text-center   tokenModal-info-container'
+                    >
+                      <Row className='tokenModal-info-content mt-1 text-left'>
+                        <Col xs={12}>
+                          <Row>
+                            <Col xs={12} sm={3}>
+                              <b>TokenId:</b>
+                            </Col>
+                            <Col xs={9} sm={7}>
+                              {token.tokenId}
+                            </Col>
+                            <Col
+                              xs={3}
+                              sm={2}
+                              className={
                                 _this.state.copySuccess ? 'nopadding' : ''
                               }
+                            >
+                              {_this.state.copySuccess === 'tokenId'
+                                ? (
+                                  <div className='copied-text'>
+                                    <span>Copied!</span>
+                                  </div>
+                                  )
+                                : (
+                                  <FontAwesomeIcon
+                                    className='icon btn-animation'
+                                    style={{ cssFloat: 'right' }}
+                                    size='lg'
+                                    onClick={() =>
+                                      _this.copyToClipBoard('tokenId')}
+                                    icon='copy'
+                                  />
+                                  )}
+                            </Col>
+                          </Row>
+                        </Col>
+                      </Row>
+                      <Row className='tokenModal-info-content mt-1 text-left'>
+                        <Col xs={12}>
+                          <Row>
+                            <Col xs={12} sm={3}>
+                              <b>URL:</b>
+                            </Col>
+                            <Col xs={12} sm={9}>
+                              <a
+                                href={`http://${token.url}`}
+                                target='_blank'
+                                rel='noopener noreferrer'
                               >
-                                {_this.state.copySuccess === 'tokenId'
-                                  ? (
-                                    <div className='copied-text'>
-                                      <span>Copied!</span>
-                                    </div>
-                                    )
-                                  : (
-                                    <FontAwesomeIcon
-                                      className='icon btn-animation'
-                                      style={{ cssFloat: 'right' }}
-                                      size='lg'
-                                      onClick={() =>
-                                        _this.copyToClipBoard('tokenId')}
-                                      icon='copy'
-                                    />
-                                    )}
-                              </Col>
-                            </Row>
-                          </Col>
-                        </Row>
-                        <Row className='tokenModal-info-content mt-1 text-left'>
-                          <Col xs={12}>
-                            <Row>
-                              <Col xs={12} sm={3}>
-                                <b>URL:</b>
-                              </Col>
-                              <Col xs={12} sm={9}>
-                                <a
-                                  href={`http://${token.url}`}
-                                  target='_blank'
-                                  rel='noopener noreferrer'
-                                >
-                                  {token.url}
-                                </a>
-                              </Col>
-                            </Row>
-                          </Col>
-                        </Row>
-                        <Row className='tokenModal-info-content mt-1 text-left'>
-                          <Col xs={12}>
-                            <Row>
-                              <Col xs={12} sm={3}>
-                                <b>Ticker:</b>
-                              </Col>
-                              <Col xs={12} sm={9}>
-                                {token.ticker}
-                              </Col>
-                            </Row>
-                          </Col>
-                        </Row>
-                        <Row className='tokenModal-info-content mt-1 text-left'>
-                          <Col xs={12}>
-                            <Row>
-                              <Col xs={12} sm={3}>
-                                <b>Name:</b>
-                              </Col>
-                              <Col xs={12} sm={9}>
-                                {token.name}
-                              </Col>
-                            </Row>
-                          </Col>
-                        </Row>
-                        <Row className='tokenModal-info-content mt-1 text-left'>
-                          <Col xs={12}>
-                            <Row>
-                              <Col xs={12} sm={3}>
-                                <b>Balance:</b>
-                              </Col>
-                              <Col xs={12} sm={9}>
-                                {token.qty}
-                              </Col>
-                            </Row>
-                          </Col>
-                        </Row>
-                        <Row className='tokenModal-info-content mt-1 text-left'>
-                          <Col xs={12}>
-                            <Row>
-                              <Col xs={12} sm={3}>
-                                <b>Decimals:</b>
-                              </Col>
-                              <Col xs={12} sm={9}>
-                                {token.decimals}
-                              </Col>
-                            </Row>
-                          </Col>
-                        </Row>
-                        <Row className='tokenModal-info-content mt-1 text-left'>
-                          <Col xs={12}>
-                            <Row>
-                              <Col xs={12} sm={3}>
-                                <b>TokenType:</b>
-                              </Col>
-                              <Col xs={12} sm={9}>
-                                {token.tokenType}
-                              </Col>
-                            </Row>
-                          </Col>
-                        </Row>
-                      </Col>
-                    </Row>
-                  </Box>
-                  )}
+                                {token.url}
+                              </a>
+                            </Col>
+                          </Row>
+                        </Col>
+                      </Row>
+                      <Row className='tokenModal-info-content mt-1 text-left'>
+                        <Col xs={12}>
+                          <Row>
+                            <Col xs={12} sm={3}>
+                              <b>Ticker:</b>
+                            </Col>
+                            <Col xs={12} sm={9}>
+                              {token.ticker}
+                            </Col>
+                          </Row>
+                        </Col>
+                      </Row>
+                      <Row className='tokenModal-info-content mt-1 text-left'>
+                        <Col xs={12}>
+                          <Row>
+                            <Col xs={12} sm={3}>
+                              <b>Name:</b>
+                            </Col>
+                            <Col xs={12} sm={9}>
+                              {token.name}
+                            </Col>
+                          </Row>
+                        </Col>
+                      </Row>
+                      <Row className='tokenModal-info-content mt-1 text-left'>
+                        <Col xs={12}>
+                          <Row>
+                            <Col xs={12} sm={3}>
+                              <b>Balance:</b>
+                            </Col>
+                            <Col xs={12} sm={9}>
+                              {token.qty}
+                            </Col>
+                          </Row>
+                        </Col>
+                      </Row>
+                      <Row className='tokenModal-info-content mt-1 text-left'>
+                        <Col xs={12}>
+                          <Row>
+                            <Col xs={12} sm={3}>
+                              <b>Decimals:</b>
+                            </Col>
+                            <Col xs={12} sm={9}>
+                              {token.decimals}
+                            </Col>
+                          </Row>
+                        </Col>
+                      </Row>
+                      <Row className='tokenModal-info-content mt-1 text-left'>
+                        <Col xs={12}>
+                          <Row>
+                            <Col xs={12} sm={3}>
+                              <b>TokenType:</b>
+                            </Col>
+                            <Col xs={12} sm={9}>
+                              {token.tokenType}
+                            </Col>
+                          </Row>
+                        </Col>
+                      </Row>
+                    </Col>
+                  </Row>
+                </Box>
+              )}
             </Col>
           </Row>
         </Content>
@@ -224,19 +261,24 @@ class TokenModal extends React.Component {
   }
 
   handleModal () {
-    _this.props.handleOnHide()
+    // if txId exist refresh tokens on close
+    _this.props.handleOnHide(_this.state.txId)
+
     setTimeout(() => {
       _this.setState({
-        isBurnView: false
+        isBurnView: false,
+        txId: '',
+        errMsg: '',
+        inFetch: false
       })
     }, 200)
   }
 
-  handleBurnAll (isConfirmed) {
+  async handleBurnAll (isConfirmed) {
     try {
       // Dismiss
       if (!isConfirmed) {
-        _this.hideModal()
+        _this.handleModal()
         return
       }
 
@@ -244,13 +286,31 @@ class TokenModal extends React.Component {
        *  BURN ALL
        *
        */
-      console.log('Hello Word')
-    } catch (error) {}
+      _this.setState({
+        inFetch: true
+      })
+      const { bchWallet, token } = _this.props
+
+      const result = await bchWallet.burnTokens(token.qty, token.tokenId)
+      console.log('result', result)
+      _this.setState({
+        txId: result,
+        inFetch: false
+      })
+    } catch (error) {
+      console.warn(error)
+      _this.setState({
+        errMsg: error.message,
+        inFetch: false
+      })
+    }
   }
 }
 TokenModal.propTypes = {
   token: PropTypes.object.isRequired,
   show: PropTypes.bool.isRequired,
-  handleOnHide: PropTypes.func.isRequired
+  handleOnHide: PropTypes.func.isRequired,
+  bchWallet: PropTypes.object, // get minimal-slp-wallet instance
+  explorerURL: PropTypes.string
 }
 export default TokenModal