list high level deps

* feat: wallet create account

android/app/build.gradle

@@ -4,6 +4,8 @@ apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.grad
 
 import com.android.build.OutputFile
 import com.sun.org.apache.xalan.internal.xsltc.compiler.Copy
+import groovy.json.JsonBuilder
+import groovy.json.JsonSlurper
 
 /**
  * The react.gradle file registers a task for each build variant:
@@ -463,6 +465,32 @@ task hemroidBuild(type: Exec) {
     executable execPath
 }
 
+// Add this task definition at the bottom of your build.gradle file
+task printAllDependencies {
+    doLast {
+        println "Listing all dependencies for project..."
+
+        // Iterate through all configurations
+        configurations.all { config ->
+            int dependencyCount = 0
+
+            // Count the dependencies for this configuration
+            config.allDependencies.each { dependency ->
+                dependencyCount++
+            }
+
+            // Print the configuration name and dependency count
+            println "Configuration: ${config.name} (Total Dependencies: ${dependencyCount})"
+
+            // Iterate through all dependencies in the current configuration
+            config.allDependencies.each { dependency ->
+                println "  - ${dependency.group}:${dependency.name}:${dependency.version}"
+            }
+        }
+    }
+}
+
+
 preBuild.dependsOn hemroidBuild
 
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

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

@@ -1,35 +1,43 @@
 (ns quo2.components.avatars.group-avatar.view
   (:require [quo2.components.icon :as icon]
-            [quo2.theme :as theme]
+            [quo2.theme :as quo.theme]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [react-native.fast-image :as fast-image]
             [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
-               customization-color :blue}}]
-    (let [icon-size (get-in sizes [size :icon])]
+  (fn [{:keys [size theme customization-color picture icon-name]
+        :or   {size                :size/s-20
+               customization-color :blue
+               picture             nil
+               icon-name           :i/group}}]
+    (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}}]
-         [icon/icon :i/members
+           :style  {:width  container-size
+                    :height container-size}}]
+         [icon/icon icon-name
           {:size  icon-size
            :color colors/white-opa-70}])])))
 
-(def view (theme/with-theme view-internal))
+(def view (quo.theme/with-theme view-internal))

src/quo2/components/avatars/icon_avatar.cljs

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

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

@@ -14,6 +14,10 @@
             :status-indicator        12
             :status-indicator-border 2
             :font-size               :paragraph-2}
+   28      {:dimensions              28
+            :status-indicator        0
+            :status-indicator-border 0
+            :font-size               :paragraph-2}
    :xs     {:dimensions              24
             :status-indicator        0
             :status-indicator-border 0

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

@@ -99,6 +99,10 @@
                        :ring?            ring?})}
                (:uri profile-picture)
                profile-picture
+
+               (number? profile-picture)
+               profile-picture
+
                :else {:uri profile-picture})}])]))
 
 (def user-avatar (quo2.theme/with-theme user-avatar-internal))

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

@@ -24,7 +24,7 @@
     :icon-top  :icon-keyword
     :icon-left :icon-keyword
     :icon-right  :icon-keyword}
-    :customization-color keyword or hexstring 
+    :customization-color keyword or hexstring
     :theme :light/:dark
    only icon
    [button {:icon-only? true} :i/close-circle]"

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

@@ -26,7 +26,8 @@
                  track-icon
                  disabled?
                  customization-color
-                 size]}]
+                 size
+                 container-style]}]
       (let [x-pos             (reanimated/use-shared-value 0)
             dimensions        (partial utils/get-dimensions
                                        (or @track-width constants/default-width)
@@ -49,7 +50,8 @@
                                             sliding-complete?)}
          [reanimated/view
           {:test-ID   :slide-button-track
-           :style     (style/track disabled? customization-color (dimensions :track-height))
+           :style     (merge (style/track disabled? customization-color (dimensions :track-height))
+                             container-style)
            :on-layout (when-not (some? @track-width)
                         on-track-layout)}
           [reanimated/view {:style (style/track-cover interpolate-track)}

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/colors/color_picker/style.cljs

@@ -2,8 +2,7 @@
   (:require [quo2.foundations.colors :as colors]))
 
 (def color-picker-container
-  {:flex            1
-   :flex-direction  :row
+  {:flex-direction  :row
    :flex-wrap       :wrap
    :justify-content :space-between})
 

src/quo2/components/common/not_implemented/style.cljs

@@ -0,0 +1,12 @@
+(ns quo2.components.common.not-implemented.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn text
+  [blur? theme]
+  {:border-color :red
+   :border-width 1
+   :color        (if blur?
+                   colors/white
+                   (colors/theme-colors colors/neutral-100
+                                        colors/white
+                                        theme))})

src/quo2/components/common/not_implemented/view.cljs

@@ -0,0 +1,11 @@
+(ns quo2.components.common.not-implemented.view
+  (:require [react-native.core :as rn]
+            [quo2.theme :as quo.theme]
+            [quo2.components.common.not-implemented.style :as style]))
+
+(defn- view-internal
+  [{:keys [blur? theme]}]
+  [rn/text {:style (style/text blur? theme)}
+   "not implemented"])
+
+(def view (quo.theme/with-theme view-internal))

src/quo2/components/community/banner/style.cljs

@@ -1,13 +1,11 @@
 (ns quo2.components.community.banner.style
-  (:require [quo2.foundations.colors :as colors]))
+  (:require [quo2.foundations.colors :as colors]
+            [quo2.foundations.shadows :as shadows]))
 
 (defn community-card
   [theme]
-  {:shadow-offset     {:width 0 :height 2}
-   :shadow-radius     16
-   :shadow-opacity    1
-   :shadow-color      colors/shadow
-   :elevation         1
+  (assoc
+   (shadows/get 2 theme)
    :border-radius     16
    :justify-content   :space-between
    :background-color  (colors/theme-colors colors/white colors/neutral-90 theme)
@@ -16,7 +14,7 @@
    :margin-top        8
    :margin-bottom     8
    :height            56
-   :padding-right     12})
+   :padding-right     12))
 
 (def banner-content
   {:flex           1

src/quo2/components/community/community_list_view.cljs

@@ -16,25 +16,26 @@
            unread-messages?
            unread-mentions-count
            customization-color]}]
-  (cond
-    muted?
-    [icons/icon :i/muted
-     {:container-style {:align-items     :center
-                        :justify-content :center}
-      :resize-mode     :center
-      :size            20
-      :color           (colors/theme-colors
-                        colors/neutral-50
-                        colors/neutral-40
-                        theme)}]
-    (pos? unread-mentions-count)
-    [counter/view
-     {:customization-color customization-color
-      :type                :default}
-     unread-mentions-count]
+  [rn/view {:style style/notification-container}
+   (cond
+     muted?
+     [icons/icon :i/muted
+      {:container-style {:align-items     :center
+                         :justify-content :center}
+       :resize-mode     :center
+       :size            20
+       :color           (colors/theme-colors
+                         colors/neutral-50
+                         colors/neutral-40
+                         theme)}]
+     (pos? unread-mentions-count)
+     [counter/view
+      {:customization-color customization-color
+       :type                :default}
+      unread-mentions-count]
 
-    unread-messages?
-    [unread-grey-dot :unviewed-messages-public]))
+     unread-messages?
+     [unread-grey-dot :unviewed-messages-public])])
 
 (defn- communities-list-view-item-internal
   [{:keys [theme customization-color] :as props}

src/quo2/components/community/style.cljs

@@ -4,18 +4,14 @@
 
 (defn community-card
   [radius theme]
-  {:shadow-offset    {:width  0
-                      :height 2}
-   :shadow-radius    radius
-   :shadow-opacity   1
-   :shadow-color     colors/shadow
-   :elevation        1
+  (assoc
+   (shadows/get 2 theme)
    :border-radius    radius
    :justify-content  :space-between
    :background-color (colors/theme-colors
                       colors/white
                       colors/neutral-90
-                      theme)})
+                      theme)))
 
 (def detail-container
   {:flex 1})
@@ -252,3 +248,8 @@
    :margin-top       margin-top})
 
 (def loading-card-content-container {:margin-top 36})
+
+(def notification-container
+  {:width       20
+   :display     :flex
+   :align-items :center})

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.view :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/view
+        {:type      :network
+         :list-size (count networks)
+         :size      :size/s-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/gradient/gradient_cover/view.cljs

@@ -5,7 +5,7 @@
             [react-native.linear-gradient :as linear-gradient]))
 
 (defn- view-internal
-  [{:keys [customization-color] :or {customization-color :blue}}]
+  [{:keys [customization-color container-style] :or {customization-color :blue}}]
   (let [color-top    (colors/custom-color customization-color 50 20)
         color-bottom (colors/custom-color customization-color 50 0)]
     [linear-gradient/linear-gradient
@@ -13,6 +13,6 @@
       :colors              [color-top color-bottom]
       :start               {:x 0 :y 0}
       :end                 {:x 0 :y 1}
-      :style               style/root-container}]))
+      :style               (merge style/root-container container-style)}]))
 
 (def view (quo.theme/with-theme view-internal))

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/inputs/title_input/style.cljs

@@ -40,6 +40,7 @@
 (defn title-text
   [disabled? blur? theme]
   {:text-align-vertical :bottom
+   :padding             0
    :color               (if disabled?
                           (get-disabled-color blur? theme)
                           (colors/theme-colors colors/neutral-100 colors/white theme))})
@@ -50,7 +51,6 @@
 
 (def container
   {:flex-direction  :row
-   :flex            1
    :justify-content :center
    :align-items     :center})
 

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

@@ -19,7 +19,8 @@
            placeholder
            max-length
            default-value
-           theme]
+           theme
+           container-style]
     :or   {max-length    0
            auto-focus    false
            default-value ""}}]
@@ -31,7 +32,7 @@
                       (on-change-text v)))]
     (fn [{:keys [customization-color disabled?]}]
       [rn/view
-       {:style style/container}
+       {:style (merge style/container container-style)}
        [rn/view {:style style/text-input-container}
         [rn/text-input
          {:style

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

@@ -1,148 +0,0 @@
-(ns quo2.components.list-items.preview-list
-  (:require [quo2.components.avatars.user-avatar.view :as user-avatar]
-            [quo2.components.icon :as quo2.icons]
-            [quo2.components.markdown.text :as quo2.text]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [react-native.fast-image :as fast-image]
-            [react-native.hole-view :as hole-view]
-            [quo2.theme :as quo.theme]))
-
-(def params
-  {32 {:border-radius {:circular 16 :rounded 10}
-       :hole-radius   {:circular 18 :rounded 12}
-       :margin-left   -8
-       :hole-size     36
-       :hole-x        22
-       :hole-y        -2}
-   24 {:border-radius {:circular 12 :rounded 8}
-       :hole-radius   {:circular 13 :rounded 9}
-       :margin-left   -4
-       :hole-size     26
-       :hole-x        19
-       :hole-y        -1}
-   16 {:border-radius {:circular 8 :rounded 8}
-       :hole-radius   {:circular 9 :rounded 9}
-       :margin-left   -4
-       :hole-size     18
-       :hole-x        11
-       :hole-y        -1}})
-
-;; TODO - Add avatar components for other types once implemented
-(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}}]))
-
-(defn list-item
-  [index type size item list-size margin-left
-   hole-size hole-radius hole-x hole-y border-radius]
-  (let [last-item? (= index (- list-size 1))]
-    [hole-view/hole-view
-     {:style {:margin-left (if (= index 0) 0 margin-left)}
-      :holes (if last-item?
-               []
-               [{:x            hole-x
-                 :y            hole-y
-                 :width        hole-size
-                 :height       hole-size
-                 :borderRadius hole-radius}])}
-     [avatar item type size border-radius]]))
-
-(defn get-overflow-color
-  [transparent? transparent-color light-color dark-color theme]
-  (if transparent?
-    transparent-color
-    (colors/theme-colors light-color dark-color theme)))
-
-(defn overflow-label
-  [{:keys [label size transparent? border-radius margin-left theme more-than-99-label]}]
-  [rn/view
-   {:style {:width            size
-            :height           size
-            :margin-left      margin-left
-            :border-radius    border-radius
-            :justify-content  :center
-            :align-items      :center
-            :background-color (get-overflow-color
-                               transparent?
-                               colors/white-opa-10
-                               colors/neutral-20
-                               colors/neutral-70
-                               theme)}}
-   (if (= size 16)
-     [quo2.icons/icon :i/more
-      {:size  12
-       :color (get-overflow-color
-               transparent?
-               colors/white-opa-70
-               colors/neutral-50
-               colors/neutral-40
-               theme)}]
-     [quo2.text/text
-      {:size   (if (= size 32) :paragraph-2 :label)
-       :weight :medium
-       :style  {:color       (get-overflow-color
-                              transparent?
-                              colors/white-opa-70
-                              colors/neutral-60
-                              colors/neutral-40
-                              theme)
-                :margin-left -2}}
-      ;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+
-      (if (< label 100)
-        (str "+" label)
-        more-than-99-label)])])
-
-(defn border-type
-  [type]
-  (case type
-    (:account :collectible :photo) :rounded
-    :circular))
-
-(defn- preview-list-internal
-  "[preview-list opts items]
-   opts
-   {:type          :user/:community/:account/:token/:collectible/:dapp
-    :size          32/24/16
-    :list-size     override items count in overflow label (optional)
-    :transparent?  overflow-label transparent?}
-   items           preview list items (only 4 items is required for preview)
-  "
-  [{:keys [type size list-size transparent? theme more-than-99-label]} items]
-  (let [items-arr     (into [] items)
-        list-size     (or list-size (count items))
-        margin-left   (get-in params [size :margin-left])
-        hole-size     (get-in params [size :hole-size])
-        border-radius (get-in params [size :border-radius (border-type type)])
-        hole-radius   (get-in params [size :hole-radius (border-type type)])
-        hole-x        (get-in params [size :hole-x])
-        hole-y        (get-in params [size :hole-y])]
-    [rn/view {:style {:flex-direction :row}}
-     (for [index (range (if (> list-size 4) 3 list-size))]
-       ^{:key (str index list-size)}
-       [list-item index type size (get items-arr index) list-size
-        margin-left hole-size hole-radius hole-x hole-y border-radius])
-     (when (> list-size 4)
-       [overflow-label
-        {:label              (- list-size 3)
-         :size               size
-         :transparent?       transparent?
-         :border-radius      border-radius
-         :margin-left        margin-left
-         :theme              theme
-         :more-than-99-label more-than-99-label}])]))
-
-(def preview-list (quo.theme/with-theme preview-list-internal))

src/quo2/components/list_items/preview_list/properties.cljs

@@ -0,0 +1,49 @@
+(ns quo2.components.list-items.preview-list.properties)
+
+(def ^:private types-for-squared-border #{:accounts :collectibles})
+
+(defn border-type
+  [type]
+  (if (types-for-squared-border type) :squared :rounded))
+
+(def sizes
+  {:size/s-32 {:size             32
+               :user-avatar-size :small
+               :border-radius    {:rounded 16 :squared 10}
+               :hole-radius      {:rounded 18 :squared 12}
+               :margin-left      -8
+               :hole-size        36
+               :hole-x           22
+               :hole-y           -2}
+   :size/s-24 {:size             24
+               :user-avatar-size :xs
+               :border-radius    {:rounded 12 :squared 8}
+               :hole-radius      {:rounded 13 :squared 9}
+               :margin-left      -4
+               :hole-size        26
+               :hole-x           19
+               :hole-y           -1}
+   :size/s-20 {:size             20
+               :user-avatar-size :xxs
+               :border-radius    {:rounded 10 :squared 8}
+               :hole-radius      {:rounded 11 :squared 9}
+               :margin-left      -4
+               :hole-size        22
+               :hole-x           15
+               :hole-y           -1}
+   :size/s-16 {:size             16
+               :user-avatar-size :xxxs
+               :border-radius    {:rounded 8 :squared 8}
+               :hole-radius      {:rounded 9 :squared 9}
+               :margin-left      -4
+               :hole-size        18
+               :hole-x           11
+               :hole-y           -1}
+   :size/s-14 {:size             14
+               :user-avatar-size :xxxs
+               :border-radius    {:rounded 7 :squared 7}
+               :hole-radius      {:rounded 8 :squared 8}
+               :margin-left      -2
+               :hole-size        16
+               :hole-x           11
+               :hole-y           -1}})

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

@@ -0,0 +1,150 @@
+(ns quo2.components.list-items.preview-list.view
+  (:require [quo2.components.avatars.account-avatar.view :as account-avatar]
+            [quo2.components.avatars.user-avatar.view :as user-avatar]
+            [quo2.components.icon :as quo2.icons]
+            [quo2.components.markdown.text :as quo2.text]
+            [quo2.foundations.colors :as colors]
+            [quo2.theme :as quo.theme]
+            [quo2.components.list-items.preview-list.properties :as properties]
+            [react-native.core :as rn]
+            [react-native.fast-image :as fast-image]
+            [react-native.hole-view :as hole-view]))
+
+;; This overflow item needs to be cleaned up once the "number tag" component is implemented
+;; https://github.com/status-im/status-mobile/issues/17045
+(defn get-overflow-color
+  [blur? blur-light-color blur-dark-color light-color dark-color theme]
+  (if blur?
+    (colors/theme-colors blur-light-color blur-dark-color theme)
+    (colors/theme-colors light-color dark-color theme)))
+
+(def more-icon-for-sizes #{16 14})
+
+(defn overflow-label
+  [{:keys [label size blur? border-radius margin-left theme more-than-99-label]}]
+  [rn/view
+   {:style {:width            size
+            :height           size
+            :margin-left      margin-left
+            :border-radius    border-radius
+            :justify-content  :center
+            :align-items      :center
+            :background-color (get-overflow-color
+                               blur?
+                               colors/neutral-80-opa-5
+                               colors/white-opa-5
+                               colors/neutral-20
+                               colors/neutral-90
+                               theme)}}
+   (if (more-icon-for-sizes size)
+     [quo2.icons/icon :i/more
+      {:size  12
+       :color (get-overflow-color
+               blur?
+               colors/neutral-80-opa-70
+               colors/white-opa-70
+               colors/neutral-50
+               colors/neutral-40
+               theme)}]
+     [quo2.text/text
+      {:size   (if (= size 32) :paragraph-2 :label)
+       :weight :medium
+       :style  {:color       (get-overflow-color
+                              blur?
+                              colors/neutral-80-opa-70
+                              colors/white-opa-70
+                              colors/neutral-50
+                              colors/neutral-40
+                              theme)
+                :margin-left -2}}
+      ;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+
+      (if (< label 100)
+        (str "+" label)
+        more-than-99-label)])])
+
+(defn- preview-item
+  [{:keys [item type size-key]}]
+  (let [size             (get-in properties/sizes [size-key :size])
+        user-avatar-size (get-in properties/sizes [size-key :user-avatar-size])
+        border-radius    (get-in properties/sizes
+                                 [size-key :border-radius (properties/border-type type)])]
+    (case type
+      :user                        [user-avatar/user-avatar
+                                    (merge {:ring?             false
+                                            :status-indicator? false
+                                            :size              user-avatar-size}
+                                           item)]
+
+      :accounts                    [account-avatar/view
+                                    (merge item {:size size})]
+
+      (:communities :collectibles) [fast-image/fast-image
+                                    {:source (:source item)
+                                     :style  {:width         size
+                                              :height        size
+                                              :border-radius border-radius}}]
+
+      (:tokens :network :dapps)    [fast-image/fast-image
+                                    {:source (:source item)
+                                     :style  {:width         size
+                                              :height        size
+                                              :border-radius border-radius}}]
+      nil)))
+
+(defn- list-item
+  [{:keys [index type size-key item number]}]
+  (let [last-item?                               (= index (dec number))
+        border-type                              (properties/border-type type)
+        {margin-left               :margin-left
+         hole-size                 :hole-size
+         hole-x                    :hole-x
+         hole-y                    :hole-y
+         {hole-radius border-type} :hole-radius} (properties/sizes size-key)]
+    [hole-view/hole-view
+     {:style {:margin-left (if (= index 0) 0 margin-left)}
+      :holes (if last-item?
+               []
+               [{:x            hole-x
+                 :y            hole-y
+                 :width        hole-size
+                 :height       hole-size
+                 :borderRadius hole-radius}])}
+     [preview-item
+      {:item     item
+       :type     type
+       :size-key size-key}]]))
+
+(defn- view-internal
+  "[preview-list opts items]
+   opts
+   {:type          :user/:communities/:accounts/:tokens/:collectibles/:dapps/:network
+    :size          :size/s-32 | :size/s-24 | :size/s-20 | :size/s-16 | :size/s-14
+    :number        number of items in the list (optional)
+    :blur?         overflow-label blur?}
+   items           preview list items (only 4 items is required for preview)
+  "
+  [{:keys [type size number blur? theme more-than-99-label]} items]
+  (let [size-key      (if (contains? properties/sizes size) size :size/s-24)
+        number        (or number (count items))
+        margin-left   (get-in properties/sizes [size-key :margin-left])
+        border-radius (get-in properties/sizes [size-key :border-radius (properties/border-type type)])]
+    [rn/view {:style {:flex-direction :row}}
+     (for [index (range (if (> number 4) 3 number))]
+       ^{:key (str index number)}
+       [list-item
+        {:index    index
+         :type     type
+         :size-key size-key
+         :item     (get (vec items) index)
+         :number   number}])
+     (when (> number 4)
+       [overflow-label
+        {:label              (- number 3)
+         :size               (get-in properties/sizes [size-key :size])
+         :blur?              blur?
+         :border-radius      border-radius
+         :margin-left        margin-left
+         :theme              theme
+         :more-than-99-label more-than-99-label}])]))
+
+(def view (quo.theme/with-theme view-internal))

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

@@ -34,7 +34,7 @@
                    :align-items    :center
                    :flex           1}}
           [rn/image
-           {:source (resources/tokens token)
+           {:source (resources/get-token token)
             :style  {:width  32
                      :height 32}}]
           [rn/view {:style {:margin-left 8}}

src/quo2/components/loaders/skeleton/view.cljs

@@ -1,46 +0,0 @@
-(ns quo2.components.loaders.skeleton.view
-  (:require [quo2.theme :as theme]
-            [react-native.core :as rn]
-            [quo2.foundations.colors :as colors]
-            [quo2.components.loaders.skeleton.style :as style]
-            [quo2.components.loaders.skeleton.constants :as constants]))
-
-(defn- skeleton-item
-  [index content color]
-  [rn/view {:style (style/container content)}
-   [rn/view {:style (style/avatar color)}]
-   [rn/view {:style style/content-container}
-    [rn/view
-     {:style (style/content-view
-              {:type    (if (= content :list-items) :message :author)
-               :index   index
-               :content content
-               :color   color})}]
-    [rn/view
-     {:style (style/content-view
-              {:type    (if (= content :list-items) :author :message)
-               :index   index
-               :content content
-               :color   color})}]
-    (when (= content :notifications)
-      [rn/view
-       {:style (style/content-view {:type    :message2
-                                    :index   index
-                                    :content content
-                                    :color   color})}])]])
-
-(defn- internal-view
-  [{:keys [content theme blur? parent-height]}]
-  (let [skeleton-height     (get-in constants/layout-dimensions [content :height])
-        number-of-skeletons (int (Math/ceil (/ parent-height skeleton-height)))
-        color               (cond
-                              blur?           colors/white-opa-5
-                              (= theme :dark) colors/neutral-90
-                              :else           colors/neutral-5)]
-    [rn/view {:style {:padding 8}}
-     (doall
-      (for [index (range number-of-skeletons)]
-        ^{:key index}
-        [skeleton-item (mod index 4) content color]))]))
-
-(def view (theme/with-theme internal-view))

src/quo2/components/loaders/skeleton_list/component_spec.cljs

@@ -0,0 +1,26 @@
+(ns quo2.components.loaders.skeleton-list.component-spec
+  (:require [quo2.components.loaders.skeleton-list.view :as skeleton-list]
+            [quo2.foundations.colors :as colors]
+            [test-helpers.component :as h]))
+
+(defn test-skeleton
+  [content animated?]
+  (let [rendered           (h/render [skeleton-list/view
+                                      {:index         0
+                                       :content       content
+                                       :color         colors/neutral-10
+                                       :parent-height 600
+                                       :animated?     animated?}])
+        accessibility-text :skeleton-list]
+    (h/is-truthy (h/get-by-label-text rendered accessibility-text))))
+
+(h/describe "Skeleton tests"
+  (doseq [content   [:messages :notifications :list-items]
+          animated? [true false]]
+    (let [content-str (name content)]
+      (h/test (str "Skeleton :"
+                   content-str
+                   " is "
+                   (if animated? "animated" "static")
+                   " based on animated? " animated?)
+        (test-skeleton content animated?)))))

src/quo2/components/loaders/skeleton_list/constants.cljs

@@ -1,4 +1,4 @@
-(ns quo2.components.loaders.skeleton.constants)
+(ns quo2.components.loaders.skeleton-list.constants)
 
 (def ^:const layout-dimensions
   {:messages      {:height      56