Add possibility to configure network icon in data-item component

.carve_ignore

@@ -95,6 +95,7 @@ react-native.fs/unlink
 react-native.fs/file-exists?
 status-im.ui.components.colors/white
 status-im.ui.components.colors/black
+status-im.transport.core-test/messages
 status-im.ui.components.core/animated-header
 status-im.ui.components.core/safe-area-provider
 status-im.ui.components.core/safe-area-consumer

.zprintrc

@@ -32,7 +32,6 @@
   "letsubs"         :binding
   "with-let"        "let"
   "reg-event-fx"    :arg1-pair
-  "reg-fx"          :arg1-pair
   "testing"         :arg1-body
   "deftest-sub"     :arg1-body
   "wait-for"        :arg1-body

android/app/src/main/java/im/status/ethereum/StatusOkHttpClientFactory.java

@@ -27,23 +27,18 @@ class StatusOkHttpClientFactory implements OkHttpClientFactory {
       X509Certificate cert = null;
       HandshakeCertificates clientCertificates;
       String certPem = "";
-      // Get TLS PEM certificate from status-go
-      try {
-         // induce half second sleep because sometimes a cert is not immediately available
-         // TODO : remove sleep if App no longer crashes on Android 10 devices with
-         // java.lang.RuntimeException: Could not invoke WebSocketModule.connect
-         Thread.sleep(500);
-         certPem = getCertificatePem();
-      } catch(Exception e) {
-          Log.e(TAG, "Could not getImageTLSCert",e);
-      }
 
-      if (certPem.isEmpty()) {
-          Log.e(TAG, "Certificate is empty, cannot create OkHttpClient without a valid certificate");
-          return null;
-      }
-
-      // Convert PEM certificate string to X509Certificate object
+    // Get TLS PEM certificate from status-go
+    try {
+        // induce half second sleep because sometimes a cert is not immediately available
+        // TODO : remove sleep if App no longer crashes on Android 10 devices with
+        // java.lang.RuntimeException: Could not invoke WebSocketModule.connect
+        Thread.sleep(500);
+        certPem = StatusPackage.getImageTLSCert();
+    } catch(Exception e) {
+        Log.e(TAG, "Could not getImageTLSCert",e);
+    }
+    // Convert PEM certificate string to X509Certificate object
     try {
       // induce half second sleep because sometimes a cert is not immediately available
       // TODO : remove sleep if App no longer crashes on Android 10 devices
@@ -79,17 +74,4 @@ class StatusOkHttpClientFactory implements OkHttpClientFactory {
       return null;
     }
   }
-    private String getCertificatePem() {
-        try {
-            String certPem = StatusPackage.getImageTLSCert();
-            if (certPem == null || certPem.trim().isEmpty()) {
-                Log.e(TAG, "Certificate PEM string is null or empty");
-                return "";
-            }
-            return certPem;
-        } catch (Exception e) {
-            Log.e(TAG, "Could not getImageTLSCert", e);
-            return "";
-        }
-    }
 }

ci/Jenkinsfile.ios

@@ -77,6 +77,7 @@ pipeline {
           }
         }
         stage('Upload') {
+          when { expression { !utils.isReleaseBuild() } }
           steps { script {
             env.DIAWI_URL = ios.uploadToDiawi()
             env.PKG_URL = env.DIAWI_URL

doc/new-guidelines.md

@@ -716,7 +716,7 @@ src
 
 - `src/js`: Raw Javascript files, e.g. React Native Reanimated worklets.
 - `src/mocks`: Plumbing configuration to be able to run tests.
-- `src/quo/`: The component library for Status Mobile. [Read more...](../src/quo/README.md)
+- `src/quo/`: The component library for Status Mobile.
 - `src/react_native/`: Contains only low-level constructs to help React Native
   work in tandem with Clojure(Script).
 - `src/status_im2/`: Directory where we try to be as strict as possible about

package.json

@@ -94,7 +94,7 @@
     "process": "0.11.10",
     "react-test-renderer": "18.0.0",
     "rn-snoopy": "git+https://github.com/status-im/rn-snoopy.git#refs/tags/v2.0.2-status",
-    "shadow-cljs": "2.26.2"
+    "shadow-cljs": "2.25.0"
   },
   "binary": {
     "module_name": "status_nodejs_addon",

shadow-cljs.edn

@@ -12,10 +12,9 @@
                 [metosin/malli "0.13.0"]
 
                 ;; Dev dependencies
-                [refactor-nrepl "3.9.1"]
-                [cider/cider-nrepl "0.31.0"]
+                [refactor-nrepl "2.5.0"]
+                [cider/cider-nrepl "0.25.3"]
                 [cider/piggieback "0.4.1"]
-                [org.slf4j/slf4j-nop "2.0.9"]
                 [re-frisk-remote "1.6.0"]
 
                 ;; Use the same version specified in the Nix dependency.

src/mocks/js_dependencies.cljs

@@ -49,7 +49,6 @@
     :Text                     {}
     :StatusBar                {}
     :ScrollView               {}
-    :SafeAreaView             {}
     :KeyboardAvoidingView     {}
     :TextInput                {}
     :Image                    {}

src/quo/README.md

@@ -116,17 +116,6 @@ rendered. We use [React Native Testing Library](https://callstack.github.io/reac
 There are dozens of examples in the repository, so use them as a reference. A
 good and complete example is [quo.components.avatars.user-avatar.component-spec](/src/quo/components/avatars/user_avatar/component_spec.cljs)
 
-### No-props test
-
-When writing tests for the component that has props, please add one test that covers situation when props aren't passed. Because even if component not showing anything meaningful without props, it shouldn't crash.
-
-```clojure
-(h/describe "Transaction Progress"
-  (h/test "component renders without props"
-    (h/render [quo/transaction-progress {}])
-    (h/is-truthy (h/get-by-label-text :transaction-progress)))
-```
-
 ## Do not couple the library with re-frame
 
 Don't use re-frame inside this library (e.g. dispatch & subscribe). If a

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

@@ -30,6 +30,6 @@
       {:accessibility-label      :account-emoji
        :adjusts-font-size-to-fit true
        :style                    {:font-size emoji-size}}
-      (when emoji (string/trim emoji))]]))
+      (string/trim emoji)]]))
 
 (def view (quo.theme/with-theme view-internal))

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

@@ -67,7 +67,7 @@
      [rn/text
       {:style               (style/emoji-size size)
        :accessibility-label :emoji}
-      (when emoji (string/trim emoji))])
+      (string/trim emoji)])
    [lock locked? size theme]])
 
 (def view (quo.theme/with-theme view-internal))

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

@@ -2,30 +2,26 @@
   (:require [quo.foundations.colors :as colors]))
 
 (defn- circle-color
-  [customization-color neutral? theme]
-  (if neutral?
-    (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
-    (colors/custom-color customization-color 50 20)))
+  [customization-color]
+  (colors/custom-color customization-color 50 20))
 
 (defn- text-color
-  [customization-color neutral? theme]
-  (if neutral?
-    (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
-    (colors/theme-colors
-     (colors/custom-color customization-color 50)
-     (colors/custom-color customization-color 60)
-     theme)))
+  [customization-color theme]
+  (colors/theme-colors
+   (colors/custom-color customization-color 50)
+   (colors/custom-color customization-color 60)
+   theme))
 
 (defn container
-  [circle-size customization-color neutral? theme]
+  [circle-size customization-color]
   {:width            circle-size
    :height           circle-size
    :border-radius    circle-size
    :text-align       :center
    :justify-content  :center
    :align-items      :center
-   :background-color (circle-color customization-color neutral? theme)})
+   :background-color (circle-color customization-color)})
 
 (defn text
-  [customization-color neutral? theme]
-  {:color (text-color customization-color neutral? theme)})
+  [customization-color theme]
+  {:color (text-color customization-color theme)})

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

@@ -1,6 +1,5 @@
 (ns quo.components.avatars.wallet-user-avatar.view
-  (:require [clojure.string :as string]
-            [quo.components.avatars.wallet-user-avatar.style :as style]
+  (:require [quo.components.avatars.wallet-user-avatar.style :as style]
             [quo.components.markdown.text :as text]
             [quo.theme :as quo.theme]
             [react-native.core :as rn]
@@ -41,21 +40,18 @@
   :customization-color  - keyword (default: nil) - color of the avatar
   :size   - keyword (default: last element of properties object) - size of the
   avatar
-  :monospace? - boolean (default: false) - use monospace font
-  :lowercase? - boolean (default: false) - lowercase text
-  :neutral? - boolean (default: false) - use neutral colors variant"
-  [{:keys [full-name customization-color size theme monospace? lowercase? neutral?]
+  :monospace? - boolean (default: false) - use monospace font"
+  [{:keys [full-name customization-color size theme monospace?]
     :or   {size biggest-possible}}]
   (let [circle-size (:size (size properties))
-        small?      (check-if-size-small size)
-        initials    (utils.string/get-initials full-name (if small? 1 2))]
+        small?      (check-if-size-small size)]
     [rn/view
-     {:style (style/container circle-size customization-color neutral? theme)}
+     {:style (style/container circle-size customization-color)}
      [text/text
       {:accessibility-label :wallet-user-avatar
        :size                (:font-size (size properties))
        :weight              (if monospace? :monospace (:font-weight (size properties)))
-       :style               (style/text customization-color neutral? theme)}
-      (if (and initials lowercase?) (string/lower-case initials) initials)]]))
+       :style               (style/text customization-color theme)}
+      (utils.string/get-initials full-name (if small? 1 2))]]))
 
 (def wallet-user-avatar (quo.theme/with-theme view-internal))

src/quo/components/dropdowns/dropdown_input/component_spec.cljs

@@ -1,56 +0,0 @@
-(ns quo.components.dropdowns.dropdown-input.component-spec
-  (:require
-    [quo.components.dropdowns.dropdown-input.view :as dropdown-input]
-    [test-helpers.component :as h]))
-
-(h/describe "Dropdown Input"
-
-  (h/test "default render"
-    (let [header-label "Label"
-          label        "Dropdown"]
-      (h/render [dropdown-input/view
-                 {:label? true
-                  :header-label
-                  header-label} label])
-      (h/is-truthy (h/get-by-label-text :dropdown))
-      (h/is-truthy (h/get-by-text header-label))
-      (h/is-truthy (h/get-by-text label))))
-
-  (h/test "render with icon"
-    (let [label "Dropdown"]
-      (h/render [dropdown-input/view
-                 {:icon? true
-                  :icon-name
-                  :i/wallet
-                  :label? true}
-                 label])
-      (h/is-truthy (h/get-by-label-text :dropdown))
-      (h/is-truthy (h/get-by-label-text :left-icon))
-      (h/is-truthy (h/get-by-text label))))
-
-  (h/test "render in active state"
-    (let [label "Dropdown"]
-      (h/render [dropdown-input/view
-                 {:state :active
-                  :label?
-                  true} label])
-      (h/is-truthy (h/get-by-label-text :dropdown))
-      (h/is-truthy (h/get-by-label-text :right-icon "Expecting active state icon"))))
-
-  (h/test "render in disabled state"
-    (let [label "Dropdown"]
-      (h/render [dropdown-input/view
-                 {:state  :disabled
-                  :label? true} label])
-      (h/is-truthy (h/get-by-label-text :dropdown))
-      (h/is-disabled (h/get-by-text label "Dropdown should be disabled in disabled state"))))
-
-  (h/test "on-press"
-    (let [event (h/mock-fn)
-          label "Dropdown"]
-      (h/render [dropdown-input/view
-                 {:on-press event
-                  :label?
-                  true} label])
-      (h/fire-event :press (h/get-by-text label))
-      (h/was-called event))))

src/quo/components/dropdowns/dropdown_input/properties.cljs

@@ -1,49 +0,0 @@
-(ns quo.components.dropdowns.dropdown-input.properties
-  (:require
-    [quo.foundations.colors :as colors]))
-
-(def icon-size 20)
-
-(defn- grey-blur
-  [theme active?]
-  {:left-icon-color    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
-   :right-icon-color   (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
-   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
-   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
-   :border-color       (if active?
-                         (colors/theme-colors colors/neutral-80-opa-20
-                                              colors/white-opa-40
-                                              theme)
-                         (colors/theme-colors colors/neutral-80-opa-10
-                                              colors/white-opa-10
-                                              theme))})
-
-(defn- outline
-  [theme active?]
-  {:left-icon-color    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
-   :right-icon-color   (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
-   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
-   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
-   :border-color       (if active?
-                         (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
-                         (colors/theme-colors colors/neutral-30 colors/neutral-70 theme))})
-
-(defn- grey
-  [theme active?]
-  {:left-icon-color    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
-   :right-icon-color   (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
-   :right-icon-color-2 (colors/theme-colors colors/neutral-100 colors/white theme)
-   :label-color        (colors/theme-colors colors/neutral-100 colors/white theme)
-   :border-color       (if active?
-                         (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
-                         (colors/theme-colors colors/neutral-20
-                                              colors/neutral-60
-                                              theme))})
-
-(defn get-colors
-  [{:keys [theme state blur?]}]
-  (let [active? (= state :active)]
-    (cond
-      blur?            (grey-blur theme active?)
-      (= theme :dark)  (outline theme active?)
-      (= theme :light) (grey theme active?))))

src/quo/components/dropdowns/dropdown_input/style.cljs

@@ -1,62 +0,0 @@
-(ns quo.components.dropdowns.dropdown-input.style
-  (:require
-    [quo.foundations.colors :as colors]))
-
-(def gap 8)
-
-(def blur-view
-  {:position :absolute
-   :top      0
-   :left     0
-   :right    0
-   :bottom   0})
-
-(def left-icon
-  {:margin-right gap})
-
-(defn right-icon
-  [theme]
-  {:color        (colors/theme-colors colors/neutral-100 colors/white theme)
-   :margin-right gap})
-
-(defn header-label
-  [theme blur?]
-  {:color         (if blur?
-                    (colors/theme-colors colors/neutral-80-opa-40
-                                         colors/white-opa-70
-                                         theme)
-                    (colors/theme-colors colors/neutral-50
-                                         colors/neutral-40
-                                         theme))
-   :margin-bottom gap})
-
-(def root-container
-  {:width  "100%"
-   :height 40})
-
-(defn container
-  [{:keys [background-color border-color]}
-   {:keys [icon? state]}]
-  (cond-> {:align-items      :center
-           :justify-content  :space-between
-           :flex-direction   :row
-           :padding-vertical 9
-           :padding-left     16
-           :padding-right    12
-           :overflow         :hidden
-           :background-color background-color
-           :border-radius    12}
-
-    icon?
-    (assoc :padding-left 12)
-
-    border-color
-    (assoc :border-color border-color
-           :border-width 1)
-
-    (= state :disabled)
-    (assoc :opacity 0.3)))
-
-(def right-half-container
-  {:flex-direction :row
-   :align-items    :center})

src/quo/components/dropdowns/dropdown_input/view.cljs

@@ -1,68 +0,0 @@
-(ns quo.components.dropdowns.dropdown-input.view
-  (:require
-    [quo.components.dropdowns.dropdown-input.properties :as properties]
-    [quo.components.dropdowns.dropdown-input.style :as style]
-    [quo.components.icon :as icon]
-    [quo.components.markdown.text :as text]
-    [quo.theme :as theme]
-    [react-native.core :as rn]))
-
-(defn- view-internal
-  [{:keys [state theme on-press icon?
-           label? blur?
-           accessibility-label header-label]
-    :or   {state        :default
-           icon?        true
-           label?       true
-           blur?        false
-           header-label "Label"}
-    :as   props}
-   label]
-  (let [{:keys [left-icon-color right-icon-color right-icon-color-2]
-         :as   colors} (properties/get-colors props)
-        right-icon     (if (= state :active) :i/pullup :i/dropdown)]
-    [rn/view
-     {:style style/root-container}
-     (when label?
-       [text/text
-        {:size   :paragraph-2
-         :weight :medium
-         :align  :left
-         :style  (style/header-label theme blur?)} header-label])
-     [rn/pressable
-      {:accessibility-label (or accessibility-label :dropdown)
-       :disabled            (= state :disabled)
-       :on-press            on-press
-       :style               (style/container colors props)}
-      [rn/view
-       {:style style/right-half-container}
-       (when icon?
-         [icon/icon
-          :i/placeholder
-          {:accessibility-label :left-icon
-           :color               left-icon-color
-           :size                properties/icon-size
-           :container-style     style/left-icon}])
-       [text/text
-        {:size            :paragraph-1
-         :weight          :regular
-         :number-of-lines 1
-         :style           (style/right-icon theme)}
-        label]]
-      [icon/icon
-       right-icon
-       {:size                properties/icon-size
-        :accessibility-label :right-icon
-        :color               right-icon-color
-        :color-2             right-icon-color-2}]]]))
-
-(def view
-  "Props:
-    - state: :default (default) | :active | :disabled
-    - label: string
-    - header-label: string
-    - icon?: boolean
-    - label?: boolean
-    - blur?: boolean
-    - on-press: function"
-  (theme/with-theme view-internal))

src/quo/components/info/info_message.cljs

@@ -11,7 +11,6 @@
   (case k
     :success (colors/resolve-color :success theme)
     :error   (colors/resolve-color :danger theme)
-    :warning (colors/resolve-color :warning theme)
     (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
 
 (defn view-internal

src/quo/components/ios/drawer_bar/style.cljs

@@ -1,17 +0,0 @@
-(ns quo.components.ios.drawer-bar.style
-  (:require
-    [quo.foundations.colors :as colors]
-    [quo.theme :as theme]))
-
-(def handle-container
-  {:padding-vertical 8
-   :height           20
-   :align-items      :center})
-
-(defn handle
-  [{:keys [theme]}]
-  {:width            32
-   :height           4
-   :background-color (colors/theme-colors colors/neutral-100 colors/white theme)
-   :opacity          (theme/theme-value 0.05 0.1 theme)
-   :border-radius    100})

src/quo/components/ios/drawer_bar/view.cljs

@@ -1,12 +0,0 @@
-(ns quo.components.ios.drawer-bar.view
-  (:require
-    [quo.components.ios.drawer-bar.style :as style]
-    [quo.theme :as quo.theme]
-    [react-native.core :as rn]))
-
-(defn- view-internal
-  [props]
-  [rn/view {:style style/handle-container}
-   [rn/view {:style (style/handle props)}]])
-
-(def view (quo.theme/with-theme view-internal))

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

@@ -13,7 +13,7 @@
     (h/render [account/view])
     (h/fire-event :on-press-in (h/get-by-label-text :container))
     (h/wait-for #(h/has-style (h/query-by-label-text :container)
-                              {:backgroundColor (colors/resolve-color :blue :light 5)})))
+                              {:backgroundColor (colors/custom-color :blue 50 5)})))
 
   (h/test "on-press-in changes state to :pressed with blur? enabled"
     (h/render [account/view {:blur? true}])
@@ -21,26 +21,31 @@
     (h/wait-for #(h/has-style (h/query-by-label-text :container)
                               {:backgroundColor colors/white-opa-5})))
 
-  (h/test "render with state :active"
-    (h/render [account/view {:state :active}])
-    (h/has-style (h/query-by-label-text :container)
-                 {:backgroundColor (colors/resolve-color :blue :light 10)}))
+  (h/test "on-press-out changes state to :active"
+    (h/render [account/view])
+    (h/fire-event :on-press-in (h/get-by-label-text :container))
+    (h/fire-event :on-press-out (h/get-by-label-text :container))
+    (h/wait-for #(h/has-style (h/query-by-label-text :container)
+                              {:backgroundColor (colors/custom-color :blue 50 10)})))
 
-  (h/test "render with state :active and blur? enabled"
-    (h/render [account/view
-               {:blur? true
-                :state :active}])
-    (h/has-style (h/query-by-label-text :container)
-                 {:backgroundColor colors/white-opa-10}))
+  (h/test "on-press-out changes state to :active with blur? enabled"
+    (h/render [account/view {:blur? true}])
+    (h/fire-event :on-press-in (h/get-by-label-text :container))
+    (h/fire-event :on-press-out (h/get-by-label-text :container))
+    (h/wait-for #(h/has-style (h/query-by-label-text :container)
+                              {:backgroundColor colors/white-opa-10})))
 
