[issue-13557] Network breakdown and Network amount components (#13781)

src/quo2/components/info/network_amount.cljs

@@ -0,0 +1,47 @@
+(ns quo2.components.info.network-amount
+  (:require [clojure.string :as string]
+            [quo.react-native :as rn]
+            [quo2.components.icon :as icon]
+            [quo2.components.markdown.text :as text]
+            [quo2.foundations.colors :as colors]
+            [status-im.i18n.i18n :as i18n]))
+
+(defn network-amount
+  "[network-amount opts]
+   opts
+   {:style        style                 ;; extra styles for the container (takes precedence)
+    :network-name \"Mainnet\"             ;; shown network name
+    :icon         :main-icons2/ethereum ;; key of icon belonging to the network
+    :eth-value    1.2345678             ;; shown ETH value}"
+  [{:keys [show-right-border? style network-name icon eth-value] :as _opts}]
+  [rn/view (merge {:accessibility-label :network-amount
+                   :background-color    (colors/theme-colors colors/white colors/neutral-95)
+                   :border-radius       16
+                   :padding             6}
+                  style)
+   [rn/view {:style {:flex-direction :row
+                     :align-items    :center}}
+    [rn/view {:flex-direction :column
+              :align-self     :flex-start
+              :padding-top    3
+              :padding-right  4}
+     [icon/icon icon {:size            40
+                      :no-color        true
+                      :container-style {:width  12
+                                        :height 12}}]]
+    [rn/view
+     [rn/view {:style {:flex-direction :row
+                       :align-items    :center}}
+      [text/text {:weight :medium
+                  :size   :paragraph-2
+                  :style  {:color (colors/theme-colors colors/black colors/white)}}
+       eth-value \space (i18n/label :t/eth)]
+      [rn/view {:style {:border-right-width (when show-right-border? 1)
+                        :border-right-color (colors/theme-colors colors/neutral-40 colors/neutral-50)
+                        :padding-left       8
+                        :align-self         :center
+                        :height             8}}]]
+     [text/text {:weight :medium
+                 :size   :label
+                 :style  {:color colors/neutral-50}}
+      (string/lower-case (i18n/label :t/on)) \space network-name]]]])

src/quo2/components/info/network_breakdown.cljs

@@ -0,0 +1,45 @@
+(ns quo2.components.info.network-breakdown
+  (:require [quo.react-native :as rn]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.markdown.text :as text]
+            [quo2.components.info.network-amount :refer [network-amount]]))
+
+(defn network-breakdown
+  [{:keys [top-value network-conversions]}]
+  [rn/view {:style {:background-color   (colors/theme-colors
+                                         colors/white
+                                         colors/neutral-95)
+                    :padding-horizontal 40
+                    :padding-top        24
+                    :border-radius      16
+                    :height             126
+                    :width              390
+                    :overflow           :hidden}}
+   [rn/view {:style {:border-bottom-width 1
+                     :border-bottom-color (colors/theme-colors
+                                           colors/neutral-20
+                                           colors/neutral-70)
+                     :padding-vertical    6}}
+    [text/text {:weight :medium
+                :style  {:color     (colors/theme-colors
+                                     colors/black
+                                     colors/white)
+                         :font-size 19}}
+     (str top-value)]]
+   [rn/scroll-view {:horizontal true
+                    :style      {:text-align :center
+                                 :margin-top 6
+                                 :width      340}}
+    (let [last-item-idx (-> network-conversions
+                            count
+                            dec)]
+      (map-indexed
+       (fn [idx {:keys [conversion network icon]}]
+         [rn/view {:style (cond-> {:flex-direction :row}
+                            (not= idx 0) (assoc :margin-left -4))
+                   :key   idx}
+          [network-amount {:show-right-border? (not= idx last-item-idx)
+                           :icon               icon
+                           :network-name       network
+                           :eth-value          conversion}]])
+       network-conversions))]])

src/quo2/screens/info/network_amount.cljs

