Update create profile and sign in screen

src/status_im/common/resources.cljs

@@ -17,6 +17,7 @@
    :generate-keys1                (js/require "../resources/images/ui2/generating-keys-1.png")
    :ethereum-address              (js/require "../resources/images/ui2/ethereum-address.png")
    :use-keycard                   (js/require "../resources/images/ui2/keycard.png")
+   :use-recovery-phrase           (js/require "../resources/images/ui2/recovery-phrase.png")
    :check-your-keycard            (js/require "../resources/images/ui2/check-your-keycard.png")
    :onboarding-illustration       (js/require "../resources/images/ui2/onboarding_illustration.png")
    :qr-code                       (js/require "../resources/images/ui2/qr-code.png")

src/status_im/contexts/onboarding/create_or_sync_profile/style.cljs

@@ -3,11 +3,7 @@
     [quo.foundations.colors :as colors]))
 
 (def content-container
-  {:position :absolute
+  {:flex 1})
-   :top      0
-   :bottom   0
-   :left     0
-   :right    0})
 
 (def options-container
   {:padding-top        12

src/status_im/contexts/onboarding/create_or_sync_profile/view.cljs

@@ -6,6 +6,7 @@
     [react-native.safe-area :as safe-area]
     [status-im.common.check-before-syncing.view :as check-before-syncing]
     [status-im.common.metrics-confirmation-modal.view :as metrics-modal]
+    [status-im.common.not-implemented :as not-implemented]
     [status-im.common.resources :as resources]
     [status-im.config :as config]
     [status-im.contexts.onboarding.create-or-sync-profile.style :as style]
@@ -35,7 +36,7 @@
                       {:on-submit navigate-to-sign-in-by-syncing}])
      :shell?  true}]))
 
-(defn- navigate-to-sign-in-by-seed-phrase
+(defn- navigate-to-sign-in-by-recovery-phrase
   [create-profile?]
   (rf/dispatch [:syncing/clear-syncing-fallback-flow])
   (rf/dispatch [:onboarding/navigate-to-sign-in-by-seed-phrase
@@ -43,6 +44,11 @@
                   :screen/onboarding.new-to-status
                   :screen/onboarding.sync-or-recover-profile)]))
 
