status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Wallet: best route UI (#18266) 

* Wallet: best route UI
This commit is contained in:
Omar Basem 2023-12-22 09:40:43 +04:00 committed by GitHub
parent a4dc268bc3
commit 5eb0baa64d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 86 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/quo/components/wallet/network_bridge/style.cljs
View File

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

4
src/quo/components/wallet/network_bridge/view.cljs
View File

@ -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)

12
src/quo/components/wallet/network_link/view.cljs
View File

@ -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))

2
src/status_im/contexts/wallet/common/utils.cljs
View File

@ -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})

2
src/status_im/contexts/wallet/receive/view.cljs
View File

@ -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)))}])}]))

12
src/status_im/contexts/wallet/send/input_amount/view.cljs
View File

@ -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

26
src/status_im/contexts/wallet/send/routes/style.cljs Normal file
View File

@ -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})

32
src/status_im/contexts/wallet/send/routes/view.cljs Normal file
View File

@ -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}}]]])

4
src/status_im/core_spec.cljs
View File

@ -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]

6
translations/en.json
View File

@ -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"
}