[#21278] refactor: improve sign message content

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

@@ -1,5 +1,6 @@
 (ns status-im.contexts.wallet.wallet-connect.modals.common.style
-  (:require [status-im.constants :as constants]))
+  (:require [quo.foundations.colors :as colors]
+            [status-im.constants :as constants]))
 
 (defn container
   [bottom]
@@ -21,3 +22,16 @@
 (def data-item
   {:flex             1
    :background-color :transparent})
+
+(def list-data-item
+  (merge data-item
+         {:margin-bottom 8
+          :margin-top    2}))
+
+(def data-item-container
+  {:padding       10
+   :margin-top    10.5
+   :margin-bottom 0
+   :border-width  1
+   :border-color  colors/neutral-10
+   :border-radius 16})

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

@@ -1,23 +1,36 @@
 (ns status-im.contexts.wallet.wallet-connect.modals.sign-message.view
   (:require [quo.core :as quo]
             [react-native.core :as rn]
+            [react-native.gesture :as gesture]
             [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.fees-data-item.view :as
              fees-data-item]
             [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.page-nav.view :as page-nav]
             [status-im.contexts.wallet.wallet-connect.modals.common.style :as style]
+            [status-im.contexts.wallet.wallet-connect.utils.data-store :as data-store]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
 
+(defn- render-item
+  [props]
+  (let [[label value] props]
+    [quo/data-item
+     {:card?           false
+      :container-style style/list-data-item
+      :title           label
+      :subtitle        value}]))
+
 (defn view
   []
-  (let [bottom          (safe-area/get-bottom)
+  (let [bottom                          (safe-area/get-bottom)
         {:keys [customization-color]
-         :as   account} (rf/sub [:wallet-connect/current-request-account-details])
+         :as   account}                 (rf/sub [:wallet-connect/current-request-account-details])
-        dapp            (rf/sub [:wallet-connect/current-request-dapp])]
+        dapp                            (rf/sub [:wallet-connect/current-request-dapp])
+        {:keys [raw-data display-data]} (rf/sub [:wallet-connect/current-request])
+        sign-items                      (data-store/raw-data->sign-view raw-data display-data)
+        network                         (rf/sub [:wallet-connect/current-request-network])]
     (rn/use-unmount #(rf/dispatch [:wallet-connect/on-request-modal-dismissed]))
     [rn/view {:style (style/container bottom)}
      [quo/gradient-cover {:customization-color customization-color}]
@@ -29,9 +42,21 @@
         {:label   (i18n/label :t/wallet-connect-sign-message-header)
          :dapp    dapp
          :account account}]
-       [data-block/view]]
+       [gesture/flat-list
+        {:data                            sign-items
+         :content-container-style         style/data-item-container
+         :render-fn                       render-item
+         :shows-vertical-scroll-indicator false}]]
       [footer/view
        {:warning-label     (i18n/label :t/wallet-connect-sign-warning)
         :slide-button-text (i18n/label :t/slide-to-sign)}
+       [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)}]
        [fees-data-item/view]]]]))
 

src/status_im/contexts/wallet/wallet_connect/utils/data_store.cljs

@@ -73,3 +73,17 @@
   (-> db
       get-db-current-request-event
       get-request-params))
+
+(defn raw-data->sign-view
+  [raw-data display-data]
+  (let [parsed-data (transforms/json->clj raw-data)]
+    (if (string? parsed-data)
+      [["contents:" display-data]]
+      (let [{:keys [message]} parsed-data
+            from              (:from message)
+            to                (:to message)]
+        [["contents:" (:contents message)]
+         ["from: name:" (:name from)]
+         ["from: wallet:" (:wallet from)]
+         ["to: name:" (:name to)]
+         ["to: wallet:" (:wallet to)]]))))