Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/refactor frontend components #322

Conversation

crypblizz8
Copy link

@crypblizz8 crypblizz8 commented Aug 17, 2022

As per #291, explored the frontEnd Code and see where parts could be improved in cleanliness / structure.

Overview

  • Updated README with a useful Prisma local DB setup article.
  • Did some simple folder arrangements. Purpose is for clarity and ease. Didn't want to move too much around in case of breaking so I started some parts of
  • Refactored parts of AccountBalances.tsx to avoid repetition in code.

Going Forward
This is only a small part of a bigger project but a starting point for refactoring/cleaning up parts of the front-end source code. Other parts include looking through more of the components and refactoring where code is duplicated as per the AccountBalances.tsx example.

Created Folders
Utils

  • Address
  • AdminUtils
  • TransactionListener
  • TimeToDate

Icons

  • CheckIcon
  • CheckIconWhite
  • CrossIcon
  • CrossIconWhite
  • EtherscanIcon
  • PlayIcon (Unused..?)

Other folder suggestions for future/remaining:
Navigation

  • Footer
  • Header
  • Layout
  • Seo
  • Loading
  • Link
  • Wrapper
  • SectionTitle

Stats

  • OgvTotalStats
  • VoteStats

Step

  • StepTracker
  • StepControls

Slide

  • SlideTracker
  • SlideControls

Utils

  • TokenAmount
  • TimeToDate

Buttons

  • Button
  • Web3Button

Card

  • Card
  • CardDescription
  • CardGroup
  • CardLabel
  • CardStat

Icon

  • TokenIcon

Added Prisma link / walkthrough.
Refactor and reduce to simple mapping.
Fix Icon src + altDescription
@crypblizz8 crypblizz8 marked this pull request as draft August 17, 2022 11:41
@franckc franckc requested a review from tomhirst August 17, 2022 21:35
@@ -22,57 +22,52 @@ const AccountBalances: FunctionComponent<AccountBalancesProps> = () => {
return total.add(lockup.amount);
}, ethers.BigNumber.from("0"));

const cardContentData = [
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Smart!

Copy link
Contributor

@tomhirst tomhirst left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the contribution @crypblizz8!

This is a good start to the larger task mentioned in my issue and your PR:

  • The refactoring in AccountBalances.tsx is smart. There are probably more places we can do this in now we're out of the scrappy "get this live" phase of the dApp.
  • Organising components into category folders helps. Let's just be careful not to bury important top-level and/or generic code so deep that it becomes unavailable at a glance.

I've tested this as working so I'm happy to approve, though I feel there's more work to do be done before we can close #291, for instance:

  • Checking for duplicate code across components
  • Consolidating multi-use patterns
  • Further render markup reduction

@shahthepro shahthepro closed this Apr 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants