Add a button to address watch screen;

Add account creation screen

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

@@ -3,10 +3,9 @@
     [quo.foundations.colors :as colors]))
 
 (def buttons-container
-  {:flex-direction     :row
-   :justify-content    :space-around
-   :padding-vertical   12
-   :padding-horizontal 20})
+  {:flex-direction   :row
+   :justify-content  :space-around
+   :padding-vertical 12})
 
 (def button-container
   {:flex 1})

src/quo/components/drawers/bottom_actions/view.cljs

@@ -7,43 +7,53 @@
     [react-native.core :as rn]))
 
 (def default-props
-  {:button-one-type :primary
-   :button-two-type :grey})
+  {:button-one-type     :primary
+   :button-two-type     :grey
+   :customization-color :blue})
 
 (defn- view-internal
   "Options:
 
-  :actions - keyword (default nil) - :1-action/:2-actions
-  :description - string (default nil) - Description to display below the title
-  :button-one-label - string (default nil) - Label for the first button
-  :button-two-label - string (default nil) - Label for the second button
-  :button-one-press - fn (default nil) - Function to call when the first button is pressed
-  :button-two-press - fn (default nil) - Function to call when the second button is pressed
-  :theme - :light/:dark
-  :scroll - bool (default false) - Whether the iOS Home Indicator should be rendered
-  :button-one-type - same as button/button :type
-  :button-two-type - same as button/button :type"
+       :actions - keyword (default nil) - :1-action/:2-actions
+       :description - string (default nil) - Description to display below the title
+       :button-one-disabled? - bool (default false) - Whether the first button is
+       disabled
+       :button-two-disabled? - bool (default false) - Whether the second button is
+       disabled
+       :button-one-label - string (default nil) - Label for the first button
+       :button-two-label - string (default nil) - Label for the second button
+       :button-one-press - fn (default nil) - Function to call when the first button is pressed
+       :button-two-press - fn (default nil) - Function to call when the second button is pressed
+       :theme - :light/:dark
+       :scroll? - bool (default false) - Whether the iOS Home Indicator should be
+       rendered
+       :customization-color - keyword (default nil) - Color for the first button
+       :button-one-type - same as button/button :type
+       :button-two-type - same as button/button :type"
   [props]
-  (let [{:keys [actions description button-one-label button-two-label
+  (let [{:keys [actions description button-one-disabled?
+                button-two-disabled? button-one-label button-two-label
                 button-one-press button-two-press theme
-                scroll? button-one-type button-two-type disabled?]}
+                scroll? customization-color button-one-type button-two-type]}
         (merge default-props props)]
     [:<>
      [rn/view {:style style/buttons-container}
       (when (= actions :2-actions)
         [button/button
          {:size            40
+          :disabled?       button-two-disabled?
           :background      (when scroll? :blur)
           :container-style style/button-container-2-actions
           :type            button-two-type
           :on-press        button-two-press} button-two-label])
       [button/button
        {:size                40
+        :disabled?           button-one-disabled?
         :container-style     style/button-container
         :type                button-one-type
-        :disabled?           disabled?
         :background          (when scroll? :blur)
         :on-press            button-one-press
+        :customization-color customization-color
         :accessibility-label :button-one} button-one-label]]
      (when description
        [text/text

src/status_im/ui/screens/screens.cljs

@@ -73,6 +73,7 @@
     [status-im.ui.screens.wallet.settings.views :as wallet-settings]
     [status-im.ui.screens.wallet.swap.views :as wallet.swap]
     [status-im.ui.screens.wallet.transactions.views :as wallet-transactions]
+    [status-im.ui.screens.wallet.address-add-edit.views :as address-add-edit]
     [status-im2.contexts.chat.group-details.view :as group-details]
     [utils.i18n :as i18n]))
 
@@ -219,6 +220,9 @@
     :options   {:insets {:top? true}}
     :component wallet.swap/asset-selector}
 
+   {:name      :address-to-watch-edit
+    :component address-add-edit/address-add-edit}
+
    ;;PROFILE
 
    {:name      :my-profile

src/status_im/ui/screens/wallet/address_add_edit/style.cljs

@@ -0,0 +1,17 @@
+(ns status-im.ui.screens.wallet.address-add-edit.style)
+
+(def container
+  {:flex 1})
+(def input
+  {:margin-right 12
+   :flex         1})
+(def data-item
+  {:margin-horizontal  20
+   :padding-vertical   8
+   :padding-horizontal 12})
+(defn button-container
+  [bottom]
+  {:position :absolute
+   :bottom   (+ bottom 12)
+   :left     20
+   :right    20})

src/status_im/ui/screens/wallet/address_add_edit/utils.cljs

@@ -0,0 +1,14 @@
+(ns status-im.ui.screens.wallet.address-add-edit.utils)
+
+(defn random-emoji
+  []
+  (let [positive-emojis ["😀" "😃" "😄" "😁" "😆" "😅" "🤣" "😂" "🙂" "🙃"
+                         "😉" "😊" "😇" "🥰" "😍" "🤩" "😘" "😗" "😚" "😙"
+                         "😋" "😛" "😜" "🤪" "😝" "🤑" "🤗" "🤭" "🤫" "🤔"
+                         "😐" "😑" "😶" "😏" "😌" "😔" "😪" "🤤" "😴"
+                         "🥶" "😵" "🤯" "🤠" "🥳" "😎" "🤓"
+                         "🧐" "😮" "😯" "😲" "😳" "🥺"
+                         "😓" "😩" "😫" "🥱" "😤" "😈" "👿"
+                         "👻" "👽" "👾" "🤖"
+                         "😺" "😸" "😹" "😻" "😼" "😽" "🙀" "😾"]]
+    (rand-nth positive-emojis)))

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

@@ -0,0 +1,59 @@
+(ns status-im.ui.screens.wallet.address-add-edit.views
+  (:require
+    [reagent.core :as reagent]
+    [react-native.safe-area :as safe-area]
+    [utils.i18n :as i18n]
+    [re-frame.core :as re-frame]
+    [react-native.core :as rn]
+    [quo.core :as quo]
+    [quo.theme :as quo.theme]
+    [status-im2.contexts.wallet.common.screen-base.create-or-edit-account.view :as
+     create-or-edit-account]
+    [utils.re-frame :as rf]
+    [status-im.ui.screens.wallet.address-add-edit.style :as style]
+    [status-im.ui.screens.wallet.address-add-edit.utils :as utils]))
+
+(defn- view-internal
+  []
+  (let [{:keys [accounts-count address]} (rf/sub [:get-screen-params])
+        account-name                     (reagent/atom (str "Account " accounts-count))
+        address-title                    (i18n/label :t/watch-address)
+        account-color                    (reagent/atom :purple)
+        account-emoji                    (reagent/atom (utils/random-emoji))
+        on-change-name                   #(reset! account-name %)
+        on-change-color                  #(reset! account-color %)
+        on-change-emoji                  #(reset! account-emoji %)
+        safe-bottom                      (safe-area/get-bottom)]
+    (fn []
+      [rn/view {:style style/container}
+       [create-or-edit-account/view
+        {:page-nav-right-side [{:icon-name :i/info
+                                :on-press
+                                #(js/alert
+                                  "Get info (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}
+        [quo/data-item
+         {:card?           true
+          :right-icon      :i/advanced
+          :icon-right?     true
+          :emoji           @account-emoji
+          :title           address-title
+          :subtitle        address
+          :status          :default
+          :size            :default
+          :container-style style/data-item
+          :on-press        #(js/alert "To be implemented")}]]
+       [rn/view {:style (style/button-container safe-bottom)}
+        [quo/bottom-actions
+         {:button-one-label     (i18n/label :t/create-account)
+          :button-one-disabled? (clojure.string/blank? @account-name)
+          :button-one-press     #(re-frame/dispatch [:navigate-to :wallet-account])
+          :customization-color  @account-color}]]])))
+
+(def address-add-edit (quo.theme/with-theme view-internal))

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

@@ -1,6 +1,7 @@
 (ns status-im2.contexts.wallet.address-watch.view
   (:require
     [clojure.string :as string]
+    [re-frame.core :as re-frame]
     [quo.core :as quo]
     [quo.theme :as quo.theme]
     [react-native.clipboard :as clipboard]
@@ -13,9 +14,10 @@
 
 (defn view-internal
   []
-  (let [top         (safe-area/get-top)
-        bottom      (safe-area/get-bottom)
-        input-value (reagent/atom "")]
+  (let [top                      (safe-area/get-top)
+        bottom                   (safe-area/get-bottom)
+        input-value              (reagent/atom "")
+        {:keys [accounts-count]} (rf/sub [:get-screen-params])]
     (fn []
       [rn/view
        {:style {:flex       1
@@ -37,12 +39,18 @@
           :container-style {:margin-right 12
                             :flex         1}
           :weight          :monospace
-          :on-change       #(reset! input-value %)
+          :on-change       #(reset! input-value (.. % -nativeEvent -text))
           :default-value   @input-value}]
         [quo/button
          {:icon-only? true
           :type       :outline} :i/scan]]
        [rn/view {:style (style/button-container bottom)}
-        [quo/text "[WIP] Bottom Actions"]]])))
+        [quo/bottom-actions
+         {:button-one-label     (i18n/label :t/continue)
+          :button-one-disabled? (clojure.string/blank? @input-value)
+          :button-one-press     #(re-frame/dispatch [:navigate-to
+                                                     :address-to-watch-edit
+                                                     {:accounts-count accounts-count
+                                                      :address        @input-value}])}]]])))
 
 (def view (quo.theme/with-theme view-internal))

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

@@ -14,7 +14,8 @@
    :z-index  -1})
 
 (def account-avatar-container
-  {:padding-horizontal 20
+  {:flex               1
+   :padding-horizontal 20
    :padding-top        12})
 
 (def reaction-button-container

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

@@ -13,6 +13,8 @@
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
+(declare account-cards)
+
 (defn new-account
   []
   [quo/action-drawer
@@ -25,7 +27,9 @@
       :accessibility-label :add-a-contact
       :label               (i18n/label :t/add-address)
       :sub-label           (i18n/label :t/add-address-description)
-      :on-press            #(rf/dispatch [:navigate-to :wallet-address-watch])
+      :on-press            #(rf/dispatch [:navigate-to :wallet-address-watch
+                                          {:accounts-count (count
+                                                            account-cards)}])
       :add-divider?        true}]]])
 
 (def account-cards

translations/en.json

@@ -292,6 +292,7 @@
     "create-profile": "Create profile",
     "create-profile-password-info-box-title": "About your profile password",
     "create-profile-password-info-box-description": "Your Status keys are the foundation of your self-sovereign identity in Web3. You have complete control over these keys, which you can use to sign transactions, access your data, and interact with Web3 services.\n\nYour keys are always securely stored on your device and protected by your Status profile password. Status doesn't know your password and can't reset it for you. If you forget your password, you may lose access to your Status profile and wallet funds.\n\nRemember your Status password and don't share it with anyone.",
+    "create-account": "Create account",
     "create-a-pin": "Create a 6-digit passcode",
     "create-a-puk": "Create a 12-digit PUK",
     "create-group-chat": "Create group chat",
@@ -1561,6 +1562,7 @@
     "delete-account": "Delete account",
     "delete-keys-keycard": "Delete keys from Keycard",
     "watch-only": "Watch-only",
+    "watch-address": "Watch address",
     "cant-report-bug": "Can't report a bug",
     "mail-should-be-configured": "Mail client should be configured",
     "check-on-block-explorer": "Check on block explorer",