Wallet: Address Text (#17732)

* Wallet: address text

src/quo/components/drawers/drawer_top/component_spec.cljs

@@ -57,7 +57,7 @@
                {:title                "Title"
                 :type                 :account
                 :account-avatar-emoji "🍿"
-                :networks             [{:name :ethereum :short :eth}]
+                :networks             [{:name :ethereum :short-name "eth"}]
                 :description          "0x62b...0a5"
                 :customization-color  :purple}])
     (h/is-truthy (h/get-by-text "Title"))

src/quo/components/drawers/drawer_top/view.cljs

@@ -8,6 +8,7 @@
     [quo.components.icon :as icons]
     [quo.components.markdown.text :as text]
     [quo.components.tags.context-tag.view :as context-tag]
+    [quo.components.wallet.address-text.view :as address-text]
     [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
@@ -32,14 +33,6 @@
                        :profile-picture   profile-picture}]
     nil))
 
-(defn- network-view
-  [network]
-  [text/text
-   {:size   :paragraph-2
-    :weight :regular
-    :style  (style/network-text-color (:name network))}
-   (str (name (:short network)) ":")])
-
 (defn- keypair-subtitle
   [{:keys [theme blur? keycard?]}]
   [rn/view {:style style/row}
@@ -59,15 +52,16 @@
 
 (defn- account-subtitle
   [{:keys [networks theme blur? description]}]
-  [rn/view {:style style/row}
+  (if networks
-   (for [network networks]
+    [address-text/view
-     ^{:key (str network)}
+     {:networks networks
-     [network-view network])
+      :address  description
+      :format   :short}]
     [text/text
      {:size   :paragraph-2
       :weight :regular
       :style  (style/description theme blur?)}
-    description]])
+     description]))
 
 (defn- default-keypair-subtitle
   [{:keys [description theme blur?]}]

src/quo/components/list_items/account/view.cljs

@@ -4,19 +4,12 @@
     [quo.components.icon :as icon]
     [quo.components.list-items.account.style :as style]
     [quo.components.markdown.text :as text]
+    [quo.components.wallet.address-text.view :as address-text]
     [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [reagent.core :as reagent]))
 
-(defn- network-view
-  [network]
-  [text/text
-   {:size   :paragraph-2
-    :weight :regular
-    :style  {:color (colors/custom-color (:name network))}}
-   (str (name (:short network)) ":")])
-
 (defn- account-view
   [{:keys [account-props title-icon? blur? theme]
     :or   {title-icon? false}}]
@@ -38,15 +31,10 @@
           :color (if blur?
                    colors/white-opa-40
                    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]])]
