Uncaught ReferenceError: process is not defined

[joedakwa]

I am following the tutorial here

https://xrpl.org/build-a-browser-wallet-in-js.html

I run into a big problem when running "yarn dev"

The page isnt responsive and i get this error message:

util.js:109 Uncaught ReferenceError: process is not defined

at node_modules/util/util.js (util.js:109:1)
at __require (xrpl.js?v=c647c0c4:3:50)
at node_modules/assert/build/internal/assert/assertion_error.js (assertion_error.js:35:16)
at __require (xrpl.js?v=c647c0c4:3:50)
at node_modules/assert/build/assert.js (assert.js:36:22)
at __require (xrpl.js?v=c647c0c4:3:50)
at node_modules/xrpl/dist/npm/client/index.js (index.ts:4:1)
at __require (xrpl.js?v=c647c0c4:3:50)
at node_modules/xrpl/dist/npm/client/BroadcastClient.js (BroadcastClient.ts:1:1)
at __require (xrpl.js?v=c647c0c4:3:50)

Can anyone help at all?

Been banging my head against a wall.

[JST5000]

That seems frustrating, sorry about that.

In order to debug, would you be able to give me a bit more context?

Specifically:

1. Does it happen when you get to the first step that says yarn dev in the tutorial, or did you go further than that when the issue occurred?
2. Would you be able to share a screenshot of your file structure as well so I can get a sense for what is there?
3. Could you share what your package.json looks like so I can see what imports are being used?

From reading the error message a couple things strike me as odd:

1. I don't know what util.js is - I couldn't find it used in the provided tutorial code files or xrpl.js, do you happen to know where that file's coming from?
2. BroadcastClient is a deprecated object in xrpl.js and shouldn't be used - instead Client should be used (this makes me think that maybe there was a mistaken auto-import in index.js because I couldn't find any references to that object in the tutorial code on GitHub). BroadcastClient was originally an experimental way to have "backup" servers you could connect to if one of then went down, but it didn't end up working (and many networks you can connect to implement redundancy on their side anyway)

[joedakwa]

That seems frustrating, sorry about that.

In order to debug, would you be able to give me a bit more context?

Specifically:

1. Does it happen when you get to the first step that says yarn dev in the tutorial, or did you go further than that when the issue occurred?
2. Would you be able to share a screenshot of your file structure as well so I can get a sense for what is there?
3. Could you share what your package.json looks like so I can see what imports are being used?

From reading the error message a couple things strike me as odd:

1. I don't know what util.js is - I couldn't find it used in the provided tutorial code files or xrpl.js, do you happen to know where that file's coming from?
2. BroadcastClient is a deprecated object in xrpl.js and shouldn't be used - instead Client should be used (this makes me think that maybe there was a mistaken auto-import in index.js because I couldn't find any references to that object in the tutorial code on GitHub). BroadcastClient was originally an experimental way to have "backup" servers you could connect to if one of then went down, but it didn't end up working (and many networks you can connect to implement redundancy on their side anyway)

Hi,

Thanks for coming back to me.

Might be easier if you wanted to pull the repo down and inspect?

https://github.com/joedakwa/xApp.git

[JST5000]

That helped, but I unfortunately couldn't reproduce the issue. When I ran your code, it seemed to run fine locally.

Maybe try deleting your node_modules folder, then re-running yarn to reinstall packages? (Maybe an import was corrupted somehow?)

