e2e: fixing tests: navigation

---------

Co-authored-by: Yevheniia Berdnyk <ie.berdnyk@gmail.com>
Co-authored-by: Churikova Tetiana <tatiana@status.im>

doc/decisions/0014-wallet-team.md

@@ -27,3 +27,4 @@ The team members for the initial wallet team are:
 - @ulisesmac
 - @erikseppanen
 - @mmilad75
+- @tumanov-alex

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) 

nix/mobile/android/default.nix

@@ -15,19 +15,11 @@ rec {
     ];
 
     inputsFrom = [
-      release
+      (release {})
       androidShell
     ];
 
     shellHook = ''
-      export ANDROID_SDK_ROOT="${androidPkgs.sdk}"
-      export ANDROID_NDK_ROOT="${androidPkgs.ndk}"
-
-      export STATUS_NIX_MAVEN_REPO="${deps.gradle}"
-
-      # required by some makefile targets
-      export STATUS_GO_ANDROID_LIBDIR=${status-go}
-
       # check if node modules changed and if so install them
       $STATUS_MOBILE_HOME/nix/scripts/node_modules.sh ${deps.nodejs-patched}
     '';

nix/mobile/android/release.nix

@@ -30,6 +30,9 @@ let
   # Pass secretsFile for POKT_TOKEN to jsbundle build
   builtJsBundle = jsbundle { inherit secretsFile; };
 
+  # Map ANDROID_ABI_INCLUDE to status-go targets
+  androidAbiIncludeSplit = lib.splitString ";" androidAbiInclude;
+
 
   envFileName =
     if androidAbiInclude == "x86"                  then ".env.e2e"
@@ -77,20 +80,25 @@ in stdenv.mkDerivation rec {
   ANDROID_ABI_SPLIT = androidAbiSplit;
   ANDROID_ABI_INCLUDE = androidAbiInclude;
 
-  # Android SDK/NDK for use by Gradle
-  ANDROID_SDK_ROOT = "${androidPkgs.sdk}";
-  ANDROID_NDK_ROOT = "${androidPkgs.ndk}";
-
   # Fix for ERR_OSSL_EVP_UNSUPPORTED error.
   NODE_OPTIONS = "--openssl-legacy-provider";
 
-  # Used by the Android Gradle build script in android/build.gradle
-  STATUS_GO_ANDROID_LIBDIR = status-go;
-
   phases = [
-    "unpackPhase" "secretsPhase" "buildPhase" "checkPhase" "installPhase"
+    "shellHook" "unpackPhase" "secretsPhase" "buildPhase" "checkPhase" "installPhase"
   ];
 
+  # We use shellHook as a single place to setup env vars for both build derivation and shell
+  shellHook = ''
+    # Used by the Android Gradle build script in android/build.gradle
+    export STATUS_GO_ANDROID_LIBDIR=${ status-go { abis = androidAbiIncludeSplit; } }
+
+    # Android SDK/NDK for use by Gradle
+    export ANDROID_SDK_ROOT="${androidPkgs.sdk}"
+    export ANDROID_NDK_ROOT="${androidPkgs.ndk}"
+
+    export STATUS_NIX_MAVEN_REPO="${deps.gradle}"
+  '';
+
   unpackPhase = ''
     cp -ar $src/. ./
     chmod u+w -R ./

nix/shells.nix

@@ -66,7 +66,7 @@ let
     # helpers for use with target argument
     ios = targets.mobile.ios.shell;
     android = targets.mobile.android.shell;
-    status-go = targets.status-go.mobile.android;
+    status-go = targets.status-go.mobile.android {};
   };
 
   # for merging the default shell with others

nix/status-go/mobile/default.nix

@@ -1,10 +1,18 @@
 { callPackage, meta, source, goBuildLdFlags }:
 
 {
-  android = callPackage ./build.nix {
+  android = {abis ? [ "armeabi-v7a" "arm64-v8a" "x86" ]}: callPackage ./build.nix {
     platform = "android";
     platformVersion = "23";
-    targets = [ "android/arm" "android/arm64" "android/386" ];
+    # Hide different arch naming in gomobile from Android builds.
+    targets = let
+      abiMap = {
+        "armeabi-v7a" = "android/arm";
+        "arm64-v8a"   = "android/arm64";
+        "x86"         = "android/386";
+        "x86_64"      = "android/amd64";
+        };
+      in map (arch: abiMap."${arch}") abis;
     outputFileName = "status-go-${source.shortRev}.aar";
     inherit meta source goBuildLdFlags;
   };

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 {}})
@@ -139,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/view.cljs

@@ -7,27 +7,33 @@
             [quo2.components.avatars.group-avatar.style :as style]))
 
 (def sizes
-  {20 {:icon 12}
-   28 {:icon 16}
-   32 {:icon 16}
-   48 {:icon 20}
-   80 {:icon 32}})
+  {: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                20
+        :or   {size                :size/s-20
                customization-color :blue}}]
