added search page

added transaction hash
added option to copy hash directly

css/main.css

@@ -119,8 +119,9 @@ h3 {
 }
 
 .breakable {
-  overflow-wrap: break-word;
+  word-break: break-word;
-  letter-spacing: 0.06em;
+  font-weight: 500;
+  letter-spacing: 0.06rem;
 }
 
 .other-font {
@@ -322,6 +323,58 @@ ul .balance:last-of-type {
   min-height: 100vh;
 }
 
+#search_page h1 {
+  margin-top: 2rem;
+  font-weight: 500;
+  font-size: 3rem;
+}
+
+#search_page .input {
+  -webkit-animation: fade 0.4s;
+          animation: fade 0.4s;
+}
+
+#search_page .input input:valid ~ #suggestions {
+  opacity: 1;
+  pointer-events: all;
+  -webkit-transform: none;
+          transform: none;
+}
+
+#search_page #suggestions {
+  opacity: 0;
+  pointer-events: none;
+  -webkit-transform: translateY(-0.5rem);
+          transform: translateY(-0.5rem);
+  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
+  transition: opacity 0.3s, -webkit-transform 0.3s;
+  transition: transform 0.3s, opacity 0.3s;
+  transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  background: var(--background);
+  border-radius: 0.5rem;
+  padding: 0.5rem 0;
+  max-height: 30vh;
+  overflow-y: auto;
+  margin-top: 0.5rem;
+}
+
+#search_page #suggestions:empty {
+  padding: 0;
+}
+
+#search_page .suggestion {
+  padding: 0.6rem 1.5rem 0.6rem 3rem;
+  opacity: 0.8;
+  cursor: pointer;
+}
+
+#search_page .suggestion:hover, #search_page .suggestion:focus {
+  opacity: 1;
+}
+
 #main_search {
   position: relative;
   display: -webkit-box;
@@ -349,56 +402,12 @@ ul .balance:last-of-type {
   color: rgba(var(--text-light), 1);
 }
 
-#main_search .input {
-  border-radius: 0.5rem;
-}
-
-#main_search .input input:valid ~ #suggestions {
-  opacity: 1;
-  pointer-events: all;
-  -webkit-transform: none;
-          transform: none;
-}
-
 #main_search label {
   position: relative;
 }
 
-#main_search #suggestions {
-  opacity: 0;
-  pointer-events: none;
-  -webkit-transform: translateY(-0.5rem);
-          transform: translateY(-0.5rem);
-  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-  transition: opacity 0.3s, -webkit-transform 0.3s;
-  transition: transform 0.3s, opacity 0.3s;
-  transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
-  position: absolute;
-  top: 100%;
-  width: 100%;
-  background: var(--background);
-  border-radius: 0.5rem;
-  padding: 0.5rem 0;
-  max-height: 30vh;
-  overflow-y: auto;
-  margin-top: 0.5rem;
-}
-
-#main_search #suggestions:empty {
-  padding: 0;
-}
-
-#main_search .suggestion {
-  padding: 0.6rem 1.5rem 0.6rem 3rem;
-  opacity: 0.8;
-  cursor: pointer;
-}
-
-#main_search .suggestion:hover, #main_search .suggestion:focus {
-  opacity: 1;
-}
-
 .input {
+  border-radius: 0.2rem;
   position: relative;
   display: -ms-grid;
   display: grid;
@@ -425,15 +434,46 @@ ul .balance:last-of-type {
 }
 
 .icon {
-  height: 1.2rem;
+  height: 1rem;
   overflow: visible;
-  width: 1.2rem;
+  width: 1rem;
   fill: none;
   stroke: rgba(var(--text), 1);
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-width: 6;
-  opacity: 0.8;
+}
+
+.copy-row {
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: 1fr auto;
+      grid-template-columns: 1fr auto;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  gap: 0.5rem;
+}
+
+.copy-row .icon {
+  cursor: pointer;
+}
+
+#textCopied {
+  padding: 1rem;
+  border-radius: 2rem;
+  background: rgba(var(--text), 0.2);
+  color: rgba(var(--text), 1);
+  position: fixed;
+  bottom: 0;
+  pointer-events: none;
+  margin: 2rem 0;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  -webkit-transition: 0.3s opacity ease;
+  transition: 0.3s opacity ease;
+  z-index: 20;
 }
 
 @-webkit-keyframes flyInLeft {
@@ -663,8 +703,17 @@ ul .balance:last-of-type {
 }
 
 #page_header .icon {
-  height: 2rem;
+  height: 1.8rem;
-  width: 2rem;
+  width: 1.8rem;
+  cursor: pointer;
+}
+
+#page_header .icon:first-of-type {
+  margin-right: 1rem;
+  padding: 0.4rem 0.4rem 0.4rem 0;
+}
+
+#page_header .icon:nth-of-type(2) {
   padding: 0.4rem 0 0.4rem 0.4rem;
 }
 
