fix keyword renaming performance (#17291 )

update status-go to v0.166.9+hotfix.1
Bump release to 1.25.0
2023-09-15 12:03:54 +01:00 · 2023-09-13 12:19:44 +01:00 · 2023-09-11 14:19:05 +01:00
488 changed files with 5155 additions and 8178 deletions
@@ -136,6 +136,11 @@ quo.animated/re-timing
 quo.design-system.colors/white
 quo.design-system.colors/black
 status-im.transport.core-test/messages
+status-im.ethereum.core/sidechain?
+status-im.ethereum.core/network-with-upstream-rpc?
+status-im.ethereum.core/current-address
+status-im.ethereum.core/network->network-name
+status-im.ethereum.core/estimate-gas
 quo.core/animated-header
 quo.core/safe-area-provider
 quo.core/safe-area-consumer
@@ -191,6 +196,10 @@ status-im.desktop.core/init
 status-im.chat.models-test/test-db
 quo.design-system.spacing/padding-vertical
 status-im.utils.money/percent-change
+status-im.utils.platform/isMacOs?
+status-im.utils.platform/isNix?
+status-im.utils.platform/isWin?
+status-im.utils.platform/android-version>=
 utils.debounce/clear-all
 status-im.transport.db/create-chat
 status-im.utils.priority-map/priority-map
@@ -9,49 +9,22 @@
                status-im.utils.styles/defn    clojure.core/defn
                test-helpers.unit/deftest-sub  clojure.core/defn
                taoensso.tufte/defnp           clojure.core/defn}
- :linters      {:clj-kondo-config              {:level :error}
-                :cond-else                     {:level :error}
-                :consistent-alias              {:level   :error
-                                                :aliases {clojure.string  string
-                                                          clojure.set     set
-                                                          clojure.walk    walk
-                                                          taoensso.timbre log}}
-                :docstring-blank               {:level :error}
-                :inline-def                    {:level :error}
-                :invalid-arity                 {:skip-args [status-im.utils.fx/defn utils.re-frame/defn]}
-                :loop-without-recur            {:level :error}
-                :misplaced-docstring           {:level :error}
-                :missing-body-in-when          {:level :error}
-                :missing-clause-in-try         {:level :error}
-                :missing-else-branch           {:level :error}
-                :not-empty?                    {:level :error}
-                :quoted-case-test-constant     {:level :error}
-                :redundant-do                  {:level :error}
-                :redundant-let                 {:level :error}
-                :refer-all                     {:level :error}
-                :shadowed-var                  {:level   :error
-                                                ;; We temporarily use :include to define an
-                                                ;; allowlist of core Clojure vars. In the
-                                                ;; future, as we progressively fix shadowed
-                                                ;; vars, we should be able to delete this
-                                                ;; option and lint all vars.
-                                                :exclude [type name]}
-                :single-operand-comparison     {:level :error}
-                :syntax                        {:level :error}
-                :unbound-destructuring-default {:level :error}
-                :unknown-require-option        {:level :error}
-                :unreachable-code              {:level :error}
-                :unresolved-namespace          {:level :error}
+ :linters      {:consistent-alias  {:level   :error
+                                    :aliases {clojure.string  string
+                                              clojure.set     set
+                                              clojure.walk    walk
+                                              taoensso.timbre log}}
+                :shadowed-var      {:level   :error
+                                    ;; We temporarily use :include to define an
+                                    ;; allowlist of core Clojure vars. In the
+                                    ;; future, as we progressively fix shadowed
+                                    ;; vars, we should be able to delete this
+                                    ;; option and lint all vars.
+                                    :exclude [type name]}
+                :invalid-arity     {:skip-args [status-im.utils.fx/defn utils.re-frame/defn]}
                ;; TODO remove number when this is fixed
                ;; https://github.com/borkdude/clj-kondo/issues/867
-                :unresolved-symbol             {:exclude [PersistentPriorityMap.EMPTY
-                                                          number
-                                                          status-im.test-helpers/restore-app-db]}
-                :unresolved-var                {:level :error}
-                :unused-binding                {:level :error}
-                :unused-import                 {:level :error}
-                :unused-namespace              {:level :error}
-                :unused-private-var            {:level :error}
-                :unused-referred-var           {:level :error}
-                :use                           {:level :error}}
+                :unresolved-symbol {:exclude [PersistentPriorityMap.EMPTY
+                                              number
+                                              status-im.test-helpers/restore-app-db]}}
 :config-in-ns {mocks.js-dependencies {:linters {:clojure-lsp/unused-public-var {:level :off}}}}}
@@ -32,4 +32,3 @@ TWO_MINUTES_SYNCING=1
 SWAP_ENABLED=1
 STICKERS_TEST_ENABLED=1
 LOCAL_PAIRING_ENABLED=1
-TEST_STATEOFUS=1
@@ -63,10 +63,4 @@ Documentation change PR (review please): https://github.com/status-im/status.im/

 <!-- (PRs will only be accepted if squashed into single commit.) -->

-### Before and after screenshots comparison
-
-| Figma (if available) | iOS (if available)    | Android (if available)
-| --- | --- | --- |
-| Please embed Image/Video here of the before and after.  | Please embed Image/Video here of the before and after.  | Please embed Image/Video here of the before and after. |
-
 status: ready <!-- Can be ready or wip -->
@@ -311,7 +311,6 @@ endef
 lint: export TARGET := clojure
 lint: ##@test Run code style checks
 	@sh scripts/lint-re-frame-in-quo-components.sh && \
-	sh scripts/lint-old-quo-usage.sh \
 	clj-kondo --config .clj-kondo/config.edn --cache false --fail-level error --lint src && \
 	ALL_CLOJURE_FILES=$(call find_all_clojure_files) && \
 	zprint '{:search-config? true}' -sfc $$ALL_CLOJURE_FILES && \
@@ -361,7 +360,6 @@ component-test-watch: export TARGET := clojure
 component-test-watch: export COMPONENT_TEST := true
 component-test-watch: export BABEL_ENV := test
 component-test-watch: ##@ Watch tests and re-run no changes to cljs files
-	rm -rf ./component-spec
 	yarn install
 	nodemon --exec 'yarn shadow-cljs compile component-test && jest --config=test/jest/jest.config.js' -e cljs

@@ -369,7 +367,6 @@ component-test: export TARGET := clojure
 component-test: export COMPONENT_TEST := true
 component-test: export BABEL_ENV := test
 component-test: ##@test Run component tests once in NodeJS
-	rm -rf ./component-spec
 	yarn install
 	yarn shadow-cljs compile component-test && \
 	jest --config=test/jest/jest.config.js
@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.15'
+library 'status-jenkins-lib@v1.7.14'

 /* Options section can't access functions in objects. */
 def isPRBuild = utils.isPRBuild()
@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.15'
+library 'status-jenkins-lib@v1.7.14'

 pipeline {
  agent { label 'linux' }
@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.15'
+library 'status-jenkins-lib@v1.7.14'

 pipeline {
  agent { label 'linux' }
@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.15'
+library 'status-jenkins-lib@set_ios_status_go_targets'

 /* Options section can't access functions in objects. */
 def isPRBuild = utils.isPRBuild()
@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.15'
+library 'status-jenkins-lib@v1.7.14'

 /* Options section can't access functions in objects. */
 def isPRBuild = utils.isPRBuild()
@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.15'
+library 'status-jenkins-lib@v1.7.14'

 pipeline {

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.15'
+library 'status-jenkins-lib@v1.7.14'

 pipeline {

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.15'
+library 'status-jenkins-lib@v1.7.14'

 pipeline {

@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.15'
+library 'status-jenkins-lib@v1.7.14'

 pipeline {
  agent { label 'macos' }
@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.15'
+library 'status-jenkins-lib@v1.7.14'

 pipeline {
  agent { label params.AGENT_LABEL }
@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.15'
+library 'status-jenkins-lib@v1.7.14'

 pipeline {
  agent { label 'linux' }
@@ -1,5 +1,5 @@
 #!/usr/bin/env groovy
-library 'status-jenkins-lib@v1.7.15'
+library 'status-jenkins-lib@v1.7.14'

 pipeline {
  agent {
@@ -35,11 +35,6 @@
 [Component tests (jest) overview](component-tests-overview.md)


-## Project details
-
-[status-go introduction (recorded meeting)](https://drive.google.com/file/d/1B7TljmTZ8fHkqJH8ChU1Cp4FGDFM03gq/view)
-
-[re-frame usage (recorded meeting)](https://drive.google.com/file/d/1qv_E0CEGzQpu_zGXD0gCTU5EvhC2k8Jy/view)

 ## Misc

@@ -1,40 +0,0 @@
-# How to catch crash on ios use xcode
-
-## Overview
-Sometimes, we can't reproduce crash with local dev build, probably because your built version differs from the one QA team used. 
-The QA team mostly used the PR build version. In this guide we will try to make a build as close as possible to the PR build for iOS.
-
-You may notice various configuration files starting with .env (such as .env, .env.e2e, .env.jenkins) in the project. 
-The usage of these files and environment variables injected at build time on CI will not be covered in this guide.
-
-This guide covers how to configure Xcode to capture a crash stack trace with a physical iOS device. This allows debugging crashes by inspecting the stack trace.
-I will use [issue #17255](https://github.com/status-im/status-mobile/issues/17255) as an example to reproduce and analyze a crash.
-
-## Prerequisites
- A physical ios device (simulator is not considered in this doc)
- Xcode installed
-               
-## Steps
-1. Prepare Status Mobile
-   1. Open Terminal, cd to project root
-   2. Run `make run-clojure` in one tab
-   3. Run `make run-metro` in a second tab
-   4. Run `make pod-install` in a third tab
-2. Configure Xcode Project
-   1. Open Xcode
-   2. Open a project or file, navigate to folder `path_to_root_directory_of_status_mobile/ios` 
-   3. Set Scheme `StatusImPR` as current scheme ![](images/how-to-catch-crash-on-ios/choose-scheme-StatusImPR.png)
-   4. Edit scheme ![](images/how-to-catch-crash-on-ios/edit-scheme.png)
-   5. Change `Info` ![](images/how-to-catch-crash-on-ios/config-release.png)
-   6. Change `Diagnostics` ![](images/how-to-catch-crash-on-ios/change-diagnostics.png)
-   7. Set automatically manage signing ![](images/how-to-catch-crash-on-ios/automatically-manage-signing.png)
-3. Update Code
-   1. Edit `src/status_im2/setup/dev.cljs`, comment out lines 47-52 ![](images/how-to-catch-crash-on-ios/edit-dev.png)
-   2. Edit `shadow-cljs.edn`, comment out `re-frisk-remote.preload`, otherwise it will try to connect `localhost:4567` on physical device which could slow down performance ![](images/how-to-catch-crash-on-ios/edit-shadow-cljs.png)
-4. Reproduce Crash And Analyze
-   1. Choose your physical ios device as target device and Run 
-   2. Follow reproduce steps from [issue #17255](https://github.com/status-im/status-mobile/issues/17255) mentioned and xcode will halt at crash point ![](images/how-to-catch-crash-on-ios/located-stack-trace.png)
-   3. Inspect stack trace to identify root cause. From the stack trace, we can locate the crash happened in `api/geth_backend.go:1048`(createTempDBFile) clearly! ![](images/how-to-catch-crash-on-ios/located-go-code.png)
-
-## Links
- [changes](https://github.com/status-im/status-mobile/commit/4306d419de15e737e8ded3a749cc5e8d6a06e627) to source code
@@ -62,10 +62,6 @@ abstract_target 'Status' do
    installer.pods_project.targets.each do |target|
      target.build_configurations.each do |config|
        config.build_settings['ONLY_ACTIVE_ARCH'] = 'NO'
-        # fix for no template named 'unary_function' in namespace 'std'; did you mean '__unary_function'?
-        # ref : https://github.com/facebook/react-native/issues/37748
-        # TODO : remove after upgrading to react-native 0.72.x
-        config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= ['$(inherited)', '_LIBCPP_ENABLE_CXX17_REMOVED_UNARY_BINARY_FUNCTION']
      end
    end
  end
@@ -707,7 +707,7 @@ SPEC CHECKSUMS:
  FBLazyVector: a8af91c2b5a0029d12ff6b32e428863d63c48991
  FBReactNativeSpec: 1b2309b096448a1dc9d0c43999216f8fda809ae8
  fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 166d178815c300e8126de9a7900101814eb16253
+  glog: d93527a855523adb8c113837db4be68fb00e230d
  HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
  Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8
  libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef
@@ -772,7 +772,7 @@ SPEC CHECKSUMS:
  RNLanguages: 962e562af0d34ab1958d89bcfdb64fafc37c513e
  RNPermissions: ad71dd4f767ec254f2cd57592fbee02afee75467
  RNReactNativeHapticFeedback: 2566b468cc8d0e7bb2f84b23adc0f4614594d071
-  RNReanimated: 43adb0307a62c1ce9694f36f124ca3b51a15272a
+  RNReanimated: d0db0ee059c33381bca787a2193c27e52750ccaf
  RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
  RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8
  RNSVG: 80584470ff1ffc7994923ea135a3e5ad825546b9
@@ -785,6 +785,6 @@ SPEC CHECKSUMS:
  TouchID: ba4c656d849cceabc2e4eef722dea5e55959ecf4
  Yoga: d24d6184b6b85f742536bd93bd07d69d7b9bb4c1

-PODFILE CHECKSUM: ac30a0172ff0126b6f307c20f34c47ce0ebf278f
+PODFILE CHECKSUM: 1b60eee24bff3a6287f8b33e57657289b2966342

 COCOAPODS: 1.12.0
@@ -8,7 +8,6 @@

 /* Begin PBXBuildFile section */
 		00E356F31AD99517003FC87E /* StatusImTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* StatusImTests.m */; };
-		04515E9DF839CBF55C690E79 /* libPods-Status-StatusImPR.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5006FF03675A7E50320B4002 /* libPods-Status-StatusImPR.a */; };
 		13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
 		25DC9C9DC25846BD8D084888 /* libc++.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = 8B9A886A2CB448B1ABA0EB62 /* libc++.tbd */; };
@@ -44,11 +43,12 @@
 		715D8132290BE850006F5C88 /* UbuntuMono-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 715D8131290BE850006F5C88 /* UbuntuMono-Regular.ttf */; };
 		715D8133290BE850006F5C88 /* UbuntuMono-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 715D8131290BE850006F5C88 /* UbuntuMono-Regular.ttf */; };
 		74B758FC20D7C00B003343C3 /* launch-image-universal.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 74B758FB20D7C00B003343C3 /* launch-image-universal.storyboard */; };
-		81F3191BB1D4BDF3442402BD /* libPods-Status-StatusIm.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 0F8E9088BDE117AB71366407 /* libPods-Status-StatusIm.a */; };
 		8391E8E0E93C41A98AAA6631 /* Inter-SemiBoldItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = A4F2BBE8D4DD4140A6CCAC39 /* Inter-SemiBoldItalic.otf */; };
+		B0E570AEBE2BEB426BF60259 /* libPods-Status-StatusImPR.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 4D059F2E62D7CD9FB1896703 /* libPods-Status-StatusImPR.a */; };
 		B24FC7FD1DE7195700D694FF /* Social.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = B24FC7FC1DE7195700D694FF /* Social.framework */; };
 		B24FC7FF1DE7195F00D694FF /* MessageUI.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = B24FC7FE1DE7195F00D694FF /* MessageUI.framework */; };
 		B2F2D1BC1D9D531B00B7B453 /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = B2F2D1BB1D9D531B00B7B453 /* Images.xcassets */; };
+		B73930D752A70EAB45001773 /* libPods-Status-StatusIm.a in Frameworks */ = {isa = PBXBuildFile; fileRef = FBEDE2F94002488EF6B277DA /* libPods-Status-StatusIm.a */; };
 		BA68A2377A20496EA737000D /* libz.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = 4E586E1B0E544F64AA9F5BD1 /* libz.tbd */; };
 		C14C5F8D29C0A149005C58A7 /* launch-icon@3x.png in Resources */ = {isa = PBXBuildFile; fileRef = C14C5F8C29C0A149005C58A7 /* launch-icon@3x.png */; };
 		C14C5F9129C0AD9C005C58A7 /* launch-icon@2x.png in Resources */ = {isa = PBXBuildFile; fileRef = C14C5F9029C0AD9C005C58A7 /* launch-icon@2x.png */; };
@@ -57,10 +57,10 @@
 		C1715FFB29C0BCE50088FA8B /* launch-icon@3x.png in Resources */ = {isa = PBXBuildFile; fileRef = C14C5F8C29C0A149005C58A7 /* launch-icon@3x.png */; };
 		C1715FFC29C0BCE80088FA8B /* launch-icon.png in Resources */ = {isa = PBXBuildFile; fileRef = C14C5F9229C0ADB5005C58A7 /* launch-icon.png */; };
 		CE4E31B31D8695250033ED64 /* Statusgo.xcframework in Frameworks */ = {isa = PBXBuildFile; fileRef = CE4E31B21D8695250033ED64 /* Statusgo.xcframework */; };
-		D156FF2CCF43C136F7BF8AE5 /* libPods-Status-StatusIm-StatusImTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = D3EFEEB5FC1235562D5D3BF1 /* libPods-Status-StatusIm-StatusImTests.a */; };
 		D1786306E0184916B11F4C37 /* Inter-Medium.otf in Resources */ = {isa = PBXBuildFile; fileRef = B2A38FC3D3954DE7B2B171F8 /* Inter-Medium.otf */; };
 		D84616FB563A48EBB1678699 /* Inter-Bold.otf in Resources */ = {isa = PBXBuildFile; fileRef = CD4A2C27D6D5473184DC1F7E /* Inter-Bold.otf */; };
 		D99C50E5E18942A39C8DDF61 /* Inter-BoldItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = B321D25F4493470980039457 /* Inter-BoldItalic.otf */; };
