Quo2: keypair blur (#17294)

* quo2: keypair blur

ios/Podfile.lock

@@ -772,7 +772,15 @@ SPEC CHECKSUMS:
   RNLanguages: 962e562af0d34ab1958d89bcfdb64fafc37c513e
   RNPermissions: ad71dd4f767ec254f2cd57592fbee02afee75467
   RNReactNativeHapticFeedback: 2566b468cc8d0e7bb2f84b23adc0f4614594d071
+<<<<<<< HEAD
+<<<<<<< HEAD
   RNReanimated: 43adb0307a62c1ce9694f36f124ca3b51a15272a
+=======
+  RNReanimated: 06a228c5a245ef7b5b03f0efc29d76ce4db9031c
+>>>>>>> c50db2fd2 (lint)
+=======
+  RNReanimated: d0db0ee059c33381bca787a2193c27e52750ccaf
+>>>>>>> a52fda25e (lint)
   RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
   RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8
   RNSVG: 80584470ff1ffc7994923ea135a3e5ad825546b9

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

@@ -2,14 +2,19 @@
   (:require [quo2.foundations.colors :as colors]))
 
 (defn container
-  [selected? customization-color theme]
+  [{:keys [blur? customization-color theme selected?]}]
-  {:border-radius  20
+  {:flex           1
+   :border-radius  20
    :border-width   1
    :border-color   (if selected?
+                     (if blur?
+                       colors/white
                        (colors/theme-colors (colors/custom-color customization-color 50)
                                             (colors/custom-color customization-color 60)
-                                          theme)
+                                            theme))
-                     (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))
+                     (if blur?
+                       colors/white-opa-5
+                       (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)))
    :padding-bottom 8})
 
 (def header-container

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

@@ -25,7 +25,8 @@
        (if (= stored :on-device) (i18n/label :t/on-device) (i18n/label :t/on-keycard))))
 
 (defn avatar
-  [type full-name customization-color]
+  [{:keys [type details customization-color]}]
+  (let [{:keys [full-name]} details]
     (if (= type :default-keypair)
       [user-avatar/user-avatar
        {:full-name           full-name
@@ -33,12 +34,13 @@
         :size                :small
         :customization-color customization-color}]
       [icon-avatar/icon-avatar
-     {:size    :size/s-32
+       {:size    :size-32
         :icon    :i/placeholder
-      :border? true}]))
+        :border? true}])))
 
 (defn title-view
-  [full-name action selected? type customization-color on-options-press theme]
+  [{:keys [details action selected? type blur? customization-color on-options-press theme]}]
+  (let [{:keys [full-name]} details]
     [rn/view
      {:style               style/title-container
       :accessibility-label :title}
@@ -47,47 +49,54 @@
      (if (= action :selector)
        [selectors/radio
         {:checked?            selected?
+         :blur?               blur?
          :customization-color customization-color}]
        [rn/pressable {:on-press on-options-press}
         [icon/icon :i/options
-       {:color               (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+         {:color               (if blur?
-        :accessibility-label :options-button}]])])
+                                 colors/white-opa-70
+                                 (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))
+          :accessibility-label :options-button}]])]))
 
 (defn details-view
-  [address stored theme]
+  [{:keys [details stored blur? theme]}]
+  (let [{:keys [address]} details]
     [rn/view
      {:style {:flex-direction :row
               :align-items    :center}}
      [text/text
       {:size                :paragraph-2
        :accessibility-label :details
-     :style               {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
+       :style               {:color (if blur?
+                                      colors/white-opa-40
+                                      (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}}
       (details-string address stored)]
      (when (= stored :on-keycard)
        [rn/view {:style {:margin-left 4}}
         [icon/icon :i/keycard-card
          {:size  16
-        :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]])])
+          :color (if blur?
+                   colors/white-opa-40
+                   (colors/theme-colors colors/neutral-50 colors/neutral-40))}]])]))
 
 (defn- view-internal
   []
   (let [selected? (reagent/atom true)]
-    (fn [{:keys [theme accounts customization-color type details stored action on-options-press]}]
+    (fn [{:keys [accounts action] :as props}]
-      (let [{:keys [address full-name]} details]
       [rn/pressable
-         {:style    (style/container @selected? customization-color theme)
+       {:style    (style/container (merge props {:selected? @selected?}))
         :on-press #(when (= action :selector) (reset! selected? (not @selected?)))}
        [rn/view {:style style/header-container}
-          [avatar type full-name customization-color]
+        [avatar props]
         [rn/view
          {:style {:margin-left 8
                   :flex        1}}
-           [title-view full-name action @selected? type customization-color on-options-press theme]
+         [title-view (assoc props :selected? @selected?)]
-           [details-view address stored theme]]]
+         [details-view props]]]
        [rn/flat-list
         {:data      accounts
          :render-fn account-list-card/view
          :separator [rn/view {:style {:height 8}}]
-           :style     {:padding-horizontal 8}}]]))))
+         :style     {:padding-horizontal 8}}]])))
 
 (def view (quo.theme/with-theme view-internal))

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

@@ -52,6 +52,10 @@
     :state         :default
     :action        :none}])
 
+(defn get-accounts
+  [blur?]
+  (map (fn [account] (assoc account :blur? blur?)) accounts))
+
 (def descriptor
   [{:label   "Stored:"
     :key     :stored
@@ -74,7 +78,9 @@
                :value "Default keypair"}
               {:key   :other
                :value "Other"}]}
-   (preview/customization-color-option)])
+   (preview/customization-color-option)
+   {:key  :blur?
+    :type :boolean}])
 
 (def default-details
   {:full-name "John Doe"
@@ -84,16 +90,20 @@
 
 (defn preview
   []
-  (let [state (reagent/atom {:accounts            accounts
+  (let [state (reagent/atom {:customization-color :blue
-                             :customization-color :blue
                              :type                :default-keypair
                              :stored              :on-device
                              :on-options-press    #(js/alert "Options pressed")
-                             :action              :selector})]
+                             :action              :selector
+                             :blur?               false})]
     (fn []
       [preview/preview-container
        {:state                 state
-        :descriptor descriptor}
+        :descriptor            descriptor
+        :blur?                 (:blur? @state)
+        :show-blur-background? true
+        :blur-dark-only?       true
+        :blur-height           400}
        [rn/view
         {:style {:padding-vertical 30
                  :flex-direction   :row
@@ -101,4 +111,5 @@
         [quo/keypair
          (merge
           @state
-          {:details (if (= (:type @state) :default-keypair) default-details other-details)})]]])))
+          {:details  (if (= (:type @state) :default-keypair) default-details other-details)
+           :accounts (get-accounts (:blur? @state))})]]])))