From 4108ed7e09f59ed62367ce8eecbee4954aa574f4 Mon Sep 17 00:00:00 2001
From: lubej <9722540+lubej@users.noreply.github.com>
Date: Wed, 13 Dec 2023 14:33:12 +0100
Subject: [PATCH] Estimate gas price via provider

---
 src/components/WrapForm/index.tsx             | 29 +++++--
 src/constants/config.ts                       |  2 +
 src/hooks/useInterval.ts                      | 18 +++++
 src/hooks/{useWeb3.tsx => useWeb3.ts}         |  2 +-
 src/hooks/{useWrapForm.tsx => useWrapForm.ts} |  2 +-
 src/pages/Wrapper/index.tsx                   |  8 +-
 src/providers/Web3Context.ts                  | 31 ++++++++
 src/providers/Web3Provider.tsx                | 55 +++++--------
 src/providers/WrapFormContext.ts              | 26 +++++++
 src/providers/WrapFormProvider.tsx            | 77 +++++++++++--------
 src/utils/number.utils.ts                     | 11 ++-
 11 files changed, 178 insertions(+), 83 deletions(-)
 create mode 100644 src/hooks/useInterval.ts
 rename src/hooks/{useWeb3.tsx => useWeb3.ts} (80%)
 rename src/hooks/{useWrapForm.tsx => useWrapForm.ts} (79%)
 create mode 100644 src/providers/Web3Context.ts
 create mode 100644 src/providers/WrapFormContext.ts

diff --git a/src/components/WrapForm/index.tsx b/src/components/WrapForm/index.tsx
index 9dac6fb..4973b89 100644
--- a/src/components/WrapForm/index.tsx
+++ b/src/components/WrapForm/index.tsx
@@ -1,4 +1,4 @@
-import { FC, FormEvent, MouseEvent, useEffect, useState } from 'react'
+import { FC, FormEvent, MouseEvent, useEffect, useRef, useState } from 'react'
 import { Input } from '../Input'
 import classes from './index.module.css'
 import { Button } from '../Button'
@@ -8,6 +8,8 @@ import { useNavigate } from 'react-router-dom'
 import { ToggleButton } from '../ToggleButton'
 import { useWrapForm } from '../../hooks/useWrapForm'
 import { WrapFormType } from '../../utils/types'
+import { useInterval } from '../../hooks/useInterval'
+import { NumberUtils } from '../../utils/number.utils'
 
 const AMOUNT_PATTERN = '^[0-9]*[.,]?[0-9]*$'
 
