Update your keys screen

Fixes #9782

Change theme of new key action

Update translations

Fix e2e tests

Signed-off-by: Gheorghe Pinzaru <feross95@gmail.com>

src/status_im/ui/screens/multiaccounts/login/views.cljs

@@ -7,8 +7,6 @@
             [status-im.ui.components.common.common :as components.common]
             [status-im.ui.components.react :as react]
             [status-im.ui.components.text-input.view :as text-input]
-            [status-im.ui.components.toolbar.actions :as act]
-            [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.ui.screens.chat.photos :as photos]
             [status-im.ui.screens.multiaccounts.login.styles :as styles]
             [status-im.ui.screens.multiaccounts.styles :as ast]

src/status_im/ui/screens/multiaccounts/sheets.cljs

@@ -0,0 +1,13 @@
+(ns status-im.ui.screens.multiaccounts.sheets
+  (:require [status-im.ui.components.list-item.views :as list-item]
+            [status-im.ui.components.react :as react]
+            [re-frame.core :as re-frame]))
+
+(defn actions-sheet []
+  [react/view
+   [list-item/list-item {:theme    :action
+                         :on-press #(do (re-frame/dispatch [:bottom-sheet/hide])
+                                        (re-frame/dispatch [:multiaccounts.create.ui/intro-wizard false]))
+                         :icon     :main-icons/add
+                         :accessibility-label :generate-a-new-key
+                         :title    :t/generate-a-new-key}]])

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

@@ -8,7 +8,6 @@
 (def multiaccounts-container
   {:flex               1
    :margin-top         24
-   :margin-bottom      16
    :justify-content    :space-between})
 
 (def bottom-actions-container
@@ -51,5 +50,10 @@
    :flex-direction     :row})
 
 (def bottom-button-container
-  {:margin-top    14
+  {:flex-direction     :row
-   :margin-bottom 6})
+   :padding-horizontal 12
+   :padding-vertical   8
+   :border-top-width   1
+   :border-top-color   colors/gray-lighter
+   :justify-content    :center
+   :align-items        :center})

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

