env vars added

* Lightbox refactored and moved to common screens that can be reused
* Events renamed
* Unify constants namespace importing

Makefile

@@ -282,11 +282,12 @@ SIMULATOR=iPhone 13
 # TODO: fix IOS_STATUS_GO_TARGETS to be either amd64 or arm64 when RN is upgraded
 run-ios: export TARGET := ios
 run-ios: export IOS_STATUS_GO_TARGETS := ios/arm64;iossimulator/amd64
+run-ios: export XCBeautify=$(shell which xcbeautify) # for react-native-cli to pick this up and to auto format output
 run-ios: ##@run Build iOS app and start it in a simulator/device
 ifneq ("$(SIMULATOR)", "")
-	npx react-native run-ios --simulator="$(SIMULATOR)" | xcbeautify
+	npx react-native run-ios --simulator="$(SIMULATOR)"
 else
-	npx react-native run-ios | xcbeautify
+	npx react-native run-ios
 endif
 
 show-ios-devices: ##@other shows connected ios device and its name

scripts/build-android.sh

@@ -37,9 +37,14 @@ SECRETS_ENV_VARS=(
     'ALCHEMY_ARBITRUM_MAINNET_TOKEN'
     'ALCHEMY_OPTIMISM_GOERLI_TOKEN'
     'ALCHEMY_OPTIMISM_MAINNET_TOKEN'
+    'ALCHEMY_ETHEREUM_SEPOLIA_TOKEN'
+    'ALCHEMY_ARBITRUM_SEPOLIA_TOKEN'
+    'ALCHEMY_OPTIMISM_SEPOLIA_TOKEN'
     'INFURA_TOKEN'
     'INFURA_TOKEN_SECRET'
     'OPENSEA_API_KEY'
+    'RARIBLE_MAINNET_API_KEY'
+    'RARIBLE_TESTNET_API_KEY'
     'POKT_TOKEN'
 )
 

shadow-cljs.edn

@@ -63,10 +63,15 @@
          {status-im.config/POKT_TOKEN                     #shadow/env "POKT_TOKEN"
           status-im.config/INFURA_TOKEN                   #shadow/env "INFURA_TOKEN"
           status-im.config/OPENSEA_API_KEY                #shadow/env "OPENSEA_API_KEY"
+          status-im.config/RARIBLE_MAINNET_API_KEY        #shadow/env "RARIBLE_MAINNET_API_KEY"
+          status-im.config/RARIBLE_TESTNET_API_KEY        #shadow/env "RARIBLE_TESTNET_API_KEY"
           status-im.config/ALCHEMY_ARBITRUM_GOERLI_TOKEN  #shadow/env "ALCHEMY_ARBITRUM_GOERLI_TOKEN"
           status-im.config/ALCHEMY_OPTIMISM_GOERLI_TOKEN  #shadow/env "ALCHEMY_OPTIMISM_GOERLI_TOKEN"
           status-im.config/ALCHEMY_OPTIMISM_MAINNET_TOKEN #shadow/env "ALCHEMY_OPTIMISM_MAINNET_TOKEN"
-          status-im.config/ALCHEMY_ARBITRUM_MAINNET_TOKEN #shadow/env "ALCHEMY_ARBITRUM_MAINNET_TOKEN"}
+          status-im.config/ALCHEMY_ARBITRUM_MAINNET_TOKEN #shadow/env "ALCHEMY_ARBITRUM_MAINNET_TOKEN"
+          status-im.config/ALCHEMY_ETHEREUM_SEPOLIA_TOKEN #shadow/env "ALCHEMY_ETHEREUM_SEPOLIA_TOKEN"
+          status-im.config/ALCHEMY_ARBITRUM_SEPOLIA_TOKEN #shadow/env "ALCHEMY_ARBITRUM_SEPOLIA_TOKEN"
+          status-im.config/ALCHEMY_OPTIMISM_SEPOLIA_TOKEN #shadow/env "ALCHEMY_OPTIMISM_SEPOLIA_TOKEN"}
          :compiler-options {:output-feature-set :es5
                             ;; We disable `:fn-deprecated` warnings because we
                             ;; are managing deprecation via clj-kondo and we
@@ -90,10 +95,15 @@
     {status-im.config/POKT_TOKEN                     #shadow/env "POKT_TOKEN"
      status-im.config/INFURA_TOKEN                   #shadow/env "INFURA_TOKEN"
      status-im.config/OPENSEA_API_KEY                #shadow/env "OPENSEA_API_KEY"
+     status-im.config/RARIBLE_MAINNET_API_KEY        #shadow/env "RARIBLE_MAINNET_API_KEY"
+     status-im.config/RARIBLE_TESTNET_API_KEY        #shadow/env "RARIBLE_TESTNET_API_KEY"
      status-im.config/ALCHEMY_ARBITRUM_GOERLI_TOKEN  #shadow/env "ALCHEMY_ARBITRUM_GOERLI_TOKEN"
      status-im.config/ALCHEMY_OPTIMISM_GOERLI_TOKEN  #shadow/env "ALCHEMY_OPTIMISM_GOERLI_TOKEN"
      status-im.config/ALCHEMY_OPTIMISM_MAINNET_TOKEN #shadow/env "ALCHEMY_OPTIMISM_MAINNET_TOKEN"
-     status-im.config/ALCHEMY_ARBITRUM_MAINNET_TOKEN #shadow/env "ALCHEMY_ARBITRUM_MAINNET_TOKEN"}
+     status-im.config/ALCHEMY_ARBITRUM_MAINNET_TOKEN #shadow/env "ALCHEMY_ARBITRUM_MAINNET_TOKEN"
+     status-im.config/ALCHEMY_ETHEREUM_SEPOLIA_TOKEN #shadow/env "ALCHEMY_ETHEREUM_SEPOLIA_TOKEN"
+     status-im.config/ALCHEMY_ARBITRUM_SEPOLIA_TOKEN #shadow/env "ALCHEMY_ARBITRUM_SEPOLIA_TOKEN"
+     status-im.config/ALCHEMY_OPTIMISM_SEPOLIA_TOKEN #shadow/env "ALCHEMY_OPTIMISM_SEPOLIA_TOKEN"}
     :compiler-options {:output-feature-set :es6
                        ;;disable for android build as there
                        ;;is an intermittent warning with deftype
@@ -123,10 +133,15 @@
     status-im.config/POKT_TOKEN                     #shadow/env "POKT_TOKEN"
     status-im.config/INFURA_TOKEN                   #shadow/env "INFURA_TOKEN"
     status-im.config/OPENSEA_API_KEY                #shadow/env "OPENSEA_API_KEY"
+    status-im.config/RARIBLE_MAINNET_API_KEY        #shadow/env "RARIBLE_MAINNET_API_KEY"
+    status-im.config/RARIBLE_TESTNET_API_KEY        #shadow/env "RARIBLE_TESTNET_API_KEY"
     status-im.config/ALCHEMY_ARBITRUM_GOERLI_TOKEN  #shadow/env "ALCHEMY_ARBITRUM_GOERLI_TOKEN"
     status-im.config/ALCHEMY_OPTIMISM_GOERLI_TOKEN  #shadow/env "ALCHEMY_OPTIMISM_GOERLI_TOKEN"
     status-im.config/ALCHEMY_OPTIMISM_MAINNET_TOKEN #shadow/env "ALCHEMY_OPTIMISM_MAINNET_TOKEN"
-    status-im.config/ALCHEMY_ARBITRUM_MAINNET_TOKEN #shadow/env "ALCHEMY_ARBITRUM_MAINNET_TOKEN"}
+    status-im.config/ALCHEMY_ARBITRUM_MAINNET_TOKEN #shadow/env "ALCHEMY_ARBITRUM_MAINNET_TOKEN"
+    status-im.config/ALCHEMY_ETHEREUM_SEPOLIA_TOKEN #shadow/env "ALCHEMY_ETHEREUM_SEPOLIA_TOKEN"
+    status-im.config/ALCHEMY_ARBITRUM_SEPOLIA_TOKEN #shadow/env "ALCHEMY_ARBITRUM_SEPOLIA_TOKEN"
+    status-im.config/ALCHEMY_OPTIMISM_SEPOLIA_TOKEN #shadow/env "ALCHEMY_OPTIMISM_SEPOLIA_TOKEN"}
    :compiler-options
    {;; needed because we override require and it
     ;; messes with source-map which reports callstack

src/legacy/status_im/ens/core.cljs

@@ -231,7 +231,7 @@
   [db]
   (into #{}
         (remove #(= (:type %) :watch)
-                (map #(eip55/address->checksum (:address %)) (get db :profile/wallet-accounts)))))
+                (map #(eip55/address->checksum (:address %)) (vals (get-in db [:wallet :accounts]))))))
 
 ;;NOTE we want to handle only last resolve
 (def resolve-last-id (atom nil))

src/legacy/status_im/ethereum/subscriptions.cljs

@@ -79,10 +79,15 @@
     "recent-history-ready"                     (recent-history-fetching-ended cofx event)
     "fetching-history-error"                   (fetching-error cofx event)
     "non-archival-node-detected"               (non-archival-node-detected cofx event)
+    "pending-transaction-status-changed"       {:fx
+                                                [[:dispatch
+                                                  [:wallet/pending-transaction-status-changed-received
+                                                   event]]]}
     "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]]]}
+    "wallet-tick-reload"                       {:fx [[:dispatch [:wallet/reload]]]}
     (log/debug ::unknown-wallet-event :type type :event event)))

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

@@ -76,15 +76,19 @@
    (str description " · " (i18n/label :t/on-device))])
 
 (defn- context-tag-subtitle
-  [{:keys [community-logo community-name]}]
-  [rn/view
-   {:accessibility-label :context-tag-wrapper
-    :style               {:flex-wrap :wrap}}
-   [context-tag/view
-    {:type           :community
-     :community-name community-name
-     :community-logo community-logo
-     :size           24}]])
+  [{:keys [context-tag-type community-logo community-name account-name emoji customization-color]}]
+  (let [tag-type (or context-tag-type :account)]
+    [rn/view
+     {:accessibility-label :context-tag-wrapper
+      :style               {:flex-wrap :wrap}}
+     [context-tag/view
+      {:type                tag-type
+       :account-name        account-name
+       :emoji               emoji
+       :community-name      community-name
+       :community-logo      community-logo
+       :size                24
+       :customization-color customization-color}]]))
 
 (defn- description-subtitle
   [{:keys [theme blur? description]}]
@@ -95,7 +99,8 @@
    description])
 
 (defn- subtitle
-  [{:keys [type theme blur? keycard? networks description community-name community-logo]}]
+  [{:keys [type theme blur? keycard? networks description community-name community-logo
+           context-tag-type account-name emoji customization-color]}]
   (cond
     (= :keypair type)
     [keypair-subtitle
@@ -118,8 +123,12 @@
 
     (= :context-tag type)
     [context-tag-subtitle
-     {:community-logo community-logo
-      :community-name community-name}]
+     {:context-tag-type    context-tag-type
+      :community-logo      community-logo
+      :community-name      community-name
+      :account-name        account-name
+      :emoji               emoji
+      :customization-color customization-color}]
 
     (and (not= :label type) description)
     [description-subtitle
@@ -173,6 +182,7 @@
 
 (defn- view-internal
   [{:keys [title title-icon type theme description blur? community-name community-logo button-icon
+           account-name emoji
            on-button-press
            on-button-long-press
            button-disabled? account-avatar-emoji account-avatar-type customization-color icon-avatar
@@ -196,14 +206,17 @@
       :theme      theme
       :blur?      blur?}]
     [subtitle
-     {:type           type
-      :theme          theme
-      :blur?          blur?
-      :keycard?       keycard?
-      :networks       networks
-      :description    description
-      :community-name community-name
-      :community-logo community-logo}]]
+     {:type                type
+      :theme               theme
+      :blur?               blur?
+      :keycard?            keycard?
+      :networks            networks
+      :description         description
+      :community-name      community-name
+      :community-logo      community-logo
+      :customization-color customization-color
+      :account-name        account-name
+      :emoji               emoji}]]
    [right-icon
     {:theme                theme
      :type                 type

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

@@ -1,6 +1,6 @@
 (ns quo.components.gradient.gradient-cover.style)
 
 (defn root-container
-  [opacity]
-  {:height  252
+  [opacity height]
+  {:height  (or height 252)
    :opacity opacity})

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

@@ -6,7 +6,7 @@
     [react-native.linear-gradient :as linear-gradient]))
 
 (defn- view-internal
-  [{:keys [customization-color opacity container-style] :or {customization-color :blue}}]
+  [{:keys [customization-color opacity container-style height] :or {customization-color :blue}}]
   (let [color-top    (colors/custom-color customization-color 50 20)
         color-bottom (colors/custom-color customization-color 50 0)]
     [linear-gradient/linear-gradient
@@ -14,6 +14,6 @@
       :colors              [color-top color-bottom]
       :start               {:x 0 :y 0}
       :end                 {:x 0 :y 1}
-      :style               (merge (style/root-container opacity) container-style)}]))
+      :style               (merge (style/root-container opacity height) container-style)}]))
 
 (def view (quo.theme/with-theme view-internal))

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

@@ -0,0 +1,40 @@
+(ns quo.components.list-items.network-list.component-spec
+  (:require [quo.components.list-items.network-list.view :as network-list]
+            [quo.foundations.colors :as colors]
+            [test-helpers.component :as h]))
+
+(defn- render
+  [component]
+  (h/render-with-theme-provider component :light))
+
+(def props
+  {:theme               :light
+   :state               :default
+   :label               "Mainnet"
+   :network-image       873
+   :customization-color :blue
+   :token-value         "100.00 ETH"
+   :fiat-value          "€100.00"})
+
+
+(h/describe "List items: Network List"
+  (h/test "default state explicit"
+    (render [network-list/view props])
+    (h/is-truthy (h/get-by-text "Mainnet")))
+
+  (h/test "Pressed state"
+    (render [network-list/view props])
+    (h/fire-event :on-press-in (h/get-by-label-text ::network-list))
+    (h/wait-for #(h/has-style (h/query-by-label-text ::network-list)
+                              {:backgroundColor (colors/resolve-color :blue :light 5)})))
+
+  (h/test "Active state"
+    (render [network-list/view (assoc props :state :active)])
+    (h/has-style (h/query-by-label-text ::network-list)
+                 {:backgroundColor (colors/resolve-color :blue :light 10)}))
+
+  (h/test "Call on-press"
+    (let [on-press (h/mock-fn)]
+      (render [network-list/view (assoc props :on-press on-press)])
+      (h/fire-event :on-press (h/get-by-label-text ::network-list))
+      (h/was-called on-press))))

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

@@ -0,0 +1,41 @@
+(ns quo.components.list-items.network-list.style
+  (:require [quo.foundations.colors :as colors]))
+
+(defn- background-color
+  [state customization-color theme]
+  (case state
+    :pressed (colors/resolve-color customization-color theme 5)
+    :active  (colors/resolve-color customization-color theme 10)
+    :transparent))
+
+(defn container
+  [state customization-color theme]
+  {:flex-direction     :row
+   :justify-content    :space-between
+   :align-items        :center
+   :padding-horizontal 12
+   :padding-vertical   8
+   :border-radius      12
+   :height             56
+   :background-color   (background-color state customization-color theme)})
+
+(def info
+  {:flex-direction :row
+   :align-items    :center
+   :gap            2})
+
+(def network-image
+  {:border-width     1
+   :border-radius    16
+   :border-color     colors/neutral-80-opa-5
+   :margin-right     8
+   :background-color colors/neutral-80-opa-5
+   :height           32
+   :width            32})
+
+(def values-container
+  {:align-items :flex-end})
+
+(defn fiat-value
+  [theme]
+  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})

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

@@ -0,0 +1,76 @@
+(ns quo.components.list-items.network-list.view
+  (:require
+    [clojure.string :as string]
+    [quo.components.list-items.network-list.style :as style]
+    [quo.components.markdown.text :as text]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]
+    [schema.core :as schema]))
+
+(defn- info
+  [{:keys [network-image label]}]
+  [rn/view {:style style/info}
+   [rn/image
+    {:source network-image
+     :style  style/network-image}]
+   [rn/view
+    [text/text
+     {:weight          :semi-bold
+      :style           {:text-transform :capitalize}
+      :number-of-lines 1}
+     (if (string/blank? label) "-" label)]]])
+
+(defn- values
+  [{:keys [token-value fiat-value theme]}]
+  [rn/view {:style style/values-container}
+   [text/text
+    {:weight          :medium
+     :size            :paragraph-2
+     :number-of-lines 1}
+    token-value]
+   [text/text
+    {:style           (style/fiat-value theme)
+     :size            :paragraph-2
+     :number-of-lines 1}
+    fiat-value]])
+
+(def ?schema
+  [:=>
+   [:catn
+    [:props
+     [:map {:closed true}
+      [:network-image :int]
+      [:label :string]
+      [:fiat-value :string]
+      [:token-value :string]
+      [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
+      [:state [:enum :pressed :active :default]]
+      [:on-press {:optional true} [:maybe fn?]]
+      [:theme :schema.common/theme]]]]
+   :any])
+
+(defn- view-internal
+  []
+  (let [pressed?     (reagent/atom false)
+        on-press-in  #(reset! pressed? true)
+        on-press-out #(reset! pressed? false)]
+    (fn [{:keys [on-press state customization-color theme]
+          :as   props
+          :or   {customization-color :blue}}]
+      (let [internal-state (if @pressed?
+                             :pressed
+                             state)]
+
+        [rn/pressable
+         {:style               (style/container internal-state customization-color theme)
+          :on-press-in         on-press-in
+          :on-press-out        on-press-out
+          :on-press            on-press
+          :accessibility-label :network-list}
+         [info props]
+         [values props]]))))
+
+(def view
+  (quo.theme/with-theme
+   (schema/instrument #'view-internal ?schema)))

src/quo/components/selectors/react_selector/view.cljs

@@ -34,10 +34,9 @@
                                                     (= :pinned use-case)
                                                     theme)
                                     container-style)}
-       [rn/image
-        {:style               {:width 15 :height 15}
-         :accessibility-label :emoji
-         :source              (reaction.resource/get-reaction emoji)}]
+       [rn/text
+        {:accessibility-label :emoji}
+        (reaction.resource/system-emojis emoji)]
        [text/text
         {:size   :paragraph-2
          :weight :semi-bold

src/quo/components/selectors/reaction_resource.cljs

@@ -4,6 +4,14 @@
 (def ^:private reactions
   (resolve-all-reactions))
 
+(def system-emojis
+  {:reaction/thumbs-up   "👍"
+   :reaction/thumbs-down "👎"
+   :reaction/love        "❤"
+   :reaction/laugh       "😂"
+   :reaction/sad         "😢"
+   :reaction/angry       "😡"})
+
 (defn get-reaction
   [reaction]
   (assert (keyword? reaction) "Reaction should be a keyword")

src/quo/components/selectors/reactions_selector/view.cljs

@@ -19,6 +19,5 @@
                                (swap! pressed? not)
                                (when on-press
                                  (on-press e)))}
-       [rn/image
-        {:source (reactions.resource/get-reaction emoji)
-         :style  {:width 20 :height 20}}]])))
+       [rn/text
+        (reactions.resource/system-emojis emoji)]])))

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