+		F5EC958C8908294B8536B835 /* libPods-Status-StatusIm-StatusImTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 06FA6B17CC0A7FAFA9DA5364 /* libPods-Status-StatusIm-StatusImTests.a */; };
 /* End PBXBuildFile section */

 /* Begin PBXContainerItemProxy section */
@@ -108,23 +108,24 @@
 		00E356EE1AD99517003FC87E /* StatusImTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = StatusImTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		00E356F21AD99517003FC87E /* StatusImTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = StatusImTests.m; sourceTree = "<group>"; };
-		06AF19FA626AFFC91E66916B /* Pods-Status-StatusImPR.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusImPR.release.xcconfig"; path = "Target Support Files/Pods-Status-StatusImPR/Pods-Status-StatusImPR.release.xcconfig"; sourceTree = "<group>"; };
-		0F8E9088BDE117AB71366407 /* libPods-Status-StatusIm.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Status-StatusIm.a"; sourceTree = BUILT_PRODUCTS_DIR; };
+		06FA6B17CC0A7FAFA9DA5364 /* libPods-Status-StatusIm-StatusImTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Status-StatusIm-StatusImTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
+		08A713A336BFEE0924821EC9 /* Pods-Status-StatusIm.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm.release.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm/Pods-Status-StatusIm.release.xcconfig"; sourceTree = "<group>"; };
+		103861DFF36B6063BED2602B /* Pods-Status-StatusImPR.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusImPR.release.xcconfig"; path = "Target Support Files/Pods-Status-StatusImPR/Pods-Status-StatusImPR.release.xcconfig"; sourceTree = "<group>"; };
 		13B07F961A680F5B00A75B9A /* StatusIm.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = StatusIm.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = StatusIm/AppDelegate.h; sourceTree = "<group>"; };
 		13B07FB01A68108700A75B9A /* AppDelegate.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; name = AppDelegate.mm; path = StatusIm/AppDelegate.mm; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = StatusIm/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = StatusIm/main.m; sourceTree = "<group>"; };
 		1426DF592BA248FC81D955CB /* Inter-Regular.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Inter-Regular.otf"; path = "../resources/fonts/Inter-Regular.otf"; sourceTree = "<group>"; };
-		1CDF317A2E103217DF386083 /* Pods-Status-StatusIm.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm.release.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm/Pods-Status-StatusIm.release.xcconfig"; sourceTree = "<group>"; };
 		3A2626CE245C3F2200D5F94B /* Dummy.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Dummy.swift; sourceTree = "<group>"; };
 		3A6406FB24A3ADF90046ED37 /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		3A8F8EA924A4D31600BF206D /* GameKit.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = GameKit.framework; path = System/Library/Frameworks/GameKit.framework; sourceTree = SDKROOT; };
 		3AAD2ADC24A3A60E0075D594 /* Status PR.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "Status PR.app"; sourceTree = BUILT_PRODUCTS_DIR; };
 		3AB1C3AD245C043900098F67 /* StatusIm-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "StatusIm-Bridging-Header.h"; sourceTree = "<group>"; };
 		4C16DE0B1F89508700AA10DB /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
+		4D059F2E62D7CD9FB1896703 /* libPods-Status-StatusImPR.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Status-StatusImPR.a"; sourceTree = BUILT_PRODUCTS_DIR; };
+		4D7FC122A838AC3BFC46D82B /* Pods-Status-StatusImPR.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusImPR.debug.xcconfig"; path = "Target Support Files/Pods-Status-StatusImPR/Pods-Status-StatusImPR.debug.xcconfig"; sourceTree = "<group>"; };
 		4E586E1B0E544F64AA9F5BD1 /* libz.tbd */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = libz.tbd; path = usr/lib/libz.tbd; sourceTree = SDKROOT; };
-		5006FF03675A7E50320B4002 /* libPods-Status-StatusImPR.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Status-StatusImPR.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		65F693BD2578002500A45E76 /* CoreNFC.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = CoreNFC.framework; path = System/Library/Frameworks/CoreNFC.framework; sourceTree = SDKROOT; };
 		65F693BF2578003600A45E76 /* CoreNFC.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = CoreNFC.framework; path = Platforms/MacOSX.platform/Developer/SDKs/MacOSX11.0.sdk/System/iOSSupport/System/Library/Frameworks/CoreNFC.framework; sourceTree = DEVELOPER_DIR; };
 		65F6941725780A4E00A45E76 /* StatusImTests-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "StatusImTests-Bridging-Header.h"; sourceTree = "<group>"; };
@@ -132,13 +133,13 @@
 		693A62DB37BC4CD5A30E5C96 /* Inter-SemiBold.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Inter-SemiBold.otf"; path = "../resources/fonts/Inter-SemiBold.otf"; sourceTree = "<group>"; };
 		715D8131290BE850006F5C88 /* UbuntuMono-Regular.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "UbuntuMono-Regular.ttf"; path = "../resources/fonts/UbuntuMono-Regular.ttf"; sourceTree = "<group>"; };
 		74B758FB20D7C00B003343C3 /* launch-image-universal.storyboard */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; path = "launch-image-universal.storyboard"; sourceTree = "<group>"; };
+		84C3C20891247EC6BFF93B51 /* Pods-Status-StatusIm-StatusImTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm-StatusImTests.release.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests.release.xcconfig"; sourceTree = "<group>"; };
+		886398AFEF2B823AC8A4912C /* Pods-Status-StatusIm.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm.debug.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm/Pods-Status-StatusIm.debug.xcconfig"; sourceTree = "<group>"; };
 		8B9A886A2CB448B1ABA0EB62 /* libc++.tbd */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = "libc++.tbd"; path = "usr/lib/libc++.tbd"; sourceTree = SDKROOT; };
 		922C4CA61F4D5F8B0033C753 /* StatusIm.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; name = StatusIm.entitlements; path = StatusIm/StatusIm.entitlements; sourceTree = "<group>"; };
-		93347A9564A62A24509EFA9C /* Pods-Status-StatusIm-StatusImTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm-StatusImTests.release.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests.release.xcconfig"; sourceTree = "<group>"; };
 		9C76AF5A418D4D65A4CAD1D9 /* InterStatus-Regular.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "InterStatus-Regular.otf"; path = "../resources/fonts/InterStatus-Regular.otf"; sourceTree = "<group>"; };
 		9EC0135C1E06FB1900155B5C /* RCTWKWebView.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWKWebView.xcodeproj; path = "../node_modules/react-native-wkwebview-reborn/ios/RCTWKWebView.xcodeproj"; sourceTree = "<group>"; };
 		A4F2BBE8D4DD4140A6CCAC39 /* Inter-SemiBoldItalic.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Inter-SemiBoldItalic.otf"; path = "../resources/fonts/Inter-SemiBoldItalic.otf"; sourceTree = "<group>"; };
-		AA6DC18226EB1EFB2A8FE64D /* Pods-Status-StatusIm.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm.debug.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm/Pods-Status-StatusIm.debug.xcconfig"; sourceTree = "<group>"; };
 		B07176ACDAA1422E8F0A3D6B /* Inter-Italic.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Inter-Italic.otf"; path = "../resources/fonts/Inter-Italic.otf"; sourceTree = "<group>"; };
 		B24FC7FC1DE7195700D694FF /* Social.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = Social.framework; path = System/Library/Frameworks/Social.framework; sourceTree = SDKROOT; };
 		B24FC7FE1DE7195F00D694FF /* MessageUI.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = MessageUI.framework; path = System/Library/Frameworks/MessageUI.framework; sourceTree = SDKROOT; };
@@ -148,12 +149,11 @@
 		C14C5F8C29C0A149005C58A7 /* launch-icon@3x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; name = "launch-icon@3x.png"; path = "StatusIm/launch-icon@3x.png"; sourceTree = "<group>"; };
 		C14C5F9029C0AD9C005C58A7 /* launch-icon@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; name = "launch-icon@2x.png"; path = "StatusIm/launch-icon@2x.png"; sourceTree = "<group>"; };
 		C14C5F9229C0ADB5005C58A7 /* launch-icon.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; name = "launch-icon.png"; path = "StatusIm/launch-icon.png"; sourceTree = "<group>"; };
-		C618F2C2EF820C722B1E7624 /* Pods-Status-StatusImPR.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusImPR.debug.xcconfig"; path = "Target Support Files/Pods-Status-StatusImPR/Pods-Status-StatusImPR.debug.xcconfig"; sourceTree = "<group>"; };
 		C6B1215047604CD59A4C74D6 /* Inter-MediumItalic.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Inter-MediumItalic.otf"; path = "../resources/fonts/Inter-MediumItalic.otf"; sourceTree = "<group>"; };
 		CD4A2C27D6D5473184DC1F7E /* Inter-Bold.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Inter-Bold.otf"; path = "../resources/fonts/Inter-Bold.otf"; sourceTree = "<group>"; };
 		CE4E31B21D8695250033ED64 /* Statusgo.xcframework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.xcframework; name = Statusgo.xcframework; path = "../modules/react-native-status/ios/RCTStatus/Statusgo.xcframework"; sourceTree = "<group>"; };
-		D3EFEEB5FC1235562D5D3BF1 /* libPods-Status-StatusIm-StatusImTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Status-StatusIm-StatusImTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
-		DAE7378308FEB005CE0A6E42 /* Pods-Status-StatusIm-StatusImTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm-StatusImTests.debug.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests.debug.xcconfig"; sourceTree = "<group>"; };
+		EBFEABB7D6CC1144D83FBA82 /* Pods-Status-StatusIm-StatusImTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm-StatusImTests.debug.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests.debug.xcconfig"; sourceTree = "<group>"; };
+		FBEDE2F94002488EF6B277DA /* libPods-Status-StatusIm.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Status-StatusIm.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 /* End PBXFileReference section */

 /* Begin PBXFrameworksBuildPhase section */
@@ -161,7 +161,7 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				D156FF2CCF43C136F7BF8AE5 /* libPods-Status-StatusIm-StatusImTests.a in Frameworks */,
+				F5EC958C8908294B8536B835 /* libPods-Status-StatusIm-StatusImTests.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -174,7 +174,7 @@
 				CE4E31B31D8695250033ED64 /* Statusgo.xcframework in Frameworks */,
 				25DC9C9DC25846BD8D084888 /* libc++.tbd in Frameworks */,
 				BA68A2377A20496EA737000D /* libz.tbd in Frameworks */,
-				81F3191BB1D4BDF3442402BD /* libPods-Status-StatusIm.a in Frameworks */,
+				B73930D752A70EAB45001773 /* libPods-Status-StatusIm.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -188,7 +188,7 @@
 				3AAD2AC224A3A60E0075D594 /* Statusgo.xcframework in Frameworks */,
 				3AAD2AC524A3A60E0075D594 /* libc++.tbd in Frameworks */,
 				3AAD2AC624A3A60E0075D594 /* libz.tbd in Frameworks */,
-				04515E9DF839CBF55C690E79 /* libPods-Status-StatusImPR.a in Frameworks */,
+				B0E570AEBE2BEB426BF60259 /* libPods-Status-StatusImPR.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -314,9 +314,9 @@
 				CE4E31B21D8695250033ED64 /* Statusgo.xcframework */,
 				8B9A886A2CB448B1ABA0EB62 /* libc++.tbd */,
 				4E586E1B0E544F64AA9F5BD1 /* libz.tbd */,
-				0F8E9088BDE117AB71366407 /* libPods-Status-StatusIm.a */,
-				D3EFEEB5FC1235562D5D3BF1 /* libPods-Status-StatusIm-StatusImTests.a */,
-				5006FF03675A7E50320B4002 /* libPods-Status-StatusImPR.a */,
+				FBEDE2F94002488EF6B277DA /* libPods-Status-StatusIm.a */,
+				06FA6B17CC0A7FAFA9DA5364 /* libPods-Status-StatusIm-StatusImTests.a */,
+				4D059F2E62D7CD9FB1896703 /* libPods-Status-StatusImPR.a */,
 			);
 			name = Frameworks;
 			sourceTree = "<group>";
