|
1 | 1 | export default function Home() {
|
2 | 2 | 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‘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> |
22 | 5 |
|
23 |
| - <p className="m-3"> |
24 |
| - These steps are combined in each of the following "auto |
25 |
| - offset" 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‘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 "auto |
| 26 | + offset" 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> |
96 | 104 | </div>
|
97 | 105 | );
|
98 | 106 | }
|
0 commit comments