Publish image and contact code when joining community

https://github.com/status-im/status-go/compare/3326362b...c7dec38d

doc/component-tests-overview.md

@@ -23,7 +23,7 @@ setups and runs the test suite once.
 setups and runs the test suite and watches for code changes will then retrigger the test suite.
 
 ## Writing Tests
-New test files will need their namespace added to either the file "src/quo/core_spec.cljs" or "src/status_im2/core_spec.cljs. These locations may update overtime but it is dependent on the entrypoint in shadow-cljs config discussed below.
+New test files will need their namespace added to either the file "src/quo2/core_spec.cljs" or "src/status_im2/core_spec.cljs. These locations may update overtime but it is dependent on the entrypoint in shadow-cljs config discussed below.
 
 
 ### Best practices

doc/new-guidelines.md

@@ -76,7 +76,7 @@ It's important to name functional components with `f-` prefix.
 
 ### Component props and API scheme to match Figma as closely as possible
 
-Ideally, the prop names for components (particularly in Quo Design System)
+Ideally, the prop names for components (particularly in quo2 Design System)
 should match the Figma properties as best as possible. This makes it easier for
 the developer using that component to configure it correctly for the screen it
 is being used on and avoids unnecessary overwrites and adjustments being made.
@@ -134,7 +134,7 @@ For example if Figma has sizes `:small`, `:medium` and `:large`
 
 Prefer to define styles in a separate file named `style.cljs`, colocated with
 the source file. For a real example, see
