Merge branch 'develop' into 17827

remove empty files
[17634] Start rendering syncing UI ASAP (#17755 )
2023-11-13 16:58:28 +02:00 · 2023-11-13 14:50:45 +01:00 · 2023-11-13 12:15:53 +01:00 · 2023-11-13 14:43:43 +04:00 · 2023-11-13 14:25:44 +04:00 · 2023-11-13 02:27:36 +02:00
355 changed files with 6139 additions and 4954 deletions
@@ -1,2 +1,2 @@
-{:hooks   {:analyze-call {utils.i18n/label hooks.core/i18n-label}}
+{:hooks   {:analyze-call {utils.i18n/label utils.i18n/label}}
 :linters {:status-im.linter/invalid-translation-keyword {:level :error}}}
@@ -1,19 +0,0 @@
-(ns hooks.core
-  (:require [clj-kondo.hooks-api :as api]))
-
-(defn i18n-label
-  "Verify call to `i18n/label` pass the translation keyword qualified with `t`."
-  [{:keys [node]}]
-  (let [[_ translation-key-node & _] (:children node)]
-    (when (and (api/keyword-node? translation-key-node)
-               (not= "t" (-> translation-key-node api/sexpr namespace)))
-      (api/reg-finding! (assoc (meta translation-key-node)
-                               :message "Translation keyword should be qualified with \"t\""
-                               :type    :status-im.linter/invalid-translation-keyword)))))
-
-(comment
-  ;; Valid
-  (i18n-label {:node (api/parse-string "(i18n/label :t/foo)")})
-
-  ;; Invalid
-  (i18n-label {:node (api/parse-string "(i18n/label :foo)")}))
@@ -0,0 +1,26 @@
+(ns utils.i18n
+  (:require [clj-kondo.hooks-api :as hooks]))
+
+(defn label
+  "Verify call to `utils.i18n/label` pass the translation keyword qualified with `t`."
+  [{:keys [node]}]
+  (let [[_ translation-key-node & _] (:children node)]
+    (when (and (hooks/keyword-node? translation-key-node)
+               (not= "t" (-> translation-key-node hooks/sexpr namespace)))
+      (hooks/reg-finding! (assoc (meta translation-key-node)
+                                 :message "Translation keyword should be qualified with \"t\""
+                                 :type    :status-im.linter/invalid-translation-keyword)))))
+
+(comment
+  ;; Valid
+  (label {:node     (hooks/parse-string "(i18n/label :t/foo {:var \"hello\"})")
+          :cljc     false
+          :lang     :cljs
+          :filename ""
+          :config   {}
+          :ns       ""
+          :context  nil})
+
+  ;; Invalid
+  (label {:node (hooks/parse-string "(i18n/label :foo)")})
+)
@@ -190,3 +190,7 @@ test/appium/tests/users.py

 ## git hooks
 lefthook.yml
+
+## clj-kondo
+/.clj-kondo/taoensso/*
+/.clj-kondo/babashka/*
@@ -7,3 +7,4 @@ modules
 result
 target
 component-spec
+/app
@@ -274,11 +274,11 @@ run-re-frisk: ##@run Start re-frisk server
 # TODO: Migrate this to a Nix recipe, much the same way as nix/mobile/android/targets/release-android.nix
 run-android: export TARGET := android
 # INFO: If it's empty (no devices attached, parsing issues, script error) - for Nix it's the same as not set.
-run-android: export ANDROID_ABI_INCLUDE ?= $(shell ./scripts/adb_devices_arch.sh)
+run-android: export ANDROID_ABI_INCLUDE ?= $(shell ./scripts/adb_devices_abis.sh)
 run-android: ##@run Build Android APK and start it on the device
 	npx react-native run-android --appIdSuffix debug

-SIMULATOR=iPhone 11 Pro
+SIMULATOR=iPhone 13
 run-ios: export TARGET := ios
 run-ios: export IOS_STATUS_GO_TARGETS := iossimulator/amd64
 run-ios: ##@run Build iOS app and start it in a simulator/device
@@ -312,8 +312,10 @@ lint: export TARGET := clojure
 lint: export CLJ_LINTER_PRINT_WARNINGS ?= false
 lint: ##@test Run code style checks
 	@sh scripts/lint-re-frame-in-quo-components.sh && \
+	sh scripts/lint-direct-require-component-outside-quo.sh && \
 	clj-kondo --config .clj-kondo/config.edn --cache false --fail-level error --lint src $(if $(filter $(CLJ_LINTER_PRINT_WARNINGS),true),,| grep -v ': warning: ') && \
 	ALL_CLOJURE_FILES=$(call find_all_clojure_files) && \
+	scripts/lint_translations.clj && \
 	zprint '{:search-config? true}' -sfc $$ALL_CLOJURE_FILES && \
 	sh scripts/lint-trailing-newline.sh && \
 	node_modules/.bin/prettier --write .
@@ -26,6 +26,8 @@

 [Creating a pixel perfect UI](pixel-perfection.md)

+[Contributing to status-go](status-go-changes.md)
+
 ## Testing

 [How to run local tests](testing.md)
@@ -23,7 +23,7 @@ setups and runs the test suite once.
 setups and runs the test suite and watches for code changes will then retrigger the test suite.

 ## Writing Tests
-New test files will need their namespace added to either the file "src/quo2/core_spec.cljs" or "src/status_im2/core_spec.cljs. These locations may update overtime but it is dependent on the entrypoint in shadow-cljs config discussed below.
+New test files will need their namespace added to either the file "src/quo/core_spec.cljs" or "src/status_im2/core_spec.cljs. These locations may update overtime but it is dependent on the entrypoint in shadow-cljs config discussed below.


 ### Best practices
@@ -18,7 +18,7 @@ While neat in theory, it has some serious downsides:
  As a result of that, more dynamic/state requiring things (like the live tx detail in `/send` command messages) were very hard to do,
  so instead of "eating our own dogfood", we decided to side-step the API and implement such things as hard-coded logic in the app, while partly
  retaining the js code for "easier" things (like parameter declaration).
-  Needles to say, such efforts produced code of very poor quality, riddling our app with hard-coded "magic" everywhere in the codebase, completly
+  Needles to say, such efforts produced code of very poor quality, riddling our app with hard-coded "magic" everywhere in the codebase, completely
  defeating the point of "dogfooding" while still requiring more effort and being much more error prone (no way to unit test jail logic) because 
  of the need to asynchronously communicate with jail for leftover logic in command messages (the parts not hardcoded in app).
  
@@ -13,7 +13,7 @@ accepted

 There was a generally dissatisfaction with our PR flow process from multiple stakeholders, including devs, QA and design. These largely centered around size, speed of integration and quality of PRs.

-For more details, please see pain points in the meeting notes held end of February here: https://notes.status.im/C5pj8g7gQOu9Wo8PtDZsMw?edit# as well as the preceeding Discuss thread: https://discuss.status.im/t/better-pull-requests-process/1044
+For more details, please see pain points in the meeting notes held end of February here: https://notes.status.im/C5pj8g7gQOu9Wo8PtDZsMw?edit# as well as the preceding Discuss thread: https://discuss.status.im/t/better-pull-requests-process/1044

 Also see conversations in Core Dev Call #12 and #13: https://github.com/status-im/pm/

@@ -18,7 +18,7 @@ The whitepaper also proposes that the deposit is only forfeited to the recipient

 Considering:
 - the absence of efficient ways to perform anonymous transactions (zk-snarks could be used in the future for that)
- the impossibility to prove that a recipient has made an actual reply and not some kind of automated reply (captcha solution was proposed, but wouldn't be pratical until we can use a solution such as swarm feeds that allow users to make free updates to their captcha without on-chain transactions)
+- the impossibility to prove that a recipient has made an actual reply and not some kind of automated reply (captcha solution was proposed, but wouldn't be practical until we can use a solution such as swarm feeds that allow users to make free updates to their captcha without on-chain transactions)
 - the limited time to develop the feature

 We opted for a solution that:
@@ -28,8 +28,8 @@ We opted for a solution that:

 ## Manifests

-Since TtT related informations aren't stored on chain, they need to be stored somewhere else.
-For the first iteration of TtT we opted for IPFS, which is already used accross the app for other forms of content, through Infura IPFS gateway.
+Since TtT related information aren't stored on chain, they need to be stored somewhere else.
+For the first iteration of TtT we opted for IPFS, which is already used across the app for other forms of content, through Infura IPFS gateway.

 On IPFS we store what we call a ttt manifest, which is a json file with the following format:

@@ -4,7 +4,7 @@

 ![](images/export-icons/export-icons.gif)

-1. Export from figma 2 pngs 2x and 3x put them in `./resources/images/icons`
+1. Export from figma 2 pngs 2x and 3x put them in `./resources/images/icons2`
 2. if necessary, rename file so that filename contains only lower case chars, e.g. `"Icon-Name@2x.png"` should be renamed to `"icon_name@2x.png"`.
 3. In the app `icon_name.png` still can be accessed as `icon-name`, so in order to use can add the next code:
    ```clojure
@@ -64,7 +64,7 @@ tests (otherwise some PRs could wait their turn of the scheduled Jenkins job til

 ## Analysing test results (and why test fails to pass)

-After automated test run finished test results could be found in GH comment (if the test suite ran agaist PR) and TestRail. There are two states of the test: Passed and Failed. Test failure happens when certain condition of test step has not met or automated test can not proceed execution because it can not find the respective element on screen it expects should be there.
+After automated test run finished test results could be found in GH comment (if the test suite ran against PR) and TestRail. There are two states of the test: Passed and Failed. Test failure happens when certain condition of test step has not met or automated test can not proceed execution because it can not find the respective element on screen it expects should be there.

 Several examples of when test fails to succeed:

@@ -76,7 +76,7 @@ It's important to name functional components with `f-` prefix.

 ### Component props and API scheme to match Figma as closely as possible

-Ideally, the prop names for components (particularly in quo2 Design System)
+Ideally, the prop names for components (particularly in quo Design System)
 should match the Figma properties as best as possible. This makes it easier for
 the developer using that component to configure it correctly for the screen it
 is being used on and avoids unnecessary overwrites and adjustments being made.
@@ -134,7 +134,7 @@ For example if Figma has sizes `:small`, `:medium` and `:large`

 Prefer to define styles in a separate file named `style.cljs`, colocated with
 the source file. For a real example, see
-[src/quo2/components/record_audio/record_audio/style.cljs](../src/quo2/components/record_audio/record_audio/style.cljs).
+[src/quo/components/record_audio/record_audio/style.cljs](../src/quo/components/record_audio/record_audio/style.cljs).

 ```clojure
 ;; bad
@@ -467,9 +467,9 @@ Prefer the pure version of `:json-rpc/call` (no callbacks).

 ### Registering event handlers

-Register events with `re-frame.core/reg-event-fx` and follow [re-frame's best
+Register events with `utils.re-frame/reg-event-fx` and follow [re-frame's best
 practice](https://github.com/day8/re-frame/blob/39adca93673f334dc751ee2d99d340b51a9cc6db/docs/FAQs/BestPractice.md#use-the-fx-effect)
-so use only `:db` and `:fx` effects. `rf/merge` is deprecated and should not be
+so use only `:db` and `:fx` effects. `utils.re-frame/merge` and `utils.re-frame/defn` are deprecated and should not be
 used in the new code in `src/status_im2/`. Don't use
 `re-frame.core/reg-event-db`.

@@ -528,27 +528,27 @@ due to performance constraints.
   (:preferred-name multiaccount)))
 ```

-### Requiring quo2 components
+### Requiring quo components

-Consume `quo2` components from `quo2.core`, unless the namespace is also inside
-the `quo2/` directory.
+Consume `quo` components from `quo.core`, unless the namespace is also inside
+the `quo/` directory.

 ```clojure
 ;; bad
 (ns my-namespace
-  (:require [quo2.components.icon :as icon]))
+  (:require [quo.components.icon :as icon]))

 (icon/icon :i/verified)

 ;; good
 (ns my-namespace
-  (:require [quo2.core :as quo]))
+  (:require [quo.core :as quo]))

 (quo/icon :i/verified)

-;; also good because both namespaces are inside quo2/
-(ns quo2.components.tabs.account-selector
-  (:require [quo2.components.markdown.text :as text]))
+;; also good because both namespaces are inside quo/
+(ns quo.components.tabs.account-selector
+  (:require [quo.components.markdown.text :as text]))
 ```

 ### Require/import
@@ -615,12 +615,12 @@ Use the appropriate keyword qualification/namespace.

 ```clojure
 ;; bad
-(require '[quo2.components.icon :as icons])
+(require '[quo.components.icon :as icons])
 (icons/icon :main-icons2/verified)

 ;; good
-(require '[quo2.core :as quo2])
-(quo2/icon :i/verified)
+(require '[quo.core :as quo])
+(quo/icon :i/verified)
 ```

 ### Translations
@@ -695,7 +695,7 @@ First, the bird's-eye view with some example ClojureScript files:
 src
 ├── js/
 ├── mocks/
-├── quo2
+├── quo
 │   ├── components/
 │   ├── foundations/
 │   └── theme.cljs
@@ -716,7 +716,7 @@ src

 - `src/js`: Raw Javascript files, e.g. React Native Reanimated worklets.
 - `src/mocks`: Plumbing configuration to be able to run tests.
- `src/quo2/`: The component library for Status Mobile.
+- `src/quo/`: The component library for Status Mobile.
 - `src/react_native/`: Contains only low-level constructs to help React Native
  work in tandem with Clojure(Script).
 - `src/status_im2/`: Directory where we try to be as strict as possible about
@@ -728,7 +728,7 @@ src
  of the directory tree. Just like directories named `utils`, their directory
  nesting level communicates their applicable limits.
 - `src/status_im2/common/components/`: Contains reusable components that are not
-  part of the design system (quo2).
+  part of the design system (quo).
 - `src/status_im2/contexts/`: Contains [bounded contexts](#glossary), like
  `browser/`, `messaging/`, etc. As much as possible, _bounded contexts_ should
  not directly require each other's namespaces.
@@ -743,9 +743,9 @@ directory nesting level precisely indicates its boundaries. For example, a
 `contexts/user_settings/utils/datetime.cljs` file communicates that it should
 only be used in the `user_settings` context.

-### src/quo2
+### src/quo

-The `src/quo2/` directory holds all components for the new design system. As
+The `src/quo/` directory holds all components for the new design system. As
 much as possible, its sub-directories and component names should reflect the
 same language used by designers.

@@ -753,14 +753,14 @@ Even though the directory lives alongside the rest of the codebase, we should
 think of it as an external entity that abstracts away particular Status domain
 knowledge.

-Components inside `src/quo2/` should not rely on re-frame, i.e. they should not
+Components inside `src/quo/` should not rely on re-frame, i.e. they should not
 dispatch events or use subscriptions.

 Example structure:

 ```
 src
-└── quo2
+└── quo
    ├── components
    │   └── dropdown
    │       ├── style.cljs
@@ -1,7 +1,7 @@
 # Patching

 ## Libraries
-If 3rd party library has an issue and fix is not yet released (or we can't switch to a new release), we use forks. Fix should be commited to the fork, tagged and referenced from package.json.
+If 3rd party library has an issue and fix is not yet released (or we can't switch to a new release), we use forks. Fix should be committed to the fork, tagged and referenced from package.json.

 Example: [`react-native-hole-view`](https://github.com/status-im/react-native-hole-view#refs/tags/v2.1.1-status)

@@ -1,16 +1,22 @@
 # Pixel Perfection
 The Status Mobile team aims to align the design implementation perfectly according to a given screens respective Figma design spec.

-Currently the Figma Designs match up with an "iPhone 11 Pro" screen size. 
+Currently, the Figma Designs match up with both "iPhone 11 Pro" and "iPhone 13" screen size.
+
+The Dimension reference for iPhone 11 Pro is 375 x 812 (width x height) and for iPhone 13 is 390 x 844.

 To test your implementation is correct you can take the following steps

 - Open a new Figma file so that you have write privileges. 
+
 - Copy in the component or screen from the Figma file.

- Using the "iPhone 11 Pro" simulator (it is the default now) you take a screenshot of your component and paste it into your Figma file.
+- Using the "iPhone 11 Pro" or the "iPhone 13" simulator (it is the default now) you take a screenshot of your component and paste it into your Figma file.
+
+- To get the right size, set your screenshot to width according to your simulator: 
+  - for iPhone 13 set 390
+  - for iPhone 11 Pro set 375

- To get the right size, set your screenshot to width 375px

 ![](images/pixel-perfection/layer-width.png)

@@ -13,7 +13,7 @@ QA process was focused on account creation and login with keycard, and this bug

 ## Resolution process

- the commit was reverted locally by the developer which fixed the issue localy and confirmed the faulty commit
+- the commit was reverted locally by the developer which fixed the issue locally and confirmed the faulty commit
 - the bug was only reproducible on iOS which strongly hinted at a potential issue with native code
 - the missing method was not the origin of the problem but was found at this point and further analysis lead to the shadowing error

@@ -30,23 +30,23 @@ You need to have an emulator like [AVD](https://developer.android.com/studio/run

 #### Running on a simulator

-We highly recommend using the `iPhone 11 Pro` simulator as its screen dimensions match with our design.
+We highly recommend using either the `iPhone 11 Pro` or `iPhone 13` simulator as its screen dimensions match with our design.

-If you have Xcode `v12.x` (and above) installed in your system, you need to follow the below steps to add `iPhone 11 Pro` simulator:
+If you have Xcode `v12.x` (and above) installed in your system, you need to follow the below steps to add `iPhone 13` simulator:

 1. Open Xcode
 2. Menu `>` Window `>` Devices and Simulators
 3. Tap `+` button on bottom left
-4. Select **Device Type** as `iPhone 11 Pro`
+4. Select **Device Type** as `iPhone 13`
 5. Leave the **Simulator Name** empty and tap on **Create**

 ##### NOTE ⚠️

-Running `make run-ios` will target `iPhone 11 Pro` by default.
+Running `make run-ios` will target `iPhone 13` by default.

 If you need to run on any other simulator, you can specify the simulator type by adding the `SIMULATOR` flag:
 ```sh
-make run-ios SIMULATOR="iPhone 11 Pro"
+make run-ios SIMULATOR="iPhone 13"
 ```

 #### Running on a physical device
@@ -0,0 +1,31 @@
+# How to make changes to status-go
+
+
+## Overview
+
+To make changes to status-go, the best approach is to first identify the issue/feature and the changes to be made directly in status-go.
+For any bugs we want to most likely write a failing test in status-go, and make sure that it passes, before we test on mobile.
+
+Once you are quite confident that the status-go code is ready to be tested on mobile, you can test it locally by running the following command:
+
+```
+env STATUS_GO_SRC_OVERRIDE={your-status-go-directory} make run-{android/ios}
+```
+
+This will recompile status-go and run status-mobile on your device with that updated status-go version.
+
+Once you have tested the status-go changes locally and you think it's ready for a PR:
+
+1) Create a PR in status-go
+
+2) Point your local status-mobile branch to that PR by running the script:
+
+```
+scripts/update-status-go.sh {status-go-branch-name}
+```
+
+This will update `status-go-version.json`
+
+Commit updated status-go-version.json and create a status-mobile PR
+
+Once both PRs have been approved and are good to merge, you can follow the [merge guidelines](./merging-pr-process.md)
@@ -765,7 +765,7 @@ SPEC CHECKSUMS:
  RNLanguages: 962e562af0d34ab1958d89bcfdb64fafc37c513e
  RNPermissions: ad71dd4f767ec254f2cd57592fbee02afee75467
  RNReactNativeHapticFeedback: 2566b468cc8d0e7bb2f84b23adc0f4614594d071
-  RNReanimated: 62e43ee6baafb9ba3d3af1857d7fd23a1d41bff0
+  RNReanimated: 42f56dc5c032a11177b9ea12cdb57285318b432e
  RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
  RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8
  RNSVG: 80584470ff1ffc7994923ea135a3e5ad825546b9
@@ -1194,21 +1194,6 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
        return getPublicStorageDirectory().getAbsolutePath();
    }

-    @ReactMethod(isBlockingSynchronousMethod = true)
-    public String generateAlias(final String seed) {
-        return Statusgo.generateAlias(seed);
-    }
-
-    @ReactMethod
-    public void generateAliasAsync(final String seed, final Callback callback) throws JSONException {
-        executeRunnableStatusGoMethod(() -> Statusgo.generateAlias(seed), callback);
-    }
-
-    @ReactMethod(isBlockingSynchronousMethod = true)
-    public String identicon(final String seed) {
-        return Statusgo.identicon(seed);
-    }
-
    @ReactMethod(isBlockingSynchronousMethod = true)
    public String encodeTransfer(final String to, final String value) {
        return Statusgo.encodeTransfer(to, value);
@@ -1269,31 +1254,6 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
        executeRunnableStatusGoMethod(() -> Statusgo.identicon(seed), callback);
    }

-    @ReactMethod
-    public void generateAliasAndIdenticonAsync(final String seed, final Callback callback) {
-
-         Log.d(TAG, "generateAliasAndIdenticonAsync");
-                if (!checkAvailability()) {
-                    callback.invoke(false);
-                    return;
-                }
-
-                Runnable r = new Runnable() {
-                    @Override
-                    public void run() {
-                        String resIdenticon = Statusgo.identicon(seed);
-                        String resAlias = Statusgo.generateAlias(seed);
-
-                        Log.d(TAG, resIdenticon);
-                        Log.d(TAG, resAlias);
-                        callback.invoke(resAlias, resIdenticon);
-                    }
-                };
-
-                StatusThreadPoolExecutor.getInstance().execute(r);
-
-    }
-
    @Override
    public @Nullable
    Map<String, Object> getConstants() {
@@ -880,10 +880,6 @@ RCT_EXPORT_METHOD(callRPC:(NSString *)payload
    });
 }

-RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(generateAlias:(NSString *)publicKey) {
-  return StatusgoGenerateAlias(publicKey);
-}
-
 RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(keystoreDir) {
    NSFileManager *fileManager = [NSFileManager defaultManager];
    NSURL *rootUrl =[[fileManager
@@ -943,19 +939,6 @@ RCT_EXPORT_METHOD(initLogging:(BOOL)enabled
    callback(@[initResult]);
 }

-RCT_EXPORT_METHOD(generateAliasAsync:(NSString *)publicKey
-                  callback:(RCTResponseSenderBlock)callback) {
-#if DEBUG
-    NSLog(@"generateAliasAsync() method called");
-#endif
-    NSString *result = StatusgoGenerateAlias(publicKey);
-    callback(@[result]);
-}
-
-RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(identicon:(NSString *)publicKey) {
-  return StatusgoIdenticon(publicKey);
-}
-
 RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(encodeTransfer:(NSString *)to
                                       value:(NSString *)value) {
  return StatusgoEncodeTransfer(to,value);
@@ -1011,15 +994,6 @@ RCT_EXPORT_METHOD(validateMnemonic:(NSString *)seed
    callback(@[result]);
 }

-RCT_EXPORT_METHOD(identiconAsync:(NSString *)publicKey
-                  callback:(RCTResponseSenderBlock)callback) {
-#if DEBUG
-    NSLog(@"identiconAsync() method called");
-#endif
-    NSString *result = StatusgoIdenticon(publicKey);
-    callback(@[result]);
-}
-
 RCT_EXPORT_METHOD(createAccountAndLogin:(NSString *)request) {
 #if DEBUG
    NSLog(@"createAccountAndLogin() method called");
@@ -1034,16 +1008,6 @@ RCT_EXPORT_METHOD(restoreAccountAndLogin:(NSString *)request) {
    StatusgoRestoreAccountAndLogin(request);
 }

-RCT_EXPORT_METHOD(generateAliasAndIdenticonAsync:(NSString *)publicKey
-                  callback:(RCTResponseSenderBlock)callback) {
-#if DEBUG
-    NSLog(@"generateAliasAndIdenticonAsync() method called");
-#endif
-    NSString *identiconResult = StatusgoIdenticon(publicKey);
-    NSString *aliasResult = StatusgoGenerateAlias(publicKey);
-    callback(@[aliasResult, identiconResult]);
-}
-
 RCT_EXPORT_METHOD(callPrivateRPC:(NSString *)payload
                  callback:(RCTResponseSenderBlock)callback) {
    dispatch_async( dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
@@ -354,38 +354,6 @@ void _StopCPUProfiling(const FunctionCallbackInfo<Value>& args) {

 }

-void _Identicon(const FunctionCallbackInfo<Value>& args) {
-	Isolate* isolate = args.GetIsolate();
-        Local<Context> context = isolate->GetCurrentContext();
-
-	if (args.Length() != 1) {
-		// Throw an Error that is passed back to JavaScript
-		isolate->ThrowException(Exception::TypeError(
-			String::NewFromUtf8Literal(isolate, "Wrong number of arguments for Identicon")));
-		return;
-	}
-
-	// Check the argument types
-
-	if (!args[0]->IsString()) {
-		isolate->ThrowException(Exception::TypeError(
-			String::NewFromUtf8Literal(isolate, "Wrong argument type for 'pk'")));
-		return;
-	}
-
-
-	String::Utf8Value arg0Obj(isolate, args[0]->ToString(context).ToLocalChecked());
-	char *arg0 = *arg0Obj;
-
-	// Call exported Go function, which returns a C string
-	char *c = Identicon(arg0);
-
-	Local<String> ret = String::NewFromUtf8(isolate, c).ToLocalChecked();
-	args.GetReturnValue().Set(ret);
-	delete c;
-
-}
-
 void _EncodeTransfer(const FunctionCallbackInfo<Value>& args) {
 	Isolate* isolate = args.GetIsolate();
        Local<Context> context = isolate->GetCurrentContext();
@@ -864,38 +832,6 @@ void _CreateAccountAndLogin(const FunctionCallbackInfo<Value>& args) {

 }

-void _GenerateAlias(const FunctionCallbackInfo<Value>& args) {
-	Isolate* isolate = args.GetIsolate();
-        Local<Context> context = isolate->GetCurrentContext();
-
-	if (args.Length() != 1) {
-		// Throw an Error that is passed back to JavaScript
-		isolate->ThrowException(Exception::TypeError(
-			String::NewFromUtf8Literal(isolate, "Wrong number of arguments for GenerateAlias")));
-		return;
-	}
-
-	// Check the argument types
-
-	if (!args[0]->IsString()) {
-		isolate->ThrowException(Exception::TypeError(
-			String::NewFromUtf8Literal(isolate, "Wrong argument type for 'pk'")));
-		return;
-	}
-
-
-	String::Utf8Value arg0Obj(isolate, args[0]->ToString(context).ToLocalChecked());
-	char *arg0 = *arg0Obj;
-
-	// Call exported Go function, which returns a C string
-	char *c = GenerateAlias(arg0);
-
-	Local<String> ret = String::NewFromUtf8(isolate, c).ToLocalChecked();
-	args.GetReturnValue().Set(ret);
-	delete c;
-
-}
-
 void _ValidateMnemonic(const FunctionCallbackInfo<Value>& args) {
 	Isolate* isolate = args.GetIsolate();
        Local<Context> context = isolate->GetCurrentContext();
@@ -1953,7 +1889,6 @@ void init(Local<Object> exports) {
 	NODE_SET_METHOD(exports, "multiAccountStoreAccount", _MultiAccountStoreAccount);
 	NODE_SET_METHOD(exports, "initKeystore", _InitKeystore);
 	NODE_SET_METHOD(exports, "stopCPUProfiling", _StopCPUProfiling);
-	NODE_SET_METHOD(exports, "identicon", _Identicon);
 	NODE_SET_METHOD(exports, "encodeTransfer", _EncodeTransfer);
 	NODE_SET_METHOD(exports, "encodeFunctionCall", _EncodeFunctionCall);
 	NODE_SET_METHOD(exports, "decodeParameters", _DecodeParameters);
@@ -1968,7 +1903,6 @@ void init(Local<Object> exports) {
 	NODE_SET_METHOD(exports, "resetChainData", _ResetChainData);
 	NODE_SET_METHOD(exports, "saveAccountAndLogin", _SaveAccountAndLogin);
 	NODE_SET_METHOD(exports, "createAccountAndLogin", _CreateAccountAndLogin);
-	NODE_SET_METHOD(exports, "generateAlias", _GenerateAlias);
 	NODE_SET_METHOD(exports, "validateMnemonic", _ValidateMnemonic);
 	NODE_SET_METHOD(exports, "multiformatSerializePublicKey", _MultiformatSerializePublicKey);
 	NODE_SET_METHOD(exports, "saveAccountAndLoginWithKeycard", _SaveAccountAndLoginWithKeycard);
@@ -21,7 +21,7 @@ let
      buildInputs = with pkgs; [
        clojure flock maven openjdk
        # lint specific utilities
-        clj-kondo zprint clojure-lsp
+        babashka clj-kondo clojure-lsp ripgrep zprint
      ];
      # CLASSPATH from clojure deps with 'src' appended to find local sources.
      shellHook = with pkgs; ''
@@ -12,7 +12,7 @@
    "@react-native-async-storage/async-storage": "^1.17.9",
    "@react-native-camera-roll/camera-roll": "git+https://github.com/status-im/react-native-camera-roll.git#refs/tags/v5.1.1.1",
    "@react-native-community/audio-toolkit": "git+https://github.com/tbenr/react-native-audio-toolkit.git#refs/tags/v2.0.3-status-v6",
-    "@react-native-community/blur": "git+https://github.com/status-im/react-native-blur#refs/tags/v4.3.3-status",
+    "@react-native-community/blur": "git+https://github.com/status-im/react-native-blur.git#refs/tags/v4.3.3-status",
    "@react-native-community/clipboard": "^1.2.2",
    "@react-native-community/hooks": "^3.0.0",
    "@react-native-community/masked-view": "^0.1.6",
@@ -47,6 +47,7 @@
    "react-native-image-crop-picker": "git+https://github.com/status-im/react-native-image-crop-picker.git#refs/tags/v0.36.2-status.0",
    "react-native-image-resizer": "^1.2.3",
    "react-native-image-viewing": "git+https://github.com/status-im/react-native-image-viewing.git#refs/tags/v0.2.1.status",
+    "react-native-intersection-observer": "^0.2.0",
    "react-native-keychain": "git+https://github.com/status-im/react-native-keychain.git#refs/tags/v.3.0.0-5-status",
    "react-native-languages": "^3.0.2",
    "react-native-linear-gradient": "^2.8.0",
@@ -0,0 +1,14 @@
+#!/usr/bin/env sh
+
+# quo components namespace ends with style|utils|types|reaction-resource
+# are not the component view, they are usually utils fns or styles
+
+if rg --pcre2 --glob '!src/quo/**/*' 'quo\.components(\.[\w-]+)*\.[\w-]*(?<!style|utils|types|reaction-resource)(\s|\]|\n)' src; then
+  echo "Found above direct require of quo component outside src/quo/"
+  echo "For more info, check the style guide https://github.com/status-im/status-mobile/blob/develop/doc/new-guidelines.md#requiring-quo-components"
+  exit 1
+elif [ $? -eq 1 ]; then
+  exit 0
+else
+  exit $?
+fi
@@ -0,0 +1,98 @@
+#!/usr/bin/env bb
+
+(ns lint-translations
+  (:require [babashka.pods :as pods]))
+
+(pods/load-pod 'clj-kondo/clj-kondo "2023.09.07")
+(require '[pod.borkdude.clj-kondo :as kondo])
+(require '[cheshire.core :as json])
+(require '[clojure.set :as set])
+
+(def src-paths ["src"])
+
+(def translation-file "translations/en.json")
+
+;; set the following to true when solving https://github.com/status-im/status-mobile/issues/17811
+(def flag-show-non-namespaced-translation-keys false)
+(def flag-show-non-namespaced-translation-keys-occurrences false) ;; this makes the output super verbose!
+
+;; set the following to true when solving https://github.com/status-im/status-mobile/issues/17813
+;; and keep it permanently on after #17811 and #17813 have both been solved
+(def flag-show-unused-translation-keys false)
+
+(def flag-show-missing-translation-keys true)
+
+(defn- safe-name
+  [x]
+  (when x (name x)))
+
+(defn- ->keyword
+  [analysis-keyword]
+  (keyword (safe-name (:ns analysis-keyword)) (:name analysis-keyword)))
+
+(defn- report-issues
+  [incorrect-usages]
+  (doseq [incorrect-usage incorrect-usages]
+    (->> incorrect-usage
+         ((juxt :filename :row :reason ->keyword))
+         (apply format "%s:%s %s %s")
+         println)))
+
+(defn- extract-translation-keys
+  [file]
+  (-> file slurp json/parse-string keys))
+
+(def ^:private probably-unused-warning
+  (format "Probably unused translation key in %s:" translation-file))
+
+(defn -main
+  [& _args]
+  (println "Linting translations...")
+  (let [result                           (kondo/run!
+                                          {:lint   src-paths
+                                           :config {:output {:analysis {:keywords true}}}})
+        all-keywords                     (get-in result [:analysis :keywords])
+        used-translations                (filter (comp (partial = 't) :ns) all-keywords)
+        file-translation-keys            (apply sorted-set (extract-translation-keys translation-file))
+        missing-translations             (remove (comp file-translation-keys :name) used-translations)
+        used-translation-keys            (set (map :name used-translations))
+        possibly-unused-translation-keys (set/difference file-translation-keys used-translation-keys)
+        non-namespaced-translations      (filter
+                                          (fn [kw]
+                                            (and (not (:ns kw))
+                                                 (possibly-unused-translation-keys (:name kw))))
+                                          all-keywords)
+        unused-translation-keys          (set/difference possibly-unused-translation-keys
+                                                         (set (map :name non-namespaced-translations)))]
+
+    ;; TODO (2023-11-06 akatov): delete the following once #17811 and #17813 have both been solved
+    (doseq [k (apply sorted-set (map :name non-namespaced-translations))]
+      (when flag-show-non-namespaced-translation-keys
+        (println "Probably non-namespaced key" k))
+      (when flag-show-non-namespaced-translation-keys-occurrences
+        (->> non-namespaced-translations
+             (filter #(= k (:name %)))
+             (map #(assoc % :reason "Possibly non-namespaced translation key"))
+             report-issues)))
+
+    (when flag-show-unused-translation-keys
+      (run! #(println probably-unused-warning %) unused-translation-keys))
+
+    (when flag-show-missing-translation-keys
+      (report-issues (map #(assoc % :reason "Undefined Translation Key") missing-translations)))
+
+    (if (and
+         (or (not flag-show-missing-translation-keys)
+             (empty? missing-translations))
+         (or (not flag-show-unused-translation-keys)
+             (empty? possibly-unused-translation-keys))
+         (or (not flag-show-non-namespaced-translation-keys)
+             (not flag-show-non-namespaced-translation-keys-occurrences)
+             (empty? unused-translation-keys)))
+      0
+      1)))
+
+(when (= *file* (System/getProperty "babashka.file"))
+  (->> *command-line-args*
+       (apply -main)
+       System/exit))
@@ -106,11 +106,9 @@
   :target :node-test
   ;; Uncomment line below to `make test-watch` a specific file
   ;; :ns-regexp "status-im2.subs.messages-test$"
-   :main
-   status-im.test-runner/main
+   :main status-im.test-runner/main
   ;; set :ui-driven to true to let shadow-cljs inject node-repl
-   :ui-driven
-   true
+   :ui-driven true
   :closure-defines
   {status-im2.config/POKT_TOKEN                     #shadow/env "POKT_TOKEN"
    status-im2.config/INFURA_TOKEN                   #shadow/env "INFURA_TOKEN"
@@ -6,10 +6,3 @@ export function infoLayout(input, isTop) {
    return isTop ? input.value : -input.value;
  });
 }
-
-export function textSheet(input, isHeight) {
-  return useDerivedValue(function () {
-    'worklet';
-    return isHeight ? input.value : -input.value;
-  });
-}
@@ -300,6 +300,11 @@
   {:clamp     nil
    :withPause (fn [])})

+(def react-native-intersection-observer
+  #js
+   {:InView     #js {}
+    :IOFlatList #js {}})
+
 (def react-native-languages
  (clj->js {:default {:language            "en"
                      :addEventListener    (fn [])
@@ -426,6 +431,7 @@
    "react-native-transparent-video"                 react-native-transparent-video
    "react-native-orientation-locker"                react-native-orientation-locker
    "react-native-gifted-charts"                     react-native-gifted-charts
+    "react-native-intersection-observer"             react-native-intersection-observer
    "../resources/data/emojis/en.json"               (js/JSON.parse (slurp
                                                                     "./resources/data/emojis/en.json"))
    "../src/js/worklets/core.js"                     worklet-factory
@@ -4,8 +4,7 @@
    [clojure.string :as string]
    [react-native.platform :as platform]
    [taoensso.timbre :as log]
-    [utils.transforms :as types]
-    [utils.validators :as validators]))
+    [utils.transforms :as types]))

 (defn status
  []
@@ -431,19 +430,6 @@
    ;; in unknown scenarios we also consider the device rooted to avoid degrading security
    :else (callback true)))

-(defn generate-gfycat
-  "Generate a 3 words random name based on the user public-key, synchronously"
-  [public-key]
-  (log/debug "[native-module] generate-gfycat")
-  (when (validators/valid-public-key? public-key)
-    (.generateAlias ^js (status) public-key)))
-
-(defn identicon
-  "Generate a icon based on a string, synchronously"
-  [seed]
-  (log/debug "[native-module] identicon")
-  (.identicon ^js (status) seed))
-
 (defn encode-transfer
  [to-norm amount-hex]
  (log/debug "[native-module] encode-transfer")
@@ -501,12 +487,6 @@
  (log/debug "[native-module] to-checksum-address")
  (.toChecksumAddress ^js (status) address))

-(defn gfycat-identicon-async
-  "Generate an icon based on a string and 3 words random name asynchronously"
-  [seed callback]
-  (log/debug "[native-module] gfycat-identicon-async")
-  (.generateAliasAndIdenticonAsync ^js (status) seed callback))
-
 (defn validate-mnemonic
  "Validate that a mnemonic conforms to BIP39 dictionary/checksum standards"
  [mnemonic callback]
@@ -2,7 +2,7 @@
  (:require
    [oops.core :as oops]
    [quo.components.animated-header-flatlist.style :as style]
-    [quo.core :as quo]
+    [quo.components.icon :as icon]
    [quo.foundations.colors :as colors]
    [quo.theme :as quo.theme]
    [react-native.core :as rn]
@@ -73,11 +73,11 @@
      {:active-opacity 1
       :on-press       back-button-on-press
       :style          (style/button-container {:left 20 :theme theme})}
-      [quo/icon :i/arrow-left {:size 20 :color (colors/theme-colors colors/black colors/white theme)}]]
+      [icon/icon :i/arrow-left {:size 20 :color (colors/theme-colors colors/black colors/white theme)}]]
     [rn/touchable-opacity
      {:active-opacity 1
       :style          (style/button-container {:right 20 :theme theme})}
-      [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white theme)}]]
+      [icon/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white theme)}]]
     [reanimated/blur-view
      {:blurAmount   32
       :blurType     :light
@@ -1,68 +0,0 @@
-(ns quo.components.avatars.wallet-user-avatar
-  (:require
-    [clojure.string :as string]
-    [quo.components.markdown.text :as text]
-    [quo.foundations.colors :as colors]
-    [quo.theme :as quo.theme]
-    [react-native.core :as rn]))
-
-(def circle-sizes
-  {:small   20
-   :medium  32
-   :large   48
-   :size-64 64
-   :x-large 80})
-
-(def font-sizes
-  {:small   :label
-   :medium  :paragraph-2
-   :large   :paragraph-1
-   :size-64 :heading-1
-   :x-large :heading-1})
-
-(def font-weights
-  {:small   :medium
-   :medium  :semi-bold
-   :large   :semi-bold
-   :size-64 :medium
-   :x-large :medium})
-
-(defn- view-internal
-  "params, first name, last name, customization-color, size
-   and if it's dark or not!"
-  [{:keys [f-name l-name customization-color size theme monospace? uppercase?]
-    :or   {f-name     "John"
-           l-name     "Doe"
-           size       :x-large
-           uppercase? true}}]
-  (let [circle-size    (size circle-sizes)
-        small?         (= size :small)
-        f-name-initial (-> f-name
-                           (#(if uppercase? (string/upper-case %) %))
-                           (subs 0 1))
-        l-name-initial (-> l-name
-                           (#(if uppercase? (string/upper-case %) %))
-                           (subs 0 1))
-        circle-color   (if customization-color
-                         (colors/resolve-color customization-color theme 20)
-                         (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme))
-        text-color     (if customization-color
-                         (colors/resolve-color customization-color theme)
-                         (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme))]
-    [rn/view
-     {:style {:width            circle-size
-              :height           circle-size
-              :border-radius    circle-size
-              :text-align       :center
-              :justify-content  :center
-              :align-items      :center
-              :background-color circle-color}}
-     [text/text
-      {:size   (size font-sizes)
-       :weight (if monospace? :monospace (size font-weights))
-       :style  {:color text-color}}
-      (if small?
-        (str f-name-initial)
-        (str f-name-initial l-name-initial))]]))
-
-(def wallet-user-avatar (quo.theme/with-theme view-internal))
@@ -0,0 +1,16 @@
+(ns quo.components.avatars.wallet-user-avatar.component-spec
+  (:require [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
+            [test-helpers.component :as h]))
+
+(h/describe "wallet user avatar"
+  (h/describe "View internal"
+    (h/test "Renders by default even with no input parameters"
+      (h/render
+       [wallet-user-avatar/wallet-user-avatar {}])
+      (h/is-truthy (h/query-by-label-text :wallet-user-avatar)))
+
+    (h/test "Renders user’s initials when full name is provided"
+      (h/render
+       [wallet-user-avatar/wallet-user-avatar {:full-name "Jane Smith"}])
+      (h/is-truthy (h/get-by-text "JS")))))
+
@@ -0,0 +1,27 @@
+(ns quo.components.avatars.wallet-user-avatar.style
+  (:require [quo.foundations.colors :as colors]))
+
+(defn- circle-color
+  [customization-color]
+  (colors/custom-color customization-color 50 20))
+
+(defn- text-color
+  [customization-color theme]
+  (colors/theme-colors
+   (colors/custom-color customization-color 50)
+   (colors/custom-color customization-color 60)
+   theme))
+
+(defn container
+  [circle-size customization-color]
+  {:width            circle-size
+   :height           circle-size
+   :border-radius    circle-size
+   :text-align       :center
+   :justify-content  :center
+   :align-items      :center
+   :background-color (circle-color customization-color)})
+
+(defn text
+  [customization-color theme]
+  {:color (text-color customization-color theme)})
@@ -0,0 +1,57 @@
+(ns quo.components.avatars.wallet-user-avatar.view
+  (:require [quo.components.avatars.wallet-user-avatar.style :as style]
+            [quo.components.markdown.text :as text]
+            [quo.theme :as quo.theme]
+            [react-native.core :as rn]
+            utils.string))
+
+(def properties
+  {:size-20 {:size        20
+             :font-size   :label
+             :font-weight :medium}
+   :size-24 {:size        24
+             :font-size   :label
+             :font-weight :semi-bold}
+   :size-32 {:size        32
+             :font-size   :paragraph-2
+             :font-weight :semi-bold}
+   :size-48 {:size        48
+             :font-size   :paragraph-1
+             :font-weight :semi-bold}
+   :size-64 {:size        64
+             :font-size   :paragraph-1
+             :font-weight :medium}
+   :size-80 {:size        80
+             :font-size   :heading-1
+             :font-weight :medium}})
+
+(def smallest-possible (first (keys properties)))
+(def second-smallest-possible (second (keys properties)))
+(defn check-if-size-small
+  [size]
+  (or (= size smallest-possible)
+      (= size second-smallest-possible)))
+(def biggest-possible (last (keys properties)))
+
+(defn- view-internal
+  "Options:
+
+  :full-name - string (default: nil) - used to generate initials
+  :customization-color  - keyword (default: nil) - color of the avatar
+  :size   - keyword (default: last element of properties object) - size of the
+  avatar
+  :monospace? - boolean (default: false) - use monospace font"
+  [{:keys [full-name customization-color size theme monospace?]
+    :or   {size biggest-possible}}]
+  (let [circle-size (:size (size properties))
+        small?      (check-if-size-small size)]
+    [rn/view
+     {:style (style/container circle-size customization-color)}
+     [text/text
+      {:accessibility-label :wallet-user-avatar
+       :size                (:font-size (size properties))
+       :weight              (if monospace? :monospace (:font-weight (size properties)))
+       :style               (style/text customization-color theme)}
+      (utils.string/get-initials full-name (if small? 1 2))]]))
+
+(def wallet-user-avatar (quo.theme/with-theme view-internal))
@@ -1,3 +1,3 @@
 (ns quo.components.colors.color.constants)

-(def ^:const IPHONE_11_PRO_VIEWPORT_WIDTH 375)
+(def ^:const color-size 48)
@@ -1,18 +1,19 @@
 (ns quo.components.colors.color.style
  (:require
    [quo.components.colors.color.constants :as constants]
-    [quo.foundations.colors :as colors]))
+    [quo.foundations.colors :as colors]
+    [utils.responsiveness :as responsiveness]))

 (defn color-button-common
  [window-width]
-  {:width         48
-   :height        48
+  {:width         constants/color-size
+   :height        constants/color-size
   :border-width  4
   :border-radius 24
   :margin-right  (-> window-width
-                      (- constants/IPHONE_11_PRO_VIEWPORT_WIDTH) ;We want the design to be 100%
-                                                                 ;identical to Figma on iPhone 11
-                                                                 ;Pro, So we're using it's VW here.
+                      (- responsiveness/IPHONE_11_PRO_VIEWPORT_WIDTH) ;We want the design to be 100%
+                      ;identical to Figma on iPhone 11
+                      ;Pro, So we're using it's VW here.
                      (/ 6) ;Dividing by an appropriate factor to get a reasonable value for each VW
                            ;on other devices (This will yield 0 on iPhone 11 Pro, Which is what we
                            ;want)
@@ -25,14 +26,12 @@
  ([color selected?]
   (color-button color selected? nil nil))
  ([color selected? idx window-width]
-   (merge (color-button-common window-width)
-          (when selected?
-            {:border-top-color    (colors/alpha color 0.4)
-             :border-end-color    (colors/alpha color 0.4)
-             :border-bottom-color (colors/alpha color 0.2)
-             :border-start-color  (colors/alpha color 0.2)}
-            (when (zero? idx)
-              {:margin-left -4})))))
+   (cond-> (color-button-common window-width)
+     selected?   (assoc :border-top-color    (colors/alpha color 0.4)
+                        :border-end-color    (colors/alpha color 0.4)
+                        :border-bottom-color (colors/alpha color 0.2)
+                        :border-start-color  (colors/alpha color 0.2))
+     (zero? idx) (assoc :margin-left -4))))

 (defn color-circle
  [color border?]
@@ -5,10 +5,6 @@
    [test-helpers.component :as h]))

 (h/describe "color-picker"
-  (h/test "color picker rendered"
-    (h/render [color-picker/view])
-    (-> (h/expect (h/get-all-by-label-text :color-picker-item))
-        (.toHaveLength 11)))
  (h/test "clicks on a color item"
    (let [event (h/mock-fn)]
      (h/render [color-picker/view {:on-change #(event)}])
@@ -20,11 +16,6 @@
      (h/render [color-picker/view {:on-change #(reset! selected %)}])
      (h/fire-event :press (get (h/get-all-by-label-text :color-picker-item) 0))
      (-> (h/expect @selected)
-          (.toStrictEqual :blue))))
-  (h/test "all of the values of colors-list are rendered"
-    (h/render [color-picker/view])
-    (js/Promise.all (map (fn [color]
-                           (h/is-truthy (h/get-all-by-label-text color)))
-                         color-picker/color-list))))
+          (.toStrictEqual :blue)))))


@@ -1,38 +1,67 @@
 (ns quo.components.colors.color-picker.view
  (:require
+    [quo.components.colors.color.constants :as constants]
    [quo.components.colors.color.view :as color]
+    [quo.foundations.colors :as colors]
    [react-native.core :as rn]
    [reagent.core :as reagent]))

-(def color-list
-  [:blue :yellow :purple :turquoise :magenta :sky :orange :army :flamingo :camel :copper])
-
 (defn- on-change-handler
  [selected color-name on-change]
  (reset! selected color-name)
  (when on-change (on-change color-name)))

-(defn view
+(defn get-item-layout
+  [_ index]
+  #js
+   {:length constants/color-size
+    :offset (* (+ constants/color-size 8) index)
+    :index  index})
+
+(defn- view-internal
  "Options
   - `default-selected` Default selected color name.
   - `on-change` Callback called when a color is selected `(fn [color-name])`.
   - `blur?` Boolean to enable blur background support.}"
-  [{:keys [default-selected window-width]}]
-  (let [selected (reagent/atom default-selected)]
-    (fn [{:keys [blur? on-change feng-shui? container-style]}]
-      [rn/scroll-view
-       {:horizontal                        true
-        :shows-horizontal-scroll-indicator false
-        :content-container-style           container-style}
-       (doall (map-indexed (fn [idx color]
-                             [color/view
-                              {:selected?    (= color @selected)
-                               :on-press     #(on-change-handler selected % on-change)
-                               :blur?        blur?
-                               :key          color
-                               :color        color
-                               :idx          idx
-                               :window-width window-width}])
-                           ;; TODO: using :feng-shui? temporarily while b & w is being developed.
-                           ;; https://github.com/status-im/status-mobile/discussions/16676
-                           (if feng-shui? (conj color-list :feng-shui) color-list)))])))
+  [{:keys [default-selected blur? on-change feng-shui? container-style]}]
+  (let [selected              (reagent/atom default-selected)
+        {window-width :width} (rn/get-window)
+        ref                   (atom nil)]
+    (rn/use-effect #(js/setTimeout (fn []
+                                     (.scrollToIndex ^js @ref
+                                                     #js
+                                                      {:animated     true
+                                                       :index        (.indexOf colors/account-colors
+                                                                               default-selected)
+                                                       :viewPosition 0.5}))
+                                   50))
+    [rn/flat-list
+     {:ref                               #(reset! ref %)
+      ;; TODO: using :feng-shui? temporarily while b & w is being developed.
+      ;; https://github.com/status-im/status-mobile/discussions/16676
+      :data                              (if feng-shui?
+                                           (conj colors/account-colors :feng-shui)
+                                           colors/account-colors)
+      :render-fn                         (fn [color idx]
+                                           [color/view
+                                            {:selected?    (= color @selected)
+                                             :on-press     (fn [e]
+                                                             (.scrollToIndex ^js @ref
+                                                                             #js
+                                                                              {:animated     true
+                                                                               :index        idx
+                                                                               :viewPosition 0.5})
+                                                             (on-change-handler selected e on-change))
+                                             :blur?        blur?
+                                             :key          color
+                                             :color        color
+                                             :idx          idx
+                                             :window-width window-width}])
+      :get-item-layout                   get-item-layout
+      :horizontal                        true
+      :shows-horizontal-scroll-indicator false
+      :content-container-style           container-style}]))
+
+(defn view
+  [props]
+  [:f> view-internal props])
@@ -0,0 +1,18 @@
+(ns quo.components.community.community-stat.component-spec
+  (:require
+    [quo.core :as quo]
+    [test-helpers.component :as h]
+    utils.money))
+
+(h/describe "Community Stat Component"
+  (h/test "default render"
+    (h/render [quo/community-stat
+               {:value               "5000"
+                :icon                :i/active-members
+                :accessibility-label :community-active-members}])
+    (h/is-truthy (h/query-by-label-text :community-active-members)))
+  (h/test "renders community stat with a value"
+    (h/render [quo/community-stat
+               {:value "5000"
+                :icon  :i/members}])
+    (h/is-truthy (h/query-by-text (utils.money/format-amount "5000")))))
@@ -0,0 +1,12 @@
+(ns quo.components.community.community-stat.style
+  (:require [quo.foundations.colors :as colors]))
+
+(def container
+  {:flex-direction :row
+   :align-items    :center
+   :height         22})
+
+(defn text
+  [theme]
+  {:color       (colors/theme-colors colors/black colors/white theme)
+   :margin-left 2})
@@ -0,0 +1,26 @@
+(ns quo.components.community.community-stat.view
+  (:require [quo.components.community.community-stat.style :as style]
+            [quo.components.icon :as quo.icons]
+            [quo.components.markdown.text :as quo.text]
+            [quo.foundations.colors :as colors]
+            [quo.theme :as quo.theme]
+            [react-native.core :as rn]
+            utils.money))
+
+(defn view-internal
+  [{:keys [value icon theme style accessibility-label]}]
+  [rn/view
+   {:style               (merge style/container style)
+    :accessibility-label accessibility-label}
+   [quo.icons/icon icon
+    {:size            16
+     :container-style {:align-items     :center
+                       :justify-content :center}
+     :resize-mode     :center
+     :color           (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]
+   [quo.text/text
+    {:size   :paragraph-1
+     :weight :regular
+     :style  (style/text theme)} (utils.money/format-amount value)]])
+
+(def view (quo.theme/with-theme view-internal))
@@ -1,52 +1,30 @@
 (ns quo.components.community.community-view
  (:require
+    [quo.components.community.community-stat.view :as community-stat]
    [quo.components.community.style :as style]
-    [quo.components.icon :as icons]
    [quo.components.markdown.text :as text]
    [quo.components.tags.permission-tag :as permission]
    [quo.components.tags.tag :as tag]
    [quo.foundations.colors :as colors]
    [quo.theme :as theme]
    [react-native.core :as rn]
-    [react-native.gesture :as gesture]
-    utils.money))
-
-(defn community-stats
-  [{:keys [icon members-count icon-color accessibility-label]}]
-  [rn/view
-   {:accessibility-label accessibility-label
-    :style               (style/stats-count-container)}
-   [rn/view {:margin-right 2}
-    [icons/icon icon
-     {:container-style {:align-items     :center
-                        :justify-content :center}
-      :resize-mode     :center
-      :size            16
-      :color           icon-color}]]
-   [text/text
-    {:weight :regular
-     :size   :paragraph-2}
-    members-count]])
+    [react-native.gesture :as gesture]))

 (defn community-stats-column
-  [{:keys [type theme blur? members-count active-count]}]
-  (let [icon-color (if (and (= :dark theme) blur?)
-                     colors/white-opa-40
-                     (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))]
-    [rn/view
-     (if (= type :card-view)
-       (style/card-stats-container)
-       (style/list-stats-container))
-     [community-stats
-      {:accessibility-label :stats-members-count
-       :icon                :i/group
-       :members-count       (utils.money/format-amount members-count)
-       :icon-color          icon-color}]
-     [community-stats
-      {:accessibility-label :stats-active-count
-       :icon                :i/active-members
-       :members-count       (utils.money/format-amount active-count)
-       :icon-color          icon-color}]]))
+  [{:keys [type members-count active-count]}]
+  [rn/view
+   (if (= type :card-view)
+     (style/card-stats-container)
+     (style/list-stats-container))
+   [community-stat/view
+    {:accessibility-label :stats-members-count
+     :icon                :i/group
+     :value               members-count
+     :style               {:margin-right 12}}]
+   [community-stat/view
+    {:accessibility-label :stats-active-count
+     :icon                :i/active-members
+     :value               active-count}]])

 (defn community-tags
  [{:keys [tags container-style last-item-style]}]
@@ -17,12 +17,6 @@
 (def detail-container
  {:flex 1})

-(defn stats-count-container
-  []
-  {:flex-direction :row
-   :align-items    :center
-   :margin-right   16})
-
 (defn card-stats-container
  []
  {:flex-direction :row})
@@ -18,13 +18,19 @@
      (h/render [bottom-actions/view
                 {:actions          :2-actions
                  :button-one-label button-one
+                  :button-one-props {:icon-left :i/arrow-left}
                  :button-two-label button-two}])
      (h/is-truthy (h/get-by-text button-one))
+      (h/is-truthy (h/get-by-label-text :icon))
      (h/is-truthy (h/get-by-text button-two))))

  (h/test "render disabled button"
    (h/render [bottom-actions/view
               {:description      "Sample description"
-                :disabled?        true
+                :button-one-props {:disabled? true}
                :button-one-label "button"}])
-    (h/is-disabled (h/get-by-label-text :button-one))))
+    (h/is-disabled (h/get-by-label-text :button-one)))
+
+  (h/test "sane defaults"
+    (h/render [bottom-actions/view {}])
+    (h/is-truthy (h/get-by-label-text :button-one))))
@@ -7,8 +7,9 @@
    [react-native.core :as rn]))

 (def default-props
-  {:button-one-type :primary
-   :button-two-type :grey})
+  {:button-one-type     :primary
+   :button-two-type     :grey
+   :customization-color :blue})

 (defn- view-internal
  "Options:
@@ -17,34 +18,36 @@
  :description - string (default nil) - Description to display below the title
  :button-one-label - string (default nil) - Label for the first button
  :button-two-label - string (default nil) - Label for the second button
-  :button-one-press - fn (default nil) - Function to call when the first button is pressed
-  :button-two-press - fn (default nil) - Function to call when the second button is pressed
+  :button-one-props - map with props for button one
+  :button-two-props - map with props for button two
  :theme - :light/:dark
-  :scroll - bool (default false) - Whether the iOS Home Indicator should be rendered
-  :button-one-type - same as button/button :type
-  :button-two-type - same as button/button :type"
+  :scroll? - bool (default false) - Whether the iOS Home Indicator should be rendered"
  [props]
  (let [{:keys [actions description button-one-label button-two-label
-                button-one-press button-two-press theme
-                scroll? button-one-type button-two-type disabled?]}
+                button-one-props button-two-props theme scroll? customization-color container-style]}
        (merge default-props props)]
-    [:<>
+    [rn/view {:style container-style}
     [rn/view {:style style/buttons-container}
      (when (= actions :2-actions)
        [button/button
-         {:size            40
-          :background      (when scroll? :blur)
-          :container-style style/button-container-2-actions
-          :type            button-two-type
-          :on-press        button-two-press} button-two-label])
+         (merge
+          {:size                40
+           :background          (when scroll? :blur)
+           :container-style     style/button-container-2-actions
+           :theme               theme
+           :accessibility-label :button-two}
+          button-two-props)
+         button-two-label])
      [button/button
-       {:size                40
-        :container-style     style/button-container
-        :type                button-one-type
-        :disabled?           disabled?
-        :background          (when scroll? :blur)
-        :on-press            button-one-press
-        :accessibility-label :button-one} button-one-label]]
+       (merge
+        {:size                40
+         :container-style     style/button-container
+         :background          (when scroll? :blur)
+         :theme               theme
+         :accessibility-label :button-one
+         :customization-color customization-color}
+        button-one-props)
+       button-one-label]]
     (when description
       [text/text
        {:size  :paragraph-2
@@ -57,7 +57,7 @@
               {:title                "Title"
                :type                 :account
                :account-avatar-emoji "🍿"
-                :networks             [{:name :ethereum :short :eth}]
+                :networks             [{:name :ethereum :short-name "eth"}]
                :description          "0x62b...0a5"
                :customization-color  :purple}])
    (h/is-truthy (h/get-by-text "Title"))
@@ -8,6 +8,7 @@
    [quo.components.icon :as icons]
    [quo.components.markdown.text :as text]
    [quo.components.tags.context-tag.view :as context-tag]
+    [quo.components.wallet.address-text.view :as address-text]
    [quo.foundations.colors :as colors]
    [quo.theme :as quo.theme]
    [react-native.core :as rn]
@@ -32,14 +33,6 @@
                       :profile-picture   profile-picture}]
    nil))

