Question on binding `Signer` from external source

[foreseaz]

Hi ens devs, I'm currently using ensjs-v3 with wagmi (and rainbowkit). The question is when I try to setRecord using the following flow, the error shows Unhandled Runtime Error TypeError: thisRef.provider?.getSigner is not a function:

async function test(ensName: string) {
      const provider = useProvider<providers.BaseProvider>();
      const ens = new ENS();
      await ens.setProvider(provider as any);
      const profile = await ens.getProfile(ensName); // works fine

      const record = {
        type: 'contentHash',
        record:
          'ipns://k51qzi5uqu5dgox2z23r6e99oqency055a6xt92xzmyvpz8mwz5ycjavm0u150',
        addressOrIndex: 1,
      };
      const tx = await ens.setRecord(ensName, record as any); // errors
}

Since the setProvider param is ethers.providers.JsonRpcProvider instead of ethers.providers.web3Provider, the current way for ENS instance gets the Signer is from JsonRpcProvider.getSigner method. Could it be possible for ENS add an API like:

      ens.setSigner(signer);

So that it will be more flexible to add external signer instead of getting from JsonRpcProvider? Or do you have any suggestion for my case using ENSjsV3 with wagmi (and rainbowkit)?

Thanks in advance for the reply!

[foreseaz]

@TateB @LeonmanRolls , could you please give an example of a complete flow on how to use ENS to setRecord with input a JsonRpcProvider?

[foreseaz]

And from ens app v3, https://github.com/ensdomains/ens-app-v3/blob/dev/src/transaction-flow/transaction/updateProfile.ts#L22

ens.setRecords.populateTransaction(data.name, {
    records: data.records,
    resolverAddress: data.resolver,
    signer,
  })

Could you add an example of this to the current document?

[TateB]

the example from ens-app-v3 you're referencing is passing a signer in which comes from useSigner, you could do the same. in a react app you'd probably also want to use EnsProvider

const signer = useSigner();
const { setRecord } = useEns();

const test = async (ensName: string) => {
    const record = {
        type: 'contentHash',
        record: 'ipns://k51qzi5uqu5dgox2z23r6e99oqency055a6xt92xzmyvpz8mwz5ycjavm0u150',
        signer,
    }

    const tx = await setRecord(ensName, record as any);
}

[appleseed-iii]

in the current version of wagmi it should be something like:

const { data: signer } = useSigner();
const { setRecord } = useEns();

const test = async (ensName: string) => {
    const record = {
        type: 'contentHash',
        record: 'ipns://k51qzi5uqu5dgox2z23r6e99oqency055a6xt92xzmyvpz8mwz5ycjavm0u150',
        signer: signer as ethers.providers.JsonRpcSigner,
    }

    const tx = await setRecord(ensName, record as any);
}