Chain management (#22508)

Author: clauxx

resources/images/icons2/20x20/[email protected]

@@ -3,13 +3,13 @@
     [clojure.string :as string]
     [goog.string :as gstring]
     [legacy.status-im.ui.components.react :as react]
-    [legacy.status-im.utils.build :as build]
     [legacy.status-im.utils.deprecated-types :as types]
     [legacy.status-im.utils.logging.view :as view]
     [native-module.core :as native-module]
     [re-frame.core :as re-frame]
     [react-native.mmkv :as mmkv]
     [react-native.platform :as platform]
+    [status-im.app-build.core :as build]
     [status-im.common.json-rpc.events :as json-rpc]
     [status-im.common.log :as common-log]
     [status-im.config :as config]

resources/images/icons2/20x20/[email protected]

@@ -0,0 +1,20 @@
+(ns quo.components.common.dot-separator
+  (:require [quo.context :as quo.context]
+            [quo.foundations.colors :as colors]
+            [react-native.core :as rn]))
+
+(defn view
+  [{:keys [color size container-style]
+    :or   {size 2}}]
+  (let [theme         (quo.context/use-theme)
+        default-color (colors/theme-colors colors/neutral-80-opa-60 colors/neutral-40 theme)]
+    [rn/view
+     {:style (merge {:padding-horizontal 4
+                     :align-items        :center
+                     :justify-content    :center}
+                    container-style)}
+     [rn/view
+      {:style {:width            size
+               :height           size
+               :border-radius    (/ size 2)
+               :background-color (or color default-color)}}]]))

src/legacy/status_im/utils/logging/core.cljs

@@ -0,0 +1,20 @@
+(ns quo.components.common.list.style
+  (:require [quo.foundations.colors :as colors]))
+
+(defn container
+  [blur? theme]
+  {:border-radius    16
+   :background-color (if blur?
+                       colors/white-opa-5
+                       (colors/theme-colors colors/white colors/neutral-95 theme))
+   :border-width     (if blur? 0 1)
+   :border-color     (if blur?
+                       colors/white-opa-5
+                       (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
+
+(defn separator
+  [blur? theme]
+  {:height           1
+   :background-color (if blur?
+                       colors/white-opa-5
+                       (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})

src/quo/components/common/dot_separator.cljs

@@ -0,0 +1,21 @@
+(ns quo.components.common.list.view
+  (:require
+    [quo.components.common.list.style :as style]
+    [quo.context :as quo.context]
+    [react-native.core :as rn]))
+
+(defn view
+  [{:keys [data render-fn blur? container-style]}]
+  (let [theme      (quo.context/use-theme)
+        list-items (remove nil? data)
+        last-index (dec (count list-items))]
+    [rn/view {:style (merge (style/container blur? theme) container-style)}
+     (doall
+      (map-indexed
+       (fn [index item]
+         ^{:key index}
+         [:<>
+          (render-fn item)
+          (when-not (= last-index index)
+            [rn/view {:style (style/separator blur? theme)}])])
+       list-items))]))

src/quo/components/common/list/style.cljs

@@ -4,13 +4,14 @@
             [react-native.linear-gradient :as linear-gradient]))
 
 (defn view
-  [{:keys [style accessibility-label]}]
+  [{:keys [style accessibility-label]} & children]
   (let [theme (quo.context/use-theme)]
-    [linear-gradient/linear-gradient
-     {:style               style
-      :accessibility-label accessibility-label
-      :colors              [(colors/resolve-color :yellow theme)
-                            colors/new-feature-gradient-pink]
-      :use-angle           true
-      :angle               78
-      :angle-center        {:x 0.5 :y 0.5}}]))
+    (into [linear-gradient/linear-gradient
+           {:style               style
+            :accessibility-label accessibility-label
+            :colors              [(colors/resolve-color :yellow theme)
+                                  colors/new-feature-gradient-pink]
+            :use-angle           true
+            :angle               78
+            :angle-center        {:x 0.5 :y 0.5}}]
+          children)))

src/quo/components/common/list/view.cljs

@@ -0,0 +1,13 @@
+(ns quo.components.counter.fraction-counter.style
+  (:require [quo.foundations.colors :as colors]))
+
+(def counter
+  {:padding-top    12
+   :padding-bottom 2})
+
+(defn counter-text
+  [error? blur? theme]
+  {:color (cond
+            error? (colors/theme-colors colors/danger-50 colors/danger-60 theme)
+            blur?  (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
+            :else  (colors/theme-colors colors/neutral-40 colors/neutral-50 theme))})

src/quo/components/common/new_feature_gradient.cljs

@@ -0,0 +1,48 @@
+(ns quo.components.counter.fraction-counter.view
+  (:require [quo.components.counter.fraction-counter.style :as style]
+            [quo.components.markdown.text :as text]
+            [quo.context :as quo.context]
+            [react-native.core :as rn]
+            [schema.core :as schema]
+            [utils.number :as number]))
+
+(defn- parse-value
+  [value]
+  (if (int? value)
+    value
+    (number/parse-int value 0)))
+
+(defn- error-state-counter?
+  [numerator denominator]
+  (let [numerator   (parse-value numerator)
+        denominator (parse-value denominator)]
+    (> numerator denominator)))
+
+(defn- view-internal
+  [{:keys [blur? left-value right-value suffix show-counter-warning?]}]
+  (let [theme            (quo.context/use-theme)
+        counter-warning? (when show-counter-warning?
+                           (error-state-counter? left-value right-value))]
+    [rn/view {:style style/counter}
+     [text/text
+      {:size   :paragraph-2
+       :weight :regular
+       :style  (style/counter-text counter-warning? blur? theme)}
+      (str left-value
+           "/"
+           right-value
+           (when suffix
+             (str " " suffix)))]]))
+
+(def ?schema
+  [:=>
+   [:cat
+    [:map {:closed true}
+     [:left-value [:or int? string?]]
+     [:right-value [:or int? string?]]
+     [:suffix {:optional true} [:maybe string?]]
+     [:blur? {:optional true} [:maybe boolean?]]
+     [:show-counter-warning? {:optional true} [:maybe boolean?]]]]
+   :any])
+
+(def view (schema/instrument #'view-internal ?schema))

src/quo/components/counter/fraction_counter/style.cljs

@@ -40,3 +40,20 @@
 (def new-chain-indicator
   {:position :absolute
    :right    0})
+
+(def single-network-container
+  {:flex-direction  :row
+   :align-items     :center
+   :justify-content :center
+   :margin-right    4})
+
+(def filtered-container
+  {:flex-direction  :row
+   :align-items     :center
+   :justify-content :center})
+
+(def single-network-image
+  {:width         20
+   :height        20
+   :border-radius 10
+   :margin-right  4})