fix: removing algoexplorer (#189)

* fix: migrating to allo

* chore: fixing package json

* chore: node bump

* chore: node fetch

.github/workflows/ci.yml

@@ -25,7 +25,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - name: Install dependencies (with cache)
         uses: bahmutov/npm-install@v1

jest.setup.js

@@ -4,6 +4,7 @@
 // Used for __tests__/testing-library.js
 // Learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom/extend-expect';
+import fetch from 'node-fetch';
 
 var localStorageMock = (function () {
   var store = {};
@@ -30,5 +31,6 @@ if (typeof window !== 'undefined') {
   });
 }
 
+global.fetch = fetch;
 global.dummyContract =
   'BiAH6AcBBJmH0wcDAGQmASB6zQMKOJBtxFB4ILNYiiRQngRy5XJoFC96k36qJavhHDIEgQISMwAQIxIQMwEQJBIQQAENMgQhBBIzABAkEhAzARAkEhAzAhAjEhBAAG8yBCEEEjMAECQSEDMBECMSEDMCECMSEEAAAQAzAAEiDjMAIDIDEhAzABMyAxIQMwEBIg4zASAyAxIQEDMAESUSEDMAFCgSEDMAFSgSEDMBBygSEDMBCSgSEDMCACgSEDMCBygSEDMCCCEFEhBCAN4zAAEiDjMAIDIDEhAzABMyAxIQMwAVMgMSEDMBEzIDEhAzABElEhAzABIhBhIQMwERJRIQMwESIQYSEDMAFDMBABIQMwEUKBIQMwIHgCCKaxNJ5pPcb9t1+hmc6CDAgBtvAussZRHPAQiO5V1OjRIQMwIAMwEAEhAzAgiBoMIeEhBCAFozAAEiDjMAIDIDEhAzAAkyAxIQMwEBIg4zASAyAxIQMwETMgMSEDMBFTIDEhAQMwAAKBIQMwAHMwEAEhAzAAiB0OgMDxAzARElEhAzAQAzARQSEDMBEiEFEhBD';

package.json

@@ -1,7 +1,7 @@
 {
   "name": "algoworld-swapper",
   "description": "Free and trustless ASA swapper, powered by Algorand ⚡️",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "private": true,
   "author": "AlgoWorld <[email protected]>",
   "license": "GPL-3.0",
@@ -23,7 +23,8 @@
     "test:e2e:ci": "playwright test --workers=1",
     "test:e2e:ci:local": "E2E_TESTS_BASE_URL=http://localhost:3000 playwright test --workers=1",
     "test:e2e:local": "E2E_TESTS_BASE_URL=http://localhost:3000 playwright test --workers=1 --headed",
-    "commit": "cz"
+    "commit": "cz",
+    "pre-commit": "yarn format && yarn lint && yarn type-check && yarn build"
   },
   "lint-staged": {
     "./src/**/*.{ts,js,jsx,tsx}": [
@@ -32,6 +33,9 @@
     ]
   },
   "dependencies": {
+    "@algorandfoundation/algokit-utils": "^2.2.0",
+    "@blockshake/defly-connect": "^1.1.5",
+    "@daffiwallet/connect": "^1.0.3",
     "@emotion/cache": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/server": "11.11.0",
@@ -42,15 +46,12 @@
     "@mui/lab": "5.0.0-alpha.136",
     "@mui/material": "5.14.0",
     "@mui/x-data-grid": "6.10.0",
+    "@perawallet/connect": "1.3.1",
     "@reduxjs/toolkit": "1.9.5",
+    "@txnlab/use-wallet": "^2.1.0",
+    "@vkruglikov/react-telegram-web-app": "^1.11.0",
     "@walletconnect/modal-sign-html": "^2.5.5",
-    "@algorandfoundation/algokit-utils": "^2.2.0",
-    "@blockshake/defly-connect": "1.1.5",
-    "@daffiwallet/connect": "1.0.3",
-    "@perawallet/connect": "1.3.1",
-    "@txnlab/use-wallet": "2.1.0",
-    "@vkruglikov/react-telegram-web-app": "1.11.0",
-    "algosdk": "2.4.0",
+    "algosdk": "^2.4.0",
     "axios": "1.4.0",
     "axios-retry": "3.5.1",
     "next": "13.4.13",
@@ -96,6 +97,7 @@
     "jest-canvas-mock": "2.5.2",
     "jest-environment-jsdom": "29.6.1",
     "lint-staged": "13.2.3",
+    "node-fetch": "3.3.2",
     "postcss": "8.4.26",
     "prettier": "2.8.8",
     "ts-jest": "29.1.1",

src/common/constants.ts

@@ -32,10 +32,10 @@ export const ALGONODE_INDEXER_URL = (chain: ChainType) => {
     : `https://testnet-idx.algonode.cloud`;
 };
 
-export const ALGOEXPLORER_URL = (chain: ChainType) => {
+export const ALLO_EXPLORER_URL = (chain: ChainType) => {
   return chain.toLowerCase() === `mainnet`
-    ? `https://algoexplorer.io`
-    : `https://testnet.algoexplorer.io`;
+    ? `https://allo.info`
+    : `https://testnet.allo.info`;
 };
 
 export const EMPTY_ASSET_IMAGE_URL = (gateway: IpfsGateway) => {

src/common/public-swaps.spec.ts

@@ -0,0 +1,261 @@
+import { test, expect, Page, BrowserContext } from '@playwright/test';
+import {
+  NAV_BAR_CONNECT_BTN_ID,
+  NAV_BAR_ICON_HOME_BTN_ID,
+  NAV_BAR_SETTINGS_BTN_ID,
+  NAV_BAR_SETTINGS_MENU_ITEM_ID,
+} from '@/components/Headers/constants';
+import {
+  CONNECT_PROVIDER_DIALOG_ID,
+  FROM_ASSET_PICKER_DIALOG_SEARCH_ID,
+  DIALOG_SELECT_BTN_ID,
+  FROM_ASSET_PICKER_DIALOG_ID,
+  TO_ASSET_PICKER_DIALOG_SEARCH_ID,
+  TO_ASSET_PICKER_DIALOG_ID,
+  CONFIRM_DIALOG_ID,
+  SHARE_SWAP_DIALOG_ID,
+  SHARE_SWAP_COPY_BTN_ID,
+  DIALOG_CANCEL_BTN_ID,
+  SWAP_DEACTIVATION_PERFORMED_MESSAGE,
+  MNEMONIC_DIALOG_ID,
+  MNEMONIC_DIALOG_TEXT_INPUT_ID,
+  MNEMONIC_DIALOG_SELECT_BUTTON_ID,
+  INFO_DIALOG_ID,
+  INFO_DIALOG_CLOSE_BTN_ID,
+  CONFIRM_DIALOG_PUBLIC_SWAP_SWITCH_ID,
+} from '@/components/Dialogs/constants';
+import {
+  SWAP_TYPE_PICKER_CARD_ID,
+  FROM_SWAP_OFFERING_ASSET_BTN_ID,
+  TO_SWAP_REQUESTING_BTN_ID,
+} from '@/components/Cards/constants';
+import {
+  ASA_TO_ASA_PAGE_HEADER_ID,
+  CREATE_SWAP_BTN_ID,
+  MY_SWAPS_PAGE_HEADER_ID,
+  PERFORM_SWAP_OPTIN_BUTTON_ID,
+  PERFORM_SWAP_PERFORM_BUTTON_ID,
+  PUBLIC_SWAPS_SEARCH_BUTTON_ID,
+  PUBLIC_SWAPS_SEARCH_FIELD_ID,
+} from '@/common/constants';
+import {
+  MY_SWAPS_TABLE_MANAGE_BTN_ID,
+  PUBLIC_SWAP_OPEN_SWAP_BUTTON_ID,
+} from '@/components/Tables/constants';
+import { CRYPTO_TEXT_FIELD_ID } from '@/components/TextFields/constants';
+import { AW_SWAPPER_BASE_URL, BOB_ADDRESS, delay } from '@/e2e/common';
+
+const DUMMY_ASA_TO_OFFER = `96044943: AWS_TEST`;
+const DUMMY_ASA_ID_TO_REQUEST = `96044943`;
+const DUMMY_ASA_TO_REQUEST = `${DUMMY_ASA_ID_TO_REQUEST}: AWS_TEST`;
+
+let context: BrowserContext;
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  context = await browser.newContext();
+  context.grantPermissions([`clipboard-read`, `clipboard-write`]);
+  page = await context.newPage();
+  await page.goto(AW_SWAPPER_BASE_URL);
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test.describe(`Public Swaps`, () => {
+  test(`Bob should be able to load and connect wallet`, async () => {
+    await page.locator(`id=${NAV_BAR_CONNECT_BTN_ID}`).click();
+    await expect(
+      page.locator(`id=${CONNECT_PROVIDER_DIALOG_ID}`),
+    ).toBeVisible();
+    await page.locator(`div[role="button"]:has-text("Mnemonic")`).click();
+    await expect(page.locator(`id=${MNEMONIC_DIALOG_ID}`)).toBeVisible();
+    await page
+      .locator(`id=${MNEMONIC_DIALOG_TEXT_INPUT_ID}`)
+      .fill(process.env.E2E_TESTS_BOB_MNEMONIC ?? ``);
+
+    await page.locator(`id=${MNEMONIC_DIALOG_SELECT_BUTTON_ID}`).click();
+
+    await expect(page.locator(`id=${MNEMONIC_DIALOG_ID}`)).toBeHidden();
+    await expect(page.locator(`id=${CONNECT_PROVIDER_DIALOG_ID}`)).toBeHidden();
+  });
+
+  test(`Bob should be able to navigate to Asa to Asa page`, async () => {
+    await expect(page.locator(`id=${ASA_TO_ASA_PAGE_HEADER_ID}`)).toBeHidden();
+    await Promise.all([
+      page.waitForNavigation(),
+      page.locator(`id=${SWAP_TYPE_PICKER_CARD_ID(`ASA to ASA`)}`).click(),
+    ]);
+    await expect(page.locator(`id=${ASA_TO_ASA_PAGE_HEADER_ID}`)).toBeVisible();
+  });
+
+  test(`Bob should be able to select offering asset`, async () => {
+    await expect(
+      page.locator(`id=${FROM_ASSET_PICKER_DIALOG_ID}`),
+    ).toBeHidden();
+    await page.locator(`id=${FROM_SWAP_OFFERING_ASSET_BTN_ID}`).click();
+    await expect(
+      page.locator(`id=${FROM_ASSET_PICKER_DIALOG_ID}`),
+    ).toBeVisible();
+
+    await page.locator(`id=${FROM_ASSET_PICKER_DIALOG_SEARCH_ID}`).click();
+    await page.locator(`text=${DUMMY_ASA_TO_OFFER}`).click();
+
+    await page.locator(`id=${CRYPTO_TEXT_FIELD_ID}`).click();
+    await page.locator(`id=${CRYPTO_TEXT_FIELD_ID}`).fill(`1`);
+    await page.locator(`id=${DIALOG_SELECT_BTN_ID}`).click();
+    await expect(
+      page.locator(`id=${FROM_ASSET_PICKER_DIALOG_ID}`),
+    ).toBeHidden();
+  });
+
+  test(`Bob should be able to select requesting asset`, async () => {
+    await expect(page.locator(`id=${TO_ASSET_PICKER_DIALOG_ID}`)).toBeHidden();
+    await page.locator(`id=${TO_SWAP_REQUESTING_BTN_ID}`).click();
+    await expect(page.locator(`id=${TO_ASSET_PICKER_DIALOG_ID}`)).toBeVisible();
+
+    await page
+      .locator(`id=${TO_ASSET_PICKER_DIALOG_SEARCH_ID}`)
+      .fill(DUMMY_ASA_ID_TO_REQUEST);
+    await delay(2000);
+
+    const elements = await page.$$(`text=${DUMMY_ASA_TO_REQUEST}`);
+    await elements[1].click();
+
+    await page.locator(`id=${CRYPTO_TEXT_FIELD_ID}`).click();
+    await page.locator(`id=${CRYPTO_TEXT_FIELD_ID}`).fill(`1`);
+    await page.locator(`id=${DIALOG_SELECT_BTN_ID}`).click();
+    await expect(page.locator(`id=${TO_ASSET_PICKER_DIALOG_ID}`)).toBeHidden();
+  });
+
+  test(`Bob should be able to initiate create public swap`, async () => {
+    await expect(page.locator(`id=${CONFIRM_DIALOG_ID}`)).toBeHidden();
+    await page.locator(`id=${CREATE_SWAP_BTN_ID}`).click({ timeout: 120000 });
+    await expect(page.locator(`id=${CONFIRM_DIALOG_ID}`)).toBeVisible();
+    await page.locator(`id=${CONFIRM_DIALOG_PUBLIC_SWAP_SWITCH_ID}`).click();
+    await page.locator(`id=${DIALOG_SELECT_BTN_ID}`).click();
+    await expect(page.locator(`id=${CONFIRM_DIALOG_ID}`)).toBeHidden();
+  });
+
+  test(`Bob should successfully create swap and display share dialog`, async () => {
+    await expect(page.locator(`id=${SHARE_SWAP_DIALOG_ID}`)).toBeVisible({
+      timeout: 100000,
+    });
+    await page.locator(`id=${SHARE_SWAP_COPY_BTN_ID}`).click();
+    expect(
+      await page.evaluate(() => {
+        const content = navigator.clipboard.readText();
+        return content;
+      }),
+    ).toContain(`/swap/`);
+    await page.locator(`id=${DIALOG_CANCEL_BTN_ID}`).click();
+    await expect(page.locator(`id=${SHARE_SWAP_DIALOG_ID}`)).toBeHidden();
+
+    await page.locator(`id=${NAV_BAR_ICON_HOME_BTN_ID}`).click();
+    await page.locator(`id=${NAV_BAR_SETTINGS_BTN_ID}`).click();
+    await page.locator(`id=${NAV_BAR_SETTINGS_MENU_ITEM_ID(`Logout`)}`).click();
+    await page.waitForTimeout(1000 * 5);
+
+    await page.goto(`${AW_SWAPPER_BASE_URL}/public-swaps`);
+  });
+
+  test(`Anonymous user should find Bob's public swap`, async () => {
+    await page.waitForTimeout(1000 * 5);
+    await page.locator(`id=${PUBLIC_SWAPS_SEARCH_FIELD_ID}`).fill(BOB_ADDRESS);
+    await page.locator(`id=${PUBLIC_SWAPS_SEARCH_BUTTON_ID}`).click();
+    await page.waitForTimeout(1000 * 5);
+    await page.locator(`id=${PUBLIC_SWAP_OPEN_SWAP_BUTTON_ID}`).click();
+    await page.waitForTimeout(5000);
+    const pages = context.pages();
+    await pages[0].close();
+    page = pages[1];
+  });
+
+  test(`Alice should be able to load and connect wallet`, async () => {
+    await page.locator(`id=${NAV_BAR_CONNECT_BTN_ID}`).click();
+    await expect(
+      page.locator(`id=${CONNECT_PROVIDER_DIALOG_ID}`),
+    ).toBeVisible();
+    await page.locator(`div[role="button"]:has-text("Mnemonic")`).click();
+    await expect(page.locator(`id=${MNEMONIC_DIALOG_ID}`)).toBeVisible();
+    await page.waitForTimeout(5000);
+    await page
+      .locator(`id=${MNEMONIC_DIALOG_TEXT_INPUT_ID}`)
+      .fill(process.env.E2E_TESTS_ALICE_MNEMONIC ?? ``);
+
+    await page.locator(`id=${MNEMONIC_DIALOG_SELECT_BUTTON_ID}`).click();
+    await expect(page.locator(`id=${MNEMONIC_DIALOG_ID}`)).toBeHidden();
+    await expect(page.locator(`id=${CONNECT_PROVIDER_DIALOG_ID}`)).toBeHidden();
+  });
+
+  test(`Alice should perform swaps`, async () => {
+    const optInButtonVisible = await page
+      .locator(`id=${PERFORM_SWAP_OPTIN_BUTTON_ID}`)
+      .isVisible();
+
+    if (optInButtonVisible) {
+      await page.locator(`id=${PERFORM_SWAP_OPTIN_BUTTON_ID}`).click();
+      await expect(
+        page.locator(`id=${PERFORM_SWAP_OPTIN_BUTTON_ID}`),
+      ).toBeHidden({ timeout: 30000 });
+    }
+
+    await page.locator(`id=${PERFORM_SWAP_PERFORM_BUTTON_ID}`).click();
+    await expect(page.locator(`id=${CONFIRM_DIALOG_ID}`)).toBeVisible();
+    await page.locator(`id=${DIALOG_SELECT_BTN_ID}`).click();
+    await expect(page.locator(`id=${CONFIRM_DIALOG_ID}`)).toBeHidden();
+
+    await expect(page.locator(`id=${INFO_DIALOG_ID}`)).toBeVisible({
+      timeout: 100000,
+    });
+
+    await page.locator(`id=${INFO_DIALOG_CLOSE_BTN_ID}`).click();
+    await expect(page.locator(`id=${INFO_DIALOG_ID}`)).toBeHidden();
+
+    await page.locator(`id=${NAV_BAR_ICON_HOME_BTN_ID}`).click();
+    await page.locator(`id=${NAV_BAR_SETTINGS_BTN_ID}`).click();
+    await page.locator(`id=${NAV_BAR_SETTINGS_MENU_ITEM_ID(`Logout`)}`).click();
+  });
+
+  test(`Bob should successfully remove created swap`, async () => {
+    await page.locator(`id=${NAV_BAR_CONNECT_BTN_ID}`).click();
+    await expect(
+      page.locator(`id=${CONNECT_PROVIDER_DIALOG_ID}`),
+    ).toBeVisible();
+    await page.locator(`div[role="button"]:has-text("Mnemonic")`).click();
+    await expect(page.locator(`id=${MNEMONIC_DIALOG_ID}`)).toBeVisible();
+    await page
+      .locator(`id=${MNEMONIC_DIALOG_TEXT_INPUT_ID}`)
+      .fill(process.env.E2E_TESTS_BOB_MNEMONIC ?? ``);
+    await page.locator(`id=${MNEMONIC_DIALOG_SELECT_BUTTON_ID}`).click();
+    await expect(page.locator(`id=${MNEMONIC_DIALOG_ID}`)).toBeHidden();
+    await expect(page.locator(`id=${CONNECT_PROVIDER_DIALOG_ID}`)).toBeHidden();
+
+    await page.locator(`id=${NAV_BAR_SETTINGS_BTN_ID}`).click();
+    await Promise.all([
+      page.waitForNavigation(),
+      page.locator(`id=${NAV_BAR_SETTINGS_MENU_ITEM_ID(`My Swaps`)}`).click(),
+    ]);
+    await expect(page.locator(`id=${MY_SWAPS_PAGE_HEADER_ID}`)).toBeVisible();
+
+    const escrowAddress = await page.evaluate(async () => {
+      const clipboardContent = await navigator.clipboard.readText();
+      const escrow = clipboardContent
+        .substring(clipboardContent.lastIndexOf(`/`) + 1)
+        .split(`?`)[0];
+      return escrow;
+    });
+
+    await page
+      .locator(`id=${MY_SWAPS_TABLE_MANAGE_BTN_ID(escrowAddress)}`)
+      .click();
+    await page.locator(`text=Delete`).click();
+
+    await expect(
+      page.locator(`text=${SWAP_DEACTIVATION_PERFORMED_MESSAGE}`),
+    ).toBeVisible({
+      timeout: 120000,
+    });
+  });
+});