Quo2 Wallet: Network Link (#17049)

* Quo2 Wallet: Network Link component

src/mocks/js_dependencies.cljs

@@ -147,6 +147,8 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
     :Rect           #js {:render identity}
     :SvgUri         #js {:render identity}
     :SvgXml         #js {:render identity}
+    :LinearGradient #js {:render identity}
+    :Stop           #js {:render identity}
     :default        #js {:render identity}})
 (def react-native-webview #js {:default {}})
 (def react-native-audio-toolkit

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

@@ -0,0 +1,85 @@
+(ns quo2.components.wallet.network-link.view
+  (:require
+    [quo2.foundations.colors :as colors]
+    [quo2.theme :as quo.theme]
+    [react-native.svg :as svg]))
+
+(defn link-linear
+  [{:keys [source theme]}]
+  [svg/svg {:xmlns "http://www.w3.org/2000/svg" :width "73" :height "10" :fill :none}
+   [svg/path {:stroke (get colors/networks source) :d "M68 5H5"}]
+   [svg/circle
+    {:cx     "68"
+     :cy     "5"
+     :r      "4"
+     :fill   (colors/theme-colors colors/white colors/neutral-90 theme)
+     :stroke (get colors/networks source)}]
+   [svg/circle
+    {:cx     "5"
+     :cy     "5"
+     :r      "4"
+     :fill   (colors/theme-colors colors/white colors/neutral-90 theme)
+     :stroke (get colors/networks source)}]])
+
+(defn link-1x
+  [{:keys [source destination theme]}]
+  [svg/svg {:xmlns "http://www.w3.org/2000/svg" :width "73" :height "66" :fill :none}
+   [svg/path
+    {:stroke "url(#gradient)" :d "M68 5h-9.364c-11.046 0-20 8.954-20 20v16c0 11.046-8.955 20-20 20H5"}]
+   [svg/circle
+    {:cx     "68"
+     :cy     "5"
+     :r      "4"
+     :fill   (colors/theme-colors colors/white colors/neutral-90 theme)
+     :stroke (get colors/networks destination)}]
+   [svg/circle
+    {:cx     "5"
+     :cy     "61"
+     :r      "4"
+     :fill   (colors/theme-colors colors/white colors/neutral-90 theme)
+     :stroke (get colors/networks source)}]
+   [svg/defs
+    [svg/linear-gradient
+     {:id "gradient" :x1 "72.271" :x2 "82.385" :y1 "5" :y2 "34.155" :gradientUnits "userSpaceOnUse"}
+     [svg/stop {:stopColor (get colors/networks destination)}]
+     [svg/stop {:offset "1" :stopColor (get colors/networks source)}]]]])
+
+(defn link-2x
+  [{:keys [source destination theme]}]
+  [svg/svg
+   {:width "73" :height "122" :viewBox "0 0 73 122" :fill "none" :xmlns "http://www.w3.org/2000/svg"}
+   [svg/path
+    {:d
+     "M67.9999 5L58.6356 5C47.5899 5 38.6356 13.9543 38.6356 25L38.6356 97C38.6356 108.046 29.6813 117 18.6356 117L5.00006 117"
+     :stroke "url(#gradient)"}]
+   [svg/circle
+    {:cx     "68"
+     :cy     "5"
+     :r      "4"
+     :fill   (colors/theme-colors colors/white colors/neutral-90 theme)
+     :stroke (get colors/networks destination)}]
+   [svg/circle
+    {:cx     "5"
+     :cy     "117"
+     :r      "4"
+     :fill   (colors/theme-colors colors/white colors/neutral-90 theme)
+     :stroke (get colors/networks source)}]
+   [svg/defs
+    [svg/linear-gradient
+     {:id            "gradient"
+      :x1            "72.2711"
+      :y1            "5.00001"
+      :x2            "102.867"
+      :y2            "49.0993"
+      :gradientUnits "userSpaceOnUse"}
+     [svg/stop {:stop-color (get colors/networks destination)}]
+     [svg/stop {:offset "1" :stop-color (get colors/networks source)}]]]])
+
+(defn- view-internal
+  [{:keys [shape] :as props}]
+  (case shape
+    :linear [link-linear props]
+    :1x     [link-1x props]
+    :2x     [link-2x props]))
+
+(def view (quo.theme/with-theme view-internal))

src/quo2/core.cljs

@@ -114,6 +114,7 @@
     quo2.components.wallet.keypair.view
     quo2.components.wallet.network-amount.view
     quo2.components.wallet.network-bridge.view
+    quo2.components.wallet.network-link.view
     quo2.components.wallet.progress-bar.view
     quo2.components.wallet.summary-info.view
     quo2.components.wallet.token-input.view
@@ -323,5 +324,6 @@
 (def network-bridge quo2.components.wallet.network-bridge.view/view)
 (def progress-bar quo2.components.wallet.progress-bar.view/view)
 (def summary-info quo2.components.wallet.summary-info.view/view)
+(def network-link quo2.components.wallet.network-link.view/view)
 (def token-input quo2.components.wallet.token-input.view/view)
 (def wallet-overview quo2.components.wallet.wallet-overview.view/view)

src/react_native/svg.cljs

@@ -10,3 +10,5 @@
 (def circle (reagent/adapt-react-class Svg/Circle))
 (def svgxml (reagent/adapt-react-class Svg/SvgXml))
 (def g (reagent/adapt-react-class Svg/G))
+(def linear-gradient (reagent/adapt-react-class Svg/LinearGradient))
+(def stop (reagent/adapt-react-class Svg/Stop))

src/status_im2/contexts/quo_preview/main.cljs

@@ -115,6 +115,7 @@
     [status-im2.contexts.quo-preview.wallet.keypair :as keypair]
     [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
     [status-im2.contexts.quo-preview.wallet.network-bridge :as network-bridge]
+    [status-im2.contexts.quo-preview.wallet.network-link :as network-link]
     [status-im2.contexts.quo-preview.wallet.progress-bar :as progress-bar]
     [status-im2.contexts.quo-preview.wallet.summary-info :as summary-info]
     [status-im2.contexts.quo-preview.wallet.token-input :as token-input]
@@ -345,6 +346,8 @@
                         :component network-amount/preview}
                        {:name      :network-bridge
                         :component network-bridge/preview}
+                       {:name      :network-link
+                        :component network-link/preview}
                        {:name      :progress-bar
                         :component progress-bar/preview}
                        {:name      :summary-info

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

@@ -0,0 +1,50 @@
+(ns status-im2.contexts.quo-preview.wallet.network-link
+  (:require
+    [quo2.core :as quo]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]
+    [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def networks
+  [{:key   :ethereum
+    :value "Ethereum"}
+   {:key   :optimism
+    :value "Optimism"}
+   {:key   :arbitrum
+    :vault "Arbitrum"}])
+
+(def descriptor
+  [{:label   "Shape:"
+    :key     :shape
+    :type    :select
+    :options [{:key   :linear
+               :value "Linear"}
+              {:key   :1x
+               :value "1x"}
+              {:key   :2x
+               :value "2x"}]}
+   {:label   "Source:"
+    :key     :source
+    :type    :select
+    :options networks}
+   {:label   "Destination:"
+    :key     :destination
+    :type    :select
+    :options networks}])
+
+(defn preview
+  []
+  (let [state (reagent/atom {:shape       :linear
+                             :source      :ethereum
+                             :destination :optimism})]
+    (fn []
+      [rn/view
+       {:style {:flex               1
+                :padding-horizontal 20}}
+       [rn/view {:style {:min-height 150}}
+        [preview/customizer state descriptor]]
+       [rn/view
+        {:style {:flex        1
+                 :padding-top 40
+                 :align-items :center}}
+        [quo/network-link @state]]])))