pair with JC to setup visual testing

.detoxrc.json

@@ -0,0 +1,38 @@
+{
+   "testRunner": "jest",
+   "testRegex": "\\.visual\\.js$",
+
+    "devices": {
+      
+      "simulator": {
+        "type": "ios.simulator",
+        "device": {
+          "type": "iPhone 11 Pro"
+        }
+      }
+    },
+    "apps": {
+      "ios.release": {
+        "name": "StatusIm",
+        "type": "ios.app",
+        "binaryPath": "ios/build/Build/Products/Release-iphonesimulator/StatusIm.app",
+        "build": "make release-ios"
+      },
+      "ios.debug": {
+        "name": "StatusIm",
+        "type": "ios.app",
+        "binaryPath": "/Users/erik/Library/Developer/Xcode/DerivedData/StatusIm-dkjkfsbgallhrnchhutvuvbicfsa/Build/Products/Debug-iphonesimulator/StatusIm.app",
+        "build": "make run-ios SIMULATOR='iPhone 11 Pro'"
+      }
+    },
+    "configurations": {
+      "ios.sim.release": {
+        "device": "simulator",
+        "app": "ios.release"
+      },
+      "ios.sim.debug": {
+        "device": "simulator",
+        "app": "ios.debug"
+      }
+    }
+  }

e2e/button.e2e.js

@@ -0,0 +1,52 @@
+const waitToNavigate = duration => new Promise(resolve => setTimeout(() => resolve(), duration));
+
+describe('Example (hello)', () => {
+    beforeAll(async () => {
+        if (device.getPlatform() === 'ios') {
+            await device.setStatusBar({ time: '12:34', dataNetwork: 'wifi', wifiBars: '3', batteryState: 'charging', batteryLevel: '100' });
+        }
+        await device.reloadReactNative();
+
+        await element(by.text('I accept Status Terms of Use')).tap();
+        // close alert
+        await element(by.text('Get started')).tap();
+        await waitToNavigate(200);
+
+        await element(by.text('Generate keys')).tap();
+        await waitToNavigate(200);
+
+        await element(by.text('Next')).tap();
+        await waitToNavigate(700);
+        await element(by.text('Next')).tap();
+        await waitToNavigate(700);
+        // await element(by.text('Password...')).typeText('infinitbility@gmail.com');
+        // await element(by.text('Confirm your password...')).typeText('infinitbility@gmail.com');
+        await element(by.text('Next')).tap();
+        await waitToNavigate(700);
+        await element(by.text('Maybe later')).tap();
+        await waitToNavigate(700);
+        await element(by.text("Let's go")).tap();
+        await waitToNavigate(700);
+
+        await element(by.text("1")).tap();
+        await waitToNavigate(400);
+        await element(by.text("Quo2.0 Preview")).tap();
+        await waitToNavigate(400);
+    })
+    beforeEach(async () => {
+    });
+    afterEach(async () => {
+        await element(by.text("1")).tap();
+        await waitToNavigate(200);
+        await element(by.text("Quo2.0 Preview")).tap();
+        await waitToNavigate(200);
+    });
+
+
+    it(`button page should match snapshot`, async () => {
+        await element(by.text(`:button`)).tap();
+        await waitToNavigate(200);
+        const res = await jestExpect(`default-render-button`).toMatchImageSnapshot();
+    })
+
+});

e2e/config.json

@@ -0,0 +1,13 @@
+{
+    "globalSetup": "./global-setup.js",
+    "globalTeardown": "./global-teardown.js",
+    "setupFilesAfterEnv": ["./setup.js"],
+    "maxWorkers": 1,
+    "testEnvironment": "./environment",
+    "testRunner": "jest-circus/runner",
+    "testTimeout": 120000,
+    "testRegex": "\\.e2e\\.js$",
+
+    "reporters": ["detox/runners/jest/streamlineReporter"],
+    "verbose": true
+}

e2e/environment.js

@@ -0,0 +1,23 @@
+const {
+    DetoxCircusEnvironment,
+    SpecReporter,
+    WorkerAssignReporter,
+  } = require('detox/runners/jest-circus');
+  
+  class CustomDetoxEnvironment extends DetoxCircusEnvironment {
+    constructor(config, context) {
+      super(config, context);
+  
+      // Can be safely removed, if you are content with the default value (=300000ms)
+      this.initTimeout = 300000;
+  
+      // This takes care of generating status logs on a per-spec basis. By default, Jest only reports at file-level.
+      // This is strictly optional.
+      this.registerListeners({
+        SpecReporter,
+        WorkerAssignReporter,
+      });
+    }
+  }
+  
+  module.exports = CustomDetoxEnvironment;

e2e/global-setup.js

@@ -0,0 +1,40 @@
+const fs = require('fs-extra');
+const { execSync } = require('child_process');
+const detox = require('detox');
+
+async function globalSetup() {
+  const config = resolveSelectedConfiguration() || {};
+  downloadTestButlerAPKIfNeeded(config);
+  await detox.globalInit();
+}
+
+function downloadTestButlerAPKIfNeeded(config) {
+  if (isAndroidConfig(config)) {
+    downloadTestButlerAPK();
+  }
+}
+
+function downloadTestButlerAPK() {
+  const version = '2.2.1';
+  const artifactUrl = `https://repo1.maven.org/maven2/com/linkedin/testbutler/test-butler-app/${version}/test-butler-app-${version}.apk`;
+  const filePath = `./cache/test-butler-app.apk`;
+
+  fs.ensureDirSync('./cache');
+  if (!fs.existsSync(filePath)) {
+    console.log(`\nDownloading Test-Butler APK v${version}...`);
+    execSync(`curl -f -o ${filePath} ${artifactUrl}`);
+  }
+}
+
+function resolveSelectedConfiguration() {
+  const { configurations } = require('../.detoxrc.json');
+  const configName = process.env.DETOX_CONFIGURATION;
+  return configurations[configName];
+}
+
+// TODO eventually, this should be made available by Detox more explicitly
+function isAndroidConfig(config) {
+  return [config.type, process.env.DETOX_CONFIGURATION, config.device].some(s => `${s}`.includes('android'));
+}
+
+module.exports = globalSetup;

e2e/global-teardown.js

@@ -0,0 +1,7 @@
+const detox = require('detox');
+
+async function globalTeardown() {
+  await detox.globalCleanup();
+}
+
+module.exports = globalTeardown;

e2e/setup.js

@@ -0,0 +1,41 @@
+const { configureToMatchImageSnapshot } = require('jest-image-snapshot');
+const fs = require('fs');
+const path = require('path');
+const kebabCase = require('lodash/kebabCase');
+const {expect} = require('expect');
+
+
+const toMatchImage = configureToMatchImageSnapshot({
+  comparisonMethod: 'ssim', failureThreshold: 0.002, failureThresholdType: 'percent'
+});
+
+
+expect.extend({ toMatchImage });
+
+expect.extend({
+  async toMatchImageSnapshot(screenName) {
+    const platform = await device.getPlatform();
+    const deviceName = await device.name.split(' ').slice(1).join ('') ;
+    const deviceType = 'iPhone 11 Pro' //JSON.parse(deviceName).type.replace(',','');
+
+    const SNAPSHOTS_DIR = `__image_snapshots__/${platform}/${deviceType}`;
+
+    const { testPath, currentTestName } = this;
+
+    const customSnapshotsDir = path.join(path.dirname(testPath), SNAPSHOTS_DIR);
+    const customSnapshotIdentifier = kebabCase(`${path.basename(testPath)}-${currentTestName}-${screenName}`)
+
+    const tempPath = await device.takeScreenshot(screenName);
+    const image = fs.readFileSync(tempPath);
+    expect(image).toMatchImage({ customSnapshotIdentifier, customSnapshotsDir });
+
+    return { pass: true }
+  },
+});
+
+global.jestExpect = expect
+
+
+beforeAll(async () => {
+    await device.launchApp();
+  });

ios/StatusIm.xcodeproj/project.pbxproj

@@ -41,8 +41,6 @@
 		65F6941A25780A4F00A45E76 /* Bridge.swift in Sources */ = {isa = PBXBuildFile; fileRef = 65F6941825780A4F00A45E76 /* Bridge.swift */; };
 		65F6941B25780A4F00A45E76 /* Bridge.swift in Sources */ = {isa = PBXBuildFile; fileRef = 65F6941825780A4F00A45E76 /* Bridge.swift */; };
 		70ADBB5ECF934DCF8A0E4919 /* Inter-Regular.otf in Resources */ = {isa = PBXBuildFile; fileRef = 1426DF592BA248FC81D955CB /* Inter-Regular.otf */; };
-		715D8132290BE850006F5C88 /* UbuntuMono-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 715D8131290BE850006F5C88 /* UbuntuMono-Regular.ttf */; };
-		715D8133290BE850006F5C88 /* UbuntuMono-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 715D8131290BE850006F5C88 /* UbuntuMono-Regular.ttf */; };
 		74B758FC20D7C00B003343C3 /* launch-image-universal.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 74B758FB20D7C00B003343C3 /* launch-image-universal.storyboard */; };
 		8391E8E0E93C41A98AAA6631 /* Inter-SemiBoldItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = A4F2BBE8D4DD4140A6CCAC39 /* Inter-SemiBoldItalic.otf */; };
 		A0093AB50DA85E1D01818CCA /* libPods-Status-StatusIm-StatusImTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 1E88D313E5D854BE6BC81FC1 /* libPods-Status-StatusIm-StatusImTests.a */; };
@@ -123,7 +121,6 @@
 		65F6941725780A4E00A45E76 /* StatusImTests-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "StatusImTests-Bridging-Header.h"; sourceTree = "<group>"; };
 		65F6941825780A4F00A45E76 /* Bridge.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Bridge.swift; sourceTree = "<group>"; };
 		693A62DB37BC4CD5A30E5C96 /* Inter-SemiBold.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Inter-SemiBold.otf"; path = "../resources/fonts/Inter-SemiBold.otf"; sourceTree = "<group>"; };
-		715D8131290BE850006F5C88 /* UbuntuMono-Regular.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "UbuntuMono-Regular.ttf"; path = "../resources/fonts/UbuntuMono-Regular.ttf"; sourceTree = "<group>"; };
 		74B758FB20D7C00B003343C3 /* launch-image-universal.storyboard */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; path = "launch-image-universal.storyboard"; sourceTree = "<group>"; };
 		7AFBE28450C0239119FBDBA2 /* Pods-Status-StatusIm-StatusImTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm-StatusImTests.debug.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests.debug.xcconfig"; sourceTree = "<group>"; };
 		8B9A886A2CB448B1ABA0EB62 /* libc++.tbd */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = "libc++.tbd"; path = "usr/lib/libc++.tbd"; sourceTree = SDKROOT; };
