Request to remove/replace some npm package dependencies

[davidchingmy]

Hello, I am currently using vanilla JS to integrate dapp with sequence. When I tried to follow guide at https://docs.sequence.xyz/wallet/connectors/wagmi#installation, I get some errors related to missing modules - react, react-dom, wagmi.

For context:

• Using Angular 14
• Using Web3Modal + Wagmi
• For Wagmi, only uses @wagmi/core

Thank you

[pkieltyka]

hi there, sequence doesn't require react, react-dom. In our wagmi-connector https://github.com/0xsequence/wagmi-connector/blob/master/package.json#L27 we specify wagmi as a peerDependency. It looks like "wagmi" package itself specifies react as a peerDependency https://github.com/wagmi-dev/wagmi/blob/main/packages/react/package.json#L91

is there any particular reason you want to use wagmi if you're not building with react? it's benefits are mostly as react hooks. Otherwise, I'd suggest to just use 0xsequence directly and you can do everything you need with 0xsequence + ethers

[davidchingmy]

hey, wagmi do have vanilla js and yes it is very helpful with its actions.

we also already have running dapp uses wagmi on non-react app. so we are trying to avoid rewrite codebase like for sequence.

our current workaround is to add react as dev dependencies. not ideal but works for now, just hoping sequence can purely uses wagmi core as its dependency.

thank you

[pkieltyka]

sure -- we'll look into updating our wagmi-connector to peer depend on @wagmi/core instead of wagmi and we'll see how it goes.

[SamueleA]

hey, wagmi do have vanilla js and yes it is very helpful with its actions.

we also already have running dapp uses wagmi on non-react app. so we are trying to avoid rewrite codebase like for sequence.

our current workaround is to add react as dev dependencies. not ideal but works for now, just hoping sequence can purely uses wagmi core as its dependency.

thank you

Hey!
When changing the dependencies to using wagmi/core instead of wagmi, there were type problems with some versions of wagmi (with hooks) and our connector. Considering hooks is a main selling point for Wagmi, I think it would be best we keep compatibility with Wagmi.

However, there's still a good compromise for your current issue. You can create a file with the code for the wagmi connector in it since the code itself is very simple.

Below is the code for the wagmi connector with types imported from wagmi/core:

import { sequence } from '0xsequence';
import { mainnetNetworks, testnetNetworks } from '@0xsequence/network';
import type { ConnectOptions, Web3Provider } from '@0xsequence/provider';
import { Wallet } from '@0xsequence/provider';
import { Connector, ConnectorData, ConnectorNotFoundError, UserRejectedRequestError, Chain, Address } from 'wagmi/core';

interface Options {
  connect?: ConnectOptions;
}

sequence.initWallet('polygon');

export class SequenceConnector extends Connector<Web3Provider, Options | undefined> {
  id = 'sequence';
  name = 'Sequence';
  // chains = chainConfigList
  ready = true;
  provider: Web3Provider | null = null;
  wallet: Wallet;
  connected = false;
  constructor({ chains, options }: { chains?: Chain[]; options?: Options }) {
    super({ chains, options });
    this.wallet = sequence.getWallet();
  }
  async connect(): Promise<Required<ConnectorData<Web3Provider>>> {
    if (!this.wallet.isConnected()) {
      // this.emit('message', { type: 'connecting' })
      const e = await this.wallet.connect(this.options?.connect);
      if (e.error) {
        throw new UserRejectedRequestError(e.error);
      }
      if (!e.connected) {
        throw new UserRejectedRequestError('Wallet connection rejected');
      }
    }

    const chainId = await this.getChainId();
    const provider = await this.getProvider();
    const account = await this.getAccount() as Address;
    // provider.on("accountsChanged", this.onAccountsChanged);
    this.wallet.on('chainChanged', this.onChainChanged);
    provider.on('disconnect', this.onDisconnect);
    this.connected = true;
    return {
      account,
      chain: {
        id: chainId,
        unsupported: this.isChainUnsupported(chainId),
      },
      provider,
    };
  }
  async disconnect() {
    this.wallet.disconnect();
  }
  getAccount() {
    return this.wallet.getAddress() as Promise<Address>;
  }
  getChainId() {
    if (!this.wallet.isConnected()) {
      return this.connect().then(() => this.wallet.getChainId());
    }
    return this.wallet.getChainId();
  }
  async getProvider() {
    if (!this.provider) {
      const provider = this.wallet.getProvider();
      if (!provider) {
        throw new ConnectorNotFoundError('Failed to get Sequence Wallet provider.');
      }
      this.provider = provider;
    }
    return this.provider;
  }
  async getSigner() {
    return this.wallet.getSigner();
  }
  async isAuthorized() {
    try {
      const account = await this.getAccount();
      return !!account;
    } catch {
      return false;
    }
  }
  async switchChain(chainId: number): Promise<Chain> {
    await this.provider?.send('wallet_switchEthereumChain', [{ chainId }]);
    return { id: chainId } as Chain;
  }
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  protected onAccountsChanged = (accounts: string[]) => {
    return;
  };
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  protected onChainChanged = (chain: number | string) => {
    this.provider?.emit('chainChanged', chain);
    const id = normalizeChainId(chain);
    const unsupported = this.isChainUnsupported(id);
    // this.emit('change', { chain: { id, unsupported } })
  };
  protected onDisconnect = () => {
    // this.emit('disconnect')
  };
  isChainUnsupported(chainId: number): boolean {
    return !(mainnetNetworks.some((c) => c.chainId === chainId) || testnetNetworks.some((c) => c.chainId === chainId));
  }
}

function normalizeChainId(chainId: string | number | bigint) {
  if (typeof chainId === 'string') return Number.parseInt(chainId, chainId.trim().substring(0, 2) === '0x' ? 16 : 10);
  if (typeof chainId === 'bigint') return Number(chainId);
  return chainId;
}

If you copy this code in a file and import it, the result will be the same as using a version of the connector published to npm!

[davidchingmy]

Thanks alot! I would try this maybe within a week

[davidchingmy]

I have tried this, it works at least until connection established. Unfortunately, I couldn’t test the rest of it like contract interaction due to this issue. I am currently switching to use pure Sequence implementation (no connector) for the time being. Thanks!