Integrate wagmi with thirdweb

[dvartic]

Is there any way to pass a Signer (which I assume will have to be converted to Viem WalletClient) to wagmi to just use hooks that depend on a signer?

I understood that I needed to create a custom connector for this, but not sure if there is another way.

The reason for doing this is using Reservoir SDK which depends on wagmi, but use Thirdweb for managing wallet connection.

[eth0izzle]

Hey @dvartic did you find a solution?

[dvartic]

No, I ended up removing wagmi completely and only having thirdweb as dependency. I did not want to deal with building a connector. I rewrote the ReservoirSDK to use Thirdweb instead (kept all of their code but replaced wagmi for thirdweb). For now, I am happy with this decision.

In the future I will need to rewrite all of this. I've found that code quality on both ReservoirSDK and Thirdweb is not good, and depending on these libraries is not optimal.

[umerfarooq777]

Hey mate, how you completely removed wagmi I'm also doing the same but for Smart wallets currently using hook to connect thirdweb to wagmi connect whenever thirdweb address or chain id changes, can I see your code

[dvartic]

Hey mate, how you completely removed wagmi I'm also doing the same but for Smart wallets currently using hook to connect thirdweb to wagmi connect whenever thirdweb address or chain id changes, can I see your code

Sorry for the late response. I rewrote the Reservoir React SDK and replaced all wagmi calls with versions based on ethers. I also used the adaptEthersSigner function import { adaptEthersSigner } from "@reservoir0x/ethers-wallet-adapter";

Screenshoting snippets.

Honestly this is not great architecture nor code (and both ReservoirSDK and ThirdwebSDK are quite bad quality wise), I wrote this months ago and the project doesn't seem to be getting traction. If it does (and I get paid accordingly) all of this will need a rewrite.

My recommendation after almost a year working on the space would be to write your own implementations based on wagmi (which is currently the best library) and avoid using other limiting or low quality abstractions such as thirdweb or reservoir (unless you absolute need the latter for the marketplace features ofc).

[umerfarooq777]

I see, bro can I have more clue about the code I didn't get how could I use thirdweb signer as ethers signer can I have more snippets, thanks for the help and response😃

[eth0izzle]

Ok this wasn't as painful as I thought it would be. Not fully tested but Reservoir detects my ThirdWeb wallet, pops transactions etc.

Create a custom connector;

import { ThirdwebSDK } from "@thirdweb-dev/sdk"
import { getAddress } from "viem"
import {  providers } from "ethers"
import { ProviderNotFoundError, createConnector } from '@wagmi/core'

export type ThirdWebParameters = {
  sdk?: ThirdwebSDK | undefined,
  shimDisconnect?: boolean | undefined,
}

thirdWebWallet.type = 'thirdweb' as const
export function thirdWebWallet(parameters: ThirdWebParameters = {}) {
  const { shimDisconnect = false, sdk: thirdWebSdk } = parameters

  type Provider = providers.Provider | undefined
  type Properties = {}
  type StorageItem = { 'thirdweb.disconnected': true }

  return createConnector<Provider, Properties, StorageItem>((config) => ({
    id: 'thirdweb',
    name: 'ThirdWeb',
    type: thirdWebWallet.type,
    async connect() {
      const provider = await this.getProvider()
      if (!provider) throw new ProviderNotFoundError()

      const accounts = await this.getAccounts()
      const chainId = await this.getChainId()

      provider.on('disconnect', this.onDisconnect.bind(this))

      // Remove disconnected shim if it exists
      if (shimDisconnect) await config.storage?.removeItem('thirdweb.disconnected')

      return { accounts, chainId }
    },
    async disconnect() {
      const provider = await this.getProvider()
      if (!provider) throw new ProviderNotFoundError()

      provider.removeListener('disconnect', this.onDisconnect.bind(this))

      // Add shim signalling connector is disconnected
      if (shimDisconnect)
        await config.storage?.setItem('thirdweb.disconnected', true)
    },
    async getAccounts() {
      const provider = await this.getProvider()
      if (!provider) throw new ProviderNotFoundError()
      
      return [getAddress(await thirdWebSdk?.getSigner()?.getAddress()!)]
    },
    async getProvider() {
      var provider = await thirdWebSdk?.getProvider()
      if (!provider) throw new ProviderNotFoundError()
      return provider
    },
    async getChainId() {
      return Number(await thirdWebSdk?.getSigner()?.getChainId());
    },
    async isAuthorized() {
      try {
        const isDisconnected =
          shimDisconnect &&
          // If shim exists in storage, connector is disconnected
          (await config.storage?.getItem('thirdweb.disconnected'))
        if (isDisconnected) return false

        const accounts = await this.getAccounts()
        console.log('isAuthorized', accounts);
        return !!accounts.length
      } catch {
        return false
      }
    },
    onAccountsChanged() {
      // Not relevant for ThirdWeb?
    },
    onChainChanged() {
      // Not relevant for ThirdWeb?
    },
    onDisconnect() {
      config.emitter.emit('disconnect')
    },
  }))
}

Which you pass to your wagmi createConfig call via connectors connectors: [thirdWebWallet({ sdk })]. sdk comes from const sdk = useSDK(); - just make sure your WagmiProvider is below your ThirdwebProvider.

[dvartic]

Thank you for your input. I tried to avoid writing this plus I did not like the idea of having two similar libraries. In the future I think I'll drop both Reservoir and Thirdweb as a dependency anyway. They are not that great.