Use domains instead of long hexa addresses

This is a demonstration of how to get the address of a domain. We are going to do it in a React app.

Requirements

• Node
• npm
• yarn
• create-react-app

Recipe

1. Create a new react app

   create-react-app rns-addr-sample-app
   cd rns-addr-sample-app

2. Install @rsksmart/rns and web3.

   yarn add web3 @rsksmart/rns

3. Update your App.js file

   import React, { Component } from 'react';
   import Web3 from 'web3';
   import RNS from '@rsksmart/rns';
   
   export default class extends Component {
   constructor(props) {
       super(props);
   
       this.state = {
           domain: '',
           getting: false,
           addr: null,
           error: null,
       };
   
       this.handleDomainChange = this.handleDomainChange.bind(this);
       this.getAddress = this.getAddress.bind(this);
   }
   
   handleDomainChange(event) {
       this.setState({ domain: event.target.value, addr: null, error: null });
   }
   
   getAddress() {
       const { domain } = this.state;
   
       this.setState({ getting: true, addr: null, error: null  });
   
       const web3 = new Web3('https://public-node.rsk.co')
       const rns = new RNS(web3);
   
       rns.addr(domain)
       .then(addr => this.setState({ addr, getting: false }))
       .catch(error => this.setState({ error, getting: false }));
   }
   
   render() {
       const { domain, getting, addr, error } = this.state;
   
       return (
       <div>
           <input type="text" onChange={this.handleDomainChange} value={domain} />
           <button onClick={this.getAddress}>get address</button>
           {getting && '...'}
           {addr && <label>{addr}</label>}
           {error && <label>Error: {error.message} - Read more on {error.ref}</label>}
       </div>
       );
   }
   };

4. Start the app

   yarn start

Result

Try the app in rnsdomains.github.io/rns-addr-sample-app.

Repository: github.com/rnsdomains/rns-addr-sample-app.