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

[#5529]: Add UI for sharing deep links; update QR code screens 

Signed-off-by: Aleksandr Pantiukhov <alwxndr@gmail.com>
This commit is contained in:
Aleksandr Pantiukhov 2018-09-17 00:31:26 +02:00
parent 12021554f3
commit 523fa4ee09
No known key found for this signature in database
GPG Key ID: 153E4F21734042F5
20 changed files with 267 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/status_im/ui/components/button/styles.cljs
View File

@ -1,6 +1,7 @@
(ns status-im.ui.components.button.styles (ns status-im.ui.components.button.styles
(:require-macros [status-im.utils.styles :refer [defstyle defnstyle]]) (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
(:require [status-im.ui.components.styles :as styles] (:require [status-im.ui.components.colors :as colors]
[status-im.ui.components.styles :as styles]
[status-im.utils.platform :as platform])) [status-im.utils.platform :as platform]))
(def border-color styles/color-white-transparent-3) (def border-color styles/color-white-transparent-3)
@ -71,3 +72,31 @@
{:background-color styles/color-blue4-transparent})) {:background-color styles/color-blue4-transparent}))
(def secondary-button-text {:color styles/color-blue4}) (def secondary-button-text {:color styles/color-blue4})
(def button-with-icon-container
{:flex-direction :row
:justify-content :space-between
:align-items :center
:height 42
:margin-horizontal 16
:border-radius styles/border-radius
:background-color (colors/alpha colors/blue 0.1)})
(def button-with-icon-text-container
{:padding-left 16
:padding-bottom 1
:flex 0.9
:flex-direction :row
:justify-content :center
:align-items :center})
(def button-with-icon-text
{:color colors/blue
:font-size 15})
(def button-with-icon-image-container
{:border-radius 50
:flex 0.1
:padding-right 5
:align-items :center
:justify-content :center})

13
src/status_im/ui/components/button/view.cljs
View File

@ -1,6 +1,8 @@
(ns status-im.ui.components.button.view (ns status-im.ui.components.button.view
(:require [status-im.ui.components.button.styles :as styles] (:require [status-im.ui.components.button.styles :as styles]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.utils.platform :as platform])) [status-im.utils.platform :as platform]))
(defn button [{:keys [on-press style disabled? fit-to-text? text-style accessibility-label] :or {fit-to-text? true}} label icon] (defn button [{:keys [on-press style disabled? fit-to-text? text-style accessibility-label] :or {fit-to-text? true}} label icon]
@ -33,3 +35,14 @@
:style (merge styles/secondary-button style) :style (merge styles/secondary-button style)
:text-style (merge styles/secondary-button-text text-style)) :text-style (merge styles/secondary-button-text text-style))
label]) label])
(defn button-with-icon [{:keys [on-press label icon accessibility-label style]}]
[react/touchable-highlight {:on-press on-press}
[react/view (merge styles/button-with-icon-container style)
[react/view styles/button-with-icon-text-container
[react/text {:style styles/button-with-icon-text
:uppercase? true}
label]]
[react/view {:style styles/button-with-icon-image-container
:accessibility-label accessibility-label}
[vector-icons/icon icon {:color colors/blue}]]]])

61
src/status_im/ui/components/qr_code_viewer/styles.cljs
View File

