feat: EIP1559 style gas price estimation

package.json

@@ -17,9 +17,9 @@
         "eslint": "eslint 'ts/**/*.{ts,tsx}'",
         "lint": "tslint --format stylish --project . 'ts/**/*.ts' 'ts/**/*.tsx'",
         "fix": "yarn lint --fix",
-        "pre_push": "yarn lint:prettier && yarn lint && yarn test",
+        "pre_push": "yarn typecheck && yarn lint:prettier && yarn lint && yarn test",
         "update:tools": "aws s3 sync --delete s3://docs-markdown/ mdx/tools/ --profile $(npm config get awscli_profile)",
-        "dev": "npm run update:tools && node --max-old-space-size=16384 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --content-base public --https",
+        "dev": "npm run update:tools && node --max-old-space-size=16384 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --content-base public",
         "deploy_dogfood": "npm run update:tools && yarn index_docs --environment dogfood && npm run build:prod && aws s3 sync ./public/. s3://dogfood.0xproject.com --profile $(npm config get awscli_profile) --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers && ./cdn-cache-clear.sh dogfood",
         "deploy_staging": "npm run update:tools && yarn index_docs --environment staging && npm run build:prod && aws s3 sync ./public/. s3://staging-0xproject --profile $(npm config get awscli_profile) --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
         "deploy_live": "npm run update:tools && yarn index_docs --environment production && DEPLOY_ROLLBAR_SOURCEMAPS=true npm run build:prod && aws s3 sync ./public/. s3://0x.org --profile $(npm config get awscli_profile) --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers --exclude *.map.js && ./cdn-cache-clear.sh live",
