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
325 changed files with 2891 additions and 4714 deletions
@@ -196,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 -->
@@ -360,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

@@ -368,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
@@ -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
@@ -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",
@@ -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 {}
@@ -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))}]]))
@@ -7,21 +7,21 @@
            [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}}]
@@ -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)]
@@ -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
@@ -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
@@ -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,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))
@@ -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))
@@ -3,7 +3,6 @@
            [quo2.components.buttons.button.view :as button]
            [quo2.components.markdown.text :as text]
            [quo2.foundations.colors :as colors]
-            [quo2.theme :as quo.theme]
            [react-native.core :as rn]
            [react-native.reanimated :as reanimated]
            [reagent.core :as reagent]))
@@ -11,12 +10,11 @@
 (def header-height 56)

 (defn header-wrapper-style
-  [{:keys [height border-bottom background theme]}]
+  [{:keys [height border-bottom background]}]
  (merge
   {:background-color (colors/theme-colors
                       colors/neutral-5
-                       colors/neutral-95
-                       theme)
+                       colors/neutral-95)
    :height           height}
   (when background
     {:background-color background})
@@ -24,8 +22,7 @@
     {:border-bottom-width 1
      :border-bottom-color (colors/theme-colors
                            colors/neutral-5
-                            colors/neutral-95
-                            theme)})))
+                            colors/neutral-95)})))

 (def absolute-fill
  {:position :absolute
@@ -132,7 +129,7 @@
             :size            :large}
            title])])

-(defn- header-internal
+(defn header
  [{:keys [left-width right-width]}]
  (let [layout        (reagent/atom {:left  {:width  (or left-width 8)
                                             :height header-height}
@@ -156,7 +153,7 @@
      [{:keys [left-accessories left-component border-bottom
               right-accessories right-component insets get-layout
               title subtitle title-component style title-align
-               background theme]
+               background]
        :or   {title-align   :center
               border-bottom false}}]
      (let [status-bar-height (get insets :top 0)
@@ -164,8 +161,7 @@
        [reanimated/view
         {:style (header-wrapper-style {:height        height
                                        :background    background
-                                        :border-bottom border-bottom
-                                        :theme         theme})}
+                                        :border-bottom border-bottom})}
         [rn/view
          {:pointer-events :box-none
           :height         status-bar-height}]
@@ -196,6 +192,7 @@
               :subtitle    subtitle
               :title-align title-align
               :component   title-component}]]
+
            [rn/view
             {:style          right-style
              :on-layout      (handle-layout :right get-layout)
@@ -203,5 +200,3 @@
             [header-actions
              {:accessories right-accessories
               :component   right-component}]]]]]]))))
