Skip to content

Commit a31581d

Browse files
novusnotanovusnota
authored
feat: enhance code snippets, make cards height uniform, increase visual appeal of the "Tact in production" section (#51)
1 parent 8a6db04 commit a31581d

10 files changed

+223
-87
lines changed

‎docs/3rdpartylicenses.txt

+25
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,31 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
3737
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
3838
SOFTWARE.
3939

40+
@ng-web-apis/resize-observer
41+
MIT
42+
MIT License
43+
44+
Copyright (c) 2020 Vladimir Potekhin <[email protected]>
45+
46+
Permission is hereby granted, free of charge, to any person obtaining a copy
47+
of this software and associated documentation files (the "Software"), to deal
48+
in the Software without restriction, including without limitation the rights
49+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
50+
copies of the Software, and to permit persons to whom the Software is
51+
furnished to do so, subject to the following conditions:
52+
53+
The above copyright notice and this permission notice shall be included in all
54+
copies or substantial portions of the Software.
55+
56+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
57+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
58+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
59+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
60+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
61+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
62+
SOFTWARE.
63+
64+
4065
@taiga-ui/cdk
4166
Apache-2.0
4267
Apache License

‎docs/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,6 @@
4040

4141
<body>
4242
<app-root></app-root>
43-
<script src="runtime.e94c38966dbbafb1.js" type="module"></script><script src="polyfills.b805f680e766c15d.js" type="module"></script><script src="scripts.4c12992b7de4b226.js" defer></script><script src="main.999229904b254152.js" type="module"></script>
43+
<script src="runtime.e94c38966dbbafb1.js" type="module"></script><script src="polyfills.b805f680e766c15d.js" type="module"></script><script src="scripts.4c12992b7de4b226.js" defer></script><script src="main.24c42aff3fd0ccf2.js" type="module"></script>
4444

4545
</body></html>

‎docs/main.24c42aff3fd0ccf2.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/main.999229904b254152.js

-1
This file was deleted.

‎src/app/features/main/components/main-page-title/main-page-title.component.html

+18-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,20 @@
11
<section>
2-
<span class="tact-label">Tact</span>
3-
<span class="tact-description">
4-
Unleashing the power of TON with safe and scalable smart contracts
5-
</span>
2+
<div>
3+
<span class="tact-label">Tact</span>
4+
<span class="tact-description">
5+
Unleashing the power of TON with safe and scalable smart contracts
6+
</span>
7+
</div>
8+
<!-- <div>
9+
<div class="tact-buttons">
10+
<button tuiButton type="button" appearance="outline">Try online</button>
11+
<button tuiButton type="button" appearance="outline">Features</button>
12+
<button tuiButton type="button" appearance="outline">Security</button>
13+
<button tuiButton type="button" appearance="outline">Key resources</button>
14+
<button tuiButton type="button" appearance="outline">Installation</button>
15+
<button tuiButton type="button" appearance="outline">Community</button>
16+
<button tuiButton type="button" appearance="outline">Contributing</button>
17+
<button tuiButton type="button" appearance="outline">Going places</button>
18+
</div>
19+
</div> -->
620
</section>

‎src/app/features/main/components/main-page-title/main-page-title.component.scss

+71-36
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,86 @@
11
@use 'src/styles';
2+
23
:host {
3-
display: block;
4+
display: block;
45
}
56

6-
section {
7-
max-width: 850px;
8-
margin: 0 auto;
9-
display: flex;
10-
align-items: center;
11-
@include styles.b(mobile) {
12-
flex-direction: column;
13-
align-items: flex-start;
14-
}
7+
section>div {
8+
max-width: 850px;
9+
margin: 0 auto;
10+
display: flex;
11+
align-items: center;
12+
13+
@include styles.b(mobile) {
14+
flex-direction: column;
15+
align-items: flex-start;
16+
}
1517
}
1618

1719
.tact-label {
18-
margin-right: 24px;
19-
color: var(--blue);
20-
font-weight: styles.$font-weight-extra-bold;
21-
font-size: 80px;
22-
line-height: 138px;
23-
text-transform: uppercase;
24-
cursor: default;
25-
@include styles.b(tablet) {
26-
font-size: 63px;
27-
line-height: 84px;
28-
}
29-
@include styles.b(mobile) {
30-
font-size: 72px;
31-
line-height: 95px;
32-
}
20+
margin-right: 24px;
21+
color: var(--blue);
22+
font-weight: styles.$font-weight-extra-bold;
23+
font-size: 80px;
24+
line-height: 138px;
25+
text-transform: uppercase;
26+
cursor: default;
27+
28+
@include styles.b(tablet) {
29+
font-size: 63px;
30+
line-height: 84px;
31+
}
32+
33+
@include styles.b(mobile) {
34+
font-size: 72px;
35+
line-height: 95px;
36+
}
3337
}
3438

3539
.tact-description {
36-
max-width: 640px;
37-
font-size: 32px;
38-
line-height: 36px;
39-
color: var(--gray-200);
40-
text-transform: uppercase;
41-
cursor: default;
40+
max-width: 640px;
41+
font-size: 32px;
42+
line-height: 36px;
43+
color: var(--gray-200);
44+
text-transform: uppercase;
45+
cursor: default;
46+
47+
@include styles.b(tablet) {
48+
max-width: 440px;
49+
font-size: 22px;
50+
line-height: 30px;
51+
}
52+
53+
@include styles.b(mobile) {
54+
font-size: 28px;
55+
line-height: 40px;
56+
}
57+
}
58+
59+
.tact-buttons {
60+
display: flex;
61+
flex-direction: row;
62+
flex-wrap: wrap;
63+
margin-top: -1rem;
64+
max-width: 850px;
65+
66+
>button {
67+
height: 2.5rem;
68+
margin-top: 16px;
69+
70+
&:not(:last-child) {
71+
margin-right: 16px;
72+
}
73+
4274
@include styles.b(tablet) {
43-
max-width: 440px;
44-
font-size: 22px;
45-
line-height: 30px;
75+
height: 2rem;
76+
font-size: 14px;
77+
margin-top: 16px;
78+
margin-right: 12px;
4679
}
80+
4781
@include styles.b(mobile) {
48-
font-size: 28px;
49-
line-height: 40px;
82+
margin-top: 12px;
83+
margin-right: 8px;
5084
}
85+
}
5186
}

‎src/app/features/main/components/what-is-tact/what-is-tact.component.html

+55-41
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,34 @@ <h2 class="font-header tact-header">What is Tact?</h2>
1212

1313
<article>
1414
<h3>You are in good company</h3>
15-
<p>
16-
At the start of 2025, the number of unique code contracts deployed on the mainnet reached almost 28 thousand,
17-
of which about <b>33%</b> were <b>written in Tact</b>.
18-
<p>
15+
<div class="two-column">
16+
<label tuiProgressLabel class="tui-space_right-4">
17+
<span class="progress-percent">{{ value }}%</span>
18+
<tui-progress-circle size="l" [max]="max" [value]="value">
19+
</tui-progress-circle>
20+
</label>
21+
<p>
22+
At the start of 2025, the number of <i [tuiHint]="tipUniqueCode" [tuiHintShowDelay]="100">unique code</i>
23+
contracts deployed on the mainnet reached almost 28 thousand,
24+
of which about <b>33%</b> were <b>written in Tact</b>.
25+
</p>
26+
</div>
1927
<p>
2028
Here are some selected Tact-based software and applications deployed in production and consumed by end users:
2129
</p>
2230
<div class="grid tui-space_top-4">
23-
<div>
31+
<div class="grid-item">
32+
<tui-island>
33+
<h3 class="tui-island__title">Proof of Capital</h3>
34+
<p class="tui-island__paragraph">
35+
A market-making smart contract that protects interests of all holders.
36+
</p>
37+
<button tuiButton type="button" appearance="flat" size="m" class="tui-island__footer-button">
38+
<a href="https://github.com/proof-of-capital/TON">GitHub</a>
39+
</button>
40+
</tui-island>
41+
</div>
42+
<div class="grid-item">
2443
<tui-island>
2544
<h3 class="tui-island__title">Tradoor</h3>
2645
<p class="tui-island__paragraph">
@@ -31,7 +50,7 @@ <h3 class="tui-island__title">Tradoor</h3>
3150
</button>
3251
</tui-island>
3352
</div>
34-
<div>
53+
<div class="grid-item">
3554
<tui-island>
3655
<h3 class="tui-island__title">PixelSwap</h3>
3756
<p class="tui-island__paragraph">
@@ -42,7 +61,7 @@ <h3 class="tui-island__title">PixelSwap</h3>
4261
</button>
4362
</tui-island>
4463
</div>
45-
<div>
64+
<div class="grid-item">
4665
<tui-island>
4766
<h3 class="tui-island__title">GasPump</h3>
4867
<p class="tui-island__paragraph">
@@ -53,51 +72,35 @@ <h3 class="tui-island__title">GasPump</h3>
5372
</button>
5473
</tui-island>
5574
</div>
56-
<div>
57-
<tui-island>
58-
<h3 class="tui-island__title">Proof of Capital</h3>
59-
<p class="tui-island__paragraph">
60-
A market-making smart contract that protects interests of all holders.
61-
</p>
62-
<button tuiButton type="button" appearance="flat" size="m" class="tui-island__footer-button">
63-
<a href="https://github.com/proof-of-capital/TON">GitHub</a>
64-
</button>
65-
</tui-island>
66-
</div>
6775
</div>
6876
</article>
6977

70-
<!--
71-
<article>
72-
<span class="tact-big tui-space_vertical-5">
73-
At the start of 2025, the number of unique code contracts deployed on the mainnet reached almost 28 thousand, of
74-
which about <span class="blue">33%</span> were <span class="blue">written in Tact</span>
75-
</span>
76-
</article>
77-
-->
78-
7978
<article id="familiar-syntax">
8079
<h3>Familiar syntax</h3>
8180
<p>
8281
Tact offers familiar syntax inspired by JavaScript & Typescript, Swift, Kotlin and Rust.
8382
Powerful features such as algebraic data types and compile-time execution look organic and
8483
friendly to new developers.
8584
</p>
86-
<app-code-snippet content='receive("increment") {
87-
self.val += 1;
88-
}
85+
<app-code-snippet content='contract NumberGoUp(val: Int) {
86+
receive("increment") {
87+
self.val += 1;
88+
}
8989
90-
get fun value(input: Int): Int {
91-
return input + self.val;
90+
get fun value(extra: Int): Int {
91+
return extra + self.val;
92+
}
9293
}' [adaptiveContent]="[
9394
{
9495
maxWidth: 600,
9596
content:
96-
'receive(&quot;increment&quot;) {\n' +
97-
' self.val += 1;\n' +
98-
'}\n\n' +
99-
'get fun value(input: Int): Int {\n' +
100-
' return input + self.val;\n' +
97+
'contract NumberGoUp(val: Int) {\n' +
98+
' receive(&quot;increment&quot;) {\n' +
99+
' self.val += 1;\n' +
100+
' }\n\n' +
101+
' get fun value(input: Int): Int {\n' +
102+
' return input + self.val;\n' +
103+
' }\n' +
101104
'}'
102105
}
103106
]"></app-code-snippet>
@@ -111,8 +114,9 @@ <h3>Strong type system</h3>
111114
does not produce silent failures or unexpected truncation.
112115
</p>
113116
<app-code-snippet content="struct ContractData {
114-
index: Int as uint32;
115-
admin: Address;
117+
index: Int as uint32 = 0xBABECAFE;
118+
admin: Address;
119+
pubKey: Slice as bytes64;
116120
}"></app-code-snippet>
117121
</article>
118122

