[#20720] feat: add ability to set currency from account Settings (#20772)

* [#20720] feat: add ability to set currency from account Settings

Author: mohsen-ghafouri

resources/images/tokens/mainnet/BTC.png

@@ -1,6 +1,7 @@
 (ns legacy.status-im.data-store.settings
   (:require
     [clojure.set :as set]
+    [clojure.string :as string]
     [legacy.status-im.data-store.visibility-status-updates :as visibility-status-updates]
     [utils.ethereum.eip.eip55 :as eip55]))
 
@@ -18,6 +19,13 @@
              {}
              pinned-mailservers))
 
+(defn rpc->currency
+  [currency]
+  (-> currency
+      (name)
+      (string/lower-case)
+      (keyword)))
+
 (defn rpc->settings
   [settings]
   (-> settings
@@ -26,13 +34,13 @@
       (update :wallet-legacy/visible-tokens rpc->visible-tokens)
       (update :pinned-mailservers rpc->pinned-mailservers)
       (update :link-previews-enabled-sites set)
-      (update :currency keyword)
+      (update :currency rpc->currency)
       (visibility-status-updates/<-rpc-settings)
       (set/rename-keys {:compressedKey :compressed-key
                         :emojiHash     :emoji-hash})))
 
 (defn rpc->setting-value
   [{:keys [name] :as setting}]
   (condp = name
-    :currency (update setting :value keyword)
+    :currency (update setting :value rpc->currency)
     setting))

resources/images/tokens/mainnet/[email protected]

@@ -1,5 +1,6 @@
 (ns legacy.status-im.multiaccounts.update.core
   (:require
+    [legacy.status-im.data-store.settings :as settings]
     [legacy.status-im.utils.deprecated-types :as types]
     [status-im.constants :as constants]
     [taoensso.timbre :as log]
@@ -81,7 +82,7 @@
   [{:keys [db] :as cofx} setting setting-value]
   (let [current-multiaccount (:profile/profile db)
         setting-value        (if (= :currency setting)
-                               (keyword setting-value)
+                               (settings/rpc->currency setting-value)
                                setting-value)
         db                   (case setting
                                :stickers/packs-pending
@@ -104,7 +105,9 @@
                                db)]
     {:db (if setting-value
            (assoc-in db [:profile/profile setting] setting-value)
-           (update db :profile/profile dissoc setting))}))
+           (update db :profile/profile dissoc setting))
+     :fx [(when (= setting :currency)
+            [:dispatch [:wallet/get-wallet-token-for-all-accounts]])]}))
 
 (rf/defn set-many-js
   [cofx settings-js]

resources/images/tokens/mainnet/[email protected]

@@ -10,6 +10,7 @@
     [quo.components.settings.settings-item.style :as style]
     [quo.components.tags.context-tag.view :as context-tag]
     [quo.components.tags.status-tags :as status-tags]
+    [quo.components.utilities.token.view :as token]
     [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
@@ -59,6 +60,7 @@
        :icon        [icon/icon image-props (style/color blur? theme)]
        :avatar      [user-avatar/user-avatar image-props]
        :icon-avatar [icon-avatar/icon-avatar image-props]
+       :token       [token/view image-props]
        nil)]))
 
 (defn tag-component

resources/images/ui2/[email protected]

@@ -94,3 +94,11 @@
  (fn [params]
    (doseq [param params]
      (call param))))
+
+(defn log-rpc-error
+  [_ [{:keys [event params]} error]]
+  (log/error (str "Failed to " event)
+             {:params params
+              :error  error}))
+
+(rf/reg-event-fx :log-rpc-error log-rpc-error)

resources/images/ui2/[email protected]