@@ -232,7 +229,6 @@
 				693A62DB37BC4CD5A30E5C96 /* Inter-SemiBold.otf */,
 				A4F2BBE8D4DD4140A6CCAC39 /* Inter-SemiBoldItalic.otf */,
 				9C76AF5A418D4D65A4CAD1D9 /* InterStatus-Regular.otf */,
-				715D8131290BE850006F5C88 /* UbuntuMono-Regular.ttf */,
 			);
 			name = Resources;
 			sourceTree = "<group>";
@@ -479,7 +475,6 @@
 			buildActionMask = 2147483647;
 			files = (
 				74B758FC20D7C00B003343C3 /* launch-image-universal.storyboard in Resources */,
-				715D8132290BE850006F5C88 /* UbuntuMono-Regular.ttf in Resources */,
 				B2F2D1BC1D9D531B00B7B453 /* Images.xcassets in Resources */,
 				D84616FB563A48EBB1678699 /* Inter-Bold.otf in Resources */,
 				D99C50E5E18942A39C8DDF61 /* Inter-BoldItalic.otf in Resources */,
@@ -498,7 +493,6 @@
 			buildActionMask = 2147483647;
 			files = (
 				3AAD2ACA24A3A60E0075D594 /* launch-image-universal.storyboard in Resources */,
-				715D8133290BE850006F5C88 /* UbuntuMono-Regular.ttf in Resources */,
 				3AAD2ACB24A3A60E0075D594 /* Images.xcassets in Resources */,
 				3AAD2ACC24A3A60E0075D594 /* Inter-Bold.otf in Resources */,
 				3AAD2ACD24A3A60E0075D594 /* Inter-BoldItalic.otf in Resources */,

ios/StatusIm/Info.plist

@@ -105,7 +105,6 @@
 		<string>Inter-Thin-BETA.otf</string>
 		<string>Inter-ThinItalic-BETA.otf</string>
 		<string>InterStatus-Regular.otf</string>
-		<string>UbuntuMono-Regular.ttf</string>
 	</array>
 	<key>UIBackgroundModes</key>
 	<array>

ios/StatusImPR/Info.plist

@@ -108,7 +108,6 @@
 		<string>Inter-Thin-BETA.otf</string>
 		<string>Inter-ThinItalic-BETA.otf</string>
 		<string>InterStatus-Regular.otf</string>
-		<string>UbuntuMono-Regular.ttf</string>
 	</array>
 	<key>UIBackgroundModes</key>
 	<array>

nix/status-go/library/default.nix

@@ -20,11 +20,7 @@ buildGoPackage {
   # Build the Go library
   buildPhase = ''
     runHook preBuild
-    go build \
-      -buildmode='c-archive' \
-      -tags='gowaku_skip_migrations' \
-      -o "$out/libstatus.a" \
-      $NIX_BUILD_TOP/main.go
+    go build -buildmode=c-archive -o $out/libstatus.a $NIX_BUILD_TOP/main.go
     runHook postBuild
   '';
 }

nix/status-go/mobile/build.nix

@@ -11,9 +11,6 @@
 
 let
   inherit (lib) concatStringsSep optionalString optional;
-  isIOS = platform == "ios";
-  isAndroid = platform == "android";
-
 in buildGoPackage {
   pname = source.repo;
   version = "${source.cleanVersion}-${source.shortRev}-${platform}";
@@ -23,32 +20,30 @@ in buildGoPackage {
 
   # Sandbox causes Xcode issues on MacOS. Requires sandbox=relaxed.
   # https://github.com/status-im/status-mobile/pull/13912
-  __noChroot = isIOS;
+  __noChroot = (platform == "ios");
 
   extraSrcPaths = [ gomobile ];
   nativeBuildInputs = [ gomobile removeReferencesTo ]
-    ++ optional isAndroid openjdk
-    ++ optional isIOS xcodeWrapper;
+    ++ optional (platform == "android") openjdk
+    ++ optional (platform == "ios") xcodeWrapper;
 
   ldflags = concatStringsSep " " goBuildLdFlags;
 
-  ANDROID_HOME = optionalString isAndroid androidPkgs.sdk;
+  ANDROID_HOME = optionalString (platform == "android") androidPkgs.sdk;
 
   # Ensure XCode is present for iOS, instead of failing at the end of the build.
-  preConfigure = optionalString isIOS utils.enforceXCodeAvailable;
+  preConfigure = optionalString (platform == "ios") utils.enforceXCodeAvailable;
 
   buildPhase = ''
     runHook preBuild
     echo -e "\nBuilding $pname for: ${concatStringsSep "," targets}"
 
-    set -x
     gomobile bind \
       ${concatStringsSep " " goBuildFlags} \
       -ldflags="$ldflags" \
       -target=${concatStringsSep "," targets} \
-      ${optionalString isAndroid "-androidapi=${platformVersion}" } \
-      ${optionalString isIOS "-iosversion=${platformVersion}" } \
-     -tags='${optionalString isIOS "nowatchdog"} gowaku_skip_migrations' \
+      ${optionalString (platform == "android") "-androidapi=${platformVersion}"} \
+      ${optionalString (platform == "ios") "-iosversion=${platformVersion}"} \
       -o ${outputFileName} \
       ${source.goPackagePath}/mobile
 
@@ -63,7 +58,7 @@ in buildGoPackage {
   # Drop govers from disallowedReferences.
   dontRenameImports = true;
   # Replace hardcoded paths to go package in /nix/store.
-  preFixup = optionalString isIOS ''
+  preFixup = optionalString (platform == "ios") ''
     find $out -type f -exec \
       remove-references-to -t $disallowedReferences '{}' + || true
   '';

package.json

@@ -10,7 +10,11 @@
     "app:compile:android": "shadow-cljs compile android",
     "app:watch": "shadow-cljs watch android",
     "app:packager": "react-native start --host 0.0.0.0 --port 8081",
-    "app:android": "react-native run-android"
+    "app:android": "react-native run-android",
+    "detox": "detox build --configuration ios.sim.debug",
+    "visual-test": "detox test --configuration ios.sim.debug --config e2e/config.json",
+    "help": "detox test -- --help"
+
   },
   "dependencies": {
     "@babel/preset-typescript": "^7.17.12",
@@ -37,7 +41,7 @@
     "qrcode": "^1.4.1",
     "react": "16.13.1",
     "react-dom": "^16.4.2",
-    "react-native": "0.63.5",
+    "react-native": "0.63.4",
     "react-native-background-timer": "^2.1.1",
     "react-native-blob-util": "^0.13.18",
     "react-native-camera-kit": "^8.0.4",
@@ -70,7 +74,6 @@
     "react-native-svg": "^9.8.4",
     "react-native-touch-id": "^4.4.1",
     "react-native-webview": "git+https://github.com/status-im/react-native-webview.git#refs/tags/v11.16.0-status",
-    "react-syntax-highlighter": "^15.5.0",
     "rn-emoji-keyboard": "git+https://github.com/status-im/rn-emoji-keyboard.git#refs/tags/v0.4.3",
     "tdigest": "^0.1.1"
   },
@@ -81,7 +84,10 @@
     "@babel/preset-env": "7.1.0",
     "@babel/register": "7.0.0",
     "@mapbox/node-pre-gyp": "^1.0.9",
-    "jest": "^25.1.0",
+    "@types/jest": "^28.1.6",
+    "detox": "^19.9.1",
+    "jest-image-snapshot": "^5.1.0",
+    "jest": "^28.1.3",
     "nodemon": "^2.0.16",
     "nyc": "^14.1.1",
     "process": "0.11.10",

src/quo2/__visual_tests__/button.visual.js

@@ -0,0 +1,55 @@
+const data = require('./visual-tests.json')
+
+const waitToNavigate = duration => new Promise(resolve => setTimeout(() => resolve(), duration));
+
+describe('Example (hello)', () => {
+    beforeAll(async () => {
+        if (device.getPlatform() === 'ios') {
+            await device.setStatusBar({ time: '12:34', dataNetwork: 'wifi', wifiBars: '3', batteryState: 'charging', batteryLevel: '100' });
+        }
+        await device.reloadReactNative();
+
+        await element(by.text('I accept Status Terms of Use')).tap();
+        // close alert
+        await element(by.text('Get started')).tap();
+        await waitToNavigate(200);
+
+        await element(by.text('Generate keys')).tap();
+        await waitToNavigate(200);
+
+        await element(by.text('Next')).tap();
+        await waitToNavigate(700);
+        await element(by.text('Next')).tap();
+        await waitToNavigate(700);
+        // await element(by.text('Password...')).typeText('infinitbility@gmail.com');
+        // await element(by.text('Confirm your password...')).typeText('infinitbility@gmail.com');
+        await element(by.text('Next')).tap();
+        await waitToNavigate(700);
+        await element(by.text('Maybe later')).tap();
+        await waitToNavigate(700);
+        await element(by.text("Let's go")).tap();
+        await waitToNavigate(700);
+
+        await element(by.text("1")).tap();
+        await waitToNavigate(400);
+        await element(by.text("Quo2.0 Preview")).tap();
+        await waitToNavigate(400);
+    })
+    beforeEach(async () => {
+    });
+    afterEach(async () => {
+        await element(by.text("1")).tap();
+        await waitToNavigate(200);
+        await element(by.text("Quo2.0 Preview")).tap();
+        await waitToNavigate(200);
+    });
+
+    const pages = Object.keys(data)
+
+    it(`button page should match snapshot`, async () => {
+        await element(by.text(`:button`)).tap();
+        await waitToNavigate(200);
+        const res = await jestExpect(`default-render-button`).toMatchImageSnapshot();
+    })
+
+});

src/quo2/components/avatars/account_avatar.cljs

@@ -1,8 +1,8 @@
 (ns quo2.components.avatars.account-avatar
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [quo2.foundations.colors :as colors]
             [status-im.ui.components.icons.icons :as icons]
-            [quo2.theme :as theme]))
+            [quo.theme :as theme]))
 
 (def icon-color-value
   {:dark (get-in colors/customization [:dark :purple])

src/quo2/components/avatars/channel_avatar.cljs

@@ -1,9 +1,9 @@
 (ns quo2.components.avatars.channel-avatar
   (:require [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
+            [quo.react-native :as rn]
             [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
-            [quo2.theme :as theme]))
+            [quo.theme :as theme]))
 
 (defn channel-avatar [{:keys [big? locked? emoji-background-color emoji]}]
   (let [lock-exists? (some? locked?)

src/quo2/components/avatars/group_avatar.cljs

@@ -1,7 +1,7 @@
 (ns quo2.components.avatars.group-avatar
   (:require [quo2.foundations.colors :as colors]
             [quo2.components.icon :as icon]
-            [react-native.core :as rn]))
+            [quo.react-native :as rn]))
 
 (def sizes
   {:icon {:small 12

src/quo2/components/avatars/icon_avatar.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.avatars.icon-avatar
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [quo2.foundations.colors :as colors]
             [status-im.ui.components.icons.icons :as icons]))
 

src/quo2/components/avatars/user_avatar.cljs

@@ -1,11 +1,10 @@
 (ns quo2.components.avatars.user-avatar
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
             [quo2.components.icon :as icons]
             [clojure.string :refer [upper-case split blank?]]
-            [quo2.theme :refer [dark?]]
-            [status-im.ui.components.fast-image :as fast-image]))
+            [quo.theme :refer [dark?]]))
 
 (def sizes {:big {:outer 80
                   :inner 72
@@ -132,8 +131,8 @@
                                                :no-color true}])
      (if profile-picture
        ;; display image
-       [fast-image/fast-image {:source              {:uri profile-picture}
-                               :style               (container-styling inner-dimensions outer-dimensions)}]
+       [rn/image {:style  (container-styling inner-dimensions outer-dimensions)
+                  :source profile-picture}]
        ;; else display initials
        [container inner-dimensions outer-dimensions
         [text/text {:weight :semi-bold

src/quo2/components/avatars/wallet_user_avatar.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.avatars.wallet-user-avatar
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [quo2.foundations.colors :as colors]
             [quo2.components.markdown.text :as text]
             [clojure.string :as clojure-string]))

src/quo2/components/buttons/button.cljs

@@ -1,8 +1,8 @@
 (ns quo2.components.buttons.button
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [quo2.foundations.colors :as colors]
             [quo2.components.markdown.text :as text]
-            [quo2.theme :as theme]
+            [quo.theme :as theme]
             [reagent.core :as reagent]
             [quo2.components.icon :as quo2.icons]))
 

src/quo2/components/buttons/dynamic_button.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.buttons.dynamic-button
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [reagent.core :as reagent]
             [status-im.i18n.i18n :as i18n]
             [quo2.components.icon :as icon]

src/quo2/components/code/snippet.cljs

@@ -1,154 +0,0 @@
-(ns quo2.components.code.snippet
-  (:require ["react-native" :as react-native]
-            ["react-syntax-highlighter" :default Highlighter]
-            [cljs-bean.core :as bean]
-            [clojure.string :as str]
-            [oops.core :as oops]
-            [react-native.core :as rn]
-            [quo2.theme :as theme]
-            [quo2.components.buttons.button :as button]
-            [quo2.components.markdown.text :as text]
-            [quo2.foundations.colors :as colors]
-            [reagent.core :as reagent]
-            [status-im.ui.components.react :as react]))
-
-;; 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] :as node}]
-         ;; Node can have :children or a :value.
-         (if children
-           (into [text/text {:weight :code
-                             :size :paragraph-2
-                             :style (text-style (get-in node [:properties :className]))}]
-                 (render-nodes children))
-           ;; Remove newlines as we already render each line separately.
-           (-> value str/trim-newline)))
-       nodes))
-
-(defn- code-block [{:keys [rows line-number-width]}]
-  [into [:<>]
-   (->> rows
-        (render-nodes)
-        ;; Line numbers
-        (map-indexed (fn [idx row]
-                       (conj [rn/view {:style {:flex-direction :row}}
-                              [rn/view {:style {:width line-number-width
-                                                ;; 8+12 margin
-                                                :margin-right 20}}
-                               [text/text {:weight :code
-                                           :size :paragraph-2
-                                           :style (text-style ["line-number"])}
-                                (inc idx)]]]
-                             row))))])
-
-(defn- native-renderer []
-  (let [text-height (reagent/atom nil)]
-    (fn [{:keys [rows max-lines on-copy-press]}]
-      (let [background-color      (colors/theme-colors
-                                   colors/white
-                                   colors/neutral-80-opa-40)
-            background-color-left (colors/theme-colors
-                                   colors/neutral-5
-                                   colors/neutral-80)
-            border-color          (colors/theme-colors
-                                   colors/neutral-20
-                                   colors/neutral-80)
-            rows                  (bean/->clj rows)
-            font-scale            (:font-scale (rn/use-window-dimensions))
-            max-rows              (or max-lines (count rows)) ;; Cut down on rows to process.
-            max-line-digits       (-> rows count (min max-rows) str count)
-            ;; ~ 9 is char width, 18 is width used in Figma.
-            line-number-width     (* font-scale (max 18 (* 9 max-line-digits)))
-            max-text-height       (some-> max-lines (* font-scale 18)) ;; 18 is font's line height.
-            truncated?            (and max-text-height (< max-text-height @text-height))
-            maybe-mask-wrapper    (if truncated?
-                                    [react/masked-view
-                                     {:mask-element
-                                      (reagent/as-element
-                                       [react/linear-gradient {: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 {:language          language
-                   :renderer          (wrap-renderer-fn
-                                       native-renderer {:max-lines max-lines
-                                                        :on-copy-press #(when on-copy-press
-                                                                          (on-copy-press children))})
-                   ;; Default props to adapt Highlighter for react-native.
-                   :CodeTag           react-native/View
-                   :PreTag            react-native/View
-                   :show-line-numbers false
-                   :style             #js {}
-                   :custom-style      #js {:backgroundColor nil}}
-   children])

src/quo2/components/community/community_card_view.cljs

@@ -40,8 +40,6 @@
          [community-view/community-title
           {:title name
            :description description}]
-         [react/view {:style (styles/card-stats-position)}
-          [community-view/community-stats-column :card-view]]
-         [react/view {:style (styles/community-tags-position)}
-          [community-view/community-tags tags]]]]]]]))
+         [community-view/community-stats-column :card-view]
+         [community-view/community-tags tags]]]]]]))
 

