[#18817] Import private key: UI for key pair name

Move files

Fix label

Enable feature and fix auto-focus

Add events and subs

src/status_im/contexts/wallet/add_account/create_account/events.cljs

@@ -90,3 +90,25 @@
                        (cske/transform-keys transforms/->kebab-case-keyword derived-address)))}))
 
 (rf/reg-event-fx :wallet/get-derived-addresses-success get-derived-addresses-success)
+
+;; Import private key
+
+(rf/reg-event-fx
+ :wallet.import-private-key/set-private-key
+ (fn [{:keys [db]} [value]]
+   {:db (assoc-in db [:wallet :ui :import-private-key :private-key] value)}))
+
+(rf/reg-event-fx
+ :wallet.import-private-key/set-public-address
+ (fn [{:keys [db]} [value]]
+   {:db (assoc-in db [:wallet :ui :import-private-key :public-address] value)}))
+
+(rf/reg-event-fx
+ :wallet.import-private-key/set-key-pair-name
+ (fn [{:keys [db]} [value]]
+   {:db (assoc-in db [:wallet :ui :import-private-key :key-pair-name] value)}))
+
+(rf/reg-event-fx
+ :wallet.import-private-key/clear-data
+ (fn [{:keys [db]} _]
+   {:db (update-in db [:wallet :ui] dissoc :import-private-key)}))

src/status_im/contexts/wallet/add_account/create_account/import_private_key/add_key_pair_name/style.cljs

@@ -0,0 +1,12 @@
+(ns status-im.contexts.wallet.add-account.create-account.import-private-key.add-key-pair-name.style)
+
+(def top
+  {:margin-top 2})
+
+(def input
+  {:padding-top        12
+   :padding-horizontal 20})
+
+(def error
+  {:padding-horizontal 20
+   :padding-vertical   8})

src/status_im/contexts/wallet/add_account/create_account/import_private_key/add_key_pair_name/view.cljs

