From 09408e78118b488a2e067362130337911c13a894 Mon Sep 17 00:00:00 2001
From: Roman Volosovskyi <roman.wolosovskyi@gmail.com>
Date: Thu, 4 Jan 2024 16:46:40 +0100
Subject: [PATCH] Reanimate RPC stats screen

---
 .../status_im/ui/screens/rpc_usage_info.cljs  | 96 +++++++++----------
 1 file changed, 48 insertions(+), 48 deletions(-)

diff --git a/src/legacy/status_im/ui/screens/rpc_usage_info.cljs b/src/legacy/status_im/ui/screens/rpc_usage_info.cljs
index 1a3a3061ba..17f17e8553 100644
--- a/src/legacy/status_im/ui/screens/rpc_usage_info.cljs
+++ b/src/legacy/status_im/ui/screens/rpc_usage_info.cljs
@@ -6,7 +6,6 @@
     [legacy.status-im.ui.components.typography :as typography]
     [legacy.status-im.utils.utils :as utils]
     [re-frame.core :as re-frame]
-    [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im.common.json-rpc.events :as json-rpc]
     [taoensso.timbre :as log]
@@ -86,29 +85,28 @@
 
 (defn stats-table
   [{:keys [total filtered-total stats]}]
-  rn/scroll-view
-  {:style {:padding-horizontal 8}}
-  rn/view
-  {:style {:flex-direction  :row
-           :justify-content :space-between
-           :margin-bottom   2}}
-  [legacy.status-im.ui.components.core/text {:style typography/font-semi-bold}
-   (i18n/label :t/rpc-usage-total)]
-  [legacy.status-im.ui.components.core/text {:style typography/font-semi-bold}
-   (i18n/label :t/rpc-usage-filtered-total {:filtered-total filtered-total :total total})]
-  (when (seq stats)
-    (for [[k v] stats]
-      ^{:key (str k v)}
-      [:<>
-       rn/view
-       {:style {:flex-direction  :row
-                :align-items     :center
-                :margin-vertical 10}}
-       [legacy.status-im.ui.components.core/text {:style {:flex 1}}
-        k]
-       [legacy.status-im.ui.components.core/text {:style {:margin-left 16}}
-        v]
-       [legacy.status-im.ui.components.core/separator]])))
+  [react/scroll-view
+   {:style {:padding-horizontal 8}}
+   [react/view
+    [react/view
+     {:style {:flex-direction  :row
+              :justify-content :space-between
+              :margin-bottom   2}}
+     [legacy.status-im.ui.components.core/text {:style typography/font-semi-bold}
+      (i18n/label :t/rpc-usage-total)]
+     [legacy.status-im.ui.components.core/text {:style typography/font-semi-bold}
+      (i18n/label :t/rpc-usage-filtered-total {:filtered-total filtered-total :total total})]]
+    [react/view
+     {:style {:flex-direction :column
+              :flex           1}}
+     (when (seq stats)
+       (for [[k v] stats]
+         ^{:key (str k v)}
+         [react/view
+          {:style {:flex-direction :row
+                   :align-items    :stretch}}
+          [legacy.status-im.ui.components.core/text {:style {:flex 7}} k]
+          [legacy.status-im.ui.components.core/text {:style {:flex 1}} v]]))]]])
 
 (defn prepare-stats
   [{:keys [stats]}]
@@ -125,30 +123,32 @@
     [react/view
      {:flex              1
       :margin-horizontal 8}
-     rn/view
-     {:style {:flex-direction  :row
-              :margin-vertical 8
-              :justify-content :space-between}}
-     [legacy.status-im.ui.components.core/button
-      {:on-press            #(re-frame/dispatch [::reset])
-       :accessibility-label :rpc-usage-reset}
-      (i18n/label :t/rpc-usage-reset)]
-     [legacy.status-im.ui.components.core/button
-      {:on-press
-       #(react/copy-to-clipboard (prepare-stats stats))
-       :accessibility-label :rpc-usage-copy}
-      (i18n/label :t/rpc-usage-copy)]
-     [legacy.status-im.ui.components.core/text-input
-      {:on-change-text  #(re-frame/dispatch [::set-filter %])
-       :label           (i18n/label :t/rpc-usage-filter-methods)
-       :placeholder     (i18n/label :t/rpc-usage-filter)
-       :container-style {:margin-vertical 18}
-       :before          {:icon  :main-icons/search
-                         :style {:padding-horizontal 8}}
-       :default-value   methods-filter
-       :auto-capitalize :none
-       :show-cancel     false
-       :auto-focus      false}]
+     [react/view
+      {:style {:flex-direction  :column
+               :justify-content :space-between}}
+      [react/view
+       {:style {:flex-direction  :row
+                :justify-content :space-between}}
+       [legacy.status-im.ui.components.core/button
+        {:on-press            #(re-frame/dispatch [::reset])
+         :accessibility-label :rpc-usage-reset}
+        (i18n/label :t/rpc-usage-reset)]
+       [legacy.status-im.ui.components.core/button
+        {:on-press
+         #(react/copy-to-clipboard (prepare-stats stats))
+         :accessibility-label :rpc-usage-copy}
+        (i18n/label :t/rpc-usage-copy)]]
+      [legacy.status-im.ui.components.core/text-input
+       {:on-change-text  #(re-frame/dispatch [::set-filter %])
+        :label           (i18n/label :t/rpc-usage-filter-methods)
+        :placeholder     (i18n/label :t/rpc-usage-filter)
+        :container-style {:margin-vertical 18}
+        :before          {:icon  :main-icons/search
+                          :style {:padding-horizontal 8}}
+        :default-value   methods-filter
+        :auto-capitalize :none
+        :show-cancel     false
+        :auto-focus      false}]]
      [stats-table stats]]))
 
 (defn usage-info