src/quo2/components/community/community_list_view.cljs

@@ -3,8 +3,6 @@
    [quo2.components.community.community-view :as community-view]
    [quo2.components.markdown.text :as text]
    [quo2.foundations.colors :as colors]
-   [quo2.components.counter.counter :as counter]
-   [quo2.components.icon :as icons]
    [status-im.communities.core :as communities]
    [status-im.utils.handlers :refer [>evt]]
    [status-im.ui.components.react :as react]
@@ -12,8 +10,7 @@
    [status-im.ui.screens.communities.community :as community]
    [status-im.ui.screens.communities.icon :as communities.icon]))
 
-(defn communities-list-view-item [{:keys [id name locked? status notifications
-                                          tokens background-color] :as community}]
+(defn communities-list-view-item [{:keys [id name locked status tokens background-color] :as community}]
   [react/view {:style (merge (styles/community-card 16)
                              {:margin-bottom    12
                               :margin-horizontal 20})}
@@ -41,39 +38,17 @@
                    :size                :paragraph-1
                    :accessibility-label :community-name-text
                    :number-of-lines     1
-                   :ellipsize-mode      :tail
-                   :style               {:color   (when (= notifications :muted)
-                                                    (colors/theme-colors
-                                                     colors/neutral-40
-                                                     colors/neutral-60))}}
+                   :ellipsize-mode      :tail}
         name]
        [community-view/community-stats-column :list-view]]
-      (if  (= status :gated)
-        [community-view/permission-tag-container {:locked?      locked?
-                                                  :tokens       tokens}]
-        (cond
-          (= notifications :unread-messages-count)
-          [react/view {:style {:width            8
-                               :height           8
-                               :border-radius    4
-                               :background-color (colors/theme-colors
-                                                  colors/neutral-40
-                                                  colors/neutral-60)}}]
+      (when (= status :gated)
+        [community-view/permission-tag-container {:locked       locked
+                                                  :status       status
+                                                  :tokens       tokens}])]]]])
 
-          (= notifications :unread-mentions-count)
-          [counter/counter {:type :default} 5]
-
-          (= notifications :muted)
-          [icons/icon  :main-icons2/muted {:container-style {:align-items     :center
-                                                             :justify-content :center}
-                                           :resize-mode      :center
-                                           :size             20
-                                           :color            (colors/theme-colors
-                                                              colors/neutral-40
-                                                              colors/neutral-50)}]))]]]])
-
-(defn communities-membership-list-item [{:keys [id name status tokens locked?] :as community}]
-  [react/view {:margin-bottom       20}
+(defn communities-membership-list-item [{:keys [id name status tokens locked] :as community}]
+  [react/view {:margin-bottom       12
+               :padding-horizontal  8}
    [react/touchable-highlight {:underlay-color      colors/primary-50-opa-5
                                :style               {:border-radius 12}
                                :on-press      (fn []
@@ -83,23 +58,19 @@
                                :on-long-press #(>evt [:bottom-sheet/show-sheet
                                                       {:content (fn []
                                                                   [community/community-actions community])}])}
-    [react/view {:flex               1}
+    [react/view {:flex               1
+                 :padding-vertical   8
+                 :padding-horizontal 12}
      [react/view {:flex-direction    :row
                   :border-radius     16
                   :align-items       :center}
-      [communities.icon/community-icon-redesign community 32]
-      [react/view {:flex              1
-                   :margin-left       12
-                   :justify-content   :center}
-       [text/text
-        {:accessibility-label :chat-name-text
-         :number-of-lines     1
-         :ellipsize-mode      :tail
-         :weight              :semi-bold
-         :size                :paragraph-1}
-        name]]
+      [communities.icon/community-icon-redesign community 48]
+      [react/view {:margin-left   12
+                   :flex          1}
+       [community-view/community-title {:title  name}]]
       (when (= status :gated)
         [react/view {:justify-content   :center
                      :margin-right      12}
-         [community-view/permission-tag-container {:locked?      locked?
+         [community-view/permission-tag-container {:locked       locked
+                                                   :status       status
                                                    :tokens       tokens}]])]]]])

src/quo2/components/community/community_view.cljs

@@ -40,10 +40,9 @@
      [community-stats {:icon       :main-icons2/lightning
                        :count      "112.1K"
                        :icon-color icon-color}]
-     (when (= type :card-view)
-       [community-stats {:icon       :main-icons2/placeholder
-                         :count      4
-                         :icon-color icon-color}])]))
+     [community-stats {:icon       :main-icons2/placeholder
+                       :count      4
+                       :icon-color icon-color}]]))
 
 (defn community-tags [tags]
   [react/view (styles/community-tags-container)
@@ -78,10 +77,10 @@
        :style {:margin-top (if (= size :large) 8 2)}}
       description])])
 
