From 622fdc23435c74716f21ce5ae78da1816d878a63 Mon Sep 17 00:00:00 2001
From: Daniel Gonzalez <danielhumgon@gmail.com>
Date: Fri, 7 Aug 2020 21:50:43 -0400
Subject: [PATCH] feat(send): Added Send Max button to token send

---
 src/components/admin-lte/configure/index.js   | 197 +++++++++---------
 .../admin-lte/tokens/send-tokens.js           |  66 ++++--
 src/components/admin-lte/tokens/token.css     |  26 ++-
 3 files changed, 177 insertions(+), 112 deletions(-)

diff --git a/src/components/admin-lte/configure/index.js b/src/components/admin-lte/configure/index.js
index 60cacc2..41b8bd4 100644
--- a/src/components/admin-lte/configure/index.js
+++ b/src/components/admin-lte/configure/index.js
@@ -33,112 +33,113 @@ class Configure extends React.Component {
   render () {
     return (
       <Content>
-            {MenuComponents.length > 0 && 
-            <ButtonGroup margin>
-             <Button margin
-                      text='General'
-                      type='primary'
-                      className='btn-md mt-1'
-                      onClick={() => _this.setState({ menuItem: 'Configure' })}
+        {MenuComponents.length > 0 &&
+          <ButtonGroup margin>
+            <Button
+              margin
+              text='General'
+              type='primary'
+              className='btn-md mt-1'
+              onClick={() => _this.setState({ menuItem: 'Configure' })}
             />
 
-            {MenuComponents.map(menuItem => <Button key={menuItem.key} margin className='btn-md mt-1' type="primary" onClick={() => _this.setState({ menuItem: menuItem.key })} text={menuItem.key}/>)}
-            </ButtonGroup>}
-        {_this.state.menuItem === 'Configure' && 
-        <>
-        <Row>
-          <Col sm={12}>
-            <Box className='hover-shadow border-none mt-2'>
-              <Row>
-                <Col sm={12} className='text-center'>
-                  <h1>
-                    <FontAwesomeIcon
-                      className='title-icon'
-                      size='xs'
-                      icon='cog'
-                    />
-                    <span>Configure</span>
-                  </h1>
-                  <Box className='border-none'>
-                    <h3>
-                      <FontAwesomeIcon
-                        className='title-icon'
-                        size='xs'
-                        icon='exclamation-triangle'
-                      />
+            {MenuComponents.map(menuItem => <Button key={menuItem.key} margin className='btn-md mt-1' type='primary' onClick={() => _this.setState({ menuItem: menuItem.key })} text={menuItem.key} />)}
+          </ButtonGroup>}
+        {_this.state.menuItem === 'Configure' &&
+          <>
+            <Row>
+              <Col sm={12}>
+                <Box className='hover-shadow border-none mt-2'>
+                  <Row>
+                    <Col sm={12} className='text-center'>
+                      <h1>
+                        <FontAwesomeIcon
+                          className='title-icon'
+                          size='xs'
+                          icon='cog'
+                        />
+                        <span>Configure</span>
+                      </h1>
+                      <Box className='border-none'>
+                        <h3>
+                          <FontAwesomeIcon
+                            className='title-icon'
+                            size='xs'
+                            icon='exclamation-triangle'
+                          />
                       Be Careful
-                    </h3>
-                    <p>
+                        </h3>
+                        <p>
                       Backup your wallet first. Updating the configuration will
                       restart the app.
-                    </p>
-                    <p>
+                        </p>
+                        <p>
                       This is just a placeholder. This View will allow the user
                       to pick alternate back-end servers. The default will be{' '}
-                      <a
-                        href='https://fullstack.cash'
-                        target='_blank'
-                        rel='noopener noreferrer'
-                      >
+                          <a
+                            href='https://fullstack.cash'
+                            target='_blank'
+                            rel='noopener noreferrer'
+                          >
                         FullStack.cash
-                      </a>
-                    </p>
-                    <Button
-                      text='Clear LocalStorage'
-                      type='primary'
-                      className='btn-lg mt-1'
-                      onClick={_this.handleClearLocalStorage}
-                    />
-                  </Box>
-                </Col>
-              </Row>
-            </Box>
-          </Col>
-          <Col sm={12}>
-            <Box className='hover-shadow border-none mt-2'>
-              <Row>
-                <Col sm={12} className='text-center'>
-                  <h1>
-                    <FontAwesomeIcon
-                      className='title-icon'
-                      size='xs'
-                      icon='coins'
-                    />
-                    <span>JWT</span>
-                  </h1>
-                  <Box className='border-none'>
-                    <Text
-                      id='jwt'
-                      name='JWT'
-                      placeholder='Enter FullStack.cash JWT'
-                      label='FullStack.cash JWT'
-                      labelPosition='above'
-                      onChange={_this.handleUpdate}
-                    />
-                    <Button
-                      text='Update'
-                      type='primary'
-                      className='btn-lg'
-                      onClick={_this.handleUpdateJWT}
-                    />
-                  </Box>
-                </Col>
-                <Col sm={12} className='text-center'>
-                  {_this.state.errMsg && (
-                    <p className='error-color'>{_this.state.errMsg}</p>
-                  )}
-                </Col>
-              </Row>
-            </Box>
-          </Col>
-        </Row>
-        <Servers
-          setWalletInfo={_this.props.setWalletInfo}
-          walletInfo={_this.props.walletInfo}
-          setBchWallet={_this.props.setBchWallet}
-        />
-        </>}
-      {_this.state.menuItem !== 'Configure' && MenuComponents.filter(menuItem => menuItem.key === _this.state.menuItem)[0].component}
+                          </a>
+                        </p>
+                        <Button
+                          text='Clear LocalStorage'
+                          type='primary'
+                          className='btn-lg mt-1'
+                          onClick={_this.handleClearLocalStorage}
+                        />
+                      </Box>
+                    </Col>
+                  </Row>
+                </Box>
+              </Col>
+              <Col sm={12}>
+                <Box className='hover-shadow border-none mt-2'>
+                  <Row>
+                    <Col sm={12} className='text-center'>
+                      <h1>
+                        <FontAwesomeIcon
+                          className='title-icon'
+                          size='xs'
+                          icon='coins'
+                        />
+                        <span>JWT</span>
+                      </h1>
+                      <Box className='border-none'>
+                        <Text
+                          id='jwt'
+                          name='JWT'
+                          placeholder='Enter FullStack.cash JWT'
+                          label='FullStack.cash JWT'
+                          labelPosition='above'
+                          onChange={_this.handleUpdate}
+                        />
+                        <Button
+                          text='Update'
+                          type='primary'
+                          className='btn-lg'
+                          onClick={_this.handleUpdateJWT}
+                        />
+                      </Box>
+                    </Col>
+                    <Col sm={12} className='text-center'>
+                      {_this.state.errMsg && (
+                        <p className='error-color'>{_this.state.errMsg}</p>
+                      )}
+                    </Col>
+                  </Row>
+                </Box>
+              </Col>
+            </Row>
+            <Servers
+              setWalletInfo={_this.props.setWalletInfo}
+              walletInfo={_this.props.walletInfo}
+              setBchWallet={_this.props.setBchWallet}
+            />
+          </>}
+        {_this.state.menuItem !== 'Configure' && MenuComponents.filter(menuItem => menuItem.key === _this.state.menuItem)[0].component}
       </Content>
     )
   }
diff --git a/src/components/admin-lte/tokens/send-tokens.js b/src/components/admin-lte/tokens/send-tokens.js
index 39859ee..f5d90f4 100644
--- a/src/components/admin-lte/tokens/send-tokens.js
+++ b/src/components/admin-lte/tokens/send-tokens.js
@@ -24,7 +24,8 @@ class SendTokens extends React.Component {
       errMsg: '',
       txId: '',
       showScan: false,
-      inFetch: false
+      inFetch: false,
+      tokenId: ''
     }
     _this.BchWallet = BchWallet
   }
