From 6809311191e9394a7fe688a85e671b4a156dbb6b Mon Sep 17 00:00:00 2001 From: mmilad75 <55688834+mmilad75@users.noreply.github.com> Date: Fri, 1 Sep 2023 20:41:57 +0330 Subject: [PATCH] Implement "Account origin" Component (#17147) Implement "Account origin" Component --- .../images/icons2/20x20/keycard-card@2x.png | Bin 0 -> 809 bytes .../images/icons2/20x20/keycard-card@3x.png | Bin 0 -> 1221 bytes .../wallet/account_origin/component_spec.cljs | 93 ++++++++++++++ .../wallet/account_origin/style.cljs | 44 +++++++ .../wallet/account_origin/view.cljs | 115 ++++++++++++++++++ src/quo2/core.cljs | 4 +- src/quo2/core_spec.cljs | 1 + src/status_im2/contexts/quo_preview/main.cljs | 3 + .../quo_preview/wallet/account_origin.cljs | 28 +++++ translations/en.json | 2 + 10 files changed, 289 insertions(+), 1 deletion(-) create mode 100644 resources/images/icons2/20x20/keycard-card@2x.png create mode 100644 resources/images/icons2/20x20/keycard-card@3x.png create mode 100644 src/quo2/components/wallet/account_origin/component_spec.cljs create mode 100644 src/quo2/components/wallet/account_origin/style.cljs create mode 100644 src/quo2/components/wallet/account_origin/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/wallet/account_origin.cljs diff --git a/resources/images/icons2/20x20/keycard-card@2x.png b/resources/images/icons2/20x20/keycard-card@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..c6cf24cad62c710cfb01795415e90dc579162402 GIT binary patch literal 809 zcmV+^1J?YBP)0}`vK6>(((%%$`^97rXBEJXZ4 zI3lPXp!y2r@+k0MkmP%oJdqY?9>8As6@>2<*kKD1*0($zpa$6Dvk>-VpU^^qZ^XM{ z2sJe=#hcjz#DD4suXz?M$)m&`*jge)D0p<)@;yEU9??(lu||*b=hw;t--?St0Nic1 zNCow!182&>C0aWR1x@Ebiea0{1EaK>`VU$CodC92=0=1 z{gw|OvU{xT2j`-D72gmoPU;e;(a+}7xsI=t+u@T#nLy@aJdpP&A7-eT_*hBCVrZCM z&k?912j;V1pdt8O^XSbv(PBqn@(oi6S7-PrP{aI*T!btbNI8M;29|k+AI(!gvE__Q=)P?a8D~fA}x^9+DQfG z`P7EO_xM=5=Cy@qPD=nz9I|e9#pv9QNzpxLI7XNB#7X_RDP* n62OtRkrC=_yjogXo;!a5@Ff^h=N)>j00000NkvXXu0mjfQ0N?H=DCz}%4 zk!(33j=z5TzYh}G(naS}PN%y7I2;a#!{Kl^W&^?_!B`LsVHm~`GXWTo=r{7Z0Kw#K zTR8|ArSHVK0FV0+_eci6;a5F)1SVGa1zT>DV(()RA&H?sVXf2@9D9I01o7>fUmn8* zR91M2E$@(`+chaz07f3b=No>pUul$W#|0LIEf^k>q5)JwM7fWQauZ-8^YAc$N?;_w zU+?oMvg&Qq={bA7MN9Xq-m1vy-!Z+O2pIAqEcAQ;ZaV=Ji{ujk1_3Q$`b-hhs(MS8 zL(>EI!0X)b9|vV}OBI$Mj4(JGABg+(5DxkiewQX?k$eX|gbuBWt^7R?#9EniD^>Uz zTRBsoDh=qx(Au2Vg42>3VtACbI7UywU*kODrg0t=3SH^s1wMh+`n;8u$T>*mqya`( zMeqj(+ePCFEu6QmfYxdglvTO6^moO-@LPWQ($wE*VY$y{mon}*O<74gC!snkwwTOa zk5S%690|)tN6iFJNAJzipjP2D%25&L(0H;TEF04yrKP(_p&^S^QFJ_mnvlCg ztZ_Q>s7QZZ(@r7pC$6>xt-=&aW@2V95jK04*sHxEKu3Q!rg_CX&)KVWUHB;DcvQlQ zKE>hm66O09Mp|{U#8x)wfY2%FMk^1$z!X?1Ob)CD3yaXQV_SF8b`@GF9M||Ao)ph= zj*VH;bz!Bj4;a9ILSrl(Cs`9Kv{B!{GWFCLg=IV}N)IT=2hjQeQ=r|4NoYiS@k3kY znxO{z{HjCSQ&;D)Wnl3Xy!~54HUq(DYT)4;oS0VOabZ|nO7<7OkVn0)?%r*|I7|uv zBNkvmtFU%SkB4t*6`|Q+ptiUn1TFXukAiVw9~8_DnxkqI<8ij&JnX510%$y_8l`&H zlH%GErCFFKnm70Pw+BB%M~D+s-vWi>%(9>(;|4SoI#6t7+vYvJEKU1UO@C6FcCDFd zTD3BQ(JjANHT5qHJSb1Jt2CJhgG0(B%(-efLe3?vK8%nR#iB7-Ch&Kfg4a)R7R}IrLx9E%X`lt zBBGC?syv+1sVez-LW@FEKIICKNw_<>lMgwJ)3A~9w>txT4zIX zL3~^u=GtXoGys3|jz?Cx^U6PYNUaS!)fIniq*cW(ow7bv8U+&~0};75)1D`@{B4*y zvXmlvbb;hkH$| jTsj;Mhr{7;I8^=u)2ysJKgL(y00000NkvXXu0mjfNX{lx literal 0 HcmV?d00001 diff --git a/src/quo2/components/wallet/account_origin/component_spec.cljs b/src/quo2/components/wallet/account_origin/component_spec.cljs new file mode 100644 index 0000000000..375c765289 --- /dev/null +++ b/src/quo2/components/wallet/account_origin/component_spec.cljs @@ -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)))) diff --git a/src/quo2/components/wallet/account_origin/style.cljs b/src/quo2/components/wallet/account_origin/style.cljs new file mode 100644 index 0000000000..0e5bf94d96 --- /dev/null +++ b/src/quo2/components/wallet/account_origin/style.cljs @@ -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}) diff --git a/src/quo2/components/wallet/account_origin/view.cljs b/src/quo2/components/wallet/account_origin/view.cljs new file mode 100644 index 0000000000..26a3fe9afd --- /dev/null +++ b/src/quo2/components/wallet/account_origin/view.cljs @@ -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)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index f6996215e9..be88eb5798 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -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) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index 899dfcfaeb..bfb629bb71 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -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] diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index fc8950bc14..522486cd40 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -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 diff --git a/src/status_im2/contexts/quo_preview/wallet/account_origin.cljs b/src/status_im2/contexts/quo_preview/wallet/account_origin.cljs new file mode 100644 index 0000000000..d8c6ecf73b --- /dev/null +++ b/src/status_im2/contexts/quo_preview/wallet/account_origin.cljs @@ -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]]))) diff --git a/translations/en.json b/translations/en.json index c6460bf173..52790b23b9 100644 --- a/translations/en.json +++ b/translations/en.json @@ -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",