-(defn- network-view
-  [network]
-  [text/text
-   {:size   :paragraph-2
-    :weight :regular
-    :style  (style/network-text-color (:name network))}
-   (str (name (:short network)) ":")])
-
 (defn- keypair-subtitle
  [{:keys [theme blur? keycard?]}]
  [rn/view {:style style/row}
@@ -59,15 +52,16 @@

 (defn- account-subtitle
  [{:keys [networks theme blur? description]}]
-  [rn/view {:style style/row}
-   (for [network networks]
-     ^{:key (str network)}
-     [network-view network])
-   [text/text
-    {:size   :paragraph-2
-     :weight :regular
-     :style  (style/description theme blur?)}
-    description]])
+  (if networks
+    [address-text/view
+     {:networks networks
+      :address  description
+      :format   :short}]
+    [text/text
+     {:size   :paragraph-2
+      :weight :regular
+      :style  (style/description theme blur?)}
+     description]))

 (defn- default-keypair-subtitle
  [{:keys [description theme blur?]}]
@@ -65,22 +65,23 @@
                 ens-regex address-regex
                 valid-ens-or-address?]}]
      (let [on-change              (fn [text]
-                                     (let [ens?     (when ens-regex
-                                                      (boolean (re-matches ens-regex text)))
-                                           address? (when address-regex
-                                                      (boolean (re-matches address-regex text)))]
-                                       (if (> (count text) 0)
-                                         (reset! status :typing)
-                                         (reset! status :active))
-                                       (reset! value text)
-                                       (when on-change-text
-                                         (on-change-text text))
-                                       (when (and ens? on-detect-ens)
-                                         (reset! status :loading)
-                                         (on-detect-ens text))
-                                       (when (and address? on-detect-address)
-                                         (reset! status :loading)
-                                         (on-detect-address text))))
+                                     (when (not= @value text)
+                                       (let [ens?     (when ens-regex
+                                                        (boolean (re-matches ens-regex text)))
+                                             address? (when address-regex
+                                                        (boolean (re-matches address-regex text)))]
+                                         (if (> (count text) 0)
+                                           (reset! status :typing)
+                                           (reset! status :active))
+                                         (reset! value text)
+                                         (when on-change-text
+                                           (on-change-text text))
+                                         (when (and ens? on-detect-ens)
+                                           (reset! status :loading)
+                                           (on-detect-ens text))
+                                         (when (and address? on-detect-address)
+                                           (reset! status :loading)
+                                           (on-detect-address text)))))
            on-paste               (fn []
                                     (clipboard/get-string
                                      (fn [clipboard]
@@ -90,6 +91,8 @@
            on-clear               (fn []
                                     (reset! value "")
                                     (reset! status (if @focused? :active :default))
+                                     (when on-change-text
+                                       (on-change-text ""))
                                     (when on-clear
                                       (on-clear)))
            on-scan                #(when on-scan
@@ -119,6 +122,7 @@
           :auto-complete          (when platform/ios? :none)
           :auto-capitalize        :none
           :auto-correct           false
+           :spell-check            false
           :keyboard-appearance    (quo.theme/theme-value :light :dark theme)
           :on-focus               on-focus
           :on-blur                on-blur
@@ -23,6 +23,8 @@
           return-key-type
           size
           theme
+           on-focus
+           on-blur
           container-style]
    :or   {max-length    0
           auto-focus    false
@@ -48,8 +50,14 @@
          :accessibility-label :profile-title-input
          :keyboard-appearance (quo.theme/theme-value :light :dark theme)
          :return-key-type return-key-type
-          :on-focus #(swap! focused? (constantly true))
-          :on-blur #(swap! focused? (constantly false))
+          :on-focus (fn []
+                      (when (fn? on-focus)
+                        (on-focus))
+                      (reset! focused? true))
+          :on-blur (fn []
+                     (when (fn? on-blur)
+                       (on-blur))
+                     (reset! focused? false))
          :auto-focus auto-focus
          :input-mode :text
          :on-change-text on-change
@@ -4,19 +4,12 @@
    [quo.components.icon :as icon]
    [quo.components.list-items.account.style :as style]
    [quo.components.markdown.text :as text]
+    [quo.components.wallet.address-text.view :as address-text]
    [quo.foundations.colors :as colors]
    [quo.theme :as quo.theme]
    [react-native.core :as rn]
    [reagent.core :as reagent]))

-(defn- network-view
-  [network]
-  [text/text
-   {:size   :paragraph-2
-    :weight :regular
-    :style  {:color (colors/custom-color (:name network))}}
-   (str (name (:short network)) ":")])
-
 (defn- account-view
  [{:keys [account-props title-icon? blur? theme]
    :or   {title-icon? false}}]
@@ -38,15 +31,10 @@
          :color (if blur?
                   colors/white-opa-40
                   (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]])]
-    [text/text {:size :paragraph-2}
-     (for [network (:networks account-props)]
-       ^{:key (str network)}
-       [network-view network])
-     [text/text
-      {:size   :paragraph-2
-       :weight :monospace
-       :style  (style/account-address blur? theme)}
-      (:address account-props)]]]])
+    [address-text/view
+     {:networks (:networks account-props)
+      :address  (:address account-props)
+      :format   :short}]]])

 (defn- balance-view
  [{:keys [balance-props type theme]}]
@@ -4,6 +4,7 @@
    [quo.components.icon :as icon]
    [quo.components.list-items.account-list-card.style :as style]
    [quo.components.markdown.text :as text]
+    [quo.components.wallet.address-text.view :as address-text]
    [quo.foundations.colors :as colors]
    [quo.theme :as quo.theme]
    [react-native.core :as rn]
@@ -26,20 +27,10 @@
          {:weight :semi-bold
           :size   :paragraph-2}
          (:name account-props)]