-    (let [icon-size (get-in sizes [size :icon])]
+    (let [container-size (get-in sizes [size :container])
+          icon-size      (get-in sizes [size :icon])]
       [rn/view
-       {:style (style/container {:container-size      size
+       {:style (style/container {:container-size      container-size
                                  :customization-color customization-color
                                  :theme               theme})}
        (if picture
          [fast-image/fast-image
           {:source picture
-           :style  {:width  size
-                    :height size}}]
+           :style  {:width  container-size
+                    :height container-size}}]
          [icon/icon :i/members
           {:size  icon-size
            :color colors/white-opa-70}])])))

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/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,16 @@
+(ns quo2.components.buttons.wallet-ctas.style)
+
+(def container
+  {:padding-top        24
+   :padding-bottom     12
+   :padding-horizontal 20
+   :flex-direction     :row
+   :justify-content    :center
+   :flex               1
+   :max-height         106})
+
+(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/dividers/divider_label.cljs

@@ -1,90 +0,0 @@
-(ns quo2.components.dividers.divider-label
-  (:require [quo2.components.icon :as icons]
-            [quo2.components.markdown.text :as markdown.text]
-            [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]
-            [react-native.core :as rn]))
-
-(def chevron-icon-container-width 20)
-
-(def chevron-icon-container-height 20)
-
-(defn themed-view
-  "label -> string
-   chevron-position -> :left, :right
-   chevron-icon -> keyword
-   on-press -> function
-   padding-bottom -> number
-   counter-value -> number
-   increase-padding-top? -> boolean
-   blur? -> boolean
-   theme -> theme value passed from with-theme HOC"
-  [{:keys [label
-           chevron-position
-           chevron-icon
-           counter-value
-           increase-padding-top?
-           padding-bottom
-           blur?
-           container-style
-           on-press
-           theme]}]
-  (let [dark?                       (= :dark theme)
-        border-and-counter-bg-color (if dark?
-                                      (if blur? colors/white-opa-5 colors/neutral-70)
-                                      colors/neutral-10)
-        padding-top                 (if increase-padding-top? 16 8)
-        text-and-icon-color         (if dark? colors/neutral-40 colors/neutral-50)
-        counter-text-color          (if dark? colors/white colors/neutral-100)]
-    [rn/touchable-without-feedback {:on-press on-press}
-     [rn/view
-      {:accessible          true
-       :accessibility-label :divider-label
-       :style               (merge {:border-top-width 1
-                                    :border-top-color border-and-counter-bg-color
-                                    :padding-top      padding-top
-                                    :padding-bottom   padding-bottom
-                                    :padding-left     16
-                                    :padding-right    16
-                                    :align-items      :center
-                                    :flex-direction   :row}
-                                   container-style)}
-      (when (= chevron-position :left)
-        [rn/view
-         {:test-ID :divider-label-icon-left
-          :style   {:margin-right 4}}
-         [icons/icon
-          (or chevron-icon :i/chevron-down)
-          {:color  text-and-icon-color
-           :width  chevron-icon-container-width
-           :height chevron-icon-container-height}]])
-      [markdown.text/text
-       {:size   :paragraph-2
-        :weight :medium
-        :style  {:color text-and-icon-color
-                 :flex  1}}
-       label]
-      (when (= chevron-position :right)
-        [rn/view {:test-ID :divider-label-icon-right}
-         [icons/icon
-          (or chevron-icon :i/chevron-down)
-          {:color text-and-icon-color
-           :size  chevron-icon-container-width}]])
-      (when (pos? counter-value)
-        [rn/view
-         {:style {:border-radius    6
-                  :height           16
-                  :width            (case (count counter-value)
-                                      1 16
-                                      2 20
-                                      28)
-                  :background-color border-and-counter-bg-color
-                  :align-items      :center
-                  :justify-content  :center}}
-         [markdown.text/text
-          {:size   :label
-           :weight :medium
-           :style  {:color counter-text-color}}
-          counter-value]])]]))
-
-(def divider-label (theme/with-theme themed-view))

src/quo2/components/dividers/divider_label/component_spec.cljs

@@ -0,0 +1,20 @@
+(ns quo2.components.dividers.divider-label.component-spec
+  (:require [quo2.components.dividers.divider-label.view :as divider-label]
+            [test-helpers.component :as h]))
+
+(h/describe "Divider Label"
+  (h/test "default render"
+    (h/render [divider-label/view "Welcome"])
+    (h/is-truthy (h/query-by-label-text :divider-label)))
+  (h/test "with label"
+    (h/render [divider-label/view {:tight? true} "Welcome"])
+    (h/is-truthy (h/query-by-text "Welcome")))
+  (h/test "with label & counter value"
+    (h/render [divider-label/view {:tight? true :counter? true :counter-value 5} "Public"])
+    (h/is-truthy (h/query-by-text "Public"))
+    (h/is-truthy (h/query-by-text "5")))
+  (h/test "on-press event"
+    (let [on-press (h/mock-fn)]
+      (h/render [divider-label/view {:tight? false :on-press on-press} "General"])
+      (h/fire-event :press (h/query-by-label-text :divider-label))
+      (h/was-called on-press))))

src/quo2/components/dividers/divider_label/style.cljs

@@ -0,0 +1,39 @@
+(ns quo2.components.dividers.divider-label.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn- get-border-color
+  [blur? theme]
+  (colors/theme-colors (if blur? colors/neutral-80-opa-5 colors/neutral-10)
+                       (if blur? colors/white-opa-5 colors/neutral-90)
+                       theme))
+
+(defn get-content-color
+  [blur? theme]
+  (colors/theme-colors (if blur? colors/neutral-80-opa-70 colors/neutral-50)
+                       (if blur? colors/white-opa-70 colors/neutral-40)
+                       theme))
+
+(defn container
+  [blur? tight? chevron theme]
+  {:border-top-width 1
+   :border-top-color (get-border-color blur? theme)
+   :padding-top      (if tight? 6 14)
+   :padding-bottom   7
+   :padding-left     (if (= :left chevron) 16 20)
+   :padding-right    20
+   :align-items      :center
+   :flex-direction   :row})
+
+(defn content
+  [chevron]
+  {:flex-direction (if (= chevron :right)
+                     :row-reverse
+                     :row)
+   :align-items    :center
+   :height         20
+   :flex           1})
+
+(defn text
+  [blur? theme]
+  {:color (get-content-color blur? theme)
+   :flex  1})

src/quo2/components/dividers/divider_label/view.cljs

@@ -0,0 +1,60 @@
+(ns quo2.components.dividers.divider-label.view
+  (:require [quo2.components.markdown.text :as text]
+            [quo2.components.dividers.divider-label.style :as style]
+            [quo2.theme :as quo.theme]
+            [react-native.core :as rn]
+            [quo2.components.counter.counter.view :as counter]
+            [quo2.components.icon :as icons]))
+
+(defn- view-internal
+  "Options:
+  - `counter?` (default: nil) - Display a counter on the right side of the divider.
+  - `counter-value` (default: nil) - Number to display if counter? is true.
+  - `chevron` nil/:right/:left (default: nil) - Display a chevron on the left or right side of the divider.
+  - `chevron-icon` (default: :i/chevron-right) - Icon to display when chevron is :left/:right.
+  - `tight?` (default: true) - Use a tighter padding.
+  - `blur?` (default: nil) - Use a blur background.
+  - `theme` - Theme value from with-theme HOC.
+  - `on-press` - Function called when the divider is pressed.
+  - `container-style` - Style applied to the container view.
+
+  label - String or markdown text component to display in the divider label."
+  [{:keys [counter?
+           counter-value
+           chevron
+           chevron-icon
+           tight?
+           blur?
+           theme
+           on-press
+           container-style]
+    :or   {tight? true}}
+   label]
+  [rn/pressable
+   {:on-press            on-press
+    :accessibility-label :divider-label
+    :style               (merge (style/container blur? tight? chevron theme)
+                                container-style)}
+   [rn/view
+    {:style (style/content chevron)}
+    (when chevron
+      [icons/icon (or chevron-icon :i/chevron-right)
+       {:color           (style/get-content-color blur? theme)
+        :container-style {(if (= chevron :right)
+                            :margin-left
+                            :margin-right)
+                          2}}])
+    [text/text
+     {:size   :paragraph-2
+      :weight :medium
+      :style  (style/text blur? theme)}
+     label]]
+   (when counter?
+     [counter/view
+      {:type            (if blur? :secondary :grey)
+       :container-style {:margin-left 2}}
+      counter-value])])
+
+(defn view
+  ([_ _] (quo.theme/with-theme view-internal))
+  ([label] [view {} label]))

src/quo2/components/dividers/divider_label_component_spec.cljs

@@ -1,45 +0,0 @@
-(ns quo2.components.dividers.divider-label-component-spec
-  (:require ["@testing-library/react-native" :as rtl]
-            [quo2.components.dividers.divider-label :as divider-label]
-            [reagent.core :as reagent]))
-
-(defn render-divider-label
-  ([]
-   (render-divider-label {}))
-  ([opts]
-   (rtl/render (reagent/as-element [divider-label/divider-label opts]))))
-
-(js/global.test "default render of divider-label component"
-  (fn []
-    (render-divider-label)
-    (-> (js/expect (rtl/screen.getByLabelText "divider-label"))
-        (.toBeTruthy))))
-
-(js/global.test "render divider-label component with a label"
-  (fn []
-    (render-divider-label {:label :hello})
-    (-> (js/expect (rtl/screen.getByText "hello"))
-        (.toBeTruthy))))
-
-(js/global.test "render divider-label component with a counter-value"
-  (fn []
-    (render-divider-label {:label         :hello
-                           :counter-value "1"})
-    (-> (js/expect (rtl/screen.getByText "1"))
-        (.toBeTruthy))))
-
-(js/global.test "divider-label chevron icon renders to the left when set"
-  (fn []
-    (render-divider-label {:label            :hello
-                           :counter-value    "1"
-                           :chevron-position :left})
-    (-> (js/expect (rtl/screen.getByTestId "divider-label-icon-left"))
-        (.toBeTruthy))))
-
-(js/global.test "divider-label chevron icon renders to the right when set"
-  (fn []
-    (render-divider-label {:label            :hello
-                           :counter-value    "1"
-                           :chevron-position :right})
-    (-> (js/expect (rtl/screen.getByTestId "divider-label-icon-right"))
-        (.toBeTruthy))))

src/quo2/components/drawers/action_drawers/style.cljs

@@ -23,10 +23,11 @@
    :margin-horizontal 12
    :flex-direction    :row})
 
-(def left-icon
+(defn left-icon
+  [sub-label?]
   {:height        20
-   :margin-top    :auto
-   :margin-bottom :auto
+   :margin-top    (if sub-label? 10 :auto)
+   :margin-bottom (when-not sub-label? :auto)
    :margin-right  12
    :width         20})
 

src/quo2/components/drawers/action_drawers/view.cljs

@@ -51,7 +51,7 @@
      [rn/view
       {:accessibility-label :left-icon-for-action
        :accessible          true
-       :style               style/left-icon}
+       :style               (style/left-icon sub-label)}
       [icon/icon icon
        {:color (or icon-color (get-icon-color danger? theme))
         :size  20}]]

src/quo2/components/dropdowns/network_dropdown/component_spec.cljs

@@ -0,0 +1,35 @@
+(ns quo2.components.dropdowns.network-dropdown.component-spec
+  (:require [quo2.components.dropdowns.network-dropdown.view :as network-dropdown]
+            [quo2.foundations.resources :as quo.resources]
+            [test-helpers.component :as h]))
+
+(def ^:private networks-list
+  [{:source (quo.resources/get-network :ethereum)}
+   {:source (quo.resources/get-network :optimism)}
+   {:source (quo.resources/get-network :arbitrum)}])
+
+(h/describe "Network dropdown"
+  (h/test "default render"
+    (h/render [network-dropdown/view {:state :default}
+               networks-list])
+    (h/is-truthy (h/query-by-label-text :network-dropdown)))
+
+  (h/test "Should call :on-press in enabled state"
+    (let [on-press (h/mock-fn)]
+      (h/render [network-dropdown/view
+                 {:state    :default
+                  :on-press on-press}
+                 networks-list])
+      (h/is-truthy (h/query-by-label-text :network-dropdown))
+      (h/fire-event :press (h/query-by-label-text :network-dropdown))
+      (h/was-called on-press)))
+
+  (h/test "Should not call :on-press in disabled state"
+    (let [on-press (h/mock-fn)]
+      (h/render [network-dropdown/view
+                 {:state    :disabled
+                  :on-press on-press}
+                 networks-list])
+      (h/is-truthy (h/query-by-label-text :network-dropdown))
+      (h/fire-event :press (h/query-by-label-text :network-dropdown))
+      (h/was-not-called on-press))))