@ -3,21 +3,21 @@
(:require-macros [status-im.utils.styles :refer [defstyle]])) (:require-macros [status-im.utils.styles :refer [defstyle]]))
(def qr-code-hint (def qr-code-hint
{:color colors/gray {:color colors/gray
:padding-top 24 :margin-vertical 12
:padding-bottom 22 :text-align :center})
:text-align :center})
(def qr-code-padding (def qr-code-max-width 208)
15) (def qr-code-padding 16)
(defn qr-code-container [width] (defn qr-code-container [width]
{:background-color colors/white {:align-self :center
:width width :width (+ width qr-code-padding qr-code-padding)
:align-items :center :background-color colors/white
:justify-content :center :border-color colors/gray-light
:padding qr-code-padding :border-width 1
:border-radius 8}) :border-radius 8
:padding qr-code-padding})
(defstyle name-container (defstyle name-container
{:flex 0.6 {:flex 0.6
@ -41,40 +41,35 @@
(def account-toolbar (def account-toolbar
{:background-color colors/white}) {:background-color colors/white})
(def toolbar-contents
{:flex-grow 1
:flex-direction :row
:height 55
:align-items :center
:justify-content :center})
(def qr-code (def qr-code
{:flex-grow 1 {:flex-grow 1
:align-items :center :justify-content :center})
:justify-content :center})
(def footer (def footer
{:flex-direction :row {:flex-direction :row
:justify-content :center :justify-content :center})
:padding-top 17})
(def wallet-info (def wallet-info
{:flex-grow 1 {:flex-grow 1
:align-items :center :align-items :center})
:padding-bottom 20})
(def hash-value-type (def hash-value-type
{:color colors/black {:color colors/black
:padding-bottom 5}) :padding-bottom 5})
(def hash-value-text (def hash-value-text
{:color colors/black {:color colors/black
:align-self :stretch :align-self :stretch
:margin-horizontal 60 :border-color colors/gray-light
:text-align :center :border-width 1
:font-size 15 :margin-horizontal 16
:letter-spacing -0.2 :padding-horizontal 8
:line-height 20}) :padding-vertical 6
:border-radius 8
:text-align :center
:font-size 15
:letter-spacing -0.2
:line-height 20})
(def done-button-text (def done-button-text
{:color colors/white}) {:color colors/white})

31
src/status_im/ui/components/qr_code_viewer/views.cljs
View File

@ -2,32 +2,35 @@
(:require [reagent.core :as reagent] (:require [reagent.core :as reagent]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[status-im.react-native.js-dependencies :as rn-dependencies] [status-im.react-native.js-dependencies :as rn-dependencies]
[status-im.ui.components.button.view :as button]
[status-im.ui.components.list-selection :as list-selection]
[status-im.ui.components.qr-code-viewer.styles :as styles] [status-im.ui.components.qr-code-viewer.styles :as styles]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.text :as text])) [status-im.i18n :as i18n]))
(defn qr-code [props] (defn qr-code [props]
(reagent/create-element (reagent/create-element
rn-dependencies/qr-code rn-dependencies/qr-code
(clj->js (merge {:inverted true} props)))) (clj->js (merge {:inverted true} props))))
(defn- footer [style value] (defn qr-code-viewer [{:keys [style hint-style footer-style footer-button value hint legend]}]
[react/view styles/footer
[react/view styles/wallet-info
[text/selectable-text {:value value
:style (merge styles/hash-value-text style)}]]])
(defn qr-code-viewer [{:keys [style hint-style footer-style]} value hint legend]
(if value (if value
(let [{:keys [width height]} @(re-frame/subscribe [:dimensions/window])] (let [{:keys [width]} @(re-frame/subscribe [:dimensions/window])]
[react/view {:style (merge styles/qr-code style)} [react/view {:style (merge styles/qr-code style)}
[react/text {:style (merge styles/qr-code-hint hint-style)}
hint]
(when width (when width
(let [size (int (* 0.7 (min width height)))] (let [size (int (min width styles/qr-code-max-width))]
[react/view {:style (styles/qr-code-container size) [react/view {:style (styles/qr-code-container size)
:accessibility-label :qr-code-image} :accessibility-label :qr-code-image}
[qr-code {:value value [qr-code {:value value
:size (- size (* 2 styles/qr-code-padding))}]])) :size size}]]))
[footer footer-style legend]]) [react/text {:style (merge styles/qr-code-hint hint-style)}
hint]
[react/view styles/footer
[react/view styles/wallet-info
[react/text {:style (merge styles/hash-value-text footer-style)
:accessibility-label :address-text
:selectable true}
legend]]]
(when footer-button
[footer-button value])])
[react/view [react/text "no value"]])) [react/view [react/text "no value"]]))

11
src/status_im/ui/components/text.cljs
View File

@ -1,14 +1,3 @@
(ns status-im.ui.components.text (ns status-im.ui.components.text
(:require [status-im.ui.components.react :as react] (:require [status-im.ui.components.react :as react]
[status-im.utils.platform :as platform])) [status-im.utils.platform :as platform]))
(defn- selectable-text [{:keys [value style]}]
(if platform/ios?
[react/text-input {:value value
:editable false
:multiline true
:style style}]
[react/text {:style style
:accessibility-label :address-text
:selectable true}
value]))

3
src/status_im/ui/screens/browser/styles.cljs
View File

@ -33,6 +33,9 @@
(def forward-button (def forward-button
{:margin-left 72}) {:margin-left 72})
(def share-button
{:margin-right 72})
(def background (def background
{:flex 1 {:flex 1
:background-color colors/gray-lighter :background-color colors/gray-lighter

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

@ -6,6 +6,7 @@
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.ui.components.colors :as colors] [status-im.ui.components.colors :as colors]
[status-im.ui.components.icons.vector-icons :as icons] [status-im.ui.components.icons.vector-icons :as icons]
[status-im.ui.components.list-selection :as list-selection]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.status-bar.view :as status-bar] [status-im.ui.components.status-bar.view :as status-bar]
[status-im.ui.components.styles :as components.styles] [status-im.ui.components.styles :as components.styles]
@ -16,6 +17,7 @@
[status-im.ui.screens.browser.permissions.views :as permissions.views] [status-im.ui.screens.browser.permissions.views :as permissions.views]
[status-im.ui.screens.browser.site-blocked.views :as site-blocked.views] [status-im.ui.screens.browser.site-blocked.views :as site-blocked.views]
[status-im.ui.screens.browser.styles :as styles] [status-im.ui.screens.browser.styles :as styles]
[status-im.ui.screens.wallet.actions :as wallet.actions]
[status-im.utils.ethereum.core :as ethereum] [status-im.utils.ethereum.core :as ethereum]
[status-im.utils.http :as http] [status-im.utils.http :as http]
[status-im.utils.js-resources :as js-res]) [status-im.utils.js-resources :as js-res])
@ -48,6 +50,10 @@
[react/touchable-highlight {:style {:flex 1} :on-press #(re-frame/dispatch [:browser.ui/url-input-pressed])} [react/touchable-highlight {:style {:flex 1} :on-press #(re-frame/dispatch [:browser.ui/url-input-pressed])}
[react/text {:style styles/url-text} (http/url-host url)]])]])) [react/text {:style styles/url-text} (http/url-host url)]])]]))
(defn- on-options [name browser-id]
(list-selection/show {:title name
:options (wallet.actions/actions browser-id)}))
(defn toolbar [error? url browser browser-id url-editing?] (defn toolbar [error? url browser browser-id url-editing?]
[toolbar.view/toolbar {} [toolbar.view/toolbar {}
[toolbar.view/nav-button-with-count [toolbar.view/nav-button-with-count
@ -56,10 +62,10 @@
(when error? (when error?
(re-frame/dispatch [:browser.ui/remove-browser-pressed browser-id]))))] (re-frame/dispatch [:browser.ui/remove-browser-pressed browser-id]))))]
[toolbar-content url browser url-editing?] [toolbar-content url browser url-editing?]
[toolbar.view/actions [{:icon :icons/wallet [toolbar.view/actions [{:icon :icons/options
:icon-opts {:color :black :icon-opts {:color :black
:accessibility-label :wallet-modal-button} :accessibility-label :chat-menu-button}
:handler #(re-frame/dispatch [:navigate-to :wallet-modal])}]]]) :handler #(on-options name browser-id)}]]])
(defn- web-view-error [_ code desc] (defn- web-view-error [_ code desc]
(reagent/as-element (reagent/as-element

11
src/status_im/ui/screens/chat/actions.cljs
View File

@ -1,6 +1,8 @@
(ns status-im.ui.screens.chat.actions (ns status-im.ui.screens.chat.actions
(:require [re-frame.core :as re-frame] (:require [re-frame.core :as re-frame]
[status-im.i18n :as i18n])) [status-im.i18n :as i18n]
[status-im.ui.components.list-selection :as list-selection]
[status-im.utils.universal-links.core :as universal-links]))
(def view-my-wallet (def view-my-wallet
{:label (i18n/label :t/view-my-wallet) {:label (i18n/label :t/view-my-wallet)
@ -14,6 +16,12 @@
{:label (i18n/label :t/group-info) {:label (i18n/label :t/group-info)
:action #(re-frame/dispatch [:show-group-chat-profile chat-id])}) :action #(re-frame/dispatch [:show-group-chat-profile chat-id])})
(defn- share-chat [chat-id]
(let [link (universal-links/generate-link :public-chat :external chat-id)
message (i18n/label :t/share-public-chat-text {:link link})]
{:label (i18n/label :t/share-chat)
:action #(list-selection/open-share {:message message})}))
(defn- clear-history [] (defn- clear-history []
{:label (i18n/label :t/clear-history) {:label (i18n/label :t/clear-history)
:action #(re-frame/dispatch [:chat.ui/clear-history-pressed])}) :action #(re-frame/dispatch [:chat.ui/clear-history-pressed])})
@ -36,6 +44,7 @@
(defn- public-chat-actions [chat-id] (defn- public-chat-actions [chat-id]
[view-my-wallet [view-my-wallet
(share-chat chat-id)
(clear-history) (clear-history)
(delete-chat chat-id true)]) (delete-chat chat-id true)])

24
src/status_im/ui/screens/profile/components/styles.cljs
View File

@ -22,16 +22,17 @@
:android {:color colors/black}}) :android {:color colors/black}})
(defstyle profile-name-input-text (defstyle profile-name-input-text
{:font-size 15 {:font-size 15
:text-align :center :text-align :center
:flex 1 :flex 1
:ios {:letter-spacing -0.2 :ios {:letter-spacing -0.2
:height 46 :margin-top 1
:border-bottom-width 1 :height 45
:border-bottom-color colors/gray-light} :border-bottom-width 1
:android {:color colors/black :border-bottom-color colors/gray-light}
:border-bottom-width 2 :android {:color colors/black
:border-bottom-color colors/blue}}) :border-bottom-width 2
:border-bottom-color colors/blue}})
(def profile-header-name-container (def profile-header-name-container
{:flex 1 {:flex 1
@ -90,4 +91,5 @@
(def profile-form (def profile-form
{:background-color colors/white {:background-color colors/white
:padding 16}) :padding-top 16
:padding-bottom 8})

2
src/status_im/ui/screens/profile/components/views.cljs
View File

@ -16,6 +16,7 @@
[react/view [react/view
[react/text-input [react/text-input
(merge {:style styles/profile-name-input-text (merge {:style styles/profile-name-input-text
:font :medium
:placeholder "" :placeholder ""
:default-value name :default-value name
:auto-focus true :auto-focus true
@ -35,6 +36,7 @@
:edit? false}] :edit? false}]
[react/view styles/profile-header-name-container [react/view styles/profile-header-name-container
[react/text {:style styles/profile-name-text [react/text {:style styles/profile-name-text
:font :medium
:number-of-lines 1} :number-of-lines 1}
name]]]) name]]])

27
src/status_im/ui/screens/profile/contact/views.cljs
View File

@ -1,16 +1,15 @@
(ns status-im.ui.screens.profile.contact.views (ns status-im.ui.screens.profile.contact.views
(:require-macros [status-im.utils.views :refer [defview letsubs]]) (:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require [status-im.ui.screens.profile.contact.styles :as styles] (:require [re-frame.core :as re-frame]
[status-im.ui.components.react :as react]
[status-im.ui.screens.profile.components.styles :as profile.components.styles]
[status-im.ui.screens.profile.components.views :as profile.components]
[status-im.ui.components.status-bar.view :as status-bar]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[re-frame.core :as re-frame]
[status-im.utils.contacts :as utils.contacts] [status-im.utils.contacts :as utils.contacts]
[status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.react :as react]
[status-im.ui.components.list.views :as list] [status-im.ui.components.list.views :as list]
[status-im.ui.components.text :as text])) [status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.components.status-bar.view :as status-bar]
[status-im.ui.screens.profile.contact.styles :as styles]
[status-im.ui.screens.profile.components.styles :as profile.components.styles]
[status-im.ui.screens.profile.components.views :as profile.components]))
(defn profile-contact-toolbar [] (defn profile-contact-toolbar []
[toolbar/toolbar {} [toolbar/toolbar {}
@ -35,7 +34,11 @@
[{:label (i18n/label :t/send-transaction) [{:label (i18n/label :t/send-transaction)
:icon :icons/arrow-right :icon :icons/arrow-right
:action #(re-frame/dispatch [:profile/send-transaction whisper-identity]) :action #(re-frame/dispatch [:profile/send-transaction whisper-identity])
:accessibility-label :send-transaction-button}]))) :accessibility-label :send-transaction-button}])
[{:label (i18n/label :t/share-profile-link)
:icon :icons/share
:action #(re-frame/dispatch [:profile/share-profile-link whisper-identity])
:accessibility-label :share-profile-link}]))
(defn profile-info-item [{:keys [label value options accessibility-label]}] (defn profile-info-item [{:keys [label value options accessibility-label]}]
[react/view styles/profile-info-item [react/view styles/profile-info-item
@ -43,8 +46,10 @@
[react/text {:style styles/profile-info-title} [react/text {:style styles/profile-info-title}
label] label]
[react/view styles/profile-setting-spacing] [react/view styles/profile-setting-spacing]
[text/selectable-text {:value value [react/text {:style styles/profile-setting-text
:style styles/profile-setting-text}]]]) :accessibility-label accessibility-label
:selectable true}
value]]])
(defn profile-info-contact-code-item [whisper-identity] (defn profile-info-contact-code-item [whisper-identity]
[profile-info-item [profile-info-item

24
src/status_im/ui/screens/profile/events.cljs
View File

@ -1,9 +1,10 @@
(ns status-im.ui.screens.profile.events (ns status-im.ui.screens.profile.events
(:require [re-frame.core :as re-frame] (:require [re-frame.core :as re-frame]
[status-im.ui.screens.profile.navigation] [status-im.ui.screens.profile.navigation]
[status-im.ui.components.list-selection :as list-selection]
[status-im.ui.screens.profile.models :as profile.models]
[status-im.utils.handlers :as handlers] [status-im.utils.handlers :as handlers]
[status-im.utils.identicon :as identicon] [status-im.utils.identicon :as identicon]))
[status-im.ui.screens.profile.models :as profile.models]))
(re-frame/reg-fx (re-frame/reg-fx
:open-image-picker :open-image-picker
@ -29,10 +30,10 @@
(handlers/register-handler-fx (handlers/register-handler-fx
:my-profile/remove-current-photo :my-profile/remove-current-photo
(fn [{:keys [db]}] (fn [{:keys [db]}]
{:db (-> db {:db (-> db
(assoc-in [:my-profile/profile :photo-path] (assoc-in [:my-profile/profile :photo-path]
(identicon/identicon (:current-public-key db))) (identicon/identicon (:current-public-key db)))
(assoc :my-profile/editing? true))})) (assoc :my-profile/editing? true))}))
(handlers/register-handler-fx (handlers/register-handler-fx
:my-profile/start-editing-profile :my-profile/start-editing-profile
@ -82,3 +83,14 @@
:show-tooltip :show-tooltip
(fn [_ [_ tooltip-id]] (fn [_ [_ tooltip-id]]
{:show-tooltip tooltip-id})) {:show-tooltip tooltip-id}))
(re-frame/reg-fx
:profile/share-profile-link
(fn [contact-code]
(list-selection/open-share {:message contact-code})))
(handlers/register-handler-fx
:profile/share-profile-link
(fn [_ [_ value]]
{:profile/share-profile-link value}))

39
src/status_im/ui/screens/profile/user/styles.cljs
View File

@ -4,41 +4,29 @@
[status-im.ui.screens.profile.components.styles :as profile.components.styles] [status-im.ui.screens.profile.components.styles :as profile.components.styles]
[status-im.ui.components.styles :as components.styles])) [status-im.ui.components.styles :as components.styles]))
(def share-contact-code (def share-contact-code-container
{:margin-horizontal 16 {:flex-direction :row
:flex-direction :row
:justify-content :space-between
:align-items :center
:height 42
:border-radius components.styles/border-radius
:background-color (colors/alpha colors/blue 0.1)})
(def share-contact-code-text-container
{:padding-left 16
:padding-bottom 1
:flex 0.9
:flex-direction :row
:justify-content :center :justify-content :center
:align-items :center}) :align-items :center})
(def share-contact-code-text (def share-contact-code-button
{:color colors/blue {:height 42})
:font-size 15})
(def share-contact-icon-container (def qr-toolbar
{:border-radius 50 {:border-bottom-color colors/gray-light
:flex 0.1 :border-bottom-width 1})
:padding-right 5
:align-items :center
:justify-content :center})
(def qr-code (def qr-code
{:background-color colors/gray-lighter}) {:background-color colors/white})
(def qr-code-viewer (def qr-code-viewer
{:flex-grow 1 {:flex-grow 1
:flex-direction :column}) :flex-direction :column})
(def share-link-button
{:margin-top 12
:margin-bottom 16})
(defstyle my-profile-info-container (defstyle my-profile-info-container
{:background-color colors/white}) {:background-color colors/white})
@ -50,9 +38,6 @@
(defstyle my-profile-settings-logout (defstyle my-profile-settings-logout
{:min-width "50%"}) {:min-width "50%"})
(defstyle my-profile-settings-logout-version
{:padding-horizontal 16})
(def advanced-button (def advanced-button
{:margin-top 16 {:margin-top 16
:margin-bottom 12}) :margin-bottom 12})

46
src/status_im/ui/screens/profile/user/views.cljs
View File

@ -4,6 +4,7 @@
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.ui.components.action-button.styles :as action-button.styles] [status-im.ui.components.action-button.styles :as action-button.styles]
[status-im.ui.components.button.view :as button]
[status-im.ui.components.colors :as colors] [status-im.ui.components.colors :as colors]
[status-im.ui.components.common.styles :as common.styles] [status-im.ui.components.common.styles :as common.styles]
[status-im.ui.components.icons.vector-icons :as vector-icons] [status-im.ui.components.icons.vector-icons :as vector-icons]
@ -65,39 +66,35 @@
:action #(re-frame/dispatch [:my-profile/remove-current-photo])})) :action #(re-frame/dispatch [:my-profile/remove-current-photo])}))
(defn qr-viewer-toolbar [label value] (defn qr-viewer-toolbar [label value]
[toolbar/toolbar {} [toolbar/toolbar {:style styles/qr-toolbar}
[toolbar/default-done {:icon-opts {:color colors/black} [toolbar/default-done {:icon-opts {:color colors/black}
:accessibility-label :done-button}] :accessibility-label :done-button}]
[toolbar/content-title label] [toolbar/content-title label]])
[toolbar/actions [{:icon :icons/share
:icon-opts {:color :black (defn qr-code-share-button [value]
:accessibility-label :share-code-button} [button/button-with-icon {:on-press #(list-selection/open-share {:message value})
:handler #(list-selection/open-share {:message value})}]]]) :label (i18n/label :t/share-link)
:icon :icons/share
:accessibility-label :share-my-contact-code-button
:style styles/share-link-button}])
(defview qr-viewer [] (defview qr-viewer []
(letsubs [{:keys [value contact]} [:get :qr-modal]] (letsubs [{:keys [value contact]} [:get :qr-modal]]
[react/view styles/qr-code-viewer [react/view styles/qr-code-viewer
[status-bar/status-bar {:type :modal-white}] [status-bar/status-bar {:type :modal-white}]
[qr-viewer-toolbar (:name contact) value] [qr-viewer-toolbar (:name contact) value]
[qr-code-viewer/qr-code-viewer {:style styles/qr-code} [qr-code-viewer/qr-code-viewer
value (i18n/label :t/qr-code-public-key-hint) (str value)]])) {:style styles/qr-code
:footer-button qr-code-share-button
:value value
:hint (i18n/label :t/qr-code-public-key-hint)
:legend (str value)}]]))
(defn- show-qr [contact source value] (defn- show-qr [contact source value]
#(re-frame/dispatch [:navigate-to :profile-qr-viewer {:contact contact #(re-frame/dispatch [:navigate-to :profile-qr-viewer {:contact contact
:source source :source source
:value value}])) :value value}]))
(defn share-contact-code [current-account public-key]
[react/touchable-highlight {:on-press (show-qr current-account :public-key public-key)}
[react/view styles/share-contact-code
[react/view styles/share-contact-code-text-container
[react/text {:style styles/share-contact-code-text
:uppercase? true}
(i18n/label :t/share-contact-code)]]
[react/view {:style styles/share-contact-icon-container
:accessibility-label :share-my-contact-code-button}
[vector-icons/icon :icons/qr {:color colors/blue}]]]])
(defn- my-profile-settings [{:keys [seed-backed-up? mnemonic]} currency] (defn- my-profile-settings [{:keys [seed-backed-up? mnemonic]} currency]
(let [show-backup-seed? (and (not seed-backed-up?) (not (string/blank? mnemonic)))] (let [show-backup-seed? (and (not seed-backed-up?) (not (string/blank? mnemonic)))]
[react/view [react/view
@ -231,8 +228,15 @@
(profile-icon-options-ext) (profile-icon-options-ext)
profile-icon-options) profile-icon-options)
:on-change-text-event :my-profile/update-name}]] :on-change-text-event :my-profile/update-name}]]
[react/view action-button.styles/actions-list [react/view (merge action-button.styles/actions-list
[share-contact-code current-account public-key]] styles/share-contact-code-container)
[button/secondary-button {:on-press #(re-frame/dispatch [:navigate-to :profile-qr-viewer
{:contact current-account
:source :public-key
:value public-key}])
:style styles/share-contact-code-button
:accessibility-label :share-my-profile-button}
(i18n/label :t/share-my-profile)]]
[react/view styles/my-profile-info-container [react/view styles/my-profile-info-container
[my-profile-settings current-account currency]] [my-profile-settings current-account currency]]
[advanced shown-account on-show-advanced]]]))) [advanced shown-account on-show-advanced]]])))

22
src/status_im/ui/screens/wallet/actions.cljs Normal file
View File

@ -0,0 +1,22 @@
(ns status-im.ui.screens.wallet.actions
(:require [status-im.i18n :as i18n]
[re-frame.core :as re-frame]
[status-im.utils.universal-links.core :as universal-links]
[status-im.ui.components.list-selection :as list-selection]))
(defn- share-link [browser-id]
(let [link (universal-links/generate-link :browse :external browser-id)
message (i18n/label :t/share-dapp-text {:link link})]
(list-selection/open-share {:message message})))
(def open-wallet
{:label (i18n/label :t/view-my-wallet)
:action #(re-frame/dispatch [:navigate-to :wallet-modal])})
(defn share [browser-id]
{:label (i18n/label :t/share-link)
:action #(share-link browser-id)})
(defn actions [browser-id]
[open-wallet
(share browser-id)])

6
src/status_im/ui/screens/wallet/main/views.cljs
View File

@ -18,7 +18,6 @@
status-im.ui.screens.wallet.collectibles.cryptokitties.views status-im.ui.screens.wallet.collectibles.cryptokitties.views
status-im.ui.screens.wallet.collectibles.superrare.views status-im.ui.screens.wallet.collectibles.superrare.views
[status-im.ui.components.status-bar.view :as status-bar.view] [status-im.ui.components.status-bar.view :as status-bar.view]
[status-im.ui.components.text :as text]
[status-im.ui.screens.wallet.transactions.views :as transactions.views] [status-im.ui.screens.wallet.transactions.views :as transactions.views]
[status-im.ui.components.colors :as colors])) [status-im.ui.components.colors :as colors]))
@ -190,7 +189,10 @@
[backup-seed-phrase]) [backup-seed-phrase])
(if modal? (if modal?
[react/view styles/address-section [react/view styles/address-section
[text/selectable-text {:value address-hex :style styles/wallet-address}]] [react/text {:style styles/wallet-address
:accessibility-label :address-text
:selectable true}
address-hex]]
[list/action-list actions [list/action-list actions
{:container-style styles/action-section}]) {:container-style styles/action-section}])
[asset-section assets currency address-hex modal?] [asset-section assets currency address-hex modal?]

13
src/status_im/ui/screens/wallet/request/styles.cljs
View File

@ -5,15 +5,15 @@
{:color colors/white-lighter-transparent}) {:color colors/white-lighter-transparent})
(def footer (def footer
{:color colors/white}) {:color colors/white
:border-color colors/white-light-transparent})
(def bottom-buttons (def bottom-buttons
{:background-color colors/blue}) {:background-color colors/blue})
(def request-wrapper (def request-wrapper
{:flex 1 {:flex 1
:flex-direction :column :flex-direction :column})
:margin-horizontal 16})
;; Request panel ;; Request panel
@ -21,5 +21,8 @@
{:padding-bottom 60}) {:padding-bottom 60})
(def send-request (def send-request
{:background-color colors/black-transparent {:background-color colors/black-transparent
:margin-bottom 12}) :margin-top 12
:margin-bottom 16
:margin-horizontal 16
:height 42})

