ac-blur

* Quo2 Wallet: Network Link component

.carve_ignore

@@ -95,11 +95,11 @@ status-im.hardwallet.simulated-keycard/sign-typed-data
 status-im.utils.core/safe-read-message-content
 status-im.ui.components.react/native-modules
 status-im.ui.components.react/progress-bar
-status-im.utils.fs/move-file
-status-im.utils.fs/read-dir
-status-im.utils.fs/mkdir
-status-im.utils.fs/unlink
-status-im.utils.fs/file-exists?
+react-native.fs/move-file
+react-native.fs/read-dir
+react-native.fs/mkdir
+react-native.fs/unlink
+react-native.fs/file-exists?
 quo.animated/code
 quo.animated/eq
 quo.animated/neq

doc/decisions/0014-wallet-team.md

@@ -16,7 +16,7 @@ The responsibilities of the team are to implement the new wallet UI, with the su
 
 ## Decision
 
-Some team members have already expressed interest and some have been asked and accepted to join the wallet team, these team members are:
+The team members for the initial wallet team are:
 
 - @rasom
 - @OmarBasem
@@ -25,7 +25,5 @@ Some team members have already expressed interest and some have been asked and a
 - @briansztamfater
 - @smohamedjavid
 - @ulisesmac
-
-# Follow-up Actions
-
-- We still need 3/4 team members to join the wallet team
+- @erikseppanen
+- @mmilad75

doc/decisions/0015-team-structure.md

@@ -33,7 +33,7 @@ The people identified for each sections are as follow:
 
 - Messaging @flexsurfer, followed by @alwx
 - Syncing & Onboarding @siddarthkay
-- Communities @ilmotta
+- Communities @ilmotta, followed by @ajayesivan
 - Activity Center & Shell @J-Son89, followed by @Parveshdhull
 - Wallet (once the vertical team is created) @J-Son89, followed by @briansztamfater
 

doc/pipeline_process.md

@@ -30,7 +30,7 @@ Ready for testing PR should meet the following criteria:
 3. Wait for the review.
 4. Make sure that after review and before requesting manual QA your PR is rebased to current develop.
 5. Once the PR has been approved by reviewer(s) - label `request-manual-qa` should be applied to the PR
-6. Move PR to the E2E column when it is ready for testing. That will also trigger e2e tests run. QAs are monitoring PRs from E2E column and take it into test. 
+6. Move PR to the E2E column when it is ready for testing (**mandatory for all PRs**). That will also trigger e2e tests run. QAs are monitoring PRs from E2E column and take it into test. 
 
 After that - PR will be taken into manual testing by the QA team.
 
@@ -41,27 +41,37 @@ After that - PR will be taken into manual testing by the QA team.
 - QA engineer picks up one of PRs with the ```request-manual-qa``` label, drags the item to the ```IN TESTING``` column and assigns it to themselves.
 - During testing, QA will add comments describing the issues found, and also review automation tests results.
 Usually found issues are numbered as "Issue 1, Issue 2", etc.
-When the first round of testing is completed and all issues for this stage are found, tester can add the ```Tested - Issues``` label and drag the card to the ```CONTRIBUTOR``` column. These two actions are optional.
-- When manual testing of PR is fully completed and all issues are fixed, QA adds the ```Tested - OK``` label and drags the card to the ```MERGE``` column, after which developer merges PR into develop.
-  If manual testing was not carried out, developer drags PR to the ```MERGE``` column themselves.
+When the first round of testing is completed and all issues for this stage are found, the QA can add the ```Tested - Issues``` label and drag the card to the ```CONTRIBUTOR``` column. These two actions are optional.
+- When manual testing of the PR is fully completed and all the issues are fixed, the QA adds the ```Tested - OK``` label and drags the card to the ```Design review``` column (the cases when design review is necessary are described below).
+- If design review is not required, the QA drags the PR to the ```MERGE``` column. After that the developer merges PR into develop.
+- If design review has been done, the designer (```@Francesca-G```) drags the PR to the ```MERGE``` column.
+After that the developer merges PR into develop.
+- If manual testing/design review was not carried out, the developer drags PR to the ```MERGE``` column themselves.
+
+### Design review
+_**How do I know if a design review is needed?**_
+
+There are three cases here depending on the changes in the PR:
+1. **Functional PRs with UI changes:** after the ```Tested - OK``` label is added, the QA moves the PR to the ```Design review``` column + mentions ```@Francesca-G``` in comments. 
+2. **Component PRs:** can be moved directly to the ```Design review``` column by the developer when get a review from devs (manual testing step can be skipped) + the developer mentions ```@Francesca-G``` in comments.
+3. **Functional PRs changes in which are not related to UI (e.g. a crash fix):** skip the ```Design review``` step (the PR should only be manually tested by QA).
+
+There are three possible scenarios when the design review is completed:
+1. **Approved by design**  > the PR is moved to the ```MERGE``` column by Francesca
+2. **Some changes requested, but can be fixed as followups** > need to be negotiated with Francesca  > Francesca moves PR to the ```MERGE``` column and adds the ```Follow-up required``` label >  follow-ups should be added **by the dev** right after the PR is merged
+3. **Some changes requested, they should be fixed before merge** > Francesca reviews the PR again after the fixes and moves PR to the ```MERGE``` column from ```Design review```
+
+---
+**Notes:**
+- If your PR has a long story and started from `develop` branch several days ago, please rebase it to current develop before adding label
+- if PR can be tested by developer (in case of small changes) and/or developer is sure that the changes made cannot introduce a regression, then PR can be merged without manual testing. Also, currently, PRs are not manually tested if the changes relate only the design (creation of components, etc.) and do not affect the functionality.
+---        
 
-    **Notes:** 
-        - If your PR has a long story and started from `develop` branch several days ago, please rebase it to current develop before adding label
-        - if PR can be tested by developer (in case of small changes) and/or developer is sure that the changes made cannot introduce a regression, then PR can be merged without manual testing. Also, currently, PRs are not manually tested if the changes relate only the design (creation of components, etc.) and do not affect the functionality.
-        
 #### Why my PR is in `Contributor` column?
 PR can be moved to this column by the ```status-github-bot``` or by QA engineer with label `Tested-issues`.
 In the first case most often this happens due to conflicting files in PR.
 In the second case - after fixing of all found issues, the developer should ping the QA in the PR comments for retesting.
 
-
-#### Why is my PR in `To Rebase` column?
-PR is moved to the "To Rebase" column in two cases:
-- automatically by github bot if PR branch has conflicts that should be resolved
-- manually (by QAs) if PR branch is out-of-date with the base branch and requires rebasing to the latest develop
-
-If PR appeared in the "To Rebase" column dev who is working on the PR should resolve conflicts/rebase branch to the latest develop. After resolving conflicts/rebasing PR should be moved by developer to the right column depending on PR work progress.
-
 ## Merging a PR
 **Merge conditions:**
 1. Required number of reviews received
@@ -73,6 +83,7 @@ If PR appeared in the "To Rebase" column dev who is working on the PR should res
 
 
 6. In case of manual testing - the label ```Tested - OK``` from QA
+7. In case of design review - the approval from the designer
 
 
 You can merge your PR into develop - some useful clues you can find [here](https://notes.status.im/setup-e2e#3-Merging-PR) 

package.json

@@ -66,13 +66,13 @@
     "react-native-randombytes": "^3.6.1",
     "react-native-reanimated": "2.11.0",
     "react-native-redash": "^16.0.11",
-    "react-native-svg": "13.10.0",
     "react-native-shake": "^3.3.1",
     "react-native-share": "^8.2.2",
     "react-native-static-safe-area-insets": "^2.2.0",
     "react-native-status-keycard": "git+https://github.com/status-im/react-native-status-keycard.git#refs/tags/v2.5.39",
+    "react-native-svg": "13.10.0",
     "react-native-touch-id": "^4.4.1",
-    "react-native-transparent-video": "git+https://github.com/status-im/react-native-transparent-video.git#refs/tags/0.0.9",
+    "react-native-transparent-video": "git+https://github.com/status-im/react-native-transparent-video.git#refs/tags/0.1.1",
     "react-native-webview": "git+https://github.com/status-im/react-native-webview.git#refs/tags/v11.16.0-status",
     "react-syntax-highlighter": "^15.5.0",
     "rn-emoji-keyboard": "0.7.0",

src/mocks/js_dependencies.cljs

@@ -10,14 +10,14 @@
 ;; (-> reanimated/slide-out-up-animation (.damping 20) .springify (.stiffness 300))
 (js/eval
  "
-var globalThis
-if (typeof window === \"undefined\") {
-  globalThis = global
-} else {
-  globalThis = window
-}
-globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return () => globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__}})
-")
+ var globalThis
+ if (typeof window === \"undefined\") {
+   globalThis = global
+ } else {
+   globalThis = window
+ }
+ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return () => globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__}})
+ ")
 
 (def action-button #js {:default #js {:Item #js {}}})
 (def config #js {:default #js {}})
@@ -90,7 +90,8 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
                                :configureNext (fn [])}
     :requireNativeComponent   (fn [] {:propTypes ""})
     :Appearance               {:getColorScheme    (fn [])
-                               :addChangeListener (fn [])}}))
+                               :addChangeListener (fn [])}
+    :PixelRatio               {:get (fn [])}}))
 
 (set! js/ReactNative react-native)
 
