Implement Edit Wallet Account Screen (base) (#17637)

This commit

- Adds the base Screen base for the Create/Edit Account/Address
- Adds the Wallet Edit Account screen
- Adds the gradient in the account options bottom sheet
- Adds a new key/prop "right-icon" in the data-item component to prevent overlapping with the icon used in the description and updates its usage.
- Updates the "section-label" component to receive "container-style" (this will prevent adding a wrapping view in the screens)

---------

Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
This commit is contained in:
Mohamed Javid 2023-10-18 20:08:58 +08:00 committed by GitHub
parent f19ec2a93f
commit d5da921e1c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 228 additions and 26 deletions

View File

@ -14,20 +14,20 @@
(defn container (defn container
[sub-label disabled?] [sub-label disabled?]
{:border-radius 12 {:border-radius 12
:height (if sub-label 58 50) :height (if sub-label 56 48)
:opacity (when disabled? 0.3) :opacity (when disabled? 0.3)
:margin-horizontal 8}) :margin-horizontal 8})
(defn row-container (defn row-container
[sub-label] [sub-label]
{:height (if sub-label 58 50) {:height (if sub-label 56 48)
:margin-horizontal 12 :margin-horizontal 12
:flex-direction :row}) :flex-direction :row})
(defn left-icon (defn left-icon
[sub-label?] [sub-label?]
{:height 20 {:height 20
:margin-top (if sub-label? 10 :auto) :margin-top (if sub-label? 8 :auto)
:margin-bottom (when-not sub-label? :auto) :margin-bottom (when-not sub-label? :auto)
:margin-right 12 :margin-right 12
:width 20}) :width 20})

View File

@ -20,6 +20,7 @@
placeholder placeholder
max-length max-length
default-value default-value
return-key-type
size size
theme theme
container-style] container-style]
@ -46,6 +47,7 @@
:default-value default-value :default-value default-value
:accessibility-label :profile-title-input :accessibility-label :profile-title-input
:keyboard-appearance (quo.theme/theme-value :light :dark theme) :keyboard-appearance (quo.theme/theme-value :light :dark theme)
:return-key-type return-key-type
:on-focus #(swap! focused? (constantly true)) :on-focus #(swap! focused? (constantly true))
:on-blur #(swap! focused? (constantly false)) :on-blur #(swap! focused? (constantly false))
:auto-focus auto-focus :auto-focus auto-focus

View File

@ -116,6 +116,7 @@
:blur? false :blur? false
:description :account :description :account
:icon-right? true :icon-right? true
:right-icon :i/chevron-right
:card? true :card? true
:label :none :label :none
:status :default :status :default
@ -133,6 +134,7 @@
:blur? false :blur? false
:description :icon :description :icon
:icon-right? true :icon-right? true
:right-icon :i/chevron-right
:card? true :card? true
:label :preview :label :preview
:status :default :status :default
@ -150,6 +152,7 @@
:blur? false :blur? false
:description :network :description :network
:icon-right? true :icon-right? true
:right-icon :i/chevron-right
:card? true :card? true
:label :preview :label :preview
:status :default :status :default
@ -167,6 +170,7 @@
:blur? false :blur? false
:description :account :description :account
:icon-right? true :icon-right? true
:right-icon :i/chevron-right
:card? true :card? true
:label :preview :label :preview
:status :default :status :default

View File