src/quo2/components/dropdowns/network_dropdown/style.cljs

@@ -0,0 +1,24 @@
+(ns quo2.components.dropdowns.network-dropdown.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn container-border-color
+  [{:keys [state blur? theme pressed?]}]
+  (let [default-color (if blur?
+                        colors/neutral-80-opa-5
+                        (colors/theme-colors colors/neutral-30 colors/neutral-70 theme))
+        active-color  (if blur?
+                        colors/neutral-80-opa-10
+                        (colors/theme-colors colors/neutral-40 colors/neutral-60 theme))]
+    (condp = state
+      :disabled default-color
+      :default  (if pressed? active-color default-color))))
+
+(defn dropdown-container
+  [{:keys [state] :as props}]
+  {:border-width       1
+   :border-radius      10
+   :padding-horizontal 8
+   :padding-vertical   6
+   :opacity            (if (= state :disabled) 0.3 1)
+   :border-color       (container-border-color props)
+   :align-items        :center})

src/quo2/components/dropdowns/network_dropdown/view.cljs

@@ -0,0 +1,26 @@
+(ns quo2.components.dropdowns.network-dropdown.view
+  (:require [quo2.theme :as quo.theme]
+            [quo2.components.dropdowns.network-dropdown.style :as style]
+            [react-native.core :as rn]
+            [quo2.components.list-items.preview-list :as preview-list]
+            [reagent.core :as reagent]))
+
+(defn- internal-view
+  [_ _]
+  (let [pressed? (reagent/atom false)]
+    (fn
+      [{:keys [on-press state] :as props} networks]
+      [rn/pressable
+       {:style               (style/dropdown-container (merge props {:pressed? @pressed?}))
+        :accessibility-label :network-dropdown
+        :disabled            (= state :disabled)
+        :on-press            on-press
+        :on-press-in         (fn [] (reset! pressed? true))
+        :on-press-out        (fn [] (reset! pressed? false))}
+       [preview-list/preview-list
+        {:type      :network
+         :list-size (count networks)
+         :size      20}
+        networks]])))
+
+(def view (quo.theme/with-theme internal-view))

src/quo2/components/empty_state/empty_state/styles.cljs

@@ -24,3 +24,8 @@
     {:color colors/white}))
 
 (def button-container {:margin-top 20})
+
+(def image-placeholder
+  {:width            80
+   :height           80
+   :background-color colors/danger})

src/quo2/components/empty_state/empty_state/view.cljs

