Merge remote-tracking branch 'upstream/master'

Author: jpkcambridge

.travis.yml

@@ -16,8 +16,7 @@ before_install:
     $TRAVIS_BRANCH = master || \
     $TRAVIS_BRANCH = release/* || \
     $TRAVIS_BRANCH = hotfix/* || \
-    $TRAVIS_TAG != "" ]] && \
-    echo "production" || echo "develop")
+    $TRAVIS_TAG != "" ]] && echo "production" || echo "develop")
 before_deploy:
   # zip ./dist folder if tag IS present
   - if [[ $TRAVIS_TAG != "" && $IPFS_HASH = "" ]]; then
@@ -72,7 +71,7 @@ deploy:
   # add release_v*.zip file to tagged Releases on github
   - provider: releases
     api_key: $GITHUB_RELEASE_TAG_API_TOKEN
-    body: "IPFS hash: $IPFS_HASH"
+    release_notes: "IPFS hash: $IPFS_HASH"
     file: 
       - web_$TRAVIS_TAG.zip
       - ipfs_hash.txt

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gnosis.pm/dex-react",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "",
   "main": "src/index.js",
   "sideEffects": false,

src/api/deposit/DepositApi.ts

@@ -41,6 +41,7 @@ export interface DepositApi {
   getBalance(params: GetBalanceParams): Promise<BN>
   getPendingDeposit(params: GetPendingDepositParams): Promise<PendingFlux>
   getPendingWithdraw(params: GetPendingWithdrawParams): Promise<PendingFlux>
+  getLastCreditBatchId(params: GetPendingDepositParams): Promise<number>
 
   deposit(params: DepositParams): Promise<Receipt>
   requestWithdraw(params: RequestWithdrawParams): Promise<Receipt>
@@ -87,6 +88,16 @@ export class DepositApiImpl implements DepositApi {
     return +batchId
   }
 
+  public async getLastCreditBatchId({
+    userAddress,
+    tokenAddress,
+    networkId,
+  }: GetPendingDepositParams): Promise<number> {
+    const contract = await this._getContract(networkId)
+    const lastCreditBatchId = await contract.methods.lastCreditBatchId(userAddress, tokenAddress).call()
+    return +lastCreditBatchId
+  }
+
   public async getSecondsRemainingInBatch(networkId: number): Promise<number> {
     const contract = await this._getContract(networkId)
     const secondsRemainingInBatch = await contract.methods.getSecondsRemainingInBatch().call()

src/api/deposit/DepositApiMock.ts

@@ -22,6 +22,7 @@ import { Erc20Api } from 'api/erc20/Erc20Api'
 
 export interface BalanceState {
   balance: BN
+  lastCreditedBatchId: number
   pendingDeposits: PendingFlux
   pendingWithdraws: PendingFlux
 }
@@ -47,6 +48,16 @@ export class DepositApiMock implements DepositApi {
     return BATCH_TIME
   }
 
+  public async getLastCreditBatchId({ userAddress, tokenAddress }: GetPendingDepositParams): Promise<number> {
+    const userBalanceStates = this._balanceStates[userAddress]
+    if (!userBalanceStates) {
+      return 0
+    }
+    const balanceState = userBalanceStates[tokenAddress]
+
+    return balanceState ? balanceState.lastCreditedBatchId : 0
+  }
+
   public async getCurrentBatchId(_networkId = 0): Promise<number> {
     return Math.floor(getEpoch() / BATCH_TIME)
   }
@@ -191,6 +202,7 @@ export class DepositApiMock implements DepositApi {
     if (!balanceState) {
       balanceState = {
         balance: ZERO,
+        lastCreditedBatchId: 0,
         pendingDeposits: {
           batchId: currentBatchId,
           amount: ZERO,

src/api/gasStation.ts

@@ -5,7 +5,9 @@ const GAS_STATIONS = {
   4: 'https://safe-relay.staging.gnosisdev.com/api/v1/gas-station/',
 }
 
-const GAS_PRICE_LEVEL: Exclude<keyof GasStationResponse, 'lastUpdate'> = 'standard'
+export type GasPriceLevel = Exclude<keyof GasStationResponse, 'lastUpdate'>
+
+const GAS_PRICE_LEVEL: GasPriceLevel = 'standard'
 
 let cacheKey = ''
 let cachedGasPrice: string
@@ -26,7 +28,9 @@ interface GasStationResponse {
   fastest: string
 }
 
-const fetchGasPriceFactory = (walletApi: WalletApi) => async (): Promise<string | undefined> => {
+const fetchGasPriceFactory = (walletApi: WalletApi) => async (
+  gasPriceLevel: GasPriceLevel = GAS_PRICE_LEVEL,
+): Promise<string | undefined> => {
   const { blockchainState } = walletApi
 
   if (!blockchainState) return undefined
@@ -47,7 +51,7 @@ const fetchGasPriceFactory = (walletApi: WalletApi) => async (): Promise<string
     const response = await fetch(gasStationURL)
     const json: GasStationResponse = await response.json()
 
-    const gasPrice = json[GAS_PRICE_LEVEL]
+    const gasPrice = json[gasPriceLevel]
     if (gasPrice) {
       cacheKey = key
       cachedGasPrice = gasPrice

src/api/wallet/WalletApi.ts

@@ -13,7 +13,7 @@ import { logDebug, toBN, txDataEncoder, generateWCOptions } from 'utils'
 import { subscribeToWeb3Event } from './subscriptionHelpers'
 import { getMatchingScreenSize, subscribeToScreenSizeChange } from 'utils/mediaQueries'
 import { composeProvider } from './composeProvider'
-import fetchGasPriceFactory from 'api/gasStation'
+import fetchGasPriceFactory, { GasPriceLevel } from 'api/gasStation'
 import { earmarkTxData } from 'api/earmark'
 import { Provider, isMetamaskProvider, isWalletConnectProvider, ProviderRpcError } from './providerUtils'
 
@@ -53,6 +53,7 @@ export interface WalletApi {
   getProviderInfo(): ProviderInfo
   blockchainState: BlockchainUpdatePrompt
   userPrintAsync: Promise<string>
+  getGasPrice(gasPriceLevel?: GasPriceLevel): Promise<number | null>
 }
 
 export interface WalletInfo {
@@ -249,6 +250,7 @@ export class WalletApiImpl implements WalletApi {
   public blockchainState: BlockchainUpdatePrompt
 
   private _unsubscribe: Command
+  private _fetchGasPrice: ReturnType<typeof fetchGasPriceFactory> = async () => undefined
 
   public constructor(web3: Web3) {
     this._listeners = []
@@ -349,6 +351,9 @@ export class WalletApiImpl implements WalletApi {
     closeOpenWebSocketConnection(this._web3)
 
     const fetchGasPrice = fetchGasPriceFactory(this)
+
+    this._fetchGasPrice = fetchGasPrice
+
     const earmarkingFunction = async (data?: string): Promise<string> => earmarkTxData(data, await this.userPrintAsync)
 
     const composedProvider = composeProvider(provider, { fetchGasPrice, earmarkTxData: earmarkingFunction })
@@ -457,6 +462,26 @@ export class WalletApiImpl implements WalletApi {
     await this._notifyListeners()
   }
 
+  public async getGasPrice(gasPriceLevel?: GasPriceLevel): Promise<number | null> {
+    // this never errors
+    // returns undefined if unable to fetch
+    let gasPrice = await this._fetchGasPrice(gasPriceLevel)
+
+    if (gasPrice) return +gasPrice
+    try {
+      // fallback to gasPrice from provider
+      // {"jsonrpc":"2.0","method":"eth_gasPrice"} call
+      gasPrice = await this._web3.eth.getGasPrice()
+
+      if (gasPrice) return +gasPrice
+    } catch (error) {
+      console.error('Error fetching gas price', error)
+    }
+
+    // unable to fetch
+    return null
+  }
+
   public async getAddress(): Promise<string> {
     assert(await this._connected, 'The wallet is not connected')
 

src/api/wallet/WalletApiMock.ts

@@ -58,6 +58,10 @@ export class WalletApiMock implements WalletApi {
     return this.connect()
   }
 
+  public async getGasPrice(): Promise<null> {
+    return null
+  }
+
   public async getAddress(): Promise<string> {
     assert(this._connected, 'The wallet is not connected')
 

src/components/DepositWidget/Row.tsx

@@ -3,7 +3,7 @@ import BN from 'bn.js'
 
 // Assets
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faClock, faPlus, faMinus } from '@fortawesome/free-solid-svg-icons'
+import { faClock, faPlus, faMinus, faBaby } from '@fortawesome/free-solid-svg-icons'
 import { MinusSVG, PlusSVG } from 'assets/img/SVG'
 
 // const, utils, types
@@ -24,6 +24,7 @@ import { TokenRow, RowClaimButton, RowClaimSpan } from 'components/DepositWidget
 import useNoScroll from 'hooks/useNoScroll'
 import { TokenLocalState } from 'reducers-actions'
 import { TokenSymbol } from 'components/TokenSymbol'
+import { HelpTooltip, HelpTooltipContainer } from 'components/Tooltip'
 
 export interface RowProps extends Record<keyof TokenLocalState, boolean> {
   ethBalance: BN | null
@@ -37,6 +38,12 @@ export interface RowProps extends Record<keyof TokenLocalState, boolean> {
 }
 
 const spinner = <Spinner style={{ marginRight: 7 }} />
+const ImmatureClaimTooltip: React.FC<{ displayName: string }> = ({ displayName }) => (
+  <HelpTooltipContainer>
+    You cannot withdraw in this batch because you received {displayName} in the previous batch and the protocol requires
+    one additional batch for settling the received tokens. Wait for the next batch (max 5 min) and try again.
+  </HelpTooltipContainer>
+)
 
 export const Row: React.FC<RowProps> = (props: RowProps) => {
   const {
@@ -53,6 +60,7 @@ export const Row: React.FC<RowProps> = (props: RowProps) => {
     claiming,
     withdrawing,
     depositing,
+    immatureClaim: isImmatureClaim,
   } = props
 
   const {
@@ -72,10 +80,11 @@ export const Row: React.FC<RowProps> = (props: RowProps) => {
   } = tokenBalances
 
   const [visibleForm, showForm] = useState<'deposit' | 'withdraw' | void>()
+  // block background scrolling on open modals
+  useNoScroll(!!visibleForm)
 
   // Checks innerWidth
   const showResponsive = !!innerWidth && innerWidth < MEDIA.MOBILE_LARGE_PX
-  useNoScroll(!!visibleForm && showResponsive)
 
   let className
   if (highlighted) {
@@ -116,7 +125,15 @@ export const Row: React.FC<RowProps> = (props: RowProps) => {
               <RowClaimButton className="success" onClick={onClaim} disabled={claiming}>
                 {(claiming || withdrawing) && spinner}
                 {formatSmart(pendingWithdraw.amount, decimals)}
-                <RowClaimSpan className={claiming || withdrawing ? 'disabled' : 'success'}>Claim</RowClaimSpan>
+                <div>
+                  <RowClaimSpan className={claiming || withdrawing ? 'disabled' : 'success'}>Claim</RowClaimSpan>
+                  {isImmatureClaim && (
+                    <span className="immatureClaimTooltip">
+                      <FontAwesomeIcon icon={faBaby} />
+                      <HelpTooltip tooltip={<ImmatureClaimTooltip displayName={symbol || name || 'tokens'} />} />
+                    </span>
+                  )}
+                </div>
               </RowClaimButton>
             </>
           ) : pendingWithdraw.amount.gt(ZERO) ? (
@@ -129,17 +146,24 @@ export const Row: React.FC<RowProps> = (props: RowProps) => {
             <>{withdrawing && spinner}0</>
           )}
         </td>
-        <td data-label="Wallet">
+        <td
+          data-label="Wallet"
+          title={(!isWeth && formatAmountFull({ amount: walletBalance, precision: decimals })) || ''}
+        >
           {isWeth ? (
             <ul>
               <li title={ethBalance ? formatAmountFull({ amount: ethBalance, precision: decimals }) : undefined}>
-                {ethBalance ? formatSmart(ethBalance, decimals) : '-'} ETH{' '}
+                <span>
+                  {ethBalance ? formatSmart(ethBalance, decimals) : '-'} <span>ETH</span>
+                </span>{' '}
                 <WrapEtherBtn label="Wrap" className="wrapUnwrapEther" />
               </li>
               <li title={formatAmountFull({ amount: walletBalance, precision: decimals }) || undefined}>
                 {(claiming || depositing) && spinner}
-                {formatSmart(walletBalance, decimals) + ' '}
-                WETH <UnwrapEtherBtn label="Unwrap" className="wrapUnwrapEther" />
+                <span>
+                  {formatSmart(walletBalance, decimals)} <span>WETH</span>
+                </span>{' '}
+                <UnwrapEtherBtn label="Unwrap" className="wrapUnwrapEther" />
               </li>
             </ul>
           ) : (

src/components/DepositWidget/Styled.tsx

@@ -85,12 +85,18 @@ export const TokenRow = styled.tr`
     padding: 0;
 
     li {
-      white-space: nowrap;
+      display: flex;
+      align-items: baseline;
+      justify-content: flex-end;
+
+      > span {
+        margin-right: 0.5rem;
+      }
     }
 
     button.wrapUnwrapEther {
       font-size: 1rem;
-      padding 0.2rem 0.5rem;
+      padding: 0.2rem 0.5rem;
       margin: 0.2rem 0;
       display: inline;
       min-width: 5rem;
@@ -123,6 +129,20 @@ export const RowClaimButton = styled.button`
     cursor: not-allowed;
     opacity: 0.5;
   }
+
+  > div {
+    display: flex;
+    align-items: inherit;
+
+    > .immatureClaimTooltip {
+      color: #d2a827;
+      margin-left: 0.5rem;
+
+      > span {
+        margin: 0.5rem;
+      }
+    }
+  }
 `
 
 export const RowClaimSpan = styled.span`

src/components/DepositWidget/index.tsx

@@ -171,7 +171,7 @@ const NoTokensMessage = styled.tr`
 interface BalanceDisplayProps extends TokenLocalState {
   enableToken: (tokenAddress: string, onTxHash?: (hash: string) => void) => Promise<void>
   depositToken: (amount: BN, tokenAddress: string, onTxHash?: (hash: string) => void) => Promise<void>
-  claimToken: (tokenAddress: string, onTxHash?: (hash: string) => void) => Promise<void>
+  claimToken: (tokenAddress: string, onTxHash?: (hash: string) => void) => Promise<void | React.ReactText>
   ethBalance: BN | null
   balances: TokenBalanceDetails[]
   error: boolean
@@ -181,6 +181,7 @@ interface BalanceDisplayProps extends TokenLocalState {
     claimable: boolean,
     onTxHash: (hash: string) => void,
   ): Promise<void>
+  hasTokensToShow?: boolean
 }
 
 const customFilterFnFactory = (searchTxt: string) => (token: TokenBalanceDetails): boolean => {
@@ -210,7 +211,9 @@ const BalancesDisplay: React.FC<BalanceDisplayProps> = ({
   highlighted,
   enabling,
   enabled,
+  immatureClaim,
   requestWithdrawConfirmation,
+  hasTokensToShow = false,
 }) => {
   const windowSpecs = useWindowSizes()
 
@@ -305,17 +308,18 @@ const BalancesDisplay: React.FC<BalanceDisplayProps> = ({
                         onTxHash,
                       )
                     }}
-                    onClaim={(): Promise<void> => claimToken(tokenBalances.address)}
+                    onClaim={(): Promise<void | React.ReactText> => 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)}
+                    immatureClaim={immatureClaim.has(tokenBalances.address)}
                     {...windowSpecs}
                   />
                 ))
-              ) : balances.length === 0 ? (
+              ) : balances.length === 0 && hasTokensToShow ? (
                 <NoTokensMessage>
                   <td>
                     All tokens disabled. Enable some in <a onClick={toggleModal}>Manage Tokens</a>
@@ -401,6 +405,7 @@ const DepositWidget: React.FC = () => {
       <BalancesDisplayMemoed
         ethBalance={ethBalance}
         balances={balances}
+        hasTokensToShow={allBalances.length > 0}
         error={error}
         {...restActions}
         requestWithdrawConfirmation={requestWithdrawConfirmation}