Security warning for browser view [#4298]

Signed-off-by: Julien Eluard <julien.eluard@gmail.com>

src/status_im/translations/en.cljs

@@ -633,4 +633,5 @@
    :enter-dapp-url                       "Enter a ÐApp URL"
    :dapp                                 "ÐApp"
    :selected                             "Selected"
-   :selected-dapps                       "Selected ÐApps"})
+   :selected-dapps                       "Selected ÐApps"
+   :browser-warning                      "Connection is not proven secure. Make sure you trust this site before signing transactions or entering personal data."})

src/status_im/ui/components/colors.cljs

@@ -12,6 +12,7 @@
 (def gray-light "#e8ebec") ;; Used as divider color
 (def gray-lighter "#eef2f5")  ;; Used as a background or shadow
 (def gray-transparent "rgba(184, 193, 199, 0.5)") ;; Used for tabs
+(def gray-notifications "#4A5054cc") ;; Used for notifications background
 (def gray-border "#ececf0")
 (def blue "#4360df") ;; Used as main wallet color, and ios home add button
 (def blue-dark "#3147ac") ;; Used as secondary wallet color (icon background)

src/status_im/ui/components/connectivity/styles.cljs

@@ -1,5 +1,6 @@
 (ns status-im.ui.components.connectivity.styles
-  (:require-macros [status-im.utils.styles :refer [defnstyle]]))
+  (:require-macros [status-im.utils.styles :refer [defnstyle]])
+  (:require [status-im.ui.components.colors :as colors]))
 
 (defnstyle text-wrapper [top opacity window-width pending?]
   {:ios              {:z-index 0}
@@ -7,7 +8,7 @@
    :width            window-width
    :top              (+ (+ 56 top) (if pending? 35 0))
    :position         :absolute
-   :background-color "#828b92cc"
+   :background-color colors/gray-notifications
    :height           35})
 
 (def text

src/status_im/ui/components/tooltip/animations.cljs

@@ -1,12 +1,12 @@
 (ns status-im.ui.components.tooltip.animations
   (:require [status-im.ui.components.animation :as animation]))
 
-(defn animate-tooltip [bottom-value bottom-anim-value opacity-value]
+(defn animate-tooltip [bottom-value bottom-anim-value opacity-value delta]
   (fn []
     (animation/start
      (animation/parallel
       [(animation/timing opacity-value {:toValue  1
                                         :duration 500})
-       (animation/timing bottom-anim-value {:toValue  (- bottom-value 10)
+       (animation/timing bottom-anim-value {:toValue  (- bottom-value delta)
                                             :easing   (.bezier (animation/easing) 0.685, 0.000, 0.025, 1.185)
                                             :duration 500})]))))

src/status_im/ui/components/tooltip/styles.cljs

@@ -1,5 +1,7 @@
 (ns status-im.ui.components.tooltip.styles
-  (:require [status-im.ui.components.styles :as styles]))
+  (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
+  (:require [status-im.ui.components.styles :as styles]
+            [status-im.ui.components.colors :as colors]))
 
 (def tooltip-container
   {:position    :absolute
@@ -8,6 +10,14 @@
    :right       0
    :top         0})
 
+(defstyle bottom-tooltip-container
+  {:position    :absolute
+   :align-items :center
+   :left        12
+   :right       12
+   :ios         {:top 0}
+   :android     {:top 30}})
+
 (defn tooltip-animated [bottom-value opacity-value]
   {:position    :absolute
    :align-items :center
@@ -22,10 +32,27 @@
    :background-color   color
    :border-radius      8})
 
+(def bottom-tooltip-text-container
+  {:flex-direction     :row
+   :align-items        :center
+   :margin-horizontal  12
+   :padding-horizontal 16
+   :padding-vertical   9
+   :background-color   colors/gray-notifications
+   :border-radius      8})
+
 (defn tooltip-text [font-size]
   {:color     styles/color-red-2
    :font-size font-size})
 
+(def bottom-tooltip-text
+  {:color     colors/white
+   :font-size 15})
+
 (def tooltip-triangle
-  {:width   16
+  {:width  16
-   :height  8})
+   :height 8})
+
+(def close-icon
+  {:margin-right 4
+   :margin-left  10})

src/status_im/ui/components/tooltip/views.cljs

@@ -4,14 +4,33 @@
             [status-im.ui.components.tooltip.animations :as animations]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.icons.vector-icons :as vector-icons]
-            [status-im.ui.components.tooltip.styles :as styles]))
+            [status-im.ui.components.tooltip.styles :as styles]
+            [status-im.ui.components.colors :as colors]
+            [reagent.core :as reagent]))
 
 (views/defview tooltip [label & [{:keys [bottom-value color font-size] :or {bottom-value -30 color :white font-size 15}}]]
   (views/letsubs [bottom-anim-value (animation/create-value bottom-value)
-                  opacity-value (animation/create-value 0)]
+                  opacity-value     (animation/create-value 0)]
-    {:component-did-mount (animations/animate-tooltip bottom-value bottom-anim-value opacity-value)}
+    {:component-did-mount (animations/animate-tooltip bottom-value bottom-anim-value opacity-value 10)}
     [react/view styles/tooltip-container
-     [react/animated-view {:style (styles/tooltip-animated bottom-value opacity-value)}
+     [react/animated-view {:style (styles/tooltip-animated bottom-anim-value opacity-value)}
       [react/view (styles/tooltip-text-container color)
        [react/text {:style (styles/tooltip-text font-size)} label]]
-      [vector-icons/icon :icons/tooltip-triangle {:color color :style styles/tooltip-triangle}]]]))
+      [vector-icons/icon :icons/tooltip-triangle {:color color :style styles/tooltip-triangle}]]]))
+
+(views/defview bottom-tooltip-info [label]
+  (views/letsubs [opened?           (reagent/atom true)
+                  bottom-anim-value (animation/create-value -150)
+                  opacity-value     (animation/create-value 0)]
+    {:component-did-mount (animations/animate-tooltip -150 bottom-anim-value opacity-value -10)}
+    (when @opened?
+      [react/view styles/bottom-tooltip-container
+       [react/animated-view {:style (styles/tooltip-animated bottom-anim-value opacity-value)}
+        [vector-icons/icon :icons/tooltip-triangle {:color           colors/gray-notifications
+                                                    :style           styles/tooltip-triangle
+                                                    :container-style {:transform [{:rotate "180deg"}]}}]
+        [react/view styles/bottom-tooltip-text-container
+         [react/text {:style styles/bottom-tooltip-text} label]
+         [react/touchable-highlight {:on-press #(reset! opened? false)
+                                     :style    styles/close-icon}
+          [vector-icons/icon :icons/close {:color colors/white}]]]]])))