@@ -7,14 +7,16 @@
             [quo2.theme :as theme]))
 
 (defn- empty-state-internal
-  [{:keys        [customization-color image title description blur?]
+  [{:keys        [customization-color image title description blur? placeholder? container-style]
     upper-button :upper-button
     lower-button :lower-button
     :or          {customization-color :blue}}]
-  [rn/view {:style styles/container}
-   [fast-image/fast-image
-    {:style  styles/image
-     :source image}]
+  [rn/view {:style (merge styles/container container-style)}
+   (if placeholder?
+     [rn/view {:style styles/image-placeholder}]
+     [fast-image/fast-image
+      {:style  styles/image
+       :source image}])
    [rn/view {:style styles/text-container}
     [text/text
      {:style           (styles/title blur?)

src/quo2/components/graph/wallet_graph/style.cljs

@@ -2,8 +2,11 @@
   (:require [quo2.foundations.colors :as colors]))
 
 (def gradient-background
-  {:height          294
-   :justify-content :flex-end})
+  {:height   294
+   :position :absolute
+   :left     0
+   :right    0
+   :bottom   0})
 
 (def x-axis-label-text-style ; We need this to remove unnecessary bottom spacing from graph
   {:margin-bottom -3

src/quo2/components/graph/wallet_graph/view.cljs

@@ -37,11 +37,12 @@
         :style               style/illustration}
        [text/text {:style {:color colors/white}}
         "Illustration here"]]
-      [linear-gradient/linear-gradient
-       {:colors gradient-colors
-        :start  {:x 0 :y 1}
-        :end    {:x 0 :y 0}
-        :style  style/gradient-background}
+      [rn/view
+       [linear-gradient/linear-gradient
+        {:colors gradient-colors
+         :start  {:x 0 :y 1}
+         :end    {:x 0 :y 0}
+         :style  style/gradient-background}]
        [rn/view {:accessibility-label :line-chart}
         [charts/line-chart
          {:height                  96

src/quo2/components/list_items/dapp/component_spec.cljs

@@ -0,0 +1,24 @@
+(ns quo2.components.list-items.dapp.component-spec
+  (:require [quo2.components.list-items.dapp.view :as dapp]
+            [test-helpers.component :as h]))
+
+(def props
+  {:dapp                {:avatar nil
+                         :name   "Coingecko"
+                         :value  "coingecko.com"}
+   :state               :default
+   :action              :icon
+   :blur?               false
+   :customization-color :blue})
+
+(h/describe
+  "dApp component test"
+  (h/test "default render"
+    (h/render [dapp/view props])
+    (h/is-truthy (h/get-by-text (:name (:dapp props))))
+    (h/is-truthy (h/get-by-text (:value (:dapp props)))))
+  (h/test "on-press event"
+    (let [mock-fn (h/mock-fn)]
+      (h/render [dapp/view (assoc props :on-press-icon mock-fn)])
+      (h/fire-event :press (h/get-by-test-id "dapp-component-icon"))
+      (h/was-called mock-fn))))

src/quo2/components/list_items/dapp/style.cljs

@@ -0,0 +1,47 @@
+(ns quo2.components.list-items.dapp.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn get-background-color
+  [{:keys [pressed? state blur? customization-color theme]}]
+  (cond
+    (and pressed? (= theme :dark) blur?)          colors/white-opa-5
+
+    pressed?                                      (colors/theme-colors
+                                                   (colors/custom-color customization-color 50 5)
+                                                   (colors/custom-color customization-color 60 5)
+                                                   theme)
+
+    (and (= state :active) (= theme :dark) blur?) colors/white-opa-10
+
+    (= state :active)                             (colors/theme-colors
+                                                   (colors/custom-color customization-color 50 10)
+                                                   (colors/custom-color customization-color 60 10)
+                                                   theme)
+
+    :else                                         :transparent))
+
+(defn container
+  [props]
+  {:flex               1
+   :padding-horizontal 12
+   :padding-vertical   8
+   :border-radius      12
+   :background-color   (get-background-color props)
+   :flex-direction     :row
+   :justify-content    :space-between
+   :align-items        :center})
+
+(def container-info
+  {:flex-direction :row
+   :align-items    :center})
+
+(def user-info
+  {:margin-left 8})
+
+(defn style-text-name
+  [theme]
+  {:color (colors/theme-colors colors/neutral-100 colors/white theme)})
+
+(defn style-text-value
+  [theme]
+  {:color (colors/theme-colors colors/neutral-50 colors/white theme)})

src/quo2/components/list_items/dapp/view.cljs

@@ -0,0 +1,47 @@
+(ns quo2.components.list-items.dapp.view
+  (:require [quo2.components.icon :as icons]
+            [quo2.components.markdown.text :as text]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [react-native.fast-image :as fast-image]
+            [quo2.components.list-items.dapp.style :as style]
+            [quo2.theme :as quo.theme]
+            [reagent.core :as reagent]))
+
+(defn- view-internal
+  []
+  (let [pressed? (reagent/atom false)]
+    (fn [{:keys [dapp action on-press on-press-icon theme] :as props}]
+      [rn/pressable
+       {:style        (style/container (assoc props :pressed? @pressed?))
+        :on-press     on-press
+        :on-press-in  #(reset! pressed? true)
+        :on-press-out #(reset! pressed? false)}
+       [rn/view {:style style/container-info}
+        [fast-image/fast-image
+         {:source (:avatar dapp)
+          :style  {:width 32 :height 32}}]
+        [rn/view {:style style/user-info}
+         [text/text
+          {:weight :semi-bold
+           :size   :paragraph-1
+           :style  (style/style-text-name theme)}
+          (:name dapp)]
+         [text/text
+          {:weight :regular
+           :size   :paragraph-2
+           :style  (style/style-text-value theme)}
+          (:value dapp)]]]
+       (when (= action :icon)
+         [rn/pressable
+          {:on-press on-press-icon
+           :testID   "dapp-component-icon"}
+          [icons/icon :i/options
+           {:color               (colors/theme-colors
+                                  colors/neutral-50
+                                  colors/neutral-40
+                                  theme)
+            :accessibility-label :icon}]])])))
+
+(def view
+  (quo.theme/with-theme view-internal))

src/quo2/components/list_items/preview_list.cljs

@@ -21,6 +21,12 @@
        :hole-size     26
        :hole-x        19
        :hole-y        -1}
+   20 {:border-radius {:circular 10 :rounded 8}
+       :hole-radius   {:circular 11 :rounded 9}
+       :margin-left   -4
+       :hole-size     22
+       :hole-x        15
+       :hole-y        -1}
    16 {:border-radius {:circular 8 :rounded 8}
        :hole-radius   {:circular 9 :rounded 9}
        :margin-left   -4
@@ -32,19 +38,19 @@
 (defn avatar
   [item type size border-radius]
   (case type
-    :user                 [user-avatar/user-avatar
-                           (merge {:ring?             false
-                                   :status-indicator? false
-                                   :size              (case size
-                                                        32 :small
-                                                        24 :xs
-                                                        16 :xxxs)}
-                                  item)]
-    (:photo :collectible) [fast-image/fast-image
-                           {:source (:source item)
-                            :style  {:width         size
-                                     :height        size
-                                     :border-radius border-radius}}]))
+    :user                          [user-avatar/user-avatar
+                                    (merge {:ring?             false
+                                            :status-indicator? false
+                                            :size              (case size
+                                                                 32 :small
+                                                                 24 :xs
+                                                                 16 :xxxs)}
+                                           item)]
+    (:photo :collectible :network) [fast-image/fast-image
+                                    {:source (:source item)
+                                     :style  {:width         size
+                                              :height        size
+                                              :border-radius border-radius}}]))
 
 (defn list-item
   [index type size item list-size margin-left
@@ -115,7 +121,7 @@
 (defn- preview-list-internal
   "[preview-list opts items]
    opts
-   {:type          :user/:community/:account/:token/:collectible/:dapp
+   {:type          :user/:community/:account/:token/:collectible/:dapp/:network
     :size          32/24/16
     :list-size     override items count in overflow label (optional)
     :transparent?  overflow-label transparent?}

src/quo2/components/messages/author/style.cljs

@@ -6,22 +6,26 @@
    :flex-direction :row
    :align-items    :center})
 
-(def middle-dot-nickname
-  {:color             colors/neutral-50
+(defn middle-dot-nickname
+  []
+  {:color             (colors/theme-colors colors/neutral-40 colors/neutral-50)
    :margin-horizontal 4})
 
-(def chat-key-text
-  {:color       colors/neutral-50
+(defn chat-key-text
+  []
+  {:color       (colors/theme-colors colors/neutral-40 colors/neutral-50)
    :margin-left 8})
 
-(def middle-dot-chat-key
-  {:color       colors/neutral-50
+(defn middle-dot-chat-key
+  []
+  {:color       (colors/theme-colors colors/neutral-40 colors/neutral-50)
    :margin-left 4})
 
 (def icon-container
   {:margin-left 4})
 
 (defn time-text
-  [ens?]
-  {:color       colors/neutral-50
-   :margin-left (if ens? 8 4)})
+  [verified?]
+  {:color       (colors/theme-colors colors/neutral-40 colors/neutral-50)
+   :padding-top 1
+   :margin-left (if verified? 8 4)})

src/quo2/components/messages/author/view.cljs

@@ -9,26 +9,33 @@
 (def middle-dot "·")
 
 (defn author
-  [{:keys [primary-name secondary-name style short-chat-key time-str contact? verified? untrustworthy?]}]
+  [{:keys [primary-name secondary-name style short-chat-key time-str contact? verified? untrustworthy?
+           muted? size]
+    :or   {size 13}}]
   [rn/view {:style (merge style/container style)}
    [text/text
-    {:weight          :semi-bold
-     :size            :paragraph-2
-     :number-of-lines 1
-     :style           {:color (colors/theme-colors colors/neutral-100 colors/white)}}
+    {:weight              :semi-bold
+     :size                (if (= size 15) :paragraph-1 :paragraph-2)
+     :number-of-lines     1
+     :accessibility-label :author-primary-name
+     :style               {:color (if muted?
+                                    colors/neutral-50
+                                    (colors/theme-colors colors/neutral-100 colors/white))}}
     primary-name]
    (when (not (string/blank? secondary-name))
      [:<>
       [text/text
-       {:size            :paragraph-2
+       {:size            :label
         :number-of-lines 1
-        :style           style/middle-dot-nickname}
+        :style           (style/middle-dot-nickname)}
        middle-dot]
       [text/text
-       {:weight          :medium
-        :size            :paragraph-2
-        :number-of-lines 1
-        :style           {:color (colors/theme-colors colors/neutral-60 colors/neutral-40)}}
+       {:weight              :medium
+        :size                :label
+        :number-of-lines     1
+        :accessibility-label :author-secondary-name
+        :style               {:padding-top 1
+                              :color       (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
        secondary-name]])
    (when contact?
      [icons/icon :main-icons2/contact
@@ -51,14 +58,14 @@
       {:monospace       true
        :size            :label
        :number-of-lines 1
-       :style           style/chat-key-text}
+       :style           (style/chat-key-text)}
       short-chat-key])
-   (when (and (not verified?) time-str)
+   (when (and (not verified?) time-str short-chat-key)
      [text/text
       {:monospace       true
        :size            :label
        :number-of-lines 1
-       :style           style/middle-dot-chat-key}
+       :style           (style/middle-dot-chat-key)}
       middle-dot])
    (when time-str
      [text/text

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/wallet/account_card/view.cljs

@@ -47,7 +47,7 @@
 
 (defn- user-account
   [{:keys [state name balance percentage-value loading? amount customization-color type emoji metrics?
-           theme]}]
+           theme on-press]}]
   (let [watch-only?        (= :watch-only type)
         empty?             (= :empty type)
         account-amount     (if (= :empty state) "€0.00" amount)
@@ -59,44 +59,45 @@
         :type                type
         :theme               theme
         :metrics?            metrics?}]
-      [:<>
-       [rn/view {:style (style/card customization-color watch-only? metrics? theme)}
-        [rn/view {:style style/profile-container}
-         [rn/view {:style {:padding-bottom 2 :margin-right 2}}
-          [text/text {:style style/emoji} emoji]]
-         [rn/view {:style style/watch-only-container}
+      [rn/pressable
+       {:style    (style/card customization-color watch-only? metrics? theme)
+        :on-press on-press}
+       [rn/view {:style style/profile-container}
+        [rn/view {:style {:padding-bottom 2 :margin-right 2}}
+         [text/text {:style style/emoji} emoji]]
+        [rn/view {:style style/watch-only-container}
+         [text/text
+          {:size   :paragraph-2
+           :weight :medium
+           :style  (style/account-name watch-only? theme)}
+          account-name]
+         (when watch-only? [icon/icon :reveal {:color colors/neutral-50 :size 12}])]]
+       [text/text
+        {:size   :heading-2
+         :weight :semi-bold
+         :style  (style/account-value watch-only? theme)}
+        balance]
+       (when metrics?
+         [rn/view {:style style/metrics-container}
           [text/text
-           {:size   :paragraph-2
-            :weight :medium
-            :style  (style/account-name watch-only? theme)}
-           account-name]
-          (when watch-only? [icon/icon :reveal {:color colors/neutral-50 :size 12}])]]
-        [text/text
-         {:size   :heading-2
-          :weight :semi-bold
-          :style  (style/account-value watch-only? theme)}
-         balance]
-        (when metrics?
-          [rn/view {:style style/metrics-container}
-           [text/text
-            {:weight              :semi-bold
-             :size                :paragraph-2
-             :accessibility-label :metrics
-             :style               (style/metrics watch-only? theme)}
-            account-percentage]
-           (when (not empty?)
-             [:<>
-              [rn/view (style/separator watch-only? theme)]
-              [text/text
-               {:weight :semi-bold
-                :size   :paragraph-2
-                :style  (style/metrics watch-only? theme)} account-amount]
-              [rn/view {:style {:margin-left 4}}
-               [icon/icon :positive
-                {:color (if (and watch-only? (not (colors/dark?)))
-                          colors/neutral-50
-                          colors/white-opa-70)
-                 :size  16}]]])])]])))
+           {:weight              :semi-bold
+            :size                :paragraph-2
+            :accessibility-label :metrics
+            :style               (style/metrics watch-only? theme)}
+           account-percentage]
+          (when (not empty?)
+            [:<>
+             [rn/view (style/separator watch-only? theme)]
+             [text/text
+              {:weight :semi-bold
+               :size   :paragraph-2
+               :style  (style/metrics watch-only? theme)} account-amount]
+             [rn/view {:style {:margin-left 4}}
+              [icon/icon :positive
+               {:color (colors/theme-colors (if watch-only? colors/neutral-50 colors/white-opa-70)
+                                            colors/white-opa-70
+                                            theme)
+                :size  16}]]])])])))
 
 (defn- add-account-view
   [{:keys [on-press customization-color theme metrics?]}]

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

@@ -5,7 +5,7 @@
   {:padding-top        24
    :padding-horizontal 20
    :padding-bottom     20
-   :height             78
+   :height             130
    :align-items        :center
    :justify-content    :center})
 

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

@@ -9,7 +9,9 @@
 
 (defn- loading-state
   [color]
-  [:<>
+  [rn/view
+   {:style {:height      130
+            :align-items :center}}
    [rn/view
     (style/loading-bar-margin-bottom {:color         color
                                       :width         104
@@ -99,7 +101,9 @@
      {:style style/account-overview-wrapper}
      (if (= :loading state)
        [loading-state (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)]
-       [:<>
+       [rn/view
+        {:style {:height      130
+                 :align-items :center}}
         [account-details account-name account theme]
         [text/text
          {:weight :semi-bold

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
@@ -31,7 +33,7 @@
     quo2.components.counter.counter.view
     quo2.components.counter.step.view
     quo2.components.dividers.date
-    quo2.components.dividers.divider-label
+    quo2.components.dividers.divider-label.view
     quo2.components.dividers.new-messages
     quo2.components.dividers.strength-divider.view
     quo2.components.drawers.action-drawers.view
@@ -39,6 +41,7 @@
     quo2.components.drawers.drawer-buttons.view
     quo2.components.drawers.permission-context.view
     quo2.components.dropdowns.dropdown
+    quo2.components.dropdowns.network-dropdown.view
     quo2.components.empty-state.empty-state.view
     quo2.components.gradient.gradient-cover.view
     quo2.components.graph.wallet-graph.view
@@ -59,6 +62,7 @@
     quo2.components.list-items.account-list-card.view
     quo2.components.list-items.channel
     quo2.components.list-items.community.view
+    quo2.components.list-items.dapp.view
     quo2.components.list-items.menu-item
     quo2.components.list-items.preview-list
     quo2.components.list-items.token-value.view
@@ -70,7 +74,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
@@ -107,10 +111,12 @@
     quo2.components.tags.tags
     quo2.components.tags.token-tag
     quo2.components.text-combinations.title.view
-    quo2.components.wallet.account-overview.view
     quo2.components.wallet.account-card.view
+    quo2.components.wallet.account-overview.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 +141,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)
@@ -174,7 +182,7 @@
 (def step quo2.components.counter.step.view/view)
 
 ;;;; Dividers
-(def divider-label quo2.components.dividers.divider-label/divider-label)
+(def divider-label quo2.components.dividers.divider-label.view/view)
 (def new-messages quo2.components.dividers.new-messages/new-messages)
 (def divider-date quo2.components.dividers.date/date)
 (def strength-divider quo2.components.dividers.strength-divider.view/view)
@@ -187,6 +195,7 @@
 
 ;;;; Dropdowns
 (def dropdown quo2.components.dropdowns.dropdown/dropdown)
+(def network-dropdown quo2.components.dropdowns.network-dropdown.view/view)
 
 ;;;; Empty State
 (def empty-state quo2.components.empty-state.empty-state.view/empty-state)
@@ -227,6 +236,7 @@
 ;;;; List items
 (def account-list-card quo2.components.list-items.account-list-card.view/view)
 (def channel-list-item quo2.components.list-items.channel/list-item)
+(def dapp quo2.components.list-items.dapp.view/view)
 (def menu-item quo2.components.list-items.menu-item/menu-item)
 (def preview-list quo2.components.list-items.preview-list/preview-list)
 (def user-list quo2.components.list-items.user-list/user-list)
@@ -238,7 +248,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 +323,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]
@@ -15,12 +17,13 @@
     [quo2.components.colors.color-picker.component-spec]
     [quo2.components.counter.counter.component-spec]
     [quo2.components.counter.step.component-spec]
-    [quo2.components.dividers.divider-label-component-spec]
+    [quo2.components.dividers.divider-label.component-spec]
     [quo2.components.dividers.strength-divider.component-spec]
     [quo2.components.drawers.action-drawers.component-spec]
     [quo2.components.drawers.documentation-drawers.component-spec]
     [quo2.components.drawers.drawer-buttons.component-spec]
     [quo2.components.drawers.permission-context.component-spec]
+    [quo2.components.dropdowns.network-dropdown.component-spec]
     [quo2.components.gradient.gradient-cover.component-spec]
     [quo2.components.graph.wallet-graph.component-spec]
     [quo2.components.inputs.input.component-spec]
@@ -33,6 +36,7 @@
     [quo2.components.links.url-preview-list.component-spec]
     [quo2.components.links.url-preview.component-spec]
     [quo2.components.list-items.community.component-spec]
+    [quo2.components.list-items.dapp.component-spec]
     [quo2.components.list-items.token-value.component-spec]
     [quo2.components.markdown.text-component-spec]
     [quo2.components.markdown.list.component-spec]
@@ -52,8 +56,9 @@
     [quo2.components.settings.category.component-spec]
     [quo2.components.share.share-qr-code.component-spec]
     [quo2.components.tags.status-tags-component-spec]
-    [quo2.components.wallet.account-overview.component-spec]
     [quo2.components.wallet.account-card.component-spec]
+    [quo2.components.wallet.account-overview.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/quo2/foundations/resources.cljs

@@ -28,3 +28,7 @@
   {:ethereum (js/require "../resources/images/tokens/mainnet/ETH-network.png")
    :optimism (js/require "../resources/images/tokens/mainnet/OP.png")
    :arbitrum (js/require "../resources/images/tokens/mainnet/ARB.png")})
+
+(defn get-network
+  [n]
+  (get networks n))

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_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

@@ -11,7 +11,7 @@
   (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

src/status_im2/common/contact_list/view.cljs

@@ -3,4 +3,4 @@
 
 (defn contacts-section-header
   [{:keys [title]}]
-  [quo/divider-label {:label title}])
+  [quo/divider-label title])

src/status_im2/common/home/actions/view.cljs

@@ -189,7 +189,7 @@
 
 (defn view-profile-entry
   [chat-id]
-  (entry {:icon                :i/friend
+  (entry {:icon                :i/profile
           :label               (i18n/label :t/view-profile)
           :on-press            #(show-profile-action chat-id)
           :danger?             false

src/status_im2/common/home/banner/style.cljs

@@ -17,6 +17,10 @@
   [scroll-shared-value]
   (reanimated/interpolate scroll-shared-value [0 max-scroll] [0 (- max-scroll)] :clamp))
 
+(defn- animated-card-translation-y-reverse
+  [scroll-shared-value]
+  (reanimated/interpolate scroll-shared-value [0 max-scroll] [0 (+ max-scroll)] :clamp))
+
 (defn banner-card-blur-layer
   [scroll-shared-value]
   (reanimated/apply-animations-to-style
@@ -30,13 +34,15 @@
     :height   (+ (safe-area/get-top) 244)}))
 
 (defn banner-card-hiding-layer
-  []
-  {:z-index     2
-   :position    :absolute
-   :top         0
-   :right       0
-   :left        0
-   :padding-top (safe-area/get-top)})
+  [scroll-shared-value]
+  (reanimated/apply-animations-to-style
+   {:transform [{:translate-y (animated-card-translation-y-reverse scroll-shared-value)}]}
+   {:z-index     2
+    :position    :absolute
+    :top         0
+    :right       0
+    :left        0
+    :padding-top (safe-area/get-top)}))
 
 (def animated-banner-card-container {:overflow :hidden})
 

src/status_im2/common/home/banner/view.cljs

@@ -24,7 +24,7 @@
     (oops/ocall! scroll-ref "scrollToOffset" #js {:offset 0})))
 
 (defn- banner-card-blur-layer
-  [scroll-shared-value]
+  [scroll-shared-value child]
   (let [open-sheet? (-> (rf/sub [:bottom-sheet]) :sheets seq)]
     [reanimated/view {:style (style/banner-card-blur-layer scroll-shared-value)}
      [blur/view
@@ -33,12 +33,13 @@
        :blur-type     (theme/theme-value (if platform/ios? :light :xlight) :dark)
        :overlay-color (if open-sheet?
                         (colors/theme-colors colors/white colors/neutral-95-opa-70)
-                        (theme/theme-value nil colors/neutral-95-opa-70))}]]))
+                        (theme/theme-value nil colors/neutral-95-opa-70))}
+      child]]))
 
 (defn- banner-card-hiding-layer
   [{:keys [title-props card-props scroll-shared-value]}]
   (let [customization-color (rf/sub [:profile/customization-color])]
-    [rn/view {:style (style/banner-card-hiding-layer)}
+    [reanimated/view {:style (style/banner-card-hiding-layer scroll-shared-value)}
      [common.home/top-nav {:type :grey}]
      [common.home/title-column (assoc title-props :customization-color customization-color)]
      [rn/view {:style style/animated-banner-card-container}
@@ -65,8 +66,8 @@
 (defn animated-banner
   [{:keys [scroll-ref tabs selected-tab on-tab-change scroll-shared-value content customization-color]}]
   [:<>
-   [:f> banner-card-blur-layer scroll-shared-value]
-   [:f> banner-card-hiding-layer (assoc content :scroll-shared-value scroll-shared-value)]
+   [:f> banner-card-blur-layer scroll-shared-value
+    [:f> banner-card-hiding-layer (assoc content :scroll-shared-value scroll-shared-value)]]
    [:f> banner-card-tabs-layer
     {:scroll-shared-value scroll-shared-value
      :selected-tab        selected-tab

src/status_im2/common/home/view.cljs

@@ -102,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/resources.cljs

@@ -52,6 +52,7 @@
 (def mock-images
   {:diamond              (js/require "../resources/images/mock2/diamond.png")
    :coinbase             (js/require "../resources/images/mock2/coinbase.png")
+   :coin-gecko           (js/require "../resources/images/mock2/coin-gecko.png")
    :collectible          (js/require "../resources/images/mock2/collectible.png")
    :contact              (js/require "../resources/images/mock2/contact.png")
    :community-banner     (js/require "../resources/images/mock2/community-banner.png")

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

@@ -69,7 +69,8 @@
       {: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,8 +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])
-    [reanimated/view
-     {:style (style/shell-container height y-container)}
+    [:<>
      [reanimated/view
       {:style (style/shell-button y-shell opacity)}
       [quo/floating-shell-button
@@ -53,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/style.cljs

@@ -3,22 +3,13 @@
 
 (defn container
   []
-  {:margin-top         8
-   :margin-horizontal  8
+  {:margin-horizontal  8
    :padding-vertical   8
    :padding-horizontal 12
    :border-radius      12
    :flex-direction     :row
    :align-items        :center})
 
-(defn timestamp
-  [muted?]
-  {:color       (if muted?
-                  colors/neutral-50
-                  (colors/theme-colors colors/neutral-50 colors/neutral-40))
-   :margin-top  3
-   :margin-left 8})
-
 (def chat-data-container
   {:flex         1
    :margin-left  8

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

@@ -167,36 +167,6 @@
       :accessibility-label :chat-message-text}
      preview-text]))
 
-
-(defn verified-or-contact-icon
-  [{:keys [ens-verified added?]}]
-  (if ens-verified
-    [rn/view {:style {:margin-left 5 :margin-top 4}}
-     [quo/icon :i/verified
-      {:no-color true
-       :size     12
-       :color    (colors/theme-colors colors/success-50 colors/success-60)}]]
-    (when added?
-      [rn/view {:style {:margin-left 5 :margin-top 4}}
-       [quo/icon :i/contact
-        {:no-color true
-         :size     12
-         :color    (colors/theme-colors colors/primary-50 colors/primary-60)}]])))
-
-(defn name-view
-  [display-name contact timestamp muted?]
-  [rn/view {:style {:flex-direction :row}}
-   [quo/text
-    {:weight              :semi-bold
-     :accessibility-label :chat-name-text
-     :style               {:color (when muted? colors/neutral-50)}}
-    display-name]
-   [verified-or-contact-icon contact]
-   [quo/text
-    {:size  :label
-     :style (style/timestamp muted?)}
-    (datetime/to-short-str timestamp)]])
-
 (defn avatar-view
   [{:keys [contact chat-id full-name color muted?]}]
   (if contact ; `contact` is passed when it's not a group chat
@@ -211,7 +181,7 @@
          (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]}]
@@ -244,13 +214,14 @@
         unviewed-messages-count])]))
 
 (defn chat-list-item
-  [{:keys [chat-id group-chat color name timestamp last-message muted]
+  [{:keys [chat-id group-chat color name last-message timestamp muted]
     :as   item}]
-  (let [display-name (if group-chat
-                       name
-                       (first (rf/sub [:contacts/contact-two-names-by-identity chat-id])))
-        contact      (when-not group-chat
-                       (rf/sub [:contacts/contact-by-address chat-id]))]
+  (let [[primary-name secondary-name]
+        (if group-chat
+          [name ""]
+          (rf/sub [:contacts/contact-two-names-by-identity chat-id]))
+        {:keys [ens-verified added?] :as contact} (when-not group-chat
+                                                    (rf/sub [:contacts/contact-by-address chat-id]))]
     [rn/touchable-opacity
      {:style         (style/container)
       :on-press      (open-chat chat-id)
@@ -259,10 +230,17 @@
      [avatar-view
       {:contact   contact
        :chat-id   chat-id
-       :full-name display-name
+       :full-name primary-name
        :color     color
        :muted?    muted}]
      [rn/view {:style style/chat-data-container}
-      [name-view display-name contact timestamp muted]
+      [quo/author
+       {:primary-name   primary-name
+        :secondary-name secondary-name
+        :size           15
+        :verified?      ens-verified
+        :contact?       added?
+        :muted?         muted
+        :time-str       (datetime/to-short-str timestamp)}]
       [last-message-preview group-chat last-message muted]]
      [notification item]]))

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/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/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

@@ -12,10 +12,11 @@
             [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.composer.constants :as composer.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.shell.jump-to.constants :as jump-to.constants]
+            [status-im2.contexts.chat.composer.constants :as composer.constants]
             [status-im2.contexts.chat.messages.navigation.style :as navigation.style]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
@@ -24,7 +25,6 @@
 (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]}]

src/status_im2/contexts/chat/photo_selector/album_selector/view.cljs

@@ -47,8 +47,8 @@
   [{:keys [title]}]
   (when-not (= title no-title)
     [quo/divider-label
-     {:label           title
-      :container-style style/divider}]))
+     {:container-style style/divider}
+     title]))
 
 (defn key-fn
   [item index]

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

@@ -83,14 +83,10 @@
         :on-layout #(on-category-layout name (int (layout-y %)))}
        (when-not (= constants/empty-category-id category-id)
          [quo/divider-label
-          {:container-style  {:padding-left   16
-                              :padding-right  20
-                              :padding-top    6 ; Because of border width of 1
-                              :padding-bottom 7}
-           :label            name
-           :on-press         #(collapse-category community-id category-id collapsed?)
-           :chevron-icon     (if collapsed? :i/chevron-right :i/chevron-down)
-           :chevron-position :left}])
+          {:on-press     #(collapse-category community-id category-id collapsed?)
+           :chevron-icon (if collapsed? :i/chevron-right :i/chevron-down)
+           :chevron      :left}
+          name])
        (when-not collapsed?
          (into [rn/view {:style {:padding-horizontal 8 :padding-bottom 8}}]
                (map #(channel-chat-item community-id community-color %))
@@ -296,8 +292,8 @@
         :blur-type     :transparent
         :overlay-color :transparent}
        [quo/divider-label
-        {:label            label
-         :chevron-position :left}]])))
+        {:chevron :left}
+        label]])))
 
 (defn page-nav-right-section-buttons
   [id]
@@ -367,4 +363,4 @@
                  :customization-color customization-color
                  :label               (i18n/label :t/jump-to)}}
       {:position :absolute
-       :bottom   41}]]))
+       :bottom   34}]]))

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

@@ -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]

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/quo_preview/avatars/account_avatar.cljs

@@ -1,20 +1,14 @@
 (ns status-im2.contexts.quo-preview.avatars.account-avatar
-  (:require [quo2.components.avatars.account-avatar.view :as account-avatar]
-            [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   "Type"
-    :key     :type
+  [{:key     :type
     :type    :select
-    :options [{:key   :default
-               :value "default"}
-              {:key   :watch-only
-               :value "watch only"}]}
-   {:label   "Size"
-    :key     :size
+    :options [{:key :default}
+              {:key :watch-only}]}
+   {:key     :size
     :type    :select
     :options [{:key   16
                :value "16"}
@@ -35,29 +29,12 @@
     :type  :text}
    (preview/customization-color-option)])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:customization-color :purple
                              :size                80
                              :emoji               "🍑"
                              :type                :default})]
     (fn []
-      [rn/view
-       {:style {:margin-bottom 50
-                :padding       16}}
-       [preview/customizer state descriptor]
-       [rn/view
-        {:style {:padding-vertical 60
-                 :align-items      :center}}
-        [account-avatar/view @state]]])))
-
-(defn preview-account-avatar
-  []
-  [rn/view
-   {:style {:flex             1
-            :background-color (colors/theme-colors colors/white colors/neutral-95)}}
-   [rn/flat-list
-    {:flex                         1
-     :keyboard-should-persist-taps :always
-     :header                       [cool-preview]
-     :key-fn                       str}]])
+      [preview/preview-container {:state state :descriptor descriptor}
+       [quo/account-avatar @state]])))

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

@@ -1,34 +1,26 @@
 (ns status-im2.contexts.quo-preview.avatars.channel-avatar
   (: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   "Size:"
-    :key     :size
+  [{:key     :size
     :type    :select
     :options [{:key :size/l :value "Large"}
-              {:key :default :value "Default"}]}
-   {:label "Emoji:"
-    :key   :emoji
-    :type  :text}
-   {:label "Full name:"
-    :key   :full-name
-    :type  :text}
+              {:key :default}]}
+   {:key  :emoji
+    :type :text}
+   {:key  :full-name
+    :type :text}
    (preview/customization-color-option)
-   {:label   "Locked state:"
-    :key     :locked-state
+   {:key     :locked-state
     :type    :select
-    :options [{:key   :not-set
-               :value "Not set"}
-              {:key   :unlocked
-               :value "Unlocked"}
-              {:key   :locked
-               :value "Locked"}]}])
+    :options [{:key :not-set}
+              {:key :unlocked}
+              {:key :locked}]}])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:size                :size/l
                              :locked-state        :not-set