@ -88,7 +88,7 @@
:emoji emoji}]))]) :emoji emoji}]))])
(defn- right-side (defn- right-side
[{:keys [label icon-right? icon icon-color communities-list]}] [{:keys [label icon-right? right-icon icon-color communities-list]}]
[rn/view {:style style/right-container} [rn/view {:style style/right-container}
(case label (case label
:preview [preview-list/view :preview [preview-list/view
@ -101,13 +101,13 @@
nil) nil)
(when icon-right? (when icon-right?
[rn/view {:style (style/right-icon label)} [rn/view {:style (style/right-icon label)}
[icons/icon icon [icons/icon right-icon
{:accessibility-label :icon-right {:accessibility-label :icon-right
:color icon-color :color icon-color
:size 20}]])]) :size 20}]])])
(def view-internal (def view-internal
(fn [{:keys [blur? card? icon-right? icon label status size theme on-press communities-list (fn [{:keys [blur? card? icon-right? right-icon label status size theme on-press communities-list
container-style] container-style]
:as props}] :as props}]
(let [icon-color (if (or blur? (= :dark theme)) (let [icon-color (if (or blur? (= :dark theme))
@ -119,13 +119,13 @@
{:accessibility-label :data-item {:accessibility-label :data-item
:disabled (not icon-right?) :disabled (not icon-right?)
:on-press on-press :on-press on-press
:style (merge (style/container size card? blur? theme) container-style)} :style (merge container-style (style/container size card? blur? theme))}
[left-side props] [left-side props]
(when (and (= :default status) (not= :small size)) (when (and (= :default status) (not= :small size))
[right-side [right-side
{:label label {:label label
:icon-right? icon-right? :icon-right? icon-right?
:icon icon :right-icon right-icon
:icon-color icon-color :icon-color icon-color
:communities-list communities-list}])])))) :communities-list communities-list}])]))))

View File

@ -2,7 +2,8 @@
(:require (:require
[quo.components.markdown.text :as text] [quo.components.markdown.text :as text]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme :as quo.theme])) [quo.theme :as quo.theme]
[react-native.core :as rn]))
(defn- get-text-color (defn- get-text-color
[theme blur?] [theme blur?]
@ -13,9 +14,11 @@
theme))) theme)))
(defn label-style (defn label-style
[color] [color description?]
{:color color (cond-> {:color color}
:margin-bottom 2})
description?
(assoc :margin-bottom 2)))
(defn- view-internal (defn- view-internal
"Props: "Props:
@ -23,15 +26,16 @@
- description (optional) - description of the section - description (optional) - description of the section
- blur? (optional) - use blurred styling - blur? (optional) - use blurred styling
- theme - light or dark" - theme - light or dark"
[{:keys [section description blur? theme]}] [{:keys [section description blur? theme container-style]}]
(let [color (get-text-color theme (or blur? false)) (let [color (get-text-color theme (or blur? false))
description? (not (nil? description))] description? (not (nil? description))
[:<> root-view (if (seq container-style) rn/view :<>)]
[root-view {:style container-style}
[text/text [text/text
{:number-of-lines 1 {:number-of-lines 1
:size (if description? :paragraph-1 :paragraph-2) :size (if description? :paragraph-1 :paragraph-2)
:weight :medium :weight :medium
:style (label-style color)} :style (label-style color description?)}
section] section]
(when description? (when description?
[text/text [text/text

View File

@ -47,6 +47,7 @@
:title "Label" :title "Label"
:subtitle "Description" :subtitle "Description"
:icon :i/placeholder :icon :i/placeholder
:right-icon :i/chevron-right
:emoji "🎮" :emoji "🎮"
:customization-color :yellow :customization-color :yellow
:communities-list communities-list})] :communities-list communities-list})]

View File

@ -3,3 +3,8 @@
(def tabs (def tabs
{:padding-left 20 {:padding-left 20
:padding-vertical 12}) :padding-vertical 12})
(def drawer-section-label
{:padding-horizontal 20
:padding-top 12
:padding-bottom 8})

View File

@ -18,7 +18,8 @@
[quo/action-drawer [quo/action-drawer
[[{:icon :i/edit [[{:icon :i/edit
:accessibility-label :edit :accessibility-label :edit
:label (i18n/label :t/edit-account)} :label (i18n/label :t/edit-account)
:on-press #(rf/dispatch [:navigate-to :wallet-edit-account])}
{:icon :i/copy {:icon :i/copy
:accessibility-label :copy-address :accessibility-label :copy-address
:label (i18n/label :t/copy-address)} :label (i18n/label :t/copy-address)}
@ -29,12 +30,10 @@
:accessibility-label :remove-account :accessibility-label :remove-account
:label (i18n/label :t/remove-account) :label (i18n/label :t/remove-account)
:danger? true}]]] :danger? true}]]]
[quo/divider-line] [quo/divider-line {:container-style {:margin-top 8}}]
[rn/view [quo/section-label
{:style {:padding-horizontal 20 {:section (i18n/label :t/select-another-account)
:padding-top 12 :container-style style/drawer-section-label}]
:padding-bottom 8}}
[quo/section-label {:section (i18n/label :t/select-another-account)}]]
[rn/flat-list [rn/flat-list
{:data temp/other-accounts {:data temp/other-accounts
:render-fn (fn [account] [quo/account-item {:account-props account}]) :render-fn (fn [account] [quo/account-item {:account-props account}])
@ -81,7 +80,9 @@
:right-side :account-switcher :right-side :account-switcher
:account-switcher {:customization-color :purple :account-switcher {:customization-color :purple
:on-press #(rf/dispatch [:show-bottom-sheet :on-press #(rf/dispatch [:show-bottom-sheet
{:content account-options}]) {:content account-options
:gradient-cover? true
:customization-color :purple}])
:emoji "🍑"}}] :emoji "🍑"}}]
[quo/account-overview temp/account-overview-state] [quo/account-overview temp/account-overview-state]
[quo/wallet-graph {:time-frame :empty}] [quo/wallet-graph {:time-frame :empty}]

