Skip to main content

Create new keys with the GUI using the Polkadot.js API.

In this section you will understand the basic concepts about encryption algorithms and we will add functionality to the Newaccounts and Addaccounts components created in the previous section.

Basic concepts.​

The Polkadot js API library provides support for several encryption algorithms that can be used to encrypt and decrypt messages on the Polkadot network. Some of the encryption algorithms available in the library are:

  1. AES (Advanced Encryption Standard): is a widely used symmetric encryption algorithm. Polkadot js API provides support for AES in CBC, CFB, CTR, OFB, and GCM modes.

  2. RSA (Rivest-Shamir-Adleman): is an asymmetric encryption algorithm that uses a public key to encrypt and a private key to decrypt. Polkadot js API supports RSA with 2048-bit and 4096-bit keys.

  3. ECDSA (Elliptic Curve Digital Signature Algorithm): is a digital signature algorithm that uses elliptic curves to generate public and private keys. Polkadot js API supports ECDSA with secp256k1 and secp256r1 elliptic curves.

  4. Ed25519: is a digital signature algorithm based on the Curve25519 elliptic curve. Polkadot js API supports Ed25519 for signing transactions and messages.

  5. Schnorrkel: is a digital signature algorithm based on elliptic curves used in the Polkadot blockchain. Polkadot js API provides support for Schnorrkel for signing transactions and messages.

Polkadot and Kusama primarily use the Ed25519 encryption algorithm for the generation of public and private keys. Ed25519 is a digital signature algorithm based on the elliptic curve Curve25519, which is highly efficient in terms of speed and security.

Ed25519 is used in Polkadot and Kusama for the generation of Sr25519 key types, which is a special type of public key designed specifically for use in blockchain. Sr25519 keys are used for transaction signing, account identification, and session key generation.

In this tutorial we will only use the Ed25519 that is used in Polkadot and Kusama for the generation of Sr25519 key types.

Add functionality to the graphic component Newaccounts using Polkadot-js API.​

In the previous section the graphical interface component as shown below.


import React from 'react';
import { 
    Heading,
    Center,
    Box,
    useDisclosure,
    FormLabel,
    FormControl,
    Modal,
    ModalOverlay,
    ModalContent,
    ModalHeader,
    ModalFooter,
    ModalBody,
    ModalCloseButton,
    Button, 
    VStack,
    Input,
    HStack
     } from '@chakra-ui/react';

function Newaccounts() {
      
    
   
    const { isOpen, onOpen, onClose } = useDisclosure()
    
    const initialRef = React.useRef(null)
    const finalRef = React.useRef(null)
    

    
     return (
    
        <VStack>
        <Heading size="md" className='center' >
            Your seed phrase  is: 
        </Heading>
          <HStack>
            <Input readOnly w="650px" h="100px" inputMode="text" type="text" className='center' />
          </HStack>
          <HStack>
            <Button  colorScheme='green'  className='center' borderRadius="20px" >
                 Generate phrase 
             </Button>
            <Button colorScheme='red' onClick={onOpen} className='center' borderRadius="20px" > 
                 Add new account 
            </Button>
          </HStack>
        <Modal
              size="lg"
              initialFocusRef={initialRef}
              finalFocusRef={finalRef}
              isOpen={isOpen}
              onClose={onClose}  
            >
              <ModalOverlay />
              <ModalContent>
                <ModalHeader >
                    Your Public Address is : 
                </ModalHeader>
                <ModalCloseButton />
                <ModalBody pb={8}>
                  <FormControl mt={6}>
                    <FormLabel>
                        Address:
                        
                    </FormLabel>
                  </FormControl>
                </ModalBody>
                <Center>
                <ModalFooter>
                 <VStack>
                  <Button colorScheme='blue' borderRadius="20px">
                    Add address
                  </Button>
                 </VStack> 
                </ModalFooter>
                </Center>
              </ModalContent>
        </Modal>
            <Box h="270px" w="100%"/>
        </VStack>   
      )
    }
    
    export {  Newaccounts };

