Skip to content

Commit

Permalink
[#8446] [Multi-Account] Build account settings for individual wallet
Browse files Browse the repository at this point in the history
  • Loading branch information
@flexsurfer
flexsurfer committed Oct 10, 2019
1 parent ee5040c commit 859cd33
Show file tree
Hide file tree
Showing 7 changed files with 135 additions and 69 deletions.
3 changes: 2 additions & 1 deletion src/status_im/ui/components/text_input/styles.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down
4 changes: 2 additions & 2 deletions src/status_im/ui/components/text_input/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@
merged-styles)))

(defn text-input-with-label
[{:keys [label content error style height container text editable keyboard-type]
[{:keys [label content error style height container text editable keyboard-type label-style]
:as props
:or {editable true}}]
[react/view
(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
Expand Down
6 changes: 4 additions & 2 deletions src/status_im/ui/screens/routing/screens.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -190,7 +191,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."))))
1 change: 1 addition & 0 deletions src/status_im/ui/screens/routing/wallet_stack.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
:add-new-account
:add-new-account-password
:account-added
:account-settings
:collectibles-list
:wallet-onboarding-setup
:contact-code
Expand Down
124 changes: 124 additions & 0 deletions src/status_im/ui/screens/wallet/account_settings/views.cljs
View file
Original file line number Diff line number Diff line change
@@ -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} [:get-screen-params :wallet-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 "Account settings"]
(when @new-account
[button/button {:type :secondary :label "Apply" ;(i18n/label :t/apply)
:on-press #(do
(reset! new-account nil))}])]
;(re-frame/dispatch []))}])]
[react/scroll-view {:keyboard-should-persist-taps :handled
:style {:margin-top 28 :flex 1}}
[react/view {:margin-horizontal 16}
[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 "Type" "On Status tree"]
[property "Wallet address"
[copyable-text/copyable-text-view
{:copied-text address}
[react/text {:style {:margin-top 6 :font-family "monospace"}} address]]]
[property "Derivation path"
[copyable-text/copyable-text-view
{:copied-text path}
[react/text {:style {:margin-top 6 :font-family "monospace"}} path]]]
[property "Storage" "This device"]]]]))
2 changes: 1 addition & 1 deletion src/status_im/ui/screens/wallet/accounts/sheets.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
64 changes: 1 addition & 63 deletions src/status_im/ui/screens/wallet/add_new/views.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]))

Expand All @@ -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 "")]
Expand Down Expand Up @@ -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}]]]]))

0 comments on commit 859cd33

Please sign in to comment.