Use interactive components from Quo

.env

@@ -23,3 +23,4 @@ STATUS_GO_PROTOCOL=0
 STATUS_GO_ENABLE_NIMBUS=0
 KEYCARD_TEST_MENU=0
 QR_READ_TEST_MENU=1
+ENABLE_ROOT_ALERT=1

.env.e2e

@@ -23,3 +23,4 @@ TOOLTIP_EVENTS=1
 COMMANDS_ENABLED=1
 KEYCARD_TEST_MENU=1
 QR_READ_TEST_MENU=1
+ENABLE_ROOT_ALERT=0

.env.jenkins

@@ -21,3 +21,4 @@ CONTRACT_NODES=1
 MOBILE_UI_FOR_DESKTOP=1
 STATUS_GO_ENABLE_NIMBUS=0
 KEYCARD_TEST_MENU=0
+ENABLE_ROOT_ALERT=1

.env.nightly

@@ -18,3 +18,4 @@ PARTITIONED_TOPIC=0
 CONTRACT_NODES=1
 MOBILE_UI_FOR_DESKTOP=1
 HARDWALLET_ENABLED=1
+ENABLE_ROOT_ALERT=1

.env.release

@@ -17,3 +17,4 @@ RPC_NETWORKS_ONLY=1
 PARTITIONED_TOPIC=0
 MOBILE_UI_FOR_DESKTOP=1
 HARDWALLET_ENABLED=1
+ENABLE_ROOT_ALERT=1

android/app/src/main/java/im/status/ethereum/MainActivity.java

