Shadcn/Tailwind migration

[pettinarip]

Description

As part of our Q3 roadmap, this issue tracks the progress of the Shadcn/Tailwind migration.

How to contribute

If you’d like to help with the component migration, please follow these steps:

1. Read the following “Tips & Guidance” section for basic things to keep in mind while doing the migration.
2. Leave a comment here asking which component you would like to work out.
3. We assign you to the file by adding your handle next to the file name in the list.
   • If you were assigned to multiple files then create a separate PR for each component. It will make the testing and review process much simpler and more organized.
4. Once you finish it (PR merged), we’ll mark it as done.
5. Repeat!

Tips & Guidance

• Migrate only the components defined in the component file.
• Replace all Chakra imports (unless there is an exception mentioned in this file) with native tags or shadcn components installed in components/ui
  • @chakra-ui/react/Icon ⇒ just use the exported svg component from react-icons instead <MdMenu className="text-2xl" />
• Replace other imports
  • OldText ⇒ use the native <p> tag
  • OldHeading ⇒ use native <h1>, <h2>, etc. tags
  • Link ⇒ use the Link component defined in components/ui/Link
  • Buttons ⇒ use the buttons defined in components/ui/buttons/Button
  • images ⇒ use TwImage from components/Image
• For layout and general component structure
  • Use the components in components/ui/flex as much as possible
• Colors
  • Define missing colors in the tailwind.config.ts file. At the review stage, we will analyze & try to replace old theme colors with new colors from the Design System.

Done

List

