Replace status-im.ui.components.react in status-im2

feat: Implement quo2 code-snippet-preview component (#17235 )
e2e: some todos and updates
2023-09-27 14:30:59 +05:30 · 2023-09-27 07:41:52 +10:00 · 2023-09-26 18:55:42 +03:00 · 2023-09-26 20:33:56 +05:30 · 2023-09-26 15:59:36 +03:00 · 2023-09-26 13:49:24 +02:00
325 changed files with 4714 additions and 2891 deletions
@@ -196,10 +196,6 @@ 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,22 +9,49 @@
                status-im.utils.styles/defn    clojure.core/defn
                test-helpers.unit/deftest-sub  clojure.core/defn
                taoensso.tufte/defnp           clojure.core/defn}
- :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]}
+ :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}
                ;; 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-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}}
 :config-in-ns {mocks.js-dependencies {:linters {:clojure-lsp/unused-public-var {:level :off}}}}}
@@ -32,3 +32,4 @@ TWO_MINUTES_SYNCING=1
 SWAP_ENABLED=1
 STICKERS_TEST_ENABLED=1
 LOCAL_PAIRING_ENABLED=1
+TEST_STATEOFUS=1
@@ -63,4 +63,10 @@ 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,6 +360,7 @@ 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

@@ -367,6 +368,7 @@ 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,6 +35,11 @@
 [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

@@ -0,0 +1,40 @@
+# 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,6 +62,10 @@ 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: d0db0ee059c33381bca787a2193c27e52750ccaf
+  RNReanimated: 43adb0307a62c1ce9694f36f124ca3b51a15272a
  RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
  RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8
  RNSVG: 80584470ff1ffc7994923ea135a3e5ad825546b9
@@ -785,6 +785,6 @@ SPEC CHECKSUMS:
  TouchID: ba4c656d849cceabc2e4eef722dea5e55959ecf4
  Yoga: d24d6184b6b85f742536bd93bd07d69d7b9bb4c1

-PODFILE CHECKSUM: 1b60eee24bff3a6287f8b33e57657289b2966342
+PODFILE CHECKSUM: ac30a0172ff0126b6f307c20f34c47ce0ebf278f

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

 /* 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 */; };
@@ -43,12 +44,11 @@
 		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,24 +108,23 @@
 		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>"; };
-		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>"; };
+		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; };
 		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>"; };
@@ -133,13 +132,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; };
@@ -149,11 +148,12 @@
 		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>"; };
-		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; };
+		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>"; };
 /* End PBXFileReference section */

 /* Begin PBXFrameworksBuildPhase section */
@@ -161,7 +161,7 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				F5EC958C8908294B8536B835 /* libPods-Status-StatusIm-StatusImTests.a in Frameworks */,
+				D156FF2CCF43C136F7BF8AE5 /* 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 */,
-				B73930D752A70EAB45001773 /* libPods-Status-StatusIm.a in Frameworks */,
+				81F3191BB1D4BDF3442402BD /* 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 */,
-				B0E570AEBE2BEB426BF60259 /* libPods-Status-StatusImPR.a in Frameworks */,
+				04515E9DF839CBF55C690E79 /* libPods-Status-StatusImPR.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -314,9 +314,9 @@
 				CE4E31B21D8695250033ED64 /* Statusgo.xcframework */,
 				8B9A886A2CB448B1ABA0EB62 /* libc++.tbd */,
 				4E586E1B0E544F64AA9F5BD1 /* libz.tbd */,
-				FBEDE2F94002488EF6B277DA /* libPods-Status-StatusIm.a */,
-				06FA6B17CC0A7FAFA9DA5364 /* libPods-Status-StatusIm-StatusImTests.a */,
-				4D059F2E62D7CD9FB1896703 /* libPods-Status-StatusImPR.a */,
+				0F8E9088BDE117AB71366407 /* libPods-Status-StatusIm.a */,
+				D3EFEEB5FC1235562D5D3BF1 /* libPods-Status-StatusIm-StatusImTests.a */,
+				5006FF03675A7E50320B4002 /* libPods-Status-StatusImPR.a */,
 			);
 			name = Frameworks;
 			sourceTree = "<group>";
