Fix disabled tokens list (#1247)

* filter DepositWidget's list against disabledTokens * simplify filter * different message when all tokens disabled Co-authored-by: Leandro Boscariol <alfetopito@users.noreply.github.com>
gnosis · Jul 21, 2020 · aad8645 · aad8645
1 parent 8e4fa12
commit aad8645
Showing 1 changed file with 52 additions and 45 deletions.
diff --git a/src/components/DepositWidget/index.tsx b/src/components/DepositWidget/index.tsx
@@ -29,7 +29,6 @@ import { useEthBalances } from 'hooks/useEthBalance'
 import useDataFilter from 'hooks/useDataFilter'
 
 // Reducer/Actions
-import { LocalTokensState } from 'reducers-actions/localTokens'
 import { TokenLocalState } from 'reducers-actions'
 
 interface WithdrawState {
@@ -183,13 +182,7 @@ interface BalanceDisplayProps extends TokenLocalState {
   ): Promise<void>
 }
 
-const customFilterFnFactory = (localTokens: LocalTokensState) => (searchTxt: string) => ({
-  symbol,
-  name,
-  address,
-}: TokenBalanceDetails): boolean => {
-  if (localTokens.disabled.has(address)) return false
-
+const customFilterFnFactory = (searchTxt: string) => ({ symbol, name, address }: TokenBalanceDetails): boolean => {
   if (searchTxt === '') return true
 
   return (
@@ -229,7 +222,7 @@ const BalancesDisplay: React.FC<BalanceDisplayProps> = ({
   const memoizedSearchFilterParams = useMemo(
     () => ({
       data: balances,
-      filterFnFactory: customFilterFnFactory(localTokens),
+      filterFnFactory: customFilterFnFactory,
       userConditionalCheck: ({ debouncedSearch }: { debouncedSearch: string }): boolean =>
         !debouncedSearch && localTokens.disabled.size === 0,
     }),
@@ -297,41 +290,49 @@ const BalancesDisplay: React.FC<BalanceDisplayProps> = ({
               </tr>
             </thead>
             <tbody>
-              {displayedBalances && displayedBalances.length > 0
-                ? displayedBalances.map(tokenBalances => (
-                    <Row
-                      key={tokenBalances.address}
-                      ethBalance={ethBalance}
-                      tokenBalances={tokenBalances}
-                      onEnableToken={(): Promise<void> => enableToken(tokenBalances.address)}
-                      onSubmitDeposit={(balance, onTxHash): Promise<void> =>
-                        depositToken(balance, tokenBalances.address, onTxHash)
-                      }
-                      onSubmitWithdraw={(balance, onTxHash): Promise<void> => {
-                        return requestWithdrawConfirmation(
-                          balance,
-                          tokenBalances.address,
-                          tokenBalances.claimable,
-                          onTxHash,
-                        )
-                      }}
-                      onClaim={(): Promise<void> => claimToken(tokenBalances.address)}
-                      claiming={claiming.has(tokenBalances.address)}
-                      withdrawing={withdrawing.has(tokenBalances.address)}
-                      depositing={depositing.has(tokenBalances.address)}
-                      highlighted={highlighted.has(tokenBalances.address)}
-                      enabling={enabling.has(tokenBalances.address)}
-                      enabled={enabled.has(tokenBalances.address)}
-                      {...windowSpecs}
-                    />
-                  ))
-                : (search || hideZeroBalances) && (
-                    <NoTokensMessage>
-                      <td>
-                        No enabled tokens match provided filters <a onClick={clearFilters}>clear filters</a>
-                      </td>
-                    </NoTokensMessage>
-                  )}
+              {displayedBalances && displayedBalances.length > 0 ? (
+                displayedBalances.map(tokenBalances => (
+                  <Row
+                    key={tokenBalances.address}
+                    ethBalance={ethBalance}
+                    tokenBalances={tokenBalances}
+                    onEnableToken={(): Promise<void> => enableToken(tokenBalances.address)}
+                    onSubmitDeposit={(balance, onTxHash): Promise<void> =>
+                      depositToken(balance, tokenBalances.address, onTxHash)
+                    }
+                    onSubmitWithdraw={(balance, onTxHash): Promise<void> => {
+                      return requestWithdrawConfirmation(
+                        balance,
+                        tokenBalances.address,
+                        tokenBalances.claimable,
+                        onTxHash,
+                      )
+                    }}
+                    onClaim={(): Promise<void> => claimToken(tokenBalances.address)}
+                    claiming={claiming.has(tokenBalances.address)}
+                    withdrawing={withdrawing.has(tokenBalances.address)}
+                    depositing={depositing.has(tokenBalances.address)}
+                    highlighted={highlighted.has(tokenBalances.address)}
+                    enabling={enabling.has(tokenBalances.address)}
+                    enabled={enabled.has(tokenBalances.address)}
+                    {...windowSpecs}
+                  />
+                ))
+              ) : balances.length === 0 ? (
+                <NoTokensMessage>
+                  <td>
+                    All tokens disabled. Enable some in <a onClick={toggleModal}>Manage Tokens</a>
+                  </td>
+                </NoTokensMessage>
+              ) : (
+                (search || hideZeroBalances) && (
+                  <NoTokensMessage>
+                    <td>
+                      No enabled tokens match provided filters <a onClick={clearFilters}>clear filters</a>
+                    </td>
+                  </NoTokensMessage>
+                )
+              )}
             </tbody>
           </CardTable>
         )}
@@ -346,7 +347,13 @@ const BalancesDisplayMemoed = React.memo(BalancesDisplay)
 const DepositWidget: React.FC = () => {
   const { ethBalance } = useEthBalances()
   // get all token balances, including deprecated
-  const { balances, error } = useTokenBalances()
+  const { balances: allBalances, error } = useTokenBalances()
+
+  const [{ localTokens }] = useGlobalState()
+
+  const balances = useMemo(() => {
+    return allBalances.filter(bal => !localTokens.disabled.has(bal.address))
+  }, [allBalances, localTokens.disabled])
 
   const { requestWithdrawToken, ...restActions } = useRowActions({ balances })