Add new welcome page after generating their key

formatting to style

add accessibility-id & flow for keycard

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>

components/src/status_im/react_native/resources.cljs

@@ -3,8 +3,10 @@
 (def ui
   {:empty-hashtags      (js/require "./resources/images/ui/empty-hashtags.png")
    :empty-recent        (js/require "./resources/images/ui/empty-recent.png")
+   :empty-chats-header  (js/require "./resources/images/ui/empty-chats-header.png")
    :analytics-image     (js/require "./resources/images/ui/analytics-image.png")
    :welcome-image       (js/require "./resources/images/ui/welcome-image.png")
+   :welcome             (js/require "./resources/images/ui/welcome.jpg")
    :intro1              (js/require "./resources/images/ui/intro1.jpg")
    :intro2              (js/require "./resources/images/ui/intro2.jpg")
    :intro3              (js/require "./resources/images/ui/intro3.jpg")

fiddle/src/status_im/react_native/resources.cljs

@@ -5,6 +5,7 @@
    :empty-recent         "images/ui/empty-recent.png"
    :analytics-image      "images/ui/analytics-image.png"
    :welcome-image       "images/ui/welcome-image.png"
+   :welcome              "images/ui/welcome.jpg"
    :intro1               "images/ui/intro1.png"
    :intro2               "images/ui/intro2.png"
    :intro3               "images/ui/intro3.png"

src/status_im/events.cljs

@@ -149,6 +149,11 @@
  (fn [cofx _]
    (multiaccounts/confirm-wallet-set-up cofx)))
 
+(handlers/register-handler-fx
+ :multiaccounts.ui/hide-home-tooltip
+ (fn [cofx _]
+   (multiaccounts/confirm-home-tooltip cofx)))
+
 ;; multiaccounts login module
 (handlers/register-handler-fx
  :multiaccounts.login.ui/multiaccount-selected

src/status_im/hardwallet/core.cljs

@@ -761,7 +761,7 @@
             {:db (update db :hardwallet dissoc
                          :multiaccount-wallet-address
                          :multiaccount-whisper-public-key)}
-            (navigation/navigate-to-cofx :home nil)))
+            (navigation/navigate-to-cofx :welcome nil)))
 
 (fx/defn login-got-it-pressed
   {:events [:keycard.login.ui/got-it-pressed
@@ -1717,7 +1717,7 @@
                 :login?          true})
               (if (= flow :import)
                 (navigation/navigate-to-cofx :keycard-recovery-success nil)
-                (navigation/navigate-to-cofx :home nil)))))
+                (navigation/navigate-to-cofx :welcome nil)))))
 
 (fx/defn on-generate-and-load-key-success
   [{:keys [db random-guid-generator] :as cofx} data]

src/status_im/multiaccounts/core.cljs

@@ -53,6 +53,11 @@
   (multiaccounts.update/multiaccount-update cofx
                                             {:wallet-set-up-passed? true} {}))
 