@@ -42,26 +34,8 @@
                                   :unlocked false
                                   :locked   true
                                   nil)]
-        [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-         [rn/view {:style {:padding-bottom 150}}
-          [rn/view {:style {:flex 1}}
-           [preview/customizer state descriptor]]
-          [rn/view
-           {:style {:padding-vertical 60
-                    :flex-direction   :row
-                    :justify-content  :center}}
-           [quo/channel-avatar
-            (assoc @state
-                   :locked?             locked?
-                   :customization-color customization-color)]]]]))))
-
-(defn preview-channel-avatar
-  []
-  [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/channel-avatar
+          (assoc @state
+                 :locked?             locked?
+                 :customization-color customization-color)]]))))

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

@@ -1,59 +1,37 @@
 (ns status-im2.contexts.quo-preview.avatars.group-avatar
-  (:require [quo2.core :as quo2]
-            [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]))
 
 (def descriptor
-  [{:label   "Size"
-    :key     :size
+  [{:key     :size
     :type    :select
-    :options [{:key   20
-               :value 20}
-              {:key   28
-               :value 28}
-              {:key   32
-               :value 32}
-              {:key   48
-               :value 48}
-              {:key   80
-               :value 80}]}
-   {:label "Avatar"
+    :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 :photo1))
 
-(defn cool-preview
+(defn view
   []
-  (let [state (reagent/atom {:theme               :light
-                             :customization-color :blue
-                             :size                20
+  (let [state (reagent/atom {:customization-color :blue
+                             :size                :size/s-20
                              :picture?            false})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:style {:padding-bottom 150}}
-        [rn/view {:style {:flex 1}}
-         [preview/customizer state descriptor]]
-        [rn/view
-         {:style {:padding-vertical 60
-                  :flex-direction   :row
-                  :justify-content  :center}}
-         (let [{:keys [picture?]} @state
-               params             (if picture? (assoc @state :picture avatar) @state)]
-           [quo2/group-avatar params])]]])))
-
-(defn preview-group-avatar
-  []
-  [rn/view
-   {:style {: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}
+       [quo/group-avatar
+        (cond-> @state
+          (:picture? @state)
+          (assoc :picture avatar))]])))

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

@@ -1,59 +1,27 @@
 (ns status-im2.contexts.quo-preview.avatars.icon-avatar
-  (:require [quo2.components.avatars.icon-avatar :as quo2]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
+  (:require [quo2.components.avatars.icon-avatar :as quo]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Size"
-    :key     :size
+  [{:key     :size
     :type    :select
-    :options [{:key   :small
-               :value "Small"}
-              {:key   :medium
-               :value "Medium"}
-              {:key   :big
-               :value "Big"}]}
-   {:label   "Icon"
-    :key     :icon
+    :options [{:key :small}
+              {:key :medium}
+              {:key :big}]}
+   {:key     :icon
     :type    :select
-    :options [{:key   :main-icons/placeholder20
+    :options [{:key   :i/placeholder20
                :value "Placeholder"}
-              {:key   :main-icons/wallet
-               :value "Wallet"}
-              {:key   :main-icons/play
-               :value "Play"}]}
-   {:label   "Color"
-    :key     :color
-    :type    :select
-    :options (map
-              (fn [c]
-                {:key   c
-                 :value c})
-              (keys colors/customization))}])
+              {:key :i/wallet}
+              {:key :i/play}]}
+   (preview/customization-color-option {:key :color})])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:size  :big
-                             :icon  :main-icons/placeholder20
+                             :icon  :i/placeholder20
                              :color :primary})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [preview/customizer state descriptor]
-        [rn/view
-         {:padding-vertical 60
-          :align-items      :center}
-         [quo2/icon-avatar @state]]]])))
-
-(defn preview-icon-avatar
-  []
-  [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}
+       [quo/icon-avatar @state]])))

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