-
-(def header (quo.theme/with-theme header-internal))
@@ -1,161 +0,0 @@
-(ns quo2.components.inputs.address-input.component-spec
-  (:require [quo2.components.inputs.address-input.view :as address-input]
-            [test-helpers.component :as h]
-            [react-native.clipboard :as clipboard]
-            [quo2.foundations.colors :as colors]))
-
-(def ens-regex #"^(?=.{5,255}$)([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.[a-zA-Z]{2,}$")
-
-(h/describe "Address input"
-  (h/test "default render"
-    (with-redefs [clipboard/get-string #(% "")]
-      (h/render [address-input/address-input {:ens-regex ens-regex}])
-      (h/is-truthy (h/get-by-label-text :address-text-input))))
-
-  (h/test "on focus with blur? false"
-    (with-redefs [clipboard/get-string #(% "")]
-      (h/render [address-input/address-input {:ens-regex ens-regex}])
-      (h/fire-event :on-focus (h/get-by-label-text :address-text-input))
-      (h/has-prop (h/get-by-label-text :address-text-input) :placeholder-text-color colors/neutral-40)))
-
-  (h/test "on focus with blur? true"
-    (with-redefs [clipboard/get-string #(% "")]
-      (h/render [address-input/address-input
-                 {:blur?     true
-                  :ens-regex ens-regex}])
-      (h/fire-event :on-focus (h/get-by-label-text :address-text-input))
-      (h/has-prop (h/get-by-label-text :address-text-input)
-                  :placeholder-text-color
-                  colors/neutral-80-opa-40)))
-
-  (h/test "scanned value is properly set"
-    (let [on-change-text (h/mock-fn)
-          scanned-value  "scanned-value"]
-      (with-redefs [clipboard/get-string #(% "")]
-        (h/render [address-input/address-input
-                   {:scanned-value  scanned-value
-                    :on-change-text on-change-text
-                    :ens-regex      ens-regex}])
-        (h/wait-for #(h/is-truthy (h/get-by-label-text :clear-button)))
-        (h/was-called-with on-change-text scanned-value)
-        (h/has-prop (h/get-by-label-text :address-text-input) :default-value scanned-value))))
-
-  (h/test "clear icon is shown when input has text"
-    (with-redefs [clipboard/get-string #(% "")]
-      (h/render [address-input/address-input
-                 {:scanned-value "scanned value"
-                  :ens-regex     ens-regex}])
-      (h/wait-for #(h/is-truthy (h/get-by-label-text :clear-button-container)))
-      (h/wait-for #(h/is-truthy (h/get-by-label-text :clear-button)))))
-
-  (h/test "on blur with text and blur? false"
-    (with-redefs [clipboard/get-string #(% "")]
-      (h/render [address-input/address-input
-                 {:scanned-value "scanned value"
-                  :ens-regex     ens-regex}])
-      (h/wait-for #(h/is-truthy (h/get-by-label-text :clear-button)))
-      (h/fire-event :on-focus (h/get-by-label-text :address-text-input))
-      (h/fire-event :on-blur (h/get-by-label-text :address-text-input))
-      (h/has-prop (h/get-by-label-text :address-text-input) :placeholder-text-color colors/neutral-30)))
-
-  (h/test "on blur with text blur? true"
-    (with-redefs [clipboard/get-string #(% "")]
-      (h/render [address-input/address-input
-                 {:scanned-value "scanned value"
-                  :blur?         true
-                  :ens-regex     ens-regex}])
-      (h/wait-for #(h/is-truthy (h/get-by-label-text :clear-button)))
-      (h/fire-event :on-focus (h/get-by-label-text :address-text-input))
-      (h/fire-event :on-blur (h/get-by-label-text :address-text-input))
-      (h/has-prop (h/get-by-label-text :address-text-input)
-                  :placeholder-text-color
-                  colors/neutral-80-opa-20)))
-
-  (h/test "on blur with no text and blur? false"
-    (with-redefs [clipboard/get-string #(% "")]
-      (h/render [address-input/address-input {:ens-regex ens-regex}])
-      (h/fire-event :on-focus (h/get-by-label-text :address-text-input))
-      (h/fire-event :on-blur (h/get-by-label-text :address-text-input))
-      (h/has-prop (h/get-by-label-text :address-text-input) :placeholder-text-color colors/neutral-40)))
-
-  (h/test "on blur with no text blur? true"
-    (with-redefs [clipboard/get-string #(% "")]
-      (h/render [address-input/address-input
-                 {:blur?     true
-                  :ens-regex ens-regex}])
-      (h/fire-event :on-focus (h/get-by-label-text :address-text-input))
-      (h/fire-event :on-blur (h/get-by-label-text :address-text-input))
-      (h/has-prop (h/get-by-label-text :address-text-input)
-                  :placeholder-text-color
-                  colors/neutral-80-opa-40)))
-
-  (h/test "on-clear is called"
-    (let [on-clear (h/mock-fn)]
-      (with-redefs [clipboard/get-string #(% "")]
-        (h/render [address-input/address-input
-                   {:scanned-value "scanned value"
-                    :on-clear      on-clear
-                    :ens-regex     ens-regex}])
-        (h/wait-for #(h/is-truthy (h/get-by-label-text :clear-button)))
-        (h/fire-event :press (h/get-by-label-text :clear-button))
-        (h/was-called on-clear))))
-
-  (h/test "on-focus is called"
-    (let [on-focus (h/mock-fn)]
-      (with-redefs [clipboard/get-string #(% "")]
-        (h/render [address-input/address-input {:on-focus on-focus}])
-        (h/fire-event :on-focus (h/get-by-label-text :address-text-input))
-        (h/was-called on-focus))))
-
-  (h/test "on-blur is called"
-    (let [on-blur (h/mock-fn)]
-      (with-redefs [clipboard/get-string #(% "")]
-        (h/render [address-input/address-input
-                   {:on-blur   on-blur
-                    :ens-regex ens-regex}])
-        (h/fire-event :on-blur (h/get-by-label-text :address-text-input))
-        (h/was-called on-blur))))
-
-  (h/test "on-scan is called"
-    (let [on-scan (h/mock-fn)]
-      (with-redefs [clipboard/get-string #(% "")]
-        (h/render [address-input/address-input {:on-scan on-scan}])
-        (h/wait-for #(h/is-truthy (h/get-by-label-text :scan-button)))
-        (h/fire-event :press (h/get-by-label-text :scan-button))
-        (h/was-called on-scan))))
-
-  (h/test "paste from clipboard"
-    (let [clipboard "clipboard"]
-      (with-redefs [clipboard/get-string #(% clipboard)]
-        (h/render [address-input/address-input {:ens-regex ens-regex}])
-        (h/wait-for #(h/is-truthy (h/get-by-label-text :paste-button)))
-        (h/fire-event :press (h/get-by-label-text :paste-button))
-        (h/wait-for #(h/is-truthy (h/get-by-label-text :clear-button)))
-        (h/has-prop (h/get-by-label-text :address-text-input) :default-value clipboard))))
-
-  (h/test "ENS loading state and call on-detect-ens"
-    (let [clipboard     "test.eth"
-          on-detect-ens (h/mock-fn)]
-      (with-redefs [clipboard/get-string #(% clipboard)]
-        (h/render [address-input/address-input
-                   {:on-detect-ens on-detect-ens
-                    :ens-regex     ens-regex}])
-        (h/wait-for #(h/is-truthy (h/get-by-label-text :paste-button)))
-        (h/fire-event :press (h/get-by-label-text :paste-button))
-        (h/wait-for #(h/is-falsy (h/get-by-label-text :clear-button)))
-        (h/wait-for #(h/is-truthy (h/get-by-label-text :loading-button-container)))
-        (h/was-called on-detect-ens))))
-
-  (h/test "ENS valid state and call on-detect-ens"
-    (let [clipboard     "test.eth"
-          on-detect-ens (h/mock-fn)]
-      (with-redefs [clipboard/get-string #(% clipboard)]
-        (h/render [address-input/address-input
-                   {:on-detect-ens on-detect-ens
-                    :valid-ens?    true
-                    :ens-regex     ens-regex}])
-        (h/wait-for #(h/is-truthy (h/get-by-label-text :paste-button)))
-        (h/fire-event :press (h/get-by-label-text :paste-button))
-        (h/wait-for #(h/is-falsy (h/get-by-label-text :clear-button)))
-        (h/wait-for #(h/is-truthy (h/get-by-label-text :positive-button-container)))
-        (h/was-called on-detect-ens)))))
@@ -1,40 +0,0 @@
-(ns quo2.components.inputs.address-input.style
-  (:require [quo2.foundations.colors :as colors]
-            [quo2.components.markdown.text :as text]
-            [react-native.platform :as platform]))
-
-(def container
-  {:padding-horizontal 20
-   :padding-top        8
-   :padding-bottom     16
-   :height             48
-   :flex-direction     :row
-   :align-items        :flex-start})
-
-(def buttons-container
-  {:flex-direction :row
-   :align-items    :center
-   :padding-top    (when platform/android? 2)})
-
-(def clear-icon-container
-  {:justify-content :center
-   :align-items     :center
-   :padding-top     (if platform/ios? 6 2)
-   :height          24
-   :width           20})
-
-(defn input-text
-  [theme]
-  (assoc (text/text-style {:size   :paragraph-1
-                           :weight :monospace})
-         :flex         1
-         :color        (colors/theme-colors colors/neutral-100 colors/white theme)
-         :margin-top   (if platform/ios? 0 -4)
-         :margin-right 8
-         :height       (if platform/ios? 24 40)))
-
-(defn accessory-button
-  [blur? theme]
-  {:border-color (if blur?
-                   (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
-                   (colors/theme-colors colors/neutral-30 colors/neutral-70 theme))})
@@ -1,163 +0,0 @@
-(ns quo2.components.inputs.address-input.view
-  (:require [react-native.core :as rn]
-            [react-native.clipboard :as clipboard]
-            [quo2.theme :as quo.theme]
-            [quo2.foundations.colors :as colors]
-            [quo2.components.icon :as icon]
-            [quo2.components.buttons.button.view :as button]
-            [quo2.components.inputs.address-input.style :as style]
-            [utils.i18n :as i18n]
-            [reagent.core :as reagent]
-            [react-native.platform :as platform]))
-
-(defn- icon-color
-  [blur? theme]
-  (if blur?
-    (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 theme)
-    (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)))
-
-(defn- clear-button
-  [{:keys [on-press blur? theme]}]
-  [rn/touchable-opacity
-   {:accessibility-label :clear-button
-    :style               style/clear-icon-container
-    :on-press            on-press}
-   [icon/icon :i/clear
-    {:color (icon-color blur? theme)
-     :size  20}]])
-
-(defn- loading-icon
-  [blur? theme]
-  [rn/view {:style style/clear-icon-container}
-   [icon/icon :i/loading
-    {:color (icon-color blur? theme)
-     :size  20}]])
-
-(defn- positive-state-icon
-  [theme]
-  [rn/view {:style style/clear-icon-container}
-   [icon/icon :i/positive-state
-    {:color (colors/theme-colors (colors/custom-color :success 50)
-                                 (colors/custom-color :success 60)
-                                 theme)
-     :size  20}]])
-
-(defn- get-placeholder-text-color
-  [status theme blur?]
-  (cond
-    (and (= status :default) blur?)
-    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 theme)
-    (and (= status :default) (not blur?))
-    (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
-    (and (not= status :default) blur?)
-    (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
-    (and (not= status :default) (not blur?))
-    (colors/theme-colors colors/neutral-30 colors/neutral-60 theme)))
-
-(defn- f-address-input-internal
-  []
-  (let [status   (reagent/atom :default)
-        value    (reagent/atom "")
-        focused? (atom false)]
-    (fn [{:keys [scanned-value theme blur? on-change-text on-blur on-focus on-clear on-scan on-detect-ens
-                 ens-regex
-                 valid-ens?]}]
-      (let [on-change              (fn [text]
-                                     (let [ens? (boolean (re-matches ens-regex text))]
-                                       (if (> (count text) 0)
-                                         (reset! status :typing)
-                                         (reset! status :active))
-                                       (reset! value text)
-                                       (when on-change-text
-                                         (on-change-text text))
-                                       (when (and ens? on-detect-ens)
-                                         (reset! status :loading)
-                                         (on-detect-ens text))))
-            on-paste               (fn []
-                                     (clipboard/get-string
-                                      (fn [clipboard]
-                                        (when-not (empty? clipboard)
-                                          (on-change clipboard)
-                                          (reset! value clipboard)))))
-            on-clear               (fn []
-                                     (reset! value "")
-                                     (reset! status (if @focused? :active :default))
-                                     (when on-clear
-                                       (on-clear)))
-            on-scan                #(when on-scan
-                                      (on-scan))
-            on-focus               (fn []
-                                     (when (= (count @value) 0)
-                                       (reset! status :active))
-                                     (reset! focused? true)
-                                     (when on-focus (on-focus)))
-            on-blur                (fn []
-                                     (when (= @status :active)
-                                       (reset! status :default))
-                                     (reset! focused? false)
-                                     (when on-blur (on-blur)))
-            placeholder-text-color (get-placeholder-text-color @status theme blur?)]
-        (rn/use-effect (fn []
-                         (when-not (empty? scanned-value)
-                           (on-change scanned-value)))
-                       [scanned-value])
-        [rn/view {:style style/container}
-         [rn/text-input
-          {:accessibility-label    :address-text-input
-           :style                  (style/input-text theme)
-           :placeholder            (i18n/label :t/name-ens-or-address)
-           :placeholder-text-color placeholder-text-color
-           :default-value          @value
-           :auto-complete          (when platform/ios? :none)
-           :auto-capitalize        :none
-           :auto-correct           false
-           :keyboard-appearance    (quo.theme/theme-value :light :dark theme)
-           :on-focus               on-focus
-           :on-blur                on-blur
-           :on-change-text         on-change}]
-         (when (or (= @status :default)
-                   (= @status :active))
-           [rn/view
-            {:style               style/buttons-container
-             :accessibility-label :paste-scan-buttons-container}
-            [button/button
-             {:accessibility-label :paste-button
-              :type                :outline
-              :size                24
-              :container-style     {:margin-right 8}
-              :inner-style         (style/accessory-button blur? theme)
-              :on-press            on-paste}
-             (i18n/label :t/paste)]
-            [button/button
-             {:accessibility-label :scan-button
-              :icon-only?          true
-              :type                :outline
-              :size                24
-              :inner-style         (style/accessory-button blur? theme)
-              :on-press            on-scan}
-             :main-icons/scan]])
-         (when (= @status :typing)
-           [rn/view
-            {:style               style/buttons-container
-             :accessibility-label :clear-button-container}
-            [clear-button
-             {:on-press on-clear
-              :blur?    blur?
-              :theme    theme}]])
-         (when (and (= @status :loading) (not valid-ens?))
-           [rn/view
-            {:style               style/buttons-container
-             :accessibility-label :loading-button-container}
-            [loading-icon blur? theme]])
-         (when (and (= @status :loading) valid-ens?)
-           [rn/view
-            {:style               style/buttons-container
-             :accessibility-label :positive-button-container}
-            [positive-state-icon theme]])]))))
-
-(defn address-input-internal
-  [props]
-  [:f> f-address-input-internal props])
-
-(def address-input
-  (quo.theme/with-theme address-input-internal))
@@ -25,7 +25,7 @@
  (colors/alpha (if blur?
                  (colors/theme-colors colors/neutral-100 colors/white theme)
                  (colors/custom-color customization-color
-                                       (if (= :dark theme) 60 50)))
+                                       (if (or (= :dark theme) colors/dark?) 60 50)))
                (if platform/ios? 1 0.2)))

 (def text-input-container {:flex 1})
@@ -5,7 +5,7 @@
 (def keycard-chip-height 28)

 (defn card-container
-  [locked? theme]
+  [locked?]
  {:overflow         :hidden
   :height           keycard-height
   :align-items      :flex-start
@@ -13,26 +13,22 @@
   :border-width     1
   :border-color     (if locked?
                       colors/white-opa-5
-                       (colors/theme-colors colors/neutral-20 colors/neutral-80 theme))
+                       (colors/theme-colors colors/neutral-20 colors/neutral-80))
   :border-style     :solid
   :border-radius    16
   :padding          16
   :background-color (if locked?
-                       (colors/theme-colors colors/danger colors/danger-opa-40 theme)
-                       (colors/theme-colors colors/neutral-5 colors/neutral-90 theme))})
+                       (colors/theme-colors colors/danger colors/danger-opa-40)
+                       (colors/theme-colors colors/neutral-5 colors/neutral-90))})

 (defn keycard-logo
-  [locked? theme]
-  {:tint-color (if locked?
-                 colors/white
-                 (colors/theme-colors colors/neutral-100 colors/white theme))})
+  [locked?]
+  {:tint-color (if locked? colors/white (colors/theme-colors colors/neutral-100 colors/white))})

 (defn keycard-watermark
-  [locked? theme]
+  [locked?]
  {:position   :absolute
-   :tint-color (if locked?
-                 colors/white-opa-5
-                 (colors/theme-colors colors/neutral-100 colors/white theme))
+   :tint-color (if locked? colors/white-opa-5 (colors/theme-colors colors/neutral-100 colors/white))
   :align-self :center
   :height     280.48
   :transform  [{:rotate "-30deg"} {:translateY -30}]
@@ -4,30 +4,28 @@
            [quo2.components.tags.tag :as tag]
            [quo2.foundations.colors :as colors]
            [quo2.foundations.resources :as resources]
-            [utils.i18n :as i18n]
-            [quo2.theme :as quo.theme]))
+            [utils.i18n :as i18n]))

-(defn- view-internal
+(defn keycard
  "This component based on the following properties:
  - :holder-name - Can be owner's name. Default is Empty
  - :locked? - Boolean to specify whether the keycard is locked or not
-  - :theme :light/:dark
  "
-  [{:keys [holder-name locked? theme]}]
+  [{:keys [holder-name locked?]}]
  (let [label (if (boolean holder-name)
                (i18n/label :t/user-keycard {:name holder-name})
                (i18n/label :t/empty-keycard))]
-    [rn/view {:style (style/card-container locked? theme)}
+    [rn/view {:style (style/card-container locked?)}
     [rn/image
      {:source (resources/get-image :keycard-logo)
-       :style  (style/keycard-logo locked? theme)}]
+       :style  (style/keycard-logo locked?)}]
     [rn/image
      {:source (resources/get-image
-                (if (or locked? (= :dark theme)) :keycard-chip-dark :keycard-chip-light))
+                (if (or locked? (colors/dark?)) :keycard-chip-dark :keycard-chip-light))
       :style  style/keycard-chip}]
     [rn/image
      {:source (resources/get-image :keycard-watermark)
-       :style  (style/keycard-watermark locked? theme)}]
+       :style  (style/keycard-watermark locked?)}]
     [tag/tag
      {:size                32
       :type                (when locked? :icon)
@@ -38,5 +36,3 @@
       :accessibility-label :holder-name
       :icon-color          colors/white-70-blur
       :override-theme      (when locked? :dark)}]]))
-
-(def keycard (quo.theme/with-theme view-internal))
@@ -2,23 +2,19 @@
  (:require [quo2.foundations.colors :as colors]))

 (defn container
-  [{:keys [state blur? theme]}]
+  [state theme]
  (let [light-bg     (if (= state :default) colors/neutral-2_5 colors/neutral-5)
        dark-bg      (if (= state :default) colors/neutral-80-opa-40 colors/neutral-80-opa-60)
-        blur-bg      (if (= state :default) colors/white-opa-5 colors/white-opa-10)
        light-border (if (= state :default) colors/neutral-10 colors/neutral-20)
        dark-border  (if (= state :default) colors/neutral-80 colors/neutral-70)]
-    {:height             48
+    {:width              319
+     :height             48
     :border-radius      12
-     :background-color   (if blur? blur-bg (colors/theme-colors light-bg dark-bg theme))
-     :border-width       (if blur? 0 1)
+     :background-color   (colors/theme-colors light-bg dark-bg theme)
+     :border-width       1
     :border-color       (colors/theme-colors light-border dark-border theme)
     :flex-direction     :row
     :align-items        :center
     :padding-horizontal 8
     :padding-vertical   6
     :justify-content    :space-between}))
-
-(def left-container
-  {:flex-direction :row
-   :align-items    :center})
@@ -6,45 +6,37 @@
    [quo2.foundations.colors :as colors]
    [quo2.theme :as quo.theme]
    [react-native.core :as rn]
-    [quo2.components.list-items.account-list-card.style :as style]
-    [reagent.core :as reagent]))
+    [quo2.components.list-items.account-list-card.style :as style]))

 (defn- internal-view
-  []
-  (let [state (reagent/atom :default)]
-    (fn [{:keys [action blur? account-props networks on-press on-options-press theme]}]
-      [rn/pressable
-       {:style               (style/container {:state @state :blur? blur? :theme theme})
-        :on-press-in         #(reset! state :pressed)
-        :on-press-out        #(reset! state :default)
-        :on-press            on-press
-        :accessibility-label :container}
-       [rn/view {:style style/left-container}
-        [account-avatar/view account-props]
-        [rn/view {:style {:margin-left 8}}
-         [text/text
-          {:weight :semi-bold
-           :size   :paragraph-2}
-          (:name account-props)]
-         [text/text {:size :paragraph-2}
-          (map (fn [network]
-                 ^{:key (str network)}
-                 [text/text
-                  {:size  :paragraph-2
-                   :style {:color (get colors/networks network)}} (str (subs (name network) 0 3) ":")])
-               networks)
-          [text/text
-           {:size  :paragraph-2
-            :style {:color (if blur?
-                             colors/white-opa-40
-                             (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}}
-           (:address account-props)]]]]
-       (when (= action :icon)
-         [rn/pressable {:on-press on-options-press}
-          [icon/icon :i/options
-           {:color               (if blur?
-                                   colors/white-opa-70
-                                   (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))
-            :accessibility-label :icon}]])])))
+  [{:keys [theme account-props networks state action on-press]}]
+  [rn/view
+   {:style               (style/container state theme)
+    :accessibility-label :container}
+   [rn/view
+    {:style {:flex-direction :row
+             :align-items    :center}}
+    [account-avatar/view account-props]
+    [rn/view {:style {:margin-left 8}}
+     [text/text
+      {:weight :semi-bold
+       :size   :paragraph-2}
+      (:name account-props)]
+     [text/text {:size :paragraph-2}
+      (map (fn [network]
+             ^{:key (str network)}
+             [text/text
+              {:size  :paragraph-2
+               :style {:color (get colors/networks network)}} (str (subs (name network) 0 3) ":")])
+           networks)
+      [text/text
+       {:size  :paragraph-2
+        :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
+       (:address account-props)]]]]
+   (when (= action :icon)
+     [rn/pressable {:on-press on-press}
+      [icon/icon :i/options
+       {:color               (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+        :accessibility-label :icon}]])])

 (def view (quo.theme/with-theme internal-view))
@@ -7,43 +7,43 @@
  (if (types-for-squared-border type) :squared :rounded))

 (def sizes
-  {:size-32 {:size             32
-             :user-avatar-size :small
-             :border-radius    {:rounded 16 :squared 10}
-             :hole-radius      {:rounded 18 :squared 12}
-             :margin-left      -8
-             :hole-size        36
-             :hole-x           22
-             :hole-y           -2}
-   :size-24 {:size             24
-             :user-avatar-size :xs
-             :border-radius    {:rounded 12 :squared 8}
-             :hole-radius      {:rounded 13 :squared 9}
-             :margin-left      -4
-             :hole-size        26
-             :hole-x           19
-             :hole-y           -1}
-   :size-20 {:size             20
-             :user-avatar-size :xxs
-             :border-radius    {:rounded 10 :squared 8}
-             :hole-radius      {:rounded 11 :squared 9}
-             :margin-left      -4
-             :hole-size        22
-             :hole-x           15
-             :hole-y           -1}
-   :size-16 {:size             16
-             :user-avatar-size :xxxs
-             :border-radius    {:rounded 8 :squared 8}
-             :hole-radius      {:rounded 9 :squared 9}
-             :margin-left      -4
-             :hole-size        18
-             :hole-x           11
-             :hole-y           -1}
-   :size-14 {:size             14
-             :user-avatar-size :xxxs
-             :border-radius    {:rounded 7 :squared 7}
-             :hole-radius      {:rounded 8 :squared 8}
-             :margin-left      -2
-             :hole-size        16
-             :hole-x           11
-             :hole-y           -1}})
+  {:size/s-32 {:size             32
+               :user-avatar-size :small
+               :border-radius    {:rounded 16 :squared 10}
+               :hole-radius      {:rounded 18 :squared 12}
+               :margin-left      -8
+               :hole-size        36
+               :hole-x           22
+               :hole-y           -2}
+   :size/s-24 {:size             24
+               :user-avatar-size :xs
+               :border-radius    {:rounded 12 :squared 8}
+               :hole-radius      {:rounded 13 :squared 9}
+               :margin-left      -4
+               :hole-size        26
+               :hole-x           19
+               :hole-y           -1}
+   :size/s-20 {:size             20
+               :user-avatar-size :xxs
+               :border-radius    {:rounded 10 :squared 8}
+               :hole-radius      {:rounded 11 :squared 9}
+               :margin-left      -4
+               :hole-size        22
+               :hole-x           15
+               :hole-y           -1}
+   :size/s-16 {:size             16
+               :user-avatar-size :xxxs
+               :border-radius    {:rounded 8 :squared 8}
+               :hole-radius      {:rounded 9 :squared 9}
+               :margin-left      -4
+               :hole-size        18
+               :hole-x           11
+               :hole-y           -1}
+   :size/s-14 {:size             14
+               :user-avatar-size :xxxs
+               :border-radius    {:rounded 7 :squared 7}
+               :hole-radius      {:rounded 8 :squared 8}
+               :margin-left      -2
+               :hole-size        16
+               :hole-x           11
+               :hole-y           -1}})
@@ -1,13 +1,67 @@
 (ns quo2.components.list-items.preview-list.view
  (:require [quo2.components.avatars.account-avatar.view :as account-avatar]
            [quo2.components.avatars.user-avatar.view :as user-avatar]
-            [quo2.components.list-items.preview-list.properties :as properties]
-            [quo2.components.tags.number-tag.view :as number-tag]
+            [quo2.components.icon :as quo2.icons]
+            [quo2.components.markdown.text :as quo2.text]
+            [quo2.foundations.colors :as colors]
            [quo2.theme :as quo.theme]
+            [quo2.components.list-items.preview-list.properties :as properties]
            [react-native.core :as rn]
            [react-native.fast-image :as fast-image]
            [react-native.hole-view :as hole-view]))

+;; This overflow item needs to be cleaned up once the "number tag" component is implemented
+;; https://github.com/status-im/status-mobile/issues/17045
+(defn get-overflow-color
+  [blur? blur-light-color blur-dark-color light-color dark-color theme]
+  (if blur?
+    (colors/theme-colors blur-light-color blur-dark-color theme)
+    (colors/theme-colors light-color dark-color theme)))
+
+(def more-icon-for-sizes #{16 14})
+
+(defn overflow-label
+  [{:keys [label size blur? border-radius margin-left theme more-than-99-label]}]
+  [rn/view
+   {:style {:width            size
+            :height           size
+            :margin-left      margin-left
+            :border-radius    border-radius
+            :justify-content  :center
+            :align-items      :center
+            :background-color (get-overflow-color
+                               blur?
+                               colors/neutral-80-opa-5
+                               colors/white-opa-5
+                               colors/neutral-20
+                               colors/neutral-90
+                               theme)}}
+   (if (more-icon-for-sizes size)
+     [quo2.icons/icon :i/more
+      {:size  12
+       :color (get-overflow-color
+               blur?
+               colors/neutral-80-opa-70
+               colors/white-opa-70
+               colors/neutral-50
+               colors/neutral-40
+               theme)}]
+     [quo2.text/text
+      {:size   (if (= size 32) :paragraph-2 :label)
+       :weight :medium
+       :style  {:color       (get-overflow-color
+                              blur?
+                              colors/neutral-80-opa-70
+                              colors/white-opa-70
+                              colors/neutral-50
+                              colors/neutral-40
+                              theme)
+                :margin-left -2}}
+      ;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+
+      (if (< label 100)
+        (str "+" label)
+        more-than-99-label)])])
+
 (defn- preview-item
  [{:keys [item type size-key]}]
  (let [size             (get-in properties/sizes [size-key :size])
@@ -16,22 +70,22 @@
                                 [size-key :border-radius (properties/border-type type)])]
    (case type
      :user                        [user-avatar/user-avatar
-                                    (assoc item
-                                           :ring?             false
-                                           :status-indicator? false
-                                           :size              user-avatar-size)]
+                                    (merge {:ring?             false
+                                            :status-indicator? false
+                                            :size              user-avatar-size}
+                                           item)]

      :accounts                    [account-avatar/view
-                                    (assoc item :size size)]
+                                    (merge item {:size size})]

      (:communities :collectibles) [fast-image/fast-image
-                                    {:source (or (:source item) item)
+                                    {:source (:source item)
                                     :style  {:width         size
                                              :height        size
                                              :border-radius border-radius}}]

      (:tokens :network :dapps)    [fast-image/fast-image
-                                    {:source (or (:source item) item)
+                                    {:source (:source item)
                                     :style  {:width         size
                                              :height        size
                                              :border-radius border-radius}}]
@@ -64,16 +118,16 @@
  "[preview-list opts items]
   opts
   {:type          :user/:communities/:accounts/:tokens/:collectibles/:dapps/:network
-    :size          :size-32 | :size-24 | :size-20 | :size-16 | :size-14
+    :size          :size/s-32 | :size/s-24 | :size/s-20 | :size/s-16 | :size/s-14
    :number        number of items in the list (optional)
    :blur?         overflow-label blur?}
   items           preview list items (only 4 items is required for preview)
  "
-  [{:keys [type size number blur?]} items]
-  (let [size-key    (if (contains? properties/sizes size) size :size-24)
-        number      (or number (count items))
-        border-type (properties/border-type type)
-        margin-left (get-in properties/sizes [size-key :margin-left])]
+  [{:keys [type size number blur? theme more-than-99-label]} items]
+  (let [size-key      (if (contains? properties/sizes size) size :size/s-24)
+        number        (or number (count items))
+        margin-left   (get-in properties/sizes [size-key :margin-left])
+        border-radius (get-in properties/sizes [size-key :border-radius (properties/border-type type)])]
    [rn/view {:style {:flex-direction :row}}
     (for [index (range (if (> number 4) 3 number))]
       ^{:key (str index number)}
@@ -84,11 +138,13 @@
         :item     (get (vec items) index)
         :number   number}])
     (when (> number 4)
-       [number-tag/view
-        {:type            border-type
-         :number          (str (- number 3))
-         :size            size-key
-         :blur?           blur?
-         :container-style {:margin-left margin-left}}])]))
+       [overflow-label
+        {:label              (- number 3)
+         :size               (get-in properties/sizes [size-key :size])
+         :blur?              blur?
+         :border-radius      border-radius
+         :margin-left        margin-left
+         :theme              theme
+         :more-than-99-label more-than-99-label}])]))

 (def view (quo.theme/with-theme view-internal))
@@ -12,9 +12,9 @@
    [reagent.core :as reagent]))

 (defn- internal-view
-  []
+  [{:keys [theme customization-color status token metrics? values on-press]}]
  (let [state (reagent/atom :default)]
-    (fn [{:keys [theme customization-color status token metrics? values on-press]}]
+    (fn []
      (let [bg-opacity                                                      (case @state
                                                                              :active  10
                                                                              :pressed 5
@@ -42,7 +42,7 @@
           [text/text
            {:size  :paragraph-2
             :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
-            (str crypto-value " " (if token (string/upper-case (clj->js token)) ""))]]]
+            (str crypto-value " " (string/upper-case (clj->js token)))]]]
         [rn/view
          {:style {:align-items     :flex-end
                   :justify-content :space-between}}
@@ -3,8 +3,7 @@
            [react-native.core :as rn]
            [react-native.masked-view :as masked-view]
            [react-native.reanimated :as reanimated]
-            [reagent.core :as reagent]
-            [quo2.theme :as quo.theme]))
+            [reagent.core :as reagent]))

 (def message-skeleton-height 54)

@@ -23,10 +22,10 @@
 ;; Standlone message skeleton
 (defn- f-message-skeleton
  {:deprecated "quo2.components.loaders.skeleton-list.view should be used instead"}
-  [{:keys [theme]}]
+  []

-  (let [color                   (colors/theme-colors colors/neutral-5 colors/neutral-70 theme)
-        loading-color           (colors/theme-colors colors/neutral-10 colors/neutral-60 theme)
+  (let [color                   (colors/theme-colors colors/neutral-5 colors/neutral-70)
+        loading-color           (colors/theme-colors colors/neutral-10 colors/neutral-60)
        content-width           (rand-nth message-content-width)
        author-width            (content-width :author)
        message-width           (content-width :message)
@@ -77,17 +76,14 @@
        :end    {:x 1 :y 0}
        :style  animated-gradient-style}]]]))

-(defn- view-internal
-  [{:keys [parent-height theme]}]
+(defn skeleton
+  [parent-height]
  (let [number-of-skeletons (int (Math/floor (/ parent-height message-skeleton-height)))]
    [rn/view
     {:style {:background-color (colors/theme-colors
                                 colors/white
-                                 colors/neutral-90
-                                 theme)
+                                 colors/neutral-90)
              :flex             1}}
     (doall
      (for [n (range number-of-skeletons)]
-        [:f> f-message-skeleton {:key n :theme theme}]))]))
-
-(def view (quo.theme/with-theme view-internal))
+        [:f> f-message-skeleton {:key n}]))]))
@@ -34,8 +34,8 @@
                                    :color   color})}])]])

 (defn- f-animated-skeleton-view
-  [{:keys [style color skeleton-height animated? translate-x window-width theme] :as data}]
-  (let [loading-color (colors/theme-colors colors/neutral-10 colors/neutral-60 theme)]
+  [{:keys [style color skeleton-height animated? translate-x window-width] :as data}]
+  (let [loading-color (colors/theme-colors colors/neutral-10 colors/neutral-60)]

    (rn/use-effect
     (fn []
@@ -73,9 +73,10 @@
                                  :height "100%"})
        skeleton-height         (get-in constants/layout-dimensions [content :height])
        number-of-skeletons     (int (Math/ceil (/ parent-height skeleton-height)))
-        color                   (if (and blur? (= theme :dark))
-                                  colors/white-opa-5
-                                  (colors/theme-colors colors/neutral-5 colors/neutral-90 theme))
+        color                   (cond
+                                  (and blur? (= theme :dark)) colors/white-opa-5
+                                  (= theme :dark)             colors/neutral-90
+                                  :else                       colors/neutral-5)
        component               (if animated? animated-skeleton-view static-skeleton-view)]
    [rn/view
     {:style               {:padding 8}
@@ -21,7 +21,7 @@
  [rn/view
   {:margin-right 8}
   [icon-avatar/icon-avatar
-    {:size    :size-32
+    {:size    :size/s-32
     :icon    icon
     :color   color
     :opacity opacity}]])
@@ -86,6 +86,6 @@
           counter-label]
          [rn/view {:style (styles/notification-dot customization-color)}]))]]))

