intial code

src/quo2/components/bottom_tabs.cljs

@@ -0,0 +1,59 @@
+(ns quo2.components.bottom-tabs
+  (:require [quo.theme :as theme]
+            [quo2.navigation :as quo2-navigation]
+            [quo.react-native :as rn]
+            [quo2.components.switcher :as switcher]
+            [reagent.core :as reagent]
+            [quo2.foundations.colors :as colors]
+            [status-im.utils.platform :as platform]
+            [status-im.ui.components.icons.icons :as icons]
+            [status-im.utils.handlers :refer [>evt]]))
+
+(def selected-tab (reagent/atom :quo2-preview))
+
+(def themes
+  {:light {:background-color colors/neutral-70-opa-90
+           :non-selected-tab colors/neutral-50
+           :selected-tab     colors/white}
+   :dark  {:background-color colors/neutral-80-opa-90
+           :non-selected-tab colors/neutral-40
+           :selected-tab     colors/white}})
+
+(defn get-color [key]
+  (get-in themes [(theme/get-theme) key]))
+
+(defn bottom-tab-pressed [tab]
+  (when-not (= tab @selected-tab)
+    (reset! selected-tab tab)
+    (>evt [::quo2-navigation/quo2-navigate-change-tab tab])))
+
+(defn bottom-tab [icon tab]
+  [rn/touchable-opacity {:style {:padding   15}
+                         :active-opacity 1
+                         :on-press #(bottom-tab-pressed tab)}
+   [icons/icon icon {:width  25
+                     :height 25
+                     :color  (get-color
+                              (if (= tab @selected-tab)
+                                :selected-tab
+                                :non-selected-tab))}]])
+
+(defn bottom-tabs []
+  [:<>
+   [rn/view {:style
+             {:background-color (get-color :background-color)
+              :flex-direction   :row
+              :flex             1
+              :align-items      :center
+              :justify-content  :space-around
+              :height           (if platform/android? 60 80)
+              :position         :absolute
+              :bottom           0
+              :right            0
+              :left             0}}  ;; TODO - use different height for android and ios(Confirm from Design)
+    [bottom-tab :main-icons/message :quo2-preview]
+    [bottom-tab :main-icons/browser :browser]
+    [rn/view {:width 10}]
+    [bottom-tab :main-icons/wallet :wallet]
+    [bottom-tab :main-icons/user-profile :profile]]
+   [switcher/switcher-button]])

src/quo2/components/button.cljs

@@ -141,4 +141,4 @@
              children)]
           (when after
             [rn/view
-             [icons/icon after {:color icon-color}]])]]))))
+             [icons/icon after {:color icon-color}]])]]))))

src/quo2/components/switcher.cljs

@@ -0,0 +1,34 @@
+(ns quo2.components.switcher
+  (:require [quo.react-native :as rn]
+            [quo2.navigation :as quo2-navigation]
+            [status-im.utils.handlers :refer [>evt]]
+            [quo2.components.button :as button]
+            [status-im.react-native.resources :as resources]))
+
+(defn switcher-button []
+  [rn/touchable-opacity {:active-opacity 1
+                         :on-press       #(>evt [::quo2-navigation/quo2-open-modal
+                                                 :quo2-switcher-screen])
+                         :style          {:position        :absolute
+                                          :bottom          35
+                                          :justify-content :center
+                                          :align-items     :center
+                                          :align-self      :center}}
+   [rn/image {:source (resources/get-image :status-logo)
+              :style {:width      48
+                      :height     48}}]])
+
+(defn switcher-screen []
+  [rn/view {:style {:flex             1
+                    :background-color "#040B14CC"
+                    :justify-content :center
+                    :align-items :center}}
+   [rn/view {:style {:position :absolute
+                     :top 100}}
+    [button/button {:on-press #(>evt [::quo2-navigation/quo2-open-modal :quo2-mock-screen4])
+                    :size 32} "Open New Screen"]]
+   [rn/view {:style {:position :absolute
+                     :bottom 50}}
+    [button/button {:on-press #(>evt [::quo2-navigation/quo2-close-modal
+                                      :quo2-switcher-screen])
+                    :size 32} "Close"]]])

src/quo2/foundations/colors.cljs

@@ -33,6 +33,13 @@
 (def neutral-50-opa-30 (alpha neutral-50 0.3))
 (def neutral-50-opa-40 (alpha neutral-50 0.4))
 
+;;70 with transparency
+(def neutral-70-opa-60 (alpha neutral-70 0.6))
+(def neutral-70-opa-70 (alpha neutral-70 0.7))
+(def neutral-70-opa-80 (alpha neutral-70 0.8))
+(def neutral-70-opa-90 (alpha neutral-70 0.9))
+(def neutral-70-opa-95 (alpha neutral-70 0.95))
+
 ;;80 with transparency
 (def neutral-80-opa-60 (alpha neutral-80 0.6))
 (def neutral-80-opa-70 (alpha neutral-80 0.7))
