diff --git a/resources/images/ui2/ethereum-address@2x.png b/resources/images/ui2/ethereum-address@2x.png index af75072cc0..3672fbe46d 100644 Binary files a/resources/images/ui2/ethereum-address@2x.png and b/resources/images/ui2/ethereum-address@2x.png differ diff --git a/resources/images/ui2/ethereum-address@3x.png b/resources/images/ui2/ethereum-address@3x.png index cc75e31397..6535af62b5 100644 Binary files a/resources/images/ui2/ethereum-address@3x.png and b/resources/images/ui2/ethereum-address@3x.png differ diff --git a/resources/images/ui2/keycard@2x.png b/resources/images/ui2/keycard@2x.png index c7f3dbe34c..a625083d66 100644 Binary files a/resources/images/ui2/keycard@2x.png and b/resources/images/ui2/keycard@2x.png differ diff --git a/resources/images/ui2/keycard@3x.png b/resources/images/ui2/keycard@3x.png index 4358540bb8..7c77418ae8 100644 Binary files a/resources/images/ui2/keycard@3x.png and b/resources/images/ui2/keycard@3x.png differ diff --git a/resources/images/ui2/recovery-phrase@2x.png b/resources/images/ui2/recovery-phrase@2x.png new file mode 100644 index 0000000000..382d213c18 Binary files /dev/null and b/resources/images/ui2/recovery-phrase@2x.png differ diff --git a/resources/images/ui2/recovery-phrase@3x.png b/resources/images/ui2/recovery-phrase@3x.png new file mode 100644 index 0000000000..7d74055619 Binary files /dev/null and b/resources/images/ui2/recovery-phrase@3x.png differ diff --git a/src/status_im/common/resources.cljs b/src/status_im/common/resources.cljs index 6755665c79..420346921c 100644 --- a/src/status_im/common/resources.cljs +++ b/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") diff --git a/src/status_im/contexts/onboarding/create_or_sync_profile/style.cljs b/src/status_im/contexts/onboarding/create_or_sync_profile/style.cljs index 4b82753b00..0e853beebc 100644 --- a/src/status_im/contexts/onboarding/create_or_sync_profile/style.cljs +++ b/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 - :top 0 - :bottom 0 - :left 0 - :right 0}) + {:flex 1}) (def options-container {:padding-top 12 diff --git a/src/status_im/contexts/onboarding/create_or_sync_profile/view.cljs b/src/status_im/contexts/onboarding/create_or_sync_profile/view.cljs index 5266b03baa..4ab8494e4c 100644 --- a/src/status_im/contexts/onboarding/create_or_sync_profile/view.cljs +++ b/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- create-profile-option-card +(defn- start-fresh-main-card [window-height] [quo/small-option-card {:variant :main - :title (i18n/label :t/generate-keys) - :subtitle (i18n/label :t/generate-keys-subtitle) + :title (i18n/label :t/start-fresh) + :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) - :subtitle (i18n/label :t/if-you-have-status-on-another-device) - :button-label (i18n/label :t/scan-sync-code) - :accessibility-label :scan-sync-code-option-card - :image (resources/get-image :generate-keys) + :title (i18n/label :t/log-in-with-recovery-phrase) + :subtitle (i18n/label :t/log-in-with-recovery-phrase-subtitle) + :button-label (i18n/label :t/use-recovery-phrase) + :accessibility-label :log-in-with-recovery-phrase-main-card + :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] - (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)] + [create-profile?] + (let [window-height (rf/sub [:dimensions/window-height])] [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))] - [main-option-card window-height] + (i18n/label (if create-profile? :t/create-profile :t/log-in))] + (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))]] - [rn/view - [quo/small-option-card - {:variant :icon - :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 - {:variant :icon - :title (i18n/label :t/use-keycard) - :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])}]))}]]])) + (i18n/label :t/other-options)]] + (if create-profile? + [use-recovery-phrase-icon-card] + [log-in-by-syncing-icon-card]) + [rn/view {:style style/space-between-suboptions}] + (if create-profile? + [use-empty-keycard-icon-card] + [log-in-with-keycard-icon-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 [] diff --git a/translations/en.json b/translations/en.json index 3736ddbcd1..b77bbfaa5c 100644 --- a/translations/en.json +++ b/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",