-  (h/test "render with state :selected"
-    (h/render [account/view {:state :selected}])
-    (h/is-truthy (h/query-by-label-text :check-icon)))
+  (h/test "on-press-out changes state to :selected"
+    (h/render [account/view {:selectable? true}])
+    (h/fire-event :on-press-in (h/get-by-label-text :container))
+    (h/fire-event :on-press-out (h/get-by-label-text :container))
+    (h/wait-for #(h/is-truthy (h/query-by-label-text :check-icon))))
 
-  (h/test "calls on-press"
+  (h/test "on-press-out calls on-press"
     (let [on-press (h/mock-fn)]
       (h/render [account/view {:on-press on-press}])
-      (h/fire-event :on-press (h/get-by-label-text :container))
+      (h/fire-event :on-press-in (h/get-by-label-text :container))
+      (h/fire-event :on-press-out (h/get-by-label-text :container))
       (h/was-called on-press)))
 
   (h/test "renders token props if type :tag"

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

@@ -3,12 +3,12 @@
     [quo.foundations.colors :as colors]))
 
 (defn- background-color
-  [{:keys [state pressed? blur? customization-color]}]
-  (cond (or pressed? (= state :selected))
-        (if blur? colors/white-opa-5 (colors/resolve-color customization-color :light 5))
+  [{:keys [state blur? customization-color]}]
+  (cond (or (= state :pressed) (= state :selected))
+        (if blur? colors/white-opa-5 (colors/custom-color customization-color 50 5))
         (= state :active)
-        (if blur? colors/white-opa-10 (colors/resolve-color customization-color :light 10))
-        (and pressed? blur?) colors/white-opa-10
+        (if blur? colors/white-opa-10 (colors/custom-color customization-color 50 10))
+        (and (= state :pressed) blur?) colors/white-opa-10
         :else :transparent))
 
 (defn container

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

@@ -94,42 +94,62 @@
    [icon/icon :i/check
     {:color (if blur?
               colors/white
-              (colors/resolve-color customization-color theme))}]])
+              (colors/theme-colors (colors/custom-color customization-color 50)
+                                   (colors/custom-color customization-color 60)
+                                   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]
+(defn- f-internal-view
+  []
+  (let [state               (reagent/atom :default)
+        active-or-selected? (atom false)
+        timer               (atom nil)
+        on-press-in         (fn []
+                              (when-not (= @state :selected)
+                                (reset! timer (js/setTimeout #(reset! state :pressed) 100))))]
+    (fn [{:keys [type selectable? 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]
+      (let [on-press-out (fn []
+                           (let [new-state (if @active-or-selected?
+                                             :default
+                                             (if (and (= type :default) selectable?)
+                                               :selected
+                                               :active))]
+                             (when @timer (js/clearTimeout @timer))
+                             (reset! timer nil)
+                             (reset! active-or-selected? (or (= new-state :active)
+                                                             (= new-state :selected)))
+                             (reset! state new-state)
+                             (when on-press
+                               (on-press))))]
+        (rn/use-effect
+         #(cond (and selectable? (= type :default) (= @state :active))         (reset! state :selected)
+                (and (not selectable?) (= type :default) (= @state :selected)) (reset! state :active))
+         [selectable?])
+        [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
+          :accessibility-label :container}
+         [account-view props]
+         [rn/view {:style (when (= type :tag) style/token-tag-container)}
+          (when (or (= type :balance-neutral)
+                    (= type :balance-negative)
+                    (= type :balance-positive))
+            [balance-view props])
+          (when (= type :tag)
+            [token-tag props])
+          (when (= type :action)
+            [options-button props])
+          (when (and (= type :default)
+                     (= @state :selected))
+            [check-icon props])]]))))
 
-          (= type :tag)
-          [token-tag props]
-
-          (= type :action)
-          [options-button props]
-
-          (and (= type :default) (= state :selected))
-          [check-icon props])]])))
+(defn- internal-view
+  [props]
+  [:f> f-internal-view props])
 
 (def view (quo.theme/with-theme internal-view))

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

@@ -13,11 +13,11 @@
   [{:keys [theme address networks blur?]}]
   [rn/view {:style style/left-container}
    [wallet-user-avatar/wallet-user-avatar
-    {:size       :size-32
-     :full-name  "0 x"
+    {:size       :medium
+     :f-name     "0"
+     :l-name     "x"
      :monospace? true
-     :lowercase? true
-     :neutral?   true}]
+     :uppercase? false}]
    [rn/view {:style style/account-container}
     [text/text {:size :paragraph-1}
      (map (fn [network]
@@ -25,8 +25,8 @@
             [text/text
              {:size   :paragraph-1
               :weight :semi-bold
-              :style  {:color (colors/resolve-color (:network-name network) theme)}}
-             (str (:short-name network) ":")])
+              :style  {:color (colors/resolve-color network theme)}}
+             (str (subs (name network) 0 3) ":")])
           networks)
      [text/text
       {:size   :paragraph-1

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

@@ -1,5 +1,6 @@
 (ns quo.components.list-items.saved-address.view
   (:require
+    [clojure.string :as string]
     [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
     [quo.components.icon :as icon]
     [quo.components.list-items.saved-address.style :as style]
@@ -12,23 +13,27 @@
 
 (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))]]]])
+  (let [names      (remove string/blank? (string/split name " "))
+        first-name (if (> (count names) 0) (first names) "")
+        last-name  (if (> (count names) 1) (last names) "")]
+    [rn/view {:style style/left-container}
+     [wallet-user-avatar/wallet-user-avatar
+      {:size                :medium
+       :f-name              first-name
+       :l-name              last-name
+       :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
   []

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

@@ -26,25 +26,21 @@
 
 (def info
   {:flex-direction :row
-   :align-items    :center
-   :width          "70%"})
+   :align-items    :center})
 
 (def token-info
-  {:height 40
-   :flex   1})
+  {:height 40})
 
 (def token-image
-  {:width            32
-   :height           32
-   :border-width     1
-   :border-radius    16
-   :border-color     colors/neutral-80-opa-5
-   :margin-right     8
-   :background-color colors/neutral-80-opa-5})
+  {:width         32
+   :height        32
+   :border-width  1
+   :border-radius 16
+   :border-color  colors/neutral-80-opa-5
+   :margin-right  8})
 
 (def values-container
-  {:align-items :flex-end
-   :max-width   "30%"})
+  {:align-items :flex-end})
 
 (defn fiat-value
   [theme]

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

@@ -15,14 +15,11 @@
     {:source (or (:source token) token)
      :style  style/token-image}]
    [rn/view {:style style/token-info}
-    [text/text
-     {:weight          :semi-bold
-      :number-of-lines 1}
-     (if-not (empty? label) label "-")]
+    [text/text {:weight :semi-bold} label]
     [preview-list/view
      {:type   :network
       :size   :size-14
-      :number (count networks)}
+      :number 3}
      networks]]])
 
 (defn- values
@@ -33,14 +30,12 @@
       :accessibility-label :check-icon}]
     [rn/view {:style style/values-container}
      [text/text
-      {:weight          :medium
-       :size            :paragraph-2
-       :number-of-lines 1}
+      {:weight :medium
+       :size   :paragraph-2}
       token-value]
      [text/text
-      {:style           (style/fiat-value theme)
-       :size            :paragraph-2
-       :number-of-lines 1}
+      {:style (style/fiat-value theme)
+       :size  :paragraph-2}
       fiat-value]]))
 
 (defn- view-internal

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

@@ -36,7 +36,7 @@
                   :blur?     false
                   :type      :digit} 1])
       (h/is-truthy (h/query-by-label-text :text-label))
-      (h/fire-event :press (h/query-by-label-text :keyboard-key-1))
+      (h/fire-event :press (h/query-by-label-text :keyboard-key))
       (h/was-called on-press)))
 
   (h/test "Is not pressable when disabled is true"
@@ -47,5 +47,5 @@
                   :blur?     false
                   :type      :digit} 1])
       (h/is-truthy (h/query-by-label-text :text-label))
-      (h/fire-event :press (h/query-by-label-text :keyboard-key-1))
+      (h/fire-event :press (h/query-by-label-text :keyboard-key))
       (h/was-not-called on-press))))

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

@@ -7,11 +7,6 @@
     [react-native.core :as rn]
     [reagent.core :as reagent]))
 
-(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)]
@@ -19,11 +14,9 @@
       (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)
+         {:accessibility-label :keyboard-key
           :disabled            (or disabled? (not label))
-          :on-press            (fn []
-                                 (when on-press
-                                   (on-press label)))
+          :on-press            (fn [] (on-press label))
           :on-press-in         #(reset! pressed? true)
           :on-press-out        #(reset! pressed? false)
           :style               (style/container background-color)}

src/quo/components/numbered_keyboard/numbered_keyboard/style.cljs

@@ -1,7 +1,7 @@
 (ns quo.components.numbered-keyboard.numbered-keyboard.style)
 
 (def container
-  {:display            :flex
+  {:flex               1
    :padding-top        8
    :padding-horizontal 48})
 

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

@@ -17,17 +17,13 @@
 
 (defn- view-internal
   []
-  (fn [{:keys [disabled? theme blur? left-action delete-key? on-press on-delete
-               container-style]
-        :or   {left-action :none}}]
+  (fn [{:keys [disabled? theme blur? left-action delete-key? on-press]}]
     [rn/view
-     {:style (merge style/container
-                    container-style)}
+     {:style style/container}
      (for [row-index (range 1 4)]
        ^{:key row-index}
        [rn/view {:style style/row-container}
         (for [column-index (range 1 4)]
-          ^{:key (str row-index column-index)}
           [keyboard-item
            {:item      (+ (* (dec row-index) 3) column-index)
             :type      :digit
@@ -62,10 +58,10 @@
         :theme     theme}]
       (if delete-key?
         [keyboard-item
-         {:item      :i/backspace
+         {:item      :i/delete
           :type      :key
           :disabled? disabled?
-          :on-press  on-delete
+          :on-press  on-press
           :blur?     blur?
           :theme     theme}]
         [keyboard-item])]]))

src/quo/components/overlay/style.cljs

@@ -1,22 +0,0 @@
-(ns quo.components.overlay.style
-  (:require [quo.foundations.colors :as colors]))
-
-(defn overlay-background
-  [type]
-  (let [background-color (case type
-                           :shell  colors/neutral-80-opa-80-blur
-                           :drawer colors/neutral-100-opa-70-blur
-                           nil)]
-    {:position         :absolute
-     :top              0
-     :left             0
-     :right            0
-     :bottom           0
-     :background-color background-color}))
-
-(def container
-  {:flex 1})
-
-(def blur-container
-  {:flex             1
-   :background-color :transparent})

src/quo/components/overlay/view.cljs

@@ -1,20 +0,0 @@
-(ns quo.components.overlay.view
-  (:require
-    [quo.components.overlay.style :as style]
-    [react-native.blur :as blur]
-    [react-native.core :as rn]))
-
-(defn view
-  [{:keys [type]} & children]
-  [rn/view {:style (style/overlay-background type)}
-   (if (= type :shell)
-     [blur/view
-      {:blur-amount   20
-       :blur-radius   25
-       :blur-type     :transparent
-       :overlay-color :transparent
-       :style         style/container}
-      [rn/view {:style style/blur-container}
-       children]]
-     [rn/view {:style style/container}
-      children])])

src/quo/components/settings/data_item/component_spec.cljs

@@ -10,14 +10,14 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
+                :description         :account
                 :icon-right?         false
                 :card?               true
                 :label               :none
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Subtitle"
-                :subtitle-type       :account
+                :subtitle            "Description"
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])
@@ -27,14 +27,14 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
+                :description         :account
                 :icon-right?         false
                 :card?               false
                 :label               :none
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Subtitle"
-                :subtitle-type       :account
+                :subtitle            "Description"
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])
@@ -45,14 +45,14 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
+                :description         :account
                 :icon-right?         false
                 :card?               true
                 :label               :none
                 :status              :default
                 :size                :small
                 :title               "Label"
-                :subtitle            "Subtitle"
-                :subtitle-type       :account
+                :subtitle            "Description"
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])
@@ -63,14 +63,14 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
+                :description         :account
                 :icon-right?         false
                 :card?               true
                 :label               :none
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Subtitle"
-                :subtitle-type       :account
+                :subtitle            "Description"
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])
@@ -81,31 +81,31 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
+                :description         :account
                 :icon-right?         false
                 :card?               true
                 :label               :none
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Subtitle"
-                :subtitle-type       :account
+                :subtitle            "Description"
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])
-    (h/is-truthy (h/get-by-text "Subtitle")))
+    (h/is-truthy (h/get-by-text "Description")))
 
   (h/test "right icon is not visible when icon-right? is false"
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
+                :description         :account
                 :icon-right?         false
                 :card?               true
                 :label               :none
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Subtitle"
-                :subtitle-type       :account
+                :subtitle            "Description"
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])
@@ -115,6 +115,7 @@
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
+                :description         :account
                 :icon-right?         true
                 :right-icon          :i/chevron-right
                 :card?               true
@@ -122,17 +123,17 @@
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Subtitle"
-                :subtitle-type       :account
+                :subtitle            "Description"
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])
     (h/is-truthy (h/query-by-label-text :icon-right)))
 
-  (h/test "icon is visible when subtitle type is icon"
+  (h/test "description icon is visible when description is icon"
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
+                :description         :icon
                 :icon-right?         true
                 :right-icon          :i/chevron-right
                 :card?               true
@@ -140,17 +141,17 @@
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Subtitle"
-                :subtitle-type       :icon
+                :subtitle            "Description"
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])
-    (h/is-truthy (h/query-by-label-text :subtitle-type-icon)))
+    (h/is-truthy (h/query-by-label-text :description-icon)))
 