-(defn view
+(defn bottom-nav-tab
  [opts]
  [:f> f-bottom-nav-tab opts])
@@ -56,9 +56,7 @@
   (cond
     ;; TODO: use account-switcher when available (issue #16456)
     (and support-account-switcher? (= content :account-switcher))
-     [rn/pressable
-      {:style    style/account-switcher-placeholder
-       :on-press #(js/alert "Not implemented yet")}]
+     [rn/view {:style style/account-switcher-placeholder}]

     (coll? content)
     (into [rn/view {:style style/right-actions-container}]
@@ -26,15 +26,11 @@
  {:color colors/white})

 (defn message-container
-  [attachment text-with-photos?]
+  [attachment]
  {:border-radius      12
   :margin-top         10
   :padding-horizontal 12
-   :padding-vertical   (if (and
-                            (not text-with-photos?)
-                            (#{:photo :gif} attachment))
-                         12
-                         8)
+   :padding-vertical   (if (#{:photo :gif} attachment) 12 8)
   :background-color   colors/white-opa-5})

 (def footer-container
@@ -73,33 +73,24 @@
                 detail]]))
           context))))

-(defn- hiccup-props
-  [body]
-  (and (vector? body)
-       (map? (second body))
-       (second body)))
-
 (defn- activity-message
  [{:keys [title body title-number-of-lines body-number-of-lines attachment]}]
-  (let [{:keys [photos message-text]} (hiccup-props body)
-        text-with-photos?             (and (not (string/blank? message-text))
-                                           (seq photos))]
-    [rn/view {:style (style/message-container attachment text-with-photos?)}
-     (when title
-       [text/text
-        {:size                :paragraph-2
-         :accessibility-label :activity-message-title
-         :style               style/message-title
-         :number-of-lines     title-number-of-lines}
-        title])
-     (if (string? body)
-       [text/text
-        {:style               style/message-body
-         :accessibility-label :activity-message-body
-         :size                :paragraph-1
-         :number-of-lines     body-number-of-lines}
-        body]
-       body)]))
+  [rn/view {:style (style/message-container attachment)}
+   (when title
+     [text/text
+      {:size                :paragraph-2
+       :accessibility-label :activity-message-title
+       :style               style/message-title
+       :number-of-lines     title-number-of-lines}
+      title])
+   (if (string? body)
+     [text/text
+      {:style               style/message-body
+       :accessibility-label :activity-message-body
+       :size                :paragraph-1
+       :number-of-lines     body-number-of-lines}
+      body]
+     body)])

 (defn- activity-title
  [title replying?]
@@ -1,7 +1,5 @@
 (ns quo2.components.notifications.activity-logs-photos.style)

-(def text {:margin-bottom 8})
-
 (def photos-container
  {:flex           1
   :height         40
@@ -1,25 +1,14 @@
 (ns quo2.components.notifications.activity-logs-photos.view
  (:require [react-native.core :as rn]
-            [quo2.components.markdown.text :as text]
-            [quo2.components.notifications.activity-logs-photos.style :as style]
-            [clojure.string :as string]))
+            [quo2.components.notifications.activity-logs-photos.style :as style]))

 (defn view
-  [{:keys [photos message-text]}]
-  [:<>
-   (when (not (string/blank? message-text))
-     [text/text
-      {:size                :paragraph-1
-       :weight              :regular
-       :style               style/text
-       :number-of-lines     2
-       :accessibility-label :activity-log-title}
-      message-text])
-   [rn/view {:style style/photos-container}
-    (map-indexed
-     (fn [index photo]
-       ^{:key index}
-       [rn/image
-        {:source photo
-         :style  (style/photo index)}])
-     photos)]])
+  [{:keys [photos]}]
+  [rn/view {:style style/photos-container}
+   (map-indexed
+    (fn [index photo]
+      ^{:key index}
+      [rn/image
+       {:source photo
+        :style  (style/photo index)}])
+    photos)])
@@ -68,7 +68,8 @@
 (def ^:private toast-container (quo.theme/with-theme toast-container-internal))

 (defn toast
-  [{:keys [icon icon-color title text action undo-duration undo-on-press container-style theme user]}]
+  [{:keys [icon icon-color title text action undo-duration undo-on-press container-style
+           theme user]}]
  (let [context-theme (or theme (quo.theme/get-theme))]
    [quo.theme/provider {:theme context-theme}
     [toast-container
@@ -77,6 +78,7 @@
                               (cond-> (style/icon context-theme)
                                 icon-color
                                 (assoc :color icon-color))]
+
                              user
                              [user-avatar/user-avatar user])
       :title           title
@@ -1,10 +1,8 @@
 (ns quo2.components.profile.showcase-nav.style
  (:require [quo2.foundations.colors :as colors]))

-(def height 56)
-
 (def root-container
-  {:height height})
+  {:height 56})

 (defn container
  [state theme]
@@ -5,7 +5,7 @@
            [react-native.core :as rn]))

 (defn- render-button
-  [{:keys [icon id]} index _ {:keys [state on-press active-id]}]
+  [{:keys [icon id]} _ _ {:keys [state on-press active-id]}]
  (let [active?       (= id active-id)
        button-type   (if active? :grey :ghost)
        scroll-state? (= state :scroll)]
@@ -17,21 +17,21 @@
      :icon-only?          true
      :on-press            (fn []
                             (when on-press
-                               (on-press id index)))
+                               (on-press id)))
      :container-style     style/button-container}
     icon]))

 (defn- view-internal
  [{:keys [theme container-style default-active state data on-press active-id]}]
  [rn/view
-   {:style               (merge style/root-container container-style)
+   {:style               style/root-container
    :accessibility-label :showcase-nav}
   [rn/flat-list
    {:data                              data
-     :key-fn                            :id
+     :key-fn                            str
     :horizontal                        true
     :shows-horizontal-scroll-indicator false
-     :content-container-style           (style/container state theme)
+     :content-container-style           (merge (style/container state theme) container-style)
     :render-fn                         render-button
     :render-data                       {:state     state
                                         :on-press  on-press
@@ -12,32 +12,31 @@
  [rn/touchable-opacity
   {:on-press            on-press
    :accessibility-label :emoji-reaction-add
-    :style               (style/add-reaction theme)}
+    :style               (style/add-reaction)}
   [icons/icon :i/add-reaction
    {:size  20
-     :color (colors/theme-colors colors/neutral-50
-                                 colors/neutral-40
-                                 theme)}]])
+     :color (colors/theme-colors colors/neutral-50 colors/white theme)}]])

