diff --git a/resources/images/ui2/ethereum_address@2x.png b/resources/images/ui2/ethereum_address@2x.png new file mode 100644 index 0000000000..611dfdd1a3 Binary files /dev/null and b/resources/images/ui2/ethereum_address@2x.png differ diff --git a/resources/images/ui2/ethereum_address@3x.png b/resources/images/ui2/ethereum_address@3x.png new file mode 100644 index 0000000000..de9de1513d Binary files /dev/null and b/resources/images/ui2/ethereum_address@3x.png differ diff --git a/resources/images/ui2/generate_keys@3x.png b/resources/images/ui2/generate_keys@3x.png new file mode 100644 index 0000000000..803ec43f7f Binary files /dev/null and b/resources/images/ui2/generate_keys@3x.png differ diff --git a/resources/images/ui2/keycard@2x.png b/resources/images/ui2/keycard@2x.png new file mode 100644 index 0000000000..9c9b278689 Binary files /dev/null and b/resources/images/ui2/keycard@2x.png differ diff --git a/resources/images/ui2/keycard@3x.png b/resources/images/ui2/keycard@3x.png new file mode 100644 index 0000000000..368b202860 Binary files /dev/null and b/resources/images/ui2/keycard@3x.png differ diff --git a/resources/images/ui2/onboarding_blur_bg@2x.png b/resources/images/ui2/onboarding_blur_bg@2x.png new file mode 100644 index 0000000000..9d59f544d4 Binary files /dev/null and b/resources/images/ui2/onboarding_blur_bg@2x.png differ diff --git a/resources/images/ui2/onboarding_blur_bg@3x.png b/resources/images/ui2/onboarding_blur_bg@3x.png new file mode 100644 index 0000000000..8103e36f34 Binary files /dev/null and b/resources/images/ui2/onboarding_blur_bg@3x.png differ diff --git a/src/quo2/components/navigation/page_nav.cljs b/src/quo2/components/navigation/page_nav.cljs index 9f786d0e2f..ecfaa2cc6e 100644 --- a/src/quo2/components/navigation/page_nav.cljs +++ b/src/quo2/components/navigation/page_nav.cljs @@ -30,7 +30,7 @@ {:no-color true}))) (defn left-section-view - [{:keys [on-press icon accessibility-label type] :or {type :grey}} + [{:keys [on-press icon accessibility-label type icon-override-theme] :or {type :grey}} put-middle-section-on-left?] [rn/view {:style (when put-middle-section-on-left? {:margin-right 5})} [button/button @@ -38,7 +38,8 @@ :icon true :type type :size 32 - :accessibility-label accessibility-label} + :accessibility-label accessibility-label + :override-theme icon-override-theme} icon]]) (defn- mid-section-comp @@ -148,10 +149,20 @@ :flex-direction :row :justify-content :flex-end)} (let [last-icon-index (-> right-section-buttons count dec)] - (map-indexed (fn [index {:keys [icon on-press type style] :or {type :grey}}] + (map-indexed (fn [index + {:keys [icon on-press type style icon-override-theme] + :or {type :grey}}] ^{:key index} - [rn/view {:style (merge {:margin-right (if (not= index last-icon-index) 8 0)} style)} - [button/button {:on-press on-press :icon true :type type :size 32} + [rn/view + {:style (assoc style + :margin-right + (if (= index last-icon-index) 0 8))} + [button/button + {:on-press on-press + :icon true + :type type + :size 32 + :override-theme icon-override-theme} icon]]) right-section-buttons))]) @@ -179,16 +190,14 @@ :left-section {:type button-type :on-press event - :icon icon - :icon-color color - :icon-background-color color + :icon icon + :icon-override-theme :light/:dark } :right-section-buttons vector of {:type button-type :on-press event :icon icon - :icon-color color - :icon-background-color color + :icon-override-theme :light/:dark } } " diff --git a/src/quo2/components/onboarding/small_option_card/style.cljs b/src/quo2/components/onboarding/small_option_card/style.cljs index d7889a435e..389ad45bac 100644 --- a/src/quo2/components/onboarding/small_option_card/style.cljs +++ b/src/quo2/components/onboarding/small_option_card/style.cljs @@ -41,12 +41,10 @@ (def touchable-overlay {:border-radius 16}) -(defn card-container - [main-variant?] - (when main-variant? {:height 343})) - (defn card [main-variant?] {:background-color colors/white-opa-5 :border-radius 16 :height (if main-variant? 335 56)}) + +(def main-variant-extra-space {:height 8}) diff --git a/src/quo2/components/onboarding/small_option_card/view.cljs b/src/quo2/components/onboarding/small_option_card/view.cljs index a0c768847c..a3fe8416fe 100644 --- a/src/quo2/components/onboarding/small_option_card/view.cljs +++ b/src/quo2/components/onboarding/small_option_card/view.cljs @@ -48,19 +48,22 @@ :source image}]]) (defn small-option-card + "Variants: `:main` or `:icon`" [{:keys [variant title subtitle image on-press] :or {variant :main}}] (let [main-variant? (= variant :main) card-component (if main-variant? main-variant icon-variant)] - [rn/touchable-highlight - {:accessibility-label :small-option-card - :style style/touchable-overlay - :active-opacity 1 - :underlay-color colors/white-opa-5 - :on-press on-press} - [rn/view {:style (style/card-container main-variant?)} + [rn/view + [rn/touchable-highlight + {:accessibility-label :small-option-card + :style style/touchable-overlay + :active-opacity 1 + :underlay-color colors/white-opa-5 + :on-press on-press} [rn/view {:style (style/card main-variant?)} [card-component {:title title :subtitle subtitle - :image image}]]]])) + :image image}]]] + (when main-variant? + [rn/view {:style style/main-variant-extra-space}])])) diff --git a/src/status_im2/common/resources.cljs b/src/status_im2/common/resources.cljs index 894e24708e..c82e259c87 100644 --- a/src/status_im2/common/resources.cljs +++ b/src/status_im2/common/resources.cljs @@ -1,16 +1,20 @@ (ns status-im2.common.resources) (def ui - {:add-new-contact (js/require "../resources/images/ui2/add-contact.png") - :intro-1 (js/require "../resources/images/ui2/intro-1.png") - :intro-2 (js/require "../resources/images/ui2/intro-2.png") - :intro-3 (js/require "../resources/images/ui2/intro-3.png") - :intro-4 (js/require "../resources/images/ui2/intro-4.png") - :lifestyle (js/require "../resources/images/ui2/lifestyle.png") - :music (js/require "../resources/images/ui2/music.png") - :podcasts (js/require "../resources/images/ui2/podcasts.png") - :sync-device (js/require "../resources/images/ui2/sync-new-device-cover-background.png") - :onboarding-bg-1 (js/require "../resources/images/ui2/onboarding-bg-1.png")}) + {:add-new-contact (js/require "../resources/images/ui2/add-contact.png") + :intro-1 (js/require "../resources/images/ui2/intro-1.png") + :intro-2 (js/require "../resources/images/ui2/intro-2.png") + :intro-3 (js/require "../resources/images/ui2/intro-3.png") + :intro-4 (js/require "../resources/images/ui2/intro-4.png") + :lifestyle (js/require "../resources/images/ui2/lifestyle.png") + :music (js/require "../resources/images/ui2/music.png") + :podcasts (js/require "../resources/images/ui2/podcasts.png") + :sync-device (js/require "../resources/images/ui2/sync-new-device-cover-background.png") + :onboarding-bg-1 (js/require "../resources/images/ui2/onboarding-bg-1.png") + :onboarding-blur-bg (js/require "../resources/images/ui2/onboarding_blur_bg.png") + :generate-keys (js/require "../resources/images/ui2/generate_keys.png") + :ethereum-address (js/require "../resources/images/ui2/ethereum_address.png") + :use-keycard (js/require "../resources/images/ui2/keycard.png")}) (def mock-images {:coinbase (js/require "../resources/images/mock2/coinbase.png") diff --git a/src/status_im2/contexts/onboarding/common/intro/view.cljs b/src/status_im2/contexts/onboarding/common/intro/view.cljs index b0c46eac34..af9de31de9 100644 --- a/src/status_im2/contexts/onboarding/common/intro/view.cljs +++ b/src/status_im2/contexts/onboarding/common/intro/view.cljs @@ -38,10 +38,12 @@ [quo/text {:style style/carousel-text :weight :semi-bold - :size :heading-2} (get-in carousels [index :text])] + :size :heading-2} + (get-in carousels [index :text])] [quo/text {:style style/carousel-text - :size :paragraph-1} (get-in carousels [index :sub-text])]]) + :size :paragraph-1} + (get-in carousels [index :sub-text])]]) (defn set-index [old-index] @@ -62,12 +64,12 @@ :source (get-in carousels [@carousel-index :image])}] [quo/drawer-buttons {:top-card {:on-press (fn [] - (rf/dispatch [:init-root :onboarding]) + (rf/dispatch [:navigate-to :new-to-status]) (rf/dispatch [:hide-terms-of-services-opt-in-screen])) :heading (i18n/label :t/sign-in) :accessibility-label :already-use-status-button} :bottom-card {:on-press (fn [] - (rf/dispatch [:init-root :onboarding]) + (rf/dispatch [:navigate-to :new-to-status]) (rf/dispatch [:hide-terms-of-services-opt-in-screen])) :heading (i18n/label :t/im-new-to-status) :accessibility-label :new-to-status-button}} @@ -85,4 +87,5 @@ :style style/highlighted-text :weight :semi-bold} (i18n/label :t/terms-of-service)]]]] - (finally (js/clearInterval interval-id)))) + (finally + (js/clearInterval interval-id)))) diff --git a/src/status_im2/contexts/onboarding/new_to_status/style.cljs b/src/status_im2/contexts/onboarding/new_to_status/style.cljs new file mode 100644 index 0000000000..c418c93672 --- /dev/null +++ b/src/status_im2/contexts/onboarding/new_to_status/style.cljs @@ -0,0 +1,43 @@ +(ns status-im2.contexts.onboarding.new-to-status.style + (:require [quo2.foundations.colors :as colors] + [react-native.platform :as platform])) + +(def full-screen {:flex 1}) + +(def image-background + {:height "100%" + :width "100%"}) + +(def layer-background + {:padding-top (if platform/ios? 44 0) + :position :absolute + :top 0 + :bottom 0 + :left 0 + :right 0 + :background-color colors/neutral-80-opa-80-blur}) + +(def navigation-bar {:height 56}) + +(def options-container + {:padding-top 12 + :padding-horizontal 20}) + +(def title + {:color colors/white + :margin-bottom 20}) + +(def subtitle-container + {:height 42 + :padding-top 16 + :padding-bottom 8}) + +(def subtitle + {:color colors/white-opa-70 + :margin-bottom 20}) + +(def suboptions + {:padding-top 4 + :padding-bottom 8}) + +(def space-between-suboptions {:height 12}) diff --git a/src/status_im2/contexts/onboarding/new_to_status/view.cljs b/src/status_im2/contexts/onboarding/new_to_status/view.cljs new file mode 100644 index 0000000000..e1b8ff1a62 --- /dev/null +++ b/src/status_im2/contexts/onboarding/new_to_status/view.cljs @@ -0,0 +1,77 @@ +(ns status-im2.contexts.onboarding.new-to-status.view + (:require [quo2.core :as quo] + [react-native.core :as rn] + [status-im.keycard.recovery :as keycard] + [status-im.multiaccounts.recover.core :as multiaccounts.recover] + [status-im2.common.resources :as resources] + [status-im2.contexts.onboarding.new-to-status.style :as style] + [utils.i18n :as i18n] + [utils.re-frame :as rf])) + +(defn background-image + [] + [rn/image + {:style style/image-background + :blur-radius 13 + :source (resources/get-image :onboarding-blur-bg)}]) + +(defn navigation-bar + [] + [rn/view {:style style/navigation-bar} + [quo/page-nav + {:align-mid? true + :mid-section {:type :text-only :main-text ""} + :left-section {:type :blur-bg + :icon :i/arrow-left + :icon-override-theme :dark + :on-press #(rf/dispatch [:navigate-back])} + :right-section-buttons [{:type :blur-bg + :icon :i/info + :icon-override-theme :dark + :on-press #(js/alert "Pending")}]}]]) + +(defn sign-in-options + [] + [rn/view {:style style/options-container} + [quo/text + {:style style/title + :size :heading-1 + :weight :semi-bold} + (i18n/label :t/new-to-status)] + + [quo/small-option-card + {:variant :main + :title (i18n/label :t/generate-keys) + :subtitle (i18n/label :t/generate-keys-subtitle) + :image (resources/get-image :generate-keys) + :on-press #(rf/dispatch [:generate-and-derive-addresses])}] + + [rn/view {:style style/subtitle-container} + [quo/text + {:style style/subtitle + :size :paragraph-2 + :weight :medium} + (i18n/label :t/experienced-web3)]] + + [rn/view {:style style/suboptions} + [quo/small-option-card + {:variant :icon + :title (i18n/label :t/use-recovery-phrase) + :subtitle (i18n/label :t/use-recovery-phrase-subtitle) + :image (resources/get-image :ethereum-address) + :on-press #(rf/dispatch [::multiaccounts.recover/enter-phrase-pressed])}] + [rn/view {:style style/space-between-suboptions}] + [quo/small-option-card + {:variant :icon + :title (i18n/label :t/use-keycard) + :subtitle (i18n/label :t/use-keycard-subtitle) + :image (resources/get-image :use-keycard) + :on-press #(rf/dispatch [::keycard/recover-with-keycard-pressed])}]]]) + +(defn new-to-status + [] + [rn/view {:style style/full-screen} + [background-image] + [rn/view {:style style/layer-background} + [navigation-bar] + [sign-in-options]]]) diff --git a/src/status_im2/navigation/roots.cljs b/src/status_im2/navigation/roots.cljs index a8507a2f1e..eb048a6515 100644 --- a/src/status_im2/navigation/roots.cljs +++ b/src/status_im2/navigation/roots.cljs @@ -141,14 +141,12 @@ (merge (old-roots) ;;INTRO (onboarding carousel) {:intro-stack - {:root {:stack {:id :intro - :children [{:component {:name :intro - :id :intro - :options - {:statusBar (merge - (status-bar-options) - {:style :light}) - :topBar {:visible false}}}}]}}}} + {:root + {:stack {:id :intro + :children [{:component {:name :intro + :id :intro + :options {:statusBar {:style :light} + :topBar {:visible false}}}}]}}}} {:shell-stack {:root {:stack {:id :shell-stack diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index 7ba27a0158..800e91d1a8 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -1,22 +1,23 @@ (ns status-im2.navigation.screens (:require [utils.i18n :as i18n] ;; TODO remove when not used anymore + [quo2.foundations.colors :as colors] + [react-native.platform :as platform] [status-im.ui.screens.screens :as old-screens] - [status-im2.contexts.onboarding.common.intro.view :as intro] + [status-im2.config :as config] [status-im2.contexts.activity-center.view :as activity-center] - [status-im2.contexts.chat.messages.view :as chat] [status-im2.contexts.add-new-contact.views :as add-new-contact] + [status-im2.contexts.chat.lightbox.view :as lightbox] + [status-im2.contexts.chat.messages.view :as chat] + [status-im2.contexts.chat.photo-selector.album-selector.view :as album-selector] + [status-im2.contexts.chat.photo-selector.view :as photo-selector] [status-im2.contexts.communities.discover.view :as communities.discover] [status-im2.contexts.communities.overview.view :as communities.overview] + [status-im2.contexts.onboarding.common.intro.view :as intro] + [status-im2.contexts.onboarding.new-to-status.view :as new-to-status] + [status-im2.contexts.onboarding.profiles.view :as profiles] [status-im2.contexts.quo-preview.main :as quo.preview] [status-im2.contexts.shell.view :as shell] - [status-im2.contexts.syncing.view :as settings-syncing] - [status-im2.contexts.chat.lightbox.view :as lightbox] - [status-im2.config :as config] - [quo2.foundations.colors :as colors] - [status-im2.contexts.chat.photo-selector.album-selector.view :as album-selector] - [react-native.platform :as platform] - [status-im2.contexts.chat.photo-selector.view :as photo-selector] - [status-im2.contexts.onboarding.profiles.view :as profiles])) + [status-im2.contexts.syncing.view :as settings-syncing])) (def components []) @@ -103,7 +104,15 @@ ;; Onboarding {:name :profiles :insets {:top false} - :component profiles/views}] + :component profiles/views} + + ;; Onboarding - new to Status + {:name :new-to-status + :options {:statusBar {:style :light} + :topBar {:visible false} + :navigationBar {:backgroundColor colors/black}} + :insets {:top false} + :component new-to-status/new-to-status}] (when config/quo-preview-enabled? quo.preview/screens) diff --git a/translations/en.json b/translations/en.json index 6d96771313..c5ca90094e 100644 --- a/translations/en.json +++ b/translations/en.json @@ -938,6 +938,15 @@ "name": "Name", "name-of-token": "The name of your token", "need-help": "Need help?", + "new-to-status": "I'm new to Status", + "generate-keys": "Generate keys", + "generate-keys-subtitle": "Your new self-sovereign identity in Status", + "experienced-web3": "Experienced in Web3?", + "use-recovery-phrase": "Use recovery phrase", + "use-recovery-phrase-subtitle": "If you already have an Ethereum address", + "use-keycard": "Use Keycard", + "use-keycard-subtitle": "Keys will be stored on your Keycard", + "glossary": "Glossary", "account-title": "Account", "account-content": "You can compare accounts in Status to bank accounts. Like a bank account, an account typically has an address and a balance; You use this account to transact on Ethereum. You can have multiple accounts in your wallet. All accessed by unlocking Status.",