-  (h/test "image is visible when subtitle type is network"
+  (h/test "description image is visible when description is network"
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
+                :description         :network
                 :icon-right?         true
                 :right-icon          :i/chevron-right
                 :card?               true
@@ -158,18 +159,18 @@
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Subtitle"
-                :subtitle-type       :network
+                :subtitle            "Description"
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow
                 :network-image       (quo.resources/get-network :ethereum)}])
-    (h/is-truthy (h/query-by-label-text :subtitle-type-image)))
+    (h/is-truthy (h/query-by-label-text :description-image)))
 
-  (h/test "emoji is visible when subtitle type is account"
+  (h/test "description emoji is visible when description is account"
     (h/render [quo/data-item
                {:on-press            (h/mock-fn)
                 :blur?               false
+                :description         :account
                 :icon-right?         true
                 :right-icon          :i/chevron-right
                 :card?               true
@@ -177,8 +178,7 @@
                 :status              :default
                 :size                :default
                 :title               "Label"
-                :subtitle            "Subtitle"
-                :subtitle-type       :account
+                :subtitle            "Description"
                 :icon                :i/placeholder
                 :emoji               "🎮"
                 :customization-color :yellow}])

src/quo/components/settings/data_item/style.cljs

@@ -37,8 +37,8 @@
    :align-items    :center})
 
 (defn subtitle-icon-container
-  [subtitle-type]
-  {:margin-right    (when (not= :default subtitle-type) 4)
+  [description]
+  {:margin-right    (when (not= :default description) 4)
    :justify-content :center})
 
 (defn title

src/quo/components/settings/data_item/view.cljs

@@ -16,15 +16,14 @@
   [rn/view {:style (style/loading-container size blur? theme)}])
 
 (defn- left-subtitle
-  [{:keys [theme size subtitle-type icon icon-color blur? subtitle customization-color emoji
-           network-image]
-    :or   {subtitle-type :default}}]
+  [{:keys [theme size description icon icon-color blur? subtitle customization-color emoji
+           network-image]}]
   [rn/view {:style style/subtitle-container}
    (when (not= :small size)
-     [rn/view {:style (style/subtitle-icon-container subtitle-type)}
-      (case subtitle-type
+     [rn/view {:style (style/subtitle-icon-container description)}
+      (case description
         :icon    [icons/icon icon
-                  {:accessibility-label :subtitle-type-icon
+                  {:accessibility-label :description-icon
                    :size                16
                    :color               icon-color}]
         :account [account-avatar/view
@@ -33,7 +32,7 @@
                    :emoji               emoji
                    :type                :default}]
         :network [rn/image
-                  {:accessibility-label :subtitle-type-image
+                  {:accessibility-label :description-image
                    :source              network-image
                    :style               style/image}]
         nil)])
@@ -59,9 +58,10 @@
       (i18n/label :t/days)])])
 
 (defn- left-side
-  "The description can either be given as a string `subtitle-type` or a component `custom-subtitle`"
-  [{:keys [theme title status size blur? custom-subtitle icon subtitle subtitle-type label icon-color
-           customization-color network-image emoji]
+  "The description can either be given as a string `description` or a component `custom-subtitle`"
+  [{:keys [theme title status size blur? description custom-subtitle icon subtitle label icon-color
+           customization-color network-image
+           emoji]
     :as   props}]
   [rn/view {:style style/left-side}
    [left-title
@@ -79,7 +79,7 @@
        [left-subtitle
         {:theme               theme
          :size                size
-         :subtitle-type       subtitle-type
+         :description         description
          :icon                icon
          :icon-color          icon-color
          :blur?               blur?

src/quo/components/tags/base_tag.cljs

@@ -17,21 +17,30 @@
            {:width size})))
 
 (defn base-tag
-  [{:keys [id size disabled? border-color border-width background-color on-press
-           accessibility-label type labelled?]
-    :or   {size 32}}
-   children]
-  [rn/touchable-without-feedback
-   (merge {:disabled            disabled?
-           :accessibility-label accessibility-label}
-          (when on-press
-            {:on-press #(on-press id)}))
-   [rn/view
-    {:style (merge (style-container size
-                                    disabled?
-                                    border-color
-                                    border-width
-                                    background-color
-                                    labelled?
-                                    type))}
-    children]])
+  [_]
+  (fn
+    [{:keys [id
+             size
+             disabled?
+             border-color
+             border-width
+             background-color
+             on-press
+             accessibility-label
+             type
+             labelled?]
+      :or   {size 32}} children]
+    [rn/touchable-without-feedback
+     (merge {:disabled            disabled?
+             :accessibility-label accessibility-label}
+            (when on-press
+              {:on-press #(on-press id)}))
+     [rn/view
+      {:style (merge (style-container size
+                                      disabled?
+                                      border-color
+                                      border-width
+                                      background-color
+                                      labelled?
+                                      type))}
+      children]]))

src/quo/components/tags/tag.cljs

@@ -4,7 +4,7 @@
     [quo.components.markdown.text :as text]
     [quo.components.tags.base-tag :as base-tag]
     [quo.foundations.colors :as colors]
-    [quo.theme]
+    [quo.theme :as theme]
     [react-native.core :as rn]))
 
 (def themes
@@ -66,45 +66,54 @@
              text-color)
       label])])
 
-(defn tag-internal
+(defn tag
   "opts
    {:type         :icon/:emoji/:label
     :label        string
     :size         32/24
     :on-press     fn
-    :blurred?     true/false
+    :blurred?     true/false 
     :resource     icon/image
     :labelled?    true/false
     :disabled?    true/false}
-
+  
    opts
     - `blurred`  boolean: use to determine border color if the background is blurred
     - `type`     can be icon or emoji with or without a tag label
     - `labelled` boolean: is true if tag has label else false"
-  [{:keys [id on-press disabled? size active accessibility-label label resource type
-           labelled? blurred? icon-color theme]
-    :or   {size 32}}]
-  (let [state                (cond
-                               disabled? :disabled
-                               active    :active
-                               :else     :default)
-        {:keys [border-color
-                blurred-border-color
-                text-color]} (get-in themes [theme state])]
-    [rn/view {:style {:align-items :center}}
-     [base-tag/base-tag
-      {:id                  id
-       :size                size
-       :border-width        1
-       :border-color        (if blurred?
-                              blurred-border-color
-                              border-color)
-       :on-press            on-press
-       :accessibility-label accessibility-label
-       :disabled?           disabled?
-       :type                type
-       :labelled?           (if (= type :label) true labelled?)}
-      [tag-resources size type resource icon-color label text-color labelled?]]]))
-
-(def tag (quo.theme/with-theme tag-internal))
+  [_ _]
+  (fn
+    [{:keys [id
+             on-press
+             disabled?
+             size
+             active
+             accessibility-label
+             label
+             resource
+             type
+             labelled?
+             blurred?
+             icon-color
+             override-theme]
+      :or   {size 32}}]
+    (let [state (cond disabled? :disabled
+                      active    :active
+                      :else     :default)
+          {:keys [border-color blurred-border-color text-color]}
+          (get-in themes [(or override-theme (theme/get-theme)) state])]
+      [rn/view {:style {:align-items :center}}
+       [base-tag/base-tag
+        {:id                  id
+         :size                size
+         :border-width        1
+         :border-color        (if blurred?
+                                blurred-border-color
+                                border-color)
+         :on-press            on-press
+         :accessibility-label accessibility-label
+         :disabled?           disabled?
+         :type                type
+         :labelled?           (if (= type :label) true labelled?)}
+        [tag-resources size type resource icon-color label text-color labelled?]]])))
 

src/quo/components/text_combinations/channel_name/component_spec.cljs

@@ -1,28 +0,0 @@
-(ns quo.components.text-combinations.channel-name.component-spec
-  (:require [quo.components.text-combinations.channel-name.view :as channel-name]
-            [test-helpers.component :as h]))
-
-(h/describe "Channel name"
-  (h/test "Renders Default"
-    (h/render [channel-name/view {:channel-name "Test channel"}])
-    (h/is-truthy (h/get-by-text "# Test channel")))
-
-  (h/test "Renders unlocked icon"
-    (h/render [channel-name/view
-               {:channel-name "Test channel"
-                :unlocked?    true}])
-    (h/is-truthy (h/get-by-label-text :channel-name-unlocked-icon)))
-
-  (h/test "Renders muted icon"
-    (h/render [channel-name/view
-               {:channel-name "Test channel"
-                :muted?       true}])
-    (h/is-truthy (h/get-by-label-text :channel-name-muted-icon)))
-
-  (h/test "Renders muted and unlocked icon"
-    (h/render [channel-name/view
-               {:channel-name "Test channel"
-                :muted?       true
-                :unlocked?    true}])
-    (h/is-truthy (h/get-by-label-text :channel-name-unlocked-icon))
-    (h/is-truthy (h/get-by-label-text :channel-name-muted-icon))))

src/quo/components/text_combinations/channel_name/style.cljs

@@ -1,30 +0,0 @@
-(ns quo.components.text-combinations.channel-name.style
-  (:require [quo.foundations.colors :as colors]))
-
-(def container {:flex-direction :row})
-
-(def icons-container
-  {:flex-direction :row
-   :padding-top    8
-   :padding-bottom 4
-   :margin-left    6})
-
-(def icon {:width 20 :height 20})
-
-(def icons-gap {:width 4})
-
-(defn- blur-icon-color
-  [theme]
-  (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme))
-
-(defn unlocked-icon-color
-  [theme blur?]
-  (if blur?
-    (blur-icon-color theme)
-    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
-
-(defn muted-icon-color
-  [theme blur?]
-  (if blur?
-    (blur-icon-color theme)
-    (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)))

src/quo/components/text_combinations/channel_name/view.cljs

@@ -1,40 +0,0 @@
-(ns quo.components.text-combinations.channel-name.view
-  (:require [quo.components.icon :as icon]
-            [quo.components.markdown.text :as text]
-            [quo.components.text-combinations.channel-name.style :as style]
-            [quo.theme]
-            [react-native.core :as rn]))
-
-(defn icons
-  [{:keys [theme unlocked? muted? blur?]}]
-  [rn/view {:style style/icons-container}
-   (when unlocked?
-     [rn/view
-      {:style               style/icon
-       :accessibility-label :channel-name-unlocked-icon}
-      [icon/icon :i/unlocked
-       {:color (style/unlocked-icon-color theme blur?)
-        :size  20}]])
-
-   (when (and unlocked? muted?)
-     [rn/view {:style style/icons-gap}])
-
-   (when muted?
-     [rn/view
-      {:style               style/icon
-       :accessibility-label :channel-name-muted-icon}
-      [icon/icon :i/muted
-       {:color (style/muted-icon-color theme blur?)
-        :size  20}]])])
-
-(defn- view-internal
-  [{:keys [unlocked? muted? channel-name] :as props}]
-  [rn/view {:style style/container}
-   [text/text
-    {:size   :heading-1
-     :weight :semi-bold}
-    (str "# " channel-name)]
-   (when (or unlocked? muted?)
-     [icons props])])
-
-(def view (quo.theme/with-theme view-internal))

src/quo/components/text_combinations/standard_title/component_spec.cljs

@@ -1,51 +0,0 @@
-(ns quo.components.text-combinations.standard-title.component-spec
-  (:require [quo.components.text-combinations.standard-title.view :as standard-title]
-            [test-helpers.component :as h]))
-
-(h/describe "Text combinations - Standard title"
-  (h/test "Default render"
-    (h/render [standard-title/view {:title "This is a title"}])
-    (h/is-truthy (h/get-by-text "This is a title")))
-
-  (h/test "Counter variant"
-    (h/render [standard-title/view
-               {:title         "This is a title"
-                :right         :counter
-                :counter-left  50
-                :counter-right 100}])
-    (h/is-truthy (h/get-by-text "50/100")))
-
-  (h/describe "Action variant"
-    (h/test "Default render"
-      (let [on-press-fn (h/mock-fn)]
-        (h/render [standard-title/view
-                   {:title    "This is a title"
-                    :right    :action
-                    :on-press on-press-fn}])
-        (h/is-truthy (h/get-by-text "This is a title"))))
-
-    (h/test "Action fired"
-      (let [on-press-fn (h/mock-fn)]
-        (h/render [standard-title/view
-                   {:title    "This is a title"
-                    :right    :action
-                    :on-press on-press-fn}])
-
-        (h/fire-event :on-press (h/get-by-label-text :standard-title-action))
-        (h/was-called-times on-press-fn 1))))
-
-  (h/describe "Tag variant"
-    (h/test "Default render"
-      (h/render [standard-title/view
-                 {:title "This is a title"
-                  :right :tag}])
-      (h/is-truthy (h/get-by-text "This is a title")))
-
-    (h/test "Tag callback fired"
-      (let [on-press-fn (h/mock-fn)]
-        (h/render [standard-title/view
-                   {:title    "This is a title"
-                    :right    :tag
-                    :on-press on-press-fn}])
-        (h/fire-event :on-press (h/get-by-label-text :standard-title-tag))
-        (h/was-called-times on-press-fn 1)))))

src/quo/components/text_combinations/standard_title/style.cljs

@@ -1,24 +0,0 @@
-(ns quo.components.text-combinations.standard-title.style
-  (:require [quo.foundations.colors :as colors]))
-
-(def container
-  {:flex-direction  :row
-   :justify-content :space-between})
-
-(def right-container {:margin-left 20})
-
-(def right-counter
-  {:padding-top    12
-   :padding-bottom 2})
-
-(defn right-counter-text
-  [blur? theme]
-  {:color (if blur?
-            (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
-            (colors/theme-colors colors/neutral-40 colors/neutral-50 theme))})
-
-(defn right-tag-icon-color
-  [blur? theme]
-  (if blur?
-    (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
-    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))

src/quo/components/text_combinations/standard_title/view.cljs

@@ -1,68 +0,0 @@
-(ns quo.components.text-combinations.standard-title.view
-  (:require [clojure.string :as string]
-            [quo.components.buttons.button.view :as button]
-            [quo.components.markdown.text :as text]
-            [quo.components.tags.tag :as tag]
-            [quo.components.text-combinations.standard-title.style :as style]
-            [quo.theme]
-            [react-native.core :as rn]
-            [utils.number]))
-
-(defn- get-counter-number
-  [n]
-  (let [parsed-number (utils.number/parse-int n)]
-    (if (< n 10)
-      (str "0" parsed-number)
-      parsed-number)))
-
-(defn- right-counter
-  [{:keys [blur? theme counter-left counter-right]}]
-  [rn/view {:style style/right-counter}
-   [text/text
-    {:size   :paragraph-2
-     :weight :regular
-     :style  (style/right-counter-text blur? theme)}
-    (str (get-counter-number counter-left)
-         "/"
-         (get-counter-number counter-right))]])
-
-(defn- right-action
-  [{:keys [customization-color on-press icon]
-    :or   {icon :i/placeholder}}]
-  [button/button
-   {:accessibility-label :standard-title-action
-    :size                32
-    :icon-only?          true
-    :customization-color customization-color
-    :on-press            on-press}
-   icon])
-
-(defn- right-tag
-  [{:keys [theme blur? on-press icon label]
-    :or   {icon :i/placeholder}}]
-  (let [labelled? (not (string/blank? label))]
-    [tag/tag
-     {:accessibility-label :standard-title-tag
-      :size                32
-      :type                :icon
-      :resource            icon
-      :on-press            on-press
-      :labelled?           labelled?
-      :label               (when labelled? label)
-      :blurred?            blur?
-      :icon-color          (style/right-tag-icon-color blur? theme)}]))
-
-(defn- view-internal
-  [{:keys [title right] :as props}]
-  [rn/view {:style style/container}
-   [text/text {:size :heading-1 :weight :semi-bold}
-    title]
-   (when right
-     [rn/view {:style style/right-container}
-      (case right
-        :counter [right-counter props]
-        :action  [right-action props]
-        :tag     [right-tag props]
-        nil)])])
-
-(def view (quo.theme/with-theme view-internal))

src/quo/components/text_combinations/style.cljs

@@ -9,8 +9,3 @@
 
 (def description-description-text
   {:margin-top 8})
-
-(def emoji-hash
-  {:margin-top     8
-   :letter-spacing 0.5
-   :line-height    20.5})

src/quo/components/text_combinations/view.cljs

@@ -27,8 +27,7 @@
            description-accessibility-label
            button-icon
            button-on-press
-           customization-color
-           emoji-hash]}]
+           customization-color]}]
   [rn/view {:style container-style}
    [rn/view
     {:style {:flex-direction  :row
@@ -56,11 +55,6 @@
        :weight              :regular
        :size                :paragraph-1
        :style               style/description-description-text}
-      description])
-   (when emoji-hash
-     [text/text
-      {:number-of-lines 1
-       :style           style/emoji-hash}
-      emoji-hash])])
+      description])])
 
 (def view (theme/with-theme view-internal))

src/quo/components/wallet/account_origin/view.cljs

