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

[#18463] Wallet - Page top refactor (#18755) 

* Use page-top in bridge screen

* Use page-top in bridge-to screen

* Use page-top in add-address-to-watch screen

* Use page-top in backup-recovery-phrase screen

* Use page-top in check-your-backup screen

* Add support for title right options to page-top

* Use page-top in check-your-backup screen

* Use page-top in send-to screen

* Use page-top in select-asset screen

* Use page-top in :wallet-share-address screen

* Deprecate text-combinations
This commit is contained in:
Ulises Manuel 2024-02-20 23:24:17 -06:00 committed by GitHub
parent 680bc33971
commit fa9b53854b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
21 changed files with 93 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/quo/components/text_combinations/page_top/style.cljs
View File

@ -12,7 +12,8 @@
:height 32})
(def header-title
{:flex-direction :row
{:flex 1
:flex-direction :row
:column-gap 8})
(def header-counter

29
src/quo/components/text_combinations/page_top/view.cljs
View File

@ -8,6 +8,7 @@
[quo.components.markdown.text :as text]
[quo.components.tags.context-tag.view :as context-tag]
[quo.components.text-combinations.page-top.style :as style]
[quo.components.text-combinations.standard-title.view :as standard-title]
[quo.theme]
[react-native.core :as rn]
[react-native.fast-image :as fast-image]
@ -32,18 +33,20 @@
(format-counter counter-bottom))]])
(defn- header
[{:keys [title input counter-top counter-bottom]
[{:keys [title title-accessibility-label input counter-top counter-bottom
title-right title-right-props]
avatar-props :avatar}]
[rn/view {:style style/header}
[rn/view {:style style/header-title}
(when avatar-props
[channel-avatar/view (assoc avatar-props :size :size-32)])
[text/text
{:weight :semi-bold
:size :heading-1}
title]]
(when (= input :recovery-phrase)
[header-counter counter-top counter-bottom])])
(let [title-props (assoc title-right-props
:title title
:right title-right
:accessibility-label title-accessibility-label)]
[rn/view {:style style/header}
[rn/view {:style style/header-title}
(when avatar-props
[channel-avatar/view (assoc avatar-props :size :size-32)])
[standard-title/view title-props]]
(when (= input :recovery-phrase)
[header-counter counter-top counter-bottom])]))
(defn- summary-description
[{:keys [row-1 row-2] :as _summary-props} blur?]
@ -112,10 +115,10 @@
emojis))
(defn- view-internal
[{:keys [theme description input blur? input-props]
[{:keys [theme description input blur? input-props container-style]
emojis :emoji-dash
:as props}]
[rn/view
[rn/view {:style container-style}
[rn/view {:style style/top-container}
[header props]
(when description

3
src/quo/components/text_combinations/standard_title/style.cljs
View File

@ -2,7 +2,8 @@
(:require [quo.foundations.colors :as colors]))
(def container
{:flex-direction :row
{:flex 1
:flex-direction :row
:justify-content :space-between})
(def right-container {:margin-left 20})

7
src/quo/components/text_combinations/standard_title/view.cljs
View File

@ -53,9 +53,12 @@
:icon-color (style/right-tag-icon-color blur? theme)}]))
(defn- view-internal
[{:keys [title right] :as props}]
[{:keys [title right accessibility-label] :as props}]
[rn/view {:style style/container}
[text/text {:size :heading-1 :weight :semi-bold}
[text/text
{:size :heading-1
:weight :semi-bold
:accessibility-label accessibility-label}
title]
(when right
[rn/view {:style style/right-container}

4
src/quo/core.cljs
View File

@ -405,7 +405,9 @@
(def channel-name quo.components.text-combinations.channel-name.view/view)
(def page-top quo.components.text-combinations.page-top.view/view)
(def standard-title quo.components.text-combinations.standard-title.view/view)
(def text-combinations quo.components.text-combinations.view/view)
(def ^{:deprecated "quo.components.text-combinations.page-top.view should be used instead"}
text-combinations
quo.components.text-combinations.view/view)
(def username quo.components.text-combinations.username.view/view)
;;;; Utilities - Outside of design system

4
src/status_im/contexts/wallet/account/bridge/style.cljs
View File

@ -1,9 +1,5 @@
(ns status-im.contexts.wallet.account.bridge.style)
(def header-container
{:padding-horizontal 20
:padding-vertical 12})
(def input-container
{:padding-horizontal 20
:padding-vertical 8})

4
src/status_im/contexts/wallet/account/bridge/view.cljs
View File

@ -17,9 +17,7 @@
[account-switcher/view
{:on-press #(rf/dispatch [:navigate-back])
:accessibility-label :top-bar}]
[quo/text-combinations
{:container-style style/header-container
:title (i18n/label :t/bridge)}]
[quo/page-top {:title (i18n/label :t/bridge)}]
[quo/input
{:container-style style/input-container
:icon-name :i/search

4
src/status_im/contexts/wallet/account/bridge_to/style.cljs
View File

@ -1,9 +1,5 @@
(ns status-im.contexts.wallet.account.bridge-to.style)
(def header-container
{:padding-horizontal 20
:padding-vertical 12})
(def content-container
{:padding-horizontal 8})

10
src/status_im/contexts/wallet/account/bridge_to/view.cljs
View File

@ -43,17 +43,15 @@
tokens (:tokens account)
mainnet (first network-details)
layer-2-networks (rest network-details)
account-token (some #(when (= token-symbol (:symbol %)) %) tokens)]
account-token (some #(when (= token-symbol (:symbol %)) %) tokens)
bridge-to-title (i18n/label :t/bridge-to
{:name (string/upper-case (str (:name token)))})]
[rn/view
[account-switcher/view
{:on-press #(rf/dispatch [:navigate-back-within-stack :wallet-bridge-to])
:icon-name :i/arrow-left
:accessibility-label :top-bar}]
[quo/text-combinations
{:container-style style/header-container
:title (i18n/label :t/bridge-to {:name (string/upper-case (str (:name token)))})}]
[quo/page-top {:title bridge-to-title}]
[rn/view style/content-container
[bridge-token-component (assoc mainnet :network-name :t/mainnet) account-token]]

5
src/status_im/contexts/wallet/add_address_to_watch/style.cljs
View File

@ -1,9 +1,6 @@
(ns status-im.contexts.wallet.add-address-to-watch.style)
(def header-container
{:margin-horizontal 20
:margin-top 12
:margin-bottom 20})
(def header-container {:padding-bottom 8})
(def scan
{:margin-top 26})

9
src/status_im/contexts/wallet/add_address_to_watch/view.cljs
View File

@ -133,10 +133,11 @@
(clear-input))
:container-style {:z-index 2}}
(i18n/label :t/continue)]}
[quo/text-combinations
{:container-style style/header-container
:title (i18n/label :t/add-address)
:description (i18n/label :t/enter-eth)}]
[quo/page-top
{:container-style style/header-container
:title (i18n/label :t/add-address)
:description :text
:description-text (i18n/label :t/enter-eth)}]
[:f> address-input
{:input-value input-value
:validate validate

4
src/status_im/contexts/wallet/create_account/new_keypair/backup_recovery_phrase/style.cljs
View File

@ -4,10 +4,6 @@
[quo.theme :as quo.theme]
[react-native.platform :as platform]))
(def header-container
{:margin-horizontal 20
:margin-vertical 12})
(defn seed-phrase-container
[theme]
{:margin-horizontal 20

11
src/status_im/contexts/wallet/create_account/new_keypair/backup_recovery_phrase/view.cljs
View File

@ -51,10 +51,10 @@
{:icon-name :i/close
:on-press #(rf/dispatch [:navigate-back])
:accessibility-label :top-bar}]
[quo/text-combinations
{:container-style style/header-container
:title (i18n/label :t/backup-recovery-phrase)
:description (i18n/label :t/backup-recovery-phrase-description)}]
[quo/page-top
{:title (i18n/label :t/backup-recovery-phrase)
:description :text
:description-text (i18n/label :t/backup-recovery-phrase-description)}]
[rn/view {:style (style/seed-phrase-container theme)}
[words-column temp/secret-phrase true]
[rn/view {:style (style/separator theme)}]
@ -68,7 +68,8 @@
:padding-top 20}}
[quo/text
{:weight :semi-bold
:style {:margin-bottom 8}} (i18n/label :t/how-to-backup)]
:style {:margin-bottom 8}}
(i18n/label :t/how-to-backup)]
[rn/flat-list
{:data step-labels
:render-fn step-item

8
src/status_im/contexts/wallet/create_account/new_keypair/check_your_backup/view.cljs
View File

@ -87,10 +87,10 @@
{:icon-name :i/arrow-left
:on-press #(rf/dispatch [:navigate-back])
:accessibility-label :top-bar}]
[quo/text-combinations
{:container-style style/header-container
:title (i18n/label :t/check-your-backup)
:description (i18n/label :t/confirm-the-position)}]
[quo/page-top
{:title (i18n/label :t/check-your-backup)
:description :text
:description-text (i18n/label :t/confirm-the-position)}]
[rn/flat-list
{:data random-indices
:render-fn (fn [num index]

4
src/status_im/contexts/wallet/create_account/select_keypair/style.cljs
View File

@ -1,9 +1,7 @@
(ns status-im.contexts.wallet.create-account.select-keypair.style)
(def header-container
{:margin-horizontal 20
:margin-top 12
:margin-bottom 20})
{:margin-bottom 8})
(def bottom-action-container
{:position :absolute

48
src/status_im/contexts/wallet/create_account/select_keypair/view.cljs
View File

@ -42,8 +42,7 @@
[]
(let [{:keys [public-key compressed-key
customization-color]} (rf/sub [:profile/profile])
display-name (first (rf/sub [:contacts/contact-two-names-by-identity
public-key]))
[display-name _] (rf/sub [:contacts/contact-two-names-by-identity public-key])
profile-with-image (rf/sub [:profile/profile-with-image])
profile-picture (profile.utils/photo profile-with-image)]
[rn/view {:style {:flex 1}}
@ -51,29 +50,30 @@
{:icon-name :i/close
:on-press #(rf/dispatch [:navigate-back])
:accessibility-label :top-bar}]
[quo/text-combinations
{:container-style style/header-container
:title (i18n/label :t/keypairs)
:description (i18n/label :t/keypairs-description)
:button-icon :i/add
:button-on-press #(rf/dispatch [:show-bottom-sheet
{:content keypair-options}])
:customization-color customization-color}]
[quo/page-top
{:container-style style/header-container
:title (i18n/label :t/keypairs)
:title-right :action
:title-right-props {:icon :i/add
:customization-color customization-color
:on-press #(rf/dispatch
[:show-bottom-sheet {:content keypair-options}])}
:description :text
:description-text (i18n/label :t/keypairs-description)}]
[quo/keypair
(merge
{:customization-color customization-color
:profile-picture profile-picture
:status-indicator false
:type :default-keypair
:stored :on-device
:on-options-press #(js/alert "Options pressed")
:action :selector
:blur? false
:details {:full-name display-name
:address (utils/get-shortened-compressed-key compressed-key)}
:accounts accounts
:container-style {:margin-horizontal 20
:margin-vertical 8}})]
{:customization-color customization-color
:profile-picture profile-picture
:status-indicator false
:type :default-keypair
:stored :on-device
:on-options-press #(js/alert "Options pressed")
:action :selector
:blur? false
:details {:full-name display-name
:address (utils/get-shortened-compressed-key compressed-key)}
:accounts accounts
:container-style {:margin-horizontal 20
:margin-vertical 8}}]
[quo/bottom-actions
{:actions :one-action
:button-one-label (i18n/label :t/confirm-account-origin)

4
src/status_im/contexts/wallet/send/select_address/style.cljs
View File

@ -3,10 +3,6 @@
(def container
{:flex 1})
(def title-container
{:margin-horizontal 20
:margin-vertical 12})
(def tabs
{:padding-top 20
:padding-bottom 12})

3
src/status_im/contexts/wallet/send/select_address/view.cljs
View File

@ -160,9 +160,8 @@
:wallet-select-address}])
:customization-color color}
(i18n/label :t/continue)])}
[quo/text-combinations
[quo/page-top
{:title (i18n/label :t/send-to)
:container-style style/title-container
:title-accessibility-label :title-label}]
[address-input input-value input-focused?]
[quo/divider-line]

3
src/status_im/contexts/wallet/send/select_asset/view.cljs
View File

@ -69,9 +69,8 @@
{:icon-name :i/arrow-left
:on-press on-close
:switcher-type :select-account}]
[quo/text-combinations
[quo/page-top
{:title (i18n/label :t/select-asset)
:container-style style/title-container
:title-accessibility-label :title-label}]
[quo/segmented-control
{:size 32

4
src/status_im/contexts/wallet/share_address/style.cljs
View File

@ -1,5 +1,3 @@
(ns status-im.contexts.wallet.share-address.style)
(def header-container
{:padding-horizontal 20
:padding-vertical 12})
(def header-container {:margin-bottom 8})

33
src/status_im/contexts/wallet/share_address/view.cljs
View File

@ -32,18 +32,18 @@
(defn- open-preferences
[selected-networks]
(rf/dispatch [:show-bottom-sheet
{:theme :dark
:shell? true
:content
(fn []
[network-preferences/view
{:blur? true
:selected-networks (set @selected-networks)
:on-save (fn [chain-ids]
(rf/dispatch [:hide-bottom-sheet])
(reset! selected-networks (map #(get utils/id->network %)
chain-ids)))}])}]))
(let [on-save (fn [chain-ids]
(rf/dispatch [:hide-bottom-sheet])
(reset! selected-networks (map utils/id->network chain-ids)))
sheet-content (fn []
[network-preferences/view
{:blur? true
:selected-networks (set @selected-networks)
:on-save on-save}])]
(rf/dispatch [:show-bottom-sheet
{:theme :dark
:shell? true
:content sheet-content}])))
(defn view
@ -74,8 +74,7 @@
[quo/overlay {:type :shell}
[rn/view
{:flex 1
:padding-top padding-top
:key :share-adress}
:padding-top padding-top}
[quo/page-nav
{:icon-name :i/close
:on-press #(rf/dispatch [:navigate-back])
@ -83,9 +82,9 @@
:right-side [{:icon-name :i/scan
:on-press #(js/alert "To be implemented")}]
:accessibility-label :top-bar}]
[quo/text-combinations
{:container-style style/header-container
:title title}]
[quo/page-top
{:title title
:container-style style/header-container}]
[rn/view {:style {:padding-horizontal 20}}
[quo/share-qr-code
{:type (if watch-only? :watched-address :wallet)