Skip to content

Commit

Permalink
[Feature] Wallet - Account Switcher for send flow (#18100)
Browse files Browse the repository at this point in the history 
This commit:

- adds another variant ("Select account" bottom sheet) of the account switcher for wallet - send flow
- adds watch-only? key in the account to prevent repetitive account type checks across the codebase

Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
  • Loading branch information
@smohamedjavid
smohamedjavid authored Dec 13, 2023
1 parent 879a82c commit b668e4d
Show file tree
Hide file tree
Showing 14 changed files with 342 additions and 114 deletions.
17 changes: 10 additions & 7 deletions src/quo/components/drawers/drawer_top/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
[react-native.core :as rn]
[utils.i18n :as i18n]))

(def ^:private left-image-supported-types #{:account :keypair :default-keypair})

(defn- left-image
[{:keys [type customization-color account-avatar-emoji icon-avatar profile-picture]}]
(case type
Expand Down Expand Up @@ -165,13 +167,14 @@
button-disabled? account-avatar-emoji customization-color icon-avatar
profile-picture keycard? networks label]}]
[rn/view {:style style/container}
[rn/view {:style style/left-container}
[left-image
{:type type
:customization-color customization-color
:account-avatar-emoji account-avatar-emoji
:icon-avatar icon-avatar
:profile-picture profile-picture}]]
(when (left-image-supported-types type)
[rn/view {:style style/left-container}
[left-image
{:type type
:customization-color customization-color
:account-avatar-emoji account-avatar-emoji
:icon-avatar icon-avatar
:profile-picture profile-picture}]])
[rn/view {:style style/body-container}
[left-title
{:type type
Expand Down
10 changes: 8 additions & 2 deletions src/status_im2/common/data_store/wallet.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@
[ids]
(string/join constants/chain-id-separator ids))

(defn add-keys-to-account
[account]
(assoc account :watch-only? (= (:type account) :watch)))

(defn rpc->account
[account]
(-> account
Expand All @@ -25,7 +29,8 @@
(update :prod-preferred-chain-ids chain-ids-string->set)
(update :test-preferred-chain-ids chain-ids-string->set)
(update :type keyword)
(update :color #(if (seq %) (keyword %) constants/account-default-customization-color))))
(update :color #(if (seq %) (keyword %) constants/account-default-customization-color))
add-keys-to-account))

(defn rpc->accounts
[accounts]
Expand All @@ -40,7 +45,8 @@
:test-preferred-chain-ids :testPreferredChainIds
:color :colorId})
(update :prodPreferredChainIds chain-ids-set->string)
(update :testPreferredChainIds chain-ids-set->string)))
(update :testPreferredChainIds chain-ids-set->string)
(dissoc :watch-only?)))

