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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/quo/components/drawers/action_drawers/style.cljs
View File

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

2
src/quo/components/inputs/title_input/view.cljs
View File

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

4
src/quo/components/settings/data_item/component_spec.cljs
View File

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

10
src/quo/components/settings/data_item/view.cljs
View File

@ -88,7 +88,7 @@
:emoji emoji}]))])
(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}
(case label
:preview [preview-list/view
@ -101,13 +101,13 @@
nil)
(when icon-right?
[rn/view {:style (style/right-icon label)}
[icons/icon icon
[icons/icon right-icon
{:accessibility-label :icon-right
:color icon-color
:size 20}]])])
(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]
:as props}]
(let [icon-color (if (or blur? (= :dark theme))
@ -119,13 +119,13 @@
{:accessibility-label :data-item
:disabled (not icon-right?)
: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]
(when (and (= :default status) (not= :small size))
[right-side
{:label label
:icon-right? icon-right?
:icon icon
:right-icon right-icon
:icon-color icon-color
:communities-list communities-list}])]))))

20
src/quo/components/settings/section_label/view.cljs
View File

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

1
src/status_im2/contexts/quo_preview/settings/data_item.cljs
View File

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

5
src/status_im2/contexts/wallet/account/style.cljs
View File

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

17
src/status_im2/contexts/wallet/account/view.cljs
View File

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

51
src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/style.cljs Normal file
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})

79
src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs Normal file
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))

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

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

5
src/status_im2/contexts/wallet/edit_account/style.cljs Normal file
View File

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

44
src/status_im2/contexts/wallet/edit_account/view.cljs Normal file
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))

4
src/status_im2/navigation/screens.cljs
View File

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

4
translations/en.json
View File

@ -2354,5 +2354,7 @@
"buy-tokens": "Buy Tokens",
"ramp-description": "Global crypto to fiat flow.",
"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"
}