Wallet: Keypair Screen (#17775)

* wallet: keypair screen

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

@@ -24,9 +24,9 @@
   :scroll? - bool (default false) - Whether the iOS Home Indicator should be rendered"
   [props]
   (let [{:keys [actions description button-one-label button-two-label
-                button-one-props button-two-props theme scroll? customization-color]}
+                button-one-props button-two-props theme scroll? customization-color container-style]}
         (merge default-props props)]
-    [:<>
+    [rn/view {:style container-style}
      [rn/view {:style style/buttons-container}
       (when (= actions :2-actions)
         [button/button

src/quo/components/text_combinations/view.cljs

@@ -1,5 +1,6 @@
 (ns quo.components.text-combinations.view
   (:require
+    [quo.components.buttons.button.view :as button]
     [quo.components.markdown.text :as text]
     [quo.components.text-combinations.style :as style]
     [quo.theme :as theme]
@@ -23,20 +24,31 @@
            avatar
            title-accessibility-label
            description
-           description-accessibility-label]}]
+           description-accessibility-label
+           button-icon
+           button-on-press
+           customization-color]}]
   [rn/view {:style container-style}
-   [rn/view {:style style/title-container}
+   [rn/view
-    (when avatar
+    {:style {:flex-direction  :row
-      [rn/view {:style style/avatar-container}
+             :justify-content :space-between}}
-       [icon avatar 32]])
+    [rn/view {:style style/title-container}
-
+     (when avatar
-    [text/text
+       [rn/view {:style style/avatar-container}
-     {:accessibility-label title-accessibility-label
+        [icon avatar 32]])
-      :weight              :semi-bold
+     [text/text
-      :ellipsize-mode      :tail
+      {:accessibility-label title-accessibility-label
-      :number-of-lines     1
+       :weight              :semi-bold
-      :size                :heading-1}
+       :ellipsize-mode      :tail
-     title]]
+       :number-of-lines     1
+       :size                :heading-1}
+      title]]
+    (when button-icon
+      [button/button
+       {:icon-only?          true
+        :on-press            button-on-press
+        :customization-color customization-color
+        :size                32} button-icon])]
    (when description
      [text/text
       {:accessibility-label description-accessibility-label

src/quo/components/wallet/keypair/style.cljs

@@ -4,8 +4,7 @@
 
 (defn container
   [{:keys [blur? customization-color theme selected?]}]
-  {:flex           1
+  {:border-radius  16
-   :border-radius  20
    :border-width   1
    :border-color   (if selected?
                      (if blur?
@@ -28,5 +27,4 @@
 (def title-container
   {:flex-direction  :row
    :align-items     :center
-   :justify-content :space-between
+   :justify-content :space-between})
-   :flex            1})

src/quo/components/wallet/keypair/view.cljs

@@ -27,13 +27,16 @@
 (defn avatar
   [{{:keys [full-name]} :details
     avatar-type         :type
-    customization-color :customization-color}]
+    customization-color :customization-color
+    profile-picture     :profile-picture}]
   (if (= avatar-type :default-keypair)
     [user-avatar/user-avatar
      {:full-name           full-name
       :ring?               true
       :size                :small
-      :customization-color customization-color}]
+      :status-indicator?   false
+      :customization-color customization-color
+      :profile-picture     profile-picture}]
     [icon-avatar/icon-avatar
      {:size    :size-32
       :icon    :i/placeholder
@@ -84,9 +87,9 @@
 (defn- view-internal
   []
   (let [selected? (reagent/atom true)]
-    (fn [{:keys [accounts action] :as props}]
+    (fn [{:keys [accounts action container-style] :as props}]
       [rn/pressable
-       {:style    (style/container (merge props {:selected? @selected?}))
+       {:style    (merge (style/container (merge props {:selected? @selected?})) container-style)
         :on-press #(when (= action :selector) (reset! selected? (not @selected?)))}
        [rn/view {:style style/header-container}
         [avatar props]

src/status_im2/contexts/quo_preview/wallet/keypair.cljs

@@ -1,6 +1,7 @@
 (ns status-im2.contexts.quo-preview.wallet.keypair
   (:require
     [quo.core :as quo]
+    [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im2.contexts.quo-preview.preview :as preview]))
 
@@ -101,8 +102,9 @@
         :component-container-style {:padding-vertical 30
                                     :flex-direction   :row
                                     :justify-content  :center}}
-       [quo/keypair
+       [rn/view {:style {:flex 1}}
-        (merge
+        [quo/keypair
-         @state
+         (merge
-         {:details  (if (= (:type @state) :default-keypair) default-details other-details)
+          @state
-          :accounts (get-accounts (:blur? @state))})]])))
+          {:details  (if (= (:type @state) :default-keypair) default-details other-details)
+           :accounts (get-accounts (:blur? @state))})]]])))

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

@@ -24,7 +24,6 @@
 (defn get-derivation-path
   [number-of-accounts]
   (str constants/path-wallet-root "/" number-of-accounts))
-
 (defn format-derivation-path
   [path]
   (string/replace path "/" " / "))

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

@@ -0,0 +1,12 @@
+(ns status-im2.contexts.wallet.create-account.select-keypair.style)
+
+(def header-container
+  {:margin-horizontal 20
+   :margin-top        12
+   :margin-bottom     20})
+
+(def bottom-action-container
+  {:position :absolute
+   :bottom   0
+   :left     0
+   :right    0})

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

@@ -0,0 +1,62 @@
+(ns status-im2.contexts.wallet.create-account.select-keypair.view
+  (:require
+    [quo.core :as quo]
+    [react-native.core :as rn]
+    [status-im2.contexts.profile.utils :as profile.utils]
+    [status-im2.contexts.wallet.create-account.select-keypair.style :as style]
+    [utils.address :as utils]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
+
+(def accounts
+  [{:account-props {:customization-color :turquoise
+                    :size                32
+                    :emoji               "\uD83C\uDFB2"
+                    :type                :default
+                    :name                "Trip to Vegas"
+                    :address             "0x0ah...71a"}
+    :networks      [{:network-name :ethereum :short-name "eth"}
+                    {:network-name :optimism :short-name "opt"}]
+    :state         :default
+    :action        :none}])
+
+(defn view
+  []
+  (let [{:keys [public-key compressed-key
+                customization-color]} (rf/sub [:profile/profile])
+        display-name                  (first (rf/sub [:contacts/contact-two-names-by-identity
+                                                      public-key]))
+        profile-with-image            (rf/sub [:profile/profile-with-image])
+        profile-picture               (profile.utils/photo profile-with-image)]
+    [rn/view {:style {:flex 1}}
+     [quo/page-nav
+      {:icon-name           :i/close
+       :on-press            #(rf/dispatch [:navigate-back])
+       :accessibility-label :top-bar}]
+     [quo/text-combinations
+      {:container-style     style/header-container
+       :title               (i18n/label :t/keypairs)
+       :description         (i18n/label :t/keypairs-description)
+       :button-icon         :i/add
+       :button-on-press     #(js/alert "not implemented")
+       :customization-color customization-color}]
+     [quo/keypair
+      (merge
+       {:customization-color customization-color
+        :profile-picture     profile-picture
+        :status-indicator    false
+        :type                :default-keypair
+        :stored              :on-device
+        :on-options-press    #(js/alert "Options pressed")
+        :action              :selector
+        :blur?               false
+        :details             {:full-name display-name
+                              :address   (utils/get-shortened-compressed-key compressed-key)}
+        :accounts            accounts
+        :container-style     {:margin-horizontal 20
+                              :margin-vertical   8}})]
+     [quo/bottom-actions
+      {:button-one-label (i18n/label :t/confirm-account-origin)
+       :button-one-props {:disabled?           true
+                          :customization-color customization-color}
+       :container-style  style/bottom-action-container}]]))

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

@@ -1,5 +1,6 @@
 (ns status-im2.contexts.wallet.create-account.view
   (:require
+    [clojure.string :as string]
     [quo.core :as quo]
     [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
@@ -13,7 +14,8 @@
     [status-im2.contexts.wallet.create-account.style :as style]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]
-    [utils.responsiveness :refer [iphone-11-Pro-20-pixel-from-width]]))
+    [utils.responsiveness :refer [iphone-11-Pro-20-pixel-from-width]]
+    [utils.string]))
 
 (defn keypair-string
   [full-name]
@@ -21,24 +23,28 @@
     (i18n/label :t/keypair-title {:name first-name})))
 
 (defn get-keypair-data
-  [name derivation-path]
+  [name derivation-path account-color]
   [{:title             (keypair-string name)
-    :left-icon         :i/placeholder
+    :image             :avatar
+    :image-props       {:full-name           (utils.string/get-initials name 1)
+                        :size                :xxs
+                        :customization-color account-color}
     :action            :button
-    :action-props      {:on-press    #(js/alert "Button pressed!")
+    :action-props      {:on-press    #(rf/dispatch [:navigate-to :wallet-select-keypair])
                         :button-text (i18n/label :t/edit)
                         :alignment   :flex-start}
     :description       :text
     :description-props {:text (i18n/label :t/on-device)}}
    {:title             (i18n/label :t/derivation-path)
+    :image             :icon
+    :image-props       :i/derivated-path
     :action            :button
-    :action-props      {:on-press    #(rf/dispatch [:navigate-to :wallet-edit-derivation-path])
+    :action-props      {:on-press    #(js/alert "Button pressed!")
                         :button-text (i18n/label :t/edit)
                         :icon-left   :i/placeholder
                         :alignment   :flex-start}
-    :left-icon         :i/derivated-path
     :description       :text
-    :description-props {:text derivation-path}}])
+    :description-props {:text (string/replace derivation-path #"/" " / ")}}])
 
 (defn- view-internal
   []
@@ -107,7 +113,7 @@
        [quo/category
         {:list-type :settings
          :label     (i18n/label :t/origin)
-         :data      (get-keypair-data primary-name @derivation-path)}]
+         :data      (get-keypair-data primary-name @derivation-path @account-color)}]
        [standard-auth/view
         {:size                :size-48
          :track-text          (i18n/label :t/slide-to-create-account)

src/status_im2/navigation/screens.cljs

@@ -43,6 +43,7 @@
     [status-im2.contexts.wallet.add-address-to-watch.view :as add-address-to-watch]
     [status-im2.contexts.wallet.collectible.view :as wallet-collectible]
     [status-im2.contexts.wallet.create-account.edit-derivation-path.view :as wallet-edit-derivation-path]
+    [status-im2.contexts.wallet.create-account.select-keypair.view :as wallet-select-keypair]
     [status-im2.contexts.wallet.create-account.view :as wallet-create-account]
     [status-im2.contexts.wallet.edit-account.view :as wallet-edit-account]
     [status-im2.contexts.wallet.saved-address.view :as wallet-saved-address]
@@ -270,6 +271,10 @@
     {:name      :wallet-collectible
      :component wallet-collectible/view}
 
+    {:name      :wallet-select-keypair
+     :options   {:insets {:top? true}}
+     :component wallet-select-keypair/view}
+
     {:name      :wallet-create-account
      :options   {:insets {:top? true}}
      :component wallet-create-account/view}

src/utils/address.cljs

@@ -68,7 +68,7 @@
     (let [first-part-of-public-key (subs public-key 0 3)
           ellipsis                 "..."
           public-key-size          (count public-key)
-          last-part-of-public-key  (subs public-key (- public-key-size 6) public-key-size)
+          last-part-of-public-key  (subs public-key (- public-key-size 5) public-key-size)
           abbreviated-public-key   (str first-part-of-public-key ellipsis last-part-of-public-key)]
       abbreviated-public-key)
     nil))

src/utils/address_test.cljs

@@ -5,7 +5,7 @@
 
 (deftest get-shortened-compressed-key
   (testing "Ensure the function correctly abbreviates a valid public key"
-    (is (= "zQ3...1sgt5N"
+    (is (= "zQ3...sgt5N"
            (utils.address/get-shortened-compressed-key
             "zQ3ssgRy5TtB47MMiMKMKaGyaawkCgMqqbrnAUYrZJ1sgt5N"))))
 

translations/en.json

@@ -2374,12 +2374,15 @@
     "reset": "Reset",
     "reveal-address": "Reveal address",
     "derive-addresses": "Derive addresses",
-    "address-activity": "This address has activity",
     "sign transactions": "sign transactions",
-    "search-assets": "Search assets",
     "account-created": "{{name}} created",
     "update-account-name": "Update account name",
     "edit-wallet-account-emoji-updated-message": "Account emoji has been updated",
     "edit-wallet-account-name-updated-message": "Account name has been updated",
-    "edit-wallet-account-colour-updated-message": "Account colour has been updated"
+    "edit-wallet-account-colour-updated-message": "Account colour has been updated",
+    "search-assets": "Search assets",
+    "address-activity": "This address has activity",
+    "keypairs": "Keypairs",
+    "keypairs-description": "Select keypair to derive your new account from",
+    "confirm-account-origin": "Confirm account origin"
 }