Quo2 Wallet: network bridge (#16793)

* feat: quo2 network bridge

src/quo2/components/wallet/network_bridge/component_spec.cljs

@@ -0,0 +1,39 @@
+(ns quo2.components.wallet.network-bridge.component-spec
+  (:require [test-helpers.component :as h]
+            [quo2.components.wallet.network-bridge.view :as network-bridge]))
+
+(h/describe "Wallet: Network Bridge"
+  (h/test "Amount renders"
+    (h/render [network-bridge/view
+               {:amount  "50 SNT"
+                :network :ethereum
+                :status  :default}])
+    (h/is-truthy (h/get-by-text "50 SNT")))
+
+  (h/test "Network label renders"
+    (h/render [network-bridge/view
+               {:amount  "50 SNT"
+                :network :optimism
+                :status  :default}])
+    (h/is-truthy (h/get-by-text "Optimism")))
+
+  (h/test "Locked state"
+    (h/render [network-bridge/view
+               {:amount  "50 SNT"
+                :network :optimism
+                :status  :locked}])
+    (h/is-truthy (h/get-by-label-text :lock)))
+
+  (h/test "Loading state"
+    (h/render [network-bridge/view
+               {:amount  "50 SNT"
+                :network :optimism
+                :status  :loading}])
+    (h/is-truthy (h/get-by-label-text :loading)))
+
+  (h/test "Disabled state"
+    (h/render [network-bridge/view
+               {:amount  "50 SNT"
+                :network :optimism
+                :status  :disabled}])
+    (h/has-style (h/get-by-label-text :container) {:opacity 0.3})))

src/quo2/components/wallet/network_bridge/style.cljs

@@ -0,0 +1,35 @@
+(ns quo2.components.wallet.network-bridge.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn container
+  [network state]
+  {:width              136
+   :height             44
+   :border-width       1
+   :border-radius      12
+   :padding-vertical   5
+   :padding-horizontal 8
+   :border-color       (get colors/networks network)
+   :opacity            (when (= state :disabled) 0.3)})
+
+(defn add-container
+  []
+  {:border-style       :dashed
+   :border-color       (colors/theme-colors colors/neutral-30 colors/neutral-70)
+   :justify-content    :center
+   :align-items        :center
+   :padding-vertical   0
+   :padding-horizontal 0})
+
+(defn loading-skeleton
+  [theme]
+  {:width            32
+   :height           10
+   :border-radius    3
+   :margin-vertical  4
+   :background-color (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)})
+
+(def network-icon
+  {:width        12
+   :height       12
+   :margin-right 4})

src/quo2/components/wallet/network_bridge/view.cljs

@@ -0,0 +1,56 @@
+(ns quo2.components.wallet.network-bridge.view
+  (:require
+    [clojure.string :as string]
+    [quo2.components.icon :as icon]
+    [quo2.components.markdown.text :as text]
+    [quo2.foundations.colors :as colors]
+    [quo2.foundations.resources :as resources]
+    [quo2.theme :as quo.theme]
+    [react-native.core :as rn]
+    [quo2.components.wallet.network-bridge.style :as style]))
+
+
+(defn network-bridge-add
+  [{:keys [network state]}]
+  [rn/view {:style (merge (style/container network state) (style/add-container))}
+   [icon/icon :i/add-circle {:size 12 :no-color true}]])
+
+(defn view-internal
+  [{:keys [theme network status amount] :as args}]
+  (let [network-text (if (= network :ethereum) "Mainnet" (string/capitalize (name network)))]
+    (if (= status :add)
+      [network-bridge-add args]
+      [rn/view
+       {:style               (style/container network status)
+        :accessible          true
+        :accessibility-label :container}
+       (if (= status :loading)
+         [rn/view
+          {:style               (style/loading-skeleton theme)
+           :accessible          true
+           :accessibility-label :loading}]
+         [rn/view
+          {:style {:flex-direction  :row
+                   :justify-content :space-between}}
+          [text/text
+           {:size   :paragraph-2
+            :weight :medium} amount]
+          (when (= status :locked)
+            [icon/icon :i/locked
+             {:size                12
+              :color               (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+              :accessible          true
+              :accessibility-label :lock}])])
+       [rn/view
+        {:style {:flex-direction :row
+                 :align-items    :center}}
+        [rn/image
+         {:source (resources/networks network)
+          :style  style/network-icon}]
+        [text/text
+         {:size   :label
+          :weight :medium
+          :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
+         network-text]]])))
+
+(def view (quo.theme/with-theme view-internal))

src/quo2/core.cljs

@@ -101,7 +101,8 @@
     quo2.components.tags.tags
     quo2.components.tags.token-tag
     quo2.components.text-combinations.title.view
-    quo2.components.wallet.network-amount.view))
+    quo2.components.wallet.network-amount.view
+    quo2.components.wallet.network-bridge.view))
 
 (def separator quo2.components.common.separator.view/separator)
 