@@ -20,13 +20,12 @@
      (i18n/label :t/trip-accounts))])
 
 (defn- row-icon
-  [customization-color profile-picture type secondary-color]
+  [profile-picture type secondary-color]
   (case type
     :default-keypair [user-avatar/user-avatar
-                      {:size                :xxs
-                       :ring?               false
-                       :customization-color customization-color
-                       :profile-picture     profile-picture}]
+                      {:size            :xxs
+                       :ring?           false
+                       :profile-picture profile-picture}]
     :recovery-phrase [icons/icon
                       :i/seed
                       {:accessibility-label :recovery-phrase-icon
@@ -42,11 +41,10 @@
     nil))
 
 (defn- row-view
-  [{:keys [type theme secondary-color customization-color profile-picture title stored subtitle
-           on-press]}]
+  [{:keys [type theme secondary-color profile-picture title stored subtitle on-press]}]
   [rn/view {:style (style/row-container type theme)}
    [rn/view {:style style/icon-container}
-    [row-icon customization-color profile-picture type secondary-color]]
+    [row-icon profile-picture type secondary-color]]
    [rn/view
     {:style style/row-content-container}
     [row-title type title]
@@ -70,19 +68,18 @@
        {:color secondary-color}]])])
 
 (defn- list-view
-  [{:keys [type stored customization-color profile-picture user-name theme secondary-color]}]
+  [{:keys [type stored profile-picture user-name theme secondary-color]}]
   (let [stored-name (if (= :on-device stored)
                       (i18n/label :t/on-device)
                       (i18n/label :t/on-keycard))]
     [row-view
-     {:type                type
-      :stored              stored
-      :customization-color customization-color
-      :profile-picture     profile-picture
-      :title               user-name
-      :subtitle            stored-name
-      :theme               theme
-      :secondary-color     secondary-color}]))
+     {:type            type
+      :stored          stored
+      :profile-picture profile-picture
+      :title           user-name
+      :subtitle        stored-name
+      :theme           theme
+      :secondary-color secondary-color}]))
 
 (defn- card-view
   [theme derivation-path secondary-color on-press]
@@ -108,13 +105,12 @@
 
 (def view
   "Create an account-origin UI component.
-  | key                   | values                                         |
-  | ----------------------|------------------------------------------------|
-  | :type                 | :default-keypair :recovery-phrase :private-key 
-  | :stored               | :on-device :on-keycard
-  | :profile-picture      | image source
-  | :customization-color  | profile color
-  | :derivation-path      | string
-  | :user-name            | string
-  | :on-press             | function"
+  | key               | values                                         |
+  | ------------------|------------------------------------------------|
+  | :type             | :default-keypair :recovery-phrase :private-key 
+  | :stored           | :on-device :on-keycard
+  | :profile-picture  | image source
+  | :derivation-path  | string
+  | :user-name        | string
+  | :on-press         | function"
   (quo.theme/with-theme view-internal))

src/quo/components/wallet/account_overview/view.cljs

@@ -133,7 +133,7 @@
      | key          | description |
   | -------------|-------------|
   | `:account-name`      | A value representing the account name (default `nil`)
-  | `:account`           | A value that represents if the account is a `:watched-address` or a `:default` account. (default `nil`)
+  | `:account`           | A value that represents if the account is a `:watched-account` or a `:default` account. (default `nil`)
   | `:time-frame`        | A value that represents the type of the timeframe, Can be from a preset of time frames. `[:1-week :1-month :3-months :1-year :custom]` (default `nil`) if custom is set, We expect a start time and if there's a space between two times that are in `time-frame-string` we'll split them with an arrow to the right icon
   | `:loading?`          | A value that indicates that component is loading data. (default `nil`)
   | `:metrics`           | A value that indicates if the account value have increased can be `:positive` or `:negative` (default `nil`)

src/quo/components/wallet/keypair/style.cljs

@@ -28,9 +28,3 @@
   {:flex-direction  :row
    :align-items     :center
    :justify-content :space-between})
-
-(defn subtitle
-  [blur? theme]
-  {:color (if blur?
-            colors/white-opa-40
-            (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))})

src/quo/components/wallet/keypair/view.cljs

@@ -11,7 +11,6 @@
     [quo.foundations.colors :as colors]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
-    [react-native.platform :as platform]
     [reagent.core :as reagent]
     [utils.i18n :as i18n]))
 
@@ -20,6 +19,11 @@
   (let [first-name (first (string/split full-name #" "))]
     (i18n/label :t/keypair-title {:name first-name})))
 
+(defn details-string
+  [address stored]
+  (str (when address (str address " ∙ "))
+       (if (= stored :on-device) (i18n/label :t/on-device) (i18n/label :t/on-keycard))))
+
 (defn avatar
   [{{:keys [full-name]} :details
     avatar-type         :type
@@ -63,21 +67,15 @@
   [{:keys [details stored blur? theme]}]
   (let [{:keys [address]} details]
     [rn/view
-     {:style               {:flex-direction :row
-                            :align-items    :center}
-      :accessibility-label :details}
+     {:style {:flex-direction :row
+              :align-items    :center}}
      [text/text
-      {:size  :paragraph-2
-       :style (style/subtitle blur? theme)}
-      address]
-     [text/text
-      {:size  :paragraph-2
-       :style (merge (style/subtitle blur? theme) {:bottom (if platform/ios? 2 -2)})}
-      " ∙ "]
-     [text/text
-      {:size  :paragraph-2
-       :style (style/subtitle blur? theme)}
-      (if (= stored :on-device) (i18n/label :t/on-device) (i18n/label :t/on-keycard))]
+      {:size                :paragraph-2
+       :accessibility-label :details
+       :style               {:color (if blur?
+                                      colors/white-opa-40
+                                      (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}}
+      (details-string address stored)]
      (when (= stored :on-keycard)
        [rn/view {:style {:margin-left 4}}
         [icon/icon :i/keycard-card

src/quo/components/wallet/token_input/view.cljs

@@ -15,26 +15,18 @@
 
 (defn calc-value
   [crypto? currency token value conversion]
-  (let [num-value (if (string? value) (parse-double (or value "0")) value)]
-    (if crypto?
-      (str (get common/currency-label currency) (.toFixed (* num-value conversion) 2))
-      (str (.toFixed (/ num-value conversion) 2) " " (string/upper-case (or (clj->js token) ""))))))
+  (if crypto?
+    (str (get common/currency-label currency) (.toFixed (* value conversion) 2))
+    (str (.toFixed (/ value conversion) 2) " " (string/upper-case (clj->js token)))))
 
 (defn- view-internal
-  [{external-value :value}]
-  (let [width             (:width (rn/get-window))
-        value             (reagent/atom nil)
-        crypto?           (reagent/atom true)
-        input-ref         (atom nil)
-        controlled-input? (some? external-value)]
-    (fn [{:keys          [theme token currency conversion networks title customization-color
-                          on-change-text on-swap container-style show-keyboard?]
-          :or            {show-keyboard? true}
-          external-value :value}]
-      [rn/view
-       {:style (merge
-                (style/main-container width)
-                container-style)}
+  []
+  (let [width     (:width (rn/get-window))
+        value     (reagent/atom 0)
+        crypto?   (reagent/atom true)
+        input-ref (atom nil)]
+    (fn [{:keys [theme token currency conversion networks title customization-color]}]
+      [rn/view {:style (style/main-container width)}
        [rn/view {:style style/amount-container}
         [rn/pressable
          {:on-press #(when @input-ref (.focus ^js @input-ref))
@@ -45,39 +37,27 @@
           {:style  style/token
            :source (resources/get-token token)}]
          [rn/text-input
-          (cond-> {:auto-focus               true
-                   :ref                      #(reset! input-ref %)
-                   :placeholder              "0"
-                   :placeholder-text-color   (colors/theme-colors colors/neutral-40
-                                                                  colors/neutral-50
-                                                                  theme)
-                   :keyboard-type            :numeric
-                   :max-length               12
-                   :on-change-text           (fn [v]
-                                               (when-not controlled-input?
-                                                 (reset! value v))
-                                               (when on-change-text
-                                                 (on-change-text v)))
-                   :style                    (style/text-input theme)
-                   :selection-color          customization-color
-                   :show-soft-input-on-focus show-keyboard?}
-            controlled-input?       (assoc :value external-value)
-            (not controlled-input?) (assoc :default-value @value))]
+          {:ref                    #(reset! input-ref %)
+           :placeholder            "0"
+           :placeholder-text-color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
+           :keyboard-type          :numeric
+           :max-length             12
+           :default-value          @value
+           :on-change-text         #(reset! value %)
+           :style                  (style/text-input theme)
+           :selection-color        customization-color}]
          [text/text
           {:size   :paragraph-2
            :weight :semi-bold
            :style  {:color          (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
                     :margin-right   8
                     :padding-bottom 2}}
-          (string/upper-case (or (clj->js (if @crypto? token currency)) ""))]]
+          (string/upper-case (clj->js (if @crypto? token currency)))]]
         [button/button
          {:icon                true
           :icon-only?          true
           :size                32
-          :on-press            (fn []
-                                 (swap! crypto? not)
-                                 (when on-swap
-                                   (on-swap @crypto?)))
+          :on-press            #(swap! crypto? not)
           :type                :outline
           :accessibility-label :reorder}
          :i/reorder]]
@@ -88,6 +68,6 @@
          {:size   :paragraph-2
           :weight :medium
           :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
-         (calc-value @crypto? currency token (or external-value @value) conversion)]]])))
+         (calc-value @crypto? currency token @value conversion)]]])))
 
 (def view (quo.theme/with-theme view-internal))

src/quo/core.cljs

@@ -48,7 +48,6 @@
     quo.components.drawers.drawer-buttons.view
     quo.components.drawers.drawer-top.view
     quo.components.drawers.permission-context.view
-    quo.components.dropdowns.dropdown-input.view
     quo.components.dropdowns.dropdown.view
     quo.components.dropdowns.network-dropdown.view
     quo.components.empty-state.empty-state.view
@@ -66,7 +65,6 @@
     quo.components.inputs.recovery-phrase.view
     quo.components.inputs.search-input.view
     quo.components.inputs.title-input.view
-    quo.components.ios.drawer-bar.view
     quo.components.keycard.view
     quo.components.links.link-preview.view
     quo.components.links.url-preview-list.view
@@ -102,7 +100,6 @@
     quo.components.numbered-keyboard.keyboard-key.view
     quo.components.numbered-keyboard.numbered-keyboard.view
     quo.components.onboarding.small-option-card.view
-    quo.components.overlay.view
     quo.components.password.tips.view
     quo.components.profile.collectible.view
     quo.components.profile.profile-card.view
@@ -139,8 +136,6 @@
     quo.components.tags.tags
     quo.components.tags.tiny-tag.view
     quo.components.tags.token-tag.view
-    quo.components.text-combinations.channel-name.view
-    quo.components.text-combinations.standard-title.view
     quo.components.text-combinations.view
     quo.components.wallet.account-card.view
     quo.components.wallet.account-origin.view
@@ -236,7 +231,6 @@
 
 ;;;; Dropdowns
 (def dropdown quo.components.dropdowns.dropdown.view/view)
-(def dropdown-input quo.components.dropdowns.dropdown-input.view/view)
 (def network-dropdown quo.components.dropdowns.network-dropdown.view/view)
 
 ;;;; Empty State
@@ -269,9 +263,6 @@
 (def search-input quo.components.inputs.search-input.view/search-input)
 (def title-input quo.components.inputs.title-input.view/view)
 
-;;;; iOS
-(def drawer-bar quo.components.ios.drawer-bar.view/view)
-
 ;;;; Numbered Keyboard
 (def keyboard-key quo.components.numbered-keyboard.keyboard-key.view/view)
 (def numbered-keyboard quo.components.numbered-keyboard.numbered-keyboard.view/view)
@@ -322,9 +313,6 @@
 (def notification quo.components.notifications.notification.view/notification)
 (def toast quo.components.notifications.toast.view/toast)
 
-;;;; Overlay
-(def overlay quo.components.overlay.view/view)
-
 ;;;; Password
 (def tips quo.components.password.tips.view/view)
 
@@ -380,8 +368,6 @@
 (def token-tag quo.components.tags.token-tag.view/view)
 
 ;;;; Text combinations
-(def channel-name quo.components.text-combinations.channel-name.view/view)
-(def standard-title quo.components.text-combinations.standard-title.view/view)
 (def text-combinations quo.components.text-combinations.view/view)
 
 ;;;; Wallet

src/quo/core_spec.cljs

@@ -26,7 +26,6 @@
     [quo.components.drawers.drawer-buttons.component-spec]
     [quo.components.drawers.drawer-top.component-spec]
     [quo.components.drawers.permission-context.component-spec]
-    [quo.components.dropdowns.dropdown-input.component-spec]
     [quo.components.dropdowns.dropdown.component-spec]
     [quo.components.dropdowns.network-dropdown.component-spec]
     [quo.components.gradient.gradient-cover.component-spec]
@@ -76,7 +75,6 @@
     [quo.components.tags.status-tags-component-spec]
     [quo.components.tags.summary-tag.component-spec]
     [quo.components.tags.tiny-tag.component-spec]
-    [quo.components.text-combinations.channel-name.component-spec]
     [quo.components.wallet.account-card.component-spec]
     [quo.components.wallet.account-origin.component-spec]
     [quo.components.wallet.account-overview.component-spec]

src/quo/foundations/colors.cljs

@@ -148,9 +148,7 @@
 (def black-opa-30 (alpha black 0.3))
 (def black-opa-60 (alpha black 0.6))
 (def onboarding-header-black "#000716")
-(def border-avatar-light
-  "Simulates a blurred, transparent border for avatars in light mode"
-  "#475060")
+
 ;;;;Primary
 
 ;;Solid
@@ -203,16 +201,6 @@
 (def danger-50-opa-30 (alpha danger-50 0.3))
 (def danger-50-opa-40 (alpha danger-50 0.4))
 
-;;;;Warning
-(def warning-50 "#FF7D46")
-(def warning-60 "#CC6438")
-
-;;50 with transparency
-(def warning-50-opa-5 (alpha warning-50 0.05))
-(def warning-50-opa-10 (alpha warning-50 0.1))
-(def warning-50-opa-20 (alpha warning-50 0.2))
-(def warning-50-opa-30 (alpha warning-50 0.3))
-(def warning-50-opa-40 (alpha warning-50 0.4))
 
 ;; Colors for customizing users account
 (def customization
@@ -266,9 +254,7 @@
           :danger  {50 danger-50
                     60 danger-60}
           :success {50 success-50
-                    60 success-60}
-          :warning {50 warning-50
-                    60 warning-60}}
+                    60 success-60}}
          customization
          networks))
 

src/quo/foundations/resources.cljs

