Self hosted Moralis V1, how to use wallet connect v2 with vanilla js

elevatex · July 22, 2023, 5:10pm

I am using a Self Hosted Moralis V1, and I am trying to use wallet connect v2 and there’s this guide

But I am trying to find a solution to do it using Vanilla JS, becuz I have a django app and I am only using vanilla js and server rendering in the app

cryptokid · July 22, 2023, 4:59pm

hello, does this demo help you?

elevatex · July 22, 2023, 5:00pm

Hello, No it does not as i mentionned, i need a way to integrate the same solutions but using vanilla JS

cryptokid · July 22, 2023, 5:09pm

Did you read that code? that code doesn’t work with vanilla JS? at a first look it looks like a normal html file that includes a js file

github.com

MoralisWeb3/Moralis-JS-SDK-v1/blob/main/demos/walletconnect-v2/public/index.html#L26


    <p>To test this demo we recommend to use <strong>Trust Wallet</strong> mobile app.</p>
    <p>
      <button id="connectWithMoralis">Connect WalletConnect V2 with Moralis</button>
      <button id="connect">Connect WalletConnect V2 Directly</button>
    </p>
    <p id="result"></p>
    <script src="./builds/bundle.js"></script>
  </body>
</html>

elevatex · July 22, 2023, 5:14pm

Exactly my point, to simplify the problem furthermore, let’s just forget about that GitHub link, I need a vanilla js solution to integrate my self-hosted Moralis V1 and WalletConnect v2. specially that there’s 2 dependencies that their are no CDNs for that are @walletconnect/ethereum-provider and @web3modal/standalone

cryptokid · July 22, 2023, 5:18pm

My understanding is that the GitHub tutorial builds a bundle that you can host as a static file and import it in your vanilla js code.

elevatex · July 22, 2023, 5:20pm

is there a tutorial or some kind of step by step documentation to do that?

cryptokid · July 22, 2023, 5:24pm

That tutorial is made before wallet connect v2 was integrated in the sdk, it could be easier now to use it with the sdk.

elevatex · July 22, 2023, 5:26pm

i am sorry, i know my questions may seem stupid.

but how to do that? Thank you so much, is there documentation for it?

cryptokid · July 22, 2023, 5:27pm

I don’t know exactly now, I’m not at computer now. Did you try to use the last version of the sdk?

elevatex · July 22, 2023, 5:29pm

Yes, but it’s not working!

cryptokid · July 22, 2023, 5:29pm

What happens when it is not working?

elevatex · July 22, 2023, 5:30pm

give me 5 mins i’ll send you the error!

cryptokid · July 22, 2023, 5:31pm

Did you use authenticate with similar parameters as here?

elevatex · July 22, 2023, 5:39pm

HERE’S the full code

and here’s the error

“Uncaught (in promise) Error: Cannot enable via WalletConnect: dependency “@walletconnect/ethereum-provider” is missing”

cryptokid · July 22, 2023, 5:43pm

You need to do some changes:

	<script src="https://cdn.jsdelivr.net/npm/@walletconnect/[email protected]/dist/index.umd.js"></script>
	<script>window.WalletConnectProvider = window['@walletconnect/ethereum-provider'];</script>
    <moralis-sdk>

elevatex · July 22, 2023, 5:48pm

Thank Youuuuuuuu so much, it worked.
I’ll keep you updated.

elevatex · July 22, 2023, 7:13pm

i did integrate it, and it’s working fine, but when I auth by scanning the code, this errors occur

htttp://localhost:1337/server/users 404 (Not Found)
Uncaught (in promise) Error: Moralis auth failed, invalid data at handleError (Moralis.js:27019:17)

elevatex · July 22, 2023, 7:15pm

here’s the error from the moralis parse dashboard server that i self hosted

error: Moralis auth failed, invalid data {“code”:101,“stack”:“Error: Moralis auth failed, invalid data\n at /elevatex/projects/parse-server-migration/build/auth/MoralisEthAdapter.js:33:15\n at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n at async Promise.all (index 0)”}

cryptokid · July 22, 2023, 7:19pm

what is the data format that was sent to the server (message and signature)?