Skip to content

Commit 28749b3

Browse files
micwallacemicwallace
committed
feat: enhancements for TLink & Mooar views
1 parent 9c68191 commit 28749b3

11 files changed

+172
-183
lines changed

‎javascript/tokenscript-viewer/src/assets/test-iframe-provider.html

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
<button class="frame-btn" data-params="chain=11155111&contract=0x0404ab3994ed48c300ce219546f757ad34484dc7&tokenscriptUrl=https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2FSmartTokenLabs%2Fresources%2Ftokenscript-sln-sepolia.tsml">Sepolia SLN</button>
1616
<button class="frame-btn" data-params="chain=1&contract=0x3c7e352481f4b2fdec1e642a3f0018661c77513d&tokenId=398233297468566556333642">Eth Devcon</button>
1717
<button class="frame-btn" data-params="chain=11155111&contract=0xdE915aFf3649568E15A94fe9b623Db3e7A0944F9&tokenId=1">Seplia ERC1155</button>
18-
<button class="frame-btn" data-params="chain=137&contract=0xD5cA946AC1c1F24Eb26dae9e1A53ba6a02bd97Fe&tokenId=3803829543">Polygon SmartCat</button>
18+
<button class="frame-btn" data-params="chain=137&contract=0xD5cA946AC1c1F24Eb26dae9e1A53ba6a02bd97Fe&tokenId=3803829543&card=Info">Polygon SmartCat</button>
19+
<button class="frame-btn" data-params="chain=137&contract=0xB48f53010Acbc0E24D3D12D892E2215879e6fD13&tokenId=715&card=play">Morchi</button>
1920
<select id="view-type">
2021
<option value="joyid-token">Joy.ID</option>
2122
<option value="sts-token">Launchpad</option>
@@ -42,26 +43,32 @@
4243
params = new URLSearchParams();
4344
params.set("chain", currentParams.get("chain"));
4445
params.set("contract", currentParams.get("contract"));
45-
params.set("tokenId", currentParams.get("tokenId"));
46-
if (currentParams.has("emulator"))
47-
params.set("emulator", currentParams.get("emulator"))
46+
if (currentParams.has("tokenId"))
47+
params.set("tokenId", currentParams.get("tokenId"));
4848
} else {
4949
//params = new URLSearchParams("chain=11155111&contract=0xbb14e71e54e03808a6271722192d03ebdc2eab7f&tokenId=3446746621659278273178542360570905268274680596831489800398881977304212307968&tokenscriptUrl=https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2FSmartTokenLabs%2Fresources%2Ftokenscript%2Frb-sepolia-0xbb14e71e54e03808a6271722192d03ebdc2eab7f-v5.tsml")
5050
//params = new URLSearchParams("chain=11155111&contract=0xa532D3c016aA0B44b7228aCcd701A5F03112CD22&tokenId=1"); // smart cat sepolia
5151
//params = new URLSearchParams("chain=11155111&contract=0x2d46915606580080C6c9032ed041e6FF21a5C8a6&tokenId=0&card=Play"); // Morchi sepolia mockNFT
52-
params = new URLSearchParams("chain=11155111&contract=0xF1eb943F12824659d3756004245D14aD001ff82b&tokenId=0&card=Donate");
52+
params = new URLSearchParams("chain=137&contract=0xB48f53010Acbc0E24D3D12D892E2215879e6fD13&tokenId=715&card=Play");
53+
//params = new URLSearchParams("chain=11155111&contract=0xF1eb943F12824659d3756004245D14aD001ff82b&tokenId=0&card=Donate"); // BuyMeABeer
5354
//params = new URLSearchParams("chain=31337&contract=0x5FbDB2315678afecb367f032d93F642f64180aa3&tokenId=1&emulator=http%3A%2F%2Flocalhost%3A8090%2F");
5455
//params = new URLSearchParams("chain=1001&contract=0x73148b2c977586305f5aaa63b473a7af96619296&tokenId=15&emulator=http%3A%2F%2Flocalhost%3A8090%2F");
5556
//params = new URLSearchParams("chain=11155111&contract=0xa532D3c016aA0B44b7228aCcd701A5F03112CD22&tokenId=1&tokenscriptUrl=http%3A%2F%2Flocalhost%3A8090%2Ftokenscript.tsml"); // smart cat sepolia emulator
5657
//params = new URLSearchParams("chain=1&contract=0x3c7e352481f4b2fdec1e642a3f0018661c77513d&tokenId=398233297468566556333642"); // devcon
5758
//params = new URLSearchParams("chain=11155111&contract=0xdE915aFf3649568E15A94fe9b623Db3e7A0944F9&tokenId=1"); // ERC1155
5859
}
5960