@@ -33,191 +33,14 @@
   (get dapps k))
 
 (def tokens
-  {:0-native  (js/require "../resources/images/tokens/mainnet/0-native.png")
-   :0xbtc     (js/require "../resources/images/tokens/mainnet/0XBTC.png")
-   :1st       (js/require "../resources/images/tokens/mainnet/1ST.png")
-   :abt       (js/require "../resources/images/tokens/mainnet/ABT.png")
-   :abyss     (js/require "../resources/images/tokens/mainnet/ABYSS.png")
-   :ae        (js/require "../resources/images/tokens/mainnet/AE.png")
-   :agld      (js/require "../resources/images/tokens/mainnet/AGLD.png")
-   :akro      (js/require "../resources/images/tokens/mainnet/AKRO.png")
-   :amb       (js/require "../resources/images/tokens/mainnet/AMB.png")
-   :ampl      (js/require "../resources/images/tokens/mainnet/AMPL.png")
-   :ant       (js/require "../resources/images/tokens/mainnet/ANT.png")
-   :appc      (js/require "../resources/images/tokens/mainnet/APPC.png")
-   :ast       (js/require "../resources/images/tokens/mainnet/AST.png")
-   :atmchain  (js/require "../resources/images/tokens/mainnet/ATMChain.png")
-   :ausdc     (js/require "../resources/images/tokens/mainnet/aUSDC.png")
-   :bal       (js/require "../resources/images/tokens/mainnet/BAL.png")
-   :bam       (js/require "../resources/images/tokens/mainnet/BAM.png")
-   :band      (js/require "../resources/images/tokens/mainnet/BAND.png")
-   :bat       (js/require "../resources/images/tokens/mainnet/BAT.png")
-   :blt       (js/require "../resources/images/tokens/mainnet/BLT.png")
-   :blz       (js/require "../resources/images/tokens/mainnet/BLZ.png")
-   :bnb       (js/require "../resources/images/tokens/mainnet/BNB.png")
-   :bnt       (js/require "../resources/images/tokens/mainnet/BNT.png")
-   :brln      (js/require "../resources/images/tokens/mainnet/BRLN.png")
-   :btm       (js/require "../resources/images/tokens/mainnet/BTM.png")
-   :btu       (js/require "../resources/images/tokens/mainnet/BTU.png")
-   :cdai      (js/require "../resources/images/tokens/mainnet/cDAI.png")
-   :cdt       (js/require "../resources/images/tokens/mainnet/CDT.png")
-   :centra    (js/require "../resources/images/tokens/mainnet/Centra.png")
-   :cfi       (js/require "../resources/images/tokens/mainnet/CFI.png")
-   :ck        (js/require "../resources/images/tokens/mainnet/CK.png")
-   :cnd       (js/require "../resources/images/tokens/mainnet/CND.png")
-   :cob       (js/require "../resources/images/tokens/mainnet/COB.png")
-   :comp      (js/require "../resources/images/tokens/mainnet/COMP.png")
-   :crv       (js/require "../resources/images/tokens/mainnet/CRV.png")
-   :cvc       (js/require "../resources/images/tokens/mainnet/CVC.png")
-   :dai       (js/require "../resources/images/tokens/mainnet/DAI.png")
-   :dat       (js/require "../resources/images/tokens/mainnet/DAT.png")
-   :data      (js/require "../resources/images/tokens/mainnet/DATA.png")
-   :dcn       (js/require "../resources/images/tokens/mainnet/DCN.png")
-   :dgd       (js/require "../resources/images/tokens/mainnet/DGD.png")
-   :dgx       (js/require "../resources/images/tokens/mainnet/DGX.png")
-   :dlt       (js/require "../resources/images/tokens/mainnet/DLT.png")
-   :dnt       (js/require "../resources/images/tokens/mainnet/DNT.png")
-   :dpy       (js/require "../resources/images/tokens/mainnet/DPY.png")
-   :drt       (js/require "../resources/images/tokens/mainnet/DRT.png")
-   :dta       (js/require "../resources/images/tokens/mainnet/DTA.png")
-   :edg       (js/require "../resources/images/tokens/mainnet/EDG.png")
-   :edo       (js/require "../resources/images/tokens/mainnet/EDO.png")
-   :ekg       (js/require "../resources/images/tokens/mainnet/EKG.png")
-   :eko       (js/require "../resources/images/tokens/mainnet/EKO.png")
-   :elf       (js/require "../resources/images/tokens/mainnet/ELF.png")
-   :emona     (js/require "../resources/images/tokens/mainnet/EMONA.png")
-   :eng       (js/require "../resources/images/tokens/mainnet/ENG.png")
-   :enj       (js/require "../resources/images/tokens/mainnet/ENJ.png")
-   :ens       (js/require "../resources/images/tokens/mainnet/ENS.png")
-   :eos       (js/require "../resources/images/tokens/mainnet/EOS.png")
-   :equad     (js/require "../resources/images/tokens/mainnet/EQUAD.png")
-   :eth       (js/require "../resources/images/tokens/mainnet/ETH-token.png")
-   :eth2x-fli (js/require "../resources/images/tokens/mainnet/ETH2x-FLI.png")
-   :ethos     (js/require "../resources/images/tokens/mainnet/ETHOS.png")
-   :evx       (js/require "../resources/images/tokens/mainnet/EVX.png")
-   :fuel      (js/require "../resources/images/tokens/mainnet/FUEL.png")
-   :fun       (js/require "../resources/images/tokens/mainnet/FUN.png")
-   :fxc       (js/require "../resources/images/tokens/mainnet/FXC.png")
-   :gdc       (js/require "../resources/images/tokens/mainnet/GDC.png")
-   :gen       (js/require "../resources/images/tokens/mainnet/GEN.png")
-   :glm       (js/require "../resources/images/tokens/mainnet/GLM.png")
-   :gno       (js/require "../resources/images/tokens/mainnet/GNO.png")
-   :gnt       (js/require "../resources/images/tokens/mainnet/GNT.png")
-   :grid      (js/require "../resources/images/tokens/mainnet/GRID.png")
-   :grt       (js/require "../resources/images/tokens/mainnet/GRT.png")
-   :hez       (js/require "../resources/images/tokens/mainnet/HEZ.png")
-   :hst       (js/require "../resources/images/tokens/mainnet/HST.png")
-   :ht        (js/require "../resources/images/tokens/mainnet/HT.png")
-   :icn       (js/require "../resources/images/tokens/mainnet/ICN.png")
-   :icos      (js/require "../resources/images/tokens/mainnet/ICOS.png")
-   :iost      (js/require "../resources/images/tokens/mainnet/IOST.png")
-   :kdo       (js/require "../resources/images/tokens/mainnet/KDO.png")
-   :kin       (js/require "../resources/images/tokens/mainnet/KIN.png")
-   :knc       (js/require "../resources/images/tokens/mainnet/KNC.png")
-   :kudos     (js/require "../resources/images/tokens/mainnet/Kudos.png")
-   :lend      (js/require "../resources/images/tokens/mainnet/LEND.png")
-   :link      (js/require "../resources/images/tokens/mainnet/LINK.png")
-   :lisk      (js/require "../resources/images/tokens/mainnet/LISK.png")
-   :loom      (js/require "../resources/images/tokens/mainnet/LOOM.png")
-   :lpt       (js/require "../resources/images/tokens/mainnet/LPT.png")
-   :lrc       (js/require "../resources/images/tokens/mainnet/LRC.png")
-   :mana      (js/require "../resources/images/tokens/mainnet/MANA.png")
-   :mco       (js/require "../resources/images/tokens/mainnet/MCO.png")
-   :mda       (js/require "../resources/images/tokens/mainnet/MDA.png")
-   :met       (js/require "../resources/images/tokens/mainnet/MET.png")
-   :mfg       (js/require "../resources/images/tokens/mainnet/MFG.png")
-   :mgo       (js/require "../resources/images/tokens/mainnet/MGO.png")
-   :mkr       (js/require "../resources/images/tokens/mainnet/MKR.png")
-   :mln       (js/require "../resources/images/tokens/mainnet/MLN.png")
-   :moc       (js/require "../resources/images/tokens/mainnet/MOC.png")
-   :mod       (js/require "../resources/images/tokens/mainnet/MOD.png")
-   :mth       (js/require "../resources/images/tokens/mainnet/MTH.png")
-   :mtl       (js/require "../resources/images/tokens/mainnet/MTL.png")
-   :myb       (js/require "../resources/images/tokens/mainnet/MYB.png")
-   :nexo      (js/require "../resources/images/tokens/mainnet/NEXO.png")
-   :nexxo     (js/require "../resources/images/tokens/mainnet/NEXXO.png")
-   :nmr       (js/require "../resources/images/tokens/mainnet/NMR.png")
-   :npxs      (js/require "../resources/images/tokens/mainnet/NPXS.png")
-   :ogn       (js/require "../resources/images/tokens/mainnet/OGN.png")
-   :omg       (js/require "../resources/images/tokens/mainnet/OMG.png")
-   :otn       (js/require "../resources/images/tokens/mainnet/OTN.png")
-   :oxt       (js/require "../resources/images/tokens/mainnet/OXT.png")
-   :pax       (js/require "../resources/images/tokens/mainnet/PAX.png")
-   :paxg      (js/require "../resources/images/tokens/mainnet/PAXG.png")
-   :pay       (js/require "../resources/images/tokens/mainnet/PAY.png")
-   :pbtc      (js/require "../resources/images/tokens/mainnet/PBTC.png")
-   :plr       (js/require "../resources/images/tokens/mainnet/PLR.png")
-   :poe       (js/require "../resources/images/tokens/mainnet/POE.png")
-   :poly      (js/require "../resources/images/tokens/mainnet/POLY.png")
-   :powr      (js/require "../resources/images/tokens/mainnet/POWR.png")
-   :ppp       (js/require "../resources/images/tokens/mainnet/PPP.png")
-   :ppt       (js/require "../resources/images/tokens/mainnet/PPT.png")
-   :pt        (js/require "../resources/images/tokens/mainnet/PT.png")
-   :qkc       (js/require "../resources/images/tokens/mainnet/QKC.png")
-   :qrl       (js/require "../resources/images/tokens/mainnet/QRL.png")
-   :qsp       (js/require "../resources/images/tokens/mainnet/QSP.png")
-   :r         (js/require "../resources/images/tokens/mainnet/R.png")
-   :rae       (js/require "../resources/images/tokens/mainnet/RAE.png")
-   :rare      (js/require "../resources/images/tokens/mainnet/RARE.png")
-   :rcn       (js/require "../resources/images/tokens/mainnet/RCN.png")
-   :rdn       (js/require "../resources/images/tokens/mainnet/RDN.png")
-   :ren       (js/require "../resources/images/tokens/mainnet/REN.png")
-   :rep       (js/require "../resources/images/tokens/mainnet/REP.png")
-   :req       (js/require "../resources/images/tokens/mainnet/REQ.png")
-   :rhoc      (js/require "../resources/images/tokens/mainnet/RHOC.png")
-   :rlc       (js/require "../resources/images/tokens/mainnet/RLC.png")
-   :rol       (js/require "../resources/images/tokens/mainnet/ROL.png")
-   :sai       (js/require "../resources/images/tokens/mainnet/SAI.png")
-   :salt      (js/require "../resources/images/tokens/mainnet/SALT.png")
-   :san       (js/require "../resources/images/tokens/mainnet/SAN.png")
-   :sngls     (js/require "../resources/images/tokens/mainnet/SNGLS.png")
-   :snm       (js/require "../resources/images/tokens/mainnet/SNM.png")
-   :snt       (js/require "../resources/images/tokens/mainnet/SNT.png")
-   :snx       (js/require "../resources/images/tokens/mainnet/SNX.png")
-   :socks     (js/require "../resources/images/tokens/mainnet/SOCKS.png")
-   :spank     (js/require "../resources/images/tokens/mainnet/SPANK.png")
-   :spike     (js/require "../resources/images/tokens/mainnet/SPIKE.png")
-   :spn       (js/require "../resources/images/tokens/mainnet/SPN.png")
-   :st        (js/require "../resources/images/tokens/mainnet/ST.png")
-   :storj     (js/require "../resources/images/tokens/mainnet/STORJ.png")
-   :storm     (js/require "../resources/images/tokens/mainnet/STORM.png")
-   :strk      (js/require "../resources/images/tokens/mainnet/STRK.png")
-   :stx       (js/require "../resources/images/tokens/mainnet/STX.png")
-   :sub       (js/require "../resources/images/tokens/mainnet/SUB.png")
-   :supr      (js/require "../resources/images/tokens/mainnet/SUPR.png")
-   :susd      (js/require "../resources/images/tokens/mainnet/sUSD.png")
-   :taas      (js/require "../resources/images/tokens/mainnet/TAAS.png")
-   :taud      (js/require "../resources/images/tokens/mainnet/TAUD.png")
-   :tcad      (js/require "../resources/images/tokens/mainnet/TCAD.png")
-   :tgbp      (js/require "../resources/images/tokens/mainnet/TGBP.png")
-   :tkn       (js/require "../resources/images/tokens/mainnet/TKN.png")
-   :tkx       (js/require "../resources/images/tokens/mainnet/TKX.png")
-   :tnt       (js/require "../resources/images/tokens/mainnet/TNT.png")
-   :trst      (js/require "../resources/images/tokens/mainnet/TRST.png")
-   :trx       (js/require "../resources/images/tokens/mainnet/TRX.png")
-   :tusd      (js/require "../resources/images/tokens/mainnet/TUSD.png")
-   :ubi       (js/require "../resources/images/tokens/mainnet/UBI.png")
-   :ubt       (js/require "../resources/images/tokens/mainnet/UBT.png")
-   :ukg       (js/require "../resources/images/tokens/mainnet/UKG.png")
-   :uni       (js/require "../resources/images/tokens/mainnet/UNI.png")
-   :upp       (js/require "../resources/images/tokens/mainnet/UPP.png")
-   :usdc      (js/require "../resources/images/tokens/mainnet/USDC.png")
-   :usds      (js/require "../resources/images/tokens/mainnet/USDS.png")
-   :usdt      (js/require "../resources/images/tokens/mainnet/USDT.png")
-   :veri      (js/require "../resources/images/tokens/mainnet/VERI.png")
-   :vgx       (js/require "../resources/images/tokens/mainnet/VGX.png")
-   :vib       (js/require "../resources/images/tokens/mainnet/VIB.png")
-   :wabi      (js/require "../resources/images/tokens/mainnet/WaBi.png")
-   :wbtc      (js/require "../resources/images/tokens/mainnet/WBTC.png")
-   :weth      (js/require "../resources/images/tokens/mainnet/WETH.png")
-   :wings     (js/require "../resources/images/tokens/mainnet/WINGS.png")
-   :wtc       (js/require "../resources/images/tokens/mainnet/WTC.png")
-   :xaur      (js/require "../resources/images/tokens/mainnet/XAUR.png")
-   :xpa       (js/require "../resources/images/tokens/mainnet/XPA.png")
-   :xrl       (js/require "../resources/images/tokens/mainnet/XRL.png")
-   :xuc       (js/require "../resources/images/tokens/mainnet/XUC.png")
-   :zrx       (js/require "../resources/images/tokens/mainnet/ZRX.png")
-   :zsc       (js/require "../resources/images/tokens/mainnet/ZSC.png")})
+  {:eth  (js/require "../resources/images/tokens/mainnet/ETH-token.png")
+   :knc  (js/require "../resources/images/tokens/mainnet/KNC.png")
+   :mana (js/require "../resources/images/tokens/mainnet/MANA.png")
+   :rare (js/require "../resources/images/tokens/mainnet/RARE.png")
+   :dai  (js/require "../resources/images/tokens/mainnet/DAI.png")
+   :fxc  (js/require "../resources/images/tokens/mainnet/FXC.png")
+   :usdt (js/require "../resources/images/tokens/mainnet/USDT.png")
+   :snt  (js/require "../resources/images/tokens/mainnet/SNT.png")})
 
 (defn get-token
   [k]

src/react_native/core.cljs

@@ -17,7 +17,6 @@
 
 (def view (reagent/adapt-react-class (.-View ^js react-native)))
 (def scroll-view (reagent/adapt-react-class (.-ScrollView ^js react-native)))
-(def safe-area-view (reagent/adapt-react-class (.-SafeAreaView ^js react-native)))
 
 (def ^:private image-native
   (reagent/adapt-react-class (.-Image ^js react-native)))

src/react_native/keychain.cljs

@@ -58,16 +58,14 @@
 
 (defn save-credentials
   "Stores the credentials for the address to the Keychain"
-  ([server username password]
-   (save-credentials server username password identity))
-  ([server username password callback]
-   (-> (.setInternetCredentials ^js react-native-keychain
-                                (string/lower-case server)
-                                username
-                                password
-                                keychain-secure-hardware
-                                keychain-restricted-availability)
-       (.then callback))))
+  [server username password callback]
+  (-> (.setInternetCredentials ^js react-native-keychain
+                               (string/lower-case server)
+                               username
+                               password
+                               keychain-secure-hardware
+                               keychain-restricted-availability)
+      (.then callback)))
 
 (defn get-credentials
   "Gets the credentials for a specified server from the Keychain"

src/status_im/chat/models/input.cljs

@@ -5,11 +5,11 @@
     [goog.object :as object]
     [re-frame.core :as re-frame]
     [status-im.chat.models.mentions :as mentions]
+    [status-im.chat.models.message :as chat.message]
     [status-im.chat.models.message-content :as message-content]
     [status-im.data-store.messages :as data-store-messages]
     [status-im2.constants :as constants]
     [status-im2.contexts.chat.composer.link-preview.events :as link-preview]
-    [status-im2.contexts.chat.messages.transport.events :as messages.transport]
     [taoensso.timbre :as log]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]
