Wallet: Keypair Screen (#17775)

* wallet: keypair screen
This commit is contained in:
Omar Basem 2023-11-13 14:43:43 +04:00 committed by GitHub
parent f3e47ac1a2
commit 87c9946092
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 144 additions and 42 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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})

View File

@ -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}]]))

View File

@ -1,5 +1,6 @@
(ns status-im2.contexts.wallet.create-account.view (ns status-im2.contexts.wallet.create-account.view
(:require (:require
[clojure.string :as string]
[quo.core :as quo] [quo.core :as quo]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
@ -13,7 +14,8 @@
[status-im2.contexts.wallet.create-account.style :as style] [status-im2.contexts.wallet.create-account.style :as style]
[utils.i18n :as i18n] [utils.i18n :as i18n]
[utils.re-frame :as rf] [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 (defn keypair-string
[full-name] [full-name]
@ -21,24 +23,28 @@
(i18n/label :t/keypair-title {:name first-name}))) (i18n/label :t/keypair-title {:name first-name})))
(defn get-keypair-data (defn get-keypair-data
[name derivation-path] [name derivation-path account-color]
[{:title (keypair-string name) [{: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 :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) :button-text (i18n/label :t/edit)
:alignment :flex-start} :alignment :flex-start}
:description :text :description :text
:description-props {:text (i18n/label :t/on-device)}} :description-props {:text (i18n/label :t/on-device)}}
{:title (i18n/label :t/derivation-path) {:title (i18n/label :t/derivation-path)
:image :icon
:image-props :i/derivated-path
:action :button :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) :button-text (i18n/label :t/edit)
:icon-left :i/placeholder :icon-left :i/placeholder
:alignment :flex-start} :alignment :flex-start}
:left-icon :i/derivated-path
:description :text :description :text
:description-props {:text derivation-path}}]) :description-props {:text (string/replace derivation-path #"/" " / ")}}])
(defn- view-internal (defn- view-internal
[] []
@ -107,7 +113,7 @@
[quo/category [quo/category
{:list-type :settings {:list-type :settings
:label (i18n/label :t/origin) :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 [standard-auth/view
{:size :size-48 {:size :size-48
:track-text (i18n/label :t/slide-to-create-account) :track-text (i18n/label :t/slide-to-create-account)

View File

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

View File

@ -68,7 +68,7 @@
(let [first-part-of-public-key (subs public-key 0 3) (let [first-part-of-public-key (subs public-key 0 3)
ellipsis "..." ellipsis "..."
public-key-size (count public-key) 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 (str first-part-of-public-key ellipsis last-part-of-public-key)]
abbreviated-public-key) abbreviated-public-key)
nil)) nil))

View File

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

View File

@ -2374,12 +2374,15 @@
"reset": "Reset", "reset": "Reset",
"reveal-address": "Reveal address", "reveal-address": "Reveal address",
"derive-addresses": "Derive addresses", "derive-addresses": "Derive addresses",
"address-activity": "This address has activity",
"sign transactions": "sign transactions", "sign transactions": "sign transactions",
"search-assets": "Search assets",
"account-created": "{{name}} created", "account-created": "{{name}} created",
"update-account-name": "Update account name", "update-account-name": "Update account name",
"edit-wallet-account-emoji-updated-message": "Account emoji has been updated", "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-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"
} }