+(fx/defn confirm-home-tooltip
+  [cofx]
+  (multiaccounts.update/multiaccount-update cofx
+                                            {:hide-home-tooltip? true} {}))
+
 (fx/defn switch-dev-mode
   [cofx dev-mode?]
   (multiaccounts.update/multiaccount-update cofx

src/status_im/multiaccounts/create/core.cljs

@@ -96,9 +96,7 @@
   [{:keys [db] :as cofx}]
   (fx/merge cofx
             {:db (dissoc db :intro-wizard)}
-            (navigation/navigate-reset {:index 0
+            (navigation/navigate-to-cofx :welcome nil)))
-                                        :key :chat-stack
-                                        :actions [{:routeName :home}]})))
 
 (fx/defn init-key-generation
   [{:keys [db] :as cofx}]

src/status_im/multiaccounts/db.cljs

@@ -35,6 +35,7 @@
 (spec/def :multiaccount/seed-backed-up? (spec/nilable boolean?))
 (spec/def :multiaccount/installation-id :global/not-empty-string)
 (spec/def :multiaccount/wallet-set-up-passed? (spec/nilable boolean?))
+(spec/def :multiaccount/hide-home-tooltip? (spec/nilable boolean?))
 (spec/def :multiaccount/desktop-alpha-release-warning-shown? (spec/nilable boolean?))
 (spec/def :multiaccount/keycard-instance-uid (spec/nilable string?))
 (spec/def :multiaccount/keycard-key-uid (spec/nilable string?))
@@ -52,6 +53,7 @@
                                                          :multiaccount/seed-backed-up? :multiaccount/mnemonic :multiaccount/desktop-notifications?
                                                          :multiaccount/chaos-mode?
                                                          :multiaccount/wallet-set-up-passed? :multiaccount/last-request
+                                                         :multiaccount/hide-home-tooltip?
                                                          :multiaccount/bootnodes
                                                          :multiaccount/desktop-alpha-release-warning-shown?
                                                          :multiaccount/keycard-instance-uid

src/status_im/multiaccounts/login/core.cljs

@@ -84,7 +84,7 @@
                 {:db (update db :hardwallet dissoc :flow)}
                 (if (= :import flow)
                   (navigation/navigate-to-cofx :keycard-recovery-success nil)
-                  (navigation/navigate-to-cofx :home nil))))))
+                  (navigation/navigate-to-cofx :welcome nil))))))
 
 (fx/defn  initialize-dapp-permissions
   {:events [::initialize-dapp-permissions]}

src/status_im/ui/screens/home/styles.cljs

@@ -88,33 +88,49 @@
 
 (def no-chats
   {:flex               1
-   :align-items        :center
+   :padding-top        16
-   :justify-content    :center
+   :padding-horizontal 16
-   :padding-horizontal 34
-   :align-self         :stretch
    :background-color   :white
    :transform          [{:translateY (- search-input-height)}]})
 
+(def no-chats-wrapper
+  {:width         "100%"
+   :align-items   :center
+   :border-color  colors/gray-lighter
+   :border-width  1
+   :border-radius 16})
+
 (def no-chats-text
-  {:text-align     :center
+  {:font-size   15
-   :color          colors/gray})
+   :width       270
+   :margin-top  12
+   :line-height 22
+   :text-align  :center
+   :color       colors/black})
 
 (def welcome-view
-  {:flex 1})
+  {:flex            1
+   :justify-content :flex-end})
 
 (def welcome-image-container
-  {:align-items :center
+  {:align-items :center})
-   :margin-top  42})
 
 (def welcome-text
   {:typography :header
-   :margin-top  32
    :text-align :center})
 
-(def welcome-text-description
+(def welcome-blank-text
-  {:margin-top        8
+  {:font-size   15
+   :width       270
+   :line-height 22
    :text-align  :center
-   :margin-horizontal 32
+   :color       colors/gray})
+
+(def welcome-text-description
+  {:margin-top        16
+   :margin-bottom     32
+   :text-align        :center
+   :margin-horizontal 40
    :color             colors/gray})
 
 (defn action-button-container [home-width]
@@ -138,3 +154,53 @@
    :shadow-opacity   1
    :shadow-color     "rgba(0, 12, 63, 0.2)"
    :elevation        2})
+
+(def empty-chats-header-container
+  {:flex-direction  :row
+   :align-items     :center
+   :justify-content :center})
+
+(def hr-wrapper
+  {:position         :absolute
+   :width            "100%"
+   :height           1
+   :top              9
+   :border-top-width 1
+   :border-color     colors/gray-lighter})
+
+(def or-text
+  {:width            40
+   :background-color colors/white
+   :font-size        12
+   :text-align       :center
+   :color            colors/gray})
+
+(def tags-wrapper
+  {:width           300
+   :margin-top      10
+   :margin-bottom   18
+   :flex-direction  :row
+   :flex-wrap       :wrap
+   :align-items     :center
+   :text-align      :center
+   :justify-content :center})
+
+(def tag-text
+  {:font-size     13
+   :font-weight   "500"
+   :line-height   20
+   :margin-left   10
+   :margin-right  10
+   :margin-top    6
+   :margin-bottom 6
+   :color         colors/blue})
+
+(def close-icon-container
+  {:width            19
+   :height           19
+   :margin-top       3
+   :margin-right     8
+   :border-radius    12
+   :background-color colors/gray
+   :align-items      :center
+   :justify-content  :center})

src/status_im/ui/screens/home/views.cljs

@@ -18,38 +18,87 @@
             [status-im.ui.components.list-selection :as list-selection]
             [status-im.ui.components.animation :as animation]
             [status-im.constants :as constants]
-            [status-im.ui.components.colors :as colors])
+            [status-im.ui.components.colors :as colors]
+            [status-im.utils.fx :as fx])
   (:require-macros [status-im.utils.views :as views]))
 
+(defn welcome-blank-page [blank?]
+  (when blank?
+    [react/view {:style {:flex 1 :flex-direction :row :align-items :center :justify-content :center}}
+     [react/i18n-text {:style styles/welcome-blank-text :key :welcome-blank-message}]]))
+
+(defn welcome-image-wrapper []
+  (let [dimensions (reagent/atom {})]
+    (fn []
+      [react/view {:on-layout  (fn [e]
+                                 (reset! dimensions (js->clj (-> e .-nativeEvent .-layout) :keywordize-keys true)))
+                   :style {:align-items :center
+                           :justify-content :center
+                           :flex 1}}
+       (let [padding    0
+             image-size (- (min (:width @dimensions) (:height @dimensions)) padding)]
+         [react/image {:source (resources/get-image :welcome)
+                       :resize-mode :contain
+                       :style {:width image-size :height image-size}}])])))
+
 (defn welcome []
+  [react/view {:style {:flex 1}}
    [react/view {:style styles/welcome-view}
-   [react/view {:flex 1}]
     [status-bar/status-bar {:type :main}]
-   [react/view {:style styles/welcome-image-container}
+    [welcome-image-wrapper]
-    [components.common/image-contain
-     {:container-style {}}
-     {:image (resources/get-image :welcome-image) :width 750 :height 556}]]
     [react/i18n-text {:style styles/welcome-text :key :welcome-to-status}]
     [react/view
      [react/i18n-text {:style styles/welcome-text-description
                        :key   :welcome-to-status-description}]]
-   [react/view {:flex 1}]
+    [react/view {:align-items :center :margin-bottom 50}
-   [react/view {:align-items :center :margin-bottom 52}
      [components.common/button {:on-press #(re-frame/dispatch [:navigate-back])
-                               :label    (i18n/label :t/get-started)}]]])
+                                :accessibility-label :lets-go-button
+                                :label    (i18n/label :t/lets-go)}]]]])
 
-(defn home-empty-view []
+(defn- start-chat [topic]
+  (re-frame/dispatch [:chat.ui/start-public-chat topic {:navigation-reset? true}])
+  (re-frame/dispatch [:set :public-group-topic nil]))
+
+(defn chat-tags-view []
+  [react/view {:align-items :center :margin-top 16}
+   [react/i18n-text {:style styles/no-chats-text :key :follow-your-interests}]
+   [react/view {:style styles/tags-wrapper}
+    (for [item ["introductions", "chitchat", "status", "crypto", "tech", "music", "movies"]]
+      [react/touchable-highlight {:key item :on-press #(start-chat item)}
+       [react/text {:style styles/tag-text} (str "#" item)]])]])
+
+(defn home-tooltip-view [blank? hide-home-tooltip?]
   (filter.views/reset-height)
   [react/view styles/no-chats
-   [react/i18n-text {:style styles/no-chats-text :key :no-recent-chats}]
+   (if-not hide-home-tooltip?
-   [react/view {:align-items :center :margin-top 20}
+     [react/view styles/no-chats-wrapper
+      [react/view {:style {:flex-direction :row}}
+       [react/view {:flex 1}
+        [react/view {:style styles/empty-chats-header-container}
+         [components.common/image-contain
+          {:container-style {:width 60 :height 60 :margin-top -20}}
+          {:image (resources/get-image :empty-chats-header) :width 60 :height 60}]]
+        [react/view {:style {:position :absolute :right 0 :top 5}}
+         [react/touchable-highlight {:on-press (when-not hide-home-tooltip?
+                                                 #(re-frame/dispatch [:multiaccounts.ui/hide-home-tooltip]))
+                                     :accessibility-label :hide-home-button}
+          [react/view {:style styles/close-icon-container}
+           [icons/icon :main-icons/close {:color colors/white :width 19 :height 19}]]]]]]
+      [react/i18n-text {:style styles/no-chats-text :key :chat-and-transact}]
+      [react/view {:align-items :center :margin-top 16}
        [components.common/button {:on-press #(list-selection/open-share {:message (i18n/label :t/get-status-at)})
-                               :label    (i18n/label :t/invite-friends)}]]])
+                                  :accessibility-label :invite-friends-button
+                                  :label    (i18n/label :t/invite-friends)}]]
+      [react/view {:align-items :center :margin-top 16}
+       [react/view {:style styles/hr-wrapper}]
+       [react/i18n-text {:style styles/or-text :key :or}]]
+      [chat-tags-view]]
+     [welcome-blank-page blank?])])
 
