feat(wallet): add ability to send a token (#18242)

src/quo/components/utilities/token/view.cljs

@@ -37,13 +37,14 @@
 (def ^:private b64-png-image-prefix "data:image/png;base64,")
 
 (defn temp-empty-symbol
-  [token size]
+  [token size style]
   [rn/view
-   {:style (token-style {:justify-content :center
-                         :align-items     :center
-                         :border-radius   20
-                         :border-width    1
-                         :border-color    :grey}
+   {:style (token-style (merge {:justify-content :center
+                                :align-items     :center
+                                :border-radius   20
+                                :border-width    1
+                                :border-color    :grey}
+                               style)
                         size)}
    [quo/text {:style {:color :grey}}
     (some-> token
@@ -73,6 +74,6 @@
       [rn/image
        {:style  (token-style style size)
         :source source}]
-      [temp-empty-symbol token size])))
+      [temp-empty-symbol token size style])))
 
 (def view (schema/instrument #'view-internal ?schema))

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

@@ -2,6 +2,7 @@
   (:require
     [quo.components.avatars.account-avatar.view :as account-avatar]
     [quo.components.avatars.user-avatar.view :as user-avatar]
+    [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
     [quo.components.markdown.text :as text]
     [quo.components.wallet.summary-info.style :as style]
     [quo.foundations.colors :as colors]
@@ -26,33 +27,43 @@
 
 (defn networks
   [values theme]
-  (let [{:keys [ethereum optimism arbitrum]} values]
+  (let [{:keys [ethereum optimism arbitrum]} values
+        show-optimism?                       (pos? optimism)
+        show-arbitrum?                       (pos? arbitrum)]
     [rn/view
      {:style               style/networks-container
       :accessibility-label :networks}
-     [network-amount
-      {:network  :ethereum
-       :amount   (str ethereum " ETH")
-       :divider? true
-       :theme    theme}]
-     [network-amount
-      {:network  :optimism
-       :amount   (str optimism " ETH")
-       :divider? true
-       :theme    theme}]
-     [network-amount
-      {:network :arbitrum
-       :amount  (str arbitrum " ETH")
-       :theme   theme}]]))
+     (when (pos? ethereum)
+       [network-amount
+        {:network  :ethereum
+         :amount   (str ethereum " ETH")
+         :divider? (or show-arbitrum? show-optimism?)
+         :theme    theme}])
+     (when show-optimism?
+       [network-amount
+        {:network  :optimism
+         :amount   (str optimism " OPT")
+         :divider? show-arbitrum?
+         :theme    theme}])
+     (when show-arbitrum?
+       [network-amount
+        {:network :arbitrum
+         :amount  (str arbitrum " ARB")
+         :theme   theme}])]))
 
 (defn- view-internal
   [{:keys [theme type account-props networks? values]}]
   [rn/view
    {:style (style/container networks? theme)}
    [rn/view
     {:style style/info-container}
-    (if (= type :status-account)
-      [account-avatar/view account-props]
+    (case type
+      :status-account [account-avatar/view account-props]
+      :saved-account  [wallet-user-avatar/wallet-user-avatar (assoc account-props :size :size-32)]
+      :account        [wallet-user-avatar/wallet-user-avatar
+                       (assoc account-props
+                              :size     :size-32
+                              :neutral? true)]
       [user-avatar/user-avatar account-props])
     [rn/view {:style {:margin-left 8}}
      (when (not= type :account) [text/text {:weight :semi-bold} (:name account-props)])

src/status_im/common/standard_authentication/standard_auth/slide_button/view.cljs

@@ -25,11 +25,11 @@
                  size
                  theme
                  blur?
-                 container-style]}]
-      [rn/view {:style {:flex 1}}
+                 container-style]
+          :or   {container-style {:flex 1}}}]
+      [rn/view {:style container-style}
        [quo/slide-button
         {:size                size
-         :container-style     container-style
          :customization-color customization-color
          :on-reset            (when @reset-slider? #(reset! reset-slider? false))
          :on-complete         #(authorize/authorize {:on-close              on-close

src/status_im/common/data_store/wallet.cljs → src/status_im/contexts/wallet/data_store.cljs

@@ -1,4 +1,4 @@
-(ns status-im.common.data-store.wallet
+(ns status-im.contexts.wallet.data-store
   (:require
     [clojure.set :as set]
     [clojure.string :as string]

src/status_im/contexts/wallet/events.cljs

@@ -4,7 +4,7 @@
     [camel-snake-kebab.extras :as cske]
     [clojure.string :as string]
     [react-native.background-timer :as background-timer]
-    [status-im.common.data-store.wallet :as data-store]
+    [status-im.contexts.wallet.data-store :as data-store]
     [status-im.contexts.wallet.events.collectibles]
     [status-im.contexts.wallet.item-types :as item-types]
     [status-im.contexts.wallet.temp :as temp]

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

@@ -1,13 +1,17 @@
 (ns status-im.contexts.wallet.send.events
   (:require
+    [camel-snake-kebab.core :as csk]
+    [camel-snake-kebab.extras :as cske]
     [status-im.constants :as constants]
+    [status-im.contexts.wallet.send.utils :as send-utils]
     [taoensso.timbre :as log]
     [utils.money :as money]
     [utils.number]
     [utils.re-frame :as rf]))
 
 (rf/reg-event-fx :wallet/select-address-tab
  (fn [{:keys [db]} [tab]]
+
    {:db (assoc-in db [:wallet :ui :send :select-address-tab] tab)}))
 
 (rf/reg-event-fx :wallet/select-send-account-address
@@ -17,10 +21,14 @@
 (rf/reg-event-fx :wallet/suggested-routes-success
  (fn [{:keys [db]} [suggested-routes timestamp]]
    (when (= (get-in db [:wallet :ui :send :suggested-routes-call-timestamp]) timestamp)
-     {:db (-> db
-              (assoc-in [:wallet :ui :send :suggested-routes] suggested-routes)
-              (assoc-in [:wallet :ui :send :route] (first (:Best suggested-routes)))
-              (assoc-in [:wallet :ui :send :loading-suggested-routes?] false))})))
+     (let [suggested-routes-data (cske/transform-keys csk/->kebab-case suggested-routes)
+           chosen-route          (->> suggested-routes-data
+                                      :best
+                                      first)]
+       {:db (-> db
+                (assoc-in [:wallet :ui :send :suggested-routes] suggested-routes-data)
+                (assoc-in [:wallet :ui :send :route] chosen-route)
+                (assoc-in [:wallet :ui :send :loading-suggested-routes?] false))}))))
 
 (rf/reg-event-fx :wallet/suggested-routes-error
  (fn [{:keys [db]} [_error]]
@@ -47,8 +55,9 @@
     :fx [[:navigate-to-within-stack [:wallet-send-input-amount stack-id]]]}))
 
 (rf/reg-event-fx :wallet/send-select-amount
- (fn [{:keys [db]} [{:keys [amount]}]]
-   {:db (assoc-in db [:wallet :ui :send :amount] amount)}))
+ (fn [{:keys [db]} [{:keys [amount stack-id]}]]
+   {:db (assoc-in db [:wallet :ui :send :amount] amount)
+    :fx [[:navigate-to-within-stack [:wallet-transaction-confirmation stack-id]]]}))
 
 (rf/reg-event-fx :wallet/get-suggested-routes
  (fn [{:keys [db now]} [amount]]
@@ -59,7 +68,7 @@
          token-id                (:symbol token)
          network-preferences     []
          gas-rates               constants/gas-rate-medium
-         amount-in               (money/amount-in-hex amount token-decimal)
+         amount-in               (send-utils/amount-in-hex amount token-decimal)
          from-address            wallet-address
          disabled-from-chain-ids []
          disabled-to-chain-ids   []
@@ -88,3 +97,69 @@
                                                 {:event  :wallet/get-suggested-routes
                                                  :error  error
                                                  :params request-params}))}]})))
