Merge branch 'master' into dong-ha/acx-1584-deploy-spokepoolverifiers…

…-via-create2

package.json

@@ -16,14 +16,16 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@google-cloud/logging": "^10.1.1",
     "@reach/dialog": "^0.16.2",
+    "@safe-global/safe-apps-provider": "^0.18.0",
+    "@safe-global/safe-apps-sdk": "^8.1.0",
     "@sentry/react": "^7.37.2",
     "@uma/sdk": "^0.22.2",
-    "@web3-onboard/coinbase": "^2.2.4",
-    "@web3-onboard/core": "^2.20.4",
-    "@web3-onboard/gnosis": "^2.1.10",
-    "@web3-onboard/injected-wallets": "^2.10.2",
-    "@web3-onboard/react": "^2.8.9",
-    "@web3-onboard/walletconnect": "^2.4.1",
+    "@web3-onboard/coinbase": "^2.2.5",
+    "@web3-onboard/core": "^2.21.2",
+    "@web3-onboard/gnosis": "^2.2.0",
+    "@web3-onboard/injected-wallets": "^2.10.6",
+    "@web3-onboard/react": "^2.8.13",
+    "@web3-onboard/walletconnect": "^2.4.6",
     "axios": "^0.27.2",
     "bnc-notify": "^1.9.8",
     "copy-to-clipboard": "^3.3.3",
@@ -50,7 +52,7 @@
   },
   "scripts": {
     "start": "export REACT_APP_GIT_COMMIT_HASH=$(git rev-parse HEAD) && vite",
-    "dev": "export REACT_APP_GIT_COMMIT_HASH=$(git rev-parse HEAD) && vite --port $PORT",
+    "dev": "export REACT_APP_GIT_COMMIT_HASH=$(git rev-parse HEAD) && vite --port $PORT --host",
     "build": "export REACT_APP_GIT_COMMIT_HASH=$(git rev-parse HEAD) && tsc && vite build",
     "analyze": "yarn build --stats && webpack-bundle-analyzer build/bundle-stats.json -m server -r build/bundle-stats.html",
     "test": "export REACT_APP_GIT_COMMIT_HASH=$(git rev-parse HEAD) && jest --env jsdom src",

src/components/index.ts

@@ -1,5 +1,4 @@
 export { default as GlobalStyles } from "./GlobalStyles";
-export { default as Layout } from "./Layout";
 export { default as Header } from "./Header";
 export { default as Dialog } from "./Dialog";
 export { default as SuperHeader } from "./SuperHeader";

src/data/routes_1_0xc186fA914353c44b2E33eBE05f21846F1048bEda.json

@@ -359,6 +359,15 @@
       "isNative": false,
       "l1TokenAddress": "0x6B175474E89094C44Da98b954EedeAC495271d0F"
     },
+    {
+      "fromChain": 1,
+      "toChain": 8453,
+      "fromTokenAddress": "0xba100000625a3754423978a60c9317c58a424e3D",
+      "fromSpokeAddress": "0x5c7BCd6E7De5423a257D81B442095A1a6ced35C5",
+      "fromTokenSymbol": "BAL",
+      "isNative": false,
+      "l1TokenAddress": "0xba100000625a3754423978a60c9317c58a424e3D"
+    },
     {
       "fromChain": 10,
       "toChain": 1,
@@ -710,6 +719,15 @@
       "isNative": false,
       "l1TokenAddress": "0x6B175474E89094C44Da98b954EedeAC495271d0F"
     },
+    {
+      "fromChain": 10,
+      "toChain": 8453,
+      "fromTokenAddress": "0xFE8B128bA8C78aabC59d4c64cEE7fF28e9379921",
+      "fromSpokeAddress": "0x6f26Bf09B1C792e3228e5467807a900A503c0281",
+      "fromTokenSymbol": "BAL",
+      "isNative": false,
+      "l1TokenAddress": "0xba100000625a3754423978a60c9317c58a424e3D"
+    },
     {
       "fromChain": 137,
       "toChain": 1,
@@ -1007,6 +1025,15 @@
       "isNative": false,
       "l1TokenAddress": "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"
     },
+    {
+      "fromChain": 137,
+      "toChain": 8453,
+      "fromTokenAddress": "0x9a71012B13CA4d3D0Cdc72A177DF3ef03b0E76A3",
+      "fromSpokeAddress": "0x9295ee1d8C5b022Be115A2AD3c30C72E34e7F096",
+      "fromTokenSymbol": "BAL",
+      "isNative": false,
+      "l1TokenAddress": "0xba100000625a3754423978a60c9317c58a424e3D"
+    },
     {
       "fromChain": 42161,
       "toChain": 1,
@@ -1331,6 +1358,15 @@
       "isNative": false,
       "l1TokenAddress": "0x6B175474E89094C44Da98b954EedeAC495271d0F"
     },