-         [text/text {:size :paragraph-2}
-          (map (fn [network]
-                 ^{:key (str network)}
-                 [text/text
-                  {:size  :paragraph-2
-                   :style {:color (colors/resolve-color network theme)}}
-                  (str (subs (name network) 0 3) ":")])
-               networks)
-          [text/text
-           {:size  :paragraph-2
-            :style {:color (if blur?
-                             colors/white-opa-40
-                             (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}}
-           (:address account-props)]]]]
+         [address-text/view
+          {:networks networks
+           :address  (:address account-props)
+           :format   :short}]]]
       (when (= action :icon)
         [rn/pressable {:on-press on-options-press}
          [icon/icon :i/options
@@ -31,4 +31,5 @@
   :align-items    :center})

 (def account-container
-  {:margin-left 8})
+  {:margin-left   8
+   :padding-right 56})
@@ -1,13 +1,13 @@
 (ns quo.components.list-items.address.view
  (:require
-    [clojure.string :as string]
-    [quo.components.avatars.wallet-user-avatar :as wallet-user-avatar]
+    [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
    [quo.components.list-items.address.style :as style]
    [quo.components.markdown.text :as text]
    [quo.foundations.colors :as colors]
    [quo.theme :as quo.theme]
    [react-native.core :as rn]
-    [reagent.core :as reagent]))
+    [reagent.core :as reagent]
+    [utils.address :as address]))

 (defn- left-container
  [{:keys [theme address networks blur?]}]
@@ -25,7 +25,8 @@
            [text/text
             {:size   :paragraph-1
              :weight :semi-bold
-              :style  {:color (colors/resolve-color network)}} (str (subs (name network) 0 3) ":")])
+              :style  {:color (colors/resolve-color network theme)}}
+             (str (subs (name network) 0 3) ":")])
          networks)
     [text/text
      {:size   :paragraph-1
@@ -33,7 +34,7 @@
       :style  {:color (if blur?
                         colors/white
                         (colors/theme-colors colors/neutral-100 colors/white theme))}}
-      (string/replace address "x" "×")]]]])
+      (address/get-shortened-key address)]]]])

 (defn- internal-view
  []
@@ -60,6 +61,7 @@
         [left-container
          {:theme    theme
           :networks networks
-           :address  address}]]))))
+           :address  address
+           :blur?    blur?}]]))))

 (def view (quo.theme/with-theme internal-view))