-    [text/text {:size :paragraph-2}
+    [address-text/view
-     (for [network (:networks account-props)]
+     {:networks (:networks account-props)
-       ^{:key (str network)}
+      :address  (:address account-props)
-       [network-view network])
+      :format   :short}]]])
-     [text/text
-      {:size   :paragraph-2
-       :weight :monospace
-       :style  (style/account-address blur? theme)}
-      (:address account-props)]]]])
 
 (defn- balance-view
   [{:keys [balance-props type theme]}]

src/quo/components/list_items/account_list_card/view.cljs

@@ -4,6 +4,7 @@
     [quo.components.icon :as icon]
     [quo.components.list-items.account-list-card.style :as style]
     [quo.components.markdown.text :as text]
+    [quo.components.wallet.address-text.view :as address-text]
     [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
@@ -26,20 +27,10 @@
           {:weight :semi-bold
            :size   :paragraph-2}
           (:name account-props)]
-         [text/text {:size :paragraph-2}
+         [address-text/view
-          (map (fn [network]
+          {:networks networks
-                 ^{:key (str network)}
+           :address  (:address account-props)
-                 [text/text
+           :format   :short}]]]
-                  {:size  :paragraph-2
-                   :style {:color (colors/resolve-color network theme)}}
-                  (str (subs (name network) 0 3) ":")])
-               networks)
-          [text/text
-           {:size  :paragraph-2
-            :style {:color (if blur?
-                             colors/white-opa-40
-                             (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}}
-           (:address account-props)]]]]
        (when (= action :icon)
          [rn/pressable {:on-press on-options-press}
           [icon/icon :i/options

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

@@ -0,0 +1,9 @@
+(ns quo.components.wallet.address-text.style
+  (:require [quo.foundations.colors :as colors]))
+
+(defn address-text
+  [format blur? theme]
+  (when (= format :short)
+    {:color (if blur?
+              colors/white-opa-40
+              (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}))

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

@@ -0,0 +1,31 @@
+(ns quo.components.wallet.address-text.view
+  (:require [quo.components.markdown.text :as text]
+            [quo.components.wallet.address-text.style :as style]
+            [quo.foundations.colors :as colors]
+            [quo.theme]
+            [utils.address :as utils]))
+
+(defn- colored-network-text
+  [theme network]
+  (let [{:keys [name short-name]} network]
+    [text/text
+     {:size  :paragraph-2
+      :style {:color (colors/resolve-color name theme)}}
+     (str short-name ":")]))
+
+(defn- view-internal
+  [{:keys [networks address blur? theme format]}]
+  (let [network-text-xf (map #(colored-network-text theme %))
+        address-text    [text/text
+                         {:size   :paragraph-2
+                          ;; TODO: monospace font https://github.com/status-im/status-mobile/issues/17009
+                          :weight :monospace
+                          :style  (style/address-text format blur? theme)}
+                         (if (= format :short)
+                           (utils/get-short-wallet-address address)
+                           address)]]
+    (as-> networks $
+      (into [text/text] network-text-xf $)
+      (conj $ address-text))))
+
+(def view (quo.theme/with-theme view-internal))

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

@@ -10,7 +10,8 @@
                     :type                :default
                     :name                "Trip to Vegas"
                     :address             "0x0ah...71a"}
-    :networks      [:ethereum :optimism]
+    :networks      [{:name :ethereum :short-name "eth"}
+                    {:name :optimism :short-name "opt"}]
     :state         :default
     :action        :none}])
 

src/quo/core.cljs

@@ -137,6 +137,7 @@
     quo.components.wallet.account-card.view
     quo.components.wallet.account-origin.view
     quo.components.wallet.account-overview.view
+    quo.components.wallet.address-text.view
     quo.components.wallet.keypair.view
     quo.components.wallet.network-amount.view
     quo.components.wallet.network-bridge.view
@@ -371,6 +372,7 @@
 (def account-card quo.components.wallet.account-card.view/view)
 (def account-origin quo.components.wallet.account-origin.view/view)
 (def account-overview quo.components.wallet.account-overview.view/view)
+(def address-text quo.components.wallet.address-text.view/view)
 (def keypair quo.components.wallet.keypair.view/view)
 (def network-amount quo.components.wallet.network-amount.view/view)
 (def network-bridge quo.components.wallet.network-bridge.view/view)

src/status_im2/contexts/quo_preview/drawers/drawer_top.cljs

@@ -45,7 +45,7 @@
                   :type                 :default
                   :label                "Drawer label"
                   :keycard?             true
-                  :networks             [:ethereum]
+                  :networks             [{:name :ethereum :short-name "eth"}]
                   :description          "0x62b...0a5"
                   :button-icon          :i/placeholder
                   :community-name       "Coinbase"

src/status_im2/contexts/quo_preview/gradient/gradient_cover.cljs

@@ -16,7 +16,8 @@
     {:type                 :account
      :blur?                false
      :title                "Collectibles vault"
-     :networks             [:ethereum :optimism]
+     :networks             [{:name :ethereum :short-name "eth"}
+                            {:name :optimism :short-name "opt"}]
      :description          "0x0ah...78b"
      :account-avatar-emoji "🍿"
      :customization-color  (or customization-color :blue)}]

src/status_im2/contexts/quo_preview/list_items/account_list_card.cljs

@@ -20,7 +20,8 @@
                                                 :type                :default
                                                 :name                "Trip to Vegas"
                                                 :address             "0x0ah...78b"}
-                             :networks         [:ethereum :optimism]
+                             :networks         [{:name :ethereum :short-name "eth"}
+                                                {:name :optimism :short-name "opt"}]
                              :action           :none
                              :on-press         (fn [] (js/alert "Item pressed"))
                              :on-options-press (fn [] (js/alert "Options pressed"))

src/status_im2/contexts/quo_preview/list_items/address.cljs

@@ -13,7 +13,8 @@
 (defn view
   []
   (let [state (reagent/atom {:address  "0x0ah...78b"
-                             :networks [:ethereum :optimism]})]
+                             :networks [{:name :ethereum :short-name "eth"}
+                                        {:name :optimism :short-name "opt"}]})]
     (fn []
       [preview/preview-container
        {:state                 state

src/status_im2/contexts/quo_preview/wallet/keypair.cljs

@@ -12,7 +12,8 @@
                     :type                :default
                     :name                "Trip to Vegas"
                     :address             "0x0ah...71a"}
-    :networks      [:ethereum :optimism]
+    :networks      [{:name :ethereum :short-name "eth"}
+                    {:name :optimism :short-name "opt"}]
     :state         :default
     :action        :none}
    {:account-props {:customization-color :purple
@@ -21,7 +22,8 @@
                     :type                :default
                     :name                "My savings"
                     :address             "0x0ah...72b"}
-    :networks      [:ethereum :optimism]
+    :networks      [{:name :ethereum :short-name "eth"}
+                    {:name :optimism :short-name "opt"}]
     :state         :default
     :action        :none}
    {:account-props {:customization-color :army
@@ -30,7 +32,8 @@
                     :type                :default
                     :name                "Coin vault"
                     :address             "0x0ah...73c"}
-    :networks      [:ethereum :optimism]
+    :networks      [{:name :ethereum :short-name "eth"}
+                    {:name :optimism :short-name "opt"}]
     :state         :default
     :action        :none}
    {:account-props {:customization-color :orange
@@ -39,7 +42,8 @@
                     :type                :default
                     :name                "Crypto fortress"
                     :address             "0x0ah...74e"}
-    :networks      [:ethereum :optimism]
+    :networks      [{:name :ethereum :short-name "eth"}
+                    {:name :optimism :short-name "opt"}]
     :state         :default
     :action        :none}
    {:account-props {:customization-color :yellow
@@ -48,7 +52,8 @@
                     :type                :default
                     :name                "Block treasure"
                     :address             "0x0ah...75f"}
-    :networks      [:ethereum :optimism]
+    :networks      [{:name :ethereum :short-name "eth"}
+                    {:name :optimism :short-name "opt"}]
     :state         :default
     :action        :none}])
 