-(defn permission-tag-container [{:keys [locked? tokens]}]
+(defn permission-tag-container [{:keys [locked tokens]}]
   [permission/tag {:background-color (colors/theme-colors
                                       colors/neutral-10
                                       colors/neutral-80)
-                   :locked?          locked?
+                   :locked           locked
                    :tokens           tokens
                    :size             24}])

src/quo2/components/community/discover_card.cljs

@@ -69,11 +69,10 @@
                   :height                    height
                   :background-color          colors/neutral-10}])])
 
-(defn discover-card [{:keys [title description on-press accessibility-label]}]
+(defn discover-card [{:keys [title description on-press]}]
   (let [on-joined-images     (get images   :images)]
     [react/touchable-without-feedback
-     {:on-press            on-press
-      :accessibility-label accessibility-label}
+     {:on-press on-press}
      [react/view (merge (styles/community-card 16)
                         {:background-color  (colors/theme-colors
                                              colors/white
@@ -92,4 +91,4 @@
                                  :border-radius 6
                                  :first-image   "" ; TODO replace with real data
                                  :last-image    ""}]) ; TODO replace with real data
-      ]]))
+      ]]))

src/quo2/components/counter/counter.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.counter.counter
-  (:require [quo2.theme :as theme]
-            [react-native.core :as rn]
+  (:require [quo.theme :as theme]
+            [quo.react-native :as rn]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]))
 

src/quo2/components/dividers/divider_label.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.dividers.divider-label
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [quo2.components.markdown.text :as markdown.text]
             [status-im.ui.components.icons.icons :as icons]
             [quo2.foundations.colors :as colors]))

src/quo2/components/dividers/new_messages.cljs

