Merge branch 'staging'

SmartTokenLabs · Nov 16, 2023 · 7df48f4 · 7df48f4
2 parents 389952f + f2902e1
commit 7df48f4
Show file tree

Hide file tree

Showing 7 changed files with 604 additions and 21 deletions.
diff --git a/javascript/tokenscript-viewer/src/assets/icon/sl-icon-white.png b/javascript/tokenscript-viewer/src/assets/icon/sl-icon-white.png
diff --git a/javascript/tokenscript-viewer/src/assets/test-iframe-provider.html b/javascript/tokenscript-viewer/src/assets/test-iframe-provider.html
@@ -21,8 +21,8 @@
 		</div>
 		<script>
 			// Load iframe
-			const BASE_URL = "https://viewer-staging.tokenscript.org/";
-				// "http://localhost:3333/";
+			const BASE_URL = "https://viewer-staging.tokenscript.org";
+				// "http://localhost:3333";
 
 			let params;
 

diff --git a/javascript/tokenscript-viewer/src/assets/tokenscripts/smart-cat-mumbai.tsml b/javascript/tokenscript-viewer/src/assets/tokenscripts/smart-cat-mumbai.tsml
diff --git a/javascript/tokenscript-viewer/src/assets/tokenscripts/smart-cat-prod.tsml b/javascript/tokenscript-viewer/src/assets/tokenscripts/smart-cat-prod.tsml
diff --git a/javascript/tokenscript-viewer/src/components/viewers/joyid-token/action-bar.tsx b/javascript/tokenscript-viewer/src/components/viewers/joyid-token/action-bar.tsx
@@ -62,6 +62,11 @@ export class ActionBar {
 		})
 	}
 
+	componentDidLoad(){
+		if (this.tokenScript)
+			this.initTokenScript();
+	}
+
 	// TODO: This is copied from tokens-grid-item, dedupe required
 	private async loadCardButtons(){
 

diff --git a/javascript/tokenscript-viewer/src/components/viewers/opensea/opensea-viewer.css b/javascript/tokenscript-viewer/src/components/viewers/opensea/opensea-viewer.css
@@ -26,14 +26,74 @@ body {
 	padding-top: 2px;
 }
 
+.opensea-img-container {
+	display: flex;
+	flex-grow: 1;
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: top;
+}
+
+.info-button, .close-button {
+	font-size: 30px;
+	background: #000;
+	color: #fff;
+	width: 40px;
+	height: 40px;
+	border-radius: 20px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+}
+
+.info-button img {
+	width: 90%;
+}
+
+.info-button-container {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 30;
+	height: 40px;
+	width: 40px;
+	margin: 20px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.close-button {
+	position: absolute;
+	top: 0;
+	right: 0;
+	z-index: 50;
+	margin: 20px;
+	text-align: center;
+	display: table-cell;
+}
+
+.card-overlay {
+	position: absolute;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 40;
+}
+
+opensea-viewer, .opensea-viewer {
+	position: relative;
+}
+
 opensea-viewer, .opensea-viewer, card-view, .card-container {
 	display: flex !important;
 	flex-direction: column;
 	flex-grow: 1;
 }
 
 .card-container {
-	max-width: 900px !important;
+	max-width: unset !important;
 	margin: 0 auto !important;
 	max-height: unset !important;
 	width: 100%;

diff --git a/javascript/tokenscript-viewer/src/components/viewers/opensea/opensea-viewer.tsx b/javascript/tokenscript-viewer/src/components/viewers/opensea/opensea-viewer.tsx
@@ -27,6 +27,9 @@ export class OpenseaViewer {
 	@State()
 	tokenScript: TokenScript;
 
+	@State()
+	showInfoCard = false;
+
 	viewBinding: ViewBinding;
 
 	urlRequest: URLSearchParams;
@@ -69,7 +72,7 @@ export class OpenseaViewer {
 			this.urlRequest = query;
 
 			await this.processUrlLoad();
-			await this.loadTokenScript();
+			this.loadTokenScript();
 
 		} catch (e){
 			console.error(e);
@@ -140,22 +143,50 @@ export class OpenseaViewer {
 				this.viewBinding.setTokenScript(this.tokenScript);
 				this.tokenScript.setViewBinding(this.viewBinding);
 
-				const infoCard = this.tokenScript.getCards().find((card) => card.type === "token");
 
-				if (infoCard)
-					this.tokenScript.showOrExecuteTokenCard(infoCard);
 			}
 
 		} catch (e){
 			console.warn(e.message);
 		}
 	}
 
+	private displayInfoCard(){
+		const infoCard = this.tokenScript.getCards().find((card) => card.type === "token");
+
+		if (infoCard) {
+			this.tokenScript.showOrExecuteTokenCard(infoCard);
+			this.showInfoCard = true
+		}
+	}
+
 	render(){
 
 		return (
 			<Host>
-				<card-view></card-view>
+				<div class="opensea-viewer">
+				{ this.tokenDetails ?
+					[
+						<div class="opensea-img-container" style={{backgroundImage: "url(" + this.tokenDetails.image + ")"}} title={this.tokenDetails.name}>
+							<div class="info-button-container">
+								{ this.tokenScript ?
+									<div class="info-button" title="Token Information" onClick={() => this.displayInfoCard()}>
+										<img alt="Smart Layer" title="Token Information" src="/assets/icon/sl-icon-white.png" />
+									</div> :
+									<loading-spinner size="small" />
+								}
+							</div>
+						</div>,
+						<div class="card-overlay" style={{display: (this.showInfoCard ? "flex" : "none")}}>
+							<div class="close-button" onClick={() => {
+								this.showInfoCard = false;
+								this.tokenScript.getViewController().unloadTokenCard();
+							}}>x</div>
+							<card-view></card-view>
+						</div>
+					]
+				 : ''}
+				</div>
 				<div class="opensea-header">
 					<span>Powered by</span>
 					<img class="header-icon" alt="TokenScript icon" src="assets/icon/tokenscript-logo.svg"/>