From 53c35cb554e0d2a3fcd97e0f309b6d49b3231bc4 Mon Sep 17 00:00:00 2001 From: Ulises Manuel <90291778+ulisesmac@users.noreply.github.com> Date: Thu, 25 Jul 2024 13:35:46 -0600 Subject: [PATCH] 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 --- .../links/internal_link_card/user/view.cljs | 5 +-- src/quo/foundations/colors.cljs | 34 +++++++++++------ src/react_native/linear_gradient.cljs | 37 ++++++++++++++++++- .../accounts_selection/events_test.cljs | 2 +- .../preview/quo/list_items/saved_address.cljs | 2 +- .../preview/quo/tags/summary_tag.cljs | 2 +- 6 files changed, 63 insertions(+), 19 deletions(-) diff --git a/src/quo/components/links/internal_link_card/user/view.cljs b/src/quo/components/links/internal_link_card/user/view.cljs index 7b8e37f448..18b09dd2a3 100644 --- a/src/quo/components/links/internal_link_card/user/view.cljs +++ b/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)} - :colors - (linear-gradient-props theme customization-color)) + {:style (style/container loading? theme size) + :colors (linear-gradient-props theme customization-color)} [rn/pressable {:accessibility-label :internal-link-card :on-press on-press} diff --git a/src/quo/foundations/colors.cljs b/src/quo/foundations/colors.cljs index b58bc56a6d..cc7b14450c 100644 --- a/src/quo/foundations/colors.cljs +++ b/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) - resolved-color? (hex-string? color-without-suffix)] - (if resolved-color? + (let [color-without-suffix (get colors-map color fallback-color)] + (if (hex-string? color-without-suffix) 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)) - resolved-color (cond hex? color - (hex-string? (get colors-map color)) (get colors-map color) - :else (get-in colors-map - [color suffix]))] + (let [resolved-color (cond + (not (keyword? color)) + color + + (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)))))) diff --git a/src/react_native/linear_gradient.cljs b/src/react_native/linear_gradient.cljs index 104c0614ca..e454b6b577 100644 --- a/src/react_native/linear_gradient.cljs +++ b/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))) diff --git a/src/status_im/contexts/communities/actions/accounts_selection/events_test.cljs b/src/status_im/contexts/communities/actions/accounts_selection/events_test.cljs index 8174c4930f..94f0d33674 100644 --- a/src/status_im/contexts/communities/actions/accounts_selection/events_test.cljs +++ b/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 diff --git a/src/status_im/contexts/preview/quo/list_items/saved_address.cljs b/src/status_im/contexts/preview/quo/list_items/saved_address.cljs index defccacf0d..e1f505ae9b 100644 --- a/src/status_im/contexts/preview/quo/list_items/saved_address.cljs +++ b/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!")})] diff --git a/src/status_im/contexts/preview/quo/tags/summary_tag.cljs b/src/status_im/contexts/preview/quo/tags/summary_tag.cljs index 9344e78871..95ac066c84 100644 --- a/src/status_im/contexts/preview/quo/tags/summary_tag.cljs +++ b/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"