@@ -324,12 +324,12 @@
 		D0D5C8D06825D33BA2D2121E /* Pods */ = {
 			isa = PBXGroup;
 			children = (
-				AA6DC18226EB1EFB2A8FE64D /* Pods-Status-StatusIm.debug.xcconfig */,
-				1CDF317A2E103217DF386083 /* Pods-Status-StatusIm.release.xcconfig */,
-				DAE7378308FEB005CE0A6E42 /* Pods-Status-StatusIm-StatusImTests.debug.xcconfig */,
-				93347A9564A62A24509EFA9C /* Pods-Status-StatusIm-StatusImTests.release.xcconfig */,
-				C618F2C2EF820C722B1E7624 /* Pods-Status-StatusImPR.debug.xcconfig */,
-				06AF19FA626AFFC91E66916B /* Pods-Status-StatusImPR.release.xcconfig */,
+				886398AFEF2B823AC8A4912C /* Pods-Status-StatusIm.debug.xcconfig */,
+				08A713A336BFEE0924821EC9 /* Pods-Status-StatusIm.release.xcconfig */,
+				EBFEABB7D6CC1144D83FBA82 /* Pods-Status-StatusIm-StatusImTests.debug.xcconfig */,
+				84C3C20891247EC6BFF93B51 /* Pods-Status-StatusIm-StatusImTests.release.xcconfig */,
+				4D7FC122A838AC3BFC46D82B /* Pods-Status-StatusImPR.debug.xcconfig */,
+				103861DFF36B6063BED2602B /* Pods-Status-StatusImPR.release.xcconfig */,
 			);
 			path = Pods;
 			sourceTree = "<group>";
@@ -341,11 +341,11 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "StatusImTests" */;
 			buildPhases = (
-				A461E3110C485D2A21EB942C /* [CP] Check Pods Manifest.lock */,
+				F083BDB009D93F14ABE9577A /* [CP] Check Pods Manifest.lock */,
 				00E356EA1AD99517003FC87E /* Sources */,
 				00E356EB1AD99517003FC87E /* Frameworks */,
 				00E356EC1AD99517003FC87E /* Resources */,
-				2B2389E62F0A9702C522FD40 /* [CP] Copy Pods Resources */,
+				D2C750D3F094DB4514432955 /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -361,14 +361,14 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "StatusIm" */;
 			buildPhases = (
-				C5DA0344FCE555AD1908FBCD /* [CP] Check Pods Manifest.lock */,
+				29DFA8D4A1684BDC5257F30D /* [CP] Check Pods Manifest.lock */,
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 				20B6B6891D92C42700CC5C6A /* Embed Frameworks */,
 				E3914A731DF919ED00EBB515 /* Run Script */,
-				EC618D80223E4CE064CFF898 /* [CP] Copy Pods Resources */,
+				81ABD64BC3E76C9EEE7A6C62 /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -383,14 +383,14 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 3AAD2AD924A3A60E0075D594 /* Build configuration list for PBXNativeTarget "StatusImPR" */;
 			buildPhases = (
-				0196982A5A6EB89DC2106F9B /* [CP] Check Pods Manifest.lock */,
+				B75C010670287761677282A4 /* [CP] Check Pods Manifest.lock */,
 				3AAD2ABB24A3A60E0075D594 /* Sources */,
 				3AAD2ABF24A3A60E0075D594 /* Frameworks */,
 				3AAD2AC924A3A60E0075D594 /* Resources */,
 				3AAD2AD524A3A60E0075D594 /* Bundle React Native code and images */,
 				3AAD2AD624A3A60E0075D594 /* Embed Frameworks */,
 				3AAD2AD724A3A60E0075D594 /* Run Script */,
-				4DBAAF9A3117797361E216BA /* [CP] Copy Pods Resources */,
+				C7E5420D406F9FB4ACC8ECE8 /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -544,7 +544,7 @@
 			shellPath = "/usr/bin/env sh";
 			shellScript = "set -o errexit\nexport NODE_BINARY=\"${NODE_BINARY:-node}\"\nexport NODE_ARGS=\"${NODE_ARGS:- --max-old-space-size=16384 }\"\n\nbash -x ../node_modules/react-native/scripts/react-native-xcode.sh > ./logs/react-native-xcode.log 2>&1";
 		};
-		0196982A5A6EB89DC2106F9B /* [CP] Check Pods Manifest.lock */ = {
+		29DFA8D4A1684BDC5257F30D /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -559,35 +559,13 @@
 			outputFileListPaths = (
 			);
 			outputPaths = (
-				"$(DERIVED_FILE_DIR)/Pods-Status-StatusImPR-checkManifestLockResult.txt",
+				"$(DERIVED_FILE_DIR)/Pods-Status-StatusIm-checkManifestLockResult.txt",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
-		2B2389E62F0A9702C522FD40 /* [CP] Copy Pods Resources */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			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}/React-Core/AccessibilityResources.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}/AccessibilityResources.bundle",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests-resources.sh\"\n";
-			showEnvVarsInLog = 0;
-		};
 		3AAD2AD524A3A60E0075D594 /* Bundle React Native code and images */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -616,7 +594,51 @@
 			shellPath = "/usr/bin/env sh";
 			shellScript = "\"${PROJECT_DIR}/scripts/set_xcode_version.sh\" > ./logs/set_xcode_version.log 2>&1";
 		};
-		4DBAAF9A3117797361E216BA /* [CP] Copy Pods Resources */ = {
+		81ABD64BC3E76C9EEE7A6C62 /* [CP] Copy Pods Resources */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			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}/React-Core/AccessibilityResources.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}/AccessibilityResources.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Status-StatusIm/Pods-Status-StatusIm-resources.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
+		B75C010670287761677282A4 /* [CP] Check Pods Manifest.lock */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputFileListPaths = (
+			);
+			inputPaths = (
+				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
+				"${PODS_ROOT}/Manifest.lock",
+			);
+			name = "[CP] Check Pods Manifest.lock";
+			outputFileListPaths = (
+			);
+			outputPaths = (
+				"$(DERIVED_FILE_DIR)/Pods-Status-StatusImPR-checkManifestLockResult.txt",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
+			showEnvVarsInLog = 0;
+		};
+		C7E5420D406F9FB4ACC8ECE8 /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -638,7 +660,43 @@
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Status-StatusImPR/Pods-Status-StatusImPR-resources.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
-		A461E3110C485D2A21EB942C /* [CP] Check Pods Manifest.lock */ = {
+		D2C750D3F094DB4514432955 /* [CP] Copy Pods Resources */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			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}/React-Core/AccessibilityResources.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}/AccessibilityResources.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests-resources.sh\"\n";
+			showEnvVarsInLog = 0;
+		};
+		E3914A731DF919ED00EBB515 /* Run Script */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 8;
+			files = (
+			);
+			inputPaths = (
+			);
+			name = "Run Script";
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 1;
+			shellPath = "/usr/bin/env sh";
+			shellScript = "\"${PROJECT_DIR}/scripts/set_xcode_version.sh\" > ./logs/set_xcode_version.log 2>&1";
+		};
+		F083BDB009D93F14ABE9577A /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -660,64 +718,6 @@
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
-		C5DA0344FCE555AD1908FBCD /* [CP] Check Pods Manifest.lock */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputFileListPaths = (
-			);
-			inputPaths = (
-				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
-				"${PODS_ROOT}/Manifest.lock",
-			);
-			name = "[CP] Check Pods Manifest.lock";
-			outputFileListPaths = (
-			);
-			outputPaths = (
-				"$(DERIVED_FILE_DIR)/Pods-Status-StatusIm-checkManifestLockResult.txt",
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
-			showEnvVarsInLog = 0;
-		};
-		E3914A731DF919ED00EBB515 /* Run Script */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 8;
-			files = (
-			);
-			inputPaths = (
-			);
-			name = "Run Script";
-			outputPaths = (
-			);
-			runOnlyForDeploymentPostprocessing = 1;
-			shellPath = "/usr/bin/env sh";
-			shellScript = "\"${PROJECT_DIR}/scripts/set_xcode_version.sh\" > ./logs/set_xcode_version.log 2>&1";
-		};
-		EC618D80223E4CE064CFF898 /* [CP] Copy Pods Resources */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			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}/React-Core/AccessibilityResources.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}/AccessibilityResources.bundle",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Status-StatusIm/Pods-Status-StatusIm-resources.sh\"\n";
-			showEnvVarsInLog = 0;
-		};
 /* End PBXShellScriptBuildPhase section */

 /* Begin PBXSourcesBuildPhase section */
@@ -765,7 +765,7 @@
 /* Begin XCBuildConfiguration section */
 		00E356F61AD99517003FC87E /* Debug */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = DAE7378308FEB005CE0A6E42 /* Pods-Status-StatusIm-StatusImTests.debug.xcconfig */;
+			baseConfigurationReference = EBFEABB7D6CC1144D83FBA82 /* Pods-Status-StatusIm-StatusImTests.debug.xcconfig */;
 			buildSettings = {
 				ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
 				BUNDLE_ID_SUFFIX = .debug;
@@ -802,7 +802,7 @@
 		};
 		00E356F71AD99517003FC87E /* Release */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 93347A9564A62A24509EFA9C /* Pods-Status-StatusIm-StatusImTests.release.xcconfig */;
+			baseConfigurationReference = 84C3C20891247EC6BFF93B51 /* Pods-Status-StatusIm-StatusImTests.release.xcconfig */;
 			buildSettings = {
 				ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
 				BUNDLE_ID_SUFFIX = "";
@@ -835,7 +835,7 @@
 		};
 		13B07F941A680F5B00A75B9A /* Debug */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = AA6DC18226EB1EFB2A8FE64D /* Pods-Status-StatusIm.debug.xcconfig */;
+			baseConfigurationReference = 886398AFEF2B823AC8A4912C /* Pods-Status-StatusIm.debug.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = "AppIcon$(BUNDLE_ID_SUFFIX)";
 				BUNDLE_ID_SUFFIX = .debug;
@@ -915,7 +915,7 @@
 		};
 		13B07F951A680F5B00A75B9A /* Release */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 1CDF317A2E103217DF386083 /* Pods-Status-StatusIm.release.xcconfig */;
+			baseConfigurationReference = 08A713A336BFEE0924821EC9 /* Pods-Status-StatusIm.release.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = "AppIcon$(BUNDLE_ID_SUFFIX)";
 				BUNDLE_ID_SUFFIX = "";
@@ -988,7 +988,7 @@
 		};
 		3AAD2ADA24A3A60E0075D594 /* Debug */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = C618F2C2EF820C722B1E7624 /* Pods-Status-StatusImPR.debug.xcconfig */;