@@ -33,14 +35,25 @@ const labelMapByFormType: Record<WrapFormType, WrapFormLabels> = {
 export const WrapForm: FC = () => {
   const navigate = useNavigate()
   const {
-    state: { formType, amount, isLoading, balance },
+    state: { formType, amount, isLoading, balance, estimatedFee },
     toggleFormType,
     submit,
-    getFeeAmount,
+    debounceLeadingSetFeeAmount,
   } = useWrapForm()
   const { firstInputLabel, secondInputLabel, submitBtnLabel } = labelMapByFormType[formType]
   const [value, setValue] = useState('')
   const [error, setError] = useState('')
+  const debouncedSetFeeAmount = useRef(debounceLeadingSetFeeAmount())
+
+  useEffect(() => {
+    // Trigger fee calculation on value change
+    debouncedSetFeeAmount.current()
+  }, [value])
+
+  useInterval(() => {
+    // Trigger fee calculation every minute, in case fee data becomes stale
+    debouncedSetFeeAmount.current()
+  }, 60000)
 
   useEffect(() => {
     setError('')
@@ -76,9 +89,10 @@ export const WrapForm: FC = () => {
 
   const parsedValue = formType === WrapFormType.WRAP && value ? utils.parseUnits(value || '0', 'ether') : null
   const showRoseMaxAmountWarning =
-    parsedValue && parsedValue.gt(0)
-      ? utils.parseUnits(value, 'ether').eq(balance.sub(getFeeAmount()))
-      : false
+    parsedValue && parsedValue.gt(0) ? parsedValue.eq(balance.sub(estimatedFee)) : false
+
+  const estimatedFeeTruncated =
+    estimatedFee && estimatedFee.gt(0) ? `~${NumberUtils.getTruncatedAmount(estimatedFee)} ROSE` : '/'
 
   return (
     <div>
@@ -107,8 +121,7 @@ export const WrapForm: FC = () => {
           <ToggleButton className={classes.toggleBtn} onClick={handleToggleFormType} disabled={isLoading} />
         </div>
 
-        {/*This is hardcoded for now, as are gas prices*/}
-        <h4 className={classes.gasEstimateLabel}>Estimated fee: &lt;0.01 ROSE (~10 sec)</h4>
+        <h4 className={classes.gasEstimateLabel}>Estimated fee: {estimatedFeeTruncated}</h4>
 
         <Button disabled={isLoading} type="submit" fullWidth>
           {submitBtnLabel}
diff --git a/src/constants/config.ts b/src/constants/config.ts
index c3d79f5..5fcfd72 100644
--- a/src/constants/config.ts
+++ b/src/constants/config.ts
@@ -17,4 +17,6 @@ export const NETWORKS: Record<number, NetworkConfiguration> = {
   },
 }
 
+export const MAX_GAS_LIMIT = 100000
+
 export const METAMASK_HOME_PAGE = 'https://metamask.io/'
diff --git a/src/hooks/useInterval.ts b/src/hooks/useInterval.ts
new file mode 100644
index 0000000..5cae801
--- /dev/null
+++ b/src/hooks/useInterval.ts
@@ -0,0 +1,18 @@
+import { useEffect, useRef } from 'react'
+
+export const useInterval = (cb: () => void, delay: number) => {
+  const cbRef = useRef(() => {
+  })
+
+  useEffect(() => {
+    cbRef.current = cb
+  }, [cb])
+
+  useEffect(() => {
+    const id = setInterval(() => cbRef.current(), delay)
+
+    return () => {
+      clearInterval(id)
+    }
+  }, [delay])
+}
diff --git a/src/hooks/useWeb3.tsx b/src/hooks/useWeb3.ts
similarity index 80%
rename from src/hooks/useWeb3.tsx
rename to src/hooks/useWeb3.ts
index 4acaeaf..1030fad 100644
--- a/src/hooks/useWeb3.tsx
+++ b/src/hooks/useWeb3.ts
@@ -1,5 +1,5 @@
 import { useContext } from 'react'
-import { Web3Context } from '../providers/Web3Provider'
+import { Web3Context } from '../providers/Web3Context'
 
 export const useWeb3 = () => {
   const value = useContext(Web3Context)
diff --git a/src/hooks/useWrapForm.tsx b/src/hooks/useWrapForm.ts
similarity index 79%
rename from src/hooks/useWrapForm.tsx
rename to src/hooks/useWrapForm.ts
index 4d2ee01..990cd82 100644
--- a/src/hooks/useWrapForm.tsx
+++ b/src/hooks/useWrapForm.ts
@@ -1,5 +1,5 @@
 import { useContext } from 'react'
-import { WrapFormContext } from '../providers/WrapFormProvider'
+import { WrapFormContext } from '../providers/WrapFormContext'
 
 export const useWrapForm = () => {
   const value = useContext(WrapFormContext)
diff --git a/src/pages/Wrapper/index.tsx b/src/pages/Wrapper/index.tsx
index 044c758..ad6853e 100644
--- a/src/pages/Wrapper/index.tsx
+++ b/src/pages/Wrapper/index.tsx
@@ -38,10 +38,9 @@ export const Wrapper: FC = () => {
     addTokenToWallet,
   } = useWeb3()
   const {
-    state: { isLoading, balance, wRoseBalance, formType },
+    state: { isLoading, balance, wRoseBalance, formType, estimatedFee },
     init,
     setAmount,
-    getFeeAmount,
   } = useWrapForm()
 
   useEffect(() => {
@@ -52,10 +51,9 @@ export const Wrapper: FC = () => {
   const handlePercentageCalc = (percentage: BigNumber) => {
     if (formType === WrapFormType.WRAP) {
       if (percentage.eq(100)) {
-        /* In case of 100% WRAP, deduct hardcoded gas fee */
+        /* In case of 100% WRAP, deduct gas fee */
         const percAmount = NumberUtils.getPercentageAmount(balance, percentage)
-        const fee = getFeeAmount()
-        setAmount(percAmount.sub(fee))
+        setAmount(percAmount.sub(estimatedFee))
       } else {
         setAmount(NumberUtils.getPercentageAmount(balance, percentage))
       }
diff --git a/src/providers/Web3Context.ts b/src/providers/Web3Context.ts
new file mode 100644
index 0000000..59a729e
--- /dev/null
+++ b/src/providers/Web3Context.ts
@@ -0,0 +1,31 @@
+import { createContext } from 'react'
+import { BigNumber, ethers } from 'ethers'
+import * as sapphire from '@oasisprotocol/sapphire-paratime'
+import { TransactionResponse } from '@ethersproject/abstract-provider'
+
+export interface Web3ProviderState {
+  isConnected: boolean
+  ethProvider: ethers.providers.Web3Provider | null
+  sapphireEthProvider: (ethers.providers.Web3Provider & sapphire.SapphireAnnex) | null
+  wRoseContractAddress: string | null
+  wRoseContract: ethers.Contract | null
+  account: string | null
+  explorerBaseUrl: string | null
+  networkName: string | null
+}
+
+export interface Web3ProviderContext {
+  readonly state: Web3ProviderState
+  wrap: (amount: string, gasPrice: BigNumber) => Promise<TransactionResponse>
+  unwrap: (amount: string, gasPrice: BigNumber) => Promise<TransactionResponse>
+  isMetaMaskInstalled: () => Promise<boolean>
+  connectWallet: () => Promise<void>
+  switchNetwork: () => Promise<void>
+  getBalance: () => Promise<BigNumber>
+  getBalanceOfWROSE: () => Promise<BigNumber>
+  getTransaction: (txHash: string) => Promise<TransactionResponse>
+  addTokenToWallet: () => Promise<void>
+  getGasPrice: () => Promise<BigNumber>
+}
+
+export const Web3Context = createContext<Web3ProviderContext>({} as Web3ProviderContext)
diff --git a/src/providers/Web3Provider.tsx b/src/providers/Web3Provider.tsx
index 4a5dce8..2ccd2cd 100644
--- a/src/providers/Web3Provider.tsx
+++ b/src/providers/Web3Provider.tsx
@@ -1,16 +1,13 @@
-import { createContext, FC, PropsWithChildren, useCallback, useState } from 'react'
+import { FC, PropsWithChildren, useCallback, useState } from 'react'
 import { BigNumber, ethers, utils } from 'ethers'
 import * as sapphire from '@oasisprotocol/sapphire-paratime'
-import { NETWORKS } from '../constants/config'
+import { MAX_GAS_LIMIT, NETWORKS } from '../constants/config'
 // https://repo.sourcify.dev/contracts/full_match/23295/0xB759a0fbc1dA517aF257D5Cf039aB4D86dFB3b94/
 // https://repo.sourcify.dev/contracts/full_match/23294/0x8Bc2B030b299964eEfb5e1e0b36991352E56D2D3/
 import WrappedRoseMetadata from '../contracts/WrappedROSE.json'
-import { TransactionResponse } from '@ethersproject/abstract-provider'
 import { MetaMaskError, UnknownNetworkError } from '../utils/errors'
 import detectEthereumProvider from '@metamask/detect-provider'
-
-const MAX_GAS_PRICE = utils.parseUnits('100', 'gwei').toNumber()
-const MAX_GAS_LIMIT = 100000
+import { Web3ProviderContext, Web3ProviderState, Web3Context } from './Web3Context'
 
 declare global {
   interface Window {
@@ -18,30 +15,6 @@ declare global {
   }
 }
 
-interface Web3ProviderState {
-  isConnected: boolean
-  ethProvider: ethers.providers.Web3Provider | null
-  sapphireEthProvider: (ethers.providers.Web3Provider & sapphire.SapphireAnnex) | null
-  wRoseContractAddress: string | null
-  wRoseContract: ethers.Contract | null
-  account: string | null
-  explorerBaseUrl: string | null
-  networkName: string | null
-}
-
-interface Web3ProviderContext {
-  readonly state: Web3ProviderState
-  wrap: (amount: string) => Promise<TransactionResponse>
-  unwrap: (amount: string) => Promise<TransactionResponse>
-  isMetaMaskInstalled: () => Promise<boolean>
-  connectWallet: () => Promise<void>
-  switchNetwork: () => Promise<void>
-  getBalance: () => Promise<BigNumber>
-  getBalanceOfWROSE: () => Promise<BigNumber>
-  getTransaction: (txHash: string) => Promise<TransactionResponse>
-  addTokenToWallet: () => Promise<void>
-}
-
 const web3ProviderInitialState: Web3ProviderState = {
   isConnected: false,
   ethProvider: null,
@@ -53,8 +26,6 @@ const web3ProviderInitialState: Web3ProviderState = {
   networkName: null,
 }
 
-export const Web3Context = createContext<Web3ProviderContext>({} as Web3ProviderContext)
-
 export const Web3ContextProvider: FC<PropsWithChildren> = ({ children }) => {
   const [state, setState] = useState<Web3ProviderState>({
     ...web3ProviderInitialState,
@@ -252,7 +223,18 @@ export const Web3ContextProvider: FC<PropsWithChildren> = ({ children }) => {
     }
   }
 
-  const wrap = async (amount: string) => {
+  const getGasPrice = async () => {
+    const { sapphireEthProvider } = state
+
+    if (!sapphireEthProvider) {
+      // Silently fail
+      return BigNumber.from(0)
+    }
+
+    return await sapphireEthProvider.getGasPrice()
+  }
+
+  const wrap = async (amount: string, gasPrice: BigNumber) => {
     if (!amount) {
       throw new Error('[amount] is required!')
     }
@@ -263,10 +245,10 @@ export const Web3ContextProvider: FC<PropsWithChildren> = ({ children }) => {
       throw new Error('[wRoseContract] not initialized!')
     }
 
-    return await wRoseContract.deposit({ value: amount, gasLimit: MAX_GAS_LIMIT, gasPrice: MAX_GAS_PRICE })
+    return await wRoseContract.deposit({ value: amount, gasLimit: MAX_GAS_LIMIT, gasPrice })
   }
 
-  const unwrap = async (amount: string) => {
+  const unwrap = async (amount: string, gasPrice: BigNumber) => {
     if (!amount) {
       throw new Error('[amount] is required!')
     }
@@ -277,7 +259,7 @@ export const Web3ContextProvider: FC<PropsWithChildren> = ({ children }) => {
       throw new Error('[wRoseContract] not initialized!')
     }
 
-    return await wRoseContract.withdraw(amount, { gasLimit: MAX_GAS_LIMIT, gasPrice: MAX_GAS_PRICE })
+    return await wRoseContract.withdraw(amount, { gasLimit: MAX_GAS_LIMIT, gasPrice })
   }
 
   const getTransaction = async (txHash: string) => {
@@ -331,6 +313,7 @@ export const Web3ContextProvider: FC<PropsWithChildren> = ({ children }) => {
     getBalanceOfWROSE,
     getTransaction,
     addTokenToWallet,
+    getGasPrice,
   }
 
   return <Web3Context.Provider value={providerState}>{children}</Web3Context.Provider>
diff --git a/src/providers/WrapFormContext.ts b/src/providers/WrapFormContext.ts
new file mode 100644
index 0000000..f004e48
--- /dev/null
+++ b/src/providers/WrapFormContext.ts
@@ -0,0 +1,26 @@
+import { createContext } from 'react'
+import { BigNumber, BigNumberish } from 'ethers'
+import { TransactionResponse } from '@ethersproject/abstract-provider'
+import { WrapFormType } from '../utils/types'
+
+export interface WrapFormProviderState {
+  isLoading: boolean
+  amount: BigNumber | null
+  formType: WrapFormType
+  balance: BigNumber
+  wRoseBalance: BigNumber
+  estimatedFee: BigNumber
+  estimatedGasPrice: BigNumber
+}
+
+export interface WrapFormProviderContext {
+  readonly state: WrapFormProviderState
+  init: () => void
+  setAmount: (amount: BigNumberish) => void
+  toggleFormType: (amount: BigNumber | null) => void
+  submit: (amount: BigNumber) => Promise<TransactionResponse>
+  setFeeAmount: () => Promise<void>
+  debounceLeadingSetFeeAmount: (fn?: () => Promise<void>, timeout?: number) => () => void
+}
+
+export const WrapFormContext = createContext<WrapFormProviderContext>({} as WrapFormProviderContext)
diff --git a/src/providers/WrapFormProvider.tsx b/src/providers/WrapFormProvider.tsx
index 3dd3b2f..f1fc4d5 100644
--- a/src/providers/WrapFormProvider.tsx
+++ b/src/providers/WrapFormProvider.tsx
@@ -1,25 +1,10 @@
-import { createContext, FC, PropsWithChildren, useState } from 'react'
-import { BigNumber, BigNumberish, utils } from 'ethers'
+import { FC, PropsWithChildren, useState } from 'react'
+import { BigNumber, BigNumberish } from 'ethers'
 import { TransactionResponse } from '@ethersproject/abstract-provider'
 import { useWeb3 } from '../hooks/useWeb3'
 import { WrapFormType } from '../utils/types'
-
-interface WrapFormProviderState {
-  isLoading: boolean
-  amount: BigNumber | null
-  formType: WrapFormType
-  balance: BigNumber
-  wRoseBalance: BigNumber
-}
-
-interface WrapFormProviderContext {
-  readonly state: WrapFormProviderState
-  init: () => void
-  setAmount: (amount: BigNumberish) => void
-  toggleFormType: (amount: BigNumber | null) => void
-  submit: (amount: BigNumber) => Promise<TransactionResponse>
-  getFeeAmount: () => BigNumber
-}
+import { MAX_GAS_LIMIT } from '../constants/config'
+import { WrapFormProviderContext, WrapFormProviderState, WrapFormContext } from './WrapFormContext'
 
 const wrapFormProviderInitialState: WrapFormProviderState = {
   isLoading: false,
@@ -27,10 +12,10 @@ const wrapFormProviderInitialState: WrapFormProviderState = {
   formType: WrapFormType.UNWRAP,
   balance: BigNumber.from(0),
   wRoseBalance: BigNumber.from(0),
+  estimatedFee: BigNumber.from(0),
+  estimatedGasPrice: BigNumber.from(0),
 }
 
-export const WrapFormContext = createContext<WrapFormProviderContext>({} as WrapFormProviderContext)
-
 export const WrapFormContextProvider: FC<PropsWithChildren> = ({ children }) => {
   const {
     state: { isConnected },
@@ -38,6 +23,7 @@ export const WrapFormContextProvider: FC<PropsWithChildren> = ({ children }) =>
     getBalanceOfWROSE,
     wrap,
     unwrap,
+    getGasPrice,
   } = useWeb3()
   const [state, setState] = useState<WrapFormProviderState>({
     ...wrapFormProviderInitialState,
@@ -83,19 +69,47 @@ export const WrapFormContextProvider: FC<PropsWithChildren> = ({ children }) =>
     }
   }
 
-  const getFeeAmount = () => {
-    return utils.parseUnits('0.01', 'ether')
+  const setFeeAmount = async () => {
+    const estimatedGasPrice = await getGasPrice()
+    const estimatedFee = estimatedGasPrice.mul(MAX_GAS_LIMIT)
+
+    setState(prevState => ({
+      ...prevState,
+      estimatedGasPrice,
+      estimatedFee,
+    }))
+  }
+
+  /**
+   * Prevent spamming of fee estimation calculations
+   * @param fn
+   * @param timeout
+   */
+  const debounceLeadingSetFeeAmount = (fn = setFeeAmount, timeout = 8000) => {
+    let id: ReturnType<typeof setTimeout> | null = null
+    return () => {
+      if (!id) {
+        fn()
+      }
+
+      if (id) {
+        clearTimeout(id)
+      }
+      id = setTimeout(() => {
+        id = null
+      }, timeout)
+    }
   }
 
-  const toggleFormType = (amount: BigNumber | null) => {
-    const { balance, wRoseBalance, formType } = state
+  const toggleFormType = (amount: BigNumber | null): void => {
+    const { balance, wRoseBalance, formType, estimatedFee } = state
 
     const toggledFormType = formType === WrapFormType.WRAP ? WrapFormType.UNWRAP : WrapFormType.WRAP
 
     let maxAmount = amount
 
     if (toggledFormType === WrapFormType.WRAP && amount?.gt(balance)) {
-      maxAmount = balance.sub(getFeeAmount())
+      maxAmount = balance.sub(estimatedFee)
     } else if (toggledFormType === WrapFormType.UNWRAP && amount?.gt(wRoseBalance)) {
       maxAmount = wRoseBalance
     }
@@ -114,18 +128,18 @@ export const WrapFormContextProvider: FC<PropsWithChildren> = ({ children }) =>
 
     _setIsLoading(true)
 
-    const { formType, balance, wRoseBalance } = state
+    const { formType, balance, wRoseBalance, estimatedFee, estimatedGasPrice } = state
 
     let receipt: TransactionResponse | null = null
 
     if (formType === WrapFormType.WRAP) {
-      if (amount.gt(balance.sub(getFeeAmount()))) {
+      if (amount.gt(balance.sub(estimatedFee))) {
         _setIsLoading(false)
         return Promise.reject(new Error('Insufficient balance'))
       }
 
       try {
-        receipt = await wrap(amount.toString())
+        receipt = await wrap(amount.toString(), estimatedGasPrice)
       } catch (ex) {
         _setIsLoading(false)
         throw ex
@@ -137,7 +151,7 @@ export const WrapFormContextProvider: FC<PropsWithChildren> = ({ children }) =>
       }
 
       try {
-        receipt = await unwrap(amount.toString())
+        receipt = await unwrap(amount.toString(), estimatedGasPrice)
       } catch (ex) {
         _setIsLoading(false)
         throw ex
@@ -154,7 +168,8 @@ export const WrapFormContextProvider: FC<PropsWithChildren> = ({ children }) =>
   const providerState: WrapFormProviderContext = {
     state,
     init,
-    getFeeAmount,
+    setFeeAmount,
+    debounceLeadingSetFeeAmount,
     setAmount,
     toggleFormType,
     submit,
diff --git a/src/utils/number.utils.ts b/src/utils/number.utils.ts
index c2f7f5b..7ffebde 100644
--- a/src/utils/number.utils.ts
+++ b/src/utils/number.utils.ts
@@ -1,10 +1,19 @@
-import { BigNumber } from 'ethers'
+import { BigNumber, utils } from 'ethers'
 
 export abstract class NumberUtils {
   static getPercentageAmount(amount: BigNumber, percentage: BigNumber) {
     return amount.mul(percentage).div(100)
   }
 
+  /**
+   * Helper to round eth amount to 4 decimals
+   * @param amount
+   */
+  static getTruncatedAmount(amount: BigNumber) {
+    const remainder = amount.mod(1e14)
+    return utils.formatEther(amount.sub(remainder))
+  }
+
   // Compatible with https://github.com/MetaMask/metamask-extension/blob/v10.7.0/ui/helpers/utils/icon-factory.js#L84-L88
   static jsNumberForAddress(address: string) {
     const addr = address.slice(2, 10)