+    {
+      "fromChain": 42161,
+      "toChain": 8453,
+      "fromTokenAddress": "0x040d1EdC9569d4Bab2D15287Dc5A4F10F56a56B8",
+      "fromSpokeAddress": "0xe35e9842fceaCA96570B734083f4a58e8F7C5f2A",
+      "fromTokenSymbol": "BAL",
+      "isNative": false,
+      "l1TokenAddress": "0xba100000625a3754423978a60c9317c58a424e3D"
+    },
     {
       "fromChain": 324,
       "toChain": 1,
@@ -1701,6 +1737,42 @@
       "fromTokenSymbol": "ETH",
       "isNative": true,
       "l1TokenAddress": "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2"
+    },
+    {
+      "fromChain": 8453,
+      "toChain": 1,
+      "fromTokenAddress": "0x4158734D47Fc9692176B5085E0F52ee0Da5d47F1",
+      "fromSpokeAddress": "0x09aea4b2242abC8bb4BB78D537A67a245A7bEC64",
+      "fromTokenSymbol": "BAL",
+      "isNative": false,
+      "l1TokenAddress": "0xba100000625a3754423978a60c9317c58a424e3D"
+    },
+    {
+      "fromChain": 8453,
+      "toChain": 10,
+      "fromTokenAddress": "0x4158734D47Fc9692176B5085E0F52ee0Da5d47F1",
+      "fromSpokeAddress": "0x09aea4b2242abC8bb4BB78D537A67a245A7bEC64",
+      "fromTokenSymbol": "BAL",
+      "isNative": false,
+      "l1TokenAddress": "0xba100000625a3754423978a60c9317c58a424e3D"
+    },
+    {
+      "fromChain": 8453,
+      "toChain": 42161,
+      "fromTokenAddress": "0x4158734D47Fc9692176B5085E0F52ee0Da5d47F1",
+      "fromSpokeAddress": "0x09aea4b2242abC8bb4BB78D537A67a245A7bEC64",
+      "fromTokenSymbol": "BAL",
+      "isNative": false,
+      "l1TokenAddress": "0xba100000625a3754423978a60c9317c58a424e3D"
+    },
+    {
+      "fromChain": 8453,
+      "toChain": 137,
+      "fromTokenAddress": "0x4158734D47Fc9692176B5085E0F52ee0Da5d47F1",
+      "fromSpokeAddress": "0x09aea4b2242abC8bb4BB78D537A67a245A7bEC64",
+      "fromTokenSymbol": "BAL",
+      "isNative": false,
+      "l1TokenAddress": "0xba100000625a3754423978a60c9317c58a424e3D"
     }
   ],
   "pools": [

src/onboard-override.css

@@ -1,15 +1,8 @@
-
 /* Override root variables to style the Onboard modal */
 :root {
-  --onboard-connect-header-background: #34353b;
-  --onboard-connect-header-color: #e0f3ff;
-  --onboard-connect-sidebar-color: #e0f3ff;
-  --onboard-connect-sidebar-background: #2d2e33;
-  --onboard-modal-background: #34353b;
-  --onboard-wallet-button-background: var(--color-primary);
-  --onboard-wallet-app-icon-border-color: none;
-  --onboard-main-scroll-container-background: #34353b;
-  --onboard-close-button-color:#2d2e33;
-  --onboard-close-button-background:var(--color-primary);
-  --onboard-font-family-normal: "Barlow";
+  --w3o-background-color: #2e2e34;
+  --w3o-foreground-color: #34353b;
+  --w3o-text-color: #e0f3ff;
+  --w3o-border-color: #3b3d43;
+  --w3o-font-family: Barlow;
 }

src/utils/amplitude.ts

@@ -248,11 +248,11 @@ export function generateTransferQuote(
   tokenInfo: TokenInfo,
   fromChainInfo: ChainInfo,
   toChainInfo: ChainInfo,
-  toAddress: string,
-  account: string,
   tokenPrice: BigNumber,
   estimatedTimeToRelayObject: ConfirmationDepositTimeType,
-  amount: BigNumber
+  amount: BigNumber,
+  account?: string,
+  toAddress?: string
 ): TransferQuoteReceivedProperties {
   // Create a function that converts a wei amount into a formatted token amount
   const formatTokens = (wei: BigNumber) =>
@@ -285,20 +285,20 @@ export function generateTransferQuote(
     fromChainId: selectedRoute.fromChain.toString(),
     fromChainName: fromChainInfo.name,
     isAmountTooLow: fees.isAmountTooLow,
-    isSenderEqRecipient: toAddress === account,
+    isSenderEqRecipient: account && toAddress ? toAddress === account : false,
     lpFeePct: formatWeiEtherPct(fees.lpFee.pct),
     lpFeeTotal: formatTokens(fees.lpFee.total),
     lpFeeTotalUsd: usdEquivalentString(fees.lpFee.total),
     quoteLatencyMilliseconds: fees.quoteLatency.toString(),
     quoteTimestamp: String(fees.quoteTimestampInMs ?? Date.now()),
-    recipient: toAddress,
+    recipient: toAddress || "not connected",
     relayFeePct: formatWeiEtherPct(fees.relayerFee.pct),
     relayFeeTotal: formatTokens(fees.relayerFee.total),
     relayFeeTotalUsd: usdEquivalentString(fees.relayerFee.total),
     relayGasFeePct: formatWeiEtherPct(fees.relayerGasFee.pct),
     relayGasFeeTotal: formatTokens(fees.relayerGasFee.total),
     relayGasFeeTotalUsd: usdEquivalentString(fees.relayerGasFee.total),
-    sender: account,
+    sender: account || "not connected",
     routeChainIdFromTo: `${fromChainInfo.chainId}-${toChainInfo.chainId}`,
     routeChainNameFromTo: `${fromChainInfo.name}-${toChainInfo.name}`,
     toAmount: formatTokens(amount.sub(totalBridgeFee)),

src/utils/constants.ts

@@ -126,7 +126,7 @@ export type ChainInfoList = ChainInfo[];
 export type ChainInfoTable = Record<number, ChainInfo>;
 
 export const defaultBlockPollingInterval =
-  Number(process.env.REACT_APP_DEFAULT_BLOCK_POLLING_INTERVAL_S || 30) * 1000;
+  Number(process.env.REACT_APP_DEFAULT_BLOCK_POLLING_INTERVAL_S || 15) * 1000;
 export const hubPoolChainId = Number(
   process.env.REACT_APP_HUBPOOL_CHAINID || 1
 );
@@ -193,7 +193,7 @@ export const chainInfoList: ChainInfoList = [
       "https://explorer.zksync.io"
     ),
     nativeCurrencySymbol: "ETH",
-    pollingInterval: defaultBlockPollingInterval,
+    pollingInterval: 10_000,
   },
   {
     name: "Base",
@@ -204,7 +204,7 @@ export const chainInfoList: ChainInfoList = [
     explorerUrl: "https://basescan.org",
     constructExplorerLink: defaultConstructExplorerLink("https://basescan.org"),
     nativeCurrencySymbol: "ETH",
-    pollingInterval: defaultBlockPollingInterval,
+    pollingInterval: 10_000,
   },
   // testnets
   {

src/utils/onboard.ts

@@ -10,7 +10,7 @@ import {
   chainInfoList,
   providerUrlsTable,
 } from "utils";
-import logo from "assets/across-logo-v2.svg";
+import logo from "assets/across.svg";
 
 const injected = injectedModule();
 const gnosis = gnosisModule();

src/views/Bridge/hooks/useBridge.ts

@@ -1,8 +1,9 @@
-import { BigNumber } from "ethers";
 import { useCallback, useEffect, useState } from "react";
+import { utils } from "@across-protocol/sdk-v2";
 
-import { useConnection, useIsWrongNetwork } from "hooks";
+import { useConnection, useIsWrongNetwork, useAmplitude } from "hooks";
 import useReferrer from "hooks/useReferrer";
+import { ampli } from "ampli";
 
 import { useBridgeAction } from "./useBridgeAction";
 import { useBridgeDepositTracking } from "./useBridgeDepositTracking";
@@ -13,11 +14,15 @@ import { useAmountInput, useValidAmount } from "./useAmountInput";
 
 export function useBridge() {
   const [shouldUpdateQuote, setShouldUpdateQuote] = useState(true);
+  const [usedTransferQuote, setUsedTransferQuote] =
+    useState<ReturnType<typeof useTransferQuote>["data"]>();
 
   const { isConnected, chainId: walletChainId, account } = useConnection();
 
   const { referrer } = useReferrer();
 
+  const { addToAmpliQueue } = useAmplitude();
+
   const {
     selectedRoute,
     handleQuickSwap,
@@ -46,21 +51,21 @@ export function useBridge() {
 
   const { toAccount, setCustomToAddress } = useToAccount(selectedRoute.toChain);
 
+  const { data: transferQuote, isLoading: isQuoteLoading } = useTransferQuote(
+    selectedRoute,
+    parsedAmount?.gt(0) ? parsedAmount : utils.bnZero,
+    account,
+    toAccount?.address
+  );
+
   const {
-    estimatedTime,
     quote,
-    initialQuoteTime,
+    quotePriceUSD,
     quotedFees,
     quotedLimits,
-    quotePriceUSD,
-    isQuoteLoading,
-  } = useTransferQuote(
-    selectedRoute,
-    parsedAmount?.gt(0) ? parsedAmount : BigNumber.from(0),
-    account,
-    toAccount?.address,
-    shouldUpdateQuote
-  );
+    initialQuoteTime,
+    estimatedTime,
+  } = usedTransferQuote || {};
 
   const { amountValidationError, isAmountValid } = useValidAmount(
     parsedAmount,
@@ -102,6 +107,18 @@ export function useBridge() {
     checkWrongNetworkHandler();
   }, [selectedRoute.fromChain, isConnected, checkWrongNetworkHandler]);
 
+  useEffect(() => {
+    if (shouldUpdateQuote && !isQuoteLoading) {
+      setUsedTransferQuote(transferQuote);
+
+      if (transferQuote?.quote) {
+        addToAmpliQueue(() => {
+          ampli.transferQuoteReceived(transferQuote?.quote);
+        });
+      }
+    }
+  }, [transferQuote, shouldUpdateQuote, isQuoteLoading, addToAmpliQueue]);
+
   useEffect(() => {
     if (
       shouldUpdateQuote &&