[Feature] Wallet - Display token price (#18438)

This commit adds a feature to display token prices for each token in the Wallet home and Account screens.

Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>

src/status_im/contexts/wallet/common/utils.cljs

@@ -221,29 +221,43 @@
     "<$0.01"
     (prettify-balance currency-symbol fiat-value)))
 
+(defn prettify-percentage-change
+  "Returns unsigned precentage"
+  [percentage]
+  (-> (if (number? percentage) percentage 0)
+      money/bignumber
+      money/absolute-value
+      (money/to-fixed 2)))
 
 (defn calculate-token-value
   "This function returns token values in the props of token-value (quo) component"
   [{:keys [token color currency currency-symbol]}]
-  (let [token-units                 (total-token-units-in-all-chains token)
-        fiat-value                  (total-token-fiat-value currency token)
-        market-values               (or (get-in token [:market-values-per-currency currency])
-                                        (get-in token
-                                                [:market-values-per-currency
-                                                 constants/profile-default-currency]))
-        {:keys [change-pct-24hour]} market-values
-        crypto-value                (get-standard-crypto-format token token-units)
-        fiat-value                  (get-standard-fiat-format crypto-value currency-symbol fiat-value)]
+  (let [token-units                       (total-token-units-in-all-chains token)
+        fiat-value                        (total-token-fiat-value currency token)
+        market-values                     (or (get-in token [:market-values-per-currency currency])
+                                              (get-in token
+                                                      [:market-values-per-currency
+                                                       constants/profile-default-currency]))
+        {:keys [price change-pct-24hour]} market-values
+        formatted-token-price             (prettify-balance currency-symbol price)
+        percentage-change                 (prettify-percentage-change change-pct-24hour)
+        crypto-value                      (get-standard-crypto-format token token-units)
+        fiat-value                        (get-standard-fiat-format crypto-value
+                                                                    currency-symbol
+                                                                    fiat-value)]
     {:token               (:symbol token)
      :token-name          (:name token)
      :state               :default
+     :metrics?            true
      :status              (cond
                             (pos? change-pct-24hour) :positive
                             (neg? change-pct-24hour) :negative
                             :else                    :empty)
      :customization-color color
-     :values              {:crypto-value crypto-value
-                           :fiat-value   fiat-value}}))
+     :values              {:crypto-value      crypto-value
+                           :fiat-value        fiat-value
+                           :fiat-change       formatted-token-price
+                           :percentage-change percentage-change}}))
 
 (defn get-multichain-address
   [networks address]

src/status_im/contexts/wallet/common/utils_test.cljs

@@ -106,3 +106,12 @@
 
       (is (= (utils/get-wallet-qr wallet-singlechain)
              "x000")))))
+
+(deftest test-prettify-percentage-change
+  (testing "prettify-percentage-change function"
+    (is (= (utils/prettify-percentage-change nil) "0.00"))
+    (is (= (utils/prettify-percentage-change "") "0.00"))
+    (is (= (utils/prettify-percentage-change 0.5) "0.50"))
+    (is (= (utils/prettify-percentage-change 1.113454) "1.11"))
+    (is (= (utils/prettify-percentage-change -0.35) "0.35"))
+    (is (= (utils/prettify-percentage-change -0.78234) "0.78"))))

src/utils/money.cljs

@@ -229,6 +229,11 @@
   [bn1 bn2]
   (.round (.dividedBy ^js bn1 bn2) 0))
 
+(defn absolute-value
+  [bn]
+  (when bn
+    (.absoluteValue ^js bn)))
+
 (defn format-amount
   "Format `amount` to thousands or millions. Return nil if `amount` is not truthy."
   [amount]