+(defn- check-your-keycard
+  []
+  (rf/dispatch [:open-modal :screen/keycard.check
+                {:on-press #(rf/dispatch [:keycard.login/check-card])}]))
+
 (defn- option-card-max-height
   [window-height]
   (- window-height
@@ -50,75 +56,95 @@
      (* 2 16) ;; spacing between items
      220)) ;; extra spacing (top bar)
 
-
+(defn- start-fresh-main-card
-(defn- create-profile-option-card
   [window-height]
   [quo/small-option-card
    {:variant             :main
-    :title               (i18n/label :t/generate-keys)
+    :title               (i18n/label :t/start-fresh)
-    :subtitle            (i18n/label :t/generate-keys-subtitle)
+    :subtitle            (i18n/label :t/start-fresh-subtitle)
     :button-label        (i18n/label :t/lets-go)
-    :accessibility-label :generate-key-option-card
+    :accessibility-label :start-fresh-main-card
     :image               (resources/get-image :generate-keys)
     :max-height          (option-card-max-height window-height)
     :on-press            navigate-to-create-profile}])
 
-(defn- sync-profile-option-card
+(defn- log-in-with-recovery-phrase-main-card
   [window-height]
   [quo/small-option-card
    {:variant             :main
-    :title               (i18n/label :t/sign-in-by-syncing)
+    :title               (i18n/label :t/log-in-with-recovery-phrase)
-    :subtitle            (i18n/label :t/if-you-have-status-on-another-device)
+    :subtitle            (i18n/label :t/log-in-with-recovery-phrase-subtitle)
-    :button-label        (i18n/label :t/scan-sync-code)
+    :button-label        (i18n/label :t/use-recovery-phrase)
-    :accessibility-label :scan-sync-code-option-card
+    :accessibility-label :log-in-with-recovery-phrase-main-card
-    :image               (resources/get-image :generate-keys)
+    :image               (resources/get-image :use-recovery-phrase)
     :max-height          (option-card-max-height window-height)
+    :on-press            #(navigate-to-sign-in-by-recovery-phrase false)}])
+
+(defn- use-recovery-phrase-icon-card
+  []
+  [quo/small-option-card
+   {:variant             :icon
+    :title               (i18n/label :t/use-a-recovery-phrase)
+    :subtitle            (i18n/label :t/use-a-recovery-phrase-subtitle)
+    :accessibility-label :use-a-recovery-phrase-icon-card
+    :image               (resources/get-image :ethereum-address)
+    :on-press            #(navigate-to-sign-in-by-recovery-phrase true)}])
+
+(defn- use-empty-keycard-icon-card
+  []
+  [quo/small-option-card
+   {:variant             :icon
+    :title               (i18n/label :t/use-an-empty-keycard)
+    :subtitle            (i18n/label :t/use-an-empty-keycard-subtitle)
+    :accessibility-label :use-an-empty-keycard-icon-card
+    :image               (resources/get-image :use-keycard)
+    :on-press            status-im.common.not-implemented/alert}])
+
+(defn- log-in-by-syncing-icon-card
+  []
+  [quo/small-option-card
+   {:variant             :icon
+    :title               (i18n/label :t/log-in-by-syncing)
+    :subtitle            (i18n/label :t/log-in-by-syncing-subtitle)
+    :accessibility-label :log-in-by-syncing-icon-card
+    :image               (resources/get-image :ethereum-address)
     :on-press            show-check-before-syncing}])
 
+(defn- log-in-with-keycard-icon-card
+  []
+  [quo/small-option-card
+   {:variant             :icon
+    :title               (i18n/label :t/log-in-with-keycard)
+    :subtitle            (i18n/label :t/log-in-with-keycard-subtitle)
+    :accessibility-label :log-in-with-keycard
+    :image               (resources/get-image :use-keycard)
+    :on-press            check-your-keycard}])
+
 (defn sign-in-options
-  [sign-in-type]
+  [create-profile?]
-  (let [window-height                      (rf/sub [:dimensions/window-height])
+  (let [window-height (rf/sub [:dimensions/window-height])]
-        create-profile?                    (= sign-in-type :create-profile)
-        nav-to-seed-phrase-with-cur-screen (rn/use-callback
-                                            #(navigate-to-sign-in-by-seed-phrase
-                                              create-profile?)
-                                            [create-profile?])
-        main-option-card                   (if create-profile?
-                                             create-profile-option-card
-                                             sync-profile-option-card)]
     [rn/view {:style style/options-container}
      [quo/text
       {:style  style/title
        :size   :heading-1
        :weight :semi-bold}
-      (i18n/label (if create-profile? :t/create-profile :t/sync-or-recover-profile))]
+      (i18n/label (if create-profile? :t/create-profile :t/log-in))]
-     [main-option-card window-height]
+     (if create-profile?
+       [start-fresh-main-card window-height]
+       [log-in-with-recovery-phrase-main-card window-height])
      [rn/view {:style style/subtitle-container}
       [quo/text
        {:style  style/subtitle
         :size   :paragraph-2
         :weight :medium}
-       (i18n/label (if create-profile? :t/experienced-web3 :t/dont-have-statatus-on-another-device))]]
+       (i18n/label :t/other-options)]]
-     [rn/view
+     (if create-profile?
-      [quo/small-option-card
+       [use-recovery-phrase-icon-card]
-       {:variant             :icon
+       [log-in-by-syncing-icon-card])
-        :title               (i18n/label :t/use-recovery-phrase)
-        :subtitle            (i18n/label :t/use-recovery-phrase-subtitle)
-        :accessibility-label :use-recovery-phrase-option-card
-        :image               (resources/get-image :ethereum-address)
-        :on-press            nav-to-seed-phrase-with-cur-screen}]
      [rn/view {:style style/space-between-suboptions}]
-      [quo/small-option-card
+     (if create-profile?
-       {:variant             :icon
+       [use-empty-keycard-icon-card]
-        :title               (i18n/label :t/use-keycard)
+       [log-in-with-keycard-icon-card])]))
-        :subtitle            (i18n/label :t/profile-keys-on-keycard)
-        :accessibility-label :use-keycard-option-card
-        :image               (resources/get-image :use-keycard)
-        :on-press            (fn []
-                               (rf/dispatch [:open-modal :screen/keycard.check
-                                             {:on-press
-                                              #(rf/dispatch
-                                                [:keycard.login/check-card])}]))}]]]))
 
 (defn- navigate-back
   []
@@ -145,7 +171,7 @@
                     (when config/quo-preview-enabled?
                       {:icon-name :i/reveal-whitelist
                        :on-press  navigate-to-quo-preview})]}]
-     [sign-in-options sign-in-type]]))
+     [sign-in-options (= sign-in-type :create-profile)]]))
 
 (defn create-profile
   []

translations/en.json

@@ -1087,7 +1087,6 @@
   "generate-account": "Generate keys",
   "generate-an-account": "Generate an account",
   "generate-keys": "Generate keys",
-  "generate-keys-subtitle": "Create your new self-sovereign identity",
   "generate-new-key": "Generate keys",
   "generate-new-keypair": "Generate new key pair",
   "generate-scan-sync-code": "Generate Scan Sync Code",
@@ -1467,6 +1466,12 @@
   "local-pairing-experimental-mode": "Local Pairing Mode (alpha)",
   "lock-app-with": "Lock app with",
   "log-in": "Log in",
+  "log-in-by-syncing": "Log in by syncing",
+  "log-in-by-syncing-subtitle": "If you have your profile on another device",
+  "log-in-with-keycard": "Log in with Keycard",
+  "log-in-with-keycard-subtitle": "If your profile keys are stored on a Keycard",
+  "log-in-with-recovery-phrase": "Log in with recovery phrase",
+  "log-in-with-recovery-phrase-subtitle": "If you have your Status recovery phrase",
   "log-level": "Log level",
   "log-level-settings": "Log level settings",
   "log-out-remove": "Log out & Remove profile",
@@ -1863,6 +1868,7 @@
   "origin-desc": "Origin is where your key pair (your private and public key) comes from. You can generate a new key pair or import an existing private key.",
   "origin-header": "Origin",
   "os-app-version-bandwidth": "OS, app version and bandwidth usage",
+  "other-options": "Other options",
   "outgoing": "Outgoing",
   "outgoing-transaction": "Outgoing transaction",
   "overview": "Overview",
@@ -2410,6 +2416,8 @@
   "spending-cap-set": "Spending cap set: {{token-amount}} {{token-symbol}} for {{provider-name}} in {{account-name}}",
   "start-chat": "Start chat",
   "start-conversation": "Start conversation",
+  "start-fresh": "Start fresh",
+  "start-fresh-subtitle": "Create a new profile from scratch",
   "start-group-chat": "Start group chat",
   "start-new-chat": "Start new chat",
   "start-using-status": "Start using Status",
@@ -2690,6 +2698,10 @@
   "url": "URL",
   "usage-data-shared-from-all-profiles": "Usage data will be shared from all profiles added to device. ",
   "usd-currency": "USD",
+  "use-a-recovery-phrase": "Use a recovery phrase",
+  "use-a-recovery-phrase-subtitle": "If you already have an Ethereum wallet",
+  "use-an-empty-keycard": "Use an empty Keycard",
+  "use-an-empty-keycard-subtitle": "Store your new profile keys on Keycard",
   "use-as-profile-picture": "Use as profile picture",
   "use-biometrics": "Use biometrics to fill in your password",
   "use-keycard": "Use Keycard",
@@ -2699,7 +2711,6 @@
   "use-keycard-subtitle": "Keys will be stored on your Keycard",
   "use-photo": "Use Photo",
   "use-recovery-phrase": "Use recovery phrase",
-  "use-recovery-phrase-subtitle": "If you already have an Ethereum address",
   "use-the-multichain-wallet": "Use the leading multi-chain self-custodial wallet",
   "use-valid-contact-code": "Please enter or scan a valid chat key or username",
   "user-blocked": "{{username}} blocked",