utils#PROVIDERS TypeScript Examples

// TODO: put this back into global state. Wasnt able to get it working.
export function useL2Block() {
  const { currentlySelectedFromChain } = useAppSelector((state) => state.send);
  const [latestBlock, setBlock] = useState<
    ethers.providers.Block | undefined
  >();

  const { addError, removeError, error } = useContext(ErrorContext);

  useEffect(() => {
    const provider = PROVIDERS[currentlySelectedFromChain.chainId]();
    provider
      .getBlock("latest")
      .then((res) => {
        if (error) removeError();
        setBlock(res);
      })
      .catch(() => {
        addError(new Error("Infura issue, please try again later."));
        console.error("Error getting latest block");
      });
  }, [currentlySelectedFromChain.chainId, error, removeError, addError]);

  useInterval(() => {
    const provider = PROVIDERS[currentlySelectedFromChain.chainId]();
    provider
      .getBlock("latest")
      .then((block) => {
        setBlock(block);
      })
      .catch(() => {
        console.error("Error getting latest block");
      });

    return () => {
      provider.removeAllListeners();
    };
  }, 30 * 1000);

  return { block: latestBlock };
}

api = createApi({
  baseQuery: fakeBaseQuery(),
  endpoints: (build) => ({
    balances: build.query<ethers.BigNumber[], BalancesQueryArgs>({
      queryFn: async ({ account, chainId }) => {
        try {
          const provider = PROVIDERS[chainId]();
          const balances = await Promise.all(
            TOKENS_LIST[chainId].map(async (token) => {
              try {
                // If it is ETH, use getBalance from the provider
                if (token.address === ethers.constants.AddressZero) {
                  return provider.getBalance(account);
                }
                const contract = ERC20Ethers__factory.connect(
                  token.address,
                  provider
                );
                return await contract.balanceOf(account);
              } catch (err) {
                console.error(
                  `Error fetching balance for: ${token.name} at ${token.address}`
                );
                console.error(err);
                return BigNumber.from("0");
              }
            })
          );
          return { data: balances };
        } catch (error) {
          return { error };
        }
      },
    }),
    allowance: build.query<
      { hasToApprove: boolean; allowance: ethers.BigNumber },
      AllowanceQueryArgs
    >({
      queryFn: async ({ owner, spender, chainId, token, amount }) => {
        try {
          const provider = PROVIDERS[chainId]();
          // For ETH, allowance does not make sense
          if (token === ethers.constants.AddressZero) {
            return {
              data: {
                hasToApprove: false,
                allowance: ethers.constants.MaxUint256,
              },
            };
          }
          const contract = clients.erc20.connect(token, provider);
          const allowance = await contract.allowance(owner, spender);
          const hasToApprove = amount.gt(allowance);

          return { data: { allowance, hasToApprove } };
        } catch (error) {
          return { error };
        }
      },
    }),
    ethBalance: build.query<ethers.BigNumber, BalancesQueryArgs>({
      queryFn: async ({ account, chainId }) => {
        try {
          const provider = PROVIDERS[chainId]();
          const balance = await provider.getBalance(account);
          return { data: balance };
        } catch (error) {
          return { error };
        }
      },
    }),
    bridgeFees: build.query<BridgeFeesQueryResult, BridgeFeesQueryArgs>({
      // We want to re-run the fee query on each block change
      queryFn: async ({ amount, tokenSymbol, blockTime }) => {
        try {
          const { instantRelayFee, slowRelayFee, isAmountTooLow } =
            await getRelayFees(tokenSymbol, amount);

          const { isLiquidityInsufficient, ...lpFee } = await getLpFee(
            tokenSymbol,
            amount,
            blockTime
          );

          return {
            data: {
              instantRelayFee,
              slowRelayFee,
              lpFee,
              isAmountTooLow,
              isLiquidityInsufficient,
            },
          };
        } catch (error) {
          console.error("bridge fee calculation failed");
          console.error(error);
          return { error };
        }
      },
    }),
  }),
})

