Feat: wallet create account screen UI (#17118)

* feat: wallet create account

src/quo2/components/buttons/slide_button/view.cljs

@@ -26,7 +26,8 @@
                  track-icon
                  disabled?
                  customization-color
-                 size]}]
+                 size
+                 container-style]}]
       (let [x-pos             (reanimated/use-shared-value 0)
             dimensions        (partial utils/get-dimensions
                                        (or @track-width constants/default-width)
@@ -49,7 +50,8 @@
                                             sliding-complete?)}
          [reanimated/view
           {:test-ID   :slide-button-track
-           :style     (style/track disabled? customization-color (dimensions :track-height))
+           :style     (merge (style/track disabled? customization-color (dimensions :track-height))
+                             container-style)
            :on-layout (when-not (some? @track-width)
                         on-track-layout)}
           [reanimated/view {:style (style/track-cover interpolate-track)}

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

@@ -2,8 +2,7 @@
   (:require [quo2.foundations.colors :as colors]))
 
 (def color-picker-container
-  {:flex            1
+  {:flex-direction  :row
-   :flex-direction  :row
    :flex-wrap       :wrap
    :justify-content :space-between})
 

src/quo2/components/gradient/gradient_cover/view.cljs

@@ -5,7 +5,7 @@
             [react-native.linear-gradient :as linear-gradient]))
 
 (defn- view-internal
-  [{:keys [customization-color] :or {customization-color :blue}}]
+  [{:keys [customization-color container-style] :or {customization-color :blue}}]
   (let [color-top    (colors/custom-color customization-color 50 20)
         color-bottom (colors/custom-color customization-color 50 0)]
     [linear-gradient/linear-gradient
@@ -13,6 +13,6 @@
       :colors              [color-top color-bottom]
       :start               {:x 0 :y 0}
       :end                 {:x 0 :y 1}
-      :style               style/root-container}]))
+      :style               (merge style/root-container container-style)}]))
 
 (def view (quo.theme/with-theme view-internal))

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

@@ -40,6 +40,7 @@
 (defn title-text
   [disabled? blur? theme]
   {:text-align-vertical :bottom
+   :padding             0
    :color               (if disabled?
                           (get-disabled-color blur? theme)
                           (colors/theme-colors colors/neutral-100 colors/white theme))})
@@ -50,7 +51,6 @@
 
 (def container
   {:flex-direction  :row
-   :flex            1
    :justify-content :center
    :align-items     :center})
 

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

@@ -19,7 +19,8 @@
            placeholder
            max-length
            default-value
-           theme]
+           theme
+           container-style]
     :or   {max-length    0
            auto-focus    false
            default-value ""}}]
