STR:

• Open App in browser
• Go to Create New Vault page
• Put cursor in password input

Actual: focus highlights input inside inputs field
Expected: focus highlights input by inputs outer border

• Implement Casper Provider module. The module is used to query account balance.
• Show real account balance values using the Casper provider module

Need to design a robust global architecture using the best practices for state management, implementing vault storage, content injection, and background script / service worker communication.

• check metamask
• check MDN/google chrome docs recommendations
• implement POC

Create Account Page

When starting npm run start:firefox hot reload should work when editing the source file

1. Import account
2. Delete an account
3. Rename an Account
4. Switch active account
   5. Create account moved to mnemonic phrase epic
   6. Security prompt - this is not part of this epic anymore, should be moved to secret phrase work

Make Create Vault page and vault creation functionality

https://www.figma.com/file/mBlqs6l6I2d3ihX80Mswm4/Casper-Signer?node-id=101%3A567

For password requirement, the user only needs to come up with a phrase of at least 12 characters. Include helper text under the Confirm Password field:
Think of a random and memorable phrase with at least 12 characters. Avoid using personally identifiable information.
Justification for this password approach: https://support.1password.com/strong-account-password/

Timeout page
Signer will autolock after a specified duration of inactivity. Users can specify the duration in the Timeout screen.

The options presented to the user will be different from what exists in Signer 1.0 today. They will include:

1. 1 min
2. 5 min
3. 15 min
4. 30 min
5. 1 hour
6. 24 hours

Set default selection to 5 min.

Any imported account (ie one uploaded by file) can be removed from Signer. Once an account is removed it is no longer accessible from within Signer. It is no longer visible in the Accounts list. The only way to bring it back is to reimport the private key file again for that same account.

Figma: https://www.figma.com/file/mBlqs6l6I2d3ihX80Mswm4/Casper-Signer?node-id=1196%3A5966

Requirements
The account settings screen for imported accounts will include a trash can button. When clicked, the user is directed to a Remove Account? confirmation screen.
Three buttons are on this screen:

• Back - directs the user back to the Account Settings screen with no change.
• Remove - acts as a confirmation button, removing the account, and navigating the user to the Home screen. The removed account will no longer be present in the account list.
• Cancel - directs the user back to the Account Settings screen with no change.

HD accounts, those which were not imported but rather created via secret phrase, cannot be removed ever. The trash icon will not appear in the Account Settings menu for these accounts.

Edge cases
If the account is active when it is removed, the next account in the Home screen's account list will become active.
If the account is active when it is removed, and connected to a dapp, the next account in the Home screen's account list will become active but the connection is severed. The user must re-connect to the Dapp.

• Implement all legacy Signer integrations (Skybridger, dotoracle, etc)
• Ability to read from github the list of whitelisted sites and import into the Signer extension. We need to determine which Repo this will live in.

Rename Account page

It should implement all the following parts from the casper explorer:

• apps/web/src/app/i18n.ts
• apps/web/src/app/language-detector.ts
• apps/web/src/app/domain/language.ts
• translate all existing strings using react-i18next
• implement following npm scripts so they work the same as in casper explorer:
  • "locale:extract_pot": "i18next 'apps/web/src/**/*.{ts,tsx}' && node scripts/locale_extract_pot.js"
  • "locale:update_translations": "node scripts/locale_update_translations.js"

To recover a lost account in the Signer app, a user must import their account using a .PEM file containing the account secret key.
Casper Wallet will continue to support account import by file if only to accommodate users migrating their accounts to Casper Wallet from Signer. The gold standard for account recovery in a web wallet is to use a HD-based recovery phrase. All users new to Casper Wallet will be prompted to generate such a phrase.

Support for secret phrase via CEP72 was originally planned for legacy Signer. Here are the old tickets for reference, which may help to accelerate investigations around technical design for Casper Wallet:
casper-network/ceps#72
casper-ecosystem/signer#92