src/status_im/ui/screens/browser/views.cljs

@@ -15,7 +15,8 @@
             [status-im.ui.components.icons.vector-icons :as vector-icons]
             [status-im.i18n :as i18n]
             [status-im.utils.ethereum.core :as ethereum]
-            [status-im.ui.components.toolbar.actions :as actions]))
+            [status-im.ui.components.toolbar.actions :as actions]
+            [status-im.ui.components.tooltip.views :as tooltip]))
 
 (views/defview toolbar-content-dapp [contact-identity]
   (views/letsubs [contact [:get-contact-by-identity contact-identity]]
@@ -45,11 +46,7 @@
                          :auto-capitalize   :none
                          :auto-correct      false
                          :default-value     url
-                         :style             styles/url-input}]
+                         :style             styles/url-input}]]]))
-      ;;TODO .reload doesn't work, implement later
-      #_[react/touchable-highlight {:on-press #(when @webview (.reload @webview))}
-         [react/view
-          [vector-icons/icon :icons/refresh]]]]]))
 
 (defn- web-view-error [_ code desc]
   (reagent/as-element
@@ -129,4 +126,7 @@
                                   :style               styles/forward-button
                                   :accessibility-label :next-page-button}
        [react/view (when (not can-go-forward?) {:opacity 0.4})
-        [vector-icons/icon :icons/arrow-right]]]]]))
+        [vector-icons/icon :icons/arrow-right]]]]
+     (when-not dapp?
+       [tooltip/bottom-tooltip-info
+        (i18n/label :t/browser-warning)])]))