We will now add the necessary states using the useState hook and add a new function called keyring that will create 12 words for the seed phrase and associated keys.


    const [text, setText] = useState('');
   
    const [valueAddress, setValueAddress] = useState('');
   
    const { isOpen, onOpen, onClose } = useDisclosure()
    
    const initialRef = React.useRef(null)
    const finalRef = React.useRef(null)
    

    const keyring = async function main () {
      
      // We wait for connection.
      await waitReady();
   
      // Create mnemonic string
      const mnemonic = mnemonicGenerate();
   
      // Update state
      setText(mnemonic)
     
      // We create a new keychain type Sr25519
      const keyring = new Keyring({ type: 'sr25519' });
   
      // We added seed phrase to the new keyring.
      const keys = keyring.createFromUri(mnemonic, { name: 'sr25519' });
   
      //Update state
      setValueAddress(keys.address);
   
      //We store the public key in local storage.
      localStorage.setItem("Publickey",keys.address); 
      
   }

Finally we add the function to the buttons and the code of the component would look like this:

import React, { useState } from 'react';
import { 
   Heading,
   Center,
   Box,
   useDisclosure,
   FormLabel,
   FormControl,
   Modal,
   ModalOverlay,
   ModalContent,
   ModalHeader,
   ModalFooter,
   ModalBody,
   ModalCloseButton,
   Button, 
   VStack,
   Input,
   HStack
    } from '@chakra-ui/react';
 import {mnemonicGenerate} from '@polkadot/util-crypto';
 import { waitReady } from '@polkadot/wasm-crypto';
 import {Keyring} from '@polkadot/api'; 

     
 function Newaccounts() {
     
   
   const [text, setText] = useState('');
  
   const [valueAddress, setValueAddress] = useState('');
  
   const { isOpen, onOpen, onClose } = useDisclosure()
   
     const initialRef = React.useRef(null)
     const finalRef = React.useRef(null)
   

   const keyring = async function main () {
     
     // We wait for connection.
     await waitReady();
  
     // Create mnemonic string
     const mnemonic = mnemonicGenerate();
  
     // Update state
     setText(mnemonic)
    
     // We create a new keychain type Sr25519
     const keyring = new Keyring({ type: 'sr25519' });
  
     // We added seed phrase to the new keyring.
     const keys = keyring.createFromUri(mnemonic, { name: 'sr25519' });
  
     //Update state
     setValueAddress(keys.address);
  
     //We store the public key in local storage.
     localStorage.setItem("Publickey",keys.address); 
     
  }
 
    return (
   
       <VStack>
       <Heading size="md" className='center' >
           Your seed phrase  is: 
       </Heading>
         <HStack>
           <Input readOnly w="650px" h="100px" inputMode="text" type="text" className='center' value={text} onChange={(e) => setText(e.target.value)}   />
         </HStack>
         <HStack>
           <Button  onClick={ keyring} colorScheme='green'  className='center' borderRadius="20px" >
                Generate phrase 
            </Button>
           <Button colorScheme='red' onClick={onOpen} className='center' borderRadius="20px" > 
                Add new account 
           </Button>
         </HStack>
       <Modal
             size="lg"
             initialFocusRef={initialRef}
             finalFocusRef={finalRef}
             isOpen={isOpen}
             onClose={onClose}  
           >
             <ModalOverlay />
             <ModalContent>
               <ModalHeader >
                   Your Public Address is : 
               </ModalHeader>
               <ModalCloseButton />
               <ModalBody pb={8}>
                 <FormControl mt={6}>
                   <FormLabel>
                       Address:
                       {<p> {valueAddress}</p>} 
                   </FormLabel>
                 </FormControl>
               </ModalBody>
               <Center>
               <ModalFooter>
                <VStack>
                 <Button colorScheme='blue' borderRadius="20px">
                   Add address
                 </Button>
                </VStack> 
               </ModalFooter>
               </Center>
             </ModalContent>
       </Modal>
           <Box h="270px" w="100%"/>
       </VStack>   
     )
   }
   
   export {  Newaccounts };

