Merge pull request #586 from z3us-dapps/feat/onboarding

Improve onboarding

apps/extension/src/locales/ar.json

@@ -432,5 +432,6 @@
   "nxazlA": "تفضيل المصادقة عبر الأنظمة الأساسية (YubiKey)",
   "pOyrg7": "فتح في اللوحة الجانبية",
   "tLyIg5": "قم بتسجيل الدخول باستخدام المصادقة بدون كلمة مرور",
-  "Ft5lhW": "فشل تمكين المصادقة بدون كلمة مرور"
+  "Ft5lhW": "فشل تمكين المصادقة بدون كلمة مرور",
+  "5q3qC0": "تحميل"
 }

apps/extension/src/locales/de.json

@@ -433,5 +433,6 @@
   "nxazlA": "Plattformübergreifende Authentifizierung (YubiKey) bevorzugen",
   "pOyrg7": "Im Seitenbereich öffnen",
   "tLyIg5": "Anmeldung mit passwortloser Authentifizierung",
-  "Ft5lhW": "Passwortlose Authentifizierung konnte nicht aktiviert werden"
+  "Ft5lhW": "Passwortlose Authentifizierung konnte nicht aktiviert werden",
+  "5q3qC0": "Herunterladen"
 }

apps/extension/src/locales/en.json

@@ -64,6 +64,7 @@
   "5ZxAiY": "Token",
   "5b2WMl": "Could not find any liquidity pool tokens in this account",
   "5jeq8P": "Unknown",
+  "5q3qC0": "Download",
   "5qaD7s": "Rejected",
   "5sg7KC": "Password",
   "5zZZ90": "Address book",
@@ -435,4 +436,4 @@
   "zlB8/W": "Deny all third-party deposits",
   "zspeCR": "LSUs",
   "zuNWCA": "Blueprint version"
-}
+}

apps/extension/src/locales/es.json

@@ -433,5 +433,6 @@
   "nxazlA": "Prefiere autenticación multiplataforma (YubiKey)",
   "pOyrg7": "Abrir en el panel lateral",
   "tLyIg5": "Iniciar sesión usando autenticación sin contraseña",
-  "Ft5lhW": "Error al habilitar la autenticación sin contraseña"
+  "Ft5lhW": "Error al habilitar la autenticación sin contraseña",
+  "5q3qC0": "Descargar"
 }

apps/extension/src/locales/fr.json

@@ -433,5 +433,6 @@
   "nxazlA": "Préférer l'authentification multiplateforme (YubiKey)",
   "pOyrg7": "Ouvrir dans le panneau latéral",
   "tLyIg5": "Connexion avec authentification sans mot de passe",
-  "Ft5lhW": "Échec de l'activation de l'authentification sans mot de passe"
+  "Ft5lhW": "Échec de l'activation de l'authentification sans mot de passe",
+  "5q3qC0": "Télécharger"
 }

apps/extension/src/locales/it.json

@@ -433,5 +433,6 @@
   "nxazlA": "Preferisci l'autenticazione multipiattaforma (YubiKey)",
   "pOyrg7": "Apri nel pannello laterale",
   "tLyIg5": "Accedi utilizzando l'autenticazione senza password",
-  "Ft5lhW": "Impossibile abilitare l'autenticazione senza password"
+  "Ft5lhW": "Impossibile abilitare l'autenticazione senza password",
+  "5q3qC0": "Scaricamento"
 }

apps/extension/src/locales/jp.json

@@ -433,5 +433,6 @@
   "nxazlA": "クロスプラットフォーム認証 (YubiKey) を優先します",
   "pOyrg7": "サイドパネルで開く",
   "tLyIg5": "パスワードなしの認証を使用してログイン",
-  "Ft5lhW": "パスワードなしの認証を有効にできませんでした"
+  "Ft5lhW": "パスワードなしの認証を有効にできませんでした",
+  "5q3qC0": "ダウンロード"
 }

apps/extension/src/locales/pl.json

@@ -433,5 +433,6 @@
   "nxazlA": "Preferuj uwierzytelnianie międzyplatformowe (YubiKey)",
   "pOyrg7": "Otwórz w panelu bocznym",
   "tLyIg5": "Zaloguj się przy użyciu uwierzytelniania bez hasła",
-  "Ft5lhW": "Nie udało się włączyć uwierzytelniania bez hasła"
+  "Ft5lhW": "Nie udało się włączyć uwierzytelniania bez hasła",
+  "5q3qC0": "Ściągnij"
 }

apps/extension/src/locales/pt.json

@@ -432,5 +432,6 @@
   "nxazlA": "Prefira autenticação multiplataforma (YubiKey)",
   "pOyrg7": "Abrir no painel lateral",
   "tLyIg5": "Login usando autenticação sem senha",
-  "Ft5lhW": "Falha ao ativar a autenticação sem senha"
+  "Ft5lhW": "Falha ao ativar a autenticação sem senha",
+  "5q3qC0": "Download"
 }

apps/extension/src/locales/ru.json

@@ -431,5 +431,6 @@
   "nxazlA": "Предпочитать кросс-платформенную аутентификацию (YubiKey)",
   "pOyrg7": "Открыть на боковой панели",
   "tLyIg5": "Вход с использованием аутентификации без пароля",
