[#8348] [Multi-Account] Account overview + individual wallet UI

components/src/status_im/ui/components/react.cljs

@@ -299,17 +299,14 @@
     (let [props             (merge props
                                    {:background-color
                                     (case current-view
-                                      (:wallet
-                                       :wallet-send-transaction
+                                      (:wallet-send-transaction
                                        :wallet-request-transaction
                                        :wallet-send-assets
                                        :wallet-request-assets
                                        :choose-recipient
                                        :recent-recipients
                                        :wallet-send-transaction-request
                                        :contact-code
-                                       :wallet-modal
-                                       :wallet-onboarding-setup-modal
                                        :wallet-settings-hook)
                                       colors/blue
 
@@ -318,11 +315,9 @@
                                       "#2f3031"
 
                                       colors/white)})
-          bottom-background (when (#{:wallet
-                                     :recent-recipients
+          bottom-background (when (#{:recent-recipients
                                      :wallet-send-assets
-                                     :wallet-request-assets
-                                     :wallet-modal} current-view)
+                                     :wallet-request-assets} current-view)
                               [view {:background-color colors/white
                                      :position         :absolute
                                      :bottom           0

src/status_im/chat/commands/impl/transactions.cljs

@@ -17,7 +17,7 @@
             [status-im.ui.components.list.views :as list]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.svgimage :as svgimage]
-            [status-im.ui.screens.wallet.utils :as wallet.utils]
+            [status-im.wallet.utils :as wallet.utils]
             [status-im.utils.datetime :as datetime]
             [status-im.utils.money :as money]
             [status-im.utils.platform :as platform]

src/status_im/ethereum/tokens.cljs

@@ -535,6 +535,7 @@
 
    :custom []})
 
+;; TODO all these should be improved, we don't need to recalculate this each time, it can be done only once
 (defn tokens-for
   "makes sure all addresses are lower-case
    TODO: token list should be speced and not accept non-lower-cased addresses"

src/status_im/events.cljs

@@ -41,6 +41,9 @@
             [status-im.stickers.core :as stickers]
             [status-im.transport.core :as transport]
             [status-im.transport.message.core :as transport.message]
+            status-im.wallet.choose-recipient.core
+            status-im.wallet.collectibles.core
+            status-im.wallet.accounts.core
             [status-im.ui.components.bottom-sheet.core :as bottom-sheet]
             [status-im.ui.components.react :as react]
             [status-im.ui.screens.add-new.new-chat.db :as new-chat.db]
@@ -58,7 +61,9 @@
             [status-im.wallet.custom-tokens.core :as custom-tokens]
             [status-im.wallet.db :as wallet.db]
             [status-im.web3.core :as web3]
-            [taoensso.timbre :as log]))
+            [taoensso.timbre :as log]
+            [status-im.chat.commands.sending :as commands.sending]
+            [status-im.utils.money :as money]))
 
 ;; init module
 
@@ -1997,4 +2002,16 @@
 (re-frame/reg-fx
  :dismiss-keyboard
  (fn []
-   (react/dismiss-keyboard!)))
+   (react/dismiss-keyboard!)))
+
+(handlers/register-handler-fx
+ :wallet-send-request
+ (fn [{:keys [db] :as cofx} [_ public-key amount symbol decimals]]
+   (assert public-key)
+   (let [request-command (get-in db [:id->command ["request" #{:personal-chats}]])]
+     (fx/merge cofx
+               (chat/start-chat public-key nil)
+               (commands.sending/send public-key
+                                      request-command
+                                      {:asset  (name symbol)
+                                       :amount (str (money/internal->formatted amount symbol decimals))})))))

src/status_im/subs.cljs

@@ -30,7 +30,7 @@
             [status-im.ui.screens.mobile-network-settings.utils
              :as
              mobile-network-utils]
-            [status-im.ui.screens.wallet.utils :as wallet.utils]
+            [status-im.wallet.utils :as wallet.utils]
             [status-im.utils.build :as build]
             [status-im.utils.config :as config]
             [status-im.utils.datetime :as datetime]
@@ -1016,6 +1016,21 @@
          "0"))
      "...")))
 
