[8957] fix - Wallet address can't be copied by tapping on it

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
This commit is contained in:
bitsikka 2019-09-11 12:53:02 +05:45 committed by Andrey Shovkoplyas
parent e6c5dd6c81
commit edf896f2e5
No known key found for this signature in database
GPG Key ID: EAAB7C8622D860A4
5 changed files with 69 additions and 82 deletions

View File

@ -1,6 +1,5 @@
(ns status-im.ui.components.qr-code-viewer.styles (ns status-im.ui.components.qr-code-viewer.styles
(:require [status-im.ui.components.colors :as colors]) (:require [status-im.ui.components.colors :as colors]))
(:require-macros [status-im.utils.styles :refer [defstyle]]))
(def qr-code-hint (def qr-code-hint
{:color colors/gray {:color colors/gray
@ -12,7 +11,9 @@
(defn qr-code-container [width] (defn qr-code-container [width]
{:align-self :center {:align-self :center
:width (+ width qr-code-padding qr-code-padding) :width width
:height width
:padding-horizontal 16
:background-color colors/white :background-color colors/white
:border-color colors/black-transparent :border-color colors/black-transparent
:align-items :center :align-items :center
@ -20,12 +21,6 @@
:border-width 1 :border-width 1
:border-radius 8}) :border-radius 8})
(defstyle name-container
{:flex 0.6
:flex-direction :column
:ios {:align-items :center}
:android {:margin-left 15}})
(def name-text (def name-text
{:font-size 17}) {:font-size 17})

View File

@ -1,21 +1,28 @@
(ns status-im.ui.components.qr-code-viewer.views (ns status-im.ui.components.qr-code-viewer.views
(:require [reagent.core :as reagent] (:require [cljs-bean.core :as bean]
[reagent.core :as reagent]
[status-im.react-native.js-dependencies :as rn-dependencies] [status-im.react-native.js-dependencies :as rn-dependencies]
[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.svg :as svg]) [status-im.ui.components.svg :as svg]))
(:require-macros [status-im.utils.views :refer [defview letsubs]]))
(defn qr-code [{:keys [size value]}] (defn qr-code [{:keys [size value]}]
(let [uri (reagent/atom nil)] (let [uri (reagent/atom nil)]
(.toString rn-dependencies/qr-code value #(reset! uri %2)) (.toString
rn-dependencies/qr-code
value
(bean/->js {:margin 0 :width size})
#(reset! uri %2))
(fn [] (fn []
(when @uri (when @uri
[svg/svgxml {:xml @uri :width size :height size}])))) [svg/svgxml {:xml @uri :width size :height size}]))))
(defn qr-code-view [size value] (defn qr-code-view
"Qr Code view including the frame.
Note: `size` includes frame with `styles/qr-code-padding.`"
[size value]
(when (and size value) (when (and size value)
[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}]])) :size (- size (* styles/qr-code-padding 2))}]]))

View File

