fix(wallet): Linear gradient exception on invalid colors for watched account cards (#20854)

* Create a linear-gradient wrapper to avoid crashes and notify color errors

* Fix references to the flamingo color

* Add customization color fallback

src/quo/components/links/internal_link_card/user/view.cljs

@@ -65,9 +65,8 @@
         :style               (style/container loading? theme size)}
        [loading-view theme]]
       [linear-gradient/linear-gradient
-       (assoc {:style (style/container loading? theme size)}
+       {:style  (style/container loading? theme size)
-              :colors
+        :colors (linear-gradient-props theme customization-color)}
-              (linear-gradient-props theme customization-color))
        [rn/pressable
         {:accessibility-label :internal-link-card
          :on-press            on-press}

src/quo/foundations/colors.cljs

@@ -5,7 +5,7 @@
     [react-native.platform :as platform]))
 
 (def account-colors
-  [:blue :yellow :purple :turquoise :magenta :sky :orange :army :flamingo :camel :copper])
+  [:blue :yellow :purple :turquoise :magenta :sky :orange :army :pink :camel :copper])
 
 (defn alpha
   [value opacity]
@@ -44,6 +44,13 @@
         (alpha light-color light-opacity)
         (alpha dark-color dark-opacity))))))
 
+(defn valid-color?
+  [color]
+  (or (keyword? color)
+      (and (string? color)
+           (or (string/starts-with? color "#")
+               (string/starts-with? color "rgb")))))
+
 
 ;;;;Neutral
 
@@ -239,7 +246,7 @@
                60 "#CC6438"}
    :army      {50 "#216266"
                60 "#1A4E52"}
-   :flamingo  {50 "#F66F8F"
+   :pink      {50 "#F66F8F"
                60 "#C55972"}
    :purple    {50 "#7140FD"
                60 "#5A33CA"}
@@ -316,13 +323,14 @@
   [s]
   (and (string? s) (string/starts-with? s "#")))
 
+(def fallback-color (customization :blue))
+
 (defn- get-from-colors-map
   [color suffix]
-  (let [color-without-suffix (get colors-map color)
+  (let [color-without-suffix (get colors-map color fallback-color)]
-        resolved-color?      (hex-string? color-without-suffix)]
+    (if (hex-string? color-without-suffix)
-    (if resolved-color?
       color-without-suffix
-      (get-in colors-map [color suffix]))))
+      (get color-without-suffix suffix))))
 
 (defn- resolve-color*
   ([color theme]
@@ -356,11 +364,15 @@
      ([color suffix]
       (custom-color color suffix nil))
      ([color suffix opacity]
-      (let [hex?           (not (keyword? color))
+      (let [resolved-color (cond
-            resolved-color (cond hex?                                 color
+                             (not (keyword? color))
-                                 (hex-string? (get colors-map color)) (get colors-map color)
+                             color
-                                 :else                                (get-in colors-map
+
-                                                                              [color suffix]))]
+                             (hex-string? (get colors-map color))
+                             (get colors-map color fallback-color)
+
+                             :else
+                             (get-in colors-map [color suffix] (get fallback-color suffix)))]
         (if opacity
           (alpha resolved-color (/ opacity 100))
           resolved-color))))))

src/react_native/linear_gradient.cljs

@@ -1,6 +1,39 @@
 (ns react-native.linear-gradient
   (:require
     ["react-native-linear-gradient" :default LinearGradient]
-    [reagent.core :as reagent]))
+    [quo.foundations.colors :as colors]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]
+    [taoensso.timbre :as log]))
 
-(def linear-gradient (reagent/adapt-react-class LinearGradient))
+(def ^:private linear-gradient* (reagent/adapt-react-class LinearGradient))
+
+(defn- split-valid-colors
+  [acc idx color]
+  (let [color? (colors/valid-color? color)]
+    (cond-> acc
+      :always      (update :safe-colors conj (if color? color "transparent"))
+      (not color?) (update :wrong-colors conj [idx color]))))
+
+(defn- wrong-colors-str
+  [colors]
+  (reduce-kv (fn [s idx color]
+               (str s "Index: " idx ", color: " (prn-str color)))
+             "Invalid color values in vector passed to Linear Gradient:\n"
+             colors))
+
+(defn linear-gradient
+  [props & children]
+  (when ^boolean js/goog.DEBUG
+    (assert (vector? (:colors props))))
+  (let [{:keys [wrong-colors safe-colors]} (rn/use-memo
+                                            (fn []
+                                              (reduce-kv split-valid-colors
+                                                         {:safe-colors  []
+                                                          :wrong-colors {}}
+                                                         (:colors props)))
+                                            [(:colors props)])]
+    (when (seq wrong-colors)
+      (log/error (wrong-colors-str wrong-colors)))
+    (into [linear-gradient* (assoc props :colors safe-colors)]
+          children)))

src/status_im/contexts/communities/actions/accounts_selection/events_test.cljs

@@ -26,7 +26,7 @@
    "0xD" {:address   "0xD"
           :operable? false
           :position  3
-          :color     :flamingo
+          :color     :pink
           :emoji     "🦩"}})
 
 (def permissioned-accounts

src/status_im/contexts/preview/quo/list_items/saved_address.cljs

@@ -14,7 +14,7 @@
   []
   (let [state (reagent/atom {:type                :default
                              :customization-color :blue
-                             :account-color       :flamingo
+                             :account-color       :pink
                              :title               "Alisher Yakupov"
                              :address             "0x21a...49e"
                              :on-options-press    #(js/alert "Options button pressed!")})]

src/status_im/contexts/preview/quo/tags/summary_tag.cljs

@@ -28,7 +28,7 @@
     {:image-source (quo.resources/get-network :ethereum)
      :label        "Mainnet"}
     :saved-address
-    {:customization-color :flamingo
+    {:customization-color :pink
      :label               "Peter Lambo"}
     :account
     {:label               "Account"