Wallet: Create Account UI (2) (#17468)

* Wallet: create account UI (2)

src/quo2/components/colors/color_picker/view.cljs

@@ -18,10 +18,11 @@
    - `blur?` Boolean to enable blur background support.}"
   [{:keys [default-selected]}]
   (let [selected (reagent/atom default-selected)]
-    (fn [{:keys [blur? on-change feng-shui?]}]
+    (fn [{:keys [blur? on-change feng-shui? container-style]}]
       [rn/scroll-view
        {:horizontal                        true
-        :shows-horizontal-scroll-indicator false}
+        :shows-horizontal-scroll-indicator false
+        :content-container-style           container-style}
        (doall (map (fn [color]
                      [color/view
                       {:selected? (= color @selected)

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

@@ -39,7 +39,7 @@
         [rn/text-input
          {:style
           (text/text-style
-           {:size   :heading-2
+           {:size   :heading-1
             :weight :semi-bold
             :style  (style/title-text theme)})
           :default-value default-value

src/quo2/components/settings/settings_item/style.cljs

@@ -13,9 +13,10 @@
   {:flex-direction :row
    :align-items    (if (or tag description) :flex-start :center)})
 
-(def sub-container
+(defn sub-container
+  [align-action]
   {:flex-direction :row
-   :align-items    :center})
+   :align-items    (or align-action :center)})
 
 (def left-container
   {:margin-left     12

src/quo2/components/settings/settings_item/view.cljs

@@ -28,7 +28,7 @@
   [{:keys [description-props blur? theme]}]
   (let [{:keys [text icon]} description-props]
     [rn/view
-     {:style style/sub-container}
+     {:style (style/sub-container :center)}
      [text/text
       {:size  :paragraph-2
        :style (style/color blur? theme)}
@@ -93,15 +93,15 @@
    (case action
      :arrow    [icon/icon :i/chevron-right (style/color blur? theme)]
      :button   [button/button
-                {:type     :outline
+                (merge action-props
-                 :size     24
+                       {:type :outline
-                 :on-press (:on-press action-props)}
+                        :size 24})
                 (:button-text action-props)]
      :selector [selectors/toggle action-props]
      nil)])
 
 (defn- internal-view
-  [{:keys [title on-press accessibility-label] :as props}]
+  [{:keys [title on-press action-props accessibility-label] :as props}]
   [rn/pressable
    {:style               (style/container props)
     :on-press            on-press
@@ -112,7 +112,7 @@
      [text/text {:weight :medium} title]
      [description-component props]
      [tag-component props]]]
-   [rn/view {:style style/sub-container}
+   [rn/view {:style (style/sub-container (:alignment action-props))}
     [label-component props]
     [action-component props]]])
 

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

@@ -1,10 +1,13 @@
 (ns status-im2.contexts.wallet.common.temp
-  (:require [quo2.core :as quo]
+  (:require
-            [quo2.foundations.resources :as quo.resources]
+    [clojure.string :as string]
-            [react-native.core :as rn]
+    [quo2.core :as quo]
-            [status-im2.contexts.wallet.common.utils :as utils]
+    [quo2.foundations.resources :as quo.resources]
-            [utils.i18n :as i18n]
+    [react-native.core :as rn]
-            [utils.re-frame :as rf]))
+    [status-im2.constants :as constants]
+    [status-im2.contexts.wallet.common.utils :as utils]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
 
 (def networks
   [{:source (quo.resources/get-network :ethereum)}
@@ -78,9 +81,24 @@
 
 (defn create-account-state
   [name]
-  [{:title        (keypair-string name)
+  [{:title             (keypair-string name)
-    :button-props {:title (i18n/label :t/edit)}
+    :image             :avatar
-    :left-icon    :i/placeholder}
+    :image-props       {:full-name           "A Y"
-   {:title        (i18n/label :t/derivation-path)
+                        :size                :xxs
-    :button-props {:title (i18n/label :t/edit)}
+                        :customization-color :blue}
-    :left-icon    :i/derivated-path}])
+    :action            :button
+    :action-props      {:on-press    #(js/alert "Button pressed!")
+                        :button-text (i18n/label :t/edit)
+                        :alignment   :flex-start}
+    :description       :text
+    :description-props {:text (i18n/label :t/on-device)}}
+   {:title             (i18n/label :t/derivation-path)
+    :image             :icon
+    :image-props       :i/derivated-path
+    :action            :button
+    :action-props      {:on-press    #(js/alert "Button pressed!")
+                        :button-text (i18n/label :t/edit)
+                        :icon-left   :i/placeholder
+                        :alignment   :flex-start}
+    :description       :text
+    :description-props {:text (string/replace constants/path-default-wallet #"/" " / ")}}])

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

@@ -24,20 +24,17 @@
    :padding-bottom     16})
 
 (def color-picker-container
-  {:padding-vertical   12
+  {:padding-vertical 12})
-   :padding-horizontal 20})
 
 (defn color-label
   [theme]
-  {:color          (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+  {:color              (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
-   :padding-bottom 4})
+   :padding-bottom     4
+   :padding-horizontal 20})
 
-(defn divider-line
+(def divider-line
-  [theme]
+  {:margin-top    12
-  {:border-color        (colors/theme-colors colors/neutral-10 colors/neutral-90 theme)
+   :margin-bottom 8})
-   :padding-top         12
-   :padding-bottom      8
-   :border-bottom-width 1})
 
 (defn slide-button-container
   [bottom]

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

@@ -57,6 +57,7 @@
          :disabled?       false
          :default-value   "Account 2"
          :container-style style/title-input-container}]
+       [quo/divider-line]
        [rn/view
         {:style style/color-picker-container}
         [quo/text
@@ -66,14 +67,16 @@
          (i18n/label :t/colour)]
         [quo/color-picker
          {:default-selected @account-color
-          :on-change        #(reset! account-color %)}]]
+          :on-change        #(reset! account-color %)
-       [rn/view {:style (style/divider-line theme)}]
+          :container-style  {:padding-horizontal 12
+                             :padding-vertical   12}}]]
+       [quo/divider-line]
        [quo/category
         {:list-type :settings
          :label     (i18n/label :t/origin)
          :data      (temp/create-account-state display-name)}]
        [quo/slide-button
-        {:track-text          (i18n/label :t/slide-create)
+        {:track-text          (i18n/label :t/slide-to-sign)
          :track-icon          :face-id
          :customization-color @account-color
          :on-complete         (fn []

translations/en.json

@@ -2300,7 +2300,7 @@
     "add-address-description": "Watch a public address or ENS name",
     "colour": "Colour",
     "origin": "Origin",
-    "slide-create": "Slide to create account",
+    "slide-to-sign": "Slide to sign",
     "user-keypair": "{{name}}'s Keypair",
     "trip-accounts": "Trip accounts",
     "destroy": "Destroy",