test: ios Associated Domains Entitlement WIP

* Fix for "Jump to" button overlapping Logout button on the Profile screen

* Fix for offsets

* Code style

* Fixes

.env

@@ -34,4 +34,3 @@ STICKERS_TEST_ENABLED=1
 LOCAL_PAIRING_ENABLED=1
 TEST_STATEOFUS=1
 FAST_CREATE_COMMUNITY_ENABLED=1
-FLAG_NEW_CONTACT_UI_ENABLED=0

.zprintrc

@@ -22,37 +22,37 @@
   :multi-lhs-hang]
 
  :fn-map
- {"reg-sub"            :arg1-pair
-  "h/describe"         :arg1-body
-  "h/describe-skip"    :arg1-body
-  "h/describe-only"    :arg1-body
-  "h/test"             :arg1-body
-  "h/test-skip"        :arg1-body
-  "h/test-only"        :arg1-body
-  "test/async"         :arg1-body
-  "test/use-fixtures"  :arg1-body
-  "global.describe"    :arg1-body
-  "global.test"        :arg1-body
-  "list-comp"          :binding
-  "defview"            :arg1-body
-  "letsubs"            :binding
-  "with-let"           "let"
-  "reg-event-fx"       :arg1-pair
-  "reg-fx"             :arg1-pair
-  "testing"            :arg1-body
-  "deftest-sub"        :arg1-body
-  "h/integration-test" :arg1-body
-  "wait-for"           :arg1-body
-  "with-deps-check"    :arg1-body
-  "schema/=>"          :arg1-body
-  "->"                 [:noarg1-body
-                        {:list               {:constant-pair? false :force-nl? false}
-                         :next-inner-restore [[:list :constant-pair?]]}]
-  "set!"               "reset!"
-  "assoc-when"         "assoc"
-  "assoc-some"         "assoc"
-  "conj-when"          "conj"
-  "conj-some"          "conj"}
+ {"reg-sub"           :arg1-pair
+  "h/describe"        :arg1-body
+  "h/describe-skip"   :arg1-body
+  "h/describe-only"   :arg1-body
+  "h/test"            :arg1-body
+  "h/test-skip"       :arg1-body
+  "h/test-only"       :arg1-body
+  "test/async"        :arg1-body
+  "test/use-fixtures" :arg1-body
+  "global.describe"   :arg1-body
+  "global.test"       :arg1-body
+  "list-comp"         :binding
+  "defview"           :arg1-body
+  "letsubs"           :binding
+  "with-let"          "let"
+  "reg-event-fx"      :arg1-pair
+  "reg-fx"            :arg1-pair
+  "testing"           :arg1-body
+  "deftest-sub"       :arg1-body
+  "test-async"        :arg1-body
+  "wait-for"          :arg1-body
+  "with-deps-check"   :arg1-body
+  "schema/=>"         :arg1-body
+  "->"                [:noarg1-body
+                       {:list               {:constant-pair? false :force-nl? false}
+                        :next-inner-restore [[:list :constant-pair?]]}]
+  "set!"              "reset!"
+  "assoc-when"        "assoc"
+  "assoc-some"        "assoc"
+  "conj-when"         "conj"
+  "conj-some"         "conj"}
 
  :style-map
  {:no-comma {:map {:comma? false}}

Makefile

@@ -331,13 +331,14 @@ shadow-server:##@ Start shadow-cljs in server mode for watching
 
 _test-clojure: export TARGET := clojure
 _test-clojure: export WATCH ?= false
+_test-clojure: status-go-library
 _test-clojure:
 ifeq ($(WATCH), true)
-	yarn install && \
+	yarn node-pre-gyp rebuild && \
 	yarn shadow-cljs compile mocks && \
 	nodemon --exec "yarn shadow-cljs compile test && node --require ./test-resources/override.js $$SHADOW_OUTPUT_TO" -e cljs
 else
-	yarn install && \
+	yarn node-pre-gyp rebuild && \
 	yarn shadow-cljs compile mocks && \
 	yarn shadow-cljs compile test && \
 	node --require ./test-resources/override.js "$$SHADOW_OUTPUT_TO"
@@ -350,8 +351,9 @@ test: _test-clojure
 
 test-watch-for-repl: export SHADOW_OUTPUT_TO := target/test/test.js
 test-watch-for-repl: export SHADOW_NS_REGEXP := .*-test$$
+test-watch-for-repl: status-go-library
 test-watch-for-repl: ##@test Watch all Clojure tests and support REPL connections
-	yarn install
+	yarn node-pre-gyp rebuild
 	rm -f target/test/test.js
 	yarn shadow-cljs compile mocks && \
 	concurrently --kill-others --prefix-colors 'auto' --names 'build,repl' \

VERSION

@@ -1 +1 @@
-1.25.0
+2.27.0

ci/Jenkinsfile.e2e-nightly

@@ -5,8 +5,8 @@ pipeline {
   agent { label 'linux' }
 
   triggers {
-    // Nightly at 2am
-    cron 'H 2 * * *'
+    // Nightly at 0am
+    cron 'H 0 * * *'
   }
 
   parameters {

ios/StatusImPR/StatusImPR.entitlements

@@ -1,21 +1,21 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
-<dict>
-	<key>com.apple.developer.nfc.readersession.formats</key>
-	<array>
-		<string>NDEF</string>
-		<string>TAG</string>
-	</array>
-	<key>aps-environment</key>
-	<string>development</string>
-	<key>com.apple.developer.associated-domains</key>
-	<array>
-		<string>applinks:status.app</string>
-	</array>
-	<key>keychain-access-groups</key>
-	<array>
-		<string>$(AppIdentifierPrefix)im.status.ethereum.pr</string>
-	</array>
-</dict>
+  <dict>
+    <key>com.apple.developer.nfc.readersession.formats</key>
+    <array>
+      <string>NDEF</string>
+      <string>TAG</string>
+    </array>
+    <key>aps-environment</key>
+    <string>development</string>
+    <key>com.apple.developer.associated-domains</key>
+    <array>
+      <string>applinks:yqrashawn.com?mode=developer</string>
+    </array>
+    <key>keychain-access-groups</key>
+    <array>
+      <string>$(AppIdentifierPrefix)im.status.ethereum.pr</string>
+    </array>
+  </dict>
 </plist>

modules/react-native-status/nodejs/status.cpp

@@ -1888,6 +1888,36 @@ void _InitLogging(const FunctionCallbackInfo<Value>& args) {
     delete c;
 }
 
+void _RestoreAccountAndLogin(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 RestoreAccountAndLogin")));
+		return;
+	}
+
+	// Check the argument types
+
+	if (!args[0]->IsString()) {
+		isolate->ThrowException(Exception::TypeError(
+			String::NewFromUtf8Literal(isolate, "Wrong argument type for 'RestoreAccountAndLogin'")));
+		return;
+	}
+
+	String::Utf8Value arg0Obj(isolate, args[0]->ToString(context).ToLocalChecked());
+	char *arg0 = *arg0Obj;
+
+	// Call exported Go function, which returns a C string
+	char *c = RestoreAccountAndLogin(arg0);
+
+	Local<String> ret = String::NewFromUtf8(isolate, c).ToLocalChecked();
+	args.GetReturnValue().Set(ret);
+	delete c;
+}
+
 
 void init(Local<Object> exports) {
 	NODE_SET_METHOD(exports, "multiAccountGenerateAndDeriveAddresses", _MultiAccountGenerateAndDeriveAddresses);
@@ -1945,6 +1975,7 @@ void init(Local<Object> exports) {
 	NODE_SET_METHOD(exports, "connectionChange", _ConnectionChange);
 	NODE_SET_METHOD(exports, "pollSignal", _PollSignal);
 	NODE_SET_METHOD(exports, "initLogging", _InitLogging);
+	NODE_SET_METHOD(exports, "restoreAccountAndLogin", _RestoreAccountAndLogin);
 }
 
 NODE_MODULE(NODE_GYP_MODULE_NAME, init)

nix/scripts/node_modules.sh

@@ -53,6 +53,14 @@ copyNodeModules() {
 
 # Find files that were modified and should cause a re-copying of node modules.
 # Some files are generated/modified by build processes and should be ignored.
+#
+# react-native/ReactCommon/react/renderer/components/rncore/*
+# generated at runtime by react-native
+# related code https://github.com/facebook/react-native/blob/v0.72.5/packages/react-native/ReactCommon/React-rncore.podspec#L19
+#
+# react-native-config/ios/ReactNativeConfig/GeneratedDotEnv.m
+# generated at runtime by react-native-config
+# related code https://github.com/lugg/react-native-config/blob/v1.5.0/react-native-config.podspec#L52
 findFilesNewerThan() {
   local sentinel="${1}"
   local dir="${2}"
@@ -61,6 +69,8 @@ findFilesNewerThan() {
       -not -ipath "*/*android/build/*" -prune \
       -not -ipath "*/xcuserdata/*" -prune \
       -not -ipath "*/scripts/.packager.env" \
+      -not -path "*/node_modules/react-native/ReactCommon/react/renderer/components/rncore/*" \
+      -not -path "*/node_modules/react-native-config/ios/ReactNativeConfig/GeneratedDotEnv.m" \
       -print
 }
 

src/js/worklets/chat/messenger/messages.js

@@ -1,4 +1,5 @@
-import { withTiming, runOnJS } from 'react-native-reanimated';
+import { useAnimatedReaction, withTiming, runOnJS } from 'react-native-reanimated';
+import { useState } from 'react';
 
 export function messagesListOnScroll(distanceFromListTop, chatListScrollY, callback) {
   return function (event) {
@@ -12,3 +13,21 @@ export function messagesListOnScroll(distanceFromListTop, chatListScrollY, callb
     runOnJS(callback)(layoutHeight, newDistance);
   };
 }
+
+export function useMessagesScrolledToThreshold(distanceFromListTop, threshold) {
+  const [scrolledToThreshold, setScrolledToThreshold] = useState(false);
+
+  useAnimatedReaction(
+    function () {
+      return distanceFromListTop.value <= threshold;
+    },
+    function (current) {
+      if (current !== scrolledToThreshold) {
+        runOnJS(setScrolledToThreshold)(current);
+      }
+    },
+    [scrolledToThreshold],
+  );
+
+  return scrolledToThreshold;
+}

src/js/worklets/chat/messenger/navigation.js

@@ -19,6 +19,13 @@ export function navigationHeaderPosition(distanceFromListTop, isAllLoaded, topBa
   });
 }
 
+export function navigationButtonsCompleteOpacity(isCalculationComplete) {
+  return useDerivedValue(function () {
+    'worklet';
+    return isCalculationComplete.value ? withTiming(1) : 0;
+  });
+}
+
 export function interpolateNavigationViewOpacity(props) {
   return useDerivedValue(function () {
     'worklet';

src/legacy/status_im/browser/core.cljs

@@ -3,7 +3,6 @@
     ["eth-phishing-detect" :as eth-phishing-detect]
     [clojure.string :as string]
     [legacy.status-im.bottom-sheet.events :as bottom-sheet]
-    [legacy.status-im.browser.eip3085 :as eip3085]
     [legacy.status-im.browser.eip3326 :as eip3326]
     [legacy.status-im.browser.permissions :as browser.permissions]
     [legacy.status-im.browser.webview-ref :as webview-ref]
@@ -16,6 +15,7 @@
     [native-module.core :as native-module]
     [re-frame.core :as re-frame]
     [react-native.platform :as platform]
+    [status-im.common.json-rpc.events :as json-rpc]
     [status-im.common.universal-links :as links]
     [status-im.constants :as constants]
     [status-im.contexts.chat.events :as chat.events]
@@ -443,9 +443,6 @@
         (= method "wallet_switchEthereumChain")
         (eip3326/handle-switch-ethereum-chain cofx dapp-name id message-id (first params))
 
-        (= method "wallet_addEthereumChain")
-        (eip3085/handle-add-ethereum-chain cofx dapp-name id message-id (first params))
-
         :else
         {:browser/call-rpc [payload
                             #(re-frame/dispatch [:browser.callback/call-rpc
@@ -658,12 +655,11 @@
                           stored-bookmarks)]
     {:db (assoc db :bookmarks/bookmarks bookmarks)}))
 
-(rf/defn initialize-browser
-  [_]
-  {:json-rpc/call
-   [{:method     "wakuext_getBrowsers"
-     :on-success #(re-frame/dispatch [::initialize-browsers %])}
-    {:method     "browsers_getBookmarks"
-     :on-success #(re-frame/dispatch [::initialize-bookmarks %])}
-    {:method     "permissions_getDappPermissions"
-     :on-success #(re-frame/dispatch [::initialize-dapp-permissions %])}]})
+(re-frame/reg-fx :browser/initialize-browser
+ (fn []
+   (json-rpc/call {:method     "wakuext_getBrowsers"
+                   :on-success [::initialize-browsers]})
+   (json-rpc/call {:method     "browsers_getBookmarks"
+                   :on-success [::initialize-bookmarks]})
+   (json-rpc/call {:method     "permissions_getDappPermissions"
+                   :on-success [::initialize-dapp-permissions]})))

src/legacy/status_im/browser/eip3085.cljs

@@ -2,10 +2,6 @@
 ;(`wallet_addEthereumChain`)
 (ns legacy.status-im.browser.eip3085
   (:require
-    [clojure.string :as string]
-    [legacy.status-im.network.core :as network]
-    [legacy.status-im.ui.screens.browser.eip3085.sheet :as sheet]
-    [legacy.status-im.utils.random :as random]
     [re-frame.core :as re-frame]
     [status-im.constants :as constants]
     [taoensso.timbre :as log]
@@ -40,37 +36,3 @@
                                         :message "User rejected the request."}}
    :dispatch               [:bottom-sheet/hide-old]})
 
-(rf/defn handle-add-ethereum-chain
-  {:events [:eip3085/handle-add-ethereum-chain]}
-  [{{:networks/keys [networks] :as db} :db :as cofx}
-   dapp-name id message-id
-   {:keys [chainId blockExplorerUrls chainName iconUrls nativeCurrency rpcUrls] :as params}]
-  (let [manage {:name       {:value chainName}
-                :symbol     {:value (:symbol nativeCurrency)}
-                :url        {:value (first rpcUrls)}
-                :network-id {:value chainId}
-                :chain      {:value :custom}}]
-    (if (network/valid-manage? manage)
-      (let [{:keys [name url chain network-id symbol]} manage
-            random-id                                  (string/replace (random/id) "-" "")
-            network                                    (network/new-network random-id
-                                                                            (:value name)
-                                                                            (:value symbol)
-                                                                            (:value url)
-                                                                            (:value chain)
-                                                                            (:value network-id))
-            new-networks                               (assoc networks random-id network)
-            params                                     (assoc params
-                                                              :new-networks new-networks
-                                                              :id           id
-                                                              :new-network  network)]
-        (if (network/chain-id-available? networks network)
-          {:dispatch [:bottom-sheet/show-sheet-old
-                      {:content (fn []
-                                  [sheet/permissions-panel dapp-name message-id params])}]}
-          (send-success-call-to-bridge cofx id message-id)))
-      {:browser/send-to-bridge {:type      constants/web3-send-async-callback
-                                :messageId message-id
-                                :error     {:code    -32602
-                                            :message "invalid network parameters"}}})))
-

src/legacy/status_im/chat/models/message.cljs

@@ -4,7 +4,6 @@
     [legacy.status-im.chat.models.loading :as chat.loading]
     [legacy.status-im.data-store.messages :as data-store.messages]
     [legacy.status-im.utils.deprecated-types :as types]
-    [re-frame.core :as re-frame]
     [react-native.platform :as platform]
     [status-im.contexts.chat.messenger.messages.delete-message.events :as delete-message]
     [status-im.contexts.chat.messenger.messages.list.events :as message-list]
@@ -135,9 +134,7 @@
                                     message-id (:messageId removed-message)]
                                 (data-store.messages/mark-messages-seen chat-id
                                                                         [message-id]
-                                                                        #(re-frame/dispatch
-                                                                          [:chat/decrease-unviewed-count
-                                                                           chat-id %3]))))
+                                                                        nil)))
                             removed-messages)
         remove-messages-fx (fn [{:keys [db]}]
                              {:dispatch [:activity-center.notifications/fetch-unread-count]})]

src/legacy/status_im/communities/core.cljs

@@ -4,7 +4,6 @@
     [legacy.status-im.bottom-sheet.events :as bottom-sheet]
     legacy.status-im.communities.e2e
     [re-frame.core :as re-frame]
-    [status-im.contexts.shell.activity-center.events :as activity-center]
     [status-im.navigation.events :as navigation]
     [taoensso.timbre :as log]
     [utils.re-frame :as rf]))
@@ -84,13 +83,12 @@
             (navigation/navigate-back)
             (handle-response response-js)))
 
-(rf/defn member-banned
-  {:events [::member-banned]}
-  [cofx response-js]
-  (rf/merge cofx
-            (bottom-sheet/hide-bottom-sheet-old)
-            (handle-response response-js)
-            (activity-center/notifications-fetch-unread-count)))
+(re-frame/reg-event-fx ::member-banned
+ (fn [{:keys [db]} [response-js]]
+   {:db (assoc db :bottom-sheet/show? false)
+    :fx [[:dismiss-bottom-sheet-overlay-old]
+         [:sanitize-messages-and-process-response response-js]
+         [:activity-center.notifications/fetch-unread-count]]}))
 
 (rf/defn member-ban
   {:events [::member-ban]}

src/legacy/status_im/contact/block.cljs

@@ -6,7 +6,6 @@
     [re-frame.core :as re-frame]
     [status-im.contexts.chat.contacts.events :as contacts-store]
     [status-im.contexts.chat.messenger.messages.list.events :as message-list]
-    [status-im.contexts.shell.activity-center.events :as activity-center]
     [status-im.navigation.events :as navigation]
     [utils.re-frame :as rf]))
 
@@ -45,21 +44,23 @@
     (apply
      rf/merge
      cofx
-     {:db                                                     (->
-                                                                db
-                                                                (update :chats dissoc public-key)
-                                                                (update :chats-home-list disj public-key)
-                                                                (assoc-in [:contacts/contacts public-key
-                                                                           :added?]
-                                                                          false))
-      :dispatch                                               [:shell/close-switcher-card public-key]
-      :effects/push-notifications-clear-message-notifications [public-key]}
-     (activity-center/notifications-fetch-unread-count)
+     {:db (->
+            db
+            (update :chats dissoc public-key)
+            (update :chats-home-list disj public-key)
+            (assoc-in [:contacts/contacts public-key
+                       :added?]
+                      false))
+      :fx [[:activity-center.notifications/fetch-unread-count]
+           [:effects/push-notifications-clear-message-notifications [public-key]]
+           [:dispatch [:shell/close-switcher-card public-key]]]}
      fxs)))
 
 (rf/defn block-contact
   {:events [:contact.ui/block-contact-confirmed]}
-  [{:keys [db] :as cofx} public-key]
+  [{:keys [db] :as cofx} public-key
+   {:keys [handle-navigation?]
+    :or   {handle-navigation? true}}]
   (let [contact               (-> (contact.db/public-key->contact
                                    (:contacts/contacts db)
                                    public-key)
@@ -76,9 +77,10 @@
                  (re-frame/dispatch [:sanitize-messages-and-process-response block-contact])
                  (re-frame/dispatch [:hide-popover])))
               ;; reset navigation to avoid going back to non existing one to one chat
-              (if from-one-to-one-chat?
-                (navigation/pop-to-root :shell-stack)
-                (navigation/navigate-back)))))
+              (when handle-navigation?
+                (if from-one-to-one-chat?
+                  (navigation/pop-to-root :shell-stack)
+                  (navigation/navigate-back))))))
 
 (rf/defn contact-unblocked
   {:events [:contacts/unblocked]}

src/legacy/status_im/contact/db.cljs

@@ -45,12 +45,12 @@
     (query-fn (comp participant-set :public-key) (vals all-contacts))))
 
 (defn get-all-contacts-in-group-chat
-  [members admins contacts {:keys [public-key preferred-name name] :as current-account}]
+  [members admins contacts {:keys [public-key preferred-name name display-name] :as current-account}]
   (let [current-contact (some->
                           current-account
-                          (select-keys [:name :preferred-name :public-key :images])
+                          (select-keys [:name :preferred-name :public-key :images :compressed-key])
                           (set/rename-keys {:name :alias :preferred-name :name})
-                          (assoc :primary-name (or preferred-name name)))
+                          (assoc :primary-name (or display-name preferred-name name)))
         all-contacts    (cond-> contacts
                           current-contact
                           (assoc public-key current-contact))]

src/legacy/status_im/data_store/activities_test.cljs

@@ -29,37 +29,41 @@
 
   (testing "transforms messages from RPC response"
     (is
-     (= {:last-message  {:quoted-message     nil
-                         :outgoing-status    nil
-                         :command-parameters nil
-                         :link-previews      []
-                         :content            {:sticker     nil
-                                              :rtl?        nil
-                                              :ens-name    nil
-                                              :parsed-text nil
-                                              :response-to nil
-                                              :chat-id     nil
-                                              :image       nil
-                                              :line-count  nil
-                                              :links       nil
-                                              :text        nil}
-                         :outgoing           false}
+     (= {:last-message  {:quoted-message       nil
+                         :outgoing-status      nil
+                         :command-parameters   nil
+                         :link-previews        []
+                         :status-link-previews []
+                         :content              {:sticker     nil
+                                                :rtl?        nil
+                                                :ens-name    nil
+                                                :parsed-text nil
+                                                :response-to nil
+                                                :chat-id     nil
+                                                :image       nil
+                                                :line-count  nil
+                                                :links       nil
+                                                :text        nil}
+                         :bridge-message       nil
+                         :outgoing             false}
          :message       nil
-         :reply-message {:quoted-message     nil
-                         :outgoing-status    nil
-                         :command-parameters nil
-                         :link-previews      []
-                         :content            {:sticker     nil
-                                              :rtl?        nil
-                                              :ens-name    nil
-                                              :parsed-text nil
-                                              :response-to nil
-                                              :chat-id     nil
-                                              :image       nil
-                                              :line-count  nil
-                                              :links       nil
-                                              :text        nil}
-                         :outgoing           false}}
+         :reply-message {:quoted-message       nil
+                         :outgoing-status      nil
+                         :command-parameters   nil
+                         :link-previews        []
+                         :status-link-previews []
+                         :content              {:sticker     nil
+                                                :rtl?        nil
+                                                :ens-name    nil
+                                                :parsed-text nil
+                                                :response-to nil
+                                                :chat-id     nil
+                                                :image       nil
+                                                :line-count  nil
+                                                :links       nil
+                                                :text        nil}
+                         :bridge-message       nil
+                         :outgoing             false}}
         (-> raw-notification
             store/<-rpc
             (select-keys [:last-message :message :reply-message])))))

src/legacy/status_im/data_store/chats.cljs

@@ -3,9 +3,10 @@
     [clojure.set :as set]
     [legacy.status-im.data-store.messages :as messages]
     [legacy.status-im.utils.deprecated-types :as types]
+    [re-frame.core :as re-frame]
+    [status-im.common.json-rpc.events :as json-rpc]
     [status-im.constants :as constants]
-    [taoensso.timbre :as log]
-    [utils.re-frame :as rf]))
+    [taoensso.timbre :as log]))
 
 (defn rpc->type
   [{:keys [chat-type name] :as chat}]
@@ -117,10 +118,10 @@
       rpc->type
       unmarshal-members))
 
