[#428] Update onboarding screens (#431)

Closes #428

- Update images on onboarding screens.
- Update view that shows images on onboarding screen. Previously images
  were square and wrapped into `CircularFrame`. Now each onboarding
  screen is little bit different and each images has different size a
  bit.

secant.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -1,212 +0,0 @@
-{
-  "pins" : [
-    {
-      "identity" : "combine-schedulers",
-      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/pointfreeco/combine-schedulers",
-      "state" : {
-        "revision" : "aa3e575929f2bcc5bad012bd2575eae716cbcdf7",
-        "version" : "0.8.0"
-      }
-    },
-    {
-      "identity" : "grpc-swift",
-      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/grpc/grpc-swift.git",
-      "state" : {
-        "revision" : "4c63368b7462305903507e8acebd77264c0fb695",
-        "version" : "1.8.2"
-      }
-    },
-    {
-      "identity" : "lottie-ios",
-      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/airbnb/lottie-ios",
-      "state" : {
-        "revision" : "246bab7ef72bad56abefb88e84a08871cecf9cb8",
-        "version" : "3.4.0"
-      }
-    },
-    {
-      "identity" : "mnemonicswift",
-      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/zcash-hackworks/MnemonicSwift",
-      "state" : {
-        "revision" : "716a2c32ac2bbd8a1499ac834077df42b75edc85",
-        "version" : "2.2.4"
-      }
-    },
-    {
-      "identity" : "sqlite.swift",
-      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/stephencelis/SQLite.swift.git",
-      "state" : {
-        "revision" : "4d543d811ee644fa4cc4bfa0be996b4dd6ba0f54",
-        "version" : "0.13.3"
-      }
-    },
-    {
-      "identity" : "swift-case-paths",
-      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/pointfreeco/swift-case-paths",
-      "state" : {
-        "revision" : "b4a872984463070c71e2e97e5c02c73a07d0fe36",
-        "version" : "0.9.0"
-      }
-    },
-    {
-      "identity" : "swift-collections",
-      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/apple/swift-collections",
-      "state" : {
-        "revision" : "48254824bb4248676bf7ce56014ff57b142b77eb",
-        "version" : "1.0.2"
-      }
-    },
-    {
-      "identity" : "swift-composable-architecture",
-      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/pointfreeco/swift-composable-architecture",
-      "state" : {
-        "revision" : "9ea8c763061287052a68d5e6723fed45e898b7d9",
-        "version" : "0.40.2"
-      }
-    },
-    {
-      "identity" : "swift-crypto",
-      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/apple/swift-crypto.git",
-      "state" : {
-        "revision" : "d9825fa541df64b1a7b182178d61b9a82730d01f",
-        "version" : "2.1.0"
-      }
-    },
-    {
-      "identity" : "swift-custom-dump",
-      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/pointfreeco/swift-custom-dump",
-      "state" : {
-        "revision" : "21ec1d717c07cea5a026979cb0471dd95c7087e7",
-        "version" : "0.5.0"
-      }
-    },
-    {
-      "identity" : "swift-identified-collections",
-      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/pointfreeco/swift-identified-collections",
-      "state" : {
-        "revision" : "2d6b7ffcc67afd9077fac5e5a29bcd6d39b71076",
-        "version" : "0.4.0"
-      }
-    },
-    {
-      "identity" : "swift-log",
-      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/apple/swift-log.git",
-      "state" : {
-        "revision" : "5d66f7ba25daf4f94100e7022febf3c75e37a6c7",
-        "version" : "1.4.2"
-      }
-    },
-    {
-      "identity" : "swift-nio",
-      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/apple/swift-nio.git",
-      "state" : {
-        "revision" : "124119f0bb12384cef35aa041d7c3a686108722d",
-        "version" : "2.40.0"
-      }
-    },
-    {
-      "identity" : "swift-nio-extras",
-      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/apple/swift-nio-extras.git",
-      "state" : {
-        "revision" : "a75e92bde3683241c15df3dd905b7a6dcac4d551",
-        "version" : "1.12.1"
-      }
-    },
-    {
-      "identity" : "swift-nio-http2",
-      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/apple/swift-nio-http2.git",
-      "state" : {
-        "revision" : "108ac15087ea9b79abb6f6742699cf31de0e8772",
-        "version" : "1.22.0"
-      }
-    },
-    {
-      "identity" : "swift-nio-ssl",
-      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/apple/swift-nio-ssl.git",
-      "state" : {
-        "revision" : "c30c680c78c99afdabf84805a83c8745387c4ac7",
-        "version" : "2.20.2"
-      }
-    },
-    {
-      "identity" : "swift-nio-transport-services",
-      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/apple/swift-nio-transport-services.git",
-      "state" : {
-        "revision" : "2cb54f91ddafc90832c5fa247faf5798d0a7c204",
-        "version" : "1.13.0"
-      }
-    },
-    {
-      "identity" : "swift-parsing",
-      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/pointfreeco/swift-parsing",
-      "state" : {
-        "revision" : "bc92e84968990b41640214b636667f35b6e5d44c",
-        "version" : "0.10.0"
-      }
-    },
-    {
-      "identity" : "swift-protobuf",
-      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/apple/swift-protobuf.git",
-      "state" : {
-        "revision" : "e1499bc69b9040b29184f7f2996f7bab467c1639",
-        "version" : "1.19.0"
-      }
-    },
-    {
-      "identity" : "swift-url-routing",
-      "kind" : "remoteSourceControl",
-      "location" : "http://github.com/pointfreeco/swift-url-routing",
-      "state" : {
-        "revision" : "5bf79bb370015e43842a61d558a9ee053171124e",
-        "version" : "0.3.0"
-      }
-    },
-    {
-      "identity" : "xctest-dynamic-overlay",
-      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/pointfreeco/xctest-dynamic-overlay",
-      "state" : {
-        "revision" : "38bc9242e4388b80bd23ddfdf3071428859e3260",
-        "version" : "0.4.0"
-      }
-    },
-    {
-      "identity" : "zcash-light-client-ffi",
-      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/zcash-hackworks/zcash-light-client-ffi.git",
-      "state" : {
-        "revision" : "b7e8a2abab84c44046b4afe4ee4522a0fa2fcc7f",
-        "version" : "0.0.3"
-      }
-    },
-    {
-      "identity" : "zcashlightclientkit",
-      "kind" : "remoteSourceControl",
-      "location" : "https://github.com/zcash/ZcashLightClientKit",
-      "state" : {
-        "revision" : "9e41fb43757fd7b0eb8e817320537230774258cf",
-        "version" : "0.16.10-beta"
-      }
-    }
-  ],
-  "version" : 2
-}

secant/Features/OnboardingFlow/Views/OnboardingContentView.swift

@@ -15,71 +15,54 @@ struct OnboardingContentView: View {
     
     var body: some View {
         WithViewStore(self.store) { viewStore in
-            ZStack {
+            let scale = imageScale
-                if viewStore.isFinalStep {
+            let imageWidth: CGFloat = width * scale
-                    VStack {
+            let imageXOffset: CGFloat = (width - imageWidth) / 2
-                        Asset.Assets.Backgrounds.callout4.image
+
-                            .resizable()
+            let image = viewStore.steps[viewStore.index].background
-                            .frame(
+                .resizable()
-                                width: width,
+                .aspectRatio(contentMode: .fit)
-                                height: height * 0.6
+                .frame(width: imageWidth)
-                            )
+                .offset(x: imageXOffset)
-                            .aspectRatio(contentMode: .fill)
+
-                            .edgesIgnoringSafeArea(.all)
+            let title = Text(viewStore.steps[viewStore.index].title)
-                        Spacer()
+                .titleText()
-                    }
+                .lineLimit(0)
-                    .transition(.opacity)
+                .minimumScaleFactor(0.1)
-                } else {
+                .padding(EdgeInsets(top: 0, leading: 10, bottom: 5, trailing: 10))
-                    CircularFrame()
+
-                        .backgroundImages(
+            let text = Text(viewStore.steps[viewStore.index].description)
-                            store.actionless.scope(
+                .paragraphText()
-                                state: { state in
+                .lineSpacing(2)
-                                    CircularFrameBackgroundImages.ViewState(
+                .padding(EdgeInsets(top: 0, leading: 10, bottom: 10, trailing: 10))
-                                        index: state.index,
+
-                                        images: state.steps.map { $0.background }
+            if viewStore.isInitialStep {
-                                    )
+                VStack(alignment: .leading) {
-                                }
+                    image
-                            )
+                    title
-                        )
+                    text
-                        .frame(width: circularFrameUniformSize, height: circularFrameUniformSize)
+                    Spacer()
-                        .badgeIcons(
-                            store.actionless.scope(
-                                state: { state in
-                                    BadgesOverlay.ViewState(
-                                        index: state.index,
-                                        badges: state.steps.map { $0.badge }
-                                    )
-                                }
-                            )
-                        )
-                        .offset(y: viewStore.offset - height / circularFrameOffsetCoeffcient)
-                        .transition(.scale(scale: 2).combined(with: .opacity))
                 }
-            }
+                .ignoresSafeArea(edges: [.top])
-            ZStack {
+            } else if viewStore.isFinalStep {
-                ForEach(0..<viewStore.steps.count, id: \.self) { stepIndex in
+                VStack(alignment: .leading) {
-                    VStack(spacing: viewStore.isFinalStep ? 50 : 15) {
+                    title
-                        HStack {
+                        .padding(.top, 73 * imageScale)
-                            Text(viewStore.steps[stepIndex].title)
+                    text
-                                .titleText()
+                    image
-                                .lineLimit(0)
+                    Spacer()
-                                .minimumScaleFactor(0.1)
-                            if !viewStore.isFinalStep {
-                                Spacer()
-                            }
-                        }
-                        
-                        Text(viewStore.steps[stepIndex].description)
-                            .paragraphText()
-                            .lineSpacing(2)
-                            .opacity(0.53)
-                    }
-                    .opacity(stepIndex == viewStore.index ? 1: 0)
-                    .padding(.horizontal, 35)
-                    .frame(width: width, height: height)
                 }
+            } else {
+                VStack(alignment: .leading) {
+                    image
+                        .padding(.top, 73 * imageScale)
+
+                    title
+                    text
+                    Spacer()
+                }
+                .ignoresSafeArea(edges: [.top])
             }
-            .offset(y: viewStore.isFinalStep ? width / 2.5 : viewStore.offset + height / descriptionOffsetCoefficient)
         }
     }
 }
@@ -88,39 +71,16 @@ struct OnboardingContentView: View {
 /// on different devices (apects). iPhone SE and iPhone 8 are similar aspect family devices
 /// while iPhone X, 11, etc are different family devices, capable to use more of the space.
 extension OnboardingContentView {
-    var circularFrameUniformSize: CGFloat {
+    var imageScale: CGFloat {
-        var deviceMultiplier = 1.0
+        // Just to be sure that we counting with exactly 3 decimal points.
-        
+        let aspectRatio = (floor(height / width * 1000)) / 1000
-        if width > 0.0 {
+
-            let aspect = height / width
+        /// iPhone SE or iPhone 8 for example
-            deviceMultiplier = 1.0 + (((aspect / 1.725) - 1.0) * 2.0)
+        if aspectRatio <= 1.725 {
+            return 0.7
+        } else {
+            return 1.0
         }
-        
-        return width * 0.6 * deviceMultiplier
-    }
-
-    var circularFrameOffsetCoeffcient: CGFloat {
-        var deviceMultiplier = 1.0
-
-        if width > 0.0 {
-            let aspect = height / width
-            deviceMultiplier = aspect / 1.725
-        }
-
-        return 4.4 * deviceMultiplier
-    }
-
-    var descriptionOffsetCoefficient: Double {
-        if width > 0.0 {
-            let aspect = height / width
-            let deviceMultiplier = 1.0 + (((aspect / 1.725) - 1.0) * 2.5)
-            
-            if abs(deviceMultiplier) > 0.0 {
-                return 8.0 / deviceMultiplier
-            }
-        }
-        
-        return 8.0
     }
 }
 

secant/Features/OnboardingFlow/Views/OnboardingHeaderView.swift

@@ -37,7 +37,7 @@ struct OnboardingHeaderView: View {
                     
                     Spacer()
                     
-                    if !viewStore.isFinalStep {
+                    if !viewStore.isInitialStep && !viewStore.isFinalStep {
                         Button("Skip") {
                             viewStore.send(.skip, animation: .easeInOut(duration: animationDuration))
                         }

secant/Resources/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -150,6 +150,66 @@
       "scale" : "1x",
       "size" : "1024x1024"
     },
+    {
+      "filename" : "16.png",
+      "idiom" : "mac",
+      "scale" : "1x",
+      "size" : "16x16"
+    },
+    {
+      "filename" : "32.png",
+      "idiom" : "mac",
+      "scale" : "2x",
+      "size" : "16x16"
+    },
+    {
+      "filename" : "32.png",
+      "idiom" : "mac",
+      "scale" : "1x",
+      "size" : "32x32"
+    },
+    {
+      "filename" : "64.png",
+      "idiom" : "mac",
+      "scale" : "2x",
+      "size" : "32x32"
+    },
+    {
+      "filename" : "128.png",
+      "idiom" : "mac",
+      "scale" : "1x",
+      "size" : "128x128"
+    },
+    {
+      "filename" : "256.png",
+      "idiom" : "mac",
+      "scale" : "2x",
+      "size" : "128x128"
+    },
+    {
+      "filename" : "256.png",
+      "idiom" : "mac",
+      "scale" : "1x",
+      "size" : "256x256"
+    },
+    {
+      "filename" : "512.png",
+      "idiom" : "mac",
+      "scale" : "2x",
+      "size" : "256x256"
+    },
+    {
+      "filename" : "512.png",
+      "idiom" : "mac",
+      "scale" : "1x",
+      "size" : "512x512"
+    },
+    {
+      "filename" : "1024.png",
+      "idiom" : "mac",
+      "scale" : "2x",
+      "size" : "512x512"
+    },
     {
       "filename" : "48.png",
       "idiom" : "watch",
@@ -225,6 +285,13 @@
       "size" : "51x51",
       "subtype" : "45mm"
     },
+    {
+      "idiom" : "watch",
+      "role" : "appLauncher",
+      "scale" : "2x",
+      "size" : "54x54",
+      "subtype" : "49mm"
+    },
     {
       "filename" : "172.png",
       "idiom" : "watch",
@@ -256,71 +323,18 @@
       "size" : "117x117",
       "subtype" : "45mm"
     },
+    {
+      "idiom" : "watch",
+      "role" : "quickLook",
+      "scale" : "2x",
+      "size" : "129x129",
+      "subtype" : "49mm"
+    },
     {
       "filename" : "1024.png",
       "idiom" : "watch-marketing",
       "scale" : "1x",
       "size" : "1024x1024"
-    },
-    {
-      "filename" : "16.png",
-      "idiom" : "mac",
-      "scale" : "1x",
-      "size" : "16x16"
-    },
-    {
-      "filename" : "32.png",
-      "idiom" : "mac",
-      "scale" : "2x",
-      "size" : "16x16"
-    },
-    {
-      "filename" : "32.png",
-      "idiom" : "mac",
-      "scale" : "1x",
-      "size" : "32x32"
-    },
-    {
-      "filename" : "64.png",
-      "idiom" : "mac",
-      "scale" : "2x",
-      "size" : "32x32"
-    },
-    {
-      "filename" : "128.png",
-      "idiom" : "mac",
-      "scale" : "1x",
-      "size" : "128x128"
-    },
-    {
-      "filename" : "256.png",
-      "idiom" : "mac",
-      "scale" : "2x",
-      "size" : "128x128"
-    },
-    {
-      "filename" : "256.png",
-      "idiom" : "mac",
-      "scale" : "1x",
-      "size" : "256x256"
-    },
-    {
-      "filename" : "512.png",
-      "idiom" : "mac",
-      "scale" : "2x",
-      "size" : "256x256"
-    },
-    {
-      "filename" : "512.png",
-      "idiom" : "mac",
-      "scale" : "1x",
-      "size" : "512x512"
-    },
-    {
-      "filename" : "1024.png",
-      "idiom" : "mac",
-      "scale" : "2x",
-      "size" : "512x512"
     }
   ],
   "info" : {

secant/Resources/Assets.xcassets/Backgrounds/callout1.imageset/Contents.json

@@ -1,23 +1,25 @@
 {
   "images" : [
     {
-      "filename" : "callout1.jpg",
+      "filename" : "ua_welcome_lighttheme.pdf",
-      "idiom" : "universal",
+      "idiom" : "universal"
-      "scale" : "1x"
     },
     {
-      "filename" : "callout1-1.jpg",
+      "appearances" : [
-      "idiom" : "universal",
+        {
-      "scale" : "2x"
+          "appearance" : "luminosity",
-    },
+          "value" : "dark"
-    {
+        }
-      "filename" : "callout1-2.jpg",
+      ],
-      "idiom" : "universal",
+      "filename" : "ua_welcome_darktheme.pdf",
-      "scale" : "3x"
+      "idiom" : "universal"
     }
   ],
   "info" : {
     "author" : "xcode",
     "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true
   }
 }

secant/Resources/Assets.xcassets/Backgrounds/callout2.imageset/Contents.json

@@ -1,23 +1,25 @@
 {
   "images" : [
     {
-      "filename" : "callout2.jpg",
+      "filename" : "illus_ua_lighttheme.pdf",
-      "idiom" : "universal",
+      "idiom" : "universal"
-      "scale" : "1x"
     },
     {
-      "filename" : "callout2-1.jpg",
+      "appearances" : [
-      "idiom" : "universal",
+        {
-      "scale" : "2x"
+          "appearance" : "luminosity",
-    },
+          "value" : "dark"
-    {
+        }
-      "filename" : "callout2-2.jpg",
+      ],
-      "idiom" : "universal",
+      "filename" : "illus_ua_darktheme.pdf",
-      "scale" : "3x"
+      "idiom" : "universal"
     }
   ],
   "info" : {
     "author" : "xcode",
     "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true
   }
 }

secant/Resources/Assets.xcassets/Backgrounds/callout3.imageset/Contents.json

@@ -1,23 +1,25 @@
 {
   "images" : [
     {
-      "filename" : "callout3.jpg",
+      "filename" : "illus_future_lighttheme.pdf",
-      "idiom" : "universal",
+      "idiom" : "universal"
-      "scale" : "1x"
     },
     {
-      "filename" : "callout3-1.jpg",
+      "appearances" : [
-      "idiom" : "universal",
+        {
-      "scale" : "2x"
+          "appearance" : "luminosity",
-    },
+          "value" : "dark"
-    {
+        }
-      "filename" : "callout3-2.jpg",
+      ],
-      "idiom" : "universal",
+      "filename" : "illus_future_darktheme.pdf",
-      "scale" : "3x"
+      "idiom" : "universal"
     }
   ],
   "info" : {
     "author" : "xcode",
     "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true
   }
 }

secant/Resources/Assets.xcassets/Backgrounds/callout4.imageset/Contents.json

@@ -1,23 +1,25 @@
 {
   "images" : [
     {
-      "filename" : "finalcallout.jpg",
+      "filename" : "illus_done_lighttheme.pdf",
-      "idiom" : "universal",
+      "idiom" : "universal"
-      "scale" : "1x"
     },
     {
-      "filename" : "finalcallout-1.jpg",
+      "appearances" : [
-      "idiom" : "universal",
+        {
-      "scale" : "2x"
+          "appearance" : "luminosity",
-    },
+          "value" : "dark"
-    {
+        }
-      "filename" : "finalcallout-2.jpg",
+      ],
-      "idiom" : "universal",
+      "filename" : "illus_done_darktheme.pdf",
-      "scale" : "3x"
+      "idiom" : "universal"
     }
   ],
   "info" : {
     "author" : "xcode",
     "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true
   }
 }

secant/Resources/Localizable.strings

@@ -3,17 +3,17 @@
 "welcomeScreen.subtitle" = "Just Loading, one sec";
 
 // MARK: - Onboarding Flow
-"onboarding.step1.title" = "Shielded by Default";
+"onboarding.step1.title" = "Welcome!";
-"onboarding.step1.description" = "Tired of worrying about which wallet you used last? US TOO! Now you don't have to, as all funds will automatically be moved to your shielded wallet (and migrated for you).";
+"onboarding.step1.description" = "As a privacy focused wallet, we shield by default. Your wallet uses the shielded address for sending and moves transparent funds to that address automatically.\n\nIn other words, the 'privacy-please' sign is on the knob.";
 
 "onboarding.step2.title" = "Unified Addresses";
-"onboarding.step2.description" = "Tired of worrying about which wallet you used last? US TOO! Now you don't have to, as all funds will automatically be moved to your shielded wallet (and migrated for you).";
+"onboarding.step2.description" = "You now have a unified address that includes and up-to-date shielded address for legacy systems.\n\nThis makes your wallet friendlier, and gives you and address that you won't have to upgrade again.";
 
 "onboarding.step3.title" = "And so much more...";
-"onboarding.step3.description" = "Faster reverse syncing (yes it's a thing).  Liberated Payments, Social Payments, Address Books, in-line ZEC requests, wrapped Bitcoin, fractionalize NFTs, you providing liquidity for anything you want, getting that Defi, and going to Mexico.";
+"onboarding.step3.description" = "Due to Zcash's increased popularity, we are optimizing our syncing schemes to be faster and more efficient!\n\nThe future is fast!";
 
-"onboarding.step4.title" = "Ready for the Future";
+"onboarding.step4.title" = "Let's get started";
-"onboarding.step4.description" = "Lets get you set up!";
+"onboarding.step4.description" = "Choose between creating a new wallet and importing and existing Secret Recovery Phrase";
 
 "onboarding.button.newWallet" = "Create New Wallet";
 "onboarding.button.importWallet" = "Import an Existing Wallet";