@@ -1,48 +1,29 @@
 (ns status-im2.contexts.quo-preview.avatars.user-avatar
-  (:require [quo2.components.avatars.user-avatar.view :as quo2]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
+  (:require [quo2.components.avatars.user-avatar.view :as quo]
             [reagent.core :as reagent]
             [status-im2.common.resources :as resources]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Size:"
-    :key     :size
+  [{:key     :size
     :type    :select
-    :options [{:key   :big
-               :value "Big"}
-              {:key   :medium
-               :value "Medium"}
-              {:key   :small
-               :value "Small"}
-              {:key   :xs
-               :value "x Small"}
-              {:key   :xxs
-               :value "xx Small"}
-              {:key   :xxxs
-               :value "xxx Small"}]}
-   {:label   "Customization color:"
-    :key     :customization-color
-    :type    :select
-    :options (map (fn [[color-kw _]]
-                    {:key   color-kw
-                     :value (name color-kw)})
-                  colors/customization)}
-   {:label "Online status"
-    :key   :online?
-    :type  :boolean}
-   {:label "Status Indicator"
-    :key   :status-indicator?
-    :type  :boolean}
+    :options [{:key :big}
+              {:key :medium}
+              {:key :small}
+              {:key :xs}
+              {:key :xxs}
+              {:key :xxxs}]}
+   (preview/customization-color-option)
+   {:key  :online?
+    :type :boolean}
+   {:key  :status-indicator?
+    :type :boolean}
    {:label "Identicon Ring (applies only when there's no profile picture)"
     :key   :ring?
     :type  :boolean}
-   {:label "Full name separated by space"
-    :key   :full-name
-    :type  :text}
-   {:label   "Profile Picture"
-    :key     :profile-picture
+   {:key  :full-name
+    :type :text}
+   {:key     :profile-picture
     :type    :select
     :options [{:value "None"
                :key   nil}
@@ -51,7 +32,7 @@
               {:value "pedro.eth"
                :key   (resources/get-mock-image :user-picture-male4)}]}])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:full-name           "A Y"
                              :status-indicator?   true
@@ -59,23 +40,5 @@
                              :size                :medium
                              :customization-color :blue})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [rn/view {:flex 1}
-         [preview/customizer state descriptor]]
-        [rn/view
-         {:padding-vertical 60
-          :flex-direction   :row
-          :justify-content  :center}
-         [quo2/user-avatar @state]]]])))
-
-(defn preview-user-avatar
-  []
-  [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}
+       [quo/user-avatar @state]])))

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

