Skip to content

ui: wallet screen styling#166

Merged
danielnordh merged 84 commits intoreez:mainfrom
danielnordh:ux/walletscreen
Feb 19, 2025
Merged

ui: wallet screen styling#166
danielnordh merged 84 commits intoreez:mainfrom
danielnordh:ux/walletscreen

Conversation

@danielnordh
Copy link
Copy Markdown
Collaborator

@danielnordh danielnordh commented Feb 17, 2025

This PR updates:

  • styling of transaction buttons
  • shows activity directly
  • settings icon (with network and / or mock data label)
image

Summary by CodeRabbit

  • New Features

    • Introduced a dedicated transaction control section for sending, scanning, and receiving Bitcoin.
  • Refactor

    • Redesigned the Bitcoin interface with a streamlined, vertical layout for improved clarity.
    • Updated the payments view with a refreshed, engaging empty-state message and increased visual spacing.
    • Simplified the settings view layout, providing a more straightforward dismissal experience.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Feb 17, 2025

Walkthrough

This pull request refactors multiple components. In the BitcoinViewModel, the asynchronous work in the update method is now wrapped within a Task block, and the network color state management (i.e. the published networkColor property and getColor method) has been removed. The BitcoinView has been restructured with a simpler layout by replacing a ZStack with a VStack, integrating the payments list directly and introducing a new TransactionButtons component. The empty state and layout in PaymentsListView have been updated, and the SettingsView now employs a VStack instead of a NavigationView, with adjusted dismissal logic.

Changes

File(s) Summary
LDKNodeMonday/View Model/Home/BitcoinViewModel.swift Updated update() method: changed from async to non-async with a Task block; removed @Published var networkColor and getColor() method.
LDKNodeMonday/View/Home/BitcoinView.swift Simplified layout: replaced ZStack with VStack; removed isPaymentsPresented and payment button; integrated PaymentsListView and added TransactionButtons for send, scan, and receive operations; streamlined error handling via onReceive.
LDKNodeMonday/View/Home/Payments/PaymentsListView.swift Modified empty state: replaced multi-view layout with single styled text; increased minimum height from 300 to 400; commented out header; added horizontal padding.
LDKNodeMonday/View/Settings/SettingsView.swift Restructured view layout: replaced NavigationView with VStack; removed toolbar “Done” button; added dismissal to “Restart” alert action; maintained alert handling for node ID errors.

Sequence Diagram(s)

sequenceDiagram
    participant View as BitcoinView
    participant VM as BitcoinViewModel
    participant TaskBlock as Task
    View->>VM: onReceive event triggers update()
    VM->>TaskBlock: Initiate Task { fetch balances, prices, payments, status }
    TaskBlock-->>VM: Complete asynchronous operations
    VM-->>View: Update UI state
Loading

Possibly related PRs

Poem

I’m a rabbit, hopping here with glee,
Code changes bloom like carrots in spring – you see!
Async tasks tucked in a neat little block,
Views refreshed in a stylish, simple knock.
With each line of change, my heart does sing,
Happy hops for every update we bring!
🐰💻


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>, please review it.
    • 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 gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @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 using 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 generate docstrings to generate docstrings for this PR. (Beta)
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

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.

@reez
Copy link
Copy Markdown
Owner

reez commented Feb 17, 2025

code and ui looking good to me

@danielnordh danielnordh changed the title draft: wallet screen ui styling ui: wallet screen styling Feb 19, 2025
@danielnordh danielnordh marked this pull request as ready for review February 19, 2025 09:53
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🧹 Nitpick comments (9)
LDKNodeMonday/View/Home/Payments/PaymentsListView.swift (1)

59-66: Remove commented-out code.

Instead of keeping the commented-out header section, it should be removed entirely to maintain code cleanliness.

-            /*
-            header: {
-                Text("Activity")
-                    .font(.subheadline)
-                    .fontWeight(.semibold)
-            }
-            */
LDKNodeMonday/View/Settings/SettingsView.swift (1)