@@ -8,19 +8,20 @@
 
 (defn- category-internal
   [{:keys [label data container-style] :as props}]
-  [rn/view {:style (merge (style/container label) container-style)}
-   (when label
-     [text/text
-      {:weight :medium
-       :size   :paragraph-2
-       :style  (style/label props)}
-      label])
-   [rn/view {:style (style/settings-items props)}
-    (for [item data]
-      ^{:key item}
-      [:<>
-       [settings-item/view item]
-       (when-not (= item (last data))
-         [rn/view {:style (style/settings-separator props)}])])]])
+  (let [settings-item (filter identity data)]
+    [rn/view {:style (merge (style/container label) container-style)}
+     (when label
+       [text/text
+        {:weight :medium
+         :size   :paragraph-2
+         :style  (style/label props)}
+        label])
+     [rn/view {:style (style/settings-items props)}
+      (for [item settings-item]
+        ^{:key item}
+        [:<>
+         [settings-item/view item]
+         (when-not (= item (last settings-item))
+           [rn/view {:style (style/settings-separator props)}])])]]))
 
 (def settings-category (quo.theme/with-theme category-internal))

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

@@ -20,7 +20,7 @@
            network-image]
     :or   {subtitle-type :default}}]
   [rn/view {:style style/subtitle-container}
-   (when (not= :small size)
+   (when (and subtitle-type (not= :small size))
      [rn/view {:style (style/subtitle-icon-container subtitle-type)}
       (case subtitle-type
         :icon    [icons/icon icon

src/quo/components/share/share_qr_code/style.cljs

@@ -16,6 +16,12 @@
    :padding-top        12
    :padding-bottom     8})
 
+(def gradient-bg
+  {:position :absolute
+   :top      0
+   :left     0
+   :right    0})
+
 ;;; Header
 (def header-container
   {:flex-direction :row

src/quo/components/share/share_qr_code/view.cljs

@@ -4,14 +4,13 @@
             [oops.core :as oops]
             [quo.components.avatars.account-avatar.view :as account-avatar]
             [quo.components.buttons.button.view :as button]
+            [quo.components.gradient.gradient-cover.view :as gradient-cover]
             [quo.components.markdown.text :as text]
             [quo.components.share.qr-code.view :as qr-code]
             [quo.components.share.share-qr-code.style :as style]
             [quo.components.tabs.tab.view :as tab]
             [quo.theme]
-            [react-native.blur :as blur]
             [react-native.core :as rn]
-            [react-native.platform :as platform]
             [reagent.core :as reagent]
             [utils.i18n :as i18n]))
 
@@ -126,41 +125,44 @@
   [{:keys [share-qr-type qr-image-uri component-width customization-color full-name
            profile-picture emoji on-share-press]
     :as   props}]
-  [rn/view {:style style/content-container}
-   [rn/view
-    {:style style/share-qr-container}
+  [:<>
+   [rn/view {:style style/gradient-bg}
+    [gradient-cover/view {:customization-color customization-color :height 463}]]
+   [rn/view {:style style/content-container}
     [rn/view
-     {:style style/share-qr-inner-container}
-     [account-avatar/view
-      {:customization-color customization-color
-       :emoji               emoji
-       :size                32}]
-     [text/text
-      {:size   :heading-2
-       :weight :semi-bold
-       :style  {:margin-left 8}} full-name]]
-    [share-button {:on-press on-share-press}]]
-   (when (#{:wallet-legacy :wallet-multichain} share-qr-type)
-     [header props])
-   [quo.theme/provider {:theme :light}
-    [qr-code/view
-     {:qr-image-uri        qr-image-uri
-      :size                (style/qr-code-size component-width)
-      :avatar              (if (= share-qr-type :profile)
-                             :profile
-                             :wallet-account)
-      :customization-color customization-color
-      :full-name           full-name
-      :profile-picture     profile-picture
-      :emoji               emoji}]]
-   [rn/view {:style style/bottom-container}
-    (case share-qr-type
-      :profile           [profile-bottom props]
-      :wallet-legacy     [wallet-legacy-bottom props]
-      :wallet-multichain [wallet-multichain-bottom props]
-      nil)]])
+     {:style style/share-qr-container}
+     [rn/view
+      {:style style/share-qr-inner-container}
+      [account-avatar/view
+       {:customization-color customization-color
+        :emoji               emoji
+        :size                32}]
+      [text/text
+       {:size   :heading-2
+        :weight :semi-bold
+        :style  {:margin-left 8}} full-name]]
+     [share-button {:on-press on-share-press}]]
+    (when (#{:wallet-legacy :wallet-multichain} share-qr-type)
+      [header props])
+    [quo.theme/provider {:theme :light}
+     [qr-code/view
+      {:qr-image-uri        qr-image-uri
+       :size                (style/qr-code-size component-width)
+       :avatar              (if (= share-qr-type :profile)
+                              :profile
+                              :wallet-account)
+       :customization-color customization-color
+       :full-name           full-name
+       :profile-picture     profile-picture
+       :emoji               emoji}]]
+    [rn/view {:style style/bottom-container}
+     (case share-qr-type
+       :profile           [profile-bottom props]
+       :wallet-legacy     [wallet-legacy-bottom props]
+       :wallet-multichain [wallet-multichain-bottom props]
+       nil)]]])
 
-(defn view
+(defn- view-internal
   "Receives the following properties:
    - type:                :profile | :wallet-legacy | :wallet-multichain
    - qr-image-uri:        Image source value.
@@ -190,16 +192,9 @@
      Sometimes while using a blur layer on top of another on Android, this component looks
      bad because of the `blur/view`, so we can set `unblur-on-android? true` to fix it.
      "
-  [{:keys [unblur-on-android?] :as props}]
+  [props]
   (reagent/with-let [component-width     (reagent/atom nil)
-                     container-component (if (and platform/android? unblur-on-android?)
-                                           [rn/view {:background-color style/overlay-color}]
-                                           [blur/view
-                                            {:blur-radius      20
-                                             :blur-amount      20
-                                             :blur-type        :transparent
-                                             :overlay-color    style/overlay-color
-                                             :background-color style/overlay-color}])]
+                     container-component [rn/view {:background-color style/overlay-color}]]
     [quo.theme/provider {:theme :dark}
      [rn/view
       {:accessibility-label :share-qr-code
@@ -211,3 +206,6 @@
                (-> props
                    (assoc :component-width @component-width)
                    (clojure.set/rename-keys {:type :share-qr-type}))]))]]))
+
+
+(def view (quo.theme/with-theme view-internal))

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

@@ -1,8 +1,7 @@
 (ns quo.components.wallet.token-input.style
   (:require
     [quo.foundations.colors :as colors]
-    [quo.foundations.typography :as typography]
-    [react-native.platform :as platform]))
+    [quo.foundations.typography :as typography]))
 
 (defn main-container
   [width]
@@ -16,23 +15,55 @@
    :flex-direction     :row
    :justify-content    :space-between})
 
-(defn text-input
+(defn token-name
   [theme]
-  (merge typography/heading-1
-         {:font-weight  "600"
-          :margin-left  8
-          :margin-right (if platform/ios? 6 4)
-          :color        (colors/theme-colors colors/neutral-100 colors/white theme)
-          :padding      0
-          :text-align   :center
-          :height       "100%"}))
+  {:color          (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
+   :margin-right   8
+   :padding-bottom 2})
+
+(def token-label-container
+  {:position       :absolute
+   :left           40 ; token image size + margin
+   :right          0
+   :bottom         0
+   :top            0
+   :flex-direction :row
+   :align-items    :flex-end})
+
+(def text-input-container
+  {:position :absolute
+   :top      0
+   :bottom   0
+   :left     40 ; token image size + margin
+   :right    0})
+
+(def text-input-dimensions
+  (-> typography/heading-1
+      (dissoc :letter-spacing)
+      (assoc :font-weight    "600"
+             :margin-right   5
+             :padding-left   0
+             :padding-right  0
+             :padding-top    0
+             :padding-bottom 0
+             :height         "100%")))
+
+(defn text-input
+  [theme error?]
+  (assoc text-input-dimensions
+         :color
+         (if error?
+           (colors/resolve-color :danger theme)
+           (colors/theme-colors colors/neutral-100 colors/white theme))))
+
+(defn placeholder-text
+  [theme]
+  (colors/theme-colors colors/neutral-40 colors/neutral-50 theme))
 
 (defn divider
-  [width theme]
-  {:height           1
-   :width            width
-   :background-color (colors/theme-colors colors/neutral-10 colors/neutral-90 theme)
-   :margin-vertical  8})
+  [theme]
+  {:margin-vertical  8
+   :background-color (colors/theme-colors colors/neutral-10 colors/neutral-90 theme)})
 
 (def data-container
   {:padding-top        4
@@ -40,3 +71,7 @@
    :flex-direction     :row
    :justify-content    :space-between
    :align-items        :center})
+
+(defn fiat-amount
+  [theme]
+  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})

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

@@ -7,7 +7,6 @@
     [quo.components.tags.network-tags.view :as network-tag]
     [quo.components.utilities.token.view :as token]
     [quo.components.wallet.token-input.style :as style]
-    [quo.foundations.colors :as colors]
     [quo.foundations.common :as common]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
@@ -25,83 +24,120 @@
 
 (defn calc-value
   [{:keys [crypto? currency token value conversion crypto-decimals]}]
-  (let [num-value (if (string? value) (parse-double (or value "0")) value)]
+  (let [num-value (if (string? value)
+                    (or (parse-double value) 0)
+                    value)]
     (if crypto?
       (fiat-format currency num-value conversion)
       (crypto-format num-value conversion crypto-decimals token))))
 
+(defn- data-info
+  [{:keys [theme token crypto-decimals conversion networks title crypto? currency amount error?]}]
+  [rn/view {:style style/data-container}
+   [network-tag/view
+    {:networks networks
+     :title    title
+     :status   (when error? :error)}]
+   [text/text
+    {:size   :paragraph-2
+     :weight :medium
+     :style  (style/fiat-amount theme)}
+    (calc-value {:crypto?         crypto?
+                 :currency        currency
+                 :token           token
+                 :value           amount
+                 :conversion      conversion
+                 :crypto-decimals crypto-decimals})]])
+
+(defn- token-name-text
+  [theme text]
+  [text/text
+   {:style  (style/token-name theme)
+    :size   :paragraph-2
+    :weight :semi-bold}
+   (string/upper-case (or (clj->js text) ""))])
+
+(defn- token-label
+  [{:keys [theme value text]}]
+  [rn/view
+   {:style          style/token-label-container
+    :pointer-events :none}
+   [rn/text-input
+    {:max-length  12
+     :style       style/text-input-dimensions
+     :editable    false
+     :placeholder "0"
+     :opacity     0
+     :value       value}]
+   [token-name-text theme text]])
+
+(defn input-section
+  [{:keys [on-change-text value value-atom]}]
+  (let [input-ref             (atom nil)
+        set-ref               #(reset! input-ref %)
+        focus-input           #(when-let [ref ^js @input-ref]
+                                 (.focus ref))
+        controlled-input?     (some? value)
+        handle-on-change-text (fn [v]
+                                (when-not controlled-input?
+                                  (reset! value-atom v))
+                                (when on-change-text
+                                  (on-change-text v)))]
+    (fn [{:keys [theme token customization-color show-keyboard? crypto? currency value error?]
+          :or   {show-keyboard? true}}]
+      [rn/pressable
+       {:on-press focus-input
+        :style    {:flex 1}}
+       [token/view
+        {:token token
+         :size  :size-32}]
+       [rn/view {:style style/text-input-container}
+        [rn/text-input
+         (cond-> {:style                    (style/text-input theme error?)
+                  :placeholder-text-color   (style/placeholder-text theme)
+                  :auto-focus               true
+                  :ref                      set-ref
+                  :placeholder              "0"
+                  :keyboard-type            :numeric
+                  :max-length               12
+                  :on-change-text           handle-on-change-text
+                  :selection-color          customization-color
+                  :show-soft-input-on-focus show-keyboard?}
+           controlled-input?       (assoc :value value)
+           (not controlled-input?) (assoc :default-value @value-atom))]]
+       [token-label
+        {:theme theme
+         :text  (if crypto? token currency)
+         :value (if controlled-input? value @value-atom)}]])))
+
 (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 crypto-decimals 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)}
+  [{:keys [on-swap]}]
+  (let [width          (:width (rn/get-window))
+        value-atom     (reagent/atom nil)
+        crypto?        (reagent/atom true)
+        handle-on-swap (fn []
+                         (swap! crypto? not)
+                         (when on-swap
+                           (on-swap @crypto?)))]
+    (fn [{:keys [theme container-style value] :as props}]
+      [rn/view {:style (merge (style/main-container width) container-style)}
        [rn/view {:style style/amount-container}
-        [rn/pressable
-         {:on-press #(when @input-ref (.focus ^js @input-ref))
-          :style    {:flex-direction :row
-                     :flex-grow      1
-                     :align-items    :flex-end}}
-         [token/view {:token token :size :size-32}]
-         [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))]
-         [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)) ""))]]
+        [input-section
+         (assoc props
+                :value-atom value-atom
+                :crypto?    @crypto?)]
         [button/button
          {:icon                true
           :icon-only?          true
           :size                32
-          :on-press            (fn []
-                                 (swap! crypto? not)
-                                 (when on-swap
-                                   (on-swap @crypto?)))
+          :on-press            handle-on-swap
           :type                :outline
           :accessibility-label :reorder}
          :i/reorder]]
-       [divider-line/view {:container-style {:margin-vertical 8}}]
-       [rn/view {:style style/data-container}
-        [network-tag/view {:networks networks :title title}]
-        [text/text
-         {:size   :paragraph-2
-          :weight :medium
-          :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
-         (calc-value {:crypto?         @crypto?
-                      :currency        currency
-                      :token           token
-                      :value           (or external-value @value)
-                      :conversion      conversion
-                      :crypto-decimals crypto-decimals})]]])))
+       [divider-line/view {:container-style (style/divider theme)}]
+       [data-info
+        (assoc props
+               :crypto? @crypto?
+               :amount  (or value @value-atom))]])))
 
 (def view (quo.theme/with-theme view-internal))

src/quo/core.cljs

@@ -80,6 +80,7 @@
     quo.components.list-items.community.view
     quo.components.list-items.dapp.view
     quo.components.list-items.menu-item
+    quo.components.list-items.network-list.view
     quo.components.list-items.preview-list.view
     quo.components.list-items.quiz-item.view
     quo.components.list-items.saved-address.view
@@ -302,6 +303,7 @@
 (def community-list quo.components.list-items.community.view/view)
 (def dapp quo.components.list-items.dapp.view/view)
 (def menu-item quo.components.list-items.menu-item/menu-item)
+(def network-list quo.components.list-items.network-list.view/view)
 (def preview-list quo.components.list-items.preview-list.view/view)
 (def quiz-item quo.components.list-items.quiz-item.view/view)
 (def saved-address quo.components.list-items.saved-address.view/view)

src/quo/core_spec.cljs

@@ -48,6 +48,7 @@
     quo.components.list-items.channel.component-spec
     quo.components.list-items.community.component-spec
     quo.components.list-items.dapp.component-spec
+    quo.components.list-items.network-list.component-spec
     quo.components.list-items.quiz-item.component-spec
     quo.components.list-items.saved-address.component-spec
     quo.components.list-items.saved-contact-address.component-spec

src/status_im/common/floating_button_page/view.cljs

