feat: ERC1155 balance & iframe param passthrough

SmartTokenLabs · Oct 26, 2023 · 7eeecda · 7eeecda
1 parent 4980b06
commit 7eeecda
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 4 deletions.
diff --git a/javascript/engine-js/src/tokens/ITokenDetail.ts b/javascript/engine-js/src/tokens/ITokenDetail.ts
@@ -13,6 +13,7 @@ export interface ITokenDetail {
 	image?: string;
 	attributes?: NFTAttribute[];
 	data?: IAttestationData | any;
+	balance?: string // For ERC1155
 }
 
 export interface NFTAttribute {

diff --git a/javascript/tokenscript-viewer/src/components/viewers/token/token-viewer.tsx b/javascript/tokenscript-viewer/src/components/viewers/token/token-viewer.tsx
@@ -109,13 +109,14 @@ export class TokenViewer {
 					contractAddress: query.get("contract"),
 					name: tokenMeta.collectionData.title as string,
 					description: tokenMeta.collectionData.description as string,
-					image: tokenMeta.collectionData.image as string
+					image: tokenMeta.collectionData.image as string,
 				},
 				collectionId: tokenMeta.collection,
 				description: tokenMeta.description,
 				image: tokenMeta.image,
 				name: tokenMeta.title,
-				tokenId: tokenMeta.tokenId
+				tokenId: tokenMeta.tokenId,
+				balance: tokenMeta.balance
 			}
 
 			this.app.hideTsLoader();
@@ -211,7 +212,13 @@ export class TokenViewer {
 								<div class="main-info">
 									<h1>{this.tokenDetails.name}</h1>
 									<div class="owner-count">
-
+										<span style={{color: "#3D45FB"}}>
+											{
+												this.tokenDetails.collectionDetails.tokenType === "erc1155" ?
+													("balance: " + this.tokenDetails.balance) :
+													("#" + this.tokenDetails.tokenId)
+											}
+										</span>
 									</div>
 									<div class="collection-details">
 										<token-icon style={{width: "24px", borderRadius: "4px"}} src={this.tokenDetails.collectionDetails.image} imageTitle={this.tokenDetails.collectionDetails.name}/>

diff --git a/test-iframe-provider.html b/test-iframe-provider.html
@@ -9,10 +9,39 @@
 		<!-- ERC1155 fungible: http://localhost:3333/?viewType=joyid-token&chain=11155111&contract=0xdE915aFf3649568E15A94fe9b623Db3e7A0944F9&tokenId=3 -->
 		<!-- devcon: http://localhost:3333/?viewType=joyid-token&chain=1&contract=0x3c7e352481f4b2fdec1e642a3f0018661c77513d&tokenId=398233297468566556333642 -->
 		<div style="max-width: 600px; width: 100%; margin: 0 auto; min-height: 800px; position: relative; height: 100vh;">
-			<iframe id="frame" src="http://localhost:3333/?viewType=joyid-token&chain=11155111&contract=0xdE915aFf3649568E15A94fe9b623Db3e7A0944F9&tokenId=3"
+			<iframe id="frame" src=""
 					style="border: 0; width: 100%; height: 100%;"></iframe>
 		</div>
 		<script>
+			// Load iframe
+			const BASE_URL = "http://localhost:3333/";
+
+			let params;
+
+			const currentParams = new URLSearchParams(document.location.search);
+
+			if (currentParams.has("chain") && currentParams.has("contract") && currentParams.has("tokenId")){
+				params = new URLSearchParams();
+				params.set("chain", currentParams.get("chain"));
+				params.set("contract", currentParams.get("contract"));
+				params.set("tokenId", currentParams.get("tokenId"));
+			} else {
+				//params = new URLSearchParams("chain=11155111&contract=0xdE915aFf3649568E15A94fe9b623Db3e7A0944F9&tokenId=1"); // smart cat sepolia
+				//params = new URLSearchParams("chain=1&contract=0xA04664f6191D9A65F5F48c6F9d6Dd81CB636E65c&tokenId=398233297468566556333642"); // devcon
+				params = new URLSearchParams("chain=11155111&contract=0xdE915aFf3649568E15A94fe9b623Db3e7A0944F9&tokenId=1"); // ERC1155
+			}
+
+			params.set("viewType", "joyid-token");
+
+			loadIframeUrl(BASE_URL + "?" + params.toString())
+
+			function loadIframeUrl(url){
+				document.getElementById("frame").src = url;
+			}
+		</script>
+		<script>
+			// Metamask provider
+
 			const provider = new ethers.providers.Web3Provider(window.ethereum);
 			const iframe = document.getElementById("frame");