Add functionality to the graphic component Addaccounts using Polkadot-js API.​

In the previous section the graphical interface component as shown below.

import React from 'react';
import { 
    Heading, 
    Center,
    Box,
    useDisclosure,
    FormLabel,
    FormControl,
    Modal,
    ModalOverlay,
    ModalContent,
    ModalHeader,
    ModalFooter,
    ModalBody,
    ModalCloseButton,
    Button, 
    VStack,
    Input,
     HStack
      } from '@chakra-ui/react';

function Addaccounts() {
   
    
    const { isOpen, onOpen, onClose } = useDisclosure()
    
    const initialRef = React.useRef(null)
    const finalRef = React.useRef(null)
    
    
    // We create the variables for the words of the seed phrase.
    let word1;
    let word2;
    let word3;
    let word4;
    let word5;
    let word6;
    let word7;
    let word8;
    let word9;
    let word10;
    let word11;
    let word12;
    
    
    
      return (
    
        <>
  
      <VStack spacing={10} >
    
      <Heading className='center' size="md" >Add your seed phrase: </Heading>
  
      <HStack className='center' spacing={3}>
    <Input id="1" value={word1} type="text"  placeholder='1'  w="150px" h="50px" />
    <Input id="2" value={word2} type="text" placeholder='2' w="150px" h="50px" />
    <Input id="3" value={word3} type="text" placeholder='3' size='md' w="150px" h="50px" />
    <Input id="4" value={word4} type="text" placeholder='4' size='md' w="150px" h="50px" />
    </HStack>
  
    <HStack className='center' spacing={3}>
    <Input id="5" value={word5} type="text" placeholder='5' size='md' w="150px" h="50px" />
    <Input id="6" value={word6} type="text" placeholder='6' size='md' w="150px" h="50px" />
    <Input id="7" value={word7} type="text"  placeholder='7' size='md' w="150px" h="50px" />
    <Input id="8" value={word8} type="text"  placeholder='8' size='md' w="150px" h="50px" />
    </HStack>
  
    <HStack className='center' spacing={3}>
    <Input id="9" value={word9} type="text" placeholder='9' size='md' w="150px" h="50px" />
    <Input id="10" value={word10} type="text" placeholder='10' size='md' w="150px" h="50px" />
    <Input id="11"  value={word11} type="text" placeholder='11' size='md' w="150px" h="50px" />
    <Input id="12" value={word12} type="text" placeholder='12' size='md' w="150px" h="50px" />
    </HStack>
  
    <Button  colorScheme='green' className='center' borderRadius="20px" > 
        Add account
    </Button>
    
    <Modal
            size="lg"
            initialFocusRef={initialRef}
            finalFocusRef={finalRef}
            isOpen={isOpen}
            onClose={onClose}  
          >
            <ModalOverlay />
            <ModalContent>
              <ModalHeader >Your Public Address is : </ModalHeader>
              <ModalCloseButton />
              <ModalBody pb={8}>
                <FormControl mt={6}>
                  <FormLabel>
                    Address:
                   
                  </FormLabel>
                </FormControl>
              </ModalBody>
              <Center>
                <ModalFooter>
                    <VStack>
                        <Button colorScheme='blue' borderRadius="20px">
                            Add address
                        </Button>
                    </VStack>
                </ModalFooter>
              </Center>
            </ModalContent>
    </Modal>
          <Box h="88px" w="100%"/>
    </VStack>
      </>
      )
    }
    
    export {Addaccounts };