@@ -1,16 +1,18 @@
 (ns quo2.components.dividers.new-messages
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [react-native.linear-gradient :as linear-gradient]))
+            [status-im.i18n.i18n :as i18n]
+            [status-im.ui.components.react :as react]))
 
 (defn new-messages
   "new-messages params - label, color"
-  [{:keys [label color] :or {color :primary}}]
+  [{:keys [label color] :or {label (i18n/label :new-messages-header)
+                             color :primary}}]
   (let [bg-color   (colors/custom-color-by-theme color 50 60 5 5)
         text-color (colors/custom-color-by-theme color 50 60)]
-    [linear-gradient/linear-gradient {:colors [bg-color "rgba(0,0,0,0)"]
-                                      :start {:x 0 :y 0} :end {:x 0 :y 1}}
+    [react/linear-gradient {:colors [bg-color "rgba(0,0,0,0)"]
+                            :start {:x 0 :y 0} :end {:x 0 :y 1}}
      [rn/view {:style {:padding-left     60
                        :padding-vertical 12
                        :padding-right    24}}

src/quo2/components/drawers/action_drawers.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.drawers.action-drawers
   (:require  [status-im.ui.components.react :as react]
-             [react-native.core :as rn]
+             [quo.react-native :as rn]
              [quo2.components.markdown.text :as text]
              [quo2.components.icon :as icon]
              [quo2.foundations.colors :as colors]))

src/quo2/components/dropdowns/dropdown.cljs

@@ -1,9 +1,9 @@
 (ns quo2.components.dropdowns.dropdown
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [react-native.reanimated :as reanimated]
+            [quo2.reanimated :as reanimated]
             [reagent.core :as reagent]))
 
 (defn apply-anim [dd-height val]

src/quo2/components/header.cljs

@@ -1,10 +1,11 @@
 (ns quo2.components.header
   (:require [oops.core :refer [oget]]
-            [react-native.reanimated :as reanimated]
+            [quo.animated :as animated]
             [quo2.components.buttons.button :as button]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
+            [quo.design-system.spacing :as spacing]
+            [quo.react-native :as rn]
             [reagent.core :as reagent]))
 
 (def header-height 56)
@@ -60,14 +61,15 @@
       :right           (max (:width left) (:width right))})))
 
 (def header-actions-style
-  {:flex               1
-   :flex-direction     :row
-   :align-items        :center
-   :justify-content    :center
-   :padding-horizontal 4})
+  (merge
+   {:flex               1
+    :flex-direction     :row
+    :align-items        :center
+    :justify-content    :center}
+   (:x-tiny spacing/padding-horizontal)))
 
 (def header-action-placeholder
-  {:width 16})
+  {:width (:base spacing/spacing)})
 
 (def element {:align-items        :center
               :justify-content    :center
@@ -143,9 +145,9 @@
                  border-bottom false}}]
       (let [status-bar-height (get insets :top 0)
             height            (+ header-height status-bar-height)]
-        [reanimated/view {:style (header-wrapper-style {:height        height
-                                                        :background    background
-                                                        :border-bottom border-bottom})}
+        [animated/view {:style (header-wrapper-style {:height        height
+                                                      :background    background
+                                                      :border-bottom border-bottom})}
          [rn/view {:pointer-events :box-none
                    :height         status-bar-height}]
          [rn/view {:style          (merge {:height header-height}

src/quo2/components/info/info_message.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.info.info-message
-  (:require [quo2.theme :as theme]
-            [react-native.core :as rn]
+  (:require [quo.theme :as theme]
+            [quo.react-native :as rn]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
             [quo2.components.icon :as quo2.icons]))

src/quo2/components/info/information_box.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.info.information-box
-  (:require [quo2.theme :as theme]
-            [react-native.core :as rn]
+  (:require [quo.theme :as theme]
+            [quo.react-native :as rn]
             [clojure.string :as string]
             [quo2.foundations.colors :as colors]
             [quo2.components.icon :as quo2.icons]

src/quo2/components/list_items/channel.cljs

@@ -1,15 +1,15 @@
 (ns quo2.components.list-items.channel
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [quo2.foundations.colors :as colors]
             [quo2.components.counter.counter :as quo2.counter]
             [quo2.components.icon :as quo2.icons]
             [quo2.components.avatars.channel-avatar :as channel-avatar]
             [quo2.components.markdown.text :as quo2.text]
-            [quo2.theme :as theme]))
+            [quo.theme :as theme]))
 
 (defn list-item [{:keys [name locked? mentions-count unread-messages?
                          muted? is-active-channel? emoji channel-color]
-                  :or   {channel-color colors/primary-50}}]
+                  :or {channel-color colors/primary-50}}]
   [rn/view {:style (merge {:height          48
                            :display         :flex
                            :border-radius   12
@@ -21,19 +21,21 @@
                            :padding-right   12}
                           (when is-active-channel?
                             {:background-color (colors/theme-alpha channel-color 0.05 0.05)}))}
-   [rn/view {:display         :flex
-             :flex-direction  :row
+   [rn/view {:display :flex
+             :flex-direction :row
              :justify-content :flex-start
-             :align-items     :center}
+             :align-items :center}
     [channel-avatar/channel-avatar
      {:big?                   true
-      :locked?                locked?
+      :locked?            locked?
       :emoji-background-color (colors/theme-alpha channel-color 0.1 0.1)
       :emoji                  emoji}]
     [quo2.text/text
-     {:style  (merge {:margin-left 12}
-                     (when (and (not locked?) muted?)
-                       {:color (if (theme/dark?) colors/neutral-60 colors/neutral-40)}))
+     {:style (merge {:margin-left 12}
+                    (when
+                     (and (not locked?)
+                          muted?)
+                      {:color (if (theme/dark?) colors/neutral-60 colors/neutral-40)}))
       :weight :medium :size :paragraph-1} (str "# " name)]]
    [rn/view {:style {:height 20}}
     (when (and (not locked?)

src/quo2/components/list_items/menu_item.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.list-items.menu-item
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [quo2.foundations.colors :as colors :refer [theme-colors]]
             [quo2.components.markdown.text :as text]
             [quo2.components.icon :as icons]))

src/quo2/components/list_items/preview_list.cljs

@@ -1,6 +1,5 @@
 (ns quo2.components.list-items.preview-list
-  (:require [react-native.core :as rn]
-            [react-native.hole-view :as hole-view]
+  (:require [quo.react-native :as rn]
             [status-im.i18n.i18n :as i18n]
             [quo2.foundations.colors :as colors]
             [quo2.components.icon :as quo2.icons]
@@ -43,13 +42,13 @@
 (defn list-item [index type size item list-size margin-left
                  hole-size hole-radius hole-x hole-y border-radius]
   (let [last-item? (= index (- list-size 1))]
-    [hole-view/hole-view {:style {:margin-left   (if (= index 0) 0 margin-left)}
-                          :holes (if last-item? []
-                                     [{:x             hole-x
-                                       :y             hole-y
-                                       :width         hole-size
-                                       :height        hole-size
-                                       :borderRadius  hole-radius}])}
+    [rn/hole-view {:style {:margin-left   (if (= index 0) 0 margin-left)}
+                   :holes (if last-item? []
+                              [{:x             hole-x
+                                :y             hole-y
+                                :width         hole-size
+                                :height        hole-size
+                                :borderRadius  hole-radius}])}
      [avatar item type size border-radius]]))
 
 (defn get-overflow-color [transparent? transparent-color light-color dark-color override-theme]

src/quo2/components/list_items/received_contact_request.cljs

@@ -1,5 +1,5 @@
-(ns quo2.components.list-items.received-cr-item
-  (:require [react-native.core :as rn]
+(ns quo2.components.list-items.received-contact-request
+  (:require [quo.react-native :as rn]
             [quo2.foundations.colors :as colors]
             [status-im.utils.handlers :refer [<sub >evt]]
             [quo2.components.avatars.user-avatar :as user-avatar]
@@ -10,9 +10,17 @@
             [status-im.i18n.i18n :as i18n]
             [quo2.components.notifications.notification-dot :refer [notification-dot]]))
 
-(defn received-cr-item [{:keys [chat-id message timestamp read]}]
+(defn get-display-name [chat-id no-ens-name no-nickname]
+  (let [name (first (<sub [:contacts/contact-two-names-by-identity chat-id]))]
+    (if (and no-ens-name no-nickname)
+      (let [[word1 word2] (str/split name " ")]
+        (str word1 " " word2))
+      name)))
+
+(defn list-item [{:keys [chat-id image contact message timestamp read]}]
   (let [no-ens-name  (str/blank? (get-in message [:content :ens-name]))
-        display-name (first (<sub [:contacts/contact-two-names-by-identity chat-id]))]
+        no-nickname  (nil? (get-in contact [:names :nickname]))
+        display-name (get-display-name chat-id no-ens-name no-nickname)]
     [rn/view {:style {:flex-direction :row
                       :padding-top    8
                       :margin-top     4
@@ -24,6 +32,7 @@
                                :status-indicator? true
                                :online?           true
                                :size              :small
+                               :profile-picture   image
                                :ring?             false}]
      [rn/view {:style {:margin-horizontal 8}}
       [rn/view {:style {:flex-direction :row}}
@@ -73,5 +82,3 @@
                                                     :padding-horizontal 8
                                                     :margin-left        8}}
         [rn/text {:style (merge typography/font-medium typography/paragraph-2 {:color colors/white})} (i18n/label :t/accept)]]]]]))
-
-

src/quo2/components/markdown/text.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.markdown.text
-  (:require [react-native.core :as rn]
-            [quo2.theme :as theme]
+  (:require [quo.react-native :as rn]
+            [quo.theme :as theme]
             [quo2.foundations.colors :as colors]
             [quo2.foundations.typography :as typography]
             [reagent.core :as reagent]))
@@ -12,7 +12,6 @@
            :semi-bold typography/font-semi-bold
            :bold      typography/font-bold
            :monospace typography/monospace
-           :code      typography/code
            :inherit   nil)
          (case (or size :paragraph-1)
            :label       typography/label

src/quo2/components/messages/gap.cljs

@@ -1,8 +1,8 @@
 (ns quo2.components.messages.gap
   (:require
    [oops.core :refer [oget]]
-   [react-native.core :as rn]
-   [quo2.theme :as theme]
+   [quo.react-native :as rn]
+   [quo.theme :as theme]
    [quo2.components.icon :as icon]
    [quo2.components.markdown.text :as text]
    [quo2.foundations.colors :as colors]

src/quo2/components/messages/system_message.cljs

@@ -1,11 +1,11 @@
 (ns quo2.components.messages.system-message
-  (:require [react-native.core :as rn]
-            [react-native.reanimated :as reanimated]
-            [quo2.theme :as theme]
+  (:require [quo.react-native :as rn]
+            [quo.theme :as theme]
             [quo2.components.avatars.icon-avatar :as icon-avatar]
             [quo2.components.avatars.user-avatar :as user-avatar]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
+            [quo2.reanimated :as ra]
             [status-im.i18n.i18n :as i18n]
             [status-im.utils.core :as utils]))
 
@@ -140,16 +140,16 @@
   [{:keys [type style non-pressable? animate-landing?] :as message}]
   [:f>
    (fn []
-     (let [sv-color (reanimated/use-shared-value
+     (let [sv-color (ra/use-shared-value
                      (get-color :bg (if animate-landing? :landed :default) type))]
        (when animate-landing?
-         (reanimated/animate-shared-value-with-delay
+         (ra/animate-shared-value-with-delay
           sv-color (get-color :bg :default type) 0 :linear 1000))
-       [reanimated/touchable-opacity
+       [ra/touchable-opacity
         {:on-press #(when-not non-pressable?
-                      (reanimated/set-shared-value
+                      (ra/set-shared-value
                        sv-color (get-color :bg :pressed type)))
-         :style    (reanimated/apply-animations-to-style
+         :style    (ra/apply-animations-to-style
                     {:background-color sv-color}
                     (merge
                      {:flex-direction     :row

src/quo2/components/navigation/bottom_nav_tab.cljs

@@ -1,7 +1,6 @@
 (ns quo2.components.navigation.bottom-nav-tab
-  (:require [react-native.core :as rn]
-            [react-native.reanimated :as reanimated]
-            [react-native.hole-view :as hole-view]
+  (:require [quo.react-native :as rn]
+            [quo2.reanimated :as reanimated]
             [quo2.foundations.colors :as colors]
             [quo2.components.icons.icons :as icons]
             [quo2.components.counter.counter :as counter]))
@@ -45,18 +44,18 @@
          :on-press-out        #(toggle-background-color background-color true pass-through?)
          :accessibility-label accessibility-label}
         [reanimated/view {:style background-animated-style}
-         [hole-view/hole-view {:style {:padding-left 33
-                                       :padding-top  8}
-                               :key   new-notifications? ;; Key is required to force removal of holes
-                               :holes (cond
-                                        (not new-notifications?) ;; No new notifications, remove holes
-                                        []
+         [rn/hole-view {:style {:padding-left 33
+                                :padding-top  8}
+                        :key    new-notifications? ;; Key is required to force removal of holes
+                        :holes  (cond
+                                  (not new-notifications?) ;; No new notifications, remove holes
+                                  []
 
-                                        (= notification-indicator :unread-dot)
-                                        [{:x 50 :y 5 :width 10 :height 10 :borderRadius 5}]
+                                  (= notification-indicator :unread-dot)
+                                  [{:x 50 :y 5 :width 10 :height 10 :borderRadius 5}]
 
-                                        :else
-                                        [{:x 47 :y 1 :width 18 :height 18 :borderRadius 7}])}
+                                  :else
+                                  [{:x 47 :y 1 :width 18 :height 18 :borderRadius 7}])}
           [reanimated/image
            {:style icon-animated-style
             :source (icons/icon-source (keyword (str icon 24)))}]]

src/quo2/components/navigation/floating_shell_button.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.navigation.floating-shell-button
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [quo2.components.buttons.dynamic-button :as dynamic-button]))
 
 (defn dynamic-button-view [type dynamic-buttons style]

src/quo2/components/navigation/page_nav.cljs

@@ -1,10 +1,10 @@
 (ns quo2.components.navigation.page-nav
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [quo2.foundations.colors :as colors]
             [quo2.components.icon :as icons]
             [status-im.utils.dimensions :as dimensions]
-            [quo2.components.markdown.text :as text]
-            [clojure.string :as string]))
+            [clojure.string :as string]
+            [quo2.components.markdown.text :as text]))
 
 (def ^:private centrify-style
   {:display         :flex

src/quo2/components/navigation/top_nav.cljs

@@ -1,10 +1,9 @@
 (ns quo2.components.navigation.top-nav
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [quo2.foundations.colors :as colors]
             [quo2.components.counter.counter :as counter]
             [quo2.components.buttons.button :as quo2.button]
-            [quo2.components.avatars.user-avatar :as user-avatar]
-            [react-native.hole-view :as hole-view]))
+            [quo2.components.avatars.user-avatar :as user-avatar]))
 
 (defn- get-button-common-props [type]
   (let [default? (= type :default)
@@ -68,16 +67,16 @@
       [base-button :main-icons2/qr-code show-qr :show-qr-button button-common-props]
       [rn/view ;; Keep view instead of "[:<>" to make sure relative
                ;; position is calculated from this view instead of its parent
-       [hole-view/hole-view {:key   new-notifications? ;; Key is required to force removal of holes
-                             :holes (cond
-                                      (not new-notifications?) ;; No new notifications, remove holes
-                                      []
+       [rn/hole-view {:key    new-notifications? ;; Key is required to force removal of holes
+                      :holes  (cond
+                                (not new-notifications?) ;; No new notifications, remove holes
+                                []
 
-                                      (= notification-indicator :unread-dot)
-                                      [{:x 37 :y -3 :width 10 :height 10 :borderRadius 5}]
+                                (= notification-indicator :unread-dot)
+                                [{:x 37 :y -3 :width 10 :height 10 :borderRadius 5}]
 
-                                      :else
-                                      [{:x 33 :y -7 :width 18 :height 18 :borderRadius 7}])}
+                                :else
+                                [{:x 33 :y -7 :width 18 :height 18 :borderRadius 7}])}
         [base-button :main-icons2/activity-center open-activity-center
          :open-activity-center-button button-common-props]]
        (when new-notifications?

src/quo2/components/notifications/activity_logs.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.notifications.activity-logs
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [quo2.components.buttons.button :as button]
             [quo2.components.icon :as icon]
             [quo2.components.markdown.text :as text]

src/quo2/components/notifications/info_count.cljs

@@ -1,15 +0,0 @@
-(ns quo2.components.notifications.info-count
-  (:require [react-native.core :as rn]
-            [quo2.foundations.colors :as colors]
-            [quo2.foundations.typography :as typography]))
-
-(defn info-count [count style]
-  (when (> count 0)
-    [rn/view {:style (merge {:width            16
-                             :height           16
-                             :position         :absolute
-                             :right            22
-                             :border-radius    6
-                             :background-color (colors/theme-colors colors/primary-50 colors/primary-60)}
-                            style)}
-     [rn/text {:style (merge typography/font-medium typography/label {:color colors/white :text-align :center})} count]]))

src/quo2/components/notifications/notification_dot.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.notifications.notification-dot
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [quo2.foundations.colors :as colors]))
 
 (defn notification-dot [style]

src/quo2/components/reactions/reaction.cljs

@@ -1,7 +1,7 @@
 (ns quo2.components.reactions.reaction
   (:require [quo2.components.markdown.text :as quo2.text]
-            [react-native.core :as rn]
-            [quo2.theme :as theme]
+            [quo.react-native :as rn]
+            [quo.theme :as theme]
             [quo2.foundations.colors :as colors]
             [quo2.components.icon :as icons]))
 

src/quo2/components/selectors/disclaimer.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.selectors.disclaimer
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [quo2.foundations.colors :as colors]
             [quo2.components.markdown.text :as text]
             [quo2.components.selectors.selectors :as selectors]))

src/quo2/components/selectors/selectors.cljs

@@ -1,7 +1,7 @@
 (ns quo2.components.selectors.selectors
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]
+            [quo.theme :as theme]
             [reagent.core :as reagent]
             [quo2.components.icon :as icons]))
 

src/quo2/components/separator.cljs

@@ -1,14 +1,14 @@
 (ns quo2.components.separator
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as react]
             [quo2.foundations.colors :as quo2.colors]))
 
 (defn separator [{:keys [style]}]
-  [rn/view
+  [react/view
    {:style
     (merge
      style
      {:background-color (quo2.colors/theme-colors
-                         quo2.colors/neutral-10
+                         quo2.colors/neutral-30
                          quo2.colors/neutral-80)
       :align-self       :stretch
       :height           1})}])

src/quo2/components/switcher/switcher_cards.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.switcher.switcher-cards
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [status-im.i18n.i18n :as i18n]
             [quo2.foundations.colors :as colors]
             [quo2.components.markdown.text :as text]

src/quo2/components/tabs/account_selector.cljs

@@ -1,7 +1,7 @@
 (ns quo2.components.tabs.account-selector
   (:require
-   [quo2.theme :as theme]
-   [react-native.core :as rn]
+   [quo.theme :as theme]
+   [quo.react-native :as rn]
    [quo2.foundations.colors :as colors]
    [quo2.components.markdown.text :as quo2]))
 

src/quo2/components/tabs/segmented_tab.cljs

@@ -1,9 +1,9 @@
 (ns quo2.components.tabs.segmented-tab
   (:require [reagent.core :as reagent]
-            [react-native.core :as rn]
+            [quo.react-native :as rn]
             [quo2.components.tabs.tab :as tab]
             [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]))
+            [quo.theme :as theme]))
 
 (def themes {:light {:background-color colors/neutral-20}
              :dark  {:background-color colors/neutral-80}})

src/quo2/components/tabs/tab.cljs

@@ -1,7 +1,7 @@
 (ns quo2.components.tabs.tab
   (:require [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [quo2.theme :as theme]
+            [quo.react-native :as rn]
+            [quo.theme :as theme]
             [status-im.ui.components.icons.icons :as icons]
             [quo2.components.markdown.text :as text]))
 

src/quo2/components/tabs/tabs.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.tabs.tabs
   (:require [oops.core :refer [oget]]
-            [react-native.core :as rn]
+            [quo.react-native :as rn]
             [quo2.components.tabs.tab :as tab]
             [reagent.core :as reagent]
             [status-im.ui.components.react :as react]
@@ -16,7 +16,7 @@
     (fn [{:keys [data size] :or {size default-tab-size}}]
       [rn/view (merge {:flex-direction :row} style)
        (doall
-        (for [{:keys [label id new-info accessibility-label]} data]
+        (for [{:keys [label id new-info]} data]
           ^{:key id}
           [rn/view {:style {:margin-right (if (= size default-tab-size) 12 8)}}
            (when new-info
@@ -32,14 +32,13 @@
                        :background-color (colors/theme-colors colors/neutral-5 colors/neutral-95)}
               [notification-dot]])
            [tab/tab
-            {:id                  id
-             :size                size
-             :accessibility-label accessibility-label
-             :active              (= id @active-tab-id)
-             :on-press            (fn []
-                                    (reset! active-tab-id id)
-                                    (when on-change
-                                      (on-change id)))}
+            {:id       id
+             :size     size
+             :active   (= id @active-tab-id)
+             :on-press (fn []
+                         (reset! active-tab-id id)
+                         (when on-change
+                           (on-change id)))}
             label]]))])))
 
 (defn- calculate-fade-end-percentage

src/quo2/components/tags/base_tag.cljs

@@ -1,5 +1,6 @@
 (ns quo2.components.tags.base-tag
-  (:require [react-native.core :as rn]))
+  (:require
+   [quo.react-native :as rn]))
 
 (defn style-container [size disabled border-color border-width background-color label type]
   (merge {:height             size

src/quo2/components/tags/context_tags.cljs

@@ -1,9 +1,9 @@
 (ns quo2.components.tags.context-tags
   (:require [quo2.foundations.colors :as colors]
-            [quo2.theme :as quo2.theme]
+            [quo.theme :as quo.theme]
             [quo2.components.markdown.text :as text]
             [quo2.components.avatars.group-avatar :as group-avatar]
-            [react-native.core :as rn]))
+            [quo.react-native :as rn]))
 
 (defn padding-left-for-type [type]
   (case type
@@ -15,7 +15,7 @@
 
 (defn base-tag [_ _]
   (fn [{:keys [override-theme style]} & children]
-    (let [theme (or override-theme (quo2.theme/get-theme))]
+    (let [theme (or override-theme (quo.theme/get-theme))]
       (into
        [rn/view
         (merge

src/quo2/components/tags/status_tags.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.tags.status-tags
-  (:require [react-native.core :as rn]
-            [quo2.theme :as quo2.theme]
+  (:require [quo.react-native :as rn]
+            [quo.theme :as quo.theme]
             [quo2.components.icon :as icon]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]
@@ -91,5 +91,5 @@
                                   nil)]
       [status-component
        size
-       (or override-theme (quo2.theme/get-theme))
+       (or override-theme (quo.theme/get-theme))
        label])))

src/quo2/components/tags/tag.cljs

@@ -1,7 +1,7 @@
 (ns quo2.components.tags.tag
   (:require [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]
-            [react-native.core :as rn]
+            [quo.theme :as theme]
+            [quo.react-native :as rn]
             [quo2.components.icon :as icons]
             [quo2.components.markdown.text :as text]
             [quo2.components.tags.base-tag :as base-tag]))

src/quo2/components/tags/tags.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.tags.tags
   (:require [reagent.core :as reagent]
-            [react-native.core :as rn]
+            [quo.react-native :as rn]
             [quo2.components.tags.tag :as tag]))
 
 (defn tags [{:keys [default-active on-change]}]
@@ -25,4 +25,5 @@
                                       :main-icons2/placeholder
                                       resource)
                      :on-press      #(do (reset! active-tab-id %)
-                                         (when on-change (on-change %)))})]])]))))
+                                         (when on-change (on-change %)))})
+             tag-label]])]))))

src/quo2/components/tags/token_tag.cljs

@@ -1,9 +1,9 @@
 (ns quo2.components.tags.token-tag
   (:require [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [quo2.theme :as theme]
+            [quo.react-native :as rn]
+            [quo.theme :as theme]
             [quo2.components.markdown.text :as text]
-            [quo2.components.icon :as icons]))
+            [status-im.ui.components.icons.icons :as icons]))
 
 (def themes {:light {:background-color colors/neutral-20}
              :dark {:background-color colors/neutral-80}})
@@ -76,19 +76,23 @@
         :or
         {size :small border-color (colors/custom-color-by-theme :purple 50 60)}}]
 
-    [tag {:size          size
+    [tag {:size size
           :token-img-src token-img-src
-          :border-color  (when is-required border-color)
+          :border-color (when is-required border-color)
           :overlay
           (when (or is-required is-purchasable)
             [rn/view
              {:style (merge icon-container-styles
-                            {:background-color border-color
-                             :border-color     (if (= (theme/get-theme) :dark) colors/neutral-100 colors/white)
-                             :border-width     1
-                             :right            (get-value-from-size size -3.75 -5.75)
-                             :bottom           (get-value-from-size size (- 32 7.75 4) (- 24 7.75 2))})}
-             [icons/icon (if is-required :main-icons2/hold :main-icons2/add)
+                            {:width 15.5
+                             :height 15.5
+                             :background-color border-color
+                             :border-color (if (=  (theme/get-theme) :dark) colors/neutral-100 colors/white)
+                             :border-width 1
+                             :right  (get-value-from-size size -3.75 -5.75)
+                             :bottom (get-value-from-size size (- 32 7.75 4) (- 24 7.75 2)) ; (- height (icon-height/2) spacing)
+                             })}
+             [icons/icon (if is-required :main-icons2/required-checkmark12 :main-icons2/purchasable12)
               {:no-color true
-               :size 12}]])}
+               :width 13.5
+               :height 13.5}]])}
      (str value " " token)]))

