draft

VERSION

@@ -1 +1 @@
-1.22.0
+1.21.0

doc/new-guidelines.md

@@ -61,57 +61,6 @@ the source file. For a real example, see
    [rn/view (do-something)]])
 ```
 
-### Always add styles inside the `:style` key
-
-Although when compiling ReactNative for mobile some components are able work with 
-their styles in the top-level of the properties map, prefer to add them inside the
-`:style` key in order to separate styles from properties:
-
-```clojure
-;; bad
-[rn/button {:flex               1
-            :padding-vertical   10
-            :padding-horizontal 20
-            :on-press           #(js/alert "Hi!")
-            :title              "Button"}]
-
-;; good
-[rn/button {:style    {:flex               1
-                       :padding-vertical   10
-                       :padding-horizontal 20}
-            :on-press #(js/alert "Hi!")
-            :title    "Button"}]
-
-;; better 
-;; (define them in a style ns & place them inside `:style` key)
-[rn/button {:style    (style/button)
-            :on-press #(js/alert "Hi!")
-            :title    "Button"}
- ]
-```
-
-### Always apply animated styles in the style file
-
-When implementing styles for reanimated views, we should always define
-them in the style file and apply animations with reanimated/apply-animations-to-style
-in the style definition.
-
-```clojure
-;; bad
-(defn circle
-  []
-  (let [opacity (reanimated/use-shared-value 1)]
-    [reanimated/view {:style (reanimated/apply-animations-to-style
-                              {:opacity opacity}
-                              style/circle-container)}]))
-
-;; good
-(defn circle
-  []
-  (let [opacity (reanimated/use-shared-value 1)]
-    [reanimated/view {:style (style/circle-container opacity)}]))
-```
-
 ### Don't use percents to define width/height
 
 In ReactNative, all layouts use the [flexbox

ios/Podfile

@@ -35,16 +35,6 @@ abstract_target 'Status' do
   target 'StatusImPR' do
   end
 
-  post_install do |installer|
-    # some of libs wouldn't be build for x86_64 otherwise and that is
-    # necessary for ios simulators
-    installer.pods_project.targets.each do |target|
-      target.build_configurations.each do |config|
-        config.build_settings['ONLY_ACTIVE_ARCH'] = 'NO'
-      end
-    end
-  end
-
   use_native_modules!
 end
 

ios/StatusIm.xcodeproj/project.pbxproj

@@ -417,9 +417,7 @@
 						TestTargetID = 13B07F861A680F5B00A75B9A;
 					};
 					13B07F861A680F5B00A75B9A = {
-						DevelopmentTeam = 8B5X2M6H2Y;
 						LastSwiftMigration = 1140;
-						ProvisioningStyle = Manual;
 						SystemCapabilities = {
 							com.apple.BackgroundModes = {
 								enabled = 1;
@@ -843,9 +841,8 @@
 				BUNDLE_ID_SUFFIX = .debug;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = StatusIm/StatusIm.entitlements;
-				CODE_SIGN_IDENTITY = "iPhone Distribution";
+				CODE_SIGN_IDENTITY = "Apple Development";
-				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
+				CODE_SIGN_STYLE = Automatic;
-				CODE_SIGN_STYLE = Manual;
 				CUSTOM_PRODUCT_NAME = "Status Debug";
 				DEAD_CODE_STRIPPING = YES;
 				DEVELOPMENT_TEAM = 8B5X2M6H2Y;
@@ -898,8 +895,7 @@
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = im.status.ethereum;
 				PRODUCT_NAME = StatusIm;
-				PROVISIONING_PROFILE = "9da75626-9594-43d9-a827-0f6d43c28f54";
+				PROVISIONING_PROFILE_SPECIFIER = "";
-				PROVISIONING_PROFILE_SPECIFIER = "match Development im.status.ethereum";
 				SWIFT_OBJC_BRIDGING_HEADER = "StatusIm-Bridging-Header.h";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
@@ -917,9 +913,8 @@
 				BUNDLE_ID_SUFFIX = "";
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = StatusIm/StatusIm.entitlements;
-				CODE_SIGN_IDENTITY = "iPhone Developer";
+				CODE_SIGN_IDENTITY = "Apple Development";
-				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
+				CODE_SIGN_STYLE = Automatic;
-				CODE_SIGN_STYLE = Manual;
 				CUSTOM_PRODUCT_NAME = Status;
 				DEAD_CODE_STRIPPING = YES;
 				DEVELOPMENT_TEAM = 8B5X2M6H2Y;
@@ -964,8 +959,7 @@
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = im.status.ethereum;
 				PRODUCT_NAME = StatusIm;
-				PROVISIONING_PROFILE = "e2202b12-7a66-4ff7-af3c-a52e35f32dc1";
+				PROVISIONING_PROFILE_SPECIFIER = "";
-				PROVISIONING_PROFILE_SPECIFIER = "match AdHoc im.status.ethereum";
 				SWIFT_OBJC_BRIDGING_HEADER = "StatusIm-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = 1;

modules/react-native-status/android/src/main/java/im/status/ethereum/module/StatusModule.java

@@ -149,15 +149,11 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
         this.getReactApplicationContext().getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("gethEvent", params);
     }
 
-    private File getPublicStorageDirectory() {
+    private File getLogsFile() {
         final Context context = this.getReactApplicationContext();
         // Environment.getExternalStoragePublicDirectory doesn't work as expected on Android Q
         // https://developer.android.com/reference/android/os/Environment#getExternalStoragePublicDirectory(java.lang.String)
-        return context.getExternalFilesDir(Environment.DIRECTORY_DOWNLOADS);
+        final File pubDirectory = context.getExternalFilesDir(Environment.DIRECTORY_DOWNLOADS);
-
-    }
-    private File getLogsFile() {
-        final File pubDirectory = this.getPublicStorageDirectory();
         final File logFile = new File(pubDirectory, gethLogFileName);
 
         return logFile;
@@ -327,30 +323,6 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
         callback.invoke(finalConfig);
     }
 
-    @ReactMethod
-    public void createAccountAndLogin(final String createAccountRequest) {
-            Log.d(TAG, "createAccountAndLogin");
-            String result = Statusgo.createAccountAndLogin(createAccountRequest);
-            if (result.startsWith("{\"error\":\"\"")) {
-                Log.d(TAG, "createAccountAndLogin success: " + result);
-                Log.d(TAG, "Geth node started");
-            } else {
-                Log.e(TAG, "createAccountAndLogin failed: " + result);
-            }
-    }
-
-    @ReactMethod
-    public void restoreAccountAndLogin(final String restoreAccountRequest) {
-            Log.d(TAG, "restoreAccountAndLogin");
-            String result = Statusgo.restoreAccountAndLogin(restoreAccountRequest);
-            if (result.startsWith("{\"error\":\"\"")) {
-                Log.d(TAG, "restoreAccountAndLogin success: " + result);
-                Log.d(TAG, "Geth node started");
-            } else {
-                Log.e(TAG, "restoreAccountAndLogin failed: " + result);
-            }
-    }
-
     @ReactMethod
     public void saveAccountAndLogin(final String multiaccountData, final String password, final String settings, final String config, final String accountsData) {
         try {
@@ -548,8 +520,6 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
             return;
         }
 
-        Log.d(TAG, "[Opening accounts" + rootDir);
-
         Runnable r = new Runnable() {
             @Override
             public void run() {
@@ -815,10 +785,9 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
     @ReactMethod
     public void getConnectionStringForBootstrappingAnotherDevice(final String configJSON, final Callback callback) throws JSONException {
          final JSONObject jsonConfig = new JSONObject(configJSON);
-         final JSONObject senderConfig = jsonConfig.getJSONObject("senderConfig");
+         final String keyUID = jsonConfig.getString("keyUID");
-         final String keyUID = senderConfig.getString("keyUID");
          final String keyStorePath = this.getKeyStorePath(keyUID);
-        senderConfig.put("keystorePath", keyStorePath);
+         jsonConfig.put("keystorePath", keyStorePath);
 
         executeRunnableStatusGoMethod(() -> Statusgo.getConnectionStringForBootstrappingAnotherDevice(jsonConfig.toString()), callback);
     }
@@ -826,10 +795,9 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
     @ReactMethod
     public void inputConnectionStringForBootstrapping(final String connectionString, final String configJSON, final Callback callback) throws JSONException {
          final JSONObject jsonConfig = new JSONObject(configJSON);
-         final JSONObject receiverConfig = jsonConfig.getJSONObject("receiverConfig");
          final String keyStorePath = pathCombine(this.getNoBackupDirectory(), "/keystore");
-         receiverConfig.put("keystorePath", keyStorePath);
+         jsonConfig.put("keystorePath", keyStorePath);
-         receiverConfig.getJSONObject("nodeConfig").put("rootDataDir", this.getNoBackupDirectory());
+         jsonConfig.put("rootDataDir", this.getNoBackupDirectory());
         executeRunnableStatusGoMethod(() -> Statusgo.inputConnectionStringForBootstrapping(connectionString, jsonConfig.toString()), callback);
     }
 
@@ -1161,23 +1129,6 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
         executeRunnableStatusGoMethod(() -> Statusgo.deleteImportedKey(address, password, keyStoreDir), callback);
     }
 
-    @ReactMethod(isBlockingSynchronousMethod = true) 
-    public String keystoreDir() {
-        final String absRootDirPath = this.getNoBackupDirectory();
-        return pathCombine(absRootDirPath, "keystore");
-    }
-
-    @ReactMethod(isBlockingSynchronousMethod = true) 
-    public String backupDisabledDataDir() {
-        return this.getNoBackupDirectory();
-    }
-
-
-    @ReactMethod(isBlockingSynchronousMethod = true) 
-    public String logFileDirectory() {
-        return getPublicStorageDirectory().getAbsolutePath();
-    }
-
     @ReactMethod(isBlockingSynchronousMethod = true)
     public String generateAlias(final String seed) {
         return Statusgo.generateAlias(seed);

modules/react-native-status/ios/RCTStatus/RCTStatus.m

@@ -309,14 +309,12 @@ RCT_EXPORT_METHOD(getConnectionStringForBootstrappingAnotherDevice:(NSString *)c
                   callback:(RCTResponseSenderBlock)callback) {
 
     NSData *configData = [configJSON dataUsingEncoding:NSUTF8StringEncoding];
-    NSError *error;
+    NSDictionary *configDict = [NSJSONSerialization JSONObjectWithData:configData options:NSJSONReadingMutableContainers error:nil];
-    NSMutableDictionary *configDict = [NSJSONSerialization JSONObjectWithData:configData options:NSJSONReadingMutableContainers error:&error];
+    NSString *keyUID = [configDict objectForKey:@"keyUID"];
-    NSMutableDictionary *senderConfig = configDict[@"senderConfig"];
-    NSString *keyUID = senderConfig[@"keyUID"];
     NSURL *multiaccountKeystoreDir = [self getKeyStoreDir:keyUID];
     NSString *keystoreDir = multiaccountKeystoreDir.path;
 
-    [senderConfig setValue:keystoreDir forKey:@"keystorePath"];
+    [configDict setValue:keystoreDir forKey:@"keystorePath"];
     NSString *modifiedConfigJSON = [configDict bv_jsonStringWithPrettyPrint:NO];
 
     NSString *result = StatusgoGetConnectionStringForBootstrappingAnotherDevice(modifiedConfigJSON);
@@ -328,20 +326,17 @@ RCT_EXPORT_METHOD(inputConnectionStringForBootstrapping:(NSString *)cs
                   callback:(RCTResponseSenderBlock)callback) {
 
     NSData *configData = [configJSON dataUsingEncoding:NSUTF8StringEncoding];
-    NSError *error;
+    NSDictionary *configDict = [NSJSONSerialization JSONObjectWithData:configData options:NSJSONReadingMutableContainers error:nil];
-    NSMutableDictionary *configDict = [NSJSONSerialization JSONObjectWithData:configData options:NSJSONReadingMutableContainers error:&error];
-    NSMutableDictionary *receiverConfig = configDict[@"receiverConfig"];
-    NSMutableDictionary *nodeConfig = receiverConfig[@"nodeConfig"];
     NSFileManager *fileManager = [NSFileManager defaultManager];
     NSURL *rootUrl =[[fileManager URLsForDirectory:NSLibraryDirectory inDomains:NSUserDomainMask] lastObject];
+    NSURL *rootDataDir = rootUrl.path;
     NSURL *multiaccountKeystoreDir = [rootUrl URLByAppendingPathComponent:@"keystore"];
     NSString *keystoreDir = multiaccountKeystoreDir.path;
-    NSString *rootDataDir = rootUrl.path;
 
-    [receiverConfig setValue:keystoreDir forKey:@"keystorePath"];
+    [configDict setValue:keystoreDir forKey:@"keystorePath"];
-    [nodeConfig setValue:rootDataDir forKey:@"rootDataDir"];
+    [configDict setValue:rootDataDir forKey:@"rootDataDir"];
     NSString *modifiedConfigJSON = [configDict bv_jsonStringWithPrettyPrint:NO];
-    NSString *result = StatusgoInputConnectionStringForBootstrapping(cs, modifiedConfigJSON);
+    NSString *result = StatusgoInputConnectionStringForBootstrapping(cs,modifiedConfigJSON);
     callback(@[result]);
 }
 
@@ -862,34 +857,6 @@ RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(generateAlias:(NSString *)publicKey) {
   return StatusgoGenerateAlias(publicKey);
 }
 
-RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(keystoreDir) {
-    NSFileManager *fileManager = [NSFileManager defaultManager];
-    NSURL *rootUrl =[[fileManager
-                      URLsForDirectory:NSLibraryDirectory inDomains:NSUserDomainMask]
-                     lastObject];
-
-    NSURL *commonKeystoreDir = [rootUrl URLByAppendingPathComponent:@"keystore"];
-
-    return commonKeystoreDir.path;
-}
-
-
-RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(backupDisabledDataDir) {
-    NSFileManager *fileManager = [NSFileManager defaultManager];
-    NSURL *rootUrl =[[fileManager
-                      URLsForDirectory:NSLibraryDirectory inDomains:NSUserDomainMask]
-                     lastObject];
-    return rootUrl.path;
-}
-
-RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(logFileDirectory) {
-    NSFileManager *fileManager = [NSFileManager defaultManager];
-    NSURL *rootUrl =[[fileManager
-                      URLsForDirectory:NSLibraryDirectory inDomains:NSUserDomainMask]
-                     lastObject];
-    return rootUrl.path;
-}
-
 RCT_EXPORT_METHOD(generateAliasAsync:(NSString *)publicKey
                   callback:(RCTResponseSenderBlock)callback) {
 #if DEBUG
@@ -967,20 +934,6 @@ RCT_EXPORT_METHOD(identiconAsync:(NSString *)publicKey
     callback(@[result]);
 }
 
-RCT_EXPORT_METHOD(createAccountAndLogin:(NSString *)request) {
-#if DEBUG
-    NSLog(@"createAccountAndLogin() method called");
-#endif
-    StatusgoCreateAccountAndLogin(request);
-}
-
-RCT_EXPORT_METHOD(restoreAccountAndLogin:(NSString *)request) {
-#if DEBUG
-    NSLog(@"restoreAccountAndLogin() method called");
-#endif
-    StatusgoRestoreAccountAndLogin(request);
-}
-
 RCT_EXPORT_METHOD(generateAliasAndIdenticonAsync:(NSString *)publicKey
                   callback:(RCTResponseSenderBlock)callback) {
 #if DEBUG

nix/deps/gradle/deps.json

@@ -11572,57 +11572,57 @@
   },
 
   {
-    "path": "org/slf4j/jcl-over-slf4j/2.0.7",
+    "path": "org/slf4j/jcl-over-slf4j/2.0.6",
     "repo": "https://repo.maven.apache.org/maven2",
     "files": {
-      "jcl-over-slf4j-2.0.7.pom": {
+      "jcl-over-slf4j-2.0.6.pom": {
-        "sha1": "15536e4a74a7aa317322a3d7814db8251de60d6f",
+        "sha1": "c9d9caedcca2a1564e47b55614960958c5f78773",
-        "sha256": "1rzjwbmzf2hb85j6c41mch803vqwqdq1rfrrirfhp1lfpfnzyd23"
+        "sha256": "1swgy5hwv54b1i1117shn3wmwba3v78qvy6cnv8v243j7ac6vzqq"
       },
-      "jcl-over-slf4j-2.0.7.jar": {
+      "jcl-over-slf4j-2.0.6.jar": {
-        "sha1": "f127fe5ee53404a8b3697cdd032dd1dd6a29dd77",
+        "sha1": "839ff57e112f2e28ef372e96d135696a6896b9ad",
-        "sha256": "0hhpc2qdl4aa9mb8dk89wzbd5vkna557vjmjdmfswvfjw5bng021"
+        "sha256": "0s9scdwkxwj3al87ihanj10rscrjh44kligr5asb7qpl28d1xvks"
       }
     }
   },
 
   {
-    "path": "org/slf4j/slf4j-api/2.0.7",
+    "path": "org/slf4j/slf4j-api/2.0.6",
     "repo": "https://repo.maven.apache.org/maven2",
     "files": {
-      "slf4j-api-2.0.7.pom": {
+      "slf4j-api-2.0.6.pom": {
-        "sha1": "facf002401dbff2065d4257690651e3fa775e3f4",
+        "sha1": "2b93d5f66ad2ba259bf4b2c94da39f0d6c544400",
-        "sha256": "10br4q2w50fn3mkvk1xji81wdpy86cm0wyv6m30xa0ha1v7kqh1d"
+        "sha256": "0dipzawn8rxikciij2z06c25rb2vdj83s8ga3a7n10r77p2qcklb"
       },
-      "slf4j-api-2.0.7.jar": {
+      "slf4j-api-2.0.6.jar": {
-        "sha1": "41eb7184ea9d556f23e18b5cb99cad1f8581fc00",
+        "sha1": "88c40d8b4f33326f19a7d3c0aaf2c7e8721d4953",
-        "sha256": "1x26v62ypzpp84yfad8mx53llbacq6580y34v8nc618r7awrhqjx"
+        "sha256": "1nkv0z4dpkvp6pr9ph8087z5r691bv95xdv3gnfi6s5j23a94aig"
       }
     }
   },
 
   {
-    "path": "org/slf4j/slf4j-jdk14/2.0.7",
+    "path": "org/slf4j/slf4j-jdk14/2.0.6",
     "repo": "https://repo.maven.apache.org/maven2",
     "files": {
-      "slf4j-jdk14-2.0.7.pom": {
+      "slf4j-jdk14-2.0.6.pom": {
-        "sha1": "31039eac9f263c48bda14efd90aef0fb7a5a0e6a",
+        "sha1": "96ac9d6ab608e787d54892b35205bc6a560aa007",
-        "sha256": "1vx1ziyx36zf2lrpkvvm4c75hp8pw8vjpiyr5120ss8nwpd33qal"
+        "sha256": "0gnsyy1n5v8xqdy6a6p1752m5c4afihpw0n36n6aqw01y9l86q1h"
       },
-      "slf4j-jdk14-2.0.7.jar": {
+      "slf4j-jdk14-2.0.6.jar": {
-        "sha1": "d91cd16b55ffbd5f46c60d0173fd4eeccacfee2d",
+        "sha1": "13056cb341f2d8795120f8027766a058da874f85",
-        "sha256": "1xvphj12jpnvr1sw8zx42p49in4xi61mjvpxrkk3q3qpyad7017r"
+        "sha256": "0jncm8a2ppliqpzkbqm26sn98mwif8c1nligc1zh4jbzr8mxyzhy"
       }
     }
   },
 
   {
-    "path": "org/slf4j/slf4j-parent/2.0.7",
+    "path": "org/slf4j/slf4j-parent/2.0.6",
     "repo": "https://repo.maven.apache.org/maven2",
     "files": {
-      "slf4j-parent-2.0.7.pom": {
+      "slf4j-parent-2.0.6.pom": {
-        "sha1": "3f97e066227cc2353d212b8c43440b0bf4c033f3",
+        "sha1": "0f99f8426c64fc5e0c4b6749245e50484a16c372",
-        "sha256": "1rs55v9gqda5lks89dd81frps5c9g3zgxk832qyckw9srlvbp0n1"
+        "sha256": "091il49sidk0lcmzdy0vl3a4l16kw6x1q0l9vk0hir1ipq66b0hl"
       }
     }
   },

nix/deps/gradle/deps.urls

@@ -802,9 +802,9 @@ https://repo.maven.apache.org/maven2/org/ow2/asm/asm/6.0/asm-6.0.pom
 https://repo.maven.apache.org/maven2/org/ow2/asm/asm/9.4/asm-9.4.pom
 https://repo.maven.apache.org/maven2/org/ow2/ow2/1.3/ow2-1.3.pom
 https://repo.maven.apache.org/maven2/org/ow2/ow2/1.5.1/ow2-1.5.1.pom
-https://repo.maven.apache.org/maven2/org/slf4j/jcl-over-slf4j/2.0.7/jcl-over-slf4j-2.0.7.pom
+https://repo.maven.apache.org/maven2/org/slf4j/jcl-over-slf4j/2.0.6/jcl-over-slf4j-2.0.6.pom
-https://repo.maven.apache.org/maven2/org/slf4j/slf4j-api/2.0.7/slf4j-api-2.0.7.pom
+https://repo.maven.apache.org/maven2/org/slf4j/slf4j-api/2.0.6/slf4j-api-2.0.6.pom
-https://repo.maven.apache.org/maven2/org/slf4j/slf4j-jdk14/2.0.7/slf4j-jdk14-2.0.7.pom
+https://repo.maven.apache.org/maven2/org/slf4j/slf4j-jdk14/2.0.6/slf4j-jdk14-2.0.6.pom
-https://repo.maven.apache.org/maven2/org/slf4j/slf4j-parent/2.0.7/slf4j-parent-2.0.7.pom
+https://repo.maven.apache.org/maven2/org/slf4j/slf4j-parent/2.0.6/slf4j-parent-2.0.6.pom
 https://repo.maven.apache.org/maven2/org/sonatype/oss/oss-parent/7/oss-parent-7.pom
 https://repo.maven.apache.org/maven2/org/sonatype/oss/oss-parent/9/oss-parent-9.pom

nix/deps/gradle/gradle_parser.awk

@@ -29,17 +29,17 @@ function findPackage(line, regex) {
         if (line ~ "com.facebook.react:react-native") { continue }
 
         # Example: +--- org.jetbrains.kotlin:kotlin-stdlib:1.3.50
-        if (findPackage(line, "--- ([^ :]+):([^ :]+):([^ :]+)$")) {
+        if (findPackage(line, "--- ([^:]+):([^:]+):([^ ]+)$")) {
             continue
         }
 
         # Example: +--- androidx.lifecycle:lifecycle-common:{strictly 2.0.0} -> 2.0.0 (c)
-        if (findPackage(line, "--- ([^ :]+):([^ :]+):[^:]+ -> ([^ :]+) ?(\\([*c]\\))?$")) {
+        if (findPackage(line, "--- ([^:]+):([^:]+):[^ ]+ -> ([^: ]+) ?(\\([*c]\\))?$")) {
             continue
         }
 
         # Example: +--- com.android.support:appcompat-v7:28.0.0 -> androidx.appcompat:appcompat:1.0.2
-        if (findPackage(line, "--- [^ :]+:[^ :]+:[^ ]+ -> ([^ :]+):([^ :]+):([^ :]+)$")) {
+        if (findPackage(line, "--- [^:]+:[^:]+:[^ ]+ -> ([^:]+):([^:]+):([^ ]+)$")) {
             continue
         }
     }

nix/deps/nodejs-patched/default.nix

@@ -12,7 +12,6 @@ stdenv.mkDerivation {
     "patchBuildIdPhase"
     "patchHermesPhase"
     "patchJavaPhase"
-    "patchYogaNodePackagePhase"
     "installPhase"
   ];
 
@@ -67,14 +66,6 @@ stdenv.mkDerivation {
   patchJavaPhase = ''
     ${nodejs}/bin/node ./node_modules/jetifier/bin/jetify
   '';
-  # Patch React Native Yoga.cpp file
-  # FIXME: Remove this once release newer than 1.19.0 is used which includes:
-  # https://github.com/facebook/yoga/commit/f174de70
-  patchYogaNodePackagePhase = ''
-    substituteInPlace ./node_modules/react-native/ReactCommon/yoga/yoga/Yoga.cpp --replace \
-        'node->getLayout().hadOverflow() |' \
-        'node->getLayout().hadOverflow() ||'
-  '';
   installPhase = ''
     mkdir -p $out
     cp -R node_modules $out/

nix/overlay.nix

@@ -46,16 +46,16 @@ in {
 
   # Package version adjustments
   gradle = super.gradle_5;
-  nodejs = super.nodejs-18_x;
+  nodejs = super.nodejs-16_x;
-  yarn = super.yarn.override { nodejs = super.nodejs-18_x; };
+  yarn = super.yarn.override { nodejs = super.nodejs-16_x; };
   openjdk = super.openjdk8_headless;
   xcodeWrapper = callPackage ./pkgs/xcodeenv/compose-xcodewrapper.nix { } {
     version = "13.3";
     allowHigher = true;
   };
-  go = super.go_1_19;
+  go = super.go_1_18;
-  buildGoPackage = super.buildGo119Package;
+  buildGoPackage = super.buildGo118Package;
-  buildGoModule = super.buildGo119Module;
+  buildGoModule = super.buildGo118Module;
   gomobile = (super.gomobile.overrideAttrs (old: {
     patches = self.fetchurl { # https://github.com/golang/mobile/pull/84
       url = "https://github.com/golang/mobile/commit/f20e966e05b8f7e06bed500fa0da81cf6ebca307.patch";

nix/pkgs.nix

@@ -11,11 +11,10 @@ let
   # We follow the master branch of official nixpkgs.
   nixpkgsSrc = fetchFromGitHub {
     name = "nixpkgs-source";
-    # FIXME: Fork used to get Cocoapods 1.12.0 and apksigner macOS build.
+    owner = "status-im"; # FIXME: Fork used to get Cocoapods 1.12.0.
-    owner = "status-im";
     repo = "nixpkgs";
-    rev = "d0c06fa3d3982a91aa01bd63ed84020cbde3d3ab";
+    rev = "b9b2ed705edc00003d47625950602136be3e1ed5";
-    sha256 = "sha256-8blvuUHnuf0hFr/PpBxVohJp5CaGXIXhgJlFN/cv7us=";
+    sha256 = "sha256-F0qOawdKx7kgiGqwVikYIawL2taJ1XfcgHy0Wn0mho8=";
     # To get the compressed Nix sha256, use:
     # nix-prefetch-url --unpack https://github.com/${ORG}/nixpkgs/archive/${REV}.tar.gz
   };

nix/shells.nix

@@ -42,19 +42,12 @@ let
     # for running gradle by hand
     gradle = mkShell {
       buildInputs = with pkgs; [ gradle maven goMavenResolver ];
+      inputsFrom = [ nodejs-sh ];
       shellHook = ''
         export STATUS_GO_ANDROID_LIBDIR="DUMMY"
         export STATUS_NIX_MAVEN_REPO="${pkgs.deps.gradle}"
         export ANDROID_SDK_ROOT="${pkgs.androidPkgs.sdk}"
         export ANDROID_NDK_ROOT="${pkgs.androidPkgs.ndk}"
-
-        export STATUS_MOBILE_HOME=$(git rev-parse --show-toplevel)
-        # WARNING: Unpatched Node.js deps allow Gradle to use remote repos.
-        "$STATUS_MOBILE_HOME/nix/scripts/node_modules.sh" ${pkgs.deps.nodejs}
-        function restore_patched_modules() {
-          "$STATUS_MOBILE_HOME/nix/scripts/node_modules.sh" ${pkgs.deps.nodejs-patched}
-        }
-        trap restore_patched_modules EXIT
       '';
     };
 

package.json

@@ -19,7 +19,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@react-native-async-storage/async-storage": "^1.17.9",
     "@react-native-community/audio-toolkit": "git+https://github.com/tbenr/react-native-audio-toolkit.git#refs/tags/v2.0.3-status-v6",
-    "@react-native-community/blur": "git+https://github.com/status-im/react-native-blur#refs/tags/v4.3.2-status",
+    "@react-native-community/blur": "git+https://github.com/status-im/react-native-blur#refs/tags/v4.3.1-status",
     "@react-native-community/cameraroll": "git+https://github.com/status-im/react-native-cameraroll.git#refs/tags/v4.0.4-status.0",
     "@react-native-community/clipboard": "^1.2.2",
     "@react-native-community/hooks": "^2.5.1",

shadow-cljs.edn

@@ -45,13 +45,7 @@
    :devtools {:autobuild #shadow/env ["SHADOW_AUTOBUILD_ENABLED" :default true :as :bool]}
    :dev {:devtools {:after-load   status-im2.setup.hot-reload/reload
                     :build-notify status-im2.setup.hot-reload/build-notify
-                    :preloads     [re-frisk-remote.preload
+                    :preloads     [re-frisk-remote.preload]}
-                                   ;; In order to use component test helpers in
-                                   ;; the REPL we need to preload namespaces
-                                   ;; that are not normally required by
-                                   ;; production code, such as
-                                   ;; @testing-library/react-native.
-                                   test-helpers.component]}
          :closure-defines
          {status-im2.config/POKT_TOKEN      #shadow/env "POKT_TOKEN"
           status-im2.config/OPENSEA_API_KEY #shadow/env "OPENSEA_API_KEY"}

src/js/worklets/bottom_sheet.js

@@ -6,10 +6,10 @@ export function useTranslateY(initialTranslationY, bottomSheetDy, panY) {
   })
 }
 
-export function useBackgroundOpacity(translateY, backgroundHeight, windowHeight, opacity) {
+export function useBackgroundOpacity(translateY, backgroundHeight, windowHeight) {
   return useDerivedValue(() => {
-    const calculatedOpacity = ((translateY.value - windowHeight) / -backgroundHeight) * opacity
+    const opacity = ((translateY.value - windowHeight) / -backgroundHeight) * 0.5
 
-    return Math.max(Math.min(calculatedOpacity, opacity), 0)
+    return Math.max(Math.min(opacity, 0.5), 0)
   })
 }

src/js/worklets/onboarding_carousel.js

@@ -1,47 +0,0 @@
-import { useDerivedValue, withTiming, Easing } from 'react-native-reanimated';
-
-const slideAnimationDuration = 300;
-
-const easeOut = {
-  duration: slideAnimationDuration,
-  easing: Easing.bezier(0, 0, 0.58, 1),
-}
-
-// Derived Values
-export function dynamicProgressBarWidth(staticProgressBarWidth, progress) {
-  return useDerivedValue(
-    function () {
-      'worklet'
-      return staticProgressBarWidth * (progress.value || 0) / 100;
-    }
-  );
-}
-
-export function carouselLeftPosition(windowWidth, progress) {
-  return useDerivedValue(
-    function () {
-      'worklet'
-      const progressValue = progress.value;
-      switch (true) {
-      case (progressValue < 25):
-	return 0;
-      case (progressValue === 25):
-	return withTiming(-windowWidth, easeOut);
-      case (progressValue < 50):
-	return -windowWidth;
-      case (progressValue === 50):
-	return withTiming(-2 * windowWidth, easeOut);
-      case (progressValue < 75):
-	return -2 * windowWidth;
-      case (progressValue === 75):
-	return withTiming(-3 * windowWidth, easeOut);
-      case (progressValue < 100):
-	return -3 * windowWidth;
-      case (progressValue === 100):
-	return withTiming(-4 * windowWidth, easeOut);
-      default:
-	return 0;
-      }
-    });
-}
-

src/mocks/js_dependencies.cljs

@@ -293,10 +293,7 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
     :createNativeWrapper      identity
     :default                  #js {}})
 
-(def react-native-redash
+(def react-native-redash #js {:clamp nil})
-  #js
-   {:clamp     nil
-    :withPause (fn [])})
 
 (def react-native-languages
   (clj->js {:default {:language            "en"
@@ -373,7 +370,6 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
     "react-native-screens"                          (clj->js {})
     "react-native-reanimated"                       react-native-reanimated
     "react-native-redash/lib/module/v1"             react-native-redash
-    "react-native-redash"                           react-native-redash
     "react-native-fetch-polyfill"                   fetch
     "react-native-status-keycard"                   status-keycard
     "react-native-keychain"                         keychain
@@ -411,7 +407,6 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
     "../src/js/worklets/bottom_sheet.js"            #js {}
     "../src/js/worklets/record_audio.js"            #js {}
     "../src/js/worklets/scroll_view.js"             #js {}
-    "../src/js/worklets/onboarding_carousel.js"     #js {}
     "../src/js/worklets/lightbox.js"                #js {}
     "./fleets.js"                                   default-fleets
     "@walletconnect/client"                         wallet-connect-client

src/quo2/components/avatars/user_avatar/component_spec.cljs

@@ -58,18 +58,6 @@
 
           (h/test "Size :small"
             (h/render (user-avatar-component :small))
-            (h/is-truthy (h/get-by-text "NU")))
-
-          (h/test "Two letters with excess whitespace"
-            (h/render [user-avatar/user-avatar
-                       {:full-name "New    User"
-                        :size      :big}])
-            (h/is-truthy (h/get-by-text "NU")))
-
-          (h/test "Two letters with leading whitespace"
-            (h/render [user-avatar/user-avatar
-                       {:full-name "   New   User"
-                        :size      :big}])
             (h/is-truthy (h/get-by-text "NU"))))
 
         (h/describe "One letter"

src/quo2/components/avatars/user_avatar/view.cljs

@@ -5,18 +5,14 @@
             [react-native.core :as rn]
             [react-native.fast-image :as fast-image]))
 
-(defn trim-whitespace [s] (string/join " " (string/split (string/trim s) #"\s+")))
-
 (defn- extract-initials
   [full-name amount-initials]
   (let [upper-case-first-letter (comp string/upper-case first)
-        names-list              (string/split (trim-whitespace full-name) " ")]
+        names-list              (string/split full-name " ")]
-    (if (= (first names-list) "")
+    (->> names-list
-      ""
+         (map upper-case-first-letter)
-      (->> names-list
+         (take amount-initials)
-           (map upper-case-first-letter)
+         (string/join))))
-           (take amount-initials)
-           (string/join)))))
 
 (defn initials-avatar
   [{:keys [full-name size draw-ring? customization-color]}]

src/quo2/components/buttons/button.cljs

@@ -6,13 +6,12 @@
             [react-native.core :as rn]
             [reagent.core :as reagent]))
 
-(defn themes
+(def themes
-  [customization-color]
   {:light {:primary         {:icon-color       colors/white
                              :label-color      colors/white
-                             :background-color {:default  (colors/custom-color customization-color 50)
+                             :background-color {:default  colors/primary-50
-                                                :pressed  (colors/custom-color customization-color 60)
+                                                :pressed  colors/primary-60
-                                                :disabled (colors/custom-color customization-color 50)}}
+                                                :disabled colors/primary-50}}
            :secondary       {:icon-color       colors/primary-50
                              :label-color      colors/primary-50
                              :background-color {:default  colors/primary-50-opa-20
@@ -75,9 +74,9 @@
                                                 :disabled colors/neutral-95}}}
    :dark  {:primary         {:icon-color       colors/white
                              :label-color      colors/white
-                             :background-color {:default  (colors/custom-color customization-color 60)
+                             :background-color {:default  colors/primary-60
-                                                :pressed  (colors/custom-color customization-color 50)
+                                                :pressed  colors/primary-50
-                                                :disabled (colors/custom-color customization-color 60)}}
+                                                :disabled colors/primary-60}}
            :secondary       {:icon-color       colors/primary-50
                              :label-color      colors/primary-50
                              :background-color {:default  colors/primary-50-opa-20
@@ -219,15 +218,14 @@
   (let [pressed (reagent/atom false)]
     (fn
       [{:keys [on-press disabled type size community-color community-text-color before after above
-               width customization-color
+               width
                override-theme override-background-color
                on-long-press accessibility-label icon icon-no-color style inner-style test-ID]
-        :or   {type                :primary
+        :or   {type :primary
-               size                40
+               size 40}}
-               customization-color :primary}}
        children]
       (let [{:keys [icon-color icon-secondary-color background-color label-color border-color]}
-            (get-in (themes customization-color)
+            (get-in themes
                     [(or
                       override-theme
                       (theme/get-theme)) type])
@@ -254,7 +252,11 @@
          [rn/view
           {:style (merge
                    (shape-style-container type icon size)
-                   {:width width}
+                   {:background-color
+                    (if (= state :pressed)
+                      (colors/theme-colors colors/neutral-100 colors/white)
+                      :transparent)
+                    :width width}
                    style)}
           [rn/view
            {:style (merge

src/quo2/components/code/code/style.cljs

@@ -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))

src/quo2/components/code/snippet.cljs

@@ -1,110 +1,175 @@
 (ns quo2.components.code.snippet
   (:require [cljs-bean.core :as bean]
             [clojure.string :as string]
+            [oops.core :as oops]
             [quo2.components.buttons.button :as button]
-            [quo2.components.code.code.style :as style]
             [quo2.components.markdown.text :as text]
+            [quo2.foundations.colors :as colors]
+            [quo2.theme :as theme]
             [react-native.core :as rn]
             [react-native.linear-gradient :as linear-gradient]
+            [react-native.masked-view :as masked-view]
             [react-native.syntax-highlighter :as highlighter]
             [reagent.core :as reagent]))
 
+;; Example themes:
+;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs
+(def ^:private themes
+  {:light {:hljs-comment {:color colors/neutral-40}
+           :hljs-title   {:color (colors/custom-color :blue 50)}
+           :hljs-keyword {:color (colors/custom-color :green 50)}
+           :hljs-string  {:color (colors/custom-color :turquoise 50)}
+           :hljs-literal {:color (colors/custom-color :turquoise 50)}
+           :hljs-number  {:color (colors/custom-color :turquoise 50)}
+           :line-number  {:color colors/neutral-40}}
+   :dark  {:hljs-comment {:color colors/neutral-60}
+           :hljs-title   {:color (colors/custom-color :blue 60)}
+           :hljs-keyword {:color (colors/custom-color :green 60)}
+           :hljs-string  {:color (colors/custom-color :turquoise 60)}
+           :hljs-literal {:color (colors/custom-color :turquoise 60)}
+           :hljs-number  {:color (colors/custom-color :turquoise 60)}
+           :line-number  {:color colors/neutral-40}}})
+
+(defn- text-style
+  [class-names]
+  (->> class-names
+       (map keyword)
+       (reduce #(merge %1 (get-in themes [(theme/get-theme) %2]))
+               {:flex-shrink 1
+                ;; Round to a nearest whole number to achieve consistent
+                ;; spacing (also important for calculating `max-text-height`).
+                ;; Line height seems to be inconsistent between text being
+                ;; wrapped and text being rendered on a newline using Flexbox
+                ;; layout.
+                :line-height 18})))
+
 (defn- render-nodes
   [nodes]
-  (map (fn [{:keys [children value last-line?] :as node}]
+  (map (fn [{:keys [children value] :as node}]
+         ;; Node can have :children or a :value.
          (if children
            (into [text/text
-                  (cond-> {:weight :code
+                  {:weight :code
-                           :size   :paragraph-2
+                   :size   :paragraph-2
-                           :style  (style/text-style (get-in node [:properties :className]))}
+                   :style  (text-style (get-in node [:properties :className]))}]
-                    last-line? (assoc :number-of-lines 1))]
                  (render-nodes children))
            ;; Remove newlines as we already render each line separately.
-           (string/trim-newline value)))
+           (-> value string/trim-newline)))
        nodes))
 
-(defn- line
-  [{:keys [line-number line-number-width]} children]
-  [rn/view {:style style/line}
-   [rn/view {:style (style/line-number line-number-width)}
-    [text/text
-     {:style  (style/text-style ["line-number"])
-      :weight :code
-      :size   :paragraph-2}
-     line-number]]
-   children])
-
 (defn- code-block
   [{:keys [rows line-number-width]}]
-  [rn/view
+  [into [:<>]
    (->> rows
         (render-nodes)
-        (map-indexed (fn [idx row-content]
+        ;; Line numbers
-                       [line
+        (map-indexed (fn [idx row]
-                        {:line-number       (inc idx)
+                       (conj [rn/view {:style {:flex-direction :row}}
-                         :line-number-width line-number-width}
+                              [rn/view
-                        row-content]))
+                               {:style {:width        line-number-width
-        (into [:<>]))])
+                                        ;; 8+12 margin
-
+                                        :margin-right 20}}
-(defn- mask-view
+                               [text/text
-  [{:keys [apply-mask?]} child]
+                                {:weight :code
-  (if apply-mask?
+                                 :size   :paragraph-2
-    [:<>
+                                 :style  (text-style ["line-number"])}
-     [rn/view {:style style/gradient-container}
+                                (inc idx)]]]
-      [linear-gradient/linear-gradient
+                             row))))])
-       {:style  style/gradient
-        :colors [:transparent (style/gradient-color)]}
-       [rn/view {:style style/gradient}]]]
-     child]
-    child))
-
-(defn- calc-line-number-width
-  [font-scale rows-to-show]
-  (let [max-line-digits (-> rows-to-show str count)]
-    (if (= 1 max-line-digits)
-      18 ;; ~ 9 is char width, 18 is width used in Figma.
-      (* 9 max-line-digits font-scale))))
 
 (defn- native-renderer
-  [{:keys [rows max-lines on-copy-press]
+  []
-    :or   {max-lines ##Inf}}]
+  (let [text-height (reagent/atom nil)]
-  (let [font-scale          (:font-scale (rn/use-window-dimensions))
+    (fn [{:keys [rows max-lines on-copy-press]}]
-        total-rows          (count rows)
+      (let [background-color      (colors/theme-colors
-        number-rows-to-show (min (count rows) max-lines)
+                                   colors/white
-        line-number-width   (calc-line-number-width font-scale number-rows-to-show)
+                                   colors/neutral-80-opa-40)
-        truncated?          (< number-rows-to-show total-rows)
+            background-color-left (colors/theme-colors
-        rows-to-show-coll   (if truncated?
+                                   colors/neutral-5
-                              (as-> rows $
+                                   colors/neutral-80)
-                                (update $ number-rows-to-show assoc :last-line? true)
+            border-color          (colors/theme-colors
-                                (take (inc number-rows-to-show) $))
+                                   colors/neutral-20
-                              rows)]
+                                   colors/neutral-80)
-    [rn/view {:style (style/container)}
+            rows                  (bean/->clj rows)
-     [rn/view {:style (style/line-number-container line-number-width)}]
+            font-scale            (:font-scale (rn/use-window-dimensions))
-     [rn/view {:style (style/divider line-number-width)}]
+            max-rows              (or max-lines (count rows)) ;; Cut down on rows to process.
-     [mask-view {:apply-mask? truncated?}
+            max-line-digits       (-> rows count (min max-rows) str count)
-      [code-block
+            ;; ~ 9 is char width, 18 is width used in Figma.
-       {:rows              rows-to-show-coll
+            line-number-width     (* font-scale (max 18 (* 9 max-line-digits)))
-        :line-number-width line-number-width}]]
+            max-text-height       (some-> max-lines
-     [rn/view {:style style/copy-button}
+                                          (* font-scale 18)) ;; 18 is font's line height.
-      [button/button
+            truncated?            (and max-text-height (< max-text-height @text-height))
-       {:icon                      true
+            maybe-mask-wrapper    (if truncated?
-        :type                      :grey
+                                    [masked-view/masked-view
-        :size                      24
+                                     {:mask-element
-        :on-press                  on-copy-press
+                                      (reagent/as-element
-        :override-background-color (style/button-background-color)}
+                                       [linear-gradient/linear-gradient
-       :main-icons/copy]]]))
+                                        {:colors    ["black" "transparent"]
+                                         :locations [0.75 1]
+                                         :style     {:flex 1}}])}]
+                                    [:<>])]
+
+        [rn/view
+         {:style {:overflow         :hidden
+                  :padding          8
+                  :background-color background-color
+                  :border-color     border-color
+                  :border-width     1
+                  :border-radius    8
+                  ;; Hide on intial render to avoid flicker when mask-wrapper is shown.
+                  :opacity          (if @text-height 1 0)}}
+         ;; Line number container
+         [rn/view
+          {:style {:position           :absolute
+                   :bottom             0
+                   :top                0
+                   :left               0
+                   :width              (+ line-number-width 8 8)
+                   :background-color   background-color-left
+                   :border-right-color border-color
+                   :border-right-width 1}}]
+         (conj maybe-mask-wrapper
+               [rn/view {:max-height max-text-height}
+                [rn/view
+                 {:on-layout (fn [evt]
+                               (let [height (oops/oget evt "nativeEvent.layout.height")]
+                                 (reset! text-height height)))}
+                 [code-block
+                  {:rows              (take max-rows rows)
+                   :line-number-width line-number-width}]]])
+
+         ;; Copy button
+         [rn/view
+          {:style {:position :absolute
+                   :bottom   8
+                   :right    8}}
+          [button/button
+           {:icon     true
+            :type     :grey
+            :size     24
+            :on-press on-copy-press}
+           :main-icons/copy]]]))))
+
+(defn- wrap-renderer-fn
+  [f {:keys [max-lines on-copy-press]}]
+  (fn [^js props]
+    (reagent/as-element [:f> f
+                         {:rows          (.-rows props)
+                          :max-lines     max-lines
+                          :on-copy-press on-copy-press}])))
 
 (defn snippet
   [{:keys [language max-lines on-copy-press]} children]
   [highlighter/highlighter
    {:language          language
-    :renderer          (fn [^js/Object props]
+    :renderer          (wrap-renderer-fn
-                         (reagent/as-element
+                        native-renderer
-                          [:f> native-renderer
+                        {:max-lines     max-lines
-                           {:rows          (-> props .-rows bean/->clj)
+                         :on-copy-press #(when on-copy-press
-                            :on-copy-press #(when on-copy-press (on-copy-press children))
+                                           (on-copy-press children))})
-                            :max-lines     max-lines}]))
+    ;; Default props to adapt Highlighter for react-native.
+    ;;:CodeTag           react-native/View
+    ;;:PreTag            react-native/View
     :show-line-numbers false
-    :style             {}
+    :style             #js {}
-    :custom-style      {:background-color nil}}
+    :custom-style      #js {:backgroundColor nil}}
    children])

src/quo2/components/common/unread_grey_dot/view.cljs

@@ -3,7 +3,6 @@
             [quo2.components.common.unread-grey-dot.style :as style]))
 
 (defn unread-grey-dot
-  [accessibility-label]
+  []
   [rn/view
-   (cond-> {:style style/unread-grey-dot}
+   {:style style/unread-grey-dot}])
-     accessibility-label (assoc :accessibility-label accessibility-label :accessible true))])

src/quo2/components/community/community_card_view.cljs

@@ -16,13 +16,15 @@
                  :height        230
                  :border-radius 20}
       :on-press on-press}
-     [rn/view {:style style/detail-container}
+     [rn/view
+      {:flex 1}
       [rn/view (style/community-cover-container 60)
        [rn/image
         {:source cover
-         :style  {:flex                    1
+         :style
-                  :border-top-right-radius 20
+         {:flex                    1
-                  :border-top-left-radius  20}}]]
+          :border-top-right-radius 20
+          :border-top-left-radius  20}}]]
       [rn/view (style/card-view-content-container 12)
        [rn/view (style/card-view-chat-icon 48)
         [icon/community-icon {:images images} 48]]
@@ -36,7 +38,7 @@
         {:title       name
          :description description}]
        [rn/view {:style (style/card-stats-position)}
-        [community-view/community-stats-column
+        [community-view/community-stats-column :card-view]]
-         {:type :card-view}]]
        [rn/view {:style (style/community-tags-position)}
         [community-view/community-tags tags]]]]]]])
+

src/quo2/components/community/community_list_view.cljs

@@ -27,7 +27,7 @@
     [counter/counter {:type :default} unread-mentions-count]
 
     unread-messages?
-    [unread-grey-dot :unviewed-messages-public]))
+    [unread-grey-dot]))
 
 (defn communities-list-view-item
   [props
@@ -46,7 +46,7 @@
     (merge {:style {:height        56
                     :border-radius 16}}
            props)
-    [rn/view {:style style/detail-container}
+    [rn/view {:flex 1}
      [rn/view (style/list-info-container)
       [community-icon/community-icon
        {:images community-icon} 32]
@@ -64,8 +64,7 @@
                                          colors/neutral-40
                                          colors/neutral-60))}}
         name]
-       [community-view/community-stats-column
+       [community-view/community-stats-column :list-view]]
-        {:type :list-view}]]
       (if (= status :gated)
         [community-view/permission-tag-container
          {:locked? locked?

src/quo2/components/community/community_view.cljs

@@ -5,7 +5,6 @@
             [quo2.components.tags.permission-tag :as permission]
             [quo2.components.tags.tag :as tag]
             [quo2.foundations.colors :as colors]
-            [quo.gesture-handler :as gesture-handler] ;;TODO move to quo2
             [react-native.core :as rn]))
 
 (defn community-stats
@@ -24,7 +23,7 @@
     members-count]])
 
 (defn community-stats-column
-  [{:keys [type]}]
+  [type]
   (let [icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40)]
     [rn/view
      (if (= type :card-view)
@@ -42,9 +41,7 @@
 
 (defn community-tags
   [tags]
-  [gesture-handler/scroll-view
+  [rn/view (style/community-tags-container)
-   {:shows-horizontal-scroll-indicator false
-    :horizontal                        true}
    (for [{:keys [name emoji]} tags]
      ^{:key name}
      [rn/view {:margin-right 8}

src/quo2/components/community/style.cljs

@@ -22,9 +22,6 @@
                       colors/white
                       colors/neutral-90)})
 
-(def detail-container
-  {:flex 1})
-
 (defn stats-count-container
   []
   {:flex-direction :row
@@ -40,6 +37,10 @@
   {:flex-direction :row
    :align-items    :center})
 
+(defn community-tags-container
+  []
+  {:flex-direction :row})
+
 (defn card-stats-position
   []
   {:position :absolute
@@ -61,7 +62,7 @@
    :bottom                  0
    :left                    0
    :right                   0
-   :border-radius           20
+   :height                  20
    :padding-horizontal      padding-horizontal
    :border-top-right-radius 16
    :border-top-left-radius  16

src/quo2/components/drawers/drawer_buttons/style.cljs

@@ -1,10 +1,7 @@
 (ns quo2.components.drawers.drawer-buttons.style
-  (:require [quo2.foundations.colors :as colors]
+  (:require [quo2.foundations.colors :as colors]))
-            [react-native.platform :as platform]))
 
-(def outer-container
+(def outer-container {:height 216})
-  {:height        216
-   :border-radius 20})
 
 (def top-card
   {:flex                    1
@@ -12,9 +9,7 @@
    :padding-horizontal      20
    :border-top-left-radius  20
    :border-top-right-radius 20
-   :background-color        (if platform/ios?
+   :background-color        colors/neutral-80})
-                              colors/neutral-80-opa-80-blur
-                              colors/neutral-80)})
 
 (def bottom-card
   {:position                :absolute
@@ -26,7 +21,7 @@
    :padding-horizontal      20
    :border-top-left-radius  20
    :border-top-right-radius 20
-   :background-color        colors/white-opa-5})
+   :background-color        (colors/alpha colors/white 0.05)})
 
 (def bottom-container
   {:flex-direction  :row
@@ -40,14 +35,14 @@
    :width           28
    :justify-content :center
    :align-items     :center
-   :border-color    colors/white-opa-5})
+   :border-color    (colors/alpha colors/white 0.05)})
 
 (def bottom-text
   {:flex  1
-   :color colors/white-70-blur})
+   :color (colors/alpha colors/white 0.7)})
 
 (def top-text
-  {:color colors/white-70-blur})
+  {:color (colors/alpha colors/white 0.7)})
 
 (defn heading-text
   [gap]

src/quo2/components/drawers/drawer_buttons/view.cljs

@@ -3,7 +3,6 @@
             [quo2.components.icon :as icon]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [react-native.blur :as blur]
             [quo2.components.drawers.drawer-buttons.style :as style]))
 
 (defn render-bottom
@@ -71,7 +70,7 @@
     child-2           string, keyword or hiccup
    "
   [{:keys [container-style top-card bottom-card]} child-1 child-2]
-  [blur/ios-view
+  [rn/view
    {:style (merge container-style style/outer-container)}
    [card
     (merge {:gap   4

src/quo2/components/info/info_message.cljs

@@ -22,18 +22,18 @@
   opts
   {:type           :default/:success/:error
    :size           :default/:tiny
-   :icon           :i/info ;; info message icon
+   :icon           :main-icons/info ;; info message icon
    :text-color     colors/white     ;; text color override
    :icon-color     colors/white    ;; icon color override
    :no-icon-color? false       ;; disable tint color for icon"
-  [{:keys [type size icon text-color icon-color no-icon-color? style]} message]
+  [{:keys [type size icon text-color icon-color no-icon-color?]} message]
   (let [weight     (if (= size :default) :regular :medium)
         size       (if (= size :default) :paragraph-2 :label)
         text-color (or text-color (get-color type))
         icon-color (or icon-color text-color)]
     [rn/view
-     {:style (merge {:flex-direction :row}
+     {:style {:flex-direction :row
-                    style)}
+              :flex           1}}
      [quo2.icons/icon icon
       {:color           icon-color
        :no-color        no-icon-color?

src/quo2/components/inputs/input/component_spec.cljs

@@ -1,70 +0,0 @@
-(ns quo2.components.inputs.input.component-spec
-  (:require [quo2.components.inputs.input.view :as input]
-            [test-helpers.component :as h]))
-
-(h/describe "Input"
-  (h/test "default render"
-    (h/render [input/input])
-    (h/is-truthy (h/query-by-label-text :input))
-    (h/is-null (h/query-by-label-text :password-input)))
-
-  (h/test "Password type"
-    (h/render [input/input {:type :password}])
-    (h/is-truthy (h/query-by-label-text :password-input))
-    (h/is-null (h/query-by-label-text :input)))
-
-  (h/describe "Icon"
-    (h/test "Doesn't exist in base input"
-      (h/render [input/input])
-      (h/is-null (h/query-by-label-text :input-icon)))
-
-    (h/test "Renders"
-      (h/render [input/input {:icon-name :i/placeholder}])
-      (h/is-truthy (h/get-by-label-text :input-icon))))
-
-  (h/describe "Right accessory"
-    (h/test "Doesn't exist in base input"
-      (h/render [input/input])
-      (h/is-null (h/query-by-label-text :input-right-icon)))
-
-    (h/test "Clear icon"
-      (h/render [input/input {:clearable? true}])
-      (h/is-truthy (h/query-by-label-text :input-right-icon)))
-
-    (h/test "Password icon"
-      (h/render [input/input {:type :password}])
-      (h/is-truthy (h/query-by-label-text :input-right-icon))))
-
-  (h/describe "Button"
-    (h/test "Doesn't exist in base input"
-      (h/render [input/input])
-      (h/is-null (h/query-by-label-text :input-button)))
-
-    (h/test "Renders with given text and it's pressable"
-      (let [button-text     "This is a button"
-            button-callback (h/mock-fn)]
-        (h/render [input/input
-                   {:button {:on-press button-callback
-                             :text     button-text}}])
-        (h/is-truthy (h/query-by-label-text :input-button))
-        (h/is-truthy (h/get-by-text button-text))
-        (h/fire-event :press (h/query-by-label-text :input-button))
-        (h/was-called button-callback))))
-
-  (h/describe "Label"
-    (h/test "Doesn't exist in base input"
-      (h/render [input/input])
-      (h/is-null (h/query-by-label-text :input-labels)))
-
-    (h/test "Renders with specified text"
-      (let [input-label "My label"]
-        (h/render [input/input {:label input-label}])
-        (h/is-truthy (h/query-by-label-text :input-labels))
-        (h/is-truthy (h/get-by-text input-label)))))
-
-  (h/test "Char limit counter"
-    (let [char-limit     100
-          char-limit-str (str "0/" char-limit)]
-      (h/render [input/input {:char-limit char-limit}])
-      (h/is-truthy (h/query-by-label-text :input-labels))
-      (h/is-truthy (h/get-by-text char-limit-str)))))

src/quo2/components/inputs/input/style.cljs

@@ -66,7 +66,7 @@
    :padding-horizontal 8
    :border-width       1
    :border-color       (:border-color colors-by-status)
-   :border-radius      (if small? 10 12)
+   :border-radius      (if small? 10 14)
    :opacity            (if disabled? 0.3 1)})
 
 (defn left-icon-container
@@ -83,15 +83,15 @@
 
 (defn input
   [colors-by-status small? multiple-lines?]
-  (let [base-props (assoc (text/text-style {:size :paragraph-1 :weight :regular})
+  (merge (text/text-style {:size :paragraph-1 :weight :regular})
-                          :flex             1
+         {:flex                1
-                          :padding-right    0
+          :text-align-vertical :top
-                          :padding-left     (if small? 4 8)
+          :padding-right       0
-                          :padding-vertical (if small? 4 8)
+          :padding-left        (if small? 4 8)
-                          :color            (:text colors-by-status))]
+          :padding-vertical    (if small? 4 8)
-    (if multiple-lines?
+          :color               (:text colors-by-status)}
-      (assoc base-props :text-align-vertical :top)
+         (when-not multiple-lines?
-      (assoc base-props :height (if small? 30 38) :line-height nil))))
+           {:height (if small? 30 38)})))
 
 (defn right-icon-touchable-area
   [small?]
@@ -110,7 +110,8 @@
    :color (:clear-icon variant-colors)})
 
 (def texts-container
-  {:flex-direction :row
+  {:flex           1
+   :flex-direction :row
    :height         18
    :margin-bottom  8})
 

src/quo2/components/inputs/input/view.cljs

@@ -9,9 +9,7 @@
 (defn- label-&-counter
   [{:keys [label current-chars char-limit variant-colors]}]
   (let [count-text (when char-limit (str current-chars "/" char-limit))]
-    [rn/view
+    [rn/view {:style style/texts-container}
-     {:accessibility-label :input-labels
-      :style               style/texts-container}
      [rn/view {:style style/label-container}
       [text/text
        {:style  (style/label-color variant-colors)
@@ -27,40 +25,36 @@
 
 (defn- left-accessory
   [{:keys [variant-colors small? icon-name]}]
-  [rn/view
+  [rn/view {:style (style/left-icon-container small?)}
-   {:accessibility-label :input-icon
-    :style               (style/left-icon-container small?)}
    [icon/icon icon-name (style/icon variant-colors)]])
 
 (defn- right-accessory
   [{:keys [variant-colors small? disabled? on-press icon-style-fn icon-name]}]
   [rn/touchable-opacity
-   {:accessibility-label :input-right-icon
+   {:style    (style/right-icon-touchable-area small?)
-    :style               (style/right-icon-touchable-area small?)
+    :disabled disabled?
-    :disabled            disabled?
+    :on-press on-press}
-    :on-press            on-press}
    [icon/icon icon-name (icon-style-fn variant-colors)]])
 
 (defn- right-button
   [{:keys [variant-colors colors-by-status small? disabled? on-press text]}]
   [rn/touchable-opacity
-   {:accessibility-label :input-button
+   {:style    (style/button variant-colors small?)
-    :style               (style/button variant-colors small?)
+    :disabled disabled?
-    :disabled            disabled?
+    :on-press on-press}
-    :on-press            on-press}
    [rn/text {:style (style/button-text colors-by-status)}
     text]])
 
 (def ^:private custom-props
   "Custom properties that must be removed from properties map passed to InputText."
   [:type :blur? :override-theme :error? :right-icon :left-icon :disabled? :small? :button
-   :label :char-limit :on-char-limit-reach :icon-name :multiline? :on-focus :on-blur])
+   :label :char-limit :on-char-limit-reach :icon-name :multiline?])
 
 (defn- base-input
   [{:keys [on-change-text on-char-limit-reach]}]
   (let [status              (reagent/atom :default)
-        internal-on-focus   #(reset! status :focus)
+        on-focus            #(reset! status :focus)
-        internal-on-blur    #(reset! status :default)
+        on-blur             #(reset! status :default)
         multiple-lines?     (reagent/atom false)
         set-multiple-lines! #(let [height (oops/oget % "nativeEvent.contentSize.height")]
                                (if (> height 57)
@@ -74,7 +68,7 @@
                                 (when (>= amount-chars char-limit)
                                   (on-char-limit-reach amount-chars))))]
     (fn [{:keys [blur? override-theme error? right-icon left-icon disabled? small? button
-                 label char-limit multiline? clearable? on-focus on-blur]
+                 label char-limit multiline? clearable?]
           :as   props}]
       (let [status-kw        (cond
                                disabled? :disabled
@@ -83,7 +77,7 @@
             colors-by-status (style/status-colors status-kw blur? override-theme)
             variant-colors   (style/variants-colors blur? override-theme)
             clean-props      (apply dissoc props custom-props)]
-        [:<>
+        [rn/view
          (when (or label char-limit)
            [label-&-counter
             {:variant-colors variant-colors
@@ -98,16 +92,11 @@
               :icon-name      icon-name}])
           [rn/text-input
            (cond-> {:style                  (style/input colors-by-status small? @multiple-lines?)
-                    :accessibility-label    :input
                     :placeholder-text-color (:placeholder colors-by-status)
                     :cursor-color           (:cursor variant-colors)
                     :editable               (not disabled?)
-                    :on-focus               (fn []
+                    :on-focus               on-focus
-                                              (when on-focus (on-focus))
+                    :on-blur                on-blur}
-                                              (internal-on-focus))
-                    :on-blur                (fn []
-                                              (when on-blur (on-blur))
-                                              (internal-on-blur))}
              :always    (merge clean-props)
              multiline? (assoc :multiline              true
                                :on-content-size-change set-multiple-lines!)
@@ -137,13 +126,12 @@
     (fn [props]
       [base-input
        (assoc props
-              :accessibility-label :password-input
+              :auto-capitalize   :none
-              :auto-capitalize     :none
+              :auto-complete     :new-password
-              :auto-complete       :new-password
+              :secure-text-entry (not @password-shown?)
-              :secure-text-entry   (not @password-shown?)
+              :right-icon        {:style-fn  style/password-icon
-              :right-icon          {:style-fn  style/password-icon
+                                  :icon-name (if @password-shown? :i/hide :i/reveal)
-                                    :icon-name (if @password-shown? :i/hide :i/reveal)
+                                  :on-press  #(swap! password-shown? not)})])))
-                                    :on-press  #(swap! password-shown? not)})])))
 
 (defn input
   "This input supports the following properties:
@@ -158,7 +146,7 @@
   - :clearable? - Booolean to specify if this input has a clear button at the end.
   - :on-clear - Function executed when the clear button is pressed.
   - :button - Map containing `:on-press` & `:text` keys, if provided renders a button
-  - :label - A string to set as label for this input.
+  - :label - A label for this input.
   - :char-limit - A number to set a maximum char limit for this input.
   - :on-char-limit-reach - Function executed each time char limit is reached or exceeded.
   and supports the usual React Native's TextInput properties to control its behaviour:

src/quo2/components/inputs/profile_input/view.cljs

@@ -6,7 +6,6 @@
     [quo2.components.inputs.title-input.view :as title-input]
     [quo2.foundations.colors :as colors]
     [react-native.core :as rn]
-    [react-native.platform :as platform]
     [react-native.hole-view :as hole-view]))
 
 (defn profile-input
@@ -19,29 +18,20 @@
     [rn/view
      {:style (style/container customization-color)}
      [rn/view
-      (if platform/ios?
+      [hole-view/hole-view
-        [hole-view/hole-view
+       {:holes [{:x            33
-         {:holes [{:x            33
+                 :y            23
-                   :y            23
+                 :width        24
-                   :width        24
+                 :height       24
-                   :height       24
+                 :borderRadius 12}]}
-                   :borderRadius 12}]}
+       [user-avatar/user-avatar
-         [user-avatar/user-avatar
+        (merge image-picker-props
-          (assoc image-picker-props
+               {:customization-color customization-color
-                 :customization-color customization-color
-                 :full-name           (if (seq full-name)
-                                        full-name
-                                        placeholder)
-                 :status-indicator?   false
-                 :size                :medium)]]
-        [user-avatar/user-avatar
-         (assoc image-picker-props
-                :customization-color customization-color
                 :full-name           (if (seq full-name)
                                        full-name
                                        placeholder)
                 :status-indicator?   false
-                :size                :medium)])
+                :size                :medium})]]
       [buttons/button
        {:accessibility-label       :select-profile-picture-button
         :type                      :grey
@@ -57,7 +47,5 @@
      [rn/view {:style style/input-container}
       [title-input/title-input
        (merge title-input-props
-              {:blur?               true
+              {:placeholder         placeholder
-               :override-theme      :dark
-               :placeholder         placeholder
                :customization-color customization-color})]]]))

src/quo2/components/inputs/title_input/style.cljs

@@ -2,48 +2,45 @@
   (:require [quo2.foundations.colors :as colors]))
 
 (defn get-focused-placeholder-color
-  [blur? override-theme]
+  [blur?]
   (if blur?
-    (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 override-theme)
+    (colors/theme-colors colors/neutral-80-opa-20 (colors/alpha colors/white 0.2))
-    (colors/theme-colors colors/neutral-30 colors/neutral-60 override-theme))
+    (colors/theme-colors colors/neutral-30 colors/neutral-60)))
-)
 
 (defn get-placeholder-color
-  [blur? override-theme]
+  [blur?]
   (if blur?
-    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 override-theme)
+    (colors/theme-colors colors/neutral-80-opa-40 (colors/alpha colors/white 0.3))
-    (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)))
+    (colors/theme-colors colors/neutral-40 colors/neutral-50)))
 
 (defn- get-disabled-color
-  [blur? override-theme]
+  [blur?]
   (if blur?
-    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30)
+    (colors/theme-colors colors/neutral-80-opa-40 (colors/alpha colors/white 0.3))
-    (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)))
+    (colors/theme-colors colors/neutral-40 colors/neutral-50)))
 
 (defn- get-char-count-color
-  [blur? override-theme]
+  [blur?]
   (if blur?
-    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40)
+    (colors/theme-colors colors/neutral-80-opa-40 (colors/alpha colors/white 0.4))
-    (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)))
+    (colors/theme-colors colors/neutral-40 colors/neutral-50)))
 
 (defn get-selection-color
-  [customization-color blur? override-theme]
+  [customization-color blur?]
   (if blur?
-    (colors/theme-colors colors/neutral-100 colors/white override-theme)
+    (colors/theme-colors colors/neutral-100 colors/white)
-    (colors/custom-color customization-color (if (or (= :dark override-theme) colors/dark?) 60 50))))
+    (colors/custom-color customization-color (if colors/dark? 60 50))))
 
 (def text-input-container {:flex 1})
 
 (defn title-text
-  [disabled? blur? override-theme]
+  [disabled? blur?]
   {:text-align-vertical :bottom
-   :color               (if disabled?
+   :color               (when disabled? (get-disabled-color blur?))})
-                          (get-disabled-color blur? override-theme)
-                          (colors/theme-colors colors/neutral-100 colors/white override-theme))})
 
 (defn char-count
-  [blur? override-theme]
+  [blur?]
-  {:color (get-char-count-color blur? override-theme)})
+  {:color (get-char-count-color blur?)})
 
 (def container
   {:flex-direction  :row

src/quo2/components/inputs/title_input/view.cljs

@@ -16,8 +16,7 @@
            on-change-text
            placeholder
            max-length
-           default-value
+           default-value]
-           override-theme]
     :or   {max-length    0
            default-value ""}}]
   (let [focused?  (reagent/atom false)
@@ -35,7 +34,7 @@
           (text/text-style
            {:size   :heading-2
             :weight :semi-bold
-            :style  (style/title-text disabled? blur? override-theme)})
+            :style  (style/title-text disabled? blur?)})
           :default-value default-value
           :accessibility-label :profile-title-input
           :on-focus #(swap! focused? (fn [] true))
@@ -45,21 +44,21 @@
           :editable (not disabled?)
           :max-length max-length
           :placeholder placeholder
-          :selection-color (style/get-selection-color customization-color blur? override-theme)
+          :selection-color (style/get-selection-color customization-color blur?)
           :placeholder-text-color (if @focused?
-                                    (style/get-focused-placeholder-color blur? override-theme)
+                                    (style/get-focused-placeholder-color blur?)
-                                    (style/get-placeholder-color blur? override-theme))}]]
+                                    (style/get-placeholder-color blur?))}]]
        [rn/view
         {:style style/counter-container}
         [text/text
          [text/text
-          {:style (style/char-count blur? override-theme)
+          {:style (style/char-count blur?)
            :size  :paragraph-2}
           (pad-0
            (str
             (count @value)))]
          [text/text
-          {:style (style/char-count blur? override-theme)
+          {:style (style/char-count blur?)
            :size  :paragraph-2}
           (str "/"
                (pad-0

src/quo2/components/links/url_preview/component_spec.cljs

@@ -1,29 +0,0 @@
-(ns quo2.components.links.url-preview.component-spec
-  (:require
-    [quo2.components.links.url-preview.view :as view]
-    [test-helpers.component :as h]))
-
-(h/describe "Links - URL Preview"
-  (h/test "default render"
-    (h/render [view/view])
-    (h/is-truthy (h/query-by-label-text :title))
-    (h/is-truthy (h/query-by-label-text :logo))
-    (h/is-truthy (h/query-by-label-text :button-clear-preview))
-    (h/is-null (h/query-by-label-text :url-preview-loading)))
-
-  (h/test "on-clear event"
-    (let [on-clear (h/mock-fn)]
-      (h/render [view/view {:on-clear on-clear}])
-      (h/fire-event :press (h/get-by-label-text :button-clear-preview))
-      (h/was-called on-clear)))
-
-  (h/describe "loading state"
-    (h/test "shows a loading container"
-      (h/render [view/view {:loading? true :loading-message "Hello"}])
-      (h/is-null (h/query-by-label-text :title))
-      (h/is-truthy (h/query-by-label-text :url-preview-loading)))
-
-    (h/test "renders if `loading-message` is not passed"
-      (h/render [view/view {:loading? true}])
-      (h/is-null (h/query-by-label-text :title))
-      (h/is-truthy (h/query-by-label-text :url-preview-loading)))))

src/quo2/components/links/url_preview/style.cljs

@@ -1,58 +0,0 @@
-(ns quo2.components.links.url-preview.style
-  (:require [quo2.foundations.colors :as colors]))
-
-(def horizontal-padding 12)
-
-(defn container
-  []
-  {:height             56
-   :background-color   (colors/theme-colors colors/neutral-5 colors/neutral-90)
-   :padding-vertical   10
-   :padding-horizontal horizontal-padding
-   :border-radius      12
-   :align-self         :stretch
-   :flex-direction     :row})
-
-(defn loading-container
-  []
-  {:height          56
-   :border-width    1
-   :border-radius   12
-   :border-style    :dashed
-   :align-items     :center
-   :justify-content :center
-   :align-self      :stretch
-   :padding         horizontal-padding
-   :border-color    (colors/theme-colors colors/neutral-30 colors/neutral-80)})
-
-(defn loading-message
-  []
-  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)})
-
-(def logo
-  {:width         16
-   :height        16
-   :top           1
-   :border-radius 8})
-
-(def content-container
-  {:margin-left 6
-   :flex        1})
-
-(defn title
-  []
-  {:color (colors/theme-colors colors/neutral-100 colors/white)})
-
-(defn body
-  []
-  {:text-transform :lowercase
-   :color          (colors/theme-colors colors/neutral-50 colors/neutral-40)})
-
-(def clear-button
-  {:border-color colors/danger-50
-   :border-width 1})
-
-(def clear-button-container
-  {:width       20
-   :height      20
-   :margin-left 6})

src/quo2/components/links/url_preview/view.cljs

@@ -1,63 +0,0 @@
-(ns quo2.components.links.url-preview.view
-  (:require
-    [quo2.components.icon :as icon]
-    [quo2.components.links.url-preview.style :as style]
-    [quo2.components.markdown.text :as text]
-    [quo2.foundations.colors :as colors]
-    [react-native.core :as rn]))
-
-(defn- logo-component
-  [{:keys [logo]}]
-  [rn/image
-   {:accessibility-label :logo
-    :source              logo
-    :style               style/logo}])
-
-(defn- content
-  [{:keys [title body]}]
-  [rn/view {:style style/content-container}
-   [text/text
-    {:accessibility-label :title
-     :size                :paragraph-2
-     :weight              :semi-bold
-     :number-of-lines     1
-     :style               (style/title)}
-    title]
-   [text/text
-    {:accessibility-label :body
-     :size                :paragraph-2
-     :weight              :medium
-     :number-of-lines     1
-     :style               (style/body)}
-    body]])
-
-(defn- clear-button
-  [{:keys [on-press]}]
-  [rn/touchable-opacity
-   {:on-press            on-press
-    :style               style/clear-button-container
-    :hit-slop            {:top 3 :right 3 :bottom 3 :left 3}
-    :accessibility-label :button-clear-preview}
-   [icon/icon :i/clear
-    {:size            20
-     :container-style style/clear-button
-     :color           (colors/theme-colors colors/neutral-50 colors/neutral-60)}]])
-
-(defn view
-  [{:keys [title body logo on-clear loading? loading-message container-style]}]
-  (if loading?
-    [rn/view
-     {:accessibility-label :url-preview-loading
-      :style               (merge (style/loading-container) container-style)}
-     [rn/text
-      {:size            :paragraph-2
-       :weight          :medium
-       :number-of-lines 1
-       :style           (style/loading-message)}
-      loading-message]]
-    [rn/view
-     {:accessibility-label :url-preview
-      :style               (merge (style/container) container-style)}
-     [logo-component {:logo logo}]
-     [content {:title title :body body}]
-     [clear-button {:on-press on-clear}]]))

src/quo2/components/list_items/channel.cljs

@@ -62,4 +62,4 @@
                 (not muted?)
                 (not (pos? (int mentions-count)))
                 unread-messages?)
-       [unread-grey-dot :unviewed-messages-public])]]])
+       [unread-grey-dot])]]])

src/quo2/components/navigation/page_nav.cljs

@@ -30,16 +30,16 @@
            {:no-color true})))
 
 (defn left-section-view
-  [{:keys [on-press icon accessibility-label type icon-background-color] :or {type :grey}}
+  [{:keys [on-press icon accessibility-label type icon-override-theme] :or {type :grey}}
    put-middle-section-on-left?]
   [rn/view {:style (when put-middle-section-on-left? {:margin-right 5})}
    [button/button
-    {:on-press                  on-press
+    {:on-press            on-press
-     :icon                      true
+     :icon                true
-     :type                      type
+     :type                type
-     :size                      32
+     :size                32
-     :accessibility-label       accessibility-label
+     :accessibility-label accessibility-label
-     :override-background-color icon-background-color}
+     :override-theme      icon-override-theme}
     icon]])
 
 (defn- mid-section-comp
@@ -150,15 +150,13 @@
                   :justify-content :flex-end)}
    (let [last-icon-index (-> right-section-buttons count dec)]
      (map-indexed (fn [index
-                       {:keys [icon on-press type style icon-override-theme accessibility-label]
+                       {:keys [icon on-press type style icon-override-theme]
                         :or   {type :grey}}]
                     ^{:key index}
                     [rn/view
-                     (cond-> {:style (assoc style
+                     {:style (assoc style
-                                            :margin-right
+                                    :margin-right
-                                            (if (= index last-icon-index) 0 8))}
+                                    (if (= index last-icon-index) 0 8))}
-                       accessibility-label (assoc :accessibility-label accessibility-label
-                                                  :accessible          true))
                      [button/button
                       {:on-press       on-press
                        :icon           true
@@ -203,8 +201,8 @@
       }
    }
   "
-  [{:keys [container-style one-icon-align-left? horizontal-description?
+  [{:keys [one-icon-align-left? horizontal-description? align-mid?
-           align-mid? page-nav-color page-nav-background-uri
+           page-nav-color page-nav-background-uri
            mid-section
            left-section
            right-section-buttons]}]
@@ -222,14 +220,13 @@
          :left-icon               (:left-icon mid-section)
          :avatar                  (:avatar mid-section)}]
     [rn/view
-     {:style (cond-> (merge {:display            :flex
+     {:style (cond-> {:display            :flex
-                             :flex-direction     :row
+                      :flex-direction     :row
-                             ;;  iPhone 11 Pro's height in Figma divided by Component height 56/1125
+                      ;;  iPhone 11 Pro's height in Figma divided by Component height 56/1125
-                             :align-items        :center
+                      :align-items        :center
-                             :padding-horizontal 20
+                      :padding-horizontal 20
-                             :height             56
+                      :height             56
-                             :justify-content    :space-between}
+                      :justify-content    :space-between}
-                            container-style)
                page-nav-background-uri (assoc :background-color page-nav-color)
                page-nav-color          (assoc :background page-nav-background-uri))}
      [rn/view
@@ -238,18 +235,15 @@
                :align-items    :center}}
       (when left-section
         [left-section-view left-section put-middle-section-on-left?])
-      (when mid-section
+      (when put-middle-section-on-left?
-        (cond
+        [mid-section-view
-          put-middle-section-on-left?
+         (assoc mid-section-props
-          [mid-section-view
+                :left-align?           true
-           (assoc mid-section-props
+                :description           (:description mid-section)
-                  :left-align?           true
+                :description-color     (:description-color mid-section)
-                  :description           (:description mid-section)
+                :description-icon      (:description-icon mid-section)
-                  :description-color     (:description-color mid-section)
+                :align-mid?            align-mid?
-                  :description-icon      (:description-icon mid-section)
+                :description-user-icon (:description-user-icon mid-section))])]
-                  :align-mid?            align-mid?
+     (when-not put-middle-section-on-left?
-                  :description-user-icon (:description-user-icon mid-section))]
+       [mid-section-view mid-section-props])
-
-          (not put-middle-section-on-left?)
-          [mid-section-view mid-section-props]))]
      [right-section-view right-section-buttons]]))

src/quo2/components/password/tips/view.cljs

@@ -16,8 +16,7 @@
    [text/text
     {:style  (style/tip-text completed?)
      :weight :regular
-     :size   :paragraph-2}
+     :size   :paragraph-2} text]
-    text]
    (when completed?
      [rn/view
       {:style               style/strike-through

src/quo2/components/profile/profile_card/style.cljs

@@ -2,16 +2,14 @@
   (:require [quo2.foundations.colors :as colors]))
 
 (defn card-container
-  [{:keys [customization-color padding-bottom border-bottom-radius]}]
+  [customization-color padding-bottom]
-  {:padding-horizontal         12
+  {:flex-direction     :column
-   :padding-top                12
+   :padding-horizontal 12
-   :padding-bottom             padding-bottom
+   :padding-top        12
-   :flex                       1
+   :padding-bottom     padding-bottom
-   :border-top-left-radius     16
+   :flex               1
-   :border-top-right-radius    16
+   :border-radius      16
-   :border-bottom-left-radius  border-bottom-radius
+   :background-color   (colors/custom-color customization-color 50 40)})
-   :border-bottom-right-radius border-bottom-radius
-   :background-color           (colors/custom-color customization-color 50 40)})
 
 (def card-header
   {:flex-direction  :row

src/quo2/components/profile/profile_card/view.cljs

@@ -4,104 +4,77 @@
             [quo2.components.icon :as icon]
             [quo2.components.tags.tag :as tag]
             [quo2.foundations.colors :as colors]
-            [react-native.hole-view :as hole-view]
             [quo2.components.markdown.text :as text]
             [quo2.components.buttons.button :as button]
-            [quo2.components.profile.profile-card.style :as style]
+            [quo2.components.avatars.user-avatar.view :as user-avatar]
-            [quo2.components.avatars.user-avatar.view :as user-avatar]))
+            [quo2.components.profile.profile-card.style :as style]))
 
-(defn- profile-card-component
+(defn profile-card
-  [{:keys [keycard-account? profile-picture name hash
+  [{:keys [key-card? profile-picture name hash customization-color
-           customization-color emoji-hash on-options-press
+           emoji-hash on-options-press show-emoji-hash? padding-bottom
-           show-emoji-hash? show-options-button? show-user-hash?
+           show-options-button? show-user-hash? show-logged-in? on-card-press]
-           show-logged-in? on-card-press login-card? last-item? card-style]
     :or   {show-emoji-hash?     false
            show-user-hash?      false
            customization-color  :turquoise
            show-options-button? false
            show-logged-in?      false
-           keycard-account?     false
+           key-card?            false}}]
-           login-card?          false
+  [rn/touchable-without-feedback
-           last-item?           false
+   {:on-press            on-card-press
-           card-style           {:padding-horizontal 20
+    :flex                1
-                                 :flex               1}}}]
+    :accessibility-label :profile-card}
-  (let [{:keys [width]}      (rn/use-window-dimensions)
+   [rn/view
-        padding-bottom       (cond
+    (style/card-container
-                               login-card?      38
+     customization-color
-                               show-emoji-hash? 12
+     (or padding-bottom (if show-emoji-hash? 12 10)))
-                               :else            10)
+    [rn/view
-        border-bottom-radius (if (or (not login-card?) last-item?) 16 0)]
+     {:style style/card-header}
-    [rn/touchable-without-feedback
+     [user-avatar/user-avatar
-     {:on-press            on-card-press
+      {:full-name         name
-      :accessibility-label :profile-card}
+       :profile-picture   profile-picture
-     [hole-view/hole-view
+       :override-theme    :dark
-      {:key   (str name last-item?) ;; Key is required to force removal of holes
+       :size              :medium
-       :style (merge {:flex-direction :row} card-style)
+       :status-indicator? false}]
-       :holes (if (or (not login-card?) last-item?)
+     [rn/view {:flex-direction :row}
-                []
+      (when show-logged-in?
-                [{:x            20
+        [tag/tag
-                  :y            108
+         {:type                :icon
-                  :width        (- width 40)
+          :size                32
-                  :height       50
+          :blurred?            true
-                  :borderRadius 16}])}
+          :labelled?           true
-      [rn/view
+          :resource            :main-icons2/check
-       {:style (style/card-container
+          :accessibility-label :logged-in-tag
-                {:customization-color  customization-color
+          :icon-color          colors/success-50
-                 :padding-bottom       padding-bottom
-                 :border-bottom-radius border-bottom-radius})}
-       [rn/view
-        {:style style/card-header}
-        [user-avatar/user-avatar
-         {:full-name           name
-          :profile-picture     profile-picture
           :override-theme      :dark
-          :size                :medium
+          :label               (i18n/label :t/logged-in)}])
-          :status-indicator?   false
+      (when show-options-button?
-          :customization-color customization-color}]
+        [button/button
-        [rn/view {:flex-direction :row}
+         {:size                32
-         (when show-logged-in?
+          :type                :blur-bg
-           [tag/tag
+          :icon                true
-            {:type                :icon
+          :override-theme      :dark
-             :size                32
+          :style               style/option-button
-             :blurred?            true
+          :on-press            on-options-press
-             :labelled?           true
+          :accessibility-label :profile-card-options}
-             :resource            :main-icons2/check
+         :i/options])]]
-             :accessibility-label :logged-in-tag
+    [rn/view
-             :icon-color          colors/success-50
+     {:style style/name-container}
-             :override-theme      :dark
+     [text/text
-             :label               (i18n/label :t/logged-in)}])
+      {:size            :heading-2
-         (when show-options-button?
+       :weight          :semi-bold
-           [button/button
+       :number-of-lines 1
-            {:size                32
+       :style           style/user-name} name]
-             :type                :blur-bg
+     (when key-card?
-             :icon                true
+       (icon/icon
-             :override-theme      :dark
+        :i/keycard
-             :style               style/option-button
+        style/keycard-icon))]
-             :on-press            on-options-press
+    (when show-user-hash?
-             :accessibility-label :profile-card-options}
+      [text/text
-            :i/options])]]
+       {:weight          :monospace
-       [rn/view
+        :number-of-lines 1
-        {:style style/name-container}
+        :style           style/user-hash} hash])
-        [text/text
+    (when (and show-emoji-hash? emoji-hash)
-         {:size            :heading-2
+      [text/text
-          :weight          :semi-bold
+       {:weight          :monospace
-          :number-of-lines 1
+        :number-of-lines 1
-          :style           style/user-name} name]
+        :style           style/emoji-hash} emoji-hash])]])
-        (when keycard-account?
-          (icon/icon
-           :i/keycard
-           style/keycard-icon))]
-       (when show-user-hash?
-         [text/text
-          {:weight          :monospace
-           :number-of-lines 1
-           :style           style/user-hash} hash])
-       (when (and show-emoji-hash? emoji-hash)
-         [text/text
-          {:weight          :monospace
-           :number-of-lines 1
-           :style           style/emoji-hash} emoji-hash])]]]))
-
-(defn profile-card
-  [props]
-  [:f> profile-card-component props])

src/quo2/components/selectors/disclaimer/component_spec.cljs

@@ -1,29 +0,0 @@
-(ns quo2.components.selectors.disclaimer.component-spec
-  (:require [quo2.components.selectors.disclaimer.view :as disclaimer]
-            [test-helpers.component :as h]))
-
-(h/describe "Disclaimer tests"
-  (h/test "Default render of toggle component"
-    (h/render [disclaimer/view {:on-change (h/mock-fn)} "test"])
-    (h/is-truthy (h/get-by-label-text :checkbox-off)))
-
-  (h/test "Renders its text"
-    (let [text "I accept this disclaimer"]
-      (h/render [disclaimer/view {} text])
-      (h/is-truthy (h/get-by-text text))))
-
-  (h/test "On change event gets fire after press"
-    (let [mock-fn (h/mock-fn)]
-      (h/render [disclaimer/view {:on-change mock-fn} "test"])
-      (h/fire-event :press (h/get-by-label-text :checkbox-off))
-      (h/was-called mock-fn)))
-
-  (h/describe "It's rendered according to its `checked?` property"
-    (h/test "checked? true"
-      (h/render [disclaimer/view {:checked? true} "test"])
-      (h/is-null (h/query-by-label-text :checkbox-off))
-      (h/is-truthy (h/query-by-label-text :checkbox-on)))
-    (h/test "checked? false"
-      (h/render [disclaimer/view {:checked? false} "test"])
-      (h/is-null (h/query-by-label-text :checkbox-on))
-      (h/is-truthy (h/query-by-label-text :checkbox-off)))))

src/quo2/components/selectors/disclaimer/style.cljs

@@ -2,16 +2,14 @@
   (:require [quo2.foundations.colors :as colors]))
 
 (defn container
-  [blur?]
+  []
-  (let [dark-background (if blur? colors/white-opa-5 colors/neutral-80-opa-40)
+  {:flex-direction   :row
-        dark-border     (if blur? colors/white-opa-10 colors/neutral-70)]
+   :background-color (colors/theme-colors colors/neutral-5 colors/neutral-80-opa-40)
-    {:flex-direction   :row
+   :padding          11
-     :background-color (colors/theme-colors colors/neutral-5 dark-background)
+   :align-self       :stretch
-     :padding          11
+   :border-radius    12
-     :align-self       :stretch
+   :border-width     1
-     :border-radius    12
+   :border-color     (colors/theme-colors colors/neutral-20 colors/neutral-70)})
-     :border-width     1
-     :border-color     (colors/theme-colors colors/neutral-20 dark-border)}))
 
 (def text
   {:margin-left 8})

src/quo2/components/selectors/disclaimer/view.cljs

@@ -5,13 +5,12 @@
             [react-native.core :as rn]))
 
 (defn view
-  [{:keys [checked? blur? on-change accessibility-label container-style]} label]
+  [{:keys [on-change accessibility-label container-style]} label]
   [rn/view
-   {:style (merge container-style (style/container blur?))}
+   {:style (merge container-style (style/container))}
    [selectors/checkbox
     {:accessibility-label accessibility-label
-     :on-change           on-change
+     :on-change           on-change}]
-     :checked?            checked?}]
    [text/text
     {:size  :paragraph-2
      :style style/text}

src/quo2/components/tabs/segmented_tab.cljs

@@ -5,10 +5,6 @@
             [react-native.core :as rn]
             [reagent.core :as reagent]))
 
-(def themes-for-blur
-  {:light {:background-color colors/neutral-80-opa-5}
-   :dark  {:background-color colors/white-opa-5}})
-
 (def themes
   {:light {:background-color colors/neutral-20}
    :dark  {:background-color colors/neutral-80}})
@@ -16,12 +12,11 @@
 (defn segmented-control
   [{:keys [default-active on-change]}]
   (let [active-tab-id (reagent/atom default-active)]
-    (fn [{:keys [data size override-theme blur?]}]
+    (fn [{:keys [data size]}]
       (let [active-id @active-tab-id]
         [rn/view
          {:flex-direction   :row
-          :background-color (get-in (if blur? themes-for-blur themes)
+          :background-color (get-in themes [(theme/get-theme) :background-color])
-                                    [(or override-theme (theme/get-theme)) :background-color])
           :border-radius    (case size
                               32 10
                               28 8
@@ -34,14 +29,12 @@
             {:margin-left (if (= 0 indx) 0 2)
              :flex        1}
             [tab/view
-             {:id             id
+             {:id         id
-              :segmented?     true
+              :segmented? true
-              :size           size
+              :size       size
-              :override-theme override-theme
+              :active     (= id active-id)
-              :blur?          blur?
+              :on-press   (fn [tab-id]
-              :active         (= id active-id)
+                            (reset! active-tab-id tab-id)
-              :on-press       (fn [tab-id]
+                            (when on-change
-                                (reset! active-tab-id tab-id)
+                              (on-change tab-id)))}
-                                (when on-change
-                                  (on-change tab-id)))}
              label]])]))))

src/quo2/components/tabs/tab/view.cljs

@@ -79,12 +79,11 @@
         [notification-dot/notification-dot
          {:style style/notification-dot}])
       [rn/view
-       {:style (style/tab
+       {:style (style/tab {:size                   size
-                {:size                   size
+                           :disabled               disabled
-                 :disabled               disabled
+                           :segmented?             segmented?
-                 :segmented?             segmented?
+                           :background-color       background-color
-                 :background-color       (if (and segmented? (not active)) :transparent background-color)
+                           :show-notification-dot? show-notification-dot?})}
-                 :show-notification-dot? show-notification-dot?})}
        (when before
          [rn/view
           [icons/icon before {:color icon-color}]])

src/quo2/components/tags/status_tags.cljs

@@ -11,14 +11,12 @@
 
 (def small-container-style
   (merge default-container-style
-         {:min-height         24
+         {:padding-horizontal 8
-          :padding-horizontal 8
           :padding-vertical   1}))
 
 (def large-container-style
   (merge default-container-style
-         {:min-height         32
+         {:padding-horizontal 11
-          :padding-horizontal 11
           :padding-vertical   4}))
 
 (defn base-tag
@@ -38,7 +36,6 @@
         :style               (assoc (if (= size :small)
                                       small-container-style
                                       large-container-style)
-                                    :align-self       :flex-start
                                     :border-width     1
                                     :border-color     border-color
                                     :background-color background-color)}
@@ -48,11 +45,10 @@
         [rn/view
          {:style {:justify-content :center
                   :align-items     :center}}
-         (when icon
+         [icon/icon
-           [icon/icon
+          icon
-            icon
+          {:no-color true
-            {:no-color true
+           :size     (if (= size :large) 20 12)}]]
-             :size     (if (= size :large) 20 12)}])]
         [text/text
          {:size   paragraph-size
           :weight :medium
@@ -60,11 +56,11 @@
                    :color        text-color}} label]]])))
 
 (defn- positive
-  [size theme label _ no-icon?]
+  [size theme label _]
   [base-tag
    {:accessibility-label :status-tag-positive
     :size                size
-    :icon                (when-not no-icon? :i/positive-state)
+    :icon                :i/positive-state
     :background-color    colors/success-50-opa-10
     :border-color        colors/success-50-opa-20
     :label               label
@@ -72,11 +68,11 @@
     :text-color          (if (= theme :dark) colors/success-60 colors/success-50)}])
 
 (defn- negative
-  [size theme label _ no-icon?]
+  [size theme label _]
   [base-tag
    {:accessibility-label :status-tag-negative
     :size                size
-    :icon                (when-not no-icon? :i/negative-state)
+    :icon                :i/negative-state
     :background-color    colors/danger-50-opa-10
     :border-color        colors/danger-50-opa-20
     :label               label
@@ -84,15 +80,14 @@
     :text-color          (if (= theme :light) colors/danger-50 colors/danger-60)}])
 
 (defn- pending
-  [size theme label blur? no-icon?]
+  [size theme label blur?]
   [base-tag
    {:accessibility-label :status-tag-pending
     :size                size
     :label               label
-    :icon                (when-not no-icon?
+    :icon                (if blur?
-                           (if blur?
+                           :i/pending-dark-blur
-                             :i/pending-dark-blur
+                           (if (= theme :light) :i/pending-light :i/pending-dark))
-                             (if (= theme :light) :i/pending-light :i/pending-dark)))
     :background-color    (if blur?
                            colors/white-opa-5
                            (colors/theme-colors colors/neutral-10 colors/neutral-80-opa-40 theme))
@@ -105,7 +100,7 @@
                            (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}])
 
 (defn status-tag
-  [{:keys [status size override-theme label blur? no-icon?]}]
+  [{:keys [status size override-theme label blur?]}]
   (when status
     (when-let [status-component (case (:type status)
                                   :positive positive
@@ -116,5 +111,4 @@
        size
        (or override-theme (quo2.theme/get-theme))
        label
-       blur?
+       blur?])))
-       no-icon?])))

src/quo2/core.cljs

@@ -33,7 +33,6 @@
     quo2.components.inputs.input.view
     quo2.components.inputs.title-input.view
     quo2.components.inputs.profile-input.view
-    quo2.components.links.url-preview.view
     quo2.components.list-items.channel
     quo2.components.list-items.menu-item
     quo2.components.list-items.preview-list
@@ -61,7 +60,6 @@
     quo2.components.settings.accounts.view
     quo2.components.settings.privacy-option
     quo2.components.onboarding.small-option-card.view
-    quo2.components.tabs.segmented-tab
     quo2.components.tabs.account-selector
     quo2.components.tabs.tabs
     quo2.components.tags.context-tags
@@ -93,7 +91,6 @@
 (def audio-tag quo2.components.tags.context-tags/audio-tag)
 (def community-tag quo2.components.tags.context-tags/community-tag)
 (def tabs quo2.components.tabs.tabs/tabs)
-(def segmented-control quo2.components.tabs.segmented-tab/segmented-control)
 (def account-selector quo2.components.tabs.account-selector/account-selector)
 (def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button)
 (def page-nav quo2.components.navigation.page-nav/page-nav)
@@ -183,6 +180,3 @@
 (def permission-tag quo2.components.tags.permission-tag/tag)
 (def status-tag quo2.components.tags.status-tags/status-tag)
 (def token-tag quo2.components.tags.token-tag/tag)
-
-;;;; LINKS
-(def url-preview quo2.components.links.url-preview.view/view)

src/quo2/core_spec.cljs

@@ -1,26 +1,22 @@
 (ns quo2.core-spec
-  (:require
+  (:require [quo2.components.avatars.user-avatar.component-spec]
-    [quo2.components.avatars.user-avatar.component-spec]
+            [quo2.components.banners.banner.component-spec]
-    [quo2.components.banners.banner.component-spec]
+            [quo2.components.buttons.--tests--.buttons-component-spec]
-    [quo2.components.buttons.--tests--.buttons-component-spec]
+            [quo2.components.counter.--tests--.counter-component-spec]
-    [quo2.components.colors.color-picker.component-spec]
+            [quo2.components.dividers.--tests--.divider-label-component-spec]
-    [quo2.components.counter.--tests--.counter-component-spec]
+            [quo2.components.dividers.strength-divider.component-spec]
-    [quo2.components.dividers.--tests--.divider-label-component-spec]
+            [quo2.components.drawers.action-drawers.component-spec]
-    [quo2.components.dividers.strength-divider.component-spec]
+            [quo2.components.drawers.drawer-buttons.component-spec]
-    [quo2.components.drawers.action-drawers.component-spec]
+            [quo2.components.drawers.permission-context.component-spec]
-    [quo2.components.drawers.drawer-buttons.component-spec]
+            [quo2.components.colors.color-picker.component-spec]
-    [quo2.components.drawers.permission-context.component-spec]
+            [quo2.components.inputs.profile-input.component-spec]
-    [quo2.components.inputs.input.component-spec]
+            [quo2.components.inputs.title-input.component-spec]
-    [quo2.components.inputs.profile-input.component-spec]
+            [quo2.components.markdown.--tests--.text-component-spec]
-    [quo2.components.inputs.title-input.component-spec]
+            [quo2.components.onboarding.small-option-card.component-spec]
-    [quo2.components.links.url-preview.component-spec]
+            [quo2.components.password.tips.component-spec]
-    [quo2.components.markdown.--tests--.text-component-spec]
+            [quo2.components.record-audio.record-audio.--tests--.record-audio-component-spec]
-    [quo2.components.onboarding.small-option-card.component-spec]
+            [quo2.components.record-audio.soundtrack.--tests--.soundtrack-component-spec]
-    [quo2.components.password.tips.component-spec]
+            [quo2.components.profile.select-profile.component-spec]
-    [quo2.components.profile.select-profile.component-spec]
+            [quo2.components.selectors.--tests--.selectors-component-spec]
-    [quo2.components.record-audio.record-audio.--tests--.record-audio-component-spec]
+            [quo2.components.selectors.filter.component-spec]
-    [quo2.components.record-audio.soundtrack.--tests--.soundtrack-component-spec]
+            [quo2.components.tags.--tests--.status-tags-component-spec]))
-    [quo2.components.selectors.--tests--.selectors-component-spec]
-    [quo2.components.selectors.disclaimer.component-spec]
-    [quo2.components.selectors.filter.component-spec]
-    [quo2.components.tags.--tests--.status-tags-component-spec]))

src/quo2/foundations/colors.cljs

@@ -85,7 +85,6 @@
 ;;100 with transparency
 (def neutral-100-opa-0 (alpha neutral-100 0))
 (def neutral-100-opa-10 (alpha neutral-100 0.1))
-(def neutral-100-opa-30 (alpha neutral-100 0.3))
 (def neutral-100-opa-60 (alpha neutral-100 0.6))
 (def neutral-100-opa-70 (alpha neutral-100 0.7))
 (def neutral-100-opa-80 (alpha neutral-100 0.8))
@@ -117,7 +116,6 @@
 
 ;;;;Blur
 (def white-70-blur (alpha white 0.7))
-(def neutral-80-opa-1-blur (alpha "#192438" 0.1))
 (def neutral-5-opa-70-blur (alpha neutral-5 0.7))
 (def neutral-80-opa-80-blur (alpha "#192438" 0.8))
 (def neutral-90-opa-70-blur (alpha neutral-90 0.7))
@@ -128,7 +126,6 @@
 
 ;;Solid
 (def black "#000000")
-(def onboarding-header-black "#000716")
 
 ;;;;Primary
 
@@ -239,11 +236,7 @@
      ([color suffix]
       (custom-color color suffix nil))
      ([color suffix opacity]
-      (let [color-keyword (keyword color)
+      (let [base-color (get-in colors-map [(keyword color) suffix])]
-            base-color    (get-in colors-map
-                                  [(if (= color-keyword :yinyang)
-                                     (if (theme/dark?) :yang :yin)
-                                     (keyword color)) suffix])]
         (if opacity (alpha base-color (/ opacity 100)) base-color))))))
 
 (defn custom-color-by-theme

src/react_native/blur.cljs

@@ -1,10 +1,5 @@
 (ns react-native.blur
   (:require ["@react-native-community/blur" :as blur]
-            [react-native.platform :as platform]
+            [reagent.core :as reagent]))
-            [reagent.core :as reagent]
-            [react-native.core :as rn]))
 
 (def view (reagent/adapt-react-class (.-BlurView blur)))
-
-;; blur view is currently not working correctly on Android.
-(def ios-view (if platform/ios? view rn/view))

src/react_native/camera_kit.cljs

@@ -1,5 +0,0 @@
-(ns react-native.camera-kit
-  (:require ["react-native-camera-kit" :refer (CameraKitCamera)]
-            [reagent.core :as reagent]))
-
-(def camera (reagent/adapt-react-class CameraKitCamera))

src/react_native/gesture.cljs

@@ -6,8 +6,7 @@
               Swipeable
               TouchableWithoutFeedback
               gestureHandlerRootHOC
-              FlatList
+              FlatList)]
-              ScrollView)]
             [react-native.flat-list :as rn-flat-list]
             [reagent.core :as reagent]))
 
@@ -70,9 +69,6 @@
         children))
 
 (def gesture-flat-list (reagent/adapt-react-class FlatList))
-
 (defn flat-list
   [props]
   [gesture-flat-list (rn-flat-list/base-list-props props)])
-
-(def scroll-view (reagent/adapt-react-class ScrollView))

src/react_native/hooks.cljs

@@ -6,7 +6,3 @@
   (let [kb (.useKeyboard hooks)]
     {:keyboard-shown  (.-keyboardShown ^js kb)
      :keyboard-height (.-keyboardHeight ^js kb)}))
-
-(defn use-back-handler
-  [handler]
-  (.useBackHandler hooks handler))

src/react_native/reanimated.cljs

@@ -9,22 +9,18 @@
                              withDelay
                              withSpring
                              withRepeat
-                             withSequence
                              withDecay
                              Easing
                              Keyframe
                              cancelAnimation
                              SlideInUp
                              SlideOutUp
-                             LinearTransition
+                             LinearTransition)]
-                             runOnJS)]
             [reagent.core :as reagent]
-            ["react-native-redash" :refer (withPause)]
             [react-native.flat-list :as rn-flat-list]
+            [utils.collection]
             [utils.worklets.core :as worklets.core]))
 
-(def ^:const default-duration 300)
-
 ;; Animations
 (def slide-in-up-animation SlideInUp)
 (def slide-out-up-animation SlideOutUp)
@@ -61,19 +57,14 @@
 (def with-decay withDecay)
 (def key-frame Keyframe)
 (def with-repeat withRepeat)
-(def with-sequence withSequence)
-(def with-pause withPause)
 (def cancel-animation cancelAnimation)
 
-(def run-on-js runOnJS)
-
 ;; Easings
 (def bezier (.-bezier ^js Easing))
 
 (def in-out
   (.-inOut ^js Easing))
 
-;; trying to put default-easing inside easings map causes test to fail
 (defn default-easing [] (in-out (.-quad ^js Easing)))
 
 (def easings
@@ -124,15 +115,13 @@
                                              (js-obj "duration" duration
                                                      "easing"   (get easings easing))))))
 
-(defn animate-delay
+(defn animate-shared-value-with-delay-default-easing
-  ([animation val delay]
+  [anim val duration delay]
-   (animate-delay animation val delay default-duration))
+  (set-shared-value anim
-  ([animation val delay duration]
+                    (with-delay delay
-   (set-shared-value animation
+                                (with-timing val
-                     (with-delay delay
+                                             (js-obj "duration" duration
-                                 (with-timing val
+                                                     "easing"   (in-out (.-quad ^js Easing)))))))
-                                              (clj->js {:duration duration
-                                                        :easing   (default-easing)}))))))
 
 (defn animate-shared-value-with-repeat
   [anim val duration easing number-of-repetitions reverse?]

src/react_native/syntax_highlighter.cljs

@@ -1,11 +1,5 @@
 (ns react-native.syntax-highlighter
-  (:require ["react-native" :as react-native]
+  (:require ["react-syntax-highlighter" :default Highlighter]
-            ["react-syntax-highlighter" :default Highlighter]))
+            [reagent.core :as reagent]))
 
-
+(def highlighter (reagent/adapt-react-class Highlighter))
-(defn highlighter
-  [props code-string]
-  [:> Highlighter
-   ;; Default props to adapt Highlighter for react-native.
-   (assoc props :Code-tag react-native/View :Pre-tag react-native/View)
-   code-string])

src/status_im/add_new/core.cljs

@@ -83,7 +83,7 @@
       (if new-contact?
         (rf/merge cofx
                   (contact/add-contact chat-key nickname ens-name)
-                  (navigation/navigate-to :contacts-list {}))
+                  (navigation/navigate-to-cofx :contacts-list {}))
         (chat/start-chat cofx chat-key ens-name))
       {:utils/show-popup {:title      (i18n/label :t/unable-to-read-this-code)
                           :content    (case validation-result

src/status_im/bottom_sheet/events.cljs

@@ -1,30 +0,0 @@
-(ns status-im.bottom-sheet.events
-  (:require [utils.re-frame :as rf]))
-
-(rf/defn show-bottom-sheet-old
-  [{:keys [db]} {:keys [view options]}]
-  {:dismiss-keyboard              nil
-   :show-bottom-sheet-overlay-old nil
-   :db                            (assoc db
-                                         :bottom-sheet/show?   true
-                                         :bottom-sheet/view    view
-                                         :bottom-sheet/options options)})
-
-(rf/defn show-bottom-sheet-event
-  {:events [:bottom-sheet/show-sheet-old]}
-  [cofx view options]
-  (show-bottom-sheet-old
-   cofx
-   {:view    view
-    :options options}))
-
-(rf/defn hide-bottom-sheet-old
-  {:events [:bottom-sheet/hide-old]}
-  [{:keys [db]}]
-  {:db                               (assoc db :bottom-sheet/show? false)
-   :dismiss-bottom-sheet-overlay-old nil})
-
-(rf/defn hide-bottom-sheet-navigation-overlay
-  {:events [:bottom-sheet/hide-old-navigation-overlay]}
-  [{}]
-  {:dismiss-bottom-sheet-overlay-old nil})

src/status_im/bottom_sheet/styles.cljs

@@ -1,56 +0,0 @@
-(ns status-im.bottom-sheet.styles
-  (:require [quo2.foundations.colors :as colors]))
-
-(def border-radius 20)
-
-(defn handle
-  [override-theme]
-  {:position         :absolute
-   :top              8
-   :width            32
-   :height           4
-   :background-color (colors/theme-colors colors/neutral-100 colors/white override-theme)
-   :opacity          0.1
-   :border-radius    100
-   :align-self       :center})
-
-(def backdrop
-  {:position         :absolute
-   :left             0
-   :right            0
-   :bottom           0
-   :top              0
-   :background-color colors/neutral-100})
-
-(def container
-  {:position :absolute
-   :left     0
-   :right    0
-   :top      0
-   :bottom   0
-   :overflow :hidden})
-
-(defn content-style
-  [insets bottom-safe-area-spacing?]
-  {:position       :absolute
-   :left           0
-   :right          0
-   :top            0
-   :padding-top    border-radius
-   :padding-bottom (if bottom-safe-area-spacing? (:bottom insets) 0)})
-
-(defn selected-background
-  [override-theme]
-  {:border-radius     12
-   :padding-left      12
-   :margin-horizontal 8
-   :margin-bottom     10
-   :height            48
-   :background-color  (colors/theme-colors colors/white colors/neutral-90 override-theme)})
-
-(defn background
-  [override-theme]
-  {:background-color        (colors/theme-colors colors/white colors/neutral-95 override-theme)
-   :flex                    1
-   :border-top-left-radius  border-radius
-   :border-top-right-radius border-radius})

src/status_im/bottom_sheet/view.cljs

@@ -1,240 +0,0 @@
-(ns status-im.bottom-sheet.view
-  (:require [oops.core :refer [oget]]
-            [quo.react :as react]
-            [status-im.bottom-sheet.styles :as styles]
-            [re-frame.core :as re-frame]
-            [react-native.background-timer :as timer]
-            [react-native.core :as rn]
-            [react-native.gesture :as gesture]
-            [react-native.hooks :as hooks]
-            [react-native.platform :as platform]
-            [react-native.reanimated :as reanimated]
-            [react-native.safe-area :as safe-area]
-            [reagent.core :as reagent]
-            [utils.worklets.bottom-sheet :as worklets.bottom-sheet]))
-
-(def animation-delay 450)
-
-(defn with-animation
-  [value & [options callback]]
-  (reanimated/with-spring
-   value
-   (clj->js (merge {:mass      2
-                    :stiffness 500
-                    :damping   200})
-            options)
-   callback))
-
-(defn get-bottom-sheet-gesture
-  [pan-y translate-y bg-height bg-height-expanded
-   window-height keyboard-shown disable-drag? expandable?
-   show-bottom-sheet? expanded? close-bottom-sheet gesture-running?]
-  (-> (gesture/gesture-pan)
-      (gesture/on-start
-       (fn [_]
-         (reset! gesture-running? true)
-         (when (and keyboard-shown (not disable-drag?) show-bottom-sheet?)
-           (re-frame/dispatch [:dismiss-keyboard]))))
-      (gesture/on-update
-       (fn [evt]
-         (when (and (not disable-drag?) show-bottom-sheet?)
-           (let [max-pan-up   (if (or @expanded? (not expandable?))
-                                0
-                                (- (- bg-height-expanded bg-height)))
-                 max-pan-down (if @expanded?
-                                bg-height-expanded
-                                bg-height)]
-             (reanimated/set-shared-value pan-y
-                                          (max
-                                           (min
-                                            (.-translationY evt)
-                                            max-pan-down)
-                                           max-pan-up))))))
-      (gesture/on-end
-       (fn [_]
-         (reset! gesture-running? false)
-         (when (and (not disable-drag?) show-bottom-sheet?)
-           (let [end-pan-y                  (- window-height (.-value translate-y))
-                 expand-threshold           (min (* bg-height 1.1) (+ bg-height 50))
-                 collapse-threshold         (max (* bg-height-expanded 0.9) (- bg-height-expanded 50))
-                 should-close-bottom-sheet? (< end-pan-y (max (* bg-height 0.7) 50))]
-             (cond
-               should-close-bottom-sheet?
-               (close-bottom-sheet)
-
-               (and (not @expanded?) (> end-pan-y expand-threshold))
-               (reset! expanded? true)
-
-               (and @expanded? (< end-pan-y collapse-threshold))
-               (reset! expanded? false))))))))
-
-(defn handle-comp
-  [window-width override-theme]
-  [rn/view
-   {:style {:width            window-width
-            :position         :absolute
-            :background-color :transparent
-            :top              0
-            :height           20}}
-   [rn/view {:style (styles/handle override-theme)}]])
-
-(defn bottom-sheet
-  [props children]
-  (let [{on-cancel                 :on-cancel
-         disable-drag?             :disable-drag?
-         show-handle?              :show-handle?
-         visible?                  :visible?
-         backdrop-dismiss?         :backdrop-dismiss?
-         expandable?               :expandable?
-         bottom-safe-area-spacing? :bottom-safe-area-spacing?
-         selected-item             :selected-item
-         is-initially-expanded?    :expanded?
-         override-theme            :override-theme
-         :or                       {show-handle?              true
-                                    backdrop-dismiss?         true
-                                    expandable?               false
-                                    bottom-safe-area-spacing? true
-                                    is-initially-expanded?    false}}
-        props
-        content-height (reagent/atom nil)
-        show-bottom-sheet? (reagent/atom nil)
-        keyboard-was-shown? (reagent/atom false)
-        expanded? (reagent/atom is-initially-expanded?)
-        gesture-running? (reagent/atom false)
-        reset-atoms (fn []
-                      (reset! show-bottom-sheet? nil)
-                      (reset! content-height nil)
-                      (reset! expanded? false)
-                      (reset! keyboard-was-shown? false)
-                      (reset! gesture-running? false))
-        close-bottom-sheet (fn []
-                             (reset! show-bottom-sheet? false)
-                             (when (fn? on-cancel) (on-cancel))
-                             (timer/set-timeout
-                              #(do
-                                 (re-frame/dispatch [:bottom-sheet/hide-old-navigation-overlay])
-                                 (reset-atoms))
-                              animation-delay))]
-    [safe-area/consumer
-     (fn [insets]
-       [:f>
-        (fn []
-          (let [{height       :height
-                 window-width :width}
-                (rn/use-window-dimensions)
-                window-height (if selected-item (- height 72) height)
-                {:keys [keyboard-shown]} (hooks/use-keyboard)
-                bg-height-expanded (- window-height (:top insets))
-                bg-height (max (min @content-height bg-height-expanded) 109)
-                bottom-sheet-dy (reanimated/use-shared-value 0)
-                pan-y (reanimated/use-shared-value 0)
-                translate-y (worklets.bottom-sheet/use-translate-y window-height bottom-sheet-dy pan-y)
-                bg-opacity
-                (worklets.bottom-sheet/use-background-opacity translate-y bg-height window-height 0.7)
-                on-content-layout (fn [evt]
-                                    (let [height (oget evt "nativeEvent" "layout" "height")]
-                                      (reset! content-height height)))
-                on-expanded (fn []
-                              (reanimated/set-shared-value bottom-sheet-dy bg-height-expanded)
-                              (reanimated/set-shared-value pan-y 0))
-                on-collapsed (fn []
-                               (reanimated/set-shared-value bottom-sheet-dy bg-height)
-                               (reanimated/set-shared-value pan-y 0))
-                bottom-sheet-gesture (get-bottom-sheet-gesture
-                                      pan-y
-                                      translate-y
-                                      bg-height
-                                      bg-height-expanded
-                                      window-height
-                                      keyboard-shown
-                                      disable-drag?
-                                      expandable?
-                                      show-bottom-sheet?
-                                      expanded?
-                                      close-bottom-sheet
-                                      gesture-running?)
-                handle-comp [gesture/gesture-detector {:gesture bottom-sheet-gesture}
-                             [handle-comp window-width override-theme]]]
-
-            (react/effect! #(do
-                              (cond
-                                (and
-                                 (nil? @show-bottom-sheet?)
-                                 visible?
-                                 (some? @content-height)
-                                 (> @content-height 0))
-                                (reset! show-bottom-sheet? true)
-
-                                (and @show-bottom-sheet? (not visible?))
-                                (close-bottom-sheet)))
-                           [@show-bottom-sheet? @content-height visible?])
-            (react/effect! #(do
-                              (when @show-bottom-sheet?
-                                (cond
-                                  keyboard-shown
-                                  (do
-                                    (reset! keyboard-was-shown? true)
-                                    (reset! expanded? true))
-                                  (and @keyboard-was-shown? (not keyboard-shown))
-                                  (reset! expanded? false))))
-                           [@show-bottom-sheet? @keyboard-was-shown? keyboard-shown])
-            (react/effect! #(do
-                              (when-not @gesture-running?
-                                (cond
-                                  @show-bottom-sheet?
-                                  (if @expanded?
-                                    (do
-                                      (reanimated/set-shared-value
-                                       bottom-sheet-dy
-                                       (with-animation (+ bg-height-expanded (.-value pan-y))))
-                                      ;; Workaround for
-                                      ;; https://github.com/software-mansion/react-native-reanimated/issues/1758#issue-817145741
-                                      ;; withTiming/withSpring callback not working
-                                      ;; on-expanded should be called as a callback of
-                                      ;; with-animation instead, once this issue has been resolved
-                                      (timer/set-timeout on-expanded animation-delay))
-                                    (do
-                                      (reanimated/set-shared-value
-                                       bottom-sheet-dy
-                                       (with-animation (+ bg-height (.-value pan-y))))
-                                      ;; Workaround for
-                                      ;; https://github.com/software-mansion/react-native-reanimated/issues/1758#issue-817145741
-                                      ;; withTiming/withSpring callback not working
-                                      ;; on-collapsed should be called as a callback of
-                                      ;; with-animation instead, once this issue has been resolved
-                                      (timer/set-timeout on-collapsed animation-delay)))
-
-                                  (= @show-bottom-sheet? false)
-                                  (reanimated/set-shared-value bottom-sheet-dy (with-animation 0)))))
-                           [@show-bottom-sheet? @expanded? @gesture-running?])
-
-            [:<>
-             [rn/touchable-without-feedback {:on-press (when backdrop-dismiss? close-bottom-sheet)}
-              [reanimated/view
-               {:style (reanimated/apply-animations-to-style
-                        {:opacity bg-opacity}
-                        styles/backdrop)}]]
-             (cond->> [reanimated/view
-                       {:style (reanimated/apply-animations-to-style
-                                {:transform [{:translateY translate-y}]}
-                                {:width  window-width
-                                 :height window-height})}
-                       [rn/view {:style styles/container}
-                        (when selected-item
-                          [rn/view {:style (styles/selected-background override-theme)}
-                           [selected-item]])
-                        [rn/view {:style (styles/background override-theme)}
-                         [rn/keyboard-avoiding-view
-                          {:behaviour (if platform/ios? :padding :height)
-                           :style     {:flex 1}}
-                          [rn/view
-                           {:style     (styles/content-style insets bottom-safe-area-spacing?)
-                            :on-layout (when-not (and
-                                                  (some? @content-height)
-                                                  (> @content-height 0))
-                                         on-content-layout)}
-                           children]]
-                         (when show-handle?
-                           handle-comp)]]]
-               (not show-handle?)
-               (conj [gesture/gesture-detector {:gesture bottom-sheet-gesture}]))]))])]))

src/status_im/browser/core.cljs

@@ -3,7 +3,7 @@
     ["eth-phishing-detect" :as eth-phishing-detect]
     [clojure.string :as string]
     [re-frame.core :as re-frame]
-    [status-im.bottom-sheet.events :as bottom-sheet]
+    [status-im2.common.bottom-sheet.events :as bottom-sheet]
     [status-im.browser.eip3085 :as eip3085]
     [status-im.browser.eip3326 :as eip3326]
     [status-im.browser.permissions :as browser.permissions]
@@ -572,7 +572,7 @@
   [{:keys [db] :as cofx} address]
   (rf/merge cofx
             {:browser/clear-web-data nil}
-            (bottom-sheet/hide-bottom-sheet-old)
+            (bottom-sheet/hide-bottom-sheet)
             (browser.permissions/clear-dapps-permissions)
             (multiaccounts.update/multiaccount-update :dapps-address address {})
             #(when (= (:view-id db) :browser)

src/status_im/browser/eip3085.cljs

@@ -28,7 +28,7 @@
                     :on-success #(re-frame/dispatch [:eip3085/send-success-call-to-bridge cofx id
                                                      message-id])
                     :on-error   #(log/error "failed to perform settings_saveSetting" %)}]
-   :dispatch      [:bottom-sheet/hide-old]})
+   :dispatch      [:bottom-sheet/hide]})
 
 (rf/defn deny-permission
   {:events [:eip3085.ui/dapp-permission-denied]}
@@ -37,7 +37,7 @@
                             :messageId message-id
                             :error     {:code    4001
                                         :message "User rejected the request."}}
-   :dispatch               [:bottom-sheet/hide-old]})
+   :dispatch               [:bottom-sheet/hide]})
 
 (rf/defn handle-add-ethereum-chain
   {:events [:eip3085/handle-add-ethereum-chain]}
@@ -64,7 +64,7 @@
                                                               :id           id
                                                               :new-network  network)]
         (if (network/chain-id-available? networks network)
-          {:dispatch [:bottom-sheet/show-sheet-old
+          {:dispatch [:bottom-sheet/show-sheet
                       {:content (fn []
                                   [sheet/permissions-panel dapp-name message-id params])}]}
           (send-success-call-to-bridge cofx id message-id)))

src/status_im/browser/eip3326.cljs

@@ -13,7 +13,7 @@
                             :messageId message-id
                             :error     {:code    4001
                                         :message "User rejected the request."}}
-   :dispatch               [:bottom-sheet/hide-old]})
+   :dispatch               [:bottom-sheet/hide]})
 
 (rf/defn handle-switch-ethereum-chain
   {:events [:eip3326/handle-switch-ethereum-chain]}
@@ -39,7 +39,7 @@
                                        :target-network-id target-network-id
                                        :network-from      network-from
                                        :network-to        network-to)]
-          {:dispatch [:bottom-sheet/show-sheet-old
+          {:dispatch [:bottom-sheet/show-sheet
                       {:content (fn []
                                   [sheet/permissions-panel dapp-name message-id params])}]}))
       {:browser/send-to-bridge {:type constants/web3-send-async-callback

src/status_im/chat/models/input.cljs

@@ -41,19 +41,36 @@
 
 (rf/defn select-mention
   {:events [:chat.ui/select-mention]}
-  [{:keys [db] :as cofx} text-input-ref {:keys [primary-name searched-text match public-key] :as user}]
+  [{:keys [db] :as cofx} text-input-ref {:keys [primary-name searched-text match] :as user}]
-  (let [chat-id (:current-chat-id db)
+  (let [chat-id     (:current-chat-id db)
-        text    (get-in db [:chat/inputs chat-id :input-text])
+        new-text    (mentions/new-input-text-with-mention cofx user)
-        method  "wakuext_chatMentionNewInputTextWithMention"
+        at-sign-idx (get-in db [:chats/mentions chat-id :mentions :at-sign-idx])
-        params  [chat-id text primary-name]]
+        cursor      (+ at-sign-idx (count primary-name) 2)]
-    {:json-rpc/call [{:method     method
+    (rf/merge
-                      :params     params
+     cofx
-                      :on-success #(rf/dispatch [:mention/on-new-input-text-with-mentions-success %
+     {:db                   (-> db
-                                                 primary-name text-input-ref match searched-text
+                                (assoc-in [:chats/cursor chat-id] cursor)
-                                                 public-key])
+                                (assoc-in [:chats/mention-suggestions chat-id] nil))
-                      :on-error   #(rf/dispatch [:mention/on-error
+      :set-text-input-value [chat-id new-text text-input-ref]}
-                                                 {:method method
+     (set-chat-input-text new-text chat-id)
-                                                  :params params} %])}]}))
+     ;; NOTE(rasom): Some keyboards do not react on selection property passed to
+     ;; text input (specifically Samsung keyboard with predictive text set on).
+     ;; In this case, if the user continues typing after the programmatic change,
+     ;; the new text is added to the last known cursor position before
+     ;; programmatic change. By calling `reset-text-input-cursor` we force the
+     ;; keyboard's cursor position to be changed before the next input.
+     (mentions/reset-text-input-cursor text-input-ref cursor)
+     ;; NOTE(roman): on-text-input event is not dispatched when we change input
+     ;; programmatically, so we have to call `on-text-input` manually
+     (mentions/on-text-input
+      (let [match-len (count match)
+            start     (inc at-sign-idx)
+            end       (+ start match-len)]
+        {:new-text      match
+         :previous-text searched-text
+         :start         start
+         :end           end}))
+     (mentions/recheck-at-idxs {primary-name user}))))
 
 (rf/defn disable-chat-cooldown
   "Turns off chat cooldown (protection against message spamming)"
@@ -130,9 +147,8 @@
 
 (defn build-image-messages
   [{db :db} chat-id input-text]
-  (let [images               (get-in db [:chat/inputs chat-id :metadata :sending-image])
+  (let [images   (get-in db [:chat/inputs chat-id :metadata :sending-image])
-        {:keys [message-id]} (get-in db [:chat/inputs chat-id :metadata :responding-to-message])
+        album-id (str (random-uuid))]
-        album-id             (str (random-uuid))]
     (mapv (fn [[_ {:keys [resized-uri width height]}]]
             {:chat-id      chat-id
              :album-id     album-id
@@ -143,8 +159,7 @@
              ;; TODO: message not received if text field is
              ;; nil or empty, issue:
              ;; https://github.com/status-im/status-mobile/issues/14754
-             :text         (or input-text "placeholder")
+             :text         (or input-text "placeholder")})
-             :response-to  message-id})
           images)))
 
 (rf/defn clean-input
@@ -165,7 +180,8 @@
     (rf/merge cofx
               {:set-text-input-value [current-chat-id ""]}
               (clean-input current-chat-id)
-              (mentions/clear-mentions))))
+              (mentions/clear-mentions)
+              (mentions/clear-cursor))))
 
 (rf/defn send-messages
   [{:keys [db] :as cofx} input-text current-chat-id]
@@ -233,29 +249,13 @@
   [{{:keys [current-chat-id] :as db} :db :as cofx}]
   (let [{:keys [input-text metadata]} (get-in db [:chat/inputs current-chat-id])
         editing-message               (:editing-message metadata)
-        method                        "wakuext_chatMentionCheckMentions"
+        input-text-with-mentions      (mentions/check-mentions cofx input-text)]
-        params                        [current-chat-id input-text]]
+    (rf/merge cofx
-    {:json-rpc/call [{:method     method
+              (if editing-message
-                      :params     params
+                (send-edited-message input-text-with-mentions editing-message)
-                      :on-error   #(rf/dispatch [:mention/on-error {:method method :params params} %])
+                (send-messages input-text-with-mentions current-chat-id))
-                      :on-success #(rf/dispatch [:mention/on-check-mentions-success
+              (mentions/clear-mentions)
-                                                 current-chat-id
+              (mentions/clear-cursor))))
-                                                 editing-message
-                                                 input-text
-                                                 %])}]}))
-
-(rf/defn on-check-mentions-success
-  {:events [:mention/on-check-mentions-success]}
-  [{:keys [db] :as cofx} current-chat-id editing-message input-text new-text]
-  (log/debug "[mentions] on-check-mentions-success"
-             {:chat-id         current-chat-id
-              :editing-message editing-message
-              :input-text      input-text
-              :new-text        new-text})
-  (rf/merge cofx
-            (if editing-message
-              (send-edited-message new-text editing-message)
-              (send-messages new-text current-chat-id))))
 
 (rf/defn send-contact-request
   {:events [:contacts/send-contact-request]}
@@ -269,6 +269,7 @@
                                          :on-error    #(log/warn "failed to send a contact request" %)
                                          :on-success  #(re-frame/dispatch [:transport/message-sent %])}]}
             (mentions/clear-mentions)
+            (mentions/clear-cursor)
             (clean-input (:current-chat-id db))))
 
 (rf/defn cancel-contact-request
@@ -279,6 +280,7 @@
     (rf/merge cofx
               {:db (assoc-in db [:chat/inputs current-chat-id :metadata :sending-contact-request] nil)}
               (mentions/clear-mentions)
+              (mentions/clear-cursor)
               (clean-input (:current-chat-id db)))))
 
 (rf/defn chat-send-sticker

src/status_im/chat/models/mentions_test.cljs

@@ -0,0 +1,323 @@
+(ns status-im.chat.models.mentions-test
+  (:require [cljs.test :as test]
+            [clojure.string :as string]
+            [status-im.chat.models.mentions :as mentions]))
+
+(def ->info-input
+  [[:text "H."]
+   [:mention
+    "@helpinghand.eth"]
+   [:text
+    " "]])
+
+(def ->info-expected
+  {:at-sign-idx   2
+   :mention-end   19
+   :new-text      " "
+   :previous-text ""
+   :start         18
+   :end           18
+   :at-idxs       [{:mention? true
+                    :from     2
+                    :to       17
+                    :checked? true}]})
+
+(test/deftest test->info
+  (test/testing "->info base case"
+    (test/is (= ->info-expected (mentions/->info ->info-input)))))
+
+;; No mention
+(def mention-text-1 "parse-text")
+(def mention-text-result-1 [[:text "parse-text"]])
+
+;; Mention in the middle
+(def mention-text-2
+  "hey @0x04fbce10971e1cd7253b98c7b7e54de3729ca57ce41a2bfb0d1c4e0a26f72c4b6913c3487fa1b4bb86125770f1743fb4459da05c1cbe31d938814cfaf36e252073 he")
+(def mention-text-result-2
+  [[:text "hey "]
+   [:mention
+    "0x04fbce10971e1cd7253b98c7b7e54de3729ca57ce41a2bfb0d1c4e0a26f72c4b6913c3487fa1b4bb86125770f1743fb4459da05c1cbe31d938814cfaf36e252073"]
+   [:text " he"]])
+
+;; Mention at the beginning
+(def mention-text-3
+  "@0x04fbce10971e1cd7253b98c7b7e54de3729ca57ce41a2bfb0d1c4e0a26f72c4b6913c3487fa1b4bb86125770f1743fb4459da05c1cbe31d938814cfaf36e252073 he")
+(def mention-text-result-3
+  [[:mention
+    "0x04fbce10971e1cd7253b98c7b7e54de3729ca57ce41a2bfb0d1c4e0a26f72c4b6913c3487fa1b4bb86125770f1743fb4459da05c1cbe31d938814cfaf36e252073"]
+   [:text " he"]])
+
+;; Mention at the end
+(def mention-text-4
+  "hey @0x04fbce10971e1cd7253b98c7b7e54de3729ca57ce41a2bfb0d1c4e0a26f72c4b6913c3487fa1b4bb86125770f1743fb4459da05c1cbe31d938814cfaf36e252073")
+(def mention-text-result-4
+  [[:text "hey "]
+   [:mention
+    "0x04fbce10971e1cd7253b98c7b7e54de3729ca57ce41a2bfb0d1c4e0a26f72c4b6913c3487fa1b4bb86125770f1743fb4459da05c1cbe31d938814cfaf36e252073"]])
+
+;; Invalid mention
+(def mention-text-5
+  "invalid @0x04fBce10971e1cd7253b98c7b7e54de3729ca57ce41a2bfb0d1c4e0a26f72c4b6913c3487fa1b4bb86125770f1743fb4459da05c1cbe31d938814cfaf36e252073")
+(def mention-text-result-5
+  [[:text
+    "invalid @0x04fBce10971e1cd7253b98c7b7e54de3729ca57ce41a2bfb0d1c4e0a26f72c4b6913c3487fa1b4bb86125770f1743fb4459da05c1cbe31d938814cfaf36e252073"]])
+
+(test/deftest test-to-input
+  (test/testing "only text"
+    (test/is (= mention-text-result-1 (mentions/->input-field mention-text-1))))
+  (test/testing "in the middle"
+    (test/is (= mention-text-result-2 (mentions/->input-field mention-text-2))))
+  (test/testing "at the beginning"
+    (test/is (= mention-text-result-3 (mentions/->input-field mention-text-3))))
+  (test/testing "at the end"
+    (test/is (= mention-text-result-4 (mentions/->input-field mention-text-4))))
+  (test/testing "invalid"
+    (test/is (= mention-text-result-5 (mentions/->input-field mention-text-5)))))
+
+(test/deftest test-replace-mentions
+  (let [users {"User Number One"
+               {:primary-name "User Number One"
+                :public-key   "0xpk1"}
+               "User Number Two"
+               {:primary-name   "user2"
+                :secondary-name "User Number Two"
+                :public-key     "0xpk2"}
+               "User Number Three"
+               {:primary-name   "user3"
+                :secondary-name "User Number Three"
+                :public-key     "0xpk3"}}]
+    (test/testing "empty string"
+      (let [text   ""
+            result (mentions/replace-mentions text users)]
+        (test/is (= result text) (pr-str text))))
+
+    (test/testing "no text"
+      (let [text   nil
+            result (mentions/replace-mentions text users)]
+        (test/is (= result text) (pr-str text))))
+
+    (test/testing "incomlepte mention 1"
+      (let [text   "@"
+            result (mentions/replace-mentions text users)]
+        (test/is (= result text) (pr-str text))))
+
+    (test/testing "incomplete mention 2"
+      (let [text   "@r"
+            result (mentions/replace-mentions text users)]
+        (test/is (= result text) (pr-str text))))
+
+    (test/testing "no mentions"
+      (let [text   "foo bar @buzz kek @foo"
+            result (mentions/replace-mentions text users)]
+        (test/is (= result text) (pr-str text))))
+
+    (test/testing "starts with mention"
+      (let [text   "@User Number One"
+            result (mentions/replace-mentions text users)]
+        (test/is (= result "@0xpk1") (pr-str text))))
+
+    (test/testing "starts with mention, comma after mention"
+      (let [text   "@User Number One,"
+            result (mentions/replace-mentions text users)]
+        (test/is (= result "@0xpk1,") (pr-str text))))
+
+    (test/testing "starts with mention but no space after"
+      (let [text   "@User Number Onefoo"
+            result (mentions/replace-mentions text users)]
+        (test/is (= result text) (pr-str text))))
+
+    (test/testing "starts with mention, some text after mention"
+      (let [text   "@User Number One foo"
+            result (mentions/replace-mentions text users)]
+        (test/is (= result "@0xpk1 foo") (pr-str text))))
+
+    (test/testing "starts with some text, then mention"
+      (let [text   "text @User Number One"
+            result (mentions/replace-mentions text users)]
+        (test/is (= result "text @0xpk1") (pr-str text))))
+
+    (test/testing "starts with some text, then mention, then more text"
+      (let [text   "text @User Number One foo"
+            result (mentions/replace-mentions text users)]
+        (test/is (= result "text @0xpk1 foo") (pr-str text))))
+
+    (test/testing "no space before mention"
+      (let [text   "text@User Number One"
+            result (mentions/replace-mentions text users)]
+        (test/is (= result "text@0xpk1") (pr-str text))))
+
+    (test/testing "two different mentions"
+      (let [text   "@User Number One @User Number two"
+            result (mentions/replace-mentions text users)]
+        (test/is (= result "@0xpk1 @0xpk2") (pr-str text))))
+
+    (test/testing "two different mentions, separated with comma"
+      (let [text   "@User Number One,@User Number two"
+            result (mentions/replace-mentions text users)]
+        (test/is (= result "@0xpk1,@0xpk2") (pr-str text))))
+
+    (test/testing "two different mentions inside text"
+      (let [text   "foo@User Number One bar @User Number two baz"
+            result (mentions/replace-mentions text users)]
+        (test/is (= result "foo@0xpk1 bar @0xpk2 baz") (pr-str text))))
+
+    (test/testing "ens mention"
+      (let [text   "@user2"
+            result (mentions/replace-mentions text users)]
+        (test/is (= result "@0xpk2") (pr-str text))))
+
+    (test/testing "multiple mentions"
+      (let [text             (string/join
+                              " "
+                              (repeat 1000 "@User Number One @User Number two"))
+            result           (mentions/replace-mentions text users)
+            exprected-result (string/join
+                              " "
+                              (repeat 1000 "@0xpk1 @0xpk2"))]
+        (test/is (= exprected-result result))))
+    (test/testing "markdown"
+      (test/testing "single * case 1"
+        (let [text   "*@user2*"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result text) (pr-str text))))
+
+      (test/testing "single * case 2"
+        (let [text   "*@user2 *"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result "*@0xpk2 *") (pr-str text))))
+
+      (test/testing "single * case 3"
+        (let [text   "a*@user2*"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result text) (pr-str text))))
+
+      (test/testing "single * case 4"
+        (let [text   "*@user2 foo*foo"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result "*@0xpk2 foo*foo") (pr-str text))))
+
+      (test/testing "single * case 5"
+        (let [text   "a *@user2*"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result text) (pr-str text))))
+
+      (test/testing "single * case 6"
+        (let [text   "*@user2 foo*"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result text) (pr-str text))))
+
+      (test/testing "single * case 7"
+        (let [text   "@user2 *@user2 foo* @user2"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result "@0xpk2 *@user2 foo* @0xpk2") (pr-str text))))
+
+      (test/testing "single * case 8"
+        (let [text   "*@user2 foo**@user2 foo*"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result text) (pr-str text))))
+
+      (test/testing "single * case 9"
+        (let [text   "*@user2 foo***@user2 foo* @user2"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result "*@user2 foo***@user2 foo* @0xpk2") (pr-str text))))
+
+      (test/testing "double * case 1"
+        (let [text   "**@user2**"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result text) (pr-str text))))
+
+      (test/testing "double * case 2"
+        (let [text   "**@user2 **"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result "**@0xpk2 **") (pr-str text))))
+
+      (test/testing "double * case 3"
+        (let [text   "a**@user2**"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result text) (pr-str text))))
+
+      (test/testing "double * case 4"
+        (let [text   "**@user2 foo**foo"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result "**@user2 foo**foo") (pr-str text))))
+
+      (test/testing "double * case 5"
+        (let [text   "a **@user2**"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result text) (pr-str text))))
+
+      (test/testing "double * case 6"
+        (let [text   "**@user2 foo**"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result text) (pr-str text))))
+
+      (test/testing "double * case 7"
+        (let [text   "@user2 **@user2 foo** @user2"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result "@0xpk2 **@user2 foo** @0xpk2") (pr-str text))))
+
+      (test/testing "double * case 8"
+        (let [text   "**@user2 foo****@user2 foo**"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result text) (pr-str text))))
+
+      (test/testing "double * case 9"
+        (let [text   "**@user2 foo*****@user2 foo** @user2"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result "**@user2 foo*****@user2 foo** @0xpk2") (pr-str text))))
+
+      (test/testing "tripple * case 1"
+        (let [text   "***@user2 foo***@user2 foo*"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result "***@user2 foo***@0xpk2 foo*") (pr-str text))))
+
+      (test/testing "tripple ~ case 1"
+        (let [text   "~~~@user2 foo~~~@user2 foo~"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result text) (pr-str text))))
+
+      (test/testing "quote case 1"
+        (let [text   ">@user2"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result text) (pr-str text))))
+
+      (test/testing "quote case 2"
+        (let [text   "\n>@user2"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result text) (pr-str text))))
+
+      (test/testing "quote case 3"
+        (let [text   "\n> @user2 \n   \n @user2"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result "\n> @user2 \n   \n @0xpk2") (pr-str text))))
+
+      (test/testing "quote case 4"
+        (let [text   ">@user2\n\n>@user2"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result text) (pr-str text))))
+
+      (test/testing "quote case 5"
+        (let [text   "***hey\n\n>@user2\n\n@user2 foo***"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result "***hey\n\n>@user2\n\n@0xpk2 foo***")
+                   (pr-str text))))
+
+      (test/testing "code case 1"
+        (let [text   "` @user2 `"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result text) (pr-str text))))
+
+      (test/testing "code case 2"
+        (let [text   "` @user2 `"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result text) (pr-str text))))
+
+      (test/testing "code case 3"
+        (let [text   "``` @user2 ```"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result text) (pr-str text))))
+
+      (test/testing "code case 4"
+        (let [text   "` ` @user2 ``"
+              result (mentions/replace-mentions text users)]
+          (test/is (= result "` ` @0xpk2 ``") (pr-str text)))))))

src/status_im/communities/core.cljs

@@ -8,7 +8,7 @@
             [status-im.async-storage.core :as async-storage]
             [status-im.ui.components.emoji-thumbnail.styles :as emoji-thumbnail-styles]
             [status-im.utils.universal-links.core :as universal-links]
-            [status-im.bottom-sheet.events :as bottom-sheet]
+            [status-im2.common.bottom-sheet.events :as bottom-sheet]
             [status-im2.common.toasts.events :as toasts]
             [status-im2.constants :as constants]
             [status-im2.contexts.activity-center.events :as activity-center]
@@ -276,7 +276,7 @@
                            (vals (get-in db [:communities community-id :chats])))]
     (when (and id
                (not= (:current-chat-id db) (str community-id id)))
-      (chat.events/navigate-to-chat cofx (str community-id id)))))
+      (chat.events/navigate-to-chat cofx (str community-id id) nil))))
 
 (rf/defn fetch
   [_]
@@ -445,7 +445,7 @@
   [cofx id]
   (rf/merge cofx
             (reset-community-id-input id)
-            (bottom-sheet/hide-bottom-sheet-old)
+            (bottom-sheet/hide-bottom-sheet)
             (navigation/open-modal :invite-people-community {:invite? true})))
 
 (rf/defn share-community-pressed
@@ -453,7 +453,7 @@
   [cofx id]
   (rf/merge cofx
             (reset-community-id-input id)
-            (bottom-sheet/hide-bottom-sheet-old)
+            (bottom-sheet/hide-bottom-sheet)
             (navigation/open-modal :invite-people-community {})))
 
 (rf/defn create-channel-pressed
@@ -575,7 +575,7 @@
   {:events [::member-banned]}
   [cofx response-js]
   (rf/merge cofx
-            (bottom-sheet/hide-bottom-sheet-old)
+            (bottom-sheet/hide-bottom-sheet)
             (handle-response response-js)
             (activity-center/notifications-fetch-unread-count)))
 
@@ -596,7 +596,7 @@
   {:events [::member-kicked]}
   [cofx response-js]
   (rf/merge cofx
-            (bottom-sheet/hide-bottom-sheet-old)
+            (bottom-sheet/hide-bottom-sheet)
             (handle-response response-js)))
 
 (rf/defn member-kick
@@ -817,13 +817,13 @@
   [cofx community-id]
   (rf/merge cofx
             (navigation/pop-to-root :shell-stack)
-            (navigation/navigate-to :community-overview community-id)))
+            (navigation/navigate-to-nav2 :community community-id true)))
 
 (rf/defn member-role-updated
   {:events [:community.member/role-updated]}
   [cofx response-js]
   (rf/merge cofx
-            (bottom-sheet/hide-bottom-sheet-old)
+            (bottom-sheet/hide-bottom-sheet)
             (handle-response response-js)))
 
 (rf/defn add-role-to-member

src/status_im/contact/core.cljs

@@ -9,4 +9,4 @@
             {:db (assoc db
                         :group/selected-contacts #{}
                         :new-chat-name           "")}
-            (navigation/navigate-to :contact-toggle-list nil)))
+            (navigation/navigate-to-cofx :contact-toggle-list nil)))

src/status_im/data_store/messages.cljs

@@ -41,8 +41,7 @@
         :albumId                  :album-id
         :imageWidth               :image-width
         :imageHeight              :image-height
-        :new                      :new?
+        :new                      :new?})
-        :albumImagesCount         :album-images-count})
 
       (update :quoted-message
               set/rename-keys

src/status_im/ens/core.cljs

@@ -2,7 +2,7 @@
   (:refer-clojure :exclude [name])
   (:require [clojure.string :as string]
             [re-frame.core :as re-frame]
-            [status-im.bottom-sheet.events :as bottom-sheet]
+            [status-im2.common.bottom-sheet.events :as bottom-sheet]
             [status-im.ethereum.core :as ethereum]
             [status-im.ethereum.eip55 :as eip55]
             [status-im.ethereum.ens :as ens]
@@ -121,7 +121,7 @@
   (let [{:keys [state username custom-domain?]} (:ens/registration db)]
     (case state
       (:available :owned)
-      (navigation/navigate-to cofx :ens-checkout {})
+      (navigation/navigate-to-cofx cofx :ens-checkout {})
       :connected-with-different-key
       (re-frame/dispatch [::set-pub-key])
       :connected
@@ -261,7 +261,7 @@
   [{:keys [db] :as cofx} _ {:keys [address]}]
   (rf/merge cofx
             {:db (assoc-in db [:ens/registration :address] address)}
-            (bottom-sheet/hide-bottom-sheet-old)))
+            (bottom-sheet/hide-bottom-sheet)))
 
 (rf/defn save-preferred-name
   {:events [::save-preferred-name]}
@@ -311,14 +311,14 @@
                ::resolve-pubkey
                [chain-id username
                 #(re-frame/dispatch [::public-key-resolved username %])]}
-              (navigation/navigate-to :ens-name-details username))))
+              (navigation/navigate-to-cofx :ens-name-details username))))
 
 (rf/defn start-registration
   {:events [::add-username-pressed ::get-started-pressed]}
   [{:keys [db] :as cofx}]
   (rf/merge cofx
             (set-username-candidate (get-in db [:ens/registration :username] ""))
-            (navigation/navigate-to :ens-search {})))
+            (navigation/navigate-to-cofx :ens-search {})))
 
 (rf/defn remove-username
   {:events [::remove-username]}

src/status_im/ethereum/mnemonic.cljs

@@ -202,7 +202,7 @@
 (defn words-count
   [s]
   (if (empty? s)
-    0
+    nil
     (-> s
         passphrase->words
         count)))

src/status_im/events.cljs

@@ -57,7 +57,6 @@
     status-im2.contexts.activity-center.events
     status-im2.contexts.activity-center.notification.contact-requests.events
     status-im2.contexts.shell.events
-    status-im2.contexts.onboarding.events
     status-im.chat.models.gaps
     [status-im2.navigation.events :as navigation]))
 
@@ -115,9 +114,9 @@
   {:events [:system-theme-mode-changed]}
   [{:keys [db] :as cofx} _]
   (let [current-theme-type (get-in cofx [:db :multiaccount :appearance])]
-    (when (and (multiaccounts.model/logged-in? db)
+    (when (and (multiaccounts.model/logged-in? cofx)
                (= current-theme-type status-im2.constants/theme-type-system))
-      {:multiaccounts.ui/switch-theme-fx
+      {:multiaccounts.ui/switch-theme
        [(get-in db [:multiaccount :appearance])
         (:view-id db) true]})))
 

src/status_im/group_chats/core.cljs

@@ -15,7 +15,7 @@
   {:events [:navigate-chat-updated]}
   [cofx chat-id]
   (when (get-in cofx [:db :chats chat-id])
-    (chat.events/navigate-to-chat cofx chat-id)))
+    (chat.events/navigate-to-chat cofx chat-id nil)))
 
 (rf/defn handle-chat-removed
   {:events [:chat-removed]}
@@ -245,7 +245,7 @@
             {:db (-> db
                      (assoc :new-chat-name (get-in db [:chats chat-id :name]))
                      (assoc :current-chat-id chat-id))}
-            (navigation/navigate-to :group-chat-profile nil)))
+            (navigation/navigate-to-cofx :group-chat-profile nil)))
 
 (rf/defn ui-leave-chat-pressed
   {:events [:group-chats.ui/leave-chat-pressed]}
@@ -256,5 +256,5 @@
       :content             (i18n/label :t/leave-chat-confirmation)
       :confirm-button-text (i18n/label :t/leave)
       :on-accept           #(do
-                              (re-frame/dispatch [:bottom-sheet/hide-old])
+                              (re-frame/dispatch [:bottom-sheet/hide])
                               (re-frame/dispatch [:group-chats.ui/leave-chat-confirmed chat-id]))}}))

src/status_im/keycard/backup_key.cljs

@@ -18,8 +18,8 @@
             {:db (-> db
                      (assoc-in [:keycard :creating-backup?] backup-type))}
             (when (:multiaccount db)
-              (navigation/navigate-to :my-profile nil))
+              (navigation/navigate-to-cofx :my-profile nil))
-            (navigation/navigate-to :seed-phrase nil)))
+            (navigation/navigate-to-cofx :seed-phrase nil)))
 
 (rf/defn recovery-card-pressed
   {:events [:keycard-settings.ui/recovery-card-pressed]}
@@ -69,4 +69,4 @@
                                    (update :multiaccounts/key-storage dissoc :seed-phrase))
              :dismiss-keyboard nil}
             (common/listen-to-hardware-back-button)
-            (navigation/navigate-to :keycard-onboarding-intro nil)))
+            (navigation/navigate-to-cofx :keycard-onboarding-intro nil)))

src/status_im/keycard/change_pin.cljs

@@ -59,7 +59,7 @@
             (common/clear-pin)
             (common/hide-connection-sheet)
             (if (get-in db [:keycard :pin :puk-restore?])
-              (navigation/navigate-to :multiaccounts nil)
+              (navigation/navigate-to-cofx :multiaccounts nil)
               (navigation/set-stack-root :profile-stack [:my-profile :keycard-settings]))))
 
 (rf/defn change-pin
@@ -150,7 +150,7 @@
                                   :content (i18n/label :t/pin-changed)}}
               (common/hide-connection-sheet)
               (if puk-restore?
-                (navigation/navigate-to :multiaccounts nil)
+                (navigation/navigate-to-cofx :multiaccounts nil)
                 (navigation/set-stack-root :profile-stack [:my-profile :keycard-settings]))
               (when (:multiaccounts/login db)
                 (common/get-keys-from-keycard)))))
@@ -211,5 +211,5 @@
                                        :sign         []
                                        :error-label  :t/pin-mismatch))}
                    (when (zero? pin-retries) (common/frozen-keycard-popup))
-                   (navigation/navigate-to :enter-pin-settings nil))
+                   (navigation/navigate-to-cofx :enter-pin-settings nil))
          (common/show-wrong-keycard-alert))))))

src/status_im/keycard/common.cljs

@@ -1,7 +1,7 @@
 (ns status-im.keycard.common
   (:require [clojure.string :as string]
             [re-frame.core :as re-frame]
-            [status-im.bottom-sheet.events :as bottom-sheet]
+            [status-im2.common.bottom-sheet.events :as bottom-sheet]
             [status-im.ethereum.core :as ethereum]
             [utils.i18n :as i18n]
             [status-im.keycard.nfc :as nfc]
@@ -195,7 +195,8 @@
                connected?)
     (rf/merge
      cofx
-     (bottom-sheet/show-bottom-sheet-old
+     {:dismiss-keyboard true}
+     (bottom-sheet/show-bottom-sheet
       {:view {:transparent        platform/ios?
               :show-handle?       false
               :backdrop-dismiss?  false
@@ -230,7 +231,7 @@
             {:db (assoc-in db [:keycard :card-read-in-progress?] false)}
             (restore-on-card-connected)
             (restore-on-card-read)
-            (bottom-sheet/hide-bottom-sheet-old)))
+            (bottom-sheet/hide-bottom-sheet)))
 
 (rf/defn hide-connection-sheet
   [cofx]
@@ -308,7 +309,7 @@
   [{:keys [db] :as cofx}]
   (rf/merge cofx
             {:db (assoc-in db [:keycard :pin :current] [])}
-            (navigation/navigate-to :enter-pin-settings nil)))
+            (navigation/navigate-to-cofx :enter-pin-settings nil)))
 
 (defn- tag-lost-exception?
   [code error]
@@ -491,7 +492,7 @@
       (if login?
         (rf/merge cofx
                   (clear-on-card-read)
-                  (navigation/navigate-to :not-keycard nil))
+                  (navigation/navigate-to-cofx :not-keycard nil))
         (rf/merge cofx
                   {:db (assoc-in db [:keycard :application-info-error] error)}
 

src/status_im/keycard/core.cljs

@@ -40,7 +40,7 @@
                                {:enter-step   :original
                                 :original     []
                                 :confirmation []}))}
-            (navigation/navigate-to :keycard-onboarding-pin nil)))
+            (navigation/navigate-to-cofx :keycard-onboarding-pin nil)))
 
 (rf/defn load-recovery-pin-screen
   [{:keys [db] :as cofx}]
@@ -66,7 +66,7 @@
              "instance-uid"
              instance-uid)
   (if (= flow :import)
-    (navigation/navigate-to cofx :keycard-recovery-no-key nil)
+    (navigation/navigate-to-cofx cofx :keycard-recovery-no-key nil)
     (if paired?
       (rf/merge cofx
                 (common/listen-to-hardware-back-button)
@@ -86,7 +86,7 @@
                      (assoc-in [:keycard :pin :on-verified] nil)
                      (assoc-in [:keycard :setup-step] nil))}
             (common/clear-on-card-connected)
-            (navigation/navigate-to :keycard-settings nil)))
+            (navigation/navigate-to-cofx :keycard-settings nil)))
 
 (rf/defn password-option-pressed
   {:eevents [:keycard.ui/password-option-pressed]}
@@ -272,7 +272,7 @@
                              (not on-verified-failure))
                     (when exporting?
                       (navigation/navigate-back)))
-                  ;(navigation/navigate-to :enter-pin-settings nil)))
+                  ;(navigation/navigate-to-cofx :enter-pin-settings nil)))
                   (when (zero? pin-retries) (common/frozen-keycard-popup))
                   (when on-verified-failure
                     (fn [_]
@@ -505,7 +505,7 @@
               (when multiaccount
                 (set-multiaccount-pairing multiaccount pairing paired-on))
               (when (= flow :login)
-                (navigation/navigate-to :multiaccounts nil))
+                (navigation/navigate-to-cofx :multiaccounts nil))
               (when (= flow :recovery)
                 (onboarding/proceed-with-generating-key))
               (when (= flow :import)
@@ -531,7 +531,7 @@
                                                 :keycard/pair))
                 (common/hide-connection-sheet)
                 (when (= flow :import)
-                  (navigation/navigate-to :keycard-recovery-pair nil))
+                  (navigation/navigate-to-cofx :keycard-recovery-pair nil))
                 (when (not= setup-step :enter-pair-code)
                   (common/process-error code error))))))
 
@@ -579,7 +579,7 @@
 
               (when (= card-state :pre-init)
                 (if (= flow :import)
-                  (navigation/navigate-to :keycard-recovery-no-key nil)
+                  (navigation/navigate-to-cofx :keycard-recovery-no-key nil)
                   (fn [cofx]
                     (rf/merge
                      cofx
@@ -596,7 +596,7 @@
 
               (when (= card-state :blank)
                 (if (= flow :import)
-                  (navigation/navigate-to :keycard-recovery-no-key nil)
+                  (navigation/navigate-to-cofx :keycard-recovery-no-key nil)
                   (show-no-keycard-applet-alert)))
 
               (when (and (= card-state :multiaccount)

src/status_im/keycard/delete_key.cljs

@@ -6,7 +6,7 @@
 (rf/defn reset-card-pressed
   {:events [:keycard-settings.ui/reset-card-pressed]}
   [cofx]
-  (navigation/navigate-to cofx :reset-card nil))
+  (navigation/navigate-to-cofx cofx :reset-card nil))
 
 (rf/defn delete-card
   [{:keys [db] :as cofx}]
@@ -20,7 +20,7 @@
 (rf/defn navigate-to-reset-card-screen
   {:events [:keycard/navigate-to-reset-card-screen]}
   [cofx]
-  (navigation/navigate-to cofx :reset-card nil))
+  (navigation/navigate-to-cofx cofx :reset-card nil))
 
 (rf/defn reset-card-next-button-pressed
   {:events [:keycard-settings.ui/reset-card-next-button-pressed]}

src/status_im/keycard/login.cljs

@@ -1,5 +1,5 @@
 (ns status-im.keycard.login
-  (:require [status-im.bottom-sheet.events :as bottom-sheet]
+  (:require [status-im2.common.bottom-sheet.events :as bottom-sheet]
             [status-im.ethereum.core :as ethereum]
             [status-im.keycard.common :as common]
             status-im.keycard.fx
@@ -17,18 +17,18 @@
   [{:keys [db] :as cofx}]
   (rf/merge cofx
             {:db db}
-            (navigation/pop-to-root :profiles)))
+            (navigation/pop-to-root :multiaccounts-stack)))
 
 (rf/defn login-pin-more-icon-pressed
   {:events [:keycard.login.pin.ui/more-icon-pressed]}
   [cofx]
-  (bottom-sheet/hide-bottom-sheet-old cofx))
+  (bottom-sheet/show-bottom-sheet cofx {:view :keycard.login/more}))
 
 (rf/defn login-create-key-pressed
   {:events [:keycard.login.ui/create-new-key-pressed]}
   [cofx]
   (rf/merge cofx
-            (bottom-sheet/hide-bottom-sheet-old)
+            (bottom-sheet/hide-bottom-sheet)
             (onboarding/start-onboarding-flow)))
 
 (rf/defn login-add-key-pressed
@@ -48,7 +48,7 @@
   (log/debug "[keycard] load-pair-card-pressed")
   (rf/merge cofx
             {:db (assoc-in db [:keycard :flow] :login)}
-            (navigation/navigate-to :keycard-recovery-pair nil)))
+            (navigation/navigate-to-cofx :keycard-recovery-pair nil)))
 
 (rf/defn reset-pin
   {:events [::reset-pin]}
@@ -70,11 +70,11 @@
                                    :status     nil))
       :hide-popover nil})
    (when (:multiaccount db)
-     (navigation/navigate-to :my-profile nil))
+     (navigation/navigate-to-cofx :my-profile nil))
    (when-not (:multiaccounts/login db)
      (if (:popover/popover db)
        (navigation/navigate-replace :keycard-pin nil)
-       (navigation/navigate-to :keycard-pin nil)))))
+       (navigation/navigate-to-cofx :keycard-pin nil)))))
 
 (rf/defn dismiss-frozen-keycard-popover
   {:events [::frozen-keycard-popover-dismissed]}
@@ -107,22 +107,22 @@
       (empty? application-info)
       (rf/merge cofx
                 (common/hide-connection-sheet)
-                (navigation/navigate-to :not-keycard nil))
+                (navigation/navigate-to-cofx :not-keycard nil))
 
       (empty? key-uid)
       (rf/merge cofx
                 (common/hide-connection-sheet)
-                (navigation/navigate-to :keycard-blank nil))
+                (navigation/navigate-to-cofx :keycard-blank nil))
 
       multiaccount-mismatch?
       (rf/merge cofx
                 (common/hide-connection-sheet)
-                (navigation/navigate-to :keycard-wrong nil))
+                (navigation/navigate-to-cofx :keycard-wrong nil))
 
       (not paired?)
       (rf/merge cofx
                 (common/hide-connection-sheet)
-                (navigation/navigate-to :keycard-unpaired nil))
+                (navigation/navigate-to-cofx :keycard-unpaired nil))
 
       (and (zero? pin-retry-counter)
            (or (nil? puk-retry-counter)

src/status_im/keycard/onboarding.cljs

@@ -36,7 +36,7 @@
         (rf/merge cofx
                   {:utils/show-popup {:title   (i18n/label :t/error)
                                       :content (i18n/label :t/something-went-wrong)}}
-                  (navigation/navigate-to :keycard-authentication-method nil))))))
+                  (navigation/navigate-to-cofx :keycard-authentication-method nil))))))
 
 (rf/defn load-preparing-screen
   {:events [:keycard/load-preparing-screen]}
@@ -120,7 +120,7 @@
   [cofx]
   (rf/merge cofx
             (recovery-phrase-start-confirmation)
-            (navigation/navigate-to :keycard-onboarding-recovery-phrase-confirm-word1 nil)))
+            (navigation/navigate-to-cofx :keycard-onboarding-recovery-phrase-confirm-word1 nil)))
 
 (rf/defn recovery-phrase-next-word
   [{:keys [db]}]
@@ -143,7 +143,7 @@
                                     :on-verified :keycard/generate-and-load-key
                                     :current     []})
                          (assoc-in [:keycard :setup-step] :loading-keys))}
-                (navigation/navigate-to :keycard-onboarding-pin nil))
+                (navigation/navigate-to-cofx :keycard-onboarding-pin nil))
       (load-finishing-screen cofx))))
 
 (rf/defn recovery-phrase-confirm-word-next-pressed
@@ -178,10 +178,10 @@
     (rf/merge cofx
               {:keycard/check-nfc-enabled nil}
               (if (= flow :import)
-                (navigation/navigate-to :keycard-recovery-intro nil)
+                (navigation/navigate-to-cofx :keycard-recovery-intro nil)
                 (do
                   (common/listen-to-hardware-back-button)
-                  (navigation/navigate-to :keycard-onboarding-intro nil))))))
+                  (navigation/navigate-to-cofx :keycard-onboarding-intro nil))))))
 
 (rf/defn start-onboarding-flow
   {:events [:keycard/start-onboarding-flow]}
@@ -190,7 +190,7 @@
             {:db                        (assoc-in db [:keycard :flow] :create)
              :keycard/check-nfc-enabled nil}
             (common/listen-to-hardware-back-button)
-            (navigation/navigate-to :keycard-onboarding-intro nil)))
+            (navigation/navigate-to-cofx :keycard-onboarding-intro nil)))
 
 (rf/defn open-nfc-settings-pressed
   {:events [:keycard.onboarding.nfc-on/open-nfc-settings-pressed]}

src/status_im/keycard/recovery.cljs

@@ -1,7 +1,7 @@
 (ns status-im.keycard.recovery
   (:require [clojure.string :as string]
             [re-frame.core :as re-frame]
-            [status-im.bottom-sheet.events :as bottom-sheet]
+            [status-im2.common.bottom-sheet.events :as bottom-sheet]
             [status-im2.constants :as constants]
             [status-im.ethereum.core :as ethereum]
             [status-im.ethereum.eip55 :as eip55]
@@ -54,16 +54,16 @@
   (rf/merge cofx
             {:db       (-> db
                            (assoc-in [:keycard :setup-step] :pair))
-             :dispatch [:bottom-sheet/hide-old]}
+             :dispatch [:bottom-sheet/hide]}
             (common/listen-to-hardware-back-button)
-            (navigation/navigate-to :keycard-recovery-pair nil)))
+            (navigation/navigate-to-cofx :keycard-recovery-pair nil)))
 
 (rf/defn keycard-storage-selected-for-recovery
   {:events [:recovery.ui/keycard-storage-selected]}
   [{:keys [db] :as cofx}]
   (rf/merge cofx
             {:db (assoc-in db [:keycard :flow] :recovery)}
-            (navigation/navigate-to :keycard-recovery-enter-mnemonic nil)))
+            (navigation/navigate-to-cofx :keycard-recovery-enter-mnemonic nil)))
 
 (rf/defn start-import-flow
   {:events [::recover-with-keycard-pressed]}
@@ -74,13 +74,13 @@
                  (assoc-in [:keycard :flow] :import)
                  (assoc :recovered-account? true))
              :keycard/check-nfc-enabled nil}
-            (bottom-sheet/hide-bottom-sheet-old)
+            (bottom-sheet/hide-bottom-sheet)
-            (navigation/navigate-to :keycard-recovery-intro nil)))
+            (navigation/navigate-to-cofx :keycard-recovery-intro nil)))
 
 (rf/defn access-key-pressed
   {:events [:multiaccounts.recover.ui/recover-multiaccount-button-pressed]}
   [_]
-  {:dispatch [:bottom-sheet/show-sheet-old :recover-sheet]})
+  {:dispatch [:bottom-sheet/show-sheet :recover-sheet]})
 
 (rf/defn recovery-keycard-selected
   {:events [:recovery.ui/keycard-option-pressed]}
@@ -89,7 +89,7 @@
             {:db                        (assoc-in db [:keycard :flow] :recovery)
              :keycard/check-nfc-enabled nil}
             (common/listen-to-hardware-back-button)
-            (navigation/navigate-to :keycard-onboarding-intro nil)))
+            (navigation/navigate-to-cofx :keycard-onboarding-intro nil)))
 
 (rf/defn cancel-pressed
   {:events [::cancel-pressed]}
@@ -126,10 +126,10 @@
                          :keycard dissoc
                          :multiaccount-wallet-address
                          :multiaccount-whisper-public-key)}
-            (navigation/navigate-to (if platform/android?
+            (navigation/navigate-to-cofx (if platform/android?
-                                      :notifications-settings
+                                           :notifications-settings
-                                      :welcome)
+                                           :welcome)
-                                    nil)))
+                                         nil)))
 
 (rf/defn intro-wizard
   {:events [:multiaccounts.create.ui/intro-wizard]}
@@ -141,7 +141,7 @@
                        (dissoc :restored-account?))}
               (multiaccounts.create/prepare-intro-wizard)
               (if (pos? (count accs))
-                (navigation/navigate-to :get-your-keys nil)
+                (navigation/navigate-to-cofx :get-your-keys nil)
                 (navigation/set-stack-root :onboarding [:get-your-keys])))))
 
 (rf/defn recovery-no-key
@@ -238,7 +238,7 @@
                                                        :t/keycard-can-use-with-new-passcode
                                                        :t/keycard-backup-success-body))}}
             (cond
-              (multiaccounts.model/logged-in? db)
+              (multiaccounts.model/logged-in? cofx)
               (navigation/set-stack-root :profile-stack [:my-profile :keycard-settings])
 
               (:multiaccounts/login db)