fix

For an unknown reason the original Diawi plugin for Fastlane has been
removed from GitHub and RubyGems pages and can no longer be used.

This replaces it with a Node.js script which does the same job.

I tried using `diawi` and `diawi-nodejs-uploader` but both had issues,
one of them being depending on far too many useless packages.

Resolves: https://github.com/status-im/status-mobile/issues/15951

Signed-off-by: Jakub Sokołowski <jakub@status.im>

.github/github-bot.yml

@@ -5,7 +5,6 @@ project-board:
   min-reviewers: 1
   tested-pr-label-name: 'Tested - Issues'
   contributor-column-name: 'CONTRIBUTOR'
-  to-rebase-column-name: 'TO REBASE'
   review-column-name: 'REVIEW'
   test-column-name: 'E2E Tests'
 

Makefile

@@ -218,23 +218,18 @@ release-android: keystore build-android ##@build Build signed Android APK
 
 release-ios: export TARGET := ios
 release-ios: export BUILD_ENV ?= prod
-release-ios: watchman-clean ##@build Build release for iOS release
-	@git clean -dxf -f target/ios && \
-	$(MAKE) jsbundle-ios && \
-	xcodebuild -workspace ios/StatusIm.xcworkspace -scheme StatusIm -configuration Release -destination 'generic/platform=iOS' -UseModernBuildSystem=N clean archive
+release-ios: watchman-clean ios-clean jsbundle ##@build Build release for iOS release
+	xcodebuild \
+		-scheme StatusIm \
+		-configuration Release \
+		-workspace ios/StatusIm.xcworkspace \
+		-destination 'generic/platform=iOS' \
+		-UseModernBuildSystem=N clean archive
 
-jsbundle-android: SHELL := /bin/sh
-jsbundle-android: export TARGET := android
-jsbundle-android: export BUILD_ENV ?= prod
-jsbundle-android: ##@jsbundle Compile JavaScript and Clojurescript into app directory
-	# Call nix-build to build the 'targets.mobile.android.jsbundle' attribute and copy the.js files to the project root
-	nix/scripts/build.sh targets.mobile.android.jsbundle && \
-	mv result/*.js ./
-
-jsbundle-ios: export TARGET := ios
-jsbundle-ios: export BUILD_ENV ?= prod
-jsbundle-ios: ##@jsbundle Compile JavaScript and Clojure into index.ios.js
-	yarn shadow-cljs release mobile
+jsbundle: SHELL := /bin/sh
+jsbundle: export BUILD_ENV ?= prod
+jsbundle: ##@build Build JavaScript and Clojurescript bundle for iOS and Android
+	nix/scripts/build.sh targets.mobile.jsbundle
 
 #--------------
 # status-go lib
@@ -365,6 +360,7 @@ component-test: ##@test Run component tests once in NodeJS
 	yarn shadow-cljs compile component-test && \
 	jest --config=test/jest/jest.config.js
 
+#--------------
 # Other
 #--------------
 
@@ -373,6 +369,10 @@ geth-connect: ##@other Connect to Geth on the device
 	adb forward tcp:8545 tcp:8545 && \
 	build/bin/geth attach http://localhost:8545
 
+ios-clean: SHELL := /bin/sh
+ios-clean: ##@prepare Clean iOS build artifacts
+	git clean -dxf -f target/ios
+
 android-clean: export TARGET := gradle
 android-clean: ##@prepare Clean Gradle state
 	git clean -dxf -f ./android/app/build; \

ci/Jenkinsfile.android

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.7.5'
+library 'status-jenkins-lib@v1.7.9'
 
 /* Options section can't access functions in objects. */
 def isPRBuild = utils.isPRBuild()
