WIP: attempt trying to scape from the keyboard-avoiding-view container

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/quo2/core_spec.cljs" or "src/status_im2/core_spec.cljs. These locations may update overtime but it is dependent on the entrypoint in shadow-cljs config discussed below.
+New test files will need their namespace added to either the file "src/quo/core_spec.cljs" or "src/status_im2/core_spec.cljs. These locations may update overtime but it is dependent on the entrypoint in shadow-cljs config discussed below.
 
 
 ### Best practices

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

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?]
+  [{:keys [f-name l-name customization-color size theme monospace? uppercase? container-style]
     :or   {f-name     "John"
            l-name     "Doe"
            size       :x-large
@@ -50,13 +50,14 @@
                          (colors/resolve-color customization-color theme)
                          (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme))]
     [rn/view
-     {:style {:width            circle-size
-              :height           circle-size
-              :border-radius    circle-size
-              :text-align       :center
-              :justify-content  :center
-              :align-items      :center
-              :background-color circle-color}}
+     {: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)}
      [text/text
       {:size   (size font-sizes)
        :weight (if monospace? :monospace (size font-weights))

src/status_im2/common/floating_button_page/constants.cljs

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

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

@@ -0,0 +1,26 @@
+(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

@@ -0,0 +1,47 @@
+(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

@@ -0,0 +1,16 @@
+(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

@@ -0,0 +1,44 @@
+(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

@@ -0,0 +1,161 @@
+(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

@@ -0,0 +1,110 @@
+(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]
-           [quo/text
-            {:size   :paragraph-2
-             :weight :medium
-             :style  style/color-title}
-            (i18n/label :t/accent-colour)]
+           [rn/view {:style {:margin-top 80}}
+            [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/main.cljs

@@ -119,6 +119,7 @@
      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]
@@ -174,7 +175,9 @@
     [utils.re-frame :as rf]))
 
 (def screens-categories
-  {:foundations       [{:name      :shadows
+  {:other-components  [{:name      :other-components
+                        :component other-components/view}]
+   :foundations       [{:name      :shadows
                         :component shadows/view}]
    :animated-list     [{:name      :animated-header-list
                         :component animated-header-list/mock-screen}]

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

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

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

@@ -0,0 +1,116 @@
+(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,6 +58,7 @@
     :type :text}
    (preview/customization-color-option)])
 
+
 (defn view
   []
   (let [media-server-port (rf/sub [:mediaserver/port])

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

@@ -0,0 +1,19 @@
+(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/temp.cljs

@@ -7,6 +7,7 @@
     [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]))
 
@@ -26,8 +27,14 @@
     "Navigate to Account"]
    [quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-create-account])}
     "Create Account"]
-   [quo/button {:on-press #(rf/dispatch [:navigate-to :wallet-saved-addresses])}
-    "Saved Addresses"]])
+   [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"]])
 
 (def wallet-overview-state
   {:state             :default
@@ -82,29 +89,28 @@
     :id    6}])
 
 (def collectible-details
-  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}]})
+  {: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/save_address/style.cljs

@@ -0,0 +1,13 @@
+(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

@@ -0,0 +1,87 @@
+(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

@@ -1,16 +0,0 @@
-(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,6 +14,5 @@
    [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.saved-address.view :as wallet-saved-address]
+    [status-im2.contexts.wallet.save-address.view :as wallet-save-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-saved-address
-     :component wallet-saved-address/view}
+    {:name      :wallet-save-address
+     :component wallet-save-address/view}
 
     {:name      :wallet-saved-addresses
      :component wallet-saved-addresses/view}