+			baseConfigurationReference = 4D7FC122A838AC3BFC46D82B /* Pods-Status-StatusImPR.debug.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = "AppIcon$(BUNDLE_ID_SUFFIX)";
 				BUNDLE_ID_SUFFIX = .debug;
@@ -1065,7 +1065,7 @@
 		};
 		3AAD2ADB24A3A60E0075D594 /* Release */ = {
 			isa = XCBuildConfiguration;
-			baseConfigurationReference = 06AF19FA626AFFC91E66916B /* Pods-Status-StatusImPR.release.xcconfig */;
+			baseConfigurationReference = 103861DFF36B6063BED2602B /* Pods-Status-StatusImPR.release.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = "AppIconPR$(BUNDLE_ID_SUFFIX)";
 				BUNDLE_ID_SUFFIX = "";
@@ -46,6 +46,7 @@
    "react-native-dialogs": "^1.0.4",
    "react-native-draggable-flatlist": "^4.0.1",
    "react-native-fast-image": "^8.5.11",
+    "react-native-fetch-polyfill": "^1.1.2",
    "react-native-fs": "^2.14.1",
    "react-native-gesture-handler": "2.6.1",
    "react-native-gifted-charts": "git+https://github.com/status-im/react-native-gifted-charts.git#refs/tags/1.3.2-status.1",
@@ -1,13 +0,0 @@
-#!/usr/bin/env sh
-
-set -euo pipefail
-
-QUO_USAGES=$(grep -r -E '\[quo\.[^ ]* :(?:as|refer)|\[quo\.[^ ]*\]' --include '*.cljs' --include '*.clj' './src/status_im2' --exclude='./src/status_im2/common/theme/core.cljs' || true)
-
-echo -e "\nChecking 'status_im2' namespace for 'quo' namespace usage."
-
-if [ -n "$QUO_USAGES" ]; then
-    echo -e "\033[0;31mERROR: Usage of the old 'quo' namespace detected in 'status_im2' code. Please update to 'quo2'. \n"
-    echo -e "$QUO_USAGES \033[0m"
-    exit 1
-fi
@@ -121,14 +121,7 @@ export function screenGestureOnEnd(data) {
  return function (event) {
    'worklet';

-    const {
-      'screen-left': screenLeft,
-      'screen-state': screenState,
-      'screen-width': screenWidth,
-      'left-velocity': leftVelocity,
-      'right-velocity': rightVelocity,
-      'screen-closed-callback': screenClosedCallback,
-    } = data;
+    const { screenLeft, screenState, screenWidth, leftVelocity, rightVelocity, screenClosedCallback } = data;
    const absoluteX = event.absoluteX ?? 0;
    const velocityX = event.velocityX ?? 0;
    const closeScreen = velocityX > rightVelocity || (velocityX > leftVelocity && absoluteX >= screenWidth / 2);
@@ -420,8 +420,6 @@
    "react-native-transparent-video"                 react-native-transparent-video
    "react-native-orientation-locker"                react-native-orientation-locker
    "react-native-gifted-charts"                     react-native-gifted-charts
-    "../resources/data/emojis/en.json"               (js/JSON.parse (slurp
-                                                                     "./resources/data/emojis/en.json"))
    "../src/js/worklets/core.js"                     worklet-factory
    "../src/js/worklets/shell/bottom_tabs.js"        #js {}
    "../src/js/worklets/shell/home_stack.js"         #js {}
@@ -470,8 +470,7 @@
 (defn sha3
  [s]
  (log/debug "[native-module] sha3")
-  (when s
-    (.sha3 ^js (status) (str s))))
+  (.sha3 ^js (status) s))

 (defn utf8-to-hex
  [s]
@@ -492,9 +491,8 @@
 (defn address?
  [address]
  (log/debug "[native-module] address?")
-  (when address
-    (let [result (.isAddress ^js (status) address)]
-      (types/json->clj result))))
+  (let [result (.isAddress ^js (status) address)]
+    (types/json->clj result)))

 (defn to-checksum-address
  [address]
@@ -69,35 +69,6 @@ In the image above we can see the properties are `Type`, `State`, `Size`,
  ...)
 ```

-### Handling Sizes
-In the designs, sizes are referred to as integers. To avoid having the codebase littered with magic numbers we instead have a keyword convention to use in components to map these keywords with their sizes.
-
-The convention is `:size-<number>`, e.g size `20` is `:size-20`
-
-```clojure
-;; bad
-(defn button
-  [{:keys [size]}]
-  [rn/view
-   {:style {:height (case size
-                      20 20
-                      40 40
-                      0)}}]
-  ...)
-```
-
-```clojure
-;; good
-(defn button
-  [{:keys [size]}]
-  [rn/view
-   {:style {:height (case size
-                      :size-20 20
-                      :size-40 40
-                      0)}}]
-  ...)
-```
-
 ## Clojure var conventions

 - Due to the fact that every `view` namespace should export only one component
@@ -12,19 +12,18 @@
   :height   view-height})

 (defn button-container
-  [{:keys [left right theme]}]
+  [position]
  (merge
   {:width            32
    :height           32
    :border-radius    10
    :justify-content  :center
    :align-items      :center
-    :background-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40 theme)
+    :background-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)
    :position         :absolute
    :top              56
-    :z-index          3
-    :left             left
-    :right            right}))
+    :z-index          3}
+   position))

 (defn blur-view
  [animation]
@@ -39,7 +38,7 @@
    :overflow :hidden}))

 (defn entity-picture
-  [animation theme]
+  [animation]
  (reanimated/apply-animations-to-style
   {:width  animation
    :height animation}
@@ -50,11 +49,11 @@
    :left             20
    :justify-content  :center
    :align-items      :center
-    :background-color (colors/theme-colors colors/white colors/neutral-100 theme)
+    :background-color (colors/theme-colors colors/white colors/neutral-100)
    :overflow         :hidden}))

 (defn header-bottom-part
-  [animation theme]
+  [animation]
  (reanimated/apply-animations-to-style
   {:border-top-right-radius animation
    :border-top-left-radius  animation}
@@ -63,7 +62,7 @@
    :height           86
    :left             0
    :right            0
-    :background-color (colors/theme-colors colors/white colors/neutral-100 theme)}))
+    :background-color (colors/theme-colors colors/white colors/neutral-100)}))

 (defn header-comp
  [y-animation opacity-animation]
@@ -9,8 +9,7 @@
    [reagent.core :as reagent]
    [quo2.foundations.colors :as colors]
    [quo2.components.animated-header-flatlist.style :as style]
-    [oops.core :as oops]
-    [quo2.theme :as quo.theme]))
+    [oops.core :as oops]))

 (def header-height 234)
 (def cover-height 192)
@@ -31,7 +30,7 @@
    (reanimated/set-shared-value scroll-y current-y)))

 (defn header
-  [{:keys [theme-color f-display-picture-comp cover-uri title-comp theme]} top-inset scroll-y]
+  [{:keys [theme-color f-display-picture-comp cover-uri title-comp]} top-inset scroll-y]
  (let [input-range        [0 (* threshold 0.33)]
        picture-scale-down 0.4
        size-animation     (interpolate scroll-y input-range [80 (* 80 picture-scale-down)])
@@ -39,23 +38,21 @@
        border-animation   (interpolate scroll-y input-range [12 0])]
    [rn/view
     {:style {:height           header-height
-              :background-color (or theme-color
-                                    (colors/theme-colors colors/white colors/neutral-95 theme))
+              :background-color (or theme-color (colors/theme-colors colors/white colors/neutral-95))
              :margin-top       (when platform/ios? (- top-inset))}}
     (when cover-uri
       [fast-image/fast-image
        {:style  {:width  "100%"
                  :height cover-height}
         :source {:uri cover-uri}}])
-     [reanimated/view {:style (style/header-bottom-part border-animation theme)}
+     [reanimated/view {:style (style/header-bottom-part border-animation)}
      [title-comp]]
-     [reanimated/view {:style (style/entity-picture size-animation theme)}
+     [reanimated/view {:style (style/entity-picture size-animation)}
      [:f> f-display-picture-comp image-animation]]]))

 (defn- f-animated-header-list
  [{:keys [header-comp main-comp back-button-on-press] :as params}]
-  (let [theme                   (quo.theme/use-theme-value)
-        window-height           (:height (rn/get-window))
+  (let [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 Android:
        view-height             (if platform/ios?
@@ -72,12 +69,12 @@
     [rn/touchable-opacity
      {:active-opacity 1
       :on-press       back-button-on-press
-       :style          (style/button-container {:left 20 :theme theme})}
-      [quo/icon :i/arrow-left {:size 20 :color (colors/theme-colors colors/black colors/white theme)}]]
+       :style          (style/button-container {:left 20})}
+      [quo/icon :i/arrow-left {:size 20 :color (colors/theme-colors colors/black colors/white)}]]
     [rn/touchable-opacity
      {:active-opacity 1
-       :style          (style/button-container {:right 20 :theme theme})}
-      [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white theme)}]]
+       :style          (style/button-container {:right 20})}
+      [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]]
     [reanimated/blur-view
      {:blurAmount   32
       :blurType     :light
@@ -89,7 +86,7 @@
      {:data                  [nil]
       :render-fn             main-comp
       :key-fn                str
-       :header                (reagent/as-element (header (assoc params :theme theme) top scroll-y))
+       :header                (reagent/as-element (header params top scroll-y))
       ;; TODO: https://github.com/status-im/status-mobile/issues/14924
       :scroll-event-throttle 8
       :on-scroll             (fn [event] (scroll-handler event initial-y scroll-y))}]]))
@@ -6,20 +6,16 @@
 (def default-padding 16)
 (def default-emoji-size 36)

-(def ^:private container-size
-  {:size-64 64})
-
 (defn get-border-radius
  [size]
  (case size
-    80       16
-    :size-64 16
-    48       12
-    32       10
-    28       8
-    24       8
-    20       6
-    16       4
+    80 16
+    48 12
+    32 10
+    28 8
+    24 8
+    20 6
+    16 4
    default-border-radius))

 (defn get-padding
@@ -37,32 +33,29 @@
 (defn get-emoji-size
  [size]
  (case size
-    80       36
-    :size-64 30
-    48       24
-    32       15
-    28       12
-    24       11
-    20       11
-    16       11
+    80 36
+    48 24
+    32 15
+    28 12
+    24 11
+    20 11
+    16 11
    default-emoji-size))

 (defn get-border-width
  [size]
-  (if (= size 16)
-    0.8 ;; 0.8 px is for only size 16
-    1)) ;; Rest of the size will have 1 px
-
+  (case size
+    16 0.8 ;; 0.8 px is for only size 16
+    ;; Rest of the size will have 1 px
+    1))

 (defn root-container
  [{:keys [type size theme customization-color]
    :or   {size                default-size
           customization-color :blue}}]
-  (let [watch-only? (= type :watch-only)
-        width       (cond-> size
-                      (keyword? size) (container-size size))]
-    (cond-> {:width            width
-             :height           width
+  (let [watch-only? (= type :watch-only)]
+    (cond-> {:width            size
+             :height           size
             :background-color (colors/custom-color-by-theme customization-color 50 60 nil nil theme)
             :border-radius    (get-border-radius size)
             :border-color     (if (= theme :light) colors/neutral-80-opa-5 colors/white-opa-5)
@@ -11,7 +11,7 @@

  (h/test "with emoji, no lock set, large size"
    (let [emoji "🍓"]
-      (h/render [component/view {:emoji emoji :size :size-32}])
+      (h/render [component/view {:emoji emoji :size :size/l}])
      (h/is-null (h/query-by-label-text :initials))
      (h/is-truthy (h/query-by-text emoji))
      (h/is-null (h/query-by-label-text :lock))))
@@ -31,5 +31,5 @@
  (h/test "no emoji, large size"
    (h/render [component/view
               {:full-name "Status Mobile"
-                :size      :size-32}])
+                :size      :size/l}])
    (h/is-truthy (h/query-by-text "SM"))))
@@ -5,27 +5,17 @@

 (defn outer-container
  [{:keys [size color]}]
-  (let [container-size (case size
-                         :size-64 64
-                         :size-32 32
-                         24)]
-    {:width            container-size
-     :height           container-size
-     :border-radius    container-size
+  (let [size (if (= size :size/l) 32 24)]
+    {:width            size
+     :height           size
+     :border-radius    size
     :justify-content  :center
     :align-items      :center
     :background-color (colors/theme-alpha color 0.1 0.1)}))

-(defn emoji-size
-  [size]
-  {:font-size (case size
-                :size-64 24
-                :size-32 15
-                11)})
-
 (defn lock-container
  [size]
-  (let [distance (if (= size :size-32) 20 12)]
+  (let [distance (if (= size :size/l) 20 12)]
    {:position         :absolute
     :left             distance
     :top              distance
@@ -5,19 +5,17 @@
            [quo2.components.markdown.text :as text]
            [quo2.foundations.colors :as colors]
            [react-native.core :as rn]
-            [utils.string]))
+            utils.string))

 (defn- initials
  [full-name size color]
-  (let [amount-initials (if (#{:size-32 :size-64} size) 2 1)
+  (let [amount-initials (if (= size :size/l) 2 1)
        channel-name    (string/replace full-name "#" "")]
    [text/text
-     (cond-> {:accessibility-label :initials
-              :style               {:color color}
-              :size                :paragraph-2
-              :weight              :semi-bold}
-       (= size :size-64) (assoc :size   :heading-1
-                                :weight :medium))
+     {:accessibility-label :initials
+      :size                :paragraph-2
+      :weight              :semi-bold
+      :style               {:color color}}
     (utils.string/get-initials channel-name amount-initials)]))

 (defn- lock
@@ -56,8 +54,8 @@
    :style               (style/outer-container {:size size :color customization-color})}
   (if (string/blank? emoji)
     [initials full-name size customization-color]
-     [rn/text
-      {:style               (style/emoji-size size)
-       :accessibility-label :emoji}
+     [text/text
+      {:accessibility-label :emoji
+       :size                (if (= size :size/l) :paragraph-1 :label)}
      (string/trim emoji)])
   [lock locked? size]])
@@ -7,31 +7,30 @@
            [quo2.components.avatars.group-avatar.style :as style]))

 (def sizes
-  {:size-20 {:icon      12
-             :container 20}
-   :size-28 {:icon      16
-             :container 28}
-   :size-32 {:icon      16
-             :container 32}
-   :size-48 {:icon      20
-             :container 48}
-   :size-80 {:icon      32
-             :container 80}})
+  {:size/s-20 {:icon      12
+               :container 20}
+   :size/s-28 {:icon      16
+               :container 28}
+   :size/s-32 {:icon      16
+               :container 32}
+   :size/s-48 {:icon      20
+               :container 48}
+   :size/s-80 {:icon      32
+               :container 80}})

 (defn- view-internal
  [_]
  (fn [{:keys [size theme customization-color picture icon-name]
-        :or   {size                :size-20
+        :or   {size                :size/s-20
               customization-color :blue
               picture             nil
               icon-name           :i/group}}]
    (let [container-size (get-in sizes [size :container])
          icon-size      (get-in sizes [size :icon])]
      [rn/view
-       {:accessibility-label :group-avatar
-        :style               (style/container {:container-size      container-size
-                                               :customization-color customization-color
-                                               :theme               theme})}
+       {:style (style/container {:container-size      container-size
+                                 :customization-color customization-color
+                                 :theme               theme})}
       (if picture
         [fast-image/fast-image
          {:source picture
@@ -5,19 +5,19 @@
            [react-native.core :as rn]))

 (def ^:private sizes
-  {:size-48 {:component 48
-             :icon      20}
-   :size-32 {:component 32
-             :icon      20}
-   :size-24 {:component 24
-             :icon      16}
-   :size-20 {:component 20
-             :icon      12}})
+  {:size/s-48 {:component 48
+               :icon      20}
+   :size/s-32 {:component 32
+               :icon      20}
+   :size/s-24 {:component 24
+               :icon      16}
+   :size/s-20 {:component 20
+               :icon      12}})

 (defn icon-avatar-internal
  [{:keys [size icon color opacity border? theme]
    :or   {opacity 20
-           size    :size-32}}]
+           size    :size/s-32}}]
  (let [{component-size :component icon-size :icon} (get sizes size)
        circle-color                                (colors/custom-color color 50 opacity)
        icon-color                                  (colors/custom-color-by-theme color 50 60)]
@@ -2,54 +2,48 @@
  (:require [quo2.foundations.colors :as colors]))

 (def sizes
-  {:big     {:dimensions                      80
-             :status-indicator                12
-             :status-indicator-border         4
-             :status-indicator-center-to-edge 12
-             :font-size                       :heading-1
-             :ring-width                      4}
-   :size-64 {:dimensions                      64
-             :status-indicator                8
-             :status-indicator-border         2
-             :status-indicator-center-to-edge 6
-             :font-size                       :heading-1
-             :ring-width                      2}
-   :medium  {:dimensions                      48
-             :status-indicator                8
-             :status-indicator-border         2
-             :status-indicator-center-to-edge 6
-             :font-size                       :heading-2
-             :ring-width                      2}
-   :small   {:dimensions                      32
-             :status-indicator                8
-             :status-indicator-border         2
-             :status-indicator-center-to-edge 4
-             :font-size                       :paragraph-2
-             :ring-width                      2}
-   28       {:dimensions                      28
-             :status-indicator                0
-             :status-indicator-border         0
-             :status-indicator-center-to-edge 0
-             :font-size                       :paragraph-2
-             :ring-width                      0}
-   :xs      {:dimensions                      24
-             :status-indicator                0
-             :status-indicator-border         0
-             :status-indicator-center-to-edge 0
-             :font-size                       :paragraph-2
-             :ring-width                      2}
-   :xxs     {:dimensions                      20
-             :status-indicator                0
-             :status-indicator-border         0
-             :status-indicator-center-to-edge 0
-             :font-size                       :label
-             :ring-width                      2}
-   :xxxs    {:dimensions                      16
-             :status-indicator                0
-             :status-indicator-border         0
-             :status-indicator-center-to-edge 0
-             :font-size                       :label
-             :ring-width                      2}})
+  {:big    {:dimensions                      80
+            :status-indicator                12
+            :status-indicator-border         4
+            :status-indicator-center-to-edge 12
+            :font-size                       :heading-1
+            :ring-width                      4}
+   :medium {:dimensions                      48
+            :status-indicator                8
+            :status-indicator-border         2
+            :status-indicator-center-to-edge 6
+            :font-size                       :heading-2
+            :ring-width                      2}
+   :small  {:dimensions                      32
+            :status-indicator                8
+            :status-indicator-border         2
+            :status-indicator-center-to-edge 4
+            :font-size                       :paragraph-2
+            :ring-width                      2}
+   28      {:dimensions                      28
+            :status-indicator                0
+            :status-indicator-border         0
+            :status-indicator-center-to-edge 0
+            :font-size                       :paragraph-2
+            :ring-width                      0}
+   :xs     {:dimensions                      24
+            :status-indicator                0
+            :status-indicator-border         0
+            :status-indicator-center-to-edge 0
+            :font-size                       :paragraph-2
+            :ring-width                      2}
+   :xxs    {:dimensions                      20
+            :status-indicator                0
+            :status-indicator-border         0
+            :status-indicator-center-to-edge 0
+            :font-size                       :label
+            :ring-width                      2}
+   :xxxs   {:dimensions                      16
+            :status-indicator                0
+            :status-indicator-border         0
+            :status-indicator-center-to-edge 0
+            :font-size                       :label
+            :ring-width                      2}})

 (defn initials-avatar
  [size customization-color theme]
@@ -39,7 +39,7 @@
   :background-color intials avatar background color
   :color            intials avatar text color
   :size             intials avatar radius
-   :ring?            render ident ring around avatar? NOTE: this option may not work if override-ring? is not nil}
+   :ring?            render ident ring around avatar?}

  supported color formats:
  #RRGGBB
@@ -8,21 +8,18 @@
  {:small   20
   :medium  32
   :large   48
-   :size-64 64
   :x-large 80})

 (def font-sizes
  {:small   :label
   :medium  :paragraph-2
   :large   :paragraph-1
-   :size-64 :heading-1
   :x-large :heading-1})

 (def font-weights
  {:small   :medium
   :medium  :semi-bold
   :large   :semi-bold
-   :size-64 :medium
   :x-large :medium})

 (defn wallet-user-avatar
@@ -1,8 +1,6 @@
 (ns quo2.components.buttons.button.properties
  (:require [quo2.foundations.colors :as colors]))

-(def backgrounds #{:photo :blur})
-
 (defn custom-color-type
  [customization-color icon-only?]
  {:icon-color       colors/white-opa-70
@@ -29,11 +29,10 @@
   only icon
   [button {:icon-only? true} :i/close-circle]"
  [_ _]
-  (let [pressed-state? (reagent/atom false)]
+  (let [pressed? (reagent/atom false)]
    (fn
      [{:keys [on-press on-long-press disabled? type background size icon-left icon-right icon-top
-               customization-color theme accessibility-label icon-only? container-style inner-style
-               pressed? on-press-in on-press-out]
+               customization-color theme accessibility-label icon-only? container-style inner-style]
        :or   {type                :primary
               size                40
               customization-color (cond (= type :primary)  :blue
@@ -47,18 +46,14 @@
                                           :background          background
                                           :type                type
                                           :theme               theme
-                                           :pressed?            (if pressed? pressed? @pressed-state?)
+                                           :pressed?            @pressed?
                                           :icon-only?          icon-only?})
            icon-size (when (= 24 size) 12)]
        [rn/touchable-without-feedback
         {:disabled            disabled?
          :accessibility-label accessibility-label
-          :on-press-in         (fn []
-                                 (reset! pressed-state? true)
-                                 (when on-press-in (on-press-in)))
-          :on-press-out        (fn []
-                                 (reset! pressed-state? nil)
-                                 (when on-press-out (on-press-out)))
+          :on-press-in         #(reset! pressed? true)
+          :on-press-out        #(reset! pressed? nil)
          :on-press            on-press
          :on-long-press       on-long-press}
         [rn/view
@@ -81,7 +76,7 @@
             [customization-colors/overlay
              {:customization-color customization-color
               :theme               theme
-               :pressed?            (if pressed? pressed? @pressed-state?)}])
+               :pressed?            @pressed?}])
           (when (= background :photo)
             [blur/view
              {:blur-radius   20
@@ -70,7 +70,7 @@
  [sliding-complete?]
  (reset! sliding-complete? true))

-(defn reset-track-position
+(defn- reset-track-position
  [x-pos]
  (animate-spring x-pos 0))

@@ -1,6 +1,7 @@
 (ns quo2.components.buttons.slide-button.component-spec
  (:require [quo2.components.buttons.slide-button.view :as slide-button]
            [quo2.components.buttons.slide-button.constants :as constants]
+            [quo2.components.buttons.slide-button.utils :as utils]
            ["@testing-library/react-native" :as rtl]
            ["react-native-gesture-handler/jest-utils" :as gestures-jest]
            [reagent.core :as r]
@@ -81,11 +82,17 @@
      (h/has-style track-mock {:opacity constants/disable-opacity})))

  (h/test "render the small button"
-    (h/render [slide-button/view (assoc default-props :size :size/s-40)])
+    (h/render [slide-button/view (assoc default-props :size :small)])
    (let [mock         (h/get-by-test-id :slide-button-track)
          small-height (:track-height constants/small-dimensions)]
      (h/has-style mock {:height small-height})))

+  (h/test "render with the correct customization-color"
+    (h/render [slide-button/view (assoc default-props :customization-color :purple)])
+    (let [track-mock   (h/get-by-test-id :slide-button-track)
+          purple-color (utils/slider-color :track :purple)]
+      (h/has-style track-mock {:backgroundColor purple-color})))
+
  (h/test
    "calls on-complete when dragged"
    (let [props          (merge default-props {:on-complete (h/mock-fn)})
@@ -13,10 +13,10 @@
   :right    0})

 (defn thumb-container
-  [{:keys [interpolate-track thumb-size customization-color theme]}]
+  [interpolate-track thumb-size customization-color]
  (reanimated/apply-animations-to-style
   {:transform [{:translate-x (interpolate-track :track-clamp)}]}
-   {:background-color (utils/slider-color :main customization-color theme)
+   {:background-color (utils/slider-color :main customization-color)
    :border-radius    12
    :height           thumb-size
    :width            thumb-size
@@ -46,7 +46,7 @@
    :justify-content :space-around}))

 (defn track
-  [{:keys [disabled? customization-color height theme]}]
+  [disabled? customization-color height]
  {:align-items      :flex-start
   :justify-content  :center
   :border-radius    14
@@ -54,7 +54,7 @@
   :align-self       :stretch
   :padding          constants/track-padding
   :opacity          (if disabled? 0.3 1)
-   :background-color (utils/slider-color :track customization-color theme)})
+   :background-color (utils/slider-color :track customization-color)})

 (defn track-cover
  [interpolate-track]
@@ -74,7 +74,7 @@
   :width           track-width})

 (defn track-text
-  [customization-color theme]
+  [customization-color]
  (-> typography/paragraph-1
      (merge typography/font-medium)
-      (assoc :color (utils/slider-color :main customization-color theme))))
+      (assoc :color (utils/slider-color :main customization-color))))
@@ -6,15 +6,9 @@
 (defn slider-color
  "- `color-key`               `:main`/`:track`
   - `customization-color` Customization color"
-  [color-key customization-color theme]
-  (let [colors-by-key {:main  (colors/theme-colors
-                               (colors/custom-color customization-color 50)
-                               (colors/custom-color customization-color 60)
-                               theme)
-                       :track (colors/theme-colors
-                               (colors/custom-color customization-color 50 10)
-                               (colors/custom-color customization-color 60 10)
-                               theme)}]
+  [color-key customization-color]
+  (let [colors-by-key {:main  (colors/custom-color-by-theme customization-color 50 60)
+                       :track (colors/custom-color-by-theme customization-color 50 60 10 10)}]
    (color-key colors-by-key)))

 (defn clamp-value
@@ -34,8 +28,8 @@
 (defn get-dimensions
  [track-width size dimension-key]
  (let [default-dimensions (case size
-                             :size/s-40 constants/small-dimensions
-                             :size/s-48 constants/large-dimensions
+                             :small constants/small-dimensions
+                             :large constants/large-dimensions
                             constants/large-dimensions)]
    (-> default-dimensions
        (merge {:usable-track (calc-usable-track
@@ -10,8 +10,7 @@
    [reagent.core :as reagent]
    [oops.core :as oops]
    [react-native.reanimated :as reanimated]
-    [quo2.components.buttons.slide-button.constants :as constants]
-    [quo2.theme :as quo.theme]))
+    [quo2.components.buttons.slide-button.constants :as constants]))

 (defn- f-slider
  [{:keys [disabled?]}]
@@ -21,15 +20,14 @@
        on-track-layout    (fn [evt]
                             (let [width (oops/oget evt "nativeEvent.layout.width")]
                               (reset! track-width width)))]
-    (fn [{:keys [on-reset
-                 on-complete
+
+    (fn [{:keys [on-complete
                 track-text
                 track-icon
                 disabled?
                 customization-color
                 size
-                 container-style
-                 theme]}]
+                 container-style]}]
      (let [x-pos             (reanimated/use-shared-value 0)
            dimensions        (partial utils/get-dimensions
                                       (or @track-width constants/default-width)
@@ -38,19 +36,12 @@
                                       x-pos
                                       (dimensions :usable-track)
                                       (dimensions :thumb))]
+
        (rn/use-effect (fn []
                         (when @sliding-complete?
                           (on-complete)))
                       [@sliding-complete?])

-        (rn/use-effect (fn []
-                         (when on-reset
-                           (reset! sliding-complete? false)
-                           (reset! gestures-disabled? false)
-                           (animations/reset-track-position x-pos)
-                           (on-reset)))
-                       [on-reset])
-
        [gesture/gesture-detector
         {:gesture (animations/drag-gesture x-pos
                                            gestures-disabled?
@@ -59,25 +50,21 @@
                                            sliding-complete?)}
         [reanimated/view
          {:test-ID   :slide-button-track
-           :style     (merge (style/track {:disabled?           disabled?
-                                           :customization-color customization-color
-                                           :height              (dimensions :track-height)
-                                           :theme               theme})
+           :style     (merge (style/track disabled? customization-color (dimensions :track-height))
                             container-style)
           :on-layout (when-not (some? @track-width)
                        on-track-layout)}
          [reanimated/view {:style (style/track-cover interpolate-track)}
           [rn/view {:style (style/track-cover-text-container @track-width)}
            [icon/icon track-icon
-             {:color (utils/slider-color :main customization-color theme)
+             {:color (utils/slider-color :main customization-color)
              :size  20}]
            [rn/view {:width 4}]
-            [rn/text {:style (style/track-text customization-color theme)} track-text]]]
+            [rn/text {:style (style/track-text customization-color)} track-text]]]
          [reanimated/view
-           {:style (style/thumb-container {:interpolate-track   interpolate-track
-                                           :thumb-size          (dimensions :thumb)
-                                           :customization-color customization-color
-                                           :theme               theme})}
+           {:style (style/thumb-container interpolate-track
+                                          (dimensions :thumb)
+                                          customization-color)}
           [reanimated/view {:style (style/arrow-icon-container interpolate-track)}
            [icon/icon :arrow-right
             {:color colors/white
@@ -89,19 +76,16 @@
             {:color colors/white
              :size  20}]]]]]))))

-(defn- view-internal
+(defn view
  "Options
  - `on-complete`         Callback called when the sliding is complete
  - `disabled?`           Boolean that disables the button
                          (_and gestures_)
-  - `size`                :size/s-40`/`:size/s-48`
+  - `size`                `:small`/`:large`
  - `track-text`          Text that is shown on the track
  - `track-icon`          Key of the icon shown on the track
                          (e.g. `:face-id`)
  - `customization-color` Customization color
-  - `on-reset`            A callback which can be used to reset the component and run required functionality
  "
  [props]
  [:f> f-slider props])
-
-(def view (quo.theme/with-theme view-internal))
@@ -0,0 +1,87 @@
+(ns quo2.components.code.code.style
+  (:require [quo2.foundations.colors :as colors]))
+
+;; Example themes:
+;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs
+(defn theme
+  [theme-key]
+  (case theme-key
+    :hljs-comment (colors/theme-colors colors/neutral-40 colors/neutral-60)
+    :hljs-title   (colors/custom-color-by-theme :sky 50 60)
+    :hljs-keyword (colors/custom-color-by-theme :green 50 60)
+    :hljs-string  (colors/custom-color-by-theme :turquoise 50 60)
+    :hljs-literal (colors/custom-color-by-theme :turquoise 50 60)
+    :hljs-number  (colors/custom-color-by-theme :turquoise 50 60)
+    :line-number  colors/neutral-40
+    nil))
+
+(defn text-style
+  [class-names]
+  (let [text-color (->> class-names
+                        (map keyword)
+                        (some (fn [class-name]
+                                (when-let [text-color (theme class-name)]
+                                  text-color))))]
+    (cond-> {:flex-shrink 1
+             :line-height 18}
+      text-color (assoc :color text-color))))
+
+(defn border-color
+  []
+  (colors/theme-colors colors/neutral-20 colors/neutral-80))
+
+(defn container
+  []
+  {:overflow         :hidden
+   :padding          8
+   :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40)
+   :border-color     (border-color)
+   :border-width     1
+   :border-radius    16})
+
+(def gradient-container
+  {:position :absolute
+   :bottom   0
+   :left     0
+   :right    0
+   :z-index  1})
+
+(def gradient {:height 48})
+
+(defn line-number-container
+  [line-number-width]
+  {:position         :absolute
+   :bottom           0
+   :top              0
+   :left             0
+   :width            (+ line-number-width 8 7)
+   :background-color (colors/theme-colors colors/neutral-5 colors/neutral-80)})
+
+(defn divider
+  [line-number-width]
+  {:position         :absolute
+   :bottom           0
+   :top              0
+   :left             (+ line-number-width 7 7)
+   :width            1
+   :z-index          2
+   :background-color (border-color)})
+
+(def line {:flex-direction :row})
+
+(defn line-number
+  [width]
+  {:margin-right 20 ; 8+12 margin
+   :width        width})
+
+(def copy-button
+  {:position :absolute
+   :bottom   8
+   :right    8
+   :z-index  1})
+
+(defn gradient-color [] (colors/theme-colors colors/white colors/neutral-80))
+
+(defn button-background-color
+  []
+  (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5))
@@ -1,107 +0,0 @@
-(ns quo2.components.code.common.style
-  (:require [quo2.foundations.colors :as colors]))
-
-;; Example themes:
-;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs
-(defn highlight-theme
-  [theme-key]
-  (case theme-key
-    :hljs-comment      (colors/theme-colors colors/neutral-40 colors/neutral-60)
-    :hljs-title        (colors/custom-color-by-theme :sky 50 60)
-    :hljs-keyword      (colors/custom-color-by-theme :green 50 60)
-    :hljs-string       (colors/custom-color-by-theme :turquoise 50 60)
-    :hljs-literal      (colors/custom-color-by-theme :turquoise 50 60)
-    :hljs-number       (colors/custom-color-by-theme :turquoise 50 60)
-    :hljs-symbol       (colors/custom-color-by-theme :orange 50 50)
-    :hljs-builtin-name (colors/custom-color-by-theme :pink 50 50)
-    :line-number       colors/neutral-40
-    nil))
-
-(defn text-style
-  [class-names preview?]
-  (let [text-color (->> class-names
-                        (map keyword)
-                        (some (fn [class-name]
-                                (when-let [text-color (highlight-theme class-name)]
-                                  text-color))))]
-    (cond-> {:flex-shrink 1
-             :line-height 18}
-      preview?   (assoc :color colors/white)
-      text-color (assoc :color text-color))))
-
-(defn border-color
-  []
-  (colors/theme-colors colors/neutral-20 colors/neutral-80))
-
-(defn container
-  [preview? theme]
-  (if preview?
-    {:overflow         :hidden
-     :width            108
-     :background-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
-     :border-radius    8}
-    {:overflow         :hidden
-     :padding          8
-     :background-color (colors/theme-colors colors/white colors/neutral-80-opa-40 theme)
-     :border-color     (border-color)
-     :border-width     1
-     :border-radius    16}))
-
-(def gradient-container
-  {:position :absolute
-   :bottom   0
-   :left     0
-   :right    0
-   :z-index  1})
-
-(def gradient {:height 48})
-
-(defn line-number-container
-  [line-number-width preview? theme]
-  (cond-> {:position         :absolute
-           :bottom           0
-           :top              0
-           :left             0
-           :width            (+ line-number-width 8 7)
-           :background-color (colors/theme-colors colors/neutral-5 colors/neutral-80 theme)}
-    preview? (assoc :width            20
-                    :background-color (colors/theme-colors colors/neutral-10 colors/neutral-70 theme))))
-
-(defn divider
-  [line-number-width]
-  {:position         :absolute
-   :bottom           0
-   :top              0
-   :left             (+ line-number-width 7 7)
-   :width            1
-   :z-index          2
-   :background-color (border-color)})
-
-(def line {:flex-direction :row})
-
-(defn line-number
-  [width preview?]
-  (if preview?
-    {:width            width
-     :padding-vertical 3
-     :padding-left     8
-     :padding-right    4}
-    {:margin-right 20 ; 8+12 margin
-     :width        width}))
-
-(def line-content
-  {:flex               1
-   :padding-horizontal 8
-   :padding-vertical   3})
-
-(def copy-button
-  {:position :absolute
-   :bottom   8
-   :right    8
-   :z-index  1})
-
-(defn gradient-color [] (colors/theme-colors colors/white colors/neutral-80))
-
-(defn button-background-color
-  []
-  (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5))
@@ -1,8 +1,8 @@
-(ns quo2.components.code.common.view
+(ns quo2.components.code.snippet
  (:require [cljs-bean.core :as bean]
            [clojure.string :as string]
            [quo2.components.buttons.button.view :as button]
-            [quo2.components.code.common.style :as style]
+            [quo2.components.code.code.style :as style]
            [quo2.components.markdown.text :as text]
            [react-native.core :as rn]
            [react-native.linear-gradient :as linear-gradient]
@@ -10,41 +10,39 @@
            [reagent.core :as reagent]))

 (defn- render-nodes
-  [nodes preview?]
+  [nodes]
  (map (fn [{:keys [children value last-line?] :as node}]
         (if children
           (into [text/text
                  (cond-> {:weight :code
                           :size   :paragraph-2
-                           :style  (style/text-style (get-in node [:properties :className]) preview?)}
+                           :style  (style/text-style (get-in node [:properties :className]))}
                    last-line? (assoc :number-of-lines 1))]
-                 (render-nodes children preview?))
+                 (render-nodes children))
           ;; Remove newlines as we already render each line separately.
           (string/trim-newline value)))
       nodes))

 (defn- line
-  [{:keys [line-number line-number-width preview?]} children]
+  [{:keys [line-number line-number-width]} children]
  [rn/view {:style style/line}
-   [rn/view {:style (style/line-number line-number-width preview?)}
+   [rn/view {:style (style/line-number line-number-width)}
    [text/text
-     {:style  (style/text-style ["line-number"] preview?)
+     {:style  (style/text-style ["line-number"])
      :weight :code
      :size   :paragraph-2}
     line-number]]
-   (cond->> children
-     preview? (conj [rn/view {:style style/line-content}]))])
+   children])

 (defn- code-block
-  [{:keys [rows line-number-width preview?]}]
+  [{:keys [rows line-number-width]}]
  [rn/view
-   (->> preview?
-        (render-nodes rows)
+   (->> rows
+        (render-nodes)
        (map-indexed (fn [idx row-content]
                       [line
                        {:line-number       (inc idx)
-                         :line-number-width line-number-width
-                         :preview?          preview?}
+                         :line-number-width line-number-width}
                        row-content]))
        (into [:<>]))])

@@ -68,44 +66,36 @@
      (* 9 max-line-digits font-scale))))

 (defn- f-native-renderer
-  [{:keys [rows max-lines on-copy-press preview? theme]
+  [{:keys [rows max-lines on-copy-press]
    :or   {max-lines ##Inf}}]
  (let [font-scale          (:font-scale (rn/get-window))
        total-rows          (count rows)
-        number-rows-to-show (if preview?
-                              0
-                              (min (count rows) max-lines))
-        line-number-width   (if preview? 20 (calc-line-number-width font-scale number-rows-to-show))
+        number-rows-to-show (min (count rows) max-lines)
+        line-number-width   (calc-line-number-width font-scale number-rows-to-show)
        truncated?          (< number-rows-to-show total-rows)
        rows-to-show-coll   (if truncated?
                              (as-> rows $
                                (update $ number-rows-to-show assoc :last-line? true)
                                (take (inc number-rows-to-show) $))
                              rows)]
-    [rn/view {:style (style/container preview? theme)}
-     [rn/view {:style (style/line-number-container line-number-width preview? theme)}]
-     (if preview?
-       [code-block
-        {:rows              rows-to-show-coll
-         :line-number-width line-number-width
-         :preview?          preview?}]
-       [:<>
-        [rn/view {:style (style/divider line-number-width)}]
-        [mask-view {:apply-mask? truncated?}
-         [code-block
-          {:rows              rows-to-show-coll
-           :line-number-width line-number-width}]]
-        [rn/view {:style style/copy-button}
-         [button/button
-          {:icon-only? true
-           :type       :grey
-           :background :blur
-           :size       24
-           :on-press   on-copy-press}
-          :main-icons/copy]]])]))
+    [rn/view {:style (style/container)}
+     [rn/view {:style (style/line-number-container line-number-width)}]
+     [rn/view {:style (style/divider line-number-width)}]
+     [mask-view {:apply-mask? truncated?}
+      [code-block
+       {:rows              rows-to-show-coll
+        :line-number-width line-number-width}]]
+     [rn/view {:style style/copy-button}
+      [button/button
+       {:icon-only? true
+        :type       :grey
+        :background :blur
+        :size       24
+        :on-press   on-copy-press}
+       :main-icons/copy]]]))

-(defn view
-  [{:keys [language max-lines on-copy-press preview? theme]} children]
+(defn snippet
+  [{:keys [language max-lines on-copy-press]} children]
  [highlighter/highlighter
   {:language          language
    :renderer          (fn [^js/Object props]
@@ -113,11 +103,8 @@
                          [:f> f-native-renderer
                           {:rows          (-> props .-rows bean/->clj)
                            :on-copy-press #(when on-copy-press (on-copy-press children))
-                            :max-lines     max-lines
-                            :preview?      preview?
-                            :theme         theme}]))
+                            :max-lines     max-lines}]))
    :show-line-numbers false
    :style             {}
    :custom-style      {:background-color nil}}
   children])
-
@@ -1,15 +0,0 @@
-(ns quo2.components.code.snippet.view
-  (:require [quo2.theme :as theme]
-            [quo2.components.code.common.view :as code-common]))
-
-(defn- view-internal
-  [_]
-  (fn [{:keys [language max-lines on-copy-press]} children]
-    [code-common/view
-     {:language      language
-      :max-lines     max-lines
-      :on-copy-press on-copy-press
-      :preview?      false}
-     children]))
-
-(def view (theme/with-theme view-internal))
@@ -1,11 +0,0 @@
-(ns quo2.components.code.snippet-preview.view
-  (:require [quo2.components.code.common.view :as code-common]))
-
-(defn view
-  [{:keys [language]} children]
-  [code-common/view
-   {:preview?  true
-    :language  language
-    :max-lines 0
-    :theme     :dark}
-   children])
@@ -1,54 +0,0 @@
-(ns quo2.components.colors.color.style
-  (:require [quo2.foundations.colors :as colors]))
-
-(def color-button-common
-  {:width             48
-   :height            48
-   :border-width      4
-   :border-radius     24
-   :margin-horizontal 4
-   :transform         [{:rotate "45deg"}]
-   :border-color      :transparent})
-
-(defn color-button
-  [color selected?]
-  (merge color-button-common
-         (when selected?
-           {:border-top-color    (colors/alpha color 0.4)
-            :border-end-color    (colors/alpha color 0.4)
-            :border-bottom-color (colors/alpha color 0.2)
-            :border-start-color  (colors/alpha color 0.2)})))
-
-(defn color-circle
-  [color border?]
-  {:width            40
-   :height           40
-   :transform        [{:rotate "-45deg"}]
-   :background-color color
-   :justify-content  :center
-   :align-items      :center
-   :border-color     color
-   :border-width     (if border? 2 0)
-   :overflow         :hidden
-   :border-radius    20})
-
-(defn feng-shui
-  [theme]
-  {:width            40
-   :height           40
-   :transform        [{:rotate "45deg"}]
-   :overflow         :hidden
-   :border-color     (colors/theme-colors colors/neutral-100 colors/white theme)
-   :border-width     2
-   :background-color (colors/theme-colors colors/neutral-100 colors/white theme)
-   :border-radius    20})
-
-(defn left-half
-  [theme]
-  {:flex             1
-   :background-color (colors/theme-colors colors/white colors/neutral-100 theme)})
-
-(defn right-half
-  [theme]
-  {:flex             1
-   :background-color (colors/theme-colors colors/neutral-100 colors/white theme)})
@@ -1,50 +0,0 @@
-(ns quo2.components.colors.color.view
-  (:require
-    [quo2.components.icon :as icon]
-    [quo2.foundations.colors :as colors]
-    [quo2.theme :as quo.theme]
-    [react-native.core :as rn]
-    [quo2.components.colors.color.style :as style]))
-
-(defn- feng-shui
-  [{:keys [color theme]}]
-  [rn/view
-   {:accessibility-label color
-    :style               (style/feng-shui theme)}
-   [rn/view {:style (style/left-half theme)}]
-   [rn/view {:style (style/right-half theme)}]])
-
-(defn- view-internal
-  [{:keys [color
-           selected?
-           on-press
-           blur?
-           theme]
-    :as   props}]
-  (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)
-                                         (colors/custom-color color 60)
-                                         theme))]
-
-    [rn/pressable
-     {:style               (style/color-button hex-color selected?)
-      :accessibility-label :color-picker-item
-      :on-press            #(on-press color)}
-     (if (and (= :feng-shui color) (not selected?))
-       [feng-shui
-        (assoc props
-               :hex-color hex-color
-               :border?   border?)]
-       [rn/view
-        {:accessibility-label color
-         :style               (style/color-circle hex-color border?)}
-        (when selected?
-          [icon/icon :i/check
-           {:size  20
-            :color (if (= :feng-shui color)
-                     (colors/theme-colors colors/white colors/neutral-100 theme)
-                     colors/white)}])])]))
-
-(def view (quo.theme/with-theme view-internal))
@@ -3,6 +3,8 @@
            [reagent.core :as reagent]
            [test-helpers.component :as h]))

+(def color-list [:blue :yellow :turquoise :copper :sky :camel :orange :army :pink :purple :magenta])
+
 (h/describe "color-picker"
  (h/test "color picker rendered"
    (h/render [color-picker/view])
@@ -24,6 +26,6 @@
    (h/render [color-picker/view])
    (js/Promise.all (map (fn [color]
                           (h/is-truthy (h/get-all-by-label-text color)))
-                         color-picker/color-list))))
+                         color-list))))


@@ -0,0 +1,50 @@
+(ns quo2.components.colors.color-picker.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def color-picker-container
+  {:flex-direction  :row
+   :flex-wrap       :wrap
+   :justify-content :space-between})
+
+(def flex-break
+  {:flex-basis "100%"
+   :height     10})
+
+(def color-button-common
+  {:width         48
+   :height        48
+   :border-width  4
+   :border-radius 24
+   :transform     [{:rotate "45deg"}]
+   :border-color  :transparent})
+
+(defn color-button
+  [color selected?]
+  (merge color-button-common
+         (when selected?
+           {:border-top-color    (colors/alpha color 0.4)
+            :border-end-color    (colors/alpha color 0.4)
+            :border-bottom-color (colors/alpha color 0.2)
+            :border-start-color  (colors/alpha color 0.2)})))
+
+(defn color-circle
+  [color border?]
+  {:width            40
+   :height           40
+   :transform        [{:rotate "-45deg"}]
+   :background-color color
+   :justify-content  :center
+   :align-items      :center
+   :border-color     color
+   :border-width     (if border? 2 0)
+   :overflow         :hidden
+   :border-radius    20})
+
+(defn secondary-overlay
+  [secondary-color border?]
+  {:width            (if border? 18 20)
+   :height           40
+   :position         :absolute
+   :right            0
+   :background-color secondary-color})
+
@@ -1,34 +1,77 @@
 (ns quo2.components.colors.color-picker.view
  (:require [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.icon :as icon]
            [reagent.core :as reagent]
-            [quo2.components.colors.color.view :as color]))
+            [quo2.components.colors.color-picker.style :as style]))

+;; TODO: using :no-color this to keep alignment of colors correct while b & w is being developed.
+;; https://github.com/status-im/status-mobile/issues/15442
 (def color-list
-  [:blue :yellow :purple :turquoise :magenta :sky :orange :army :flamingo :camel :copper])
+  [:blue :yellow :turquoise :copper :sky :camel :orange :army :pink :purple :magenta :no-color])
+
+(defn picker-colors
+  [blur?]
+  (map (fn [color]
+         {:name  color
+          :color (colors/custom-color-by-theme color (if blur? 60 50) 60)})
+       color-list))

 (defn- on-change-handler
  [selected color-name on-change]
  (reset! selected color-name)
  (when on-change (on-change color-name)))

+(defn empty-color-item
+  []
+  [rn/view {:style style/color-button-common}])
+
+(defn- color-item
+  [{:keys [name
+           color
+           secondary-color
+           selected?
+           on-press
+           blur?]}]
+  (let [border? (and (not blur?) (and secondary-color (not selected?)))]
+    (if (= :no-color name)
+      [empty-color-item]
+      [rn/touchable-opacity
+       {:style               (style/color-button color selected?)
+        :accessibility-label :color-picker-item
+        :on-press            #(on-press name)}
+       [rn/view
+        {:accessibile         true
+         :accessibility-label name
+         :style               (style/color-circle color border?)}
+        (when (and secondary-color (not selected?))
+          [rn/view
+           {:style (style/secondary-overlay secondary-color border?)}])
+        (when selected?
+          [icon/icon :i/check
+           {:size  20
+            :color (or secondary-color
+                       colors/white)}])]])))
+
 (defn view
  "Options
-   - `default-selected` Default selected color name.
+   - `default-selected?` Default selected color name.
+   - `selected` Selected color name.
   - `on-change` Callback called when a color is selected `(fn [color-name])`.
   - `blur?` Boolean to enable blur background support.}"
-  [{:keys [default-selected]}]
-  (let [selected (reagent/atom default-selected)]
-    (fn [{:keys [blur? on-change feng-shui?]}]
-      [rn/scroll-view
-       {:horizontal                        true
-        :shows-horizontal-scroll-indicator false}
-       (doall (map (fn [color]
-                     [color/view
-                      {:selected? (= color @selected)
-                       :on-press  #(on-change-handler selected % on-change)
-                       :blur?     blur?
-                       :key       color
-                       :color     color}])
-                   ;; TODO: using :feng-shui? temporarily while b & w is being developed.
-                   ;; https://github.com/status-im/status-mobile/discussions/16676
-                   (if feng-shui? (conj color-list :feng-shui) color-list)))])))
+  [{:keys [default-selected?]}]
+  (let [internal-selected (reagent/atom default-selected?)]
+    (fn [{:keys [blur? on-change selected]}]
+      (when (and (not (nil? selected)) (not= @internal-selected selected))
+        (reset! internal-selected selected))
+      [rn/view {:style style/color-picker-container}
+       (doall (map-indexed (fn [index color]
+                             [:<> {:key (color :name)}
+                              [color-item
+                               (merge color
+                                      {:selected? (= (color :name) @internal-selected)
+                                       :on-press  #(on-change-handler internal-selected % on-change)
+                                       :blur?     blur?})]
+                              (when (= index 5) [rn/view {:style style/flex-break}])])
+                           (picker-colors blur?)))])))
+
@@ -4,9 +4,7 @@
 (defn get-color
  [type customization-color theme]
  (case type
-    :default   (colors/theme-colors (colors/custom-color customization-color 50)
-                                    (colors/custom-color customization-color 60)
-                                    theme)
+    :default   (colors/custom-color customization-color 50)
    :secondary (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
    :grey      (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)
    :outline   (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
@@ -1,10 +1,6 @@
 (ns quo2.components.dividers.divider-label.style
  (:require [quo2.foundations.colors :as colors]))

-(defn get-height
-  [tight?]
-  (if tight? 34 42))
-
 (defn- get-border-color
  [blur? theme]
  (colors/theme-colors (if blur? colors/neutral-80-opa-5 colors/neutral-10)
@@ -21,7 +17,6 @@
  [blur? tight? chevron theme]
  {:border-top-width 1
   :border-top-color (get-border-color blur? theme)
-   :height           (get-height tight?)
   :padding-top      (if tight? 6 14)
   :padding-bottom   7
   :padding-left     (if (= :left chevron) 16 20)
@@ -2,10 +2,10 @@
  (:require [quo2.foundations.colors :as colors]))

 (defn divider-line
-  [{:keys [blur? container-style theme]}]
-  (merge
-   {:border-color        (if blur?
-                           (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
-                           (colors/theme-colors colors/neutral-10 colors/neutral-90 theme))
-    :border-bottom-width 1}
-   container-style))
+  [blur? theme]
+  {:border-color        (if blur?
+                          (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
+                          (colors/theme-colors colors/neutral-10 colors/neutral-90 theme))
+   :padding-top         12
+   :padding-bottom      8
+   :border-bottom-width 1})
@@ -5,7 +5,7 @@
    [quo2.components.dividers.divider-line.style :as style]))

 (defn- view-internal
-  [props]
-  [rn/view {:style (style/divider-line props)}])
+  [{:keys [blur? theme]}]
+  [rn/view {:style (style/divider-line blur? theme)}])

 (def view (quo.theme/with-theme view-internal))
@@ -1,98 +0,0 @@
-(ns quo2.components.drawers.drawer-top.component-spec
-  (:require [test-helpers.component :as h]
-            [quo2.core :as quo]))
-
-(h/describe "drawer top tests"
-  (h/test "component renders in default type"
-    (h/render [quo/drawer-top
-               {:title "Title"
-                :type  :default}])
-    (h/is-truthy (h/get-by-text "Title")))
-
-  (h/test "component renders in default + description type"
-    (h/render [quo/drawer-top
-               {:title       "Title"
-                :type        :default
-                :description "Description"}])
-    (h/is-truthy (h/get-by-text "Title"))
-    (h/is-truthy (h/get-by-text "Description")))
-
-  (h/test "component renders in info type"
-    (h/render [quo/drawer-top
-               {:title "Title"
-                :type  :info}])
-    (h/is-truthy (h/get-by-text "Title"))
-    (h/is-truthy (h/get-by-label-text :info-icon)))
-
-  (h/test "component renders in info + description type"
-    (h/render [quo/drawer-top
-               {:title       "Title"
-                :description "Description"
-                :type        :info}])
-    (h/is-truthy (h/get-by-text "Title"))
-    (h/is-truthy (h/get-by-text "Description"))
-    (h/is-truthy (h/get-by-label-text :info-icon)))
-
-  (h/test "component renders in context-tag type"
-    (h/render [quo/drawer-top
-               {:title          "Title"
-                :type           :context-tag
-                :community-name "Coinbase"}])
-    (h/is-truthy (h/get-by-text "Title"))
-    (h/is-truthy (h/get-by-label-text :context-tag-wrapper)))
-
-  (h/test "component renders in context-tag + button type"
-    (h/render [quo/drawer-top
-               {:title          "Title"
-                :type           :context-tag
-                :button-icon    :i/placeholder
-                :community-name "Coinbase"}])
-    (h/is-truthy (h/get-by-text "Title"))
-    (h/is-truthy (h/get-by-label-text :button-icon))
-    (h/is-truthy (h/get-by-label-text :context-tag-wrapper)))
-
-  (h/test "component renders in account type"
-    (h/render [quo/drawer-top
-               {:title                "Title"
-                :type                 :account
-                :account-avatar-emoji "🍿"
-                :networks             [:ethereum]
-                :description          "0x62b...0a5"
-                :customization-color  :purple}])
-    (h/is-truthy (h/get-by-text "Title"))
-    (h/is-truthy (h/get-by-text "0x62b...0a5"))
-    (h/is-truthy (h/get-by-label-text :account-avatar)))
-
-  (h/test "component renders in keypair type when keycard? is false"
-    (h/render [quo/drawer-top
-               {:title       "Title"
-                :keycard?    false
-                :icon-avatar :i/placeholder
-                :type        :keypair}])
-    (h/is-truthy (h/get-by-text "Title"))
-    (-> (h/expect (h/get-by-translation-text :on-device))
-        (.toBeTruthy)))
-
-  (h/test "component renders in keypair type when keycard? is true"
-    (h/render [quo/drawer-top
-               {:title       "Title"
-                :keycard?    true
-                :icon-avatar :i/placeholder
-                :type        :keypair}])
-    (h/is-truthy (h/get-by-text "Title"))
-    (-> (h/expect (h/get-by-translation-text :on-keycard))
-        (.toBeTruthy)))
-
-  (h/test "component renders in default-keypair type"
-    (h/render [quo/drawer-top
-               {:title       "Title"
-                :description "0x62b...0a5"
-                :type        :default-keypair}])
-    (h/is-truthy (h/get-by-text "Title"))
-    (h/is-truthy (h/get-by-label-text :default-keypair-text)))
-
-  (h/test "component renders in label type"
-    (h/render [quo/drawer-top
-               {:label "label"
-                :type  :label}])
-    (h/is-truthy (h/get-by-text "label"))))
@@ -1,31 +0,0 @@
-(ns quo2.components.drawers.drawer-top.style
-  (:require [quo2.foundations.colors :as colors]))
-
-(def container
-  {:padding-horizontal 20
-   :padding-bottom     12
-   :flex-direction     :row})
-
-(def body-container
-  {:flex 1})
-
-(defn description
-  [theme blur?]
-  {:color (if blur?
-            colors/white-opa-40
-            (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))})
-
-(def left-container
-  {:margin-right    8
-   :justify-content :center})
-
-(defn network-text-color
-  [network]
-  {:color (colors/custom-color network)})
-
-(def row
-  {:flex-direction :row
-   :align-items    :center})
-
-(def keycard-icon
-  {:margin-left 4})
@@ -1,204 +0,0 @@
-(ns quo2.components.drawers.drawer-top.view
-  (:require [quo2.theme :as quo.theme]
-            [quo2.components.markdown.text :as text]
-            [quo2.components.drawers.drawer-top.style :as style]
-            [quo2.components.buttons.button.view :as button]
-            [quo2.components.tags.context-tag.view :as context-tag]
-            [react-native.core :as rn]
-            [quo2.components.icon :as icons]
-            [quo2.components.avatars.account-avatar.view :as account-avatar]
-            [quo2.components.avatars.icon-avatar :as icon-avatar]
-            [quo2.components.avatars.user-avatar.view :as user-avatar]
-            [quo2.foundations.colors :as colors]
-            [utils.i18n :as i18n]))
-
-(defn- left-image
-  [{:keys [type customization-color account-avatar-emoji icon-avatar profile-picture]}]
-  (case type
-    :account         [account-avatar/view
-                      {:customization-color customization-color
-                       :size                32
-                       :emoji               account-avatar-emoji
-                       :type                :default}]
-    :keypair         [icon-avatar/icon-avatar
-                      {:icon    icon-avatar
-                       :border? true
-                       :color   :neutral}]
-
-    :default-keypair [user-avatar/user-avatar
-                      {:size              :small
-                       :status-indicator? false
-                       :profile-picture   profile-picture}]
-    nil))
-
-(defn- network-view
-  [network]
-  [text/text
-   {:size   :paragraph-2
-    :weight :regular
-    :style  (style/network-text-color network)}
-   (str (subs (name network) 0 3) ":")])
-
-(defn- keypair-subtitle
-  [{:keys [theme blur? keycard?]}]
-  [rn/view {:style style/row}
-   [text/text
-    {:size   :paragraph-2
-     :weight :regular
-     :style  (style/description theme blur?)}
-    (if keycard?
-      (i18n/label :t/on-keycard)
-      (i18n/label :t/on-device))]
-   (when keycard?
-     [icons/icon
-      :i/keycard-card
-      {:color           (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
-       :size            16
-       :container-style style/keycard-icon}])])
-
-(defn- acocunt-subtitle
-  [{:keys [networks theme blur? description]}]
-  [rn/view {:style style/row}
-   (for [network networks]
-     ^{:key (str network)}
-     [network-view network])
-   [text/text
-    {:size   :paragraph-2
-     :weight :regular
-     :style  (style/description theme blur?)}
-    description]])
-
-(defn- default-keypair-subtitle
-  [{:keys [description theme blur?]}]
-  [text/text
-   {:accessibility-label :default-keypair-text
-    :size                :paragraph-2
-    :weight              :regular
-    :style               (style/description theme blur?)}
-   (str description " · " (i18n/label :t/on-device))])
-
-(defn- context-tag-subtitle
-  [{:keys [community-logo community-name]}]
-  [rn/view
-   {:accessibility-label :context-tag-wrapper
-    :style               {:flex-wrap :wrap}}
-   [context-tag/view
-    {:type           :community
-     :community-name community-name
-     :community-logo community-logo
-     :size           24}]])
-
-(defn- description-subtitle
-  [{:keys [theme blur? description]}]
-  [text/text
-   {:size   :paragraph-1
-    :weight :regular
-    :style  (style/description theme blur?)}
-   description])
-
-(defn- subtitle
-  [{:keys [type theme blur? keycard? networks description community-name community-logo]}]
-  (cond
-    (= :keypair type)
-    [keypair-subtitle
-     {:theme    theme
-      :blur?    blur?
-      :keycard? keycard?}]
-
-    (= :account type)
-    [acocunt-subtitle
-     {:networks    networks
-      :theme       theme
-      :blur?       blur?
-      :description description}]
-
-    (= :default-keypair type)
-    [default-keypair-subtitle
-     {:description description
-      :theme       theme
-      :blur?       blur?}]
-
-    (= :context-tag type)
-    [context-tag-subtitle
-     {:community-logo community-logo
-      :community-name community-name}]
-
-    (and (not= :label type) description)
-    [description-subtitle
-     {:theme       theme
-      :blur?       blur?
-      :description description}]))
-
-(defn- right-icon
-  [{:keys [theme type on-button-press on-button-long-press button-disabled? button-icon]}]
-  (cond
-    (= :info type)
-    [icons/icon
-     :i/info
-     {:accessibility-label :info-icon
-      :size                20
-      :color               (colors/theme-colors colors/neutral-50
-                                                colors/neutral-40
-                                                theme)}]
-    (and (= :context-tag type) button-icon)
-    [button/button
-     {:accessibility-label :button-icon
-      :on-press            on-button-press
-      :on-long-press       on-button-long-press
-      :disabled?           button-disabled?
-      :type                :primary
-      :size                24
-      :icon-only?          true}
-     button-icon]))
-
-(defn- left-title
-  [{:keys [type label title theme blur?]}]
-  (case type
-    :label [text/text
-            {:weight :medium
-             :size   :paragraph-2
-             :style  (style/description theme blur?)}
-            label]
-    [text/text
-     {:size   :heading-2
-      :weight :semi-bold}
-     title]))
-
-(defn- view-internal
-  [{:keys [title type theme description blur? community-name community-logo button-icon on-button-press
-           on-button-long-press
-           button-disabled? account-avatar-emoji customization-color icon-avatar
-           profile-picture keycard? networks label]}]
-  [rn/view {:style style/container}
-   [rn/view {:style style/left-container}
-    [left-image
-     {:type                 type
-      :customization-color  customization-color
-      :account-avatar-emoji account-avatar-emoji
-      :icon-avatar          icon-avatar
-      :profile-picture      profile-picture}]]
-   [rn/view {:style style/body-container}
-    [left-title
-     {:type  type
-      :label label
-      :title title
-      :theme theme
-      :blur? blur?}]
-    [subtitle
-     {:type           type
-      :theme          theme
-      :blur?          blur?
-      :keycard?       keycard?
-      :networks       networks
-      :description    description
-      :community-name community-name
-      :community-logo community-logo}]]
-   [right-icon
-    {:theme                theme
-     :type                 type
-     :on-button-press      on-button-press
-     :on-button-long-press on-button-long-press
-     :button-disabled?     button-disabled?
-     :button-icon          button-icon}]])
-
-(def view (quo.theme/with-theme view-internal))
@@ -0,0 +1,20 @@
+(ns quo2.components.dropdowns.dropdown
+  (:require [quo2.components.dropdowns.old-button-view :as old-button]))
+
+(defn dropdown
+  [_ _]
+  (fn [{:keys [on-change selected] :as opts} children]
+    ;TODO: Dropdown needs to be implemented/refactored to be its own component -
+    ;https://github.com/status-im/status-mobile/issues/16456
+    [old-button/button
+     (merge
+      opts
+      {:after                   (if selected :i/chevron-top :i/chevron-down)
+       :icon-size               12
+       :icon-container-size     14
+       :icon-container-rounded? true
+       :override-after-margins  {:left  7
+                                 :right 9}
+       :pressed                 selected
+       :on-press                #(when on-change (on-change selected))})
+     children]))
@@ -1,35 +0,0 @@
-(ns quo2.components.dropdowns.dropdown.component-spec
-  (:require [quo2.components.dropdowns.dropdown.view :as dropdown]
-            [test-helpers.component :as h]))
-
-(h/describe "Dropdown"
-  (h/test "default render"
-    (let [label "Recent"]
-      (h/render [dropdown/view {} label])
-      (h/is-truthy (h/get-by-label-text :dropdown))
-      (h/is-null (h/query-by-label-text :left-icon))
-      (h/is-truthy (h/get-by-text label))
-      (h/is-truthy (h/get-by-label-text :right-icon))))
-
-  (h/test "render with icon"
-    (let [label "Recent"]
-      (h/render [dropdown/view {:icon? true} label])
-      (h/is-truthy (h/get-by-label-text :dropdown))
-      (h/is-truthy (h/get-by-label-text :left-icon))
-      (h/is-truthy (h/get-by-text label))
-      (h/is-truthy (h/get-by-label-text :right-icon))))
-
-  (h/test "render only emoji"
-    (let [label "🍑"]
-      (h/render [dropdown/view {:emoji? true} label])
-      (h/is-truthy (h/get-by-label-text :dropdown))
-      (h/is-null (h/query-by-label-text :left-icon))
-      (h/is-truthy (h/get-by-text label))
-      (h/is-null (h/query-by-label-text :right-icon))))
-
-  (h/test "on-press"
-    (let [event (h/mock-fn)
-          label "Recent"]
-      (h/render [dropdown/view {:on-press event} label])
-      (h/fire-event :press (h/get-by-text label))
-      (h/was-called event))))
@@ -1,120 +0,0 @@
-(ns quo2.components.dropdowns.dropdown.properties
-  (:require [quo2.foundations.colors :as colors]))
-
-(def backgrounds #{:photo :blur})
-
-(def sizes
-  {:size-40 {:size             40
-             :icon-size        20
-             :emoji-size       20
-             :emoji-padding    10
-             :padding-vertical 9
-             :padding-left     {:default 16 :icon 12}
-             :padding-right    12
-             :border-radius    12
-             :text-size        :paragraph-1}
-   :size-32 {:size             32
-             :icon-size        20
-             :emoji-size       20
-             :emoji-padding    6
-             :padding-vertical 5
-             :padding-left     {:default 12 :icon 8}
-             :padding-right    8
-             :border-radius    10
-             :text-size        :paragraph-1}
-   :size-24 {:size             24
-             :icon-size        12
-             :emoji-size       12
-             :emoji-padding    6
-             :padding-vertical 3
-             :padding-left     {:default 8 :icon 8}
-             :padding-right    8
-             :border-radius    8
-             :text-size        :paragraph-2}})
-
-(defn- custom-color-type
-  [customization-color]
-  {:left-icon-color    colors/white-opa-70
-   :right-icon-color   colors/white-opa-20
-   :right-icon-color-2 colors/white
-   :label-color        colors/white
-   :background-color   (colors/custom-color customization-color 50)})
-
-(def sizes-to-exclude-blur-in-photo-bg #{:size-40})
-
-(defn- grey-photo
-  [theme active? size]
-  {:left-icon-color    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
-   :right-icon-color   (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
-   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
-   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
-   :blur-overlay-color (when (and (= theme :dark) (nil? (sizes-to-exclude-blur-in-photo-bg size)))
-                         (if active? colors/neutral-80-opa-50 colors/neutral-80-opa-40))
-   :blur-type          (if (= theme :light) :light :dark)
-   :background-color   (cond
-                         (= theme :light)
-                         (if active? colors/white-opa-50 colors/white-opa-40)
-
-                         (and (= theme :dark) (sizes-to-exclude-blur-in-photo-bg size))
-                         (if active? colors/neutral-80-opa-50 colors/neutral-80-opa-40))})
-
-(defn- grey-blur
-  [theme active?]
-  {:left-icon-color    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
-   :right-icon-color   (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
-   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
-   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
-   :background-color   (if active?
-                         (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
-                         (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme))})
-
-(defn- outline-blur
-  [theme active?]
-  {:left-icon-color    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
-   :right-icon-color   (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
-   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
-   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
-   :border-color       (if active?
-                         (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
-                         (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme))})
-
-(defn- outline
-  [theme active?]
-  {:left-icon-color    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
-   :right-icon-color   (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
-   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
-   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
-   :border-color       (if active?
-                         (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
-                         (colors/theme-colors colors/neutral-30 colors/neutral-70 theme))})
-
-(defn- grey
-  [theme active?]
-  {:left-icon-color    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
-   :right-icon-color   (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
-   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
-   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
-   :background-color   (if active?
-                         (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
-                         (colors/theme-colors colors/neutral-5 colors/neutral-90 theme))})
-
-(defn- ghost
-  [theme active?]
-  {:left-icon-color    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
-   :right-icon-color   (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
-   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
-   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
-   :background-color   (when active?
-                         (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
-
-(defn get-colors
-  [{:keys [customization-color theme type state background size]}]
-  (let [active? (= state :active)]
-    (cond
-      (and (= background :photo) (= type :grey))   (grey-photo theme active? size)
-      (and (= background :blur) (= type :grey))    (grey-blur theme active?)
-      (and (= background :blur) (= type :outline)) (outline-blur theme active?)
-      (= type :outline)                            (outline theme active?)
-      (= type :grey)                               (grey theme active?)
-      (= type :ghost)                              (ghost theme active?)
-      (= type :customization)                      (custom-color-type customization-color))))
@@ -1,53 +0,0 @@
-(ns quo2.components.dropdowns.dropdown.style)
-
-(def gap 4)
-
-(def blur-view
-  {:position :absolute
-   :top      0
-   :left     0
-   :right    0
-   :bottom   0})
-
-(def left-icon
-  {:margin-right gap})
-
-(defn right-icon
-  [label-color]
-  {:color        label-color
-   :margin-right gap})
-
-(defn- add-styles-for-emoji
-  [style size emoji-padding]
-  (-> style
-      (dissoc :padding-vertical :padding-left :padding-right)
-      (assoc :width   size
-             :padding emoji-padding)))
-
-(defn root-container
-  [{:keys [size border-radius padding-vertical padding-right padding-left emoji-padding]}
-   {:keys [background-color border-color]}
-   {:keys [icon? emoji? state]}]
-  (cond-> {:height           size
-           :align-items      :center
-           :justify-content  :center
-           :flex-direction   :row
-           :padding-vertical padding-vertical
-           :padding-left     (:default padding-left)
-           :padding-right    padding-right
-           :overflow         :hidden
-           :background-color background-color
-           :border-radius    border-radius}
-
-    icon?
-    (assoc :padding-left (:icon padding-left))
-
-    emoji?
-    (add-styles-for-emoji size emoji-padding)
-
-    border-color
-    (assoc :border-color border-color
-           :border-width 1)
-
-    (= state :disabled)
-    (assoc :opacity 0.3)))
@@ -1,87 +0,0 @@
-(ns quo2.components.dropdowns.dropdown.view
-  (:require [quo2.components.dropdowns.dropdown.properties :as properties]
-            [quo2.components.dropdowns.dropdown.style :as style]
-            [quo2.components.icon :as icon]
-            [quo2.components.markdown.text :as text]
-            [quo2.foundations.customization-colors :as customization-colors]
-            [quo2.theme :as theme]
-            [react-native.blur :as blur]
-            [react-native.core :as rn]))
-
-(defn- view-internal
-  [{:keys [type size state background customization-color theme on-press icon-name icon? emoji?
-           accessibility-label]
-    :or   {type      :grey
-           size      :size-40
-           state     :default
-           icon?     false
-           emoji?    false
-           icon-name :i/placeholder}
-    :as   props}
-   text]
-  (let [{:keys [icon-size text-size emoji-size border-radius]
-         :as   size-properties} (properties/sizes size)
-        {:keys [left-icon-color right-icon-color right-icon-color-2 label-color blur-type
-                blur-overlay-color]
-         :as   colors}          (properties/get-colors props)
-        right-icon              (if (= state :active) :i/pullup :i/dropdown)
-        customization-type?     (= type :customization)
-        show-blur-background?   (and (= background :photo)
-                                     (= type :grey)
-                                     (nil? (properties/sizes-to-exclude-blur-in-photo-bg size)))]
-    [rn/pressable
-     {:accessibility-label (or accessibility-label :dropdown)
-      :disabled            (= state :disabled)
-      :on-press            on-press
-      :style               (style/root-container size-properties colors props)}
-     (when show-blur-background?
-       [blur/view
-        {:blur-radius   20
-         :blur-type     blur-type
-         :overlay-color blur-overlay-color
-         :style         style/blur-view}])
-     (when customization-type?
-       [customization-colors/overlay
-        {:customization-color customization-color
-         :theme               theme
-         :pressed?            (= state :active)
-         :border-radius       border-radius}])
-     (if emoji?
-       [rn/text
-        {:adjusts-font-size-to-fit true
-         :style                    {:font-size emoji-size}}
-        text]
-       [:<>
-        (when icon?
-          [icon/icon
-           icon-name
-           {:accessibility-label :left-icon
-            :color               left-icon-color
-            :size                icon-size
-            :container-style     style/left-icon}])
-        [text/text
-         {:size            text-size
-          :weight          :medium
-          :number-of-lines 1
-          :style           (style/right-icon label-color)}
-         text]
-        [icon/icon
-         right-icon
-         {:size                icon-size
-          :accessibility-label :right-icon
-          :color               right-icon-color
-          :color-2             right-icon-color-2}]])]))
-
-(def view
-  "Props:
-    - type:       :outline |:grey (default) | :ghost | :customization
-    - size:       :size-40 (default) | :size-32 | :size-24
-    - state:      :default (default) | :active | :disabled
-    - emoji?:     boolean
-    - icon?:      boolean
-    - background: :blur | :photo (optional)
-    - icon-name:  keyword
-    - on-press:   function
-   
-    Child: string - used as label or emoji (for emoji only)"
-  (theme/with-theme view-internal))
@@ -4,10 +4,10 @@
 (defn container-border-color
  [{:keys [state blur? theme pressed?]}]
  (let [default-color (if blur?
-                        (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
+                        colors/neutral-80-opa-5
                        (colors/theme-colors colors/neutral-30 colors/neutral-70 theme))
        active-color  (if blur?
-                        (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
+                        colors/neutral-80-opa-10
                        (colors/theme-colors colors/neutral-40 colors/neutral-60 theme))]
    (condp = state
      :disabled default-color
@@ -20,7 +20,7 @@
       [preview-list/view
        {:type      :network
         :list-size (count networks)
-         :size      :size-20}
+         :size      :size/s-20}
        networks]])))

 (def view (quo.theme/with-theme internal-view))
@@ -0,0 +1,264 @@
+(ns quo2.components.dropdowns.old-button-style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def blur-view
+  {:position :absolute
+   :top      0
+   :left     0
+   :right    0
+   :bottom   0})
+
+(defn before-icon-style
+  [{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
+           icon-size]}]
+  (merge
+   {:margin-left     (or (get override-margins :left)
+                         (if (= size 40) 12 8))
+    :margin-right    (or (get override-margins :right) 4)
+    :align-items     :center
+    :justify-content :center}
+   (when icon-container-size
+     {:width  icon-container-size
+      :height icon-container-size})
+   (when icon-background-color
+     {:background-color icon-background-color})
+   (when icon-container-rounded?
+     {:border-radius (/ (or icon-container-size icon-size) 2)})))
+
+(defn after-icon-style
+  [{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
+           icon-size]}]
+  (merge
+   {:margin-left     (or (get override-margins :left) 4)
+    :margin-right    (or (get override-margins :right)
+                         (if (= size 40) 12 8))
+    :align-items     :center
+    :justify-content :center}
+   (when icon-container-size
+     {:width  icon-container-size
+      :height icon-container-size})
+   (when icon-background-color
+     {:background-color icon-background-color})
+   (when icon-container-rounded?
+     {:border-radius (/ (or icon-container-size icon-size) 2)})))
+
+(defn themes
+  [customization-color]
+  {:light
+   {:primary         {:icon-color           colors/white
+                      :icon-secondary-color colors/white-opa-70
+                      :label-color          colors/white
+                      :background-color     {:default  (colors/custom-color customization-color 50)
+                                             :pressed  (colors/custom-color customization-color 60)
+                                             :disabled (colors/custom-color customization-color 50)}}
+    :secondary       {:icon-color       colors/primary-50
+                      :label-color      colors/primary-50
+                      :background-color {:default  colors/primary-50-opa-20
+                                         :pressed  colors/primary-50-opa-40
+                                         :disabled colors/primary-50-opa-20}}
+    :grey            {:icon-color           colors/neutral-100
+                      :icon-secondary-color colors/neutral-50
+                      :label-color          colors/neutral-100
+                      :background-color     {:default  colors/neutral-10
+                                             :pressed  colors/neutral-20
+                                             :disabled colors/neutral-10}}
+    :dark-grey       {:icon-color           colors/neutral-100
+                      :icon-secondary-color colors/neutral-50
+                      :label-color          colors/neutral-100
+                      :background-color     {:default  colors/neutral-20
+                                             :pressed  colors/neutral-30
+                                             :disabled colors/neutral-20}}
+    :outline         {:icon-color           colors/neutral-50
+                      :icon-secondary-color colors/neutral-50
+                      :label-color          colors/neutral-100
+                      :border-color         {:default  colors/neutral-30
+                                             :pressed  colors/neutral-40
+                                             :disabled colors/neutral-30}}
+    :ghost           {:icon-color           colors/neutral-50
+                      :icon-secondary-color colors/neutral-50
+                      :label-color          colors/neutral-100
+                      :background-color     {:pressed colors/neutral-10}}
+    :danger          {:icon-color           colors/white
+                      :icon-secondary-color colors/white-opa-70
+                      :label-color          colors/white
+                      :background-color     {:default  colors/danger-50
+                                             :pressed  colors/danger-60
+                                             :disabled colors/danger-50}}
+    :positive        {:icon-color           colors/white
+                      :icon-secondary-color colors/white-opa-70
+                      :label-color          colors/white
+                      :background-color     {:default  colors/success-50
+                                             :pressed  colors/success-60
+                                             :disabled colors/success-50-opa-30}}
+    :photo-bg        {:icon-color           colors/neutral-100
+                      :icon-secondary-color colors/neutral-80-opa-40
+                      :label-color          colors/neutral-100
+                      :background-color     {:default  colors/white-opa-40
+                                             :pressed  colors/white-opa-50
+                                             :disabled colors/white-opa-40}}
+    :blur-bg         {:icon-color           colors/neutral-100
+                      :icon-secondary-color colors/neutral-80-opa-40
+                      :label-color          colors/neutral-100
+                      :background-color     {:default  colors/neutral-80-opa-5
+                                             :pressed  colors/neutral-80-opa-10
+                                             :disabled colors/neutral-80-opa-5}}
+    :blurred         {:icon-color            colors/neutral-100
+                      :icon-secondary-color  colors/neutral-100
+                      :icon-background-color {:default colors/neutral-20
+                                              :blurred colors/neutral-80-opa-10}
+                      :label-color           colors/neutral-100
+                      :background-color      {:default  colors/neutral-10
+                                              :pressed  colors/neutral-10
+                                              :disabled colors/neutral-10-opa-10-blur}
+                      :blur-overlay-color    colors/neutral-10-opa-40-blur
+                      :blur-type             :light}
+    :blur-bg-outline {:icon-color           colors/neutral-100
+                      :icon-secondary-color colors/neutral-80-opa-40
+                      :label-color          colors/neutral-100
+                      :border-color         {:default  colors/neutral-80-opa-10
+                                             :pressed  colors/neutral-80-opa-20
+                                             :disabled colors/neutral-80-opa-10}}
+    :shell           {:icon-color       colors/white
+                      :label-color      colors/white
+                      :background-color {:default  colors/neutral-95
+                                         :pressed  colors/neutral-95
+                                         :disabled colors/neutral-95}}}
+   :dark
+   {:primary         {:icon-color           colors/white
+                      :icon-secondary-color colors/white-opa-70
+                      :label-color          colors/white
+                      :background-color     {:default  (colors/custom-color customization-color 60)
+                                             :pressed  (colors/custom-color customization-color 50)
+                                             :disabled (colors/custom-color customization-color 60)}}
+    :secondary       {:icon-color       colors/primary-50
+                      :label-color      colors/primary-50
+                      :background-color {:default  colors/primary-50-opa-20
+                                         :pressed  colors/primary-50-opa-30
+                                         :disabled colors/primary-50-opa-20}}
+    :grey            {:icon-color           colors/white
+                      :icon-secondary-color colors/neutral-40
+                      :label-color          colors/white
+                      :background-color     {:default  colors/neutral-90
+                                             :pressed  colors/neutral-60
+                                             :disabled colors/neutral-90}}
+    :dark-grey       {:icon-color           colors/white
+                      :icon-secondary-color colors/neutral-40
+                      :label-color          colors/white
+                      :background-color     {:default  colors/neutral-70
+                                             :pressed  colors/neutral-60
+                                             :disabled colors/neutral-70}}
+    :outline         {:icon-color           colors/neutral-40
+                      :icon-secondary-color colors/neutral-40
+                      :label-color          colors/white
+                      :border-color         {:default  colors/neutral-70
+                                             :pressed  colors/neutral-60
+                                             :disabled colors/neutral-70}}
+    :ghost           {:icon-color           colors/neutral-40
+                      :icon-secondary-color colors/neutral-40
+                      :label-color          colors/white
+                      :background-color     {:pressed colors/neutral-80}}
+    :danger          {:icon-color           colors/white
+                      :icon-secondary-color colors/white-opa-70
+                      :label-color          colors/white
+                      :background-color     {:default  colors/danger-60
+                                             :pressed  colors/danger-50
+                                             :disabled colors/danger-60}}
+    :positive        {:icon-color           colors/white
+                      :icon-secondary-color colors/white-opa-70
+                      :label-color          colors/white
+                      :background-color     {:default  colors/success-60
+                                             :pressed  colors/success-50
+                                             :disabled colors/success-60-opa-30}}
+    :photo-bg        {:icon-color           colors/white
+                      :icon-secondary-color colors/neutral-30
+                      :label-color          colors/white
+                      :background-color     {:default  colors/neutral-80-opa-40
+                                             :pressed  colors/neutral-80-opa-50
+                                             :disabled colors/neutral-80-opa-40}}
+    :blur-bg         {:icon-color           colors/white
+                      :icon-secondary-color colors/white-opa-70
+                      :label-color          colors/white
+                      :background-color     {:default  colors/white-opa-5
+                                             :pressed  colors/white-opa-10
+                                             :disabled colors/white-opa-5}}
+    :blurred         {:icon-color            colors/white
+                      :icon-secondary-color  colors/white
+                      :icon-background-color {:default colors/neutral-80
+                                              :blurred colors/white-opa-10}
+                      :label-color           colors/white
+                      :background-color      {:default  colors/neutral-90
+                                              :pressed  colors/neutral-90
+                                              :disabled colors/neutral-90-opa-10-blur}
+                      :blur-overlay-color    colors/neutral-80-opa-40
+                      :blur-type             :dark}
+    :blur-bg-outline {:icon-color           colors/white
+                      :icon-secondary-color colors/white-opa-40
+                      :label-color          colors/white
+                      :border-color         {:default  colors/white-opa-10
+                                             :pressed  colors/white-opa-20
+                                             :disabled colors/white-opa-5}}
+    :shell           {:icon-color       colors/white
+                      :label-color      colors/white
+                      :background-color {:default colors/neutral-95}}}})
+
+(defn shape-style-container
+  [type icon size]
+  {:height        size
+   :border-radius (if (and icon (#{:primary :secondary :danger} type))
+                    24
+                    (case size
+                      56 12
+                      40 12
+                      32 10
+                      24 8))})
+
+(defn style-container
+  [{:keys [type size disabled background-color border-color icon above width before after blur-active?]}]
+  (merge {:height             size
+          :align-items        :center
+          :justify-content    :center
+          :flex-direction     (if above :column :row)
+          :padding-horizontal (when-not (or icon before after)
+                                (case size
+                                  56 16
+                                  40 16
+                                  32 12
+                                  24 8))
+          :padding-left       (when-not (or icon before)
+                                (case size
+                                  56 16
+                                  40 16
+                                  32 12
+                                  24 8))
+          :padding-right      (when-not (or icon after)
+                                (case size
+                                  56 16
+                                  40 16
+                                  32 12
+                                  24 8))
+          :padding-top        (when-not (or icon before after)
+                                (case size
+                                  56 0
+                                  40 9
+                                  32 5
+                                  24 3))
+          :padding-bottom     (when-not (or icon before after)
+                                (case size
+                                  56 0
+                                  40 9
+                                  32 5
+                                  24 4))
+          :overflow           :hidden}
+         (when (or (and (= type :blurred) (not blur-active?))
+                   (not= type :blurred))
+           {:background-color background-color})
+         (shape-style-container type icon size)
+         (when width
+           {:width width})
+         (when icon
+           {:width size})
+         (when border-color
+           {:border-color border-color
+            :border-width 1})
+         (when disabled
+           {:opacity 0.3})))
@@ -0,0 +1,138 @@
+(ns quo2.components.dropdowns.old-button-view
+  (:require [quo2.components.icon :as quo2.icons]
+            [quo2.components.markdown.text :as text]
+            [quo2.theme :as theme]
+            [react-native.core :as rn]
+            [react-native.blur :as blur]
+            [reagent.core :as reagent]
+            [quo2.components.dropdowns.old-button-style :as style]))
+
+(defn- button-internal
+  "with label
+   [button opts \"label\"]
+   opts
+   {:type   :primary/:secondary/:grey/:dark-grey/:outline/:ghost/
+            :danger/:photo-bg/:blur-bg/:blur-bg-outline/:shell/:community
+    :size   40 [default] /32/24
+    :icon   true/false
+    :community-color '#FFFFFF'
+    :community-text-color '#000000'
+    :before :icon-keyword
+    :after  :icon-keyword}
+
+   only icon
+   [button {:icon true} :i/close-circle]"
+  [_ _]
+  (let [pressed-in (reagent/atom false)]
+    (fn
+      [{:keys [on-press disabled type size before after above icon-secondary-no-color
+               width customization-color theme override-background-color pressed
+               on-long-press accessibility-label icon icon-no-color style inner-style test-ID
+               blur-active? override-before-margins override-after-margins icon-size icon-container-size
+               icon-container-rounded?]
+        :or   {type                :primary
+               size                40
+               customization-color :primary
+               blur-active?        true}}
+       children]
+      (let [{:keys [icon-color icon-secondary-color background-color label-color border-color blur-type
+                    blur-overlay-color icon-background-color]}
+            (get-in (style/themes customization-color)
+                    [theme type])
+            state (cond disabled                 :disabled
+                        (or @pressed-in pressed) :pressed
+                        :else                    :default)
+            blur-state (if blur-active? :blurred :default)
+            icon-size (or icon-size (when (= 24 size) 12))
+            icon-secondary-color (or icon-secondary-color icon-color)]
+        [rn/touchable-without-feedback
+         (merge {:test-ID             test-ID
+                 :disabled            disabled
+                 :accessibility-label accessibility-label
+                 :on-press-in         #(reset! pressed-in true)
+                 :on-press-out        #(reset! pressed-in nil)}
+                (when on-press
+                  {:on-press on-press})
+                (when on-long-press
+                  {:on-long-press on-long-press}))
+         [rn/view
+          {:style (merge
+                   (style/shape-style-container type icon size)
+                   {:width width}
+                   style)}
+          [rn/view
+           {:style (merge
+                    (style/style-container {:type type
+                                            :size size
+                                            :disabled disabled
+                                            :background-color
+                                            (or override-background-color (get background-color state))
+                                            :border-color
+                                            (get border-color state)
+                                            :icon icon
+                                            :above above
+                                            :width width
+                                            :before before
+                                            :after after
+                                            :blur-active? blur-active?})
+                    (when (= state :pressed) {:opacity 0.9})
+                    inner-style)}
+           (when (and (= type :blurred)
+                      blur-active?)
+             [blur/view
+              {:blur-radius   20
+               :blur-type     blur-type
+               :overlay-color blur-overlay-color
+               :style         style/blur-view}])
+           (when above
+             [rn/view
+              [quo2.icons/icon above
+               {:container-style {:margin-bottom 2}
+                :color           icon-secondary-color
+                :size            icon-size}]])
+           (when before
+             [rn/view
+              {:style (style/before-icon-style
+                       {:override-margins        override-before-margins
+                        :size                    size
+                        :icon-container-size     icon-container-size
+                        :icon-background-color   (get icon-background-color blur-state)
+                        :icon-container-rounded? icon-container-rounded?
+                        :icon-size               icon-size})}
+              [quo2.icons/icon before
+               {:color icon-secondary-color
+                :size  icon-size}]])
+           [rn/view
+            (cond
+              (or icon icon-no-color)
+              [quo2.icons/icon children
+               {:color    icon-color
+                :no-color icon-no-color
+                :size     icon-size}]
+
+              (string? children)
+              [text/text
+               {:size            (when (#{56 24} size) :paragraph-2)
+                :weight          :medium
+                :number-of-lines 1
+                :style           {:color label-color}}
+
+               children]
+
+              (vector? children)
+              children)]
+           (when after
+             [rn/view
+              {:style (style/after-icon-style
+                       {:override-margins        override-after-margins
+                        :size                    size
+                        :icon-container-size     icon-container-size
+                        :icon-background-color   (get icon-background-color blur-state)
+                        :icon-container-rounded? icon-container-rounded?
+                        :icon-size               icon-size})}
+              [quo2.icons/icon after
+               {:no-color icon-secondary-no-color
+                :color    icon-secondary-color
+                :size     icon-size}]])]]]))))
+
+(def button (theme/with-theme button-internal))
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Volodymyr Kozieiev	f86483d7cf	fix keyword renaming performance (#17291 )	2023-09-15 12:03:54 +01:00
Flávio Fraschetti	f6ac99647e	update status-go to v0.166.9+hotfix.1	2023-09-13 12:19:44 +01:00
Flávio Fraschetti	655a6fa124	Bump release to 1.25.0	2023-09-11 14:19:05 +01:00