chore(wallet): connect UI and data model for input page in bridge flow (#18678)

Co-authored-by: Jamie Caprani <jamiecaprani@gmail.com>

src/status_im/contexts/wallet/account/bridge/view.cljs

@@ -31,4 +31,3 @@
                            (rf/dispatch [:wallet/bridge-select-token
                                          {:token    token
                                           :stack-id :wallet-bridge}]))}]])))
-

src/status_im/contexts/wallet/account/bridge_send/style.cljs

@@ -0,0 +1,4 @@
+(ns status-im.contexts.wallet.account.bridge-send.style)
+
+(def bridge-send-wrapper
+  {:flex 1})

src/status_im/contexts/wallet/account/bridge_send/view.cljs

@@ -0,0 +1,19 @@
+(ns status-im.contexts.wallet.account.bridge-send.view
+  (:require
+    [quo.theme]
+    [react-native.core :as rn]
+    [status-im.contexts.wallet.account.bridge-send.style :as style]
+    [status-im.contexts.wallet.send.input-amount.view :as input-amount]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
+
+(defn- view-internal
+  []
+  [rn/view {:style style/bridge-send-wrapper}
+   [input-amount/view
+    {:button-one-label (i18n/label :t/confirm-bridge)
+     :button-one-props {:icon-left :i/bridge}
+     :on-navigate-back (fn []
+                         (rf/dispatch [:navigate-back-within-stack :wallet-bridge-send]))}]])
+
+(def view (quo.theme/with-theme view-internal))

src/status_im/contexts/wallet/account/bridge_to/view.cljs

@@ -28,7 +28,10 @@
        {:label         (name network-name)
         :network-image (quo.resources/get-network (:network-name network))
         :token-value   (str crypto-formatted " " (:symbol token))
-        :fiat-value    fiat-formatted}])))
+        :fiat-value    fiat-formatted
+        :on-press      #(rf/dispatch [:wallet/select-bridge-network
+                                      {:network-chain-id chain-id
+                                       :stack-id         :wallet-bridge}])}])))
 
 (defn- view-internal
   []
@@ -50,7 +53,7 @@
        :accessibility-label :top-bar}]
      [quo/text-combinations
       {:container-style style/header-container
-       :title           (i18n/label :t/bridge-to {:name (string/upper-case (str (:label token)))})}]
+       :title           (i18n/label :t/bridge-to {:name (string/upper-case (str (:name token)))})}]
      [rn/view style/content-container
       [bridge-token-component (assoc mainnet :network-name :t/mainnet) account-token]]
 

src/status_im/contexts/wallet/account/view.cljs

@@ -54,7 +54,7 @@
              :buy-action     #(rf/dispatch [:show-bottom-sheet
                                             {:content buy-drawer}])
              :bridge-action  #(ff/alert ::ff/wallet.bridge-token
