Bug: [OnchainKitProvider] chain type incompatible

sergical commented 3 months ago

Describe the bug and the steps to reproduce it

Checkout https://github.com/sergical/ossummer/pull/17
Check web/src/OnchainProviders.tsx
See type error

Full TS error

Type '{ blockExplorers: { readonly default: { readonly name: "Basescan"; readonly url: "https://sepolia.basescan.org"; readonly apiUrl: "https://api-sepolia.basescan.org/api"; }; }; contracts: { ...; }; ... 10 more ...; readonly network: "base-sepolia"; } | { ...; }' is not assignable to type 'Chain'.
  Type '{ blockExplorers: { readonly default: { readonly name: "Basescan"; readonly url: "https://sepolia.basescan.org"; readonly apiUrl: "https://api-sepolia.basescan.org/api"; }; }; contracts: { ...; }; ... 10 more ...; readonly network: "base-sepolia"; }' is not assignable to type 'Chain'.
    Types of property 'fees' are incompatible.
      Type 'ChainFees<undefined> | undefined' is not assignable to type 'ChainFees<ChainFormatters | undefined> | undefined'.
        Type 'ChainFees<undefined>' is not assignable to type 'ChainFees<ChainFormatters | undefined>'.
          Types of property 'baseFeeMultiplier' are incompatible.
            Type 'number | ((args: ChainFeesFnParameters<undefined>) => number | Promise<number>) | undefined' is not assignable to type 'number | ((args: ChainFeesFnParameters<ChainFormatters | undefined>) => number | Promise<number>) | undefined'.
              Type '(args: ChainFeesFnParameters<undefined>) => number | Promise<number>' is not assignable to type 'number | ((args: ChainFeesFnParameters<ChainFormatters | undefined>) => number | Promise<number>) | undefined'.
                Type '(args: ChainFeesFnParameters<undefined>) => number | Promise<number>' is not assignable to type '(args: ChainFeesFnParameters<ChainFormatters | undefined>) => number | Promise<number>'.
                  Types of parameters 'args' and 'args' are incompatible.
                    Type 'ChainFeesFnParameters<ChainFormatters | undefined>' is not assignable to type 'ChainFeesFnParameters<undefined>'.
                      The types of 'block.transactions' are incompatible between these types.
                        Type '`0x${string}`[] | ({ type: "legacy"; chainId?: number | undefined; yParity?: undefined; from: `0x${string}`; gas: bigint; hash: `0x${string}`; input: `0x${string}`; nonce: number; r: `0x${string}`; s: `0x${string}`; to: `0x${string}` | null; ... 11 more ...; transactionIndex: number | null; } | { ...; } | { ...; } |...' is not assignable to type '`0x${string}`[] | ({ type: "legacy"; chainId?: number | undefined; yParity?: undefined; from: `0x${string}`; gas: bigint; hash: `0x${string}`; input: `0x${string}`; nonce: number; r: `0x${string}`; s: `0x${string}`; to: `0x${string}` | null; ... 11 more ...; transactionIndex: number | null; } | { ...; } | { ...; } |...'. Two different types with this name exist, but they are unrelated.
                          Type '({ type: "legacy"; chainId?: number | undefined; yParity?: undefined; from: `0x${string}`; gas: bigint; hash: `0x${string}`; input: `0x${string}`; nonce: number; r: `0x${string}`; s: `0x${string}`; to: `0x${string}` | null; typeHex: `0x${string}` | null; ... 10 more ...; transactionIndex: number | null; } | { ...; }...' is not assignable to type '`0x${string}`[] | ({ type: "legacy"; chainId?: number | undefined; yParity?: undefined; from: `0x${string}`; gas: bigint; hash: `0x${string}`; input: `0x${string}`; nonce: number; r: `0x${string}`; s: `0x${string}`; to: `0x${string}` | null; ... 11 more ...; transactionIndex: number | null; } | { ...; } | { ...; } |...'.
                            Type '({ type: "legacy"; chainId?: number | undefined; yParity?: undefined; from: `0x${string}`; gas: bigint; hash: `0x${string}`; input: `0x${string}`; nonce: number; r: `0x${string}`; s: `0x${string}`; to: `0x${string}` | null; typeHex: `0x${string}` | null; ... 10 more ...; transactionIndex: number | null; } | { ...; }...' is not assignable to type '`0x${string}`[]'.
                              Type '{ type: "legacy"; chainId?: number | undefined; yParity?: undefined; from: `0x${string}`; gas: bigint; hash: `0x${string}`; input: `0x${string}`; nonce: number; r: `0x${string}`; s: `0x${string}`; to: `0x${string}` | null; typeHex: `0x${string}` | null; ... 10 more ...; transactionIndex: number | null; } | { ...; } ...' is not assignable to type '`0x${string}`'.
                                Type '{ type: "legacy"; chainId?: number | undefined; yParity?: undefined; from: `0x${string}`; gas: bigint; hash: `0x${string}`; input: `0x${string}`; nonce: number; r: `0x${string}`; s: `0x${string}`; to: `0x${string}` | null; typeHex: `0x${string}` | null; ... 10 more ...; transactionIndex: number | null; }' is not assignable to type '`0x${string}`'.ts(2322)
