From ff25a1b0febc19fcccfd95b98b939e07aa6fbed0 Mon Sep 17 00:00:00 2001
From: gauthamzz <thabeatsz@gmail.com>
Date: Sun, 10 Mar 2019 09:24:57 +0100
Subject: [PATCH] make release

---
 app/ens.js             | 1413 ++++++++++++++++++++++++++++++++++++++++
 app/src/index.html     |  151 +++--
 app/src/index.js       |  117 ++--
 app/src/type1.html     |    6 +
 hidable/ava/index.html |    7 +-
 5 files changed, 1574 insertions(+), 120 deletions(-)
 create mode 100644 app/ens.js

diff --git a/app/ens.js b/app/ens.js
new file mode 100644
index 0000000..6a8dba4
--- /dev/null
+++ b/app/ens.js
@@ -0,0 +1,1413 @@
+// STOP!
+// Are you thinking of using this in an app? Don't!
+// This script is designed for interactive use in the go-ethereum console.
+// For use in an app, consider one of these fine libraries:
+//  - https://www.npmjs.com/package/ethjs-ens
+//  - https://www.npmjs.com/package/ethereum-ens
+
+function namehash(name) {
+    var node = '0x0000000000000000000000000000000000000000000000000000000000000000';
+    if (name !== '') {
+        var labels = name.split(".");
+        for(var i = labels.length - 1; i >= 0; i--) {
+            node = web3.sha3(node + web3.sha3(labels[i]).slice(2), {encoding: 'hex'});
+        }
+    }
+    return node.toString();
+}
+
+var ensContract = web3.eth.contract([
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "node",
+        "type": "bytes32"
+      }
+    ],
+    "name": "resolver",
+    "outputs": [
+      {
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "node",
+        "type": "bytes32"
+      }
+    ],
+    "name": "owner",
+    "outputs": [
+      {
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "name": "label",
+        "type": "bytes32"
+      },
+      {
+        "name": "owner",
+        "type": "address"
+      }
+    ],
+    "name": "setSubnodeOwner",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "name": "ttl",
+        "type": "uint64"
+      }
+    ],
+    "name": "setTTL",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "node",
+        "type": "bytes32"
+      }
+    ],
+    "name": "ttl",
+    "outputs": [
+      {
+        "name": "",
+        "type": "uint64"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "name": "resolver",
+        "type": "address"
+      }
+    ],
+    "name": "setResolver",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "name": "owner",
+        "type": "address"
+      }
+    ],
+    "name": "setOwner",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "indexed": false,
+        "name": "owner",
+        "type": "address"
+      }
+    ],
+    "name": "Transfer",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "indexed": true,
+        "name": "label",
+        "type": "bytes32"
+      },
+      {
+        "indexed": false,
+        "name": "owner",
+        "type": "address"
+      }
+    ],
+    "name": "NewOwner",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "indexed": false,
+        "name": "resolver",
+        "type": "address"
+      }
+    ],
+    "name": "NewResolver",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "indexed": false,
+        "name": "ttl",
+        "type": "uint64"
+      }
+    ],
+    "name": "NewTTL",
+    "type": "event"
+  }
+]);
+var ens = ensContract.at('0x112234455c3a32fd11230c42e7bccd4a84e02010');
+
+var auctionRegistrarContract = web3.eth.contract([
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_hash",
+        "type": "bytes32"
+      }
+    ],
+    "name": "releaseDeed",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "_hash",
+        "type": "bytes32"
+      }
+    ],
+    "name": "getAllowedTime",
+    "outputs": [
+      {
+        "name": "timestamp",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "unhashedName",
+        "type": "string"
+      }
+    ],
+    "name": "invalidateName",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "hash",
+        "type": "bytes32"
+      },
+      {
+        "name": "owner",
+        "type": "address"
+      },
+      {
+        "name": "value",
+        "type": "uint256"
+      },
+      {
+        "name": "salt",
+        "type": "bytes32"
+      }
+    ],
+    "name": "shaBid",
+    "outputs": [
+      {
+        "name": "sealedBid",
+        "type": "bytes32"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "bidder",
+        "type": "address"
+      },
+      {
+        "name": "seal",
+        "type": "bytes32"
+      }
+    ],
+    "name": "cancelBid",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "_hash",
+        "type": "bytes32"
+      }
+    ],
+    "name": "entries",
+    "outputs": [
+      {
+        "name": "",
+        "type": "uint8"
+      },
+      {
+        "name": "",
+        "type": "address"
+      },
+      {
+        "name": "",
+        "type": "uint256"
+      },
+      {
+        "name": "",
+        "type": "uint256"
+      },
+      {
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "ens",
+    "outputs": [
+      {
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_hash",
+        "type": "bytes32"
+      },
+      {
+        "name": "_value",
+        "type": "uint256"
+      },
+      {
+        "name": "_salt",
+        "type": "bytes32"
+      }
+    ],
+    "name": "unsealBid",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_hash",
+        "type": "bytes32"
+      }
+    ],
+    "name": "transferRegistrars",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "",
+        "type": "address"
+      },
+      {
+        "name": "",
+        "type": "bytes32"
+      }
+    ],
+    "name": "sealedBids",
+    "outputs": [
+      {
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "_hash",
+        "type": "bytes32"
+      }
+    ],
+    "name": "state",
+    "outputs": [
+      {
+        "name": "",
+        "type": "uint8"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_hash",
+        "type": "bytes32"
+      },
+      {
+        "name": "newOwner",
+        "type": "address"
+      }
+    ],
+    "name": "transfer",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "_hash",
+        "type": "bytes32"
+      },
+      {
+        "name": "_timestamp",
+        "type": "uint256"
+      }
+    ],
+    "name": "isAllowed",
+    "outputs": [
+      {
+        "name": "allowed",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_hash",
+        "type": "bytes32"
+      }
+    ],
+    "name": "finalizeAuction",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "registryStarted",
+    "outputs": [
+      {
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "sealedBid",
+        "type": "bytes32"
+      }
+    ],
+    "name": "newBid",
+    "outputs": [],
+    "payable": true,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "labels",
+        "type": "bytes32[]"
+      }
+    ],
+    "name": "eraseNode",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_hashes",
+        "type": "bytes32[]"
+      }
+    ],
+    "name": "startAuctions",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "hash",
+        "type": "bytes32"
+      },
+      {
+        "name": "deed",
+        "type": "address"
+      },
+      {
+        "name": "registrationDate",
+        "type": "uint256"
+      }
+    ],
+    "name": "acceptRegistrarTransfer",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "_hash",
+        "type": "bytes32"
+      }
+    ],
+    "name": "startAuction",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "rootNode",
+    "outputs": [
+      {
+        "name": "",
+        "type": "bytes32"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "hashes",
+        "type": "bytes32[]"
+      },
+      {
+        "name": "sealedBid",
+        "type": "bytes32"
+      }
+    ],
+    "name": "startAuctionsAndBid",
+    "outputs": [],
+    "payable": true,
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "name": "_ens",
+        "type": "address"
+      },
+      {
+        "name": "_rootNode",
+        "type": "bytes32"
+      },
+      {
+        "name": "_startDate",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "type": "constructor"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "hash",
+        "type": "bytes32"
+      },
+      {
+        "indexed": false,
+        "name": "registrationDate",
+        "type": "uint256"
+      }
+    ],
+    "name": "AuctionStarted",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "hash",
+        "type": "bytes32"
+      },
+      {
+        "indexed": true,
+        "name": "bidder",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "name": "deposit",
+        "type": "uint256"
+      }
+    ],
+    "name": "NewBid",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "hash",
+        "type": "bytes32"
+      },
+      {
+        "indexed": true,
+        "name": "owner",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "name": "value",
+        "type": "uint256"
+      },
+      {
+        "indexed": false,
+        "name": "status",
+        "type": "uint8"
+      }
+    ],
+    "name": "BidRevealed",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "hash",
+        "type": "bytes32"
+      },
+      {
+        "indexed": true,
+        "name": "owner",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "name": "value",
+        "type": "uint256"
+      },
+      {
+        "indexed": false,
+        "name": "registrationDate",
+        "type": "uint256"
+      }
+    ],
+    "name": "HashRegistered",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "hash",
+        "type": "bytes32"
+      },
+      {
+        "indexed": false,
+        "name": "value",
+        "type": "uint256"
+      }
+    ],
+    "name": "HashReleased",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "hash",
+        "type": "bytes32"
+      },
+      {
+        "indexed": true,
+        "name": "name",
+        "type": "string"
+      },
+      {
+        "indexed": false,
+        "name": "value",
+        "type": "uint256"
+      },
+      {
+        "indexed": false,
+        "name": "registrationDate",
+        "type": "uint256"
+      }
+    ],
+    "name": "HashInvalidated",
+    "type": "event"
+  }
+]);
+var ethRegistrar = auctionRegistrarContract.at(ens.owner(namehash('eth')));
+
+var deedContract = web3.eth.contract([
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "creationDate",
+    "outputs": [
+      {
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [],
+    "name": "destroyDeed",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "newOwner",
+        "type": "address"
+      }
+    ],
+    "name": "setOwner",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "registrar",
+    "outputs": [
+      {
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "value",
+    "outputs": [
+      {
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "previousOwner",
+    "outputs": [
+      {
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "owner",
+    "outputs": [
+      {
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "newValue",
+        "type": "uint256"
+      },
+      {
+        "name": "throwOnFailure",
+        "type": "bool"
+      }
+    ],
+    "name": "setBalance",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "refundRatio",
+        "type": "uint256"
+      }
+    ],
+    "name": "closeDeed",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "newRegistrar",
+        "type": "address"
+      }
+    ],
+    "name": "setRegistrar",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "name": "_owner",
+        "type": "address"
+      }
+    ],
+    "payable": true,
+    "type": "constructor"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": false,
+        "name": "newOwner",
+        "type": "address"
+      }
+    ],
+    "name": "OwnerChanged",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [],
+    "name": "DeedClosed",
+    "type": "event"
+  }
+]);
+
+var fifsRegistrarContract = web3.eth.contract([
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "ens",
+    "outputs": [
+      {
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "",
+        "type": "bytes32"
+      }
+    ],
+    "name": "expiryTimes",
+    "outputs": [
+      {
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "subnode",
+        "type": "bytes32"
+      },
+      {
+        "name": "owner",
+        "type": "address"
+      }
+    ],
+    "name": "register",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "rootNode",
+    "outputs": [
+      {
+        "name": "",
+        "type": "bytes32"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "name": "ensAddr",
+        "type": "address"
+      },
+      {
+        "name": "node",
+        "type": "bytes32"
+      }
+    ],
+    "type": "constructor"
+  }
+]);
+var testRegistrar = fifsRegistrarContract.at(ens.owner(namehash('test')));
+
+var resolverContract = web3.eth.contract([
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "interfaceID",
+        "type": "bytes4"
+      }
+    ],
+    "name": "supportsInterface",
+    "outputs": [
+      {
+        "name": "",
+        "type": "bool"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "name": "contentTypes",
+        "type": "uint256"
+      }
+    ],
+    "name": "ABI",
+    "outputs": [
+      {
+        "name": "contentType",
+        "type": "uint256"
+      },
+      {
+        "name": "data",
+        "type": "bytes"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "name": "x",
+        "type": "bytes32"
+      },
+      {
+        "name": "y",
+        "type": "bytes32"
+      }
+    ],
+    "name": "setPubkey",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "node",
+        "type": "bytes32"
+      }
+    ],
+    "name": "content",
+    "outputs": [
+      {
+        "name": "ret",
+        "type": "bytes32"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "node",
+        "type": "bytes32"
+      }
+    ],
+    "name": "addr",
+    "outputs": [
+      {
+        "name": "ret",
+        "type": "address"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "name": "contentType",
+        "type": "uint256"
+      },
+      {
+        "name": "data",
+        "type": "bytes"
+      }
+    ],
+    "name": "setABI",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "node",
+        "type": "bytes32"
+      }
+    ],
+    "name": "name",
+    "outputs": [
+      {
+        "name": "ret",
+        "type": "string"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "name": "name",
+        "type": "string"
+      }
+    ],
+    "name": "setName",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "name": "hash",
+        "type": "bytes32"
+      }
+    ],
+    "name": "setContent",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "node",
+        "type": "bytes32"
+      }
+    ],
+    "name": "pubkey",
+    "outputs": [
+      {
+        "name": "x",
+        "type": "bytes32"
+      },
+      {
+        "name": "y",
+        "type": "bytes32"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "name": "addr",
+        "type": "address"
+      }
+    ],
+    "name": "setAddr",
+    "outputs": [],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "name": "ensAddr",
+        "type": "address"
+      }
+    ],
+    "payable": false,
+    "type": "constructor"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "indexed": false,
+        "name": "a",
+        "type": "address"
+      }
+    ],
+    "name": "AddrChanged",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "indexed": false,
+        "name": "hash",
+        "type": "bytes32"
+      }
+    ],
+    "name": "ContentChanged",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "indexed": false,
+        "name": "name",
+        "type": "string"
+      }
+    ],
+    "name": "NameChanged",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "indexed": true,
+        "name": "contentType",
+        "type": "uint256"
+      }
+    ],
+    "name": "ABIChanged",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "name": "node",
+        "type": "bytes32"
+      },
+      {
+        "indexed": false,
+        "name": "x",
+        "type": "bytes32"
+      },
+      {
+        "indexed": false,
+        "name": "y",
+        "type": "bytes32"
+      }
+    ],
+    "name": "PubkeyChanged",
+    "type": "event"
+  }
+]);
+var publicResolver = resolverContract.at('0x4c641fb9bad9b60ef180c31f56051ce826d21a9a');
+
+
+var reverseRegistrarContract = web3.eth.contract([
+  {
+    "constant": false,
+    "inputs": [
+      {
+        "name": "owner",
+        "type": "address"
+      }
+    ],
+    "name": "claim",
+    "outputs": [
+      {
+        "name": "node",
+        "type": "bytes32"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "ens",
+    "outputs": [
+      {
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      {
+        "name": "addr",
+        "type": "address"
+      }
+    ],
+    "name": "node",
+    "outputs": [
+      {
+        "name": "ret",
+        "type": "bytes32"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "rootNode",
+    "outputs": [
+      {
+        "name": "",
+        "type": "bytes32"
+      }
+    ],
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "name": "ensAddr",
+        "type": "address"
+      },
+      {
+        "name": "node",
+        "type": "bytes32"
+      }
+    ],
+    "payable": false,
+    "type": "constructor"
+  }
+]);
+var reverseRegistrar = reverseRegistrarContract.at(ens.owner(namehash('addr.reverse')));
+
+function getAddr(name) {
+  var node = namehash(name)
+  var resolverAddress = ens.resolver(node);
+  if (resolverAddress === '0x0000000000000000000000000000000000000000') {
+    return resolverAddress;
+  }
+  return resolverContract.at(resolverAddress).addr(node);
+}
+
+function getContent(name) {
+  var node = namehash(name)
+  var resolverAddress = ens.resolver(node);
+  if (resolverAddress === '0x0000000000000000000000000000000000000000') {
+    return "0x0000000000000000000000000000000000000000000000000000000000000000";
+  }
+  return resolverContract.at(resolverAddress).content(node);
+}
\ No newline at end of file
diff --git a/app/src/index.html b/app/src/index.html
index 94071c4..00e0bfc 100644
--- a/app/src/index.html
+++ b/app/src/index.html
@@ -3,10 +3,8 @@
   <head>
     <title>ayo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="restrictedextras" content="iframe" />
-
     
-    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css"> -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
   </head>
   <style>
     input {
@@ -15,56 +13,115 @@
     }
   </style>
   <body>
-      <section class="hero is-primary">
+      <section class="hero is-info">
+          <div class="hero-head">
+            <nav class="navbar">
+              <div class="container">
+                <div class="navbar-brand title">
+                   😲
+                  </a>
+                  <span class="navbar-burger burger" data-target="navbarMenuHeroB">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                  </span>
+                </div>
+                <div id="navbarMenuHeroB" class="navbar-menu">
+                  <div class="navbar-end">
+                    <a class="navbar-item is-active">
+                      Home
+                    </a>
+                    <a class="navbar-item">
+                      Examples
+                    </a>
+                    <a class="navbar-item">
+                      Documentation
+                    </a>
+                    <span class="navbar-item">
+                      <a class="button is-info is-inverted">
+                        
+                        <span>Download</span>
+                      </a>
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </nav>
+          </div>
+        
           <div class="hero-body">
-            <div class="container">
-              <h1 class="title">
-                Primary title
-              </h1>
-              <h2 class="subtitle">
-                Primary subtitle
-              </h2>
+            <div class="container has-text-centered">
+              <p class="title">
+                  Dashboard
+              </p>
+              <p class="subtitle">
+                  Ayyo 😲 : Get Paid doing what you love 
+              
+              </p>
             </div>
           </div>
-        </section>
-        <section >
-            <iframe width="560" height="500" id="iframe" src="https://www.youtube.com/embed/egOoEr-vFP0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
         
-          </section>
-        
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ipsum dolor sit amet consectetur adipiscing. Viverra mauris in aliquam sem fringilla ut. Ac placerat vestibulum lectus mauris ultrices eros in cursus. Dictum varius duis at consectetur. Eu tincidunt tortor aliquam nulla facilisi cras. Justo donec enim diam vulputate ut pharetra sit amet aliquam. Lacinia at quis risus sed vulputate. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Id porta nibh venenatis cras sed felis. Lacus viverra vitae congue eu. Tempor commodo ullamcorper a lacus vestibulum.
-
-ACommodo viverra maecenas accumsan lacus vel. Commodo sed egestas egestas fringilla phasellus faucibus. Blandit turpis cursus in hac habitasse platea. Scelerisque felis imperdiet proin fermentum leo vel orci. Non nisi est sit amet facilisis magna etiam tempor. Aliquam nulla facilisi cras fermentum odio eu feugiat. Aliquam malesuada bibendum arcu vitae elementum curabitur. Sit amet facilisis magna etiam tempor orci eu. Turpis cursus in hac habitasse. Porttitor leo a diam sollicitudin. Ut faucibus pulvinar elementum integer enim neque volutpat ac. Eu sem integer vitae justo eget. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Et malesuada fames ac turpis egestas integer eget aliquet. Neque vitae tempus quam pellentesque nec nam.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ipsum dolor sit amet consectetur adipiscing. Viverra mauris in aliquam sem fringilla ut. Ac placerat vestibulum lectus mauris ultrices eros in cursus. Dictum varius duis at consectetur. Eu tincidunt tortor aliquam nulla facilisi cras. Justo donec enim diam vulputate ut pharetra sit amet aliquam. Lacinia at quis risus sed vulputate. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Id porta nibh venenatis cras sed felis. Lacus viverra vitae congue eu. Tempor commodo ullamcorper a lacus vestibulum.
-
-ACommodo viverra maecenas accumsan lacus vel. Commodo sed egestas egestas fringilla phasellus faucibus. Blandit turpis cursus in hac habitasse platea. Scelerisque felis imperdiet proin fermentum leo vel orci. Non nisi est sit amet facilisis magna etiam tempor. Aliquam nulla facilisi cras fermentum odio eu feugiat. Aliquam malesuada bibendum arcu vitae elementum curabitur. Sit amet facilisis magna etiam tempor orci eu. Turpis cursus in hac habitasse. Porttitor leo a diam sollicitudin. Ut faucibus pulvinar elementum integer enim neque volutpat ac. Eu sem integer vitae justo eget. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Et malesuada fames ac turpis egestas integer eget aliquet. Neque vitae tempus quam pellentesque nec nam.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ipsum dolor sit amet consectetur adipiscing. Viverra mauris in aliquam sem fringilla ut. Ac placerat vestibulum lectus mauris ultrices eros in cursus. Dictum varius duis at consectetur. Eu tincidunt tortor aliquam nulla facilisi cras. Justo donec enim diam vulputate ut pharetra sit amet aliquam. Lacinia at quis risus sed vulputate. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Id porta nibh venenatis cras sed felis. Lacus viverra vitae congue eu. Tempor commodo ullamcorper a lacus vestibulum.
-
-ACommodo viverra maecenas accumsan lacus vel. Commodo sed egestas egestas fringilla phasellus faucibus. Blandit turpis cursus in hac habitasse platea. Scelerisque felis imperdiet proin fermentum leo vel orci. Non nisi est sit amet facilisis magna etiam tempor. Aliquam nulla facilisi cras fermentum odio eu feugiat. Aliquam malesuada bibendum arcu vitae elementum curabitur. Sit amet facilisis magna etiam tempor orci eu. Turpis cursus in hac habitasse. Porttitor leo a diam sollicitudin. Ut faucibus pulvinar elementum integer enim neque volutpat ac. Eu sem integer vitae justo eget. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Et malesuada fames ac turpis egestas integer eget aliquet. Neque vitae tempus quam pellentesque nec nam.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ipsum dolor sit amet consectetur adipiscing. Viverra mauris in aliquam sem fringilla ut. Ac placerat vestibulum lectus mauris ultrices eros in cursus. Dictum varius duis at consectetur. Eu tincidunt tortor aliquam nulla facilisi cras. Justo donec enim diam vulputate ut pharetra sit amet aliquam. Lacinia at quis risus sed vulputate. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Id porta nibh venenatis cras sed felis. Lacus viverra vitae congue eu. Tempor commodo ullamcorper a lacus vestibulum.
-
-
-ACommodo viverra maecenas accumsan lacus vel. Commodo sed egestas egestas fringilla phasellus faucibus. Blandit turpis cursus in hac habitasse platea. Scelerisque felis imperdiet proin fermentum leo vel orci. Non nisi est sit amet facilisis magna etiam tempor. Aliquam nulla facilisi cras fermentum odio eu feugiat. Aliquam malesuada bibendum arcu vitae elementum curabitur. Sit amet facilisis magna etiam tempor orci eu. Turpis cursus in hac habitasse. Porttitor leo a diam sollicitudin. Ut faucibus pulvinar elementum integer enim neque volutpat ac. Eu sem integer vitae justo eget. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Et malesuada fames ac turpis egestas integer eget aliquet. Neque vitae tempus quam pellentesque nec nam.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ipsum dolor sit amet consectetur adipiscing. Viverra mauris in aliquam sem fringilla ut. Ac placerat vestibulum lectus mauris ultrices eros in cursus. Dictum varius duis at consectetur. Eu tincidunt tortor aliquam nulla facilisi cras. Justo donec enim diam vulputate ut pharetra sit amet aliquam. Lacinia at quis risus sed vulputate. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Id porta nibh venenatis cras sed felis. Lacus viverra vitae congue eu. Tempor commodo ullamcorper a lacus vestibulum.
-
-ACommodo viverra maecenas accumsan lacus vel. Commodo sed egestas egestas fringilla phasellus faucibus. Blandit turpis cursus in hac habitasse platea. Scelerisque felis imperdiet proin fermentum leo vel orci. Non nisi est sit amet facilisis magna etiam tempor. Aliquam nulla facilisi cras fermentum odio eu feugiat. Aliquam malesuada bibendum arcu vitae elementum curabitur. Sit amet facilisis magna etiam tempor orci eu. Turpis cursus in hac habitasse. Porttitor leo a diam sollicitudin. Ut faucibus pulvinar elementum integer enim neque volutpat ac. Eu sem integer vitae justo eget. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Et malesuada fames ac turpis egestas integer eget aliquet. Neque vitae tempus quam pellentesque nec nam.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ipsum dolor sit amet consectetur adipiscing. Viverra mauris in aliquam sem fringilla ut. Ac placerat vestibulum lectus mauris ultrices eros in cursus. Dictum varius duis at consectetur. Eu tincidunt tortor aliquam nulla facilisi cras. Justo donec enim diam vulputate ut pharetra sit amet aliquam. Lacinia at quis risus sed vulputate. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Id porta nibh venenatis cras sed felis. Lacus viverra vitae congue eu. Tempor commodo ullamcorper a lacus vestibulum.
-
-ACommodo viverra maecenas accumsan lacus vel. Commodo sed egestas egestas fringilla phasellus faucibus. Blandit turpis cursus in hac habitasse platea. Scelerisque felis imperdiet proin fermentum leo vel orci. Non nisi est sit amet facilisis magna etiam tempor. Aliquam nulla facilisi cras fermentum odio eu feugiat. Aliquam malesuada bibendum arcu vitae elementum curabitur. Sit amet facilisis magna etiam tempor orci eu. Turpis cursus in hac habitasse. Porttitor leo a diam sollicitudin. Ut faucibus pulvinar elementum integer enim neque volutpat ac. Eu sem integer vitae justo eget. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Et malesuada fames ac turpis egestas integer eget aliquet. Neque vitae tempus quam pellentesque nec nam.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ipsum dolor sit amet consectetur adipiscing. Viverra mauris in aliquam sem fringilla ut. Ac placerat vestibulum lectus mauris ultrices eros in cursus. Dictum varius duis at consectetur. Eu tincidunt tortor aliquam nulla facilisi cras. Justo donec enim diam vulputate ut pharetra sit amet aliquam. Lacinia at quis risus sed vulputate. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Id porta nibh venenatis cras sed felis. Lacus viverra vitae congue eu. Tempor commodo ullamcorper a lacus vestibulum.
-
-ACommodo viverra maecenas accumsan lacus vel. Commodo sed egestas egestas fringilla phasellus faucibus. Blandit turpis cursus in hac habitasse platea. Scelerisque felis imperdiet proin fermentum leo vel orci. Non nisi est sit amet facilisis magna etiam tempor. Aliquam nulla facilisi cras fermentum odio eu feugiat. Aliquam malesuada bibendum arcu vitae elementum curabitur. Sit amet facilisis magna etiam tempor orci eu. Turpis cursus in hac habitasse. Porttitor leo a diam sollicitudin. Ut faucibus pulvinar elementum integer enim neque volutpat ac. Eu sem integer vitae justo eget. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Et malesuada fames ac turpis egestas integer eget aliquet. Neque vitae tempus quam pellentesque nec nam.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ipsum dolor sit amet consectetur adipiscing. Viverra mauris in aliquam sem fringilla ut. Ac placerat vestibulum lectus mauris ultrices eros in cursus. Dictum varius duis at consectetur. Eu tincidunt tortor aliquam nulla facilisi cras. Justo donec enim diam vulputate ut pharetra sit amet aliquam. Lacinia at quis risus sed vulputate. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Id porta nibh venenatis cras sed felis. Lacus viverra vitae congue eu. Tempor commodo ullamcorper a lacus vestibulum.
-
-ACommodo viverra maecenas accumsan lacus vel. Commodo sed egestas egestas fringilla phasellus faucibus. Blandit turpis cursus in hac habitasse platea. Scelerisque felis imperdiet proin fermentum leo vel orci. Non nisi est sit amet facilisis magna etiam tempor. Aliquam nulla facilisi cras fermentum odio eu feugiat. Aliquam malesuada bibendum arcu vitae elementum curabitur. Sit amet facilisis magna etiam tempor orci eu. Turpis cursus in hac habitasse. Porttitor leo a diam sollicitudin. Ut faucibus pulvinar elementum integer enim neque volutpat ac. Eu sem integer vitae justo eget. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Et malesuada fames ac turpis egestas integer eget aliquet. Neque vitae tempus quam pellentesque nec nam.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ipsum dolor sit amet consectetur adipiscing. Viverra mauris in aliquam sem fringilla ut. Ac placerat vestibulum lectus mauris ultrices eros in cursus. Dictum varius duis at consectetur. Eu tincidunt tortor aliquam nulla facilisi cras. Justo donec enim diam vulputate ut pharetra sit amet aliquam. Lacinia at quis risus sed vulputate. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Id porta nibh venenatis cras sed felis. Lacus viverra vitae congue eu. Tempor commodo ullamcorper a lacus vestibulum.
-
-ACommodo viverra maecenas accumsan lacus vel. Commodo sed egestas egestas fringilla phasellus faucibus. Blandit turpis cursus in hac habitasse platea. Scelerisque felis imperdiet proin fermentum leo vel orci. Non nisi est sit amet facilisis magna etiam tempor. Aliquam nulla facilisi cras fermentum odio eu feugiat. Aliquam malesuada bibendum arcu vitae elementum curabitur. Sit amet facilisis magna etiam tempor orci eu. Turpis cursus in hac habitasse. Porttitor leo a diam sollicitudin. Ut faucibus pulvinar elementum integer enim neque volutpat ac. Eu sem integer vitae justo eget. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Et malesuada fames ac turpis egestas integer eget aliquet. Neque vitae tempus quam pellentesque nec nam.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ipsum dolor sit amet consectetur adipiscing. Viverra mauris in aliquam sem fringilla ut. Ac placerat vestibulum lectus mauris ultrices eros in cursus. Dictum varius duis at consectetur. Eu tincidunt tortor aliquam nulla facilisi cras. Justo donec enim diam vulputate ut pharetra sit amet aliquam. Lacinia at quis risus sed vulputate. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Id porta nibh venenatis cras sed felis. Lacus viverra vitae congue eu. Tempor commodo ullamcorper a lacus vestibulum.
+          
+        </section>
+        <section class="section">
+            <div class="container">
+                <div class="columns">
+                    <div class="column is-4" >
+                <aside class="menu">
+                        <p class="menu-label">
+                          Add new 
+                        </p>
+                        
+                        <ul class="menu-list">
+                            <div class="field">
+                                <p class="control has-icons-left has-icons-right">
+                                    <input class="input" type="email" id="expiration" placeholder="Expiration Duration">
+                                    <span class="icon is-small is-left">
+                                        🕒
+                                    </span>
+                                    <span class="icon is-small is-right">
+                                      <i class="fas fa-check"></i>
+                                    </span>
+                                  </p>
+                                  <p class="control has-icons-left has-icons-right">
+                                      <input class="input" id="price" type="email" placeholder="Price">
+                                      <span class="icon is-small is-left">
+                                          💸
+                                      </span>
+                                      <span class="icon is-small is-right">
+                                        <i class="fas fa-check"></i>
+                                      </span>
+                                    </p>
+                              </div>
+                              
+                              
+                              <div class="field">
+                                <p class="control">
+                                  <button class="button is-success"  onclick="App.createCreator()">
+                                    Create
+                                  </button>
+                                </p>
+                              </div>
+                              </div>
+                          <div id="status">
+                            
+                          </div>
+                        </ul>
+                    
+                      </aside>
+                      <div class="container">
+                        <div class="columns">
+                          <div class="column">
+                            <div class="balance"></div>
 
-ACommodo viverra maecenas accumsan lacus vel. Commodo sed egestas egestas fringilla phasellus faucibus. Blandit turpis cursus in hac habitasse platea. Scelerisque felis imperdiet proin fermentum leo vel orci. Non nisi est sit amet facilisis magna etiam tempor. Aliquam nulla facilisi cras fermentum odio eu feugiat. Aliquam malesuada bibendum arcu vitae elementum curabitur. Sit amet facilisis magna etiam tempor orci eu. Turpis cursus in hac habitasse. Porttitor leo a diam sollicitudin. Ut faucibus pulvinar elementum integer enim neque volutpat ac. Eu sem integer vitae justo eget. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Et malesuada fames ac turpis egestas integer eget aliquet. Neque vitae tempus quam pellentesque nec nam.
-    
+                          </div>
+                          
+                        </div>
+                      </div>
+        </div>
 
+  </div>
+</section>
 <script src="index.js"></script>
   </body>
 </html>
diff --git a/app/src/index.js b/app/src/index.js
index 31d55f2..79b1e40 100644
--- a/app/src/index.js
+++ b/app/src/index.js
@@ -1,38 +1,12 @@
 // <meta name="restrictedextras" content="add id over here" />
 
 import Web3 from "web3";
-import creatorCoinArtifact from "../../build/contracts/Creator.json";
-
-function getMeta(metaName) {
-  const metas = document.getElementsByTagName('meta');
-  for (let i = 0; i < metas.length; i++) {
-    if (metas[i].getAttribute('name') === metaName) {
-      return metas[i].getAttribute('content');
-    }
-  }
-
-  return '';
-}
-
-function addImageOnTop(element){
-  var rect = element.getBoundingClientRect();
-  var width = element.offsetWidth;
-  var height = element.offsetHeight;
-  console.log(rect.top, rect.right, rect.bottom, rect.left);
-  console.log(width,height);
-  let content = '<div id="payforviewplaceholder" style=" position:absolute;left:'+ Math.floor(rect.left)+'px;top:'+Math.floor(rect.top)+'px;"> \
-  <img  src="https://via.placeholder.com/'+Math.floor(rect.width)+'x'+Math.floor(rect.height)+'/f7f7f7/000?text=Premium+Content+Click+to+Pay" onclick="App.payContent()" style="box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);;z-index:999">\
-  </div>'
-  document.body.innerHTML = document.body.innerHTML + content;
-}
-function hide(elements) {
-  elements = elements.length ? elements : [elements];
-  for (var index = 0; index < elements.length; index++) {
-    elements[index].style.display = "none";
-  }
+import creatorCoinArtifact from "../../build/contracts/CreatorFactory.json";
+export function displayPaywallCode(){
+  document.getElementById("paywallcode").style.display = "block";
+  document.getElementById("paywall").style.display = "none";
 }
 
-
 const App = {
   web3: null,
   account: null,
@@ -44,16 +18,12 @@ const App = {
     try {
       // get contract instance
       const networkId = await web3.eth.net.getId();
-      let addressOfContract = getMeta('contractAddress');
-      console.log("Using contract address at " + addressOfContract)
-      if(!addressOfContract){
+      // const networkType = web3.currentProvider.connection._url;
+      // console.log(networkType)
       const deployedNetwork = creatorCoinArtifact.networks[networkId];
-      addressOfContract = deployedNetwork.address;
-      }
-      console.log("Using contract address at " + addressOfContract)
       this.meta = new web3.eth.Contract(
         creatorCoinArtifact.abi,
-        addressOfContract
+        deployedNetwork.address
       );
 
       // get accounts
@@ -67,54 +37,59 @@ const App = {
   },
 
   refreshBalance: async function() {
-    const { balanceOf } = this.meta.methods;
-    const balance = await balanceOf(this.account).call();
-    console.log("balance is" + balance)
+    const { getDeployedCreators } = this.meta.methods;
+    const balance = await getDeployedCreators().call();
 
     const balanceElement = document.getElementsByClassName("balance")[0];
+    console.log(balance);
+    var content = ""
+    balance.forEach(function(entry) {
+      content = content.concat('\
+      <div class="card"> \
+  <div class="card-content has-text-centered"> \
+    <p class="subtitle"> \
+     '+entry+'\
+    </p>\
+  </div> <hr> \
+  <p class=" has-text-centered is-size-4">To add paywall copy paste this code in your HTML file </p><div class="box" style="margin:3%"> \
+  <xmp id="paywallcode" style="" class="is-family-code is-size-7"> <meta name="contractAddress" content="'+ entry+'" />  </xmp> \
+     <xmp id="paywallcode" style="" class="is-family-code is-size-7"> <script src="https://raw.githubusercontent.com/gauthamzz/ayyo/master/serve/paywall.js"></script> </xmp> \
+    </div>  <hr> <p class="is-size-4 has-text-centered">Add Premium Content </p>\
+    <div class="box" style="margin:3%"> <xmp class="is-family-code is-size-7"> \
+      <meta name="restrictedextras" content="id of content you want to hide" />  </xmp> \
+      <xmp class="is-family-code is-size-7"> <script src="https://raw.githubusercontent.com/gauthamzz/ayyo/master/serve/hide.js"></script> \
+      </xmp> </div>\
+</div> <br>\
+     ' )})
+    
 
-    if (balance == 0) {
-      let divToHide = getMeta('restrictedextras');
-      let element = document.getElementById(divToHide);
-      addImageOnTop(element);
-
-
-    } else {
-      var paywall = document.getElementById("payforviewplaceholder");
-      if (paywall) {
-        hide(document.getElementById("payforviewplaceholder"));
-      }
-     
-    }
-    // balanceElement.innerHTML = balance;
+    balanceElement.innerHTML = content;
   },
 
-  payContent: async function() {
-    // const amount = parseInt(document.getElementById("amount").value);
-    const { getPrice } = this.meta.methods;
-    let amount = await getPrice().call();
-    const { getLength } = this.meta.methods;
-    let lengthOfTokens = await getLength().call();
-    
-    amount = parseInt(amount) + parseFloat(0.001*lengthOfTokens);
-    console.log(amount)
-
-    // this.setStatus("Initiating transaction... (please wait)");
+  createCreator: async function() {
+    const expiration = parseInt(document.getElementById("expiration").value);
+    const price = parseInt(document.getElementById("price").value);
 
-    const { payContent } = this.meta.methods;
-    await payContent().send({
-      value: web3.toWei(amount, "ether"),
+    const { createCreator } = this.meta.methods;
+   
+    // skale 
+    await createCreator(expiration, price).send({
       from: this.account,
-      gas: "1000000"
+      gas: 8000000
     });
 
+    // // localhost
+    // await createCreator(expiration, price).send({
+    //   from: this.account
+    // });
+
     // this.setStatus("Transaction complete!");
     this.refreshBalance();
   },
 
   setStatus: function(message) {
-    // const status = document.getElementById("status");
-    // status.innerHTML = message;
+    const status = document.getElementById("status");
+    status.innerHTML = message;
   }
 };
 
diff --git a/app/src/type1.html b/app/src/type1.html
index 1bf7887..22db43e 100644
--- a/app/src/type1.html
+++ b/app/src/type1.html
@@ -69,3 +69,9 @@ <h2 class="subtitle">
 
   </body>
 </html>
+
+<!-- Add the following lines of code in your HTML to add a Premium Content -->
+
+<!--Optional  <meta name="contractAddress" content="0xb726... or ens" /> -->
+<meta name="restrictedextras" content="ID_OF_THE_PREMIUM_CONTENT" />    
+<script src="https://cdn.jsdelivr.net/gh/gauthamzz/ayyo@master/serve/hide.js"></script>
diff --git a/hidable/ava/index.html b/hidable/ava/index.html
index 46d6570..ab49c2f 100644
--- a/hidable/ava/index.html
+++ b/hidable/ava/index.html
@@ -9,9 +9,12 @@
     <link rel="stylesheet" href="dist/css/style.css">
     <script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>
 
+
     <meta name="restrictedextras" content="iframe" />
     <script src="hide.js"></script>
 
+
+
 </head>
 <body class="is-boxed has-animations">
     <div class="body-wrap boxed-container">
@@ -54,8 +57,8 @@ <h1 class="m-0">
             <section class="hero text-center">
                 <div class="container-sm">
                     <div class="hero-inner">
-                        <h1 class="hero-title h2-mobile mt-0 is-revealing">Awesome documentary</h1>
-                        <p class="hero-paragraph is-revealing">This content can be viewed for a price of 5$</p>
+                        <h1 class="hero-title h2-mobile mt-0 is-revealing">Documentary: Blockchain and US</h1>
+                        <p class="hero-paragraph is-revealing">The award-winning The Blockchain and Us is the first documentary film about blockchain technology .This content can be viewed for a price of ~1 ETH</p>
                        
                         <div class="hero-browser">
                             <div class="bubble-3 is-revealing">