@@ -138,15 +139,17 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
 (def react-native-share #js {:default {}})
 (def react-native-svg
   #js
-   {:ClipPath #js {:render identity}
-    :Circle   #js {:render identity}
-    :Defs     #js {:render identity}
-    :G        #js {:render identity}
-    :Path     #js {:render identity}
-    :Rect     #js {:render identity}
-    :SvgUri   #js {:render identity}
-    :SvgXml   #js {:render identity}
-    :default  #js {:render identity}})
+   {:ClipPath       #js {:render identity}
+    :Circle         #js {:render identity}
+    :Defs           #js {:render identity}
+    :G              #js {:render identity}
+    :Path           #js {:render identity}
+    :Rect           #js {:render identity}
+    :SvgUri         #js {:render identity}
+    :SvgXml         #js {:render identity}
+    :LinearGradient #js {:render identity}
+    :Stop           #js {:render identity}
+    :default        #js {:render identity}})
 (def react-native-webview #js {:default {}})
 (def react-native-audio-toolkit
   #js

src/quo2/components/avatars/group_avatar/style.cljs

@@ -3,12 +3,12 @@
 
 (defn container
   [{:keys [container-size customization-color theme]}]
-  {:width container-size
-   :height container-size
-   :align-items :center
-   :justify-content :center
-   :border-radius (/ container-size 2)
-   :background-color
-   (colors/theme-colors (colors/custom-color customization-color 50)
-                        (colors/custom-color customization-color 60)
-                        theme)})
+  {:width            container-size
+   :height           container-size
+   :align-items      :center
+   :justify-content  :center
+   :border-radius    (/ container-size 2)
+   :overflow         :hidden
+   :background-color (colors/theme-colors (colors/custom-color customization-color 50)
+                                          (colors/custom-color customization-color 60)
+                                          theme)})

src/quo2/components/avatars/group_avatar/view.cljs

@@ -7,25 +7,24 @@
             [quo2.components.avatars.group-avatar.style :as style]))
 
 (def sizes
-  {:icon      {:x-small 12
-               :small   16
-               :medium  16
-               :large   20
-               :x-large 32}
-   :container {:x-small 20
-               :small   28
-               :medium  32
-               :large   48
-               :x-large 80}})
+  {:size/s-20 {:icon      12
+               :container 20}
+   :size/s-28 {:icon      16
+               :container 28}
+   :size/s-32 {:icon      16
+               :container 32}
+   :size/s-48 {:icon      20
+               :container 48}
+   :size/s-80 {:icon      32
+               :container 80}})
 
 (defn- view-internal
   [_]
   (fn [{:keys [size theme customization-color picture]
-        :or   {size                :x-small
-               customization-color :blue
-               picture             nil}}]
-    (let [container-size (get-in sizes [:container size])
-          icon-size      (get-in sizes [:icon size])]
+        :or   {size                :size/s-20
+               customization-color :blue}}]
+    (let [container-size (get-in sizes [size :container])
+          icon-size      (get-in sizes [size :icon])]
       [rn/view
        {:style (style/container {:container-size      container-size
                                  :customization-color customization-color

src/quo2/components/avatars/icon_avatar.cljs

@@ -1,6 +1,7 @@
 (ns quo2.components.avatars.icon-avatar
   (:require [quo2.components.icon :as icons]
             [quo2.foundations.colors :as colors]
+            [quo2.theme :as quo.theme]
             [react-native.core :as rn]))
 
 (def sizes
@@ -8,8 +9,8 @@
    :medium 32
    :small  20})
 
-(defn icon-avatar
-  [{:keys [size icon color opacity]
+(defn icon-avatar-internal
+  [{:keys [size icon color opacity border? theme]
     :or   {opacity 20}}]
   (let [component-size (size sizes)
         circle-color   (colors/custom-color color 50 opacity)
@@ -22,9 +23,13 @@
      {:style {:width            component-size
               :height           component-size
               :border-radius    component-size
+              :border-width     (when border? 1)
+              :border-color     (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
               :background-color circle-color
               :justify-content  :center
               :align-items      :center}}
      [icons/icon icon
       {:size  icon-size
        :color icon-color}]]))
+
+(def icon-avatar (quo.theme/with-theme icon-avatar-internal))

src/quo2/components/avatars/user_avatar/component_spec.cljs

@@ -2,14 +2,9 @@
   (:require [quo2.components.avatars.user-avatar.view :as user-avatar]
             [test-helpers.component :as h]))
 
-(defonce mock-picture (js/require "../resources/images/mock2/user_picture_male4.png"))
+(defonce mock-picture {:uri (js/require "../resources/images/mock2/user_picture_male4.png")})
 
 (h/describe "user avatar"
-  (h/test "Default render"
-    (h/render [user-avatar/user-avatar])
-    (h/is-truthy (h/get-by-label-text :user-avatar))
-    (h/is-truthy (h/get-by-text "EN")))
-
   (h/describe "Profile picture"
     (h/test "Renders"
       (h/render
@@ -18,124 +13,5 @@
 
     (h/test "Renders even if `:full-name` is passed"
       (h/render
-       [user-avatar/user-avatar
-        {:profile-picture mock-picture
-         :full-name       "New User1"}])
-      (h/is-truthy (h/get-by-label-text :profile-picture))
-      (h/is-null (h/query-by-label-text :initials-avatar)))
-
-    (h/describe "Status indicator"
-      (h/test "Render"
-        (h/render
-         [user-avatar/user-avatar
-          {:profile-picture   mock-picture
-           :status-indicator? true}])
-        (h/is-truthy (h/get-by-label-text :profile-picture))
-        (h/is-truthy (h/get-by-label-text :status-indicator)))
-
-      (h/test "Do not render"
-        (h/render
-         [user-avatar/user-avatar
-          {:profile-picture   mock-picture
-           :status-indicator? false}])
-        (h/is-truthy (h/get-by-label-text :profile-picture))
-        (h/is-null (h/query-by-label-text :status-indicator)))))
-
-  (h/describe "Initials Avatar"
-    (h/describe "Render initials"
-      (letfn [(user-avatar-component [size]
-                [user-avatar/user-avatar
-                 {:full-name "New User"
-                  :size      size}])]
-        (h/describe "Two letters"
-          (h/test "Size :big"
-            (h/render (user-avatar-component :big))
-            (h/is-truthy (h/get-by-text "NU")))
-
-          (h/test "Size :medium"
-            (h/render (user-avatar-component :medium))
-            (h/is-truthy (h/get-by-text "NU")))
-
-          (h/test "Size :small"
-            (h/render (user-avatar-component :small))
-            (h/is-truthy (h/get-by-text "NU")))
-
-          (h/test "Two letters with excess whitespace"
-            (h/render [user-avatar/user-avatar
-                       {:full-name "New    User"
-                        :size      :big}])
-            (h/is-truthy (h/get-by-text "NU")))
-
-          (h/test "Two letters with leading whitespace"
-            (h/render [user-avatar/user-avatar
-                       {:full-name "   New   User"
-                        :size      :big}])
-            (h/is-truthy (h/get-by-text "NU"))))
-
-        (h/describe "One letter"
-          (h/test "Size :xs"
-            (h/render (user-avatar-component :xs))
-            (h/is-truthy (h/get-by-text "N")))
-
-          (h/test "Size :xxs"
-            (h/render (user-avatar-component :xxs))
-            (h/is-truthy (h/get-by-text "N")))
-
-          (h/test "Size :xxxs"
-            (h/render (user-avatar-component :xxxs))
-            (h/is-truthy (h/get-by-text "N"))))))
-
-    (h/describe "Render ring"
-      (letfn [(user-avatar-component [size]
-                [user-avatar/user-avatar
-                 {:full-name       "New User"
-                  :ring-background mock-picture
-                  :size            size}])]
-        (h/describe "Passed and drawn"
-          (h/test "Size :big"
-            (h/render (user-avatar-component :big))
-            (h/is-truthy (h/get-by-label-text :initials-avatar))
-            (h/is-truthy (h/get-by-label-text :ring-background)))
-
-          (h/test "Size :medium"
-            (h/render (user-avatar-component :medium))
-            (h/is-truthy (h/get-by-label-text :initials-avatar))
-            (h/is-truthy (h/get-by-label-text :ring-background)))
-
-          (h/test "Size :small"
-            (h/render (user-avatar-component :small))
-            (h/is-truthy (h/get-by-label-text :initials-avatar))
-            (h/is-truthy (h/get-by-label-text :ring-background))))
-
-        (h/describe "Passed and not drawn (because of invalid size for ring)"
-          (h/test "Size :xs"
-            (h/render (user-avatar-component :xs))
-            (h/is-truthy (h/get-by-label-text :initials-avatar))
-            (h/is-null (h/query-by-label-text :ring-background)))
-
-          (h/test "Size :xxs"
-            (h/render (user-avatar-component :xxs))
-            (h/is-truthy (h/get-by-label-text :initials-avatar))
-            (h/is-null (h/query-by-label-text :ring-background)))
-
-          (h/test "Size :xxxs"
-            (h/render (user-avatar-component :xxxs))
-            (h/is-truthy (h/get-by-label-text :initials-avatar))
-            (h/is-null (h/query-by-label-text :ring-background))))))
-
-    (h/describe "Status indicator"
-      (h/test "Render"
-        (h/render
-         [user-avatar/user-avatar
-          {:full-name         "Test User"
-           :status-indicator? true}])
-        (h/is-truthy (h/get-by-label-text :initials-avatar))
-        (h/is-truthy (h/get-by-label-text :status-indicator)))
-
-      (h/test "Do not render"
-        (h/render
-         [user-avatar/user-avatar
-          {:full-name         "Test User"
-           :status-indicator? false}])
-        (h/is-truthy (h/get-by-label-text :initials-avatar))
-        (h/is-null (h/query-by-label-text :status-indicator))))))
+       [user-avatar/user-avatar {:profile-picture mock-picture}])
+      (h/is-truthy (h/get-by-label-text :profile-picture)))))

src/quo2/components/avatars/user_avatar/style.cljs

@@ -2,92 +2,61 @@
   (:require [quo2.foundations.colors :as colors]))
 
 (def sizes
-  {:big    {:outer                   80
-            :inner                   72
+  {:big    {:dimensions              80
             :status-indicator        20
             :status-indicator-border 4
             :font-size               :heading-1}
-   :medium {:outer                   48
-            :inner                   44
+   :medium {:dimensions              48
             :status-indicator        12
             :status-indicator-border 2
             :font-size               :heading-2}
-   :small  {:outer                   32
-            :inner                   28
+   :small  {:dimensions              32
             :status-indicator        12
             :status-indicator-border 2
             :font-size               :paragraph-2}
-   :xs     {:outer                   24
-            :inner                   24
+   :xs     {:dimensions              24
             :status-indicator        0
             :status-indicator-border 0
             :font-size               :paragraph-2}
-   :xxs    {:outer                   20
-            :inner                   20
+   :xxs    {:dimensions              20
             :status-indicator        0
             :status-indicator-border 0
             :font-size               :label}
-   :xxxs   {:outer                   16
-            :inner                   16
+   :xxxs   {:dimensions              16
             :status-indicator        0
             :status-indicator-border 0
             :font-size               :label}})
 
-(defn outer
-  [size]
-  (let [dimensions (get-in sizes [size :outer])]
-    {:width         dimensions
-     :height        dimensions
-     :border-radius dimensions}))
-
 (defn initials-avatar
-  [size draw-ring? customization-color theme]
-  (let [outer-dimensions (get-in sizes [size :outer])
-        inner-dimensions (get-in sizes [size (if draw-ring? :inner :outer)])]
+  [size customization-color theme]
+  (let [dimensions (get-in sizes [size :dimensions])]
     {:position         :absolute
-     :top              (/ (- outer-dimensions inner-dimensions) 2)
-     :left             (/ (- outer-dimensions inner-dimensions) 2)
-     :width            inner-dimensions
-     :height           inner-dimensions
-     :border-radius    inner-dimensions
+     :top              0
+     :left             0
+     :width            dimensions
+     :height           dimensions
+     :border-radius    dimensions
      :justify-content  :center
      :align-items      :center
      :background-color (colors/custom-color-by-theme customization-color 50 60 nil nil theme)}))
 
+(def indicator-color
+  {:online  colors/success-50
+   :offline colors/neutral-40})
+
+(defn outer
+  [size static-profile-picture?]
+  (let [dimensions                     (get-in sizes [size :dimensions])
+        outer-style                    {:width  dimensions
+                                        :height dimensions}
+        outer-style-with-border-radius (assoc outer-style :border-radius dimensions)]
+    (if static-profile-picture?
+      outer-style-with-border-radius
+      outer-style)))
+
+(defn customization-color
+  [color-id theme]
+  (colors/custom-color-by-theme color-id 50 60 nil nil theme))
+
 (def initials-avatar-text
   {:color colors/white-opa-70})
-
-(defn inner-dot
-  [size online?]
-  (let [background (if online? colors/success-50 colors/neutral-40)
-        dimensions (get-in sizes [size :status-indicator])]
-    {:width            (- dimensions 4)
-     :height           (- dimensions 4)
-     :border-radius    (- dimensions 4)
-     :background-color background}))
-
-(defn dot
-  [size ring? theme]
-  (let [dimensions   (get-in sizes [size :status-indicator])
-        border-width (get-in sizes [size :status-indicator-border])
-        right        (case size
-                       :big    2
-                       :medium 0
-                       :small  -2
-                       0)
-        bottom       (case size
-                       :big    (if ring? -1 2)
-                       :medium (if ring? 0 -2)
-                       :small  -2
-                       0)]
-    {:position         :absolute
-     :justify-content  :center
-     :align-items      :center
-     :bottom           bottom
-     :right            right
-     :width            dimensions
-     :height           dimensions
-     :border-width     border-width
-     :border-radius    dimensions
-     :background-color (colors/theme-colors colors/white colors/neutral-100 theme)
-     :border-color     (colors/theme-colors colors/white colors/neutral-100 theme)}))

src/quo2/components/avatars/user_avatar/view.cljs

@@ -1,64 +1,104 @@
 (ns quo2.components.avatars.user-avatar.view
-  (:require [quo2.components.avatars.user-avatar.style :as style]
-            [quo2.components.markdown.text :as text]
-            [quo2.theme :as quo.theme]
-            [react-native.core :as rn]
-            [react-native.fast-image :as fast-image]
-            utils.string))
+  (:require
+    [quo2.components.avatars.user-avatar.style :as style]
+    [quo2.components.common.no-flicker-image :as no-flicker-image]
+    [quo2.components.markdown.text :as text]
+    [quo2.theme]
+    [react-native.core :as rn]
+    [react-native.fast-image :as fast-image]
+    utils.string))
 
 (defn initials-avatar
-  [{:keys [full-name size draw-ring? customization-color theme]}]
+  [{:keys [full-name size customization-color theme]}]
   (let [font-size       (get-in style/sizes [size :font-size])
         amount-initials (if (#{:xs :xxs :xxxs} size) 1 2)]
     [rn/view
      {:accessibility-label :initials-avatar
-      :style               (style/initials-avatar size draw-ring? customization-color theme)}
+      :style               (style/initials-avatar size customization-color theme)}
      [text/text
       {:style  style/initials-avatar-text
        :size   font-size
        :weight :semi-bold}
       (utils.string/get-initials full-name amount-initials)]]))
 
-(def valid-ring-sizes #{:big :medium :small})
+(defn user-avatar-internal
+  "Render user avatar with `profile-picture`
+  `profile-picture` should be one of {:uri profile-picture-uri} or {:fn profile-picture-fn}
 
-(defn- user-avatar-internal
-  "If no `profile-picture` is given, draws the initials based on the `full-name` and
-  uses `ring-background` to display the ring behind the initials when given. Otherwise,
-  shows the `profile-picture` which already comes with the ring drawn."
-  [{:keys [full-name status-indicator? online? size profile-picture ring-background
-           customization-color static? muted? theme ring?]
-    :or   {status-indicator?   true
+  `profile-picture-fn` should return an image URI, there's helper fn to generate
+  it in `utils.image-server`
+
+  params for `profile-picture-fn`
+  {:length           initials' length
+   :full-name        used to generate initials
+   :font-size        initials font size
+   :indicator-size   status indicator outer radius, set to nil or 0 when no indicator
+   :indicator-border `indicator-size`-`indicator-border` is the inner radius
+   :indicator-color  color for status indicator
+   :override-theme   override theme for ring
+   :background-color intials avatar background color
+   :color            intials avatar text color
+   :size             intials avatar radius
+   :ring?            render ident ring around avatar?}
+
+  supported color formats:
+  #RRGGBB
+  #RRGGBBAA
+  rgb(255,255,255)
+  rgba(255,255,255,0.1) note alpha is 0-1
+
+  the reason we use the `profile-picture-fn` here is to separate
+  logic (pubkey, key-uid... in subs) and style (color, size... in this component)"
+  [{:keys [full-name size profile-picture customization-color static?
+           status-indicator? online? ring? theme]
+    :or   {size                :big
+           status-indicator?   true
            online?             true
            ring?               true
-           size                :big
-           customization-color :turquoise}}]
-  (let [full-name    (or full-name "empty name")
-        draw-ring?   (and ring? (when-not muted? (and ring-background (valid-ring-sizes size))))
-        outer-styles (style/outer size)
-        ;; Once image is loaded, fast image rerenders view with the help of reagent atom,
+           customization-color :turquoise}
+    :as   props}]
+  (let [full-name          (or full-name "Your Name")
+        ;; image generated with profile-picture-fn is round cropped
+        ;; no need to add border-radius for them
+        outer-styles       (style/outer size (not (:fn profile-picture)))
+        ;; Once image is loaded, fast image re-renders view with the help of reagent atom,
         ;; But dynamic updates don't work when user-avatar is used inside hole-view
         ;; https://github.com/status-im/status-mobile/issues/15553
-        image-view   (if static? rn/image fast-image/fast-image)]
-    [rn/view {:style outer-styles :accessibility-label :user-avatar}
-     ;; The `profile-picture` already has the ring in it
-     (when-let [image (or profile-picture ring-background)]
-       [image-view
-        {:accessibility-label (if draw-ring? :ring-background :profile-picture)
-         :style               outer-styles
-         :source              image}])
-     (when-not profile-picture
-       [initials-avatar
-        {:full-name           full-name
-         :size                size
-         :draw-ring?          draw-ring?
-         :customization-color customization-color
-         :theme               theme}])
-     (when status-indicator?
-       [rn/view
-        {:accessibility-label :status-indicator
-         :style               (style/dot size draw-ring? theme)}
-        [rn/view
-         {:accessibility-label :inner-status-indicator-dot
-          :style               (style/inner-dot size online?)}]])]))
+        image-view         (if static? no-flicker-image/image fast-image/fast-image)
+        font-size          (get-in style/sizes [size :font-size])
+        amount-initials    (if (#{:xs :xxs :xxxs} size) 1 2)
+        sizes              (get style/sizes size)
+        indicator-color    (get style/indicator-color (if online? :online :offline))
+        profile-picture-fn (:fn profile-picture)]
 
-(def user-avatar (quo.theme/with-theme user-avatar-internal))
+    [rn/view {:style outer-styles :accessibility-label :user-avatar}
+     (if (and full-name (not (or profile-picture-fn profile-picture)))
+       ;; this is for things that's not user-avatar
+       ;; but are currently using user-avatar to render the initials
+       ;; e.g. community avatar
+       [initials-avatar props]
+       [image-view
+        {:accessibility-label :profile-picture
+         :style outer-styles
+         :source
+         (cond profile-picture-fn
+               {:uri (profile-picture-fn
+                      {:length           amount-initials
+                       :full-name        full-name
+                       :font-size        (:font-size (text/text-style {:size
+                                                                       font-size}))
+                       :indicator-size   (when status-indicator?
+                                           (:status-indicator sizes))
+                       :indicator-border (when status-indicator?
+                                           (:status-indicator-border sizes))
+                       :indicator-color  indicator-color
+                       :override-theme   theme
+                       :background-color (style/customization-color customization-color theme)
+                       :color            (:color style/initials-avatar-text)
+                       :size             (:width outer-styles)
+                       :ring?            ring?})}
+               (:uri profile-picture)
+               profile-picture
+               :else {:uri profile-picture})}])]))
+
+(def user-avatar (quo2.theme/with-theme user-avatar-internal))

src/quo2/components/buttons/dynamic_button/view.cljs

@@ -61,6 +61,7 @@
         :active-opacity      1
         :hit-slop            {:top 5 :bottom 5 :left 5 :right 5}
         :pointer-events      :auto
+        :style               {:height 24}
         :accessibility-label type}
        [rn/view
         {:style (merge

src/quo2/components/buttons/wallet_button/component_spec.cljs

@@ -0,0 +1,39 @@
+(ns quo2.components.buttons.wallet-button.component-spec
+  (:require [quo2.components.buttons.wallet-button.view :as wallet-button]
+            [test-helpers.component :as h]))
+
+(h/describe "button tests"
+  (h/test "default render of wallet button component"
+    (h/render [wallet-button/view
+               {:icon                :i/placeholder
+                :accessibility-label "test-button"}])
+    (h/is-truthy (h/get-by-label-text "test-button")))
+
+  (h/test "button on-press works"
+    (let [event (h/mock-fn)]
+      (h/render [wallet-button/view
+                 {:icon                :i/placeholder
+                  :on-press            event
+                  :accessibility-label "test-button"}])
+      (h/fire-event :press (h/get-by-label-text "test-button"))
+      (h/was-called event)))
+
+  (h/test "button on-press disabled when disabled"
+    (let [event (h/mock-fn)]
+      (h/render [wallet-button/view
+                 {:icon                :i/placeholder
+                  :on-press            event
+                  :accessibility-label "test-button"
+                  :disabled?           true}])
+      (h/fire-event :press (h/get-by-label-text "test-button"))
+      (h/was-not-called event)))
+
+  (h/test "button on-long-press works"
+    (let [event (h/mock-fn)]
+      (h/render [wallet-button/view
+                 {:icon                :i/placeholder
+                  :on-long-press       event
+                  :accessibility-label "test-button"}])
+      (h/fire-event :long-press (h/get-by-label-text "test-button"))
+      (h/was-called event))))
+

src/quo2/components/buttons/wallet_button/style.cljs

@@ -0,0 +1,20 @@
+(ns quo2.components.buttons.wallet-button.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn get-border-color
+  [{:keys [pressed? theme]}]
+  (if (= pressed? true)
+    (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
+    (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)))
+
+(defn main
+  [{:keys [pressed? theme disabled?]}]
+  {:border-color    (get-border-color {:pressed? pressed?
+                                       :theme    theme})
+   :border-width    1
+   :border-radius   10
+   :width           32
+   :height          32
+   :justify-content :center
+   :align-items     :center
+   :opacity         (when disabled? 0.3)})

src/quo2/components/buttons/wallet_button/view.cljs

@@ -0,0 +1,29 @@
+(ns quo2.components.buttons.wallet-button.view
+  (:require
+    [quo2.components.buttons.wallet-button.style :as style]
+    [quo2.components.icon :as quo2.icons]
+    [quo2.foundations.colors :as colors]
+    [quo2.theme :as theme]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]))
+
+(defn- view-internal
+  []
+  (let [pressed? (reagent/atom false)]
+    (fn
+      [{:keys [on-press on-long-press disabled? icon accessibility-label container-style theme]}]
+      [rn/pressable
+       {:accessibility-label (or accessibility-label :wallet-button)
+        :on-press            on-press
+        :on-press-in         #(reset! pressed? true)
+        :on-press-out        #(reset! pressed? nil)
+        :on-long-press       on-long-press
+        :disabled            disabled?
+        :style               (merge (style/main {:pressed?  @pressed?
+                                                 :theme     theme
+                                                 :disabled? disabled?})
+                                    container-style)}
+       [quo2.icons/icon icon
+        {:color (colors/theme-colors colors/neutral-100 colors/white theme)}]])))
+
+(def view (theme/with-theme view-internal))

src/quo2/components/buttons/wallet_ctas/component_spec.cljs

@@ -0,0 +1,11 @@
+(ns quo2.components.buttons.wallet-ctas.component-spec
+  (:require [test-helpers.component :as h]
+            [quo2.components.buttons.wallet-ctas.view :as wallet-ctas]))
+
+(h/describe "Wallet CTAs test"
+  (h/test "Buttons render"
+    (h/render [wallet-ctas/view])
+    (h/is-truthy (h/get-by-label-text :buy))
+    (h/is-truthy (h/get-by-label-text :send))
+    (h/is-truthy (h/get-by-label-text :receive))
+    (h/is-truthy (h/get-by-label-text :bridge))))

src/quo2/components/buttons/wallet_ctas/style.cljs

@@ -0,0 +1,13 @@
+(ns quo2.components.buttons.wallet-ctas.style)
+
+(def container
+  {:padding-top        24
+   :padding-bottom     12
+   :padding-horizontal 20
+   :flex-direction     :row})
+
+(def button-container
+  {:padding-vertical 8
+   :width            77.75
+   :justify-content  :center
+   :align-items      :center})

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

@@ -0,0 +1,55 @@
+(ns quo2.components.buttons.wallet-ctas.view
+  (:require
+    [quo2.components.buttons.wallet-button.view :as wallet-button]
+    [quo2.components.markdown.text :as text]
+    [quo2.foundations.colors :as colors]
+    [quo2.theme :as quo.theme]
+    [react-native.core :as rn]
+    [utils.i18n :as i18n]
+    [quo2.components.buttons.wallet-ctas.style :as style]))
+
+
+(defn action-button
+  [{:keys [icon text on-press theme accessibility-label]}]
+  [rn/view
+   {:style               style/button-container
+    :accessibility-label accessibility-label}
+   [wallet-button/view
+    {:icon          icon
+     :on-press      on-press
+     :on-long-press #(js/alert "long pressed")}]
+   [text/text
+    {:weight :medium
+     :size   :paragraph-2
+     :style  {:margin-top 4
+              :color      (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} text]])
+
+(defn view-internal
+  [{:keys [theme buy-action send-action receive-action bridge-action]}]
+  [rn/view {:style style/container}
+   [action-button
+    {:icon                :i/add
+     :text                (i18n/label :t/buy)
+     :on-press            buy-action
+     :theme               theme
+     :accessibility-label :buy}]
+   [action-button
+    {:icon                :i/send
+     :text                (i18n/label :t/send)
+     :on-press            send-action
+     :theme               theme
+     :accessibility-label :send}]
+   [action-button
+    {:icon                :i/receive
+     :text                (i18n/label :t/receive)
+     :on-press            receive-action
+     :theme               theme
+     :accessibility-label :receive}]
+   [action-button
+    {:icon                :i/bridge
+     :text                (i18n/label :t/bridge)
+     :on-press            bridge-action
+     :theme               theme
+     :accessibility-label :bridge}]])
+
+(def view (quo.theme/with-theme view-internal))

src/quo2/components/common/no_flicker_image.cljs

@@ -0,0 +1,49 @@
+(ns quo2.components.common.no-flicker-image
+  (:require
+    [oops.core :as oops]
+    [react-native.core :as rn]
+    [react-native.platform :as platform]
+    [reagent.core :as reagent]))
+
+
+(def cached-sources (js/Set. (js/Array.)))
+
+(defn- caching-image
+  [_ on-source-loaded]
+  (let [this (reagent/current-component)]
+    (reagent/create-class
+     {:component-did-update
+      (fn []
+        (let [source (-> this reagent/props :source)]
+          (when (oops/ocall cached-sources "has" source)
+            (on-source-loaded source))))
+      :reagent-render
+      (fn [{:keys [source] :as props}]
+        [rn/image
+         (assoc props
+                ;; hide the cache image under the real one
+                ;; have to render it for the on-load event
+                :style {:width    1
+                        :height   1
+                        :left     "50%"
+                        :top      "50%"
+                        :position :absolute}
+                :on-load
+                (fn [_]
+                  (when-not (oops/ocall cached-sources "has" source)
+                    (oops/ocall cached-sources "add" source)
+                    (on-source-loaded source)))
+                :on-error js/console.error)])})))
+
+(defn image
+  "Same as rn/image but cache the image source in a js/Set, so the image won't
+  flicker when re-render on android"
+  []
+  (let [loaded-source    (reagent/atom nil)
+        on-source-loaded #(reset! loaded-source %)]
+    (fn [props]
+      (if platform/ios?
+        [rn/image props]
+        [:<>
+         [rn/image (assoc props :source @loaded-source)]
+         [caching-image props on-source-loaded]]))))

src/quo2/components/inputs/profile_input/component_spec.cljs

@@ -3,23 +3,6 @@
             [test-helpers.component :as h]))
 
 (h/describe "Profile Input"
-  (h/test "renders user avatar with placeholder name if no value is specified"
-    (h/render [profile-input/profile-input
-               {:placeholder        "Your Name"
-                :image-picker-props {:full-name "Your Name"}}])
-    (-> (js/expect (h/get-by-text "YN"))
-        (.toBeTruthy)))
-
-  (h/test "renders user avatar with full name if a value is specified"
-    (let [event (h/mock-fn)]
-      (h/render [profile-input/profile-input
-                 {:on-change          event
-                  :placeholder        "Your Name"
-                  :image-picker-props {:full-name "Test Name"}}])
-      (h/fire-event :change (h/get-by-text "TN"))
-      (-> (js/expect (h/get-by-text "TN"))
-          (.toBeTruthy))))
-
   (h/test "on press event fires"
     (let [event (h/mock-fn)]
       (h/render [profile-input/profile-input

src/quo2/components/inputs/profile_input/view.cljs

@@ -1,7 +1,7 @@
 (ns quo2.components.inputs.profile-input.view
   (:require
-    [quo2.components.buttons.button.view :as buttons]
     [quo2.components.avatars.user-avatar.view :as user-avatar]
+    [quo2.components.buttons.button.view :as buttons]
     [quo2.components.inputs.profile-input.style :as style]
     [quo2.components.inputs.title-input.view :as title-input]
     [react-native.core :as rn]
@@ -13,38 +13,40 @@
            on-press
            title-input-props
            image-picker-props]}]
-  [rn/view
-   {:style (style/container customization-color)}
-   [rn/view
-    [hole-view/hole-view
-     ;; Force re-render hole view when props are changed
-     ;; https://github.com/status-im/status-mobile/issues/15577
-     {:key   (hash
-              (if (:profile-picture image-picker-props)
-                (:profile-picture image-picker-props)
-                image-picker-props))
-      :holes [{:x            33
-               :y            24
-               :width        24
-               :height       24
-               :borderRadius 12}]}
-     [user-avatar/user-avatar
-      (assoc image-picker-props
-             :static?           true
-             :status-indicator? false
-             :size              :medium)]]
-    [buttons/button
-     {:accessibility-label :select-profile-picture-button
-      :type                :grey
-      :background          :blur
-      :on-press            on-press
-      :size                24
-      :icon-only?          true
-      :container-style     style/button
-      :inner-style         style/button-inner} :i/camera]]
-   [rn/view {:style style/input-container}
-    [title-input/title-input
-     (merge title-input-props
-            {:blur?               true
-             :placeholder         placeholder
-             :customization-color customization-color})]]])
+  (let [full-name (:full-name image-picker-props)]
+    [rn/view
+     {:style (style/container customization-color)}
+     [rn/view
+      [hole-view/hole-view
+       ;; Force re-render hole view when props are changed
+       ;; https://github.com/status-im/status-mobile/issues/15577
+       {:key   (hash
+                (if (:profile-picture image-picker-props)
+                  (:profile-picture image-picker-props)
+                  image-picker-props))
+        :holes [{:x            33
+                 :y            24
+                 :width        24
+                 :height       24
+                 :borderRadius 12}]}
+       [user-avatar/user-avatar
+        (assoc image-picker-props
+               :static?           true
+               :status-indicator? false
+               :full-name         (if (seq full-name) full-name placeholder)
+               :size              :medium)]]
+      [buttons/button
+       {:accessibility-label :select-profile-picture-button
+        :type                :grey
+        :background          :blur
+        :on-press            on-press
+        :size                24
+        :icon-only?          true
+        :container-style     style/button
+        :inner-style         style/button-inner} :i/camera]]
+     [rn/view {:style style/input-container}
+      [title-input/title-input
+       (merge title-input-props
+              {:blur?               true
+               :placeholder         placeholder
+               :customization-color customization-color})]]]))

src/quo2/components/list_items/user_list.cljs

@@ -1,11 +1,11 @@
 (ns quo2.components.list-items.user-list
-  (:require [react-native.core :as rn]
-            [quo2.components.avatars.user-avatar.view :as user-avatar]
-            [quo2.components.markdown.text :as text]
+  (:require [quo2.components.avatars.user-avatar.view :as user-avatar]
             [quo2.components.icon :as icons]
-            [quo2.foundations.colors :as colors]
+            [quo2.components.markdown.text :as text]
             [quo2.components.messages.author.view :as author]
-            [quo2.components.selectors.selectors.view :as selectors]))
+            [quo2.components.selectors.selectors.view :as selectors]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]))
 
 (def container-style
   {:margin-horizontal  8
@@ -45,11 +45,10 @@
     :on-press            (when on-press on-press)
     :on-long-press       (when on-long-press on-long-press)}
    [user-avatar/user-avatar
-    {:full-name         primary-name
-     :profile-picture   photo-path
-     :status-indicator? true
-     :online?           online?
-     :size              :small}]
+    {:full-name       primary-name
+     :profile-picture photo-path
+     :online?         online?
+     :size            :small}]
    [rn/view {:style {:margin-left 8}}
     [author/author
      {:primary-name   primary-name

src/quo2/components/navigation/floating_shell_button.cljs

@@ -1,59 +0,0 @@
-(ns quo2.components.navigation.floating-shell-button
-  (:require [quo2.components.buttons.dynamic-button.view :as dynamic-button]
-            [react-native.core :as rn]
-            [react-native.reanimated :as reanimated]))
-
-(defn dynamic-button-view
-  [type dynamic-buttons style]
-  (when-let [{:keys [on-press customization-color label] :as props} (get dynamic-buttons type)]
-    [dynamic-button/view
-     {:type                type
-      :label               label
-      :on-press            on-press
-      :count               (:count props)
-      :style               style
-      :customization-color customization-color}]))
-
-(defn- section
-  [children]
-  [rn/view {:style {:flex 1} :pointer-events :box-none} children])
-
-(defn- f-floating-shell-button
-  [dynamic-buttons style opacity-anim]
-  (let [original-style (merge {:flex-direction    :row
-                               :margin-horizontal 12
-                               :pointer-events    :box-none}
-                              style)
-        animated-style (reanimated/apply-animations-to-style
-                        (if opacity-anim
-                          {:opacity opacity-anim}
-                          {})
-                        original-style)]
-    [reanimated/view {:style animated-style}
-     ;; Left Section
-     [section
-      [dynamic-button-view :search dynamic-buttons
-       {:position :absolute
-        :right    8}]]
-     ;; Mid Section (jump-to)
-     [dynamic-button-view :jump-to dynamic-buttons nil]
-     ;; Right Section
-     [section
-      [rn/view
-       {:style {:position       :absolute
-                :flex-direction :row
-                :right          0}}
-       [dynamic-button-view :mention dynamic-buttons {:margin-left 8}]
-       [dynamic-button-view :notification-down dynamic-buttons {:margin-left 8}]
-       [dynamic-button-view :notification-up dynamic-buttons {:margin-left 8}]
-       [dynamic-button-view :scroll-to-bottom dynamic-buttons {:margin-left 8}]]]]))
-
-(defn floating-shell-button
-  "[floating-shell-button dynamic-buttons style opacity-anim pointer-anim]
-  dynamic-buttons {:button-type {:on-press on-press :count count}}
-  style           override style
-  opacity-anim    reanimated value (optional)"
-  ([dynamic-buttons style]
-   [:f> f-floating-shell-button dynamic-buttons style nil])
-  ([dynamic-buttons style opacity-anim]
-   [:f> f-floating-shell-button dynamic-buttons style opacity-anim]))

src/quo2/components/navigation/floating_shell_button/style.cljs

@@ -0,0 +1,22 @@
+(ns quo2.components.navigation.floating-shell-button.style
+  (:require [react-native.reanimated :as reanimated]))
+
+(defn floating-shell-button
+  [style opacity-anim]
+  (reanimated/apply-animations-to-style
+   (if opacity-anim
+     {:opacity opacity-anim}
+     {})
+   (merge
+    {:flex-direction     :row
+     :height             44
+     :align-self         :center
+     :padding-top        8
+     :padding-horizontal 12
+     :pointer-events     :box-none}
+    style)))
+
+(def right-section
+  {:position       :absolute
+   :flex-direction :row
+   :right          0})

src/quo2/components/navigation/floating_shell_button/view.cljs

@@ -0,0 +1,49 @@
+(ns quo2.components.navigation.floating-shell-button.view
+  (:require [react-native.core :as rn]
+            [react-native.reanimated :as reanimated]
+            [quo2.components.buttons.dynamic-button.view :as dynamic-button]
+            [quo2.components.navigation.floating-shell-button.style :as style]))
+
+(defn dynamic-button-view
+  [type dynamic-buttons style]
+  (when-let [{:keys [on-press customization-color label] :as props} (get dynamic-buttons type)]
+    [dynamic-button/view
+     {:type                type
+      :label               label
+      :on-press            on-press
+      :count               (:count props)
+      :style               style
+      :customization-color customization-color}]))
+
+(defn- section
+  [children]
+  [rn/view {:style {:flex 1} :pointer-events :box-none} children])
+
+(defn- f-floating-shell-button
+  [dynamic-buttons style opacity-anim]
+  [reanimated/view {:style (style/floating-shell-button style opacity-anim)}
+   ;; Left Section
+   [section
+    [dynamic-button-view :search dynamic-buttons
+     {:position :absolute
+      :right    8}]]
+   ;; Mid Section (jump-to)
+   [dynamic-button-view :jump-to dynamic-buttons nil]
+   ;; Right Section
+   [section
+    [rn/view
+     {:style style/right-section}
+     [dynamic-button-view :mention dynamic-buttons {:margin-left 8}]
+     [dynamic-button-view :notification-down dynamic-buttons {:margin-left 8}]
+     [dynamic-button-view :notification-up dynamic-buttons {:margin-left 8}]
+     [dynamic-button-view :scroll-to-bottom dynamic-buttons {:margin-left 8}]]]])
+
+(defn view
+  "[floating-shell-button dynamic-buttons style opacity-anim pointer-anim]
+  dynamic-buttons {:button-type {:on-press on-press :count count}}
+  style           override style
+  opacity-anim    reanimated value (optional)"
+  ([dynamic-buttons style]
+   [:f> f-floating-shell-button dynamic-buttons style nil])
+  ([dynamic-buttons style opacity-anim]
+   [:f> f-floating-shell-button dynamic-buttons style opacity-anim]))

src/quo2/components/profile/select_profile/view.cljs

@@ -1,9 +1,9 @@
 (ns quo2.components.profile.select-profile.view
   (:require
+    [quo2.components.avatars.user-avatar.view :as user-avatar]
+    [quo2.components.markdown.text :as text]
     [quo2.components.profile.select-profile.style :as style]
     [react-native.core :as rn]
-    [quo2.components.markdown.text :as text]
-    [quo2.components.avatars.user-avatar.view :as user-avatar]
     [reagent.core :as reagent]))
 
 (defn- on-change-handler
@@ -24,31 +24,27 @@
   (let [internal-selected? (reagent/atom (or default-selected? false))]
     (fn [{:keys [selected?
                  profile-picture
-                 ring-background
                  name
                  customization-color
                  on-change]
           :or   {customization-color :turquoise}}]
-      (let [avatar-image-key (if profile-picture :profile-picture :ring-background)
-            picture          (or profile-picture ring-background)]
-        (when (and (not (nil? selected?)) (not= @internal-selected? selected?))
-          (reset! internal-selected? selected?))
-        [rn/touchable-opacity
-         {:style               (style/container customization-color @internal-selected?)
-          :on-press            #(on-change-handler internal-selected? on-change)
-          :active-opacity      1
-          :accessibility-label :select-profile}
-         [rn/view {:style style/header}
-          [user-avatar/user-avatar
-           {:full-name         name
-            :status-indicator? false
-            :size              :medium
-            avatar-image-key   picture}]
-          [rn/view {:style (style/select-radio @internal-selected?)}
-           (when @internal-selected? [rn/view {:style style/select-radio-inner}])]]
-         [text/text
-          {:size   :heading-2
-           :weight :semi-bold
-           :style  style/profile-name}
-          name]]))))
-
+      (when (and (not (nil? selected?)) (not= @internal-selected? selected?))
+        (reset! internal-selected? selected?))
+      [rn/touchable-opacity
+       {:style               (style/container customization-color @internal-selected?)
+        :on-press            #(on-change-handler internal-selected? on-change)
+        :active-opacity      1
+        :accessibility-label :select-profile}
+       [rn/view {:style style/header}
+        [user-avatar/user-avatar
+         {:full-name         name
+          :status-indicator? false
+          :size              :medium
+          :profile-picture   profile-picture}]
+        [rn/view {:style (style/select-radio @internal-selected?)}
+         (when @internal-selected? [rn/view {:style style/select-radio-inner}])]]
+       [text/text
+        {:size   :heading-2
+         :weight :semi-bold
+         :style  style/profile-name}
+        name]])))

src/quo2/components/tags/context_tag/view.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.tags.context-tag.view
   (:require [quo2.components.avatars.group-avatar.view :as group-avatar]
-            [quo2.components.avatars.user-avatar.style :as user-avatar-style]
+            [quo2.components.avatars.user-avatar.style :as user-avatar.style]
             [quo2.components.avatars.user-avatar.view :as user-avatar]
             [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
@@ -40,7 +40,7 @@
     (trim-public-key public-key)]])
 
 (defn context-tag
-  [{:keys [text-style blur? no-avatar-placeholder? text-container-style ellipsize-text?]
+  [{:keys [text-style blur? no-avatar-placeholder? text-container-style ellipsize-text? ring?]
     :as   props}
    photo
    name
@@ -52,7 +52,7 @@
                            :ellipsize-mode  :tail}
         empty-photo?      (nil? photo)
         avatar-size       :xxs
-        avatar-outer-size (get-in user-avatar-style/sizes [avatar-size :outer])]
+        avatar-outer-size (get-in user-avatar.style/sizes [avatar-size :outer])]
     [base-tag (update-in props [:style :padding-left] #(or % 3))
      (if (and empty-photo? no-avatar-placeholder?)
        [rn/view {:style {:width avatar-outer-size}}]
@@ -60,6 +60,7 @@
         {:full-name         name
          :profile-picture   photo
          :size              avatar-size
+         :ring?             ring?
          :status-indicator? false}])
      [rn/view {:style (or text-container-style style/context-tag-text-container)}
       (if ellipsize-text?

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

@@ -0,0 +1,61 @@
+(ns quo2.components.wallet.keypair.component-spec
+  (:require [test-helpers.component :as h]
+            [quo2.components.wallet.keypair.view :as keypair]))
+
+(def accounts
+  [{:account-props {:customization-color :turquoise
+                    :size                32
+                    :emoji               "\uD83C\uDFB2"
+                    :type                :default
+                    :name                "Trip to Vegas"
+                    :address             "0x0ah...71a"}
+    :networks      [:ethereum :optimism]
+    :state         :default
+    :action        :none}])
+
+(def default-details
+  {:full-name "John Doe"
+   :address   "zQ3...6fBd2"})
+
+(def other-details {:full-name "Metamask"})
+
+(h/describe "Wallet: Keypair"
+  (h/test "Default keypair title renders"
+    (h/render [keypair/view
+               {:accounts            accounts
+                :customization-color :blue
+                :type                :default-keypair
+                :stored              :on-device
+                :action              :selector
+                :details             default-details}])
+    (h/is-truthy (h/get-by-label-text :title)))
+
+  (h/test "On device renders"
+    (h/render [keypair/view
+               {:accounts            accounts
+                :customization-color :blue
+                :type                :other
+                :stored              :on-device
+                :action              :selector
+                :details             other-details}])
+    (h/is-truthy (h/get-by-label-text :details)))
+
+  (h/test "Selector action renders"
+    (h/render [keypair/view
+               {:accounts            accounts
+                :customization-color :blue
+                :type                :other
+                :stored              :on-keycard
+                :action              :selector
+                :details             other-details}])
+    (h/is-truthy (h/get-by-label-text :radio-on)))
+
+  (h/test "Options action renders"
+    (h/render [keypair/view
+               {:accounts            accounts
+                :customization-color :blue
+                :type                :other
+                :stored              :on-keycard
+                :action              :options
+                :details             other-details}])
+    (h/is-truthy (h/get-by-label-text :options-button))))

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

@@ -0,0 +1,26 @@
+(ns quo2.components.wallet.keypair.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn container
+  [selected? customization-color theme]
+  {:border-radius  20
+   :border-width   1
+   :border-color   (if selected?
+                     (colors/theme-colors (colors/custom-color customization-color 50)
+                                          (colors/custom-color customization-color 60)
+                                          theme)
+                     (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))
+   :padding-bottom 8})
+
+(def header-container
+  {:padding-horizontal 12
+   :padding-top        8
+   :padding-bottom     12
+   :flex-direction     :row
+   :align-items        :center})
+
+(def title-container
+  {:flex-direction  :row
+   :align-items     :center
+   :justify-content :space-between
+   :flex            1})

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

@@ -0,0 +1,93 @@
+(ns quo2.components.wallet.keypair.view
+  (:require
+    [quo2.components.avatars.icon-avatar :as icon-avatar]
+    [quo2.components.avatars.user-avatar.view :as user-avatar]
+    [quo2.components.icon :as icon]
+    [quo2.components.list-items.account-list-card.view :as account-list-card]
+    [quo2.components.markdown.text :as text]
+    [quo2.foundations.colors :as colors]
+    [quo2.theme :as quo.theme]
+    [react-native.core :as rn]
+    [quo2.components.selectors.selectors.view :as selectors]
+    [reagent.core :as reagent]
+    [utils.i18n :as i18n]
+    [quo2.components.wallet.keypair.style :as style]
+    [clojure.string :as string]))
+
+(defn keypair-string
+  [full-name]
+  (let [first-name (first (string/split full-name #" "))]
+    (i18n/label :t/keypair-title {:name first-name})))
+
+(defn details-string
+  [address stored]
+  (str (when address (str address " ∙ "))
+       (if (= stored :on-device) (i18n/label :t/on-device) (i18n/label :t/on-keycard))))
+
+(defn avatar
+  [type full-name customization-color]
+  (if (= type :default-keypair)
+    [user-avatar/user-avatar
+     {:full-name           full-name
+      :ring?               true
+      :size                :small
+      :customization-color customization-color}]
+    [icon-avatar/icon-avatar
+     {:size    :medium
+      :icon    :i/placeholder
+      :border? true}]))
+
+(defn title-view
+  [full-name action selected? type customization-color on-options-press theme]
+  [rn/view
+   {:style               style/title-container
+    :accessibility-label :title}
+   [text/text {:weight :semi-bold}
+    (if (= type :default-keypair) (keypair-string full-name) full-name)]
+   (if (= action :selector)
+     [selectors/radio
+      {:checked?            selected?
+       :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)
+        :accessibility-label :options-button}]])])
+
+(defn details-view
+  [address stored theme]
+  [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)}}
+    (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)}]])])
+
+(defn- view-internal
+  []
+  (let [selected? (reagent/atom true)]
+    (fn [{:keys [theme accounts customization-color type details stored action on-options-press]}]
+      (let [{:keys [address full-name]} details]
+        [rn/pressable
+         {:style    (style/container @selected? customization-color theme)
+          :on-press #(when (= action :selector) (reset! selected? (not @selected?)))}
+         [rn/view {:style style/header-container}
+          [avatar type full-name customization-color]
+          [rn/view
+           {:style {:margin-left 8
+                    :flex        1}}
+           [title-view full-name action @selected? type customization-color on-options-press theme]
+           [details-view address stored theme]]]
+         [rn/flat-list
+          {:data      accounts
+           :render-fn account-list-card/view
+           :separator [rn/view {:style {:height 8}}]
+           :style     {:padding-horizontal 8}}]]))))
+
+(def view (quo.theme/with-theme view-internal))

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

@@ -0,0 +1,85 @@
+(ns quo2.components.wallet.network-link.view
+  (:require
+    [quo2.foundations.colors :as colors]
+    [quo2.theme :as quo.theme]
+    [react-native.svg :as svg]))
+
+(defn link-linear
+  [{:keys [source theme]}]
+  [svg/svg {:xmlns "http://www.w3.org/2000/svg" :width "73" :height "10" :fill :none}
+   [svg/path {:stroke (get colors/networks source) :d "M68 5H5"}]
+   [svg/circle
+    {:cx     "68"
+     :cy     "5"
+     :r      "4"
+     :fill   (colors/theme-colors colors/white colors/neutral-90 theme)
+     :stroke (get colors/networks source)}]
+   [svg/circle
+    {:cx     "5"
+     :cy     "5"
+     :r      "4"
+     :fill   (colors/theme-colors colors/white colors/neutral-90 theme)
+     :stroke (get colors/networks source)}]])
+
+(defn link-1x
+  [{:keys [source destination theme]}]
+  [svg/svg {:xmlns "http://www.w3.org/2000/svg" :width "73" :height "66" :fill :none}
+   [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 (get colors/networks destination)}]
+   [svg/circle
+    {:cx     "5"
+     :cy     "61"
+     :r      "4"
+     :fill   (colors/theme-colors colors/white colors/neutral-90 theme)
+     :stroke (get colors/networks source)}]
+   [svg/defs
+    [svg/linear-gradient
+     {:id "gradient" :x1 "72.271" :x2 "82.385" :y1 "5" :y2 "34.155" :gradientUnits "userSpaceOnUse"}
+     [svg/stop {:stopColor (get colors/networks destination)}]
+     [svg/stop {:offset "1" :stopColor (get colors/networks source)}]]]])
+
+(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 (get colors/networks destination)}]
+   [svg/circle
+    {:cx     "5"
+     :cy     "117"
+     :r      "4"
+     :fill   (colors/theme-colors colors/white colors/neutral-90 theme)
+     :stroke (get colors/networks source)}]
+   [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 (get colors/networks destination)}]
+     [svg/stop {:offset "1" :stop-color (get colors/networks source)}]]]])
+
+(defn- view-internal
+  [{:keys [shape] :as props}]
+  (case shape
+    :linear [link-linear props]
+    :1x     [link-1x props]
+    :2x     [link-2x props]))
+
+(def view (quo.theme/with-theme view-internal))

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

@@ -12,6 +12,10 @@
   {:flex-direction  :row
    :justify-content :space-between})
 
+(def container-info-bottom
+  {:flex-direction :row
+   :padding-top    4})
+
 (def network-dropdown
   {:border-color  colors/neutral-50
    :border-width  1
@@ -20,8 +24,10 @@
    :height        32})
 
 (defn color-metrics
-  [metrics]
-  (if (= metrics :positive) colors/success-50 colors/danger-50))
+  [metrics theme]
+  (if (= metrics :positive)
+    (colors/theme-colors colors/success-50 colors/success-60 theme)
+    (colors/theme-colors colors/danger-50 colors/danger-60 theme)))
 
 (defn color-text-heading
   [theme]
@@ -40,8 +46,8 @@
   {:color (color-text-paragraph theme)})
 
 (defn dot-separator
-  [metrics]
-  {:background-color  (color-metrics metrics)
+  [metrics theme]
+  {:background-color  (color-metrics metrics theme)
    :margin-horizontal 4
    :width             2
    :height            2})

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

@@ -42,38 +42,38 @@
    [network-dropdown-temporary]])
 
 (defn- view-metrics
-  [metrics currency-change percentage-change]
+  [{:keys [metrics currency-change percentage-change theme]}]
   [rn/view
    {:style {:flex-direction :row
             :align-items    :center}}
    [text/text
     {:weight :medium
      :size   :paragraph-2
-     :style  {:color (style/color-metrics metrics)}}
+     :style  {:color (style/color-metrics metrics theme)}}
     percentage-change]
    [rn/view
-    {:style (style/dot-separator metrics)}]
+    {:style (style/dot-separator metrics theme)}]
    [text/text
     {:weight :medium
      :size   :paragraph-2
-     :style  {:color        (style/color-metrics metrics)
+     :style  {:color        (style/color-metrics metrics theme)
               :margin-right 4}}
     currency-change]
    [icons/icon
     (if (= metrics :positive) :i/positive :i/negative)
-    {:color (style/color-metrics metrics)
+    {:color (style/color-metrics metrics theme)
      :size  16}]])
 
 (defn- view-info-bottom
   [{:keys [state time-frame metrics date begin-date end-date
            currency-change percentage-change theme]}]
-  [rn/view {:flex-direction :row}
+  [rn/view {:style style/container-info-bottom}
    (when (= state :loading)
      [rn/view
       {:style {:flex-direction :row
                :align-items    :center}}
       (loading-bars [{:width 32 :height 10 :margin 8}
-                     {:width 32 :height 10 :margin 4}
+                     {:width 32 :height 10 :margin 2}
                      {:width 62 :height 10 :margin 4}
                      {:width 10 :height 10 :margin 0}]
                     theme)])
@@ -107,7 +107,11 @@
                  :margin-right 8}}
        (time-frame time-frames)]
       (when (and (= state :default) (not= metrics :none))
-        [view-metrics metrics currency-change percentage-change])])])
+        [view-metrics
+         {:metrics           metrics
+          :currency-change   currency-change
+          :percentage-change percentage-change
+          :theme             theme}])])])
 
 (defn- view-internal
   [props]

src/quo2/core.cljs

@@ -13,6 +13,8 @@
     quo2.components.buttons.dynamic-button.view
     quo2.components.buttons.predictive-keyboard.view
     quo2.components.buttons.slide-button.view
+    quo2.components.buttons.wallet-button.view
+    quo2.components.buttons.wallet-ctas.view
     quo2.components.browser.browser-input.view
     quo2.components.calendar.calendar.view
     quo2.components.calendar.calendar-day.view
@@ -70,7 +72,7 @@
     quo2.components.messages.author.view
     quo2.components.messages.gap
     quo2.components.messages.system-message
-    quo2.components.navigation.floating-shell-button
+    quo2.components.navigation.floating-shell-button.view
     quo2.components.navigation.page-nav
     quo2.components.notifications.activity-log.view
     quo2.components.notifications.activity-logs-photos.view
@@ -109,8 +111,10 @@
     quo2.components.text-combinations.title.view
     quo2.components.wallet.account-overview.view
     quo2.components.wallet.account-card.view
+    quo2.components.wallet.keypair.view
     quo2.components.wallet.network-amount.view
     quo2.components.wallet.network-bridge.view
+    quo2.components.wallet.network-link.view
     quo2.components.wallet.progress-bar.view
     quo2.components.wallet.summary-info.view
     quo2.components.wallet.token-input.view
@@ -135,6 +139,8 @@
 (def dynamic-button quo2.components.buttons.dynamic-button.view/view)
 (def predictive-keyboard quo2.components.buttons.predictive-keyboard.view/view)
 (def slide-button quo2.components.buttons.slide-button.view/view)
+(def wallet-button quo2.components.buttons.wallet-button.view/view)
+(def wallet-ctas quo2.components.buttons.wallet-ctas.view/view)
 
 ;;;; Browser
 (def browser-input quo2.components.browser.browser-input.view/view)
@@ -238,7 +244,7 @@
 (def static-skeleton quo2.components.loaders.skeleton.view/view)
 
 ;;;; Navigation
-(def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button)
+(def floating-shell-button quo2.components.navigation.floating-shell-button.view/view)
 (def page-nav quo2.components.navigation.page-nav/page-nav)
 
 ;;;; Markdown
@@ -313,9 +319,11 @@
 ;;;; Wallet
 (def account-card quo2.components.wallet.account-card.view/view)
 (def account-overview quo2.components.wallet.account-overview.view/view)
+(def keypair quo2.components.wallet.keypair.view/view)
 (def network-amount quo2.components.wallet.network-amount.view/view)
 (def network-bridge quo2.components.wallet.network-bridge.view/view)
 (def progress-bar quo2.components.wallet.progress-bar.view/view)
 (def summary-info quo2.components.wallet.summary-info.view/view)
+(def network-link quo2.components.wallet.network-link.view/view)
 (def token-input quo2.components.wallet.token-input.view/view)
 (def wallet-overview quo2.components.wallet.wallet-overview.view/view)

src/quo2/core_spec.cljs

@@ -8,6 +8,8 @@
     [quo2.components.buttons.composer-button.component-spec]
     [quo2.components.buttons.predictive-keyboard.component-spec]
     [quo2.components.buttons.slide-button.component-spec]
+    [quo2.components.buttons.wallet-button.component-spec]
+    [quo2.components.buttons.wallet-ctas.component-spec]
     [quo2.components.calendar.calendar.component-spec]
     [quo2.components.calendar.calendar-day.component-spec]
     [quo2.components.calendar.calendar.month-picker.component-spec]
@@ -54,6 +56,7 @@
     [quo2.components.tags.status-tags-component-spec]
     [quo2.components.wallet.account-overview.component-spec]
     [quo2.components.wallet.account-card.component-spec]
+    [quo2.components.wallet.keypair.component-spec]
     [quo2.components.wallet.network-amount.component-spec]
     [quo2.components.wallet.network-bridge.component-spec]
     [quo2.components.wallet.progress-bar.component-spec]

src/quo2/foundations/colors.cljs

@@ -1,5 +1,6 @@
 (ns quo2.foundations.colors
   (:require [clojure.string :as string]
+            [react-native.platform :as platform]
             [quo2.theme :as theme]))
 
 (defn alpha
@@ -126,12 +127,13 @@
 (def neutral-5-opa-70-blur (alpha neutral-5 0.7))
 (def neutral-10-opa-10-blur (alpha neutral-10 0.1))
 (def neutral-10-opa-40-blur (alpha neutral-10 0.4))
-(def neutral-80-opa-80-blur (alpha "#192438" 0.8))
+;; https://github.com/status-im/status-mobile/issues/14903
+(def neutral-80-opa-80-blur (if platform/android? (alpha "#192438" 0.8) "#1E2430CC"))
 (def neutral-90-opa-10-blur (alpha neutral-90 0.1))
 (def neutral-90-opa-40-blur (alpha neutral-90 0.4))
 (def neutral-90-opa-70-blur (alpha neutral-90 0.7))
 (def neutral-95-opa-70-blur neutral-95-opa-70)
-(def neutral-100-opa-70-blur neutral-100-opa-70)
+(def neutral-100-opa-70-blur (if platform/android? neutral-100-opa-70 "#0D1014B3"))
 
 ;;;;Black
 

src/react_native/fs.cljs

@@ -42,3 +42,11 @@
 (defn cache-dir
   []
   (.-CachesDirectoryPath ^js react-native-fs))
+
+(defn copy-assets
+  [src dest]
+  (.copyFileAssets ^js react-native-fs src dest))
+
+(defn main-bundle-path
+  []
+  (.-MainBundlePath ^js react-native-fs))

src/react_native/svg.cljs

@@ -10,3 +10,5 @@
 (def circle (reagent/adapt-react-class Svg/Circle))
 (def svgxml (reagent/adapt-react-class Svg/SvgXml))
 (def g (reagent/adapt-react-class Svg/G))
+(def linear-gradient (reagent/adapt-react-class Svg/LinearGradient))
+(def stop (reagent/adapt-react-class Svg/Stop))

src/status_im/communities/core.cljs

@@ -220,15 +220,6 @@
                                     (log/error "failed to import community" %)
                                     (re-frame/dispatch [::failed-to-import %]))}]})
 
