bug fixes (#319)

* fix ens name bug

* remove console.log

* add GEN

* fix styling and min display values

src/components/AddressInputPanel/index.js

@@ -93,21 +93,28 @@ export default function AddressInputPanel({ title, initialInput = '', onChange =
     let stale = false
 
     if (isAddress(debouncedInput)) {
-      library.lookupAddress(debouncedInput).then(name => {
-        if (!stale) {
-          // if an ENS name exists, set it as the destination
-          if (name) {
-            setInput(name)
-          } else {
-            setData({ address: debouncedInput, name: '' })
-            setError(null)
+      library
+        .lookupAddress(debouncedInput)
+        .then(name => {
+          if (!stale) {
+            // if an ENS name exists, set it as the destination
+            if (name) {
+              setInput(name)
+            } else {
+              setData({ address: debouncedInput, name: '' })
+              setError(null)
+            }
           }
-        }
-      })
+        })
+        .catch(() => {
+          setData({ address: debouncedInput, name: '' })
+          setError(null)
+        })
     } else {
       if (debouncedInput !== '') {
-        try {
-          library.resolveName(debouncedInput).then(address => {
+        library
+          .resolveName(debouncedInput)
+          .then(address => {
             if (!stale) {
               // if the debounced input name resolves to an address
               if (address) {
@@ -118,9 +125,9 @@ export default function AddressInputPanel({ title, initialInput = '', onChange =
               }
             }
           })
-        } catch {
-          setError(true)
-        }
+          .catch(() => {
+            setError(true)
+          })
       }
     }
 

src/components/ContextualInfo/index.js

@@ -13,6 +13,14 @@ const SummaryWrapper = styled.div`
   padding-top: 1rem;
 `
 
+const Details = styled.div`
+  background-color: ${({ theme }) => theme.concreteGray};
+  padding: 1.5rem;
+  border-radius: 1rem;
+  font-size: 0.75rem;
+  margin-top: 1rem;
+`
+
 const SummaryWrapperContainer = styled.div`
   ${({ theme }) => theme.flexRowNoWrap};
   color: ${({ theme }) => theme.royalBlue};
@@ -59,7 +67,7 @@ class ContextualInfo extends Component {
       return null
     }
 
-    return <div className="contextual-info__details">{this.props.renderTransactionDetails()}</div>
+    return <Details>{this.props.renderTransactionDetails()}</Details>
   }
 
   render() {

src/contexts/Tokens.js

@@ -95,6 +95,12 @@ const INITIAL_TOKENS_CONTEXT = {
       [DECIMALS]: 8,
       [EXCHANGE_ADDRESS]: '0x60a87cC7Fca7E53867facB79DA73181B1bB4238B'
     },
+    '0x543Ff227F64Aa17eA132Bf9886cAb5DB55DCAddf': {
+      [NAME]: 'DAOstack',
+      [SYMBOL]: 'GEN',
+      [DECIMALS]: 18,
+      [EXCHANGE_ADDRESS]: '0x26Cc0EAb6Cb650B0Db4D0d0dA8cB5BF69F4ad692'
+    },
     '0x6810e776880C02933D47DB1b9fc05908e5386b96': {
       [NAME]: 'Gnosis Token',
       [SYMBOL]: 'GNO',

src/pages/Pool/AddLiquidity.js

@@ -54,6 +54,10 @@ const NewExchangeWarningText = styled.div`
   }
 `
 
+const LastSummaryText = styled.div`
+  margin-top: 1rem;
+`
+
 const DownArrowBackground = styled.div`
   ${({ theme }) => theme.flexRowNoWrap}
   justify-content: center;
@@ -282,7 +286,7 @@ export default function AddLiquidity() {
           <div>
             {t('youAreAdding')} {b(`${inputValue} ETH`)} {t('and')} {b(`${outputValue} ${symbol}`)} {t('intoPool')}
           </div>
-          <div>
+          <LastSummaryText>
             {t('youAreSettingExRate')}{' '}
             {b(
               `1 ETH = ${amountFormatter(
@@ -293,11 +297,11 @@ export default function AddLiquidity() {
               )} ${symbol}`
             )}
             .
-          </div>
-          <div>
+          </LastSummaryText>
+          <LastSummaryText>
             {t('youWillMint')} {b(`${inputValue}`)} {t('liquidityTokens')}
-          </div>
-          <div>{t('totalSupplyIs0')}</div>
+          </LastSummaryText>
+          <LastSummaryText>{t('totalSupplyIs0')}</LastSummaryText>
         </div>
       )
     } else {
@@ -307,16 +311,16 @@ export default function AddLiquidity() {
             {t('youAreAdding')} {b(`${amountFormatter(inputValueParsed, 18, 4)} ETH`)} {t('and')} {'at most'}{' '}
             {b(`${amountFormatter(outputValueMax, decimals, 4)} ${symbol}`)} {t('intoPool')}
           </div>
-          <div>
+          <LastSummaryText>
             {t('youWillMint')} {b(amountFormatter(liquidityMinted, 18, 4))} {t('liquidityTokens')}
-          </div>
-          <div>
+          </LastSummaryText>
+          <LastSummaryText>
             {t('totalSupplyIs')} {b(amountFormatter(totalPoolTokens, 18, 4))}
-          </div>
-          <div>
+          </LastSummaryText>
+          <LastSummaryText>
             {t('tokenWorth')} {b(amountFormatter(ethPerLiquidityToken, 18, 4))} ETH {t('and')}{' '}
             {b(amountFormatter(tokenPerLiquidityToken, decimals, Math.min(decimals, 4)))} {symbol}
-          </div>
+          </LastSummaryText>
         </>
       )
     }

src/pages/Pool/RemoveLiquidity.js

@@ -65,6 +65,10 @@ const SummaryPanel = styled.div`
   padding: 1rem 0;
 `
 
+const LastSummaryText = styled.div`
+  margin-top: 1rem;
+`
+
 const ExchangeRateWrapper = styled.div`
   ${({ theme }) => theme.flexRowNoWrap};
   align-items: center;
@@ -268,19 +272,19 @@ export default function RemoveLiquidity() {
     return (
       <div>
         <div>
-          {t('youAreRemoving')} {b(`${amountFormatter(ethWithdrawnMin, 18, 4)} ETH`)} {t('and')}{' '}
-          {b(`${amountFormatter(tokenWithdrawnMin, decimals, Math.min(decimals, 4))} ${symbol}`)} {t('outPool')}
+          {t('youAreRemoving')} {b(`${amountFormatter(ethWithdrawn, 18, 4)} ETH`)} {t('and')}{' '}
+          {b(`${amountFormatter(tokenWithdrawn, decimals, Math.min(decimals, 4))} ${symbol}`)} {t('outPool')}
         </div>
-        <div>
+        <LastSummaryText>
           {t('youWillRemove')} {b(amountFormatter(valueParsed, 18, 4))} {t('liquidityTokens')}
-        </div>
-        <div>
+        </LastSummaryText>
+        <LastSummaryText>
           {t('totalSupplyIs')} {b(amountFormatter(totalPoolTokens, 18, 4))}
-        </div>
-        <div>
+        </LastSummaryText>
+        <LastSummaryText>
           {t('tokenWorth')} {b(amountFormatter(ETHPer, 18, 4))} ETH {t('and')}{' '}
           {b(amountFormatter(tokenPer, decimals, Math.min(4, decimals)))} {symbol}
-        </div>
+        </LastSummaryText>
       </div>
     )
   }
@@ -348,17 +352,17 @@ export default function RemoveLiquidity() {
       </OversizedPanel>
       <CurrencyInputPanel
         title={t('output')}
-        description={ethWithdrawnMin && tokenWithdrawnMin ? `(${t('estimated')})` : ''}
+        description={!!(ethWithdrawn && tokenWithdrawn) ? `(${t('estimated')})` : ''}
         key="remove-liquidity-input"
         renderInput={() =>
-          ethWithdrawnMin && tokenWithdrawnMin ? (
+          !!(ethWithdrawn && tokenWithdrawn) ? (
             <RemoveLiquidityOutput>
               <RemoveLiquidityOutputText>
-                {`${amountFormatter(ethWithdrawnMin, 18, 4, false)} ETH`}
+                {`${amountFormatter(ethWithdrawn, 18, 4, false)} ETH`}
               </RemoveLiquidityOutputText>
               <RemoveLiquidityOutputPlus> + </RemoveLiquidityOutputPlus>
               <RemoveLiquidityOutputText>
-                {`${amountFormatter(tokenWithdrawnMin, decimals, Math.min(4, decimals))} ${symbol}`}
+                {`${amountFormatter(tokenWithdrawn, decimals, Math.min(4, decimals))} ${symbol}`}
               </RemoveLiquidityOutputText>
             </RemoveLiquidityOutput>
           ) : (