diff --git a/components/src/status_im/react_native/resources.cljs b/components/src/status_im/react_native/resources.cljs index 8cc253a48a..cfc1d0a119 100644 --- a/components/src/status_im/react_native/resources.cljs +++ b/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") diff --git a/fiddle/src/status_im/react_native/resources.cljs b/fiddle/src/status_im/react_native/resources.cljs index fc2e1eb74c..0bccf47275 100644 --- a/fiddle/src/status_im/react_native/resources.cljs +++ b/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" diff --git a/resources/images/ui/empty-chats-header.png b/resources/images/ui/empty-chats-header.png new file mode 100644 index 0000000000..2f2c09bdfa Binary files /dev/null and b/resources/images/ui/empty-chats-header.png differ diff --git a/resources/images/ui/empty-chats-header@2x.png b/resources/images/ui/empty-chats-header@2x.png new file mode 100644 index 0000000000..03b4a5deb0 Binary files /dev/null and b/resources/images/ui/empty-chats-header@2x.png differ diff --git a/resources/images/ui/empty-chats-header@3x.png b/resources/images/ui/empty-chats-header@3x.png new file mode 100644 index 0000000000..a73214e032 Binary files /dev/null and b/resources/images/ui/empty-chats-header@3x.png differ diff --git a/resources/images/ui/welcome.jpg b/resources/images/ui/welcome.jpg new file mode 100644 index 0000000000..91005a0aea Binary files /dev/null and b/resources/images/ui/welcome.jpg differ diff --git a/resources/images/ui/welcome@2x.jpg b/resources/images/ui/welcome@2x.jpg new file mode 100644 index 0000000000..b24090ba38 Binary files /dev/null and b/resources/images/ui/welcome@2x.jpg differ diff --git a/resources/images/ui/welcome@3x.jpg b/resources/images/ui/welcome@3x.jpg new file mode 100644 index 0000000000..282a302b1f Binary files /dev/null and b/resources/images/ui/welcome@3x.jpg differ diff --git a/src/status_im/events.cljs b/src/status_im/events.cljs index f4f20d0d87..203d170ce6 100644 --- a/src/status_im/events.cljs +++ b/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 diff --git a/src/status_im/hardwallet/core.cljs b/src/status_im/hardwallet/core.cljs index 1ef33fa9b9..3cdbce099d 100644 --- a/src/status_im/hardwallet/core.cljs +++ b/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] diff --git a/src/status_im/multiaccounts/core.cljs b/src/status_im/multiaccounts/core.cljs index 9672e5319e..0f191b5b6b 100644 --- a/src/status_im/multiaccounts/core.cljs +++ b/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 diff --git a/src/status_im/multiaccounts/create/core.cljs b/src/status_im/multiaccounts/create/core.cljs index f17eac0777..25ceb7a375 100644 --- a/src/status_im/multiaccounts/create/core.cljs +++ b/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 - :key :chat-stack - :actions [{:routeName :home}]}))) + (navigation/navigate-to-cofx :welcome nil))) (fx/defn init-key-generation [{:keys [db] :as cofx}] diff --git a/src/status_im/multiaccounts/db.cljs b/src/status_im/multiaccounts/db.cljs index ef27bd7bb0..f75d11342a 100644 --- a/src/status_im/multiaccounts/db.cljs +++ b/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 diff --git a/src/status_im/multiaccounts/login/core.cljs b/src/status_im/multiaccounts/login/core.cljs index 67b75bbf43..229b861b91 100644 --- a/src/status_im/multiaccounts/login/core.cljs +++ b/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]} diff --git a/src/status_im/ui/screens/home/styles.cljs b/src/status_im/ui/screens/home/styles.cljs index 01e4e3c9f8..289f517c26 100644 --- a/src/status_im/ui/screens/home/styles.cljs +++ b/src/status_im/ui/screens/home/styles.cljs @@ -88,33 +88,49 @@ (def no-chats {:flex 1 - :align-items :center - :justify-content :center - :padding-horizontal 34 - :align-self :stretch + :padding-top 16 + :padding-horizontal 16 :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 - :color colors/gray}) + {:font-size 15 + :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 - :margin-top 42}) + {:align-items :center}) (def welcome-text - {:typography :header - :margin-top 32 - :text-align :center}) + {:typography :header + :text-align :center}) + +(def welcome-blank-text + {:font-size 15 + :width 270 + :line-height 22 + :text-align :center + :color colors/gray}) (def welcome-text-description - {:margin-top 8 + {:margin-top 16 + :margin-bottom 32 :text-align :center - :margin-horizontal 32 + :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}) diff --git a/src/status_im/ui/screens/home/views.cljs b/src/status_im/ui/screens/home/views.cljs index 4c515b5fae..0e348eb4e2 100644 --- a/src/status_im/ui/screens/home/views.cljs +++ b/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 [] - [react/view {:style styles/welcome-view} - [react/view {:flex 1}] - [status-bar/status-bar {:type :main}] - [react/view {:style styles/welcome-image-container} - [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 52} - [components.common/button {:on-press #(re-frame/dispatch [:navigate-back]) - :label (i18n/label :t/get-started)}]]]) +(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 home-empty-view [] +(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} + [status-bar/status-bar {:type :main}] + [welcome-image-wrapper] + [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 {:align-items :center :margin-bottom 50} + [components.common/button {:on-press #(re-frame/dispatch [:navigate-back]) + :accessibility-label :lets-go-button + :label (i18n/label :t/lets-go)}]]]]) + +(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}] - [react/view {:align-items :center :margin-top 20} - [components.common/button {:on-press #(list-selection/open-share {:message (i18n/label :t/get-status-at)}) - :label (i18n/label :t/invite-friends)}]]]) + (if-not hide-home-tooltip? + [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)}) + :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]]]))) diff --git a/translations/en.json b/translations/en.json index de9c184de4..9d0a5f834a 100644 --- a/translations/en.json +++ b/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,9 +1077,10 @@ "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-description": "Here you can chat with people in a secure private chat, browse and interact with DApps.", - "word-count": "Word count", + "welcome-to-status": "Welcome to Status!", + "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.", "words-n": {