feat: add ability to tap to disable from networks in send & bridge flow

src/quo/components/wallet/network_link/helpers.cljs

@@ -0,0 +1,23 @@
+(ns quo.components.wallet.network-link.helpers)
+
+(def ^:private central-figure-width 63)
+
+(defn calculate-side-lines-path-1x
+  "Calculates the `d` attribute for the side lines based on the SVG width."
+  [width]
+  (let [side-offset (/ (- width central-figure-width) 2)]
+    {:left  (str "M0 57 L" side-offset " 57")
+     :right (str "M" (+ side-offset central-figure-width) " 1 L" width " 1")}))
+
+(defn calculate-transform
+  "Calculates the transform attribute for the central figure based on the SVG width."
+  [width]
+  (let [translate-x (/ (- width central-figure-width) 2)]
+    (str "translate(" translate-x " 0)")))
+
+(defn calculate-side-lines-path-2x
+  "Calculates the `d` attribute for the side lines based on the SVG width."
+  [width]
+  (let [side-offset (/ (- width central-figure-width) 2)]
+    {:left  (str "M0 113 L" side-offset " 113")
+     :right (str "M" (+ side-offset central-figure-width) " 1 L" width " 1")}))

src/quo/components/wallet/network_link/style.cljs

@@ -0,0 +1,34 @@
+(ns quo.components.wallet.network-link.style)
+
+(def left-circle-container
+  {:position :absolute
+   :left     -3})
+
+(def right-circle-container
+  {:position :absolute
+   :right    -3})
+
+(def bottom-left-circle-container
+  {:position :absolute
+   :bottom   -3
+   :left     -3})
+
+(def top-right-circle-container
+  {:position :absolute
+   :top      -3
+   :right    -3})
+
+(def link-linear-container
+  {:flex-direction :row
+   :align-items    :center
+   :height         10})
+
+(def link-1x-container
+  {:flex            1
+   :height          58
+   :justify-content :center})
+
+(def link-2x-container
+  {:flex            1
+   :height          114
+   :justify-content :center})

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

@@ -1,82 +1,151 @@
 (ns quo.components.wallet.network-link.view
   (:require
+    [oops.core :refer [oget]]
+    [quo.components.wallet.network-link.helpers :as helpers]
     [quo.components.wallet.network-link.schema :as component-schema]
+    [quo.components.wallet.network-link.style :as style]
     [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [react-native.svg :as svg]
+    [reagent.core :as reagent]
     [schema.core :as schema]))
 
-(defn link-linear
-  [{:keys [source theme]}]
-  [svg/svg {:xmlns "http://www.w3.org/2000/svg" :width "73" :height "10" :fill :none}
-   [svg/path {:stroke (colors/resolve-color source theme) :d "M68 5H5"}]
-   [svg/circle
-    {:cx     "68"
-     :cy     "5"
-     :r      "4"
-     :fill   (colors/theme-colors colors/white colors/neutral-90 theme)
-     :stroke (colors/resolve-color source theme)}]
+(defn- circle
+  [fill stroke]
+  [svg/svg
+   {:height "8"
+    :width  "8"}
    [svg/circle
-    {:cx     "5"
-     :cy     "5"
-     :r      "4"
-     :fill   (colors/theme-colors colors/white colors/neutral-90 theme)
-     :stroke (colors/resolve-color source theme)}]])
+    {:cx          "4"
+     :cy          "4"
+     :r           "3.5"
+     :fill        fill
+     :stroke      stroke
+     :strokeWidth "1"}]])
 