-                                        (fn [] (rf/dispatch [:open-modal :wallet-bridge])))}])
+                                        (fn [] (rf/dispatch [:wallet/start-bridge])))}])
          [quo/tabs
           {:style            style/tabs
            :size             32

src/status_im/contexts/wallet/common/temp.cljs

@@ -47,7 +47,7 @@
 (defn bridge-token-list
   [networks-list]
   [{:token               :snt
-    :label               "Status"
+    :name                "Status"
     :token-value         "0.00 SNT"
     :fiat-value          "€0.00"
     :networks            networks-list
@@ -55,7 +55,7 @@
     :symbol              "STT"
     :customization-color :blue}
    {:token               :eth
-    :label               "Ethereum"
+    :name                "Ethereum"
     :token-value         "0.00 ETH"
     :fiat-value          "€0.00"
     :networks            networks-list
@@ -63,7 +63,7 @@
     :symbol              "ETH"
     :customization-color :blue}
    {:token               :dai
-    :label               "Dai"
+    :name                "Dai"
     :token-value         "0.00 DAI"
     :fiat-value          "€0.00"
     :networks            networks-list

src/status_im/contexts/wallet/events.cljs

@@ -204,8 +204,21 @@
 
 (rf/reg-event-fx :wallet/bridge-select-token
  (fn [{:keys [db]} [{:keys [token stack-id]}]]
-   {:db (assoc-in db [:wallet :ui :send :token] token)
+   (let [to-address (get-in db [:wallet :current-viewing-account-address])]
-    :fx [[:navigate-to-within-stack [:wallet-bridge-to stack-id]]]}))
+     {:db (-> db
+              (assoc-in [:wallet :ui :send :token] token)
+              (assoc-in [:wallet :ui :send :to-address] to-address))
+      :fx [[:dispatch [:navigate-to-within-stack [:wallet-bridge-to stack-id]]]]})))
+
+(rf/reg-event-fx :wallet/start-bridge
+ (fn [{:keys [db]}]
+   {:db (assoc-in db [:wallet :ui :send :type] :bridge)
+    :fx [[:dispatch [:open-modal :wallet-bridge]]]}))
+
+(rf/reg-event-fx :wallet/select-bridge-network
+ (fn [{:keys [db]} [{:keys [network-chain-id stack-id]}]]
+   {:db (assoc-in db [:wallet :ui :send :bridge-to-chain-id] network-chain-id)
+    :fx [[:dispatch [:navigate-to-within-stack [:wallet-bridge-send stack-id]]]]}))
 
 (rf/reg-event-fx
  :wallet/get-ethereum-chains

src/status_im/contexts/wallet/send/events.cljs

@@ -105,8 +105,9 @@
    {:db (-> db
             (update-in [:wallet :ui :send] dissoc :token)
             (assoc-in [:wallet :ui :send :collectible] collectible)
+            (assoc-in [:wallet :ui :send :type] :collectible)
             (assoc-in [:wallet :ui :send :amount] 1))
-    :fx [[:dispatch [:wallet/get-suggested-routes 1]]
+    :fx [[:dispatch [:wallet/get-suggested-routes {:amount 1}]]
          [:navigate-to-within-stack [:wallet-transaction-confirmation stack-id]]]}))
 
 (rf/reg-event-fx :wallet/send-select-amount
@@ -115,11 +116,17 @@
     :fx [[:dispatch [:navigate-to-within-stack [:wallet-transaction-confirmation stack-id]]]]}))
 
 (rf/reg-event-fx :wallet/get-suggested-routes
- (fn [{:keys [db now]} [amount]]
+ (fn [{:keys [db now]} [{:keys [amount]}]]
    (let [wallet-address          (get-in db [:wallet :current-viewing-account-address])
          token                   (get-in db [:wallet :ui :send :token])
+         transaction-type        (get-in db [:wallet :ui :send :type])
          collectible             (get-in db [:wallet :ui :send :collectible])
          to-address              (get-in db [:wallet :ui :send :to-address])
+         test-networks-enabled?  (get-in db [:profile/profile :test-networks-enabled?])
+         networks                ((if test-networks-enabled? :test :prod)
+                                  (get-in db [:wallet :networks]))
+         network-chain-ids       (map :chain-id networks)
+         bridge-to-chain-id      (get-in db [:wallet :ui :send :bridge-to-chain-id])
          token-decimal           (when token (:decimals token))
          token-id                (if token
                                    (:symbol token)
@@ -131,12 +138,15 @@
          amount-in               (send-utils/amount-in-hex amount (if token token-decimal 0))
          from-address            wallet-address
          disabled-from-chain-ids []
-         disabled-to-chain-ids   []
+         disabled-to-chain-ids   (if (= transaction-type :bridge)
+                                   (filter #(not= % bridge-to-chain-id) network-chain-ids)
+                                   [])
          from-locked-amount      {}
-         transaction-type        (if token
+         transaction-type-param  (case transaction-type
-                                   constants/send-type-transfer
+                                   :collectible constants/send-type-erc-721-transfer
-                                   constants/send-type-erc-721-transfer)
+                                   :bridge      constants/send-type-bridge
-         request-params          [transaction-type
+                                   constants/send-type-transfer)
+         request-params          [transaction-type-param
                                   from-address
                                   to-address
                                   amount-in

src/status_im/contexts/wallet/send/input_amount/view.cljs

@@ -126,6 +126,9 @@
   [{default-on-confirm       :on-confirm
     default-limit-crypto     :limit-crypto
     default-crypto-decimals  :crypto-decimals
+    on-navigate-back         :on-navigate-back
+    button-one-label         :button-one-label
+    button-one-props         :button-one-props
     initial-crypto-currency? :initial-crypto-currency?
     :or                      {initial-crypto-currency? true}}]
   (let [_ (rn/dismiss-keyboard!)
@@ -167,9 +170,7 @@
                                     (reset! input-value v)
                                     (reset-input-error num-value current-limit-amount input-error)
                                     (reagent/flush))))
-        on-navigate-back      (fn []
+        on-navigate-back      on-navigate-back
-                                (rf/dispatch [:wallet/clean-selected-token])
-                                (rf/dispatch [:navigate-back-within-stack :wallet-send-input-amount]))
         fetch-routes          (fn [input-num-value current-limit-amount]
                                 (let [current-screen-id (rf/sub [:navigation/current-screen-id])]
                                   ; this check is to prevent effect being triggered when screen is
@@ -180,7 +181,7 @@
                                                 (<= input-num-value 0)
                                                 (> input-num-value current-limit-amount))
                                       (debounce/debounce-and-dispatch
-                                       [:wallet/get-suggested-routes @input-value]
+                                       [:wallet/get-suggested-routes {:amount @input-value}]
                                        100)
                                       (rf/dispatch [:wallet/clean-suggested-routes])))))
         handle-on-confirm     (fn []
@@ -196,7 +197,6 @@
                                 (reagent/flush))]
     (fn []
       (let [{fiat-currency :currency} (rf/sub [:profile/profile])
-            {:keys [color]}           (rf/sub [:wallet/current-viewing-account])
             {token-balance  :total-balance
              token-symbol   :symbol
              token-networks :networks
@@ -288,10 +288,10 @@
              :receiver                  (address/get-shortened-key to-address)}])
          [quo/bottom-actions
           {:actions          :one-action
-           :button-one-label (i18n/label :t/confirm)
+           :button-one-label button-one-label
-           :button-one-props {:disabled?           confirm-disabled?
+           :button-one-props (merge button-one-props
-                              :on-press            on-confirm
+                                    {:disabled? confirm-disabled?
-                              :customization-color color}}]
+                                     :on-press  on-confirm})}]
          [quo/numbered-keyboard
           {:container-style      (style/keyboard-container bottom)
            :left-action          :dot

src/status_im/contexts/wallet/send/routes/style.cljs

@@ -35,7 +35,7 @@
 (def add-network
   {:margin-top 8
    :align-self :flex-end
-   :left       12})
+   :right      12})
 
 (defn warning-container
   [color theme]

src/status_im/contexts/wallet/send/select_asset/view.cljs

@@ -36,7 +36,6 @@
       :on-collectible-press #(rf/dispatch [:wallet/send-select-collectible
                                            {:collectible %
                                             :stack-id    :wallet-select-asset}])}]))
