Create an account via web form
In this tutorial, we will create a userform for adding a new account right in your web UI.
To work with accounts, we will need the Accounts
object and a provider, such as KeyringLocalProvider
, which saves accounts in a secure store using the @polkadot/ui-keyring
package.
First of all, we need to initialize the provider:
import { Accounts } from '@unique-nft/accounts';
import { KeyringLocalProvider } from '@unique-nft/accounts/keyring-local';
...
const options: KeyringLocalOptions = {
type: 'sr25519', //
passwordCallback: async (keyring: KeyringPair) => {
... // here you need to ask the user to enter a password to sign the transaction and return it from this callback
},
};
const provider = new KeyringLocalProvider(options);
await provider.init();
Next, we need to associate it with the Accounts
instance:
const accounts = new Accounts();
await accounts.addProvider(provider);
Finally, let’s create a web form which will use this code. Please find below a code sample on React. The user interface contains two fields: a mnemonic phrase and a password that must be filled. Optionally, you can offer to fill in the account name.
<form onSubmit={onSubmit} className='create-account-form'>
<div>
<label htmlFor="mnemonic">Mnemonic phrase*</label>
<input id={'mnemonic'} value={mnemonicPhrase} onChange={(e) => setMnemonicPhrase(e.target.value)}/>
</div>
<div>
<label htmlFor="name">Account name</label>
<input id={'name'} value={name} onChange={(e) => setName(e.target.value)} />
</div>
<div>
<label htmlFor="password">Password*</label>
<input id={'password'} value={password} onChange={(e) => setPassword(e.target.value)} />
</div>
<button type='submit' onClick={onSubmit} >Create</button>
</form>
Using the mnemonicGenerate
method from the @polkadot/util-crypto
library, you can generate a new mnemonic:
const newMnemonicPhrase = mnemonicGenerate();
In the onSubmit
function, we will add an account through a provider this way:
const onSubmit = () => {
provider.addUri(mnemonicPhrase, password, { name });
}
After that, the account will be added to the local storage and it will be possible to get it through the getAccounts
method:
const accountsList = await accounts.getAccounts();