@@ -90,7 +90,10 @@
     :dark  (js/require "../resources/images/ui2/sweating-man-dark.png")}
    :no-pinned-messages
    {:light (js/require "../resources/images/ui2/no-pinned-messages-light.png")
-    :dark  (js/require "../resources/images/ui2/no-pinned-messages-dark.png")}})
+    :dark  (js/require "../resources/images/ui2/no-pinned-messages-dark.png")}
+   :no-assets
+   {:light (js/require "../resources/images/ui2/no-assets-light.png")
+    :dark  (js/require "../resources/images/ui2/no-assets-dark.png")}})
 
 (def mock-images
   {:bored-ape             (js/require "../resources/images/mock2/bored-ape.png")

resources/images/ui2/[email protected]

@@ -586,6 +586,8 @@
 
 (def ^:const contact-item-height 56)
 
+(def ^:const currency-item-height 64)
+
 (def ^:const slippages [0.1 0.5 1])
 (def ^:const default-slippage 0.5)
 (def ^:const max-recommended-slippage 5)

resources/images/ui2/[email protected]

@@ -95,6 +95,7 @@
            [:dispatch-later [{:ms 1500 :dispatch [:profile.login/non-critical-initialization]}]]
            [:dispatch [:network/check-expensive-connection]]
            [:profile.settings/get-profile-picture key-uid]
+           [:settings/get-currencies]
            (when (ff/enabled? ::ff/wallet.wallet-connect)
              [:dispatch [:wallet-connect/init]])
            (when notifications-enabled?

src/legacy/status_im/data_store/settings.cljs

@@ -151,3 +151,8 @@
           [{:method     "settings_mnemonicWasShown"
             :on-success #(log/debug "mnemonic was marked as shown")
             :on-error   #(log/error "mnemonic was not marked as shown" %)}]]]}))
+
+(rf/reg-event-fx :profile.settings/update-currency
+ (fn [_ [currency]]
+   {:fx [[:dispatch [:profile.settings/profile-update :currency currency]]
+         [:dispatch [:wallet/get-wallet-token-for-all-accounts]]]}))

src/legacy/status_im/multiaccounts/update/core.cljs

@@ -85,13 +85,12 @@
      :image       :icon
      :blur?       true
      :action      :arrow}
-    (when config/show-not-implemented-features?
-      {:title       (i18n/label :t/language-and-currency)
-       :on-press    not-implemented/alert
-       :image-props :i/globe
-       :image       :icon
-       :blur?       true
-       :action      :arrow})]
+    {:title       (i18n/label :t/language-and-currency)
+     :on-press    #(rf/dispatch [:open-modal :screen/settings.language-and-currency])
+     :image-props :i/globe
+     :image       :icon
+     :blur?       true
+     :action      :arrow}]
    [(when config/show-not-implemented-features?
       {:title       (i18n/label :t/data-usage)
        :on-press    not-implemented/alert

src/legacy/status_im/utils/currency.cljs

@@ -0,0 +1,8 @@
+(ns status-im.contexts.settings.language-and-currency.currency.style)
+
+(def input-container
+  {:padding-horizontal 20
+   :padding-vertical   8})
+
+(def empty-results
+  {:margin-top 100})

src/quo/components/settings/settings_item/view.cljs

@@ -0,0 +1,20 @@
+(ns status-im.contexts.settings.language-and-currency.currency.utils
+  (:require [status-im.constants :as constants]))
+
+(defn make-currency-item
+  "This function generates props for quo/category component item"
+  [{:keys [currency selected-currency on-change]}]
+  {:title             (if (:token? currency)
+                        (:short-name currency)
+                        (str (:short-name currency) " · " (:symbol currency)))
+   :description       :text
+   :description-props {:text (:name currency)}
+   :container-style   {:height constants/currency-item-height}
+   :image             (when (:token? currency) :token)
+   :image-props       {:token (:id currency)
+                       :size  :size-20}
+   :action            :selector
+   :action-props      {:type      :radio
+                       :blur?     true
+                       :checked?  (= selected-currency (:id currency))
+                       :on-change #(on-change (:id currency))}})

src/status_im/common/json_rpc/events.cljs

@@ -0,0 +1,84 @@
+(ns status-im.contexts.settings.language-and-currency.currency.view
+  (:require [quo.core :as quo]
+            [react-native.core :as rn]
+            [status-im.common.resources :as resources]
+            [status-im.constants :as constants]
+            [status-im.contexts.settings.language-and-currency.currency.style :as style]
+            [status-im.contexts.settings.language-and-currency.currency.utils :as utils]
+            [status-im.contexts.settings.language-and-currency.data-store :as data-store]
+            [utils.debounce :as debounce]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn- navigate-back
+  []
+  (rf/dispatch [:navigate-back]))
+
+(defn- get-item-layout
+  [_ index]
+  #js {:length constants/currency-item-height
+       :offset (* constants/currency-item-height index)
+       :index  index})
+
+(defn- settings-category-view
+  [{:keys [title data]} _ _ {:keys [selected-currency on-currency-press]}]
+  [rn/delay-render
+   [quo/category
+    {:label     title
+     :data      (map (fn [currency]
+                       (utils/make-currency-item
+                        {:currency          currency
+                         :selected-currency selected-currency
+                         :on-change         on-currency-press}))
+                     data)
+     :blur?     true
+     :list-type :settings}]])
+
+(defn view
+  []
+  (let [[search-text set-search-text] (rn/use-state "")
+        on-currency-press             (rn/use-callback #(rf/dispatch [:profile.settings/update-currency
+                                                                      %]))
+        selected-currency             (rf/sub [:profile/currency])
+        currencies                    (rf/sub [:currencies/categorized search-text])
+        on-change-text                (rn/use-callback
+                                       (debounce/debounce
+                                        #(set-search-text %)
+                                        300))
+        formatted-data                (rn/use-memo
+                                       #(data-store/get-formatted-currency-data currencies)
+                                       [search-text currencies])]
+    [quo/overlay
+     {:type       :shell
+      :top-inset? true}
+     [quo/page-nav
+      {:background :blur
+       :icon-name  :i/arrow-left
+       :on-press   navigate-back}]
+     [quo/page-top
+      {:title (i18n/label :t/currency)}]
+     [quo/input
+      {:small?          true
+       :blur?           true
+       :container-style style/input-container
+       :placeholder     (i18n/label :t/search-currencies)
+       :icon-name       :i/search
+       :on-change-text  on-change-text}]
+     (when (zero? (:total currencies))
+       [quo/empty-state
+        {:title           (i18n/label :t/no-result)
+         :image           (resources/get-themed-image :no-assets :dark)
+         :container-style style/empty-results
+         :description     (i18n/label :t/try-with-different-currency)}])
+     [rn/flat-list
+      {:data                            formatted-data
+       :render-data                     {:selected-currency selected-currency
+                                         :on-currency-press on-currency-press}
+       :render-fn                       settings-category-view
+       :get-item-layout                 get-item-layout
+       :initial-num-to-render           14
+       :max-to-render-per-batch         20
+       :scroll-event-throttle           16
+       :shows-vertical-scroll-indicator false
+       :bounces                         false
+       :over-scroll-mode                :never}]]))

src/status_im/common/resources.cljs

@@ -0,0 +1,30 @@
+(ns status-im.contexts.settings.language-and-currency.data-store
+  (:require [clojure.set :as set]
+            [utils.i18n :as i18n]))
+
+(defn rpc->currency
+  [currency]
+  (some-> currency
+          (dissoc :unicode)
+          (set/rename-keys
+           {:shortName :short-name
+            :isPopular :popular?
+            :isToken   :token?})
+          (update :id keyword)))
+
+(defn rpc->currencies
+  [currencies]
+  (map rpc->currency currencies))
+
+(defn get-formatted-currency-data
+  [{:keys [popular crypto other]}]
+  (concat
+   (when (seq popular)
+     [{:title (i18n/label :t/popular-currencies)
+       :data  popular}])
+   (when (seq crypto)
+     [{:title (i18n/label :t/crypto)
+       :data  crypto}])
+   (when (seq other)
+     [{:title (i18n/label :t/all-currencies)
+       :data  other}])))