+
+(rf/reg-event-fx :wallet/add-authorized-transaction
+ (fn [{:keys [db]} [transaction]]
+   (let [transaction-hashes (:hashes transaction)
+         chain-id           (key (first transaction-hashes))
+         tx-id              (first (val (first transaction-hashes)))
+         transaction-detes  {:status   :pending
+                             :id       (:id transaction)
+                             :chain-id chain-id}]
+     {:db (assoc-in db [:wallet :transactions tx-id] transaction-detes)
+      :fx [[:dispatch [:navigate-to :wallet-transaction-progress]]]})))
+
+(defn- transaction-bridge
+  [{:keys [from-address to-address route]}]
+  (let [{:keys [from bridge-name amount-out gas-amount gas-fees]}           route
+        {:keys [gas-price max-fee-per-gas-medium max-priority-fee-per-gas]} gas-fees]
+    [{:BridgeName bridge-name
+      :ChainID    (:chain-id from)
+      :TransferTx {:From                 from-address
+                   :To                   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"}}]))
+
+(defn- multi-transaction-command
+  [{:keys [from-address to-address from-asset to-asset amount-out transfer-type]
+    :or   {transfer-type constants/send-type-transfer}}]
+  {:fromAddress from-address
+   :toAddress   to-address
+   :fromAsset   from-asset
+   :toAsset     to-asset
+   :fromAmount  amount-out
+   :type        transfer-type})
+
+(rf/reg-event-fx :wallet/send-transaction
+ (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)
+         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})
+                         sha3-pwd]]
+     {:json-rpc/call [{:method     "wallet_createMultiTransaction"
+                       :params     request-params
+                       :on-success (fn [result]
+                                     (rf/dispatch [:hide-bottom-sheet])
+                                     (rf/dispatch [:wallet/add-authorized-transaction result]))
+                       :on-error   (fn [error]
+                                     (log/error "failed to send transaction"
+                                                {:event  :wallet/send-transaction
+                                                 :error  error
+                                                 :params request-params}))}]})))
+

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

@@ -1,13 +1,9 @@
 (ns status-im.contexts.wallet.send.transaction-confirmation.style
   (:require [quo.foundations.colors :as colors]))
 
-(defn container
-  [margin-top]
-  {:position :absolute
-   :top      margin-top
-   :right    0
-   :left     0
-   :bottom   0})
+(def detail-item
+  {:flex   1
+   :height 36})
 
 (def content-container
   {:padding-top        12
@@ -29,11 +25,9 @@
    :border-width       1
    :border-color       (colors/theme-colors colors/neutral-10 colors/neutral-90 theme)})
 
-(def slide-button-container
-  {:position :absolute
-   :right    20
-   :left     20
-   :bottom   20})
+(def details-title-container
+  {:padding-horizontal 20
+   :padding-bottom     16})
 
 (defn section-label
   [theme]