From 5bad8de8866ef18d93c4ad51e0724c6f17c7bfc8 Mon Sep 17 00:00:00 2001 From: Brian Sztamfater Date: Tue, 4 Jun 2024 17:41:35 -0300 Subject: [PATCH] feat(swap): implement select asset to pay screen (#20269) Signed-off-by: Brian Sztamfater --- .../contexts/wallet/account/view.cljs | 2 +- .../contexts/wallet/swap/events.cljs | 15 ++++-- .../swap/select_asset_to_pay/style.cljs | 11 +++++ .../wallet/swap/select_asset_to_pay/view.cljs | 49 +++++++++++++++++++ src/status_im/navigation/screens.cljs | 6 +++ translations/en.json | 1 + 6 files changed, 80 insertions(+), 4 deletions(-) create mode 100644 src/status_im/contexts/wallet/swap/select_asset_to_pay/style.cljs create mode 100644 src/status_im/contexts/wallet/swap/select_asset_to_pay/view.cljs diff --git a/src/status_im/contexts/wallet/account/view.cljs b/src/status_im/contexts/wallet/account/view.cljs index d06ff2e211..6c08f0f547 100644 --- a/src/status_im/contexts/wallet/account/view.cljs +++ b/src/status_im/contexts/wallet/account/view.cljs @@ -58,7 +58,7 @@ {:start-flow? true :flow-id :wallet-bridge-flow}])) :swap-action (when (ff/enabled? ::ff/wallet.swap) - #(rf/dispatch [:wallet/start-swap]))}]) + #(rf/dispatch [:wallet.swap/start]))}]) [quo/tabs {:style style/tabs :size 32 diff --git a/src/status_im/contexts/wallet/swap/events.cljs b/src/status_im/contexts/wallet/swap/events.cljs index 851936db6b..3cdd5e4ea1 100644 --- a/src/status_im/contexts/wallet/swap/events.cljs +++ b/src/status_im/contexts/wallet/swap/events.cljs @@ -1,10 +1,19 @@ (ns status-im.contexts.wallet.swap.events (:require [re-frame.core :as rf])) -(rf/reg-event-fx :wallet/start-swap +(rf/reg-event-fx :wallet.swap/start (fn [{:keys [_db]}] - {:fx [[:dispatch + {: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) + :fx [[:dispatch [:toasts/upsert {:id :swap-error :type :negative - :text "Swap is under construction"}]]]})) + :text "Not implemented yet"}]]]})) + +(rf/reg-event-fx :wallet.swap/clean-asset-to-pay + (fn [{:keys [db]}] + {:db (update-in db [:wallet :ui :swap] dissoc :asset-to-pay)})) diff --git a/src/status_im/contexts/wallet/swap/select_asset_to_pay/style.cljs b/src/status_im/contexts/wallet/swap/select_asset_to_pay/style.cljs new file mode 100644 index 0000000000..3b49c33885 --- /dev/null +++ b/src/status_im/contexts/wallet/swap/select_asset_to_pay/style.cljs @@ -0,0 +1,11 @@ +(ns status-im.contexts.wallet.swap.select-asset-to-pay.style + (:require [react-native.navigation :as navigation] + [react-native.platform :as platform])) + +(def container + {:flex 1 + :padding-top (when platform/android? (navigation/status-bar-height))}) + +(def search-input-container + {:padding-horizontal 20 + :padding-vertical 8}) diff --git a/src/status_im/contexts/wallet/swap/select_asset_to_pay/view.cljs b/src/status_im/contexts/wallet/swap/select_asset_to_pay/view.cljs new file mode 100644 index 0000000000..10879ddbdd --- /dev/null +++ b/src/status_im/contexts/wallet/swap/select_asset_to_pay/view.cljs @@ -0,0 +1,49 @@ +(ns status-im.contexts.wallet.swap.select-asset-to-pay.view + (:require + [quo.core :as quo] + [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.swap.select-asset-to-pay.style :as style] + [utils.i18n :as i18n] + [utils.re-frame :as rf])) + +(defn- search-input + [search-text on-change-text] + [rn/view {:style style/search-input-container} + [quo/input + {:small? true + :placeholder (i18n/label :t/search-assets) + :icon-name :i/search + :value search-text + :on-change-text on-change-text}]]) + +(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}]))] + [:<> + [search-input search-text on-change-text] + [asset-list/view + {:search-text search-text + :on-token-press on-token-press}]])) + +(defn view + [] + (let [[search-text set-search-text] (rn/use-state "") + on-change-text #(set-search-text %) + on-close (fn [] + (rf/dispatch [:wallet.swap/clean-asset-to-pay]) + (rf/dispatch [:navigate-back]))] + (rn/use-unmount (fn [] + (rf/dispatch [:wallet.swap/clean-asset-to-pay]))) + [rn/safe-area-view {:style style/container} + [account-switcher/view + {:on-press on-close + :switcher-type :select-account}] + [quo/page-top + {:title (i18n/label :t/select-asset-to-pay) + :title-accessibility-label :title-label}] + [assets-view search-text on-change-text]])) diff --git a/src/status_im/navigation/screens.cljs b/src/status_im/navigation/screens.cljs index 2f843e6729..1e6668ce88 100644 --- a/src/status_im/navigation/screens.cljs +++ b/src/status_im/navigation/screens.cljs @@ -108,6 +108,7 @@ [status-im.contexts.wallet.send.send-amount.view :as wallet-send-input-amount] [status-im.contexts.wallet.send.transaction-confirmation.view :as wallet-transaction-confirmation] [status-im.contexts.wallet.send.transaction-progress.view :as wallet-transaction-progress] + [status-im.contexts.wallet.swap.select-asset-to-pay.view :as wallet-swap-select-asset-to-pay] [status-im.contexts.wallet.wallet-connect.sign-message.view :as wallet-connect-sign-message] [status-im.navigation.options :as options] [status-im.navigation.transitions :as transitions])) @@ -488,6 +489,11 @@ {:modalPresentationStyle :overCurrentContext}) :component wallet-scan-address/view} + {:name :screen/wallet.swap-select-asset-to-pay + :options {:modalPresentationStyle :overCurrentContext + :insets {:top? true}} + :component wallet-swap-select-asset-to-pay/view} + {:name :scan-profile-qr-code :options (merge options/dark-screen diff --git a/translations/en.json b/translations/en.json index 8f9bd52ea3..0ca35c7e1d 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2529,6 +2529,7 @@ "address-copied": "Address copied", "no-dapps-description": "We want dApps!", "select-asset": "Select asset", + "select-asset-to-pay": "Select asset to pay", "send-limit": "Max: {{limit}}", "searching-for-activity": "Searching for activity...", "this-address-has-no-activity": "This address has no activity",