@@ -52,7 +52,8 @@
      :remove-listeners    remove-listeners}))
 
 (defn view
-  [{:keys [header footer customization-color gradient-cover?]} &
+  [{:keys [header footer customization-color footer-container-padding gradient-cover?]
+    :or   {footer-container-padding (safe-area/get-top)}} &
    children]
   (reagent/with-let [window-height                (:height (rn/get-window))
                      footer-container-height      (reagent/atom 0)
@@ -94,7 +95,7 @@
                children)]
         [rn/keyboard-avoiding-view
          {:style                    style/keyboard-avoiding-view
-          :keyboard-vertical-offset (if platform/ios? (safe-area/get-top) 0)
+          :keyboard-vertical-offset (if platform/ios? footer-container-padding 0)
           :pointer-events           :box-none}
          [floating-container/view
           {:on-layout       set-footer-container-height

src/status_im/common/lightbox/animations.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.messenger.lightbox.animations
+(ns status-im.common.lightbox.animations
   (:require
     [react-native.reanimated :as reanimated]))
 

src/status_im/common/lightbox/bottom_view.cljs

@@ -1,25 +1,25 @@
-(ns status-im.contexts.chat.messenger.lightbox.bottom-view
+(ns status-im.common.lightbox.bottom-view
   (:require
     [quo.foundations.colors :as colors]
     [react-native.core :as rn]
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
-    [status-im.contexts.chat.messenger.lightbox.animations :as anim]
-    [status-im.contexts.chat.messenger.lightbox.constants :as c]
-    [status-im.contexts.chat.messenger.lightbox.style :as style]
-    [status-im.contexts.chat.messenger.lightbox.text-sheet.view :as text-sheet]
+    [status-im.common.lightbox.animations :as anim]
+    [status-im.common.lightbox.constants :as constants]
+    [status-im.common.lightbox.style :as style]
+    [status-im.common.lightbox.text-sheet.view :as text-sheet]
     [utils.re-frame :as rf]))
 
 (defn get-small-item-layout
   [_ index]
   #js
-   {:length c/small-image-size
-    :offset (* (+ c/small-image-size 8) index)
+   {:length constants/small-image-size
+    :offset (* (+ constants/small-image-size 8) index)
     :index  index})
 
 (defn- f-small-image
   [item index _ {:keys [scroll-index props]}]
-  (let [size (if (= @scroll-index index) c/focused-image-size c/small-image-size)
+  (let [size (if (= @scroll-index index) constants/focused-image-size constants/small-image-size)
         size-value (anim/use-val size)
         {:keys [scroll-index-lock? small-list-ref flat-list-ref]}
         props]
@@ -27,7 +27,7 @@
     [rn/touchable-opacity
      {:active-opacity 1
       :on-press       (fn []
-                        (rf/dispatch [:chat.ui/zoom-out-signal @scroll-index])
+                        (rf/dispatch [:lightbox/zoom-out-signal @scroll-index])
                         (reset! scroll-index-lock? true)
                         (js/setTimeout #(reset! scroll-index-lock? false) 500)
                         (js/setTimeout
@@ -38,9 +38,9 @@
                            (.scrollToIndex ^js @flat-list-ref
                                            #js {:animated true :index index}))
                          (if platform/ios? 50 150))
-                        (rf/dispatch [:chat.ui/update-shared-element-id (:message-id item)]))}
+                        (rf/dispatch [:lightbox/update-animation-shared-element-id (:id item)]))}
      [reanimated/fast-image
-      {:source {:uri (:image (:content item))}
+      {:source {:uri (:image item)}
        :style  (reanimated/apply-animations-to-style {:width  size-value
                                                       :height size-value}
                                                      {:border-radius 10})}]]))
@@ -50,20 +50,26 @@
   [:f> f-small-image item index _ render-data])
 
 (defn bottom-view
-  [messages index scroll-index insets animations derived item-width props state transparent?]
-  (let [padding-horizontal (- (/ item-width 2) (/ c/focused-image-size 2))]
+  [{:keys [images index scroll-index insets animations derived item-width props state transparent?
+           bottom-text-component]}]
+  (let [padding-horizontal (- (/ item-width 2) (/ constants/focused-image-size 2))]
     [reanimated/linear-gradient
      {:colors   [colors/neutral-100-opa-100 colors/neutral-100-opa-80 colors/neutral-100-opa-0]
       :location [0.2 0.9]
       :start    {:x 0 :y 1}
       :end      {:x 0 :y 0}
       :style    (style/gradient-container insets animations derived transparent?)}
-     [text-sheet/view messages animations state props]
+     (when bottom-text-component
+       [text-sheet/view
+        {:overlay-opacity  (:overlay-opacity animations)
+         :overlay-z-index  (:overlay-z-index state)
+         :text-sheet-lock? (:text-sheet-lock? props)
+         :text-component   bottom-text-component}])
      [rn/flat-list
       {:ref                               #(reset! (:small-list-ref props) %)
-       :key-fn                            :message-id
-       :style                             {:height c/small-list-height}
-       :data                              messages
+       :key-fn                            :id
+       :style                             {:height constants/small-list-height}
+       :data                              images
        :render-fn                         small-image
        :render-data                       {:scroll-index scroll-index
                                            :props        props}

src/status_im/common/lightbox/constants.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.messenger.lightbox.constants)
+(ns status-im.common.lightbox.constants)
 
 (def ^:const small-image-size 40)
 (def ^:const focused-extra-size 16)

src/status_im/common/lightbox/effects.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.messenger.lightbox.effects
+(ns status-im.common.lightbox.effects
   (:require [react-native.blob :as blob]
             [react-native.cameraroll :as cameraroll]
             [react-native.fs :as fs]
@@ -10,7 +10,7 @@
   {:trusty platform/ios?
    :path   (str (fs/cache-dir) "/StatusIm_Image.jpeg")})
 
-(rf/reg-fx :effects.chat/share-image
+(rf/reg-fx :effects.lightbox/share-image
  (fn [uri]
    (blob/fetch uri
                config
@@ -20,7 +20,7 @@
                              #(fs/unlink downloaded-url)
                              #(fs/unlink downloaded-url))))))
 
-(rf/reg-fx :effects.chat/save-image-to-gallery
+(rf/reg-fx :effects.lightbox/save-image-to-gallery
  (fn [[uri on-success]]
    (blob/fetch uri
                config

src/status_im/common/lightbox/events.cljs

@@ -0,0 +1,37 @@
+(ns status-im.common.lightbox.events
+  (:require [reagent.core :as reagent]
+            status-im.common.lightbox.effects
+            [utils.re-frame :as rf]))
+
+(rf/reg-event-fx :lightbox/navigate-to-lightbox
+ (fn [{:keys [db]} [animation-shared-element-id screen-params]]
+   (reagent/next-tick #(rf/dispatch [:navigate-to :lightbox screen-params]))
+   {:db (assoc db :animation-shared-element-id animation-shared-element-id)}))
+
+(rf/reg-event-fx :lightbox/update-animation-shared-element-id
+ (fn [{:keys [db]} [animation-shared-element-id]]
+   {:db (assoc db :animation-shared-element-id animation-shared-element-id)}))
+
+(rf/reg-event-fx :lightbox/exit-lightbox-signal
+ (fn [{:keys [db]} [value]]
+   {:db (assoc db :lightbox/exit-signal value)}))
+
+(rf/reg-event-fx :lightbox/zoom-out-signal
+ (fn [{:keys [db]} [value]]
+   {:db (assoc db :lightbox/zoom-out-signal value)}))
+
+(rf/reg-event-fx :lightbox/orientation-change
+ (fn [{:keys [db]} [value]]
+   {:db (assoc db :lightbox/orientation value)}))
+
+(rf/reg-event-fx :lightbox/lightbox-scale
+ (fn [{:keys [db]} [value]]
+   {:db (assoc db :lightbox/scale value)}))
+
+(rf/reg-event-fx :lightbox/share-image
+ (fn [_ [uri]]
+   {:effects.lightbox/share-image uri}))
+
+(rf/reg-event-fx :lightbox/save-image-to-gallery
+ (fn [_ [uri on-success]]
+   {:effects.lightbox/save-image-to-gallery [uri on-success]}))

src/status_im/common/lightbox/style.cljs

@@ -1,9 +1,9 @@
-(ns status-im.contexts.chat.messenger.lightbox.style
+(ns status-im.common.lightbox.style
   (:require
     [quo.foundations.colors :as colors]
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
-    [status-im.contexts.chat.messenger.lightbox.constants :as c]))
+    [status-im.common.lightbox.constants :as constants]))
 
 ;;;; VIEW
 (defn image
@@ -33,7 +33,7 @@
    {:position           :absolute
     :padding-horizontal 20
     :top                (if (or platform/ios? (not landscape?)) top-inset 0)
-    :height             c/top-view-height
+    :height             constants/top-view-height
     :z-index            4
     :flex-direction     :row
     :justify-content    :space-between
@@ -44,7 +44,7 @@
 (defn top-gradient
   [insets]
   {:position :absolute
-   :height   (+ c/top-view-height (:top insets) 0)
+   :height   (+ constants/top-view-height (:top insets) 0)
    :top      (- (:top insets))
    :left     0
    :right    0})
@@ -71,12 +71,12 @@
     :display        (if @transparent? :none :flex)
     :bottom         0
     :padding-bottom (:bottom insets)
-    :padding-top    c/text-min-height
+    :padding-top    constants/text-min-height
     :z-index        3}))
 
 (defn content-container
   [padding-horizontal]
-  {:padding-vertical   c/small-list-padding-vertical
+  {:padding-vertical   constants/small-list-padding-vertical
    :padding-horizontal padding-horizontal
    :align-items        :center
    :justify-content    :center})

src/status_im/common/lightbox/text_sheet/style.cljs

@@ -1,8 +1,8 @@
-(ns status-im.contexts.chat.messenger.lightbox.text-sheet.style
+(ns status-im.common.lightbox.text-sheet.style
   (:require
     [quo.foundations.colors :as colors]
     [react-native.reanimated :as reanimated]
-    [status-im.contexts.chat.messenger.lightbox.constants :as constants]))
+    [status-im.common.lightbox.constants :as constants]))
 
 (defn sheet-container
   [{:keys [height top]}]
@@ -14,10 +14,10 @@
     :right    0}))
 
 (defn text-style
-  [expanding-message?]
+  [expandable-text?]
   {:color             colors/white
    :margin-horizontal 20
-   :align-items       (when-not expanding-message? :center)
+   :align-items       (when-not expandable-text? :center)
    :flex-grow         1})
 
 (def bar-container

src/status_im/common/lightbox/text_sheet/utils.cljs

@@ -1,10 +1,10 @@
-(ns status-im.contexts.chat.messenger.lightbox.text-sheet.utils
+(ns status-im.common.lightbox.text-sheet.utils
   (:require
     [oops.core :as oops]
     [react-native.gesture :as gesture]
     [react-native.reanimated :as reanimated]
     [reagent.core :as r]
-    [status-im.contexts.chat.messenger.lightbox.constants :as constants]))
+    [status-im.common.lightbox.constants :as constants]))
 
 (defn- collapse-sheet
   [{:keys [derived-value overlay-opacity saved-top expanded? overlay-z-index]}]
@@ -16,10 +16,10 @@
 
 (defn sheet-gesture
   [{:keys [derived-value saved-top overlay-opacity gradient-opacity]}
-   expanded-height max-height full-height overlay-z-index expanded? dragging? expanding-message?]
+   expanded-height max-height full-height overlay-z-index expanded? dragging? expandable-text?]
   (let [disable-gesture-update (r/atom false)]
     (-> (gesture/gesture-pan)
-        (gesture/enabled expanding-message?)
+        (gesture/enabled expandable-text?)
         (gesture/on-start (fn []
                             (reset! overlay-z-index 1)
                             (reset! dragging? true)

src/status_im/common/lightbox/text_sheet/view.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.messenger.lightbox.text-sheet.view
+(ns status-im.common.lightbox.text-sheet.view
   (:require
     [quo.foundations.colors :as colors]
     [react-native.core :as rn]
@@ -8,33 +8,31 @@
     [react-native.reanimated :as reanimated]
     [react-native.safe-area :as safe-area]
     [reagent.core :as reagent]
-    [status-im.contexts.chat.messenger.lightbox.constants :as constants]
-    [status-im.contexts.chat.messenger.lightbox.text-sheet.style :as style]
-    [status-im.contexts.chat.messenger.lightbox.text-sheet.utils :as utils]
-    [status-im.contexts.chat.messenger.messages.content.text.view :as message-view]))
+    [status-im.common.lightbox.constants :as constants]
+    [status-im.common.lightbox.text-sheet.style :as style]
+    [status-im.common.lightbox.text-sheet.utils :as utils]))
 
 (defn- text-sheet
-  [messages overlay-opacity overlay-z-index text-sheet-lock?]
+  [_]
   (let [text-height (reagent/atom 0)
         expanded?   (reagent/atom false)
         dragging?   (atom false)]
-    (fn []
-      (let [{:keys [chat-id content]} (first messages)
-            insets                    (safe-area/get-insets)
-            window-height             (:height (rn/get-window))
-            max-height                (- window-height
-                                         constants/text-min-height
-                                         constants/top-view-height
-                                         (:bottom insets)
-                                         (when platform/ios? (:top insets)))
-            full-height               (+ constants/bar-container-height
-                                         constants/text-margin
-                                         constants/line-height
-                                         @text-height)
-            expanded-height           (min max-height full-height)
-            animations                (utils/init-animations overlay-opacity)
-            derived                   (utils/init-derived-animations animations)
-            expanding-message?        (> @text-height (* constants/line-height 2))]
+    (fn [{:keys [overlay-opacity overlay-z-index text-sheet-lock? text-component]}]
+      (let [insets           (safe-area/get-insets)
+            window-height    (:height (rn/get-window))
+            max-height       (- window-height
+                                constants/text-min-height
+                                constants/top-view-height
+                                (:bottom insets)
+                                (when platform/ios? (:top insets)))
+            full-height      (+ constants/bar-container-height
+                                constants/text-margin
+                                constants/line-height
+                                @text-height)
+            expanded-height  (min max-height full-height)
+            animations       (utils/init-animations overlay-opacity)
+            derived          (utils/init-derived-animations animations)
+            expandable-text? (> @text-height (* constants/line-height 2))]
         [rn/view
          [reanimated/linear-gradient
           {:colors         [colors/neutral-100-opa-0 colors/neutral-100]
@@ -51,10 +49,10 @@
                                          overlay-z-index
                                          expanded?
                                          dragging?
-                                         expanding-message?)}
+                                         expandable-text?)}
           [gesture/gesture-detector
            {:gesture (-> (gesture/gesture-tap)
-                         (gesture/enabled (and expanding-message? (not @expanded?)))
+                         (gesture/enabled (and expandable-text? (not @expanded?)))
                          (gesture/on-start (fn []
                                              (utils/expand-sheet animations
                                                                  expanded-height
@@ -63,7 +61,7 @@
                                                                  expanded?
                                                                  text-sheet-lock?))))}
            [reanimated/view {:style (style/sheet-container derived)}
-            (when expanding-message?
+            (when expandable-text?
               [rn/view {:style style/bar-container}
                [rn/view {:style style/bar}]])
             [linear-gradient/linear-gradient
@@ -72,19 +70,17 @@
               :end       {:x 0 :y 0}
               :locations [0.7 0.8 1]
               :style     (style/bottom-gradient (:bottom insets))}]
+
             [gesture/scroll-view
              {:scroll-enabled          false
               :scroll-event-throttle   16
               :bounces                 false
               :style                   {:height (- max-height constants/bar-container-height)}
-              :content-container-style {:padding-top (when (not expanding-message?)
+              :content-container-style {:padding-top (when (not expandable-text?)
                                                        constants/bar-container-height)}}
-             [message-view/render-parsed-text
-              {:content        content
-               :chat-id        chat-id
-               :style-override (style/text-style expanding-message?)
-               :on-layout      #(utils/on-layout % text-height)}]]]]]]))))
+             [rn/view {:on-layout #(utils/on-layout % text-height)}
+              text-component]]]]]]))))
 
 (defn view
-  [messages {:keys [overlay-opacity]} {:keys [overlay-z-index]} {:keys [text-sheet-lock?]}]
-  [:f> text-sheet messages overlay-opacity overlay-z-index text-sheet-lock?])
+  [props]
+  [:f> text-sheet props])

src/status_im/common/lightbox/top_view.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.messenger.lightbox.top-view
+(ns status-im.common.lightbox.top-view
   (:require
     [quo.core :as quo]
     [quo.foundations.colors :as colors]
@@ -6,10 +6,9 @@
     [react-native.orientation :as orientation]
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
-    [status-im.contexts.chat.messenger.lightbox.animations :as anim]
-    [status-im.contexts.chat.messenger.lightbox.constants :as c]
-    [status-im.contexts.chat.messenger.lightbox.style :as style]
-    [utils.datetime :as datetime]
+    [status-im.common.lightbox.animations :as anim]
+    [status-im.common.lightbox.constants :as constants]
+    [status-im.common.lightbox.style :as style]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]
     [utils.url :as url]))
@@ -17,7 +16,7 @@
 (defn animate-rotation
   [result screen-width screen-height insets
    {:keys [rotate top-view-y top-view-x top-view-width top-view-bg]}]
-  (let [top-x (+ (/ c/top-view-height 2) (:top insets))]
+  (let [top-x (+ (/ constants/top-view-height 2) (:top insets))]
     (cond
       (= result orientation/landscape-left)
       (do
@@ -42,9 +41,9 @@
         (anim/animate top-view-bg colors/neutral-100-opa-0)))))
 
 (defn drawer
-  [messages index]
-  (let [{:keys [content]} (nth messages index)
-        uri               (url/replace-port (:image content) (rf/sub [:mediaserver/port]))]
+  [images index]
+  (let [{:keys [image]} (nth images index)
+        uri             (url/replace-port image (rf/sub [:mediaserver/port]))]
     [quo/action-drawer
      [[{:icon                :i/save
         :accessibility-label :save-image
@@ -52,7 +51,7 @@
         :on-press            (fn []
                                (rf/dispatch [:hide-bottom-sheet])
                                (rf/dispatch
-                                [:chat.ui/save-image-to-gallery
+                                [:lightbox/save-image-to-gallery
                                  uri
                                  #(rf/dispatch [:toasts/upsert
                                                 {:id              :random-id
@@ -61,20 +60,19 @@
                                                  :text            (i18n/label :t/photo-saved)}])]))}]]]))
 
 (defn share-image
-  [messages index]
-  (let [{:keys [content]} (nth messages index)
-        uri               (url/replace-port (:image content) (rf/sub [:mediaserver/port]))]
-    (rf/dispatch [:chat.ui/share-image uri])))
+  [images index]
+  (let [{:keys [image]} (nth images index)
+        uri             (url/replace-port image (rf/sub [:mediaserver/port]))]
+    (rf/dispatch [:lightbox/share-image uri])))
 
 (defn top-view
-  [messages insets index animations derived landscape? screen-width]
-  (let [{:keys [from timestamp]}  (first messages)
-        [primary-name _]          (rf/sub [:contacts/contact-two-names-by-identity from])
-        bg-color                  (if landscape?
-                                    colors/neutral-100-opa-70
-                                    colors/neutral-100-opa-0)
+  [images insets index animations derived landscape? screen-width]
+  (let [{:keys [description header]} (nth images @index)
+        bg-color                     (if landscape?
+                                       colors/neutral-100-opa-70
+                                       colors/neutral-100-opa-0)
         {:keys [background-color opacity
-                overlay-opacity]} animations]
+                overlay-opacity]}    animations]
     [reanimated/view
      {:style
       (style/top-view-container (:top insets) screen-width bg-color landscape? animations derived)}
@@ -92,7 +90,7 @@
                     (anim/animate opacity 0)
                     (anim/animate overlay-opacity 0)
                     (rf/dispatch (if platform/ios?
-                                   [:chat.ui/exit-lightbox-signal @index]
+                                   [:lightbox/exit-lightbox-signal @index]
                                    [:navigate-back])))
         :style    style/close-container}
        [quo/icon :close {:size 20 :color colors/white}]]
@@ -100,22 +98,22 @@
        [quo/text
         {:weight :semi-bold
          :size   :paragraph-1
-         :style  {:color colors/white}} primary-name]
+         :style  {:color colors/white}} header]
        [quo/text
         {:weight :medium
          :size   :paragraph-2
-         :style  {:color colors/neutral-40}} (when timestamp (datetime/to-short-str timestamp))]]]
+         :style  {:color colors/neutral-40}} description]]]
      [rn/view {:style style/top-right-buttons}
       [rn/touchable-opacity
        {:active-opacity      1
         :accessibility-label :share-image
-        :on-press            #(share-image messages @index)
+        :on-press            #(share-image images @index)
         :style               (merge style/close-container {:margin-right 12})}
        [quo/icon :share {:size 20 :color colors/white}]]
       [rn/touchable-opacity
        {:active-opacity      1
         :accessibility-label :image-options
         :on-press            #(rf/dispatch [:show-bottom-sheet
-                                            {:content (fn [] [drawer messages @index])}])
+                                            {:content (fn [] [drawer images @index])}])
         :style               style/close-container}
        [quo/icon :options {:size 20 :color colors/white}]]]]))

src/status_im/common/lightbox/utils.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.messenger.lightbox.utils
+(ns status-im.common.lightbox.utils
   (:require
     [clojure.string :as string]
     [oops.core :as oops]
@@ -9,9 +9,9 @@
     [react-native.platform :as platform]
     [react-native.safe-area :as safe-area]
     [reagent.core :as reagent]
-    [status-im.contexts.chat.messenger.lightbox.animations :as anim]
-    [status-im.contexts.chat.messenger.lightbox.constants :as constants]
-    [status-im.contexts.chat.messenger.lightbox.top-view :as top-view]
+    [status-im.common.lightbox.animations :as anim]
+    [status-im.common.lightbox.constants :as constants]
+    [status-im.common.lightbox.top-view :as top-view]
     [utils.re-frame :as rf]
     [utils.worklets.chat.messenger.lightbox :as worklet]))
 
@@ -46,7 +46,7 @@
                       (if platform/ios? 250 100)))
      (swap! timers assoc :mount-index-lock (js/setTimeout #(reset! scroll-index-lock? false) 300))
      (fn []
-       (rf/dispatch [:chat.ui/zoom-out-signal nil])
+       (rf/dispatch [:lightbox/zoom-out-signal nil])
        (when platform/android?
          (rf/dispatch [:chat.ui/lightbox-scale 1]))
        (clear-timers timers)))))
@@ -69,7 +69,7 @@
         landscape?    (string/includes? result orientation/landscape)
         item-width    (if (and landscape? platform/ios?) screen-height screen-width)]
     (when (or landscape? (= result orientation/portrait))
-      (rf/dispatch [:chat.ui/orientation-change result]))
+      (rf/dispatch [:lightbox/orientation-change result]))
     (cond
       landscape?
       (orientation/lock-to-landscape "lightbox")
@@ -148,11 +148,11 @@
    :timers             (atom {})})
 
 (defn init-state
-  [messages index]
+  [images index]
   ;; The initial value of data is the image that was pressed (and not the whole album) in order
   ;; for the transition animation to execute properly, otherwise it would animate towards
   ;; outside the screen (even if we have `initialScrollIndex` set).
-  {:data             (reagent/atom (if (number? index) [(nth messages index)] []))
+  {:data             (reagent/atom (if (number? index) [(nth images index)] []))
    :scroll-index     (reagent/atom index)
    :transparent?     (reagent/atom false)
    :set-full-height? (reagent/atom false)

src/status_im/common/lightbox/view.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.messenger.lightbox.view
+(ns status-im.common.lightbox.view
   (:require
     [clojure.string :as string]
     [oops.core :as oops]
@@ -9,13 +9,13 @@
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
     [react-native.safe-area :as safe-area]
-    [status-im.contexts.chat.messenger.lightbox.animations :as anim]
-    [status-im.contexts.chat.messenger.lightbox.bottom-view :as bottom-view]
-    [status-im.contexts.chat.messenger.lightbox.constants :as constants]
-    [status-im.contexts.chat.messenger.lightbox.style :as style]
-    [status-im.contexts.chat.messenger.lightbox.top-view :as top-view]
-    [status-im.contexts.chat.messenger.lightbox.utils :as utils]
-    [status-im.contexts.chat.messenger.lightbox.zoomable-image.view :as zoomable-image]
+    [status-im.common.lightbox.animations :as anim]
+    [status-im.common.lightbox.bottom-view :as bottom-view]
+    [status-im.common.lightbox.constants :as constants]
+    [status-im.common.lightbox.style :as style]
+    [status-im.common.lightbox.top-view :as top-view]
+    [status-im.common.lightbox.utils :as utils]
+    [status-im.common.lightbox.zoomable-image.view :as zoomable-image]
     [utils.re-frame :as rf]))
 
 (defn get-item-layout
@@ -33,9 +33,10 @@
       (reset! scroll-index index)
       (when @small-list-ref
         (.scrollToIndex ^js @small-list-ref #js {:animated true :index index}))
-      (rf/dispatch [:chat.ui/update-shared-element-id (:message-id (oops/oget changed :item))]))))
+      (rf/dispatch [:lightbox/update-animation-shared-element-id
+                    (:id (oops/oget changed :item))]))))
 
-(defn image
+(defn image-view
   [message index _ {:keys [screen-width screen-height] :as args}]
   [rn/view
    {:style (style/image (+ screen-width constants/separator-width) screen-height)}
@@ -43,30 +44,31 @@
    [rn/view {:style {:width constants/separator-width}}]])
 
 (defn lightbox-content
-  [props {:keys [data transparent? scroll-index set-full-height?] :as state}
-   animations derived messages index handle-items-changed]
-  (let [insets           (safe-area/get-insets)
-        window           (rn/get-window)
-        window-width     (:width window)
-        window-height    (if platform/android?
-                           (+ (:height window) (:top insets))
-                           (:height window))
-        curr-orientation (or (rf/sub [:lightbox/orientation]) orientation/portrait)
-        landscape?       (string/includes? curr-orientation orientation/landscape)
-        horizontal?      (or platform/android? (not landscape?))
-        inverted?        (and platform/ios? (= curr-orientation orientation/landscape-right))
-        screen-width     (if (or platform/ios? (= curr-orientation orientation/portrait))
-                           window-width
-                           window-height)
-        screen-height    (if (or platform/ios? (= curr-orientation orientation/portrait))
-                           window-height
-                           window-width)
-        item-width       (if (and landscape? platform/ios?) screen-height screen-width)]
+  [{:keys [props state animations derived images index handle-items-changed bottom-text-component]}]
+  (let [{:keys [data transparent? scroll-index
+                set-full-height?]} state
+        insets                     (safe-area/get-insets)
+        window                     (rn/get-window)
+        window-width               (:width window)
+        window-height              (if platform/android?
+                                     (+ (:height window) (:top insets))
+                                     (:height window))
+        curr-orientation           (or (rf/sub [:lightbox/orientation]) orientation/portrait)
+        landscape?                 (string/includes? curr-orientation orientation/landscape)
+        horizontal?                (or platform/android? (not landscape?))
+        inverted?                  (and platform/ios? (= curr-orientation orientation/landscape-right))
+        screen-width               (if (or platform/ios? (= curr-orientation orientation/portrait))
+                                     window-width
+                                     window-height)
+        screen-height              (if (or platform/ios? (= curr-orientation orientation/portrait))
+                                     window-height
+                                     window-width)
+        item-width                 (if (and landscape? platform/ios?) screen-height screen-width)]
     [reanimated/view
      {:style (reanimated/apply-animations-to-style {:background-color (:background-color animations)}
                                                    {:height screen-height})}
      (when-not @transparent?
-       [:f> top-view/top-view messages insets scroll-index animations derived landscape?
+       [:f> top-view/top-view images insets scroll-index animations derived landscape?
         screen-width])
      [gesture/gesture-detector
       {:gesture (utils/drag-gesture animations (and landscape? platform/ios?) set-full-height?)}
@@ -92,7 +94,7 @@
          :scroll-event-throttle             8
          :style                             {:width (+ screen-width constants/separator-width)}
          :data                              @data
-         :render-fn                         image
+         :render-fn                         image-view
          :render-data                       {:opacity-value     (:opacity animations)
                                              :overlay-opacity   (:overlay-opacity animations)
                                              :border-value      (:border animations)
@@ -118,26 +120,47 @@
      ;; NOTE: not un-mounting bottom-view based on `transparent?` (like we do with the top-view
      ;;       above), since we need to save the state of the text-sheet position. Instead, we use
      ;;       the `:display` style property to hide the bottom-sheet.
-     (when (not landscape?)
-       [:f> bottom-view/bottom-view messages index scroll-index insets animations derived
-        item-width props state transparent?])]))
+     (when (and (not landscape?) (or bottom-text-component (> (count images) 1)))
+       [:f> bottom-view/bottom-view
+        {:images                images
+         :index                 index
+         :scroll-index          scroll-index
+         :insets                insets
+         :animations            animations
+         :derived               derived
+         :item-width            item-width
+         :props                 props
+         :state                 state
+         :transparent?          transparent?
+         :bottom-text-component bottom-text-component}])]))
 
 (defn- f-lightbox
   []
-  (let [{:keys [messages index]} (rf/sub [:get-screen-params])
-        props                    (utils/init-props)
-        state                    (utils/init-state messages index)
-        handle-items-changed     (fn [e]
-                                   (on-viewable-items-changed e props state))]
+  (let [{:keys [images index bottom-text-component]} (rf/sub [:get-screen-params])
+        props
+        (utils/init-props)
+        state
+        (utils/init-state images index)
+        handle-items-changed
+        (fn [e]
+          (on-viewable-items-changed e props state))]
     (fn []
-      (let [animations (utils/init-animations (count messages) index)
+      (let [animations (utils/init-animations (count images) index)
             derived    (utils/init-derived-animations animations)]
         (anim/animate (:background-color animations) colors/neutral-100)
-        (reset! (:data state) messages)
+        (reset! (:data state) images)
         (when platform/ios? ; issue: https://github.com/wix/react-native-navigation/issues/7726
           (utils/orientation-change props state animations))
         (utils/effect props animations index)
-        [:f> lightbox-content props state animations derived messages index handle-items-changed]))))
+        [:f> lightbox-content
+         {:props                 props
+          :state                 state
+          :animations            animations
+          :derived               derived
+          :images                images
+          :index                 index
+          :handle-items-changed  handle-items-changed
+          :bottom-text-component bottom-text-component}]))))
 
 (defn lightbox
   []

src/status_im/common/lightbox/zoomable_image/constants.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.messenger.lightbox.zoomable-image.constants)
+(ns status-im.common.lightbox.zoomable-image.constants)
 
 (def ^:const min-scale 1)
 

src/status_im/common/lightbox/zoomable_image/style.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.messenger.lightbox.zoomable-image.style
+(ns status-im.common.lightbox.zoomable-image.style
   (:require
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]))

src/status_im/common/lightbox/zoomable_image/utils.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.messenger.lightbox.zoomable-image.utils
+(ns status-im.common.lightbox.zoomable-image.utils
   (:require
     [clojure.string :as string]
     [react-native.core :as rn]
@@ -6,8 +6,8 @@
     [react-native.orientation :as orientation]
     [react-native.platform :as platform]
     [reagent.core :as reagent]
-    [status-im.contexts.chat.messenger.lightbox.animations :as anim]
-    [status-im.contexts.chat.messenger.lightbox.zoomable-image.constants :as constants]
+    [status-im.common.lightbox.animations :as anim]
+    [status-im.common.lightbox.zoomable-image.constants :as constants]
     [utils.re-frame :as rf]))
 
 ;;; Helpers
@@ -97,7 +97,7 @@
         (rescale constants/min-scale true)
         (js/setTimeout #(rf/dispatch [:navigate-back]) 70))
       (rf/dispatch [:navigate-back]))
-    (js/setTimeout #(rf/dispatch [:chat.ui/exit-lightbox-signal nil]) 500)))
+    (js/setTimeout #(rf/dispatch [:lightbox/exit-lightbox-signal nil]) 500)))
 
 (defn handle-zoom-out-signal
   "Zooms out when pressing on another photo from the small bottom list"

src/status_im/common/lightbox/zoomable_image/view.cljs

@@ -1,4 +1,4 @@
-(ns status-im.contexts.chat.messenger.lightbox.zoomable-image.view
+(ns status-im.common.lightbox.zoomable-image.view
   (:require
     [oops.core :refer [oget]]
     [react-native.core :as rn]
@@ -7,10 +7,10 @@
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
     [reagent.core :as r]
-    [status-im.contexts.chat.messenger.lightbox.animations :as anim]
-    [status-im.contexts.chat.messenger.lightbox.zoomable-image.constants :as c]
-    [status-im.contexts.chat.messenger.lightbox.zoomable-image.style :as style]
-    [status-im.contexts.chat.messenger.lightbox.zoomable-image.utils :as utils]
+    [status-im.common.lightbox.animations :as anim]
+    [status-im.common.lightbox.zoomable-image.constants :as c]
+    [status-im.common.lightbox.zoomable-image.style :as style]
+    [status-im.common.lightbox.zoomable-image.utils :as utils]
     [utils.re-frame :as rf]
     [utils.url :as url]))
 
@@ -206,7 +206,7 @@
              (anim/animate-decay pan-y-start velocity [lower-bound upper-bound]))))))))
 
 (defn- f-zoomable-image
-  [dimensions animations state rescale curr-orientation content focused? index render-data
+  [dimensions animations state rescale curr-orientation image focused? index render-data
    image-dimensions-nil?]
   (let [{:keys [transparent? set-full-height?]} render-data
         portrait? (= curr-orientation orientation/portrait)
@@ -229,7 +229,7 @@
                                (= curr-orientation orientation/portrait))}
       [reanimated/fast-image
        (merge
-        {:source    {:uri (url/replace-port (:image content) (rf/sub [:mediaserver/port]))}
+        {:source    {:uri (url/replace-port image (rf/sub [:mediaserver/port]))}
          :native-ID (when focused? :shared-element)
          :style     (style/image dimensions animations render-data index)}
         (when image-dimensions-nil?
@@ -238,12 +238,12 @@
 (defn zoomable-image
   []
   (let [state (utils/init-state)]
-    (fn [{:keys [image-width image-height content message-id]} index render-data]
-      (let [shared-element-id                           (rf/sub [:shared-element-id])
+    (fn [{:keys [image-width image-height image id]} index render-data]
+      (let [animation-shared-element-id                 (rf/sub [:animation-shared-element-id])
             exit-lightbox-signal                        (rf/sub [:lightbox/exit-signal])
             zoom-out-signal                             (rf/sub [:lightbox/zoom-out-signal])
             {:keys [set-full-height? curr-orientation]} render-data
-            focused?                                    (= shared-element-id message-id)
+            focused?                                    (= animation-shared-element-id id)
             ;; TODO - remove `image-dimensions` check, once
             ;; https://github.com/status-im/status-desktop/issues/10944 is fixed
             image-dimensions-nil?                       (not (and image-width image-height))
@@ -269,5 +269,5 @@
                                              rescale
                                              set-full-height?))
         (utils/handle-zoom-out-signal zoom-out-signal index (anim/get-val (:scale animations)) rescale)
-        [:f> f-zoomable-image dimensions animations state rescale curr-orientation content focused?
+        [:f> f-zoomable-image dimensions animations state rescale curr-orientation image focused?
          index render-data image-dimensions-nil?]))))

src/status_im/config.cljs

@@ -15,6 +15,11 @@
 (goog-define ALCHEMY_OPTIMISM_GOERLI_TOKEN "")
 (goog-define ALCHEMY_OPTIMISM_MAINNET_TOKEN "")
 (goog-define ALCHEMY_ARBITRUM_MAINNET_TOKEN "")
+(goog-define ALCHEMY_ETHEREUM_SEPOLIA_TOKEN "")
+(goog-define ALCHEMY_ARBITRUM_SEPOLIA_TOKEN "")
+(goog-define ALCHEMY_OPTIMISM_SEPOLIA_TOKEN "")
+(goog-define RARIBLE_MAINNET_API_KEY "")
+(goog-define RARIBLE_TESTNET_API_KEY "")
 (goog-define OPENSEA_API_KEY "")
 
 (def mainnet-rpc-url (str "https://eth-archival.gateway.pokt.network/v1/lb/" POKT_TOKEN))

src/status_im/constants.cljs

@@ -406,11 +406,14 @@
 
 ;; wallet
 (def ^:const mainnet-chain-id 1)
-(def ^:const optimism-chain-id 10)
-(def ^:const optimism-test-chain-id 420)
-(def ^:const arbitrum-chain-id 42161)
-(def ^:const arbitrum-test-chain-id 421613)
 (def ^:const goerli-chain-id 5)
+(def ^:const sepolia-chain-id 11155111)
+(def ^:const optimism-chain-id 10)
+(def ^:const optimism-goerli-chain-id 420)
+(def ^:const optimism-sepolia-chain-id 11155420)
+(def ^:const arbitrum-chain-id 42161)
+(def ^:const arbitrum-goerli-chain-id 421613)
+(def ^:const arbitrum-sepolia-chain-id 421614)
 
 (def ^:const mainnet-short-name "eth")
 (def ^:const optimism-short-name "opt")

src/status_im/contexts/chat/events.cljs

@@ -4,13 +4,12 @@
     [legacy.status-im.chat.models.loading :as loading]
     [legacy.status-im.data-store.chats :as chats-store]
     [re-frame.core :as re-frame]
-    [reagent.core :as reagent]
+    status-im.common.lightbox.events
     [status-im.common.muting.helpers :refer [format-mute-till]]
     [status-im.constants :as constants]
     [status-im.contexts.chat.contacts.events :as contacts-store]
     status-im.contexts.chat.effects
     [status-im.contexts.chat.messenger.composer.link-preview.events :as link-preview]
-    status-im.contexts.chat.messenger.lightbox.events
     status-im.contexts.chat.messenger.messages.content.reactions.events
     [status-im.contexts.chat.messenger.messages.delete-message-for-me.events :as delete-for-me]
     [status-im.contexts.chat.messenger.messages.delete-message.events :as delete-message]
@@ -394,38 +393,6 @@
   [cofx chat-id]
   (navigation/navigate-to cofx :chat-pinned-messages {:chat-id chat-id}))
 
-
-(rf/defn update-shared-element-id
-  {:events [:chat.ui/update-shared-element-id]}
-  [{:keys [db]} shared-element-id]
-  {:db (assoc db :shared-element-id shared-element-id)})
-
-(rf/defn navigate-to-lightbox
-  {:events [:chat.ui/navigate-to-lightbox]}
-  [{:keys [db]} shared-element-id screen-params]
-  (reagent/next-tick #(rf/dispatch [:navigate-to :lightbox screen-params]))
-  {:db (assoc db :shared-element-id shared-element-id)})
-
-(rf/defn exit-lightbox-signal
-  {:events [:chat.ui/exit-lightbox-signal]}
-  [{:keys [db]} value]
-  {:db (assoc db :lightbox/exit-signal value)})
-
-(rf/defn zoom-out-signal
-  {:events [:chat.ui/zoom-out-signal]}
-  [{:keys [db]} value]
-  {:db (assoc db :lightbox/zoom-out-signal value)})
-
-(rf/defn orientation-change
-  {:events [:chat.ui/orientation-change]}
-  [{:keys [db]} value]
-  {:db (assoc db :lightbox/orientation value)})
-
-(rf/defn lightbox-scale
-  {:events [:chat.ui/lightbox-scale]}
-  [{:keys [db]} value]
-  {:db (assoc db :lightbox/scale value)})
-
 (rf/defn check-last-chat
   {:events [:chat/check-last-chat]}
   [{:keys [db]}]
@@ -452,3 +419,15 @@
   {:events [:chat.ui/scroll-to-bottom]}
   [_]
   {:effects.chat/scroll-to-bottom nil})
+
+(rf/reg-event-fx :chat.ui/clear-sending-images
+ (fn [{:keys [db]}]
+   {:db (update-in db [:chat/inputs (:current-chat-id db) :metadata] assoc :sending-image {})}))
+
+(rf/reg-event-fx :chat.ui/image-unselected
+ (fn [{:keys [db]} [original]]
+   (let [current-chat-id (:current-chat-id db)]
+     {:db (update-in db
+                     [:chat/inputs current-chat-id :metadata :sending-image]
+                     dissoc
+                     (:uri original))})))

src/status_im/contexts/chat/messenger/lightbox/events.cljs

@@ -1,23 +0,0 @@
-(ns status-im.contexts.chat.messenger.lightbox.events
-  (:require status-im.contexts.chat.messenger.lightbox.effects
-            [utils.re-frame :as rf]))
-
-(rf/reg-event-fx :chat.ui/clear-sending-images
- (fn [{:keys [db]}]
-   {:db (update-in db [:chat/inputs (:current-chat-id db) :metadata] assoc :sending-image {})}))
-
-(rf/reg-event-fx :chat.ui/image-unselected
- (fn [{:keys [db]} [original]]
-   (let [current-chat-id (:current-chat-id db)]
-     {:db (update-in db
-                     [:chat/inputs current-chat-id :metadata :sending-image]
-                     dissoc
-                     (:uri original))})))
-
-(rf/reg-event-fx :chat.ui/share-image
- (fn [_ [uri]]
-   {:effects.chat/share-image uri}))
-
-(rf/reg-event-fx :chat.ui/save-image-to-gallery
- (fn [_ [uri on-success]]
-   {:effects.chat/save-image-to-gallery [uri on-success]}))

src/status_im/contexts/chat/messenger/messages/content/album/view.cljs

@@ -7,6 +7,8 @@
     [status-im.constants :as constants]
     [status-im.contexts.chat.messenger.messages.content.album.style :as style]
     [status-im.contexts.chat.messenger.messages.content.image.view :as image]
+    [status-im.contexts.chat.messenger.messages.content.lightbox.utils :as lightbox-utils]
+    [status-im.contexts.chat.messenger.messages.content.lightbox.view :as lightbox]
     [status-im.contexts.chat.messenger.messages.content.text.view :as text]
     [utils.re-frame :as rf]
     [utils.url :as url]))
@@ -21,17 +23,19 @@
 
 (defn album-message
   [{:keys [albumize?] :as message} context on-long-press message-container-data]
-  (let [shared-element-id (rf/sub [:shared-element-id])
-        media-server-port (rf/sub [:mediaserver/port])
-        first-image       (first (:album message))
-        album-style       (if (> (:image-width first-image) (:image-height first-image))
-                            :landscape
-                            :portrait)
-        images-count      (count (:album message))
+  (let [animation-shared-element-id (rf/sub [:animation-shared-element-id])
+        media-server-port           (rf/sub [:mediaserver/port])
+        album-messages              (:album message)
+        first-image                 (first album-messages)
+        album-style                 (if (> (:image-width first-image) (:image-height first-image))
+                                      :landscape
+                                      :portrait)
+        images-count                (count album-messages)
         ;; album images are always square, except when we have 3 images, then they must be
         ;; rectangular
         ;; (portrait or landscape)
-        portrait?         (and (= images-count rectangular-style-count) (= album-style :portrait))]
+        portrait?                   (and (= images-count rectangular-style-count)
+                                         (= album-style :portrait))]
     (if (and albumize? (> images-count 1))
       [:<>
        [rn/view {:style {:margin-bottom 4}} [text/text-content first-image]]
@@ -52,14 +56,21 @@
               {:key            (:message-id item)
                :active-opacity 1
                :on-long-press  #(on-long-press message context)
-               :on-press       #(rf/dispatch [:chat.ui/navigate-to-lightbox
-                                              (:message-id item)
-                                              {:messages (:album message)
-                                               :index    index}])}
+               :on-press       #(rf/dispatch
+                                 [:lightbox/navigate-to-lightbox
+                                  (:message-id item)
+                                  {:index index
+                                   :images (into []
+                                                 (map
+                                                  lightbox-utils/convert-message-to-lightbox-image
+                                                  album-messages))
+                                   :bottom-text-component
+                                   [lightbox/bottom-text-for-lightbox
+                                    first-image]}])}
               [fast-image/fast-image
                {:style     (style/image dimensions index portrait? images-count)
                 :source    {:uri (url/replace-port (:image (:content item)) media-server-port)}
-                :native-ID (when (and (= shared-element-id (:message-id item))
+                :native-ID (when (and (= animation-shared-element-id (:message-id item))
                                       (< index constants/max-album-photos))
                              :shared-element)}]
               (when (and (> images-count constants/max-album-photos)
@@ -71,11 +82,11 @@
                    :size   :heading-2
                    :style  {:color colors/white}}
                   (str "+" (- images-count (dec constants/max-album-photos)))]])]))
-         (:album message))]]
+         album-messages)]]
       [:<>
        (map-indexed
         (fn [index item]
           [:<> {:key (:message-id item)}
            [image/image-message index item {:on-long-press #(on-long-press message context)}
             message-container-data]])
-        (:album message))])))
+        album-messages)])))