src/quo2/components/wallet/lowest_price.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.wallet.lowest-price
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [clojure.string :as string]))
 
 (def centrify {:style {:flex-direction  :row

src/quo2/components/wallet/network_amount.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.wallet.network-amount
   (:require [clojure.string :as string]
-            [react-native.core :as rn]
+            [quo.react-native :as rn]
             [quo2.components.icon :as icon]
             [quo2.components.markdown.text :as text]
             [quo2.foundations.colors :as colors]

src/quo2/components/wallet/network_breakdown.cljs

@@ -1,5 +1,5 @@
 (ns quo2.components.wallet.network-breakdown
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [quo2.foundations.colors :as colors]
             [quo2.components.markdown.text :as text]
             [quo2.components.wallet.network-amount :refer [network-amount]]))

src/quo2/components/wallet/token_overview.cljs

@@ -2,7 +2,7 @@
   (:require
    [quo2.foundations.colors :as colors]
    [status-im.i18n.i18n :as i18n]
-   [react-native.core :as rn]
+   [quo.react-native :as rn]
    [clojure.string :as string]
    [status-im.utils.currency :as currencies]
    [status-im.ui.components.icons.icons :as icons]

src/quo2/foundations/colors.cljs

@@ -1,6 +1,6 @@
 (ns quo2.foundations.colors
   (:require [clojure.string :as string]
-            [quo2.theme :as theme]))
+            [quo.theme :as theme]))
 
 (defn alpha [value opacity]
   (when value

src/quo2/foundations/typography.cljs

@@ -45,5 +45,3 @@
 (def font-bold {:font-family "Inter-Bold"}) ; 700
 
 (def monospace {:font-family "InterStatus-Regular"})
-
-(def code {:font-family "UbuntuMono-Regular"})

src/quo2/gesture.cljs

@@ -1,4 +1,4 @@
-(ns react-native.gesture
+(ns quo2.gesture
   (:require ["react-native-gesture-handler" :refer (GestureDetector Gesture)]
             [reagent.core :as reagent]))
 

src/quo2/reanimated.cljs

@@ -1,4 +1,4 @@
-(ns react-native.reanimated
+(ns quo2.reanimated
   (:require ["react-native" :as rn]
             [reagent.core :as reagent]
             [clojure.string :as string]

src/quo2/screens/avatars/account_avatar.cljs

@@ -1,7 +1,8 @@
 (ns quo2.screens.avatars.account-avatar
   (:require [reagent.core :as reagent]
-            [react-native.core :as rn]
-            [quo2.screens.preview :as preview]
+            [quo.react-native :as rn]
+            [quo.previews.preview :as preview]
+            [quo.design-system.colors :as colors]
             [quo2.components.avatars.account-avatar :as quo2]))
 
 (def descriptor [{:label   "Icon"
@@ -39,7 +40,8 @@
         [quo2/account-avatar @state]]])))
 
 (defn preview-account-avatar []
-  [rn/view {:flex             1}
+  [rn/view {:background-color (:preview-background @colors/theme)
+            :flex             1}
    [rn/flat-list {:flex                      1
                   :keyboardShouldPersistTaps :always
                   :header                    [cool-preview]

src/quo2/screens/avatars/channel_avatar.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.avatars.channel-avatar
   (:require [reagent.core :as reagent]
-            [react-native.core :as rn]
-            [quo2.screens.preview :as preview]
+            [quo.react-native :as rn]
+            [quo.previews.preview :as preview]
             [quo2.foundations.colors :as colors]
             [quo2.components.avatars.channel-avatar :as quo2]))
 

src/quo2/screens/avatars/group_avatar.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.avatars.group-avatar
   (:require [reagent.core :as reagent]
-            [react-native.core :as rn]
-            [quo2.screens.preview :as preview]
+            [quo.react-native :as rn]
+            [quo.previews.preview :as preview]
             [quo2.foundations.colors :as colors]
             [quo2.components.avatars.group-avatar :as quo2]))
 

src/quo2/screens/avatars/icon_avatar.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.avatars.icon-avatar
   (:require [reagent.core :as reagent]
-            [react-native.core :as rn]
-            [quo2.screens.preview :as preview]
+            [quo.react-native :as rn]
+            [quo.previews.preview :as preview]
             [quo2.foundations.colors :as colors]
             [quo2.components.avatars.icon-avatar :as quo2]))
 

src/quo2/screens/avatars/user_avatar.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.avatars.user-avatar
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [quo2.foundations.colors :as colors]
-            [quo2.screens.preview :as preview]
+            [quo.previews.preview :as preview]
             [quo2.components.avatars.user-avatar :as quo2]
             [reagent.core :as reagent]
             [status-im.react-native.resources :as resources]))

src/quo2/screens/avatars/wallet_user_avatar.cljs

@@ -1,6 +1,6 @@
 (ns quo2.screens.avatars.wallet-user-avatar
-  (:require [react-native.core :as rn]
-            [quo2.screens.preview :as preview]
+  (:require [quo.react-native :as rn]
+            [quo.previews.preview :as preview]
             [reagent.core :as reagent]
             [quo2.components.avatars.wallet-user-avatar :as quo2]
             [quo2.foundations.colors :as colors]))

src/quo2/screens/buttons/button.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.buttons.button
   (:require [reagent.core :as reagent]
-            [react-native.core :as rn]
-            [quo2.screens.preview :as preview]
+            [quo.react-native :as rn]
+            [quo.previews.preview :as preview]
             [quo2.foundations.colors :as colors]
             [quo2.components.buttons.button :as quo2]))
 

src/quo2/screens/buttons/dynamic_button.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.buttons.dynamic-button
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [reagent.core :as reagent]
-            [quo2.screens.preview :as preview]
+            [quo.previews.preview :as preview]
             [quo2.foundations.colors :as colors]
             [quo2.components.buttons.dynamic-button :as quo2]))
 

src/quo2/screens/code/snippet.cljs

@@ -1,92 +0,0 @@
-(ns quo2.screens.code.snippet
-  (:require [quo2.screens.preview :as preview]
-            [react-native.core :as rn]
-            [quo2.components.code.snippet :as snippet]
-            [quo2.foundations.colors :as colors]
-            [reagent.core :as reagent]))
-
-(def go-example "func (s *Server) listenAndServe() {
-    cfg := &tls.Config{Certificates: []tls.Certificate{*s.cert}, ServerName: s.hostname, MinVersion: tls.VersionTLS12}
-
-    // in case of restart, we should use the same port as the first start in order not to break existing links
-    listener, err := tls.Listen(\"tcp\", s.getHost(), cfg)
-    if err != nil {
-        s.logger.Error(\"failed to start server, retrying\", zap.Error(err))
-        s.ResetPort()
-        err = s.Start()
-        if err != nil {
-            s.logger.Error(\"server start failed, giving up\", zap.Error(err))
-        }
-        return
-    }
-
-    err = s.SetPort(listener.Addr().(*net.TCPAddr).Port)
-    if err != nil {
-        s.logger.Error(\"failed to set Server.port\", zap.Error(err))
-        return
-    }
-}")
-
-(def clojure-example "(defn request->xhrio-options
-  [{:as   request
-    :keys [on-success on-failure]
-    :or   {on-success      [:http-no-on-success]
-           on-failure      [:http-no-on-failure]}}]
-  ; wrap events in cljs-ajax callback
-  (let [api (new goog.net.XhrIo)]
-    (-> request
-        (assoc
-          :api     api
-          :handler (partial ajax-xhrio-handler
-                            #(dispatch (conj on-success %))
-                            #(dispatch (conj on-failure %))
-                            api))
-        (dissoc :on-success :on-failure :on-request))))")
-
-(def examples {:clojure {:language :clojure
-                         :text     clojure-example}
-               :go      {:language :go
-                         :text     go-example}})
-
-(def descriptor [{:label   "Language:"
-                  :key     :language
-                  :type    :select
-                  :options [{:key   :clojure
-                             :value :clojure}
-                            {:key   :go
-                             :value :go}]}
-                 {:label   "Max lines:"
-                  :key     :max-lines
-                  :type    :text}
-                 {:label "Syntax highlight:"
-                  :key   :syntax
-                  :type  :boolean}])
-
-(defn cool-preview []
-  (let [state (reagent/atom {:language  :clojure
-                             :max-lines ""
-                             :syntax    true})]
-    (fn []
-      (let [language  (if (:syntax @state) (:language @state) :text)
-            text      (-> (:language @state) examples :text)
-            max-lines (as-> (:max-lines @state) max-lines
-                        (js/parseInt max-lines)
-                        (when-not (js/Number.isNaN max-lines)
-                          max-lines))]
-        [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-         [rn/view {:style {:padding-bottom 150}}
-          [preview/customizer state descriptor]
-          [rn/view {:style {:padding-vertical   60
-                            :padding-horizontal 16}}
-           [snippet/snippet {:language      language
-                             :max-lines     max-lines
-                             :on-copy-press #(js/alert %)}
-            text]]]]))))
-
-(defn preview-code-snippet []
-  [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
-            :flex             1}
-   [rn/flat-list {:flex                      1
-                  :keyboardShouldPersistTaps :always
-                  :header                    [cool-preview]
-                  :key-fn                    str}]])

src/quo2/screens/community/community_card_view.cljs

@@ -1,10 +1,11 @@
 (ns quo2.screens.community.community-card-view
-  (:require [react-native.core :as rn]
-            [quo2.screens.preview :as preview]
+  (:require [quo.react-native :as rn]
+            [quo.previews.preview :as preview]
             [reagent.core :as reagent]
             [status-im.constants :as constants]
-            [quo2.foundations.colors :as colors]
             [quo.design-system.colors :as quo.colors]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.community.community-list-view :as community-list-view]
             [quo2.components.community.community-card-view :as community-card-view]
             [status-im.i18n.i18n :as i18n]
             [status-im.react-native.resources :as resources]))
@@ -13,28 +14,27 @@
   {:id             constants/status-community-id
    :name           "Status"
    :description    "Status is a secure messaging app, crypto wallet and web3 browser built with the state of the art technology"
+   :status         :gated
+   :section        :popular
+   :permissions    true
    :cover          (resources/get-image :community-cover)
    :community-icon (resources/get-image :status-logo)
    :color          (rand-nth quo.colors/chat-colors)
-   :tokens         [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}]
+   :tokens         [{:id  1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}]
    :tags           [{:id 1 :tag-label (i18n/label :t/music) :resource (resources/get-image :music)}
                     {:id 2 :tag-label (i18n/label :t/lifestyle) :resource (resources/get-image :lifestyle)}
                     {:id 3 :tag-label (i18n/label :t/podcasts) :resource (resources/get-image :podcasts)}]})
 
-(def descriptor [{:label   "Status:"
-                  :key     :status
+(def descriptor [{:label   "Community views"
+                  :key     :view-style
                   :type    :select
-                  :options [{:key   :gated
-                             :value "Gated"}
-                            {:key   :open
-                             :value "Open"}]}
-                 {:label "Locked:"
-                  :key   :locked?
-                  :type  :boolean}])
+                  :options [{:key   :card-view
+                             :value "Card view"}
+                            {:key   :list-view
+                             :value "List view"}]}])
 
 (defn cool-preview []
-  (let [state (reagent/atom {:status      :gated
-                             :locked?     true})]
+  (let [state (reagent/atom {:view-style :card-view})]
     (fn []
       [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
        [rn/view {:padding-bottom 150}
@@ -43,8 +43,9 @@
          [preview/customizer state descriptor]]
         [rn/view {:padding-vertical 60
                   :justify-content  :center}
-         [community-card-view/community-card-view-item (merge @state community-data)]]]])))
-
+         (if (= :card-view (:view-style @state))
+           [community-card-view/community-card-view-item community-data]
+           [community-list-view/communities-list-view-item community-data])]]])))
 (defn preview-community-card []
   [rn/view {:background-color (colors/theme-colors colors/neutral-5
                                                    colors/neutral-95)

src/quo2/screens/community/community_list_view.cljs

@@ -1,70 +0,0 @@
-(ns quo2.screens.community.community-list-view
-  (:require [quo.react-native :as rn]
-            [quo.previews.preview :as preview]
-            [reagent.core :as reagent]
-            [status-im.constants :as constants]
-            [quo.design-system.colors :as quo.colors]
-            [quo2.foundations.colors :as colors]
-            [quo2.components.community.community-list-view :as community-list-view]
-            [status-im.i18n.i18n :as i18n]
-            [status-im.react-native.resources :as resources]))
-
-(def community-data
-  {:id             constants/status-community-id
-   :name           "Status"
-   :description    "Status is a secure messaging app, crypto wallet and web3 browser built with the state of the art technology"
-   :cover          (resources/get-image :community-cover)
-   :community-icon (resources/get-image :status-logo)
-   :color          (rand-nth quo.colors/chat-colors)
-   :tokens         [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}]
-   :tags           [{:id 1 :tag-label (i18n/label :t/music) :resource (resources/get-image :music)}
-                    {:id 2 :tag-label (i18n/label :t/lifestyle) :resource (resources/get-image :lifestyle)}
-                    {:id 3 :tag-label (i18n/label :t/podcasts) :resource (resources/get-image :podcasts)}]})
-
-(def descriptor [{:label   "Notifications:"
-                  :key     :notifications
-                  :type    :select
-                  :options [{:key   :muted
-                             :value "Muted"}
-                            {:key   :unread-mentions-count
-                             :value "Mention counts"}
-                            {:key   :unread-messages-count
-                             :value "Unread messages"}]}
-                 {:label   "Status:"
-                  :key     :status
-                  :type    :select
-                  :options [{:key   :gated
-                             :value "Gated"}
-                            {:key   :open
-                             :value "Open"}]}
-                 {:label   "Locked:"
-                  :key     :locked?
-                  :type    :boolean}])
-
-(defn cool-preview []
-  (let [notifications  (reagent/atom  (:notifications nil))
-        state          (reagent/atom {:locked?       true
-                                      :notifications nil
-                                      :status        (if notifications
-                                                       :gated
-                                                       :open)})]
-    (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [rn/view {:flex 1
-                  :padding       16}
-         [preview/customizer state descriptor]]
-        [rn/view {:padding-vertical 60
-                  :justify-content  :center}
-         [community-list-view/communities-list-view-item (merge @state
-                                                                community-data)]]]])))
-
-(defn preview-community-list-view []
-  [rn/view {:background-color (colors/theme-colors colors/neutral-5
-                                                   colors/neutral-95)
-            :flex             1}
-   [rn/flat-list {:flex                      1
-                  :keyboardShouldPersistTaps :always
-                  :header                    [cool-preview]
-                  :key-fn                    str}]])
-

