add walletconnect support #20
Conversation
|
✔️ Deploy Preview for hypervibes-app ready! 🔨 Explore the source changes: 5906534 🔍 Inspect the deploy log: https://app.netlify.com/sites/hypervibes-app/deploys/61c0dc84978da0000810d022 😎 Browse the preview: https://deploy-preview-20--hypervibes-app.netlify.app/ |
| <UseWalletProvider | ||
| connectors={{ | ||
| walletconnect: { | ||
| rpc: RPC_URLS, |
There was a problem hiding this comment.
This is the correct configuration, but differs from what's defined in the use-wallet documentation -- will open a PR against the repo soon to resolve that.
vite.config.ts
Outdated
| @@ -9,4 +9,7 @@ export default defineConfig({ | |||
| sourcemap: true, | |||
| manifest: true, | |||
| }, | |||
| define: { | |||
| 'process.env': process.env, | |||
There was a problem hiding this comment.
@therealparmesh Lemme know if there's a more preferable way to do this in vite-land.
There was a problem hiding this comment.
@zakangelle
I believe Vite already provides these variables within import.meta: https://vitejs.dev/guide/env-and-mode.html#env-variables
FWIW, this seems to be closer to browser standards than process.env: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import.meta
Also, here are some usages of import.meta in this repository.
There was a problem hiding this comment.
The tricky part is we're using a library (as a transitive dependency) which references process.env assuming its variables are string replaced at build-time (which isn't the case w/ Vite), so we need to inject an empty process.env object to unbreak a runtime error thrown in that library. Not sure if there's a better way to do that though.
This section of the library README alludes to a similar issue which happens with Angular 11 builds.
There was a problem hiding this comment.
Ah I see what you mean! Then yeah, this is the best way to go.
There was a problem hiding this comment.
Doh! I should've read the PR description first.
As a side note: Those last 2 points are definitely worth fixing in that library.
This PR adds wallet provider support for WalletConnect.
As part of this integration, a few issues were addressed to ensure everything works properly:
global: See vite import dragula error: global is not defined vitejs/vite#2778Buffer: See How to shim Buffer and crypto? vitejs/vite#3126process.env: See vite use web3.js throw Uncaught ReferenceError: process is not defined rollup/plugins#902 (comment)Most of these are known issues with the web3 library, but only surface in certain build systems (e.g. vite doesn't define
process.envby default) and during specific flows.Wallet Modal: Step 1
Wallet Modal: Step 2
TODO