src/status_im/contexts/chat/messenger/messages/content/image/view.cljs

@@ -4,6 +4,8 @@
     [react-native.fast-image :as fast-image]
     [react-native.safe-area :as safe-area]
     [status-im.constants :as constants]
+    [status-im.contexts.chat.messenger.messages.content.lightbox.utils :as lightbox-utils]
+    [status-im.contexts.chat.messenger.messages.content.lightbox.view :as lightbox]
     [status-im.contexts.chat.messenger.messages.content.text.view :as text]
     [utils.re-frame :as rf]
     [utils.url :as url]))
@@ -39,7 +41,7 @@
                                                             image-height
                                                             max-container-width
                                                             max-container-height)
-        shared-element-id             (rf/sub [:shared-element-id])
+        animation-shared-element-id   (rf/sub [:animation-shared-element-id])
         image-local-url               (url/replace-port (:image content) (rf/sub [:mediaserver/port]))]
     [:<>
      (when (= index 0)
@@ -48,13 +50,16 @@
       {:active-opacity 1
        :style          {:margin-top 4}
        :on-long-press  on-long-press
-       :on-press       #(rf/dispatch [:chat.ui/navigate-to-lightbox
+       :on-press       #(rf/dispatch [:lightbox/navigate-to-lightbox
                                       message-id
-                                      {:messages [message]
-                                       :index    0
-                                       :insets   insets}])}
+                                      {:images [(lightbox-utils/convert-message-to-lightbox-image
+                                                 message)]
+                                       :index 0
+                                       :insets insets
+                                       :bottom-text-component
+                                       [lightbox/bottom-text-for-lightbox message]}])}
       [fast-image/fast-image
        {:source              {:uri image-local-url}
         :style               (merge dimensions {:border-radius 12})
-        :native-ID           (when (= shared-element-id message-id) :shared-element)
+        :native-ID           (when (= animation-shared-element-id message-id) :shared-element)
         :accessibility-label :image-message}]]]))

