Merge 0ff49a0 into 8155248

poanetwork · Mar 8, 2018 · ea48a64 · ea48a64
2 parents 8155248 + 0ff49a0
commit ea48a64
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 4 deletions.
diff --git a/src/components/Common/ReservedTokensInputBlock.js b/src/components/Common/ReservedTokensInputBlock.js
@@ -144,6 +144,8 @@ export class ReservedTokensInputBlock extends Component {
       )
     })
 
+    const tokensListEmpty = this.props.tokens.length === 0
+
     let valueInputParams = null
 
     if (this.state.dim === 'tokens') {
@@ -163,6 +165,11 @@ export class ReservedTokensInputBlock extends Component {
       console.error(`unrecognized dimension '${this.state.dim}'`)
     }
 
+    const clearAllStyle = {
+      textAlign: 'right',
+      cursor: 'pointer'
+    }
+
     return (
       <div className="reserved-tokens-container">
         <div className="reserved-tokens-input-container">
@@ -203,6 +210,13 @@ export class ReservedTokensInputBlock extends Component {
           </div>
         </div>
         {reservedTokensElements}
+        {
+          tokensListEmpty ? null : (
+            <div className="clear-all-tokens" style={clearAllStyle} onClick={this.props.clearAll}>
+              <i className="fa fa-trash"></i>&nbsp;Clear All
+            </div>
+          )
+        }
       </div>
     )
   }

diff --git a/src/components/Common/ReservedTokensInputBlock.spec.js b/src/components/Common/ReservedTokensInputBlock.spec.js
@@ -13,12 +13,12 @@ describe('ReservedTokensInputBlock', () => {
   let tokenList
   let addCallback
   let removeCallback
+  let clearAllCallback
   let decimals
   let wrapperMemo, wrapper
   let addressInputMemo, addressInput
   let valueInputMemo, valueInput
   let addressStateMemo, addressState
-  let valueStateMemo, valueState
 
   beforeEach(() => {
     tokenList = [
@@ -45,6 +45,7 @@ describe('ReservedTokensInputBlock', () => {
     ]
     addCallback = jest.fn()
     removeCallback = jest.fn()
+    clearAllCallback = jest.fn()
     decimals = 3
 
     wrapperMemo = undefined
@@ -54,6 +55,7 @@ describe('ReservedTokensInputBlock', () => {
         decimals={decimals}
         addReservedTokensItem={addCallback}
         removeReservedToken={removeCallback}
+        clearAll={clearAllCallback}
       />
     ))
 
@@ -65,9 +67,6 @@ describe('ReservedTokensInputBlock', () => {
 
     addressStateMemo = undefined
     addressState = () => addressStateMemo || (addressStateMemo = wrapper().state('validation').address)
-
-    valueStateMemo = undefined
-    valueState = () => valueStateMemo || (valueStateMemo = wrapper().state('validation').value)
   })
 
   describe('render', () => {
@@ -382,5 +381,32 @@ describe('ReservedTokensInputBlock', () => {
         expect(removeCallback).toHaveBeenCalledTimes(1)
       })
     })
+
+    describe('clearAll', () => {
+      it('Should show the "Clear all" button if there are tokens"', () => {
+        const clearAllButton = wrapper().find('.clear-all-tokens')
+        expect(clearAllButton).toHaveLength(1)
+      })
+
+      it('Should not show the "Clear all" button if there are no tokens"', () => {
+        const element = mount(
+          <ReservedTokensInputBlock
+            tokens={[]}
+            decimals={decimals}
+            addReservedTokensItem={addCallback}
+            removeReservedToken={removeCallback}
+            clearAll={clearAllCallback}
+          />
+        )
+
+        const clearAllButton = element.find('.clear-all-tokens')
+        expect(clearAllButton).toHaveLength(0)
+      })
+
+      it('Should call clearAll callback', () => {
+        wrapper().find('.clear-all-tokens').simulate('click')
+        expect(clearAllCallback).toHaveBeenCalledTimes(1)
+      })
+    })
   })
 })
diff --git a/src/components/Common/__snapshots__/ReservedTokensInputBlock.spec.js.snap b/src/components/Common/__snapshots__/ReservedTokensInputBlock.spec.js.snap
@@ -268,6 +268,21 @@ exports[`percentage 1`] = `
       </a>
     </div>
   </div>
+  <div
+    className="clear-all-tokens"
+    onClick={undefined}
+    style={
+      Object {
+        "cursor": "pointer",
+        "textAlign": "right",
+      }
+    }
+  >
+    <i
+      className="fa fa-trash"
+    />
+     Clear All
+  </div>
 </div>
 `;
 
@@ -539,5 +554,20 @@ exports[`tokens 1`] = `
       </a>
     </div>
   </div>
+  <div
+    className="clear-all-tokens"
+    onClick={undefined}
+    style={
+      Object {
+        "cursor": "pointer",
+        "textAlign": "right",
+      }
+    }
+  >
+    <i
+      className="fa fa-trash"
+    />
+     Clear All
+  </div>
 </div>
 `;
diff --git a/src/components/stepTwo/index.js b/src/components/stepTwo/index.js
@@ -6,6 +6,7 @@ import { StepNavigation } from '../Common/StepNavigation'
 import { InputField } from '../Common/InputField'
 import { NumericInput } from '../Common/NumericInput'
 import { ReservedTokensInputBlock } from '../Common/ReservedTokensInputBlock'
+import { clearingReservedTokens } from '../../utils/alerts'
 import {
   NAVIGATION_STEPS,
   VALIDATION_MESSAGES,
@@ -112,6 +113,17 @@ export class stepTwo extends Component {
     this.props.reservedTokenStore.removeToken(index)
   }
 
+  clearReservedTokens = () => {
+    return clearingReservedTokens()
+      .then(result => {
+        if (result.value) {
+          this.enableDecimals()
+
+          this.props.reservedTokenStore.clearAll()
+        }
+      })
+  }
+
   addReservedTokensItem = newToken => {
     const firstReservedItem = !this.props.reservedTokenStore.tokens.length
 
@@ -178,6 +190,7 @@ export class stepTwo extends Component {
             decimals={decimals}
             addReservedTokensItem={this.addReservedTokensItem}
             removeReservedToken={this.removeReservedToken}
+            clearAll={this.clearReservedTokens}
           />
         </div>
         <div className="button-container">

diff --git a/src/stores/ReservedTokenStore.js b/src/stores/ReservedTokenStore.js
@@ -32,6 +32,10 @@ class ReservedTokenStore {
     this.tokens.splice(index,1);
   }
 
+  @action clearAll = () => {
+    this.tokens.splice(0);
+  }
+
   findToken(inputToken) {
     return this.tokens.find((token) => {
       if (inputToken['dim'] === token['dim'] && inputToken['addr'] === token['addr'] && inputToken['val'] === token['val']) {

diff --git a/src/utils/alerts.js b/src/utils/alerts.js
@@ -213,3 +213,15 @@ export function skippingTransaction() {
     reverseButtons: true
   })
 }
+
+export function clearingReservedTokens() {
+  return sweetAlert2({
+    title: "Clear all reserved tokens",
+    html: "Are you sure you want to remove all reserved tokens?",
+    type: "warning",
+    showCancelButton: true,
+    cancelButtonText: "No",
+    confirmButtonText: "Yes",
+    reverseButtons: true
+  })
+}