@@ -148,8 +148,6 @@
        (when (and members (= type :discover))
          [community-view/community-stats-column
           {:type          :list-view
-            :theme         theme
-            :blur?         blur?
            :members-count (:members-count members)
            :active-count  (:active-count members)}])]
       [info-component
@@ -64,11 +64,11 @@
 (defn- view-internal
  "[preview-list opts items]
   opts
-   {:type          :user/:communities/:accounts/:tokens/:collectibles/:dapps/:network
-    :size          :size-32 | :size-24 | :size-20 | :size-16 | :size-14
-    :number        number of items in the list (optional)
-    :blur?         overflow-label blur?}
-   items           preview list items (only 4 items is required for preview)
+   {:type   :user/:communities/:accounts/:tokens/:collectibles/:dapps/:network
+    :size   :size-32 | :size-24 | :size-20 | :size-16 | :size-14
+    :number number of items in the list (optional)
+    :blur?  overflow-label blur?}
+   items    preview list items (only 4 items is required for preview)
  "
  [{:keys [type size number blur?]} items]
  (let [size-key    (if (contains? properties/sizes size) size :size-24)
@@ -13,7 +13,7 @@
    (h/render [saved-address/view])
    (h/fire-event :on-press-in (h/get-by-label-text :container))
    (h/wait-for #(h/has-style (h/query-by-label-text :container)
-                              {:backgroundColor (colors/custom-color :blue 50 5)})))
+                              {:backgroundColor (colors/resolve-color :blue :light 5)})))

  (h/test "on-press-in changes state to :pressed with blur? enabled"
    (h/render [saved-address/view {:blur? true}])
@@ -22,24 +22,25 @@
                              {:backgroundColor colors/white-opa-5})))

  (h/test "on-press-out changes state to :active"
-    (h/render [saved-address/view])
+    (h/render [saved-address/view {:active-state? true}])
    (h/fire-event :on-press-in (h/get-by-label-text :container))
    (h/fire-event :on-press-out (h/get-by-label-text :container))
    (h/wait-for #(h/has-style (h/query-by-label-text :container)
-                              {:backgroundColor (colors/custom-color :blue 50 10)})))
+                              {:backgroundColor (colors/resolve-color :blue :light 10)})))

  (h/test "on-press-out changes state to :active with blur? enabled"
-    (h/render [saved-address/view {:blur? true}])
+    (h/render [saved-address/view
+               {:blur?         true
+                :active-state? true}])
    (h/fire-event :on-press-in (h/get-by-label-text :container))
    (h/fire-event :on-press-out (h/get-by-label-text :container))
    (h/wait-for #(h/has-style (h/query-by-label-text :container)
                              {:backgroundColor colors/white-opa-10})))

-  (h/test "on-press-out calls on-press"
+  (h/test "on-press container calls on-press"
    (let [on-press (h/mock-fn)]
      (h/render [saved-address/view {:on-press on-press}])
-      (h/fire-event :on-press-in (h/get-by-label-text :container))
-      (h/fire-event :on-press-out (h/get-by-label-text :container))
+      (h/fire-event :on-press (h/get-by-label-text :container))
      (h/was-called on-press)))

  (h/test "renders options button if type :action"
@@ -1,26 +1,27 @@
 (ns quo.components.list-items.saved-address.view
  (:require
    [clojure.string :as string]
-    [quo.components.avatars.wallet-user-avatar :as wallet-user-avatar]
+    [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
    [quo.components.icon :as icon]
    [quo.components.list-items.saved-address.style :as style]
    [quo.components.markdown.text :as text]
    [quo.foundations.colors :as colors]
    [quo.theme :as quo.theme]
    [react-native.core :as rn]
-    [reagent.core :as reagent]))
+    [reagent.core :as reagent]
+    [utils.address :as address]))

 (defn- left-container
-  [{:keys [blur? theme name address customization-color]}]
+  [{:keys [blur? theme name ens address customization-color]}]
  (let [names      (remove string/blank? (string/split name " "))
        first-name (if (> (count names) 0) (first names) "")
        last-name  (if (> (count names) 1) (last names) "")]
    [rn/view {:style style/left-container}
     [wallet-user-avatar/wallet-user-avatar
-      {:size   :medium
-       :f-name first-name
-       :l-name last-name
-       :color  customization-color}]
+      {:size                :medium
+       :f-name              first-name
+       :l-name              last-name
+       :customization-color customization-color}]
     [rn/view {:style style/account-container}
      [text/text
       {:weight :semi-bold
@@ -32,7 +33,7 @@
        {:size   :paragraph-2
         :weight :monospace
         :style  (style/account-address blur? theme)}
-        address]]]]))
+        (or ens (address/get-shortened-key address))]]]]))

 (defn- internal-view
  []
@@ -42,39 +43,39 @@
        on-press-in (fn []
                      (when-not (= @state :selected)
                        (reset! timer (js/setTimeout #(reset! state :pressed) 100))))]
-    (fn [{:keys [blur? user-props customization-color
+    (fn [{:keys [blur? user-props active-state? customization-color
                 on-press
                 on-options-press
                 theme]
          :or   {customization-color :blue
                 blur?               false}}]
      (let [on-press-out (fn []
-                           (let [new-state (if @active? :default :active)]
+                           (let [new-state (if (or (not active-state?) @active?) :default :active)]
                             (when @timer (js/clearTimeout @timer))
                             (reset! timer nil)
                             (reset! active? (= new-state :active))
-                             (reset! state new-state)
-                             (when on-press
-                               (on-press))))]
+                             (reset! state new-state)))]
        [rn/pressable
         {:style               (style/container
                                {:state @state :blur? blur? :customization-color customization-color})
          :on-press-in         on-press-in
          :on-press-out        on-press-out
+          :on-press            on-press
          :accessibility-label :container}
         [left-container
          {:blur?               blur?
           :theme               theme
           :name                (:name user-props)
+           :ens                 (:ens user-props)
           :address             (:address user-props)
-           :customization-color (:customization-color user-props)}]
-         [rn/pressable
-          {:accessibility-label :options-button
-           :on-press            #(when on-options-press
-                                   (on-options-press))}
-          [icon/icon :i/options
-           {:color (if blur?
-                     colors/white-opa-70
-                     (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]]]))))
+           :customization-color (or (:customization-color user-props) :blue)}]
+         (when on-options-press
+           [rn/pressable
+            {:accessibility-label :options-button
+             :on-press            on-options-press}
+            [icon/icon :i/options
+             {:color (if blur?
+                       colors/white-opa-70
+                       (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]])]))))

 (def view (quo.theme/with-theme internal-view))
@@ -9,6 +9,7 @@
    [quo.theme :as quo.theme]
    [react-native.core :as rn]
    [reagent.core :as reagent]
+    [utils.address :as address]
    [utils.i18n :as i18n]))

 (defn- account
@@ -30,7 +31,7 @@
    {:size   :paragraph-2
     :weight :monospace
     :style  (style/account-address theme)}
-    address]])
+    (address/get-shortened-key address)]])

 (defn- internal-view
  []
@@ -27,8 +27,9 @@
      {:size  20
       :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]
     :checkbox
-     [selectors/checkbox
-      {:checked?            checked?
+     [selectors/view
+      {:type                :checkbox
+       :checked?            checked?
       :accessibility-label :user-list-toggle-check
       :disabled?           disabled?
       :on-change           (when on-check on-check)}]
@@ -5,23 +5,22 @@
 (def container
  {:flex-wrap      :nowrap
   :flex-direction :row
-   :align-items    :center})
+   :align-items    :flex-end})

-(defn middle-dot-nickname
+(def name-container
+  {:margin-right   8
+   :flex-direction :row
+   :align-items    :flex-end
+  })
+
+(defn middle-dot
  [theme]
  {:color             (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
-   :margin-horizontal 4})
+   :margin-horizontal 2})

 (defn chat-key-text
  [theme]
-  {:color       (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
-   :margin-left 8
-   :padding-top 1})
-
-(defn middle-dot-chat-key
-  [theme]
-  {:color       (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
-   :margin-left 4})
+  {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)})

 (defn primary-name
  [muted? theme]
@@ -34,14 +33,13 @@
  [theme]
  {:padding-top 1
   :flex-shrink 999999
-   :min-width   40
   :color       (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})

-(def icon-container
-  {:margin-left 4})
+(defn icon-container
+  [is-first?]
+  {:margin-left   (if is-first? 4 2)
+   :margin-bottom 2})

 (defn time-text
  [theme]
-  {:color       (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
-   :padding-top 1
-   :margin-left 8})
+  {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)})
@@ -14,46 +14,48 @@
           muted? size theme]
    :or   {size 13}}]
  [rn/view {:style (merge style/container style {:height (if (= size 15) 21.75 18.2)})}
-   [text/text
-    {:weight              :semi-bold
-     :size                (if (= size 15) :paragraph-1 :paragraph-2)
-     :number-of-lines     1
-     :accessibility-label :author-primary-name
-     :style               (style/primary-name muted? theme)}
-    primary-name]
-   (when (not (string/blank? secondary-name))
-     [:<>
-      [text/text
-       {:size            :label
-        :number-of-lines 1
-        :style           (style/middle-dot-nickname theme)}
-       middle-dot]
-      [text/text
-       {:weight              :medium
-        :size                :label
-        :number-of-lines     1
-        :accessibility-label :author-secondary-name
-        :style               (style/secondary-name theme)}
-       secondary-name]])
-   (when contact?
-     [icons/icon :main-icons2/contact
-      {:size            12
-       :no-color        true
-       :container-style style/icon-container}])
-   (cond
-     verified?
-     [icons/icon :main-icons2/verified
-      {:size            12
-       :no-color        true
-       :container-style style/icon-container}]
-     untrustworthy?
-     [icons/icon :main-icons2/untrustworthy
-      {:size            12
-       :no-color        true
-       :container-style style/icon-container}])
+   [rn/view {:style style/name-container}
+    [text/text
+     {:weight              :semi-bold
+      :size                (if (= size 15) :paragraph-1 :paragraph-2)
+      :number-of-lines     1
+      :accessibility-label :author-primary-name
+      :style               (style/primary-name muted? theme)}
+     primary-name]
+    (when (not (string/blank? secondary-name))
+      [:<>
+       [text/text
+        {:size            :label
+         :number-of-lines 1
+         :style           (style/middle-dot theme)}
+        middle-dot]
+       [text/text
+        {:weight              :medium
+         :size                :label
+         :number-of-lines     1
+         :accessibility-label :author-secondary-name
+         :style               (style/secondary-name theme)}
+        secondary-name]])
+    (when contact?
+      [icons/icon :main-icons2/contact
+       {:size            12
+        :no-color        true
+        :container-style (style/icon-container true)}])
+    (cond
+      verified?
+      [icons/icon :main-icons2/verified
+       {:size            12
+        :no-color        true
+        :container-style (style/icon-container contact?)}]
+      untrustworthy?
+      [icons/icon :main-icons2/untrustworthy
+       {:size            12
+        :no-color        true
+        :container-style (style/icon-container contact?)}])
+   ]
   (when (and (not verified?) short-chat-key)
     [text/text
-      {:monospace       true
+      {:weight          :monospace
       :size            :label
       :number-of-lines 1
       :style           (style/chat-key-text theme)}
@@ -63,7 +65,7 @@
      {:monospace       true
       :size            :label
       :number-of-lines 1
-       :style           (style/middle-dot-chat-key theme)}
+       :style           (style/middle-dot theme)}
      middle-dot])
   (when time-str
     [text/text
@@ -2,11 +2,6 @@
  (:require
    [quo.foundations.colors :as colors]))

-(def height 56)
-
-(def root-container
-  {:height height})
-
 (defn container
  [state theme]
  {:padding-top      12
@@ -25,7 +25,7 @@
 (defn- view-internal
  [{:keys [theme container-style default-active state data on-press active-id]}]
  [rn/view
-   {:style               (merge style/root-container container-style)
+   {:style               container-style
    :accessibility-label :showcase-nav}
   [rn/flat-list
    {:data                              data
@@ -11,8 +11,9 @@
   {:on-press            on-change
    :accessibility-label :disclaimer-touchable-opacity}
   [rn/view {:style (merge container-style (style/container blur?))}
-    [selectors/checkbox
-     {:accessibility-label accessibility-label
+    [selectors/view
+     {:type                :checkbox
+      :accessibility-label accessibility-label
      :blur?               blur?
      :checked?            checked?
      :on-change           on-change}]
@@ -6,27 +6,27 @@

 (defn render-toggle
  ([]
-   (render-toggle {}))
+   (render-toggle {:type :toggle}))
  ([opts]
-   (h/render (reagent/as-element [selectors/toggle opts]))))
+   (h/render (reagent/as-element [selectors/view (assoc opts :type :toggle)]))))

 (defn render-checkbox
  ([]
-   (render-checkbox {}))
+   (render-checkbox {:type :checkbox}))
  ([opts]
-   (h/render (reagent/as-element [selectors/checkbox opts]))))
+   (h/render (reagent/as-element [selectors/view (assoc opts :type :checkbox)]))))

-(defn render-checkbox-prefill
+(defn render-filled-checkbox
  ([]
-   (render-checkbox-prefill {}))
+   (render-filled-checkbox {:type :filled-checkbox}))
  ([opts]
-   (h/render (reagent/as-element [selectors/checkbox-prefill opts]))))
+   (h/render (reagent/as-element [selectors/view (assoc opts :type :filled-checkbox)]))))

 (defn render-radio
  ([]
-   (render-radio {}))
+   (render-radio {:type :radio}))
  ([opts]
-   (h/render (reagent/as-element [selectors/radio opts]))))
+   (h/render (reagent/as-element [selectors/view (assoc opts :type :radio)]))))

 (h/test "default render of toggle component"
  (render-toggle)
@@ -58,12 +58,12 @@
    (h/fire-event :press (h/get-by-test-id "checkbox-component"))
    (h/was-called mock-fn)))

