From 6c6089e75e3bb418bced2f230d481580971929e3 Mon Sep 17 00:00:00 2001
From: Francisco Ramos <jscriptcoder@gmail.com>
Date: Wed, 26 Jul 2023 14:38:47 +0200
Subject: [PATCH] feat(bridge-ui-v2): Claim & Release (#14267)

---
 packages/bridge-ui-v2/src/app.config.ts       |  18 +--
 .../src/components/Bridge/Actions.svelte      |   2 +-
 .../src/components/Bridge/AddressInput.svelte |   6 +-
 .../src/components/Bridge/NFTBridge.svelte    |   4 +-
 .../src/components/Bridge/NFTIdInput.svelte   |   3 +-
 .../src/components/Bridge/Recipient.svelte    |   2 +-
 .../ChainSelector/ChainSelector.svelte        |   4 +-
 .../bridge-ui-v2/src/libs/bridge/Bridge.ts    | 115 ++++++++++++++++++
 .../src/libs/bridge/ERC1155Bridge.ts          |  14 ++-
 .../src/libs/bridge/ERC20Bridge.ts            |  86 ++++++++++++-
 .../src/libs/bridge/ERC721Bridge.ts           |  14 ++-
 .../bridge-ui-v2/src/libs/bridge/ETHBridge.ts |  75 +++++++++++-
 .../bridge-ui-v2/src/libs/bridge/bridges.ts   |  13 +-
 .../src/libs/bridge/estimateCostOfBridging.ts |   3 +-
 .../bridge-ui-v2/src/libs/bridge/types.ts     |  20 ++-
 .../bridge-ui-v2/src/libs/error/errors.ts     |  20 +++
 .../src/libs/proof/BridgeProver.ts            |  80 ++++++++++++
 .../bridge-ui-v2/src/libs/proof/Prover.ts     |  73 +++++++++++
 packages/bridge-ui-v2/src/libs/proof/index.ts |   2 +
 packages/bridge-ui-v2/src/libs/proof/types.ts |  37 ++++++
 .../src/libs/token/detectContractType.ts      |  11 +-
 packages/bridge-ui-v2/src/stores/nfts.ts      |   4 +-
 22 files changed, 555 insertions(+), 51 deletions(-)
 create mode 100644 packages/bridge-ui-v2/src/libs/bridge/Bridge.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/proof/BridgeProver.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/proof/Prover.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/proof/index.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/proof/types.ts

diff --git a/packages/bridge-ui-v2/src/app.config.ts b/packages/bridge-ui-v2/src/app.config.ts
index 64e9bd3fb03..3cd6c95a50c 100644
--- a/packages/bridge-ui-v2/src/app.config.ts
+++ b/packages/bridge-ui-v2/src/app.config.ts
@@ -1,19 +1,21 @@
 export const recommentProcessingFee = {
-  ethGasLimit: BigInt(900000),
-  erc20NotDeployedGasLimit: BigInt(3100000),
-  erc20DeployedGasLimit: BigInt(1100000),
+  ethGasLimit: BigInt(900_000),
+  erc20NotDeployedGasLimit: BigInt(3_100_000),
+  erc20DeployedGasLimit: BigInt(1_100_000),
 };
 
 export const processingFeeComponent = {
   closingDelayOptionClick: 300,
-  intervalComputeRecommendedFee: 20000,
+  intervalComputeRecommendedFee: 20_000,
 };
 
-export const bridge = {
-  noOwnerGasLimit: BigInt(140000),
-  noTokenDeployedGasLimit: BigInt(3000000),
+export const bridgeService = {
+  noOwnerGasLimit: BigInt(140_000),
+  noTokenDeployedGasLimit: BigInt(3_000_000),
+  erc20GasLimitThreshold: BigInt(2_500_000),
+  unpredictableGasLimit: BigInt(1_000_000),
 };
 
 export const pendingTransaction = {
-  waitTimeout: 300000,
+  waitTimeout: 300_000,
 };
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Actions.svelte b/packages/bridge-ui-v2/src/components/Bridge/Actions.svelte
index a815a4cb17b..5a59a5300c4 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/Actions.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/Actions.svelte
@@ -56,7 +56,7 @@
   $: disableBridge = canDoNothing || $insufficientAllowance || $insufficientBalance || bridging;
 
   // General loading state
-  $: loading = approving || bridging;
+  // $: loading = approving || bridging;
 </script>
 
 <div class="f-between-center w-full gap-4">
diff --git a/packages/bridge-ui-v2/src/components/Bridge/AddressInput.svelte b/packages/bridge-ui-v2/src/components/Bridge/AddressInput.svelte
index 0e940331f1c..2212f985edb 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/AddressInput.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/AddressInput.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
   import { isAddress } from 'ethereum-address';
-  import { createEventDispatcher, onMount } from 'svelte';
+  import { createEventDispatcher } from 'svelte';
   import { t } from 'svelte-i18n';
 
   import { Alert } from '$components/Alert';
-  import { classNames } from '$libs/util/classNames';
   import { uid } from '$libs/util/uid';
 
   let input: HTMLInputElement;
@@ -15,9 +14,10 @@
 
   let isValidEthereumAddress = false;
   let tooShort = true;
-  let classes = classNames('', $$props.class);
   const dispatch = createEventDispatcher();
 
+  // TODO: nope!!, this should go inside a function whose arguments
+  //       are the values that trigger reactivity
   $: {
     ethereumAddress;
     if (ethereumAddress.length > 41) {
diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte
index 5bc47107524..426dd4d7cef 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/NFTBridge.svelte
@@ -18,7 +18,7 @@
   let isAddressValid = false;
 
   let contractAddress = '';
-  let imageUrls = Array<any>();
+  let imageUrls = Array<string>();
 
   $: tokenIds = $tokenIdStore;
   $: isButtonDisabled = !($tokenIdStore?.length ?? 0);
@@ -38,6 +38,7 @@
   });
 
   function resetAllStates() {
+    // TODO: change to $store format
     isAddressValid = false;
     contractTypeStore.set('');
     tokenIdStore.set([]);
@@ -48,6 +49,7 @@
   async function handleImport() {
     contractTypeStore.set(await detectContractType(contractAddress, tokenIds[0]));
     let result = null;
+    // TODO: use TokenType enum
     if ($contractTypeStore === 'ERC721') {
       result = await fetchERC721Images(contractAddress, tokenIds);
     } else if ($contractTypeStore === 'ERC1155') {
diff --git a/packages/bridge-ui-v2/src/components/Bridge/NFTIdInput.svelte b/packages/bridge-ui-v2/src/components/Bridge/NFTIdInput.svelte
index 7dda72f71aa..d6555b88d54 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/NFTIdInput.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/NFTIdInput.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { createEventDispatcher, onMount } from 'svelte';
+  import { createEventDispatcher } from 'svelte';
   import { t } from 'svelte-i18n';
 
   import { Tooltip } from '$components/Tooltip';
@@ -10,6 +10,7 @@
 
   const dispatch = createEventDispatcher();
 
+  // TODO: nope!!
   $: {
     let tokenIds;
     if (tokenIdInput === '') {
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte b/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
index 867f0397d7b..e4bf8f1c62c 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/Recipient.svelte
@@ -15,7 +15,7 @@
   let dialogId = `dialog-${uid()}`;
 
   let modalOpen = false;
-  let invalidAddress = false;
+  let invalidAddress = false; // TODO: will be used soon
   let prevRecipientAddress: Maybe<Address> = null;
 
   let inputBox: InputBox;
diff --git a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte
index f63a2513517..717238869b6 100644
--- a/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte
+++ b/packages/bridge-ui-v2/src/components/ChainSelector/ChainSelector.svelte
@@ -21,8 +21,8 @@
 
   let classes = classNames('ChainSelector', $$props.class);
   let buttonClasses = classNames(
-    'px-2 body-small-regular bg-neutral-background',
-    small ? 'py-[6px]' : 'py-[10px]',
+    'body-regular bg-neutral-background',
+    small ? 'px-2 py-[6px]' : 'px-6 py-[10px]',
     small ? 'rounded-md' : 'rounded-[10px]',
     small ? 'w-auto' : 'w-full',
   );
diff --git a/packages/bridge-ui-v2/src/libs/bridge/Bridge.ts b/packages/bridge-ui-v2/src/libs/bridge/Bridge.ts
new file mode 100644
index 00000000000..7123badd655
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/bridge/Bridge.ts
@@ -0,0 +1,115 @@
+import { getContract } from '@wagmi/core';
+import type { Hash } from 'viem';
+
+import { bridgeABI } from '$abi';
+import { chainContractsMap } from '$libs/chain';
+import { MessageStatusError, WrongChainError, WrongOwnerError } from '$libs/error';
+import type { BridgeProver } from '$libs/proof';
+import { getLogger } from '$libs/util/logger';
+
+import { type BridgeArgs, type ClaimArgs, MessageStatus, type ReleaseArgs } from './types';
+
+const log = getLogger('bridge:Bridge');
+
+export abstract class Bridge {
+  protected readonly _prover: BridgeProver;
+
+  constructor(prover: BridgeProver) {
+    this._prover = prover;
+  }
+
+  /**
+   * We are gonna run some common checks here:
+   * 1. Check that the wallet is connected to the destination chain
+   * 2. Check that the message is owned by the user
+   * 3. Check that the message has not been claimed already
+   * 4. Check that the message has not failed
+   *
+   * Important: wallet must be connected to the destination chain
+   */
+  protected async beforeClaiming({ msgHash, message, wallet }: ClaimArgs) {
+    const destChainId = Number(message.destChainId);
+    // Are we connected to the destination chain?
+    if (wallet.chain.id !== destChainId) {
+      throw new WrongChainError('wallet must be connected to the destination chain');
+    }
+
+    const { owner } = message;
+    const userAddress = wallet.account.address;
+    // Are we the owner of the message?
+    if (owner.toLowerCase() !== userAddress.toLowerCase()) {
+      throw new WrongOwnerError('user cannot process this as it is not their message');
+    }
+
+    const destBridgeAddress = chainContractsMap[wallet.chain.id].bridgeAddress;
+
+    const destBridgeContract = getContract({
+      address: destBridgeAddress,
+      abi: bridgeABI,
+
+      // We are gonna resuse this contract to actually process the message
+      // so we'll need to sign the transaction
+      walletClient: wallet,
+    });
+
+    const messageStatus: MessageStatus = await destBridgeContract.read.getMessageStatus([msgHash]);
+
+    log(`Claiming message with status ${messageStatus}`);
+
+    // Has it been claimed already?
+    if (messageStatus === MessageStatus.DONE) {
+      throw new MessageStatusError('message already processed');
+    }
+
+    // Has it failed?
+    if (messageStatus === MessageStatus.FAILED) {
+      throw new MessageStatusError('user can not process this as message has failed');
+    }
+
+    return { messageStatus, destBridgeContract };
+  }
+
+  /**
+   * We are gonna run the following checks here:
+   * 1. Check that the wallet is connected to the source chain
+   * 2. Check that the message is owned by the user
+   * 3. Check that the message has failed
+   */
+  protected async beforeReleasing({ msgHash, message, wallet }: ClaimArgs) {
+    const srcChainId = Number(message.srcChainId);
+    // Are we connected to the source chain?
+    if (wallet.chain.id !== srcChainId) {
+      throw new WrongChainError('wallet must be connected to the source chain');
+    }
+
+    const { owner } = message;
+    const userAddress = wallet.account.address;
+    // Are we the owner of the message?
+    if (owner.toLowerCase() !== userAddress.toLowerCase()) {
+      throw new WrongOwnerError('user cannot process this as it is not their message');
+    }
+
+    // Before releasing we need to make sure the message has failed
+    const destChainId = Number(message.destChainId);
+    const destBridgeAddress = chainContractsMap[destChainId].bridgeAddress;
+
+    const destBridgeContract = getContract({
+      address: destBridgeAddress,
+      abi: bridgeABI,
+      chainId: destChainId,
+    });
+
+    const messageStatus: MessageStatus = await destBridgeContract.read.getMessageStatus([msgHash]);
+
+    log(`Releasing message with status ${messageStatus}`);
+
+    if (messageStatus !== MessageStatus.FAILED) {
+      throw new MessageStatusError('message must fail to release funds');
+    }
+  }
+
+  abstract estimateGas(args: BridgeArgs): Promise<bigint>;
+  abstract bridge(args: BridgeArgs): Promise<Hash>;
+  abstract claim(args: ClaimArgs): Promise<Hash>;
+  abstract release(args: ReleaseArgs): Promise<Hash>;
+}
diff --git a/packages/bridge-ui-v2/src/libs/bridge/ERC1155Bridge.ts b/packages/bridge-ui-v2/src/libs/bridge/ERC1155Bridge.ts
index 6d3e4faaf0c..b40573ad149 100644
--- a/packages/bridge-ui-v2/src/libs/bridge/ERC1155Bridge.ts
+++ b/packages/bridge-ui-v2/src/libs/bridge/ERC1155Bridge.ts
@@ -1,8 +1,8 @@
-import type { Hex } from 'viem';
+import type { Hash, Hex } from 'viem';
 
-import type { Bridge } from './types';
+import { Bridge } from './Bridge';
 
-export class ERC1155Bridge implements Bridge {
+export class ERC1155Bridge extends Bridge {
   async estimateGas(): Promise<bigint> {
     return Promise.resolve(BigInt(0));
   }
@@ -10,4 +10,12 @@ export class ERC1155Bridge implements Bridge {
   async bridge(): Promise<Hex> {
     return Promise.resolve('0x');
   }
+
+  async claim() {
+    return Promise.resolve('0x' as Hash);
+  }
+
+  async release() {
+    return Promise.resolve('0x' as Hash);
+  }
 }
diff --git a/packages/bridge-ui-v2/src/libs/bridge/ERC20Bridge.ts b/packages/bridge-ui-v2/src/libs/bridge/ERC20Bridge.ts
index 5de324659d2..50263c21479 100644
--- a/packages/bridge-ui-v2/src/libs/bridge/ERC20Bridge.ts
+++ b/packages/bridge-ui-v2/src/libs/bridge/ERC20Bridge.ts
@@ -1,16 +1,27 @@
-import { getContract } from '@wagmi/core';
+import { getContract, type Hash } from '@wagmi/core';
 import { UserRejectedRequestError } from 'viem';
 
 import { erc20ABI, tokenVaultABI } from '$abi';
-import { bridge } from '$config';
+import { bridgeService } from '$config';
+import { chainContractsMap } from '$libs/chain';
 import { ApproveError, InsufficientAllowanceError, NoAllowanceRequiredError, SendERC20Error } from '$libs/error';
+import type { BridgeProver } from '$libs/proof';
 import { getLogger } from '$libs/util/logger';
 
-import type { ApproveArgs, Bridge, ERC20BridgeArgs, RequireAllowanceArgs, SendERC20Args } from './types';
+import { Bridge } from './Bridge';
+import {
+  type ApproveArgs,
+  type ClaimArgs,
+  type ERC20BridgeArgs,
+  MessageStatus,
+  type ReleaseArgs,
+  type RequireAllowanceArgs,
+  type SendERC20Args,
+} from './types';
 
 const log = getLogger('ERC20Bridge');
 
-export class ERC20Bridge implements Bridge {
+export class ERC20Bridge extends Bridge {
   private static async _prepareTransaction(args: ERC20BridgeArgs) {
     const {
       to,
@@ -33,9 +44,9 @@ export class ERC20Bridge implements Bridge {
     const refundAddress = wallet.account.address;
 
     const gasLimit = !isTokenAlreadyDeployed
-      ? BigInt(bridge.noTokenDeployedGasLimit)
+      ? BigInt(bridgeService.noTokenDeployedGasLimit)
       : processingFee > 0
-      ? bridge.noOwnerGasLimit
+      ? bridgeService.noOwnerGasLimit
       : BigInt(0);
 
     const sendERC20Args: SendERC20Args = [
@@ -54,6 +65,10 @@ export class ERC20Bridge implements Bridge {
     return { tokenVaultContract, sendERC20Args };
   }
 
+  constructor(prover: BridgeProver) {
+    super(prover);
+  }
+
   async estimateGas(args: ERC20BridgeArgs) {
     const { tokenVaultContract, sendERC20Args } = await ERC20Bridge._prepareTransaction(args);
     const [, , , , , processingFee] = sendERC20Args;
@@ -162,4 +177,63 @@ export class ERC20Bridge implements Bridge {
       throw new SendERC20Error('failed to bridge ERC20 token', { cause: err });
     }
   }
+
+  async claim(args: ClaimArgs) {
+    const { messageStatus, destBridgeContract } = await super.beforeClaiming(args);
+
+    let txHash: Hash;
+    const { msgHash, message } = args;
+    const srcChainId = Number(message.srcChainId);
+    const destChainId = Number(message.destChainId);
+
+    if (messageStatus === MessageStatus.NEW) {
+      const proof = await this._prover.generateProofToProcessMessage(msgHash, srcChainId, destChainId);
+
+      if (message.gasLimit > bridgeService.erc20GasLimitThreshold) {
+        txHash = await destBridgeContract.write.processMessage([message, proof], {
+          gas: message.gasLimit,
+        });
+      } else {
+        txHash = await destBridgeContract.write.processMessage([message, proof]);
+      }
+
+      log('Transaction hash for processMessage call', txHash);
+
+      // TODO: handle unpredictable gas limit error
+      //       by trying with a higher gas limit
+    } else {
+      // MessageStatus.RETRIABLE
+      log('Retrying message', message);
+
+      // Last attempt to send the message: isLastAttempt = true
+      txHash = await destBridgeContract.write.retryMessage([message, true]);
+
+      log('Transaction hash for retryMessage call', txHash);
+    }
+
+    return txHash;
+  }
+
+  async release(args: ReleaseArgs) {
+    await super.beforeReleasing(args);
+
+    const { msgHash, message, wallet } = args;
+    const srcChainId = Number(message.srcChainId);
+    const destChainId = Number(message.destChainId);
+
+    const proof = await this._prover.generateProofToRelease(msgHash, srcChainId, destChainId);
+
+    const srcTokenVaultAddress = chainContractsMap[wallet.chain.id].tokenVaultAddress;
+    const srcTokenVaultContract = getContract({
+      walletClient: wallet,
+      abi: tokenVaultABI,
+      address: srcTokenVaultAddress,
+    });
+
+    const txHash = await srcTokenVaultContract.write.releaseERC20([message, proof]);
+
+    log('Transaction hash for releaseEther call', txHash);
+
+    return txHash;
+  }
 }
diff --git a/packages/bridge-ui-v2/src/libs/bridge/ERC721Bridge.ts b/packages/bridge-ui-v2/src/libs/bridge/ERC721Bridge.ts
index 12010042511..202fc536f7d 100644
--- a/packages/bridge-ui-v2/src/libs/bridge/ERC721Bridge.ts
+++ b/packages/bridge-ui-v2/src/libs/bridge/ERC721Bridge.ts
@@ -1,8 +1,8 @@
-import type { Hex } from 'viem';
+import type { Hash, Hex } from 'viem';
 
-import type { Bridge } from './types';
+import { Bridge } from './Bridge';
 
-export class ERC721Bridge implements Bridge {
+export class ERC721Bridge extends Bridge {
   async estimateGas(): Promise<bigint> {
     return Promise.resolve(BigInt(0));
   }
@@ -10,4 +10,12 @@ export class ERC721Bridge implements Bridge {
   async bridge(): Promise<Hex> {
     return Promise.resolve('0x');
   }
+
+  async claim() {
+    return Promise.resolve('0x' as Hash);
+  }
+
+  async release() {
+    return Promise.resolve('0x' as Hash);
+  }
 }
diff --git a/packages/bridge-ui-v2/src/libs/bridge/ETHBridge.ts b/packages/bridge-ui-v2/src/libs/bridge/ETHBridge.ts
index 45f7353130d..90f4f02d6c7 100644
--- a/packages/bridge-ui-v2/src/libs/bridge/ETHBridge.ts
+++ b/packages/bridge-ui-v2/src/libs/bridge/ETHBridge.ts
@@ -1,16 +1,19 @@
-import { getContract } from '@wagmi/core';
+import { getContract, type Hash } from '@wagmi/core';
 import { UserRejectedRequestError } from 'viem';
 
 import { bridgeABI } from '$abi';
-import { bridge } from '$config';
+import { bridgeService } from '$config';
+import { chainContractsMap } from '$libs/chain';
 import { SendMessageError } from '$libs/error';
+import type { BridgeProver } from '$libs/proof';
 import { getLogger } from '$libs/util/logger';
 
-import type { Bridge, ETHBridgeArgs, Message } from './types';
+import { Bridge } from './Bridge';
+import { type ClaimArgs, type ETHBridgeArgs, type Message, MessageStatus, type ReleaseArgs } from './types';
 
-const log = getLogger('ETHBridge');
+const log = getLogger('bridge:ETHBridge');
 
-export class ETHBridge implements Bridge {
+export class ETHBridge extends Bridge {
   private static async _prepareTransaction(args: ETHBridgeArgs) {
     const { to, amount, wallet, srcChainId, destChainId, bridgeAddress, processingFee, memo = '' } = args;
 
@@ -29,7 +32,7 @@ export class ETHBridge implements Bridge {
 
     // If there is a processing fee, use the specified message gas limit
     // as might not be called by the owner
-    const gasLimit = processingFee > 0 ? bridge.noOwnerGasLimit : BigInt(0);
+    const gasLimit = processingFee > 0 ? bridgeService.noOwnerGasLimit : BigInt(0);
 
     const message: Message = {
       to,
@@ -55,6 +58,10 @@ export class ETHBridge implements Bridge {
     return { bridgeContract, message };
   }
 
+  constructor(prover: BridgeProver) {
+    super(prover);
+  }
+
   async estimateGas(args: ETHBridgeArgs) {
     const { bridgeContract, message } = await ETHBridge._prepareTransaction(args);
     const { depositValue, callValue, processingFee } = message;
@@ -94,4 +101,60 @@ export class ETHBridge implements Bridge {
       throw new SendMessageError('failed to bridge ETH', { cause: err });
     }
   }
+
+  async claim(args: ClaimArgs) {
+    const { messageStatus, destBridgeContract } = await super.beforeClaiming(args);
+
+    let txHash: Hash;
+    const { msgHash, message } = args;
+    const srcChainId = Number(message.srcChainId);
+    const destChainId = Number(message.destChainId);
+
+    if (messageStatus === MessageStatus.NEW) {
+      const proof = await this._prover.generateProofToProcessMessage(msgHash, srcChainId, destChainId);
+
+      txHash = await destBridgeContract.write.processMessage([message, proof]);
+
+      log('Transaction hash for processMessage call', txHash);
+
+      // TODO: handle unpredictable gas limit error
+      //       by trying with a higher gas limit
+    } else {
+      // MessageStatus.RETRIABLE
+      log('Retrying message', message);
+
+      // Last attempt to send the message: isLastAttempt = true
+      txHash = await destBridgeContract.write.retryMessage([message, true]);
+
+      log('Transaction hash for retryMessage call', txHash);
+    }
+
+    return txHash;
+  }
+
+  async release(args: ReleaseArgs) {
+    await super.beforeReleasing(args);
+
+    const { msgHash, message, wallet } = args;
+    const srcChainId = Number(message.srcChainId);
+    const destChainId = Number(message.destChainId);
+
+    const proof = await this._prover.generateProofToRelease(msgHash, srcChainId, destChainId);
+
+    const srcBridgeAddress = chainContractsMap[wallet.chain.id].bridgeAddress;
+    const srcBridgeContract = getContract({
+      walletClient: wallet,
+      abi: bridgeABI,
+      address: srcBridgeAddress,
+    });
+
+    const txHash = await srcBridgeContract.write.releaseEther([message, proof]);
+
+    log('Transaction hash for releaseEther call', txHash);
+
+    // TODO: possibly handle unpredictable gas limit error
+    //       by trying with a higher gas limit
+
+    return txHash;
+  }
 }
diff --git a/packages/bridge-ui-v2/src/libs/bridge/bridges.ts b/packages/bridge-ui-v2/src/libs/bridge/bridges.ts
index 56262c7ad4b..86e965b6fc5 100644
--- a/packages/bridge-ui-v2/src/libs/bridge/bridges.ts
+++ b/packages/bridge-ui-v2/src/libs/bridge/bridges.ts
@@ -1,14 +1,17 @@
+import { BridgeProver } from '$libs/proof';
 import type { TokenType } from '$libs/token';
 
+import type { Bridge } from './Bridge';
 import { ERC20Bridge } from './ERC20Bridge';
 import { ERC721Bridge } from './ERC721Bridge';
 import { ERC1155Bridge } from './ERC1155Bridge';
 import { ETHBridge } from './ETHBridge';
-import type { Bridge } from './types';
+
+const prover = new BridgeProver();
 
 export const bridges: Record<TokenType, Bridge> = {
-  ETH: new ETHBridge(),
-  ERC20: new ERC20Bridge(),
-  ERC721: new ERC721Bridge(),
-  ERC1155: new ERC1155Bridge(),
+  ETH: new ETHBridge(prover),
+  ERC20: new ERC20Bridge(prover),
+  ERC721: new ERC721Bridge(prover),
+  ERC1155: new ERC1155Bridge(prover),
 };
diff --git a/packages/bridge-ui-v2/src/libs/bridge/estimateCostOfBridging.ts b/packages/bridge-ui-v2/src/libs/bridge/estimateCostOfBridging.ts
index adcb8c81d74..96861daefca 100644
--- a/packages/bridge-ui-v2/src/libs/bridge/estimateCostOfBridging.ts
+++ b/packages/bridge-ui-v2/src/libs/bridge/estimateCostOfBridging.ts
@@ -1,6 +1,7 @@
 import { getPublicClient } from '@wagmi/core';
 
-import type { Bridge, BridgeArgs } from './types';
+import type { Bridge } from './Bridge';
+import type { BridgeArgs } from './types';
 
 export async function estimateCostOfBridging(bridge: Bridge, bridgeArgs: BridgeArgs) {
   const publicClient = getPublicClient();
diff --git a/packages/bridge-ui-v2/src/libs/bridge/types.ts b/packages/bridge-ui-v2/src/libs/bridge/types.ts
index 274906e45cf..bb03800ce04 100644
--- a/packages/bridge-ui-v2/src/libs/bridge/types.ts
+++ b/packages/bridge-ui-v2/src/libs/bridge/types.ts
@@ -1,6 +1,13 @@
-import type { WalletClient } from '@wagmi/core';
+import type { Hash, WalletClient } from '@wagmi/core';
 import type { Address, Hex } from 'viem';
 
+export enum MessageStatus {
+  NEW,
+  RETRIABLE,
+  DONE,
+  FAILED,
+}
+
 // Bridge sendMessage(message: Message)
 export type Message = {
   // Message ID. Will be set in contract
@@ -89,7 +96,10 @@ export type RequireAllowanceArgs = {
   amount: bigint;
 };
 
-export interface Bridge {
-  estimateGas(args: BridgeArgs): Promise<bigint>;
-  bridge(args: BridgeArgs): Promise<Hex>;
-}
+export type ClaimArgs = {
+  msgHash: Hash;
+  message: Message;
+  wallet: WalletClient;
+};
+
+export type ReleaseArgs = ClaimArgs;
diff --git a/packages/bridge-ui-v2/src/libs/error/errors.ts b/packages/bridge-ui-v2/src/libs/error/errors.ts
index ef70234518b..7d786fcc3bb 100644
--- a/packages/bridge-ui-v2/src/libs/error/errors.ts
+++ b/packages/bridge-ui-v2/src/libs/error/errors.ts
@@ -45,3 +45,23 @@ export class RevertedWithFailedError extends Error {
 export class MintError extends Error {
   name = 'MintError';
 }
+
+export class PendingBlockError extends Error {
+  name = 'PendingBlockError';
+}
+
+export class InvalidProofError extends Error {
+  name = 'InvalidProofError';
+}
+
+export class MessageStatusError extends Error {
+  name = 'MessageStatusError';
+}
+
+export class WrongOwnerError extends Error {
+  name = 'WrongOwnerError';
+}
+
+export class WrongChainError extends Error {
+  name = 'WrongChainError';
+}
diff --git a/packages/bridge-ui-v2/src/libs/proof/BridgeProver.ts b/packages/bridge-ui-v2/src/libs/proof/BridgeProver.ts
new file mode 100644
index 00000000000..465ad203bc7
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/proof/BridgeProver.ts
@@ -0,0 +1,80 @@
+import { encodeAbiParameters, type Hash, toHex, toRlp } from 'viem';
+
+import { MessageStatus } from '$libs/bridge';
+import { chainContractsMap } from '$libs/chain';
+import { InvalidProofError } from '$libs/error';
+
+import { Prover } from './Prover';
+import type { EthGetProofResponse } from './types';
+
+export class BridgeProver extends Prover {
+  constructor() {
+    super();
+  }
+
+  private _getSignalProof(proof: EthGetProofResponse, blockHeight: bigint) {
+    // RLP encode the proof together for LibTrieProof to decode
+    const encodedProof = toRlp(proof.storageProof[0].proof);
+
+    // Encode the SignalProof struct:
+    // struct SignalProof {
+    //   uint256 height;
+    //   bytes proof;
+    // }
+    const signalProof = encodeAbiParameters(
+      // ['tuple(uint256 height, bytes proof)'],
+      [
+        {
+          type: 'tuple',
+          components: [
+            { name: 'height', type: 'uint256' },
+            { name: 'proof', type: 'bytes' },
+          ],
+        },
+      ],
+      [{ height: blockHeight, proof: encodedProof }],
+    );
+
+    return signalProof;
+  }
+
+  async generateProofToProcessMessage(msgHash: Hash, srcChainId: number, destChainId: number) {
+    const srcBridgeAddress = chainContractsMap[srcChainId].bridgeAddress;
+    const srcSignalServiceAddress = chainContractsMap[srcChainId].signalServiceAddress;
+
+    const { proof, block } = await this.generateProof({
+      msgHash,
+      clientChainId: srcChainId,
+      contractAddress: srcBridgeAddress,
+      crossChainSyncChainId: destChainId,
+      proofForAccountAddress: srcSignalServiceAddress,
+    });
+
+    // Value must be 0x1 => isSignalSent
+    if (proof.storageProof[0].value !== toHex(true)) {
+      throw new InvalidProofError('storage proof value is not 1');
+    }
+
+    return this._getSignalProof(proof, block.number as bigint);
+  }
+
+  async generateProofToRelease(msgHash: Hash, srcChainId: number, destChainId: number) {
+    const srcBridgeAddress = chainContractsMap[srcChainId].bridgeAddress;
+    const destBridgeAddress = chainContractsMap[destChainId].bridgeAddress;
+
+    const { proof, block } = await this.generateProof({
+      msgHash,
+      clientChainId: destChainId,
+      contractAddress: srcBridgeAddress,
+      crossChainSyncChainId: srcChainId,
+      proofForAccountAddress: destBridgeAddress,
+    });
+
+    // Value must be 0x3 => MessageStatus.FAILED
+    if (proof.storageProof[0].value !== toHex(MessageStatus.FAILED)) {
+      throw new InvalidProofError('storage proof value is not FAILED');
+    }
+
+    return this._getSignalProof(proof, block.number as bigint);
+  }
+}
diff --git a/packages/bridge-ui-v2/src/libs/proof/Prover.ts b/packages/bridge-ui-v2/src/libs/proof/Prover.ts
new file mode 100644
index 00000000000..7b182137144
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/proof/Prover.ts
@@ -0,0 +1,73 @@
+import { getContract, type GetContractResult, type PublicClient } from '@wagmi/core';
+import { type Address, encodePacked, type Hex, keccak256 } from 'viem';
+
+import { crossChainSyncABI } from '$abi';
+import { chainContractsMap } from '$libs/chain';
+import { PendingBlockError } from '$libs/error';
+import { getLogger } from '$libs/util/logger';
+import { publicClient } from '$libs/wagmi';
+
+import type { ClientWithEthGetProofRequest, GenerateProofArgs } from './types';
+
+const log = getLogger('proof:Prover');
+
+export class Prover {
+  protected async _getKey(contractAddress: Address, msgHash: Hex) {
+    return keccak256(encodePacked(['address', 'bytes32'], [contractAddress, msgHash]));
+  }
+
+  protected async _getLatestBlock(
+    client: PublicClient,
+    crossChainSyncContract: GetContractResult<typeof crossChainSyncABI>,
+  ) {
+    const latestBlockHash = await crossChainSyncContract.read.getCrossChainBlockHash([BigInt(0)]);
+    return client.getBlock({ blockHash: latestBlockHash });
+  }
+
+  async generateProof(args: GenerateProofArgs) {
+    const { msgHash, clientChainId, contractAddress, crossChainSyncChainId, proofForAccountAddress } = args;
+
+    const crossChainSyncAddress = chainContractsMap[crossChainSyncChainId].crossChainSyncAddress;
+
+    // Get the block from chain A based on the latest block hash
+    // we get cross chain (Taiko contract on chain B)
+    const crossChainSyncContract = getContract({
+      chainId: crossChainSyncChainId,
+      address: crossChainSyncAddress,
+      abi: crossChainSyncABI,
+    });
+
+    const client = publicClient({ chainId: clientChainId });
+    const block = await this._getLatestBlock(client, crossChainSyncContract);
+
+    if (block.hash === null || block.number === null) {
+      throw new PendingBlockError('block is pending');
+    }
+
+    const key = await this._getKey(contractAddress, msgHash);
+
+    // Unfortunately, since this method is stagnant, it hasn't been included into Viem lib
+    // as supported methods. Still stupported  by Alchmey, Infura and others.
+    // See https://eips.ethereum.org/EIPS/eip-1186
+    // Following is a workaround to support this method.
+    const clientWithEthProofRequest = client as ClientWithEthGetProofRequest;
+
+    // RPC call to get the merkle proof what value is at key on the SignalService contract
+    const proof = await clientWithEthProofRequest.request({
+      method: 'eth_getProof',
+      params: [
+        // Address of the account to get the proof for
+        proofForAccountAddress,
+
+        // Array of storage-keys that should be proofed and included
+        [key],
+
+        block.hash,
+      ],
+    });
+
+    log('Proof from eth_getProof', proof);
+
+    return { proof, block };
+  }
+}
diff --git a/packages/bridge-ui-v2/src/libs/proof/index.ts b/packages/bridge-ui-v2/src/libs/proof/index.ts
new file mode 100644
index 00000000000..ee1dc6d890a
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/proof/index.ts
@@ -0,0 +1,2 @@
+export { BridgeProver } from './BridgeProver';
+export { Prover } from './Prover';
diff --git a/packages/bridge-ui-v2/src/libs/proof/types.ts b/packages/bridge-ui-v2/src/libs/proof/types.ts
new file mode 100644
index 00000000000..6d39cd737c9
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/proof/types.ts
@@ -0,0 +1,37 @@
+import type { Address, Hash, Hex } from 'viem';
+
+export type GenerateProofArgs = {
+  msgHash: Hash;
+  contractAddress: Address;
+  proofForAccountAddress: Address;
+  crossChainSyncChainId: number;
+  clientChainId: number;
+};
+
+export type StorageEntry = {
+  key: string;
+  value: Hex;
+
+  // Array of rlp-serialized MerkleTree-Nodes, starting with the storageHash-Node, following the path of the SHA3 (key) as path.
+  proof: Hex[];
+};
+
+export type EthGetProofResponse = {
+  balance: bigint;
+  codeHash: Hash;
+  nonce: number;
+  storageHash: Hash;
+
+  // Array of rlp-serialized MerkleTree-Nodes, starting with the stateRoot-Node, following the path of the SHA3 (address) as key.
+  accountProof: Hex[];
+
+  // Array of storage-entries as requested
+  storageProof: StorageEntry[];
+};
+
+export type ClientWithEthGetProofRequest = {
+  request(getProofArgs: {
+    method: 'eth_getProof';
+    params: [Address, Hex[], number | Hash | 'latest' | 'earliest'];
+  }): Promise<EthGetProofResponse>;
+};
diff --git a/packages/bridge-ui-v2/src/libs/token/detectContractType.ts b/packages/bridge-ui-v2/src/libs/token/detectContractType.ts
index 13fac07838d..c12e225a60a 100644
--- a/packages/bridge-ui-v2/src/libs/token/detectContractType.ts
+++ b/packages/bridge-ui-v2/src/libs/token/detectContractType.ts
@@ -3,6 +3,8 @@ import { readContract } from '@wagmi/core';
 export async function detectContractType(contractAddress: string, tokenId: number) {
   // eslint-disable-next-line no-console
   console.info('detectContractType', contractAddress);
+
+  // Use abi from @wagmi/core, and get it setup in wagmi.config.ts
   const ERC721_ABI = [
     {
       constant: true,
@@ -32,14 +34,15 @@ export async function detectContractType(contractAddress: string, tokenId: numbe
 
   try {
     await readContract({
-      address: contractAddress as `0x${string}`,
+      address: contractAddress as `0x${string}`, // TODO: type Address
       abi: ERC721_ABI,
       functionName: 'ownerOf',
       args: [tokenId],
     });
+    // TODO: please use getLogger from util/logger
     // eslint-disable-next-line no-console
     console.info('ERC721');
-    return 'ERC721';
+    return 'ERC721'; // TODO: use TokenType
   } catch (err) {
     // eslint-disable-next-line no-console
     console.log(err);
@@ -52,11 +55,11 @@ export async function detectContractType(contractAddress: string, tokenId: numbe
       });
       // eslint-disable-next-line no-console
       console.info('ERC1155');
-      return 'ERC1155';
+      return 'ERC1155'; // TODO: use TokenType
     } catch (err) {
       // eslint-disable-next-line no-console
       console.log(err);
-      return 'UNKNOWN';
+      return 'UNKNOWN'; // TODO: throw UnknownTypeError and handle in the UI?
     }
   }
 }
diff --git a/packages/bridge-ui-v2/src/stores/nfts.ts b/packages/bridge-ui-v2/src/stores/nfts.ts
index ad2ad3c63ff..0f4072d00a6 100644
--- a/packages/bridge-ui-v2/src/stores/nfts.ts
+++ b/packages/bridge-ui-v2/src/stores/nfts.ts
@@ -1,5 +1,7 @@
 import { writable } from 'svelte/store';
 
-export const contractTypeStore = writable('');
+// TODO: move this to local state
+
+export const contractTypeStore = writable(''); // TODO: TokenType
 export const tokenIdStore = writable<Array<number>>([]);
 export const errorIdStore = writable<Array<number>>([]);