status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/quo/components/drawers/bottom_actions/view.cljs
View File

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

38
src/quo/components/text_combinations/view.cljs
View File

@ -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}
(when avatar
[rn/view {:style style/avatar-container}
[icon avatar 32]])
[text/text
{:accessibility-label title-accessibility-label
:weight :semi-bold
:ellipsize-mode :tail
:number-of-lines 1
:size :heading-1}
title]]
[rn/view
{:style {:flex-direction :row
:justify-content :space-between}}
[rn/view {:style style/title-container}
(when avatar
[rn/view {:style style/avatar-container}
[icon avatar 32]])
[text/text
{:accessibility-label title-accessibility-label
:weight :semi-bold
:ellipsize-mode :tail
: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

6
src/quo/components/wallet/keypair/style.cljs
View File

@ -4,8 +4,7 @@
(defn container
[{:keys [blur? customization-color theme selected?]}]
{:flex 1
:border-radius 20
{:border-radius 16
: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
:flex 1})
:justify-content :space-between})

11
src/quo/components/wallet/keypair/view.cljs
View File

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

12
src/status_im2/contexts/quo_preview/wallet/keypair.cljs
View File

@ -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
(merge
@state
{:details (if (= (:type @state) :default-keypair) default-details other-details)
:accounts (get-accounts (:blur? @state))})]])))
[rn/view {:style {:flex 1}}
[quo/keypair
(merge
@state
{:details (if (= (:type @state) :default-keypair) default-details other-details)
:accounts (get-accounts (:blur? @state))})]]])))

1
src/status_im2/contexts/wallet/common/utils.cljs
View File

@ -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 "/" " / "))

12
src/status_im2/contexts/wallet/create_account/select_keypair/style.cljs Normal file
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})

62
src/status_im2/contexts/wallet/create_account/select_keypair/view.cljs Normal file
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}]]))

22
src/status_im2/contexts/wallet/create_account/view.cljs
View File

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

5
src/status_im2/navigation/screens.cljs
View File

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

2
src/utils/address.cljs
View File

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

2
src/utils/address_test.cljs
View File

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

9
translations/en.json
View File

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