Update onboarding carousel and share usage screen (#21742)

src/js/worklets/onboarding_carousel.js

@@ -1,8 +1,8 @@
 import { useDerivedValue, withTiming, Easing } from 'react-native-reanimated';
 
 const slideAnimationDuration = 300;
-const totalPages = 4;
-const pageSize = 100 / totalPages;
+const totalPages = 3;
+const pageSize = 25;
 
 const easeOut = {
   duration: slideAnimationDuration,
@@ -13,7 +13,7 @@ const easeOut = {
 export function dynamicProgressBarWidth(staticProgressBarWidth, progress) {
   return useDerivedValue(function () {
     'worklet';
-    return (staticProgressBarWidth * (progress.value || 0)) / 100;
+    return (staticProgressBarWidth * (progress.value || 0)) / 75;
   });
 }
 
@@ -26,6 +26,6 @@ export function carouselLeftPosition(windowWidth, progress, isDragging, dragAmou
     const baseOffset = (Math.floor(progressValue / pageSize) % totalPages) * windowWidth;
     const adjustedOffset = baseOffset === 0 && dragAmountValue > 0 ? baseOffset : -baseOffset + dragAmountValue;
 
-    return isDragging.value ? withTiming(adjustedOffset, easeOut) : withTiming(-baseOffset, easeOut);
+    return isDragging.value ? adjustedOffset : withTiming(-baseOffset, easeOut);
   });
 }

src/status_im/common/resources.cljs

@@ -3,6 +3,7 @@
 (def ui
   {:add-new-contact               (js/require "../resources/images/ui2/add-contact.png")
    :biometrics                    (js/require "../resources/images/ui2/biometrics.png")
+   :chat-privately-with-friends   (js/require "../resources/images/ui2/chat-privately-with-friends.png")
    :desktop-how-to-pair-sign-in   (js/require "../resources/images/ui2/desktop-how-to-pair-sign-in.png")
    :desktop-how-to-pair-logged-in (js/require
                                    "../resources/images/ui2/desktop-how-to-pair-logged-in.png")
@@ -19,7 +20,6 @@
    :use-keycard                   (js/require "../resources/images/ui2/keycard.png")
    :use-recovery-phrase           (js/require "../resources/images/ui2/recovery-phrase.png")
    :check-your-keycard            (js/require "../resources/images/ui2/check-your-keycard.png")
-   :onboarding-illustration       (js/require "../resources/images/ui2/onboarding_illustration.png")
    :qr-code                       (js/require "../resources/images/ui2/qr-code.png")
    :keycard-logo                  (js/require "../resources/images/ui2/keycard-logo.png")
    :keycard-watermark             (js/require "../resources/images/ui2/keycard-watermark.png")
@@ -35,7 +35,9 @@
    :notifications                 (js/require "../resources/images/ui2/notifications.png")
    :nfc-prompt                    (js/require "../resources/images/ui2/nfc-prompt.png")
    :nfc-success                   (js/require "../resources/images/ui2/nfc-success.png")
+   :own-buy-and-swap-your-crypto  (js/require "../resources/images/ui2/own-buy-and-swap-your-crypto.png")
    :preparing-status              (js/require "../resources/images/ui2/preparing-status.png")
+   :store-your-assets-on-keycard  (js/require "../resources/images/ui2/store-your-assets-on-keycard.png")
    :syncing-devices               (js/require "../resources/images/ui2/syncing_devices.png")
    :syncing-wrong                 (js/require "../resources/images/ui2/syncing_wrong.png")
    :buy                           (js/require "../resources/images/ui2/buy.png")

src/status_im/contexts/onboarding/common/background/style.cljs

@@ -8,6 +8,12 @@
    :flex             1
    :overflow         :hidden})
 
+(defn background-image-container
+  [width]
+  {:flex           1
+   :flex-direction :row
+   :width          width})
+
 (def background-blur-overlay
   {:position         :absolute
    :left             0

src/status_im/contexts/onboarding/common/background/view.cljs

@@ -14,20 +14,23 @@
 (def header-text
   [{:text     (i18n/label :t/own-your-crypto)
     :sub-text (i18n/label :t/use-the-multichain-wallet)}
-   {:text     (i18n/label :t/store-your-asets-on-keycard)
-    :sub-text (i18n/label :t/be-safe-with-secure-cold-wallet)}
    {:text     (i18n/label :t/chat-with-friends)
     :sub-text (i18n/label :t/with-full-encryption)}
-   {:text     (i18n/label :t/discover-web3)
-    :sub-text (i18n/label :t/explore-the-decentralized-web)}])
+   {:text     (i18n/label :t/store-your-asets-on-keycard)
+    :sub-text (i18n/label :t/be-safe-with-secure-cold-wallet)}])
 
 (defn background-image
-  [image-view-width]
+  [window-width]
+  [rn/view {:style (style/background-image-container (* window-width 3))}
    [rn/image
-   {:resize-mode :stretch
-    :style       {:flex  1
-                  :width image-view-width}
-    :source      (resources/get-image :onboarding-illustration)}])
+    {:source (resources/get-image :own-buy-and-swap-your-crypto)
+     :style  {:align-self :center :width window-width}}]
+   [rn/image
+    {:source (resources/get-image :chat-privately-with-friends)
+     :style  {:align-self :center :width window-width}}]
+   [rn/image
+    {:source (resources/get-image :store-your-assets-on-keycard)
+     :style  {:align-self :center :width window-width}}]])
 
 (defonce progress (atom nil))
 (defonce paused? (atom nil))
