Wallet: Keypair follow up (#17953)

* Wallet: Keypair follow up

Author: OmarBasem

src/quo/components/wallet/keypair/style.cljs

@@ -28,3 +28,9 @@
   {:flex-direction  :row
    :align-items     :center
    :justify-content :space-between})
+
+(defn subtitle
+  [blur? theme]
+  {:color (if blur?
+            colors/white-opa-40
+            (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))})

src/quo/components/wallet/keypair/view.cljs

@@ -11,6 +11,7 @@
     [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
+    [react-native.platform :as platform]
     [reagent.core :as reagent]
     [utils.i18n :as i18n]))
 
@@ -19,11 +20,6 @@
   (let [first-name (first (string/split full-name #" "))]
     (i18n/label :t/keypair-title {:name first-name})))
 
-(defn details-string
-  [address stored]
-  (str (when address (str address " ∙ "))
-       (if (= stored :on-device) (i18n/label :t/on-device) (i18n/label :t/on-keycard))))
-
 (defn avatar
   [{{:keys [full-name]} :details
     avatar-type         :type
@@ -67,15 +63,21 @@
   [{:keys [details stored blur? theme]}]
   (let [{:keys [address]} details]
     [rn/view
-     {:style {:flex-direction :row
-              :align-items    :center}}
+     {:style               {:flex-direction :row
+                            :align-items    :center}
+      :accessibility-label :details}
+     [text/text
+      {:size  :paragraph-2
+       :style (style/subtitle blur? theme)}
+      address]
+     [text/text
+      {:size  :paragraph-2
+       :style (merge (style/subtitle blur? theme) {:bottom (if platform/ios? 2 -2)})}
+      " ∙ "]
      [text/text
-      {:size                :paragraph-2
-       :accessibility-label :details
-       :style               {:color (if blur?
-                                      colors/white-opa-40
-                                      (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}}
-      (details-string address stored)]
+      {:size  :paragraph-2
+       :style (style/subtitle blur? theme)}
+      (if (= stored :on-device) (i18n/label :t/on-device) (i18n/label :t/on-keycard))]
      (when (= stored :on-keycard)
        [rn/view {:style {:margin-left 4}}
         [icon/icon :i/keycard-card

src/status_im2/navigation/screens.cljs

@@ -277,7 +277,7 @@
      :component wallet-collectible/view}
 
     {:name      :wallet-select-keypair
-     :options   {:insets {:top? true}}
+     :options   {:insets {:top? true :bottom? true}}
      :component wallet-select-keypair/view}
 
     {:name      :wallet-create-account