diff --git a/src/status_im/ui/components/radio.cljs b/src/status_im/ui/components/radio.cljs new file mode 100644 index 0000000000..6558a8be04 --- /dev/null +++ b/src/status_im/ui/components/radio.cljs @@ -0,0 +1,10 @@ +(ns status-im.ui.components.radio + (:require [status-im.ui.components.react :as react] + [status-im.ui.components.colors :as colors])) + +(defn radio [selected?] + [react/view {:style {:width 20 :height 20 :border-radius 10 :align-items :center :justify-content :center + :background-color (if selected? colors/blue colors/gray-lighter)}} + (when selected? + [react/view {:style {:width 12 :height 12 :border-radius 6 + :background-color colors/white}}])]) \ No newline at end of file diff --git a/src/status_im/ui/screens/browser/open_dapp/styles.cljs b/src/status_im/ui/screens/browser/open_dapp/styles.cljs index e580862a5f..894ea4c13d 100644 --- a/src/status_im/ui/screens/browser/open_dapp/styles.cljs +++ b/src/status_im/ui/screens/browser/open_dapp/styles.cljs @@ -26,14 +26,40 @@ (def dapp-store-container {:margin 16 :border-color colors/gray-lighter + :margin-top 8 :border-width 1 :border-radius 12 :padding-vertical 16 :padding-horizontal 44 :align-items :center}) +(def privacy-container + {:margin-horizontal 16 + :margin-top 8 + :border-color colors/gray-lighter + :border-width 1 + :border-radius 12 + :padding-vertical 8 + :padding-left 16}) + (def open-dapp-store {:margin-top 12 :font-size 15 :font-weight "500" :line-height 22}) + +(def close-icon-container + {:width 21 + :height 21 + :border-radius 12 + :background-color colors/gray + :align-items :center + :justify-content :center}) + +(def might-break + {:margin-left 34 + :font-size 13 + :font-weight "500" + :color colors/gray + :line-height 18 + :margin-top 2}) \ No newline at end of file diff --git a/src/status_im/ui/screens/browser/open_dapp/views.cljs b/src/status_im/ui/screens/browser/open_dapp/views.cljs index 7d16c92fc0..2623cab0b5 100644 --- a/src/status_im/ui/screens/browser/open_dapp/views.cljs +++ b/src/status_im/ui/screens/browser/open_dapp/views.cljs @@ -12,7 +12,10 @@ [status-im.ui.components.bottom-bar.styles :as tabs.styles] [status-im.react-native.resources :as resources] [status-im.ui.components.list-item.views :as list-item] - [status-im.ui.components.icons.vector-icons :as vector-icons]) + [status-im.ui.components.icons.vector-icons :as vector-icons] + [status-im.ui.components.radio :as radio] + [status-im.ui.components.icons.vector-icons :as icons] + [reagent.core :as reagent]) (:require-macros [status-im.utils.views :as views])) (defn list-item [{:keys [browser-id name url]}] @@ -31,8 +34,39 @@ (def dapp-image-data {:image (:dapp-store resources/ui) :width 768 :height 333}) (def dapp-image (components.common/image-contain nil dapp-image-data)) +(def privacy-otions-visible? (reagent/atom true)) + +(views/defview privacy-options [] + (views/letsubs [{:keys [settings]} [:account/account]] + (let [privacy-enabled? (or (nil? (:web3-opt-in? settings)) (:web3-opt-in? settings))] + (when @privacy-otions-visible? + [react/view styles/privacy-container + [react/view {:style {:flex-direction :row}} + [react/view {:flex 1} + [react/text {:style {:typography :main-medium}} (i18n/label :t/dapps-can-access)]] + [react/touchable-highlight {:on-press #(reset! privacy-otions-visible? false)} + [react/view {:style {:width 40 :height 30 :align-items :center :margin-left 20}} + [react/view {:style styles/close-icon-container} + [icons/icon :main-icons/close {:color colors/white :width 19 :height 19}]]]]] + [react/touchable-highlight + {:on-press (when-not privacy-enabled? + #(re-frame/dispatch [:accounts.ui/web3-opt-in-mode-switched (not privacy-enabled?)]))} + [react/view {:style {:height 56 :justify-content :center :margin-top 8}} + [react/view {:style {:flex-direction :row :align-items :center}} + [radio/radio privacy-enabled?] + [react/text {:style {:margin-left 14}} (i18n/label :t/require-my-permission)]] + [react/text {:style styles/might-break} + (i18n/label :t/might-break)]]] + [react/touchable-highlight + {:on-press (when privacy-enabled? + #(re-frame/dispatch [:accounts.ui/web3-opt-in-mode-switched (not privacy-enabled?)]))} + [react/view {:style {:flex-direction :row :height 40 :align-items :center}} + [radio/radio (not privacy-enabled?)] + [react/text {:style {:margin-left 14}} (i18n/label :t/always-allow)]]]])))) + (defn list-header [empty?] [react/view (when empty? {:flex 1}) + [privacy-options] [react/touchable-highlight {:on-press #(re-frame/dispatch [:browser.ui/dapp-url-submitted "https://dap.ps"])} [react/view styles/dapp-store-container [dapp-image nil dapp-image-data] @@ -69,4 +103,4 @@ :align-self :stretch}}] :key-fn :browser-id :end-fill-color colors/white - :render-fn list-item}]])])) + :render-fn list-item}]])])) \ No newline at end of file diff --git a/src/status_im/ui/screens/profile/user/views.cljs b/src/status_im/ui/screens/profile/user/views.cljs index 820838f320..d2f93c41bd 100644 --- a/src/status_im/ui/screens/profile/user/views.cljs +++ b/src/status_im/ui/screens/profile/user/views.cljs @@ -101,8 +101,7 @@ :value value}])) (defn- my-profile-settings [{:keys [seed-backed-up? mnemonic]} - {:keys [dev-mode? - settings]} + account currency logged-in? extensions] @@ -145,11 +144,6 @@ :action-fn #(re-frame/dispatch [:navigate-to :installations]) :accessibility-label :pairing-settings-button}] [profile.components/settings-item-separator] - [profile.components/settings-switch-item - {:label-kw :t/web3-opt-in - :value (or (nil? (:web3-opt-in? settings)) (:web3-opt-in? settings)) - :action-fn #(re-frame/dispatch [:accounts.ui/web3-opt-in-mode-switched %])}] - [profile.components/settings-item-separator] [profile.components/settings-item {:label-kw :t/dapps-permissions :accessibility-label :dapps-permissions-button diff --git a/translations/en.json b/translations/en.json index 37afdecc89..322509abe6 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1026,5 +1026,9 @@ "load-more-messages": "↓ Fetch more messages", "load-messages-before": "before {{date}}", "open-dapp-store": "Discover ÐApps", - "browsed-websites": "Browsed websites will appear here." + "browsed-websites": "Browsed websites will appear here.", + "dapps-can-access" : "ÐApps can access my wallet and contact code", + "require-my-permission" : "Require my permission", + "might-break" : "Might break some ÐApps", + "always-allow" : "Always allow" }