@@ -1,7 +1,5 @@
 (ns status-im2.contexts.quo-preview.avatars.wallet-user-avatar
-  (:require [quo2.components.avatars.wallet-user-avatar :as quo2]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
+  (:require [quo2.components.avatars.wallet-user-avatar :as quo]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
@@ -12,46 +10,21 @@
    {:label "Last name"
     :key   :l-name
     :type  :text}
-   {:label   "Size"
-    :key     :size
+   {:key     :size
     :type    :select
-    :options [{:key   :small
-               :value "Small"}
-              {:key   :medium
-               :value "Medium"}
-              {:key   :large
-               :value "Large"}
+    :options [{:key :small}
+              {:key :medium}
+              {:key :large}
               {:key   :x-large
                :value "X Large"}]}
-   {:label   "Color"
-    :key     :color
-    :type    :select
-    :options (map
-              (fn [c]
-                {:key   c
-                 :value c})
-              (keys colors/customization))}])
+   (preview/customization-color-option {:key :color})])
 
-(defn cool-preview
+(defn view
   []
   (let [state (reagent/atom {:first-name "empty"
                              :last-name  "name"
                              :size       :x-large
                              :color      :indigo})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [preview/customizer state descriptor]
-        [rn/view {:padding-vertical 60}
-         [quo2/wallet-user-avatar @state]]]])))
-
-(defn preview-wallet-user-avatar
-  []
-  [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}
+       [quo/wallet-user-avatar @state]])))