src/quo2/screens/community/discover_card.cljs

@@ -1,34 +0,0 @@
-(ns quo2.screens.community.discover-card
-  (:require [quo.react-native :as rn]
-            [quo.previews.preview :as preview]
-            [reagent.core :as reagent]
-            [status-im.i18n.i18n :as i18n]
-            [quo2.foundations.colors :as colors]
-            [quo2.components.community.discover-card :as discover-card]))
-
-(def descriptor [{:label "Joined:"
-                  :key   :joined?
-                  :type  :boolean}])
-
-(defn cool-preview []
-  (let [state (reagent/atom {:joined? :false})]
-    (fn []
-      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-       [rn/view {:padding-bottom 150}
-        [rn/view {:flex 1
-                  :padding       16}
-         [preview/customizer state descriptor]]
-        [rn/view {:padding-vertical 60
-                  :justify-content  :center}
-         [discover-card/discover-card {:joined?      (:joined? @state)
-                                       :title       (i18n/label :t/discover)
-                                       :description (i18n/label :t/whats-trending)}]]]])))
-
-(defn preview-discoverd-card []
-  [rn/view {:background-color (colors/theme-colors colors/neutral-5
-                                                   colors/neutral-95)
-            :flex             1}
-   [rn/flat-list {:flex                      1
-                  :keyboardShouldPersistTaps :always
-                  :header                    [cool-preview]
-                  :key-fn                    str}]])

