feat: Add optional originId parameter onto links

This allows linking to a specific origin within a multi-origin tokenscript without requiring the contract & chain parameters matching that origin.
SmartTokenLabs · Oct 22, 2024 · 4ef994e · 4ef994e
1 parent 225af35
commit 4ef994e
Show file tree

Hide file tree

Showing 12 changed files with 51 additions and 42 deletions.
diff --git a/javascript/tokenscript-viewer/src/components/common/card-view/card-popover.tsx b/javascript/tokenscript-viewer/src/components/common/card-view/card-popover.tsx
@@ -189,8 +189,10 @@ export class CardPopover implements IViewBinding {
 			currentParams.set("card", card.name);
 
 			const token = this.tokenScript.getCurrentTokenContext();
-			if (token && "selectedTokenId" in token){
-				currentParams.set("tokenId", token.selectedTokenId);
+			if (token && card.type !== "onboarding"){
+				currentParams.set("originId", token.originId);
+				if ("selectedTokenId" in token)
+					currentParams.set("tokenId", token.selectedTokenId);
 			}
 
 			history.replaceState(undefined, undefined, "#" + currentParams.toString());
@@ -207,6 +209,7 @@ export class CardPopover implements IViewBinding {
 		//this.iframe.contentWindow.location.replace("data:text/html;base64,PCFET0NUWVBFIGh0bWw+");
 		const currentParams = new URLSearchParams(location.hash.substring(1));
 		currentParams.delete("card");
+		currentParams.delete("originId");
 		currentParams.delete("tokenId");
 		history.replaceState(undefined, undefined, "#" + currentParams.toString());
 	}

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, scriptId, tokenscriptUrl, emulator} = getTokenUrlParams();
+		let {chain, contract, originId, tokenId, scriptId, tokenscriptUrl, emulator} = getTokenUrlParams();
 
 		this.app.showTsLoader();
 
@@ -97,16 +97,16 @@ export class SmartTokenStoreViewer {
 			const emulatorUrl = new URL(decodeURIComponent(emulator)).origin;
 			tokenscriptUrl = emulatorUrl + "/tokenscript.tsml";
 			connectEmulatorSocket(emulatorUrl, async() => {
-				await this.loadTokenScript(chain, contract, tokenId, tokenscriptUrl);
+				await this.loadTokenScript(chain, contract, originId, tokenId, scriptId, tokenscriptUrl);
 			});
 		}
 
-		await this.loadTokenScript(chain, contract, tokenId, scriptId, tokenscriptUrl);
+		await this.loadTokenScript(chain, contract, originId, tokenId, scriptId, tokenscriptUrl);
 	}
 
-	private async loadTokenScript(chain: number, contract: string, tokenId?: string, scriptId?: string, tokenScriptUrl?: string){
+	private async loadTokenScript(chain: number, contract: string, originId?: string, tokenId?: string, scriptId?: string, tokenScriptUrl?: string){
 
-		this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, scriptId, this.collectionDetails, this.tokenDetails, tokenId, tokenScriptUrl);
+		this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, scriptId, originId, 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, scriptId, tokenscriptUrl, emulator} = getTokenUrlParams();
+		let {query, chain, contract, originId, tokenId, scriptId, tokenscriptUrl, emulator} = getTokenUrlParams();
 
 		if (!tokenId)
 			throw new Error('Token ID was not provided in the URL');
@@ -134,17 +134,17 @@ export class TokenViewer {
 				const emulatorUrl = new URL(decodeURIComponent(emulator)).origin;
 				tokenscriptUrl = emulatorUrl + "/tokenscript.tsml";
 				connectEmulatorSocket(emulatorUrl, async() => {
-					await this.loadTokenScript(chain, contract, tokenId, tokenscriptUrl);
+					await this.loadTokenScript(chain, contract, originId, tokenId, scriptId, tokenscriptUrl);
 				});
 			}
 
-			this.loadTokenScript(chain, contract, tokenId, scriptId, tokenscriptUrl);
+			this.loadTokenScript(chain, contract, originId, tokenId, scriptId, tokenscriptUrl);
 		}
 	}
 