src/status_im2/contexts/wallet/account/tabs/about/view.cljs

@@ -52,13 +52,16 @@
       :label               (i18n/label :t/share-address)}]]])
 
 (defn- view-internal
-  [{:keys [theme]}]
+  []
   [rn/view {:style style/about-tab}
    [quo/data-item
     (merge temp/data-item-state
-           {:custom-subtitle (fn [] [description
+           {:custom-subtitle (fn [] [quo/address-text
-                                     {:theme   theme
+                                     {:networks [{:name :ethereum :short-name "eth"}
-                                      :address temp/address}])
+                                                 {:name :optimism :short-name "opt"}
+                                                 {:name :arbitrum :short-name "arb1"}]
+                                      :address  temp/address
+                                      :format   :long}])
             :container-style {:margin-bottom 12}
             :on-press        #(rf/dispatch [:show-bottom-sheet {:content about-options}])})]
    [quo/account-origin temp/account-origin-state]])

src/status_im2/contexts/wallet/common/temp.cljs

@@ -108,6 +108,11 @@
    :account             :default
    :customization-color :blue})
 
+(def network-names
+  [{:name :ethereum :short-name "eth"}
+   {:name :optimism :short-name "opt"}
+   {:name :arbitrum :short-name "arb1"}])
+
 (def address "0x39cf6E0Ba4C4530735616e1Ee7ff5FbCB726fBd4")
 
 (def data-item-state
@@ -147,10 +152,10 @@
 (def account-data
   {:title                "Trip to Vegas"
    :type                 :account
-   :networks             [{:name :ethereum :short :eth}
+   :networks             [{:name :ethereum :short-name "eth"}
-                          {:name :optimism :short :opt}
+                          {:name :optimism :short-name "opt"}
-                          {:name :arbitrum :short :arb1}]
+                          {:name :arbitrum :short-name "arb1"}]
-   :description          "0x62b...0a5"
+   :description          "0x39cf6E0Ba4C4530735616e1Ee7ff5FbCB726fBd4"
    :account-avatar-emoji "🍑"
    :customization-color  :purple})
 
@@ -158,14 +163,14 @@
   [{:customization-color :flamingo
     :emoji               "🍿"
     :name                "New House"
-    :address             "0x21a...49e"
+    :address             "0x21af6E0Ba4C4530735616e1Ee7ff5FbCB726f493"
-    :networks            [{:name :ethereum :short :eth}
+    :networks            [{:name :ethereum :short-name "eth"}
-                          {:name :optimism :short :opt}]}
+                          {:name :optimism :short-name "opt"}]}
    {:customization-color :blue
     :emoji               "🎮"
     :name                "My savings"
-    :address             "0x43c...98d"
+    :address             "0x43cf6E0Ba4C4530735616e1Ee7ff5FbCB726f98d"
-    :networks            [{:name :ethereum :short :eth}]}])
+    :networks            [{:name :ethereum :short-name "eth"}]}])
 
 (def asset-snt
   {:size       24

src/status_im2/contexts/wallet/edit_account/view.cljs

@@ -39,7 +39,12 @@
          :right-icon      :i/advanced
          :card?           true
          :title           (i18n/label :t/address)
-         :subtitle        account-address
+         :custom-subtitle (fn [] [quo/address-text
+                                  {:networks [{:name :ethereum :short-name "eth"}
+                                              {:name :optimism :short-name "opt"}
+                                              {:name :arbitrum :short-name "arb1"}]
+                                   :address  account-address
+                                   :format   :long}])
          :on-press        (fn []
                             (rf/dispatch [:show-bottom-sheet
                                           {:content (fn [] [network-preferences/view

src/utils/address.cljs

@@ -72,3 +72,8 @@
           abbreviated-public-key   (str first-part-of-public-key ellipsis last-part-of-public-key)]
       abbreviated-public-key)
     nil))
+
+(defn get-short-wallet-address
+  [value]
+  (when value
+    (str (subs value 0 5) "..." (subs value (- (count value) 3) (count value)))))