fix: deprecate bnc-notify (#1226)

package.json

@@ -33,7 +33,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",
     "ethers": "5.7.2",
     "framer-motion": "^11.3.19",

src/hooks/index.ts

@@ -6,7 +6,6 @@ export * from "./useQueryParams";
 export * from "./useError";
 export * from "./useWindowSize";
 export * from "./useScrollPosition";
-export * from "./useNotify";
 export * from "./useCenteredInViewport";
 export * from "./useConnection";
 export * from "./useIsWrongNetwork";

src/hooks/useApprove.ts

@@ -14,7 +14,7 @@ import { useIsWrongNetwork } from "hooks";
 const config = getConfig();
 
 export function useApprove(requiredChainId = hubPoolChainId) {
-  const { account, signer, notify } = useConnection();
+  const { account, signer } = useConnection();
   const { isWrongNetwork, isWrongNetworkHandler } =
     useIsWrongNetwork(requiredChainId);
 
@@ -59,14 +59,14 @@ export function useApprove(requiredChainId = hubPoolChainId) {
         args.allowedContractAddress,
         0
       );
-      await waitOnTransaction(requiredChainId, zeroAmountApprovalTx, notify);
+      await waitOnTransaction(requiredChainId, zeroAmountApprovalTx);
     }
 
     const txResponse = await erc20.approve(
       args.allowedContractAddress,
       MAX_APPROVAL_AMOUNT
     );
-    await waitOnTransaction(requiredChainId, txResponse, notify);
+    await waitOnTransaction(requiredChainId, txResponse);
   };
 
   return useMutation({

src/hooks/useConnection.ts

@@ -10,13 +10,11 @@ export function useConnection() {
     isConnected,
     connect,
     disconnect,
-    notify,
     account,
     chainId,
     wallet,
     error,
     setChain,
-    setNotifyConfig,
     didAttemptAutoSelect,
   } = useOnboard();
 
@@ -29,8 +27,6 @@ export function useConnection() {
     provider,
     signer,
     isConnected,
-    notify,
-    setNotifyConfig,
     connect,
     disconnect,
     error,

src/hooks/useOnboard.tsx

@@ -10,7 +10,6 @@ import {
   UnsupportedChainIdError,
   isSupportedChainId,
   insideStorybookRuntime,
-  hubPoolChainId,
   trackIfWalletSelected,
   trackConnectWalletButtonClicked,
   trackDisconnectWalletButtonClicked,
@@ -31,7 +30,6 @@ import { Account } from "@web3-onboard/core/dist/types";
 import { useConnectWallet, useSetChain } from "@web3-onboard/react";
 import { Chain } from "@web3-onboard/common";
 import { ethers } from "ethers";
-import Notify, { API as NotifyAPI, ConfigOptions } from "bnc-notify";
 import {
   ampli,
   ConnectWalletButtonClickedProperties,
@@ -72,20 +70,12 @@ type OnboardContextValue = {
   isConnected: boolean;
   signer: ethers.providers.JsonRpcSigner | undefined;
   provider: ethers.providers.Web3Provider | null;
-  notify: NotifyAPI;
-  setNotifyConfig: (opts: ConfigOptions) => void;
   account: Account | null;
   chainId: ChainId;
   error?: Error;
   didAttemptAutoSelect: boolean;
 };
 
-const notify = Notify({
-  dappId: process.env.REACT_APP_PUBLIC_ONBOARD_API_KEY,
-  networkId: hubPoolChainId,
-  desktopPosition: "topRight",
-});
-
 export function useOnboardManager() {
   const [onboard, setOnboard] = useState<OnboardAPI | null>(null);
   const [provider, setProvider] =
@@ -250,8 +240,6 @@ export function useOnboardManager() {
     isConnected: !!connectedChain,
     signer,
     provider,
-    notify,
-    setNotifyConfig: (config: ConfigOptions) => notify.config(config),
     account,
     chainId: (Number(wallet?.chains[0].id) as ChainId) || 0,
     error,

src/utils/constants.ts

@@ -383,8 +383,6 @@ export function stringValueInArray(value: string, arr: string[]) {
 }
 export const maxRelayFee = 0.25; // 25%
 export const minRelayFee = 0.0001; // 0.01%
-// Chains where Blocknative Notify can be used. See https://docs.blocknative.com/notify#initialization
-export const supportedNotifyChainIds = [1, 3, 4, 5, 42, 56, 100, 137, 250];
 
 export const mockServerlessAPI =
   process.env.REACT_APP_MOCK_SERVERLESS === "true";

src/utils/notify.ts

@@ -1,81 +1,23 @@
-import { API as NotifyAPI } from "bnc-notify";
 import { ContractTransaction } from "ethers";
-import { getChainInfo, supportedNotifyChainIds, getProvider } from "utils";
-
-/**
- * Calls and waits on the Notify API to resolve the status of a TX
- * @param requiredChainId Notify supported chain id.
- * @param txHash The transaction hash to wait for
- * @param notify The BNC Notify API that is used to handle the UI visualization
- * @param timingBuffer An optional waiting time in milliseconds to wait to resolve this promise on a successful tx confirmation. (Default: 5000ms)
- * @param ignoreErrors An optional parameter to ignore tx failure and return successful
- * @returns Nothing.
- */
-export const notificationEmitter = async (
-  requiredChainId: number,
-  txHash: string,
-  notify: NotifyAPI,
-  timingBuffer?: number,
-  ignoreErrors?: boolean
-): Promise<void> => {
-  return new Promise<void>((resolve, reject) => {
-    notify.config({
-      networkId: requiredChainId,
-    });
-
-    const { emitter } = notify.hash(txHash);
-    emitter.on("all", () => {
-      return {
-        link: getChainInfo(requiredChainId).constructExplorerLink(txHash),
-      };
-    });
-    emitter.on("txConfirmed", () => {
-      notify.unsubscribe(txHash);
-      setTimeout(() => {
-        resolve();
-      }, timingBuffer ?? 0);
-    });
-    emitter.on("txFailed", () => {
-      notify.unsubscribe(txHash);
-      if (ignoreErrors) {
-        resolve();
-      } else {
-        reject();
-      }
-    });
-  });
-};
+import { getProvider } from "utils";
 
 /**
  * Calls and waits on the Notify API to resolve the status of a TX if the chain is supported by Onboard
  * @param tx The transaction to wait for
  * @param notify The BNC Notify API that is used to handle the UI visualization
- * @param timingBuffer An optional waiting time in milliseconds to wait to resolve this promise on a successful tx confirmation in Notify (Default: 5000ms)
  * @param ignoreErrors An optional parameter to ignore tx failure and return successful
  **/
 export const waitOnTransaction = async (
   requiredChainId: number,
   tx: ContractTransaction,
-  notify: NotifyAPI,
-  timingBuffer?: number,
   ignoreErrors?: boolean
 ): Promise<void> => {
-  if (supportedNotifyChainIds.includes(requiredChainId)) {
-    await notificationEmitter(
-      requiredChainId,
-      tx.hash,
-      notify,
-      timingBuffer,
-      ignoreErrors
-    );
-  } else {
-    try {
-      const provider = getProvider(requiredChainId);
-      await provider.waitForTransaction(tx.hash);
-    } catch (e) {
-      if (!ignoreErrors) {
-        throw e;
-      }
+  try {
+    const provider = getProvider(requiredChainId);
+    await provider.waitForTransaction(tx.hash);
+  } catch (e) {
+    if (!ignoreErrors) {
+      throw e;
     }
   }
 };

src/utils/onboard.ts

@@ -52,8 +52,5 @@ export function onboardInit() {
         enabled: false,
       },
     },
-    notify: {
-      enabled: false,
-    },
   });
 }

src/views/LiquidityPool/hooks/useLiquidityAction.ts

@@ -18,7 +18,7 @@ import { parseAndValidateAmountInput } from "../utils";
 const config = getConfig();
 
 export function useAddLiquidity(tokenSymbol?: string, l1TokenAddress?: string) {
-  const { account, signer, notify } = useConnection();
+  const { account, signer } = useConnection();
   const { isWrongNetwork, isWrongNetworkHandler } = useIsWrongNetwork();
 
   const userLiquidityPoolQuery = useUserLiquidityPool(tokenSymbol);
@@ -68,7 +68,7 @@ export function useAddLiquidity(tokenSymbol?: string, l1TokenAddress?: string) {
         value: isEth ? parsedAndValidAmount : undefined,
       }
     );
-    await waitOnTransaction(hubPoolChainId, txResponse, notify);
+    await waitOnTransaction(hubPoolChainId, txResponse);
   };
 
   return useMutation({
@@ -85,7 +85,7 @@ export function useRemoveLiquidity(
   tokenSymbol?: string,
   tokenAddress?: string
 ) {
-  const { account, signer, notify } = useConnection();
+  const { account, signer } = useConnection();
   const { isWrongNetwork, isWrongNetworkHandler } = useIsWrongNetwork();
 
   const userLiquidityPoolQuery = useUserLiquidityPool(tokenSymbol);
@@ -127,7 +127,7 @@ export function useRemoveLiquidity(
       amountToRemoveInLP,
       isEth
     );
-    await waitOnTransaction(hubPoolChainId, txResponse, notify);
+    await waitOnTransaction(hubPoolChainId, txResponse);
   };
 
   return useMutation({

src/views/RewardsProgram/hooks/useClaimReferralRewards.ts

@@ -14,7 +14,7 @@ import { useUnclaimedProofs } from "hooks/useUnclaimedProofs";
 const config = getConfig();
 
 export function useClaimRewards(program: rewardProgramTypes) {
-  const { account, signer, notify } = useConnection();
+  const { account, signer } = useConnection();
   const baseChainId =
     program === "arb-rebates" ? ChainId.ARBITRUM : ChainId.OPTIMISM;
   const { isWrongNetwork, isWrongNetworkHandler } =
@@ -39,7 +39,7 @@ export function useClaimRewards(program: rewardProgramTypes) {
         account,
       }))
     );
-    await waitOnTransaction(hubPoolChainId, claimMultiTx, notify);
+    await waitOnTransaction(hubPoolChainId, claimMultiTx);
   };
   return useMutation({
     mutationFn: handleClaim,

src/views/Staking/hooks/useClaimStakeRewardAction.ts

@@ -1,18 +1,17 @@
-import { API } from "bnc-notify";
 import { Signer } from "ethers";
 import { useConnection, useStakingPool } from "hooks";
 import { useMutation } from "@tanstack/react-query";
 import { getConfig, hubPoolChainId, waitOnTransaction } from "utils";
 import { sendWithPaddedGas } from "utils/transactions";
 
 export function useClaimStakeRewardAction(tokenAddress?: string) {
-  const { signer, notify } = useConnection();
+  const { signer } = useConnection();
   const stakingPoolQuery = useStakingPool(tokenAddress);
 
   const claimStakeRewardFn = async () => {
     if (stakingPoolQuery.data && signer && tokenAddress) {
       const { lpTokenAddress } = stakingPoolQuery.data;
-      await performClaimingAction(lpTokenAddress, signer, notify);
+      await performClaimingAction(lpTokenAddress, signer);
     }
   };
   return useMutation({
@@ -25,13 +24,11 @@ export function useClaimStakeRewardAction(tokenAddress?: string) {
  * A function builder which returns a closure of a function that can be used to claim rewards with the AcceleratingDistributor contract
  * @param lpTokenAddress The ERC20 address of the LP Token
  * @param signer A valid ethers signer
- * @param notify A BNC notification API that will be used to visually notify the user of a successful/rejected transaction
  * @returns A closure function that is designed to stake or unstake a given LP token with the AcceleratingDistributor contract
  */
 const performClaimingAction = async (
   lpTokenAddress: string,
-  signer: Signer,
-  notify: API
+  signer: Signer
 ) => {
   // Instantiate a contract instance of the AcceleratingDistributor with the user's signer
   const acceleratingDistributor =
@@ -42,8 +39,7 @@ const performClaimingAction = async (
       acceleratingDistributor,
       "withdrawReward"
     )(lpTokenAddress);
-    // Send this to onboard's notify API to track the TX
-    await waitOnTransaction(hubPoolChainId, resultingTx, notify, 0, true);
+    await waitOnTransaction(hubPoolChainId, resultingTx, true);
   } catch (_e) {
     // We currently don't handle the error case other than to exit gracefully.
   }