e2e: community names update

Replace creation on communities client side
https://github.com/status-im/status-go/compare/b744ff43...b710fa3e
2024-04-15 05:53:07 +03:00 · 2024-04-11 17:23:11 +01:00
532 changed files with 7022 additions and 7298 deletions
@@ -35,4 +35,4 @@ LOCAL_PAIRING_ENABLED=1
 TEST_STATEOFUS=1
 FAST_CREATE_COMMUNITY_ENABLED=1
 TEST_NETWORKS_ENABLED=1
-SHOW_NOT_IMPLEMENTED_FEATURES=0
+SHOW_NOT_IMPLEMENTED_FEATURES=1
@@ -35,5 +35,3 @@ 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,12 +36,6 @@ 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 {
@@ -58,8 +52,7 @@ pipeline {
    stage('Setup') {
      steps { script {
        dir('test/appium') {
-          sh "python3 -m venv ${VIRTUAL_ENV}"
-          sh 'pip3 install -r requirements.txt'
+          sh 'pip3 install --user -r requirements.txt'
        }
      } }
    }
@@ -54,12 +54,6 @@ 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 {
@@ -85,8 +79,7 @@ pipeline {
    stage('Setup') {
      steps { script {
        dir('test/appium') {
-          sh "python3 -m venv ${VIRTUAL_ENV}"
-          sh 'pip3 install -r requirements.txt'
+          sh 'pip3 install --user -r requirements.txt'
        }
      } }
    }
@@ -35,11 +35,6 @@ pipeline {
    ))
  }

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

  stages {
    stage('Prep') {
@@ -56,8 +51,7 @@ pipeline {
    stage('Setup') {
      steps { script {
        dir('test/appium') {
-          sh "python3 -m venv ${VIRTUAL_ENV}"
-          sh 'pip3 install -r requirements.txt'
+          sh 'pip3 install --user -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 description **MUST** be added.
+- Also in case the PR adds new functionality, a short description would be appreciated.

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

@@ -28,11 +28,26 @@ 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.
@@ -44,20 +59,6 @@ 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
@@ -98,7 +99,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 (see `skip-manual-qa` label)
+- if PR can be tested by developer (in case of small changes) and/or developer is sure that the changes made cannot introduce a regression, then PR can be merged without manual testing. Also, currently, PRs are not manually tested if the changes relate only the design (creation of components, etc.) and do not affect the functionality.
 ---        

 #### Why my PR is in `Contributor` column?
@@ -128,19 +128,3 @@ 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.
@@ -164,7 +164,7 @@ def build_ios_e2e
    # 3. directory where to up StatusIm.app
    derived_data_path: 'status-ios',
    output_name: 'StatusIm.app',
-    buildlog_path: 'logs',
+    buildlog_path: 'ios/logs',
    # -------------------------------------
    # Normal stuff
    scheme: 'StatusIm',
@@ -231,7 +231,7 @@ platform :ios do
      clean: true,
      export_method: 'app-store',
      output_directory: 'status-ios',
-      buildlog_path: 'logs',
+      buildlog_path: 'ios/logs',
      include_symbols: false,
      export_options: {
        "combileBitcode": true,
@@ -1,28 +1,13 @@
-def node_require(script)
-   # Resolve script with node to allow for hoisting
-   require Pod::Executable.execute_command('node', ['-p',
-     "require.resolve(
-       '#{script}',
-       {paths: [process.argv[1]]},
-     )", __dir__]).strip
-end
-
-node_require('react-native/scripts/react_native_pods.rb')
-node_require('react-native-permissions/scripts/setup.rb')
+# Resolve react_native_pods.rb with node to allow for hoisting
+require Pod::Executable.execute_command('node', ['-p',
+  'require.resolve(
+    "react-native/scripts/react_native_pods.rb",
+    {paths: [process.argv[1]]},
+  )', __dir__]).strip

 platform :ios, min_ios_version_supported
 prepare_react_native_project!

-setup_permissions([
-  'Camera',
-  'FaceID',
-  'MediaLibrary',
-  'Microphone',
-  'Notifications',
-  'PhotoLibrary',
-  'PhotoLibraryAddOnly',
-])
-
 linkage = ENV['USE_FRAMEWORKS']
 if linkage != nil
  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
@@ -58,6 +43,9 @@ abstract_target 'Status' do

  pod 'SSZipArchive', '2.4.3'

+  permissions_path = '../node_modules/react-native-permissions/ios'
+  pod 'Permission-Microphone', :path => "#{permissions_path}/Microphone/Permission-Microphone.podspec"
+  pod 'Permission-Camera', :path => "#{permissions_path}/Camera/Permission-Camera.podspec"
  pod "react-native-status-keycard", path: "../node_modules/react-native-status-keycard"
  pod "react-native-status", path: "../modules/react-native-status"
  pod "Keycard", git: "https://github.com/status-im/Keycard.swift.git"
@@ -28,6 +28,10 @@ PODS:
  - libwebp/mux (1.2.4):
    - libwebp/demux
  - libwebp/webp (1.2.4)
+  - Permission-Camera (3.8.0):
+    - RNPermissions
+  - Permission-Microphone (3.8.0):
+    - RNPermissions
  - RCT-Folly (2022.05.16.00):
    - boost
    - DoubleConversion
@@ -875,13 +879,9 @@ PODS:
    - React-Core
  - react-native-blob-util (0.13.18):
    - React-Core
-  - react-native-blur (4.4.0):
-    - glog
-    - RCT-Folly (= 2022.05.16.00)
+  - react-native-blur (4.3.3):
    - React-Core
-  - react-native-cameraroll (7.5.2):
-    - glog
-    - RCT-Folly (= 2022.05.16.00)
+  - react-native-cameraroll (5.10.0):
    - React-Core
  - react-native-config (1.5.0):
    - react-native-config/App (= 1.5.0)
@@ -1121,7 +1121,7 @@ PODS:
    - TOCropViewController
  - RNKeychain (8.1.2):
    - React-Core
-  - RNPermissions (4.1.5):
+  - RNPermissions (3.8.0):
    - React-Core
  - RNReanimated (3.6.1):
    - glog
@@ -1154,6 +1154,8 @@ DEPENDENCIES:
  - FBReactNativeSpec (from `../node_modules/react-native/React/FBReactNativeSpec`)
  - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
  - Keycard (from `https://github.com/status-im/Keycard.swift.git`)
+  - Permission-Camera (from `../node_modules/react-native-permissions/ios/Camera/Permission-Camera.podspec`)
+  - Permission-Microphone (from `../node_modules/react-native-permissions/ios/Microphone/Permission-Microphone.podspec`)
  - RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
  - RCT-Folly/Fabric (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
  - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`)
@@ -1263,6 +1265,10 @@ EXTERNAL SOURCES:
    :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec"
  Keycard:
    :git: https://github.com/status-im/Keycard.swift.git
+  Permission-Camera:
+    :path: "../node_modules/react-native-permissions/ios/Camera/Permission-Camera.podspec"
+  Permission-Microphone:
+    :path: "../node_modules/react-native-permissions/ios/Microphone/Permission-Microphone.podspec"
  RCT-Folly:
    :podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec"
  RCTRequired:
@@ -1442,6 +1448,8 @@ SPEC CHECKSUMS:
  HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
  Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8
  libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef
+  Permission-Camera: e6d142d7d8b714afe0a83e5e6ae17eb949f1e3e9
+  Permission-Microphone: 644b1de8bcc2afcaf934e09a22bee507a95796a7
  RCT-Folly: 7169b2b1c44399c76a47b5deaaba715eeeb476c0
  RCTRequired: 2544c0f1081a5fa12e108bb8cb40e5f4581ccd87
  RCTTypeSafety: 50efabe2b115c11ed03fbf3fd79e2f163ddb5d7c
@@ -1466,8 +1474,8 @@ SPEC CHECKSUMS:
  react-native-background-timer: 1f7d560647b40e6a60b01c452ba29c54bf581fc4
  react-native-biometrics: 352e5a794bfffc46a0c86725ea7dc62deb085bdc
  react-native-blob-util: 600972b1782380a5a7d5db61a3817ea32349dae9
-  react-native-blur: 799045500f56146afc46245148080e7b7623cb75
-  react-native-cameraroll: af8eec1e585d053ff485d98ec837f9a8a11b5745
+  react-native-blur: c6d0a1dc2b4b519f7afe3b14d8151998632b6d18
+  react-native-cameraroll: 4701ae7c3dbcd3f5e9e150ca17f250a276154b35
  react-native-config: 5330c8258265c1e5fdb8c009d2cabd6badd96727
  react-native-hole-view: 6935448993bac79f2b5a4ad7e9741094cf810679
  react-native-image-resizer: 2f1577efa3bc762597681f530c8e8d05ce0ceeb3
@@ -1513,7 +1521,7 @@ SPEC CHECKSUMS:
  RNGestureHandler: 15c6ef51acba34c49ff03003806cf5dd6098f383
  RNImageCropPicker: 486e2f7e2b0461ce24321f751410dce1b3b49e6d
  RNKeychain: a65256b6ca6ba6976132cc4124b238a5b13b3d9c
-  RNPermissions: 08e619529cced22695f4b6d0efcc0a233e278903
+  RNPermissions: 215c54462104b3925b412b0fb3c9c497b21c358b
  RNReanimated: dee37576492f1a375017515f5c77e66e5eec696b
  RNShare: 859ff710211285676b0bcedd156c12437ea1d564
  RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8
@@ -1526,6 +1534,6 @@ SPEC CHECKSUMS:
  TOCropViewController: edfd4f25713d56905ad1e0b9f5be3fbe0f59c863
  Yoga: a716eea57d0d3430219c0a5a233e1e93ee931eb7

-PODFILE CHECKSUM: bb02c595a4aa4430da978b55da5440811cbd9d91
+PODFILE CHECKSUM: c9c6dfac28e31314e1a2ee2dc47364ad151f13f2

 COCOAPODS: 1.13.0
@@ -602,14 +602,12 @@
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-Status-StatusIm/Pods-Status-StatusIm-resources.sh",
 				"${PODS_CONFIGURATION_BUILD_DIR}/RNImageCropPicker/QBImagePicker.bundle",
-				"${PODS_CONFIGURATION_BUILD_DIR}/RNPermissions/RNPermissionsPrivacyInfo.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/RCTI18nStrings.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/QBImagePicker.bundle",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNPermissionsPrivacyInfo.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCTI18nStrings.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
 			);
@@ -626,14 +624,12 @@
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-Status-StatusImPR/Pods-Status-StatusImPR-resources.sh",
 				"${PODS_CONFIGURATION_BUILD_DIR}/RNImageCropPicker/QBImagePicker.bundle",
-				"${PODS_CONFIGURATION_BUILD_DIR}/RNPermissions/RNPermissionsPrivacyInfo.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/RCTI18nStrings.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/QBImagePicker.bundle",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNPermissionsPrivacyInfo.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCTI18nStrings.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
 			);
@@ -672,14 +668,12 @@
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests-resources.sh",
 				"${PODS_CONFIGURATION_BUILD_DIR}/RNImageCropPicker/QBImagePicker.bundle",
-				"${PODS_CONFIGURATION_BUILD_DIR}/RNPermissions/RNPermissionsPrivacyInfo.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/RCTI18nStrings.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle",
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/QBImagePicker.bundle",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNPermissionsPrivacyInfo.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCTI18nStrings.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
 			);
@@ -60,10 +60,10 @@ in {
    version = "15.0";
    allowHigher = true;
  };
-  go = super.go_1_20;
+  go = super.go_1_19;
  clang = super.clang_15;
-  buildGoPackage = super.buildGo120Package;
-  buildGoModule = super.buildGo120Module;
+  buildGoPackage = super.buildGo119Package;
+  buildGoModule = super.buildGo119Module;
  gomobile = (super.gomobile.overrideAttrs (old: {
    patches = [
      (self.fetchurl { # https://github.com/golang/mobile/pull/84
@@ -9,10 +9,10 @@
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "1.19.3",
-    "@react-native-camera-roll/camera-roll": "7.5.2",
+    "@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-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": "4.4.0",
+    "@react-native-community/blur": "git+https://github.com/status-im/react-native-blur.git#refs/tags/v4.3.3-status",
    "@react-native-community/hooks": "^3.0.0",
    "@react-native-community/masked-view": "^0.1.6",
    "@react-native-community/netinfo": "^4.4.0",
@@ -48,10 +48,10 @@
    "react-native-keychain": "8.1.2",
    "react-native-linear-gradient": "^2.8.0",
    "react-native-lottie-splash-screen": "^1.0.1",
-    "react-native-mail": "6.1.1",
+    "react-native-mail": "git+https://github.com/status-im/react-native-mail.git#refs/tags/v6.1.2-status",
    "react-native-navigation": "7.38.3",
    "react-native-orientation-locker": "^1.5.0",
-    "react-native-permissions": "4.1.5",
+    "react-native-permissions": "3.8.0",
    "react-native-reanimated": "3.6.1",
    "react-native-redash": "18.1.0",
    "react-native-shadow-2": "^7.0.8",
@@ -94,6 +94,7 @@
    "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": {
@@ -1,11 +0,0 @@
--- /tmp/tmp-status-mobile-851dbcb56/tmp.gcyqIAUEIA/build.gradle	2024-04-16 18:11:12.481819000 +0200
-+++ ./node_modules/@react-native-community/blur/android/build.gradle	2024-04-16 18:11:18.889991702 +0200
-@@ -5,7 +5,7 @@
-   }
- 
-   dependencies {
-    classpath 'com.android.tools.build:gradle:3.5.3'
-+    classpath 'com.android.tools.build:gradle:3.5.4'
-   }
- }
- 
@@ -1,10 +0,0 @@
--- /tmp/tmp-status-mobile-61974dae4/tmp.6k5ZPUa0Hp/BlurView.ios.tsx	2024-04-16 17:07:33.229847000 +0200
-+++ ./node_modules/@react-native-community/blur/src/components/BlurView.ios.tsx	2024-04-16 17:07:58.540617624 +0200
-@@ -6,6 +6,7 @@
-   | 'dark'
-   | 'light'
-   | 'xlight'
-+  | 'transparent'
-   | 'prominent'
-   | 'regular'
-   | 'extraDark'
@@ -1,57 +0,0 @@
--- /tmp/tmp-status-mobile-851dbcb56/tmp.beqWjtcNwi/BlurView.mm	2024-04-16 17:55:00.688450000 +0200
-+++ ./node_modules/@react-native-community/blur/ios/BlurView.mm	2024-04-16 17:56:17.772952042 +0200
-@@ -73,7 +73,7 @@
- {
-   const auto &oldViewProps = *std::static_pointer_cast<const BlurViewProps>(_props);
-   const auto &newViewProps = *std::static_pointer_cast<const BlurViewProps>(props);
-  
-+
-   if (oldViewProps.blurAmount != newViewProps.blurAmount) {
-     NSNumber *blurAmount = [NSNumber numberWithInt:newViewProps.blurAmount];
-     [self setBlurAmount:blurAmount];
-@@ -83,12 +83,12 @@
-     NSString *blurType = [NSString stringWithUTF8String:toString(newViewProps.blurType).c_str()];
-     [self setBlurType:blurType];
-   }
-  
-+
-   if (oldViewProps.reducedTransparencyFallbackColor != newViewProps.reducedTransparencyFallbackColor) {
-     UIColor *color = RCTUIColorFromSharedColor(newViewProps.reducedTransparencyFallbackColor);
-     [self setReducedTransparencyFallbackColor:color];
-   }
-  
-+
-   [super updateProps:props oldProps:oldProps];
- }
- #endif // RCT_NEW_ARCH_ENABLED
-@@ -131,6 +131,7 @@
- 
- - (UIBlurEffectStyle)blurEffectStyle
- {
-+  if ([self.blurType isEqual: @"transparent"]) return UIBlurEffectStyleDark;
-   if ([self.blurType isEqual: @"xlight"]) return UIBlurEffectStyleExtraLight;
-   if ([self.blurType isEqual: @"light"]) return UIBlurEffectStyleLight;
-   if ([self.blurType isEqual: @"dark"]) return UIBlurEffectStyleDark;
-@@ -160,7 +161,7 @@
-     if ([self.blurType isEqual: @"thinMaterialLight"]) return UIBlurEffectStyleSystemThinMaterialLight;
-     if ([self.blurType isEqual: @"ultraThinMaterialLight"]) return UIBlurEffectStyleSystemUltraThinMaterialLight;
-   #endif
-    
-+
-   #if TARGET_OS_TV
-     if ([self.blurType isEqual: @"regular"]) return UIBlurEffectStyleRegular;
-     if ([self.blurType isEqual: @"prominent"]) return UIBlurEffectStyleProminent;
-@@ -183,6 +184,13 @@
-   UIBlurEffectStyle style = [self blurEffectStyle];
-   self.blurEffect = [BlurEffectWithAmount effectWithStyle:style andBlurAmount:self.blurAmount];
-   self.blurEffectView.effect = self.blurEffect;
-+
-+  if ([self.blurType isEqual: @"transparent"]) {
-+    for (UIView *subview in self.blurEffectView.subviews) {
-+      subview.backgroundColor = [UIColor clearColor];
-+    }
-+  }
-+
- }
- 
- - (void)updateFallbackView
@@ -1,10 +0,0 @@
--- /tmp/tmp-status-mobile-61974dae4/tmp.NHLSFZG6LG/BlurViewNativeComponent.ts	2024-04-16 17:08:42.755929000 +0200
-+++ ./node_modules/@react-native-community/blur/src/fabric/BlurViewNativeComponent.ts	2024-04-16 17:08:57.634037113 +0200
-@@ -10,6 +10,7 @@
-     | 'dark'
-     | 'light'
-     | 'xlight'
-+    | 'transparent'
-     | 'prominent'
-     | 'regular'
-     | 'extraDark'
@@ -1,22 +0,0 @@
--- /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.
@@ -1,11 +0,0 @@
--- /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,
@@ -1,56 +0,0 @@
--- /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
@@ -1,10 +0,0 @@
--- /tmp/tmp-status-mobile-61974dae4/tmp.zy6uXqO4gW/VibrancyViewNativeComponent.ts	2024-04-16 17:09:23.772623000 +0200
-+++ ./node_modules/@react-native-community/blur/src/fabric/VibrancyViewNativeComponent.ts	2024-04-16 17:09:39.033737349 +0200
-@@ -10,6 +10,7 @@
-     | 'dark'
-     | 'light'
-     | 'xlight'
-+    | 'transparent'
-     | 'prominent'
-     | 'regular'
-     | 'extraDark'
@@ -1,15 +0,0 @@
--- /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 '(/atom|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 '(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, reagent atoms are not allowed in quo components"
+    echo "WARNING: re-frame, status-im are not allowed in quo components"
    echo ''
    echo "$INVALID_CHANGES"
    exit 1
@@ -0,0 +1,31 @@
+(ns legacy.status-im.bottom-sheet.events
+  (:require
+    [utils.re-frame :as rf]))
+
+(rf/defn show-bottom-sheet-old
+  [{:keys [db]} {:keys [view options]}]
+  {:dismiss-keyboard              nil
+   :show-bottom-sheet-overlay-old nil
+   :db                            (assoc db
+                                         :bottom-sheet/show?   true
+                                         :bottom-sheet/view    view
+                                         :bottom-sheet/options options)})
+
+(rf/defn show-bottom-sheet-event
+  {:events [:bottom-sheet/show-sheet-old]}
+  [cofx view options]
+  (show-bottom-sheet-old
+   cofx
+   {:view    view
+    :options options}))
+
+(rf/defn hide-bottom-sheet-old
+  {:events [:bottom-sheet/hide-old]}
+  [{:keys [db]}]
+  {:db                               (assoc db :bottom-sheet/show? false)
+   :dismiss-bottom-sheet-overlay-old nil})
+
+(rf/defn hide-bottom-sheet-navigation-overlay
+  {:events [:bottom-sheet/hide-old-navigation-overlay]}
+  [{}]
+  {:dismiss-bottom-sheet-overlay-old nil})
@@ -0,0 +1,38 @@
+(ns legacy.status-im.bottom-sheet.sheets
+  (:require
+    [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]
+    [react-native.core :as rn]
+    [utils.re-frame :as rf]))
+
+(defn bottom-sheet
+  []
+  (let [dismiss-bottom-sheet-callback (fn []
+                                        (rf/dispatch [:bottom-sheet/hide-old])
+                                        true)
+        {:keys [show? view options]} (rf/sub [:bottom-sheet-old])
+        {:keys [content]
+         :as   opts}
+        (cond-> {:visible? show?}
+          (map? view)
+          (merge view)
+
+          (= view :mobile-network-offline)
+          (merge mobile-network-settings/offline-sheet)
+
+          (= view :learn-more)
+          (merge about-app/learn-more))
+        page-theme (:theme options)]
+
+    [:f>
+     (fn []
+       (rn/use-mount (fn []
+                       (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))}
+        [bottom-sheet/bottom-sheet opts
+         (when content
+           [content (when options options)])]])]))
@@ -0,0 +1,59 @@
+(ns legacy.status-im.bottom-sheet.styles
+  (:require
+    [quo.foundations.colors :as colors]))
+
+(def border-radius 20)
+
+(defn handle
+  [override-theme]
+  {:position         :absolute
+   :top              8
+   :width            32
+   :height           4
+   :background-color (colors/theme-colors colors/neutral-100 colors/white override-theme)
+   :opacity          0.1
+   :border-radius    100
+   :align-self       :center})
+
+(def backdrop
+  {:position :absolute
+   :left     0
+   :right    0
+   :bottom   0
+   :top      0})
+
+(def backdrop-color
+  {:background-color colors/neutral-100})
+
+(def container
+  {:position :absolute
+   :left     0
+   :right    0
+   :top      0
+   :bottom   0
+   :overflow :hidden})
+
+(defn content-style
+  [insets bottom-safe-area-spacing?]
+  {:position       :absolute
+   :left           0
+   :right          0
+   :top            0
+   :padding-top    border-radius
+   :padding-bottom (if bottom-safe-area-spacing? (:bottom insets) 0)})
+
+(defn selected-background
+  [override-theme]
+  {:border-radius     12
+   :padding-left      12
+   :margin-horizontal 8
+   :margin-bottom     10
+   :height            48
+   :background-color  (colors/theme-colors colors/white colors/neutral-90 override-theme)})
+
+(defn background
+  [override-theme]
+  {:background-color        (colors/theme-colors colors/white colors/neutral-95 override-theme)
+   :flex                    1
+   :border-top-left-radius  border-radius
+   :border-top-right-radius border-radius})
@@ -0,0 +1,240 @@
+(ns legacy.status-im.bottom-sheet.view
+  (:require
+    [legacy.status-im.bottom-sheet.styles :as styles]
+    [oops.core :refer [oget]]
+    [re-frame.core :as re-frame]
+    [react-native.background-timer :as timer]
+    [react-native.core :as react]
+    [react-native.core :as rn]
+    [react-native.gesture :as gesture]
+    [react-native.hooks :as hooks]
+    [react-native.platform :as platform]
+    [react-native.reanimated :as reanimated]
+    [react-native.safe-area :as safe-area]
+    [reagent.core :as reagent]
+    [utils.worklets.bottom-sheet :as worklets.bottom-sheet]))
+
+(def animation-delay 450)
+
+(defn with-animation
+  [value]
+  (reanimated/with-spring
+   value
+   (clj->js {:mass      2
+             :stiffness 500
+             :damping   200})))
+
+(defn get-bottom-sheet-gesture
+  [pan-y translate-y bg-height bg-height-expanded
+   window-height keyboard-shown disable-drag? expandable?
+   show-bottom-sheet? expanded? close-bottom-sheet gesture-running?]
+  (-> (gesture/gesture-pan)
+      (gesture/on-start
+       (fn [_]
+         (reset! gesture-running? true)
+         (when (and keyboard-shown (not disable-drag?) show-bottom-sheet?)
+           (re-frame/dispatch [:dismiss-keyboard]))))
+      (gesture/on-update
+       (fn [evt]
+         (when (and (not disable-drag?) show-bottom-sheet?)
+           (let [max-pan-up   (if (or @expanded? (not expandable?))
+                                0
+                                (- (- bg-height-expanded bg-height)))
+                 max-pan-down (if @expanded?
+                                bg-height-expanded
+                                bg-height)]
+             (reanimated/set-shared-value pan-y
+                                          (max
+                                           (min
+                                            (.-translationY evt)
+                                            max-pan-down)
+                                           max-pan-up))))))
+      (gesture/on-end
+       (fn [_]
+         (reset! gesture-running? false)
+         (when (and (not disable-drag?) show-bottom-sheet?)
+           (let [end-pan-y                  (- window-height (.-value translate-y))
+                 expand-threshold           (min (* bg-height 1.1) (+ bg-height 50))
+                 collapse-threshold         (max (* bg-height-expanded 0.9) (- bg-height-expanded 50))
+                 should-close-bottom-sheet? (< end-pan-y (max (* bg-height 0.7) 50))]
+             (cond
+               should-close-bottom-sheet?
+               (close-bottom-sheet)
+
+               (and (not @expanded?) (> end-pan-y expand-threshold))
+               (reset! expanded? true)
+
+               (and @expanded? (< end-pan-y collapse-threshold))
+               (reset! expanded? false))))))))
+
+(defn handle-view
+  [window-width override-theme]
+  [rn/view
+   {:style {:width            window-width
+            :position         :absolute
+            :background-color :transparent
+            :top              0
+            :height           20}}
+   [rn/view {:style (styles/handle override-theme)}]])
+
+(defn bottom-sheet
+  [props children]
+  (let [{on-cancel                 :on-cancel
+         disable-drag?             :disable-drag?
+         show-handle?              :show-handle?
+         visible?                  :visible?
+         backdrop-dismiss?         :backdrop-dismiss?
+         expandable?               :expandable?
+         bottom-safe-area-spacing? :bottom-safe-area-spacing?
+         selected-item             :selected-item
+         is-initially-expanded?    :expanded?
+         override-theme            :override-theme
+         :or                       {show-handle?              true
+                                    backdrop-dismiss?         true
+                                    expandable?               false
+                                    bottom-safe-area-spacing? true
+                                    is-initially-expanded?    false}}
+        props
+        content-height (reagent/atom nil)
+        show-bottom-sheet? (reagent/atom nil)
+        keyboard-was-shown? (reagent/atom false)
+        expanded? (reagent/atom is-initially-expanded?)
+        gesture-running? (reagent/atom false)
+        reset-atoms (fn []
+                      (reset! show-bottom-sheet? nil)
+                      (reset! content-height nil)
+                      (reset! expanded? false)
+                      (reset! keyboard-was-shown? false)
+                      (reset! gesture-running? false))
+        close-bottom-sheet (fn []
+                             (reset! show-bottom-sheet? false)
+                             (when (fn? on-cancel) (on-cancel))
+                             (timer/set-timeout
+                              #(do
+                                 (re-frame/dispatch [:bottom-sheet/hide-old-navigation-overlay])
+                                 (reset-atoms))
+                              animation-delay))]
+    [:f>
+     (fn []
+       (let [{height       :height
+              window-width :width}
+             (rn/get-window)
+             window-height (if selected-item (- height 72) height)
+             {:keys [keyboard-shown]} (hooks/use-keyboard)
+             insets (safe-area/get-insets)
+             bg-height-expanded (- window-height (:top insets))
+             bg-height (max (min @content-height bg-height-expanded) 109)
+             bottom-sheet-dy (reanimated/use-shared-value 0)
+             pan-y (reanimated/use-shared-value 0)
+             translate-y (worklets.bottom-sheet/use-translate-y window-height bottom-sheet-dy pan-y)
+             bg-opacity
+             (worklets.bottom-sheet/use-background-opacity translate-y bg-height window-height 0.7)
+             on-content-layout (fn [evt]
+                                 (let [height (oget evt "nativeEvent" "layout" "height")]
+                                   (reset! content-height height)))
+             on-expanded (fn []
+                           (reanimated/set-shared-value bottom-sheet-dy bg-height-expanded)
+                           (reanimated/set-shared-value pan-y 0))
+             on-collapsed (fn []
+                            (reanimated/set-shared-value bottom-sheet-dy bg-height)
+                            (reanimated/set-shared-value pan-y 0))
+             bottom-sheet-gesture (get-bottom-sheet-gesture
+                                   pan-y
+                                   translate-y
+                                   bg-height
+                                   bg-height-expanded
+                                   window-height
+                                   keyboard-shown
+                                   disable-drag?
+                                   expandable?
+                                   show-bottom-sheet?
+                                   expanded?
+                                   close-bottom-sheet
+                                   gesture-running?)
+             handle-comp [gesture/gesture-detector {:gesture bottom-sheet-gesture}
+                          [handle-view window-width override-theme]]]
+
+         (react/use-effect #(do
+                              (cond
+                                (and
+                                 (nil? @show-bottom-sheet?)
+                                 visible?
+                                 (some? @content-height)
+                                 (> @content-height 0))
+                                (reset! show-bottom-sheet? true)
+
+                                (and @show-bottom-sheet? (not visible?))
+                                (close-bottom-sheet)))
+                           [@show-bottom-sheet? @content-height visible?])
+         (react/use-effect #(do
+                              (when @show-bottom-sheet?
+                                (cond
+                                  keyboard-shown
+                                  (do
+                                    (reset! keyboard-was-shown? true)
+                                    (reset! expanded? true))
+                                  (and @keyboard-was-shown? (not keyboard-shown))
+                                  (reset! expanded? false))))
+                           [@show-bottom-sheet? @keyboard-was-shown? keyboard-shown])
+         (react/use-effect #(do
+                              (when-not @gesture-running?
+                                (cond
+                                  @show-bottom-sheet?
+                                  (if @expanded?
+                                    (do
+                                      (reanimated/set-shared-value
+                                       bottom-sheet-dy
+                                       (with-animation (+ bg-height-expanded (.-value pan-y))))
+                                      ;; Workaround for
+                                      ;; https://github.com/software-mansion/react-native-reanimated/issues/1758#issue-817145741
+                                      ;; withTiming/withSpring callback not working on-expanded
+                                      ;; should be called as a callback of with-animation instead,
+                                      ;; once this issue has been resolved
+                                      (timer/set-timeout on-expanded animation-delay))
+                                    (do
+                                      (reanimated/set-shared-value
+                                       bottom-sheet-dy
+                                       (with-animation (+ bg-height (.-value pan-y))))
+                                      ;; Workaround for
+                                      ;; https://github.com/software-mansion/react-native-reanimated/issues/1758#issue-817145741
+                                      ;; withTiming/withSpring callback not working on-collapsed
+                                      ;; should be called as a callback of with-animation instead,
+                                      ;; once this issue has been resolved
+                                      (timer/set-timeout on-collapsed animation-delay)))
+
+                                  (= @show-bottom-sheet? false)
+                                  (reanimated/set-shared-value bottom-sheet-dy (with-animation 0)))))
+                           [@show-bottom-sheet? @expanded? @gesture-running?])
+
+         [:<>
+          [rn/pressable
+           {:on-press (when backdrop-dismiss? close-bottom-sheet)
+            :style    styles/backdrop}
+           [reanimated/view
+            {:style (reanimated/apply-animations-to-style
+                     {:opacity bg-opacity}
+                     styles/backdrop-color)}]]
+          (cond->> [reanimated/view
+                    {:style (reanimated/apply-animations-to-style
+                             {:transform [{:translateY translate-y}]}
+                             {:width  window-width
+                              :height window-height})}
+                    [rn/view {:style styles/container}
+                     (when selected-item
+                       [rn/view {:style (styles/selected-background override-theme)}
+                        [selected-item]])
+                     [rn/view {:style (styles/background override-theme)}
+                      [rn/keyboard-avoiding-view
+                       {:behaviour (if platform/ios? :padding :height)
+                        :style     {:flex 1}}
+                       [rn/view
+                        {:style     (styles/content-style insets bottom-safe-area-spacing?)
+                         :on-layout (when-not (and
+                                               (some? @content-height)
+                                               (> @content-height 0))
+                                      on-content-layout)}
+                        children]]
+                      (when show-handle?
+                        handle-comp)]]]
+            (not show-handle?)
+            (conj [gesture/gesture-detector {:gesture bottom-sheet-gesture}]))]))]))
@@ -2,6 +2,7 @@
  (:require
    ["eth-phishing-detect" :as eth-phishing-detect]
    [clojure.string :as string]
+    [legacy.status-im.bottom-sheet.events :as bottom-sheet]
    [legacy.status-im.browser.permissions :as browser.permissions]
    [legacy.status-im.browser.webview-ref :as webview-ref]
    [legacy.status-im.ethereum.ens :as ens]
@@ -518,7 +519,7 @@
  [{:keys [db] :as cofx} address]
  (rf/merge cofx
            {:browser/clear-web-data nil}
-            (navigation/hide-bottom-sheet)
+            (bottom-sheet/hide-bottom-sheet-old)
            (browser.permissions/clear-dapps-permissions)
            (multiaccounts.update/multiaccount-update :dapps-address address {})
            #(when (= (:view-id db) :browser)
@@ -1,9 +1,9 @@
 (ns legacy.status-im.communities.core
  (:require
    [clojure.set :as set]
+    [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,10 +22,60 @@
          {}
          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]
@@ -33,13 +83,12 @@
            (navigation/navigate-back)
            (handle-response response-js)))

-(rf/defn member-banned
-  {:events [::member-banned]}
-  [cofx response-js]
-  (rf/merge cofx
-            (navigation/hide-bottom-sheet)
-            (handle-response response-js)
-            (activity-center/notifications-fetch-unread-count)))
+(re-frame/reg-event-fx ::member-banned
+ (fn [{:keys [db]} [response-js]]
+   {:db (assoc db :bottom-sheet/show? false)
+    :fx [[:dismiss-bottom-sheet-overlay-old]
+         [:sanitize-messages-and-process-response response-js]
+         [:activity-center.notifications/fetch-unread-count]]}))

 (rf/defn member-ban
  {:events [::member-ban]}
@@ -58,7 +107,7 @@
  {:events [::member-kicked]}
  [cofx response-js]
  (rf/merge cofx
-            (navigation/hide-bottom-sheet)
+            (bottom-sheet/hide-bottom-sheet-old)
            (handle-response response-js)))

 (rf/defn member-kick
@@ -92,7 +141,7 @@
  {:events [:community.member/role-updated]}
  [cofx response-js]
  (rf/merge cofx
-            (navigation/hide-bottom-sheet)
+            (bottom-sheet/hide-bottom-sheet-old)
            (handle-response response-js)))

 (rf/defn add-role-to-member
@@ -1,35 +1,257 @@
 (ns legacy.status-im.communities.e2e
-  (:require [taoensso.timbre :as log]
+  (:require [promesa.core :as promesa]
+            [status-im.common.json-rpc.events :as rpc]
+            [status-im.constants :as constants]
+            [taoensso.timbre :as log]
            [utils.re-frame :as rf]))

 ;;NOTE: ONLY FOR QA

-(rf/defn create-closed-community
-  {:events [:fast-create-community/create-closed-community]}
-  [_]
-  {:json-rpc/call [{:method      "wakuext_createClosedCommunity"
-                    :params      []
-                    :js-response true
-                    :on-success  #(rf/dispatch [:sanitize-messages-and-process-response %])
-                    :on-error    #(log/error "failed to create closed community." {:error %})}]
-   :dispatch      [:hide-bottom-sheet]})
+(def one-stt-in-wei "1000000000000000000")
+(def one-eth-in-wei "1000000000000000000")
+(def ten-stt-in-wei "10000000000000000000")
+
+(def stt-symbol "STT")
+(def eth-symbol "ETH")
+(def null-address "0x0000000000000000000000000000000000000000")
+
+(defn- eth-token-criteria
+  [amount-in-wei]
+  {:contractAddresses {constants/ethereum-sepolia-chain-id null-address
+                       constants/arbitrum-sepolia-chain-id null-address
+                       constants/optimism-sepolia-chain-id null-address}
+   :type              constants/community-token-type-erc20
+   :symbol            "ETH"
+   :name              "Ethereum"
+   :amountInWei       amount-in-wei
+   :decimals          18})
+
+(defn- stt-token-criteria
+  [amount-in-wei]
+  {:contractAddresses {constants/ethereum-sepolia-chain-id constants/sepolia-stt-contract-address}
+   :type              constants/community-token-type-erc20
+   :symbol            "STT"
+   :name              "Status Test Token"
+   :amountInWei       amount-in-wei
+   :decimals          18})
+
+(def token-criteria
+  {stt-symbol stt-token-criteria
+   eth-symbol eth-token-criteria})
+
+(def base-channel-permissions
+  [{:permission-type constants/community-token-permission-can-view-channel
+    :token-symbol    stt-symbol
+    :amount          one-stt-in-wei}
+   {:permission-type constants/community-token-permission-can-view-channel
+    :token-symbol    eth-symbol
+    :amount          one-eth-in-wei}
+   {:permission-type constants/community-token-permission-can-view-and-post-channel
+    :token-symbol    stt-symbol
+    :amount          one-stt-in-wei}
+   {:permission-type constants/community-token-permission-can-view-and-post-channel
+    :token-symbol    eth-symbol
+    :amount          one-eth-in-wei}])
+
+(defn- channel-names->description
+  [channel-names]
+  (map #(hash-map :name        %1
+                  :permissions [%2])
+       channel-names
+       base-channel-permissions))
+
+(def community-descriptions
+  {:open
+   {:community-name      "Open community"
+    :membership          constants/community-permissions-auto-accept
+    :pin-message-allowed false}
+   :closed
+   {:community-name      "Closed community"
+    :membership          constants/community-permissions-manual-accept
+    :pin-message-allowed true
+    :categories          [{:category-name "Pets" :channels #{"Cats" "Dogs"}}
+                          {:category-name "Household" :channels #{"Rules"}}]
+    :channel-list        [{:name "Cats"} {:name "Dogs"} {:name "Rules"}]}
+   :token-gated
+   {:community-name        "Token gated community"
+    :membership            constants/community-permissions-auto-accept
+    :pin-message-allowed   true
+    :community-permissions [{:amount-in-wei   ten-stt-in-wei
+                             :permission-type constants/community-token-permission-become-member
+                             :token-symbol    stt-symbol}]
+    :channel-list          (channel-names->description ["Lions" "Birds" "Trees" "Flowers"])}
+   :snt-admin
+   {:community-name        "SNT Admin Community"
+    :membership            constants/community-permissions-auto-accept
+    :pin-message-allowed   true
+    :community-permissions [{:amount-in-wei   one-stt-in-wei
+                             :permission-type constants/community-token-permission-become-admin
+                             :token-symbol    stt-symbol}]
+    :channel-list          (channel-names->description ["Sounds" "Colors" "Books" "Sports"])}
+   :admin-and-member
+   {:community-name        "Admin and Member"
+    :membership            constants/community-permissions-auto-accept
+    :pin-message-allowed   true
+    :community-permissions [{:amount-in-wei   one-stt-in-wei
+                             :permission-type constants/community-token-permission-become-member
+                             :token-symbol    stt-symbol}
+                            {:amount-in-wei   one-eth-in-wei
+                             :permission-type constants/community-token-permission-become-admin
+                             :token-symbol    eth-symbol}]
+    :channel-list          (channel-names->description ["Party" "Birthday" "Travel" "Cars"])}})
+
+
+(defn- js-messenger-response->community-id
+  [response]
+  (-> response .-communities first .-id))
+
+(defn- js-messenger-response->channel-id
+  [channel-name response]
+  (->> response
+       .-communities
+       first
+       .-chats
+       js->clj
+       vals
+       (some #(when (= channel-name (get % "name")) (get % "id")))))
+
+(defn- channel-token-criteria->request
+  [community-id channel-id {:keys [token-symbol amount]}]
+  (fn []
+    (rpc/call
+     {:method      "wakuext_createCommunityTokenPermissionV2"
+      :js-response true
+      :params      [{:communityID   community-id
+                     :type          constants/community-token-permission-become-member
+                     :chatIds       [channel-id]
+                     :tokenCriteria [((token-criteria token-symbol) amount)]}]})))
+
+(defn- channel-token-criteria->requests
+  [community-id channel-id tokens]
+  (let [keep-fn (partial channel-token-criteria->request community-id channel-id)]
+    (keep keep-fn tokens)))
+
+(defn- create-community-channel!
+  [channel community-id]
+  (->
+    (rpc/call
+     {:method      "wakuext_createCommunityChannel"
+      :js-response true
+      :params      [{:name        (:name channel)
+                     :communityId community-id
+                     :description (:name channel)}]})
+    (.then (fn [response]
+             (if (:permissions channel)
+               (let [channel-id (js-messenger-response->channel-id (:name channel) response)]
+                 (apply
+                  promesa/chain
+                  (promesa/resolved nil)
+                  (channel-token-criteria->requests community-id channel-id (:permissions channel))))
+               response)))
+    (.catch #(log/error "failed to create token gated community channel."
+                        {:error        %
+                         :channel-name (:name channel)}))))
+
+(defn- create-category!
+  [response {:keys [category-name channels]}]
+  (let [community-id (js-messenger-response->community-id response)
+        channel-ids  (map #(js-messenger-response->channel-id % response)
+                          channels)]
+    (rpc/call
+     {:method      "wakuext_createCommunityCategory"
+      :js-response true
+      :params      [{:communityId  community-id
+                     :categoryName category-name
+                     :chatIds      channel-ids}]})))
+
+(defn- create-community!
+  [community-name membership pin-message-allowed]
+  (rpc/call
+   {:method      "wakuext_createCommunity"
+    :js-response true
+    :params      [{:name                         community-name
+                   :description                  community-name
+                   :color                        "#887af9"
+                   :historyArchiveSupportEnabled true
+                   :membership                   membership
+                   :pinMessageAllMembersEnabled  pin-message-allowed}]}))
+
+(defn- create-token-gated-permission!
+  [{:keys [token-symbol permission-type amount-in-wei]} community-id]
+  (rpc/call
+   {:method      "wakuext_createCommunityTokenPermissionV2"
+    :js-response true
+    :params      [{:communityId   community-id
+                   :type          permission-type
+                   :tokenCriteria [((token-criteria token-symbol) amount-in-wei)]}]}))
+
+(def passthrough [identity])
+
+(defn- create-community-from-description
+  [{:keys [community-name
+           membership
+           community-permissions
+           pin-message-allowed
+           categories
+           channel-list]}]
+  (let [create-community-permissions-fn (if (seq community-permissions)
+                                          (map
+                                           (fn [permission]
+                                             (fn [response]
+                                               (create-token-gated-permission!
+                                                permission
+                                                (js-messenger-response->community-id response))))
+                                           community-permissions)
+                                          passthrough)
+        create-channels-fn              (if (seq channel-list)
+                                          (map
+                                           (fn [channel]
+                                             (fn [response]
+                                               (create-community-channel!
+                                                channel
+                                                (js-messenger-response->community-id response))))
+                                           channel-list)
+                                          passthrough)
+        create-categories-fn            (if (seq categories)
+                                          (map
+                                           (fn [category]
+                                             (fn [messenger-response]
+                                               (create-category! messenger-response category)))
+                                           categories)
+                                          passthrough)]
+    (as-> (create-community! community-name membership pin-message-allowed) $
+      (apply promesa/chain $ create-community-permissions-fn)
+      (apply promesa/chain $ create-channels-fn)
+      (apply promesa/chain $ create-categories-fn)
+      (promesa/then $ #(rf/dispatch [:hide-bottom-sheet]))
+      (promesa/catch $ #(log/error "failed to create community e2e" {:error %})))))

 (rf/defn create-open-community
-  {:events [:fast-create-community/create-open-community]}
+  {:events [:e2e/create-open-community]}
  [_]
-  {:json-rpc/call [{:method      "wakuext_createOpenCommunity"
-                    :params      []
-                    :js-response true
-                    :on-success  #(rf/dispatch [:sanitize-messages-and-process-response %])
-                    :on-error    #(log/error "failed to create open community." {:error %})}]
-   :dispatch      [:hide-bottom-sheet]})
+  (create-community-from-description (community-descriptions :open))
+  nil)
+
+(rf/defn create-closed-community
+  {:events [:e2e/create-closed-community]}
+  [_]
+  (create-community-from-description (community-descriptions :closed))
+  nil)

 (rf/defn create-token-gated-community
-  {:events [:fast-create-community/create-token-gated-community]}
+  {:events [:e2e/create-token-gated-community]}
  [_]
-  {:json-rpc/call [{:method      "wakuext_createTokenGatedCommunity"
-                    :params      []
-                    :js-response true
-                    :on-success  #(rf/dispatch [:sanitize-messages-and-process-response %])
-                    :on-error    #(log/error "failed to create token gated community." {:error %})}]
-   :dispatch      [:hide-bottom-sheet]})
+  (create-community-from-description (community-descriptions :token-gated))
+  nil)
+
+(rf/defn snt-admin-community
+  {:events [:e2e/create-snt-admin-community]}
+  [_]
+  (create-community-from-description (community-descriptions :snt-admin))
+  nil)
+
+(rf/defn admin-and-member-community
+  {:events [:e2e/create-admin-and-member-community]}
+  [_]
+  (create-community-from-description (community-descriptions :admin-and-member))
+  nil)
@@ -3,6 +3,7 @@
  (:require
    [clojure.set :as set]
    [clojure.string :as string]
+    [legacy.status-im.bottom-sheet.events :as bottom-sheet]
    [legacy.status-im.ethereum.ens :as ens]
    [legacy.status-im.multiaccounts.update.core :as multiaccounts.update]
    [legacy.status-im.utils.random :as random]
@@ -287,7 +288,7 @@
  [{:keys [db] :as cofx} _ {:keys [address]}]
  (rf/merge cofx
            {:db (assoc-in db [:ens/registration :address] address)}
-            (navigation/hide-bottom-sheet)))
+            (bottom-sheet/hide-bottom-sheet-old)))

 (rf/defn save-preferred-name
  {:events [::save-preferred-name]}
@@ -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
@@ -1,5 +1,6 @@
 (ns legacy.status-im.mobile-sync-settings.core
  (:require
+    [legacy.status-im.bottom-sheet.events :as bottom-sheet]
    [legacy.status-im.mailserver.core :as mailserver]
    [legacy.status-im.multiaccounts.model :as multiaccounts.model]
    [legacy.status-im.multiaccounts.update.core :as multiaccounts.update]
@@ -30,7 +31,7 @@
              (assoc :mailserver/current-request true))
        :fx [(when fetch-historic-messages?
               [:mailserver/request-all-historic-messages])
-             [:dispatch [:hide-bottom-sheet]]
+             [:dismiss-bottom-sheet-overlay-old]
             (when previously-initialized?
               (let [new-identity-input (get-in db [:contacts/new-identity :input])]
                 [:dispatch [:contacts/set-new-identity {:input new-identity-input}]]))]}
@@ -100,10 +101,10 @@
  [cofx]
  (rf/merge
   cofx
-   (navigation/hide-bottom-sheet)
+   (bottom-sheet/hide-bottom-sheet-old)
   (navigation/navigate-to :mobile-network-settings nil)))

 (rf/defn mobile-network-show-offline-sheet
  {:events [:mobile-network/show-offline-sheet]}
  [cofx]
-  (navigation/hide-bottom-sheet cofx))
+  (bottom-sheet/hide-bottom-sheet-old cofx))
@@ -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]
+    [quo.theme :as theme]
    [re-frame.core :as re-frame.core]
    [react-native.core :as rn]
    [status-im.contexts.profile.utils :as profile.utils]
@@ -52,8 +52,7 @@

 (defn profile-photo-plus-dot-view
  [{:keys [public-key full-name customization-color photo-container photo-path community?]}]
-  (let [theme                   @(re-frame.core/subscribe [:theme])
-        photo-container         (if (nil? photo-container)
+  (let [photo-container         (if (nil? photo-container)
                                  styles/container-chat-list
                                  photo-container)
        size                    (:width photo-container)
@@ -72,7 +71,8 @@
               {:size             size
                :full-name        full-name
                :font-size        (get text-style :font-size)
-                :background-color (user-avatar.style/customization-color customization-color theme)
+                :background-color (user-avatar.style/customization-color customization-color
+                                                                         (theme/get-theme))
                :indicator-size   0
                :indicator-border 0
                :indicator-color  "#000000"
@@ -2,7 +2,6 @@
  (: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]))

@@ -33,8 +32,7 @@
    :or   {border-bottom? true
           new-ui?        false}
    :as   props}]
-  (let [theme      (quo.theme/use-theme)
-        navigation (if (= navigation :none)
+  (let [navigation (if (= navigation :none)
                     nil
                     [(default-navigation modal? navigation)])]
    [quo/header
@@ -49,5 +47,4 @@
              {:right-accessories right-accessories})
            (when new-ui?
              {:background (quo.colors/theme-colors quo.colors/neutral-5
-                                                    quo.colors/neutral-95
-                                                    theme)}))]))
+                                                    quo.colors/neutral-95)}))]))
@@ -31,7 +31,7 @@
        :on-press            #(re-frame/dispatch [:browser.ui/open-url url])
        :on-long-press       (fn []
                               (re-frame/dispatch
-                                [:show-bottom-sheet
+                                [:bottom-sheet/show-sheet-old
                                 {:content (fn []
                                             [react/view {:flex 1}
                                              [list.item/list-item
@@ -110,7 +110,7 @@
     [quo/button
      {:accessibility-label :select-account
       :type                :scale
-       :on-press            #(re-frame/dispatch [:show-bottom-sheet
+       :on-press            #(re-frame/dispatch [:bottom-sheet/show-sheet-old
                                                 {:content (accounts/accounts-list accounts
                                                                                   dapps-account)}])}
      [react/view (styles/dapps-account color)
@@ -2,6 +2,7 @@
  (: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]
@@ -91,7 +92,7 @@
      [icons/icon :main-icons/arrow-right {:color colors/black}]]
     [react/touchable-highlight
      {:accessibility-label :select-account
-       :on-press            #(re-frame/dispatch [:show-bottom-sheet
+       :on-press            #(re-frame/dispatch [:bottom-sheet/show-sheet-old
                                                 {:content (accounts/accounts-list accounts
                                                                                   dapps-account)}])}
      [chat-icon/custom-icon-view-list (:name dapps-account) (:color dapps-account) 32]]
@@ -104,11 +105,13 @@
     (if empty-tab
       [react/touchable-highlight
        {:accessibility-label :universal-qr-scanner
-         :on-press            #(re-frame/dispatch [:open-modal :shell-qr-reader])}
+         :on-press            #(re-frame/dispatch
+                                [::qr-scanner/scan-code
+                                 {:handler ::qr-scanner/on-scan-success}])}
        [icons/icon :main-icons/qr {:color colors/black}]]
       [react/touchable-highlight
        {:on-press            #(re-frame/dispatch
-                                [:show-bottom-sheet
+                                [:bottom-sheet/show-sheet-old
                                 {:content (options/browser-options
                                            url
                                            dapps-account
@@ -162,7 +165,7 @@
 (defn request-resources-access-for-page
  [resources url webview-ref]
  (re-frame/dispatch
-   [:show-bottom-sheet
+   [:bottom-sheet/show-sheet-old
    {:content            (fn [] [request-resources-panel resources url webview-ref])
     :show-handle?       false
     :backdrop-dismiss?  false
@@ -172,7 +175,7 @@
 (defn block-resources-access-and-notify-user
  [url]
  (.answerPermissionRequest ^js @webview-ref/webview-ref false)
-  (re-frame/dispatch [:show-bottom-sheet
+  (re-frame/dispatch [:bottom-sheet/show-sheet-old
                      {:content (fn [] [block-resources-panel url])}]))

 ;; should-component-update is called only when component's props are changed,
@@ -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 theme)
+   :color          (quo.colors/theme-colors quo.colors/neutral-100 quo.colors/white)
   :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 theme)})
+   :style                    (message-default-style)})

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

 (defn text-style
-  [content-type in-popover? theme]
+  [content-type in-popover?]
  (merge
   (when in-popover? {:number-of-lines 2})
   (cond
-     (= 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))))
+     (= 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))))

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

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

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

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

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

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

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

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

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

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

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

 (defn community-verified
  []
@@ -6,7 +6,6 @@
    [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]
@@ -27,7 +26,7 @@

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

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

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

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

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

    "link"
-    (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])
+    (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])

    "mention"
    (conj
@@ -68,18 +66,17 @@
                    #(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 theme)
-                    :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)
+                         :text-decoration-line :underline}
+              :on-press #(rf/dispatch [:communities/status-tag-pressed community-id literal])})
+           "#"
+           literal])

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

    (conj acc literal)))

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

  (case type

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

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

@@ -143,13 +137,12 @@
 ;; STATUS ? whats that ?
 (defmethod ->message constants/content-type-status
  [{:keys [content content-type]}]
-  (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))]]))
+  [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))]])

 (defn contact-request-status-pending
  []
@@ -1,15 +1,16 @@
 (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]))

@@ -48,35 +49,18 @@
        contacts-selected (reagent/atom #{})
        {:keys [invite?]} (rf/sub [:get-screen-params])]
    (fn []
-      (let [theme (quo.theme/use-theme)
-            contacts-data (rf/sub [:contacts/active])
-            {community-id :id
-             :keys        [permissions
-                           can-manage-users?]}
+      (let [contacts-data (rf/sub [:contacts/active])
+            {: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))
-            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])]
+                             (not= (:access permissions) constants/community-no-membership-access))]
        [:<>
         [topbar/topbar
          {:title  (i18n/label (if can-invite?
@@ -97,8 +81,11 @@
           :center
           [quo/button
            {:disabled            (and (string/blank? @user-pk)
-                                       (zero? selected-contacts-count))
+                                       (zero? (count selected)))
             :accessibility-label :share-community-link
             :type                :secondary
-             :on-press            on-press-share-community}
+             :on-press            #(debounce/throttle-and-dispatch
+                                    [::communities/share-community-confirmation-pressed @user-pk
+                                     selected]
+                                    3000)}
            (i18n/label (if can-invite? :t/invite :t/share))]}]]))))
@@ -73,7 +73,7 @@
      :accessory           (when (not= public-key my-public-key)
                             [quo/button
                              {:on-press
-                               #(rf/dispatch [:show-bottom-sheet
+                               #(rf/dispatch [:bottom-sheet/show-sheet-old
                                              {:content (fn []
                                                          [member-sheet primary-name member community-id
                                                           can-kick-users? can-manage-users? admin?])}])
@@ -757,7 +757,7 @@
        [profile.components/settings-item
         {:label-kw  :ens-primary-username
          :value     preferred-name
-          :action-fn #(re-frame/dispatch [:show-bottom-sheet
+          :action-fn #(re-frame/dispatch [:bottom-sheet/show-sheet-old
                                          {:content
                                           (fn [] (name-list names preferred-name))}])}]])]]])

@@ -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]
+    [quo.theme :as theme]
    [re-frame.core :as re-frame]
    [reagent.core :as reagent]
    [status-im.constants :as constants]
@@ -184,7 +184,6 @@
         :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
@@ -206,7 +205,8 @@
          {:on-press         on-share
           :bottom-separator false
           :title            (profile.utils/displayed-name profile)
-           :color            (user-avatar.style/customization-color customization-color theme)
+           :color            (user-avatar.style/customization-color customization-color
+                                                                    (theme/get-theme))
           :photo            (profile.utils/photo profile)
           :monospace        (not ens-verified)
           :subtitle         secondary-name
@@ -74,7 +74,7 @@
                 (not= public-key current-user-identity))
        {:accessory [quo/button
                     {:on-press            #(re-frame/dispatch
-                                             [:bottom-sheet/show-sheet
+                                             [:bottom-sheet/show-sheet-old
                                              {:content (fn []
                                                          [member-sheet chat-id member admin?])}])
                      :type                :icon
@@ -146,7 +146,7 @@
    [list.item/list-item
     {:title    (profile.utils/displayed-name contact)
      :icon     [chat-icon/contact-icon-contacts-tab contact]
-      :on-press #(re-frame/dispatch [:show-bottom-sheet
+      :on-press #(re-frame/dispatch [:bottom-sheet/show-sheet-old
                                     {:content (fn []
                                                 [invitation-sheet invitation contact])}])}]))

@@ -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]
+    [quo.theme :as theme]
    [re-frame.core :as re-frame]
    [reagent.core :as reagent]
    [status-im.common.qr-codes.view :as qr-codes]
@@ -200,7 +200,6 @@
          @(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
@@ -218,11 +217,11 @@
         :use-insets        true
         :extended-header   (profile-header/extended-header
                             {:on-press  on-share
-                              :on-edit   #(re-frame/dispatch [:show-bottom-sheet
+                              :on-edit   #(re-frame/dispatch [:bottom-sheet/show-sheet-old
                                                              {:content (edit/bottom-sheet
                                                                         has-picture)}])
                              :color     (user-avatar.style/customization-color customization-color
-                                                                                theme)
+                                                                                (theme/get-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?]} theme]
+  [{:keys [color size new-ui?]}]
  (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 theme)}
+     :border-color     (quo.colors/theme-colors quo.colors/white quo.colors/neutral-90)}
    {:background-color color
     :width            size
     :height           size
@@ -33,11 +33,10 @@
     :border-color     colors/white}))

 (defn visibility-status-profile-dot
-  [{:keys [color size border-width margin-left new-ui?]} theme]
+  [{:keys [color size border-width margin-left new-ui?]}]
  (merge (visibility-status-dot {:color   color
                                 :size    size
-                                 :new-ui? new-ui?}
-                                theme)
+                                 :new-ui? new-ui?})
         {:margin-right 6
          :margin-left  margin-left
          :border-width border-width}))
@@ -3,7 +3,6 @@
    [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]
@@ -91,15 +90,13 @@
 (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?}
-                                         theme)
+                                          :new-ui? new-ui?})
           {:bottom              margin
            :right               margin
            :position            :absolute
@@ -37,7 +37,7 @@
     (dispatch-popover page-y))))

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

 (defn visibility-status-button
  [on-press props]
@@ -2,6 +2,7 @@
  (:require
    [clojure.string :as string]
    [goog.string :as gstring]
+    [legacy.status-im.bottom-sheet.events :as bottom-sheet]
    [legacy.status-im.ui.components.react :as react]
    [legacy.status-im.utils.build :as build]
    [legacy.status-im.utils.deprecated-types :as types]
@@ -12,7 +13,6 @@
    [status-im.common.json-rpc.events :as json-rpc]
    [status-im.common.log :as log]
    [status-im.config :as config]
-    [status-im.navigation.events :as navigation]
    [utils.datetime :as datetime]
    [utils.i18n :as i18n]
    [utils.re-frame :as rf]))
@@ -226,7 +226,7 @@
    {:db (assoc db :bug-report/description-error error)}
    (rf/merge
     cofx
-     (navigation/hide-bottom-sheet)
+     (bottom-sheet/hide-bottom-sheet-old)
     (send-logs :email))))

 (re-frame/reg-fx
@@ -254,5 +254,5 @@
  (rf/merge
   cofx
   {:db (dissoc db :bug-report/details)}
-   (navigation/hide-bottom-sheet)
+   (bottom-sheet/hide-bottom-sheet-old)
   (submit-issue)))
@@ -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)
+  (let [theme                   (quo.theme/use-theme-value)
        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) :light)})
+                    :backgroundColor (colors/resolve-color (:customization-color opts) :dark)})
      (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) :light)})
+                    :backgroundColor (colors/resolve-color (:customization-color opts) :dark)})
      (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,10 +56,9 @@


 (defn root-container
-  [{:keys [type size customization-color]
+  [{:keys [type size theme customization-color]
    :or   {size                default-size
-           customization-color :blue}}
-   theme]
+           customization-color :blue}}]
  (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
+(defn- view-internal
  "Opts:
   
    :type  - keyword -> :default/:watch-only
@@ -21,14 +21,15 @@
    :or   {size  style/default-size
           emoji "🍑"}
    :as   opts}]
-  (let [theme      (quo.theme/use-theme)
-        emoji-size (style/get-emoji-size size)]
+  (let [emoji-size (style/get-emoji-size size)]
    [rn/view
     {:accessible          true
      :accessibility-label :account-avatar
-      :style               (style/root-container opts theme)}
+      :style               (style/root-container opts)}
     [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
+(defn- view-internal
  "Options:

  :size - keyword (default nil) - Container size, for the moment,
@@ -52,21 +52,22 @@
  :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]}]
-  (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]]))
+  [{: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))
@@ -4,16 +4,15 @@
    [quo.theme :as quo.theme]
    [react-native.fast-image :as fast-image]))

-(defn view
+(defn- view-internal
  "Opts:
   
    :image - collection image
    :theme - keyword -> :light/:dark"
-  [{: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)}]))
+  [{: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))
@@ -13,11 +13,3 @@
   :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,9 +1,7 @@
 (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]
@@ -21,44 +19,27 @@
   :size-80 {:icon      32
             :container 80}})

-(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
+(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}}]
         [icon/icon icon-name
          {:size  icon-size
-           :color colors/white-opa-70}]))]))
+           :color colors/white-opa-70}])])))
+
+(def view (quo.theme/with-theme view-internal))
@@ -15,12 +15,11 @@
   :size-20 {:component 20
             :icon      12}})

-(defn icon-avatar
-  [{:keys [size icon color opacity border?]
+(defn icon-avatar-internal
+  [{:keys [size icon color opacity border? theme]
    :or   {opacity 20
           size    :size-32}}]
-  (let [theme                                       (quo.theme/use-theme)
-        {component-size :component icon-size :icon} (get sizes size)
+  (let [{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)
@@ -39,3 +38,5 @@
      [rn/image
       {:source icon
        :style  {:width component-size :height component-size}}])))
+
+(def icon-avatar (quo.theme/with-theme icon-avatar-internal))
@@ -14,6 +14,7 @@
      [: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
-  [theme]
-  {:online  (colors/theme-colors colors/success-50 colors/success-60 theme)
+  []
+  {:online  (colors/theme-colors colors/success-50 colors/success-60)
   :offline colors/neutral-40})

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

 (defn initials-avatar
-  [{:keys [full-name size customization-color]
+  [{:keys [full-name size customization-color theme]
    :or   {customization-color :blue}}]
-  (let [theme           (quo.theme/use-theme)
-        font-size       (get-in style/sizes [size :font-size])
+  (let [font-size       (get-in style/sizes [size :font-size])
        amount-initials (if (#{:xs :xxs :xxxs} size) 1 2)]
    [rn/view
     {:accessibility-label :initials-avatar
@@ -32,14 +31,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?]
+  [{:keys [full-name size profile-picture static?
+           status-indicator? online? ring? theme]
    :or   {size              :big
           status-indicator? true
           online?           true
           ring?             true}
    :as   props}]
-  (let [theme              (quo.theme/use-theme)
-        full-name          (or full-name "Your Name")
+  (let [full-name          (or full-name "Your Name")
        ;; image generated with `profile-picture-fn` is round cropped
        ;; no need to add border-radius for them
        outer-styles       (style/outer size (not (:fn profile-picture)))
@@ -50,7 +49,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 theme) (if online? :online :offline))
+        indicator-color    (get (style/indicator-color) (if online? :online :offline))
        profile-picture-fn (:fn profile-picture)]

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

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

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

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

  :full-name - string (default: nil) - used to generate initials
@@ -44,10 +44,9 @@
  :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 monospace? lowercase? neutral?]
+  [{:keys [full-name customization-color size theme monospace? lowercase? neutral?]
    :or   {size biggest-possible}}]
-  (let [theme       (quo.theme/use-theme)
-        circle-size (:size (size properties))
+  (let [circle-size (:size (size properties))
        small?      (check-if-size-small size)
        initials    (utils.string/get-initials full-name (if small? 1 2))]
    [rn/view
@@ -58,3 +57,5 @@
       :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,26 +8,27 @@
    [quo.theme :as quo.theme]
    [react-native.core :as rn]))

-(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]]])))
+(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))
@@ -17,8 +17,7 @@
 (defn input
  [disabled?]
  (assoc (text/text-style {:size   :paragraph-1
-                           :weight :regular}
-                          nil)
+                           :weight :regular})
         :flex       1
         :min-height 36
         :min-width  120
@@ -46,12 +45,11 @@
   :z-index            10})

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

 (def root-container
  {:height             60
@@ -121,7 +121,7 @@
            :size                favicon-size}])
        [rn/text
         {:accessibility-label :browser-input-label
-          :style               (style/text theme)}
+          :style               (style/text)}
         (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]
+    [quo.theme :as 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-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?]
+  [{: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?]
    :or   {type                :primary
           size                40
           customization-color (if (= type :primary) :blue nil)}}
   children]
  (let [[pressed-state? set-pressed-state] (rn/use-state false)
-        theme (quo.theme/use-theme)
+        theme (theme/use-theme-value)
        {: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           (or icon-top-color icon-color)
+            :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 (or icon-left-color icon-color)
+           {: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 (or icon-right-color icon-color)
+           {: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]
+    [quo.theme :as 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                  (quo.theme/use-theme)
+        theme                  (theme/use-theme-value)
        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)
+  (let [theme                  (quo.theme/use-theme-value)
        [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)
+  (let [theme                  (quo.theme/use-theme-value)
        [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]
+    [quo.theme :as theme]
    [react-native.core :as rn]
    [react-native.linear-gradient :as linear-gradient]))

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

-(defn view
+(defn- view-internal
  "Options
   - `type` `:words`/`:error`/`:info`/`:empty`.
   - `blur?` Boolean to enable blur background support.
@@ -34,42 +34,43 @@
   - `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]}]
-  (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}]
+  [{: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}]

-        :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)]]))
+      :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))
@@ -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)
+  (let [theme                         (quo.theme/use-theme-value)
        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]
+    [quo.theme :as theme]
    [react-native.core :as rn]))

 (defn view
  [{:keys [on-press on-long-press disabled? icon accessibility-label container-style]}]
-  (let [theme                  (quo.theme/use-theme)
+  (let [theme                  (theme/use-theme-value)
        [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,31 +23,32 @@
     :style  {:margin-top 4
              :color      (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} text]])

-(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}]]))
+(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))
@@ -4,14 +4,13 @@
    [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]