-
 (defn- tab-view
   [search-text selected-tab on-change-text]
   (let [unfiltered-collectibles (rf/sub [:wallet/current-viewing-account-collectibles])

src/status_im/contexts/wallet/send/send_amount/view.cljs

@@ -0,0 +1,16 @@
+(ns status-im.contexts.wallet.send.send-amount.view
+  (:require
+    [quo.theme]
+    [status-im.contexts.wallet.send.input-amount.view :as input-amount]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
+
+(defn- view-internal
+  []
+  [input-amount/view
+   {:button-one-label (i18n/label :t/confirm)
+    :on-navigate-back (fn []
+                        (rf/dispatch [:wallet/clean-selected-token])
+                        (rf/dispatch [:navigate-back-within-stack :wallet-send-input-amount]))}])
+
+(def view (quo.theme/with-theme view-internal))

src/status_im/navigation/screens.cljs

@@ -49,6 +49,7 @@
     [status-im.contexts.syncing.scan-sync-code-page.view :as scan-sync-code-page]
     [status-im.contexts.syncing.setup-syncing.view :as settings-setup-syncing]
     [status-im.contexts.syncing.syncing-devices-list.view :as settings-syncing]
+    [status-im.contexts.wallet.account.bridge-send.view :as bridge-send]
     [status-im.contexts.wallet.account.bridge-to.view :as bridge-to]
     [status-im.contexts.wallet.account.bridge.view :as bridge]
     [status-im.contexts.wallet.account.view :as wallet-accounts]
@@ -65,9 +66,9 @@
     [status-im.contexts.wallet.edit-account.view :as wallet-edit-account]
     [status-im.contexts.wallet.saved-addresses.view :as wallet-saved-addresses]
     [status-im.contexts.wallet.scan-account.view :as scan-address]
-    [status-im.contexts.wallet.send.input-amount.view :as wallet-send-input-amount]
     [status-im.contexts.wallet.send.select-address.view :as wallet-select-address]
     [status-im.contexts.wallet.send.select-asset.view :as wallet-select-asset]
+    [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.share-address.view :as wallet-share-address]
@@ -335,6 +336,10 @@
      :options   {:insets {:top? true}}
      :component bridge-to/view}
 
+    {:name      :wallet-bridge-send
+     :options   {:insets {:top? true}}
+     :component bridge-send/view}
+
     {:name      :wallet-edit-derivation-path
      :component wallet-edit-derivation-path/view}
 

translations/en.json

@@ -2329,6 +2329,7 @@
     "no-activity": "No activity",
     "empty-tab-description": "C'mon do something...",
     "buy": "Buy",
+    "confirm-bridge": "Confirm bridge",
     "bridge": "Bridge",
     "bridge-to": "Bridge {{name}} to",
     "on-device": "On device",