fix: Use scriptId parameter to support EIP-7738 in all views

SmartTokenLabs · Oct 18, 2024 · 9d423c0 · 9d423c0
1 parent 6bb7b1f
commit 9d423c0
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 29 deletions.
diff --git a/javascript/tokenscript-viewer/src/components/viewers/alphawallet/alphawallet-viewer.tsx b/javascript/tokenscript-viewer/src/components/viewers/alphawallet/alphawallet-viewer.tsx
@@ -81,7 +81,7 @@ export class SmartTokenStoreViewer {
 
 	async processUrlLoad(){
 
-		let {chain, contract, tokenId, tokenscriptUrl, emulator} = getTokenUrlParams();
+		let {chain, contract, tokenId, scriptId, tokenscriptUrl, emulator} = getTokenUrlParams();
 
 		this.app.showTsLoader();
 
@@ -101,12 +101,12 @@ export class SmartTokenStoreViewer {
 			});
 		}
 
-		await this.loadTokenScript(chain, contract, tokenId, tokenscriptUrl);
+		await this.loadTokenScript(chain, contract, tokenId, scriptId, tokenscriptUrl);
 	}
 
-	private async loadTokenScript(chain: number, contract: string, tokenId?: string, tokenScriptUrl?: string){
+	private async loadTokenScript(chain: number, contract: string, tokenId?: string, scriptId?: string, tokenScriptUrl?: string){
 
-		this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, this.collectionDetails, this.tokenDetails, tokenId, tokenScriptUrl);
+		this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, scriptId, this.collectionDetails, this.tokenDetails, tokenId, tokenScriptUrl);
 
 		// Reload cards after the token is updated
 		this.tokenScript.on("TOKENS_UPDATED", (data) => {

diff --git a/javascript/tokenscript-viewer/src/components/viewers/joyid-token/token-viewer.tsx b/javascript/tokenscript-viewer/src/components/viewers/joyid-token/token-viewer.tsx
@@ -97,7 +97,7 @@ export class TokenViewer {
 
 	async processUrlLoad() {
 
-		let {query, chain, contract, tokenId, tokenscriptUrl, emulator} = getTokenUrlParams();
+		let {query, chain, contract, tokenId, scriptId, tokenscriptUrl, emulator} = getTokenUrlParams();
 
 		if (!tokenId)
 			throw new Error('Token ID was not provided in the URL');
@@ -138,13 +138,13 @@ export class TokenViewer {
 				});
 			}
 
-			this.loadTokenScript(chain, contract, tokenId, tokenscriptUrl);
+			this.loadTokenScript(chain, contract, tokenId, scriptId, tokenscriptUrl);
 		}
 	}
 
-	private async loadTokenScript(chain: number, contract: string, tokenId: string, tokenScriptUrl?: string) {
+	private async loadTokenScript(chain: number, contract: string, tokenId: string, scriptId?: string, tokenScriptUrl?: string) {
 		try {
-			this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, this.tokenDetails.collectionDetails, this.tokenDetails, tokenId, tokenScriptUrl);
+			this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, scriptId, this.tokenDetails.collectionDetails, this.tokenDetails, tokenId, tokenScriptUrl);
 			this.description = await getHardcodedDescription(this.tokenScript, this.tokenDetails);
 		} catch (e) {
 			console.warn(e.message);

diff --git a/javascript/tokenscript-viewer/src/components/viewers/mooar/mooar-viewer.tsx b/javascript/tokenscript-viewer/src/components/viewers/mooar/mooar-viewer.tsx
@@ -81,7 +81,7 @@ export class SmartTokenStoreViewer {
 
 	async processUrlLoad(){
 
-		let {chain, contract, tokenId, tokenscriptUrl, emulator} = getTokenUrlParams();
+		let {chain, contract, tokenId, scriptId, tokenscriptUrl, emulator} = getTokenUrlParams();
 
 		this.app.showTsLoader();
 
@@ -101,12 +101,12 @@ export class SmartTokenStoreViewer {
 			});
 		}
 
-		await this.loadTokenScript(chain, contract, tokenId, tokenscriptUrl);
+		await this.loadTokenScript(chain, contract, tokenId, scriptId, tokenscriptUrl);
 	}
 