@@ -284,10 +285,9 @@
 (def url-preview-list quo2.components.links.url-preview-list.view/view)
 (def link-preview quo2.components.links.link-preview.view/view)
 
-
 ;;;; GRADIENT
 (def gradient-cover quo2.components.gradient.gradient-cover.view/view)
 
 ;;;; WALLET
 (def network-amount quo2.components.wallet.network-amount.view/view)
-
+(def network-bridge quo2.components.wallet.network-bridge.view/view)

src/quo2/core_spec.cljs

@@ -47,4 +47,5 @@
     [quo2.components.settings.category.component-spec]
     [quo2.components.share.share-qr-code.component-spec]
     [quo2.components.tags.status-tags-component-spec]
-    [quo2.components.wallet.network-amount.component-spec]))
+    [quo2.components.wallet.network-amount.component-spec]
+    [quo2.components.wallet.network-bridge.component-spec]))

src/quo2/foundations/colors.cljs

@@ -292,3 +292,15 @@
 (defn dark?
   []
   (theme/dark?))
+
+;;;; Networks
+
+(def networks
+  {:ethereum "#758EEB"
+   :optimism "#E76E6E"
+   :arbitrum "#6BD5F0"
+   :zkSync   "#9FA0FE"
+   :hermez   "#EB8462"
+   :xDai     "#3FC0BD"
+   :polygon  "#AD71F3"
+   :unknown  "#EEF2F5"})

src/quo2/foundations/resources.cljs

@@ -23,3 +23,9 @@
 (defn get-token
   [k]
   (get tokens k))
+
+(def networks
+  {:ethereum (js/require "../resources/images/tokens/mainnet/ETH.png")
+   :optimism (js/require "../resources/images/tokens/mainnet/OP.png")
+   :arbitrum (js/require "../resources/images/tokens/mainnet/ARB.png")})
+

src/status_im2/contexts/quo_preview/main.cljs

@@ -101,7 +101,8 @@
     [status-im2.contexts.quo-preview.loaders.skeleton :as skeleton]
     [status-im2.contexts.quo-preview.community.channel-actions :as channel-actions]
     [status-im2.contexts.quo-preview.gradient.gradient-cover :as gradient-cover]
-    [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]))
+    [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
+    [status-im2.contexts.quo-preview.wallet.network-bridge :as network-bridge]))
 
 (def screens-categories
   {:foundations       [{:name      :shadows
@@ -391,7 +392,10 @@
                         :component title/preview-title}]
    :wallet            [{:name      :network-amount
                         :options   {:topBar {:visible true}}
-                        :component network-amount/preview}]
+                        :component network-amount/preview}
+                       {:name      :network-bridge
+                        :options   {:topBar {:visible true}}
+                        :component network-bridge/preview}]
    :keycard           [{:name      :keycard-component
                         :options   {:topBar {:visible true}}
                         :component keycard/preview-keycard}]})

src/status_im2/contexts/quo_preview/wallet/network_bridge.cljs

@@ -0,0 +1,42 @@
+(ns status-im2.contexts.quo-preview.wallet.network-bridge
+  (:require
+    [quo2.core :as quo]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]
+    [status-im2.contexts.quo-preview.preview :as preview]))
+
+
+(def descriptor
+  [{:label   "Network:"
+    :key     :network
+    :type    :select
+    :options [{:key   :ethereum
+               :value "Ethereum"}
+              {:key   :optimism
+               :value "Optimism"}
+              {:key   :arbitrum
+               :value "Arbitrum"}]}
+   {:label   "Status:"
+    :key     :status
+    :type    :select
+    :options [{:key :default :value :default}
+              {:key :locked :value :locked}
+              {:key :loading :value :loading}
+              {:key :disabled :value :disabled}
+              {:key :add :value :add}]}])
+
+(defn preview
+  []
+  (let [state (reagent/atom {:network :ethereum
+                             :status  :default
+                             :amount  "50 SNT"})]
+    (fn []
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view
+        {:style {:flex               1
+                 :padding-horizontal 20}}
+        [rn/view {:style {:min-height 150}} [preview/customizer state descriptor]]
+        [rn/view
+         {:style {:flex        1
+                  :margin-top  50
+                  :align-items :center}} [quo/network-bridge @state]]]])))