The only other thing I noticed was that you have everything under the src/assets folder when the other folders are originally intended to be adjacent to assets, but it seems like you corrected the imports (and when I manually move them up + fix imports, it doesn't have any affect for me, so is likely not the source of the problem)

I still can't find any reference to BroadcastClient so I'm not sure why that's appearing as the cause of the stacktrace. (Util.js seems to be coming from the assert library xrpl.js uses)

[joedakwa]

That helped, but I unfortunately couldn't reproduce the issue. When I ran your code, it seemed to run fine locally.

Maybe try deleting your node_modules folder, then re-running yarn to reinstall packages? (Maybe an import was corrupted somehow?)

The only other thing I noticed was that you have everything under the src/assets folder when the other folders are originally intended to be adjacent to assets, but it seems like you corrected the imports (and when I manually move them up + fix imports, it doesn't have any affect for me, so is likely not the source of the problem)

I still can't find any reference to BroadcastClient so I'm not sure why that's appearing as the cause of the stacktrace. (Util.js seems to be coming from the assert library xrpl.js uses)

How strange, i deleted node_modules and ran yarn then ran yarn dev, but got this error:

yarn run v1.22.19
warning ../../../package.json: No license field
$ vite --force
failed to load config from /home/joedakwa/joe/xApp/simple-xrpl-wallet/vite.config.js
error when starting dev server:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@vitejs/plugin-react' imported from /home/joedakwa/joe/xApp/simple-xrpl-wallet/vite.config.js.timestamp-1684954612233-4153553c615c3.mjs
    at new NodeError (node:internal/errors:393:5)
    at packageResolve (node:internal/modules/esm/resolve:860:9)
    at moduleResolve (node:internal/modules/esm/resolve:909:20)
    at defaultResolve (node:internal/modules/esm/resolve:1124:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:837:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[JST5000]

May or may not be related, but I noticed in your repo you're also missing the vite.config.js file - https://github.com/XRPLF/xrpl-dev-portal/blob/master/content/_code-samples/build-a-wallet/js/vite.config.js

I also see that in your package.json, instead of running vite yours is running vite --force, which I'm not sure how that affects things.

[JST5000]

Also, since I'm able to run it from my machine using your github - maybe creating a new folder and cloning your repo from scratch would help resolve the issue? (Sometimes the environment just gets borked somehow & a clean clone fixes things)

[joedakwa]

May or may not be related, but I noticed in your repo you're also missing the vite.config.js file - https://github.com/XRPLF/xrpl-dev-portal/blob/master/content/_code-samples/build-a-wallet/js/vite.config.js

I also see that in your package.json, instead of running vite yours is running vite --force, which I'm not sure how that affects things.

OK i imported the right vite-config.js , changed force back to vite and also cloned my repo down.

The original error message is gone, but the browser is static with "loading wallet details" and the button's are unresponsive.

This error shows in the console

Uncaught ValidationError: server URI must start with `wss://`, `ws://`, `wss+unix://`, or `ws+unix://`.
    at new Client (index.ts:214:13)
    at HTMLDocument.<anonymous> (index.js:11:16)

[JST5000]

My guess is it's because import.meta.env.VITE_CLIENT is not quite right.

I'm not sure exactly where the VITE_CLIENT variable is defined.

You have a .env file which is outside the folder, but it defines a variable called CLIENT and has a slightly incorrect link. It's missing the port, and should be updated to wss://s.altnet.rippletest.net:51233/ (You can find a list of websocket links for various networks on the right hand side of this faucet page - https://xrpl.org/xrp-testnet-faucet.html)

For mainnet you can use a link like wss://xrplcluster.com.

In order to access that .env file after you move it into the same folder as your other code, you can copy the line in index.js here: https://github.com/XRPLF/xrpl-dev-portal/blob/master/content/_code-samples/build-a-wallet/js/index.js

[joedakwa]

It looks like ive solved some of the issues!

The only thing that's left is for me to render my account details on the page once someone clicks "connect wallet",

but according to the brief, (which i think it useful for people to understand how this works), i will need to enter a XRP public key AND sign a message, which can be a simple predefined string).

I pushed the changes and linked it below.

Do you think this is possible and could you point me in the right direction?

Not done anything like this before

https://github.com/joedakwa/xApp.git

It looks like ive solved some of the issues!

The only thing that's left is for me to render my account details on the page once someone clicks "connect wallet",

but according to the brief, (which i think it useful for people to understand how this works), i will need to enter a XRP public key AND sign a message, which can be a simple predefined string).

I pushed the changes and linked it below.

Do you think this is possible and could you point me in the right direction?

Not done anything like this before

https://github.com/joedakwa/xApp.git

[JST5000]

Not quite sure what you mean by the brief - could you share a link?

Separately, I can give a brief explanation for how to access/use the ledger :)

Generally there's two things you can do on the ledger:

• Send transactions (to change something on the ledger)
• Send requests (to ask about something on the ledger)

Transactions require your secret to work because you have to prove you actually own the account. (That way only you can change your account balance with a Payment transaction as an example)

If you're just looking things up though (ex. How much money is in this account?) then you don't need the secret, you just need the account address (ex. rGjX59vWSyw1sL9u7mR7q4uCFwe3DD2Ysq).

In order to send these things, you can use the Client you get from xrpl.js. Specifically the .submitAndWait(...) function and the .request function are the main 2 you'll end up using.

Speaking a bit specifically to your code - currently the getWalletDetails function looks up what account to use from the .env file which is hardcoded. So if your goal with ConnectWallet is to change the account that's being observed, you'll need to change that to accept a parameter instead of using the hard-coded value.