Onboarding - Recovery Phrase set up
Design: https://www.figma.com/file/mBlqs6l6I2d3ihX80Mswm4/Casper-Signer?node-id=1838%3A7567
As a Casper Wallet user, during onboarding I can generate a new, unique CEP72 mnemonic recovery phrase for my HD key
As a Casper Wallet user, during onboarding I can click on the obfuscated recovery phrase to reveal the words
As a Casper Wallet user, during onboarding I can click a copy button to copy the recovery phrase to my clipboard for one minute
As a Casper Wallet user, during onboarding when I click the copy button a message appears confirming that the phrase is copied to clipboard
As a Casper Wallet user, during onboarding after seeing my recovery phrase I am prompted to verify that i know the phrase by filling in missing words in the sequence.
As a Casper Wallet user, during onboarding, when prompted to Confirm my secret phrase, the Confirm button is disabled until I fill in all of the missing values in the sequence by clicking on the word tags at the top of the screen.
As a Casper Wallet user, during onboarding if I do not enter the right missing values and I click Confirm I will encounter an error message screen prompting me to start over. Clicking the Start over button takes me back to the Confirm Your Secret Phrase screen.
As a Casper Wallet user who selects the right missing values in the Confirm my Secret Phrase step, clicking Confirm will direct me to a confirmation screen indicating that the secret phrase has been generated successfully: "Your secret phrase is confirmed!"
As a Casper Wallet user who has successfully generated a secret phrase for my wallet I will not be prompted to generate a new secret phrase the next time I log in.

Additionally, Signer 2 should support a secret phrase architecture which easily integrates with Ledger. For example Ledger supports a 24 word secret - Signer 2 should do the same.

Recovery phrase retrieval
As a Casper Wallet user, I can view my secret phrase at any time from the Settings menu by clicking on Backup secret phrase

Recovering your accounts using a recovery phrase
As a Casper Wallet user, during onboarding, if I click the 'I already have a Secret Phrase button' I will be prompted to enter it in an input field.


As a Casper Waller user, during onboarding, if I enter an unrecognized recovery phrase into the input field and click 'Confirm', I will encounter an error screen prompting me to start over. Clicking Start Over will direct me one step back to the Recovery Phrase input screen

Make Header with Menu and Icon Buttons area

Background color of Header can be blue or red
Icon Buttons set depends on current page and state

Tickets:

1. Header
2. Hamburger menu with pop out sidebar menu
3. Generic dialog (to be used for security prompt, etc)

Any account in Signer can be named. Naming an account is performed within the Account Settings menu

Design: https://www.figma.com/file/mBlqs6l6I2d3ihX80Mswm4/Casper-Signer?node-id=1196%3A5966

Requirements
A pencil button will appear at the top of the Account Settings screen. When clicked, the user is taken to the "Rename account" screen. This screen includes:

• Back button - directs the user back to the account settings screen with no changes made.
• Input field - where the user may type in their new account name The input field displays the existing account name by default.
• Update button - applies the value entered into the input field as the new account name and directs the user to the Account setting screen. The name change will propagate to all areas of Signer that display the account name including the Account list and account settings screen. The Update button is in a disabled state until the default text in the input field is modified.
• Cancel button - directs the user back to the account settings screen with no changes made.

Input Validation
This is an alphanumeric input.

Spaces are allowed.

Special characters are not allowed. If typed, display error message immediately "Please include alphanumeric characters only.

A maximum of 20 characters may be typed.

If user double clicks on the Account name on the Home screen...

...automatically direct to user to the Rename account prompt screen:

Edge cases
If the user modifies the input field text, but then types in the account's existing name, Update button becomes disabled again.

Figma: https://www.figma.com/file/mBlqs6l6I2d3ihX80Mswm4/Casper-Signer?node-id=115%3A933

Requirements
This ticket will enable legacy Signer users to import their account using a private key .PEM file in Signer 2.

1. Logged into their vault, a user will have an option to Import Account.
   
2. The user will click 'Import with a file' and be prompted to upload their Private Key file. If the user uploads an unsupported file format, an error will display 'Please upload a .PEM containing your private key.'
   
3. Once a valid key file is uploaded, a user is directed to a new screen with the filename displayed. A text input field allows the user to name their account. A max of 23 characters is allowed, including spaces. A back button allows the user to move back to the upload screen.
   
4. Once a valid account name is included in the input field the user will be able to click the Import button to finish importing
   
5. Once imported, a confirmation screen appears confirming the successful import. By clicking Thanks the user is taken to the home screen with their new account set as the Active account. If user imports multiple accounts back to back, display them in a list on the home screen by the account name.
   

