Merge branch 'develop' into feat/biometrics-new-settings

scripts/lint/re-frame-in-quo-components.sh

@@ -1,10 +1,28 @@
 #!/usr/bin/env sh
 
-INVALID_CHANGES=$(grep -E -r '(re-frame/dispatch|rf/dispatch|re-frame/subscribe|rf/subscribe|rf/sub|<sub|>evt|status-im\.|status-im2\.)' --include '*.cljs' --include '*.clj' './src/quo')
+INVALID_CHANGES=$(grep -E -r '(re-frame/dispatch|rf/dispatch|re-frame/subscribe|rf/subscribe|rf/sub|<sub|>evt|status-im\.)' --include '*.cljs' --include '*.clj' './src/quo')
 
 if test -n "$INVALID_CHANGES"; then
     echo "WARNING: re-frame, status-im are not allowed in quo components"
     echo ''
     echo "$INVALID_CHANGES"
     exit 1
 fi
+
+INVALID_CHANGES2=$(grep -E -r '(status-im\.)' --include '*.cljs' --include '*.clj' './src/utils')
+
+if test -n "$INVALID_CHANGES2"; then
+    echo "WARNING: status-im are not allowed in utils package"
+    echo ''
+    echo "$INVALID_CHANGES2"
+    exit 1
+fi
+
+INVALID_CHANGES3=$(grep -E -r '(status-im\.)' --include '*.cljs' --include '*.clj' './src/react_native')
+
+if test -n "$INVALID_CHANGES3"; then
+    echo "WARNING: status-im are not allowed in react-native package"
+    echo ''
+    echo "$INVALID_CHANGES3"
+    exit 1
+fi

src/legacy/status_im/browser/core.cljs

@@ -16,6 +16,7 @@
     [native-module.core :as native-module]
     [re-frame.core :as re-frame]
     [react-native.platform :as platform]
+    [status-im.common.universal-links :as links]
     [status-im.constants :as constants]
     [status-im.contexts.chat.events :as chat.events]
     [status-im.navigation.events :as navigation]
@@ -27,7 +28,6 @@
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]
     [utils.security.core :as security]
-    [utils.universal-links :as links]
     [utils.url :as url]))
 
 (rf/defn update-browser-option

src/legacy/status_im/wallet/choose_recipient/core.cljs

@@ -9,12 +9,12 @@
     [legacy.status-im.wallet.utils :as wallet.utils]
     [re-frame.core :as re-frame]
     [status-im.common.router :as router]
+    [status-im.common.universal-links :as links]
     [status-im.navigation.events :as navigation]
     [utils.ethereum.chain :as chain]
     [utils.i18n :as i18n]
     [utils.money :as money]
     [utils.re-frame :as rf]
-    [utils.universal-links :as links]
     [utils.url :as url]))
 
 ;; FIXME(Ferossgp): Should be part of QR scanner not wallet

src/quo/components/buttons/wallet_ctas/view.cljs