+(re-frame/reg-sub
+ :wallet/sorted-chain-tokens
+ :<- [:wallet/all-tokens]
+ :<- [:ethereum/chain-keyword]
+ (fn [[all-tokens chain]]
+   (tokens/sorted-tokens-for all-tokens chain)))
+
+(re-frame/reg-sub
+ :wallet/grouped-chain-tokens
+ :<- [:wallet/sorted-chain-tokens]
+ :<- [:wallet/visible-tokens-symbols]
+ (fn [[all-tokens visible-tokens]]
+   (let [vt-set (set visible-tokens)]
+     (group-by :custom? (map #(assoc % :checked? (boolean (get vt-set (keyword (:symbol %))))) all-tokens)))))
+
 (re-frame/reg-sub
  :wallet/balance-loading?
  :<- [:wallet]
@@ -1053,6 +1068,30 @@
  (fn [[balance visible-assets]]
    (map #(assoc % :amount (get balance (:symbol %))) visible-assets)))
 
+(defn update-value [balance prices currency]
+  (fn [{:keys [symbol decimals] :as token}]
+    (let [price (get-in prices [symbol (-> currency :code keyword) :price])]
+      (assoc token
+             :price price
+             :value (when (and balance price)
+                      (-> (money/internal->formatted (get balance symbol) symbol decimals)
+                          (money/crypto->fiat price)
+                          (money/with-precision 2)
+                          str
+                          (i18n/format-currency (:code currency))))))))
+
+(re-frame/reg-sub
+ :wallet/visible-assets-with-values
+ :<- [:wallet/visible-assets-with-amount]
+ :<- [:prices]
+ :<- [:wallet/currency]
+ :<- [:balance]
+ (fn [[assets prices currency balance]]
+   (let [{:keys [tokens nfts]} (group-by #(if (:nft? %) :nfts :tokens) assets)
+         tokens-with-values (map (update-value balance prices currency) tokens)]
+     {:tokens tokens-with-values
+      :nfts   nfts})))
+
 (re-frame/reg-sub
  :wallet/transferrable-assets-with-amount
  :<- [:wallet/visible-assets-with-amount]

src/status_im/ui/components/icons/vector_icons.cljs

@@ -202,6 +202,8 @@
      :main-icons/wallet            (components.svg/slurp-svg "./resources/icons/main/wallet.svg")
      :main-icons/warning           (components.svg/slurp-svg "./resources/icons/main/warning.svg")
      :main-icons/wnode             (components.svg/slurp-svg "./resources/icons/main/mailserver.svg")
+     :main-icons/watch             (components.svg/slurp-svg "./resources/icons/main/watch.svg")
+     :main-icons/token             (components.svg/slurp-svg "./resources/icons/main/token.svg")
      ;; Tiny icons
      :tiny-icons/tiny-arrow-down   (components.svg/slurp-svg "./resources/icons/tiny/tiny_arrow_down.svg")
      :tiny-icons/tiny-check        (components.svg/slurp-svg "./resources/icons/tiny/tiny_check.svg")

src/status_im/ui/components/list_item/views.cljs

@@ -12,7 +12,7 @@
 
 ; theme - optional :default, :wallet
 
-(defn list-item [{:keys [title subtitle accessories image image-path type theme on-press error] :or {type :default theme :default}}]
+(defn list-item [{:keys [title subtitle accessories image image-path type theme on-press error content] :or {type :default theme :default}}]
   (let [small? (= :small type)]
     [react/touchable-highlight {:on-press on-press :disabled (not on-press)}
      [react/view {:style (styles/container small?)}
@@ -27,38 +27,45 @@
          [react/image {:source (utils.image/source image-path)
                        :style  (styles/photo 40)}]])
       ;;Title
-      [react/view {:style {:margin-left 16 :margin-right 16}}
-       [react/text {:style           (styles/title small? subtitle)
-                    :number-of-lines 1
-                    :ellipsize-mode  :tail}
-        title]
-       ;;Subtitle
-       (when subtitle
-         [react/text {:style           styles/subtitle
+      (when title
+        [react/view {:style {:margin-left 16 :margin-right 16}}
+         [react/text {:style           (styles/title small? subtitle)
                       :number-of-lines 1
                       :ellipsize-mode  :tail}
-          subtitle])]
-      ;;Accessories
+          title]
+         ;;Subtitle
+         (when subtitle
+           [react/text {:style           styles/subtitle
+                        :number-of-lines 1
+                        :ellipsize-mode  :tail}
+            subtitle])])
+      ;;Content
+      (when content
+        (if (vector? content)
+          content
+          [content]))
       [react/view {:flex 1}]
+      ;;Accessories
       (for [accessory accessories]
-        (with-meta
-          (cond
-            (= :chevron accessory)
-            [react/view
-             [icons/icon :main-icons/next {:color colors/gray-transparent-40}]]
-            (= :check accessory)
-            [react/view
-             [icons/icon :main-icons/check {:color colors/gray}]]
-            :else
-            [react/view {:padding-right 8 :flex-shrink 1}
-             (cond
-               (string? accessory)
-               [react/text {:style styles/accessory-text}
-                accessory]
-               (vector? accessory)
-               accessory
-               :else
-               [accessory])])
-          {:key accessory}))
+        (when-not (nil? accessory)
+          (with-meta
+            (cond
+              (= :chevron accessory)
+              [react/view
+               [icons/icon :main-icons/next {:color colors/gray-transparent-40}]]
+              (= :check accessory)
+              [react/view
+               [icons/icon :main-icons/check {:color colors/gray}]]
+              :else
+              [react/view {:margin-right 8 :flex-shrink 1}
+               (cond
+                 (string? accessory)
+                 [react/text {:style styles/accessory-text :number-of-lines 1}
+                  accessory]
+                 (vector? accessory)
+                 accessory
+                 :else
+                 [accessory])])
+            {:key accessory})))
       (when error
         [tooltip/tooltip error styles/error])]]))

src/status_im/ui/components/status_bar/view.cljs

@@ -71,6 +71,7 @@
     :wallet-onboarding-setup-modal   {:type :modal-wallet}
     :wallet-send-transaction-modal   {:type :modal-wallet}
     :wallet-settings-assets          {:type :wallet}
+    :wallet-account                  {:type :wallet}
     :wallet-add-custom-token         {:type :wallet}
     :wallet-sign-message-modal       {:type :modal-wallet}
     :wallet-settings-hook            {:type :wallet}

src/status_im/ui/screens/events.cljs

@@ -9,15 +9,6 @@
             status-im.web3.events
             status-im.ui.screens.add-new.new-chat.navigation
             status-im.ui.screens.profile.events
-            status-im.ui.screens.wallet.collectibles.events
-            status-im.ui.screens.wallet.send.events
-            status-im.ui.screens.wallet.request.events
-            status-im.ui.screens.wallet.choose-recipient.events
-            status-im.ui.screens.wallet.collectibles.cryptokitties.events
-            status-im.ui.screens.wallet.collectibles.cryptostrikers.events
-            status-im.ui.screens.wallet.collectibles.etheremon.events
-            status-im.ui.screens.wallet.collectibles.superrare.events
-            status-im.ui.screens.wallet.collectibles.kudos.events
             status-im.ui.screens.wallet.navigation
             status-im.utils.keychain.events
             [re-frame.core :as re-frame]
@@ -31,7 +22,6 @@
             [status-im.utils.handlers :as handlers]
             [status-im.utils.http :as http]
             [status-im.utils.utils :as utils]
-            [status-im.wallet.core :as wallet]
             [status-im.i18n :as i18n]
             [status-im.biometric-auth.core :as biometric-auth]
             [status-im.constants :as const]))

src/status_im/ui/screens/profile/user/views.cljs

@@ -104,8 +104,7 @@
                                                         :value   value}]))
 
 (defn- my-profile-settings [{:keys [seed-backed-up? mnemonic]}
-                            {:keys [settings] :as account}
-                            currency
+                            {:keys [settings]}
                             logged-in?
                             extensions]
   (let [show-backup-seed? (and (not seed-backed-up?) (not (string/blank? mnemonic)))
@@ -116,11 +115,6 @@
                                         :action-fn           #(re-frame/dispatch [:profile.ui/ens-names-button-pressed])
                                         :accessibility-label :ens-names-button}]
      [profile.components/settings-item-separator]
-     [profile.components/settings-item {:label-kw            :t/main-currency
-                                        :value               (:code currency)
-                                        :action-fn           #(re-frame/dispatch [:navigate-to :currency-settings])
-                                        :accessibility-label :currency-button}]
-     [profile.components/settings-item-separator]
      (when (and config/hardwallet-enabled?
                 platform/android?)
        [profile.components/settings-item {:label-kw            :t/status-keycard

src/status_im/ui/screens/routing/profile_stack.cljs

@@ -25,7 +25,6 @@
                      :edit-network
                      :log-level-settings
                      :fleet-settings
-                     :currency-settings
                      :mobile-network-settings
                      :backup-seed
                      :tribute-to-talk

src/status_im/ui/screens/routing/screens.cljs

@@ -54,13 +54,13 @@
             [status-im.ui.screens.stickers.views :as stickers]
             [status-im.ui.screens.wallet.collectibles.views :as collectibles]
             [status-im.ui.screens.wallet.components.views :as wallet.components]
-            [status-im.ui.screens.wallet.main.views :as wallet.main]
-            [status-im.ui.screens.wallet.onboarding.views :as wallet.onboarding]
             [status-im.ui.screens.wallet.request.views :as request]
             [status-im.ui.screens.wallet.send.views :as send]
             [status-im.ui.screens.wallet.settings.views :as wallet-settings]
             [status-im.ui.screens.wallet.transactions.views :as wallet-transactions]
-            [status-im.ui.screens.wallet.custom-tokens.views :as custom-tokens]))
+            [status-im.ui.screens.wallet.custom-tokens.views :as custom-tokens]
+            [status-im.ui.screens.wallet.accounts.views :as wallet.accounts]
+            [status-im.ui.screens.wallet.account.views :as wallet.account]))
 
 (def all-screens
   {:login                            login/login
@@ -102,10 +102,9 @@
    :tribute-learn-more               [:modal tr-to-talk/learn-more]
    :chat-modal                       [:modal chat/chat-modal]
    :show-extension-modal             [:modal extensions.module/show-extension-modal-view]
-   :wallet-onboarding-setup-modal    [:modal wallet.onboarding/modal]
-   :wallet                           wallet.main/wallet
+   :wallet                           wallet.accounts/accounts-overview
+   :wallet-account                   wallet.account/account
    :collectibles-list                collectibles/collectibles-list
-   :wallet-onboarding-setup          wallet.onboarding/screen
    :contact-code                     wallet.components/contact-code
    :wallet-send-transaction          send/send-transaction
    :recent-recipients                wallet.components/recent-recipients

src/status_im/ui/screens/routing/wallet_stack.cljs

@@ -3,6 +3,7 @@
 (def wallet-stack
   {:name    :wallet-stack
    :screens [:wallet
+             :wallet-account
              :collectibles-list
              :wallet-onboarding-setup
              :contact-code
@@ -25,5 +26,6 @@
              :extension-screen-holder
              :wallet-settings-assets
              :wallet-add-custom-token
-             :wallet-custom-token-details]
+             :wallet-custom-token-details
+             :currency-settings]
    :config  {:initialRouteName :wallet}})

src/status_im/ui/screens/signing/sheets.cljs

@@ -10,7 +10,7 @@
 (views/defview fee-bottom-sheet [fee-display-symbol]
   (views/letsubs [{gas-edit :gas gas-price-edit :gasPrice max-fee :max-fee} [:signing/edit-fee]]
     [react/view
-     [react/view {:style {:margin-horizontal 16 :margin-vertical 8}}
+     [react/view {:style {:margin-horizontal 16 :margin-top 8}}
       [react/text {:style {:typography :title-bold}} (i18n/label :t/network-fee)]
       [react/view {:style {:flex-direction :row :margin-top 8}}
        [react/view {:flex 1}
@@ -35,7 +35,7 @@
           :auto-focus      false}]]
        [react/view {:margin-top 58 :margin-left 10}
         [react/text (i18n/label :t/gwei)]]]
-      [react/view {:margin-vertical 28 :align-items :center}
+      [react/view {:margin-vertical 16 :align-items :center}
        [react/text {:style {:color colors/gray}} (i18n/label :t/wallet-transaction-total-fee)]
        [react/view {:height 8}]
        [react/nested-text {:style {:font-size 17}}