-(def add-reaction (theme/with-theme add-reaction-internal))
-
-(defn reaction-internal
+(defn reaction
  "Add your emoji as a param here"
-  [{:keys [emoji clicks neutral? on-press accessibility-label on-long-press theme]}]
+  [{:keys [emoji clicks neutral? on-press accessibility-label on-long-press]}]
  (let [numeric-value (int clicks)]
    [rn/touchable-opacity
     {:on-press            on-press
      :on-long-press       on-long-press
      :accessibility-label accessibility-label
-      :style               (style/reaction neutral? theme)}
+      :style               (style/reaction neutral?)}
     [rn/image
      {:style               {:width 16 :height 16}
       :accessibility-label :emoji
       :source              (resource/get-reaction emoji)}]
     [text/text
-      {:size   :paragraph-2
-       :weight :semi-bold
-       :style  style/reaction-count}
-      (str (if (pos? numeric-value) numeric-value 1))]]))
+      {:size            :paragraph-2
+       :weight          :semi-bold
+       :flex-direction  :row
+       :align-items     :center
+       :justify-content :center}
+      (when (pos? numeric-value)
+        (str " " numeric-value))]]))

-(def reaction (theme/with-theme reaction-internal))
+(def add-reaction (theme/with-theme add-reaction-internal))
@@ -10,24 +10,25 @@
   :height             24})

 (defn add-reaction
-  [theme]
+  []
  (merge reaction-styling
-         {:padding-horizontal 8
+         {:padding-horizontal 9
          :border-width       1
-          :border-color       (colors/theme-colors colors/neutral-20
-                                                   colors/neutral-70
-                                                   theme)}))
+          :border-color       (colors/theme-colors colors/neutral-30 colors/neutral-70)}))

 (defn reaction
-  [neutral? theme]
+  [neutral?]
  (merge reaction-styling
-         {:border-color     (colors/theme-colors colors/neutral-20
-                                                 colors/neutral-80
-                                                 theme)
-          :border-width     1
-          :background-color (if neutral?
-                              (colors/theme-colors colors/neutral-10
-                                                   colors/neutral-80-opa-40)
-                              :transparent)}))
-
-(def reaction-count {:margin-left 4})
+         (cond->
+           {:background-color (colors/theme-colors (if neutral?
+                                                     colors/neutral-30
+                                                     :transparent)
+                                                   (if neutral?
+                                                     colors/neutral-70
+                                                     :transparent))}
+           (and (colors/dark?) (not neutral?))
+           (assoc :border-color colors/neutral-70
+                  :border-width 1)
+           (and (not (colors/dark?)) (not neutral?))
+           (assoc :border-color colors/neutral-30
+                  :border-width 1))))
@@ -28,9 +28,9 @@
         [reanimated/view {:style (style/animated-circle scale opacity color)}]))))))

 (defn f-record-button-big
-  [{:keys [recording? ready-to-send? ready-to-lock? ready-to-delete? record-button-is-animating?
-           record-button-at-initial-position? locked? reviewing-audio? recording-length-ms
-           clear-timeout touch-active? recorder-ref reload-recorder-fn idle? on-send on-cancel theme]}]
+  [recording? ready-to-send? ready-to-lock? ready-to-delete? record-button-is-animating?
+   record-button-at-initial-position? locked? reviewing-audio? recording-length-ms
+   clear-timeout touch-active? recorder-ref reload-recorder-fn idle? on-send on-cancel]
  (let [scale (reanimated/use-shared-value 1)
        opacity (reanimated/use-shared-value 0)
        opacity-from (if @ready-to-lock? opacity-from-lock opacity-from-default)
@@ -46,14 +46,13 @@
                    (range 0 5))
        rings-color (cond
                      @ready-to-lock?   (colors/theme-colors colors/neutral-80-opa-5-opaque
-                                                             colors/neutral-80
-                                                             theme)
+                                                             colors/neutral-80)
                      @ready-to-delete? colors/danger-50
                      :else             colors/primary-50)
        translate-y (reanimated/use-shared-value 0)
        translate-x (reanimated/use-shared-value 0)
        button-color colors/primary-50
-        icon-color (if (and (not (= :dark theme)) @ready-to-lock?) colors/black colors/white)
+        icon-color (if (and (not (colors/dark?)) @ready-to-lock?) colors/black colors/white)
        icon-opacity (reanimated/use-shared-value 1)
        red-overlay-opacity (reanimated/use-shared-value 0)
        gray-overlay-opacity (reanimated/use-shared-value 0)
@@ -17,8 +17,7 @@
            [quo2.components.record-audio.record-audio.buttons.record-button :as record-button]
            [clojure.string :as string]
            [utils.datetime :as datetime]
-            [react-native.platform :as platform]
-            [quo2.theme :as quo.theme]))
+            [react-native.platform :as platform]))

 (def ^:private min-audio-duration-ms 1000)
 (def ^:private max-audio-duration-ms (if platform/ios? 120800 120500))
