Assets to pay

src/status_im/contexts/wallet/sheets/select_asset/style.cljs

@@ -0,0 +1,11 @@
+(ns status-im.contexts.wallet.sheets.select-asset.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/sheets/select_asset/view.cljs

@@ -0,0 +1,52 @@
+(ns status-im.contexts.wallet.sheets.select-asset.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.sheets.select-asset.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]
+                         (let [token-networks (:networks token)]
+                           (rf/dispatch [:wallet.swap/select-asset-to-pay
+                                         {:token    token
+                                          :network  (when (= (count token-networks) 1)
+                                                      (first token-networks))
+                                          :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/contexts/wallet/swap/swap_proposal/view.cljs

@@ -2,6 +2,7 @@
   (:require [quo.core :as quo]
             [react-native.core :as rn]
             [status-im.contexts.wallet.sheets.slippage-settings.view :as slippage-settings]
+            [status-im.contexts.wallet.sheets.select-asset.view :as select-asset]
             [status-im.contexts.wallet.swap.swap-proposal.style :as style]
             [utils.re-frame :as rf]))
 
@@ -9,6 +10,14 @@
   []
   (let [max-slippage (rf/sub [:wallet/swap-max-slippage])]
     [rn/view {:style style/container}
+     [quo/button
+      {:on-press #(rf/dispatch [:show-bottom-sheet
+                                {:content select-asset/view}])}
+      (str "Select Asset to Recieve")]
+     [quo/button
+      {:on-press #(rf/dispatch [:show-bottom-sheet
+                                {:content select-asset/view}])}
+      (str "Select Asset to Pay")]
      [quo/button
       {:on-press #(rf/dispatch [:show-bottom-sheet
                                 {:content slippage-settings/view}])}