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

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.

{% include rns-integrate-dapp-wallet.html %}

Receive updates

Get the latest updates from the Rootstock ecosystem

Loading...