[#6718] restyle wallet onboarding flow

Signed-off-by: Goran Jovic <goranjovic@gmail.com>

src/status_im/react_native/resources.cljs

@@ -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")})

src/status_im/ui/screens/views.cljs

@@ -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

src/status_im/ui/screens/wallet/components/views.cljs

@@ -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]))
 

src/status_im/ui/screens/wallet/onboarding/setup/styles.cljs

@@ -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})

src/status_im/ui/screens/wallet/onboarding/setup/views.cljs

@@ -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]])

src/status_im/ui/screens/wallet/onboarding/styles.cljs

@@ -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})

src/status_im/ui/screens/wallet/onboarding/views.cljs

@@ -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

test/appium/tests/atomic/account_management/test_wallet_management.py

@@ -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. "
+        texts = ['Super-safe transactions', 'You should see these three words before signing each transaction',
-                "When you see then you'll know it's safe to proceed. \n\n"
+                 'If you see a different combo, cancel the transaction and logout.']
-                "Memorize or store these words in a secure location. Only confirm transactions if you see them first.")
+        for text in texts:
-
+            if not wallet.element_by_text_part(text).is_element_displayed():
-        if not wallet.element_by_text(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 won’t 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()

test/appium/views/base_view.py

@@ -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):

test/appium/views/wallet_view.py

@@ -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(
+        self.locator = self.Locator.xpath_selector('//*[@content-desc="signing-phrase"]//android.widget.TextView')
-            "//*[contains(@text,'phrase')]/preceding-sibling::*[1]/android.widget.TextView")
 
     @property
     def list(self):

translations/en.json

@@ -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 won’t 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",

translations/es_419.json

@@ -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",

translations/fa.json

@@ -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": "موجودی",

translations/ko.json

@@ -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": "총 자산",

translations/ms.json

@@ -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",

translations/pl.json

@@ -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ść",

translations/ru.json

@@ -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": "Общая стоимость",

translations/zh_Hans_CN.json

@@ -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": "总值",