feat(core,extension): LW-9743 revamp "Save your recovery phrase" screen

[szymonmaslowski]

Checklist

• JIRA - LW-9743
• Proper tests implemented
• Screenshots added.

---

Proposed solution

• Changed the "Save your recovery screen" to have a single step and all 24 mnemonics visible.
• Broken the screen about entering the mnemonic, but that will be solved by Shawn in subsequent PR which probably needs to be merged into this one.
• Removed the screen preceding the mnemonic, the one having video, and moved it to the modal opened by clicking on the "Watch video" text.

Testing

Just go with the onboarding

Screenshots

[sonarcloud]

Quality Gate failed

Failed conditions
22.6% Duplication on New Code (required ≤ 3%)
B Reliability Rating on New Code (required ≥ A)

See analysis details on SonarCloud

Catch issues before they fail your Quality Gate with our IDE extension SonarLint

[github-actions]

Allure report

allure-report-publisher generated test report!

smokeTests: ❌ test report for 7601001f

	passed	failed	skipped	flaky	total	result
Total	31	1	0	0	32	❌

[danielmain]

Very good adding TODOs with a JIRA ticket 💪

[danielmain]

I am not sure if we need #3d3b39 as a fallback. I mean, if we lack --text-color-primary we would not notice it.

[danielmain]

can we don't use --text-color-secondary or similar instead of #efefef?

[danielmain]

consider whether the mnemonicStage, videoModalOpen, and isWriting states could be consolidated or managed with a single state variable. This would reduce IMO complexity.

const [formState, setFormState] = useState({
  stage: 'writedown',
  isVideoModalOpen: false,
  isWriting: false
});

Also use is/has/contains/can for videoModalOpen (old discussion 😂)

[danielmain]

  const walletSteps = isHardwareWallet
    ? [
        { key: WalletTimelineSteps.LEGAL_AND_ANALYTICS, name: i18n.t('package.core.walletSetupStep.legalAndAnalytics') },
        { key: WalletTimelineSteps.CONNECT_WALLET, name: i18n.t('package.core.walletSetupStep.connectWallet') },
        { key: WalletTimelineSteps.NAME_WALLET, name: i18n.t('package.core.walletSetupStep.nameWallet') },
        { key: WalletTimelineSteps.ALL_DONE, name: i18n.t('package.core.walletSetupStep.allDone') }
      ]
    : [
        { key: WalletTimelineSteps.LEGAL_AND_ANALYTICS, name: i18n.t('package.core.walletSetupStep.legalAndAnalytics') },
        { key: WalletTimelineSteps.WALLET_SETUP, name: i18n.t('package.core.walletSetupStep.walletSetup') },
        { key: WalletTimelineSteps.RECOVERY_PHRASE, name: i18n.t('package.core.walletSetupStep.recoveryPhrase') },
        { key: WalletTimelineSteps.ALL_DONE, name: i18n.t('package.core.walletSetupStep.allDone') }
      ];