-(defn link-1x
-  [{:keys [source destination theme]}]
-  [svg/svg {:xmlns "http://www.w3.org/2000/svg" :width "73" :height "66" :fill :none}
+(defn- line
+  [stroke width]
+  [svg/svg
+   {:height   "10"
+    :width    "100%"
+    :view-box (str "0 0 " width " 10")}
    [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 (colors/resolve-color destination theme)}]
-   [svg/circle
-    {:cx     "5"
-     :cy     "61"
-     :r      "4"
-     :fill   (colors/theme-colors colors/white colors/neutral-90 theme)
-     :stroke (colors/resolve-color source theme)}]
-   [svg/defs
-    [svg/linear-gradient
-     {:id "gradient" :x1 "72.271" :x2 "82.385" :y1 "5" :y2 "34.155" :gradientUnits "userSpaceOnUse"}
-     [svg/stop {:stopColor (colors/resolve-color destination theme)}]
-     [svg/stop {:offset "1" :stopColor (colors/resolve-color source theme)}]]]])
+    {:d            (str "M0,5 L" width ",5")
+     :stroke       stroke
+     :stroke-width "1"}]])
+
+(defn link-linear
+  []
+  (let [container-width (reagent/atom 100)]
+    (fn [{:keys [source theme]}]
+      (let [stroke-color (colors/resolve-color source theme)
+            fill-color   (colors/theme-colors colors/white colors/neutral-90 theme)]
+        [rn/view
+         {:style     style/link-linear-container
+          :on-layout (fn [e]
+                       (reset! container-width
+                         (oget e :nativeEvent :layout :width)))}
+         [line stroke-color @container-width]
+         [rn/view {:style style/left-circle-container}
+          [circle fill-color stroke-color]]
+         [rn/view {:style style/right-circle-container}
+          [circle fill-color stroke-color]]]))))
+
+(defn link-1x
+  []
+  (let [container-width (reagent/atom 100)
+        stroke-color    "url(#gradient)"]
+    (fn [{:keys [source destination theme]}]
+      (let [source-color      (colors/resolve-color source theme)
+            destination-color (colors/resolve-color destination theme)
+            fill-color        (colors/theme-colors colors/white colors/neutral-90 theme)
+            view-box          (str "0 0 " @container-width " 58")
+            side-lines-path   (helpers/calculate-side-lines-path-1x @container-width)
+            central-transform (helpers/calculate-transform @container-width)]
+        [rn/view
+         {:style     style/link-1x-container
+          :on-layout (fn [e]
+                       (reset! container-width
+                         (oget e :nativeEvent :layout :width)))}
+         [svg/svg
+          {:xmlns    "http://www.w3.org/2000/svg"
+           :height   "100%"
+           :width    "100%"
+           :view-box view-box
+           :fill     :none}
+          [svg/path
+           {:d      (:left side-lines-path)
+            :stroke source-color}]
+          [svg/path
+           {:d
+            "M63 1L53.6356 1C42.5899 1 33.6356 9.9543 33.6356 21L33.6356 37C33.6356 48.0457 24.6813 57 13.6356 57L2.85889e-05 57"
+            :transform central-transform
+            :stroke stroke-color}]
+          [svg/path
+           {:d      (:right side-lines-path)
+            :stroke destination-color}]
+          [svg/defs
+           [svg/linear-gradient
+            {:id             "gradient"
+             :x1             "72.271"
+             :x2             "82.385"
+             :y1             "5"
+             :y2             "34.155"
+             :gradient-units "userSpaceOnUse"}
+            [svg/stop {:stop-color (colors/resolve-color destination theme)}]
+            [svg/stop {:offset "1" :stop-color (colors/resolve-color source theme)}]]]]
+         [rn/view {:style style/bottom-left-circle-container}
+          [circle fill-color source-color]]
+         [rn/view {:style style/top-right-circle-container}
+          [circle fill-color destination-color]]]))))
 
 (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 (colors/resolve-color destination theme)}]