@@ -36,13 +36,13 @@
     "dependencies": {
         "@0x/asset-buyer": "6.2.0-beta.3",
         "@0x/contract-addresses": "^4.1.0",
-        "@0x/contract-wrappers": "^13.2.0",
+        "@0x/contract-wrappers": "^13.18.0",
         "@0x/contracts-dev-utils": "^1.0.2",
-        "@0x/contracts-treasury": "^1.0.2",
-        "@0x/json-schemas": "^5.0.2",
+        "@0x/contracts-treasury": "^1.4.2",
+        "@0x/json-schemas": "^6.4.0",
         "@0x/order-utils": "^10.0.1",
-        "@0x/subproviders": "^6.0.2",
-        "@0x/utils": "^5.1.1",
+        "@0x/subproviders": "^6.6.1",
+        "@0x/utils": "^6.4.4",
         "@0x/web3-wrapper": "^7.0.2",
         "@reach/dialog": "^0.11.2",
         "@reach/tabs": "^0.1.6",
@@ -70,7 +70,7 @@
         "deep-equal": "^1.0.1",
         "dotenv": "^10.0.0",
         "dotenv-webpack": "^7.0.3",
-        "ethereum-types": "^3.0.0",
+        "ethereum-types": "^3.6.0",
         "ethereumjs-util": "^5.1.1",
         "ethers": "^5.0.24",
         "find-versions": "^2.0.0",
@@ -125,7 +125,7 @@
         "sass-loader": "^7.1.0",
         "semver": "5.5.0",
         "semver-sort": "0.0.4",
-        "styled-components": "^5.0.0",
+        "styled-components": "^5.3.1",
         "thenby": "^1.2.3",
         "truffle-contract": "2.0.1",
         "urql": "^2.0.4",
@@ -169,7 +169,7 @@
         "@types/react-syntax-highlighter": "^10.2.1",
         "@types/react-transition-group": "^4.2.0",
         "@types/redux": "^3.6.0",
-        "@types/styled-components": "4.1.1",
+        "@types/styled-components": "^5.1.15",
         "@types/valid-url": "^1.0.2",
         "@types/web3-provider-engine": "^14.0.0",
         "@types/yargs": "^11.0.0",
@@ -206,7 +206,7 @@
         "ts-node": "^8.3.0",
         "tslint": "5.11.0",
         "tslint-config-0xproject": "^0.0.2",
-        "typescript": "^3.7.4",
+        "typescript": "^3.8.3",
         "unist-util-find-after": "^2.0.4",
         "unist-util-modify-children": "^1.1.4",
         "unist-util-select": "^2.0.2",

ts/blockchain.ts

@@ -622,7 +622,7 @@ export class Blockchain {
         const provider = this._contractWrappers.getProvider();
         const web3Wrapper = new Web3Wrapper(provider);
         const exchangeAbi = this._contractWrappers.exchange.abi;
-        web3Wrapper.abiDecoder.addABI(exchangeAbi);
+        web3Wrapper.abiDecoder.addABI(exchangeAbi as any);
         const receipt = await web3Wrapper.awaitTransactionSuccessAsync(txHash);
         return receipt;
     }
@@ -935,9 +935,9 @@ export class Blockchain {
     }
     private async _updateDefaultGasPriceAsync(): Promise<void> {
         try {
-            const localStorageSpeed = localStorage.getItem('gas-speed');
-            const { gasPriceInWei } = await backendClient.getGasInfoAsync(localStorageSpeed || 'standard');
-            this._defaultGasPrice = gasPriceInWei;
+            const { price } = await backendClient.getGasInfoAsync('standard');
+            // HACK: this is not supporting EIP1559 but this file is legacy and not used anywhere
+            this._defaultGasPrice = new BigNumber(price);
         } catch (err) {
             return;
         }

ts/hooks/use_allowance.ts

@@ -40,8 +40,8 @@ export const useAllowance = (): UseAllowanceHookResult => {
         setIsStarted(true);
         const ownerAddress = (providerState.account as AccountReady).address;
 
-        // const localStorageSpeed = localStorage.getItem('gas-speed');
-        const gasInfo = await backendClient.getGasInfoAsync('instant');
+        const localStorageSpeed = localStorage.getItem('gas-speed');
+        const gasInfo = await backendClient.getGasInfoAsync(localStorageSpeed);
 
         const contractAddresses = getContractAddressesForChainOrThrow(networkId);
         const erc20ProxyAddress = contractAddresses.erc20Proxy;
@@ -56,7 +56,8 @@ export const useAllowance = (): UseAllowanceHookResult => {
                 .approve(erc20ProxyAddress, constants.UNLIMITED_ALLOWANCE_IN_BASE_UNITS)
                 .awaitTransactionSuccessAsync({
                     from: ownerAddress,
-                    gasPrice: gasInfo.gasPriceInWei,
+                    maxFeePerGas: gasInfo.maxFeePerGas,
+                    maxPriorityFeePerGas: gasInfo.maxPriorityFeePerGas,
                 });
 
             await txPromise.txHashPromise;

ts/hooks/use_stake.ts

@@ -118,11 +118,13 @@ export const useStake = (networkId: ChainId, providerState: ProviderState): UseS
         async (data: string[]) => {
             setLoadingState(TransactionLoadingState.WaitingForSignature);
 
-            // const localStorageSpeed = localStorage.getItem('gas-speed');
-            const gasInfo = await backendClient.getGasInfoAsync('instant');
-            const txPromise = stakingProxyContract
-                .batchExecute(data)
-                .awaitTransactionSuccessAsync({ from: ownerAddress, gasPrice: gasInfo.gasPriceInWei });
+            const localStorageSpeed = localStorage.getItem('gas-speed');
+            const gasInfo = await backendClient.getGasInfoAsync(localStorageSpeed);
+            const txPromise = stakingProxyContract.batchExecute(data).awaitTransactionSuccessAsync({
+                from: ownerAddress,
+                maxFeePerGas: gasInfo.maxFeePerGas,
+                maxPriorityFeePerGas: gasInfo.maxPriorityFeePerGas,
+            });
 
             await txPromise.txHashPromise;
             setEstimatedTimeMs(gasInfo.estimatedTimeMs);
@@ -249,11 +251,14 @@ export const useStake = (networkId: ChainId, providerState: ProviderState): UseS
 
             setLoadingState(TransactionLoadingState.WaitingForSignature);
 
-            const gasInfo = await backendClient.getGasInfoAsync('instant');
+            const localStorageSpeed = localStorage.getItem('gas-speed');
+            const gasInfo = await backendClient.getGasInfoAsync(localStorageSpeed);
 
-            const txPromise = stakingContract
-                .unstake(zrxAmountBaseUnits)
-                .awaitTransactionSuccessAsync({ from: ownerAddress, gasPrice: gasInfo.gasPriceInWei });
+            const txPromise = stakingContract.unstake(zrxAmountBaseUnits).awaitTransactionSuccessAsync({
+                from: ownerAddress,
+                maxFeePerGas: gasInfo.maxFeePerGas,
+                maxPriorityFeePerGas: gasInfo.maxPriorityFeePerGas,
+            });
 
             await txPromise.txHashPromise;
             setEstimatedTimeMs(gasInfo.estimatedTimeMs);

ts/pages/governance/vote_form.tsx

@@ -274,16 +274,20 @@ class VoteFormComponent extends React.Component<Props> {
 
             const { votePreference } = this.state;
 
-            // const localStorageSpeed = localStorage.getItem('gas-speed');
-            const gasInfo = await backendClient.getGasInfoAsync('instant');
+            const localStorageSpeed = localStorage.getItem('gas-speed');
+            const gasInfo = await backendClient.getGasInfoAsync(localStorageSpeed);
 
             const txPromise = contract
                 .castVote(
                     proposalIdBigNumber,
                     votePreference === VoteValue.Yes,
                     operatedPools ? operatedPools.map((pool) => encodePoolId(parseInt(pool.poolId, 10))) : [],
                 )
-                .awaitTransactionSuccessAsync({ from: selectedAddress, gasPrice: gasInfo.gasPriceInWei });
+                .awaitTransactionSuccessAsync({
+                    from: selectedAddress,
+                    maxFeePerGas: gasInfo.maxFeePerGas,
+                    maxPriorityFeePerGas: gasInfo.maxPriorityFeePerGas,
+                });
             const txHash = await txPromise.txHashPromise;
             if (onVoted) {
                 this.setState({

ts/pages/mesh/mesh_stats.tsx

@@ -28,7 +28,7 @@ const fetchOrders = async () => fetchUtils.requestAsync(ordersBaseUrl, ordersPat
 export const MeshStats: React.FC = () => {
     const [meshFetchedSnapshot, setMeshSnapshot] = useState<{ meshNodes: MeshNodeMetaData[] }>();
     const [meshData, setMeshData] = useState<{ numActiveNodes: number; numEdges: number }>();
-    const [orders, setOrders] = useState();
+    const [orders, setOrders] = useState<{ total: number }>();
 
     const [nodeDetails, setNodeDetails] = useState<{ data?: MeshNodeMetaData; isVisible: boolean }>({
         data: undefined,

ts/style/theme.ts

@@ -27,13 +27,7 @@ export interface IThemeInterface {
 }
 
 // tslint:disable:no-unnecessary-type-assertion
-const {
-    default: styled,
-    css,
-    createGlobalStyle,
-    keyframes,
-    ThemeProvider,
-} = styledComponents as styledComponents.ThemedStyledComponentsModule<IThemeInterface>;
+const { default: styled, css, createGlobalStyle, keyframes, ThemeProvider } = styledComponents;
 // tslint:enable:no-unnecessary-type-assertion
 
 export { styled, css, createGlobalStyle, keyframes, ThemeProvider };

ts/types.ts

@@ -817,11 +817,17 @@ export interface WebsiteBackendTokenInfo {
     symbol: string;
 }
 
-export interface GasInfo {
-    gasPriceInWei: BigNumber;
-    estimatedTimeMs: number;
+export interface EIP1559GasInfo {
+    price: number;
+    maxPriorityFeePerGas: number;
+    maxFeePerGas: number;
+    baseFeePerGas: number;
 }
 
+export type GasInfo = EIP1559GasInfo & {
+    estimatedTimeMs: number;
+};
+
 export interface WebsiteBackendGasWaitTimeInfo {
     fastestWait: number;
     fastWait: number;

ts/utils/backend_client.ts

@@ -1,10 +1,10 @@
-import { BigNumber } from '@0x/utils';
 import * as _ from 'lodash';
 
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import { ZeroExProvider } from 'ethereum-types';
 
 import {
+    EIP1559GasInfo,
     GasInfo,
     MailchimpSubscriberInfo,
     WebsiteBackendCFLMetricsData,
@@ -17,7 +17,6 @@ import {
     WebsiteBackendTokenInfo,
     WebsiteBackendTradingPairs,
 } from 'ts/types';
-import { constants } from 'ts/utils/constants';
 import { fetchUtils } from 'ts/utils/fetch_utils';
 import { utils } from 'ts/utils/utils';
 
@@ -41,11 +40,18 @@ export interface GasInfoSelection {
     fast: number;
 }
 
-const speedToSelectionMap: { [key: string]: string } = {
-    standard: 'average',
-    fast: 'fast',
-    instant: 'fastest',
-};
+interface GasApiSingleSourceResponse {
+    result: {
+        source: string;
+        timestamp: number;
+        instant: EIP1559GasInfo;
+        fast: EIP1559GasInfo;
+        standard: EIP1559GasInfo;
+        low: EIP1559GasInfo;
+    };
+}
+
+type GasSpeedSelectors = 'instant' | 'fast' | 'standard' | 'low';
 
 const speedToWaitTimeMap: { [key: string]: string } = {
     standard: 'avgWait',
@@ -200,28 +206,26 @@ export const backendClient = {
     },
 
     async getGasInfoAsync(speed?: string): Promise<GasInfo> {
-        // Median gas prices across 0x api gas oracles
-        // Defaulting to average/standard gas. Using eth gas station for time estimates
-        const gasApiPath = 'source/gas_now?output=eth_gas_station';
-        const gasInfoReq = fetchUtils.requestAsync(ZEROEX_GAS_API, gasApiPath);
+        const gasApiPath = 'v2/source/block_native';
+        const gasInfoReq: Promise<GasApiSingleSourceResponse> = fetchUtils.requestAsync(ZEROEX_GAS_API, gasApiPath);
         const speedInput = speed || 'standard';
 
-        const gasSpeed = speedToSelectionMap[speedInput];
-        const waitTime = speedToWaitTimeMap[speedInput];
         const gasWaitTimesReq = fetchUtils.requestAsync(utils.getBackendBaseUrl(), ETH_GAS_STATION_ENDPOINT);
 
-        const res: [WebsiteBackendGasInfo, WebsiteBackendGasWaitTimeInfo] = await Promise.all([
+        const [gasInfo, gasWaitTimes]: [GasApiSingleSourceResponse, WebsiteBackendGasWaitTimeInfo] = await Promise.all([
             gasInfoReq,
             gasWaitTimesReq,
         ]);
-        const gasInfo = res[0];
-        const gasWaitTimes = res[1];
-        // Eth Gas Station result is gwei * 10
-        const gasPriceInGwei = new BigNumber((gasInfo as any)[gasSpeed] / 10);
         // Time is in minutes
+        const waitTime = speedToWaitTimeMap[speedInput];
         const estimatedTimeMs = (gasWaitTimes as any)[waitTime] * 60 * 1000; // Minutes to MS
 
-        return { gasPriceInWei: gasPriceInGwei.multipliedBy(constants.GWEI_IN_WEI), estimatedTimeMs };
+        // Try to use user selected value, fall back to standard if no match
+        const gasPriceInfo = gasInfo.result[speedInput as GasSpeedSelectors]
+            ? gasInfo.result[speedInput as GasSpeedSelectors]
+            : gasInfo.result.standard;
+
+        return { ...gasPriceInfo, estimatedTimeMs };
     },
 
     async getGasInfoSelectionAsync(): Promise<GasInfoSelection> {

ts/utils/order_utils.ts

@@ -48,7 +48,7 @@ export const orderHashUtils = {
         // format, we only assert that we were indeed passed a string.
         assert.isString('orderHash', orderHash);
         const schemaValidator = new SchemaValidator();
-        const isValid = schemaValidator.validate(orderHash, schemas.orderHashSchema).valid;
+        const isValid = schemaValidator.isValid(orderHash, schemas.orderHashSchema);
         return isValid;
     },
 

webpack.config.js

@@ -147,25 +147,12 @@ module.exports = (_env, argv) => {
             disableHostCheck: true,
             // Fixes assertion error
             // Source: https://github.com/webpack/webpack-dev-server/issues/1491
-            https: {
-                spdy: {
-                    protocols: ['http/1.1'],
-                },
-            },
         },
     };
 
     if (isDevEnvironment) {
         config.mode = 'development';
         config.devtool = 'cheap-module-eval-source-map';
-        // SSL certs
-        if (fs.existsSync('./server.cert') && fs.existsSync('./server.key')) {
-            config.devServer.https = {
-                ...config.devServer.https,
-                key: fs.readFileSync('./server.key'),
-                cert: fs.readFileSync('./server.cert'),
-            };
-        }
     } else {
         config.mode = 'production';
         config.devtool = 'source-map';