@@ -324,12 +324,12 @@
 		D0D5C8D06825D33BA2D2121E /* Pods */ = {
 			isa = PBXGroup;
 			children = (
-				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 */,
+				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 */,
 			);
 			path = Pods;
 			sourceTree = "<group>";
@@ -341,11 +341,11 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "StatusImTests" */;
 			buildPhases = (
-				F083BDB009D93F14ABE9577A /* [CP] Check Pods Manifest.lock */,
+				A461E3110C485D2A21EB942C /* [CP] Check Pods Manifest.lock */,
 				00E356EA1AD99517003FC87E /* Sources */,
 				00E356EB1AD99517003FC87E /* Frameworks */,
 				00E356EC1AD99517003FC87E /* Resources */,
-				D2C750D3F094DB4514432955 /* [CP] Copy Pods Resources */,
+				2B2389E62F0A9702C522FD40 /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -361,14 +361,14 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "StatusIm" */;
 			buildPhases = (
-				29DFA8D4A1684BDC5257F30D /* [CP] Check Pods Manifest.lock */,
+				C5DA0344FCE555AD1908FBCD /* [CP] Check Pods Manifest.lock */,
 				13B07F871A680F5B00A75B9A /* Sources */,
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
 				20B6B6891D92C42700CC5C6A /* Embed Frameworks */,
 				E3914A731DF919ED00EBB515 /* Run Script */,
-				81ABD64BC3E76C9EEE7A6C62 /* [CP] Copy Pods Resources */,
+				EC618D80223E4CE064CFF898 /* [CP] Copy Pods Resources */,
 			);
 			buildRules = (
 			);
@@ -383,14 +383,14 @@
 			isa = PBXNativeTarget;
 			buildConfigurationList = 3AAD2AD924A3A60E0075D594 /* Build configuration list for PBXNativeTarget "StatusImPR" */;
 			buildPhases = (
-				B75C010670287761677282A4 /* [CP] Check Pods Manifest.lock */,
+				0196982A5A6EB89DC2106F9B /* [CP] Check Pods Manifest.lock */,
 				3AAD2ABB24A3A60E0075D594 /* Sources */,
 				3AAD2ABF24A3A60E0075D594 /* Frameworks */,
 				3AAD2AC924A3A60E0075D594 /* Resources */,
 				3AAD2AD524A3A60E0075D594 /* Bundle React Native code and images */,
 				3AAD2AD624A3A60E0075D594 /* Embed Frameworks */,
 				3AAD2AD724A3A60E0075D594 /* Run Script */,
-				C7E5420D406F9FB4ACC8ECE8 /* [CP] Copy Pods Resources */,
+				4DBAAF9A3117797361E216BA /* [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";
 		};
-		29DFA8D4A1684BDC5257F30D /* [CP] Check Pods Manifest.lock */ = {
+		0196982A5A6EB89DC2106F9B /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -559,13 +559,35 @@
 			outputFileListPaths = (
 			);
 			outputPaths = (
-				"$(DERIVED_FILE_DIR)/Pods-Status-StatusIm-checkManifestLockResult.txt",
+				"$(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;
 		};
+		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;
@@ -594,51 +616,7 @@
 			shellPath = "/usr/bin/env sh";
 			shellScript = "\"${PROJECT_DIR}/scripts/set_xcode_version.sh\" > ./logs/set_xcode_version.log 2>&1";
 		};
-		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 */ = {
+		4DBAAF9A3117797361E216BA /* [CP] Copy Pods Resources */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -660,43 +638,7 @@
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Status-StatusImPR/Pods-Status-StatusImPR-resources.sh\"\n";
 			showEnvVarsInLog = 0;
 		};
-		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 */ = {
+		A461E3110C485D2A21EB942C /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -718,6 +660,64 @@
 			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 = EBFEABB7D6CC1144D83FBA82 /* Pods-Status-StatusIm-StatusImTests.debug.xcconfig */;
+			baseConfigurationReference = DAE7378308FEB005CE0A6E42 /* 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 = 84C3C20891247EC6BFF93B51 /* Pods-Status-StatusIm-StatusImTests.release.xcconfig */;
+			baseConfigurationReference = 93347A9564A62A24509EFA9C /* 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 = 886398AFEF2B823AC8A4912C /* Pods-Status-StatusIm.debug.xcconfig */;
+			baseConfigurationReference = AA6DC18226EB1EFB2A8FE64D /* 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 = 08A713A336BFEE0924821EC9 /* Pods-Status-StatusIm.release.xcconfig */;
+			baseConfigurationReference = 1CDF317A2E103217DF386083 /* 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 = 4D7FC122A838AC3BFC46D82B /* Pods-Status-StatusImPR.debug.xcconfig */;
+			baseConfigurationReference = C618F2C2EF820C722B1E7624 /* 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 = 103861DFF36B6063BED2602B /* Pods-Status-StatusImPR.release.xcconfig */;
+			baseConfigurationReference = 06AF19FA626AFFC91E66916B /* Pods-Status-StatusImPR.release.xcconfig */;
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = "AppIconPR$(BUNDLE_ID_SUFFIX)";
 				BUNDLE_ID_SUFFIX = "";
@@ -46,7 +46,6 @@
    "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,7 +121,14 @@ export function screenGestureOnEnd(data) {
  return function (event) {
    'worklet';

-    const { screenLeft, screenState, screenWidth, leftVelocity, rightVelocity, screenClosedCallback } = data;
+    const {
+      'screen-left': screenLeft,
+      'screen-state': screenState,
+      'screen-width': screenWidth,
+      'left-velocity': leftVelocity,
+      'right-velocity': rightVelocity,
+      'screen-closed-callback': screenClosedCallback,
+    } = data;
    const absoluteX = event.absoluteX ?? 0;
    const velocityX = event.velocityX ?? 0;
    const closeScreen = velocityX > rightVelocity || (velocityX > leftVelocity && absoluteX >= screenWidth / 2);
@@ -420,6 +420,8 @@
    "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,6 +69,35 @@ 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,18 +12,19 @@
   :height   view-height})

 (defn button-container
-  [position]
+  [{:keys [left right theme]}]
  (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)
+    :background-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40 theme)
    :position         :absolute
    :top              56
-    :z-index          3}
-   position))
+    :z-index          3
+    :left             left
+    :right            right}))

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

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

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

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

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

 (defn header
-  [{:keys [theme-color f-display-picture-comp cover-uri title-comp]} top-inset scroll-y]
+  [{:keys [theme-color f-display-picture-comp cover-uri title-comp theme]} 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)])
@@ -38,21 +39,23 @@
        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))
+              :background-color (or theme-color
+                                    (colors/theme-colors colors/white colors/neutral-95 theme))
              :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)}
+     [reanimated/view {:style (style/header-bottom-part border-animation theme)}
      [title-comp]]
