rarible sdk uses outdated web3

[arlenner]

Hi Rarible team,

I am having some issues instantiating the SDK. I am able to connect my metamask wallet, however passing the created connection to the SDK errs. Below is the error generated.

After some research, seems like this was a problem prior to more recent versions of web3, and is solved in web3 v4+. However, the peerDependencies of rarible's web3ethereum package.json only relies on web3 v1.5.0. I believe this to be the root cause. However, here is my connector code (connects fine, but sdk fails to initialize with metamask wallet):

const App = () => {
    const [connector, setConnector] = useState();
    const [isConnected, setIsConnected] = useState(false);

    useEffect(() => {
        if(connector && !isConnected) {
            console.log(connector);
            connector.connection.subscribe(async (con) => {
                console.log("connection", con);
                if(con.status === 'disconnected') {
                    setIsConnected(false);
                }
                else if (con.status === "connected") {
                    setIsConnected(true);
                    //fails at sdk init's ethereumw3 package, at a generator fn yield statement in .getChainId()
                    const sdk = createRaribleSdk(con.connection.wallet, "prod", { apiKey: MAINNETKEY });
                }
            });

            connector.getOptions().then(options => {
                console.log('connector options', options);
                connector.connect(options[0]).then(x => console.log('connected', x));
            });
        }
    }, [connector]);

    useEffect(() => {
        console.log('APP MOUNTED MARKER.');
        if(!connector) {
            const injected = mapEthereumWallet(new InjectedWeb3ConnectionProvider({
                prefer: [DappType.Metamask, DappType.Coinbase]
            }));

            setConnector(
                Connector.create(injected, /*walletState*/)
            );
        }
        return () => {
            console.log('APP UNMOUNTED MARKER.');
            if(connector) {
                connector.disconnect();
            }
        }
    }, []);

    return (
        <>...</>
    );

Additional Notes

• I am using CRA, however I use craco for overriding natural webpack settings
• NodePolyfillPlugin for webpack fixes all other missing options (like Buffer and friends), better and cleaner than installing each individual node-ification module.
• added proper "browserslist" to package.json, but this didn't solve my issue
• running latest web3 packages, but doesn't fix internal deps from the rarible/sdk module

Let me know if you need more!

[vanya2h]

Hello @arlenner . We're currently working on a new package that will give ability to use sdk with both versions of web3 - v1, v4. It's planned to be released next week. As a workaround I can suggest you not very simple but a working solution:

In case you're working with monorepos (like lerna):

1. Create a new package (it will be a proxy package) in your monorepo
2. Add a web3 ^1.5.0 and web3-ethereum as a "dependency" in package.json of new package
3. Once web3 ^1.5.0 is installed as local dependency you may export some initialization function

This is as an example:

// will be taken legacy 1.x version because it's in dependency list
import Web3 from "web3"
import { Web3Ethereum } from "@rarible/web3-ethereum

export function createLegacyWeb3(provider: any) {
  return new Web3Ethereum({ web3: new Web3(provider) })
}

This will allow you still use web3 ^4 for your application. The tradeoff is that app build will have 2 different versions. We will look forward to finalize our work on support of various web3.js versions

[arlenner]

@vanya2h - I will try this workaround for now, but may end up just waiting until the v4 support is there. Kudos to your team for providing this project as open source, by the way 😄.

[arlenner]

@vanya2h trying to work through this issue with the error presented above - any ideas what to do to parse that correctly? Can I create a legacy provider like you mentioned and then thread that through the createRaribleSdk function somehow? not sure how I can specify the correct provider or get around using the export web3ethereum's getChainId()