-(h/test "default render of checkbox-prefill component"
-  (render-checkbox-prefill)
-  (h/is-truthy (h/get-by-test-id "checkbox-prefill-component")))
+(h/test "default render of filled-checkbox component"
+  (render-filled-checkbox)
+  (h/is-truthy (h/get-by-test-id "filled-checkbox-component")))

-(h/test "checkbox-prefill component on change is working"
+(h/test "filled-checkbox component on change is working"
  (let [mock-fn (h/mock-fn)]
-    (render-checkbox-prefill {:on-change mock-fn})
-    (h/fire-event :press (h/get-by-test-id "checkbox-prefill-component"))
+    (render-filled-checkbox {:on-change mock-fn})
+    (h/fire-event :press (h/get-by-test-id "filled-checkbox-component"))
    (h/was-called mock-fn)))
@@ -6,7 +6,7 @@
  [customization-color theme]
  {:normal {:checked   (colors/resolve-color customization-color theme)
            :unchecked (colors/theme-colors colors/neutral-30 colors/neutral-80 theme)}
-   :blur   {:checked   (colors/theme-colors (colors/custom-color customization-color 50)
+   :blur   {:checked   (colors/theme-colors (colors/resolve-color customization-color theme)
                                            colors/white-opa-70
                                            theme)
            :unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-10 theme)}})
@@ -15,7 +15,7 @@
  [customization-color theme]
  {:normal {:checked   (colors/resolve-color customization-color theme)
            :unchecked (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)}
-   :blur   {:checked   (colors/theme-colors (colors/custom-color customization-color 50)
+   :blur   {:checked   (colors/theme-colors (colors/resolve-color customization-color theme)
                                            colors/white
                                            theme)
            :unchecked (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 theme)}})
@@ -29,7 +29,7 @@
  [customization-color theme]
  {:normal {:checked   (colors/resolve-color customization-color theme)
            :unchecked (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40 theme)}
-   :blur   {:checked   (colors/theme-colors (colors/custom-color customization-color 50)
+   :blur   {:checked   (colors/theme-colors (colors/resolve-color customization-color theme)
                                            colors/white)
            :unchecked colors/white-opa-5}})

@@ -38,7 +38,7 @@
  {:normal (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)
   :blur   (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 theme)})

-(defn- checkbox-prefill-background-color
+(defn- filled-checkbox-background-color
  [theme]
  {:normal (colors/theme-colors colors/neutral-30 colors/neutral-80 theme)
   :blur   (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)})
@@ -119,16 +119,16 @@
            (colors/theme-colors colors/white colors/neutral-100 theme)
            colors/white)})

-(defn checkbox-prefill
+(defn filled-checkbox
  [{:keys [disabled? blur? container-style theme]}]
  (assoc container-style
         :height           21
         :width            21
         :border-radius    6
         :opacity          (if disabled? 0.3 1)
-         :background-color (get-color (checkbox-prefill-background-color theme) blur?)))
+         :background-color (get-color (filled-checkbox-background-color theme) blur?)))

-(defn checkbox-prefill-check
+(defn filled-checkbox-check
  [checked? _blur? theme]
  {:size  20
   :color (when checked? (colors/theme-colors colors/neutral-100 colors/white theme))})
@@ -11,7 +11,7 @@
  (when checked-atom (swap! checked-atom not))
  (when on-change (on-change (not checked?))))

-(defn- selector-internal
+(defn- base-selector
  [{:keys [default-checked? checked?]}]
  (let [controlled-component? (some? checked?)
        internal-checked?     (when-not controlled-component?
@@ -28,14 +28,13 @@
                                                 :container-style     container-style
                                                 :customization-color customization-color
                                                 :theme               theme})]
-        [rn/touchable-without-feedback
+        [rn/pressable
         (when-not disabled?
           {:on-press #(handle-press on-change internal-checked? actual-checked?)})
         [rn/view
          {:style                             outer-styles
           :needs-offscreen-alpha-compositing true
           :accessibility-label               accessibility-label
-           :accessibility-role                :checkbox
           :testID                            test-id}
          [rn/view
           {:style (inner-style-fn {:theme               theme
@@ -45,39 +44,49 @@
           (when (and icon-style-fn actual-checked?)
             [icons/icon :i/check-small (icon-style-fn actual-checked? blur? theme)])]]]))))

-(def ^:private selector (quo.theme/with-theme selector-internal))
-
-(defn toggle
+(defn- toggle
  [props]
-  [selector
+  [base-selector
   (assoc props
          :label-prefix   "toggle"
          :outer-style-fn style/toggle
          :inner-style-fn style/toggle-inner)])

-(defn radio
+(defn- radio
  [props]
-  [selector
+  [base-selector
   (assoc props
          :label-prefix   "radio"
          :outer-style-fn style/radio
          :inner-style-fn style/radio-inner)])

-(defn checkbox
+(defn- checkbox
  [props]
-  [selector
+  [base-selector
   (assoc props
          :label-prefix   "checkbox"
          :outer-style-fn style/checkbox
          :inner-style-fn style/common-checkbox-inner
          :icon-style-fn  style/checkbox-check)])

-(defn checkbox-prefill
+(defn- filled-checkbox
  [props]
-  [selector
+  [base-selector
   (assoc props
-          :label-prefix   "checkbox-prefill"
-          :outer-style-fn style/checkbox-prefill
+          :label-prefix   "filled-checkbox"
+          :outer-style-fn style/filled-checkbox
          :inner-style-fn style/common-checkbox-inner
-          :icon-style-fn  style/checkbox-prefill-check)])
+          :icon-style-fn  style/filled-checkbox-check)])

+(defn view-internal
+  [{:keys [type]
+    :or   {type :toggle}
+    :as   props}]
+  (case type
+    :toggle          [toggle props]
+    :radio           [radio props]
+    :checkbox        [checkbox props]
+    :filled-checkbox [filled-checkbox props]
+    nil))
+
+(def view (quo.theme/with-theme view-internal))
@@ -29,8 +29,9 @@
    [rn/view {:style style/card-footer-label-container}
     [text/text {:size :paragraph-2} label]]
    [rn/view {:style style/card-footer-toggle-container}
-     [selectors/toggle
-      {:disabled? (not active?)
+     [selectors/view
+      {:type      :toggle
+       :disabled? (not active?)
       :on-change on-toggle}]]]])

 (defn- selection-indicator
@@ -97,9 +97,7 @@
                       {:type :outline
                        :size 24})
                (:button-text action-props)]
-     :selector (if (= (:type action-props) :checkbox)
-                 [selectors/checkbox action-props]
-                 [selectors/toggle action-props])
+     :selector [selectors/view action-props]
     nil)])

 (defn- internal-view
@@ -3,7 +3,7 @@
    [quo.components.avatars.account-avatar.view :as account-avatar]
    [quo.components.avatars.channel-avatar.view :as channel-avatar]
    [quo.components.avatars.user-avatar.view :as user-avatar]
-    [quo.components.avatars.wallet-user-avatar :as wallet-avatar]
+    [quo.components.avatars.wallet-user-avatar.view :as wallet-avatar]
    [quo.components.share.qr-code.style :as style]
    [react-native.core :as rn]
    [react-native.fast-image :as fast-image]))
@@ -1,34 +1,119 @@
 (ns quo.components.share.share-qr-code.component-spec
-  (:require
-    [quo.components.share.share-qr-code.view :as share-qr-code]
-    [test-helpers.component :as h]))
+  (:require [quo.components.share.share-qr-code.view :as share-qr-code]
+            [test-helpers.component :as h]))
+
+(defn render-share-qr-code
+  [{share-qr-type :type :as props}]
+  (let [component-rendered (h/render [share-qr-code/view {:type share-qr-type}])
+        rerender-fn        (h/get-rerender-fn component-rendered)
+        share-qr-code      (h/get-by-label-text :share-qr-code)]
+    ;; Fires on-layout since it's needed to render the content
+    (h/fire-event :layout share-qr-code #js {:nativeEvent #js {:layout #js {:width 500}}})
+    (rerender-fn [share-qr-code/view props])))

 (h/describe "Share QR Code component"
-  (h/test "renders share qr code component"
-    (h/render [share-qr-code/view
-               {:link-title " A test title"}])
-    (-> (js/expect (h/get-by-text "A test title"))
-        (.toBeTruthy)))
+  (h/describe "Renders share-qr-code component in all types"
+    (let [qr-label "Text shown below QR"]
+      (h/test "Profile"
+        (render-share-qr-code {:type    :profile
+                               :qr-data qr-label})
+        (h/is-truthy (h/get-by-text qr-label)))

-  (h/test "renders share qr code url"
-    (h/render [share-qr-code/view
-               {:qr-url " A test url"}])
-    (-> (js/expect (h/get-by-text "A test url"))
-        (.toBeTruthy)))
+      (h/test "Wallet Legacy"
+        (render-share-qr-code {:type    :wallet-legacy
+                               :qr-data qr-label
+                               :emoji   "👻"})
+        (h/is-truthy (h/get-by-text qr-label)))

-  (h/test "on press link event fires"
-    (let [event (h/mock-fn)]
-      (h/render [share-qr-code/view
-                 {:url-on-press event
-                  :qr-url       " A test url"}])
-      (h/fire-event :press (h/get-by-text "A test url"))
-      (-> (js/expect event)
-          (.toHaveBeenCalledTimes 1))))
+      (h/test "Wallet Multichain"
+        (render-share-qr-code {:type    :wallet-multichain
+                               :qr-data qr-label
+                               :emoji   "👻"})
+        (h/is-truthy (h/get-by-text qr-label)))))

-  (h/test "on press share event fires"
-    (let [event (h/mock-fn)]
-      (h/render [share-qr-code/view
-                 {:share-on-press event}])
-      (h/fire-event :press (h/get-by-label-text :share-profile))
-      (-> (js/expect event)
-          (.toHaveBeenCalledTimes 1)))))
+  (h/describe "Fires all events for all types"
+    (letfn [(test-fire-events [props test-seq]
+              (doseq [{:keys [test-name event-name
+                              callback-prop-key
+                              accessibility-label]} test-seq
+                      :let                          [event-fn (h/mock-fn)]]
+                (h/test test-name
+                  (render-share-qr-code (assoc props callback-prop-key event-fn))
+                  (h/fire-event event-name (h/get-by-label-text accessibility-label))
+                  (h/was-called-times event-fn 1))))]
+
+      (h/describe "Profile"
+        (test-fire-events
+         {:type :profile}
+         [{:test-name           "Text pressed"
+           :accessibility-label :share-qr-code-info-text
+           :event-name          :press
+           :callback-prop-key   :on-text-press}
+          {:test-name           "Text long pressed"
+           :accessibility-label :share-qr-code-info-text
+           :event-name          :long-press
+           :callback-prop-key   :on-text-long-press}
+          {:test-name           "Share button"
+           :accessibility-label :link-to-profile
+           :event-name          :press
+           :callback-prop-key   :on-share-press}]))
+
+      (h/describe "Wallet Legacy"
+        (test-fire-events
+         {:type :wallet-legacy :emoji "👽"}
+         [{:test-name           "Text pressed"
+           :accessibility-label :share-qr-code-info-text
+           :event-name          :press
+           :callback-prop-key   :on-text-press}
+          {:test-name           "Text long pressed"
+           :accessibility-label :share-qr-code-info-text
+           :event-name          :long-press
+           :callback-prop-key   :on-text-long-press}
+          {:test-name           "Share button pressed"
+           :accessibility-label :link-to-profile
+           :event-name          :press
+           :callback-prop-key   :on-share-press}
+          {:test-name           "Info icon pressed"
+           :accessibility-label :share-qr-code-info-icon
+           :event-name          :press
+           :callback-prop-key   :on-info-press}
+          {:test-name           "Legacy tab pressed"
+           :accessibility-label :share-qr-code-legacy-tab
+           :event-name          :press
+           :callback-prop-key   :on-legacy-press}
+          {:test-name           "Multichain tab pressed"
+           :accessibility-label :share-qr-code-multichain-tab
+           :event-name          :press
+           :callback-prop-key   :on-multichain-press}]))
+
+      (h/describe "Wallet Multichain"
+        (test-fire-events
+         {:type :wallet-multichain :emoji "👽"}
+         [{:test-name           "Text pressed"
+           :accessibility-label :share-qr-code-info-text
+           :event-name          :press
+           :callback-prop-key   :on-text-press}
+          {:test-name           "Text long pressed"
+           :accessibility-label :share-qr-code-info-text
+           :event-name          :long-press
+           :callback-prop-key   :on-text-long-press}
+          {:test-name           "Share button pressed"
+           :accessibility-label :link-to-profile
+           :event-name          :press
+           :callback-prop-key   :on-share-press}
+          {:test-name           "Info icon pressed"
+           :accessibility-label :share-qr-code-info-icon
+           :event-name          :press
+           :callback-prop-key   :on-info-press}
+          {:test-name           "Legacy tab pressed"
+           :accessibility-label :share-qr-code-legacy-tab
+           :event-name          :press
+           :callback-prop-key   :on-legacy-press}
+          {:test-name           "Multichain tab pressed"
+           :accessibility-label :share-qr-code-multichain-tab
+           :event-name          :press
+           :callback-prop-key   :on-multichain-press}
+          {:test-name           "Settings pressed"
+           :accessibility-label :share-qr-code-settings
+           :event-name          :press
+           :callback-prop-key   :on-settings-press}])))))
@@ -1,45 +1,116 @@
 (ns quo.components.share.share-qr-code.style
-  (:require
-    [quo.foundations.colors :as colors]))
+  (:require [quo.foundations.colors :as colors]))

-(def qr-code-container
-  {:padding-top        12
-   :padding-horizontal 12
-   :padding-bottom     8
-   :border-radius      16
-   :background-color   colors/white-opa-5
-   :flex-direction     :column
-   :justify-content    :center
-   :align-items        :center})
+(def outer-container
+  {:border-radius 16
+   :width         "100%"
+   :overflow      :hidden})

-(def profile-address-column
-  {:margin-horizontal :auto
-   :flex              4})
+(def overlay-color colors/white-opa-5)

-(def profile-address-container
+(def ^:private padding-horizontal 12)
+
+(def content-container
+  {:z-index            1
+   :padding-horizontal padding-horizontal
+   :padding-top        12
+   :padding-bottom     8})
+
+;;; Header
+(def header-container
+  {:flex-direction :row
+   :margin-bottom  12})
+
+(def header-tab-active {:background-color colors/white-opa-20})
+(def header-tab-inactive {:background-color colors/white-opa-5})
+(def space-between-tabs {:width 8})
+
+(def info-icon
+  {:margin-left :auto
+   :align-self  :center})
+
+(def info-icon-color colors/white-opa-40)
+
+;;; QR code
+(defn qr-code-size
+  [total-width]
+  (- total-width (* 2 padding-horizontal)))
+
+;;; Bottom part
+(def bottom-container
+  {:margin-top      8
+   :flex-direction  :row
+   :justify-content :space-between})
+
+(def title {:color colors/white-opa-40})
+
+(def share-button-size 32)
+(def ^:private share-button-gap 16)
+
+(defn share-button-container
+  [alignment]
+  {:justify-content (if (= alignment :top) :flex-start :center)
+   :margin-left     share-button-gap})
+
+(defn data-text
+  [total-width]
+  {:width (- total-width (* 2 padding-horizontal) share-button-size share-button-gap)})
+
+;;; Wallet variants
+(def wallet-data-and-share-container
+  {:margin-top      2
+   :flex-direction  :row
+   :justify-content :space-between})
+
+(def wallet-legacy-container {:flex 1})
+
+(def wallet-multichain-container {:flex 1 :margin-top 4})
+
+(def wallet-multichain-networks
  {:flex-direction  :row
   :justify-content :space-between
-   :margin-top      6})
+   :margin-bottom   8})

-(def profile-address-content-container
-  {:padding-top 2
-   :align-self  :flex-start})
+(def wallet-multichain-data-container {:margin-top 4})

-(def profile-address-content
-  {:color colors/white})
+;;; Dashed line
+(def divider-container
+  {:height            8
+   :margin-horizontal 4
+   :justify-content   :center
+   :overflow          :hidden})

-(def profile-address-label
-  {:color colors/white-opa-40})
+(def ^:private padding-for-divider (+ padding-horizontal 4))
+(def ^:private dashed-line-width 2)
+(def ^:private dashed-line-space 4)

-(def share-button-container
-  {:flex            1
-   :flex-direction  :column
-   :justify-content :center
-   :align-items     :flex-end})
+(def dashed-line
+  {:flex-direction :row
+   :margin-left    -1})

