Confirmmodal for txes (gnosis#1252)

* create wrapper for SubmitTx

* create message for Trade tx

* wrap Sumit Limit Order

* reevalidate on price fill from PriceEstimation

* don't mess with disabled SubmitButton

* don't show modal for invalid form

* rerrange prices

* don't show 'All tokens disabled' while still fetching tokens

* Low volume warning (gnosis#1268)

* add usePriceEstimationInOwl hook

* add low volume warning

* pass networkId to TxMessage

* WalletApi.getGasPrice

* useGasPrice hook

* dynamic gasPrice in lowVolume warning

* move minFee calculation to utils

* add useWethPriceInOwl hook

* use ethPriceInOwl in calcMinTradableAmountInOwl

* useWETHPriceInOwl in TxMessage

* allow to specify gasPriceLevel for gas-station

* use gasPriceLevel: 'fast' like the solver

* Update src/components/TradeWidget/TxMessage.tsx

Co-authored-by: Leandro Boscariol <[email protected]>

* no CONST

* console.log -> logDebug

* fix typo

* braces

Co-authored-by: Leandro Boscariol <[email protected]>

* Styling tx conf modal (gnosis#1262)

* prelim styling save

* styling

* message text

* pr review comments

1. added how order works
2. tooltips

* CSS

* fixed tooltip/anchor style

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

* fix Alert align style

* add link to docs (provisional)

* Style low volume warning - TX Confirmation modal (gnosis#1310)

* styles

* image fix

* wording

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

Author: 3 people

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/index.tsx

@@ -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 => {
@@ -211,6 +212,7 @@ const BalancesDisplay: React.FC<BalanceDisplayProps> = ({
   enabling,
   enabled,
   requestWithdrawConfirmation,
+  hasTokensToShow = false,
 }) => {
   const windowSpecs = useWindowSizes()
 
@@ -315,7 +317,7 @@ const BalancesDisplay: React.FC<BalanceDisplayProps> = ({
                     {...windowSpecs}
                   />
                 ))
-              ) : balances.length === 0 ? (
+              ) : balances.length === 0 && hasTokensToShow ? (
                 <NoTokensMessage>
                   <td>
                     All tokens disabled. Enable some in <a onClick={toggleModal}>Manage Tokens</a>
@@ -401,6 +403,7 @@ const DepositWidget: React.FC = () => {
       <BalancesDisplayMemoed
         ethBalance={ethBalance}
         balances={balances}
+        hasTokensToShow={allBalances.length > 0}
         error={error}
         {...restActions}
         requestWithdrawConfirmation={requestWithdrawConfirmation}

src/components/TradeWidget/PriceEstimations.tsx

@@ -74,7 +74,7 @@ interface PriceEstimationsProps {
 export const PriceEstimations: React.FC<PriceEstimationsProps> = props => {
   const { amount, isPriceInverted, priceInputId, priceInverseInputId } = props
 
-  const { setValue } = useFormContext<TradeFormData>()
+  const { setValue, triggerValidation } = useFormContext<TradeFormData>()
 
   const updatePrices = useCallback(
     (price: string, invertedPrice) => (): void => {
@@ -85,8 +85,9 @@ export const PriceEstimations: React.FC<PriceEstimationsProps> = props => {
         setValue(priceInverseInputId, price)
         setValue(priceInputId, invertedPrice)
       }
+      triggerValidation()
     },
-    [isPriceInverted, setValue, priceInputId, priceInverseInputId],
+    [isPriceInverted, triggerValidation, setValue, priceInputId, priceInverseInputId],
   )
 
   return (