feat: show swap proposal exchange rate (#22078)

Signed-off-by: Brian Sztamfater <[email protected]>

Author: briansztamfater

src/status_im/contexts/wallet/swap/setup_swap/style.cljs

@@ -1,4 +1,5 @@
-(ns status-im.contexts.wallet.swap.setup-swap.style)
+(ns status-im.contexts.wallet.swap.setup-swap.style
+  (:require [quo.foundations.colors :as colors]))
 
 (def container
   {:flex 1})
@@ -40,3 +41,22 @@
   {:height     :auto
    :min-height 40
    :max-height 62})
+
+(defn exchange-rate-loader
+  [theme]
+  {:margin-top       16
+   :width            72
+   :height           14
+   :border-radius    6
+   :background-color (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)})
+
+(def exchange-rate-container
+  {:margin-top     16
+   :flex-direction :row})
+
+(def exchange-rate-crypto-label
+  {:color colors/neutral-50})
+
+(defn exchange-rate-fiat-label
+  [theme]
+  {:color (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)})

src/status_im/contexts/wallet/swap/setup_swap/view.cljs

@@ -343,6 +343,33 @@
                           (= (:symbol token)
                              (:symbol asset-to-pay)))}]))
 
+(defn- swap-exchange-rate-view
+  []
+  (let [theme                     (quo.theme/use-theme)
+        asset-to-pay              (rf/sub [:wallet/swap-asset-to-pay])
+        asset-to-receive          (rf/sub [:wallet/swap-asset-to-receive])
+        swap-exchange-rate-crypto (rf/sub [:wallet/swap-exchange-rate-crypto])
+        swap-exchange-rate-fiat   (rf/sub [:wallet/swap-exchange-rate-fiat])
+        loading-swap-proposal?    (rf/sub [:wallet/swap-loading-swap-proposal?])]
+    (cond
+      loading-swap-proposal?
+      [rn/view {:style (style/exchange-rate-loader theme)}]
+      swap-exchange-rate-crypto
+      [rn/view {:style style/exchange-rate-container}
+       [quo/text
+        {:weight :medium
+         :size   :paragraph-2
+         :style  style/exchange-rate-crypto-label}
+        (i18n/label :t/swap-exchange-rate-in-crypto
+                    {:receive-token-symbol (:symbol asset-to-receive)
+                     :exchange-rate        swap-exchange-rate-crypto
+                     :pay-token-symbol     (:symbol asset-to-pay)})]
+       [quo/text
+        {:weight :medium
+         :size   :paragraph-2
+         :style  (style/exchange-rate-fiat-label theme)}
+        (str " (" swap-exchange-rate-fiat ")")]])))
+
 (defn view
   []
   (let [[pay-input-state set-pay-input-state]       (rn/use-state controlled-input/init-state)
@@ -495,7 +522,7 @@
        :params        {:show-account-balances? true
                        :asset-symbol           (:symbol asset-to-pay)
                        :network                network}}]
-     [rn/view {:style style/inputs-container}
+     [rn/scroll-view {:style style/inputs-container}
       [pay-token-input
        {:input-state      pay-input-state
         :on-max-press     on-max-press
@@ -514,7 +541,8 @@
       [receive-token-input
        {:input-focused? (not pay-input-focused?)
         :on-token-press #(rf/dispatch [:show-bottom-sheet {:content receive-token-bottom-sheet}])
-        :on-input-focus #(set-pay-input-focused? false)}]]
+        :on-input-focus #(set-pay-input-focused? false)}]
+      [swap-exchange-rate-view]]
      [rn/view {:style style/footer-container}
       (when-not loading-swap-proposal? [alert-banner {:pay-input-error? pay-input-error?}])
       (when (or loading-swap-proposal? swap-proposal)

src/status_im/subs/wallet/swap.cljs

@@ -333,3 +333,43 @@
                           :token            token-for-fees
                           :prices-per-token prices-per-token})]
      fee-in-fiat)))
+
+(rf/reg-sub
+ :wallet/swap-exchange-rate-crypto
+ :<- [:wallet/swap-proposal-amount-in]
+ :<- [:wallet/swap-asset-to-pay]
+ :<- [:wallet/swap-proposal-amount-out]
+ :<- [:wallet/swap-asset-to-receive]
+ (fn [[amount-in asset-to-pay amount-out asset-to-receive]]
+   (let [pay-token-decimals     (:decimals asset-to-pay)
+         receive-token-decimals (:decimals asset-to-receive)
+         amount-in-num          (some-> amount-in
+                                        (number/hex->whole pay-token-decimals)
+                                        (number/to-fixed pay-token-decimals)
+                                        (money/->bignumber))
+         amount-out-num         (some-> amount-out
+                                        (number/hex->whole receive-token-decimals)
+                                        (number/to-fixed receive-token-decimals)
+                                        (money/->bignumber))
+         exchange-rate          (when (and amount-in-num amount-out-num)
+                                  (money/div amount-in-num amount-out-num))
+         display-decimals       (min pay-token-decimals
+                                     constants/min-token-decimals-to-display)]
+     (when exchange-rate
+       (number/to-fixed exchange-rate display-decimals)))))
+
+(rf/reg-sub
+ :wallet/swap-exchange-rate-fiat
+ :<- [:wallet/swap-exchange-rate-crypto]
+ :<- [:wallet/swap-asset-to-pay]
+ :<- [:profile/currency]
+ :<- [:profile/currency-symbol]
+ :<- [:wallet/prices-per-token]
+ (fn [[swap-exchange-rate asset-to-pay currency currency-symbol prices-per-token]]
+   (when swap-exchange-rate
+     (let [fiat-value (utils/calculate-token-fiat-value
+                       {:currency         currency
+                        :balance          swap-exchange-rate
+                        :token            asset-to-pay
+                        :prices-per-token prices-per-token})]
+       (utils/fiat-formatted-for-ui currency-symbol fiat-value)))))

translations/en.json

@@ -2566,6 +2566,7 @@
   "sun": "Sun",
   "swap": "Swap",
   "swap-details": "Swap details",
+  "swap-exchange-rate-in-crypto": "1 {{receive-token-symbol}} ≈ {{exchange-rate}} {{pay-token-symbol}}",
   "swap-failed": "Swap failed",
   "swapped-to": "Swapped {{pay-amount}} {{pay-token-symbol}} to {{receive-amount}} {{receive-token-symbol}}",
   "swapping-to": "Swapping {{pay-amount}} {{pay-token-symbol}} to {{receive-amount}} {{receive-token-symbol}}",