-     [reanimated/view {:style (style/entity-picture size-animation)}
+     [reanimated/view {:style (style/entity-picture size-animation theme)}
      [:f> f-display-picture-comp image-animation]]]))

 (defn- f-animated-header-list
  [{:keys [header-comp main-comp back-button-on-press] :as params}]
-  (let [window-height           (:height (rn/get-window))
+  (let [theme                   (quo.theme/use-theme-value)
+        window-height           (:height (rn/get-window))
        {:keys [top bottom]}    (safe-area/get-insets)
        ;; view height calculation is different because window height is different on iOS and Android:
        view-height             (if platform/ios?
@@ -69,12 +72,12 @@
     [rn/touchable-opacity
      {:active-opacity 1
       :on-press       back-button-on-press
-       :style          (style/button-container {:left 20})}
-      [quo/icon :i/arrow-left {:size 20 :color (colors/theme-colors colors/black colors/white)}]]
+       :style          (style/button-container {:left 20 :theme theme})}
+      [quo/icon :i/arrow-left {:size 20 :color (colors/theme-colors colors/black colors/white theme)}]]
     [rn/touchable-opacity
      {:active-opacity 1
-       :style          (style/button-container {:right 20})}
-      [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]]
+       :style          (style/button-container {:right 20 :theme theme})}
+      [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white theme)}]]
     [reanimated/blur-view
      {:blurAmount   32
       :blurType     :light
@@ -86,7 +89,7 @@
      {:data                  [nil]
       :render-fn             main-comp
       :key-fn                str
-       :header                (reagent/as-element (header params top scroll-y))
+       :header                (reagent/as-element (header (assoc params :theme theme) 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/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}})
+  {: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}})

 (defn- view-internal
  [_]
  (fn [{:keys [size theme customization-color picture icon-name]
-        :or   {size                :size/s-20
+        :or   {size                :size-20
               customization-color :blue
               picture             nil
               icon-name           :i/group}}]
@@ -5,19 +5,19 @@
            [react-native.core :as rn]))

 (def ^:private sizes
-  {: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}})
+  {:size-48 {:component 48
+             :icon      20}
+   :size-32 {:component 32
+             :icon      20}
+   :size-24 {:component 24
+             :icon      16}
+   :size-20 {:component 20
+             :icon      12}})

 (defn icon-avatar-internal
  [{:keys [size icon color opacity border? theme]
    :or   {opacity 20
-           size    :size/s-32}}]
+           size    :size-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?}
+   :ring?            render ident ring around avatar? NOTE: this option may not work if override-ring? is not nil}

  supported color formats:
  #RRGGBB
@@ -29,10 +29,11 @@
   only icon
   [button {:icon-only? true} :i/close-circle]"
  [_ _]
-  (let [pressed? (reagent/atom false)]
+  (let [pressed-state? (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]
+               customization-color theme accessibility-label icon-only? container-style inner-style
+               pressed? on-press-in on-press-out]
        :or   {type                :primary
               size                40
               customization-color (cond (= type :primary)  :blue
@@ -46,14 +47,18 @@
                                           :background          background
                                           :type                type
                                           :theme               theme
-                                           :pressed?            @pressed?
+                                           :pressed?            (if pressed? pressed? @pressed-state?)
                                           :icon-only?          icon-only?})
            icon-size (when (= 24 size) 12)]
        [rn/touchable-without-feedback
         {:disabled            disabled?
          :accessibility-label accessibility-label
-          :on-press-in         #(reset! pressed? true)
-          :on-press-out        #(reset! pressed? nil)
+          :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            on-press
          :on-long-press       on-long-press}
         [rn/view
@@ -76,7 +81,7 @@
             [customization-colors/overlay
              {:customization-color customization-color
               :theme               theme
-               :pressed?            @pressed?}])
+               :pressed?            (if pressed? pressed? @pressed-state?)}])
           (when (= background :photo)
             [blur/view
              {:blur-radius   20
@@ -1,87 +0,0 @@
-(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))
@@ -0,0 +1,107 @@
+(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.snippet
+(ns quo2.components.code.common.view
  (:require [cljs-bean.core :as bean]
            [clojure.string :as string]
            [quo2.components.buttons.button.view :as button]
-            [quo2.components.code.code.style :as style]
+            [quo2.components.code.common.style :as style]
            [quo2.components.markdown.text :as text]
            [react-native.core :as rn]
            [react-native.linear-gradient :as linear-gradient]
@@ -10,39 +10,41 @@
            [reagent.core :as reagent]))

 (defn- render-nodes
-  [nodes]
+  [nodes preview?]
  (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]))}
+                           :style  (style/text-style (get-in node [:properties :className]) preview?)}
                    last-line? (assoc :number-of-lines 1))]
-                 (render-nodes children))
+                 (render-nodes children preview?))
           ;; Remove newlines as we already render each line separately.
           (string/trim-newline value)))
       nodes))

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

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

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

 (defn- f-native-renderer
-  [{:keys [rows max-lines on-copy-press]
+  [{:keys [rows max-lines on-copy-press preview? theme]
    :or   {max-lines ##Inf}}]
  (let [font-scale          (:font-scale (rn/get-window))
        total-rows          (count rows)
-        number-rows-to-show (min (count rows) max-lines)
-        line-number-width   (calc-line-number-width font-scale number-rows-to-show)
+        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))
        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)}
-     [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]]]))
+    [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]]])]))

-(defn snippet
-  [{:keys [language max-lines on-copy-press]} children]
+(defn view
+  [{:keys [language max-lines on-copy-press preview? theme]} children]
  [highlighter/highlighter
   {:language          language
    :renderer          (fn [^js/Object props]
@@ -103,8 +113,11 @@
                          [:f> f-native-renderer
                           {:rows          (-> props .-rows bean/->clj)
                            :on-copy-press #(when on-copy-press (on-copy-press children))
-                            :max-lines     max-lines}]))
+                            :max-lines     max-lines
+                            :preview?      preview?
+                            :theme         theme}]))
    :show-line-numbers false
    :style             {}
    :custom-style      {:background-color nil}}
   children])
+
@@ -0,0 +1,15 @@
+(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))
@@ -0,0 +1,11 @@
+(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,6 +1,10 @@
 (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)
@@ -17,6 +21,7 @@
  [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
-  [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})
+  [{: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))
@@ -5,7 +5,7 @@
    [quo2.components.dividers.divider-line.style :as style]))

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

 (def view (quo.theme/with-theme view-internal))