@@ -909,7 +958,7 @@ p {
   font-weight: 500;
 }
 
-.transaction .icon {
+.transaction > .icon:first-of-type {
   stroke-width: 4;
   -ms-grid-column-align: center;
       justify-self: center;

css/main.scss

@@ -83,8 +83,9 @@ h3{
     display: none !important;
 }
 .breakable{
-    overflow-wrap: break-word;
+    word-break: break-word;
-    letter-spacing: 0.06em;
+    font-weight: 500;
+    letter-spacing: 0.06rem;
 }
 .other-font{
     font-family: 'Barlow', sans-serif;
@@ -232,34 +233,20 @@ ul{
     grid-template-rows: auto 1fr auto;
     min-height: 100vh;
 }
-#main_search{
+#search_page{
-    position: relative;
+    h1{
-    display: flex;
-    flex-direction: column;
-    h2{
         margin-top: 2rem;
-        align-self: flex-start;
+        font-weight: 500;
-        font-size: 4rem;
+        font-size: 3rem;
-        letter-spacing: 0.1em;
-        font-weight: 600;
-    }
-    h4{
-        line-height: 1.4em;
-        margin-top: 2rem;
-        font-weight: 400;
-        color: rgba(var(--text-light), 1);
     }
     .input{
-        border-radius: 0.5rem; 
+        animation: fade 0.4s;
         input:valid ~ #suggestions{
             opacity: 1;
             pointer-events: all;
             transform: none;
         }
     }
-    label{
-        position: relative;
-    }
     #suggestions{
         opacity: 0;
         pointer-events: none;
@@ -287,7 +274,29 @@ ul{
         }
     }
 }
+#main_search{
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    h2{
+        margin-top: 2rem;
+        align-self: flex-start;
+        font-size: 4rem;
+        letter-spacing: 0.1em;
+        font-weight: 600;
+    }
+    h4{
+        line-height: 1.4em;
+        margin-top: 2rem;
+        font-weight: 400;
+        color: rgba(var(--text-light), 1);
+    }
+    label{
+        position: relative;
+    }
+}
 .input{
+    border-radius: 0.2rem; 
     position: relative;
     display: grid;
     grid-template-columns: auto 1fr;
@@ -308,15 +317,37 @@ ul{
     }
 }
 .icon{
-    height: 1.2rem;
+    height: 1rem;
     overflow: visible;
-    width: 1.2rem;
+    width: 1rem;
     fill: none;
     stroke: rgba(var(--text), 1);
     stroke-linecap: round;
     stroke-linejoin: round;
     stroke-width: 6;
-    opacity: 0.8;
+}
+.copy-row{
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    gap: 0.5rem;
+    .icon{
+        cursor: pointer;
+    }
+}
+#textCopied{
+    padding: 1rem;
+    border-radius: 2rem;
+    background: rgba(var(--text), 0.2);
+    color: rgba(var(--text), 1);
+    position: fixed;
+    bottom: 0;
+    pointer-events: none;
+    margin: 2rem 0;
+    left: 50%;
+    transform: translateX(-50%);
+    transition: 0.3s opacity ease;
+    z-index: 20;
 }
 @keyframes flyInLeft{
     from{
@@ -435,8 +466,15 @@ ul{
         text-transform: capitalize;
     }
     .icon{
-        height: 2rem;
+        height: 1.8rem;
-        width: 2rem;
+        width: 1.8rem;
+        cursor: pointer;
+    }
+    .icon:first-of-type{
+        margin-right: 1rem;
+        padding: 0.4rem 0.4rem 0.4rem 0;
+    }
+    .icon:nth-of-type(2){
         padding: 0.4rem 0 0.4rem 0.4rem;
     }
 }
@@ -603,7 +641,7 @@ p{
     h4{
         font-weight: 500;
     }
-    .icon{
+    & > .icon:first-of-type{
         stroke-width: 4;
         justify-self: center;
         height: 3rem;

index.html

@@ -9,6 +9,9 @@
 </head>
 
 <body data-theme="dark">
+	<h5 id="textCopied" class="hide">
+		Copied
+	</h5>
 	<div id="loader_page" class="hide-completely">
 		<svg id="loader" class="icon" viewBox="0 0 64 64">
 			<title>Loading</title>
@@ -17,7 +20,12 @@
 		<h4>Loading</h4>
 	</div>
 	<header id="page_header" class="flex margin">
-    <h3 id="page_title">Block</h3>
+		<svg class="icon" onclick="history.back()" viewBox="0 0 64 64">
+			<title>back_arrow</title>
+			<polyline points="25.97 6.24 0.5 32.06 25.92 57.83" />
+			<line x1="20" y1="32" x2="64" y2="32" />
+		</svg>
+		<h3 id="page_title"></h3>
 		<svg id="secondary_search_btn" class="icon margin-left-auto hover" viewBox="0 0 64 64">
 			<title>
 				search for block, transactions, address, token or contract
@@ -27,16 +35,6 @@
 		</svg>
 	</header>
 	<main id="page_container">
-    <!--<div id="search_page" class="page hide-completely">
-            <label id="secondary_search" class="input">
-                <svg class="icon" viewBox="0 0 64 64">
-                    <title>search icon</title>
-                    <circle cx="25.34" cy="25.34" r="24.84"/>
-                    <line x1="63.65" y1="63.65" x2="42.91" y2="42.91"/>
-                </svg>
-                <input type="search" placeholder="Search block, transactions, address, token or contract">
-            </label>
-        </div>  -->
 	</main>
 
 	<!-- Set urls for token and flo Apis -->
@@ -97,14 +95,13 @@
               <div id="main_search">
                   <h2 class="other-font">FLO SCOUT</h2>
                   <h4>Search for<br>block, transaction, address,<br>token and contract</h4>
-                  <label id="primary_search" class="input">
+                  <label id="primary_search" class="input" onclick="render('search_page')">
                       <svg class="icon" viewBox="0 0 64 64">
                           <title>search icon</title>
                           <circle cx="25.34" cy="25.34" r="24.84"/>
                           <line x1="63.65" y1="63.65" x2="42.91" y2="42.91"/>
                       </svg>
-                      <input id='main_search_field' autocomplete="off" type="search" placeholder="Search" required>
+                      <input id="homepage_search" autocomplete="off" type="search" placeholder="Search" disabled>
-                      <ul id="suggestions"></ul>
                   </label>
               </div>
           <div id="highlights">
@@ -236,6 +233,14 @@
               <div class='head'>
                   	<h5 class="label">${type}</h5>
                   	<h2 class="token uppercase">${name}</h2>
+					<h5 class="label">Hash</h5>
+					<div class="copy-row">
+                    	<h4 class="breakable copy">${hash}</h4>
+                        <svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 54 64">
+                            <title>Copy</title>
+                            <path d="M53,0H22.14a6,6,0,0,0-6,6v5H11a6,6,0,0,0-6,6V58a6,6,0,0,0,6,6H41.86a6,6,0,0,0,6-6V53H53a6,6,0,0,0,6-6V6A6,6,0,0,0,53,0ZM43.89,58a2,2,0,0,1-2,2H11a2,2,0,0,1-2-2V17.06a2,2,0,0,1,2-2H41.86a2,2,0,0,1,2,2ZM55,46.94a2,2,0,0,1-2,2H47.89V17.06a6,6,0,0,0-6-6H20.11V6a2,2,0,0,1,2-2H53a2,2,0,0,1,2,2Z" transform="translate(-5)"/>
+                        </svg>
+                    </div>
               </div>
               <div class="card">
 					<h5 class="label">Block</h5>
@@ -250,21 +255,37 @@
               <div class="card">
 					<h5 class="label">FLO Data</h5>
 					<p>${floData}</p>
-                  <h5 class="label">Hash</h5>
-                  <h4 class="breakable">${hash}</h4>
 					<h5 class="label">Block Confirmations</h5>
 					<h4>${confirmations}</h4>
               </div>
               `;
 				return page;
 			},
-      AlltransactionsPage() {
+			searchPage() {
+				let page = document.createElement("div");
+				page.classList.add("page");
+				page.id = "search_page";
+				page.innerHTML = `
+				<h1 class="other-font">Search</h1>
+				<label id="secondary_search" class="input">
+					<svg class="icon" viewBox="0 0 64 64">
+						<title>search icon</title>
+						<circle cx="25.34" cy="25.34" r="24.84"/>
+						<line x1="63.65" y1="63.65" x2="42.91" y2="42.91"/>
+					</svg>
+					<input id='main_search_field' autocomplete="off" type="search" placeholder="block, transactions, address, token or contract" required>
+					<ul id="suggestions"></ul>
+				</label>
+				`
+				return page;
+			},
+			alltransactionsPage() {
 				let page = document.createElement("div");
 				page.classList.add("page", "transaction-container");
 				page.id = "all_transactions_page";
 				return page;
 			},
-      AllBlocksPage() {
+			allBlocksPage() {
 				let page = document.createElement("div");
 				page.classList.add("page");
 				page.id = "all_blocks_page";
@@ -404,6 +425,14 @@
                                   <h4 class="token uppercase">${token}</h4>
                               </div>`
 				contractInfo.innerHTML = `    
+									<h5 class="label">Hash</h5>
+									<div class="copy-row">
+										<h4 class="breakable copy hash">${hash}</h4>
+										<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 54 64">
+											<title>Copy</title>
+											<path d="M53,0H22.14a6,6,0,0,0-6,6v5H11a6,6,0,0,0-6,6V58a6,6,0,0,0,6,6H41.86a6,6,0,0,0,6-6V53H53a6,6,0,0,0,6-6V6A6,6,0,0,0,53,0ZM43.89,58a2,2,0,0,1-2,2H11a2,2,0,0,1-2-2V17.06a2,2,0,0,1,2-2H41.86a2,2,0,0,1,2,2ZM55,46.94a2,2,0,0,1-2,2H47.89V17.06a6,6,0,0,0-6-6H20.11V6a2,2,0,0,1,2-2H53a2,2,0,0,1,2,2Z" transform="translate(-5)"/>
+										</svg>
+									</div>
 									<h5 class="label">Sender</h5>
 									<h4 class="address">${sender}</h4>
 									<h5 class="label">receiver</h5>
@@ -436,6 +465,14 @@
                                   <h4 class="token uppercase">${token}</h4>
                               </div>
                               <div class="contract-info">
+									<h5 class="label">Hash</h5>
+									<div class="copy-row">
+										<h4 class="breakable copy hash">${hash}</h4>
+										<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 54 64">
+											<title>Copy</title>
+											<path d="M53,0H22.14a6,6,0,0,0-6,6v5H11a6,6,0,0,0-6,6V58a6,6,0,0,0,6,6H41.86a6,6,0,0,0,6-6V53H53a6,6,0,0,0,6-6V6A6,6,0,0,0,53,0ZM43.89,58a2,2,0,0,1-2,2H11a2,2,0,0,1-2-2V17.06a2,2,0,0,1,2-2H41.86a2,2,0,0,1,2,2ZM55,46.94a2,2,0,0,1-2,2H47.89V17.06a6,6,0,0,0-6-6H20.11V6a2,2,0,0,1,2-2H53a2,2,0,0,1,2,2Z" transform="translate(-5)"/>
+										</svg>
+									</div>
 									<h5 class="label">Sender</h5>
 									<h4 class="address">${sender}</h4>
 									<h5 class="label">receiver</h5>
@@ -468,6 +505,14 @@
                                   <h4 class="token uppercase">${token}</h4>
                               </div>
                               <div class="contract-info">
+							  		<h5 class="label">Hash</h5>
+							  		<div class="copy-row">
+										<h4 class="breakable copy hash">${hash}</h4>
+										<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 54 64">
+											<title>Copy</title>
+											<path d="M53,0H22.14a6,6,0,0,0-6,6v5H11a6,6,0,0,0-6,6V58a6,6,0,0,0,6,6H41.86a6,6,0,0,0,6-6V53H53a6,6,0,0,0,6-6V6A6,6,0,0,0,53,0ZM43.89,58a2,2,0,0,1-2,2H11a2,2,0,0,1-2-2V17.06a2,2,0,0,1,2-2H41.86a2,2,0,0,1,2,2ZM55,46.94a2,2,0,0,1-2,2H47.89V17.06a6,6,0,0,0-6-6H20.11V6a2,2,0,0,1,2-2H53a2,2,0,0,1,2,2Z" transform="translate(-5)"/>
+										</svg>
+									</div>
 									<h5 class="label">Incorporation address</h5>
 									<h4 class="address">${incAddress}</h4>
 									<h5 class="label">token name</h5>
@@ -497,7 +542,15 @@
                                   <h5 class="label">smart contract </h5>
                                   <h4 class="uppercase">trigger</h4>
                               </div>
+							  <h5 class="label">Hash</h5>
                               <div class="contract-info">
+							  		<div class="copy-row">
+										<h4 class="breakable copy hash">${hash}</h4>
+										<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 54 64">
+											<title>Copy</title>
+											<path d="M53,0H22.14a6,6,0,0,0-6,6v5H11a6,6,0,0,0-6,6V58a6,6,0,0,0,6,6H41.86a6,6,0,0,0,6-6V53H53a6,6,0,0,0,6-6V6A6,6,0,0,0,53,0ZM43.89,58a2,2,0,0,1-2,2H11a2,2,0,0,1-2-2V17.06a2,2,0,0,1,2-2H41.86a2,2,0,0,1,2,2ZM55,46.94a2,2,0,0,1-2,2H47.89V17.06a6,6,0,0,0-6-6H20.11V6a2,2,0,0,1,2-2H53a2,2,0,0,1,2,2Z" transform="translate(-5)"/>
+										</svg>
+									</div>
 									<h5 class="label">Contract name</h5>
 									<h4>${contractName}</h4>
 									<h5 class="label">contract address</h5>
@@ -529,6 +582,14 @@
                                   <h4 class="token uppercase">${token}</h4>
                               </div>
                               <div class="contract-info">
+							  		<h5 class="label">Hash</h5>
+									<div class="copy-row">
+										<h4 class="breakable copy hash">${hash}</h4>
+										<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 54 64">
+											<title>Copy</title>
+											<path d="M53,0H22.14a6,6,0,0,0-6,6v5H11a6,6,0,0,0-6,6V58a6,6,0,0,0,6,6H41.86a6,6,0,0,0,6-6V53H53a6,6,0,0,0,6-6V6A6,6,0,0,0,53,0ZM43.89,58a2,2,0,0,1-2,2H11a2,2,0,0,1-2-2V17.06a2,2,0,0,1,2-2H41.86a2,2,0,0,1,2,2ZM55,46.94a2,2,0,0,1-2,2H47.89V17.06a6,6,0,0,0-6-6H20.11V6a2,2,0,0,1,2-2H53a2,2,0,0,1,2,2Z" transform="translate(-5)"/>
+										</svg>
+									</div>
                                   <h5 class="label">Contract name</h5>
                                   <h4>${contractName}</h4>
                                   <h5 class="label">Contract address</h5>
@@ -694,6 +755,17 @@
 				pageTitle.textContent = "block";
 				loading()
 			}
+			if (pageId === "search_page") {
+				pageTitle.textContent = "";
+				pageHeader.querySelector('#secondary_search_btn').classList.add("hide-completely");
+				pageContainer.append(create.searchPage());
+				document.getElementById("main_search_field").addEventListener("keydown", function (e) {
+					if (e.key === 'Enter') {
+						processNavbarSearch();
+					}
+				});
+				loading()
+			} else pageHeader.querySelector('#secondary_search_btn').classList.remove("hide-completely");
 
 			if (pageId === "homepage") {
 				pageHeader.classList.add("hide-completely");
@@ -701,12 +773,6 @@
 				pageContainer.append(create.homepage(data));
 				loading();
 
-        document.getElementById("main_search_field").addEventListener("keydown", function (e) {
-          if (e.key === 'Enter') {
-            processNavbarSearch();
-          }
-        });
-
 				let themeToggler = document.getElementById("theme_toggle"),
 					body = document.querySelector("body");
 				if (localStorage.theme === "dark") {
@@ -753,7 +819,7 @@
 
 			if (pageId === "all_blocks_page") {
 				let allBlocks = await getAllBlocks(100);
-        pageContainer.append(create.AllBlocksPage())
+				pageContainer.append(create.allBlocksPage())
 				pageTitle.textContent = "All Blocks";
 				for (block in allBlocks) {
 					frag.append(create.blockCard(allBlocks[block].height, allBlocks[block].tx.length))
@@ -765,7 +831,7 @@
 			if (pageId === "all_transactions_page") {
 				let allTxs = await getAllTxs();
 				pageTitle.textContent = "All Transactions";
-        pageContainer.append(create.AlltransactionsPage())
+				pageContainer.append(create.alltransactionsPage())
 				appendTransactions('all_transactions_page', allTxs)
 				loading()
 			}
@@ -784,8 +850,6 @@
 			tabMounted = false;
 		}
 
-    function renderTransactions() { }
-
 		window.addEventListener("load", async () => {
 
 			var hashvalue = location.hash.slice(1);
@@ -817,14 +881,6 @@
 					history.pushState(appState, null, `#${e.target.textContent}`)
 				}
 				if (e.target.closest(".hash") && prevField !== e.target.textContent) {
-          render("block_page", e.target.textContent);
-          appState = {
-            page: "block_page",
-            thisField: e.target.textContent,
-          };
-          history.pushState(appState, null, `#${e.target.textContent}`)
-        }
-        if (!e.target.classList.contains("token") && !e.target.classList.contains("address") && e.target.closest(".transaction") && prevField !== e.target.textContent) {
 					render("transaction_page", e.target.closest(".transaction").id);
 					appState = {
 						page: "transaction_page",
@@ -852,8 +908,12 @@
 					showTab(e.target.closest(".tab"));
 				}
 				if (e.target.closest("#secondary_search_btn")) {
-          render("homepage")
+					render("search_page")
-          location.hash = ''
+					appState = {
+						page: "search_page",
+						thisField: null,
+					}
+					history.pushState(appState, null, null)
 				}
 				if (e.target.closest('.suggestion')) {
 					let searchBox = document.getElementById('main_search_field');
@@ -951,6 +1011,23 @@
 			else loader.classList.add("hide-completely");
 		}
 
+		function copyToClipboard(parent) {
+			let input = document.createElement('textarea'),
+				toast = document.getElementById('textCopied'),
+				textToCopy = parent.querySelector('.copy');
+			input.setAttribute('readonly', '');
+			input.setAttribute('style', 'position: absolute; left: -9999px');
+			document.body.appendChild(input);
+			input.value = textToCopy.textContent;
+			input.select();
+			document.execCommand('copy');
+			document.body.removeChild(input);
+			toast.classList.remove('hide');
+			setTimeout(() => {
+				toast.classList.add('hide');
+			}, 2000)
+		}
+
 		async function getBannerData() {
 			const response = await fetch(`${tokenapiUrl}/api/v1.0/getSystemData`),
 				data = await response.json(),