GSNProvider : getting error

Archive Starter Kits - Support
1

I modified my Dapp web provider setup to access a Relayer via a running RelayHub on ganache dev chain (I deployed these using the gsn-helpers)

:computer: Environment
I am using a Truffle /Vue stack set up to work with injected Metamask OR a ganache dev chain running on a ssh vps IP: port --> xx.xx.xxx.xx:9545

:memo:Details
What I’m trying to do is allow Metamask if present; otherwise use GSN and have user contract calls go through the relayer. Here is my web3 setup:

if (window.ethereum) {
    web3Provider = window.ethereum
    try {
        await window.ethereum.enable()
    } catch (error) {
        console.error('User denied account access')
    }
} else if (window.web3) {
    web3Provider = window.web3.currentProvider
}
// If no injected web3 instance is detected, fall back to Ganache
else {

    web3Provider = new GSNProvider("http://xx.xx.xxx.xx:9545");
}
const web3 = new Web3(web3Provider)

MyDapp.setProvider(web3.currentProvider)
........

I get a browser error in console (truncated for brevity): My error may be related to dependencies webpack or other issues with GSN, any help here would be appreciated:

SyntaxError: invalid property id
["./node_modules/@openzeppelin/gsn-provider/src/GSNProvider.js"]()
app.js:896
__webpack_require__()
app.js:727
hotCreateRequire/fn()
app.js:101
<anonymous>
:1
["./node_modules/@openzeppelin/gsn-provider/src/index.js"]()
app.js:940
__webpack_require__()
app.js:727
hotCreateRequire/fn()
app.js:101
<anonymous>
:36
["./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/MyDapp.vue?vue&type=script&lang=js&"]()
1 Like
2

Hi @Steeve,

Welcome to the community :wave:

You could look at using OpenZeppelin Network.js to simplify the web3 setup.

Though I suspect that there may be an issue running on your setup given the GSN Starter Kit compilation problems that you are experiencing. Might be best to resolve this first.

You could also look at the Building a GSN powered (d)app from scratch tutorial, though this is React based.

3

Indeed ,thanks, using oz-network.js is my preferred option. I replaced web3 with /openzeppelin-network.js. I used the vanilla setup in my Vue app which compiles but I get a Type Error in my browser web console:

TypeError: Object(...).version is undefined

A clue (?) is that I get a scrypt error when I check oz version. telling me something isn't correctly versioned:

#oz --version
Error: The module '/root/node_modules/scrypt/build/Release/scrypt.node'
was compiled against a different Node.js version using
NODE_MODULE_VERSION 57. This version of Node.js requires
NODE_MODULE_VERSION 67. Please try re-compiling or re-installing
the module (for instance, using npm rebuild or npm install).

Again knowing which versions node I can run for OZ would help a lot and avoid breaking changes.

My setup is:

#node --version
v11.6.0

#npm --version
6.5.0-next.0

1 Like
4

I fixed the scrypt node version mismatch by recompiling as noted on the scrypt github page. So now I get my oz --version 2.5.3
correctly for my Node version v11.6.0 without the warning.

But on serving the page my web browser console I get the same error;

TypeError: Object(…).version is undefined

1 Like
5

Hi @Steeve,

I currently use:

$ node --version
v10.16.0
$ npm --version
6.13.4
$ oz --version
2.6.0

Do you have a GitHub repository that you can share?

6

It’s a Vue template I want to modify to run GSN . My first attempt was to use OZ network.js then I tried with GSN-provider. Somehow the ‘resolve’ files that are present in the react Starter template may be what Im missing.

See the modified repo here. [edit] https://gitlab.com/chevronx/vue-box-gsn

The web3 connection is found in the ./src/components/SimpleStorage.vue
Vue is very similar to react with javascript between tags in components and the entry file is main.js

[Edit: btw i did redo the whole with node version 10.16]

1 Like
7

Hi @Steeve,

The SimpleStorage contract also needs the following functions:

  function _preRelayedCall(bytes memory context) internal returns (bytes32) {
  }

  function _postRelayedCall(bytes memory context, bool, uint256 actualCharge, bytes32) internal {
  }

I suggest looking at the Building a GSN powered (d)app from scratch tutorial, though this is React based.

I haven’t done any Vue development (or much React) to go digging around unfortunately.

8

Thanks, yes I will add the sol functions in the contract.
In the meantime I got it working by simply adding the all the OZ dependencies found in the Starter Kit. And with a relayer already running in my ganache blockchain , the Vue Dapp works without any modification to the web3 connection logic!
In my package.json, I added the following:

"dependencies": {
"@openzeppelin/contracts-ethereum-package": "^2.4.0",
"@openzeppelin/gsn-provider": "^0.1.6",
"@openzeppelin/network": "^0.2.9",
"@openzeppelin/solidity-loader": "^1.4.6",
"@openzeppelin/upgrades": "^2.5.3",
"vue": "^2.5.13",
"vue-router": "^3.0.1",
"vuex": "^3.0.1",
"web3": "0.20.2"
...
"devDependencies": {
"@openzeppelin/cli": "^2.5.3",
"@openzeppelin/contracts": "^2.4.0",
"@openzeppelin/gsn-helpers": "^0.1.9",
"@openzeppelin-test-helpers": "^0.4.3",`
....

I had to 'force' web3 to version0.20.2 since the web3 v1.x breaks this particular dapp.
Im still not clear on the role of GSN-Provider vs Network.js;
I'm way more familiar with Vue than React despite the similarities.