-(defn home-items-view [_ _ _ search-input-state]
+(defn home-items-view [_ _ _ _ search-input-state]
   (let [previous-touch      (reagent/atom nil)
         scrolling-from-top? (reagent/atom true)]
-    (fn [search-filter chats all-home-items]
+    (fn [search-filter chats all-home-items hide-home-tooltip?]
       (if search-filter
         [filter.views/home-filtered-items-list chats]
         [react/animated-view
@@ -81,7 +130,7 @@
          [list/flat-list {:data           all-home-items
                           :key-fn         first
                           :header         [react/view {:height 4 :flex 1}]
-                          :footer         [react/view {:height 68 :flex 1}]
+                          :footer 				[react/view {:height 380 :margin-top 70} [home-tooltip-view false hide-home-tooltip?]]
                           :on-scroll-begin-drag
                           (fn [e]
                             (reset! scrolling-from-top?
@@ -109,6 +158,7 @@
   (views/letsubs
     [anim-translate-y (animation/create-value connectivity/neg-connectivity-bar-height)
      {:keys [search-filter chats all-home-items]} [:home-items]
+     {:keys [hide-home-tooltip?]} [:multiaccount]
      window-width [:dimensions/window-width]
      two-pane-ui-enabled? [:two-pane-ui-enabled?]]
     (let [home-width (if (> window-width constants/two-pane-min-width)
@@ -144,11 +194,12 @@
             [filter.views/search-input-wrapper search-filter]
             (if (and (not search-filter)
                      (empty? all-home-items))
-              [home-empty-view]
+              [home-tooltip-view true hide-home-tooltip?]
               [home-items-view
                search-filter
                chats
                all-home-items
+               hide-home-tooltip?
                filter.views/search-input-state])])]
         [home-action-button home-width]]])))
 

translations/en.json

@@ -121,6 +121,7 @@
 	"chaos-unicorn-day": "Chaos Unicorn Day",
 	"chaos-unicorn-day-details": "🦄🦄🦄🦄🦄🦄🦄🚀!",
 	"chat": "Chat",
+	"chat-and-transact": "Chat and transact privately with your friends.",
 	"chat-key": "Chat key",
 	"chat-name": "Chat name",
 	"chat-settings": "Chat settings",
@@ -462,6 +463,7 @@
 	"finishing-card-setup-steps": "> Loading keys to the card\n> Generating multiaccount",
 	"fleet": "Fleet",
 	"fleet-settings": "Fleet settings",
+	"follow-your-interests": "Follow your interests in one of the many Public Chats.",
 	"free": "↓ Free",
 	"from": "From",
 	"gas-limit": "Gas limit",
@@ -599,6 +601,7 @@
 	"leave": "Leave",
 	"leave-group": "Leave group",
 	"left": "left",
+	"lets-go": "Let's go",
 	"les-ulc": "LES/ULC",
 	"linked-on": "Linked on {{date}}",
 	"load-messages-before": "before {{date}}",
@@ -743,6 +746,7 @@
 	"open-nfc-settings": "Open NFC settings",
 	"open-on-etherscan": "Open on Etherscan.io",
 	"optional": "optional",
+	"or": "OR",
 	"or-choose-a-contact": "Or choose a contact",
 	"outgoing": "Outgoing",
 	"pair": "Pair devices",
@@ -1073,8 +1077,9 @@
 	"web-view-error": "Unable to load page",
 	"web3-opt-in": "Browser privacy mode",
 	"welcome-screen-text": "Set up your wallet, invite friends to chat\n and browse popular dapps!",
-	"welcome-to-status": "Welcome to Status",
+	"welcome-to-status": "Welcome to Status!",
-	"welcome-to-status-description": "Here you can chat with people in a secure private chat, browse and interact with DApps.",
+	"welcome-to-status-description": "Set up your crypto wallet, invite friends to chat and browse decentralized apps",
+	"welcome-blank-message": "Your chats will appear here. To start new chats press the ⊕ button",
 	"word-count": "Word count",
 	"word-n": "Word #{{number}}",
 	"word-n-description": "In order to check if you have backed up your seed phrase correctly, enter the word #{{number}} above.",