Update history and bridge preview design #24
Conversation
WalkthroughThis update introduces UI improvements and code refactoring to the bridge history and operation item components. It adds wallet and chain icon overlays, restructures layout and metadata display, and includes explorer name mapping for bridge types. All changes are limited to CSS and React component rendering, with no changes to core logic or public APIs. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant BridgeHistoryItem
participant WalletData
participant UI
User->>BridgeHistoryItem: Render component
BridgeHistoryItem->>WalletData: useAccount(), useCosmosWallets()
BridgeHistoryItem->>BridgeHistoryItem: getWalletIcon(address, isSource)
BridgeHistoryItem->>UI: Render row with asset, chain, and wallet icons
BridgeHistoryItem->>UI: Render meta info and explorer section
UI-->>User: Display updated bridge history item
Poem
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Deploying initia-widget-preview-staging with
|
| Latest commit: |
53e409d
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://caf2526c.initia-widget-preview-staging.pages.dev |
| Branch Preview URL: | https://update-history-design.initia-widget-preview-staging.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
packages/widget-react/src/pages/bridge/BridgeHistoryItem.tsx (1)
121-151: Fix potential undefined chain logo issue.The
renderRowfunction has the same non-null assertion issue as in OperationItem.tsx.Apply this diff to safely handle undefined chain logo URI:
- <div className={styles.logoContainer}> - <Image src={logo_uri} width={32} height={32} /> - <Image - src={chain_logo_uri || undefined} - width={16} - height={16} - className={styles.chainLogo} - /> - </div> + <div className={styles.logoContainer}> + <Image src={logo_uri} width={32} height={32} /> + {chain_logo_uri && ( + <Image + src={chain_logo_uri} + width={16} + height={16} + className={styles.chainLogo} + /> + )} + </div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
packages/widget-react/src/pages/bridge/BridgeHistoryItem.module.css(4 hunks)packages/widget-react/src/pages/bridge/BridgeHistoryItem.tsx(5 hunks)packages/widget-react/src/pages/bridge/OperationItem.module.css(1 hunks)packages/widget-react/src/pages/bridge/OperationItem.tsx(2 hunks)packages/widget-react/src/pages/bridge/data/tx.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
packages/widget-react/src/pages/bridge/OperationItem.tsx (1)
packages/widget-react/src/pages/bridge/data/chains.ts (1)
useSkipChain(60-63)
packages/widget-react/src/pages/bridge/BridgeHistoryItem.tsx (4)
packages/widget-react/src/public/utils/address.ts (1)
AddressUtils(4-66)packages/widget-react/src/pages/bridge/data/chains.ts (1)
RouterChainJson(9-13)packages/widget-react/src/public/utils/format.ts (1)
formatAmount(19-26)packages/widget-react/src/pages/bridge/data/tx.ts (1)
bridgeTypeExplorerName(317-321)
🔇 Additional comments (11)
packages/widget-react/src/pages/bridge/data/tx.ts (1)
317-321: LGTM! Well-structured explorer name mapping.The constant provides a clean mapping from bridge types to their corresponding explorer names, which enhances the UI by showing user-friendly explorer names instead of enum values.
packages/widget-react/src/pages/bridge/OperationItem.module.css (1)
9-21: LGTM! Clean implementation of logo overlay pattern.The CSS correctly implements a positioned overlay where the chain logo appears as a small badge in the bottom-right corner of the main logo. The styling with border and circular border-radius provides good visual separation.
packages/widget-react/src/pages/bridge/OperationItem.tsx (1)
21-21: LGTM! Good destructuring pattern.Extracting the chain logo URI from the skip chain data is well-structured and follows the existing pattern.
packages/widget-react/src/pages/bridge/BridgeHistoryItem.module.css (4)
22-27: LGTM! Improved header layout.The change from grid to flex layout with space-between justification properly separates the meta information and explorer link sections.
52-60: LGTM! Well-styled explorer link section.The explorer styling provides appropriate visual hierarchy and spacing for the new explorer link display.
87-100: LGTM! Consistent logo overlay implementation.The logo container and chain logo overlay styling matches the pattern established in OperationItem, providing UI consistency across components.
119-126: LGTM! Proper wallet icon integration.The flex layout for the chain section and wallet icon styling provide good visual alignment and spacing.
packages/widget-react/src/pages/bridge/BridgeHistoryItem.tsx (4)
3-3: LGTM! Proper wallet integration imports and state.The imports and wallet state setup correctly integrate wagmi account information and cosmos wallet functionality.
Also applies to: 30-30, 45-46
103-119: LGTM! Well-structured wallet icon helper.The
getWalletIconfunction properly handles different wallet scenarios:
- Cosmos wallet icons for source addresses
- Connected wallet connector icons for matching addresses
- Default wallet icon as fallback
The logic is clear and follows the expected priority order.
157-185: LGTM! Improved header with better information architecture.The restructured header effectively separates:
- Transaction status and metadata (timestamp, fees, slippage)
- Explorer link with bridge type name
The conditional rendering for fees and slippage is well-implemented, and the use of
bridgeTypeExplorerNameprovides user-friendly explorer names.
188-188: LGTM! Proper isSource parameter usage.The
renderRowcalls correctly passtruefor source transactions andfalsefor destination transactions, enabling appropriate wallet icon rendering.Also applies to: 192-192
| <div className={styles.logoContainer}> | ||
| <Image src={logo_uri} width={32} height={32} /> | ||
| {!!walletIcon && ( | ||
| <Image src={chain_logo_uri!} width={16} height={16} className={styles.chainLogo} /> | ||
| )} | ||
| </div> |
There was a problem hiding this comment.
Fix potential runtime error with non-null assertion.
The non-null assertion operator on chain_logo_uri! could cause a runtime error if the chain logo URI is undefined.
Apply this diff to safely handle undefined chain logo URI:
- {!!walletIcon && (
- <Image src={chain_logo_uri!} width={16} height={16} className={styles.chainLogo} />
- )}
+ {!!walletIcon && chain_logo_uri && (
+ <Image src={chain_logo_uri} width={16} height={16} className={styles.chainLogo} />
+ )}📝 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.
| <div className={styles.logoContainer}> | |
| <Image src={logo_uri} width={32} height={32} /> | |
| {!!walletIcon && ( | |
| <Image src={chain_logo_uri!} width={16} height={16} className={styles.chainLogo} /> | |
| )} | |
| </div> | |
| <div className={styles.logoContainer}> | |
| <Image src={logo_uri} width={32} height={32} /> | |
| {!!walletIcon && chain_logo_uri && ( | |
| <Image src={chain_logo_uri} width={16} height={16} className={styles.chainLogo} /> | |
| )} | |
| </div> |
🤖 Prompt for AI Agents
In packages/widget-react/src/pages/bridge/OperationItem.tsx around lines 43 to
48, the use of the non-null assertion operator on chain_logo_uri can cause a
runtime error if chain_logo_uri is undefined. To fix this, add a conditional
check to ensure chain_logo_uri is defined before rendering the Image component
with it, preventing potential crashes when the URI is missing.
Summary by CodeRabbit
New Features
Style