Display error when relay fee is greater than xdai amount

app/src/components/common/form/textfield_custom_symbol/index.tsx

@@ -5,17 +5,18 @@ import { CommonDisabledCSS } from '../common_styled'
 
 interface Props {
   disabled?: boolean
+  error?: boolean
   formField: any
   symbol: any
   shouldDisplayMaxButton?: boolean
   onClickMaxButton?: () => void
   style?: CSSProperties | undefined
 }
 
-const FieldWrapper = styled.div`
+const FieldWrapper = styled.div<{ error?: boolean }>`
   align-items: center;
   background-color: ${props => props.theme.textfield.backgroundColor};
-  border-color: ${props => props.theme.textfield.borderColor};
+  border-color: ${props => (props.error ? props.theme.alert : props.theme.border1)};
   border-style: ${props => props.theme.textfield.borderStyle};
   border-width: ${props => props.theme.textfield.borderWidth};
   border-radius: ${props => props.theme.textfield.borderRadius};
@@ -26,16 +27,16 @@ const FieldWrapper = styled.div`
   width: 100%;
 
   &:hover {
-    border-color: ${props => props.theme.textfield.borderColorOnHover};
+    border-color: ${props => (props.error ? props.theme.alert : props.theme.border2)};
     .btn--max {
-      border-color: ${props => props.theme.textfield.borderColorOnHover};
+      border-color: ${props => (props.error ? props.theme.alert : props.theme.border2)};
     }
   }
 
   &:focus-within {
-    border-color: ${props => props.theme.textfield.borderColorActive};
+    border-color: ${props => (props.error ? props.theme.alert : props.theme.border3)};
     .btn--max {
-      border-color: ${props => props.theme.textfield.borderColorActive};
+      border-color: ${props => (props.error ? props.theme.alert : props.theme.border3)};
     }
   }
 
@@ -44,12 +45,12 @@ const FieldWrapper = styled.div`
   > input {
     background-color: transparent;
     border: none;
-    color: ${props => props.theme.textfield.color};
+    color: ${props => props.theme.text2};
     flex-grow: 1;
     font-family: ${props => props.theme.fonts.fontFamily};
     font-size: ${props => props.theme.textfield.fontSize};
-    font-weight: ${props => props.theme.textfield.fontWeight};
-    line-height: 1.2;
+    font-weight: 400;
+    line-height: 18px;
     margin: 0 5px 0 0;
     min-width: 0;
     outline: ${props => props.theme.textfield.outline};
@@ -91,7 +92,7 @@ const FieldWrapper = styled.div`
 `
 
 const Symbol = styled.span<{ marginRight?: boolean }>`
-  color: ${props => props.theme.colors.primary};
+  color: ${props => props.theme.text2};
   flex-shrink: 0;
   font-size: 14px;
   font-weight: 500;
@@ -124,7 +125,6 @@ const MaxButton = styled.span`
 
 export const TextfieldCustomSymbol = (props: Props) => {
   const { disabled, formField, onClickMaxButton, shouldDisplayMaxButton, symbol, ...restProps } = props
-
   // eslint-disable-next-line no-warning-comments
   //TODO: use a input[text] instead of passing a <Textfield />
   return (

app/src/components/market/common_sections/message_text/warning_message/index.tsx

@@ -32,7 +32,7 @@ const Description = styled.p`
   width: 100%;
 
   &.danger {
-    color: ${props => props.theme.message.colors.error};
+    color: ${props => props.theme.alert};
   }
 `
 

app/src/components/market/common_styled/index.tsx

@@ -168,7 +168,7 @@ export const ErrorsWrapper = styled.div`
 `
 
 export const GenericError = styled.p<{ margin?: string }>`
-  color: ${props => props.theme.colors.error};
+  color: ${props => props.theme.alert};
   font-size: 13px;
   font-weight: 500;
   line-height: 1.5;

app/src/components/market/market_buy/market_buy.tsx

@@ -205,6 +205,7 @@ const MarketBuyWrapper: React.FC<Props> = (props: Props) => {
           <ReactTooltip id="walletBalanceTooltip" />
 
           <TextfieldCustomPlaceholder
+            error={!!amountError}
             formField={
               <BigNumberInput
                 decimals={collateral.decimals}

app/src/components/market/market_buy/scalar_market_buy.tsx

@@ -221,6 +221,7 @@ export const ScalarMarketBuy = (props: Props) => {
           </CurrenciesWrapper>
           <ReactTooltip id="walletBalanceTooltip" />
           <TextfieldCustomPlaceholder
+            error={!!amountError}
             formField={
               <BigNumberInput
                 decimals={collateral.decimals}

app/src/components/market/market_create/steps/items/funding_and_fee_step.tsx

@@ -12,7 +12,7 @@ import {
   MAX_MARKET_FEE,
 } from '../../../../../common/constants'
 import { useConnectedWeb3Context } from '../../../../../contexts'
-import { useCollateralBalance, useCpkAllowance, useCpkProxy } from '../../../../../hooks'
+import { useCollateralBalance, useCpkAllowance, useCpkProxy, useRelay } from '../../../../../hooks'
 import { useGraphMarketsFromQuestion } from '../../../../../hooks/graph/useGraphMarketsFromQuestion'
 import { BalanceState, fetchAccountBalance } from '../../../../../store/reducer'
 import { MarketCreationStatus } from '../../../../../util/market_creation_status_data'
@@ -253,6 +253,8 @@ const FundingAndFeeStep: React.FC<Props> = (props: Props) => {
   const { proxyIsUpToDate, updateProxy } = useCpkProxy(collateral.address === pseudoNativeAssetAddress)
   const isUpdated = RemoteData.hasData(proxyIsUpToDate) ? proxyIsUpToDate.data : true
 
+  const { relayFeeGreaterThanAmount, relayFeeGreaterThanBalance } = useRelay(amount || new BigNumber(0), collateral)
+
   useEffect(() => {
     dispatch(fetchAccountBalance(account, provider, collateral))
   }, [dispatch, account, provider, collateral])
@@ -285,10 +287,14 @@ const FundingAndFeeStep: React.FC<Props> = (props: Props) => {
       ? null
       : !maybeCollateralBalance.eq(collateralBalance)
       ? null
+      : relayFeeGreaterThanBalance
+      ? 'Insufficient Dai in your Omen Account'
       : maybeCollateralBalance.isZero() && funding.gt(maybeCollateralBalance)
       ? `Insufficient balance`
       : funding.gt(maybeCollateralBalance)
       ? `Value must be less than or equal to ${collateralBalanceFormatted} ${collateral.symbol}`
+      : relayFeeGreaterThanAmount
+      ? 'Relay fee is greater than buy amount'
       : null
 
   const isCreateMarketbuttonDisabled =
@@ -472,6 +478,7 @@ const FundingAndFeeStep: React.FC<Props> = (props: Props) => {
               />
             </CurrenciesWrapper>
             <TextfieldCustomPlaceholder
+              error={!!amountError}
               formField={
                 <BigNumberInput
                   decimals={collateral.decimals}

app/src/components/market/market_pooling/market_pool_liquidity.tsx

@@ -204,6 +204,7 @@ const MarketPoolLiquidityWrapper: React.FC<Props> = (props: Props) => {
               </CurrenciesWrapper>
 
               <TextfieldCustomPlaceholder
+                error={!!collateralAmountError}
                 formField={
                   <BigNumberInput
                     decimals={collateral.decimals}
@@ -233,6 +234,7 @@ const MarketPoolLiquidityWrapper: React.FC<Props> = (props: Props) => {
               <TokenBalance text="Pool Tokens" value={sharesBalance} />
 
               <TextfieldCustomPlaceholder
+                error={!!sharesAmountError}
                 formField={
                   <BigNumberInput
                     decimals={collateral.decimals}

app/src/components/market/market_pooling/scalar_market_pool_liquidity.tsx

@@ -233,6 +233,7 @@ export const ScalarMarketPoolLiquidity = (props: Props) => {
               </CurrenciesWrapper>
 
               <TextfieldCustomPlaceholder
+                error={!!collateralAmountError}
                 formField={
                   <BigNumberInput
                     decimals={collateral.decimals}
@@ -262,6 +263,7 @@ export const ScalarMarketPoolLiquidity = (props: Props) => {
               <TokenBalance text="Pool Tokens" value={sharesBalance} />
 
               <TextfieldCustomPlaceholder
+                error={!!sharesAmountError}
                 formField={
                   <BigNumberInput
                     decimals={collateral.decimals}
@@ -289,7 +291,6 @@ export const ScalarMarketPoolLiquidity = (props: Props) => {
                 shouldDisplayMaxButton
                 symbol="Shares"
               />
-
               {sharesAmountError && <GenericError>{sharesAmountError}</GenericError>}
             </>
           )}

app/src/components/market/market_sell/market_sell.tsx

@@ -98,6 +98,7 @@ const MarketSellWrapper: React.FC<Props> = (props: Props) => {
           <TokenBalance text="Your Shares" value={selectedOutcomeBalance} />
           <ReactTooltip id="walletBalanceTooltip" />
           <TextfieldCustomPlaceholder
+            error={!!amountError}
             formField={
               <BigNumberInput
                 decimals={collateral.decimals}

app/src/components/market/market_sell/scalar_market_sell.tsx

@@ -110,6 +110,7 @@ export const ScalarMarketSell = (props: Props) => {
           />
 
           <TextfieldCustomPlaceholder
+            error={!!amountError}
             formField={
               <BigNumberInput
                 decimals={collateral.decimals}

app/src/hooks/index.ts

@@ -23,3 +23,4 @@ export { useRealityLink } from './useRealityLink'
 export { useSymbol } from './useSymbol'
 export { useMultipleQueries } from './useMultipleQueries'
 export { useAirdropService } from './useAirdropService'
+export { useRelay } from './useRelay'

app/src/hooks/useRelay.tsx

@@ -0,0 +1,67 @@
+import { BigNumber } from 'ethers/utils'
+import { useEffect, useState } from 'react'
+
+import { useConnectedWeb3Context } from '../contexts/connectedWeb3'
+import { RelayService } from '../services'
+import { getNativeAsset } from '../util/networks'
+import { Token } from '../util/types'
+
+interface Status {
+  active: boolean
+}
+
+interface RelayServiceResponse {
+  relayAddress: string
+  relayFee: BigNumber
+  relayFeeGreaterThanAmount: boolean
+  relayFeeGreaterThanBalance: boolean
+}
+
+export const useRelay = (amount?: BigNumber, collateral?: Token): RelayServiceResponse => {
+  const { account, balances, networkId, relay } = useConnectedWeb3Context()
+
+  const [relayAddress, setRelayAddress] = useState('')
+  const [relayFee, setRelayFee] = useState(new BigNumber('0'))
+  const [relayFeeGreaterThanAmount, setRelayFeeGreaterThanAmount] = useState(false)
+  const [relayFeeGreaterThanBalance, setRelayFeeGreaterThanBalance] = useState(false)
+
+  const fetchRelayInfo = async (status?: Status) => {
+    const relayService = new RelayService()
+    const { address, fee } = await relayService.getInfo()
+    if (!status || status.active) {
+      setRelayAddress(address)
+
+      const feeBN = new BigNumber(fee)
+      setRelayFee(feeBN)
+      setRelayFeeGreaterThanBalance(feeBN.gt(balances.xDaiBalance))
+    }
+  }
+
+  useEffect(() => {
+    const status = { active: true }
+    if (account && relay) {
+      fetchRelayInfo(status)
+    } else {
+      setRelayAddress('')
+      setRelayFee(new BigNumber('0'))
+      setRelayFeeGreaterThanBalance(false)
+    }
+    return () => {
+      status.active = false
+    }
+    // eslint-disable-next-line
+  }, [account, networkId, relay])
+
+  useEffect(() => {
+    if (account && relay && collateral && amount) {
+      const native = getNativeAsset(networkId, relay)
+      const feeGreaterThanAmount =
+        relay && amount && !amount.isZero() && relayFee.gt(amount) && collateral.address === native.address
+      setRelayFeeGreaterThanAmount(feeGreaterThanAmount)
+    } else {
+      setRelayFeeGreaterThanAmount(false)
+    }
+  }, [amount, collateral, account, relay, networkId, relayFee])
+
+  return { relayAddress, relayFee, relayFeeGreaterThanAmount, relayFeeGreaterThanBalance }
+}

app/src/pages/market_sections/market_buy_container.tsx

@@ -6,7 +6,14 @@ import { STANDARD_DECIMALS } from '../../common/constants'
 import { MarketBuy } from '../../components/market/market_buy/market_buy'
 import { ScalarMarketBuy } from '../../components/market/market_buy/scalar_market_buy'
 import { ConnectedWeb3Context, useConnectedWeb3Context } from '../../contexts'
-import { useAsyncDerivedValue, useCollateralBalance, useContracts, useCpkAllowance, useCpkProxy } from '../../hooks'
+import {
+  useAsyncDerivedValue,
+  useCollateralBalance,
+  useContracts,
+  useCpkAllowance,
+  useCpkProxy,
+  useRelay,
+} from '../../hooks'
 import { CPKService, MarketMakerService } from '../../services'
 import { getNativeAsset, pseudoNativeAssetAddress } from '../../util/networks'
 import { RemoteData } from '../../util/remote_data'
@@ -118,6 +125,8 @@ const MarketBuyContainer: React.FC<Props> = (props: Props) => {
     context,
   )
 
+  const { relayFeeGreaterThanAmount, relayFeeGreaterThanBalance } = useRelay(amount, collateral)
+
   useEffect(() => {
     setIsNegativeAmount((amount || Zero).lt(Zero))
   }, [amount, collateral.decimals])
@@ -201,10 +210,14 @@ const MarketBuyContainer: React.FC<Props> = (props: Props) => {
       ? null
       : maybeCollateralBalance === null
       ? null
+      : relayFeeGreaterThanBalance
+      ? 'Insufficient Dai in your Omen Account'
       : maybeCollateralBalance.isZero() && amount?.gt(maybeCollateralBalance)
       ? `Insufficient balance`
       : amount?.gt(maybeCollateralBalance)
       ? `Value must be less than or equal to ${currentBalance} ${collateral.symbol}`
+      : relayFeeGreaterThanAmount
+      ? 'Relay fee is greater than buy amount'
       : null
 
   const unlockCollateral = async () => {
@@ -245,7 +258,9 @@ const MarketBuyContainer: React.FC<Props> = (props: Props) => {
       hasEnoughAllowance !== Ternary.True) ||
     amountError !== null ||
     isNegativeAmount ||
-    !isUpdated
+    !isUpdated ||
+    relayFeeGreaterThanAmount ||
+    relayFeeGreaterThanBalance
 
   const shouldDisplayMaxButton = collateral.address !== pseudoNativeAssetAddress
   const sharesTotal = bigNumberToString(tradedShares, collateral.decimals)

app/src/pages/market_sections/market_pool_liquidity_container.tsx

@@ -13,6 +13,7 @@ import {
   useCpkProxy,
   useFundingBalance,
   useGraphLiquidityMiningCampaigns,
+  useRelay,
 } from '../../hooks'
 import { GraphResponseLiquidityMiningCampaign } from '../../hooks/useGraphLiquidityMiningCampaigns'
 import { useTokenPrice } from '../../hooks/useTokenPrice'
@@ -179,23 +180,34 @@ const MarketPoolLiquidityContainer: React.FC<Props> = (props: Props) => {
 
   const totalUserLiquidity = totalDepositedTokens.add(userEarnings).add(userStakedTokens)
 
+  const { relayFeeGreaterThanAmount, relayFeeGreaterThanBalance } = useRelay(
+    amountToFund || new BigNumber(0),
+    collateral,
+  )
+
   const { proxyIsUpToDate, updateProxy } = useCpkProxy()
   const isUpdated = RemoteData.hasData(proxyIsUpToDate) ? proxyIsUpToDate.data : true
 
   const collateralAmountError = isTransactionProcessing
     ? null
     : maybeCollateralBalance === null
     ? null
+    : relayFeeGreaterThanBalance
+    ? 'Insufficient Dai in your Omen Account'
     : maybeCollateralBalance.isZero() && amountToFund?.gt(maybeCollateralBalance)
     ? `Insufficient balance`
     : amountToFund?.gt(maybeCollateralBalance)
     ? `Value must be less than or equal to ${walletBalance} ${collateral.symbol}`
+    : relayFeeGreaterThanAmount
+    ? 'Relay fee is greater than buy amount'
     : null
 
   const sharesAmountError = isTransactionProcessing
     ? null
     : maybeFundingBalance === null
     ? null
+    : relayFeeGreaterThanBalance
+    ? 'Insufficient Dai in your Omen Account'
     : maybeFundingBalance.isZero() && amountToRemove?.gt(maybeFundingBalance) && amountToRemove?.gt(userStakedTokens)
     ? `Insufficient balance`
     : amountToRemove?.gt(fundingBalance) && amountToRemove?.gt(userStakedTokens)
@@ -215,7 +227,8 @@ const MarketPoolLiquidityContainer: React.FC<Props> = (props: Props) => {
     (!cpk?.isSafeApp && collateral.address !== pseudoNativeAssetAddress && hasEnoughAllowance !== Ternary.True) ||
     collateralAmountError !== null ||
     currentDate > resolutionDate ||
-    isNegativeAmountToFund
+    isNegativeAmountToFund ||
+    relayFeeGreaterThanAmount
 
   const upgradeProxy = async () => {
     if (!cpk) {