src/quo2/screens/counter/counter.cljs

@@ -1,6 +1,6 @@
 (ns quo2.screens.counter.counter
-  (:require [react-native.core :as rn]
-            [quo2.screens.preview :as preview]
+  (:require [quo.react-native :as rn]
+            [quo.previews.preview :as preview]
             [reagent.core :as reagent]
             [quo2.components.counter.counter :as quo2]
             [quo2.foundations.colors :as colors]))

src/quo2/screens/dividers/divider_label.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.dividers.divider-label
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [reagent.core :as reagent]
-            [quo2.screens.preview :as preview]
+            [quo.previews.preview :as preview]
             [quo2.foundations.colors :as colors]
             [quo2.components.dividers.divider-label :as divider-label]))
 

src/quo2/screens/dividers/new_messages.cljs

@@ -1,10 +1,9 @@
 (ns quo2.screens.dividers.new-messages
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [reagent.core :as reagent]
-            [quo2.screens.preview :as preview]
+            [quo.previews.preview :as preview]
             [quo2.foundations.colors :as colors]
-            [quo2.components.dividers.new-messages :as new-messages]
-            [status-im.i18n.i18n :as i18n]))
+            [quo2.components.dividers.new-messages :as new-messages]))
 
 (def descriptor [{:label   "Label"
                   :key     :label
@@ -37,7 +36,7 @@
                             {:key   :beige
                              :value "Beige"}]}])
 (defn cool-preview []
-  (let [state     (reagent/atom {:label (i18n/label :new-messages-header)
+  (let [state     (reagent/atom {:label "New messages"
                                  :color :primary})]
     (fn []
       [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}

src/quo2/screens/drawers/action_drawers.cljs

@@ -1,6 +1,6 @@
 (ns quo2.screens.drawers.action-drawers
-  (:require [quo2.screens.preview :as preview]
-            [react-native.core :as rn]
+  (:require [quo.previews.preview :as preview]
+            [quo.react-native :as rn]
             [quo2.components.drawers.action-drawers :as quo2]
             [quo2.components.buttons.button :as button]
             [quo2.foundations.colors :as colors]

src/quo2/screens/dropdowns/dropdown.cljs

@@ -1,6 +1,7 @@
 (ns quo2.screens.dropdowns.dropdown
-  (:require [react-native.core :as rn]
-            [quo2.screens.preview :as preview]
+  (:require [quo.components.text :as text]
+            [quo.previews.preview :as preview]
+            [quo.react-native :as rn]
             [quo2.components.dropdowns.dropdown :as quo2]
             [quo2.foundations.colors :as colors]
             [reagent.core :as reagent]))
@@ -63,7 +64,7 @@
         [preview/customizer state descriptor]
         [rn/view {:padding-vertical 60
                   :align-items      :center}
-         [rn/text (str "Selected item: " @selected-item)]
+         [text/text {:color :main} (str "Selected item: " @selected-item)]
          [quo2/dropdown (merge @state {:on-select on-select
                                        :items     items})]]]])))
 

src/quo2/screens/info/info_message.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.info.info-message
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [reagent.core :as reagent]
-            [quo2.screens.preview :as preview]
+            [quo.previews.preview :as preview]
             [quo2.foundations.colors :as colors]
             [quo2.components.info.info-message :as quo2]))
 

src/quo2/screens/info/information_box.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.info.information-box
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [reagent.core :as reagent]
-            [quo2.screens.preview :as preview]
+            [quo.previews.preview :as preview]
             [quo2.foundations.colors :as colors]
             [quo2.components.info.information-box :as quo2]))
 

src/quo2/screens/list_items/channel.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.list-items.channel
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [reagent.core :as reagent]
-            [quo2.screens.preview :as preview]
+            [quo.previews.preview :as preview]
             [quo2.foundations.colors :as colors]
             [quo2.components.list-items.channel :as quo2-channel]))
 

src/quo2/screens/list_items/preview_lists.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.list-items.preview-lists
-  (:require [react-native.core :as rn]
+  (:require [quo.react-native :as rn]
             [reagent.core :as reagent]
-            [quo2.screens.preview :as preview]
+            [quo.previews.preview :as preview]
             [quo2.foundations.colors :as colors]
             [status-im.react-native.resources :as resources]
             [quo2.components.list-items.preview-list :as quo2]))

src/quo2/screens/main.cljs

@@ -1,8 +1,10 @@
 (ns quo2.screens.main
-  (:require [react-native.core :as rn]
-            [react-native.safe-area :as safe-area]
+  (:require [quo.components.safe-area :as safe-area]
+            [quo.core :as quo]
+            [quo.design-system.colors :as quo.colors]
             [quo2.foundations.colors :as colors]
-            [quo2.theme :as theme]
+            [quo.react-native :as rn]
+            [quo.theme :as theme]
             [quo2.components.markdown.text :as quo2-text]
             [quo2.components.buttons.button :as quo2-button]
             [quo2.screens.avatars.channel-avatar :as channel-avatar]
@@ -12,11 +14,8 @@
             [quo2.screens.avatars.wallet-user-avatar :as wallet-user-avatar]
             [quo2.screens.buttons.button :as button]
             [quo2.screens.buttons.dynamic-button :as dynamic-button]
-            [quo2.screens.code.snippet :as code-snippet]
             [quo2.screens.counter.counter :as counter]
             [quo2.screens.community.community-card-view :as community-card]
-            [quo2.screens.community.discover-card :as discover-card]
-            [quo2.screens.community.community-list-view :as community-list-view]
             [quo2.screens.dividers.divider-label :as divider-label]
             [quo2.screens.dividers.new-messages :as new-messages]
             [quo2.screens.drawers.action-drawers :as drawers]
@@ -77,18 +76,9 @@
              {:name      :dynamic-button
               :insets    {:top false}
               :component dynamic-button/preview-dynamic-button}]
-   :code [{:name         :snippet
-           :insets       {:top false}
-           :component    code-snippet/preview-code-snippet}]
-   :community [{:name      :community-card-view
+   :community [{:name      :community-cards
                 :insets    {:top false}
-                :component community-card/preview-community-card}
-               {:name      :community-list-view
-                :insets    {:top false}
-                :component community-list-view/preview-community-list-view}
-               {:name      :discover-card
-                :insets    {:top false}
-                :component discover-card/preview-discoverd-card}]
+                :component community-card/preview-community-card}]
    :counter [{:name      :counter
               :insets    {:top false}
               :component counter/preview-counter}]
@@ -193,9 +183,26 @@
 
 (defn theme-switcher []
   [rn/view {:style {:flex-direction   :row
-                    :margin-vertical  8}}
-   [quo2-button/button {:on-press #(theme/set-theme :light)} "Set light theme"]
-   [quo2-button/button {:on-press #(theme/set-theme :dark)} "Set dark theme"]])
+                    :margin-vertical  8
+                    :border-radius    4
+                    :background-color (:ui-01 @quo.colors/theme)
+                    :border-width     1
+                    :border-color     (:ui-02 @quo.colors/theme)}}
+   [rn/touchable-opacity {:style    {:padding         8
+                                     :flex            1
+                                     :justify-content :center
+                                     :align-items     :center}
+                          :on-press #(theme/set-theme :light)}
+    [quo/text "Set light theme"]]
+   [rn/view {:width            1
+             :margin-vertical  4
+             :background-color (:ui-02 @quo.colors/theme)}]
+   [rn/touchable-opacity {:style    {:padding         8
+                                     :flex            1
+                                     :justify-content :center
+                                     :align-items     :center}
+                          :on-press #(theme/set-theme :dark)}
+    [quo/text "Set dark theme"]]])
 
 (defn main-screen []
   (fn []

src/quo2/screens/markdown/text.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.markdown.text
   (:require [quo2.foundations.colors :as colors]
-            [quo2.screens.preview :as preview]
-            [react-native.core :as rn]
+            [quo.previews.preview :as preview]
+            [quo.react-native :as rn]
             [quo2.components.markdown.text :as quo2]
             [reagent.core :as reagent]))
 

src/quo2/screens/messages/gap.cljs

@@ -1,7 +1,7 @@
 (ns quo2.screens.messages.gap
   (:require
-   [quo2.screens.preview :as preview]
-   [react-native.core :as rn]
+   [quo.previews.preview :as preview]
+   [quo.react-native :as rn]
    [quo2.components.messages.gap :as gap]
    [reagent.core :as reagent]))