[#5529]: Add UI for sharing deep links; update QR code screens
Signed-off-by: Aleksandr Pantiukhov <alwxndr@gmail.com>
This commit is contained in:
parent
12021554f3
commit
523fa4ee09
|
@ -1,6 +1,7 @@
|
|||
(ns status-im.ui.components.button.styles
|
||||
(: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]))
|
||||
|
||||
(def border-color styles/color-white-transparent-3)
|
||||
|
@ -71,3 +72,31 @@
|
|||
{:background-color styles/color-blue4-transparent}))
|
||||
|
||||
(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})
|
|
@ -1,6 +1,8 @@
|
|||
(ns status-im.ui.components.button.view
|
||||
(: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.icons.vector-icons :as vector-icons]
|
||||
[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]
|
||||
|
@ -33,3 +35,14 @@
|
|||
:style (merge styles/secondary-button style)
|
||||
:text-style (merge styles/secondary-button-text text-style))
|
||||
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}]]]])
|
||||
|
|
|
@ -3,21 +3,21 @@
|
|||
(:require-macros [status-im.utils.styles :refer [defstyle]]))
|
||||
|
||||
(def qr-code-hint
|
||||
{:color colors/gray
|
||||
:padding-top 24
|
||||
:padding-bottom 22
|
||||
:text-align :center})
|
||||
{:color colors/gray
|
||||
:margin-vertical 12
|
||||
:text-align :center})
|
||||
|
||||
(def qr-code-padding
|
||||
15)
|
||||
(def qr-code-max-width 208)
|
||||
(def qr-code-padding 16)
|
||||
|
||||
(defn qr-code-container [width]
|
||||
{:background-color colors/white
|
||||
:width width
|
||||
:align-items :center
|
||||
:justify-content :center
|
||||
:padding qr-code-padding
|
||||
:border-radius 8})
|
||||
{:align-self :center
|
||||
:width (+ width qr-code-padding qr-code-padding)
|
||||
:background-color colors/white
|
||||
:border-color colors/gray-light
|
||||
:border-width 1
|
||||
:border-radius 8
|
||||
:padding qr-code-padding})
|
||||
|
||||
(defstyle name-container
|
||||
{:flex 0.6
|
||||
|
@ -41,40 +41,35 @@
|
|||
(def account-toolbar
|
||||
{:background-color colors/white})
|
||||
|
||||
(def toolbar-contents
|
||||
{:flex-grow 1
|
||||
:flex-direction :row
|
||||
:height 55
|
||||
:align-items :center
|
||||
:justify-content :center})
|
||||
|
||||
(def qr-code
|
||||
{:flex-grow 1
|
||||
:align-items :center
|
||||
:justify-content :center})
|
||||
{:flex-grow 1
|
||||
:justify-content :center})
|
||||
|
||||
(def footer
|
||||
{:flex-direction :row
|
||||
:justify-content :center
|
||||
:padding-top 17})
|
||||
:justify-content :center})
|
||||
|
||||
(def wallet-info
|
||||
{:flex-grow 1
|
||||
:align-items :center
|
||||
:padding-bottom 20})
|
||||
:align-items :center})
|
||||
|
||||
(def hash-value-type
|
||||
{:color colors/black
|
||||
:padding-bottom 5})
|
||||
|
||||
(def hash-value-text
|
||||
{:color colors/black
|
||||
:align-self :stretch
|
||||
:margin-horizontal 60
|
||||
:text-align :center
|
||||
:font-size 15
|
||||
:letter-spacing -0.2
|
||||
:line-height 20})
|
||||
{:color colors/black
|
||||
:align-self :stretch
|
||||
:border-color colors/gray-light
|
||||
:border-width 1
|
||||
:margin-horizontal 16
|
||||
:padding-horizontal 8
|
||||
:padding-vertical 6
|
||||
:border-radius 8
|
||||
:text-align :center
|
||||
:font-size 15
|
||||
:letter-spacing -0.2
|
||||
:line-height 20})
|
||||
|
||||
(def done-button-text
|
||||
{:color colors/white})
|
||||
|
|
|
@ -2,32 +2,35 @@
|
|||
(:require [reagent.core :as reagent]
|
||||
[re-frame.core :as re-frame]
|
||||
[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.react :as react]
|
||||
[status-im.ui.components.text :as text]))
|
||||
[status-im.i18n :as i18n]))
|
||||
|
||||
(defn qr-code [props]
|
||||
(reagent/create-element
|
||||
rn-dependencies/qr-code
|
||||
(clj->js (merge {:inverted true} props))))
|
||||
|
||||
(defn- footer [style value]
|
||||
[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]
|
||||
(defn qr-code-viewer [{:keys [style hint-style footer-style footer-button value hint legend]}]
|
||||
(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/text {:style (merge styles/qr-code-hint hint-style)}
|
||||
hint]
|
||||
(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)
|
||||
:accessibility-label :qr-code-image}
|
||||
[qr-code {:value value
|
||||
:size (- size (* 2 styles/qr-code-padding))}]]))
|
||||
[footer footer-style legend]])
|
||||
:size size}]]))
|
||||
[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"]]))
|
||||
|
|
|
@ -1,14 +1,3 @@
|
|||
(ns status-im.ui.components.text
|
||||
(:require [status-im.ui.components.react :as react]
|
||||
[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]))
|
||||
|
|
|
@ -33,6 +33,9 @@
|
|||
(def forward-button
|
||||
{:margin-left 72})
|
||||
|
||||
(def share-button
|
||||
{:margin-right 72})
|
||||
|
||||
(def background
|
||||
{:flex 1
|
||||
:background-color colors/gray-lighter
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
[status-im.i18n :as i18n]
|
||||
[status-im.ui.components.colors :as colors]
|
||||
[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.status-bar.view :as status-bar]
|
||||
[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.site-blocked.views :as site-blocked.views]
|
||||
[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.http :as http]
|
||||
[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/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?]
|
||||
[toolbar.view/toolbar {}
|
||||
[toolbar.view/nav-button-with-count
|
||||
|
@ -56,10 +62,10 @@
|
|||
(when error?
|
||||
(re-frame/dispatch [:browser.ui/remove-browser-pressed browser-id]))))]
|
||||
[toolbar-content url browser url-editing?]
|
||||
[toolbar.view/actions [{:icon :icons/wallet
|
||||
[toolbar.view/actions [{:icon :icons/options
|
||||
:icon-opts {:color :black
|
||||
:accessibility-label :wallet-modal-button}
|
||||
:handler #(re-frame/dispatch [:navigate-to :wallet-modal])}]]])
|
||||
:accessibility-label :chat-menu-button}
|
||||
:handler #(on-options name browser-id)}]]])
|
||||
|
||||
(defn- web-view-error [_ code desc]
|
||||
(reagent/as-element
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
(ns status-im.ui.screens.chat.actions
|
||||
(: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
|
||||
{:label (i18n/label :t/view-my-wallet)
|
||||
|
@ -14,6 +16,12 @@
|
|||
{:label (i18n/label :t/group-info)
|
||||
: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 []
|
||||
{:label (i18n/label :t/clear-history)
|
||||
:action #(re-frame/dispatch [:chat.ui/clear-history-pressed])})
|
||||
|
@ -36,6 +44,7 @@
|
|||
|
||||
(defn- public-chat-actions [chat-id]
|
||||
[view-my-wallet
|
||||
(share-chat chat-id)
|
||||
(clear-history)
|
||||
(delete-chat chat-id true)])
|
||||
|
||||
|
|
|
@ -22,16 +22,17 @@
|
|||
:android {:color colors/black}})
|
||||
|
||||
(defstyle profile-name-input-text
|
||||
{:font-size 15
|
||||
:text-align :center
|
||||
:flex 1
|
||||
:ios {:letter-spacing -0.2
|
||||
:height 46
|
||||
:border-bottom-width 1
|
||||
:border-bottom-color colors/gray-light}
|
||||
:android {:color colors/black
|
||||
:border-bottom-width 2
|
||||
:border-bottom-color colors/blue}})
|
||||
{:font-size 15
|
||||
:text-align :center
|
||||
:flex 1
|
||||
:ios {:letter-spacing -0.2
|
||||
:margin-top 1
|
||||
:height 45
|
||||
:border-bottom-width 1
|
||||
:border-bottom-color colors/gray-light}
|
||||
:android {:color colors/black
|
||||
:border-bottom-width 2
|
||||
:border-bottom-color colors/blue}})
|
||||
|
||||
(def profile-header-name-container
|
||||
{:flex 1
|
||||
|
@ -90,4 +91,5 @@
|
|||
|
||||
(def profile-form
|
||||
{:background-color colors/white
|
||||
:padding 16})
|
||||
:padding-top 16
|
||||
:padding-bottom 8})
|
||||
|
|
|
@ -16,6 +16,7 @@
|
|||
[react/view
|
||||
[react/text-input
|
||||
(merge {:style styles/profile-name-input-text
|
||||
:font :medium
|
||||
:placeholder ""
|
||||
:default-value name
|
||||
:auto-focus true
|
||||
|
@ -35,6 +36,7 @@
|
|||
:edit? false}]
|
||||
[react/view styles/profile-header-name-container
|
||||
[react/text {:style styles/profile-name-text
|
||||
:font :medium
|
||||
:number-of-lines 1}
|
||||
name]]])
|
||||
|
||||
|
|
|
@ -1,16 +1,15 @@
|
|||
(ns status-im.ui.screens.profile.contact.views
|
||||
(:require-macros [status-im.utils.views :refer [defview letsubs]])
|
||||
(:require [status-im.ui.screens.profile.contact.styles :as styles]
|
||||
[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]
|
||||
(:require [re-frame.core :as re-frame]
|
||||
[status-im.i18n :as i18n]
|
||||
[re-frame.core :as re-frame]
|
||||
[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.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 []
|
||||
[toolbar/toolbar {}
|
||||
|
@ -35,7 +34,11 @@
|
|||
[{:label (i18n/label :t/send-transaction)
|
||||
:icon :icons/arrow-right
|
||||
: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]}]
|
||||
[react/view styles/profile-info-item
|
||||
|
@ -43,8 +46,10 @@
|
|||
[react/text {:style styles/profile-info-title}
|
||||
label]
|
||||
[react/view styles/profile-setting-spacing]
|
||||
[text/selectable-text {:value value
|
||||
:style styles/profile-setting-text}]]])
|
||||
[react/text {:style styles/profile-setting-text
|
||||
:accessibility-label accessibility-label
|
||||
:selectable true}
|
||||
value]]])
|
||||
|
||||
(defn profile-info-contact-code-item [whisper-identity]
|
||||
[profile-info-item
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
(ns status-im.ui.screens.profile.events
|
||||
(:require [re-frame.core :as re-frame]
|
||||
[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.identicon :as identicon]
|
||||
[status-im.ui.screens.profile.models :as profile.models]))
|
||||
[status-im.utils.identicon :as identicon]))
|
||||
|
||||
(re-frame/reg-fx
|
||||
:open-image-picker
|
||||
|
@ -29,10 +30,10 @@
|
|||
(handlers/register-handler-fx
|
||||
:my-profile/remove-current-photo
|
||||
(fn [{:keys [db]}]
|
||||
{:db (-> db
|
||||
(assoc-in [:my-profile/profile :photo-path]
|
||||
(identicon/identicon (:current-public-key db)))
|
||||
(assoc :my-profile/editing? true))}))
|
||||
{:db (-> db
|
||||
(assoc-in [:my-profile/profile :photo-path]
|
||||
(identicon/identicon (:current-public-key db)))
|
||||
(assoc :my-profile/editing? true))}))
|
||||
|
||||
(handlers/register-handler-fx
|
||||
:my-profile/start-editing-profile
|
||||
|
@ -82,3 +83,14 @@
|
|||
:show-tooltip
|
||||
(fn [_ [_ 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}))
|
||||
|
||||
|
|
|
@ -4,41 +4,29 @@
|
|||
[status-im.ui.screens.profile.components.styles :as profile.components.styles]
|
||||
[status-im.ui.components.styles :as components.styles]))
|
||||
|
||||
(def share-contact-code
|
||||
{:margin-horizontal 16
|
||||
: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
|
||||
(def share-contact-code-container
|
||||
{:flex-direction :row
|
||||
:justify-content :center
|
||||
:align-items :center})
|
||||
|
||||
(def share-contact-code-text
|
||||
{:color colors/blue
|
||||
:font-size 15})
|
||||
(def share-contact-code-button
|
||||
{:height 42})
|
||||
|
||||
(def share-contact-icon-container
|
||||
{:border-radius 50
|
||||
:flex 0.1
|
||||
:padding-right 5
|
||||
:align-items :center
|
||||
:justify-content :center})
|
||||
(def qr-toolbar
|
||||
{:border-bottom-color colors/gray-light
|
||||
:border-bottom-width 1})
|
||||
|
||||
(def qr-code
|
||||
{:background-color colors/gray-lighter})
|
||||
{:background-color colors/white})
|
||||
|
||||
(def qr-code-viewer
|
||||
{:flex-grow 1
|
||||
:flex-direction :column})
|
||||
|
||||
(def share-link-button
|
||||
{:margin-top 12
|
||||
:margin-bottom 16})
|
||||
|
||||
(defstyle my-profile-info-container
|
||||
{:background-color colors/white})
|
||||
|
||||
|
@ -50,9 +38,6 @@
|
|||
(defstyle my-profile-settings-logout
|
||||
{:min-width "50%"})
|
||||
|
||||
(defstyle my-profile-settings-logout-version
|
||||
{:padding-horizontal 16})
|
||||
|
||||
(def advanced-button
|
||||
{:margin-top 16
|
||||
:margin-bottom 12})
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
[reagent.core :as reagent]
|
||||
[status-im.i18n :as i18n]
|
||||
[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.common.styles :as common.styles]
|
||||
[status-im.ui.components.icons.vector-icons :as vector-icons]
|
||||
|
@ -65,39 +66,35 @@
|
|||
:action #(re-frame/dispatch [:my-profile/remove-current-photo])}))
|
||||
|
||||
(defn qr-viewer-toolbar [label value]
|
||||
[toolbar/toolbar {}
|
||||
[toolbar/toolbar {:style styles/qr-toolbar}
|
||||
[toolbar/default-done {:icon-opts {:color colors/black}
|
||||
:accessibility-label :done-button}]
|
||||
[toolbar/content-title label]
|
||||
[toolbar/actions [{:icon :icons/share
|
||||
:icon-opts {:color :black
|
||||
:accessibility-label :share-code-button}
|
||||
:handler #(list-selection/open-share {:message value})}]]])
|
||||
[toolbar/content-title label]])
|
||||
|
||||
(defn qr-code-share-button [value]
|
||||
[button/button-with-icon {:on-press #(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 []
|
||||
(letsubs [{:keys [value contact]} [:get :qr-modal]]
|
||||
[react/view styles/qr-code-viewer
|
||||
[status-bar/status-bar {:type :modal-white}]
|
||||
[qr-viewer-toolbar (:name contact) value]
|
||||
[qr-code-viewer/qr-code-viewer {:style styles/qr-code}
|
||||
value (i18n/label :t/qr-code-public-key-hint) (str value)]]))
|
||||
[qr-code-viewer/qr-code-viewer
|
||||
{: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]
|
||||
#(re-frame/dispatch [:navigate-to :profile-qr-viewer {:contact contact
|
||||
:source source
|
||||
: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]
|
||||
(let [show-backup-seed? (and (not seed-backed-up?) (not (string/blank? mnemonic)))]
|
||||
[react/view
|
||||
|
@ -231,8 +228,15 @@
|
|||
(profile-icon-options-ext)
|
||||
profile-icon-options)
|
||||
:on-change-text-event :my-profile/update-name}]]
|
||||
[react/view action-button.styles/actions-list
|
||||
[share-contact-code current-account public-key]]
|
||||
[react/view (merge action-button.styles/actions-list
|
||||
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
|
||||
[my-profile-settings current-account currency]]
|
||||
[advanced shown-account on-show-advanced]]])))
|
||||
|
|
|
@ -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)])
|
|
@ -18,7 +18,6 @@
|
|||
status-im.ui.screens.wallet.collectibles.cryptokitties.views
|
||||
status-im.ui.screens.wallet.collectibles.superrare.views
|
||||
[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.components.colors :as colors]))
|
||||
|
||||
|
@ -190,7 +189,10 @@
|
|||
[backup-seed-phrase])
|
||||
(if modal?
|
||||
[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
|
||||
{:container-style styles/action-section}])
|
||||
[asset-section assets currency address-hex modal?]
|
||||
|
|
|
@ -5,15 +5,15 @@
|
|||
{:color colors/white-lighter-transparent})
|
||||
|
||||
(def footer
|
||||
{:color colors/white})
|
||||
{:color colors/white
|
||||
:border-color colors/white-light-transparent})
|
||||
|
||||
(def bottom-buttons
|
||||
{:background-color colors/blue})
|
||||
|
||||
(def request-wrapper
|
||||
{:flex 1
|
||||
:flex-direction :column
|
||||
:margin-horizontal 16})
|
||||
:flex-direction :column})
|
||||
|
||||
;; Request panel
|
||||
|
||||
|
@ -21,5 +21,8 @@
|
|||
{:padding-bottom 60})
|
||||
|
||||
(def send-request
|
||||
{:background-color colors/black-transparent
|
||||
:margin-bottom 12})
|
||||
{:background-color colors/black-transparent
|
||||
:margin-top 12
|
||||
:margin-bottom 16
|
||||
:margin-horizontal 16
|
||||
:height 42})
|
||||
|
|
|
@ -64,15 +64,15 @@
|
|||
|
||||
;; Main screen
|
||||
|
||||
(defn- qr-code [address chain-id]
|
||||
[qr-code-viewer/qr-code-viewer {:hint-style styles/hint :footer-style styles/footer}
|
||||
(eip681/generate-uri address {:chain-id chain-id})
|
||||
(i18n/label :t/request-qr-legend)
|
||||
address])
|
||||
(defn send-transaction-request-button [value]
|
||||
[button/primary-button {:on-press #(re-frame/dispatch [:navigate-to :wallet-send-transaction-request])
|
||||
:style styles/send-request
|
||||
:accessibility-label :sent-transaction-request-button}
|
||||
(i18n/label :t/send-transaction-request)])
|
||||
|
||||
(views/defview request-transaction []
|
||||
(views/letsubs [address-hex [:get-current-account-hex]
|
||||
chain-id [:get-network-id]]
|
||||
(views/letsubs [address-hex [:get-current-account-hex]
|
||||
chain-id [:get-network-id]]
|
||||
[wallet.components/simple-screen
|
||||
[wallet.components/toolbar {}
|
||||
wallet.components/default-action
|
||||
|
@ -83,9 +83,10 @@
|
|||
:handler #(list-selection/open-share {:message address-hex})}]]]
|
||||
[react/view {:flex 1}
|
||||
[common/network-info {:text-color :white}]
|
||||
[react/scroll-view styles/request-wrapper
|
||||
[qr-code address-hex chain-id]
|
||||
[button/primary-button {:on-press #(re-frame/dispatch [:navigate-to :wallet-send-transaction-request])
|
||||
:style styles/send-request
|
||||
:accessibility-label :sent-transaction-request-button}
|
||||
(i18n/label :t/send-transaction-request)]]]]))
|
||||
[qr-code-viewer/qr-code-viewer
|
||||
{:hint-style styles/hint
|
||||
:footer-style styles/footer
|
||||
:footer-button send-transaction-request-button
|
||||
:value (eip681/generate-uri address-hex {:chain-id chain-id})
|
||||
:hint (i18n/label :t/request-qr-legend)
|
||||
:legend address-hex}]]]))
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
(ns status-im.utils.universal-links.core
|
||||
(:require [cljs.spec.alpha :as spec]
|
||||
[goog.string :as gstring]
|
||||
[goog.string.format]
|
||||
[re-frame.core :as re-frame]
|
||||
[status-im.accounts.db :as accounts.db]
|
||||
[status-im.chat.models :as chat]
|
||||
|
@ -19,6 +21,18 @@
|
|||
(def browse-regex #".*/browse/(.*)$")
|
||||
(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]
|
||||
(some->> url
|
||||
(re-matches regex)
|
||||
|
|
|
@ -375,7 +375,7 @@
|
|||
"delete-contact": "Delete contact",
|
||||
"currency-display-name-try": "Turkish Lira",
|
||||
"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",
|
||||
"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",
|
||||
|
@ -428,7 +428,7 @@
|
|||
"currency-display-name-lrd": "Liberia Dollar",
|
||||
"leave": "Leave",
|
||||
"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",
|
||||
"share": "Share",
|
||||
"recent-recipients": "Contacts",
|
||||
|
@ -734,5 +734,11 @@
|
|||
"create-pin-description": "You'll need your card + this PIN to log in and to confirm transactions",
|
||||
"repeat-pin": "Repeate your PIN",
|
||||
"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}}"
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue