Make addresses in the QR code and the contact screen copyable

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>

src/status_im/ui/components/qr_code_viewer/styles.cljs

@@ -68,10 +68,11 @@
 (def footer
   {:flex-direction   :row
    :justify-content  :center
-   :padding-top      22})
+   :padding-top      17})
 
 (def wallet-info
-  {:align-items    :center
+  {:flex-grow      1
+   :align-items    :center
    :padding-bottom 20})
 
 (def hash-value-type
@@ -80,6 +81,7 @@
 
 (def hash-value-text
   {:color             colors/black
+   :align-self        :stretch
    :margin-horizontal 60
    :text-align        :center
    :font-size         15

src/status_im/ui/components/qr_code_viewer/views.cljs

@@ -2,7 +2,8 @@
   (:require [reagent.core :as reagent]
             [status-im.react-native.js-dependencies :as rn-dependencies]
             [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]))
 
 (defn qr-code [props]
   (reagent/create-element
@@ -12,9 +13,8 @@
 (defn- footer [style value]
   [react/view styles/footer
    [react/view styles/wallet-info
-    [react/text {:style               (merge styles/hash-value-text style)
-                 :accessibility-label :address-text}
-     value]]])
+    [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]
   {:pre [(not (nil? value))]}

src/status_im/ui/components/text.cljs

@@ -0,0 +1,14 @@
+(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]))

src/status_im/ui/screens/profile/contact/styles.cljs

@@ -54,4 +54,3 @@
 (defstyle contact-profile-info-container
   {:padding-top      26
    :background-color colors/white})
-

src/status_im/ui/screens/profile/contact/views.cljs

@@ -9,7 +9,8 @@
             [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.list.views :as list]))
+            [status-im.ui.components.list.views :as list]
+            [status-im.ui.components.text :as text]))
 
 (defn profile-contact-toolbar []
   [toolbar/toolbar {}
@@ -42,9 +43,8 @@
     [react/text {:style styles/profile-info-title}
      label]
     [react/view styles/profile-setting-spacing]
-    [react/text {:style               styles/profile-setting-text
-                 :accessibility-label accessibility-label}
-     value]]])
+    [text/selectable-text {:value value
+                           :style styles/profile-setting-text}]]])
 
 (defn profile-info-contact-code-item [whisper-identity]
   [profile-info-item