@@ -0,0 +1,56 @@
+(ns quo2.screens.info.network-amount
+  (:require [quo.previews.preview :as preview]
+            [quo.react-native :as rn]
+            [quo2.components.info.network-amount :refer [network-amount]]
+            [quo2.foundations.colors :as colors]
+            [reagent.core :as reagent]))
+
+(def ^:private networks
+  [{:icon :main-icons2/ethereum :name "Mainnet"}
+   {:icon :main-icons2/arbitrum :name "Arbitrum"}
+   {:icon :main-icons2/optimism :name "Optimism"}
+   {:icon :main-icons2/zksync :name "zkSync"}])
+
+(defn- networks->options [networks]
+  (for [{:keys [name]
+         :as   network} networks]
+    {:key   network
+     :value name}))
+
+(def ^:private descriptors
+  [{:label "ETH Value"
+    :key   :eth-value
+    :type  :text}
+   {:label   "Network"
+    :key     :network
+    :type    :select
+    :options (networks->options networks)}])
+
+(def ^:private default-network
+  (first networks))
+
+(defn- state->opts [{:keys [eth-value network show-right-border?]
+                     :or   {eth-value          5.123456
+                            show-right-border? true}}]
+  {:network-name       (:name (or network default-network))
+   :icon               (:icon (or network default-network))
+   :eth-value          eth-value
+   :show-right-border? show-right-border?})
+
+(defn- cool-preview []
+  (let [state (reagent/atom nil)]
+    (fn []
+      [rn/view {:margin-bottom 50
+                :padding       16}
+       [preview/customizer state descriptors]
+       [rn/view {:padding-vertical 60
+                 :align-items      :center}
+        [network-amount (state->opts @state)]]])))
+
+(defn preview []
+  [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
+            :flex             1}
+   [rn/flat-list {:flex                         1
+                  :keyboard-should-persist-taps :always
+                  :header                       [cool-preview]
+                  :key-fn                       str}]])

src/quo2/screens/info/network_breakdown.cljs

@@ -0,0 +1,60 @@
+(ns quo2.screens.info.network-breakdown
+  (:require [reagent.core :as reagent]
+            [quo.react-native :as rn]
+            [quo.previews.preview :as preview]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.info.network-breakdown :as quo2]))
+
+(def descriptor [{:label "Ethereum Value"
+                  :key   :top-value
+                  :type  :text}
+                 {:label "Conversion"
+                  :key   :conversion
+                  :type  :text}
+                 {:label "Network"
+                  :key   :network
+                  :type  :text}
+                 {:label   "Icon"
+                  :key     :icon
+                  :type    :select
+                  :options [{:key   :main-icons/arbitrum
+                             :value "Arbitrum"}
+                            {:key   :main-icons/optimism
+                             :value "Optimism"}
+                            {:key   :main-icons/zksync
+                             :value "ZK Sync"}
+                            {:key   :main-icons/arbitrum
+                             :value "Arbitrum"}
+                            {:key   :main-icons/ethereum
+                             :value "Ethereum"}]}])
+
+(defn cool-preview []
+  (let [state (reagent/atom {:icon       :main-icons/arbitrum
+                             :network    "Mainnet"
+                             :conversion "5.1234"
+                             :top-value  "10 ETH"})]
+    (fn []
+      [rn/view {:margin-bottom 50
+                :padding       16}
+       [rn/view {:flex 1}
+        [preview/customizer state descriptor]]
+       [rn/view {:padding-vertical 60
+                 :flex-direction   :row
+                 :justify-content  :center}
+        [quo2/network-breakdown @state]]
+       [rn/touchable-opacity {:style    {:background-color colors/black
+                                         :width            100}
+                              :on-press (fn []
+                                          (swap! state update-in [:network-conversions] conj {:conversion (:conversion @state)
+                                                                                              :icon       (:icon @state)
+                                                                                              :network    (:network @state)}))}
+        [rn/text {:style {:color colors/white}} "Add current conversion"]]])))
+
+(defn preview-network-breakdown []
+  [rn/view {:background-color (colors/theme-colors colors/white
+                                                   colors/neutral-90)
+            :flex             1}
+   [rn/flat-list {:flex                      1
+                  :keyboardShouldPersistTaps :always
+                  :header                    [cool-preview]
+                  :key-fn                    str}]])

src/quo2/screens/main.cljs

@@ -38,6 +38,8 @@
             [quo2.screens.tags.status-tags :as status-tags]
             [quo2.screens.tags.token-tag :as token-tag]
             [quo2.screens.wallet.token-overview :as token-overview]
+            [quo2.screens.info.network-breakdown :as network-breakdown]
+            [quo2.screens.info.network-amount :as network-amount]
             [re-frame.core :as re-frame]))
 
 (def screens-categories
@@ -82,7 +84,13 @@
            :component information-box/preview-information-box}
           {:name      :lowest-price
            :insets    {:top false}
-           :component lowest-price/preview-lowest-price}]
+           :component lowest-price/preview-lowest-price}
+          {:name      :network-breakdown
+           :insets    {:top false}
+           :component network-breakdown/preview-network-breakdown}
+          {:name      :network-amount
+           :insets    {:top false}
+           :component network-amount/preview}]
    :list-items [{:name      :channel
                  :insets    {:top false}
                  :component channel/preview-channel}