From abe60b439962c353e36b4f3acda82670944fefaa Mon Sep 17 00:00:00 2001
From: Daniel Gonzalez <danielhumgon@gmail.com>
Date: Wed, 17 Feb 2021 17:00:59 -0400
Subject: [PATCH] feat(burn): Added 'Burn' button to token info modal

---
 .../admin-lte/tokens/token-modal.js           | 303 +++++++++++-------
 1 file changed, 182 insertions(+), 121 deletions(-)

diff --git a/src/components/admin-lte/tokens/token-modal.js b/src/components/admin-lte/tokens/token-modal.js
index 7a77f22..0c979ce 100644
--- a/src/components/admin-lte/tokens/token-modal.js
+++ b/src/components/admin-lte/tokens/token-modal.js
@@ -10,12 +10,30 @@ class TokenModal extends React.Component {
     super(props)
     _this = this
     this.state = {
-      copySuccess: ''
+      copySuccess: '',
+      isBurnView: false
     }
 
     this.modalFooter = (
       <>
-        <Button text='Close' pullLeft onClick={this.props.handleOnHide} />
+        <Button text='Close' pullLeft onClick={this.handleModal} />
+        <Button
+          type='primary'
+          text='Burn All'
+          pullRight
+          onClick={this.handleConfirm}
+        />
+      </>
+    )
+    this.burnFooter = (
+      <>
+        <Button text='No' pullLeft onClick={() => this.handleBurnAll(false)} />
+        <Button
+          type='primary'
+          text='Yes'
+          pullRight
+          onClick={() => this.handleBurnAll(true)}
+        />
       </>
     )
   }
@@ -25,137 +43,149 @@ class TokenModal extends React.Component {
     return (
       <>
         <Content
-          title={token.name}
+          title={_this.state.isBurnView ? `Burn All ${token.name}` : token.name}
           modal
-          modalFooter={this.modalFooter}
+          modalFooter={
+            _this.state.isBurnView ? this.burnFooter : this.modalFooter
+          }
           show={_this.props.show}
           modalCloseButton
-          onHide={_this.props.handleOnHide}
+          onHide={_this.handleModal}
         >
           <Row>
             <Col sm={12}>
-              <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>
+              {_this.state.isBurnView
+                ? (
+                  <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={
+                                _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>
-                          <Col xs={9} sm={7}>
-                            {token.tokenId}
+                        </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>
-                          <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'
-                                />
-                                )}
+                        </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>
-                    <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>
+                  </Box>
+                  )}
             </Col>
           </Row>
         </Content>
@@ -186,6 +216,37 @@ class TokenModal extends React.Component {
       })
     }, 1000)
   }
+
+  handleConfirm () {
+    _this.setState({
+      isBurnView: true
+    })
+  }
+
+  handleModal () {
+    _this.props.handleOnHide()
+    setTimeout(() => {
+      _this.setState({
+        isBurnView: false
+      })
+    }, 200)
+  }
+
+  handleBurnAll (isConfirmed) {
+    try {
+      // Dismiss
+      if (!isConfirmed) {
+        _this.hideModal()
+        return
+      }
+
+      /**
+       *  BURN ALL
+       *
+       */
+      console.log('Hello Word')
+    } catch (error) {}
+  }
 }
 TokenModal.propTypes = {
   token: PropTypes.object.isRequired,