@@ -0,0 +1,98 @@
+(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"))))
@@ -0,0 +1,31 @@
+(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})
@@ -0,0 +1,204 @@
+(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/s-20}
+         :size      :size-20}
        networks]])))

 (def view (quo.theme/with-theme internal-view))
@@ -3,6 +3,7 @@
            [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]))
@@ -10,11 +11,12 @@
 (def header-height 56)

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

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

-(defn header
+(defn- header-internal
  [{:keys [left-width right-width]}]
  (let [layout        (reagent/atom {:left  {:width  (or left-width 8)
                                             :height header-height}
@@ -153,7 +156,7 @@
      [{:keys [left-accessories left-component border-bottom
               right-accessories right-component insets get-layout
               title subtitle title-component style title-align
-               background]
+               background theme]
        :or   {title-align   :center
               border-bottom false}}]
      (let [status-bar-height (get insets :top 0)
@@ -161,7 +164,8 @@
        [reanimated/view
         {:style (header-wrapper-style {:height        height
                                        :background    background
-                                        :border-bottom border-bottom})}
+                                        :border-bottom border-bottom
+                                        :theme         theme})}
         [rn/view
          {:pointer-events :box-none
           :height         status-bar-height}]
@@ -192,7 +196,6 @@
               :subtitle    subtitle
               :title-align title-align
               :component   title-component}]]
-
            [rn/view
             {:style          right-style
              :on-layout      (handle-layout :right get-layout)
@@ -200,3 +203,5 @@
             [header-actions
              {:accessories right-accessories
               :component   right-component}]]]]]]))))
+
+(def header (quo.theme/with-theme header-internal))
@@ -0,0 +1,161 @@
+(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)))))
@@ -0,0 +1,40 @@
+(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))})
@@ -0,0 +1,163 @@
+(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 (or (= :dark theme) colors/dark?) 60 50)))
+                                       (if (= :dark theme) 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?]
+  [locked? theme]
  {:overflow         :hidden
   :height           keycard-height
   :align-items      :flex-start
@@ -13,22 +13,26 @@
   :border-width     1
   :border-color     (if locked?
                       colors/white-opa-5
-                       (colors/theme-colors colors/neutral-20 colors/neutral-80))
+                       (colors/theme-colors colors/neutral-20 colors/neutral-80 theme))
   :border-style     :solid
   :border-radius    16
   :padding          16
   :background-color (if locked?
-                       (colors/theme-colors colors/danger colors/danger-opa-40)
-                       (colors/theme-colors colors/neutral-5 colors/neutral-90))})
+                       (colors/theme-colors colors/danger colors/danger-opa-40 theme)
+                       (colors/theme-colors colors/neutral-5 colors/neutral-90 theme))})

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

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

-(defn keycard
+(defn- view-internal
  "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?]}]
+  [{:keys [holder-name locked? theme]}]
  (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?)}
+    [rn/view {:style (style/card-container locked? theme)}
     [rn/image
      {:source (resources/get-image :keycard-logo)
-       :style  (style/keycard-logo locked?)}]
+       :style  (style/keycard-logo locked? theme)}]
     [rn/image
      {:source (resources/get-image
-                (if (or locked? (colors/dark?)) :keycard-chip-dark :keycard-chip-light))
+                (if (or locked? (= :dark theme)) :keycard-chip-dark :keycard-chip-light))
       :style  style/keycard-chip}]
     [rn/image
      {:source (resources/get-image :keycard-watermark)
-       :style  (style/keycard-watermark locked?)}]
+       :style  (style/keycard-watermark locked? theme)}]
     [tag/tag
      {:size                32
       :type                (when locked? :icon)
@@ -36,3 +38,5 @@
       :accessibility-label :holder-name
       :icon-color          colors/white-70-blur
       :override-theme      (when locked? :dark)}]]))
+
+(def keycard (quo.theme/with-theme view-internal))
@@ -2,19 +2,23 @@
  (:require [quo2.foundations.colors :as colors]))

 (defn container
-  [state theme]
+  [{:keys [state blur? 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)]
-    {:width              319
-     :height             48
+    {:height             48
     :border-radius      12
-     :background-color   (colors/theme-colors light-bg dark-bg theme)
-     :border-width       1
+     :background-color   (if blur? blur-bg (colors/theme-colors light-bg dark-bg theme))
+     :border-width       (if blur? 0 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,37 +6,45 @@
    [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]))
+    [quo2.components.list-items.account-list-card.style :as style]
+    [reagent.core :as reagent]))

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

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

 (def sizes
-  {:size/s-32 {:size             32
-               :user-avatar-size :small
-               :border-radius    {:rounded 16 :squared 10}
-               :hole-radius      {:rounded 18 :squared 12}
-               :margin-left      -8
-               :hole-size        36
-               :hole-x           22
-               :hole-y           -2}
-   :size/s-24 {:size             24
-               :user-avatar-size :xs
-               :border-radius    {:rounded 12 :squared 8}
-               :hole-radius      {:rounded 13 :squared 9}
-               :margin-left      -4
-               :hole-size        26
-               :hole-x           19
-               :hole-y           -1}
-   :size/s-20 {:size             20
-               :user-avatar-size :xxs
-               :border-radius    {:rounded 10 :squared 8}
-               :hole-radius      {:rounded 11 :squared 9}
-               :margin-left      -4
-               :hole-size        22
-               :hole-x           15
-               :hole-y           -1}
-   :size/s-16 {:size             16
-               :user-avatar-size :xxxs
-               :border-radius    {:rounded 8 :squared 8}
-               :hole-radius      {:rounded 9 :squared 9}
-               :margin-left      -4
-               :hole-size        18
-               :hole-x           11
-               :hole-y           -1}
-   :size/s-14 {:size             14
-               :user-avatar-size :xxxs
-               :border-radius    {:rounded 7 :squared 7}
-               :hole-radius      {:rounded 8 :squared 8}
-               :margin-left      -2
-               :hole-size        16
-               :hole-x           11
-               :hole-y           -1}})
+  {: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}})
@@ -1,67 +1,13 @@
 (ns quo2.components.list-items.preview-list.view
  (:require [quo2.components.avatars.account-avatar.view :as account-avatar]
            [quo2.components.avatars.user-avatar.view :as user-avatar]
-            [quo2.components.icon :as quo2.icons]
-            [quo2.components.markdown.text :as quo2.text]
-            [quo2.foundations.colors :as colors]
-            [quo2.theme :as quo.theme]
            [quo2.components.list-items.preview-list.properties :as properties]
+            [quo2.components.tags.number-tag.view :as number-tag]
+            [quo2.theme :as quo.theme]
            [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])
@@ -70,22 +16,22 @@
                                 [size-key :border-radius (properties/border-type type)])]
    (case type
      :user                        [user-avatar/user-avatar
-                                    (merge {:ring?             false
-                                            :status-indicator? false
-                                            :size              user-avatar-size}
-                                           item)]
+                                    (assoc item
+                                           :ring?             false
+                                           :status-indicator? false
+                                           :size              user-avatar-size)]

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

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

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

 (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 []
+    (fn [{:keys [theme customization-color status token metrics? values on-press]}]
      (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 " " (string/upper-case (clj->js token)))]]]
