chore(bridge-ui): improve type checking (#13856)

Co-authored-by: dave | d1onys1us <[email protected]>

packages/bridge-ui/src/bridge/ETHBridge.spec.ts

@@ -68,6 +68,8 @@ describe('bridge tests', () => {
       contractAddress: '0x1234',
       spenderAddress: '0x',
     });
+
+    expect(tx).toEqual({});
   });
 
   it('bridges with processing fee, owner !== to', async () => {

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { fetchFeeData } from '@wagmi/core';
+  import { type Address,fetchFeeData } from '@wagmi/core';
   import { BigNumber, Contract, ethers, type Signer } from 'ethers';
   import { _ } from 'svelte-i18n';
 
@@ -357,7 +357,7 @@
       // Set it manually.
       tx.chainId = $srcChain.id;
 
-      const userAddress = await $signer.getAddress();
+      const userAddress = (await $signer.getAddress()) as Address;
 
       let transactions: BridgeTransaction[] =
         await storageService.getAllByAddress(userAddress);

packages/bridge-ui/src/constants/envVars.ts

@@ -1,22 +1,23 @@
 // TODO: think about a way to blow up the build if env var is missing
 //       dotenv-safe ?
 // TODO: explain each of these env vars
+import type { Address } from '@wagmi/core';
 
-import type { Address, ChainID } from '../domain/chain';
+import type { ChainID } from '../domain/chain';
 
 export const L1_RPC: string = import.meta.env?.VITE_L1_RPC_URL;
 
-export const L1_TOKEN_VAULT_ADDRESS: Address = import.meta.env
-  ?.VITE_L1_TOKEN_VAULT_ADDRESS;
+export const L1_TOKEN_VAULT_ADDRESS = import.meta.env
+  ?.VITE_L1_TOKEN_VAULT_ADDRESS as Address;
 
-export const L1_BRIDGE_ADDRESS: Address = import.meta.env
-  ?.VITE_L1_BRIDGE_ADDRESS;
+export const L1_BRIDGE_ADDRESS = import.meta.env
+  ?.VITE_L1_BRIDGE_ADDRESS as Address;
 
-export const L1_CROSS_CHAIN_SYNC_ADDRESS: Address = import.meta.env
-  ?.VITE_L1_CROSS_CHAIN_SYNC_ADDRESS;
+export const L1_CROSS_CHAIN_SYNC_ADDRESS = import.meta.env
+  ?.VITE_L1_CROSS_CHAIN_SYNC_ADDRESS as Address;
 
-export const L1_SIGNAL_SERVICE_ADDRESS: Address = import.meta.env
-  ?.VITE_L1_SIGNAL_SERVICE_ADDRESS;
+export const L1_SIGNAL_SERVICE_ADDRESS = import.meta.env
+  ?.VITE_L1_SIGNAL_SERVICE_ADDRESS as Address;
 
 export const L1_CHAIN_ID: ChainID = parseInt(import.meta.env?.VITE_L1_CHAIN_ID);
 
@@ -26,17 +27,17 @@ export const L1_EXPLORER_URL: string = import.meta.env?.VITE_L1_EXPLORER_URL;
 
 export const L2_RPC: string = import.meta.env?.VITE_L2_RPC_URL;
 
-export const L2_TOKEN_VAULT_ADDRESS: Address = import.meta.env
-  ?.VITE_L2_TOKEN_VAULT_ADDRESS;
+export const L2_TOKEN_VAULT_ADDRESS = import.meta.env
+  ?.VITE_L2_TOKEN_VAULT_ADDRESS as Address;
 
-export const L2_BRIDGE_ADDRESS: Address = import.meta.env
-  ?.VITE_L2_BRIDGE_ADDRESS;
+export const L2_BRIDGE_ADDRESS = import.meta.env
+  ?.VITE_L2_BRIDGE_ADDRESS as Address;
 
-export const L2_CROSS_CHAIN_SYNC_ADDRESS: Address = import.meta.env
-  ?.VITE_L2_CROSS_CHAIN_SYNC_ADDRESS;
+export const L2_CROSS_CHAIN_SYNC_ADDRESS = import.meta.env
+  ?.VITE_L2_CROSS_CHAIN_SYNC_ADDRESS as Address;
 
-export const L2_SIGNAL_SERVICE_ADDRESS: Address = import.meta.env
-  ?.VITE_L2_SIGNAL_SERVICE_ADDRESS;
+export const L2_SIGNAL_SERVICE_ADDRESS = import.meta.env
+  ?.VITE_L2_SIGNAL_SERVICE_ADDRESS as Address;
 
 export const L2_CHAIN_ID: ChainID = parseInt(import.meta.env?.VITE_L2_CHAIN_ID);
 

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

@@ -1,9 +1,8 @@
+import type { Address } from '@wagmi/core';
 import type { ComponentType } from 'svelte';
 
 export type ChainID = number;
 
-export type Address = string;
-
 export type Chain = {
   id: ChainID;
   name: string;

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

@@ -1,4 +1,6 @@
-import type { Address, ChainID } from './chain';
+import type { Address } from '@wagmi/core';
+
+import type { ChainID } from './chain';
 import type { BridgeTransaction } from './transaction';
 
 export type GetAllByAddressResponse = {
@@ -13,7 +15,7 @@ export type PaginationParams = {
 
 export interface RelayerAPI {
   getAllBridgeTransactionByAddress(
-    address: string,
+    address: Address,
     pagination: PaginationParams,
     chainID?: number,
   ): Promise<GetAllByAddressResponse>;
@@ -49,13 +51,13 @@ export type APIResponseTransaction = {
   status: number;
   eventType: number;
   chainID: number;
-  canonicalTokenAddress: string;
+  canonicalTokenAddress: Address;
   canonicalTokenSymbol: string;
   canonicalTokenName: string;
   canonicalTokenDecimals: number;
   amount: string;
   msgHash: string;
-  messageOwner: string;
+  messageOwner: Address;
   event: string;
 };
 
@@ -66,7 +68,7 @@ export type RelayerBlockInfo = {
 };
 
 export type APIRequestParams = {
-  address: string;
+  address: Address;
   chainID?: number;
   event?: string;
 };

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

@@ -1,13 +1,14 @@
+import type { Address } from '@wagmi/core';
 import type { ComponentType } from 'svelte';
 
-type Address = {
+type TokenAddress = {
   chainId: number;
-  address: string;
+  address: Address;
 };
 
 export type Token = {
   name: string;
-  addresses: Address[];
+  addresses: TokenAddress[];
   symbol: string;
   decimals: number;
   logoUrl?: string;

packages/bridge-ui/src/globals.d.ts

@@ -1 +1,2 @@
 declare module '@lottiefiles/svelte-lottie-player';
+declare module 'identicon.js';

packages/bridge-ui/src/proof/ProofService.spec.ts

@@ -121,17 +121,15 @@ describe('prover tests', () => {
   });
 
   it('throws on invalid proof', async () => {
-    mockProvider.send.mockImplementation(
-      (method: string, params: unknown[]) => {
-        if (method === 'eth_getBlockByHash') {
-          return block;
-        }
-
-        if (method === 'eth_getProof') {
-          return invalidStorageProof;
-        }
-      },
-    );
+    mockProvider.send.mockImplementation((method: string) => {
+      if (method === 'eth_getBlockByHash') {
+        return block;
+      }
+
+      if (method === 'eth_getProof') {
+        return invalidStorageProof;
+      }
+    });
 
     const prover: ProofService = new ProofService(map);
 
@@ -149,17 +147,15 @@ describe('prover tests', () => {
   });
 
   it('generates proof', async () => {
-    mockProvider.send.mockImplementation(
-      (method: string, params: unknown[]) => {
-        if (method === 'eth_getBlockByHash') {
-          return block;
-        }
-
-        if (method === 'eth_getProof') {
-          return storageProof;
-        }
-      },
-    );
+    mockProvider.send.mockImplementation((method: string) => {
+      if (method === 'eth_getBlockByHash') {
+        return block;
+      }
+
+      if (method === 'eth_getProof') {
+        return storageProof;
+      }
+    });
 
     const prover: ProofService = new ProofService(map);
 
@@ -183,17 +179,15 @@ describe('generate release proof tests', () => {
   });
 
   it('throws on invalid proof', async () => {
-    mockProvider.send.mockImplementation(
-      (method: string, params: unknown[]) => {
-        if (method === 'eth_getBlockByHash') {
-          return block;
-        }
-
-        if (method === 'eth_getProof') {
-          return invalidStorageProof2;
-        }
-      },
-    );
+    mockProvider.send.mockImplementation((method: string) => {
+      if (method === 'eth_getBlockByHash') {
+        return block;
+      }
+
+      if (method === 'eth_getProof') {
+        return invalidStorageProof2;
+      }
+    });
 
     const prover: ProofService = new ProofService(map);
 
@@ -211,17 +205,15 @@ describe('generate release proof tests', () => {
   });
 
   it('generates proof', async () => {
-    mockProvider.send.mockImplementation(
-      (method: string, params: unknown[]) => {
-        if (method === 'eth_getBlockByHash') {
-          return block;
-        }
-
-        if (method === 'eth_getProof') {
-          return storageProof2;
-        }
-      },
-    );
+    mockProvider.send.mockImplementation((method: string) => {
+      if (method === 'eth_getBlockByHash') {
+        return block;
+      }
+
+      if (method === 'eth_getProof') {
+        return storageProof2;
+      }
+    });
 
     const prover: ProofService = new ProofService(map);
 

packages/bridge-ui/src/relayer-api/RelayerAPIService.spec.ts

@@ -146,7 +146,7 @@ describe('RelayerAPIService', () => {
       data: dataFromAPI,
     });
 
-    const data = await relayerApi.getAllBridgeTransactionByAddress('0x123', {
+    await relayerApi.getAllBridgeTransactionByAddress('0x123', {
       page: 0,
       size: 100,
     });

packages/bridge-ui/src/relayer-api/RelayerAPIService.ts

@@ -1,9 +1,9 @@
+import type { Address } from '@wagmi/core';
 import axios from 'axios';
 import { BigNumber, Contract, ethers } from 'ethers';
 
 import { chains } from '../chain/chains';
 import { bridgeABI, erc20ABI, tokenVaultABI } from '../constants/abi';
-import type { Address } from '../domain/chain';
 import { MessageStatus } from '../domain/message';
 import type { RecordProviders } from '../domain/provider';
 import type {
@@ -126,14 +126,10 @@ export class RelayerAPIService implements RelayerAPI {
   }
 
   async getAllBridgeTransactionByAddress(
-    address: string,
+    address: Address,
     paginationParams: PaginationParams,
     chainID?: number,
   ): Promise<GetAllByAddressResponse> {
-    if (!address) {
-      throw new Error('address needed to fetch transactions');
-    }
-
     const params = {
       address,
       chainID,

packages/bridge-ui/src/signer/subscriber.spec.ts

@@ -1,4 +1,4 @@
-import type { Signer, Transaction } from 'ethers';
+import type { Signer } from 'ethers';
 
 import type { PaginationInfo, RelayerBlockInfo } from '../domain/relayerApi';
 import type { Token } from '../domain/token';

packages/bridge-ui/src/signer/subscriber.ts

@@ -1,4 +1,5 @@
-import type { Signer } from 'ethers';
+import type { Address } from '@wagmi/core';
+import { constants, type Signer } from 'ethers';
 
 import type { PaginationInfo } from '../domain/relayerApi';
 import type { BridgeTransaction } from '../domain/transaction';
@@ -13,7 +14,7 @@ const log = getLogger('signer:subscriber');
 
 // We keep track of the current user address to avoid
 // querying the API for transactions if the address is the same.
-let currentUserAddress = '';
+let currentUserAddress: Address = constants.AddressZero;
 
 /**
  * Subscribe to signer changes.
@@ -25,7 +26,7 @@ export async function subscribeToSigner(newSigner: Signer | null) {
   if (newSigner) {
     log('New signer set', newSigner);
 
-    const userAddress = await newSigner.getAddress();
+    const userAddress = (await newSigner.getAddress()) as Address;
 
     // We actually don't want to run all this if the
     // new address is the same as the previous one, since it
@@ -84,7 +85,7 @@ export async function subscribeToSigner(newSigner: Signer | null) {
   } else {
     log('Signer deleted');
 
-    currentUserAddress = '';
+    currentUserAddress = constants.AddressZero;
     transactions.set([]);
     userTokens.set([]);
     paginationInfo.set(null);

packages/bridge-ui/src/storage/StorageService.spec.ts

@@ -1,4 +1,4 @@
-import { BigNumber, BigNumberish, ethers } from 'ethers';
+import { BigNumber } from 'ethers';
 
 import { L1_CHAIN_ID, L2_CHAIN_ID } from '../constants/envVars';
 import { MessageStatus } from '../domain/message';

packages/bridge-ui/src/storage/StorageService.ts

@@ -1,8 +1,9 @@
+import type { Address } from '@wagmi/core';
 import { BigNumber, Contract, ethers } from 'ethers';
 
 import { chains } from '../chain/chains';
 import { bridgeABI, erc20ABI, tokenVaultABI } from '../constants/abi';
-import type { Address, ChainID } from '../domain/chain';
+import type { ChainID } from '../domain/chain';
 import { MessageStatus } from '../domain/message';
 import type { BridgeTransaction, Transactioner } from '../domain/transaction';
 import { jsonParseOrEmptyArray } from '../utils/jsonParseOrEmptyArray';
@@ -111,15 +112,15 @@ export class StorageService implements Transactioner {
     this.providers = providers;
   }
 
-  private _getTransactionsFromStorage(address: string): BridgeTransaction[] {
+  private _getTransactionsFromStorage(address: Address): BridgeTransaction[] {
     const existingTransactions = this.storage.getItem(
       `${STORAGE_PREFIX}-${address.toLowerCase()}`,
     );
 
     return jsonParseOrEmptyArray<BridgeTransaction>(existingTransactions);
   }
 
-  async getAllByAddress(address: string): Promise<BridgeTransaction[]> {
+  async getAllByAddress(address: Address): Promise<BridgeTransaction[]> {
     const txs = this._getTransactionsFromStorage(address);
 
     log('Transactions from storage', txs);
@@ -231,7 +232,7 @@ export class StorageService implements Transactioner {
   }
 
   async getTransactionByHash(
-    address: string,
+    address: Address,
     hash: string,
   ): Promise<BridgeTransaction | undefined> {
     const txs = this._getTransactionsFromStorage(address);
@@ -329,7 +330,7 @@ export class StorageService implements Transactioner {
     return bridgeTx;
   }
 
-  updateStorageByAddress(address: string, txs: BridgeTransaction[] = []) {
+  updateStorageByAddress(address: Address, txs: BridgeTransaction[] = []) {
     log('Updating storage with transactions', txs);
     this.storage.setItem(
       `${STORAGE_PREFIX}-${address.toLowerCase()}`,