diff --git a/resources/images/ui2/chat-privately-with-friends@2x.png b/resources/images/ui2/chat-privately-with-friends@2x.png new file mode 100644 index 0000000000..f6f816e080 Binary files /dev/null and b/resources/images/ui2/chat-privately-with-friends@2x.png differ diff --git a/resources/images/ui2/chat-privately-with-friends@3x.png b/resources/images/ui2/chat-privately-with-friends@3x.png new file mode 100644 index 0000000000..118c7d0859 Binary files /dev/null and b/resources/images/ui2/chat-privately-with-friends@3x.png differ diff --git a/resources/images/ui2/onboarding_illustration@2x.png b/resources/images/ui2/onboarding_illustration@2x.png deleted file mode 100644 index 366e6e8489..0000000000 Binary files a/resources/images/ui2/onboarding_illustration@2x.png and /dev/null differ diff --git a/resources/images/ui2/onboarding_illustration@3x.png b/resources/images/ui2/onboarding_illustration@3x.png deleted file mode 100644 index f670d77c60..0000000000 Binary files a/resources/images/ui2/onboarding_illustration@3x.png and /dev/null differ diff --git a/resources/images/ui2/own-buy-and-swap-your-crypto@2x.png b/resources/images/ui2/own-buy-and-swap-your-crypto@2x.png new file mode 100644 index 0000000000..e6b288e86e Binary files /dev/null and b/resources/images/ui2/own-buy-and-swap-your-crypto@2x.png differ diff --git a/resources/images/ui2/own-buy-and-swap-your-crypto@3x.png b/resources/images/ui2/own-buy-and-swap-your-crypto@3x.png new file mode 100644 index 0000000000..63dbc96ad6 Binary files /dev/null and b/resources/images/ui2/own-buy-and-swap-your-crypto@3x.png differ diff --git a/resources/images/ui2/store-your-assets-on-keycard@2x.png b/resources/images/ui2/store-your-assets-on-keycard@2x.png new file mode 100644 index 0000000000..53ddaa17b1 Binary files /dev/null and b/resources/images/ui2/store-your-assets-on-keycard@2x.png differ diff --git a/resources/images/ui2/store-your-assets-on-keycard@3x.png b/resources/images/ui2/store-your-assets-on-keycard@3x.png new file mode 100644 index 0000000000..cc8b71d481 Binary files /dev/null and b/resources/images/ui2/store-your-assets-on-keycard@3x.png differ diff --git a/src/js/worklets/onboarding_carousel.js b/src/js/worklets/onboarding_carousel.js index 5da5ce8a9e..84647d0a5d 100644 --- a/src/js/worklets/onboarding_carousel.js +++ b/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); }); } diff --git a/src/status_im/common/resources.cljs b/src/status_im/common/resources.cljs index 6144811f31..05628ab48d 100644 --- a/src/status_im/common/resources.cljs +++ b/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") diff --git a/src/status_im/contexts/onboarding/common/background/style.cljs b/src/status_im/contexts/onboarding/common/background/style.cljs index 024a56022c..c2dde18187 100644 --- a/src/status_im/contexts/onboarding/common/background/style.cljs +++ b/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 diff --git a/src/status_im/contexts/onboarding/common/background/view.cljs b/src/status_im/contexts/onboarding/common/background/view.cljs index 11358803ba..32be237a08 100644 --- a/src/status_im/contexts/onboarding/common/background/view.cljs +++ b/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] - [rn/image - {:resize-mode :stretch - :style {:flex 1 - :width image-view-width} - :source (resources/get-image :onboarding-illustration)}]) + [window-width] + [rn/view {:style (style/background-image-container (* window-width 3))} + [rn/image + {: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 diff --git a/src/status_im/contexts/onboarding/common/carousel/animation.cljs b/src/status_im/contexts/onboarding/common/carousel/animation.cljs index d8f726f5fe..8ea3fb05a8 100644 --- a/src/status_im/contexts/onboarding/common/carousel/animation.cljs +++ b/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?)))) diff --git a/src/status_im/contexts/onboarding/common/carousel/view.cljs b/src/status_im/contexts/onboarding/common/carousel/view.cljs index a47d2ace46..e93234f0b0 100644 --- a/src/status_im/contexts/onboarding/common/carousel/view.cljs +++ b/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 diff --git a/translations/en.json b/translations/en.json index 95cc8df645..f854a882d5 100644 --- a/translations/en.json +++ b/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",