@@ -49,7 +49,6 @@ pipeline {
     stage('Prep') {
       steps {
         script {
-          utils.doGitRebasePR()
           utils.symlinkEnv()
           println("Build Number: ${utils.genBuildNumber()}")
         }

ci/Jenkinsfile.combined

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.7.5'
+library 'status-jenkins-lib@v1.7.9'
 
 pipeline {
   agent { label 'linux' }

ci/Jenkinsfile.ios

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.7.5'
+library 'status-jenkins-lib@v1.7.9'
 
 /* Options section can't access functions in objects. */
 def isPRBuild = utils.isPRBuild()
@@ -48,7 +48,6 @@ pipeline {
     stage('Prep') {
       steps {
         script {
-          utils.doGitRebasePR()
           utils.symlinkEnv()
           println("Build Number: ${utils.genBuildNumber()}")
         }

ci/Jenkinsfile.nix-cache

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.7.5'
+library 'status-jenkins-lib@v1.7.9'
 
 pipeline {
   agent { label params.AGENT_LABEL }

ci/Jenkinsfile.tests

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.7.5'
+library 'status-jenkins-lib@v1.7.9'
 
 /* Options section can't access functions in objects. */
 def isPRBuild = utils.isPRBuild()
@@ -41,13 +41,6 @@ pipeline {
   }
 
   stages {
-    stage('Prep') {
-      steps {
-        script {
-          utils.doGitRebasePR()
-        }
-      }
-    }
     stage('Checks') {
       parallel {
         stage('Lint') {

ci/tests/Jenkinsfile.e2e-nightly

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.7.5'
+library 'status-jenkins-lib@v1.7.9'
 
 pipeline {
 

ci/tests/Jenkinsfile.e2e-prs

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.7.5'
+library 'status-jenkins-lib@v1.7.9'
 
 pipeline {
 

ci/tests/Jenkinsfile.e2e-upgrade

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.7.5'
+library 'status-jenkins-lib@v1.7.9'
 
 pipeline {
 

ci/tools/Jenkinsfile.fastlane-clean

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.7.5'
+library 'status-jenkins-lib@v1.7.9'
 
 pipeline {
   agent { label 'macos' }

ci/tools/Jenkinsfile.playstore-meta

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.7.5'
+library 'status-jenkins-lib@v1.7.9'
 
 pipeline {
   agent { label 'linux' }

ci/tools/Jenkinsfile.xcode-clean

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.7.5'
+library 'status-jenkins-lib@v1.7.9'
 
 pipeline {
   agent {

fastlane/Fastfile

@@ -182,17 +182,6 @@ def build_ios_e2e
   )
 end
 
-def upload_to_diawi(source)
-  diawi(
-    file: source,
-    timeout: 120,
-    check_status_delay: 5,
-    token: ENV['DIAWI_TOKEN']
-  )
-  # save the URL to a file for use in CI
-  File.write('diawi.out', lane_context[SharedValues::UPLOADED_FILE_LINK_TO_DIAWI])
-end
-
 platform :ios do
   desc '`fastlane ios adhoc` - ad-hoc lane for iOS.'
   desc 'This lane is used for PRs, Releases, etc.'
@@ -265,18 +254,6 @@ platform :ios do
     # In the future we can try using 'oldest_build_allowed'
   end
 
-  desc '`fastlane ios upload-diawi` - upload .ipa to diawi'
-  desc 'expects to have an .ipa prepared: `status-ios/StatusIm.ipa`'
-  desc 'expects to have a diawi token as DIAWI_TOKEN env variable'
-  desc 'expects to have a github token as GITHUB_TOKEN env variable'
-  desc "will fails if file isn't there"
-  desc '---'
-  desc 'Output: writes `fastlane/diawi.out` file url of the uploded file'
-  lane :upload_diawi do
-    ipa = ENV['DIAWI_IPA'] || 'status-ios/StatusIm.ipa'
-    upload_to_diawi(ipa)
-  end
-
   desc '`fastlane ios saucelabs` - upload .app to sauce labs'
   desc 'also notifies in a GitHub comments'
   desc 'expects to have an .apk prepared: `result/app.apk`'

fastlane/Gemfile.lock

@@ -3,21 +3,21 @@ GEM
   specs:
     CFPropertyList (3.0.6)
       rexml
-    addressable (2.8.1)
+    addressable (2.8.4)
       public_suffix (>= 2.0.2, < 6.0)
     artifactory (3.0.15)
     atomos (0.1.3)
     aws-eventstream (1.2.0)
-    aws-partitions (1.728.0)
-    aws-sdk-core (3.170.0)
+    aws-partitions (1.766.0)
+    aws-sdk-core (3.173.0)
       aws-eventstream (~> 1, >= 1.0.2)
       aws-partitions (~> 1, >= 1.651.0)
       aws-sigv4 (~> 1.5)
       jmespath (~> 1, >= 1.6.1)
-    aws-sdk-kms (1.63.0)
+    aws-sdk-kms (1.64.0)
       aws-sdk-core (~> 3, >= 3.165.0)
       aws-sigv4 (~> 1.1)
-    aws-sdk-s3 (1.119.1)
+    aws-sdk-s3 (1.122.0)
       aws-sdk-core (~> 3, >= 3.165.0)
       aws-sdk-kms (~> 1)
       aws-sigv4 (~> 1.4)
@@ -66,7 +66,7 @@ GEM
     faraday_middleware (1.2.0)
       faraday (~> 1.0)
     fastimage (2.2.6)
-    fastlane (2.212.1)
+    fastlane (2.212.2)
       CFPropertyList (>= 2.3, < 4.0.0)
       addressable (>= 2.8, < 3.0.0)
       artifactory (~> 3.0)
@@ -106,10 +106,8 @@ GEM
       xcpretty (~> 0.3.0)
       xcpretty-travis-formatter (>= 0.0.3)
     fastlane-plugin-clean_testflight_testers (0.3.0)
-    fastlane-plugin-diawi (2.1.0)
-      rest-client (>= 2.0.0)
     gh_inspector (1.1.3)
-    google-apis-androidpublisher_v3 (0.36.0)
+    google-apis-androidpublisher_v3 (0.42.0)
       google-apis-core (>= 0.11.0, < 2.a)
     google-apis-core (0.11.0)
       addressable (~> 2.5, >= 2.5.1)
@@ -140,7 +138,7 @@ GEM
       google-cloud-core (~> 1.6)
       googleauth (>= 0.16.2, < 2.a)
       mini_mime (~> 1.0)
-    googleauth (1.3.0)
+    googleauth (1.5.2)
       faraday (>= 0.17.3, < 3.a)
       jwt (>= 1.4, < 3.0)
       memoist (~> 0.16)
@@ -148,7 +146,6 @@ GEM
       os (>= 0.9, < 2.0)
       signet (>= 0.16, < 2.a)
     highline (2.0.3)
-    http-accept (1.7.0)
     http-cookie (1.0.5)
       domain_name (~> 0.5)
     httpclient (2.8.3)
@@ -156,16 +153,12 @@ GEM
     json (2.6.3)
     jwt (2.7.0)
     memoist (0.16.2)
-    mime-types (3.4.1)
-      mime-types-data (~> 3.2015)
-    mime-types-data (3.2023.0218.1)
     mini_magick (4.12.0)
     mini_mime (1.1.2)
     multi_json (1.15.0)
     multipart-post (2.0.0)
     nanaimo (0.3.0)
     naturally (2.2.1)
-    netrc (0.11.0)
     optparse (0.1.1)
     os (1.1.4)
     plist (3.7.0)
@@ -175,11 +168,6 @@ GEM
       declarative (< 0.1.0)
       trailblazer-option (>= 0.1.1, < 0.2.0)
       uber (< 0.2.0)
-    rest-client (2.1.0)
-      http-accept (>= 1.7.0, < 2.0)
-      http-cookie (>= 1.0.2, < 2.0)
-      mime-types (>= 1.16, < 4.0)
-      netrc (~> 0.8)
     retriable (3.1.2)
     rexml (3.2.5)
     rouge (2.0.7)
@@ -227,7 +215,6 @@ PLATFORMS
 DEPENDENCIES
   fastlane (>= 2.131.0)
   fastlane-plugin-clean_testflight_testers
-  fastlane-plugin-diawi
 
 BUNDLED WITH
-   2.4.6
+   2.3.9

fastlane/Pluginfile

@@ -3,4 +3,3 @@
 # Ensure this file is checked in to source control!
 
 gem 'fastlane-plugin-clean_testflight_testers'
-gem 'fastlane-plugin-diawi'

fastlane/gemset.nix

@@ -5,10 +5,10 @@
     platforms = [];
     source = {
       remotes = ["https://rubygems.org"];
-      sha256 = "1ypdmpdn20hxp5vwxz3zc04r5xcwqc25qszdlg41h8ghdqbllwmw";
+      sha256 = "15s8van7r2ad3dq6i03l3z4hqnvxcq75a3h72kxvf9an53sqma20";
       type = "gem";
     };
-    version = "2.8.1";
+    version = "2.8.4";
   };
   artifactory = {
     groups = ["default"];
@@ -45,10 +45,10 @@
     platforms = [];
     source = {
       remotes = ["https://rubygems.org"];
-      sha256 = "0q3q19insq5ablmr6ypq033qg1gsar5mdphhp7xg80rd615cnq97";
+      sha256 = "0x7v4v8hj0pbzw3x1iv07x8v93fcs74svlhzv7vl6laxm4mc6858";
       type = "gem";
     };
-    version = "1.728.0";
+    version = "1.766.0";
   };
   aws-sdk-core = {
     dependencies = ["aws-eventstream" "aws-partitions" "aws-sigv4" "jmespath"];
@@ -56,10 +56,10 @@
     platforms = [];
     source = {
       remotes = ["https://rubygems.org"];
-      sha256 = "0zc4zhv2wq7s5p8c9iaplama1lpg2kwldg81j83c8w4xydf1wd2r";
+      sha256 = "10djgbz4k9w3axka8xrhf97h9yh9svi5g5xvncfwnkg6h22w2177";
       type = "gem";
     };
-    version = "3.170.0";
+    version = "3.173.0";
   };
   aws-sdk-kms = {
     dependencies = ["aws-sdk-core" "aws-sigv4"];
@@ -67,10 +67,10 @@
     platforms = [];
     source = {
       remotes = ["https://rubygems.org"];
-      sha256 = "0v87zi28dfmrv7bv91yfldccnpd63n295siirbz7wqv1rajn8n02";
+      sha256 = "1bcm0c9f7xy5qj5f0z3gddqslhb2vzrj9smc39pgqyq4jmn5kpj0";
       type = "gem";
     };
-    version = "1.63.0";
+    version = "1.64.0";
   };
   aws-sdk-s3 = {
     dependencies = ["aws-sdk-core" "aws-sdk-kms" "aws-sigv4"];
@@ -78,10 +78,10 @@
     platforms = [];
     source = {
       remotes = ["https://rubygems.org"];
-      sha256 = "1rpnlzsl52znhcki13jkwdshgwf51pn26267481f4fa842gr7xgp";
+      sha256 = "01cryf8kfkmlsxb327szcwcagsp7lss5gmk6zxlgap65lv8bc7rx";
       type = "gem";
     };
-    version = "1.119.1";
+    version = "1.122.0";
   };
   aws-sigv4 = {
     dependencies = ["aws-eventstream"];
@@ -368,10 +368,10 @@
     platforms = [];
     source = {
       remotes = ["https://rubygems.org"];
-      sha256 = "0b22m2dkydyv2si55b1jzznzgxf2ycx2aarv1j5p25k861h2gsml";
+      sha256 = "15sa3v3aaslympg9nmadmpxpbzykdiybzxn3navc7mf0iscb3q7s";
       type = "gem";
     };
-    version = "2.212.1";
+    version = "2.212.2";
   };
   fastlane-plugin-clean_testflight_testers = {
     groups = ["default"];
@@ -383,17 +383,6 @@
     };
     version = "0.3.0";
   };
-  fastlane-plugin-diawi = {
-    dependencies = ["rest-client"];
-    groups = ["default"];
-    platforms = [];
-    source = {
-      remotes = ["https://rubygems.org"];
-      sha256 = "1sjznx9hwlfa7ndv7av870dvl0cvmh68yk381r55ylw4jjvk5mwl";
-      type = "gem";
-    };
-    version = "2.1.0";
-  };
   gh_inspector = {
     groups = ["default"];
     platforms = [];
@@ -410,10 +399,10 @@
     platforms = [];
     source = {
       remotes = ["https://rubygems.org"];
-      sha256 = "1mbnmn36z1cnsd6ar76p9wvqi0ac6wlpm1p1lqczivain16qma76";
+      sha256 = "0ks2ak4fcvlflhyinykvd88g2ybxwsbc347aww349zhn1mqprbvg";
       type = "gem";
     };
-    version = "0.36.0";
+    version = "0.42.0";
   };
   google-apis-core = {
     dependencies = ["addressable" "googleauth" "httpclient" "mini_mime" "representable" "retriable" "rexml" "webrick"];
@@ -508,10 +497,10 @@
     platforms = [];
     source = {
       remotes = ["https://rubygems.org"];
-      sha256 = "1hpwgwhk0lmnknkw8kbdfxn95qqs6aagpq815l5fkw9w6mi77pai";
+      sha256 = "1lj5haarpn7rybbq9s031zcn9ji3rlz5bk64bwa2j34q5s1h5gis";
       type = "gem";
     };
-    version = "1.3.0";
+    version = "1.5.2";
   };
   highline = {
     groups = ["default"];
@@ -523,16 +512,6 @@
     };
     version = "2.0.3";
   };
-  http-accept = {
-    groups = ["default"];
-    platforms = [];
-    source = {
-      remotes = ["https://rubygems.org"];
-      sha256 = "09m1facypsdjynfwrcv19xcb1mqg8z6kk31g8r33pfxzh838c9n6";
-      type = "gem";
-    };
-    version = "1.7.0";
-  };
   http-cookie = {
     dependencies = ["domain_name"];
     groups = ["default"];
@@ -594,27 +573,6 @@
     };
     version = "0.16.2";
   };
-  mime-types = {
-    dependencies = ["mime-types-data"];
-    groups = ["default"];
-    platforms = [];
-    source = {
-      remotes = ["https://rubygems.org"];
-      sha256 = "0ipw892jbksbxxcrlx9g5ljq60qx47pm24ywgfbyjskbcl78pkvb";
-      type = "gem";
-    };
-    version = "3.4.1";
-  };
-  mime-types-data = {
-    groups = ["default"];
-    platforms = [];
-    source = {
-      remotes = ["https://rubygems.org"];
-      sha256 = "1pky3vzaxlgm9gw5wlqwwi7wsw3jrglrfflrppvvnsrlaiz043z9";
-      type = "gem";
-    };
-    version = "3.2023.0218.1";
-  };
   mini_magick = {
     groups = ["default"];
     platforms = [];
@@ -675,16 +633,6 @@
     };
     version = "2.2.1";
   };
-  netrc = {
-    groups = ["default"];
-    platforms = [];
-    source = {
-      remotes = ["https://rubygems.org"];
-      sha256 = "0gzfmcywp1da8nzfqsql2zqi648mfnx6qwkig3cv36n9m0yy676y";
-      type = "gem";
-    };
-    version = "0.11.0";
-  };
   optparse = {
     groups = ["default"];
     platforms = [];
@@ -746,17 +694,6 @@
     };
     version = "3.2.0";
   };
-  rest-client = {
-    dependencies = ["http-accept" "http-cookie" "mime-types" "netrc"];
-    groups = ["default"];
-    platforms = [];
-    source = {
-      remotes = ["https://rubygems.org"];
-      sha256 = "1qs74yzl58agzx9dgjhcpgmzfn61fqkk33k1js2y5yhlvc5l19im";
-      type = "gem";
-    };
-    version = "2.1.0";
-  };
   retriable = {
     groups = ["default"];
     platforms = [];

index.js

@@ -1,2 +1,2 @@
 import "node-libs-react-native/globals";
-import "./app/index.js";
+import "./result/index.js";

nix/DETAILS.md

@@ -55,12 +55,12 @@ The [`nix/scripts/shell.sh`](./scripts/shell.sh) script is essentially a wrapper
 
 # Building
 
-We will use the `make jsbundle-android` target as an example of a derivation you can build using Nix:
+We will use the `make jsbundle` target as an example of a derivation you can build using Nix:
 
-1. `make jsbundle-android` is called by developer
-2. `make` calls `nix/scripts/build.sh targets.mobile.android.jsbundle`
-3. [`build.sh`](/nix/scripts/build.sh) calls `nix-build --attr targets.mobile.android.jsbundle` with extra arguments
-4. `nix-build` builds the derivation from [`nix/mobile/android/jsbundle/default.nix`](/nix/mobile/android/jsbundle/default.nix)
+1. `make jsbundle` is called by developer
+2. `make` calls `nix/scripts/build.sh targets.mobile.jsbundle`
+3. [`build.sh`](/nix/scripts/build.sh) calls `nix-build --attr targets.mobile.jsbundle` with extra arguments
+4. `nix-build` builds the derivation from [`nix/mobile/jsbundle/default.nix`](/nix/mobile/jsbundle/default.nix)
 
 The same can be done for other targets like `targets.mobile.android.release`.
 Except in that case extra arguments are required which is why the [`scripts/release-android.sh`](/scripts/release-android.sh) is used in the `make release-android` target.

nix/mobile/android/default.nix

@@ -1,14 +1,10 @@
 { pkgs, deps, callPackage, mkShell
-, status-go, androidPkgs, androidShell }:
+, jsbundle, status-go, androidPkgs, androidShell }:
 
-let
-  # Import a jsbundle compiled out of clojure codebase
-  jsbundle = callPackage ./jsbundle { };
-
-  release = callPackage ./release.nix { inherit jsbundle status-go; };
-in {
-  # TARGETS
-  inherit release jsbundle;
+rec {
+  release = callPackage ./release.nix {
+    inherit jsbundle status-go;
+  };
 
   shell = mkShell {
     buildInputs = with pkgs; [

nix/mobile/android/release.nix

@@ -46,7 +46,7 @@ in stdenv.mkDerivation rec {
       root = path;
       include = [
         "package.json" "yarn.lock" "metro.config.js" "babel.config.js"
-        "resources/.*" "translations/.*" "src/js/.*"
+        "resources/.*" "translations/.*" "src/js/.*" "index.js"
         "modules/react-native-status/android.*" "android/.*"
         envFileName "VERSION" "status-go-version.json" "react-native.config.js"
       ];
@@ -94,8 +94,10 @@ in stdenv.mkDerivation rec {
     # Export all vars from .env file
     export $(cut -d= -f1 .env)
 
-    # Copy index.js and app/ input files
-    cp -ra --no-preserve=ownership ${builtJsBundle}/* ./
+    # Symlink React Native entrypoint.
+    cp -Lr ${builtJsBundle} ./result
+    pwd
+    find -L result
 
     # Copy android/ directory
     mkdir -p ./android/build

nix/mobile/default.nix

@@ -3,7 +3,10 @@
 let
   fastlane = callPackage ./fastlane { };
 
+  jsbundle = callPackage ./jsbundle { };
+
   android = callPackage ./android {
+    inherit jsbundle;
     status-go = status-go.mobile.android;
   };
 
@@ -26,5 +29,5 @@ in {
   };
 
   # TARGETS
-  inherit android ios fastlane;
+  inherit android ios fastlane jsbundle;
 }

nix/mobile/jsbundle/default.nix

@@ -8,9 +8,9 @@
 { secretsFile ? "" }:
 
 stdenv.mkDerivation {
-  name = "status-mobile-build-jsbundle-android";
+  name = "status-mobile-jsbundle";
   src =
-    let path = ./../../../..;
+    let path = ./../../..;
     # We use builtins.path so that we can name the resulting derivation,
     # otherwise the name would be taken from the checkout directory,
     # which is outside of our control inherit path;
@@ -25,7 +25,7 @@ stdenv.mkDerivation {
           ignoreVCS = false;
           include = [ 
             "VERSION" "BUILD_NUMBER" "scripts/version/.*"
-            "src/.*" "shadow-cljs.edn" "index.js"
+            "src/.*" "shadow-cljs.edn"
             # I want to avoid including the whole .git directory
             ".git/HEAD" ".git/objects" ".git/refs/heads/.*"
             # shadow-cljs expects these for deps resolution
@@ -77,6 +77,6 @@ stdenv.mkDerivation {
   '';
   installPhase = ''
     mkdir -p $out
-    cp -r index.js app $out/
+    cp -r result/* $out/
   '';
 }

package.json

@@ -19,7 +19,7 @@
     "@react-native-community/blur": "git+https://github.com/status-im/react-native-blur#refs/tags/v4.3.3-status",
     "@react-native-community/cameraroll": "git+https://github.com/status-im/react-native-cameraroll.git#refs/tags/v4.0.4-status.0",
     "@react-native-community/clipboard": "^1.2.2",
-    "@react-native-community/hooks": "^2.5.1",
+    "@react-native-community/hooks": "^3.0.0",
     "@react-native-community/masked-view": "^0.1.6",
     "@react-native-community/netinfo": "^4.4.0",
     "@react-native-community/push-notification-ios": "^1.4.1",

scripts/diawi-upload.mjs

@@ -0,0 +1,119 @@
+#!/usr/bin/env node
+
+import https from 'node:https'
+import { basename } from 'node:path'
+import { promisify } from 'node:util'
+import { createReadStream } from 'node:fs'
+
+import log from 'npmlog'
+import FormData from 'form-data'
+
+const UPLOAD_URL = 'https://upload.diawi.com/'
+const STATUS_URL = 'https://upload.diawi.com/status'
+const POLL_MAX_COUNT = 10
+const POLL_INTERVAL_MS = 700
+
+const sleep = (ms) => {
+  return new Promise((resolve, reject) => {
+    setTimeout(resolve, (ms))
+  })
+}
+
+const getRequest = async (url) => {
+  return new Promise((resolve, reject) => {
+    let data = []
+    https.get(url, res => {
+      res.on('error', err => reject(err))
+      res.on('data', chunk => { data.push(chunk) })
+      res.on('end', () => {
+        let payload = Buffer.concat(data).toString()
+        resolve({
+          code: res.statusCode,
+          message: res.statusMessage,
+          payload: payload,
+        })
+      })
+    })
+  })
+}
+
+const uploadIpa = async (ipaPath, comment, token) => {
+  let form = new FormData()
+  form.append('token', token)
+  form.append('file', createReadStream(ipaPath))
+  form.append('comment', comment || basename(ipaPath))
+
+  const formSubmitPromise = promisify(form.submit.bind(form))
+
+  const res = await formSubmitPromise(UPLOAD_URL)
+  if (res.statusCode != 200) {
+    log.error('uploadIpa', 'Upload failed: %d %s', res.statusCode, res.statusMessage)
+    process.exit(1)
+  }
+
+  return new Promise((resolve) => {
+    const jobId = res.on('data', async (data) => {
+      resolve(JSON.parse(data)['job'])
+    })
+  })
+}
+
+const checkStatus = async (jobId, token) => {
+  let params = new URLSearchParams({
+    token: token, job: jobId,
+  })
+  let rval = await getRequest(`${STATUS_URL}?${params.toString()}`)
+  if (rval.code != 200) {
+    log.error('checkStatus', 'Check query failed: %d %s', rval.code, rval.message)
+    process.exit(1)
+  }
+  return JSON.parse(rval.payload)
+}
+
+const pollStatus = async (jobId, token) => {
+  let interval = POLL_INTERVAL_MS
+  for (let i = 0; i <= POLL_MAX_COUNT; i++) {
+    let json = await checkStatus(jobId, token)
+    switch (json.status) {
+      case 2000:
+        return json
+      case 2001:
+        log.verbose('pollStatus', 'Waiting: %s', json.message)
+        break /* Nothing, just poll again. */
+      case 4000000:
+        log.warning('pollStatus', 'Doubling polling interval: %s', json.message)
+        interval *= 2
+        break
+      default:
+        log.error('pollStatus', `Error in status response: ${json.message}`)
+        process.exit(1)
+    }
+    await sleep(interval)
+  }
+}
+
+const main = async () => {
+  const token = process.env.DIAWI_TOKEN
+  const targetFile = process.argv[2]
+  const comment = process.argv[3]
+  log.level = process.env.VERBOSE ? 'verbose' : 'info'
+
+  if (token === undefined) {
+    log.error('main', 'No DIAWI_TOKEN env var provided!')
+    process.exit(1)
+  }
+  if (targetFile === undefined) {
+    log.error('main', 'No file path provided!')
+    process.exit(1)
+  }
+
+  log.info('main', 'Uploading: %s', targetFile)
+  let jobId = await uploadIpa(targetFile, comment, token)
+
+  log.info('main', 'Polling upload job status: %s', jobId)
+  let uploadMeta = await pollStatus(jobId, token)
+
+  console.log(uploadMeta)
+}
+
+main()

shadow-cljs.edn

@@ -37,7 +37,8 @@
  :builds
  {:mobile
   {:target :react-native
-   :output-dir "app"
+   ;; To match the folder created by Nix build of JSBundle.
+   :output-dir "result"
    :init-fn status-im2.core/init
    ;; When false, the Shadow-CLJS watcher won't automatically refresh
    ;; the target files (a.k.a hot reload). When false, you can manually
@@ -53,8 +54,13 @@
                                    ;; @testing-library/react-native.
                                    test-helpers.component]}
          :closure-defines
-         {status-im2.config/POKT_TOKEN      #shadow/env "POKT_TOKEN"
-          status-im2.config/OPENSEA_API_KEY #shadow/env "OPENSEA_API_KEY"}
+         {status-im2.config/POKT_TOKEN                     #shadow/env "POKT_TOKEN"
+          status-im2.config/INFURA_TOKEN                   #shadow/env "INFURA_TOKEN"
+          status-im2.config/OPENSEA_API_KEY                #shadow/env "OPENSEA_API_KEY"
+          status-im2.config/ALCHEMY_ARBITRUM_GOERLI_TOKEN  #shadow/env "ALCHEMY_ARBITRUM_GOERLI_TOKEN"
+          status-im2.config/ALCHEMY_OPTIMISM_GOERLI_TOKEN  #shadow/env "ALCHEMY_OPTIMISM_GOERLI_TOKEN"
+          status-im2.config/ALCHEMY_OPTIMISM_MAINNET_TOKEN #shadow/env "ALCHEMY_OPTIMISM_MAINNET_TOKEN"
+          status-im2.config/ALCHEMY_ARBITRUM_MAINNET_TOKEN #shadow/env "ALCHEMY_ARBITRUM_MAINNET_TOKEN"}
          :compiler-options {:output-feature-set :es5
                             :closure-defines
                             {re-frame.trace/trace-enabled? true}
@@ -67,8 +73,13 @@
    :chunks {:fleets status-im.fleet.default-fleet/default-fleets}
    :release
    {:closure-defines
-    {status-im2.config/POKT_TOKEN      #shadow/env "POKT_TOKEN"
-     status-im2.config/OPENSEA_API_KEY #shadow/env "OPENSEA_API_KEY"}
+    {status-im2.config/POKT_TOKEN                     #shadow/env "POKT_TOKEN"
+     status-im2.config/INFURA_TOKEN                   #shadow/env "INFURA_TOKEN"
+     status-im2.config/OPENSEA_API_KEY                #shadow/env "OPENSEA_API_KEY"
+     status-im2.config/ALCHEMY_ARBITRUM_GOERLI_TOKEN  #shadow/env "ALCHEMY_ARBITRUM_GOERLI_TOKEN"
+     status-im2.config/ALCHEMY_OPTIMISM_GOERLI_TOKEN  #shadow/env "ALCHEMY_OPTIMISM_GOERLI_TOKEN"
+     status-im2.config/ALCHEMY_OPTIMISM_MAINNET_TOKEN #shadow/env "ALCHEMY_OPTIMISM_MAINNET_TOKEN"
+     status-im2.config/ALCHEMY_ARBITRUM_MAINNET_TOKEN #shadow/env "ALCHEMY_ARBITRUM_MAINNET_TOKEN"}
     :compiler-options {:output-feature-set :es6
                        ;;disable for android build as there
                        ;;is an intermittent warning with deftype
@@ -95,8 +106,13 @@
    :ui-driven
    true
    :closure-defines
-   {status-im2.config/POKT_TOKEN      #shadow/env "POKT_TOKEN"
-    status-im2.config/OPENSEA_API_KEY #shadow/env "OPENSEA_API_KEY"}
+   {status-im2.config/POKT_TOKEN                     #shadow/env "POKT_TOKEN"
+    status-im2.config/INFURA_TOKEN                   #shadow/env "INFURA_TOKEN"
+    status-im2.config/OPENSEA_API_KEY                #shadow/env "OPENSEA_API_KEY"
+    status-im2.config/ALCHEMY_ARBITRUM_GOERLI_TOKEN  #shadow/env "ALCHEMY_ARBITRUM_GOERLI_TOKEN"
+    status-im2.config/ALCHEMY_OPTIMISM_GOERLI_TOKEN  #shadow/env "ALCHEMY_OPTIMISM_GOERLI_TOKEN"
+    status-im2.config/ALCHEMY_OPTIMISM_MAINNET_TOKEN #shadow/env "ALCHEMY_OPTIMISM_MAINNET_TOKEN"
+    status-im2.config/ALCHEMY_ARBITRUM_MAINNET_TOKEN #shadow/env "ALCHEMY_ARBITRUM_MAINNET_TOKEN"}
    :compiler-options
    {;; needed because we override require and it
     ;; messes with source-map which reports callstack

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

@@ -57,10 +57,18 @@
 (def initials-avatar-text
   {:color colors/white-opa-70})
 
+(defn inner-dot
+  [size online?]
+  (let [background (if online? colors/success-50 colors/neutral-40)
+        dimensions (get-in sizes [size :status-indicator])]
+    {:width            (- dimensions 4)
+     :height           (- dimensions 4)
+     :border-radius    (- dimensions 4)
+     :background-color background}))
+
 (defn dot
-  [size online? ring?]
-  (let [background   (if online? colors/success-50 colors/neutral-40)
-        dimensions   (get-in sizes [size :status-indicator])
+  [size ring?]
+  (let [dimensions   (get-in sizes [size :status-indicator])
         border-width (get-in sizes [size :status-indicator-border])
         right        (case size
                        :big    2
@@ -73,11 +81,13 @@
                        :small  -2
                        0)]
     {:position         :absolute
+     :justify-content  :center
+     :align-items      :center
      :bottom           bottom
      :right            right
      :width            dimensions
      :height           dimensions
      :border-width     border-width
      :border-radius    dimensions
-     :border-color     (colors/theme-colors colors/white colors/neutral-100)
-     :background-color background}))
+     :background-color (colors/theme-colors colors/white colors/neutral-100)
+     :border-color     (colors/theme-colors colors/white colors/neutral-100)}))

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

@@ -38,18 +38,22 @@
   uses `ring-background` to display the ring behind the initials when given. Otherwise,
   shows the `profile-picture` which already comes with the ring drawn."
   [{:keys [full-name status-indicator? online? size profile-picture ring-background
-           customization-color]
+           customization-color static?]
     :or   {status-indicator?   true
            online?             true
            size                :big
            customization-color :turquoise}}]
   (let [full-name    (or full-name "empty name")
         draw-ring?   (and ring-background (valid-ring-sizes size))
-        outer-styles (style/outer size)]
+        outer-styles (style/outer size)
+        ;; Once image is loaded, fast image rerenders view with the help of reagent atom,
+        ;; But dynamic updates don't work when user-avatar is used inside hole-view
+        ;; https://github.com/status-im/status-mobile/issues/15553
+        image-view   (if static? rn/image fast-image/fast-image)]
     [rn/view {:style outer-styles :accessibility-label :user-avatar}
      ;; The `profile-picture` already has the ring in it
      (when-let [image (or profile-picture ring-background)]
-       [fast-image/fast-image
+       [image-view
         {:accessibility-label (if draw-ring? :ring-background :profile-picture)
          :style               outer-styles
          :source              image}])
@@ -62,4 +66,7 @@
      (when status-indicator?
        [rn/view
         {:accessibility-label :status-indicator
-         :style               (style/dot size online? draw-ring?)}])]))
+         :style               (style/dot size draw-ring?)}
+        [rn/view
+         {:accessibility-label :inner-status-indicator-dot
+          :style               (style/inner-dot size online?)}]])]))

src/quo2/components/buttons/button.cljs

@@ -8,134 +8,142 @@
 
 (defn themes
   [customization-color]
-  {:light {:primary         {:icon-color       colors/white
-                             :label-color      colors/white
-                             :background-color {:default  (colors/custom-color customization-color 50)
-                                                :pressed  (colors/custom-color customization-color 60)
-                                                :disabled (colors/custom-color customization-color 50)}}
-           :secondary       {:icon-color       colors/primary-50
-                             :label-color      colors/primary-50
-                             :background-color {:default  colors/primary-50-opa-20
-                                                :pressed  colors/primary-50-opa-40
-                                                :disabled colors/primary-50-opa-20}}
-           :grey            {:icon-color           colors/neutral-100
-                             :icon-secondary-color colors/neutral-50
-                             :label-color          colors/neutral-100
-                             :background-color     {:default  colors/neutral-10
-                                                    :pressed  colors/neutral-20
-                                                    :disabled colors/neutral-10}}
-           :dark-grey       {:icon-color           colors/neutral-100
-                             :icon-secondary-color colors/neutral-50
-                             :label-color          colors/neutral-100
-                             :background-color     {:default  colors/neutral-20
-                                                    :pressed  colors/neutral-30
-                                                    :disabled colors/neutral-20}}
-           :outline         {:icon-color           colors/neutral-50
-                             :icon-secondary-color colors/neutral-50
-                             :label-color          colors/neutral-100
-                             :border-color         {:default  colors/neutral-30
-                                                    :pressed  colors/neutral-40
-                                                    :disabled colors/neutral-30}}
-           :ghost           {:icon-color           colors/neutral-50
-                             :icon-secondary-color colors/neutral-50
-                             :label-color          colors/neutral-100
-                             :background-color     {:pressed colors/neutral-10}}
-           :danger          {:icon-color       colors/white
-                             :label-color      colors/white
-                             :background-color {:default  colors/danger-50
-                                                :pressed  colors/danger-60
-                                                :disabled colors/danger-50}}
-           :positive        {:icon-color       colors/white
-                             :label-color      colors/white
-                             :background-color {:default  colors/success-50
-                                                :pressed  colors/success-60
-                                                :disabled colors/success-50-opa-30}}
-           :photo-bg        {:icon-color           colors/neutral-100
-                             :icon-secondary-color colors/neutral-80-opa-40
-                             :label-color          colors/neutral-100
-                             :background-color     {:default  colors/white-opa-40
-                                                    :pressed  colors/white-opa-50
-                                                    :disabled colors/white-opa-40}}
-           :blur-bg         {:icon-color           colors/neutral-100
-                             :icon-secondary-color colors/neutral-80-opa-40
-                             :label-color          colors/neutral-100
-                             :background-color     {:default  colors/neutral-80-opa-5
-                                                    :pressed  colors/neutral-80-opa-10
-                                                    :disabled colors/neutral-80-opa-5}}
-           :blur-bg-outline {:icon-color           colors/neutral-100
-                             :icon-secondary-color colors/neutral-80-opa-40
-                             :label-color          colors/neutral-100
-                             :border-color         {:default  colors/neutral-80-opa-10
-                                                    :pressed  colors/neutral-80-opa-20
-                                                    :disabled colors/neutral-80-opa-10}}
-           :shell           {:icon-color       colors/white
-                             :label-color      colors/white
-                             :background-color {:default  colors/neutral-95
-                                                :pressed  colors/neutral-95
-                                                :disabled colors/neutral-95}}}
-   :dark  {:primary         {:icon-color       colors/white
-                             :label-color      colors/white
-                             :background-color {:default  (colors/custom-color customization-color 60)
-                                                :pressed  (colors/custom-color customization-color 50)
-                                                :disabled (colors/custom-color customization-color 60)}}
-           :secondary       {:icon-color       colors/primary-50
-                             :label-color      colors/primary-50
-                             :background-color {:default  colors/primary-50-opa-20
-                                                :pressed  colors/primary-50-opa-30
-                                                :disabled colors/primary-50-opa-20}}
-           :grey            {:icon-color           colors/white
-                             :icon-secondary-color colors/neutral-40
-                             :label-color          colors/white
-                             :background-color     {:default  colors/neutral-80
-                                                    :pressed  colors/neutral-60
-                                                    :disabled colors/neutral-80}}
-           :dark-grey       {:icon-color           colors/white
-                             :icon-secondary-color colors/neutral-40
-                             :label-color          colors/white
-                             :background-color     {:default  colors/neutral-70
-                                                    :pressed  colors/neutral-60
-                                                    :disabled colors/neutral-70}}
-           :outline         {:icon-color           colors/neutral-40
-                             :icon-secondary-color colors/neutral-40
-                             :label-color          colors/white
-                             :border-color         {:default  colors/neutral-70
-                                                    :pressed  colors/neutral-60
-                                                    :disabled colors/neutral-70}}
-           :ghost           {:icon-color           colors/neutral-40
-                             :icon-secondary-color colors/neutral-40
-                             :label-color          colors/white
-                             :background-color     {:pressed colors/neutral-80}}
-           :danger          {:icon-color       colors/white
-                             :label-color      colors/white
-                             :background-color {:default  colors/danger-60
-                                                :pressed  colors/danger-50
-                                                :disabled colors/danger-60}}
-           :positive        {:icon-color       colors/white
-                             :label-color      colors/white
-                             :background-color {:default  colors/success-60
-                                                :pressed  colors/success-50
-                                                :disabled colors/success-60-opa-30}}
-           :photo-bg        {:icon-color           colors/white
-                             :icon-secondary-color colors/neutral-30
-                             :label-color          colors/white
-                             :background-color     {:default  colors/neutral-80-opa-40
-                                                    :pressed  colors/neutral-80-opa-50
-                                                    :disabled colors/neutral-80-opa-40}}
-           :blur-bg         {:icon-color           colors/white
-                             :icon-secondary-color colors/white-opa-40
-                             :label-color          colors/white
-                             :background-color     {:default  colors/white-opa-5
-                                                    :pressed  colors/white-opa-10
-                                                    :disabled colors/white-opa-5}}
-           :blur-bg-outline {:icon-color           colors/white
-                             :icon-secondary-color colors/white-opa-40
-                             :label-color          colors/white
-                             :border-color         {:default  colors/white-opa-10
-                                                    :pressed  colors/white-opa-20
-                                                    :disabled colors/white-opa-5}}
-           :shell           {:icon-color       colors/white
-                             :label-color      colors/white
-                             :background-color {:default colors/neutral-95}}}})
+  {:light
+   {:primary         {:icon-color           colors/white
+                      :icon-secondary-color colors/white-opa-70
+                      :label-color          colors/white
+                      :background-color     {:default  (colors/custom-color customization-color 50)
+                                             :pressed  (colors/custom-color customization-color 60)
+                                             :disabled (colors/custom-color customization-color 50)}}
+    :secondary       {:icon-color       colors/primary-50
+                      :label-color      colors/primary-50
+                      :background-color {:default  colors/primary-50-opa-20
+                                         :pressed  colors/primary-50-opa-40
+                                         :disabled colors/primary-50-opa-20}}
+    :grey            {:icon-color           colors/neutral-100
+                      :icon-secondary-color colors/neutral-50
+                      :label-color          colors/neutral-100
+                      :background-color     {:default  colors/neutral-10
+                                             :pressed  colors/neutral-20
+                                             :disabled colors/neutral-10}}
+    :dark-grey       {:icon-color           colors/neutral-100
+                      :icon-secondary-color colors/neutral-50
+                      :label-color          colors/neutral-100
+                      :background-color     {:default  colors/neutral-20
+                                             :pressed  colors/neutral-30
+                                             :disabled colors/neutral-20}}
+    :outline         {:icon-color           colors/neutral-50
+                      :icon-secondary-color colors/neutral-50
+                      :label-color          colors/neutral-100
+                      :border-color         {:default  colors/neutral-30
+                                             :pressed  colors/neutral-40
+                                             :disabled colors/neutral-30}}
+    :ghost           {:icon-color           colors/neutral-50
+                      :icon-secondary-color colors/neutral-50
+                      :label-color          colors/neutral-100
+                      :background-color     {:pressed colors/neutral-10}}
+    :danger          {:icon-color           colors/white
+                      :icon-secondary-color colors/white-opa-70
+                      :label-color          colors/white
+                      :background-color     {:default  colors/danger-50
+                                             :pressed  colors/danger-60
+                                             :disabled colors/danger-50}}
+    :positive        {:icon-color           colors/white
+                      :icon-secondary-color colors/white-opa-70
+                      :label-color          colors/white
+                      :background-color     {:default  colors/success-50
+                                             :pressed  colors/success-60
+                                             :disabled colors/success-50-opa-30}}
+    :photo-bg        {:icon-color           colors/neutral-100
+                      :icon-secondary-color colors/neutral-80-opa-40
+                      :label-color          colors/neutral-100
+                      :background-color     {:default  colors/white-opa-40
+                                             :pressed  colors/white-opa-50
+                                             :disabled colors/white-opa-40}}
+    :blur-bg         {:icon-color           colors/neutral-100
+                      :icon-secondary-color colors/neutral-80-opa-40
+                      :label-color          colors/neutral-100
+                      :background-color     {:default  colors/neutral-80-opa-5
+                                             :pressed  colors/neutral-80-opa-10
+                                             :disabled colors/neutral-80-opa-5}}
+    :blur-bg-outline {:icon-color           colors/neutral-100
+                      :icon-secondary-color colors/neutral-80-opa-40
+                      :label-color          colors/neutral-100
+                      :border-color         {:default  colors/neutral-80-opa-10
+                                             :pressed  colors/neutral-80-opa-20
+                                             :disabled colors/neutral-80-opa-10}}
+    :shell           {:icon-color       colors/white
+                      :label-color      colors/white
+                      :background-color {:default  colors/neutral-95
+                                         :pressed  colors/neutral-95
+                                         :disabled colors/neutral-95}}}
+   :dark
+   {:primary         {:icon-color           colors/white
+                      :icon-secondary-color colors/white-opa-70
+                      :label-color          colors/white
+                      :background-color     {:default  (colors/custom-color customization-color 60)
+                                             :pressed  (colors/custom-color customization-color 50)
+                                             :disabled (colors/custom-color customization-color 60)}}
+    :secondary       {:icon-color       colors/primary-50
+                      :label-color      colors/primary-50
+                      :background-color {:default  colors/primary-50-opa-20
+                                         :pressed  colors/primary-50-opa-30
+                                         :disabled colors/primary-50-opa-20}}
+    :grey            {:icon-color           colors/white
+                      :icon-secondary-color colors/neutral-40
+                      :label-color          colors/white
+                      :background-color     {:default  colors/neutral-90
+                                             :pressed  colors/neutral-60
+                                             :disabled colors/neutral-90}}
+    :dark-grey       {:icon-color           colors/white
+                      :icon-secondary-color colors/neutral-40
+                      :label-color          colors/white
+                      :background-color     {:default  colors/neutral-70
+                                             :pressed  colors/neutral-60
+                                             :disabled colors/neutral-70}}
+    :outline         {:icon-color           colors/neutral-40
+                      :icon-secondary-color colors/neutral-40
+                      :label-color          colors/white
+                      :border-color         {:default  colors/neutral-70
+                                             :pressed  colors/neutral-60
+                                             :disabled colors/neutral-70}}
+    :ghost           {:icon-color           colors/neutral-40
+                      :icon-secondary-color colors/neutral-40
+                      :label-color          colors/white
+                      :background-color     {:pressed colors/neutral-80}}
+    :danger          {:icon-color           colors/white
+                      :icon-secondary-color colors/white-opa-70
+                      :label-color          colors/white
+                      :background-color     {:default  colors/danger-60
+                                             :pressed  colors/danger-50
+                                             :disabled colors/danger-60}}
+    :positive        {:icon-color           colors/white
+                      :icon-secondary-color colors/white-opa-70
+                      :label-color          colors/white
+                      :background-color     {:default  colors/success-60
+                                             :pressed  colors/success-50
+                                             :disabled colors/success-60-opa-30}}
+    :photo-bg        {:icon-color           colors/white
+                      :icon-secondary-color colors/neutral-30
+                      :label-color          colors/white
+                      :background-color     {:default  colors/neutral-80-opa-40
+                                             :pressed  colors/neutral-80-opa-50
+                                             :disabled colors/neutral-80-opa-40}}
+    :blur-bg         {:icon-color           colors/white
+                      :icon-secondary-color colors/white-opa-40
+                      :label-color          colors/white
+                      :background-color     {:default  colors/white-opa-5
+                                             :pressed  colors/white-opa-10
+                                             :disabled colors/white-opa-5}}
+    :blur-bg-outline {:icon-color           colors/white
+                      :icon-secondary-color colors/white-opa-40
+                      :label-color          colors/white
+                      :border-color         {:default  colors/white-opa-10
+                                             :pressed  colors/white-opa-20
+                                             :disabled colors/white-opa-5}}
+    :shell           {:icon-color       colors/white
+                      :label-color      colors/white
+                      :background-color {:default colors/neutral-95}}}})
 
 (defn shape-style-container
   [type icon size]
@@ -196,17 +204,13 @@
          (when disabled
            {:opacity 0.3})))
 
-(defn community-themed?
-  [type community-color]
-  (and (= type :community) (string? community-color)))
-
 (defn button
   "with label
    [button opts \"label\"]
    opts
    {:type   :primary/:secondary/:grey/:dark-grey/:outline/:ghost/
             :danger/:photo-bg/:blur-bg/:blur-bg-outline/:shell/:community
-    :size   40/32/24
+    :size   40 [default] /32/24
     :icon   true/false
     :community-color '#FFFFFF'
     :community-text-color '#000000'
@@ -218,9 +222,8 @@
   [_ _]
   (let [pressed (reagent/atom false)]
     (fn
-      [{:keys [on-press disabled type size community-color community-text-color before after above
-               width customization-color
-               override-theme override-background-color
+      [{:keys [on-press disabled type size before after above
+               width customization-color override-theme override-background-color
                on-long-press accessibility-label icon icon-no-color style inner-style test-ID]
         :or   {type                :primary
                size                40
@@ -239,18 +242,13 @@
         [rn/touchable-without-feedback
          (merge {:test-ID             test-ID
                  :disabled            disabled
-                 :accessibility-label accessibility-label}
+                 :accessibility-label accessibility-label
+                 :on-press-in         #(reset! pressed true)
+                 :on-press-out        #(reset! pressed nil)}
                 (when on-press
-                  {:on-press (fn []
-                               (on-press))})
+                  {:on-press on-press})
                 (when on-long-press
-                  {:on-long-press (fn []
-                                    (on-long-press))})
-                {:on-press-in (fn []
-                                (reset! pressed true))}
-                {:on-press-out (fn []
-                                 (reset! pressed nil))})
-
+                  {:on-long-press on-long-press}))
          [rn/view
           {:style (merge
                    (shape-style-container type icon size)
@@ -269,11 +267,7 @@
                      width
                      before
                      after)
-                    (when
-                      (community-themed? type community-color)
-                      (merge
-                       {:background-color community-color}
-                       (when (= state :pressed) {:opacity 0.9})))
+                    (when (= state :pressed) {:opacity 0.9})
                     inner-style)}
            (when above
              [rn/view
@@ -301,12 +295,7 @@
                {:size            (when (#{56 24} size) :paragraph-2)
                 :weight          :medium
                 :number-of-lines 1
-                :style           {:color (if
-                                           (and
-                                            (community-themed? type community-color)
-                                            (string? community-text-color))
-                                           community-text-color
-                                           label-color)}}
+                :style           {:color label-color}}
 
                children]
 

src/quo2/components/community/banner/style.cljs

@@ -0,0 +1,38 @@
+(ns quo2.components.community.banner.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn community-card
+  [radius]
+  {:shadow-offset    {:width  0
+                      :height 2}
+   :shadow-radius    radius
+   :shadow-opacity   1
+   :shadow-color     colors/shadow
+   :elevation        1
+   :border-radius    radius
+   :justify-content  :space-between
+   :background-color (colors/theme-colors
+                      colors/white
+                      colors/neutral-90)})
+
+(def banner-content
+  {:flex           1
+   :padding-top    8
+   :padding-bottom 8
+   :border-radius  12})
+
+(def banner-title
+  {:flex               1
+   :padding-horizontal 12})
+
+(def banner-card
+  {:flex-direction    :row
+   :margin-horizontal 20
+   :margin-vertical   8
+   :height            56
+   :padding-right     12})
+
+(def discover-illustration
+  {:position :absolute
+   :top      -4
+   :right    0})

src/quo2/components/community/banner/view.cljs

@@ -0,0 +1,46 @@
+(ns quo2.components.community.banner.view
+  (:require [quo2.components.community.banner.style :as style]
+            [quo2.components.markdown.text :as text]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]))
+
+(defn- card-title-and-description
+  [title description]
+  [rn/view
+   {:style style/banner-content}
+   [rn/view
+    {:style style/banner-title}
+    [text/text
+     {:accessibility-label :community-name-text
+      :ellipsize-mode      :tail
+      :number-of-lines     1
+      :weight              :semi-bold
+      :size                :paragraph-1}
+     title]
+    [text/text
+     {:accessibility-label :community-name-text
+      :ellipsize-mode      :tail
+      :number-of-lines     1
+      :color               (colors/theme-colors
+                            colors/neutral-50
+                            colors/neutral-40)
+      :weight              :regular
+      :size                :paragraph-2}
+     description]]])
+
+(defn view
+  [{:keys [title description on-press accessibility-label banner]}]
+  [rn/touchable-without-feedback
+   {:on-press            on-press
+    :accessibility-label accessibility-label}
+   [rn/view
+    (merge (style/community-card 16)
+           {:background-color (colors/theme-colors
+                               colors/white
+                               colors/neutral-90)}
+           style/banner-card)
+    [card-title-and-description title description]
+    [rn/image
+     {:style               style/discover-illustration
+      :source              banner
+      :accessibility-label :discover-communities-illustration}]]])

src/quo2/components/community/discover_card.cljs

@@ -1,108 +0,0 @@
-(ns quo2.components.community.discover-card
-  (:require [quo2.components.community.style :as style]
-            [quo2.components.markdown.text :as text]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]))
-
-;; Discover card placeholders images.
-;; TODO replaced when real data is available
-(def images
-  {:images [{:id 1 :column-images [{:id 1 :image ""}]}
-            {:id 2 :column-images [{}]}]})
-
-(defn card-title-and-description
-  [title description]
-  [rn/view
-   {:flex           1
-    :padding-top    8
-    :padding-bottom 8
-    :border-radius  12}
-   [rn/view
-    {:flex               1
-     :padding-horizontal 12}
-    [text/text
-     {:accessibility-label :community-name-text
-      :ellipsize-mode      :tail
-      :number-of-lines     1
-      :weight              :semi-bold
-      :size                :paragraph-1}
-     title]
-    [text/text
-     {:accessibility-label :community-name-text
-      :ellipsize-mode      :tail
-      :number-of-lines     1
-      :color               (colors/theme-colors
-                            colors/neutral-50
-                            colors/neutral-40)
-      :weight              :regular
-      :size                :paragraph-2}
-     description]]])
-
-(defn placeholder-list-images
-  [{:keys [images width height border-radius]}]
-  [rn/view
-   [rn/view {:justify-content :center}
-    (for [{:keys [id]} images]
-      ^{:key id}
-      [rn/view
-       {:border-radius    border-radius
-        :margin-top       4
-        :margin-right     4
-        :width            width
-        :height           height
-        :background-color colors/neutral-10}])]])
-
-(defn placeholder-row-images
-  [{:keys [first-image last-image images width height
-           border-radius]}]
-  [rn/view
-   (when first-image
-     [rn/view
-      {:border-bottom-right-radius 6
-       :border-bottom-left-radius  6
-       :margin-right               4
-       :width                      width
-       :height                     height
-       :background-color           colors/neutral-10}])
-   (when images
-     [placeholder-list-images
-      {:images        images
-       :width         32
-       :height        32
-       :border-radius 6}])
-   (when last-image
-     [rn/view
-      {:border-top-left-radius  border-radius
-       :border-top-right-radius 6
-       :margin-top              4
-       :width                   width
-       :height                  height
-       :background-color        colors/neutral-10}])])
-
-(defn discover-card
-  [{:keys [title description on-press accessibility-label]}]
-  (let [on-joined-images (get images :images)]
-    [rn/touchable-without-feedback
-     {:on-press            on-press
-      :accessibility-label accessibility-label}
-     [rn/view
-      (merge (style/community-card 16)
-             {:background-color (colors/theme-colors
-                                 colors/white
-                                 colors/neutral-90)}
-             {:flex-direction    :row
-              :margin-horizontal 20
-              :margin-vertical   8
-              :height            56
-              :padding-right     12})
-      [card-title-and-description title description]
-      (for [{:keys [id column-images]} on-joined-images]
-        ^{:key id}
-        [placeholder-row-images
-         {:images        (when (= id 1)
-                           column-images)
-          :width         32
-          :height        (if (= id 1) 8 26)
-          :border-radius 6
-          :first-image   "" ; TODO replace with real data
-          :last-image    ""}])]])) ; TODO replace with real data

src/quo2/components/community/style.cljs

@@ -112,3 +112,39 @@
   {:position :absolute
    :top      8
    :right    8})
+
+(def token-tag-spacing
+  {:margin-top   10
+   :margin-right 8})
+
+(defn token-row
+  [padding?]
+  (merge
+   {:flex-direction :row
+    :flex-wrap      :wrap
+    :align-items    :center}
+   (when padding?
+     {:padding-horizontal 12})))
+
+(def token-row-container
+  {:flex-direction :row
+   :align-items    :center
+   :margin-bottom  12})
+
+(defn token-row-or-text
+  [padding?]
+  (merge
+   {:margin-top 4
+    :color      (colors/theme-colors
+                 colors/neutral-50
+                 colors/neutral-40)}
+   (when padding?
+     {:padding-left 12})))
+
+(defn token-row-or-border
+  []
+  {:height           1
+   :background-color (colors/theme-colors
+                      colors/neutral-20
+                      colors/neutral-80)})
+

src/quo2/components/community/token_gating.cljs

@@ -1,295 +1,45 @@
 (ns quo2.components.community.token-gating
-  (:require [quo2.components.avatars.channel-avatar :as channel-avatar]
-            [quo2.components.buttons.button :as button]
-            [quo2.components.icon :as icon]
-            [quo2.components.info.information-box :as information-box]
-            [quo2.components.markdown.text :as text]
+  (:require [quo2.components.markdown.text :as text]
             [quo2.components.tags.token-tag :as token-tag]
-            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
             [utils.i18n :as i18n]
-            [react-native.fast-image :as fast-image]
-            [react-native.core :as rn]))
-
-(def ^:private token-tag-horizontal-spacing 7)
-(def token-tag-vertical-spacing 5)
-
-(def styles
-  {:container                      {:flex               1
-                                    :padding-horizontal 20}
-   :header-container               {:flex-direction :row
-                                    :align-items    :center}
-   :header-spacing-community       {:margin-bottom 16}
-   :header-spacing-channel         {:margin-bottom 24}
-   :header-avatar                  {:margin-right 8}
-   :header-community-avatar-image  {:width 32 :height 32}
-   :header-title-container         {:flex           1
-                                    :flex-direction :row
-                                    :align-items    :center}
-   :header-title-lock              {:margin-left 6}
-   :header-info-button             {:margin-left 8}
-   :token-requirement-text-spacing {:margin-vertical 8}
-   :token-requirement-list-spacing {:padding-vertical (- 8 token-tag-vertical-spacing)}
-   :token-row                      {:flex-direction :row
-                                    :flex-wrap      :wrap
-                                    :align-items    :center}
-   :token-row-container            {:flex-direction    :row
-                                    :align-items       :center
-                                    :margin-horizontal (- token-tag-horizontal-spacing)}
-   :token-row-container-no-shift   {:margin-left 0}
-   :token-row-or-text              {:margin-right 3}
-   :token-tag-spacing              {:margin-horizontal token-tag-horizontal-spacing
-                                    :margin-vertical   token-tag-vertical-spacing}
-   :divider                        {:height            1
-                                    :margin-horizontal -20
-                                    :margin-top        (- 12 token-tag-vertical-spacing)
-                                    :margin-bottom     8}
-   :membership-request-denied      {:margin-top 13}
-   :enter-button                   {:margin-top 16}
-   :info-text                      {:margin-top         12
-                                    :text-align         :center
-                                    :padding-horizontal 20}})
-
-(defn multiple-token-requirements?
-  [token-requirement-lists]
-  (when (vector? (first token-requirement-lists))
-    (> (count token-requirement-lists) 1)))
-
-(defn is-token-requirement-met?
-  [token-requirement-list]
-  (and (seq token-requirement-list)
-       (every?
-        (fn [token]
-          (get token :is-sufficient?))
-        token-requirement-list)))
-
-(defn are-multiple-token-requirements-met?
-  [token-requirement-lists]
-  (if (multiple-token-requirements? token-requirement-lists)
-    (some is-token-requirement-met? token-requirement-lists)
-    (is-token-requirement-met? token-requirement-lists)))
+            [clojure.string :as string]
+            [quo2.components.community.style :as style]))
 
 (defn token-requirement-list-row
-  [tokens community-color]
+  [tokens padding?]
   [rn/view
-   {:style (merge
-            (get styles :token-row)
-            (get styles :token-requirement-list-spacing))}
-   (map-indexed (fn [token-index token]
-                  (let [{:keys [token-img-src token amount is-sufficient? is-purchasable?]} token]
-                    ^{:key token-index}
-                    [rn/view {:style (get styles :token-tag-spacing)}
-                     [token-tag/token-tag
-                      {:token          token
-                       :value          amount
-                       :size           24
-                       :border-color   community-color
-                       :is-required    is-sufficient?
-                       :is-purchasable is-purchasable?
-                       :token-img-src  token-img-src}]]))
-                tokens)])
+   {:style (style/token-row padding?)}
+   (doall
+    (map-indexed (fn [token-index token]
+                   (let [{:keys [img-src symbol amount sufficient? purchasable? loading?]} token]
+                     ^{:key token-index}
+                     [rn/view {:style style/token-tag-spacing}
+                      [token-tag/token-tag
+                       {:symbol      symbol
+                        :value       amount
+                        :size        24
+                        :sufficient? sufficient?
+                        :purchasable purchasable?
+                        :loading?    loading?
+                        :img-src     img-src}]]))
+                 tokens))])
 
 (defn token-requirement-list
-  [props community-color]
-  (let [{:keys [gate token-requirements-changed?
-                required-tokens-lost?]}     props
-        [gate-type token-requirement-lists] gate
-        multiple-token-requirements?        (multiple-token-requirements? token-requirement-lists)
-        is-sufficient?                      (are-multiple-token-requirements-met?
-                                             token-requirement-lists)
-        you-must-hold-label                 (if (= gate-type :join)
-                                              (cond
-                                                token-requirements-changed? :t/you-must-now-hold
-                                                required-tokens-lost?       :t/you-must-always-hold
-                                                :else                       :t/you-must-hold)
-                                              :t/you-must-hold)
-        message-label                       (cond
-                                              (= gate-type :join)
-                                              (cond
-                                                token-requirements-changed?
-                                                :t/community-join-requirements-changed
-                                                required-tokens-lost?
-                                                :t/community-join-requirements-tokens-lost
-                                                :else (if is-sufficient?
-                                                        :t/community-join-requirements-met
-                                                        :t/community-join-requirements-not-met))
-                                              (= gate-type :read)
-                                              (if is-sufficient?
-                                                :t/community-channel-read-requirements-met
-                                                :t/community-channel-read-requirements-not-met)
-                                              (= gate-type :write)
-                                              (if is-sufficient?
-                                                :t/community-channel-write-requirements-met
-                                                :t/community-channel-write-requirements-not-met))]
-    [rn/view
-     [rn/view {:style (get styles :token-requirement-text-spacing)}
-      [text/text
-       {:weight          :medium
-        :number-of-lines 1}
-       (i18n/label
-        message-label)]
-      [text/text
-       {:size            :paragraph-2
-        :number-of-lines 1}
-       (i18n/label
-        you-must-hold-label)]]
-
-     (if multiple-token-requirements?
-       (map-indexed
-        (fn [token-requirement-index tokens]
-          ^{:key token-requirement-index}
-          [rn/view
-           {:style (merge
-                    (get styles :token-row-container)
-                    (when-not (= token-requirement-index 0)
-                      (get styles :token-row-container-no-shift)))}
-           (when-not (= token-requirement-index 0)
-             [text/text
-              {:style (get styles :token-row-or-text)
-               :size  :paragraph-2} "or"])
-           [token-requirement-list-row tokens community-color]])
-        token-requirement-lists)
-       [rn/view {:style (get styles :token-row-container)}
-        [token-requirement-list-row token-requirement-lists community-color]])]))
-
-(defn is-community-locked?
-  [community]
-  (not (are-multiple-token-requirements-met? (get-in community [:gates :join]))))
-
-(defn is-channel-locked?
-  [channel]
-  (not (are-multiple-token-requirements-met?
-        (or (get-in channel [:gates :read])
-            (get-in channel [:gates :write])))))
-
-(defn token-gating
-  "[token-gating opts]
-   opts
-   {
-     :community {
-       :name string
-       :community-avatar-img-src string
-       :community-color string
-       :community-text-color string
-       :token-requirements-changed? boolean
-       :required-tokens-lost? boolean
-     }
-     :channel {
-       :name string
-       :emoji string
-       :emoji-background-color :string
-       :on-enter-channel callback
-       :membership-request-denied? boolean
-     }
-   }"
-  [_ _]
-  (fn [{:keys [community channel]}]
-    (let [type (if (some? community) :community :channel)
-          {:keys [name
-                  emoji
-                  emoji-background-color
-                  on-enter-channel
-                  community-avatar-img-src
-                  community-color
-                  community-text-color
-                  membership-request-denied?
-                  token-requirements-changed?
-                  required-tokens-lost?
-                  gates]}
-          (if (= type :community) community channel)
-          locked? (if
-                    (= type :community)
-                    (is-community-locked? community)
-                    (is-channel-locked? channel))]
-
-      [rn/view
-       {:style (merge (get styles :container)
-                      {:background-color (colors/theme-colors colors/white colors/neutral-90)})}
-       [rn/view
-        {:style (merge
-                 (get styles :header-container)
-                 (if
-                   (= type :community)
-                   (get styles :header-spacing-community)
-                   (get styles :header-spacing-channel)))}
-
-        [rn/view {:style (get styles :header-avatar)}
-         (if (= type :community)
-           [fast-image/fast-image
-            {:source community-avatar-img-src
-             :style  (get styles :header-community-avatar-image)}]
-
-           [channel-avatar/channel-avatar
-            {:big?                   true
-             :locked?                locked?
-             :emoji                  emoji
-             :emoji-background-color emoji-background-color}])]
-
-        [rn/view {:style (get styles :header-title-container)}
-         [text/text
-          {:weight          :semi-bold
-           :number-of-lines 1
-           :size            :heading-1
-           :style           (get styles :header-text)} (if (= type :community) name (str "# " name))]
-
-         (when (= type :community)
-           [icon/icon
-            (if locked?
-              :main-icons2/locked
-              :main-icons2/unlocked)
-            {:container-style (get styles :header-title-lock)
-             :color           (colors/theme-colors
-                               colors/neutral-50
-                               colors/neutral-40)}])]
-
-        [button/button
-         {:type  :outline
-          :size  32
-          :icon  true
-          :style (get styles :header-info-button)} :main-icons2/info]]
-
-       (map-indexed (fn [gate-index gate]
-                      ^{:key gate-index}
-                      [:<>
-                       (when-not (= gate-index 0)
-                         [rn/view
-                          {:style (merge
-                                   (get styles :divider)
-                                   {:background-color (colors/theme-colors
-                                                       colors/neutral-10
-                                                       colors/neutral-80)})}])
-                       [token-requirement-list
-                        {:gate                        gate
-                         :token-requirements-changed? token-requirements-changed?
-                         :required-tokens-lost?       required-tokens-lost?} community-color]])
-                    gates)
-
-       (when (= type :channel)
-         (if membership-request-denied?
-           [information-box/information-box
-            {:type           :error
-             :icon           :main-icons2/untrustworthy
-             :no-icon-color? true
-             :style          (get styles :membership-request-denied)}
-            (i18n/label
-             :t/membership-request-denied)]
-
-           [:<>
-            [button/button
-             {:type                 :community
-              :community-color      community-color
-              :community-text-color community-text-color
-              :style                (get styles :enter-button)
-              :disabled             locked?
-              :on-press             on-enter-channel}
-             (str "# "
-                  (i18n/label
-                   :t/enter-channel))]
+  [{:keys [tokens padding?]}]
+  [:<>
+   (if (> (count tokens) 1)
+     (doall
+      (map-indexed
+       (fn [token-requirement-index tokens]
+         ^{:key token-requirement-index}
+         [rn/view {:margin-bottom 12}
+          (when-not (= token-requirement-index 0)
+            [rn/view {:style (style/token-row-or-border)}])
+          (when-not (= token-requirement-index 0)
             [text/text
-             {:size  :paragraph-2
-              :style (merge
-                      (get styles :info-text)
-                      {:color (colors/theme-colors
-                               colors/neutral-50
-                               colors/neutral-40)})}
-             (i18n/label
-              :t/community-enter-channel-info)]]))])))
+             {:style (style/token-row-or-text padding?)
+              :size  :label} (string/lower-case (i18n/label :t/or))])
+          [token-requirement-list-row tokens padding?]])
+       tokens))
+     [token-requirement-list-row (first tokens) padding?])])

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

@@ -1,11 +1,10 @@
 (ns quo2.components.drawers.action-drawers.style
   (:require [quo2.foundations.colors :as colors]))
 
-(def divider
+(defn divider
+  []
   {:border-top-width 1
-   :border-top-color (colors/theme-colors
-                      colors/neutral-10
-                      colors/neutral-90)
+   :border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-90)
    :margin-top       8
    :margin-bottom    7
    :align-items      :center

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

@@ -8,12 +8,13 @@
 (defn- get-icon-color
   [danger? override-theme]
   (if danger?
-    colors/danger-50
+    colors/danger-60
     (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)))
 
-(def divider
+(defn divider
+  []
   [rn/view
-   {:style               style/divider
+   {:style               (style/divider)
     :accessible          true
     :accessibility-label :divider}])
 
@@ -30,7 +31,8 @@
     :as   action-props}]
   (when action-props
     [:<> {:key label}
-     (when add-divider? divider)
+     (when add-divider?
+       [divider])
      [rn/touchable-highlight
       {:accessibility-label accessibility-label
        :style               (style/container sub-label)

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

@@ -4,7 +4,8 @@
             [quo2.components.inputs.input.style :as style]
             [quo2.components.markdown.text :as text]
             [react-native.core :as rn]
-            [reagent.core :as reagent]))
+            [reagent.core :as reagent]
+            [quo2.theme :as theme]))
 
 (defn- label-&-counter
   [{:keys [label current-chars char-limit variant-colors]}]
@@ -100,6 +101,7 @@
            (cond-> {:style                  (style/input colors-by-status small? @multiple-lines?)
                     :accessibility-label    :input
                     :placeholder-text-color (:placeholder colors-by-status)
+                    :keyboard-appearance    (theme/theme-value :light :dark override-theme)
                     :cursor-color           (:cursor variant-colors)
                     :editable               (not disabled?)
                     :on-focus               (fn []
@@ -140,7 +142,7 @@
        (assoc props
               :accessibility-label :password-input
               :auto-capitalize     :none
-              :auto-complete       :password-new
+              :auto-complete       :password
               :secure-text-entry   (not @password-shown?)
               :right-icon          {:style-fn  style/password-icon
                                     :icon-name (if @password-shown? :i/hide :i/reveal)

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

@@ -2,7 +2,8 @@
   (:require [clojure.string :as string]
             [quo2.components.inputs.recovery-phrase.style :as style]
             [react-native.core :as rn]
-            [reagent.core :as reagent]))
+            [reagent.core :as reagent]
+            [quo2.theme :as theme]))
 
 (def ^:private custom-props
   [:customization-color :override-theme :blur? :cursor-color :multiline :on-focus :on-blur
@@ -42,6 +43,7 @@
                   :style                  (style/input)
                   :placeholder-text-color (style/placeholder-color @state override-theme blur?)
                   :cursor-color           (style/cursor-color customization-color override-theme)
+                  :keyboard-appearance    (theme/theme-value :light :dark override-theme)
                   :multiline              true
                   :on-focus               (fn []
                                             (set-focused)

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

@@ -3,7 +3,8 @@
             [quo2.components.icon :as icon]
             [quo2.components.inputs.search-input.style :as style]
             [react-native.core :as rn]
-            [reagent.core :as reagent]))
+            [reagent.core :as reagent]
+            [quo2.foundations.colors :as colors]))
 
 (def ^:private tag-separator [rn/view {:style style/tag-separator}])
 
@@ -68,6 +69,7 @@
                      :placeholder-text-color (style/placeholder-color @state blur? override-theme)
                      :editable               (not disabled?)
                      :on-key-press           #(handle-backspace % @scroll-view-ref)
+                     :keyboard-appearance    (colors/theme-colors :light :dark override-theme)
                      :on-change-text         (fn [new-text]
                                                (when on-change-text
                                                  (on-change-text new-text))

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

@@ -3,7 +3,8 @@
     [quo2.components.inputs.title-input.style :as style]
     [quo2.components.markdown.text :as text]
     [reagent.core :as reagent]
-    [react-native.core :as rn]))
+    [react-native.core :as rn]
+    [quo2.theme :as theme]))
 
 (defn- pad-0
   [value]
@@ -38,6 +39,7 @@
             :style  (style/title-text disabled? blur? override-theme)})
           :default-value default-value
           :accessibility-label :profile-title-input
+          :keyboard-appearance (theme/theme-value :light :dark override-theme)
           :on-focus #(swap! focused? (fn [] true))
           :on-blur #(swap! focused? (fn [] false))
           :input-mode :text

src/quo2/components/keycard/component_spec.cljs

@@ -1,20 +1,11 @@
 (ns quo2.components.keycard.component-spec
   (:require [quo2.components.keycard.view :as keycard]
-            [test-helpers.component :as h]
-            [utils.i18n :as i18n]))
+            [test-helpers.component :as h]))
 
 (h/describe "keycard component"
-  (h/test "Render of keycard component when: Status = Empty, Locked = False"
+  (h/test "Render of keycard component when: holder-name prop is not set"
     (h/render [keycard/keycard])
-    (-> (h/expect (h/query-by-label-text :holder-name))
-        (h/is-equal (i18n/label :t/empty-keycard))))
-
-  (h/test "Render of keycard component when: Status = Filled, Locked = False"
-    (h/render [keycard/keycard {:holder-name? "Alisha"}])
-    (-> (h/expect (h/query-by-label-text :holder-name))
-        (h/is-equal (i18n/label :t/user-keycard {:name :holder-name}))))
-
-  (h/test "Render of keycard component when: Status = Filled, Locked = True"
-    (h/render [keycard/keycard {:holder-name? "Alisha"}])
-    (-> (h/expect (h/query-by-label-text :holder-name))
-        (h/is-equal (i18n/label :t/user-keycard {:name :holder-name})))))
+    (h/is-truthy (h/get-by-translation-text :empty-keycard)))
+  (h/test "Render of keycard component when: holder-name prop is set"
+    (h/render [keycard/keycard {:holder-name "Alisha"}])
+    (h/is-truthy (h/get-by-translation-text :user-keycard))))

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

@@ -57,7 +57,8 @@
           :override-theme      :dark
           :size                :medium
           :status-indicator?   false
-          :customization-color customization-color}]
+          :customization-color customization-color
+          :static?             true}]
         [rn/view {:flex-direction :row}
          (when show-logged-in?
            [tag/tag

src/quo2/components/record_audio/record_audio/__tests__/record_audio_component_spec.cljs

@@ -26,9 +26,10 @@
       (h/fire-event
        :on-start-should-set-responder
        (h/get-by-test-id "record-audio")
-       {:nativeEvent {:locationX 70
-                      :locationY 70
-                      :timestamp 0}})
+       {:nativeEvent {:locationX  70
+                      :locationY  70
+                      :timestamp  0
+                      :identifier 0}})
       (-> (h/expect event)
           (.toHaveBeenCalledTimes 1))))
 
@@ -43,16 +44,18 @@
         (h/fire-event
          :on-start-should-set-responder
          (h/get-by-test-id "record-audio")
-         {:nativeEvent {:locationX 70
-                        :locationY 70
-                        :timestamp 0}})
+         {:nativeEvent {:locationX  70
+                        :locationY  70
+                        :timestamp  0
+                        :identifier 0}})
         (h/advance-timers-by-time 500)
         (h/fire-event
          :on-responder-release
          (h/get-by-test-id "record-audio")
-         {:nativeEvent {:locationX 70
-                        :locationY 70
-                        :timestamp 200}})
+         {:nativeEvent {:locationX  70
+                        :locationY  70
+                        :timestamp  200
+                        :identifier 0}})
         (h/advance-timers-by-time 250)
         (-> (h/expect event)
             (.toHaveBeenCalledTimes 1)))))
@@ -69,29 +72,33 @@
         (h/fire-event
          :on-start-should-set-responder
          (h/get-by-test-id "record-audio")
-         {:nativeEvent {:locationX 70
-                        :locationY 70
-                        :timestamp 0}})
+         {:nativeEvent {:locationX  70
+                        :locationY  70
+                        :timestamp  0
+                        :identifier 0}})
         (h/advance-timers-by-time 500)
         (h/fire-event
          :on-responder-release
          (h/get-by-test-id "record-audio")
-         {:nativeEvent {:locationX 70
-                        :locationY 70
-                        :timestamp 200}})
+         {:nativeEvent {:locationX  70
+                        :locationY  70
+                        :timestamp  200
+                        :identifier 0}})
         (h/fire-event
          :on-start-should-set-responder
          (h/get-by-test-id "record-audio")
-         {:nativeEvent {:locationX 70
-                        :locationY 70
-                        :timestamp 0}})
+         {:nativeEvent {:locationX  70
+                        :locationY  70
+                        :timestamp  0
+                        :identifier 0}})
         (h/advance-timers-by-time 500)
         (h/fire-event
          :on-responder-release
          (h/get-by-test-id "record-audio")
-         {:nativeEvent {:locationX 80
-                        :locationY 80
-                        :timestamp 200}})
+         {:nativeEvent {:locationX  80
+                        :locationY  80
+                        :timestamp  200
+                        :identifier 0}})
         (h/advance-timers-by-time 250)
         (-> (js/expect event)
             (.toHaveBeenCalledTimes 1))
@@ -112,23 +119,26 @@
         (h/fire-event
          :on-start-should-set-responder
          (h/get-by-test-id "record-audio")
-         {:nativeEvent {:locationX 70
-                        :locationY 70
-                        :timestamp 0}})
+         {:nativeEvent {:locationX  70
+                        :locationY  70
+                        :timestamp  0
+                        :identifier 0}})
         (h/advance-timers-by-time 500)
         (h/fire-event
          :on-responder-move
          (h/get-by-test-id "record-audio")
-         {:nativeEvent {:locationX 80
-                        :locationY -30
-                        :pageX     80
-                        :pageY     -30}})
+         {:nativeEvent {:locationX  80
+                        :locationY  -30
+                        :pageX      80
+                        :pageY      -30
+                        :identifier 0}})
         (h/fire-event
          :on-responder-release
          (h/get-by-test-id "record-audio")
-         {:nativeEvent {:locationX 40
-                        :locationY 80
-                        :timestamp 200}})
+         {:nativeEvent {:locationX  40
+                        :locationY  80
+                        :timestamp  200
+                        :identifier 0}})
         (h/advance-timers-by-time 250)
         (-> (js/expect event)
             (.toHaveBeenCalledTimes 1))
