Chain mismatch error (Chain mismatch: Expected "Polygon Mumbai", received "Chain 80001. at signTypedData)

[AireshBhat]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @everipedia/wagmi-magic-connector@0.6.2 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/@everipedia/wagmi-magic-connector/build/main/lib/connector.js b/node_modules/@everipedia/wagmi-magic-connector/build/main/lib/connector.js
index 32905e6..e74ac0e 100644
--- a/node_modules/@everipedia/wagmi-magic-connector/build/main/lib/connector.js
+++ b/node_modules/@everipedia/wagmi-magic-connector/build/main/lib/connector.js
@@ -136,7 +136,7 @@ class MagicConnector extends core_1.Connector {
         if (typeof networkOptions === 'object') {
             const chainID = networkOptions.chainId;
             if (chainID) {
-                return String((0, core_1.normalizeChainId)(chainID));
+                return (0, core_1.normalizeChainId)(chainID);
             }
         }
         throw new Error('Chain ID is not defined');

The Problem

Wagmi expects the chainId to be a number, but this library is returning the number as a string which results in the function throwing a chain mismatch error.

Sign typed data fails as the below check fails.

Requesting you to please fix this issue! Thank you again 😄🙌

Versions

"wagmi": "^0.5.11",
"@everipedia/wagmi-magic-connector": "^0.6.2",

[Royal-lobster]

@AireshBhat Thanks for the opening the issue. may i know the connector instance you implemented ?

const connector = new MagicConnector({
  options: {
    //...options
  },
});

[AireshBhat]

Yup!
This is the instance

const { chains, provider } = configureChains(
    [chain.polygonMumbai, chain.mainnet],
    [alchemyProvider({ alchemyId: ALCHEMY_KEY })]
);

new MagicConnector({
        chains,
        options: {
            apiKey: MAGIC_PUBLISHABLE_KEY,
            oauthOptions: {
                providers: ['google'],
                callbackUrl: 'https://localhost:3000/', //optional
            },
            additionalMagicOptions: {
                network: {
                    rpcUrl: 'https://rpc-mumbai.maticvigil.com',
                    chainId: chain.polygonMumbai.id, // chain is imported from wagmi
                },
            },
        },
    }),

[Royal-lobster]

@AireshBhat Thanks ! May i know your which version of wagmi you are using ?

[AireshBhat]

I'm using version 0.5.11

[Royal-lobster]

@AireshBhat We had the similar issue but somehow in our implementation the chainId is inferred as string instead of number. so we assumed it is the bug with wagmi 0.5.11. we would have to a deepdive into the issue as a user. for now we will proceed with merging the pull request for new patch 👍

Thanks for your contribution !

[Royal-lobster]

Released the patch under 0.6.3 ! now you can safely migrate to the new version from patch-package

[AireshBhat]

Thank you so much! Closing the issue for now 🙌