Wallet: Account Options (#17612)

* wallet: account options

src/quo2/components/drawers/drawer_top/component_spec.cljs

@@ -56,7 +56,7 @@
                {:title                "Title"
                 :type                 :account
                 :account-avatar-emoji "🍿"
-                :networks             [:ethereum]
+                :networks             [{:name :ethereum :short :eth}]
                 :description          "0x62b...0a5"
                 :customization-color  :purple}])
     (h/is-truthy (h/get-by-text "Title"))

src/quo2/components/drawers/drawer_top/view.cljs

@@ -36,8 +36,8 @@
   [text/text
    {:size   :paragraph-2
     :weight :regular
-    :style  (style/network-text-color network)}
+    :style  (style/network-text-color (:name network))}
-   (str (subs (name network) 0 3) ":")])
+   (str (name (:short network)) ":")])
 
 (defn- keypair-subtitle
   [{:keys [theme blur? keycard?]}]
@@ -56,7 +56,7 @@
        :size            16
        :container-style style/keycard-icon}])])
 
-(defn- acocunt-subtitle
+(defn- account-subtitle
   [{:keys [networks theme blur? description]}]
   [rn/view {:style style/row}
    (for [network networks]
@@ -106,7 +106,7 @@
       :keycard? keycard?}]
 
     (= :account type)
-    [acocunt-subtitle
+    [account-subtitle
      {:networks    networks
       :theme       theme
       :blur?       blur?

src/quo2/components/list_items/account/view.cljs

@@ -8,6 +8,14 @@
             [reagent.core :as reagent]
             [quo2.components.icon :as icon]))
 
+(defn- network-view
+  [network]
+  [text/text
+   {:size   :paragraph-2
+    :weight :regular
+    :style  {:color (colors/custom-color (:name network))}}
+   (str (name (:short network)) ":")])
+
 (defn- account-view
   [{:keys [account-props title-icon? blur? theme]
     :or   {title-icon? false}}]
@@ -30,6 +38,9 @@
                    colors/white-opa-40
                    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]])]
     [text/text {:size :paragraph-2}
+     (for [network (:networks account-props)]
+       ^{:key (str network)}
+       [network-view network])
      [text/text
       {:size   :paragraph-2
        :weight :monospace

src/status_im2/contexts/wallet/account/view.cljs

@@ -10,6 +10,35 @@
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
 
+(defn account-options
+  []
+  [:<>
+   [quo/drawer-top temp/account-data]
+   [quo/action-drawer
+    [[{:icon                :i/edit
+       :accessibility-label :edit
+       :label               (i18n/label :t/edit-account)}
+      {:icon                :i/copy
+       :accessibility-label :copy-address
+       :label               (i18n/label :t/copy-address)}
+      {:icon                :i/share
+       :accessibility-label :share-account
+       :label               (i18n/label :t/share-account)}
+      {:icon                :i/delete
+       :accessibility-label :remove-account
+       :label               (i18n/label :t/remove-account)
+       :danger?             true}]]]
+   [quo/divider-line]
+   [rn/view
+    {:style {:padding-horizontal 20
+             :padding-top        12
+             :padding-bottom     8}}
+    [quo/section-label {:section (i18n/label :t/select-another-account)}]]
+   [rn/flat-list
+    {:data      temp/other-accounts
+     :render-fn (fn [account] [quo/account-item {:account-props account}])
+     :style     {:margin-horizontal 8}}]])
+
 (def ^:private networks-list
   [{:source (quo.resources/get-network :ethereum)}
    {:source (quo.resources/get-network :optimism)}
@@ -40,7 +69,8 @@
          :networks-on-press #(js/alert "Pressed Networks")
          :right-side        :account-switcher
          :account-switcher  {:customization-color :purple
-                             :on-press            #(js/alert "Pressed Account Switcher")
+                             :on-press            #(rf/dispatch [:show-bottom-sheet
+                                                                 {:content account-options}])
                              :emoji               "🍑"}}]
        [quo/account-overview temp/account-overview-state]
        [quo/wallet-graph {:time-frame :empty}]

src/status_im2/contexts/wallet/common/temp.cljs

@@ -179,3 +179,26 @@
     :state         :default
     :action        :icon
     :on-press-icon on-press-icon}])
+
+(def account-data
+  {:title                "Trip to Vegas"
+   :type                 :account
+   :networks             [{:name :ethereum :short :eth}
+                          {:name :optimism :short :opt}
+                          {:name :arbitrum :short :arb1}]
+   :description          "0x62b...0a5"
+   :account-avatar-emoji "🍑"
+   :customization-color  :purple})
+
+(def other-accounts
+  [{:customization-color :flamingo
+    :emoji               "🍿"
+    :name                "New House"
+    :address             "0x21a...49e"
+    :networks            [{:name :ethereum :short :eth}
+                          {:name :optimism :short :opt}]}
+   {:customization-color :blue
+    :emoji               "🎮"
+    :name                "My savings"
+    :address             "0x43c...98d"
+    :networks            [{:name :ethereum :short :eth}]}])

translations/en.json

@@ -2344,5 +2344,9 @@
     "show-address-qr": "Show address QR",
     "scan-sync-code-placeholder": "cs2:4FH...",
     "visit-dapp": "Visit dApp",
-    "disconnect-dapp": "Disconnect dApp"
+    "disconnect-dapp": "Disconnect dApp",
+    "edit-account": "Edit account",
+    "share-account": "Share account",
+    "remove-account": "Remove account",
+    "select-another-account": "Select another account"
 }