src/status_im2/contexts/quo_preview/banners/banner.cljs

@@ -1,46 +1,22 @@
 (ns status-im2.contexts.quo-preview.banners.banner
-  (:require [quo2.core :as quo2]
-            [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 "message"
-    :key   :latest-pin-text
-    :type  :text}
-   {:label "number of messages"
-    :key   :pins-count
-    :type  :text}
-   {:label "hide pin icon?"
-    :key   :hide-pin?
-    :type  :boolean}
-  ])
+  [{:key  :latest-pin-text
+    :type :text}
+   {:key  :pins-count
+    :type :text}
+   {:key  :hide-pin?
+    :type :boolean}])
 
-(defn cool-preview
+(defn view
   []
-  (let [state (reagent/atom
-               {:hide-pin?       false
-                :pins-count      2
-                :latest-pin-text "Be respectful of fellow community members, even if they"})]
+  (let [state (reagent/atom {:hide-pin? false
+                             :pins-count 2
+                             :latest-pin-text
+                             "Be respectful of fellow community members, even if they"})]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [rn/view {:flex 1}
-         [preview/customizer state descriptor]]
-        [rn/view
-         {:padding-vertical 60
-          :flex-direction   :row
-          :justify-content  :center}
-         [quo2/banner @state]]]])))
-
-(defn preview-banner
-  []
-  [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}
+       [quo/banner @state]])))

src/status_im2/contexts/quo_preview/bottom_sheet/bottom_sheet.cljs

@@ -1,64 +0,0 @@
-(ns status-im2.contexts.quo-preview.bottom-sheet.bottom-sheet
-  (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
-            [re-frame.core :as re-frame]
-            [react-native.core :as rn]
-            [reagent.core :as reagent]
-            [status-im2.contexts.quo-preview.preview :as preview]))
-
-(def descriptor
-  [{:label "Show handle:"
-    :key   :show-handle?
-    :type  :boolean}
-   {:label "Backdrop dismiss:"
-    :key   :backdrop-dismiss?
-    :type  :boolean}
-   {:label "Expendable:"
-    :key   :expandable?
-    :type  :boolean}
-   {:label "Disable drag:"
-    :key   :disable-drag?
-    :type  :boolean}])
-
-(defn bottom-sheet-content
-  []
-  [rn/view
-   {:style {:justify-content :center
-            :align-items     :center}}
-   [quo/button {:on-press #(do (re-frame/dispatch [:hide-bottom-sheet]))} "Close bottom sheet"]
-
-   [quo/text {:style {:padding-top 20}} "Hello world!"]])
-
-(defn cool-preview
-  []
-  (let [state                (reagent/atom {:show-handle?      true
-                                            :backdrop-dismiss? true
-                                            :expandable?       true
-                                            :disable-drag?     false})
-        on-bottom-sheet-open (fn []
-                               (re-frame/dispatch [:show-bottom-sheet
-                                                   (merge
-                                                    {:content bottom-sheet-content}
-                                                    @state)]))]
-    (fn []
-      [rn/view
-       {:style {:margin-bottom 50
-                :padding       16}}
-       [preview/customizer state descriptor]
-       [:<>
-        [rn/view
-         {:style {:align-items :center
-                  :padding     16}}
-
-         [quo/button {:on-press on-bottom-sheet-open} "Open bottom sheet"]]]])))
-
-(defn preview-bottom-sheet
-  []
-  [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}]])

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

@@ -1,33 +1,22 @@
 (ns status-im2.contexts.quo-preview.buttons.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]
-            [status-im2.common.resources :as resources]))
+            [status-im2.common.resources :as resources]
+            [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Type:"
-    :key     :type
+  [{:key     :type
     :type    :select
-    :options [{:key   :primary
-               :value "Primary"}
-              {:key   :positive
-               :value "Positive"}
-              {:key   :grey
-               :value "Grey"}
-              {:key   :dark-grey
-               :value "Dark Grey"}
-              {:key   :outline
-               :value "Outline"}
-              {:key   :ghost
-               :value "Ghost"}
-              {:key   :danger
-               :value "Danger"}
-              {:key   :black
-               :value "Black"}]}
-   {:label   "Size:"
-    :key     :size
+    :options [{:key :primary}
+              {:key :positive}
+              {:key :grey}
+              {:key :dark-grey}
+              {:key :outline}
+              {:key :ghost}
+              {:key :danger}
+              {:key :black}]}
+   {:key     :size
     :type    :select
     :options [{:key   56
                :value "56"}
@@ -37,40 +26,25 @@
                :value "32"}
               {:key   24
                :value "24"}]}
-   {:label   "Background:"
-    :key     :background
+   {:key     :background
     :type    :select
-    :options [{:key   :blur
-               :value "Blur"}
-              {:key   :photo
-               :value "Photo"}]}
-   {:label "Icon Only?:"
-    :key   :icon-only?
-    :type  :boolean}
-   {:label "show icon-top "
-    :key   :icon-top
-    :type  :boolean}
-   {:label "show icon-right"
-    :key   :icon-right
-    :type  :boolean}
-   {:label "show icon-left"
-    :key   :icon-left
-    :type  :boolean}
-   {:label "Disabled?:"
-    :key   :disabled?
-    :type  :boolean}
-   {:label "Label"
-    :key   :label
-    :type  :text}
-   {:label   "Customization color:"
-    :key     :customization-color
-    :type    :select
-    :options (map (fn [color]
-                    (let [k (get color :name)]
-                      {:key k :value k}))
-                  (quo/picker-colors))}])
+    :options [{:key :blur}
+              {:key :photo}]}
+   {:key  :icon-only?
+    :type :boolean}
+   {:key  :icon-top
+    :type :boolean}
+   {:key  :icon-right
+    :type :boolean}
+   {:key  :icon-left
+    :type :boolean}
+   {:key  :disabled?
+    :type :boolean}
+   {:key  :label
+    :type :text}
+   (preview/customization-color-option)])
 
-(defn cool-preview
+(defn view
   []
   (let [state      (reagent/atom {:label               "Press Me"
                                   :size                40
@@ -82,46 +56,31 @@
         icon-top   (reagent/cursor state [:icon-top])
         icon-only? (reagent/cursor state [:icon-only?])]
     (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [rn/view {:flex 1}
-         [preview/customizer state descriptor]]
-        [rn/view
-         {:padding-vertical 60
-          :flex-direction   :row
-          :justify-content  :center}
-         (when (= :photo (:background @state))
-           [rn/image
-            {:source (resources/get-mock-image :community-cover)
-             :style  {:position :absolute
-                      :top      0
-                      :left     0
-                      :right    0
-                      :bottom   0}}])
-         [quo/button
-          (merge (dissoc @state
-                  :theme
-                  :customization-color
-                  :icon-left
-                  :icon-right)
-                 {:background (:background @state)
-                  :on-press   #(println "Hello world!")}
-                 (when (= :primary (:type @state)) {:customization-color (:customization-color @state)})
-                 (when @icon-top
-                   {:icon-top :i/placeholder})
-                 (when @icon-left
-                   {:icon-left :i/placeholder})
-                 (when @icon-right
-                   {:icon-right :i/placeholder}))
-          (if @icon-only? :i/placeholder @label)]]]])))
-
-(defn preview-button
-  []
-  [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
+        :component-container-style {:align-items :center}}
+       (when (= :photo (:background @state))
+         [rn/image
+          {:source (resources/get-mock-image :community-cover)
+           :style  {:position :absolute
+                    :top      0
+                    :left     0
+                    :right    0
+                    :bottom   0}}])
+       [quo/button
+        (merge (dissoc @state
+                :theme
+                :customization-color
+                :icon-left
+                :icon-right)
+               {:background (:background @state)
+                :on-press   #(println "Hello world!")}
+               (when (= :primary (:type @state)) {:customization-color (:customization-color @state)})
+               (when @icon-top
+                 {:icon-top :i/placeholder})
+               (when @icon-left
+                 {:icon-left :i/placeholder})
+               (when @icon-right
+                 {:icon-right :i/placeholder}))
+        (if @icon-only? :i/placeholder @label)]])))