[draft] Mattupham/fe 785 portfolio recent withdrawals / deposits #3690
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
4 Skipped Deployments
|
WalkthroughThe recent changes enhance the usability and flexibility of several components within the web application. Notably, the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant PortfolioPage
participant RecentActivity
participant RecentActivityTransferRow
User->>PortfolioPage: Open Portfolio
PortfolioPage->>RecentActivity: Fetch Recent Transactions
RecentActivity->>RecentActivityTransferRow: Display Transactions
RecentActivity->>User: Show Recent Activity
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? TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Outside diff range, codebase verification and nitpick comments (4)
packages/web/components/transactions/recent-activity/recent-activity-transaction-row.tsx (2)
81-82: Ensure consistent class names.The class names should be consistent with the project's naming conventions.
- className={classNames("-mx-4 flex justify-between gap-4 rounded-2xl p-2")} + className={classNames("mx-4 flex justify-between gap-4 rounded-2xl p-2")}
134-135: Ensure consistent class names.The class names should be consistent with the project's naming conventions.
- className={classNames("-mx-4 flex justify-between gap-4 rounded-2xl p-2")} + className={classNames("mx-4 flex justify-between gap-4 rounded-2xl p-2")}packages/web/components/complex/portfolio-page.tsx (2)
87-88: Ensure consistent class names.The class names should be consistent with the project's naming conventions.
- className={classNames("-mx-4 flex justify-between gap-4 rounded-2xl p-2")} + className={classNames("mx-4 flex justify-between gap-4 rounded-2xl p-2")}
174-175: Ensure consistent class names.The class names should be consistent with the project's naming conventions.
- className={classNames("-mx-4 flex justify-between gap-4 rounded-2xl p-2")} + className={classNames("mx-4 flex justify-between gap-4 rounded-2xl p-2")}Tools
Biome
[error] 175-175: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
| {/* {!isTotalValueFetched ? ( */} | ||
| {true ? ( |
There was a problem hiding this comment.
Fix the spinner's conditional rendering logic.
The hardcoded true condition causes the spinner to always display, which can mislead users about the loading state of data. Revert to the original condition.
- {true ? (
+ {!isTotalValueFetched ? (Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| {/* {!isTotalValueFetched ? ( */} | |
| {true ? ( | |
| {/* {!isTotalValueFetched ? ( */} | |
| {!isTotalValueFetched ? ( |
Tools
Biome
[error] 110-110: Unexpected constant condition.
(lint/correctness/noConstantCondition)
| export const RecentActivityTransactionRow: FunctionComponent<Transaction> = ({ | ||
| status, | ||
| effect, | ||
| title, | ||
| caption, | ||
| tokenConversion, | ||
| transfer, | ||
| }) => { | ||
| const effectIconId = effect === "swap" ? "swap" : "down-arrow"; | ||
|
|
||
| const { t } = useTranslation(); | ||
|
|
||
| return ( | ||
| <div | ||
| className={classNames("-mx-4 flex justify-between gap-4 rounded-2xl p-2")} | ||
| > | ||
| <div className="flex items-center gap-4 md:w-1/2 md:gap-2"> | ||
| {status === "pending" ? ( | ||
| <Spinner className="h-8 w-8 pb-4 text-wosmongton-500" /> | ||
| ) : ( | ||
| <div className="flex h-12 w-12 items-center justify-center rounded-full bg-osmoverse-825 p-3"> | ||
| {status === "success" ? ( | ||
| effect === "withdraw" ? ( | ||
| <Icon | ||
| className="rotate-180 transform" | ||
| id={effectIconId} | ||
| width="100%" | ||
| height="100%" | ||
| /> | ||
| ) : ( | ||
| <Icon id={effectIconId} width="100%" height="100%" /> | ||
| ) | ||
| ) : ( | ||
| <Icon | ||
| width="100%" | ||
| height="100%" | ||
| id="alert-circle" | ||
| color={theme.colors.rust[400]} | ||
| /> | ||
| )} | ||
| </div> | ||
| )} | ||
|
|
||
| <div> | ||
| <div className="flex flex-col"> | ||
| <p className="subtitle1 text-osmoverse-100">{title[status]}</p> | ||
| {tokenConversion && ( | ||
| <div className="caption flex gap-1 text-osmoverse-300"> | ||
| {displayFiatPrice(tokenConversion.tokenIn?.value, "", t)}{" "} | ||
| {tokenConversion.tokenOut.amount.denom}{" "} | ||
| <Icon id="arrow-right" width={14} height={14} />{" "} | ||
| {tokenConversion.tokenIn.amount.denom} | ||
| </div> | ||
| )} | ||
| </div> | ||
| {tokenConversion && ( | ||
| <div className="caption mt-1 hidden text-osmoverse-300 md:flex md:items-center"> | ||
| {formatPretty(tokenConversion.tokenOut.amount, { | ||
| maxDecimals: 6, | ||
| })} | ||
| <Icon | ||
| id="arrow-right" | ||
| width={12} | ||
| height={12} | ||
| className="ml-1 inline-block" | ||
| /> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| {caption && <p className="body1 text-osmoverse-300">{caption}</p>} | ||
| {tokenConversion && ( | ||
| <TokenConversion status={status} effect={effect} {...tokenConversion} /> | ||
| )} | ||
| {transfer && <TokenTransfer status={status} {...transfer} />} | ||
| </div> | ||
| ); |
There was a problem hiding this comment.
Use optional chaining for better safety.
Use optional chaining to safely access properties.
- {status === "pending" ? (
+ {status?. === "pending" ? (Committable suggestion was skipped due to low confidence.
mattupham
changed the title
|
@mattupham do we still need this or can it be deleted? |
What is the purpose of the change:
Linear Task
Brief Changelog
Testing and Verifying