From a2794a120abb7fef513d3a5f44783b01c2e243e3 Mon Sep 17 00:00:00 2001 From: Omar Basem Date: Fri, 13 Oct 2023 17:19:14 +0400 Subject: [PATCH] Wallet: Account Options (#17612) * wallet: account options --- .../drawers/drawer_top/component_spec.cljs | 2 +- .../components/drawers/drawer_top/view.cljs | 8 ++--- .../components/list_items/account/view.cljs | 11 +++++++ .../contexts/wallet/account/view.cljs | 32 ++++++++++++++++++- .../contexts/wallet/common/temp.cljs | 23 +++++++++++++ translations/en.json | 6 +++- 6 files changed, 75 insertions(+), 7 deletions(-) diff --git a/src/quo2/components/drawers/drawer_top/component_spec.cljs b/src/quo2/components/drawers/drawer_top/component_spec.cljs index 537b9fcccc..7c8f769602 100644 --- a/src/quo2/components/drawers/drawer_top/component_spec.cljs +++ b/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")) diff --git a/src/quo2/components/drawers/drawer_top/view.cljs b/src/quo2/components/drawers/drawer_top/view.cljs index 6ac0d779f1..7222541c3e 100644 --- a/src/quo2/components/drawers/drawer_top/view.cljs +++ b/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)} - (str (subs (name network) 0 3) ":")]) + :style (style/network-text-color (:name network))} + (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? diff --git a/src/quo2/components/list_items/account/view.cljs b/src/quo2/components/list_items/account/view.cljs index fe69d826a5..d477d53407 100644 --- a/src/quo2/components/list_items/account/view.cljs +++ b/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 diff --git a/src/status_im2/contexts/wallet/account/view.cljs b/src/status_im2/contexts/wallet/account/view.cljs index bd71e06062..ec6b04b254 100644 --- a/src/status_im2/contexts/wallet/account/view.cljs +++ b/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}] diff --git a/src/status_im2/contexts/wallet/common/temp.cljs b/src/status_im2/contexts/wallet/common/temp.cljs index 7fc960b43b..308d80b9fe 100644 --- a/src/status_im2/contexts/wallet/common/temp.cljs +++ b/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}]}]) diff --git a/translations/en.json b/translations/en.json index 438fe4d457..763a50bf32 100644 --- a/translations/en.json +++ b/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" }