coinbase-wallet-sdk: Incompatibility issue with Web3Modal in Angular

This is an interesting issue because it works in a React application in scaffold-eth, but not in Angular. The issue originates in declaring ethereum globally as an extension of the Window object. In both WalletLink and Web3Modal, ethereum is extended on the window, but the interfaces declare ethereum differently. When compiling an Angular application, it catches this discrepancy and reports it as an error.

I’m not sure what the right path is. Hoping for some resolution on this without having to change the source code of this package in my project.

WalletLink’s global window: https://github.com/coinbase/coinbase-wallet-sdk/blob/master/src/index.ts

declare global {
  interface Window {
    WalletLink: typeof WalletLink
    WalletLinkProvider: typeof WalletLinkProvider
    ethereum?: WalletLinkProvider
    walletLinkExtension?: WalletLinkProvider
  }
}

Web3Modal global window: https://github.com/Web3Modal/web3modal/blob/master/src/components/Modal.tsx

declare global {
  // tslint:disable-next-line
  interface Window {
    ethereum: any;
    BinanceChain: any;
    web3: any;
    celo: any;
    updateWeb3Modal: any;
  }
}

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 3
Comments: 16 (5 by maintainers)

Most upvoted comments

@ljharb in fact, the developer always has the choice to cast to the type he wants, regardless of whether the original type is any, it can be achieved easily by just adding 2 consecutive castings. Right now, he is forced to do so due to the unknown.

But the main issue here is that the project will simply not compile (having the TS compiler option skipLibCheck: false set, which is the default and recommended) due to the type mismatch between the declaration of the same variable in 2 different libs. So I see only two options to solve this problem: 1) set ethereum: any in this lib or 2) set ethereum: unknown in the Web3Modal lib.

But IMHO as I already mentioned before, I would prefer having such type change here rather than in Web3Modal so that no cast is required which I would say is fair enough considering the amount of providers you can add with that modal, so that the developer is not forced to add a cast for every single provider but he’ll still have the choice as you mentioned.

christophercr on May 23, 2022

Hello again.

We’ve just upgraded to the latest version (3.0.6) and I’m afraid the issue is not solved yet. The type for the ethereum property was just changed to unknown which is more restrictive and still not the same as any as it’s declared in the Web3Modal lib.

Is there any reason why the ethereum property is set to unknown? If so, then how can we overcome that type mismatch so that we can get our app up and running without enabling TypeScript’s skupLibCheck (which is far from ideal)?

christophercr on Apr 12, 2022

hey @karthedew thanks for checking in. @erin-at-work i saw that on your last PR you mentioned whether we would use any instead https://github.com/coinbase/coinbase-wallet-sdk/pull/432/files#r835526498 can you take a look when you get a chance?

bangtoven on Feb 27, 2023

Same issue here.

christophercr on Mar 9, 2022

What’s the point of using TS if you’re not going to want to be forced to do that?

ljharb on May 9, 2022

In fact setting the property to unknown is a bit restrictive because the developer is “forced” to cast this to the corresponding type according to his needs.

I do understand the reasoning behind this decision however, Web3Modal (one of the most popular libs to support multiple providers in one single place), defines it as any so that no cast is needed which I would say is fair enough considering the amount of providers you can add in there, so that the developer should not add a cast for every single provider.

christophercr on May 9, 2022