WC signing/sending transactions flow (#20445)

* WC signing transactions flow

* Fixes

* Fixes

* Post-review fixes

* Removed leftover

* Post-review fixes

* Fixes

* Fixes

* Test fixes

src/quo/components/list_items/dapp/style.cljs

@@ -34,7 +34,8 @@
 
 (def container-info
   {:flex-direction :row
-   :align-items    :center})
+   :align-items    :center
+   :flex           1})
 
 (def user-info
   {:margin-left 8})

src/quo/components/list_items/dapp/view.cljs

@@ -25,14 +25,16 @@
         :style  {:width 32 :height 32}}]
       [rn/view {:style style/user-info}
        [text/text
-        {:weight :semi-bold
+        {:weight          :semi-bold
-         :size   :paragraph-1
+         :size            :paragraph-1
-         :style  (style/style-text-name theme)}
+         :number-of-lines 1
+         :style           (style/style-text-name theme)}
         (:name dapp)]
        [text/text
-        {:weight :regular
+        {:weight          :regular
-         :size   :paragraph-2
+         :size            :paragraph-2
-         :style  (style/style-text-value theme)}
+         :number-of-lines 1
+         :style           (style/style-text-value theme)}
         (:value dapp)]]]
      (when right-component
        [right-component dapp])]))

src/quo/components/tags/summary_tag/style.cljs

@@ -28,5 +28,10 @@
    :height        24
    :border-radius 12})
 
+(def dapp
+  {:width         24
+   :height        24
+   :border-radius 12})
+
 (def token-image
   {:border-radius 12})

src/quo/components/tags/summary_tag/view.cljs

@@ -23,6 +23,10 @@
     [rn/image
      {:source image-source
       :style  style/network}]
+    :dapp
+    [rn/image
+     {:source image-source
+      :style  style/dapp}]
     :saved-address
     [wallet-user-avatar/wallet-user-avatar
      {:full-name           label
@@ -50,7 +54,7 @@
     - :label - string - tag label
     - :customization-color - color - It will be passed down to components that
       should vary based on a custom color.
-    - :type - :token / :user / :collectible / :saved-address / :network / :account
+    - :type - :token / :user / :collectible / :saved-address / :network / :account / :dapp
     - :emoji - string - emoji used for displaying account avatar
     - :image-source - resource - image to display on :network, :collectible and :user
     - :theme - :light / :dark"

src/status_im/common/raw_data_block/style.cljs

@@ -2,12 +2,13 @@
   (:require [quo.foundations.colors :as colors]))
 
 (def container
-  {:flex            1
+  {:flex          1
-   :padding         10
+   :padding       10
-   :margin-vertical 10.5
+   :margin-top    10.5
-   :border-width    1
+   :margin-bottom 0
-   :border-color    colors/neutral-10
+   :border-width  1
-   :border-radius   16})
+   :border-color  colors/neutral-10
+   :border-radius 16})
 
 (def content
   {:padding-bottom 20})

src/status_im/common/raw_data_block/view.cljs

@@ -4,7 +4,7 @@
             [status-im.common.raw-data-block.style :as style]))
 
 (defn view
-  [{:keys [data]}]
+  [data]
   [rn/scroll-view
    {:style                   style/container
     :content-container-style style/content}

src/status_im/constants.cljs

@@ -268,12 +268,14 @@
 (def ^:const wallet-connect-personal-sign-method "personal_sign")
 (def ^:const wallet-connect-eth-sign-method "eth_sign")
 (def ^:const wallet-connect-eth-send-transaction-method "eth_sendTransaction")
+(def ^:const wallet-connect-eth-sign-transaction-method "eth_signTransaction")
 (def ^:const wallet-connect-eth-sign-typed-method "eth_signTypedData")
 (def ^:const wallet-connect-eth-sign-typed-v4-method "eth_signTypedData_v4")
 (def ^:const wallet-connect-supported-methods
   #{wallet-connect-personal-sign-method
     wallet-connect-eth-sign-method
     wallet-connect-eth-send-transaction-method
+    wallet-connect-eth-sign-transaction-method
     wallet-connect-eth-sign-typed-method
     wallet-connect-eth-sign-typed-v4-method})
 (def ^:const wallet-connect-supported-events #{"accountsChanged" "chainChanged"})
@@ -492,6 +494,10 @@
 (def ^:const optimism-abbreviated-name "Oeth.")
 (def ^:const arbitrum-abbreviated-name "Arb1.")
 
+(def ^:const mainnet-full-name "Mainnet")
+(def ^:const optimism-full-name "Optimism")
+(def ^:const arbitrum-full-name "Arbitrum")
+
 (def ^:const mainnet-network-name :mainnet)
 (def ^:const ethereum-network-name :ethereum)
 (def ^:const optimism-network-name :optimism)

src/status_im/contexts/preview/quo/tags/summary_tag.cljs

@@ -51,7 +51,9 @@
               {:value "Saved address"
                :key   :saved-address}
               {:value "Account"
-               :key   :account}]}])
+               :key   :account}
+              {:value "Dapp"
+               :key   :dapp}]}])
 
 (defn view
   []

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

@@ -4,7 +4,6 @@
     [status-im.contexts.wallet.sheets.account-options.view :as account-options]
     [status-im.contexts.wallet.sheets.network-filter.view :as network-filter]
     [status-im.contexts.wallet.sheets.select-account.view :as select-account]
-    [status-im.feature-flags :as ff]
     [utils.re-frame :as rf]))
 
 (defn get-bottom-sheet-args
@@ -37,7 +36,7 @@
       :networks            networks
       :align-center?       true
       :networks-on-press   #(rf/dispatch [:show-bottom-sheet {:content network-filter/view}])
-      :right-side          [(when (and (ff/enabled? ::ff/wallet.wallet-connect)
+      :right-side          [(when (and true
                                        (not watch-only?))
                               {:icon-name :i/dapps
                                :on-press  #(rf/dispatch [:navigate-to :screen/wallet.connected-dapps])})

src/status_im/contexts/wallet/common/utils/networks.cljs

@@ -1,5 +1,6 @@
 (ns status-im.contexts.wallet.common.utils.networks
   (:require [clojure.string :as string]
+            [quo.foundations.resources :as resources]
             [status-im.constants :as constants]
             [utils.number]))
 
@@ -141,3 +142,41 @@
   (let [token-networks-ids     (mapv #(:chain-id %) token-networks)
         token-networks-ids-set (set token-networks-ids)]
     (contains? token-networks-ids-set chain-id)))
+
+(def mainnet-network-details
+  {:source           (resources/get-network constants/mainnet-network-name)
+   :short-name       constants/mainnet-short-name
+   :full-name        constants/mainnet-full-name
+   :network-name     constants/mainnet-network-name
+   :abbreviated-name constants/mainnet-abbreviated-name})
+
+(def arbitrum-network-details
+  {:source           (resources/get-network constants/arbitrum-network-name)
+   :short-name       constants/arbitrum-short-name
+   :full-name        constants/arbitrum-full-name
+   :network-name     constants/arbitrum-network-name
+   :abbreviated-name constants/arbitrum-abbreviated-name})
+
+(def optimism-network-details
+  {:source           (resources/get-network constants/optimism-network-name)
+   :short-name       constants/optimism-short-name
+   :full-name        constants/optimism-full-name
+   :network-name     constants/optimism-network-name
+   :abbreviated-name constants/optimism-abbreviated-name})
+
+(defn get-network-details
+  [chain-id]
+  (condp contains? chain-id
+    #{constants/ethereum-mainnet-chain-id constants/ethereum-goerli-chain-id
+      constants/ethereum-sepolia-chain-id}
+    mainnet-network-details
+
+    #{constants/arbitrum-mainnet-chain-id constants/arbitrum-goerli-chain-id
+      constants/arbitrum-sepolia-chain-id}
+    arbitrum-network-details
+
+    #{constants/optimism-mainnet-chain-id constants/optimism-goerli-chain-id
+      constants/optimism-sepolia-chain-id}
+    optimism-network-details
+
+    nil))

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

@@ -47,6 +47,7 @@
                                                                                   :network-name :mainnet
                                                                                   :abbreviated-name
                                                                                   "Eth."
+                                                                                  :full-name "Mainnet"
                                                                                   :chain-id 1
                                                                                   :related-chain-id 1
                                                                                   :layer 1}]
@@ -92,6 +93,7 @@
                                                      :short-name       "eth"
                                                      :network-name     :mainnet
                                                      :abbreviated-name "Eth."
+                                                     :full-name        "Mainnet"
                                                      :chain-id         1
                                                      :related-chain-id 1
                                                      :layer            1}]

