Incompatible with latest versions of the main libraries

[mwawrusch]

Hi guys, trying to get this to work with

"@magic-ext/connect": "^4.0.0",
"@magic-ext/oauth": "^5.0.0",
"@magic-sdk/provider": "^11.0.0",
"@wagmi/core": "^0.8.5",
"magic-sdk": "^11.0.0"

using next.js v13

but it won't compile, tons of errors, some type related.

[alexjorgef]

Hi @mwawrusch, that sounds like linter issues, can you share the error log?

[mwawrusch]

this is the top level error:

(alias) new MagicAuthConnector(config: {
    chains?: Chain[] | undefined;
    options: MagicAuthOptions;
}): MagicAuthConnector
import MagicAuthConnector
Type 'MagicAuthConnector' is not assignable to type 'Connector<any, any, any>'.
  The types returned by 'connect(...)' are incompatible between these types.
    Type 'Promise<{ provider: RPCProviderModule & AbstractProvider; chain: { id: number; unsupported: boolean; }; account: string; }>' is not assignable to type 'Promise<Required<ConnectorData<any>>>'.
      Type '{ provider: RPCProviderModule & AbstractProvider; chain: { id: number; unsupported: boolean; }; account: string; }' is not assignable to type 'Required<ConnectorData<any>>'.
        Types of property 'account' are incompatible.
          Type 'string' is not assignable to type '`0x${string}`'.ts(2322)

[mwawrusch]

getAcount in magicConnector has this one:

