(Fix) Add address to whitelist in manage screen

package.json

@@ -89,6 +89,7 @@
     "react-dropzone": "^4.2.8",
     "react-error-overlay": "^1.0.9",
     "react-router-dom": "^4.1.2",
+    "react-tooltip": "^3.4.0",
     "solc": "^0.4.14",
     "solidity-flattener": "file:submodules/solidity-flattener",
     "store2": "^2.6.0",

src/assets/stylesheets/application/manage.scss

@@ -4,12 +4,35 @@
   .warning-logo {
     color: #642F9C !important;
     border-color: #642F9C !important;
-    position: absolute !important;
-    left: 0 !important;
-    top: 0 !important;
+    position: absolute;
+    left: 0;
+    top: 0;
     display: flex;
   }
 
+  .white-list-item-container {
+    .remove {
+      display: inline-flex;
+      margin-top: 8px;
+    }
+
+    .swal2-icon {
+      width: 14px;
+      height: 14px;
+      line-height: 14px;
+      border: 2px solid transparent;
+    }
+
+    .warning-logo {
+      color: orange !important;
+      border-color: orange !important;
+      position: relative;
+      float: right;
+      font-size: 14px;
+      font-weight: bold;
+    }
+  }
+
   .steps-content {
     margin-top: 30px;
   }

src/assets/stylesheets/application/steps/whitelist.scss

@@ -58,6 +58,7 @@
     }
 
     &-container {
+      font-weight: bold;
       border-top: 1px solid #eee;
       display: table;
       width: 100%;
@@ -70,6 +71,28 @@
         display: table;
         width: 100%;
       }
+
+      &.to-be-removed {
+        font-weight: normal;
+        color: orange;
+        text-decoration: line-through;
+      }
+
+      &.no-style {
+        font-weight: normal;
+        color: #555555;
+      }
+
+      &.duplicated {
+        padding-bottom: 15px;
+        border-top: 1px dashed orange;
+        margin-top: -15px;
+
+        span {
+          line-height: 30px;
+          height: 12px;
+        }
+      }
     }
   }
 }

src/components/Common/WhitelistInputBlock.js