61+
if (currentParams.has("card"))
62+
params.set("card", currentParams.get("card"));
63+
64+
if (currentParams.has("emulator"))
65+
params.set("emulator", currentParams.get("emulator"))
66+
6067
function loadIframeUrl(){
6168
params.set("viewType", document.getElementById("view-type").value);
6269
//params.set("actionsEnabled", "false");
6370
params.set("fullScreen", "true");
64-
document.getElementById("frame").src = BASE_URL + "?" + params.toString() + (card ? `#card=${card}` : '');
71+
document.getElementById("frame").src = BASE_URL + "?" + params.toString();
6572
}
6673

6774
for (const button of document.getElementsByClassName("frame-btn")){

‎javascript/tokenscript-viewer/src/components/viewers/mooar/mooar-viewer.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {getTokenUrlParams} from "../util/getTokenUrlParams";
1414
import {invokeDeeplink} from "../util/invokeDeeplink";
1515
import {connectEmulatorSocket} from "../util/connectEmulatorSocket";
1616
import {ViewController} from "@tokenscript/engine-js/src/view/ViewController";
17+
import {getTokenScriptWithProvidedTokenContext} from "../util/getTokenScriptWithProvidedTokenContext";
1718

1819
@Component({
1920
tag: 'mooar-viewer',
@@ -106,7 +107,7 @@ export class SmartTokenStoreViewer {
106107

107108
private async loadTokenScript(chain: number, contract: string, tokenId: string, scriptId?: string, tokenScriptUrl?: string){
108109

109-
this.tokenScript = await getTokenScriptWithSingleTokenContext(this.app, chain, contract, scriptId, null, null, tokenId, tokenScriptUrl);
110+
this.tokenScript = await getTokenScriptWithProvidedTokenContext(this.app, chain, contract, scriptId, tokenId, tokenScriptUrl);
110111

111112
// Reload cards after the token is updated
112113
this.tokenScript.on("TOKENS_UPDATED", (data) => {

‎javascript/tokenscript-viewer/src/components/viewers/tlink-card/tlink-viewer.css

Lines changed: 8 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -12,39 +12,39 @@ body, action-overflow-modal .popover-container {
1212
color: #333;
1313
}
1414

15-
.mooar-header {
15+
.tlink-header {
1616
height: 45px;
1717
margin: 5px 15px 0;
1818
display: flex;
1919
align-items: center;
2020
}
2121

22-
.mooar-header a {
22+
.tlink-header a {
2323
display: flex;
2424
align-items: center;
2525
text-decoration: none;
2626
}
2727

28-
.mooar-header .text {
28+
.tlink-header .text {
2929
font-size: 16px;
3030
font-weight: 500;
3131
color: #fff;
3232
}
3333

34-
.mooar-header .header-icon {
34+
.tlink-header .header-icon {
3535
height: 24px !important;
3636
padding-left: 8px;
3737
}
3838

39-
.mooar-header-right {
39+
.tlink-header-right {
4040
flex-grow: 1;
4141
display: flex;
4242
align-items: center;
4343
justify-content: flex-end;
4444
gap: 10px;
4545
}
4646

47-
.mooar-viewer {
47+
.tlink-viewer {
4848
max-width: 800px;
4949
width: 100%;
5050
height: 100vh;
@@ -93,7 +93,7 @@ card-view .card-container {
9393
padding: 10px 15px 0;
9494
}
9595

96-
.mooar-viewer .btn {
96+
.tlink-viewer .btn {
9797
font-size: 16px !important;
9898
line-height: 22px;
9999
font-weight: 700;
@@ -102,51 +102,10 @@ card-view .card-container {
102102
border-radius: 14px;
103103
}
104104

105-
.mooar-viewer .btn:disabled {
105+
.tlink-viewer .btn:disabled {
106106
opacity: 0.6 !important;
107107
}
108108

109-
.mooar-viewer .btn-primary, .mooar-viewer .btn-featured {
110-
background: linear-gradient(106.84deg, rgb(255, 140, 74) 6.22%, rgb(255, 96, 95) 90.19%);
111-
border: none;
112-
}
113-
114-
.mooar-viewer .btn-primary:hover, .mooar-viewer .btn-featured:hover, .mooar-viewer .btn-primary:disabled, .mooar-viewer .btn-featured:disabled {
115-
background: linear-gradient(106.84deg, #ff8c4a 6.22%, #ff065f 90.19%) !important;
116-
border: none;
117-
}
118-
119-
.mooar-viewer .btn-secondary, .mooar-viewer .btn-secondary:disabled {
120-
border: 1px solid rgb(255, 88, 36);
121-
border-color: rgb(255, 88, 36) !important;
122-
background: transparent;
123-
}
124-
125-
.btn-secondary:disabled {
126-
background: transparent !important;
127-
}
128-
129-
.mooar-viewer .btn-secondary span {
130-
background-image: linear-gradient(106.84deg, rgb(255, 140, 74) 6.22%, rgb(255, 96, 95) 90.19%);
131-
background-clip: text;
132-
color: transparent;
133-
}
134-
135-
.mooar-viewer .btn-secondary:hover {
136-
border: 1px solid rgb(255, 88, 36);
137-
background: rgba(194, 140, 109, 0.06);
138-
}
139-
140-
.mooar-viewer .more-actions-btn {
141-
border: 1px solid rgb(70, 65, 63);
142-
background: none;
143-
color: #fff;
144-
}
145-
146-
.mooar-viewer .more-actions-btn:hover {
147-
background: rgba(194, 140, 109, 0.06);
148-
}
149-
150109
card-view .action-bar {
151110
height: auto !important;
152111
padding: 10px 0 0 !important;

‎javascript/tokenscript-viewer/src/components/viewers/tlink-card/tlink-viewer.tsx

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -256,29 +256,31 @@ export class TlinkViewer {
256256

257257
return (
258258
<Host>
259-
<div class="mooar-viewer">
260-
<div class="mooar-header">
259+
<div class="tlink-viewer">
260+
<style innerHTML={this.tokenScript ? this.tokenScript.viewStyles.getViewCss() : ""}/>
261+
<div class="tlink-header">
261262
<a href="https://www.smartlayer.network/" target="_blank">
262263
<img class="header-icon" alt="SmartLayer Network" src="assets/icon/smart-layer-icon.png"/>
263264
<span class="text">Tapp Viewer</span>
264265
</a>
265-
<div class="mooar-header-right">
266+
<div class="tlink-header-right">
266267
{/*<share-to-tg-button/>*/}
267-
{this.tokenScript && <security-status tokenScript={this.tokenScript} size="small" />}
268-
{ this.tokenScript && <tokens-selector tokenScript={this.tokenScript} switchToken={async (token) => {
269-
// TODO: Allow removing token context so this flag isn't needed?
270-
if (token) {
271-
this.tokenScript.setCurrentTokenContext(token.originId, null, token.tokenId);
272-
this.onboardingSelected = false;
273-
} else {
274-
this.onboardingSelected = true;
275-
}
276-
this.card = null;
277-
this.mainCard = null;
278-
await this.mainViewController.unloadTokenCard();
279-
await this.loadCards();
280-
await this.mainViewController.showOrExecuteCard(this.mainCard, undefined);
281-
}} />}
268+
{this.tokenScript && <security-status tokenScript={this.tokenScript} size="small"/>}
269+
{this.tokenScript &&
270+
<tokens-selector tokenScript={this.tokenScript} switchToken={async (token) => {
271+
// TODO: Allow removing token context so this flag isn't needed?
272+
if (token) {
273+
this.tokenScript.setCurrentTokenContext(token.originId, null, token.tokenId);
274+
this.onboardingSelected = false;
275+
} else {
276+
this.onboardingSelected = true;
277+
}
278+
this.card = null;
279+
this.mainCard = null;
280+
await this.mainViewController.unloadTokenCard();
281+
await this.loadCards();
282+
await this.mainViewController.showOrExecuteCard(this.mainCard, undefined);
283+
}}/>}
282284
</div>
283285
</div>
284286
<card-view ref={(el: HTMLElement) => this.mainCardView = el}></card-view>
@@ -303,7 +305,7 @@ export class TlinkViewer {
303305
] : ''
304306
}
305307
</div>
306-
: ''}
308+
: ''}
307309
<card-popover tokenScript={this.tokenScript}></card-popover>
308310
</div>
309311
</Host>

‎javascript/tokenscript-viewer/src/components/viewers/tlink/tlink-card-viewer.css

Lines changed: 8 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -12,39 +12,39 @@ body, action-overflow-modal .popover-container {
1212
color: #333;
1313
}
1414

15-
.mooar-header {
15+
.tlink-header {
1616
height: 34px;
1717
margin: 0 15px 0;
1818
display: flex;
1919
align-items: center;
2020
}
2121

22-
.mooar-header a {
22+
.tlink-header a {
2323
display: flex;
2424
align-items: center;
2525
text-decoration: none;
2626
}
2727

28-
.mooar-header .text {
28+
.tlink-header .text {
2929
font-size: 14px;
3030
font-weight: 500;
3131
color: #fff;
3232
}
3333

34-
.mooar-header .header-icon {
34+
.tlink-header .header-icon {
3535
height: 20px !important;
3636
padding-left: 8px;
3737
}
3838

39-
.mooar-header-right {
39+
.tlink-header-right {
4040
flex-grow: 1;
4141
display: flex;
4242
align-items: center;
4343
justify-content: flex-end;
4444
gap: 10px;
4545
}
4646

47-
.mooar-viewer {
47+
.tlink-viewer {
4848
max-width: 800px;
4949
width: 100%;
5050
height: 100vh;
@@ -93,7 +93,7 @@ card-view .card-container {
9393
padding: 10px 20px;
9494
}
9595

96-
.mooar-viewer .btn {
96+
.tlink-viewer .btn {
9797
font-size: 16px !important;
9898
line-height: 22px;
9999
font-weight: 700;
@@ -102,51 +102,10 @@ card-view .card-container {
102102
border-radius: 14px;
103103
}
104104

105-
.mooar-viewer .btn:disabled {
105+
.tlink-viewer .btn:disabled {
106106
opacity: 0.6 !important;
107107
}
108108

109-
/*.mooar-viewer .btn-primary, .mooar-viewer .btn-featured {
110-
background: linear-gradient(106.84deg, rgb(255, 140, 74) 6.22%, rgb(255, 96, 95) 90.19%);
111-
border: none;
112-
}
113-
114-
.mooar-viewer .btn-primary:hover, .mooar-viewer .btn-featured:hover, .mooar-viewer .btn-primary:disabled, .mooar-viewer .btn-featured:disabled {
115-
background: linear-gradient(106.84deg, #ff8c4a 6.22%, #ff065f 90.19%) !important;
116-
border: none;
117-
}
118-
119-
.mooar-viewer .btn-secondary, .mooar-viewer .btn-secondary:disabled {
120-
border: 1px solid rgb(255, 88, 36);
121-
border-color: rgb(255, 88, 36) !important;
122-
background: transparent;
123-
}
124-
125-
.btn-secondary:disabled {
126-
background: transparent !important;
127-
}
128-
129-
.mooar-viewer .btn-secondary span {
130-
background-image: linear-gradient(106.84deg, rgb(255, 140, 74) 6.22%, rgb(255, 96, 95) 90.19%);
131-
background-clip: text;
132-
color: transparent;
133-
}
134-
135-
.mooar-viewer .btn-secondary:hover {
136-
border: 1px solid rgb(255, 88, 36);
137-
background: rgba(194, 140, 109, 0.06);
138-
}
139-
140-
.mooar-viewer .more-actions-btn {
141-
border: 1px solid rgb(70, 65, 63);
142-
background: none;
143-
color: #fff;
144-
}
145-
146-
.mooar-viewer .more-actions-btn:hover {
147-
background: rgba(194, 140, 109, 0.06);
148-
}*/
149-
150109
card-view .action-bar {
151110
height: auto !important;
152111
padding: 10px 0 0 !important;

‎javascript/tokenscript-viewer/src/components/viewers/tlink/tlink-card-viewer.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -141,13 +141,13 @@ export class TlinkCardViewer {
141141

142142
return (
143143
<Host>
144-
<div class="mooar-viewer">
145-
<div class="mooar-header">
144+
<div class="tlink-viewer">
145+
<div class="tlink-header">
146146
<a href="https://www.smartlayer.network/" target="_blank">
147147
<img class="header-icon" alt="SmartLayer Network" src="assets/icon/smart-layer-icon.png"/>
148148
<span class="text">Tapp Viewer</span>
149149
</a>
150-
<div class="mooar-header-right">
150+
<div class="tlink-header-right">
151151
{/*<share-to-tg-button/>*/}
152152
{this.tokenScript && <security-status tokenScript={this.tokenScript} size="x-small" />}
153153
</div>

‎javascript/tokenscript-viewer/src/components/viewers/util/getSelectedOriginTokenFromUrlParams.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import {TokenScript} from "@tokenscript/engine-js/src";
2+
3+
export async function getSelectedOriginTokenFromUrlParams(tokenScript: TokenScript, chain: number, contract: string){
4+
5+
const origins = tokenScript.getTokenOriginData();
6+
7+
// TODO: Return the origin specified in the URL
8+
9+
for (const origin of origins) {
10+
if (
11+
origin.chainId === chain &&
12+
origin.contractAddress.toLowerCase() === contract.toLowerCase() //&&
13+
// This is required to handle ST404, where both the erc20 & 721 contract origins are included in the same tokenscript
14+
// TODO: This causes issues for onboarding cards
15+
//((tokenId === null && origin.tokenType === "erc20") || (tokenId !== null && origin.tokenType !== "erc20"))
16+
) {
17+
return origin;
18+
}
19+
}
20+
21+
throw new Error("Could not find token origin in the tokenscript");
22+
}

0 commit comments

Comments
 (0)