src/status_im/contexts/wallet/wallet_connect/core.cljs

@@ -1,8 +1,19 @@
 (ns status-im.contexts.wallet.wallet-connect.core
-  (:require [native-module.core :as native-module]
+  (:require [clojure.edn :as edn]
+            [clojure.string :as string]
+            [native-module.core :as native-module]
+            [status-im.constants :as constants]
             [utils.security.core :as security]
             [utils.transforms :as transforms]))
 
+(def method-to-screen
+  {constants/wallet-connect-personal-sign-method        :screen/wallet-connect.sign-message
+   constants/wallet-connect-eth-sign-typed-method       :screen/wallet-connect.sign-message
+   constants/wallet-connect-eth-sign-method             :screen/wallet-connect.sign-message
+   constants/wallet-connect-eth-sign-typed-v4-method    :screen/wallet-connect.sign-message
+   constants/wallet-connect-eth-send-transaction-method :screen/wallet-connect.send-transaction
+   constants/wallet-connect-eth-sign-transaction-method :screen/wallet-connect.sign-transaction})
+
 (defn extract-native-call-signature
   [data]
   (-> data transforms/json->clj :result))
@@ -11,6 +22,13 @@
   [chain-id]
   (str "eip155:" chain-id))
 
+(defn eip155->chain-id
+  [chain-id-str]
+  (-> chain-id-str
+      (string/split #":")
+      last
+      edn/read-string))
+
 (defn format-eip155-address
   [address chain-id]
   (str chain-id ":" address))
@@ -23,9 +41,14 @@
   [event]
   (get-in event [:params :request :params]))
 
+(defn get-db-current-request-event
+  [db]
+  (get-in db [:wallet-connect/current-request :event]))
+
 (defn get-db-current-request-params
   [db]
-  (-> (get-in db [:wallet-connect/current-request :event])
+  (-> db
+      get-db-current-request-event
       get-request-params))
 
 (def ^:private sign-typed-data-by-version

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

@@ -70,7 +70,7 @@
    {:db (dissoc db :wallet-connect/current-proposal)}))
 
 (rf/reg-event-fx
- :wallet-connect/reset-current-session-request
+ :wallet-connect/reset-current-request
  (fn [{:keys [db]}]
    {:db (dissoc db :wallet-connect/current-request)}))
 
@@ -107,12 +107,6 @@
              :on-fail     #(log/error "Failed to pair with dApp" {:error %})
              :on-success  #(log/info "dApp paired successfully")}]]})))
 
