Skip to content

Commit 647389a

Browse files
committed
fix(fe: Home): inner content styling
1 parent 43d5dfa commit 647389a

File tree

1 file changed

+100
-92
lines changed

1 file changed

+100
-92
lines changed

example-frontend/pages/index.tsx

Lines changed: 100 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,106 @@
11
export default function Home() {
22
return (
3-
<div className="relative flex flex-col h-16 justify-between">
4-
<h1 className="text-xl underline">
5-
Welcome to the OffsetHelper Example Frontend
6-
</h1>
7-
<p className="m-3">
8-
Helper functions that simplify the carbon offsetting (retirement)
9-
process. Retiring carbon tokens requires multiple steps and interactions
10-
with Toucan Protocol&lsquo;s main contracts:
11-
</p>
12-
<br />
13-
<ol className="m-3">
14-
<li className="m-5">
15-
{" "}
16-
1. Obtain a Toucan pool token such as BCT or NCT (by performing a
17-
token swap).
18-
</li>
19-
<li className="m-5"> 2. Redeem the pool token for a TCO2 token.</li>
20-
<li className="m-5"> 3. Retire the TCO2 token.</li>
21-
</ol>
3+
<div className="space-y-5 text-black text-base">
4+
<h1 className="text-2xl">Welcome to the OffsetHelper Example Frontend</h1>
225

23-
<p className="m-3">
24-
These steps are combined in each of the following &quot;auto
25-
offset&quot; methods implemented in OffsetHelper to allow a retirement
26-
within one transaction:
27-
</p>
28-
<ul>
29-
<li className="m-5">
30-
<code className="underline text-forest">
31-
<a
32-
href="/autoOffsetPoolToken"
33-
target="_blank"
34-
rel="noopener noreferrer"
35-
>
36-
autoOffsetPoolToken()
37-
</a>
38-
</code>{" "}
39-
if the user already owns a Toucan pool token such as BCT or NCT,
40-
</li>
41-
<li className="m-5">
42-
<code className="underline text-forest">
43-
<a
44-
href="/autoOffsetExactOutToken"
45-
target="_blank"
46-
rel="noopener noreferrer"
47-
>
48-
autoOffsetExactOutToken()
49-
</a>
50-
</code>{" "}
51-
if the user would like to perform a retirement using an ERC20 token
52-
(USDC, WETH or WMATIC), specifying the exact amount of TCO2s to
53-
retire,
54-
</li>
55-
<li className="m-5">
56-
<code className="underline text-forest">
57-
<a
58-
href="/autoOffsetExactInToken"
59-
target="_blank"
60-
rel="noopener noreferrer"
61-
>
62-
autoOffsetExactInToken()
63-
</a>
64-
</code>{" "}
65-
if the user would like to perform a retirement using an ERC20 token
66-
(USDC, WETH or WMATIC), specifying the exact amount of token to swap
67-
into TCO2s.
68-
</li>
69-
<li className="m-5">
70-
<code className="underline text-forest">
71-
<a
72-
href="/autoOffsetExactOutETH"
73-
target="_blank"
74-
rel="noopener noreferrer"
75-
>
76-
autoOffsetExactOutETH()
77-
</a>
78-
</code>{" "}
79-
if the user would like to perform a retirement using MATIC, specifying
80-
the exact amount of TCO2s to retire,
81-
</li>
82-
<li className="m-5">
83-
<code className="underline text-forest">
84-
<a
85-
href="/autoOffsetExactInETH"
86-
target="_blank"
87-
rel="noopener noreferrer"
88-
>
89-
autoOffsetExactInETH()
90-
</a>
91-
</code>{" "}
92-
if the user would like to perform a retirement using MATIC, swapping
93-
all sent MATIC into TCO2s,
94-
</li>
95-
</ul>
6+
<div className="space-y-3">
7+
<p className="">
8+
Helper functions that simplify the carbon offsetting (retirement)
9+
process. Retiring carbon tokens requires multiple steps and
10+
interactions with Toucan Protocol&lsquo;s main contracts:
11+
</p>
12+
13+
<ol className="list-decimal list-outside ml-8">
14+
<li>
15+
Obtain a Toucan pool token such as BCT or NCT (by performing a token
16+
swap).
17+
</li>
18+
<li>Redeem the pool token for a TCO2 token.</li>
19+
<li>Retire the TCO2 token.</li>
20+
</ol>
21+
</div>
22+
23+
<div className="space-y-3">
24+
<p className="">
25+
These steps are combined in each of the following &quot;auto
26+
offset&quot; methods implemented in OffsetHelper to allow a retirement
27+
within one transaction:
28+
</p>
29+
30+
<ul className="list-disc list-outside ml-8 space-y-2">
31+
<li>
32+
<code className="text-forest rounded-md bg-gray-200 px-1.5 py-1">
33+
<a
34+
className="underline hover:no-underline"
35+
href="/autoOffsetPoolToken"
36+
target="_blank"
37+
rel="noopener noreferrer"
38+
>
39+
autoOffsetPoolToken()
40+
</a>
41+
</code>{" "}
42+
- if the user already owns a Toucan pool token such as BCT or NCT;
43+
</li>
44+
<li>
45+
<code className="text-forest rounded-md bg-gray-200 px-1.5 py-1">
46+
<a
47+
className="underline hover:no-underline"
48+
href="/autoOffsetExactOutToken"
49+
target="_blank"
50+
rel="noopener noreferrer"
51+
>
52+
autoOffsetExactOutToken()
53+
</a>
54+
</code>{" "}
55+
- if the user would like to perform a retirement using an ERC20
56+
token (USDC, WETH or WMATIC), specifying the exact amount of TCO2s
57+
to retire;
58+
</li>
59+
<li>
60+
<code className="text-forest rounded-md bg-gray-200 px-1.5 py-1">
61+
<a
62+
className="underline hover:no-underline"
63+
href="/autoOffsetExactInToken"
64+
target="_blank"
65+
rel="noopener noreferrer"
66+
>
67+
autoOffsetExactInToken()
68+
</a>
69+
</code>{" "}
70+
- if the user would like to perform a retirement using an ERC20
71+
token (USDC, WETH or WMATIC), specifying the exact amount of token
72+
to swap into TCO2s;
73+
</li>
74+
<li>
75+
<code className="text-forest rounded-md bg-gray-200 px-1.5 py-1">
76+
<a
77+
className="underline hover:no-underline"
78+
href="/autoOffsetExactOutETH"
79+
target="_blank"
80+
rel="noopener noreferrer"
81+
>
82+
autoOffsetExactOutETH()
83+
</a>
84+
</code>{" "}
85+
- if the user would like to perform a retirement using MATIC,
86+
specifying the exact amount of TCO2s to retire;
87+
</li>
88+
<li>
89+
<code className="text-forest rounded-md bg-gray-200 px-1.5 py-1">
90+
<a
91+
className="underline hover:no-underline"
92+
href="/autoOffsetExactInETH"
93+
target="_blank"
94+
rel="noopener noreferrer"
95+
>
96+
autoOffsetExactInETH()
97+
</a>
98+
</code>{" "}
99+
- if the user would like to perform a retirement using MATIC,
100+
swapping all sent MATIC into TCO2s;
101+
</li>
102+
</ul>
103+
</div>
96104
</div>
97105
);
98106
}

0 commit comments

Comments
 (0)