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(lld): UI of rare sats table #7756

Merged
merged 1 commit into from
Sep 9, 2024
Merged

Conversation

LucasWerey
Copy link
Contributor

@LucasWerey LucasWerey commented Sep 5, 2024

✅ Checklist

  • npx changeset was attached.
  • Covered by automatic tests.
  • Impact of the changes:
    • BTC account

📝 Description

Note

This implements the UI of rare sats table. It's not the same as the inscription table so it needed few adjustments. For the moment it's only mocked data.
I've tried to simplify the logic to group and extract the data from the json but it's quite complex since we need to order and group the rareSat with multiple conditions that use different object inside the returned json
In the case where a sat key from the api won't match with the key from mappingKeyIcon the concerned sat won't be displayed.

we can compare the table that we have with the data displayed on MagicEden. For the mocked account see this link

the table doesn't match exactly as the figma (for the utxo size when multiple rows) since it would make it quite more complex

if you want to test it you just have to enable the ordinals ff in the settings

Screen.Recording.2024-09-09.at.11.02.33.mov
Screen.Recording.2024-09-09.at.11.55.56.mov

❓ Context


🧐 Checklist for the PR Reviewers

  • The code aligns with the requirements described in the linked JIRA or GitHub issue.
  • The PR description clearly documents the changes made and explains any technical trade-offs or design decisions.
  • There are no undocumented trade-offs, technical debt, or maintainability issues.
  • The PR has been tested thoroughly, and any potential edge cases have been considered and handled.
  • Any new dependencies have been justified and documented.
  • Performance considerations have been taken into account. (changes have been profiled or benchmarked if necessary)

@LucasWerey LucasWerey added the WIP Work in progress label Sep 5, 2024
Copy link

vercel bot commented Sep 5, 2024

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

5 Skipped Deployments
Name Status Preview Comments Updated (UTC)
ledger-live-docs ⬜️ Ignored (Inspect) Visit Preview Sep 9, 2024 1:46pm
ledger-live-github-bot ⬜️ Ignored (Inspect) Visit Preview Sep 9, 2024 1:46pm
native-ui-storybook ⬜️ Ignored (Inspect) Visit Preview Sep 9, 2024 1:46pm
react-ui-storybook ⬜️ Ignored (Inspect) Visit Preview Sep 9, 2024 1:46pm
web-tools ⬜️ Ignored (Inspect) Visit Preview Sep 9, 2024 1:46pm

@live-github-bot live-github-bot bot added desktop Has changes in LLD translations Translation files have been touched labels Sep 5, 2024
Base automatically changed from feat/LIVE-12479_a to develop September 5, 2024 12:30
@LucasWerey LucasWerey force-pushed the feat/LIVE-12479_b branch 5 times, most recently from 7f67040 to 3ee6fcc Compare September 6, 2024 14:21
@LucasWerey LucasWerey marked this pull request as ready for review September 6, 2024 14:36
@LucasWerey LucasWerey requested a review from a team as a code owner September 6, 2024 14:36
@LucasWerey LucasWerey marked this pull request as draft September 6, 2024 14:40
@LucasWerey LucasWerey force-pushed the feat/LIVE-12479_b branch 6 times, most recently from 18236ed to 89628ef Compare September 9, 2024 09:32
@LucasWerey LucasWerey marked this pull request as ready for review September 9, 2024 09:40
@LucasWerey LucasWerey force-pushed the feat/LIVE-12479_b branch 2 times, most recently from 60b2d03 to dda4017 Compare September 9, 2024 09:45
@LucasWerey LucasWerey force-pushed the feat/LIVE-12479_b branch 2 times, most recently from 4372a25 to 775254f Compare September 9, 2024 10:00
@LucasWerey LucasWerey removed the WIP Work in progress label Sep 9, 2024
<TableHeader titleKey={TableHeaderTitleKey.RareSats} />
<TableHeaderContainer />
<Flex flexDirection={"column"}>
{rareSats.map((rareSatGroup, index) => (
Copy link
Contributor

Choose a reason for hiding this comment

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

you may should handle the UI case where rareStats is empty or undefined . Show the corresponding UI of it

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes I don't have the design for that for the moment I will do it asap

Copy link
Contributor

Choose a reason for hiding this comment

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

at lease return null

Comment on lines 9 to 25
const firstColumn = (
<Text variant="bodyLineHeight" fontSize={12} color="neutral.c70">
{t("ordinals.rareSats.table.type")}
</Text>
);

const secondColumn = (
<Text variant="bodyLineHeight" fontSize={12} color="neutral.c70">
{t("ordinals.rareSats.table.year")}
</Text>
);

const thirdColumn = (
<Text variant="bodyLineHeight" fontSize={12} color="neutral.c70">
{t("ordinals.rareSats.table.utxo")}
</Text>
);
Copy link
Contributor

Choose a reason for hiding this comment

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

Not mandatory but you could have created a generic component that takes a string as parameter :)

return processSatRanges(satRanges, satributes);
};

const processRareSats = (mockedRareSats: MockedRareSat[]) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
const processRareSats = (mockedRareSats: MockedRareSat[]) => {
const processRareSats = (rareSats: MockedRareSat[]) => {

maybe ? because in the near futur it will not be mocked

@LucasWerey LucasWerey force-pushed the feat/LIVE-12479_b branch 2 times, most recently from d1d2d5e to aba8ece Compare September 9, 2024 12:52
<TableHeader titleKey={TableHeaderTitleKey.RareSats} />
<TableHeaderContainer />
<Flex flexDirection={"column"}>
{rareSats.map((rareSatGroup, index) => (
Copy link
Contributor

Choose a reason for hiding this comment

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

at lease return null

themooneer
themooneer previously approved these changes Sep 9, 2024
Copy link
Contributor

@themooneer themooneer left a comment

Choose a reason for hiding this comment

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

Nice work ! thank you

@LucasWerey LucasWerey merged commit 1503fd7 into develop Sep 9, 2024
32 of 34 checks passed
@LucasWerey LucasWerey deleted the feat/LIVE-12479_b branch September 9, 2024 14:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
desktop Has changes in LLD translations Translation files have been touched
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants