modal comp

* Dont check app-state for android before routing PN

On Android devices, right after account creation and before a log out, the :app-state value in reframe db is set to background. The value becomes active after a log out and then log in which causes tapping on push notifications to do nothing.

This behaviour breaks E2E and hence in this PR, I remove the checking of this case only for Android platforms.
More work should be done to figure out why the app state event handler is behaving this way on Android but for now I would like to unblock E2E.

* e2e: remove xfailed tests

---------

Co-authored-by: Churikova Tetiana <tatiana@status.im>

ci/Jenkinsfile.android

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.7.3'
+library 'status-jenkins-lib@v1.7.5'
 
 /* Options section can't access functions in objects. */
 def isPRBuild = utils.isPRBuild()

ci/Jenkinsfile.combined

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.7.3'
+library 'status-jenkins-lib@v1.7.5'
 
 pipeline {
   agent { label 'linux' }

ci/Jenkinsfile.ios

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.7.3'
+library 'status-jenkins-lib@v1.7.5'
 
 /* Options section can't access functions in objects. */
 def isPRBuild = utils.isPRBuild()

ci/Jenkinsfile.nix-cache

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.7.3'
+library 'status-jenkins-lib@v1.7.5'
 
 pipeline {
   agent { label params.AGENT_LABEL }

ci/Jenkinsfile.tests

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.7.3'
+library 'status-jenkins-lib@v1.7.5'
 
 /* Options section can't access functions in objects. */
 def isPRBuild = utils.isPRBuild()

ci/tests/Jenkinsfile.e2e-nightly

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.7.3'
+library 'status-jenkins-lib@v1.7.5'
 
 pipeline {
 

ci/tests/Jenkinsfile.e2e-prs

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.7.3'
+library 'status-jenkins-lib@v1.7.5'
 
 pipeline {
 

ci/tests/Jenkinsfile.e2e-upgrade

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.7.3'
+library 'status-jenkins-lib@v1.7.5'
 
 pipeline {
 

ci/tools/Jenkinsfile.fastlane-clean

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.7.3'
+library 'status-jenkins-lib@v1.7.5'
 
 pipeline {
   agent { label 'macos' }

ci/tools/Jenkinsfile.playstore-meta

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.7.3'
+library 'status-jenkins-lib@v1.7.5'
 
 pipeline {
   agent { label 'linux' }

ci/tools/Jenkinsfile.xcode-clean

@@ -1,4 +1,4 @@
-library 'status-jenkins-lib@v1.7.3'
+library 'status-jenkins-lib@v1.7.5'
 
 pipeline {
   agent {

src/quo2/components/inputs/input/style.cljs

@@ -8,7 +8,7 @@
     {:label         (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme)
      :icon          (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 override-theme)
      :button-border (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 override-theme)
-     :password-icon (colors/theme-colors colors/neutral-100 colors/white override-theme)
+     :password-icon (colors/theme-colors colors/neutral-100 colors/white-opa-70 override-theme)
      :clear-icon    (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 override-theme)
      :cursor        (colors/theme-colors (colors/custom-color :blue 50)
                                          colors/white

src/quo2/components/keycard/component_spec.cljs

@@ -0,0 +1,20 @@
+(ns quo2.components.keycard.component-spec
+  (:require [quo2.components.keycard.view :as keycard]
+            [test-helpers.component :as h]
+            [utils.i18n :as i18n]))
+
+(h/describe "keycard component"
+  (h/test "Render of keycard component when: Status = Empty, Locked = False"
+    (h/render [keycard/keycard])
+    (-> (h/expect (h/query-by-label-text :holder-name))
+        (h/is-equal (i18n/label :t/empty-keycard))))
+
+  (h/test "Render of keycard component when: Status = Filled, Locked = False"
+    (h/render [keycard/keycard {:holder-name? "Alisha"}])
+    (-> (h/expect (h/query-by-label-text :holder-name))
+        (h/is-equal (i18n/label :t/user-keycard {:name :holder-name}))))
+
+  (h/test "Render of keycard component when: Status = Filled, Locked = True"
+    (h/render [keycard/keycard {:holder-name? "Alisha"}])
+    (-> (h/expect (h/query-by-label-text :holder-name))
+        (h/is-equal (i18n/label :t/user-keycard {:name :holder-name})))))

src/quo2/components/keycard/style.cljs

@@ -0,0 +1,42 @@
+(ns quo2.components.keycard.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def keycard-height 210)
+(def keycard-chip-height 28)
+
+(defn card-container
+  [locked?]
+  {:overflow         :hidden
+   :height           keycard-height
+   :align-items      :flex-start
+   :justify-content  :space-between
+   :border-width     1
+   :border-color     (if locked?
+                       colors/white-opa-5
+                       (colors/theme-colors colors/neutral-20 colors/neutral-80))
+   :border-style     :solid
+   :border-radius    16
+   :padding          16
+   :background-color (if locked?
+                       (colors/theme-colors colors/danger colors/danger-opa-40)
+                       (colors/theme-colors colors/neutral-5 colors/neutral-90))})
+
+(defn keycard-logo
+  [locked?]
+  {:tint-color (if locked? colors/white (colors/theme-colors colors/neutral-100 colors/white))})
+
+(defn keycard-watermark
+  [locked?]
+  {:position   :absolute
+   :tint-color (if locked? colors/white-opa-5 (colors/theme-colors colors/neutral-100 colors/white))
+   :align-self :center
+   :height     280.48
+   :transform  [{:rotate "-30deg"} {:translateY -30}]
+   :opacity    (when-not locked? 0.02)
+   :z-index    1})
+
+(def keycard-chip
+  {:height   keycard-chip-height
+   :position :absolute
+   :right    16
+   :top      (/ (- keycard-height 28) 2)})

src/quo2/components/keycard/view.cljs

@@ -0,0 +1,38 @@
+(ns quo2.components.keycard.view
+  (:require [react-native.core :as rn]
+            [quo2.components.keycard.style :as style]
+            [quo2.components.tags.tag :as tag]
+            [quo2.foundations.colors :as colors]
+            [quo2.foundations.resources :as resources]
+            [utils.i18n :as i18n]))
+
+(defn keycard
+  "This component based on the following properties:
+  - :holder-name - Can be owner's name. Default is Empty
+  - :locked? - Boolean to specify whether the keycard is locked or not
+  "
+  [{:keys [holder-name locked?]}]
+  (let [label (if (boolean holder-name)
+                (i18n/label :t/user-keycard {:name holder-name})
+                (i18n/label :t/empty-keycard))]
+    [rn/view {:style (style/card-container locked?)}
+     [rn/image
+      {:source (resources/get-image :keycard-logo)
+       :style  (style/keycard-logo locked?)}]
+     [rn/image
+      {:source (resources/get-image
+                (if (or locked? (colors/dark?)) :keycard-chip-dark :keycard-chip-light))
+       :style  style/keycard-chip}]
+     [rn/image
+      {:source (resources/get-image :keycard-watermark)
+       :style  (style/keycard-watermark locked?)}]
+     [tag/tag
+      {:size                32
+       :type                (when locked? :icon)
+       :label               label
+       :labelled?           true
+       :blurred?            true
+       :resource            (when locked? :i/locked)
+       :accessibility-label :holder-name
+       :icon-color          colors/white-70-blur
+       :override-theme      (when locked? :dark)}]]))

src/quo2/components/share/qr_code/view.cljs

@@ -1,11 +1,12 @@
 (ns quo2.components.share.qr-code.view
   (:require [quo2.components.share.qr-code.style :as style]
-            [react-native.core :as rn]))
+            [react-native.core :as rn]
+            [react-native.fast-image :as fast-image]))
 
 (defn qr-code
   [{:keys [source width height]}]
   [rn/view
    {:style style/container}
-   [rn/image
+   [fast-image/fast-image
     {:source source
      :style  (style/image width height)}]])

src/quo2/core.cljs

@@ -38,6 +38,7 @@
     quo2.components.inputs.recovery-phrase.view
     quo2.components.inputs.search-input.view
     quo2.components.inputs.title-input.view
+    quo2.components.keycard.view
     quo2.components.links.url-preview-list.view
     quo2.components.links.url-preview.view
     quo2.components.links.link-preview.view
@@ -126,6 +127,7 @@
 
 ;;;; CARDS
 (def small-option-card quo2.components.onboarding.small-option-card.view/small-option-card)
+(def keycard quo2.components.keycard.view/keycard)
 
 ;;;; COLORS
 (def color-picker quo2.components.colors.color-picker.view/view)

src/quo2/foundations/resources.cljs

@@ -0,0 +1,11 @@
+(ns quo2.foundations.resources)
+
+(def ui
+  {:keycard-logo       (js/require "../resources/images/ui2/keycard-logo.png")
+   :keycard-chip-light (js/require "../resources/images/ui2/keycard-chip-light.png")
+   :keycard-chip-dark  (js/require "../resources/images/ui2/keycard-chip-dark.png")
+   :keycard-watermark  (js/require "../resources/images/ui2/keycard-watermark.png")})
+
+(defn get-image
+  [k]
+  (get ui k))

src/status_im/utils/universal_links/core.cljs

@@ -13,7 +13,8 @@
             [status-im.wallet.choose-recipient.core :as choose-recipient]
             [status-im2.navigation.events :as navigation]
             [taoensso.timbre :as log]
-            [native-module.core :as native-module]))
+            [native-module.core :as native-module]
+            [react-native.platform :as platform]))
 
 ;; TODO(yenda) investigate why `handle-universal-link` event is
 ;; dispatched 7 times for the same link
@@ -175,10 +176,15 @@
 
 (rf/defn handle-url
   "Store url in the database if the user is not logged in, to be processed
-  on login, otherwise just handle it"
+  on login, otherwise just handle it. On Android platform the app-state value
+  in db is `background` immediately after account creation, hence we avoid the
+  app-state check for android platforms to fix this e2e blocker :
+  https://github.com/status-im/status-mobile/issues/15859
+  "
   {:events [:universal-links/handle-url]}
   [{:keys [db] :as cofx} url]
-  (if (and (multiaccounts.model/logged-in? db) (= (:app-state db) "active"))
+  (if (and (multiaccounts.model/logged-in? db)
+           (or platform/android? (= (:app-state db) "active")))
     (route-url cofx url)
     (store-url-for-later cofx url)))
 

src/status_im2/common/home/view.cljs

@@ -3,9 +3,13 @@
     [quo2.core :as quo]
     [quo2.foundations.colors :as colors]
     [react-native.core :as rn]
+    [react-native.navigation :as navigation]
+    [reagent.core :as reagent]
     [status-im2.common.home.style :as style]
     [status-im2.common.plus-button.view :as plus-button]
     [status-im2.constants :as constants]
+    [status-im2.contexts.activity-center.view :as ac]
+    [status-im2.contexts.shell.animation :as shell]
     [utils.re-frame :as rf]))
 
 (defn title-column
@@ -66,11 +70,43 @@
      [quo/text {:accessibility-label :peers-network-type-text} (str "NETWORK TYPE: " network-type)]
      [quo/text {:accessibility-label :peers-count-text} (str "PEERS COUNT: " peers-count)]]))
 
+(defn ac-modal
+  [visible? view-id]
+  (let [status-bar-style (if (or (colors/dark?)
+                                 (not (shell/home-stack-open?)))
+                           :light
+                           :dark)
+        close-modal      (fn []
+                           (reset! visible? false)
+                           (navigation/merge-options (clj->js view-id)
+                                                     (clj->js {:statusBar {:style status-bar-style}})))]
+    [rn/modal
+     {:visible             @visible?
+      :cover-screen           true
+      :transparent            true
+      :status-bar-translucent true
+      :hardware-accelerated   true
+      :animation-type         :slide
+      :style                  {:margin 0
+                               :width  "100%"}
+      :on-back-button-press   close-modal}
+     [ac/view close-modal]]))
+
 (defn- right-section
   [{:keys [button-type search?]}]
   (let [button-common-props (get-button-common-props button-type)
-        network-type        (rf/sub [:network/type])]
+        network-type        (rf/sub [:network/type])
+        visible?               (reagent/atom false)
+        view-id                (rf/sub [:view-id])
+        open-ac                (fn []
+                                 ;; delaying status-bar style update looks nicer
+                                 (js/setTimeout
+                                   #(navigation/merge-options (clj->js view-id)
+                                                              (clj->js {:statusBar {:style :light}}))
+                                   20)
+                                 (reset! visible? (not @visible?)))]
     [rn/view {:style style/right-section}
+     [ac-modal visible? view-id]
      (when (= network-type "cellular")
        [quo/button
         (merge button-common-props
@@ -95,14 +131,18 @@
       (assoc button-common-props :accessibility-label :open-scanner-button)
       :i/scan]
      [quo/button
-      (assoc button-common-props :accessibility-label :show-qr-button)
+      (merge button-common-props
+             {:accessibility-label :show-qr-button
+              :on-press            #(rf/dispatch [:open-modal :share-shell])})
       :i/qr-code]
      [rn/view
       [unread-indicator]
       [quo/button
        (merge button-common-props
               {:accessibility-label :open-activity-center-button
-               :on-press            #(rf/dispatch [:activity-center/open])})
+               ;:on-press            #(rf/dispatch [:activity-center/open])
+               :on-press            open-ac
+               })
        :i/activity-center]]]))
 
 (defn top-nav

src/status_im2/common/resources.cljs

@@ -15,7 +15,10 @@
    :use-keycard                   (js/require "../resources/images/ui2/keycard.png")
    :onboarding-illustration       (js/require "../resources/images/ui2/onboarding_illustration.png")
    :qr-code                       (js/require "../resources/images/ui2/qr-code.png")
-  })
+   :keycard-logo                  (js/require "../resources/images/ui2/keycard-logo.png")
+   :keycard-chip-light            (js/require "../resources/images/ui2/keycard-chip-light.png")
+   :keycard-chip-dark             (js/require "../resources/images/ui2/keycard-chip-dark.png")
+   :keycard-watermark             (js/require "../resources/images/ui2/keycard-watermark.png")})
 
 (def mock-images
   {:coinbase             (js/require "../resources/images/mock2/coinbase.png")

src/status_im2/contexts/activity_center/view.cljs

@@ -140,7 +140,7 @@
                                                     (contains? types-with-unread types/system))}]}]))
 
 (defn header
-  []
+  [close]
   [rn/view
    [rn/view {:style style/header-container}
     [quo/button
@@ -149,7 +149,8 @@
       :size                32
       :accessibility-label :close-activity-center
       :override-theme      :dark
-      :on-press            #(rf/dispatch [:navigate-back])}
+      :on-press            (fn []
+                             (if close (close) (rf/dispatch [:navigate-back])))}
      :i/close]
     [quo/button
      {:icon                true
@@ -213,14 +214,14 @@
            nil)]))))
 
 (defn view
-  []
+  [close]
   (let [active-swipeable (atom nil)]
     (rf/dispatch [:activity-center.notifications/fetch-first-page])
     (fn []
       (let [notifications (rf/sub [:activity-center/notifications])]
         [rn/view {:flex 1 :padding-top (navigation/status-bar-height)}
          [blur/view style/blur]
-         [header]
+         [header close]
          [rn/flat-list
           {:data                      notifications
            :render-data               active-swipeable

src/status_im2/contexts/chat/composer/actions/style.cljs

@@ -31,4 +31,4 @@
    :left             -20
    :right            -20
    :bottom           0
-   :height           (- constants/composer-default-height constants/bottom-padding)})
+   :height           constants/composer-default-height})

src/status_im2/contexts/chat/composer/actions/view.cljs

@@ -64,7 +64,7 @@
     [:f> f-send-button state animations window-height images? btn-opacity z-index]))
 
 (defn audio-button
-  [{:keys [record-reset-fn]}
+  [{:keys [record-reset-fn input-ref]}
    {:keys [record-permission? recording? gesture-enabled? focused?]}
    {:keys [container-opacity]}]
   (let [audio (rf/sub [:chats/sending-audio])]
@@ -86,17 +86,22 @@
                                              (reset! recording? false)
                                              (reset! gesture-enabled? true)
                                              (rf/dispatch [:chat/send-audio file-path duration])
-                                             (when-not @focused?
+                                             (if-not @focused?
                                                (reanimated/animate container-opacity
-                                                                   constants/empty-opacity))
+                                                                   constants/empty-opacity)
+                                               (js/setTimeout #(when @input-ref (.focus ^js @input-ref))
+                                                              300))
                                              (rf/dispatch [:chat.ui/set-input-audio nil]))
        :on-cancel                          (fn []
                                              (when @recording?
                                                (reset! recording? false)
                                                (reset! gesture-enabled? true)
-                                               (when-not @focused?
+                                               (if-not @focused?
                                                  (reanimated/animate container-opacity
-                                                                     constants/empty-opacity))
+                                                                     constants/empty-opacity)
+                                                 (js/setTimeout #(when @input-ref
+                                                                   (.focus ^js @input-ref))
+                                                                300))
                                                (rf/dispatch [:chat.ui/set-input-audio nil])))
        :on-check-audio-permissions         (fn []
                                              (permissions/permission-granted?

src/status_im2/contexts/chat/composer/constants.cljs

@@ -9,9 +9,7 @@
 
 (def ^:const actions-container-height 56)
 
-(def ^:const bottom-padding (if platform/android? 15 0))
-
-(def ^:const composer-default-height (+ bar-container-height input-height actions-container-height bottom-padding))
+(def ^:const composer-default-height (+ bar-container-height input-height actions-container-height))
 
 (def ^:const line-height (:line-height typography/paragraph-1))
 

src/status_im2/contexts/chat/composer/handlers.cljs

@@ -36,29 +36,30 @@
 
 (defn blur
   [{:keys [text-value focused? lock-selection? cursor-position saved-cursor-position gradient-z-index
-           maximized?]}
+           maximized? recording?]}
    {:keys [height saved-height last-height gradient-opacity container-opacity opacity background-y]}
    {:keys [content-height max-height window-height]}
    {:keys [images reply]}]
-  (let [lines         (utils/calc-lines (- @content-height constants/extra-content-offset))
-        min-height    (utils/get-min-height lines)
-        reopen-height (utils/calc-reopen-height text-value min-height content-height saved-height)]
-    (reset! focused? false)
-    (rf/dispatch [:chat.ui/set-input-focused false])
-    (reanimated/set-shared-value last-height reopen-height)
-    (reanimated/animate height min-height)
-    (reanimated/set-shared-value saved-height min-height)
-    (reanimated/animate opacity 0)
-    (js/setTimeout #(reanimated/set-shared-value background-y (- window-height)) 300)
-    (when (utils/empty-input? @text-value images reply nil)
-      (reanimated/animate container-opacity constants/empty-opacity))
-    (reanimated/animate gradient-opacity 0)
-    (reset! lock-selection? true)
-    (reset! saved-cursor-position @cursor-position)
-    (reset! gradient-z-index (if (= (reanimated/get-shared-value gradient-opacity) 1) -1 0))
-    (when (not= reopen-height max-height)
-      (reset! maximized? false)
-      (rf/dispatch [:chat.ui/set-input-maximized false]))))
+  (when-not @recording?
+    (let [lines         (utils/calc-lines (- @content-height constants/extra-content-offset))
+          min-height    (utils/get-min-height lines)
+          reopen-height (utils/calc-reopen-height text-value min-height content-height saved-height)]
+      (reset! focused? false)
+      (rf/dispatch [:chat.ui/set-input-focused false])
+      (reanimated/set-shared-value last-height reopen-height)
+      (reanimated/animate height min-height)
+      (reanimated/set-shared-value saved-height min-height)
+      (reanimated/animate opacity 0)
+      (js/setTimeout #(reanimated/set-shared-value background-y (- window-height)) 300)
+      (when (utils/empty-input? @text-value images reply nil)
+        (reanimated/animate container-opacity constants/empty-opacity))
+      (reanimated/animate gradient-opacity 0)
+      (reset! lock-selection? true)
+      (reset! saved-cursor-position @cursor-position)
+      (reset! gradient-z-index (if (= (reanimated/get-shared-value gradient-opacity) 1) -1 0))
+      (when (not= reopen-height max-height)
+        (reset! maximized? false)
+        (rf/dispatch [:chat.ui/set-input-maximized false])))))
 
 (defn content-size-change
   [event

src/status_im2/contexts/chat/composer/utils.cljs

@@ -118,7 +118,6 @@
         neg-y   (if @maximized? -50 0)]
     (- (+ constants/bar-container-height
           constants/actions-container-height
-          constants/bottom-padding
           (:bottom insets)
           padding
           extra-height

src/status_im2/contexts/chat/composer/view.cljs

@@ -4,7 +4,6 @@
     [react-native.core :as rn]
     [react-native.gesture :as gesture]
     [react-native.hooks :as hooks]
-    [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
     [reagent.core :as reagent]
     [utils.i18n :as i18n]
@@ -106,11 +105,7 @@
            :accessibility-label      :chat-message-input}]]
         [gradients/view props state animations show-bottom-gradient?]]
        [images/images-list]
-       [actions/view props state animations window-height insets subs]
-       (when (and platform/android? (not @(:focused? state)))
-         [rn/view {:style {:height constants/bottom-padding
-                           :background-color :transparent}}])
-       ]]]))
+       [actions/view props state animations window-height insets subs]]]]))
 
 (defn composer
   [insets]

src/status_im2/contexts/chat/messages/content/album/view.cljs

@@ -34,7 +34,9 @@
       [:<>
        [rn/view {:style {:margin-bottom 10}} [text/text-content first-image context]]
        [rn/view
-        {:style (style/album-container portrait?)}
+        {:style               (style/album-container portrait?)
+         :accessible          true
+         :accessibility-label :image-container}
         (map-indexed
          (fn [index item]
            (let [images-size-key (if (< images-count constants/max-album-photos)

src/status_im2/contexts/chat/messages/content/image/view.cljs

@@ -18,18 +18,19 @@
   (let [insets            (safe-area/get-insets)
         dimensions        (calculate-dimensions (or image-width 1000) (or image-height 1000))
         shared-element-id (rf/sub [:shared-element-id])]
-    [rn/touchable-opacity
-     {:active-opacity 1
-      :style          {:margin-top (when (pos? index) 10)}
-      :on-long-press  on-long-press
-      :on-press       #(rf/dispatch [:chat.ui/navigate-to-lightbox
-                                     message-id
-                                     {:messages [message]
-                                      :index    0
-                                      :insets   insets}])}
+    [:<>
      (when (= index 0)
        [rn/view {:style {:margin-bottom 10}} [text/text-content message context]])
-     [fast-image/fast-image
-      {:source    {:uri (:image content)}
-       :style     (merge dimensions {:border-radius 12})
-       :native-ID (when (= shared-element-id message-id) :shared-element)}]]))
+     [rn/touchable-opacity
+      {:active-opacity 1
+       :style          {:margin-top (when (pos? index) 10)}
+       :on-long-press  on-long-press
+       :on-press       #(rf/dispatch [:chat.ui/navigate-to-lightbox
+                                      message-id
+                                      {:messages [message]
+                                       :index    0
+                                       :insets   insets}])}
+      [fast-image/fast-image
+       {:source    {:uri (:image content)}
+        :style     (merge dimensions {:border-radius 12})
+        :native-ID (when (= shared-element-id message-id) :shared-element)}]]]))

src/status_im2/contexts/onboarding/create_password/style.cljs

@@ -1,19 +1,7 @@
 (ns status-im2.contexts.onboarding.create-password.style
   (:require [quo2.foundations.colors :as colors]))
 
-(def image-background
-  {:height "100%"
-   :width  "100%"})
-
-(def overlay
-  {:position         :absolute
-   :top              0
-   :bottom           0
-   :left             0
-   :right            0
-   :background-color colors/neutral-80-opa-80-blur})
-
-(def content-style {:flex-grow 1})
+(def flex-fill {:flex 1})
 
 (def heading {:margin-bottom 20})
 (def heading-subtitle {:color colors/white})

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

@@ -1,5 +1,6 @@
 (ns status-im2.contexts.onboarding.create-password.view
   (:require
+    [oops.core :refer [ocall]]
     [quo2.core :as quo]
     [quo2.foundations.colors :as colors]
     [react-native.core :as rn]
@@ -66,7 +67,8 @@
                         :shown  true}
        :placeholder    (i18n/label :t/password-creation-placeholder-1)
        :on-change-text on-change-password
-       :on-focus       on-input-focus}]
+       :on-focus       on-input-focus
+       :auto-focus     true}]
      [rn/view {:style style/space-between-inputs}]
      [password-with-hint
       {:hint           {:text   hint-2-text
@@ -120,7 +122,7 @@
        (count)))
 
 (defn password-form
-  [{:keys [scroll-to-end-fn]}]
+  []
   (let [password                  (reagent/atom "")
         repeat-password           (reagent/atom "")
         accepts-disclaimer?       (reagent/atom false)
@@ -134,7 +136,7 @@
              :as   validations} (password-validations @password)
             password-strength   (calc-password-strength validations)
             empty-password?     (empty? @password)
-            same-passwords?     (= @password @repeat-password)
+            same-passwords?     (and (not empty-password?) (= @password @repeat-password))
             meet-requirements?  (and (not empty-password?)
                                      (utils.string/at-least-n-chars? @password 10)
                                      same-passwords?
@@ -147,9 +149,7 @@
             :passwords-match?          same-passwords?
             :empty-password?           empty-password?
             :show-password-validation? @show-password-validation?
-            :on-input-focus            (fn []
-                                         (scroll-to-end-fn)
-                                         (reset! focused-input :password))
+            :on-input-focus            #(reset! focused-input :password)
             :on-change-password        (fn [new-value]
                                          (reset! password new-value)
                                          (when (same-password-length?)
@@ -163,14 +163,14 @@
                                           (reset! show-password-validation? true))}]]
 
          [rn/view {:style style/bottom-part}
-          [rn/view {:style style/disclaimer-container}
-           [quo/disclaimer
-            {:blur?     true
-             :on-change #(swap! accepts-disclaimer? not)
-             :checked?  @accepts-disclaimer?}
-            (i18n/label :t/password-creation-disclaimer)]]
-
-          (when (= @focused-input :password)
+          (when same-passwords?
+            [rn/view {:style style/disclaimer-container}
+             [quo/disclaimer
+              {:blur?     true
+               :on-change #(swap! accepts-disclaimer? not)
+               :checked?  @accepts-disclaimer?}
+              (i18n/label :t/password-creation-disclaimer)]])
+          (when (and (= @focused-input :password) (not same-passwords?))
             [help
              {:validations       validations
               :password-strength password-strength}])
@@ -196,25 +196,45 @@
      (i18n/label
       :t/create-profile-password-info-box-description)]]])
 
+(defn- f-create-password
+  []
+  (let [keyboard-shown?      (reagent/atom false)
+        {:keys [top bottom]} (safe-area/get-insets)]
+    (fn []
+      (rn/use-effect
+       (let [will-show-listener (ocall rn/keyboard
+                                       "addListener"
+                                       "keyboardWillShow"
+                                       #(reset! keyboard-shown? true))
+             will-hide-listener (ocall rn/keyboard
+                                       "addListener"
+                                       "keyboardWillHide"
+                                       #(reset! keyboard-shown? false))]
+         (fn []
+           (fn []
+             (ocall will-show-listener "remove")
+             (ocall will-hide-listener "remove"))))
+       [])
+      [rn/touchable-without-feedback
+       {:on-press   rn/dismiss-keyboard!
+        :accessible false}
+       [rn/view {:style style/flex-fill}
+        [rn/keyboard-avoiding-view {:style style/flex-fill}
+         [navigation-bar/navigation-bar
+          {:top                   top
+           :right-section-buttons [{:type                :blur-bg
+                                    :icon                :i/info
+                                    :icon-override-theme :dark
+                                    :on-press            (fn []
+                                                           (rn/dismiss-keyboard!)
+                                                           (rf/dispatch [:show-bottom-sheet
+                                                                         {:content create-password-doc
+                                                                          :shell?  true}]))}]}]
+         [password-form]
+         [rn/view {:style {:height (if-not @keyboard-shown? bottom 0)}}]]]])))
+
 (defn create-password
   []
-  (let [scroll-view-ref  (atom nil)
-        scroll-to-end-fn #(js/setTimeout ^js/Function (.-scrollToEnd @scroll-view-ref) 250)]
-    (fn []
-      (let [{:keys [top]} (safe-area/get-insets)]
-        [:<>
-         [background/view true]
-         [rn/scroll-view
-          {:ref                     #(reset! scroll-view-ref %)
-           :style                   style/overlay
-           :content-container-style style/content-style}
-          [navigation-bar/navigation-bar
-           {:top                   top
-            :right-section-buttons [{:type                :blur-bg
-                                     :icon                :i/info
-                                     :icon-override-theme :dark
-                                     :on-press            #(rf/dispatch
-                                                            [:show-bottom-sheet
-                                                             {:content create-password-doc
-                                                              :shell?  true}])}]}]
-          [password-form {:scroll-to-end-fn scroll-to-end-fn}]]]))))
+  [:<>
+   [background/view true]
+   [:f> f-create-password]])

src/status_im2/contexts/onboarding/events.cljs

@@ -1,17 +1,16 @@
 (ns status-im2.contexts.onboarding.events
   (:require
-    [utils.re-frame :as rf]
-    [taoensso.timbre :as log]
+    [clojure.string :as string]
+    [native-module.core :as native-module]
     [re-frame.core :as re-frame]
+    [status-im.ethereum.core :as ethereum]
     [status-im.utils.types :as types]
     [status-im2.config :as config]
-    [clojure.string :as string]
-    [utils.i18n :as i18n]
-    [utils.security.core :as security]
-    [native-module.core :as native-module]
-    [status-im.ethereum.core :as ethereum]
     [status-im2.constants :as constants]
-    [status-im2.contexts.onboarding.profiles.view :as profiles.view]))
+    [taoensso.timbre :as log]
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]
+    [utils.security.core :as security]))
 
 (re-frame/reg-fx
  :multiaccount/create-account-and-login
@@ -140,12 +139,10 @@
      {:title               (i18n/label :t/multiaccount-exists-title)
       :content             (i18n/label :t/multiaccount-exists-content)
       :confirm-button-text (i18n/label :t/unlock)
-      :on-accept           #(do
-                              (re-frame/dispatch [:pop-to-root :profiles])
-                              ;; FIXME(rasom): obviously not cool
-                              (reset! profiles.view/show-profiles? false)
-                              (re-frame/dispatch
-                               [:multiaccounts.login.ui/multiaccount-selected key-uid]))
+      :on-accept           (fn []
+                             (re-frame/dispatch [:pop-to-root :profiles])
+                             (re-frame/dispatch
+                              [:multiaccounts.login.ui/multiaccount-selected key-uid]))
       :on-cancel           #(re-frame/dispatch [:pop-to-root :multiaccounts])}}
     {:db       (assoc-in db [:onboarding-2/profile :seed-phrase] seed-phrase)
      :dispatch [:navigate-to :create-profile]}))

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

@@ -12,8 +12,6 @@
             [utils.security.core :as security]
             [utils.transforms :as types]))
 
-(def show-profiles? (reagent/atom false))
-
 (defn login-multiaccount
   []
   (rf/dispatch [:multiaccounts.login.ui/password-input-submitted]))
@@ -43,14 +41,14 @@
     :context             context
     :button-text         (i18n/label :t/remove)
     :close-button-text   (i18n/label :t/cancel)
-    :on-press            #(do
-                            (rf/dispatch [:hide-bottom-sheet])
-                            (native-module/delete-multiaccount
-                             key-uid
-                             (fn [result]
-                               (let [{:keys [error]} (types/json->clj result)]
-                                 (rf/dispatch [:onboarding-2/on-delete-profile-success key-uid])
-                                 (log/info "profile deleted: error" error)))))}])
+    :on-press            (fn []
+                           (rf/dispatch [:hide-bottom-sheet])
+                           (native-module/delete-multiaccount
+                            key-uid
+                            (fn [result]
+                              (let [{:keys [error]} (types/json->clj result)]
+                                (rf/dispatch [:onboarding-2/on-delete-profile-success key-uid])
+                                (log/info "profile deleted: error" error)))))}])
 
 (defn show-confirmation
   [key-uid context]
@@ -72,7 +70,9 @@
                 {:content (fn [] [profile-options key-uid context])}]))
 
 (defn profile-card
-  [{:keys [name key-uid customization-color keycard-pairing last-index] :as multiaccount} index]
+  [{:keys [name key-uid customization-color keycard-pairing last-index set-hide-profiles]
+    :as   multiaccount}
+   index]
   (let [last-item?      (= last-index index)
         profile-picture (:uri (first (:images multiaccount)))]
     [quo/profile-card
@@ -89,15 +89,18 @@
                               {:name            name
                                :color           customization-color
                                :profile-picture profile-picture})
-      :on-card-press        #(do
-                               (rf/dispatch
-                                [:multiaccounts.login.ui/multiaccount-selected key-uid])
-                               (when-not keycard-pairing (reset! show-profiles? false)))}]))
+      :on-card-press        (fn []
+                              (rf/dispatch
+                               [:multiaccounts.login.ui/multiaccount-selected key-uid])
+                              (when-not keycard-pairing (set-hide-profiles)))}]))
 
 (defn profiles-section
-  []
+  [{:keys [set-hide-profiles]}]
   (let [multiaccounts (vals (rf/sub [:multiaccounts/multiaccounts]))
-        multiaccounts (map #(assoc % :last-index (- (count multiaccounts) 1)) multiaccounts)]
+        profiles-data (map #(assoc %
+                                   :last-index        (- (count multiaccounts) 1)
+                                   :set-hide-profiles set-hide-profiles)
+                           multiaccounts)]
     [rn/view
      {:style style/profiles-container}
      [rn/view
@@ -116,7 +119,7 @@
         :override-theme      :dark}
        :main-icons/add]]
      [rn/flat-list
-      {:data                    (sort-by :timestamp > multiaccounts)
+      {:data                    (sort-by :timestamp > profiles-data)
        :key-fn                  :key-uid
        :content-container-style {:padding-bottom 20}
        :render-fn               profile-card}]]))
@@ -169,8 +172,8 @@
        (i18n/label :t/forgot-your-password-info-create-new-password-description)]]]]])
 
 (defn login-section
-  []
-  (let [{:keys [name customization-color error processing]
+  [{:keys [set-show-profiles]}]
+  (let [{:keys [name customization-color error processing password]
          :as   multiaccount} (rf/sub [:multiaccounts/login])
         sign-in-enabled?     (rf/sub [:sign-in-enabled?])
         profile-picture      (:uri (first (:images multiaccount)))]
@@ -180,7 +183,8 @@
       {:size                32
        :type                :blur-bg
        :icon                true
-       :on-press            #(reset! show-profiles? true)
+       :on-press            set-show-profiles
+       :disabled            processing
        :override-theme      :dark
        :width               32
        :accessibility-label :show-profiles
@@ -197,18 +201,18 @@
       [quo/input
        {:type              :password
         :blur?             true
-        :override-theme    :dark
+        :disabled?         processing
         :placeholder       (i18n/label :t/type-your-password)
         :auto-focus        true
-        :error?            (when (not-empty error) error)
+        :error?            (seq error)
         :label             (i18n/label :t/profile-password)
-        :secure-text-entry true
         :on-change-text    (fn [password]
                              (rf/dispatch [:set-in [:multiaccounts/login :password]
                                            (security/mask-data password)])
                              (rf/dispatch [:set-in [:multiaccounts/login :error] ""]))
+        :default-value     (security/safe-unmask-data password)
         :on-submit-editing (when sign-in-enabled? login-multiaccount)}]
-      (when (not-empty error)
+      (when (seq error)
         [quo/info-message
          {:type  :error
           :size  :default
@@ -219,6 +223,7 @@
       {:size                40
        :type                :ghost
        :before              :i/info
+       :disabled            processing
        :accessibility-label :forget-password-button
        :override-theme      :dark
        :style               style/forget-password-button
@@ -239,10 +244,12 @@
 
 (defn views
   []
-  (reset! show-profiles? false)
-  (fn []
-    [:<>
-     [background/view true]
-     (if @show-profiles?
-       [profiles-section]
-       [login-section])]))
+  (let [show-profiles?    (reagent/atom false)
+        set-show-profiles #(reset! show-profiles? true)
+        set-hide-profiles #(reset! show-profiles? false)]
+    (fn []
+      [:<>
+       [background/view true]
+       (if @show-profiles?
+         [profiles-section {:set-hide-profiles set-hide-profiles}]
+         [login-section {:set-show-profiles set-show-profiles}])])))

src/status_im2/contexts/quo_preview/keycard/keycard.cljs

@@ -0,0 +1,37 @@
+(ns status-im2.contexts.quo-preview.keycard.keycard
+  (:require [status-im2.contexts.quo-preview.preview :as preview]
+            [react-native.core :as rn]
+            [quo2.foundations.colors :as colors]
+            [reagent.core :as reagent]
+            [quo2.core :as quo]))
+
+(def descriptor
+  [{:label "Holder"
+    :key   :holder-name
+    :type  :text}
+   {:label "Locked?"
+    :key   :locked?
+    :type  :boolean}])
+
+(defn cool-preview
+  []
+  (let [state (reagent/atom {:holder-name nil
+                             :locked?     true})]
+    (fn
+      []
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view [preview/customizer state descriptor]
+        [quo/keycard
+         {:holder-name? (:holder-name @state)
+          :locked?      (:locked? @state)}]]])))
+
+(defn preview-keycard
+  []
+  [rn/view
+   {:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
+            :flex             1}}
+   [rn/flat-list
+    {:style                        {:flex 1}
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])

src/status_im2/contexts/quo_preview/main.cljs

@@ -90,7 +90,8 @@
     [status-im2.contexts.quo-preview.wallet.lowest-price :as lowest-price]
     [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
     [status-im2.contexts.quo-preview.wallet.network-breakdown :as network-breakdown]
-    [status-im2.contexts.quo-preview.wallet.token-overview :as token-overview]))
+    [status-im2.contexts.quo-preview.wallet.token-overview :as token-overview]
+    [status-im2.contexts.quo-preview.keycard.keycard :as keycard]))
 
 (def screens-categories
   {:foundations           [{:name      :shadows
@@ -344,7 +345,10 @@
                             :component network-breakdown/preview-network-breakdown}
                            {:name      :network-amount
                             :options   {:topBar {:visible true}}
-                            :component network-amount/preview}]})
+                            :component network-amount/preview}]
+   :keycard               [{:name      :keycard-component
+                            :options   {:topBar {:visible true}}
+                            :component keycard/preview-keycard}]})
 
 (def screens (flatten (map val screens-categories)))
 

src/status_im2/contexts/share/events.cljs

@@ -0,0 +1,15 @@
+(ns status-im2.contexts.share.events
+  (:require [utils.re-frame :as rf]
+            [status-im2.common.toasts.events :as toasts]
+            [quo2.foundations.colors :as colors]))
+
+(rf/defn copy-text-and-show-toast
+  {:events [:share/copy-text-and-show-toast]}
+  [cofx text-to-copy post-copy-message]
+  (rf/merge cofx
+            {:copy-to-clipboard text-to-copy}
+            (toasts/upsert
+             {:icon           :correct
+              :icon-color     colors/success-50
+              :override-theme :dark
+              :text           post-copy-message})))

src/status_im2/contexts/share/style.cljs

@@ -0,0 +1,102 @@
+(ns status-im2.contexts.share.style
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.platform :as platform]))
+
+(def screen-padding 20)
+
+(def blur
+  {:style         {:position :absolute
+                   :top      0
+                   :left     0
+                   :right    0
+                   :bottom   0}
+   :overlay-color colors/neutral-80-opa-80
+   :blur-amount   20})
+
+(def header-button
+  {:margin-bottom 12
+   :margin-left   screen-padding})
+
+(def header-heading
+  {:padding-horizontal screen-padding
+   :padding-vertical   12
+   :color              colors/white})
+
+(def qr-code-container
+  {:padding           12
+   :border-radius     16
+   :margin-top        12
+   :margin-bottom     4
+   :margin-horizontal screen-padding
+   :background-color  colors/white-opa-5
+   :flex-direction    :column
+   :justify-content   :center})
+
+(def emoji-hash-container
+  {:border-radius     16
+   :margin-top        12
+   :margin-horizontal screen-padding
+   :background-color  colors/white-opa-5
+   :flex-direction    :row
+   :justify-content   :flex-start
+   :align-items       :flex-start})
+
+(def profile-address-column
+  {:flex-direction :column})
+
+(def emoji-address-column
+  {:flex-direction :column})
+
+(def profile-address-label
+  {:color       colors/white-opa-40
+   :padding-top 10})
+
+(def profile-address-content
+  {:color       colors/white
+   :align-self  :flex-start
+   :padding-top 2})
+
+(def profile-address-container
+  {:flex-direction    :row
+   :justify-content   :flex-start
+   :margin-top        6
+   :margin-horizontal 4})
+
+(def emoji-address-container
+  {:flex-direction    :row
+   :justify-content   :flex-start
+   :margin-top        6
+   :margin-horizontal 4})
+
+(def emoji-hash-label
+  {:color          colors/white-opa-40
+   :margin-top     8
+   :padding-bottom (if platform/ios? 2 0)
+   :padding-left   12})
+
+
+(def share-button-container
+  {:position :absolute
+   :right    0
+   :top      16})
+
+(def emoji-share-button-container
+  {:position :absolute
+   :right    4
+   :top      16})
+
+(def emoji-hash-content
+  {:color          colors/white
+   :align-self     :flex-start
+   :padding-top    4
+   :padding-bottom 12
+   :padding-left   12
+   :font-size      14})
+
+(def tabs-container
+  {:padding-horizontal screen-padding
+   :margin-vertical    8})
+
+(def wip-style
+  {:color      colors/white
+   :text-align :center})

src/status_im2/contexts/share/view.cljs

@@ -0,0 +1,162 @@
+(ns status-im2.contexts.share.view
+  (:require [utils.i18n :as i18n]
+            [quo2.core :as quo]
+            [react-native.core :as rn]
+            [status-im2.contexts.share.style :as style]
+            [utils.re-frame :as rf]
+            [reagent.core :as reagent]
+            [quo2.foundations.colors :as colors]
+            [clojure.string :as string]
+            [react-native.blur :as blur]
+            [status-im.ui.components.list-selection :as list-selection]
+            [utils.image-server :as image-server]
+            [react-native.navigation :as navigation]))
+
+(defn header
+  []
+  [:<>
+   [quo/button
+    {:icon                true
+     :type                :blur-bg
+     :size                32
+     :accessibility-label :close-shell-share-tab
+     :override-theme      :dark
+     :style               style/header-button
+     :on-press            #(rf/dispatch [:navigate-back])}
+    :i/close]
+   [quo/text
+    {:size   :heading-1
+     :weight :semi-bold
+     :style  style/header-heading}
+    (i18n/label :t/share)]])
+
+(defn abbreviated-url
+  "The goal here is to generate a string that begins with
+   join.status.im/u/ joined with the 1st 5 characters
+   of the compressed public key followed by an ellipsis followed by
+   the last 12 characters of the compressed public key"
+  [base-url public-pk]
+  (let [first-part-of-public-pk (subs public-pk 0 5)
+        ellipsis                "..."
+        public-pk-size          (count public-pk)
+        last-part-of-public-pk  (subs public-pk (- public-pk-size 12) (- public-pk-size 1))
+        abbreviated-url         (str base-url first-part-of-public-pk ellipsis last-part-of-public-pk)]
+    abbreviated-url))
+
+(defn profile-tab
+  [window-width]
+  (let [multiaccount    (rf/sub [:multiaccount])
+        emoji-hash      (string/join (get multiaccount :emoji-hash))
+        qr-size         (int (- window-width 64))
+        public-pk       (get multiaccount :compressed-key)
+        abbreviated-url (abbreviated-url image-server/status-profile-base-url-without-https public-pk)
+        profile-url     (str image-server/status-profile-base-url public-pk)
+        port            (rf/sub [:mediaserver/port])
+        key-uid         (get multiaccount :key-uid)
+        source-uri      (image-server/get-account-qr-image-uri {:key-uid    key-uid
+                                                                :public-key public-pk
+                                                                :port       port
+                                                                :qr-size    qr-size})]
+    [:<>
+     [rn/view {:style style/qr-code-container}
+      [quo/qr-code
+       {:source {:uri source-uri}
+        :width  qr-size
+        :height qr-size}]
+      [rn/view {:style style/profile-address-container}
+       [rn/view {:style style/profile-address-column}
+        [quo/text
+         {:size   :paragraph-2
+          :weight :medium
+          :style  style/profile-address-label}
+         (i18n/label :t/link-to-profile)]
+        [rn/touchable-highlight
+         {:active-opacity   1
+          :underlay-color   colors/neutral-80-opa-1-blur
+          :background-color :transparent
+          :on-press         #(rf/dispatch [:share/copy-text-and-show-toast profile-url
+                                           (i18n/label :t/link-to-profile-copied)])
+          :on-long-press    #(rf/dispatch [:share/copy-text-and-show-toast profile-url
+                                           (i18n/label :t/link-to-profile-copied)])}
+         [quo/text
+          {:style           style/profile-address-content
+           :size            :paragraph-1
+           :weight          :medium
+           :ellipsize-mode  :middle
+           :number-of-lines 1}
+          abbreviated-url]]]
+       [rn/view {:style style/share-button-container}
+        [quo/button
+         {:icon                true
+          :type                :blur-bg
+          :size                32
+          :accessibility-label :link-to-profile
+          :override-theme      :dark
+          :on-press            #(list-selection/open-share {:message profile-url})}
+         :i/share]]]]
+
+     [rn/view {:style style/emoji-hash-container}
+      [rn/view {:style style/emoji-address-container}
+       [rn/view {:style style/emoji-address-column}
+        [quo/text
+         {:size   :paragraph-2
+          :weight :medium
+          :style  style/emoji-hash-label}
+         (i18n/label :t/emoji-hash)]
+        [rn/touchable-highlight
+         {:active-opacity   1
+          :underlay-color   colors/neutral-80-opa-1-blur
+          :background-color :transparent
+          :on-press         #(rf/dispatch [:share/copy-text-and-show-toast emoji-hash
+                                           (i18n/label :t/emoji-hash-copied)])
+          :on-long-press    #(rf/dispatch [:share/copy-text-and-show-toast emoji-hash
+                                           (i18n/label :t/emoji-hash-copied)])}
+         [rn/text {:style style/emoji-hash-content} emoji-hash]]]]
+      [rn/view {:style style/emoji-share-button-container}
+       [quo/button
+        {:icon                true
+         :type                :blur-bg
+         :size                32
+         :accessibility-label :link-to-profile
+         :override-theme      :dark
+         :style               {:margin-right 12}
+         :on-press            #(rf/dispatch [:share/copy-text-and-show-toast emoji-hash
+                                             (i18n/label :t/emoji-hash-copied)])
+         :on-long-press       #(rf/dispatch [:share/copy-text-and-show-toast emoji-hash
+                                             (i18n/label :t/emoji-hash-copied)])}
+        :i/copy]]]]))
+
+(defn wallet-tab
+  []
+  [rn/text {:style style/wip-style} "not implemented"])
+
+(defn tab-content
+  [window-width]
+  (let [selected-tab (reagent/atom :profile)]
+    (fn []
+      [:<>
+       [header]
+       [rn/view {:style style/tabs-container}
+        [quo/segmented-control
+         {:size           28
+          :blur?          true
+          :override-theme :dark
+          :on-change      #(reset! selected-tab %)
+          :default-active :profile
+          :data           [{:id    :profile
+                            :label (i18n/label :t/profile)}
+                           {:id    :wallet
+                            :label (i18n/label :t/wallet)}]}]]
+       (if (= @selected-tab :profile)
+         [profile-tab window-width]
+         [wallet-tab])])))
+
+(defn view
+  []
+  (let [window-width (rf/sub [:dimensions/window-width])]
+    (fn []
+      [rn/view
+       {:flex        1
+        :padding-top (navigation/status-bar-height)}
+       [blur/view style/blur]
+       [tab-content window-width]])))

src/status_im2/events.cljs

@@ -14,6 +14,7 @@
             [status-im2.db :as db]
             [utils.re-frame :as rf]
             [utils.datetime :as datetime]
+            status-im2.contexts.share.events
             status-im2.contexts.syncing.events
             status-im2.contexts.chat.events))
 

src/status_im2/navigation/core.cljs

@@ -87,7 +87,6 @@
      {:component {:id      comp
                   :name    comp
                   :options (merge (options/statusbar-and-navbar)
-                                  {:layout {:orientation :portrait}}
                                   options
                                   (if (:topBar options)
                                     (options/merge-top-bar (options/topbar-options) options)
@@ -167,7 +166,7 @@
                  :id      comp
                  :options (merge (options/statusbar)
                                  {:layout  {:componentBackgroundColor :transparent
-                                            :orientation              :portrait}
+                                            :orientation              ["portrait"]}
                                   :overlay {:interceptTouchOutside true}}
                                  opts)}})))
 
@@ -178,7 +177,8 @@
                  (fn []
                    (show-overlay "toasts"
                                  {:overlay {:interceptTouchOutside false}
-                                  :layout  {:componentBackgroundColor :transparent}})))
+                                  :layout  {:componentBackgroundColor :transparent
+                                            :orientation              ["portrait"]}})))
 (re-frame/reg-fx :hide-toasts (fn [] (dissmiss-overlay "toasts")))
 
 ;; bottom sheet

src/status_im2/navigation/options.cljs

@@ -4,7 +4,7 @@
 
 (defn default-options
   []
-  {:layout {:orientation :portrait}
+  {:layout {:orientation ["portrait"]}
    :topBar {:visible false}})
 
 ;; Note: Currently, the status bar style provided while setting the root has a high preference,
@@ -27,14 +27,14 @@
          {:topBar {:visible false}
           :layout {:componentBackgroundColor (or background-color
                                                  (colors/theme-colors colors/white colors/neutral-100))
-                   :orientation              :portrait
+                   :orientation              ["portrait"]
                    :backgroundColor          (or background-color
                                                  (colors/theme-colors colors/white
                                                                       colors/neutral-100))}}))
 
 (def onboarding-layout
   {:componentBackgroundColor colors/neutral-80-opa-80-blur
-   :orientation              :portrait
+   :orientation              ["portrait"]
    :backgroundColor          colors/neutral-80-opa-80-blur})
 
 (defn navbar
@@ -75,7 +75,7 @@
   (merge
    {:modalPresentationStyle :overCurrentContext
     :layout                 {:componentBackgroundColor :transparent
-                             :orientation              :portrait
+                             :orientation              ["portrait"]
                              :backgroundColor          :transparent}}
    (if platform/android?
      {:statusBar {:backgroundColor :transparent
@@ -85,6 +85,7 @@
 
 (def sheet-options
   {:layout                 {:componentBackgroundColor :transparent
+                            :orientation              ["portrait"]
                             :backgroundColor          :transparent}
    :modalPresentationStyle :overCurrentContext})
 

src/status_im2/navigation/screens.cljs

@@ -31,7 +31,8 @@
     [status-im2.contexts.chat.group-details.view :as group-details]
     [status-im.ui.screens.screens :as old-screens]
     [status-im2.contexts.communities.actions.request-to-join.view :as join-menu]
-    [status-im2.contexts.syncing.setup-syncing.view :as settings-setup-syncing]))
+    [status-im2.contexts.syncing.setup-syncing.view :as settings-setup-syncing]
+    [status-im2.contexts.share.view :as share]))
 
 (defn screens
   []
@@ -42,6 +43,10 @@
      :options   options/transparent-screen-options
      :component activity-center/view}
 
+    {:name      :share-shell
+     :options   options/transparent-screen-options
+     :component share/view}
+
     {:name      :shell-stack
      :component shell/shell-stack}
 

src/status_im2/setup/i18n_test.cljs

@@ -992,7 +992,9 @@
     :your-data-belongs-to-you
     :your-data-belongs-to-you-description
     :your-recovery-phrase
-    :your-recovery-phrase-description})
+    :your-recovery-phrase-description
+    :empty-keycard
+    :user-keycard})
 
 ;; NOTE: the rest checkpoints are based on the previous one, defined
 ;;       like this:

src/utils/image_server.cljs

@@ -6,6 +6,7 @@
 (def ^:const contact-images-action "/contactImages")
 (def ^:const generate-qr-action "/GenerateQRCode")
 (def ^:const status-profile-base-url "https://join.status.im/u/")
+(def ^:const status-profile-base-url-without-https "join.status.im/u/")
 
 (defn timestamp [] (datetime/timestamp))
 

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.151.5",
-    "commit-sha1": "31d02f5197684317ad9f14874b0980d5ca716be6",
-    "src-sha256": "0ih77pq3lbk6qadv018pp7gzd6vhgzcl34vm1vg2mdmv2f15zvlw"
+    "version": "v0.151.8",
+    "commit-sha1": "c26f45ae3d238bb8ef6e2771eb2a6c2672f5188f",
+    "src-sha256": "1sygdm09h3rdgb6hyzhlma32kibmp7yissch2w0y65j7bm88m9mq"
 }

test/appium/tests/critical/chats/test_1_1_public_chats.py

@@ -1065,7 +1065,6 @@ class TestOneToOneChatMultipleSharedDevicesNewUi(MultipleSharedDeviceTestCase):
         self.errors.verify_no_errors()
 
     @marks.testrail_id(702813)
-    @marks.xfail(reason="blocked by 15859")
     def test_1_1_chat_push_emoji(self):
         message_no_pn, message = 'No PN', 'Text push notification'
 

test/appium/tests/critical/chats/test_group_chat.py

@@ -203,7 +203,6 @@ class TestGroupChatMultipleDeviceMergedNewUI(MultipleSharedDeviceTestCase):
         self.chats[0].send_message(self.message_before_adding)
 
     @marks.testrail_id(702807)
-    @marks.xfail(reason="blocked by 15859")
     def test_group_chat_join_send_text_messages_push(self):
         message_to_admin = self.message_to_admin
         [self.homes[i].click_system_back_button_until_element_is_shown() for i in range(3)]

test/appium/tests/critical/test_public_chat_browsing.py

@@ -743,7 +743,6 @@ class TestCommunityMultipleDeviceMerged(MultipleSharedDeviceTestCase):
         self.errors.verify_no_errors()
 
     @marks.testrail_id(702786)
-    @marks.xfail(reason="blocked by 15859")
     def test_community_mentions_push_notification(self):
         self.home_1.click_system_back_button_until_element_is_shown()
         if not self.channel_2.chat_message_input.is_element_displayed():

test/appium/views/sign_in_view.py

@@ -207,7 +207,7 @@ class SignInView(BaseView):
         self.profile_repeat_password_edit_box.click()
         self.profile_repeat_password_edit_box.send_keys(password)
         self.checkbox_button.scroll_to_element()
-        self.checkbox_button.double_click()
+        self.checkbox_button.click()
         self.profile_confirm_password_button.click()
 
     def set_profile(self, username: str, set_image=False):

translations/en.json

@@ -1687,6 +1687,8 @@
     "database-reset-content": "Chats, contacts and settings have been deleted. You can use your account with your Keycard",
     "database-reset-warning": "Database will be reset. Chats, contacts and settings will be deleted",
     "empty-keycard-required": "Requires an empty Keycard",
+    "empty-keycard": "Empty Keycard",
+    "user-keycard": "{{name}} Card",
     "current": "Current",
     "choose-storage": "Choose storage",
     "choose-new-location-for-keystore": "Choose a new location to save your keystore file",
@@ -2150,5 +2152,9 @@
     "user-shared-a-community": "{{user}} shared a community",
     "you-deleted-a-message": "You deleted a message",
     "this-message-was-deleted": "This message was deleted",
-    "user-deleted-a-message": "{{user}} deleted a message"
+    "user-deleted-a-message": "{{user}} deleted a message",
+    "link-to-profile": "Link to profile",
+    "emoji-hash": "Emoji Hash",
+    "emoji-hash-copied":"Emojihash copied to clipboard",
+    "link-to-profile-copied":"Link to Profile copied to clipboard"
 }