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

Implement "Account origin" Component (#17147) 

Implement "Account origin" Component
This commit is contained in:
mmilad75 2023-09-01 20:41:57 +03:30 committed by GitHub
parent 5647bb4ac9
commit 6809311191
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 289 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/icons2/20x20/keycard-card@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 809 B

BIN
resources/images/icons2/20x20/keycard-card@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

93
src/quo2/components/wallet/account_origin/component_spec.cljs Normal file
View File

@ -0,0 +1,93 @@
(ns quo2.components.wallet.account-origin.component-spec
(:require [test-helpers.component :as h]
[quo2.core :as quo]))
(h/describe "account origin tests"
(h/test "component renders"
(h/render [quo/account-origin
{:type :recovery-phrase
:stored :on-keycard
:derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
:user-name "Test Name"}])
(-> (h/expect (h/get-by-translation-text :origin))
(.toBeTruthy)))
(h/test "recovery phrase icon is visible when :type is :recovery-phrase"
(h/render [quo/account-origin
{:type :recovery-phrase
:stored :on-keycard
:derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
:user-name "Test Name"}])
(h/is-truthy (h/get-by-label-text :recovery-phrase-icon)))
(h/test "recovery phrase icon is visible when :type is :recovery-phrase"
(h/render [quo/account-origin
{:type :recovery-phrase
:stored :on-keycard
:derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
:user-name "Test Name"}])
(h/is-truthy (h/get-by-label-text :recovery-phrase-icon)))
(h/test "private-key-icon is visible when :type is :private-key"
(h/render [quo/account-origin
{:type :private-key
:stored :on-keycard
:derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
:user-name "Test Name"}])
(h/is-truthy (h/get-by-label-text :private-key-icon)))
(h/test "derivation-path-icon is visible when :type is :default-keypair"
(h/render [quo/account-origin
{:type :default-keypair
:stored :on-keycard
:derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
:user-name "Test Name"}])
(h/is-truthy (h/get-by-label-text :derivation-path-icon)))
(h/test "derivation-path-icon is visible when :type is :recovery-phrase"
(h/render [quo/account-origin
{:type :recovery-phrase
:stored :on-keycard
:derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
:user-name "Test Name"}])
(h/is-truthy (h/get-by-label-text :derivation-path-icon)))
(h/test "on-device text is visible when :stored is :on-device"
(h/render [quo/account-origin
{:type :recovery-phrase
:stored :on-device
:derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
:user-name "Test Name"}])
(-> (h/expect (h/get-by-translation-text :on-device))
(.toBeTruthy)))
(h/test "on-keycard text is visible when :stored is :on-keycard"
(h/render [quo/account-origin
{:type :recovery-phrase
:stored :on-keycard
:derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
:user-name "Test Name"}])
(-> (h/expect (h/get-by-translation-text :on-keycard))
(.toBeTruthy)))
(h/test "on-press is called when :type is :recovery-phrase"
(let [on-press (h/mock-fn)]
(h/render [quo/account-origin
{:type :recovery-phrase
:stored :on-keycard
:derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
:user-name "Test Name"
:on-press on-press}])
(h/fire-event :press (h/query-by-label-text :derivation-path-button))
(h/was-called on-press)))
(h/test "on-press is called when :type is :default-keypair"
(let [on-press (h/mock-fn)]
(h/render [quo/account-origin
{:type :default-keypair
:stored :on-keycard
:derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
:user-name "Test Name"
:on-press on-press}])
(h/fire-event :press (h/query-by-label-text :derivation-path-button))
(h/was-called on-press))))

44
src/quo2/components/wallet/account_origin/style.cljs Normal file
View File

@ -0,0 +1,44 @@
(ns quo2.components.wallet.account-origin.style
(:require [quo2.foundations.colors :as colors]))
(defn container
[theme]
{:border-radius 16
:border-width 1
:border-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)})
(defn title
[color]
{:margin-horizontal 12
:margin-top 8
:margin-bottom 4
:color color})
(defn row-container
[type theme]
{:flex-direction :row
:padding-horizontal 12
:padding-top 8
:margin (when (= :derivation-path type) 8)
:border-radius 12
:border-width (when (= :derivation-path type) 1)
:border-color (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)
:padding-bottom (if (not= :private-key type) 8 12)})
(def icon-container
{:margin-right 8})
(defn stored-title
[theme]
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
:margin-right 4})
(def row-subtitle-container
{:flex-direction :row
:align-items :center})
(def right-icon-container
{:justify-content :center})
(def row-content-container
{:flex 1})

115
src/quo2/components/wallet/account_origin/view.cljs Normal file
View File

