feat: various enhancements for opensea viewer

- Add "Powered by TokenScript" banner - Fix scrollbar padding - Various other CSS fixes
SmartTokenLabs · Nov 8, 2023 · 6c5890c · 6c5890c
1 parent 88e869f
commit 6c5890c
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 15 deletions.
diff --git a/javascript/tokenscript-viewer/src/assets/test-opensea-iframe.html b/javascript/tokenscript-viewer/src/assets/test-opensea-iframe.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8"/>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/ethers/5.7.2/ethers.umd.min.js" integrity="sha512-FDcVY+g7vc5CXANbrTSg1K5qLyriCsGDYCE02Li1tXEYdNQPvLPHNE+rT2Mjei8N7fZbe0WLhw27j2SrGRpdMg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+	</head>
+	<body style="margin: 0;">
+		<div style="max-width: 900px; width: 100%; margin: 0 auto; position: relative; height: 100dvh;">
+			<iframe id="frame" src="http://localhost:3333/?viewType=opensea&chain=137&contract=0xD5cA946AC1c1F24Eb26dae9e1A53ba6a02bd97Fe&tokenId=3803829543" sandbox="allow-scripts"
+					style="border: 0; width: 100%; height: 100%;"></iframe>
+		</div>
+	</body>
+</html>
diff --git a/javascript/tokenscript-viewer/src/components/common/card-view/card-popover.css b/javascript/tokenscript-viewer/src/components/common/card-view/card-popover.css
@@ -1,7 +1,6 @@
 
-:host .popover-container {
-	max-width: 500px;
-	max-height: 700px;
+card-popover .popover-container {
+	padding: 10px 0 !important;
 }
 
 .card-container {

diff --git a/javascript/tokenscript-viewer/src/components/viewers/opensea/opensea-viewer.css b/javascript/tokenscript-viewer/src/components/viewers/opensea/opensea-viewer.css
@@ -3,21 +3,40 @@ header {
 	display: none;
 }
 
-opensea-viewer {
-	height: 100vh !important;
-	padding: 10px;
+body {
+	overflow: hidden;
 }
 
-.opensea-viewer, card-view {
-	display: block;
-	height: 100% !important;
+.opensea-header {
+	height: 30px;
+	background: #000;
+	color: #fff;
+	display: flex;
+	align-items: center;
+}
+
+.opensea-header span {
+	font-size: 12px;
+	padding-left: 10px;
+}
+
+.opensea-header .header-icon {
+	height: 20px !important;
+	padding-left: 5px;
+	padding-top: 2px;
+}
+
+opensea-viewer, .opensea-viewer, card-view, .card-container {
+	display: flex !important;
+	flex-direction: column;
+	flex-grow: 1;
 }
 
 .card-container {
 	max-width: 900px !important;
-	height: 100% !important;
 	margin: 0 auto !important;
 	max-height: unset !important;
+	width: 100%;
 }
 
 .tokenscript-frame {

diff --git a/javascript/tokenscript-viewer/src/components/viewers/opensea/opensea-viewer.tsx b/javascript/tokenscript-viewer/src/components/viewers/opensea/opensea-viewer.tsx
@@ -53,6 +53,10 @@ export class OpenseaViewer {
 	}) hideLoader: EventEmitter<void>;
 
 	async componentWillLoad(){
+		this.app.showTsLoader();
+	}
+
+	async componentDidLoad(){
 
 		try {
 			const query = new URLSearchParams(document.location.search.substring(1));
@@ -65,6 +69,7 @@ export class OpenseaViewer {
 			this.urlRequest = query;
 
 			await this.processUrlLoad();
+			await this.loadTokenScript();
 
 		} catch (e){
 			console.error(e);
@@ -74,10 +79,7 @@ export class OpenseaViewer {
 				description: e.message
 			});
 		}
-	}
 
-	async componentDidLoad(){
-		this.loadTokenScript();
 		this.app.hideTsLoader();
 	}
 
@@ -92,8 +94,6 @@ export class OpenseaViewer {
 
 		if (query.has("chain") && query.has("contract") && query.has("tokenId")){
 
-			this.app.showTsLoader();
-
 			this.tokenDetails = await getSingleTokenMetadata(parseInt(query.get("chain")), query.get("contract"), query.get("tokenId"));
 
 			console.log("Token meta loaded!", this.tokenDetails);
@@ -156,6 +156,10 @@ export class OpenseaViewer {
 		return (
 			<Host>
 				<card-view></card-view>
+				<div class="opensea-header">
+					<span>Powered by</span>
+					<img class="header-icon" alt="TokenScript icon" src="assets/icon/tokenscript-logo.svg"/>
+				</div>
 			</Host>
 		)
 	}