diff --git a/src/quo/components/wallet/network_bridge/style.cljs b/src/quo/components/wallet/network_bridge/style.cljs index 477a2c4e9e..82b5e2cfa6 100644 --- a/src/quo/components/wallet/network_bridge/style.cljs +++ b/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 diff --git a/src/quo/components/wallet/network_bridge/view.cljs b/src/quo/components/wallet/network_bridge/view.cljs index e2ad37ca82..6eda220e76 100644 --- a/src/quo/components/wallet/network_bridge/view.cljs +++ b/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) diff --git a/src/quo/components/wallet/network_link/view.cljs b/src/quo/components/wallet/network_link/view.cljs index 2b86328be3..b25d0e5e3e 100644 --- a/src/quo/components/wallet/network_link/view.cljs +++ b/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}] - (case shape - :linear [link-linear props] - :1x [link-1x props] - :2x [link-2x 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])]) (def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im/contexts/wallet/common/utils.cljs b/src/status_im/contexts/wallet/common/utils.cljs index 15dfd1394e..0bbbcfca27 100644 --- a/src/status_im/contexts/wallet/common/utils.cljs +++ b/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}) diff --git a/src/status_im/contexts/wallet/receive/view.cljs b/src/status_im/contexts/wallet/receive/view.cljs index 8f1b861a10..8f98397187 100644 --- a/src/status_im/contexts/wallet/receive/view.cljs +++ b/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)))}])}])) diff --git a/src/status_im/contexts/wallet/send/input_amount/view.cljs b/src/status_im/contexts/wallet/send/input_amount/view.cljs index 43d7dace14..fe7452808b 100644 --- a/src/status_im/contexts/wallet/send/input_amount/view.cljs +++ b/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 diff --git a/src/status_im/contexts/wallet/send/routes/style.cljs b/src/status_im/contexts/wallet/send/routes/style.cljs new file mode 100644 index 0000000000..e4b7300988 --- /dev/null +++ b/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}) diff --git a/src/status_im/contexts/wallet/send/routes/view.cljs b/src/status_im/contexts/wallet/send/routes/view.cljs new file mode 100644 index 0000000000..b4087e9988 --- /dev/null +++ b/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}}]]]) diff --git a/src/status_im/core_spec.cljs b/src/status_im/core_spec.cljs index 369de1e371..d0c97a98e3 100644 --- a/src/status_im/core_spec.cljs +++ b/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.send.input-amount.component-spec])) + [status-im.contexts.wallet.add-address-to-watch.confirm-address.component-spec])) ;; [status-im.contexts.wallet.create-account.edit-derivation-path.component-spec] + ;; [status-im.contexts.wallet.send.input-amount.component-spec] diff --git a/translations/en.json b/translations/en.json index 67cafea614..a0e77acd49 100644 --- a/translations/en.json +++ b/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" }