@@ -61,7 +64,7 @@
        :drag-amount       drag-amount
        :header-background true
        :gesture           :swipeable
-       :background        [background-image (* 4 window-width)]}]
+       :background        [background-image window-width]}]
      (when dark-overlay?
        [quo/blur
         {:style         style/background-blur-overlay

src/status_im/contexts/onboarding/common/carousel/animation.cljs

@@ -8,9 +8,9 @@
 
 (def ^:const progress-bar-animation-delay 300)
 (def ^:const progress-bar-animation-duration 4000)
-(def ^:const initial-division-quotient 5)
+(def ^:const initial-division-quotient 4)
 (def ^:const progress-threshold 25)
-(def ^:const drag-limit 100)
+(def ^:const drag-limit 75)
 
 (defn slide-animation
   [progress-percentage & [duration]]
@@ -50,7 +50,6 @@
         (animate-progress-value (animation-value q 1))
         (animate-progress-value (animation-value q 2))
         (animate-progress-value (animation-value q 3))
-        (animate-progress-value (animation-value q 4))
         (animate-progress-value (calculate-remainder next-progress drag-limit)))
        -1)
       paused?))))

src/status_im/contexts/onboarding/common/carousel/view.cljs

@@ -23,10 +23,10 @@
 
 (defn content-view
   [{:keys [window-width status-bar-height index header-text header-background]} content]
-  (let [content-width (* 4 window-width)]
+  (let [content-width (* 3 window-width)]
     [rn/view {:style {:flex 1}}
      [rn/view {:style (style/header-container status-bar-height content-width index header-background)}
-      (for [index (range 4)]
+      (for [index (range 3)]
         ^{:key index}
         [header-text-view index window-width header-text])]
      (when content content)]))
@@ -37,7 +37,6 @@
    {:style (style/progress-bar progress-bar-width)}
    [rn/view {:style (style/progress-bar-item static? false)}]
    [rn/view {:style (style/progress-bar-item static? false)}]
-   [rn/view {:style (style/progress-bar-item static? false)}]
    [rn/view {:style (style/progress-bar-item static? true)}]])
 
 (defn f-dynamic-progress-bar
@@ -65,7 +64,7 @@
           nil)]
     [rn/view {:style {:flex 1}}
      [gesture/gesture-detector {:gesture identified-gesture}
-      [container-view {:style (style/carousel-container carousel-left animate? (* 4 window-width))}
+      [container-view {:style (style/carousel-container carousel-left animate? (* 3 window-width))}
        (for [index (range 1)]
          ^{:key index}
          [content-view

translations/en.json

@@ -399,7 +399,7 @@
   "code-snippet": "Code snippet",
   "collectibles": "Collectibles",
   "collectibles-leak-metadata": "You can display your NFTs here. If you do, you will share your wallet and IP address",
-  "collecting-usage-data": "Collecting usage data helps us improve Status.",
+  "collecting-usage-data": "Share basic usage and diagnostic data to improve Status. Opt out anytime in Settings.",
   "colour": "Colour",
   "command-button-send": "Send",
   "common-names": "Common names",
@@ -1886,7 +1886,7 @@
   "outgoing-transaction": "Outgoing transaction",
   "overview": "Overview",
   "own-keycard": "Already own a Keycard?",
-  "own-your-crypto": "Own your crypto",
+  "own-your-crypto": "Own, buy and swap your crypto",
   "owner": "Owner",
   "page-camera-request-blocked": "camera requests blocked. To enable camera requests go to Settings",
   "page-would-like-to-use-camera": "would like to use your camera",
@@ -2733,7 +2733,7 @@
   "use-keycard-subtitle": "Keys will be stored on your Keycard",
   "use-photo": "Use Photo",
   "use-recovery-phrase": "Use recovery phrase",
-  "use-the-multichain-wallet": "Use the leading multi-chain self-custodial wallet",
+  "use-the-multichain-wallet": "Enjoy your multi-chain self-custodial wallet",
   "use-valid-contact-code": "Please enter or scan a valid chat key or username",
   "user-blocked": "{{username}} blocked",
   "user-deleted-a-message": "{{user}} deleted a message",