Skip to content

Commit 5c8e637

Browse files
micwallacemicwallace
committed
feat: Add single card tlink view
1 parent 1703a6c commit 5c8e637

File tree

7 files changed

+356
-5
lines changed

7 files changed

+356
-5
lines changed

‎javascript/tokenscript-viewer/src/components.d.ts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,9 @@ export namespace Components {
157157
"openTokenScriptTab": (source: TokenScriptSource, tsId?: string, file?: File, emulator?: string) => Promise<void>;
158158
"showTab": (id: string) => Promise<void>;
159159
}
160+
interface TlinkCardViewer {
161+
"app": AppRoot;
162+
}
160163
interface TlinkViewer {
161164
"app": AppRoot;
162165
}
@@ -270,6 +273,10 @@ export interface StsViewerCustomEvent<T> extends CustomEvent<T> {
270273
detail: T;
271274
target: HTMLStsViewerElement;
272275
}
276+
export interface TlinkCardViewerCustomEvent<T> extends CustomEvent<T> {
277+
detail: T;
278+
target: HTMLTlinkCardViewerElement;
279+
}
273280
export interface TlinkViewerCustomEvent<T> extends CustomEvent<T> {
274281
detail: T;
275282
target: HTMLTlinkViewerElement;
@@ -571,6 +578,25 @@ declare global {
571578
prototype: HTMLTabbedViewerElement;
572579
new (): HTMLTabbedViewerElement;
573580
};
581+
interface HTMLTlinkCardViewerElementEventMap {
582+
"showToast": ShowToastEventArgs;
583+
"showLoader": void;
584+
"hideLoader": void;
585+
}
586+
interface HTMLTlinkCardViewerElement extends Components.TlinkCardViewer, HTMLStencilElement {
587+
addEventListener<K extends keyof HTMLTlinkCardViewerElementEventMap>(type: K, listener: (this: HTMLTlinkCardViewerElement, ev: TlinkCardViewerCustomEvent<HTMLTlinkCardViewerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
588+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
589+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
590+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
591+
removeEventListener<K extends keyof HTMLTlinkCardViewerElementEventMap>(type: K, listener: (this: HTMLTlinkCardViewerElement, ev: TlinkCardViewerCustomEvent<HTMLTlinkCardViewerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
592+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
593+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
594+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
595+
}
596+
var HTMLTlinkCardViewerElement: {
597+
prototype: HTMLTlinkCardViewerElement;
598+
new (): HTMLTlinkCardViewerElement;
599+
};
574600
interface HTMLTlinkViewerElementEventMap {
575601
"showToast": ShowToastEventArgs;
576602
"showLoader": void;
@@ -797,6 +823,7 @@ declare global {
797823
"sts-viewer": HTMLStsViewerElement;
798824
"tab-header-item": HTMLTabHeaderItemElement;
799825
"tabbed-viewer": HTMLTabbedViewerElement;
826+
"tlink-card-viewer": HTMLTlinkCardViewerElement;
800827
"tlink-viewer": HTMLTlinkViewerElement;
801828
"token-button": HTMLTokenButtonElement;
802829
"token-icon": HTMLTokenIconElement;
@@ -943,6 +970,12 @@ declare namespace LocalJSX {
943970
interface TabbedViewer {
944971
"app"?: AppRoot;
945972
}
973+
interface TlinkCardViewer {
974+
"app"?: AppRoot;
975+
"onHideLoader"?: (event: TlinkCardViewerCustomEvent<void>) => void;
976+
"onShowLoader"?: (event: TlinkCardViewerCustomEvent<void>) => void;
977+
"onShowToast"?: (event: TlinkCardViewerCustomEvent<ShowToastEventArgs>) => void;
978+
}
946979
interface TlinkViewer {
947980
"app"?: AppRoot;
948981
"onHideLoader"?: (event: TlinkViewerCustomEvent<void>) => void;
@@ -1063,6 +1096,7 @@ declare namespace LocalJSX {
10631096
"sts-viewer": StsViewer;
10641097
"tab-header-item": TabHeaderItem;
10651098
"tabbed-viewer": TabbedViewer;
1099+
"tlink-card-viewer": TlinkCardViewer;
10661100
"tlink-viewer": TlinkViewer;
10671101
"token-button": TokenButton;
10681102
"token-icon": TokenIcon;
@@ -1116,6 +1150,7 @@ declare module "@stencil/core" {
11161150
"sts-viewer": LocalJSX.StsViewer & JSXBase.HTMLAttributes<HTMLStsViewerElement>;
11171151
"tab-header-item": LocalJSX.TabHeaderItem & JSXBase.HTMLAttributes<HTMLTabHeaderItemElement>;
11181152
"tabbed-viewer": LocalJSX.TabbedViewer & JSXBase.HTMLAttributes<HTMLTabbedViewerElement>;
1153+
"tlink-card-viewer": LocalJSX.TlinkCardViewer & JSXBase.HTMLAttributes<HTMLTlinkCardViewerElement>;
11191154
"tlink-viewer": LocalJSX.TlinkViewer & JSXBase.HTMLAttributes<HTMLTlinkViewerElement>;
11201155
"token-button": LocalJSX.TokenButton & JSXBase.HTMLAttributes<HTMLTokenButtonElement>;
11211156
"token-icon": LocalJSX.TokenIcon & JSXBase.HTMLAttributes<HTMLTokenIconElement>;

‎javascript/tokenscript-viewer/src/components/app/app.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@ export interface ShowToastEventArgs {
2424
description: string|JSX.Element
2525
}
2626

27-
export type ViewerTypes = "tabbed"|"integration"|"new"|"joyid-token"|"opensea"|"sts-token"|"alphawallet"|"mooar"|"tlink";
27+
export type ViewerTypes = "tabbed"|"integration"|"new"|"joyid-token"|"opensea"|"sts-token"|"alphawallet"|"mooar"|"tlink"|"tlink-card";
2828

29-
const IFRAME_PROVIDER_VIEWS: ViewerTypes[] = ["joyid-token", "sts-token", "mooar", "tlink"];
29+
const IFRAME_PROVIDER_VIEWS: ViewerTypes[] = ["joyid-token", "sts-token", "mooar", "tlink", "tlink-card"];
3030

3131
const initViewerType = (params: URLSearchParams): ViewerTypes => {
3232

@@ -59,6 +59,9 @@ const initViewerType = (params: URLSearchParams): ViewerTypes => {
5959
case "tlink":
6060
viewerType = "tlink";
6161
break;
62+
case "tlink-card":
63+
viewerType = "tlink-card";
64+
break;
6265
// Fall-through to default
6366
case "new":
6467
default:
@@ -135,7 +138,8 @@ export class AppRoot {
135138
}
136139
);
137140

138-
if (this.viewerType === "mooar" || this.viewerType === "tlink"){
141+
// These views use the injected provider so need this to avoid the wallet connector popup
142+
if (this.viewerType === "mooar" || this.viewerType === "tlink" || this.viewerType === "tlink-card"){
139143
this.discoveryAdapter.setEngine(this.tsEngine);
140144
}
141145
}
@@ -154,7 +158,7 @@ export class AppRoot {
154158
providerFactory = async () => {
155159
throw new Error("PROVIDER DISABLED")
156160
}
157-
} else if (this.viewerType === "alphawallet" || this.viewerType === "tlink") {
161+
} else if (this.viewerType === "alphawallet" || this.viewerType === "tlink" || this.viewerType === "tlink-card") {
158162
// Automatically connect to injected web3 provider
159163
providerFactory = async () => {
160164
const WalletProvider = (await import("../wallet/Web3WalletProvider")).Web3WalletProvider;
@@ -294,6 +298,7 @@ export class AppRoot {
294298
{this.viewerType === "alphawallet" ? <alphawallet-viewer app={this}></alphawallet-viewer> : ''}
295299
{this.viewerType === "mooar" ? <mooar-viewer app={this}></mooar-viewer> : ''}
296300
{this.viewerType === "tlink" ? <tlink-viewer app={this}></tlink-viewer> : ''}
301+
{this.viewerType === "tlink-card" ? <tlink-card-viewer app={this}></tlink-card-viewer> : ''}
297302
</main>
298303

299304
<confirm-tx-popover ref={(elem) => this.confirmTxPopover = elem}/>

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

File renamed without changes.

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

File renamed without changes.

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

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
2+
header {
3+
display: none;
4+
}
5+
6+
body, action-overflow-modal .popover-container {
7+
background-color: #292929 !important;
8+
}
9+
10+
* {
11+
font-family: 'Space Grotesk', sans-serif;
12+
color: #333;
13+
}
14+
15+
.mooar-header {
16+
height: 45px;
17+
margin: 5px 15px 0;
18+
display: flex;
19+
align-items: center;
20+
}
21+
22+
.mooar-header a {
23+
display: flex;
24+
align-items: center;
25+
text-decoration: none;
26+
}
27+
28+
.mooar-header .text {
29+
font-size: 16px;
30+
font-weight: 500;
31+
color: #fff;
32+
}
33+
34+
.mooar-header .header-icon {
35+
height: 24px !important;
36+
padding-left: 8px;
37+
}
38+
39+
.mooar-header-right {
40+
flex-grow: 1;
41+
display: flex;
42+
align-items: center;
43+
justify-content: flex-end;
44+
gap: 10px;
45+
}
46+
47+
.mooar-viewer {
48+
max-width: 800px;
49+
width: 100%;
50+
height: 100vh;
51+
margin: 0 auto;
52+
display: flex;
53+
flex-direction: column;
54+
}
55+
56+
.details-container {
57+
flex-grow: 1;
58+
}
59+
60+
.popover-container {
61+
max-height: calc(100dvh - 50px) !important;
62+
}
63+
64+
card-view, .card-container {
65+
display: flex !important;
66+
flex-direction: column;
67+
flex-grow: 1;
68+
}
69+
70+
card-view .card-container {
71+
max-width: unset !important;
72+
max-height: unset !important;
73+
margin: 10px 15px !important;
74+
border-radius: 15px !important;
75+
}
76+
77+
card-popover .card-container {
78+
max-height: 700px !important;
79+
max-width: unset !important;
80+
margin: 0 auto !important;
81+
width: 100%;
82+
}
83+
84+
card-view .card-container {
85+
height: unset !important;
86+
}
87+
88+
.actions {
89+
display: flex;
90+
flex-direction: column;
91+
gap: 10px;
92+
padding: 10px 15px;
93+
}
94+
95+
.mooar-viewer .btn {
96+
font-size: 16px !important;
97+
line-height: 22px;
98+
font-weight: 700;
99+
padding-left: 14px;
100+
padding-right: 14px;
101+
border-radius: 14px;
102+
}
103+
104+
.mooar-viewer .btn:disabled {
105+
opacity: 0.6 !important;
106+
}
107+
108+
.mooar-viewer .btn-primary, .mooar-viewer .btn-featured {
109+
background: linear-gradient(106.84deg, rgb(255, 140, 74) 6.22%, rgb(255, 96, 95) 90.19%);
110+
border: none;
111+
}
112+
113+
.mooar-viewer .btn-primary:hover, .mooar-viewer .btn-featured:hover, .mooar-viewer .btn-primary:disabled, .mooar-viewer .btn-featured:disabled {
114+
background: linear-gradient(106.84deg, #ff8c4a 6.22%, #ff065f 90.19%) !important;
115+
border: none;
116+
}
117+
118+
.mooar-viewer .btn-secondary, .mooar-viewer .btn-secondary:disabled {
119+
border: 1px solid rgb(255, 88, 36);
120+
border-color: rgb(255, 88, 36) !important;
121+
background: transparent;
122+
}
123+
124+
.btn-secondary:disabled {
125+
background: transparent !important;
126+
}
127+
128+
.mooar-viewer .btn-secondary span {
129+
background-image: linear-gradient(106.84deg, rgb(255, 140, 74) 6.22%, rgb(255, 96, 95) 90.19%);
130+
background-clip: text;
131+
color: transparent;
132+
}
133+
134+
.mooar-viewer .btn-secondary:hover {
135+
border: 1px solid rgb(255, 88, 36);
136+
background: rgba(194, 140, 109, 0.06);
137+
}
138+
139+
.mooar-viewer .more-actions-btn {
140+
border: 1px solid rgb(70, 65, 63);
141+
background: none;
142+
color: #fff;
143+
}
144+
145+
.mooar-viewer .more-actions-btn:hover {
146+
background: rgba(194, 140, 109, 0.06);
147+
}
148+
149+
.tokenscript-frame {
150+
margin-bottom: 6px;
151+
}

0 commit comments

Comments
 (0)