feat: add runes fiat balance, closes #5300 #5656

alter-eggo · 2024-07-16T14:01:51Z

Try out Leather build 77c63eb — Extension build, Test report, Storybook, Chromatic

This pr adds fiat balance to runes

Summary by CodeRabbit

New Features
- Enhanced the RunesLoader and RunesAssetList components to include market data, providing more comprehensive asset information.
- Introduced fiat balance display for assets in the RunesAssetList, giving users a clearer understanding of the asset values in fiat currency.
Dependencies
- Updated @leather.io/query from version 0.10.2 to 0.11.1.

coderabbitai · 2024-07-16T14:02:00Z

Walkthrough

This update enhances the RunesLoader component to include marketData for each rune item, facilitating more comprehensive data handling. It also updates RunesAssetList to calculate and display the fiat balance for assets by incorporating the newly added market data. Additionally, the version of @leather.io/query has been incremented to "0.11.1".

Changes

File Path	Change Summary
`package.json`	Updated `@leather.io/query` version from "0.10.2" to "0.11.1".
`src/.../components/loaders/runes-loader.tsx`	`RunesLoader` now includes `marketData` in the `runes` array for the `children` function.
`src/.../features/asset-list/.../runes-asset-list.tsx`	Added `MarketData` import and calculation of fiat balance using `convertAssetBalanceToFiat` in the `RunesAssetList` component.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant RunesAssetList
    participant RunesLoader
    participant MarketData

    User->>RunesAssetList: Load page
    RunesAssetList->>RunesLoader: Request rune data with market data
    RunesLoader->>MarketData: Fetch market data
    MarketData-->>RunesLoader: Return market data
    RunesLoader-->>RunesAssetList: Provide rune data with market data
    RunesAssetList->>RunesAssetList: Calculate fiat balance using market data
    RunesAssetList-->>User: Display rune data with fiat balance

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai generate interesting stats about this repository and render them as a table.
- @coderabbitai show all the console.log statements in this repository.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 0

Outside diff range, codebase verification and nitpick comments (1)

src/app/features/asset-list/bitcoin/runes-asset-list/runes-asset-list.tsx (1)

Line range hint 17-34: Enhanced RunesAssetList function with fiat balance calculation.

The integration of convertAssetBalanceToFiat to calculate fiat balances is correctly implemented. Consider monitoring performance to ensure that the additional computation does not impact the user experience, especially with a large number of runes.

Consider implementing caching or other optimizations if performance issues are observed.

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between adf8c19 and 4598d22.

Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

Files selected for processing (2)

package.json (1 hunks)
src/app/features/asset-list/bitcoin/runes-asset-list/runes-asset-list.tsx (2 hunks)

Files skipped from review due to trivial changes (1)

package.json

Additional comments not posted (2)

src/app/features/asset-list/bitcoin/runes-asset-list/runes-asset-list.tsx (2)
5-5: Import of convertAssetBalanceToFiat is correctly placed.

This import is essential for the new functionality to calculate fiat balances and is used appropriately in the component.

11-11: Interface update to include marketData is appropriate.

The addition of marketData to RuneTokenAssetDetails supports the new functionality. Ensure that marketData is always provided or handled gracefully if null.

Verification successful

Interface update to include marketData is appropriate.

The addition of marketData to RuneTokenAssetDetails supports the new functionality. The codebase includes checks to handle cases where marketData might be null or undefined, ensuring robustness.

Instances of null checks for marketData found in:

src/app/common/asset-utils.ts
Scripts executed

The following scripts were executed for the analysis:

Script:
#!/bin/bash
# Description: Verify that `marketData` is always provided or handled if null.

# Test: Search for null checks on `marketData`.
rg --type typescript -A 5 $'marketData'
Length of output: 73

Script:
#!/bin/bash
# Description: Verify that `marketData` is always provided or handled if null.

# Test: Search for null checks on `marketData`.
rg 'marketData' -A 5
Length of output: 22072

coderabbitai

Actionable comments posted: 0

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 4598d22 and 0ad95a7.

Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

Files selected for processing (2)

package.json (1 hunks)
src/app/features/asset-list/bitcoin/runes-asset-list/runes-asset-list.tsx (2 hunks)

Files skipped from review as they are similar to previous changes (2)

package.json
src/app/features/asset-list/bitcoin/runes-asset-list/runes-asset-list.tsx

brandonmarshall-tm · 2024-07-16T15:00:06Z

All my balances are showing as <$0.01 so there may be something off with decimals or units somewhere.

coderabbitai

Actionable comments posted: 0

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 0ad95a7 and 77c63eb.

Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

Files selected for processing (3)

package.json (1 hunks)
src/app/components/loaders/runes-loader.tsx (1 hunks)
src/app/features/asset-list/bitcoin/runes-asset-list/runes-asset-list.tsx (2 hunks)

Files skipped from review as they are similar to previous changes (2)

package.json
src/app/features/asset-list/bitcoin/runes-asset-list/runes-asset-list.tsx

Additional comments not posted (2)

src/app/components/loaders/runes-loader.tsx (2)
Line range hint 6-12: Function implementation is correct.

The RunesLoader function correctly fetches the runes using the useRuneTokens hook and passes them to the children function as expected.

6-8: Interface change looks good, but verify the integration.