27
src/status_im/ui/screens/wallet/request/views.cljs
View File

@ -64,15 +64,15 @@
;; Main screen ;; Main screen
(defn- qr-code [address chain-id] (defn send-transaction-request-button [value]
[qr-code-viewer/qr-code-viewer {:hint-style styles/hint :footer-style styles/footer} [button/primary-button {:on-press #(re-frame/dispatch [:navigate-to :wallet-send-transaction-request])
(eip681/generate-uri address {:chain-id chain-id}) :style styles/send-request
(i18n/label :t/request-qr-legend) :accessibility-label :sent-transaction-request-button}
address]) (i18n/label :t/send-transaction-request)])
(views/defview request-transaction [] (views/defview request-transaction []
(views/letsubs [address-hex [:get-current-account-hex] (views/letsubs [address-hex [:get-current-account-hex]
chain-id [:get-network-id]] chain-id [:get-network-id]]
[wallet.components/simple-screen [wallet.components/simple-screen
[wallet.components/toolbar {} [wallet.components/toolbar {}
wallet.components/default-action wallet.components/default-action
@ -83,9 +83,10 @@
:handler #(list-selection/open-share {:message address-hex})}]]] :handler #(list-selection/open-share {:message address-hex})}]]]
[react/view {:flex 1} [react/view {:flex 1}
[common/network-info {:text-color :white}] [common/network-info {:text-color :white}]
[react/scroll-view styles/request-wrapper [qr-code-viewer/qr-code-viewer
[qr-code address-hex chain-id] {:hint-style styles/hint
[button/primary-button {:on-press #(re-frame/dispatch [:navigate-to :wallet-send-transaction-request]) :footer-style styles/footer
:style styles/send-request :footer-button send-transaction-request-button
:accessibility-label :sent-transaction-request-button} :value (eip681/generate-uri address-hex {:chain-id chain-id})
(i18n/label :t/send-transaction-request)]]]])) :hint (i18n/label :t/request-qr-legend)
:legend address-hex}]]]))

14
src/status_im/utils/universal_links/core.cljs
View File

@ -1,5 +1,7 @@
(ns status-im.utils.universal-links.core (ns status-im.utils.universal-links.core
(:require [cljs.spec.alpha :as spec] (:require [cljs.spec.alpha :as spec]
[goog.string :as gstring]
[goog.string.format]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[status-im.accounts.db :as accounts.db] [status-im.accounts.db :as accounts.db]
[status-im.chat.models :as chat] [status-im.chat.models :as chat]
@ -19,6 +21,18 @@
(def browse-regex #".*/browse/(.*)$") (def browse-regex #".*/browse/(.*)$")
(def extension-regex #".*/extension/(.*)$") (def extension-regex #".*/extension/(.*)$")
;; domains should be without the trailing slash
(def domains {:external "https://get.status.im"
:internal "status-im:/"})
(def links {:public-chat "%s/chat/public/%s"
:browse "%s/browse/%s"})
(defn generate-link [link-type domain-type param]
(gstring/format (get links link-type)
(get domains domain-type)
param))
(defn match-url [url regex] (defn match-url [url regex]
(some->> url (some->> url
(re-matches regex) (re-matches regex)

12
translations/en.json
View File

@ -375,7 +375,7 @@
"delete-contact": "Delete contact", "delete-contact": "Delete contact",
"currency-display-name-try": "Turkish Lira", "currency-display-name-try": "Turkish Lira",
"connecting-requires-login": "Connecting to another network requires login", "connecting-requires-login": "Connecting to another network requires login",
"send-transaction-request": "Send a transaction request", "send-transaction-request": "Send a Transaction Request",
"share-contact-code": "Share my contact code", "share-contact-code": "Share my contact code",
"use-valid-contact-code": "Please enter or scan a valid contact code or username", "use-valid-contact-code": "Please enter or scan a valid contact code or username",
"use-valid-contact-code-desktop": "Please enter a valid contact code or username", "use-valid-contact-code-desktop": "Please enter a valid contact code or username",
@ -428,7 +428,7 @@
"currency-display-name-lrd": "Liberia Dollar", "currency-display-name-lrd": "Liberia Dollar",
"leave": "Leave", "leave": "Leave",
"offline-messaging-settings": "Mailserver settings", "offline-messaging-settings": "Mailserver settings",
"qr-code-public-key-hint": "Share this code to \nstart chatting", "qr-code-public-key-hint": "Share this code to start chatting",
"submit-bug": "Submit a bug", "submit-bug": "Submit a bug",
"share": "Share", "share": "Share",
"recent-recipients": "Contacts", "recent-recipients": "Contacts",
@ -734,5 +734,11 @@
"create-pin-description": "You'll need your card + this PIN to log in and to confirm transactions", "create-pin-description": "You'll need your card + this PIN to log in and to confirm transactions",
"repeat-pin": "Repeate your PIN", "repeat-pin": "Repeate your PIN",
"pin-mismatch": "PIN does not match", "pin-mismatch": "PIN does not match",
"view-my-wallet": "View my wallet" "view-my-wallet": "View my wallet",
"share-my-profile": "Share my profile",
"share-chat": "Share chat",
"share-link": "Share link",
"share-profile-link": "Share profile link",
"share-public-chat-text": "Check out this public chat on the Status app: {{link}}",
"share-dapp-text": "Check out this DApp I'm using on Status: {{link}}"
} }