lint

fix: backup-recovery-phrase check item pressability (#19705 )
fix: `backup-recovery-phrase` check item pressability (#19705)
2024-04-19 09:59:09 +04:00 · 2024-04-18 21:33:56 +04:00 · 2024-04-18 19:09:55 +02:00 · 2024-04-18 18:12:29 +03:00 · 2024-04-18 15:31:47 +01:00 · 2024-04-18 16:14:17 +02:00
533 changed files with 7326 additions and 6559 deletions
@@ -35,3 +35,4 @@ LOCAL_PAIRING_ENABLED=1
 TEST_STATEOFUS=1
 FAST_CREATE_COMMUNITY_ENABLED=1
 TEST_NETWORKS_ENABLED=1
+SHOW_NOT_IMPLEMENTED_FEATURES=1
@@ -34,3 +34,6 @@ STICKERS_TEST_ENABLED=1
 LOCAL_PAIRING_ENABLED=1
 FAST_CREATE_COMMUNITY_ENABLED=1
 TEST_NETWORKS_ENABLED=1
+SHOW_NOT_IMPLEMENTED_FEATURES=1
+DELETE_MESSAGE_FOR_ME_UNDO_TIME_LIMIT=10000
+DELETE_MESSAGE_UNDO_TIME_LIMIT=10000
@@ -36,3 +36,4 @@ STICKERS_TEST_ENABLED=1
 LOCAL_PAIRING_ENABLED=1
 FAST_CREATE_COMMUNITY_ENABLED=1
 TEST_NETWORKS_ENABLED=1
+SHOW_NOT_IMPLEMENTED_FEATURES=1
@@ -36,6 +36,12 @@ pipeline {
    ))
  }