+    [quo.theme :as theme]
    [react-native.core :as rn]
    [utils.number :as utils.number]))

-(defn view
-  [{:keys [year month on-change]}]
-  (let [theme (quo.theme/use-theme)
-        year  (utils.number/parse-int year)
+(defn- view-internal
+  [{:keys [year month on-change theme]}]
+  (let [year  (utils.number/parse-int year)
        month (utils.number/parse-int month)]
    [rn/view
     {:style style/container}
@@ -36,3 +35,5 @@
       :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]
+    [quo.theme :as theme]
    [react-native.core :as rn]
    [utils.number :as utils.number]))

 (defn view
  [{:keys [on-change start-date end-date]}]
-  (let [theme                               (quo.theme/use-theme)
+  (let [theme                               (theme/use-theme-value)
        [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,22 +2,23 @@
  (:require
    [quo.components.calendar.calendar.weekdays-header.style :as style]
    [quo.components.markdown.text :as text]
-    [quo.theme]
+    [quo.theme :as theme]
    [react-native.core :as rn]
    [utils.datetime :as datetime]
    [utils.i18n :as i18n]))

-(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))]])]))
+(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))
@@ -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]
+    [quo.theme :as theme]
    [react-native.core :as rn]
    [react-native.linear-gradient :as linear-gradient]))

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

