Claiming your DNS on ENS via Web (3/3 The code)

1. Setup Truffle box

First thing first, you create react and unbox react components.

$ mkdir react
$ cd react
$ truffle unbox react
$ truffle migrate
$ npm run start

If it’s successful, you should see the stored value of 5 on the page.

When I first tried, it was just showing 0. It was because I was starting up ganache on port 8545, you need to edit getWeb3.js manually to change port number.

2. Install necessary npm modules

npm install --save @ensdomains/ens @ensdomains/dnssec-oracle @ensdomains/dnsregistrar eth-ens-namehash

I already explained the three libraries. eth-ens-namehash is used to hash your ENS name when looking up if your ENS entity exists.

3. Create & run a migration file

You don’t need to see what this migration file does line by line as we are trying to encapsulate it, but this is what the migration does:

4. Write frontend code

I modified Truffle box default App.js. Looks like it’s doing a lot but the gist of the code is not a lot. 4.1 Instantiate DNSRegistrarjs 

registrarjs = new DNSRegistrarJS(
  this.state.web3.currentProvider, registrar.address
);

DNSRegistrarJS is a very thin wrapper of DNSRegistrar contract and dnsprovejs js libray. It requires your web3 provider and DNS registrar address (given that you run the migration, you can access the address via DNSRegistrar truffle function call. 4.2 call registrarjs.claim() This function looks up DNS server for the given domain name and returns an claim object with found attribute.

return registrarjs.claim(this.state.domain);

if the domain name prefixed with _ens. contains a record, the found attribute returns true. 4.3 claim.submit() By calling the function, it will send two transactions, one to call DNSSEC#submitRRSets that submits the proof and another transaction to call DNSRegistrar#claim that sets ownership on ENS. 4.4 Bonus: claim.oracle.knownProof() to check if the oracle has the proof If you want to get more info about the detail of DNS record or proofs of DNSSEC Oracle, the claim object returns a few more attributes exposing the guts of dnsprovejs API .

// Iterate each DNSSEC Proof
claim.result.proofs.map((proof, index)=>{
  // Ask DNSSEC Oracle if the proof exists.
  claim.oracle.knownProof(proof).then((proven)=>{
    // Do something with the response
  })
})

(NOTE, this is exposed more for debugging purpose and we may exclude in the future release.) Once frontend code is created, run npm run start which should open browser pointing to localhost:3000 . TODO It’s a super breeding edge version and it is highly likely that many things are missing/broken (so it’s only for the brave). These are the outstanding tasks I may work on during ENS Hackathon (if I have time…)