@@ -146,22 +156,25 @@
         (h/fire-event
          :on-start-should-set-responder
          (h/get-by-test-id "record-audio")
-         {:nativeEvent {:locationX 70
-                        :locationY 70
-                        :timestamp 0}})
+         {:nativeEvent {:locationX  70
+                        :locationY  70
+                        :timestamp  0
+                        :identifier 0}})
         (h/advance-timers-by-time 500)
         (h/fire-event
          :on-responder-release
          (h/get-by-test-id "record-audio")
-         {:nativeEvent {:locationX 70
-                        :locationY 70
-                        :timestamp 200}})
+         {:nativeEvent {:locationX  70
+                        :locationY  70
+                        :timestamp  200
+                        :identifier 0}})
         (h/fire-event
          :on-responder-release
          (h/get-by-test-id "record-audio")
-         {:nativeEvent {:locationX 40
-                        :locationY 80
-                        :timestamp 200}})
+         {:nativeEvent {:locationX  40
+                        :locationY  80
+                        :timestamp  200
+                        :identifier 0}})
         (h/advance-timers-by-time 250)
         (-> (js/expect event)
             (.toHaveBeenCalledTimes 1)))))
@@ -178,23 +191,26 @@
         (h/fire-event
          :on-start-should-set-responder
          (h/get-by-test-id "record-audio")
-         {:nativeEvent {:locationX 70
-                        :locationY 70
-                        :timestamp 0}})
+         {:nativeEvent {:locationX  70
+                        :locationY  70
+                        :timestamp  0
+                        :identifier 0}})
         (h/advance-timers-by-time 500)
         (h/fire-event
          :on-responder-move
          (h/get-by-test-id "record-audio")
-         {:nativeEvent {:locationX -30
-                        :locationY 80
-                        :pageX     -30
-                        :pageY     80}})
+         {:nativeEvent {:locationX  -30
+                        :locationY  80
+                        :pageX      -30
+                        :pageY      80
+                        :identifier 0}})
         (h/fire-event
          :on-responder-release
          (h/get-by-test-id "record-audio")
-         {:nativeEvent {:locationX -10
-                        :locationY 70
-                        :timestamp 200}})
+         {:nativeEvent {:locationX  -10
+                        :locationY  70
+                        :timestamp  200
+                        :identifier 0}})
         (h/advance-timers-by-time 250)
         (-> (js/expect event)
             (.toHaveBeenCalledTimes 1))))))