(method) MagicConnector.getProvider(): Promise<RPCProviderModule & AbstractProvider>
Argument of type 'RPCProviderModule & AbstractProvider' is not assignable to parameter of type 'ExternalProvider | JsonRpcFetchFunc'.
  Type 'RPCProviderModule & AbstractProvider' is not assignable to type 'ExternalProvider'.
    Types of property 'send' are incompatible.
      Type '{ <ResultType = any>(method: string, params?: any[] | undefined): PromiEvent<ResultType, void>; (payload: JsonRpcRequestPayload<any> | JsonRpcRequestPayload<any>[], onRequestComplete: JsonRpcRequestCallback): void; <ResultType>(payload: JsonRpcRequestPayload<...>, none: void): JsonRpcResponsePayload<...>; } & ((payl...' is not assignable to type '((request: { method: string; params?: any[] | undefined; }, callback: (error: any, response: any) => void) => void) | undefined'.
        Type '{ <ResultType = any>(method: string, params?: any[] | undefined): PromiEvent<ResultType, void>; (payload: JsonRpcRequestPayload<any> | JsonRpcRequestPayload<any>[], onRequestComplete: JsonRpcRequestCallback): void; <ResultType>(payload: JsonRpcRequestPayload<...>, none: void): JsonRpcResponsePayload<...>; } & ((payl...' is not assignable to type '(request: { method: string; params?: any[] | undefined; }, callback: (error: any, response: any) => void) => void'.
          Types of parameters 'method' and 'request' are incompatible.
            Type '{ method: string; params?: any[] | undefined; }' is not assignable to type 'string'.ts(2345)
            ```
            
            and there are a few more.

[LyghtCode]

same issue

[LyghtCode]

can pay a tip in crypto to see this done soon :D, working on an urgent project. and would love to integrate this right away.

[Royal-lobster]

@mwawrusch Thanks for opening this issue ! Can you provide us a minimal reproduction repo for this ? it would help a lot 🙏

[LyghtCode]

https://github.com/LyghtCode/magic-connector-type-issue
I invited you to this one, thanks!

[mwawrusch]

Thanks LyghtCode

[LyghtCode]

np my version of next is next 12 i believe the main issue is adjusting the typing for the Connector to adhere to the newer wagmi Connector type

[LyghtCode]

any updates?

[Royal-lobster]

any updates?

We are working on new version with all latest magic and wagmi packages. but we are facing type issues from magic side. the same types are exported from different magic packages and they are seemingly not fitting with each other. so we are trying to sync up with the magic team to know how to use their exported types. we are still waiting for their response and hopefully we should get this resolved soon.

[LyghtCode]

thank you so much!

[mwawrusch]

Thanks, much appreciated.

[LyghtCode]

wagmi

[LyghtCode]

status? :D

[Royal-lobster]

status? :D

still waiting for response :(

[LyghtCode]

:(

[LyghtCode]

i pinged their discord with this issue. looks like another person needs the same issue fixed as well, hopefully they'll respond to you @Royal-lobster

[mwawrusch]

Added a comment as well and sent you a friend request on discord.

[am-hernandez]

@Royal-lobster

I followed up with you via our support chat but wanted to follow up here as well. I believe the move here is to upgrade to the latest version of the Magic SDK. Also, the Magic SDK uses @magic-sdk/provider as a peer dependency so you shouldn't have a need to install it separately. That could be a reason why you are having issues with types.

Please let me know if this helps!

[Royal-lobster]

@Royal-lobster

I followed up with you via our support chat but wanted to follow up here as well. I believe the move here is to upgrade to the latest version of the Magic SDK. Also, the Magic SDK uses @magic-sdk/provider as a peer dependency so you shouldn't have a need to install it separately. That could be a reason why you are having issues with types.

Please let me know if this helps!

Thanks !! This solved the issue. Currently we are testing the package, will release the update today asap.

[mwawrusch]

Guys,
using the latest and greatest I now get this error message on compile:

./node_modules/@everipedia/wagmi-magic-connector/build/main/lib/connectors/magicAuthConnector.js:5:0
Module not found: ESM packages (@wagmi/core) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

Import trace for requested module:
./node_modules/@everipedia/wagmi-magic-connector/build/main/index.js
./components/web3/hooks/useWagmiClient.tsx
./components-products/minter/minter-main.tsx

https://nextjs.org/docs/messages/module-not-found

[Royal-lobster]

Guys, using the latest and greatest I now get this error message on compile:

./node_modules/@everipedia/wagmi-magic-connector/build/main/lib/connectors/magicAuthConnector.js:5:0
Module not found: ESM packages (@wagmi/core) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

Import trace for requested module:
./node_modules/@everipedia/wagmi-magic-connector/build/main/index.js
./components/web3/hooks/useWagmiClient.tsx
./components-products/minter/minter-main.tsx

https://nextjs.org/docs/messages/module-not-found

Thanks for reporting 🙏 hoping #41 and #43 should fix the issue.

[Royal-lobster]

Done ! it seems to be working fine now, there was some module resolution issues which we solved by converting the package to ES Module. it should work without issues. try out with @everipedia/[email protected]. Please feel free to report any issues after upgrading.

[Royal-lobster]

@LyghtCode also added a new branch to your reproduction with fixed package https://github.com/LyghtCode/magic-connector-type-issue/tree/after-fix

[LyghtCode]

Amazing

[LyghtCode]

We will test on our production repo on Monday.

[mwawrusch]

Looks good on our end so far. We saw this warning (haven't had time to investigate further):

The resource was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
send:1 The resource https://assets.auth.magic.link/static/app.chunk~ui~async.7e2eb3e6eeb0ef972ddb.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

[LyghtCode]

it works. i was just wondering if it was possible to call the showallet() function? while using this wagmi, rainbowwallet config.

[Royal-lobster]

Looks good on our end so far. We saw this warning (haven't had time to investigate further):

The resource was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally. send:1 The resource assets.auth.magic.link/static/app.chunkuiasync.7e2eb3e6eeb0ef972ddb.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

Seems like its a issue coming from magic.

[Royal-lobster]

it works. i was just wondering if it was possible to call the showallet() function? while using this wagmi, rainbowwallet config

normally we can get the wallet information on useAccount hook from wagmi and use it to render the ui for wallet. but its interesting how we might implement the showWallet function for magic connect. opening another issue on this so we can gather some ideas.

[Royal-lobster]

@LyghtCode once check this out. probably this will work

const { connector } = useAccount()
//...
connector.magicSDK.connect.showWallet();

[LyghtCode]

it works. i was just wondering if it was possible to call the showallet() function? while using this wagmi, rainbowwallet config

normally we can get the wallet information on useAccount hook from wagmi and use it to render the ui for wallet. but its interesting how we might implement the showWallet function for magic connect. opening another issue on this so we can gather some ideas.

will try it tmmrw!

[tylerpashigian]

@Royal-lobster hey, I am having some issues integrating MagicAuth with wagmi (might just not be using it correctly), but wondering if there is any issue with TypeScript? I saw some comments above with similar issues, I am getting the following error:

Type 'MagicAuthConnector' is not assignable to type 'Connector<any, any, any>'.
Property 'onAccountsChanged' is protected but type 'MagicConnector' is not a class derived from 'Connector<Provider, Options, Signer>'

I am creating a connector based on the examples in the readme, and then using wagmi to create a connector.

const connector = new MagicAuthConnector({ options: { apiKey: 'YOUR_API_KEY', //required oauthOptions: { providers: ['google'], }, }, });

const { connect } = useConnect({ connector: connector, });

Any help would be awesome, thanks so much and great work on this connector! Super helpful

Edit: adding versions from package.json
"@everipedia/wagmi-magic-connector": "^0.9.1", "@magic-ext/connect": "^3.0.0", "@magic-sdk/admin": "^1.4.1", "@rainbow-me/rainbowkit": "^0.8.1", "magic-sdk": "^9.1.0", "next": "12.2.5", "next-auth": "^4.10.2", "siwe": "^1.1.6", "wagmi": "^0.9.0"

[Royal-lobster]

@Royal-lobster hey, I am having some issues integrating MagicAuth with wagmi (might just not be using it correctly), but wondering if there is any issue with TypeScript? I saw some comments above with similar issues, I am getting the following error

Thanks for reporting. i guess this is probably because of wagmi version you are using. try updating the wagmi to ^0.10.10. also you don't need to install @magic-ext/connect, @magic-sdk/admin and magic-sdk seperately. the magic libraries comes with @everipedia/wagmi-magic-connector.

[tylerpashigian]

@Royal-lobster hey, I am having some issues integrating MagicAuth with wagmi (might just not be using it correctly), but wondering if there is any issue with TypeScript? I saw some comments above with similar issues, I am getting the following error

Thanks for reporting. i guess this is probably because of wagmi version you are using. try updating the wagmi to ^0.10.10. also you don't need to install @magic-ext/connect, @magic-sdk/admin and magic-sdk seperately. the magic libraries comes with @everipedia/wagmi-magic-connector.

Thanks, I had those magic libs installed previously, will clean them up once I get this working. The interesting part is this seems to be just a linting issue, the functionality seems to work. I am using rainbowkit and had issues with wagmi v^0.10.10, so after speaking with the rainbow team I downgraded to ^0.9.0 until they support 0.10.X. Maybe I just have to wait then and manually ignore the linter?

[Royal-lobster]

Thanks, I had those magic libs installed previously, will clean them up once I get this working. The interesting part is this seems to be just a linting issue, the functionality seems to work. I am using rainbowkit and had issues with wagmi v^0.10.10, so after speaking with the rainbow team I downgraded to ^0.9.0 until they support 0.10.X. Maybe I just have to wait then and manually ignore the linter?

Ohh. I created a small repo of magic + rainbow integration https://github.com/Royal-lobster/rainbow-magic-example once check it out if it helps.

[tylerpashigian]

Thanks, I had those magic libs installed previously, will clean them up once I get this working. The interesting part is this seems to be just a linting issue, the functionality seems to work. I am using rainbowkit and had issues with wagmi v^0.10.10, so after speaking with the rainbow team I downgraded to ^0.9.0 until they support 0.10.X. Maybe I just have to wait then and manually ignore the linter?

Ohh. I created a small repo of magic + rainbow integration https://github.com/Royal-lobster/rainbow-magic-example once check it out if it helps.

Yeah I noticed that, thanks for sharing! It looks like a lot of the versions in that package.json are outdated thought so I dont know if its a direct comparison. Rainbow did say they will work towards supporting wagmi 0.10.X soon so hopefully that resolves my issues.

[LyghtCode]

this works do you have an example on how to create and send a transaction with the wagmi object? i know the sendTransaction() function exists somewhere but im having a hard time figuring out how to reach the function through wagmi.

[Royal-lobster]

this works do you have an example on how to create and send a transaction with the wagmi object? i know the sendTransaction() function exists somewhere but im having a hard time figuring out how to reach the function through wagmi.

I assume you can use the send transaction hook from wagmi
https://wagmi.sh/react/hooks/useSendTransaction

[LyghtCode]

i tried that actually. theoretically it should pop up the magic wallet to confirm the transaction but that doesn't happen. i figured maybe calling sendTransaction from the Magic SDK object might work, similar to how we get walletShow().

[tylerpashigian]

i tried that actually. theoretically it should pop up the magic wallet to confirm the transaction but that doesn't happen. i figured maybe calling sendTransaction from the Magic SDK object might work, similar to how we get walletShow().

Are you using MagicAuth or MagicConnect? MagicAuth is completely white labeled and doesnt have a signature confirmation modal, so that may be why (if you're using MagicAuth)?

[LyghtCode]

Connect

[Royal-lobster]

Actually by default magic will auto confirms the transaction.

[thejasondt]

@Royal-lobster hey, I am having some issues integrating MagicAuth with wagmi (might just not be using it correctly), but wondering if there is any issue with TypeScript? I saw some comments above with similar issues, I am getting the following error

Thanks for reporting. i guess this is probably because of wagmi version you are using. try updating the wagmi to ^0.10.10. also you don't need to install @magic-ext/connect, @magic-sdk/admin and magic-sdk seperately. the magic libraries comes with @everipedia/wagmi-magic-connector.

Thanks, I had those magic libs installed previously, will clean them up once I get this working. The interesting part is this seems to be just a linting issue, the functionality seems to work. I am using rainbowkit and had issues with wagmi v^0.10.10, so after speaking with the rainbow team I downgraded to ^0.9.0 until they support 0.10.X. Maybe I just have to wait then and manually ignore the linter?

Hey! What was you did to solve this issue? I'm having a similar issue here - but without using rainbow:

#53

[tylerpashigian]

@Royal-lobster hey, I am having some issues integrating MagicAuth with wagmi (might just not be using it correctly), but wondering if there is any issue with TypeScript? I saw some comments above with similar issues, I am getting the following error

Thanks for reporting. i guess this is probably because of wagmi version you are using. try updating the wagmi to ^0.10.10. also you don't need to install @magic-ext/connect, @magic-sdk/admin and magic-sdk seperately. the magic libraries comes with @everipedia/wagmi-magic-connector.

Thanks, I had those magic libs installed previously, will clean them up once I get this working. The interesting part is this seems to be just a linting issue, the functionality seems to work. I am using rainbowkit and had issues with wagmi v^0.10.10, so after speaking with the rainbow team I downgraded to ^0.9.0 until they support 0.10.X. Maybe I just have to wait then and manually ignore the linter?

Hey! What was you did to solve this issue? I'm having a similar issue here - but without using rainbow:

#53

Hey! As of now, I am just defining the connector as any type, which is hacky but resolves the issue until the versions become compatible. If you arent using rainbow, have you ensured the wagmi version is correct (^0.10.0)? Ill share my code that "fixes" the error below:
const { connect } = useConnect({ connector: magicConnector as any, });