Hotfix/1.0.5 (gnosis#1184)

* Disable tokens list (gnosis#1168)

* add disabledTokens to config

* parse DISABLED_TOKEN_MAPS

* allow to filter against disabledTokens in useTokenBalances

* filter out disabledTokens where appropriate

* pass disabledTokens to /wallet

* override data of disabledTokens

* don't show deposit + button for disabledTokens

* show warning for disabledTokens

* Revert "override data of disabledTokens"

This reverts commit a1edff3.

* Revert "pass disabledTokens to /wallet"

This reverts commit 13112aa.

* Revert "filter out disabledTokens where appropriate"

This reverts commit 7d455e2.

* better text

* rename alert icon

* override disabled tokens in TokenListApi, closer to the metal

* simplify excluding deprecated in useTokenList

* extend types

* switch to params object for useTokenList

* add comments

* disable Enable button for deprecated tokens

* make deprecated logo opaque

* show deprecated in ManageTokens

* add TokenSymbol component

* fix wrong name

* add tests for CONFIG.disabledTokens

* fix build

* opaque -> faded

* more override reasons

* disable token for any overrideReason

* disable SNX-old

* disable PAXG

* disable aTokens

* Update config-default.yaml

Co-authored-by: David <[email protected]>

* simplify overrideReason

* add STA token

* Update config-default.yaml

Co-authored-by: David <[email protected]>

* better wording

Co-authored-by: David <[email protected]>

* *

* Add link ⚠️ (gnosis#1186)

* add disabledTokens[].url

* wrap WarningImg in anchor when appropriate

* pass tokenOverride.url to TokenSymbol

* fix Toggle swallowing clicks on WarningImg in ManageTokens

* url -> warningUrl

* consider never expired orders (gnosis#1187)

Co-authored-by: David <[email protected]>

Author: Velenir

config-default.yaml

@@ -61,3 +61,48 @@ defaultProviderConfig:
 # Wallet Connect
 walletConnect:
   bridge: 'wss://safe-walletconnect.gnosis.io/'
+
+# tokens that aren't allowed to be traded nor deposited
+disabledTokens:
+  1: # Mainnet
+    - address: '0x57Ab1E02fEE23774580C119740129eAC7081e9D3'
+      name: Synthetics sUSD (deprecated)
+      symbol: sUSD-old
+      description: This token is disabled for trading and depositing. sUSD will be deprecated and replaced by another token at the end of July 2020.  Go to https://www.synthetix.io for more information
+      reason: DEPRECATED
+      url: https://docs.synthetix.io/integrations/guide/#proxy-deprecation
+
+    - address: '0xC011A72400E58ecD99Ee497CF89E3775d4bd732F'
+      name: Synthetix Network Token (deprecated)
+      symbol: SNX-old
+      description: This token is disabled for trading and depositing. SNX will be deprecated and replaced by another token at the end of July 2020.  Go to https://www.synthetix.io for more information
+      reason: DEPRECATED
+      url: https://docs.synthetix.io/integrations/guide/#proxy-deprecation
+      
+    - address: '0x45804880De22913dAFE09f4980848ECE6EcbAf78'
+      name: Paxos Gold
+      symbol: PAXG
+
+    - address: '0xa7DE087329BFcda5639247F96140f9DAbe3DeED1'
+      name: Statera
+      symbol: STA
+
+      # aTokens:
+    - address: '0x7D2D3688Df45Ce7C552E19c27e007673da9204B8'
+    - address: '0xA64BD6C70Cb9051F6A9ba1F163Fdc07E0DfB5F84'
+    - address: '0x71fc860F7D3A592A4a98740e39dB31d25db65ae8'
+    - address: '0x9bA00D6856a4eDF4665BcA2C2309936572473B7E'
+    - address: '0x3a3A65aAb0dd2A17E3F1947bA16138cd37d08c04'
+    - address: '0xfC1E690f61EFd961294b3e1Ce3313fBD8aa4f85d'
+    - address: '0x9D91BE44C06d373a8a226E1f3b146956083803eB'
+    - address: '0x4DA9b813057D04BAef4e5800E36083717b4a0341'
+    - address: '0x328C4c80BC7aCa0834Db37e6600A6c49E12Da4DE'
+    - address: '0x7deB5e830be29F91E298ba5FF1356BB7f8146998'
+    - address: '0xE1BA0FB44CCb0D11b80F92f4f8Ed94CA3fF51D00'
+    - address: '0x6ee0f7bb50a54ab5253da0667b0dc2ee526c30a8'
+    - address: '0x625aE63000f46200499120B906716420bd059240'
+    - address: '0x6FCE4A401B6B80ACe52baAefE4421Bd188e76F6f'
+    - address: '0x71010A9D003445aC60C4e6A7017c1E89A477B438'
+    - address: '0x6Fb0855c404E09c47C3fBCA25f08d4E41f9F062f'
+    - address: '0xFC4B8ED459e00e5400be803A9BB3954234FD50e3'
+  4: [] # Rinkeby

src/api/tokenList/TokenListApi.ts

@@ -2,6 +2,21 @@ import { TokenDetails } from 'types'
 import { getTokensByNetwork } from './tokenList'
 import { logDebug } from 'utils'
 import GenericSubscriptions, { SubscriptionsInterface } from './Subscriptions'
+import { DISABLED_TOKEN_MAPS } from 'const'
+
+const addOverrideToDisabledTokens = (networkId: number) => (token: TokenDetails): TokenDetails => {
+  const tokenOverride = DISABLED_TOKEN_MAPS[networkId]?.[token.address]
+  if (tokenOverride) {
+    token.override = tokenOverride
+    token.disabled = true
+    // override only keys present in both token and tokenOverride
+    Object.keys(token).forEach(key => {
+      if (tokenOverride[key] !== undefined) token[key] = tokenOverride[key]
+    })
+  }
+
+  return token
+}
 
 export interface TokenList extends SubscriptionsInterface<TokenDetails[]> {
   getTokens: (networkId: number) => TokenDetails[]
@@ -63,7 +78,10 @@ export class TokenListApiImpl extends GenericSubscriptions<TokenDetails[]> imple
         // then default list
         getTokensByNetwork(networkId),
       )
-      this._tokensByNetwork[networkId] = tokenList
+      this._tokensByNetwork[networkId] = TokenListApiImpl.extendTokensInList(
+        tokenList,
+        addOverrideToDisabledTokens(networkId),
+      )
 
       tokenList.forEach(({ address }) => {
         this._tokenAddressNetworkSet.add(
@@ -96,6 +114,13 @@ export class TokenListApiImpl extends GenericSubscriptions<TokenDetails[]> imple
     return result
   }
 
+  private static extendTokensInList(
+    list: TokenDetails[],
+    extensionFunction: (token: TokenDetails) => TokenDetails,
+  ): TokenDetails[] {
+    return list.map(extensionFunction)
+  }
+
   private static constructAddressNetworkKey({ tokenAddress, networkId }: HasTokenParams): string {
     return tokenAddress.toLowerCase() + '|' + networkId
   }
@@ -122,7 +147,12 @@ export class TokenListApiImpl extends GenericSubscriptions<TokenDetails[]> imple
     })
     if (addedTokens.length === 0) return
 
-    this._tokensByNetwork[networkId] = TokenListApiImpl.mergeTokenLists(this._tokensByNetwork[networkId], addedTokens)
+    const extendedTokens = TokenListApiImpl.extendTokensInList(addedTokens, addOverrideToDisabledTokens(networkId))
+
+    this._tokensByNetwork[networkId] = TokenListApiImpl.mergeTokenLists(
+      this._tokensByNetwork[networkId],
+      extendedTokens,
+    )
     this.persistNewUserTokens(addedTokens, networkId)
 
     this.triggerSubscriptions(this._tokensByNetwork[networkId])
@@ -148,8 +178,11 @@ export class TokenListApiImpl extends GenericSubscriptions<TokenDetails[]> imple
   public persistTokens({ networkId, tokenList }: PersistTokensParams): void {
     // fetch list of user added tokens
     const userAddedTokens = this.loadTokenList(networkId, 'user')
+
+    const extendedTokens = TokenListApiImpl.extendTokensInList(tokenList, addOverrideToDisabledTokens(networkId))
+
     // update copy in memory, appending anything user might have added
-    this._tokensByNetwork[networkId] = TokenListApiImpl.mergeTokenLists(tokenList, userAddedTokens)
+    this._tokensByNetwork[networkId] = TokenListApiImpl.mergeTokenLists(extendedTokens, userAddedTokens)
 
     // update copy in local storage for service tokens
     const serviceStorageKey = TokenListApiImpl.getStorageKey(networkId, 'service')

src/assets/img/lowBalance.svg renamed to src/assets/img/alert.svg

@@ -23,6 +23,7 @@ import { TokenRow, RowClaimButton, RowClaimSpan } from 'components/DepositWidget
 // Hooks and reducers
 import useNoScroll from 'hooks/useNoScroll'
 import { TokenLocalState } from 'reducers-actions'
+import { TokenSymbol } from 'components/TokenSymbol'
 
 export interface RowProps extends Record<keyof TokenLocalState, boolean> {
   ethBalance: BN | null
@@ -66,6 +67,8 @@ export const Row: React.FC<RowProps> = (props: RowProps) => {
     claimable,
     walletBalance,
     enabled: tokenEnabled,
+    override,
+    disabled: tokenDisabled,
   } = tokenBalances
 
   const [visibleForm, showForm] = useState<'deposit' | 'withdraw' | void>()
@@ -91,9 +94,9 @@ export const Row: React.FC<RowProps> = (props: RowProps) => {
     <>
       <TokenRow data-address={address} className={className} data-address-mainnet={addressMainnet}>
         <td data-label="Token">
-          <TokenImg src={image} alt={name} />
+          <TokenImg src={image} alt={name} faded={tokenDisabled} />
           <div>
-            <b>{symbol}</b>
+            <TokenSymbol symbol={symbol} warning={override?.description} warningUrl={override?.url} />
             {name}
           </div>
         </td>
@@ -147,29 +150,30 @@ export const Row: React.FC<RowProps> = (props: RowProps) => {
           )}
         </td>
         <td data-label="Actions">
-          {enabled || tokenEnabled ? (
-            <button
-              type="button"
-              className="withdrawToken"
-              onClick={(): void => showForm('deposit')}
-              disabled={isDepositFormVisible}
-            >
-              <PlusSVG />
-            </button>
-          ) : (
-            <>
-              <button type="button" className="enableToken" onClick={onEnableToken} disabled={enabling}>
-                {enabling ? (
-                  <>
-                    <Spinner />
-                    Enabling
-                  </>
-                ) : (
-                  <>Enable Deposit</>
-                )}
+          {!tokenDisabled &&
+            (enabled || tokenEnabled ? (
+              <button
+                type="button"
+                className="withdrawToken"
+                onClick={(): void => showForm('deposit')}
+                disabled={isDepositFormVisible}
+              >
+                <PlusSVG />
               </button>
-            </>
-          )}
+            ) : (
+              <>
+                <button type="button" className="enableToken" onClick={onEnableToken} disabled={enabling}>
+                  {enabling ? (
+                    <>
+                      <Spinner />
+                      Enabling
+                    </>
+                  ) : (
+                    <>Enable Deposit</>
+                  )}
+                </button>
+              </>
+            ))}
           {!totalExchangeBalance.isZero() && (
             <button
               type="button"

src/components/DepositWidget/Row.tsx

@@ -477,6 +477,7 @@ const BalancesDisplayMemoed = React.memo(BalancesDisplay)
 
 const DepositWidget: React.FC = () => {
   const { ethBalance } = useEthBalances()
+  // get all token balances, including deprecated
   const { balances, error } = useTokenBalances()
 
   const { requestWithdrawToken, ...restActions } = useRowActions({ balances })

src/components/DepositWidget/index.tsx

@@ -114,7 +114,8 @@ function onChangeToken(params: {
 export const OrderBookBtn: React.FC<OrderBookBtnProps> = (props: OrderBookBtnProps) => {
   const { baseToken: baseTokenDefault, quoteToken: quoteTokenDefault, label, className } = props
   const { networkIdOrDefault: networkId } = useWalletConnection()
-  const tokenList = useTokenList(networkId)
+  // get all tokens
+  const tokenList = useTokenList({ networkId })
   const [baseToken, setBaseToken] = useSafeState<TokenDetails>(baseTokenDefault)
   const [quoteToken, setQuoteToken] = useSafeState<TokenDetails>(quoteTokenDefault)
   const networkDescription = networkId !== Network.Mainnet ? ` (${getNetworkFromId(networkId)})` : ''

src/components/OrderBookBtn.tsx

@@ -8,7 +8,7 @@ import { getTokenFromExchangeById } from 'services'
 
 // assets
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import lowBalanceIcon from 'assets/img/lowBalance.svg'
+import alertIcon from 'assets/img/alert.svg'
 import { faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons'
 
 // components
@@ -262,7 +262,7 @@ const Status: React.FC<Pick<Props, 'order' | 'isOverBalance' | 'transactionHash'
           <br />
           <span className="lowBalance">
             low balance
-            <img src={lowBalanceIcon} />
+            <img src={alertIcon} />
           </span>
         </>
       )}

src/components/OrdersWidget/OrderRow.tsx

@@ -145,7 +145,7 @@ const PoolingInterface: React.FC = () => {
 
   const { networkId, networkIdOrDefault, userAddress } = useWalletConnection()
   // Get all the tokens for the current network
-  const tokenList = useTokenList(networkIdOrDefault)
+  const tokenList = useTokenList({ networkId: networkIdOrDefault })
 
   const tokens = useMemo(() => {
     return (

src/components/PoolingWidget/index.tsx

@@ -7,14 +7,19 @@ function _loadFallbackTokenImage(event: React.SyntheticEvent<HTMLImageElement>):
   image.src = unknownTokenImg
 }
 
-const TokenImg = styled.img.attrs(() => ({ onError: _loadFallbackTokenImage }))`
+interface TokenImgProps {
+  faded?: boolean
+}
+
+const TokenImg = styled.img.attrs(() => ({ onError: _loadFallbackTokenImage }))<TokenImgProps>`
   width: 2.8rem;
   height: 2.8rem;
   border-radius: 3.6rem;
   object-fit: contain;
   margin: 0 1rem 0 0;
   background-color: white;
   padding: 2px;
+  opacity: ${(props): number => (props.faded ? 0.4 : 1)};
 `
 
 export default TokenImg

src/components/TokenImg.tsx

@@ -18,6 +18,7 @@ import { TokenImgWrapper } from 'components/TokenImg'
 // hooks
 import useSafeState from 'hooks/useSafeState'
 import { UseAddTokenModalResult } from 'hooks/useBetterAddTokenModal'
+import { TokenSymbol } from './TokenSymbol'
 
 const OptionItemWrapper = styled.div`
   display: flex;
@@ -73,18 +74,30 @@ interface OptionItemProps {
   image?: string
   name?: string
   symbol?: string
+  faded?: boolean
+  warning?: string
+  warningUrl?: string
 }
 
 // generic component to display token
 // with custom children option
-export const OptionItem: React.FC<OptionItemProps> = ({ image, name, symbol, children }) => {
+export const OptionItem: React.FC<OptionItemProps> = ({
+  image,
+  name,
+  symbol,
+  children,
+  faded,
+  warning,
+  warningUrl,
+}) => {
   return (
     <OptionItemWrapper>
-      <TokenImgWrapper src={image} alt={name} />
+      <TokenImgWrapper src={image} alt={name} faded={faded} />
+
       <div className="tokenDetails">
         <div className="tokenName">
           <div>
-            <strong>{symbol}</strong>
+            <TokenSymbol symbol={symbol} warning={warning} warningUrl={warningUrl} />
           </div>
           <div>{name}</div>
         </div>