If you just provide the account address, everything except the "Send XRP" page should work (because they're just looking up data). If you want to be able to use the account, then you'll also need to provide the secret, or some equivalent value. (Ex. Private key).

Note: The reason you only need to specify a seed in the .env file is because there's a function which can figure out what the account address is for an account based on it's default seed using a specific hash function. (Which means that for every seed, there's exactly 1 address, but you can't reverse engineer the password :))

Does this address what you were hoping for help with?

[joedakwa]

Not quite sure what you mean by the brief - could you share a link?

Separately, I can give a brief explanation for how to access/use the ledger :)

Generally there's two things you can do on the ledger:

• Send transactions (to change something on the ledger)
• Send requests (to ask about something on the ledger)

Transactions require your secret to work because you have to prove you actually own the account. (That way only you can change your account balance with a Payment transaction as an example)

If you're just looking things up though (ex. How much money is in this account?) then you don't need the secret, you just need the account address (ex. rGjX59vWSyw1sL9u7mR7q4uCFwe3DD2Ysq).

In order to send these things, you can use the Client you get from xrpl.js. Specifically the .submitAndWait(...) function and the .request function are the main 2 you'll end up using.

Speaking a bit specifically to your code - currently the getWalletDetails function looks up what account to use from the .env file which is hardcoded. So if your goal with ConnectWallet is to change the account that's being observed, you'll need to change that to accept a parameter instead of using the hard-coded value.

If you just provide the account address, everything except the "Send XRP" page should work (because they're just looking up data). If you want to be able to use the account, then you'll also need to provide the secret, or some equivalent value. (Ex. Private key).

Note: The reason you only need to specify a seed in the .env file is because there's a function which can figure out what the account address is for an account based on it's default seed using a specific hash function. (Which means that for every seed, there's exactly 1 address, but you can't reverse engineer the password :))

Does this address what you were hoping for help with?

This is the brief:

Task: You are required to build a web application that interacts with an XRP Web3 DApp. The application should have a frontend interface with a button that can connect to a user's XRP wallet and a backend to handle the connections to the XRP ledger. Requirements:

Frontend: 1.1. Develop a simple web application (you can use any front-end web framework like React, Angular, Vue.js, etc.). 1.2. The application should have a button labelled 'Connect Wallet'. 1.3. Once clicked, the application should prompt the user to input their XRP wallet public key and sign a message (this could be a simple predefined string). This process will confirm that the user controls the wallet without revealing the private key. 1.4. After the wallet connection is established, display the wallet's public key and current balance in the UI.

Backend: 2.1. The backend can be implemented in a language of your choice (Node.js, Python, Java, etc.). 2.2. Create an API endpoint to handle the 'Connect Wallet' request. This endpoint should take the wallet keys as parameters. 2.3. Use an XRP Ledger library (like Ripple-lib in Node.js) to establish a connection to the XRP Ledger and retrieve the wallet information. 2.4. The response should indicate whether the connection was successful or not and should return the wallet's public key and current balance.

Deliverables: Source code for both frontend and backend. Documentation explaining the design and architecture of your application. Instructions on how to run your application locally for testing purposes.

Evaluation Criteria: Code quality and organisation. Use of best practices for interacting with blockchains securely. Handling of edge cases (e.g., invalid keys). Clear and concise documentation.

Note: Ensure you follow best practices for handling cryptographic keys and ensure these keys are not exposed or stored unsafely. Always make sure that real transactions in the production environment are handled securely. You might want to use testnet XRP for development and testing.

This task tests your understanding of integrating with blockchain technology, handling cryptographic keys, creating a backend service, and building a simple frontend. It also tests your ability to deliver a complete, functioning product

I think some of what you mentioned is certainly helpful for sure, just not done this myself before with XRP, so was seeking a bit of guidance really, if that makes sense?

[justinr1234]

I believe this is resolved, please let me know if not: https://github.com/XRPLF/xrpl-dev-portal/pull/1752#issuecomment-1563531453

[JST5000]

I think some of what you mentioned is certainly helpful for sure, just not done this myself before with XRP, so was seeking a bit of guidance really, if that makes sense?

Yeah that makes sense :) - I think the best spot for that kind of guidance would probably be the community Discord - http://xrpldevs.com/

There's lots of great folks over there who've got varied levels of exposure to building with the XRPL & can help figure things out with you :)

[joedakwa]

I think some of what you mentioned is certainly helpful for sure, just not done this myself before with XRP, so was seeking a bit of guidance really, if that makes sense?

Yeah that makes sense :) - I think the best spot for that kind of guidance would probably be the community Discord - http://xrpldevs.com/

There's lots of great folks over there who've got varied levels of exposure to building with the XRPL & can help figure things out with you :)

Sure up head over there thank you!