-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(fe: Home): inner content styling
- Loading branch information
Showing
1 changed file
with
100 additions
and
92 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,98 +1,106 @@ | ||
| export default function Home() { | ||
| return ( | ||
| <div className="relative flex flex-col h-16 justify-between"> | ||
| <h1 className="text-xl underline"> | ||
| Welcome to the OffsetHelper Example Frontend | ||
| </h1> | ||
| <p className="m-3"> | ||
| Helper functions that simplify the carbon offsetting (retirement) | ||
| process. Retiring carbon tokens requires multiple steps and interactions | ||
| with Toucan Protocol‘s main contracts: | ||
| </p> | ||
| <br /> | ||
| <ol className="m-3"> | ||
| <li className="m-5"> | ||
| {" "} | ||
| 1. Obtain a Toucan pool token such as BCT or NCT (by performing a | ||
| token swap). | ||
| </li> | ||
| <li className="m-5"> 2. Redeem the pool token for a TCO2 token.</li> | ||
| <li className="m-5"> 3. Retire the TCO2 token.</li> | ||
| </ol> | ||
| <div className="space-y-5 text-black text-base max-w-4xl"> | ||
| <h1 className="text-2xl">Welcome to the OffsetHelper Example Frontend</h1> | ||
|
|
||
| <p className="m-3"> | ||
| These steps are combined in each of the following "auto | ||
| offset" methods implemented in OffsetHelper to allow a retirement | ||
| within one transaction: | ||
| </p> | ||
| <ul> | ||
| <li className="m-5"> | ||
| <code className="underline text-forest"> | ||
| <a | ||
| href="/autoOffsetPoolToken" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| autoOffsetPoolToken() | ||
| </a> | ||
| </code>{" "} | ||
| if the user already owns a Toucan pool token such as BCT or NCT, | ||
| </li> | ||
| <li className="m-5"> | ||
| <code className="underline text-forest"> | ||
| <a | ||
| href="/autoOffsetExactOutToken" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| autoOffsetExactOutToken() | ||
| </a> | ||
| </code>{" "} | ||
| if the user would like to perform a retirement using an ERC20 token | ||
| (USDC, WETH or WMATIC), specifying the exact amount of TCO2s to | ||
| retire, | ||
| </li> | ||
| <li className="m-5"> | ||
| <code className="underline text-forest"> | ||
| <a | ||
| href="/autoOffsetExactInToken" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| autoOffsetExactInToken() | ||
| </a> | ||
| </code>{" "} | ||
| if the user would like to perform a retirement using an ERC20 token | ||
| (USDC, WETH or WMATIC), specifying the exact amount of token to swap | ||
| into TCO2s. | ||
| </li> | ||
| <li className="m-5"> | ||
| <code className="underline text-forest"> | ||
| <a | ||
| href="/autoOffsetExactOutETH" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| autoOffsetExactOutETH() | ||
| </a> | ||
| </code>{" "} | ||
| if the user would like to perform a retirement using MATIC, specifying | ||
| the exact amount of TCO2s to retire, | ||
| </li> | ||
| <li className="m-5"> | ||
| <code className="underline text-forest"> | ||
| <a | ||
| href="/autoOffsetExactInETH" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| autoOffsetExactInETH() | ||
| </a> | ||
| </code>{" "} | ||
| if the user would like to perform a retirement using MATIC, swapping | ||
| all sent MATIC into TCO2s, | ||
| </li> | ||
| </ul> | ||
| <div className="space-y-3"> | ||
| <p className=""> | ||
| Helper functions that simplify the carbon offsetting (retirement) | ||
| process. Retiring carbon tokens requires multiple steps and | ||
| interactions with Toucan Protocol‘s main contracts: | ||
| </p> | ||
|
|
||
| <ol className="list-decimal list-outside ml-8"> | ||
| <li> | ||
| Obtain a Toucan pool token such as BCT or NCT (by performing a token | ||
| swap). | ||
| </li> | ||
| <li>Redeem the pool token for a TCO2 token.</li> | ||
| <li>Retire the TCO2 token.</li> | ||
| </ol> | ||
| </div> | ||
|
|
||
| <div className="space-y-3"> | ||
| <p className=""> | ||
| These steps are combined in each of the following "auto | ||
| offset" methods implemented in OffsetHelper to allow a retirement | ||
| within one transaction: | ||
| </p> | ||
|
|
||
| <ul className="list-disc list-outside ml-8 space-y-2"> | ||
| <li> | ||
| <code className="text-forest rounded-md bg-gray-200 px-1.5 py-1"> | ||
| <a | ||
| className="underline hover:no-underline" | ||
| href="/autoOffsetPoolToken" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| autoOffsetPoolToken() | ||
| </a> | ||
| </code>{" "} | ||
| - if the user already owns a Toucan pool token such as BCT or NCT; | ||
| </li> | ||
| <li> | ||
| <code className="text-forest rounded-md bg-gray-200 px-1.5 py-1"> | ||
| <a | ||
| className="underline hover:no-underline" | ||
| href="/autoOffsetExactOutToken" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| autoOffsetExactOutToken() | ||
| </a> | ||
| </code>{" "} | ||
| - if the user would like to perform a retirement using an ERC20 | ||
| token (USDC, WETH or WMATIC), specifying the exact amount of TCO2s | ||
| to retire; | ||
| </li> | ||
| <li> | ||
| <code className="text-forest rounded-md bg-gray-200 px-1.5 py-1"> | ||
| <a | ||
| className="underline hover:no-underline" | ||
| href="/autoOffsetExactInToken" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| autoOffsetExactInToken() | ||
| </a> | ||
| </code>{" "} | ||
| - if the user would like to perform a retirement using an ERC20 | ||
| token (USDC, WETH or WMATIC), specifying the exact amount of token | ||
| to swap into TCO2s; | ||
| </li> | ||
| <li> | ||
| <code className="text-forest rounded-md bg-gray-200 px-1.5 py-1"> | ||
| <a | ||
| className="underline hover:no-underline" | ||
| href="/autoOffsetExactOutETH" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| autoOffsetExactOutETH() | ||
| </a> | ||
| </code>{" "} | ||
| - if the user would like to perform a retirement using MATIC, | ||
| specifying the exact amount of TCO2s to retire; | ||
| </li> | ||
| <li> | ||
| <code className="text-forest rounded-md bg-gray-200 px-1.5 py-1"> | ||
| <a | ||
| className="underline hover:no-underline" | ||
| href="/autoOffsetExactInETH" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| autoOffsetExactInETH() | ||
| </a> | ||
| </code>{" "} | ||
| - if the user would like to perform a retirement using MATIC, | ||
| swapping all sent MATIC into TCO2s; | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |