CU-86dt1fxtx-1 - Implement Contextual Messages on WcSdk on both sides

common/changes/@cityofzion/wallet-connect-sdk-core/CU-86dt1fxtx-1_2024-05-14-18-59.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@cityofzion/wallet-connect-sdk-core",
+      "comment": "Implemented a Contextual Messages on WcSdk",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@cityofzion/wallet-connect-sdk-core"
+}

common/changes/@cityofzion/wallet-connect-sdk-react/CU-86dt1fxtx-1_2024-05-14-18-59.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@cityofzion/wallet-connect-sdk-react",
+      "comment": "Implemented a Contextual Messages on WcSdk",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@cityofzion/wallet-connect-sdk-react"
+}

common/changes/@cityofzion/wallet-connect-sdk-svelte/CU-86dt1fxtx-1_2024-05-14-18-59.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@cityofzion/wallet-connect-sdk-svelte",
+      "comment": "Implemented a Contextual Messages on WcSdk",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@cityofzion/wallet-connect-sdk-svelte"
+}

e2e/package.json

@@ -13,8 +13,8 @@
     "prepare": "npm install serve -g && pnpm exec playwright install",
     "report:clean": "rm -rf playwright-report test-results tests-results",
     "report:open": "npx pnpm playwright show-report",
-    "test": "playwright test --headed",
-    "test:headless": "playwright test"
+    "test": "playwright test --headed --trace on",
+    "test:headless": "playwright test --trace on"
   },
   "devDependencies": {
     "@playwright/test": "^1.38.1",

e2e/playwright.config.ts

@@ -3,7 +3,7 @@ import { JSON_REPORT_PATH, TESTS_DIR } from './src/constants/PathsDefinitions'
 import { MAX_RETRIES, RUN_CONCURRENTLY_COMMAND } from './src/constants/DevConstants'
 
 const config: PlaywrightTestConfig = {
-  fullyParallel: true,
+  fullyParallel: false,
   testMatch: '**/*.spec.ts',
   webServer: {
     command: RUN_CONCURRENTLY_COMMAND,

e2e/src/constants/GenericData.ts

@@ -1 +1,2 @@
 export const ACCOUNT_PASSWORD: string = "Password: Not '12345' - because we're not living in 1995!"
+export const DAPP_METHOD_CONTEXT_MESSAGE: string = "Accept this and your balance goes 'to the moon'!"

e2e/src/pageCommonSteps/WalletReactSteps.ts

@@ -14,7 +14,10 @@ export async function connectDappToReactWallet(walletPage: ExampleProject, dappU
   await walletPage.page.getByTestId('connect-dapp__dapp-uri-input').fill(dappUri.trim()) // Fill in the dapp URI
   await walletPage.awaitAndClickTestId('proposal-card__approve') // Click the approve button
 }
-export async function acceptPendingRequestToReactWallet(walletPage: ExampleProject) {
+export async function acceptPendingRequestToReactWallet(
+  walletPage: ExampleProject,
+  actionBeforeAcceptMethod?: (walletPage: ExampleProject) => Promise<void> | void,
+) {
   let retries = 0
   let requests = []
   do {
@@ -24,5 +27,6 @@ export async function acceptPendingRequestToReactWallet(walletPage: ExampleProje
   } while (retries < MAX_RETRIES && requests.length == 0)
   if (requests.length === 0) throw Error('No pending requests are found')
   await walletPage.awaitAndClickTestId('default-card__pending-request')
+  if (actionBeforeAcceptMethod) await actionBeforeAcceptMethod(walletPage)
   await walletPage.awaitAndClickTestId('request-card__approve')
 }

e2e/tests/DappMethods.spec.ts

@@ -1,8 +1,9 @@
 import { expect, test } from '@playwright/test'
 import { DAPP_REACT, WALLET_REACT } from '../src/constants/ProjectsDefinitions'
 import { connectReactDappToNewReactAccount } from '../src/helpers/CommonStepsHelper'
-import { getAnyFromInnerHTML } from '../src/helpers/CleanerHelper'
+import { getAnyFromInnerHTML, getCleanInnerHTML } from '../src/helpers/CleanerHelper'
 import { acceptPendingRequestToReactWallet } from '../src/pageCommonSteps/WalletReactSteps'
+import { DAPP_METHOD_CONTEXT_MESSAGE } from '../src/constants/GenericData'
 
 test('Create a new account and connect with a dapp (React)', async ({ context }) => {
   // Define the dapp and wallet pages
@@ -152,3 +153,19 @@ test('Test Wipe Methods on dapp (React)', async ({ context }) => {
   const pendingRequests = await walletPage.page.getByTestId('default-card__pending-request').all()
   expect(pendingRequests.length).toBe(0) // Verify if has no pending Requests
 })
+
+test('Test send a contextual with a Verify Success on dapp (React)', async ({ context }) => {
+  // Define the dapp and wallet pages
+  const dappPage = DAPP_REACT
+  const walletPage = WALLET_REACT
+  await connectReactDappToNewReactAccount(context, dappPage, walletPage)
+  await dappPage.awaitAndClickTestId('hello-world__verify-with-context')
+  await acceptPendingRequestToReactWallet(walletPage, async (walletPageBeforeAcceptMethod) => {
+    const contextMessage = await walletPageBeforeAcceptMethod.awaitAndGetTestId('request-card__contextual-message')
+    expect(contextMessage).toBeDefined()
+    expect(await getCleanInnerHTML(contextMessage)).toBe(DAPP_METHOD_CONTEXT_MESSAGE)
+  })
+  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).toBeTruthy() // Verify if the response returned true
+})

examples/wc-dapp-react/src/components/HelloWorld.tsx

@@ -440,6 +440,22 @@ function HelloWorld() {
     }
   }
 
+  const verifySuccessWithContext = async () => {
+    try {
+      const resp = await wcSdk.withContext("Accept this and your balance goes 'to the moon'!").verifyMessage({
+        publicKey: '031757edb62014dea820a0b33a156f6a59fc12bd966202f0e49357c81f26f5de34',
+        data: 'aeb234ed1639e9fcc95a102633b1c70ca9f9b97e9592cc74bfc40cbc7fefdb19ae8c6b49ebd410dbcbeec6b5906e503d528e34cd5098cc7929dbcbbaf23c5d77',
+        salt: '052a55a8d56b73b342a8e41da3050b09',
+        messageHex:
+          '010001f0a0303532613535613864353662373362333432613865343164613330353062303965794a68624763694f694a49557a49314e694973496e523563434936496b705856434a392e65794a6c654841694f6a45324e444d304e7a63324e6a4d73496d6c68644349364d5459304d7a4d354d5449324d33302e7253315f73735230364c426778744831504862774c306d7a6557563950686d5448477a324849524f4a4f340000',
+      })
+      console.log(resp)
+      setResponse(JSON.stringify(resp, null, 2))
+    } catch (e) {
+      onError(e)
+    }
+  }
+
   const onError = (error: any) => {
     Toastify({
       text: error.message,
@@ -528,6 +544,9 @@ function HelloWorld() {
               <button data-testid="hello-world__sign-transaction" onClick={signTransaction}>
                 Sign Transaction
               </button>
+              <button data-testid="hello-world__verify-with-context" onClick={verifySuccessWithContext}>
+                Verify Success With Context
+              </button>
               <button data-testid="hello-world__wipe-methods" onClick={wipeMethods}>
                 Wipe Methods
               </button>

examples/wc-wallet-react/src/components/RequestCard.tsx

@@ -31,6 +31,8 @@ export default function RequestCard(
     props.closeRequest()
   }
 
+  const contextualMessage = String(request.params.contextualMessage).trim()
+
   const items = Array.isArray(request.params)
     ? request.params
     : request.params.invocations
@@ -59,6 +61,12 @@ export default function RequestCard(
               Neo3
             </Text>
           </Flex>
+          <Text fontSize="0.875rem" color="#888888" fontWeight="bold" mt="0.875rem">
+            Method Contextual Message
+          </Text>
+          <Text fontSize="0.875rem" mt="0.5rem" data-testid="request-card__contextual-message">
+            {contextualMessage}
+          </Text>
           <Text fontSize="0.875rem" color="#888888" fontWeight="bold" mt="0.875rem">
             Method
           </Text>

examples/wc-wallet-react/src/constants/default.ts

@@ -33,7 +33,7 @@ export const DEFAULT_APP_METADATA = {
 
 export const DEFAULT_CHAIN: Chain = 'testnet'
 export const DEFAULT_NETWORKS: Record<Chain, { url: string | null; name: string }> = {
-  testnet: { url: 'https://testnet1.neo.coz.io:443', name: 'Testnet' },
+  testnet: { url: 'https://testnet2.neo.coz.io:443', name: 'Testnet' },
   mainnet: { url: 'http://seed1.neo.org:10332', name: 'Mainnet' },
   private: { url: null, name: 'Private Network' },
 }