-	private async loadTokenScript(chain: number, contract: string, tokenId: string, tokenScriptUrl?: string){
+	private async loadTokenScript(chain: number, contract: string, tokenId: string, scriptId?: string, tokenScriptUrl?: string){
 
-		this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, null, null, tokenId, tokenScriptUrl);
+		this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, scriptId, null, null, tokenId, tokenScriptUrl);
 
 		// Reload cards after the token is updated
 		this.tokenScript.on("TOKENS_UPDATED", (data) => {

diff --git a/javascript/tokenscript-viewer/src/components/viewers/opensea/opensea-viewer.tsx b/javascript/tokenscript-viewer/src/components/viewers/opensea/opensea-viewer.tsx
@@ -92,7 +92,7 @@ export class OpenseaViewer {
 
 	async processUrlLoad(){
 
-		let {chain, contract, tokenId, tokenscriptUrl, emulator} = getTokenUrlParams();
+		let {chain, contract, tokenId, scriptId, tokenscriptUrl, emulator} = getTokenUrlParams();
 
 		if (!tokenId)
 			throw new Error('Token ID was not provided in the URL');
@@ -110,13 +110,13 @@ export class OpenseaViewer {
 			});
 		}
 
-		await this.loadTokenScript(chain, contract, tokenId, tokenscriptUrl);
+		await this.loadTokenScript(chain, contract, tokenId, scriptId, tokenscriptUrl);
 	}
 
-	private async loadTokenScript(chain: number, contract: string, tokenId: string, tokenScriptUrl?: string){
+	private async loadTokenScript(chain: number, contract: string, tokenId: string, scriptId?: string, tokenScriptUrl?: string){
 
 		try {
-			this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, this.tokenDetails.collectionDetails, this.tokenDetails, tokenId, tokenScriptUrl);
+			this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, scriptId, this.tokenDetails.collectionDetails, this.tokenDetails, tokenId, tokenScriptUrl);
 		} catch (e){
 			console.error("Failed to load TokenScript", e);
 		}

diff --git a/javascript/tokenscript-viewer/src/components/viewers/sts-token/sts-viewer.tsx b/javascript/tokenscript-viewer/src/components/viewers/sts-token/sts-viewer.tsx
@@ -118,7 +118,7 @@ export class SmartTokenStoreViewer {
 
 	async processUrlLoad() {
 
-		let {chain, contract, tokenId, tokenscriptUrl, wallet, emulator} = getTokenUrlParams();
+		let {chain, contract, tokenId, scriptId, tokenscriptUrl, wallet, emulator} = getTokenUrlParams();
 
 		let slnAdapter;
 
@@ -159,13 +159,13 @@ export class SmartTokenStoreViewer {
 				});
 			}
 
-			await this.loadTokenScript(chain, contract, tokenId, tokenscriptUrl);
+			await this.loadTokenScript(chain, contract, tokenId, scriptId, tokenscriptUrl);
 		}
 	}
 
-	private async loadTokenScript(chain: number, contract: string, tokenId: string, tokenScriptUrl?: string) {
+	private async loadTokenScript(chain: number, contract: string, tokenId: string, scriptId?: string, tokenScriptUrl?: string) {
 
-		this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, this.collectionDetails, this.tokenDetails, tokenId, tokenScriptUrl);
+		this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, scriptId, this.collectionDetails, this.tokenDetails, tokenId, tokenScriptUrl);
 
 		if (this.tokenScript.getMetadata().backgroundImageUrl){
 			const body = document.getElementsByTagName("body")[0];

diff --git a/javascript/tokenscript-viewer/src/components/viewers/tlink-card/tlink-viewer.tsx b/javascript/tokenscript-viewer/src/components/viewers/tlink-card/tlink-viewer.tsx
@@ -84,7 +84,7 @@ export class TlinkViewer {
 
 	async processUrlLoad(){
 
-		let {chain, contract, tokenId, tokenscriptUrl, emulator, card} = getTokenUrlParams();
+		let {chain, contract, tokenId, scriptId, tokenscriptUrl, emulator, card} = getTokenUrlParams();
 
 		this.tokenId = tokenId;
 		this.card = card;
@@ -99,14 +99,14 @@ export class TlinkViewer {
 			});
 		}
 
-		await this.loadTokenScript(chain, contract, tokenId, tokenscriptUrl);
+		await this.loadTokenScript(chain, contract, tokenId, scriptId, tokenscriptUrl);
 
 		this.app.hideTsLoader();
 	}
 