+            (str crypto-value " " (if token (string/upper-case (clj->js token)) ""))]]]
         [rn/view
          {:style {:align-items     :flex-end
                   :justify-content :space-between}}
@@ -3,7 +3,8 @@
            [react-native.core :as rn]
            [react-native.masked-view :as masked-view]
            [react-native.reanimated :as reanimated]
-            [reagent.core :as reagent]))
+            [reagent.core :as reagent]
+            [quo2.theme :as quo.theme]))

 (def message-skeleton-height 54)

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

-(defn skeleton
-  [parent-height]
+(defn- view-internal
+  [{:keys [parent-height theme]}]
  (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)
+                                 colors/neutral-90
+                                 theme)
              :flex             1}}
     (doall
      (for [n (range number-of-skeletons)]
-        [:f> f-message-skeleton {:key n}]))]))
+        [:f> f-message-skeleton {:key n :theme theme}]))]))
+
+(def view (quo.theme/with-theme view-internal))
@@ -34,8 +34,8 @@
                                    :color   color})}])]])

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

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

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

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

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

 (def footer-container
@@ -73,24 +73,33 @@
                 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]}]
-  [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)])
+  (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)]))

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

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

 (defn view
-  [{:keys [photos]}]
-  [rn/view {:style style/photos-container}
-   (map-indexed
-    (fn [index photo]
-      ^{:key index}
-      [rn/image
-       {:source photo
-        :style  (style/photo index)}])
-    photos)])
+  [{: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)]])
@@ -68,8 +68,7 @@
 (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
@@ -78,7 +77,6 @@
                               (cond-> (style/icon context-theme)
                                 icon-color
                                 (assoc :color icon-color))]
-
                              user
                              [user-avatar/user-avatar user])
       :title           title
@@ -1,8 +1,10 @@
 (ns quo2.components.profile.showcase-nav.style
  (:require [quo2.foundations.colors :as colors]))

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

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

 (defn- render-button
-  [{:keys [icon id]} _ _ {:keys [state on-press active-id]}]
+  [{:keys [icon id]} index _ {: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)))
+                               (on-press id index)))
      :container-style     style/button-container}
     icon]))

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

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

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

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

 (defn reaction
-  [neutral?]
+  [neutral? theme]
  (merge reaction-styling
-         (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))))
+         {: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})
@@ -28,9 +28,9 @@
         [reanimated/view {:style (style/animated-circle scale opacity color)}]))))))

 (defn f-record-button-big
-  [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]
+  [{: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]}]
  (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,13 +46,14 @@
                    (range 0 5))
        rings-color (cond
                      @ready-to-lock?   (colors/theme-colors colors/neutral-80-opa-5-opaque
-                                                             colors/neutral-80)
+                                                             colors/neutral-80
+                                                             theme)
                      @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 (colors/dark?)) @ready-to-lock?) colors/black colors/white)
+        icon-color (if (and (not (= :dark theme)) @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,7 +17,8 @@
            [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]))
+            [react-native.platform :as platform]
+            [quo2.theme :as quo.theme]))

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

-(defn record-audio
+(defn- record-audio-internal
  [{: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]}]
+           audio-file on-lock max-duration-ms theme]}]
  [:f>
   ;; TODO we need to refactor this, and use :f> with defined function, currenly state is reseted each
   ;; time parent component
@@ -574,20 +575,23 @@
           [:f> send-button/f-send-button recording? ready-to-send? reviewing-audio?
            @force-show-controls?]
           [:f> record-button-big/f-record-button-big
-            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]
+            {: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}]
           [:f> record-button/f-record-button recording? reviewing-audio?]]])))])
+
+(def record-audio (quo.theme/with-theme record-audio-internal))
@@ -4,14 +4,16 @@
            [react-native.audio-toolkit :as audio]
            [taoensso.timbre :as log]
            [react-native.platform :as platform]
-            [react-native.slider :as slider]))
+            [react-native.slider :as slider]
+            [quo2.theme :as quo.theme]))

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

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

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

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

 (defn selection-indicator
-  [active?]
+  [active? theme]
  {:margin-left      :auto
   :height           14
   :width            14
   :background-color (if active?
-                       (colors/theme-colors colors/primary-50 colors/primary-60)
-                       (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40))
+                       (colors/theme-colors colors/primary-50 colors/primary-60 theme)
+                       (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40 theme))
   :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)