-(rf/defn join
-  {:events [:communities/join]}
-  [_ community-id]
-  {:json-rpc/call [{:method      "wakuext_joinCommunity"
-                    :params      [community-id]
-                    :js-response true
-                    :on-success  #(re-frame/dispatch [::joined %])
-                    :on-error    #(log/error "failed to join community" community-id %)}]})
-
 (rf/defn request-to-join
   {:events [:communities/request-to-join]}
   [_ community-id]

src/status_im/contact/core.cljs

@@ -1,6 +1,6 @@
 (ns status-im.contact.core
-  (:require [utils.re-frame :as rf]
-            [status-im2.navigation.events :as navigation]))
+  (:require [status-im2.navigation.events :as navigation]
+            [utils.re-frame :as rf]))
 
 (rf/defn open-contact-toggle-list
   {:events [:contact.ui/start-group-chat-pressed]}
@@ -10,3 +10,9 @@
                         :group/selected-contacts #{}
                         :new-chat-name           "")}
             (navigation/navigate-to :contact-toggle-list nil)))
+
+(defn displayed-photo
+  [{:keys [images]}]
+  (or (:large images)
+      (:thumbnail images)
+      (first images)))

src/status_im/multiaccounts/logout/core.cljs

@@ -1,13 +1,13 @@
 (ns status-im.multiaccounts.logout.core
-  (:require [re-frame.core :as re-frame]
-            [utils.i18n :as i18n]
+  (:require [native-module.core :as native-module]
+            [re-frame.core :as re-frame]
             [status-im.multiaccounts.core :as multiaccounts]
-            [native-module.core :as native-module]
             [status-im.notifications.core :as notifications]
-            [utils.re-frame :as rf]
             [status-im.wallet.core :as wallet]
             [status-im2.common.keychain.events :as keychain]
-            [status-im2.db :as db]))
+            [status-im2.db :as db]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
 
 (re-frame/reg-fx
  ::logout
@@ -15,14 +15,15 @@
    (native-module/logout)))
 
 (rf/defn initialize-app-db
-  [{{:keys           [keycard]
+  [{{:keys           [keycard initials-avatar-font-file]
      :biometric/keys [supported-type]
      :network/keys   [type]}
     :db}]
   {:db (assoc db/app-db
-              :network/type             type
-              :keycard                  (dissoc keycard :secrets :pin :application-info)
-              :biometric/supported-type supported-type)})
+              :network/type              type
+              :initials-avatar-font-file initials-avatar-font-file
+              :keycard                   (dissoc keycard :secrets :pin :application-info)
+              :biometric/supported-type  supported-type)})
 
 (rf/defn logout-method
   {:events [::logout-method]}

src/status_im/multiaccounts/update/core.cljs

@@ -1,5 +1,6 @@
 (ns status-im.multiaccounts.update.core
-  (:require [status-im.utils.types :as types]
+  (:require [status-im.ethereum.ens :as ens]
+            [status-im.utils.types :as types]
             [status-im2.constants :as constants]
             [taoensso.timbre :as log]
             [utils.re-frame :as rf]))
@@ -19,10 +20,12 @@
                 display-name]} (:profile/profile db)
         account                (some #(and (= (:key-uid %) key-uid) %) raw-multiaccounts-from-status-go)]
     (when-let [new-name (and account (or preferred-name display-name name))]
-      (rf/merge cofx
-                {:json-rpc/call [{:method     "multiaccounts_updateAccount"
-                                  :params     [(assoc account :name new-name)]
-                                  :on-success #(log/debug "sent multiaccount update")}]}))))
+      (rf/merge
+       cofx
+       {:db            (assoc-in db [:profile/profile :ens-name?] (ens/is-valid-eth-name? new-name))
+        :json-rpc/call [{:method     "multiaccounts_updateAccount"
+                         :params     [(assoc account :name new-name)]
+                         :on-success #(log/debug "sent multiaccount update")}]}))))
 
 (rf/defn multiaccount-update
   "Takes effects (containing :db) + new multiaccount fields, adds all effects necessary for multiaccount update.

src/status_im/ui/components/chat_icon/screen.cljs

@@ -2,8 +2,11 @@
   (:require [clojure.string :as string]
             [quo.design-system.colors :as colors]
             [quo.react-native :as rn]
+            [quo2.components.avatars.user-avatar.style :as user-avatar.style]
             [quo2.core :as quo]
+            [quo2.theme :as theme]
             [re-frame.core :as re-frame.core]
+            [status-im.ethereum.ens :as ens]
             [status-im.multiaccounts.core :as multiaccounts]
             [status-im.ui.components.chat-icon.styles :as styles]
             [status-im.ui.components.icons.icons :as icons]
@@ -47,7 +50,7 @@
      [rn/text {:style (:default-chat-icon-text styles)} emoji]]))
 
 (defn profile-photo-plus-dot-view
-  [{:keys [public-key photo-container photo-path community?]}]
+  [{:keys [public-key full-name customization-color photo-container photo-path community?]}]
   (let [photo-container         (if (nil? photo-container)
                                   styles/container-chat-list
                                   photo-container)
@@ -55,11 +58,28 @@
         dot-styles              (visibility-status-utils/icon-visibility-status-dot
                                  public-key
                                  size)
-        dot-accessibility-label (:accessibility-label dot-styles)]
+        dot-accessibility-label (:accessibility-label dot-styles)
+        text-style              (styles/default-chat-icon-text size)]
     [rn/view
      {:style               photo-container
       :accessibility-label :profile-photo}
-     [photos/photo photo-path {:size size}]
+     (if (:fn photo-path)
+       ;; temp support new media server avatar for old component
+       [photos/photo
+        {:uri ((:fn photo-path)
+               {:size             size
+                :full-name        full-name
+                :font-size        (get text-style :font-size)
+                :background-color (user-avatar.style/customization-color customization-color
+                                                                         (theme/get-theme))
+                :indicator-size   0
+                :indicator-border 0
+                :indicator-color  "#000000"
+                :color            (get text-style :color)
+                :length           2
+                :ring?            (not (ens/is-valid-eth-name? full-name))})}
+        {:size size}]
+       [photos/photo photo-path {:size size}])
      (when-not community?
        [rn/view
         {:style               dot-styles
@@ -179,14 +199,28 @@
 
 (defn profile-icon-view
   [photo-path name color emoji edit? size override-styles public-key community?]
-  (let [styles (merge {:container              {:width size :height size}
-                       :size                   size
-                       :chat-icon              styles/chat-icon-profile
-                       :default-chat-icon      (styles/default-chat-icon-profile color size)
-                       :default-chat-icon-text (if (string/blank? emoji)
-                                                 (styles/default-chat-icon-text size)
-                                                 (styles/emoji-chat-icon-text size))}
-                      override-styles)]
+  (let [styles     (merge {:container              {:width size :height size}
+                           :size                   size
+                           :chat-icon              styles/chat-icon-profile
+                           :default-chat-icon      (styles/default-chat-icon-profile color size)
+                           :default-chat-icon-text (if (string/blank? emoji)
+                                                     (styles/default-chat-icon-text size)
+                                                     (styles/emoji-chat-icon-text size))}
+                          override-styles)
+        photo-path (if (:fn photo-path)
+                     ;; temp support new media server avatar for old component
+                     {:uri ((:fn photo-path)
+                            {:size             size
+                             :full-name        name
+                             :font-size        (get-in styles [:default-chat-icon-text :font-size])
+                             :background-color (get-in styles [:default-chat-icon :background-color])
+                             :indicator-size   0
+                             :indicator-border 0
+                             :indicator-color  "#000000"
+                             :color            (get-in styles [:default-chat-icon-text :color])
+                             :length           2
+                             :ring?            (not (ens/is-valid-eth-name? name))})}
+                     photo-path)]
     [rn/view (:container styles)
      (if (and photo-path (seq photo-path))
        [profile-photo-plus-dot-view

src/status_im/ui/screens/contacts_list/views.cljs

@@ -2,23 +2,25 @@
   (:require [quo.core :as quo]
             [quo.design-system.colors :as colors]
             [re-frame.core :as re-frame]
-            [utils.i18n :as i18n]
             [status-im.multiaccounts.core :as multiaccounts]
             [status-im.ui.components.chat-icon.screen :as chat-icon.screen]
             [status-im.ui.components.invite.views :as invite]
             [status-im.ui.components.list.views :as list.views]
-            [status-im.ui.components.react :as react])
+            [status-im.ui.components.react :as react]
+            [utils.i18n :as i18n])
   (:require-macros [status-im.utils.views :refer [defview letsubs]]))
 
 (defn contacts-list-item
   [{:keys [public-key] :as contact}]
-  (let [{:keys [primary-name secondary-name]} contact]
+  (let [{:keys [primary-name secondary-name customization-color]} contact]
     [quo/list-item
      {:title    primary-name
       :subtitle secondary-name
       :icon     [chat-icon.screen/profile-photo-plus-dot-view
-                 {:public-key public-key
-                  :photo-path (multiaccounts/displayed-photo contact)}]
+                 {:public-key          public-key
+                  :full-name           primary-name
+                  :customization-color (or customization-color :primary)
+                  :photo-path          (multiaccounts/displayed-photo contact)}]
       :chevron  true
       :on-press #(re-frame/dispatch [:chat.ui/show-profile public-key])}]))
 

src/status_im/ui/screens/profile/contact/views.cljs

@@ -3,9 +3,10 @@
             [quo.components.list.item :as list-item]
             [quo.core :as quo]
             [quo.design-system.colors :as colors]
+            [quo2.components.avatars.user-avatar.style :as user-avatar.style]
+            [quo2.theme :as theme]
             [re-frame.core :as re-frame]
             [reagent.core :as reagent]
-            [utils.i18n :as i18n]
             [status-im.multiaccounts.core :as multiaccounts]
             [status-im.ui.components.keyboard-avoid-presentation :as kb-presentation]
             [status-im.ui.components.profile-header.view :as profile-header]
@@ -13,8 +14,9 @@
             [status-im.ui.components.toolbar :as toolbar]
             [status-im.ui.components.topbar :as topbar]
             [status-im.ui.screens.profile.components.sheets :as sheets]
-            [utils.re-frame :as rf]
-            [status-im2.constants :as constants]))
+            [status-im2.constants :as constants]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
 
 (defn actions
   [{:keys [public-key added? blocked? ens-name mutual?] :as contact} muted?]
@@ -179,9 +181,11 @@
          :as   contact}
         @(re-frame/subscribe
           [:contacts/current-contact])
+
         muted? @(re-frame/subscribe [:chats/muted
                                      public-key])
-        {:keys [primary-name secondary-name]} contact
+        {:keys [primary-name secondary-name customization-color]} contact
+        customization-color (or customization-color :primary)
         on-share #(re-frame/dispatch
                    [:show-popover
                     (merge
@@ -201,14 +205,17 @@
                               :on-press            #(re-frame/dispatch [:navigate-back])}]}]
        [:<>
         [(profile-header/extended-header
-          {:on-press         on-share
+          {:on-press on-share
            :bottom-separator false
-           :title            primary-name
-           :photo            (multiaccounts/displayed-photo contact)
-           :monospace        (not ens-verified)
-           :subtitle         secondary-name
-           :compressed-key   compressed-key
-           :public-key       public-key})]
+           :title primary-name
+           :color
+           (user-avatar.style/customization-color customization-color
+                                                  (theme/get-theme))
+           :photo (multiaccounts/displayed-photo contact)
+           :monospace (not ens-verified)
+           :subtitle secondary-name
+           :compressed-key compressed-key
+           :public-key public-key})]
         [react/view
          {:height 1 :background-color colors/gray-lighter :margin-top 8}]
         [nickname-settings contact]

src/status_im/ui/screens/profile/user/views.cljs

@@ -2,16 +2,16 @@
   (:require [quo.core :as quo]
             [quo.design-system.colors :as colors]
             [quo.design-system.spacing :as spacing]
+            [quo2.components.avatars.user-avatar.style :as user-avatar.style]
+            [quo2.theme :as theme]
             [re-frame.core :as re-frame]
             [reagent.core :as reagent]
             [status-im.ethereum.stateofus :as stateofus]
-            [utils.i18n :as i18n]
             [status-im.multiaccounts.core :as multiaccounts]
             [status-im.ui.components.common.common :as components.common]
             [status-im.ui.components.copyable-text :as copyable-text]
             [status-im.ui.components.list-selection :as list-selection]
             [status-im.ui.components.profile-header.view :as profile-header]
-            [status-im2.common.qr-code-viewer.view :as qr-code-viewer]
             [status-im.ui.components.react :as react]
             [status-im.ui.screens.profile.user.edit-picture :as edit]
             [status-im.ui.screens.profile.user.styles :as styles]
@@ -19,7 +19,9 @@
             [status-im.utils.gfycat.core :as gfy]
             [status-im.utils.universal-links.utils :as universal-links]
             [status-im.utils.utils :as utils]
-            [status-im2.config :as config])
+            [status-im2.common.qr-code-viewer.view :as qr-code-viewer]
+            [status-im2.config :as config]
+            [utils.i18n :as i18n])
   (:require-macros [status-im.utils.views :as views]))
 
 (views/defview share-chat-key
@@ -190,9 +192,12 @@
     (let [{:keys [public-key
                   compressed-key
                   ens-verified
-                  preferred-name]
+                  preferred-name
+                  key-uid]
            :as   account}
           @(re-frame/subscribe [:profile/multiaccount])
+          customization-color (or (:color @(re-frame/subscribe [:onboarding-2/profile]))
+                                  @(re-frame/subscribe [:profile/customization-color key-uid]))
           on-share #(re-frame/dispatch [:show-popover
                                         {:view     :share-chat-key
                                          :address  (or compressed-key
@@ -213,6 +218,8 @@
                               :on-edit   #(re-frame/dispatch [:bottom-sheet/show-sheet-old
                                                               {:content (edit/bottom-sheet
                                                                          has-picture)}])
+                              :color     (user-avatar.style/customization-color customization-color
+                                                                                (theme/get-theme))
                               :title     (multiaccounts/displayed-name account)
                               :photo     (multiaccounts/displayed-photo account)
                               :monospace (not ens-verified)

src/status_im/utils/pixel_ratio.cljs

@@ -0,0 +1,4 @@
+(ns status-im.utils.pixel-ratio
+  (:require ["react-native" :as rn]))
+
+(def ratio (rn/PixelRatio.get))

src/status_im2/common/bottom_sheet/style.cljs

@@ -14,7 +14,7 @@
    :margin-vertical  8})
 
 (defn sheet
-  [{:keys [top bottom]} window-height theme padding-bottom-override shell?]
+  [{:keys [top bottom]} window-height theme padding-bottom-override selected-item shell?]
   {:position                :absolute
    :max-height              (- window-height top)
    :z-index                 1
@@ -23,13 +23,19 @@
    :right                   0
    :border-top-left-radius  20
    :border-top-right-radius 20
-   :overflow                (when shell? :hidden)
+   :overflow                (when-not selected-item :hidden)
    :flex                    1
    :padding-bottom          (or padding-bottom-override (+ bottom 8))
    :background-color        (if shell?
                               :transparent
                               (colors/theme-colors colors/white colors/neutral-95 theme))})
 
+(def gradient-bg
+  {:position :absolute
+   :top      0
+   :left     0
+   :right    0})
+
 (def shell-bg
   {:position         :absolute
    :background-color (if platform/ios? colors/white-opa-5 colors/neutral-100-opa-90)

src/status_im2/common/bottom_sheet/view.cljs

@@ -1,7 +1,8 @@
 (ns status-im2.common.bottom-sheet.view
   (:require [oops.core :as oops]
+            [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]
+            [quo2.theme :as quo.theme]
             [react-native.blur :as blur]
             [react-native.core :as rn]
             [react-native.gesture :as gesture]
@@ -57,7 +58,8 @@
   [_ _]
   (let [sheet-height (reagent/atom 0)]
     (fn [{:keys [hide? insets theme]}
-         {:keys [content selected-item padding-bottom-override on-close shell?]}]
+         {:keys [content selected-item padding-bottom-override on-close shell?
+                 gradient-cover? customization-color]}]
       (let [{window-height :height} (rn/get-window)
             bg-opacity              (reanimated/use-shared-value 0)
             translate-y             (reanimated/use-shared-value window-height)
@@ -88,8 +90,12 @@
                                      window-height
                                      theme
                                      padding-bottom-override
+                                     selected-item
                                      shell?))
             :on-layout #(reset! sheet-height (oops/oget % "nativeEvent" "layout" "height"))}
+           (when gradient-cover?
+             [rn/view {:style style/gradient-bg}
+              [quo/gradient-cover {:customization-color customization-color}]])
            (when shell?
              [blur/ios-view {:style style/shell-bg}])
            (when selected-item
@@ -106,4 +112,4 @@
   [args sheet]
   [:f> f-view args sheet])
 
-(def view (theme/with-theme internal-view))
+(def view (quo.theme/with-theme internal-view))

src/status_im2/common/confirmation_drawer/view.cljs

@@ -1,9 +1,9 @@
 (ns status-im2.common.confirmation-drawer.view
-  (:require [utils.i18n :as i18n]
-            [quo2.core :as quo]
+  (:require [quo2.core :as quo]
             [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.common.confirmation-drawer.style :as style]
+            [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
 
 (defn avatar
@@ -11,12 +11,12 @@
   (if group-chat
     [quo/group-avatar
      {:customization-color color
-      :size                :x-small}]
+      :size                :size/s-20}]
     [quo/user-avatar
-     {:full-name        display-name
-      :profile-picture  photo-path
-      :size             :xxs
-      :status-indicator false}]))
+     {:full-name         display-name
+      :profile-picture   photo-path
+      :size              :xxs
+      :status-indicator? false}]))
 
 (defn extra-action-view
   [extra-action extra-text extra-action-selected?]
@@ -41,12 +41,7 @@
                                              (= contact-name-by-identity
                                                 nil)       name
                                              :else         contact-name-by-identity)
-            contact                        (when-not group-chat
-                                             (rf/sub [:contacts/contact-by-address
-                                                      id]))
-            photo-path                     (or profile-picture
-                                               (when-not (empty? (:images contact))
-                                                 (rf/sub [:chats/photo-path id])))]
+            photo-path                     (or profile-picture (rf/sub [:chats/photo-path id]))]
         [rn/view
          {:style               {:margin-horizontal 20}
           :accessibility-label accessibility-label}

src/status_im2/common/font.cljs

@@ -0,0 +1,17 @@
+(ns status-im2.common.font
+  (:require
+    [clojure.string :as string]
+    [re-frame.core :as re-frame]
+    utils.image-server
+    [utils.re-frame :as rf]))
+
+(re-frame/reg-fx
+ :font/get-font-file-for-initials-avatar
+ (fn [callback]
+   (utils.image-server/get-font-file-ready callback)))
+
+(rf/defn init-abs-root-path
+  {:events [:font/init-font-file-for-initials-avatar]}
+  [{:keys [db]} initials-avatar-font-file]
+  (when-not (string/blank? initials-avatar-font-file)
+    {:db (assoc db :initials-avatar-font-file initials-avatar-font-file)}))

src/status_im2/common/home/view.cljs

@@ -60,10 +60,7 @@
       {:accessibility-label :open-profile
        :style               style/left-section}
       [quo/user-avatar
-       (merge {:status-indicator? true
-               :size              :small
-               :online?           online?}
-              avatar)]]]))
+       (merge {:size :small :online? online?} avatar)]]]))
 
 (defn connectivity-sheet
   []
@@ -105,12 +102,12 @@
               :on-press            #(dispatch-and-chill [:open-modal :share-shell] 1000)})
       :i/qr-code]
      [rn/view
-      [unread-indicator]
       [quo/button
        (merge button-common-props
               {:accessibility-label :open-activity-center-button
                :on-press            #(rf/dispatch [:activity-center/open])})
-       :i/activity-center]]]))
+       :i/activity-center]
+      [unread-indicator]]]))
 
 ;; TODO: should be moved to quo2 https://github.com/status-im/status-mobile/issues/16964
 (defn top-nav

src/status_im2/common/log.cljs

@@ -1,11 +1,11 @@
 (ns status-im2.common.log
   (:require [clojure.string :as string]
+            [native-module.core :as native-module]
             [re-frame.core :as re-frame]
+            [status-im.utils.types :as types]
             [status-im2.config :as config]
             [taoensso.timbre :as log]
-            [utils.re-frame :as rf]
-            [native-module.core :as native-module]
-            [status-im.utils.types :as types]))
+            [utils.re-frame :as rf]))
 
 (def logs-queue (atom #queue []))
 (def max-log-entries 1000)
@@ -28,6 +28,7 @@
                         :mobile-system? false
                         :log-level      level
                         :callback       handle-error}]
+    (log/merge-config! {:ns-whitelist ["*"]})
     (if (string/blank? level)
       (native-module/init-status-go-logging (merge logging-params {:log-level "WARN"}))
       (do

src/status_im2/common/parallax/view.cljs

@@ -6,7 +6,7 @@
             [status-im2.common.parallax.style :as style]))
 
 (defn f-sensor-animated-video
-  [{:keys [offset stretch order source disable-parallax?]}]
+  [{:keys [offset stretch order source disable-parallax? enable-looping?]}]
   (let [double-stretch          (* 2 stretch)
         {window-width  :width
          window-height :height} (rn/get-window)
@@ -25,14 +25,15 @@
                                          image-style]}
        [transparent-video/view
         {:source source
-         :style  style/video}]])))
+         :style  style/video
+         :loop   enable-looping?}]])))
 
 (defn sensor-animated-video
   [props]
   [:f> f-sensor-animated-video props])
 
 (defn f-video
-  [{:keys [layers disable-parallax? offset stretch container-style]
+  [{:keys [layers disable-parallax? offset stretch container-style enable-looping?]
     :or   {offset  50
            stretch 0}}]
   [rn/view
@@ -44,7 +45,8 @@
                     :offset            offset
                     :stretch           stretch
                     :order             (inc idx)
-                    :disable-parallax? disable-parallax?}])
+                    :disable-parallax? disable-parallax?
+                    :enable-looping?   enable-looping?}])
                 layers)])
 
 (defn video

src/status_im2/common/toasts/view.cljs

@@ -11,10 +11,17 @@
 
 (defn toast
   [toast-id]
-  (let [{:keys [type] :as toast-opts} (rf/sub [:toasts/toast toast-id])]
+  (let [{:keys [type user-public-key] :as toast-opts} (rf/sub [:toasts/toast toast-id])
+        profile-picture                               (when user-public-key
+                                                        (rf/sub [:chats/photo-path user-public-key]))
+        toast-opts-with-profile-picture               (if profile-picture
+                                                        (assoc-in toast-opts
+                                                         [:user :profile-picture]
+                                                         profile-picture)
+                                                        toast-opts)]
     (if (= type :notification)
-      [quo/notification toast-opts]
-      [quo/toast toast-opts])))
+      [quo/notification toast-opts-with-profile-picture]
+      [quo/toast toast-opts-with-profile-picture])))
 
 (defn f-container
   [toast-id]

src/status_im2/constants.cljs

@@ -345,3 +345,11 @@
 
 (def ^:const onboarding-modal-animation-duration 300)
 (def ^:const onboarding-modal-animation-delay 400)
+
+(def ^:const initials-avatar-font-conf
+  "we pass absolute font file path and uppercase ratio to status-go for media
+  server to serve initials avatar image
+  `:uppercase-ratio` is uppercase-height/line-height for Inter-Medium"
+  {:ios             "Inter-Medium.otf"
+   :android         "Inter-Medium.ttf"
+   :uppercase-ratio 0.603861228044709})

src/status_im2/contexts/add_new_contact/views.cljs

@@ -2,10 +2,9 @@
   (:require
     [clojure.string :as string]
     [quo2.core :as quo]
-    [react-native.core :as rn]
     [react-native.clipboard :as clipboard]
+    [react-native.core :as rn]
     [reagent.core :as reagent]
-    [status-im.multiaccounts.core :as multiaccounts]
     [status-im.qr-scanner.core :as qr-scanner]
     [status-im2.contexts.add-new-contact.style :as style]
     [utils.debounce :as debounce]
@@ -15,8 +14,8 @@
 
 (defn found-contact
   [public-key]
-  (let [{:keys [primary-name compressed-key]
-         :as   contact} (rf/sub [:contacts/contact-by-identity public-key])]
+  (let [{:keys [primary-name compressed-key]} (rf/sub [:contacts/contact-by-identity public-key])
+        photo-path                            (rf/sub [:chats/photo-path public-key])]
     (when primary-name
       [rn/view style/found-user
        [quo/text (style/text-description)
@@ -24,7 +23,7 @@
        [rn/view (style/found-user-container)
         [quo/user-avatar
          {:full-name         primary-name
-          :profile-picture   (multiaccounts/displayed-photo contact)
+          :profile-picture   photo-path
           :size              :small
           :status-indicator? false}]
         [rn/view style/found-user-text

src/status_im2/contexts/chat/composer/actions/view.cljs

@@ -65,16 +65,16 @@
     :i/arrow-up]])
 
 (defn send-button
-  [props {:keys [text-value] :as state} animations window-height images? edit]
-  (let [btn-opacity (reanimated/use-shared-value 0)
-        z-index     (reagent/atom (if (and (empty? @text-value) (not images?)) 0 1))]
+  [props {:keys [text-value] :as state} animations window-height images? edit btn-opacity]
+  (let [z-index (reagent/atom (if (and (empty? @text-value) (not images?)) 0 1))]
     [:f> f-send-button props state animations window-height images? btn-opacity z-index edit]))
 
 (defn disabled-audio-button
-  []
-  [quo/composer-button
-   {:on-press #(js/alert "to be implemented")
-    :icon     :i/audio}])
+  [opacity]
+  [reanimated/view {:style (reanimated/apply-animations-to-style {:opacity opacity} {})}
+   [quo/composer-button
+    {:on-press #(js/alert "to be implemented")
+     :icon     :i/audio}]])
 
 (defn audio-button
   [{:keys [record-reset-fn input-ref]}
@@ -169,8 +169,8 @@
     [quo/composer-button
      {:on-press        #(go-to-camera images-count)
       :icon            :i/camera
-      :container-style {:margin-right 12}}
-    ]))
+      :container-style {:margin-right 12}}]))
+
 
 (defn open-photo-selector
   [{:keys [input-ref]}
@@ -212,16 +212,18 @@
 
 (defn view
   [props state animations window-height insets {:keys [edit images]}]
-  [rn/view {:style style/actions-container}
-   [rn/view
-    {:style {:flex-direction :row
-             :display        (if @(:recording? state) :none :flex)}}
-    [camera-button]
-    [image-button props animations insets]
-    [reaction-button]
-    [format-button]]
-   [:f> send-button props state animations window-height images edit]
-   (when (and (not edit) (not images))
-     ;; TODO(alwx): needs to be replaced with an `audio-button` later.
-     ;; See https://github.com/status-im/status-mobile/issues/16084 for more details.
-     [disabled-audio-button])])
+  (let [send-btn-opacity  (reanimated/use-shared-value 0)
+        audio-btn-opacity (reanimated/interpolate send-btn-opacity [0 1] [1 0])]
+    [rn/view {:style style/actions-container}
+     [rn/view
+      {:style {:flex-direction :row
+               :display        (if @(:recording? state) :none :flex)}}
+      [camera-button]
+      [image-button props animations insets]
+      [reaction-button]
+      [format-button]]
+     [:f> send-button props state animations window-height images edit send-btn-opacity]
+     (when (and (not edit) (not images))
+       ;; TODO(alwx): needs to be replaced with an `audio-button` later.
+       ;; See https://github.com/status-im/status-mobile/issues/16084 for more details.
+       [:f> disabled-audio-button audio-btn-opacity])]))

src/status_im2/contexts/chat/composer/reply/view.cljs

@@ -1,16 +1,16 @@
 (ns status-im2.contexts.chat.composer.reply.view
   (:require [clojure.string :as string]
-            [react-native.core :as rn]
-            [react-native.reanimated :as reanimated]
-            [status-im2.contexts.chat.composer.constants :as constants]
-            [utils.i18n :as i18n]
             [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
-            [status-im2.constants :as constant]
+            [react-native.core :as rn]
+            [react-native.linear-gradient :as linear-gradient]
+            [react-native.reanimated :as reanimated]
             [status-im.ethereum.stateofus :as stateofus]
-            [utils.re-frame :as rf]
+            [status-im2.constants :as constant]
+            [status-im2.contexts.chat.composer.constants :as constants]
             [status-im2.contexts.chat.composer.reply.style :as style]
-            [react-native.linear-gradient :as linear-gradient]))
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
 
 (defn get-quoted-text-with-mentions
   [parsed-text]
@@ -63,14 +63,14 @@
 (defn reply-from
   [{:keys [from contact-name current-public-key]}]
   (let [display-name (first (rf/sub [:contacts/contact-two-names-by-identity from]))
-        contact      (rf/sub [:contacts/contact-by-address from])
-        photo-path   (when-not (empty? (:images contact)) (rf/sub [:chats/photo-path from]))]
+        photo-path   (rf/sub [:chats/photo-path from])]
     [rn/view {:style style/reply-from}
      [quo/user-avatar
       {:full-name         display-name
        :profile-picture   photo-path
        :status-indicator? false
-       :size              :xxxs}]
+       :size              :xxxs
+       :ring?             false}]
      [quo/text
       {:weight          :semi-bold
        :size            :paragraph-2

src/status_im2/contexts/chat/composer/style.cljs

@@ -14,6 +14,12 @@
      :shadow-offset  {:width 0 :height (colors/theme-colors -4 -8)}}
     {:elevation (if @focused? 10 0)}))
 
+(def composer-sheet-and-jump-to-container
+  {:position :absolute
+   :bottom   0
+   :left     0
+   :right    0})
+
 (defn sheet-container
   [insets {:keys [focused?]} {:keys [container-opacity]}]
   (reanimated/apply-animations-to-style
@@ -22,10 +28,6 @@
     {:border-top-left-radius  20
      :border-top-right-radius 20
      :padding-horizontal      20
-     :position                :absolute
-     :bottom                  0
-     :left                    0
-     :right                   0
      :background-color        (colors/theme-colors colors/white colors/neutral-95)
      :z-index                 3
      :padding-bottom          (:bottom insets)}
@@ -87,8 +89,7 @@
     :right            0
     :bottom           0
     :height           window-height
-    :background-color colors/neutral-95-opa-70
-    :z-index          1}))
+    :background-color colors/neutral-95-opa-70}))
 
 (defn blur-container
   [height focused?]
@@ -110,18 +111,11 @@
    :blur-type   (colors/theme-colors :light :dark)
    :blur-amount 20})
 