@@ -173,4 +180,4 @@
 (def info-50-opa-10 (alpha info-50 0.1))
 (def info-50-opa-20 (alpha info-50 0.2))
 (def info-50-opa-30 (alpha info-50 0.3))
-(def info-50-opa-40 (alpha info-50 0.4))
+(def info-50-opa-40 (alpha info-50 0.4))

src/quo2/navigation.cljs

@@ -0,0 +1,22 @@
+(ns quo2.navigation
+  (:require [status-im.utils.fx :as fx]))
+
+(fx/defn quo2-init-root
+  {:events [::quo2-init-root]}
+  [_ root-id]
+  {:quo2-init-root-fx root-id})
+
+(fx/defn quo2-change-tab
+  {:events [::quo2-navigate-change-tab]}
+  [_ tab]
+  {:quo2-change-tab-fx tab})
+
+(fx/defn quo2-open-modal
+  {:events [::quo2-open-modal]}
+  [_ modal]
+  {:quo2-open-modal-fx modal})
+
+(fx/defn quo2-close-modal
+  {:events [::quo2-close-modal]}
+  [_ modal]
+  {:quo2-close-modal-fx modal})

src/quo2/navigation/core.cljs

@@ -0,0 +1,36 @@
+(ns quo2.navigation.core
+  (:require [re-frame.core :as re-frame]
+            [quo2.navigation.roots :as roots]
+            ["react-native-navigation" :refer (Navigation)]))
+
+(re-frame/reg-fx
+ :quo2-init-root-fx
+ (fn [new-root-id]
+   (.setRoot Navigation (clj->js (get (roots/roots) new-root-id)))))
+
+(def tab-key-idx {:quo2-preview      0
+                  :browser 1
+                  :wallet 2
+                  :profile 3})
+
+(re-frame/reg-fx
+ :quo2-change-tab-fx
+ (fn [tab]
+   (.mergeOptions Navigation "quo2-tabs-stack" (clj->js {:bottomTabs {:currentTabIndex (get tab-key-idx tab)}}))))
+
+(defn open-modal [comp]
+  (.showModal Navigation
+              (clj->js {:stack {:children
+                                [{:component
+                                  {:name    comp
+                                   :id      comp
+                                   :options   {:topBar {:visible false}
+                                               :modalPresentationStyle "overCurrentContext"
+                                               :layout {:backgroundColor "transparent"}}}}]}})))
+
+(defn close-modal []
+  (.dismissAllModals Navigation))
+
+(re-frame/reg-fx :quo2-open-modal-fx open-modal)
+
+(re-frame/reg-fx :quo2-close-modal-fx close-modal)

src/quo2/navigation/roots.cljs

@@ -0,0 +1,34 @@
+(ns quo2.navigation.roots
+  (:require [status-im.navigation.roots :as nav-roots]))
+
+(defn roots []
+  {:quo2-tabs-stack
+   {:root
+    {:bottomTabs
+     {:id       :quo2-tabs-stack
+      :options (merge (nav-roots/default-root)
+                      {:bottomTabs {:titleDisplayMode :alwaysHide
+                                    :tabsAttachMode   :together
+                                    :visible          false
+                                    :animate          false}})
+      :children [{:stack {:id       :profile-stack
+                          :children [{:component {:name    :quo2-preview
+                                                  :id      :quo2-preview
+                                                  :options {:topBar {:visible false}}}}]
+                          :options  {:bottomTab (nav-roots/bottom-tab-general :main-icons/message :home-tab-button)}}}
+                 {:stack {:id       :browser-stack
+                          :children [{:component {:name    :quo2-mock-screen2
+                                                  :id      :empty-tab
+                                                  :options {:topBar {:visible false}}}}]
+
+                          :options  {:bottomTab (nav-roots/bottom-tab-general :main-icons/browser :dapp-tab-button)}}}
+                 {:stack {:id       :wallet-stack
+                          :children [{:component {:name    :quo2-mock-screen3
+                                                  :id      :wallet
+                                                  :options {:topBar {:visible false}}}}]
+                          :options  {:bottomTab (nav-roots/bottom-tab-general :main-icons/wallet :wallet-tab-button)}}}
+                 {:stack {:id       :quo2-preview-stack
+                          :children [{:component {:name    :quo2-exit-screen
+                                                  :id      :quo2-exit-screen
+                                                  :options {:topBar {:visible false}}}}]
+                          :options  {:bottomTab (nav-roots/bottom-tab-general :main-icons/user-profile :profile-tab-button)}}}]}}}})

src/quo2/screens/main.cljs

@@ -6,8 +6,11 @@
             [quo2.screens.button :as button]
             [quo2.screens.text :as text]
             [quo2.screens.tabs :as tabs]
