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

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,83 @@
+(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])
+ [keypair-name set-keypair-name] (rn/use-state "")
+ [error set-error] (rn/use-state)
+ on-change-text (rn/use-callback
+ (fn [value]
+ (set-keypair-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? keypair-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 prn}]
+ :footer [quo/button
+ {:customization-color customization-color
+ :disabled? disabled?
+ :on-press prn}
+ (i18n/label :t/continue)]}
+ [quo/page-top
+ {:title "Key pair name"
+ :description :text
+ :description-text "Name key pair for your own personal reference"
+ :container-style style/top}]
+ [quo/input
+ {:label "Key pair name"
+ :placeholder "Collectibles account, Old vault...."
+ :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)])]]))
+
+
+(comment
+ (utils.re-frame/dispatch [:navigate-to :screen/wallet.add-key-pair-name])
+)

src/status_im/navigation/screens.cljs

@@ -67,6 +67,8 @@
  [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.add-key-pair-name.view :as
+ wallet-add-key-pair-name]
  [status-im.contexts.wallet.add-account.create-account.new-keypair.backup-recovery-phrase.view :as
  wallet-backup-recovery-phrase]
  [status-im.contexts.wallet.add-account.create-account.new-keypair.check-your-backup.view :as
@@ -390,6 +392,10 @@
  {:name :screen/wallet.edit-derivation-path
  :component wallet-edit-derivation-path/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}
 

translations/en.json

@@ -2572,6 +2572,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",