In the next step we get the word-for-word seed phrase from the inputs, the necessary states using the useState hook, and add a new function called addkeyring that will add 12 words to the seed phrase and generate the associated keys.



    const [valueAddress, setValueAddress] = useState('');
    
    const { isOpen, onOpen, onClose } = useDisclosure()
    
    const initialRef = React.useRef(null)
    const finalRef = React.useRef(null)
    
    
    // We create the variables for the words of the seed phrase.
    let word1;
    let word2;
    let word3;
    let word4;
    let word5;
    let word6;
    let word7;
    let word8;
    let word9;
    let word10;
    let word11;
    let word12;
    
    
    const addkeyring = async function main () {
    
        // Example:
       // spirit two cable team panther clap slush rhythm fish brave asthma nominee
       // publicKey = 5CFhkekD6ssN4A6AJrB8AUmwKhsR3vrx7GC8BGnruj1vdyk5

    // We wait for connection.
    await waitReady();
    
    //We get the words of the seed phrase from the inputs.
    
    word1=document.getElementById("1") as HTMLInputElement;
    word2=document.getElementById("2") as HTMLInputElement;
    word3=document.getElementById("3") as HTMLInputElement;
    word4=document.getElementById("4") as HTMLInputElement;
    word5=document.getElementById("5") as HTMLInputElement;
    word6=document.getElementById("6") as HTMLInputElement;
    word7=document.getElementById("7") as HTMLInputElement;
    word8=document.getElementById("8") as HTMLInputElement;
    word9=document.getElementById("9") as HTMLInputElement;
    word10=document.getElementById("10") as HTMLInputElement;
    word11=document.getElementById("11") as HTMLInputElement;
    word12=document.getElementById("12") as HTMLInputElement;
    
    // We add a space and concatenate the words of the seed phrase
    let wordlist= word1.value + " " + word2.value + " " + word3.value + " " + word4.value + " " + word5.value + " " + word6.value + " " + word7.value + " " + word8.value + " " + word9.value + " " + word10.value + " " + word11.value + " " + word12.value
    
    const mnemonic=wordlist;
    
    // We create a new keyring type Sr25519
    const keyring = new Keyring({ type: 'sr25519' });
    
    // We added seed phrase to the new keyring.
    const keys = keyring.createFromUri(mnemonic, { name: 'sr25519' });
    
    // Update state
    setValueAddress(keys.address)
    
    //We store the public key in local storage.
    localStorage.setItem("Publickey",keys.address)
    
     
    };

Finally, the code for the Addaccounts component would be:


import React, { useState } from 'react';
import { 
  Heading, 
  Center,
  Box,
  useDisclosure,
  FormLabel,
  FormControl,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  Button, 
  VStack,
  Input,
   HStack
    } from '@chakra-ui/react';
import { waitReady } from '@polkadot/wasm-crypto';
import {Keyring} from '@polkadot/api'; 


