status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: simplification of onboarding intro view 

Signed-off-by: yqrashawn <namy.19@gmail.com>
This commit is contained in:
yqrashawn 2024-06-06 15:31:08 +08:00
parent 96d98c62ed
commit d39c26c075
No known key found for this signature in database
GPG Key ID: E394C5D9A8E535A6
14 changed files with 277 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/quo/components/drawers/bottom_actions/style.cljs
View File

@ -20,8 +20,9 @@
{:background-color (when-not (or scroll? blur?)
(colors/theme-colors colors/white colors/neutral-95 theme))})
(def buttons-container
{:flex-direction :row
(defn buttons-container
[actions]
{:flex-direction (if (= actions :two-vertical-actions) :column :row)
:justify-content :space-around
:padding-vertical 12
:gap 12

17
src/quo/components/drawers/bottom_actions/view.cljs
View File

@ -17,9 +17,9 @@
[:catn
[:props
[:map {:closed true}
[:actions [:maybe [:enum :one-action :two-actions]]]
[:actions [:maybe [:enum :one-action :two-actions :two-vertical-actions]]]
[:description {:optional true} [:maybe [:enum :top :bottom :top-error]]]
[:description-text {:optional true} [:maybe :string]]
[:description-text {:optional true} [:maybe [:or :string :schema.common/hiccup]]]
[:description-top-text {:optional true} [:maybe :string]]
[:error-message {:optional true} [:maybe :string]]
[:role {:optional true} [:maybe [:enum :admin :member :token-master :owner]]]
@ -72,8 +72,9 @@
:context (i18n/label (keyword "t" role))}
context-tag-props)]])
[rn/view {:style style/buttons-container}
(when (= actions :two-actions)
[rn/view {:style (style/buttons-container actions)}
(when (or (= actions :two-actions)
(= actions :two-vertical-actions))
[button/button
(merge
{:size 40
@ -93,8 +94,10 @@
button-one-props)
button-one-label]]
(when (= description :bottom)
[text/text
{:size :paragraph-2
:style (style/description-bottom scroll? blur? theme)} description-text])]))
(if (string? description-text)
[text/text
{:size :paragraph-2
:style (style/description-bottom scroll? blur? theme)} description-text]
description-text))]))
(def view (schema/instrument #'view-internal ?schema))

6
src/schema/common.cljs
View File

@ -33,6 +33,9 @@
[:fn {:error/message "schema.common/exception should be of type ExceptionInfo"}
(fn [v] (instance? ExceptionInfo v))])
(def ^:private ?hiccup
vector?)
(defn register-schemas
[]
(registry/register ::theme ?theme)
@ -40,4 +43,5 @@
(registry/register ::public-key ?public-key)
(registry/register ::image-source ?image-source)
(registry/register ::rpc-call ?rpc-call)
(registry/register ::exception ?exception))
(registry/register ::exception ?exception)
(registry/register ::hiccup ?hiccup))

13
src/status_im/contexts/onboarding/new_to_status/style.cljs → src/status_im/contexts/onboarding/create_or_sync_profile/style.cljs
View File