@@ -129,7 +133,7 @@ <h3>Gas control</h3>
129133
</p>
130134
<app-code-snippet content='receive("sample message") {
131135
require(context().value >= ton("0.1"), "must pay at least 0.1 TON");
132-
// (....etc) //
136+
// (...etc)
133137
}'></app-code-snippet>
134138
</article>
135139

@@ -154,7 +158,7 @@ <h3>Tact and FunC</h3>
154158
level of control.
155159
</p>
156160
<p>
157-
Unfortunately, the precision of FunC makes it harder to write complex multi-contract systems.
161+
Unfortunately, the peculiarity and quirks of FunC makes it harder to write complex multi-contract systems.
158162
</p>
159163
<p>
160164
Tact enables developers to go even further: you can write the entire suites of smart contracts
@@ -187,4 +191,14 @@ <h3>Bright future awaits</h3>
187191
adventure!
188192
</p>
189193
</article>
194+
195+
<!-- <hr class="tui-space_vertical-5"> -->
190196
</section>
197+
198+
<ng-template #tipUniqueCode>
199+
<p class="tooltip-text">
200+
The "unique code" means that each contract in the data sample has at least one TVM
201+
instruction that differs from the other contracts, excluding many preprocessed wallets with everything inlined —
202+
even seqno and a public key for signature verification!
203+
</p>
204+
</ng-template>

0 commit comments

Comments
 (0)