Bridge tests

packages/erc20-deployer/contracts/ERC20.sol

@@ -7,8 +7,8 @@ import "@openzeppelin/contracts/access/Ownable.sol";
 import "@openzeppelin/contracts/token/ERC20/extensions/draft-ERC20Permit.sol";
 import "@openzeppelin/contracts/token/ERC20/extensions/ERC20Votes.sol";
 
-contract MyToken is ERC20, ERC20Burnable, Ownable, ERC20Permit, ERC20Votes {
-    constructor() ERC20("MyToken", "MTK") ERC20Permit("MyToken") {}
+contract TestToken is ERC20, ERC20Burnable, Ownable, ERC20Permit, ERC20Votes {
+    constructor() ERC20("TestToken", "MTK") ERC20Permit("TestToken") {}
 
     function mint(address to, uint256 amount) public onlyOwner {
         _mint(to, amount);

packages/react/README.md

@@ -44,3 +44,19 @@ The component for bridging tokens.
 #### Transactions
 
 This component will fetch all withdrawals and display in a table. The user can Prove or Finalize these transactions.
+
+### Running tests
+
+Make sure a hardhat node is running.
+
+```sh
+cd packages/erc20-deployer
+npx hardhat node
+```
+
+Then you can run the tests
+
+```sh
+npm run test
+
+```

packages/react/package.json

@@ -17,21 +17,30 @@
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
     "lint": "eslint \"**/*.ts*\"",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
     "sentry:sourcemaps": "sentry-cli sourcemaps inject --org supermodular --project pgn ./dist && sentry-cli sourcemaps upload --org supermodular --project pgn ./dist",
     "tsup": "tsup && npm run sentry:sourcemaps"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.0.3",
+    "@vitest/coverage-istanbul": "^0.33.0",
     "autoprefixer": "^10.4.14",
     "eslint": "^7.32.0",
     "eslint-config-custom": "workspace:*",
+    "jsdom": "^22.1.0",
     "tailwindcss": "3.3.2",
     "tsconfig": "workspace:*",
     "tsup": "^6.2.3",
-    "typescript": "^4.8.3"
+    "typescript": "^4.8.3",
+    "vitest": "^0.33.0"
   },
   "dependencies": {
     "@conduitxyz/sdk": "^0.0.3",

packages/react/src/components/ChainSelect.tsx

@@ -13,16 +13,20 @@ export function ChainSelect({
   chainOut: Chain;
 }) {
   const { switchNetwork } = useSwitchNetwork();
-
   return (
     <div className="flex items-end">
       <div className="flex-1">
         <Label>From</Label>
-        <ChainItem>{chainIn.name}</ChainItem>
+        <ChainItem data-testid="from">{chainIn.name}</ChainItem>
       </div>
-      <SwapButton type="button" onClick={() => switchNetwork?.(chainOut.id)}>
+      <SwapButton
+        type="button"
+        disabled={!switchNetwork}
+        onClick={() => switchNetwork?.(chainOut.id)}
+      >
         ⇌
       </SwapButton>
+
       <div className="flex-1">
         <Label>To</Label>
         <ChainItem className="justify-end">{chainOut.name}</ChainItem>

packages/react/src/components/TokenAmount.tsx

@@ -36,11 +36,11 @@ export function TokenAmount({
           type="number"
           step="0.00000001"
           min={0}
+          id="amount"
           size="lg"
           placeholder="0.0"
           className="flex-1"
           disabled={disabled}
-          id="amount"
           {...form.register("amount", { valueAsNumber: true })}
         />
         <MaxButton

packages/react/src/hooks/crossChainMessenger.ts

@@ -30,6 +30,7 @@ export function useCrossChainMessenger({
   const {
     networks: { l1, l2 },
   } = usePGN();
+
   /*
       Needs to handle 3 use-cases:
       - Deposit           L1 => L2 (Signer is L1)
@@ -61,7 +62,6 @@ export function useCrossChainMessenger({
     l1SignerOrProvider = useProvider({ chainId: l1?.id });
     l2SignerOrProvider = useSigner({ chainId: l2?.id }).data;
   }
-
   return useQuery(
     ["crosschain-messenger", { l1AsSigner, readonly, l1, l2 }],
     async () => {

packages/react/src/hooks/transactions.ts

@@ -106,6 +106,7 @@ export function useFinalize() {
   const { data: crossChainMessenger } = useCrossChainMessenger({
     l1AsSigner: true,
   });
+
   return useMutation(async (hash: string) =>
     crossChainMessenger?.finalizeMessage(hash).then((tx) => tx.wait())
   );

packages/react/src/index.tsx

@@ -67,11 +67,13 @@ export const BridgeProvider = memo(({ config, children }: BridgeProps) => {
 });
 
 function mergeConfig(config: PGNConfig) {
-  let merged = merge(config, defaultConfig) as PGNConfig;
-  const { networks } = merged;
-  const tokens = merged.tokens.filter(
+  const theme = merge(config.theme || {}, defaultConfig.theme);
+  const tokens = config.tokens.filter(
     (token: Token) =>
-      token.tokens[networks.l1.network] && token.tokens[networks.l2.network]
+      token.tokens[config.networks.l1.network] &&
+      token.tokens[config.networks.l2.network]
   );
-  return { ...merged, tokens };
+
+  console.log(config.networks);
+  return { ...config, tokens, theme };
 }

packages/react/src/providers/Wagmi.tsx

@@ -1,5 +1,5 @@
-import { memo, useMemo, useState } from "react";
-import { WagmiConfig, configureChains } from "wagmi";
+import { useMemo, useState } from "react";
+import { WagmiConfig, configureChains, createClient } from "wagmi";
 import { QueryClient } from "@tanstack/react-query";
 import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
 import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
@@ -9,18 +9,32 @@ import {
   getDefaultWallets,
 } from "@rainbow-me/rainbowkit";
 import { jsonRpcProvider } from "wagmi/providers/jsonRpc";
+import { PGNConfig } from "../types";
+import { MockConnector } from "wagmi/connectors/mock";
+import { hardhat } from "wagmi/chains";
 import {
   safeWallet,
   argentWallet,
   trustWallet,
   ledgerWallet,
 } from "@rainbow-me/rainbowkit/wallets";
 
-import { PGNConfig } from "../types";
-import { createClient } from "wagmi";
+import { Wallet } from "ethers";
 
 const alchemyKey = process.env.NEXT_PUBLIC_ALCHEMY_KEY;
 
+const isTest = process.env.NODE_ENV === "test";
+
+const testConnectors = [
+  new MockConnector({
+    chains: [hardhat, { ...hardhat, id: hardhat.id + 1 }],
+    options: {
+      signer: new Wallet(
+        "0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80"
+      ),
+    },
+  }),
+];
 export const WagmiProvider = ({
   children,
   pgnConfig,
@@ -79,7 +93,7 @@ export const WagmiProvider = ({
 
     const client = createClient({
       autoConnect: true,
-      connectors,
+      connectors: isTest ? testConnectors : connectors,
       provider,
     });