+  environment {
+    /* Avoid race conditions with other builds using virtualenv. */
+    VIRTUAL_ENV = "${WORKSPACE_TMP}/venv"
+    PATH = "${VIRTUAL_ENV}/bin:${PATH}"
+  }
+
  stages {
    stage('Fetch') {
      steps { script {
@@ -52,7 +58,8 @@ pipeline {
    stage('Setup') {
      steps { script {
        dir('test/appium') {
-          sh 'pip3 install --user -r requirements.txt'
+          sh "python3 -m venv ${VIRTUAL_ENV}"
+          sh 'pip3 install -r requirements.txt'
        }
      } }
    }
@@ -54,6 +54,12 @@ pipeline {
    ))
  }

+  environment {
+    /* Avoid race conditions with other builds using virtualenv. */
+    VIRTUAL_ENV = "${WORKSPACE_TMP}/venv"
+    PATH = "${VIRTUAL_ENV}/bin:${PATH}"
+  }
+
  stages {
    stage('Prep') {
      steps { script {
@@ -79,7 +85,8 @@ pipeline {
    stage('Setup') {
      steps { script {
        dir('test/appium') {
-          sh 'pip3 install --user -r requirements.txt'
+          sh "python3 -m venv ${VIRTUAL_ENV}"
+          sh 'pip3 install -r requirements.txt'
        }
      } }
    }
@@ -35,6 +35,11 @@ pipeline {
    ))
  }

+  environment {
+    /* Avoid race conditions with other builds using virtualenv. */
+    VIRTUAL_ENV = "${WORKSPACE_TMP}/venv"
+    PATH = "${VIRTUAL_ENV}/bin:${PATH}"
+  }

  stages {
    stage('Prep') {
@@ -51,7 +56,8 @@ pipeline {
    stage('Setup') {
      steps { script {
        dir('test/appium') {
-          sh 'pip3 install --user -r requirements.txt'
+          sh "python3 -m venv ${VIRTUAL_ENV}"
+          sh 'pip3 install -r requirements.txt'
        }
      } }
    }
@@ -8,7 +8,7 @@ The generally accepted requirements for its use are described below:
 - Once a PR is created, it moves to the ```REVIEW``` column where a review will be requested automatically.
 - You can also request a review inside the PR from a particular person if needed.
 - When creating a PR, do not forget to assign it to yourself.
- Also in case the PR adds new functionality, a short description would be appreciated.
+- Also in case the PR adds new functionality, a description **MUST** be added.

 ### What if the work is still in progress?

@@ -28,26 +28,11 @@ Ready for testing, a PR should meet the following criteria:
 4. Has the label: `request-manual-qa` or `skip-manual-qa`.
 5. PRs **MUST** identify what area is affected and should have a description.

-**NOTE:** Make sure that QAs are OK with that
-
-### Adding `skip-manual-qa`
-
- Please ask another team member before adding the `skip-manual-qa` label (PR/Status community/DMs) so that there's a second opinion.
- The PR MUST have a proper reasoning why manual QA is skipped.
- The PR MUST include the steps of testing that has been done by the developer prior to moving it forward.
-**From the perspective of a developer it means that once work on PR is finished:**
-
-1. It should be rebased to the latest `develop`. If there are conflicts - they should be resolved if possible.
-2. If the PR was in the `Contributor` column - it should be moved to `Review` column.
-3. Wait for the review.
-4. Make sure that after review and before requesting manual QA your PR is rebased to current develop.
-5. The PR **MUST** be moved 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. 
-
-6. After that - PR will be taken into manual testing by the QA team.

 ### E2E tests and analyzing the results

+The PR **MUST** be moved 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. 
 This step cannot be skipped. So, at least one comment from the `status-im-auto` bot with results is a prerequisite for moving forward.
 Information on how to analyze tests can be found [here](https://github.com/status-im/status-mobile/blob/develop/doc/how-to-launch-e2e.md).
 Tests might be flaky, as they depend on infrastructure - SauceLabs and Waku.
@@ -59,6 +44,20 @@ Please, respect this rule.**

 ## Testing PR

+### Adding `skip-manual-qa`
+
+**Do not hesitate to use a `skip-manual-qa`** if you're sure that it is a simple flow and you checked it. 
+- Please ask another team member before adding the `skip-manual-qa` label (PR/Status community/DMs) so that there's a second opinion.
+- The PR MUST have a proper reasoning why manual QA is skipped.
+- The PR MUST include the steps of testing that has been done by the developer prior to moving it forward.
+
+**NOTE:** Make sure that QAs are OK with that;
+
+Before merging PRs, please make sure that information is added about how you tested the PRs, that e2s have been passed and their results have been reviewed. 
+
+The QA team appreciates your help!
+
+
 ### Manual testing

 #### Prerequisites for manual testing
@@ -99,7 +98,7 @@ There are three possible scenarios when the design review is completed:
 ---
 **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.
+- 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 (see `skip-manual-qa` label)
 ---        

 #### Why my PR is in `Contributor` column?
@@ -128,3 +128,19 @@ Status-mobile uses `shadow-cljs` for hot reloading changes and uses its own [rel

 ### Solution
 Open react native's [In-App Developer Menu](https://reactnative.dev/docs/debugging#accessing-the-in-app-developer-menu) and press "Disable Fast Refresh" or "Disable Hot Reloading"
+
+# App crashing after running `make run-ios`
+
+### Cause
+It's possible that installing XCode from a `.xip` file might cause XCode to act funny
+Since it's not installed from the App Store, Or you might be missing a Rosetta installation.
+
+[Reference/Similar issue](https://github.com/expo/expo-cli/issues/3197)
+
+You might see something like this after running `make run-ios`:
+```
+Underlying error (domain=FBSOpenApplicationServiceErrorDomain, code=1):
+```
+### Solution
+Run `softwareupdate --install-rosetta --agree-to-license`
+to accept XCode's license and install Rosetta.
@@ -881,7 +881,9 @@ PODS:
    - React-Core
  - react-native-blur (4.3.3):
    - React-Core
-  - react-native-cameraroll (5.10.0):
+  - react-native-cameraroll (7.5.2):
+    - glog
+    - RCT-Folly (= 2022.05.16.00)
    - React-Core
  - react-native-config (1.5.0):
    - react-native-config/App (= 1.5.0)
@@ -1475,7 +1477,7 @@ SPEC CHECKSUMS:
  react-native-biometrics: 352e5a794bfffc46a0c86725ea7dc62deb085bdc
  react-native-blob-util: 600972b1782380a5a7d5db61a3817ea32349dae9
  react-native-blur: c6d0a1dc2b4b519f7afe3b14d8151998632b6d18
-  react-native-cameraroll: 4701ae7c3dbcd3f5e9e150ca17f250a276154b35
+  react-native-cameraroll: af8eec1e585d053ff485d98ec837f9a8a11b5745
  react-native-config: 5330c8258265c1e5fdb8c009d2cabd6badd96727
  react-native-hole-view: 6935448993bac79f2b5a4ad7e9741094cf810679
  react-native-image-resizer: 2f1577efa3bc762597681f530c8e8d05ce0ceeb3
@@ -60,10 +60,10 @@ in {
    version = "15.0";
    allowHigher = true;
  };
-  go = super.go_1_19;
+  go = super.go_1_20;
  clang = super.clang_15;
-  buildGoPackage = super.buildGo119Package;
-  buildGoModule = super.buildGo119Module;
+  buildGoPackage = super.buildGo120Package;
+  buildGoModule = super.buildGo120Module;
  gomobile = (super.gomobile.overrideAttrs (old: {
    patches = [
      (self.fetchurl { # https://github.com/golang/mobile/pull/84
@@ -27,6 +27,7 @@ nix_install_type() {
    if [[ "$(os_name)" =~ NixOS ]]; then
        echo "nixos"
    else
+        USER=$(id -un) # Missing in Docker.
        case "${NIX_STORE_DIR_GROUP}" in
            "nixbld")   echo "multi";;
            "30000")    echo "multi";;
@@ -9,7 +9,7 @@
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "1.19.3",
-    "@react-native-camera-roll/camera-roll": "git+https://github.com/status-im/react-native-camera-roll.git#refs/tags/v5.1.1.1",
+    "@react-native-camera-roll/camera-roll": "7.5.2",
    "@react-native-clipboard/clipboard": "1.13.2",
    "@react-native-community/audio-toolkit": "git+https://github.com/tbenr/react-native-audio-toolkit.git#refs/tags/v2.0.3-status-v6",
    "@react-native-community/blur": "git+https://github.com/status-im/react-native-blur.git#refs/tags/v4.3.3-status",
@@ -48,7 +48,7 @@
    "react-native-keychain": "8.1.2",
    "react-native-linear-gradient": "^2.8.0",
    "react-native-lottie-splash-screen": "^1.0.1",
-    "react-native-mail": "git+https://github.com/status-im/react-native-mail.git#refs/tags/v6.1.2-status",
+    "react-native-mail": "6.1.1",
    "react-native-navigation": "7.38.3",
    "react-native-orientation-locker": "^1.5.0",
    "react-native-permissions": "3.8.0",
@@ -94,7 +94,6 @@
    "prettier": "^2.8.8",
    "process": "0.11.10",
    "react-test-renderer": "18.1.0",
-    "rn-snoopy": "git+https://github.com/status-im/rn-snoopy.git#refs/tags/v2.0.2-status",
    "shadow-cljs": "2.26.2"
  },
  "binary": {
@@ -0,0 +1,22 @@
+--- /tmp/tmp-status-mobile-3907e6b2e/tmp.re8kHerusA/CameraRoll.ts	2024-04-16 15:17:12.942432000 +0200
+++ ./node_modules/@react-native-camera-roll/camera-roll/src/CameraRoll.ts	2024-04-16 15:17:42.455250986 +0200
+@@ -239,6 +239,19 @@
+   }
+ 
+   /**
+   * Returns total iOS image count
+   */
+  static getPhotosCountiOS(): Promise<number> {
+    return RNCCameraRoll.getPhotosCountiOS('');
+  }
+  /**
+   * Returns favorites and their count iOS
+   */
+  static getFavoritesiOS(): Promise<Album> {
+    return RNCCameraRoll.getFavoritesiOS('');
+  }
+
+  /**
+    * Saves the photo or video to the camera roll or photo library, and returns the URI of the newly created asset.
+    *
+    * @deprecated `save(...)` is deprecated - use `saveAsset(...)` instead.
@@ -0,0 +1,11 @@
+--- /tmp/tmp-status-mobile-3907e6b2e/tmp.juxTO1BeCM/NativeCameraRollModule.ts	2024-04-16 15:21:28.379979000 +0200
+++ ./node_modules/@react-native-camera-roll/camera-roll/src/NativeCameraRollModule.ts	2024-04-16 15:21:40.490391291 +0200
+@@ -81,6 +81,8 @@
+   getPhotos(params: Object): Promise<PhotoIdentifiersPage>;
+   getAlbums(params: Object): Promise<Album[]>;
+   deletePhotos(photoUris: Array<string>): Promise<void>;
+  getPhotosCountiOS(arg: string): Promise<number>;
+  getFavoritesiOS(arg: string): Promise<Album>;
+   getPhotoByInternalID(
+     internalID: string,
+     options: Object,
@@ -0,0 +1,56 @@
+--- /tmp/tmp-status-mobile-3907e6b2e/tmp.O0mkyjqnsy/RNCCameraRoll.mm	2024-04-16 15:26:23.070258000 +0200
+++ ./node_modules/@react-native-camera-roll/camera-roll/ios/RNCCameraRoll.mm	2024-04-16 15:26:32.664996066 +0200
+@@ -955,6 +955,53 @@
+     return [albumTitles copy];
+ }
+ 
+RCT_EXPORT_METHOD(getPhotosCountiOS:(NSString *)blank
+                  resolve:(RCTPromiseResolveBlock)resolve
+                  reject:(RCTPromiseRejectBlock)reject)
+{
+    __block NSInteger intTotalCount=0;
+    PHFetchOptions *allPhotosOptions = [PHFetchOptions new];
+    allPhotosOptions.predicate = [NSPredicate predicateWithFormat:@"mediaType == %d ",PHAssetMediaTypeImage];
+    PHFetchResult *allPhotosResult = [PHAsset fetchAssetsWithOptions:allPhotosOptions];
+    intTotalCount+=allPhotosResult.count;
+
+    resolve(@(intTotalCount));
+}
+
+RCT_EXPORT_METHOD(getFavoritesiOS:(NSString *)blank
+                  resolve:(RCTPromiseResolveBlock)resolve
+                  reject:(RCTPromiseRejectBlock)reject)
+{
+    __block NSInteger intTotalCount=0;
+    PHFetchOptions *fetchOptions = [PHFetchOptions new];
+    NSString *format = @"(favorite == true)";
+    fetchOptions.predicate = [NSPredicate predicateWithFormat:format];
+    PHFetchResult<PHAsset *> *const assetsFetchResult = [PHAsset fetchAssetsWithOptions:fetchOptions];
+    PHAsset *imageAsset = [assetsFetchResult firstObject];
+    NSMutableArray * result = [NSMutableArray new];
+
+    for (PHAsset* asset in assetsFetchResult) {
+        NSArray *resources = [PHAssetResource assetResourcesForAsset:asset ];
+        if ([resources count] < 1) continue;
+        NSString *orgFilename = ((PHAssetResource*)resources[0]).originalFilename;
+        NSString *uit = ((PHAssetResource*)resources[0]).uniformTypeIdentifier;
+        NSString *mimeType = (NSString *)CFBridgingRelease(UTTypeCopyPreferredTagWithClass((__bridge CFStringRef _Nonnull)(uit), kUTTagClassMIMEType));
+        CFStringRef extension = UTTypeCopyPreferredTagWithClass((__bridge CFStringRef _Nonnull)(uit), kUTTagClassFilenameExtension);
+        [result addObject:@{
+            @"width": @([asset pixelWidth]),
+            @"height": @([asset pixelHeight]),
+            @"filename": orgFilename ?: @"",
+            @"mimeType": mimeType ?: @"",
+            @"id": [asset localIdentifier],
+            @"creationDate": [asset creationDate],
+            @"uri": [NSString stringWithFormat:@"ph://%@", [asset localIdentifier]],
+            @"duration": @([asset duration])
+        }];
+    }
+    [result addObject:@{@"count": @(assetsFetchResult.count)}];
+    resolve(result);
+}
+
+ static void checkPhotoLibraryConfig()
+ {
+ #if RCT_DEV
@@ -0,0 +1,15 @@
+--- /tmp/tmp-status-mobile-6e854428f/tmp.PSruc8WtHx/build.gradle	2024-04-17 11:08:46.857319000 +0200
+++ ./node_modules/react-native-mail/android/build.gradle	2024-04-17 11:09:22.935436792 +0200
+@@ -1,7 +1,11 @@
+ apply plugin: 'com.android.library'
+ 
+def safeExtGet(prop, fallback) {
+    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+}
+
+ android {
+-    compileSdkVersion project.hasProperty('compileSdkVersion') ? project.compileSdkVersion : 23
+    compileSdkVersion safeExtGet('compileSdkVersion', 30)
+     buildToolsVersion project.hasProperty('buildToolsVersion') ? project.buildToolsVersion : "23.0.1"
+ 
+     defaultConfig {
@@ -1,9 +1,9 @@
 #!/usr/bin/env sh

-INVALID_CHANGES=$(grep -E -r '(re-frame/dispatch|rf/dispatch|re-frame/subscribe|rf/subscribe|rf/sub|<sub|>evt|status-im\.)' --include '*.cljs' --include '*.clj' './src/quo')
+INVALID_CHANGES=$(grep -E -r '(/atom|re-frame/dispatch|rf/dispatch|re-frame/subscribe|rf/subscribe|rf/sub|<sub|>evt|status-im\.)' --include '*.cljs' --include '*.clj' './src/quo')

 if test -n "$INVALID_CHANGES"; then
-    echo "WARNING: re-frame, status-im are not allowed in quo components"
+    echo "WARNING: re-frame, status-im, reagent atoms are not allowed in quo components"
    echo ''
    echo "$INVALID_CHANGES"
    exit 1
@@ -3,7 +3,7 @@
    [legacy.status-im.bottom-sheet.view :as bottom-sheet]
    [legacy.status-im.ui.screens.about-app.views :as about-app]
    [legacy.status-im.ui.screens.mobile-network-settings.view :as mobile-network-settings]
-    [quo.theme :as theme]
+    [quo.theme]
    [react-native.core :as rn]
    [utils.re-frame :as rf]))

@@ -23,8 +23,7 @@
          (merge mobile-network-settings/offline-sheet)

          (= view :learn-more)
-          (merge about-app/learn-more))
-        page-theme (:theme options)]
+          (merge about-app/learn-more))]

    [:f>
     (fn []
@@ -32,7 +31,7 @@
                       (rn/hw-back-add-listener dismiss-bottom-sheet-callback)
                       (fn []
                         (rn/hw-back-remove-listener dismiss-bottom-sheet-callback))))
-       [theme/provider {:theme (or page-theme (theme/get-theme))}
+       [quo.theme/provider (or (:theme options))
        [bottom-sheet/bottom-sheet opts
         (when content
           [content (when options options)])]])]))
@@ -4,6 +4,7 @@
    [legacy.status-im.bottom-sheet.events :as bottom-sheet]
    legacy.status-im.communities.e2e
    [re-frame.core :as re-frame]
+    [status-im.contexts.shell.activity-center.events :as activity-center]
    [status-im.navigation.events :as navigation]
    [taoensso.timbre :as log]
    [utils.re-frame :as rf]))
@@ -22,60 +23,10 @@
          {}
          requests))

-(defn- fetch-community-id-input
-  [{:keys [db]}]
-  (:communities/community-id-input db))
-
 (rf/defn handle-response
  [_ response-js]
  {:dispatch [:sanitize-messages-and-process-response response-js]})

-(rf/defn invite-users
-  {:events [::invite-people-confirmation-pressed]}
-  [cofx user-pk contacts]
-  (let [community-id (fetch-community-id-input cofx)
-        pks          (if (seq user-pk)
-                       (conj contacts user-pk)
-                       contacts)]
-    (when (seq pks)
-      {:json-rpc/call [{:method      "wakuext_inviteUsersToCommunity"
-                        :params      [{:communityId community-id
-                                       :users       pks}]
-                        :js-response true
-                        :on-success  #(re-frame/dispatch [::people-invited %])
-                        :on-error    #(do
-                                        (log/error "failed to invite-user community" %)
-                                        (re-frame/dispatch [::failed-to-invite-people %]))}]})))
-
-(rf/defn share-community
-  {:events [::share-community-confirmation-pressed]}
-  [cofx user-pk contacts]
-  (let [community-id (fetch-community-id-input cofx)
-        pks          (if (seq user-pk)
-                       (conj contacts user-pk)
-                       contacts)]
-    (when (seq pks)
-      {:json-rpc/call [{:method      "wakuext_shareCommunity"
-                        :params      [{:communityId community-id
-                                       :users       pks}]
-                        :js-response true
-                        :on-success  #(re-frame/dispatch [::people-invited %])
-                        :on-error    #(do
-                                        (log/error "failed to invite-user community" %)
-                                        (re-frame/dispatch [::failed-to-share-community %]))}]})))
-
-(re-frame/reg-event-fx :communities/invite-people-pressed
- (fn [{:keys [db]} [id]]
-   {:db (assoc db :communities/community-id-input id)
-    :fx [[:dispatch [:hide-bottom-sheet]]
-         [:dispatch [:open-modal :legacy-invite-people-community {:invite? true}]]]}))
-
-(re-frame/reg-event-fx :communities/share-community-pressed
- (fn [{:keys [db]} [id]]
-   {:db (assoc db :communities/community-id-input id)
-    :fx [[:dispatch [:hide-bottom-sheet]]
-         [:dispatch [:open-modal :legacy-invite-people-community {}]]]}))
-
 (rf/defn people-invited
  {:events [::people-invited]}
  [cofx response-js]
@@ -90,6 +41,14 @@
         [:sanitize-messages-and-process-response response-js]
         [:activity-center.notifications/fetch-unread-count]]}))

+(rf/defn member-banned
+  {:events [::member-banned]}
+  [cofx response-js]
+  (rf/merge cofx
+            (bottom-sheet/hide-bottom-sheet-old)
+            (handle-response response-js)
+            (activity-center/notifications-fetch-unread-count)))
+
 (rf/defn member-ban
  {:events [::member-ban]}
  [cofx community-id public-key]
@@ -189,8 +189,8 @@
               :db                        (assoc db :screens/was-focused-once? true)}

              (not (get db :screens/was-focused-once?))
-              {:db (assoc db :screens/was-focused-once? true)})
-  ))
+              {:db (assoc db :screens/was-focused-once? true)})))
+

 ;;TODO :replace by named events
 (rf/defn set-event
@@ -38,22 +38,6 @@
                   :params     []
                   :on-success [:stickers/stickers-recent-success]})))

-(rf/defn load-packs
-  {:events [:stickers/load-packs]}
-  [{:keys [db]}]
-  {:json-rpc/call [{:method     "stickers_market"
-                    :params     [(chain/chain-id db)]
-                    :on-success #(re-frame/dispatch [:stickers/stickers-market-success %])}
-                   {:method     "stickers_installed"
-                    :params     []
-                    :on-success #(re-frame/dispatch [:stickers/stickers-installed-success %])}
-                   {:method     "stickers_pending"
-                    :params     []
-                    :on-success #(re-frame/dispatch [:stickers/stickers-pending-success %])}
-                   {:method     "stickers_recent"
-                    :params     []
-                    :on-success #(re-frame/dispatch [:stickers/stickers-recent-success %])}]})
-
 (rf/defn pending-pack
  {:events [:stickers/pending-pack]}
  [{db :db} id]
@@ -8,7 +8,7 @@
    [legacy.status-im.ui.screens.profile.visibility-status.utils :as visibility-status-utils]
    [quo.components.avatars.user-avatar.style :as user-avatar.style]
    [quo.core :as quo]
-    [quo.theme :as theme]
+    [quo.theme]
    [re-frame.core :as re-frame.core]
    [react-native.core :as rn]
    [status-im.contexts.profile.utils :as profile.utils]
@@ -52,7 +52,8 @@

 (defn profile-photo-plus-dot-view
  [{:keys [public-key full-name customization-color photo-container photo-path community?]}]
-  (let [photo-container         (if (nil? photo-container)
+  (let [theme                   @(re-frame.core/subscribe [:theme])
+        photo-container         (if (nil? photo-container)
                                  styles/container-chat-list
                                  photo-container)
        size                    (:width photo-container)
@@ -71,8 +72,7 @@
               {:size             size
                :full-name        full-name
                :font-size        (get text-style :font-size)
-                :background-color (user-avatar.style/customization-color customization-color
-                                                                         (theme/get-theme))
+                :background-color (user-avatar.style/customization-color customization-color theme)
                :indicator-size   0
                :indicator-border 0
                :indicator-color  "#000000"
@@ -2,6 +2,7 @@
  (:require
    [legacy.status-im.ui.components.core :as quo]
    [quo.foundations.colors :as quo.colors]
+    [quo.theme]
    [re-frame.core :as re-frame]
    [react-native.safe-area :as safe-area]))

@@ -32,7 +33,8 @@
    :or   {border-bottom? true
           new-ui?        false}
    :as   props}]
-  (let [navigation (if (= navigation :none)
+  (let [theme      (quo.theme/use-theme)
+        navigation (if (= navigation :none)
                     nil
                     [(default-navigation modal? navigation)])]
    [quo/header
@@ -47,4 +49,5 @@
              {:right-accessories right-accessories})
            (when new-ui?
              {:background (quo.colors/theme-colors quo.colors/neutral-5
-                                                    quo.colors/neutral-95)}))]))
+                                                    quo.colors/neutral-95
+                                                    theme)}))]))
@@ -2,7 +2,6 @@
  (:require
    [legacy.status-im.browser.core :as browser]
    [legacy.status-im.browser.webview-ref :as webview-ref]
-    [legacy.status-im.qr-scanner.core :as qr-scanner]
    [legacy.status-im.ui.components.chat-icon.screen :as chat-icon]
    [legacy.status-im.ui.components.colors :as colors]
    [legacy.status-im.ui.components.connectivity.view :as connectivity]
@@ -105,9 +104,7 @@
     (if empty-tab
       [react/touchable-highlight
        {:accessibility-label :universal-qr-scanner
-         :on-press            #(re-frame/dispatch
-                                [::qr-scanner/scan-code
-                                 {:handler ::qr-scanner/on-scan-success}])}
+         :on-press            #(re-frame/dispatch [:open-modal :shell-qr-reader])}
        [icons/icon :main-icons/qr {:color colors/black}]]
       [react/touchable-highlight
        {:on-press            #(re-frame/dispatch
@@ -46,22 +46,22 @@
   :color      colors/gray})

 (defn message-default-style
-  []
+  [theme]
  {:font-family    "Inter-Regular"
-   :color          (quo.colors/theme-colors quo.colors/neutral-100 quo.colors/white)
+   :color          (quo.colors/theme-colors quo.colors/neutral-100 quo.colors/white theme)
   :font-size      15
   :line-height    21.75
   :letter-spacing -0.135})

 ;; Markdown styles
 (defn default-text-style
-  []
+  [theme]
  {:max-font-size-multiplier react/max-font-size-multiplier
-   :style                    (message-default-style)})
+   :style                    (message-default-style theme)})

 (defn system-text-style
-  []
-  (update (default-text-style)
+  [theme]
+  (update (default-text-style theme)
          :style       assoc
          :color       colors/gray
          :line-height 20
@@ -70,65 +70,65 @@
          :font-weight "400"))

 (defn text-style
-  [content-type in-popover?]
+  [content-type in-popover? theme]
  (merge
   (when in-popover? {:number-of-lines 2})
   (cond
-     (= content-type constants/content-type-system-text)           (system-text-style)
-     (= content-type constants/content-type-system-pinned-message) (system-text-style)
-     :else                                                         (default-text-style))))
+     (= content-type constants/content-type-system-text)           (system-text-style theme)
+     (= content-type constants/content-type-system-pinned-message) (system-text-style theme)
+     :else                                                         (default-text-style theme))))

 (defn emph-text-style
-  []
-  (update (default-text-style)
+  [theme]
+  (update (default-text-style theme)
          :style
          assoc
          :font-style :italic))

 (defn emph-style
-  []
-  (emph-text-style))
+  [theme]
+  (emph-text-style theme))

 (defn strong-text-style
-  []
-  (update (default-text-style)
+  [theme]
+  (update (default-text-style theme)
          :style
          assoc
          :font-weight "700"))

 (defn outgoing-strong-text-style
-  []
-  (update (strong-text-style)
+  [theme]
+  (update (strong-text-style theme)
          :style
          assoc
          :color colors/white-persist))

 (defn strong-style
-  []
-  (outgoing-strong-text-style)
-  (strong-text-style))
+  [theme]
+  (outgoing-strong-text-style theme)
+  (strong-text-style theme))

 (defn strong-emph-style
-  []
-  (update (strong-style)
+  [theme]
+  (update (strong-style theme)
          :style
          assoc
          :font-style :italic))

 (defn strikethrough-style
-  []
-  (cond-> (update (default-text-style)
+  [theme]
+  (cond-> (update (default-text-style theme)
                  :style
                  assoc
                  :text-decoration-line :line-through)))

 (defn edited-style
-  []
+  [theme]
  (cond->
-    (update (default-text-style)
+    (update (default-text-style theme)
            :style
            assoc
-            :color (quo.colors/theme-colors quo.colors/neutral-40 quo.colors/neutral-50)
+            :color (quo.colors/theme-colors quo.colors/neutral-40 quo.colors/neutral-50 theme)
            :font-size 13
            :line-height 18.2
            :letter-spacing (typography/tracking 13))))
@@ -149,8 +149,8 @@
  (default-blockquote-style))

 (defn default-blockquote-text-style
-  []
-  (update (default-text-style)
+  [theme]
+  (update (default-text-style theme)
          :style
          assoc
          :line-height 19
@@ -158,16 +158,16 @@
          :color colors/black-transparent-50))

 (defn outgoing-blockquote-text-style
-  []
-  (update (default-blockquote-text-style)
+  [theme]
+  (update (default-blockquote-text-style theme)
          :style
          assoc
          :color colors/white-transparent-70-persist))

 (defn blockquote-text-style
-  []
-  (outgoing-blockquote-text-style)
-  (default-blockquote-text-style))
+  [theme]
+  (outgoing-blockquote-text-style theme)
+  (default-blockquote-text-style theme))

 (defn community-verified
  []
@@ -6,6 +6,7 @@
    [quo.core :as quo]
    [quo.foundations.colors :as colors]
    [quo.foundations.typography :as typography]
+    [quo.theme]
    [react-native.core :as rn]
    [status-im.constants :as constants]
    [status-im.contexts.chat.messenger.messages.delete-message-for-me.events]
@@ -26,7 +27,7 @@

 (defn render-inline
  [_message-text content-type acc {:keys [type literal destination]}
-   community-id]
+   community-id theme]
  (case type
    ""
    (conj acc literal)
@@ -35,24 +36,25 @@
    (conj acc [rn/text literal])

    "emph"
-    (conj acc [rn/text (style/emph-style) literal])
+    (conj acc [rn/text (style/emph-style theme) literal])

    "strong"
-    (conj acc [rn/text (style/strong-style) literal])
+    (conj acc [rn/text (style/strong-style theme) literal])

    "strong-emph"
-    (conj acc [quo/text (style/strong-emph-style) literal])
+    (conj acc [quo/text (style/strong-emph-style theme) literal])

    "del"
-    (conj acc [rn/text (style/strikethrough-style) literal])
+    (conj acc [rn/text (style/strikethrough-style theme) literal])

    "link"
-    (conj acc
-          [rn/text
-           {:style    {:color                (colors/theme-colors colors/primary-50 colors/primary-60)
-                       :text-decoration-line :underline}
-            :on-press #(rf/dispatch [:browser.ui/message-link-pressed destination])}
-           destination])
+    (conj
+     acc
+     [rn/text
+      {:style    {:color                (colors/theme-colors colors/primary-50 colors/primary-60 theme)
+                  :text-decoration-line :underline}
+       :on-press #(rf/dispatch [:browser.ui/message-link-pressed destination])}
+      destination])

    "mention"
    (conj
@@ -66,17 +68,18 @@
                    #(rf/dispatch [:chat.ui/show-profile literal]))}
       [mention-element literal]]])
    "status-tag"
-    (conj acc
-          [rn/text
-           (when community-id
-             {:style    {:color                (colors/theme-colors colors/primary-50 colors/primary-60)
-                         :text-decoration-line :underline}
-              :on-press #(rf/dispatch [:communities/status-tag-pressed community-id literal])})
-           "#"
-           literal])
+    (conj
+     acc
+     [rn/text
+      (when community-id
+        {:style    {:color                (colors/theme-colors colors/primary-50 colors/primary-60 theme)
+                    :text-decoration-line :underline}
+         :on-press #(rf/dispatch [:communities/status-tag-pressed community-id literal])})
+      "#"
+      literal])

    "edited"
-    (conj acc [rn/text (style/edited-style) (str " (" (i18n/label :t/edited) ")")])
+    (conj acc [rn/text (style/edited-style theme) (str " (" (i18n/label :t/edited) ")")])

    (conj acc literal)))

@@ -84,7 +87,7 @@
 (defn render-block
  [{:keys [content content-type edited-at in-popover?]} acc
   {:keys [type ^js literal children]}
-   community-id]
+   community-id theme]

  (case type

@@ -96,8 +99,9 @@
                            content-type
                            acc
                            e
-                            community-id))
-           [rn/text (style/text-style content-type in-popover?)]
+                            community-id
+                            theme))
+           [rn/text (style/text-style content-type in-popover? theme)]
           (conj
            children
            (when edited-at
@@ -106,7 +110,7 @@
    "blockquote"
    (conj acc
          [rn/view (style/blockquote-style)
-           [rn/text (style/blockquote-text-style)
+           [rn/text (style/blockquote-text-style theme)
            (.substring literal 0 (.-length literal))]])

    "codeblock"
@@ -119,12 +123,14 @@
 (defn render-parsed-text
  [{:keys [content chat-id]
    :as   message-data}]
-  (let [community-id (rf/sub [:community-id-by-chat-id chat-id])]
+  (let [community-id (rf/sub [:community-id-by-chat-id chat-id])
+        theme        (quo.theme/use-theme)]
    (reduce (fn [acc e]
              (render-block message-data
                            acc
                            e
-                            community-id))
+                            community-id
+                            theme))
            [:<>]
            (:parsed-text content))))

@@ -137,12 +143,13 @@
 ;; STATUS ? whats that ?
 (defmethod ->message constants/content-type-status
  [{:keys [content content-type]}]
-  [rn/view style/status-container
-   [rn/text {:style (style/status-text)}
-    (reduce
-     (fn [acc e] (render-inline (:text content) content-type acc e nil))
-     [rn/text {:style (style/status-text)}]
-     (-> content :parsed-text peek :children))]])
+  (let [theme (quo.theme/use-theme)]
+    [rn/view style/status-container
+     [rn/text {:style (style/status-text)}
+      (reduce
+       (fn [acc e] (render-inline (:text content) content-type acc e nil theme))
+       [rn/text {:style (style/status-text)}]
+       (-> content :parsed-text peek :children))]]))

 (defn contact-request-status-pending
  []
@@ -1,16 +1,15 @@
 (ns legacy.status-im.ui.screens.communities.invite
  (:require
    [clojure.string :as string]
-    [legacy.status-im.communities.core :as communities]
    [legacy.status-im.ui.components.chat-icon.screen :as chat-icon.screen]
    [legacy.status-im.ui.components.core :as quo]
    [legacy.status-im.ui.components.list.item :as list.item]
    [legacy.status-im.ui.components.toolbar :as toolbar]
    [legacy.status-im.ui.components.topbar :as topbar]
+    [quo.theme]
    [react-native.core :as rn]
    [reagent.core :as reagent]
    [status-im.constants :as constants]
-    [utils.debounce :as debounce]
    [utils.i18n :as i18n]
    [utils.re-frame :as rf]))

@@ -49,18 +48,35 @@
        contacts-selected (reagent/atom #{})
        {:keys [invite?]} (rf/sub [:get-screen-params])]
    (fn []
-      (let [contacts-data (rf/sub [:contacts/active])
-            {:keys [permissions
-                    can-manage-users?]}
+      (let [theme (quo.theme/use-theme)
+            contacts-data (rf/sub [:contacts/active])
+            {community-id :id
+             :keys        [permissions
+                           can-manage-users?]}
            (rf/sub [:communities/edited-community])
            selected @contacts-selected
+            selected-contacts-count (count selected)
            contacts (map (fn [{:keys [public-key] :as contact}]
                            (assoc contact :active (contains? selected public-key)))
                          contacts-data)
            ;; no-membership communities can only be shared
            can-invite? (and can-manage-users?
                             invite?
-                             (not= (:access permissions) constants/community-no-membership-access))]
+                             (not= (:access permissions) constants/community-no-membership-access))
+            on-press-share-community (rn/use-callback
+                                      (fn []
+                                        (rf/dispatch [:communities/share-community-confirmation-pressed
+                                                      selected community-id])
+                                        (rf/dispatch [:navigate-back])
+                                        (rf/dispatch [:toasts/upsert
+                                                      {:type  :positive
+                                                       :theme theme
+                                                       :text  (if (= 1 selected-contacts-count)
+                                                                (i18n/label :t/one-user-was-invited)
+                                                                (i18n/label
+                                                                 :t/n-users-were-invited
+                                                                 {:count selected-contacts-count}))}]))
+                                      [community-id selected selected-contacts-count theme])]
        [:<>
         [topbar/topbar
          {:title  (i18n/label (if can-invite?
@@ -81,11 +97,8 @@
           :center
           [quo/button
            {:disabled            (and (string/blank? @user-pk)
-                                       (zero? (count selected)))
+                                       (zero? selected-contacts-count))
             :accessibility-label :share-community-link
             :type                :secondary
-             :on-press            #(debounce/throttle-and-dispatch
-                                    [::communities/share-community-confirmation-pressed @user-pk
-                                     selected]
-                                    3000)}
+             :on-press            on-press-share-community}
            (i18n/label (if can-invite? :t/invite :t/share))]}]]))))
@@ -11,7 +11,7 @@
    [legacy.status-im.ui.components.topbar :as topbar]
    [legacy.status-im.ui.screens.profile.components.sheets :as sheets]
    [quo.components.avatars.user-avatar.style :as user-avatar.style]
-    [quo.theme :as theme]
+    [quo.theme]
    [re-frame.core :as re-frame]
    [reagent.core :as reagent]
    [status-im.constants :as constants]
@@ -184,6 +184,7 @@
         :as   profile}     @(re-frame/subscribe [:contacts/current-contact])
        muted?              @(re-frame/subscribe [:chats/muted public-key])
        customization-color (or customization-color :primary)
+        theme               @(re-frame/subscribe [:theme])
        on-share            #(re-frame/dispatch [:show-popover
                                                 (merge
                                                  {:view    :share-chat-key
@@ -205,8 +206,7 @@
          {:on-press         on-share
           :bottom-separator false
           :title            (profile.utils/displayed-name profile)
-           :color            (user-avatar.style/customization-color customization-color
-                                                                    (theme/get-theme))
+           :color            (user-avatar.style/customization-color customization-color theme)
           :photo            (profile.utils/photo profile)
           :monospace        (not ens-verified)
           :subtitle         secondary-name
@@ -14,7 +14,7 @@
    [legacy.status-im.ui.screens.profile.visibility-status.views :as visibility-status]
    [legacy.status-im.utils.utils :as utils]
    [quo.components.avatars.user-avatar.style :as user-avatar.style]
-    [quo.theme :as theme]
+    [quo.theme]
    [re-frame.core :as re-frame]
    [reagent.core :as reagent]
    [status-im.common.qr-codes.view :as qr-codes]
@@ -200,6 +200,7 @@
          @(re-frame/subscribe [:profile/profile-with-image])
          customization-color (or (:color @(re-frame/subscribe [:onboarding/profile]))
                                  @(re-frame/subscribe [:profile/customization-color key-uid]))
+          theme @(re-frame/subscribe [:theme])
          on-share #(re-frame/dispatch [:show-popover
                                        {:view     :share-chat-key
                                         :address  (or compressed-key
@@ -221,7 +222,7 @@
                                                              {:content (edit/bottom-sheet
                                                                         has-picture)}])
                              :color     (user-avatar.style/customization-color customization-color
-                                                                                (theme/get-theme))
+                                                                                theme)
                              :title     (profile.utils/displayed-name profile)
                              :photo     (profile.utils/photo profile)
                              :monospace (not ens-verified)
@@ -17,14 +17,14 @@
   :padding-right          12})

 (defn visibility-status-dot
-  [{:keys [color size new-ui?]}]
+  [{:keys [color size new-ui?]} theme]
  (if new-ui?
    {:background-color color
     :width            size
     :height           size
     :border-radius    (/ size 2)
     :border-width     3.5
-     :border-color     (quo.colors/theme-colors quo.colors/white quo.colors/neutral-90)}
+     :border-color     (quo.colors/theme-colors quo.colors/white quo.colors/neutral-90 theme)}
    {:background-color color
     :width            size
     :height           size
@@ -33,10 +33,11 @@
     :border-color     colors/white}))

 (defn visibility-status-profile-dot
-  [{:keys [color size border-width margin-left new-ui?]}]
+  [{:keys [color size border-width margin-left new-ui?]} theme]
  (merge (visibility-status-dot {:color   color
                                 :size    size
-                                 :new-ui? new-ui?})
+                                 :new-ui? new-ui?}
+                                theme)
         {:margin-right 6
          :margin-left  margin-left
          :border-width border-width}))
@@ -3,6 +3,7 @@
    [legacy.status-im.ui.components.colors :as colors]
    [legacy.status-im.ui.screens.profile.visibility-status.styles :as styles]
    [quo.foundations.colors :as quo.colors]
+    [quo.theme]
    [status-im.constants :as constants]
    [utils.datetime :as datetime]
    [utils.i18n :as i18n]
@@ -90,13 +91,15 @@
 (defn icon-visibility-status-dot
  [public-key container-size]
  (let [status    (rf/sub [:visibility-status-updates/visibility-status-update public-key])
+        theme     (quo.theme/use-theme)
        size      (icon-dot-size container-size)
        margin    -2
        dot-color (icon-dot-color status)
        new-ui?   true]
    (merge (styles/visibility-status-dot {:color   dot-color
                                          :size    size
-                                          :new-ui? new-ui?})
+                                          :new-ui? new-ui?}
+                                         theme)
           {:bottom              margin
            :right               margin
            :position            :absolute
@@ -37,7 +37,7 @@
     (dispatch-popover page-y))))

 (defn profile-visibility-status-dot
-  [status-type color]
+  [status-type color theme]
  (let [automatic?                      (= status-type
                                           constants/visibility-status-automatic)
        [border-width margin-left size] (if automatic? [1 -10 12] [0 6 10])
@@ -50,14 +50,16 @@
                  :size         size
                  :border-width border-width
                  :margin-left  6
-                  :new-ui?      new-ui?})}])
+                  :new-ui?      new-ui?}
+                 theme)}])
     [rn/view
      {:style (styles/visibility-status-profile-dot
               {:color        color
                :size         size
                :border-width border-width
                :margin-left  margin-left
-                :new-ui?      new-ui?})}]]))
+                :new-ui?      new-ui?}
+               theme)}]]))

 (defn visibility-status-button
  [on-press props]
@@ -54,7 +54,7 @@

 (defn- f-animated-header-list
  [{:keys [header-comp main-comp back-button-on-press] :as params}]
-  (let [theme                   (quo.theme/use-theme-value)
+  (let [theme                   (quo.theme/use-theme)
        window-height           (:height (rn/get-window))
        {:keys [top bottom]}    (safe-area/get-insets)
        ;; view height calculation is different because window height is different on iOS and
@@ -29,7 +29,7 @@
                   {:height          (:size opts)
                    :width           (:size opts)
                    :borderRadius    (style/get-border-radius (:size opts))
-                    :backgroundColor (colors/resolve-color (:customization-color opts) :dark)})
+                    :backgroundColor (colors/resolve-color (:customization-color opts) :light)})
      (h/is-truthy (h/query-by-label-text :account-emoji))
      (h/has-style (h/query-by-label-text :account-emoji)
                   {:fontSize (style/get-emoji-size (:size opts))})
@@ -65,7 +65,7 @@
                   {:height          (:size opts)
                    :width           (:size opts)
                    :borderRadius    (style/get-border-radius (:size opts))
-                    :backgroundColor (colors/resolve-color (:customization-color opts) :dark)})
+                    :backgroundColor (colors/resolve-color (:customization-color opts) :light)})
      (h/is-truthy (h/query-by-label-text :account-emoji))
      (h/has-style (h/query-by-label-text :account-emoji)
                   {:fontSize (style/get-emoji-size (:size opts))})
@@ -56,9 +56,10 @@


 (defn root-container
-  [{:keys [type size theme customization-color]
+  [{:keys [type size customization-color]
    :or   {size                default-size
-           customization-color :blue}}]
+           customization-color :blue}}
+   theme]
  (let [watch-only? (= type :watch-only)
        width       (cond-> size
                      (keyword? size) (container-size size))]
@@ -5,7 +5,7 @@
    [quo.theme :as quo.theme]
    [react-native.core :as rn]))

-(defn- view-internal
+(defn view
  "Opts:
   
    :type  - keyword -> :default/:watch-only
@@ -21,15 +21,14 @@
    :or   {size  style/default-size
           emoji "🍑"}
    :as   opts}]
-  (let [emoji-size (style/get-emoji-size size)]
+  (let [theme      (quo.theme/use-theme)
+        emoji-size (style/get-emoji-size size)]
    [rn/view
     {:accessible          true
      :accessibility-label :account-avatar
-      :style               (style/root-container opts)}
+      :style               (style/root-container opts theme)}
     [rn/text
      {:accessibility-label      :account-emoji
       :adjusts-font-size-to-fit true
       :style                    {:font-size emoji-size}}
      (when emoji (string/trim emoji))]]))
-
-(def view (quo.theme/with-theme view-internal))
@@ -34,7 +34,7 @@
       :container-style style/lock-icon
       :size            12}]]))

-(defn- view-internal
+(defn view
  "Options:

  :size - keyword (default nil) - Container size, for the moment,
@@ -52,22 +52,21 @@
  :full-name - string (default nil) - When :emoji is blank, this value will be
  used to extract the initials.
  "
-  [{:keys [size emoji customization-color locked? full-name theme]}]
-  [rn/view
-   {:accessibility-label :channel-avatar
-    :style               (style/outer-container {:theme               theme
-                                                 :size                size
-                                                 :customization-color customization-color})}
-   (if (string/blank? emoji)
-     [initials
-      {:full-name           full-name
-       :size                size
-       :customization-color customization-color
-       :theme               theme}]
-     [rn/text
-      {:style               (style/emoji-size size)
-       :accessibility-label :emoji}
-      (when emoji (string/trim emoji))])
-   [lock locked? size theme]])
-
-(def view (quo.theme/with-theme view-internal))
+  [{:keys [size emoji customization-color locked? full-name]}]
+  (let [theme (quo.theme/use-theme)]
+    [rn/view
+     {:accessibility-label :channel-avatar
+      :style               (style/outer-container {:theme               theme
+                                                   :size                size
+                                                   :customization-color customization-color})}
+     (if (string/blank? emoji)
+       [initials
+        {:full-name           full-name
+         :size                size
+         :customization-color customization-color
+         :theme               theme}]
+       [rn/text
+        {:style               (style/emoji-size size)
+         :accessibility-label :emoji}
+        (when emoji (string/trim emoji))])
+     [lock locked? size theme]]))
@@ -4,15 +4,16 @@
    [quo.theme :as quo.theme]
    [react-native.fast-image :as fast-image]))

-(defn- view-internal
+(defn view
  "Opts:
   
    :image - collection image
    :theme - keyword -> :light/:dark"
-  [{:keys [image theme size] :or {size :size-24}}]
-  [fast-image/fast-image
-   {:accessibility-label :collection-avatar
-    :source              image
-    :style               (style/collection-avatar theme size)}])
-
-(def view (quo.theme/with-theme view-internal))
+  [{:keys [image size on-load-end on-error] :or {size :size-24}}]
+  (let [theme (quo.theme/use-theme)]
+    [fast-image/fast-image
+     {:accessibility-label :collection-avatar
+      :source              image
+      :on-load-end         on-load-end
+      :on-error            on-error
+      :style               (style/collection-avatar theme size)}]))
@@ -13,3 +13,11 @@
   :background-color (colors/theme-colors (colors/custom-color customization-color 50)
                                          (colors/custom-color customization-color 60)
                                          theme)})
+
+(defn avatar-identifier
+  [theme]
+  {:text-align :center
+   :font-size  36
+   :color      (colors/theme-colors colors/black
+                                    colors/white
+                                    theme)})
@@ -1,7 +1,9 @@
 (ns quo.components.avatars.group-avatar.view
  (:require
+    [clojure.string :as string]
    [quo.components.avatars.group-avatar.style :as style]
    [quo.components.icon :as icon]
+    [quo.components.markdown.text :as text]
    [quo.foundations.colors :as colors]
    [quo.theme :as quo.theme]
    [react-native.core :as rn]
@@ -19,27 +21,44 @@
   :size-80 {:icon      32
             :container 80}})

-(defn- view-internal
-  [_]
-  (fn [{:keys [size theme customization-color picture icon-name]
-        :or   {size                :size-20
-               customization-color :blue
-               picture             nil
-               icon-name           :i/members}}]
-    (let [container-size (get-in sizes [size :container])
-          icon-size      (get-in sizes [size :icon])]
-      [rn/view
-       {:accessibility-label :group-avatar
-        :style               (style/container {:container-size      container-size
-                                               :customization-color customization-color
-                                               :theme               theme})}
-       (if picture
-         [fast-image/fast-image
-          {:source picture
-           :style  {:width  container-size
-                    :height container-size}}]
+(defn view
+  [{:keys [size customization-color picture icon-name emoji chat-name]
+    :or   {size                :size-20
+           customization-color :blue
+           picture             nil
+           icon-name           :i/members}}]
+  (let [theme          (quo.theme/use-theme)
+        container-size (get-in sizes [size :container])
+        icon-size      (get-in sizes [size :icon])]
+    [rn/view
+     {:accessibility-label :group-avatar
+      :style               (style/container {:container-size      container-size
+                                             :customization-color customization-color
+                                             :theme               theme})}
+     (if picture
+       [fast-image/fast-image
+        {:source picture
+         :style  {:width  container-size
+                  :height container-size}}]
+       (cond
+         emoji
+         (if (= size :size-80)
+           [rn/text
+            {:style (style/avatar-identifier theme)}
+            emoji]
+           [text/text
+            {:size  :paragraph-1
+             :style (dissoc (style/avatar-identifier theme) :font-size)}
+            emoji])
+         chat-name
+         (if (= size :size-80)
+           [rn/text
+            {:style (style/avatar-identifier theme)}
+            ((comp first string/upper-case) chat-name)]
+           [text/text
+            {:size :paragraph-1}
+            ((comp first string/upper-case) chat-name)])
+         :else
         [icon/icon icon-name
          {:size  icon-size
-           :color colors/white-opa-70}])])))
-
-(def view (quo.theme/with-theme view-internal))
+           :color colors/white-opa-70}]))]))
@@ -15,11 +15,12 @@
   :size-20 {:component 20
             :icon      12}})

-(defn icon-avatar-internal
-  [{:keys [size icon color opacity border? theme]
+(defn icon-avatar
+  [{:keys [size icon color opacity border?]
    :or   {opacity 20
           size    :size-32}}]
-  (let [{component-size :component icon-size :icon} (get sizes size)
+  (let [theme                                       (quo.theme/use-theme)
+        {component-size :component icon-size :icon} (get sizes size)
        circle-color                                (colors/resolve-color color theme opacity)
        icon-color                                  (colors/resolve-color color theme)]
    (if (keyword? icon)
@@ -38,5 +39,3 @@
      [rn/image
       {:source icon
        :style  {:width component-size :height component-size}}])))
-
-(def icon-avatar (quo.theme/with-theme icon-avatar-internal))
@@ -14,7 +14,6 @@
      [:status-indicator? {:optional true} [:maybe boolean?]]
      [:online? {:optional true} [:maybe boolean?]]
      [:ring? {:optional true} [:maybe boolean?]]
-      [:theme :schema.common/theme]
      [:profile-picture
       {:optional true}
       [:maybe :schema.quo/profile-picture-source]]]]]
@@ -66,8 +66,8 @@
     :background-color (colors/resolve-color customization-color theme)}))

 (defn indicator-color
-  []
-  {:online  (colors/theme-colors colors/success-50 colors/success-60)
+  [theme]
+  {:online  (colors/theme-colors colors/success-50 colors/success-60 theme)
   :offline colors/neutral-40})

 (defn outer
@@ -11,9 +11,10 @@
    utils.string))

 (defn initials-avatar
-  [{:keys [full-name size customization-color theme]
+  [{:keys [full-name size customization-color]
    :or   {customization-color :blue}}]
-  (let [font-size       (get-in style/sizes [size :font-size])
+  (let [theme           (quo.theme/use-theme)
+        font-size       (get-in style/sizes [size :font-size])
        amount-initials (if (#{:xs :xxs :xxxs} size) 1 2)]
    [rn/view
     {:accessibility-label :initials-avatar
@@ -31,14 +32,14 @@
   When calling the `profile-picture-fn` and passing the `:ring?` key, be aware that the `profile-picture-fn`
   may have an `:override-ring?` value. If it does then the `:ring?` value will not be used.
   For reference, refer to the `utils.image-server` namespace for these `profile-picture-fn` are generated."
-  [{:keys [full-name size profile-picture static?
-           status-indicator? online? ring? theme]
+  [{:keys [full-name size profile-picture static? status-indicator? online? ring?]
    :or   {size              :big
           status-indicator? true
           online?           true
           ring?             true}
    :as   props}]
-  (let [full-name          (or full-name "Your Name")
+  (let [theme              (quo.theme/use-theme)
+        full-name          (or full-name "Your Name")
        ;; image generated with `profile-picture-fn` is round cropped
        ;; no need to add border-radius for them
        outer-styles       (style/outer size (not (:fn profile-picture)))
@@ -49,7 +50,7 @@
        font-size          (get-in style/sizes [size :font-size])
        amount-initials    (if (#{:xs :xxs :xxxs} size) 1 2)
        sizes              (get style/sizes size)
-        indicator-color    (get (style/indicator-color) (if online? :online :offline))
+        indicator-color    (get (style/indicator-color theme) (if online? :online :offline))
        profile-picture-fn (:fn profile-picture)]

    [rn/view {:style outer-styles :accessibility-label :user-avatar}
@@ -66,7 +67,8 @@
                      {:length                   amount-initials
                       :full-name                full-name
                       :font-size                (:font-size (text/text-style {:size
-                                                                               font-size}))
+                                                                               font-size}
+                                                                              nil))
                       :indicator-size           (when status-indicator?
                                                   (:status-indicator sizes))
                       :indicator-border         (when status-indicator?
@@ -87,6 +89,4 @@

               :else {:uri profile-picture})}])]))

-(def user-avatar
-  (quo.theme/with-theme
-   (schema/instrument #'user-avatar-internal component-schema/?schema)))
+(def user-avatar (schema/instrument #'user-avatar-internal component-schema/?schema))
@@ -34,7 +34,7 @@
      (= size second-smallest-possible)))
 (def biggest-possible (last (keys properties)))

-(defn- view-internal
+(defn wallet-user-avatar
  "Options:

  :full-name - string (default: nil) - used to generate initials
@@ -44,9 +44,10 @@
  :monospace? - boolean (default: false) - use monospace font
  :lowercase? - boolean (default: false) - lowercase text
  :neutral? - boolean (default: false) - use neutral colors variant"
-  [{:keys [full-name customization-color size theme monospace? lowercase? neutral?]
+  [{:keys [full-name customization-color size monospace? lowercase? neutral?]
    :or   {size biggest-possible}}]
-  (let [circle-size (:size (size properties))
+  (let [theme       (quo.theme/use-theme)
+        circle-size (:size (size properties))
        small?      (check-if-size-small size)
        initials    (utils.string/get-initials full-name (if small? 1 2))]
    [rn/view
@@ -57,5 +58,3 @@
       :weight              (if monospace? :monospace (:font-weight (size properties)))
       :style               (style/text customization-color neutral? theme)}
      (if (and initials lowercase?) (string/lower-case initials) initials)]]))
-
-(def wallet-user-avatar (quo.theme/with-theme view-internal))
@@ -8,27 +8,26 @@
    [quo.theme :as quo.theme]
    [react-native.core :as rn]))

-(defn- view-internal
-  [{:keys [hide-pin? latest-pin-text pins-count on-press theme]}]
-  (when (pos? pins-count)
-    [rn/touchable-opacity
-     {:accessibility-label :pinned-banner
-      :style               style/container
-      :active-opacity      1
-      :on-press            on-press}
-     (when-not hide-pin?
-       [rn/view {:style style/icon}
-        [icons/icon :i/pin
-         {:color (colors/theme-colors colors/neutral-100 colors/white theme)
-          :size  20}]])
-     [rn/view {:style (style/text hide-pin?)}
-      [text/text
-       {:number-of-lines 1
-        :size            :paragraph-2}
-       latest-pin-text]]
-     [rn/view
-      {:accessibility-label :pins-count
-       :style               style/counter}
-      [counter/view {:type :secondary} pins-count]]]))
-
-(def view (quo.theme/with-theme view-internal))
+(defn view
+  [{:keys [hide-pin? latest-pin-text pins-count on-press]}]
+  (let [theme (quo.theme/use-theme)]
+    (when (pos? pins-count)
+      [rn/touchable-opacity
+       {:accessibility-label :pinned-banner
+        :style               style/container
+        :active-opacity      1
+        :on-press            on-press}
+       (when-not hide-pin?
+         [rn/view {:style style/icon}
+          [icons/icon :i/pin
+           {:color (colors/theme-colors colors/neutral-100 colors/white theme)
+            :size  20}]])
+       [rn/view {:style (style/text hide-pin?)}
+        [text/text
+         {:number-of-lines 1
+          :size            :paragraph-2}
+         latest-pin-text]]
+       [rn/view
+        {:accessibility-label :pins-count
+         :style               style/counter}
+        [counter/view {:type :secondary} pins-count]]])))
@@ -17,7 +17,8 @@
 (defn input
  [disabled?]
  (assoc (text/text-style {:size   :paragraph-1
-                           :weight :regular})
+                           :weight :regular}
+                          nil)
         :flex       1
         :min-height 36
         :min-width  120
@@ -45,11 +46,12 @@
   :z-index            10})

 (defn text
-  []
+  [theme]
  (assoc (text/text-style {:size   :paragraph-1
-                           :weight :medium})
+                           :weight :medium}
+                          nil)
         :color
-         (colors/theme-colors colors/neutral-100 colors/white)))
+         (colors/theme-colors colors/neutral-100 colors/white theme)))

 (def root-container
  {:height             60
@@ -121,7 +121,7 @@
            :size                favicon-size}])
        [rn/text
         {:accessibility-label :browser-input-label
-          :style               (style/text)}
+          :style               (style/text theme)}
         (remove-http-https-www value)]
        (when locked?
          [lock-icon {:blur? blur? :theme theme}])])
@@ -5,7 +5,7 @@
    [quo.components.icon :as quo.icons]
    [quo.components.markdown.text :as text]
    [quo.foundations.customization-colors :as customization-colors]
-    [quo.theme :as theme]
+    [quo.theme]
    [react-native.blur :as blur]
    [react-native.core :as rn]))

@@ -28,15 +28,15 @@
    :theme :light/:dark
   only icon
   [button {:icon-only? true} :i/close-circle]"
-  [{:keys [on-press on-long-press disabled? type background size icon-left icon-right icon-top
-           customization-color accessibility-label icon-only? container-style inner-style
-           pressed? on-press-in on-press-out allow-multiple-presses?]
+  [{:keys [on-press on-long-press disabled? type background size icon-left icon-left-color icon-right
+           icon-right-color icon-top icon-top-color customization-color accessibility-label icon-only?
+           container-style inner-style pressed? on-press-in on-press-out allow-multiple-presses?]
    :or   {type                :primary
           size                40
           customization-color (if (= type :primary) :blue nil)}}
   children]
  (let [[pressed-state? set-pressed-state] (rn/use-state false)
-        theme (theme/use-theme-value)
+        theme (quo.theme/use-theme)
        {:keys [icon-color background-color label-color border-color blur-type
                blur-overlay-color border-radius overlay-customization-color]}
        (button-properties/get-values {:customization-color customization-color
@@ -94,7 +94,7 @@
          [quo.icons/icon icon-top
           {:container-style {:margin-bottom 2
                              :opacity       (when disabled? 0.3)}
-            :color           icon-color
+            :color           (or icon-top-color icon-color)
            :size            icon-size}]])
       (when icon-left
         [rn/view
@@ -103,7 +103,7 @@
                    :icon-size icon-size
                    :disabled? disabled?})}
          [quo.icons/icon icon-left
-           {:color icon-color
+           {:color (or icon-left-color icon-color)
            :size  icon-size}]])
       [rn/view
        (cond
@@ -130,5 +130,5 @@
                    :icon-size icon-size
                    :disabled? disabled?})}
          [quo.icons/icon icon-right
-           {:color icon-color
+           {:color (or icon-right-color icon-color)
            :size  icon-size}]])]]]))
@@ -2,13 +2,13 @@
  (:require
    [quo.components.buttons.composer-button.style :as style]
    [quo.components.icon :as quo.icons]
-    [quo.theme :as theme]
+    [quo.theme]
    [react-native.core :as rn]))

 (defn view
  [{:keys [on-press on-long-press disabled? blur? icon accessibility-label container-style]}]
  (let [[pressed? set-pressed] (rn/use-state false)
-        theme                  (theme/use-theme-value)
+        theme                  (quo.theme/use-theme)
        on-press-in            (rn/use-callback #(set-pressed true))
        on-press-out           (rn/use-callback #(set-pressed nil))]
    [rn/pressable
@@ -52,7 +52,7 @@
    :count               mentions or notifications count
    :customization-color customize jump-to and mention button color}"
  [{:keys [type label on-press customization-color style] :as args}]
-  (let [theme                  (quo.theme/use-theme-value)
+  (let [theme                  (quo.theme/use-theme)
        [pressed? set-pressed] (rn/use-state false)
        button-color           (get-button-color {:type                type
                                                  :pressed?            pressed?
@@ -10,7 +10,7 @@

 (defn view
  [{:keys [on-press on-long-press disabled? container-style]}]
-  (let [theme                  (quo.theme/use-theme-value)
+  (let [theme                  (quo.theme/use-theme)
        [pressed? set-pressed] (rn/use-state false)
        on-press-in            (rn/use-callback #(set-pressed true))
        on-press-out           (rn/use-callback #(set-pressed nil))]
@@ -4,7 +4,7 @@
    [quo.components.buttons.predictive-keyboard.style :as style]
    [quo.components.info.info-message :as info-message]
    [quo.foundations.colors :as colors]
-    [quo.theme :as theme]
+    [quo.theme]
    [react-native.core :as rn]
    [react-native.linear-gradient :as linear-gradient]))

@@ -26,7 +26,7 @@
  []
  [rn/view {:style {:width 8}}])

-(defn- view-internal
+(defn view
  "Options
   - `type` `:words`/`:error`/`:info`/`:empty`.
   - `blur?` Boolean to enable blur background support.
@@ -34,43 +34,42 @@
   - `words` List of words to display in the keyboard.
   - `on-press` Callback called when a word is pressed `(fn [word])`
   - `theme` :light or :dark, received from with-theme HOC."
-  [{:keys [type blur? text words on-press theme]}]
-  [linear-gradient/linear-gradient
-   {:style               {:flex-direction :row}
-    :accessibility-label :predictive-keyboard
-    :colors              (if blur?
-                           (gradients :blur)
-                           (colors/theme-colors (gradients :light) (gradients :dark) theme))}
-   [rn/view {:style (style/wrapper type)}
-    (case type
-      :words
-      [rn/flat-list
-       {:keyboard-should-persist-taps      :always
-        :data                              words
-        :content-container-style           style/word-list
-        :render-fn                         word-component
-        :render-data                       {:on-press on-press}
-        :shows-horizontal-scroll-indicator false
-        :separator                         [separator]
-        :horizontal                        true
-        :key-fn                            str}]
+  [{:keys [type blur? text words on-press]}]
+  (let [theme (quo.theme/use-theme)]
+    [linear-gradient/linear-gradient
+     {:style               {:flex-direction :row}
+      :accessibility-label :predictive-keyboard
+      :colors              (if blur?
+                             (gradients :blur)
+                             (colors/theme-colors (gradients :light) (gradients :dark) theme))}
+     [rn/view {:style (style/wrapper type)}
+      (case type
+        :words
+        [rn/flat-list
+         {:keyboard-should-persist-taps      :always
+          :data                              words
+          :content-container-style           style/word-list
+          :render-fn                         word-component
+          :render-data                       {:on-press on-press}
+          :shows-horizontal-scroll-indicator false
+          :separator                         [separator]
+          :horizontal                        true
+          :key-fn                            str}]

-      :error
-      [info-message/info-message
-       {:icon :i/info
-        :size :default
-        :type :error}
-       text]
+        :error
+        [info-message/info-message
+         {:icon :i/info
+          :size :default
+          :type :error}
+         text]

-      :info
-      [info-message/info-message
-       (merge {:icon :i/info
-               :size :default
-               :type (if (= type :error) :error :default)}
-              (when blur?
-                {:text-color colors/white-opa-70
-                 :icon-color colors/white-opa-70}))
-       text]
-      nil)]])
-
-(def view (theme/with-theme view-internal))
+        :info
+        [info-message/info-message
+         (merge {:icon :i/info
+                 :size :default
+                 :type (if (= type :error) :error :default)}
+                (when blur?
+                  {:text-color colors/white-opa-70
+                   :icon-color colors/white-opa-70}))
+         text]
+        nil)]]))
@@ -48,7 +48,7 @@
  "
  [{:keys [on-complete track-text track-icon disabled? customization-color size
           container-style type blur?]}]
-  (let [theme                         (quo.theme/use-theme-value)
+  (let [theme                         (quo.theme/use-theme)
        x-pos                         (reanimated/use-shared-value 0)
        [track-width set-track-width] (rn/use-state nil)
        [sliding-complete?
@@ -3,12 +3,12 @@
    [quo.components.buttons.wallet-button.style :as style]
    [quo.components.icon :as quo.icons]
    [quo.foundations.colors :as colors]
-    [quo.theme :as theme]
+    [quo.theme]
    [react-native.core :as rn]))

 (defn view
  [{:keys [on-press on-long-press disabled? icon accessibility-label container-style]}]
-  (let [theme                  (theme/use-theme-value)
+  (let [theme                  (quo.theme/use-theme)
        [pressed? set-pressed] (rn/use-state false)
        on-press-in            (rn/use-callback #(set-pressed true))
        on-press-out           (rn/use-callback #(set-pressed nil))]
@@ -23,32 +23,31 @@
     :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))
+(defn view
+  [{:keys [buy-action send-action receive-action bridge-action]}]
+  (let [theme (quo.theme/use-theme)]
+    [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}]]))
@@ -4,13 +4,14 @@
    [quo.components.calendar.calendar.month-picker.style :as style]
    [quo.components.calendar.calendar.month-picker.utils :as utils]
    [quo.components.markdown.text :as text]
-    [quo.theme :as theme]
+    [quo.theme]
    [react-native.core :as rn]
    [utils.number :as utils.number]))

-(defn- view-internal
-  [{:keys [year month on-change theme]}]
-  (let [year  (utils.number/parse-int year)
+(defn view
+  [{:keys [year month on-change]}]
+  (let [theme (quo.theme/use-theme)
+        year  (utils.number/parse-int year)
        month (utils.number/parse-int month)]
    [rn/view
     {:style style/container}
@@ -35,5 +36,3 @@
       :type                    :outline
       :on-press                #(on-change (utils/next-month year month))}
      :i/chevron-right]]))
-
-(def view (theme/with-theme view-internal))
@@ -6,13 +6,13 @@
    [quo.components.calendar.calendar.utils :as utils]
    [quo.components.calendar.calendar.weekdays-header.view :as weekdays-header]
    [quo.components.calendar.calendar.years-list.view :as years-list]
-    [quo.theme :as theme]
+    [quo.theme]
    [react-native.core :as rn]
    [utils.number :as utils.number]))

 (defn view
  [{:keys [on-change start-date end-date]}]
-  (let [theme                               (theme/use-theme-value)
+  (let [theme                               (quo.theme/use-theme)
        [selected-year set-selected-year]   (rn/use-state (utils/current-year))
        [selected-month set-selected-month] (rn/use-state (utils/current-month))
        on-change-year                      (rn/use-callback #(set-selected-year %))
@@ -2,23 +2,22 @@
  (:require
    [quo.components.calendar.calendar.weekdays-header.style :as style]
    [quo.components.markdown.text :as text]
-    [quo.theme :as theme]
+    [quo.theme]
    [react-native.core :as rn]
    [utils.datetime :as datetime]
    [utils.i18n :as i18n]))

-(defn- view-internal
-  [theme]
-  [rn/view
-   {:style style/container-weekday-row}
-   (for [weekday datetime/weekday-names]
-     [rn/view
-      {:style style/container-weekday
-       :key   weekday}
-      [text/text
-       {:weight :medium
-        :size   :paragraph-2
-        :style  (style/text-weekdays theme)}
-       (str (i18n/label weekday))]])])
-
-(def view (theme/with-theme view-internal))
+(defn view
+  []
+  (let [theme (quo.theme/use-theme)]
+    [rn/view
+     {:style style/container-weekday-row}
+     (for [weekday datetime/weekday-names]
+       [rn/view
+        {:style style/container-weekday
+         :key   weekday}
+        [text/text
+         {:weight :medium
+          :size   :paragraph-2
+          :style  (style/text-weekdays theme)}
+         (str (i18n/label weekday))]])]))
@@ -3,7 +3,7 @@
    [quo.components.calendar.calendar-year.view :as calendar-year]
    [quo.components.calendar.calendar.utils :as utils]
    [quo.components.calendar.calendar.years-list.style :as style]
-    [quo.theme :as theme]
+    [quo.theme]
    [react-native.core :as rn]
    [react-native.linear-gradient :as linear-gradient]))

@@ -30,21 +30,20 @@
    :start  {:x 0 :y 0}
    :end    {:x 0 :y 1}}])

-(defn view-internal
-  [{:keys [on-change-year year theme]}]
-  [rn/view
-   {:style (style/container-years theme)}
-   [rn/flat-list
-    {:data                            (utils/generate-years (utils/current-year))
-     :key-fn                          str
-     :list-key                        :years-list
-     :inverted                        true
-     :shows-vertical-scroll-indicator false
-     :footer                          [footer]
-     :separator                       [separator]
-     :render-fn                       year-view
-     :render-data                     {:selected-year year
-                                       :on-press      #(on-change-year %)}}]
-   [gradiant-overview theme]])
-
-(def view (theme/with-theme view-internal))
+(defn view
+  [{:keys [on-change-year year]}]
+  (let [theme (quo.theme/use-theme)]
+    [rn/view
+     {:style (style/container-years theme)}
+     [rn/flat-list
+      {:data                            (utils/generate-years (utils/current-year))
+       :key-fn                          str
+       :list-key                        :years-list
+       :inverted                        true
+       :shows-vertical-scroll-indicator false
+       :footer                          [footer]
+       :separator                       [separator]
+       :render-fn                       year-view
+       :render-data                     {:selected-year year
+                                         :on-press      #(on-change-year %)}}]
+     [gradiant-overview theme]]))
@@ -2,31 +2,30 @@
  (:require
    [quo.components.calendar.calendar-day.style :as style]
    [quo.components.markdown.text :as text]
-    [quo.theme :as theme]
+    [quo.theme]
    [react-native.core :as rn]))

-(defn- view-internal
-  [{:keys [state in-range on-press customization-color theme]
+(defn view
+  [{:keys [state in-range on-press customization-color]
    :or   {state :default}}
   day]
-  [rn/view {:style style/wrapper}
-   [rn/view {:style (style/in-range-background {:in-range in-range :theme theme})}]
-   [rn/touchable-opacity
-    {:on-press on-press
-     :style    (style/container
+  (let [theme (quo.theme/use-theme)]
+    [rn/view {:style style/wrapper}
+     [rn/view {:style (style/in-range-background {:in-range in-range :theme theme})}]
+     [rn/touchable-opacity
+      {:on-press on-press
+       :style    (style/container
+                  {:state               state
+                   :theme               theme
+                   :customization-color customization-color})
+       :disabled (= state :disabled)}
+      [text/text
+       {:weight :medium
+        :size   :paragraph-2
+        :style  (style/text {:state state :theme theme})}
+       day]
+      [rn/view
+       {:style (style/indicator
                {:state               state
                 :theme               theme
-                 :customization-color customization-color})
-     :disabled (= state :disabled)}
-    [text/text
-     {:weight :medium
-      :size   :paragraph-2
-      :style  (style/text {:state state :theme theme})}
-     day]
-    [rn/view
-     {:style (style/indicator
-              {:state               state
-               :theme               theme
-               :customization-color customization-color})}]]])
-
-(def view (theme/with-theme view-internal))
+                 :customization-color customization-color})}]]]))
@@ -2,24 +2,23 @@
  (:require
    [quo.components.calendar.calendar-year.style :as style]
    [quo.components.markdown.text :as text]
-    [quo.theme :as theme]
+    [quo.theme]
    [react-native.core :as rn]))

-(defn- view-internal
-  [{:keys [selected? disabled? on-press theme]} year]
-  [rn/touchable-opacity
-   {:on-press on-press
-    :style    (style/container
-               {:selected? selected?
-                :disabled? disabled?
-                :theme     theme})
-    :disabled disabled?}
-   [text/text
-    {:weight :medium
-     :size   :paragraph-2
-     :style  (style/text
-              {:selected? selected?
-               :theme     theme})}
-    year]])
-
-(def view (theme/with-theme view-internal))
+(defn view
+  [{:keys [selected? disabled? on-press]} year]
+  (let [theme (quo.theme/use-theme)]
+    [rn/touchable-opacity
+     {:on-press on-press
+      :style    (style/container
+                 {:selected? selected?
+                  :disabled? disabled?
+                  :theme     theme})
+      :disabled disabled?}
+     [text/text
+      {:weight :medium
+       :size   :paragraph-2
+       :style  (style/text
+                {:selected? selected?
+                 :theme     theme})}
+      year]]))
@@ -1,16 +1,12 @@
 (ns quo.components.code.snippet.view
  (:require
-    [quo.components.code.common.view :as code-common]
-    [quo.theme :as theme]))
+    [quo.components.code.common.view :as code-common]))

-(defn- view-internal
-  [_]
-  (fn [{:keys [language max-lines on-copy-press]} children]
-    [code-common/view
-     {:language      language
-      :max-lines     max-lines
-      :on-copy-press on-copy-press
-      :preview?      false}
-     children]))
-
-(def view (theme/with-theme view-internal))
+(defn view
+  [{:keys [language max-lines on-copy-press]} children]
+  [code-common/view
+   {:language      language
+    :max-lines     max-lines
+    :on-copy-press on-copy-press
+    :preview?      false}
+   children])
@@ -14,16 +14,11 @@
   [rn/view {:style (style/left-half theme)}]
   [rn/view {:style (style/right-half theme)}]])

-(defn- view-internal
-  [{:keys [color
-           selected?
-           on-press
-           blur?
-           theme
-           idx
-           window-width]
+(defn view
+  [{:keys [color selected? on-press blur? idx window-width]
    :as   props}]
-  (let [border?   (and (not blur?) (not selected?))
+  (let [theme     (quo.theme/use-theme)
+        border?   (and (not blur?) (not selected?))
        hex-color (if (= :feng-shui color)
                    (colors/theme-colors colors/neutral-100 colors/white theme)
                    (colors/theme-colors (colors/custom-color color 50)
@@ -38,6 +33,7 @@
     (if (and (= :feng-shui color) (not selected?))
       [feng-shui
        (assoc props
+               :theme     theme
               :hex-color hex-color
               :border?   border?)]
       [rn/view
@@ -49,5 +45,3 @@
            :color (if (= :feng-shui color)
                     (colors/theme-colors colors/white colors/neutral-100 theme)
                     colors/white)}])])]))
-
-(def view (quo.theme/with-theme view-internal))
@@ -4,9 +4,8 @@
    [quo.theme :as quo.theme]
    [react-native.core :as rn]))

-(defn- view-internal
-  [{:keys [blur? theme]}]
-  [rn/text {:style (style/text blur? theme)}
-   "not implemented"])
-
-(def view (quo.theme/with-theme view-internal))
+(defn view
+  [{:keys [blur?]}]
+  (let [theme (quo.theme/use-theme)]
+    [rn/text {:style (style/text blur? theme)}
+     "not implemented"]))
@@ -4,12 +4,11 @@
    [quo.theme :as quo.theme]
    [react-native.core :as rn]))

-(defn view-internal
-  [{:keys [customization-color style theme blur?]}]
-  [rn/view
-   {:accessibility-label :notification-dot
-    :style               (merge
-                          (style/notification-dot customization-color theme blur?)
-                          style)}])
-
-(def view (quo.theme/with-theme view-internal))
+(defn view
+  [{:keys [customization-color style blur?]}]
+  (let [theme (quo.theme/use-theme)]
+    [rn/view
+     {:accessibility-label :notification-dot
+      :style               (merge
+                            (style/notification-dot customization-color theme blur?)
+                            style)}]))
@@ -1,16 +1,19 @@
 (ns quo.components.common.separator.view
  (:require
    [quo.foundations.colors :as quo.colors]
+    [quo.theme]
    [react-native.core :as rn]))

 (defn separator
  [{:keys [style]}]
-  [rn/view
-   {:style
-    (merge
-     style
-     {:background-color (quo.colors/theme-colors
-                         quo.colors/neutral-10
-                         quo.colors/neutral-80)
-      :align-self       :stretch
-      :height           1})}])
+  (let [theme (quo.theme/use-theme)]
+    [rn/view
+     {:style
+      (merge
+       style
+       {:background-color (quo.colors/theme-colors
+                           quo.colors/neutral-10
+                           quo.colors/neutral-80
+                           theme)
+        :align-self       :stretch
+        :height           1})}]))
@@ -2,10 +2,12 @@
  (:require
    [quo.foundations.colors :as colors]))

-(def unread-grey-dot
+(defn unread-grey-dot
+  [theme]
  {:width            8
   :height           8
   :border-radius    4
   :background-color (colors/theme-colors
                      colors/neutral-40
-                      colors/neutral-60)})
+                      colors/neutral-60
+                      theme)})
@@ -1,10 +1,12 @@
 (ns quo.components.common.unread-grey-dot.view
  (:require
    [quo.components.common.unread-grey-dot.style :as style]
+    [quo.theme]
    [react-native.core :as rn]))

 (defn unread-grey-dot
  [accessibility-label]
-  [rn/view
-   (cond-> {:style style/unread-grey-dot}
-     accessibility-label (assoc :accessibility-label accessibility-label :accessible true))])
+  (let [theme (quo.theme/use-theme)]
+    [rn/view
+     (cond-> {:style (style/unread-grey-dot theme)}
+       accessibility-label (assoc :accessibility-label accessibility-label :accessible true))]))
@@ -3,7 +3,7 @@
    [quo.components.community.banner.style :as style]
    [quo.components.markdown.text :as text]
    [quo.foundations.colors :as colors]
-    [quo.theme :as theme]
+    [quo.theme]
    [react-native.core :as rn]))

 (defn- card-title-and-description
@@ -26,16 +26,15 @@
      :size                :paragraph-2}
     description]]])

-(defn view-internal
-  [{:keys [title description on-press accessibility-label banner style theme]}]
-  [rn/touchable-without-feedback
-   {:on-press            on-press
-    :accessibility-label accessibility-label}
-   [rn/view {:style (merge (style/community-card theme) style)}
-    [card-title-and-description title description theme]
-    [rn/image
-     {:style               style/discover-illustration
-      :source              banner
-      :accessibility-label :discover-communities-illustration}]]])
-
-(def view (theme/with-theme view-internal))
+(defn view
+  [{:keys [title description on-press accessibility-label banner style]}]
+  (let [theme (quo.theme/use-theme)]
+    [rn/touchable-without-feedback
+     {:on-press            on-press
+      :accessibility-label accessibility-label}
+     [rn/view {:style (merge (style/community-card theme) style)}
+      [card-title-and-description title description theme]
+      [rn/image
+       {:style               style/discover-illustration
+        :source              banner
+        :accessibility-label :discover-communities-illustration}]]]))
@@ -9,7 +9,7 @@

 (defn view
  [{:keys [big? customization-color label counter-value icon on-press accessibility-label disabled?]}]
-  (let [theme                  (quo.theme/use-theme-value)
+  (let [theme                  (quo.theme/use-theme)
        [pressed? set-pressed] (rn/use-state false)
        on-press-in            (rn/use-callback #(set-pressed true))
        on-press-out           (rn/use-callback #(set-pressed false))]
@@ -7,33 +7,34 @@
    [react-native.core :as rn]))

 (defn- loading-card-view
-  [{:keys [width theme]}]
-  [rn/view {:style (style/loading-card width theme)}
-   [rn/view (style/loading-cover-container theme)]
-   [rn/view (style/loading-content-container theme)
-    [rn/view (style/loading-avatar theme)]
-    [rn/view (style/loading-lock theme)]
-    [rn/view
-     {:style style/loading-card-content-container}
-     [rn/view {:style (style/loading-content-line {:theme theme :width 84 :margin-top 0})}]
-     [rn/view {:style (style/loading-content-line {:theme theme :width 311 :margin-top 8})}]
-     [rn/view {:style (style/loading-content-line {:theme theme :width 271 :margin-top 8})}]]
-    [rn/view
-     {:style style/loading-stats-container}
-     [rn/view {:style (style/loading-stat-circle theme 0)}]
-     [rn/view {:style (style/loading-stat-line theme 4)}]
-     [rn/view {:style (style/loading-stat-circle theme 12)}]
-     [rn/view {:style (style/loading-stat-line theme 4)}]]
-    [rn/view
-     {:style style/loading-tags-container}
-     [rn/view {:style (style/loading-tag theme 0)}]
-     [rn/view {:style (style/loading-tag theme 8)}]
-     [rn/view {:style (style/loading-tag theme 8)}]]]])
+  [{:keys [width]}]
+  (let [theme (quo.theme/use-theme)]
+    [rn/view {:style (style/loading-card width theme)}
+     [rn/view (style/loading-cover-container theme)]
+     [rn/view (style/loading-content-container theme)
+      [rn/view (style/loading-avatar theme)]
+      [rn/view (style/loading-lock theme)]
+      [rn/view
+       {:style style/loading-card-content-container}
+       [rn/view {:style (style/loading-content-line {:theme theme :width 84 :margin-top 0})}]
+       [rn/view {:style (style/loading-content-line {:theme theme :width 311 :margin-top 8})}]
+       [rn/view {:style (style/loading-content-line {:theme theme :width 271 :margin-top 8})}]]
+      [rn/view
+       {:style style/loading-stats-container}
+       [rn/view {:style (style/loading-stat-circle theme 0)}]
+       [rn/view {:style (style/loading-stat-line theme 4)}]
+       [rn/view {:style (style/loading-stat-circle theme 12)}]
+       [rn/view {:style (style/loading-stat-line theme 4)}]]
+      [rn/view
+       {:style style/loading-tags-container}
+       [rn/view {:style (style/loading-tag theme 0)}]
+       [rn/view {:style (style/loading-tag theme 8)}]
+       [rn/view {:style (style/loading-tag theme 8)}]]]]))

 (defn- community-card-view
-  [{:keys [community on-press width theme]}]
-  (let [{:keys [name description locked? images cover
-                status tokens tags]} community]
+  [{:keys [community on-press width]}]
+  (let [theme                                                              (quo.theme/use-theme)
+        {:keys [name description locked? images cover status tokens tags]} community]
    [rn/touchable-without-feedback
     {:accessibility-label :community-card-item
      :on-press            on-press}
@@ -68,10 +69,8 @@
         [rn/view {:style (style/community-tags-position)}
          [community-view/community-tags {:tags tags}]]]]]]]))

-(defn- internal-view
+(defn view
  [{:keys [loading?] :as props}]
  (if-not loading?
    [community-card-view props]
    [loading-card-view props]))
-
-(def view (quo.theme/with-theme internal-view))
@@ -0,0 +1,71 @@
+(ns quo.components.community.community-detail-token-gating.component-spec
+  (:require
+    [quo.core :as quo]
+    [test-helpers.component :as h]))
+
+(h/describe "Community Detail Token Gating Component"
+  (h/test "render with member permissions"
+    (h/render
+     [quo/community-detail-token-gating
+      {:permissions [{:role       2
+                      :role-text  "Member"
+                      :satisfied? true
+                      :tokens     [[{:symbol       "ETH"
+                                     :sufficient?  true
+                                     :collectible? false
+                                     :amount       0.8
+                                     :img-src      nil}]
+                                   [{:symbol       "ETH"
+                                     :sufficient?  false
+                                     :collectible? false
+                                     :amount       1
+                                     :img-src      nil}
+                                    {:symbol       "STT"
+                                     :sufficient?  false
+                                     :collectible? false
+                                     :amount       10
+                                     :img-src      nil}]]}]}])
+    (h/is-truthy (h/get-by-translation-text :t/you-eligible-to-join-as {:role "Member"}))
+    (h/is-truthy (h/get-by-text "0.8 ETH"))
+    (h/is-truthy (h/get-by-text "1 ETH"))
+    (h/is-truthy (h/get-by-text "10 STT")))
+
+  (h/test "render with admin permissions"
+    (h/render
+     [quo/community-detail-token-gating
+      {:permissions [{:role       1
+                      :role-text  "Admin"
+                      :satisfied? true
+                      :tokens     [[{:symbol       "ETH"
+                                     :sufficient?  true
+                                     :collectible? false
+                                     :amount       2
+                                     :img-src      nil}]]}]}])
+    (h/is-truthy (h/get-by-translation-text :t/you-eligible-to-join-as {:role "Admin"}))
+    (h/is-truthy (h/get-by-text "2 ETH")))
+
+  (h/test "render with token master permissions"
+    (h/render-with-theme-provider
+     [quo/community-detail-token-gating
+      {:permissions [{:role       5
+                      :role-text  "Token Master"
+                      :satisfied? true
+                      :tokens     [[{:symbol       "TMANI "
+                                     :sufficient?  true
+                                     :collectible? true
+                                     :img-src      {:uri "mock-image"}}]]}]}])
+    (h/is-truthy (h/get-by-translation-text :t/you-eligible-to-join-as {:role "Token Master"}))
+    (h/is-truthy (h/get-by-text "TMANI")))
+
+  (h/test "render with token owner permissions"
+    (h/render-with-theme-provider
+     [quo/community-detail-token-gating
+      {:permissions [{:role       6
+                      :role-text  "Token Owner"
+                      :satisfied? true
+                      :tokens     [[{:symbol       "TOANI"
+                                     :sufficient?  true
+                                     :collectible? true
+                                     :img-src      {:uri "mock-image"}}]]}]}])
+    (h/is-truthy (h/get-by-translation-text :t/you-eligible-to-join-as {:role "Token Owner"}))
+    (h/is-truthy (h/get-by-text "TOANI"))))
@@ -0,0 +1,20 @@
+(ns quo.components.community.community-detail-token-gating.style)
+
+(def container
+  {:padding-horizontal 20
+   :margin-vertical    -4})
+
+(defn token-row
+  [first?]
+  {:flex-direction :row
+   :margin-top     (if first? 8 4)
+   :row-gap        10
+   :column-gap     8
+   :flex-wrap      :wrap
+   :margin-bottom  16})
+
+(def divider
+  {:padding-left 0
+   :height       28
+   :padding-top  0
+   :align-items  :flex-start})
@@ -0,0 +1,76 @@
+(ns quo.components.community.community-detail-token-gating.view
+  (:require [clojure.string :as string]
+            [quo.components.community.community-detail-token-gating.style :as style]
+            [quo.components.dividers.divider-label.view :as divider-label]
+            [quo.components.markdown.text :as text]
+            [quo.components.tags.collectible-tag.view :as collectible-tag]
+            [quo.components.tags.token-tag.view :as token-tag]
+            [quo.foundations.colors :as colors]
+            [quo.theme]
+            [react-native.core :as rn]
+            [utils.i18n :as i18n]))
+
+(defn- token-view
+  [{:keys [collectible? img-src amount sufficient?] :as token}]
+  (let [token-symbol (:symbol token)]
+    (if collectible?
+      [collectible-tag/view
+       {:collectible-name    token-symbol
+        :size                :size-24
+        :collectible-img-src img-src
+        :options             (when sufficient?
+                               :hold)}]
+      [token-tag/view
+       {:token-symbol  token-symbol
+        :size          :size-24
+        :token-value   amount
+        :token-img-src img-src
+        :options       (when sufficient? :hold)}])))
+
+(defn- tokens-row
+  [{:keys [tokens divider? first?]}]
+  (let [theme (quo.theme/use-theme)]
+    [:<>
+     [rn/view
+      {:style (style/token-row first?)}
+      (map-indexed (fn [token-index token]
+                     ^{:key (str "token-" token-index)}
+                     [token-view token])
+                   tokens)]
+     (when-not divider?
+       [divider-label/view
+        {:container-style style/divider}
+        [text/text
+         {:size  :label
+          :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
+         (string/lower-case (i18n/label :t/or))]])]))
+
+(defn- role-view
+  [{:keys [role tokens satisfied? role-text]}]
+  (when (seq tokens)
+    ^{:key (str "role-" role)}
+    [:<>
+     [text/text
+      {:size   :paragraph-1
+       :weight :medium
+       :style  {:margin-top 4}}
+      (if satisfied?
+        (i18n/label :t/you-eligible-to-join-as {:role role-text})
+        (i18n/label :t/you-not-eligible-to-join-as {:role role-text}))]
+     [text/text
+      {:size  :paragraph-2
+       :style {:margin-bottom 8}}
+      (i18n/label (if satisfied? :t/you-hodl :t/you-must-hold))]
+
+     (map-indexed (fn [index tokens-item]
+                    ^{:key (str role "-tokens-" index)}
+                    [tokens-row
+                     {:tokens   tokens-item
+                      :first?   (zero? index)
+                      :divider? (= index (dec (count tokens)))}])
+                  tokens)]))
+
+(defn view
+  [{:keys [permissions]}]
+  [rn/view {:style style/container}
+   (map role-view permissions)])
@@ -38,110 +38,94 @@
     unread-messages?
     [unread-grey-dot :unviewed-messages-public])])

-(defn- communities-list-view-item-internal
-  [{:keys [theme customization-color] :as props}
-   {:keys [name
-           locked?
-           status
-           muted
-           unread-messages?
-           unread-mentions-count
-           community-icon
-           tokens]}]
-  [rn/view
-   {:style (merge (style/community-card 16 theme)
-                  {:margin-bottom 12})}
-   [rn/touchable-highlight
-    (merge {:style {:height        56
-                    :border-radius 16}}
-           props)
-    [rn/view {:style style/detail-container}
-     [rn/view (style/list-info-container)
+(defn communities-list-view-item
+  [{:keys [customization-color] :as props}
+   {:keys [name locked? status muted unread-messages? unread-mentions-count community-icon tokens]}]
+  (let [theme (quo.theme/use-theme)]
+    [rn/view
+     {:style (merge (style/community-card 16 theme)
+                    {:margin-bottom 12})}
+     [rn/touchable-highlight
+      (merge {:style {:height        56
+                      :border-radius 16}}
+             props)
+      [rn/view {:style style/detail-container}
+       [rn/view (style/list-info-container)
+        [community-icon/community-icon
+         {:images community-icon} 32]
+        [rn/view
+         {:flex              1
+          :margin-horizontal 12}
+         [text/text
+          {:weight              :semi-bold
+           :size                :paragraph-1
+           :accessibility-label :community-name-text
+           :number-of-lines     1
+           :ellipsize-mode      :tail
+           :style               {:color (when muted
+                                          (colors/theme-colors
+                                           colors/neutral-40
+                                           colors/neutral-60
+                                           theme))}}
+          name]
+         [community-view/community-stats-column
+          {:type :list-view}]]
+        (if (= status :gated)
+          [community-view/permission-tag-container
+           {:locked? locked?
+            :tokens  tokens}]
+          [notification-view
+           {:customization-color   customization-color
+            :theme                 theme
+            :muted?                muted
+            :unread-mentions-count unread-mentions-count
+            :unread-messages?      unread-messages?}])]]]]))
+
+(defn communities-membership-list-item
+  [{:keys [customization-color] :as props}
+   bottom-sheet?
+   {:keys [name muted unviewed-messages-count unviewed-mentions-count status
+           images tokens locked? style]}]
+  (let [theme (quo.theme/use-theme)]
+    [rn/touchable-highlight
+     (merge {:underlay-color (colors/theme-colors
+                              colors/neutral-5
+                              colors/neutral-95
+                              theme)
+             :style          {:border-radius 12
+                              :margin-left   12}}
+            props)
+     [rn/view (merge (style/membership-info-container) style)
      [community-icon/community-icon
-       {:images community-icon} 32]
+       {:images images} 32]
      [rn/view
-       {:flex              1
-        :margin-horizontal 12}
+       {:flex            1
+        :margin-left     12
+        :justify-content :center}
       [text/text
-        {:weight              :semi-bold
-         :size                :paragraph-1
-         :accessibility-label :community-name-text
+        {:accessibility-label :chat-name-text
         :number-of-lines     1
         :ellipsize-mode      :tail
-         :style               {:color (when muted
-                                        (colors/theme-colors
+         :weight              :semi-bold
+         :size                :paragraph-1
+         :style               (when muted
+                                {:color (colors/theme-colors
                                         colors/neutral-40
                                         colors/neutral-60
-                                         theme))}}
-        name]
-       [community-view/community-stats-column
-        {:type :list-view}]]
-      (if (= status :gated)
-        [community-view/permission-tag-container
-         {:locked? locked?
-          :tokens  tokens}]
-        [notification-view
-         {:customization-color   customization-color
-          :theme                 theme
-          :muted?                muted
-          :unread-mentions-count unread-mentions-count
-          :unread-messages?      unread-messages?}])]]]])
+                                         theme)})}
+        name]]

-(def communities-list-view-item (quo.theme/with-theme communities-list-view-item-internal))
-
-(defn- communities-membership-list-item-internal
-  [{:keys [theme customization-color] :as props}
-   bottom-sheet?
-   {:keys [name
-           muted
-           unviewed-messages-count
-           unviewed-mentions-count
-           status
-           images
-           tokens
-           locked?
-           style]}]
-  [rn/touchable-highlight
-   (merge {:underlay-color (colors/theme-colors
-                            colors/neutral-5
-                            colors/neutral-95
-                            theme)
-           :style          {:border-radius 12
-                            :margin-left   12}}
-          props)
-   [rn/view (merge (style/membership-info-container) style)
-    [community-icon/community-icon
-     {:images images} 32]
-    [rn/view
-     {:flex            1
-      :margin-left     12
-      :justify-content :center}
-     [text/text
-      {:accessibility-label :chat-name-text
-       :number-of-lines     1
-       :ellipsize-mode      :tail
-       :weight              :semi-bold
-       :size                :paragraph-1
-       :style               (when muted
-                              {:color (colors/theme-colors
-                                       colors/neutral-40
-                                       colors/neutral-60
-                                       theme)})}
-      name]]
-
-    [rn/view
-     {:justify-content :center
-      :margin-right    (when bottom-sheet?
-                         16)}
-     (if (= status :gated)
-       [community-view/permission-tag-container
-        {:locked? locked?
-         :tokens  tokens}]
-       [notification-view
-        {:theme                 theme
-         :customization-color   customization-color
-         :muted?                muted
-         :unread-mentions-count unviewed-mentions-count
-         :unread-messages?      (pos? unviewed-messages-count)}])]]])
-
-(def communities-membership-list-item (quo.theme/with-theme communities-membership-list-item-internal))
+      [rn/view
+       {:justify-content :center
+        :margin-right    (when bottom-sheet?
+                           16)}
+       (if (= status :gated)
+         [community-view/permission-tag-container
+          {:locked? locked?
+           :tokens  tokens}]
+         [notification-view
+          {:theme                 theme
+           :customization-color   customization-color
+           :muted?                muted
+           :unread-mentions-count unviewed-mentions-count
+           :unread-messages?      (pos? unviewed-messages-count)}])]]]))
@@ -7,20 +7,19 @@
            [react-native.core :as rn]
            utils.money))

-(defn view-internal
-  [{:keys [value icon theme style accessibility-label text-size]}]
-  [rn/view
-   {:style               (merge style/container style)
-    :accessibility-label accessibility-label}
-   [quo.icons/icon icon
-    {:size            16
-     :container-style {:align-items     :center
-                       :justify-content :center}
-     :resize-mode     :center
-     :color           (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]
-   [quo.text/text
-    {:size   (or text-size :paragraph-1)
-     :weight :regular
-     :style  (style/text theme)} (utils.money/format-amount value)]])
-
-(def view (quo.theme/with-theme view-internal))
+(defn view
+  [{:keys [value icon style accessibility-label text-size]}]
+  (let [theme (quo.theme/use-theme)]
+    [rn/view
+     {:style               (merge style/container style)
+      :accessibility-label accessibility-label}
+     [quo.icons/icon icon
+      {:size            16
+       :container-style {:align-items     :center
+                         :justify-content :center}
+       :resize-mode     :center
+       :color           (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]
+     [quo.text/text
+      {:size   (or text-size :paragraph-1)
+       :weight :regular
+       :style  (style/text theme)} (utils.money/format-amount value)]]))
@@ -6,7 +6,7 @@
    [quo.components.tags.permission-tag :as permission]
    [quo.components.tags.tag :as tag]
    [quo.foundations.colors :as colors]
-    [quo.theme :as theme]
+    [quo.theme]
    [react-native.core :as rn]
    [react-native.gesture :as gesture]))

@@ -70,16 +70,15 @@
       :style               {:margin-top (if (= size :large) 8 2)}}
      description])])

-(defn- permission-tag-container-internal
-  [{:keys [locked? blur? tokens on-press theme]}]
-  [permission/tag
-   {:accessibility-label :permission-tag
-    :background-color    (if (and (= :dark theme) blur?)
-                           colors/white-opa-10
-                           (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))
-    :locked?             locked?
-    :tokens              tokens
-    :size                24
-    :on-press            on-press}])
-
-(def permission-tag-container (theme/with-theme permission-tag-container-internal))
+(defn permission-tag-container
+  [{:keys [locked? blur? tokens on-press]}]
+  (let [theme (quo.theme/use-theme)]
+    [permission/tag
+     {:accessibility-label :permission-tag
+      :background-color    (if (and (= :dark theme) blur?)
+                             colors/white-opa-10
+                             (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))
+      :locked?             locked?
+      :tokens              tokens
+      :size                24
+      :on-press            on-press}]))
@@ -102,7 +102,7 @@
   :right    8})

 (def token-tag-spacing
-  {:margin-top   10
+  {:padding-top  10
   :margin-right 8})

 (defn token-row
@@ -117,11 +117,12 @@
 (defn token-row-or-text
  [padding? theme]
  (merge
-   {:margin-top 4
-    :color      (colors/theme-colors
-                 colors/neutral-50
-                 colors/neutral-40
-                 theme)}
+   {:padding-top   4
+    :margin-bottom -2
+    :color         (colors/theme-colors
+                    colors/neutral-50
+                    colors/neutral-40
+                    theme)}
   (when padding?
     {:padding-left 12})))

@@ -24,22 +24,21 @@
                                      purchasable? :add)}]])
                tokens)])

-(defn- internal-view
-  [{:keys [tokens padding? theme]}]
-  [:<>
-   (if (> (count tokens) 1)
-     (map-indexed
-      (fn [token-requirement-index tokens]
-        ^{:key token-requirement-index}
-        [rn/view {:margin-bottom 12}
-         (when-not (= token-requirement-index 0)
-           [rn/view {:style (style/token-row-or-border theme)}])
-         (when-not (= token-requirement-index 0)
-           [text/text
-            {:style (style/token-row-or-text padding? theme)
-             :size  :label} (string/lower-case (i18n/label :t/or))])
-         [token-requirement-list-row tokens padding?]])
-      tokens)
-     [token-requirement-list-row (first tokens) padding?])])
-
-(def token-requirement-list (quo.theme/with-theme internal-view))
+(defn token-requirement-list
+  [{:keys [tokens padding?]}]
+  (let [theme (quo.theme/use-theme)]
+    [:<>
+     (if (> (count tokens) 1)
+       (map-indexed
+        (fn [token-requirement-index tokens]
+          ^{:key token-requirement-index}
+          [rn/view {:margin-bottom 12}
+           (when-not (= token-requirement-index 0)
+             [rn/view {:style (style/token-row-or-border theme)}])
+           (when-not (= token-requirement-index 0)
+             [text/text
+              {:style (style/token-row-or-text padding? theme)
+               :size  :label} (string/lower-case (i18n/label :t/or))])
+           [token-requirement-list-row tokens padding?]])
+        tokens)
+       [token-requirement-list-row (first tokens) padding?])]))
@@ -3,14 +3,14 @@
    [quo.foundations.colors :as colors]))

 (defn- get-background-color
-  [{:keys [status theme]}]
+  [{:keys [status]} theme]
  (case status
    :default (colors/theme-colors colors/white-opa-70 colors/neutral-95-opa-70 theme)
    :error   (colors/resolve-color :danger theme 10)
    (colors/theme-colors colors/white-opa-70 colors/neutral-95-opa-70 theme)))

 (defn- get-container-border-styles
-  [{:keys [status theme]}]
+  [{:keys [status]} theme]
  (when (= status :error)
    {:border-color (colors/resolve-color :danger theme 20)
     :border-width 1}))
@@ -29,17 +29,17 @@
      style-size-32)))

 (defn container
-  [props]
+  [props theme]
  (merge {:align-self       :flex-start
          :flex-direcrion   :row
          :justify-content  :center
          :border-radius    999
-          :background-color (get-background-color props)}
-         (get-container-border-styles props)
+          :background-color (get-background-color props theme)}
+         (get-container-border-styles props theme)
         (get-container-styles-by-size props)))

 (defn- get-text-color
-  [{:keys [status theme]}]
+  [{:keys [status]} theme]
  (case status
    :default (colors/theme-colors colors/neutral-100 colors/white theme)
    :error   (colors/resolve-color :danger theme)
@@ -53,5 +53,5 @@
    :paragraph-1))

 (defn text
-  [props]
-  {:color (get-text-color props)})
+  [props theme]
+  {:color (get-text-color props theme)})
@@ -15,26 +15,24 @@
      [:value {:optional true} [:maybe [:or :string :int]]]
      [:status {:optional true} [:maybe :keyword]]
      [:size {:optional true} [:maybe [:enum :size-32 :size-24]]]
-      [:accessibility-label {:optional true} [:maybe :keyword]]
-      [:theme :schema.common/theme]]]]
+      [:accessibility-label {:optional true} [:maybe :keyword]]]]]
   :any])

 (defn- view-internal
  [{:keys [value accessibility-label container-style]
    :as   props}]
-  (let [default-props {:status :default
+  (let [theme         (quo.theme/use-theme)
+        default-props {:status :default
                       :size   :size-32}
        props         (merge default-props props)]
    [rn/view
     {:accessible          true
      :accessibility-label (or accessibility-label :collectible-counter)
-      :style               (merge (style/container props) container-style)}
+      :style               (merge (style/container props theme) container-style)}
     [text/text
      {:weight :medium
       :size   (style/get-text-size props)
-       :style  (style/text props)}
+       :style  (style/text props theme)}
      value]]))

-(def view
-  (quo.theme/with-theme
-   (schema/instrument #'view-internal ?schema)))
+(def view (schema/instrument #'view-internal ?schema))
@@ -7,11 +7,12 @@
    [react-native.core :as rn]
    [utils.number]))

-(defn- view-internal
-  [{:keys [type customization-color theme container-style accessibility-label max-value]
-    :or   {max-value 99 customization-color :blue theme :dark}}
+(defn view
+  [{:keys [type customization-color container-style accessibility-label max-value]
+    :or   {max-value 99 customization-color :blue}}
   value]
-  (let [type  (or type :default)
+  (let [theme (quo.theme/use-theme)
+        type  (or type :default)
        value (utils.number/parse-int value)
        label (if (> value max-value)
                (str max-value "+")
@@ -33,5 +34,3 @@
       :size   :label
       :style  (when (= type :default) {:color colors/white})}
      label]]))
-
-(def view (quo.theme/with-theme view-internal))
@@ -15,14 +15,14 @@
      [:accessibility-label {:optional true} [:maybe :keyword]]
      [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
      [:in-blur-view? {:optional true} [:maybe :boolean]]
-      [:theme :schema.common/theme]
      [:type {:optional true} [:enum :active :complete :neutral]]]]
    [:value [:maybe [:or :string :int]]]]
   :any])

 (defn- view-internal
-  [{:keys [type accessibility-label theme in-blur-view? customization-color]} value]
-  (let [type  (or type :neutral)
+  [{:keys [type accessibility-label in-blur-view? customization-color]} value]
+  (let [theme (quo.theme/use-theme)
+        type  (or type :neutral)
        value (utils.number/parse-int value)
        label (str value)
        size  (count label)]
@@ -40,6 +40,4 @@
       :style  {:color (style/text-color type theme)}}
      label]]))

-(def view
-  (quo.theme/with-theme
-   (schema/instrument #'view-internal ?schema)))
+(def view (schema/instrument #'view-internal ?schema))
@@ -3,21 +3,25 @@
    [quo.components.common.separator.view :as separator]
    [quo.components.markdown.text :as text]
    [quo.foundations.colors :as colors]
+    [quo.theme]
    [react-native.core :as rn]))

 (defn date
  [value]
-  [rn/view
-   {:padding-top    8
-    :padding-bottom 12
-    :padding-right  20
-    :padding-left   60}
-   [text/text
-    {:weight              :medium
-     :accessibility-label :divider-date-text
-     :size                :label
-     :style               {:color          (colors/theme-colors colors/neutral-50 colors/neutral-40)
-                           :text-transform :capitalize
-                           :margin-bottom  4}}
-    value]
-   [separator/separator]])
+  (let [theme (quo.theme/use-theme)]
+    [rn/view
+     {:padding-top    8
+      :padding-bottom 12
+      :padding-right  20
+      :padding-left   60}
+     [text/text
+      {:weight              :medium
+       :accessibility-label :divider-date-text
+       :size                :label
+       :style               {:color          (colors/theme-colors colors/neutral-50
+                                                                  colors/neutral-40
+                                                                  theme)
+                             :text-transform :capitalize
+                             :margin-bottom  4}}
+      value]
+     [separator/separator]]))
@@ -20,42 +20,35 @@
  - `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]
+  [{:keys [counter? counter-value chevron chevron-icon tight? blur? 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])])
+  (let [theme (quo.theme/use-theme)]
+    [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))
+  ([props label] [view-internal props label])
  ([label] [view {} label]))
@@ -3,7 +3,7 @@
    [quo.foundations.colors :as colors]))

 (defn divider-line
-  [{:keys [blur? container-style theme]}]
+  [{:keys [blur? container-style]} theme]
  (merge
   {:border-color        (if blur?
                           (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
@@ -4,8 +4,7 @@
    [quo.theme :as quo.theme]
    [react-native.core :as rn]))

-(defn- view-internal
+(defn view
  [props]
-  [rn/view {:style (style/divider-line props)}])
-
-(def view (quo.theme/with-theme view-internal))
+  (let [theme (quo.theme/use-theme)]
+    [rn/view {:style (style/divider-line props theme)}]))
@@ -6,10 +6,11 @@
    [react-native.core :as rn]
    [react-native.linear-gradient :as linear-gradient]))

-(defn- view-internal
+(defn view
  "new-messages params - label, customization-color, theme"
-  [{:keys [label customization-color theme] :or {customization-color :blue}}]
-  (let [bg-color   (colors/resolve-color customization-color theme 5)
+  [{:keys [label customization-color] :or {customization-color :blue}}]
+  (let [theme      (quo.theme/use-theme)
+        bg-color   (colors/resolve-color customization-color theme 5)
        text-color (colors/resolve-color customization-color theme)]
    [linear-gradient/linear-gradient
     {:colors [bg-color "rgba(0,0,0,0)"]
@@ -24,5 +25,3 @@
        :weight :medium
        :style  {:color text-color}}
       label]]]))
-
-(def view (quo.theme/with-theme view-internal))
@@ -26,88 +26,73 @@
    [rn/view (dissoc props :on-press) child]
    [rn/touchable-highlight props child]))

-(defn- action-internal
-  [{:keys [icon
-           label
-           sub-label
-           right-icon
-           right-text
-           danger?
-           disabled?
-           on-press
-           add-divider?
-           theme
-           accessibility-label
-           icon-color
-           no-icon-color?
-           state
-           customization-color
-           blur?]}]
-  [:<>
-   (when add-divider?
-     [divider theme blur?])
-   [maybe-pressable disabled?
-    {:accessibility-label accessibility-label
-     :style               (style/container {:sub-label           sub-label
-                                            :disabled?           disabled?
-                                            :state               state
-                                            :customization-color customization-color
-                                            :blur?               blur?
-                                            :theme               theme})
-     :underlay-color      (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)
-     :on-press            on-press}
-    [rn/view
-     {:style (style/row-container sub-label)}
-     (when icon
+(defn action
+  [{:keys [icon label sub-label right-icon right-text danger? disabled? on-press add-divider?
+           accessibility-label icon-color no-icon-color? state customization-color blur?]}]
+  (let [theme (quo.theme/use-theme)]
+    [:<>
+     (when add-divider?
+       [divider theme blur?])
+     [maybe-pressable disabled?
+      {:accessibility-label accessibility-label
+       :style               (style/container {:sub-label           sub-label
+                                              :disabled?           disabled?
+                                              :state               state
+                                              :customization-color customization-color
+                                              :blur?               blur?
+                                              :theme               theme})
+       :underlay-color      (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)
+       :on-press            on-press}
+      [rn/view
+       {:style (style/row-container sub-label)}
+       (when icon
+         [rn/view
+          {:accessibility-label :left-icon-for-action
+           :accessible          true
+           :style               (style/left-icon sub-label)}
+          [icon/icon icon
+           {:color    (or icon-color (get-icon-color danger? theme))
+            :no-color no-icon-color?
+            :size     20}]])
       [rn/view
-        {:accessibility-label :left-icon-for-action
-         :accessible          true
-         :style               (style/left-icon sub-label)}
-        [icon/icon icon
-         {:color    (or icon-color (get-icon-color danger? theme))
-          :no-color no-icon-color?
-          :size     20}]])
-     [rn/view
-      {:style style/text-container}
-      [text/text
-       {:size   :paragraph-1
-        :weight :medium
-        :style  {:color
-                 (cond
-                   danger? (colors/theme-colors colors/danger-50 colors/danger-60 theme)
-                   :else   (colors/theme-colors colors/neutral-100 colors/white theme))}}
-       label]
-      (when sub-label
+        {:style style/text-container}
        [text/text
-         {:size  :paragraph-2
-          :style {:color
-                  (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
-         sub-label])]
-     (when (or right-text right-icon (= state :selected))
-       [rn/view {:style style/right-side-container}
-        (when right-text
+         {:size   :paragraph-1
+          :weight :medium
+          :style  {:color
+                   (cond
+                     danger? (colors/theme-colors colors/danger-50 colors/danger-60 theme)
+                     :else   (colors/theme-colors colors/neutral-100 colors/white theme))}}
+         label]
+        (when sub-label
          [text/text
-           {:accessibility-label :right-text-for-action
-            :size                :paragraph-1
-            :style               (style/right-text theme)}
-           right-text])
-        (when right-icon
-          [rn/view
-           {:style               style/right-icon
-            :accessible          true
-            :accessibility-label :right-icon-for-action}
-           [icon/icon right-icon
-            {:color (get-icon-color danger? theme)
-             :size  20}]])
-        (when (= state :selected)
-          [rn/view {:style style/right-icon}
-           [icon/icon :i/check
-            {:color (if blur?
-                      colors/white
-                      (colors/resolve-color customization-color theme))
-             :size  20}]])])]]])
-
-(def ^:private action (quo.theme/with-theme action-internal))
+           {:size  :paragraph-2
+            :style {:color
+                    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
+           sub-label])]
+       (when (or right-text right-icon (= state :selected))
+         [rn/view {:style style/right-side-container}
+          (when right-text
+            [text/text
+             {:accessibility-label :right-text-for-action
+              :size                :paragraph-1
+              :style               (style/right-text theme)}
+             right-text])
+          (when right-icon
+            [rn/view
+             {:style               style/right-icon
+              :accessible          true
+              :accessibility-label :right-icon-for-action}
+             [icon/icon right-icon
+              {:color (get-icon-color danger? theme)
+               :size  20}]])
+          (when (= state :selected)
+            [rn/view {:style style/right-icon}
+             [icon/icon :i/check
+              {:color (if blur?
+                        colors/white
+                        (colors/resolve-color customization-color theme))
+               :size  20}]])])]]]))

 (defn action-drawer
  [sections]
@@ -26,7 +26,6 @@
      [:button-two-label {:optional true} [:maybe :string]]
      [:button-one-props {:optional true} [:maybe :map]]
      [:button-two-props {:optional true} [:maybe :map]]
-      [:theme :schema.common/theme]
      [:scroll? {:optional true} [:maybe :boolean]]
      [:blur? {:optional true} [:maybe :boolean]]
      [:container-style {:optional true} [:maybe :map]]]]]
@@ -40,58 +39,57 @@

 (defn- view-internal
  [{:keys [actions description description-text description-top-text error-message role button-one-label
-           button-two-label blur? button-one-props button-two-props theme scroll? container-style]}]
-  [rn/view
-   {:style (merge (style/container scroll? blur? theme) container-style)}
-   (when (= description :top-error)
-     [rn/view {:style style/error-message}
-      [icon/icon
-       :i/alert
-       {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)
-        :size  16}]
-      [text/text
-       {:size  :paragraph-2
-        :style {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)}}
-       error-message]])
+           button-two-label blur? button-one-props button-two-props scroll? container-style]}]
+  (let [theme (quo.theme/use-theme)]
+    [rn/view
+     {:style (merge (style/container scroll? blur? theme) container-style)}
+     (when (= description :top-error)
+       [rn/view {:style style/error-message}
+        [icon/icon
+         :i/alert
+         {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)
+          :size  16}]
+        [text/text
+         {:size  :paragraph-2
+          :style {:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)}}
+         error-message]])

-   (when (and (= description :top) role)
-     [rn/view {:style style/description-top}
-      [text/text
-       {:size  :paragraph-2
-        :style (style/description-top-text scroll? blur? theme)}
-       (or description-top-text (i18n/label :t/eligible-to-join-as))]
-      [context-tag/view
-       {:type    :icon
-        :size    24
-        :icon    (role role-icon)
-        :blur?   blur?
-        :context (i18n/label (keyword "t" role))}]])
+     (when (and (= description :top) role)
+       [rn/view {:style style/description-top}
+        [text/text
+         {:size  :paragraph-2
+          :style (style/description-top-text scroll? blur? theme)}
+         (or description-top-text (i18n/label :t/eligible-to-join-as))]
+        [context-tag/view
+         {:type    :icon
+          :size    24
+          :icon    (role role-icon)
+          :blur?   blur?
+          :context (i18n/label (keyword "t" role))}]])

-   [rn/view {:style style/buttons-container}
-    (when (= actions :two-actions)
+     [rn/view {:style style/buttons-container}
+      (when (= actions :two-actions)
+        [button/button
+         (merge
+          {:size                40
+           :background          (when (or blur? scroll?) :blur)
+           :container-style     style/button-container
+           :theme               theme
+           :accessibility-label :button-two}
+          button-two-props)
+         button-two-label])
      [button/button
       (merge
        {:size                40
-         :background          (when (or blur? scroll?) :blur)
         :container-style     style/button-container
+         :background          (when (or blur? scroll?) :blur)
         :theme               theme
-         :accessibility-label :button-two}
-        button-two-props)
-       button-two-label])
-    [button/button
-     (merge
-      {:size                40
-       :container-style     style/button-container
-       :background          (when (or blur? scroll?) :blur)
-       :theme               theme
-       :accessibility-label :button-one}
-      button-one-props)
-     button-one-label]]
-   (when (= description :bottom)
-     [text/text
-      {:size  :paragraph-2
-       :style (style/description-bottom scroll? blur? theme)} description-text])])
+         :accessibility-label :button-one}
+        button-one-props)
+       button-one-label]]
+     (when (= description :bottom)
+       [text/text
+        {:size  :paragraph-2
+         :style (style/description-bottom scroll? blur? theme)} description-text])]))

-(def view
-  (quo.theme/with-theme
-   (schema/instrument #'view-internal ?schema)))
+(def view (schema/instrument #'view-internal ?schema))
@@ -7,7 +7,7 @@
    [react-native.core :as rn]
    [react-native.gesture :as gesture]))

-(defn- view-internal
+(defn view
  "Options
   - `title` Title text
   - `show-button?` Show button
@@ -17,29 +17,28 @@
   - `shell?` use shell theme
   `content` Content of the drawer
   "
-  [{:keys [title show-button? on-press-button button-label button-icon theme shell?]} content]
-  [gesture/scroll-view
-   {:style                             style/outer-container
-    :always-bounce-vertical            false
-    :content-inset-adjustment-behavior :never}
-   [rn/view {:style style/container}
-    [text/text
-     {:size                :heading-2
-      :accessibility-label :documentation-drawer-title
-      :style               (style/title theme)
-      :weight              :semi-bold}
-     title]
-    [rn/view {:style style/content :accessibility-label :documentation-drawer-content}
-     content
-     (when show-button?
-       [button/button
-        {:size                24
-         :type                :outline
-         :container-style     {:margin-top 16}
-         :background          (when shell? :blur)
-         :on-press            on-press-button
-         :accessibility-label :documentation-drawer-button
-         :icon-right          button-icon}
-        button-label])]]])
-
-(def view (quo.theme/with-theme view-internal))
+  [{:keys [title show-button? on-press-button button-label button-icon shell?]} content]
+  (let [theme (quo.theme/use-theme)]
+    [gesture/scroll-view
+     {:style                             style/outer-container
+      :always-bounce-vertical            false
+      :content-inset-adjustment-behavior :never}
+     [rn/view {:style style/container}
+      [text/text
+       {:size                :heading-2
+        :accessibility-label :documentation-drawer-title
+        :style               (style/title theme)
+        :weight              :semi-bold}
+       title]
+      [rn/view {:style style/content :accessibility-label :documentation-drawer-content}
+       content
+       (when show-button?
+         [button/button
+          {:size                24
+           :type                :outline
+           :container-style     {:margin-top 16}
+           :background          (when shell? :blur)
+           :on-press            on-press-button
+           :accessibility-label :documentation-drawer-button
+           :icon-right          button-icon}
+          button-label])]]]))
@@ -5,7 +5,7 @@
    [quo.components.icon :as icon]
    [quo.components.markdown.text :as text]
    [quo.components.selectors.selectors.view :as selectors]
-    [quo.theme :as theme]
+    [quo.theme]
    [react-native.core :as rn]
    [schema.core :as schema]))

@@ -14,7 +14,7 @@
           customization-color blur?]
    :or   {customization-color :blue
           blur?               false}}]
-  (let [theme                  (theme/use-theme-value)
+  (let [theme                  (quo.theme/use-theme)
        [pressed? set-pressed] (rn/use-state false)
        on-press-in            (rn/use-callback #(set-pressed true))
        on-press-out           (rn/use-callback #(set-pressed false))]
@@ -192,54 +192,50 @@
                            colors/white-opa-40
                            (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}])]))

-(defn- view-internal
-  [{:keys [title title-icon type theme description blur? community-name community-logo button-icon
-           account-name emoji context-tag-type button-type
-           on-button-press
-           on-button-long-press
-           button-disabled? account-avatar-emoji account-avatar-type customization-color icon-avatar
-           profile-picture keycard? networks label full-name
-           container-style]}]
-  [rn/view {:style (merge style/container container-style)}
-   (when (left-image-supported-types type)
-     [rn/view {:style style/left-container}
-      [left-image
-       {:type                 type
-        :customization-color  customization-color
-        :account-avatar-emoji account-avatar-emoji
-        :account-avatar-type  account-avatar-type
-        :icon-avatar          icon-avatar
-        :profile-picture      profile-picture}]])
-   [rn/view {:style style/body-container}
-    [left-title
-     {:type       type
-      :label      label
-      :title      title
-      :title-icon title-icon
-      :theme      theme
-      :blur?      blur?}]
-    [subtitle
-     {:type                type
-      :theme               theme
-      :blur?               blur?
-      :keycard?            keycard?
-      :networks            networks
-      :description         description
-      :community-name      community-name
-      :community-logo      community-logo
-      :context-tag-type    context-tag-type
-      :customization-color customization-color
-      :account-name        account-name
-      :emoji               emoji
-      :full-name           full-name
-      :profile-picture     profile-picture}]]
-   [right-icon
-    {:theme                theme
-     :type                 type
-     :button-type          button-type
-     :on-button-press      on-button-press
-     :on-button-long-press on-button-long-press
-     :button-disabled?     button-disabled?
-     :button-icon          button-icon}]])
-
-(def view (quo.theme/with-theme view-internal))
+(defn view
+  [{:keys [title title-icon type description blur? community-name community-logo button-icon
+           account-name emoji context-tag-type button-type container-style
+           on-button-press on-button-long-press profile-picture keycard? networks label full-name
+           button-disabled? account-avatar-emoji account-avatar-type customization-color icon-avatar]}]
+  (let [theme (quo.theme/use-theme)]
+    [rn/view {:style (merge style/container container-style)}
+     (when (left-image-supported-types type)
+       [rn/view {:style style/left-container}
+        [left-image
+         {:type                 type
+          :customization-color  customization-color
+          :account-avatar-emoji account-avatar-emoji
+          :account-avatar-type  account-avatar-type
+          :icon-avatar          icon-avatar
+          :profile-picture      profile-picture}]])
+     [rn/view {:style style/body-container}
+      [left-title
+       {:type       type
+        :label      label
+        :title      title
+        :title-icon title-icon
+        :theme      theme
+        :blur?      blur?}]
+      [subtitle
+       {:type                type
+        :theme               theme
+        :blur?               blur?
+        :keycard?            keycard?
+        :networks            networks
+        :description         description
+        :community-name      community-name
+        :community-logo      community-logo
+        :context-tag-type    context-tag-type
+        :customization-color customization-color
+        :account-name        account-name
+        :emoji               emoji
+        :full-name           full-name
+        :profile-picture     profile-picture}]]
+     [right-icon
+      {:theme                theme
+       :type                 type
+       :button-type          button-type
+       :on-button-press      on-button-press
+       :on-button-long-press on-button-long-press
+       :button-disabled?     button-disabled?
+       :button-icon          button-icon}]]))
@@ -69,12 +69,12 @@

 (defn- view-internal
  [{:keys [on-press blur? container-style] :as props}]
-  (let [theme        (quo.theme/use-theme-value)
+  (let [theme        (quo.theme/use-theme)
        context-type (:type props)]
    [shadow/view
     {:offset       [0 4]
      :paint-inside false
-      :start-color  (colors/theme-colors colors/neutral-100-opa-8 colors/neutral-100-opa-60)
+      :start-color  (colors/theme-colors colors/neutral-100-opa-8 colors/neutral-100-opa-60 theme)
      :distance     25
      :style        {:align-self :stretch}}
     [rn/view {:style (merge (style/container blur? theme) container-style)}
@@ -83,7 +83,7 @@
         {:style         style/blur-container
          :blur-amount   20
          :blur-radius   (if platform/ios? 20 10)
-          :overlay-color (colors/theme-colors colors/white-70-blur colors/neutral-95-opa-70-blur)
+          :overlay-color (colors/theme-colors colors/white-70-blur colors/neutral-95-opa-70-blur theme)
          :blur-type     :transparent}])
      [button/button
       {:type      :ghost
@@ -109,7 +109,7 @@
                         (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})

 (defn get-colors
-  [{:keys [customization-color theme type state background size]}]
+  [{:keys [customization-color type state background size]} theme]
  (let [active? (= state :active)]
    (cond
      (and (= background :photo) (= type :grey))   (grey-photo theme active? size)
@@ -5,12 +5,24 @@
    [quo.components.icon :as icon]
    [quo.components.markdown.text :as text]
    [quo.foundations.customization-colors :as customization-colors]
-    [quo.theme :as theme]
+    [quo.theme]
    [react-native.blur :as blur]
    [react-native.core :as rn]))

-(defn- view-internal
-  [{:keys [type size state background customization-color theme on-press icon-name icon? emoji?
+(defn view
+  "Props:
+    - type:           :outline |:grey (default) | :ghost | :customization
+    - size:           :size-40 (default) | :size-32 | :size-24
+    - state:          :default (default) | :active | :disabled
+    - emoji?:         boolean
+    - icon?:          boolean
+    - no-icon-color?: boolean
+    - background:     :blur | :photo (optional)
+    - icon-name:      keyword
+    - on-press:       function
+
+    Child: string - used as label or emoji (for emoji only)"
+  [{:keys [type size state background customization-color on-press icon-name icon? emoji?
           accessibility-label no-icon-color?]
    :or   {type      :grey
           size      :size-40
@@ -20,11 +32,12 @@
           icon-name :i/placeholder}
    :as   props}
   text]
-  (let [{:keys [icon-size text-size emoji-size border-radius]
+  (let [theme                   (quo.theme/use-theme)
+        {:keys [icon-size text-size emoji-size border-radius]
         :as   size-properties} (properties/sizes size)
        {:keys [left-icon-color right-icon-color right-icon-color-2 label-color blur-type
                blur-overlay-color]
-         :as   colors}          (properties/get-colors props)
+         :as   colors}          (properties/get-colors props theme)
        right-icon              (if (= state :active) :i/pullup :i/dropdown)
        customization-type?     (= type :customization)
        show-blur-background?   (and (= background :photo)
@@ -73,18 +86,3 @@
          :accessibility-label :right-icon
          :color               right-icon-color
          :color-2             right-icon-color-2}]])]))
-
-(def view
-  "Props:
-    - type:           :outline |:grey (default) | :ghost | :customization
-    - size:           :size-40 (default) | :size-32 | :size-24
-    - state:          :default (default) | :active | :disabled
-    - emoji?:         boolean
-    - icon?:          boolean
-    - no-icon-color?: boolean
-    - background:     :blur | :photo (optional)
-    - icon-name:      keyword
-    - on-press:       function
-
-    Child: string - used as label or emoji (for emoji only)"
-  (theme/with-theme view-internal))
@@ -4,13 +4,19 @@
    [quo.components.dropdowns.dropdown-input.style :as style]
    [quo.components.icon :as icon]
    [quo.components.markdown.text :as text]
-    [quo.theme :as theme]
+    [quo.theme]
    [react-native.core :as rn]))

-(defn- view-internal
-  [{:keys [state theme on-press icon?
-           label? blur?
-           accessibility-label header-label]
+(defn view
+  "Props:
+    - state: :default (default) | :active | :disabled
+    - label: string
+    - header-label: string
+    - icon?: boolean
+    - label?: boolean
+    - blur?: boolean
+    - on-press: function"
+  [{:keys [state on-press icon? label? blur? accessibility-label header-label]
    :or   {state        :default
           icon?        true
           label?       true
@@ -18,7 +24,8 @@
           header-label "Label"}
    :as   props}
   label]
-  (let [{:keys [left-icon-color right-icon-color right-icon-color-2]
+  (let [theme          (quo.theme/use-theme)
+        {:keys [left-icon-color right-icon-color right-icon-color-2]
         :as   colors} (properties/get-colors props)
        right-icon     (if (= state :active) :i/pullup :i/dropdown)]
    [rn/view
@@ -55,14 +62,3 @@
        :accessibility-label :right-icon
        :color               right-icon-color
        :color-2             right-icon-color-2}]]]))
-
-(def view
-  "Props:
-    - state: :default (default) | :active | :disabled
-    - label: string
-    - header-label: string
-    - icon?: boolean
-    - label?: boolean
-    - blur?: boolean
-    - on-press: function"
-  (theme/with-theme view-internal))
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Omar Basem	13cf34634c	lint	2024-04-19 09:59:09 +04:00
Omar Basem	2e2104d4d1	fix: `backup-recovery-phrase` check item pressability (#19705 ) fix: `backup-recovery-phrase` check item pressability (#19705)	2024-04-18 21:33:56 +04:00
Siddarth Kumar	ac48fbef44	bump go to 1.20 (#19564 ) ## Summary This commit also points to status-go branch where we have upgraded go to 1.20 Related status-go PR -> https://github.com/status-im/status-go/pull/5027 ### Testing notes Please test everything, specially the store node stuff. #### Platforms - Android - iOS status: ready	2024-04-18 19:09:55 +02:00
MohsenandYevheniia Berdnyk	8f67f38de9	[#19182 ] fix: shell share design feedback (#19617 ) Co-authored-by: Yevheniia Berdnyk <ie.berdnyk@gmail.com>	2024-04-18 18:12:29 +03:00
Churikova Tetiana	ea4578b3e0	pipleine: update doc	2024-04-18 15:31:47 +01:00
flexsurfer	2b40a4d0c4	Feature/remove reagent atom from theme (#19706 )	2024-04-18 16:14:17 +02:00
Brian Sztamfater	17afff272e	fix: fix fees calculation and add support for L1 fees for Optimism transactions (#19603 ) Signed-off-by: Brian Sztamfater <brian@status.im>	2024-04-18 10:35:18 -03:00
Brian Sztamfater	3526355e23	fix: page top is rendering empty avatar icon if no avatar props are sent (#19638 )	2024-04-18 09:48:42 -03:00
Flavio Fraschetti	f708cdcf50	Feature flag descoped features from MVP to streamline initial release (#19690 ) Feature flag descoped features from MVP: - edit derivation path - wallet/send/contacts	2024-04-18 07:44:32 -03:00
mmilad75	3af4384e00	Wallet (collectibles) - integrate new Collectible list item component into designs #19140 (#19528 )	2024-04-18 13:54:28 +03:30
Siddarth Kumar	a6b19c021f	swap react-native-mail fork with patch (#19688 ) ## Summary This commit swaps the fork of react-native-mail with a patch. needed for : https://github.com/status-im/status-mobile/issues/18138 ## Review & Test notes Verify if mailing logs still works. ## Platforms - iOS - Android status: ready	2024-04-18 10:59:54 +02:00
Sean Hagstrom	a258717e83	chore: update status-go version for account-saving fixes (#19612 )	2024-04-18 10:37:11 +02:00
Yevheniia Berdnyk	a8395e51a4	e2e: GH report: rerun tests link update	2024-04-18 05:41:36 +03:00
codemaster	db501b5efd	fix: missing author info in reply messages (#19563 )	2024-04-17 15:53:23 -07:00
Siddarth Kumar	44732e9736	upgrade camera-roll lib to 7.5.2 (#19664 ) This commit swaps the fork of @react-native-camera-roll/camera-roll with a patch and upgrades this library to the latest version. needed for : https://github.com/status-im/status-mobile/issues/18138 Verify if camera album related features still work. - iOS status: ready	2024-04-17 17:14:18 +02:00
Brian Sztamfater	d12c05aab6	fix: add external icon to OpenSea button in collectible page (#19647 ) Signed-off-by: Brian Sztamfater <brian@status.im>	2024-04-17 11:58:27 -03:00
Siddarth Kumar	4134d18cbc	nuke unused lib rn-snoopy (#19691 ) ## Summary We don't use `rn-snoopy` anymore and this commit nukes it.	2024-04-17 15:27:00 +02:00
Sean Hagstrom	8600c1d3a5	Allow for env variables for configuring delete-message undo time limit for toasts (#19653 ) * tweak: allow for env variable to configure undo-time-limit when deleting a message in chat * tweak: add env variable undo timeout for deleting messages for everyone * tweak: extend timeout duration for undo toast when deleting a message for a user * tweak: extend timeout duration for undo toast when deleting a message for everyone	2024-04-17 15:12:27 +02:00
flexsurfer	570c62e30e	replace ratom in quo wallet component (#19687 )	2024-04-17 14:30:33 +02:00
flexsurfer	549efdb77c	Show the users that the keycard feature will be coming soon (#19686 )	2024-04-17 13:58:03 +02:00
Parvesh Monu	8807a63989	fix role is not updated correctly when unselecting accounts (#19636 )	2024-04-17 16:21:32 +05:30
Alexander	c0be0b7670	Update QR code scanner to handle channel and community links (#19507 ) * Experiment * Fix * Fix * Fix	2024-04-17 12:27:01 +02:00
John Ngei	6e854428f2	fix: pinned messages empty state drawer margin issues	2024-04-17 10:28:49 +02:00
Icaro Motta	c81dd8e3e3	Don't treat dynamic data as a function (#19672 ) Sometimes an integration test was throwing "TypeError: Cannot read properties of null (reading 'call')" because a value was nil in the app-db, but the code was treating it as if it was always a map and could be called as a function. The original code wasn't respecting Clojure's nil punning good practices. In Clojure, it's often recommended to not use dynamic data as functions, because if they're nil, in CLJS we'll get an exception and as usual in CLJS, the stacktrace won't be very readable. We should prefer contains? or get, which will work just fine with nil values, and only use data as a function if it's static, e.g. a map defined in a def.	2024-04-16 14:48:28 -03:00
Omar Basem	24f4c4a07e	Remove watch-only accounts from bridging (#19569 ) Remove watch-only accounts from bridging (#19569)	2024-04-16 20:33:03 +04:00
Ajay Sivan	98762c74f1	Community detail token gating component (#19532 )	2024-04-16 09:11:18 -07:00
Ibrahem Khalil	f3aeddb53a	Update `doc/troubleshooting.md` (#19673 )	2024-04-16 17:46:14 +02:00
mmilad75	f5fcc9f45e	Wallet: Token Options should be specific to watch only account #18543 (#19583 )	2024-04-16 19:02:50 +03:30
Parvesh Monu	9aa9dc1b4c	Redirect to community channel when following universal link (#19566 )	2024-04-16 20:30:24 +05:30
Sean Hagstrom	61974dae4d	Implement share button inside profile settings (#19559 ) * tweak: implement the share button inside the profile settings page * chore: define event and effect handler for opening share sheet * tidy: refactor share buttons to use open-share event * tidy: refactor open-share effect to use react-native-share bindings * tidy: remove unused code for old bindings to react share sheet * tidy: move effects.share/open definition to navigation effects * tweak: ensure navigation effects are loaded * tidy: use open-share dispatch in ui * tidy: use open-share dispatch instead of calling open function directly * tidy: refactor react-native.share/open to only receive options and return promise * tidy: refactor open-share effect to receive map of content and handlers * tidy: replace strings with keywords * tweak: always handle failure case when opening share-sheet * tweak: rename :content to :options * fix: conditionally call on-error * tweak: add extra information when logging error from attempting to share-sheet	2024-04-16 13:26:52 +02:00
Parvesh Monu	8b3e639abd	fix error on long tap on token-gated channel from the join community screen (#19652 )	2024-04-16 16:33:09 +05:30
jakub	7c901fa045	ci: use virtualenv to avoid race conditions Desktop QA tests also use Pytest packages and their versions are different, so we can't install them globally, it needs to be done per build using `WORKSPACE_TMP` as destination. Signed-off-by: Jakub Sokołowski <jakub@status.im>	2024-04-16 13:13:53 +03:00
frank	8a12ad3510	fix_: logout deadlock (#19640 )	2024-04-16 17:50:47 +08:00
Brian Sztamfater	c8044cd2f2	fix: wallet header spacing to match other tabs (#19632 )	2024-04-16 06:31:09 -03:00
Sean Hagstrom	6872d1a857	fix: do not throw exception when passing nil to utils.address/get-abbreviated-profile-url (#19593 )	2024-04-16 09:51:35 +02:00
Brian Sztamfater	98d4969ca5	feat: add ability to tap to disable from networks (#19392 )	2024-04-15 12:04:44 -03:00
Parvesh Monu	5412092ca1	fix zero addresses are selected by default when joining a community (#19626 )	2024-04-15 17:30:31 +05:30
Parvesh Monu	a8695116e2	fix error is shown after scan button is tapped on the browser page (#19601 )	2024-04-15 15:24:09 +05:30
Yevheniia Berdnyk	76773a4165	e2e: fix for sharing community flow	2024-04-15 12:11:24 +03:00
yqrashawn	32fc7b14e8	fix: add/rename missing sub :current-chat/one-to-one-chat? (#19628 ) Signed-off-by: yqrashawn <namy.19@gmail.com>	2024-04-15 17:10:12 +08:00
Sean Hagstrom	82a8f9f44d	fix: rewire legacy community share button to send invites (#19622 )	2024-04-15 10:52:18 +02:00
John Ngei	8df72d0c29	updated standard auth drawer title size and weight	2024-04-13 23:04:49 +02:00
Mohsen	794cd57961	[#19299 ] fix: design feedback for settings screen (#19609 )	2024-04-12 19:37:07 +03:00
John Ngei	6bc29088ab	fix: community spacing issues in token gating community page * fix: community spacing issues in token gating community page * fix: spacing issues between token rows	2024-04-12 17:35:03 +02:00
codemaster	658f62e8ce	Composer-photo selection drawer issues (#19613 )	2024-04-12 07:44:35 -07:00
flexsurfer	e6b346ca32	migrate reagent part 7 (#19316 )	2024-04-12 15:46:17 +02:00
yqrashawn	00b0755a73	feat: system messge icon based on contact customization color (#19558 ) Signed-off-by: yqrashawn <namy.19@gmail.com>	2024-04-12 20:46:09 +08:00
yqrashawn	f8cc85f5e2	fix: vertical align texts in multiline input on iOS (#19565 ) * fix: vertical align texts in multiline input on iOS Signed-off-by: yqrashawn <namy.19@gmail.com> * fix(copy): Chat Key -> Chatkey --------- Signed-off-by: yqrashawn <namy.19@gmail.com>	2024-04-12 20:25:04 +08:00
Ibrahem Khalil	6ba89d0c6e	Community channel avatar is missing on Channel screen (#19459 )	2024-04-12 01:18:21 +02:00
Ibrahem Khalil	2614131426	[18979] Implement context action Invite contacts to community (#18989 )	2024-04-12 00:12:02 +02:00
flexsurfer	cfc43be3cc	migrate reagent part6 (#19270 )	2024-04-11 16:43:33 +02:00
flexsurfer	3164cc6a6c	Chore: setup feature-flag for not-implemented settings (#19591 )	2024-04-11 16:43:09 +02:00
Mohsen	5badb5bdb5	[#19178 ] fix: jump card responsive (#19600 )	2024-04-11 17:36:28 +03:00
flexsurfer	292fd78ff8	warning fixes (#19605 )	2024-04-11 15:42:29 +02:00
Lungu Cristian	c875fb33fa	Show token requirements only for token gated channels (#19529 ) * fix: use role-permissions? instead of token-permission token-permissions contains channel-permissions as well, which don't make the community token-gated Signed-off-by: Cristian Lungu <lungucristian95@gmail.com> * fix: hide token requirements from open channels Signed-off-by: Cristian Lungu <lungucristian95@gmail.com> * fixed tests Signed-off-by: Cristian Lungu <lungucristian95@gmail.com> --------- Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>	2024-04-11 16:27:18 +03:00
jakub	b5962fd83a	nix: fix detecting install type in Docker Otherwise build fails in a Docker container for Desktop: ``` + make status-go Building: status-go Unknown Nix installtion type! Unknown Nix installtion type! make[1]: * [Makefile:223: statusgo-shared-library] Error 1 make: * [Makefile:432: vendor/status-go/build/bin/libstatus.so] Error 2 ``` Signed-off-by: Jakub Sokołowski <jakub@status.im>	2024-04-11 16:01:34 +03:00
Jamie Caprani	1d1eae13a9	chore(wallet): move add-account funcitonality into its own folder (#19476 )	2024-04-11 12:01:35 +02:00