@ -1,4 +1,4 @@
(ns status-im.contexts.onboarding.new-to-status.style
(ns status-im.contexts.onboarding.create-or-sync-profile.style
(:require
[quo.foundations.colors :as colors]))
@ -24,15 +24,4 @@
(def subtitle-container
{:margin-top 24})
(def doc-main-content
{:color colors/white
:margin-bottom 4})
(def doc-subtitle
{:margin-top 20
:margin-bottom 4})
(def doc-content
{:color colors/white-opa-70})
(def space-between-suboptions {:height 12})

130
src/status_im/contexts/onboarding/create_or_sync_profile/view.cljs Normal file
View File

@ -0,0 +1,130 @@
(ns status-im.contexts.onboarding.create-or-sync-profile.view
(:require
[quo.core :as quo]
re-frame.db
[react-native.core :as rn]
[react-native.safe-area :as safe-area]
[status-im.common.not-implemented :as not-implemented]
[status-im.common.resources :as resources]
[status-im.config :as config]
[status-im.contexts.onboarding.create-or-sync-profile.style :as style]
[status-im.contexts.onboarding.getting-started-doc.view :as getting-started-doc]
[utils.debounce :as debounce]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
(defn- navigate-to-create-profile
[]
(debounce/throttle-and-dispatch
[:onboarding/navigate-to-create-profile]
1000))
(defn- navigate-to-sign-in-by-syncing
[]
(debounce/throttle-and-dispatch
[:onboarding/navigate-to-sign-in-by-syncing]
1000))
(defn- navigate-to-sign-in-by-seed-phrase
[]
(rf/dispatch [:navigate-to-within-stack
[:screen/onboarding.enter-seed-phrase
:screen/onboarding.new-to-status]]))
(defn- option-card-max-height
[window-height]
(- window-height
(* 2 56) ;; two other list items
(* 2 16) ;; spacing between items
220) ;; extra spacing (top bar)
)
(defn- create-profile-option-card
[window-height]
[quo/small-option-card
{:variant :main
:title (i18n/label :t/generate-keys)
:subtitle (i18n/label :t/generate-keys-subtitle)
:button-label (i18n/label :t/lets-go)
:image (resources/get-image :generate-keys)
:max-height (option-card-max-height window-height)
:on-press navigate-to-create-profile}])
(defn- sync-profile-option-card
[window-height]
[quo/small-option-card
{:variant :main
:title (i18n/label :t/sign-in-by-syncing)
:subtitle (i18n/label :t/if-you-have-status-on-another-device)
:button-label (i18n/label :t/scan-sync-code)
:image (resources/get-image :generate-keys)
:max-height (option-card-max-height window-height)
:on-press navigate-to-sign-in-by-syncing}])
(defn sign-in-options
[sign-in-type]
(let [window-height (rf/sub [:dimensions/window-height])
create-profile? (= sign-in-type :create-profile)
main-option-card (if create-profile? create-profile-option-card sync-profile-option-card)]
[rn/view {:style style/options-container}
[quo/text
{:style style/title
:size :heading-1
:weight :semi-bold}
(i18n/label (if create-profile? :t/create-profile :t/sync-or-recover-profile))]
[main-option-card window-height]
[rn/view {:style style/subtitle-container}
[quo/text
{:style style/subtitle
:size :paragraph-2
:weight :medium}
(i18n/label (if create-profile? :t/experienced-web3 :t/dont-have-statatus-on-another-device))]]
[rn/view
[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 navigate-to-sign-in-by-seed-phrase}]
[rn/view {:style style/space-between-suboptions}]
(when config/show-not-implemented-features?
[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 status-im.common.not-implemented/alert}])]]))
(defn- navigate-back
[]
(rf/dispatch [:onboarding/overlay-dismiss])
(rf/dispatch [:navigate-back]))
(defn- navigate-to-quo-preview
[]
(rf/dispatch [:navigate-to :quo-preview]))
(defn- internal-view
[sign-in-type]
(let [{:keys [top]} (safe-area/get-insets)]
[rn/view {:style style/content-container}
[quo/page-nav
{:margin-top top
:type :no-title
:background :blur
:icon-name :i/arrow-left
:on-press navigate-back
:right-side [{:icon-name :i/info
:on-press getting-started-doc/show-as-bottom-sheet}
(when config/quo-preview-enabled?
{:icon-name :i/reveal-whitelist
:on-press navigate-to-quo-preview})]}]
[sign-in-options sign-in-type]]))
(defn create-profile
[]
[internal-view :create-profile])
(defn sync-or-recover-profile
[]
[internal-view :sync-or-recover-profile])

7
src/status_im/contexts/onboarding/events.cljs
View File

@ -128,6 +128,13 @@
:dispatch [:navigate-to-within-stack
[:screen/onboarding.create-profile :screen/onboarding.new-to-status]]})
(rf/reg-event-fx :onboarding/navigate-to-sign-in-by-syncing
(fn [{:keys [db]}]
;; Restart the flow
{:db (dissoc db :onboarding/profile)
:dispatch [:navigate-to-within-stack
[:screen/onboarding.sign-in-intro :screen/onboarding.sync-or-recover-profile]]}))
(rf/reg-event-fx :onboarding/set-auth-method
(fn [{:keys [db]} [auth-method]]
{:db (assoc db :auth-method auth-method)}))

