Hide deposit and enable for receive token (#609)

* Hide deposit and enable for receive token * Show the token selector * Remove tooltip for read only row
gnosis · Feb 26, 2020 · 17d6cfb · 17d6cfb
1 parent 4df3344
commit 17d6cfb
Showing 1 changed file with 29 additions and 20 deletions.
diff --git a/src/components/TradeWidget/TokenRow.tsx b/src/components/TradeWidget/TokenRow.tsx
@@ -230,19 +230,36 @@ const TokenRow: React.FC<Props> = ({
       <div>
         <strong>{selectLabel}</strong>
         <span>
-          {/* can pass props to as={Component} */}
-          <TooltipWrapper as="button" tooltip="Deposit" type="button" onClick={console.log}>
-            + Deposit
-          </TooltipWrapper>
-          {/* <button type="button">+ Deposit</button> */}
+          {!readOnly && (
+            <TooltipWrapper
+              as="button"
+              type="button"
+              tooltip="Deposit"
+              onClick={(): void => alert('Not implemented yet!')}
+            >
+              + Deposit
+            </TooltipWrapper>
+          )}
           <span>
             Balance:
-            <TooltipWrapper as={FormMessage} tooltip="Fill maximum">
-              {' '}
-              {balance ? formatAmount(balance.totalExchangeBalance, balance.decimals) : '0'}
-              {validateMaxAmount && <a onClick={useMax}>max</a>}
-            </TooltipWrapper>
-            <i aria-label="Tooltip"></i>
+            {readOnly ? (
+              <FormMessage> {balance ? formatAmount(balance.totalExchangeBalance, balance.decimals) : '0'}</FormMessage>
+            ) : (
+              <>
+                <FormMessage>
+                  {' '}
+                  {balance ? formatAmount(balance.totalExchangeBalance, balance.decimals) : '0'}
+                  {validateMaxAmount && (
+                    <>
+                      <TooltipWrapper tooltip="Fill maximum">
+                        <a onClick={useMax}>max</a>
+                      </TooltipWrapper>
+                      <i aria-label="Tooltip"></i>
+                    </>
+                  )}
+                </FormMessage>
+              </>
+            )}
           </span>
         </span>
       </div>
@@ -264,17 +281,9 @@ const TokenRow: React.FC<Props> = ({
           onFocus={(e): void => e.target.select()}
         />
 
-        {/*
-        <FormMessage>
-          <div>
-            <strong>Wallet:</strong> {displayBalance(balance, 'walletBalance')}
-          </div>
-        </FormMessage>
-        */}
-        {/* <TokenImgWrapper alt={selectedToken.name} src={selectedToken.image} /> */}
         {/* Using TokenBoxWrapper to use a single parent for the ENABLE button and TokenSelector */}
         <TokenBoxWrapper>
-          <TokenEnable>Enable</TokenEnable>
+          {!readOnly && <TokenEnable>Enable</TokenEnable>}
           <TokenSelector
             label={selectLabel}
             isDisabled={isDisabled}