From 1e40a68aab0c7c796c777a2af183895dd77aafcf Mon Sep 17 00:00:00 2001
From: Kevin Ingersoll <kingersoll@gmail.com>
Date: Fri, 26 Apr 2024 18:53:46 +0100
Subject: [PATCH] estimate bridge gas

---
 .../steps/deposit/DepositViaBridgeForm.tsx    | 30 ++++++++-----------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/packages/account-kit/src/steps/deposit/DepositViaBridgeForm.tsx b/packages/account-kit/src/steps/deposit/DepositViaBridgeForm.tsx
index c043fe1357..cdccf1db3e 100644
--- a/packages/account-kit/src/steps/deposit/DepositViaBridgeForm.tsx
+++ b/packages/account-kit/src/steps/deposit/DepositViaBridgeForm.tsx
@@ -1,20 +1,13 @@
 import { DepositForm } from "./DepositForm";
-import {
-  useEstimateGas,
-  usePublicClient,
-  useSimulateContract,
-  useWaitForTransactionReceipt,
-  useWalletClient,
-  useWriteContract,
-} from "wagmi";
+import { useEstimateFeesPerGas, usePublicClient, useWaitForTransactionReceipt, useWalletClient } from "wagmi";
 import { useAppAccountClient } from "../../useAppAccountClient";
 import { type Props } from "./DepositMethodForm";
-import { portal2Abi } from "./abis";
 import { useAppChain } from "../../useAppChain";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { getL2TransactionHashes, publicActionsL1, publicActionsL2, walletActionsL1 } from "viem/op-stack";
 import { BridgePendingTransactions } from "./BridgePendingTransactions";
 import { SubmitButton } from "./SubmitButton";
+import { Account, Chain } from "viem";
 
 export function DepositViaBridgeForm(props: Props) {
   const appChain = useAppChain();
@@ -22,6 +15,7 @@ export function DepositViaBridgeForm(props: Props) {
   const appAccountAddress = appAccountClient?.account.address;
 
   const walletClientL1 = useWalletClient({ chainId: props.sourceChain.id }).data?.extend(walletActionsL1());
+  const publicClientL1 = usePublicClient({ chainId: props.sourceChain.id })?.extend(publicActionsL1());
   const publicClientL2 = usePublicClient({ chainId: appChain.id })?.extend(publicActionsL2());
 
   const prepareQueryKey = ["prepareDepositViaBridge", publicClientL2?.uid, props.amount?.toString(), appAccountAddress];
@@ -29,12 +23,19 @@ export function DepositViaBridgeForm(props: Props) {
     queryKey: prepareQueryKey,
     enabled: !!(publicClientL2 && props.amount && appAccountAddress),
     queryFn: () =>
-      publicClientL2!.buildDepositTransaction({
+      publicClientL2!.buildDepositTransaction<Chain, Account>({
         mint: props.amount!,
         to: appAccountAddress,
       }),
   });
 
+  const estimateFee = useEstimateFeesPerGas({ chainId: props.sourceChain.id });
+  const estimateGas = useQuery({
+    queryKey: ["estimateDepositViaBridge", prepareQueryKey, prepare.status, publicClientL1?.uid],
+    enabled: !!(publicClientL1 && prepare.data),
+    queryFn: () => publicClientL1!.estimateDepositTransactionGas(prepare.data!),
+  });
+
   const deposit = useMutation({
     mutationKey: ["depositViaBridge", prepareQueryKey, prepare.status, walletClientL1?.uid],
     mutationFn: async () => {
@@ -45,10 +46,6 @@ export function DepositViaBridgeForm(props: Props) {
     },
   });
 
-  // console.log("prepare", prepare);
-
-  // TODO: estimate
-
   const receiptL1 = useWaitForTransactionReceipt({
     chainId: props.sourceChain.id,
     hash: deposit.data,
@@ -59,17 +56,14 @@ export function DepositViaBridgeForm(props: Props) {
     hash: receiptL1.data ? getL2TransactionHashes(receiptL1.data)[0] : undefined,
   });
 
-  // console.log("deposit", deposit.isPending, deposit.isPaused, deposit.isIdle);
-
   return (
     <DepositForm
       {...props}
-      estimatedFee={undefined}
+      estimatedFee={estimateFee.data && estimateGas.data ? estimateGas.data * estimateFee.data.maxFeePerGas : undefined}
       estimatedTime={undefined}
       // TODO: figure out some better way to bubble this up to advance to next step
       isComplete={deposit.isSuccess && receiptL1.isSuccess && receiptL2.isSuccess}
       submitButton={
-        // TODO: disable when prepare fails
         <SubmitButton
           sourceChainId={props.sourceChain.id}
           disabled={prepare.isError}