@ -1,8 +1,5 @@
(ns status-im.ui.screens.profile.user.styles (ns status-im.ui.screens.profile.user.styles
(:require-macros [status-im.utils.styles :refer [defstyle]]) (:require [status-im.ui.components.colors :as colors]))
(:require [status-im.ui.components.colors :as colors]
[status-im.ui.screens.profile.components.styles :as profile.components.styles]
[status-im.ui.components.styles :as components.styles]))
(def share-contact-code-container (def share-contact-code-container
{:flex-direction :row {:flex-direction :row
@ -20,25 +17,8 @@
:flex-direction :column}) :flex-direction :column})
(def share-link-button (def share-link-button
{:margin-vertical 20}) {:margin-top 12
:margin-bottom 8})
(defstyle my-profile-info-container {})
(defstyle my-profile-settings-logout-wrapper
{:flex-direction :row
:justify-content :space-between
:align-items :center})
(defstyle my-profile-settings-logout
{:min-width "50%"})
(defstyle my-profile-settings-send-logs-wrapper
{:flex-direction :row
:justify-content :space-between
:align-items :center})
(defstyle my-profile-settings-send-logs
{:min-width "50%"})
(def advanced-button (def advanced-button
{:margin-top 16 {:margin-top 16

View File

@ -1,12 +1,10 @@
(ns status-im.ui.screens.profile.user.views (ns status-im.ui.screens.profile.user.views
(:require-macros [status-im.utils.views :as views])
(:require [clojure.string :as string] (:require [clojure.string :as string]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.i18n :as i18n]
[status-im.ethereum.stateofus :as stateofus] [status-im.ethereum.stateofus :as stateofus]
[status-im.i18n :as i18n]
[status-im.multiaccounts.core :as multiaccounts] [status-im.multiaccounts.core :as multiaccounts]
[status-im.ui.components.tabbar.styles :as tabs.styles]
[status-im.ui.components.button :as button] [status-im.ui.components.button :as button]
[status-im.ui.components.colors :as colors] [status-im.ui.components.colors :as colors]
[status-im.ui.components.common.common :as components.common] [status-im.ui.components.common.common :as components.common]
@ -17,25 +15,27 @@
[status-im.ui.components.qr-code-viewer.views :as qr-code-viewer] [status-im.ui.components.qr-code-viewer.views :as qr-code-viewer]
[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.tabbar.styles :as tabs.styles]
[status-im.ui.components.toolbar.view :as toolbar] [status-im.ui.components.toolbar.view :as toolbar]
[status-im.ui.screens.chat.photos :as photos] [status-im.ui.screens.chat.photos :as photos]
[status-im.ui.screens.profile.components.views :as profile.components] [status-im.ui.screens.profile.components.views :as profile.components]
[status-im.ui.screens.profile.user.styles :as styles] [status-im.ui.screens.profile.user.styles :as styles]
[status-im.utils.identicon :as identicon] [status-im.utils.identicon :as identicon]
[status-im.utils.platform :as platform] [status-im.utils.platform :as platform]
[status-im.utils.universal-links.core :as universal-links])) [status-im.utils.universal-links.core :as universal-links])
(:require-macros [status-im.utils.views :as views]))
(views/defview share-chat-key [] (views/defview share-chat-key []
(views/letsubs [{:keys [address]} [:popover/popover] (views/letsubs [{:keys [address]} [:popover/popover]
window-width [:dimensions/window-width] width (reagent/atom nil)
{:keys [names preferred-name]} [:ens.main/screen]] {:keys [names preferred-name]} [:ens.main/screen]]
(let [username (stateofus/username preferred-name) (let [username (stateofus/username preferred-name)
qr-width (- window-width 128)
name (or username preferred-name) name (or username preferred-name)
link (universal-links/generate-link :user :external address)] link (universal-links/generate-link :user :external address)]
[react/view [react/view {:on-layout #(reset! width (-> % .-nativeEvent .-layout .-width))}
[react/view {:style {:padding-top 16 :padding-left 16 :padding-right 16}} [react/view {:style {:padding-top 16 :padding-horizontal 16}}
[qr-code-viewer/qr-code-view qr-width address] (when @width
[qr-code-viewer/qr-code-view (- @width 32) address])
(when (seq names) (when (seq names)
[react/view [react/view
[copyable-text/copyable-text-view [copyable-text/copyable-text-view
@ -59,14 +59,14 @@
:accessibility-label :chat-key :accessibility-label :chat-key
:style {:line-height 22 :font-size 15 :style {:line-height 22 :font-size 15
:font-family "monospace"}} :font-family "monospace"}}
address]] address]]]
[react/view styles/share-link-button [react/view styles/share-link-button
;;TODO implement icon support ;;TODO implement icon support
[button/button [button/button
{:on-press #(list-selection/open-share {:message link}) {:on-press #(list-selection/open-share {:message link})
:label :t/share-link :label :t/share-link
;:icon :main-icons/link ;:icon :main-icons/link
:accessibility-label :share-my-contact-code-button}]]]]))) :accessibility-label :share-my-contact-code-button}]]])))
(defn- header [{:keys [public-key photo-path] :as account}] (defn- header [{:keys [public-key photo-path] :as account}]
[profile.components/profile-header [profile.components/profile-header

View File

@ -1,20 +1,20 @@
(ns status-im.ui.screens.wallet.request.views (ns status-im.ui.screens.wallet.request.views
(:require [re-frame.core :as re-frame] (:require [re-frame.core :as re-frame]
[reagent.core :as reagent]
[status-im.ethereum.eip55 :as eip55] [status-im.ethereum.eip55 :as eip55]
[status-im.ethereum.eip681 :as eip681] [status-im.ethereum.eip681 :as eip681]
[status-im.ethereum.tokens :as tokens] [status-im.ethereum.tokens :as tokens]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.ui.components.button :as button]
[status-im.ui.components.copyable-text :as copyable-text]
[status-im.ui.components.qr-code-viewer.views :as qr-code-viewer] [status-im.ui.components.qr-code-viewer.views :as qr-code-viewer]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.styles :as components.styles] [status-im.ui.components.styles :as components.styles]
[status-im.ui.components.toolbar :as toolbar]
[status-im.ui.screens.wallet.components.views :as wallet.components] [status-im.ui.screens.wallet.components.views :as wallet.components]
[status-im.ui.screens.wallet.request.styles :as styles] [status-im.ui.screens.wallet.request.styles :as styles]
[status-im.wallet.utils :as wallet.utils]
[status-im.utils.utils :as utils] [status-im.utils.utils :as utils]
[status-im.ui.components.colors :as colors] [status-im.wallet.utils :as wallet.utils])
[reagent.core :as reagent]
[status-im.ui.components.common.common :as components.common]
[status-im.ui.components.toolbar :as toolbar])
(:require-macros [status-im.utils.views :as views])) (:require-macros [status-im.utils.views :as views]))
;;TODO DEPRECATED ;;TODO DEPRECATED
@ -62,28 +62,33 @@
(views/letsubs [{:keys [address]} [:popover/popover] (views/letsubs [{:keys [address]} [:popover/popover]
chain-id [:chain-id] chain-id [:chain-id]
width (reagent/atom nil)] width (reagent/atom nil)]
[react/view [react/view {:on-layout #(reset! width (-> % .-nativeEvent .-layout .-width))}
[react/view {:style {:padding-top 16 :padding-left 16 :padding-right 16}} [react/view {:style {:padding-top 16 :padding-horizontal 16}}
(when @width (when @width
[qr-code-viewer/qr-code-view (- @width 32) (eip681/generate-uri address {:chain-id chain-id})]) [qr-code-viewer/qr-code-view
[react/text {:style {:font-size 13 :color colors/gray :margin-top 12 :margin-bottom 4}} (- @width 32)
(i18n/label :t/ens-wallet-address)] (eip681/generate-uri address {:chain-id chain-id})])
[react/view {:on-layout #(reset! width (-> % .-nativeEvent .-layout .-width))} [copyable-text/copyable-text-view
[react/text {:number-of-lines 1 :ellipsize-mode :middle {:label :t/ens-wallet-address
:container-style {:margin-top 12 :margin-bottom 4}
:copied-text (eip55/address->checksum address)}
[react/text {:number-of-lines 1
:ellipsize-mode :middle
:accessibility-label :address-text :accessibility-label :address-text
:style {:line-height 22 :font-size 15 :style {:line-height 22 :font-size 15
:font-family "monospace"}} :font-family "monospace"}}
(eip55/address->checksum address)]]] (eip55/address->checksum address)]]]
[react/view {:height 1 :background-color colors/gray-lighter :margin-top 8}] [react/view {:margin-top 12 :margin-bottom 8}
[react/view {:padding-bottom 16} [button/button
[components.common/button {:on-press #(re-frame/dispatch [:wallet.accounts/share address]) {:on-press #(re-frame/dispatch [:wallet.accounts/share address])
:button-style {:margin-vertical 20 :margin-horizontal 16} :label :t/share-address
:accessibility-label :share-address-button :accessibility-label :share-address-button}]]
:label (i18n/label :t/share-address)}] ;;TODO temporary hide for v1
;;TODO temporary hide for v1 #_[button/button
#_[components.common/button {:on-press #(do {:on-press
(re-frame/dispatch [:hide-popover]) #(do
(re-frame/dispatch [:navigate-to :wallet-send-transaction-request address])) (re-frame/dispatch [:hide-popover])
:accessibility-label :sent-transaction-request-button (re-frame/dispatch [:navigate-to :wallet-send-transaction-request address]))
:label (i18n/label :t/send-transaction-request) :accessibility-label :sent-transaction-request-button
:background? false}]]])) :label :t/send-transaction-request
:type :secondary}]]))