@@ -156,11 +155,11 @@
      (if @playing-audio? :i/pause :i/play)
      {:color (colors/theme-colors colors/neutral-100 colors/white)}]]))

-(defn- record-audio-internal
+(defn record-audio
  [{:keys [on-init on-start-recording on-send on-cancel on-reviewing-audio
           record-audio-permission-granted
           on-request-record-audio-permission on-check-audio-permissions
-           audio-file on-lock max-duration-ms theme]}]
+           audio-file on-lock max-duration-ms]}]
  [:f>
   ;; TODO we need to refactor this, and use :f> with defined function, currenly state is reseted each
   ;; time parent component
@@ -575,23 +574,20 @@
           [:f> send-button/f-send-button recording? ready-to-send? reviewing-audio?
            @force-show-controls?]
           [:f> record-button-big/f-record-button-big
-            {:recording?                         recording?
-             :ready-to-send?                     ready-to-send?
-             :ready-to-lock?                     ready-to-lock?
-             :ready-to-delete?                   ready-to-delete?
-             :record-button-is-animating?        record-button-is-animating?
-             :record-button-at-initial-position? record-button-at-initial-position?
-             :locked?                            locked?
-             :reviewing-audio?                   reviewing-audio?
-             :recording-length-ms                recording-length-ms
-             :clear-timeout                      clear-timeout
-             :touch-active?                      touch-active?
-             :recorder-ref                       recorder-ref
-             :reload-recorder-fn                 reload-recorder
-             :idle?                              idle?
-             :on-send                            on-send
-             :on-cancel                          on-cancel
-             :theme                              theme}]
+            recording?
+            ready-to-send?
+            ready-to-lock?
+            ready-to-delete?
+            record-button-is-animating?
+            record-button-at-initial-position?
+            locked?
+            reviewing-audio?
+            recording-length-ms
+            clear-timeout
+            touch-active?
+            recorder-ref
+            reload-recorder
+            idle?
+            on-send
+            on-cancel]
           [:f> record-button/f-record-button recording? reviewing-audio?]]])))])
