Skip to content

Commit

Permalink
feature: add repository with example implementation of the OffsetHelper
Browse files Browse the repository at this point in the history
  • Loading branch information
Lena Hierzi committed Oct 2, 2023
1 parent f98e5ef commit 53327ab
Show file tree
Hide file tree
Showing 25 changed files with 5,838 additions and 0 deletions.
1 change: 1 addition & 0 deletions example-frontend/.envexample
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
NEXT_PUBLIC_WC_PROJECT_ID=289a40b4eef16151e69c7db06322f4
3 changes: 3 additions & 0 deletions example-frontend/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"extends": "next/core-web-vitals"
}
36 changes: 36 additions & 0 deletions example-frontend/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env*.local

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts
93 changes: 93 additions & 0 deletions example-frontend/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
export default function Home() {
return (
<div>
<div className="relative flex flex-col h-16 justify-between">
<h1>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&lsquo;s main contracts:
</p>
<br />
<ol className="m-3">
<li className="m-5">
{" "}
Obtain a Toucan pool token such as BCT or NCT (by performing a token
swap).
</li>
<li className="m-5"> Redeem the pool token for a TCO2 token.</li>
<li className="m-5"> Retire the TCO2 token.</li>
</ol>
<br />
<p className="m-3">
These steps are combined in each of the following &quot;auto
offset&quot; methods implemented in OffsetHelper to allow a retirement
within one transaction:
</p>
<ul>
<li className="m-5">
<code className="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="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="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="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="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>
</div>
);
}
49 changes: 49 additions & 0 deletions example-frontend/components/Footer.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@

type Props = {
className?: string
}

const navigation = [
{
name: 'Twitter',
href: 'https://twitter.com/CeloDevs',
icon: (props: Props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
),
},
{
name: 'GitHub',
href: 'https://github.com/celo-org/celo-composer',
icon: (props: Props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clipRule="evenodd"
/>
</svg>
),
}
]

export default function Footer() {
return (
<footer className="bg-gypsum mt-auto border-black border-t">
<div className="mx-auto max-w-7xl py-6 px-4 sm:px-6 md:flex md:items-center md:justify-between lg:px-8">
<div className="flex justify-center space-x-6 md:order-2">
{navigation.map((item) => (
<a key={item.name} href={item.href} className="text-black hover:text-forest" target="_blank" rel="noopener noreferrer">
<span className="sr-only">{item.name}</span>
<item.icon className="h-6 w-6" aria-hidden="true" />
</a>
))}
</div>
<div className="mt-8 md:order-1 md:mt-0">
<p className="text-center text-base text-black">&copy; {new Date().getFullYear()} Developed with 🖤 by the Celo DevRel team.</p>
</div>
</div>
</footer>
)
}
75 changes: 75 additions & 0 deletions example-frontend/components/Header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import { Disclosure } from "@headlessui/react";
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
import { ConnectButton } from "@rainbow-me/rainbowkit";
import Image from "next/image";

export default function Header() {
return (
<Disclosure as="nav" className="bg-prosperity border-b border-black">
{({ open }) => (
<>
<div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
<div className="relative flex h-16 justify-between">
<div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
{/* Mobile menu button */}
<Disclosure.Button className="inline-flex items-center justify-center rounded-md p-2 text-black focus:outline-none focus:ring-1 focus:ring-inset focus:rounded-none focus:ring-black">
<span className="sr-only">Open main menu</span>
{open ? (
<XMarkIcon className="block h-6 w-6" aria-hidden="true" />
) : (
<Bars3Icon className="block h-6 w-6" aria-hidden="true" />
)}
</Disclosure.Button>
</div>
<div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
<div className="flex flex-shrink-0 items-center">
<Image
className="block h-8 w-auto sm:block lg:block"
src="/logo.svg"
width="24"
height="24"
alt="Celo Logo"
/>
</div>
<div className="hidden sm:ml-6 sm:flex sm:space-x-8">
<a
href="/"
className="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium text-gray-900"
>
Home
</a>
</div>
{/* <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
<a
href="list"
className="inline-flex items-center border-b-2 border-black px-1 pt-1 text-sm font-medium text-gray-900"
>
List
</a>
</div> */}
</div>
<div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
<ConnectButton
showBalance={{ smallScreen: true, largeScreen: false }}
/>
</div>
</div>
</div>

<Disclosure.Panel className="sm:hidden">
<div className="space-y-1 pt-2 pb-4">
<Disclosure.Button
as="a"
href="#"
className="block border-l-4 border-black py-2 pl-3 pr-4 text-base font-medium text-black"
>
Home
</Disclosure.Button>
{/* Add here your custom menu elements */}
</div>
</Disclosure.Panel>
</>
)}
</Disclosure>
);
}
22 changes: 22 additions & 0 deletions example-frontend/components/Layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { FC, ReactNode } from "react";
import Footer from "./Footer";
import Header from "./Header";