-	private async loadTokenScript(chain: number, contract: string, tokenId: string, tokenScriptUrl?: string){
+	private async loadTokenScript(chain: number, contract: string, tokenId: string, scriptId?: string, tokenScriptUrl?: string){
 
-		this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, null, null, tokenId, tokenScriptUrl);
+		this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, scriptId, null, null, tokenId, tokenScriptUrl);
 
 		// Reload cards after the token is updated
 		this.tokenScript.on("TOKENS_UPDATED", (data) => {

diff --git a/javascript/tokenscript-viewer/src/components/viewers/tlink/tlink-card-viewer.tsx b/javascript/tokenscript-viewer/src/components/viewers/tlink/tlink-card-viewer.tsx
@@ -76,7 +76,7 @@ export class TlinkCardViewer {
 
 	async processUrlLoad(){
 
-		let {chain, contract, tokenId, tokenscriptUrl, emulator, card} = getTokenUrlParams();
+		let {chain, contract, tokenId, scriptId, tokenscriptUrl, emulator, card} = getTokenUrlParams();
 
 		this.tokenId = tokenId;
 		this.card = card;
@@ -91,14 +91,14 @@ export class TlinkCardViewer {
 			});
 		}
 
-		await this.loadTokenScript(chain, contract, tokenId, tokenscriptUrl);
+		await this.loadTokenScript(chain, contract, tokenId, scriptId, tokenscriptUrl);
 
 		this.app.hideTsLoader();
 	}
 
-	private async loadTokenScript(chain: number, contract: string, tokenId: string, tokenScriptUrl?: string){
+	private async loadTokenScript(chain: number, contract: string, tokenId: string, scriptId?: string, tokenScriptUrl?: string){
 
-		this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, null, null, tokenId, tokenScriptUrl);
+		this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, scriptId, null, null, tokenId, tokenScriptUrl);
 
 		// Reload cards after the token is updated
 		this.tokenScript.on("TOKENS_UPDATED", (data) => {

diff --git a/...pt/tokenscript-viewer/src/components/viewers/util/getTokenScriptWithSingleTokenContext.ts b/...pt/tokenscript-viewer/src/components/viewers/util/getTokenScriptWithSingleTokenContext.ts
@@ -10,6 +10,7 @@ export async function getTokenScriptWithSingleTokenContext(
 	app: AppRoot,
 	chain: number,
 	contract: string,
+	scriptId?: string,
 	collectionDetails?: ITokenCollection,
 	tokenDetails?: ITokenDetail,
 	tokenId?: string,
@@ -34,7 +35,7 @@ export async function getTokenScriptWithSingleTokenContext(
 
 		tokenScript = await app.loadTokenscript("url", tokenScriptUrl);
 	} else {
-		const tsId = chain + "-" + contract;
+		const tsId = chain + "-" + contract + (scriptId ? "-" + scriptId : "");
 		tokenScript = await app.loadTokenscript("resolve", tsId);
 	}
 

diff --git a/javascript/tokenscript-viewer/src/components/viewers/util/getTokenUrlParams.ts b/javascript/tokenscript-viewer/src/components/viewers/util/getTokenUrlParams.ts
@@ -29,6 +29,7 @@ export function getTokenUrlParams(query?: URLSearchParams){
 		chain,
 		contract,
 		tokenId,
+		scriptId: query.get("scriptId"),
 		tokenscriptUrl: query.get("tokenscriptUrl"),
 		emulator: query.get("emulator"),
 		wallet: query.get('wallet'), // Used to override the wallet address used for display of erc20