-
-(def record-audio (quo.theme/with-theme record-audio-internal))
@@ -4,16 +4,14 @@
            [react-native.audio-toolkit :as audio]
            [taoensso.timbre :as log]
            [react-native.platform :as platform]
-            [react-native.slider :as slider]
-            [quo2.theme :as quo.theme]))
+            [react-native.slider :as slider]))

 (def ^:private thumb-light (js/require "../resources/images/icons2/12x12/thumb-light.png"))
 (def ^:private thumb-dark (js/require "../resources/images/icons2/12x12/thumb-dark.png"))

 (defn f-soundtrack
  [{:keys [audio-current-time-ms player-ref style seeking-audio? max-audio-duration-ms]}]
-  (let [audio-duration-ms (min max-audio-duration-ms (audio/get-player-duration player-ref))
-        theme             (quo.theme/use-theme-value)]
+  (let [audio-duration-ms (min max-audio-duration-ms (audio/get-player-duration player-ref))]
    [:<>
     [slider/slider
      {:test-ID                  "soundtrack"
@@ -33,9 +31,8 @@
                                    #(log/error "[record-audio] on seek - error: " %)))
       :on-value-change          #(when @seeking-audio?
                                    (reset! audio-current-time-ms %))
-       :thumb-image              (quo.theme/theme-value thumb-light thumb-dark theme)
-       :minimum-track-tint-color (colors/theme-colors colors/primary-50 colors/primary-60 theme)
+       :thumb-image              (if (colors/dark?) thumb-dark thumb-light)
+       :minimum-track-tint-color (colors/theme-colors colors/primary-50 colors/primary-60)
       :maximum-track-tint-color (colors/theme-colors
                                  (if platform/ios? colors/neutral-20 colors/neutral-40)
-                                  (if platform/ios? colors/neutral-80 colors/neutral-60)
-                                  theme)}]]))
+                                  (if platform/ios? colors/neutral-80 colors/neutral-60))}]]))
@@ -88,7 +88,7 @@
     :preview [preview-list/view
               {:type   :communities
                :number 3
-                :size   :size-24}
+                :size   :size/s-24}
               communities-list]
     :graph   [text/text "graph"]
     :none    nil
