Implement Add Liquidity (#77)

* CSS fixes

* Add Liquidity UI and Validation

* Finish Add Liquidity

src/components/CurrencyInputPanel/currency-panel.scss

@@ -2,25 +2,26 @@
 
 .currency-input-panel {
   @extend %col-nowrap;
-
-  &__container {
+  box-shadow: 0 4px 8px 0 rgba($royal-blue, 0.1);
   position: relative;
+  border-radius: 1.25rem;
   z-index: 200;
+
+  &__container {
     border-radius: 1.25rem;
-    border: 0.5px solid $mercury-gray;
+    box-shadow: 0 0 0 .5px $mercury-gray;
     background-color: $white;
-    box-shadow: 0px 4px 4px 2px rgba($royal-blue, 0.05);
 
     &--error {
-      border: 0.5px solid $salmon-red;
+      box-shadow: 0 0 0 .5px $salmon-red;
     }
 
     &:focus-within {
-      border-color: $royal-blue;
+      box-shadow: 0 0 .5px .5px $malibu-blue;
     }
 
     &--error:focus-within {
-      border-color: $salmon-red;
+      box-shadow: 0 0 .5px .5px $salmon-red;
     }
   }
 
@@ -93,6 +94,12 @@
         background-image: url(../../assets/images/dropdown.svg);
       }
     }
+
+    &--disabled {
+      .currency-input-panel__dropdown-icon {
+        opacity: 0;
+      }
+    }
   }
 
   &__sub-currency-select {

src/components/CurrencyInputPanel/index.js

@@ -45,10 +45,13 @@ class CurrencyInputPanel extends Component {
     selectedTokens: PropTypes.array.isRequired,
     errorMessage: PropTypes.string,
     selectedTokenAddress: PropTypes.string,
+    disableTokenSelect: PropTypes.bool,
+    filteredTokens: PropTypes.arrayOf(PropTypes.string),
   };
 
   static defaultProps = {
     selectedTokens: [],
+    filteredTokens: [],
     onCurrencySelected() {},
     onValueChange() {},
     selectedTokenAddress: '',
@@ -64,6 +67,7 @@ class CurrencyInputPanel extends Component {
   };
 
   createTokenList = () => {
+    const { filteredTokens } = this.props;
     let tokens = this.props.tokenAddresses.addresses;
     let tokenList = [ { value: 'ETH', label: 'ETH', address: 'ETH' } ];
 
@@ -76,7 +80,7 @@ class CurrencyInputPanel extends Component {
         TOKEN_ADDRESS_TO_LABEL[tokens[i][1]] = tokens[i][0];
     }
 
-    return tokenList;
+    return tokenList.filter(({ address }) => !filteredTokens.includes(address));
   };
 
   onTokenSelect = (address) => {
@@ -122,7 +126,12 @@ class CurrencyInputPanel extends Component {
   renderTokenList() {
     const tokens = this.createTokenList();
     const { searchQuery } = this.state;
-    const { selectedTokens } = this.props;
+    const { selectedTokens, disableTokenSelect } = this.props;
+
+    if (disableTokenSelect) {
+      return;
+    }
+
     let results;
 
     if (!searchQuery) {
@@ -196,6 +205,7 @@ class CurrencyInputPanel extends Component {
       value,
       onValueChange,
       selectedTokenAddress,
+      disableTokenSelect,
     } = this.props;
 
     return (
@@ -232,8 +242,13 @@ class CurrencyInputPanel extends Component {
             <button
               className={classnames("currency-input-panel__currency-select", {
                 'currency-input-panel__currency-select--selected': selectedTokenAddress,
+                'currency-input-panel__currency-select--disabled': disableTokenSelect,
               })}
-              onClick={() => this.setState({ isShowingModal: true })}
+              onClick={() => {
+                if (!disableTokenSelect) {
+                  this.setState({ isShowingModal: true });
+                }
+              }}
             >
               {
                 selectedTokenAddress

src/components/Tab/tab.scss

@@ -6,14 +6,14 @@
   height: 3rem;
   background-color: $concrete-gray;
   border-radius: 3rem;
-  border: 1px solid $mercury-gray;
+  box-shadow: 0 0 0 .5px darken($concrete-gray, 5);
 
   .tab:first-child {
-    margin-left: -1px;
+    //margin-left: -1px;
   }
 
   .tab:last-child {
-    margin-right: -1px;
+    //margin-right: -1px;
   }
 }
 
@@ -24,7 +24,6 @@
   height: 3rem;
   flex: 1 0 auto;
   border-radius: 3rem;
-  border: 1px solid transparent;
   transition: 300ms ease-in-out;
   cursor: pointer;
 
@@ -36,7 +35,7 @@
   &--selected {
     background-color: $white;
     border-radius: 3rem;
-    border: 1px solid $mercury-gray;
+    box-shadow: 0 0 .5px .5px $mercury-gray;
     font-weight: 500;
 
     span {

src/ducks/web3connect.js

@@ -17,6 +17,7 @@ export const ADD_CONTRACT = 'web3connect/addContract';
 
 const initialState = {
   web3: null,
+  initialized: false,
   account: '',
   balances: {
     ethereum: {},
@@ -39,7 +40,7 @@ export const selectors = () => (dispatch, getState) => {
   return {
     getBalance: address => {
       const balance = state.balances.ethereum[address];
-      console.log({balance})
+
       if (!balance) {
         dispatch(watchBalance({ balanceOf: address }));
         return Balance(0, 'ETH');
@@ -98,7 +99,6 @@ export const initialize = () => (dispatch, getState) => {
 
     if (typeof window.web3 !== 'undefined') {
       const web3 = new Web3(window.web3.currentProvider);
-      await window.ethereum.enable();
       dispatch({
         type: INITIALIZE,
         payload: web3,
@@ -108,28 +108,38 @@ export const initialize = () => (dispatch, getState) => {
   })
 };
 
-export const watchBalance = ({ balanceOf, tokenAddress }) => {
+export const watchBalance = ({ balanceOf, tokenAddress }) => (dispatch, getState) => {
   if (!balanceOf) {
-    return { type: '' };
+    return;
   }
 
+  const { web3connect } = getState();
+  const { watched } = web3connect;
+
   if (!tokenAddress) {
-    return {
+    if (watched.balances.ethereum.includes(balanceOf)) {
+      return;
+    }
+    dispatch({
       type: WATCH_ETH_BALANCE,
       payload: balanceOf,
-    };
+    });
   } else if (tokenAddress) {
-    return {
+    if (watched.balances[tokenAddress] && watched.balances[tokenAddress].includes(balanceOf)) {
+      return;
+    }
+    dispatch({
       type: WATCH_TOKEN_BALANCE,
       payload: {
         tokenAddress,
         balanceOf,
       },
-    };
+    });
   }
-}
+};
 
 export const sync = () => async (dispatch, getState) => {
+  const { getBalance, getTokenBalance } = dispatch(selectors());
   const web3 = await dispatch(initialize());
   const {
     account,
@@ -142,12 +152,17 @@ export const sync = () => async (dispatch, getState) => {
   if (account !== accounts[0]) {
     dispatch({ type: UPDATE_ACCOUNT, payload: accounts[0] });
     dispatch(watchBalance({ balanceOf: accounts[0] }));
-    // dispatch(watchBalance({ balanceOf: accounts[0], tokenAddress: '0xDA5B056Cfb861282B4b59d29c9B395bcC238D29B' }));
   }
 
   // Sync Ethereum Balances
   watched.balances.ethereum.forEach(async address => {
     const balance = await web3.eth.getBalance(address);
+    const { value } = getBalance(address);
+
+
+    if (value.isEqualTo(BN(balance))) {
+      return;
+    }
     dispatch({
       type: UPDATE_ETH_BALANCE,
       payload: {
@@ -178,9 +193,16 @@ export const sync = () => async (dispatch, getState) => {
 
       const watchlist = watched.balances[tokenAddress] || [];
       watchlist.forEach(async address => {
+        const tokenBalance = getTokenBalance(tokenAddress, address);
         const balance = await contract.methods.balanceOf(address).call();
-        const decimals = await contract.methods.decimals().call();
-        const symbol = await contract.methods.symbol().call();
+        const decimals = tokenBalance.decimals || await contract.methods.decimals().call();
+        const symbol = tokenBalance.label || await contract.methods.symbol().call();
+
+        if (tokenBalance.value.isEqualTo(BN(balance))) {
+          console.log('block');
+          return;
+        }
+
         dispatch({
           type: UPDATE_TOKEN_BALANCE,
           payload: {
@@ -200,7 +222,6 @@ export const startWatching = () => async (dispatch, getState) => {
     : 5000;
 
   dispatch(sync());
-
   setTimeout(() => dispatch(startWatching()), timeout);
 };
 

src/index.js

@@ -11,7 +11,7 @@ window.addEventListener('load', function() {
     <DrizzleProvider options={{
       contracts: [],
       events: [],
-      polls: { accounts: 3000, blocks: 3000 },
+      polls: { accounts: 60000, blocks: 60000 },
     }} store={store}>
       <App />
     </DrizzleProvider>

src/variables.scss

@@ -11,6 +11,7 @@ $mine-shaft-gray: #2B2B2B;
 
 // Blue
 $zumthor-blue: #EBF4FF;
+$malibu-blue: #5CA2FF;
 $royal-blue: #2F80ED;
 
 // Purple