diff --git a/src/quo/components/drawers/drawer_top/component_spec.cljs b/src/quo/components/drawers/drawer_top/component_spec.cljs index 1a90f4be26..d6d7b1f948 100644 --- a/src/quo/components/drawers/drawer_top/component_spec.cljs +++ b/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")) diff --git a/src/quo/components/drawers/drawer_top/view.cljs b/src/quo/components/drawers/drawer_top/view.cljs index 477e88cfe6..25e1e0b05f 100644 --- a/src/quo/components/drawers/drawer_top/view.cljs +++ b/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} - (for [network networks] - ^{:key (str network)} - [network-view network]) - [text/text - {:size :paragraph-2 - :weight :regular - :style (style/description theme blur?)} - description]]) + (if networks + [address-text/view + {:networks networks + :address description + :format :short}] + [text/text + {:size :paragraph-2 + :weight :regular + :style (style/description theme blur?)} + description])) (defn- default-keypair-subtitle [{:keys [description theme blur?]}] diff --git a/src/quo/components/list_items/account/view.cljs b/src/quo/components/list_items/account/view.cljs index 431a2a996c..945fd6fa3f 100644 --- a/src/quo/components/list_items/account/view.cljs +++ b/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} - (for [network (:networks account-props)] - ^{:key (str network)} - [network-view network]) - [text/text - {:size :paragraph-2 - :weight :monospace - :style (style/account-address blur? theme)} - (:address account-props)]]]]) + [address-text/view + {:networks (:networks account-props) + :address (:address account-props) + :format :short}]]]) (defn- balance-view [{:keys [balance-props type theme]}] diff --git a/src/quo/components/list_items/account_list_card/view.cljs b/src/quo/components/list_items/account_list_card/view.cljs index 1299f58c71..e782bda0a1 100644 --- a/src/quo/components/list_items/account_list_card/view.cljs +++ b/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} - (map (fn [network] - ^{:key (str network)} - [text/text - {: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)]]]] + [address-text/view + {:networks networks + :address (:address account-props) + :format :short}]]] (when (= action :icon) [rn/pressable {:on-press on-options-press} [icon/icon :i/options diff --git a/src/quo/components/wallet/address_text/style.cljs b/src/quo/components/wallet/address_text/style.cljs new file mode 100644 index 0000000000..fadfc4ecbd --- /dev/null +++ b/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))})) diff --git a/src/quo/components/wallet/address_text/view.cljs b/src/quo/components/wallet/address_text/view.cljs new file mode 100644 index 0000000000..d8ea101dee --- /dev/null +++ b/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)) diff --git a/src/quo/components/wallet/keypair/component_spec.cljs b/src/quo/components/wallet/keypair/component_spec.cljs index 5e0b9c4878..f31fcd4b95 100644 --- a/src/quo/components/wallet/keypair/component_spec.cljs +++ b/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}]) diff --git a/src/quo/core.cljs b/src/quo/core.cljs index 0e22a0bb7b..7e5dea57ed 100644 --- a/src/quo/core.cljs +++ b/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) diff --git a/src/status_im2/contexts/quo_preview/drawers/drawer_top.cljs b/src/status_im2/contexts/quo_preview/drawers/drawer_top.cljs index 15488fae71..9d19d1c933 100644 --- a/src/status_im2/contexts/quo_preview/drawers/drawer_top.cljs +++ b/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" diff --git a/src/status_im2/contexts/quo_preview/gradient/gradient_cover.cljs b/src/status_im2/contexts/quo_preview/gradient/gradient_cover.cljs index 9de137d4fb..bce45daec2 100644 --- a/src/status_im2/contexts/quo_preview/gradient/gradient_cover.cljs +++ b/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)}] diff --git a/src/status_im2/contexts/quo_preview/list_items/account_list_card.cljs b/src/status_im2/contexts/quo_preview/list_items/account_list_card.cljs index c1ae038c89..3176af12ed 100644 --- a/src/status_im2/contexts/quo_preview/list_items/account_list_card.cljs +++ b/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")) diff --git a/src/status_im2/contexts/quo_preview/list_items/address.cljs b/src/status_im2/contexts/quo_preview/list_items/address.cljs index 462cfe59c4..8a36272f53 100644 --- a/src/status_im2/contexts/quo_preview/list_items/address.cljs +++ b/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 diff --git a/src/status_im2/contexts/quo_preview/wallet/keypair.cljs b/src/status_im2/contexts/quo_preview/wallet/keypair.cljs index be71e89621..d6809d78a9 100644 --- a/src/status_im2/contexts/quo_preview/wallet/keypair.cljs +++ b/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}]) diff --git a/src/status_im2/contexts/wallet/account/tabs/about/view.cljs b/src/status_im2/contexts/wallet/account/tabs/about/view.cljs index 4a07c43ce8..833b80d5a5 100644 --- a/src/status_im2/contexts/wallet/account/tabs/about/view.cljs +++ b/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 - {:theme theme - :address temp/address}]) + {:custom-subtitle (fn [] [quo/address-text + {:networks [{:name :ethereum :short-name "eth"} + {: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]]) diff --git a/src/status_im2/contexts/wallet/common/temp.cljs b/src/status_im2/contexts/wallet/common/temp.cljs index 2e26bd3756..eafba9ef46 100644 --- a/src/status_im2/contexts/wallet/common/temp.cljs +++ b/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} - {:name :optimism :short :opt} - {:name :arbitrum :short :arb1}] - :description "0x62b...0a5" + :networks [{:name :ethereum :short-name "eth"} + {:name :optimism :short-name "opt"} + {:name :arbitrum :short-name "arb1"}] + :description "0x39cf6E0Ba4C4530735616e1Ee7ff5FbCB726fBd4" :account-avatar-emoji "🍑" :customization-color :purple}) @@ -158,14 +163,14 @@ [{:customization-color :flamingo :emoji "🍿" :name "New House" - :address "0x21a...49e" - :networks [{:name :ethereum :short :eth} - {:name :optimism :short :opt}]} + :address "0x21af6E0Ba4C4530735616e1Ee7ff5FbCB726f493" + :networks [{:name :ethereum :short-name "eth"} + {:name :optimism :short-name "opt"}]} {:customization-color :blue :emoji "🎮" :name "My savings" - :address "0x43c...98d" - :networks [{:name :ethereum :short :eth}]}]) + :address "0x43cf6E0Ba4C4530735616e1Ee7ff5FbCB726f98d" + :networks [{:name :ethereum :short-name "eth"}]}]) (def asset-snt {:size 24 diff --git a/src/status_im2/contexts/wallet/edit_account/view.cljs b/src/status_im2/contexts/wallet/edit_account/view.cljs index f691cbc305..001363d2a9 100644 --- a/src/status_im2/contexts/wallet/edit_account/view.cljs +++ b/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 diff --git a/src/utils/address.cljs b/src/utils/address.cljs index 7da405b793..a40250a46b 100644 --- a/src/utils/address.cljs +++ b/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)))))