Merge pull request #3 from johanneskares/feature/documentation

Documentation

Author: johanneskares

README.md

@@ -1,8 +1,14 @@
 # Wallet Mock
-Fully functional E2E tests for your dApp. Installs a fully operational Mock Wallet into the [Playwright](https://github.com/microsoft/playwright) Browser Context, making it discoverable through [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963) and leveraging [viem](https://github.com/wevm/viem) `Account` and `Transport` interfaces, so you can completely customize the behavior.
+Fully functional end-to-end (E2E) tests for your decentralized application (dApp). This package installs a fully operational Web3 Wallet into the [Playwright](https://github.com/microsoft/playwright) Browser Context. The wallet can be configured to execute on the blockchain or return mock responses. It is discoverable through [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963) and leverages [viem](https://github.com/wevm/viem) `Account` and `Transport` interfaces for easy customization.
+
+## Features
+- Create comprehensive E2E tests for your dApps, including real blockchain transactions
+- Mock specific calls or all calls to the wallet
+- All wallet actions are pre-approved by default, eliminating the need for user interaction
 
 ## Quickstart
 ```ts
+import { test } from "@playwright/test";
 import { installMockWallet } from "@johanneskares/mock-wallet";
 import { privateKeyToAccount } from "viem/accounts";
 import { http } from "viem";
@@ -23,8 +29,52 @@ test("Your Test", async ({ page }) => {
   await page.getByRole("menuitem", { name: "Mock Wallet" }).click();
 });
 ```
+> **Note:** This setup will execute actual transactions on the blockchain without user intervention using the provided Private Key.
+
+### Uniswap Example
+The Mock Wallet will show up as an EIP-6963 compatible wallet.
+
+<img width="500" alt="Screenshot Uniswap" src="https://github.com/johanneskares/wallet-mock/assets/1416628/b3d31df0-6273-42da-b00f-63bc8294a592">
+
+## Mocking
+Here's a simple example of how to mock a specific function while using regular RPC calls for all other functions:
+
+```ts
+await installMockWallet({
+  page,
+  account: privateKeyToAccount(
+    "0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80",
+  ),
+  transport: (config) => {
+    return custom({
+      request: async ({ method, params }) => {
+        // Mock only this RPC call
+        if (method === "eth_sendTransaction") {
+          return "0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef";
+        }
+
+        return await http()(config).request({ method, params });
+      },
+    })(config);
+  },
+});
+```
+
+## Testing with Hardhat
+To test with a local Hardhat node:
 
-Please note! This will execute actual transactions on the blockchain without user intervention using the Private Key. You can use a [Custom Transport](https://viem.sh/docs/clients/transports/custom.html) to intercept the behavior.
+1. Start your local Hardhat Node:
+   ```shell
+   npx hardhat node
+   ```
 
-## Rationale
-Why not do E2E testing with actual Browser Wallets, like Metamask? Well, you should be testing your dApp, not the implementation of a Browser Wallet. Experience shows, that E2E tests using Browser Wallets are much more flaky and unreliable.
+2. Connect the Mock Wallet to your Hardhat Node:
+   ```ts
+   await installMockWallet({
+     page,
+     account: privateKeyToAccount(
+       "0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80",
+     ),
+     transport: http("http://127.0.0.1:8545"),
+   });
+   ```

package.json

@@ -38,6 +38,7 @@
     "build": "tsc",
     "dev": "tsc -W",
     "test": "playwright test",
-    "test-ui": "playwright test --ui"
+    "test-ui": "playwright test --ui",
+    "install-conventional-commit": "curl -o- https://raw.githubusercontent.com/tapsellorg/conventional-commits-git-hook/master/scripts/install.sh | sh"
   }
 }

tests/transaction.spec.ts

@@ -1,15 +1,22 @@
 import { expect, test } from "@playwright/test";
 import { installMockWallet } from "./../src/installMockWallet";
 import { privateKeyToAccount } from "viem/accounts";
-import { http, isHex } from "viem";
+import { custom, http, isHex } from "viem";
 
 test.beforeEach(async ({ page }) => {
   await installMockWallet({
     page,
     account: privateKeyToAccount(
       isHex(process.env.PRIVATE_KEY) ? process.env.PRIVATE_KEY : "0x",
     ),
-    transport: http(),
+    transport: (config) => {
+      return custom({
+        request: async ({ method, params }) => {
+          console.log("LOG", method, params);
+          return await http()(config).request({ method, params });
+        },
+      })(config);
+    },
   });
 });