-(defn shell-container
-  [bottom translate-y]
-  (reanimated/apply-animations-to-style
-   {:bottom    bottom ; we use height of the input directly as bottom position
-    :transform [{:translate-y translate-y}]}
-   {:position :absolute
-    :left     0
-    :right    0}))
-
 (defn shell-button
   [translate-y opacity]
   (reanimated/apply-animations-to-style
    {:transform [{:translate-y translate-y}]
     :opacity   opacity}
-   {}))
+   {:position   :absolute
+    :top        0
+    :align-self :center}))

src/status_im2/contexts/chat/composer/sub_view.cljs

@@ -5,9 +5,7 @@
     [react-native.core :as rn]
     [status-im2.config :as config]
     [react-native.reanimated :as reanimated]
-    [react-native.safe-area :as safe-area]
     [status-im2.contexts.chat.composer.style :as style]
-    [status-im2.contexts.chat.composer.utils :as utils]
     [status-im2.contexts.chat.messages.list.view :as messages.list]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
@@ -27,12 +25,8 @@
   [:f> f-blur-view layout-height focused?])
 
 (defn- f-shell-button
-  [{:keys [maximized? focused?]} {:keys [height]} {:keys [reply edit]}]
+  [{:keys [focused?]}]
   (let [customization-color (rf/sub [:profile/customization-color])
-        insets              (safe-area/get-insets)
-        extra-height        (utils/calc-top-content-height reply edit)
-        neg-y               (utils/calc-shell-neg-y insets maximized? extra-height)
-        y-container         (reanimated/use-shared-value neg-y)
         hide-shell?         (or @focused? @messages.list/show-floating-scroll-down-button)
         y-shell             (reanimated/use-shared-value (if hide-shell? 35 0))
         opacity             (reanimated/use-shared-value (if hide-shell? 0 1))]
@@ -41,9 +35,7 @@
        (reanimated/animate opacity (if hide-shell? 0 1))
        (reanimated/animate y-shell (if hide-shell? 35 0)))
      [@focused? @messages.list/show-floating-scroll-down-button])