@@ -1,18 +1,16 @@
 (ns status-im.ui.screens.multiaccounts.views
   (:require-macros [status-im.utils.views :refer [defview letsubs]])
-  (:require [clojure.string :as string]
+  (:require [re-frame.core :as re-frame]
-            [re-frame.core :as re-frame]
             [status-im.ui.screens.chat.photos :as photos]
             [status-im.ui.screens.multiaccounts.styles :as styles]
-            [status-im.utils.utils :as utils]
             [status-im.ui.components.list.views :as list]
             [status-im.ui.components.react :as react]
             [status-im.i18n :as i18n]
             [status-im.ui.components.icons.vector-icons :as icons]
             [status-im.ui.components.colors :as colors]
-            [status-im.ui.components.common.common :as components.common]
+            [status-im.ui.components.topbar :as topbar]
-            [status-im.ui.components.toolbar.view :as toolbar]
+            [status-im.ui.components.button :as button]
-            [status-im.ui.screens.privacy-policy.views :as privacy-policy]
+            [status-im.ui.screens.multiaccounts.sheets :as sheets]
             [status-im.react-native.resources :as resources]))
 
 (defn multiaccount-view
@@ -50,18 +48,18 @@
 (defview multiaccounts []
   (letsubs [multiaccounts [:multiaccounts/multiaccounts]]
     [react/view styles/multiaccounts-view
-     [react/text {:style {:typography :header :margin-top 24 :text-align :center}}
+     [topbar/topbar {:show-border? true
-      (i18n/label :t/unlock)]
+                     :navigation   :none
+                     :title        (i18n/label :t/your-keys)
+                     :accessories  [{:icon    :more
+                                     :accessibility-label :your-keys-more-icon
+                                     :handler #(re-frame/dispatch [:bottom-sheet/show-sheet {:content sheets/actions-sheet}])}]}]
      [react/view styles/multiaccounts-container
       [react/view styles/multiaccounts-list-container
        [list/flat-list {:data      (vals multiaccounts)
                         :key-fn    :address
                         :render-fn (fn [multiaccount] [multiaccount-view multiaccount])}]]
-      [react/view
+      [react/view {:style styles/bottom-button-container}
-       [components.common/button {:on-press #(re-frame/dispatch [:multiaccounts.create.ui/intro-wizard false])
+       [button/button {:on-press #(re-frame/dispatch [:multiaccounts.recover.ui/recover-multiaccount-button-pressed])
-                                  :button-style styles/bottom-button
+                       :type     :secondary
-                                  :label    (i18n/label :t/generate-a-new-key)}]
+                       :label    (i18n/label :t/access-key)}]]]]))
-       [react/view styles/bottom-button-container
-        [components.common/button {:on-press    #(re-frame/dispatch [:multiaccounts.recover.ui/recover-multiaccount-button-pressed])
-                                   :label       (i18n/label :t/access-key)
-                                   :background? false}]]]]]))

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

@@ -22,6 +22,7 @@ class TestCreateAccount(SingleDeviceTestCase):
         if sign_in.ok_button.is_element_displayed():
             sign_in.ok_button.click()
         sign_in.back_button.click()
+        sign_in.your_keys_more_icon.click()
         sign_in.generate_new_key_button.click()
         sign_in.generate_key_button.click()
         sign_in.next_button.click()

test/appium/views/base_view.py

@@ -316,7 +316,7 @@ class AirplaneModeButton(BaseButton):
         action = TouchAction(self.driver)
         action.press(None, 50, 0).move_to(None, 50, 300).perform()
         super(AirplaneModeButton, self).click()
-        action.press(None, 50, 900).move_to(None, 50, 0).perform()
+        self.driver.press_keycode(4)
 
 
 class BaseView(object):
@@ -370,7 +370,7 @@ class BaseView(object):
     def accept_agreements(self):
         iterations = int()
         self.close_native_device_dialog("Messages")
-        self.close_native_device_dialog("Youtube")
+        self.close_native_device_dialog("YouTube")
         while iterations <= 1 and (self.ok_button.is_element_displayed(2) or
                                    self.continue_button.is_element_displayed(2)):
             for button in self.ok_button, self.continue_button:

test/appium/views/sign_in_view.py

@@ -79,6 +79,12 @@ class CreateMultiaccountButton(BaseButton):
             "//*[@text='Create multiaccount' or @text='Create new multiaccount']")
 
 
+class YourKeysMoreIcon(BaseButton):
+    def __init__(self, driver):
+        super(YourKeysMoreIcon, self).__init__(driver)
+        self.locator = self.Locator.accessibility_id("your-keys-more-icon")
+
+
 class GenerateKeyButton(BaseButton):
     def __init__(self, driver):
         super(GenerateKeyButton, self).__init__(driver)
@@ -88,7 +94,7 @@ class GenerateKeyButton(BaseButton):
 class GenerateNewKeyButton(BaseButton):
     def __init__(self, driver):
         super(GenerateNewKeyButton, self).__init__(driver)
-        self.locator = self.Locator.xpath_selector("//*[@text='Generate keys']")
+        self.locator = self.Locator.accessibility_id('generate-a-new-key')
 
 
 class IHaveMultiaccountButton(RecoverAccessButton):
@@ -100,7 +106,7 @@ class IHaveMultiaccountButton(RecoverAccessButton):
 class AccessKeyButton(RecoverAccessButton):
     def __init__(self, driver):
         super(AccessKeyButton, self).__init__(driver)
-        self.locator = self.Locator.xpath_selector("//*[@text='Access existing keys']")
+        self.locator = self.Locator.xpath_selector("//*[@text='Access key']")
 
 
 class MaybeLaterButton(BaseButton):
@@ -174,6 +180,7 @@ class SignInView(BaseView):
         self.i_have_multiaccount_button = IHaveMultiaccountButton(self.driver)
         self.access_key_button = AccessKeyButton(self.driver)
         self.generate_key_button = GenerateKeyButton(self.driver)
+        self.your_keys_more_icon = YourKeysMoreIcon(self.driver)
         self.generate_new_key_button = GenerateNewKeyButton(self.driver)
         self.add_existing_multiaccount_button = AddExistingMultiaccountButton(self.driver)
         self.confirm_password_input = ConfirmPasswordInput(self.driver)
@@ -200,10 +207,6 @@ class SignInView(BaseView):
         return self.get_home_view()
 
     def recover_access(self, passphrase: str, password: str = common_password):
-        if self.other_multiaccounts_button.is_element_displayed():
-            self.other_multiaccounts_button.click()
-            recover_access_view = self.add_existing_multiaccount_button.click()
-        else:
         recover_access_view = self.access_key_button.click()
         recover_access_view.enter_seed_phrase_button.click()
         recover_access_view.passphrase_input.click()

translations/en.json

@@ -4,7 +4,7 @@
     "about-key-storage-title": "About key storage",
     "about-names-content": "No one can pretend to be you! You’re anonymous by default and never have to reveal your real name. You can register a custom name for a small fee.",
     "about-names-title": "Names can’t be changed",
-    "access-key": "Access existing keys",
+    "access-key": "Access key",
     "accept-and-share-address": "Accept and share address",
     "account-added": "Account added",
     "account-color": "Account color",
@@ -485,9 +485,10 @@
     "gas-used": "Gas used",
     "generate-a-key": "Generate keys",
     "generate-a-new-account": "Generate keys",
-    "generate-a-new-key": "Generate keys",
+    "generate-a-new-key": "Generate a new key",
     "generate-account": "Generate keys",
     "generate-new-key": "Generate keys",
+    "your-keys": "Your keys",
     "generating-codes-for-pairing": "> Downloading product software to card\n > Generating unlocking & pairing codes",
     "generating-keys": "Generating keys...",
     "you-will-need-this-code": "You'll need this code to open Status and sign transactions",