• AssetDownload/index.tsx, AssetDownloadArtist.tsx and AssetDownloadImage.tsx @saurabhburade Shadcn migrate - AssetDownload - AssetDownloadArtist - AssetDownloadImage #13960
• Banners/ContributorsQuizBanner.tsx @saurabhburade Shadcn migration - ContributorsQuizBanner  #13957
• BeaconChainActions.tsx @saurabhburade Shadcn Migration - BeaconChainActions #13990
• BugBountyCards.tsx @saurabhburade Shadcn migrate - BugBountyCards #14000
• Contributors.tsx @Baystef Migrate Contributors component to shadcn #13989
• DataProductCard.tsx @Baystef Migrate DataProductCard component to shadcn/tailwind #14035
• DevconGrantsBanner.tsx @saurabhburade Shadcn migrate - DevconGrantsBanner #14012
• DeveloperDocsLinks.tsx @saurabhburade Shadcn migration - DeveloperDocsLinks #14016
• DocLink.tsx @saurabhburade Shadcn migration - DocLink #14036
• DocsNav.tsx @saurabhburade Shadcn Migration - DocsNav #14039
• EventCard.tsx @minimalsm - Migrate EventCard to Shadcn #13966
• ExpandableCard.tsx @kushagrasarathe feat: migrate ExpandableCard component to shadcn #14017
• GitStars.tsx @Baystef Migrate Gitstars component to shadcn/tailwind #14073
• GhostCard.tsx @kushagrasarathe feat: migrate GhostCard to tailwind #14045
• History/NetworkUpgradeSummary.tsx @Baystef Migrate History/NetworkUpgradeSummary to tailwind #14074
• MatomoOptOut.tsx @minimalsm - Migrate MatomoOptOut to Shadcn #13961
• ProductCard.tsx - **ignore Badge migration** @yashtotla migrate ProductCard component to tailwind #14018
• Quiz/QuizItem.tsx - **ignore Tag migration** @TylerAPfledderer [ShadCN] Migrate Quiz Components to ShadCN/Tailwind #13876
• Quiz/QuizzesList.tsx @TylerAPfledderer [ShadCN] Migrate Quiz Components to ShadCN/Tailwind #13876
• Quiz/QuizzesStats.tsx @TylerAPfledderer [ShadCN] Migrate Quiz Components to ShadCN/Tailwind #13876
• Roadmap/RoadmapImageContent.tsx @Baystef Migrate roadmap/roadmapimagecontent to shadcn/tailwind #14089
• RollupProductDevDoc.tsx @cqw-acq migration-RollupProductDevDoc.tsx-to-tailwind #14268
• SocialListItem.tsx @yun-chiao Migrate SocialListItem.tsx to tailwind #14167
• StablecoinsTable.tsx @0xgun feat: migrate StablecoinsTable to shadcn #14043
• TitleCardList.tsx @minimalsm - Remove TitleCardList #13963
• Trilemma/Triangle.tsx @minimalsm - Migrate Trilemma Triangle to Shadcn #13975
• UpcomingEventsList.tsx @minimalsm - Migrate UpcomingEventsList to Shadcn #13967
• UpgradeTableOfContents.tsx @minimalsm - Migrate UpgradeTableOfContents to Shadcn #13974
• Staking/StakingStatsBox.tsx @Baystef Migrate Staking/StakingStatsBox to Shadcn/Tailwind #14104
• Staking/StakingProductsCardGrid/index.tsx @Baystef Migrate Staking/StakingProductsCardGrid component to Shadcn/tailwind #14091
• Staking/StakingLaunchpadWidget.tsx @Baystef Migrate StakingLaunchpadWidget to tailwind/shadcn #14222
• Staking/StakingCommunityCallout.tsx @Baystef Migrate StakingCommunityCallout Component to tailwind/shadcn #14223
• Staking/WithdrawalsTabComparison.tsx @Baystef Migrate WithdrawalsTabComparison to tailwind/shadcn #14201
• Translatathon/DatesAndTimeline.tsx @0xgun Migrate DatesAndTimeline component to Shadcn/Tailwind #14071
• Translatathon/TranslatathonInANutshell.tsx @Sambit03 Migrate Translatathon/TranslatathonInANutshell.tsx to shadcs/tailwind #14072
• Translatathon/ApplyNow.tsx @0xgun Migrate ApplyNow Components to shadcn/Tailwind  #14046
• Translatathon/TranslatathonCalendar.tsx @Sambit03 Migrate Translatathon/TranslatathonCalendar.tsx to Shadcn/Tailwind #14066
• Translatathon/LocalCommunitiesList.tsx @0xgun Migrate LocalCommunitiesList to tailwind #14065
• Layer2ProductCard.tsx @kushagrasarathe feat: migrate Layer2ProductCard to tailwind and shadcn #14233
• ProductList.tsx @yashtotla migrate ProductList component to tailwind #14312
• Stat/index.tsx @bhushanpardeshii Migrated stat component to shadcn/tailwind #14321
• TutorialMetadata.tsx - **ignore Badge migration** @bhushanpardeshii migrated TutorialMetadata.tsx to shadcn/tailwind #14335
• Translatathon/StepByStepInstructions.tsx @Sambit03 Migrate StepByStepInstructions.tsx to Shadcn/tailwind #14411
• TranslationBannerLegal.tsx @ameeetgaikwad 🦄 refactor: Migrated TranslationBannerLegal.tsx to shadcn #14511
• Trilemma/index.tsx - **use ui/sheet to migrate the Drawer** @atharv-av migrated trilemma modal to shadcn ui sheet component #14102
• Translatathon/TranslatathonBanner.tsx @Sambit03 Migrate TranslatathonBanner to Shadcn/Tailwins #14410
• ActionCard.tsx @yun-chiao Migrate ActionCard.tsx to tailwind #14244
• HorizontalCard.tsx @kushagrasarathe feat: migrate HorizontalCard to tailwind #14226
• Translatathon/TranslationHubCallout.tsx @Sambit03 Migrate TranslationHubCallout.tsx to custom UI components and Shadcn/Tailwindcss #14412
• StablecoinAccordion/AccordionCustomItem.tsx @Baystef Migrate StablecoinAccordion/AccordionCustomItem Component to tailwind/shadcn #14371
• StablecoinAccordion/index.tsx @Baystef Migrate StableCoinAccordion/index to tailwind/shadcn #14372
• StablecoinBoxGrid.tsx @Baystef Migrate stablecoinboxgrid component to shadcn/tailwind #14398
• TranslationBanner.tsx @ameeetgaikwad refactor: migrated TransaltionBanner #14546
• TranslationLeaderboard.tsx @ameeetgaikwad refactor: migrated TranslationLeaderboard to shadcn #14547
• Staking/StakingHowSoloWorks.tsx @Baystef Migrate staking/stakinghowsoloworks to shadcn/tailwind #14090
• SideNavMobile.tsx @ashiskumar-1999 feat: Migrate SideNavMobile to Shadcn/Tailwind #14495
• FileContributors.tsx - **ignore Avatar migration** @plvzfq-rit Migrate filecontributors to shadcn #14553
• 404.tsx @HiberNuts Fix issue #13946 Migrated 404.tsx page to shadcn/tailwind  #14560
• StakingComparison.tsx @ashiskumar-1999 feat: Migrate StakingComparison to Shadcn/Tailwind. #14597
• Staking/StakingGuides.tsx @plvzfq-rit Migrate Staking Guides to shadcn #14592

In review

• Card.tsx @corwintines feat: migrate Card to tailwind #14683
• CardList.tsx @corwintines feat: migrate CardList to tailwind #14684
• SideNav.tsx @ashiskumar-1999 feat: Migrate SideNav to Shadcn/Tailwind #14508
• wallets/find-wallet.tsx @corwintines feat: convert hero on find-wallets to tailwind #14635
• wallets/index.tsx feat: migrate /wallets from Chakra to shadcn #14691 @corwintines
• stablecoins.tsx @Baystef Migrate stablecoins page to Tailwind/Shadcn #14639
• layer-2/learn.tsx @bhushanpardeshii @corwintines fix: use migrated ButtonLink on layer-2 pages #14692
• layer-2/index.tsx fix: use migrated ButtonLink on layer-2 pages #14692
• layer-2/networks.tsx @bhushanpardeshii @corwintines fix: use migrated ButtonLink on layer-2 pages #14692
• contributing/translation-program/contributors.tsx @JoeChenJ Shadcn Migrate: contributing/translation-program/contributors.tsx #14676
• contributing/translation-program/acknowledgements.tsx @JoeChenJ Shadcn Migrate: Migrate acknowledgements page to Shadcn #14693
• staking/deposit-contract.tsx @JoeChenJ Shadcn Migrate: staking/deposit-contract.tsx #14696
• staking/index.tsx @JoeChenJ Shadcn Migrate: staking/index.tsx #14697