@ -0,0 +1,115 @@
(ns quo2.components.wallet.account-origin.view
(:require [quo2.theme :as quo.theme]
[react-native.core :as rn]
[quo2.components.wallet.account-origin.style :as style]
[quo2.components.markdown.text :as text]
[quo2.components.icon :as icons]
[quo2.components.avatars.user-avatar.view :as user-avatar]
[utils.i18n :as i18n]
[quo2.foundations.colors :as colors]))
(defn- row-title
[type user-name]
[text/text
{:weight :medium
:size :paragraph-1}
(case type
:default-keypair (i18n/label :t/user-keypair {:name user-name})
:derivation-path (i18n/label :t/derivation-path)
(i18n/label :t/trip-accounts))])
(defn- row-icon
[profile-picture type secondary-color]
(case type
:default-keypair [user-avatar/user-avatar
{:size :xxs
:ring? false
:profile-picture profile-picture}]
:recovery-phrase [icons/icon
:i/seed
{:accessibility-label :recovery-phrase-icon
:color secondary-color}]
:private-key [icons/icon
:i/key
{:accessibility-label :private-key-icon
:color secondary-color}]
:derivation-path [icons/icon
:i/derivated-path
{:accessibility-label :derivation-path-icon
:color secondary-color}]
nil))
(defn- row-view
[{:keys [type theme secondary-color profile-picture title stored subtitle on-press]}]
[rn/view {:style (style/row-container type theme)}
[rn/view {:style style/icon-container}
[row-icon profile-picture type secondary-color]]
[rn/view
{:style style/row-content-container}
[row-title type title]
[rn/view {:style style/row-subtitle-container}
[text/text
{:weight :regular
:size :paragraph-2
:style (style/stored-title theme)}
subtitle]
(when (= :on-keycard stored)
[icons/icon
:i/keycard-card
{:color secondary-color}])]]
(when (= :derivation-path type)
[rn/pressable
{:accessibility-label :derivation-path-button
:on-press on-press
:style style/right-icon-container}
[icons/icon
:i/options
{:color secondary-color}]])])
(defn- list-view
[{:keys [type stored profile-picture user-name theme secondary-color]}]
(let [stored-name (if (= :on-device stored)
(i18n/label :t/on-device)
(i18n/label :t/on-keycard))]
[row-view
{:type type
:stored stored
:profile-picture profile-picture
:title user-name
:subtitle stored-name
:theme theme
:secondary-color secondary-color}]))
(defn- card-view
[theme derivation-path secondary-color on-press]
[row-view
{:type :derivation-path
:subtitle derivation-path
:theme theme
:on-press on-press
:secondary-color secondary-color}])
(defn view-internal
[{:keys [type theme derivation-path on-press] :as props}]
(let [secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)]
[rn/view {:style (style/container theme)}
[text/text
{:weight :regular
:size :paragraph-2
:style (style/title secondary-color)}
(i18n/label :t/origin)]
[list-view (assoc props :secondary-color secondary-color)]
(when (not= :private-key type)
[card-view theme derivation-path secondary-color on-press])]))
(def view
"Create an account-origin UI component.
| key | values |
| ------------------|------------------------------------------------|
| :type | :default-keypair :recovery-phrase :private-key
| :stored | :on-device :on-keycard
| :profile-picture | image source
| :derivation-path | string
| :user-name | string
| :on-press | function"
(quo.theme/with-theme view-internal))

4
src/quo2/core.cljs
View File

@ -116,8 +116,9 @@
quo2.components.tags.tags
quo2.components.tags.token-tag
quo2.components.text-combinations.view
quo2.components.wallet.account-overview.view
quo2.components.wallet.account-card.view
quo2.components.wallet.account-origin.view
quo2.components.wallet.account-overview.view
quo2.components.wallet.keypair.view
quo2.components.wallet.network-amount.view
quo2.components.wallet.network-bridge.view
@ -331,6 +332,7 @@
;;;; Wallet
(def account-card quo2.components.wallet.account-card.view/view)
(def account-origin quo2.components.wallet.account-origin.view/view)
(def account-overview quo2.components.wallet.account-overview.view/view)
(def keypair quo2.components.wallet.keypair.view/view)
(def network-amount quo2.components.wallet.network-amount.view/view)

1
src/quo2/core_spec.cljs
View File

@ -63,6 +63,7 @@
[quo2.components.tags.status-tags-component-spec]
[quo2.components.wallet.account-card.component-spec]
[quo2.components.wallet.account-overview.component-spec]
[quo2.components.wallet.account-origin.component-spec]
[quo2.components.wallet.keypair.component-spec]
[quo2.components.wallet.network-amount.component-spec]
[quo2.components.wallet.network-bridge.component-spec]

3
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -117,6 +117,7 @@
[status-im2.contexts.quo-preview.community.channel-actions :as channel-actions]
[status-im2.contexts.quo-preview.gradient.gradient-cover :as gradient-cover]
[status-im2.contexts.quo-preview.wallet.account-card :as account-card]
[status-im2.contexts.quo-preview.wallet.account-origin :as account-origin]
[status-im2.contexts.quo-preview.wallet.account-overview :as account-overview]
[status-im2.contexts.quo-preview.wallet.keypair :as keypair]
[status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
@ -361,6 +362,8 @@
:component text-combinations/preview}]
:wallet [{:name :account-card
:component account-card/preview-account-card}
{:name :account-origin
:component account-origin/view}
{:name :account-overview
:component account-overview/preview-account-overview}
{:name :keypair

28
src/status_im2/contexts/quo_preview/wallet/account_origin.cljs Normal file
View File

@ -0,0 +1,28 @@
(ns status-im2.contexts.quo-preview.wallet.account-origin
(:require [quo2.core :as quo]
[reagent.core :as reagent]
[status-im2.common.resources :as resources]
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:type :select
:key :type
:options [{:key :default-keypair}
{:key :recovery-phrase}
{:key :private-key}]}
{:type :select
:key :stored
:options [{:key :on-device}
{:key :on-keycard}]}])
(defn view
[]
(let [state (reagent/atom {:type :default-keypair
:stored :on-keycard
:profile-picture (resources/get-mock-image :user-picture-male5)
:derivation-path "m / 44’ / 60’ / 0’ / 0’ / 2"
:user-name "Alisher Yakupov"
:on-press #(js/alert "pressed")})]
(fn []
[preview/preview-container {:state state :descriptor descriptor}
[quo/account-origin @state]])))

2
translations/en.json
View File

@ -2298,6 +2298,8 @@
"colour": "Colour",
"origin": "Origin",
"slide-create": "Slide to create account",
"user-keypair": "{{name}}'s Keypair",
"trip-accounts": "Trip accounts",
"destroy": "Destroy",
"mint": "Mint",
"via": "via",