add getLastCreditBatchId to depositApi & useTokenBalances claimable check (gnosis#1302)

* add getLastCreditBatchId to depositApi

1. added inside useTokenBalances a check against current batchId

* fixed broken mock

* fix depostApiMock.test

* move lastCreditedBatchId check to onClaim

* css and useNoScroll edit

* immatureClaim

1. added svg indicators
2. warning
3. added global state to track

* fixed types

* fix test

Author: W3stside

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/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) ? (

src/components/DepositWidget/Styled.tsx

@@ -129,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
@@ -211,6 +211,7 @@ const BalancesDisplay: React.FC<BalanceDisplayProps> = ({
   highlighted,
   enabling,
   enabled,
+  immatureClaim,
   requestWithdrawConfirmation,
   hasTokensToShow = false,
 }) => {
@@ -307,13 +308,14 @@ 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}
                   />
                 ))

src/components/DepositWidget/useRowActions.tsx

@@ -22,6 +22,7 @@ import {
   setHighlightAndDepositing,
   setHighlightAndWithdrawing,
   setEnabledAction,
+  setImmatureClaim,
 } from 'reducers-actions'
 
 const ON_ERROR_MESSAGE = 'No logged in user found. Please check wallet connectivity status and try again.'
@@ -34,7 +35,7 @@ interface Result extends TokenLocalState {
   enableToken: (tokenAddress: string, onTxHash?: (hash: string) => void) => Promise<void>
   depositToken: (amount: BN, tokenAddress: string, onTxHash?: (hash: string) => void) => Promise<void>
   requestWithdrawToken: (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>
 }
 
 export const useRowActions = (params: Params): Result => {
@@ -149,14 +150,45 @@ export const useRowActions = (params: Params): Result => {
       }
     }
 
-    async function claimToken(tokenAddress: string, onTxHash?: (hash: string) => void): Promise<void> {
+    async function claimToken(
+      tokenAddress: string,
+      onTxHash?: (hash: string) => void,
+    ): Promise<void | React.ReactText> {
       try {
         assert(userAddress, ON_ERROR_MESSAGE)
         assert(networkId, ON_ERROR_MESSAGE)
-
         const token = getToken('address', tokenAddress, balances)
         assert(token, 'No token')
 
+        // highlight row after asserting tokenaddress exists
+        dispatch(setHighlightAndClaimingAction(tokenAddress))
+
+        const [lastCreditedBatchId, currentBatchId] = await Promise.all([
+          depositApi.getLastCreditBatchId({ userAddress, tokenAddress, networkId }),
+          depositApi.getCurrentBatchId(networkId),
+        ])
+
+        // Check if user is in immature claim state
+        // if so, show warning and set to global
+        // else if theyre not, but state exists, remove them
+        if (lastCreditedBatchId === currentBatchId) {
+          const isClaimImmature = state.immatureClaim.has(tokenAddress)
+          const immatureClaimWarning = `You cannot withdraw in this batch because you received ${token.symbol} 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.`
+
+          // user does NOT already have immature claim status on this token
+          if (!isClaimImmature) {
+            dispatch(setImmatureClaim(tokenAddress))
+          }
+
+          return toast.warn(immatureClaimWarning, { autoClose: false })
+          // user no longer is in block state
+          // but has global state blocked status
+          // REMOVE them
+        } else if (state.immatureClaim.has(tokenAddress)) {
+          dispatch(setImmatureClaim(tokenAddress))
+        }
+
         const { pendingWithdraw, symbol, decimals } = safeFilledToken<TokenBalanceDetails>(token)
 
         console.debug(
@@ -166,8 +198,6 @@ export const useRowActions = (params: Params): Result => {
           })} of ${symbol}`,
         )
 
-        dispatch(setHighlightAndClaimingAction(tokenAddress))
-
         const receipt = await depositApi.withdraw({
           userAddress,
           tokenAddress,
@@ -191,7 +221,7 @@ export const useRowActions = (params: Params): Result => {
       requestWithdrawToken,
       claimToken,
     }
-  }, [balances, dispatch, networkId, userAddress])
+  }, [balances, dispatch, networkId, userAddress, state.immatureClaim])
 
   return useMemo(
     () => ({

src/components/Layout/Card/Card.tsx

@@ -7,42 +7,36 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faChevronUp, faChevronDown } from '@fortawesome/free-solid-svg-icons'
 
 const CardRowDrawer = styled.tr`
+  position: fixed;
+  z-index: 1050;
   display: flex;
   justify-content: center;
   align-items: center;
-  position: fixed;
   top: 0;
   left: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  box-shadow: 0 100vh 0 999vw rgba(47, 62, 78, 0.5);
-  z-index: 9998;
-  width: 50rem;
-  height: 50rem;
+  width: 100%;
+  height: 100%;
   border-radius: 0.6rem;
-  background: var(--color-background-pageWrapper);
-
-  @media ${MEDIA.mobile} {
-    width: 100%;
-    bottom: 0;
-    top: initial;
-    height: 100vh;
-    overflow-y: scroll;
-  }
+  background: var(--color-background-modali);
 
   // Inner td wrapper
   > td {
     position: relative;
-    background: transparent;
+    z-index: 9999;
+    background: var(--color-background-pageWrapper);
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
-    border-radius: 6px;
+    border-radius: var(--border-radius);
     margin: 0;
-    width: 100%;
-    height: 100%;
+    width: 50rem;
+    height: 50rem;
     border: 0;
 
     @media ${MEDIA.mobile} {
+      width: 100%;
+      bottom: 0;
+      top: initial;
+      height: 100vh;
+      overflow-y: scroll;
       box-shadow: none;
     }
 

src/reducers-actions/tokenRow.ts

@@ -10,6 +10,7 @@ export const enum ActionTypes {
   SET_HIGHLIGHTED_AND_CLAIMING = 'highlighted_and_claiming',
   SET_HIGHLIGHTED_AND_DEPOSITING = 'highlighted_and_depositing',
   SET_HIGHLIGHTED_AND_WITHDRAWING = 'highlighted_and_withdrawing',
+  SET_IMMATURE_CLAIM = 'immatureClaim',
 }
 
 type TokenRowActions = Actions<ActionTypes, string>
@@ -59,13 +60,19 @@ export const setHighlightAndWithdrawing = (payload: string): TokenRowActions =>
   payload,
 })
 
+export const setImmatureClaim = (payload: string): TokenRowActions => ({
+  type: ActionTypes.SET_IMMATURE_CLAIM,
+  payload,
+})
+
 export interface TokenLocalState {
   [ActionTypes.SET_ENABLING]: Set<string>
   [ActionTypes.SET_ENABLED]: Set<string>
   [ActionTypes.SET_HIGHLIGHTED]: Set<string>
   [ActionTypes.SET_CLAIMING]: Set<string>
   [ActionTypes.SET_DEPOSITING]: Set<string>
   [ActionTypes.SET_WITHDRAWING]: Set<string>
+  [ActionTypes.SET_IMMATURE_CLAIM]: Set<string>
 }
 
 export const TokenRowInitialState: TokenLocalState = {
@@ -75,6 +82,7 @@ export const TokenRowInitialState: TokenLocalState = {
   claiming: new Set(),
   depositing: new Set(),
   withdrawing: new Set(),
+  immatureClaim: new Set(),
 }
 
 function getRemainingType(type: ActionTypes.SET_HIGHLIGHTED_AND_CLAIMING): ActionTypes.SET_CLAIMING
@@ -110,7 +118,8 @@ export const reducer = (state: TokenLocalState, action: TokenRowActions): TokenL
     case ActionTypes.SET_CLAIMING:
     case ActionTypes.SET_DEPOSITING:
     case ActionTypes.SET_WITHDRAWING:
-    case ActionTypes.SET_HIGHLIGHTED: {
+    case ActionTypes.SET_HIGHLIGHTED:
+    case ActionTypes.SET_IMMATURE_CLAIM: {
       const newSet = new Set(state[type])
       return {
         ...state,

src/types/index.ts

@@ -38,6 +38,7 @@ export interface TokenBalanceDetails extends TokenDetails {
   claimable: boolean
   enabled: boolean
   totalExchangeBalance: BN
+  immatureClaim?: boolean
 }
 
 export interface WithTxOptionalParams {