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>

src/quo/components/drawers/action_drawers/style.cljs

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

src/quo/components/inputs/title_input/view.cljs

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

src/quo/components/settings/data_item/component_spec.cljs

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

src/quo/components/settings/data_item/view.cljs

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

src/quo/components/settings/section_label/view.cljs

@@ -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 description?]
-  {:color         color
+  (cond-> {:color color}
-   :margin-bottom 2})
+
+    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

src/status_im2/contexts/quo_preview/settings/data_item.cljs

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

src/status_im2/contexts/wallet/account/style.cljs

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

src/status_im2/contexts/wallet/account/view.cljs

@@ -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]
+   [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
     {: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}]

src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/style.cljs

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

src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs

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

src/status_im2/contexts/wallet/common/temp.cljs

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

src/status_im2/contexts/wallet/edit_account/style.cljs

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

src/status_im2/contexts/wallet/edit_account/view.cljs

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

src/status_im2/navigation/screens.cljs

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

translations/en.json

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