-    (rn/use-effect #(reanimated/animate y-container neg-y) [reply edit])
-    [reanimated/view
-     {:style (style/shell-container height y-container)}
+    [:<>
      [reanimated/view
       {:style (style/shell-button y-shell opacity)}
       [quo/floating-shell-button
@@ -54,11 +46,12 @@
                                 (rf/dispatch [:shell/navigate-to-jump-to]))
          :customization-color customization-color
          :label               (i18n/label :t/jump-to)
-         :style               {:align-self :center}}} {}]]
+         :style               {:align-self :center}}}
+       {}]]
      [quo/floating-shell-button
       (when @messages.list/show-floating-scroll-down-button
         {:scroll-to-bottom {:on-press messages.list/scroll-to-bottom}})
-      {:bottom 24}]]))
+      {}]]))
 
 (defn shell-button
   [state animations subs]

src/status_im2/contexts/chat/composer/view.cljs

@@ -66,62 +66,64 @@
     (effects/link-previews props state animations subs)
     (effects/images props state animations subs)
     [:<>
-     [sub-view/shell-button state animations subs]
      (when chat-screen-loaded?
        [mentions/view props state animations max-height cursor-pos
         (:images subs)
         (:link-previews? subs)
         (:reply subs)
         (:edit subs)])
-     [gesture/gesture-detector
-      {:gesture (drag-gesture/drag-gesture props state animations subs dimensions keyboard-shown)}
-      [reanimated/view
-       {:style     (style/sheet-container insets state animations)
-        :on-layout #(handler/layout % state blur-height)}
-       [sub-view/bar]
-       (when chat-screen-loaded?
-         [:<>
-          [reply/view state]
-          [edit/view state]])
-       [reanimated/touchable-opacity
-        {:active-opacity      1
-         :on-press            (when @(:input-ref props) #(.focus ^js @(:input-ref props)))
-         :style               (style/input-container (:height animations) max-height)
-         :accessibility-label :message-input-container}
-        [rn/selectable-text-input
-         {:ref        #(reset! (:selectable-input-ref props) %)
-          :menu-items @(:menu-items state)
-          :style      (style/input-view state)}
-         [rn/text-input
-          {:ref                      #(reset! (:input-ref props) %)
-           :default-value            @(:text-value state)
-           :on-focus                 #(handler/focus props state animations dimensions)
-           :on-blur                  #(handler/blur state animations dimensions subs)
-           :on-content-size-change   #(handler/content-size-change %
-                                                                   state
-                                                                   animations
-                                                                   subs
-                                                                   dimensions
-                                                                   (or keyboard-shown (:edit subs)))
-           :on-scroll                #(handler/scroll % props state animations dimensions)
-           :on-change-text           #(handler/change-text % props state)
-           :on-selection-change      #(handler/selection-change % props state)
-           :on-selection             #(selection/on-selection % props state)
-           :keyboard-appearance      (theme/theme-value :light :dark)
-           :max-height               max-height
-           :max-font-size-multiplier 1
-           :multiline                true
-           :placeholder              (i18n/label :t/type-something)
-           :placeholder-text-color   (colors/theme-colors colors/neutral-30 colors/neutral-50)
-           :style                    (style/input-text props state subs max-height)
-           :max-length               constants/max-text-size
-           :accessibility-label      :chat-message-input}]]
+     [rn/view
+      {:style style/composer-sheet-and-jump-to-container}
+      [sub-view/shell-button state]
+      [gesture/gesture-detector
+       {:gesture (drag-gesture/drag-gesture props state animations subs dimensions keyboard-shown)}
+       [reanimated/view
+        {:style     (style/sheet-container insets state animations)
+         :on-layout #(handler/layout % state blur-height)}
+        [sub-view/bar]
         (when chat-screen-loaded?
           [:<>
-           [gradients/view props state animations show-bottom-gradient?]
-           [link-preview/view]
-           [images/images-list]])]
-       [actions/view props state animations window-height insets subs]]]]))
+           [reply/view state]
+           [edit/view state]])
+        [reanimated/touchable-opacity
+         {:active-opacity      1
+          :on-press            (when @(:input-ref props) #(.focus ^js @(:input-ref props)))
+          :style               (style/input-container (:height animations) max-height)
+          :accessibility-label :message-input-container}
+         [rn/selectable-text-input
+          {:ref        #(reset! (:selectable-input-ref props) %)
+           :menu-items @(:menu-items state)
+           :style      (style/input-view state)}
+          [rn/text-input
+           {:ref                      #(reset! (:input-ref props) %)
+            :default-value            @(:text-value state)
+            :on-focus                 #(handler/focus props state animations dimensions)
+            :on-blur                  #(handler/blur state animations dimensions subs)
+            :on-content-size-change   #(handler/content-size-change %
+                                                                    state
+                                                                    animations
+                                                                    subs
+                                                                    dimensions
+                                                                    (or keyboard-shown (:edit subs)))
+            :on-scroll                #(handler/scroll % props state animations dimensions)
+            :on-change-text           #(handler/change-text % props state)
+            :on-selection-change      #(handler/selection-change % props state)
+            :on-selection             #(selection/on-selection % props state)
+            :keyboard-appearance      (theme/theme-value :light :dark)
+            :max-height               max-height
+            :max-font-size-multiplier 1
+            :multiline                true
+            :placeholder              (i18n/label :t/type-something)
+            :placeholder-text-color   (colors/theme-colors colors/neutral-30 colors/neutral-50)
+            :style                    (style/input-text props state subs max-height)
+            :max-length               constants/max-text-size
+            :accessibility-label      :chat-message-input}]]
+         (when chat-screen-loaded?
+           [:<>
+            [gradients/view props state animations show-bottom-gradient?]
+            [link-preview/view]
+            [images/images-list]])]
+        [:f> actions/view props state animations window-height insets subs]]]]]))
 
 (defn composer
   [insets]

src/status_im2/contexts/chat/group_details/view.cljs

@@ -169,7 +169,7 @@
                :padding-horizontal 20}}
       [quo/group-avatar
        {:customization-color color
-        :size                :small}]
+        :size                :size/s-32}]
       [quo/text
        {:weight :semi-bold
         :size   :heading-1

src/status_im2/contexts/chat/home/chat_list_item/view.cljs

@@ -1,16 +1,16 @@
 (ns status-im2.contexts.chat.home.chat-list-item.view
-  (:require [quo2.core :as quo]
+  (:require [clojure.string :as string]
+            [quo2.components.icon :as icons]
+            [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
+            [status-im2.common.home.actions.view :as actions]
+            [status-im2.constants :as constants]
+            [status-im2.contexts.chat.home.chat-list-item.style :as style]
             [utils.datetime :as datetime]
             [utils.debounce :as debounce]
-            [status-im2.common.home.actions.view :as actions]
-            [status-im2.contexts.chat.home.chat-list-item.style :as style]
-            [utils.re-frame :as rf]
-            [status-im2.constants :as constants]
-            [clojure.string :as string]
             [utils.i18n :as i18n]
-            [quo2.components.icon :as icons]))
+            [utils.re-frame :as rf]))
 
 (def max-subheader-length 50)
 
@@ -201,17 +201,17 @@
   [{:keys [contact chat-id full-name color muted?]}]
   (if contact ; `contact` is passed when it's not a group chat
     (let [online?    (rf/sub [:visibility-status-updates/online? chat-id])
-          photo-path (rf/sub [:chats/photo-path chat-id])
-          image-key  (if (seq (:images contact)) :profile-picture :ring-background)]
+          photo-path (rf/sub [:chats/photo-path chat-id])]
       [quo/user-avatar
-       {:full-name full-name
-        :size      :small
-        :online?   online?
-        image-key  photo-path
-        :muted?    muted?}])
+       (cond-> {:full-name       full-name
+                :size            :small
+                :online?         online?
+                :profile-picture photo-path}
+         muted?
+         (assoc :ring? false))])
     [quo/group-avatar
      {:customization-color color
-      :size                :small}]))
+      :size                :size/s-32}]))
 
 (defn notification
   [{:keys [muted group-chat unviewed-messages-count unviewed-mentions-count]}]

src/status_im2/contexts/chat/home/view.cljs

@@ -1,6 +1,6 @@
 (ns status-im2.contexts.chat.home.view
   (:require [oops.core :as oops]
-            [quo2.theme :as theme]
+            [quo2.theme :as quo.theme]
             [re-frame.core :as re-frame]
             [react-native.core :as rn]
             [react-native.reanimated :as reanimated]
@@ -27,31 +27,32 @@
          (filter k)
          (sort-by :timestamp >))))
 
-(def empty-state-content
+(defn empty-state-content
+  [theme]
   #:tab{:contacts
         {:title       (i18n/label :t/no-contacts)
          :description (i18n/label :t/no-contacts-description)
          :image       (resources/get-image
-                       (theme/theme-value :no-contacts-light :no-contacts-dark))}
+                       (quo.theme/theme-value :no-contacts-light :no-contacts-dark theme))}
         :groups
         {:title       (i18n/label :t/no-group-chats)
          :description (i18n/label :t/no-group-chats-description)
          :image       (resources/get-image
-                       (theme/theme-value :no-group-chats-light :no-group-chats-dark))}
+                       (quo.theme/theme-value :no-group-chats-light :no-group-chats-dark theme))}
         :recent
         {:title       (i18n/label :t/no-messages)
          :description (i18n/label :t/no-messages-description)
          :image       (resources/get-image
-                       (theme/theme-value :no-messages-light :no-messages-dark))}})
+                       (quo.theme/theme-value :no-messages-light :no-messages-dark theme))}})
 
 (defn chats
-  [{:keys [selected-tab set-scroll-ref scroll-shared-value]}]
+  [{:keys [theme selected-tab set-scroll-ref scroll-shared-value]}]
   (let [unfiltered-items (rf/sub [:chats-stack-items])
         items            (filter-and-sort-items-by-tab selected-tab unfiltered-items)]
     (if (empty? items)
       [common.home/empty-state-image
        {:selected-tab selected-tab
-        :tab->content empty-state-content}]
+        :tab->content (empty-state-content theme)}]
       [reanimated/flat-list
        {:ref                               set-scroll-ref
         :key-fn                            #(or (:chat-id %) (:public-key %) (:id %))
@@ -81,12 +82,12 @@
      item]))
 
 (defn contacts
-  [{:keys [pending-contact-requests set-scroll-ref scroll-shared-value]}]
+  [{:keys [theme pending-contact-requests set-scroll-ref scroll-shared-value]}]
   (let [items (rf/sub [:contacts/active-sections])]
     (if (and (empty? items) (empty? pending-contact-requests))
       [common.home/empty-state-image
        {:selected-tab :tab/contacts
-        :tab->content empty-state-content}]
+        :tab->content (empty-state-content theme)}]
       [rn/section-list
        {:ref                               set-scroll-ref
         :key-fn                            :public-key
@@ -117,8 +118,8 @@
     :title       (i18n/label :t/invite-friends-to-status)
     :description (i18n/label :t/share-invite-link)}})
 
-(defn home
-  []
+(defn- f-view-internal
+  [{:keys [theme]}]
   (let [scroll-ref     (atom nil)
         set-scroll-ref #(reset! scroll-ref %)]
     (fn []
@@ -131,11 +132,13 @@
            [contacts
             {:pending-contact-requests pending-contact-requests
              :set-scroll-ref           set-scroll-ref
-             :scroll-shared-value      scroll-shared-value}]
+             :scroll-shared-value      scroll-shared-value
+             :theme                    theme}]
            [chats
             {:selected-tab        selected-tab
              :set-scroll-ref      set-scroll-ref
-             :scroll-shared-value scroll-shared-value}])
+             :scroll-shared-value scroll-shared-value
+             :theme               theme}])
          [:f> common.home.banner/animated-banner
           {:content             banner-data
            :customization-color customization-color
@@ -153,3 +156,9 @@
            :selected-tab        selected-tab
            :on-tab-change       (fn [tab] (rf/dispatch [:messages-home/select-tab tab]))
            :scroll-shared-value scroll-shared-value}]]))))
+
+(defn- internal-chats-home-view
+  [params]
+  [:f> f-view-internal params])
+
+(def view (quo.theme/with-theme internal-chats-home-view))

src/status_im2/contexts/chat/messages/avatar/view.cljs