@@ -205,7 +205,7 @@
       (rf/merge cofx
                 (clean-input (:current-chat-id db))
                 (link-preview/reset-unfurled)
-                (messages.transport/send-chat-messages messages)))))
+                (chat.message/send-messages messages)))))
 
 (rf/defn send-audio-message
   [{:keys [db] :as cofx} audio-path duration current-chat-id]
@@ -214,26 +214,25 @@
     (when-not (string/blank? audio-path)
       (rf/merge
        {:db (assoc-in db [:chat/inputs current-chat-id :metadata :responding-to-message] nil)}
-       (messages.transport/send-chat-messages
-        [(merge
-          {:chat-id           current-chat-id
-           :content-type      constants/content-type-audio
-           :audio-path        audio-path
-           :audio-duration-ms duration
-           :text              (i18n/label :t/update-to-listen-audio {"locale" "en"})}
-          (when message-id
-            {:response-to message-id}))])))))
+       (chat.message/send-message
+        (merge
+         {:chat-id           current-chat-id
+          :content-type      constants/content-type-audio
+          :audio-path        audio-path
+          :audio-duration-ms duration
+          :text              (i18n/label :t/update-to-listen-audio {"locale" "en"})}
+         (when message-id
+           {:response-to message-id})))))))
 
 (rf/defn send-sticker-message
   [cofx {:keys [hash packID pack]} current-chat-id]
   (when-not (or (string/blank? hash) (and (string/blank? packID) (string/blank? pack)))
-    (messages.transport/send-chat-messages
-     cofx
-     [{:chat-id      current-chat-id
-       :content-type constants/content-type-sticker
-       :sticker      {:hash hash
-                      :pack (int (if (string/blank? packID) pack packID))}
-       :text         (i18n/label :t/update-to-see-sticker {"locale" "en"})}])))
+    (chat.message/send-message cofx
+                               {:chat-id      current-chat-id
+                                :content-type constants/content-type-sticker
+                                :sticker      {:hash hash
+                                               :pack (int (if (string/blank? packID) pack packID))}
+                                :text         (i18n/label :t/update-to-see-sticker {"locale" "en"})})))
 
 (rf/defn send-edited-message
   [{:keys [db]

src/status_im/chat/models/loading.cljs

@@ -76,9 +76,9 @@
 
 (rf/defn handle-mark-all-read-in-community-successful
   {:events [::mark-all-read-in-community-successful]}
-  [{:keys [db] :as cofx} {:keys [chats] :as _messenger-response}]
+  [{:keys [db] :as cofx} chat-ids]
   (rf/merge cofx
-            {:db       (reduce mark-chat-all-read db (map :id chats))
+            {:db       (reduce mark-chat-all-read db chat-ids)
              :dispatch [:activity-center.notifications/fetch-unread-count]}))
 
 (rf/defn handle-mark-all-read

src/status_im/chat/models/message.cljs

@@ -5,6 +5,7 @@
     [react-native.platform :as platform]
     [status-im.chat.models.loading :as chat.loading]
     [status-im.data-store.messages :as data-store.messages]
+    [status-im.transport.message.protocol :as protocol]
     [status-im.utils.deprecated-types :as types]
     [status-im2.contexts.chat.messages.delete-message.events :as delete-message]
     [status-im2.contexts.chat.messages.list.events :as message-list]
@@ -20,6 +21,12 @@
   [db chat-id clock-value]
   (>= (get-in db [:chats chat-id :deleted-at-clock-value]) clock-value))
 
+(defn add-timeline-message
+  [acc chat-id message-id message]
+  (-> acc
+      (update-in [:db :messages chat-id] assoc message-id message)
+      (update-in [:db :message-lists chat-id] message-list/add message)))
+
 (defn hide-message
   "Hide chat message, rebuild message-list"
   [{:keys [db]} chat-id message-id]
@@ -138,6 +145,14 @@
                               :on-error   #(log/error "failed to re-send message" %)}]}
             (update-message-status chat-id message-id :sending)))
 
+(rf/defn send-message
+  [cofx message]
+  (protocol/send-chat-messages cofx [message]))
+
+(rf/defn send-messages
+  [cofx messages]
+  (protocol/send-chat-messages cofx messages))
+
 (rf/defn handle-removed-messages
   {:events [::handle-removed-messages]}
   [{:keys [db] :as cofx} removed-messages]

src/status_im/chat/models/reactions.cljs

@@ -2,6 +2,7 @@
   (:require
     [re-frame.core :as re-frame]
     [status-im.data-store.reactions :as data-store.reactions]
+    [status-im.transport.message.protocol :as message.protocol]
     [status-im2.constants :as constants]
     [taoensso.timbre :as log]
     [utils.re-frame :as rf]
@@ -62,6 +63,23 @@
     (let [reactions-w-chat-id (map #(assoc % :chat-id chat-id) reactions)]
       {:db (update db :reactions (process-reactions (:chats db)) reactions-w-chat-id)})))
 
+
+;; Send reactions
+
+
+(rf/defn send-emoji-reaction
+  {:events [:models.reactions/send-emoji-reaction]}
+  [{{:keys [current-chat-id]} :db :as cofx} reaction]
+  (message.protocol/send-reaction cofx
+                                  (update reaction :chat-id #(or % current-chat-id))))
+
+(rf/defn send-retract-emoji-reaction
+  {:events [:models.reactions/send-emoji-reaction-retraction]}
+  [{{:keys [current-chat-id]} :db :as cofx} reaction]
+  (message.protocol/send-retract-reaction cofx
+                                          (update reaction :chat-id #(or % current-chat-id))))
+
+
 (defn message-reactions
   [current-public-key reactions]
   (reduce

src/status_im/ethereum/subscriptions.cljs

@@ -82,7 +82,4 @@
     "wallet-owned-collectibles-filtering-done" {:fx [[:dispatch
                                                       [:wallet/owned-collectibles-filtering-done
                                                        event]]]}
-    "wallet-get-collectibles-details-done"     {:fx [[:dispatch
-                                                      [:wallet/get-collectible-details-done
-                                                       event]]]}
     (log/warn ::unknown-wallet-event :type type :event event)))

src/status_im/events.cljs

@@ -32,7 +32,9 @@
     status-im.pairing.core
     status-im.profile.core
     status-im.search.core
+    status-im.signals.core
     status-im.stickers.core
+    status-im.transport.core
     status-im.ui.components.invite.events
     [status-im.ui.components.react :as react]
     status-im.ui.screens.notifications-settings.events
@@ -134,7 +136,7 @@
 
 (rf/defn on-return-from-background
   [{:keys [db now] :as cofx}]
-  (let [new-account?            (get db :onboarding/new-account?)
+  (let [new-account?            (get db :onboarding-2/new-account?)
         app-in-background-since (get db :app-in-background-since)
         signed-up?              (get-in db [:profile/profile :signed-up?])
         requires-bio-auth       (and
@@ -192,9 +194,9 @@
   (rf/merge cofx
             (cond
               (= :chat view-id)
-              {:effects.async-storage/set {:chat-id (get-in cofx [:db :current-chat-id])
-                                           :key-uid (get-in cofx [:db :profile/profile :key-uid])}
-               :db                        (assoc db :screens/was-focused-once? true)}
+              {:async-storage-set {:chat-id (get-in cofx [:db :current-chat-id])
+                                   :key-uid (get-in cofx [:db :profile/profile :key-uid])}
+               :db                (assoc db :screens/was-focused-once? true)}
 
               (not (get db :screens/was-focused-once?))
               {:db (assoc db :screens/was-focused-once? true)})

src/status_im/keycard/change_pin.cljs

@@ -141,14 +141,14 @@
   (let [pin          (get-in db [:keycard :pin :original])
         puk-restore? (get-in db [:keycard :pin :puk-restore?])]
     (rf/merge cofx
-              {:db                       (assoc-in db
-                                          [:keycard :pin]
-                                          {:status       nil
-                                           :login        pin
-                                           :confirmation []
-                                           :error-label  nil})
-               :effects.utils/show-popup {:title   ""
-                                          :content (i18n/label :t/pin-changed)}}
+              {:db               (assoc-in db
+                                  [:keycard :pin]
+                                  {:status       nil
+                                   :login        pin
+                                   :confirmation []
+                                   :error-label  nil})
+               :utils/show-popup {:title   ""
+                                  :content (i18n/label :t/pin-changed)}}
               (common/hide-connection-sheet)
               (if puk-restore?
                 (navigation/navigate-to :multiaccounts nil)
@@ -160,14 +160,14 @@
   {:events [:keycard.callback/on-change-puk-success]}
   [{:keys [db] :as cofx}]
   (rf/merge cofx
-            {:db                       (assoc-in db
-                                        [:keycard :pin]
-                                        {:status           nil
-                                         :puk-original     []
-                                         :puk-confirmation []
-                                         :error-label      nil})
-             :effects.utils/show-popup {:title   ""
-                                        :content (i18n/label :t/puk-changed)}}
+            {:db               (assoc-in db
+                                [:keycard :pin]
+                                {:status           nil
+                                 :puk-original     []
+                                 :puk-confirmation []
+                                 :error-label      nil})
+             :utils/show-popup {:title   ""
+                                :content (i18n/label :t/puk-changed)}}
             (common/hide-connection-sheet)
             (navigation/set-stack-root :profile-stack [:my-profile :keycard-settings])))
 
@@ -175,13 +175,13 @@
   {:events [:keycard.callback/on-change-pairing-success]}
   [{:keys [db] :as cofx}]
   (rf/merge cofx
-            {:db                       (assoc-in db
-                                        [:keycard :pin]
-                                        {:status       nil
-                                         :pairing-code nil
-                                         :error-label  nil})
-             :effects.utils/show-popup {:title   ""
-                                        :content (i18n/label :t/pairing-changed)}}
+            {:db               (assoc-in db
+                                [:keycard :pin]
+                                {:status       nil
+                                 :pairing-code nil
+                                 :error-label  nil})
+             :utils/show-popup {:title   ""
+                                :content (i18n/label :t/pairing-changed)}}
             (common/hide-connection-sheet)
             (navigation/set-stack-root :profile-stack [:my-profile :keycard-settings])))
 

src/status_im/keycard/common.cljs

@@ -293,14 +293,14 @@
 (rf/defn show-wrong-keycard-alert
   [_]
   (log/debug "show-wrong-keycard-alert")
-  {:effects.utils/show-popup {:title   (i18n/label :t/wrong-card)
-                              :content (i18n/label :t/wrong-card-text)}})
+  {:utils/show-popup {:title   (i18n/label :t/wrong-card)
+                      :content (i18n/label :t/wrong-card-text)}})
 
 (rf/defn unauthorized-operation
   [cofx]
   (rf/merge cofx
-            {:effects.utils/show-popup {:title   ""
-                                        :content (i18n/label :t/keycard-unauthorized-operation)}}
+            {:utils/show-popup {:title   ""
+                                :content (i18n/label :t/keycard-unauthorized-operation)}}
             (clear-on-card-connected)
             (navigation/set-stack-root :profile-stack [:my-profile :keycard-settings])))
 

src/status_im/keycard/core.cljs

@@ -24,12 +24,12 @@
 (rf/defn show-keycard-has-multiaccount-alert
   [{:keys [db] :as cofx}]
   (rf/merge cofx
-            {:db                              (assoc-in db [:keycard :setup-step] nil)
-             :effects.utils/show-confirmation {:title               nil
-                                               :content             (i18n/label
-                                                                     :t/keycard-has-multiaccount-on-it)
-                                               :cancel-button-text  ""
-                                               :confirm-button-text :t/okay}}))
+            {:db                      (assoc-in db [:keycard :setup-step] nil)
+             :utils/show-confirmation {:title               nil
+                                       :content             (i18n/label
+                                                             :t/keycard-has-multiaccount-on-it)
+                                       :cancel-button-text  ""
+                                       :confirm-button-text :t/okay}}))
 
 (rf/defn load-pin-screen
   [{:keys [db] :as cofx}]
@@ -548,11 +548,10 @@
 
 (rf/defn show-no-keycard-applet-alert
   [_]
-  {:effects.utils/show-confirmation {:title               (i18n/label :t/no-keycard-applet-on-card)
-                                     :content             (i18n/label
-                                                           :t/keycard-applet-install-instructions)
-                                     :cancel-button-text  ""
-                                     :confirm-button-text :t/okay}})
+  {:utils/show-confirmation {:title               (i18n/label :t/no-keycard-applet-on-card)
+                             :content             (i18n/label :t/keycard-applet-install-instructions)
+                             :cancel-button-text  ""
+                             :confirm-button-text :t/okay}})
 
 ;; NOTE: Maybe replaced by multiple events based on on flow to make it easier to maintain.
 ;; Because there are many execution paths it is harder to follow all possible states.

src/status_im/keycard/onboarding.cljs

@@ -35,8 +35,8 @@
       (do
         (log/debug (str "Cannot start keycard installation from state: " card-state))
         (rf/merge cofx
-                  {:effects.utils/show-popup {:title   (i18n/label :t/error)
-                                              :content (i18n/label :t/something-went-wrong)}}
+                  {:utils/show-popup {:title   (i18n/label :t/error)
+                                      :content (i18n/label :t/something-went-wrong)}}
                   (navigation/navigate-to :keycard-authentication-method nil))))))
 
 (rf/defn load-preparing-screen

src/status_im/keycard/recovery.cljs

@@ -221,12 +221,12 @@
 (rf/defn on-backup-success
   [{:keys [db] :as cofx} backup-type]
   (rf/merge cofx
-            {:effects.utils/show-popup {:title   (i18n/label (if (= backup-type :recovery-card)
-                                                               :t/keycard-access-reset
-                                                               :t/keycard-backup-success-title))
-                                        :content (i18n/label (if (= backup-type :recovery-card)
-                                                               :t/keycard-can-use-with-new-passcode
-                                                               :t/keycard-backup-success-body))}}
+            {:utils/show-popup {:title   (i18n/label (if (= backup-type :recovery-card)
+                                                       :t/keycard-access-reset
+                                                       :t/keycard-backup-success-title))
+                                :content (i18n/label (if (= backup-type :recovery-card)
+                                                       :t/keycard-can-use-with-new-passcode
+                                                       :t/keycard-backup-success-body))}}
             (cond
               (multiaccounts.model/logged-in? db)
               (navigation/set-stack-root :profile-stack [:my-profile :keycard-settings])
@@ -373,3 +373,4 @@
    cofx
    {:on-card-connected :keycard/load-recovering-key-screen
     :handler           (common/dispatch-event :keycard/import-multiaccount)}))
+

src/status_im/keycard/unpair.cljs

@@ -83,7 +83,7 @@
                                                :error-label nil
                                                :on-verified nil}))
       :keycard/persist-pairings (dissoc pairings (keyword instance-uid))
-      :effects.utils/show-popup {:title   ""
+      :utils/show-popup         {:title   ""
                                  :content (i18n/label :t/card-unpaired)}}
      (common/clear-on-card-connected)
      (remove-pairing-from-multiaccount nil)
@@ -100,7 +100,7 @@
                                              :error-label nil
                                              :on-verified nil})
              :keycard/get-application-info nil
-             :effects.utils/show-popup     {:title   ""
+             :utils/show-popup             {:title   ""
                                             :content (i18n/label :t/something-went-wrong)}}
             (common/clear-on-card-connected)
             (navigation/navigate-to :keycard-settings nil)))
@@ -139,14 +139,15 @@
                                                :error-label nil
                                                :on-verified nil}))
       :keycard/persist-pairings (dissoc pairings (keyword instance-uid))
-      :effects.utils/show-popup {:title      (i18n/label (if keys-removed-from-card?
+      :utils/show-popup         {:title      (i18n/label (if keys-removed-from-card?
                                                            :t/profile-deleted-title
                                                            :t/database-reset-title))
                                  :content    (i18n/label (if keys-removed-from-card?
                                                            :t/profile-deleted-keycard
                                                            :t/database-reset-content))
                                  :on-dismiss #(re-frame/dispatch [:logout])}}
-     ;;should be reimplemented :key-storage/delete-profile {:key-uid    key-uid
+     ;;should be reimplemented
+     ;;:key-storage/delete-profile {:key-uid    key-uid
      ;;:on-success #(log/debug "[keycard] remove account ok")
      ;;                                  :on-error   #(log/warn "[keycard] remove account: " %)}
      (common/clear-on-card-connected)

src/status_im/mailserver/core.cljs

@@ -194,7 +194,7 @@
   {:events [:mailserver.ui/request-error-pressed]}
   [{:keys [db]}]
   (let [mailserver-error (:mailserver/request-error db)]
-    {:effects.utils/show-confirmation
+    {:utils/show-confirmation
      {:title               (i18n/label :t/mailserver-request-error-title)
       :content             (i18n/label :t/mailserver-request-error-content
                                        {:error mailserver-error})
@@ -290,7 +290,8 @@
          [{:method     "mailservers_addMailserver"
            :params     [(mailserver->rpc mailserver current-fleet)]
            :on-success (fn []
-                         ;; we naively logout if the user is connected to the edited mailserver
+                         ;; we naively logout if the user is connected to
+                         ;; the edited mailserver
                          (when current
                            (re-frame/dispatch
                             [:multiaccounts.logout.ui/logout-confirmed]))
@@ -412,17 +413,3 @@
   (rf/merge cofx
             {:db (dissoc db :mailserver.edit/mailserver)}
             (navigation/navigate-to :edit-mailserver nil)))
-
-(defn add-mailservers
-  [db mailservers]
-  (reduce (fn [db {:keys [fleet id name] :as mailserver}]
-            (let [updated-mailserver
-                  (-> mailserver
-                      (update :id keyword)
-                      (assoc :name (if (seq name) name id))
-                      (dissoc :fleet))]
-              (assoc-in db
-               [:mailserver/mailservers (keyword fleet) (keyword id)]
-               updated-mailserver)))
-          db
-          mailservers))

src/status_im/multiaccounts/logout/core.cljs

@@ -31,7 +31,7 @@
     (rf/merge cofx
               {:set-root                               :progress
                :chat.ui/clear-inputs                   nil
-               :effects.shell/reset-state              nil
+               :shell/reset-state                      nil
                :hide-popover                           nil
                ::logout                                nil
                :profile.settings/webview-debug-changed false

src/status_im/network/core.cljs

@@ -89,7 +89,7 @@
 (rf/defn connect-failure
   {:events [::connect-failure]}
   [_ reason]
-  {:effects.utils/show-popup
+  {:utils/show-popup
    {:title   (i18n/label :t/error)
     :content (str reason)}})
 

src/status_im/node/core.cljs

@@ -74,8 +74,7 @@
    :Nameserver     "8.8.8.8"
    :PeerExchange   true
    :Port           0
-   :UDPPort        0
-   :LightClient    true})
+   :UDPPort        0})
 
 (def login-node-config
   {:WalletConfig (cond-> {:Enabled true}

src/status_im/pairing/core.cljs

@@ -165,9 +165,9 @@
   (if (< (count (filter :enabled? (vals (get-in cofx [:db :pairing/installations]))))
          (inc config/max-installations))
     {:pairing/enable-installation [installation-id]}
-    {:effects.utils/show-popup {:title   (i18n/label :t/pairing-maximum-number-reached-title)
+    {:utils/show-popup {:title   (i18n/label :t/pairing-maximum-number-reached-title)
 
-                                :content (i18n/label :t/pairing-maximum-number-reached-content)}}))
+                        :content (i18n/label :t/pairing-maximum-number-reached-content)}}))
 
 (rf/defn disable-fx
   {:events [:pairing.ui/disable-installation-pressed]}

src/status_im/qr_scanner/core.cljs

@@ -49,8 +49,8 @@
   [{:keys [db] :as cofx} {:keys [chat-id]}]
   (if-not (own-public-key? db chat-id)
     {:dispatch [:chat.ui/start-chat chat-id]}
-    {:effects.utils/show-popup {:title   (i18n/label :t/unable-to-read-this-code)
-                                :content (i18n/label :t/can-not-add-yourself)}}))
+    {:utils/show-popup {:title   (i18n/label :t/unable-to-read-this-code)
+                        :content (i18n/label :t/can-not-add-yourself)}}))
 
 (rf/defn handle-group-chat
   [cofx params]
@@ -71,9 +71,9 @@
                 (navigation/navigate-back))
 
       :else
-      {:effects.utils/show-popup {:title      (i18n/label :t/unable-to-read-this-code)
-                                  :content    (i18n/label :t/ens-name-not-found)
-                                  :on-dismiss #(re-frame/dispatch [:pop-to-root :shell-stack])}})))
+      {:utils/show-popup {:title      (i18n/label :t/unable-to-read-this-code)
+                          :content    (i18n/label :t/ens-name-not-found)
+                          :on-dismiss #(re-frame/dispatch [:pop-to-root :shell-stack])}})))
 
 (rf/defn handle-eip681
   [cofx data]
@@ -103,9 +103,9 @@
       (log/info "Unable to find matcher for scanned value"
                 {:type  type
                  :event ::match-scanned-value})
-      {:dispatch                 [:navigate-back]
-       :effects.utils/show-popup {:title      (i18n/label :t/unable-to-read-this-code)
-                                  :on-dismiss #(re-frame/dispatch [:pop-to-root :shell-stack])}})))
+      {:dispatch         [:navigate-back]
+       :utils/show-popup {:title      (i18n/label :t/unable-to-read-this-code)
+                          :on-dismiss #(re-frame/dispatch [:pop-to-root :shell-stack])}})))
 
 (rf/defn on-scan
   {:events [::on-scan-success]}

src/status_im/signals/core.cljs

@@ -1,12 +1,13 @@
-(ns status-im2.common.signals.events
+(ns status-im.signals.core
   (:require
+    [quo.foundations.colors :as colors]
     [status-im.chat.models.message :as models.message]
     [status-im.ethereum.subscriptions :as ethereum.subscriptions]
     [status-im.mailserver.core :as mailserver]
+    [status-im.transport.message.core :as transport.message]
     [status-im.visibility-status-updates.core :as visibility-status-updates]
-    [status-im2.common.pairing.events :as pairing]
+    [status-im2.constants :as constants]
     [status-im2.contexts.chat.messages.link-preview.events :as link-preview]
-    [status-im2.contexts.chat.messages.transport.events :as messages.transport]
     [status-im2.contexts.communities.discover.events]
     [status-im2.contexts.profile.login.events :as profile.login]
     [status-im2.contexts.push-notifications.local.events :as local-notifications]
@@ -28,6 +29,64 @@
   [{:keys [db]} peer-stats]
   {:db (assoc db :peer-stats peer-stats :peers-count (count (:peers peer-stats)))})
 
+(rf/defn handle-local-pairing-signals
+  [{:keys [db]} {:keys [type action data error] :as event}]
+  (log/info "local pairing signal received"
+            {:event event})
+  (let [{:keys [account password]}      data
+        role                            (get-in db [:syncing :role])
+        receiver?                       (= role constants/local-pairing-role-receiver)
+        sender?                         (= role constants/local-pairing-role-sender)
+        connection-success?             (and (= type
+                                                constants/local-pairing-event-connection-success)
+                                             (= action
+                                                constants/local-pairing-action-connect))
+        error-on-pairing?               (contains? constants/local-pairing-event-errors type)
+        completed-pairing?              (and (= type
+                                                constants/local-pairing-event-transfer-success)
+                                             (= action
+                                                constants/local-pairing-action-pairing-installation))
+        received-account?               (and (= type
+                                                constants/local-pairing-event-received-account)
+                                             (= action
+                                                constants/local-pairing-action-pairing-account)
+                                             (and (some? account) (some? password)))
+        multiaccount-data               (when received-account?
+                                          (merge account {:password password}))
+        navigate-to-syncing-devices?    (and (or connection-success? error-on-pairing?) receiver?)
+        user-in-syncing-devices-screen? (or (= (:view-id db) :syncing-progress)
+                                            (= (:view-id db) :syncing-progress-intro))
+        user-in-sign-in-intro-screen?   (= (:view-id db) :sign-in-intro)]
+    (merge {:db (cond-> db
+                  connection-success?
+                  (assoc-in [:syncing :pairing-status] :connected)
+
+                  received-account?
+                  (assoc-in [:syncing :profile] multiaccount-data)
+
+                  error-on-pairing?
+                  (assoc-in [:syncing :pairing-status] :error)
+
+                  completed-pairing?
+                  (assoc-in [:syncing :pairing-status] :completed))}
+           (cond
+             (and navigate-to-syncing-devices? (not user-in-syncing-devices-screen?))
+             {:dispatch (if user-in-sign-in-intro-screen?
+                          [:navigate-to-within-stack [:syncing-progress-intro :sign-in-intro]]
+                          [:navigate-to :syncing-progress])}
+
+             (and completed-pairing? sender?)
+             {:dispatch [:syncing/clear-states]}
+
+             (and completed-pairing? receiver?)
+             {:dispatch [:profile.login/local-paired-user]}
+
+             (and error-on-pairing? (some? error))
+             {:dispatch [:toasts/upsert
+                         {:icon       :i/alert
+                          :icon-color colors/danger-50
+                          :text       error}]}))))
+
 (rf/defn process
   {:events [:signals/signal-received]}
   [{:keys [db] :as cofx} event-str]
@@ -42,18 +101,18 @@
       "backup.performed"           {:db (assoc-in db
                                          [:profile/profile :last-backup]
                                          (.-lastBackup event-js))}
-      "envelope.sent"              (messages.transport/update-envelopes-status cofx
-                                                                               (:ids
-                                                                                (js->clj event-js
-                                                                                         :keywordize-keys
-                                                                                         true))
-                                                                               :sent)
-      "envelope.expired"           (messages.transport/update-envelopes-status cofx
-                                                                               (:ids
-                                                                                (js->clj event-js
-                                                                                         :keywordize-keys
-                                                                                         true))
-                                                                               :not-sent)
+      "envelope.sent"              (transport.message/update-envelopes-status cofx
+                                                                              (:ids
+                                                                               (js->clj event-js
+                                                                                        :keywordize-keys
+                                                                                        true))
+                                                                              :sent)
+      "envelope.expired"           (transport.message/update-envelopes-status cofx
+                                                                              (:ids
+                                                                               (js->clj event-js
+                                                                                        :keywordize-keys
+                                                                                        true))
+                                                                              :not-sent)
       "message.delivered"          (let [{:keys [chatID messageID]} (js->clj event-js
                                                                              :keywordize-keys
                                                                              true)]
@@ -67,9 +126,9 @@
       "discovery.summary"          (summary cofx (js->clj event-js :keywordize-keys true))
       "mediaserver.started"        {:db (assoc db :mediaserver/port (.-port event-js))}
       "wakuv2.peerstats"           (wakuv2-peer-stats cofx (js->clj event-js :keywordize-keys true))
-      "messages.new"               (messages.transport/sanitize-messages-and-process-response cofx
-                                                                                              event-js
-                                                                                              true)
+      "messages.new"               (transport.message/sanitize-messages-and-process-response cofx
+                                                                                             event-js
+                                                                                             true)
       "wallet"                     (ethereum.subscriptions/new-wallet-event cofx
                                                                             (js->clj event-js
                                                                                      :keywordize-keys
@@ -82,7 +141,7 @@
       "status.updates.timedout"    (visibility-status-updates/handle-visibility-status-updates
                                     cofx
                                     (js->clj event-js :keywordize-keys true))
-      "localPairing"               (pairing/handle-local-pairing-signals
+      "localPairing"               (handle-local-pairing-signals
                                     cofx
                                     (js->clj event-js :keywordize-keys true))
       "curated.communities.update" (rf/dispatch [:fetched-contract-communities

src/status_im/signing/keycard.cljs

@@ -78,9 +78,9 @@
   [{:keys [db]} data typed? result]
   (let [{:keys [result error]} (types/json->clj result)]
     (if error
-      {:dispatch                 [:signing.ui/cancel-is-pressed]
-       :effects.utils/show-popup {:title   (i18n/label :t/sign-request-failed)
-                                  :content (:message error)}}
+      {:dispatch         [:signing.ui/cancel-is-pressed]
+       :utils/show-popup {:title   (i18n/label :t/sign-request-failed)
+                          :content (:message error)}}
       {:db (update db
                    :keycard assoc
                    :hash    result

src/status_im/transport/core.cljs

@@ -0,0 +1,58 @@
+(ns ^{:doc "API to init and stop whisper messaging"} status-im.transport.core
+  (:require
+    [re-frame.core :as re-frame]
+    [status-im.pairing.core :as pairing]
+    [status-im.stickers.core :as stickers]
+    status-im.transport.shh
+    [status-im2.common.universal-links :as universal-links]
+    [taoensso.timbre :as log]
+    [utils.re-frame :as rf]))
+
+(rf/defn set-node-info
+  {:events [:transport.callback/node-info-fetched]}
+  [{:keys [db]} node-info]
+  {:db (assoc db :node-info node-info)})
+
+(rf/defn fetch-node-info-fx
+  [_]
+  {:json-rpc/call [{:method     "admin_nodeInfo"
+                    :on-success #(re-frame/dispatch [:transport.callback/node-info-fetched %])
+                    :on-error   #(log/error "node-info: failed error" %)}]})
+
+(defn add-mailservers
+  [db mailservers]
+  (reduce (fn [db {:keys [fleet id name] :as mailserver}]
+            (let [updated-mailserver
+                  (-> mailserver
+                      (update :id keyword)
+                      (assoc :name (if (seq name) name id))
+                      (dissoc :fleet))]
+              (assoc-in db
+               [:mailserver/mailservers (keyword fleet) (keyword id)]
+               updated-mailserver)))
+          db
+          mailservers))
+
+(rf/defn start-messenger
+  "We should only start receiving messages/processing topics once all the
+  initializiation is completed, otherwise we might receive messages/topics
+  when the state has not been properly initialized."
+  [_]
+  {:json-rpc/call [{:method     "wakuext_startMessenger"
+                    :on-success #(re-frame/dispatch [::messenger-started %])
+                    :on-error   #(log/error "failed to start messenger")}]})
+
+(rf/defn messenger-started
+  {:events [::messenger-started]}
+  [{:keys [db] :as cofx} {:keys [mailservers] :as response}]
+  (log/info "Messenger started")
+  (let [new-account? (get db :onboarding-2/new-account?)]
+    (rf/merge cofx
+              {:db (-> db
+                       (assoc :messenger/started? true)
+                       (add-mailservers mailservers))}
+              (fetch-node-info-fx)
+              (pairing/init)
+              (stickers/load-packs)
+              (when-not new-account?
+                (universal-links/process-stored-event)))))

src/status_im/transport/message/core.cljs

@@ -1,6 +1,5 @@
-(ns status-im2.contexts.chat.messages.transport.events
+(ns ^{:doc "Definition of the StatusMessage protocol"} status-im.transport.message.core
   (:require
-    [clojure.set :as set]
     [clojure.string :as string]
     [status-im.browser.core :as browser]
     [status-im.chat.models.message :as models.message]
@@ -21,7 +20,6 @@
     [status-im2.contexts.chat.messages.pin.events :as messages.pin]
     [status-im2.contexts.contacts.events :as models.contact]
     [status-im2.contexts.shell.activity-center.events :as activity-center]
-    [taoensso.timbre :as log]
     [utils.re-frame :as rf]))
 
 (rf/defn process-next
@@ -349,58 +347,3 @@
            cofx
            (conj set-hash-fxs
                  #(sanitize-messages-and-process-response % response-js false)))))
-
-(defn- link-preview->rpc
-  [preview]
-  (update preview
-          :thumbnail
-          (fn [thumbnail]
-            (set/rename-keys thumbnail {:data-uri :dataUri}))))
-
-(defn build-message
-  [msg]
-  (-> msg
-      (update :link-previews #(map link-preview->rpc %))
-      (set/rename-keys
-       {:album-id          :albumId
-        :audio-duration-ms :audioDurationMs
-        :audio-path        :audioPath
-        :chat-id           :chatId
-        :community-id      :communityId
-        :content-type      :contentType
-        :ens-name          :ensName
-        :image-height      :imageHeight
-        :image-path        :imagePath
-        :image-width       :imageWidth
-        :link-previews     :linkPreviews
-        :response-to       :responseTo
-        :sticker           :sticker
-        :text              :text})))
-
-(rf/defn send-chat-messages
-  [_ messages]
-  {:json-rpc/call [{:method      "wakuext_sendChatMessages"
-                    :params      [(mapv build-message messages)]
-                    :js-response true
-                    :on-success  #(rf/dispatch [:transport/message-sent %])
-                    :on-error    #(do
-                                    (log/warn "failed to send a message" %)
-                                    (js/alert (str "failed to send a message: " %)))}]})
-
-(rf/defn send-emoji-reaction
-  {:events [:reactions/send-emoji-reaction]}
-  [{{:keys [current-chat-id]} :db} {:keys [message-id emoji-id]}]
-  {:json-rpc/call [{:method      "wakuext_sendEmojiReaction"
-                    :params      [current-chat-id message-id emoji-id]
-                    :js-response true
-                    :on-success  #(rf/dispatch [:sanitize-messages-and-process-response %])
-                    :on-error    #(log/error "failed to send a reaction" %)}]})
-
-(rf/defn send-retract-emoji-reaction
-  {:events [:reactions/send-emoji-reaction-retraction]}
-  [_ emoji-reaction-id]
-  {:json-rpc/call [{:method      "wakuext_sendEmojiReactionRetraction"
-                    :params      [emoji-reaction-id]
-                    :js-response true
-                    :on-success  #(rf/dispatch [:sanitize-messages-and-process-response %])
-                    :on-error    #(log/error "failed to send a reaction retraction" %)}]})

src/status_im/transport/message/protocol.cljs

@@ -0,0 +1,59 @@
+(ns ^{:doc "Protocol API and protocol utils"} status-im.transport.message.protocol
+  (:require
+    [clojure.set :as set]
+    [re-frame.core :as re-frame]
+    [taoensso.timbre :as log]
+    [utils.re-frame :as rf]))
+
+(defn- link-preview->rpc
+  [preview]
+  (update preview
+          :thumbnail
+          (fn [thumbnail]
+            (set/rename-keys thumbnail {:data-uri :dataUri}))))
+
+(defn build-message
+  [msg]
+  (-> msg
+      (update :link-previews #(map link-preview->rpc %))
+      (set/rename-keys
+       {:album-id          :albumId
+        :audio-duration-ms :audioDurationMs
+        :audio-path        :audioPath
+        :chat-id           :chatId
+        :community-id      :communityId
+        :content-type      :contentType
+        :ens-name          :ensName
+        :image-height      :imageHeight
+        :image-path        :imagePath
+        :image-width       :imageWidth
+        :link-previews     :linkPreviews
+        :response-to       :responseTo
+        :sticker           :sticker
+        :text              :text})))
+
+(rf/defn send-chat-messages
+  [_ messages]
+  {:json-rpc/call [{:method      "wakuext_sendChatMessages"
+                    :params      [(mapv build-message messages)]
+                    :js-response true
+                    :on-success  #(re-frame/dispatch [:transport/message-sent %])
+                    :on-error    #(do
+                                    (log/warn "failed to send a message" %)
+                                    (js/alert (str "failed to send a message: " %)))}]})
+
+(rf/defn send-reaction
+  [_ {:keys [message-id chat-id emoji-id]}]
+  {:json-rpc/call [{:method      "wakuext_sendEmojiReaction"
+                    :params      [chat-id message-id emoji-id]
+                    :js-response true
+                    :on-success  #(re-frame/dispatch [:sanitize-messages-and-process-response %])
+                    :on-error    #(log/error "failed to send a reaction" %)}]})
+
+(rf/defn send-retract-reaction
+  [_ {:keys [emoji-reaction-id]}]
+  {:json-rpc/call [{:method      "wakuext_sendEmojiReactionRetraction"
+                    :params      [emoji-reaction-id]
+                    :js-response true
+                    :on-success  #(re-frame/dispatch [:sanitize-messages-and-process-response %])
+                    :on-error    #(log/error "failed to send a reaction retraction" %)}]})

src/status_im/transport/shh.cljs

@@ -0,0 +1,35 @@
+(ns ^{:doc "Whisper API and events for managing keys and posting messages"} status-im.transport.shh
+  (:require
+    [re-frame.core :as re-frame]
+    [status-im2.common.json-rpc.events :as json-rpc]
+    [taoensso.timbre :as log]))
+
+(defn generate-sym-key-from-password
+  [{:keys [password on-success on-error]}]
+  (json-rpc/call {:method     "waku_generateSymKeyFromPassword"
+                  :params     [password]
+                  :on-success on-success
+                  :on-error   on-error}))
+
+(defn get-sym-key
+  [{:keys [sym-key-id on-success on-error]}]
+  (json-rpc/call {:method     "waku_getSymKey"
+                  :params     [sym-key-id]
+                  :on-success on-success
+                  :on-error   on-error}))
+
+(defn log-error
+  [error]
+  (log/error :shh/get-new-sym-key-error error))
+
+(re-frame/reg-fx
+ :shh/generate-sym-key-from-password
+ (fn [{:keys [password on-success]}]
+   (generate-sym-key-from-password
+    {:password   password
+     :on-success (fn [sym-key-id]
+                   (get-sym-key {:sym-key-id sym-key-id
+                                 :on-success (fn [sym-key]
+                                               (on-success sym-key sym-key-id))
+                                 :on-error   log-error}))
+     :on-error   log-error})))

src/status_im/transport/utils.cljs

@@ -0,0 +1,18 @@
+(ns ^{:doc "Utils for transport layer"} status-im.transport.utils
+  (:require
+    [clojure.string :as string]))
+
+(defn extract-enode-id
+  [enode]
+  (-> enode
+      (string/split #"/")
+      (get 2 "")
+      (string/split #":")
+      (get 0 "")
+      (string/split "@")
+      (get 0)))
+
+(defn extract-url-components
+  [address]
+  (when address
+    (rest (re-matches #"enode://(.*?)@(.*):(.*)" address))))

src/status_im/ui/screens/privacy_and_security_settings/events.cljs

@@ -56,7 +56,7 @@
   {:events [::on-delete-profile-success]}
   [cofx]
   (log/info "[delete-profile] on-success")
-  {:effects.utils/show-popup
+  {:utils/show-popup
    {:title      (i18n/label :t/profile-deleted-title)
     :content    (i18n/label :t/profile-deleted-content)
     :on-dismiss #(re-frame/dispatch [:logout])}})

src/status_im/ui/screens/profile/user/views.cljs

@@ -207,7 +207,7 @@
                   key-uid]
            :as   profile}
           @(re-frame/subscribe [:profile/profile-with-image])
-          customization-color (or (:color @(re-frame/subscribe [:onboarding/profile]))
+          customization-color (or (:color @(re-frame/subscribe [:onboarding-2/profile]))
                                   @(re-frame/subscribe [:profile/customization-color key-uid]))
           on-share #(re-frame/dispatch [:show-popover
                                         {:view     :share-chat-key

src/status_im/utils/logging/core.cljs

@@ -7,6 +7,7 @@
     [react-native.mail :as react-native-mail]
     [react-native.platform :as platform]
     [status-im.bottom-sheet.events :as bottom-sheet]
+    [status-im.transport.utils :as transport.utils]
     [status-im.ui.components.react :as react]
     [status-im.utils.build :as build]
     [status-im.utils.deprecated-types :as types]
@@ -37,11 +38,6 @@
   {:json-rpc/call [{:method     "web3_clientVersion"
                     :on-success #(re-frame/dispatch [:logging/store-web3-client-version %])}]})
 
-(defn extract-url-components
-  [address]
-  (when address
-    (rest (re-matches #"enode://(.*?)@(.*):(.*)" address))))
-
 (defn email-body
   "logs attached"
   [{:keys [:web3-node-version :mailserver/current-id
@@ -50,7 +46,7 @@
         build-version (str build/version " (" build-number ")")
         separator (string/join (take 40 (repeat "-")))
         [enode-id ip-address port]
-        (extract-url-components (:enode node-info))]
+        (transport.utils/extract-url-components (:enode node-info))]
     (string/join
      "\n"
      (concat [(i18n/label :t/report-bug-email-template
@@ -72,7 +68,7 @@
              (mapcat
               (fn [{:keys [enode]}]
                 (let [[enode-id ip-address port]
-                      (extract-url-components enode)]
+                      (transport.utils/extract-url-components enode)]
                   [(str "id: " enode-id)
                    (str "ip: " ip-address)
                    (str "port: " port)
@@ -155,15 +151,15 @@
 (rf/defn show-client-error
   {:events [:show-client-error]}
   [_]
-  {:effects.utils/show-popup {:title   (i18n/label :t/cant-report-bug)
-                              :content (i18n/label :t/mail-should-be-configured)}})
+  {:utils/show-popup {:title   (i18n/label :t/cant-report-bug)
+                      :content (i18n/label :t/mail-should-be-configured)}})
 
 (rf/defn show-logs-dialog
   {:events [:shake-event]}
   [{:keys [db]}]
   (when-not (:logging/dialog-shown? db)
     {:db (assoc db :logging/dialog-shown? true)
-     :effects.utils/show-confirmation
+     :utils/show-confirmation
      (cond-> {:title               (i18n/label :t/send-logs)
               :content             (i18n/label :t/send-logs-to
                                                {:email report-email})

src/status_im/wallet/accounts/core.cljs

@@ -359,8 +359,8 @@
   (let [deleted-address (:address account)
         dapps-address   (get-in cofx [:db :profile/profile :dapps-address])]
     (if (= (string/lower-case dapps-address) (string/lower-case deleted-address))
-      {:effects.utils/show-popup {:title   (i18n/label :t/warning)
-                                  :content (i18n/label :t/account-is-used)}}
+      {:utils/show-popup {:title   (i18n/label :t/warning)
+                          :content (i18n/label :t/account-is-used)}}
       {:key-storage/delete-imported-key
        {:key-uid    (get-in db [:profile/profile :key-uid])
         :address    (:address account)
@@ -379,8 +379,8 @@
                               (assoc-in [:add-account :scanned-address] address)
                               (assoc-in [:add-account :address] address))}
                      (when-not address
-                       {:effects.utils/show-popup {:title   (i18n/label :t/error)
-                                                   :content (i18n/label :t/invalid-address-qr-code)}}))
+                       {:utils/show-popup {:title   (i18n/label :t/error)
+                                           :content (i18n/label :t/invalid-address-qr-code)}}))
               (navigation/navigate-back))))
 
 (re-frame/reg-fx
@@ -392,3 +392,4 @@
   {:events [:wallet-legacy.accounts/share]}
   [_ address]
   {:list.selection/open-share {:message (eip55/address->checksum address)}})
+

src/status_im/wallet/core.cljs

@@ -246,8 +246,8 @@
         assets                                  (get visible-tokens chain)
         tokens                                  (->> (vals all-tokens)
                                                      (remove #(or (:hidden? %)
-                                                                  ;;if not scan-all-tokens? remove
-                                                                  ;;not visible tokens
+                                                                  ;;if not scan-all-tokens? remove not
+                                                                  ;;visible tokens
                                                                   (and (not scan-all-tokens?)
                                                                        (not (get assets (:symbol %))))))
                                                      (reduce (fn [acc {:keys [address symbol]}]
@@ -822,8 +822,8 @@
 (rf/defn get-buy-crypto-preference
   {:events [::get-buy-crypto]}
   [_]
-  {:effects.async-storage/get {:keys [:buy-crypto-hidden]
-                               :cb   #(re-frame/dispatch [::store-buy-crypto-preference %])}})
+  {:async-storage-get {:keys [:buy-crypto-hidden]
+                       :cb   #(re-frame/dispatch [::store-buy-crypto-preference %])}})
 
 (rf/defn wallet-will-focus
   {:events [::wallet-stack]}
@@ -844,8 +844,8 @@
 (rf/defn hide-buy-crypto
   {:events [::hide-buy-crypto]}
   [{:keys [db]}]
-  {:db                        (assoc db :wallet-legacy/buy-crypto-hidden true)
-   :effects.async-storage/set {:buy-crypto-hidden true}})
+  {:db                (assoc db :wallet-legacy/buy-crypto-hidden true)
+   :async-storage-set {:buy-crypto-hidden true}})
 
 (rf/defn store-buy-crypto
   {:events [::store-buy-crypto-preference]}
@@ -1023,8 +1023,8 @@
 (rf/defn switch-transactions-management-enabled
   {:events [:multiaccounts.ui/switch-transactions-management-enabled]}
   [{:keys [db]} enabled?]
-  {:effects.async-storage/set {:transactions-management-enabled? enabled?}
-   :db                        (assoc db :wallet-legacy/transactions-management-enabled? enabled?)})
+  {:async-storage-set {:transactions-management-enabled? enabled?}
+   :db                (assoc db :wallet-legacy/transactions-management-enabled? enabled?)})
 
 (re-frame/reg-fx
  :wallet-legacy/initialize-transactions-management-enabled
@@ -1072,8 +1072,9 @@
                                                        true])}))
     2000)))
 
-;;TODO: this could be replaced by a single API call on status-go side
-(re-frame/reg-fx :wallet-legacy/initialize-wallet
+(re-frame/reg-fx
+ ;;TODO: this could be replaced by a single API call on status-go side
+ :wallet-legacy/initialize-wallet
  (fn [[network-id network callback]]
    (-> (js/Promise.all
         (clj->js

src/status_im/wallet/custom_tokens/core.cljs

@@ -65,8 +65,8 @@
 (rf/defn not-supported
   {:events [:wallet-legacy.custom-token/not-supported]}
   [{:keys [db]}]
-  {:db                       (assoc-in db [:wallet-legacy/custom-token-screen :in-progress?] nil)
-   :effects.utils/show-popup {:content (i18n/label :t/contract-isnt-supported)}})
+  {:db               (assoc-in db [:wallet-legacy/custom-token-screen :in-progress?] nil)
+   :utils/show-popup {:content (i18n/label :t/contract-isnt-supported)}})
 
 (rf/defn add-custom-token
   {:events [:wallet-legacy.custom-token.ui/add-pressed]}

src/status_im2/common/alert/events.cljs

@@ -1,8 +1,8 @@
-(ns status-im2.common.alert.effects
+(ns status-im2.common.alert.events
   (:require
+    [re-frame.core :as re-frame]
     [react-native.core :as rn]
-    [utils.i18n :as i18n]
-    [utils.re-frame :as rf]))
+    [utils.i18n :as i18n]))
 
 (defn show-popup
   ([title content]
@@ -22,11 +22,12 @@
         (vector
          action-button
          dismiss-button)
-        (vector dismiss-button))
+        dismiss-button)
       (when on-dismiss
         {:cancelable false})))))
 
-(rf/reg-fx :effects.utils/show-popup
+(re-frame/reg-fx
+ :utils/show-popup
  (fn [{:keys [title content on-dismiss]}]
    (show-popup title content on-dismiss)))
 
@@ -49,7 +50,8 @@
     (or extra-options nil))
    {:cancelable false}))
 
-(rf/reg-fx :effects.utils/show-confirmation
+(re-frame/reg-fx
+ :utils/show-confirmation
  (fn [{:keys [title content confirm-button-text on-accept on-cancel cancel-button-text extra-options]}]
    (show-confirmation {:title               title
                        :content             content
@@ -58,3 +60,18 @@
                        :on-accept           on-accept
                        :on-cancel           on-cancel
                        :extra-options       extra-options})))
+
+(defn show-question
+  ([title content on-accept]
+   (show-question title content on-accept nil))
+  ([title content on-accept on-cancel]
+   (rn/alert
+    title
+    content
+    (vector (merge {:text                (i18n/label :t/no)
+                    :accessibility-label :no-button}
+                   (when on-cancel {:onPress on-cancel}))
+            {:text                (i18n/label :t/yes)
+             :onPress             on-accept
+             :accessibility-label :yes-button})
+    nil)))

src/status_im2/common/async_storage.cljs

@@ -0,0 +1,8 @@
+(ns status-im2.common.async-storage
+  (:require
+    [re-frame.core :as re-frame]
+    react-native.async-storage))
+
+(re-frame/reg-fx :async-storage-set (react-native.async-storage/set-item-factory))
+(re-frame/reg-fx :async-storage-get
+                 (fn [{ks :keys cb :cb}] (react-native.async-storage/get-items ks cb)))

src/status_im2/common/async_storage/effects.cljs

@@ -1,11 +0,0 @@
-(ns status-im2.common.async-storage.effects
-  (:require
-    [react-native.async-storage :as async-storage]
-    [utils.re-frame :as rf]))
-
-(rf/reg-fx :effects.async-storage/set
- (async-storage/set-item-factory))
-
-(rf/reg-fx :effects.async-storage/get
- (fn [{ks :keys cb :cb}]
-   (async-storage/get-items ks cb)))

src/status_im2/common/biometric/events.cljs

@@ -2,11 +2,9 @@
   (:require
     [native-module.core :as native-module]
     [re-frame.core :as re-frame]
-    [react-native.async-storage :as async-storage]
     [react-native.platform :as platform]
     [react-native.touch-id :as touch-id]
     [status-im2.common.keychain.events :as keychain]
-    [taoensso.timbre :as log]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
@@ -43,60 +41,16 @@
   {:db (assoc db :biometric/supported-type supported-type)})
 
 (rf/defn show-message
-  {:events [:biometric/show-message]}
   [_ code]
-  (let [handle-error? (and code
-                           (not (contains? #{"USER_CANCELED" "USER_FALLBACK"} code)))
-        content       (if (#{"NOT_AVAILABLE" "NOT_ENROLLED"} code)
-                        (i18n/label :t/grant-face-id-permissions)
-                        (i18n/label :t/biometric-auth-error {:code code}))]
-    (when handle-error?
-      {:effects.utils/show-popup
+  (let [content (if (#{"NOT_AVAILABLE" "NOT_ENROLLED"} code)
+                  (i18n/label :t/grant-face-id-permissions)
+                  (when-not (or (= code "USER_CANCELED") (= code "USER_FALLBACK"))
+                    (i18n/label :t/biometric-auth-error {:code code})))]
+    (when content
+      {:utils/show-popup
        {:title   (i18n/label :t/biometric-auth-login-error-title)
         :content content}})))
 
-(defn- supress-biometry-error-key
-  [key-uid]
-  (keyword (str "biometric/supress-not-enrolled-error-" key-uid)))
-
-;; NOTE: if the account had biometrics registered, but it's not enrolled at the moment,
-;; we should show the error message only once and supress further "NOT_ENROLLED" errors
-;; until biometry is enrolled again. Note that we can only know that when :biometric/authenticate
-;; is dispatched and fails with "NOT_ENROLLED", since :biometric/get-supported-biometric-type
-;; only tells us what kind of biometric is available on the device, but it doesn't know of its
-;; enrollment status.
-(re-frame/reg-fx
- :biometric/supress-not-enrolled-error
- (fn [[key-uid dispatch-event]]
-   (let [storage-key (supress-biometry-error-key key-uid)]
-     (-> (async-storage/get-item storage-key identity)
-         (.then (fn [item]
-                  (when (not item)
-                    (rf/dispatch dispatch-event)
-                    (async-storage/set-item! storage-key true))))
-         (.catch (fn [err]
-                   (log/error "Couldn't supress biometry NOT_ENROLLED error"
-                              {:key-uid key-uid
-                               :event   :biometric/supress-not-enrolled-error
-                               :error   err})))))))
-
-;; NOTE: when biometrics is re-enrolled, we erase the flag in async-storage to assure
-;; the "NOT_ENROLLED" error message will be shown again if biometrics is un-enrolled
-;; in the future.
-(re-frame/reg-fx
- :biometric/reset-not-enrolled-error
- (fn [key-uid]
-   (let [storage-key (supress-biometry-error-key key-uid)]
-     (-> (async-storage/get-item storage-key identity)
-         (.then (fn [supress?]
-                  (when supress?
-                    (async-storage/set-item! storage-key nil))))
-         (.catch (fn [err]
-                   (log/error "Couldn't reset supressing biometry NOT_ENROLLED error"
-                              {:key-uid key-uid
-                               :event   :biometric/reset-not-enrolled-error
-                               :error   err})))))))
-
 (re-frame/reg-fx
  :biometric/authenticate
  (fn [options]