+            [quo2.screens.mock :as mock]
             [quo2.screens.segmented :as segmented]
-            [quo.core :as quo]))
+            [quo.core :as quo]
+            [quo2.components.switcher :as switcher]
+            [quo2.components.bottom-tabs :as bottom-tabs]))
 
 (def screens [{:name      :quo2-texts
                :insets    {:top false}
@@ -46,18 +49,35 @@
     [quo/text "Set dark theme"]]])
 
 (defn main-screen []
-  [rn/scroll-view {:flex               1
-                   :padding-vertical   8
-                   :padding-horizontal 16
-                   :background-color   (:ui-background @colors/theme)}
-   [theme-switcher]
-   [rn/view
-    (for [{:keys [name]} screens]
-      ^{:key name}
-      [rn/touchable-opacity {:on-press #(re-frame/dispatch [:navigate-to name])}
-       [rn/view {:style {:padding-vertical 8}}
-        [quo/text (str "Preview " name)]]])]])
+  [:<>
+   [rn/scroll-view {:flex               1
+                    :padding-vertical   8
+                    :padding-horizontal 16
+                    :background-color   (:ui-background @colors/theme)}
+    [theme-switcher]
+    [rn/view
+     (for [{:keys [name]} screens]
+       ^{:key name}
+       [rn/touchable-opacity {:on-press #(re-frame/dispatch [:navigate-to name])}
+        [rn/view {:style {:padding-vertical 8}}
+         [quo/text (str "Preview " name)]]])]]
+   [bottom-tabs/bottom-tabs]])
 
 (def main-screens [{:name      :quo2-preview
                     :insets    {:top false}
-                    :component main-screen}])
+                    :component main-screen}
+                   {:name      :quo2-mock-screen2
+                    :insets    {:top false}
+                    :component mock/screen2}
+                   {:name      :quo2-mock-screen3
+                    :insets    {:top false}
+                    :component mock/screen3}
+                   {:name      :quo2-mock-screen4
+                    :insets    {:top false}
+                    :component mock/screen4}
+                   {:name      :quo2-exit-screen
+                    :insets    {:top false}
+                    :component mock/exit-screen}
+                   {:name      :quo2-switcher-screen
+                    :insets    {:top false}
+                    :component switcher/switcher-screen}])

src/quo2/screens/mock.cljs

@@ -0,0 +1,28 @@
+(ns quo2.screens.mock
+  (:require [quo.react-native :as rn]
+            [re-frame.core :as re-frame]
+            [quo2.components.button :as button]
+            [quo2.components.bottom-tabs :as bottom-tabs]))
+
+(defn screen2 []
+  [:<>
+   [rn/text {:style {:font-size 40 :align-self :center :margin-top 100}} "Screen 2"]
+   [bottom-tabs/bottom-tabs]])
+
+(defn screen3 []
+  [:<>
+   [rn/text {:style {:font-size 40 :align-self :center :margin-top 100}} "Screen 3"]
+   [bottom-tabs/bottom-tabs]])
+
+(defn screen4 []
+  [:<>
+   [rn/text {:style {:font-size 40 :align-self :center}} "Modal Screen"]])
+
+(defn exit-screen []
+  [rn/view {:style {:flex 1
+                    :justify-content :center
+                    :align-items :center}}
+   [rn/view {:style {:position :absolute
+                     :bottom 150}}
+    [button/button {:on-press #(re-frame/dispatch [:init-root :chat-stack])} "Exit Quo 2"]]
+   [bottom-tabs/bottom-tabs]])

src/status_im/events.cljs

@@ -59,6 +59,8 @@
             status-im.wallet.choose-recipient.core
             [status-im.wallet.core :as wallet]
             status-im.wallet.custom-tokens.core
+            quo2.navigation.core
+            quo2.navigation
             [status-im.navigation.core :as navigation.core]
             [status-im.multiaccounts.login.core :as login.core]
             [status-im.signing.core :as signing]))

src/status_im/ui/screens/profile/user/views.cljs

@@ -19,6 +19,7 @@
             [status-im.utils.utils :as utils]
             [status-im.ethereum.stateofus :as stateofus]
             [quo.design-system.spacing :as spacing]
+            [quo2.navigation :as quo2-navigation]
             [status-im.ui.screens.profile.visibility-status.views :as visibility-status])
   (:require-macros [status-im.utils.views :as views]))
 
@@ -122,7 +123,7 @@
          :title               "Quo2.0 Preview"
          :accessibility-label :appearance-settings-button
          :chevron             true
-         :on-press            #(re-frame/dispatch [:navigate-to :quo2-preview])}])
+         :on-press            #(re-frame/dispatch [::quo2-navigation/quo2-init-root :quo2-tabs-stack])}])
      [quo/list-item
       {:icon                :main-icons/appearance
        :title               (i18n/label :t/appearance)