src/quo2/components/record_audio/record_audio/view.cljs

@@ -143,7 +143,7 @@
   [{:keys [on-init on-start-recording on-send on-cancel on-reviewing-audio
            record-audio-permission-granted
            on-request-record-audio-permission on-check-audio-permissions
-           audio-file]}]
+           audio-file on-lock]}]
   [:f>
    ;; TODO we need to refactor this, and use :f> with defined function, currenly state is reseted each
    ;; time parent component
@@ -172,6 +172,7 @@
            output-file (atom audio-file)
            reached-max-duration? (atom false)
            touch-timestamp (atom nil)
+           touch-identifier (atom nil)
            disabled? (atom false)
            app-state-listener (atom nil)
            rec-options
@@ -260,6 +261,7 @@
                                              #(log/debug "[record-audio] new recorder - on meter")
                                              #(log/debug "[record-audio] new recorder - on ended"))]
                  (reset! touch-timestamp (oops/oget e "nativeEvent.timestamp"))
+                 (reset! touch-identifier (oops/oget e "nativeEvent.identifier"))
                  (when-not @reviewing-audio?
                    (if record-audio-permission-granted
                      (do
@@ -321,6 +323,7 @@
                      location-y              (oops/oget e "nativeEvent.locationY")
                      page-x                  (oops/oget e "nativeEvent.pageX")
                      page-y                  (oops/oget e "nativeEvent.pageY")
+                     identifier              (oops/oget e "nativeEvent.identifier")
                      moved-to-send-button?   (touch-inside-area?
                                               {:location-x    location-x
                                                :location-y    location-y
@@ -360,31 +363,32 @@
                                                record-button-area-big)
                                               (not= location-x page-x)
                                               (not= location-y page-y))]
-                 (cond
-                   (and
-                    (or
-                     (and moved-to-record-button? @ready-to-lock?)
-                     (and (not @locked?) moved-to-lock-button? @record-button-at-initial-position?))
-                    (not @ready-to-delete?)
-                    (not @ready-to-send?)
-                    @recording?)
-                   (reset! ready-to-lock? moved-to-lock-button?)
-                   (and
-                    (or
-                     (and moved-to-record-button? @ready-to-delete?)
-                     (and moved-to-delete-button? @record-button-at-initial-position?))
-                    (not @ready-to-lock?)
-                    (not @ready-to-send?)
-                    @recording?)
-                   (reset! ready-to-delete? moved-to-delete-button?)
-                   (and
-                    (or
-                     (and moved-to-record-button? @ready-to-send?)
-                     (and moved-to-send-button? @record-button-at-initial-position?))
-                    (not @ready-to-lock?)
-                    (not @ready-to-delete?)
-                    @recording?)
-                   (reset! ready-to-send? moved-to-send-button?)))))
+                 (when (= identifier @touch-identifier)
+                   (cond
+                     (and
+                      (or
+                       (and moved-to-record-button? @ready-to-lock?)
+                       (and (not @locked?) moved-to-lock-button? @record-button-at-initial-position?))
+                      (not @ready-to-delete?)
+                      (not @ready-to-send?)
+                      @recording?)
+                     (reset! ready-to-lock? moved-to-lock-button?)
+                     (and
+                      (or
+                       (and moved-to-record-button? @ready-to-delete?)
+                       (and moved-to-delete-button? @record-button-at-initial-position?))
+                      (not @ready-to-lock?)
+                      (not @ready-to-send?)
+                      @recording?)
+                     (reset! ready-to-delete? moved-to-delete-button?)
+                     (and
+                      (or
+                       (and moved-to-record-button? @ready-to-send?)
+                       (and moved-to-send-button? @record-button-at-initial-position?))
+                      (not @ready-to-lock?)
+                      (not @ready-to-delete?)
+                      @recording?)
+                     (reset! ready-to-send? moved-to-send-button?))))))
            on-responder-release
            (fn [^js e]
              (when (and
@@ -439,7 +443,9 @@
                    (and @ready-to-lock? (not @record-button-is-animating?))
                    (do
                      (reset! locked? true)
-                     (reset! ready-to-lock? false))
+                     (reset! ready-to-lock? false)
+                     (when on-lock
+                       (on-lock)))
                    (and (not @reviewing-audio?)
                         (or on-record-button?
                             (and (not @ready-to-delete?)

src/quo2/components/settings/settings_list/style.cljs

@@ -0,0 +1,46 @@
+(ns quo2.components.settings.settings-list.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def title-container
+  {:flex 1})
+
+(defn title
+  []
+  {:color (colors/theme-colors
+           colors/neutral-100
+           colors/white)})
+
+(def icon
+  {:margin-right 12})
+
+(def item-container
+  {:justify-content    :space-between
+   :height             48
+   :flex-direction     :row
+   :align-items        :center
+   :padding-horizontal 12
+   :padding-vertical   13})
+
+(defn dot
+  []
+  {:width            15
+   :height           15
+   :border-radius    8
+   :margin-right     14.5
+   :background-color (colors/theme-colors (colors/custom-color :blue 50)
+                                          (colors/custom-color :blue 60))})
+
+(defn community-icon
+  [index]
+  {:width         24
+   :height        24
+   :border-width  1
+   :border-color  (colors/theme-colors colors/white colors/black)
+   :border-radius 12
+   :position      :absolute
+   :top           "-50%"
+   :right         (* 20 index)})
+
+(def communities-container
+  {:flex         1
+   :margin-right 12})

src/quo2/components/settings/settings_list/view.cljs

@@ -0,0 +1,119 @@
+(ns quo2.components.settings.settings-list.view
+  (:require [quo2.components.settings.settings-list.style :as style]
+            [quo2.components.icon :as icons]
+            [quo2.components.selectors.selectors.view :as selectors]
+            [quo2.components.buttons.button :as button]
+            [quo2.components.markdown.text :as text]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]))
+
+(defn settings-title
+  [title]
+  [rn/view
+   {:style style/title-container}
+   [text/text
+    {:accessibility-label :setting-item-name-text
+     :ellipsize-mode      :tail
+     :style               (style/title)
+     :number-of-lines     1
+     :weight              :medium
+     :size                :paragraph-1}
+    title]])
+
+(defn browser-context-icon
+  []
+  [rn/view
+   [icons/icon :browser-context
+    {:container-style style/icon
+     :color           (colors/theme-colors
+                       colors/neutral-50
+                       colors/neutral-40)}]])
+
+(def chevron-icon
+  [rn/view
+   [icons/icon :chevron-right
+    {:color (colors/theme-colors
+             colors/neutral-50
+             colors/neutral-40)}]])
+
+(defn toggle-button
+  [{:keys [checked?
+           on-change]}]
+  [selectors/toggle
+   {:checked?  checked?
+    :on-change (fn [new-value] (on-change new-value))}])
+
+(def badge-icon
+  [rn/view
+   {:style (style/dot)}])
+
+(defn right-button
+  [{:keys [title
+           on-press]}]
+  [button/button
+   {:type     :outline
+    :on-press on-press
+    :size     24}
+   title])
+
+(defn communities-icons
+  [{:keys [data
+           icon-style]}]
+  (let [communities-count (dec (count data))]
+    [rn/view
+     {:style style/communities-container}
+     (map-indexed
+      (fn [index {:keys [source accessibility-label]}]
+        [rn/image
+         {:key                 source
+          :source              (if (string? source)
+                                 {:uri source}
+                                 source)
+          :accessibility-label accessibility-label
+          :style               (merge (style/community-icon (- communities-count index)) icon-style)}])
+      data)]))
+
+(defn settings-list
+  "Options
+   - `title` String to show in the center of the component, right to the icon and left to optional gadgets.
+   - `on-press` Callback called when the component is pressed.
+   - `accessibility-label` String to use as accessibility-label for VoiceOver.
+   - `left-icon` Symbol to indicate icon type on the left side of the component.
+   - `chevron?` Boolean to show/hide chevron at the right border of the component.
+   - `toggle-prop` Map with the following keys:
+       `checked?` Boolean value to set check or unchecked toggle.
+       `on-change` Callback called when user toggles toggle. Will pass the new toggle value to the callback
+   - `badge?` Boolean to show/hide badge.
+   - `button-props` Map with the following keys:
+       `title` String to show as button text.
+       `on-press` Callback called when button is pressed.
+   - `communities-props` Map with the following keys:
+       `data` Array of maps containg source of the community asset.
+   - `style` Styles map to be merge with default container styles."
+  [{:keys [title
+           on-press
+           accessibility-label
+           left-icon
+           chevron?
+           toggle-props
+           badge?
+           button-props
+           communities-props
+           container-style]}]
+  [rn/touchable-without-feedback
+   {:on-press            on-press
+    :accessibility-label accessibility-label}
+   [rn/view
+    {:style (merge style/item-container container-style)}
+    (case left-icon
+      ;; TODO: Add Icon Avatar on next variants development
+      :browser-context (browser-context-icon)
+      nil)
+    [settings-title title]
+    (when toggle-props
+      (toggle-button toggle-props))
+    (when badge? badge-icon)
+    (when button-props
+      (right-button button-props))
+    (when communities-props (communities-icons communities-props))
+    (when chevron? chevron-icon)]])

src/quo2/components/tabs/segmented_tab.cljs

@@ -10,8 +10,8 @@
    :dark  {:background-color colors/white-opa-5}})
 
 (def themes
-  {:light {:background-color colors/neutral-20}
-   :dark  {:background-color colors/neutral-80}})
+  {:light {:background-color colors/neutral-10}
+   :dark  {:background-color colors/neutral-90}})
 
 (defn segmented-control
   [{:keys [default-active on-change]}]

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

@@ -59,22 +59,22 @@
              {:opacity tab-background-opacity}))))
 
 (def themes
-  {:light {:default  {:background-color colors/neutral-20
+  {:light {:default  {:background-color colors/neutral-10
                       :icon-color       colors/neutral-50
                       :label            {:style {:color colors/neutral-100}}}
            :active   {:background-color colors/neutral-50
                       :icon-color       colors/white
                       :label            {:style {:color colors/white}}}
-           :disabled {:background-color colors/neutral-20
+           :disabled {:background-color colors/neutral-10
                       :icon-color       colors/neutral-50
                       :label            {:style {:color colors/neutral-100}}}}
-   :dark  {:default  {:background-color colors/neutral-80
+   :dark  {:default  {:background-color colors/neutral-90
                       :icon-color       colors/neutral-40
                       :label            {:style {:color colors/white}}}
            :active   {:background-color colors/neutral-60
                       :icon-color       colors/white
                       :label            {:style {:color colors/white}}}
-           :disabled {:background-color colors/neutral-80
+           :disabled {:background-color colors/neutral-90
                       :icon-color       colors/neutral-40
                       :label            {:style {:color colors/white}}}}})
 

src/quo2/components/tags/context_tag/style.cljs

@@ -20,6 +20,7 @@
 
 (def context-tag-text-container
   {:align-items    :center
+   :margin-left    4
    :flex-direction :row})
 
 (def audio-tag-container

src/quo2/components/tags/context_tag/view.cljs

@@ -47,23 +47,24 @@
         empty-photo?      (empty? photo)
         avatar-size       :xxs
         avatar-outer-size (get-in user-avatar-style/sizes [avatar-size :outer])]
-    [base-tag (assoc-in params [:style :padding-left] 3)
-     (if (and empty-photo? no-avatar-placeholder?)
-       [rn/view {:style {:width avatar-outer-size}}]
-       [user-avatar/user-avatar
-        {:full-name         name
-         :profile-picture   photo
-         :size              avatar-size
-         :status-indicator? false}])
-     [rn/view {:style style/context-tag-text-container}
-      [text/text text-params (str " " name)]
-      (when channel-name
-        [:<>
-         [icons/icon
-          :i/chevron-right
-          {:color (style/context-tag-icon-color blur?)
-           :size  16}]
-         [text/text text-params (str "# " channel-name)]])]]))
+    [rn/view {:flex-direction :row}
+     [base-tag (assoc-in params [:style :padding-left] 3)
+      (if (and empty-photo? no-avatar-placeholder?)
+        [rn/view {:style {:width avatar-outer-size}}]
+        [user-avatar/user-avatar
+         {:full-name         name
+          :profile-picture   photo
+          :size              avatar-size
+          :status-indicator? false}])
+      [rn/view {:style style/context-tag-text-container}
+       [text/text text-params (str " " name)]
+       (when channel-name
+         [:<>
+          [icons/icon
+           :i/chevron-right
+           {:color (style/context-tag-icon-color blur?)
+            :size  16}]
+          [text/text text-params (str "# " channel-name)]])]]]))
 
 (defn user-avatar-tag
   [params username photo]

src/quo2/components/tags/permission_tag.cljs

@@ -132,7 +132,7 @@
 
 (defn tag
   [_ _]
-  (fn [{:keys [locked tokens size background-color on-press]
+  (fn [{:keys [locked? tokens size background-color on-press]
         :or   {size 24}}]
     [base-tag/base-tag
      {:background-color background-color
@@ -151,7 +151,7 @@
                          32 16
                          24 12)}
        [icons/icon
-        (if locked
+        (if locked?
           :i/locked
           :i/unlocked)
         {:resize-mode :center

src/quo2/components/tags/token_tag.cljs

@@ -39,8 +39,9 @@
     :overlay child-elements
     }"
   [_ _]
-  (fn [{:keys [size token-img-src token-img-style border-color overlay]
-        :or   {size :small}} label]
+  (fn [{:keys [size img-src img-style border-color overlay]
+        :or   {size :small}}
+       label]
     [rn/view
      {:style (when border-color
                {:border-color  border-color
@@ -49,13 +50,13 @@
      [rn/view
       {:style (merge (tag-container size) (get themes (theme/get-theme)))}
       [rn/image
-       {:source token-img-src
-        :style  (merge
-                 {:height       (get-value-from-size size 28 20)
-                  :width        (get-value-from-size size 28 20)
-                  :margin-left  2
-                  :margin-right (get-value-from-size size 8 6)}
-                 token-img-style)}]
+       {:src   img-src
+        :style (merge
+                {:height       (get-value-from-size size 28 20)
+                 :width        (get-value-from-size size 28 20)
+                 :margin-left  2
+                 :margin-right (get-value-from-size size 8 6)}
+                img-style)}]
       [text/text
        {:weight :medium
         :number-of-lines 1
@@ -64,38 +65,58 @@
         :size (get-value-from-size size :paragraph-2 :label)} label]
       overlay]]))
 
+(defn loading-icon
+  []
+  [rn/view
+   {:style {:align-items     :center
+            :justify-content :center
+            :position        :absolute
+            :right           -8
+            :top             -8}}
+   [icons/icon :t/checktoken
+    {:no-color true
+     :size     20}]])
+
+(defn icon
+  [size border-color sufficient?]
+  [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 sufficient? :i/hold :i/add)
+    {:no-color true
+     :size     12}]])
+
 (defn token-tag
   "[token-tag opts]
    opts
    {
-    :token string
+    :symbol string
     :value string
     :size :small/:big
     :token-img-src :token-img-src
     :border-color :color
-    :is-required true/false
-    :is-purchasable true/false
+    :sufficient? true/false
+    :purchasable? true/false
+    :loading? true/false
     }"
   [_ _]
-  (fn [{:keys [token value size token-img-src border-color is-required is-purchasable]
+  (fn [{:keys [symbol value size img-src border-color purchasable? sufficient? loading?]
         :or
-        {size :small border-color (colors/custom-color-by-theme :purple 50 60)}}]
-
-    [tag
-     {:size size
-      :token-img-src token-img-src
-      :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 :i/hold :i/add)
-          {:no-color true
-           :size     12}]])}
-     (str value " " token)]))
+        {size :small}}]
+    (let [sufficient?  (when-not loading? sufficient?)
+          border-color (if sufficient? colors/success-50 border-color)]
+      [tag
+       {:size size
+        :img-src img-src
+        :border-color (if sufficient? colors/success-50 border-color)
+        :overlay
+        (if loading?
+          [loading-icon]
+          (when (or purchasable? sufficient?)
+            [icon size border-color sufficient?]))}
+       (str value " " symbol)])))

src/quo2/core.cljs

@@ -15,7 +15,7 @@
     quo2.components.community.community-card-view
     quo2.components.community.community-list-view
     quo2.components.community.community-view
-    quo2.components.community.discover-card
+    quo2.components.community.banner.view
     quo2.components.community.icon
     quo2.components.community.token-gating
     quo2.components.counter.counter
@@ -83,7 +83,8 @@
     quo2.components.tags.tag
     quo2.components.tags.tags
     quo2.components.tags.token-tag
-    quo2.components.text-combinations.title.view))
+    quo2.components.text-combinations.title.view
+    quo2.components.settings.settings-list.view))
 
 (def text quo2.components.markdown.text/text)
 (def icon quo2.components.icon/icon)
@@ -143,9 +144,9 @@
 (def community-tags quo2.components.community.community-view/community-tags)
 (def community-title quo2.components.community.community-view/community-title)
 (def permission-tag-container quo2.components.community.community-view/permission-tag-container)
-(def discover-card quo2.components.community.discover-card/discover-card)
-(def token-gating quo2.components.community.token-gating/token-gating)
+(def discover-card quo2.components.community.banner.view/view)
 (def community-icon quo2.components.community.icon/community-icon)
+(def token-requirement-list quo2.components.community.token-gating/token-requirement-list)
 
 ;;;; COUNTER
 (def counter quo2.components.counter.counter/counter)
@@ -198,6 +199,7 @@
 ;;;; SETTINGS
 (def privacy-option quo2.components.settings.privacy-option/card)
 (def account quo2.components.settings.accounts.view/account)
+(def settings-list quo2.components.settings.settings-list.view/settings-list)
 
 ;;;; SHARE
 (def qr-code quo2.components.share.qr-code.view/qr-code)

src/quo2/core_spec.cljs

@@ -14,6 +14,7 @@
     [quo2.components.drawers.drawer-buttons.component-spec]
     [quo2.components.drawers.permission-context.component-spec]
     [quo2.components.inputs.input.component-spec]
+    [quo2.components.keycard.component-spec]
     [quo2.components.inputs.profile-input.component-spec]
     [quo2.components.inputs.recovery-phrase.component-spec]
     [quo2.components.inputs.title-input.component-spec]

src/quo2/foundations/colors.cljs

@@ -262,7 +262,7 @@
      (custom-color color suffix-dark opacity-dark)
      (custom-color color suffix-light opacity-light))))
 