@@ -199,7 +199,7 @@ public void onConfigurationChanged(Configuration newConfig) {
     private static final Integer FREQUENCY_OF_REMINDER_IN_PERCENT = 5;
 
     private boolean shouldShowRootedNotification() {
-        if (RootUtil.isDeviceRooted()) {
+        if (RootUtil.isDeviceRooted() && BuildConfig.ENABLE_ROOT_ALERT == "1") {
             if (userRejectedRootedNotification()) {
                 return ((Math.random() * 100) < FREQUENCY_OF_REMINDER_IN_PERCENT);
             } else return true;

src/mocks/js_dependencies.cljs

@@ -17,7 +17,7 @@
 
 (def react-native
   (clj->js {:NativeModules {:RNGestureHandlerModule {:Direction (fn [])}
-                            :ReanimatedModule {:configureProps (fn [])}}
+                            :ReanimatedModule       {:configureProps (fn [])}}
 
             :View                     {}
             :FlatList                 {}

src/quo/animated.cljs

@@ -174,11 +174,14 @@
 (defn loop* [opts]
   (ocall redash "loop" (clj->js opts)))
 
-(defn use-value [value]
-  (.useValue ^js redash value))
+(def use-value (.-useValue ^js redash))
 
-(defn use-clock []
-  (.useClock ^js redash))
+(def use-clock (.-useClock ^js redash))
+
+(defn use-gesture [opts]
+  (let [gesture (.useGestureHandler ^js redash (clj->js opts))]
+    {:onHandlerStateChange (.-onHandlerStateChange ^js gesture)
+     :onGestureEvent       (.-onGestureEvent ^js gesture)}))
 
 (defn snap-point [value velocity snap-points]
   (.snapPoint ^js redash value velocity (to-array snap-points)))

src/quo/components/animated/pressable.cljs

@@ -1,5 +1,8 @@
 (ns quo.components.animated.pressable
   (:require [quo.animated :as animated]
+            [quo.react :as react]
+            [reagent.core :as reagent]
+            [cljs-bean.core :as bean]
             [quo.gesture-handler :as gesture-handler]))
 
 (def long-press-duration 500)
@@ -38,65 +41,89 @@
    :foreground {:transform [{:scale (animated/mix animation 1 scale-down-small)}]
                 :opacity   (animated/mix animation 1 opactiy)}})
 
+(defmethod type->animation :scale
+  [{:keys [animation]}]
+  {:background {:opacity 0}
+   :foreground {:transform [{:scale (animated/mix animation 1 scale-down-small)}]
+                :opacity   (animated/mix animation 1 opactiy)}})
+
 (def absolute-fill
   {:top      0
    :bottom   0
    :left     0
    :right    0
    :position :absolute})
 
-(defn pressable []
-  (let [state           (animated/value (:undetermined gesture-handler/states))
-        active          (animated/eq state (:began gesture-handler/states))
-        gesture-handler (animated/on-gesture {:state state})
-        duration        (animated/cond* active time-in time-out)
-        long-pressed    (animated/value 0)
-        long-duration   (animated/cond* active long-press-duration 0)
-        long-timing     (animated/with-timing-transition active
-                          {:duration long-duration})
-        animation       (animated/with-timing-transition active
-                          {:duration duration
-                           :easing   (:ease-in animated/easings)})]
-    (fn [{:keys [background-color border-radius type disabled
-                 on-press on-long-press on-press-start
-                 accessibility-label]
-          :or   {border-radius 0
-                 type          :primary}}
-         & children]
-      (let [{:keys [background foreground]}
-            (type->animation {:type      type
-                              :animation animation})
-            handle-press       (fn [] (when on-press (on-press)))
-            handle-press-start (fn [] (when on-press-start (on-press-start)))
-            handle-long-press  (fn [] (when on-long-press (on-long-press)))]
-        [:<>
-         (when on-long-press
-           [animated/code
-            {:exec (animated/block
-                    [(animated/cond* (animated/eq long-timing 1)
-                                     (animated/set long-pressed 1))
-                     (animated/cond* long-pressed
-                                     [(animated/set long-pressed 0)
-                                      (animated/call* [] handle-long-press)
-                                      (animated/set state (:undetermined gesture-handler/states))])])}])
-         [animated/code
-          {:key  (str on-press on-long-press on-press-start)
-           :exec (animated/on-change state
-                                     [(animated/cond* (animated/eq state (:began gesture-handler/states))
-                                                      (animated/call* [] handle-press-start))
-                                      (animated/cond* (animated/and* (animated/eq state (:end gesture-handler/states))
-                                                                     (animated/not* long-pressed))
-                                                      [(animated/call* [] handle-press)
-                                                       (animated/set state (:undetermined gesture-handler/states))])])}]
-         [gesture-handler/tap-gesture-handler
-          (merge gesture-handler
-                 {:shouldCancelWhenOutside true
-                  :enabled                 (not disabled)})
-          [animated/view {:accessible          true
-                          :accessibility-label accessibility-label}
-           [animated/view {:style (merge absolute-fill
-                                         background
-                                         {:background-color background-color
-                                          :border-radius    border-radius})}]
-           (into [animated/view {:style foreground}]
-                 children)]]]))))
+(defn pressable-hooks [props]
+  (let [{background-color    :bgColor
+         border-radius       :borderRadius
+         type                :type
+         disabled            :disabled
+         on-press            :onPress
+         on-long-press       :onLongPress
+         on-press-start      :onPressStart
+         accessibility-label :accessibilityLabel
+         children            :children
+         :or                 {border-radius 0
+                              type          "primary"}}
+        (bean/bean props)
+        long-press-ref       (react/create-ref)
+        state                (animated/use-value (:undetermined gesture-handler/states))
+        active               (animated/eq state (:began gesture-handler/states))
+        gesture-handler      (animated/use-gesture {:state state})
+        animation            (react/use-memo
+                              (fn []
+                                (animated/with-timing-transition active
+                                  {:duration (animated/cond* active time-in time-out)
+                                   :easing   (:ease-in animated/easings)}))
+                              [])
+        {:keys [background
+                foreground]} (react/use-memo
+                              (fn []
+                                (type->animation {:type      (keyword type)
+                                                  :animation animation}))
+                              [type])
+        handle-press         (fn [] (when on-press (on-press)))
+        handle-press-start   (fn [] (when on-press-start (on-press-start)))
+        long-gesture-handler (fn [^js evt]
+                               (when (and on-long-press
+                                          (= (-> evt .-nativeEvent .-state)
+                                             (:active gesture-handler/states)))
+                                 (on-long-press)
+                                 (animated/set-value state (:undetermined gesture-handler/states))))]
+    (animated/code!
+     (fn []
+       (when on-press-start
+         (animated/cond* (animated/eq state (:began gesture-handler/states))
+                         (animated/call* [] handle-press-start))))
+     [on-press-start])
+    (animated/code!
+     (fn []
+       (when on-press
+         (animated/cond* (animated/eq state (:end gesture-handler/states))
+                         [(animated/set state (:undetermined gesture-handler/states))
+                          (animated/call* [] handle-press)])))
+     [on-press])
+    (reagent/as-element
+     [gesture-handler/long-press-gesture-handler
+      {:enabled                 (boolean (and on-long-press (not disabled)))
+       :on-handler-state-change long-gesture-handler
+       :min-duration-ms         long-press-duration
+       :ref                     long-press-ref}
+      [animated/view {:accessible          true
+                      :accessibility-label accessibility-label}
+       [gesture-handler/tap-gesture-handler
+        (merge gesture-handler
+               {:shouldCancelWhenOutside true
+                :wait-for                long-press-ref
+                :enabled                 (boolean (and (or on-press on-long-press on-press-start)
+                                                       (not disabled)))})
+        [animated/view
+         [animated/view {:style (merge absolute-fill
+                                       background
+                                       {:background-color background-color
+                                        :border-radius    border-radius})}]
+         (into [animated/view {:style foreground}]
+               (react/get-children children))]]]])))
+
+(def pressable (reagent/adapt-react-class (react/memo pressable-hooks)))

src/quo/components/animated_header.cljs

@@ -5,7 +5,6 @@
             [quo.components.safe-area :as safe-area]
             [quo.design-system.colors :as colors]
             [quo.platform :as platform]
-            [quo.react-native :as rn]
             [reagent.core :as reagent]))
 
 (defn header-wrapper-style [{:keys [value offset]}]
@@ -18,7 +17,8 @@
                    :outputRange [0 4]
                    :extrapolate (:clamp animated/extrapolate)})})
    (when (and offset platform/ios?)
-     {:shadow-opacity (animated/interpolate
+     {:z-index        2
+      :shadow-opacity (animated/interpolate
                        value
                        {:inputRange  [0 offset]
                         :outputRange [0 1]
@@ -66,8 +66,9 @@
                          :title-align     :left}
                         (dissoc props :extended-header))]]
        (into [animated/scroll-view {:on-scroll           on-scroll
-                                    :scrollEventThrottle 1}
-              [rn/view {:pointer-events :box-none}
+                                    :style               {:z-index 1}
+                                    :scrollEventThrottle 16}
+              [animated/view {:pointer-events :box-none}
                [animated/view {:pointer-events :box-none
                                :on-layout      on-layout}
                 [extended-header {:value     y