-(rf/reg-event-fx
- :wallet-connect/close-session-request
- (fn [_ _]
-   {:fx [[:dispatch [:dismiss-modal :screen/wallet.wallet-connect-session-proposal]]
-         [:dispatch [:wallet-connect/reset-current-session-request]]]}))
-
 (rf/reg-event-fx
  :wallet-connect/fetch-active-sessions
  (fn [{:keys [db]}]

src/status_im/contexts/wallet/wallet_connect/modals/common/data_block/view.cljs

@@ -0,0 +1,8 @@
+(ns status-im.contexts.wallet.wallet-connect.modals.common.data-block.view
+  (:require [status-im.common.raw-data-block.view :as raw-data-block]
+            [utils.re-frame :as rf]))
+
+(defn view
+  []
+  (let [display-data (rf/sub [:wallet-connect/current-request-display-data])]
+    [raw-data-block/view display-data]))

src/status_im/contexts/wallet/wallet_connect/modals/common/footer/style.cljs

@@ -0,0 +1,18 @@
+(ns status-im.contexts.wallet.wallet-connect.modals.common.footer.style)
+
+(def content-container
+  {:padding-horizontal 20})
+
+(def data-items-container
+  {:flex-direction :row
+   :padding-top    12
+   :padding-bottom 4
+   :gap            16})
+
+(def auth-container
+  {:height          48
+   :margin-vertical 12})
+
+(def warning-container
+  {:align-items   :center
+   :margin-bottom 12})

src/status_im/contexts/wallet/wallet_connect/modals/common/footer/view.cljs

@@ -0,0 +1,35 @@
+(ns status-im.contexts.wallet.wallet-connect.modals.common.footer.view
+  (:require [quo.core :as quo]
+            [quo.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [status-im.common.standard-authentication.core :as standard-authentication]
+            [status-im.contexts.wallet.wallet-connect.modals.common.footer.style :as style]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn- on-auth-success
+  [password]
+  (rf/dispatch [:hide-bottom-sheet])
+  (rf/dispatch [:wallet-connect/respond-current-session password]))
+
+(defn view
+  [{:keys [warning-label slide-button-text disabed?]} & children]
+  (let [{:keys [customization-color]} (rf/sub [:wallet-connect/current-request-account-details])]
+    [rn/view {:style style/content-container}
+     (into [rn/view
+            {:style style/data-items-container}]
+           children)
+     [rn/view {:style style/auth-container}
+      [standard-authentication/slide-button
+       {:size                :size-48
+        :track-text          slide-button-text
+        :disabled?           disabed?
+        :customization-color customization-color
+        :on-auth-success     on-auth-success
+        :auth-button-label   (i18n/label :t/confirm)}]]
+     [rn/view {:style style/warning-container}
+      [quo/text
+       {:size   :paragraph-2
+        :style  {:color colors/neutral-80-opa-70}
+        :weight :medium}
+       warning-label]]]))

src/status_im/contexts/wallet/wallet_connect/modals/common/header/style.cljs

@@ -0,0 +1,10 @@
+(ns status-im.contexts.wallet.wallet-connect.modals.common.header.style)
+
+(def header-container
+  {:padding-vertical 12})
+
+(def header-dapp-name
+  {:margin-top -4})
+
+(def header-account-name
+  {:padding-top 4})

src/status_im/contexts/wallet/wallet_connect/modals/common/header/view.cljs

@@ -0,0 +1,26 @@
+(ns status-im.contexts.wallet.wallet-connect.modals.common.header.view
+  (:require [quo.core :as quo]
+            [react-native.core :as rn]
+            [status-im.contexts.wallet.wallet-connect.modals.common.header.style :as style]))
+
+(defn view
+  [{:keys [label dapp account]}]
+  [rn/view
+   {:style style/header-container}
+   [quo/text
+    {:size   :heading-1
+     :weight :semi-bold}
+    (let [{:keys [name icons]} (:peerMetadata dapp)]
+      [rn/view {:style style/header-dapp-name}
+       [quo/summary-tag
+        {:type         :dapp
+         :label        name
+         :image-source (first icons)}]])
+    (str " " label " ")
+    (let [{:keys [emoji customization-color name]} account]
+      [rn/view {:style style/header-account-name}
+       [quo/summary-tag
+        {:type                :account
+         :emoji               emoji
+         :label               name
+         :customization-color customization-color}]])]])

src/status_im/contexts/wallet/wallet_connect/modals/common/style.cljs

@@ -0,0 +1,23 @@
+(ns status-im.contexts.wallet.wallet-connect.modals.common.style
+  (:require [status-im.constants :as constants]))
+
+(defn container
+  [bottom]
+  {:position    :absolute
+   :bottom      bottom
+   :top         0
+   :left        0
+   :right       0
+   :padding-top constants/sheet-screen-handle-height})
+
+(def data-content-container
+  {:flex               1
+   :padding-horizontal 20})
+
+(def sign-message-content-container
+  (merge data-content-container
+         {:margin-bottom 10.5}))
+
+(def data-item
+  {:flex             1
+   :background-color :transparent})

src/status_im/contexts/wallet/wallet_connect/modals/send_transaction/view.cljs

@@ -0,0 +1,63 @@
+(ns status-im.contexts.wallet.wallet-connect.modals.send-transaction.view
+  (:require [quo.core :as quo]
+            [react-native.core :as rn]
+            [react-native.safe-area :as safe-area]
+            [status-im.contexts.wallet.wallet-connect.modals.common.data-block.view :as data-block]
+            [status-im.contexts.wallet.wallet-connect.modals.common.footer.view :as footer]
+            [status-im.contexts.wallet.wallet-connect.modals.common.header.view :as header]
+            [status-im.contexts.wallet.wallet-connect.modals.common.style :as style]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn view
+  []
+  (let [bottom                (safe-area/get-bottom)
+        {:keys [customization-color]
+         :as   account}       (rf/sub [:wallet-connect/current-request-account-details])
+        dapp                  (rf/sub [:wallet-connect/current-request-dapp])
+        network               (rf/sub [:wallet-connect/current-request-network])
+        {:keys [max-fees-fiat-formatted
+                error-state]} (rf/sub [:wallet-connect/current-request-transaction-information])]
+    [rn/view {:style (style/container bottom)}
+     [quo/gradient-cover {:customization-color customization-color}]
+     [quo/page-nav
+      {:icon-name           :i/close
+       :background          :blur
+       :on-press            #(rf/dispatch [:navigate-back])
+       :accessibility-label :wallet-connect-sign-message-close}]
+     [rn/view {:flex 1}
+      [rn/view {:style style/data-content-container}
+       [header/view
+        {:label   (i18n/label :t/wallet-connect-send-transaction-header)
+         :dapp    dapp
+         :account account}]
+       [data-block/view]]
+      (when error-state
+        [quo/alert-banner
+         {:action? false
+          :text    (i18n/label (condp = error-state
+                                 :not-enough-assets-to-pay-gas-fees
+                                 :t/not-enough-assets-to-pay-gas-fees
+
+                                 :not-enough-assets
+                                 :t/not-enough-assets))}])
+      [footer/view
+       {:warning-label     (i18n/label :t/wallet-connect-send-transaction-warning)
+        :slide-button-text (i18n/label :t/slide-to-send)
+        :disabled?         error-state}
+       [quo/data-item
+        {:status          :default
+         :card?           false
+         :container-style style/data-item
+         :title           (i18n/label :t/network)
+         :subtitle-type   :network
+         :network-image   (:source network)
+         :subtitle        (:full-name network)}]
+       [quo/data-item
+        {:size            :small
+         :status          :default
+         :card?           false
+         :container-style style/data-item
+         :title           (i18n/label :t/max-fees)
+         :subtitle        (or max-fees-fiat-formatted (i18n/label :t/no-fees))}]]]]))
+

src/status_im/contexts/wallet/wallet_connect/modals/sign_message/view.cljs

@@ -0,0 +1,42 @@
+(ns status-im.contexts.wallet.wallet-connect.modals.sign-message.view
+  (:require [quo.core :as quo]
+            [react-native.core :as rn]
+            [react-native.safe-area :as safe-area]
+            [status-im.contexts.wallet.wallet-connect.modals.common.data-block.view :as data-block]
+            [status-im.contexts.wallet.wallet-connect.modals.common.footer.view :as footer]
+            [status-im.contexts.wallet.wallet-connect.modals.common.header.view :as header]
+            [status-im.contexts.wallet.wallet-connect.modals.common.style :as style]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn view
+  []
+  (let [bottom          (safe-area/get-bottom)
+        {:keys [customization-color]
+         :as   account} (rf/sub [:wallet-connect/current-request-account-details])
+        dapp            (rf/sub [:wallet-connect/current-request-dapp])]
+    [rn/view {:style (style/container bottom)}
+     [quo/gradient-cover {:customization-color customization-color}]
+     [quo/page-nav
+      {:icon-name           :i/close
+       :background          :blur
+       :on-press            #(rf/dispatch [:navigate-back])
+       :accessibility-label :wallet-connect-sign-message-close}]
+     [rn/view {:flex 1}
+      [rn/view {:style style/sign-message-content-container}
+       [header/view
+        {:label   (i18n/label :t/wallet-connect-sign-message-header)
+         :dapp    dapp
+         :account account}]
+       [data-block/view]]
+      [footer/view
+       {:warning-label     (i18n/label :t/wallet-connect-sign-message-warning)
+        :slide-button-text (i18n/label :t/slide-to-sign)}
+       [quo/data-item
+        {:size            :small
+         :status          :default
+         :card?           false
+         :container-style style/data-item
+         :title           (i18n/label :t/max-fees)
+         :subtitle        (i18n/label :t/no-fees)}]]]]))
+

src/status_im/contexts/wallet/wallet_connect/modals/sign_transaction/view.cljs

@@ -0,0 +1,63 @@
+(ns status-im.contexts.wallet.wallet-connect.modals.sign-transaction.view
+  (:require [quo.core :as quo]
+            [react-native.core :as rn]
+            [react-native.safe-area :as safe-area]
+            [status-im.contexts.wallet.wallet-connect.modals.common.data-block.view :as data-block]
+            [status-im.contexts.wallet.wallet-connect.modals.common.footer.view :as footer]
+            [status-im.contexts.wallet.wallet-connect.modals.common.header.view :as header]
+            [status-im.contexts.wallet.wallet-connect.modals.common.style :as style]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn view
+  []
+  (let [bottom                (safe-area/get-bottom)
+        {:keys [customization-color]
+         :as   account}       (rf/sub [:wallet-connect/current-request-account-details])
+        dapp                  (rf/sub [:wallet-connect/current-request-dapp])
+        network               (rf/sub [:wallet-connect/current-request-network])
+        {:keys [max-fees-fiat-formatted
+                error-state]} (rf/sub [:wallet-connect/current-request-transaction-information])]
+    [rn/view {:style (style/container bottom)}
+     [quo/gradient-cover {:customization-color customization-color}]
+     [quo/page-nav
+      {:icon-name           :i/close
+       :background          :blur
+       :on-press            #(rf/dispatch [:navigate-back])
+       :accessibility-label :wallet-connect-sign-message-close}]
+     [rn/view {:flex 1}
+      [rn/view {:style style/data-content-container}
+       [header/view
+        {:label   (i18n/label :t/wallet-connect-sign-transaction-header)
+         :dapp    dapp
+         :account account}]
+       [data-block/view]]
+      (when error-state
+        [quo/alert-banner
+         {:action? false
+          :text    (i18n/label (condp = error-state
+                                 :not-enough-assets-to-pay-gas-fees
+                                 :t/not-enough-assets-to-pay-gas-fees
+
+                                 :not-enough-assets
+                                 :t/not-enough-assets))}])
+      [footer/view
+       {:warning-label     (i18n/label :t/wallet-connect-sign-transaction-warning)
+        :slide-button-text (i18n/label :t/slide-to-sign)
+        :disabled?         error-state}
+       [quo/data-item
+        {:status          :default
+         :card?           false
+         :container-style style/data-item
+         :title           (i18n/label :t/network)
+         :subtitle-type   :network
+         :network-image   (:source network)
+         :subtitle        (:full-name network)}]
+       [quo/data-item
+        {:size            :small
+         :status          :default
+         :card?           false
+         :container-style style/data-item
+         :title           (i18n/label :t/max-fees)
+         :subtitle        (or max-fees-fiat-formatted (i18n/label :t/no-fees))}]]]]))
+

src/status_im/contexts/wallet/wallet_connect/processing_events.cljs

@@ -6,31 +6,32 @@
             [taoensso.timbre :as log]
             [utils.transforms :as transforms]))
 
-(def ^:private method-to-screen
-  {constants/wallet-connect-personal-sign-method     :screen/wallet-connect.sign-message
-   constants/wallet-connect-eth-sign-typed-method    :screen/wallet-connect.sign-message
-   constants/wallet-connect-eth-sign-method          :screen/wallet-connect.sign-message
-   constants/wallet-connect-eth-sign-typed-v4-method :screen/wallet-connect.sign-message})
-
 (rf/reg-event-fx
  :wallet-connect/process-session-request
  (fn [{:keys [db]} [event]]
    (let [method (wallet-connect-core/get-request-method event)
-         screen (method-to-screen method)]
+         screen (wallet-connect-core/method-to-screen method)]
      (if screen
        {:db (assoc-in db [:wallet-connect/current-request :event] event)
         :fx [(condp = method
-               constants/wallet-connect-personal-sign-method
+               constants/wallet-connect-eth-send-transaction-method
-               [:dispatch [:wallet-connect/process-personal-sign]]
+               [:dispatch [:wallet-connect/process-eth-send-transaction]]
 
                constants/wallet-connect-eth-sign-method
                [:dispatch [:wallet-connect/process-eth-sign]]
 
+               constants/wallet-connect-eth-sign-transaction-method
+               [:dispatch [:wallet-connect/process-eth-sign-transaction]]
+
                constants/wallet-connect-eth-sign-typed-method
                [:dispatch [:wallet-connect/process-sign-typed]]
 
                constants/wallet-connect-eth-sign-typed-v4-method
-               [:dispatch [:wallet-connect/process-sign-typed]])
+               [:dispatch [:wallet-connect/process-sign-typed]]
+
+               constants/wallet-connect-personal-sign-method
+               [:dispatch [:wallet-connect/process-personal-sign]])
+
              [:dispatch [:open-modal screen]]]}
        (log/error "Didn't find screen for Wallet Connect method"
                   {:method method
@@ -60,6 +61,34 @@
                      :raw-data     raw-data
                      :display-data (or parsed-data raw-data))})))
 
+(rf/reg-event-fx
+ :wallet-connect/process-eth-send-transaction
+ (fn [{:keys [db]}]
+   (let [event        (wallet-connect-core/get-db-current-request-event db)
+         display-data (-> event
+                          clj->js
+                          (js/JSON.stringify nil 2))
+         {:keys [to]} (-> event wallet-connect-core/get-request-params first)]
+     {:db (update-in db
+                     [:wallet-connect/current-request]
+                     assoc
+                     :address      to
+                     :raw-data     event
+                     :display-data display-data)})))
+
+(rf/reg-event-fx
+ :wallet-connect/process-eth-sign-transaction
+ (fn [{:keys [db]}]
+   (let [event        (wallet-connect-core/get-db-current-request-event db)
+         display-data (.stringify js/JSON (clj->js event) nil 2)
+         {:keys [to]} (-> event wallet-connect-core/get-request-params first)]
+     {:db (update-in db
+                     [:wallet-connect/current-request]
+                     assoc
+                     :address      to
+                     :raw-data     event
+                     :display-data display-data)})))
+
 (rf/reg-event-fx
  :wallet-connect/process-sign-typed
  (fn [{:keys [db]}]

src/status_im/contexts/wallet/wallet_connect/responding_events.cljs

@@ -13,9 +13,19 @@
              constants/wallet-connect-personal-sign-method
              [:dispatch [:wallet-connect/respond-personal-sign password]]
 
+             constants/wallet-connect-eth-send-transaction-method
+             [:dispatch
+              [:wallet-connect/respond-build-transaction
+               #(rf/dispatch [:wallet-connect/respond-send-transaction-data password %])]]
+
              constants/wallet-connect-eth-sign-method
              [:dispatch [:wallet-connect/respond-eth-sign password]]
 
+             constants/wallet-connect-eth-sign-transaction-method
+             [:dispatch
+              [:wallet-connect/respond-build-transaction
+               #(rf/dispatch [:wallet-connect/respond-sign-transaction-data password %])]]
+
              constants/wallet-connect-eth-sign-typed-method
              [:dispatch [:wallet-connect/respond-sign-typed-data password :v1]]
 
@@ -57,12 +67,50 @@
              :on-error   #(rf/dispatch [:wallet-connect/on-sign-error %])
              :on-success #(rf/dispatch [:wallet-connect/send-response %])}]]})))
 
+(rf/reg-event-fx
+ :wallet-connect/respond-build-transaction
+ (fn [{:keys [db]} [on-success]]
+   (let [{:keys [raw-data]} (get db :wallet-connect/current-request)
+         chain-id           (-> raw-data
+                                (get-in [:params :chainId])
+                                wallet-connect-core/eip155->chain-id)]
+     {:fx [[:json-rpc/call
+            [{:method     "wallet_buildTransaction"
+              :params     [chain-id (js/JSON.stringify raw-data)]
+              :on-success on-success
+              :on-error   [:wallet-connect/on-sign-error]}]]]})))
+
+(rf/reg-event-fx
+ :wallet-connect/respond-send-transaction-data
+ (fn [_ [password data]]
+   (let [{:keys           [address]
+          message-to-sign :messageToSign} data]
+     {:fx [[:effects.wallet-connect/sign-message
+            {:password   password
+             :address    address
+             :data       message-to-sign
+             :on-error   #(rf/dispatch [:wallet-connect/on-sign-error %])
+             :on-success #(rf/dispatch [:wallet-connect/send-response %])}]]})))
+
+(rf/reg-event-fx
+ :wallet-connect/respond-sign-transaction-data
+ (fn [_ [password data]]
+   (let [{:keys           [address]
+          message-to-sign :messageToSign} data]
+     {:fx [[:effects.wallet-connect/sign-message
+            {:password   password
+             :address    address
+             :data       message-to-sign
+             :on-error   #(rf/dispatch [:wallet-connect/on-sign-error %])
+             :on-success #(rf/dispatch [:wallet-connect/send-response %])}]]})))
+
 (rf/reg-event-fx
  :wallet-connect/on-sign-error
  (fn [{:keys [db]} [error]]
    (let [event                      (get-in db [:wallet-connect/current-request :event])
          {:keys [raw-data address]} (get db :wallet-connect/current-request)
-         method                     (wallet-connect-core/get-request-method event)]
+         method                     (wallet-connect-core/get-request-method event)
+         screen                     (wallet-connect-core/method-to-screen method)]
      (log/error "Failed to sign Wallet Connect request"
                 {:error                error
                  :address              address
@@ -70,7 +118,8 @@
                  :method               method
                  :wallet-connect-event event
                  :event                :wallet-connect/on-sign-error})
-     {:fx [[:dispatch [:wallet-connect/close-session-request]]]})))
+     {:fx [[:dispatch [:dismiss-modal screen]]
+           [:dispatch [:wallet-connect/reset-current-request]]]})))
 
 
 (rf/reg-event-fx
@@ -78,6 +127,7 @@
  (fn [{:keys [db]} [result]]
    (let [{:keys [id topic] :as event} (get-in db [:wallet-connect/current-request :event])
          method                       (wallet-connect-core/get-request-method event)
+         screen                       (wallet-connect-core/method-to-screen method)
          web3-wallet                  (get db :wallet-connect/web3-wallet)]
      {:fx [[:effects.wallet-connect/respond-session-request
             {:web3-wallet web3-wallet
@@ -90,7 +140,9 @@
                                         :method               method
                                         :event                :wallet-connect/send-response
                                         :wallet-connect-event event})
-                            (rf/dispatch [:wallet-connect/close-session-request]))
+                            (rf/dispatch [:dismiss-modal screen])
+                            (rf/dispatch [:wallet-connect/reset-current-request]))
              :on-success  (fn []
                             (log/info "Successfully sent Wallet Connect response to dApp")
-                            (rf/dispatch [:wallet-connect/close-session-request]))}]]})))
+                            (rf/dispatch [:dismiss-modal screen])
+                            (rf/dispatch [:wallet-connect/reset-current-request]))}]]})))

src/status_im/contexts/wallet/wallet_connect/sign_message/style.cljs

@@ -1,29 +0,0 @@
-(ns status-im.contexts.wallet.wallet-connect.sign-message.style
-  (:require [quo.foundations.colors :as colors]
-            [status-im.constants :as constants]))
-
-(defn container
-  [bottom]
-  {:position    :absolute
-   :bottom      bottom
-   :top         0
-   :left        0
-   :right       0
-   :padding-top constants/sheet-screen-handle-height})
-
-(def content-container
-  {:flex               1
-   :padding-horizontal 20})
-
-(def fees-container
-  {:padding-top      12
-   :padding-bottom   4
-   :background-color colors/white})
-
-(def auth-container
-  {:height          48
-   :margin-vertical 12})
-
-(def warning-container
-  {:align-items   :center
-   :margin-bottom 12})

src/status_im/contexts/wallet/wallet_connect/sign_message/view.cljs

@@ -1,82 +0,0 @@
-(ns status-im.contexts.wallet.wallet-connect.sign-message.view
-  (:require [quo.core :as quo]
-            [quo.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [react-native.safe-area :as safe-area]
-            [status-im.common.raw-data-block.view :as raw-data-block]
-            [status-im.common.standard-authentication.core :as standard-authentication]
-            [status-im.contexts.wallet.wallet-connect.sign-message.style :as style]
-            [utils.i18n :as i18n]
-            [utils.re-frame :as rf]))
-
-(defn- close-sheet
-  []
-  (rf/dispatch [:navigate-back]))
-
-(defn- on-auth-success
-  [password]
-  (rf/dispatch [:hide-bottom-sheet])
-  (rf/dispatch [:wallet-connect/respond-current-session password]))
-
-;; NOTE: this will be a reusable component
-(defn- header
-  [{:keys [emoji customization-color name]}]
-  [rn/view
-   {:style {:padding-vertical 12}}
-   [quo/text
-    {:size   :heading-1
-     :weight :semi-bold}
-    [rn/view {:style {:margin-top -4}}
-     [quo/summary-tag
-      {:label "dapp placeholder"}]]
-    (i18n/label :t/wallet-connect-sign-header)
-    [rn/view {:style {:padding-top 4}}
-     [quo/summary-tag
-      {:type                :account
-       :emoji               emoji
-       :label               name
-       :customization-color customization-color}]]]])
-
-(defn data-block
-  []
-  (let [display-data (rf/sub [:wallet-connect/current-request-display-data])]
-    [raw-data-block/view {:data display-data}]))
-
-(defn view
-  []
-  (let [bottom                                   (safe-area/get-bottom)
-        {:keys [name emoji customization-color]} (rf/sub
-                                                  [:wallet-connect/current-request-account-details])]
-    [rn/view {:style (style/container bottom)}
-     [quo/gradient-cover {:customization-color customization-color}]
-     [quo/page-nav
-      {:icon-name           :i/close
-       :background          :blur
-       :on-press            close-sheet
-       :accessibility-label :wallet-connect-sign-message-close}]
-     [rn/view {:style style/content-container}
-      [header
-       {:emoji               emoji
-        :customization-color customization-color
-        :name                name}]
-      [data-block]
-      [quo/data-item
-       {:size            :small
-        :status          :default
-        :card?           false
-        :container-style style/fees-container
-        :title           (i18n/label :t/max-fees)
-        :subtitle        (i18n/label :t/no-fees)}]
-      [rn/view {:style style/auth-container}
-       [standard-authentication/slide-button
-        {:size                :size-48
-         :track-text          (i18n/label :t/slide-to-sign)
-         :customization-color customization-color
-         :on-auth-success     on-auth-success
-         :auth-button-label   (i18n/label :t/confirm)}]]
-      [rn/view {:style style/warning-container}
-       [quo/text
-        {:size   :paragraph-2
-         :style  {:color colors/neutral-80-opa-70}
-         :weight :medium}
-        (i18n/label :t/wallet-connect-sign-warning)]]]]))

src/status_im/navigation/screens.cljs

@@ -116,8 +116,12 @@
     [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.modals.send-transaction.view :as
+     wallet-connect-send-transaction]
+    [status-im.contexts.wallet.wallet-connect.modals.sign-message.view :as wallet-connect-sign-message]
+    [status-im.contexts.wallet.wallet-connect.modals.sign-transaction.view :as
+     wallet-connect-sign-transaction]
     [status-im.contexts.wallet.wallet-connect.session-proposal.view :as wallet-connect-session-proposal]
-    [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]))
 
@@ -531,6 +535,14 @@
      :options   {:sheet? true}
      :component wallet-connect-sign-message/view}
 
+    {:name      :screen/wallet-connect.sign-transaction
+     :options   {:sheet? true}
+     :component wallet-connect-sign-transaction/view}
+
+    {:name      :screen/wallet-connect.send-transaction
+     :options   {:sheet? true}
+     :component wallet-connect-send-transaction/view}
+
     ;; Settings
 
     {:name      :screen/settings-password

src/status_im/subs/wallet/networks.cljs

@@ -1,7 +1,5 @@
 (ns status-im.subs.wallet.networks
-  (:require [quo.foundations.resources :as resources]
+  (:require [re-frame.core :as re-frame]
-            [re-frame.core :as re-frame]
-            [status-im.constants :as constants]
             [status-im.contexts.wallet.common.utils.networks :as network-utils]))
 
 (def max-network-prefixes 2)
@@ -18,41 +16,6 @@
  (fn [[networks test-networks-enabled?]]
    (get networks (if test-networks-enabled? :test :prod))))
 
-(def mainnet-network-details
-  {:source           (resources/get-network constants/mainnet-network-name)
-   :short-name       constants/mainnet-short-name
-   :network-name     constants/mainnet-network-name
-   :abbreviated-name constants/mainnet-abbreviated-name})
-
-(def arbitrum-network-details
-  {:source           (resources/get-network constants/arbitrum-network-name)
-   :short-name       constants/arbitrum-short-name
-   :network-name     constants/arbitrum-network-name
-   :abbreviated-name constants/arbitrum-abbreviated-name})
-
-(def optimism-network-details
-  {:source           (resources/get-network constants/optimism-network-name)
-   :short-name       constants/optimism-short-name
-   :network-name     constants/optimism-network-name
-   :abbreviated-name constants/optimism-abbreviated-name})
-
-(defn get-network-details
-  [chain-id]
-  (condp contains? chain-id
-    #{constants/ethereum-mainnet-chain-id constants/ethereum-goerli-chain-id
-      constants/ethereum-sepolia-chain-id}
-    mainnet-network-details
-
-    #{constants/arbitrum-mainnet-chain-id constants/arbitrum-goerli-chain-id
-      constants/arbitrum-sepolia-chain-id}
-    arbitrum-network-details
-
-    #{constants/optimism-mainnet-chain-id constants/optimism-goerli-chain-id
-      constants/optimism-sepolia-chain-id}
-    optimism-network-details
-
-    nil))
-
 (re-frame/reg-sub
  :wallet/network-details
  :<- [:wallet/networks-by-mode]
@@ -60,7 +23,7 @@
    (->> networks
         (map
          (fn [{:keys [chain-id related-chain-id layer]}]
-           (assoc (get-network-details chain-id)
+           (assoc (network-utils/get-network-details chain-id)
                   :chain-id         chain-id
                   :related-chain-id related-chain-id
                   :layer            layer)))

src/status_im/subs/wallet/networks_test.cljs

@@ -12,6 +12,7 @@
            :short-name       "eth"
            :network-name     :mainnet
            :abbreviated-name "Eth."
+           :full-name        "Mainnet"
            :related-chain-id 1
            :chain-id         3
            :layer            1}
@@ -47,15 +48,18 @@
           :short-name       "eth"
           :chain-id         1
           :abbreviated-name "Eth."
+          :full-name        "Mainnet"
           :layer            1}
          {:network-name     :arbitrum
           :short-name       "arb1"
           :abbreviated-name "Arb1."
+          :full-name        "Arbitrum"
           :chain-id         42161
           :layer            2}
          {:network-name     :optimism
           :short-name       "oeth"
           :abbreviated-name "Oeth."
+          :full-name        "Optimism"
           :chain-id         10
           :layer            2}]
         (map #(dissoc % :source :related-chain-id) (rf/sub [sub-name]))))))
@@ -70,15 +74,18 @@
                   :short-name       "eth"
                   :chain-id         1
                   :abbreviated-name "Eth."
+                  :full-name        "Mainnet"
                   :layer            1}
        :arbitrum {:network-name     :arbitrum
                   :short-name       "arb1"
                   :abbreviated-name "Arb1."
+                  :full-name        "Arbitrum"
                   :chain-id         42161
                   :layer            2}
        :optimism {:network-name     :optimism
                   :short-name       "oeth"
                   :abbreviated-name "Oeth."
+                  :full-name        "Optimism"
                   :chain-id         10
                   :layer            2}}
       (rf/sub [sub-name])))))

