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>
This commit is contained in:
elegant651
Andrey Shovkoplyas
parent
fcbe277cf4
commit
7b14bbecde
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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}]
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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]}
|
||||
|
|
|
|||
|
|
@ -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})
|
||||
|
|
|
|||
|
|
@ -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]]])))
|
||||
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
Loading…
Reference in New Issue