(defn <-rpc
[network]
Expand Down
5 changes: 2 additions & 3 deletions src/status_im2/contexts/wallet/account/tabs/about/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,8 @@
(defn view
[]
(let [{:keys [customization-color] :as profile} (rf/sub [:profile/profile-with-image])
{:keys [type address path]} (rf/sub [:wallet/current-viewing-account])
networks (rf/sub [:wallet/network-details])
watch-only? (= type :watch)]
{:keys [address path watch-only?]} (rf/sub [:wallet/current-viewing-account])
networks (rf/sub [:wallet/network-details])]
[rn/view {:style style/about-tab}
[quo/data-item
{:description :default
Expand Down
1 change: 1 addition & 0 deletions src/status_im2/contexts/wallet/account/tabs/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
(case selected-tab
:assets [rn/flat-list
{:render-fn token-value/view
:style {:flex 1}
:data tokens
:content-container-style {:padding-horizontal 8}}]
:collectibles [collectibles/view]
Expand Down
3 changes: 1 addition & 2 deletions src/status_im2/contexts/wallet/account/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,7 @@
[]
(let [selected-tab (reagent/atom first-tab-id)]
(fn []
(let [{:keys [name color balance type]} (rf/sub [:wallet/current-viewing-account])
watch-only? (= type :watch)]
(let [{:keys [name color balance watch-only?]} (rf/sub [:wallet/current-viewing-account])]
[rn/view {:style {:flex 1}}
[account-switcher/view {:on-press #(rf/dispatch [:wallet/close-account-page])}]
[quo/account-overview
Expand Down
19 changes: 15 additions & 4 deletions src/status_im2/contexts/wallet/common/account_switcher/view.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,26 @@
(ns status-im2.contexts.wallet.common.account-switcher.view
(:require [quo.core :as quo]
[status-im2.contexts.wallet.common.sheets.account-options.view :as account-options]
[status-im2.contexts.wallet.common.sheets.select-account.view :as select-account]
[utils.re-frame :as rf]))

(defn get-bottom-sheet-args
[switcher-type]
(case switcher-type
:account-options {:content account-options/view
:hide-handle? true}
:select-account {:content select-account/view}
nil))

(defn view
[{:keys [on-press accessibility-label] :or {accessibility-label :top-bar}}]
[{:keys [on-press accessibility-label icon-name switcher-type]
:or {icon-name :i/close
accessibility-label :top-bar
switcher-type :account-options}}]
(let [{:keys [color emoji]} (rf/sub [:wallet/current-viewing-account])
networks (rf/sub [:wallet/network-details])]
[quo/page-nav
{:icon-name :i/close
{:icon-name icon-name
:background :blur
:on-press on-press
:accessibility-label accessibility-label
Expand All @@ -17,6 +29,5 @@
:right-side :account-switcher
:account-switcher {:customization-color color
:on-press #(rf/dispatch [:show-bottom-sheet
{:content account-options/view
:hide-handle? true}])
(get-bottom-sheet-args switcher-type)])
:emoji emoji}}]))
4 changes: 4 additions & 0 deletions src/status_im2/contexts/wallet/common/sheets/select_account/style.cljs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
(ns status-im2.contexts.wallet.common.sheets.select-account.style)

(def list-container
{:margin-horizontal 8})
33 changes: 33 additions & 0 deletions src/status_im2/contexts/wallet/common/sheets/select_account/view.cljs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
(ns status-im2.contexts.wallet.common.sheets.select-account.view
(:require [quo.core :as quo]
quo.theme
[react-native.gesture :as gesture]
[status-im2.contexts.wallet.common.sheets.select-account.style :as style]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))

(defn- render-account-item
[{:keys [color address] :as account} _ _ {:keys [selected-account-address]}]
[quo/account-item
{:type :default
:account-props (assoc account :customization-color color)
:customization-color color
:state (if (= address selected-account-address) :selected :default)
:on-press (fn []
(rf/dispatch [:wallet/switch-current-viewing-account address])
(rf/dispatch [:hide-bottom-sheet]))}])

(defn- view-internal
[]
(let [selected-account-address (rf/sub [:wallet/current-viewing-account-address])
accounts (rf/sub [:wallet/accounts-without-watched-accounts])]
[:<>
[quo/drawer-top {:title (i18n/label :t/select-account)}]
[gesture/flat-list
{:data accounts
:render-fn render-account-item
:render-data {:selected-account-address selected-account-address}
:content-container-style style/list-container
:shows-vertical-scroll-indicator false}]]))

(def view (quo.theme/with-theme view-internal))
33 changes: 27 additions & 6 deletions src/status_im2/contexts/wallet/send/input_amount/component_spec.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,33 @@
(fn [_] (val keyval)))))

(def sub-mocks
{:profile/profile {:currency :usd}
:wallet/network-details [{:source 525
:short-name "eth"
:network-name :ethereum
:chain-id 1
:related-chain-id 5}]})
{:profile/profile {:currency :usd}
:wallet/network-details [{:source 525
:short-name "eth"
:network-name :ethereum
:chain-id 1
:related-chain-id 5}]
:wallet/current-viewing-account {:path "m/44'/60'/0'/0/1"
:emoji "💎"
:key-uid "0x2f5ea39"
:address "0x1"
:wallet false
:name "Account One"
:type :generated
:watch-only? false
:chat false
:test-preferred-chain-ids #{5 420 421613}
:color :purple
:hidden false
:prod-preferred-chain-ids #{1 10 42161}
:network-preferences-names #{:ethereum :arbitrum :optimism}
:position 1
:clock 1698945829328
:created-at 1698928839000
:operable "fully"
:mixedcase-address "0x7bcDfc75c431"
:public-key "0x04371e2d9d66b82f056bc128064"
:removed false}})

(h/describe "Send > input amount screen"
(h/test "Default render"
Expand Down
13 changes: 5 additions & 8 deletions src/status_im2/contexts/wallet/send/input_amount/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
[react-native.core :as rn]
[react-native.safe-area :as safe-area]
[reagent.core :as reagent]
[status-im2.contexts.wallet.common.account-switcher.view :as account-switcher]
[status-im2.contexts.wallet.send.input-amount.style :as style]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
Expand Down Expand Up @@ -101,14 +102,10 @@
#(.remove app-keyboard-listener))))
[rn/view
{:style style/screen}
[quo/page-nav
{:background :blur
:icon-name :i/arrow-left
:on-press #(rf/dispatch [:navigate-back])
:right-side :account-switcher
:account-switcher {:customization-color :yellow
:emoji "🎮"
:on-press #(js/alert "Switch account")}}]
[account-switcher/view
{:icon-name :i/arrow-left
:on-press #(rf/dispatch [:navigate-back])
:switcher-type :select-account}]
[quo/token-input
{:container-style style/input-container
:token token
Expand Down
4 changes: 3 additions & 1 deletion src/status_im2/contexts/wallet/send/select_address/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,9 @@
{:content-container-style style/container
:keyboard-should-persist-taps :handled
:scroll-enabled false}
[account-switcher/view {:on-press on-close}]
[account-switcher/view
{:on-press on-close
:switcher-type :select-account}]
[quo/text-combinations
{:title (i18n/label :t/send-to)
:container-style style/title-container
Expand Down
5 changes: 4 additions & 1 deletion src/status_im2/contexts/wallet/send/select_asset/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,10 @@
{:content-container-style {:flex 1}
:keyboard-should-persist-taps :handled
:scroll-enabled false}
[account-switcher/view {:on-press on-close}]
[account-switcher/view
{:icon-name :i/arrow-left
:on-press on-close
:switcher-type :select-account}]
[quo/text-combinations
{:title (i18n/label :t/select-asset)
:container-style style/title-container
Expand Down
10 changes: 8 additions & 2 deletions src/status_im2/subs/wallet/wallet.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,10 +79,10 @@
:<- [:wallet/balances]
:<- [:wallet/tokens-loading?]
(fn [[accounts balances tokens-loading?]]
(mapv (fn [{:keys [color address type] :as account}]
(mapv (fn [{:keys [color address watch-only?] :as account}]
(assoc account
:customization-color color
:type (if (= type :watch) :watch-only :empty)
:type (if watch-only? :watch-only :empty)
:on-press #(rf/dispatch [:wallet/navigate-to-account address])
:loading? tokens-loading?
:balance (utils/prettify-balance (get balances address))))
Expand Down Expand Up @@ -124,6 +124,12 @@
(fn [[accounts current-viewing-account-address]]
(remove #(= (:address %) current-viewing-account-address) accounts)))

(rf/reg-sub
:wallet/accounts-without-watched-accounts
:<- [:wallet/accounts]
(fn [accounts]
(remove #(:watch-only? %) accounts)))

(defn- calc-token-value
[{:keys [market-values-per-currency] :as item} chain-id]
(let [crypto-value (utils/token-value-in-chain item chain-id)
Expand Down
Loading

0 comments on commit b668e4d

Please sign in to comment.