src/status_im/subs/wallet/wallet_connect.cljs

@@ -1,6 +1,9 @@
 (ns status-im.subs.wallet.wallet-connect
   (:require [re-frame.core :as rf]
-            [status-im.contexts.wallet.common.utils :as wallet-utils]))
+            [status-im.contexts.wallet.common.utils :as wallet-utils]
+            [status-im.contexts.wallet.common.utils.networks :as networks]
+            [status-im.contexts.wallet.wallet-connect.core :as wallet-connect-core]
+            [utils.money :as money]))
 
 (rf/reg-sub
  :wallet-connect/current-request-address
@@ -31,6 +34,79 @@
       :name                name
       :emoji               emoji})))
 
+(rf/reg-sub
+ :wallet-connect/current-request-dapp
+ :<- [:wallet-connect/current-request]
+ :<- [:wallet-connect/pairings]
+ (fn [[request pairings]]
+   (let [dapp-url (get-in request [:raw-data :verifyContext :verified :origin])]
+     (->> pairings
+          (filter (fn [pairing]
+                    (= dapp-url (get-in pairing [:peerMetadata :url]))))
+          (first)))))
+
+(rf/reg-sub
+ :wallet-connect/current-request-network
+ :<- [:wallet-connect/current-request]
+ (fn [request]
+   (-> request
+       (get-in [:raw-data :params :chainId])
+       (wallet-connect-core/eip155->chain-id)
+       (networks/get-network-details))))
+
+(rf/reg-sub
+ :wallet-connect/current-request-transaction-information
+ :<- [:wallet-connect/current-request]
+ :<- [:wallet/accounts]
+ :<- [:profile/currency]
+ :<- [:profile/currency-symbol]
+ (fn [[request accounts currency currency-symbol]]
+   (let [chain-id                          (-> request
+                                               (get-in [:raw-data :params :chainId])
+                                               (wallet-connect-core/eip155->chain-id))
+         all-tokens                        (->> accounts
+                                                (filter #(= (:address %)
+                                                            (:address request)))
+                                                (first)
+                                                :tokens)
+         eth-token                         (->> all-tokens
+                                                (filter #(= (:symbol %) "ETH"))
+                                                (first))
+         {:keys [gasPrice gasLimit value]} (-> request
+                                               :raw-data
+                                               wallet-connect-core/get-request-params
+                                               first)
+         max-fees-wei                      (money/bignumber (* gasPrice gasLimit))]
+     (when (and gasPrice gasLimit)
+       (let [max-fees-ether          (money/wei->ether max-fees-wei)
+             token-fiat-value        (wallet-utils/calculate-token-fiat-value {:currency currency
+                                                                               :balance  max-fees-ether
+                                                                               :token    eth-token})
+             crypto-formatted        (wallet-utils/get-standard-crypto-format eth-token max-fees-ether)
+             fiat-formatted          (wallet-utils/get-standard-fiat-format crypto-formatted
+                                                                            currency-symbol
+                                                                            token-fiat-value)
+             balance                 (-> eth-token
+                                         (get-in [:balances-per-chain chain-id :raw-balance])
+                                         (money/bignumber))
+             value                   (money/bignumber value)
+             total-transaction-value (money/add max-fees-wei value)]
+         {:total-transaction-value total-transaction-value
+          :balance                 balance
+          :max-fees                max-fees-wei
+          :max-fees-fiat-value     token-fiat-value
+          :max-fees-fiat-formatted fiat-formatted
+          :error-state             (cond
+                                     (and
+                                      (money/sufficient-funds? value balance)
+                                      (not (money/sufficient-funds? total-transaction-value balance)))
+                                     :not-enough-assets-to-pay-gas-fees
+
+                                     (not (money/sufficient-funds? value balance))
+                                     :not-enough-assets
+
+                                     :else nil)})))))
+
 (rf/reg-sub
  :wallet-connect/session-proposer
  :<- [:wallet-connect/current-proposal]

src/status_im/subs/wallet/wallet_test.cljs

@@ -526,18 +526,21 @@
      (match? [{:short-name       "eth"
                :network-name     :mainnet
                :abbreviated-name "Eth."
+               :full-name        "Mainnet"
                :chain-id         1
                :related-chain-id nil
                :layer            1}
               {:short-name       "arb1"
                :network-name     :arbitrum
                :abbreviated-name "Arb1."
+               :full-name        "Arbitrum"
                :chain-id         42161
                :related-chain-id nil
                :layer            2}
               {:short-name       "oeth"
                :network-name     :optimism
                :abbreviated-name "Oeth."
+               :full-name        "Optimism"
                :chain-id         10
                :related-chain-id nil
                :layer            2}]

translations/en.json

@@ -1930,6 +1930,8 @@
     "pinned-by": "Pinned by",
     "pin-limit-reached": "Pin limit reached. Unpin a previous message first.",
     "no-fees": "No fees",
+    "not-enough-assets-to-pay-gas-fees": "Not enough assets to pay gas fees.",
+    "not-enough-assets": "Not enough assets to complete transaction.",
     "max-fee": "Max fee",
     "max-fees": "Max fees",
     "max-priority-fee": "Max priority fee",
@@ -2029,8 +2031,12 @@
     "wallet-connect-go-back": "Go back to your browser or dapp",
     "wallet-connect-2.0": "Wallet Connect 2.0",
     "wallet-connect": "Wallet Connect",
-    "wallet-connect-sign-header": "wants you to sign a message with",
+    "wallet-connect-sign-message-header": "wants you to sign the message with",
-    "wallet-connect-sign-warning": "Sign messages only if you trust the dApp",
+    "wallet-connect-send-transaction-header": "wants you to send this transaction with",
+    "wallet-connect-sign-transaction-header": "wants you to sign this transaction with",
+    "wallet-connect-sign-message-warning": "Sign messages only if you trust the dApp",
+    "wallet-connect-send-transaction-warning": "Send transactions only if you trust the dApp",
+    "wallet-connect-sign-transaction-warning": "Sign transactions only if you trust the dApp",
     "reject": "Reject",
     "manage-connections": "Manage connections from within Application Connections",
     "contact-request-was-ignored": "Contact request ignored",