feat: Add Landing Page

[ChangoMan]

Description

Here's my first shot at adding the landing page with some context about the Burner Wallet. The flow will go as follows:

1. When a new user goes to the site, we will look for a cookie called hasSeenIntro
2. If this cookie does not exist, redirect them to the new landing page at /intro
3. On the /intro page, there is a "Generate Wallet" button. All this button does is set the cookie and redirect the user to the homepage.
4. On the homepage, everything works as it currently does without changes.
5. When the user visits the site again, the cookie will now exist and they see the homepage and their wallet normally.

Some things to note:

• Instead of actually generating the private key when pushing the "Generate Wallet" button, I am simply redirecting to the homepage. I think this is a safer and simpler approach, and if it ever gets annoying to have the landing page, we can simply turn off the redirects and everything works without it.
• I am using cookies to store hasSeenIntro. This is so we can do the redirects on the server side, and there's no chance the client will "leak" the homepage.
• I had to do some restructuring of the ScaffoldEthAppWithProviders so that elements from the burner wallet doesn't show up on the landing page.
• I refactored the homepage to be a server component, so that we can do the redirect on the server side.

Let me know how this approach feels and we can improve or add some spinners or loading state if needed.

Screenshots

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
burnerwallet-nextjs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 31, 2024 4:51am

[ChangoMan]

Since there are changes to the layout and index page.tsx, we might want to wait until https://github.com/BuidlGuidl/burnerwallet/pull/46 lands before merging this. I don't want to merge anything weird before the wallet connect lands.

[carletex]

Damn @ChangoMan this is a great-looking landing page!! Thank you for the PR.

I had a slightly different vision for this (Note: No strong opinion, and happy to go this PR route... especially after the work you've put here :sweat_smile: ). BTW, I think it was my fault because I used the term "landing" haha

Anyway, what I had in mind initially was something more integrated into the burner wallet itself (instead of the classic landing page + "go to app" workflow). Something like a modal on top of the burner wallet with the welcome/warning message (like the one you have in the PR) + generate button. This will generate the burner wallet while showing some loading state (e.g. spinner + changing bg. We could even "fake" 2seconds of loading that we don't need ) and will end up displaying your burner. When you come back again to the app, you won't see the modal (loved how you did the cookie thing, were we can access in the server and render accordingly)

I think this will feel more integrated and remove one layer that we don't need.

What are your thoughts? I'd also love to see what others think too! cc @Pabl0cks @damianmarti

[damianmarti]

Damn @ChangoMan this is a great-looking landing page!! Thank you for the PR.

I had a slightly different vision for this (Note: No strong opinion, and happy to go this PR route... especially after the work you've put here 😅 ). BTW, I think it was my fault because I used the term "landing" haha

Anyway, what I had in mind initially was something more integrated into the burner wallet itself (instead of the classic landing page + "go to app" workflow). Something like a modal on top of the burner wallet with the welcome/warning message (like the one you have in the PR) + generate button. This will generate the burner wallet while showing some loading state (e.g. spinner + changing bg. We could even "fake" 2seconds of loading that we don't need ) and will end up displaying your burner. When you come back again to the app, you won't see the modal (loved how you did the cookie thing, were we can access in the server and render accordingly)

I think this will feel more integrated and remove one layer that we don't need.

What are your thoughts? I'd also love to see what others think too! cc @Pabl0cks @damianmarti

This is awesome @ChangoMan !!!

I was thinking something similar to what @carletex said, but I think the approach and the nice design that Hunter implemented is better because it explains very well what the BurnerWallet is and we can add more data there when we add more features. And it's something you can share and the people can understand what the BurnerWallet is in a better way.

Yes, it will be nice to add some "magic" when the wallet is "generated", all fake, but it will add a WOW moment to the user :-)

I think we should add a way to see the home page after the wallet is generated, changing the buttons to generate the wallet, to "Go to the wallet" or something like that.

[ChangoMan]

@carletex @damianmarti Thanks for the feedback! I did also think about a modal, but decided to do a full page to fit more text. I can make a modal version as well and we can compare.

The modal is simpler, but there might be less space for all the text. Also on mobile, you can't really tell because the modal will cover everything anyways. I'll tinker with it though.

[Pabl0cks]

Love the landing copys, design and vibes from it @ChangoMan!

Like @carletex and @damianmarti, I also had a small modal in mind with 3 simple ideas and a security tip. Having it already crafted I was thinking in pros and cons of the full landing vs "modal".

• Landing will give more context and more confidence to users that landed randomly or without much context on burner wallets (not sure if this random landing will happen often tho).
• Maybe we should have a way to avoid landing somehow (parameter or different url?), for example when sharing a QR in a IRL event, or when we have the share PK feature in the future. So users with context (from IRL talk) and current users don't pass through the landing.

If you are going to tinker with the modal, we can play with both and decide!

Don't know if it would even make sense to have both options for different use cases, or it may just add unnecessary complexity:

• burnerwallet.io => Goes to landing page if you don't have the cookie
• Sharing your own wallet to other device, or scanning a QR in a talk => Access to burner wallet directly. parameter or url to define
• Scanned QR code at some event with not much context on it (walls, entrance) => Opens wallet with modal message and generate button. parameter or url to define

[ChangoMan]

• Maybe we should have a way to avoid landing somehow (parameter or different url?), for example when sharing a QR in a IRL event, or when we have the share PK feature in the future. So users with context (from IRL talk) and current users don't pass through the landing.

Oh yes I like this idea! Adding a url parameter should be possible.