-(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]]))
+(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))
@@ -2,30 +2,31 @@
  (:require
    [quo.components.calendar.calendar-day.style :as style]
    [quo.components.markdown.text :as text]
-    [quo.theme]
+    [quo.theme :as theme]
    [react-native.core :as rn]))

-(defn view
-  [{:keys [state in-range on-press customization-color]
+(defn- view-internal
+  [{:keys [state in-range on-press customization-color theme]
    :or   {state :default}}
   day]
-  (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
+  [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})}]]]))
+                 :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))
@@ -2,23 +2,24 @@
  (:require
    [quo.components.calendar.calendar-year.style :as style]
    [quo.components.markdown.text :as text]
-    [quo.theme]
+    [quo.theme :as theme]
    [react-native.core :as rn]))

-(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]]))
+(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))
@@ -1,12 +1,16 @@
 (ns quo.components.code.snippet.view
  (:require
-    [quo.components.code.common.view :as code-common]))
+    [quo.components.code.common.view :as code-common]
+    [quo.theme :as theme]))

-(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])
+(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))
@@ -14,11 +14,16 @@
   [rn/view {:style (style/left-half theme)}]
   [rn/view {:style (style/right-half theme)}]])

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

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

-(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)}]))
+(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))
@@ -1,19 +1,16 @@
 (ns quo.components.common.separator.view
  (:require
    [quo.foundations.colors :as quo.colors]
-    [quo.theme]
    [react-native.core :as rn]))

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

