quo2: network bridge

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

@@ -1 +1,39 @@
-(ns quo2.components.wallet.network-bridge.component-spec)
+(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/network-bridge
+               {:amount  "50 SNT"
+                :network :ethereum
+                :state   :default}])
+    (h/is-truthy (h/get-by-text "50 SNT")))
+
+  (h/test "Network label renders"
+    (h/render [network-bridge/network-bridge
+               {:amount  "50 SNT"
+                :network :optimism
+                :state   :default}])
+    (h/is-truthy (h/get-by-text "Optimism")))
+
+  (h/test "Locked state"
+    (h/render [network-bridge/network-bridge
+               {:amount  "50 SNT"
+                :network :optimism
+                :state   :locked}])
+    (h/is-truthy (h/get-by-label-text :lock)))
+
+  (h/test "Loading state"
+    (h/render [network-bridge/network-bridge
+               {:amount  "50 SNT"
+                :network :optimism
+                :state   :loading}])
+    (h/is-truthy (h/get-by-label-text :loading)))
+
+  (h/test "Disabled state"
+    (h/render [network-bridge/network-bridge
+               {:amount  "50 SNT"
+                :network :optimism
+                :state   :disabled}])
+    (h/has-style (h/get-by-label-text :container) {:opacity 0.3})))

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

@@ -1 +1,26 @@
-(ns quo2.components.wallet.network-bridge.style)
+(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 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

@@ -1,22 +1,45 @@
 (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]))
-
-
+    [react-native.core :as rn]
+    [quo2.components.wallet.network-bridge.style :as style]))
 
 (defn network-bridge-internal
-  []
-  (let [network :ethereum]
-    [rn/view {:style {:width              136
-                      :height             44
-                      :border-width       1
-                      :border-radius      12
-                      :padding-vertical   5
-                      :padding-horizontal 8
-                      :border-color       (get colors/networks network)}} [text/text {:size   :paragraph-2
-                                                                                      :weight :medium} "50 SNT"]]))
+  [{:keys [theme network state amount]}]
+  (let [network-text (if (= network :ethereum) "Mainnet" (string/capitalize (name network)))]
+    [rn/view
+     {:style               (style/container network state)
+      :accessibility-label :container}
+     (if (= state :loading)
+       [rn/view
+        {:style               (style/loading-skeleton theme)
+         :accessibility-label :loading}]
+       [rn/view
+        {:style {:flex-direction  :row
+                 :justify-content :space-between}}
+        [text/text
+         {:size   :paragraph-2
+          :weight :medium} amount]
+        (when (= state :locked)
+          [icon/icon :i/locked
+           {:size                12
+            :color               (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+            :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 network-bridge (quo.theme/with-theme network-bridge-internal))

src/quo2/foundations/resources.cljs

@@ -9,3 +9,12 @@
 (defn get-image
   [k]
   (get ui 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")})
+
+(defn get-network
+  [k]
+  (get networks k))

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

@@ -7,25 +7,35 @@
 
 
 (def descriptor
-  [{:label "Amount:"
-    :key   :amount
-    :type  :text}
-   {:label   "Token:"
-    :key     :token
+  [{:label   "Network:"
+    :key     :network
     :type    :select
-    :options [{:key   :eth
-               :value "ETH"}
-              {:key   :snt
-               :value "SNT"}]}])
+    :options [{:key   :ethereum
+               :value "Ethereum"}
+              {:key   :optimism
+               :value "Optimism"}
+              {:key   :arbitrum
+               :value "Arbitrum"}]}
+   {:label   "State:"
+    :key     :state
+    :type    :select
+    :options [{:key :default :value :default}
+              {:key :locked :value :locked}
+              {:key :loading :value :loading}
+              {:key :disabled :value :disabled}]}])
 
 (defn preview
   []
-  (let [state (reagent/atom {:amount "5.123456"
-                             :token  :eth})]
+  (let [state (reagent/atom {:network :ethereum
+                             :state   :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]]
-        [quo/network-bridge @state]]])))
+        [rn/view
+         {:style {:flex        1
+                  :margin-top  50
+                  :align-items :center}} [quo/network-bridge @state]]]])))