[#8446] [Multi-Account] Build account settings for individual wallet

Signed-off-by: Andrey Shovkoplyas <[email protected]>

src/status_im/subs.cljs

@@ -472,6 +472,13 @@
  (fn [[acc address]]
    (some #(when (= (:address %) address) %) (:accounts acc))))
 
+(re-frame/reg-sub
+ :current-account
+ :<- [:multiaccount]
+ :<- [:get-screen-params :wallet-account]
+ (fn [[macc acc]]
+   (some #(when (= (:address %) (:address acc)) %) (:accounts macc))))
+
 ;;CHAT ==============================================================================================================
 
 (re-frame/reg-sub

src/status_im/ui/components/text_input/styles.cljs

@@ -3,9 +3,10 @@
             [status-im.utils.platform :as p]
             [status-im.utils.styles :as styles]))
 
-(defn label [editable]
+(defn label [editable label-style]
   (merge
    {:margin-vertical 10}
+   label-style
    (when-not editable {:color colors/gray})))
 
 (defn input-container [height editable]

src/status_im/ui/components/text_input/view.cljs

@@ -15,13 +15,13 @@
       merged-styles)))
 
 (defn text-input-with-label
-  [{:keys [label content error style height container
+  [{:keys [label content error style height container label-style
            parent-container bottom-value text editable keyboard-type]
     :as props
     :or {editable true}}]
   [react/view {:style parent-container}
    (when label
-     [react/text {:style (styles/label editable)}
+     [react/text {:style (styles/label editable label-style)}
       label])
    [react/view {:style (merge-container-styles height container editable)}
     [react/text-input

src/status_im/ui/screens/ens/views.cljs

@@ -300,7 +300,7 @@
 (defn- registration
   [checked contract address public-key]
   [react/view {:style {:flex 1 :margin-top 24}}
-   [section {:title   (i18n/label :t/ens-wallet-address)
+   [section {:title   (i18n/label :t/wallet-address)
              :content address}]
    [react/view {:style {:margin-top 14}}
     [section {:title   (i18n/label :t/key)
@@ -498,7 +498,7 @@
              (str (i18n/label :t/ens-10-SNT) ", deposit unlocked"))]]])
       [react/view {:style {:margin-top 22}}
        (when-not pending?
-         [section {:title   (i18n/label :t/ens-wallet-address)
+         [section {:title   (i18n/label :t/wallet-address)
                    :content (ethereum/normalized-address address)}])
        (when-not pending?
          [react/view {:style {:margin-top 14}}

src/status_im/ui/screens/routing/screens.cljs

@@ -68,7 +68,8 @@
             [status-im.ui.screens.wallet.custom-tokens.views :as custom-tokens]
             [status-im.ui.screens.wallet.accounts.views :as wallet.accounts]
             [status-im.ui.screens.wallet.account.views :as wallet.account]
-            [status-im.ui.screens.wallet.add-new.views :as add-account]))
+            [status-im.ui.screens.wallet.add-new.views :as add-account]
+            [status-im.ui.screens.wallet.account-settings.views :as account-settings]))
 
 (def all-screens
   {:login                                            login/login
@@ -197,7 +198,8 @@
    :keycard-welcome                                  keycard/welcome
    :add-new-account                                  add-account/add-account
    :add-new-account-password                         add-account/password
-   :account-added                                    add-account/account-added})
+   :account-added                                    account-settings/account-added
+   :account-settings                                 account-settings/account-settings})
 
 (defn get-screen [screen]
   (get all-screens screen #(throw (str "Screen " screen " is not defined."))))

src/status_im/ui/screens/routing/wallet_stack.cljs

@@ -7,6 +7,7 @@
              :add-new-account
              :add-new-account-password
              :account-added
+             :account-settings
              :collectibles-list
              :wallet-onboarding-setup
              :contact-code

src/status_im/ui/screens/wallet/account/views.cljs

@@ -121,7 +121,7 @@
          [transactions address])])))
 
 (views/defview account []
-  (views/letsubs [{:keys [name address] :as account} [:get-screen-params]]
+  (views/letsubs [{:keys [name address] :as account} [:current-account]]
     [react/view {:flex 1 :background-color colors/white}
      [toolbar-view name]
      [react/scroll-view

src/status_im/ui/screens/wallet/account_settings/views.cljs

@@ -0,0 +1,124 @@
+(ns status-im.ui.screens.wallet.account-settings.views
+  (:require-macros [status-im.utils.views :refer [defview letsubs]])
+  (:require [status-im.ui.components.react :as react]
+            [status-im.ui.components.status-bar.view :as status-bar]
+            [status-im.ui.components.toolbar.view :as topbar]
+            [status-im.ui.components.text-input.view :as text-input]
+            [re-frame.core :as re-frame]
+            [status-im.i18n :as i18n]
+            [status-im.ui.components.icons.vector-icons :as icons]
+            [status-im.ui.components.colors :as colors]
+            [status-im.ui.components.button :as button]
+            [clojure.string :as string]
+            [status-im.ui.components.toolbar :as toolbar]
+            [status-im.ui.components.copyable-text :as copyable-text]
+            [reagent.core :as reagent]))
+
+(defview colors-popover [selected-color on-press]
+  (letsubs [width [:dimensions/window-width]]
+    [react/view {:flex 1 :padding-bottom 16}
+     [react/scroll-view {:style {:margin 16}}
+      (doall
+       (for [color colors/account-colors]
+         ^{:key color}
+         [react/touchable-highlight {:on-press #(on-press color)}
+          [react/view {:height          52 :background-color color :border-radius 8 :width (* 0.7 width)
+                       :justify-content :center :padding-left 12 :margin-bottom 16}
+           [react/view {:height           32 :width 32 :border-radius 20 :align-items :center :justify-content :center
+                        :background-color colors/black-transparent}
+            (when (= selected-color color)
+              [icons/icon :main-icons/check {:color colors/white}])]]]))]
+     [toolbar/toolbar
+      {:center {:on-press #(re-frame/dispatch [:hide-popover])
+                :label    (i18n/label :t/cancel)
+                :type     :secondary}}]]))
+
+(defview account-added []
+  (letsubs [{:keys [account]} [:generate-account]]
+    [react/keyboard-avoiding-view {:flex 1}
+     [status-bar/status-bar]
+     [react/scroll-view {:keyboard-should-persist-taps :handled
+                         :style                        {:margin-top 70 :flex 1}}
+      [react/view {:align-items :center :padding-horizontal 40}
+       [react/view {:height           40 :width 40 :border-radius 20 :align-items :center :justify-content :center
+                    :background-color (:color account)}
+        [icons/icon :main-icons/check {:color colors/white}]]
+       [react/text {:style {:typography :header :margin-top 16}}
+        (i18n/label :t/account-added)]
+       [react/text {:style {:color colors/gray :text-align :center :margin-top 16 :line-height 22}}
+        (i18n/label :t/you-can-change-account)]]
+      [react/view {:height 52}]
+      [react/view {:margin-horizontal 16}
+       [text-input/text-input-with-label
+        {:label          (i18n/label :t/account-name)
+         :auto-focus     false
+         :default-value  (:name account)
+         :on-change-text #(re-frame/dispatch [:set-in [:generate-account :account :name] %])}]
+       [react/text {:style {:margin-top 30}} (i18n/label :t/account-color)]
+       [react/touchable-highlight
+        {:on-press #(re-frame/dispatch [:show-popover
+                                        {:view  [colors-popover (:color account)
+                                                 (fn [new-color]
+                                                   (re-frame/dispatch [:set-in [:generate-account :account :color] new-color])
+                                                   (re-frame/dispatch [:hide-popover]))]
+                                         :style {:max-height "60%"}}])}
+        [react/view {:height      52 :margin-top 12 :background-color (:color account) :border-radius 8
+                     :align-items :flex-end :justify-content :center :padding-right 12}
+         [icons/icon :main-icons/dropdown {:color colors/white}]]]]]
+     [toolbar/toolbar
+      {:right {:type      :next
+               :label     (i18n/label :t/finish)
+               :on-press  #(re-frame/dispatch [:wallet.accounts/save-generated-account])
+               :disabled? (string/blank? (:name account))}}]]))
+
+(defn property [label value]
+  [react/view {:margin-top 28}
+   [react/text {:style {:color colors/gray}} label]
+   (if (string? value)
+     [react/text {:style {:margin-top 6}} value]
+     value)])
+
+(defview account-settings []
+  (letsubs [{:keys [address color path] :as account} [:current-account]
+            new-account (reagent/atom nil)]
+    [react/keyboard-avoiding-view {:flex 1}
+     [status-bar/status-bar]
+     [topbar/toolbar {}
+      topbar/default-nav-back
+      [topbar/content-title (i18n/label :t/account-settings)]
+      (when (and @new-account (not= "" (:name @new-account)))
+        [button/button {:type :secondary :label (i18n/label :t/apply)
+                        :on-press #(do
+                                     (re-frame/dispatch [:wallet.accounts/save-account account @new-account])
+                                     (reset! new-account nil))}])]
+     [react/scroll-view {:keyboard-should-persist-taps :handled
+                         :style                        {:flex 1}}
+      [react/view {:margin-horizontal 16 :padding-bottom 28 :padding-top 10}
+       [text-input/text-input-with-label
+        {:label          (i18n/label :t/account-name)
+         :label-style    {:color colors/gray}
+         :auto-focus     false
+         :default-value  (:name account)
+         :on-change-text #(swap! new-account assoc :name %)}]
+       [react/text {:style {:margin-top 30 :color colors/gray}} (i18n/label :t/account-color)]
+       [react/touchable-highlight
+        {:on-press #(re-frame/dispatch [:show-popover
+                                        {:view  [colors-popover color
+                                                 (fn [new-color]
+                                                   (swap! new-account assoc :color new-color)
+                                                   (re-frame/dispatch [:hide-popover]))]
+                                         :style {:max-height "60%"}}])}
+        [react/view {:height        52 :margin-top 12 :background-color (or (:color @new-account) color)
+                     :border-radius 8
+                     :align-items   :flex-end :justify-content :center :padding-right 12}
+         [icons/icon :main-icons/dropdown {:color colors/white}]]]
+       [property (i18n/label :t/type) (i18n/label :t/on-status-tree)]
+       [property (i18n/label :t/wallet-address)
+        [copyable-text/copyable-text-view
+         {:copied-text address}
+         [react/text {:style {:margin-top 6 :font-family "monospace"}} address]]]
+       [property (i18n/label :t/derivation-path)
+        [copyable-text/copyable-text-view
+         {:copied-text path}
+         [react/text {:style {:margin-top 6 :font-family "monospace"}} path]]]
+       [property (i18n/label :t/storage) (i18n/label :t/this-device)]]]]))

src/status_im/ui/screens/wallet/accounts/sheets.cljs

@@ -69,7 +69,7 @@
     {:theme     :action
      :title     :t/account-settings
      :icon      :main-icons/info
-     :disabled? true}]
+     :on-press #(hide-sheet-and-dispatch [:navigate-to :account-settings])}]
    ;; Commented out for v1
    #_[list-item/list-item
       {:theme     :action

src/status_im/ui/screens/wallet/add_new/views.cljs

@@ -8,10 +8,7 @@
             [status-im.ui.components.colors :as colors]
             [status-im.ui.components.list-item.views :as list-item]
             [status-im.ui.components.common.common :as components.common]
-            [status-im.ui.components.icons.vector-icons :as icons]
-            [status-im.ui.components.text-input.view :as text-input]
             [reagent.core :as reagent]
-            [clojure.string :as string]
             [cljs.spec.alpha :as spec]
             [status-im.multiaccounts.db :as multiaccounts.db]))
 
@@ -38,65 +35,6 @@
       #(re-frame/dispatch
         [:navigate-to :add-new-account-password])}]]])
 
-(defview colors-popover [selected-color]
-  (letsubs [width [:dimensions/window-width]]
-    [react/view {:padding-bottom 16}
-     [react/scroll-view {:style {:margin 16}}
-      (doall
-       (for [color colors/account-colors]
-         ^{:key color}
-         [react/touchable-highlight {:on-press #(do
-                                                  (re-frame/dispatch [:set-in [:generate-account :account :color] color])
-                                                  (re-frame/dispatch [:hide-popover]))}
-          [react/view {:height          52 :background-color color :border-radius 8 :width (* 0.7 width)
-                       :justify-content :center :padding-left 12 :margin-bottom 16}
-           [react/view {:height           32 :width 32 :border-radius 20 :align-items :center :justify-content :center
-                        :background-color colors/black-transparent}
-            (when (= selected-color color)
-              [icons/icon :main-icons/check {:color colors/white}])]]]))]
-     [components.common/button {:on-press    #(re-frame/dispatch [:hide-popover])
-                                :label       (i18n/label :t/cancel)
-                                :background? false}]]))
-
-(defview account-added []
-  (letsubs [{:keys [account]} [:generate-account]]
-    [react/keyboard-avoiding-view {:flex 1}
-     [status-bar/status-bar]
-     [react/scroll-view {:keyboard-should-persist-taps :handled
-                         :style                        {:margin-top 70 :flex 1}}
-      [react/view {:align-items :center :padding-horizontal 40}
-       [react/view {:height           40 :width 40 :border-radius 20 :align-items :center :justify-content :center
-                    :background-color (:color account)}
-        [icons/icon :main-icons/check {:color colors/white}]]
-       [react/text {:style {:typography :header :margin-top 16}}
-        (i18n/label :t/account-added)]
-       [react/text {:style {:color colors/gray :text-align :center :margin-top 16 :line-height 22}}
-        (i18n/label :t/you-can-change-account)]]
-      [react/view {:height 52}]
-      [react/view {:margin-horizontal 16}
-       [text-input/text-input-with-label
-        {:label          (i18n/label :t/account-name)
-         :auto-focus     false
-         :default-value  (:name account)
-         :on-change-text #(re-frame/dispatch [:set-in [:generate-account :account :name] %])}]
-       [react/text {:style {:margin-top 30}} (i18n/label :t/account-color)]
-       [react/touchable-highlight {:on-press #(re-frame/dispatch [:show-popover {:view  [colors-popover (:color account)]
-                                                                                 :style {:max-height "60%"}}])}
-        [react/view {:height      52 :margin-top 12 :background-color (:color account) :border-radius 8
-                     :align-items :flex-end :justify-content :center :padding-right 12}
-         [icons/icon :main-icons/dropdown {:color colors/white}]]]]]
-     [react/view {:style {:flex-direction   :row
-                          :justify-content  :flex-end
-                          :align-self       :stretch
-                          :padding-vertical 16
-                          :border-top-width 1
-                          :border-top-color colors/gray-lighter
-                          :padding-right    12}}
-      [components.common/bottom-button {:label     (i18n/label :t/finish)
-                                        :on-press  #(re-frame/dispatch [:wallet.accounts/save-generated-account])
-                                        :disabled? (string/blank? (:name account))
-                                        :forward?  true}]]]))
-
 (defview password []
   (letsubs [{:keys [error]} [:generate-account]
             entered-password (reagent/atom "")]
@@ -130,4 +68,4 @@
                                          :on-press  #(re-frame/dispatch
                                                       [:wallet.accounts/generate-new-account @entered-password])
                                          :disabled? (not (spec/valid? ::multiaccounts.db/password @entered-password))
-                                         :forward?  true}]]]]))
+                                         :forward?  true}]]]]))

