feat: token migration portal

.circleci/config.yml

@@ -25,7 +25,7 @@ jobs:
           condition:
             and:
               - not:
-                  equal: ["16.20.2", << parameters.node_version >>]
+                  equal: ["20.9.0", << parameters.node_version >>]
           steps:
             # node 17+ workaround https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported
             - run:
@@ -35,7 +35,7 @@ jobs:
           condition:
             and:
               - not:
-                  equal: ["16.20.2", << parameters.node_version >>]
+                  equal: ["20.9.0", << parameters.node_version >>]
           steps:
             # node 17+ workaround https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported
             - run:
@@ -54,7 +54,7 @@ jobs:
         default: "RELEASE"
     executor:
       name: node/default
-      tag: "16.20.2"
+      tag: "20.9.0"
     resource_class: large
     steps:
       - install-packages
@@ -114,7 +114,7 @@ workflows:
           matrix:
             parameters:
               node_version:
-                - "16.20.2"
+                - "20.9.0"
       - create:
           name: create-<< matrix.app_env >>
           matrix:

.env

@@ -3,3 +3,4 @@ HTTPS=true
 REACT_APP_WEB3AUTH_NETWORK=testnet
 REACT_APP_WEB3AUTH_CLIENTID=BKj3lr6GfN2CnvO4CIKo5fuoCg_TpHsAPK7R8lbl6kUlz0CAH_5mFNswScEb7M6szV4hd1Tkwa2oPZ9KiXJB-44
 REACT_APP_VERSION=${npm_package_version}
+REACT_APP_TALIB_URL="http://localhost:3001/api/v1/neighborhoods/1/"

.env.production

@@ -1,2 +1,3 @@
 REACT_APP_WEB3AUTH_NETWORK=cyan
-REACT_APP_WEB3AUTH_CLIENTID=BLlqF8V3D0hLGDBfedOKvBXEZMYsdJB5kMX2GNCyXB5ZMU1enVyciGhgihBqW8E6NTaeZO182nF8zMiiMd1cAmk
+REACT_APP_WEB3AUTH_CLIENTID=BLlqF8V3D0hLGDBfedOKvBXEZMYsdJB5kMX2GNCyXB5ZMU1enVyciGhgihBqW8E6NTaeZO182nF8zMiiMd1cAmk
+REACT_APP_TALIB_URL="https://talib.liftedinit.app/api/v1/neighborhoods/6/"

.env.staging

@@ -1,2 +1,3 @@
 REACT_APP_WEB3AUTH_NETWORK=testnet
-REACT_APP_WEB3AUTH_CLIENTID=BKj3lr6GfN2CnvO4CIKo5fuoCg_TpHsAPK7R8lbl6kUlz0CAH_5mFNswScEb7M6szV4hd1Tkwa2oPZ9KiXJB-44
+REACT_APP_WEB3AUTH_CLIENTID=BKj3lr6GfN2CnvO4CIKo5fuoCg_TpHsAPK7R8lbl6kUlz0CAH_5mFNswScEb7M6szV4hd1Tkwa2oPZ9KiXJB-44
+REACT_APP_TALIB_URL="http://localhost:3001/api/v1/neighborhoods/1/"

e2e/.env.example

@@ -1,4 +1,5 @@
 MAIN_WALLET_PEM="-----BEGIN PRIVATE KEY-----MC4CAQAwBQYDK2VwBCIEIHcoTY2RYa48O8ONAgfxEw+15MIyqSat0/QpwA1YxiPD-----END PRIVATE KEY-----"
 WALLET_1_SEED="shallow abstract tail attend public right modify awesome limb media toward other"
 WALLET_2_SEED="warrior wrist okay work pave destroy coral baby blouse rhythm prepare caught"
-WALLET_3_SEED="burden name asset report require crouch risk escape clutch spike gas wet"
+WALLET_3_SEED="burden name asset report require crouch risk escape clutch spike gas wet"
+DESTINATION_ADDRESS="manifest1q9d53rh7gq2cjq2j0nk7n0rj9qjwvnmywchg6n"

e2e/const.ts

@@ -9,4 +9,5 @@ export const mainWalletPem = process.env.MAIN_WALLET_PEM as string
 export const wallet1Seed = process.env.WALLET_1_SEED as string
 export const wallet2Seed = process.env.WALLET_2_SEED as string
 export const wallet3Seed = process.env.WALLET_3_SEED as string
+export const destinationAddress = process.env.DESTINATION_ADDRESS as string
 export const FIVE_MINUTES = 300_000

e2e/pages/home.ts