Pending

src/components

• BoxGrid.tsx @sahildotdev
• Callout.tsx @sahildotdev
• CallToContribute/index.tsx @sahildotdev
• CardList.tsx @sahildotdev
• InfoBanner.tsx @sahildotdev
• IssuesList.tsx @plvzfq-rit
• Layer2/Layer2Onboard.tsx
• Leaderboard.tsx - ignore Avatar migration @plvzfq-rit
• Roadmap/RoadmapActionCard/index.tsx @kushagrasarathe

src/components/Staking

• StakingHierarchy.tsx @ashiskumar-1999
• StakingConsiderations/index.tsx @ashiskumar-1999

src/pages

• gas.tsx @Baystef
• roadmap/vision.tsx @bhushanpardeshii
• learn.tsx @JoeChenJ
• community.tsx @Baystef
• developers/tutorials.tsx @JoeChenJ
• developers/learning-tools.tsx @MahendraBishnoi29
• developers/index.tsx @JoeChenJ
• developers/local-environment.tsx @JoeChenJ
• bug-bounty.tsx
• get-eth.tsx
• dapps.tsx @Baystef
• what-is-ethereum.tsx
• quizzes.tsx @MahendraBishnoi29
• eth.tsx
• assets.tsx
• [...slug].tsx @pettinarip
• run-a-node.tsx

[TylerAPfledderer]

@pettinarip I'm currently handling all of the Quiz components

[pettinarip]

@TylerAPfledderer gotcha! added your name next to them, ty.

[saurabhburade]

@pettinarip Please assign me the Banners/ContributorsQuizBanner.tsx component.

[pettinarip]

Assigned @saurabhburade 👍🏼

[Baystef]

Please assign the Contributors and DataProductCard to me @pettinarip Thanks

[pettinarip]

Please assign the Contributors and DataProductCard to me @pettinarip Thanks

Yey! awesome, assigned! let me know if you need any clarification or help 💪🏼

[Baystef]

Please assign the Contributors and DataProductCard to me @pettinarip Thanks

Yey! awesome, assigned! let me know if you need any clarification or help 💪🏼

TwImage is not working with remote URLs , getting this error cos its using next/image under the hood Error: Invalid src prop (https://avatars2.githubusercontent.com/u/364566?v=4) on next/image, hostname "avatars2.githubusercontent.com" is not configured under images in your next.config.js See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

should I add avatars2.githubusercontent.com to next.config.js or use the bare img element, this also shows a warning Using could result in slower LCP and higher bandwidth. Consider usingfromnext/image to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element but it works
@pettinarip

[pettinarip]

Right @Baystef lets use the img tag for now. You can leave the warning.

[yashtotla]

Hi @pettinarip can you assign the ProductCard.tsx migration to me? Thanks!

[kushagrasarathe]

hey @pettinarip could you please assign ExpandableCard.tsx's migration to me. Thanks

[pettinarip]

@yashtotla @kushagrasarathe thanks for helping! assigned, thanks

[bhushanpardeshii]

layer-2/learn.tsx
layer-2/networks.tsx
roadmap/vision.tsx
assign me. @pettinarip

[ashiskumar-1999]

Hi @pettinarip ,
Assign me the files under src/pages/developers/. I can work on these files.

[pettinarip]

@ameeetgaikwad FYI we have made progress with the migration of the /wallets and /find-wallets pages so I've marked them as migrated. LMK if you want to work on some other page or component.

[JoeChenJ]

Hey @pettinarip,
please asgin me the contributing/translation-program/contributors.tsx.

Thanks!

[ameeetgaikwad]

@ameeetgaikwad FYI we have made progress with the migration of the /wallets and /find-wallets pages so I've marked them as migrated. LMK if you want to work on some other page or component.

sure will let you know!

[JoeChenJ]

Hi @pettinarip , I have opened a PR for contributing/translation-program/contributors.tsx.

Could you assign me contributing/translation-program/acknowledgements.tsx?

Thanks!

[pettinarip]

Hi @pettinarip , I have opened a PR for contributing/translation-program/contributors.tsx.

Could you assign me contributing/translation-program/acknowledgements.tsx?

Thanks!

Cool @JoeChenJ! thanks. I've assigned the acknowledgements.tsx one.

[JoeChenJ]

Hey @pettinarip , please assign me staking/deposit-contract.tsx and staking/index.tsx.

Thanks!

[MahendraBishnoi29]

@pettinarip can you assign learning-tools.tsx and quizzes.tsx to me?

[JoeChenJ]

Hi @pettinarip , please assign me:

• learn.tsx
• developers/tutorials.tsx
• developers/index.tsx
• developers/local-environment.tsx

Thanks!

[pettinarip]

Thanks @MahendraBishnoi29 & @JoeChenJ -- list updated!

[JoeChenJ]

Hi @pettinarip , please assign me:

• bug-bounty.tsx
• eth.tsx
• assets.tsx
• run-a-node.tsx

Thanks!