@@ -1,30 +1,29 @@
-(ns quo2.components.settings.privacy-option.view
+(ns quo2.components.settings.privacy-option
  (:require [quo2.components.icon :as icons]
            [quo2.components.markdown.text :as text]
            [quo2.components.selectors.selectors.view :as selectors]
-            [quo2.components.settings.privacy-option.style :as style]
+            [quo2.components.settings.style :as style]
            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [quo2.theme :as quo.theme]))
+            [react-native.core :as rn]))

 (defn- bullet
-  [theme]
+  []
  [rn/view {:style style/bullet-container}
-   [rn/view {:style (style/bullet theme)}]])
+   [rn/view {:style (style/bullet)}]])

 (defn- unordered-list
-  [{:keys [container-style theme]} list-items]
+  [container-style list-items]
  [rn/view {:style (merge style/list-container container-style)}
   (for [item list-items]
     ^{:key (hash item)}
     [rn/view {:style style/list-item}
-      [bullet theme]
+      [bullet]
      [text/text {:size :paragraph-2} item]])])

 (defn- card-footer
-  [{:keys [active? label on-toggle theme]}]
+  [{:keys [active? label on-toggle]}]
  [rn/touchable-without-feedback
-   [rn/view {:style (style/card-footer theme)}
+   [rn/view {:style (style/card-footer)}
    [rn/view {:style style/card-footer-label-container}
     [text/text {:size :paragraph-2} label]]
    [rn/view {:style style/card-footer-toggle-container}
@@ -33,42 +32,36 @@
       :on-change on-toggle}]]]])

 (defn- selection-indicator
-  [active? theme]
-  [rn/view {:style (style/selection-indicator-container active? theme)}
-   [rn/view {:style (style/selection-indicator active? theme)}]])
+  [active?]
+  [rn/view {:style (style/selection-indicator-container active?)}
+   [rn/view {:style (style/selection-indicator active?)}]])

 (defn- card-header
-  [{:keys [icon label active? theme]}]
+  [{:keys [icon label active?]}]
  [rn/view {:style style/card-header-container}
   [icons/icon icon
    {:size  20
-     :color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]
+     :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]
   [rn/view {:style style/card-header-label-container}
    [text/text {:weight :semi-bold} label]]
   [selection-indicator active?]])

-(defn- view-internal
-  [{:keys [active? header footer list-items icon on-select on-toggle theme]
+(defn card
+  [{:keys [active? header footer list-items icon on-select on-toggle]
    :or   {icon    :i/world
           active? false}}]
  [rn/touchable-without-feedback
   {:on-press            on-select
    :accessibility-label :privacy-option-card
    :testID              :privacy-option-card}
-   [rn/view (style/privacy-option-card active? theme)
+   [rn/view (style/privacy-option-card active?)
    [card-header
-     {:theme   theme
-      :active? active?
+     {:active? active?
      :icon    icon
      :label   header}]
-    [unordered-list
-     {:theme           theme
-      :container-style (when-not footer {:margin-bottom 8})} list-items]
+    [unordered-list (when-not footer {:margin-bottom 8}) list-items]
    (when footer
      [card-footer
-       {:theme     theme
-        :active?   active?
+       {:active?   active?
        :label     footer
        :on-toggle on-toggle}])]])
-
-(def view (quo.theme/with-theme view-internal))
@@ -1,17 +1,19 @@
 (ns quo2.components.settings.settings-item.style
  (:require [quo2.foundations.colors :as colors]))

-(defn container
-  [{:keys [container-style]}]
-  (merge {:padding         12
-          :flex-direction  :row
-          :justify-content :space-between}
-         container-style))
+(defn find-icon-height
+  [description tag image]
+  (let [icon-height (if (= image :icon-avatar) 32 20)
+        icon-height (if description 40 icon-height)]
+    (if tag 72 icon-height)))

-(defn left-sub-container
-  [{:keys [tag description]}]
-  {:flex-direction :row
-   :align-items    (if (or tag description) :flex-start :center)})
+(defn container
+  [{:keys [in-card? tag]}]
+  {:padding-horizontal 12
+   :padding-vertical   (if in-card? 12 13)
+   :flex-direction     :row
+   :justify-content    :space-between
+   :height             (if tag 96 48)})

 (def sub-container
  {:flex-direction :row
@@ -20,12 +22,12 @@
 (def left-container
  {:margin-left     12
   :height          "100%"
-   :justify-content :flex-start})
+   :justify-content :center})

 (defn image-container
-  [image tag description]
-  {:height     (if (= image :icon-avatar) 32 20)
-   :margin-top (if (or tag description) 1 0)})
+  [description tag image]
+  {:height          (find-icon-height description tag image)
+   :justify-content :flex-start})

 (def status-container
  {:flex-direction :row
@@ -53,8 +55,3 @@
   :height           15
   :border-radius    12
   :background-color background-color})
-
-(def status-tag-container
-  {:margin-top    7
-   :margin-bottom 2
-   :margin-left   -1})
@@ -62,10 +62,9 @@
  (case tag
    :positive [status-tags/status-tag
               {:status          {:type :positive}
-                :label           (:label tag-props)
-                :no-icon?        true
+                :label           (i18n/label :t/positive)
                :size            :small
-                :container-style style/status-tag-container}]
+                :container-style {:margin-top 8}}]
    :context  [context-tag/view
               (merge tag-props
                      {:type            :icon
@@ -83,8 +82,7 @@
               label-props]
     :color   [rn/view
               {:style (style/label-dot label-props)}]
-     :preview [preview-list/view {:type (:type label-props) :size :size-24}
-               (:data label-props)]
+     :preview [preview-list/view {:type (:type label-props)} (:data label-props)]
     nil)])

 (defn action-component
@@ -106,7 +104,7 @@
   {:style               (style/container props)
    :on-press            on-press
    :accessibility-label accessibility-label}
-   [rn/view {:style (style/left-sub-container props)}
+   [rn/view {:style style/sub-container}
    [image-component props]
    [rn/view {:style style/left-container}
     [text/text {:weight :medium} title]
@@ -1,4 +1,4 @@
-(ns quo2.components.settings.privacy-option.style
+(ns quo2.components.settings.style
  (:require [quo2.foundations.colors :as colors]))

 (def bullet-container
@@ -8,8 +8,8 @@
   :align-self   :flex-start})

 (defn bullet
-  [theme]
-  {:background-color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
+  []
+  {:background-color (colors/theme-colors colors/neutral-40 colors/neutral-50)
   :border-radius    100
   :width            8
   :height           8
@@ -28,23 +28,23 @@
   :padding-horizontal 12})

 (defn selection-indicator-container
-  [active? theme]
+  [active?]
  {:height        20
   :width         20
   :border-radius 20
   :border-width  1
   :border-color  (if active?
-                    (colors/theme-colors colors/primary-50 colors/primary-60 theme)
-                    (colors/theme-colors colors/neutral-20 colors/neutral-80 theme))})
+                    (colors/theme-colors colors/primary-50 colors/primary-60)
+                    (colors/theme-colors colors/neutral-20 colors/neutral-80))})

 (defn selection-indicator
-  [active? theme]
+  [active?]
  {:margin-left      :auto
   :height           14
   :width            14
   :background-color (if active?
-                       (colors/theme-colors colors/primary-50 colors/primary-60 theme)
-                       (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40 theme))
+                       (colors/theme-colors colors/primary-50 colors/primary-60)
+                       (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40))
   :border-radius    20
   :margin-right     :auto
   :margin-top       :auto
@@ -60,7 +60,7 @@
   :align-self        :center})

 (defn card-footer
-  [theme]
+  []
  {:flex              1
   :flex-direction    :row
   :justify-content   :space-between
@@ -70,8 +70,8 @@
   :padding-vertical  12
   :border-radius     12
   :border-width      1
-   :background-color  (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)
-   :border-color      (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)})
+   :background-color  (colors/theme-colors colors/neutral-5 colors/neutral-90)
+   :border-color      (colors/theme-colors colors/neutral-10 colors/neutral-80)})

 (def card-header-container
  {:flex-direction     :row
@@ -85,9 +85,9 @@
   :margin-left 4})

 (defn privacy-option-card
-  [active? theme]
+  [active?]
  {:border-radius 16
   :border-width  1
   :border-color  (if active?
-                    (colors/theme-colors colors/primary-50 colors/primary-60 theme)
-                    (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
+                    (colors/theme-colors colors/primary-50 colors/primary-60)
+                    (colors/theme-colors colors/neutral-10 colors/neutral-80))})
@@ -26,7 +26,7 @@
                                     [theme :background-color])
           :border-radius    (case size
                               32 10
-                               28 10
+                               28 8
                               24 8
                               20 6)
           :padding          2}
@@ -70,7 +70,8 @@
           on-change
           scroll-on-press?
           size
-           style]}]
+           style
+          ]}]
  [rn/view
   {:style (style/tab {:size             size
                       :default-tab-size default-tab-size
@@ -131,7 +132,6 @@
               scroll-on-press?
               scrollable?
               style
-               container-style
               size
               blur?
               in-scroll-view?
@@ -159,36 +159,35 @@
             :size)
            (when scroll-on-press?
              {:initial-scroll-index (utils.collection/first-index #(= @active-tab-id (:id %)) data)})
-            {:ref #(reset! flat-list-ref %)
-             :style style
+            {:ref                               #(reset! flat-list-ref %)
+             :style                             style
             ;; The padding-top workaround is needed because on Android
             ;; {:overflow :visible} doesn't work on components inheriting
             ;; from ScrollView (e.g. FlatList). There are open issues, here's
             ;; just one about this topic:
             ;; https://github.com/facebook/react-native/issues/31218
-             :content-container-style
-             (assoc container-style :padding-top (dec unread-count-offset))
-             :horizontal true
-             :scroll-event-throttle 64
+             :content-container-style           {:padding-top (dec unread-count-offset)}
+             :horizontal                        true
+             :scroll-event-throttle             64
             :shows-horizontal-scroll-indicator false
-             :data data
-             :key-fn (comp str :id)
-             :on-scroll-to-index-failed identity
-             :on-scroll (partial on-scroll-handler
-                                 {:fade-end-percentage fade-end-percentage
-                                  :fade-end?           fade-end?
-                                  :fading              fading
-                                  :on-scroll           on-scroll})
-             :render-fn tab-view
-             :render-data {:active-tab-id       active-tab-id
-                           :blur?               blur?
-                           :customization-color customization-color
-                           :flat-list-ref       flat-list-ref
-                           :number-of-items     (count data)
-                           :on-change           on-change
-                           :scroll-on-press?    scroll-on-press?
-                           :size                size
-                           :style               style}})]]]
+             :data                              data
+             :key-fn                            (comp str :id)
+             :on-scroll-to-index-failed         identity
+             :on-scroll                         (partial on-scroll-handler
+                                                         {:fade-end-percentage fade-end-percentage
+                                                          :fade-end?           fade-end?
+                                                          :fading              fading
+                                                          :on-scroll           on-scroll})
+             :render-fn                         tab-view
+             :render-data                       {:active-tab-id       active-tab-id
+                                                 :blur?               blur?
+                                                 :customization-color customization-color
+                                                 :flat-list-ref       flat-list-ref
+                                                 :number-of-items     (count data)
+                                                 :on-change           on-change
+                                                 :scroll-on-press?    scroll-on-press?
+                                                 :size                size
+                                                 :style               style}})]]]
        [rn/view (merge style {:flex-direction :row})
         (map-indexed (fn [index item]
                        ^{:key (:id item)}
@@ -199,5 +198,6 @@
                          :number-of-items     (count data)
                          :on-change           on-change
                          :size                size
-                          :style               style}])
+                          :style               style}
+                        ])
                      data)]))))