@@ -1,21 +1,19 @@
 (ns status-im2.contexts.chat.messages.avatar.view
-  (:require [utils.re-frame :as rf]
+  (:require [quo2.core :as quo]
             [react-native.core :as rn]
-            [quo2.core :as quo]))
+            [utils.re-frame :as rf]))
 
 (defn avatar
   [public-key size]
   (let [display-name (first (rf/sub [:contacts/contact-two-names-by-identity public-key]))
-        contact      (rf/sub [:contacts/contact-by-address public-key])
-        photo-path   (when (seq (:images contact)) (rf/sub [:chats/photo-path public-key]))
+        photo-path   (rf/sub [:chats/photo-path public-key])
         online?      (rf/sub [:visibility-status-updates/online? public-key])]
     [rn/view {:style {:padding-top 2}}
      [rn/touchable-opacity
       {:active-opacity 1
        :on-press       #(rf/dispatch [:chat.ui/show-profile public-key])}
       [quo/user-avatar
-       {:full-name         display-name
-        :profile-picture   photo-path
-        :status-indicator? true
-        :online?           online?
-        :size              size}]]]))
+       {:full-name       display-name
+        :profile-picture photo-path
+        :online?         online?
+        :size            size}]]]))

src/status_im2/contexts/chat/messages/contact_requests/bottom_drawer.cljs

@@ -3,6 +3,7 @@
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]
     [quo2.core :as quo]
+    [status-im2.contexts.shell.jump-to.constants :as jump-to.constants]
     [quo2.components.drawers.permission-context.view :as permission-context]
     [status-im2.constants :as constants]
     [react-native.core :as rn]
@@ -37,13 +38,13 @@
          (= contact-request-state
             constants/contact-request-state-sent)
          (i18n/label :t/contact-request-chat-pending))]]
-     [rn/view {:position :absolute :top -36 :align-self :center}
-      [quo/floating-shell-button
-       {:jump-to
-        {:on-press            (fn []
-                                (when config/shell-navigation-disabled?
-                                  (rf/dispatch [:chat/close true]))
-                                (rf/dispatch [:shell/navigate-to-jump-to]))
-         :customization-color customization-color
-         :label               (i18n/label :t/jump-to)}}
-       {}]]]))
+     [quo/floating-shell-button
+      {:jump-to
+       {:on-press            (fn []
+                               (when config/shell-navigation-disabled?
+                                 (rf/dispatch [:chat/close true]))
+                               (rf/dispatch [:shell/navigate-to-jump-to]))
+        :customization-color customization-color
+        :label               (i18n/label :t/jump-to)}}
+      {:position :absolute
+       :top      (- jump-to.constants/floating-shell-button-height)}]]))

src/status_im2/contexts/chat/messages/content/deleted/view.cljs

@@ -28,9 +28,7 @@
    on-long-press-fn]
   (let [;; deleted message with nil deleted-by is deleted by (:from message)
         display-name (first (rf/sub [:contacts/contact-two-names-by-identity (or deleted-by from)]))
-        contact      (rf/sub [:contacts/contact-by-address (or deleted-by from)])
-        photo-path   (when-not (empty? (:images contact))
-                       (rf/sub [:chats/photo-path (or deleted-by from)]))]
+        photo-path   (rf/sub [:chats/photo-path (or deleted-by from)])]
     [quo/system-message
      {:type             :deleted
       :timestamp        timestamp-str

src/status_im2/contexts/chat/messages/content/style.cljs

@@ -13,3 +13,14 @@
 
      (and (not in-pinned-view?) (or mentioned pinned-by last-in-group?))
      (assoc :margin-top 8))))
+
+(defn user-message-content
+  [{:keys [first-in-group? outgoing outgoing-status]}]
+  {:border-radius      16
+   :padding-horizontal 8
+   :padding-vertical   (if first-in-group?
+                         8
+                         4)
+   :opacity            (if (and outgoing (= outgoing-status :sending))
+                         0.5
+                         1)})

src/status_im2/contexts/chat/messages/content/view.cljs

@@ -134,9 +134,10 @@
                                  :message-sending
                                  :message-sent)
           :underlay-color      (colors/theme-colors colors/neutral-5 colors/neutral-90)
-          :style               {:border-radius 16
-                                :padding       8
-                                :opacity       (if (and outgoing (= outgoing-status :sending)) 0.5 1)}
+          :style               (style/user-message-content
+                                {:first-in-group? (:first-in-group? message-data)
+                                 :outgoing        outgoing
+                                 :outgoing-status outgoing-status})
           :on-press            (fn []
                                  (if (and platform/ios? keyboard-shown?)
                                    (rn/dismiss-keyboard!)

src/status_im2/contexts/chat/messages/list/view.cljs

@@ -1,30 +1,30 @@
 (ns status-im2.contexts.chat.messages.list.view
   (:require [oops.core :as oops]
             [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
             [react-native.background-timer :as background-timer]
             [react-native.core :as rn]
             [react-native.hooks :as hooks]
             [react-native.platform :as platform]
+            [react-native.reanimated :as reanimated]
             [react-native.safe-area :as safe-area]
             [reagent.core :as reagent]
-            [quo2.foundations.colors :as colors]
-            [react-native.reanimated :as reanimated]
             [status-im.ui.screens.chat.group :as chat.group]
             [status-im.ui.screens.chat.message.gap :as message.gap]
             [status-im2.constants :as constants]
             [status-im2.contexts.chat.messages.content.view :as message]
             [status-im2.contexts.chat.messages.list.state :as state]
             [status-im2.contexts.chat.messages.list.style :as style]
-            [status-im2.contexts.chat.messages.navigation.style :as navigation.style]
+            [status-im2.contexts.shell.jump-to.constants :as jump-to.constants]
             [status-im2.contexts.chat.composer.constants :as composer.constants]
-            [utils.re-frame :as rf]
-            [utils.i18n :as i18n]))
+            [status-im2.contexts.chat.messages.navigation.style :as navigation.style]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
 
 (defonce ^:const threshold-percentage-to-show-floating-scroll-down-button 75)
 (defonce ^:const loading-indicator-extra-spacing 250)
 (defonce ^:const loading-indicator-page-loading-height 100)
 (defonce ^:const scroll-animation-input-range [50 125])
-(defonce ^:const spacing-between-composer-and-content 64)
 (defonce ^:const min-message-height 32)
 
 (defonce messages-list-ref (atom nil))
@@ -129,15 +129,14 @@
   [insets able-to-send-message?]
   [rn/view
    {:background-color (colors/theme-colors colors/white colors/neutral-95)
-    :margin-bottom    (- 0
-                         (:top insets)
-                         (when platform/ios? style/overscroll-cover-height))
+    :margin-bottom    (when platform/ios? (- style/overscroll-cover-height))
     :height           (+ (if able-to-send-message?
                            (+ composer.constants/composer-default-height
-                              spacing-between-composer-and-content
+                              jump-to.constants/floating-shell-button-height
                               (:bottom insets))
                            (- 70 (:bottom insets)))
-                         (when platform/ios? style/overscroll-cover-height))}])
+                         (when platform/ios?
+                           (- style/overscroll-cover-height (:top insets))))}])
 
 (defn f-list-footer-avatar
   [{:keys [scroll-y display-name online? profile-picture]}]
@@ -203,8 +202,7 @@
         online?              (rf/sub [:visibility-status-updates/online? chat-id])
         contact              (when-not group-chat
                                (rf/sub [:contacts/contact-by-address chat-id]))
-        photo-path           (when-not (empty? (:images contact))
-                               (rf/sub [:chats/photo-path chat-id]))
+        photo-path           (rf/sub [:chats/photo-path chat-id])
         border-animation     (reanimated/interpolate scroll-y
                                                      [30 125]
                                                      [14 0]

src/status_im2/contexts/chat/messages/navigation/view.cljs

@@ -5,15 +5,15 @@
             [re-frame.db]
             [react-native.blur :as blur]
             [react-native.core :as rn]
-            [status-im2.config :as config]
-            [react-native.reanimated :as reanimated]
             [react-native.platform :as platform]
+            [react-native.reanimated :as reanimated]
+            [status-im2.common.home.actions.view :as actions]
+            [status-im2.config :as config]
+            [status-im2.constants :as constants]
             [status-im2.contexts.chat.messages.navigation.style :as style]
             [status-im2.contexts.chat.messages.pin.banner.view :as pin.banner]
-            [status-im2.constants :as constants]
-            [utils.re-frame :as rf]
             [utils.i18n :as i18n]
-            [status-im2.common.home.actions.view :as actions]))
+            [utils.re-frame :as rf]))
 
 (defn f-view
   [{:keys [scroll-y]}]
@@ -27,10 +27,7 @@
                                    (first (rf/sub [:contacts/contact-two-names-by-identity chat-id]))
                                    (str emoji " " chat-name))
         online?                  (rf/sub [:visibility-status-updates/online? chat-id])
-        contact                  (when-not group-chat
-                                   (rf/sub [:contacts/contact-by-address chat-id]))
-        photo-path               (when-not (empty? (:images contact))
-                                   (rf/sub [:chats/photo-path chat-id]))
+        photo-path               (rf/sub [:chats/photo-path chat-id])
         opacity-animation        (reanimated/interpolate scroll-y
                                                          [style/navigation-bar-height
                                                           (+ style/navigation-bar-height 30)]

src/status_im2/contexts/communities/actions/request_to_join/view.cljs

@@ -67,7 +67,7 @@
               :on-press            (fn []
                                      (if can-join?
                                        (do
-                                         (rf/dispatch [:communities/join id])
+                                         (rf/dispatch [:communities/request-to-join id])
                                          (rf/dispatch [:navigate-back]))
                                        (do (and can-request-access?
                                                 (not pending?)

src/status_im2/contexts/communities/home/view.cljs

@@ -1,7 +1,7 @@
 (ns status-im2.contexts.communities.home.view
   (:require [oops.core :as oops]
             [quo2.core :as quo]
-            [quo2.theme :as theme]
+            [quo2.theme :as quo.theme]
             [react-native.core :as rn]
             [react-native.reanimated :as reanimated]
             [status-im2.common.home.banner.view :as common.home.banner]
@@ -37,7 +37,9 @@
    {:id :pending :label (i18n/label :t/pending) :accessibility-label :pending-tab}
    {:id :opened :label (i18n/label :t/opened) :accessibility-label :opened-tab}])
 
-(def empty-state-content
+
+(defn empty-state-content
+  [theme]
   {:joined
    {:title       (i18n/label :t/no-communities)
     :description [:<>
@@ -45,18 +47,21 @@
                    (i18n/label :t/no-communities-description-strikethrough)]
                   " "
                   (i18n/label :t/no-communities-description)]
-    :image       (resources/get-image (theme/theme-value :no-communities-light
-                                                         :no-communities-dark))}
+    :image       (resources/get-image (quo.theme/theme-value :no-communities-light
+                                                             :no-communities-dark
+                                                             theme))}
    :pending
    {:title       (i18n/label :t/no-pending-communities)
     :description (i18n/label :t/no-pending-communities-description)
-    :image       (resources/get-image (theme/theme-value :no-pending-communities-light
-                                                         :no-pending-communities-dark))}
+    :image       (resources/get-image (quo.theme/theme-value :no-pending-communities-light
+                                                             :no-pending-communities-dark
+                                                             theme))}
    :opened
    {:title       (i18n/label :t/no-opened-communities)
     :description (i18n/label :t/no-opened-communities-description)
-    :image       (resources/get-image (theme/theme-value :no-opened-communities-light
-                                                         :no-opened-communities-dark))}})
+    :image       (resources/get-image (quo.theme/theme-value :no-opened-communities-light
+                                                             :no-opened-communities-dark
+                                                             theme))}})
 
 (def ^:private banner-data
   {:title-props
@@ -70,8 +75,8 @@
     :banner              (resources/get-image :discover)
     :accessibility-label :communities-home-discover-card}})
 
-(defn home
-  []
+(defn- f-view-internal
+  [{:keys [theme]}]
   (let [flat-list-ref     (atom nil)
         set-flat-list-ref #(reset! flat-list-ref %)]
     (fn []
@@ -87,7 +92,7 @@
          (if (empty? selected-items)
            [common.home/empty-state-image
             {:selected-tab selected-tab
-             :tab->content empty-state-content}]
+             :tab->content (empty-state-content theme)}]
            [reanimated/flat-list
             {:ref                               set-flat-list-ref
              :key-fn                            :id
@@ -109,3 +114,9 @@
            :selected-tab        selected-tab
            :on-tab-change       (fn [tab] (rf/dispatch [:communities/select-tab tab]))
            :scroll-shared-value scroll-shared-value}]]))))
+
+(defn- internal-communities-home-view
+  [params]
+  [:f> f-view-internal params])
+
+(def view (quo.theme/with-theme internal-communities-home-view))

src/status_im2/contexts/communities/overview/view.cljs

@@ -256,7 +256,7 @@
   [description]
   [quo/text
    {:accessibility-label :community-description-text
-    :number-of-lines     2
+    :number-of-lines     4
     :ellipsize-mode      :tail
     :weight              :regular
     :size                :paragraph-1
@@ -367,4 +367,4 @@
                  :customization-color customization-color
                  :label               (i18n/label :t/jump-to)}}
       {:position :absolute
-       :bottom   41}]]))
+       :bottom   34}]]))

src/status_im2/contexts/contacts/drawers/nickname_drawer/view.cljs

@@ -1,8 +1,8 @@
 (ns status-im2.contexts.contacts.drawers.nickname-drawer.view
   (:require [clojure.string :as string]
-            [quo2.foundations.colors :as colors]
             [quo2.components.icon :as icons]
             [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [react-native.safe-area :as safe-area]
             [reagent.core :as reagent]
@@ -28,8 +28,7 @@
   [{:keys [contact]}]
   (let [{:keys [primary-name nickname public-key]} contact
         entered-nickname                           (reagent/atom (or nickname ""))
-        photo-path                                 (when-not (empty? (:images contact))
-                                                     (rf/sub [:chats/photo-path public-key]))
+        photo-path                                 (rf/sub [:chats/photo-path public-key])
         insets                                     (safe-area/get-insets)]
     (fn [{:keys [title description accessibility-label
                  close-button-text]}]
@@ -41,10 +40,10 @@
          :size   :heading-1} title]
        [rn/view {:style (style/context-container)}
         [quo/user-avatar
-         {:full-name        primary-name
-          :profile-picture  photo-path
-          :size             :xxs
-          :status-indicator false}]
+         {:full-name         primary-name
+          :profile-picture   photo-path
+          :size              :xxs
+          :status-indicator? false}]
         [quo/text
          {:weight :medium
           :size   :paragraph-2

src/status_im2/contexts/onboarding/common/background/view.cljs

@@ -4,6 +4,7 @@
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]
             [oops.core :refer [oget]]
+            [react-native.platform :as platform]
             [status-im2.common.resources :as resources]
             [status-im.async-storage.core :as async-storage]
             [status-im2.contexts.shell.jump-to.state :as shell.state]
@@ -88,10 +89,9 @@
      (when dark-overlay?
        [blur/view
         {:style         style/background-blur-overlay
-         :blur-amount   30
-         :blur-radius   25
+         :blur-amount   (if platform/android? 30 20)
+         :blur-radius   (if platform/android? 25 10)
          :blur-type     :transparent
          :overlay-color :transparent}])]))
 
 (defn view [dark-overlay?] [:f> f-view dark-overlay?])
-

src/status_im2/contexts/onboarding/common/overlay/view.cljs

@@ -3,6 +3,7 @@
             [react-native.blur :as blur]
             [react-native.core :as rn]
             [reagent.core :as reagent]
+            [react-native.platform :as platform]
             [status-im2.contexts.onboarding.common.overlay.style :as style]
             [status-im2.constants :as constants]))
 
@@ -61,7 +62,7 @@
       :style          (style/blur-container opacity)}
      [blur/view
       {:blur-amount   @blur-amount
-       :blur-radius   25
+       :blur-radius   (if platform/android? 25 10)
        :blur-type     :transparent
        :overlay-color :transparent
        :style         style/blur-style}]]))

src/status_im2/contexts/onboarding/create_profile/view.cljs

@@ -1,20 +1,20 @@
 (ns status-im2.contexts.onboarding.create-profile.view
-  (:require [quo2.core :as quo]
-            [clojure.string :as string]
+  (:require [clojure.string :as string]
+            [oops.core :as oops]
+            [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
-            [status-im2.contexts.onboarding.create-profile.style :as style]
-            [utils.i18n :as i18n]
+            [react-native.blur :as blur]
             [react-native.core :as rn]
+            [react-native.platform :as platform]
             [react-native.safe-area :as safe-area]
             [react-native.hooks :as hooks]
             [reagent.core :as reagent]
-            [status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
-            [status-im2.contexts.onboarding.select-photo.method-menu.view :as method-menu]
-            [utils.re-frame :as rf]
-            [oops.core :as oops]
-            [react-native.blur :as blur]
             [status-im2.constants :as c]
-            [react-native.platform :as platform]))
+            [status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
+            [status-im2.contexts.onboarding.create-profile.style :as style]
+            [status-im2.contexts.onboarding.select-photo.method-menu.view :as method-menu]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
 
 ;; NOTE - validation should match with Desktop
 ;; https://github.com/status-im/status-desktop/blob/2ba96803168461088346bf5030df750cb226df4c/ui/imports/utils/Constants.qml#L468
@@ -51,7 +51,7 @@
 
 
 (defn show-button-background
-  [keyboard-height keyboard-shown]
+  [keyboard-height keyboard-shown content-scroll-y]
   (let [button-container-height 64
         keyboard-view-height    (+ keyboard-height button-container-height)]
     (when keyboard-shown
@@ -60,7 +60,7 @@
         (< (- @scroll-view-height button-container-height) @content-container-height)
 
         platform/ios?
-        (< (- @scroll-view-height keyboard-view-height) @content-container-height)
+        (< (- @scroll-view-height keyboard-view-height) (- @content-container-height content-scroll-y))
 
         :else
         false))))
@@ -93,6 +93,7 @@
 (defn- f-page
   [{:keys [onboarding-profile-data navigation-bar-top]}]
   (reagent/with-let [show-keyboard?                          (reagent/atom false)
+                     content-scroll-y                        (reagent/atom 0)
                      show-listener                           (oops/ocall rn/keyboard
                                                                          "addListener"
                                                                          (if platform/android?
@@ -129,7 +130,8 @@
                                                          :else           :success)
           {:keys [keyboard-shown keyboard-height]} (hooks/use-keyboard)
           show-background?                         (show-button-background keyboard-height
-                                                                           keyboard-shown)]
+                                                                           keyboard-shown
+                                                                           @content-scroll-y)]
       [rn/view {:style style/page-container}
        [navigation-bar/navigation-bar
         {:stack-id :new-to-status
@@ -137,7 +139,12 @@
        [rn/scroll-view
         {:on-layout               (fn [event]
                                     (let [height (oops/oget event "nativeEvent.layout.height")]
-                                      (reset! scroll-view-height height)))
+                                      (reset! scroll-view-height height)
+                                      (reset! content-scroll-y 0)))
+         :on-scroll               (fn [event]
+                                    (let [y (oops/oget event "nativeEvent.contentOffset.y")]
+                                      (reset! content-scroll-y y)))
+         :scroll-event-throttle   64
          :content-container-style {:flexGrow 1}}
         [rn/view
          {:on-layout (fn [event]
@@ -162,9 +169,12 @@
                                       [:show-bottom-sheet
                                        {:content
                                         (fn []
-                                          [method-menu/view on-change-profile-pic])
-                                        :theme :dark}]))
-              :image-picker-props  {:profile-picture     (when @profile-pic {:uri @profile-pic})
+                                          [method-menu/view on-change-profile-pic])}]))
+              :image-picker-props  {:profile-picture     (or
+                                                          @profile-pic
+                                                          (rf/sub
+                                                           [:profile/onboarding-placeholder-avatar
+                                                            @profile-pic]))
                                     :full-name           (if (seq @full-name)
                                                            @full-name
                                                            (i18n/label :t/your-name))

src/status_im2/contexts/onboarding/generating_keys/view.cljs

@@ -125,7 +125,8 @@
      :container-style   {:top  40
                          :left 20}
      :layers            (:generate-keys resources/parallax-video)
-     :disable-parallax? true}]
+     :disable-parallax? true
+     :enable-looping?   false}]
    [:f> f-page-title insets]])
 
 (defn f-simple-page

src/status_im2/contexts/onboarding/identifiers/profile_card/style.cljs

@@ -1,7 +1,7 @@
 (ns status-im2.contexts.onboarding.identifiers.profile-card.style
   (:require [quo2.foundations.colors :as colors]
-            [react-native.reanimated :as reanimated]
-            [quo2.foundations.typography :as typography]))
+            [quo2.foundations.typography :as typography]
+            [react-native.reanimated :as reanimated]))
 
 (def card-view
   {:margin-horizontal 20
@@ -36,7 +36,7 @@
     :background-color :transparent
     :height           48
     :border-color     :black
-    :border-width     2
+    :border-width     3
     :border-radius    44}))
 
 (def picture-avatar-mask

src/status_im2/contexts/onboarding/identifiers/profile_card/view.cljs

@@ -1,12 +1,12 @@
 (ns status-im2.contexts.onboarding.identifiers.profile-card.view
-  (:require [react-native.core :as rn]
-            [react-native.reanimated :as reanimated]
-            [react-native.masked-view :as masked-view]
-            [reagent.core :as reagent]
-            [quo2.core :as quo]
+  (:require [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
-            [utils.worklets.identifiers-highlighting :as worklets.identifiers-highlighting]
-            [status-im2.contexts.onboarding.identifiers.profile-card.style :as style]))
+            [react-native.core :as rn]
+            [react-native.masked-view :as masked-view]
+            [react-native.reanimated :as reanimated]
+            [reagent.core :as reagent]
+            [status-im2.contexts.onboarding.identifiers.profile-card.style :as style]
+            [utils.worklets.identifiers-highlighting :as worklets.identifiers-highlighting]))
 
 (defn- f-profile-card-component
   [{:keys [profile-picture name hash emoji-hash
@@ -20,29 +20,24 @@
         ring-opacity         (worklets.identifiers-highlighting/ring-opacity @progress)
         user-hash-color      (worklets.identifiers-highlighting/user-hash-color @progress)
         user-hash-opacity    (worklets.identifiers-highlighting/user-hash-opacity @progress)
-        emoji-hash-style     (worklets.identifiers-highlighting/emoji-hash-style @progress)]
+        emoji-hash-style     (worklets.identifiers-highlighting/emoji-hash-style @progress)
+        avatar               [quo/user-avatar
+                              {:full-name           name
+                               :profile-picture     profile-picture
+                               :size                :medium
+                               :status-indicator?   false
+                               :customization-color customization-color}]]
     [rn/view
      {:style style/card-view}
      [reanimated/view
       {:style (style/card-container container-background)}
       [rn/view {:style style/card-header}
-       [reanimated/view
-        {:style (style/avatar avatar-opacity)}
-        [quo/user-avatar
-         {:full-name           name
-          :profile-picture     profile-picture
-          :size                :medium
-          :status-indicator?   false
-          :customization-color customization-color}]]
+       [reanimated/view {:style (style/avatar avatar-opacity)} avatar]
        [masked-view/masked-view
         {:style        {:position :absolute}
          :mask-element (reagent/as-element
                         [reanimated/view {:style (style/mask-view ring-opacity)}])}
-        (when profile-picture
-          [rn/image
-           {:accessibility-label :ring-background
-            :style               style/picture-avatar-mask
-            :source              profile-picture}])]]
+        (when profile-picture avatar)]]
       [reanimated/view
        {:style (style/user-name-container opacity)}
        [quo/text

src/status_im2/contexts/profile/profiles/view.cljs

@@ -111,7 +111,7 @@
       :customization-color  (or customization-color :primary)
       :keycard-account?     keycard-pairing
       :show-options-button? true
-      :profile-picture      (when profile-picture {:uri profile-picture})
+      :profile-picture      profile-picture
       :card-style           (style/profiles-profile-card last-item?)
       :on-options-press     #(show-profile-options
                               key-uid
@@ -257,7 +257,7 @@
       [quo/profile-card
        {:name                name
         :customization-color (or customization-color :primary)
-        :profile-picture     (when profile-picture {:uri profile-picture})
+        :profile-picture     profile-picture
         :card-style          style/login-profile-card}]
       [quo/input
        {:type              :password

src/status_im2/contexts/profile/rpc.cljs

@@ -1,9 +1,11 @@
 (ns status-im2.contexts.profile.rpc
-  (:require [clojure.string :as string]))
+  (:require [clojure.string :as string]
+            [status-im.ethereum.ens :as ens]))
 
 (defn rpc->profiles-overview
   [{:keys [customizationColor keycard-pairing] :as profile}]
   (-> profile
       (dissoc :customizationColor)
       (assoc :customization-color (keyword customizationColor))
+      (assoc :ens-name? (ens/is-valid-eth-name? (:name profile)))
       (assoc :keycard-pairing (when-not (string/blank? keycard-pairing) keycard-pairing))))

src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs

@@ -10,28 +10,28 @@
   [{:label   "Size"
     :key     :size
     :type    :select
-    :options [{:key   :x-small
-               :value "x-small"}
-              {:key   :small
-               :value "Small"}
-              {:key   :medium
-               :value "Medium"}
-              {:key   :large
-               :value "Large"}
-              {:key   :x-large
-               :value "x-Large"}]}
+    :options [{:key   :size/s-20
+               :value "20"}
+              {:key   :size/s-28
+               :value "28"}
+              {:key   :size/s-32
+               :value "32"}
+              {:key   :size/s-48
+               :value "48"}
+              {:key   :size/s-80
+               :value "80"}]}
    {:label "Avatar"
     :key   :picture?
     :type  :boolean}
    (preview/customization-color-option)])
 
-(def avatar (resources/get-mock-image :user-picture-male4))
+(def avatar (resources/get-mock-image :photo1))
 
 (defn cool-preview
   []
   (let [state (reagent/atom {:theme               :light
                              :customization-color :blue
-                             :size                :small
+                             :size                :size/s-20
                              :picture?            false})]
     (fn []
       [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}

src/status_im2/contexts/quo_preview/avatars/user_avatar.cljs

@@ -67,12 +67,7 @@
          {:padding-vertical 60
           :flex-direction   :row
           :justify-content  :center}
-         (let [{:keys [profile-picture ring?]} @state
-               ring-bg                         (resources/get-mock-image :ring)
-               params                          (cond-> @state
-                                                 (and (not profile-picture) ring?)
-                                                 (assoc :ring-background ring-bg))]
-           [quo2/user-avatar params])]]])))
+         [quo2/user-avatar @state]]]])))
 
 (defn preview-user-avatar
   []

src/status_im2/contexts/quo_preview/buttons/wallet_button.cljs

@@ -0,0 +1,35 @@
+(ns status-im2.contexts.quo-preview.buttons.wallet-button
+  (:require
+    [quo2.core :as quo]
+    [quo2.foundations.colors :as colors]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]
+    [status-im2.contexts.quo-preview.preview :as preview]))
+
+(def descriptor
+  [{:label "Disabled?:"
+    :key   :disabled?
+    :type  :boolean}])
+
+(defn cool-preview
+  []
+  (let [state (reagent/atom {:icon          :i/placeholder
+                             :on-press      #(js/alert "pressed")
+                             :on-long-press #(js/alert "long pressed")})]
+    (fn []
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:flex 1 :padding-bottom 20}
+        [rn/view {:height 200}
+         [preview/customizer state descriptor]]
+        [rn/view
+         {:flex            1
+          :align-items     :center
+          :justify-content :center}
+         [quo/wallet-button @state]]]])))
+
+(defn preview
+  []
+  [rn/view
+   {:background-color (colors/theme-colors colors/white colors/neutral-95)
+    :flex             1}
+   [cool-preview]])