export function useSendArbitrum() {
  const [bridge, setBridge] = useState<Bridge | undefined>();
  const [bridgeAddress, setBridgeAddress] = useState("");
  const { isConnected, chainId, account, signer } = useConnection();
  const {
    fromChain,
    toChain,
    toAddress,
    amount,
    token,
    currentlySelectedFromChain,
    currentlySelectedToChain,
    error,
  } = useAppSelector((state) => state.send);
  const { block } = useL2Block();
  const { balance: balanceStr } = useBalance({
    chainId: fromChain,
    account,
    tokenAddress: token,
  });
  const balance = BigNumber.from(balanceStr);
  const [refetchAllowance, { data: allowance }] =
    chainApi.endpoints.allowance.useLazyQuery();
  const canApprove = balance.gte(amount) && amount.gte(0);
  const hasToApprove = allowance?.hasToApprove ?? true;
  //TODO: Add fees
  const [fees] = useState({
    instantRelayFee: {
      total: BigNumber.from("0"),
      pct: BigNumber.from("0"),
    },
    slowRelayFee: {
      total: BigNumber.from("0"),
      pct: BigNumber.from("0"),
    },
    lpFee: {
      total: BigNumber.from("0"),
      pct: BigNumber.from("0"),
    },
    isAmountTooLow: false,
    isLiquidityInsufficient: false,
  });

  useEffect(() => {
    initBridgeClient();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [signer, account, fromChain, toChain, isConnected]);

  const initBridgeClient = async () => {
    if (!signer || !account) return;
    if (fromChain !== ChainId.MAINNET) return;
    if (toChain !== ChainId.ARBITRUM) return;
    if (!isConnected) return;

    const provider = PROVIDERS[ChainId.ARBITRUM]();
    try {
      const bridge = await Bridge.init(signer, provider.getSigner(account));
      setBridge(bridge);
    } catch (error) {
      console.error(error);
    }
  };

  const send = useCallback(async () => {
    if (!bridge || !isConnected) return {};
    if (
      !(await validateContractAndChain(
        (
          await bridge.l1Bridge.getInbox()
        ).address,
        fromChain,
        bridge.l1Bridge.l1Signer
      ))
    ) {
      return {};
    }
    if (token === ethers.constants.AddressZero) {
      return {
        tx: await bridge.depositETH(amount),
        fees,
      };
    } else {
      const depositParams = await bridge.getDepositTxParams({
        erc20L1Address: token,
        amount,
        destinationAddress: toAddress,
      });
      return {
        tx: await bridge.deposit(depositParams),
        fees,
      };
    }
  }, [bridge, amount, fees, token, isConnected, toAddress, fromChain]);

  const approve = useCallback(() => {
    if (!bridge) return;
    return bridge.approveToken(token, MAX_APPROVAL_AMOUNT);
  }, [bridge, token]);

  useEffect(() => {
    if (!bridge || !account || !token || !chainId || !amount) return;

    bridge.l1Bridge
      .getGatewayAddress(token)
      .then((spender) => {
        setBridgeAddress(spender);
        return refetchAllowance({
          owner: account,
          spender,
          chainId,
          token,
          amount,
        });
      })
      .catch(console.error);
  }, [bridge, amount, token, chainId, account, refetchAllowance]);

  const hasToSwitchChain =
    isConnected && currentlySelectedFromChain.chainId !== chainId;
  const canSend = useMemo(
    () =>
      currentlySelectedFromChain.chainId &&
      block &&
      currentlySelectedToChain.chainId &&
      amount &&
      token &&
      fees &&
      toAddress &&
      isValidAddress(toAddress) &&
      !hasToApprove &&
      !hasToSwitchChain &&
      !error &&
      balance.gte(amount),
    [
      currentlySelectedFromChain.chainId,
      block,
      currentlySelectedToChain.chainId,
      amount,
      token,
      fees,
      toAddress,
      hasToApprove,
      hasToSwitchChain,
      error,
      balance,
    ]
  );

  return {
    canSend,
    canApprove,
    hasToApprove,
    hasToSwitchChain,
    send,
    approve,
    fees,
    spender: bridgeAddress,
  };
}

export function useSendBoba() {
  const [bobaBridge] = useState(new BobaBridgeClient());
  const [bridgeAddress, setBridgeAddress] = useState("");
  const { isConnected, chainId, account, signer } = useConnection();
  const {
    fromChain,
    amount,
    token,
    currentlySelectedFromChain,
    currentlySelectedToChain,
    toAddress,
    error,
  } = useAppSelector((state) => state.send);
  const { block } = useL2Block();
  const { balance: balanceStr } = useBalance({
    chainId: fromChain,
    account,
    tokenAddress: token,
  });
  const balance = BigNumber.from(balanceStr);
  const { data: allowance } = useAllowance(
    {
      chainId: fromChain,
      token,
      owner: account!,
      spender: bridgeAddress,
      amount,
    },
    { skip: !account || !isConnected || !chainId }
  );
  const canApprove = balance.gte(amount) && amount.gte(0);
  const hasToApprove = allowance?.hasToApprove ?? true;
  //TODO: Add fees
  const [fees] = useState({
    instantRelayFee: {
      total: BigNumber.from("0"),
      pct: BigNumber.from("0"),
    },
    slowRelayFee: {
      total: BigNumber.from("0"),
      pct: BigNumber.from("0"),
    },
    lpFee: {
      total: BigNumber.from("0"),
      pct: BigNumber.from("0"),
    },
    isAmountTooLow: false,
    isLiquidityInsufficient: false,
  });

  useEffect(() => {
    if (!bobaBridge) return;
    bobaBridge
      .getL1BridgeAddress(chainId as number, PROVIDERS[ChainId.MAINNET]())
      .then((address) => {
        setBridgeAddress(address);
      })
      .catch(() => {
        setBridgeAddress("");
      });
  }, [bobaBridge, chainId]);

  const send = useCallback(async () => {
    if (!isConnected || !signer) return {};

    if (!(await validateContractAndChain(bridgeAddress, fromChain, signer))) {
      return {};
    }
    if (token === ethers.constants.AddressZero) {
      return {
        tx: await bobaBridge.depositEth(signer, amount),
        fees,
      };
    } else {
      const pairToken = bobaErc20Pairs()[token];
      if (!pairToken) return {};
      return {
        tx: await bobaBridge.depositERC20(signer, token, pairToken, amount),
        fees,
      };
    }
  }, [
    amount,
    fees,
    token,
    isConnected,
    bobaBridge,
    signer,
    fromChain,
    bridgeAddress,
  ]);

  const approve = useCallback(() => {
    if (!signer) return;
    return bobaBridge.approve(signer, token, MAX_APPROVAL_AMOUNT);
  }, [bobaBridge, signer, token]);

  const hasToSwitchChain =
    isConnected && currentlySelectedFromChain.chainId !== chainId;
  const canSend = useMemo(
    () =>
      currentlySelectedFromChain.chainId &&
      block &&
      currentlySelectedToChain.chainId &&
      amount &&
      token &&
      fees &&
      toAddress &&
      isValidAddress(toAddress) &&
      !hasToApprove &&
      !hasToSwitchChain &&
      !error &&
      balance.gte(amount),
    [
      currentlySelectedFromChain.chainId,
      block,
      currentlySelectedToChain.chainId,
      amount,
      token,
      fees,
      toAddress,
      hasToApprove,
      hasToSwitchChain,
      error,
      balance,
    ]
  );

  return {
    canSend,
    canApprove,
    hasToApprove,
    hasToSwitchChain,
    send,
    approve,
    fees,
    spender: bridgeAddress,
  };
}