Refactor Swap (#80)

* Refactor calculateInput for ETH-TOKEN swap

* Refactor Swap Input to not use drizzle

* Refactor Swap Output

src/components/CurrencyInputPanel/currency-panel.scss

@@ -11,6 +11,7 @@
     border-radius: 1.25rem;
     box-shadow: 0 0 0 .5px $mercury-gray;
     background-color: $white;
+    transition: box-shadow 200ms ease-in-out;
 
     &--error {
       box-shadow: 0 0 0 .5px $salmon-red;

src/ducks/web3connect.js

@@ -37,8 +37,28 @@ const initialState = {
 export const selectors = () => (dispatch, getState) => {
   const state = getState().web3connect;
 
-  return {
-    getBalance: address => {
+  const getTokenBalance = (tokenAddress, address) => {
+    const tokenBalances = state.balances[tokenAddress];
+
+    if (!tokenBalances) {
+      dispatch(watchBalance({ balanceOf: address, tokenAddress }));
+      return Balance(0);
+    }
+
+    const balance = tokenBalances[address];
+    if (!balance) {
+      dispatch(watchBalance({ balanceOf: address, tokenAddress }));
+      return Balance(0);
+    }
+    return balance;
+  };
+
+  const getBalance = (address, tokenAddress) => {
+    if (process.env.NODE_ENV === 'production' || !tokenAddress) {
+      console.warn('No token address found - return ETH balance');
+    }
+
+    if (!tokenAddress || tokenAddress === 'ETH') {
       const balance = state.balances.ethereum[address];
 
       if (!balance) {
@@ -46,23 +66,16 @@ export const selectors = () => (dispatch, getState) => {
         return Balance(0, 'ETH');
       }
       return balance;
-    },
-
-    getTokenBalance: (tokenAddress, address) => {
-      const tokenBalances = state.balances[tokenAddress];
+    } else if (tokenAddress) {
+      return getTokenBalance(tokenAddress, address);
+    }
 
-      if (!tokenBalances) {
-        dispatch(watchBalance({ balanceOf: address, tokenAddress }));
-        return Balance(0);
-      }
+    return Balance(NaN);
+  };
 
-      const balance = tokenBalances[address];
-      if (!balance) {
-        dispatch(watchBalance({ balanceOf: address, tokenAddress }));
-        return Balance(0);
-      }
-      return balance;
-    },
+  return {
+    getBalance,
+    getTokenBalance,
   }
 };
 
@@ -124,6 +137,7 @@ export const watchBalance = ({ balanceOf, tokenAddress }) => (dispatch, getState
       type: WATCH_ETH_BALANCE,
       payload: balanceOf,
     });
+    setTimeout(() => dispatch(sync()), 0);
   } else if (tokenAddress) {
     if (watched.balances[tokenAddress] && watched.balances[tokenAddress].includes(balanceOf)) {
       return;
@@ -135,6 +149,7 @@ export const watchBalance = ({ balanceOf, tokenAddress }) => (dispatch, getState
         balanceOf,
       },
     });
+    setTimeout(() => dispatch(sync()), 0);
   }
 };
 
@@ -199,7 +214,6 @@ export const sync = () => async (dispatch, getState) => {
         const symbol = tokenBalance.label || await contract.methods.symbol().call();
 
         if (tokenBalance.value.isEqualTo(BN(balance))) {
-          console.log('block');
           return;
         }
 

src/pages/Pool/AddLiquidity.js

@@ -57,12 +57,7 @@ class AddLiquidity extends Component {
       return '';
     }
 
-    if (currency === 'ETH') {
-      const { value, decimals } = selectors().getBalance(account);
-      return `Balance: ${value.dividedBy(10 ** decimals).toFixed(4)}`;
-    }
-
-    const { value, decimals } = selectors().getTokenBalance(currency, account);
+    const { value, decimals } = selectors().getBalance(account, currency);
     return `Balance: ${value.dividedBy(10 ** decimals).toFixed(4)}`;
   }
 
@@ -85,7 +80,7 @@ class AddLiquidity extends Component {
     const maxTokens = tokenAmount.multipliedBy(1 + MAX_LIQUIDITY_SLIPPAGE);
 
     try {
-      const tx = await exchange.methods.addLiquidity(minLiquidity.toFixed(0), maxTokens.toFixed(0), deadline).send({
+      await exchange.methods.addLiquidity(minLiquidity.toFixed(0), maxTokens.toFixed(0), deadline).send({
         from: account,
         value: ethAmount.toFixed(0)
       });
@@ -144,8 +139,8 @@ class AddLiquidity extends Component {
       return;
     }
 
-    const { value: tokenValue } = selectors().getTokenBalance(token, fromToken[token]);
-    const { value: ethValue } = selectors().getBalance(fromToken[token]);
+    const { value: tokenValue } = selectors().getBalance(fromToken[token], token);
+    const { value: ethValue } = selectors().getBalance(fromToken[token], eth);
 
     return tokenValue.dividedBy(ethValue);
   }
@@ -165,8 +160,8 @@ class AddLiquidity extends Component {
       isValid = false;
     }
 
-    const { value: ethValue } = selectors().getBalance(account);
-    const { value: tokenValue, decimals } = selectors().getTokenBalance(outputCurrency, account);
+    const { value: ethValue } = selectors().getBalance(account, inputCurrency);
+    const { value: tokenValue, decimals } = selectors().getBalance(account, outputCurrency);
 
     if (ethValue.isLessThan(BN(inputValue * 10 ** 18))) {
       inputError = 'Insufficient Balance';
@@ -329,7 +324,6 @@ class AddLiquidity extends Component {
           selectedTokenAddress={outputCurrency}
           onCurrencySelected={currency => {
             this.setState({ outputCurrency: currency });
-            this.props.sync();
           }}
           onValueChange={this.onOutputChange}
           value={outputValue}

src/pages/Swap/swap.scss

@@ -59,10 +59,6 @@
   &__cta-btn {
     @extend %primary-button;
     margin: 1rem auto;
-
-    &--inactive {
-      background: $mercury-gray;
-    }
   }
 
   &__sub-icon {

src/variables.scss

@@ -41,6 +41,7 @@ $salmon-red: #FF8368;
   outline: none;
   border: 1px solid transparent;
   user-select: none;
+  transition: background-color 300ms ease-in-out;
 
   &:hover {
     background-color: lighten($royal-blue, 5);
@@ -50,6 +51,10 @@ $salmon-red: #FF8368;
     background-color: darken($royal-blue, 5);
   }
 
+  &:disabled {
+    background-color: $mercury-gray;
+  }
+
 }
 
 %borderless-input {