Fixed non scrollable wallet screen

[scoder1747]

Summary

Related to Issue: #2744

In wallet nwc screen, the user cannot scroll to bottom. The screenshot of the issue is below.

Video showing the scrollable nwc screen after applying the fix

ScreenRecording_12-04-2024.00-25-24_1.mov

Description of resolution:

The views were added inside ScrollView.

Demo after PR updates (Vstack spacing)-

iPhone 16:

iPhone SE:

Checklist

• I have read (or I am familiar with) the Contribution Guidelines
• I have tested the changes in this PR
• My PR is either small, or I have split it into smaller logical commits that are easier to review
• I have added the signoff line to all my commits. See Signing off your work
• I have added appropriate changelog entries for the changes in this PR. See Adding changelog entries
  • I do not need to add a changelog entry. Reason: [Please provide a reason]
• I have added appropriate Closes: or Fixes: tags in the commit messages wherever applicable, or made sure those are not needed. See Submitting patches

Test report

Please provide a test report for the changes in this PR. You can use the template below, but feel free to modify it as needed.

Device: [Please specify the device you used for testing]

iOS: [Please specify the iOS version you used for testing]

Damus: [Please specify the Damus version or commit hash you used for testing]

Setup: [Please provide a brief description of the setup you used for testing, if applicable]

Steps: [Please provide a list of steps you took to test the changes in this PR]

Results:

• PASS
• Partial PASS
  • Details: [Please provide details of the partial pass]

Other notes

[Please provide any other information that you think is relevant to this PR.]

[jb55]

looks good for now but we should look into moving this elsewhere

[danieldaquino]

Thank you @scoder1747, the code and the demo looks good!

However, for some reason the padding above and below the support section seems to be missing when I run it on my end. It does not look like the one shown in the demo:

Damus: 13d9679329c26dd2fbe9f7b6e6e2244ca3f09a5f
iOS: 18.1
Device: iPhone 16 Pro and iPhone SE (simulators)

Can you please check?

[scoder1747]

Thank you @scoder1747, the code and the demo looks good!

However, for some reason the padding above and below the support section seems to be missing when I run it on my end. It does not look like the one shown in the demo:

**Damus:** `13d9679329c26dd2fbe9f7b6e6e2244ca3f09a5f` **iOS:** 18.1 **Device:** iPhone 16 Pro and iPhone SE (simulators)

Can you please check?

Thanks for the feedback. I added the padding at the last moment but somehow forgot to stage the change. I have uploaded the change now. Demo video remains intact.

[scoder1747]

Thank you @scoder1747, the code and the demo looks good!
However, for some reason the padding above and below the support section seems to be missing when I run it on my end. It does not look like the one shown in the demo:

Damus: 13d9679329c26dd2fbe9f7b6e6e2244ca3f09a5f iOS: 18.1 Device: iPhone 16 Pro and iPhone SE (simulators)
Can you please check?

Thanks for the feedback. I added the padding at the last moment but somehow forgot to stage the change. I have uploaded the change now. Demo vides remains intact.

Screenshot below-

[danieldaquino]

Thank you @scoder1747!

I gave it a try, and it does look like the bottom padding improved since the last version, but it still does not match your screenshot for some reason, it looks like the top and bottom padding is set to zero on my end:

Damus: 0acb8a240e54d02d32e044680e29bc22692b78f5
iOS: 18.1
Device: iPhone 16 and SE (simulator)

Can you please check what is causing this?

Thank you!

[scoder1747]

Thank you @scoder1747!

I gave it a try, and it does look like the bottom padding improved since the last version, but it still does not match your screenshot for some reason, it looks like the top and bottom padding is set to zero on my end:

Damus: 0acb8a240e54d02d32e044680e29bc22692b78f5 iOS: 18.1 Device: iPhone 16 and SE (simulator)

Can you please check what is causing this?

Thank you!

Hi @danieldaquino, thanks for the review again. I was able to see the padding issue in the device you've posted. Therefore, I ran on those devices and was able to address the issue. I am able to address by using Vstack spacing which will be applied the same way to all of the three sections in the view. Wallet Relay and Wallet Address components are inserted into one Vstack internally as per older implementation having it's own internal spacing (which I have not made any modification there in). I have provided the screenshots in the PR description for your review. Thanks!

[danieldaquino]

Thank you @scoder1747, The bottom padding problem is resolved on my end, however the top padding unfortunately still looks to be zero

I believe the VStack spacing only applies in between stack objects, but not around the stack itself.

I took a closer look at the code, and this diff seems to solve the issue:

diff --git a/damus/Views/Wallet/WalletView.swift b/damus/Views/Wallet/WalletView.swift
index 1320d38a..949f9fb6 100644
--- a/damus/Views/Wallet/WalletView.swift
+++ b/damus/Views/Wallet/WalletView.swift
@@ -23,7 +23,7 @@ struct WalletView: View {
             VStack(spacing: 35) {
                 if !damus_state.settings.nozaps {
                     SupportDamus
-                        .padding(.bottom, 20)
+                        .padding(.vertical, 20)
                 }
                 
                 VStack(spacing: 5) {
---
base-commit: b7b1f4a1c25dfb2ec14e48d5eb85ec051973a7ce

Then it looks better and more similar to the screenshot you presented:

I can apply this diff on my end and merge the PR manually if it saves time, just let me know if that's ok with you!

Thanks!

[scoder1747]

Thank you @scoder1747, The bottom padding problem is resolved on my end, however the top padding unfortunately still looks to be zero

I believe the VStack spacing only applies in between stack objects, but not around the stack itself.

I took a closer look at the code, and this diff seems to solve the issue:

diff --git a/damus/Views/Wallet/WalletView.swift b/damus/Views/Wallet/WalletView.swift
index 1320d38a..949f9fb6 100644
--- a/damus/Views/Wallet/WalletView.swift
+++ b/damus/Views/Wallet/WalletView.swift
@@ -23,7 +23,7 @@ struct WalletView: View {
             VStack(spacing: 35) {
                 if !damus_state.settings.nozaps {
                     SupportDamus
-                        .padding(.bottom, 20)
+                        .padding(.vertical, 20)
                 }
                 
                 VStack(spacing: 5) {
---
base-commit: b7b1f4a1c25dfb2ec14e48d5eb85ec051973a7ce

Then it looks better and more similar to the screenshot you presented:

I can apply this diff on my end and merge the PR manually if it saves time, just let me know if that's ok with you!

Thanks!

Thanks @danieldaquino. I have uploaded the necessary change and attached the screenshot below

[danieldaquino]

Thank you @scoder1747! Approved and merged!