Out of Scope in this ticket
Importing account with Secret Phrase (will be added in as part of #1

As a Casper Wallet user, I can review a list of dapps that I have connected to, broken down by account.
The user opens a Connected Sites screen from the Settings menu of Casper Wallet.
Any dapp that has been connected to with an account will be listed with it's URL and favicon.
A list of the accounts that have connected to that dapp will appear beneath the dapp URL as a sublist
As a Casper Wallet user, when I disconnect an account from a dapp, the account no longer appears beneath that dapp in the Connected Sites list.
As a Casper Wallet user, when I remove disconnect the only connected account from a dapp, the dapp is immediately no longer listed in the Connected Sites list.
As a Casper Wallet user, I can disconnect an individual account from a dapp by clicking on the X button in the Connect Sites screen.
As a Casper Wallet user, I can disconnect ALL accounts from a dapp at the same time by clicking the Disconnect button next to the Dapp URL.

Design: https://www.figma.com/file/mBlqs6l6I2d3ihX80Mswm4/Casper-Signer?node-id=101%3A567

Firefox and Safari will open If Firefox was opened when Safari's start script is running.

STR:

• Open Firefox
• Run npm run start:safari

Actual: Extension opened in new tab in Firefox and Safari
Expected: Extension will opened only in Safari

Need clarify how to works Safari build in details with Webpack Dev Server.

At the moment, npm run start:safari opens the application in Safari browser and we can open every file in the build/firefox folder, but changing those files does nothing. It looks like the Safari build has "copies" of these files. Purpose of this task is need to figure out exactly how the build works

Casper Signer v2 supports HD wallet, which allows users to generate unlimited new key pairs from a master key pair. Therefore, users who have generated their unique recovery phrase are enabled to create unlimited accounts, all of which can be recovered through the one seed phrase. This ticket defines the account creation experience.

Requirements
Users will be able to create accounts with just a few clicks. When a user clicks Create Account either from the Home screen or hamburger menu, the user will be prompted to add an alphanumeric name for their account. After adding a name, the user can click a Done button. The new account appears in the users account list and is selected by default.

A gold standard among web3 wallets is the use of a private key secret phrase. Secret phrases are a more intuitive approach to private key storage and account recorvey compared to Signer's current PEM download. Phrases are easier to write down, easier to remember, and are generally more user friendly.

Areas impacted by CEP72 in Signer 2:

1. During account creation a user will be prompted to write down their 24 word secret phrase. The user should be tested to ensure the phrase was actually recorded. Here are some popular examples: https://docs.google.com/presentation/d/10P3orkHpTdS_opynS9xLDd4ENloaVLsH5QyhftQERVE/edit?usp=sharing
2. A user is able to look up the secret phrase for any account in their Signer vault.
3. A user is able to add/import an account to their Signer vault by entering their secret phrase

Tasks:

• Implement UI
• Write business logic to call Casper SDK
• Tests should also be added to playground application so anyone can test transactions

User stories:
As a Casper Wallet user, when I initiate a transaction using a an app/dapp, I can review the details of the transaction on the Casper Network before I sign it.
As a Casper Wallet user, I can cancel a transaction prompt if I don't want to execute the transaction
As a Casper Wallet user, I can sign a transaction on the Casper Network

Please fix and finalize E2E setup according to review comments

#28

Make Reset Vault page.

A Casper Name Service (like ENS on ethereum) is coming soon which basically enables users to use domain names e.g. alice.cspr instead of the usual public key/account hash.

Signer will support domain names when available. Requirements soon to come.

There should be a theme-config file that follows the same design system standard that is used in the casper-explorer, use it as a reference.
Requirements:

• libs/ui/src/theme-config.ts file including all the types inside
• at the app initialization
• no dark theme for now as it's scheduled for later to be done in tandem with casper-explorer

STR:

• npm run start:firefox
• change a code

Actual: Nothing happened with App in Firefox
Expected: App in Firefox will update.

It doesn't work for web-ext and if you open Firefox with open util.

Issues for this epic:

• User can Connect one or more accounts to any compatible site such as DotOracle or CSPR.Live. User is prompted to approve the connection before the connection is made.
• Once connected, the User can Disconnect any account from the site.
• As a user I see a status of Connected/disconnected
• Signer should save a list of Connected sites in storage
• UI to view and manage list of Connected Sites

Figma link is here: https://www.figma.com/file/mBlqs6l6I2d3ihX80Mswm4/Casper-Signer?node-id=115%3A855

1 sprint

Tickets:

1. Set password/create vault
2. Lock vault
3. Unlock vault
4. Set automatic lockout timer
5. Reset vault

Make Locked page and locking mechanism

Remove Account page