-   :border-color      (colors/theme-colors colors/neutral-10 colors/neutral-80)})
+   :background-color  (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)
+   :border-color      (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)})

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

 (defn privacy-option-card
-  [active?]
+  [active? theme]
  {:border-radius 16
   :border-width  1
   :border-color  (if active?
-                    (colors/theme-colors colors/primary-50 colors/primary-60)
-                    (colors/theme-colors colors/neutral-10 colors/neutral-80))})
+                    (colors/theme-colors colors/primary-50 colors/primary-60 theme)
+                    (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
@@ -1,29 +1,30 @@
-(ns quo2.components.settings.privacy-option
+(ns quo2.components.settings.privacy-option.view
  (:require [quo2.components.icon :as icons]
            [quo2.components.markdown.text :as text]
            [quo2.components.selectors.selectors.view :as selectors]
-            [quo2.components.settings.style :as style]
+            [quo2.components.settings.privacy-option.style :as style]
            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]))
+            [react-native.core :as rn]
+            [quo2.theme :as quo.theme]))

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

 (defn- unordered-list
-  [container-style list-items]
+  [{:keys [container-style theme]} 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]
+      [bullet theme]
      [text/text {:size :paragraph-2} item]])])

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

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

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

-(defn card
-  [{:keys [active? header footer list-items icon on-select on-toggle]
+(defn- view-internal
+  [{:keys [active? header footer list-items icon on-select on-toggle theme]
    :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?)
+   [rn/view (style/privacy-option-card active? theme)
    [card-header
-     {:active? active?
+     {:theme   theme
+      :active? active?
      :icon    icon
      :label   header}]
-    [unordered-list (when-not footer {:margin-bottom 8}) list-items]
+    [unordered-list
+     {:theme           theme
+      :container-style (when-not footer {:margin-bottom 8})} list-items]
    (when footer
      [card-footer
-       {:active?   active?
+       {:theme     theme
+        :active?   active?
        :label     footer
        :on-toggle on-toggle}])]])
+
+(def view (quo.theme/with-theme view-internal))
@@ -1,19 +1,17 @@
 (ns quo2.components.settings.settings-item.style
  (:require [quo2.foundations.colors :as colors]))

-(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 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)})
+  [{:keys [container-style]}]
+  (merge {:padding         12
+          :flex-direction  :row
+          :justify-content :space-between}
+         container-style))
+
+(defn left-sub-container
+  [{:keys [tag description]}]
+  {:flex-direction :row
+   :align-items    (if (or tag description) :flex-start :center)})

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

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

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

 (defn action-component
@@ -104,7 +106,7 @@
   {:style               (style/container props)
    :on-press            on-press
    :accessibility-label accessibility-label}
-   [rn/view {:style style/sub-container}
+   [rn/view {:style (style/left-sub-container props)}
    [image-component props]
    [rn/view {:style style/left-container}
     [text/text {:weight :medium} title]
@@ -26,7 +26,7 @@
                                     [theme :background-color])
           :border-radius    (case size
                               32 10
-                               28 8
+                               28 10
                               24 8
                               20 6)
           :padding          2}
@@ -70,8 +70,7 @@
           on-change
           scroll-on-press?
           size
-           style
-          ]}]
+           style]}]
  [rn/view
   {:style (style/tab {:size             size
                       :default-tab-size default-tab-size
@@ -132,6 +131,7 @@
               scroll-on-press?
               scrollable?
               style
+               container-style
               size
               blur?
               in-scroll-view?
@@ -159,35 +159,36 @@
             :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           {:padding-top (dec unread-count-offset)}
-             :horizontal                        true
-             :scroll-event-throttle             64
+             :content-container-style
+             (assoc 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)}
@@ -198,6 +199,5 @@
                          :number-of-items     (count data)
                          :on-change           on-change
                          :size                size
-                          :style               style}
-                        ])
+                          :style               style}])
                      data)]))))
@@ -79,30 +79,32 @@
           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)}
+   {:style               (merge (style/container {:theme               theme
+                                                  :type                type
+                                                  :size                size
+                                                  :state               state
+                                                  :blur?               blur?
+                                                  :customization-color customization-color})
+                                container-style)
+    :accessibility-label :context-tag}
   (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}]]
+       {:full-name           full-name
+        :profile-picture     profile-picture
+        :size                (if (= size 24) :xxs 28)
+        :status-indicator?   false
+        :ring?               false
+        :customization-color customization-color}]]

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

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

     :audio
     [tag-skeleton {:theme theme :text (str duration)}
@@ -113,7 +115,7 @@
     [tag-skeleton {:theme theme :size size :text group-name}
      [group-avatar/view
       {:icon-name           :i/members
-        :size                (if (= size 24) :size/s-20 :size/s-28)
+        :size                (if (= size 24) :size-20 :size-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/s-32}])
+                :size     :size-32}])
    (h/is-truthy (h/get-by-text "Multiple Networks"))))
@@ -14,7 +14,7 @@
   [preview-list/view
    {:type   :network
     :number (count networks)
-     :size   :size/s-16} networks]
+     :size   :size-16} networks]
   [text/text
    {:weight :medium
     :size   :paragraph-2
@@ -8,13 +8,13 @@
    (h/render [number-tag/view
               {:type   :rounded
                :number "3"
-                :size   :size/s-32
+                :size   :size-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/s-24
+                :size   :size-24
                :blur?  true}])
    (h/is-truthy (h/get-by-text "+48"))))
