chore(wallet): remove account confirmation UI (#18518)

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

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

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

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

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

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

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