Dev Console SuperchainERC20 Support

[fainashalts]

This parent issue is for the design and implementation of the console frontend to support SuperchainERC20 leading up to Devcon and includes links to static resources such as documentation and marketing content.

A design exists here but please confer with Mayank for finalization and questions.

[mayanksayshi]

Here is the link to the designs for the Dev console. @jvmi7

https://www.figma.com/design/JKWr4DO8BMxAB5r7qYvbIs/Dev-Console-1.2-Hi-Fi?node-id=5768-12656

[fainashalts]

@jvmi7 @tarunkhasnavis please link any PRs related to this work in this issue so we can use it as a source of truth on progress. Thank you!

[tarunkhasnavis]

Made progress on

• Updating home page
• Implementing Build Page (starterkit info)

Also made some design updates along the way and moving to App templates page

[mayanksayshi]

Hey @tarunkhasnavis, we made a minor update to the dev console homepage. We realised Supersim needed its own card, so we added that. We also moved the Superchain safe under launch and grow. You can find the updated design here.

https://www.figma.com/design/JKWr4DO8BMxAB5r7qYvbIs/Dev-Console-1.2?node-id=5768-12977&t=WfB9u7CbeBDQRih2-4

Please let me know if you have any questions.

[tarunkhasnavis]

okay, I captured all of this work in the Eng tracking issue https://github.com/ethereum-optimism/ecosystem/issues/542

the 3 main issues being here:

• https://github.com/ethereum-optimism/ecosystem/issues/554
• https://github.com/ethereum-optimism/ecosystem/issues/555
• https://github.com/ethereum-optimism/ecosystem/issues/552

@mayanksayshi based on our timeline I'm planning to be code complete by EOD so let me know if there is anything missing

[mayanksayshi]

Actually, there is one more thing this image is still work in progress I am waiting on some feedback from the creative team and it's taking longer than expected. I would request that you please hide it from the frontend for now. Thank you.

[tarunkhasnavis]

Sounds good! The changes are hidden behind a feature flag so I can just swap out the image when you have it

[mayanksayshi]

Hey @tarunkhasnavis

• [x] Another small change we need to make is to update the logo training according to new marketing guidelines.

https://www.figma.com/design/JKWr4DO8BMxAB5r7qYvbIs/Dev-Console-1.2?node-id=5768-12987&t=oiHsc6CyMtTFQHZt-4

• [x] The GIF for the Superchain ERC20 Starterkit is also ready. referring to this comment

Here is the Gif

Please let me know if you have any questions :)

[mayanksayshi]

@tarunkhasnavis, Can we please include these changes to the Dev console implementation?

• [x] Please add another card in the App Template Library. This card will also take the user to the StarterKit Git Hub repo.

figma link: https://www.figma.com/design/JKWr4DO8BMxAB5r7qYvbIs/Dev-Console-1.2?node-id=5885-45531&t=tiFQ08M4xVy7qfsY-4

• [x] Please update the copy of the SuperchainERC20 Starter kit card on the home page.

Currently, it's this.

New Copy 👇

Figma link https://www.figma.com/design/JKWr4DO8BMxAB5r7qYvbIs/Dev-Console-1.2?node-id=5812-3274&t=tiFQ08M4xVy7qfsY-4

• [x] Currently, some cards on the Dev Console homepage open a modal, while others open links in new tabs. To improve clarity for users, could we add an arrow icon in the top right corner of cards that open in a new tab? This is already implemented in the App Template Library cards, so extending this interaction to other cards that navigate users outside the Dev Console directly would create a more consistent experience.

Here is the list of card that should show the arrow

• Supersim
• Retro Funding

Figma link: https://www.figma.com/design/JKWr4DO8BMxAB5r7qYvbIs/Dev-Console-1.2?node-id=5812-3279&t=tiFQ08M4xVy7qfsY-4

• [x] After speaking with @fainashalts @nitaliano, we removed Paymaster from the Dev console homepage. Can you please remove the Paymaster card? Full slack conversation here

Thank you :)

[tarunkhasnavis]

@mayanksayshi

1. Can I get the GIF in a downloadable format. I am unable to use it at the moment.
2. Just confirming that we are removing the Paymaster but we are replacing it with the Testnet Paymaster card (check figma)

Added these comments in Figma as well

[mayanksayshi]

@mayanksayshi

1. Can I get the GIF in a downloadable format. I am unable to use it at the moment.

2. Just confirming that we are removing the `Paymaster` but we are replacing it with the `Testnet Paymaster` card (check figma)

Added these comments in Figma as well

Hey @tarunkhasnavis we are removing all cards related to the Paymaster.

https://optimismfoundation.slack.com/archives/C050Z46S3QU/p1730822760075819?thread_ts=1730813146.919099&cid=C050Z46S3QU

I have updated the designs in Figma as well. :)

[tarunkhasnavis]

All eng tasks are completed now: https://github.com/ethereum-optimism/ecosystem/issues/542

We can see what comes out of the bug bash for more changes to be fully complete