feat!: replace outdated methods (#189)

* feat!: replaced addTokenMethod

* feat: remove add network method

src/metamask/addNetwork.ts

@@ -1,38 +1,22 @@
-import {
-  clickOnButton,
-  getErrorMessage,
-  openNetworkDropdown,
-  typeOnInputField,
-} from "../helpers";
-import { AddNetwork } from "../index";
+import { clickOnButton } from "../helpers";
 import { DappeteerPage } from "../page";
 
-export const addNetwork =
+export const acceptAddNetwork =
   (page: DappeteerPage) =>
-  async ({ networkName, rpc, chainId, symbol }: AddNetwork): Promise<void> => {
+  async (shouldSwitch = false): Promise<void> => {
     await page.bringToFront();
-    await openNetworkDropdown(page);
-    await clickOnButton(page, "Add network");
-
-    const responsePromise = page.waitForResponse(
-      (response) => new URL(response.url()).pathname === new URL(rpc).pathname
-    );
-
-    await page.waitForTimeout(500);
-
-    await typeOnInputField(page, "Network name", networkName);
-    await typeOnInputField(page, "New RPC URL", rpc);
-    await typeOnInputField(page, "Chain ID", String(chainId));
-    await typeOnInputField(page, "Currency symbol", symbol);
-
-    await responsePromise;
-    await page.waitForTimeout(500);
-
-    const errorMessage = await getErrorMessage(page);
-    if (errorMessage) throw new SyntaxError(errorMessage);
-
-    await clickOnButton(page, "Save");
+    await page.reload();
+    await clickOnButton(page, "Approve");
+    if (shouldSwitch) {
+      await clickOnButton(page, "Switch network");
+    } else {
+      await clickOnButton(page, "Cancel");
+    }
+  };
 
-    await page.waitForXPath(`//*[text() = '${networkName}']`);
-    await clickOnButton(page, "Got it");
+export const rejectAddNetwork =
+  (page: DappeteerPage) => async (): Promise<void> => {
+    await page.bringToFront();
+    await page.reload();
+    await clickOnButton(page, "Cancel");
   };

src/metamask/addToken.ts

@@ -1,32 +1,16 @@
-import {
-  clickOnButton,
-  clickOnElement,
-  clickOnLogo,
-  getElementByContent,
-  typeOnInputField,
-} from "../helpers";
-import { AddToken } from "../index";
+import { clickOnButton } from "../helpers";
 import { DappeteerPage } from "../page";
 
-export const addToken =
-  (page: DappeteerPage) =>
-  async ({ tokenAddress, symbol, decimals = 0 }: AddToken): Promise<void> => {
+export const acceptAddToken =
+  (page: DappeteerPage) => async (): Promise<void> => {
     await page.bringToFront();
-    await clickOnButton(page, "Assets");
-    await page.waitForSelector(".asset-list-item__token-button", {
-      visible: true,
-    });
-    await clickOnElement(page, "import tokens");
-    await clickOnButton(page, "Custom token");
-
-    await typeOnInputField(page, "Token decimal", String(decimals), true);
-    await typeOnInputField(page, "Token contract address", tokenAddress);
-    await page.waitForTimeout(333);
-    await typeOnInputField(page, "Token symbol", symbol, true);
-
-    await clickOnButton(page, "Add custom token");
-    await clickOnButton(page, "Import tokens");
+    await page.reload();
+    await clickOnButton(page, "Add token");
+  };
 
-    await getElementByContent(page, symbol);
-    await clickOnLogo(page);
+export const rejectAddToken =
+  (page: DappeteerPage) => async (): Promise<void> => {
+    await page.bringToFront();
+    await page.reload();
+    await clickOnButton(page, "Cancel");
   };

src/metamask/index.ts

@@ -5,8 +5,7 @@ import { DappeteerPage } from "../page";
 import { acceptDialog } from "../snap/acceptDialog";
 import { rejectDialog } from "../snap/rejectDialog";
 import { getAllNotifications, installSnap, invokeSnap } from "../snap";
-import { addNetwork } from "./addNetwork";
-import { addToken } from "./addToken";
+import { acceptAddNetwork, rejectAddNetwork } from "./addNetwork";
 import { approve } from "./approve";
 import { confirmTransaction } from "./confirmTransaction";
 import { deleteAccount, deleteNetwork, getTokenBalance } from "./helpers";
@@ -16,6 +15,7 @@ import { sign } from "./sign";
 import { switchAccount } from "./switchAccount";
 import { switchNetwork } from "./switchNetwork";
 import { unlock } from "./unlock";
+import { acceptAddToken, rejectAddToken } from "./addToken";
 
 export type SetSignedIn = (state: boolean) => Promise<void>;
 export type GetSingedIn = () => Promise<boolean>;
@@ -39,7 +39,8 @@ export const getMetaMask = (page: DappeteerPage): Promise<Dappeteer> => {
 
   return new Promise<Dappeteer>((resolve) => {
     resolve({
-      addNetwork: addNetwork(page),
+      acceptAddNetwork: acceptAddNetwork(page),
+      rejectAddNetwork: rejectAddNetwork(page),
       approve: approve(page),
       confirmTransaction: confirmTransaction(page, getSingedIn),
       importPK: importPk(page),
@@ -48,7 +49,8 @@ export const getMetaMask = (page: DappeteerPage): Promise<Dappeteer> => {
       switchAccount: switchAccount(page),
       switchNetwork: switchNetwork(page),
       unlock: unlock(page, setSignedIn, getSingedIn),
-      addToken: addToken(page),
+      acceptAddToken: acceptAddToken(page),
+      rejectAddToken: rejectAddToken(page),
       helpers: {
         getTokenBalance: getTokenBalance(page),
         deleteAccount: deleteAccount(page),

src/types.ts

@@ -36,19 +36,6 @@ export type MetaMaskOptions = {
   showTestNets?: boolean;
 };
 
-export type AddNetwork = {
-  networkName: string;
-  rpc: string;
-  chainId: number;
-  symbol: string;
-};
-
-export type AddToken = {
-  tokenAddress: string;
-  symbol?: string;
-  decimals?: number;
-};
-
 export type TransactionOptions = {
   gas?: number;
   gasLimit?: number;
@@ -58,8 +45,10 @@ export type TransactionOptions = {
 export type Dappeteer = {
   lock: () => Promise<void>;
   unlock: (password: string) => Promise<void>;
-  addNetwork: (options: AddNetwork) => Promise<void>;
-  addToken: (options: AddToken) => Promise<void>;
+  acceptAddNetwork: (shouldSwitch?: boolean) => Promise<void>;
+  rejectAddNetwork: () => Promise<void>;
+  acceptAddToken: () => Promise<void>;
+  rejectAddToken: () => Promise<void>;
   importPK: (pk: string) => Promise<void>;
   switchAccount: (accountNumber: number) => Promise<void>;
   switchNetwork: (network: string) => Promise<void>;

test/basic.spec.ts

@@ -58,6 +58,7 @@ describe("basic interactions", function () {
     await metamask.switchNetwork("localhost");
     const tokenBalance: number = await metamask.helpers.getTokenBalance("ETH");
     expect(tokenBalance).to.be.greaterThan(0);
+    await metamask.switchNetwork("mainnet");
   });
 
   it("should return 0 token balance when token not found", async () => {
@@ -67,29 +68,31 @@ describe("basic interactions", function () {
     expect(tokenBalance).to.be.equal(0);
   });
 
-  // TODO: Metamask UI is flaky there
+  it("should not add token", async () => {
+    await clickElement(testPage, ".add-token-button");
+    await metamask.rejectAddToken();
+    await testPage.waitForSelector("#addTokenResultFail");
+  });
+
   it("should add token", async () => {
-    await metamask.switchNetwork("mainnet");
-    await metamask.addToken({
-      tokenAddress: "0x4f96fe3b7a6cf9725f59d353f723c1bdb64ca6aa",
-      symbol: "KAKI",
-    });
+    await clickElement(testPage, ".add-token-button");
+    await metamask.acceptAddToken();
+    await testPage.waitForSelector("#addTokenResultSuccess");
   });
 
-  it("should add network with required params", async () => {
-    await metamask.addNetwork({
-      networkName: "Optimism",
-      rpc: "https://mainnet.optimism.io",
-      chainId: 10,
-      symbol: "OP",
-    });
+  it("should not add network", async () => {
+    await clickElement(testPage, ".add-network-button");
+    await metamask.page.waitForTimeout(500);
+    await metamask.rejectAddNetwork();
+    await testPage.waitForSelector("#addNetworkResultFail");
+  });
 
-    const selectedNetwork = await metamask.page.evaluate(
-      () =>
-        document.querySelector(".network-display > span:nth-child(2)").innerHTML
-    );
-    expect(selectedNetwork).to.be.equal("Optimism");
-    await metamask.switchNetwork("local");
+  it("should add network and switch", async () => {
+    await clickElement(testPage, ".add-network-button");
+    await metamask.page.waitForTimeout(500);
+    await metamask.acceptAddNetwork(true);
+    await testPage.waitForSelector("#addNetworkResultSuccess");
+    await metamask.switchNetwork("mainnet");
   });
 
   it("should import private key", async () => {

test/dapp/index.html

@@ -13,6 +13,8 @@
     <button class="increase-button">Increase</button>
     <button class="increase-fees-button">Increase Fees</button>
     <button class="transfer-button">Transfer</button>
+    <button class="add-token-button">Add token</button>
+    <button class="add-network-button">Add network</button>
 
     <script src="data.js"></script>
     <script src="main.js"></script>

test/dapp/main.js

@@ -3,48 +3,103 @@ async function start() {
 
   const web3 = new Web3(window.ethereum);
   console.log(web3);
-  const counterContract = new web3.eth.Contract(ContractInfo.abi, ContractInfo.address);
+  const counterContract = new web3.eth.Contract(
+    ContractInfo.abi,
+    ContractInfo.address
+  );
 
-  const increaseButton = document.querySelector('.increase-button');
-  increaseButton.addEventListener('click', async function () {
+  const increaseButton = document.querySelector(".increase-button");
+  increaseButton.addEventListener("click", async function () {
     await counterContract.methods.increase().send({ from: accounts[0] });
-    const txSent = document.createElement('div');
-    txSent.id = 'txSent';
+    const txSent = document.createElement("div");
+    txSent.id = "txSent";
     document.body.appendChild(txSent);
   });
 
-  const increaseFeesButton = document.querySelector('.increase-fees-button');
-  increaseFeesButton.addEventListener('click', async function () {
+  const increaseFeesButton = document.querySelector(".increase-fees-button");
+  increaseFeesButton.addEventListener("click", async function () {
     await counterContract.methods.increase().send({ from: accounts[0] });
-    const txSent = document.createElement('div');
-    txSent.id = 'feesTxSent';
+    const txSent = document.createElement("div");
+    txSent.id = "feesTxSent";
     document.body.appendChild(txSent);
   });
 
-  const connectButton = document.querySelector('.connect-button');
-  connectButton.addEventListener('click', async function () {
+  const connectButton = document.querySelector(".connect-button");
+  connectButton.addEventListener("click", async function () {
     accounts = await web3.eth.requestAccounts();
-    const connected = document.createElement('div');
-    connected.id = 'connected';
+    const connected = document.createElement("div");
+    connected.id = "connected";
     document.body.appendChild(connected);
   });
 
-  const signButton = document.querySelector('.sign-button');
-  signButton.addEventListener('click', async function () {
-    const message = web3.utils.sha3('TEST');
+  const signButton = document.querySelector(".sign-button");
+  signButton.addEventListener("click", async function () {
+    const message = web3.utils.sha3("TEST");
     await web3.eth.sign(message, accounts[0]);
-    const signed = document.createElement('div');
-    signed.id = 'signed';
+    const signed = document.createElement("div");
+    signed.id = "signed";
     document.body.appendChild(signed);
   });
 
-  const transferButton = document.querySelector('.transfer-button');
-  transferButton.addEventListener('click', async function () {
-    await web3.eth.sendTransaction({ to: accounts[0], from: accounts[0], value: web3.utils.toWei('0.01') });
-    const transfer = document.createElement('div');
-    transfer.id = 'transferred';
+  const transferButton = document.querySelector(".transfer-button");
+  transferButton.addEventListener("click", async function () {
+    await web3.eth.sendTransaction({
+      to: accounts[0],
+      from: accounts[0],
+      value: web3.utils.toWei("0.01"),
+    });
+    const transfer = document.createElement("div");
+    transfer.id = "transferred";
     document.body.appendChild(transfer);
   });
+
+  const addTokenButton = document.querySelector(".add-token-button");
+  addTokenButton.addEventListener("click", async function () {
+    const resultElem = document.createElement("div");
+    try {
+      await window.ethereum.request({
+        method: "wallet_watchAsset",
+        params: {
+          type: "ERC20",
+          options: {
+            address: "0x4f96fe3b7a6cf9725f59d353f723c1bdb64ca6aa",
+            symbol: "KAKI",
+            decimals: 18,
+          },
+        },
+      });
+      resultElem.id = "addTokenResultSuccess";
+    } catch (e) {
+      resultElem.id = "addTokenResultFail";
+    }
+    document.body.appendChild(resultElem);
+  });
+
+  const addNetworkButton = document.querySelector(".add-network-button");
+  addNetworkButton.addEventListener("click", async function () {
+    const resultElem = document.createElement("div");
+    try {
+      await window.ethereum.request({
+        method: "wallet_addEthereumChain",
+        params: [
+          {
+            chainId: "0xa",
+            chainName: "Optimism",
+            nativeCurrency: {
+              name: "ETH",
+              symbol: "ETH", // 2-6 characters long
+              decimals: 18,
+            },
+            rpcUrls: ["https://mainnet.optimism.io"],
+          },
+        ],
+      });
+      resultElem.id = "addNetworkResultSuccess";
+    } catch (e) {
+      resultElem.id = "addNetworkResultFail";
+    }
+    document.body.appendChild(resultElem);
+  });
 }
 
 start();