-(def icon-container
-  {:height          36
-   :flex-direction  :row
-   :align-items     :center
-   :justify-content :space-between
-   :padding-bottom  12})
+(def line
+  {:background-color colors/white-opa-20
+   :width            dashed-line-width
+   :height           1})
+
+(def line-space
+  {:width  dashed-line-space
+   :height 1})
+
+(defn number-lines-and-spaces-to-fill
+  [component-width]
+  (let [line-and-space-width (+ dashed-line-width dashed-line-space)
+        width-to-fill        (- component-width (* 2 padding-for-divider))
+        number-of-lines      (* (/ width-to-fill line-and-space-width) 2)]
+    (inc (int number-of-lines))))
+
+(def ^:private get-network-full-name
+  {"eth"  :ethereum
+   "opt"  :optimism
+   "arb1" :arbitrum})
+
+(defn network-short-name-text
+  [network-short-name]
+  {:color (-> network-short-name
+              (get-network-full-name :unknown)
+              (colors/resolve-color nil))})
@@ -1,46 +1,249 @@
 (ns quo.components.share.share-qr-code.view
-  (:require
-    [quo.components.buttons.button.view :as button]
-    [quo.components.markdown.text :as text]
-    [quo.components.share.qr-code.view :as qr-code]
-    [quo.components.share.share-qr-code.style :as style]
-    [quo.foundations.colors :as colors]
-    [react-native.blur :as blur]
-    [react-native.core :as rn]))
+  (:require [clojure.set]
+            [clojure.string :as string]
+            [oops.core :as oops]
+            [quo.components.buttons.button.view :as button]
+            [quo.components.icon :as icon]
+            [quo.components.list-items.preview-list.view :as preview-list]
+            [quo.components.markdown.text :as text]
+            [quo.components.share.qr-code.view :as qr-code]
+            [quo.components.share.share-qr-code.style :as style]
+            [quo.components.tabs.tab.view :as tab]
+            [quo.foundations.resources :as quo.resources]
+            [quo.theme]
+            [react-native.blur :as blur]
+            [react-native.core :as rn]
+            [react-native.platform :as platform]
+            [reagent.core :as reagent]
+            [utils.i18n :as i18n]))
+
+(defn- line [] [rn/view {:style style/line}])
+(defn- space [] [rn/view {:style style/line-space}])
+
+(defn- dashed-line
+  [width]
+  (into [rn/view {:style style/dashed-line}]
+        (take (style/number-lines-and-spaces-to-fill width))
+        (cycle [[line] [space]])))
+
+(defn- header
+  [{:keys [share-qr-type on-info-press on-legacy-press on-multichain-press]}]
+  [rn/view {:style style/header-container}
+   [tab/view
+    {:accessibility-label         :share-qr-code-legacy-tab
+     :id                          :wallet-legacy-tab
+     :active-item-container-style style/header-tab-active
+     :item-container-style        style/header-tab-inactive
+     :size                        24
+     :active                      (= :wallet-legacy share-qr-type)
+     :on-press                    on-legacy-press}
+    (i18n/label :t/legacy)]
+   [rn/view {:style style/space-between-tabs}]
+   [tab/view
+    {:accessibility-label         :share-qr-code-multichain-tab
+     :id                          :wallet-multichain-tab
+     :active-item-container-style style/header-tab-active
+     :item-container-style        style/header-tab-inactive
+     :size                        24
+     :active                      (= :wallet-multichain share-qr-type)
+     :on-press                    on-multichain-press}
+    (i18n/label :t/multichain)]
+   [rn/pressable
+    {:accessibility-label :share-qr-code-info-icon
+     :style               style/info-icon
+     :on-press            on-info-press
+     :hit-slop            6}
+    [icon/icon :i/info
+     {:size  20
+      :color style/info-icon-color}]]])
+
+(defn- info-label
+  [share-qr-code-type]
+  [text/text {:size :paragraph-2 :weight :medium :style style/title}
+   (if (= share-qr-code-type :profile)
+     (i18n/label :t/link-to-profile)
+     (i18n/label :t/wallet-address))])
+
+(defn- info-text
+  [{:keys [width on-press on-long-press ellipsize?]} qr-data-text]
+  [rn/pressable
+   {:accessibility-label :share-qr-code-info-text
+    :style               (style/data-text width)
+    :on-press            on-press
+    :on-long-press       on-long-press}
+   [text/text
+    (cond-> {:size   :paragraph-1
+             :weight :monospace}
+      ellipsize? (assoc :number-of-lines 1
+                        :ellipsize-mode  :middle))
+    qr-data-text]])
+
+(defn- share-button
+  [{:keys [alignment on-press]}]
+  [rn/view {:style (style/share-button-container alignment)}
+   [button/button
+    {:icon-only?          true
+     :type                :grey
+     :background          :blur
+     :size                style/share-button-size
+     :accessibility-label :link-to-profile
+     :on-press            on-press}
+    :i/share]])
+
+(defn- network-colored-text
+  [network-short-name]
+  [text/text {:style (style/network-short-name-text network-short-name)}
+   (str network-short-name ":")])
+
+(defn- wallet-multichain-colored-address
+  [full-address]
+  (let [[networks address]  (as-> full-address $
+                              (string/split $ ":")
+                              [(butlast $) (last $)])
+        ->network-hiccup-xf (map #(vector network-colored-text %))]
+    (as-> networks $
+      (into [:<>] ->network-hiccup-xf $)
+      (conj $ address))))
+
+(defn- profile-bottom
+  [{:keys [component-width qr-data on-text-press on-text-long-press on-share-press share-qr-type]}]
+  [:<>
+   [rn/view
+    [info-label share-qr-type]
+    [info-text
+     {:width         component-width
+      :ellipsize?    true
+      :on-press      on-text-press
+      :on-long-press on-text-long-press}
+     qr-data]]
+   [share-button
+    {:alignment :center
+     :on-press  on-share-press}]])
+
+(defn- wallet-legacy-bottom
+  [{:keys [share-qr-type component-width qr-data on-text-press on-text-long-press on-share-press]}]
+  [rn/view {:style style/wallet-legacy-container}
+   [info-label share-qr-type]
+   [rn/view {:style style/wallet-data-and-share-container}
+    [info-text
+     {:width         component-width
+      :on-press      on-text-press
+      :on-long-press on-text-long-press}
+     qr-data]
+    [share-button
+     {:alignment :top
+      :on-press  on-share-press}]]])
+
+(def ^:private known-networks #{:ethereum :optimism :arbitrum})
+
+(defn- get-network-image-source
+  [network]
+  {:source (quo.resources/get-network (get known-networks network :unknown))})
+
+(defn wallet-multichain-bottom
+  [{:keys [share-qr-type component-width qr-data on-text-press on-text-long-press
+           on-share-press networks on-settings-press]}]
+  [rn/view {:style style/wallet-multichain-container}
+   [rn/view {:style style/wallet-multichain-networks}
+    [preview-list/view {:type :network :size :size-32}
+     (map get-network-image-source networks)]
+    [button/button
+     {:icon-only?          true
+      :type                :grey
+      :background          :blur
+      :size                32
+      :accessibility-label :share-qr-code-settings
+      :on-press            on-settings-press}
+     :i/advanced]]
+   [rn/view {:style style/divider-container}
+    [dashed-line component-width]]
+   [rn/view {:style style/wallet-multichain-data-container}
+    [info-label share-qr-type]
+    [rn/view {:style style/wallet-data-and-share-container}
+     [info-text
+      {:width         component-width
+       :on-press      on-text-press
+       :on-long-press on-text-long-press}
+      [wallet-multichain-colored-address qr-data]]
+     [share-button
+      {:alignment :top
+       :on-press  on-share-press}]]]])
+
+(defn- share-qr-code
+  [{:keys [share-qr-type qr-image-uri component-width customization-color full-name
+           profile-picture emoji]
+    :as   props}]
+  [rn/view {:style style/content-container}
+   (when (#{:wallet-legacy :wallet-multichain} share-qr-type)
+     [header props])
+   [quo.theme/provider {:theme :light}
+    [qr-code/view
+     {:qr-image-uri        qr-image-uri
+      :size                (style/qr-code-size component-width)
+      :avatar              (if (= share-qr-type :profile)
+                             :profile
+                             :wallet-account)
+      :customization-color customization-color
+      :full-name           full-name
+      :profile-picture     profile-picture
+      :emoji               emoji}]]
+   [rn/view {:style style/bottom-container}
+    (case share-qr-type
+      :profile           [profile-bottom props]
+      :wallet-legacy     [wallet-legacy-bottom props]
+      :wallet-multichain [wallet-multichain-bottom props]
+      nil)]])

 (defn view
-  [{:keys [qr-image-uri link-title url-on-press url-on-long-press qr-url share-on-press]}]
-  [blur/ios-view
-   {:style     style/qr-code-container
-    :blur-type :light}
-   [qr-code/view {:qr-image-uri qr-image-uri}]
-   [rn/view {:style style/profile-address-container}
-    [rn/view {:style style/profile-address-column}
-     [text/text
-      {:size   :paragraph-2
-       :weight :medium
-       :style  style/profile-address-label}
-      link-title]
-     [rn/touchable-highlight
-      {:active-opacity   1
-       :underlay-color   colors/neutral-80-opa-1-blur
-       :background-color :transparent
-       :on-press         url-on-press
-       :on-long-press    url-on-long-press
-       :style            style/profile-address-content-container}
-      [text/text
-       {:style           style/profile-address-content
-        :size            :paragraph-1
-        :weight          :medium
-        :ellipsize-mode  :middle
-        :number-of-lines 1}
-       qr-url]]]
-    [rn/view {:style style/share-button-container}
-     [button/button
-      {:icon-only?          true
-       :type                :grey
-       :background          :blur
-       :size                32
-       :accessibility-label :share-profile
-       :on-press            share-on-press}
-      :i/share]]]])
+  "Receives the following properties:
+   - type:                :profile | :wallet-legacy | :wallet-multichain
+   - qr-image-uri:        Image source value.
+   - qr-data:             Text to show below the QR code.
+   - on-text-press:       Callback for the `qr-data` text.
+   - on-text-long-press:  Callback for the `qr-data` text.
+   - on-share-press:      Callback for the share button.
+   - customization-color: Custom color for the QR code component.
+   - unblur-on-android?:  [Android only] disables blur for this component.
+
+   Depending on the `type`, different properties are accepted:
+   `:profile`
+     - full-name:       User full name.
+     - profile-picture: map ({:source image-source}) or any image source.
+   `:wallet-legacy`
+     - emoji:               Emoji in a string to show in the QR code.
+     - on-info-press:       Callback for the info icon.
+     - on-legacy-press:     Callback for the legacy tab.
+     - on-multichain-press: Callback for the multichain tab.
+   `:wallet-multichain`
+     - networks:            A vector of network names as keywords (`[:ethereum, :my-net, ...]`).
+     - on-settings-press:   Callback for the settings button.
+     - emoji:               Emoji in a string to show in the QR code.
+     - on-info-press:       Callback for the info icon.
+     - on-legacy-press:     Callback for the legacy tab.
+     - on-multichain-press: Callback for the multichain tab.
+
+     WARNING on Android:
+     Sometimes while using a blur layer on top of another on Android, this component looks
+     bad because of the `blur/view`, so we can set `unblur-on-android? true` to fix it.
+     "
+  [{:keys [unblur-on-android?] :as props}]
+  (reagent/with-let [component-width     (reagent/atom nil)
+                     container-component (if (and platform/android? unblur-on-android?)
+                                           [rn/view {:background-color style/overlay-color}]
+                                           [blur/view
+                                            {:blur-radius      20
+                                             :blur-amount      20
+                                             :blur-type        :transparent
+                                             :overlay-color    style/overlay-color
+                                             :background-color style/overlay-color}])]
+    [quo.theme/provider {:theme :dark}
+     [rn/view
+      {:accessibility-label :share-qr-code
+       :style               style/outer-container
+       :on-layout           #(reset! component-width (oops/oget % "nativeEvent.layout.width"))}
+      (conj container-component
+            (when @component-width
+              [share-qr-code
+               (-> props
+                   (assoc :component-width @component-width)
+                   (clojure.set/rename-keys {:type :share-qr-type}))]))]]))
@@ -1,5 +1,6 @@
 (ns quo.components.text-combinations.view
  (:require
+    [quo.components.buttons.button.view :as button]
    [quo.components.markdown.text :as text]
    [quo.components.text-combinations.style :as style]
    [quo.theme :as theme]
@@ -23,20 +24,31 @@
           avatar
           title-accessibility-label
           description
-           description-accessibility-label]}]
+           description-accessibility-label
+           button-icon
+           button-on-press
+           customization-color]}]
  [rn/view {:style container-style}
-   [rn/view {:style style/title-container}
-    (when avatar
-      [rn/view {:style style/avatar-container}
-       [icon avatar 32]])
-
-    [text/text
-     {:accessibility-label title-accessibility-label
-      :weight              :semi-bold
-      :ellipsize-mode      :tail
-      :number-of-lines     1
-      :size                :heading-1}
-     title]]
+   [rn/view
+    {:style {:flex-direction  :row
+             :justify-content :space-between}}
+    [rn/view {:style style/title-container}
+     (when avatar
+       [rn/view {:style style/avatar-container}
+        [icon avatar 32]])
+     [text/text
+      {:accessibility-label title-accessibility-label
+       :weight              :semi-bold
+       :ellipsize-mode      :tail
+       :number-of-lines     1
+       :size                :heading-1}
+      title]]
+    (when button-icon
+      [button/button
+       {:icon-only?          true
+        :on-press            button-on-press
+        :customization-color customization-color
+        :size                32} button-icon])]
   (when description
     [text/text
      {:accessibility-label description-accessibility-label
@@ -0,0 +1,9 @@
+(ns quo.components.wallet.address-text.style
+  (:require [quo.foundations.colors :as colors]))
+
+(defn address-text
+  [format blur? theme]
+  (when (= format :short)
+    {:color (if blur?
+              colors/white-opa-40
+              (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}))
@@ -0,0 +1,31 @@
+(ns quo.components.wallet.address-text.view
+  (:require [quo.components.markdown.text :as text]
+            [quo.components.wallet.address-text.style :as style]
+            [quo.foundations.colors :as colors]
+            [quo.theme]
+            [utils.address :as utils]))
+
+(defn- colored-network-text
+  [theme network]
+  (let [{:keys [network-name short-name]} network]
+    [text/text
+     {:size  :paragraph-2
+      :style {:color (colors/resolve-color network-name theme)}}
+     (str short-name ":")]))
+
+(defn- view-internal
+  [{:keys [networks address blur? theme format]}]
+  (let [network-text-xf (map #(colored-network-text theme %))
+        address-text    [text/text
+                         {:size   :paragraph-2
+                          ;; TODO: monospace font https://github.com/status-im/status-mobile/issues/17009
+                          :weight :monospace
+                          :style  (style/address-text format blur? theme)}
+                         (if (= format :short)
+                           (utils/get-short-wallet-address address)
+                           address)]]
+    (as-> networks $
+      (into [text/text] network-text-xf $)
+      (conj $ address-text))))
+
+(def view (quo.theme/with-theme view-internal))
@@ -10,7 +10,8 @@
                    :type                :default
                    :name                "Trip to Vegas"
                    :address             "0x0ah...71a"}
-    :networks      [:ethereum :optimism]
+    :networks      [{:name :ethereum :short-name "eth"}
+                    {:name :optimism :short-name "opt"}]
    :state         :default
    :action        :none}])

@@ -4,8 +4,7 @@

 (defn container
  [{:keys [blur? customization-color theme selected?]}]
-  {:flex           1
-   :border-radius  20
+  {:border-radius  16
   :border-width   1
   :border-color   (if selected?
                     (if blur?
@@ -28,5 +27,4 @@
 (def title-container
  {:flex-direction  :row
   :align-items     :center
-   :justify-content :space-between
-   :flex            1})
+   :justify-content :space-between})
@@ -27,13 +27,16 @@
 (defn avatar
  [{{:keys [full-name]} :details
    avatar-type         :type
-    customization-color :customization-color}]
+    customization-color :customization-color
+    profile-picture     :profile-picture}]
  (if (= avatar-type :default-keypair)
    [user-avatar/user-avatar
     {:full-name           full-name
      :ring?               true
      :size                :small
-      :customization-color customization-color}]
+      :status-indicator?   false
+      :customization-color customization-color
+      :profile-picture     profile-picture}]
    [icon-avatar/icon-avatar
     {:size    :size-32
      :icon    :i/placeholder
@@ -48,8 +51,9 @@
     [text/text {:weight :semi-bold}
      (if (= type :default-keypair) (keypair-string full-name) full-name)]
     (if (= action :selector)
-       [selectors/radio
-        {:checked?            selected?
+       [selectors/view
+        {:type                :radio
+         :checked?            selected?
         :blur?               blur?
         :customization-color customization-color}]
       [rn/pressable {:on-press on-options-press}
@@ -83,9 +87,9 @@
 (defn- view-internal
  []
  (let [selected? (reagent/atom true)]
-    (fn [{:keys [accounts action] :as props}]
+    (fn [{:keys [accounts action container-style] :as props}]
      [rn/pressable
-       {:style    (style/container (merge props {:selected? @selected?}))
+       {:style    (merge (style/container (merge props {:selected? @selected?})) container-style)
        :on-press #(when (= action :selector) (reset! selected? (not @selected?)))}
       [rn/view {:style style/header-container}
        [avatar props]
@@ -1,6 +1,6 @@
-(ns quo2.components.wallet.network-routing.component-spec
+(ns quo.components.wallet.network-routing.component-spec
  (:require [oops.core :as oops]
-            [quo2.components.wallet.network-routing.view :as network-routing]
+            [quo.components.wallet.network-routing.view :as network-routing]
            [reagent.core :as reagent]
            [test-helpers.component :as h]))

@@ -1,13 +1,14 @@
 (ns quo.core
  (:refer-clojure :exclude [filter])
  (:require
+    quo.components.animated-header-flatlist.view
    quo.components.avatars.account-avatar.view
    quo.components.avatars.channel-avatar.view
    quo.components.avatars.collection-avatar.view
    quo.components.avatars.group-avatar.view
    quo.components.avatars.icon-avatar
    quo.components.avatars.user-avatar.view
-    quo.components.avatars.wallet-user-avatar
+    quo.components.avatars.wallet-user-avatar.view
    quo.components.banners.banner.view
    quo.components.browser.browser-input.view
    quo.components.buttons.button.view
@@ -30,6 +31,7 @@
    quo.components.community.channel-actions
    quo.components.community.community-card-view
    quo.components.community.community-list-view
+    quo.components.community.community-stat.view
    quo.components.community.community-view
    quo.components.community.icon
    quo.components.community.token-gating
@@ -137,6 +139,7 @@
    quo.components.wallet.account-card.view
    quo.components.wallet.account-origin.view
    quo.components.wallet.account-overview.view
+    quo.components.wallet.address-text.view
    quo.components.wallet.keypair.view
    quo.components.wallet.network-amount.view
    quo.components.wallet.network-bridge.view
@@ -158,7 +161,7 @@
 (def group-avatar quo.components.avatars.group-avatar.view/view)
 (def icon-avatar quo.components.avatars.icon-avatar/icon-avatar)
 (def user-avatar quo.components.avatars.user-avatar.view/user-avatar)
-(def wallet-user-avatar quo.components.avatars.wallet-user-avatar/wallet-user-avatar)
+(def wallet-user-avatar quo.components.avatars.wallet-user-avatar.view/wallet-user-avatar)

 ;;;; Banner
 (def banner quo.components.banners.banner.view/view)
@@ -197,7 +200,7 @@
 (def communities-membership-list-item
  quo.components.community.community-list-view/communities-membership-list-item)
 (def community-stats-column quo.components.community.community-view/community-stats-column)
-(def community-stats quo.components.community.community-view/community-stats)
+(def community-stat quo.components.community.community-stat.view/view)
 (def community-tags quo.components.community.community-view/community-tags)
 (def community-title quo.components.community.community-view/community-title)
 (def permission-tag-container quo.components.community.community-view/permission-tag-container)
@@ -238,6 +241,7 @@

 ;;;; Header
 (def header quo.components.header/header)
+(def animated-header-list quo.components.animated-header-flatlist.view/animated-header-list)

 ;;;; Gradient
 (def gradient-cover quo.components.gradient.gradient-cover.view/view)
@@ -327,10 +331,7 @@
 (def reactions-selector quo.components.selectors.reactions-selector.view/view)
 (def react quo.components.selectors.react.view/view)
 (def react-selector quo.components.selectors.react-selector.view/view)
-(def checkbox quo.components.selectors.selectors.view/checkbox)
-(def toggle quo.components.selectors.selectors.view/toggle)
-(def radio quo.components.selectors.selectors.view/radio)
-(def checkbox-prefill quo.components.selectors.selectors.view/checkbox-prefill)
+(def selectors quo.components.selectors.selectors.view/view)

 ;;;; Settings
 (def account quo.components.settings.accounts.view/account)
@@ -371,6 +372,7 @@
 (def account-card quo.components.wallet.account-card.view/view)
 (def account-origin quo.components.wallet.account-origin.view/view)
 (def account-overview quo.components.wallet.account-overview.view/view)
+(def address-text quo.components.wallet.address-text.view/view)
 (def keypair quo.components.wallet.keypair.view/view)
 (def network-amount quo.components.wallet.network-amount.view/view)
 (def network-bridge quo.components.wallet.network-bridge.view/view)
@@ -15,6 +15,7 @@
    [quo.components.calendar.calendar.component-spec]
    [quo.components.calendar.calendar.month-picker.component-spec]
    [quo.components.colors.color-picker.component-spec]
+    [quo.components.community.community-stat.component-spec]
    [quo.components.counter.counter.component-spec]
    [quo.components.counter.step.component-spec]
    [quo.components.dividers.divider-label.component-spec]
@@ -79,6 +80,7 @@
    [quo.components.wallet.keypair.component-spec]
    [quo.components.wallet.network-amount.component-spec]
    [quo.components.wallet.network-bridge.component-spec]
+    [quo.components.wallet.network-routing.component-spec]
    [quo.components.wallet.progress-bar.component-spec]
    [quo.components.wallet.summary-info.component-spec]
    [quo.components.wallet.token-input.component-spec]
@@ -4,6 +4,9 @@
    [quo.theme :as theme]
    [react-native.platform :as platform]))

+(def account-colors
+  [:blue :yellow :purple :turquoise :magenta :sky :orange :army :flamingo :camel :copper])
+
 (defn alpha
  [value opacity]
  (when value
@@ -29,3 +29,6 @@
  (testing
    "when using opacity theme is ignored and uses the light suffix resolver"
    (is (colors/resolve-color :blue :light 10) (colors/resolve-color :blue :dark 10))))
+
+(deftest test-account-colors-customization
+  (is (every? #(contains? colors/customization %) colors/account-colors)))
@@ -18,12 +18,14 @@
         (log/error e))))

 (defn set-item!
-  [k value]
-  (-> ^js async-storage
-      (.setItem (str k)
-                (clj->transit value))
-      (.catch (fn [error]
-                (log/error "[async-storage]" error)))))
+  ([k value] (set-item! k value identity))
+  ([k value cb]
+   (-> ^js async-storage
+       (.setItem (str k)
+                 (clj->transit value))
+       (.then (fn [_] (cb)))
+       (.catch (fn [error]
+                 (log/error "[async-storage]" error))))))

 (defn set-item-factory
  []
@@ -0,0 +1,12 @@
+(ns react-native.react-native-intersection-observer
+  (:require
+    ["react-native-intersection-observer" :refer [InView IOFlatList]]
+    [react-native.flat-list :refer [base-list-props]]
+    [reagent.core :as reagent]))
+
+(def view (reagent/adapt-react-class InView))
+(def flat-list-comp (reagent/adapt-react-class IOFlatList))
+
+(defn flat-list
+  [props]
+  [flat-list-comp (base-list-props props)])
@@ -16,16 +16,17 @@
    [status-im.ui.components.list-selection :as list-selection]
    [status-im.utils.deprecated-types :as types]
    [status-im.utils.random :as random]
-    [status-im.utils.universal-links.utils :as links]
    [status-im2.constants :as constants]
    [status-im2.navigation.events :as navigation]
    [taoensso.timbre :as log]
    [utils.address :as address]
    [utils.debounce :as debounce]
+    [utils.ens.core :as utils.ens]
    [utils.ethereum.chain :as chain]
    [utils.i18n :as i18n]
    [utils.re-frame :as rf]
    [utils.security.core :as security]
+    [utils.universal-links :as links]
    [utils.url :as url]))

 (rf/defn update-browser-option
@@ -90,7 +91,7 @@
  (when (not error?)
    (let [current-url (get-current-url (get-current-browser db))
          host        (url/url-host current-url)]
-      (if (and (not resolved-url) (ens/is-valid-eth-name? host))
+      (if (and (not resolved-url) (utils.ens/is-valid-eth-name? host))
        {:db                              (update db :browser/options assoc :resolving? true)
         :browser/resolve-ens-contenthash {:chain-id (chain/chain-id db)
                                           :ens-name host
@@ -107,14 +107,15 @@
  [{:keys [db] :as cofx} message]
  (let [current-chat-id (:current-chat-id db)
        text            (get-in message [:content :text])]
-    {:db       (-> db
-                   (assoc-in [:chat/inputs current-chat-id :metadata :editing-message]
-                             message)
-                   (assoc-in [:chat/inputs current-chat-id :metadata :responding-to-message] nil)
-                   (update-in [:chat/inputs current-chat-id :metadata]
-                              dissoc
-                              :sending-image))
-     :dispatch [:mention/to-input-field text current-chat-id]}))
+    {:db         (-> db
+                     (assoc-in [:chat/inputs current-chat-id :metadata :editing-message]
+                               message)
+                     (assoc-in [:chat/inputs current-chat-id :metadata :responding-to-message] nil)
+                     (update-in [:chat/inputs current-chat-id :metadata]
+                                dissoc
+                                :sending-image))
+     :dispatch-n [[:chat.ui/set-chat-input-text nil current-chat-id]
+                  [:mention/to-input-field text current-chat-id]]}))

 (rf/defn show-contact-request-input
  "Sets reference to previous chat message and focuses on input"
@@ -8,9 +8,9 @@
    [status-im.bottom-sheet.events :as bottom-sheet]
    [status-im.ui.components.colors :as colors]
    [status-im.utils.deprecated-types :as types]
-    [status-im.utils.universal-links.core :as universal-links]
    [status-im2.common.muting.helpers :refer [format-mute-till]]
    [status-im2.common.toasts.events :as toasts]
+    [status-im2.common.universal-links :as universal-links]
    [status-im2.constants :as constants]
    [status-im2.contexts.chat.events :as chat.events]
    [status-im2.contexts.shell.activity-center.events :as activity-center]
@@ -24,7 +24,7 @@
 (defn universal-link
  [community-id]
  (str (:external universal-links/domains)
-       "/c/"
+       "/c#"
       community-id))

 (defn <-request-to-join-community-rpc
@@ -94,9 +94,17 @@

 (defn- handle-my-request
  [db {:keys [community-id state deleted] :as request}]
-  (if (and (= constants/community-request-to-join-state-pending state) (not deleted))
-    (assoc-in db [:communities/my-pending-requests-to-join community-id] request)
-    (update-in db [:communities/my-pending-requests-to-join] dissoc community-id)))
+  (let [{:keys [name]} (get-in db [:communities community-id])]
+    (cond (and (= constants/community-request-to-join-state-pending state) (not deleted))
+          (assoc-in db [:communities/my-pending-requests-to-join community-id] request)
+          (and (= constants/community-request-to-join-state-accepted state) (not deleted))
+          (do (re-frame/dispatch [:toasts/upsert
+                                  {:icon       :i/correct
+                                   :id         :joined-community
+                                   :icon-color (:positive-01 @colors/theme)
+                                   :text       (i18n/label :t/joined-community {:community name})}])
+              (update-in db [:communities/my-pending-requests-to-join] dissoc community-id))
+          :else (update-in db [:communities/my-pending-requests-to-join] dissoc community-id))))

 (defn handle-admin-request
  [db {:keys [id community-id deleted] :as request}]
@@ -220,32 +228,6 @@
                                    (log/error "failed to import community" %)
                                    (re-frame/dispatch [::failed-to-import %]))}]})

-(rf/defn request-to-join
-  {:events [:communities/request-to-join]}
-  [_ community-id]
-  {:json-rpc/call [{:method      "wakuext_requestToJoinCommunity"
-                    :params      [{:communityId community-id}]
-                    :js-response true
-                    :on-success  #(re-frame/dispatch [:communities/requested-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]}
  [_]
@@ -11,9 +11,3 @@
                        :group/selected-contacts #{}
                        :new-chat-name           "")}
            (navigation/navigate-to :contact-toggle-list nil)))
-
-(defn displayed-photo
-  [{:keys [images]}]
-  (or (:large images)
-      (:thumbnail images)
-      (first images)))
@@ -2,21 +2,12 @@
  (:require
    [clojure.set :as set]
    [clojure.string :as string]
-    [status-im.utils.gfycat.core :as gfycat]
    [status-im2.constants :as constants]
    [utils.address :as address]))

-(defn public-key->new-contact
-  [public-key]
-  (let [alias (gfycat/generate-gfy public-key)]
-    {:alias        alias
-     :name         alias
-     :primary-name alias
-     :public-key   public-key}))
-
 (defn public-key-and-ens-name->new-contact
  [public-key ens-name]
-  (let [contact (public-key->new-contact public-key)]
+  (let [contact {:public-key public-key}]
    (if ens-name
      (-> contact
          (assoc :ens-name ens-name)
@@ -27,8 +18,7 @@
 (defn public-key->contact
  [contacts public-key]
  (when public-key
-    (or (get contacts public-key)
-        (public-key->new-contact public-key))))
+    (get contacts public-key {:public-key public-key})))

 (defn- contact-by-address
  [[addr contact] address]
@@ -66,8 +56,13 @@
                          (assoc public-key current-contact))]
    (->> members
         (map #(or (get all-contacts %)
-                   (public-key->new-contact %)))
-         (sort-by (comp string/lower-case #(or (:primary-name %) (:name %) (:alias %))))
+                   {:public-key %}))
+         (sort-by (comp string/lower-case
+                        (fn [{:keys [primary-name name alias public-key]}]
+                          (or primary-name
+                              name
+                              alias
+                              public-key))))
         (map #(if (get admins (:public-key %))
                 (assoc % :admin? true)
                 %)))))
@@ -1,55 +1,49 @@
 (ns status-im.contact.db-test
-  (:require
-    [cljs.test :refer-macros [deftest is testing]]
-    [status-im.contact.db :as contact.db]
-    [status-im.utils.gfycat.core :as gfycat]))
+  (:require [cljs.test :refer-macros [deftest is testing]]
+            [status-im.contact.db :as contact.db]))

 (deftest contacts-subs
  (testing "get-all-contacts-in-group-chat"
-    (with-redefs [gfycat/generate-gfy (constantly "generated")]
-      (let
-        [chat-contact-ids
-         #{"0x04fcf40c526b09ff9fb22f4a5dbd08490ef9b64af700870f8a0ba2133f4251d5607ed83cd9047b8c2796576bc83fa0de23a13a4dced07654b8ff137fe744047917"
-           "0x04985040682b77a32bb4bb58268a0719bd24ca4d07c255153fe1eb2ccd5883669627bd1a092d7cc76e8e4b9104327667b19dcda3ac469f572efabe588c38c1985f"
-           "0x048a2f8b80c60f89a91b4c1316e56f75b087f446e7b8701ceca06a40142d8efe1f5aa36bd0fee9e248060a8d5207b43ae98bef4617c18c71e66f920f324869c09f"}
-         admins
-         #{"0x04fcf40c526b09ff9fb22f4a5dbd08490ef9b64af700870f8a0ba2133f4251d5607ed83cd9047b8c2796576bc83fa0de23a13a4dced07654b8ff137fe744047917"}
+    (let
+      [chat-contact-ids
+       #{"0x04fcf40c526b09ff9fb22f4a5dbd08490ef9b64af700870f8a0ba2133f4251d5607ed83cd9047b8c2796576bc83fa0de23a13a4dced07654b8ff137fe744047917"
+         "0x04985040682b77a32bb4bb58268a0719bd24ca4d07c255153fe1eb2ccd5883669627bd1a092d7cc76e8e4b9104327667b19dcda3ac469f572efabe588c38c1985f"
+         "0x048a2f8b80c60f89a91b4c1316e56f75b087f446e7b8701ceca06a40142d8efe1f5aa36bd0fee9e248060a8d5207b43ae98bef4617c18c71e66f920f324869c09f"}
+       admins
+       #{"0x04fcf40c526b09ff9fb22f4a5dbd08490ef9b64af700870f8a0ba2133f4251d5607ed83cd9047b8c2796576bc83fa0de23a13a4dced07654b8ff137fe744047917"}

-         contacts
-         {"0x04985040682b77a32bb4bb58268a0719bd24ca4d07c255153fe1eb2ccd5883669627bd1a092d7cc76e8e4b9104327667b19dcda3ac469f572efabe588c38c1985f"
-          {:last-updated 0
-           :name "User B"
-           :primary-name "User B"
-           :last-online 0
-           :public-key
-           "0x04985040682b77a32bb4bb58268a0719bd24ca4d07c255153fe1eb2ccd5883669627bd1a092d7cc76e8e4b9104327667b19dcda3ac469f572efabe588c38c1985f"}}
-         current-multiaccount
-         {:last-updated 0
-          :signed-up? true
-          :sharing-usage-data? false
-          :primary-name "User A"
-          :name "User A"
+       contacts
+       {"0x04985040682b77a32bb4bb58268a0719bd24ca4d07c255153fe1eb2ccd5883669627bd1a092d7cc76e8e4b9104327667b19dcda3ac469f572efabe588c38c1985f"
+        {:last-updated 0
+         :name "User B"
+         :primary-name "User B"
+         :last-online 0
+         :public-key
+         "0x04985040682b77a32bb4bb58268a0719bd24ca4d07c255153fe1eb2ccd5883669627bd1a092d7cc76e8e4b9104327667b19dcda3ac469f572efabe588c38c1985f"}}
+       current-multiaccount
+       {:last-updated 0
+        :signed-up? true
+        :sharing-usage-data? false
+        :primary-name "User A"
+        :name "User A"
+        :public-key
+        "0x048a2f8b80c60f89a91b4c1316e56f75b087f446e7b8701ceca06a40142d8efe1f5aa36bd0fee9e248060a8d5207b43ae98bef4617c18c71e66f920f324869c09f"}]
+      (is
+       (=
+        (contact.db/get-all-contacts-in-group-chat chat-contact-ids
+                                                   admins
+                                                   contacts
+                                                   current-multiaccount)
+        [{:admin? true
          :public-key
-          "0x048a2f8b80c60f89a91b4c1316e56f75b087f446e7b8701ceca06a40142d8efe1f5aa36bd0fee9e248060a8d5207b43ae98bef4617c18c71e66f920f324869c09f"}]
-        (is
-         (=
-          (contact.db/get-all-contacts-in-group-chat chat-contact-ids
-                                                     admins
-                                                     contacts
-                                                     current-multiaccount)
-          [{:name "generated"
-            :primary-name "generated"
-            :alias "generated"
-            :admin? true
-            :public-key
-            "0x04fcf40c526b09ff9fb22f4a5dbd08490ef9b64af700870f8a0ba2133f4251d5607ed83cd9047b8c2796576bc83fa0de23a13a4dced07654b8ff137fe744047917"}
-           {:alias "User A"
-            :primary-name "User A"
-            :public-key
-            "0x048a2f8b80c60f89a91b4c1316e56f75b087f446e7b8701ceca06a40142d8efe1f5aa36bd0fee9e248060a8d5207b43ae98bef4617c18c71e66f920f324869c09f"}
-           {:last-updated 0
-            :name "User B"
-            :primary-name "User B"
-            :last-online 0
-            :public-key
-            "0x04985040682b77a32bb4bb58268a0719bd24ca4d07c255153fe1eb2ccd5883669627bd1a092d7cc76e8e4b9104327667b19dcda3ac469f572efabe588c38c1985f"}]))))))
+          "0x04fcf40c526b09ff9fb22f4a5dbd08490ef9b64af700870f8a0ba2133f4251d5607ed83cd9047b8c2796576bc83fa0de23a13a4dced07654b8ff137fe744047917"}
+         {:alias "User A"
+          :primary-name "User A"
+          :public-key
+          "0x048a2f8b80c60f89a91b4c1316e56f75b087f446e7b8701ceca06a40142d8efe1f5aa36bd0fee9e248060a8d5207b43ae98bef4617c18c71e66f920f324869c09f"}
+         {:last-updated 0
+          :name "User B"
+          :primary-name "User B"
+          :last-online 0
+          :public-key
+          "0x04985040682b77a32bb4bb58268a0719bd24ca4d07c255153fe1eb2ccd5883669627bd1a092d7cc76e8e4b9104327667b19dcda3ac469f572efabe588c38c1985f"}])))))
@@ -0,0 +1,9 @@
+(ns status-im.data-store.communities
+  (:require [clojure.set :as set]))
+
+(defn rpc->channel-permissions
+  [rpc-channels-permissions]
+  (update-vals rpc-channels-permissions
+               (fn [{:keys [viewAndPostPermissions viewOnlyPermissions]}]
+                 {:view-only     (set/rename-keys viewOnlyPermissions {:satisfied :satisfied?})
+                  :view-and-post (set/rename-keys viewAndPostPermissions {:satisfied :satisfied?})})))
@@ -0,0 +1,23 @@
+(ns status-im.data-store.communities-test
+  (:require
+    [cljs.test :refer [deftest is]]
+    [status-im.data-store.communities :as sut]))
+
+(def permissions
+  {"community-id-chat-1"
+   {:viewOnlyPermissions    {:satisfied   false
+                             :permissions {:token-permission-id-01 {:criteria [false]}}}
+    :viewAndPostPermissions {:satisfied true :permissions {}}}
+   "community-id-chat-2"
+   {:viewOnlyPermissions    {:satisfied true :permissions {}}
+    :viewAndPostPermissions {:satisfied true :permissions {}}}})
+
+(deftest rpc->channel-permissions-test
+  (is (= {"community-id-chat-1"
+          {:view-only     {:satisfied?  false
+                           :permissions {:token-permission-id-01 {:criteria [false]}}}
+           :view-and-post {:satisfied? true :permissions {}}}
+          "community-id-chat-2"
+          {:view-only     {:satisfied? true :permissions {}}
+           :view-and-post {:satisfied? true :permissions {}}}}
+         (sut/rpc->channel-permissions permissions))))
@@ -6,7 +6,6 @@
    [re-frame.core :as re-frame]
    [status-im.bottom-sheet.events :as bottom-sheet]
    [status-im.ethereum.ens :as ens]
-    [status-im.ethereum.stateofus :as stateofus]
    [status-im.multiaccounts.update.core :as multiaccounts.update]
    [status-im.utils.random :as random]
    [status-im.wallet.utils :as wallet.utils]
@@ -14,6 +13,8 @@
    [status-im2.navigation.events :as navigation]
    [taoensso.timbre :as log]
    [utils.datetime :as datetime]
+    [utils.ens.core :as utils.ens]
+    [utils.ens.stateofus :as stateofus]
    [utils.ethereum.chain :as chain]
    [utils.ethereum.eip.eip55 :as eip55]
    [utils.re-frame :as rf]))
@@ -158,7 +159,7 @@
    (cond

      ;; No address for a stateofus subdomain: it can be registered
-      (and (= response ens/default-address) (not custom-domain?))
+      (and (= response utils.ens/default-address) (not custom-domain?))
      (re-frame/dispatch [::name-resolved username :available])

      ;; if we get an address back, we try to get the public key associated
@@ -205,7 +206,7 @@

 (defn- valid-custom-domain?
  [username]
-  (and (ens/is-valid-eth-name? username)
+  (and (utils.ens/is-valid-eth-name? username)
       (stateofus/lower-case? username)))

 (defn- valid-username?
@@ -1,35 +1,12 @@
 (ns status-im.ethereum.ens
  (:require
-    [clojure.string :as string]
    [native-module.core :as native-module]
-    [status-im2.common.json-rpc.events :as json-rpc]))
-
-;; this is the addresses of ens registries for the different networks
-(def ens-registries
-  {:mainnet "0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e"
-   :goerli  "0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e"})
-
-(def default-address "0x0000000000000000000000000000000000000000")
-(def default-key
-  "0x0400000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000")
-(def default-hash "0x0000000000000000000000000000000000000000000000000000000000000000")
-
-(defn valid-eth-name-prefix?
-  [prefix]
-  (not
-   (or (string/blank? prefix)
-       (string/ends-with? prefix ".")
-       (string/includes? prefix ".."))))
-
-(defn is-valid-eth-name?
-  [ens-name]
-  (and ens-name
-       (string? ens-name)
-       (string/ends-with? ens-name ".eth")))
+    [status-im2.common.json-rpc.events :as json-rpc]
+    [utils.ens.core :as utils.ens]))

 (defn address
  [chain-id ens-name cb]
-  {:pre [(is-valid-eth-name? ens-name)]}
+  {:pre [(utils.ens/is-valid-eth-name? ens-name)]}
  (json-rpc/call {:method     "ens_addressOf"
                  :params     [chain-id ens-name]
                  :on-success cb
@@ -37,7 +14,7 @@

 (defn pubkey
  ([chain-id ens-name on-success on-error]
-   {:pre [(is-valid-eth-name? ens-name)]}
+   {:pre [(utils.ens/is-valid-eth-name? ens-name)]}
   (json-rpc/call {:method     "ens_publicKeyOf"
                   :params     [chain-id ens-name]
                   :on-success on-success
@@ -74,9 +74,12 @@
            "blockNumber" blockNumber
            "accounts"    accounts)
  (case type
-    "new-transfers"              (new-transfers cofx blockNumber accounts)
-    "recent-history-fetching"    (recent-history-fetching-started cofx accounts)
-    "recent-history-ready"       (recent-history-fetching-ended cofx event)
-    "fetching-history-error"     (fetching-error cofx event)
-    "non-archival-node-detected" (non-archival-node-detected cofx event)
+    "new-transfers"                            (new-transfers cofx blockNumber accounts)
+    "recent-history-fetching"                  (recent-history-fetching-started cofx accounts)
+    "recent-history-ready"                     (recent-history-fetching-ended cofx event)
+    "fetching-history-error"                   (fetching-error cofx event)
+    "non-archival-node-detected"               (non-archival-node-detected cofx event)
+    "wallet-owned-collectibles-filtering-done" {:fx [[:dispatch
+                                                      [:wallet/owned-collectibles-filtering-done
+                                                       event]]]}
    (log/warn ::unknown-wallet-event :type type :event event)))
@@ -41,7 +41,6 @@
    status-im.ui.screens.privacy-and-security-settings.events
    [status-im.utils.dimensions :as dimensions]
    status-im.utils.logging.core
-    [status-im.utils.universal-links.core :as universal-links]
    [status-im.utils.utils :as utils]
    status-im.visibility-status-popover.core
    status-im.visibility-status-updates.core
@@ -53,6 +52,7 @@
    status-im.wallet.custom-tokens.core
    [status-im2.common.biometric.events :as biometric]
    [status-im2.common.theme.core :as theme]
+    [status-im2.common.universal-links :as universal-links]
    [status-im2.constants :as constants]
    status-im2.contexts.chat.home.events
    status-im2.contexts.communities.home.events
@@ -118,7 +118,7 @@
  (let [current-theme-type (get-in cofx [:db :profile/profile :appearance])]
    (when (and (multiaccounts.model/logged-in? db)
               (= current-theme-type status-im2.constants/theme-type-system))
-      {:multiaccounts.ui/switch-theme-fx
+      {:profile.settings/switch-theme-fx
       [(get-in db [:profile/profile :appearance])
        (:view-id db) true]})))

@@ -158,7 +158,9 @@

 (rf/defn on-going-in-background
  [{:keys [db now]}]
-  {:db (assoc db :app-in-background-since now)})
+  {:db (-> db
+           (assoc :app-in-background-since now)
+           (dissoc :universal-links/handling))})
   ;; event not implemented
   ;; :dispatch-n [[:audio-recorder/on-background] [:audio-message/on-background]]

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Ibrahem Khalil	ae03891d2f	Merge branch 'develop' into 17827	2023-11-13 16:58:28 +02:00
andrey	c150070cfe	remove empty files	2023-11-13 14:50:45 +01:00
Ibrahem Khalilandbalogunofafrica	1b745857e8	[17634] Start rendering syncing UI ASAP (#17755 ) * Start rendering syncing UI ASAP * Consolidating values * fix: show syncing ui immediately * fix: error validation --------- Co-authored-by: balogunofafrica <balogunakanbi.k@gmail.com>	2023-11-13 12:15:53 +01:00
Omar Basem	87c9946092	Wallet: Keypair Screen (#17775 ) * wallet: keypair screen	2023-11-13 14:43:43 +04:00
Omar Basem	f3e47ac1a2	Wallet: watch address - select random color (#17859 ) Wallet: randomize color picker	2023-11-13 14:25:44 +04:00
Yevheniia Berdnyk	83a7402210	e2e: fix for terminated session	2023-11-13 02:27:36 +02:00
Ibrkhalil	01efd56d6f	Fix text content when editing and reentering chat	2023-11-11 10:53:03 +02:00
Siddarth Kumar	3c297bf5b4	chore: ignore auto generated lint-fix files (#17783 ) We get these 2 files auto generated locally as part of make lint-fix `.clj-kondo/taoensso/encore/config.edn` `.clj-kondo/taoensso/encore/taoensso/encore.clj` We don't need them checked in its fine if they're ignored. This commit adds these folders to `.gitIgnore` - `.clj-kondo/taoensso/` - `.clj-kondo/babashka/`	2023-11-10 18:12:03 +05:30
yqrashawn	b4919261cb	fix: nav conflicts when return from bg from link (#17853 )	2023-11-10 09:15:02 +08:00
Icaro Motta	ffeb06f36c	Communities - Token gated community fixes (#17799 ) - Fix: when there are only channel token permissions, don't show the text "You hold 0 of these:" because there are no requirements to show. - Fix: do not show channel token permissions when the user wants to join a community. In other words: only "become admin", "become member", "become token master", and "become token owner" are taken in consideration. - Fix: render correct channel lock icon in 3 states (no permission, with permissions and locked and with permissions and unlocked). - Fix: Previously, before having joined a community, all channels had a lock icon closed, now the lock icon is only closed when there's a permission set, otherwise no icon is shown (the lock is never open before the user joins the community). - Fix: small UI spacing fix, only display community tags component when there's at least one tag. - Bonus fix: community Overview and Discover screens top bar had a regression, see the screenshots. Fixes https://github.com/status-im/status-mobile/issues/17267 ### Areas that may be impacted - Community overview, before and after joining a community. ### Steps to test Code tested using the Goerli network and with the testnet flag enabled in the Desktop client. Out of scope: minted tokens.	2023-11-09 20:19:26 -03:00
flexsurfer	69f87ce8b0	[#17611 ] move status-im.utils.universal-links.core (#17855 )	2023-11-09 21:22:15 +01:00
Andrea Maria Piana	27e27aa113	Add contribution status-go doc	2023-11-09 15:34:20 +00:00
Ajay Sivan	e48a5c4e83	Quo community-stat component (#17851 )	2023-11-09 04:39:42 -08:00
Mohamed Javid	595b1cfc40	[Fix] Move category selector height to emoji picker (#17844 ) This commit moves the emoji categories selector height from the "showcase-nav" component to the "emoji-picker" as we should not use any "quo" ns (except "quo.core") inside the "status-im2" ns. Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>	2023-11-08 23:56:56 +05:30
Volodymyr Kozieiev	e573fc914a	Respect status-go API changes for collectibles request (#17857 )	2023-11-08 18:01:33 +00:00
Yevheniia Berdnyk	4eda8bb6b3	e2e: temp fix for opening a link in Status	2023-11-08 18:47:56 +02:00
Volodymyr Kozieiev	bd6a9e577c	Updated to status-go with fixed timeouts (#17831 )	2023-11-08 15:08:52 +00:00
Mohamed Javid	6bb1779723	Implement edit account and refactor wallet accounts events & subs (#17798 ) This commit updates the following: - Allow users to create new wallet accounts without having to re-login (latest account data is fetched immediately) - Updates the max length of the wallet account name to 20 - Updates the account cards in the wallet home screen to render the actual account colour - Updates the (individual) account screen to show the correct color, emoji, name and address - Allows users to edit account name, colour and emoji - The rest of the wallet screens would see the updated account information immediately - Fixes the color (uses profile color) of the context tag and button color in the authentication (enter password) bottom sheet - Fixes the overflowing of the "+" card in the wallet home when there are two or more accounts. Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>	2023-11-08 20:09:32 +05:30
codemaster	742c451000	fix: message content text alignment and spacing (#17606 )	2023-11-08 05:40:26 -08:00
Alex Tumanov	569036c1d8	Add a button to address watch screen; (#17781 ) Add account creation screen remove icons remove extra utility and create a new one that would use conventional way of getting an emoji fix lint Use button component instead of bottom-actions Provide global customization color to buttons Use conventional approach to extract account name Move to another address Move to another namespace Refactor bottom-actions to have button props in maps Update doc with new icon location Add spaces between styles Work on pr comments Use :on-change-text instead of :on-change for input component Subscribe to :profile/customization-color directly Use bottom button from the create-or-edit-account wrapper Remove extra code Sort requires Move ns to proper fileˆ Fix styles	2023-11-07 16:40:24 +00:00
Brian Sztamfater	188f7f461e	feat: address (mocked) suggestions (#17579 ) Signed-off-by: Brian Sztamfater <brian@status.im>	2023-11-07 12:04:37 -03:00
Yevheniia Berdnyk	422004f146	e2e: fix for creating a new user	2023-11-07 14:43:30 +02:00
David Martin	cb005afff2	Split up integration tests (#17762 )	2023-11-07 16:47:02 +05:30
Dmitri Akatov	a5bb95cd18	add translation linting to the "make lint" pipeline. (#17820 )	2023-11-07 11:33:59 +01:00
frank	20ac5cfa41	use timesource(synced) to generate/validate server cert time (#17771 )	2023-11-07 16:36:27 +08:00
Dmitri Akatov	1755780950	make clj-kondo hook's name match the fully qualified name of the symbol it's linting (#17817 )	2023-11-07 07:10:36 +01:00
Omar Basem	a6d7502455	Wallet: bridge screen (#17758 ) * wallet: bridge screen	2023-11-07 07:22:38 +04:00
yqrashawn	701df811b0	feat: lint direct require quo component outside src/quo (#17828 )	2023-11-07 10:21:58 +08:00
Dmitri Akatov	b47c97a4fd	Mark utils.re-frame/defn as deprecated (#17788 ) Also suggest to use utils.re-frame/reg-event-fx instead of utils.re-frame/defn	2023-11-06 19:09:40 -03:00
Siddarth Kumar	4ac7f0bdda	update docs & makefile for iPhone 13 (#17784 ) The design team has now decided to keep iPhone 13 as the baseline standard instead of iPhone 11 Pro. This commit updates the docs on pixel perfection and starting guide. We also update the default simulator to iPhone 13 for `make run-ios`	2023-11-06 23:55:06 +05:30
Volodymyr Kozieiev	4490676398	Collectibles list on accounts page connected to backend (#17751 ) * Collectibles list displayed	2023-11-06 16:39:49 +00:00
Ibrahem Khalil	ee019f79f2	Show success toast when user joins community. (#17815 )	2023-11-06 16:22:15 +02:00
Alexander	dc571b6067	Getting rid of status-im.multiaccounts.core + removing three word random names (#17384 )	2023-11-06 14:38:14 +01:00
Dmitri Akatov	fb8a7d2d8e	proper use of ens-username-owned-continue translation key (#17819 )	2023-11-06 09:00:00 +01:00
Dmitri Akatov	ac8458d304	remove outdated i18n-test namespace (#17816 )	2023-11-06 08:59:34 +01:00
Dmitri Akatov	c13b86b882	add Goerli network English translation (#17818 )	2023-11-06 07:34:41 +01:00
Siddarth Kumar	609eb04cff	stop package bot from complaining (#17810 ) fix for warning : Address should end with .git for consistency.	2023-11-04 11:58:19 +05:30
Yevheniia Berdnyk	f1de077d9d	e2e: making 2 tests independent	2023-11-03 18:02:16 +02:00
Ajay Sivan	aa6d44bee1	Adapt to status-go API Changes for Request to Join Community Flow (#17800 )	2023-11-03 08:57:56 -07:00
jakub	2a4bb84e35	fix script path for resolving ANDROID_ABI_INCLUDE Signed-off-by: Jakub Sokołowski <jakub@status.im>	2023-11-03 15:10:08 +01:00
Ibrahem Khalil	132e53844c	New TopBar animation (#17582 )	2023-11-03 14:20:10 +02:00
Mohsen	8d3558f1c3	[#17647 ] fix: generate keys title overlap (#17752 )	2023-11-03 14:35:42 +03:00
Alex Tumanov	0eef5204c8	Implement wallet user avatar to match designs (#17703 )	2023-11-02 20:29:09 +01:00
Mohamed Javid	9a5ed62e1f	[Refactor] selectors component (#17763 ) This commit updates the following in the selectors component: - Introduces the "type" prop (Figma 1-1 property) to the selectors component for easy switching between the selector types while using it on lists. - Updates the component styles to use the "resolve-color" function as the "custom-color" function is deprecated - Updates the component usage across the codebase Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>	2023-11-02 23:54:59 +05:30
flexsurfer	e6068fd4c1	small ns changes (#17793 )	2023-11-02 14:23:34 +01:00
Yevheniia Berdnyk	579b382c44	e2e: fix for edit message with a mention	2023-11-02 12:38:26 +02:00
yqrashawnandpavloburykh	859cb19886	fix(universal-link): more new link format, handle old link format (#17721 ) Co-authored-by: pavloburykh <pavlo@status.im>	2023-11-02 15:31:49 +08:00
Omar Basem	2d92b515b8	Documentation: composer (#17756 ) * Docs: composer	2023-11-02 08:53:22 +04:00
Icaro Motta	972e1eee01	Composer - Fix conflicting touchable and gesture (#17680 ) Fix the unreliable swipe behavior of link previews in the chat composer. In many occasions, we noticed the horizontal scroll wasn't being triggered properly or not at all. In other occasions, the swipe gesture would incorrectly register a press on the parent `Touchable` component. Fixes https://github.com/status-im/status-mobile/issues/16599	2023-11-01 13:31:14 -03:00
Ibrahem Khalil	6c2b437e62	Follow up to fix color picker on wallet (#17748 )	2023-11-01 15:18:53 +02:00
Nikolay	94a3e266a9	Edit derivation path (#17741 )	2023-11-01 14:04:21 +01:00
Lungu Cristian	716007dc3c	fix: removed bounce from lightbox text-sheet (#17664 ) fix: improving UI and gestures fix: expanding on press now works reliably fix: center text and disable gestures for short messages feat: added styling for one-lined messages fix: small opacity fix ref: small condition change fix: horizontal swiping being unreliable with vertical scrolling ref: reusing shared value from lightbox animations fix: text-sheet bottom gradient not visible on android fix: addressed qa issues 1,2,4 fix: zoomable-image stuck if moved vertically when full screen clean: removed unused var chore: removed unused require fix: don't allow returning text-sheet down and up in one move fix: text-sheet bar styling was wrong fix: adjusted gradient animation with designs fix: text-sheet bar opacity	2023-11-01 13:20:10 +02:00
Mohsen	233d1b3261	[#17288 ] refactor: migrate previews to new api (#17776 )	2023-11-01 11:31:32 +03:00
Yevheniia Berdnyk	25381b601f	e2e: test for sending image with camera	2023-10-31 23:23:04 +02:00
Ulises Manuel	4a874ce48d	[#17023 ] Share qr code variants (#17736 ) * Align docstring * Create share-qr-code component * Remove empty style file * Implement common.share-qr-code including call to media server * Add share-qr-code preview screen * Use share-qr-code component in shell's share screen * Add tests and some fixes	2023-10-31 12:35:28 -06:00
mmilad75	ca822ff51d	Connect Wallet Home Page to backend - Accounts card (#17447 ) * add functionality * fix lint issues * change class component to functional component * fix refactor-data function * rename events and fix reagent-render structure * change rf/defn to re-frame/reg-event-fx * convert camelCase to kebab-case * refactor on-error callback * refactor on-success callback * replace merge with assoc and conj * refactor calculate-balance structure * rename reagent-render * move calculate-balance into a sub * use created sub in the view * fix lint issues * move calculate-balance function to wallet sub * change on-success callback * revert podfile.lock * remove extra line * add template for test * edit calculate-balance and calculate-raw-balance * add tests * revert podfile.lock and fix lint issues * rename refactor-data * add toFixed to get-balance * fix lint issues * finalize code * replace re-frame/reg-event-fx with rf/defn * resolve comments * remove use-fixtures in the test * break down calculate-balance * fix lint issues * fix placeholder color * move accounts to view-internal * remove accounts param in wallet-2/get-wallet-token * Connect Wallet Account Page to backend (basic) (#17700) * pass address to wallet-accounts screen * move get-balance-by-address to common/utils * add functionality * fix lint issues * move logic to sub * convert filter+first to some * change code structure * rename wallet-2 to wallet * add tests * fix lint issues * fix style * remove unused code * remove view-internal defn * fix lint issues * fix networks param issue * fix .toFixed issue	2023-10-31 21:48:21 +03:30
Yevheniia Berdnyk	88b3d7d2e6	e2e: fix for app closed after closing gallery	2023-10-31 12:04:46 +02:00
Yevheniia Berdnyk	90d3a5a39d	e2e: test fixes	2023-10-31 02:21:52 +02:00
Mohamed Javid	dd8beeb848	[Fix] "network-routing" component test (#17760 ) This commit moves the "network-routing" component test to the quo ns from quo2 ns. Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>	2023-10-30 20:51:31 +05:30
Ajay Sivan	abbf29d4ca	Remove all status-im.ui.components.react usages in status-im2 (#17750 )	2023-10-30 06:37:28 -07:00
Parvesh Monu	cebec10aa5	fix bottom message in the chat history is hidden behind the composer with an image in it (#17757 )	2023-10-30 15:46:16 +05:30
Smoothieewastaken	55b233c528	docs: Fixed typos (#17749 )	2023-10-30 08:06:52 +01:00
Omar Basem	68ad4fe086	Wallet: Address Text (#17732 ) * Wallet: address text	2023-10-30 09:40:39 +04:00