diff --git a/src/quo/components/drawers/bottom_actions/view.cljs b/src/quo/components/drawers/bottom_actions/view.cljs index 2b06080440..031873fa4a 100644 --- a/src/quo/components/drawers/bottom_actions/view.cljs +++ b/src/quo/components/drawers/bottom_actions/view.cljs @@ -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 diff --git a/src/quo/components/text_combinations/view.cljs b/src/quo/components/text_combinations/view.cljs index 6c17cf40ea..534b00419c 100644 --- a/src/quo/components/text_combinations/view.cljs +++ b/src/quo/components/text_combinations/view.cljs @@ -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 diff --git a/src/quo/components/wallet/keypair/style.cljs b/src/quo/components/wallet/keypair/style.cljs index eca4b33409..2190532c9d 100644 --- a/src/quo/components/wallet/keypair/style.cljs +++ b/src/quo/components/wallet/keypair/style.cljs @@ -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}) diff --git a/src/quo/components/wallet/keypair/view.cljs b/src/quo/components/wallet/keypair/view.cljs index 644a253675..d20181d73b 100644 --- a/src/quo/components/wallet/keypair/view.cljs +++ b/src/quo/components/wallet/keypair/view.cljs @@ -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] diff --git a/src/status_im2/contexts/quo_preview/wallet/keypair.cljs b/src/status_im2/contexts/quo_preview/wallet/keypair.cljs index 382022162d..cd3983dbfd 100644 --- a/src/status_im2/contexts/quo_preview/wallet/keypair.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/keypair.cljs @@ -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))})]]]))) diff --git a/src/status_im2/contexts/wallet/common/utils.cljs b/src/status_im2/contexts/wallet/common/utils.cljs index bde23b73ff..a97cba9338 100644 --- a/src/status_im2/contexts/wallet/common/utils.cljs +++ b/src/status_im2/contexts/wallet/common/utils.cljs @@ -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 "/" " / ")) diff --git a/src/status_im2/contexts/wallet/create_account/select_keypair/style.cljs b/src/status_im2/contexts/wallet/create_account/select_keypair/style.cljs new file mode 100644 index 0000000000..f29ed26c6c --- /dev/null +++ b/src/status_im2/contexts/wallet/create_account/select_keypair/style.cljs @@ -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}) diff --git a/src/status_im2/contexts/wallet/create_account/select_keypair/view.cljs b/src/status_im2/contexts/wallet/create_account/select_keypair/view.cljs new file mode 100644 index 0000000000..346c52d078 --- /dev/null +++ b/src/status_im2/contexts/wallet/create_account/select_keypair/view.cljs @@ -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}]])) diff --git a/src/status_im2/contexts/wallet/create_account/view.cljs b/src/status_im2/contexts/wallet/create_account/view.cljs index 45c6a08752..bdab9c893b 100644 --- a/src/status_im2/contexts/wallet/create_account/view.cljs +++ b/src/status_im2/contexts/wallet/create_account/view.cljs @@ -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) diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index 61b30cd049..c3ee5ef547 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -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} diff --git a/src/utils/address.cljs b/src/utils/address.cljs index edab86bca9..4ba40b2b96 100644 --- a/src/utils/address.cljs +++ b/src/utils/address.cljs @@ -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)) diff --git a/src/utils/address_test.cljs b/src/utils/address_test.cljs index f70b71c46a..cc5676df08 100644 --- a/src/utils/address_test.cljs +++ b/src/utils/address_test.cljs @@ -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")))) diff --git a/translations/en.json b/translations/en.json index 77f1bdbba4..ab0b8a252d 100644 --- a/translations/en.json +++ b/translations/en.json @@ -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" }