types.d.ts(31, 5): The expected type comes from property 'chain' which is declared here on type 'IntrinsicAttributes & OnchainKitProviderReact'

Also issue with QueryClientProvider

This is when signed in and Avatar component is rendered (I think) - client stack trace below

Warning: Cannot update a component (`HotReload`) while rendering a different component (`Avatar`). To locate the bad setState() call inside `Avatar`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render at Avatar
QueryClientProvider.js:21 Uncaught Error: No QueryClient set, use QueryClientProvider to set one
    at useQueryClient (QueryClientProvider.js:21:15)
    at useBaseQuery (useBaseQuery.js:28:91)
    at useQuery (useQuery.js:13:74)
    at useName (useName.js:26:73)
    at Avatar (Avatar.js:48:78)

What's the expected behavior?

Render without errors

What version of the libraries are you using?

"@coinbase/onchainkit": "0.22.3", "viem": "2.x", "wagmi": "^2.9.2", "@privy-io/react-auth": "^1.71.0", "@privy-io/server-auth": "^1.7.3", "@privy-io/wagmi": "^0.2.10",

kyhyco commented 3 months ago

I pulled your PR locally and can't reproduce this error.

Try removing the entire node_modules folder and yarn install again.

I am using node 18.18.2 btw

sergical commented 3 months ago

whaaaaaa :/

I tried that and I am getting this in my server stack too

 GET / 200 in 7ms
 ⨯ ../src/QueryClientProvider.tsx (18:11) @ useQueryClient
 ⨯ Internal error: Error: No QueryClient set, use QueryClientProvider to set one
    at useQueryClient (./node_modules/@coinbase/onchainkit/node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js:19:15)

Added an Avatar component to the homepage https://github.com/sergical/ossummer/pull/17/commits/2d86dbb100bb17226b0aaaa7bdc7e673239165a6

Also are you not seeing the type error either in the OnchainProviders file?

Using node 18.17.0 - but i doubt that has anything to do with this

kyhyco commented 3 months ago

What command are you running to get this?

Hmmm let me try checking the typescript. I am using neovim + biome. One sec

sergical commented 3 months ago

neovim + biome

Wouldn't expect any less from you

sergical commented 3 months ago

What command are you running to get this?

yarn dev

kyhyco commented 3 months ago

Derp. I was on the main branch lol

One sec

sergical commented 3 months ago

LOL

https://www.loom.com/share/299135368cfb4d8893ea4a176c4eb520

kyhyco commented 3 months ago

Yup I see it now

kyhyco commented 3 months ago

OK, I think this is a problem from OnchainKit bundling the viem and wagmi in the bundle directly.

Can you stay on for like 15 min? I can push a new release without those bundled in.

sergical commented 3 months ago

For you, I'll pull an all nighter

sergical commented 3 months ago

(kinda wanna make sure all of this works before buildathon deadline at the end of the month lol)

Thank you very much <3

kyhyco commented 3 months ago

on it

kyhyco commented 3 months ago

Aight 0.22.4 released. Think it's working now.

sergical commented 3 months ago

TS error went away. Still complaining about queryclientprovider :/

kyhyco commented 3 months ago

Where is that at? From yarn dev?

sergical commented 3 months ago

yeah, yarn dev and hit localhost:3000

sergical commented 3 months ago

latest on that branch has 0.22.4 and the Avatar component in HomePage.tsx. removing Avatar component doesn't render an error.

kyhyco commented 3 months ago

Yup see it

kyhyco commented 3 months ago

I think this is the same problem as we bundle up @tanstack/react-query as well

sergical commented 3 months ago

Forgot this isn't slack and i can't do /giphy but cool to know github is beta testing slash commands

kyhyco commented 3 months ago

Verified this by removing @tanstack/react-query in the package.json and recompiling after using no cache.

kyhyco commented 3 months ago

Aight let me move that to peer dependencies as well

sergical commented 3 months ago

Not using graphql but wondering if that might cause an issue down the line too just inspecting the package.json for onchainkit

kyhyco commented 3 months ago

Hmm yes it might. We need to move away from getting eas attestations via graphql

kyhyco commented 3 months ago

v0.22.5 released

I'm gonna tackle the graphql stuff tomorrow. Clocked in 12+ hours already today lol

sergical commented 3 months ago

@Zizzamia this man is 🐐 just fyi gn fren!

sergical commented 3 months ago

everything works as expected now

coinbase / onchainkit