@@ -0,0 +1,77 @@
+(ns status-im.contexts.wallet.add-account.create-account.import-private-key.add-key-pair-name.view
+  (:require
+    [quo.core :as quo]
+    [react-native.core :as rn]
+    [status-im.common.floating-button-page.view :as floating-button-page]
+    [status-im.common.validation.general :as validators]
+    [status-im.contexts.wallet.add-account.create-account.import-private-key.add-key-pair-name.style :as
+     style]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
+
+(def keypair-name-max-length 15)
+(def keypair-name-min-length 5)
+
+(def error-messages
+  {:too-long     (i18n/label :t/key-name-error-length)
+   :too-short    (i18n/label :t/key-name-error-too-short {:count keypair-name-min-length})
+   :emoji        (i18n/label :t/key-name-error-emoji)
+   :special-char (i18n/label :t/key-name-error-special-char)})
+
+(defn view
+  []
+  (let [customization-color (rf/sub [:profile/customization-color])
+        key-pair-name       (rf/sub [:wallet.import-private-key/key-pair-name])
+        [error set-error]   (rn/use-state)
+        on-change-text      (rn/use-callback
+                             (fn [value]
+                               (rf/dispatch [:wallet.import-private-key/set-key-pair-name value])
+                               (cond
+                                 (validators/has-emojis? value)
+                                 (set-error :emoji)
+
+                                 (validators/has-special-characters? value)
+                                 (set-error :special-char)
+
+                                 (> (count value) keypair-name-max-length)
+                                 (set-error :too-long)
+
+                                 (and (seq value) (< (count value) keypair-name-min-length))
+                                 (set-error :too-short)
+
+                                 :else (set-error nil))))
+
+        disabled?           (or (some? error) (empty? key-pair-name))]
+    [rn/view {:flex 1}
+     [floating-button-page/view
+      {:customization-color customization-color
+       :header              [quo/page-nav
+                             {:background :white
+                              :type       :no-title
+                              :icon-name  :i/arrow-left
+                              :on-press   #(rf/dispatch [:navigate-back])}]
+       :footer              [quo/button
+                             {:customization-color customization-color
+                              :disabled?           disabled?
+                              :on-press            prn}
+                             (i18n/label :t/continue)]}
+      [quo/page-top
+       {:title            (i18n/label :t/key-pair-name)
+        :description      :text
+        :description-text (i18n/label :t/key-pair-name-desc)
+        :container-style  style/top}]
+      [quo/input
+       {:label           (i18n/label :t/key-pair-name)
+        :placeholder     (i18n/label :t/key-pair-name-placeholder)
+        :char-limit      keypair-name-max-length
+        :auto-focus      true
+        :container-style style/input
+        :on-change-text  on-change-text
+        :error?          error}]
+      (when error
+        [quo/info-message
+         {:type            :error
+          :size            :default
+          :icon            :i/info
+          :container-style style/error}
+         (get error-messages error)])]]))

src/status_im/contexts/wallet/add_account/create_account/import_private_key/style.cljs → src/status_im/contexts/wallet/add_account/create_account/import_private_key/private_key/style.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.wallet.add-account.create-account.import-private-key.style
+(ns status-im.contexts.wallet.add-account.create-account.import-private-key.private-key.style
   (:require [quo.foundations.colors :as colors]))
 
 (def input

src/status_im/contexts/wallet/add_account/create_account/import_private_key/view.cljs → src/status_im/contexts/wallet/add_account/create_account/import_private_key/private_key/view.cljs

@@ -1,56 +1,60 @@
-(ns status-im.contexts.wallet.add-account.create-account.import-private-key.view
+(ns status-im.contexts.wallet.add-account.create-account.import-private-key.private-key.view
   (:require
     [quo.core :as quo]
     [quo.theme :as theme]
     [react-native.clipboard :as clipboard]
     [react-native.core :as rn]
     [status-im.common.floating-button-page.view :as floating-button-page]
-    [status-im.contexts.wallet.add-account.create-account.import-private-key.style :as style]
+    [status-im.contexts.wallet.add-account.create-account.import-private-key.private-key.style :as style]
     [status-im.contexts.wallet.common.validation :as v]
     [utils.debounce :as debounce]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
 (defn- address-input
-  [{:keys [input-value set-input-value set-flow-state error?]}]
-  (let [check-address (rn/use-callback
-                       (debounce/debounce (fn [v]
-                                            (if (empty? v)
-                                              (set-flow-state nil)
-                                              ;; TODO check for validation
-                                              (if-not (v/private-key? v)
-                                                (set-flow-state :invalid-private-key)
-                                                ;; TODO add real requests
-                                                (do
-                                                  (set-flow-state :scanning)
-                                                  (js/setTimeout
-                                                   set-flow-state
-                                                   400
-                                                   (rand-nth [:active-address :inactive-address]))))))
-                                          500))
-        on-change     (rn/use-callback
-                       (fn [v]
-                         (set-input-value v)
-                         (check-address v)))
-        on-paste      (rn/use-callback
-                       (fn []
-                         (clipboard/get-string
-                          (fn [clipboard]
-                            (when-not (empty? clipboard)
-                              (on-change clipboard))))))]
+  [{:keys [input-value set-flow-state error?]}]
+  (let [check-address
+        (rn/use-callback
+         (debounce/debounce
+          (fn [v]
+            (if (empty? v)
+              (set-flow-state nil)
+              ;; TODO check for validation
+              (if-not (v/private-key? v)
+                (set-flow-state :invalid-private-key)
+                ;; TODO add real requests
+                (do
+                  (set-flow-state :scanning)
+                  ;; TODO get real address
+                  (rf/dispatch [:wallet.import-private-key/set-public-address
+                                "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"])
+                  (js/setTimeout set-flow-state 400 (rand-nth [:active-address :inactive-address]))))))
+          500))
+
+        on-change (rn/use-callback
+                   (fn [v]
+                     (rf/dispatch [:wallet.import-private-key/set-private-key v])
+                     (check-address v)))
+        on-paste (rn/use-callback
+                  (fn []
+                    (clipboard/get-string
+                     (fn [clipboard]
+                       (when-not (empty? clipboard)
+                         (on-change clipboard))))))]
     [quo/input
-     {:accessibility-label :add-address-to-watch
+     {:accessibility-label :import-private-key
       :placeholder         (i18n/label :t/enter-private-key-placeholder)
       :container-style     style/input
       :label               (i18n/label :t/private-key)
       :type                :password
       :error?              error?
       :return-key-type     :done
+      :auto-focus          true
       :on-change-text      on-change
       :button              (when (empty? input-value)
                              {:on-press on-paste
                               :text     (i18n/label :t/paste)})
-      :value               input-value}]))
+      :default-value       input-value}]))
 
 (defn- activity-indicator
   [state]
@@ -86,11 +90,13 @@
 
 (defn view
   []
-  (let [theme                         (theme/use-theme)
-        customization-color           (rf/sub [:profile/customization-color])
-        [input-value set-input-value] (rn/use-state "")
-        [flow-state set-flow-state]   (rn/use-state)
-        error?                        (= :invalid-private-key flow-state)]
+  (let [theme                       (theme/use-theme)
+        customization-color         (rf/sub [:profile/customization-color])
+        private-key                 (rf/sub [:wallet.import-private-key/private-key])
+        public-address              (rf/sub [:wallet.import-private-key/public-address])
+        [flow-state set-flow-state] (rn/use-state)
+        error?                      (= :invalid-private-key flow-state)]
+    (rn/use-mount #(rf/dispatch [:wallet.import-private-key/clear-data]))
     [rn/view {:flex 1}
      [floating-button-page/view
       {:customization-color customization-color
@@ -108,26 +114,26 @@
                                 (i18n/label :t/import-private-key-info)])
                              [quo/button
                               {:customization-color customization-color
-                               :disabled?           (or (empty? input-value) error?)
-                               :on-press            #()}
+                               :disabled?           (or (empty? private-key) error?)
+                               :on-press            #(rf/dispatch [:navigate-to
+                                                                   :screen/wallet.add-key-pair-name])}
                               (i18n/label :t/continue)]]}
       [quo/page-top
        {:container-style  style/page-top
         :title            (i18n/label :t/import-private-key)
         :description      :text
         :description-text (i18n/label :t/enter-private-key)}]
       [address-input
-       {:input-value     input-value
-        :set-input-value set-input-value
-        :set-flow-state  set-flow-state
-        :error?          error?}]
+       {:input-value    private-key
+        :set-flow-state set-flow-state
+        :error?         error?}]
       (when (#{:scanning :active-address :inactive-address} flow-state)
         [rn/view {:style style/key-section}
          [quo/section-label
           {:section         (i18n/label :t/private-key-public-address)
            :container-style style/section-label}]
-         ;; TODO Get real address
-         [rn/view {:style (style/public-address flow-state theme)}
-          [quo/text "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"]]])
-      (when (seq input-value)
+         (when (seq public-address)
+           [rn/view {:style (style/public-address flow-state theme)}
+            [quo/text public-address]])])
+      (when (seq private-key)
         [activity-indicator flow-state])]]))

src/status_im/contexts/wallet/add_account/create_account/select_keypair/view.cljs

@@ -26,7 +26,7 @@
      {:icon                :i/key
       :accessibility-label :import-private-key
       :label               (i18n/label :t/import-private-key)
-      :on-press            (when (ff/enabled? ::wallet.import-private-key)
+      :on-press            (when (or true (ff/enabled? ::wallet.import-private-key))
                              #(rf/dispatch [:navigate-to :screen/wallet.import-private-key]))}]]])
 
 (defn- parse-accounts

src/status_im/navigation/screens.cljs

@@ -73,7 +73,9 @@
     [status-im.contexts.wallet.add-account.add-address-to-watch.view :as wallet-add-address-to-watch]
     [status-im.contexts.wallet.add-account.create-account.edit-derivation-path.view :as
      wallet-edit-derivation-path]
-    [status-im.contexts.wallet.add-account.create-account.import-private-key.view :as
+    [status-im.contexts.wallet.add-account.create-account.import-private-key.add-key-pair-name.view :as
+     wallet-add-key-pair-name]
+    [status-im.contexts.wallet.add-account.create-account.import-private-key.private-key.view :as
      wallet-import-private-key]
     [status-im.contexts.wallet.add-account.create-account.new-keypair.backup-recovery-phrase.view :as
      wallet-backup-recovery-phrase]
@@ -406,6 +408,10 @@
      :options   {:insets {:top? true}}
      :component wallet-import-private-key/view}
 
+    {:name      :screen/wallet.add-key-pair-name
+     :options   {:insets {:top? true}}
+     :component wallet-add-key-pair-name/view}
+
     {:name      :screen/wallet.collectible
      :component wallet-collectible/view}
 

src/status_im/subs/wallet/add_account/import_private_key.cljs

@@ -0,0 +1,20 @@
+(ns status-im.subs.wallet.add-account.import-private-key
+  (:require [re-frame.core :as rf]))
+
+(rf/reg-sub
+ :wallet.import-private-key/private-key
+ :<- [:wallet/ui]
+ (fn [ui _]
+   (get-in ui [:import-private-key :private-key])))
+
+(rf/reg-sub
+ :wallet.import-private-key/public-address
+ :<- [:wallet/ui]
+ (fn [ui _]
+   (get-in ui [:import-private-key :public-address])))
+
+(rf/reg-sub
+ :wallet.import-private-key/key-pair-name
+ :<- [:wallet/ui]
+ (fn [ui _]
+   (get-in ui [:import-private-key :key-pair-name])))

src/status_im/subs/wallet/wallet.cljs

@@ -4,6 +4,7 @@
             [status-im.contexts.wallet.common.utils :as utils]
             [status-im.contexts.wallet.common.utils.networks :as network-utils]
             [status-im.subs.wallet.add-account.address-to-watch]
+            [status-im.subs.wallet.add-account.import-private-key]
             [utils.number]))
 
 (defn- filter-networks

translations/en.json

@@ -2576,6 +2576,7 @@
     "key-name-error-length": "Key name too long",
     "key-name-error-emoji": "Emojis are not allowed",
     "key-name-error-special-char": "Special characters are not allowed",
+    "key-name-error-too-short": "Key pair name must be at least {{count}} characters",
     "display": "Display",
     "testnet-mode-enabled": "Testnet mode enabled",
     "online-community-member": "Online",
@@ -2594,5 +2595,8 @@
     "this-account-has-no-activity": "This account has no activity",
     "this-address-has-activity": "This address has activity",
     "scanning-for-activity": "Scanning for activity...",
-    "send-community-link": "Send community link"
+    "send-community-link": "Send community link",
+    "key-pair-name": "Key pair name",
+    "key-pair-name-desc": "Name key pair for your own personal reference",
+    "key-pair-name-placeholder": "Collectibles account, Old vault...."
 }