status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Security warning for browser view [#4298] 

Signed-off-by: Julien Eluard <julien.eluard@gmail.com>
This commit is contained in:
Andrey Shovkoplyas 2018-05-21 16:44:46 +03:00 committed by Julien Eluard
parent 25bb59aec6
commit faddabbf74
No known key found for this signature in database
GPG Key ID: 6FD7DB5437FCBEF6
7 changed files with 69 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/status_im/translations/en.cljs
View File

@ -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."})

1
src/status_im/ui/components/colors.cljs
View File

@ -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)

5
src/status_im/ui/components/connectivity/styles.cljs
View File

@ -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

4
src/status_im/ui/components/tooltip/animations.cljs
View File

@ -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})]))))

33
src/status_im/ui/components/tooltip/styles.cljs
View File

@ -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
:height 8})
{:width 16
:height 8})
(def close-icon
{:margin-right 4
:margin-left 10})

27
src/status_im/ui/components/tooltip/views.cljs
View File

@ -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)]
{:component-did-mount (animations/animate-tooltip bottom-value bottom-anim-value opacity-value)}
opacity-value (animation/create-value 0)]
{: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}]]]))
(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}]]]]])))

14
src/status_im/ui/screens/browser/views.cljs
View File

@ -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}]
;;TODO .reload doesn't work, implement later
#_[react/touchable-highlight {:on-press #(when @webview (.reload @webview))}
[react/view
[vector-icons/icon :icons/refresh]]]]]))
:style styles/url-input}]]]))
(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)])]))