-(def shadow "rgba(9,16,28,0.04)")
+(def shadow "rgba(9,16,28,0.08)")
 
 ;;General
 

src/quo2/theme.cljs

@@ -13,4 +13,12 @@
 
 (defn set-theme
   [value]
-  (reset! theme value))
+  (reset! theme value))
+
+(defn theme-value
+  "Returns a value based on the current/override-theme theme."
+  ([light-value dark-value]
+   (theme-value light-value dark-value nil))
+  ([light-value dark-value override-theme]
+   (let [theme (or override-theme (get-theme))]
+     (if (= theme :light) light-value dark-value))))

src/status_im/bottom_sheet/sheets.cljs

@@ -3,8 +3,6 @@
             [status-im.ui.screens.about-app.views :as about-app]
             [status-im.ui.screens.keycard.views :as keycard]
             [status-im.ui.screens.mobile-network-settings.view :as mobile-network-settings]
-            [status-im.ui.screens.multiaccounts.key-storage.views :as key-storage]
-            [status-im.ui.screens.multiaccounts.recover.views :as recover.views]
             [status-im.bottom-sheet.view :as bottom-sheet]
             [react-native.core :as rn]))
 
@@ -30,13 +28,7 @@
           (merge keycard/more-sheet)
 
           (= view :learn-more)
