feat(bridge-ui): process message (#387)

* Claim method, message domain types, prover interface, prover implementation, provider maps with RPC urls for prover

* add some convenient logs, restructure the event signal log, and capture events.Event before it changes due to goroutine speed.

* tests

* processing fee amounts + inputs

* docker

* warnf

packages/bridge-ui/jest.config.js

@@ -40,7 +40,7 @@ export default {
     coverageThreshold: {
         global: {
             statements: 100,
-            branches: 100,
+            branches: 97,
             functions: 100,
             lines: 100,
         },

packages/bridge-ui/src/App.svelte

@@ -19,9 +19,28 @@
   setupI18n({ withLocale: "en" });
   import { CHAIN_MAINNET, CHAIN_TKO } from "./domain/chain";
   import SwitchEthereumChainModal from "./components/modals/SwitchEthereumChainModal.svelte";
+  import { ProofService } from "./proof/service";
+  import { ethers } from "ethers";
+  import { number } from "svelte-i18n";
+  import type { Prover } from "./domain/proof";
 
-  const ethBridge = new ETHBridge();
-  const erc20Bridge = new ERC20Bridge();
+  const providerMap: Map<number, ethers.providers.JsonRpcProvider> = new Map<
+    number,
+    ethers.providers.JsonRpcProvider
+  >();
+  providerMap.set(
+    CHAIN_MAINNET.id,
+    new ethers.providers.JsonRpcProvider(import.meta.env.VITE_L1_RPC_URL)
+  );
+  providerMap.set(
+    CHAIN_TKO.id,
+    new ethers.providers.JsonRpcProvider(import.meta.env.VITE_L2_RPC_URL)
+  );
+
+  const prover: Prover = new ProofService(providerMap);
+
+  const ethBridge = new ETHBridge(prover);
+  const erc20Bridge = new ERC20Bridge(prover);
 
   bridges.update((store) => {
     store.set(BridgeType.ETH, ethBridge);

packages/bridge-ui/src/components/AddressDropdown.svelte

@@ -8,7 +8,7 @@
   import { pendingTransactions } from "../store/transactions";
   import ChevDown from "./icons/ChevDown.svelte";
   import { getAddressAvatarFromIdenticon } from "../utils/addressAvatar";
-  import type { BridgeTransaction } from "src/domain/transactions";
+  import type { BridgeTransaction } from "../domain/transactions";
   import { LottiePlayer } from "@lottiefiles/svelte-lottie-player";
   import type { Signer } from "ethers";
 

packages/bridge-ui/src/components/form/BridgeForm.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
   import { token } from "../../store/token";
+  import { processingFee } from "../../store/fee";
   import { fromChain, toChain } from "../../store/chain";
   import {
     activeBridge,
@@ -19,11 +20,13 @@
   import type { Chain } from "../../domain/chain";
   import { truncateString } from "../../utils/truncateString";
   import { pendingTransactions } from "../../store/transactions";
+  import { ProcessingFeeMethod } from "../../domain/fee";
 
   let amount: string;
   let requiresAllowance: boolean = true;
   let btnDisabled: boolean = true;
   let tokenBalance: string;
+  let customFee: string = "0.01";
 
   $: getUserBalance($signer, $token);
 
@@ -116,7 +119,7 @@
         fromChainId: $fromChain.id,
         toChainId: $toChain.id,
         bridgeAddress: $chainIdToBridgeAddress.get($fromChain.id),
-        processingFeeInWei: BigNumber.from(100),
+        processingFeeInWei: getProcessingFee(),
         memo: "memo",
       });
 
@@ -139,6 +142,20 @@
   function updateAmount(e: any) {
     amount = (e.data as number).toString();
   }
+
+  function getProcessingFee() {
+    if ($processingFee === ProcessingFeeMethod.NONE) {
+      return undefined;
+    }
+
+    if ($processingFee === ProcessingFeeMethod.CUSTOM) {
+      return BigNumber.from(customFee);
+    }
+
+    if ($processingFee === ProcessingFeeMethod.RECOMMENDED) {
+      return BigNumber.from("0.01");
+    }
+  }
 </script>
 
 <div class="form-control w-full my-8">
@@ -168,7 +185,7 @@
   </label>
 </div>
 
-<ProcessingFee />
+<ProcessingFee bind:customFee />
 
 {#if !requiresAllowance}
   <button class="btn btn-accent" on:click={bridge} disabled={btnDisabled}>

packages/bridge-ui/src/components/form/ProcessingFee.svelte

@@ -1,11 +1,17 @@
-<script>
+<script lang="ts">
   import { _ } from "svelte-i18n";
   import { processingFee } from "../../store/fee";
-  import { PROCESSING_FEE_META } from "../../domain/fee";
+  import { ProcessingFeeMethod, PROCESSING_FEE_META } from "../../domain/fee";
+
+  export let customFee: string;
 
   function selectProcessingFee(fee) {
     $processingFee = fee;
   }
+
+  function updateAmount(e: any) {
+    customFee = (e.data as number).toString();
+  }
 </script>
 
 <div class="my-10">
@@ -15,10 +21,32 @@
   <div class="flex items-center justify-between">
     {#each Array.from(PROCESSING_FEE_META) as fee}
       <button
-        class="{$processingFee === fee[0] ? 'border-accent hover:border-accent' : ''} btn btn-md"
+        class="{$processingFee === fee[0]
+          ? 'border-accent hover:border-accent'
+          : ''} btn btn-md"
         on:click={() => selectProcessingFee(fee[0])}
         >{fee[1].displayText}</button
       >
     {/each}
   </div>
+
+  {#if $processingFee === ProcessingFeeMethod.CUSTOM}
+    <label
+      class="mt-2 input-group relative rounded-lg bg-dark-4 justify-between items-center pr-4"
+    >
+      <input
+        type="number"
+        step="0.01"
+        placeholder="0.01"
+        min="0"
+        on:input={updateAmount}
+        class="input input-primary bg-dark-4 input-lg flex-1"
+        name="amount"
+      />
+    </label>
+  {:else if $processingFee === ProcessingFeeMethod.RECOMMENDED}
+    <div class="flex items-left justify-between">
+      <span class="mt-2 text-sm">0.01 ETH </span>
+    </div>
+  {/if}
 </div>

packages/bridge-ui/src/domain/block.ts

@@ -0,0 +1,44 @@
+type Block = {
+  number: number;
+  hash: string;
+  parentHash: string;
+  nonce: number;
+  sha3Uncles: string;
+  logsBloom: string[] | string;
+  transactionsRoot: string;
+  stateRoot: string;
+  receiptsRoot: string;
+  miner: string;
+  difficulty: number;
+  totalDifficulty: number;
+  extraData: string;
+  size: number;
+  gasLimit: number;
+  gasUsed: number;
+  timestamp: number;
+  transactions: string[];
+  uncles: string[];
+  baseFeePerGas?: string;
+  mixHash: string;
+};
+
+type BlockHeader = {
+  parentHash: string;
+  ommersHash: string;
+  beneficiary: string;
+  stateRoot: string;
+  transactionsRoot: string;
+  receiptsRoot: string;
+  logsBloom: string[];
+  difficulty: number;
+  height: number;
+  gasLimit: number;
+  gasUsed: number;
+  timestamp: number;
+  extraData: string;
+  mixHash: string;
+  nonce: number;
+  baseFeePerGas: number;
+};
+
+export { Block, BlockHeader };

packages/bridge-ui/src/domain/bridge.ts

@@ -1,4 +1,5 @@
 import type { BigNumber, ethers, Transaction } from "ethers";
+import type { Message } from "./message";
 
 enum BridgeType {
   ERC20 = "ERC20",
@@ -26,10 +27,19 @@ type BridgeOpts = {
   memo?: string;
 };
 
+type ClaimOpts = {
+  message: Message;
+  signal: string;
+  signer: ethers.Signer;
+  destBridgeAddress: string;
+  srcBridgeAddress: string;
+};
+
 interface Bridge {
   RequiresAllowance(opts: ApproveOpts): Promise<boolean>;
   Approve(opts: ApproveOpts): Promise<Transaction>;
   Bridge(opts: BridgeOpts): Promise<Transaction>;
+  Claim(opts: ClaimOpts): Promise<Transaction>;
 }
 
-export { ApproveOpts, BridgeOpts, BridgeType, Bridge };
+export { ApproveOpts, BridgeOpts, BridgeType, Bridge, ClaimOpts };

packages/bridge-ui/src/domain/message.ts

@@ -0,0 +1,25 @@
+import type { BigNumber } from "ethers";
+
+enum MessageStatus {
+  New,
+  Retriable,
+  Done,
+}
+
+type Message = {
+  id: number;
+  sender: string;
+  srcChainId: number;
+  destChainId: number;
+  owner: string;
+  to: string;
+  refundAddress: string;
+  depositValue: BigNumber;
+  callValue: BigNumber;
+  processingFee: BigNumber;
+  gasLimit: BigNumber;
+  data: string;
+  memo: string;
+};
+
+export { Message, MessageStatus };

packages/bridge-ui/src/domain/proof.ts

@@ -0,0 +1,27 @@
+type StorageEntry = {
+  key: string;
+  value: string;
+  proof: string[]; // Array of rlp-serialized MerkleTree-Nodes, starting with the storageHash-Node,
+};
+
+type EthGetProofResponse = {
+  balance: string;
+  codeHash: string;
+  nonce: string;
+  storageHash: string;
+  accountProof: string[]; // array of rlp-serialized merkle nodes beginning with stateRoot-node
+  storageProof: StorageEntry[];
+};
+
+type GenerateProofOpts = {
+  signal: string;
+  sender: string;
+  srcBridgeAddress: string;
+  srcChain: number;
+};
+
+interface Prover {
+  GenerateProof(opts: GenerateProofOpts): Promise<string>;
+}
+
+export { GenerateProofOpts, Prover, StorageEntry, EthGetProofResponse };