Comments (11)
Sure, I'll wait for the updates. If you need any help, let me know. BTW, I've sent you a message about a little util app I've made with web3-react on Twitter.
from web3-react.
@macbem I was wrestling with this all day yesterday :/ I actually had it working quite nicely, SDKs would be fetched conditionally, and errors would be thrown only if you tried to initialize a connector that required an SDK which you hadn't installed yet.
Unfortunately it turns out that, for example, the create-react-app config really doesn't like dynamic imports where the referenced library isn't actually installed in the project. I was getting either a) un-suppressible warning from the webpack hot loader, or b) errors depending on which flavor of conditional/dynamic imports I was using.
I would honestly love to rip out all all the dependencies other than @0x/subproviders
, because you're totally right, they're all optional and absolutely bloat the package.
Do you have any thoughts on this? It's possible that the best solution is to proceed with the unbundled code that works but causes un-suppressible errors in create-react-app.
from web3-react.
I think that the best option would be to let users lazy-load connectors on their own - just expose them as a subpackage, like @web3-react/connectors/Portis
using a tool like Lerna for managing all this.
Sure, web3-react
users would have a bit more to do, but the lib would become much more useful in "professional" scenarios because downloading it wouldn't mean accepting a 2mb dependency. This would also solve your issues with create-react-app
.
Most of the stuff this lib does is already async, because you have to wait for user approval in case of transactions, so IMO this wouldn't make using this lib too complex.
from web3-react.
If you want to play around with this pattern, the unbundled version is 4.0.2.
The caveat is that you'll probably get those webpack warnings in dev. The upside is that I'm 95% sure that ultimately this doesn't matter, because once you bundle and ship to production, if you don't include connectors which use the SDKs you haven't installed, no errors will occur.
from web3-react.
Ok @macbem great points, I will pursue that path. To clarify, exposing connectors as subpackages would help only if each one is exposed as an individual npm package, correct? Which I could use Lerna to manage?
from web3-react.
Not a Webpack expert, it really depends on how Webpack resolves dynamic imports from packages. If you could bundle the base web3-react
and then dynamically load connectors from the same package, this would be perfect. Lerna is just a tool for managing monorepos that makes it easier to manage developing packages that are somewhat connected.
from web3-react.
bundle the base web3-react and then dynamically load connectors from the same package
Agreed that this is best, i'm just not confident that the dev environments of the average web3-react user are going to handle this pattern gracefully by default.
This problem bugs me a lot to be honest, so I think as a first step I will break out all connectors (or maybe just the ones that require an SDK, since the others have minimal bundle size overhead) into individually scoped @web3-react/connectors/{blah}
or maybe @web3-react/{blah}
packages. I will aim to have this done by the end of today, or tomorrow, if you'd like to hang tight until then.
from web3-react.
@macbem This is ready to go! New bundle size is >50% smaller. web3-react
now only has 1 dependency: @0x/subproviders
.
I moved TrezorConnector
, WalletConnectConnector
, FortmaticConnector
, and PortisConnector
into separate packages: @web3-react/trezor
, @web3-react/walletconnect
, @web3-react/fortmatic
, and @web3-react/portis
respectively, which all live in the new web3-react-connectors monorepo.
The github/docs/codesandbox examples have all been updated.
Let me know if you have any questions/issues!
from web3-react.
Looks and works fine, although I'd probably release this as 5.0.0 - it's a breaking change after all. Btw, why not have both web3-react
and connectors in a monorepo?
from web3-react.
@macbem so i had a bit of a change of heart - rather than going the monorepo route, i think what i want to do for connectors that require an SDK is require users to pass it in at runtime. this has the benefit of getting rid of all the dynamic import problems and overhead of managing a monorepo, with the downside of relying on users to install particular SDKs. after initial implementation, i think the tradeoff is definitely worth it.
i released this as 5.0.0
, tagged as unstable
. i'm going to keep it like this for a bit, and if i don't find any errors, release it as latest
.
from web3-react.
closed as of 5.0.2
, tagged as latest
! i opted for the runtime argument route.
from web3-react.
Related Issues (20)
- Compatibility Issue with @web3-react/walletconnect-v2 and Latest Versions of Next.js and React
- When using WalletConnect v2 provider getSigner seems to be going to the v1 API HOT 1
- Issue activating walletconnect v2: this.events.off is not a function HOT 2
- Issues with having ethers 6 and web3-react side by side HOT 1
- Coinbase Connecting Issue
- Module parse failed: Unexpected token walletconnect-v2 HOT 1
- Create Fork
- @mousewifhat, kind reminder: please pay fee: **500 TWT** with the memo **27116** to the address `bnb158fgd782we4tz9vwwcj9pmmxvxhl6z46lfm7c8`.
- How to connect Trezor wallet using web3-react v8
- How can I get provider url from connected wallet? HOT 2
- Why is `connector.deactivate` always undefined? HOT 1
- **The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)
- Walletconect v2 chains not supported
- V3-core
- TypeError: Object(...) is not a function (WalletConnectV2) HOT 1
- How can I sign a transaction using web3-react library?
- dotnet add package dotnetstandard-bip39 --version 1.0.2
- Something happend with intendation
- How can I send transaction to ethereum via metamask?
- tags` as well.beezywqp
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from web3-react.