function Addaccounts() {

  
  const [valueAddress, setValueAddress] = useState('');
  
  
  const { isOpen, onOpen, onClose } = useDisclosure()
  
  const initialRef = React.useRef(null)
  const finalRef = React.useRef(null)
  
  
  // We create the variables for the words of the seed phrase.
  let word1;
  let word2;
  let word3;
  let word4;
  let word5;
  let word6;
  let word7;
  let word8;
  let word9;
  let word10;
  let word11;
  let word12;
  
  
  const addkeyring = async function main () {
  
      // Example:
     // spirit two cable team panther clap slush rhythm fish brave asthma nominee
     // publicKey = 5CFhkekD6ssN4A6AJrB8AUmwKhsR3vrx7GC8BGnruj1vdyk5

  // We wait for connection.
  await waitReady();
  
  //We get the words of the seed phrase from the inputs.
  
  word1=document.getElementById("1") as HTMLInputElement;
  word2=document.getElementById("2") as HTMLInputElement;
  word3=document.getElementById("3") as HTMLInputElement;
  word4=document.getElementById("4") as HTMLInputElement;
  word5=document.getElementById("5") as HTMLInputElement;
  word6=document.getElementById("6") as HTMLInputElement;
  word7=document.getElementById("7") as HTMLInputElement;
  word8=document.getElementById("8") as HTMLInputElement;
  word9=document.getElementById("9") as HTMLInputElement;
  word10=document.getElementById("10") as HTMLInputElement;
  word11=document.getElementById("11") as HTMLInputElement;
  word12=document.getElementById("12") as HTMLInputElement;
  
  // We add a space and concatenate the words of the seed phrase
  let wordlist= word1.value + " " + word2.value + " " + word3.value + " " + word4.value + " " + word5.value + " " + word6.value + " " + word7.value + " " + word8.value + " " + word9.value + " " + word10.value + " " + word11.value + " " + word12.value
  
  const mnemonic=wordlist;
  
  // We create a new keyring type Sr25519
  const keyring = new Keyring({ type: 'sr25519' });
  
  // We added seed phrase to the new keyring.
  const keys = keyring.createFromUri(mnemonic, { name: 'sr25519' });
  
  // Update state
  setValueAddress(keys.address)
  
  //We store the public key in local storage.
  localStorage.setItem("Publickey",keys.address)
  
   
  };
  
    return (
  
      <>

    <VStack spacing={10} >
  
    <Heading className='center' size="md" >Add your seed phrase: </Heading>

    <HStack className='center' spacing={3}>
  <Input id="1" value={word1} type="text"  placeholder='1'  w="150px" h="50px" />
  <Input id="2" value={word2} type="text" placeholder='2' w="150px" h="50px" />
  <Input id="3" value={word3} type="text" placeholder='3' size='md' w="150px" h="50px" />
  <Input id="4" value={word4} type="text" placeholder='4' size='md' w="150px" h="50px" />
  </HStack>

  <HStack className='center' spacing={3}>
  <Input id="5" value={word5} type="text" placeholder='5' size='md' w="150px" h="50px" />
  <Input id="6" value={word6} type="text" placeholder='6' size='md' w="150px" h="50px" />
  <Input id="7" value={word7} type="text"  placeholder='7' size='md' w="150px" h="50px" />
  <Input id="8" value={word8} type="text"  placeholder='8' size='md' w="150px" h="50px" />
  </HStack>

  <HStack className='center' spacing={3}>
  <Input id="9" value={word9} type="text" placeholder='9' size='md' w="150px" h="50px" />
  <Input id="10" value={word10} type="text" placeholder='10' size='md' w="150px" h="50px" />
  <Input id="11"  value={word11} type="text" placeholder='11' size='md' w="150px" h="50px" />
  <Input id="12" value={word12} type="text" placeholder='12' size='md' w="150px" h="50px" />
  </HStack>

  <Button onClick={ ()=> { onOpen();  addkeyring(); }} colorScheme='green' className='center' borderRadius="20px" > 
      Add account
  </Button>
  
  <Modal
          size="lg"
          initialFocusRef={initialRef}
          finalFocusRef={finalRef}
          isOpen={isOpen}
          onClose={onClose}  
        >
          <ModalOverlay />
          <ModalContent>
            <ModalHeader >Your Public Address is : </ModalHeader>
            <ModalCloseButton />
            <ModalBody pb={8}>
              <FormControl mt={6}>
                <FormLabel>
                  Address:
                  {<p> {valueAddress}</p>}  
                </FormLabel>
              </FormControl>
            </ModalBody>
            <Center>
              <ModalFooter>
                  <VStack>
                      <Button colorScheme='blue' borderRadius="20px">
                          Add address
                      </Button>
                  </VStack>
              </ModalFooter>
            </Center>
          </ModalContent>
  </Modal>
        <Box h="88px" w="100%"/>
  </VStack>
    </>
    )
  }
  
  export {Addaccounts };

Great, now you have two basic components to build a wallet as a web application.

?What is the primary encryption algorithm used in Polkadot and Kusama?
?What is the advantage of using Ed25519 in Polkadot and Kusama?
?What is the Sr25519 key type used for in Polkadot and Kusama?