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

feat(swap): implement network selection drawer

This commit is contained in:
Brian Sztamfater 2024-06-05 19:46:31 +02:00 committed by Ajay Sivan
parent 874906b11f
commit 17e6079205
No known key found for this signature in database
GPG Key ID: 5F9AC120AE59597A
7 changed files with 131 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/quo/components/list_items/network_list/view.cljs
View File

@ -44,13 +44,14 @@
[:label :string]
[:fiat-value :string]
[:token-value :string]
[:container-style {:optional true} [:maybe :map]]
[:customization-color {:optional true} [:maybe :schema.common/customization-color]]
[:state {:optional true} [:enum :pressed :active :disabled :default]]
[:on-press {:optional true} [:maybe fn?]]]]]
:any])
(defn- view-internal
[{:keys [on-press state customization-color]
[{:keys [on-press container-style state customization-color]
:as props
:or {customization-color :blue}}]
(let [theme (quo.theme/use-theme)
@ -59,7 +60,8 @@
on-press-out (rn/use-callback #(set-pressed false))
internal-state (if pressed? :pressed state)]
[rn/pressable
{:style (style/container internal-state customization-color theme)
{:style (merge (style/container internal-state customization-color theme)
container-style)
:on-press-in (when-not (= state :disabled) on-press-in)
:on-press-out (when-not (= state :disabled) on-press-out)
:on-press (when-not (= state :disabled) on-press)

3
src/status_im/constants.cljs
View File

@ -496,6 +496,9 @@
(def ^:const optimism-network-name :optimism)
(def ^:const arbitrum-network-name :arbitrum)
(def ^:const layer-1-network 1)
(def ^:const layer-2-network 2)
(def ^:const default-network-names [mainnet-network-name optimism-network-name arbitrum-network-name])
(def ^:const default-network-count (count default-network-names))

17
src/status_im/contexts/wallet/sheets/network_selection/style.cljs Normal file
View File

@ -0,0 +1,17 @@
(ns status-im.contexts.wallet.sheets.network-selection.style)
(defn network-list-container
[mainnet?]
{:margin-horizontal 8
:padding-vertical (when mainnet? 8)})
(def header-container
{:height 62
:padding-horizontal 20})
(def context-tag
{:margin-top 4})
(def divider-label
{:padding-top 0
:padding-bottom 0})

78
src/status_im/contexts/wallet/sheets/network_selection/view.cljs Normal file
View File

@ -0,0 +1,78 @@
(ns status-im.contexts.wallet.sheets.network-selection.view
(:require [quo.core :as quo]
[quo.foundations.resources :as quo.resources]
[react-native.core :as rn]
[status-im.constants :as constants]
[status-im.contexts.wallet.common.utils :as utils]
[status-im.contexts.wallet.sheets.network-selection.style :as style]
[utils.i18n :as i18n]
[utils.money :as money]
[utils.re-frame :as rf]))
(defn- network-item
[{:keys [network token on-select-network currency currency-symbol]}]
(let [{:keys [network-name
chain-id]} network
{:keys [balances-per-chain
decimals]} token
balance-for-chain (get balances-per-chain chain-id)
total-balance (money/token->unit (:raw-balance balance-for-chain) decimals)
fiat-value (utils/calculate-token-fiat-value
{:currency currency
:balance total-balance
:token token})
crypto-formatted (utils/get-standard-crypto-format token total-balance)
fiat-formatted (utils/get-standard-fiat-format crypto-formatted
currency-symbol
fiat-value)
token-symbol (:symbol token)
mainnet? (= network-name constants/mainnet-network-name)]
[quo/network-list
{:label (name network-name)
:network-image (quo.resources/get-network network-name)
:token-value (str crypto-formatted " " token-symbol)
:fiat-value fiat-formatted
:on-press #(on-select-network network)
:container-style (style/network-list-container mainnet?)}]))
(defn view
[{:keys [token on-select-network]}]
(let [{token-networks :networks
token-symbol :symbol} token
grouped-networks (group-by :layer
token-networks)
mainnet-network (first (get grouped-networks constants/layer-1-network))
layer-2-networks (get grouped-networks constants/layer-2-network)
currency (rf/sub [:profile/currency])
currency-symbol (rf/sub [:profile/currency-symbol])
render-fn (rn/use-callback (fn [network]
[network-item
{:network network
:token token
:on-select-network on-select-network
:currency currency
:currency-symbol currency-symbol}]))]
[:<>
[rn/view {:style style/header-container}
[quo/text
{:size :heading-2
:weight :semi-bold}
(i18n/label :t/select-network)]
[quo/context-tag
{:type :token
:size 24
:token token-symbol
:container-style style/context-tag}]]
(when mainnet-network
[network-item
{:network mainnet-network
:token token
:on-select-network on-select-network
:currency currency
:currency-symbol currency-symbol}])
[quo/divider-label {:container-style style/divider-label}
(i18n/label :t/layer-2)]
[rn/flat-list
{:data (vec layer-2-networks)
:render-fn render-fn
:scroll-enabled false}]]))

6
src/status_im/contexts/wallet/swap/events.cljs
View File

@ -6,8 +6,10 @@
{:fx [[:dispatch [:open-modal :screen/wallet.swap-select-asset-to-pay]]]}))
(rf/reg-event-fx :wallet.swap/select-asset-to-pay
(fn [{:keys [db]} token]
{:db (assoc-in db [:wallet :ui :swap :asset-to-pay] token)
(fn [{:keys [db]} [{:keys [token network]}]]
{:db (-> db
(assoc-in [:wallet :ui :swap :asset-to-pay] token)
(assoc-in [:wallet :ui :swap :network] network))
:fx [[:dispatch
[:toasts/upsert
{:id :swap-error

27
src/status_im/contexts/wallet/swap/select_asset_to_pay/view.cljs
View File

@ -4,6 +4,7 @@
[react-native.core :as rn]
[status-im.contexts.wallet.common.account-switcher.view :as account-switcher]
[status-im.contexts.wallet.common.asset-list.view :as asset-list]
[status-im.contexts.wallet.sheets.network-selection.view :as network-selection]
[status-im.contexts.wallet.swap.select-asset-to-pay.style :as style]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
@ -18,12 +19,32 @@
:value search-text
:on-change-text on-change-text}]])
(defn- open-network-selection-drawer
[token]
(rf/dispatch
[:show-bottom-sheet
{:content (fn []
[network-selection/view
{:token token
:on-select-network (fn [network]
(rf/dispatch [:hide-bottom-sheet])
(rf/dispatch
[:wallet.swap/select-asset-to-pay
{:token token
:network network
:stack-id
:screen/wallet.swap-select-asset-to-pay}]))}])}]))
(defn- assets-view
[search-text on-change-text]
(let [on-token-press (fn [token]
(rf/dispatch [:wallet.swap/select-asset-to-pay
{:token token
:stack-id :screen/wallet.swap-select-asset-to-pay}]))]
(let [token-networks (:networks token)]
(if (> (count token-networks) 1)
(open-network-selection-drawer token)
(rf/dispatch [:wallet.swap/select-asset-to-pay
{:token token
:network (first token-networks)
:stack-id :screen/wallet.swap-select-asset-to-pay}]))))]
[:<>
[search-input search-text on-change-text]
[asset-list/view

1
translations/en.json
View File

@ -2603,6 +2603,7 @@
"derivation-path-header": "Derivation path",
"derivation-path-desc": "Derivation paths are the routes your Status Wallet uses to generate addresses from your private key.",
"select-networks": "Select networks",
"select-network": "Select network",
"generating-keypair": "Generating key pair...",
"keypair-name": "Key pair name",
"keypair-name-description": "Name key pair for your own personal reference",