Private element is not present on this object

[janmichek]

Describe the bug For aeScan I built the feature of Contract Write. I needed to downgrade from 13.3.2 to 13.2.2

To Reproduce Steps to reproduce the behavior:

1. Deploy contract (I used hamster from aestudio examples) to testnet
2. Verify contract https://aescan.dev.service.aepps.com/contract-verification
3. after successful verification go to detail -> Write tab
4. Connect your wallet
5. Dispatch some Write action

Expected behavior Now It works as expected because I used version 13.2.2. But when you upgrade to 13.3.2 and remove { ignoreVersion: true } You will get that 'Private element is not present on this object'

I am using suggested implementation using shallowReactive from example https://github.com/aeternity/aepp-sdk-js/tree/71da12b5df56b41f7317d1fb064e44e8ea118d6c/examples/browser/aepp

Screenshots

Uploading Screen Recording 2024-08-26 at 14.08.56.mov…

Please tell us about your environment:

• Node Version: v7.1.0
• Protocol Version: 1
• Compiler version: v0.0.0
• VM Version: fate | fate2
• SDK Version: v13.3.2
• Python version: v3.7.0

Other information

• Connection for read actions https://github.com/aeternity/aescan/blob/d5b1b3b797bbb3a07ad7cbe2a223f37883cfd63a/src/stores/aesdk.js
• Connection for write actions https://github.com/aeternity/aescan/blob/d5b1b3b797bbb3a07ad7cbe2a223f37883cfd63a/src/stores/wallet.js

[davidyuk]

The issue is because you are making sdk instance reactive. Sdk was working if the instance is not deep reactive (like when using shallowReactive), but I broke it in the recent releases and only shallowRef is working now. Anyway, you don't need to track changes in sdk instance fields, so use shallowRef. I've tried it on "contract-read" branch and it looks working

--- a/src/stores/wallet.js
+++ b/src/stores/wallet.js
@@ -5,7 +5,7 @@ import { AeSdkAepp, BrowserWindowMessageConnection, Node, walletDetector } from
 export const useWalletStore = defineStore('wallet', () => {
   const { NODE_URL, NETWORK_ID } = useRuntimeConfig().public

-  const aeSdk = ref(null)
+  const aeSdk = shallowRef(null)
   const detectedWallets = ref(null)
   const status = ref(null)
   const backLink = ref(null)
@@ -20,7 +20,7 @@ export const useWalletStore = defineStore('wallet', () => {
         compilerUrl: 'https://compiler.aepps.com',
       }

-      aeSdk.value = shallowReactive(new AeSdkAepp({
+      aeSdk.value = new AeSdkAepp({
         name: 'æScan',
         ...aeSdkOptions,
         onNetworkChange({ networkId }) {
@@ -30,7 +30,7 @@ export const useWalletStore = defineStore('wallet', () => {
         onDisconnect() {
           status.value = 'disconnecting'
         },
-      }))
+      })
       await connect()
     } catch (error) {
       status.value = 'failed'

[janmichek]

Great, it works good. Thanks for the hint