Chore(wallet): add bridge token page (#18560)

src/quo/components/list_items/network_list/view.cljs

@@ -45,7 +45,7 @@
       [:fiat-value :string]
       [:token-value :string]
       [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
-      [:state [:enum :pressed :active :default]]
+      [:state {:optional true} [:enum :pressed :active :default]]
       [:on-press {:optional true} [:maybe fn?]]
       [:theme :schema.common/theme]]]]
    :any])

src/status_im/contexts/wallet/account/bridge/view.cljs

@@ -13,6 +13,14 @@
   [item]
   {:source (quo.resources/get-network (:network-name item))})
 
+(defn- bridge-token-component
+  []
+  (fn [token]
+    (let [on-press #(rf/dispatch [:wallet/select-bridge-to
+                                  {:token    token
+                                   :stack-id :wallet-bridge}])]
+      [quo/token-network (assoc token :on-press on-press)])))
+
 (defn view
   []
   (let [networks       (rf/sub [:wallet/network-details])
@@ -30,5 +38,5 @@
        :placeholder     (i18n/label :t/search-assets)}]
      [rn/flat-list
       {:data                    (temp/bridge-token-list networks-logos)
-       :render-fn               quo/token-network
+       :render-fn               bridge-token-component
        :content-container-style style/list-content-container}]]))

src/status_im/contexts/wallet/account/bridge_to/style.cljs

@@ -0,0 +1,9 @@
+(ns status-im.contexts.wallet.account.bridge-to.style)
+
+(def header-container
+  {:padding-horizontal 20
+   :padding-vertical   12})
+
+(def content-container
+  {:padding-horizontal 8})
+

src/status_im/contexts/wallet/account/bridge_to/view.cljs

@@ -0,0 +1,64 @@
+(ns status-im.contexts.wallet.account.bridge-to.view
+  (:require
+    [clojure.string :as string]
+    [quo.core :as quo]
+    [quo.foundations.resources :as quo.resources]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]
+    [status-im.contexts.wallet.account.bridge-to.style :as style]
+    [status-im.contexts.wallet.common.account-switcher.view :as account-switcher]
+    [status-im.contexts.wallet.common.utils :as utils]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
+
+(defn- bridge-token-component
+  []
+  (fn [{:keys [chain-id network-name]} token]
+    (let [network           (rf/sub [:wallet/network-details-by-chain-id chain-id])
+          currency          (rf/sub [:profile/currency])
+          currency-symbol   (rf/sub [:profile/currency-symbol])
+          all-balances      (:balances-per-chain token)
+          balance-for-chain (utils/get-balance-for-chain all-balances chain-id)
+          crypto-formatted  (or (:balance balance-for-chain) "0.00")
+          fiat-value        (utils/token-fiat-value currency
+                                                    (or (:balance balance-for-chain) 0)
+                                                    token)
+          fiat-formatted    (utils/get-standard-fiat-format crypto-formatted currency-symbol fiat-value)]
+      [quo/network-list
+       {:label         (name network-name)
+        :network-image (quo.resources/get-network (:network-name network))
+        :token-value   (str crypto-formatted " " (:symbol token))
+        :fiat-value    fiat-formatted}])))
+
+(defn- view-internal
+  []
+  (let [send-bridge-data (rf/sub [:wallet/wallet-send])
+        network-details  (rf/sub [:wallet/network-details])
+        account          (rf/sub [:wallet/current-viewing-account])
+        token            (:token send-bridge-data)
+        token-symbol     (:symbol token)
+        tokens           (:tokens account)
+        mainnet          (first network-details)
+        layer-2-networks (rest network-details)
+        account-token    (some #(when (= token-symbol (:symbol %)) %) tokens)]
+
+
+    [rn/view
+     [account-switcher/view
+      {:on-press            #(rf/dispatch [:navigate-back-within-stack :wallet-bridge-to])
+       :icon-name           :i/arrow-left
+       :accessibility-label :top-bar}]
+     [quo/text-combinations
+      {:container-style style/header-container
+       :title           (i18n/label :t/bridge-to {:name (string/upper-case (str (:label token)))})}]
+     [rn/view style/content-container
+      [bridge-token-component (assoc mainnet :network-name :t/mainnet) account-token]]
+
+     [quo/divider-label (i18n/label :t/layer-2)]
+     [rn/flat-list
+      {:data                    layer-2-networks
+       :render-fn               (fn [network]
+                                  [bridge-token-component network account-token])
+       :content-container-style style/content-container}]]))
+
+(def view (quo.theme/with-theme view-internal))

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

@@ -52,6 +52,7 @@
     :fiat-value          "€0.00"
     :networks            networks-list
     :state               :default
+    :symbol              "STT"
     :customization-color :blue}
    {:token               :eth
     :label               "Ethereum"
@@ -59,6 +60,7 @@
     :fiat-value          "€0.00"
     :networks            networks-list
     :state               :default
+    :symbol              "ETH"
     :customization-color :blue}
    {:token               :dai
     :label               "Dai"
@@ -66,6 +68,7 @@
     :fiat-value          "€0.00"
     :networks            networks-list
     :state               :default
+    :symbol              "DAI"
     :customization-color :blue}])
 
 (def secret-phrase

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

@@ -106,6 +106,16 @@
         total-units-in-all-chains (total-token-units-in-all-chains token)]
     (money/crypto->fiat total-units-in-all-chains price)))
 