14
src/status_im/contexts/onboarding/getting_started_doc/style.cljs Normal file
View File

@ -0,0 +1,14 @@
(ns status-im.contexts.onboarding.getting-started-doc.style
(:require
[quo.foundations.colors :as colors]))
(def main-content
{:color colors/white
:margin-bottom 4})
(def subtitle
{:margin-top 20
:margin-bottom 4})
(def content
{:color colors/white-opa-70})

50
src/status_im/contexts/onboarding/getting_started_doc/view.cljs Normal file
View File

@ -0,0 +1,50 @@
(ns status-im.contexts.onboarding.getting-started-doc.view
(:require
[quo.core :as quo]
[status-im.contexts.onboarding.getting-started-doc.style :as style]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
(defn getting-started-doc
[]
[quo/documentation-drawers
{:title (i18n/label :t/getting-started-with-status)
:shell? true}
[:<>
[quo/text
{:size :paragraph-2
:style style/main-content}
(i18n/label :t/getting-started-description)]
[quo/text
{:size :paragraph-1
:style style/subtitle
:weight :semi-bold}
(i18n/label :t/generate-keys)]
[quo/text
{:size :paragraph-2
:style style/content}
(i18n/label :t/getting-started-generate-keys-description)]
[quo/text
{:size :paragraph-1
:style style/subtitle
:weight :semi-bold}
(i18n/label :t/getting-started-generate-keys-from-recovery-phrase)]
[quo/text
{:size :paragraph-2
:style style/content}
(i18n/label :t/getting-started-generate-keys-from-recovery-phrase-description)]
[quo/text
{:size :paragraph-1
:style style/subtitle
:weight :semi-bold}
(i18n/label :t/getting-started-generate-keys-on-keycard)]
[quo/text
{:size :paragraph-2
:style style/content}
(i18n/label :t/getting-started-generate-keys-on-keycard-description)]]])
(defn show-as-bottom-sheet
[]
(rf/dispatch [:show-bottom-sheet
{:content getting-started-doc
:shell? true}]))

14
src/status_im/contexts/onboarding/intro/style.cljs
View File

@ -7,9 +7,11 @@
:justify-content :flex-end})
(def text-container
{:flex 1
:max-width 180
:flex-wrap :wrap})
{:flex 1
:text-align :center
:padding-bottom 24
:padding-horizontal 40
:flex-wrap :wrap})
(def plain-text
{:color colors/white-opa-70})
@ -17,3 +19,9 @@
(def highlighted-text
{:flex 1
:color colors/white})
(def bottom-actions-container
{:position :absolute
:left 0
:right 0
:padding-vertical 12})

70
src/status_im/contexts/onboarding/intro/view.cljs
View File