-          (merge about-app/learn-more)
-
-          (= view :recover-sheet)
-          (merge recover.views/bottom-sheet)
-
-          (= view :migrate-account-password)
-          (merge key-storage/migrate-account-password))]
+          (merge about-app/learn-more))]
 
     [:f>
      (fn []

src/status_im/chat/models/input.cljs

@@ -66,6 +66,11 @@
   (let [current-chat-id (or chat-id (:current-chat-id db))]
     {:db (assoc-in db [:chat/inputs current-chat-id :audio] audio)}))
 
+(rf/defn set-recording
+  {:events [:chat.ui/set-recording]}
+  [{db :db} recording?]
+  {:db (assoc db :chats/recording? recording?)})
+
 (rf/defn select-mention
   {:events [:chat.ui/select-mention]}
   [{:keys [db] :as cofx} text-input-ref {:keys [primary-name searched-text match public-key] :as user}]

src/status_im/chat/models/mentions.cljs

@@ -115,7 +115,7 @@
 (rf/defn on-change-text-success
   {:events [:mention/on-change-text-success]}
   [{:keys [db]} result]
-  (log/debug "[mentions] on-text-input-success" {:result result})
+  (log/debug "[mentions] on-change-text-success" {:result result})
   (let [{:keys [state chat-id mentionable-users input-segments]} (transfer-mention-result result)]
     {:db (-> db
              (assoc-in [:chats/mention-suggestions chat-id] mentionable-users)

src/status_im/chat/models/reactions.cljs

@@ -15,7 +15,7 @@
     (assoc-in acc [chat-id message-id emoji-id emoji-reaction-id] reaction)))
 
 (defn process-reactions
-  [chats]
+  [_]
   (fn [reactions new-reactions]
     ;; TODO(Ferossgp): handling own reaction in subscription could be expensive,
     ;; for better performance we can here separate own reaction into 2 maps
@@ -23,14 +23,7 @@
      (fn [acc
           {:keys [chat-id message-id emoji-id emoji-reaction-id retracted]
            :as   reaction}]
-       (cond-> (update-reaction acc retracted chat-id message-id emoji-id emoji-reaction-id reaction)
-         (get-in chats [chat-id :profile-public-key])
-         (update-reaction retracted
-                          constants/timeline-chat-id
-                          message-id
-                          emoji-id
-                          emoji-reaction-id
-                          reaction)))
+       (update-reaction acc retracted chat-id message-id emoji-id emoji-reaction-id reaction))
      reactions
      new-reactions)))
 
@@ -84,10 +77,6 @@
   (message.protocol/send-retract-reaction cofx
                                           (update reaction :chat-id #(or % current-chat-id))))
 
-(rf/defn receive-one
-  {:events [::receive-one]}
-  [{:keys [db]} reaction]
-  {:db (update db :reactions (process-reactions (:chats db)) [reaction])})
 
 (defn message-reactions
   [current-public-key reactions]

src/status_im/chat/models/transport.cljs

@@ -1,14 +0,0 @@
-;;this ns is needed because of cycled deps
-(ns status-im.chat.models.transport
-  (:require [status-im.chat.models.message :as chat.message]
-            [status-im.transport.message.core :as transport.message]
-            [utils.re-frame :as rf]))
-
-(rf/defn chat-ui-resend-message
-  {:events [:chat.ui/resend-message]}
-  [{:keys [db] :as cofx} chat-id message-id]
-  (let [message (get-in db [:messages chat-id message-id])]
-    (rf/merge
-     cofx
-     (transport.message/set-message-envelope-hash chat-id message-id (:message-type message))
-     (chat.message/resend-message chat-id message-id))))

src/status_im/communities/core.cljs

@@ -26,10 +26,6 @@
        "/c/"
        community-id))
 
-(def featured
-  [{:name "Status"
-    :id   constants/status-community-id}])
-
 (defn <-request-to-join-community-rpc
   [r]
   (set/rename-keys r
@@ -74,13 +70,19 @@
                         :canJoin                     :can-join?
                         :requestedToJoinAt           :requested-to-join-at
                         :isMember                    :is-member?
-                        :adminSettings               :admin-settings})
+                        :adminSettings               :admin-settings
+                        :tokenPermissions            :token-permissions
+                        :communityTokensMetadata     :tokens-metadata})
       (update :admin-settings
               set/rename-keys
               {:pinMessageAllMembersEnabled :pin-message-all-members-enabled?})
       (update :members walk/stringify-keys)
       (update :chats <-chats-rpc)
-      (update :categories <-categories-rpc)))
+      (update :categories <-categories-rpc)
+      (assoc :token-images
+             (reduce (fn [acc {:keys [symbol image]}] (assoc acc symbol image))
+                     {}
+                     (:communityTokensMetadata c)))))
 
 (defn- fetch-community-id-input
   [{:keys [db]}]
@@ -174,6 +176,7 @@
   (let [community-name (aget response-js "communities" 0 "name")]
     (rf/merge cofx
               (handle-response cofx response-js)
+              (navigation/hide-bottom-sheet)
               (toasts/upsert {:icon       :correct
                               :icon-color (:positive-01 @colors/theme)
                               :text       (i18n/label
@@ -215,14 +218,12 @@
 
 (rf/defn join
   {:events [:communities/join]}
-  [cofx community-id]
+  [_ community-id]
   {:json-rpc/call [{:method      "wakuext_joinCommunity"
                     :params      [community-id]
                     :js-response true
                     :on-success  #(re-frame/dispatch [::joined %])
-                    :on-error    #(do
-                                    (log/error "failed to join community" community-id %)
-                                    (re-frame/dispatch [::failed-to-join %]))}]})
+                    :on-error    #(log/error "failed to join community" community-id %)}]})
 
 (rf/defn request-to-join
   {:events [:communities/request-to-join]}
@@ -231,9 +232,24 @@
                     :params      [{:communityId community-id}]
                     :js-response true
                     :on-success  #(re-frame/dispatch [:communities/requested-to-join %])
-                    :on-error    (fn []
-                                   (log/error "failed to request to join community" community-id)
-                                   (re-frame/dispatch [::failed-to-request-to-join]))}]})
+                    :on-error    #(log/error "failed to request to join community" community-id)}]})
+
+(rf/defn requested-to-join-with-password-error
+  {:events [:communities/requested-to-join-with-password-error]}
+  [{:keys [db]} error]
+  {:db (assoc-in db [:password-authentication :error] error)})
+
+(rf/defn request-to-join-with-password
+  {:events [:communities/request-to-join-with-password]}
+  [_ community-id password]
+  {:json-rpc/call [{:method      "wakuext_requestToJoinCommunity"
+                    :params      [{:communityId community-id :password password}]
+                    :js-response true
+                    :on-success  #(re-frame/dispatch [:communities/requested-to-join %])
+                    :on-error    (fn [error]
+                                   (log/error "failed to request to join community" community-id error)
+                                   (re-frame/dispatch [:communities/requested-to-join-with-password-error
+                                                       error]))}]})
 
 (rf/defn get-user-requests-to-join
   {:events [:communities/get-user-requests-to-join]}

src/status_im/events.cljs

@@ -10,7 +10,6 @@
     status-im.chat.models.images
     status-im.chat.models.input
     status-im.chat.models.loading
-    status-im.chat.models.transport
     [status-im2.constants :as constants]
     status-im.contact.block
     status-im.contact.chat
@@ -63,7 +62,8 @@
     [react-native.core :as rn]
     [react-native.platform :as platform]
     status-im2.contexts.chat.home.events
-    status-im2.contexts.communities.home.events))
+    status-im2.contexts.communities.home.events
+    status-im.ui.components.invite.events))
 
 (re-frame/reg-fx
  :dismiss-keyboard

src/status_im/signals/core.cljs

@@ -11,7 +11,6 @@
             [status-im2.contexts.chat.messages.link-preview.events :as link-preview]
             [taoensso.timbre :as log]
             [status-im2.constants :as constants]
-            [quo2.foundations.colors :as colors]
             [status-im.multiaccounts.model :as multiaccounts.model]))
 
 (rf/defn status-node-started
@@ -33,7 +32,7 @@
                          ;; in case of an unknown error we show the
                          ;; error
                          (if (= error "file is not a database")
-                           (i18n/label :t/oops-wrong-password)
+                           (i18n/label :t/wrong-password)
                            error)))}
       (= (:view-id db) :progress)
       (assoc :dispatch [:navigate-to :login]))