@@ -2,26 +2,26 @@
  (:require [quo2.foundations.colors :as colors]))

 (def sizes
-  {: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}})
+  {: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}})

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

 (defn container
-  [{: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)}})
+  [{: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))})
@@ -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]))
+            [quo2.theme :as quo.theme]
+            [react-native.core :as rn]))

 (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/s-32)
+        {:size   (if (= size :size-32)
                   :paragraph-2
                   :label)
         :weight :medium
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Ajay Sivan	fdc54bba9e	Replace status-im.ui.components.react in status-im2	2023-09-27 14:30:59 +05:30
codemaster	96f476fc2b	feat: Implement quo2 code-snippet-preview component (#17235 )	2023-09-27 07:41:52 +10:00
Yevheniia Berdnyk	70d6291c57	e2e: some todos and updates	2023-09-26 18:55:42 +03:00
Parvesh Monu	90cb5d3d88	fix group card remains in shell after leaving the group (#17417 )	2023-09-26 20:33:56 +05:30
Ibrahem Khalil	da5086aae2	[17377-17378] Fix reply view in activity center showing only one phot… (#17388 )	2023-09-26 15:59:36 +03:00
Alex Tumanov	baf3fb9bbd	Remove test tmp folder before each new test run (#17263 )	2023-09-26 13:49:24 +02:00
Flavio Fraschetti	f12c7401d1	WIP: refactor notifications (#17413 ) to accomplish #17288 migrated : notifications Issue Opened: A bug has been identified within the activity-logs component and is currently under investigation.	2023-09-25 19:04:03 +01:00
mmilad75	3082605d1e	Handle account-card component pressed state bg color (#17234 ) Handle account-card component pressed state bg color	2023-09-25 16:30:54 +03:30
Mohsen Ghafouri	1dfab2b416	[#17333 ] fix: disable ring for small avatar (#17385 )	2023-09-25 15:47:38 +03:00
Mohamed Javid	a9b63e0f22	Update "Preview List" component to use "Number Tag" for overflow item (#17257 ) This commit updates - the preview-list component to use "number-tag" for overflow items in the list as a follow-up of the PR Update "Preview list" component. - the usage of the preview-list component in the context-tag (multiuser and multinetwork type) is updated as it was broken. - the size APIs of preview-list and number-tag and their usage across the codebase to respect the new guidelines. --------- Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>	2023-09-25 17:28:20 +05:30
Jamie CapraniandUlises M	f47a4a18e8	chore: add docs with size (#17279 ) * chore: update guidelines for sizes * chore: update to size uses in codebase to follow new convention --------- Co-authored-by: Ulises M <ulises.ssb@hotmail.com>	2023-09-25 05:22:07 -06:00
flexsurfer	723573833e	[#17357 ] move status-im.async-storage.core (#17380 )	2023-09-25 12:45:39 +02:00
Ibrahem Khalil	53f40b55f2	Adjust PR template to add before/after (#17402 )	2023-09-25 13:42:37 +03:00
Mohsen Ghafouri	6fd5a97b59	[#17288 ] refactor: migrate previews to new api (#17366 )	2023-09-25 13:19:50 +03:00
Mohsen Ghafouri	848cac31ba	[#17300 ] fix: syncing device indicator color and some alignment (#17340 )	2023-09-25 11:55:54 +03:00
Omar Basem	7e646f7823	revert podfile (#17406 )	2023-09-25 12:40:27 +04:00
flexsurfer	b2cae88924	[#17383 ] migrate status-im.utils.types (#17389 )	2023-09-25 09:32:55 +02:00
Omar Basem	1aadffd300	Quo2: keypair blur (#17294 ) * quo2: keypair blur	2023-09-25 08:32:04 +04:00
Volodymyr Kozieiev	08689e568a	Links to recorded meetings added to docs (#17399 )	2023-09-22 16:42:58 +01:00
frank	7543dc9001	fix: identifier rings are displayed on avatars for users with a set ENS (#17346 )	2023-09-22 21:51:54 +08:00
Parvesh Monu	a99ae74da7	remove messages screen global states (#17365 )	2023-09-21 21:21:42 +05:30
Parvesh Monu	db41eb303d	fix unread badges behavior on Jump-to screen (#17363 )	2023-09-21 17:53:38 +05:30
frank	e5ef15b531	Prevent Logged In Account Local Pairing / Syncing With Another Account (#17342 )	2023-09-21 10:02:42 +08:00
Jamie Caprani	e41fb03b6f	adjust colors resolver to handle communities color (#17339 )	2023-09-21 01:03:02 +02:00
Jamie Caprani	0ae1e9bc5a	chore: updating theming in quo2 components and chat (#17199 )	2023-09-21 00:41:00 +02:00
flexsurfer	ddd0796381	[#17355 ] status-im.utils.image-processing (#17356 )	2023-09-20 16:14:53 +02:00
flexsurfer	92cc49184d	move messages legacy view (#17354 )	2023-09-20 15:42:57 +02:00
Mohsen Ghafouri	41282a9f5d	[#17309 ] fix: wrong cursor position in a pre-filled composer (#17329 )	2023-09-20 16:24:03 +03:00
flexsurfer	5bb954f8a7	[#17351 ] remove status-im.utils.platform (#17352 )	2023-09-20 14:17:52 +02:00
flexsurfer	6a169bd0bd	[#17347 ] move [status-im.utils.http :as http] to status-im2 (#17350 )	2023-09-20 14:16:07 +02:00
Siddarth Kumar	a15c9788fe	add support for Xcode 15 (#17343 ) After upgrading to Xcode 15 make run-ios would fail with ``` ❌ /Users/siddarthkumar/code/status-im/PR/status-mobile/ios/Pods/boost/boost/container_hash/hash.hpp:131:33: no template named 'unary_function' in namespace 'std'; did you mean '__unary_function'? struct hash_base : std::unary_function<T, std::size_t> {}; ``` This commit fixes the issue and makes existing codebase compatible with newer Xcode. reference issue in react-native repo : facebook/react-native#37748	2023-09-20 14:41:12 +05:30
Jamie Caprani	6279264ff1	chore: remove colors/dark? method from colors file and update uses (#17202 )	2023-09-19 08:16:18 -07:00
frank	cb9ae21cf2	process backedup(profile/settings) signal (#17306 )	2023-09-19 22:05:59 +08:00
Jamie Caprani	6eb53ca2db	fix: update use of setting-item component to match new api (#17244 )	2023-09-19 05:05:07 -07:00
Tetiana Churikova	5d6800cee0	e2e: update cython and pyyaml (#17297 )	2023-09-19 13:52:30 +02:00
frank	d5af6b62a7	fix: display name not displayed after sync (#17311 )	2023-09-19 17:18:38 +08:00
BalogunofAfrica	f2366219a3	fix: carousel text overflow (#17293 )	2023-09-19 09:15:50 +01:00
BalogunofAfrica	95e0715163	fix: intro screen carousel (#17269 ) * fix: last slide showing for a split second * fix: use scale resize-method to load image faster on android	2023-09-19 08:51:55 +01:00
Brian Sztamfater	9479f02b39	feat: wallet select address screen UI in empty state (#17248 ) Signed-off-by: Brian Sztamfater <brian@status.im>	2023-09-18 16:17:11 -03:00
Parvesh Monu	9df1b854bd	Remove use of camel-snake-kebab from shell worklet (#17310 )	2023-09-18 16:51:39 +05:30
frank	442600bc28	use new API for ens name registration (#17127 ) * use new API for ens name registration https://github.com/status-im/status-go/compare/4cc53630...223d215e * update status-go-version.json * update status-go-version.json * fix Error:Field validation for 'KeycardPairingDataFile' failed on the 'required' tag * update status-go-version.json * fix lint issue	2023-09-16 11:37:06 +08:00
Mohsen Ghafouri	b73ea572ee	[#17288 ] refactor: migrate previews (markdown, messages) to new api (#17280 )	2023-09-15 19:53:30 +03:00
Siddarth Kumar	a24ddbeefa	address design feedback on profile share UI (#16257 ) This commit adds UI Touchups to profile share screen according to a recent Design Review.	2023-09-15 18:02:13 +05:30
Mohsen Ghafouri	a53ba0c4e1	[#17218 ] fix: android channel name ellipsize completely (#17262 )	2023-09-15 14:52:26 +03:00
Volodymyr Kozieiev	4006495b22	fix keyword renaming performance (#17291 )	2023-09-15 12:02:44 +01:00
frank	72b8979c79	add doc: How to catch crash on ios use xcode (#17278 ) * add doc: How to catch crash on ios use xcode * addressed feedback from @ilmotta and @siddarthkay	2023-09-15 12:04:11 +08:00
Omar Basem	4d9ebdb9f9	Quo2: Account list card blur (#17271 ) * Quo2: account list card blur	2023-09-15 07:43:48 +04:00
Icaro Motta	e2f837fcbc	Raise clj-kondo linter levels (#17289 ) Recently, we changed clj-kondo default fail-level from "warning" to "error", but we missed the fact that we needed to raise the default level for all linters set to "warning".	2023-09-14 11:28:43 -03:00
flexsurfer	07d1b13520	temporary remove "curated.communities.update" (#17286 )	2023-09-14 15:57:29 +02:00
Lungu Cristian	5d4fbe7ef1	fix: quo2 reaction styles (size + colors) (#17224 )	2023-09-14 12:21:11 +03:00
Mohamed Javid	0003800f05	Implement Emoji Picker (#17195 ) This commit adds Emoji Picker in the app for usage in Message Composer and Wallet Account. --------- Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>	2023-09-13 23:08:13 +05:30
Icaro Motta	dab4d953ec	Fix incorrect usage of functional component (#17281 ) Every keypress on an input field of the preview descriptor re-rendered the whole functional component and the input focus was lost. As we know from past issues, we should never use this pattern: (defn component [] [:f> (fn [] ...)])	2023-09-13 13:22:53 -03:00
Brian Sztamfater	baa9dff237	feat: implement address input (#17191 ) Signed-off-by: Brian Sztamfater <brian@status.im>	2023-09-13 10:26:29 -03:00
frank	9706111256	fix unable to reset pwd on ios (#17259 )	2023-09-13 09:06:32 +08:00
Omar Basem	344c9ba9b7	Quo2: Settings item blur (#17258 ) * quo2: settings item blur	2023-09-12 21:49:10 +04:00
Icaro Motta	6ea31695d6	Do not warn about subscriptions being used in non-reactive contexts (#17240 ) Force re-frame to stop warning about subscriptions in non-reactive contexts while executing subscription tests (i.e. unit tests using the macro test-helpers.unit/deftest-sub). The net result? No more hundreds of useless warnings in the output of make test. re-frame: Subscribe was called outside of a reactive context. See: https://day8.github.io/re-frame/FAQs/UseASubscriptionInAJsEvent/ The warning is actually useful in production code, but in a subscription test we already know we're never inside a reactive context.	2023-09-12 11:58:06 -03:00
Yevheniia Berdnyk	2c52001e22	e2e: fixes 12.09	2023-09-12 16:46:49 +03:00
Volodymyr Kozieiev	dd1f938e85	Transaction summary component (#17163 ) * Transaction summary component	2023-09-12 14:44:40 +01:00
mmilad75	fcbe6fe2b4	Implement "Drawer top" component (#17196 ) Implement "Drawer top" component	2023-09-12 12:03:15 +03:30
Flavio Fraschetti	dfd91c0e5f	Bump release to 1.25.0 (#17247 )	2023-09-11 14:42:15 +01:00