[WIP] Testnet banner base implementation

Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>

src/status_im2/common/home/banner/style.cljs

@@ -2,7 +2,8 @@
   (:require
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
-    [react-native.safe-area :as safe-area]))
+    [react-native.safe-area :as safe-area]
+    [status-im2.constants :as constants]))
 
 (def ^:private card-height (+ 56 16))
 (def ^:private max-scroll (+ card-height 8))
@@ -23,7 +24,7 @@
   (reanimated/interpolate scroll-shared-value [0 max-scroll] [0 (+ max-scroll)] :clamp))
 
 (defn banner-card-blur-layer
-  [scroll-shared-value]
+  [scroll-shared-value testnet-enabled?]
   (reanimated/apply-animations-to-style
    {:transform [{:translate-y (animated-card-translation-y scroll-shared-value)}]}
    {:overflow (if platform/ios? :visible :hidden)
@@ -32,7 +33,7 @@
     :top      0
     :right    0
     :left     0
-    :height   (+ (safe-area/get-top) 244)}))
+    :height   (+ (safe-area/get-top) 244 (when testnet-enabled? constants/testnet-banner-height))}))
 
 (defn banner-card-hiding-layer
   [scroll-shared-value]
@@ -53,12 +54,12 @@
    {}))
 
 (defn banner-card-tabs-layer
-  [scroll-shared-value]
+  [scroll-shared-value testnet-enabled?]
   (reanimated/apply-animations-to-style
    {:transform [{:translate-y (animated-card-translation-y scroll-shared-value)}]}
    {:z-index  3
     :position :absolute
-    :top      (+ (safe-area/get-top) 192)
+    :top      (+ (safe-area/get-top) 192 (when testnet-enabled? constants/testnet-banner-height))
     :right    0
     :left     0}))
 

src/status_im2/common/home/banner/view.cljs

@@ -31,8 +31,9 @@
 
 (defn- banner-card-blur-layer
   [scroll-shared-value child]
-  (let [open-sheet? (-> (rf/sub [:bottom-sheet]) :sheets seq)]
-    [reanimated/view {:style (style/banner-card-blur-layer scroll-shared-value)}
+  (let [testnet-enabled? (rf/sub [:profile/testnet-enabled?])
+        open-sheet?      (-> (rf/sub [:bottom-sheet]) :sheets seq)]
+    [reanimated/view {:style (style/banner-card-blur-layer scroll-shared-value testnet-enabled?)}
      [blur/view
       {:style         style/fill-space
        :blur-amount   (if platform/ios? 20 10)
@@ -54,20 +55,21 @@
 
 (defn- banner-card-tabs-layer
   [{:keys [selected-tab tabs on-tab-change scroll-ref scroll-shared-value customization-color]}]
-  [reanimated/view {:style (style/banner-card-tabs-layer scroll-shared-value)}
-   ^{:key (str "tabs-" selected-tab)}
-   [quo/tabs
-    {:style               style/banner-card-tabs
-     :customization-color customization-color
-     :size                32
-     :default-active      selected-tab
-     :data                tabs
-     :on-change           (fn [tab]
-                            (reset-banner-animation scroll-shared-value)
-                            (some-> scroll-ref
-                                    deref
-                                    reset-scroll)
-                            (on-tab-change tab))}]])
+  (let [testnet-enabled? (rf/sub [:profile/testnet-enabled?])]
+    [reanimated/view {:style (style/banner-card-tabs-layer scroll-shared-value testnet-enabled?)}
+     ^{:key (str "tabs-" selected-tab)}
+     [quo/tabs
+      {:style               style/banner-card-tabs
+       :customization-color customization-color
+       :size                32
+       :default-active      selected-tab
+       :data                tabs
+       :on-change           (fn [tab]
+                              (reset-banner-animation scroll-shared-value)
+                              (some-> scroll-ref
+                                      deref
+                                      reset-scroll)
+                              (on-tab-change tab))}]]))
 
 (defn animated-banner
   [{:keys [scroll-ref tabs selected-tab on-tab-change scroll-shared-value content customization-color]}]

src/status_im2/common/home/header_spacing/style.cljs

@@ -1,8 +1,11 @@
 (ns status-im2.common.home.header-spacing.style
   (:require
     [react-native.safe-area :as safe-area]
-    [status-im2.common.home.constants :as constants]))
+    [status-im2.common.home.constants :as constants]
+    status-im2.constants))
 
 (defn header-spacing
-  []
-  {:height (+ constants/header-height (safe-area/get-top))})
+  [testnet-enabled?]
+  {:height (+ constants/header-height
+              (safe-area/get-top)
+              (when testnet-enabled? status-im2.constants/testnet-banner-height))})

src/status_im2/common/home/header_spacing/view.cljs

@@ -1,8 +1,10 @@
 (ns status-im2.common.home.header-spacing.view
   (:require
     [react-native.core :as rn]
-    [status-im2.common.home.header-spacing.style :as style]))
+    [status-im2.common.home.header-spacing.style :as style]
+    [utils.re-frame :as rf]))
 
 (defn view
   []
-  [rn/view {:style (style/header-spacing)}])
+  (let [testnet-enabled? (rf/sub [:profile/testnet-enabled?])]
+    [rn/view {:style (style/header-spacing testnet-enabled?)}]))

src/status_im2/common/home/top_nav/view.cljs

@@ -14,7 +14,8 @@
    :jump-to? true/false
    :container-style passed to outer view of component}"
   [{:keys [container-style blur? jump-to?]}]