@ -2,12 +2,10 @@
(:require
[quo.core :as quo]
[react-native.core :as rn]
[status-im.constants :as constants]
[status-im.contexts.onboarding.common.background.view :as background]
[status-im.contexts.onboarding.common.overlay.view :as overlay]
[status-im.contexts.onboarding.intro.style :as style]
[status-im.contexts.onboarding.terms.view :as terms]
[status-im.contexts.syncing.scan-sync-code.view :as scan-sync-code]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
@ -15,40 +13,36 @@
[]
[rn/view {:style style/page-container}
[background/view false]
[quo/drawer-buttons
{:on-init (fn [reset-top-animation-fn]
(reset! scan-sync-code/dismiss-animations reset-top-animation-fn))
:animations-duration constants/onboarding-modal-animation-duration
:animations-delay constants/onboarding-modal-animation-delay
:top-card {:on-press #(rf/dispatch [:open-modal
:screen/onboarding.sign-in-intro])
:heading (i18n/label :t/sign-in)
:animated-heading (i18n/label :t/sign-in-by-syncing)
:accessibility-label :already-use-status-button}
:bottom-card {:on-press (fn []
(when-let [blur-show-fn @overlay/blur-show-fn-atom]
(blur-show-fn))
(rf/dispatch
[:open-modal :screen/onboarding.new-to-status]))
:heading (i18n/label :t/new-to-status)
:accessibility-label :new-to-status-button}}
[quo/text
{:size :paragraph-2
:weight :regular
:style style/plain-text}
(i18n/label :t/you-already-use-status)]
[quo/text {:style style/text-container}
[quo/text
{:size :paragraph-2
:weight :regular
:style style/plain-text}
(i18n/label :t/by-continuing-you-accept)]
[quo/text
{:on-press #(rf/dispatch [:show-bottom-sheet
{:content (fn [] [terms/terms-of-use])
:shell? true}])
:size :paragraph-2
:weight :regular
:style style/highlighted-text}
(i18n/label :t/terms-of-service)]]]
[quo/bottom-actions
{:container-style style/bottom-actions-container
:actions :two-vertical-actions
:description :bottom
:description-text [quo/text {:style style/text-container}
[quo/text
{:size :paragraph-2
:weight :regular
:style style/plain-text}
(i18n/label :t/by-continuing-you-accept)]
[quo/text
{:on-press #(rf/dispatch [:show-bottom-sheet
{:content (fn [] [terms/terms-of-use])
:shell? true}])
:size :paragraph-2
:weight :regular
:style style/highlighted-text}
(i18n/label :t/terms-of-service)]]
:button-one-label (i18n/label :t/sync-or-recover-profile)
:button-one-props {:type :dark-grey
:on-press (fn []
(when-let [blur-show-fn @overlay/blur-show-fn-atom]
(blur-show-fn))
(rf/dispatch
[:open-modal :screen/onboarding.sync-or-recover-profile]))}
:button-two-label (i18n/label :t/create-profile)
:button-two-props {:on-press
(fn []
(when-let [blur-show-fn @overlay/blur-show-fn-atom]
(blur-show-fn))
(rf/dispatch
[:open-modal :screen/onboarding.new-to-status]))}}]
[overlay/view]])

117
src/status_im/contexts/onboarding/new_to_status/view.cljs
View File