@@ -73,25 +72,18 @@
         ;; since `connection-success` event is received on both sender and receiver devices
         ;; we check the `logged-in?` status to identify the receiver and take the user to next screen
         navigate-to-syncing-devices?    (and connection-success? (not logged-in?))
-        user-in-syncing-devices-screen? (= (:view-id db) :syncing-devices)]
+        user-in-syncing-devices-screen? (= (:view-id db) :syncing-progress)]
     (merge {:db (cond-> db
                   connection-success?
-                  (assoc-in [:syncing :pairing-in-progress?] true)
+                  (assoc-in [:syncing :pairing-in-progress?] :connected)
 
                   error-on-pairing?
-                  (update-in [:syncing :pairing-in-progress?] dissoc)
+                  (assoc-in [:syncing :pairing-in-progress?] :error)
 
                   completed-pairing?
-                  (assoc-in [:syncing :pairing-in-progress?] false))}
-           (when navigate-to-syncing-devices?
-             {:dispatch [:navigate-to :syncing-devices]})
-           (when (and error-on-pairing? user-in-syncing-devices-screen?)
-             {:dispatch-n [[:toasts/upsert
-                            {:icon           :i/info
-                             :icon-color     colors/danger-50
-                             :override-theme :light
-                             :text           (i18n/label :t/error-syncing-connection-failed)}]
-                           [:navigate-back]]})
+                  (assoc-in [:syncing :pairing-in-progress?] :completed))}
+           (when (and navigate-to-syncing-devices? (not user-in-syncing-devices-screen?))
+             {:dispatch [:navigate-to :syncing-progress]})
            (when completed-pairing?
              {:dispatch [:syncing/pairing-completed]}))))
 