-[src//components/record_audio/record_audio/style.cljs](../src/quo/components/record_audio/record_audio/style.cljs).
+[src/quo2/components/record_audio/record_audio/style.cljs](../src/quo2/components/record_audio/record_audio/style.cljs).
 
 ```clojure
 ;; bad
@@ -528,27 +528,27 @@ due to performance constraints.
    (:preferred-name multiaccount)))
 ```
 
-### Requiring quo components
+### Requiring quo2 components
 
-Consume `quo` components from `quo.core`, unless the namespace is also inside
-the `quo/` directory.
+Consume `quo2` components from `quo2.core`, unless the namespace is also inside
+the `quo2/` directory.
 
 ```clojure
 ;; bad
 (ns my-namespace
-  (:require [quo.components.icon :as icon]))
+  (:require [quo2.components.icon :as icon]))
 
 (icon/icon :i/verified)
 
 ;; good
 (ns my-namespace
-  (:require [quo.core :as quo]))
+  (:require [quo2.core :as quo]))
 
 (quo/icon :i/verified)
 
-;; also good because both namespaces are inside quo/
-(ns quo.components.tabs.account-selector
-  (:require [quo.components.markdown.text :as text]))
+;; also good because both namespaces are inside quo2/
+(ns quo2.components.tabs.account-selector
+  (:require [quo2.components.markdown.text :as text]))
 ```
 
 ### Require/import
@@ -615,12 +615,12 @@ Use the appropriate keyword qualification/namespace.
 
 ```clojure
 ;; bad
-(require '[quo.components.icon :as icons])
+(require '[quo2.components.icon :as icons])
 (icons/icon :main-icons2/verified)
 
 ;; good
-(require '[quo.core :as quo])
-(quo/icon :i/verified)
+(require '[quo2.core :as quo2])
+(quo2/icon :i/verified)
 ```
 
 ### Translations
@@ -695,7 +695,7 @@ First, the bird's-eye view with some example ClojureScript files:
 src
 ├── js/
 ├── mocks/
-├── quo
+├── quo2
 │   ├── components/
 │   ├── foundations/
 │   └── theme.cljs
@@ -716,7 +716,7 @@ src
 
 - `src/js`: Raw Javascript files, e.g. React Native Reanimated worklets.
 - `src/mocks`: Plumbing configuration to be able to run tests.
-- `src/quo/`: The component library for Status Mobile.
+- `src/quo2/`: The component library for Status Mobile.
 - `src/react_native/`: Contains only low-level constructs to help React Native
   work in tandem with Clojure(Script).
 - `src/status_im2/`: Directory where we try to be as strict as possible about
@@ -728,7 +728,7 @@ src
   of the directory tree. Just like directories named `utils`, their directory
   nesting level communicates their applicable limits.
 - `src/status_im2/common/components/`: Contains reusable components that are not
-  part of the design system (Quo).
+  part of the design system (quo2).
 - `src/status_im2/contexts/`: Contains [bounded contexts](#glossary), like
   `browser/`, `messaging/`, etc. As much as possible, _bounded contexts_ should
   not directly require each other's namespaces.
@@ -743,9 +743,9 @@ directory nesting level precisely indicates its boundaries. For example, a
 `contexts/user_settings/utils/datetime.cljs` file communicates that it should
 only be used in the `user_settings` context.
 
-### src/quo
+### src/quo2
 
-The `src/quo/` directory holds all components for the new design system. As
+The `src/quo2/` directory holds all components for the new design system. As
 much as possible, its sub-directories and component names should reflect the
 same language used by designers.
 
@@ -753,14 +753,14 @@ Even though the directory lives alongside the rest of the codebase, we should
 think of it as an external entity that abstracts away particular Status domain
 knowledge.
 
-Components inside `src/quo/` should not rely on re-frame, i.e. they should not
+Components inside `src/quo2/` should not rely on re-frame, i.e. they should not
 dispatch events or use subscriptions.
 
 Example structure:
 
 ```
 src
-└── quo
+└── quo2
     ├── components
     │   └── dropdown
     │       ├── style.cljs

src/quo/components/avatars/icon_avatar.cljs

@@ -37,6 +37,6 @@
          :color icon-color}]]
       [rn/image
        {:source icon
-        :style  {:width 32 :height 32}}])))
+        :style  {:width component-size :height component-size}}])))
 
 (def icon-avatar (quo.theme/with-theme icon-avatar-internal))

src/quo/components/avatars/wallet_user_avatar.cljs

@@ -30,7 +30,7 @@
 (defn- view-internal
   "params, first name, last name, customization-color, size
    and if it's dark or not!"
-  [{:keys [f-name l-name customization-color size theme monospace? uppercase? container-style]
+  [{:keys [f-name l-name customization-color size theme monospace? uppercase?]
     :or   {f-name     "John"
            l-name     "Doe"
            size       :x-large
@@ -50,14 +50,13 @@
                          (colors/resolve-color customization-color theme)
                          (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme))]
     [rn/view
-     {:style (merge {:width            circle-size
-                     :height           circle-size
-                     :border-radius    circle-size
-                     :text-align       :center
-                     :justify-content  :center
-                     :align-items      :center
-                     :background-color circle-color}
-                    container-style)}
+     {:style {:width            circle-size
+              :height           circle-size
+              :border-radius    circle-size
+              :text-align       :center
+              :justify-content  :center
+              :align-items      :center
+              :background-color circle-color}}
      [text/text
       {:size   (size font-sizes)
        :weight (if monospace? :monospace (size font-weights))

src/quo/components/community/token_gating.cljs

@@ -3,7 +3,7 @@
     [clojure.string :as string]
     [quo.components.community.style :as style]
     [quo.components.markdown.text :as text]
-    [quo.components.tags.token-tag :as token-tag]
+    [quo.components.tags.token-tag.view :as token-tag]
     [quo.theme :as quo.theme]
     [react-native.core :as rn]
     [utils.i18n :as i18n]))
@@ -14,17 +14,17 @@
    {:style (style/token-row padding?)}
    (doall
     (map-indexed (fn [token-index token]
-                   (let [{:keys [img-src amount sufficient? purchasable? loading?]} token]
+                   (let [{:keys [img-src amount sufficient? purchasable?]} token]
                      ^{:key token-index}
                      [rn/view {:style style/token-tag-spacing}
-                      [token-tag/token-tag
-                       {:symbol      (:symbol token)
-                        :value       amount
-                        :size        24
-                        :sufficient? sufficient?
-                        :purchasable purchasable?
-                        :loading?    loading?
-                        :img-src     img-src}]]))
+                      [token-tag/view
+                       {:token-symbol  (:symbol token)
+                        :token-value   amount
+                        :size          :size-24
+                        :options       (cond
+                                         sufficient?  :hold
+                                         purchasable? :add)
+                        :token-img-src img-src}]]))
                  tokens))])
 
 (defn- internal-view

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

@@ -20,4 +20,11 @@
                   :button-one-label button-one
                   :button-two-label button-two}])
       (h/is-truthy (h/get-by-text button-one))
-      (h/is-truthy (h/get-by-text button-two)))))
+      (h/is-truthy (h/get-by-text button-two))))
+
+  (h/test "render disabled button"
+    (h/render [bottom-actions/view
+               {:description      "Sample description"
+                :disabled?        true
+                :button-one-label "button"}])
+    (h/is-disabled (h/get-by-label-text :button-one))))

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

@@ -26,7 +26,7 @@
   [props]
   (let [{:keys [actions description button-one-label button-two-label
                 button-one-press button-two-press theme
-                scroll? button-one-type button-two-type]}
+                scroll? button-one-type button-two-type disabled?]}
         (merge default-props props)]
     [:<>
      [rn/view {:style style/buttons-container}
@@ -38,11 +38,13 @@
           :type            button-two-type
           :on-press        button-two-press} button-two-label])
       [button/button
-       {:size            40
-        :container-style style/button-container
-        :type            button-one-type
-        :background      (when scroll? :blur)
-        :on-press        button-one-press} button-one-label]]
+       {:size                40
+        :container-style     style/button-container
+        :type                button-one-type
+        :disabled?           disabled?
+        :background          (when scroll? :blur)
+        :on-press            button-one-press
+        :accessibility-label :button-one} button-one-label]]
      (when description
        [text/text
         {:size  :paragraph-2

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

@@ -9,12 +9,13 @@
 
 (defn- category-internal
   [{:keys [label data blur? theme]}]
-  [rn/view {:style style/container}
-   [text/text
-    {:weight :medium
-     :size   :paragraph-2
-     :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
-    label]
+  [rn/view {:style (style/container label)}
+   (when label
+     [text/text
+      {:weight :medium
+       :size   :paragraph-2
+       :style  {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
+      label])
    [rn/flat-list
     {:data      data
      :style     (style/settings-items theme blur?)

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

@@ -2,11 +2,12 @@
   (:require
     [quo.foundations.colors :as colors]))
 
-(def container
+(defn container
+  [label]
   {:left               0
    :right              0
    :padding-horizontal 20
-   :padding-top        12
+   :padding-top        (when label 12)
    :padding-bottom     8})
 
 (defn settings-items

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

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

src/quo/components/tags/token_tag.cljs

@@ -1,124 +0,0 @@
-(ns quo.components.tags.token-tag
-  (:require
-    [quo.components.icon :as icons]
-    [quo.components.markdown.text :as text]
-    [quo.foundations.colors :as colors]
-    [quo.theme :as theme]
-    [react-native.core :as rn]))
-
-(def themes
-  {:light {:background-color colors/neutral-20}
-   :dark  {:background-color colors/neutral-80}})
-
-(defn get-value-from-size
-  [size big-option small-option]
-  (if (= size :big) big-option small-option))
-
-(def icon-container-styles
-  {:display         :flex
-   :align-items     :center
-   :justify-content :center
-   :position        :absolute
-   :border-radius   20
-   :margin-left     2})
-
-(defn tag-container
-  [size]
-  {:height         (get-value-from-size size 32 24)
-   :align-items    :center
-   :flex-direction :row
-   :border-radius  20})
-
-(defn tag
-  "[tag opts \"label\"]]
-   opts
-   {
-    :size :small/:big
-    :token-img-src :token-img-src
-    :token-img-style {}
-    :border-color :color
-    :overlay child-elements
-    }"
-  [_ _]
-  (fn [{:keys [size img-src img-style border-color overlay]
-        :or   {size :small}}
-       label]
-    [rn/view
-     {:style (when border-color
-               {:border-color  border-color
-                :border-radius 20
-                :border-width  1})}
-     [rn/view
-      {:style (merge (tag-container size) (get themes (theme/get-theme)))}
-      [rn/image
-       {:src   img-src
-        :style (merge
-                {:height       (get-value-from-size size 28 20)
-                 :width        (get-value-from-size size 28 20)
-                 :margin-left  2
-                 :margin-right (get-value-from-size size 8 6)}
-                img-style)}]
-      [text/text
-       {:weight :medium
-        :number-of-lines 1
-        :style
-        {:margin-right (get-value-from-size size 12 11)}
-        :size (get-value-from-size size :paragraph-2 :label)} label]
-      overlay]]))
-
-(defn loading-icon
-  []
-  [rn/view
-   {:style {:align-items     :center
-            :justify-content :center
-            :position        :absolute
-            :right           -8
-            :top             -8}}
-   [icons/icon :t/checktoken
-    {:no-color true
-     :size     20}]])
-
-(defn icon
-  [size border-color sufficient?]
-  [rn/view
-   {:style (merge
-            icon-container-styles
-            {:background-color border-color
-             :border-color     (if (= (theme/get-theme) :dark) colors/neutral-100 colors/white)
-             :border-width     1
-             :right            (get-value-from-size size -3.75 -5.75)
-             :bottom           (get-value-from-size size (- 32 7.75 4) (- 24 7.75 2))})}
-   [icons/icon (if sufficient? :i/hold :i/add)
-    {:no-color true
-     :size     12}]])
-
-(defn token-tag
-  "[token-tag opts]
-   opts
-   {
-    :symbol string
-    :value string
-    :size :small/:big
-    :token-img-src :token-img-src
-    :border-color :color
-    :sufficient? true/false
-    :purchasable? true/false
-    :loading? true/false
-    }"
-  [_ _]
-  (fn [{:keys [value size img-src border-color purchasable? sufficient? loading?]
-        :or   {size :small}
-        :as   props}]
-    (let [sym          (:symbol props)
-          sufficient?  (when-not loading? sufficient?)
-          border-color (if sufficient? colors/success-50 border-color)]
-      [tag
-       {:size size
-        :img-src img-src
-        :border-color (if sufficient? colors/success-50 border-color)
-        :overlay
-        (if loading?
-          [loading-icon]
-          (when (or purchasable? sufficient?)
-            [icon size border-color sufficient?]))}
-       (str value " " sym)])))

src/quo/components/tags/token_tag/style.cljs

@@ -0,0 +1,49 @@
+(ns quo.components.tags.token-tag.style
+  (:require [quo.foundations.colors :as colors]))
+
+(defn container
+  [size options blur? theme]
+  (let [hold? (= options :hold)]
+    (merge {:background-color (if blur?
+                                (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
+                                (colors/theme-colors colors/neutral-10 colors/neutral-90 theme))
+            :flex-direction   :row
+            :align-items      :center
+            :padding-left     2
+            :border-width     (if hold? 1 0)
+            :border-radius    20
+            :border-color     (colors/theme-colors colors/success-50 colors/success-60 theme)}
+           (condp = size
+             :size-24 {:height        (if hold? 26 24)
+                       :padding-right 10
+                       :border-radius (if hold? 13 12)}
+             :size-32 {:height        (if hold? 34 32)
+                       :padding-right 12
+                       :border-radius (if hold? 17 16)}))))
+
+(defn options-icon
+  [size]
+  (assoc
+   (condp = size
+     :size-24 {:right -8
+               :top   -8}
+     :size-32 {:right -6
+               :top   -6})
+   :position
+   :absolute))
+
+(defn token-img
+  [size]
+  (condp = size
+    :size-24 {:width         20
+              :height        20
+              :margin-right  6
+              :border-radius 10}
+    :size-32 {:width         28
+              :height        28
+              :margin-right  8
+              :border-radius 14}))
+
+(defn label
+  [theme]
+  {:color (colors/theme-colors colors/neutral-100 colors/white theme)})

src/quo/components/tags/token_tag/view.cljs

@@ -0,0 +1,57 @@
+(ns quo.components.tags.token-tag.view
+  (:require
+    [oops.core :refer [oget]]
+    [quo.components.icon :as icons]
+    [quo.components.markdown.text :as text]
+    [quo.components.tags.token-tag.style :as style]
+    [quo.theme :as quo.theme]
+    [react-native.core :as rn]
+    [react-native.hole-view :as hole-view]
+    [reagent.core :as reagent]))
+
+(defn- view-internal
+  "Options:
+    - :options - false / :add / :hold (default false)
+    - :size - :size-24 / :size-32 (default :size-24)
+    - :blur? - boolean (default false)
+    - :theme - :light / :dark 
+    - :token-img-src - token image source
+    - :token-value - string - token value
+    - :token-symbol - string"
+  []
+  (let [container-width (reagent/atom 0)]
+    (fn [{:keys [options size blur? theme token-img-src token-value token-symbol]
+          :or   {size :size-24}}]
+      [rn/view
+       {:on-layout #(reset! container-width
+                      (oget % :nativeEvent :layout :width))}
+       [hole-view/hole-view
+        {:holes (if options
+                  [{:x            (- @container-width
+                                     (condp = size
+                                       :size-24 10
+                                       :size-32 12))
+                    :y            (condp = size
+                                    :size-24 -6
+                                    :size-32 -4)
+                    :width        16
+                    :height       16
+                    :borderRadius 8}]
+                  [])}
+        [rn/view
+         {:style (style/container size options blur? theme)}
+         [rn/image
+          {:style  (style/token-img size)
+           :source token-img-src}]
+         [text/text
+          {:size   :paragraph-2
+           :weight :medium
+           :style  (style/label theme)}
+          (str token-value " " token-symbol)]]]
+       (when options
+         [rn/view {:style (style/options-icon size)}
+          [icons/icon (if (= options :hold) :i/hold :i/add-token)
+           {:size     20
+            :no-color true}]])])))
+
+(def view (quo.theme/with-theme view-internal))

src/quo/core.cljs

@@ -132,7 +132,7 @@
     quo.components.tags.tag
     quo.components.tags.tags
     quo.components.tags.tiny-tag.view
-    quo.components.tags.token-tag
+    quo.components.tags.token-tag.view
     quo.components.text-combinations.view
     quo.components.wallet.account-card.view
     quo.components.wallet.account-origin.view
@@ -360,7 +360,7 @@
 (def tag quo.components.tags.tag/tag)
 (def tags quo.components.tags.tags/tags)
 (def tiny-tag quo.components.tags.tiny-tag.view/view)
-(def token-tag quo.components.tags.token-tag/tag)
+(def token-tag quo.components.tags.token-tag.view/view)
 
 ;;;; Text combinations
 (def text-combinations quo.components.text-combinations.view/view)

src/status_im2/common/floating_button_page/constants.cljs

@@ -1,2 +0,0 @@
-(ns status-im2.common.floating-button-page.constants)
-

src/status_im2/common/floating_button_page/floating_container/style.cljs

@@ -1,26 +0,0 @@
-(ns status-im2.common.floating-button-page.floating-container.style
-  (:require [quo.foundations.colors :as colors]
-            [react-native.platform :as platform]))
-
-;; TODO: consider modals and customizable props
-(defn container
-  [{:keys [top]} button-height theme background-shown? blur?]
-  {:width            "100%"
-   :padding-left     20
-   :padding-right    20
-   :padding-top      12
-   :padding-bottom   12
-   :align-self       :flex-end
-   ;;    :margin-bottom (+ top 10)
-   :background-color (when (and background-shown? (not blur?))
-                       (colors/theme-colors colors/white colors/neutral-70 theme))})
-
-
-(defn view-container
-  [keyboard-shown? insets button-height theme background-shown?]
-  (container insets button-height theme background-shown? false))
-
-(defn blur-container
-  [_ insets button-height theme background-shown?]
-  (merge (container insets button-height theme background-shown? true)
-         (when platform/android? {:padding-bottom 12})))

src/status_im2/common/floating_button_page/floating_container/view.cljs

@@ -1,47 +0,0 @@
-(ns status-im2.common.floating-button-page.floating-container.view
-  (:require [quo.foundations.colors :as colors]
-            [react-native.blur :as blur]
-            [react-native.core :as rn]
-            [react-native.platform :as platform]
-            [react-native.safe-area :as safe-area]
-            [status-im2.common.floating-button-page.floating-container.style :as style]))
-
-(def blur-container-props
-  {:blur-amount      36
-   :blur-radius      25
-   :blur-type        :light ;:transparent
-   ;:overlay-color    (colors/theme-colors colors/black colors/neutral-70 theme)
-
-   :background-color (if platform/android? colors/neutral-100 colors/neutral-80-opa-1-blur)})
-
-
-(defn- blur-container
-  [props & children]
-  [rn/view
-   (merge props
-          {:width              "100%"
-           :padding-horizontal 20
-           :padding-vertical   12
-           :overflow           :hidden})
-   ;; TODO: add theme to blur props
-   (into [blur/view blur-container-props] children)])
-
-"
--  on-layout will trigger to dynamically get the height of the container to screen using it.
-"
-(defn view
-  [{:keys [on-layout blur? container-style child-height theme show-background?
-           floating?]}
-   children]
-  (let [insets                 (safe-area/get-insets)
-        blur-active?           (and blur? show-background?)
-        container-view         (if blur-active? blur-container rn/view)
-        inline-container-style (if blur-active? style/blur-container style/view-container)]
-
-    [container-view
-     {:on-layout on-layout
-      :style     (merge container-style
-                        (inline-container-style floating? insets child-height theme show-background?))}
-     children]))
-
-

src/status_im2/common/floating_button_page/style.cljs

@@ -1,16 +0,0 @@
-(ns status-im2.common.floating-button-page.style)
-
-(def page-container
-  {:position :absolute
-   :top      0
-   :bottom   0
-   :left     0
-   :right    0})
-
-(defn keyboard-view-style
-  [keyboard-shown?]
-  {:border-width 1
-   :border-color :yellow
-   ;:padding-bottom (if-not keyboard-shown? 12 0)
-  })
-

src/status_im2/common/floating_button_page/style2.cljs

@@ -1,44 +0,0 @@
-(ns status-im2.common.floating-button-page.style2
-  (:require [react-native.platform :as platform]
-            [status-im2.common.floating-button-page.constants :as constants]))
-
-(def page-container
-  {:position :absolute
-   :top      0
-   :bottom   0
-   :left     0
-   :right    0
-   :z-index  100})
-
-(def keyboard-view-style
-  {:position     :absolute
-   :left         0
-   :right        0
-   :top          0
-   :bottom       0
-   :border-width 1
-   :border-color :blue
-  })
-
-(defn button-container
-  [{:keys [top]}]
-  {:width         "100%"
-   :padding-left  20
-   :padding-right 20
-   :padding-top   12
-   :align-self    :flex-end
-   :margin-bottom (+ top 10) ;; this value is needed for the modal page - perhaps dynamically adjusted
-                             ;; based on page type
-   :height        constants/button-height})
-
-(defn view-button-container
-  [keyboard-shown? insets]
-  (merge (button-container insets)
-         (if platform/ios?
-           {:margin-bottom (if keyboard-shown? 0 34)}
-           {:margin-bottom (if keyboard-shown? 12 34)})))
-
-(defn blur-button-container
-  [insets]
-  (merge (button-container insets)
-         (when platform/android? {:padding-bottom 12})))

src/status_im2/common/floating_button_page/view.cljs

@@ -1,161 +0,0 @@
-(ns status-im2.common.floating-button-page.view
-  (:require
-    [oops.core :as oops]
-    [quo.theme :as quo.theme]
-    [react-native.core :as rn]
-    [react-native.hooks :as hooks]
-    [react-native.platform :as platform]
-    [react-native.safe-area :as safe-area]
-    [reagent.core :as reagent]
-    [status-im2.common.floating-button-page.floating-container.view :as floating-container]
-    [status-im2.common.floating-button-page.style :as style]))
-
-(defn show-button-background?
-  [{:keys [keyboard-shown? available-space content-height] :as props}]
-  (when keyboard-shown?
-    (< available-space content-height)))
-
-#_(when keyboard-shown
-    (cond
-      platform/android?
-      (< (- @scroll-view-height button-container-height) @content-container-height)
-
-      platform/ios?
-      (< (- @scroll-view-height keyboard-view-height) (- @content-container-height content-scroll-y))
-
-      :else
-      false))
-
-(defonce scroll-view-ref (atom nil))
-
-(defn f-view
-  [{:keys [blur?]} header page-content footer]
-  (reagent/with-let [theme                     (quo.theme/use-theme-value)
-                     window-height             (:height (rn/get-window))
-                     header-height             (reagent/atom 0)
-                     footer-height             (reagent/atom 0)
-                     floating-container-height (reagent/atom 0)
-                     content-container-height  (reagent/atom 0)
-                     content-scroll-y          (reagent/atom 0)
-                     ;;
-
-                     #_#_show-listener             (oops/ocall rn/keyboard
-                                                           "addListener"
-                                                           "keyboardDidShow"
-                                                           (fn [e]
-                                                             (prn e)
-                                                             (js/setTimeout
-                                                              (fn []
-                                                                (println "LAST SCROLL POSITION: " @content-scroll-y)
-                                                                (println "FINAL SHOULD BE:" (+ @content-scroll-y @footer-height))
-
-                                                                (some-> @scroll-view-ref
-                                                                  (.scrollTo #js {:x        0
-                                                                                  :y        (+ @content-scroll-y @footer-height)
-                                                                                  :animated true})))
-                                                              (+ (oops/oget e "duration") 300))))]
-    (let [{:keys [keyboard-shown
-                  keyboard-height]} (hooks/use-keyboard)
-          show-background? (show-button-background?
-                            {:keyboard-shown? keyboard-shown
-                             :available-space (- window-height
-                                                 keyboard-height
-                                                 @floating-container-height
-                                                 (safe-area/get-top)
-                                                 50)
-                             :content-height  (+ @content-scroll-y
-                                                 @content-container-height
-                                                 @header-height)})]
-      [rn/view {:style {:flex 1} ; style/page-container
-                }
-       [rn/keyboard-avoiding-view
-        {:behavior                :position
-         :style                   {:background-color :goldenrod
-                                   :flex             1}
-         :content-container-style {:position :absolute
-                                   :top      0
-                                   :bottom   0
-                                   :left     0
-                                   :right    0}}
-        [rn/view {:style     {:position     :absolute
-                              :top          0
-                              :bottom       0
-                              :left         0
-                              :right        0
-                              :flex         1
-                              :height       700
-                              :border-width 1
-                              :border-color :red}
-                  :on-layout (fn [event]
-                               (let [height (oops/oget event "nativeEvent.layout.height")]
-                                 (reset! content-container-height height)))}
-
-         [rn/view
-          {:on-layout (fn [event]
-                        (let [height (oops/oget event "nativeEvent.layout.height")]
-                          (reset! header-height height)))}
-          header]
-
-         [rn/scroll-view {:ref                     #(reset! scroll-view-ref %)
-                          :on-scroll               (fn [event]
-                                                     (let [y (oops/oget event "nativeEvent.contentOffset.y")]
-                                                       (prn y)
-                                                       (reset! content-scroll-y y)))
-                          :scroll-event-throttle   64
-                          :content-container-style {:flex-grow        1
-                                                    :background-color :grey
-                                                    ;:padding-bottom @footer-height
-                                                    }}
-
-          page-content]]
-        #_[rn/view {:style     {:border-width     1
-                                :border-color     :red
-                                :background-color :lightblue}
-                    :on-layout (fn [event]
-                                 (let [height (oops/oget event "nativeEvent.layout.height")]
-                                   (reset! content-container-height height)))}
-           page-content]
-
-
-        #_(when keyboard-shown
-            [rn/view {:style {:height           100
-                              :background-color :orange}}])]
-
-
-       #_[rn/view {:style     (cond-> {:position :absolute
-                                     :left     0
-                                     :right    0
-                                     :bottom   0})
-                 :on-layout (fn [event]
-                              (let [height (oops/oget event "nativeEvent.layout.height")]
-                                (reset! footer-height height)))}
-        [rn/view {:style {:padding-vertical   16
-                          :padding-horizontal 20
-                          :background-color   (if show-background?
-                                                ;"rgba(67, 90, 183, 1)"
-                                                "rgba(67, 90, 183, 0.4352)"
-                                                "rgba(67, 90, 183, 0.4352)")}}
-         footer]]
-
-
-       #_[floating-container/view
-          {:theme            theme
-           :blur?            blur?
-           :floating?        keyboard-shown
-           :show-background? show-background?
-           :on-layout        (fn [event]
-                               (let [height (oops/oget event "nativeEvent.layout.height")]
-                                 (prn height "height height height")
-                                 (reset! floating-container-height height)))}
-          footer
-          ;[ button-props button-label]
-          ]
-
-       ])
-    (finally
-     ;(oops/ocall show-listener "remove")
-     )))
-
-(defn view
-  [props header page-content button-component]
-  [:f> f-view props header page-content button-component])

src/status_im2/common/floating_button_page/view2.cljs

@@ -1,110 +0,0 @@
-(ns status-im2.common.floating-button-page.view2
-  (:require
-    [oops.core :as oops]
-    [quo.core :as quo]
-    [quo.foundations.colors :as colors]
-    [react-native.blur :as blur]
-    [react-native.core :as rn]
-    [react-native.hooks :as hooks]
-    [react-native.platform :as platform]
-    [react-native.safe-area :as safe-area]
-    [reagent.core :as reagent]
-    [status-im2.common.floating-button-page.constants :as constants]
-    [status-im2.common.floating-button-page.style :as style]))
-
-(defn show-button-background
-  [keyboard-height keyboard-shown content-scroll-y scroll-view-height content-container-height]
-  (let [button-container-height constants/button-height
-        keyboard-view-height    (+ keyboard-height button-container-height)]
-    (when keyboard-shown
-      (if
-        platform/android?
-        (< (- scroll-view-height button-container-height) content-container-height)
-        (< (- scroll-view-height keyboard-view-height) (- content-container-height content-scroll-y))))))
-
-(defn button-container
-  [{:keys [show-keyboard? keyboard-shown show-background? keyboard-height]} children]
-  (let [insets (safe-area/get-insets)
-        height (reagent/atom 0)]
-    (reset! height (if show-keyboard? (if keyboard-shown keyboard-height 0) 0))
-    [rn/view {:style {:margin-top :auto}}
-     (cond
-       (and (> @height 0) show-background?)
-       [blur/view
-        (when keyboard-shown
-          {:blur-amount      34
-           :blur-type        :transparent
-           :overlay-color    :transparent
-           :background-color (if platform/android? colors/neutral-100 colors/neutral-80-opa-1-blur)
-           :style            (style/blur-button-container insets)})
-        children]
-
-       (and (> @height 0) (not show-background?))
-       [rn/view {:style (style/view-button-container true insets)}
-        children]
-
-       (not show-keyboard?)
-       [rn/view {:style (style/view-button-container false insets)}
-        children])]))
-
-(defn f-view
-  [{:keys [button-props button-label]} header children]
-  (reagent/with-let [scroll-view-height       (reagent/atom 0)
-                     content-container-height (reagent/atom 0)
-                     show-keyboard?           (reagent/atom false)
-                     content-scroll-y         (reagent/atom 0)
-                     show-listener            (oops/ocall rn/keyboard
-                                                          "addListener"
-                                                          (if platform/android?
-                                                            "keyboardDidShow"
-                                                            "keyboardWillShow")
-                                                          #(reset! show-keyboard? true))
-                     hide-listener            (oops/ocall rn/keyboard
-                                                          "addListener"
-                                                          (if platform/android?
-                                                            "keyboardDidHide"
-                                                            "keyboardWillHide")
-                                                          #(reset! show-keyboard? false))]
-
-    (let [{:keys [keyboard-shown
-                  keyboard-height]} (hooks/use-keyboard)
-          show-background?          (show-button-background keyboard-height
-                                                            keyboard-shown
-                                                            @content-scroll-y
-                                                            @scroll-view-height
-                                                            @content-container-height)]
-
-      [rn/view {:style style/page-container}
-       header
-       [rn/scroll-view
-        {:on-layout               (fn [event]
-                                    (let [height (oops/oget event "nativeEvent.layout.height")]
-                                      (reset! scroll-view-height height)
-                                      (reset! content-scroll-y 0)))
-         :on-scroll               (fn [event]
-                                    (let [y (oops/oget event "nativeEvent.contentOffset.y")]
-                                      (reset! content-scroll-y y)))
-         :scroll-event-throttle   64
-         :content-container-style {:flexGrow 1}}
-        [rn/view
-         {:on-layout (fn [event]
-                       (let [height (oops/oget event "nativeEvent.layout.height")]
-                         (reset! content-container-height height)))}
-         [rn/view
-          children]]]
-       [rn/keyboard-avoiding-view
-        {:style          style/keyboard-view-style
-         :pointer-events :box-none}
-        [button-container
-         {:show-keyboard?   @show-keyboard?
-          :keyboard-shown   keyboard-shown
-          :show-background? show-background?
-          :keyboard-height  keyboard-height}
-         [quo/button button-props button-label]]]])
-    (finally
-     (oops/ocall show-listener "remove")
-     (oops/ocall hide-listener "remove"))))
-
-(defn view
-  [props header children]
-  [:f> f-view props header children])

src/status_im2/contexts/onboarding/create_profile/view.cljs

@@ -190,16 +190,16 @@
              :icon-color (when (= :default info-type) colors/white-70-blur)
              :style      style/info-message}
             info-message]
-           [rn/view {:style {:margin-top 80}}
-            [quo/text
-             {:size   :paragraph-2
-              :weight :medium
-              :style  style/color-title}
-             (i18n/label :t/accent-colour)]]
+           [quo/text
+            {:size   :paragraph-2
+             :weight :medium
+             :style  style/color-title}
+            (i18n/label :t/accent-colour)]
            [quo/color-picker
             {:blur?            true
              :default-selected :blue
              :on-change        on-change}]]]]]
+
        [rn/keyboard-avoiding-view
         {:style          {:position :absolute
                           :top      0

src/status_im2/contexts/quo_preview/drawers/permission_drawers.cljs

@@ -42,8 +42,10 @@
   [:<>
    [quo/text {:style {:margin-right 4}} "Hold"]
    [quo/token-tag
-    {:size          :small
-     :token-img-src (quo.resources/get-token :eth)} "ETH"]
+    {:size          :size-24
+     :token-img-src (quo.resources/get-token :eth)
+     :token-value   5
+     :token-symbol  "ETH"}]
    [quo/text {:style {:margin-left 4}} "To post"]])
 
 (defn example-3

src/status_im2/contexts/quo_preview/main.cljs

@@ -119,7 +119,6 @@
      numbered-keyboard]
     [status-im2.contexts.quo-preview.onboarding.small-option-card :as
      small-option-card]
-    [status-im2.contexts.quo-preview.other-components.view :as other-components]
     [status-im2.contexts.quo-preview.password.tips :as tips]
     [status-im2.contexts.quo-preview.profile.collectible :as collectible]
     [status-im2.contexts.quo-preview.profile.profile-card :as profile-card]
@@ -152,6 +151,7 @@
     [status-im2.contexts.quo-preview.tags.number-tag :as number-tag]
     [status-im2.contexts.quo-preview.tags.permission-tag :as permission-tag]
     [status-im2.contexts.quo-preview.tags.status-tags :as status-tags]
+    [status-im2.contexts.quo-preview.tags.tag :as tag]
     [status-im2.contexts.quo-preview.tags.tags :as tags]
     [status-im2.contexts.quo-preview.tags.tiny-tag :as tiny-tag]
     [status-im2.contexts.quo-preview.tags.token-tag :as token-tag]
@@ -175,9 +175,7 @@
     [utils.re-frame :as rf]))
 
 (def screens-categories
-  {:other-components  [{:name      :other-components
-                        :component other-components/view}]
-   :foundations       [{:name      :shadows
+  {:foundations       [{:name      :shadows
                         :component shadows/view}]
    :animated-list     [{:name      :animated-header-list
                         :component animated-header-list/mock-screen}]
@@ -419,21 +417,23 @@
                        {:name      :account-selector
                         :component account-selector/view}]
    :tags              [{:name      :context-tags
-                        :component context-tags/preview-context-tags}
+                        :component context-tags/view}
                        {:name      :network-tags
-                        :component network-tags/preview}
+                        :component network-tags/view}
                        {:name      :number-tag
-                        :component number-tag/preview}
+                        :component number-tag/view}
                        {:name      :permission-tag
-                        :component permission-tag/preview-permission-tag}
+                        :component permission-tag/view}
                        {:name      :status-tags
-                        :component status-tags/preview-status-tags}
+                        :component status-tags/view}
+                       {:name      :tag
+                        :component tag/view}
                        {:name      :tags
-                        :component tags/preview-tags}
+                        :component tags/view}
                        {:name      :tiny-tag
                         :component tiny-tag/preview-tiny-tag}
                        {:name      :token-tag
-                        :component token-tag/preview-token-tag}]
+                        :component token-tag/view}]
    :text-combinations [{:name      :text-combinations
                         :component text-combinations/view}]
    :wallet            [{:name :account-card :component account-card/preview-account-card}

src/status_im2/contexts/quo_preview/other_components/style.cljs

@@ -1 +0,0 @@
-(ns status-im2.contexts.quo-preview.other-components.style)

src/status_im2/contexts/quo_preview/other_components/view.cljs

@@ -1,116 +0,0 @@
-(ns status-im2.contexts.quo-preview.other-components.view
-  (:require [quo.core :as quo]
-            [re-frame.core :as rf]
-            [react-native.core :as rn]
-            [react-native.safe-area :as safe-area]
-            [reagent.core :as reagent]
-            [status-im2.common.floating-button-page.view :as floating-button-page]))
-
-(defn view
-  []
-  (let [button-pressed? (reagent/atom false)
-        acc-height      (reagent/atom 300)]
-    (fn []
-      [rn/view
-       {:margin-top   (safe-area/get-top)
-        :flex         1
-        :border-width 1
-        :border-color :green}
-
-       #_[rn/view
-          {:style {:position :absolute
-                   :top      0
-                   :bottom   0
-                   :left     0
-                   :right    0}}
-
-          [rn/image
-           {:style  {:flex 1}
-            :source (resources/get-mock-image :dark-blur-bg)}]]
-       #_[rn/view
-          {:style {:position         :absolute
-                   :top              10
-                   :left             10
-                   :right            10
-                   :background-color :yellow
-                   :height           730
-                   :z-index          10}}]
-
-       [floating-button-page/view
-        {:blur? false}
-        #_#_:button-props
-                {:container-style     {:z-index 2}
-                 :customization-color :army
-                 :on-press            #(js/alert "to be implemented")}
-        ;:button-label  "Save address"
-
-        [quo/page-nav
-         {:type       :no-title
-          :text-align :left
-          :right-side []
-          :background :blur
-          :icon-name  :i/close
-          :on-press   #(rf/dispatch [:navigate-back])}]
-
-        [rn/view
-         {:style {:flex     1
-                  ;:height   @acc-height
-                  :overflow :hidden}}
-         [quo/input
-          {:label "label"
-           :value "value"}]
-         [quo/input
-          {:label "label"
-           :value "value"}]
-         [quo/input
-          {:label "label"
-           :value "value"}]
-         [quo/input
-          {:label "label"
-           :value "value"}]
-         [quo/input
-          {:label "label"
-           :value "value"}]
-         [quo/input
-          {:label "label"
-           :value "value"}]
-         [quo/input
-          {:label "label"
-           :value "value"}]
-         [quo/input
-          {:label "label"
-           :value "value"}]
-         [quo/input
-          {:label "label"
-           :value "value"}]
-         [quo/input
-          {:label "label"
-           :value "value"}]
-         [quo/input
-          {:label "label"
-           :value "value"}]
-         [quo/input
-          {:label "label"
-           :value "value"}]]
-        [quo/button
-         {:container-style     {:z-index 2}
-          :customization-color (if @button-pressed? :army :blue)
-          :on-press            (fn []
-                                 (prn @acc-height)
-                                 (swap! acc-height + 20)
-                                 (swap! button-pressed? not))} ;#(js/alert "to be implemented")
-         "Save address"]
-
-       ]
-       #_[rn/view
-          {:position         :absolute
-           :top              -44
-           :bottom           0
-           :left             10
-           :right            200
-           :height           460
-           :border-width     1
-           :border-color     :purple
-           :background-color :yellow
-           :z-index          50}]
-      ])))

src/status_im2/contexts/quo_preview/share/qr_code.cljs

@@ -58,7 +58,6 @@
     :type :text}
    (preview/customization-color-option)])
 
-
 (defn view
   []
   (let [media-server-port (rf/sub [:mediaserver/port])

src/status_im2/contexts/quo_preview/tags/context_tags.cljs

@@ -21,15 +21,13 @@
     :value "User pic female 2"}])
 
 (def size-descriptor
-  {:label   "Size"
-   :key     :size
+  {:key     :size
    :type    :select
    :options [{:key 24}
              {:key 32}]})
 
 (def descriptor
-  [{:label   "Type"
-    :key     :type
+  [{:key     :type
     :type    :select
     :options [{:key :default}
               {:key :multiuser}
@@ -66,8 +64,7 @@
                nil
                (resources/mock-images :user-picture-female2)
                nil]]
-    [{:label   "users"
-      :key     :users
+    [{:key     :users
       :type    :select
       :options (map (fn [idx]
                       {:key   (mapv (fn [picture idx-name]
@@ -81,44 +78,36 @@
 
 (def group-descriptor
   [size-descriptor
-   {:label "Group"
-    :key   :group-name
-    :type  :text}])
+   {:key  :group-name
+    :type :text}])
 
 (def channel-descriptor
   [size-descriptor
-   {:label "Community name"
-    :key   :community-name
-    :type  :text}
-   {:label "Channel name"
-    :key   :channel-name
-    :type  :text}])
+   {:key  :community-name
+    :type :text}
+   {:key  :channel-name
+    :type :text}])
 
 (def community-descriptor
   [size-descriptor
-   {:label "Community name"
-    :key   :community-name
-    :type  :text}])
+   {:key  :community-name
+    :type :text}])
 
 (def token-descriptor
   [size-descriptor
-   {:label "Amount"
-    :key   :amount
-    :type  :text}
-   {:label "Token name"
-    :key   :token-name
-    :type  :text}])
+   {:key  :amount
+    :type :text}
+   {:key  :token-name
+    :type :text}])
 
 (def network-descriptor
   [size-descriptor
-   {:label "Network name"
-    :key   :network-name
-    :type  :text}])
+   {:key  :network-name
+    :type :text}])
 
 (def multinetwork-descriptor
   (let [networks (cycle [(resources/mock-images :monkey) (resources/mock-images :diamond)])]
-    [{:label   "Networks"
-      :key     :networks
+    [{:key     :networks
       :type    :select
       :options (map (fn [size]
                       {:key   (take size networks)
@@ -127,11 +116,9 @@
 
 (def account-descriptor
   [size-descriptor
-   {:label "Account name"
-    :key   :account-name
-    :type  :text}
-   {:label   "Emoji"
-    :key     :emoji
+   {:key  :account-name
+    :type :text}
+   {:key     :emoji
     :type    :select
     :options [{:key "🐷" :value "🐷"}
               {:key "🍇" :value "🍇"}
@@ -139,39 +126,63 @@
 
 (def collectible-descriptor
   [size-descriptor
-   {:label "Collectible name"
-    :key   :collectible-name
-    :type  :text}
-   {:label "Collectible number"
-    :key   :collectible-number
-    :type  :text}])
+   {:key  :collectible-name
+    :type :text}
+   {:key  :collectible-number
+    :type :text}])
 
 (def address-descriptor
   [size-descriptor])
 
 (def icon-descriptor
   [size-descriptor
-   {:label "Context"
-    :key   :context
-    :type  :text}
-   {:label   "Icon"
-    :key     :icon
+   {:key  :context
+    :type :text}
+   {:key     :icon
     :type    :select
     :options [{:key :i/placeholder :value "Placeholder"}
               {:key :i/add :value "Add"}
               {:key :i/alert :value "Alert"}]}])
 
 (def audio-descriptor
-  [{:label "Duration"
-    :key   :duration
-    :type  :text}])
+  [{:key  :duration
+    :type :text}])
 
-(defn preview-context-tags
+(defn f-view
+  [state type]
+  (rn/use-effect (fn []
+                   (when (#{:multiuser :multinetwork :audio} @type)
+                     (swap! state assoc :size 24)))
+                 [@type])
+  [preview/preview-container
+   {:state                 state
+    :descriptor            (concat descriptor
+                                   (case (:type @state)
+                                     :default      default-descriptor
+                                     :multiuser    multiuser-descriptor
+                                     :group        group-descriptor
+                                     :channel      channel-descriptor
+                                     :community    community-descriptor
+                                     :token        token-descriptor
+                                     :network      network-descriptor
+                                     :multinetwork multinetwork-descriptor
+                                     :account      account-descriptor
+                                     :collectible  collectible-descriptor
+                                     :address      address-descriptor
+                                     :icon         icon-descriptor
+                                     :audio        audio-descriptor
+                                     default-descriptor))
+    :blur-height           80
+    :blur?                 (:blur? @state)
+    :show-blur-background? true}
+   [rn/view {:style {:align-items :center}}
+    [quo/context-tag @state]]])
+
+(defn view
   []
   (let [state
         (reagent/atom
-         {:label               "Name"
-          :size                32
+         {:size                32
           :type                :group
           :blur?               false
           :state               :selected
@@ -208,32 +219,4 @@
           :context             "Context"
           :duration            "00:32"})
         type (reagent/cursor state [:type])]
-    [:f>
-     (fn []
-       (rn/use-effect (fn []
-                        (when (#{:multiuser :multinetwork :audio} @type)
-                          (swap! state assoc :size 24)))
-                      [@type])
-       [preview/preview-container
-        {:state                 state
-         :descriptor            (concat descriptor
-                                        (case (:type @state)
-                                          :default      default-descriptor
-                                          :multiuser    multiuser-descriptor
-                                          :group        group-descriptor
-                                          :channel      channel-descriptor
-                                          :community    community-descriptor
-                                          :token        token-descriptor
-                                          :network      network-descriptor
-                                          :multinetwork multinetwork-descriptor
-                                          :account      account-descriptor
-                                          :collectible  collectible-descriptor
-                                          :address      address-descriptor
-                                          :icon         icon-descriptor
-                                          :audio        audio-descriptor
-                                          default-descriptor))
-         :blur-height           80
-         :blur?                 true
-         :show-blur-background? (:blur? @state)}
-        [rn/view {:style {:align-items :center}}
-         [quo/context-tag @state]]])]))
+    [:f> f-view state type]))

src/status_im2/contexts/quo_preview/tags/network_tags.cljs

@@ -30,7 +30,7 @@
     :key  :blur?}])
 
 
-(defn preview
+(defn view
   []
   (let [state (reagent/atom {:title    "Tag"
                              :status   :default
@@ -46,7 +46,6 @@
                  :justify-content :center
                  :flex            1}}
         [quo/network-tags
-         {:networks (nth community-networks (dec (:networks @state)))
-          :status   (:status @state)
-          :title    (:title @state)
-          :blur?    (:blur? @state)}]]])))
+         (assoc @state
+                :networks
+                (nth community-networks (dec (:networks @state))))]]])))

src/status_im2/contexts/quo_preview/tags/number_tag.cljs

@@ -1,7 +1,6 @@
 (ns status-im2.contexts.quo-preview.tags.number-tag
   (:require
     [quo.core :as quo]
-    [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im2.contexts.quo-preview.preview :as preview]))
 
@@ -27,16 +26,16 @@
    {:key  :blur?
     :type :boolean}])
 
-(defn preview
+(defn view
   []
   (let [state (reagent/atom {:type   :squared
                              :number "148"
                              :size   :size-32
                              :blur?  false})]
     (fn []
-      [preview/preview-container {:state state :descriptor descriptor}
-       [rn/view
-        {:padding-vertical 60
-         :flex-direction   :row
-         :justify-content  :center}
-        [quo/number-tag @state]]])))
+      [preview/preview-container
+       {:state                 state
+        :descriptor            descriptor
+        :blur?                 (:blur? @state)
+        :show-blur-background? true}
+       [quo/number-tag @state]])))

src/status_im2/contexts/quo_preview/tags/permission_tag.cljs

@@ -1,6 +1,6 @@
 (ns status-im2.contexts.quo-preview.tags.permission-tag
   (:require
-    [quo.components.tags.permission-tag :as permission-tag]
+    [quo.core :as quo]
     [quo.foundations.colors :as colors]
     [react-native.core :as rn]
     [reagent.core :as reagent]
@@ -8,16 +8,14 @@
     [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Size:"
-    :key     :size
+  [{:key     :size
     :type    :select
     :options [{:key   32
                :value "32"}
               {:key   24
                :value "24"}]}
-   {:label "Locked:"
-    :key   :locked?
-    :type  :boolean}])
+   {:key  :locked?
+    :type :boolean}])
 
 (def community-tokens
   [{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-mock-image :status-logo)}]}]}
@@ -168,27 +166,23 @@
                       {:id 5 :token-icon (resources/get-mock-image :status-logo)}
                       {:id 6 :token-icon (resources/get-mock-image :status-logo)}]}]}])
 
-(defn preview-permission-tag
+(defn view
   []
   (let [state (reagent/atom {:size 32})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view {:padding-bottom 150}
-        [rn/view
-         {:padding-vertical 60
-          :align-self       :center
-          :justify-content  :center}
-         (when @state
-           (for [{:keys [tokens]} community-tokens]
-             ^{:key tokens}
-             [rn/view
-              {:margin-top 20
-               :align-self :flex-end}
-              [permission-tag/tag
-               (merge @state
-                      {:tokens           tokens
-                       :background-color (colors/theme-colors
-                                          colors/neutral-10
-                                          colors/neutral-80)})]]))]]])))
+       {:state                     state
+        :component-container-style {:margin-bottom 40}
+        :descriptor                descriptor}
+       (when @state
+         (for [{:keys [tokens]} community-tokens]
+           ^{:key tokens}
+           [rn/view
+            {:margin-top 20
+             :align-self :flex-end}
+            [quo/permission-tag
+             (merge @state
+                    {:tokens           tokens
+                     :background-color (colors/theme-colors
+                                        colors/neutral-10
+                                        colors/neutral-80)})]]))])))

src/status_im2/contexts/quo_preview/tags/status_tags.cljs

@@ -1,7 +1,6 @@
 (ns status-im2.contexts.quo-preview.tags.status-tags
   (:require
-    [quo.components.tags.status-tags :as quo]
-    [quo.foundations.colors :as colors]
+    [quo.core :as quo]
     [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im2.contexts.quo-preview.preview :as preview]
@@ -31,7 +30,7 @@
     :key   :blur?
     :type  :boolean}])
 
-(defn preview-status-tags
+(defn view
   []
   (let [state (reagent/atom {:status :positive
                              :size   :small
@@ -48,11 +47,9 @@
                                   (assoc :status {:type :pending})
                                   (assoc :label (i18n/label :t/pending))))]
         [preview/preview-container
-         {:state      state
-          :descriptor descriptor}
-         [rn/view {:padding-bottom 150}
-          [preview/blur-view
-           {:show-blur-background? (:blur? @state)
-            :blur-view-props       {:blur-type     :dark
-                                    :overlay-color colors/neutral-80-opa-80}
-            :style                 {:align-self :center}} [quo/status-tag props]]]]))))
+         {:state                 state
+          :show-blur-background? true
+          :blur?                 (:blur? @state)
+          :descriptor            descriptor}
+         [rn/view {:style {:flex-direction :row}}
+          [quo/status-tag props]]]))))

src/status_im2/contexts/quo_preview/tags/tag.cljs

@@ -1,23 +1,18 @@
 (ns status-im2.contexts.quo-preview.tags.tag
   (:require
-    [quo.components.tags.tag :as tag]
-    [quo.foundations.colors :as colors]
-    [react-native.core :as rn]
+    [quo.core :as quo]
     [reagent.core :as reagent]
-    [status-im.ui.components.react :as react]
     [status-im2.common.resources :as resources]
     [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Size:"
-    :key     :size
+  [{:key     :size
     :type    :select
     :options [{:key   32
                :value "32"}
               {:key   24
                :value "24"}]}
-   {:label   "Type:"
-    :key     :type
+   {:key     :type
     :type    :select
     :options [{:key   :emoji
                :value "Emoji"}
@@ -25,63 +20,31 @@
                :value "Icons"}
               {:key   :label
                :value "Label"}]}
-   {:label "Labelled:"
-    :key   :labelled?
-    :type  :boolean}
-   {:label "Disabled:"
-    :key   :disabled?
-    :type  :boolean}
-   {:label "Blurred background:"
-    :key   :blurred?
-    :type  :boolean}])
+   {:key  :labelled?
+    :type :boolean}
+   {:key  :disabled?
+    :type :boolean}
+   {:key  :blurred?
+    :type :boolean}])
 
-(defn preview-tag
+(defn view
   []
   (let [state (reagent/atom {:size      32
                              :labelled? true
                              :type      :emoji})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view
-        {:style {:padding-bottom 150
-                 :padding-top    60}}
-        [rn/view
-         {:style {:flex               1
-                  :justify-content    :center
-                  :top                60
-                  :padding-horizontal 16}}
-         (when (:blurred? @state)
-           [rn/view
-            {:style {:flex   1
-                     :height 100}}
-            [react/image
-             {:source (resources/get-mock-image :community-cover)
-              :style  {:flex          1
-                       :width         "100%"
-                       :border-radius 16}}]
-            [react/blur-view
-             {:flex          1
-              :style         {:border-radius 16
-                              :height        100
-                              :position      :absolute
-                              :left          0
-                              :right         0}
-              :blur-amount   20
-              :overlay-color (colors/theme-colors
-                              colors/white-opa-70
-                              colors/neutral-80-opa-80)}]])
-         [rn/view
-          {:style {:position   :absolute
-                   :align-self :center}}
-          [tag/tag
-           (merge @state
-                  {:id        1
-                   :label     "Tag"
-                   :labelled? (if (= (:type @state) :label)
-                                true
-                                (:labelled? @state))
-                   :resource  (if (= :emoji (:type @state))
-                                (resources/get-image :music)
-                                :i/placeholder)})]]]]])))
+       {:state                 state
+        :descriptor            descriptor
+        :show-blur-background? true
+        :blur?                 (:blurred? @state)}
+       [quo/tag
+        (merge @state
+               {:id        1
+                :label     "Tag"
+                :labelled? (if (= (:type @state) :label)
+                             true
+                             (:labelled? @state))
+                :resource  (if (= :emoji (:type @state))
+                             (resources/get-image :music)
+                             :i/placeholder)})]])))

src/status_im2/contexts/quo_preview/tags/tags.cljs

@@ -1,23 +1,18 @@
 (ns status-im2.contexts.quo-preview.tags.tags
   (:require
-    [quo.components.tags.tags :as tags]
-    [quo.foundations.colors :as colors]
-    [react-native.core :as rn]
+    [quo.core :as quo]
     [reagent.core :as reagent]
-    [status-im.ui.components.react :as react]
     [status-im2.common.resources :as resources]
     [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Size:"
-    :key     :size
+  [{:key     :size
     :type    :select
     :options [{:key   32
                :value "32"}
               {:key   24
                :value "24"}]}
-   {:label   "Type:"
-    :key     :type
+   {:key     :type
     :type    :select
     :options [{:key   :emoji
                :value "Emoji"}
@@ -25,27 +20,22 @@
                :value "Icons"}
               {:key   :label
                :value "Label"}]}
-   {:label "Scrollable:"
-    :key   :scrollable?
-    :type  :boolean}
-   {:label   "Fade Out:"
-    :key     :fade-end-percentage
+   {:key  :scrollable?
+    :type :boolean}
+   {:key     :fade-end-percentage
     :type    :select
     :options [{:key   1
                :value "1%"}
               {:key   0.4
                :value "0.4%"}]}
-   {:label "Labelled:"
-    :key   :labelled?
-    :type  :boolean}
-   {:label "Disabled:"
-    :key   :disabled?
-    :type  :boolean}
-   {:label "Blurred background:"
-    :key   :blurred?
-    :type  :boolean}])
+   {:key  :labelled?
+    :type :boolean}
+   {:key  :disabled?
+    :type :boolean}
+   {:key  :blurred?
+    :type :boolean}])
 
-(defn preview-tags
+(defn view
   []
   (let [state (reagent/atom {:size                32
                              :labelled?           true
@@ -54,51 +44,21 @@
                              :scrollable?         false})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view
-        {:style {:padding-bottom 150
-                 :padding-top    60}}
-        [rn/view
-         {:style {:flex               1
-                  :justify-content    :center
-                  :top                60
-                  :padding-horizontal 16}}
-         (when (:blurred? @state)
-           [rn/view
-            {:align-items   :center
-             :height        100
-             :border-radius 16}
-            [react/image
-             {:source (resources/get-mock-image :community-cover)
-              :style  {:flex          1
-                       :width         "100%"
-                       :border-radius 16}}]
-            [react/blur-view
-             {:flex          1
-              :style         {:border-radius 16
-                              :height        100
-                              :position      :absolute
-                              :left          0
-                              :right         0}
-              :blur-amount   20
-              :overlay-color (colors/theme-colors
-                              colors/white-opa-70
-                              colors/neutral-80-opa-80)}]])
-         [rn/view
-          {:style {:position   :absolute
-                   :align-self :center}}
-          [tags/tags
-           (merge
-            @state
-            {:default-active 1
-             :component      :tags
-             :labelled?      (if (= :label (:type @state)) true (:labelled? @state))
-             :data           [{:id 1 :label "Music" :resource (resources/get-image :music)}
-                              {:id 2 :label "Lifestyle" :resource (resources/get-image :lifestyle)}
-                              {:id 2 :label "Podcasts" :resource (resources/get-image :podcasts)}
-                              {:id 2 :label "Music" :resource (resources/get-image :music)}
-                              {:id 3 :label "Lifestyle" :resource (resources/get-image :lifestyle)}]}
-            (when (:scrollable? @state)
-              {:scroll-on-press? true
-               :fade-end?        true}))]]]]])))
+       {:state                 state
+        :descriptor            descriptor
+        :blur?                 (:blurred? @state)
+        :show-blur-background? true}
+       [quo/tags
+        (merge
+         @state
+         {:default-active 1
+          :component      :tags
+          :labelled?      (if (= :label (:type @state)) true (:labelled? @state))
+          :data           [{:id 1 :label "Music" :resource (resources/get-image :music)}
+                           {:id 2 :label "Lifestyle" :resource (resources/get-image :lifestyle)}
+                           {:id 2 :label "Podcasts" :resource (resources/get-image :podcasts)}
+                           {:id 2 :label "Music" :resource (resources/get-image :music)}
+                           {:id 3 :label "Lifestyle" :resource (resources/get-image :lifestyle)}]}
+         (when (:scrollable? @state)
+           {:scroll-on-press? true
+            :fade-end?        true}))]])))

src/status_im2/contexts/quo_preview/tags/token_tag.cljs

@@ -1,21 +1,19 @@
 (ns status-im2.contexts.quo-preview.tags.token-tag
   (:require
-    [quo.components.tags.token-tag :as quo]
+    [quo.core :as quo]
     [quo.foundations.resources :as resources]
     [react-native.core :as rn]
     [reagent.core :as reagent]
     [status-im2.contexts.quo-preview.preview :as preview]))
 
 (def descriptor
-  [{:label   "Size:"
-    :key     :size
+  [{:key     :size
     :type    :select
-    :options [{:key   :big
-               :value "big"}
-              {:key   :small
-               :value "small"}]}
-   {:label   "Value:"
-    :key     :value
+    :options [{:key   :size-24
+               :value "Size 24"}
+              {:key   :size-32
+               :value "Size 32"}]}
+   {:key     :token-value
     :type    :select
     :options [{:key   0
                :value "0"}
@@ -27,14 +25,17 @@
                :value "1000"}
               {:key   10000
                :value "10000"}]}
-   {:label "Is Sufficient:"
-    :key   :sufficient?
-    :type  :boolean}
-   {:label "Is Purchasable:"
-    :key   :purchasable?
-    :type  :boolean}
-   {:label   "Token:"
-    :key     :token
+   {:key     :options
+    :type    :select
+    :options [{:key   false
+               :value false}
+              {:key   :add
+               :value :add}
+              {:key   :hold
+               :value :hold}]}
+   {:key  :blur?
+    :type :boolean}
+   {:key     :token-symbol
     :type    :select
     :options [{:key   "ETH"
                :value "ETH"}
@@ -44,17 +45,21 @@
 (def eth-token (resources/get-token :eth))
 (def snt-token (resources/get-token :snt))
 
-(defn preview-token-tag
+(defn view
   []
-  (let [state (reagent/atom {:size :big :value 10 :token "ETH" :sufficient? false :purchasable? false})]
+  (let [state (reagent/atom {:size         :size-24
+                             :token-value  10
+                             :token-symbol "ETH"
+                             :options      false
+                             :blur?        false})]
     (fn []
       [preview/preview-container
-       {:state      state
-        :descriptor descriptor}
-       [rn/view {:padding-bottom 150}
-        [rn/view
-         {:padding-vertical 60
-          :align-items      :center}
-         [quo/token-tag
-          (merge @state
-                 {:token-img-src (if (= (get-in @state [:token]) "ETH") eth-token snt-token)})]]]])))
+       {:state                 state
+        :blur?                 (:blur? @state)
+        :show-blur-background? true
+        :descriptor            descriptor}
+       [rn/view {:style {:align-items :center}}
+        [quo/token-tag
+         (assoc @state
+                :token-img-src
+                (if (= (get-in @state [:token-symbol]) "ETH") eth-token snt-token))]]])))

src/status_im2/contexts/wallet/common/account_subtitle/view.cljs

@@ -1,19 +0,0 @@
-(ns status-im2.contexts.wallet.common.account-subtitle.view
-  (:require [quo.core :as quo]
-            [quo.foundations.colors :as colors]))
-
-(defn view
-  [{:keys [address theme networks]}]
-  [quo/text {:size :paragraph-2}
-   (map (fn [{:keys [short-name network-name]}]
-          ^{:key (str network-name)}
-          [quo/text
-           {:size   :paragraph-2
-            :weight :medium
-            :style  {:color (colors/resolve-color network-name theme)}}
-           (str short-name ":")])
-        networks)
-   [quo/text
-    {:size   :paragraph-2
-     :weight :monospace}
-    address]])

src/status_im2/contexts/wallet/common/network_preferences/style.cljs

@@ -0,0 +1,5 @@
+(ns status-im2.contexts.wallet.common.network-preferences.style)
+
+(def data-item
+  {:margin-horizontal 20
+   :margin-vertical   8})

src/status_im2/contexts/wallet/common/network_preferences/view.cljs

@@ -0,0 +1,62 @@
+(ns status-im2.contexts.wallet.common.network-preferences.view
+  (:require [quo.core :as quo]
+            [quo.foundations.colors :as colors]
+            [quo.foundations.resources :as resources]
+            [quo.theme :as quo.theme]
+            [status-im2.contexts.wallet.common.network-preferences.style :as style]
+            [utils.i18n :as i18n]))
+
+(def mainnet
+  [{:title        "Mainnet"
+    :image        :icon-avatar
+    :image-props  {:icon (resources/get-network :ethereum)
+                   :size :size-20}
+    :action       :selector
+    :action-props {:type :checkbox}}])
+
+(def networks-list
+  [{:title        "Optimism"
+    :image        :icon-avatar
+    :image-props  {:icon (resources/get-network :optimism)
+                   :size :size-20}
+    :action       :selector
+    :action-props {:type :checkbox}}
+   {:title        "Arbitrum"
+    :image        :icon-avatar
+    :image-props  {:icon (resources/get-network :arbitrum)
+                   :size :size-20}
+    :action       :selector
+    :action-props {:type :checkbox}}])
+
+(defn- view-internal
+  [{:keys [address on-save theme]}]
+  [:<>
+   [quo/drawer-top
+    {:title       (i18n/label :t/network-preferences)
+     :description (i18n/label :t/network-preferences-desc)}]
+   [quo/data-item
+    {:status          :default
+     :size            :default
+     :description     :default
+     :label           :none
+     :blur?           false
+     :card?           true
+     :title           (i18n/label :t/address)
+     :subtitle        address
+     :container-style (merge style/data-item
+                             {:background-color (colors/theme-colors colors/neutral-2_5
+                                                                     colors/neutral-90
+                                                                     theme)})}]
+   [quo/category
+    {:list-type :settings
+     :data      mainnet}]
+   [quo/category
+    {:list-type :settings
+     :label     (i18n/label :t/layer-2)
+     :data      networks-list}]
+   [quo/bottom-actions
+    {:button-one-label (i18n/label :t/update)
+     :disabled?        true
+     :button-one-press on-save}]])
+
+(def view (quo.theme/with-theme view-internal))

src/status_im2/contexts/wallet/common/temp.cljs

@@ -7,7 +7,6 @@
     [status-im2.common.resources :as status.resources]
     [status-im2.constants :as constants]
     [status-im2.contexts.wallet.common.utils :as utils]
-    [status-im2.contexts.wallet.save-address.view :as save-address]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
@@ -27,14 +26,8 @@
     "Navigate to Account"]
    [quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-create-account])}
     "Create Account"]
-   [quo/button
-    {:on-press #(rf/dispatch [:open-modal :wallet-save-address
-                              {:sheet?              true
-                               :theme               :light
-                               :gradient-cover?     true
-                               :customization-color :blue
-                               :content             save-address/view}])}
-    "Save Address Bottom Sheet"]])
+   [quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-saved-addresses])}
+    "Saved Addresses"]])
 
 (def wallet-overview-state
   {:state             :default
@@ -89,28 +82,29 @@
     :id    6}])
 
 (def collectible-details
-  {:name             "#5946"
-   :description      "Bored Ape Yacht Club"
-   :image            (status.resources/get-mock-image :collectible-monkey)
-   :collection-image (status.resources/get-mock-image :bored-ape)
-   :traits           [{:title    "Background"
-                       :subtitle "Blue"
-                       :id       1}
-                      {:title    "Clothes"
-                       :subtitle "Bayc T Black"
-                       :id       2}
-                      {:title    "Eyes"
-                       :subtitle "Sleepy"
-                       :id       3}
-                      {:title    "Fur"
-                       :subtitle "Black"
-                       :id       4}
-                      {:title    "Hat"
-                       :subtitle "Beanie"
-                       :id       5}
-                      {:title    "Mouth"
-                       :subtitle "Bored Pipe"
-                       :id       6}]})
+  nil
+  #_{:name             "#5946"
+     :description      "Bored Ape Yacht Club"
+     :image            (status.resources/get-mock-image :collectible-monkey)
+     :collection-image (status.resources/get-mock-image :bored-ape)
+     :traits           [{:title    "Background"
+                         :subtitle "Blue"
+                         :id       1}
+                        {:title    "Clothes"
+                         :subtitle "Bayc T Black"
+                         :id       2}
+                        {:title    "Eyes"
+                         :subtitle "Sleepy"
+                         :id       3}
+                        {:title    "Fur"
+                         :subtitle "Black"
+                         :id       4}
+                        {:title    "Hat"
+                         :subtitle "Beanie"
+                         :id       5}
+                        {:title    "Mouth"
+                         :subtitle "Bored Pipe"
+                         :id       6}]})
 
 (def account-overview-state
   {:current-value       "€0.00"

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

@@ -2,10 +2,12 @@
   (:require [quo.core :as quo]
             [quo.theme :as quo.theme]
             [reagent.core :as reagent]
+            [status-im2.contexts.wallet.common.network-preferences.view :as network-preferences]
             [status-im2.contexts.wallet.common.screen-base.create-or-edit-account.view :as
              create-or-edit-account]
             [status-im2.contexts.wallet.edit-account.style :as style]
-            [utils.i18n :as i18n]))
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
 
 (defn- view-internal
   []
@@ -38,7 +40,12 @@
          :card?           true
          :title           (i18n/label :t/address)
          :subtitle        account-address
-         :on-press        #(js/alert "Network selector: to be implemented")
+         :on-press        (fn []
+                            (rf/dispatch [:show-bottom-sheet
+                                          {:content (fn [] [network-preferences/view
+                                                            {:address account-address
+                                                             :on-save #(js/alert
+                                                                        "calling on save")}])}]))
          :container-style style/data-item}]])))
 
 (def view (quo.theme/with-theme view-internal))

src/status_im2/contexts/wallet/save_address/style.cljs

@@ -1,13 +0,0 @@
-(ns status-im2.contexts.wallet.save-address.style
-  (:require
-    [quo.foundations.colors :as colors]))
-
-(def color-picker-container
-  {:padding-vertical 12})
-
-(defn color-label
-  [theme]
-  {:color              (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
-   :padding-bottom     4
-   :padding-horizontal 20})
-

src/status_im2/contexts/wallet/save_address/view.cljs

@@ -1,87 +0,0 @@
-(ns status-im2.contexts.wallet.save-address.view
-  (:require
-    [quo.core :as quo]
-    [quo.theme :as quo.theme]
-    [re-frame.core :as rf]
-    [react-native.core :as rn]
-    [reagent.core :as reagent]
-    [status-im2.common.floating-button-page.view :as floating-button-page]
-    [status-im2.contexts.wallet.common.account-subtitle.view :as subtitle]
-    [status-im2.contexts.wallet.save-address.style :as style]
-    [utils.i18n :as i18n]))
-
-(defn- f-view
-  [_]
-  (let [account-color (reagent/atom :blue)
-        address-name  (reagent/atom "")
-        address       (reagent/atom "0x39cf6E0Ba4C4530735616e1Ee7ff5FbCB726fBd2")]
-    (fn [{:keys [theme]}]
-      [floating-button-page/view
-       [quo/page-nav
-        {:type       :no-title
-         :text-align :left
-         :right-side []
-         :background :blur
-         :icon-name  :i/close
-         :on-press   #(rf/dispatch [:dismiss-modal :wallet-save-address])}]
-
-       [rn/view {:style {:flex 1}}
-        [quo/wallet-user-avatar
-         {:container-style     {:margin-bottom     12
-                                :margin-horizontal 20}
-          :f-name              @address-name
-          :l-name              @address-name
-          :customization-color @account-color}]
-        [quo/title-input
-         {:blur?           true
-          :on-change-text  #(reset! address-name %)
-          :auto-focus      true
-          :placeholder     "Address Name"
-          :max-length      24
-          :container-style {:margin-bottom     16
-                            :margin-horizontal 20}}]
-        [quo/divider-line]
-        [rn/view
-         {:style style/color-picker-container}
-         [quo/text
-          {:size   :paragraph-2
-           :weight :medium
-           :style  (style/color-label theme)}
-          (i18n/label :t/colour)]
-         [quo/color-picker
-          {:default-selected @account-color
-           :on-change        #(reset! account-color %)
-           :container-style  {:padding-horizontal 12
-                              :padding-vertical   12}}]]
-        [quo/divider-line]
-        [quo/data-item
-         {:container-style     {:margin-top        20
-                                :margin-horizontal 20}
-          :description         :default
-          :on-press            #(js/alert "to be implemented")
-          :icon-right?         true
-          :right-icon          :i/advanced
-          :card?               true
-          :label               :none
-          :status              :default
-          :size                :default
-          :title               "Address"
-          :customization-color @account-color
-          :custom-subtitle     (fn [] [subtitle/view
-                                       {:networks [{:short-name   "eth"
-                                                    :network-name :ethereum}
-                                                   {:short-name   "arb1"
-                                                    :network-name :arbitrum}
-                                                   {:short-name   "opt"
-                                                    :network-name :optimism}]
-                                        :address  @address}])}]]
-
-       [quo/button
-        {:container-style     {:z-index 2}
-         :customization-color @account-color
-         :on-press            #(js/alert "to be implemented")}
-        "Save address"]])))
-
-(defn view-internal [props] [:f> f-view props])
-
-(def view (quo.theme/with-theme view-internal))

src/status_im2/contexts/wallet/saved_address/view.cljs

@@ -0,0 +1,16 @@
+(ns status-im2.contexts.wallet.saved-address.view
+  (:require
+    [quo.core :as quo]
+    [re-frame.core :as rf]
+    [react-native.core :as rn]))
+
+(defn view
+  []
+  [rn/view
+   {:style {:flex            1
+            :align-items     :center
+            :justify-content :center}}
+
+   [quo/text {} "SAVED ADDRESS"]
+   [quo/button {:on-press #(rf/dispatch [:navigate-back])}
+    "NAVIGATE BACK"]])

src/status_im2/contexts/wallet/saved_addresses/view.cljs

@@ -14,5 +14,6 @@
    [quo/text {} "SAVED ADDRESSES"]
    [quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-saved-address])}
     "NAVIGATE TO SAVED ADDRESS"]
+   [quo/divider-label]
    [quo/button {:on-press #(rf/dispatch [:navigate-back])}
     "NAVIGATE BACK"]])

src/status_im2/navigation/screens.cljs

@@ -41,7 +41,7 @@
     [status-im2.contexts.wallet.collectible.view :as wallet-collectible]
     [status-im2.contexts.wallet.create-account.view :as wallet-create-account]
     [status-im2.contexts.wallet.edit-account.view :as wallet-edit-account]
-    [status-im2.contexts.wallet.save-address.view :as wallet-save-address]
+    [status-im2.contexts.wallet.saved-address.view :as wallet-saved-address]
     [status-im2.contexts.wallet.saved-addresses.view :as wallet-saved-addresses]
     [status-im2.contexts.wallet.scan-account.view :as scan-address]
     [status-im2.contexts.wallet.send.select-address.view :as wallet-select-address]
@@ -256,8 +256,8 @@
     {:name      :wallet-create-account
      :component wallet-create-account/view}
 
-    {:name      :wallet-save-address
-     :component wallet-save-address/view}
+    {:name      :wallet-saved-address
+     :component wallet-saved-address/view}
 
     {:name      :wallet-saved-addresses
      :component wallet-saved-addresses/view}

src/test_helpers/component.cljs

@@ -201,6 +201,10 @@
   [element]
   (.toBeNull (js/expect element)))
 
+(defn is-disabled
+  [element]
+  (.toBeDisabled (js/expect element)))
+
 (defn is-equal
   [element-1 element-2]
   (.toBe (js/expect element-1) element-2))

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.171.1",
-    "commit-sha1": "3326362b90ba3b853118ac0aa3be8502fc1aed4f",
-    "src-sha256": "1npjwhvckmldjy1p7mc6rml8i21mb23409mgl13dzysmlqkppqb1"
+    "version": "feature/contact-code-when-community",
+    "commit-sha1": "c7dec38de6a708b358441f1e6634c7447c3f43b1",
+    "src-sha256": "0hykpgh9r1ffkplxn0fnnv4n5nk4z4gb3j6ifbyf2pmhi0mh33qg"
 }

translations/en.json

@@ -2356,5 +2356,8 @@
     "moonpay-description": "The new standard for fiat to crypto, supports Apple Pay.",
     "latamex-description": "Easily buy crypto in Argentina, Mexico and Brazil.",
     "account-info": "Account info",
-    "account-name-input-placeholder": "Account name"
+    "account-name-input-placeholder": "Account name",
+    "network-preferences": "Network preferences",
+    "network-preferences-desc": "Select which network this address is happy to receive funds on",
+    "layer-2": "Layer 2"
 }