+(defn token-fiat-value
+  "Returns the fiat value for a single token on a given network."
+  [currency raw-balance {:keys [market-values-per-currency]}]
+  (let [price (or (get-in market-values-per-currency
+                          [currency :price])
+                  (get-in market-values-per-currency
+                          [constants/profile-default-currency :price])
+                  0)]
+    (money/crypto->fiat raw-balance price)))
+
 (defn calculate-balance-for-account
   [currency {:keys [tokens] :as _account}]
   (->> tokens
@@ -231,3 +241,7 @@
   [input-string]
   (let [split-result (string/split input-string #"0x")]
     [(first split-result) (str "0x" (second split-result))]))
+
+(defn get-balance-for-chain
+  [data chain-id]
+  (some #(when (= chain-id (:chain-id %)) %) (vals data)))

src/status_im/contexts/wallet/events.cljs

@@ -178,6 +178,11 @@
                                     (first derived-address-details)]))]
      {:fx [[:dispatch [:wallet/create-derived-addresses account-details on-success]]]})))
 
+(rf/reg-event-fx :wallet/select-bridge-to
+ (fn [{:keys [db]} [{:keys [token stack-id]}]]
+   {:db (assoc-in db [:wallet :ui :send :token] token)
+    :fx [[:navigate-to-within-stack [:wallet-bridge-to stack-id]]]}))
+
 (rf/reg-event-fx
  :wallet/get-ethereum-chains
  (fn [_]

src/status_im/navigation/screens.cljs

@@ -47,6 +47,7 @@
     [status-im.contexts.syncing.scan-sync-code-page.view :as scan-sync-code-page]
     [status-im.contexts.syncing.setup-syncing.view :as settings-setup-syncing]
     [status-im.contexts.syncing.syncing-devices-list.view :as settings-syncing]
+    [status-im.contexts.wallet.account.bridge-to.view :as bridge-to]
     [status-im.contexts.wallet.account.bridge.view :as bridge]
     [status-im.contexts.wallet.account.view :as wallet-accounts]
     [status-im.contexts.wallet.add-address-to-watch.confirm-address.view :as confirm-address-to-watch]
@@ -322,6 +323,10 @@
                  :modalPresentationStyle :overCurrentContext}
      :component bridge/view}
 
+    {:name      :wallet-bridge-to
+     :options   {:insets {:top? true}}
+     :component bridge-to/view}
+
     {:name      :wallet-edit-derivation-path
      :component wallet-edit-derivation-path/view}
 

translations/en.json

@@ -2324,6 +2324,7 @@
     "empty-tab-description": "C'mon do something...",
     "buy": "Buy",
     "bridge": "Bridge",
+    "bridge-to": "Bridge {{name}} to",
     "on-device": "On device",
     "on-keycard": "On Keycard",
     "keypair-title": "{{name}}'s default keypair",