@ -1,117 +0,0 @@
(ns status-im.contexts.onboarding.new-to-status.view
(:require
[quo.core :as quo]
re-frame.db
[react-native.core :as rn]
[react-native.safe-area :as safe-area]
[status-im.common.resources :as resources]
[status-im.config :as config]
[status-im.contexts.onboarding.new-to-status.style :as style]
[utils.debounce :as debounce]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
(defn sign-in-options
[]
(let [window (rf/sub [:dimensions/window])]
[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)
:button-label (i18n/label :t/lets-go)
:image (resources/get-image :generate-keys)
:max-height (- (:height window)
(* 2 56) ;; two other list items
(* 2 16) ;; spacing between items
220) ;; extra spacing (top bar)
:on-press #(debounce/throttle-and-dispatch
[:onboarding/navigate-to-create-profile]
1000)}]
[rn/view {:style style/subtitle-container}
[quo/text
{:style style/subtitle
:size :paragraph-2
:weight :medium}
(i18n/label :t/experienced-web3)]]
[rn/view
[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 [:navigate-to-within-stack
[:screen/onboarding.enter-seed-phrase
:screen/onboarding.new-to-status]])}]
[rn/view {:style style/space-between-suboptions}]
(when config/show-not-implemented-features?
[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 #(js/alert "TODO: to be implemented")}])]]))
(defn getting-started-doc
[]
[quo/documentation-drawers
{:title (i18n/label :t/getting-started-with-status)
:shell? true}
[:<>
[quo/text
{:size :paragraph-2
:style style/doc-main-content}
(i18n/label :t/getting-started-description)]
[quo/text
{:size :paragraph-1
:style style/doc-subtitle
:weight :semi-bold}
(i18n/label :t/generate-keys)]
[quo/text
{:size :paragraph-2
:style style/doc-content}
(i18n/label :t/getting-started-generate-keys-description)]
[quo/text
{:size :paragraph-1
:style style/doc-subtitle
:weight :semi-bold}
(i18n/label :t/getting-started-generate-keys-from-recovery-phrase)]
[quo/text
{:size :paragraph-2
:style style/doc-content}
(i18n/label :t/getting-started-generate-keys-from-recovery-phrase-description)]
[quo/text
{:size :paragraph-1
:style style/doc-subtitle
:weight :semi-bold}
(i18n/label :t/getting-started-generate-keys-on-keycard)]
[quo/text
{:size :paragraph-2
:style style/doc-content}
(i18n/label :t/getting-started-generate-keys-on-keycard-description)]]])
(defn new-to-status
[]
(let [{:keys [top]} (safe-area/get-insets)]
[rn/view {:style style/content-container}
[quo/page-nav
{:margin-top top
:type :no-title
:background :blur
:icon-name :i/arrow-left
:on-press #(do
(rf/dispatch [:onboarding/overlay-dismiss])
(rf/dispatch [:navigate-back]))
:right-side [{:icon-name :i/info
:on-press #(rf/dispatch [:show-bottom-sheet
{:content getting-started-doc
:shell? true}])}
(when config/quo-preview-enabled?
{:icon-name :i/reveal-whitelist
:on-press #(rf/dispatch [:navigate-to :quo-preview])})]}]
[sign-in-options]]))

13
src/status_im/navigation/screens.cljs
View File

@ -26,6 +26,7 @@
[status-im.contexts.communities.actions.share-community.view :as share-community]
[status-im.contexts.communities.discover.view :as communities.discover]
[status-im.contexts.communities.overview.view :as communities.overview]
[status-im.contexts.onboarding.create-or-sync-profile.view :as create-or-sync-profile]
[status-im.contexts.onboarding.create-password.view :as create-password]
[status-im.contexts.onboarding.create-profile.view :as create-profile]
[status-im.contexts.onboarding.enable-biometrics.view :as enable-biometrics]
@ -33,7 +34,6 @@
[status-im.contexts.onboarding.generating-keys.view :as generating-keys]
[status-im.contexts.onboarding.identifiers.view :as identifiers]
[status-im.contexts.onboarding.intro.view :as intro]
[status-im.contexts.onboarding.new-to-status.view :as new-to-status]
[status-im.contexts.onboarding.sign-in.view :as sign-in]
[status-im.contexts.onboarding.syncing.progress.view :as syncing-devices]
[status-im.contexts.onboarding.syncing.results.view :as syncing-results]
@ -284,7 +284,16 @@
transitions/push-animations-for-transparent-background)
:popGesture false
:modalPresentationStyle :overCurrentContext}
:component new-to-status/new-to-status}
:component create-or-sync-profile/create-profile}
{:name :screen/onboarding.sync-or-recover-profile
:options {:theme :dark
:layout options/onboarding-transparent-layout
:animations (merge
transitions/new-to-status-modal-animations
transitions/push-animations-for-transparent-background)
:popGesture false
:modalPresentationStyle :overCurrentContext}
:component create-or-sync-profile/sync-or-recover-profile}
{:name :screen/onboarding.create-profile
:options {:theme :dark

1
src/utils/image_server.cljs
View File

@ -4,7 +4,6 @@
[react-native.fs :as utils.fs]
[react-native.platform :as platform]
[schema.core :as schema]
[schema.quo]
[utils.datetime :as datetime]))
(def ^:const image-server-uri-prefix "https://localhost:")

3
translations/en.json
View File

@ -719,6 +719,7 @@
"identicon-ring": "Identicon ring",
"identicon-ring-explanation": "This multicoloured ring around your profile picture represents your chat key.",
"if-you-cancel": "If you cancel, you can request to join this community at any point.",
"if-you-have-status-on-another-device": "If you have Status on another device",
"image-remove-current": "Remove current photo",
"image-source-gallery": "Select from gallery",
"image-source-make-photo": "Capture",
@ -1395,6 +1396,7 @@
"symbol": "Symbol",
"sync-all-devices": "Sync all devices",
"sync-in-progress": "Syncing...",
"sync-or-recover-profile": "Sync or recover profile",
"sync-settings": "Sync settings",
"sync-synced": "In sync",
"syncing-devices": "Syncing...",
@ -2359,6 +2361,7 @@
"read-more": "Read more",
"token-gated-communities-info": "Here will be something relevant about this topic. This will help the user get more context and therefore have a better understanding of it.",
"dont-yell-at-me": "Don’t yell at me",
"dont-have-statatus-on-another-device": "Don't have Status on another device?",
"unmute-channel": "Unmute channel",
"all-messages": "All messages",
"muted-until": "Muted until {{duration}}",