What is the best way to get connected provider?

[mqklin]

One of the options is:

import {useAccount} from 'wagmi';

const {connector} = useAccount();
const provider = connector.options.getProvider();

But I couldn't find any mention about connector.options in docs, so I'm not sure if it's safe to access connector.options

[tmm]

You probably want connector.getProvider since it's universal across all connectors.

[mqklin]

Thank you very much.

[EmilyPerryy]

Thanks for the advice, I'll try it now.

[weebuu]

Cant get it to work.

i try pass wagmi wallet connected provider to uniswap swap widget.

UNISWAP
https://docs.uniswap.org/sdk/swap-widget/guides/getting-started#web3-provider

I get this error: Cannot read properties of undefined (reading 'options')
TypeError: Cannot read properties of undefined (reading 'options')

[junqueror]

Cant get it to work.

i try pass wagmi wallet connected provider to uniswap swap widget.

UNISWAP https://docs.uniswap.org/sdk/swap-widget/guides/getting-started#web3-provider

I get this error: Cannot read properties of undefined (reading 'options') TypeError: Cannot read properties of undefined (reading 'options')

Hey @weebuu, a little bit late, but I finally got it working with Uniswap widget

Seems that the last version of Wagmi relies on Viem (unless you specify not to). This means there is no ethers provider:
#2615 (comment)

There is a way to switch from Viem client to ethers provider:
https://wagmi.sh/react/guides/ethers#client-%E2%86%92-provider (Using ethers v5 version, same as the swap widget)

I've made some changes in types to make it work with widget provider prop:

// useEthersProvider.tsx

import React, { useMemo } from 'react'
import { providers } from 'ethers'
import type { Chain, Client, Transport } from 'viem'
import { Config, useClient } from 'wagmi'

const clientToProvider = (client: Client<Transport, Chain>): providers.JsonRpcProvider => {
  const { chain, transport } = client
  const network = {
    chainId: chain.id,
    name: chain.name,
    ensAddress: chain.contracts?.ensRegistry?.address,
  }
  if (transport.type === 'fallback')
    return new providers.FallbackProvider(
      (transport.transports as ReturnType<Transport>[]).map(
        ({ value }) => new providers.JsonRpcProvider(value?.url, network),
      ),
    ) as unknown as providers.JsonRpcProvider;
  return new providers.JsonRpcProvider(transport.url, network)
}

export const useEthersProvider = ({
    chainId,
}: { chainId?: number | undefined } = {}) => {
    const client = useClient<Config>({ chainId });

    const provider = useMemo(() => (client ? clientToProvider(client) : undefined), [client]);

    return provider;
}

Then wherever you have the swap cpmponent:

   const provider = useEthersProvider({ chainId: SupportedChainId.POLYGON });
   ... 
   render (
       ...
       <SwapWidget
            provider={provider}
            ...
      >

Seems to be working. Now I have some new issues... I'm trying to make it work with wagmi + rainbwokit + uniswap swap widget, but it's being a nightmare since the widget component is really bud implemented and plenty of bugs.

Did you finally make it work? If so, can you share an example?

[CodeAunt]

Cant get it to work.
i try pass wagmi wallet connected provider to uniswap swap widget.
UNISWAP https://docs.uniswap.org/sdk/swap-widget/guides/getting-started#web3-provider
I get this error: Cannot read properties of undefined (reading 'options') TypeError: Cannot read properties of undefined (reading 'options')

Hey @weebuu, a little bit late, but I finally got it working with Uniswap widget

Seems that the last version of Wagmi relies on Viem (unless you specify not to). This means there is no ethers provider: #2615 (comment)

There is a way to switch from Viem client to ethers provider: https://wagmi.sh/react/guides/ethers#client-%E2%86%92-provider (Using ethers v5 version, same as the swap widget)

I've made some changes in types to make it work with widget provider prop:

// useEthersProvider.tsx

import React, { useMemo } from 'react'
import { providers } from 'ethers'
import type { Chain, Client, Transport } from 'viem'
import { Config, useClient } from 'wagmi'

const clientToProvider = (client: Client<Transport, Chain>): providers.JsonRpcProvider => {
  const { chain, transport } = client
  const network = {
    chainId: chain.id,
    name: chain.name,
    ensAddress: chain.contracts?.ensRegistry?.address,
  }
  if (transport.type === 'fallback')
    return new providers.FallbackProvider(
      (transport.transports as ReturnType<Transport>[]).map(
        ({ value }) => new providers.JsonRpcProvider(value?.url, network),
      ),
    ) as unknown as providers.JsonRpcProvider;
  return new providers.JsonRpcProvider(transport.url, network)
}

export const useEthersProvider = ({
    chainId,
}: { chainId?: number | undefined } = {}) => {
    const client = useClient<Config>({ chainId });

    const provider = useMemo(() => (client ? clientToProvider(client) : undefined), [client]);

    return provider;
}

Then wherever you have the swap cpmponent:

   const provider = useEthersProvider({ chainId: SupportedChainId.POLYGON });
   ... 
   render (
       ...
       <SwapWidget
            provider={provider}
            ...
      >

Seems to be working. Now I have some new issues... I'm trying to make it work with wagmi + rainbwokit + uniswap swap widget, but it's being a nightmare since the widget component is really bud implemented and plenty of bugs.

Did you finally make it work? If so, can you share an example?

Thanks. Your solution saved my day

[victor-apostol]

Hello @mqklin,

I am probably late to the party, but I also struggled with this, so I'll share, might help others !

I think the current answer to your question should be this:

import { useConnectorClient } from 'wagmi';

const { data: client } = useConnectorClient();

// you can use it like this:
const getBalance = async () => {
  if (!client) {
    throw new Error('Client is not initialized');
  }
    
  try {
    const balance = await client.request({
      method: 'eth_getBalance',
      params: ['0x...', 'latest'],
    });
    return balance;    
  } catch(err) {
     // handle error
    console.error("Error occurred while fetching balance", err);
  }
}

In this case, you get direct access to your current connector's provider (e.g., MetaMask). However, if you wish, you can also specify a specific connector as an argument to useConnectorClient.