The addition of marketData to the runes array in the RunesLoaderProps interface is approved as it aligns with the PR objectives.

However, ensure that the marketData is properly integrated and utilized in the component and related components.

Verification successful

The marketData property is properly integrated and utilized.

The marketData property is consistently used in the RunesLoader component and related components, indicating proper integration and utilization.

src/app/components/loaders/runes-loader.tsx

src/app/pages/swap/components/swap-asset-select/swap-asset-select-quote.tsx

src/app/pages/swap/components/swap-asset-select/swap-asset-select-base.tsx

src/app/components/loaders/brc20-tokens-loader.tsx

src/app/pages/send/send-crypto-asset-form/form/stx/stx-send-form.tsx

src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx

src/app/pages/send/send-crypto-asset-form/form/sip10/sip10-token-send-form.tsx

src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-send-form.tsx

src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-list.tsx

src/app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item.tsx

src/app/features/asset-list/bitcoin/runes-asset-list/runes-asset-list.tsx

src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-item.tsx

src/app/features/asset-list/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx
Scripts executed

The following scripts were executed for the analysis:

Script:
#!/bin/bash
# Description: Verify the integration of `marketData` in the `RunesLoader` component and related components.

# Test: Search for usage of the `marketData` property in the component and related components.
rg --type tsx -A 5 $'marketData'
Length of output: 59

Script:
#!/bin/bash
# Description: Verify the integration of `marketData` in the `RunesLoader` component and related components.

# Test: Search for usage of the `marketData` property in the component and related components.
rg --glob '*.tsx' -A 5 'marketData'
Length of output: 21642

brandonmarshall-tm · 2024-07-16T15:46:51Z

Looks accurate to me! Do you think it would make more sense to sort Runes by USD balance, most valuable to least valuable?

Also, maybe this is part of our broader assets redesign, but it would be nice to filter out some of the lower-value stuff into "View More" like we do with SIP10 tokens.

alter-eggo · 2024-07-16T15:52:55Z

@brandonmarshall-tm yeah, makes sense re:sorting, but I'd prefer do such enhancements separately, and also we prob need this for other tokens as well, e.g. should we sort sip10 tokens?

@markmhendrickson wdyt here?

alter-eggo · 2024-07-16T15:53:47Z

@brandonmarshall-tm view more section will be removed in favour of "manage tokens" feature from this pr #5627

markmhendrickson · 2024-07-16T16:31:55Z

Also, maybe this is part of our broader assets redesign, but it would be nice to filter out some of the lower-value stuff into "View More" like we do with SIP10 tokens.

Yep let's capture this need with #5404 or a new issue if preferred, and tackle separately

Do you think it would make more sense to sort Runes by USD balance, most valuable to least valuable?

Ditto – let's get separate issue(s) for sorting needs

alter-eggo requested review from fbwoolf and kyranjamie July 16, 2024 14:01

alter-eggo requested a review from edgarkhanzadian July 16, 2024 14:02

alter-eggo force-pushed the feat/runes-fiat branch from 4598d22 to 0ad95a7 Compare July 16, 2024 14:05

coderabbitai bot reviewed Jul 16, 2024

View reviewed changes

alter-eggo force-pushed the feat/runes-fiat branch from 0ad95a7 to 947c6a5 Compare July 16, 2024 14:20

feat: add runes fiat balance, closes #5300

77c63eb

alter-eggo force-pushed the feat/runes-fiat branch from 947c6a5 to 77c63eb Compare July 16, 2024 15:28

coderabbitai bot reviewed Jul 16, 2024

View reviewed changes

fbwoolf approved these changes Jul 16, 2024

View reviewed changes

alter-eggo added this pull request to the merge queue Jul 17, 2024

Merged via the queue into dev with commit 0a175f7 Jul 17, 2024
30 checks passed

alter-eggo deleted the feat/runes-fiat branch July 17, 2024 05:43

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add runes fiat balance, closes #5300 #5656

feat: add runes fiat balance, closes #5300 #5656

alter-eggo commented Jul 16, 2024 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jul 16, 2024 •

edited

Loading

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

coderabbitai bot left a comment

coderabbitai bot left a comment

brandonmarshall-tm commented Jul 16, 2024

coderabbitai bot left a comment

brandonmarshall-tm commented Jul 16, 2024

alter-eggo commented Jul 16, 2024

alter-eggo commented Jul 16, 2024

markmhendrickson commented Jul 16, 2024 •

edited

Loading

feat: add runes fiat balance, closes #5300 #5656

feat: add runes fiat balance, closes #5300 #5656

Conversation

alter-eggo commented Jul 16, 2024 • edited by coderabbitai bot Loading

Summary by CodeRabbit

coderabbitai bot commented Jul 16, 2024 • edited Loading

Walkthrough

Changes

Sequence Diagram(s)

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

brandonmarshall-tm commented Jul 16, 2024

coderabbitai bot left a comment

Choose a reason for hiding this comment

brandonmarshall-tm commented Jul 16, 2024

alter-eggo commented Jul 16, 2024

alter-eggo commented Jul 16, 2024

markmhendrickson commented Jul 16, 2024 • edited Loading

alter-eggo commented Jul 16, 2024 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jul 16, 2024 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

markmhendrickson commented Jul 16, 2024 •

edited

Loading