feat(swap): implement select asset to pay screen (#20269)

Signed-off-by: Brian Sztamfater <brian@status.im>

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

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

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

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

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

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",