status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Wallet: Address Text (#17732) 

* Wallet: address text
This commit is contained in:
Omar Basem 2023-10-30 09:40:39 +04:00 committed by GitHub
parent 06c31f3a12
commit 68ad4fe086
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 115 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/quo/components/drawers/drawer_top/component_spec.cljs
View File

@ -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"))

28
src/quo/components/drawers/drawer_top/view.cljs
View File

@ -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?]}]

22
src/quo/components/list_items/account/view.cljs
View File

@ -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]}]

19
src/quo/components/list_items/account_list_card/view.cljs
View File

@ -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

9
src/quo/components/wallet/address_text/style.cljs Normal file
View File

@ -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))}))

31
src/quo/components/wallet/address_text/view.cljs Normal file
View File

@ -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))

3
src/quo/components/wallet/keypair/component_spec.cljs
View File

@ -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}])

2
src/quo/core.cljs
View File

@ -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)

2
src/status_im2/contexts/quo_preview/drawers/drawer_top.cljs
View File

@ -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"

3
src/status_im2/contexts/quo_preview/gradient/gradient_cover.cljs
View File

@ -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)}]

3
src/status_im2/contexts/quo_preview/list_items/account_list_card.cljs
View File

@ -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"))

3
src/status_im2/contexts/quo_preview/list_items/address.cljs
View File

@ -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

15
src/status_im2/contexts/quo_preview/wallet/keypair.cljs
View File

@ -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}])

11
src/status_im2/contexts/wallet/account/tabs/about/view.cljs
View File

@ -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]])

23
src/status_im2/contexts/wallet/common/temp.cljs
View File

@ -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

7
src/status_im2/contexts/wallet/edit_account/view.cljs
View File

@ -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

5
src/utils/address.cljs
View File

@ -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)))))