-(defn unread-grey-dot
-  [theme]
+(def unread-grey-dot
  {:width            8
   :height           8
   :border-radius    4
   :background-color (colors/theme-colors
                      colors/neutral-40
-                      colors/neutral-60
-                      theme)})
+                      colors/neutral-60)})
@@ -1,12 +1,10 @@
 (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]
-  (let [theme (quo.theme/use-theme)]
-    [rn/view
-     (cond-> {:style (style/unread-grey-dot theme)}
-       accessibility-label (assoc :accessibility-label accessibility-label :accessible true))]))
+  [rn/view
+   (cond-> {:style style/unread-grey-dot}
+     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]
+    [quo.theme :as theme]
    [react-native.core :as rn]))

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

-(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}]]]))
+(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))
@@ -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)
+  (let [theme                  (quo.theme/use-theme-value)
        [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,34 +7,33 @@
    [react-native.core :as rn]))

 (defn- loading-card-view
-  [{: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)}]]]]))
+  [{: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)}]]]])

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

-(defn view
+(defn- internal-view
  [{:keys [loading?] :as props}]
  (if-not loading?
    [community-card-view props]
    [loading-card-view props]))
+
+(def view (quo.theme/with-theme internal-view))
@@ -1,71 +0,0 @@
-(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"))))
@@ -1,20 +0,0 @@
-(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})
@@ -1,76 +0,0 @@
-(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,94 +38,110 @@
     unread-messages?
     [unread-grey-dot :unviewed-messages-public])])