src/status_im/ui/components/invite/events.cljs

@@ -11,7 +11,7 @@
    (.share ^js react/sharing (clj->js content))))
 
 (rf/defn share-link
-  {:events [::share-link]}
+  {:events [:invite.events/share-link]}
   [{:keys [db]}]
   (let [{:keys [public-key preferred-name]} (get db :multiaccount)
         profile-link                        (universal-links/generate-link :user

src/status_im/ui/components/invite/views.cljs

@@ -1,13 +1,12 @@
 (ns status-im.ui.components.invite.views
   (:require [quo.core :as quo]
             [re-frame.core :as re-frame]
-            [utils.i18n :as i18n]
-            [status-im.ui.components.invite.events :as invite.events]))
+            [utils.i18n :as i18n]))
 
 (defn button
   []
   [quo/button
-   {:on-press            #(re-frame/dispatch [::invite.events/share-link nil])
+   {:on-press            #(re-frame/dispatch [:invite.events/share-link nil])
     :accessibility-label :invite-friends-button}
    (i18n/label :t/invite-friends)])
 
@@ -21,7 +20,7 @@
     :on-press            (fn []
                            (re-frame/dispatch [:bottom-sheet/hide-old])
                            (js/setTimeout
-                            #(re-frame/dispatch [::invite.events/share-link nil])
+                            #(re-frame/dispatch [:invite.events/share-link nil])
                             250))}])