feat: prepare events for sending collectible (#18473)

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

src/quo/components/wallet/summary_info/view.cljs

@@ -33,22 +33,22 @@
     [rn/view
      {:style               style/networks-container
       :accessibility-label :networks}
-     (when (pos? ethereum)
+     (when (and ethereum (pos? (:amount ethereum)))
        [network-amount
         {:network  :ethereum
-         :amount   (str ethereum " ETH")
+         :amount   (str (:amount ethereum) " " (or (:token-symbol ethereum) "ETH"))
          :divider? (or show-arbitrum? show-optimism?)
          :theme    theme}])
      (when show-optimism?
        [network-amount
         {:network  :optimism
-         :amount   (str optimism " OPT")
+         :amount   (str (:amount optimism) " " (or (:token-symbol optimism) "OPT"))
          :divider? show-arbitrum?
          :theme    theme}])
      (when show-arbitrum?
        [network-amount
         {:network :arbitrum
-         :amount  (str arbitrum " ARB")
+         :amount  (str (:amount arbitrum) " " (or (:token-symbol arbitrum) "ARB"))
          :theme   theme}])]))
 
 (defn- view-internal

src/status_im/constants.cljs

@@ -432,3 +432,6 @@
 (def ^:const send-type-stickers-buy 4)
 (def ^:const send-type-bridge 5)
 (def ^:const send-type-erc-721-transfer 6)
+
+(def ^:const bridge-name-transfer "Transfer")
+(def ^:const bridge-name-erc-721-transfer "ERC721Transfer")

src/status_im/contexts/preview/quo/wallet/summary_info.cljs

@@ -20,9 +20,9 @@
   []
   (let [state                (reagent/atom {:type      :status-account
                                             :networks? true
-                                            :values    {:ethereum 150
+                                            :values    {:ethereum {:amount 150}
-                                                        :optimism 50
+                                                        :optimism {:amount 50}
-                                                        :arbitrum 25}})
+                                                        :arbitrum {:amount 25}}})
         status-account-props {:customization-color :purple
                               :size                32
                               :emoji               "🍑"

src/status_im/contexts/wallet/common/collectibles_tab/view.cljs

@@ -30,9 +30,9 @@
         :style                   {:flex 1}
         :content-container-style {:align-items :center}
         :num-columns             2
-        :render-fn               (fn [{:keys [preview-url id]}]
+        :render-fn               (fn [{:keys [preview-url] :as collectible}]
                                    [quo/collectible
                                     {:images   [preview-url]
-                                     :on-press #(on-collectible-press id)}])}])))
+                                     :on-press #(on-collectible-press collectible)}])}])))
 
 (def view (quo.theme/with-theme view-internal))

src/status_im/contexts/wallet/events.cljs

@@ -129,9 +129,7 @@
 (rf/defn clean-scanned-address
   {:events [:wallet/clean-scanned-address]}
   [{:keys [db]}]
-  {:db (-> db
+  {:db (dissoc db :wallet/scanned-address :wallet/send-address)})
-           (dissoc :wallet/scanned-address :wallet/send-address)
-           (update-in [:wallet :ui :send] dissoc :to-address))})
 
 (rf/reg-event-fx :wallet/create-derived-addresses
  (fn [{:keys [db]} [{:keys [sha3-pwd path]} on-success]]
@@ -301,10 +299,6 @@
      (background-timer/clear-timeout current-timeout)
      {:db (assoc db :wallet/local-suggestions [] :wallet/valid-ens-or-address? false)})))
 
-(rf/reg-event-fx :wallet/clean-account-selection
- (fn [{:keys [db]}]
-   {:db (update-in db [:wallet :ui :send] dissoc :send-account-address)}))
-
 (rf/reg-event-fx :wallet/get-address-details-success
  (fn [{:keys [db]} [{:keys [hasActivity]}]]
    {:db (assoc-in db

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

@@ -40,23 +40,23 @@
             (update-in [:wallet :ui :send] dissoc :route)
             (update-in [:wallet :ui :send] dissoc :loading-suggested-routes?))}))
 
-
+(rf/reg-event-fx :wallet/clean-send-address
-(rf/reg-event-fx :wallet/select-send-account-address
+ (fn [{:keys [db]}]
- (fn [{:keys [db]} [{:keys [address stack-id]}]]
+   {:db (update-in db [:wallet :ui :send] dissoc :recipient :to-address)}))
-   {:db (-> db
-            (assoc-in [:wallet :ui :send :send-account-address] address)
-            (update-in [:wallet :ui :send] dissoc :to-address))
-    :fx [[:navigate-to-within-stack [:wallet-select-asset stack-id]]]}))
 
 (rf/reg-event-fx :wallet/select-send-address
- (fn [{:keys [db]} [{:keys [address token stack-id]}]]
+ (fn [{:keys [db]} [{:keys [address token recipient stack-id]}]]
-   {:db (assoc-in db [:wallet :ui :send :to-address] address)
+   {:db (-> db
+            (assoc-in [:wallet :ui :send :recipient] (or recipient address))
+            (assoc-in [:wallet :ui :send :to-address] address))
     :fx [[:navigate-to-within-stack
           (if token [:wallet-send-input-amount stack-id] [:wallet-select-asset stack-id])]]}))
 
 (rf/reg-event-fx :wallet/send-select-token
  (fn [{:keys [db]} [{:keys [token stack-id]}]]
-   {:db (assoc-in db [:wallet :ui :send :token] token)
+   {:db (-> db
+            (update-in [:wallet :ui :send] dissoc :collectible)
+            (assoc-in [:wallet :ui :send :token] token))
     :fx [[:navigate-to-within-stack [:wallet-send-input-amount stack-id]]]}))
 
 (rf/reg-event-fx :wallet/send-select-token-drawer
@@ -67,6 +67,15 @@
  (fn [{:keys [db]}]
    {:db (assoc-in db [:wallet :ui :send :token] nil)}))
 
+(rf/reg-event-fx :wallet/send-select-collectible
+ (fn [{:keys [db]} [{:keys [collectible stack-id]}]]
+   {:db (-> db
+            (update-in [:wallet :ui :send] dissoc :token)
+            (assoc-in [:wallet :ui :send :collectible] collectible)
+            (assoc-in [:wallet :ui :send :amount] 1))
+    :fx [[:dispatch [:wallet/get-suggested-routes 1]]
+         [:navigate-to-within-stack [:wallet-transaction-confirmation stack-id]]]}))
+
 (rf/reg-event-fx :wallet/send-select-amount
  (fn [{:keys [db]} [{:keys [amount stack-id]}]]
    {:db (assoc-in db [:wallet :ui :send :amount] amount)
@@ -76,18 +85,25 @@
  (fn [{:keys [db now]} [amount]]
    (let [wallet-address          (get-in db [:wallet :current-viewing-account-address])
          token                   (get-in db [:wallet :ui :send :token])
-         account-address         (get-in db [:wallet :ui :send :send-account-address])
+         collectible             (get-in db [:wallet :ui :send :collectible])
-         to-address              (or account-address (get-in db [:wallet :ui :send :to-address]))
+         to-address              (get-in db [:wallet :ui :send :to-address])
-         token-decimal           (:decimals token)
+         token-decimal           (when token (:decimals token))
-         token-id                (:symbol token)
+         token-id                (if token
-         network-preferences     []
+                                   (:symbol token)
+                                   (str (get-in collectible [:id :contract-id :address])
+                                        ":"
+                                        (get-in collectible [:id :token-id])))
+         network-preferences     (if token [] [(get-in collectible [:id :contract-id :chain-id])])
          gas-rates               constants/gas-rate-medium
-         amount-in               (send-utils/amount-in-hex amount token-decimal)
+         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   []
          from-locked-amount      {}
-         request-params          [constants/send-type-transfer
+         transaction-type        (if token
+                                   constants/send-type-transfer
+                                   constants/send-type-erc-721-transfer)
+         request-params          [transaction-type
                                   from-address
                                   to-address
                                   amount-in
@@ -124,21 +140,46 @@
       :fx [[:dispatch [:navigate-to :wallet-transaction-progress]]]})))
 
 (defn- transaction-bridge
-  [{:keys [from-address to-address route]}]
+  [{:keys [from-address to-address token-id token-address route]}]
-  (let [{:keys [from bridge-name amount-out gas-amount gas-fees]}           route
+  (let [{:keys [from bridge-name amount-out gas-amount
-        {:keys [gas-price max-fee-per-gas-medium max-priority-fee-per-gas]} gas-fees]
+                gas-fees]}                 route
-    [{:BridgeName bridge-name
+        eip-1559-enabled?                  (:eip-1559-enabled gas-fees)
-      :ChainID    (:chain-id from)
+        {:keys [gas-price max-fee-per-gas-medium
-      :TransferTx {:From                 from-address
+                max-priority-fee-per-gas]} gas-fees
-                   :To                   to-address
+        transfer-tx                        (cond-> {:From  from-address
+                                                    :To    (or token-address to-address)
                                                     :Gas   (money/to-hex gas-amount)
-                   :GasPrice             (money/to-hex (money/->wei :gwei gas-price))
                                                     :Value amount-out
                                                     :Nonce nil
-                   :MaxFeePerGas         (money/to-hex (money/->wei :gwei max-fee-per-gas-medium))
-                   :MaxPriorityFeePerGas (money/to-hex (money/->wei :gwei max-priority-fee-per-gas))
                                                     :Input ""
-                   :Data                 "0x"}}]))
+                                                    :Data  "0x"}
+                                             eip-1559-enabled?       (assoc :TxType "0x02"
+                                                                            :MaxFeePerGas
+                                                                            (money/to-hex
+                                                                             (money/->wei
+                                                                              :gwei
+                                                                              max-fee-per-gas-medium))
+                                                                            :MaxPriorityFeePerGas
+                                                                            (money/to-hex
+                                                                             (money/->wei
+                                                                              :gwei
+                                                                              max-priority-fee-per-gas)))
+                                             (not eip-1559-enabled?) (assoc :TxType   "0x00"
+                                                                            :GasPrice (money/to-hex
+                                                                                       (money/->wei
+                                                                                        :gwei
+                                                                                        gas-price))))]
+    [(cond-> {:BridgeName bridge-name
+              :ChainID    (:chain-id from)}
+
+       (= bridge-name constants/bridge-name-erc-721-transfer)
+       (assoc :ERC721TransferTx
+              (assoc transfer-tx
+                     :Recipient to-address
+                     :TokenID   token-id))
+
+       (= bridge-name constants/bridge-name-transfer)
+       (assoc :TransferTx transfer-tx))]))
 
 (defn- multi-transaction-command
   [{:keys [from-address to-address from-asset to-asset amount-out transfer-type]
@@ -154,17 +195,27 @@
  (fn [{:keys [db]} [sha3-pwd]]
    (let [route          (get-in db [:wallet :ui :send :route])
          from-address   (get-in db [:wallet :current-viewing-account-address])
-         to-address     (get-in db [:wallet :ui :send :to-address])
          token          (get-in db [:wallet :ui :send :token])
-         token-id       (:symbol token)
+         collectible    (get-in db [:wallet :ui :send :collectible])
-         request-params [(multi-transaction-command {:from-address from-address
+         token-address  (when collectible
+                          (get-in collectible
+                                  [:id :contract-id :address]))
+         to-address     (get-in db [:wallet :ui :send :to-address])
+         token-id       (if token
+                          (:symbol token)
+                          (get-in collectible [:id :token-id]))
+         request-params [(multi-transaction-command
+                          {:from-address from-address
                            :to-address   to-address
                            :from-asset   token-id
                            :to-asset     token-id
                            :amount-out   (:amount-out route)})
                          (transaction-bridge {:to-address    to-address
                                               :from-address  from-address
-                                              :route        route})
+                                              :route         route
+                                              :token-address token-address
+                                              :token-id      (when collectible
+                                                               (money/to-hex (js/parseInt token-id)))})
                          sha3-pwd]]
      {:json-rpc/call [{:method     "wallet_createMultiTransaction"
                        :params     request-params

src/status_im/contexts/wallet/send/select_address/tabs/view.cljs

@@ -12,8 +12,9 @@
   [{:keys [color address] :as account}]
   [quo/account-item
    {:account-props (assoc account :customization-color color)
-    :on-press      #(rf/dispatch [:wallet/select-send-account-address
+    :on-press      #(rf/dispatch [:wallet/select-send-address
                                   {:address   address
+                                   :recipient account
                                    :stack-id  :wallet-select-address}])}])
 
 (defn my-accounts

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

@@ -26,6 +26,8 @@
   (fn []
     (let [scanned-address          (rf/sub [:wallet/scanned-address])
           send-address             (rf/sub [:wallet/wallet-send-to-address])
+          recipient                (rf/sub [:wallet/wallet-send-recipient])
+          recipient-plain-address? (= send-address recipient)
           valid-ens-or-address?    (rf/sub [:wallet/valid-ens-or-address?])
           chain-id                 (rf/sub [:chain-id])
           contacts                 (rf/sub [:contacts/active])]
@@ -37,7 +39,7 @@
                                  (rf/dispatch [:open-modal :scan-address]))
         :ens-regex             constants/regx-ens
         :address-regex         constants/regx-address
-        :scanned-value         (or send-address scanned-address)
+        :scanned-value         (or (when recipient-plain-address? send-address) scanned-address)
         :on-detect-address     #(debounce/debounce-and-dispatch
                                  [:wallet/validate-address %]
                                  300)
@@ -81,6 +83,7 @@
                                     (when-not ens
                                       (rf/dispatch [:wallet/select-send-address
                                                     {:address   address
+                                                     :recipient local-suggestion
                                                      :stack-id  :wallet-select-address}]))))
                  :active-state? false}]
       (cond
@@ -117,8 +120,8 @@
   (let [on-close       (fn []
                          (rf/dispatch [:wallet/clean-scanned-address])
                          (rf/dispatch [:wallet/clean-local-suggestions])
-                         (rf/dispatch [:wallet/clean-account-selection])
                          (rf/dispatch [:wallet/clean-selected-token])
+                         (rf/dispatch [:wallet/clean-send-address])
                          (rf/dispatch [:wallet/select-address-tab nil])
                          (rf/dispatch [:navigate-back]))
         on-change-tab  #(rf/dispatch [:wallet/select-address-tab %])
@@ -131,8 +134,7 @@
         (rn/use-effect (fn []
                          (fn []
                            (rf/dispatch [:wallet/clean-scanned-address])
-                           (rf/dispatch [:wallet/clean-local-suggestions])
+                           (rf/dispatch [:wallet/clean-local-suggestions]))))
-                           (rf/dispatch [:wallet/clean-account-selection]))))
         [floating-button-page/view
          {:header [account-switcher/view
                    {:on-press      on-close

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

@@ -67,10 +67,9 @@
     [collectibles-tab/view
      {:collectibles         collectibles
       :filtered?            search-performed?
-      :on-collectible-press (fn [collectible-id]
+      :on-collectible-press #(rf/dispatch [:wallet/send-select-collectible
-                              (js/alert (str "Collectible to send: \n"
+                                           {:collectible %
-                                             collectible-id
+                                            :stack-id    :wallet-select-asset}])}]))
-                                             "\nNavigation not implemented yet")))}]))
 
 (defn- tab-view
   [search-text selected-tab on-change-text]

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

@@ -14,9 +14,9 @@
   {:margin-right 4})
 
 (defn details-container
-  [theme]
+  [route? theme]
   {:flex-direction     :row
-   :justify-content    :space-between
+   :justify-content    (if route? :space-between :center)
    :height             52
    :padding-horizontal 12
    :padding-top        7

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

@@ -1,5 +1,6 @@
 (ns status-im.contexts.wallet.send.transaction-confirmation.view
   (:require
+    [clojure.string :as string]
     [legacy.status-im.utils.utils :as utils]
     [quo.core :as quo]
     [quo.theme :as quo.theme]
@@ -9,10 +10,11 @@
     [status-im.common.standard-authentication.core :as standard-auth]
     [status-im.contexts.wallet.send.transaction-confirmation.style :as style]
     [utils.i18n :as i18n]
-    [utils.re-frame :as rf]))
+    [utils.re-frame :as rf]
+    [utils.security.core :as security]))
 
 (defn- transaction-title
-  [{:keys [token-symbol amount account to-address]}]
+  [{:keys [token-symbol amount account to-address image-url collectible?]}]
   [rn/view {:style style/content-container}
    [rn/view {:style {:flex-direction :row}}
     [quo/text
@@ -22,10 +24,10 @@
       :accessibility-label :send-label}
      (i18n/label :t/send)]
     [quo/summary-tag
-     {:token        token-symbol
+     {:token        (if collectible? "" token-symbol)
       :label        (str amount " " token-symbol)
-      :type         :token
+      :type         (if collectible? :collectible :token)
-      :image-source :eth}]]
+      :image-source (if collectible? image-url :eth)}]]
    [rn/view
     {:style {:flex-direction :row
              :margin-top     4}}
@@ -54,7 +56,7 @@
       :label (utils/get-shortened-address to-address)}]]])
 
 (defn- user-summary
-  [{:keys [amount account-props theme label accessibility-label summary-type]}]
+  [{:keys [amount token-symbol account-props theme label accessibility-label summary-type]}]
   [rn/view
    {:style {:padding-horizontal 20
             :padding-bottom     16}}
@@ -67,12 +69,14 @@
    [quo/summary-info
     {:type          summary-type
      :networks?     true
-     :values        {:ethereum amount}
+     :values        {:ethereum {:amount       amount
+                                :token-symbol token-symbol}}
      :account-props account-props}]])
 
 (defn- transaction-details
-  [{:keys [estimated-time-min max-fees token amount to-address theme]}]
+  [{:keys [estimated-time-min max-fees token amount to-address route theme]}]
-  (let [currency-symbol (rf/sub [:profile/currency-symbol])]
+  (let [currency-symbol (rf/sub [:profile/currency-symbol])
+        route-loaded?   (some? route)]
     [rn/view
      {:style style/details-title-container}
      [quo/text
@@ -82,7 +86,9 @@
        :accessibility-label :summary-from-label}
       (i18n/label :t/details)]
      [rn/view
-      {:style (style/details-container theme)}
+      {:style (style/details-container route-loaded? theme)}
+      (if route-loaded?
+        [:<>
          [quo/data-item
           {:container-style style/detail-item
            :blur?           false
@@ -117,14 +123,28 @@
            :status          :default
            :size            :small
            :title           (i18n/label :t/user-gets {:name (utils/get-shortened-address to-address)})
-        :subtitle        (str amount " " (:symbol token))}]]]))
+           :subtitle        (str amount " " (:symbol token))}]]
+        [rn/activity-indicator {:style {:align-self :center}}])]]))
 
 (defn- view-internal
   [_]
-  (let [on-close              #(rf/dispatch [:navigate-back-within-stack :wallet-select-asset])
+  (let [on-close (fn []
-        send-transaction-data (rf/sub [:wallet/wallet-send])
+                   (rf/dispatch [:wallet/clean-suggested-routes])
+                   (rf/dispatch [:navigate-back-within-stack :wallet-select-asset]))]
+
+    (fn [{:keys [theme]}]
+      (let [send-transaction-data (rf/sub [:wallet/wallet-send])
             token                 (:token send-transaction-data)
-        token-symbol          (:symbol token)
+            collectible           (:collectible send-transaction-data)
+            collection-data       (:collection-data collectible)
+            collectible-data      (:collectible-data collectible)
+            collectible-id        (get-in collectible [:id :token-id])
+            token-symbol          (if collectible
+                                    (first (remove string/blank?
+                                                   [(:name collectible-data)
+                                                    (str (:name collection-data) " #" collectible-id)]))
+                                    (:symbol token))
+            image-url             (when collectible (:image-url collectible-data))
             amount                (:amount send-transaction-data)
             route                 (:route send-transaction-data)
             estimated-time-min    (:estimated-time route)
@@ -140,9 +160,6 @@
                                    :address             (utils/get-shortened-address (:address account))}
             user-props            {:full-name to-address
                                    :address   (utils/get-shortened-address to-address)}]
-    (prn route)
-
-    (fn [{:keys [theme]}]
         [rn/view {:style {:flex 1}}
          [floating-button-page/view
           {:header              [quo/page-nav
@@ -155,13 +172,16 @@
                                                          :on-press            #(js/alert
                                                                                 "to be implemented")
                                                          :accessibility-label :advanced-options}]}]
-         :footer              [standard-auth/slide-button
+           :footer              (if route
+                                  [standard-auth/slide-button
                                    {:size                :size-48
                                     :track-text          (i18n/label :t/slide-to-send)
                                     :container-style     {:z-index 2}
                                     :customization-color account-color
-                                :on-auth-success     #(rf/dispatch [:wallet/send-transaction %])
+                                    :on-auth-success     #(rf/dispatch [:wallet/send-transaction
+                                                                        (security/safe-unmask-data %)])
                                     :auth-button-label   (i18n/label :t/confirm)}]
+                                  [rn/activity-indicator])
            :gradient-cover?     true
            :customization-color (:color account)}
           [rn/view
@@ -169,9 +189,12 @@
             {:token-symbol token-symbol
              :amount       amount
              :account      account
-           :to-address   to-address}]
+             :to-address   to-address
+             :image-url    image-url
+             :collectible? (some? collectible)}]
            [user-summary
             {:amount              amount
+             :token-symbol        token-symbol
              :summary-type        :status-account
              :accessibility-label :summary-from-label
              :label               (i18n/label :t/from-capitalized)
@@ -179,6 +202,7 @@
              :theme               theme}]
            [user-summary
             {:amount              amount
+             :token-symbol        token-symbol
              :summary-type        :account
              :accessibility-label :summary-to-label
              :label               (i18n/label :t/to-capitalized)
@@ -190,6 +214,7 @@
              :token              token
              :amount             amount
              :to-address         to-address
-           :theme              theme}]]]])))
+             :theme              theme
+             :route              route}]]]]))))
 
 (def view (quo.theme/with-theme view-internal))

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

@@ -22,6 +22,10 @@
   []
   (let [current-address (rf/sub [:wallet/current-viewing-account-address])
         leave-page      (fn []
+                          (rf/dispatch [:wallet/clean-scanned-address])
+                          (rf/dispatch [:wallet/clean-local-suggestions])
+                          (rf/dispatch [:wallet/clean-send-address])
+                          (rf/dispatch [:wallet/select-address-tab nil])
                           (rf/dispatch [:navigate-to :wallet-accounts current-address]))
         status          (reagent/atom :sending)
         {:keys [color]} (rf/sub [:wallet/current-viewing-account])]

src/status_im/subs/wallet/send.cljs

@@ -13,3 +13,8 @@
  :wallet/wallet-send
  :<- [:wallet/ui]
  :-> :send)
+
+(rf/reg-sub
+ :wallet/wallet-send-recipient
+ :<- [:wallet/wallet-send]
+ :-> :recipient)