-  "Ft5lhW": "Не удалось включить аутентификацию без пароля"
+  "Ft5lhW": "Не удалось включить аутентификацию без пароля",
+  "5q3qC0": "Скачать"
 }

apps/extension/src/locales/zh.json

@@ -433,5 +433,6 @@
   "nxazlA": "首选跨平台身份验证（YubiKey）",
   "pOyrg7": "在侧面板中打开",
   "tLyIg5": "使用无密码身份验证登录",
-  "Ft5lhW": "启用无密码身份验证失败"
+  "Ft5lhW": "启用无密码身份验证失败",
+  "5q3qC0": "下载"
 }

apps/extension/src/pages/keystore/seed/components/new-phrase-display.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { defineMessages, useIntl } from 'react-intl'
 
 import { Box } from 'ui/src/components/box'
@@ -23,6 +23,10 @@ const messages = defineMessages({
 		defaultMessage: 'Continue',
 		id: 'acrOoz',
 	},
+	download: {
+		defaultMessage: 'Download',
+		id: '5q3qC0',
+	},
 })
 
 interface IProps {
@@ -33,6 +37,22 @@ interface IProps {
 
 export const NewPhraseDisplay: React.FC<IProps> = ({ words, onBack, onNext }) => {
 	const intl = useIntl()
+	const [canContinue, setCanContinue] = useState<boolean>(false)
+
+	const handleDownload = () => {
+		const element = document.createElement('a')
+		element.setAttribute(
+			'href',
+			`data:text/plain;charset=utf-8,${encodeURIComponent(words.map((w, i) => `${i + 1}. ${w}`).join('\n'))}`,
+		)
+		element.setAttribute('download', `seed-${Date.now()}.txt`)
+		document.body.appendChild(element)
+
+		element.click()
+
+		document.body.removeChild(element)
+		setCanContinue(true)
+	}
 
 	return (
 		<Box className={styles.keystoreNewWrapper}>
@@ -44,9 +64,20 @@ export const NewPhraseDisplay: React.FC<IProps> = ({ words, onBack, onNext }) =>
 				subTitle={intl.formatMessage(messages.phrase_display_sub_title)}
 			/>
 			<SeedPhraseDisplay words={words} />
-			<Button onClick={onNext} sizeVariant="xlarge" styleVariant="primary" fullWidth>
-				{intl.formatMessage(messages.phrase_display_continue)}
-			</Button>
+
+			<Box className={styles.keystoreContinueBtnWrapper}>
+				<Button
+					onClick={handleDownload}
+					sizeVariant="xlarge"
+					styleVariant={!canContinue ? 'primary' : 'secondary'}
+					fullWidth
+				>
+					{intl.formatMessage(messages.download)}
+				</Button>
+				<Button onClick={onNext} sizeVariant="xlarge" styleVariant="primary" fullWidth disabled={!canContinue}>
+					{intl.formatMessage(messages.phrase_display_continue)}
+				</Button>
+			</Box>
 		</Box>
 	)
 }

apps/extension/src/pages/keystore/seed/components/new-phrase-enter.tsx

@@ -47,6 +47,18 @@ const messages = defineMessages({
 	},
 })
 
+function getRandomIndexes(arr: any[]): number[] {
+	const indexes: Set<number> = new Set()
+	const maxIndexes = Math.min(3, arr.length)
+
+	while (indexes.size < maxIndexes) {
+		const randomIndex = Math.floor(Math.random() * arr.length)
+		indexes.add(randomIndex)
+	}
+
+	return Array.from(indexes).sort((a, b) => a - b)
+}
+
 interface IProps {
 	words: string[]
 	onBack: () => void
@@ -56,6 +68,7 @@ interface IProps {
 export const NewPhraseEnter: React.FC<IProps> = ({ words, onBack, onNext }) => {
 	const intl = useIntl()
 
+	const [indexes] = useState<number[]>(getRandomIndexes(words))
 	const [shuffled, setShuffled] = useState<string[]>([])
 	const [verification, setVerification] = useState<string[]>([])
 
@@ -100,8 +113,8 @@ export const NewPhraseEnter: React.FC<IProps> = ({ words, onBack, onNext }) => {
 				})}
 			</Box>
 			<Box className={styles.keystoreNewPhraseGridWrapper}>
-				{words.map((word, i) => (
-					<SeedPhraseDisplayInput key={word} word={verification[i] || ''} index={i} />
+				{indexes.map((key, i) => (
+					<SeedPhraseDisplayInput key={key} word={verification[i] || ''} index={key} />
 				))}
 			</Box>
 			<Box className={styles.keystoreContinueBtnWrapper}>
@@ -119,7 +132,7 @@ export const NewPhraseEnter: React.FC<IProps> = ({ words, onBack, onNext }) => {
 					sizeVariant="xlarge"
 					styleVariant="primary"
 					fullWidth
-					disabled={words.join('') !== verification.join('')}
+					disabled={!indexes.every((key, i) => words[key] === verification[i])}
 				>
 					{intl.formatMessage(messages.phrase_display_continue)}
 				</Button>