feat: onchainkit initial commit

rin-st commented 2 months ago

Adds support of OnchainKIt Adds page with OnchainKit components

Fixes https://github.com/scaffold-eth/create-eth-extensions/issues/8

Notes: See Readme for networks support Our react-query, viem and wagmi versions should be very close or even the same as in OnchainKit, or multiple error occurs. Not sure how to make it up to date all the time Tailwind integrations requires to define theme variables, and some of them overwrite ours (works for other projects with tailwind)

To test

yarn cli -e scaffold-eth/create-eth-extensions:onchainkit-init

TODO:

[ ] Update create-eth first: https://github.com/scaffold-eth/create-eth/pull/74

technophile-04 commented 2 months ago

Ohh while testing https://github.com/scaffold-eth/create-eth/pull/74

I was getting when I navigate to /onchainkit-examples :

And also theme behaves in different way :

Screenshot 2024-07-09 at 3 58 38 PM

rin-st commented 2 months ago

I was getting when I navigate to /onchainkit-examples :

Updated version, now it should work. It's because of

Our react-query, viem and wagmi versions should be very close or even the same as in OnchainKit, or multiple error occurs.

I didn't know when that when merging package.jsons , merge-packages doesn't just take lib from second package's when versions are different but tries to find intersection first. I'll add pr to mention it later

And also theme behaves in different way :

It's because of

Tailwind integrations requires to define theme variables, and some of them overwrite ours (works for other projects with tailwind)

Removed secondary related vars and extends, so fills works fine. But not sure onchainkit will have necessary colors after it 🤷‍♂️ .

when testing don't forget to get onchainkit API key (see readme)

Thanks!

technophile-04 commented 2 months ago

Thanks Rinat! Also noticed that when you do yarn next:check-types there are some error related to address not being assignable to string maybe due to moduleResolution: "bundler"?

rin-st commented 2 months ago

Updated https://github.com/scaffold-eth/create-eth/pull/74 and this pr. Everything seems work and no errors during yarn next:check-types

technophile-04 commented 2 months ago

Thanks @rin-st!! Seems to work great! Will try to test / review tomorrow, Also I am not sure whats the best way to handle this but at some places our SE-2 colors are changed for example :

Screenshot 2024-07-22 at 11 30 57 PM

Notice it has changed it color to violet when you hover over the Switch Icon

rin-st commented 2 months ago

Updated Example page since they changed they documentation structure and previous links were outdated already. a9770b6

Notice it has changed it color to violet when you hover over the Switch Icon.

Yes, I mentioned it in the first message.

Tailwind integrations requires to define theme variables, and some of them overwrite ours (works for other projects with tailwind)

I believe it should be fixed on their side, since they define their color names like primary/secondary/success/warning/error etc, which will conflict with every project which use the same names.

But for now, I used their colors since it's onchainkit extension 🙂 , and without it their styles will be broken

rin-st commented 2 months ago

Created an issue https://github.com/coinbase/onchainkit/issues/852

rin-st commented 2 months ago