175-182: Consider adding visual feedback before dismissal.

While dismissing after restart improves the flow, consider adding a brief success message or loading indicator to:

  1. Indicate restart progress
  2. Confirm successful completion
  3. Provide better user feedback
 Task {
     await viewModel.walletClient.restart(
         newNetwork: viewModel.walletClient.network,
         newServer: viewModel.walletClient.server,
         appMode: viewModel.walletClient.appMode == .mock ? .live : .mock
     )
+    // Show brief success message
+    try? await Task.sleep(nanoseconds: 1_000_000_000)  // 1 second delay
     dismiss()
 }
LDKNodeMonday/View/Home/BitcoinView.swift (3)

42-62: Consider more concise network status text.

While the network status integration looks good, the text could be more concise.

Consider this more concise version:

-                        Text(
-                            viewModel.walletClient.appMode == .mock
-                                ? "Mock data /" : ""
-                        )
-                        Text(viewModel.walletClient.network.description.capitalized)
+                        if viewModel.walletClient.appMode == .mock {
+                            Text("Mock")
+                        }
+                        Text(viewModel.walletClient.network.description.capitalized)

65-78: Optimize event handling code.

The event handling code has some inefficiencies:

  1. Unused parameters in closure
  2. Redundant event handlers

Apply these improvements:

-        .onChange(
-            of: eventService.lastMessage,
-            { oldValue, newValue in
-                showToast = eventService.lastMessage != nil
-            }
-        )
+        .onChange(
+            of: eventService.lastMessage,
+            { _, _ in
+                showToast = eventService.lastMessage != nil
+            }
+        )

Also, consider consolidating the onReceive handlers to reduce redundancy.

🧰 Tools
🪛 SwiftLint (0.57.0)

[Warning] 67-67: Unused parameter in a closure should be replaced with _

(unused_closure_parameter)


[Warning] 67-67: Unused parameter in a closure should be replaced with _

(unused_closure_parameter)


231-293: Improve TransactionButtons component efficiency.

The component is well-structured but has some areas for improvement:

  1. Empty button action in Send button
  2. Redundant NavigationLink for Scan QR

Consider these improvements:

