From c78bd68da3a487db2d07281e374295a4ca78ee18 Mon Sep 17 00:00:00 2001 From: Ulises M Date: Mon, 20 May 2024 16:23:50 -0600 Subject: [PATCH] Cleanup --- .../add_account/create_account/events.cljs | 4 +- .../add_account/create_account/utils.cljs | 39 +- .../add_account/create_account/view.cljs | 425 +++++++++++++----- src/status_im/subs/wallet/wallet.cljs | 1 - 4 files changed, 326 insertions(+), 143 deletions(-) diff --git a/src/status_im/contexts/wallet/add_account/create_account/events.cljs b/src/status_im/contexts/wallet/add_account/create_account/events.cljs index 25d9922ed7c7..63f4bb1c9144 100644 --- a/src/status_im/contexts/wallet/add_account/create_account/events.cljs +++ b/src/status_im/contexts/wallet/add_account/create_account/events.cljs @@ -95,7 +95,7 @@ (rf/reg-event-fx :wallet/get-derived-addresses get-derived-addresses) (rf/reg-event-fx - :wallet/new-derivation-path + :wallet/next-derivation-path (fn [_ [{:keys [on-success keypair-uid]}]] {:fx [[:json-rpc/call [{:method "accounts_resolveSuggestedPathForKeypair" @@ -104,7 +104,7 @@ :on-error (fn [error] (log/error "Failed to resolve next path derivation path" - {:event :wallet/new-derivation-path + {:event :wallet/next-derivation-path :method "accounts_resolveSuggestedPathForKeypair" :error error :params keypair-uid}))}]]]})) diff --git a/src/status_im/contexts/wallet/add_account/create_account/utils.cljs b/src/status_im/contexts/wallet/add_account/create_account/utils.cljs index f62d013e2026..bc6ff835fce5 100644 --- a/src/status_im/contexts/wallet/add_account/create_account/utils.cljs +++ b/src/status_im/contexts/wallet/add_account/create_account/utils.cljs @@ -1,11 +1,13 @@ -(ns status-im.contexts.wallet.add-account.create-account.utils - (:require [clojure.string :as string])) +(ns status-im.contexts.wallet.add-account.create-account.utils) + +(defn first-derived-account [account-data] + (-> account-data :derived first val)) (defn prepare-new-account - [{keypair-name :keypair-name - {:keys [keyUid derived address]} :account-data - {:keys [account-name account-color emoji]} :account-preferences}] - (let [account-to-create (val (first derived))] + [{keypair-name :keypair-name + {:keys [keyUid address] :as account} :account-data + {:keys [account-name color emoji]} :account-preferences}] + (let [account-to-create (first-derived-account account)] {:key-uid keyUid :name keypair-name :type :seed @@ -20,28 +22,9 @@ :public-key (:publicKey account-to-create) :name account-name :emoji emoji - :colorID account-color - :hidden false}]}) - + :colorID color + :hidden false}]})) - #_(assoc new-keypair - :name (:keypair-name new-keypair) - :key-uid (:keyUid new-keypair) - :derived-from address - :type :seed - :accounts [{:keypair-name (:keypair-name new-keypair) - :key-uid (:keyUid new-keypair) - :seed-phrase (:mnemonic new-keypair) - :public-key (:publicKey new-keypair) - :type :seed - :name account-name - :emoji emoji - :colorID account-color - :path "m/44'/60'/0'/0/0" - :address (:address new-keypair)}])) - -(defn first-derived-account [account-data] - (-> account-data :derived first val)) {"privateKey" "0x61c4d1b891ebee9af38e5e40ef589871b7d18b1bf844f497948045b8479490b3", "publicKey" "0x044cd08b14ac81e4ad3b1f5ac95c8c68ade831f8a33c9026e5564f572b837a73c85ae5c953f336a3904cfcfd73ae2eb906a1906bd51199168d1269bb195a8a5c35" @@ -66,7 +49,7 @@ "mnemonic" "album sense skull captain fall easily tell cup image mass blade before" "derived" {}} -;; + ["0x759e6bc12c2ff1afff2a65ac74b9bc0d92a641d4d6ef4bae1713d4a365eda3de", {"key-uid" "0xef578a90bc6cfb827712864a8314e1ad60fbf566de5cb861ccc8f4eec4060f53" "name" "KPTEST" diff --git a/src/status_im/contexts/wallet/add_account/create_account/view.cljs b/src/status_im/contexts/wallet/add_account/create_account/view.cljs index 88d8dea7bdb4..ad123dc05cc3 100644 --- a/src/status_im/contexts/wallet/add_account/create_account/view.cljs +++ b/src/status_im/contexts/wallet/add_account/create_account/view.cljs @@ -56,104 +56,44 @@ :description :text :description-props {:text formatted-path}}])) -(defn view - [_] - (let [top (safe-area/get-top) - bottom (safe-area/get-bottom) - {window-width :width} (rn/get-window) - account-color (reagent/atom (rand-nth colors/account-colors)) - emoji (reagent/atom (emoji-picker.utils/random-emoji)) - account-name (reagent/atom "") - on-change-text #(reset! account-name %) - show-account-origin #(rf/dispatch [:show-bottom-sheet {:content account-origin/view}]) - derivation-path (reagent/atom "") - set-derivation-path #(reset! derivation-path %)] - (fn [] - (let [theme (quo.theme/use-theme) - customization-color (rf/sub [:profile/customization-color]) - {:keys [new-account-data - keypair-name]} (rf/sub [:wallet/create-account-new-keypair]) - selected-keypair (rf/sub [:wallet/selected-keypair]) - primary? (rf/sub [:wallet/selected-primary-keypair?]) - placeholder (i18n/label :t/default-account-placeholder) - keypair-title (or keypair-name - (if primary? - (i18n/label :t/keypair-title - {:name (:name selected-keypair)}) - (:name selected-keypair))) - adding-new-keypair? (some? new-account-data) - on-auth-success (fn [password] - (let [account-preferences {:account-name @account-name - :account-color @account-color - :emoji @emoji}] - (if adding-new-keypair? - (rf/dispatch [:wallet/import-and-create-keypair-with-account - {:password password - :account-preferences account-preferences}]) - (rf/dispatch [:wallet/derive-address-and-add-account - {:password password - :derived-from-address (:derived-from selected-keypair) - :derivation-path @derivation-path - :account-preferences account-preferences}]))))] - (rn/use-effect - (fn [] - (if adding-new-keypair? - (set-derivation-path constants/wallet-initial-derivation-path) - (rf/dispatch - [:wallet/new-derivation-path {:on-success set-derivation-path - :keypair-uid (:key-uid selected-keypair)}]))) - [(:key-uid selected-keypair)]) - - #_(rn/use-unmount #(rf/dispatch [:wallet/clear-create-account])) - - [floating-button-page/view - {:gradient-cover? true - :footer-container-padding 0 - :header-container-style {:padding-top top} - :customization-color @account-color - :header [quo/page-nav - {:type :no-title - :background :blur - :right-side [{:icon-name :i/info - :on-press show-account-origin}] - :icon-name :i/close - :on-press #(rf/dispatch [:navigate-back])}] - :footer [standard-auth/slide-button - {:size :size-48 - :track-text (i18n/label :t/slide-to-create-account) - :customization-color @account-color - :on-auth-success on-auth-success - :auth-button-label (i18n/label :t/confirm) - :disabled? (or (empty? @account-name) - (= "" @derivation-path)) - :container-style (style/slide-button-container bottom) - :dependencies [new-account-data]}]} - [rn/view {:style style/account-avatar-container} - [quo/account-avatar - {:customization-color @account-color - :size 80 - :emoji @emoji - :type :default}] - [quo/button - {:size 32 - :type :grey - :background :photo - :icon-only? true - :on-press #(rf/dispatch [:emoji-picker/open - {:on-select (fn [selected-emoji] - (reset! emoji selected-emoji))}]) - :container-style style/reaction-button-container} - :i/reaction]] - [quo/title-input - {:customization-color @account-color - :placeholder placeholder - :on-change-text on-change-text - :max-length constants/wallet-account-name-max-length - :blur? true - :disabled? false - :default-value @account-name - :container-style style/title-input-container}] - [quo/divider-line] +(defn- avatar [{:keys [account-color emoji on-select-emoji]}] + [rn/view {:style style/account-avatar-container} + [quo/account-avatar + {:customization-color account-color + :size 80 + :emoji emoji + :type :default}] + [quo/button + {:size 32 + :type :grey + :background :photo + :icon-only? true + :on-press #(rf/dispatch [:emoji-picker/open {:on-select on-select-emoji}]) + :container-style style/reaction-button-container} + :i/reaction]]) + +(defn- input [_] + (let [placeholder (i18n/label :t/default-account-placeholder)] + (fn [{:keys [account-color account-name on-change-text]}] + [quo/title-input + {:customization-color account-color + :placeholder placeholder + :on-change-text on-change-text + :max-length constants/wallet-account-name-max-length + :blur? true + :disabled? false + :default-value account-name + :container-style style/title-input-container}]))) + +(defn- color-picker [_] + (let [{window-width :width} (rn/get-window) + color-picker-style {:padding-vertical 12 + :padding-left (responsiveness/iphone-11-Pro-20-pixel-from-width + window-width)}] + (fn [{:keys [account-color set-account-color]}] + [:<> + [quo/divider-line] + (let [theme (quo.theme/use-theme)] [rn/view {:style style/color-picker-container} [quo/text {:size :paragraph-2 @@ -161,17 +101,278 @@ :style (style/color-label theme)} (i18n/label :t/colour)] [quo/color-picker - {:default-selected @account-color - :on-change #(reset! account-color %) - :container-style {:padding-vertical 12 - :padding-left (responsiveness/iphone-11-Pro-20-pixel-from-width - window-width)}}]] - [quo/divider-line] - [quo/category - {:list-type :settings - :label (i18n/label :t/origin) - :data (get-keypair-data {:title keypair-title - :primary-keypair? primary? - :new-keypair? adding-new-keypair? - :derivation-path @derivation-path - :customization-color customization-color})}]])))) + {:default-selected account-color + :on-change set-account-color + :container-style color-picker-style}]])]))) + +(defn- new-account-origin [{:keys [keypair-title derivation-path customization-color]}] + (let [{keypair-name :name} (rf/sub [:wallet/selected-keypair]) + primary? (rf/sub [:wallet/selected-primary-keypair?]) + keypair-name (or keypair-title + (if primary? + (i18n/label :t/keypair-title {:name keypair-name}) + keypair-name))] + [:<> + [quo/divider-line] + [quo/category + {:list-type :settings + :label (i18n/label :t/origin) + :data (get-keypair-data {:primary-keypair? primary? + :title keypair-name + :derivation-path derivation-path + :customization-color customization-color})}]])) + +(defn- floating-button [_ & _] + (let [top (safe-area/get-top) + bottom (safe-area/get-bottom) + header [quo/page-nav + {:type :no-title + :background :blur + :right-side [{:icon-name :i/info + :on-press #(rf/dispatch [:show-bottom-sheet + {:content account-origin/view}])}] + :icon-name :i/close + :on-press #(rf/dispatch [:navigate-back])}]] + (fn [{:keys [slide-button-props account-color]} & children] + (into + [floating-button-page/view + {:gradient-cover? true + :footer-container-padding 0 + :header-container-style {:padding-top top} + :customization-color account-color + :header header + :footer [standard-auth/slide-button + (assoc slide-button-props + :size :size-48 + :track-text (i18n/label :t/slide-to-create-account) + :customization-color account-color + :auth-button-label (i18n/label :t/confirm) + :container-style (style/slide-button-container bottom))]}] + children)))) + +(defn add-new-keypair-variant + [{:keys [on-change-text set-account-color set-emoji] + {:keys [account-name account-color emoji]} + :state}] + (let [on-auth-success (fn [password] + (rf/dispatch + [:wallet/import-and-create-keypair-with-account + {:password password + :account-preferences {:account-name @account-name + :color @account-color + :emoji @emoji}}]))] + (fn [{:keys [customization-color keypair-name]}] + (let [{:keys [new-account-data]} (rf/sub [:wallet/create-account-new-keypair])] + [floating-button + {:account-color @account-color + :slide-button-props {:on-auth-success on-auth-success + :disabled? (empty? @account-name) + :dependencies [new-account-data]}} + [avatar {:account-color @account-color + :emoji @emoji + :on-select-emoji set-emoji}] + [input {:account-color @account-color + :account-name @account-name + :on-change-text on-change-text}] + [color-picker {:account-color @account-color + :set-account-color set-account-color}] + [new-account-origin {:derivation-path constants/wallet-initial-derivation-path + :customization-color customization-color + :keypair-title keypair-name}]])))) + +(defn derive-account-variant + [{:keys [on-change-text set-account-color set-emoji] + {:keys [account-name account-color emoji]} + :state}] + (let [derivation-path (reagent/atom "") + set-derivation-path #(reset! derivation-path %)] + (fn [{:keys [customization-color]}] + (let [{:keys [derived-from + key-uid]} (rf/sub [:wallet/selected-keypair]) + on-auth-success (rn/use-callback + (fn [password] + (let [preferences {:account-name @account-name + :color @account-color + :emoji @emoji}] + (rf/dispatch + [:wallet/derive-address-and-add-account + {:password password + :derived-from-address derived-from + :derivation-path @derivation-path + :account-preferences preferences}]))) + [derived-from])] + (rn/use-effect + #(rf/dispatch + [:wallet/next-derivation-path {:on-success set-derivation-path + :keypair-uid key-uid}]) + [key-uid]) + + [floating-button + {:account-color @account-color + :slide-button-props {:on-auth-success on-auth-success + :disabled? (or (empty? @account-name) + (= "" @derivation-path))}} + [avatar {:account-color @account-color + :emoji @emoji + :on-select-emoji set-emoji}] + [input {:account-color @account-color + :account-name @account-name + :on-change-text on-change-text}] + [color-picker {:account-color @account-color + :set-account-color set-account-color}] + [new-account-origin {:derivation-path @derivation-path + :customization-color customization-color}]])))) + +(defn view + [_] + (let [account-name (reagent/atom "") + account-color (reagent/atom (rand-nth colors/account-colors)) + emoji (reagent/atom (emoji-picker.utils/random-emoji)) + on-change-text #(reset! account-name %) + set-account-color #(reset! account-color %) + set-emoji #(reset! emoji %) + state {:account-name account-name + :account-color account-color + :emoji emoji}] + (fn [] + (let [customization-color (rf/sub [:profile/customization-color]) + ;; Having a keypair means the user is importing it or creating it. + {:keys [keypair-name]} (rf/sub [:wallet/create-account-new-keypair])] + + (rn/use-unmount #(rf/dispatch [:wallet/clear-create-account])) + + (if keypair-name + [add-new-keypair-variant + {:customization-color customization-color + :on-change-text on-change-text + :set-account-color set-account-color + :set-emoji set-emoji + :state state + :keypair-name keypair-name}] + [derive-account-variant + {:customization-color customization-color + :on-change-text on-change-text + :set-account-color set-account-color + :set-emoji set-emoji + :state state}]))))) + +(comment + (defn view + [_] + (let [top (safe-area/get-top) + bottom (safe-area/get-bottom) + {window-width :width} (rn/get-window) + account-color (reagent/atom (rand-nth colors/account-colors)) + emoji (reagent/atom (emoji-picker.utils/random-emoji)) + account-name (reagent/atom "") + on-change-text #(reset! account-name %) + show-account-origin #(rf/dispatch [:show-bottom-sheet {:content account-origin/view}]) + derivation-path (reagent/atom "") + set-derivation-path #(reset! derivation-path %)] + (fn [] + (let [theme (quo.theme/use-theme) + customization-color (rf/sub [:profile/customization-color]) + {:keys [new-account-data + keypair-name]} (rf/sub [:wallet/create-account-new-keypair]) + selected-keypair (rf/sub [:wallet/selected-keypair]) + primary? (rf/sub [:wallet/selected-primary-keypair?]) + placeholder (i18n/label :t/default-account-placeholder) + keypair-title (or keypair-name + (if primary? + (i18n/label :t/keypair-title + {:name (:name selected-keypair)}) + (:name selected-keypair))) + adding-new-keypair? (some? new-account-data) + on-auth-success (fn [password] + (let [account-preferences {:account-name @account-name + :account-color @account-color + :emoji @emoji}] + (if adding-new-keypair? + (rf/dispatch [:wallet/import-and-create-keypair-with-account + {:password password + :account-preferences account-preferences}]) + (rf/dispatch [:wallet/derive-address-and-add-account + {:password password + :derived-from-address (:derived-from selected-keypair) + :derivation-path @derivation-path + :account-preferences account-preferences}]))))] + (rn/use-effect + (fn [] + (if adding-new-keypair? + (set-derivation-path constants/wallet-initial-derivation-path) + (rf/dispatch + [:wallet/next-derivation-path {:on-success set-derivation-path + :keypair-uid (:key-uid selected-keypair)}]))) + [(:key-uid selected-keypair)]) + + (rn/use-unmount #(rf/dispatch [:wallet/clear-create-account])) + + [floating-button-page/view + {:gradient-cover? true + :footer-container-padding 0 + :header-container-style {:padding-top top} + :customization-color @account-color + :header [quo/page-nav + {:type :no-title + :background :blur + :right-side [{:icon-name :i/info + :on-press show-account-origin}] + :icon-name :i/close + :on-press #(rf/dispatch [:navigate-back])}] + :footer [standard-auth/slide-button + {:size :size-48 + :track-text (i18n/label :t/slide-to-create-account) + :customization-color @account-color + :on-auth-success on-auth-success + :auth-button-label (i18n/label :t/confirm) + :disabled? (or (empty? @account-name) + (= "" @derivation-path)) + :container-style (style/slide-button-container bottom) + :dependencies [new-account-data]}]} + [rn/view {:style style/account-avatar-container} + [quo/account-avatar + {:customization-color @account-color + :size 80 + :emoji @emoji + :type :default}] + [quo/button + {:size 32 + :type :grey + :background :photo + :icon-only? true + :on-press #(rf/dispatch [:emoji-picker/open + {:on-select (fn [selected-emoji] + (reset! emoji selected-emoji))}]) + :container-style style/reaction-button-container} + :i/reaction]] + [quo/title-input + {:customization-color @account-color + :placeholder placeholder + :on-change-text on-change-text + :max-length constants/wallet-account-name-max-length + :blur? true + :disabled? false + :default-value @account-name + :container-style style/title-input-container}] + [quo/divider-line] + [rn/view {:style style/color-picker-container} + [quo/text + {:size :paragraph-2 + :weight :medium + :style (style/color-label theme)} + (i18n/label :t/colour)] + [quo/color-picker + {:default-selected @account-color + :on-change #(reset! account-color %) + :container-style {:padding-vertical 12 + :padding-left (responsiveness/iphone-11-Pro-20-pixel-from-width + window-width)}}]] + [quo/divider-line] + [quo/category + {:list-type :settings + :label (i18n/label :t/origin) + :data (get-keypair-data {:title keypair-title + :primary-keypair? primary? + :new-keypair? adding-new-keypair? + :derivation-path @derivation-path + :customization-color customization-color})}]]))))) diff --git a/src/status_im/subs/wallet/wallet.cljs b/src/status_im/subs/wallet/wallet.cljs index 3e2078e3b148..e2555c66243d 100644 --- a/src/status_im/subs/wallet/wallet.cljs +++ b/src/status_im/subs/wallet/wallet.cljs @@ -163,7 +163,6 @@ :<- [:wallet/keypairs] :<- [:wallet/selected-keypair-uid] (fn [[keypairs selected-keypair-uid]] - (def --kps keypairs) (some #(when (= (:key-uid %) selected-keypair-uid) %) keypairs)))