interface Props {
children: ReactNode
}
const Layout: FC<Props> = ({children}) => {
return (
<>
<div className="bg-gypsum overflow-hidden flex flex-col min-h-screen">
<Header />
<div className="py-16 max-w-7xl mx-auto space-y-8 sm:px-6 lg:px-8">
{children}
</div>
<Footer />
</div>
</>
)
}

export default Layout;
13 changes: 13 additions & 0 deletions example-frontend/next.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
webpack: (config) => {
config.resolve.fallback = {
fs: false
}
return config
}
}

module.exports = nextConfig
37 changes: 37 additions & 0 deletions example-frontend/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
{
"name": "@test-4/react-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@celo/rainbowkit-celo": "^1.0.1",
"@headlessui/react": "^1.7.13",
"@heroicons/react": "^2.0.16",
"@rainbow-me/rainbowkit": "^0.12.2",
"ethers": "^5.7.2",
"next": "13.2.4",
"react": "18.2.0",
"react-dom": "18.2.0",
"toucan-sdk": "^1.0.4-beta",
"wagmi": "^0.12.2"
},
"devDependencies": {
"@types/node": "18.15.2",
"@types/react": "18.0.27",
"@types/react-dom": "18.0.11",
"autoprefixer": "^10.4.14",
"eslint": "8.36.0",
"eslint-config-next": "13.2.4",
"postcss": "^8.4.21",
"tailwindcss": "^3.2.7",
"typescript": "4.9.5"
},
"browser": {
"net": false
}
}
53 changes: 53 additions & 0 deletions example-frontend/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import "@rainbow-me/rainbowkit/styles.css";
import celoGroups from "@celo/rainbowkit-celo/lists";
import type { AppProps } from "next/app";
import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { configureChains, createClient, WagmiConfig } from "wagmi";
import { jsonRpcProvider } from "wagmi/providers/jsonRpc";
import { polygon, polygonMumbai } from "wagmi/chains";
import "../styles/globals.css";

// Import CELO chain information
import { Alfajores, Celo } from "@celo/rainbowkit-celo/chains";

import Layout from "../components/Layout";

const projectId = process.env.NEXT_PUBLIC_WC_PROJECT_ID as string; // get one at https://cloud.walletconnect.com/app

const { chains, provider } = configureChains(
[Alfajores, Celo, polygonMumbai, polygon],
[
jsonRpcProvider({
rpc: (chain) =>
chain.id === 80001 || chain.id === 137
? { http: "https://rpc.ankr.com/polygon" }
: { http: "https://forno.celo.org" },
}),
]
);

const connectors = celoGroups({
chains,
projectId,
appName: (typeof document === "object" && document.title) || "Your App Name",
});

const wagmiClient = createClient({
autoConnect: true,
connectors,
provider,
});

function App({ Component, pageProps }: AppProps) {
return (
<WagmiConfig client={wagmiClient}>
<RainbowKitProvider chains={chains} coolMode={true}>
<Layout>
<Component {...pageProps} />
</Layout>
</RainbowKitProvider>
</WagmiConfig>
);
}

export default App;
Loading

0 comments on commit 53327ab

Please sign in to comment.