[#6718] restyle wallet onboarding flow

Signed-off-by: Goran Jovic <goranjovic@gmail.com>
This commit is contained in:
Bruce Hauman 2018-11-14 12:18:57 -05:00 committed by Goran Jovic
parent 72e7ae2fff
commit d5dde69af9
No known key found for this signature in database
GPG Key ID: D429D1A9B2EB8A8E
19 changed files with 202 additions and 145 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

View File

@ -61,6 +61,5 @@
:width 993
:height 933}
:wallet-welcome (js/require "./resources/images/ui/wallet-welcome.png")
:wallet-setup (js/require "./resources/images/ui/wallet-setup.png")
:hardwallet-card (js/require "./resources/images/ui/hardwallet-card.png")
:phone-nfc (js/require "./resources/images/ui/phone-nfc.png")})

View File

@ -33,7 +33,7 @@
[status-im.ui.screens.wallet.choose-recipient.views :refer [choose-recipient]]
[status-im.ui.screens.wallet.request.views :refer [request-transaction send-transaction-request]]
[status-im.ui.screens.wallet.components.views :as wallet.components]
[status-im.ui.screens.wallet.onboarding.setup.views :as wallet.onboarding.setup]
[status-im.ui.screens.wallet.onboarding.views :as wallet.onboarding]
[status-im.ui.screens.wallet.transaction-fee.views :as wallet.transaction-fee]
[status-im.ui.screens.wallet.settings.views :as wallet-settings]
[status-im.ui.screens.wallet.transactions.views :as wallet-transactions]
@ -194,7 +194,7 @@
:wallet-send-modal-stack-with-onboarding
{:screens
{:wallet-onboarding-setup-modal
[:modal wallet.onboarding.setup/modal]
[:modal wallet.onboarding/modal]
:wallet-send-transaction-modal
[:modal send-transaction-modal]
@ -222,7 +222,7 @@
(stack-screens
{:wallet (main-tabs/get-main-tab :wallet)
:collectibles-list collectibles-list
:wallet-onboarding-setup wallet.onboarding.setup/screen
:wallet-onboarding-setup wallet.onboarding/screen
:wallet-send-transaction-chat send-transaction
:contact-code contact-code
:send-transaction-stack {:screens {:wallet-send-transaction send-transaction

View File

@ -52,7 +52,7 @@
[toolbar/toolbar (utils.core/deep-merge {:style wallet.styles/toolbar}
props)
[toolbar/nav-button action]
[toolbar/content-title {:color :white}
[toolbar/content-title {:color :white :font-weight "700"}
title]
options]))

View File

@ -1,47 +0,0 @@
(ns status-im.ui.screens.wallet.onboarding.setup.styles
(:require [status-im.ui.components.colors :as colors]))
(def setup-image-container
{:align-items :center
:margin 41})
(def setup-image
{:width 151
:height 77})
(def signing-phrase
{:background-color colors/white
:border-radius 8
:margin-left 16
:margin-right 16
:flex-direction :row})
(def signing-word
{:flex 1
:height 52
:align-items :center
:justify-content :center})
(def signing-word-text
{:font-size 15
:letter-spacing -0.2})
(def description
{:font-size 14
:letter-spacing -0.2
:color colors/white
:margin-left 24
:margin-right 24
:margin-top 16
:text-align :center})
(def bottom-buttons
{:background-color colors/blue
:padding-vertical 8})
(def got-it-button-text
{:padding-horizontal 0})
(def modal
{:flex 1
:background-color colors/blue})

View File

@ -1,63 +0,0 @@
(ns status-im.ui.screens.wallet.onboarding.setup.views
(:require-macros [status-im.utils.views :as views])
(:require [clojure.string :as string]
[re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.react-native.resources :as resources]
[status-im.ui.components.react :as react]
[status-im.ui.components.styles :as components.styles]
[status-im.ui.screens.wallet.components.views :as wallet.components]
[status-im.ui.screens.wallet.onboarding.setup.styles :as styles]
[status-im.ui.components.bottom-buttons.view :as bottom-buttons]
[status-im.ui.components.button.view :as button]
[status-im.utils.utils :as utils]
[status-im.ui.components.toolbar.actions :as actions]
[status-im.ui.components.status-bar.view :as status-bar]))
(defn signing-word [word]
[react/view styles/signing-word
[react/text {:style styles/signing-word-text
:number-of-lines 1}
word]])
(defn display-confirmation [modal?]
(utils/show-question
(i18n/label :t/wallet-set-up-confirm-title)
(i18n/label :t/wallet-set-up-confirm-description)
#(re-frame/dispatch [:accounts.ui/wallet-set-up-confirmed modal?])))
(views/defview onboarding-panel [modal?]
(views/letsubs [{:keys [signing-phrase]} [:account/account]]
(let [signing-words (string/split signing-phrase #" ")
container (if modal? react/view wallet.components/simple-screen)
container-opts (if modal? components.styles/flex {:avoid-keyboard? true})]
[container container-opts
[wallet.components/toolbar
{}
(actions/back-white #(re-frame/dispatch [:wallet-setup-navigate-back]))
(i18n/label :t/wallet-set-up-title)]
[react/view components.styles/flex
[react/view {:style styles/setup-image-container}
[react/image {:source (:wallet-setup resources/ui)
:style styles/setup-image}]]
[react/view {:style styles/signing-phrase}
(for [word signing-words]
^{:key (str "signing-word-" word)}
[signing-word word])]
[react/text {:style styles/description}
(i18n/label :t/wallet-set-up-signing-phrase)]
[bottom-buttons/bottom-buttons styles/bottom-buttons
nil
[button/button {:on-press (partial display-confirmation modal?)
:text-style styles/got-it-button-text
:accessibility-label :done-button}
(i18n/label :t/got-it)
nil]]]])))
(views/defview screen []
[onboarding-panel false])
(views/defview modal []
[react/view styles/modal
[status-bar/status-bar {:type :modal-wallet}]
[onboarding-panel true]])

View File

@ -1,6 +1,69 @@
(ns status-im.ui.screens.wallet.onboarding.styles
(:require [status-im.ui.components.colors :as colors]))
(def border-top-justify
{:justify-content :space-between
:border-top-color colors/white-light-transparent
:border-top-width 1
:flex 1})
(def signing-phrase
{:background-color colors/white
:border-radius 8
:flex-direction :row})
(def signing-word
{:flex 1
:height 66
:border-left-color "#ECECF0"
:border-left-width 1
:align-items :center
:justify-content :center})
(def signing-word-text
{:font-size 15
:font-weight "600"
:color colors/black
:letter-spacing -0.2})
(def bottom-buttons
{:background-color colors/blue
:padding-vertical 8})
(def got-it-button-text
{:padding-horizontal 0})
(def modal
{:flex 1
:background-color colors/blue})
(def bottom-button-container
{:flex-direction :row,
:border-top-width 1
:background-color colors/blue
:border-top-color colors/white-light-transparent})
(def explanation-container
{:margin-top 40
:margin-left 2
:margin-right 2
:align-items :center})
(def super-safe-text
{:color colors/white
:margin-bottom 12
:font-size 22
:font-weight :bold})
(def super-safe-explainer-text
{:color colors/white
:text-align :center
:font-size 15
:line-height 22
:margin-bottom 30})
;; onboarding screen styles
(def root
{:flex 1
:background-color colors/blue
@ -40,4 +103,4 @@
:margin-bottom 32})
(def set-up-button-label
{:color "white"})
{:color colors/white})

View File

@ -1,11 +1,122 @@
(ns status-im.ui.screens.wallet.onboarding.views
(:require [re-frame.core :as re-frame]
(:require
[clojure.string :as string]
[re-frame.core :as re-frame]
[status-im.i18n :as i18n]
[status-im.react-native.resources :as resources]
[status-im.ui.components.button.view :as button]
[status-im.ui.components.colors :as colors]
[status-im.ui.components.common.common :as components.common]
[status-im.ui.components.icons.vector-icons :as vector-icons]
[status-im.ui.components.react :as react]
[status-im.ui.components.status-bar.view :as status-bar]
[status-im.ui.components.styles :as components.styles]
[status-im.ui.components.toolbar.actions :as actions]
[status-im.ui.screens.wallet.components.views :as wallet.components]
[status-im.ui.screens.wallet.onboarding.styles :as styles]
[status-im.react-native.resources :as resources]))
[status-im.utils.utils :as utils])
(:require-macros [status-im.utils.views :as views]))
(defn display-confirmation [on-accept]
(utils/show-confirmation
{:title (i18n/label :t/wallet-set-up-confirm-title)
:content (i18n/label :t/wallet-set-up-confirm-description)
:cancel-button-text (i18n/label :t/see-it-again)
:confirm-button-text (i18n/label :t/got-it)
:on-accept on-accept}))
(defn info-bubble [text]
;; keeping styles inline here as we are going to
;; want to move this somewhere for reuse.
[react/view {:style {:padding-top 10
:align-items :center}}
[react/view {:style {:align-items :center
:position :absolute
:top 0
:width 34
:zIndex 1
:background-color colors/blue}}
[vector-icons/icon :icons/info {:color colors/white}]]
[react/view
{:style {:border-color "rgba(255,255,255,0.6)"
:border-width 1
:border-radius 8
:padding-top 15
:padding-bottom 15
:padding-left 20
:padding-right 20
:align-items :center}}
[react/text
{:style {:color "rgba(255,255,255,0.6)"
:text-align :center
:font-size 15
:line-height 22}}
text]]])
(defn toolbar []
^{:key "toolbar"}
[wallet.components/toolbar
{}
(actions/back-white #(re-frame/dispatch [:wallet-setup-navigate-back]))
(i18n/label :t/wallet-set-up-title)])
(defn main-panel [signing-phrase on-confirm]
(let [signing-words (string/split signing-phrase #" ")]
^{:key "main-panel-view"}
[react/view {:style styles/border-top-justify}
[react/view] ;; crappy way to vertically center things
[react/view {:style {:padding-left 36 :padding-right 36}}
[react/view {:style styles/signing-phrase
:accessibility-label :signing-phrase}
(map
(fn [word container-style]
^{:key (str "signing-word-" word)}
[react/view container-style
[react/text {:style styles/signing-word-text
:number-of-lines 1}
word]])
signing-words
(cons
(dissoc styles/signing-word
:border-left-color
:border-left-width)
(repeat styles/signing-word))
(cons true (repeat false)))]
[react/view {:style styles/explanation-container}
[react/text {:style styles/super-safe-text}
(i18n/label :t/wallet-set-up-safe-transactions-title)]
[react/text
{:style styles/super-safe-explainer-text}
(i18n/label :t/wallet-set-up-signing-explainer)]
(info-bubble
(i18n/label :t/wallet-set-up-signing-explainer-warning))]]
[react/view {:style styles/bottom-button-container}
[button/button {:on-press on-confirm
:text-style styles/got-it-button-text
:style {:padding-vertical 9}
:accessibility-label :done-button
:fit-to-text? false}
(i18n/label :t/got-it)
nil]]]))
(views/defview screen []
(views/letsubs [{:keys [signing-phrase]} [:account/account]]
[wallet.components/simple-screen
{:avoid-keyboard? true}
(toolbar)
(main-panel
signing-phrase
(partial display-confirmation #(re-frame/dispatch [:accounts.ui/wallet-set-up-confirmed false])))]))
(views/defview modal []
(views/letsubs [{:keys [signing-phrase]} [:account/account]]
[react/view styles/modal
[status-bar/status-bar {:type :modal-wallet}]
[react/view components.styles/flex
(toolbar)
(main-panel
signing-phrase
(partial display-confirmation #(re-frame/dispatch [:accounts.ui/wallet-set-up-confirmed true])))]]))
(defn onboarding []
[react/view styles/root
@ -16,7 +127,6 @@
(i18n/label :t/wallet-onboarding-title)]
[react/text {:style styles/onboarding-text}
(i18n/label :t/wallet-onboarding-description)]
[components.common/button
{:button-style styles/set-up-button
:label-style styles/set-up-button-label

View File

@ -20,17 +20,17 @@ class TestWalletManagement(SingleDeviceTestCase):
if not wallet.element_by_text(text).is_element_displayed():
self.errors.append("'%s' is not displayed" % text)
wallet.set_up_button.click()
text = ("To increase security, we'll show you this phrase each time you initiate a transaction. "
"When you see then you'll know it's safe to proceed. \n\n"
"Memorize or store these words in a secure location. Only confirm transactions if you see them first.")
if not wallet.element_by_text(text).is_element_displayed():
texts = ['Super-safe transactions', 'You should see these three words before signing each transaction',
'If you see a different combo, cancel the transaction and logout.']
for text in texts:
if not wallet.element_by_text_part(text).is_element_displayed():
self.errors.append("'%s' text is not displayed" % text)
phrase_length = len(wallet.sign_in_phrase.list)
if phrase_length != 3:
self.errors.append('Transaction phrase length is %s' % phrase_length)
wallet.done_button.click()
for text in ['Wrote it down?', 'You wont be able to see your 3-word transaction phrase again after this.']:
for text in ['Remember this!', "You'll need to recognize this to ensure your "
"transactions are safe. This combo is not stored in your account."]:
if not wallet.element_by_text(text).is_element_displayed():
self.errors.append("'%s' text is not displayed" % text)
wallet.yes_button.click()

View File

@ -55,7 +55,7 @@ class DeleteButton(BaseButton):
class YesButton(BaseButton):
def __init__(self, driver):
super(YesButton, self).__init__(driver)
self.locator = self.Locator.xpath_selector("//*[@text='YES']")
self.locator = self.Locator.xpath_selector("//*[@text='YES' or @text='GOT IT']")
class NoButton(BaseButton):

View File

@ -129,8 +129,7 @@ class SetUpButton(BaseButton):
class SignInPhraseText(BaseText):
def __init__(self, driver):
super(SignInPhraseText, self).__init__(driver)
self.locator = self.Locator.xpath_selector(
"//*[contains(@text,'phrase')]/preceding-sibling::*[1]/android.widget.TextView")
self.locator = self.Locator.xpath_selector('//*[@content-desc="signing-phrase"]//android.widget.TextView')
@property
def list(self):

View File

@ -50,7 +50,7 @@
"view-etheremon": "View in Etheremon",
"wallet-transaction-fee-details": "Gas limit caps the units of gas spent on the transaction. Gas price sets the price per unit of gas. Increasing gas price can make your transaction faster.",
"leave-group": "Leave group",
"wallet-set-up-confirm-description": "You wont be able to see your 3-word transaction phrase again after this.",
"wallet-set-up-confirm-description": "You'll need to recognize this to ensure your transactions are safe. This combo is not stored in your account.",
"debug-enabled": "Debug server has been launched! You can now execute *status-dev-cli scan* to find the server from your computer on the same network.",
"recovery-phrase-unknown-words": "Some words might be misspelled",
"chat-settings": "Chat settings",
@ -176,6 +176,7 @@
"search-chat": "Search chat",
"currency-display-name-ars": "Argentine Peso",
"got-it": "Got it",
"see-it-again": "See it again",
"delete-group-confirmation": "This group will be removed from your groups. This will not affect your contacts",
"leave-group-chat": "Leave group chat",
"public-chats": "Public chats",
@ -437,7 +438,9 @@
"delete-chat-title": "Delete chat?",
"success": "Success",
"specify-bootnode-address": "Specify bootnode address",
"wallet-set-up-signing-phrase": "To increase security, we'll show you this phrase each time you initiate a transaction. When you see then you'll know it's safe to proceed. \n\nMemorize or store these words in a secure location. Only confirm transactions if you see them first.",
"wallet-set-up-safe-transactions-title": "Super-safe transactions",
"wallet-set-up-signing-explainer": "You should see these three words before signing each transaction",
"wallet-set-up-signing-explainer-warning": "If you see a different combo, cancel the transaction and logout.",
"currency-display-name-thb": "Thailand Baht",
"transactions-filter-type": "Type",
"next": "Next",
@ -476,7 +479,7 @@
"transactions-sign": "Sign",
"decryption-failed-confirm": "Apply",
"show-less": "Show less",
"wallet-set-up-confirm-title": "Wrote it down?",
"wallet-set-up-confirm-title": "Remember this!",
"sharing-share": "Share...",
"at": "at",
"off": "Off",

View File

@ -674,7 +674,6 @@
"wallet-send-token": "Enviar {{symbol}}",
"wallet-set-up-confirm-description": "No podrás volver a ver tu frase de transacción de 3 palabras después de esto.",
"wallet-set-up-confirm-title": "¿Lo escribiste?",
"wallet-set-up-signing-phrase": "Para aumentar la seguridad, te mostraremos esta frase cada vez que inicies una transacción. Cuando la veas, sabrás que es seguro proceder.\n\nMemoriza o guarda estas palabras en un lugar seguro. Sólo confirma las transacciones si primero las ves .",
"wallet-set-up-title": "Configura tu billetera",
"wallet-settings": "Ajustes de billetera",
"wallet-total-value": "Valor total",

View File

@ -680,7 +680,6 @@
"wallet-send-token": "ارسال {{symbol}}",
"wallet-set-up-confirm-description": "پس از این شما قادر به دیدن مجدد این سه کلمه نخواهید بود",
"wallet-set-up-confirm-title": "آیا روی کاغذ نوشته اید؟",
"wallet-set-up-signing-phrase": "به منظور افزایش سطح امنیت، هر باری که تراکنشی ایجاد می کنید کلماتی را به شما نشان خواهیم داد و زمانی که کلمات نشان داده شده در تراکنش با کلمات بالا مطابقت داشت برای ادامه ی تراکنش مطمئن خواهید شد.\n\nاین کلمه ها را به خاطر بسپارید یا روی کاغذ بنویسید و در مکان امنی نگه داری کنید. تنها زمانی تراکنش ها را تایید کنید که این کلمات به شما نشان داده شده است.",
"wallet-set-up-title": "کیف پول خود را تنظیم کنید",
"wallet-settings": "تنظیمات کیف پول",
"wallet-total-value": "موجودی",

View File

@ -698,7 +698,6 @@
"wallet-send-token": "{{symbol}} 보내기",
"wallet-set-up-confirm-description": "3 단어 거래 구문을 앞으로 다시 볼 수 없습니다.",
"wallet-set-up-confirm-title": "백업하셨나요?",
"wallet-set-up-signing-phrase": "보안을 위해서 입출금을 할 때마다 이 구문이 표시됩니다. 이 문구를 확인하게 되면, 거래를 진행해도 좋습니다.\n\n이 단어들을 안전한 장소에 보관하거나 암기하십시오. 반드시 문구를 확인 한 후에 거래를 진행하십시오.",
"wallet-set-up-title": "지갑 설정",
"wallet-settings": "지갑 설정",
"wallet-total-value": "총 자산",

View File

@ -699,7 +699,6 @@
"wallet-send-token": "Hantar {{symbol}}",
"wallet-set-up-confirm-description": "Anda tidak akan dapat melihat frasa transaksi tiga perkataan anda selepas ini.",
"wallet-set-up-confirm-title": "Telah menulisnya?",
"wallet-set-up-signing-phrase": "Untuk meningkatkan keselamatan, kami akan menunjukkan frasa ini setiap kali anda memulakan transaksi. Apabila anda melihatnya maka anda akan tahu bahawa ia adalah selamat untuk diteruskan. \n\nHafal atau simpan perkataan-perkataan ini di lokasi yang selamat. Hanya sahkan transaksi jika anda melihatnya terlebih dahulu.",
"wallet-set-up-title": "Sediakan dompet anda",
"wallet-settings": "Tetapan dompet",
"wallet-total-value": "Jumlah nilai",

View File

@ -657,7 +657,6 @@
"wallet-send-token": "Wyślij {{symbol}}",
"wallet-set-up-confirm-description": "Po tym nie zobaczysz ponownie 3-słownej frazy transakcji.",
"wallet-set-up-confirm-title": "Zapisane?",
"wallet-set-up-signing-phrase": "Aby zwiększyć bezpieczeństwo, będziemy pokazywać Ci te słowa za każdym razem, gdy zainicjujesz transakcję. Gdy je zobaczysz, będziesz wiedział, że możesz bezpiecznie kontynuować. \n\nZapamiętaj lub zapisz te słowa w bezpiecznym miejscu. Potwierdź transakcje tylko wtedy, gdy je zobaczysz. ",
"wallet-set-up-title": "Skonfiguruj portfel",
"wallet-settings": "Ustawienia portfela",
"wallet-total-value": "Całkowita wartość",

View File

@ -696,7 +696,6 @@
"wallet-send-token": "Отправить {{symbol}}",
"wallet-set-up-confirm-description": "После закрытия этого окна вы больше не сможете увидеть эту фразу подписи",
"wallet-set-up-confirm-title": "Записали?",
"wallet-set-up-signing-phrase": "Для повышения безопасности, вы будем показывать эту фразу каждый раз когда Вы будете начинать транзакцию. Таким образом, когда вы ее увидите, то поймете что продолжать безопасно.\nЗапомните, или сохраните эти слова в безопасном месте. Подтверждайте транзакции только если увидели их",
"wallet-set-up-title": "Настройте свой кошелек",
"wallet-settings": "Настройки кошелька",
"wallet-total-value": "Общая стоимость",

View File

@ -699,7 +699,6 @@
"wallet-send-token": "发送{{symbol}}",
"wallet-set-up-confirm-description": "在此之后, 您将无法再次查看你的3字交易记录短语。",
"wallet-set-up-confirm-title": "写下来了?",
"wallet-set-up-signing-phrase": "为了提高安全性,在您每次启动交易时我们会向您显示此短语。当你看到时你应明白继续执行是安全的。 \n\n将这些单词记下或存储在安全的地方。如果您先看到交易只需确认交易。",
"wallet-set-up-title": "设置钱包",
"wallet-settings": "钱包设置",
"wallet-total-value": "总值",