-   [svg/circle
-    {:cx     "5"
-     :cy     "117"
-     :r      "4"
-     :fill   (colors/theme-colors colors/white colors/neutral-90 theme)
-     :stroke (colors/resolve-color source theme)}]
-   [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 (colors/resolve-color destination theme)}]
-     [svg/stop {:offset "1" :stop-color (colors/resolve-color source theme)}]]]])
+  []
+  (let [container-width (reagent/atom 100)
+        stroke-color    "url(#gradient)"]
+    (fn [{:keys [source destination theme]}]
+      (let [source-color      (colors/resolve-color source theme)
+            destination-color (colors/resolve-color destination theme)
+            fill-color        (colors/theme-colors colors/white colors/neutral-90 theme)
+            view-box          (str "0 0 " @container-width " 114")
+            side-lines-path   (helpers/calculate-side-lines-path-2x @container-width)
+            central-transform (helpers/calculate-transform @container-width)]
+        [rn/view
+         {:style     style/link-2x-container
+          :on-layout #(reset! container-width
+                        (oget % :nativeEvent :layout :width))}
+         [svg/svg
+          {:xmlns    "http://www.w3.org/2000/svg"
+           :height   "100%"
+           :width    "100%"
+           :view-box view-box
+           :fill     :none}
+          [svg/path
+           {:d      (:left side-lines-path)
+            :stroke source-color}]
+          [svg/path
+           {:d
+            "M62.9999 1L53.6356 1C42.5899 1 33.6356 9.9543 33.6356 21L33.6356 93C33.6356 104.046 24.6813 113 13.6356 113L5.71778e-05 113"
+            :transform central-transform
+            :stroke stroke-color}]
+          [svg/path
+           {:d      (:right side-lines-path)
+            :stroke destination-color}]
+          [svg/defs
+           [svg/linear-gradient
+            {:id             "gradient"
+             :x1             "72.2711"
+             :y1             "5.00001"
+             :x2             "102.867"
+             :y2             "49.0993"
+             :gradient-units "userSpaceOnUse"}
+            [svg/stop {:stop-color (colors/resolve-color destination theme)}]
+            [svg/stop {:offset "1" :stop-color (colors/resolve-color source theme)}]]]]
+         [rn/view {:style style/bottom-left-circle-container}
+          [circle fill-color source-color]]
+         [rn/view {:style style/top-right-circle-container}
+          [circle fill-color destination-color]]]))))
 
 (defn- view-internal
   [{:keys [shape container-style] :as props}]

src/status_im/constants.cljs

@@ -448,6 +448,8 @@
 (def ^:const optimism-short-name "opt")
 (def ^:const arbitrum-short-name "arb1")
 
+(def ^:const default-multichain-address-prefix "eth:opt:arb1:")
+
 (def ^:const mainnet-abbreviated-name "Eth.")
 (def ^:const optimism-abbreviated-name "Opt.")
 (def ^:const arbitrum-abbreviated-name "Arb1.")

src/status_im/contexts/preview/quo/wallet/network_link.cljs

@@ -1,6 +1,7 @@
 (ns status-im.contexts.preview.quo.wallet.network-link
   (:require
     [quo.core :as quo]
+    [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im.contexts.preview.quo.preview :as preview]))
 
@@ -23,17 +24,21 @@
     :options networks}
    {:key     :destination
     :type    :select
-    :options networks}])
+    :options networks}
+   {:key  :width
+    :type :number}])
 
 (defn view
   []
   (let [state (reagent/atom {:shape       :linear
                              :source      :ethereum
-                             :destination :optimism})]
+                             :destination :optimism
+                             :width       63})]
     (fn []
       [preview/preview-container
        {:state                     state
         :descriptor                descriptor
         :component-container-style {:padding-top 40
                                     :align-items :center}}
-       [quo/network-link @state]])))
+       [rn/view {:style {:width (max (:width @state) 63)}}
+        [quo/network-link @state]]])))

src/status_im/contexts/wallet/bridge/input_amount/view.cljs

@@ -15,6 +15,7 @@
      :button-one-label  (i18n/label :t/confirm-bridge)
      :button-one-props  {:icon-left :i/bridge}
      :on-navigate-back  (fn []
+                          (rf/dispatch [:wallet/clean-disabled-from-networks])
                           (rf/dispatch [:navigate-back]))}]])
 
 (def view (quo.theme/with-theme view-internal))

src/status_im/contexts/wallet/common/utils/networks.cljs

@@ -0,0 +1,18 @@
+(ns status-im.contexts.wallet.common.utils.networks
+  (:require [clojure.string :as string]
+            [status-im.constants :as constants]
+            [status-im.contexts.wallet.common.utils :as utils]))
+
+(defn resolve-receiver-networks
+  [{:keys [prefix testnet-enabled? goerli-enabled?]}]
+  (let [prefix     (if (string/blank? prefix)
+                     constants/default-multichain-address-prefix
+                     prefix)
+        prefix-seq (string/split prefix #":")]
+    (->> prefix-seq
+         (remove string/blank?)
+         (mapv
+          #(utils/network->chain-id
+            {:network          %
+             :testnet-enabled? testnet-enabled?
+             :goerli-enabled?  goerli-enabled?})))))

src/status_im/contexts/wallet/common/utils/send.cljs

@@ -1,5 +1,6 @@
 (ns status-im.contexts.wallet.common.utils.send
-  (:require [utils.money :as money]))
+  (:require [clojure.string :as string]
+            [utils.money :as money]))
 
 (defn calculate-gas-fee
   [data]
@@ -20,3 +21,17 @@
 (defn calculate-full-route-gas-fee
   [route]
   (reduce money/add (map calculate-gas-fee route)))
+
+(defn find-affordable-networks
+  [{:keys [balances-per-chain input-value selected-networks disabled-chain-ids]}]
+  (let [input-value (if (string/blank? input-value) 0 input-value)]
+    (->> balances-per-chain
+         (filter (fn [[_
+                       {:keys [balance chain-id]
+                        :or   {balance 0}}]]
+                   (and
+                    (money/greater-than-or-equals (money/bignumber balance)
+                                                  (money/bignumber input-value))
+                    (some #(= % chain-id) selected-networks)
+                    (not-any? #(= % chain-id) disabled-chain-ids))))
+         (map first))))