src/status_im/ui/screens/wallet/request/views.cljs

@@ -69,7 +69,7 @@
          (- @width 32)
          (eip681/generate-uri address {:chain-id chain-id})])
       [copyable-text/copyable-text-view
-       {:label           :t/ens-wallet-address
+       {:label           :t/wallet-address
         :container-style {:margin-top 12 :margin-bottom 4}
         :copied-text     (eip55/address->checksum address)}
        [react/text {:number-of-lines     1

src/status_im/ui/screens/wallet/transactions/views.cljs

@@ -129,7 +129,7 @@
      [react/view
       {:style (merge {:background-color :white} components.styles/flex)}
       [list/section-list {:sections [{:title
-                                      (i18n/label :t/transactions-filter-type)
+                                      (i18n/label :t/type)
                                       :key       :type
                                       :render-fn render-item-filter
                                       :data filters}]

src/status_im/wallet/accounts/core.cljs

@@ -87,6 +87,16 @@
             (navigation/navigate-to-cofx :account-added nil)))
 
 (fx/defn save-account
+  {:events [:wallet.accounts/save-account]}
+  [{:keys [db] :as cofx} account {:keys [name color]}]
+  (let [{:keys [accounts]} (:multiaccount db)
+        new-account (cond-> account
+                      name (assoc :name name)
+                      color (assoc :color color))
+        new-accounts (replace {account new-account} accounts)]
+    (multiaccounts.update/multiaccount-update cofx {:accounts new-accounts} nil)))
+
+(fx/defn save-generated-account
   {:events [:wallet.accounts/save-generated-account]}
   [{:keys [db] :as cofx}]
   (let [{:keys [accounts latest-derived-path]} (:multiaccount db)
@@ -100,4 +110,4 @@
                 (multiaccounts.update/multiaccount-update {:accounts (conj accounts account)
                                                            :latest-derived-path (inc latest-derived-path)} nil)
                 (wallet/update-balances nil)
-                (navigation/navigate-to-cofx :wallet nil)))))
+                (navigation/navigate-to-cofx :wallet nil)))))

test/cljs/status_im/test/i18n.cljs

@@ -416,7 +416,7 @@
     :ens-username-taken
     :ens-usernames
     :ens-usernames-details
-    :ens-wallet-address
+    :wallet-address
     :ens-want-custom-domain
     :ens-want-domain
     :ens-welcome-hints
@@ -979,7 +979,7 @@
     :transactions
     :transactions-filter-select-all
     :transactions-filter-title
-    :transactions-filter-type
+    :type
     :transactions-history
     :transactions-history-empty
     :transactions-sign

translations/cs.json

@@ -81,7 +81,7 @@
         "one": "kontakt",
         "other": "kontakty(ů)"
     },
-    "transactions-filter-type": "Typ",
+    "type": "Typ",
     "next": "Další",
     "recent": "Poslední",
     "status": "Status",

translations/de.json

@@ -118,7 +118,7 @@
         "other": "Kontakte"
     },
     "gas-used": "Gas verbraucht",
-    "transactions-filter-type": "Typ",
+    "type": "Typ",
     "next": "Weiter",
     "recent": "Kürzliche Status",
     "open-on-etherscan": "Auf Etherscan.io öffnen",