From 1ccb01532e2000ce09a18e987528d063f71ab07f Mon Sep 17 00:00:00 2001 From: Parvesh Monu Date: Wed, 25 May 2022 21:55:17 +0530 Subject: [PATCH] Implementation of new UI toggle (#13384) --- src/status_im/core.cljs | 4 + src/status_im/multiaccounts/login/core.cljs | 2 +- src/status_im/navigation/roots.cljs | 233 +++++++++--------- src/status_im/navigation2.cljs | 15 +- src/status_im/navigation2/home_stack.cljs | 6 +- src/status_im/navigation2/roots.cljs | 4 +- src/status_im/navigation2/screens.cljs | 12 +- src/status_im/subs.cljs | 3 +- src/status_im/switcher/styles.cljs | 2 +- .../ui/screens/advanced_settings/views.cljs | 16 +- src/status_im/ui/screens/home/views.cljs | 8 +- .../ui/screens/profile/user/views.cljs | 1 - src/status_im/ui/screens/screens.cljs | 6 +- src/status_im/ui/screens/views.cljs | 10 +- src/status_im/utils/config.cljs | 4 +- translations/en.json | 3 +- 16 files changed, 189 insertions(+), 140 deletions(-) diff --git a/src/status_im/core.cljs b/src/status_im/core.cljs index 621456e4fe..20578fa16d 100644 --- a/src/status_im/core.cljs +++ b/src/status_im/core.cljs @@ -16,6 +16,7 @@ [status-im.utils.universal-links.core :as utils.universal-links] [status-im.i18n.i18n :as i18n] [status-im.ui.components.react :as react] + [status-im.async-storage.core :as async-storage] ["react-native" :refer (DevSettings LogBox)] ["react-native-languages" :default react-native-languages] ["react-native-shake" :as react-native-shake])) @@ -39,6 +40,9 @@ (utils.universal-links/initialize) + (when config/quo-preview-enabled? + (async-storage/get-item :new-ui-enabled? #(reset! config/new-ui-enabled? %))) + ;;DEV (snoopy/subscribe!) (when (and js/goog.DEBUG platform/ios? DevSettings) diff --git a/src/status_im/multiaccounts/login/core.cljs b/src/status_im/multiaccounts/login/core.cljs index 683b99c851..d27d1ffdd3 100644 --- a/src/status_im/multiaccounts/login/core.cljs +++ b/src/status_im/multiaccounts/login/core.cljs @@ -472,7 +472,7 @@ "Decides which root should be initialised depending on user and app state" [db] (if (get db :tos/accepted?) - (re-frame/dispatch [:init-root :chat-stack]) + (re-frame/dispatch [:init-root (if @config/new-ui-enabled? :home-stack :chat-stack)]) (re-frame/dispatch [:init-root :tos]))) (fx/defn login-only-events diff --git a/src/status_im/navigation/roots.cljs b/src/status_im/navigation/roots.cljs index c22427ab92..1c7e74141b 100644 --- a/src/status_im/navigation/roots.cljs +++ b/src/status_im/navigation/roots.cljs @@ -2,7 +2,8 @@ (:require [quo.design-system.colors :as colors] [status-im.utils.platform :as platform] [status-im.ui.components.icons.icons :as icons] - [status-im.ui.screens.views :as views])) + [status-im.ui.screens.views :as views] + [status-im.navigation2.roots :as nav2-roots])) (defn status-bar-options [] (if platform/android? @@ -65,126 +66,128 @@ ;;TODO problem here is that we have two places for screens, here and in screens ns, and we have handler in navigate (defn roots [] ;;TABS - {:chat-stack - {:root - {:bottomTabs - {:id :tabs-stack - :options (merge (default-root) - {:bottomTabs {:titleDisplayMode :alwaysHide - :tabsAttachMode :onSwitchToTab - :backgroundColor colors/white}}) - :children [;CHAT STACK - {:stack {:id :chat-stack - :children [{:component {:name :home - :id :home - :options (merge (status-bar-options) - {:topBar (assoc (topbar-options) :visible false)})}}] - :options {:bottomTab (bottom-tab-general :main-icons/message :home-tab-button)}}} - ;BROWSER STACK - {:stack {:id :browser-stack - :children [{:component {:name :empty-tab - :id :empty-tab - :options (merge (status-bar-options) - {:topBar (assoc (topbar-options) :visible false)})}}] + (merge + {:chat-stack + {:root + {:bottomTabs + {:id :tabs-stack + :options (merge (default-root) + {:bottomTabs {:titleDisplayMode :alwaysHide + :tabsAttachMode :onSwitchToTab + :backgroundColor colors/white}}) + :children [;CHAT STACK + {:stack {:id :chat-stack + :children [{:component {:name :home + :id :home + :options (merge (status-bar-options) + {:topBar (assoc (topbar-options) :visible false)})}}] + :options {:bottomTab (bottom-tab-general :main-icons/message :home-tab-button)}}} + ;BROWSER STACK + {:stack {:id :browser-stack + :children [{:component {:name :empty-tab + :id :empty-tab + :options (merge (status-bar-options) + {:topBar (assoc (topbar-options) :visible false)})}}] - :options {:bottomTab (bottom-tab-general :main-icons/browser :dapp-tab-button)}}} - ;WALLET STACK - {:stack {:id :wallet-stack - :children [{:component {:name :wallet - :id :wallet - :options (merge (status-bar-options) - {:topBar (assoc (topbar-options) :visible false)})}}] - :options {:bottomTab (bottom-tab-general :main-icons/wallet :wallet-tab-button)}}} - ;STATUS STACK - {:stack {:id :status-stack - :children [{:component {:name :status - :id :status - :options (merge (status-bar-options) - {:topBar (assoc (topbar-options) :visible false)})}}] - :options {:bottomTab (bottom-tab-general :main-icons/status :status-tab-button)}}} - ;PROFILE STACK - {:stack {:id :profile-stack - :children [{:component {:name :my-profile - :id :my-profile - :options (merge (status-bar-options) - {:topBar (assoc (topbar-options) :visible false)})}}] - :options {:bottomTab (bottom-tab-general :main-icons/user-profile :profile-tab-button)}}}]}}} + :options {:bottomTab (bottom-tab-general :main-icons/browser :dapp-tab-button)}}} + ;WALLET STACK + {:stack {:id :wallet-stack + :children [{:component {:name :wallet + :id :wallet + :options (merge (status-bar-options) + {:topBar (assoc (topbar-options) :visible false)})}}] + :options {:bottomTab (bottom-tab-general :main-icons/wallet :wallet-tab-button)}}} + ;STATUS STACK + {:stack {:id :status-stack + :children [{:component {:name :status + :id :status + :options (merge (status-bar-options) + {:topBar (assoc (topbar-options) :visible false)})}}] + :options {:bottomTab (bottom-tab-general :main-icons/status :status-tab-button)}}} + ;PROFILE STACK + {:stack {:id :profile-stack + :children [{:component {:name :my-profile + :id :my-profile + :options (merge (status-bar-options) + {:topBar (assoc (topbar-options) :visible false)})}}] + :options {:bottomTab (bottom-tab-general :main-icons/user-profile :profile-tab-button)}}}]}}} - ;;INTRO (onboarding carousel) - :intro - {:root {:stack {:children [{:component {:name :intro - :id :intro - :options (status-bar-options)}}] - :options (merge (default-root) - (status-bar-options) - {:topBar (assoc (topbar-options) :visible false)})}}} + ;;INTRO (onboarding carousel) + :intro + {:root {:stack {:children [{:component {:name :intro + :id :intro + :options (status-bar-options)}}] + :options (merge (default-root) + (status-bar-options) + {:topBar (assoc (topbar-options) :visible false)})}}} - ;; ONBOARDING - :onboarding - {:root {:stack {:id :onboarding - :children [{:component {:name :get-your-keys - :id :get-your-keys - :options (status-bar-options)}}] - :options (merge (default-root) - (status-bar-options) - {:topBar (assoc (topbar-options) :elevation 0 :noBorder true :animate false)})}}} + ;; ONBOARDING + :onboarding + {:root {:stack {:id :onboarding + :children [{:component {:name :get-your-keys + :id :get-your-keys + :options (status-bar-options)}}] + :options (merge (default-root) + (status-bar-options) + {:topBar (assoc (topbar-options) :elevation 0 :noBorder true :animate false)})}}} - ;;PROGRESS - :progress - {:root {:stack {:children [{:component {:name :progress - :id :progress - :options (status-bar-options)}}] - :options (merge (default-root) - {:topBar (assoc (topbar-options) :visible false)})}}} + ;;PROGRESS + :progress + {:root {:stack {:children [{:component {:name :progress + :id :progress + :options (status-bar-options)}}] + :options (merge (default-root) + {:topBar (assoc (topbar-options) :visible false)})}}} - ;;LOGIN - :multiaccounts - {:root {:stack {:id :multiaccounts-stack - :children [{:component {:name :multiaccounts - :id :multiaccounts - :options (get-screen-options :multiaccounts)}} - {:component {:name :login - :id :login - :options (get-screen-options :login)}}] - :options (merge (default-root) - (status-bar-options) - {:topBar (topbar-options)})}}} + ;;LOGIN + :multiaccounts + {:root {:stack {:id :multiaccounts-stack + :children [{:component {:name :multiaccounts + :id :multiaccounts + :options (get-screen-options :multiaccounts)}} + {:component {:name :login + :id :login + :options (get-screen-options :login)}}] + :options (merge (default-root) + (status-bar-options) + {:topBar (topbar-options)})}}} - :multiaccounts-keycard - {:root {:stack {:id :multiaccounts-stack - :children [{:component {:name :multiaccounts - :id :multiaccounts - :options (get-screen-options :multiaccounts)}} - {:component {:name :keycard-login-pin - :id :keycard-login-pin - :options (get-screen-options :keycard-login-pin)}}] - :options (merge (default-root) - (status-bar-options) - {:topBar (topbar-options)})}}} + :multiaccounts-keycard + {:root {:stack {:id :multiaccounts-stack + :children [{:component {:name :multiaccounts + :id :multiaccounts + :options (get-screen-options :multiaccounts)}} + {:component {:name :keycard-login-pin + :id :keycard-login-pin + :options (get-screen-options :keycard-login-pin)}}] + :options (merge (default-root) + (status-bar-options) + {:topBar (topbar-options)})}}} - ;;WELCOME - :welcome - {:root {:stack {:children [{:component {:name :welcome - :id :welcome - :options (status-bar-options)}}] - :options (merge (default-root) - (status-bar-options) - {:topBar (assoc (topbar-options) :visible false)})}}} + ;;WELCOME + :welcome + {:root {:stack {:children [{:component {:name :welcome + :id :welcome + :options (status-bar-options)}}] + :options (merge (default-root) + (status-bar-options) + {:topBar (assoc (topbar-options) :visible false)})}}} - ;;NOTIFICATIONS - :onboarding-notification - {:root {:stack {:children [{:component {:name :onboarding-notification - :id :onboarding-notification - :options (status-bar-options)}}] - :options (merge (default-root) - (status-bar-options) - {:topBar (assoc (topbar-options) :visible false)})}}} + ;;NOTIFICATIONS + :onboarding-notification + {:root {:stack {:children [{:component {:name :onboarding-notification + :id :onboarding-notification + :options (status-bar-options)}}] + :options (merge (default-root) + (status-bar-options) + {:topBar (assoc (topbar-options) :visible false)})}}} - ;; TERMS OF SERVICE - :tos - {:root {:stack {:children [{:component {:name :force-accept-tos - :id :force-accept-tos - :options (get-screen-options :force-accept-tos)}}] - :options (merge (default-root) - (status-bar-options) - {:topBar (assoc (topbar-options) :visible false)})}}}}) + ;; TERMS OF SERVICE + :tos + {:root {:stack {:children [{:component {:name :force-accept-tos + :id :force-accept-tos + :options (get-screen-options :force-accept-tos)}}] + :options (merge (default-root) + (status-bar-options) + {:topBar (assoc (topbar-options) :visible false)})}}}} + (nav2-roots/roots))) diff --git a/src/status_im/navigation2.cljs b/src/status_im/navigation2.cljs index 98e17dab6c..a8b83a2d09 100644 --- a/src/status_im/navigation2.cljs +++ b/src/status_im/navigation2.cljs @@ -1,9 +1,20 @@ (ns status-im.navigation2 (:require [status-im.utils.fx :as fx] - [status-im.utils.datetime :as datetime])) + [status-im.reloader :as reloader] + [status-im.utils.config :as config] + [status-im.utils.datetime :as datetime] + [status-im.async-storage.core :as async-storage])) (def parent-stack (atom :home-stack)) +(fx/defn toggle-new-ui + {:events [:toggle-new-ui]} + [_] + (swap! config/new-ui-enabled? not) + (reloader/reload) + {:dispatch [:init-root (if @config/new-ui-enabled? :home-stack :chat-stack)] + ::async-storage/set! {:new-ui-enabled? @config/new-ui-enabled?}}) + (fx/defn init-root-nav2 {:events [:init-root-nav2]} [_ root-id] @@ -38,7 +49,7 @@ [{:keys [db] :as cofx} go-to-view-id id screen-params from-switcher?] (let [view-id (:view-id db) stacks (:navigation2/navigation2-stacks db) - from-home? (= view-id :home-stack)] + from-home? (= view-id :chat-stack)] (if from-switcher? (navigate-from-switcher go-to-view-id id db from-home?) (if from-home? diff --git a/src/status_im/navigation2/home_stack.cljs b/src/status_im/navigation2/home_stack.cljs index 5ae554a9e8..1f49bba02b 100644 --- a/src/status_im/navigation2/home_stack.cljs +++ b/src/status_im/navigation2/home_stack.cljs @@ -4,7 +4,8 @@ [status-im.switcher.switcher :as switcher] [status-im.ui.screens.home.views :as home] [status-im.switcher.constants :as switcher-constants] - [status-im.ui.screens.browser.empty-tab.views :as empty-tab] + [status-im.ui.screens.profile.user.views :as profile.user] + ;; [status-im.ui.screens.browser.empty-tab.views :as empty-tab] [status-im.ui.screens.wallet.accounts.views :as wallet.accounts] [status-im.switcher.bottom-tabs :as bottom-tabs])) @@ -18,7 +19,8 @@ :chats-stack [home/home] :communities-stack [quo2.preview/main-screen] :wallet-stack [wallet.accounts/accounts-overview] - :browser-stack [empty-tab/empty-tab])])) + ;;:browser-stack [empty-tab/empty-tab])])) + :browser-stack [profile.user/my-profile])])) (defn home [] [:<> diff --git a/src/status_im/navigation2/roots.cljs b/src/status_im/navigation2/roots.cljs index 637aa04063..c10cebad63 100644 --- a/src/status_im/navigation2/roots.cljs +++ b/src/status_im/navigation2/roots.cljs @@ -4,6 +4,6 @@ {:home-stack {:root {:stack {:id :home-stack - :children [{:component {:name :home-stack - :id :home-stack + :children [{:component {:name :chat-stack + :id :chat-stack :options {:topBar {:visible false}}}}]}}}}) diff --git a/src/status_im/navigation2/screens.cljs b/src/status_im/navigation2/screens.cljs index 726916dbbb..451dcd88a1 100644 --- a/src/status_im/navigation2/screens.cljs +++ b/src/status_im/navigation2/screens.cljs @@ -1,6 +1,14 @@ (ns status-im.navigation2.screens - (:require [status-im.navigation2.home-stack :as home-stack])) + (:require [status-im.ui.screens.chat.views :as chat] + [status-im.navigation2.home-stack :as home-stack] + [status-im.navigation2.stack-with-switcher :as stack-with-switcher])) -(def screens [{:name :home-stack +;; We have to use the home screen name :chat-stack for now, for compatibility with navigation.cljs +(def screens [{:name :chat-stack ;; TODO(parvesh) - rename to home-stack :insets {:top false} :component home-stack/home}]) + +;; These screens will overwrite navigation/screens.cljs screens on enabling new UI toggle +(def screen-overwrites + [{:name :chat + :component #(stack-with-switcher/overlap-stack chat/chat :chat)}]) diff --git a/src/status_im/subs.cljs b/src/status_im/subs.cljs index a8dd9666e7..f4c5843b0e 100644 --- a/src/status_im/subs.cljs +++ b/src/status_im/subs.cljs @@ -1538,7 +1538,8 @@ :<- [:view-id] :<- [:home-items-show-number] (fn [[search-filter filtered-chats communities view-id home-items-show-number]] - (if (= view-id :home) + (if (or (= view-id :home) + (and config/new-ui-enabled? (= view-id :chat-stack))) (let [communities-count (count communities) chats-count (count filtered-chats) ;; If we have both communities & chats we want to display diff --git a/src/status_im/switcher/styles.cljs b/src/status_im/switcher/styles.cljs index cd8c2f84cc..ff89f03fed 100644 --- a/src/status_im/switcher/styles.cljs +++ b/src/status_im/switcher/styles.cljs @@ -31,7 +31,7 @@ :justify-content :space-around :height (constants/bottom-tabs-height) :position :absolute - :bottom 0 + :bottom -1 :right 0 :left 0 :opacity animation/bottom-tabs-opacity diff --git a/src/status_im/ui/screens/advanced_settings/views.cljs b/src/status_im/ui/screens/advanced_settings/views.cljs index b306d05916..de937173da 100644 --- a/src/status_im/ui/screens/advanced_settings/views.cljs +++ b/src/status_im/ui/screens/advanced_settings/views.cljs @@ -14,7 +14,8 @@ wakuv2-flag current-fleet webview-debug - wallet-connect-enabled?]}] + wallet-connect-enabled? + new-ui-enabled?]}] (keep identity [{:size :small @@ -115,7 +116,15 @@ #(re-frame/dispatch [:multiaccounts.ui/switch-wallet-connect-enabled (not wallet-connect-enabled?)]) :accessory :switch - :active wallet-connect-enabled?}])) + :active wallet-connect-enabled?} + (when config/quo-preview-enabled? + {:size :small + :title (i18n/label :t/new-ui) + :accessibility-label :new-ui-toggle + :container-margin-bottom 8 + :on-press #(re-frame/dispatch [:toggle-new-ui]) + :accessory :switch + :active new-ui-enabled?})])) (defn- flat-list-data [options] (normal-mode-settings-data options)) @@ -146,6 +155,7 @@ :wakuv2-flag wakuv2-flag :waku-bloom-filter-mode waku-bloom-filter-mode :webview-debug webview-debug - :wallet-connect-enabled? wallet-connect-enabled?}) + :wallet-connect-enabled? wallet-connect-enabled? + :new-ui-enabled? @config/new-ui-enabled?}) :key-fn (fn [_ i] (str i)) :render-fn render-item}])) diff --git a/src/status_im/ui/screens/home/views.cljs b/src/status_im/ui/screens/home/views.cljs index 5b7e165005..20bcba9a05 100644 --- a/src/status_im/ui/screens/home/views.cljs +++ b/src/status_im/ui/screens/home/views.cljs @@ -12,6 +12,7 @@ [status-im.ui.screens.home.views.inner-item :as inner-item] [quo.design-system.colors :as colors] [quo.core :as quo] + [quo.platform :as platform] [status-im.add-new.core :as new-chat] [status-im.ui.components.search-input.view :as search-input] [status-im.add-new.db :as db] @@ -22,7 +23,8 @@ [status-im.ui.screens.chat.sheets :as sheets] [status-im.ui.components.tabbar.core :as tabbar] ["react-native-navigation" :refer (Navigation)] - [status-im.ui.components.invite.views :as invite]) + [status-im.ui.components.invite.views :as invite] + [status-im.utils.config :as config]) (:require-macros [status-im.utils.views :as views])) (defn home-tooltip-view [] @@ -102,7 +104,9 @@ home-item {:on-press (fn [] (re-frame/dispatch [:dismiss-keyboard]) - (re-frame/dispatch [:chat.ui/navigate-to-chat chat-id]) + (if (and @config/new-ui-enabled? platform/android?) + (re-frame/dispatch [:chat.ui/navigate-to-chat-nav2 chat-id]) + (re-frame/dispatch [:chat.ui/navigate-to-chat chat-id])) (re-frame/dispatch [:search/home-filter-changed nil]) (re-frame/dispatch [:accept-all-activity-center-notifications-from-chat chat-id])) :on-long-press #(re-frame/dispatch [:bottom-sheet/show-sheet diff --git a/src/status_im/ui/screens/profile/user/views.cljs b/src/status_im/ui/screens/profile/user/views.cljs index 84c8488ab7..62c52f0235 100644 --- a/src/status_im/ui/screens/profile/user/views.cljs +++ b/src/status_im/ui/screens/profile/user/views.cljs @@ -123,7 +123,6 @@ :accessibility-label :appearance-settings-button :chevron true :on-press #(re-frame/dispatch [:navigate-to :quo2-preview])}]) - ;; :on-press #(re-frame/dispatch [:init-root-nav2 :home-stack])}]) [quo/list-item {:icon :main-icons/appearance :title (i18n/label :t/appearance) diff --git a/src/status_im/ui/screens/screens.cljs b/src/status_im/ui/screens/screens.cljs index 3787bd9b6d..138fc7eef4 100644 --- a/src/status_im/ui/screens/screens.cljs +++ b/src/status_im/ui/screens/screens.cljs @@ -120,7 +120,6 @@ [quo2.screens.main :as quo2.preview] [status-im.utils.config :as config] [status-im.navigation2.screens :as navigation2.screens])) - ;[status-im.navigation2.stack-with-switcher :as stack-with-switcher])) ;[quo2.foundations.colors :as quo2.colors])) (def components @@ -131,7 +130,7 @@ {:id id :icon (icons/icon-source icon)}) -(def screens +(defn screens [] (concat [;;INTRO, ONBOARDING, LOGIN ;Multiaccounts @@ -228,7 +227,6 @@ :rightButtons (right-button-options :chat :more)}} :right-handler chat/topbar-button :component chat/chat} - ;; :component #(stack-with-switcher/overlap-stack chat/chat :chat)} ;Pinned messages {:name :chat-pinned-messages @@ -897,5 +895,7 @@ quo2.preview/screens) (when config/quo-preview-enabled? navigation2.screens/screens) + (when @config/new-ui-enabled? + navigation2.screens/screen-overwrites) (when config/quo-preview-enabled? quo2.preview/main-screens))) diff --git a/src/status_im/ui/screens/views.cljs b/src/status_im/ui/screens/views.cljs index 64bc33ec03..26d17c451c 100644 --- a/src/status_im/ui/screens/views.cljs +++ b/src/status_im/ui/screens/views.cljs @@ -21,7 +21,7 @@ (fn [acc screen] (assoc acc (:name screen) screen)) {} - screens/screens)) + (screens/screens))) ;;we need this for hot reload (for some reason it doesn't reload, so we have to call get-screens if debug true) (def screens (get-screens)) @@ -58,7 +58,11 @@ (defn screen [key] (reagent.core/reactify-component (fn [] - (let [{:keys [component insets]} (get (if js/goog.DEBUG (get-screens) screens) (keyword key))] + (let [{:keys [component insets]} (get + (if (or js/goog.DEBUG @config/new-ui-enabled?) + (get-screens) + screens) + (keyword key))] ^{:key (str "root" key @reloader/cnt)} [react/safe-area-provider [react/safe-area-consumer @@ -158,4 +162,4 @@ [inactive] [wallet-connect/wallet-connect-app-management-sheet-view] (when js/goog.DEBUG - [reloader/reload-view])]))) \ No newline at end of file + [reloader/reload-view])]))) diff --git a/src/status_im/utils/config.cljs b/src/status_im/utils/config.cljs index d073aceea9..260341d764 100644 --- a/src/status_im/utils/config.cljs +++ b/src/status_im/utils/config.cljs @@ -171,4 +171,6 @@ :url "#" :icons ["https://statusnetwork.com/img/press-kit-status-logo.svg"]}) -(def wallet-connect-project-id "87815d72a81d739d2a7ce15c2cfdefb3") \ No newline at end of file +(def wallet-connect-project-id "87815d72a81d739d2a7ce15c2cfdefb3") + +(def new-ui-enabled? (atom false)) diff --git a/translations/en.json b/translations/en.json index 6044d46599..537a9de213 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1737,5 +1737,6 @@ "manage-connections": "Manage connections from within Application Connections", "wallet-manage-app-connections": "Manage app connections", "connection-request": "Connection Request", - "disconnect": "Disconnect" + "disconnect": "Disconnect", + "new-ui": "New UI" }