-  (let [{:keys [public-key] :as profile} (rf/sub [:profile/profile-with-image])
+  (let [testnet-enabled?                 (rf/sub [:profile/testnet-enabled?])
+        {:keys [public-key] :as profile} (rf/sub [:profile/profile-with-image])
         online?                          (rf/sub [:visibility-status-updates/online?
                                                   public-key])
         customization-color              (rf/sub [:profile/customization-color])
@@ -37,7 +38,10 @@
       :scan-on-press            #(js/alert "to be implemented")
       :activity-center-on-press #(rf/dispatch [:activity-center/open])
       :qr-code-on-press         #(dispatch-and-chill [:open-modal :share-shell] 1000)
-      :container-style          (merge style/top-nav-container container-style)
+      :container-style          (merge style/top-nav-container
+                                       (when testnet-enabled?
+                                         {:margin-top constants/testnet-banner-height})
+                                       container-style)
       :blur?                    blur?
       :jump-to?                 jump-to?
       :customization-color      customization-color

src/status_im2/constants.cljs

@@ -394,3 +394,5 @@
 
 (def ^:const status-address-domain ".stateofus.eth")
 (def ^:const eth-address-domain ".eth")
+
+(def ^:const testnet-banner-height 40)

src/status_im2/contexts/shell/jump_to/components/jump_to_screen/view.cljs

@@ -8,6 +8,7 @@
     [react-native.linear-gradient :as linear-gradient]
     [react-native.safe-area :as safe-area]
     [status-im2.common.home.top-nav.view :as common.top-nav]
+    [status-im2.constants :as constants]
     [status-im2.contexts.shell.jump-to.components.bottom-tabs.view :as bottom-tabs]
     [status-im2.contexts.shell.jump-to.components.jump-to-screen.style :as style]
     [status-im2.contexts.shell.jump-to.components.switcher-cards.view :as switcher-cards]
@@ -41,11 +42,13 @@
 
 (defn jump-to-text
   []
-  [quo/text
-   {:size   :heading-1
-    :weight :semi-bold
-    :style  (style/jump-to-text (safe-area/get-top))}
-   (i18n/label :t/jump-to)])
+  (let [testnet-enabled? (rf/sub [:profile/testnet-enabled?])]
+    [quo/text
+     {:size   :heading-1
+      :weight :semi-bold
+      :style  (style/jump-to-text (+ (safe-area/get-top)
+                                     (when testnet-enabled? constants/testnet-banner-height)))}
+     (i18n/label :t/jump-to)]))
 
 (defn render-card
   [{:keys [type screen-id] :as card}]
@@ -96,10 +99,11 @@
 
 (defn view
   []
-  (let [switcher-cards (rf/sub [:shell/sorted-switcher-cards])
-        width          (rf/sub [:dimensions/window-width])
-        top            (safe-area/get-top)
-        shell-margin   (/ (- width (* 2 shell.constants/switcher-card-size)) 3)]
+  (let [testnet-enabled? (rf/sub [:profile/testnet-enabled?])
+        switcher-cards   (rf/sub [:shell/sorted-switcher-cards])
+        width            (rf/sub [:dimensions/window-width])
+        top              (+ (safe-area/get-top) (when testnet-enabled? constants/testnet-banner-height))
+        shell-margin     (/ (- width (* 2 shell.constants/switcher-card-size)) 3)]
     [theme/provider {:theme :dark}
      [rn/view
       {:style {:top              0

src/status_im2/contexts/wallet/events.cljs

@@ -17,6 +17,11 @@
     [utils.re-frame :as rf]
     [utils.transforms :as types]))
 
+(rf/reg-event-fx
+ :wallet/hide-token-loading
+ (fn [{:keys [db]}]
+   {:db (assoc-in db [:wallet :ui :tokens-loading?] false)}))
+
 (rf/reg-event-fx :wallet/show-account-created-toast
  (fn [{:keys [db]} [address]]
    (let [account (get-in db [:wallet :accounts address])]

src/status_im2/navigation/options.cljs

@@ -81,7 +81,8 @@
 
 (def transparent-screen-options
   (merge
-   {:modalPresentationStyle :overCurrentContext
+   {:show-blur?             true
+    :modalPresentationStyle :overCurrentContext
     :theme                  :dark
     :layout                 {:componentBackgroundColor :transparent
                              :orientation              ["portrait"]
@@ -112,26 +113,29 @@
                    :backgroundColor          colors/neutral-95}}))
 
 (def lightbox
-  {:topBar        {:visible false}
-   :statusBar     {:backgroundColor :transparent
-                   :style           :light
-                   :animate         true
-                   :drawBehind      true
-                   :translucent     true}
-   :navigationBar {:backgroundColor colors/neutral-100}
-   :layout        {:componentBackgroundColor :transparent
-                   :backgroundColor          :transparent
-                   ;; issue: https://github.com/wix/react-native-navigation/issues/7726
-                   :orientation              (if platform/ios? ["portrait" "landscape"] ["portrait"])}
-   :animations    {:push {:sharedElementTransitions [{:fromId        :shared-element
-                                                      :toId          :shared-element
-                                                      :interpolation {:type   :decelerate
-                                                                      :factor 1.5}}]}
-                   :pop  {:sharedElementTransitions [{:fromId        :shared-element
-                                                      :toId          :shared-element
-                                                      :interpolation {:type
-                                                                      :decelerate
-                                                                      :factor 1.5}}]}}})
+  {:hide-testnet-banner? true
+   :topBar               {:visible false}
+   :statusBar            {:backgroundColor :transparent
+                          :style           :light
+                          :animate         true
+                          :drawBehind      true
+                          :translucent     true}
+   :navigationBar        {:backgroundColor colors/neutral-100}
+   :layout               {:componentBackgroundColor :transparent
+                          :backgroundColor          :transparent
+                          ;; issue: https://github.com/wix/react-native-navigation/issues/7726
+                          :orientation              (if platform/ios?
+                                                      ["portrait" "landscape"]
+                                                      ["portrait"])}
+   :animations           {:push {:sharedElementTransitions [{:fromId        :shared-element
+                                                             :toId          :shared-element
+                                                             :interpolation {:type   :decelerate
+                                                                             :factor 1.5}}]}
+                          :pop  {:sharedElementTransitions [{:fromId        :shared-element
+                                                             :toId          :shared-element
+                                                             :interpolation {:type
+                                                                             :decelerate
+                                                                             :factor 1.5}}]}}})
 
 (def camera-screen
   {:navigationBar {:backgroundColor colors/black}})

src/status_im2/navigation/view.cljs

@@ -1,7 +1,9 @@
 (ns status-im2.navigation.view
   (:require
+    [quo.core :as quo]
     [quo.foundations.colors :as colors]
     [quo.theme :as theme]
+    [react-native.blur :as blur]
     [react-native.core :as rn]
     [react-native.safe-area :as safe-area]
     [reagent.core :as reagent]
@@ -13,8 +15,10 @@
     [status-im2.common.bottom-sheet-screen.view :as bottom-sheet-screen]
     [status-im2.common.bottom-sheet.view :as bottom-sheet]
     [status-im2.common.toasts.view :as toasts]
+    [status-im2.constants :as constants]
     [status-im2.navigation.screens :as screens]
     [status-im2.setup.hot-reload :as reloader]
+    [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
 (defn get-screens
@@ -50,25 +54,76 @@
    (when top?
      {:padding-top (safe-area/get-top)})))
 
+
+(defn banner-view-internal
+  [{:keys [theme show-blur?]}]
+  [:<>
+   ;; Adding blur for top safe area for screens such as activity center, and scan QR code.
+   (when show-blur?
+     [blur/view
+      {:style        {:position :absolute
+                      :top      0
+                      :left     0
+                      :right    0
+                      :height   (safe-area/get-top)}
+       :overlayColor colors/neutral-80-opa-80
+       :blur-amount  20}])
+   [rn/view
+    {:style {:position         :absolute
+             :top              0
+             :left             0
+             :right            0
+             :z-index          1
+             :padding-top      (safe-area/get-top)
+             :background-color (colors/resolve-color :warning theme 20)}}
+    [quo/text
+     {:style  {:padding-vertical 11
+               :height           constants/testnet-banner-height
+               :color            (colors/resolve-color :warning theme)
+               :text-align       :center}
+      :weight :medium
+      :size   :paragraph-2}
+     (i18n/label :t/testnet-mode-enabled)]]])
+
+(def banner-view (quo.theme/with-theme banner-view-internal))
+
+(defn wrapper-view
+  [{:keys [component show-blur? hide-testnet-banner?]
+    :or   {hide-testnet-banner? false}}]
+  (let [testnet-enabled? (rf/sub [:profile/testnet-enabled?])]
+    [:<>
+     [rn/view
+      {:style (cond-> {:flex 1}
+
+                testnet-enabled?
+                (assoc :padding-top constants/testnet-banner-height))}
+      [component]]
+     (when (and testnet-enabled? (not hide-testnet-banner?))
+       [banner-view {:show-blur? show-blur?}])]))
+
 (defn screen
   [screen-key]
   (reagent.core/reactify-component
    (fn []
-     (let [{:keys [component options]}   (get (if js/goog.DEBUG
-                                                (get-screens)
-                                                screens)
-                                              (keyword screen-key))
-           {:keys [insets sheet? theme]} options
-           user-theme                    (theme/get-theme)
-           background-color              (or (get-in options [:layout :backgroundColor])
-                                             (when sheet? :transparent))]
+     (let [{:keys [component options]}    (get (if js/goog.DEBUG
+                                                 (get-screens)
+                                                 screens)
+                                               (keyword screen-key))
+           {:keys [insets sheet? theme show-blur?
+                   hide-testnet-banner?]} options
+           user-theme                     (theme/get-theme)
+           background-color               (or (get-in options [:layout :backgroundColor])
+                                              (when sheet? :transparent))]
        ^{:key (str "root" screen-key @reloader/cnt)}
        [theme/provider {:theme (or theme user-theme)}
         [rn/view {:style (wrapped-screen-style insets background-color)}
          [inactive]
          (if sheet?
            [bottom-sheet-screen/view {:content component}]
-           [component])]
+           [wrapper-view
+            {:component            component
+             :show-blur?           show-blur?
+             :hide-testnet-banner? hide-testnet-banner?}])]
         (when js/goog.DEBUG
           [:<>
            [reloader/reload-view]

src/status_im2/subs/profile.cljs

@@ -13,6 +13,13 @@
     [utils.image-server :as image-server]
     [utils.security.core :as security]))
 
+(re-frame/reg-sub
+ :profile/testnet-enabled?
+ :<- [:multiaccount/logged-in?]
+ :<- [:profile/profile]
+ (fn [[logged-in? {:keys [test-networks-enabled?]}]]
+   (if logged-in? (boolean? test-networks-enabled?) false)))
+
 (re-frame/reg-sub
  :profile/customization-color
  :<- [:profile/profile]

translations/en.json

@@ -2429,5 +2429,6 @@
     "backup-step-4": "I know I can only see it once",
     "reveal-phrase": "Reveal phrase",
     "i-have-written": "I have written it down on paper",
-    "next-you-will": "Next, you will be asked to confirm the position of certain words in your recovery phrase"
+    "next-you-will": "Next, you will be asked to confirm the position of certain words in your recovery phrase",
+    "testnet-mode-enabled": "Testnet mode enabled"
 }