Wallet: best route UI (#18266)

* Wallet: best route UI

src/quo/components/wallet/network_bridge/style.cljs

@@ -4,7 +4,7 @@
 
 (defn container
   [network state theme]
-  {:width              136
+  {:flex               1
    :height             44
    :border-width       1
    :border-radius      12

src/quo/components/wallet/network_bridge/view.cljs

@@ -16,12 +16,12 @@
    [icon/icon :i/add-circle {:size 12 :no-color true}]])
 
 (defn view-internal
-  [{:keys [theme network status amount] :as args}]
+  [{:keys [theme network status amount container-style] :as args}]
   (let [network-text (if (= network :ethereum) "Mainnet" (string/capitalize (name network)))]
     (if (= status :add)
       [network-bridge-add args]
       [rn/view
-       {:style               (style/container network status theme)
+       {:style               (merge (style/container network status theme) container-style)
         :accessible          true
         :accessibility-label :container}
        (if (= status :loading)

src/quo/components/wallet/network_link/view.cljs

@@ -2,6 +2,7 @@
   (:require
     [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
+    [react-native.core :as rn]
     [react-native.svg :as svg]))
 
 (defn link-linear
@@ -76,10 +77,11 @@
      [svg/stop {:offset "1" :stop-color (colors/resolve-color source theme)}]]]])
 
 (defn- view-internal
-  [{:keys [shape] :as props}]
+  [{:keys [shape container-style] :as props}]
+  [rn/view {:style container-style}
    (case shape
      :linear [link-linear props]
      :1x     [link-1x props]
-    :2x     [link-2x props]))
+     :2x     [link-2x props])])
 
 (def view (quo.theme/with-theme view-internal))

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

@@ -109,7 +109,7 @@
       (str $ address))
     address))
 
-(def id-to-network
+(def id->network
   {constants/mainnet-chain-id  :ethereum
    constants/optimism-chain-id :optimism
    constants/arbitrum-chain-id :arbitrum})

src/status_im/contexts/wallet/receive/view.cljs

@@ -41,7 +41,7 @@
                      :selected-networks (set @selected-networks)
                      :on-save           (fn [chain-ids]
                                           (rf/dispatch [:hide-bottom-sheet])
-                                          (reset! selected-networks (map #(get utils/id-to-network %)
+                                          (reset! selected-networks (map #(get utils/id->network %)
                                                                          chain-ids)))}])}]))
 
 

src/status_im/contexts/wallet/send/input_amount/view.cljs

@@ -7,7 +7,9 @@
     [react-native.safe-area :as safe-area]
     [reagent.core :as reagent]
     [status-im.contexts.wallet.common.account-switcher.view :as account-switcher]
+    [status-im.contexts.wallet.common.utils :as utils]
     [status-im.contexts.wallet.send.input-amount.style :as style]
+    [status-im.contexts.wallet.send.routes.view :as routes]
     [utils.debounce :as debounce]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
@@ -103,7 +105,10 @@
                                        (nil? route)
                                        (empty? @input-value)
                                        (<= input-num-value 0)
-                                       (> input-num-value (:amount @current-limit)))]
+                                       (> input-num-value (:amount @current-limit)))
+            from-network              (utils/id->network (get-in route [:From :chainId]))
+            to-network                (utils/id->network (get-in route [:To :chainId]))
+            amount                    (str @input-value " " token-symbol)]
         (rn/use-effect
          (fn []
            (let [dismiss-keyboard-fn   #(when (= % "active") (rn/dismiss-keyboard!))
@@ -144,7 +149,10 @@
           (cond loading-suggested-routes?
                 [quo/text "Loading routes"]
                 (and (not loading-suggested-routes?) route)
-                [quo/text "Route found"]
+                [routes/view
+                 {:amount       amount
+                  :from-network from-network
+                  :to-network   to-network}]
                 (and (not loading-suggested-routes?) (nil? route))
                 [quo/text "Route not found"])]
          [quo/bottom-actions

src/status_im/contexts/wallet/send/routes/style.cljs

@@ -0,0 +1,26 @@
+(ns status-im.contexts.wallet.send.routes.style)
+
+(def routes-container
+  {:padding-horizontal 20
+   :padding-vertical   16
+   :width              "100%"
+   :height             "100%"})
+
+(def routes-header-container
+  {:flex-direction  :row
+   :justify-content :space-between})
+
+(def routes-inner-container
+  {:margin-top      8
+   :flex-direction  :row
+   :align-items     :center
+   :justify-content :space-between})
+
+(defn section-label
+  [margin-left]
+  {:flex        0.5
+   :margin-left margin-left})
+
+(def network-link
+  {:right   6
+   :z-index 1})

src/status_im/contexts/wallet/send/routes/view.cljs

@@ -0,0 +1,32 @@
+(ns status-im.contexts.wallet.send.routes.view
+  (:require
+    [quo.core :as quo]
+    [react-native.core :as rn]
+    [status-im.contexts.wallet.send.routes.style :as style]
+    [utils.i18n :as i18n]))
+
+(defn view
+  [{:keys [amount from-network to-network]}]
+  [rn/view {:style style/routes-container}
+   [rn/view {:style style/routes-header-container}
+    [quo/section-label
+     {:section         (i18n/label :t/from-label)
+      :container-style (style/section-label 0)}]
+    [quo/section-label
+     {:section         (i18n/label :t/to-label)
+      :container-style (style/section-label 64)}]]
+   [rn/view {:style style/routes-inner-container}
+    [quo/network-bridge
+     {:amount  amount
+      :network from-network
+      :status  :default}]
+    [quo/network-link
+     {:shape           :linear
+      :source          from-network
+      :destination     to-network
+      :container-style style/network-link}]
+    [quo/network-bridge
+     {:amount          amount
+      :network         to-network
+      :status          :default
+      :container-style {:right 12}}]]])

src/status_im/core_spec.cljs

@@ -4,7 +4,7 @@
     [status-im.contexts.chat.messages.content.audio.component-spec]
     [status-im.contexts.communities.actions.community-options.component-spec]
     [status-im.contexts.wallet.add-address-to-watch.component-spec]
-    [status-im.contexts.wallet.add-address-to-watch.confirm-address.component-spec]
+    [status-im.contexts.wallet.add-address-to-watch.confirm-address.component-spec]))
-    [status-im.contexts.wallet.send.input-amount.component-spec]))
 
   ;; [status-im.contexts.wallet.create-account.edit-derivation-path.component-spec]
+  ;; [status-im.contexts.wallet.send.input-amount.component-spec]

translations/en.json

@@ -2439,8 +2439,10 @@
     "copy-all-details": "Copy all details",
     "share-details": "Share details",
     "what-are-you-waiting-for": "What are you waiting for?",
-    "no-relevant-tokens": "No relevant tokens",
     "sending-with-elipsis": "Sending...",
     "transaction-confirmed": "Transaction confirmed!",
-    "transacation-finalised": "Transaction finalised!"
+    "transacation-finalised": "Transaction finalised!",
+    "no-relevant-tokens": "No relevant tokens",
+    "from-label": "From",
+    "to-label": "To"
 }