src/status_im/contexts/chat/messenger/messages/content/lightbox/style.cljs

@@ -0,0 +1,10 @@
+(ns status-im.contexts.chat.messenger.messages.content.lightbox.style
+  (:require
+    [quo.foundations.colors :as colors]))
+
+(defn bottom-text
+  [expandable-text?]
+  {:color             colors/white
+   :margin-horizontal 20
+   :align-items       (when-not expandable-text? :center)
+   :flex-grow         1})

src/status_im/contexts/chat/messenger/messages/content/lightbox/utils.cljs

@@ -0,0 +1,14 @@
+(ns status-im.contexts.chat.messenger.messages.content.lightbox.utils
+  (:require
+    [utils.datetime :as datetime]
+    [utils.re-frame :as rf]))
+
+(defn convert-message-to-lightbox-image
+  [{:keys [timestamp image-width image-height message-id from content]}]
+  (let [[primary-name _] (rf/sub [:contacts/contact-two-names-by-identity from])]
+    {:image        (:image content)
+     :image-width  image-width
+     :image-height image-height
+     :id           message-id
+     :header       primary-name
+     :description  (when timestamp (datetime/to-short-str timestamp))}))

src/status_im/contexts/chat/messenger/messages/content/lightbox/view.cljs

@@ -0,0 +1,18 @@
+(ns status-im.contexts.chat.messenger.messages.content.lightbox.view
+  (:require
+    [oops.core :as oops]
+    [reagent.core :as reagent]
+    [status-im.common.lightbox.constants :as constants]
+    [status-im.contexts.chat.messenger.messages.content.lightbox.style :as style]
+    [status-im.contexts.chat.messenger.messages.content.text.view :as message-view]))
+
+(defn bottom-text-for-lightbox
+  [_]
+  (let [text-height (reagent/atom 0)]
+    (fn [{:keys [content chat-id] :as _message}]
+      (let [expandable-text? (> @text-height (* constants/line-height 2))]
+        [message-view/render-parsed-text
+         {:content        content
+          :chat-id        chat-id
+          :style-override (style/bottom-text expandable-text?)
+          :on-layout      #(reset! text-height (oops/oget % "nativeEvent.layout.height"))}]))))

src/status_im/contexts/chat/messenger/messages/content/reactions/view.cljs

@@ -52,7 +52,7 @@
          (get constants/reactions (:emoji-id reaction))))
 
 (defn- view-internal
-  [{:keys [message-id chat-id pinned-by theme]} user-message-content]
+  [{:keys [message-id chat-id pinned-by preview? theme]} user-message-content]
   (let [reactions (rf/sub [:chats/message-reactions message-id chat-id])]
     [:<>
      (when (seq reactions)
@@ -60,7 +60,7 @@
         {:container-style {:margin-left 44
                            :margin-top  8}
          :reactions       (map add-emoji-key reactions)
-         :add-reaction?   true
+         :add-reaction?   (not preview?)
          :use-case        (when pinned-by :pinned)
          :on-press        #(on-press (assoc % :message-id message-id))
          :on-long-press   #(on-long-press (assoc %

src/status_im/contexts/chat/messenger/messages/content/style.cljs

@@ -2,6 +2,8 @@
   (:require
     [quo.foundations.colors :as colors]))
 
+(def ^:private message-padding-scaling-ratio 4.5)
+
 (defn message-container
   ([]
    (message-container false nil nil false))
@@ -16,10 +18,16 @@
      (assoc :margin-top 4))))
 
 (defn user-message-content
-  [{:keys [outgoing outgoing-status]}]
+  [{:keys [outgoing outgoing-status six-reactions? window-scale small-screen?]}]
   {:border-radius      16
    :padding-horizontal 8
-   :padding-vertical   4
+   :padding-top        4
+   :padding-bottom     (if (or small-screen?
+                               (and
+                                (> 3 window-scale)
+                                six-reactions?))
+                         (* message-padding-scaling-ratio window-scale)
+                         4)
    :opacity            (if (and outgoing (= outgoing-status :sending))
                          0.5
                          1)})

src/status_im/contexts/chat/messenger/messages/content/view.cljs

@@ -119,31 +119,38 @@
   []
   (let [show-delivery-state? (reagent/atom false)]
     (fn [{:keys [message-data context keyboard-shown? show-reactions? in-reaction-and-action-menu?
-                 show-user-info? theme]}]
+                 show-user-info? preview? theme]}]
       (let [{:keys [content-type quoted-message content
-                    outgoing outgoing-status pinned-by]} message-data
-            first-image                                  (first (:album message-data))
-            outgoing-status                              (if (= content-type
-                                                                constants/content-type-album)
-                                                           (:outgoing-status first-image)
-                                                           outgoing-status)
-            outgoing                                     (if (= content-type
-                                                                constants/content-type-album)
-                                                           (:outgoing first-image)
-                                                           outgoing)
-            context                                      (assoc context
-                                                                :on-long-press
-                                                                #(on-long-press message-data
-                                                                                context
-                                                                                keyboard-shown?))
-            response-to                                  (:response-to content)
-            height                                       (rf/sub [:dimensions/window-height])
-            {window-width :width}                        (rn/get-window)
-            message-container-data                       {:window-width           window-width
-                                                          :padding-right          20
-                                                          :padding-left           20
-                                                          :avatar-container-width 32
-                                                          :message-margin-left    8}]
+                    outgoing outgoing-status pinned-by
+                    message-id chat-id]} message-data
+            first-image                  (first (:album message-data))
+            outgoing-status              (if (= content-type
+                                                constants/content-type-album)
+                                           (:outgoing-status first-image)
+                                           outgoing-status)
+            outgoing                     (if (= content-type
+                                                constants/content-type-album)
+                                           (:outgoing first-image)
+                                           outgoing)
+            context                      (assoc context
+                                                :on-long-press
+                                                #(on-long-press message-data
+                                                                context
+                                                                keyboard-shown?))
+            response-to                  (:response-to content)
+            height                       (rf/sub [:dimensions/window-height])
+            {window-width :width
+             window-scale :scale}        (rn/get-window)
+            message-container-data       {:window-width           window-width
+                                          :padding-right          20
+                                          :padding-left           20
+                                          :avatar-container-width 32
+                                          :message-margin-left    8}
+            reactions                    (rf/sub [:chats/message-reactions message-id
+                                                  chat-id])
+            six-reactions?               (-> reactions
+                                             count
+                                             (= 6))]
         [rn/touchable-highlight
          {:accessibility-label (if (and outgoing (= outgoing-status :sending))
                                  :message-sending
@@ -152,7 +159,10 @@
           :style               (style/user-message-content
                                 {:first-in-group? (:first-in-group? message-data)
                                  :outgoing        outgoing
-                                 :outgoing-status outgoing-status})
+                                 :outgoing-status outgoing-status
+                                 :small-screen?   rn/small-screen?
+                                 :window-scale    window-scale
+                                 :six-reactions?  six-reactions?})
           :on-press            (fn []
                                  (if (and platform/ios? keyboard-shown?)
                                    (do
@@ -212,7 +222,7 @@
              (when @show-delivery-state?
                [status/status outgoing-status])])]
           (when show-reactions?
-            [reactions/message-reactions-row message-data
+            [reactions/message-reactions-row (assoc message-data :preview? preview?)
              [rn/view {:pointer-events :none}
               [user-message-content-internal
                {:theme           theme
@@ -226,22 +236,24 @@
 (defn on-long-press
   [{:keys [deleted? deleted-for-me?] :as message-data} context keyboard-shown?]
   (rf/dispatch [:dismiss-keyboard])
-  (rf/dispatch [:show-bottom-sheet
-                {:content (drawers/reactions-and-actions message-data context)
-                 :border-radius 16
-                 :selected-item
-                 (if (or deleted? deleted-for-me?)
-                   (fn [] [content.deleted/deleted-message message-data])
-                   (fn []
-                     [rn/view
-                      {:pointer-events :none
-                       :padding-top    4}
-                      [user-message-content
-                       {:message-data    message-data
-                        :context         context
-                        :keyboard-shown? keyboard-shown?
-                        :show-reactions? true
-                        :show-user-info? true}]]))}]))
+  (rf/dispatch
+   [:show-bottom-sheet
+    {:content (drawers/reactions-and-actions message-data context)
+     :border-radius 16
+     :selected-item
+     (if (or deleted? deleted-for-me?)
+       (fn [] [content.deleted/deleted-message message-data])
+       (fn []
+         [rn/view
+          {:pointer-events :none
+           :padding-top    4}
+          [user-message-content
+           {:message-data    message-data
+            :context         context
+            :keyboard-shown? keyboard-shown?
+            :show-reactions? true
+            :show-user-info? true
+            :preview?        true}]]))}]))
 
 (defn system-message?
   [content-type]

src/status_im/contexts/chat/messenger/messages/drawers/style.cljs

@@ -8,9 +8,7 @@
    :justify-content :center})
 
 (def tab-icon
-  {:margin-right 4
-   :width        20
-   :height       20})
+  {:margin-right 4})
 
 (defn tab-count
   [active? theme]

src/status_im/contexts/chat/messenger/messages/drawers/view.cljs

@@ -34,10 +34,10 @@
            {:id                  reaction-type-int
             :accessibility-label (keyword (str "authors-for-reaction-" reaction-type-int))
             :label               [rn/view {:style style/tab}
-                                  [rn/image
-                                   {:source (reactions.resource/get-reaction
-                                             (get constants/reactions reaction-type-int))
-                                    :style  style/tab-icon}]
+                                  [rn/text
+                                   {:style style/tab-icon}
+                                   (reactions.resource/system-emojis
+                                    (get constants/reactions reaction-type-int))]
                                   [quo/text
                                    {:weight :medium
                                     :size   :paragraph-1

src/status_im/contexts/chat/messenger/messages/list/view.cljs

@@ -159,7 +159,7 @@
                                                     unmute-chat-label
                                                     mute-chat-label))
                  :color               cover-bg-color
-                 :icon                (if muted? :i/muted :i/activity-center)
+                 :icon                (if muted? :i/activity-center :i/muted)
                  :on-press            (fn []
                                         (if muted?
                                           (home.actions/unmute-chat-action chat-id)

src/status_im/contexts/onboarding/identifiers/profile_card/view.cljs

@@ -30,7 +30,7 @@
                                :status-indicator?   false
                                :customization-color customization-color}]]
     [rn/view
-     {:style style/card-view}
+     {:pointer-events :none :style style/card-view}
      [reanimated/view
       {:style (style/card-container container-background)}
       [rn/view {:style style/card-header}

src/status_im/contexts/onboarding/identifiers/style.cljs

@@ -15,3 +15,8 @@
   {:justify-self      :flex-end
    :margin-bottom     46
    :margin-horizontal 20})
+
+(defn carousel-background
+  [height width]
+  {:height height
+   :width  width})

src/status_im/contexts/onboarding/identifiers/view.cljs

@@ -26,6 +26,8 @@
         paused?              (atom nil)
         is-dragging?         (atom nil)
         drag-amount          (atom nil)
+        window-width         (rf/sub [:dimensions/window-width])
+        window-height        (rf/sub [:dimensions/window-height])
         {:keys [emoji-hash display-name compressed-key
                 public-key]} (rf/sub [:profile/profile])
         {:keys [color]}      (rf/sub [:onboarding/profile])
@@ -42,11 +44,16 @@
        {:animate?     true
         :progress     progress
         :paused?      paused?
-        :gesture      :tappable
+        :gesture      :swipeable
         :is-dragging? is-dragging?
         :drag-amount  drag-amount
-        :header-text  header-text}]
-      [rn/view {:style style/content-container}
+        :header-text  header-text
+        :background   [rn/view
+                       {:style (style/carousel-background window-height
+                                                          (* (count header-text) window-width))}]}]
+      [rn/view
+       {:style          style/content-container
+        :pointer-events :box-none}
        [profile-card/profile-card
         {:profile-picture     photo-path
          :name                display-name

src/status_im/contexts/preview/quo/list_items/network_list.cljs

@@ -0,0 +1,46 @@
+(ns status-im.contexts.preview.quo.list-items.network-list
+  (:require
+    [quo.core :as quo]
+    [quo.foundations.resources :as quo.resources]
+    [reagent.core :as reagent]
+    [status-im.contexts.preview.quo.preview :as preview]))
+
+(def descriptor
+  [{:key     :state
+    :type    :select
+    :options [{:key :default}
+              {:key :active}
+              {:key :pressed}]}
+   {:key     :network-image
+    :type    :select
+    :options [{:key   (quo.resources/get-network :ethereum)
+               :value :ethereum}
+              {:key   (quo.resources/get-network :arbitrum)
+               :value :arbitrum}
+              {:key   (quo.resources/get-network :optimism)
+               :value :optimism}]}
+   {:key  :label
+    :type :text}
+   {:key  :token-value
+    :type :text}
+   {:key  :fiat-value
+    :type :text}
+   {:key  :show-alert-on-press?
+    :type :boolean}])
+
+(defn view
+  []
+  (let [state (reagent/atom {:network-image       (quo.resources/get-network :ethereum)
+                             :label               "Mainnet"
+                             :token-value         "0.00 ETH"
+                             :fiat-value          "€0.00"
+                             :state               :default
+                             :customization-color :blue})]
+    (fn []
+      [preview/preview-container
+       {:state      state
+        :descriptor descriptor}
+       [quo/network-list
+        (merge @state
+               (when (:show-alert-on-press? @state)
+                 {:on-press #(js/alert "Pressed!")}))]])))

src/status_im/contexts/preview/quo/main.cljs

@@ -94,6 +94,7 @@
     [status-im.contexts.preview.quo.list-items.address :as address]
     [status-im.contexts.preview.quo.list-items.channel :as channel]
     [status-im.contexts.preview.quo.list-items.dapp :as dapp]
+    [status-im.contexts.preview.quo.list-items.network-list :as network-list]
     [status-im.contexts.preview.quo.list-items.preview-lists :as preview-lists]
     [status-im.contexts.preview.quo.list-items.quiz-item :as quiz-item]
     [status-im.contexts.preview.quo.list-items.saved-address :as saved-address]
@@ -351,6 +352,8 @@
                         :component community-list-item/view}
                        {:name      :dapp
                         :component dapp/preview}
+                       {:name      :network-list
+                        :component network-list/view}
                        {:name      :preview-lists
                         :component preview-lists/view}
                        {:name      :quiz-item

src/status_im/contexts/preview/quo/preview.cljs

@@ -320,7 +320,7 @@
 (defn- f-preview-container
   [{:keys [title state descriptor blur? blur-dark-only?
            component-container-style
-           blur-container-style blur-view-props blur-height show-blur-background?]
+           blur-container-style blur-view-props blur-height show-blur-background? full-screen?]
     :or   {blur-height 200}}
    & children]
   (let [theme (quo.theme/use-theme-value)
@@ -337,8 +337,11 @@
      [common/navigation-bar {:title title}]
      [rn/scroll-view
       {:style                           (style/panel-basic)
-       :shows-vertical-scroll-indicator false}
-      [rn/pressable {:on-press rn/dismiss-keyboard!}
+       :shows-vertical-scroll-indicator false
+       :content-container-style         (when full-screen? {:flex 1})}
+      [rn/pressable
+       {:style    (when full-screen? {:flex 1})
+        :on-press rn/dismiss-keyboard!}
        (when descriptor
          [rn/view {:style style/customizer-container}
           [customizer state descriptor]])

src/status_im/contexts/preview/quo/wallet/token_input.cljs

@@ -2,6 +2,7 @@
   (:require
     [quo.core :as quo]
     [quo.foundations.resources :as resources]
+    [react-native.safe-area :as safe-area]
     [reagent.core :as reagent]
     [status-im.contexts.preview.quo.preview :as preview]))
 
@@ -20,21 +21,35 @@
    {:key     :currency
     :type    :select
     :options [{:key :usd}
-              {:key :eur}]}])
+              {:key :eur}]}
+   {:key  :error?
+    :type :boolean}])
 
 (defn view
   []
-  (let [state (reagent/atom {:token               :eth
-                             :currency            :usd
-                             :conversion          0.02
-                             :networks            networks
-                             :title               title
-                             :customization-color :blue})]
+  (let [state     (reagent/atom {:token               :eth
+                                 :currency            :usd
+                                 :conversion          0.02
+                                 :networks            networks
+                                 :title               title
+                                 :customization-color :blue
+                                 :show-keyboard?      false})
+        value     (reagent/atom "")
+        set-value (fn [v]
+                    (swap! value str v))
+        delete    (fn [_]
+                    (swap! value #(subs % 0 (dec (count %)))))]
     (fn []
       [preview/preview-container
        {:state                     state
         :descriptor                descriptor
-        :component-container-style {:padding-horizontal 20
-                                    :margin-top         50
-                                    :align-items        :center}}
-       [quo/token-input @state]])))
+        :full-screen?              true
+        :component-container-style {:flex            1
+                                    :justify-content :space-between}}
+       [quo/token-input (assoc @state :value @value)]
+       [quo/numbered-keyboard
+        {:container-style {:padding-bottom (safe-area/get-top)}
+         :left-action     :dot
+         :delete-key?     true
+         :on-press        set-value
+         :on-delete       delete}]])))

src/status_im/contexts/profile/config.cljs

@@ -13,10 +13,15 @@
    :openseaAPIKey               config/opensea-api-key
    :poktToken                   config/POKT_TOKEN
    :infuraToken                 config/INFURA_TOKEN
+   :raribleMainnetApiKey        config/RARIBLE_MAINNET_API_KEY
+   :raribleTestnetApiKey        config/RARIBLE_TESTNET_API_KEY
    :alchemyOptimismMainnetToken config/ALCHEMY_OPTIMISM_MAINNET_TOKEN
    :alchemyOptimismGoerliToken  config/ALCHEMY_OPTIMISM_GOERLI_TOKEN
    :alchemyArbitrumMainnetToken config/ALCHEMY_ARBITRUM_MAINNET_TOKEN
-   :alchemyArbitrumGoerliToken  config/ALCHEMY_ARBITRUM_GOERLI_TOKEN})
+   :alchemyArbitrumGoerliToken  config/ALCHEMY_ARBITRUM_GOERLI_TOKEN
+   :alchemyEthereumSepoliaToken config/ALCHEMY_ETHEREUM_SEPOLIA_TOKEN
+   :alchemyArbitrumSepoliaToken config/ALCHEMY_ARBITRUM_SEPOLIA_TOKEN
+   :alchemyOptimismSepoliaToken config/ALCHEMY_OPTIMISM_SEPOLIA_TOKEN})
 
 (defn create
   []

src/status_im/contexts/profile/settings/list_items.cljs

@@ -1,5 +1,6 @@
 (ns status-im.contexts.profile.settings.list-items
   (:require [status-im.common.not-implemented :as not-implemented]
+            [status-im.config :as config]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
 
@@ -89,12 +90,13 @@
      :image       :icon
      :blur?       true
      :image-props :i/toggle}
-    {:title       "Quo preview"
-     :on-press    #(rf/dispatch [:navigate-to :quo-preview])
-     :action      :arrow
-     :image       :icon
-     :blur?       true
-     :image-props :i/light}]
+    (when config/quo-preview-enabled?
+      {:title       "Quo preview"
+       :on-press    #(rf/dispatch [:navigate-to :quo-preview])
+       :action      :arrow
+       :image       :icon
+       :blur?       true
+       :image-props :i/light})]
    [{:title    (i18n/label :t/about)
      :on-press not-implemented/alert
      :action   :arrow}

src/status_im/contexts/shell/share/profile/view.cljs

@@ -21,11 +21,11 @@
         abbreviated-url   (address/get-abbreviated-profile-url
                            universal-profile-url)
         emoji-hash-string (string/join emoji-hash)]
-    [:<>
+    [rn/scroll-view
+     {:content-container-style {:padding-bottom 16}}
      [rn/view {:style style/qr-code-container}
       [qr-codes/share-qr-code
        {:type                :profile
-        :unblur-on-android?  true
         :qr-data             universal-profile-url
         :qr-data-label-shown abbreviated-url
         :on-share-press      #(list-selection/open-share {:message universal-profile-url})

src/status_im/contexts/shell/share/style.cljs

@@ -5,13 +5,6 @@
 
 (def screen-padding 20)
 
-(def blur
-  {:position      :absolute
-   :top           0
-   :left          0
-   :right         0
-   :bottom        0
-   :overlay-color colors/neutral-80-opa-80-blur})
 
 (def header-row
   {:flex-direction     :row

src/status_im/contexts/shell/share/view.cljs

@@ -1,9 +1,7 @@
 (ns status-im.contexts.shell.share.view
   (:require
     [quo.core :as quo]
-    [react-native.blur :as blur]
     [react-native.core :as rn]
-    [react-native.platform :as platform]
     [react-native.safe-area :as safe-area]
     [reagent.core :as reagent]
     [status-im.contexts.shell.share.profile.view :as profile-view]
@@ -43,7 +41,7 @@
   []
   (let [selected-tab (reagent/atom :profile)]
     (fn []
-      [:<>
+      [rn/view {:style {:padding-top (safe-area/get-top)}}
        [header]
        [rn/view {:style style/tabs-container}
         [quo/segmented-control
@@ -61,9 +59,7 @@
 
 (defn view
   []
-  [rn/view {:flex 1 :padding-top (safe-area/get-top)}
-   [blur/view
-    {:style       style/blur
-     :blur-amount 20
-     :blur-radius (if platform/android? 25 10)}]
-   [tab-content]])
+  [quo/overlay {:type :shell}
+   [rn/view
+    {:key :share}
+    [tab-content]]])

src/status_im/contexts/shell/share/wallet/view.cljs

@@ -66,7 +66,6 @@
             :networks            @selected-networks
             :on-share-press      #(share-action qr-url share-title)
             :profile-picture     nil
-            :unblur-on-android?  true
             :full-name           (:name account)
             :customization-color (:color account)
             :emoji               (:emoji account)

src/status_im/contexts/wallet/account/view.cljs

@@ -46,7 +46,9 @@
          [quo/wallet-graph {:time-frame :empty}]
          (when (not watch-only?)
            [quo/wallet-ctas
-            {:send-action    #(rf/dispatch [:open-modal :wallet-select-address])
+            {:send-action    (fn []
+                               (rf/dispatch [:wallet/clean-send-data])
+                               (rf/dispatch [:open-modal :wallet-select-address]))
              :receive-action #(rf/dispatch [:open-modal :wallet-share-address {:status :receive}])
              :buy-action     #(rf/dispatch [:show-bottom-sheet
                                             {:content buy-drawer}])

src/status_im/contexts/wallet/add_address_to_watch/view.cljs

@@ -122,17 +122,17 @@
                                 (rf/dispatch [:wallet/clean-scanned-address])
                                 (rf/dispatch [:wallet/clear-address-activity-check])
                                 (rf/dispatch [:navigate-back]))}]
-         :footer
-         [quo/button
-          {:customization-color customization-color
-           :disabled?           (or (string/blank? @input-value) (some? (validate @input-value)))
-           :on-press            (fn []
-                                  (rf/dispatch [:navigate-to
-                                                :confirm-address-to-watch
-                                                {:address @input-value}])
-                                  (clear-input))
-           :container-style     {:z-index 2}}
-          (i18n/label :t/continue)]}
+         :footer [quo/button
+                  {:customization-color customization-color
+                   :disabled?           (or (string/blank? @input-value)
+                                            (some? (validate @input-value)))
+                   :on-press            (fn []
+                                          (rf/dispatch [:navigate-to
+                                                        :confirm-address-to-watch
+                                                        {:address @input-value}])
+                                          (clear-input))
+                   :container-style     {:z-index 2}}
+                  (i18n/label :t/continue)]}
         [quo/text-combinations
          {:container-style style/header-container
           :title           (i18n/label :t/add-address)

src/status_im/contexts/wallet/collectible/view.cljs

@@ -75,12 +75,14 @@
   (let [selected-tab  (reagent/atom :overview)
         on-tab-change #(reset! selected-tab %)]
     (fn []
-      (let [collectible               (rf/sub [:wallet/last-collectible-details])
+      (let [collectible                  (rf/sub [:wallet/last-collectible-details])
+            animation-shared-element-id  (rf/sub [:animation-shared-element-id])
             {:keys [collectible-data preview-url
-                    collection-data]} collectible
+                    collection-data id]} collectible
+            token-id                     (:token-id id)
             {collection-image :image-url
-             collection-name  :name}  collection-data
-            {collectible-name :name}  collectible-data]
+             collection-name  :name}     collection-data
+            {collectible-name :name}     collectible-data]
         [scroll-page/scroll-page
          {:navigate-back? true
           :height         148
@@ -95,9 +97,26 @@
                            :picture     preview-url}}
          [rn/view {:style style/container}
           [rn/view {:style style/preview-container}
-           [rn/image
-            {:source preview-url
-             :style  style/preview}]]
+           [rn/touchable-opacity
+            {:active-opacity 1
+             :on-press       #(rf/dispatch [:lightbox/navigate-to-lightbox
+                                            token-id
+                                            {:images [{:image        preview-url
+                                                       :image-width  300 ; collectibles don't have
+                                                                         ; width/height but we need
+                                                                         ; to pass something
+                                                       :image-height 300 ; without it animation
+                                                                         ; doesn't work smoothly and
+                                                                         ; :border-radius not
+                                                                         ; applied
+                                                       :id           token-id
+                                                       :header       collectible-name
+                                                       :description  collection-name}]
+                                             :index  0}])}
+            [rn/image
+             {:source    preview-url
+              :style     style/preview
+              :native-ID (when (= animation-shared-element-id token-id) :shared-element)}]]]
           [header collectible-name collection-name collection-image]
           [cta-buttons]
           [quo/tabs

src/status_im/contexts/wallet/common/sheets/account_options/view.cljs

@@ -10,6 +10,7 @@
             [react-native.platform :as platform]
             [reagent.core :as reagent]
             [status-im.contexts.wallet.common.sheets.account-options.style :as style]
+            [status-im.contexts.wallet.common.sheets.remove-account.view :as remove-account]
             [status-im.contexts.wallet.common.utils :as utils]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
@@ -95,7 +96,11 @@
          :icon                :i/delete
          :accessibility-label :remove-account
          :label               (i18n/label :t/remove-account)
-         :danger?             true}]]]
+         :danger?             true
+         :on-press            #(rf/dispatch [:show-bottom-sheet
+                                             {:content
+                                              (fn []
+                                                [remove-account/view])}])}]]]
      (when show-account-selector?
        [:<>
         [quo/divider-line {:container-style style/divider-label}]

src/status_im/contexts/wallet/common/sheets/remove_account/style.cljs

@@ -0,0 +1,17 @@
+(ns status-im.contexts.wallet.common.sheets.remove-account.style)
+
+(def desc-container
+  {:padding-horizontal 20
+   :padding-top        4
+   :padding-bottom     12})
+
+(def copy-container
+  {:margin-horizontal 20
+   :margin-top        4
+   :margin-bottom     8})
+
+(def checkbox-container
+  {:flex-direction     :row
+   :padding-horizontal 20
+   :padding-vertical   8
+   :gap                10})

src/status_im/contexts/wallet/common/sheets/remove_account/view.cljs

@@ -0,0 +1,91 @@
+(ns status-im.contexts.wallet.common.sheets.remove-account.view
+  (:require
+    [quo.core :as quo]
+    [quo.theme]
+    [react-native.clipboard :as clipboard]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]
+    [status-im.contexts.wallet.common.sheets.remove-account.style :as style]
+    [status-im.contexts.wallet.common.utils :as utils]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
+
+(defn- footer
+  [{:keys [submit-disabled?]}]
+  [quo/bottom-actions
+   {:actions             :2-actions
+    :customization-color :danger
+    :button-one-label    (i18n/label :t/remove)
+    :button-one-props    {:on-press  #(js/alert "Will be implemented")
+                          :type      :danger
+                          :disabled? submit-disabled?}
+    :button-two-label    (i18n/label :t/cancel)
+    :button-two-props    {:on-press #(rf/dispatch [:hide-bottom-sheet])
+                          :type     :grey}}])
+
+(defn- recovery-phase-flow
+  []
+  (let [confirmed? (reagent/atom false)]
+    (fn [{:keys [name emoji path color] :as _account}]
+      (let [formatted-path (utils/format-derivation-path path)]
+        [:<>
+         [quo/drawer-top
+          {:title               (i18n/label :t/remove-account-title)
+           :type                :context-tag
+           :context-tag-type    :account
+           :account-name        name
+           :emoji               emoji
+           :customization-color color}]
+         [rn/view {:style style/desc-container}
+          [quo/text {:weight :medium}
+           (i18n/label :t/remove-account-desc)]]
+         [quo/data-item
+          {:size            :default
+           :status          :default
+           :card?           true
+           :title           (i18n/label :t/derivation-path)
+           :custom-subtitle (fn []
+                              [quo/text {:weight :medium}
+                               formatted-path])
+           :icon-right?     true
+           :right-icon      :i/copy
+           :on-press        (fn []
+                              (rf/dispatch [:toasts/upsert
+                                            {:type :positive
+                                             :text (i18n/label :t/derivation-path-copied)}])
+                              (clipboard/set-string formatted-path))
+           :container-style style/copy-container}]
+         [rn/pressable
+          {:style    style/checkbox-container
+           :on-press #(swap! confirmed? not)}
+          [quo/selectors
+           {:type                :checkbox
+            :customization-color color
+            :checked?            @confirmed?
+            :on-change           #(swap! confirmed? not)}]
+          [quo/text (i18n/label :t/remove-account-confirmation)]]
+         [footer {:submit-disabled? (not @confirmed?)}]]))))
+
+(defn- watched-address-flow
+  [{:keys [name emoji color] :as _account}]
+  [:<>
+   [quo/drawer-top
+    {:title               (i18n/label :t/remove-watched-address-title)
+     :type                :context-tag
+     :context-tag-type    :account
+     :account-name        name
+     :emoji               emoji
+     :customization-color color}]
+   [rn/view {:style style/desc-container}
+    [quo/text {:weight :medium}
+     (i18n/label :t/remove-watched-address-desc)]]
+   [footer {:submit-disabled? false}]])
+
+(defn- view-internal
+  []
+  (let [{:keys [type] :as account} (rf/sub [:wallet/current-viewing-account])]
+    (case type
+      :generated [recovery-phase-flow account]
+      :watch     [watched-address-flow account])))
+
+(def view (quo.theme/with-theme view-internal))

src/status_im/contexts/wallet/common/token_value/view.cljs

@@ -18,6 +18,7 @@
          :label               (i18n/label :t/send)
          :on-press            (fn []
                                 (rf/dispatch [:hide-bottom-sheet])
+                                (rf/dispatch [:wallet/clean-send-data])
                                 (rf/dispatch [:wallet/send-select-token-drawer {:token token-data}])
                                 (rf/dispatch [:open-modal :wallet-select-address]))}
         {:icon                :i/receive

src/status_im/contexts/wallet/common/utils.cljs

@@ -178,12 +178,15 @@
     address))
 
 (def id->network
-  {constants/mainnet-chain-id       :ethereum
-   constants/goerli-chain-id        :ethereum
-   constants/optimism-chain-id      :optimism
-   constants/optimism-test-chain-id :optimism
-   constants/arbitrum-chain-id      :arbitrum
-   constants/arbitrum-test-chain-id :arbitrum})
+  {constants/mainnet-chain-id          :ethereum
+   constants/goerli-chain-id           :ethereum
+   constants/sepolia-chain-id          :ethereum
+   constants/optimism-chain-id         :optimism
+   constants/optimism-goerli-chain-id  :optimism
+   constants/optimism-sepolia-chain-id :optimism
+   constants/arbitrum-chain-id         :arbitrum
+   constants/arbitrum-goerli-chain-id  :arbitrum
+   constants/arbitrum-sepolia-chain-id :arbitrum})
 
 (defn get-standard-fiat-format
   [crypto-value currency-symbol fiat-value]

src/status_im/contexts/wallet/edit_account/view.cljs

@@ -6,6 +6,7 @@
              :as create-or-edit-account]
             [status-im.contexts.wallet.common.sheets.network-preferences.view
              :as network-preferences]
+            [status-im.contexts.wallet.common.sheets.remove-account.view :as remove-account]
             [status-im.contexts.wallet.edit-account.style :as style]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
@@ -62,7 +63,12 @@
                                         (= name @edited-account-name))]
         [create-or-edit-account/view
          {:page-nav-right-side [{:icon-name :i/delete
-                                 :on-press  #(js/alert "Delete account: to be implemented")}]
+                                 :on-press
+                                 (fn []
+                                   (rf/dispatch [:show-bottom-sheet
+                                                 {:content
+                                                  (fn []
+                                                    [remove-account/view])}]))}]
           :account-name        account-name
           :account-emoji       emoji
           :account-color       color

src/status_im/contexts/wallet/events.cljs

@@ -327,9 +327,23 @@
    {:fx [[:dispatch [:hide-bottom-sheet]]
          [:dispatch [:browser.ui/open-url (str explorer-link "/" address)]]]}))
 
+(rf/reg-event-fx :wallet/reload
+ (fn [_]
+   {:fx [[:dispatch-n [[:wallet/get-wallet-token]]]]}))
+
+(rf/reg-event-fx :wallet/start-wallet
+ (fn [_]
+   {:fx [[:json-rpc/call
+          [{:method   "wallet_startWallet"
+            :on-error #(log/info "failed to start wallet"
+                                 {:error %
+                                  :event :wallet/start-wallet})}]]]}))
+
 (rf/reg-event-fx :wallet/initialize
  (fn []
-   {:fx [[:dispatch-n [[:wallet/get-ethereum-chains] [:wallet/get-accounts]]]]}))
+   {:fx [[:dispatch [:wallet/start-wallet]]
+         [:dispatch [:wallet/get-ethereum-chains]]
+         [:dispatch [:wallet/get-accounts]]]}))
 
 (rf/reg-event-fx :wallet/share-account
  (fn [_ [{:keys [content title]}]]

src/status_im/contexts/wallet/events/collectibles.cljs

@@ -2,9 +2,9 @@
   (:require [camel-snake-kebab.core :as csk]
             [camel-snake-kebab.extras :as cske]
             [clojure.string :as string]
-            [re-frame.core :as rf]
             [taoensso.timbre :as log]
             [utils.ethereum.chain :as chain]
+            [utils.re-frame :as rf]
             [utils.transforms :as types]))
 
 (def collectible-data-types
@@ -66,8 +66,9 @@
          data-type           (collectible-data-types :header)
          fetch-criteria      {:fetch-type            (fetch-type :fetch-if-not-cached)
                               :max-cache-age-seconds max-cache-age-seconds}
+         chain-ids           (chain/chain-ids db)
          request-params      [request-id
-                              [(chain/chain-id db)]
+                              chain-ids
                               (keys (get-in db [:wallet :accounts]))
                               collectibles-filter
                               start-at-index

src/status_im/contexts/wallet/send/events.cljs

@@ -10,9 +10,12 @@
     [utils.number]
     [utils.re-frame :as rf]))
 
+(rf/reg-event-fx :wallet/clean-send-data
+ (fn [{:keys [db]}]
+   {:db (update-in db [:wallet :ui] dissoc :send)}))
+
 (rf/reg-event-fx :wallet/select-address-tab
  (fn [{:keys [db]} [tab]]
-
    {:db (assoc-in db [:wallet :ui :send :select-address-tab] tab)}))
 
 (rf/reg-event-fx :wallet/suggested-routes-success
@@ -126,14 +129,21 @@
 
 (rf/reg-event-fx :wallet/add-authorized-transaction
  (fn [{:keys [db]} [transaction]]
-   (let [transaction-hashes (:hashes transaction)
-         chain-id           (key (first transaction-hashes))
-         tx-id              (first (val (first transaction-hashes)))
-         transaction-detes  {:status   :pending
-                             :id       (:id transaction)
-                             :chain-id chain-id}]
-     {:db (assoc-in db [:wallet :transactions tx-id] transaction-detes)
-      :fx [[:dispatch [:navigate-to :wallet-transaction-progress]]]})))
+   (let [transaction-batch-id (:id transaction)
+         transaction-hashes   (:hashes transaction)
+         transaction-ids      (flatten (vals transaction-hashes))
+         transaction-details  (send-utils/map-multitransaction-by-ids transaction-batch-id
+                                                                      transaction-hashes)]
+     {:db (-> db
+              (assoc-in [:wallet :transactions] transaction-details)
+              (assoc-in [:wallet :ui :send :transaction-ids] transaction-ids))
+      :fx [[:dispatch
+            [:navigate-to-within-stack
+             [:wallet-transaction-progress :wallet-transaction-confirmation]]]]})))
+
+(rf/reg-event-fx :wallet/close-transaction-progress-page
+ (fn [_]
+   {:fx [[:dispatch [:dismiss-modal :wallet-transaction-progress]]]}))
 
 (defn- transaction-bridge
   [{:keys [from-address to-address route]}]

src/status_im/contexts/wallet/send/input_amount/component_spec.cljs

@@ -57,6 +57,7 @@
     (h/is-truthy (h/get-by-text "0"))
     (h/is-truthy (h/get-by-text "ETH"))
     (h/is-truthy (h/get-by-text "$0.00"))
+    (h/is-truthy (h/get-by-label-text :container))
     (h/is-disabled (h/get-by-label-text :button-one)))
 
   (h/test "Fill token input and confirm"
@@ -77,6 +78,7 @@
       (-> (h/wait-for #(h/get-by-text "$1234.50"))
           (.then (fn []
                    (h/is-truthy (h/get-by-label-text :button-one))
+                   (h/is-truthy (h/get-by-label-text :container))
                    (h/fire-event :press (h/get-by-label-text :button-one))
                    (h/was-called on-confirm))))))
 
@@ -99,61 +101,33 @@
       (-> (h/wait-for #(h/get-by-text "$1234.50"))
           (.then (fn []
                    (h/is-truthy (h/get-by-label-text :button-one))
+                   (h/is-truthy (h/get-by-label-text :container))
                    (h/fire-event :press (h/get-by-label-text :button-one))
                    (h/was-called on-confirm))))))
 
   (h/test "Try to fill more than limit"
     (h/setup-subs sub-mocks)
     (h/render [input-amount/view
-               {:crypto-decimals 10
-                :limit-crypto    286}])
+               {:crypto-decimals 1
+                :limit-crypto    1}])
 
     (h/fire-event :press (h/query-by-label-text :keyboard-key-2))
     (h/fire-event :press (h/query-by-label-text :keyboard-key-9))
     (h/fire-event :press (h/query-by-label-text :keyboard-key-5))
 
-    (-> (h/wait-for #(h/is-truthy (h/get-by-text "$290.00")))
-        (.then (fn []
-                 (h/fire-event :press (h/query-by-label-text :keyboard-key-backspace))
-                 (h/fire-event :press (h/query-by-label-text :keyboard-key-8))
-                 (h/fire-event :press (h/query-by-label-text :keyboard-key-5))
-                 (h/wait-for #(h/get-by-text "$2850.00"))))))
-
-  (h/test "Try to fill more than limit"
-    (h/setup-subs sub-mocks)
-    (h/render [input-amount/view
-               {:crypto-decimals 10
-                :limit-crypto    286
-                :on-confirm      #()}])
-
-    (h/fire-event :press (h/query-by-label-text :keyboard-key-2))
-    (h/fire-event :press (h/query-by-label-text :keyboard-key-9))
-    (h/fire-event :press (h/query-by-label-text :keyboard-key-5))
-
-    (-> (h/wait-for #(h/get-by-text "$290.00"))
-        (.then (fn []
-                 (h/fire-event :press (h/query-by-label-text :keyboard-key-backspace))
-                 (h/fire-event :press (h/query-by-label-text :keyboard-key-8))
-                 (h/fire-event :press (h/query-by-label-text :keyboard-key-5))
-                 (h/wait-for #(h/get-by-text "$2850.00"))))))
+    (h/is-truthy (h/get-by-label-text :container-error)))
 
   (h/test "Switch from crypto to fiat and check limit"
     (h/setup-subs sub-mocks)
     (h/render [input-amount/view
-               {:crypto-decimals 2
-                :limit-crypto    250
+               {:crypto-decimals 1
+                :limit-crypto    1
                 :on-confirm      #()}])
 
-    (h/fire-event :press (h/query-by-label-text :keyboard-key-2))
-    (h/fire-event :press (h/query-by-label-text :keyboard-key-0))
-    (-> (h/wait-for #(h/get-by-text "$200.00"))
+    (h/fire-event :press (h/query-by-label-text :keyboard-key-9))
+    (h/is-truthy (h/get-by-label-text :container-error))
+    (h/fire-event :press (h/query-by-label-text :reorder))
+
+    (-> (h/wait-for #(h/get-by-text "Max: 1000.00 USD"))
         (.then (fn []
-                 (h/fire-event :press (h/query-by-label-text :reorder))
-                 (h/wait-for #(h/get-by-text "2.00 ETH"))))
-        (.then (fn []
-                 (h/fire-event :press (h/query-by-label-text :keyboard-key-5))
-                 (h/fire-event :press (h/query-by-label-text :keyboard-key-5))
-                 (h/wait-for #(h/get-by-text "20.50 ETH"))))
-        (.then (fn []
-                 (h/fire-event :press (h/query-by-label-text :keyboard-key-5))
-                 (h/wait-for #(h/get-by-text "20.50 ETH")))))))
+                 (h/wait-for #(h/is-truthy (h/get-by-label-text :container))))))))

src/status_im/contexts/wallet/send/input_amount/view.cljs

@@ -61,6 +61,11 @@
                  (>= (js/parseFloat balance) input-value)))
        (map first)))
 
+(defn- reset-input-error
+  [new-value prev-value input-error]
+  (reset! input-error
+    (> new-value prev-value)))
+
 (defn- f-view-internal
   ;; crypto-decimals and limit-crypto args are needed for component tests only
   [{:keys [crypto-decimals limit-crypto]}]
@@ -75,6 +80,7 @@
         limit-fiat                (.toFixed (* (:total-balance token) conversion-rate) 2)
         crypto-decimals           (or crypto-decimals (utils/get-crypto-decimals-count token))
         input-value               (reagent/atom "")
+        input-error               (reagent/atom false)
         current-limit             (reagent/atom {:amount   limit-crypto
                                                  :currency token-symbol})
         handle-swap               (fn [crypto?]
@@ -84,27 +90,30 @@
                                                                :currency token-symbol}
                                                               {:amount   limit-fiat
                                                                :currency currency}))
-                                      (when (> num-value (:amount @current-limit))
-                                        (reset! input-value ""))))
+                                      (reset-input-error num-value
+                                                         (:amount @current-limit)
+                                                         input-error)))
         handle-keyboard-press     (fn [v]
-                                    (let [current-value @input-value
-                                          new-value     (make-new-input current-value v)
-                                          num-value     (or (parse-double new-value) 0)]
-                                      (when (and (not loading-suggested-routes?)
-                                                 (<= num-value (:amount @current-limit)))
+                                    (let [current-value        @input-value
+                                          new-value            (make-new-input current-value v)
+                                          num-value            (or (parse-double new-value) 0)
+                                          current-limit-amount (:amount @current-limit)]
+                                      (when (not loading-suggested-routes?)
                                         (reset! input-value new-value)
+                                        (reset-input-error num-value current-limit-amount input-error)
                                         (reagent/flush))))
         handle-delete             (fn [_]
                                     (when-not loading-suggested-routes?
-                                      (swap! input-value #(subs % 0 (dec (count %))))
-                                      (reagent/flush)))
+                                      (let [current-limit-amount (:amount @current-limit)]
+                                        (swap! input-value #(subs % 0 (dec (count %))))
+                                        (reset-input-error @input-value current-limit-amount input-error)
+                                        (reagent/flush))))
         handle-on-change          (fn [v]
                                     (when (valid-input? @input-value v)
                                       (let [num-value            (or (parse-double v) 0)
                                             current-limit-amount (:amount @current-limit)]
-                                        (if (> num-value current-limit-amount)
-                                          (reset! input-value (str current-limit-amount))
-                                          (reset! input-value v))
+                                        (reset! input-value v)
+                                        (reset-input-error num-value current-limit-amount input-error)
                                         (reagent/flush))))]
     (fn [{:keys [on-confirm]
           :or   {on-confirm #(rf/dispatch [:wallet/send-select-amount
@@ -119,7 +128,8 @@
                                (empty? @input-value)
                                (<= input-num-value 0)
                                (> input-num-value (:amount @current-limit)))
-            amount            (str @input-value " " token-symbol)]
+            amount            (str @input-value " " token-symbol)
+            {:keys [color]}   (rf/sub [:wallet/current-viewing-account])]
         (rn/use-effect
          (fn []
            (let [dismiss-keyboard-fn   #(when (= % "active") (rn/dismiss-keyboard!))
@@ -135,7 +145,8 @@
                                                            100)))
                        [@input-value])
         [rn/view
-         {:style style/screen}
+         {:style               style/screen
+          :accessibility-label (str "container" (when @input-error "-error"))}
          [account-switcher/view
           {:icon-name     :i/arrow-left
            :on-press      #(rf/dispatch [:navigate-back-within-stack :wallet-send-input-amount])
@@ -145,6 +156,7 @@
            :token           token-symbol
            :currency        currency
            :crypto-decimals crypto-decimals
+           :error?          @input-error
            :networks        (:networks token)
            :title           (i18n/label :t/send-limit {:limit limit-label})
            :conversion      conversion-rate
@@ -159,10 +171,11 @@
            :loading-networks (find-affordable-networks token @input-value)
            :networks         (:networks token)}]
          [quo/bottom-actions
-          {:actions          :1-action
-           :button-one-label (i18n/label :t/confirm)
-           :button-one-props {:disabled? confirm-disabled?
-                              :on-press  on-confirm}}]
+          {:actions             :1-action
+           :button-one-label    (i18n/label :t/confirm)
+           :button-one-props    {:disabled? confirm-disabled?
+                                 :on-press  on-confirm}
+           :customization-color color}]
          [quo/numbered-keyboard
           {:container-style (style/keyboard-container bottom)
            :left-action     :dot

src/status_im/contexts/wallet/send/select_address/view.cljs

@@ -128,26 +128,30 @@
     (fn []
       (let [selected-tab          (or (rf/sub [:wallet/send-tab]) (:id (first tabs-data)))
             token                 (rf/sub [:wallet/wallet-send-token])
-            valid-ens-or-address? (boolean (rf/sub [:wallet/valid-ens-or-address?]))]
+            valid-ens-or-address? (boolean (rf/sub [:wallet/valid-ens-or-address?]))
+            {:keys [color]}       (rf/sub [:wallet/current-viewing-account])]
         (rn/use-effect (fn []
                          (fn []
                            (rf/dispatch [:wallet/clean-scanned-address])
                            (rf/dispatch [:wallet/clean-local-suggestions]))))
         [floating-button-page/view
-         {:header [account-switcher/view
-                   {:on-press      on-close
-                    :margin-top    (safe-area/get-top)
-                    :switcher-type :select-account}]
-          :footer (when (> (count @input-value) 0)
-                    [quo/button
-                     {:accessibility-label :continue-button
-                      :type                :primary
-                      :disabled?           (not valid-ens-or-address?)
-                      :on-press            #(rf/dispatch [:wallet/select-send-address
-                                                          {:address  @input-value
-                                                           :token    token
-                                                           :stack-id :wallet-select-address}])}
-                     (i18n/label :t/continue)])}
+         {:footer-container-padding 0
+          :header                   [account-switcher/view
+                                     {:on-press      on-close
+                                      :margin-top    (safe-area/get-top)
+                                      :switcher-type :select-account}]
+          :footer                   (when (> (count @input-value) 0)
+                                      [quo/button
+                                       {:accessibility-label :continue-button
+                                        :type                :primary
+                                        :disabled?           (not valid-ens-or-address?)
+                                        :on-press            #(rf/dispatch [:wallet/select-send-address
+                                                                            {:address @input-value
+                                                                             :token token
+                                                                             :stack-id
+                                                                             :wallet-select-address}])
+                                        :customization-color color}
+                                       (i18n/label :t/continue)])}
          [quo/text-combinations
           {:title                     (i18n/label :t/send-to)
            :container-style           style/title-container

src/status_im/contexts/wallet/send/transaction_confirmation/view.cljs

@@ -162,28 +162,30 @@
                                    :address   (utils/get-shortened-address to-address)}]
         [rn/view {:style {:flex 1}}
          [floating-button-page/view
-          {:header              [quo/page-nav
-                                 {:icon-name           :i/arrow-left
-                                  :on-press            on-close
-                                  :margin-top          (safe-area/get-top)
-                                  :background          :blur
-                                  :accessibility-label :top-bar
-                                  :right-side          [{:icon-name           :i/advanced
-                                                         :on-press            #(js/alert
-                                                                                "to be implemented")
-                                                         :accessibility-label :advanced-options}]}]
-           :footer              (if route
-                                  [standard-auth/slide-button
-                                   {:size                :size-48
-                                    :track-text          (i18n/label :t/slide-to-send)
-                                    :container-style     {:z-index 2}
-                                    :customization-color account-color
-                                    :on-auth-success     #(rf/dispatch [:wallet/send-transaction
-                                                                        (security/safe-unmask-data %)])
-                                    :auth-button-label   (i18n/label :t/confirm)}]
-                                  [rn/activity-indicator])
-           :gradient-cover?     true
-           :customization-color (:color account)}
+          {:footer-container-padding 0
+           :header                   [quo/page-nav
+                                      {:icon-name           :i/arrow-left
+                                       :on-press            on-close
+                                       :margin-top          (safe-area/get-top)
+                                       :background          :blur
+                                       :accessibility-label :top-bar
+                                       :right-side          [{:icon-name           :i/advanced
+                                                              :on-press            #(js/alert
+                                                                                     "to be implemented")
+                                                              :accessibility-label :advanced-options}]}]
+           :footer                   (if route
+                                       [standard-auth/slide-button
+                                        {:size                :size-48
+                                         :track-text          (i18n/label :t/slide-to-send)
+                                         :container-style     {:z-index 2}
+                                         :customization-color account-color
+                                         :on-auth-success     #(rf/dispatch [:wallet/send-transaction
+                                                                             (security/safe-unmask-data
+                                                                              %)])
+                                         :auth-button-label   (i18n/label :t/confirm)}]
+                                       [rn/activity-indicator])
+           :gradient-cover?          true
+           :customization-color      (:color account)}
           [rn/view
            [transaction-title
             {:token-symbol token-symbol

src/status_im/contexts/wallet/send/transaction_progress/view.cljs

@@ -3,7 +3,6 @@
     [quo.core :as quo]
     [react-native.core :as rn]
     [react-native.safe-area :as safe-area]
-    [reagent.core :as reagent]
     [status-im.common.floating-button-page.view :as floating-button-page]
     [status-im.common.resources :as resources]
     [status-im.contexts.wallet.send.transaction-progress.style :as style]
@@ -13,39 +12,43 @@
 (defn titles
   [status]
   (case status
-    :sending   (i18n/label :t/sending-with-elipsis)
+    :pending   (i18n/label :t/sending-with-ellipsis)
     :confirmed (i18n/label :t/transaction-confirmed)
     :finalised (i18n/label :t/transacation-finalised)
     ""))
 
+(defn combined-status-overview
+  [transaction-details]
+  (cond
+    (every? (fn [[_k v]] (= (:status v) :finalised)) transaction-details) :finalised
+    (some (fn [[_k v]] (= (:status v) :pending)) transaction-details)     :pending
+    (some (fn [[_k v]] (= (:status v) :confirmed)) transaction-details)   :confirmed
+    :else                                                                 nil))
+
 (defn view
   []
-  (let [current-address (rf/sub [:wallet/current-viewing-account-address])
-        leave-page      (fn []
-                          (rf/dispatch [:wallet/clean-scanned-address])
-                          (rf/dispatch [:wallet/clean-local-suggestions])
-                          (rf/dispatch [:wallet/clean-send-address])
-                          (rf/dispatch [:wallet/select-address-tab nil])
-                          (rf/dispatch [:navigate-to :wallet-accounts current-address]))
-        status          (reagent/atom :sending)
+  (let [leave-page      #(rf/dispatch [:wallet/close-transaction-progress-page])
         {:keys [color]} (rf/sub [:wallet/current-viewing-account])]
-    [floating-button-page/view
-     {:header              [quo/page-nav
-                            {:type                :no-title
-                             :background          :blur
-                             :icon-name           :i/close
-                             :margin-top          (safe-area/get-top)
-                             :on-press            leave-page
-                             :accessibility-label :top-bar}]
-      :footer              [quo/button
-                            {:customization-color color
-                             :on-press            leave-page}
-                            (i18n/label :t/done)]
-      :customization-color color
-      :gradient-cover?     true}
-     [rn/view {:style style/content-container}
-      [rn/image
-       {:source (resources/get-image :transaction-progress)
-        :style  {:margin-bottom 12}}]
-      [quo/standard-title
-       {:title (titles @status)}]]]))
+    (fn []
+      (let [transaction-details (rf/sub [:wallet/send-transaction-progress])]
+        [floating-button-page/view
+         {:footer-container-padding 0
+          :header                   [quo/page-nav
+                                     {:type                :no-title
+                                      :background          :blur
+                                      :icon-name           :i/close
+                                      :margin-top          (safe-area/get-top)
+                                      :on-press            leave-page
+                                      :accessibility-label :top-bar}]
+          :footer                   [quo/button
+                                     {:customization-color color
+                                      :on-press            leave-page}
+                                     (i18n/label :t/done)]
+          :customization-color      color
+          :gradient-cover?          true}
+         [rn/view {:style style/content-container}
+          [rn/image
+           {:source (resources/get-image :transaction-progress)
+            :style  {:margin-bottom 12}}]
+          [quo/standard-title
+           {:title (titles (combined-status-overview transaction-details))}]]]))))

src/status_im/contexts/wallet/send/utils.cljs

@@ -4,3 +4,19 @@
 (defn amount-in-hex
   [amount token-decimal]
   (money/to-hex (money/mul (money/bignumber amount) (money/from-decimal token-decimal))))
+
+(defn map-multitransaction-by-ids
+  [transaction-batch-id transaction-hashes]
+  (reduce-kv (fn [map1 chain-id value1]
+               (merge map1
+                      (reduce
+                       (fn [map2 tx-id]
+                         (assoc map2
+                                tx-id
+                                {:status   :pending
+                                 :id       transaction-batch-id
+                                 :chain-id chain-id}))
+                       {}
+                       value1)))
+             {}
+             transaction-hashes))

src/status_im/contexts/wallet/send/utils_test.cljs

@@ -8,3 +8,22 @@
           decimal 18]
       (is (= (utils/amount-in-hex amount decimal)
              "0xde0b6b3a7640000")))))
+
+(def multichain-transacation
+  {:id     61
+   :hashes {:5   ["0x5"]
+            :420 ["0x12" "0x11"]}})
+
+(deftest test-map-multitransaction-by-ids
+  (testing "test map-multitransaction-by-ids formats to right data structure"
+    (let [{:keys [id hashes]} multichain-transacation]
+      (is (= (utils/map-multitransaction-by-ids id hashes)
+             {"0x5"  {:status   :pending
+                      :id       61
+                      :chain-id :5}
+              "0x12" {:status   :pending
+                      :id       61
+                      :chain-id :420}
+              "0x11" {:status   :pending
+                      :id       61
+                      :chain-id :420}})))))

src/status_im/contexts/wallet/share_address/view.cljs

@@ -73,7 +73,8 @@
         [quo/overlay {:type :shell}
          [rn/view
           {:flex        1
-           :padding-top padding-top}
+           :padding-top padding-top
+           :key         :share-adress}
           [quo/page-nav
            {:icon-name           :i/close
             :on-press            #(rf/dispatch [:navigate-back])
@@ -92,7 +93,6 @@
              :networks            @selected-networks
              :on-share-press      #(share-action qr-url share-title)
              :profile-picture     nil
-             :unblur-on-android?  true
              :full-name           (:name account)
              :customization-color color
              :emoji               emoji

src/status_im/contexts/wallet/signals.cljs

@@ -0,0 +1,10 @@
+(ns status-im.contexts.wallet.signals
+  (:require [utils.re-frame :as rf]))
+
+(rf/reg-event-fx
+ :wallet/pending-transaction-status-changed-received
+ (fn [{:keys [db]} [{:keys [message]}]]
+   (let [details (js->clj (js/JSON.parse message) :keywordize-keys true)
+         tx-hash (:hash details)]
+     {:db (update-in db [:wallet :transactions tx-hash] assoc :status :confirmed :blocks 1)})))
+

src/status_im/core.cljs

@@ -19,6 +19,7 @@
     [status-im.contexts.profile.push-notifications.events :as notifications]
     [status-im.contexts.shell.jump-to.state :as shell.state]
     [status-im.contexts.shell.jump-to.utils :as shell.utils]
+    status-im.contexts.wallet.signals
     status-im.events
     status-im.navigation.core
     [status-im.setup.dev :as dev]

src/status_im/events.cljs

@@ -26,6 +26,7 @@
     status-im.contexts.wallet.effects
     status-im.contexts.wallet.events
     status-im.contexts.wallet.send.events
+    status-im.contexts.wallet.signals
     [status-im.db :as db]
     [utils.re-frame :as rf]))
 

src/status_im/navigation/screens.cljs

@@ -2,13 +2,13 @@
   (:require
     [legacy.status-im.ui.screens.screens :as old-screens]
     [status-im.common.emoji-picker.view :as emoji-picker]
+    [status-im.common.lightbox.view :as lightbox]
     [status-im.config :as config]
     [status-im.contexts.chat.group-details.view :as group-details]
     [status-im.contexts.chat.home.add-new-contact.scan.scan-profile-qr-page :as scan-profile-qr-page]
     [status-im.contexts.chat.home.add-new-contact.views :as add-new-contact]
     [status-im.contexts.chat.home.new-chat.view :as new-chat]
     [status-im.contexts.chat.messenger.camera.view :as camera-screen]
-    [status-im.contexts.chat.messenger.lightbox.view :as lightbox]
     [status-im.contexts.chat.messenger.messages.view :as chat]
     [status-im.contexts.chat.messenger.photo-selector.view :as photo-selector]
     [status-im.contexts.communities.actions.accounts-selection.view :as communities.accounts-selection]
@@ -366,7 +366,6 @@
      :component wallet-transaction-confirmation/view}
 
     {:name      :wallet-transaction-progress
-     :options   {:insets {:bottom? true}}
      :component wallet-transaction-progress/view}
 
     {:name      :scan-address

src/status_im/subs/root.cljs

@@ -23,7 +23,7 @@
 ;;view
 (reg-root-key-sub :view-id :view-id)
 (reg-root-key-sub :screen-params :navigation/screen-params)
-(reg-root-key-sub :shared-element-id :shared-element-id)
+(reg-root-key-sub :animation-shared-element-id :animation-shared-element-id)
 
 ;;bottom sheet
 (reg-root-key-sub :bottom-sheet :bottom-sheet)

src/status_im/subs/wallet/networks_test.cljs

@@ -12,14 +12,17 @@
            :short-name       "eth"
            :network-name     :ethereum
            :related-chain-id 1
+           :chain-id         3
            :layer            1}
           {:test?            true
            :short-name       "arb1"
            :related-chain-id 42161
+           :chain-id         4
            :layer            2}
           {:test?            true
            :short-name       "opt"
            :related-chain-id 10
+           :chain-id         5
            :layer            2}]
    :prod [{:test?      false
            :short-name "eth"

src/status_im/subs/wallet/send.cljs

@@ -18,3 +18,17 @@
  :wallet/wallet-send-recipient
  :<- [:wallet/wallet-send]
  :-> :recipient)
+
+(rf/reg-sub
+ :wallet/send-transaction-ids
+ :<- [:wallet/wallet-send]
+ :-> :transaction-ids)
+
+(rf/reg-sub
+ :wallet/send-transaction-progress
+ :<- [:wallet/send-transaction-ids]
+ :<- [:wallet/transactions]
+ (fn [[tx-ids transactions]]
+   (let [send-tx-ids (set (keys transactions))]
+     (select-keys transactions
+                  (filter send-tx-ids tx-ids)))))

src/status_im/subs/wallet/send_test.cljs

@@ -12,3 +12,44 @@
   (testing "returns active tab for selecting address"
     (swap! rf-db/app-db assoc-in [:wallet :ui :send :select-address-tab] :tabs/recent)
     (is (= :tabs/recent (rf/sub [sub-name])))))
+
+(h/deftest-sub :wallet/send-transaction-ids
+  [sub-name]
+  (testing "returns the transaction ids attached the last send flow"
+    (swap! rf-db/app-db assoc-in [:wallet :ui :send :transaction-ids] ["0x123" "0x321"])
+    (is (= ["0x123" "0x321"] (rf/sub [sub-name])))))
+
+(h/deftest-sub :wallet/send-transaction-progress
+  [sub-name]
+  (testing "returns transaction data for a transaction with multiple transactions"
+    (swap! rf-db/app-db assoc-in
+      [:wallet :transactions]
+      {"0x123" {:status   :pending
+                :id       240
+                :chain-id 5}
+       "0x321" {:status   :pending
+                :id       240
+                :chain-id 1}})
+    (swap! rf-db/app-db assoc-in [:wallet :ui :send :transaction-ids] ["0x123" "0x321"])
+    (is (= {"0x123" {:status   :pending
+                     :id       240
+                     :chain-id 5}
+            "0x321" {:status   :pending
+                     :id       240
+                     :chain-id 1}}
+           (rf/sub [sub-name]))))
+
+  (testing "returns transaction data for a transaction with a single transaction"
+    (swap! rf-db/app-db assoc-in
+      [:wallet :transactions]
+      {"0x123" {:status   :pending
+                :id       100
+                :chain-id 5}
+       "0x321" {:status   :pending
+                :id       240
+                :chain-id 1}})
+    (swap! rf-db/app-db assoc-in [:wallet :ui :send :transaction-ids] ["0x123"])
+    (is (= {"0x123" {:status   :pending
+                     :id       100
+                     :chain-id 5}}
+           (rf/sub [sub-name])))))

src/status_im/subs/wallet/wallet.cljs

@@ -219,3 +219,8 @@
    (map (fn [{:keys [color] :as account}]
           (assoc account :customization-color color))
         accounts)))
+
+(rf/reg-sub
+ :wallet/transactions
+ :<- [:wallet]
+ :-> :transactions)

src/utils/ethereum/chain.cljs

@@ -84,3 +84,10 @@
 (defn chain-id
   [db]
   (network->chain-id (get-current-network db)))
+
+(defn chain-ids
+  [db]
+  (let [test-networks-enabled? (get-in db [:profile/profile :test-networks-enabled?])
+        networks               (get-in db [:wallet :networks])
+        env-networks           (get networks (if test-networks-enabled? :test :prod))]
+    (map :chain-id env-networks)))

src/utils/ethereum/chain_test.cljs

@@ -3,7 +3,21 @@
     [cljs.test :refer-macros [deftest is]]
     [utils.ethereum.chain :as chain]))
 
+(defn chain-ids-db
+  [test-networks-enabled?]
+  {:profile/profile {:test-networks-enabled? test-networks-enabled?}
+   :wallet          {:networks {:test [{:chain-id 3}
+                                       {:chain-id 4}
+                                       {:chain-id 5}]
+                                :prod [{:chain-id 1}
+                                       {:chain-id 42161}
+                                       {:chain-id 10}]}}})
+
 (deftest chain-id->chain-keyword
   (is (= (chain/chain-id->chain-keyword 1) :mainnet))
   (is (= (chain/chain-id->chain-keyword 5) :goerli))
   (is (= (chain/chain-id->chain-keyword 5777) :custom)))
+
+(deftest chain-ids
+  (is (= (chain/chain-ids (chain-ids-db false)) [1 42161 10]))
+  (is (= (chain/chain-ids (chain-ids-db true)) [3 4 5])))

status-go-version.json

@@ -3,7 +3,7 @@
     "_comment": "Instead use: scripts/update-status-go.sh <rev>",
     "owner": "status-im",
     "repo": "status-go",
-    "version": "v0.172.5",
-    "commit-sha1": "ea3e59ffeefa623373b4a39ecf7fa5558e384ad0",
-    "src-sha256": "11rds4i2ylngaddiz5f4g0r0rzwplcbkg5c4wvwzzxl49gza50j3"
+    "version": "v0.172.6",
+    "commit-sha1": "6e30fbb211b0e0bb1e7966cce4e215c4080aac5c",
+    "src-sha256": "1k3hg2m25qvgvqxmy8im3xhjwvdyvaq49yks92642h9rw494nb94"
 }

test/appium/views/chat_view.py

@@ -276,7 +276,7 @@ class ChatElementByText(Text):
                 self.emoji = emoji
                 self.emojis_id = 'emoji-reaction-%s' % str(emojis[self.emoji])
                 super().__init__(driver, prefix=parent_locator,
-                                 xpath="/../..//*[@content-desc='%s']/android.widget.TextView" % self.emojis_id)
+                                 xpath="/../..//*[@content-desc='%s']/android.widget.TextView[2]" % self.emojis_id)
 
             @property
             def text(self):