src/status_im2/contexts/quo_preview/buttons/wallet_ctas.cljs

@@ -0,0 +1,30 @@
+(ns status-im2.contexts.quo-preview.buttons.wallet-ctas
+  (:require
+    [quo2.core :as quo]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]))
+
+(defn cool-preview
+  []
+  (let [state (reagent/atom {:buy-action     #(js/alert "Buy button pressed")
+                             :send-action    #(js/alert "Send button pressed")
+                             :receive-action #(js/alert "Receive button pressed")
+                             :bridge-action  #(js/alert "Bridge button pressed")})]
+    (fn []
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:style {:padding-bottom 150}}
+        [rn/view
+         {:style {:padding-vertical 60
+                  :flex-direction   :row
+                  :justify-content  :center}}
+         [quo/wallet-ctas @state]]]])))
+
+(defn preview
+  []
+  [rn/view
+   {:style {:flex 1}}
+   [rn/flat-list
+    {:flex                         1
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])

src/status_im2/contexts/quo_preview/colors/color_picker.cljs

@@ -1,48 +1,26 @@
 (ns status-im2.contexts.quo-preview.colors.color-picker
   (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
-            [react-native.blur :as blur]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Color:"
-    :key     :color
+  [{:key     :selected
     :type    :select
     :options (map (fn [color]
                     (let [k (get color :name)]
                       {:key k :value k}))
                   (quo/picker-colors))}
-   {:label "Blur?"
-    :key   :blur
-    :type  :boolean}])
+   {:key  :blur?
+    :type :boolean}])
 
-(defn cool-preview
+(defn view
   []
-  (let [state (reagent/atom {:color "orange" :blur false})
-        blur  (reagent/cursor state [:blur])
-        color (reagent/cursor state [:color])]
+  (let [state (reagent/atom {:selected :orange
+                             :blur?    false})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [preview/customizer state descriptor]
-        [(if @blur blur/view :<>)
-         [rn/view {:padding-vertical 60 :align-items :center}
-          [quo/color-picker
-           {:blur?     @blur
-            :selected  @color
-            :on-change #(reset! color %)}]]]]])))
-
-(defn preview-color-picker
-  []
-  [rn/view
-   {:background-color (colors/theme-colors
-                       colors/white
-                       colors/neutral-95)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container
+       {:state                 state
+        :descriptor            descriptor
+        :blur?                 (:blur? @state)
+        :show-blur-background? true}
+       [quo/color-picker (assoc @state :on-change #(swap! state assoc :selected %))]])))

src/status_im2/contexts/quo_preview/dividers/divider_label.cljs

@@ -1,54 +1,29 @@
 (ns status-im2.contexts.quo-preview.dividers.divider-label
-  (:require [quo2.components.dividers.divider-label :as divider-label]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
+  (:require [quo2.core :as quo]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Label:"
-    :key   :label
-    :type  :text}
-   {:label   "Chevron position:"
-    :key     :chevron-position
+  [{:type :text :key :label}
+   {:type :text :key :counter-value}
+   {:type :boolean :key :increase-padding-top?}
+   {:type :boolean :key :blur?}
+   {:key     :chevron-position
     :type    :select
-    :options [{:key   :left
-               :value "Left"}
-              {:key   :right
-               :value "Right"}]}
-   {:label "Counter value:"
-    :key   :counter-value
-    :type  :text}
-   {:label "Increase padding top:"
-    :key   :increase-padding-top?
-    :type  :boolean}
-   {:label "Blur:"
-    :key   :blur?
-    :type  :boolean}])
+    :options [{:key :left}
+              {:key :right}]}])
 
-(defn cool-preview
+(defn view
   []
-  (let [state (reagent/atom {:label                 "Welcome"
+  (let [state (reagent/atom {:blur?                 false
                              :chevron-position      :left
-                             :counter-value         0
+                             :counter-value         "0"
                              :increase-padding-top? true
-                             :blur?                 false})]
+                             :label                 "Welcome"})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [preview/customizer state descriptor]
-        [rn/view {:padding-vertical 60}
-         [divider-label/divider-label @state]]]])))
-
-(defn preview-divider-label
-  []
-  [rn/view
-   {:background-color (colors/theme-colors
-                       colors/white
-                       colors/neutral-90)
-    :flex             1}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container
+       {:state                 state
+        :descriptor            descriptor
+        :blur?                 (:blur? @state)
+        :show-blur-background? true}
+       [quo/divider-label @state]])))

src/status_im2/contexts/quo_preview/gradient/gradient_cover.cljs

@@ -1,21 +1,44 @@
 (ns status-im2.contexts.quo-preview.gradient.gradient-cover
-  (:require [quo2.components.colors.color-picker.view :as color-picker]
-            [quo2.components.gradient.gradient-cover.view :as gradient-cover]
+  (:require [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
             [quo2.theme :as quo.theme]
             [react-native.blur :as blur]
             [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.common.resources :as resources]
-            [status-im2.contexts.quo-preview.preview :as preview]))
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [utils.re-frame :as rf]))
+
+(defn render-action-sheet
+  []
+  [:<>
+   [rn/view {:style {:align-items :center}}
+    [quo/summary-info
+     {:type          :status-account
+      :networks?     false
+      :account-props {:customization-color :purple
+                      :size                32
+                      :emoji               "🍑"
+                      :type                :default
+                      :name                "Collectibles vault"
+                      :address             "0x0ah...78b"}}]]
+   [quo/action-drawer
+    [[{:icon     :i/edit
+       :label    "Edit account"
+       :on-press #(js/alert "Edit account")}
+      {:icon     :i/copy
+       :label    "Copy address"
+       :on-press #(js/alert "Copy address")}
+      {:icon     :i/share
+       :label    "Share account"
+       :on-press #(js/alert "Share account")}
+      {:icon     :i/delete
+       :label    "Remove account"
+       :danger?  true
+       :on-press #(js/alert "Remove account")}]]]])
 
 (def descriptor
-  [{:label   "Customization color:"
-    :key     :customization-color
-    :type    :select
-    :options (mapv (fn [color]
-                     {:key color :value color})
-                   color-picker/color-list)}
+  [(preview/customization-color-option)
    {:label "Blur (dark only)?"
     :key   :blur?
     :type  :boolean}])
@@ -51,14 +74,21 @@
                        :bottom           0
                        :padding-vertical 40}
            :blur-type :dark}
-          [gradient-cover/view @state]]]
+          [quo/gradient-cover @state]]]
         [rn/view
          {:style {:padding-vertical   20
                   :padding-horizontal 16}}
-         [color-picker/view
+         [quo/color-picker
           {:blur?     @blur?
            :selected  @customization-color
-           :on-change #(reset! customization-color %)}]]])]))
+           :on-change #(reset! customization-color %)}]]
+        [quo/button
+         {:container-style {:margin-horizontal 40}
+          :on-press        #(rf/dispatch [:show-bottom-sheet
+                                          {:content             (fn [] [render-action-sheet])
+                                           :gradient-cover?     true
+                                           :customization-color @customization-color}])}
+         "See in bottom sheet"]])]))
 
 (defn preview-gradient-cover
   []

src/status_im2/contexts/quo_preview/links/link_preview.cljs

@@ -1,100 +1,56 @@
 (ns status-im2.contexts.quo-preview.links.link-preview
-  (:require [clojure.string :as string]
-            [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
+  (:require [quo2.core :as quo]
             [reagent.core :as reagent]
             [status-im2.common.resources :as resources]
-            [status-im2.contexts.quo-preview.preview :as preview]
-            utils.number))
+            [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Title"
-    :key   :title
-    :type  :text}
-   {:label "Description"
-    :key   :description
-    :type  :text}
-   {:label "Link"
-    :key   :link
-    :type  :text}
-   {:label "Container width"
-    :key   :width
-    :type  :text}
-   {:label "With logo?"
-    :key   :with-logo?
-    :type  :boolean}
-   {:label "With description?"
-    :key   :with-description?
-    :type  :boolean}
-   {:label "With thumbnail?"
-    :key   :with-thumbnail?
-    :type  :boolean}
-   {:label "Disabled text"
-    :key   :disabled-text
-    :type  :text}
-   {:label "Enabled?"
-    :key   :enabled?
-    :type  :boolean}
-   {:label   "Thumbnail"
-    :key     :thumbnail
+  [{:type :text :key :title}
+   {:type :text :key :description}
+   {:type :text :key :link}
+   {:type :number :key :width}
+   {:type :boolean :key :with-logo?}
+   {:type :boolean :key :with-description?}
+   {:type :boolean :key :with-thumbnail?}
+   {:type :text :key :disabled-text}
+   {:type :boolean :key :enabled?}
+   {:key     :thumbnail
     :type    :select
-    :options (mapv (fn [k]
-                     {:key   k
-                      :value (string/capitalize (name k))})
+    :options (mapv (fn [k] {:key k})
                    (keys resources/mock-images))}
-   {:label   "Thumbnail size"
-    :key     :thumbnail-size
+   {:key     :thumbnail-size
     :type    :select
-    :options [{:key   :normal
-               :value :normal}
-              {:key   :large
-               :value :large}]}])
+    :options [{:key :normal}
+              {:key :large}]}])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom
-               {:title             "Rarible - NFT Marketplace"
-                :description       "Turn your products or services into publicly tradeable items"
+               {:description       "Turn your products or services into publicly tradeable items"
+                :disabled-text     "Enable Preview"
+                :enabled?          true
                 :link              "rarible.com"
                 :thumbnail         :collectible
-                :width             "295"
-                :with-logo?        true
-                :with-thumbnail?   true
-                :with-description? true
-                :enabled?          true
                 :thumbnail-size    :normal
-                :disabled-text     "Enable Preview"})]
+                :title             "Rarible - NFT Marketplace"
+                :width             295
+                :with-description? true
+                :with-logo?        true
+                :with-thumbnail?   true})]
     (fn []
-      (let [width     (utils.number/parse-int (:width @state) 295)
-            thumbnail (get resources/mock-images (:thumbnail @state))]
-        [rn/view {:style {:margin-bottom 20}}
-         [preview/customizer state descriptor]
-         [rn/view
-          {:style {:align-items :center
-                   :margin-top  20}}
-          [quo/link-preview
-           {:logo            (when (:with-logo? @state)
-                               (resources/get-mock-image :status-logo))
-            :title           (:title @state)
-            :description     (when (:with-description? @state)
-                               (:description @state))
-            :enabled?        (:enabled? @state)
-            :on-enable       #(js/alert "Button pressed")
-            :disabled-text   (:disabled-text @state)
-            :link            (:link @state)
-            :thumbnail       (when (:with-thumbnail? @state)
-                               thumbnail)
-            :thumbnail-size  (:thumbnail-size @state)
-            :container-style {:width width}}]]]))))
-
-(defn preview
-  []
-  [rn/view
-   {:style {:background-color (colors/theme-colors colors/neutral-5 colors/neutral-95)
-            :flex             1}}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      (let [thumbnail (get resources/mock-images (:thumbnail @state))]
+        [preview/preview-container {:state state :descriptor descriptor}
+         [quo/link-preview
+          {:logo            (when (:with-logo? @state)
+                              (resources/get-mock-image :status-logo))
+           :title           (:title @state)
+           :description     (when (:with-description? @state)
+                              (:description @state))
+           :enabled?        (:enabled? @state)
+           :on-enable       #(js/alert "Button pressed")
+           :disabled-text   (:disabled-text @state)
+           :link            (:link @state)
+           :thumbnail       (when (:with-thumbnail? @state)
+                              thumbnail)
+           :thumbnail-size  (:thumbnail-size @state)
+           :container-style {:width (:width @state)}}]]))))

src/status_im2/contexts/quo_preview/links/url_preview.cljs

@@ -1,30 +1,18 @@
 (ns status-im2.contexts.quo-preview.links.url-preview
   (:require
     [quo2.core :as quo]
-    [quo2.foundations.colors :as colors]
-    [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im2.common.resources :as resources]
     [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Title"
-    :key   :title
-    :type  :text}
-   {:label "Body"
-    :key   :body
-    :type  :text}
-   {:label "With logo?"
-    :key   :with-logo?
-    :type  :boolean}
-   {:label "Loading?"
-    :key   :loading?
-    :type  :boolean}
-   {:label "Loading message"
-    :key   :loading-message
-    :type  :text}])
+  [{:type :text :key :title}
+   {:type :text :key :body}
+   {:type :boolean :key :with-logo?}
+   {:type :boolean :key :loading?}
+   {:type :text :key :loading-message}])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom
                {:title           "Status - Private, Secure Communication"
@@ -33,29 +21,12 @@
                 :loading?        false
                 :loading-message "Generating preview"})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:style {:padding-bottom 150}}
-        [preview/customizer state descriptor]
-        [rn/view
-         {:style {:align-items        :center
-                  :padding-horizontal 16
-                  :margin-top         50}}
-         [quo/url-preview
-          {:title           (:title @state)
-           :body            (:body @state)
-           :logo            (when (:with-logo? @state)
-                              (resources/get-mock-image :status-logo))
-           :loading?        (:loading? @state)
-           :loading-message (:loading-message @state)
-           :on-clear        #(js/alert "Clear button pressed")}]]]])))
-
-(defn preview
-  []
-  [rn/view
-   {:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
-            :flex             1}}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/url-preview
+        {:title           (:title @state)
+         :body            (:body @state)
+         :logo            (when (:with-logo? @state)
+                            (resources/get-mock-image :status-logo))
+         :loading?        (:loading? @state)
+         :loading-message (:loading-message @state)
+         :on-clear        #(js/alert "Clear button pressed")}]])))

src/status_im2/contexts/quo_preview/links/url_preview_list.cljs

@@ -1,50 +1,34 @@
 (ns status-im2.contexts.quo-preview.links.url-preview-list
   (:require
     [quo2.core :as quo]
-    [quo2.foundations.colors :as colors]
     [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im2.common.resources :as resources]
-    [status-im2.contexts.quo-preview.preview :as preview]
-    utils.number))
+    [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label "Number of previews"
-    :key   :previews-length
-    :type  :text}])
+  [{:type :number :key :previews-length}])
 
-(defn cool-preview
+(defn view
   []
-  (let [state (reagent/atom {:previews-length "3"})]
+  (let [state   (reagent/atom {:previews-length 3})
+        padding 20]
     (fn []
-      (let [previews-length (min 6 (utils.number/parse-int (:previews-length @state)))
-            padding         20]
-        [rn/view {:style {:padding-bottom 150}}
-         [preview/customizer state descriptor]
-         [rn/view
-          {:style {:align-items :center
-                   :margin-top  50}}
-          [quo/url-preview-list
-           {:horizontal-spacing padding
-            :preview-width      (- (:width (rn/get-window))
-                                   (* 2 padding))
-            :on-clear           #(js/alert "Clear button pressed")
-            :key-fn             :url
-            :data               (for [index (range previews-length)
-                                      :let  [index (inc index)]]
-                                  {:title    (str "Title " index)
-                                   :body     (str "status.im." index)
-                                   :logo     (resources/get-mock-image :status-logo)
-                                   :loading? false
-                                   :url      (str "status.im." index)})}]]]))))
-
-(defn preview
-  []
-  [rn/view
-   {:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
-            :flex             1}}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container
+       {:state                     state
+        :descriptor                descriptor
+        :component-container-style {:padding-horizontal 0}}
+       [quo/url-preview-list
+        {:horizontal-spacing padding
+         :preview-width      (- (:width (rn/get-window))
+                                (* 2 padding))
+         :on-clear           #(js/alert "Clear button pressed")
+         :key-fn             :url
+         :data               (for [index (range (:previews-length @state))
+                                   :let  [index (inc index)]]
+                               {:title    (str "Title " index)
+                                :body     (str "status.im." index)
+                                :logo     (resources/get-mock-image
+                                           :status-logo)
+                                :loading? false
+                                :url      (str "status.im." index)})}]])))

src/status_im2/contexts/quo_preview/list_items/community_list.cljs

@@ -2,39 +2,33 @@
   (:require [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
             [quo2.theme :as quo.theme]
-            [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.common.resources :as resources]
             [status-im2.contexts.quo-preview.community.data :as data]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor-type
-  {:label   "Type:"
+  {:type    :select
    :key     :type
-   :type    :select
-   :options [{:key :discover :value "Discover"}
-             {:key :engage :value "Engage"}
-             {:key :share :value "Share"}]})
+   :options [{:key :discover}
+             {:key :engage}
+             {:key :share}]})
 
 (def descriptor-locked
-  {:label "Locked?" :key :locked? :type :boolean})
+  {:type :boolean :key :locked?})
 
 (def descriptor-unread-count
-  {:label "Unread count:" :key :unread-count :type :number})
+  {:type :number :key :unread-count})
 
 (def descriptor-title
-  {:label "Title:" :key :title :type :text})
+  {:type :text :key :title})
 
 (def descriptor-blur
-  {:label "Blur?" :key :blur? :type :boolean})
+  {:type :boolean :key :blur?})
 
 (def descriptor-member-stats
-  [{:label "Total member count:"
-    :key   :members-count
-    :type  :number}
-   {:label "Active member count:"
-    :key   :active-count
-    :type  :number}])
+  [{:type :number :key :members-count}
+   {:type :number :key :active-count}])
 
 (def descriptors-base
   [descriptor-type
@@ -43,29 +37,27 @@
 
 (def descriptors-type-discover
   (conj descriptors-base
-        {:label   "Info:"
+        {:type    :select
          :key     :info
-         :type    :select
-         :options [{:key :token-gated :value "Token gated"}
-                   {:key :default :value "Default"}]}
+         :options [{:key :token-gated}
+                   {:key :default}]}
         {:label "Member stats?"
-         :key   :members?
-         :type  :boolean}))
+         :type  :boolean
+         :key   :members?}))
 
 (def descriptors-type-engage
   (conj descriptors-base
-        {:label   "Info:"
+        {:type    :select
          :key     :info
-         :type    :select
-         :options [{:key :notification :value "Notification"}
-                   {:key :mention :value "Mention"}
-                   {:key :muted :value "Muted"}
-                   {:key :token-gated :value "Token gated"}
-                   {:key :navigation :value "Navigation"}
-                   {:key :default :value "Default"}]}))
+         :options [{:key :notification}
+                   {:key :mention}
+                   {:key :muted}
+                   {:key :token-gated}
+                   {:key :navigation}
+                   {:key :default}]}))
 
 (def descriptors-type-share
-  (conj descriptors-base {:label "Subtitle:" :key :subtitle :type :text}))
+  (conj descriptors-base {:type :text :key :subtitle}))
 
 (defn descriptors
   [{:keys [members? info] :as state}]
@@ -88,7 +80,7 @@
       (into [descriptor-blur] descs)
       descs)))
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:blur?               false
                              :customization-color :blue