-(rf/defn fetch-chats-preview
-  [_ {:keys [on-success]}]
-  {:json-rpc/call [{:method      "wakuext_chatsPreview"
-                    :params      []
-                    :js-response true
-                    :on-success  #(on-success ^js %)
-                    :on-error    #(log/error "failed to fetch chats" 0 -1 %)}]})
+(re-frame/reg-fx :fetch-chats-preview
+ (fn [{:keys [on-success]}]
+   (json-rpc/call {:method      "wakuext_chatsPreview"
+                   :params      []
+                   :js-response true
+                   :on-success  #(on-success ^js %)
+                   :on-error    #(log/error "failed to fetch chats" 0 -1 %)})))

src/legacy/status_im/data_store/communities.cljs

@@ -4,13 +4,6 @@
     [clojure.walk :as walk]
     [status-im.constants :as constants]))
 
-(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?})})))
-
 (defn <-revealed-accounts-rpc
   [accounts]
   (mapv
@@ -34,8 +27,10 @@
                (assoc acc
                       (name k)
                       (-> v
-                          (assoc :can-post? (:canPost v))
-                          (dissoc :canPost)
+                          (assoc :token-gated? (:tokenGated v)
+                                 :can-post?    (:canPost v)
+                                 :can-view?    (:canView v))
+                          (dissoc :canPost :tokenGated :canView)
                           (update :members walk/stringify-keys))))
              {}
              chats))

src/legacy/status_im/data_store/communities_test.cljs

@@ -1,23 +0,0 @@
-(ns legacy.status-im.data-store.communities-test
-  (:require
-    [cljs.test :refer [deftest is]]
-    [legacy.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))))

src/legacy/status_im/data_store/messages.cljs

@@ -16,13 +16,41 @@
                       :community-id      :communityId
                       :clock-value       :clock})))
 
+(defn- <-status-link-previews-rpc
+  [preview]
+  (-> preview
+      (update :community
+              set/rename-keys
+              {:communityId        :community-id
+               :displayName        :display-name
+               :membersCount       :members-count
+               :activeMembersCount :active-members-count})
+      (update-in [:community :banner] set/rename-keys {:dataUri :data-uri})
+      (update-in [:community :icon] set/rename-keys {:dataUri :data-uri})))
+
+(defn ->status-link-previews-rpc
+  [preview]
+  (-> preview
+      (update :community
+              set/rename-keys
+              {:community-id         :communityId
+               :display-name         :displayName
+               :members-count        :membersCount
+               :active-members-count :activeMembersCount})
+      (update-in [:community :banner] set/rename-keys {:data-uri :dataUri})
+      (update-in [:community :icon] set/rename-keys {:data-uri :dataUri})))
+
 (defn- <-link-preview-rpc
   [preview]
-  (update preview :thumbnail set/rename-keys {:dataUri :data-uri}))
+  (-> preview
+      (update :thumbnail set/rename-keys {:dataUri :data-uri})
+      (update :favicon set/rename-keys {:dataUri :data-uri})))
 
 (defn ->link-preview-rpc
   [preview]
-  (update preview :thumbnail set/rename-keys {:data-uri :dataUri}))
+  (-> preview
+      (update :thumbnail set/rename-keys {:data-uri :dataUri})
+      (update :favicon set/rename-keys {:data-uri :dataUri})))
 
 (defn <-rpc
   [message]
@@ -53,8 +81,16 @@
         :new                      :new?
         :albumImagesCount         :album-images-count
         :displayName              :display-name
-        :linkPreviews             :link-previews})
+        :linkPreviews             :link-previews
+        :statusLinkPreviews       :status-link-previews
+        :bridgeMessage            :bridge-message})
+      (update :bridge-message
+              set/rename-keys
+              {:bridgeName :bridge-name
+               :userName   :user-name
+               :userAvatar :user-avatar})
       (update :link-previews #(map <-link-preview-rpc %))
+      (update :status-link-previews #(map <-status-link-previews-rpc %))
       (update :quoted-message
               set/rename-keys
               {:parsedText       :parsed-text

src/legacy/status_im/data_store/messages_test.cljs

@@ -21,6 +21,7 @@
                                                  :image       nil
                                                  :response-to "a"
                                                  :links       nil}
+                    :bridge-message             nil
                     :whisper-timestamp          1
                     :contact-verification-state 1
                     :contact-request-state      2
@@ -37,7 +38,19 @@
                     :compressed-key             "c"
                     :timestamp                  3
                     :link-previews              [{:thumbnail {:url      "http://localhost"
-                                                              :data-uri "data:image/png"}}]}
+                                                              :data-uri "data:image/png"}
+                                                  :favicon   nil}]
+                    :status-link-previews       [{:url       "http://localhost"
+                                                  :community {:community-id "0x01"
+                                                              :display-name "Test Comm"
+                                                              :members-count 12
+                                                              :active-members-count 12
+                                                              :banner
+                                                              {:data-uri
+                                                               "data:image/png"}
+                                                              :icon
+                                                              {:data-uri
+                                                               "data:image/png"}}}]}
           message  {:id                       message-id
                     :whisperTimestamp         1
                     :parsedText               "parsed-text"
@@ -61,5 +74,17 @@
                     :timestamp                3
                     :outgoingStatus           "sending"
                     :linkPreviews             [{:thumbnail {:url     "http://localhost"
-                                                            :dataUri "data:image/png"}}]}]
+                                                            :dataUri "data:image/png"}
+                                                :favicon   nil}]
+                    :statusLinkPreviews       [{:url       "http://localhost"
+                                                :community {:communityId "0x01"
+                                                            :displayName "Test Comm"
+                                                            :membersCount 12
+                                                            :activeMembersCount 12
+                                                            :banner
+                                                            {:dataUri
+                                                             "data:image/png"}
+                                                            :icon
+                                                            {:dataUri
+                                                             "data:image/png"}}}]}]
       (is (= expected (m/<-rpc message))))))

src/legacy/status_im/data_store/switcher_cards.cljs

@@ -2,6 +2,8 @@
   (:require
     [clojure.set :as set]
     [clojure.walk :as walk]
+    [re-frame.core :as re-frame]
+    [status-im.common.json-rpc.events :as json-rpc]
     [taoensso.timbre :as log]
     [utils.re-frame :as rf]))
 
@@ -32,11 +34,11 @@
                     :on-success #()
                     :on-error   #()}]})
 
-(rf/defn fetch-switcher-cards-rpc
-  [_]
-  {:json-rpc/call [{:method     "wakuext_switcherCards"
-                    :params     []
-                    :on-success #(rf/dispatch
-                                  [:shell/switcher-cards-loaded
-                                   (:switcherCards ^js %)])
-                    :on-error   #(log/error "Failed to fetch switcher cards" %)}]})
+(re-frame/reg-fx :switcher-cards/fetch
+ (fn []
+   (json-rpc/call {:method     "wakuext_switcherCards"
+                   :params     []
+                   :on-success #(rf/dispatch
+                                 [:shell/switcher-cards-loaded
+                                  (:switcherCards ^js %)])
+                   :on-error   #(log/error "Failed to fetch switcher cards" %)})))

src/legacy/status_im/data_store/visibility_status_updates.cljs

@@ -2,8 +2,8 @@
   (:require
     [clojure.set :as set]
     [re-frame.core :as re-frame]
-    [taoensso.timbre :as log]
-    [utils.re-frame :as rf]))
+    [status-im.common.json-rpc.events :as json-rpc]
+    [taoensso.timbre :as log]))
 
 (defn <-rpc
   [visibility-status-update]
@@ -18,13 +18,13 @@
        {:current-user-status :current-user-visibility-status})
       (update :current-user-visibility-status <-rpc)))
 
-(rf/defn fetch-visibility-status-updates-rpc
-  [_]
-  {:json-rpc/call [{:method     "wakuext_statusUpdates"
-                    :params     []
-                    :on-success #(re-frame/dispatch
-                                  [:visibility-status-updates/visibility-status-updates-loaded
-                                   (:statusUpdates ^js %)])
-                    :on-error   #(log/error
-                                  "failed to fetch visibility-status-updates"
-                                  %)}]})
+(re-frame/reg-fx :visibility-status-updates/fetch
+ (fn []
+   (json-rpc/call {:method     "wakuext_statusUpdates"
+                   :params     []
+                   :on-success #(re-frame/dispatch
+                                 [:visibility-status-updates/visibility-status-updates-loaded
+                                  (:statusUpdates ^js %)])
+                   :on-error   #(log/error
+                                 "failed to fetch visibility-status-updates"
+                                 %)})))

src/legacy/status_im/ethereum/transactions/core.cljs

@@ -239,7 +239,7 @@
 
 (rf/defn tx-history-end-reached
   [{:keys [db] :as cofx} address]
-  (let [syncing-allowed? (utils.mobile-sync/syncing-allowed? cofx)]
+  (let [syncing-allowed? (utils.mobile-sync/syncing-allowed? db)]
     {:db (assoc-in db
           [:wallet-legacy :fetching address :all-fetched?]
           (if syncing-allowed?
@@ -327,7 +327,7 @@
       {:chain-tokens      (:wallet-legacy/all-tokens db)
        :addresses         [address]
        :before-block      min-known-block
-       :fetch-more?       (utils.mobile-sync/syncing-allowed? cofx)
+       :fetch-more?       (utils.mobile-sync/syncing-allowed? db)
        ;; Transfers are requested before and including `min-known-block` because there is no
        ;; guarantee that all transfers from that block are shown already. To make sure that we fetch
        ;; the whole `default-transfers-limit` of transfers the number of transfers already received

src/legacy/status_im/events.cljs

@@ -8,11 +8,16 @@
     legacy.status-im.chat.models.loading
     legacy.status-im.contact.block
     legacy.status-im.currency.core
+    legacy.status-im.data-store.chats
+    legacy.status-im.data-store.switcher-cards
+    legacy.status-im.data-store.visibility-status-updates
     legacy.status-im.fleet.core
+    legacy.status-im.group-chats.core
     [legacy.status-im.keycard.core :as keycard]
     legacy.status-im.log-level.core
     legacy.status-im.mailserver.constants
     [legacy.status-im.mailserver.core :as mailserver]
+    legacy.status-im.mobile-sync-settings.core
     legacy.status-im.multiaccounts.login.core
     legacy.status-im.multiaccounts.logout.core
     [legacy.status-im.multiaccounts.model :as multiaccounts.model]
@@ -37,7 +42,6 @@
     [react-native.core :as rn]
     [react-native.permissions :as permissions]
     [react-native.platform :as platform]
-    [status-im.common.biometric.events :as biometric]
     status-im.common.serialization
     status-im.common.standard-authentication.events
     [status-im.common.theme.core :as theme]
@@ -120,7 +124,7 @@
       :content             (i18n/label :t/biometric-auth-confirm-message)
       :confirm-button-text (i18n/label :t/biometric-auth-confirm-try-again)
       :cancel-button-text  (i18n/label :t/biometric-auth-confirm-logout)
-      :on-accept           #(biometric/authenticate nil {:on-fail on-biometric-auth-fail})
+      :on-accept           #(rf/dispatch [:biometric/authenticate {:on-fail on-biometric-auth-fail}])
       :on-cancel           #(re-frame/dispatch [:multiaccounts.logout.ui/logout-confirmed])})))
 
 (rf/defn on-return-from-background
@@ -142,7 +146,7 @@
               #(when-let [chat-id (:current-chat-id db)]
                  {:dispatch [:chat/mark-all-as-read chat-id]})
               #(when requires-bio-auth
-                 (biometric/authenticate % {:on-fail on-biometric-auth-fail})))))
+                 {:dispatch [:biometric/authenticate {:on-fail on-biometric-auth-fail}]}))))
 
 (rf/defn on-going-in-background
   [{:keys [db now]}]

src/legacy/status_im/group_chats/core.cljs

@@ -6,9 +6,9 @@
     [legacy.status-im.data-store.invitations :as data-store.invitations]
     [oops.core :as oops]
     [re-frame.core :as re-frame]
+    [status-im.common.json-rpc.events :as json-rpc]
     [status-im.constants :as constants]
     [status-im.contexts.chat.events :as chat.events]
-    [status-im.contexts.shell.activity-center.events :as activity-center]
     [status-im.navigation.events :as navigation]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
@@ -19,15 +19,13 @@
   (when (get-in cofx [:db :chats chat-id])
     (chat.events/pop-to-root-and-navigate-to-chat cofx chat-id nil)))
 
-(rf/defn handle-chat-removed
-  {:events [:chat-removed]}
-  [cofx response chat-id]
-  (rf/merge cofx
-            {:db         (dissoc (:db cofx) :current-chat-id)
-             :dispatch-n [[:shell/close-switcher-card chat-id]
-                          [:sanitize-messages-and-process-response response]
-                          [:pop-to-root :shell-stack]]}
-            (activity-center/notifications-fetch-unread-count)))
+(re-frame/reg-event-fx :chat-removed
+ (fn [{:keys [db]} [response chat-id]]
+   {:db (dissoc db :current-chat-id)
+    :fx [[:dispatch [:shell/close-switcher-card chat-id]]
+         [:dispatch [:sanitize-messages-and-process-response response]]
+         [:dispatch [:pop-to-root :shell-stack]]
+         [:activity-center.notifications/fetch-unread-count]]}))
 
 (rf/defn handle-chat-update
   {:events [:chat-updated]}
@@ -264,8 +262,7 @@
                       {}
                       invitations))})
 
-(rf/defn get-group-chat-invitations
-  [_]
-  {:json-rpc/call
-   [{:method     "wakuext_getGroupChatInvitations"
-     :on-success #(re-frame/dispatch [::initialize-invitations %])}]})
+(re-frame/reg-fx :group-chats/get-group-chat-invitations
+ (fn []
+   (json-rpc/call {:method     "wakuext_getGroupChatInvitations"
+                   :on-success [::initialize-invitations]})))

src/legacy/status_im/mailserver/core.cljs

@@ -5,6 +5,7 @@
     [legacy.status-im.node.core :as node]
     [legacy.status-im.utils.mobile-sync :as mobile-network-utils]
     [re-frame.core :as re-frame]
+    [status-im.common.json-rpc.events :as json-rpc]
     [status-im.navigation.events :as navigation]
     [taoensso.timbre :as log]
     [utils.i18n :as i18n]
@@ -61,7 +62,7 @@
            (dissoc :mailserver/current-request :mailserver/fetching-gaps-in-progress))})
 
 (defn fetch-use-mailservers?
-  [{:keys [db]}]
+  [db]
   (get-in db [:profile/profile :use-mailservers?]))
 
 (defonce showing-connection-error-popup? (atom false))
@@ -117,24 +118,32 @@
   [{:keys [db] :as cofx}]
   {:db (dissoc db :mailserver/current-request)})
 
+(defn needs-to-fetch-historic-messages?
+  [db]
+  (and
+   (:messenger/started? db)
+   (mobile-network-utils/syncing-allowed? db)
+   (fetch-use-mailservers? db)
+   (not (:mailserver/current-request db))))
+
 (rf/defn process-next-messages-request
   {:events [::request-messages]}
-  [{:keys [db now] :as cofx}]
-  (when (and
-         (:messenger/started? db)
-         (mobile-network-utils/syncing-allowed? cofx)
-         (fetch-use-mailservers? cofx)
-         (not (:mailserver/current-request db)))
-    {:db            (assoc db :mailserver/current-request true)
-     :json-rpc/call [{:method      "wakuext_requestAllHistoricMessagesWithRetries"
-                      :params      [false]
-                      :js-response true
-                      :on-success  #(do
-                                      (log/info "fetched historical messages")
-                                      (re-frame/dispatch [::request-success %]))
-                      :on-error    #(do
-                                      (log/error "failed retrieve historical messages" %)
-                                      (re-frame/dispatch [::request-error]))}]}))
+  [{:keys [db]}]
+  (when (needs-to-fetch-historic-messages? db)
+    {:db                                       (assoc db :mailserver/current-request true)
+     :mailserver/request-all-historic-messages nil}))
+
+(re-frame/reg-fx :mailserver/request-all-historic-messages
+ (fn []
+   (json-rpc/call {:method      "wakuext_requestAllHistoricMessagesWithRetries"
+                   :params      [false]
+                   :js-response true
+                   :on-success  #(do
+                                   (log/info "fetched historical messages")
+                                   (re-frame/dispatch [::request-success %]))
+                   :on-error    #(do
+                                   (log/error "failed retrieve historical messages" %)
+                                   (re-frame/dispatch [::request-error]))})))
 
 (rf/defn handle-mailserver-changed
   [{:keys [db] :as cofx} ms]

src/legacy/status_im/mobile_sync_settings/core.cljs

@@ -5,7 +5,7 @@
     [legacy.status-im.multiaccounts.model :as multiaccounts.model]
     [legacy.status-im.multiaccounts.update.core :as multiaccounts.update]
     [legacy.status-im.utils.mobile-sync :as utils]
-    [status-im.contexts.chat.home.add-new-contact.events :as add-new-contact]
+    [re-frame.core :as re-frame]
     [status-im.navigation.events :as navigation]
     [taoensso.timbre :as log]
     [utils.re-frame :as rf]))
@@ -18,27 +18,24 @@
                 (or (nil? remember-choice?)
                     remember-choice?))}))
 