@@ -15,9 +15,8 @@
    {:style               style/button-container
     :accessibility-label accessibility-label}
    [wallet-button/view
-    {:icon          icon
-     :on-press      on-press
-     :on-long-press #(js/alert "long pressed")}]
+    {:icon     icon
+     :on-press on-press}]
    [text/text
     {:weight :medium
      :size   :paragraph-2

src/quo/components/drawers/drawer_top/style.cljs

@@ -12,9 +12,10 @@
 
 (defn description
   [theme blur?]
-  {:color (if blur?
-            colors/white-opa-40
-            (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 theme))
+   :margin-top 2})
 
 (def left-container
   {:margin-right    8

src/quo/components/drawers/drawer_top/view.cljs

@@ -160,7 +160,8 @@
     [rn/view {:style style/title-container}
      [text/text
       {:size   :heading-2
-       :weight :semi-bold}
+       :weight :semi-bold
+       :style  {:color (when blur? colors/white)}}
       title]
      (when title-icon
        [icons/icon title-icon

src/quo/components/settings/category/settings/view.cljs

@@ -3,23 +3,22 @@
     [quo.components.markdown.text :as text]
     [quo.components.settings.category.style :as style]
     [quo.components.settings.settings-item.view :as settings-item]
-    [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]))
 
 (defn- category-internal
-  [{:keys [label data blur? container-style theme]}]
-  [rn/view {:style (merge (style/container label) container-style)}
+  [{:keys [label data] :as props}]
+  [rn/view {:style (style/container label)}
    (when label
      [text/text
       {:weight :medium
        :size   :paragraph-2
-       :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
+       :style  (style/label props)}
       label])
    [rn/flat-list
     {:data      data
-     :style     (style/settings-items theme blur?)
-     :render-fn (fn [item] [settings-item/view item])
-     :separator [rn/view {:style (style/settings-separator theme blur?)}]}]])
+     :style     (style/settings-items props)
+     :render-fn settings-item/view
+     :separator [rn/view {:style (style/settings-separator props)}]}]])
 
 (def settings-category (quo.theme/with-theme category-internal))

src/quo/components/settings/category/style.cljs

@@ -11,7 +11,7 @@
    :padding-bottom     8})
 
 (defn settings-items
-  [theme blur?]
+  [{:keys [blur? theme]}]
   {:margin-top       12
    :border-radius    16
    :background-color (if blur?
@@ -22,11 +22,17 @@
                        colors/white-opa-5
                        (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
 
+(defn label
+  [{:keys [blur? theme]}]
+  {:color (if blur?
+            colors/white-opa-40
+            (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))})
+
 (def reorder-items
   {:margin-top 12})
 
 (defn settings-separator
-  [theme blur?]
+  [{:keys [blur? theme]}]
   {:height           1
    :background-color (if blur?
                        colors/white-opa-5

src/quo/components/settings/data_item/style.cljs

@@ -10,6 +10,9 @@
    :padding-horizontal (when (= size :default) 12)
    :border-radius      16
    :border-width       (when (and card? (not= size :small)) 1)
+   :background-color   (if blur?
+                         colors/white-opa-5
+                         (colors/theme-colors colors/white colors/neutral-95 theme))
    :border-color       (if blur?
                          colors/white-opa-10
                          (colors/theme-colors colors/neutral-10
@@ -42,10 +45,12 @@
    :justify-content :center})
 
 (defn title
-  [theme]
-  {:color        (colors/theme-colors colors/neutral-50
-                                      colors/neutral-40
-                                      theme)
+  [blur? theme]
+  {:color        (if blur?
+                   colors/white-opa-40
+                   (colors/theme-colors colors/neutral-50
+                                        colors/neutral-40
+                                        theme))
    :margin-right 4})
 
 (def title-container

src/quo/components/settings/data_item/view.cljs

@@ -44,18 +44,18 @@
     subtitle]])
 
 (defn- left-title
-  [{:keys [title label size theme]}]
+  [{:keys [title label size blur? theme]}]
   [rn/view {:style style/title-container}
    [text/text
     {:weight :regular
      :size   :paragraph-2
-     :style  (style/title theme)}
+     :style  (style/title blur? theme)}
     title]
    (when (and (= :graph label) (not= :small size))
      [text/text
       {:weight :regular
        :size   :label
-       :style  (style/title theme)}
+       :style  (style/title blur? theme)}
       (i18n/label :t/days)])])
 
 (defn- left-side
@@ -68,6 +68,7 @@
     {:title title
      :label label
      :size  size
+     :blur? blur?
      :theme theme}]
    (if (= status :loading)
      [left-loading

src/quo/components/settings/settings_item/view.cljs

@@ -10,6 +10,7 @@
     [quo.components.settings.settings-item.style :as style]
     [quo.components.tags.context-tag.view :as context-tag]
     [quo.components.tags.status-tags :as status-tags]
+    [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [utils.i18n :as i18n]))
@@ -101,15 +102,17 @@
      nil)])
 
 (defn- internal-view
-  [{:keys [title on-press action-props accessibility-label container-style] :as props}]
+  [{:keys [title on-press action-props accessibility-label blur? container-style] :as props}]
   [rn/pressable
    {:style               (merge style/container container-style)
     :on-press            on-press
     :accessibility-label accessibility-label}
    [rn/view {:style (style/left-sub-container props)}
     [image-component props]
     [rn/view {:style style/left-container}
-     [text/text {:weight :medium} title]
+     [text/text
+      {:weight :medium
+       :style  {:color (when blur? colors/white)}} title]
      [description-component props]
      [tag-component props]]]
    [rn/view {:style (style/sub-container (:alignment action-props))}

src/quo/components/share/share_qr_code/component_spec.cljs

@@ -73,10 +73,6 @@
            :accessibility-label :link-to-profile
            :event-name          :press
            :callback-prop-key   :on-share-press}
-          {:test-name           "Info icon pressed"
-           :accessibility-label :share-qr-code-info-icon
-           :event-name          :press
-           :callback-prop-key   :on-info-press}
           {:test-name           "Legacy tab pressed"
            :accessibility-label :share-qr-code-legacy-tab
            :event-name          :press
@@ -101,10 +97,6 @@
            :accessibility-label :link-to-profile
            :event-name          :press
            :callback-prop-key   :on-share-press}
-          {:test-name           "Info icon pressed"
-           :accessibility-label :share-qr-code-info-icon
-           :event-name          :press
-           :callback-prop-key   :on-info-press}
           {:test-name           "Legacy tab pressed"
            :accessibility-label :share-qr-code-legacy-tab
            :event-name          :press

src/quo/components/share/share_qr_code/style.cljs

@@ -25,17 +25,20 @@
 (def header-tab-inactive {:background-color colors/white-opa-5})
 (def space-between-tabs {:width 8})
 
-(def info-icon
-  {:margin-left :auto
-   :align-self  :center})
-
-(def info-icon-color colors/white-opa-40)
-
 ;;; QR code
 (defn qr-code-size
   [total-width]
   (- total-width (* 2 padding-horizontal)))
 
+(def share-qr-container
+  {:flex-direction  :row
+   :justify-content :space-between
+   :margin-bottom   20})
+
+(def share-qr-inner-container
+  {:flex-direction :row
+   :align-items    :center})
+
 ;;; Bottom part
 (def bottom-container
   {:margin-top      8
@@ -57,29 +60,12 @@
   {:width (- total-width (* 2 padding-horizontal) share-button-size share-button-gap)})
 
 ;;; Wallet variants
-(def wallet-data-and-share-container
-  {:margin-top      2
-   :flex-direction  :row
-   :justify-content :space-between})
-
-(def wallet-legacy-container {:flex 1})
-
-(def wallet-multichain-container {:flex 1 :margin-top 4})
-
-(def wallet-multichain-networks
+(def wallet-multichain-container
   {:flex-direction  :row
    :justify-content :space-between
-   :margin-bottom   8})
-
-(def wallet-multichain-data-container {:margin-top 4})
+   :flex            1})
 
 ;;; Dashed line
-(def divider-container
-  {:height            8
-   :margin-horizontal 4
-   :justify-content   :center
-   :overflow          :hidden})
-
 (def ^:private padding-for-divider (+ padding-horizontal 4))
 (def ^:private dashed-line-width 2)
 (def ^:private dashed-line-space 4)