almost all frontend done

3scava1i3r-Projects · Jul 4, 2021 · f5e2c72 · f5e2c72
1 parent a61fffb
commit f5e2c72
Show file tree

Hide file tree

Showing 6 changed files with 283 additions and 0 deletions.
diff --git a/assets/toast.png b/assets/toast.png
diff --git a/css/dist/main.css b/css/dist/main.css
@@ -0,0 +1,58 @@
+@import url("https://fonts.googleapis.com/css2?family=Share+Tech&display=swap");
+* {
+  margin: 0px;
+  font-family: "Share Tech", sans-serif;
+}
+
+#body {
+  background-color: #34333ac9;
+}
+
+#estate-con {
+  margin-top: 100px;
+}
+
+#estate-card {
+  background-color: rgba(43, 43, 65, 0.685);
+  width: 420px;
+  border-radius: 20px;
+  height: 620px;
+  flex-direction: column;
+  float: left;
+  margin-left: 30px;
+  margin-right: 25px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  margin-top: 30px;
+}
+
+#estate-content {
+  font-size: 26px;
+  width: 410px;
+}
+
+#estate-img {
+  border-radius: 10px;
+  height: 80%;
+  width: 80%;
+  margin-top: 20px;
+}
+
+#estate-p {
+  color: white;
+  margin: 0px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#estate-a {
+  text-decoration: none;
+}
+
+#estate-btn {
+  border-radius: 10px;
+  color: cornflowerblue;
+  width: 130px;
+}
diff --git a/css/main.scss b/css/main.scss
@@ -0,0 +1,62 @@
+@import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');
+
+*{
+    margin: 0px;
+    font-family: 'Share Tech',sans-serif;
+
+}
+
+#body {
+    background-color: #34333ac9;
+}
+
+#estate-con {
+    margin-top: 100px;
+}
+
+#estate-card {
+    background-color: rgba(43, 43, 65, 0.685);
+    width: 420px;
+    border-radius: 20px;
+    height: 620px;
+    flex-direction: column;
+    float: left;
+    margin-left: 30px;
+    margin-right: 25px;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    margin-top: 30px;
+
+}
+
+#estate-content {
+    font-size: 26px;
+
+    width: 410px;
+}
+
+#estate-img {
+    border-radius: 10px;
+    height: 80%;
+    width: 80%;
+    margin-top: 20px;
+}
+
+#estate-p {
+    color: white;
+    margin: 0px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+#estate-a {
+    text-decoration: none;
+}
+
+#estate-btn {
+    border-radius: 10px;
+    color: cornflowerblue;
+    width: 130px;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="./js/index.js" type="module"></script>
+    <link rel="stylesheet" type="text/css" href="./css/dist/main.css" media="screen" />
+    <link rel="shortcut icon" type="image/jpg" href="./assets/toast.png"/>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+
+    <title>Toast</title>
+</head>
+<body id="body">
+    <h1>dflhnvsdjv</h1>
+
+
+    <div id="main">
+
+    </div>
+
+
+
+
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+
+</body>
+</html>
diff --git a/js/dist/index.dev.js b/js/dist/index.dev.js
@@ -0,0 +1,48 @@
+"use strict";
+
+/* const getlast10txn = async () => {
+  const options = { method: "GET" };
+  fetch(
+    `https://api.covalenthq.com/v1/31/address/${selectedACC}/transactions_v2/?no-logs=true&key=ckey_62dc169a991f4d7ebe7dd52afef:`,
+    options
+  )
+    .then((response) => response.json())
+    .then((char) => {
+      if (char.data.chain_id == 31) {
+        char.data.items.map((res, i) => {
+          if (i + 1 <= 10) {
+            try {
+              content = `
+          <div id="txncon">
+            <div id="txncard">
+                <div id="txncontent">
+                    <p id="txnp">from address:${res.from_address}</p>
+                    <p id="txnp">txn hash:${res.tx_hash}</p>
+                    <a href="https://explorer.testnet.rsk.co/tx/${res.tx_hash}" id="txna">more info</a>
+                </div>
+            </div>
+          </div>
+            `;
+              document.getElementById("last10txn").innerHTML += content;
+            } catch (error) {
+              console.log(error);
+            }
+          }
+        });
+      }
+    });
+};
+ */
+axios.post("https://api.thegraph.com/subgraphs/name/decentraland/marketplace", {
+  query: "\n                    {\n            estates(first:100){\n                owner{\n                id\n                },\n                size,\n                data{\n                id,\n                name,\n                ipns,\n                description\n                }\n                nft{\n                id,\n                tokenId,\n                contractAddress,\n                name,\n                image\n                }\n            }\n            }     \n          "
+}).then(function (res) {
+  res.data.data.estates.map(function (gg) {
+    try {
+      console.log(gg);
+      var content = "\n          <div id=\"estate-con\">\n            <div id=\"estate-card\">\n                <div id=\"estate-content\">\n                <img src=\"".concat(gg.nft.image, "\" alt=\"estate-image\" id=\"estate-img\">\n                    <p id=\"estate-p\">").concat(gg.nft.name, "</p>\n                    <p id=\"estate-p\">owner:").concat(gg.owner.id, "</p>\n                    <p id=\"estate-p\">contract address:").concat(gg.size, "</p>\n                    \n                    <button id=\"estate-btn\">\n                        <a href=\"https://market.decentraland.org/contracts/").concat(gg.nft.contractAddress, "/tokens/").concat(gg.nft.tokenId, "\" id=\"estate-a\">more info</a>\n                    </button>\n                </div>\n            </div>\n          </div>\n            ");
+      document.getElementById("main").innerHTML += content;
+    } catch (e) {
+      console.log(e);
+    }
+  });
+});
diff --git a/js/index.js b/js/index.js
@@ -0,0 +1,87 @@
+/* const getlast10txn = async () => {
+  const options = { method: "GET" };
+  fetch(
+    `https://api.covalenthq.com/v1/31/address/${selectedACC}/transactions_v2/?no-logs=true&key=ckey_62dc169a991f4d7ebe7dd52afef:`,
+    options
+  )
+    .then((response) => response.json())
+    .then((char) => {
+      if (char.data.chain_id == 31) {
+        char.data.items.map((res, i) => {
+          if (i + 1 <= 10) {
+            try {
+              content = `
+          <div id="txncon">
+            <div id="txncard">
+                <div id="txncontent">
+                    <p id="txnp">from address:${res.from_address}</p>
+                    <p id="txnp">txn hash:${res.tx_hash}</p>
+                    <a href="https://explorer.testnet.rsk.co/tx/${res.tx_hash}" id="txna">more info</a>
+                </div>
+            </div>
+          </div>
+            `;
+              document.getElementById("last10txn").innerHTML += content;
+            } catch (error) {
+              console.log(error);
+            }
+          }
+        });
+      }
+    });
+};
+ */
+
+axios
+  .post("https://api.thegraph.com/subgraphs/name/decentraland/marketplace", {
+    query: `
+                    {
+            estates(first:100){
+                owner{
+                id
+                },
+                size,
+                data{
+                id,
+                name,
+                ipns,
+                description
+                }
+                nft{
+                id,
+                tokenId,
+                contractAddress,
+                name,
+                image
+                }
+            }
+            }     
+          `,
+  })
+  .then((res) => {
+    res.data.data.estates.map((gg) => {
+        try {
+            console.log(gg)
+            let content = `
+          <div id="estate-con">
+            <div id="estate-card">
+                <div id="estate-content">
+                <img src="${gg.nft.image}" alt="estate-image" id="estate-img">
+                    <p id="estate-p">${gg.nft.name}</p>
+                    <p id="estate-p">owner:${gg.owner.id}</p>
+                    <p id="estate-p">contract address:${gg.size}</p>
+                    
+                    <button id="estate-btn">
+                        <a href="https://market.decentraland.org/contracts/${gg.nft.contractAddress}/tokens/${gg.nft.tokenId}" id="estate-a">more info</a>
+                    </button>
+                </div>
+            </div>
+          </div>
+            `;
+            document.getElementById("main").innerHTML += content; 
+        } catch (e) {
+            console.log(e)
+        }
+        })
+    })
+