@@ -66,21 +67,37 @@ class SendTokens extends React.Component {
                       name='amountSat'
                       placeholder='Enter amount to send'
                       label='Amount'
+                      value={_this.state.amountSat}
                       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 '
-                      onClick={_this.handleSend}
-                    />
+                    <Row className='token-botton-container'>
+                      <Col xs={12} sm={4}>
+                        <Button
+                          text='Send'
+                          type='primary'
+                          className='btn-lg btn-send-token mr-1 ml-1 mt-1'
+                          onClick={_this.handleSend}
+                        />
+                      </Col>
+                      <Col xs={12} sm={4}>
+                        <Button
+                          text='Send Max'
+                          type='primary'
+                          className='btn-lg btn-send-token mr-1 ml-1 mt-1'
+                          onClick={_this.handleSendMax}
+                        />
+                      </Col>
+                      <Col xs={12} sm={4}>
+                        <Button
+                          text='Close'
+                          type='primary'
+                          className='btn-lg btn-send-token mr-1 ml-1 mt-1'
+                          onClick={_this.props.handleBack}
+                        />
+                      </Col>
+                    </Row>
+
                   </Box>
                 </Col>
                 <Col sm={12} className='text-center'>
@@ -126,6 +143,13 @@ class SendTokens extends React.Component {
     // console.log(_this.state)
   }
 
+  async handleSendMax () {
+    const { qty } = _this.props.selectedToken
+    _this.setState({
+      amountSat: qty
+    })
+  }
+
   async handleSend () {
     try {
       _this.setState({
@@ -307,6 +331,22 @@ class SendTokens extends React.Component {
       }
     })
   }
+
+  componentDidMount () {
+    _this.setState({
+      tokenId: _this.props.selectedToken.tokenId
+
+    })
+  }
+
+  componentDidUpdate () {
+    if (_this.props.selectedToken.tokenId !== _this.state.tokenId) {
+      _this.setState({
+        tokenId: _this.props.selectedToken.tokenId,
+        amountSat: ''
+      })
+    }
+  }
 }
 SendTokens.propTypes = {
   walletInfo: PropTypes.object.isRequired, // wallet info
diff --git a/src/components/admin-lte/tokens/token.css b/src/components/admin-lte/tokens/token.css
index 996fe65..d9487b0 100644
--- a/src/components/admin-lte/tokens/token.css
+++ b/src/components/admin-lte/tokens/token.css
@@ -9,6 +9,9 @@
 #token-card .info-container .info-content b{
     margin-right: 15px;
 }
+#token-card .info-container .info-content span{
+    text-align: end;
+}
 #token-card .divider{
     width: 100%;
     border-bottom: 1px solid black;
@@ -47,4 +50,25 @@
       width: 100%!important;
       justify-content: center;
       align-items: center;
-  }
\ No newline at end of file
+  }
+  .btn-send-token{
+      width: 120px;
+  }
+  .token-botton-container{
+    max-width: 70%;
+    margin: 0 auto;
+  }
+  .btn-send-token{
+    min-width: 100%;
+}
+  @media (max-width: 740px) {
+    .token-botton-container{
+        max-width: 100%;
+    }
+    .btn-send-token{
+        width: 100%;
+        margin-right: 0;
+        margin-left: 0;
+    }
+  }
+ 
\ No newline at end of file