View File

@ -0,0 +1,51 @@
(ns status-im2.contexts.wallet.common.screen-base.create-or-edit-account.style)
(defn root-container
[top]
{:flex 1
:margin-top top})
(defn gradient-cover-container
[top]
{:position :absolute
:top (- top)
:left 0
:right 0
:z-index -1})
(def account-avatar-container
{:padding-horizontal 20
:padding-top 12})
(def reaction-button-container
{:position :absolute
:bottom 0
:left 76})
(def title-input-container
{:padding-horizontal 20
:padding-top 12
:padding-bottom 16})
(def divider-1
{:margin-bottom 12})
(def section-container
{:padding-horizontal 20
:padding-bottom 4})
(def color-picker-container
{:padding-vertical 8})
(def color-picker
{:padding-horizontal 12})
(def divider-2
{:margin-top 4
:margin-bottom 12})
(defn bottom-action
[bottom]
{:padding-horizontal 20
:padding-vertical 12
:margin-bottom bottom})

View File

@ -0,0 +1,79 @@
(ns status-im2.contexts.wallet.common.screen-base.create-or-edit-account.view
(:require [quo.core :as quo]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[react-native.safe-area :as safe-area]
[status-im2.contexts.wallet.common.screen-base.create-or-edit-account.style :as style]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
(defn- view-internal
[{:keys [margin-top? page-nav-right-side account-name account-color account-emoji on-change-name
on-change-color
on-change-emoji section-label bottom-action? bottom-action-label bottom-action-props
custom-bottom-action]} & children]
(let [{:keys [top bottom]} (safe-area/get-insets)
margin-top (if (false? margin-top?) 0 top)]
[rn/keyboard-avoiding-view
{:style (style/root-container margin-top)
:keyboard-vertical-offset (- bottom)}
[quo/page-nav
{:type :no-title
:background :blur
:right-side page-nav-right-side
:icon-name :i/close
:on-press #(rf/dispatch [:navigate-back])}]
[quo/gradient-cover
{:customization-color account-color
:container-style (style/gradient-cover-container margin-top)}]
(into
[rn/scroll-view {:bounces false}
[rn/view {:style style/account-avatar-container}
[quo/account-avatar
{:customization-color account-color
:size 80
:emoji account-emoji
:type :default}]
[quo/button
{:size 32
:type :grey
:background :photo
:icon-only? true
:on-press #(rf/dispatch [:emoji-picker/open {:on-select on-change-emoji}])
:container-style style/reaction-button-container}
:i/reaction]]
[quo/title-input
{:placeholder (i18n/label :t/account-name-input-placeholder)
:max-length 24
:blur? true
:default-value account-name
:on-change-text on-change-name
:container-style style/title-input-container
:return-key-type :done}]
[quo/divider-line {:container-style style/divider-1}]
[quo/section-label
{:section (i18n/label :t/colour)
:container-style style/section-container}]
[rn/view {:style style/color-picker-container}
[quo/color-picker
{:default-selected account-color
:on-change on-change-color
:container-style style/color-picker}]]
[quo/divider-line {:container-style style/divider-2}]
(when section-label
[quo/section-label
{:section (i18n/label section-label)
:container-style style/section-container}])]
children)
(when bottom-action?
[rn/view {:style (style/bottom-action bottom)}
(if custom-bottom-action
custom-bottom-action
[quo/button
(merge
{:size 40
:type :primary}
bottom-action-props)
(i18n/label bottom-action-label)])])]))
(def view (quo.theme/with-theme view-internal))

View File

@ -148,7 +148,7 @@
(def data-item-state (def data-item-state
{:description :default {:description :default
:icon-right? true :icon-right? true
:icon :i/options :right-icon :i/options
:card? true :card? true
:label :none :label :none
:status :default :status :default

View File

@ -0,0 +1,5 @@
(ns status-im2.contexts.wallet.edit-account.style)
(def data-item
{:margin-horizontal 20
:margin-vertical 8})

View File

@ -0,0 +1,44 @@
(ns status-im2.contexts.wallet.edit-account.view
(:require [quo.core :as quo]
[quo.theme :as quo.theme]
[reagent.core :as reagent]
[status-im2.contexts.wallet.common.screen-base.create-or-edit-account.view :as
create-or-edit-account]
[status-im2.contexts.wallet.edit-account.style :as style]
[utils.i18n :as i18n]))
(defn- view-internal
[]
(let [account-name (reagent/atom "Account 1")
account-color (reagent/atom :purple)
account-emoji (reagent/atom "🍑")
account-address "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
on-change-name #(reset! account-name %)
on-change-color #(reset! account-color %)
on-change-emoji #(reset! account-emoji %)]
(fn []
[create-or-edit-account/view
{:page-nav-right-side [{:icon-name :i/delete
:on-press #(js/alert "Delete account: to be implemented")}]
:account-name @account-name
:account-emoji @account-emoji
:account-color @account-color
:on-change-name on-change-name
:on-change-color on-change-color
:on-change-emoji on-change-emoji
:section-label :t/account-info}
[quo/data-item
{:status :default
:size :default
:description :default
:label :none
:blur? false
:icon-right? true
:right-icon :i/advanced
:card? true
:title (i18n/label :t/address)
:subtitle account-address
:on-press #(js/alert "Network selector: to be implemented")
:container-style style/data-item}]])))
(def view (quo.theme/with-theme view-internal))

View File

@ -40,6 +40,7 @@
[status-im2.contexts.wallet.address-watch.view :as wallet-address-watch] [status-im2.contexts.wallet.address-watch.view :as wallet-address-watch]
[status-im2.contexts.wallet.collectible.view :as wallet-collectible] [status-im2.contexts.wallet.collectible.view :as wallet-collectible]
[status-im2.contexts.wallet.create-account.view :as wallet-create-account] [status-im2.contexts.wallet.create-account.view :as wallet-create-account]
[status-im2.contexts.wallet.edit-account.view :as wallet-edit-account]
[status-im2.contexts.wallet.saved-address.view :as wallet-saved-address] [status-im2.contexts.wallet.saved-address.view :as wallet-saved-address]
[status-im2.contexts.wallet.saved-addresses.view :as wallet-saved-addresses] [status-im2.contexts.wallet.saved-addresses.view :as wallet-saved-addresses]
[status-im2.contexts.wallet.scan-account.view :as scan-address] [status-im2.contexts.wallet.scan-account.view :as scan-address]
@ -243,6 +244,9 @@
{:name :wallet-accounts {:name :wallet-accounts
:component wallet-accounts/view} :component wallet-accounts/view}
{:name :wallet-edit-account
:component wallet-edit-account/view}
{:name :wallet-address-watch {:name :wallet-address-watch
:component wallet-address-watch/view} :component wallet-address-watch/view}

View File

@ -2354,5 +2354,7 @@
"buy-tokens": "Buy Tokens", "buy-tokens": "Buy Tokens",
"ramp-description": "Global crypto to fiat flow.", "ramp-description": "Global crypto to fiat flow.",
"moonpay-description": "The new standard for fiat to crypto, supports Apple Pay.", "moonpay-description": "The new standard for fiat to crypto, supports Apple Pay.",
"latamex-description": "Easily buy crypto in Argentina, Mexico and Brazil." "latamex-description": "Easily buy crypto in Argentina, Mexico and Brazil.",
"account-info": "Account info",
"account-name-input-placeholder": "Account name"
} }