Implement "Account origin" Component (#17147)

Implement "Account origin" Component

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

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

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

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)

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]

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

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

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",