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

Move files

Fix label

Enable feature and fix auto-focus

Add events and subs

Some fixes

Merge screens

Fixes

Minor fixes

Some tweaks

src/quo/components/text_combinations/standard_title/style.cljs

@@ -3,6 +3,7 @@
 
 (def container
  {:flex-direction :row
+ :flex 1
  :justify-content :space-between})
 
 (def right-counter

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

@@ -90,3 +90,18 @@
  (cske/transform-keys transforms/->kebab-case-keyword derived-address)))}))
 
 (rf/reg-event-fx :wallet/get-derived-addresses-success get-derived-addresses-success)
+
+(rf/reg-event-fx
+ :wallet/set-private-key
+ (fn [{:keys [db]} [value]]
+ {:db (assoc-in db [:wallet :ui :create-account :private-key] (security/mask-data value))}))
+
+(rf/reg-event-fx
+ :wallet/set-public-address
+ (fn [{:keys [db]} [value]]
+ {:db (assoc-in db [:wallet :ui :create-account :public-address] value)}))
+
+(rf/reg-event-fx
+ :wallet/clear-private-key-data
+ (fn [{:keys [db]} _]
+ {:db (update-in db [:wallet :ui :create-account] dissoc :private-key :public-address)}))

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

@@ -1,5 +1,6 @@
 (ns status-im.contexts.wallet.add-account.create-account.import-private-key.view
  (:require
+ [clojure.string :as string]
  [quo.core :as quo]
  [quo.theme :as theme]
  [react-native.clipboard :as clipboard]
@@ -12,45 +13,50 @@
  [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
+ ;; Should be fixed in #18819
+ (rf/dispatch [:wallet/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/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]
@@ -84,21 +90,37 @@
  :style style/indicator)
  (i18n/label message)])))
 
+(defn on-unmount
+ []
+ (rf/dispatch [:wallet/clear-private-key-data]))
+
+(defn navigate-back
+ []
+ (rf/dispatch [:navigate-back]))
+
+(defn navigate-to-keypair-import
+ []
+ (rf/dispatch [:navigate-to
+ :screen/wallet.keypair-name
+ {:workflow :import-private-key}]))
+
 (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])
+ public-address (rf/sub [:wallet/public-address])
+ [flow-state set-flow-state] (rn/use-state nil)
+ error? (= :invalid-private-key flow-state)]
+ (rn/use-unmount on-unmount)
  [rn/view {:flex 1}
  [floating-button-page/view
  {:customization-color customization-color
  :header [quo/page-nav
  {:background :white
  :type :no-title
  :icon-name :i/close
- :on-press #(rf/dispatch [:navigate-back])}]
+ :on-press navigate-back}]
  :footer [:<>
  (when-not (#{:active-address :inactive-address} flow-state)
  [quo/information-box
@@ -108,26 +130,25 @@
  (i18n/label :t/import-private-key-info)])
  [quo/button
  {:customization-color customization-color
- :disabled? (or (empty? input-value) error?)
- :on-press #()}
+ :disabled? (or (string/blank? private-key) error?)
+ :on-press navigate-to-keypair-import}
  (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/key_pair_name/style.cljs

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

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

@@ -0,0 +1,94 @@
+(ns status-im.contexts.wallet.add-account.create-account.key-pair-name.view
+ (:require
+ [clojure.string :as string]
+ [quo.core :as quo]
+ [react-native.core :as rn]
+ [status-im.common.floating-button-page.view :as floating-button-page]
+ [status-im.common.not-implemented :as not-implemented]
+ [status-im.common.validation.general :as validators]
+ [status-im.contexts.wallet.add-account.create-account.key-pair-name.style :as style]
+ [utils.i18n :as i18n]
+ [utils.re-frame :as rf]))
+
+(def ^:private key-pair-name-max-length 15)
+(def ^:private key-pair-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 key-pair-name-min-length})
+ :emoji (i18n/label :t/key-name-error-emoji)
+ :special-char (i18n/label :t/key-name-error-special-char)})
+
+(defn navigate-back
+ []
+ (rf/dispatch [:navigate-back]))
+
+(defn view
+ []
+ (let [{:keys [workflow]} (rf/sub [:get-screen-params])
+ customization-color (rf/sub [:profile/customization-color])
+ [key-pair-name set-key-pair-name] (rn/use-state "")
+ [error set-error] (rn/use-state nil)
+ on-change-text (rn/use-callback
+ (fn [value]
+ (set-key-pair-name value)
+ (cond
+ (> (count value) key-pair-name-max-length)
+ (set-error :too-long)
+
+ (< 0 (count value) key-pair-name-min-length)
+ (set-error :too-short)
+
+ (validators/has-emojis? value)
+ (set-error :emoji)
+
+ (validators/has-special-characters? value)
+ (set-error :special-char)
+
+ :else (set-error nil))))
+ on-continue (rn/use-callback
+ (fn [_]
+ (case workflow
+ ;; TODO issue #19759. Implement creation account from
+ ;; private key
+ :import-private-key
+ (not-implemented/alert)
+
+ :new-key-pair
+ (rf/dispatch [:wallet/new-keypair-continue
+ {:keypair-name key-pair-name}])
+ (js/alert "Unknown workflow")))
+ [workflow key-pair-name])
+ disabled? (or (some? error) (string/blank? key-pair-name))]
+ [rn/view {:style {:flex 1}}
+ [floating-button-page/view
+ {:customization-color customization-color
+ :header [quo/page-nav
+ {:icon-name :i/arrow-left
+ :on-press navigate-back
+ :accessibility-label :top-bar}]
+ :footer [quo/button
+ {:customization-color customization-color
+ :disabled? disabled?
+ :on-press on-continue}
+ (i18n/label :t/continue)]}
+ [quo/page-top
+ {:title (i18n/label :t/keypair-name)
+ :description-text (i18n/label :t/keypair-name-description)
+ :description :text
+ :container-style style/page-top}]
+ [quo/input
+ {:container-style style/input
+ :placeholder (i18n/label :t/keypair-name-input-placeholder)
+ :label (i18n/label :t/keypair-name)
+ :char-limit key-pair-name-max-length
+ :auto-focus true
+ :on-change-text on-change-text
+ :error error}]
+ (when error
+ [quo/info-message
+ {:type :error
+ :size :default
+ :icon :i/info
+ :container-style style/error-container}
+ (get error-messages error)])]]))

src/status_im/contexts/wallet/add_account/create_account/new_keypair/check_your_backup/view.cljs

@@ -81,7 +81,8 @@
  (reset! show-error? false)
  (when (= @quiz-index questions-count)
  (rf/dispatch [:navigate-to
- :screen/wallet.keypair-name])))
+ :screen/wallet.keypair-name
+ {:workflow :new-key-pair}])))
  (do
  (when (> @incorrect-count 0)
  (rf/dispatch [:show-bottom-sheet