-(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)
+(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)
      [community-icon/community-icon
-       {:images images} 32]
+       {:images community-icon} 32]
      [rn/view
-       {:flex            1
-        :margin-left     12
-        :justify-content :center}
+       {:flex              1
+        :margin-horizontal 12}
       [text/text
-        {:accessibility-label :chat-name-text
+        {:weight              :semi-bold
+         :size                :paragraph-1
+         :accessibility-label :community-name-text
         :number-of-lines     1
         :ellipsize-mode      :tail
-         :weight              :semi-bold
-         :size                :paragraph-1
-         :style               (when muted
-                                {:color (colors/theme-colors
+         :style               {:color (when muted
+                                        (colors/theme-colors
                                         colors/neutral-40
                                         colors/neutral-60
-                                         theme)})}
-        name]]
+                                         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?}])]]]])

-      [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-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))
@@ -7,19 +7,20 @@
            [react-native.core :as rn]
            utils.money))

-(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)]]))
+(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))
@@ -6,7 +6,7 @@
    [quo.components.tags.permission-tag :as permission]
    [quo.components.tags.tag :as tag]
    [quo.foundations.colors :as colors]
-    [quo.theme]
+    [quo.theme :as theme]
    [react-native.core :as rn]
    [react-native.gesture :as gesture]))

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

-(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}]))
+(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))
@@ -102,7 +102,7 @@
   :right    8})

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

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

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

-(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?])]))
+(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))
@@ -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 theme]
+  [props]
  (merge {:align-self       :flex-start
          :flex-direcrion   :row
          :justify-content  :center
          :border-radius    999
-          :background-color (get-background-color props theme)}
-         (get-container-border-styles props theme)
+          :background-color (get-background-color props)}
+         (get-container-border-styles props)
         (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 theme]
-  {:color (get-text-color props theme)})
+  [props]
+  {:color (get-text-color props)})
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Yevheniia Berdnyk	32542baa24	e2e: community names update	2024-04-15 05:53:07 +03:00
Andrea Maria Piana	de56aed530	Replace creation on communities client side https://github.com/status-im/status-go/compare/b744ff43...b710fa3e	2024-04-11 17:23:11 +01:00