-(rf/defn on-network-status-change
-  [{:keys [db] :as cofx}]
-  (let [initialized?                       (get db :network-status/initialized?)
-        logged-in?                         (multiaccounts.model/logged-in? db)
-        {:keys [remember-syncing-choice?]} (:profile/profile db)]
-    (apply
-     rf/merge
-     cofx
-     {:db (assoc db :network-status/initialized? true)}
-     (cond
-       ;; NOTE(rasom): When we log into account on-network-status-change is
-       ;; dispatched, but that doesn't mean there was a status change, thus
-       ;; no reason to restart wallet.
-       (and logged-in? initialized?)
-       [(mailserver/process-next-messages-request)
-        (bottom-sheet/hide-bottom-sheet-old)
-        #(add-new-contact/set-new-identity-reconnected %)]
-
-       logged-in?
-       [(mailserver/process-next-messages-request)
-        (bottom-sheet/hide-bottom-sheet-old)]))))
+(re-frame/reg-event-fx :mobile-network/on-network-status-change
+ (fn [{:keys [db]}]
+   (let [previously-initialized?  (get db :network-status/initialized?)
+         logged-in?               (multiaccounts.model/logged-in? db)
+         fetch-historic-messages? (mailserver/needs-to-fetch-historic-messages? db)]
+     (if logged-in?
+       {:db (cond-> (-> db
+                        (assoc :network-status/initialized? true)
+                        (assoc :bottom-sheet/show? false))
+              fetch-historic-messages?
+              (assoc :mailserver/current-request true))
+        :fx [(when fetch-historic-messages?
+               [:mailserver/request-all-historic-messages])
+             [:dismiss-bottom-sheet-overlay-old]
+             (when previously-initialized?
+               (let [new-identity-input (get-in db [:contacts/new-identity :input])]
+                 [:dispatch [:contacts/set-new-identity {:input new-identity-input}]]))]}
+       {:db (assoc db :network-status/initialized? true)}))))
 
 (defn apply-settings
   ([sync?] (apply-settings sync? :default))

src/legacy/status_im/multiaccounts/logout/core.cljs

@@ -13,15 +13,14 @@
    (native-module/logout)))
 
 (rf/defn initialize-app-db
-  [{{:keys           [keycard initials-avatar-font-file]
-     :biometric/keys [supported-type]
-     :network/keys   [type]}
+  [{{:keys         [keycard initials-avatar-font-file biometrics]
+     :network/keys [type]}
     :db}]
   {:db (assoc db/app-db
               :network/type              type
               :initials-avatar-font-file initials-avatar-font-file
               :keycard                   (dissoc keycard :secrets :pin :application-info)
-              :biometric/supported-type  supported-type
+              :biometrics                biometrics
               :syncing                   nil)})
 
 (rf/defn logout-method
@@ -46,6 +45,7 @@
   [_]
   ;; we need to disable notifications before starting the logout process
   {:effects/push-notifications-disable nil
+   :dispatch                           [:alert-banners/remove-all]
    :dispatch-later                     [{:ms       100
                                          :dispatch [::logout-method
                                                     {:auth-method keychain/auth-method-none

src/legacy/status_im/network/core.cljs

@@ -1,11 +1,6 @@
 (ns legacy.status-im.network.core
   (:require
-    [clojure.string :as string]
-    [re-frame.core :as re-frame]
-    [status-im.navigation.events :as navigation]
-    [utils.ethereum.chain :as chain]
-    [utils.i18n :as i18n]
-    [utils.re-frame :as rf]))
+    [clojure.string :as string]))
 
 (def url-regex
   #"https?://(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}(\.[a-z]{2,6})?\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)")
@@ -14,12 +9,6 @@
   [url]
   (boolean (re-matches url-regex (str url))))
 
-(def default-manage
-  {:name   {:value ""}
-   :url    {:value ""}
-   :symbol {:value ""}
-   :chain  {:value :mainnet}})
-
 (defn validate-string
   [{:keys [value]}]
   {:value value
@@ -56,123 +45,3 @@
   [current-networks network]
   (let [chain-id (get-in network [:config :NetworkId])]
     (every? #(not= chain-id (get-in % [1 :config :NetworkId])) current-networks)))
-
-(defn get-network
-  [{:keys [db]} network-id]
-  (get-in db [:networks/networks network-id]))
-
-(rf/defn set-input
-  {:events [::input-changed]}
-  [{:keys [db]} input-key value]
-  {:db (-> db
-           (update-in [:networks/manage input-key] assoc :value value)
-           (update-in [:networks/manage] validate-manage))})
-
-;; No edit functionality actually implemented
-(rf/defn edit
-  {:events [::add-network-pressed]}
-  [{db :db}]
-  {:db       (assoc db :networks/manage (validate-manage default-manage))
-   :dispatch [:navigate-to :edit-network]})
-
-(rf/defn connect-success
-  {:events [::connect-success]}
-  [_ network-id]
-  {:ui/show-confirmation
-   {:title               (i18n/label :t/close-app-title)
-    :content             (i18n/label :t/logout-app-content)
-    :confirm-button-text (i18n/label :t/close-app-button)
-    :on-accept           #(re-frame/dispatch [::save-network-settings-pressed network-id])
-    :on-cancel           nil}})
-
-(rf/defn connect-failure
-  {:events [::connect-failure]}
-  [_ reason]
-  {:effects.utils/show-popup
-   {:title   (i18n/label :t/error)
-    :content (str reason)}})
-
-(rf/defn connect
-  {:events [::connect-network-pressed]}
-  [{:keys [db] :as cofx} network-id]
-  (if (get-in db [:networks/networks network-id :config])
-    (connect-success cofx network-id)
-    (connect-failure cofx "A network with the specified id doesn't exist")))
-
-(rf/defn delete
-  {:events [::delete-network-pressed]}
-  [{:keys [db]} network]
-  (let [current-network? (= (:networks/current-network db) network)]
-    (if (or current-network?
-            (not (get-in db [:networks/networks network])))
-      {:ui/show-error (i18n/label :t/delete-network-error)}
-      {:ui/show-confirmation {:title               (i18n/label :t/delete-network-title)
-                              :content             (i18n/label :t/delete-network-confirmation)
-                              :confirm-button-text (i18n/label :t/delete)
-                              :on-accept           #(re-frame/dispatch [::remove-network-confirmed
-                                                                        network])
-                              :on-cancel           nil}})))
-
-(rf/defn save-network-settings
-  {:events [::save-network-settings-pressed]}
-  [{:keys [db] :as cofx} network]
-  {:db            (assoc db :networks/current-network network)
-   :json-rpc/call [{:method     "settings_saveSetting"
-                    :params     [:networks/current-network network]
-                    :on-success #(re-frame/dispatch [:logout])}]})
-
-(rf/defn remove-network
-  {:events [::remove-network-confirmed]}
-  [{:keys [db] :as cofx} network]
-  (let [networks (dissoc (:networks/networks db) network)]
-    {:db            (assoc db :networks/networks networks)
-     :json-rpc/call [{:method     "settings_saveSetting"
-                      :params     [:networks/networks (vals networks)]
-                      :on-success #(re-frame/dispatch [:navigate-back])}]}))
-
-(defn new-network
-  [random-id network-name sym upstream-url chain-type chain-id]
-  (let [data-dir (str "/ethereum/" (name chain-type) "_rpc")
-        config   {:NetworkId      (or (when chain-id (int chain-id))
-                                      (chain/chain-keyword->chain-id chain-type))
-                  :DataDir        data-dir
-                  :UpstreamConfig {:Enabled true
-                                   :URL     upstream-url}}]
-    {:id     random-id
-     :name   network-name
-     :symbol sym
-     :config config}))
-
-(rf/defn save
-  {:events       [::save-network-pressed]
-   :interceptors [(re-frame/inject-cofx :random-id-generator)]}
-  [{{:networks/keys [manage networks] :as db} :db
-    random-id-generator                       :random-id-generator
-    :as                                       cofx}]
-  (if (valid-manage? manage)
-    ;; rename network-id from UI to chain-id
-    (let [{:keys [name url chain network-id symbol]} manage
-          random-id                                  (string/replace (random-id-generator) "-" "")
-          network                                    (new-network random-id
-                                                                  (:value name)
-                                                                  (:value symbol)
-                                                                  (:value url)
-                                                                  (:value chain)
-                                                                  (:value network-id))
-          custom-chain-type?                         (= :custom (:value chain))
-          new-networks                               (assoc networks random-id network)]
-      (if (or (not custom-chain-type?)
-              (chain-id-available? networks network))
-        {:db            (-> db
-                            (dissoc :networks/manage)
-                            (assoc :networks/networks new-networks))
-         :json-rpc/call [{:method     "settings_saveSetting"
-                          :params     [:networks/networks (vals new-networks)]
-                          :on-success #(re-frame/dispatch [:navigate-back])}]}
-        {:ui/show-error "chain-id already defined"}))
-    {:ui/show-error "invalid network parameters"}))
-
-(rf/defn open-network-details
-  {:events [::network-entry-pressed]}
-  [cofx network]
-  (navigation/navigate-to cofx :network-details {:networks/selected-network network}))

src/legacy/status_im/network/core_test.cljs

@@ -31,38 +31,6 @@
   (testing "an https url not on the default port"
     (is (network.core/valid-rpc-url? "https://valid.something.else:65323"))))
 
-(deftest new-network-test
-  (let [actual (network.core/new-network "randomid"
-                                         "network-name"
-                                         "network-symbol"
-                                         "upstream-url"
-                                         :mainnet
-                                         nil)]
-    (is (= {:id     "randomid"
-            :name   "network-name"
-            :symbol "network-symbol"
-            :config {:NetworkId      1
-                     :DataDir        "/ethereum/mainnet_rpc"
-                     :UpstreamConfig {:Enabled true
-                                      :URL     "upstream-url"}}}
-           actual))))
-
-(deftest new-network-id-test
-  (let [actual (network.core/new-network "randomid"
-                                         "network-name"
-                                         "network-symbol"
-                                         "upstream-url"
-                                         :mainnet
-                                         "5777")]
-    (is (= {:id     "randomid"
-            :name   "network-name"
-            :symbol "network-symbol"
-            :config {:NetworkId      5777
-                     :DataDir        "/ethereum/mainnet_rpc"
-                     :UpstreamConfig {:Enabled true
-                                      :URL     "upstream-url"}}}
-           actual))))
-
 (deftest valid-manage-test
   (testing "a valid manage"
     (is (network.core/valid-manage? {:url    {:value "http://valid.com"}
@@ -92,101 +60,3 @@
                                           :name   {:value "valid"}
                                           :symbol {:value ""}
                                           :chain  {:value "valid"}})))))
-
-(deftest set-input-test
-  (testing "it updates and validate a field"
-    (is
-     (= {:db {:networks/manage {:url        {:value "http://valid.com"
-                                             :error false}
-                                :name       {:value ""
-                                             :error true}
-                                :symbol     {:value "symbol"
-                                             :error false}
-                                :chain      {:value "mainnet"
-                                             :error false}
-                                :network-id {:value nil
-                                             :error false}}}}
-        (network.core/set-input {:db {:networks/manage {:url    {:value "something"
-                                                                 :error true}
-                                                        :name   {:value ""
-                                                                 :error false}
-                                                        :symbol {:value "symbol"
-                                                                 :error false}
-                                                        :chain  {:value "mainnet"
-                                                                 :error false}}}}
-                                :url
-                                "http://valid.com")))))
-
-(deftest not-save-invalid-url
-  (testing "it does not save a network with an invalid url"
-    (is
-     (:ui/show-error (network.core/save {:random-id-generator (constantly "random")
-                                         :db                  {:networks/manage {:url   {:value "wrong"}
-                                                                                 :chain {:value "1"}
-                                                                                 :name  {:value "empty"}}
-                                                               :profile/profile {}}})))))
-
-(deftest save-valid-network
-  (testing "save a valid network"
-    (let [fx (network.core/save
-              {:random-id-generator (constantly "random-id")
-               :db                  {:networks/manage   {:url    {:value "http://valid.com"}
-                                                         :chain  {:value :mainnet}
-                                                         :symbol {:value "symbol"}
-                                                         :name   {:value "valid"}}
-                                     :profile/profile   {}
-                                     :networks/networks {"random2"
-                                                         {:id     "random2"
-                                                          :name   "network-name"
-                                                          :symbol "symbol"
-                                                          :config {:NetworkId 1
-                                                                   :DataDir "/ethereum/mainnet_rpc"
-                                                                   :UpstreamConfig
-                                                                   {:Enabled true
-                                                                    :URL     "upstream-url"}}}}}})]
-      (is (= "settings_saveSetting" (:method (first (:json-rpc/call fx)))))
-      (is (nil? (:networks/manage (:db fx))))
-      (testing "and check that it has an id with `-` and the correct mainnet NetworkId"
-        (is (= 1 (get-in fx [:db :networks/networks "randomid" :config :NetworkId])))))))
-
-(deftest not-save-custom-chain-with-non-unique-id
-  (testing "it does not save a custom chain with network-id already defined"
-    (let [result (network.core/save
-                  {:random-id-generator (constantly "already-defined")
-                   :db                  {:networks/manage   {:url        {:value "http://valid.com"}
-                                                             :chain      {:value :custom}
-                                                             :name       {:value "valid"}
-                                                             :network-id {:value 1}}
-                                         :profile/profile   {}
-                                         :networks/networks {"random"
-                                                             {:id     "random"
-                                                              :name   "network-name"
-                                                              :config {:NetworkId 1
-                                                                       :DataDir "/ethereum/mainnet_rpc"
-                                                                       :UpstreamConfig
-                                                                       {:Enabled true
-                                                                        :URL     "upstream-url"}}}}}})]
-      (is (:ui/show-error result)))))
-
-(deftest save-valid-network-with-unique-chain-id-check
-  (testing "save a valid network with chain-id not already defined"
-    (let [fx (network.core/save
-              {:random-id-generator (constantly "random")
-               :db                  {:networks/manage   {:url        {:value "http://valid.com"}
-                                                         :chain      {:value :mainnet}
-                                                         :name       {:value "valid"}
-                                                         :symbol     {:value "symbol"}
-                                                         :network-id {:value 5}}
-                                     :profile/profile   {}
-                                     :networks/networks {"randomid"
-                                                         {:id     "randomid"
-                                                          :name   "network-name"
-                                                          :symbol "symbol"
-                                                          :config {:NetworkId 3
-                                                                   :DataDir "/ethereum/mainnet_rpc"
-                                                                   :UpstreamConfig
-                                                                   {:Enabled true
-                                                                    :URL     "upstream-url"}}}}}})]
-      (is (= "settings_saveSetting" (:method (first (:json-rpc/call fx)))))
-      (is (nil? (:networks/manage (:db fx))))
-      (is (get-in fx [:db :networks/networks "random"])))))

src/legacy/status_im/network/net_info.cljs

@@ -1,7 +1,6 @@
 (ns legacy.status-im.network.net-info
   (:require
     ["@react-native-community/netinfo" :default net-info]
-    [legacy.status-im.mobile-sync-settings.core :as mobile-network]
     [native-module.core :as native-module]
     [re-frame.core :as re-frame]
     [taoensso.timbre :as log]
@@ -13,11 +12,11 @@
             {:db (assoc db :network-status (if is-connected? :online :offline))}))
 
 (rf/defn change-network-type
-  [{:keys [db] :as cofx} old-network-type network-type expensive?]
+  [{:keys [db] :as cofx} network-type expensive?]
   (rf/merge cofx
             {:db                       (assoc db :network/type network-type)
-             :network/notify-status-go [network-type expensive?]}
-            (mobile-network/on-network-status-change)))
+             :network/notify-status-go [network-type expensive?]
+             :dispatch                 [:mobile-network/on-network-status-change]}))
 
 (rf/defn handle-network-info-change
   {:events [::network-info-changed]}
@@ -37,7 +36,7 @@
               (when-not status-changed?
                 (change-network-status isConnected))
               (when-not type-changed?
-                (change-network-type old-network-type type (:is-connection-expensive details))))))
+                (change-network-type type (:is-connection-expensive details))))))
 
 (defn add-net-info-listener
   []

src/legacy/status_im/stickers/core.cljs

@@ -2,6 +2,7 @@
   (:require
     [legacy.status-im.utils.utils :as utils]
     [re-frame.core :as re-frame]
+    [status-im.common.json-rpc.events :as json-rpc]
     [status-im.constants :as constants]
     [utils.ethereum.chain :as chain]
     [utils.re-frame :as rf]))
@@ -22,6 +23,21 @@
                      :params     [(chain/chain-id db) id]
                      :on-success #()}]}))
 
+(re-frame/reg-fx :stickers/load-packs
+ (fn [chain-id]
+   (json-rpc/call {:method     "stickers_market"
+                   :params     [chain-id]
+                   :on-success [:stickers/stickers-market-success]})
+   (json-rpc/call {:method     "stickers_installed"
+                   :params     []
+                   :on-success [:stickers/stickers-installed-success]})
+   (json-rpc/call {:method     "stickers_pending"
+                   :params     []
+                   :on-success [:stickers/stickers-pending-success]})
+   (json-rpc/call {:method     "stickers_recent"
+                   :params     []
+                   :on-success [:stickers/stickers-recent-success]})))
+
 (rf/defn load-packs
   {:events [:stickers/load-packs]}
   [{:keys [db]}]

src/legacy/status_im/subs/mailservers.cljs

@@ -61,7 +61,7 @@
 (re-frame/reg-sub
  :mailserver/use-status-nodes?
  (fn [db _]
-   (boolean (mailserver/fetch-use-mailservers? {:db db}))))
+   (boolean (mailserver/fetch-use-mailservers? db))))
 
 (re-frame/reg-sub
  :mailserver.edit/validation-errors

src/legacy/status_im/subs/networks.cljs

@@ -1,39 +0,0 @@
-(ns legacy.status-im.subs.networks
-  (:require
-    [re-frame.core :as re-frame]
-    [status-im.config :as config]
-    [utils.ethereum.chain :as chain]))
-
-(defn- filter-networks
-  [network-type]
-  (fn [network]
-    (let [chain-id (chain/network->chain-id network)
-          testnet? (chain/testnet? chain-id)
-          custom?  (:custom? network)]
-      (case network-type
-        :custom  custom?
-        :mainnet (and (not custom?) (not testnet?))
-        :testnet (and (not custom?) testnet?)))))
-
-(defn- label-networks
-  [default-networks]
-  (fn [network]
-    (let [custom? (not (default-networks (:id network)))]
-      (assoc network :custom? custom?))))
-
-(re-frame/reg-sub
- :get-networks
- :<- [:networks/networks]
- (fn [networks]
-   (let [networks (map (label-networks (into #{} (map :id config/default-networks)))
-                       (sort-by :name (vals networks)))
-         types    [:mainnet :testnet :custom]]
-     (zipmap
-      types
-      (map #(filter (filter-networks %) networks) types)))))
-
-(re-frame/reg-sub
- :manage-network-valid?
- :<- [:networks/manage]
- (fn [manage]
-   (not-any? :error (vals manage))))

src/legacy/status_im/subs/root.cljs

@@ -5,7 +5,6 @@
     legacy.status-im.subs.ens
     legacy.status-im.subs.keycard
     legacy.status-im.subs.mailservers
-    legacy.status-im.subs.networks
     legacy.status-im.subs.stickers
     [re-frame.core :as re-frame]))
 
@@ -100,6 +99,7 @@
 ;;; Link previews
 (reg-root-key-sub :link-previews-whitelist :link-previews-whitelist)
 (reg-root-key-sub :chat/link-previews :chat/link-previews)
+(reg-root-key-sub :chat/status-link-previews :chat/status-link-previews)
 
 ;;commands
 (reg-root-key-sub :commands/select-account :commands/select-account)

src/legacy/status_im/ui/screens/advanced_settings/views.cljs

@@ -13,8 +13,7 @@
   (re-frame/dispatch event))
 
 (defn- normal-mode-settings-data
-  [{:keys [network-name
-           current-log-level
+  [{:keys [current-log-level
            light-client-enabled?
            transactions-management-enabled?
            current-fleet
@@ -25,22 +24,6 @@
   (keep
    identity
    [{:size :small
-     :title (i18n/label :t/network)
-     :accessibility-label :network-button
-     :container-margin-top 8
-     :on-press
-     #(re-frame/dispatch [:open-modal :network-settings])
-     :accessory :text
-     :accessory-text network-name
-     :chevron true}
-    {:size :small
-     :title (i18n/label :t/network-info)
-     :accessibility-label :network-button
-     :container-margin-top 8
-     :on-press
-     #(re-frame/dispatch [:open-modal :network-info])
-     :chevron true}
-    {:size :small
      :title (i18n/label :t/log-level)
      :accessibility-label :log-level-settings-button
      :on-press
@@ -151,15 +134,13 @@
                   is-goerli-enabled?               [:profile/is-goerli-enabled?]
                   light-client-enabled?            [:profile/light-client-enabled?]
                   webview-debug                    [:profile/webview-debug]
-                  network-name                     [:network-name]
                   transactions-management-enabled? [:wallet-legacy/transactions-management-enabled?]
                   current-log-level                [:log-level/current-log-level]
                   current-fleet                    [:fleets/current-fleet]
                   peer-syncing-enabled?            [:profile/peer-syncing-enabled?]]
     [list/flat-list
      {:data      (flat-list-data
-                  {:network-name                     network-name
-                   :current-log-level                current-log-level
+                  {:current-log-level                current-log-level
                    :transactions-management-enabled? transactions-management-enabled?
                    :light-client-enabled?            light-client-enabled?
                    :current-fleet                    current-fleet

src/legacy/status_im/ui/screens/communities/invite.cljs

@@ -85,9 +85,7 @@
              :accessibility-label :share-community-link
              :type                :secondary
              :on-press            #(debounce/throttle-and-dispatch
-                                    [(if can-invite?
-                                       ::communities/invite-people-confirmation-pressed
-                                       ::communities/share-community-confirmation-pressed) @user-pk
+                                    [::communities/share-community-confirmation-pressed @user-pk
                                      selected]
                                     3000)}
             (i18n/label (if can-invite? :t/invite :t/share))]}]]))))

src/legacy/status_im/ui/screens/default_sync_period_settings/view.cljs

@@ -21,7 +21,7 @@
    {:active    (= value id)
     :accessory :radio
     :title     (get titles id)
-    :on-press  #(re-frame/dispatch [:profile.settings/update-value :default-sync-period id])}])
+    :on-press  #(re-frame/dispatch [:profile.settings/profile-update :default-sync-period id])}])
 
 (views/defview default-sync-period-settings
   []

src/legacy/status_im/ui/screens/network/edit_network/styles.cljs

@@ -1,12 +0,0 @@
-(ns legacy.status-im.ui.screens.network.edit-network.styles)
-
-(def edit-network-view
-  {:flex              1
-   :margin-horizontal 16
-   :margin-vertical   15})
-
-(def bottom-container
-  {:flex-direction   :row
-   :padding-vertical 4})
-
-(def container {:flex 1})

src/legacy/status_im/ui/screens/network/edit_network/views.cljs

@@ -1,72 +0,0 @@
-(ns legacy.status-im.ui.screens.network.edit-network.views
-  (:require
-    [legacy.status-im.network.core :as network]
-    [legacy.status-im.ui.components.core :as quo]
-    [legacy.status-im.ui.components.list.item :as list.item]
-    [legacy.status-im.ui.components.list.views :as list]
-    [legacy.status-im.ui.components.react :as react]
-    [legacy.status-im.ui.screens.network.edit-network.styles :as styles]
-    [re-frame.core :as re-frame]
-    [utils.i18n :as i18n])
-  (:require-macros [legacy.status-im.utils.views :as views]))
-
-(defn- render-network-type
-  [type _ _ manage-network]
-  (let [name (case type
-               :mainnet (i18n/label :t/mainnet-network)
-               :goerli  (i18n/label :t/goerli-network)
-               :custom  (i18n/label :t/custom))]
-    [list.item/list-item
-     {:title     name
-      :accessory :radio
-      :active    (= (get-in manage-network [:chain :value]) type)
-      :on-press  #(re-frame/dispatch [::network/input-changed :chain type])}]))
-
-(views/defview edit-network
-  []
-  (views/letsubs [manage-network [:networks/manage]
-                  is-valid?      [:manage-network-valid?]]
-    (let [custom? (= (get-in manage-network [:chain :value]) :custom)]
-      [react/keyboard-avoiding-view {:flex 1}
-       [react/scroll-view
-        [react/view styles/edit-network-view
-         [react/view {:padding-vertical 8}
-          [quo/text-input
-           {:label          (i18n/label :t/name)
-            :placeholder    (i18n/label :t/specify-name)
-            :default-value  (get-in manage-network [:name :value])
-            :on-change-text #(re-frame/dispatch [::network/input-changed :name %])
-            :auto-focus     true}]]
-         [react/view {:padding-vertical 8}
-          [quo/text-input
-           {:label          (i18n/label :t/symbol)
-            :placeholder    (i18n/label :t/specify-symbol)
-            :default-value  (get-in manage-network [:symbol :value])
-            :on-change-text #(re-frame/dispatch [::network/input-changed :symbol %])
-            :auto-focus     true}]]
-         [react/view {:padding-vertical 8}
-          [quo/text-input
-           {:label          (i18n/label :t/rpc-url)
-            :placeholder    (i18n/label :t/specify-rpc-url)
-            :default-value  (get-in manage-network [:url :value])
-            :on-change-text #(re-frame/dispatch [::network/input-changed :url %])}]]]
-        [quo/list-header (i18n/label :t/network-chain)]
-        [list/flat-list
-         {:data        [:mainnet :goerli :custom]
-          :key-fn      (fn [_ i] (str i))
-          :render-data manage-network
-          :render-fn   render-network-type}]
-        (when custom?
-          [react/view styles/edit-network-view
-           [quo/text-input
-            {:label          (i18n/label :t/network-id)
-             :placeholder    (i18n/label :t/specify-network-id)
-             :on-change-text #(re-frame/dispatch [::network/input-changed :network-id %])}]])]
-       [react/view styles/bottom-container
-        [react/view {:flex 1}]
-        [quo/button
-         {:after    :main-icons/next
-          :type     :secondary
-          :disabled (not is-valid?)
-          :on-press #(re-frame/dispatch [::network/save-network-pressed])}
-         (i18n/label :t/save)]]])))

src/legacy/status_im/ui/screens/network/network_details/views.cljs

@@ -1,47 +0,0 @@
-(ns legacy.status-im.ui.screens.network.network-details.views
-  (:require
-    [legacy.status-im.network.core :as network]
-    [legacy.status-im.ui.components.core :as quo]
-    [legacy.status-im.ui.components.react :as react]
-    [legacy.status-im.ui.screens.network.styles :as st]
-    [legacy.status-im.ui.screens.network.views :as network-settings]
-    [re-frame.core :as re-frame]
-    [utils.debounce :refer [throttle-and-dispatch]]
-    [utils.i18n :as i18n])
-  (:require-macros [legacy.status-im.utils.views :as views]))
-
-(views/defview network-details
-  []
-  (views/letsubs [{:keys [networks/selected-network]} [:get-screen-params]
-                  current-network                     [:networks/current-network]
-                  networks                            [:get-networks]]
-    (let [{:keys [id name config]} selected-network
-          connected?               (= id current-network)
-          custom?                  (seq (filter #(= (:id %) id) (:custom networks)))]
-      [:<>
-       [react/view {:flex 1}
-        [network-settings/network-badge
-         {:name       name
-          :connected? connected?}]
-        (when-not connected?
-          [react/touchable-highlight
-           {:on-press #(throttle-and-dispatch [::network/connect-network-pressed id] 1000)}
-           [react/view st/connect-button-container
-            [react/view
-             {:style               st/connect-button
-              :accessibility-label :network-connect-button}
-             [react/text {:style st/connect-button-label}
-              (i18n/label :t/connect)]]
-            [react/i18n-text
-             {:style st/connect-button-description
-              :key   :connecting-requires-login}]]])
-        [react/view (st/network-config-container)
-         [react/text
-          {:style               st/network-config-text
-           :accessibility-label :network-details-text}
-          config]]]
-       (when custom?
-         [react/view st/bottom-container
-          [react/view {:flex 1}
-           [quo/button {:on-press #(re-frame/dispatch [::network/delete-network-pressed id])}
-            (i18n/label :t/delete)]]])])))

src/legacy/status_im/ui/screens/network/styles.cljs

@@ -1,90 +0,0 @@
-(ns legacy.status-im.ui.screens.network.styles
-  (:require
-    [legacy.status-im.ui.components.colors :as colors]
-    [legacy.status-im.utils.styles :as styles]))
-
-(def wrapper
-  {:flex 1})
-
-(def badge-name-text
-  {:font-size 17})
-
-(styles/def badge-connected-text
-  {:color colors/gray
-   :ios   {:margin-top 5}})
-
-(def connect-button-container
-  {:margin-top        8
-   :margin-bottom     16
-   :margin-horizontal 16})
-
-(def connect-button
-  {:height           52
-   :align-items      :center
-   :justify-content  :center
-   :background-color colors/blue
-   :border-radius    8
-   :ios              {:opacity 0.9}})
-
-(def connect-button-label
-  {:color     colors/white-persist
-   :font-size 17})
-
-(def connect-button-description
-  {:color      colors/gray
-   :margin-top 8
-   :height     20})
-
-(styles/defn network-config-container
-  []
-  {:height            160
-   :margin-top        8
-   :padding-top       16
-   :padding-left      16
-   :margin-horizontal 16
-   :background-color  colors/gray-lighter
-   :ios               {:border-radius 9
-                       :opacity       0.9}
-   :android           {:border-radius 4}})
-
-(styles/def network-config-text
-  {:font-size 17
-   :ios       {:opacity 0.8}
-   :android   {:opacity 0.4}})
-
-(defn network-icon
-  [connected? size]
-  {:width            size
-   :height           size
-   :border-radius    (/ size 2)
-   :background-color (if connected? colors/blue colors/gray-lighter)
-   :align-items      :center
-   :justify-content  :center})
-
-(def network-badge
-  {:height         88
-   :padding-left   16
-   :flex-direction :row
-   :align-items    :center})
-
-(styles/def network-item
-  {:flex-direction     :row
-   :align-items        :center
-   :padding-horizontal 16
-   :ios                {:height 64}
-   :android            {:height 56}})
-
-(def network-item-name-text
-  {:font-size 17})
-
-(def network-item-connected-text
-  {:color      colors/gray
-   :font-size  14
-   :margin-top 6})
-
-(def bottom-container
-  {:flex-direction    :row
-   :margin-horizontal 12
-   :margin-vertical   15})
-
-(def container {:flex 1})

src/legacy/status_im/ui/screens/network/views.cljs

@@ -1,71 +0,0 @@
-(ns legacy.status-im.ui.screens.network.views
-  (:require
-    [legacy.status-im.network.core :as network]
-    [legacy.status-im.ui.components.colors :as colors]
-    [legacy.status-im.ui.components.icons.icons :as icons]
-    [legacy.status-im.ui.components.list.item :as list.item]
-    [legacy.status-im.ui.components.list.views :as list]
-    [legacy.status-im.ui.components.react :as react]
-    [legacy.status-im.ui.components.topbar :as topbar]
-    [legacy.status-im.ui.screens.network.styles :as styles]
-    [re-frame.core :as re-frame]
-    [utils.i18n :as i18n])
-  (:require-macros [legacy.status-im.utils.views :as views]))
-
-(defn- network-icon
-  [connected? size]
-  [react/view (styles/network-icon connected? size)
-   [icons/icon :main-icons/network {:color (if connected? colors/white-persist colors/gray)}]])
-
-(defn network-badge
-  [& [{:keys [name connected?]}]]
-  [react/view styles/network-badge
-   [network-icon connected? 56]
-   [react/view {:padding-left 16}
-    [react/text {:style styles/badge-name-text}
-     (or name (i18n/label :t/new-network))]
-    (when connected?
-      [react/i18n-text
-       {:style styles/badge-connected-text
-        :key   :connected}])]])
-
-(def mainnet?
-  #{"mainnet" "mainnet_rpc"})
-
-(defn render-network
-  [{:keys [id name] :as network} _ _ current-network]
-  (let [connected? (= id current-network)]
-    [list.item/list-item
-     {:on-press      #(re-frame/dispatch [::network/network-entry-pressed network])
-      :icon          :main-icons/network
-      :icon-bg-color (if connected? colors/blue colors/gray-lighter)
-      :icon-color    (if connected? colors/white-persist colors/gray)
-      :title         name
-      :subtitle      (when connected? (i18n/label :t/connected))
-      :chevron       true}]))
-
-(views/defview network-settings
-  []
-  (views/letsubs [current-network [:networks/current-network]
-                  networks        [:get-networks]]
-    [:<>
-     [topbar/topbar
-      {:title (i18n/label :t/network-settings)
-       :right-accessories
-       [{:icon     :main-icons/add
-         :on-press #(re-frame/dispatch [::network/add-network-pressed])}]}]
-     [react/view styles/wrapper
-      [list/section-list
-       {:sections           [{:title (i18n/label :t/main-networks)
-                              :key   :mainnet
-                              :data  (:mainnet networks)}
-                             {:title (i18n/label :t/test-networks)
-                              :key   :testnet
-                              :data  (:testnet networks)}
-                             {:title (i18n/label :t/custom-networks)
-                              :key   :custom
-                              :data  (:custom networks)}]
-        :key-fn             :id
-        :default-separator? true
-        :render-data        current-network
-        :render-fn          render-network}]]]))

src/legacy/status_im/ui/screens/network_info/views.cljs

@@ -1,84 +0,0 @@
-(ns legacy.status-im.ui.screens.network-info.views
-  (:require
-    [legacy.status-im.ethereum.decode :as decode]
-    [legacy.status-im.ui.components.react :as react]
-    [native-module.core :as native-module]
-    [re-frame.core :as re-frame]
-    [reagent.core :as reagent]
-    [status-im.common.json-rpc.events :as json-rpc]
-    [utils.datetime :as datetime]))
-
-(defn get-block
-  [block callback]
-  (json-rpc/call
-   {:method     "eth_getBlockByNumber"
-    :params     [block false]
-    :on-success callback
-    :on-error   #(js/alert (str "can't fetch latest block" %))}))
-
-(defn to-date
-  [timestamp]
-  (datetime/timestamp->long-date
-   (* 1000 timestamp)))
-
-(defn check-lag
-  []
-  (let [latest-block (reagent/atom nil)
-        last-loaded-block (reagent/atom nil)
-        on-press
-        (fn []
-          (get-block
-           "latest"
-           (fn [res]
-             (reset! latest-block res)
-             (get-block
-              (str "0x"
-                   (native-module/number-to-hex
-                    @(re-frame/subscribe [:ethereum/current-block])))
-              (fn [res]
-                (reset! last-loaded-block res))))))]
-    (fn []
-      [react/view
-       {:style {:flex              1
-                :margin-horizontal 16}}
-       (if-not @latest-block
-         [react/text
-          {:on-press on-press}
-          "PRESS TO REFRESH"]
-         [react/text
-          {:on-press on-press}
-          (let [latest-block-number
-                (decode/uint (:number @latest-block))
-
-                latest-block-timestamp
-                (decode/uint (:timestamp @latest-block))
-
-                last-loaded-block-number
-                (decode/uint (:number @last-loaded-block))
-
-                last-loaded-block-timestamp
-                (decode/uint (:timestamp @last-loaded-block))]
-            (str "Latest block number: "
-                 latest-block-number
-                 "\n"
-                 "Latest block time: "
-                 (to-date latest-block-timestamp)
-                 "\n"
-                 "Last loaded block: "
-                 last-loaded-block-number
-                 "\n"
-                 "Last loaded block time: "
-                 (to-date last-loaded-block-timestamp)
-                 "\n"
-                 "Seconds diff: "
-                 (- latest-block-timestamp
-                    last-loaded-block-timestamp)
-                 "\n"
-                 "Blocks diff: " (- latest-block-number
-                                    last-loaded-block-number)
-                 "\n"
-                 "PRESS TO REFRESH"))])])))
-
-(defn network-info
-  []
-  [check-lag])

src/legacy/status_im/ui/screens/privacy_and_security_settings/views.cljs

@@ -111,7 +111,7 @@
          :subtitle           (i18n/label :t/webview-camera-permission-requests-subtitle)
          :subtitle-max-lines 2
          :on-press           #(re-frame/dispatch
-                               [:profile.settings/update-value
+                               [:profile.settings/profile-update
                                 :webview-allow-permission-requests?
                                 ((complement boolean) webview-allow-permission-requests?)])}])
      [separator]
@@ -169,8 +169,7 @@
    {:active    (= value id)
     :accessory :radio
     :title     (get titles id)
-    :on-press  #(re-frame/dispatch [:profile.settings/update-value :profile-pictures-visibility
-                                    id])}])
+    :on-press  #(re-frame/dispatch [:profile.settings/profile-update :profile-pictures-visibility id])}])
 
 (views/defview profile-pic
   []

src/legacy/status_im/ui/screens/profile/user/edit_picture.cljs

@@ -51,4 +51,4 @@
          :icon                :main-icons/delete
          :theme               :accent
          :title               (i18n/label :t/profile-pic-remove)
-         :on-press            #(re-frame/dispatch [:profile.settings/delete-profile-picture nil])}])]))
+         :on-press            #(re-frame/dispatch [:profile.settings/delete-profile-picture])}])]))

src/legacy/status_im/ui/screens/screens.cljs

@@ -1,7 +1,6 @@
 (ns legacy.status-im.ui.screens.screens
   (:require
     [legacy.status-im.ui.components.colors :as colors]
-    [legacy.status-im.ui.components.icons.icons :as icons]
     [legacy.status-im.ui.screens.about-app.views :as about-app]
     [legacy.status-im.ui.screens.advanced-settings.views :as advanced-settings]
     [legacy.status-im.ui.screens.appearance.views :as appearance]
@@ -24,10 +23,6 @@
     [legacy.status-im.ui.screens.link-previews-settings.views :as link-previews-settings]
     [legacy.status-im.ui.screens.log-level-settings.views :as log-level-settings]
     [legacy.status-im.ui.screens.mobile-network-settings.view :as mobile-network-settings]
-    [legacy.status-im.ui.screens.network-info.views :as network-info]
-    [legacy.status-im.ui.screens.network.edit-network.views :as edit-network]
-    [legacy.status-im.ui.screens.network.network-details.views :as network-details]
-    [legacy.status-im.ui.screens.network.views :as network]
     [legacy.status-im.ui.screens.notifications-settings.views :as notifications-settings]
     [legacy.status-im.ui.screens.offline-messaging-settings.edit-mailserver.views :as edit-mailserver]
     [legacy.status-im.ui.screens.offline-messaging-settings.views :as offline-messaging-settings]
@@ -52,10 +47,18 @@
     [status-im.contexts.chat.group-details.view :as group-details]
     [utils.i18n :as i18n]))
 
-(defn right-button-options
-  [id icon]
-  {:id   id
-   :icon (icons/icon-source icon)})
+(defn topbar-options
+  [title]
+  {:elevation        0
+   :title            {:color (if (colors/dark?) colors/white colors/black)
+                      :text  (i18n/label title)}
+   :rightButtonColor (if (colors/dark?) colors/white colors/black)
+   :background       {:color (if (colors/dark?) colors/black colors/white)}
+   :backButton       {:color           (if (colors/dark?) colors/white colors/black)
+                      :id              :legacy-back-button
+                      :testID          :back-button
+                      :visible         true
+                      :popStackOnPress false}})
 
 (defn screens
   []
@@ -81,7 +84,7 @@
 
    {:name      :stickers
     :options   {:insets {:top? true}
-                :topBar {:title {:text (i18n/label :t/sticker-market)}}}
+                :topBar (topbar-options :t/sticker-market)}
     :component stickers/packs}
 
    {:name      :stickers-pack
@@ -94,7 +97,7 @@
     :component group-chat/new-group}
 
    {:name      :currency-settings
-    :options   {:topBar {:title {:text (i18n/label :t/main-currency)}}
+    :options   {:topBar (topbar-options :t/main-currency)
                 :insets {:top? true}}
     :component currency-settings/currency-settings}
 
@@ -104,27 +107,27 @@
     :options   {:topBar {:visible false}}
     :component profile.user/my-profile}
    {:name      :contacts-list
-    :options   {:topBar {:title {:text (i18n/label :t/contacts)}}
+    :options   {:topBar (topbar-options :t/contacts)
                 :insets {:top? true}}
     :component contacts-list/contacts-list}
    {:name      :ens-main
-    :options   {:topBar {:title {:text (i18n/label :t/ens-usernames)}}
+    :options   {:topBar (topbar-options :t/ens-usernames)
                 :insets {:top? true}}
     :component ens/main}
    {:name      :ens-search
-    :options   {:topBar {:title {:text (i18n/label :t/ens-your-username)}}
+    :options   {:topBar (topbar-options :t/ens-your-username)
                 :insets {:top? true}}
     :component ens/search}
    {:name      :ens-checkout
-    :options   {:topBar {:title {:text (i18n/label :t/ens-your-username)}}
+    :options   {:topBar (topbar-options :t/ens-your-username)
                 :insets {:top? true}}
     :component ens/checkout}
    {:name      :ens-confirmation
-    :options   {:topBar {:title {:text (i18n/label :t/ens-your-username)}}
+    :options   {:topBar (topbar-options :t/ens-your-username)
                 :insets {:top? true}}
     :component ens/confirmation}
    {:name      :ens-terms
-    :options   {:topBar {:title {:text (i18n/label :t/ens-terms-registration)}}
+    :options   {:topBar (topbar-options :t/ens-terms-registration)
                 :insets {:top? true}}
     :component ens/terms}
    {:name      :ens-name-details
@@ -132,7 +135,7 @@
     :options   {:insets {:top? true}}
     :component ens/name-details}
    {:name      :blocked-users-list
-    :options   {:topBar {:title {:text (i18n/label :t/blocked-users)}}
+    :options   {:topBar (topbar-options :t/blocked-users)
                 :insets {:top? true}}
     :component contacts-list/blocked-users-list}
    {:name      :wakuv2-settings
@@ -148,7 +151,7 @@
     :options   {:insets {:top? true}}
     :component bootnodes-settings/bootnodes-settings}
    {:name      :installations
-    :options   {:topBar {:title {:text (i18n/label :t/devices)}}
+    :options   {:topBar (topbar-options (i18n/label :t/devices))
                 :insets {:top? true}}
     :component pairing/installations}
    {:name      :edit-bootnode
@@ -164,107 +167,91 @@
     :options   {:insets {:top? true}}
     :component edit-mailserver/edit-mailserver}
    {:name      :dapps-permissions
-    :options   {:topBar {:title {:text (i18n/label :t/dapps-permissions)}}
+    :options   {:topBar (topbar-options :t/dapps-permissions)
                 :insets {:top? true}}
     :component dapps-permissions/dapps-permissions}
    {:name      :privacy-and-security
-    :options   {:topBar {:title {:text (i18n/label :t/privacy-and-security)}}
+    :options   {:topBar (topbar-options :t/privacy-and-security)
                 :insets {:top? true}}
     :component privacy-and-security/privacy-and-security}
    {:name      :messages-from-contacts-only
-    :options   {:topBar {:title {:text (i18n/label :t/accept-new-chats-from)}}
+    :options   {:topBar (topbar-options :t/accept-new-chats-from)
                 :insets {:top? true}}
     :component messages-from-contacts-only/messages-from-contacts-only-view}
    {:name      :appearance
-    :options   {:topBar {:title {:text (i18n/label :t/appearance)}}
+    :options   {:topBar (topbar-options :t/appearance)
                 :insets {:top? true}}
     :component appearance/appearance-view}
    {:name      :privacy-and-security-profile-pic-show-to
-    :options   {:topbar {:title {:text (i18n/label :t/show-profile-pictures-to)}}
+    :options   {:topbar (topbar-options :t/show-profile-pictures-to)
                 :insets {:top? true}}
     :component privacy-and-security/profile-pic-show-to}
    {:name      :privacy-and-security-profile-pic
-    :options   {:topBar {:title {:text (i18n/label :t/show-profile-pictures)}}
+    :options   {:topBar (topbar-options :t/show-profile-pictures)
                 :insets {:top? true}}
     :component privacy-and-security/profile-pic}
    {:name      :notifications
-    :options   {:topBar {:title {:text (i18n/label :t/notification-settings)}}
+    :options   {:topBar (topbar-options :t/notification-settings)
                 :insets {:top? true}}
     :component notifications-settings/notifications-settings}
    {:name      :sync-settings
-    :options   {:topBar {:title {:text (i18n/label :t/sync-settings)}}
+    :options   {:topBar (topbar-options :t/sync-settings)
                 :insets {:top? true}}
     :component sync-settings/sync-settings}
    {:name      :advanced-settings
-    :options   {:topBar {:title {:text (i18n/label :t/advanced)}}
+    :options   {:topBar (topbar-options :t/advanced)
                 :insets {:top? true}}
     :component advanced-settings/advanced-settings}
    {:name      :help-center
-    :options   {:topBar {:title {:text (i18n/label :t/need-help)}}
+    :options   {:topBar (topbar-options :t/need-help)
                 :insets {:top? true}}
     :component help-center/help-center}
    {:name      :glossary
-    :options   {:topBar {:title {:text (i18n/label :t/glossary)}}
+    :options   {:topBar (topbar-options :t/glossary)
                 :insets {:top? true}}
     :component glossary/glossary}
    {:name      :about-app
-    :options   {:topBar {:title {:text (i18n/label :t/about-app)}}
+    :options   {:topBar (topbar-options :t/about-app)
                 :insets {:top? true}}
     :component about-app/about-app}
    {:name      :privacy-policy
-    :options   {:topBar {:title {:text (i18n/label :t/privacy-policy)}}
+    :options   {:topBar (topbar-options :t/privacy-policy)
                 :insets {:top? true}}
     :component about-app/privacy-policy}
    {:name      :terms-of-service
-    :options   {:topBar {:title {:text (i18n/label :t/terms-of-service)}}
+    :options   {:topBar (topbar-options :t/terms-of-service)
                 :insets {:top? true}}
     :component about-app/tos}
    {:name      :principles
-    :options   {:topBar {:title {:text (i18n/label :t/principles)}}
+    :options   {:topBar (topbar-options :t/principles)
                 :insets {:top? true}}
     :component about-app/principles}
    {:name      :manage-dapps-permissions
     ;;TODO dynamic title
     :options   {:insets {:top? true}}
     :component dapps-permissions/manage}
-   {:name      :network-settings
-    ;;TODO accessories
-    :options   {:insets {:top? true}}
-    :component network/network-settings}
-   {:name      :network-details
-    :options   {:topBar {:title {:text (i18n/label :t/network-details)}}
-                :insets {:top? true}}
-    :component network-details/network-details}
-   {:name      :network-info
-    :options   {:topBar {:title {:text (i18n/label :t/network-info)}}
-                :insets {:top? true}}
-    :component network-info/network-info}
    {:name      :rpc-usage-info
-    :options   {:topBar {:title {:text (i18n/label :t/rpc-usage-info)}}
+    :options   {:topBar (topbar-options :t/rpc-usage-info)
                 :insets {:top? true}}
     :component rpc-usage-info/usage-info}
    {:name      :peers-stats
-    :options   {:topBar {:title {:text (i18n/label :t/peers-stats)}}
+    :options   {:topBar (topbar-options :t/peers-stats)
                 :insets {:top? true}}
     :component peers-stats/peers-stats}
-   {:name      :edit-network
-    :options   {:topBar {:title {:text (i18n/label :t/add-network)}}
-                :insets {:top? true}}
-    :component edit-network/edit-network}
    {:name      :log-level-settings
-    :options   {:topBar {:title {:text (i18n/label :t/log-level-settings)}}
+    :options   {:topBar (topbar-options :t/log-level-settings)
                 :insets {:top? true}}
     :component log-level-settings/log-level-settings}
    {:name      :fleet-settings
-    :options   {:topBar {:title {:text (i18n/label :t/fleet-settings)}}
+    :options   {:topBar (topbar-options :t/fleet-settings)
                 :insets {:top? true}}
     :component fleet-settings/fleet-settings}
    {:name      :mobile-network-settings
-    :options   {:topBar {:title {:text (i18n/label :t/mobile-network-settings)}}
+    :options   {:topBar (topbar-options :t/mobile-network-settings)
                 :insets {:top? true}}
     :component mobile-network-settings/mobile-network-settings}
    {:name      :backup-settings
-    :options   {:topBar {:title {:text (i18n/label :t/backup-settings)}}
+    :options   {:topBar (topbar-options :t/backup-settings)
                 :insets {:top? true}}
     :component backup-settings/backup-settings}
    {:name      :backup-seed
@@ -272,14 +259,14 @@
     :options   {:insets {:top? true}}
     :component profile.seed/backup-seed}
    {:name      :reset-password
-    :options   {:topBar {:title {:text (i18n/label :t/reset-password)}}
+    :options   {:topBar (topbar-options :t/reset-password)
                 :insets {:top? true}}
     :component reset-password/reset-password}
    {:name      :delete-profile
     :insets    {:bottom? true}
     :component delete-profile/delete-profile}
    {:name      :default-sync-period-settings
-    :options   {:topBar {:title {:text (i18n/label :t/default-sync-period)}}
+    :options   {:topBar (topbar-options :t/default-sync-period)
                 :insets {:top? true}}
     :component default-sync-period-settings/default-sync-period-settings}
 
@@ -288,7 +275,7 @@
    ;[Chat] Link preview settings
 
    {:name      :link-previews-settings
-    :options   {:topBar {:title {:text (i18n/label :t/chat-link-previews)}}
+    :options   {:topBar (topbar-options :t/chat-link-previews)
                 :insets {:top? true}}
     :component link-previews-settings/link-previews-settings}
 
@@ -328,7 +315,7 @@
    ;;TODO WHY MODAL?
    ;[Profile] Notifications settings
    {:name      :notifications-settings
-    :options   {:topBar             {:title {:text (i18n/label :t/notification-settings)}}
+    :options   {:topBar             (topbar-options :t/notification-settings)
                 :popGesture         false
                 :hardwareBackButton {:dismissModalOnPress false
                                      :popStackOnPress     false}

src/legacy/status_im/utils/logging/core.cljs

@@ -10,6 +10,7 @@
     [re-frame.core :as re-frame]
     [react-native.mail :as react-native-mail]
     [react-native.platform :as platform]
+    [status-im.common.json-rpc.events :as json-rpc]
     [status-im.common.log :as log]
     [status-im.config :as config]
     [utils.datetime :as datetime]
@@ -31,11 +32,10 @@
   [{:keys [db]} node-version]
   {:db (assoc db :web3-node-version node-version)})
 
-(rf/defn initialize-web3-client-version
-  {:events [:logging/initialize-web3-client-version]}
-  [_]
-  {:json-rpc/call [{:method     "web3_clientVersion"
-                    :on-success #(re-frame/dispatch [:logging/store-web3-client-version %])}]})
+(re-frame/reg-fx :logging/initialize-web3-client-version
+ (fn []
+   (json-rpc/call {:method     "web3_clientVersion"
+                   :on-success [:logging/store-web3-client-version]})))
 
 (defn extract-url-components
   [address]

src/legacy/status_im/utils/mobile_sync.cljs

@@ -5,7 +5,7 @@
   (= network-type "cellular"))
 
 (defn syncing-allowed?
-  [{:keys [db]}]
+  [db]
   (let [network                              (:network/type db)
         {:keys [syncing-on-mobile-network?]} (:profile/profile db)]
     (or (= network "wifi")

src/mocks/js_dependencies.cljs

@@ -2,7 +2,7 @@
   (:require-macros [legacy.status-im.utils.slurp :refer [slurp]])
   (:require
     [legacy.status-im.fleet.default-fleet :refer (default-fleets)])
-  (:require [legacy.status-im.utils.test :as utils.test]))
+  (:require [tests.test-utils :as utils.test]))
 
 ;; to generate a js Proxy at js/__STATUS_MOBILE_JS_IDENTITY_PROXY__ that accept any (.xxx) call and
 ;; return itself

src/quo/components/avatars/collection_avatar/style.cljs

@@ -2,10 +2,17 @@
   (:require
     [quo.foundations.colors :as colors]))
 
+(defn- get-dimensions
+  [size]
+  (case size
+    :size-24 24
+    :size-20 20
+    nil))
+
 (defn collection-avatar
-  [theme]
-  {:width         24
-   :height        24
+  [theme size]
+  {:width         (get-dimensions size)
+   :height        (get-dimensions size)
    :border-width  1
    :border-color  (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
    :border-radius 6})

src/quo/components/avatars/collection_avatar/view.cljs

@@ -9,10 +9,10 @@
    
     :image - collection image
     :theme - keyword -> :light/:dark"
-  [{:keys [image theme]}]
+  [{:keys [image theme size] :or {size :size-24}}]
   [fast-image/fast-image
    {:accessibility-label :collection-avatar
     :source              image
-    :style               (style/collection-avatar theme)}])
+    :style               (style/collection-avatar theme size)}])
 
 (def view (quo.theme/with-theme view-internal))

src/quo/components/colors/color_picker/component_spec.cljs

@@ -1,7 +1,6 @@
 (ns quo.components.colors.color-picker.component-spec
   (:require
     [quo.components.colors.color-picker.view :as color-picker]
-    [reagent.core :as reagent]
     [test-helpers.component :as h]))
 
 (h/describe "color-picker"
@@ -12,7 +11,7 @@
       (-> (h/expect event)
           (.toHaveBeenCalled))))
   (h/test "color picker color changed"
-    (let [selected (reagent/atom nil)]
+    (let [selected (atom nil)]
       (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)

src/quo/components/community/channel_action/style.cljs

@@ -0,0 +1,23 @@
+(ns quo.components.community.channel-action.style
+  (:require
+    [quo.foundations.colors :as colors]))
+
+(defn channel-action-container
+  [{:keys [big? disabled?]}]
+  (cond-> {}
+    disabled?  (assoc :opacity 0.3)
+    big?       (assoc :flex-grow 1)
+    (not big?) (assoc :width 104)))
+
+(defn channel-action
+  [{:keys [color pressed? theme]}]
+  {:height           102
+   :padding          12
+   :border-radius    16
+   :background-color (colors/resolve-color color theme (if pressed? 20 10))
+   :justify-content  :space-between})
+
+(def channel-action-row
+  {:flex-direction  :row
+   :justify-content :space-between
+   :align-items     :center})

src/quo/components/community/channel_action/view.cljs

@@ -0,0 +1,39 @@
+(ns quo.components.community.channel-action.view
+  (:require
+    [quo.components.community.channel-action.style :as style]
+    [quo.components.counter.counter.view :as counter]
+    [quo.components.icon :as icons]
+    [quo.components.markdown.text :as text]
+    [quo.theme]
+    [react-native.core :as rn]))
+
+(defn view
+  [{:keys [big? customization-color label counter-value icon on-press accessibility-label disabled?]}]
+  (let [theme                  (quo.theme/use-theme-value)
+        [pressed? set-pressed] (rn/use-state false)
+        on-press-in            (rn/use-callback #(set-pressed true))
+        on-press-out           (rn/use-callback #(set-pressed false))]
+    [rn/view
+     {:style (style/channel-action-container
+              {:big?      big?
+               :disabled? disabled?})}
+     [rn/pressable
+      (cond-> {:style               (style/channel-action
+                                     {:big?      big?
+                                      :color     customization-color
+                                      :pressed?  pressed?
+                                      :theme     theme
+                                      :disabled? disabled?})
+               :accessibility-label accessibility-label}
+        (not disabled?) (assoc :on-press     on-press
+                               :on-press-in  on-press-in
+                               :on-press-out on-press-out))
+      [rn/view {:style style/channel-action-row}
+       [icons/icon icon]
+       (when counter-value
+         [counter/view {:type :secondary} counter-value])]
+      [text/text
+       {:size            :paragraph-1
+        :weight          :medium
+        :number-of-lines 2}
+       label]]]))

src/quo/components/community/channel_actions.cljs

@@ -1,32 +0,0 @@
-(ns quo.components.community.channel-actions
-  (:require
-    [quo.components.community.style :as style]
-    [quo.components.counter.counter.view :as counter]
-    [quo.components.icon :as icons]
-    [quo.components.markdown.text :as text]
-    [react-native.core :as rn]))
-
-(defn channel-action
-  [{:keys [big? color label counter-value icon on-press accessibility-label]}]
-  [rn/touchable-opacity
-   {:on-press            on-press
-    :style               (style/channel-action-touch big?)
-    :accessibility-label accessibility-label}
-   [rn/view {:style (style/channel-action color)}
-    [rn/view {:style style/channel-action-row}
-     [icons/icon icon]
-     (when counter-value
-       [counter/view {:type :secondary} counter-value])]
-    [text/text {:size :paragraph-1 :weight :medium :number-of-lines 2} label]]])
-
-(defn channel-actions
-  [{:keys [style actions]}]
-  [rn/view {:style (merge {:flex-direction :row :flex 1} style)}
-   (map-indexed
-    (fn [index action]
-      ^{:key index}
-      [:<>
-       [channel-action action]
-       (when (not= action (last actions))
-         [rn/view {:width 16}])])
-    actions)])

src/quo/components/community/channel_actions/view.cljs

@@ -0,0 +1,16 @@
+(ns quo.components.community.channel-actions.view
+  (:require
+    [quo.components.community.channel-action.view :as channel-action]
+    [react-native.core :as rn]))
+
+(defn view
+  [{:keys [container-style actions]}]
+  [rn/view {:style (assoc container-style :flex-direction :row)}
+   (map-indexed
+    (fn [index action]
+      ^{:key index}
+      [:<>
+       [channel-action/view action]
+       (when (not= action (last actions))
+         [rn/view {:width 16}])])
+    actions)])

src/quo/components/community/style.cljs

@@ -133,25 +133,6 @@
                       colors/neutral-80
                       theme)})
 
-(defn channel-action-touch
-  [big?]
-  {:flex      1
-   :max-width (if big? 216 104)})
-
-(defn channel-action
-  [color]
-  {:padding          12
-   :height           102
-   :flex             1
-   :border-radius    16
-   :background-color (colors/custom-color color 50 10)
-   :justify-content  :space-between})
-
-(def channel-action-row
-  {:flex-direction  :row
-   :justify-content :space-between
-   :align-items     :center})
-
 (defn loading-card
   [width theme]
   (merge

src/quo/components/counter/collectible_counter/view.cljs

@@ -11,6 +11,7 @@
    [:catn
     [:props
      [:map {:closed true}
+      [:container-style {:optional true} [:maybe :map]]
       [:value {:optional true} [:maybe [:or :string :int]]]
       [:status {:optional true} [:maybe :keyword]]
       [:size {:optional true} [:maybe [:enum :size-32 :size-24]]]
@@ -19,7 +20,7 @@
    :any])
 
 (defn- view-internal
-  [{:keys [value accessibility-label]
+  [{:keys [value accessibility-label container-style]
     :as   props}]
   (let [default-props {:status :default
                        :size   :size-32}
@@ -27,7 +28,7 @@
     [rn/view
      {:accessible          true
       :accessibility-label (or accessibility-label :collectible-counter)
-      :style               (style/container props)}
+      :style               (merge (style/container props) container-style)}
      [text/text
       {:weight :medium
        :size   (style/get-text-size props)

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

@@ -58,14 +58,15 @@
      :on-press            on-press}
     [rn/view
      {:style (style/row-container sub-label)}
-     [rn/view
-      {:accessibility-label :left-icon-for-action
-       :accessible          true
-       :style               (style/left-icon sub-label)}
-      [icon/icon icon
-       {:color    (or icon-color (get-icon-color danger? theme))
-        :no-color no-icon-color?
-        :size     20}]]
+     (when icon
+       [rn/view
+        {:accessibility-label :left-icon-for-action
+         :accessible          true
+         :style               (style/left-icon sub-label)}
+        [icon/icon icon
+         {:color    (or icon-color (get-icon-color danger? theme))
+          :no-color no-icon-color?
+          :size     20}]])
      [rn/view
       {:style style/text-container}
       [text/text

src/quo/components/drawers/bottom_actions/component_spec.cljs

@@ -59,4 +59,15 @@
               :button-one-label "Request to join"}])
     (h/is-truthy (h/get-by-text "Eligible to join as"))
     (h/is-truthy (h/get-by-text "Admin"))
+    (h/is-truthy (h/get-by-text "Request to join")))
+
+  (h/test "render with top description with custom text & 1 action"
+    (render [bottom-actions/view
+             {:description          :top
+              :role                 :admin
+              :actions              :one-action
+              :description-top-text "You'll be an"
+              :button-one-label     "Request to join"}])
+    (h/is-truthy (h/get-by-text "You'll be an"))
+    (h/is-truthy (h/get-by-text "Admin"))
     (h/is-truthy (h/get-by-text "Request to join"))))

src/quo/components/drawers/bottom_actions/view.cljs

@@ -19,6 +19,7 @@
       [:actions [:maybe [:enum :one-action :two-actions]]]
       [:description {:optional true} [:maybe [:enum :top :bottom :top-error]]]
       [:description-text {:optional true} [:maybe :string]]
+      [:description-top-text {:optional true} [:maybe :string]]
       [:error-message {:optional true} [:maybe :string]]
       [:role {:optional true} [:maybe [:enum :admin :member :token-master :owner]]]
       [:button-one-label {:optional true} [:maybe :string]]
@@ -38,8 +39,8 @@
    :owner        :i/crown})
 
 (defn- view-internal
-  [{:keys [actions description description-text error-message role button-one-label button-two-label
-           blur? button-one-props button-two-props theme scroll? container-style]}]
+  [{:keys [actions description description-text description-top-text error-message role button-one-label
+           button-two-label blur? button-one-props button-two-props theme scroll? container-style]}]
   [rn/view
    {:style (merge (style/container scroll? blur? theme) container-style)}
    (when (= description :top-error)
@@ -54,12 +55,11 @@
        error-message]])
 
    (when (and (= description :top) role)
-     [rn/view
-      {:style style/description-top}
+     [rn/view {:style style/description-top}
       [text/text
        {:size  :paragraph-2
         :style (style/description-top-text scroll? blur? theme)}
-       (i18n/label :t/eligible-to-join-as)]
+       (or description-top-text (i18n/label :t/eligible-to-join-as))]
       [context-tag/view
        {:type    :icon
         :size    24

src/quo/components/drawers/drawer_top/view.cljs

@@ -76,7 +76,8 @@
    (str description " · " (i18n/label :t/on-device))])
 
 (defn- context-tag-subtitle
-  [{:keys [context-tag-type community-logo community-name account-name emoji customization-color]}]
+  [{:keys [context-tag-type community-logo community-name account-name emoji customization-color
+           full-name profile-picture]}]
   (let [tag-type (or context-tag-type :account)]
     [rn/view
      {:accessibility-label :context-tag-wrapper
@@ -88,7 +89,9 @@
        :community-name      community-name
        :community-logo      community-logo
        :size                24
-       :customization-color customization-color}]]))
+       :customization-color customization-color
+       :profile-picture     profile-picture
+       :full-name           full-name}]]))
 
 (defn- description-subtitle
   [{:keys [theme blur? description]}]
@@ -100,7 +103,7 @@
 
 (defn- subtitle
   [{:keys [type theme blur? keycard? networks description community-name community-logo
-           context-tag-type account-name emoji customization-color]}]
+           context-tag-type account-name emoji customization-color full-name profile-picture]}]
   (cond
     (= :keypair type)
     [keypair-subtitle
@@ -128,7 +131,9 @@
       :community-name      community-name
       :account-name        account-name
       :emoji               emoji
-      :customization-color customization-color}]
+      :customization-color customization-color
+      :profile-picture     profile-picture
+      :full-name           full-name}]
 
     (and (not= :label type) description)
     [description-subtitle
@@ -187,7 +192,7 @@
            on-button-press
            on-button-long-press
            button-disabled? account-avatar-emoji account-avatar-type customization-color icon-avatar
-           profile-picture keycard? networks label]}]
+           profile-picture keycard? networks label full-name]}]
   [rn/view {:style style/container}
    (when (left-image-supported-types type)
      [rn/view {:style style/left-container}
@@ -218,7 +223,9 @@
       :context-tag-type    context-tag-type
       :customization-color customization-color
       :account-name        account-name
-      :emoji               emoji}]]
+      :emoji               emoji
+      :full-name           full-name
+      :profile-picture     profile-picture}]]
    [right-icon
     {:theme                theme
      :type                 type

src/quo/components/gradient/gradient_cover/style.cljs

@@ -2,5 +2,10 @@
 
 (defn root-container
   [opacity height]
-  {:height  (or height 252)
-   :opacity opacity})
+  {:height   (or height 252)
+   :opacity  opacity
+   :position :absolute
+   :top      0
+   :left     0
+   :right    0
+   :z-index  -1})

src/quo/components/header.cljs

@@ -6,8 +6,7 @@
     [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
-    [react-native.reanimated :as reanimated]
-    [reagent.core :as reagent]))
+    [react-native.reanimated :as reanimated]))
 
 (def header-height 56)
 
@@ -57,7 +56,7 @@
    :justify-content :center
    :align-items     :flex-end})
 
-(defn title-style
+(defn get-title-style
   [{:keys [left right]} title-align]
   (merge
    absolute-fill
@@ -133,76 +132,77 @@
              :size            :large}
             title])])
 
-(defn- header-internal
-  [{:keys [left-width right-width]}]
-  (let [layout        (reagent/atom {:left  {:width  (or left-width 8)
-                                             :height header-height}
-                                     :right {:width  (or right-width 8)
-                                             :height header-height}
-                                     :title {:width  0
-                                             :height header-height}})
-        handle-layout (fn [el get-layout]
-                        (fn [evt]
-                          (let [width  (oget evt "nativeEvent" "layout" "width")
-                                height (oget evt "nativeEvent" "layout" "height")]
-                            (when get-layout
-                              (get-layout el
-                                          {:width  width
-                                           :height height}))
-                            (swap! layout assoc
-                              el
-                              {:width  width
-                               :height height}))))]
-    (fn
-      [{:keys [left-accessories left-component border-bottom
-               right-accessories right-component insets get-layout
-               title subtitle title-component style title-align
-               background theme]
-        :or   {title-align   :center
-               border-bottom false}}]
-      (let [status-bar-height (get insets :top 0)
-            height            (+ header-height status-bar-height)]
-        [reanimated/view
-         {:style (header-wrapper-style {:height        height
-                                        :background    background
-                                        :border-bottom border-bottom
-                                        :theme         theme})}
-         [rn/view
-          {:pointer-events :box-none
-           :height         status-bar-height}]
-         [rn/view
-          {:style          (merge {:height header-height}
-                                  style)
-           :pointer-events :box-none}
-          [rn/view
-           {:style          absolute-fill
-            :pointer-events :box-none}
-           [rn/view
-            {:style          content
-             :pointer-events :box-none}
-            [rn/view
-             {:style          left-style
-              :on-layout      (handle-layout :left get-layout)
-              :pointer-events :box-none}
-             [header-actions
-              {:accessories left-accessories
-               :component   left-component}]]
-
-            [rn/view
-             {:style          (title-style @layout title-align)
-              :on-layout      (handle-layout :title get-layout)
-              :pointer-events :box-none}
-             [header-title
-              {:title       title
-               :subtitle    subtitle
-               :title-align title-align
-               :component   title-component}]]
-            [rn/view
-             {:style          right-style
-              :on-layout      (handle-layout :right get-layout)
-              :pointer-events :box-none}
-             [header-actions
-              {:accessories right-accessories
-               :component   right-component}]]]]]]))))
-
-(def header (quo.theme/with-theme header-internal))
+(defn header
+  [{:keys [left-accessories left-component border-bottom left-width right-width
+           right-accessories right-component insets get-layout
+           title subtitle title-component style title-align
+           background]
+    :or   {title-align   :center
+           border-bottom false}}]
+  (let [theme               (quo.theme/use-theme-value)
+        [layout set-layout] (rn/use-state {:left  {:width  (or left-width 8)
+                                                   :height header-height}
+                                           :right {:width  (or right-width 8)
+                                                   :height header-height}
+                                           :title {:width  0
+                                                   :height header-height}})
+        handle-layout       (rn/use-callback
+                             (fn [el get-layout]
+                               (fn [evt]
+                                 (let [width  (oget evt "nativeEvent" "layout" "width")
+                                       height (oget evt "nativeEvent" "layout" "height")]
+                                   (when get-layout
+                                     (get-layout el
+                                                 {:width  width
+                                                  :height height}))
+                                   (set-layout
+                                    (assoc layout
+                                           el
+                                           {:width  width
+                                            :height height})))))
+                             [layout])
+        status-bar-height   (get insets :top 0)
+        height              (+ header-height status-bar-height)
+        title-style         (rn/use-memo (fn [] (get-title-style layout title-align))
+                                         [layout title-align])]
+    [reanimated/view
+     {:style (header-wrapper-style {:height        height
+                                    :background    background
+                                    :border-bottom border-bottom
+                                    :theme         theme})}
+     [rn/view
+      {:pointer-events :box-none
+       :height         status-bar-height}]
+     [rn/view
+      {:style          (merge {:height header-height}
+                              style)
+       :pointer-events :box-none}
+      [rn/view
+       {:style          absolute-fill
+        :pointer-events :box-none}
+       [rn/view
+        {:style          content
+         :pointer-events :box-none}
+        [rn/view
+         {:style          left-style
+          :on-layout      (handle-layout :left get-layout)
+          :pointer-events :box-none}
+         [header-actions
+          {:accessories left-accessories
+           :component   left-component}]]
+        [rn/view
+         {:style          title-style
+          :on-layout      (handle-layout :title get-layout)
+          :pointer-events :box-none}
+         [header-title
+          {:title       title
+           :subtitle    subtitle
+           :title-align title-align
+           :component   title-component}]]
+        [rn/view
+         {:style          right-style
+          :on-layout      (handle-layout :right get-layout)
+          :pointer-events :box-none}
+         [header-actions
+          {:accessories right-accessories
+           :component   right-component}]]]]]]))

src/quo/components/info/information_box/style.cljs

@@ -3,7 +3,7 @@
     [quo.foundations.colors :as colors]))
 
 (def ^:private themes
-  {:light {:default      {:bg     colors/white
+  {:light {:default      {:bg     colors/neutral-5
                           :border colors/neutral-20
                           :icon   colors/neutral-50
                           :text   colors/neutral-100}

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

@@ -55,16 +55,17 @@
 
 (def ^:private custom-props
   "Custom properties that must be removed from properties map passed to InputText."
-  [:type :blur? :theme :error? :right-icon :left-icon :disabled? :small? :button
+  [:type :blur? :error? :right-icon :left-icon :disabled? :small? :button
    :label :char-limit :on-char-limit-reach :icon-name :multiline? :on-focus :on-blur
    :container-style])
 
 (defn- base-input
-  [{:keys [blur? theme error? right-icon left-icon disabled? small? button
+  [{:keys [blur? error? right-icon left-icon disabled? small? button
            label char-limit multiline? clearable? on-focus on-blur container-style
            on-change-text on-char-limit-reach weight default-value]
     :as   props}]
-  (let [[status set-status]    (rn/use-state :default)
+  (let [theme                  (quo.theme/use-theme-value)
+        [status set-status]    (rn/use-state :default)
         internal-on-focus      (rn/use-callback #(set-status :focus))
         internal-on-blur       (rn/use-callback #(set-status :default))
         [multiple-lines?

src/quo/components/inputs/locked_input/style.cljs

@@ -10,7 +10,7 @@
    :background-color   (colors/theme-colors colors/neutral-10
                                             colors/neutral-80-opa-80
                                             theme)
-   :height             40
+   :min-height         40
    :padding-horizontal 12
    :padding-vertical   9
    :margin-top         4})

src/quo/components/inputs/locked_input/view.cljs

@@ -22,11 +22,12 @@
 (defn- locked-input-internal
   [{:keys [label icon container-style theme]} value]
   [rn/view {:style container-style}
-   [text/text
-    {:size   :paragraph-2
-     :weight :medium
-     :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
-    label]
+   (when label
+     [text/text
+      {:size   :paragraph-2
+       :weight :medium
+       :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
+      label])
    [info-box
     {:theme      theme
      :icon       icon

src/quo/components/links/internal_link_card/community/style.cljs

@@ -60,8 +60,8 @@
    :padding-horizontal 12
    :padding-top        10
    :padding-bottom     12
-   :height             (if (= :message size) 245 266)
-   :width              (if (= :message size) 295 335)})
+   :width              (if (= :message size) 295 335)
+   :flex               1})
 
 (def header-container
   {:flex-direction :row

src/quo/components/links/link_preview/component_spec.cljs

@@ -7,7 +7,6 @@
   {:title       "Some title"
    :description "Some description"
    :link        "status.im"
-   :logo        "data:image/png,logo-x"
    :thumbnail   "data:image/png,whatever"})
 
 (h/describe "Links - Link Preview"
@@ -21,17 +20,12 @@
     (h/is-truthy (h/query-by-text (:title props)))
     (h/is-truthy (h/query-by-text (:description props)))
     (h/is-truthy (h/query-by-text (:link props)))
-    (h/is-truthy (h/query-by-label-text :logo))
     (h/is-truthy (h/query-by-label-text :thumbnail)))
 
   (h/test "does not render thumbnail if prop is not present"
     (h/render [view/view (dissoc props :thumbnail)])
     (h/is-null (h/query-by-label-text :thumbnail)))
 
-  (h/test "does not render logo if prop is not present"
-    (h/render [view/view (dissoc props :logo)])
-    (h/is-null (h/query-by-label-text :logo)))
-
   (h/test "shows button to enable preview when preview is disabled"
     (h/render [view/view
                (assoc props

src/quo/components/links/link_preview/view.cljs

@@ -1,9 +1,14 @@
 (ns quo.components.links.link-preview.view
   (:require
+    ["react-native-blob-util" :default ReactNativeBlobUtil]
+    [oops.core :as oops]
     [quo.components.buttons.button.view :as button]
     [quo.components.links.link-preview.style :as style]
     [quo.components.markdown.text :as text]
-    [react-native.core :as rn]))
+    [react-native.core :as rn]
+    [react-native.platform :as platform]
+    [react-native.svg :as svg]
+    [taoensso.timbre :as log]))
 
 (defn- button-disabled
   [disabled-text on-enable]
@@ -51,14 +56,30 @@
                            thumbnail)
     :accessibility-label :thumbnail}])
 
+(defn- get-image-data
+  [logo set-is-svg on-success]
+  (-> (.config ReactNativeBlobUtil (clj->js {:trusty platform/ios?}))
+      (.fetch "GET" logo)
+      (.then (fn [imgObj]
+               (set-is-svg (= "image/svg"
+                              (oops/oget imgObj
+                                         ["respInfo" "headers" "Content-Type"])))
+               (on-success (oops/oget imgObj "data"))))
+      (.catch #(log/error "could not fetch favicon " logo))))
+
 (defn- logo-comp
   [logo]
-  [rn/image
-   {:accessibility-label :logo
-    :source              (if (string? logo)
-                           {:uri logo}
-                           logo)
-    :style               style/logo}])
+  (let [[image-data set-image-data] (rn/use-state nil)
+        [is-svg? set-is-svg]        (rn/use-state nil)
+        on-success                  (fn [data-uri]
+                                      (set-image-data data-uri))
+        _get-image-data             (get-image-data logo set-is-svg on-success)]
+    (if is-svg?
+      [svg/svg-xml (merge style/logo {:xml image-data})]
+      [rn/image
+       {:accessibility-label :logo
+        :source              {:uri (str "data:image/png;base64," image-data)}
+        :style               style/logo}])))
 
 (defn view
   [{:keys [title logo description link thumbnail

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

@@ -21,6 +21,7 @@
    :border-radius   12
    :border-style    :dashed
    :align-items     :center
+   :flex-direction  :row
    :justify-content :center
    :align-self      :stretch
    :padding         horizontal-padding

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

@@ -1,19 +1,31 @@
 (ns quo.components.links.url-preview.view
   (:require
+    [clojure.string :as string]
     [quo.components.icon :as icon]
     [quo.components.links.url-preview.style :as style]
     [quo.components.markdown.text :as text]
     [quo.foundations.colors :as colors]
-    [react-native.core :as rn]))
+    [react-native.core :as rn]
+    [react-native.svg :as svg]))
+
+(def base64-svg-prefix "data:image/svg;base64,")
 
 (defn- logo-comp
   [{:keys [logo]}]
-  [rn/image
-   {:accessibility-label :logo
-    :source              (if (string? logo)
-                           {:uri logo}
-                           logo)
-    :style               style/logo}])
+  (if (and (string? logo)
+           (string/starts-with? logo base64-svg-prefix))
+    [svg/svg-xml
+     (merge style/logo
+            {:xml (-> logo
+                      (string/replace base64-svg-prefix "")
+                      js/atob)})]
+    [rn/image
+     {:accessibility-label :logo
+      :source              (if (string? logo)
+                             {:uri logo}
+                             logo)
+      :style               style/logo
+      :resize-mode         :cover}]))
 
 (defn- content
   [{:keys [title body]}]
@@ -50,6 +62,10 @@
     [rn/view
      {:accessibility-label :url-preview-loading
       :style               (merge (style/loading-container) container-style)}
+     [icon/icon :i/loading
+      {:size            12
+       :color           (colors/theme-colors colors/neutral-50 colors/neutral-40)
+       :container-style {:margin-right 8}}]
      [rn/text
       {:size            :paragraph-2
        :weight          :medium
@@ -60,6 +76,9 @@
      {:accessibility-label :url-preview
       :style               (merge (style/container) container-style)}
      (when logo
-       [logo-comp {:logo logo}])
+       [logo-comp
+        {:logo (if (map? logo)
+                 (:data-uri logo)
+                 logo)}])
      [content {:title title :body body}]
      [clear-button {:on-press on-clear}]]))

src/quo/components/links/url_preview_list/view.cljs

@@ -32,7 +32,7 @@
   [rn/view {:style style/url-preview-separator}])
 
 (defn- item-component
-  [{:keys [title body loading? logo]} _ _
+  [{:keys [title body loading? logo url]} _ _
    {:keys [width on-clear loading-message container-style]}]
   [url-preview/view
    {:logo            logo
@@ -41,7 +41,8 @@
     :loading?        loading?
     :loading-message loading-message
     :on-clear        on-clear
-    :container-style (merge container-style {:width width})}])
+    :container-style (merge container-style {:width width})
+    :url             url}])
 
 (defn- f-view
   []

src/quo/components/list_items/account/schema.cljs

@@ -27,7 +27,6 @@
    [:blur? {:optional true} [:maybe :boolean]]
    [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
    [:on-press {:optional true} [:maybe fn?]]
-   [:theme :schema.common/theme]
    [:title-icon {:optional true} [:maybe :keyword]]
    [:account-props
     [:map

src/quo/components/list_items/account/view.cljs

@@ -9,7 +9,6 @@
     [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
-    [reagent.core :as reagent]
     [schema.core :as schema]))
 
 (defn- account-view
@@ -97,41 +96,40 @@
               (colors/resolve-color customization-color theme))}]])
 
 (defn- internal-view
-  [_]
-  (let [pressed?     (reagent/atom false)
-        on-press-in  #(reset! pressed? true)
-        on-press-out #(reset! pressed? false)]
-    (fn [{:keys [type state blur? customization-color on-press]
-          :or   {customization-color :blue
-                 type                :default
-                 state               :default
-                 blur?               false}
-          :as   props}]
-      [rn/pressable
-       {:style               (style/container
-                              {:state               state
-                               :blur?               blur?
-                               :customization-color customization-color
-                               :pressed?            @pressed?})
-        :on-press-in         on-press-in
-        :on-press            on-press
-        :on-press-out        on-press-out
-        :accessibility-label :container}
-       [account-view props]
-       [rn/view {:style (when (= type :tag) style/token-tag-container)}
-        (cond
-          (#{:balance-neutral :balance-negative :balance-positive} type)
-          [balance-view props]
+  [{:keys [type state blur? customization-color on-press]
+    :or   {customization-color :blue
+           type                :default
+           state               :default
+           blur?               false}
+    :as   props}]
+  (let [theme                  (quo.theme/use-theme-value)
+        [pressed? set-pressed] (rn/use-state false)
+        on-press-in            (rn/use-callback #(set-pressed true))
+        on-press-out           (rn/use-callback #(set-pressed false))
+        props                  (assoc props :theme theme)]
+    [rn/pressable
+     {:style               (style/container
+                            {:state               state
+                             :blur?               blur?
+                             :customization-color customization-color
+                             :pressed?            pressed?})
+      :on-press-in         on-press-in
+      :on-press            on-press
+      :on-press-out        on-press-out
+      :accessibility-label :container}
+     [account-view props]
+     [rn/view {:style (when (= type :tag) style/token-tag-container)}
+      (cond
+        (#{:balance-neutral :balance-negative :balance-positive} type)
+        [balance-view props]
 
-          (= type :tag)
-          [token-tag props]
+        (= type :tag)
+        [token-tag props]
 
-          (= type :action)
-          [options-button props]
+        (= type :action)
+        [options-button props]
 
-          (and (= type :default) (= state :selected))
-          [check-icon props])]])))
+        (and (= type :default) (= state :selected))
+        [check-icon props])]]))
 
-(def view
-  (quo.theme/with-theme
-   (schema/instrument #'internal-view component-schema/?schema)))
+(def view (schema/instrument #'internal-view component-schema/?schema))

src/quo/components/list_items/account_list_card/schema.cljs

@@ -5,7 +5,6 @@
    [:action {:optional true} [:enum :icon :none]]
    [:blur? {:optional true} [:maybe :boolean]]
    [:on-press {:optional true} [:maybe fn?]]
-   [:theme :schema.common/theme]
    [:account-props
     [:map {:closed true}
      [:type [:enum :default :watch-only]]

src/quo/components/list_items/account_list_card/view.cljs

@@ -9,38 +9,37 @@
     [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
-    [reagent.core :as reagent]
     [schema.core :as schema]))
 
 (defn- internal-view
-  []
-  (let [state (reagent/atom :default)]
-    (fn [{:keys [action blur? account-props networks on-press on-options-press theme]}]
-      [rn/pressable
-       {:style               (style/container {:state @state :blur? blur? :theme theme})
-        :on-press-in         #(reset! state :pressed)
-        :on-press-out        #(reset! state :default)
-        :on-press            on-press
-        :accessibility-label :container}
-       [rn/view {:style style/left-container}
-        [account-avatar/view account-props]
-        [rn/view {:style {:margin-left 8}}
-         [text/text
-          {:weight :semi-bold
-           :size   :paragraph-2}
-          (:name account-props)]
-         [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
-           {:color               (if blur?
-                                   colors/white-opa-70
-                                   (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))
-            :accessibility-label :icon}]])])))
+  [{:keys [action blur? account-props networks on-press on-options-press]}]
+  (let [theme             (quo.theme/use-theme-value)
+        [state set-state] (rn/use-state :default)
+        on-press-in       (rn/use-callback #(set-state :pressed))
+        on-press-out      (rn/use-callback #(set-state :default))]
+    [rn/pressable
+     {:style               (style/container {:state state :blur? blur? :theme theme})
+      :on-press-in         on-press-in
+      :on-press-out        on-press-out
+      :on-press            on-press
+      :accessibility-label :container}
+     [rn/view {:style style/left-container}
+      [account-avatar/view account-props]
+      [rn/view {:style {:margin-left 8}}
+       [text/text
+        {:weight :semi-bold
+         :size   :paragraph-2}
+        (:name account-props)]
+       [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
+         {:color               (if blur?
+                                 colors/white-opa-70
+                                 (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))
+          :accessibility-label :icon}]])]))
 
-(def view
-  (quo.theme/with-theme
-   (schema/instrument #'internal-view component-schema/?schema)))
+(def view (schema/instrument #'internal-view component-schema/?schema))

src/quo/components/list_items/address/schema.cljs

@@ -9,6 +9,5 @@
      [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
      [:on-press {:optional true} [:maybe fn?]]
      [:blur? {:optional true} [:maybe :boolean]]
-     [:theme :schema.common/theme]
      [:active-state? {:optional true} [:maybe :boolean]]]]
    :any])

src/quo/components/list_items/address/view.cljs

@@ -1,13 +1,12 @@
 (ns quo.components.list-items.address.view
   (:require
     [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
-    (quo.components.list-items.address.schema :as component-schema)
+    [quo.components.list-items.address.schema :as component-schema]
     [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]
     [schema.core :as schema]
     [utils.address :as address]))
 
@@ -39,34 +38,35 @@
       (address/get-shortened-key address)]]]])
 
 (defn- internal-view
-  []
-  (let [state       (reagent/atom :default)
-        active?     (atom false)
-        timer       (atom nil)
-        on-press-in (fn []
-                      (when-not (= @state :selected)
-                        (reset! timer (js/setTimeout #(reset! state :pressed) 100))))]
-    (fn [{:keys [networks address customization-color on-press active-state? blur? theme]
-          :or   {customization-color :blue}}]
-      (let [on-press-out (fn []
-                           (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)))]
-        [rn/pressable
-         {:style               (style/container @state customization-color blur?)
-          :on-press-in         on-press-in
-          :on-press-out        on-press-out
-          :on-press            on-press
-          :accessibility-label :container}
-         [left-container
-          {:theme    theme
-           :networks networks
-           :address  address
-           :blur?    blur?}]]))))
-
-(def view
-  (quo.theme/with-theme
-   (schema/instrument #'internal-view component-schema/?schema)))
+  [{:keys [networks address customization-color on-press active-state? blur?]
+    :or   {customization-color :blue}}]
+  (let [theme             (quo.theme/use-theme-value)
+        [state set-state] (rn/use-state :default)
+        active?           (rn/use-ref-atom false)
+        timer             (rn/use-ref-atom nil)
+        on-press-in       (rn/use-callback
+                           (fn []
+                             (when-not (= state :selected)
+                               (reset! timer (js/setTimeout #(set-state :pressed) 100))))
+                           [state])
+        on-press-out      (rn/use-callback
+                           (fn []
+                             (let [new-state (if (or (not active-state?) @active?) :default :active)]
+                               (when @timer (js/clearTimeout @timer))
+                               (reset! timer nil)
+                               (reset! active? (= new-state :active))
+                               (set-state new-state)))
+                           [active-state?])]
+    [rn/pressable
+     {:style               (style/container state customization-color blur?)
+      :on-press-in         on-press-in
+      :on-press-out        on-press-out
+      :on-press            on-press
+      :accessibility-label :container}
+     [left-container
+      {:theme    theme
+       :networks networks
+       :address  address
+       :blur?    blur?}]]))
 
+(def view (schema/instrument #'internal-view component-schema/?schema))

src/quo/components/list_items/channel/view.cljs

@@ -5,11 +5,10 @@
     [quo.components.icon :as quo.icons]
     [quo.components.list-items.channel.style :as style]
     [quo.components.markdown.text :as quo.text]
-    [quo.theme :as theme]
-    [react-native.core :as rn]
-    [reagent.core :as reagent]))
+    [quo.theme]
+    [react-native.core :as rn]))
 
-(defn- view-internal
+(defn view
   "Options:
    - notification - (nil/:notification/:mention/:mute, default: nil):
      - :notification - Display a grey dot.
@@ -27,38 +26,37 @@
    - on-press - (function, default: nil) - Function called when the component is pressed.
    - on-long-press - (function, default: nil) - Function called when the component is long pressed.
    - theme - Theme value from with-theme HOC"
-  []
-  (let [pressed? (reagent/atom false)]
-    (fn [{:keys [notification locked? mentions-count customization-color emoji name on-press
-                 on-long-press theme]}]
-      [rn/pressable
-       {:style               (style/container @pressed? customization-color theme)
-        :accessibility-label :channel-list-item
-        :on-press            on-press
-        :on-long-press       on-long-press
-        :on-press-in         #(reset! pressed? true)
-        :on-press-out        #(reset! pressed? false)}
-       [channel-avatar/view
-        {:size                :size-32
-         :locked?             locked?
-         :full-name           name
-         :customization-color customization-color
-         :emoji               emoji}]
-       [quo.text/text
-        {:style  (style/label notification theme)
-         :weight :medium
-         :size   :paragraph-1} (str "# " name)]
-       (when-not locked?
-         (condp = notification
-           :mute         [quo.icons/icon :i/muted
-                          {:color (style/mute-notification-icon-color theme)}]
-           :mention      [counter/view
-                          {:customization-color customization-color
-                           :container-style     (style/counter mentions-count)}
-                          mentions-count]
-           :notification [quo.icons/icon :i/notification
-                          {:color               (style/mute-notification-icon-color theme)
-                           :accessibility-label :unviewed-messages-public}]
-           nil))])))
-
-(def view (theme/with-theme view-internal))
+  [{:keys [notification locked? mentions-count customization-color emoji name on-press on-long-press]}]
+  (let [theme                  (quo.theme/use-theme-value)
+        [pressed? set-pressed] (rn/use-state false)
+        on-press-in            (rn/use-callback #(set-pressed true))
+        on-press-out           (rn/use-callback #(set-pressed false))]
+    [rn/pressable
+     {:style               (style/container pressed? customization-color theme)
+      :accessibility-label :channel-list-item
+      :on-press            on-press
+      :on-long-press       on-long-press
+      :on-press-in         on-press-in
+      :on-press-out        on-press-out}
+     [channel-avatar/view
+      {:size                :size-32
+       :locked?             locked?
+       :full-name           name
+       :customization-color customization-color
+       :emoji               emoji}]
+     [quo.text/text
+      {:style  (style/label notification theme)
+       :weight :medium
+       :size   :paragraph-1} (str "# " name)]
+     (when-not locked?
+       (condp = notification
+         :mute         [quo.icons/icon :i/muted
+                        {:color (style/mute-notification-icon-color theme)}]
+         :mention      [counter/view
+                        {:customization-color customization-color
+                         :container-style     (style/counter mentions-count)}
+                        mentions-count]
+         :notification [quo.icons/icon :i/notification
+                        {:color               (style/mute-notification-icon-color theme)
+                         :accessibility-label :unviewed-messages-public}]
+         nil))]))

src/quo/components/list_items/community/view.cljs

@@ -7,8 +7,7 @@
     [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]))
+    [react-native.core :as rn]))
 
 (defn- logo-component
   [logo]
@@ -83,7 +82,7 @@
         :style               {:margin-left 10}}
        component])))
 
-(defn- view-internal
+(defn view
   "Options:
 
   :type - :discover/engage/share
@@ -116,49 +115,48 @@
   :unread-count - number - When the info is :mention, it will be used to show
   the number of unread mentions.
   "
-  []
-  (let [pressed? (reagent/atom false)]
-    (fn [{:keys [members type info tokens locked? title subtitle
-                 logo blur? customization-color
-                 on-press on-long-press on-press-info
-                 container-style unread-count theme]}]
-      [rn/pressable
-       {:accessibility-label :container
-        :on-press-in         (fn [] (reset! pressed? true))
-        :on-press            on-press
-        :on-long-press       on-long-press
-        :on-press-out        (fn [] (reset! pressed? false))
-        :style               (merge (style/container {:blur?               blur?
-                                                      :customization-color customization-color
-                                                      :info                info
-                                                      :type                type
-                                                      :pressed?            @pressed?
-                                                      :theme               theme})
-                                    container-style)}
-       [logo-component logo]
-       [rn/view {:style {:flex 1}}
-        [title-component
-         {:blur? blur?
-          :info  info
-          :theme theme
-          :title title
-          :type  type}]
-        (when (and (= type :share) subtitle)
-          [subtitle-component subtitle blur? theme])
-        (when (and members (= type :discover))
-          [community-view/community-stats-column
-           {:type          :list-view
-            :members-count (:members-count members)
-            :active-count  (:active-count members)}])]
-       [info-component
-        {:blur?               blur?
-         :customization-color customization-color
-         :info                info
-         :type                type
-         :locked?             locked?
-         :on-press-info       on-press-info
-         :theme               theme
-         :tokens              tokens
-         :unread-count        unread-count}]])))
+  [{:keys [members type info tokens locked? title subtitle logo blur? customization-color
+           on-press on-long-press on-press-info container-style unread-count]}]
+  (let [theme                  (quo.theme/use-theme-value)
+        [pressed? set-pressed] (rn/use-state false)
+        on-press-in            (rn/use-callback #(set-pressed true))
+        on-press-out           (rn/use-callback #(set-pressed false))]
+    [rn/pressable
+     {:accessibility-label :container
 
-(def view (quo.theme/with-theme view-internal))
+      :on-press            on-press
+      :on-long-press       on-long-press
+      :on-press-in         on-press-in
+      :on-press-out        on-press-out
+      :style               (merge (style/container {:blur?               blur?
+                                                    :customization-color customization-color
+                                                    :info                info
+                                                    :type                type
+                                                    :pressed?            pressed?
+                                                    :theme               theme})
+                                  container-style)}
+     [logo-component logo]
+     [rn/view {:style {:flex 1}}
+      [title-component
+       {:blur? blur?
+        :info  info
+        :theme theme
+        :title title
+        :type  type}]
+      (when (and (= type :share) subtitle)
+        [subtitle-component subtitle blur? theme])
+      (when (and members (= type :discover))
+        [community-view/community-stats-column
+         {:type          :list-view
+          :members-count (:members-count members)
+          :active-count  (:active-count members)}])]
+     [info-component
+      {:blur?               blur?
+       :customization-color customization-color
+       :info                info
+       :type                type
+       :locked?             locked?
+       :on-press-info       on-press-info
+       :theme               theme
+       :tokens              tokens
+       :unread-count        unread-count}]]))

src/quo/components/list_items/dapp/view.cljs

@@ -6,43 +6,41 @@
     [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
-    [react-native.fast-image :as fast-image]
-    [reagent.core :as reagent]))
+    [react-native.fast-image :as fast-image]))
 
-(defn- view-internal
-  []
-  (let [pressed? (reagent/atom false)]
-    (fn [{:keys [dapp action on-press on-press-icon theme] :as props}]
-      [rn/pressable
-       {:style        (style/container (assoc props :pressed? @pressed?))
-        :on-press     on-press
-        :on-press-in  #(reset! pressed? true)
-        :on-press-out #(reset! pressed? false)}
-       [rn/view {:style style/container-info}
-        [fast-image/fast-image
-         {:source (:avatar dapp)
-          :style  {:width 32 :height 32}}]
-        [rn/view {:style style/user-info}
-         [text/text
-          {:weight :semi-bold
-           :size   :paragraph-1
-           :style  (style/style-text-name theme)}
-          (:name dapp)]
-         [text/text
-          {:weight :regular
-           :size   :paragraph-2
-           :style  (style/style-text-value theme)}
-          (:value dapp)]]]
-       (when (= action :icon)
-         [rn/pressable
-          {:on-press on-press-icon
-           :testID   "dapp-component-icon"}
-          [icons/icon :i/options
-           {:color               (colors/theme-colors
-                                  colors/neutral-50
-                                  colors/neutral-40
-                                  theme)
-            :accessibility-label :icon}]])])))
-
-(def view
-  (quo.theme/with-theme view-internal))
+(defn view
+  [{:keys [dapp action on-press on-press-icon] :as props}]
+  (let [theme                  (quo.theme/use-theme-value)
+        [pressed? set-pressed] (rn/use-state false)
+        on-press-in            (rn/use-callback #(set-pressed true))
+        on-press-out           (rn/use-callback #(set-pressed false))]
+    [rn/pressable
+     {:style        (style/container (assoc props :pressed? pressed?))
+      :on-press     on-press
+      :on-press-in  on-press-in
+      :on-press-out on-press-out}
+     [rn/view {:style style/container-info}
+      [fast-image/fast-image
+       {:source (:avatar dapp)
+        :style  {:width 32 :height 32}}]
+      [rn/view {:style style/user-info}
+       [text/text
+        {:weight :semi-bold
+         :size   :paragraph-1
+         :style  (style/style-text-name theme)}
+        (:name dapp)]
+       [text/text
+        {:weight :regular
+         :size   :paragraph-2
+         :style  (style/style-text-value theme)}
+        (:value dapp)]]]
+     (when (= action :icon)
+       [rn/pressable
+        {:on-press on-press-icon
+         :testID   "dapp-component-icon"}
+        [icons/icon :i/options
+         {:color               (colors/theme-colors
+                                colors/neutral-50
+                                colors/neutral-40
+                                theme)
+          :accessibility-label :icon}]])]))

src/quo/components/list_items/network_list/view.cljs

@@ -5,7 +5,6 @@
     [quo.components.markdown.text :as text]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
-    [reagent.core :as reagent]
     [schema.core :as schema]))
 
 (defn- info
@@ -22,18 +21,19 @@
      (if (string/blank? label) "-" label)]]])
 
 (defn- values
-  [{:keys [token-value fiat-value theme]}]
-  [rn/view {:style style/values-container}
-   [text/text
-    {:weight          :medium
-     :size            :paragraph-2
-     :number-of-lines 1}
-    token-value]
-   [text/text
-    {:style           (style/fiat-value theme)
-     :size            :paragraph-2
-     :number-of-lines 1}
-    fiat-value]])
+  [{:keys [token-value fiat-value]}]
+  (let [theme (quo.theme/use-theme-value)]
+    [rn/view {:style style/values-container}
+     [text/text
+      {:weight          :medium
+       :size            :paragraph-2
+       :number-of-lines 1}
+      token-value]
+     [text/text
+      {:style           (style/fiat-value theme)
+       :size            :paragraph-2
+       :number-of-lines 1}
+      fiat-value]]))
 
 (def ?schema
   [:=>
@@ -51,26 +51,21 @@
    :any])
 
 (defn- view-internal
-  []
-  (let [pressed?     (reagent/atom false)
-        on-press-in  #(reset! pressed? true)
-        on-press-out #(reset! pressed? false)]
-    (fn [{:keys [on-press state customization-color theme]
-          :as   props
-          :or   {customization-color :blue}}]
-      (let [internal-state (if @pressed?
-                             :pressed
-                             state)]
+  [{:keys [on-press state customization-color]
+    :as   props
+    :or   {customization-color :blue}}]
+  (let [theme                  (quo.theme/use-theme-value)
+        [pressed? set-pressed] (rn/use-state false)
+        on-press-in            (rn/use-callback #(set-pressed true))
+        on-press-out           (rn/use-callback #(set-pressed false))
+        internal-state         (if pressed? :pressed state)]
+    [rn/pressable
+     {:style               (style/container internal-state customization-color theme)
+      :on-press-in         on-press-in
+      :on-press-out        on-press-out
+      :on-press            on-press
+      :accessibility-label :network-list}
+     [info props]
+     [values props]]))
 
-        [rn/pressable
-         {:style               (style/container internal-state customization-color theme)
-          :on-press-in         on-press-in
-          :on-press-out        on-press-out
-          :on-press            on-press
-          :accessibility-label :network-list}
-         [info props]
-         [values props]]))))
-
-(def view
-  (quo.theme/with-theme
-   (schema/instrument #'view-internal ?schema)))
+(def view (schema/instrument #'view-internal ?schema))

src/quo/components/list_items/preview_list/view.cljs

@@ -76,12 +76,12 @@
     :blur?  overflow-label blur?}
    items    preview list items (only 4 items is required for preview)
   "
-  [{:keys [type size number blur?]} items]
+  [{:keys [type size number blur? container-style]} items]
   (let [size-key    (if (contains? properties/sizes size) size :size-24)
         number      (or number (count items))
         border-type (properties/border-type type)
         margin-left (get-in properties/sizes [size-key :margin-left])]
-    [rn/view {:style {:flex-direction :row}}
+    [rn/view {:style (assoc container-style :flex-direction :row)}
      (for [index (range (if (> number 4) 3 number))]
        ^{:key (str index number)}
        [list-item

src/quo/components/list_items/saved_address/view.cljs

@@ -7,70 +7,69 @@
     [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
-    [reagent.core :as reagent]
     [utils.address :as address]))
 
 (defn- left-container
-  [{:keys [blur? theme name ens address customization-color]}]
-  [rn/view {:style style/left-container}
-   [wallet-user-avatar/wallet-user-avatar
-    {:size                :size-32
-     :full-name           name
-     :customization-color customization-color}]
-   [rn/view {:style style/account-container}
-    [text/text
-     {:weight :semi-bold
-      :size   :paragraph-1
-      :style  style/name-text}
-     name]
-    [text/text {:size :paragraph-2}
-     [text/text
-      {:size   :paragraph-2
-       :weight :monospace
-       :style  (style/account-address blur? theme)}
-      (or ens (address/get-shortened-key address))]]]])
+  [{:keys [blur? name ens address customization-color]}]
+  (let [theme (quo.theme/use-theme-value)]
+    [rn/view {:style style/left-container}
+     [wallet-user-avatar/wallet-user-avatar
+      {:size                :size-32
+       :full-name           name
+       :customization-color customization-color}]
+     [rn/view {:style style/account-container}
+      [text/text
+       {:weight :semi-bold
+        :size   :paragraph-1
+        :style  style/name-text}
+       name]
+      [text/text {:size :paragraph-2}
+       [text/text
+        {:size   :paragraph-2
+         :weight :monospace
+         :style  (style/account-address blur? theme)}
+        (or ens (address/get-shortened-key address))]]]]))
 
-(defn- internal-view
-  []
-  (let [state       (reagent/atom :default)
-        active?     (atom false)
-        timer       (atom nil)
-        on-press-in (fn []
-                      (when-not (= @state :selected)
-                        (reset! timer (js/setTimeout #(reset! state :pressed) 100))))]
-    (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 (or (not active-state?) @active?) :default :active)]
-                             (when @timer (js/clearTimeout @timer))
-                             (reset! timer nil)
-                             (reset! active? (= new-state :active))
-                             (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 (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))
+(defn view
+  [{:keys [blur? user-props active-state? customization-color on-press on-options-press]
+    :or   {customization-color :blue
+           blur?               false}}]
+  (let [theme             (quo.theme/use-theme-value)
+        [state set-state] (rn/use-state :default)
+        active?           (rn/use-ref-atom false)
+        timer             (rn/use-ref-atom nil)
+        on-press-in       (rn/use-callback
+                           (fn []
+                             (when-not (= state :selected)
+                               (reset! timer (js/setTimeout #(set-state :pressed) 100))))
+                           [state])
+        on-press-out      (rn/use-callback
+                           (fn []
+                             (let [new-state (if (or (not active-state?) @active?) :default :active)]
+                               (when @timer (js/clearTimeout @timer))
+                               (reset! timer nil)
+                               (reset! active? (= new-state :active))
+                               (set-state new-state)))
+                           [active-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 (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))}]])]))

src/quo/components/list_items/saved_contact_address/schema.cljs

@@ -23,7 +23,6 @@
      [:contact-props ?contact]
      [:accounts {:optional true} ?accounts]
      [:on-press {:optional true} [:maybe fn?]]
-     [:theme :schema.common/theme]
      [:active-state? {:optional true} [:maybe :boolean]]
      [:customization-color {:optional true} [:maybe :schema.common/customization-color]]]]
    :any])

src/quo/components/list_items/saved_contact_address/view.cljs

@@ -9,91 +9,89 @@
     [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
-    [reagent.core :as reagent]
     [schema.core :as schema]
     [utils.address :as address]
     [utils.i18n :as i18n]))
 
 (defn- account
-  [{:keys [emoji name address customization-color theme]}]
-  [rn/view
-   {:accessibility-label :account-container
-    :style               style/account-container}
-   [account-avatar/view
-    {:emoji               emoji
-     :size                16
-     :customization-color customization-color}]
-   [text/text
-    {:size   :paragraph-2
-     :weight :monospace
-     :style  (style/account-name theme)}
-    name]
-   [rn/view {:style (style/dot-divider theme)}]
-   [text/text
-    {:size   :paragraph-2
-     :weight :monospace
-     :style  (style/account-address theme)}
-    (address/get-shortened-key address)]])
+  [{:keys [emoji name address customization-color]}]
+  (let [theme (quo.theme/use-theme-value)]
+    [rn/view
+     {:accessibility-label :account-container
+      :style               style/account-container}
+     [account-avatar/view
+      {:emoji               emoji
+       :size                16
+       :customization-color customization-color}]
+     [text/text
+      {:size   :paragraph-2
+       :weight :monospace
+       :style  (style/account-name theme)}
+      name]
+     [rn/view {:style (style/dot-divider theme)}]
+     [text/text
+      {:size   :paragraph-2
+       :weight :monospace
+       :style  (style/account-address theme)}
+      (address/get-shortened-key address)]]))
 
 (defn- internal-view
-  []
-  (let [state       (reagent/atom :default)
-        active?     (atom false)
-        timer       (atom nil)
-        on-press-in (fn []
-                      (when-not (= @state :selected)
-                        (reset! timer (js/setTimeout #(reset! state :pressed) 100))))]
-    (fn [{:keys [contact-props accounts active-state? customization-color on-press theme]
-          :or   {customization-color :blue
-                 accounts            []
-                 active-state?       true}}]
-      (let [accounts-count (count accounts)
-            account-props  (when (= accounts-count 1)
-                             (first accounts))
-            on-press-out   (fn []
+  [{:keys [contact-props accounts active-state? customization-color on-press]
+    :or   {customization-color :blue
+           accounts            []
+           active-state?       true}}]
+  (let [theme             (quo.theme/use-theme-value)
+        [state set-state] (rn/use-state :default)
+        active?           (rn/use-ref-atom false)
+        timer             (rn/use-ref-atom nil)
+        on-press          (rn/use-callback #(when on-press (on-press)))
+        on-press-in       (rn/use-callback
+                           (fn []
+                             (when-not (= state :selected)
+                               (reset! timer (js/setTimeout #(set-state :pressed) 100))))
+                           [state])
+        accounts-count    (count accounts)
+        account-props     (when (= accounts-count 1) (first accounts))
+        on-press-out      (rn/use-callback
+                           (fn []
                              (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)))]
-        [rn/pressable
-         {:style               (style/container
-                                {:state @state :customization-color customization-color})
-          :on-press-in         on-press-in
-          :on-press-out        on-press-out
-          :on-press            #(when on-press
-                                  (on-press))
-          :accessibility-label :container}
-         [rn/view {:style style/left-container}
-          [user-avatar/user-avatar (assoc contact-props :size :small)]
-          [rn/view {:style style/saved-contact-container}
-           [rn/view
-            {:style style/account-title-container}
-            [text/text
-             {:weight :semi-bold
-              :size   :paragraph-1}
-             (:full-name contact-props)]
-            [icon/icon :i/contact
-             {:container-style     style/contact-icon-container
-              :accessibility-label :contact-icon
-              :size                12
-              :color               (colors/theme-colors colors/primary-50 colors/primary-60 theme)
-              :color-2             colors/white}]]
-           (if account-props
-             [account (assoc account-props :theme theme)]
-             [text/text
-              {:accessibility-label :accounts-count
-               :size                :paragraph-2
-               :style               (style/accounts-count theme)}
-              (i18n/label :t/accounts-count {:count accounts-count})])]]
-         (when (> accounts-count 1)
-           [icon/icon :i/chevron-right
-            {:accessibility-label :check-icon
-             :size                20
-             :color               (colors/theme-colors colors/neutral-50
-                                                       colors/neutral-40
-                                                       theme)}])]))))
+                               (set-state new-state)))
+                           [active-state?])]
+    [rn/pressable
+     {:style               (style/container {:state state :customization-color customization-color})
+      :on-press-in         on-press-in
+      :on-press-out        on-press-out
+      :on-press            on-press
+      :accessibility-label :container}
+     [rn/view {:style style/left-container}
+      [user-avatar/user-avatar (assoc contact-props :size :small)]
+      [rn/view {:style style/saved-contact-container}
+       [rn/view
+        {:style style/account-title-container}
+        [text/text
+         {:weight :semi-bold
+          :size   :paragraph-1}
+         (:full-name contact-props)]
+        [icon/icon :i/contact
+         {:container-style     style/contact-icon-container
+          :accessibility-label :contact-icon
+          :size                12
+          :color               (colors/theme-colors colors/primary-50 colors/primary-60 theme)
+          :color-2             colors/white}]]
+       (if account-props
+         [account (assoc account-props :theme theme)]
+         [text/text
+          {:accessibility-label :accounts-count
+           :size                :paragraph-2
+           :style               (style/accounts-count theme)}
+          (i18n/label :t/accounts-count {:count accounts-count})])]]
+     (when (> accounts-count 1)
+       [icon/icon :i/chevron-right
+        {:accessibility-label :check-icon
+         :size                20
+         :color               (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}])]))
 
-(def view
-  (quo.theme/with-theme
-   (schema/instrument #'internal-view component-schema/?schema)))
+(def view (schema/instrument #'internal-view component-schema/?schema))

src/quo/components/list_items/token_network/schema.cljs

@@ -11,6 +11,5 @@
      [:networks [:* [:map [:source :schema.common/image-source]]]]
      [:on-press {:optional true} [:maybe fn?]]
      [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
-     [:state {:optional true} [:enum :default :active :selected]]
-     [:theme :schema.common/theme]]]
+     [:state {:optional true} [:enum :default :active :selected]]]]
    :any])

src/quo/components/list_items/token_network/view.cljs

@@ -8,7 +8,6 @@
     [quo.components.utilities.token.view :as token]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
-    [reagent.core :as reagent]
     [schema.core :as schema]))
 
 (defn- info
@@ -31,44 +30,40 @@
      networks]]])
 
 (defn- values
-  [{:keys [state token-value fiat-value customization-color theme]}]
-  (if (= state :selected)
-    [icon/icon :i/check
-     {:color               (style/check-color customization-color theme)
-      :accessibility-label :check-icon}]
-    [rn/view {:style style/values-container}
-     [text/text
-      {:weight          :medium
-       :size            :paragraph-2
-       :number-of-lines 1}
-      token-value]
-     [text/text
-      {:style           (style/fiat-value theme)
-       :size            :paragraph-2
-       :number-of-lines 1}
-      fiat-value]]))
+  [{:keys [state token-value fiat-value customization-color]}]
+  (let [theme (quo.theme/use-theme-value)]
+    (if (= state :selected)
+      [icon/icon :i/check
+       {:color               (style/check-color customization-color theme)
+        :accessibility-label :check-icon}]
+      [rn/view {:style style/values-container}
+       [text/text
+        {:weight          :medium
+         :size            :paragraph-2
+         :number-of-lines 1}
+        token-value]
+       [text/text
+        {:style           (style/fiat-value theme)
+         :size            :paragraph-2
+         :number-of-lines 1}
+        fiat-value]])))
 
 (defn- view-internal
-  []
-  (let [pressed?     (reagent/atom false)
-        on-press-in  #(reset! pressed? true)
-        on-press-out #(reset! pressed? false)]
-    (fn [{:keys [on-press state customization-color
-                 _token _networks _token-value _fiat-value theme]
-          :as   props
-          :or   {customization-color :blue}}]
-      (let [internal-state (if @pressed?
-                             :pressed
-                             state)]
-        [rn/pressable
-         {:style               (style/container internal-state customization-color theme)
-          :on-press-in         on-press-in
-          :on-press-out        on-press-out
-          :on-press            on-press
-          :accessibility-label :token-network}
-         [info props]
-         [values props]]))))
+  [{:keys [on-press state customization-color _token _networks _token-value _fiat-value]
+    :as   props
+    :or   {customization-color :blue}}]
+  (let [theme                  (quo.theme/use-theme-value)
+        [pressed? set-pressed] (rn/use-state false)
+        on-press-in            (rn/use-callback #(set-pressed true))
+        on-press-out           (rn/use-callback #(set-pressed false))
+        internal-state         (if pressed? :pressed state)]
+    [rn/pressable
+     {:style               (style/container internal-state customization-color theme)
+      :on-press-in         on-press-in
+      :on-press-out        on-press-out
+      :on-press            on-press
+      :accessibility-label :token-network}
+     [info props]
+     [values props]]))
 
-(def view
-  (quo.theme/with-theme
-   (schema/instrument #'view-internal component-schema/?schema)))
+(def view (schema/instrument #'view-internal component-schema/?schema))

src/quo/components/list_items/token_value/schema.cljs

@@ -17,7 +17,6 @@
      [:values ?values]
      [:on-press {:optional true} [:maybe fn?]]
      [:on-long-press {:optional true} [:maybe fn?]]
-     [:theme :schema.common/theme]
      [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
      [:metrics? {:optional true} [:maybe :boolean]]]]
    :any])

src/quo/components/list_items/token_value/view.cljs

@@ -9,64 +9,67 @@
     [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
-    [reagent.core :as reagent]
     [schema.core :as schema]))
 
 (defn- internal-view
-  []
-  (let [state (reagent/atom :default)]
-    (fn [{:keys [theme customization-color status token metrics? values on-press on-long-press
-                 token-name]}]
-      (let [bg-opacity                                                      (case @state
-                                                                              :active  10
-                                                                              :pressed 5
-                                                                              0)
-            {:keys [crypto-value fiat-value percentage-change fiat-change]} values]
-        [rn/pressable
-         {:style               (style/container customization-color bg-opacity theme)
-          :on-press-in         #(reset! state :pressed)
-          :on-press-out        #(reset! state :default)
-          :on-press            (fn []
-                                 (reset! state :active)
-                                 (js/setTimeout #(reset! state :default) 300)
-                                 on-press)
-          :on-long-press       on-long-press
-          :accessibility-label :container}
-         [rn/view
-          {:style {:flex-direction :row
-                   :align-items    :center
-                   :flex           1}}
-          [token/view {:token token :size :size-32}]
-          [rn/view {:style {:margin-left 8}}
-           [text/text {:weight :semi-bold} token-name]
-           [text/text
-            {:size  :paragraph-2
-             :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
-            (str crypto-value " " (if token (string/upper-case (clj->js token)) ""))]]]
-         [rn/view
-          {:style {:align-items     :flex-end
-                   :justify-content :space-between}}
-          [text/text
-           {:weight :medium
-            :size   :paragraph-2} fiat-value]
-          (when metrics?
-            [rn/view
-             {:style {:flex-direction :row
-                      :align-items    :center}}
-             [text/text
-              {:size  :paragraph-2
-               :style (style/metric-text status theme)} (str percentage-change "%")]
-             [rn/view {:style (style/dot-divider status theme)}]
-             [text/text
-              {:size  :paragraph-2
-               :style (style/metric-text status theme)} fiat-change]
-             (when (not= status :empty)
-               [rn/view
-                {:style               {:margin-left 4}
-                 :accessibility-label :arrow-icon}
-                [icon/icon (if (= status :positive) :i/positive :i/negative)
-                 (style/arrow-icon status theme)]])])]]))))
+  [{:keys [customization-color status token metrics? values on-press on-long-press token-name]}]
+  (let [theme                 (quo.theme/use-theme-value)
+        [state set-state]     (rn/use-state :default)
+        bg-opacity            (case state
+                                :active  10
+                                :pressed 5
+                                0)
+        {:keys [crypto-value
+                fiat-value
+                percentage-change
+                fiat-change]} values
+        on-press-in           (rn/use-callback #(set-state :pressed))
+        on-press-out          (rn/use-callback #(set-state :default))
+        on-press              (rn/use-callback
+                               (fn []
+                                 (set-state :active)
+                                 (js/setTimeout #(set-state :default) 300)
+                                 on-press))]
+    [rn/pressable
+     {:style               (style/container customization-color bg-opacity theme)
+      :on-press-in         on-press-in
+      :on-press-out        on-press-out
+      :on-press            on-press
+      :on-long-press       on-long-press
+      :accessibility-label :container}
+     [rn/view
+      {:style {:flex-direction :row
+               :align-items    :center
+               :flex           1}}
+      [token/view {:token token :size :size-32}]
+      [rn/view {:style {:margin-left 8}}
+       [text/text {:weight :semi-bold} token-name]
+       [text/text
+        {:size  :paragraph-2
+         :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
+        (str crypto-value " " (if token (string/upper-case (clj->js token)) ""))]]]
+     [rn/view
+      {:style {:align-items     :flex-end
+               :justify-content :space-between}}
+      [text/text
+       {:weight :medium
+        :size   :paragraph-2} fiat-value]
+      (when metrics?
+        [rn/view
+         {:style {:flex-direction :row
+                  :align-items    :center}}
+         [text/text
+          {:size  :paragraph-2
+           :style (style/metric-text status theme)} (str percentage-change "%")]
+         [rn/view {:style (style/dot-divider status theme)}]
+         [text/text
+          {:size  :paragraph-2
+           :style (style/metric-text status theme)} fiat-change]
+         (when (not= status :empty)
+           [rn/view
+            {:style               {:margin-left 4}
+             :accessibility-label :arrow-icon}
+            [icon/icon (if (= status :positive) :i/positive :i/negative)
+             (style/arrow-icon status theme)]])])]]))
 
-(def view
-  (quo.theme/with-theme
-   (schema/instrument #'internal-view component-schema/?schema)))
+(def view (schema/instrument #'internal-view component-schema/?schema))

src/quo/components/list_items/user.cljs

@@ -18,9 +18,9 @@
    :align-items        :center})
 
 (defn action-icon
-  [{:keys [type on-press on-check disabled? checked?]} theme]
+  [{:keys [type on-press on-check disabled? checked?]} customization-color theme]
   [rn/touchable-opacity
-   {:on-press (when on-press on-press)}
+   {:on-press on-press}
    (case type
      :options
      [icons/icon :i/options
@@ -30,6 +30,7 @@
      [selectors/view
       {:type                :checkbox
        :checked?            checked?
+       :customization-color customization-color
        :accessibility-label :user-list-toggle-check
        :disabled?           disabled?
        :on-change           (when on-check on-check)}]
@@ -68,4 +69,4 @@
          :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
         short-chat-key])]
     (when accessory
-      [action-icon accessory theme])]])
+      [action-icon accessory customization-color theme])]])

src/quo/components/messages/gap.cljs

@@ -5,8 +5,7 @@
     [quo.components.markdown.text :as text]
     [quo.foundations.colors :as colors]
     [quo.theme :as theme]
-    [react-native.core :as rn]
-    [reagent.core :as reagent]))
+    [react-native.core :as rn]))
 
 ;;; helpers
 (def themes
@@ -137,24 +136,25 @@
            style
            on-press
            warning-label]}]
-  (let [body-height (reagent/atom nil)]
-    (fn []
-      [rn/view
-       {:on-layout #(reset! body-height (oget % "nativeEvent.layout.height"))
-        :overflow  :hidden
-        :flex      1}
-       [hborder {:type :top}]
-       [hborder {:type :bottom}]
-       [rn/view
-        (merge {:width            "100%"
-                :background-color (get-color :background)
-                :flex-direction   :row
-                :padding          20
-                :padding-left     31
-                :margin-vertical  4}
-               style)
+  (let [[body-height set-body-height] (rn/use-state nil)
+        on-layout                     (rn/use-callback #(set-body-height
+                                                         (oget % "nativeEvent.layout.height")))]
+    [rn/view
+     {:on-layout on-layout
+      :overflow  :hidden
+      :flex      1}
+     [hborder {:type :top}]
+     [hborder {:type :bottom}]
+     [rn/view
+      (merge {:width            "100%"
+              :background-color (get-color :background)
+              :flex-direction   :row
+              :padding          20
+              :padding-left     31
+              :margin-vertical  4}
+             style)
 
-        [timeline]
-        [body timestamp-far timestamp-near on-info-button-pressed on-press warning-label]]
-       [vborder :left body-height]
-       [vborder :right body-height]])))
+      [timeline]
+      [body timestamp-far timestamp-near on-info-button-pressed on-press warning-label]]
+     [vborder :left body-height]
+     [vborder :right body-height]]))

src/quo/components/navigation/page_nav/view.cljs

@@ -35,7 +35,7 @@
              :on-press            on-press
              :background          (if behind-overlay?
                                     :blur
-                                    (button-properties/backgrounds background))
+                                    (when (button-properties/backgrounds background) background))
              :accessibility-label accessibility-label}
             icon-name])]
         children))

src/quo/components/numbered_keyboard/keyboard_key/view.cljs

@@ -4,50 +4,48 @@
     [quo.components.markdown.text :as text]
     [quo.components.numbered-keyboard.keyboard-key.style :as style]
     [quo.theme :as quo.theme]
-    [react-native.core :as rn]
-    [reagent.core :as reagent]))
+    [react-native.core :as rn]))
 
 (defn- label->accessibility-label
   [label]
   (let [label-name (if (keyword? label) (name label) label)]
     (keyword (str "keyboard-key-" label-name))))
 
-(defn- view-internal
-  []
-  (let [pressed? (reagent/atom false)]
-    (fn [{:keys [disabled? theme blur? on-press on-long-press type]} label]
-      (let [label-color      (style/get-label-color disabled? theme blur?)
-            background-color (style/toggle-background-color @pressed? blur? theme)]
-        [rn/pressable
-         {:accessibility-label     (label->accessibility-label label)
-          :disabled                (or disabled? (not label))
-          :on-press                (fn []
-                                     (when on-press
-                                       (on-press label)))
-          :on-long-press           (fn []
-                                     (when (fn? on-long-press)
-                                       (on-long-press label)))
-          :allow-multiple-presses? true
-          :on-press-in             #(reset! pressed? true)
-          :on-press-out            #(reset! pressed? false)
-          :hit-slop                {:top 8 :bottom 8 :left 25 :right 25}
-          :style                   (style/container background-color)}
-         (case type
-           :key             [icons/icon
-                             label
-                             {:color               label-color
-                              :accessibility-label :icon-label}]
-           :digit           [text/text
-                             {:accessibility-label :text-label
-                              :weight              :regular
-                              :size                :heading-1
-                              :style               {:color label-color}}
-                             label]
-           :derivation-path [icons/icon
-                             :i/derivation-path
-                             {:color               label-color
-                              :size                32
-                              :accessibility-label :derivation-path-label}]
-           nil)]))))
-
-(def view (quo.theme/with-theme view-internal))
+(defn view
+  [{:keys [disabled? blur? on-press on-long-press type]} label]
+  (let [theme                   (quo.theme/use-theme-value)
+        [pressed? set-pressed?] (rn/use-state false)
+        on-press                (rn/use-callback #(when on-press (on-press label)) [label])
+        on-long-press           (rn/use-callback #(when (fn? on-long-press) (on-long-press label))
+                                                 [label])
+        on-press-in             (rn/use-callback #(set-pressed? true))
+        on-press-out            (rn/use-callback #(set-pressed? false))
+        label-color             (style/get-label-color disabled? theme blur?)
+        background-color        (style/toggle-background-color pressed? blur? theme)]
+    [rn/pressable
+     {:accessibility-label     (label->accessibility-label label)
+      :disabled                (or disabled? (not label))
+      :on-press                on-press
+      :on-long-press           on-long-press
+      :allow-multiple-presses? true
+      :on-press-in             on-press-in
+      :on-press-out            on-press-out
+      :hit-slop                {:top 8 :bottom 8 :left 25 :right 25}
+      :style                   (style/container background-color)}
+     (case type
+       :key             [icons/icon
+                         label
+                         {:color               label-color
+                          :accessibility-label :icon-label}]
+       :digit           [text/text
+                         {:accessibility-label :text-label
+                          :weight              :regular
+                          :size                :heading-1
+                          :style               {:color label-color}}
+                         label]
+       :derivation-path [icons/icon
+                         :i/derivation-path
+                         {:color               label-color
+                          :size                32
+                          :accessibility-label :derivation-path-label}]
+       nil)]))

src/quo/components/profile/collectible/view.cljs

@@ -1,9 +1,9 @@
 (ns quo.components.profile.collectible.view
   (:require
+    [clojure.string :as string]
     [quo.components.markdown.text :as text]
     [quo.components.profile.collectible.style :as style]
-    [react-native.core :as rn]
-    [react-native.svg :as svg]))
+    [react-native.core :as rn]))
 
 (defn remaining-tiles
   [amount]
@@ -19,11 +19,28 @@
   (let [svg?        (and (map? resource) (:svg? resource))
         image-style (style/tile-style-by-size size)]
     [rn/view {:style style}
-     (if svg?
+     (cond
+       svg?
        [rn/view
-        {:style {:border-radius (:border-radius image-style)
-                 :overflow      :hidden}}
-        [svg/svg-uri (assoc image-style :uri (:uri resource))]]
+        {:style (assoc image-style
+                       :border-radius    (:border-radius image-style)
+                       :overflow         :hidden
+                       :justify-content  :center
+                       :align-items      :center
+                       :background-color :lightblue)}
+        [text/text "SVG Content"]]
+
+       (or (string/blank? resource) (string/blank? (:uri resource)))
+       [rn/view
+        {:style (assoc image-style
+                       :border-radius    (:border-radius image-style)
+                       :overflow         :hidden
+                       :justify-content  :center
+                       :align-items      :center
+                       :background-color :lightgray)}
+        [text/text "Missing image"]]
+
+       :else
        ;; NOTE: using react-native-fast-image here causes a crash on devices when used inside a
        ;; large flatlist. The library seems to have issues with memory consumption when used with
        ;; large images/GIFs.