@@ -98,8 +98,8 @@ export class WhitelistInputBlock extends React.Component {
 
 
   render () {
-    const { num } = this.props
-    const { whitelistElements } = this.props.tierStore.tiers[num]
+    const { num, tierStore } = this.props
+    const { whitelist } = tierStore.tiers[num]
 
     const dropzoneStyle = {
       position: 'relative',
@@ -146,15 +146,12 @@ export class WhitelistInputBlock extends React.Component {
             />
           </div>
         </div>
-        {whitelistElements && whitelistElements.map(e =>
+        {whitelist && whitelist.map((item, index) =>
           <WhitelistItem
-            key={e.whitelistNum.toString()}
-            crowdsaleNum={e.crowdsaleNum}
-            whitelistNum={e.whitelistNum}
-            addr={e.addr}
-            min={e.min}
-            max={e.max}
-            alreadyDeployed={e.alreadyDeployed}
+            key={`${num}-${item.addr}-${item.stored ? 0 : 1}`}
+            crowdsaleNum={num}
+            whitelistNum={index}
+            {...item}
           />
         )}
         <Dropzone

src/components/Common/WhitelistItem.js

@@ -1,33 +1,45 @@
 import React from 'react'
 import '../../assets/stylesheets/application.css';
 import { inject, observer } from 'mobx-react'
+import classNames from 'classnames'
+import ReactTooltip from 'react-tooltip'
 
 @inject('tierStore')
 @observer
 export class WhitelistItem extends React.Component {
   removeItem () {
-    const { tierStore, crowdsaleNum, whitelistNum } = this.props
+    const { tierStore, whitelistNum, crowdsaleNum } = this.props
     tierStore.removeWhitelistItem(whitelistNum, crowdsaleNum)
   }
 
   render () {
-    const { addr, min, max, crowdsaleNum, whitelistNum, tierStore, isLast, alreadyDeployed } = this.props
-    const whitelist = tierStore.tiers[crowdsaleNum].whitelist[whitelistNum]
+    const { addr, min, max, stored, duplicated, tierStore } = this.props
 
-    return whitelist && whitelist.deleted ? null : (
-      <div
-        className={isLast ? 'white-list-item-container white-list-item-container-last' : 'white-list-item-container'}>
+    return (
+      <div className={classNames('white-list-item-container', {
+        'duplicated': duplicated && !stored,
+        'to-be-removed': duplicated && stored,
+        'no-style': (!duplicated && stored) || (!tierStore.deployedContract && !duplicated && !stored)
+      })}>
         <div className="white-list-item-container-inner">
           <span className="white-list-item white-list-item-left">{addr}</span>
           <span className="white-list-item white-list-item-middle">{min}</span>
           <span className="white-list-item white-list-item-right">{max}</span>
         </div>
         <div className="white-list-item-empty">
-          {!alreadyDeployed
-            ? <a onClick={() => this.removeItem()}><span className="item-remove"/></a>
+          {!stored
+            ? <a onClick={() => this.removeItem()} className="remove"><span className="item-remove"/></a>
+            : null
+          }
+          {duplicated && !stored
+            ? <a className="swal2-icon swal2-info warning-logo" data-tip="React-tooltip">!</a>
             : null
           }
         </div>
+        <ReactTooltip place="right" type="warning" effect="solid">
+          <p>Address already loaded,</p>
+          <p>saving will overwrite old values</p>
+        </ReactTooltip>
       </div>
     )
   }

src/components/crowdsale/index.js

@@ -10,7 +10,7 @@ import {
   initializeAccumulativeData,
   toBigNumber
 } from './utils'
-import { getQueryVariable, toFixed } from '../../utils/utils'
+import { getQueryVariable } from '../../utils/utils'
 import { getWhiteListWithCapCrowdsaleAssets } from '../../stores/utils'
 import { StepNavigation } from '../Common/StepNavigation'
 import { CONTRACT_TYPES, NAVIGATION_STEPS } from '../../utils/constants'

src/components/manage/index.js

@@ -18,6 +18,7 @@ import { toast } from '../../utils/utils'
 import { getWhiteListWithCapCrowdsaleAssets } from '../../stores/utils'
 import { getTiers, processTier, updateTierAttribute } from './utils'
 import { Loader } from '../Common/Loader'
+import classNames from 'classnames'
 
 const { START_TIME, END_TIME, RATE, SUPPLY, WALLET_ADDRESS, CROWDSALE_SETUP_NAME } = TEXT_FIELDS
 
@@ -331,14 +332,15 @@ export class Manage extends Component {
     this.updateCrowdsaleStatus()
       .then(() => {
         const { crowdsaleStore, tierStore } = this.props
+        const { formPristine, crowdsaleHasEnded } = this.state
         const updatableTiers = crowdsaleStore.selected.initialTiersValues.filter(tier => tier.updatable)
         const isValidTier = tierStore.individuallyValidTiers
         const validTiers = updatableTiers.every(tier => isValidTier[tier.index])
 
-        if (!this.state.formPristine && !this.state.crowdsaleHasEnded && updatableTiers.length && validTiers) {
+        if ((!formPristine || tierStore.modifiedStoredWhitelist) && !crowdsaleHasEnded && updatableTiers.length && validTiers) {
           const keys = Object
             .keys(updatableTiers[0])
-            .filter(key => key !== 'index' && key !== 'updatable' && key !== 'addresses' && key !== 'whitelistElements')
+            .filter(key => key !== 'index' && key !== 'updatable' && key !== 'addresses')
 
           updatableTiers
             .reduce((toUpdate, tier) => {
@@ -347,11 +349,10 @@ export class Manage extends Component {
                 let newValue = tierStore.tiers[tier.index][key]
 
                 if (isObservableArray(newValue)) {
-                  if (newValue.length > tier[key].length) {
-                    newValue = newValue.slice(tier[key].length).filter(whitelist => !whitelist.deleted)
-                    if (newValue.length) {
-                      toUpdate.push({ key, newValue, addresses })
-                    }
+                  newValue = newValue.filter(item => !item.stored)
+
+                  if (newValue.length) {
+                    toUpdate.push({ key, newValue, addresses })
                   }
 
                 } else if (newValue !== tier[key]) {
@@ -383,12 +384,6 @@ export class Manage extends Component {
       })
   }
 
-  clickedWhiteListInputBlock = e => {
-    if (e.target.classList.contains('button_fill_plus')) {
-      this.setState({ formPristine: false })
-    }
-  }
-
   whitelistInputBlock = index => {
     return (
       <WhitelistInputBlock
@@ -410,7 +405,7 @@ export class Manage extends Component {
     }
 
     return tier.whitelist.map(item => (
-      <div className={'white-list-item-container'} key={item.addr}>
+      <div className={'white-list-item-container no-style'} key={item.addr}>
         <div className="white-list-item-container-inner">
           <span className="white-list-item white-list-item-left">{item.addr}</span>
           <span className="white-list-item white-list-item-middle">{item.min}</span>
@@ -428,7 +423,7 @@ export class Manage extends Component {
     }
 
     return (
-      <div onClick={this.clickedWhiteListInputBlock}>
+      <div>
         <div className="section-title">
           <p className="title">Whitelist</p>
         </div>
@@ -515,12 +510,20 @@ export class Manage extends Component {
       </div>
     )
 
-    const saveButton = (
-      <Link to='/2' onClick={e => this.saveCrowdsale(e)}>
-        <span
-          className={`no-arrow button button_${ownerCurrentUser && !formPristine && !crowdsaleHasEnded ? 'fill' : 'disabled'}`}>Save</span>
-      </Link>
-    )
+    const saveButton = () => {
+      let buttonStyle = 'button_disabled'
+
+      if (ownerCurrentUser && (!formPristine || tierStore.modifiedStoredWhitelist) && !crowdsaleHasEnded) {
+        buttonStyle = 'button_fill'
+      }
+
+      return (
+        <Link to='/2' onClick={e => this.saveCrowdsale(e)}>
+          <span
+            className={classNames('no-arrow', 'button', buttonStyle)}>Save</span>
+        </Link>
+      )
+    }
 
     const tierNameAndWallet = (tier) => {
       return <div className='input-block-container'>
@@ -620,7 +623,7 @@ export class Manage extends Component {
         ))}
         <div className="steps">
           <div className="button-container">
-            {!crowdsaleHasEnded && updatable ? saveButton : null}
+            {!crowdsaleHasEnded && updatable ? saveButton() : null}
           </div>
         </div>
         <Loader show={this.state.loading}/>

src/components/manage/utils.js

@@ -201,8 +201,7 @@ export const processTier = (crowdsaleAddress, crowdsaleNum) => {
   const { web3 } = web3Store
 
   const newTier = {
-    whitelist: [],
-    whitelistElements: []
+    whitelist: []
   }
 
   const initialValues = {}
@@ -281,26 +280,23 @@ export const processTier = (crowdsaleAddress, crowdsaleNum) => {
       })
 
       const whitelist = newTier.whitelist.slice()
-      const whitelistElements = newTier.whitelistElements.slice()
 
-      whitelistAccounts.forEach(({ addr, min, max }, whitelistNum) => {
+      whitelistAccounts.forEach(({ addr, min, max }) => {
         min = parseInt(toFixed(min), 10) / 10 ** tokenDecimals
         max = parseInt(toFixed(max), 10) / 10 ** tokenDecimals
 
-        whitelistElements.push({ addr, min, max, whitelistNum, crowdsaleNum, alreadyDeployed: true })
-        whitelist.push({ addr, min, max })
+        whitelist.push({ addr, min, max, stored: true })
       })
 
-      tierStore.setTierProperty(whitelistElements, 'whitelistElements', crowdsaleNum)
       tierStore.setTierProperty(whitelist, 'whitelist', crowdsaleNum)
+      tierStore.sortWhitelist(crowdsaleNum)
 
       if (initialValues.updatable) {
         initialValues.startTime = newTier.startTime
         initialValues.endTime = newTier.endTime
         initialValues.rate = newTier.rate
         initialValues.supply = newTier.supply
         initialValues.whitelist = whitelist
-        initialValues.whitelistElements = whitelistElements
       }
       crowdsaleStore.addInitialTierValues(initialValues)
     })

src/components/stepFour/utils.js

@@ -8,8 +8,8 @@ import {
   sendTXToContract
 } from '../../utils/blockchainHelpers'
 import { noContractAlert, noContractDataAlert } from '../../utils/alerts'
-import { countDecimalPlaces, floorToDecimals, toFixed } from '../../utils/utils'
-import { CONTRACT_TYPES, DOWNLOAD_NAME, TRUNC_TO_DECIMALS } from '../../utils/constants'
+import { countDecimalPlaces, toFixed } from '../../utils/utils'
+import { CONTRACT_TYPES, DOWNLOAD_NAME } from '../../utils/constants'
 import { isObservableArray } from 'mobx'
 import {
   contractStore,
@@ -443,12 +443,10 @@ export const addWhitelist = () => {
           let maxCaps = []
 
           for (let i = 0; i < whitelist.length; i++) {
-            if (!whitelist[i].deleted) {
-              addrs.push(whitelist[i].addr)
-              statuses.push(true)
-              minCaps.push(whitelist[i].min * 10 ** tokenStore.decimals ? toFixed((whitelist[i].min * 10 ** tokenStore.decimals).toString()) : 0)
-              maxCaps.push(whitelist[i].max * 10 ** tokenStore.decimals ? toFixed((whitelist[i].max * 10 ** tokenStore.decimals).toString()) : 0)
-            }
+            addrs.push(whitelist[i].addr)
+            statuses.push(true)
+            minCaps.push(whitelist[i].min * 10 ** tokenStore.decimals ? toFixed((whitelist[i].min * 10 ** tokenStore.decimals).toString()) : 0)
+            maxCaps.push(whitelist[i].max * 10 ** tokenStore.decimals ? toFixed((whitelist[i].max * 10 ** tokenStore.decimals).toString()) : 0)
           }
 
           console.log('addrs:', addrs)