-            NavigationLink(value: NavigationDestination.address) {
-                Button {
-                    // Optional button action if needed
-                } label: {
-                    Text("Send")
-                }.buttonStyle(
+            NavigationLink(value: NavigationDestination.address) {
+                Text("Send")
+                    .buttonStyle(
                     BitcoinFilled(
                         width: 120,
                         tintColor: .accent,
                         isCapsule: true
                     )
-                ).allowsHitTesting(false)  // Required to enable NavigationLink to work
+                )
             }.disabled(viewModel.unifiedBalance == 0)
LDKNodeMonday/View Model/Home/BitcoinViewModel.swift (4)

56-63: Consider adding task cancellation check.

The getStatus method should check for task cancellation to allow proper cleanup.

     func getStatus() async {
+        guard !Task.isCancelled else { return }
         let status = lightningClient.status()
         let sCopy = status  // To avoid issues with non-sendable object
         await MainActor.run {
             self.status = sCopy
             self.isStatusFinished = true
         }
     }

65-74: Consider adding task cancellation check.

The getBalances method should check for task cancellation to allow proper cleanup.

     func getBalances() async {
+        guard !Task.isCancelled else { return }
         let balances = await lightningClient.balances()
         let bdCopy = balances  // To avoid issues with non-sendable object
         await MainActor.run {
             self.balances = bdCopy
             self.unifiedBalance =
                 balances.totalOnchainBalanceSats + balances.totalLightningBalanceSats
             self.isBalancesFinished = true
         }
     }

76-97: Consider adding task cancellation check.

The getPrices method should check for task cancellation to allow proper cleanup.

     func getPrices() async {
+        guard !Task.isCancelled else { return }
         do {
             let price = try await priceClient.fetchPrice()
             await MainActor.run {
                 self.price = price.usd
                 self.time = price.time
                 self.isPriceFinished = true
             }
         } catch let error as NodeError {
             let errorString = handleNodeError(error)
             await MainActor.run {
                 self.bitcoinViewError = .init(title: errorString.title, detail: errorString.detail)
             }
         } catch {
             await MainActor.run {
                 self.bitcoinViewError = .init(
                     title: "Unexpected error",
                     detail: error.localizedDescription
                 )
             }
         }
     }

99-105: Consider adding task cancellation check.

The getPayments method should check for task cancellation to allow proper cleanup.

     func getPayments() async {
+        guard !Task.isCancelled else { return }
         let payments = lightningClient.listPayments()
         let pCopy = payments
         await MainActor.run {
             self.payments = pCopy
         }
     }
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c136335 and 0b061a5.

📒 Files selected for processing (4)
  • LDKNodeMonday/View Model/Home/BitcoinViewModel.swift (1 hunks)
  • LDKNodeMonday/View/Home/BitcoinView.swift (3 hunks)
  • LDKNodeMonday/View/Home/Payments/PaymentsListView.swift (2 hunks)
  • LDKNodeMonday/View/Settings/SettingsView.swift (2 hunks)
🧰 Additional context used
🧠 Learnings (1)
LDKNodeMonday/View/Settings/SettingsView.swift (1)
Learnt from: danielnordh
PR: reez/Monday#158
File: LDKNodeMonday/View/Settings/SettingsView.swift:97-108
Timestamp: 2025-01-30T11:38:58.572Z
Learning: User prefers to handle UI/UX improvements like error handling and loading states in separate PRs to keep changes focused and manageable.
🪛 SwiftLint (0.57.0)
LDKNodeMonday/View/Home/BitcoinView.swift

[Warning] 67-67: Unused parameter in a closure should be replaced with _

(unused_closure_parameter)


[Warning] 67-67: Unused parameter in a closure should be replaced with _

(unused_closure_parameter)

🔇 Additional comments (5)
LDKNodeMonday/View/Home/Payments/PaymentsListView.swift (2)

41-46: LGTM! Empty state UI improvements look great.

The updated empty state message is more engaging and action-oriented, with proper styling and spacing.


69-69: LGTM! Proper horizontal padding added.

The addition of horizontal padding improves the visual appearance by maintaining proper content margins.

LDKNodeMonday/View/Settings/SettingsView.swift (1)

22-22: Verify navigation behavior with VStack.

The replacement of NavigationView with VStack simplifies the view hierarchy but may affect standard iOS navigation patterns. Please ensure that:

  1. Navigation between views works as expected
  2. Back button behavior is preserved
  3. Navigation title remains visible
LDKNodeMonday/View/Home/BitcoinView.swift (2)

27-41: LGTM! Improved layout structure and accessibility.

The switch to VStack with proper padding and the integration of PaymentsListView creates a more logical vertical flow. The dynamic type size limit helps maintain layout integrity.


334-345: LGTM! Well-structured preview code.

The preview implementation follows best practices with appropriate use of mock data and debug conditional compilation.

Comment thread LDKNodeMonday/View Model/Home/BitcoinViewModel.swift
tintColor: .accent,
isCapsule: true
)
).allowsHitTesting(false) // Required to enable NavigationLink to work
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

interesting, never ran into this modifier but makes sense from taking a look

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

I'm hoping to address this when we do the send screen(s).
We need to use NavigationLink instead of a plain Button to use the NavigationAddress.
But I think we can simplify inside the Send views so this is not necessary.

Copy link
Copy Markdown
Owner

@reez reez left a comment

Choose a reason for hiding this comment

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

ACK

Squash and merge whenever you're ready!

@danielnordh danielnordh merged commit e3f6f51 into reez:main Feb 19, 2025
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.

2 participants