@@ -79,32 +79,30 @@
           state               :default}
    :as   props}]
  [rn/view
-   {:style               (merge (style/container {:theme               theme
-                                                  :type                type
-                                                  :size                size
-                                                  :state               state
-                                                  :blur?               blur?
-                                                  :customization-color customization-color})
-                                container-style)
-    :accessibility-label :context-tag}
+   {:style (merge (style/container {:theme               theme
+                                    :type                type
+                                    :size                size
+                                    :state               state
+                                    :blur?               blur?
+                                    :customization-color customization-color})
+                  container-style)}
   (case type
     :default
     [tag-skeleton {:theme theme :size size :text full-name}
      [user-avatar/user-avatar
-       {:full-name           full-name
-        :profile-picture     profile-picture
-        :size                (if (= size 24) :xxs 28)
-        :status-indicator?   false
-        :ring?               false
-        :customization-color customization-color}]]
+       {:full-name         full-name
+        :profile-picture   profile-picture
+        :size              (if (= size 24) :xxs 28)
+        :status-indicator? false
+        :ring?             false}]]

     :multiuser
-     [preview-list/view {:type :user :size :size-20}
+     [preview-list/view {:type :user :size 20}
      users]

     :multinetwork
-     [preview-list/view {:type :network :size :size-20}
-      networks]
+     [preview-list/view {:type :network :size 20}
+      (map #(hash-map :profile-picture %) networks)]

     :audio
     [tag-skeleton {:theme theme :text (str duration)}
@@ -115,7 +113,7 @@
     [tag-skeleton {:theme theme :size size :text group-name}
      [group-avatar/view
       {:icon-name           :i/members
-        :size                (if (= size 24) :size-20 :size-28)
+        :size                (if (= size 24) :size/s-20 :size/s-28)
        :customization-color (colors/custom-color customization-color 50)}]]

     (:channel :community)
@@ -15,5 +15,5 @@
                :networks [{:source "network-icon1.png"}
                           {:source "network-icon2.png"}
                           {:source "network-icon3.png"}]
-                :size     :size-32}])
+                :size     :size/s-32}])
    (h/is-truthy (h/get-by-text "Multiple Networks"))))
@@ -14,7 +14,7 @@
   [preview-list/view
    {:type   :network
     :number (count networks)
-     :size   :size-16} networks]
+     :size   :size/s-16} networks]
   [text/text
    {:weight :medium
     :size   :paragraph-2
@@ -8,13 +8,13 @@
    (h/render [number-tag/view
               {:type   :rounded
                :number "3"
-                :size   :size-32
+                :size   :size/s-32
                :blur?  false}])
    (h/is-truthy (h/get-by-text "+3")))
  (h/test "+48 render"
    (h/render [number-tag/view
               {:type   :squared
                :number "48"
-                :size   :size-24
+                :size   :size/s-24
                :blur?  true}])
    (h/is-truthy (h/get-by-text "+48"))))
@@ -2,26 +2,26 @@
  (:require [quo2.foundations.colors :as colors]))

 (def sizes
-  {:size-32 {:size          32
-             :width-extra   40
-             :border-radius {:rounded 16 :squared 10}
-             :icon-size     20}
-   :size-24 {:size          24
-             :width-extra   32
-             :border-radius {:rounded 12 :squared 8}
-             :icon-size     16}
-   :size-20 {:size          20
-             :width-extra   24
-             :border-radius {:rounded 10 :squared 8}
-             :icon-size     12}
-   :size-16 {:size          16
-             :width-extra   20
-             :border-radius {:rounded 8 :squared 8}
-             :icon-size     12}
-   :size-14 {:size          14
-             :width-extra   16
-             :border-radius {:rounded 7 :squared 7}
-             :icon-size     12}})
+  {:size/s-32 {:size          32
+               :width-extra   40
+               :border-radius {:rounded 16 :squared 10}
+               :icon-size     20}
+   :size/s-24 {:size          24
+               :width-extra   32
+               :border-radius {:rounded 12 :squared 8}
+               :icon-size     16}
+   :size/s-20 {:size          20
+               :width-extra   24
+               :border-radius {:rounded 10 :squared 8}
+               :icon-size     12}
+   :size/s-16 {:size          16
+               :width-extra   20
+               :border-radius {:rounded 8 :squared 8}
+               :icon-size     12}
+   :size/s-14 {:size          14
+               :width-extra   16
+               :border-radius {:rounded 7 :squared 7}
+               :icon-size     12}})

 (defn get-color
  [blur? theme]
@@ -55,11 +55,10 @@
    (get-in sizes [size (if widen? :width-extra :size)])))

 (defn container
-  [{:keys [type number size blur? theme container-style]}]
-  {:style (assoc container-style
-                 :width            (get-width size number)
-                 :height           (get-in sizes [size :size])
-                 :border-radius    (get-shape-value size :border-radius type)
-                 :justify-content  :center
-                 :align-items      :center
-                 :background-color (get-bg-color blur? theme))})
+  [{:keys [type number size blur? theme]}]
+  {:style {:width            (get-width size number)
+           :height           (get-in sizes [size :size])
+           :border-radius    (get-shape-value size :border-radius type)
+           :justify-content  :center
+           :align-items      :center
+           :background-color (get-bg-color blur? theme)}})
@@ -1,9 +1,9 @@
 (ns quo2.components.tags.number-tag.view
  (:require [quo2.components.icon :as icons]
            [quo2.components.markdown.text :as text]
+            [react-native.core :as rn]
            [quo2.components.tags.number-tag.style :as style]
-            [quo2.theme :as quo.theme]
-            [react-native.core :as rn]))
+            [quo2.theme :as quo.theme]))

 (defn view-internal
  [{:keys [number size blur? theme] :as props}]
@@ -12,7 +12,7 @@
    [rn/view (style/container props)
     (if (and (> size-value 20) (< (count number) 3))
       [text/text
-        {:size   (if (= size :size-32)
+        {:size   (if (= size :size/s-32)
                   :paragraph-2
                   :label)
         :weight :medium
--- 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