CU-86dt27bzj - Create a WcSdk method to wipe all requests from a dapp

CityOfZion · Apr 17, 2024 · 804f2d2 · 804f2d2
1 parent cc5d957
commit 804f2d2
Show file tree

Hide file tree

Showing 9 changed files with 323 additions and 298 deletions.
diff --git a/e2e/pnpm-lock.yaml b/e2e/pnpm-lock.yaml
diff --git a/e2e/src/models/ExampleProject.ts b/e2e/src/models/ExampleProject.ts
@@ -45,4 +45,24 @@ export default class ExampleProject {
     if (seconds < 0) throw Error('Cannot await negative seconds')
     await this.page.waitForTimeout(seconds * 1000)
   }
+
+  // Don't use this command with tags that are expected not to exist.
+  async awaitTestId(testId: string) {
+    await this.page.waitForSelector(`[data-testid="${testId}"]`)
+  }
+
+  async awaitAndGetTestId(testId: string) {
+    await this.awaitTestId(testId)
+    return this.page.getByTestId(testId)
+  }
+
+  async awaitAndGetAllTestId(testId: string) {
+    await this.awaitTestId(testId)
+    return this.page.getByTestId(testId).all()
+  }
+
+  async awaitAndClickTestId(testId: string) {
+    await this.awaitTestId(testId)
+    await (await this.awaitAndGetTestId(testId)).click()
+  }
 }
diff --git a/e2e/src/pageCommonSteps/DappReactSteps.ts b/e2e/src/pageCommonSteps/DappReactSteps.ts
@@ -2,8 +2,7 @@ import ExampleProject from '../models/ExampleProject'
 import { getCleanInnerHTML } from '../helpers/CleanerHelper'
 
 export async function getReactDappUri(dappPage: ExampleProject): Promise<string> {
-  await dappPage.page.getByTestId('hello-world__get-uri-button').click() // Click the button to get the dapp URI
-  await dappPage.awaitSeconds(2) // Wait for 2 seconds
-  await dappPage.page.getByTestId('hello-world__get-uri-button').click() // Click the button to get the dapp URI
-  return await getCleanInnerHTML(dappPage.page.getByTestId('hello-world__dapp-uri')) // Get and store the clean dapp URI
+  await dappPage.awaitAndClickTestId('hello-world__get-uri-button') // Click the button to get the dapp URI
+  await dappPage.awaitAndClickTestId('hello-world__get-uri-button') // Click the button to get the dapp URI
+  return await getCleanInnerHTML(await dappPage.awaitAndGetTestId('hello-world__dapp-uri')) // Get and store the clean dapp URI
 }
diff --git a/e2e/src/pageCommonSteps/WalletReactSteps.ts b/e2e/src/pageCommonSteps/WalletReactSteps.ts
@@ -3,29 +3,26 @@ import { ACCOUNT_PASSWORD } from '../constants/GenericData'
 import { MAX_RETRIES } from '../constants/DevConstants'
 
 export async function createNewReactWallet(walletPage: ExampleProject) {
-  await walletPage.page.getByTestId('account-entry__continue').click() // Select network
-  await walletPage.page.getByTestId('account-entry__create-new-account').click() // Select to create a new account
-  await walletPage.page.getByTestId('account-entry__password-input').fill(ACCOUNT_PASSWORD) // Fill in the password
-  await walletPage.page.getByTestId('account-entry__login-or-create').click() // Finish the account creation
+  await walletPage.awaitAndClickTestId('account-entry__continue') // Select network
+  await walletPage.awaitAndClickTestId('account-entry__create-new-account') // Select to create a new account
+  await (await walletPage.awaitAndGetTestId('account-entry__password-input')).fill(ACCOUNT_PASSWORD) // Fill in the password
+  await walletPage.awaitAndClickTestId('account-entry__login-or-create') // Finish the account creation
 }
 
 export async function connectDappToReactWallet(walletPage: ExampleProject, dappUri: string) {
   await walletPage.page.getByTestId('connect-dapp__dapp-uri-input').focus() // Focus on the input field for the dapp URI
   await walletPage.page.getByTestId('connect-dapp__dapp-uri-input').fill(dappUri.trim()) // Fill in the dapp URI
-  await walletPage.awaitSeconds(1) // Wait for 1 second
-  await walletPage.page.getByTestId('proposal-card__approve').click() // Click the approve button
-  await walletPage.awaitSeconds(1) // Wait for 1 second
+  await walletPage.awaitAndClickTestId('proposal-card__approve') // Click the approve button
 }
 export async function acceptPendingRequestToReactWallet(walletPage: ExampleProject) {
   let retries = 0
   let requests = []
   do {
-    requests = await walletPage.page.getByTestId('default-card__pending-request').all()
-    if (requests.length == 0) await walletPage.awaitSeconds(2)
+    requests = await walletPage.awaitAndGetAllTestId('default-card__pending-request')
+    if (requests.length === 0) await walletPage.awaitSeconds(1)
     retries++
   } while (retries < MAX_RETRIES && requests.length == 0)
-  if (requests.length == 0) throw Error('No pending requests are found')
-  await (await walletPage.page.getByTestId('default-card__pending-request').all())[0].click()
-  await walletPage.awaitSeconds(2)
-  await walletPage.page.getByTestId('request-card__approve').click()
+  if (requests.length === 0) throw Error('No pending requests are found')
+  await walletPage.awaitAndClickTestId('default-card__pending-request')
+  await walletPage.awaitAndClickTestId('request-card__approve')
 }