-	private async loadTokenScript(chain: number, contract: string, tokenId: string, scriptId?: string, tokenScriptUrl?: string) {
+	private async loadTokenScript(chain: number, contract: string, originId?: string, tokenId?: string, scriptId?: string, tokenScriptUrl?: string) {
 		try {
-			this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, scriptId, this.tokenDetails.collectionDetails, this.tokenDetails, tokenId, tokenScriptUrl);
+			this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, scriptId, originId, 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
@@ -82,7 +82,7 @@ export class SmartTokenStoreViewer {
 
 	async processUrlLoad(){
 
-		let {chain, contract, tokenId, scriptId, tokenscriptUrl, emulator} = getTokenUrlParams();
+		let {chain, contract, originId, tokenId, scriptId, tokenscriptUrl, emulator} = getTokenUrlParams();
 
 		this.app.showTsLoader();
 
@@ -98,16 +98,16 @@ export class SmartTokenStoreViewer {
 			const emulatorUrl = new URL(decodeURIComponent(emulator)).origin;
 			tokenscriptUrl = emulatorUrl + "/tokenscript.tsml";
 			connectEmulatorSocket(emulatorUrl, async() => {
-				await this.loadTokenScript(chain, contract, tokenId, tokenscriptUrl);
+				await this.loadTokenScript(chain, contract, originId, tokenId, scriptId, tokenscriptUrl);
 			});
 		}
 
-		await this.loadTokenScript(chain, contract, tokenId, scriptId, tokenscriptUrl);
+		await this.loadTokenScript(chain, contract, originId, tokenId, scriptId, tokenscriptUrl);
 	}
 
-	private async loadTokenScript(chain: number, contract: string, tokenId: string, scriptId?: string, tokenScriptUrl?: string){
+	private async loadTokenScript(chain: number, contract: string, originId?: string, tokenId?: string, scriptId?: string, tokenScriptUrl?: string){
 
-		this.tokenScript = await getTokenScriptWithProvidedTokenContext(this.app, chain, contract, scriptId, tokenId, tokenScriptUrl);
+		this.tokenScript = await getTokenScriptWithProvidedTokenContext(this.app, chain, contract, scriptId, originId, 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, scriptId, tokenscriptUrl, emulator} = getTokenUrlParams();
+		let {chain, contract, originId, tokenId, scriptId, tokenscriptUrl, emulator} = getTokenUrlParams();
 
 		if (!tokenId)
 			throw new Error('Token ID was not provided in the URL');
@@ -106,17 +106,17 @@ export class OpenseaViewer {
 			const emulatorUrl = new URL(decodeURIComponent(emulator)).origin;
 			tokenscriptUrl = emulatorUrl + "/tokenscript.tsml";
 			connectEmulatorSocket(emulatorUrl, async() => {
-				await this.loadTokenScript(chain, contract, tokenId, tokenscriptUrl);
+				await this.loadTokenScript(chain, contract, tokenId, scriptId, tokenscriptUrl);
 			});
 		}
 
-		await this.loadTokenScript(chain, contract, tokenId, scriptId, tokenscriptUrl);
+		await this.loadTokenScript(chain, contract, originId, tokenId, scriptId, tokenscriptUrl);
 	}
 
-	private async loadTokenScript(chain: number, contract: string, tokenId: string, scriptId?: string, tokenScriptUrl?: string){
+	private async loadTokenScript(chain: number, contract: string, originId?: string, tokenId?: string, scriptId?: string, tokenScriptUrl?: string){
 
 		try {
-			this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, scriptId, this.tokenDetails.collectionDetails, this.tokenDetails, tokenId, tokenScriptUrl);
+			this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, scriptId, originId, 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, scriptId, tokenscriptUrl, wallet, emulator} = getTokenUrlParams();
+		let {chain, contract, originId, tokenId, scriptId, tokenscriptUrl, wallet, emulator} = getTokenUrlParams();
 
 		let slnAdapter;
 
@@ -155,17 +155,17 @@ export class SmartTokenStoreViewer {
 				const emulatorUrl = new URL(decodeURIComponent(emulator)).origin;
 				tokenscriptUrl = emulatorUrl + "/tokenscript.tsml";
 				connectEmulatorSocket(emulatorUrl, async() => {
-					await this.loadTokenScript(chain, contract, tokenId, tokenscriptUrl);
+					await this.loadTokenScript(chain, contract, originId, tokenId, scriptId, tokenscriptUrl);
 				});
 			}
 
-			await this.loadTokenScript(chain, contract, tokenId, scriptId, tokenscriptUrl);
+			await this.loadTokenScript(chain, contract, originId, tokenId, scriptId, tokenscriptUrl);
 		}
 	}
 
-	private async loadTokenScript(chain: number, contract: string, tokenId: string, scriptId?: string, tokenScriptUrl?: string) {
+	private async loadTokenScript(chain: number, contract: string, originId?: string, tokenId?: string, scriptId?: string, tokenScriptUrl?: string) {
 
-		this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, scriptId, this.collectionDetails, this.tokenDetails, tokenId, tokenScriptUrl);
+		this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, scriptId, originId, 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-card-viewer.tsx b/javascript/tokenscript-viewer/src/components/viewers/tlink-card/tlink-card-viewer.tsx
@@ -76,7 +76,7 @@ export class TlinkCardViewer {
 
 	async processUrlLoad(){
 
-		let {chain, contract, tokenId, scriptId, tokenscriptUrl, emulator, card} = getTokenUrlParams();
+		let {chain, contract, originId, tokenId, scriptId, tokenscriptUrl, emulator, card} = getTokenUrlParams();
 
 		this.tokenId = tokenId;
 		this.card = card;
@@ -87,18 +87,18 @@ export class TlinkCardViewer {
 			const emulatorUrl = new URL(decodeURIComponent(emulator)).origin;
 			tokenscriptUrl = emulatorUrl + "/tokenscript.tsml";
 			connectEmulatorSocket(emulatorUrl, async() => {
-				await this.loadTokenScript(chain, contract, tokenId, tokenscriptUrl);
+				await this.loadTokenScript(chain, contract, tokenId, scriptId, tokenscriptUrl);
 			});
 		}
 
-		await this.loadTokenScript(chain, contract, tokenId, scriptId, tokenscriptUrl);
+		await this.loadTokenScript(chain, contract, originId, tokenId, scriptId, tokenscriptUrl);
 
 		this.app.hideTsLoader();
 	}
 
-	private async loadTokenScript(chain: number, contract: string, tokenId: string, scriptId?: string, tokenScriptUrl?: string){
+	private async loadTokenScript(chain: number, contract: string, originId?: string, tokenId?: string, scriptId?: string, tokenScriptUrl?: string){
 
-		this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, scriptId, null, null, tokenId, tokenScriptUrl);
+		this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, scriptId, originId, 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-viewer.tsx b/javascript/tokenscript-viewer/src/components/viewers/tlink/tlink-viewer.tsx
@@ -84,7 +84,7 @@ export class TlinkViewer {
 
 	async processUrlLoad(){
 
-		let {chain, contract, tokenId, scriptId, tokenscriptUrl, emulator, card} = getTokenUrlParams();
+		let {chain, contract, originId, tokenId, scriptId, tokenscriptUrl, emulator, card} = getTokenUrlParams();
 
 		this.tokenId = tokenId;
 		this.card = card;
@@ -95,18 +95,18 @@ export class TlinkViewer {
 			const emulatorUrl = new URL(decodeURIComponent(emulator)).origin;
 			tokenscriptUrl = emulatorUrl + "/tokenscript.tsml";
 			connectEmulatorSocket(emulatorUrl, async() => {
-				await this.loadTokenScript(chain, contract, tokenId, tokenscriptUrl);
+				await this.loadTokenScript(chain, contract, originId, tokenId, scriptId, tokenscriptUrl);
 			});
 		}
 
-		await this.loadTokenScript(chain, contract, tokenId, scriptId, tokenscriptUrl);
+		await this.loadTokenScript(chain, contract, originId, tokenId, scriptId, tokenscriptUrl);
 
 		this.app.hideTsLoader();
 	}
 
-	private async loadTokenScript(chain: number, contract: string, tokenId: string, scriptId?: string, tokenScriptUrl?: string){
+	private async loadTokenScript(chain: number, contract: string, originId?: string, tokenId?: string, scriptId?: string, tokenScriptUrl?: string){
 
-		this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, scriptId, null, null, tokenId, tokenScriptUrl);
+		this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, scriptId, originId, null, null, tokenId, tokenScriptUrl);
 
 		// Reload cards after the token is updated
 		this.tokenScript.on("TOKENS_UPDATED", (data) => {

diff --git a/...ipt/tokenscript-viewer/src/components/viewers/util/getSelectedOriginTokenFromUrlParams.ts b/...ipt/tokenscript-viewer/src/components/viewers/util/getSelectedOriginTokenFromUrlParams.ts
@@ -1,12 +1,15 @@
 import {TokenScript} from "@tokenscript/engine-js/src";
 
-export async function getSelectedOriginTokenFromUrlParams(tokenScript: TokenScript, chain: number, contract: string, tokenId: string|null, returnDefault = false){
+export async function getSelectedOriginTokenFromUrlParams(tokenScript: TokenScript, chain: number, contract: string, originId?: string, tokenId?: string, returnDefault = false){
 
 	const origins = tokenScript.getTokenOriginData();
 
-	// TODO: Return the origin specified in the URL
-
 	for (const origin of origins) {
+
+		if (originId && originId === origin.originId){
+			return origin;
+		}
+
 		if (
 			origin.chainId === chain &&
 			origin.contractAddress.toLowerCase() === contract.toLowerCase() &&

diff --git a/.../tokenscript-viewer/src/components/viewers/util/getTokenScriptWithProvidedTokenContext.ts b/.../tokenscript-viewer/src/components/viewers/util/getTokenScriptWithProvidedTokenContext.ts
@@ -12,13 +12,14 @@ export async function getTokenScriptWithProvidedTokenContext(
 	chain: number,
 	contract: string,
 	scriptId?: string,
+	originId?: string,
 	tokenId?: string,
 	tokenScriptUrl?: string
 ){
 
 	let tokenScript = await getTokenScriptFromUrlParams(app, chain, contract, scriptId, tokenScriptUrl);
 
-	let selectedOrigin = await getSelectedOriginTokenFromUrlParams(tokenScript, chain, contract, tokenId, !tokenId);
+	let selectedOrigin = await getSelectedOriginTokenFromUrlParams(tokenScript, chain, contract, originId, tokenId, !tokenId);
 
 	console.log("Selected origin: ", selectedOrigin);
 

diff --git a/...pt/tokenscript-viewer/src/components/viewers/util/getTokenScriptWithSingleTokenContext.ts b/...pt/tokenscript-viewer/src/components/viewers/util/getTokenScriptWithSingleTokenContext.ts
@@ -11,6 +11,7 @@ export async function getTokenScriptWithSingleTokenContext(
 	chain: number,
 	contract: string,
 	scriptId?: string,
+	originId?: string,
 	collectionDetails?: ITokenCollection,
 	tokenDetails?: ITokenDetail,
 	tokenId?: string,
@@ -19,7 +20,7 @@ export async function getTokenScriptWithSingleTokenContext(
 
 	let tokenScript = await getTokenScriptFromUrlParams(app, chain, contract, scriptId, tokenScriptUrl);
 
-	let selectedOrigin = await getSelectedOriginTokenFromUrlParams(tokenScript, chain, contract, tokenId, !collectionDetails && !tokenId);
+	let selectedOrigin = await getSelectedOriginTokenFromUrlParams(tokenScript, chain, contract, originId, tokenId, !collectionDetails && !tokenId && !originId);
 
 	if (collectionDetails) {
 		selectedOrigin = {...collectionDetails, ...selectedOrigin}

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