From 9c322397a2f06eda6b577b4a65c3e3aa24dfc8a9 Mon Sep 17 00:00:00 2001 From: Nikolay Date: Mon, 22 Jan 2024 21:00:07 +0300 Subject: [PATCH] chore(wallet): remove account confirmation UI (#18518) --- .../components/drawers/drawer_top/view.cljs | 53 +++++++---- .../components/settings/data_item/view.cljs | 2 +- .../common/sheets/account_options/view.cljs | 7 +- .../common/sheets/remove_account/style.cljs | 17 ++++ .../common/sheets/remove_account/view.cljs | 91 +++++++++++++++++++ .../contexts/wallet/edit_account/view.cljs | 8 +- translations/en.json | 8 +- 7 files changed, 162 insertions(+), 24 deletions(-) create mode 100644 src/status_im/contexts/wallet/common/sheets/remove_account/style.cljs create mode 100644 src/status_im/contexts/wallet/common/sheets/remove_account/view.cljs diff --git a/src/quo/components/drawers/drawer_top/view.cljs b/src/quo/components/drawers/drawer_top/view.cljs index b76fc09fce..4ab8b8b601 100644 --- a/src/quo/components/drawers/drawer_top/view.cljs +++ b/src/quo/components/drawers/drawer_top/view.cljs @@ -76,15 +76,19 @@ (str description " · " (i18n/label :t/on-device))]) (defn- context-tag-subtitle - [{:keys [community-logo community-name]}] - [rn/view - {:accessibility-label :context-tag-wrapper - :style {:flex-wrap :wrap}} - [context-tag/view - {:type :community - :community-name community-name - :community-logo community-logo - :size 24}]]) + [{:keys [context-tag-type community-logo community-name account-name emoji customization-color]}] + (let [tag-type (or context-tag-type :account)] + [rn/view + {:accessibility-label :context-tag-wrapper + :style {:flex-wrap :wrap}} + [context-tag/view + {:type tag-type + :account-name account-name + :emoji emoji + :community-name community-name + :community-logo community-logo + :size 24 + :customization-color customization-color}]])) (defn- description-subtitle [{:keys [theme blur? description]}] @@ -95,7 +99,8 @@ description]) (defn- subtitle - [{:keys [type theme blur? keycard? networks description community-name community-logo]}] + [{:keys [type theme blur? keycard? networks description community-name community-logo + context-tag-type account-name emoji customization-color]}] (cond (= :keypair type) [keypair-subtitle @@ -118,8 +123,12 @@ (= :context-tag type) [context-tag-subtitle - {:community-logo community-logo - :community-name community-name}] + {:context-tag-type context-tag-type + :community-logo community-logo + :community-name community-name + :account-name account-name + :emoji emoji + :customization-color customization-color}] (and (not= :label type) description) [description-subtitle @@ -173,6 +182,7 @@ (defn- view-internal [{:keys [title title-icon type theme description blur? community-name community-logo button-icon + account-name emoji on-button-press on-button-long-press button-disabled? account-avatar-emoji account-avatar-type customization-color icon-avatar @@ -196,14 +206,17 @@ :theme theme :blur? blur?}] [subtitle - {:type type - :theme theme - :blur? blur? - :keycard? keycard? - :networks networks - :description description - :community-name community-name - :community-logo community-logo}]] + {:type type + :theme theme + :blur? blur? + :keycard? keycard? + :networks networks + :description description + :community-name community-name + :community-logo community-logo + :customization-color customization-color + :account-name account-name + :emoji emoji}]] [right-icon {:theme theme :type type diff --git a/src/quo/components/settings/data_item/view.cljs b/src/quo/components/settings/data_item/view.cljs index a0ecaa7b5d..4f9e491467 100644 --- a/src/quo/components/settings/data_item/view.cljs +++ b/src/quo/components/settings/data_item/view.cljs @@ -20,7 +20,7 @@ network-image] :or {subtitle-type :default}}] [rn/view {:style style/subtitle-container} - (when (not= :small size) + (when (and subtitle-type (not= :small size)) [rn/view {:style (style/subtitle-icon-container subtitle-type)} (case subtitle-type :icon [icons/icon icon diff --git a/src/status_im/contexts/wallet/common/sheets/account_options/view.cljs b/src/status_im/contexts/wallet/common/sheets/account_options/view.cljs index fd8e268bbc..320b2aa30b 100644 --- a/src/status_im/contexts/wallet/common/sheets/account_options/view.cljs +++ b/src/status_im/contexts/wallet/common/sheets/account_options/view.cljs @@ -10,6 +10,7 @@ [react-native.platform :as platform] [reagent.core :as reagent] [status-im.contexts.wallet.common.sheets.account-options.style :as style] + [status-im.contexts.wallet.common.sheets.remove-account.view :as remove-account] [status-im.contexts.wallet.common.utils :as utils] [utils.i18n :as i18n] [utils.re-frame :as rf])) @@ -95,7 +96,11 @@ :icon :i/delete :accessibility-label :remove-account :label (i18n/label :t/remove-account) - :danger? true}]]] + :danger? true + :on-press #(rf/dispatch [:show-bottom-sheet + {:content + (fn [] + [remove-account/view])}])}]]] (when show-account-selector? [:<> [quo/divider-line {:container-style style/divider-label}] diff --git a/src/status_im/contexts/wallet/common/sheets/remove_account/style.cljs b/src/status_im/contexts/wallet/common/sheets/remove_account/style.cljs new file mode 100644 index 0000000000..b96fc919d3 --- /dev/null +++ b/src/status_im/contexts/wallet/common/sheets/remove_account/style.cljs @@ -0,0 +1,17 @@ +(ns status-im.contexts.wallet.common.sheets.remove-account.style) + +(def desc-container + {:padding-horizontal 20 + :padding-top 4 + :padding-bottom 12}) + +(def copy-container + {:margin-horizontal 20 + :margin-top 4 + :margin-bottom 8}) + +(def checkbox-container + {:flex-direction :row + :padding-horizontal 20 + :padding-vertical 8 + :gap 10}) diff --git a/src/status_im/contexts/wallet/common/sheets/remove_account/view.cljs b/src/status_im/contexts/wallet/common/sheets/remove_account/view.cljs new file mode 100644 index 0000000000..761ce0f6e2 --- /dev/null +++ b/src/status_im/contexts/wallet/common/sheets/remove_account/view.cljs @@ -0,0 +1,91 @@ +(ns status-im.contexts.wallet.common.sheets.remove-account.view + (:require + [quo.core :as quo] + [quo.theme] + [react-native.clipboard :as clipboard] + [react-native.core :as rn] + [reagent.core :as reagent] + [status-im.contexts.wallet.common.sheets.remove-account.style :as style] + [status-im.contexts.wallet.common.utils :as utils] + [utils.i18n :as i18n] + [utils.re-frame :as rf])) + +(defn- footer + [{:keys [submit-disabled?]}] + [quo/bottom-actions + {:actions :2-actions + :customization-color :danger + :button-one-label (i18n/label :t/remove) + :button-one-props {:on-press #(js/alert "Will be implemented") + :type :danger + :disabled? submit-disabled?} + :button-two-label (i18n/label :t/cancel) + :button-two-props {:on-press #(rf/dispatch [:hide-bottom-sheet]) + :type :grey}}]) + +(defn- recovery-phase-flow + [] + (let [confirmed? (reagent/atom false)] + (fn [{:keys [name emoji path color] :as _account}] + (let [formatted-path (utils/format-derivation-path path)] + [:<> + [quo/drawer-top + {:title (i18n/label :t/remove-account-title) + :type :context-tag + :context-tag-type :account + :account-name name + :emoji emoji + :customization-color color}] + [rn/view {:style style/desc-container} + [quo/text {:weight :medium} + (i18n/label :t/remove-account-desc)]] + [quo/data-item + {:size :default + :status :default + :card? true + :title (i18n/label :t/derivation-path) + :custom-subtitle (fn [] + [quo/text {:weight :medium} + formatted-path]) + :icon-right? true + :right-icon :i/copy + :on-press (fn [] + (rf/dispatch [:toasts/upsert + {:type :positive + :text (i18n/label :t/derivation-path-copied)}]) + (clipboard/set-string formatted-path)) + :container-style style/copy-container}] + [rn/pressable + {:style style/checkbox-container + :on-press #(swap! confirmed? not)} + [quo/selectors + {:type :checkbox + :customization-color color + :checked? @confirmed? + :on-change #(swap! confirmed? not)}] + [quo/text (i18n/label :t/remove-account-confirmation)]] + [footer {:submit-disabled? (not @confirmed?)}]])))) + +(defn- watched-address-flow + [{:keys [name emoji color] :as _account}] + [:<> + [quo/drawer-top + {:title (i18n/label :t/remove-watched-address-title) + :type :context-tag + :context-tag-type :account + :account-name name + :emoji emoji + :customization-color color}] + [rn/view {:style style/desc-container} + [quo/text {:weight :medium} + (i18n/label :t/remove-watched-address-desc)]] + [footer {:submit-disabled? false}]]) + +(defn- view-internal + [] + (let [{:keys [type] :as account} (rf/sub [:wallet/current-viewing-account])] + (case type + :generated [recovery-phase-flow account] + :watch [watched-address-flow account]))) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/edit_account/view.cljs b/src/status_im/contexts/wallet/edit_account/view.cljs index 6127571cae..dafcf1764f 100644 --- a/src/status_im/contexts/wallet/edit_account/view.cljs +++ b/src/status_im/contexts/wallet/edit_account/view.cljs @@ -6,6 +6,7 @@ :as create-or-edit-account] [status-im.contexts.wallet.common.sheets.network-preferences.view :as network-preferences] + [status-im.contexts.wallet.common.sheets.remove-account.view :as remove-account] [status-im.contexts.wallet.edit-account.style :as style] [utils.i18n :as i18n] [utils.re-frame :as rf])) @@ -62,7 +63,12 @@ (= name @edited-account-name))] [create-or-edit-account/view {:page-nav-right-side [{:icon-name :i/delete - :on-press #(js/alert "Delete account: to be implemented")}] + :on-press + (fn [] + (rf/dispatch [:show-bottom-sheet + {:content + (fn [] + [remove-account/view])}]))}] :account-name account-name :account-emoji emoji :account-color color diff --git a/translations/en.json b/translations/en.json index f4beca8fff..e59516945f 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2463,5 +2463,11 @@ "oops-wrong-word": "Oops! Wrong word", "time-in-mins": "{{minutes}} min", "amount-with-currency-symbol": "{{symbol}} {{amount}}", - "no-routes-found": "No routes found" + "no-routes-found": "No routes found", + "remove-watched-address-title": "Remove watched address", + "remove-watched-address-desc": "The watched address will be removed from all of your synced devices.", + "remove-account-title": "Remove account", + "remove-account-desc": "The account will be removed from all of your synced devices. Make sure you have a backup of your keypair or recovery phrase and derivation path (if it’s not default).", + "derivation-path-copied": "Derivation path copied", + "remove-account-confirmation": "I have taken note of the derivation path" }