diff --git a/e2e/tests/DappMethods.spec.ts b/e2e/tests/DappMethods.spec.ts
@@ -10,7 +10,7 @@ test('Create a new account and connect with a dapp (React)', async ({ context })
   const walletPage = WALLET_REACT
 
   await connectReactDappToNewReactAccount(context, dappPage, walletPage)
-  const dappCard = walletPage.page.getByTestId('default-card_sesseion-card') // Get the dapp card element
+  const dappCard = await walletPage.awaitAndGetTestId('default-card_sesseion-card') // Get the dapp card element
 
   // Check if the dapp card element is defined, indicating successful connection
   expect(dappCard).toBeDefined()
@@ -21,11 +21,9 @@ test('Test Disconnect on dapp (React)', async ({ context }) => {
   const dappPage = DAPP_REACT
   const walletPage = WALLET_REACT
   await connectReactDappToNewReactAccount(context, dappPage, walletPage)
-  await dappPage.page.waitForLoadState('networkidle') // Wait to load request
-  await dappPage.awaitSeconds(5) // Wait for 5 seconds
-  await dappPage.page.getByTestId('hello-world__disconnect').click() // Click on disconnect button
-  await dappPage.awaitSeconds(2) // Wait for 2 seconds
-  const response = await dappPage.page.getByTestId('hello-world__dapp-uri').all()
+  await dappPage.awaitAndClickTestId('hello-world__disconnect') // Click on disconnect button
+  await dappPage.awaitTestId('hello-world__dapp-uri')
+  const response = await dappPage.awaitAndGetAllTestId('hello-world__dapp-uri')
   expect(response).toBeDefined() // Verify  if the response had a return
   expect(response.length).toBeGreaterThan(0)
 })
@@ -35,11 +33,8 @@ test('Test Get My balance on dapp (React)', async ({ context }) => {
   const dappPage = DAPP_REACT
   const walletPage = WALLET_REACT
   await connectReactDappToNewReactAccount(context, dappPage, walletPage)
-  await dappPage.page.waitForLoadState('networkidle') // Wait to load request
-  await dappPage.awaitSeconds(5) // Wait for 5 seconds
-  await dappPage.page.getByTestId('hello-world__get-my-balance').click() // Click on get my balance button
-  await dappPage.awaitSeconds(2) // Wait for 2 seconds
-  const response = await getAnyFromInnerHTML(dappPage.page.getByTestId('hello-world__method-response'))
+  await dappPage.awaitAndClickTestId('hello-world__get-my-balance') // Click on get my balance button
+  const response = await getAnyFromInnerHTML(await dappPage.awaitAndGetTestId('hello-world__method-response'))
   expect(response).toBeDefined() // Verify  if the response had a return
   expect(response.state).toBeDefined() // Verify if the response returned state
   expect(response.state).toBe('HALT') // Verify if state is HALT
@@ -50,19 +45,16 @@ test('Test Sign and Verify Message on dapp (React)', async ({ context }) => {
   const dappPage = DAPP_REACT
   const walletPage = WALLET_REACT
   await connectReactDappToNewReactAccount(context, dappPage, walletPage)
-  await dappPage.page.waitForLoadState('networkidle') // Wait to load request
-  await dappPage.awaitSeconds(5) // Wait for 5 seconds
-  await dappPage.page.getByTestId('hello-world__sign-and-verify').click() // Click on sign and verify button
+  await dappPage.awaitAndClickTestId('hello-world__sign-and-verify') // Click on sign and verify button
   await acceptPendingRequestToReactWallet(walletPage)
-  await dappPage.awaitSeconds(2) // Wait for 2 seconds
-  const response = await getAnyFromInnerHTML(dappPage.page.getByTestId('hello-world__method-response'))
+  const response = await getAnyFromInnerHTML(await dappPage.awaitAndGetTestId('hello-world__method-response'))
   expect(response).toBeDefined() // Verify  if the response had a return
   expect(response.publicKey).toBeDefined() // Verify if the response returned publicKey
   expect(response.data).toBeDefined() // Verify if the response returned data
   expect(response.salt).toBeDefined()
   expect(response.messageHex).toBeDefined() // Verify if the response returned messageHex
   await acceptPendingRequestToReactWallet(walletPage)
-  const response2 = await getAnyFromInnerHTML(dappPage.page.getByTestId('hello-world__method-response'))
+  const response2 = await getAnyFromInnerHTML(await dappPage.awaitAndGetTestId('hello-world__method-response'))
   expect(response2).toBeDefined() // Verify  if the response had a return
   expect(response2 as boolean).toBeTruthy() // Verify if the response returned true
 })
@@ -72,19 +64,15 @@ test('Test Sign Without Salt on dapp (React)', async ({ context }) => {
   const dappPage = DAPP_REACT
   const walletPage = WALLET_REACT
   await connectReactDappToNewReactAccount(context, dappPage, walletPage)
-  await dappPage.page.waitForLoadState('networkidle') // Wait to load request
-  await dappPage.awaitSeconds(5) // Wait for 5 seconds
-  await dappPage.page.getByTestId('hello-world__sign-without-salt-and-verify').click() // Click on sign without salt and verify button
+  await dappPage.awaitAndClickTestId('hello-world__sign-without-salt-and-verify') // Click on sign without salt and verify button
   await acceptPendingRequestToReactWallet(walletPage)
-  await dappPage.awaitSeconds(2) // Wait for 2 seconds
-  const response = await getAnyFromInnerHTML(dappPage.page.getByTestId('hello-world__method-response'))
+  const response = await getAnyFromInnerHTML(await dappPage.awaitAndGetTestId('hello-world__method-response'))
   expect(response).toBeDefined() // Verify  if the response had a return
   expect(response.publicKey).toBeDefined() // Verify if the response returned publicKey
   expect(response.data).toBeDefined() // Verify if the response returned data
   expect(response.messageHex).toBeDefined() // Verify if the response returned messageHex
   await acceptPendingRequestToReactWallet(walletPage)
-  await dappPage.awaitSeconds(2) // Wait for 2 seconds
-  const response2 = await getAnyFromInnerHTML(dappPage.page.getByTestId('hello-world__method-response'))
+  const response2 = await getAnyFromInnerHTML(await dappPage.awaitAndGetTestId('hello-world__method-response'))
   expect(response2).toBeDefined() // Verify  if the response had a return
   expect(response2 as boolean).toBeTruthy() // Verify if the response returned true
 })
@@ -94,12 +82,9 @@ test('Test Verify Failing Message on dapp (React)', async ({ context }) => {
   const dappPage = DAPP_REACT
   const walletPage = WALLET_REACT
   await connectReactDappToNewReactAccount(context, dappPage, walletPage)
-  await dappPage.page.waitForLoadState('networkidle') // Wait to load request
-  await dappPage.awaitSeconds(5) // Wait for 5 seconds
-  await dappPage.page.getByTestId('hello-world__verify-failing').click() // Click on verify failing button
+  await dappPage.awaitAndClickTestId('hello-world__verify-failing') // Click on verify failing button
   await acceptPendingRequestToReactWallet(walletPage)
-  await dappPage.awaitSeconds(2) // Wait for 2 seconds
-  const response = await getAnyFromInnerHTML(dappPage.page.getByTestId('hello-world__method-response'))
+  const response = await getAnyFromInnerHTML(await dappPage.awaitAndGetTestId('hello-world__method-response'))
   expect(response).toBeDefined() // Verify  if the response had a return
   expect(response as boolean).toBeFalsy() // Verify if the response returned false
 })
@@ -109,11 +94,8 @@ test('Test Traverse Iterator on dapp (React)', async ({ context }) => {
   const dappPage = DAPP_REACT
   const walletPage = WALLET_REACT
   await connectReactDappToNewReactAccount(context, dappPage, walletPage)
-  await dappPage.page.waitForLoadState('networkidle') // Wait to load request
-  await dappPage.awaitSeconds(5) // Wait for 5 seconds
-  await dappPage.page.getByTestId('hello-world__traverse-iterator').click() // Click on traverse iterator button
-  await dappPage.awaitSeconds(3) // Wait for 3 seconds
-  const response = await getAnyFromInnerHTML(dappPage.page.getByTestId('hello-world__method-response'))
+  await dappPage.awaitAndClickTestId('hello-world__traverse-iterator') // Click on traverse iterator button
+  const response = await getAnyFromInnerHTML(await dappPage.awaitAndGetTestId('hello-world__method-response'))
   expect(response).toBeDefined() // Verify  if the response had a return
   expect((response as any[]).length).toBeGreaterThan(1)
 })
@@ -123,11 +105,8 @@ test('Test Get Wallet Info on dapp (React)', async ({ context }) => {
   const dappPage = DAPP_REACT
   const walletPage = WALLET_REACT
   await connectReactDappToNewReactAccount(context, dappPage, walletPage)
-  await dappPage.page.waitForLoadState('networkidle') // Wait to load request
-  await dappPage.awaitSeconds(5) // Wait for 5 seconds
-  await dappPage.page.getByTestId('hello-world__get-wallet-info').click() // Click on get wallet info button
-  await dappPage.awaitSeconds(2) // Wait for 2 seconds
-  const response = await getAnyFromInnerHTML(dappPage.page.getByTestId('hello-world__method-response'))
+  await dappPage.awaitAndClickTestId('hello-world__get-wallet-info') // Click on get wallet info button
+  const response = await getAnyFromInnerHTML(await dappPage.awaitAndGetTestId('hello-world__method-response'))
   expect(response).toBeDefined() // Verify  if the response had a return
   expect(response.isLedger).toBeDefined() // Verify if the response returned isLedger
 })
@@ -137,11 +116,8 @@ test('Test Calculate Fee on dapp (React)', async ({ context }) => {
   const dappPage = DAPP_REACT
   const walletPage = WALLET_REACT
   await connectReactDappToNewReactAccount(context, dappPage, walletPage)
-  await dappPage.page.waitForLoadState('networkidle') // Wait to load request
-  await dappPage.awaitSeconds(5) // Wait for 5 seconds
-  await dappPage.page.getByTestId('hello-world__calculate-fee').click() // Click on calculate fee button
-  await dappPage.awaitSeconds(2) // Wait for 2 seconds
-  const response = await getAnyFromInnerHTML(dappPage.page.getByTestId('hello-world__method-response'))
+  await dappPage.awaitAndClickTestId('hello-world__calculate-fee')
+  const response = await getAnyFromInnerHTML(await dappPage.awaitAndGetTestId('hello-world__method-response'))
   expect(response).toBeDefined() // Verify  if the response had a return
   expect(response.networkFee).toBeDefined() // Verify if the response returned networkFee
   expect(response.systemFee).toBeDefined() // Verify if the response returned systemFee
@@ -153,29 +129,26 @@ test('Test Sign Transaction on dapp (React)', async ({ context }) => {
   const dappPage = DAPP_REACT
   const walletPage = WALLET_REACT
   await connectReactDappToNewReactAccount(context, dappPage, walletPage)
-  await dappPage.page.waitForLoadState('networkidle') // Wait to load request
-  await dappPage.awaitSeconds(5) // Wait for 5 seconds
-  await dappPage.page.getByTestId('hello-world__sign-transaction').click() // Click on Sign Transaction button
+  await dappPage.awaitAndClickTestId('hello-world__sign-transaction') // Click on Sign Transaction button
   await acceptPendingRequestToReactWallet(walletPage)
-  await dappPage.awaitSeconds(2) // Wait for 2 seconds
-  const response = await getAnyFromInnerHTML(dappPage.page.getByTestId('hello-world__method-response'))
+  const response = await getAnyFromInnerHTML(await dappPage.awaitAndGetTestId('hello-world__method-response'))
   expect(response).toBeDefined() // Verify  if the response had a return
 })
 
 test('Test Wipe Methods on dapp (React)', async ({ context }) => {
   // Define the dapp and wallet pages
   const dappPage = DAPP_REACT
   const walletPage = WALLET_REACT
+  const amountOfMethodsToBeWiped = 3
   await connectReactDappToNewReactAccount(context, dappPage, walletPage)
-  await dappPage.page.waitForLoadState('networkidle') // Wait to load request
-  await dappPage.awaitSeconds(5) // Wait for 5 seconds
-  for (let i = 0; i <= 3; i++) {
-    // Click on Sign Transaction button 3 times
-    await dappPage.page.getByTestId('hello-world__sign-transaction').click()
-    await dappPage.awaitSeconds(0.5)
+  for (let i = 0; i < amountOfMethodsToBeWiped; i++) {
+    // Click on Sign Transaction button amountOfMethodsToBeWiped times
+    await dappPage.awaitAndClickTestId('hello-world__sign-transaction')
   }
-  await dappPage.page.getByTestId('hello-world__wipe-methods').click() // Click on Wipe Methods button
-  await dappPage.awaitSeconds(2) // Wait for 2 seconds
+  await dappPage.awaitAndClickTestId('hello-world__wipe-methods') // Click on Wipe Methods button
+  const response = await getAnyFromInnerHTML(await dappPage.awaitAndGetTestId('hello-world__method-response'))
+  expect(response).toBeDefined()
+  expect((response as string[]).length).toBe(amountOfMethodsToBeWiped)
   const pendingRequests = await walletPage.page.getByTestId('default-card__pending-request').all()
-  expect(pendingRequests.length).toBe(0) // Verify  if the response had a return
+  expect(pendingRequests.length).toBe(0) // Verify if has no pending Requests
 })
diff --git a/examples/wc-dapp-react/src/Constants.ts b/examples/wc-dapp-react/src/Constants.ts
@@ -0,0 +1,29 @@
+import { Method, NetworkType } from '@cityofzion/wallet-connect-sdk-react'
+
+export const networks: Record<NetworkType, { name: string }> = {
+  'neo3:mainnet': {
+    name: 'MainNet',
+  },
+  'neo3:testnet': {
+    name: 'TestNet',
+  },
+  'neo3:private': {
+    name: 'Private Network',
+  },
+}
+
+export const dappMethods: Method[] = [
+  'invokeFunction',
+  'testInvoke',
+  'signMessage',
+  'verifyMessage',
+  'traverseIterator',
+  'getWalletInfo',
+  'getNetworkVersion',
+  'decrypt',
+  'encrypt',
+  'decryptFromArray',
+  'calculateFee',
+  'signTransaction',
+  'wipeRequests',
+]
diff --git a/examples/wc-dapp-react/src/components/HelloWorld.tsx b/examples/wc-dapp-react/src/components/HelloWorld.tsx
@@ -1,33 +1,7 @@
 import React, { useState } from 'react'
 import { TypeChecker } from '@cityofzion/neon-dappkit-types'
-import { NetworkType, useWalletConnect, SignMessageVersion, Method } from '@cityofzion/wallet-connect-sdk-react'
-
-const networks: Record<NetworkType, { name: string }> = {
-  'neo3:mainnet': {
-    name: 'MainNet',
-  },
-  'neo3:testnet': {
-    name: 'TestNet',
-  },
-  'neo3:private': {
-    name: 'Private Network',
-  },
-}
-const dappMethods: Method[] = [
-  'invokeFunction',
-  'testInvoke',
-  'signMessage',
-  'verifyMessage',
-  'traverseIterator',
-  'getWalletInfo',
-  'getNetworkVersion',
-  'decrypt',
-  'encrypt',
-  'decryptFromArray',
-  'calculateFee',
-  'signTransaction',
-  'wipeRequests',
-]
+import { NetworkType, useWalletConnect, SignMessageVersion } from '@cityofzion/wallet-connect-sdk-react'
+import { dappMethods, networks } from '../Constants'
 
 function HelloWorld() {
   const [dappUri, setDappUri] = useState('')
@@ -40,7 +14,7 @@ function HelloWorld() {
   }
 
   const getUri = async (): Promise<void> => {
-    const { uri, approval } = await wcSdk.createConnection('neo3:testnet', dappMethods)
+    const { uri, approval } = await wcSdk.createConnection(networkType, dappMethods)
     if (uri) {
       setDappUri(uri)
       await navigator.clipboard.writeText(uri)
@@ -399,11 +373,9 @@ function HelloWorld() {
   }
 
   const wipeMethods = async () => {
-    try {
-      await wcSdk.wipeRequests()
-    } catch (error) {
-      console.log(error)
-    }
+    const resp = await wcSdk.wipeRequests()
+    console.log(resp)
+    setResponse(JSON.stringify(resp, null, 2))
   }
 
   return (