@@ -31,7 +32,7 @@
                       (on-change-text v)))]
     (fn [{:keys [customization-color disabled?]}]
       [rn/view
-       {:style style/container}
+       {:style (merge style/container container-style)}
        [rn/view {:style style/text-input-container}
         [rn/text-input
          {:style

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

@@ -1,7 +1,10 @@
 (ns status-im2.contexts.wallet.common.temp
-  (:require [quo2.core :as quo]
+  (:require
+    [quo2.core :as quo]
     [react-native.core :as rn]
-            [utils.re-frame :as rf]))
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]
+    [status-im2.contexts.wallet.common.utils :as utils]))
 
 (defn wallet-temporary-navigation
   []
@@ -30,18 +33,6 @@
    :currency-change   "€0.00"
    :percentage-change "0.00%"})
 
-(def account-cards
-  [{:name                "Account 1"
-    :balance             "€0.00"
-    :percentage-value    "€0.00"
-    :customization-color :blue
-    :type                :empty
-    :emoji               "🍑"
-    :on-press            #(rf/dispatch [:navigate-to :wallet-accounts])}
-   {:customization-color :blue
-    :on-press            #(js/alert "Button pressed")
-    :type                :add-account}])
-
 (def tokens
   [{:token               :snt
     :state               :default
@@ -73,3 +64,17 @@
    :account-name        "Account 1"
    :account             :default
    :customization-color :blue})
+
+(defn keypair-string
+  [full-name]
+  (let [first-name (utils/get-first-name full-name)]
+    (i18n/label :t/keypair-title {:name first-name})))
+
+(defn create-account-state
+  [name]
+  [{:title        (keypair-string name)
+    :button-props {:title (i18n/label :t/edit)}
+    :left-icon    :i/placeholder}
+   {:title        (i18n/label :t/derivation-path)
+    :button-props {:title (i18n/label :t/edit)}
+    :left-icon    :i/derivated-path}])

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

@@ -0,0 +1,6 @@
+(ns status-im2.contexts.wallet.common.utils
+  (:require [clojure.string :as string]))
+
+(defn get-first-name
+  [full-name]
+  (first (string/split full-name #" ")))

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

@@ -0,0 +1,47 @@
+(ns status-im2.contexts.wallet.create-account.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(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     80})
+
+(def title-input-container
+  {:padding-horizontal 20
+   :padding-top        12
+   :padding-bottom     16})
+
+(def color-picker-container
+  {:padding-vertical   12
+   :padding-horizontal 20})
+
+(defn color-label
+  [theme]
+  {:color          (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+   :padding-bottom 4})
+
+(defn divider-line
+  [theme]
+  {:border-color        (colors/theme-colors colors/neutral-10 colors/neutral-90 theme)
+   :padding-top         12
+   :padding-bottom      8
+   :border-bottom-width 1})
+
+(defn slide-button-container
+  [bottom]
+  {:position :absolute
+   :bottom   (+ bottom 12)
+   :left     20
+   :right    20})

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

@@ -1,16 +1,81 @@
 (ns status-im2.contexts.wallet.create-account.view
-  (:require [react-native.core :as rn]
+  (:require
+    [quo2.theme :as quo.theme]
+    [react-native.core :as rn]
     [quo2.core :as quo]
-            [re-frame.core :as rf]))
+    [react-native.safe-area :as safe-area]
+    [reagent.core :as reagent]
+    [status-im2.contexts.wallet.common.temp :as temp]
+    [utils.i18n :as i18n]
+    [status-im2.contexts.wallet.create-account.style :as style]
+    [utils.re-frame :as rf]))
 
-(defn view
+(def diamond-emoji "\uD83D\uDC8E")
+
+(defn- view-internal
   []
+  (let [top                  (safe-area/get-top)
+        bottom               (safe-area/get-bottom)
+        account-color        (reagent/atom :blue)
+        emoji                (reagent/atom diamond-emoji)
+        {:keys [public-key]} (rf/sub [:profile/profile])
+        display-name         (first (rf/sub [:contacts/contact-two-names-by-identity public-key]))]
+    (fn [{:keys [theme]}]
       [rn/view
        {:style {:flex       1
-            :align-items     :center
+                :margin-top top}}
-            :justify-content :center}}
+       [quo/page-nav
+        {:type       :no-title
+         :background :blur
+         :right-side [{:icon-name :i/info}]
+         :icon-name  :i/close
+         :on-press   #(rf/dispatch [:navigate-back])}]
+       [quo/gradient-cover
+        {:customization-color @account-color
+         :container-style     (style/gradient-cover-container top)}]
+       [rn/view
+        {:style style/account-avatar-container}
+        [quo/account-avatar
+         {:customization-color @account-color
+          :size                80
+          :emoji               @emoji
+          :type                :default}]
+        [quo/button
+         {:size            32
+          :type            :grey
+          :background      :photo
+          :icon-only?      true
+          :on-press        #(js/alert "pressed")
+          :container-style style/reaction-button-container} :i/reaction]]
+       [quo/title-input
+        {:color           :red
+         :placeholder     "Type something here"
+         :max-length      24
+         :blur?           true
+         :disabled?       false
+         :default-value   "Account 2"
+         :container-style style/title-input-container}]
+       [rn/view
+        {:style style/color-picker-container}
+        [quo/text
+         {:size   :paragraph-2
+          :weight :medium
+          :style  (style/color-label theme)}
+         (i18n/label :t/colour)]
+        [quo/color-picker
+         {:selected  @account-color
+          :on-change #(reset! account-color %)}]]
+       [rn/view {:style (style/divider-line theme)}]
+       [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-icon          :face-id
+         :customization-color @account-color
+         :on-complete         (fn []
+                                (js/alert "Functionality not implemented"))
+         :container-style     (style/slide-button-container bottom)}]])))
 
-   [quo/text {} "CREATE ACCOUNT"]
+(def view (quo.theme/with-theme view-internal))
-   [quo/divider-label]
-   [quo/button {:on-press #(rf/dispatch [:navigate-back])}
-    "NAVIGATE BACK"]])

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

@@ -10,6 +10,33 @@
     [utils.re-frame :as rf]
     [status-im2.contexts.wallet.common.temp :as temp]))
 
+(defn new-account
+  []
+  [quo/action-drawer
+   [[{:icon                :i/add
+      :accessibility-label :start-a-new-chat
+      :label               (i18n/label :t/add-account)
+      :sub-label           (i18n/label :t/add-account-description)
+      :on-press            #(rf/dispatch [:navigate-to :wallet-create-account])}
+     {:icon                :i/reveal
+      :accessibility-label :add-a-contact
+      :label               (i18n/label :t/add-address)
+      :sub-label           (i18n/label :t/add-address-description)
+      :add-divider?        true}]]])
+
+(def account-cards
+  [{:name                "Account 1"
+    :balance             "€0.00"
+    :percentage-value    "€0.00"
+    :customization-color :blue
+    :type                :empty
+    :emoji               "🍑"
+    :on-press            #(rf/dispatch [:navigate-to :wallet-accounts])}
+   {:customization-color :blue
+    :on-press            #(rf/dispatch
+                           [:show-bottom-sheet {:content new-account}])
+    :type                :add-account}])
+
 (def tabs-data
   [{:id :assets :label (i18n/label :t/assets) :accessibility-label :assets-tab}
    {:id :collectibles :label (i18n/label :t/collectibles) :accessibility-label :collectibles-tab}
@@ -30,7 +57,7 @@
         [quo/wallet-graph {:time-frame :empty}]]
        [rn/flat-list
         {:style      style/accounts-list
-         :data       temp/account-cards
+         :data       account-cards
          :horizontal true
          :separator  [rn/view {:style {:width 12}}]
          :render-fn  quo/account-card}]

translations/en.json

@@ -25,8 +25,6 @@
     "add": "Add",
     "added": "added",
     "add-a-watch-account": "Add a watch-only address",
-    "add-account": "Add an account",
-    "add-account-description": "You can import any type of Ethereum account to add it to your Status wallet",
     "add-account-incorrect-password": "Password seems to be incorrect. Enter the password you use to unlock the app.",
     "add-an-account": "Add an account",
     "add-bootnode": "Add bootnode",
@@ -2289,5 +2287,12 @@
     "about": "About",
     "no-permissions": "No permissions",
     "no-dapps": "No connected dApps",
-    "days": "Days"
+    "days": "Days",
+    "add-account": "Add account",
+    "add-account-description": "Create new or import existing account",
+    "add-address": "Add address to watch",
+    "add-address-description": "Watch a public address or ENS name",
+    "colour": "Colour",
+    "origin": "Origin",
+    "slide-create": "Slide to create account"
 }