@@ -1,4 +1,4 @@
-import { Locator, Page, expect } from "@playwright/test"
+import { expect, Locator, Page } from "@playwright/test"
 
 export class HomePage {
   readonly url = "/#/"
@@ -47,8 +47,7 @@ export class HomePage {
     await this.page.locator('input[name="name"]').fill(name)
     await this.page.locator("button", { hasText: "Save" }).click()
     await this.verifyActiveWallet(name)
-    const address = this.getActiveWalletAddress()
-    return address
+    return this.getActiveWalletAddress()
   }
 
   async importWalletViaPem({
@@ -66,8 +65,7 @@ export class HomePage {
     await this.page.locator('textarea[name="pem"]').fill(pem)
     await this.page.locator("text=Save").click()
     await this.verifyActiveWallet(name)
-    const address = this.getActiveWalletAddress()
-    return address
+    return this.getActiveWalletAddress()
   }
 
   async importWalletViaSeed({
@@ -94,8 +92,7 @@ export class HomePage {
     const saveBtn = this.page.locator("text=Save")
     await saveBtn.click()
     await this.verifyActiveWallet(name)
-    const address = this.getActiveWalletAddress()
-    return address
+    return this.getActiveWalletAddress()
   }
 
   async switchWallet(name: string) {
@@ -162,4 +159,15 @@ export class HomePage {
     expect(title).not.toBe(null)
     return title as string
   }
+
+  async removeLegacyNetwork() {
+    await this.openNetworkMenu()
+    await this.page.locator('[aria-label="edit network"]').last().click()
+    const removeBtn = this.page.locator("data-testid=remove network button")
+    await expect(removeBtn).toBeDisabled()
+    const url = await this.page.locator('input[name="url"]').inputValue()
+    await this.page.locator('input[name="deleteUrl"]').fill(url as string)
+    await expect(removeBtn).not.toBeDisabled()
+    await removeBtn.click()
+  }
 }

e2e/pages/token-migration.ts

@@ -0,0 +1,101 @@
+import { Locator, Page, expect } from "@playwright/test"
+
+export class TokenMigration {
+  readonly page: Page
+  readonly url = "/#/token-migration-portal"
+  readonly createNewMigrationButton: Locator
+  readonly migrationHistoryButton: Locator
+  readonly sourceAddressSelect: Locator
+  readonly userAddressSelect: Locator // Only used in the Account use-case
+  readonly destinationAddressInput: Locator
+  readonly amountInput: Locator
+  readonly amountType: Locator
+  readonly nextButton: Locator
+
+  constructor(page: Page) {
+    this.page = page
+    this.createNewMigrationButton = this.page.locator(
+      '[aria-label="create-new-migration-btn"]',
+    )
+    this.migrationHistoryButton = this.page.locator(
+      '[aria-label="view-migration-history-btn"]',
+    )
+    this.sourceAddressSelect = this.page.locator(
+      '[aria-label="user-account-address"]',
+    )
+    this.userAddressSelect = this.page.locator('[aria-label="user-address"]')
+    this.destinationAddressInput = this.page.locator(
+      '[aria-label="destination-address"]',
+    )
+    this.amountType = this.page.locator('[aria-label="select-asset-type"]')
+    this.amountInput = this.page.locator('[aria-label="select-asset-amount"]')
+    this.nextButton = this.page.locator('[data-testid="next-btn"]')
+  }
+
+  async goto() {
+    await this.page.goto(this.url)
+  }
+
+  async createMigration(
+    from: string,
+    destination: string,
+    amount: string,
+    denom: string,
+    maybeUserAddress?: string,
+  ) {
+    await this.goto()
+    await this.createNewMigrationButton.click()
+    await this.sourceAddressSelect.selectOption({
+      value: from,
+    })
+    await this.nextButton.click()
+
+    // Account use-case
+    if (from.length === 55 && maybeUserAddress !== undefined) {
+      await this.userAddressSelect.selectOption({
+        value: maybeUserAddress,
+      })
+      await this.nextButton.click()
+    }
+
+    await this.amountType.selectOption({ label: denom })
+    await this.amountInput.fill(amount)
+    await this.nextButton.click()
+
+    await this.destinationAddressInput.fill(destination)
+    await this.nextButton.click()
+
+    await this.page.waitForSelector('[data-testid="confirmation-box"]')
+    await this.nextButton.click()
+
+    await this.page.waitForURL("/#/token-migration-portal/migration-history/*")
+
+    return await this.page.locator('[aria-label="uuid"]').textContent()
+  }
+
+  async verifyMigrationInHistory(uuid: string, address: string) {
+    await this.goto()
+    await this.migrationHistoryButton.click()
+    await this.sourceAddressSelect.selectOption({
+      value: address,
+    })
+    await this.page.waitForSelector(`[aria-label="${uuid}"]`)
+    const uuidElement = await this.page
+      .locator(`[aria-label="${uuid}"]`)
+      .textContent()
+    expect(uuidElement).toBe(uuid)
+  }
+
+  async verifyExecutedMultiSigMigrationInHistory(
+    uuid: string,
+    address: string,
+  ) {
+    await this.goto()
+    await this.migrationHistoryButton.click()
+    await this.sourceAddressSelect.selectOption({
+      value: address,
+    })
+    const elements = await this.page.$$(`[aria-label="${uuid}"]`)
+    expect(elements.length).toBe(2)
+  }
+}

e2e/playwright.config.ts

@@ -10,35 +10,36 @@ const config: PlaywrightTestConfig = {
     viewport: null,
     ignoreHTTPSErrors: true,
   },
+
   projects: [
-    {
-      name: "chromium",
-      use: {
-        ...devices["Desktop Chrome"],
-      },
-    },
+    // {
+    //   name: "chromium",
+    //   use: {
+    //     ...devices["Desktop Chrome"],
+    //   },
+    // },
     {
       name: "firefox",
       use: {
         ...devices["Desktop Firefox"],
       },
     },
-    {
-      name: "webkit",
-      use: { ...devices["Desktop Safari"] },
-    },
-    {
-      name: "iphone12-promax",
-      use: {
-        ...devices["iPhone 12 Pro Max"],
-      },
-    },
-    {
-      name: "pixel-5",
-      use: {
-        ...devices["Pixel 5"],
-      },
-    },
+    // {
+    //   name: "webkit",
+    //   use: { ...devices["Desktop Safari"] },
+    // },
+    // {
+    //   name: "iphone12-promax",
+    //   use: {
+    //     ...devices["iPhone 12 Pro Max"],
+    //   },
+    // },
+    // {
+    //   name: "pixel-5",
+    //   use: {
+    //     ...devices["Pixel 5"],
+    //   },
+    // },
   ],
 }
 export default config

e2e/tests/accounts.spec.ts

@@ -53,6 +53,17 @@ test("submit, approve, revoke, and execute a multisig transaction", async ({
   page,
 }) => {
   const { homePage, accountsPage } = await setup(page)
+
+  // Remove the /api/legacy network for this test as it is causing duplicate transactions listing
+  await homePage.openNetworkMenu()
+  await page.locator('[aria-label="edit network"]').last().click()
+  const removeBtn = page.locator("data-testid=remove network button")
+  expect(removeBtn).toBeDisabled()
+  const url = await page.locator('input[name="url"]').inputValue()
+  await page.locator('input[name="deleteUrl"]').fill(url as string)
+  expect(removeBtn).not.toBeDisabled()
+  await removeBtn.click()
+
   await homePage.switchWallet("wallet1")
   await accountsPage.goto()
   await page.locator("text=account name").click()

e2e/tests/home.spec.ts

@@ -6,7 +6,7 @@ import { HomePage } from "../pages/home"
 let wallet1Address: string = ""
 async function setup(page: Page) {
   const homePage = new HomePage(page)
-  homePage.goto()
+  await homePage.goto()
   wallet1Address = await homePage.importWalletViaSeed({
     name: "wallet1",
     seedPhrase: wallet1Seed,
@@ -18,10 +18,12 @@ async function setup(page: Page) {
 
 test("send tokens", async ({ page }) => {
   const { homePage } = await setup(page)
+  await homePage.verifyActiveWallet("main")
   const symbol = "MFX"
-  const startAmount = await page
+  let startAmount = await page
     .locator(`[aria-label="${symbol} amount"]`)
     .textContent()
+  startAmount = (startAmount as string).replace(/,/g, "")
   await homePage.sendToken({
     toAddress: wallet1Address,
     symbol,
@@ -82,15 +84,31 @@ test("add a network", async ({ page }) => {
 test("edit a network", async ({ page }) => {
   const { homePage } = await setup(page)
   await homePage.openNetworkMenu()
-  await page.locator('[aria-label="edit network"]').first().click()
+  await homePage.addNetworkButton.click()
   await page.locator('input[name="name"]').fill("new-network")
+  await page.locator('input[name="url"]').fill("/new-api")
   await page.locator("text=save").click()
   const networkName = await homePage.networkMenuTrigger.textContent()
   expect(networkName).toBe("new-network")
+
+  await homePage.openNetworkMenu()
+  await page.locator('[aria-label="edit network"]').first().click()
+  await page.locator('input[name="name"]').fill("new-network2")
+  await page.locator("text=save").click()
+  const networkName2 = await homePage.networkMenuTrigger.textContent()
+  expect(networkName2).toBe("new-network2")
 })
 
 test("remove a network", async ({ page }) => {
   const { homePage } = await setup(page)
+  await homePage.openNetworkMenu()
+  await homePage.addNetworkButton.click()
+  await page.locator('input[name="name"]').fill("new-network")
+  await page.locator('input[name="url"]').fill("/new-api")
+  await page.locator("text=save").click()
+  const networkName = await homePage.networkMenuTrigger.textContent()
+  expect(networkName).toBe("new-network")
+
   await homePage.openNetworkMenu()
   await page.locator('[aria-label="edit network"]').first().click()
   const removeBtn = page.locator("data-testid=remove network button")
@@ -100,6 +118,6 @@ test("remove a network", async ({ page }) => {
   await page.locator('input[name="deleteUrl"]').fill(url as string)
   expect(removeBtn).not.toBeDisabled()
   await removeBtn.click()
-  const networkName = await homePage.networkMenuTrigger.textContent()
-  expect(networkName).not.toBe(name)
+  const networkName2 = await homePage.networkMenuTrigger.textContent()
+  expect(networkName2).not.toBe(name)
 })