@@ -103,30 +95,16 @@
                              :unread-count        5})]
     (fn []
       (let [customization-color (colors/custom-color-by-theme (:customization-color @state) 50 60)]
-        [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-         [rn/view {:style {:margin-bottom 20}}
-          [preview/customizer state (descriptors @state)]
-          [rn/view {:style {:margin-vertical 30 :align-items :center}}
-           [quo/community-list-item
-            (merge @state
-                   {:container-style     {:width 335}
-                    :logo                (resources/get-mock-image :status-logo)
-                    :tokens              (:tokens data/community)
-                    :customization-color customization-color
-                    :on-press            #(js/alert "List item pressed")
-                    :on-long-press       #(js/alert "Long pressed item")
-                    :on-press-info       #(js/alert "Info pressed")
-                    :members             (when (:members? @state)
-                                           {:members-count (:members-count @state)
-                                            :active-count  (:active-count @state)})})]]]]))))
-
-(defn preview
-  []
-  [rn/view
-   {:style {:background-color (colors/theme-colors colors/neutral-5 colors/neutral-95)
-            :flex             1}}
-   [rn/flat-list
-    {:style                        {:flex 1}
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+        [preview/preview-container {:state state :descriptor (descriptors @state)}
+         [quo/community-list-item
+          (merge @state
+                 {:container-style     {:width 335}
+                  :logo                (resources/get-mock-image :status-logo)
+                  :tokens              (:tokens data/community)
+                  :customization-color customization-color
+                  :on-press            #(js/alert "List item pressed")
+                  :on-long-press       #(js/alert "Long pressed item")
+                  :on-press-info       #(js/alert "Info pressed")
+                  :members             (when (:members? @state)
+                                         {:members-count (:members-count @state)
+                                          :active-count  (:active-count @state)})})]]))))

src/status_im2/contexts/quo_preview/main.cljs

@@ -2,9 +2,9 @@
   (:refer-clojure :exclude [filter])
   (:require
     [quo2.core :as quo]
-    [quo2.foundations.colors :as colors]
     [reagent.core :as reagent]
     [react-native.core :as rn]
+    [status-im2.contexts.quo-preview.style :as style]
     [status-im2.common.theme.core :as theme]
     [status-im2.contexts.quo-preview.animated-header-list.animated-header-list :as animated-header-list]
     [status-im2.contexts.quo-preview.avatars.account-avatar :as account-avatar]
@@ -20,6 +20,8 @@
     [status-im2.contexts.quo-preview.buttons.slide-button :as slide-button]
     [status-im2.contexts.quo-preview.buttons.dynamic-button :as dynamic-button]
     [status-im2.contexts.quo-preview.buttons.predictive-keyboard :as predictive-keyboard]
+    [status-im2.contexts.quo-preview.buttons.wallet-button :as wallet-button]
+    [status-im2.contexts.quo-preview.buttons.wallet-ctas :as wallet-ctas]
     [status-im2.contexts.quo-preview.calendar.calendar :as calendar]
     [status-im2.contexts.quo-preview.calendar.calendar-day :as calendar-day]
     [status-im2.contexts.quo-preview.calendar.calendar-year :as calendar-year]
@@ -110,8 +112,10 @@
     [status-im2.contexts.quo-preview.gradient.gradient-cover :as gradient-cover]
     [status-im2.contexts.quo-preview.wallet.account-overview :as account-overview]
     [status-im2.contexts.quo-preview.wallet.account-card :as account-card]
+    [status-im2.contexts.quo-preview.wallet.keypair :as keypair]
     [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
     [status-im2.contexts.quo-preview.wallet.network-bridge :as network-bridge]
+    [status-im2.contexts.quo-preview.wallet.network-link :as network-link]
     [status-im2.contexts.quo-preview.wallet.progress-bar :as progress-bar]
     [status-im2.contexts.quo-preview.wallet.summary-info :as summary-info]
     [status-im2.contexts.quo-preview.wallet.token-input :as token-input]
@@ -120,344 +124,242 @@
 
 (def screens-categories
   {:foundations       [{:name      :shadows
-                        :options   {:topBar {:visible true}}
                         :component shadows/preview-shadows}]
    :animated-list     [{:name      :animated-header-list
-                        :options   {:topBar {:visible false}}
                         :component animated-header-list/mock-screen}]
    :avatar            [{:name      :group-avatar
-                        :options   {:topBar {:visible true}}
                         :component group-avatar/preview-group-avatar}
                        {:name      :icon-avatar
-                        :options   {:topBar {:visible true}}
                         :component icon-avatar/preview-icon-avatar}
                        {:name      :user-avatar
-                        :options   {:topBar {:visible true}}
                         :component user-avatar/preview-user-avatar}
                        {:name      :wallet-user-avatar
-                        :options   {:topBar {:visible true}}
                         :component wallet-user-avatar/preview-wallet-user-avatar}
                        {:name      :channel-avatar
-                        :options   {:topBar {:visible true}}
                         :component channel-avatar/preview-channel-avatar}
                        {:name      :account-avatar
-                        :options   {:topBar {:visible true}}
                         :component account-avatar/preview-account-avatar}]
    :banner            [{:name      :banner
-                        :options   {:topBar {:visible true}}
                         :component banner/preview-banner}]
    :buttons           [{:name      :button
-                        :options   {:topBar {:visible true}}
                         :component button/preview-button}
                        {:name      :composer-button
-                        :options   {:topBar {:visible true}}
                         :component composer-button/preview-composer-button}
                        {:name      :dynamic-button
-                        :options   {:topBar {:visible true}}
                         :component dynamic-button/preview-dynamic-button}
                        {:name      :slide-button
-                        :options   {:topBar {:visible true}}
                         :component slide-button/preview-slide-button}
                        {:name      :predictive-keyboard
-                        :options   {:topBar {:visible true}}
-                        :component predictive-keyboard/preview-predictive-keyboard}]
+                        :component predictive-keyboard/preview-predictive-keyboard}
+                       {:name      :wallet-button
+                        :component wallet-button/preview}
+                       {:name      :wallet-ctas
+                        :component wallet-ctas/preview}]
    :browser           [{:name      :browser-input
-                        :options   {:topBar {:visible false}}
                         :component browser-input/preview-browser-input}]
    :calendar          [{:name      :calendar
-                        :options   {:topBar {:visible true}}
                         :component calendar/preview-calendar}
                        {:name      :calendar-day
-                        :options   {:topBar {:visible true}}
                         :component calendar-day/preview-calendar-day}
                        {:name      :calendar-year
-                        :options   {:topBar {:visible true}}
                         :component calendar-year/preview-calendar-year}]
    :code              [{:name      :snippet
-                        :options   {:topBar {:visible true}}
                         :component code-snippet/preview-code-snippet}]
    :colors            [{:name      :color-picker
-                        :options   {:topBar {:visible true}}
-                        :component color-picker/preview-color-picker}]
+                        :component color-picker/view}]
    :community         [{:name      :community-card-view
-                        :options   {:topBar {:visible true}}
                         :component community-card/preview-community-card}
                        {:name      :community-membership-list-view
-                        :options   {:topBar {:visible true}}
                         :component community-membership-list-view/preview-community-list-view}
                        {:name      :discover-card
-                        :options   {:topBar {:visible true}}
                         :component discover-card/preview-discoverd-card}
                        {:name      :token-gating
-                        :options   {:insets {:bottom? true}
-                                    :topBar {:visible true}}
+                        :options   {:insets {:bottom? true}}
                         :component token-gating/preview-token-gating}
                        {:name      :channel-actions
-                        :options   {:insets {:bottom? true}
-                                    :topBar {:visible true}}
+                        :options   {:insets {:bottom? true}}
                         :component channel-actions/preview-channel-actions}]
    :counter           [{:name      :counter
-                        :options   {:topBar {:visible true}}
                         :component counter/preview-counter}
                        {:name      :step
-                        :options   {:topBar {:visible true}}
                         :component step/preview-step}]
    :dividers          [{:name      :divider-label
-                        :options   {:topBar {:visible true}}
-                        :component divider-label/preview-divider-label}
+                        :component divider-label/view}
                        {:name      :new-messages
-                        :options   {:topBar {:visible true}}
                         :component new-messages/preview-new-messages}
                        {:name      :divider-date
-                        :options   {:topBar {:visible true}}
                         :component divider-date/preview-divider-date}
                        {:name      :strength-divider
-                        :options   {:topBar {:visible true}}
                         :component strength-divider/preview-strength-divider}]
    :drawers           [{:name      :action-drawers
-                        :options   {:topBar {:visible true}}
                         :component action-drawers/preview-action-drawers}
                        {:name      :documentation-drawer
-                        :options   {:topBar {:visible true}}
                         :component documenation-drawers/preview-documenation-drawers}
                        {:name      :drawer-buttons
-                        :options   {:topBar {:visible true}}
                         :component drawer-buttons/preview-drawer-buttons}
                        {:name      :permission-drawers
-                        :options   {:topBar {:visible true}}
                         :component permission-drawers/preview-permission-drawers}]
    :dropdowns         [{:name      :dropdown
-                        :options   {:topBar {:visible true}}
                         :component dropdown/preview-dropdown}]
    :empty-state       [{:name      :empty-state
-                        :options   {:topBar {:visible true}}
                         :component empty-state/preview-empty-state}]
    :gradient          [{:name      :gradient-cover
-                        :options   {:topBar {:visible true}}
                         :component gradient-cover/preview-gradient-cover}]
    :graph             [{:name      :wallet-graph
-                        :options   {:topBar {:visible true}}
                         :component wallet-graph/preview-wallet-graph}]
    :info              [{:name      :info-message
-                        :options   {:topBar {:visible true}}
                         :component info-message/preview-info-message}
                        {:name      :information-box
-                        :options   {:topBar {:visible true}}
                         :component information-box/preview-information-box}]
    :inputs            [{:name      :input
-                        :options   {:topBar {:visible true}}
                         :component input/preview-input}
                        {:name      :locked-input
-                        :options   {:topBar {:visible true}}
                         :component locked-input/preview-locked-input}
                        {:name      :profile-input
-                        :options   {:topBar {:visible true}}
                         :component profile-input/preview-profile-input}
                        {:name      :recovery-phrase-input
-                        :options   {:topBar {:visible true}}
                         :component recovery-phrase-input/preview-recovery-phrase-input}
                        {:name      :search-input
-                        :options   {:topBar {:visible true}}
                         :component search-input/preview-search-input}
                        {:name      :title-input
-                        :options   {:topBar {:visible true}}
                         :component title-input/preview-title-input}]
    :numbered-keyboard [{:name      :keyboard-key
-                        :options   {:insets {:top? true}
-                                    :topBar {:visible true}}
+                        :options   {:insets {:top? true}}
                         :component keyboard-key/preview-keyboard-key}
                        {:name      :numbered-keyboard
-                        :options   {:insets {:top? true}
-                                    :topBar {:visible true}}
+                        :options   {:insets {:top? true}}
                         :component numbered-keyboard/preview-numbered-keyboard}]
    :links             [{:name      :url-preview
-                        :options   {:insets {:top? true}
-                                    :topBar {:visible true}}
-                        :component url-preview/preview}
+                        :options   {:insets {:top? true}}
+                        :component url-preview/view}
                        {:name      :url-preview-list
-                        :options   {:insets {:top? true}
-                                    :topBar {:visible true}}
-                        :component url-preview-list/preview}
+                        :options   {:insets {:top? true}}
+                        :component url-preview-list/view}
                        {:name      :link-preview
-                        :options   {:insets {:top? true}
-                                    :topBar {:visible true}}
-                        :component link-preview/preview}]
+                        :options   {:insets {:top? true}}
+                        :component link-preview/view}]
    :list-items        [{:name      :account-list-card
-                        :options   {:topBar {:visible true}}
                         :component account-list-card/preview}
                        {:name      :channel
-                        :options   {:topBar {:visible true}}
                         :component channel/preview-channel}
                        {:name      :community-list
-                        :options   {:insets {:top? true}
-                                    :topBar {:visible true}}
-                        :component community-list/preview}
+                        :options   {:insets {:top? true}}
+                        :component community-list/view}
                        {:name      :preview-lists
-                        :options   {:topBar {:visible true}}
                         :component preview-lists/preview-preview-lists}
                        {:name      :user-list
-                        :options   {:topBar {:visible true}}
                         :component user-list/preview-user-list}
                        {:name      :token-value
-                        :options   {:topBar {:visible true}}
                         :component token-value/preview}]
    :loaders           [{:name      :skeleton
-                        :options   {:topBar {:visible true}}
                         :component skeleton/preview-skeleton}]
    :markdown          [{:name      :texts
-                        :options   {:topBar {:visible true}}
                         :component text/preview-text}
                        {:name      :markdown-list
-                        :options   {:topBar {:visible true}}
                         :component markdown-list/preview-markdown-list}]
    :messages          [{:name      :gap
-                        :options   {:topBar {:visible true}}
                         :component messages-gap/preview-messages-gap}
                        {:name      :system-messages
-                        :options   {:topBar {:visible true}}
                         :component system-message/preview-system-message}
                        {:name      :author
-                        :options   {:topBar {:visible true}}
                         :component messages-author/preview-author}]
    :navigation        [{:name      :bottom-nav-tab
-                        :options   {:topBar {:visible true}}
                         :component bottom-nav-tab/preview-bottom-nav-tab}
                        {:name      :top-nav
-                        :options   {:topBar {:visible true}}
                         :component top-nav/preview-top-nav}
                        {:name      :page-nav
-                        :options   {:topBar {:visible true}}
                         :component page-nav/preview-page-nav}
                        {:name      :floating-shell-button
-                        :options   {:topBar {:visible true}}
                         :component floating-shell-button/preview-floating-shell-button}]
    :notifications     [{:name      :activity-logs
-                        :options   {:topBar {:visible true}}
                         :component activity-logs/preview-activity-logs}
                        {:name      :activity-logs-photos
-                        :options   {:topBar {:visible true}}
                         :component activity-logs-photos/preview-activity-logs-photos}
                        {:name      :toast
-                        :options   {:topBar {:visible true}}
                         :component toast/preview-toasts}
                        {:name      :notification
-                        :options   {:topBar {:visible true}}
                         :component notification/preview-notification}]
    :onboarding        [{:name      :small-option-card
-                        :options   {:topBar {:visible true}}
                         :component small-option-card/preview-small-option-card}]
    :password          [{:name      :tips
-                        :options   {:topBar {:visible true}}
                         :component tips/preview-tips}]
    :profile           [{:name      :profile-card
-                        :options   {:topBar {:visible true}}
                         :component profile-card/preview-profile-card}
                        {:name      :collectible
-                        :options   {:topBar {:visible true}}
                         :component collectible/preview-collectible}
                        {:name      :select-profile
-                        :options   {:topBar {:visible true}}
                         :component select-profile/preview-select-profile}]
    :reactions         [{:name      :react
-                        :options   {:topBar {:visible true}}
                         :component react/preview-react}]
    :record-audio      [{:name      :record-audio
-                        :options   {:topBar {:visible true}}
                         :component record-audio/preview-record-audio}]
    :switcher          [{:name      :switcher-cards
-                        :options   {:topBar {:visible true}}
                         :component switcher-cards/preview-switcher-cards}]
    :selectors         [{:name      :disclaimer
-                        :options   {:topBar {:visible true}}
                         :component disclaimer/preview-disclaimer}
                        {:name      :filter
-                        :options   {:topBar {:visible true}}
                         :component filter/preview}
                        {:name      :selectors
-                        :options   {:topBar {:visible true}}
                         :component selectors/preview-selectors}
                        {:name      :select-reactions
-                        :options   {:topBar {:visible true}}
                         :component selector-reactions/preview}]
    :settings          [{:name      :privacy-option
-                        :options   {:topBar {:visible true}}
                         :component privacy-option/preview-options}
                        {:name      :accounts
-                        :options   {:topBar {:visible true}}
                         :component accounts/preview-accounts}
                        {:name      :settings-list
-                        :options   {:topBar {:visible true}}
                         :component settings-list/preview-settings-list}
                        {:name      :reorder-item
-                        :options   {:topBar {:visible true}}
                         :component reorder-item/preview-reorder-item}
                        {:name      :category
-                        :options   {:topBar {:visible true}}
                         :component category/preview}]
    :share             [{:name      :qr-code
-                        :options   {:topBar {:visible true}}
                         :component qr-code/preview-qr-code}
                        {:name      :share-qr-code
-                        :options   {:topBar {:visible true}}
                         :component share-qr-code/preview-share-qr-code}]
    :tabs              [{:name      :segmented
-                        :options   {:topBar {:visible true}}
                         :component segmented/preview-segmented}
                        {:name      :tabs
-                        :options   {:topBar {:visible true}}
                         :component tabs/preview-tabs}
                        {:name      :account-selector
-                        :options   {:topBar {:visible true}}
                         :component account-selector/preview-this}]
    :tags              [{:name      :context-tags
-                        :options   {:topBar {:visible true}}
                         :component context-tags/preview-context-tags}
                        {:name      :tags
-                        :options   {:topBar {:visible true}}
                         :component tags/preview-tags}
                        {:name      :permission-tag
-                        :options   {:topBar {:visible true}}
                         :component permission-tag/preview-permission-tag}
                        {:name      :status-tags
-                        :options   {:topBar {:visible true}}
                         :component status-tags/preview-status-tags}
                        {:name      :token-tag
-                        :options   {:topBar {:visible true}}
                         :component token-tag/preview-token-tag}]
    :text-combinations [{:name      :title
-                        :options   {:topBar {:visible true}}
                         :component title/preview-title}]
    :wallet            [{:name      :account-card
-                        :options   {:topBar {:visible true}}
                         :component account-card/preview-account-card}
                        {:name      :account-overview
-                        :options   {:topBar {:visible true}}
                         :component account-overview/preview-account-overview}
-                       {:name      :network-amount
+                       {:name      :keypair
                         :options   {:topBar {:visible true}}
+                        :component keypair/preview}
+                       {:name      :network-amount
                         :component network-amount/preview}
                        {:name      :network-bridge
-                        :options   {:topBar {:visible true}}
                         :component network-bridge/preview}
+                       {:name      :network-link
+                        :component network-link/preview}
                        {:name      :progress-bar
-                        :options   {:topBar {:visible true}}
                         :component progress-bar/preview}
                        {:name      :summary-info
-                        :options   {:topBar {:visible true}}
                         :component summary-info/preview}
                        {:name      :token-input
-                        :options   {:topBar {:visible true}}
                         :component token-input/preview}
                        {:name      :wallet-overview
-                        :options   {:topBar {:visible true}}
                         :component wallet-overview/preview-wallet-overview}]
    :keycard           [{:name      :keycard-component
-                        :options   {:topBar {:visible true}}
                         :component keycard/preview-keycard}]})
 
-(def screens (flatten (map val screens-categories)))
-
-(defn navigation-bar
+(defn- navigation-bar
   []
   (let [logged-in?    (rf/sub [:multiaccount/logged-in?])
         has-profiles? (boolean (rf/sub [:profile/profiles-overview]))
@@ -477,48 +379,51 @@
                                      (theme/set-theme :dark)
                                      (rf/dispatch [:init-root root]))))}}]))
 
-(defn theme-switcher
+(defn- theme-switcher
   []
-  [rn/view
-   {:style {:flex-direction     :row
-            :justify-content    :space-between
-            :padding-horizontal 24
-            :padding-vertical   12}}
+  [rn/view {:style style/theme-switcher}
    [quo/button {:on-press #(theme/set-theme :light)} "Set light theme"]
    [quo/button {:on-press #(theme/set-theme :dark)} "Set dark theme"]])
 
-(defn category-view
+(defn- category-view
   []
-  (let [open? (reagent/atom false)]
+  (let [open?     (reagent/atom false)
+        on-change #(swap! open? not)]
     (fn [category]
       [rn/view {:style {:margin-vertical 8}}
-       [quo/dropdown {:selected @open? :on-change #(swap! open? not) :type :grey}
-        (clojure.core/name (key category))]
+       [quo/dropdown
+        {:selected  @open?
+         :on-change on-change
+         :type      :grey}
+        (name (key category))]
        (when @open?
-         (for [{:keys [name]} (val category)]
-           ^{:key name}
+         (for [{category-name :name} (val category)]
+           ^{:key category-name}
            [quo/button
             {:type            :outline
              :container-style {:margin-vertical 8}
-             :on-press        #(rf/dispatch [:navigate-to name])}
-            (clojure.core/name name)]))])))
+             :on-press        #(rf/dispatch [:navigate-to category-name])}
+            (name category-name)]))])))
 
-(defn main-screen
+(defn- main-screen
   []
-  (fn []
-    [:<>
-     [navigation-bar]
-     [theme-switcher]
-     [rn/scroll-view
-      {:flex               1
-       :padding-bottom     8
-       :padding-horizontal 16
-       :background-color   (colors/theme-colors colors/white colors/neutral-90)}
-      [rn/view
-       (map (fn [category]
-              ^{:key (get category 0)}
-              [category-view category])
-            (sort screens-categories))]]]))
+  [:<>
+   [navigation-bar]
+   [theme-switcher]
+   [rn/scroll-view {:style (style/main)}
+    (for [category (sort screens-categories)]
+      ^{:key (first category)}
+      [category-view category])]])
+
+(def screens
+  (->> screens-categories
+       (map val)
+       flatten
+       (map (fn [subcategory]
+              (update-in subcategory
+                         [:options :topBar]
+                         merge
+                         {:visible true})))))
 
 (def main-screens
   [{:name      :quo2-preview

src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs

@@ -1,8 +1,7 @@
 (ns status-im2.contexts.quo-preview.navigation.floating-shell-button
-  (:require [quo2.components.navigation.floating-shell-button :as quo2]
+  (:require [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
-            [react-native.reanimated :as reanimated]
             [reagent.core :as reagent]
             [utils.i18n :as i18n]
             [status-im2.contexts.quo-preview.preview :as preview]))
@@ -43,11 +42,6 @@
     (= scroll-type :scroll-to-bottom)
     (assoc :scroll-to-bottom {:on-press #()})))
 
-(defn- f-shell-button
-  [state]
-  [quo2/floating-shell-button (mock-data state)
-   nil (reanimated/use-shared-value 1)])
-
 (defn cool-preview
   []
   (let [state (reagent/atom {:show-jump-to? true
@@ -59,7 +53,7 @@
         [rn/view
          {:padding-vertical 60
           :align-items      :center}
-         [:f> f-shell-button @state]]]])))
+         [quo/floating-shell-button (mock-data @state) nil]]]])))
 
 (defn preview-floating-shell-button
   []