Setup nextjs demo page

[etr2460]

Closes #182

Description

Fixes a few issues with the next js demo setup and adds a very basic demo page that verifies components work. Also converts everything to using TS

📝 Additional Information

There's probably still more work to be done to make a good demo page. I'm also a bit uncertain if a demo page is necessary in addition to the storybook. Food for thought

Screenshot

[changeset-bot]

⚠️ No Changeset found

Latest commit: 8bc50fa

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[with-heart]

I'm also a bit uncertain if a demo page is necessary in addition to the storybook. Food for thought

Yeah, I think you're right to be uncertain there. imo the example should become a real-world app, something that gives us a way to demonstrate realistic use cases for each piece of web3-ui (and show off our creativity too! 😁).

[with-heart]

Can you remove example/package-lock.json and make sure it's working as a workspace with yarn?

[Dhaiwat10]

imo the example should become a real-world app, something that gives us a way to demonstrate realistic use cases for each piece of web3-ui

That's precisely what I was thinking. The Storybook is great at showcasing the components and hooks in isolation, but something that people can play around with directly (we will deploy this example to Vercel or sth) and maybe clone the code and try it out for themselves would be nice too. Maybe this can even turn into a starter template with our package all setup and ready-to-go, npx create-web3-ui-app, who knows?

[Dhaiwat10]

Just one tiny change. I'll do this myself, push and merge :) Thanks @etr2460!

[Dhaiwat10]

Suggested change

	<Provider network={1}>
	<Provider network={NETWORKS.mainnet}>

More readable. NETWORKS is exported from core and hooks!

[etr2460]

fixed

[Dhaiwat10]

Oh I missed @with-heart's review. Will also try to have a look at that.

[Dhaiwat10]

I can't run this locally. I'm running yarn example from root. Anyone else facing the same problem?

[etr2460]

Can you remove example/package-lock.json and make sure it's working as a workspace with yarn?

Cross posting from discord, the examples directory was initially setup with npm, not yarn. i'm not sure if that was intentional. Maybe there's some questions here to be answered first:

• Should we have an example site, or is the storybook sufficient?
• Should the example use npm or yarn?

Once we answer both of these, we can decide if this PR should be updated, or if we should simply delete the examples directory for now

[Dhaiwat10]

Should we have an example site, or is the storybook sufficient?

I think we do need an example because of the reasons I mentioned here. Tldr; storybook is good for showcasing stuff in isolation but we need an real-world 'app' example where people can see how all of that stuff actually works together.

Should the example use npm or yarn?

It should use yarn because that's what we are using everywhere else in the project. The package-lock.json was unintentional. Sorry for that.

[etr2460]

@Dhaiwat10, @with-heart this should be g2g now

[etr2460]

for nextjs to load the packages, we need to yarn build them first. This isn't technically correct as the examples should depend on a version of the packages and not the main branch of them, but I couldn't for the life of me figure out how to get yarn to pull in the packages from npm instead of symlinks. Maybe there was a caching issue, but this seems good enough for me

[Dhaiwat10]

Way to go @etr2460 ❤️