turbo-eth / template-web3-app Goto Github PK
View Code? Open in Web Editor NEW⚡️ Web3 App Template built using Next.js, RainbowKit, SIWE, Disco, and more!
Home Page: https://www.turboeth.xyz
License: MIT License
⚡️ Web3 App Template built using Next.js, RainbowKit, SIWE, Disco, and more!
Home Page: https://www.turboeth.xyz
License: MIT License
As a user of Web3 social applications I want an elegant user experience. I don't want to regularly sign messages for low-stakes social posts with my root
account.
More specifically I want to generate browser based Web3 session keys and write messages to the Ceramic network on behalf of my primary account i.e. kames.eth
To be eligible for the payout you must first get approval to work on the bounty.
general
channelbounty
channelIt's recommended to share a link to your personal Github account.
Integrate the Ceramic network and use session keys for temporary write access to a data streams.
Session Key Integration 👇
https://github.com/turbo-eth/template-web3-app/tree/integrations/integrations/session-keys
A data stream is essentially a linked list using IPFS documents.
Streams are a core concept in Ceramic, they include a primary data structure called an event log, a URI scheme to identify unique streams in a network, a simple consensus model to agree on the same event log across the network, and a supporting lifecycle of creating, updating, querying, and syncing streams.
The core data structure of streams is a self-certifying event log. It combines IPLD for hash linked data and cryptographic proofs to create an authenticated and immutable log. This event log can be used to model mutable databases and other data structures on top.
https://developers.ceramic.network/protocol/streams/
A data stream can contain any type of data.
A great example of data streams is Orbis and Gitcoin Passport services. It's also recommend to review the Ceramic Scanner and view data streams as they're published.
Required Functionality:
root
account to a temporary leaf
account.Developer Tasks:
ceramic-client.ts
components/create-session-key-button.tsx
components/create-post-form.tsx
views/create-post-and-session-key-view.tsx
<CreateSessionKeyButton />
The create-session-key-button.tsx
component should use the session-keys
integration.
The component should be for responsible creating new browser session keys and delegating authority from a root
account i.e. MetaMask wallet. Session keys are Ethereum private keys generated in the browser and managed using the viem
package. And are used for temporary write access to Web3 infrastructure and systems that enforce object capabilities.
Session Key Integration 👇
https://github.com/turbo-eth/template-web3-app/tree/integrations/integrations/session-keys
<CreatePostForm />
The create-post-form.tsx
component should use the ceramic
integration.
The form should include two fields:
Use react-hook-form
to handle form state and actions.
Required Functionality
root
account.leaf
account.The primary <CreatePostAndSessionKeyView />
view should contain all the components necessary to create a temporary session key, write a basic post (title, body), start a new Ceramic stream using the root
account and delegate write
authority to the session key.
The core Ceramic integration should be added to the integrations/ceramic-sessions
folder.
integrations/ceramic-sessions
├─ components/
│ ├─ create-session-key-button.tsx
│ ├─ create-post-form.tsx
├─ hooks/
│ ├─ **/*.ts
├─ utils/
│ ├─ **/*.ts
├─ views/
│ ├─ create-post-and-session-key-view.tsx
├─ ceramic-client.ts
├─ README.md
The application pages should be added to the app/ceramic/session-keys
folder.
app/ceramic
├─ session-keys
│ ├─ page.tsx
The app/ceramic/session-keys/page.tsx
page should import and export the views/create-post-and-session-key-view.tsx
component.
The bounty reward is 400 OP tokens and TurboETH DevPass digital collectible.
TurboETH is the recipient of 18,271.88 OP Tokens from Optimism Retroactive Public Goods Funding. The OP tokens earned from the PGF program are the primary funding source for TurboETH bounties.
Bonus: 50 OP will be awarded if flux.paradigm.xyz is used to help generate the template code in a meaningful way. Exported conversations must be made available to be eligible for the bonus reward.
The final integration may not resemble the proposed integration - that's O.K - a natural part of software development.
During development you might discover an original hypothesis doesn't make sense. No problem. Make a comment and clearly explain why a new approach is better than old one. Get rewarded for thinking out of the box.
The final bounty reward can be increased to match new bounty tasks.
As a content creator I want the ability to easily stream video to my audience using verifiable credentials as the access controls.
More specifically I want to utilize the Disco API and Livepeer protocol to gate video content.
To be eligible for the payout you must first get approval to work on the bounty.
general
channelbounty
channelIt's recommended to share a link to your personal Github account.
Add the verifiaible credential access controls to the Livepeer integration.
Dependent on issue #49 - Bounty: Livepeer Integration - 250 OP Reward being complete.
The bounty should utilize the Disco API to and verifiable credential validation to gate video services from the Livepeer protocol.
*Disco Access Controls Examples
A template exists that demonstrates how to use Disco for access control gateways.
Disco Documentation
Livepeer Documentation
Developer Tasks:
/integrations/livepeer/route-gating-stream-via-disco
/integrations/livepeer/route-gating-vod-via-disco
/app/api/livepeer/gating-stream-via-disco
/app/api/livepeer/gating-vod-via-disco
Gating Routes/API
The gating logic should be containe in the route
files and exported in the api
file.
An example if this can be found in the Disco integartion.
The API logic should be added to the integrations/livepeer/routes
folder.
integrations/livepeer
├─ routes/
│ ├─ route-gating-stream-via-disco.ts
│ ├─ route-gating-vod-via-disco.ts
The API should be added to the app/livepeer
folder.
pages/api/livepeer
├─ gating-stream-via-disco.ts
├─ gating-vod-via-disco.ts
The bounty reward is 175 OP tokens and TurboETH DevPass digital collectible.
TurboETH is the recipient of 18,271.88 OP Tokens from Optimism Retroactive Public Goods Funding. The OP tokens earned from the PGF program are the primary funding source for TurboETH bounties.
The final integration may not resemble the proposed integration - that's O.K - a natural part of software development.
During development you might discover an original hypothesis doesn't make sense. No problem. Make a comment and clearly explain why a new approach is better than old one. Get rewarded for thinking out of the box.
The final bounty reward can be increased to match new bounty tasks.
As a Developer I want to allow my users to easily share encrypted messages with each other.
Add MailChain so "people can communicate using their Web3 identities, such as ENS names, through a private, end-to-end encrypted mail experience."
Resources:
Project Overview:
The goal of this proposal is to implement Progressive Web Application features within the existing TurboETH website. A PWA will transform TurboETH into a more dynamic and user-friendly platform by allowing users to access the website seamlessly across devices, even when they are offline. This enhancement will not only improve the website's performance but also provide a more engaging experience to its users.
Scope of Work:
1.Service Worker Integration: Implement a service worker to cache essential assets, allowing users to load previously visited pages and data offline.
2.Offline Support: Design the PWA to gracefully handle scenarios where users lose internet connectivity. Users will still be able to perform basic functions without a network connection.
3.Add to Home Screen: Configure the PWA to prompt users to add TurboETH to their home screens for quick access, enhancing user convenience.
4.Push Notifications : If desired, implement push notification functionality to keep users informed of important updates, such as pending transactions or account activity.
Project Timeline:
The estimated timeline for completing this project is 7 days. I will ensure consistent communication and progress updates to keep you informed throughout the development process.
Cost:
The proposed budget for this project is $500, which covers the development, testing, and integration of PWA functionality into the TurboETH website. I am committed to delivering exceptional value and high-quality results.
About Me:
I am a seasoned web developer with extensive experience in creating innovative and user-centric web solutions. My expertise lies in implementing PWAs, and I am excited about the opportunity to contribute my skills to elevate TurboETH's user experience.
I am confident that the addition of Progressive Web Application functionality to TurboETH will provide tangible benefits to its users and enhance its overall value proposition. If you have any questions or would like to discuss this proposal further, please feel free to reach out.
Thank you for considering this proposal. I look forward to the possibility of collaborating with you to make TurboETH even more remarkable.
Best regards,
Icus
The SIWE flow uses iron-session
to create a session using an encrypted cookie.
Normally we want to create this with httpOnly
set too true.
Right now we are manually overriding default setting:
https://github.com/turbo-eth/template-web3-app/blob/main/lib/config.ts#L27
Why?
A bug is present causing the cookie not be removed upon the second logout request. I don't know why.
Instead the cookie is accessed from the browser/client and is destroyed manually, if the API /account/logout
request fails. This is NOT SECURE and the bug needs to be fixed before a production application can use the boilerplate.
I get the following error:
[...]
node:internal/modules/cjs/loader:1145
throw err;
^
Error: Cannot find module '/Users/user/Projects/node'
at Module._resolveFilename (node:internal/modules/cjs/loader:1142:15)
at Module._load (node:internal/modules/cjs/loader:983:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:142:12)
at node:internal/main/run_main_module:28:49 {
code: 'MODULE_NOT_FOUND',
requireStack: []
Node is installed of course (using brew). Also, I don't get the exception when pnpm create
other projects. Is node correctly referenced in the install script?
I have faced so much issues trying to update the registry to the 2.x versions of Wagmi and Rainbowkit
As a Developer I want to use SSX and ReCaps in my Web3 application.
As a Developer I want a collection of Web3 App templates for starting new projects and experiments.
More specifically I want new developers to have the ability to quickly setup/deploy new Web3 applications without any previous knowledge or experience. The templates should serve as tools/guides for developers interested in building more complex, next generation Web3 applications.
Have question?
Join the ⚡️TurboETH Discord channel
The bounty reward is 500 OP tokens and TurboETH DevPass digital collectible.
TurboETH is the recipient of 18,271.88 OP Tokens from Optimism Retroactive Public Goods Funding. The OP tokens earned from the PGF program are the primary funding source for TurboETH bounties.
Bonus: 50 OP will be awarded if flux.paradigm.xyz is used to help generate the template code in a meaningful way. Exported conversations must be made available to be eligible for the bonus reward.
Create a new ⚡️TurboETH Template that integrates a core Web3 technology: blockchain, storage, identity, access controls etc...
The template should be focused in one or more of the following categories:
Integration Ideas
What's Required:
The final integration may not resemble the proposed integration - that's O.K - a natural part of software development.
During development you might discover an original hypothesis doesn't make sense. No problem. Make a comment and clearly explain why a new approach is better than old one. Get rewarded for thinking out of the box.
The final bounty reward can be increased to match new bounty tasks.
I've tested this on rainbow wallet and it's recognizing the QR code but nothing happens. The app QR code closes nothing happens on the test url for this package.
Also since there's a section for connecting wallets on desktop using Wallet connect. How can you enable this?
https://www.turboeth.xyz/
Is there a working implementation of turboeth to test?
Thanks
The current TurboETH site only supports the Goerli Base.
With the launch of Base Mainnet, the main site should add base mainnet as default to the chains.
As a developer I want to easily issue verifiable credentials when users reach a specific goal or action.
More specifically I want to issue a "Proof of Hack" verifiable credential using the Disco credential issuance API.
To be eligible for the payout you must first get approval to work on the bounty.
general
channelbounty
channelIt's recommended to share a link to your personal Github account.
Update the Disco integration to include support for verifiable credential programmatic issuance.
You can reference the public Disco schemas on Github for a full list of potential schemas
https://github.com/discoxyz/disco-schemas
For the integration use the ProofOfHackCredential verifiable credential.
https://github.com/discoxyz/disco-schemas/tree/main/src/schemas/ProofOfHackCredential
Verifiable Credential Schema Snippet
The core credential fields are "eventName", "eventDate" and "projectName", as denoted in the required field, but the form should include support for all of the properties.
credentialSubject: {
type: "object",
required: ["id", "eventName", "eventDate", "projectName"],
properties: {
id: { title: "Recipient DID", type: "string", format: "uri" },
eventName: { title: "Event Name", type: "string" },
eventDate: { title: "Event Date", type: "string", format: "date" },
projectName: { title: "Project Name", type: "string" },
place: { title: "Place", type: "string" },
teamName: { title: "Team Name", type: "string" },
sourceCodeUrl: { title: "Source Code Url", type: "string" },
usageLink: { title: "Usage Link", type: "string" },
},
},
Required Functionality:
<Form />
components.app
page to issue verifiable credentials.Developer Tasks:
disco/hooks/use-disco-issue-credential.tsx
disco/routes/route-credential-issue.tsx
disco/forms/form-credential-issuance-proof-of-hack.tsx
app/disco/proof-of-hack/page.tsx
Hook
The useDiscoIssueCredential
hook should use useMutation
method exported from the TanStack react-query package.
API
The routeCredentialIssuance.ts
endpoint should limit issuance to admins.
Admins are defined in env
variables using the APP_ADMINS
key.
The isAdmin
key is added to authentication session
during account verification.
https://github.com/turbo-eth/template-web3-app/blob/main/pages/api/siwe/verify.ts#L19
The route
should be re-exported in a pages/api/disco/credential-issue.ts
file.
https://github.com/turbo-eth/template-web3-app/tree/integrations/pages/api/disco
Component
The <FormCredentialIssuanceProofOfHack />
component should use the useDiscoIssueCredential
hook to interact with the API.
The form should be generated using the shacdn UI component library.
Follow the install instructions on https://ui.shadcn.com/docs/forms/react-hook-form
The form should look similar to the code below, but using the verifiable credential schema.
"use client"
import Link from "next/link"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Button } from "@/components/ui/button"
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
const formSchema = z.object({
username: z.string().min(2, {
message: "Username must be at least 2 characters.",
}),
})
export function ProfileForm() {
. // 1. Define your form.
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
username: "",
},
})
// 2. Define a submit handler.
function onSubmit(values: z.infer<typeof formSchema>) {
// Do something with the form values.
// ✅ This will be type-safe and validated.
console.log(values)
}
}
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
<FormField
control={form.control}
name="username"
render={({ field }) => (
<FormItem>
<FormLabel>Username</FormLabel>
<FormControl>
<Input placeholder="shadcn" {...field} />
</FormControl>
<FormDescription>
This is your public display name.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit">Submit</Button>
</form>
</Form>
)
}
The Disco integration is located in integrations/disco
folder in the integrations
branch on the template-web3-app
repo.
integrations/disco
├─ routes/
│ ├─ route-credential-issue.tsx
├─ forms/
│ ├─ form-credential-issuance-proof-of-hack.tsx
├─ hooks/
│ ├─ **/*.ts
├─ utils/
│ ├─ **/*.ts
├─ client.ts
├─ README.md
The application pages should be added to the app/(general)/integration/disco
folder.
app/(general)/integration/disco
├─ proof-of-hack
│ ├─ page.tsx
The bounty reward is 650 USDC and 50 OP tokens.
TurboETH is the recipient of 18,271.88 OP Tokens from Optimism Retroactive Public Goods Funding. OP tokens earned from RPGF are helping fund TurboETH bounties.
The final integration may not resemble the proposed integration - that's O.K - a natural part of software development.
During development you might discover an original hypothesis doesn't make sense. No problem. Make a comment and clearly explain why a new approach is better than old one. Get rewarded for thinking out of the box.
The final bounty reward can be increased to match new bounty tasks.
Trying to debug the following error
You may need to add `jsonRpcProvider` to `configureChains` with the chain's RPC URLs.
Read more: https://wagmi.sh/core/providers/jsonRpc
at configureChains (webpack-internal:///(sc_client)/./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/@wagmi/core/dist/chunk-55IO54NW.js:124:13)
at eval (webpack-internal:///(sc_client)/./config/networks.ts:71:86)
at (sc_client)/./config/networks.ts (/Users/zzn/ws/d3ns-dapp/.next/server/app/(general)/page.js:4398:1)
at __webpack_require__ (/Users/zzn/ws/d3ns-dapp/.next/server/webpack-runtime.js:33:43)
at eval (webpack-internal:///(sc_client)/./components/providers/rainbow-kit.tsx:18:74)
at (sc_client)/./components/providers/rainbow-kit.tsx (/Users/zzn/ws/d3ns-dapp/.next/server/app/(general)/page.js:4222:1)
at __webpack_require__ (/Users/zzn/ws/d3ns-dapp/.next/server/webpack-runtime.js:33:43)
at eval (webpack-internal:///(sc_client)/./components/providers/root-provider.tsx:15:91)
at (sc_client)/./components/providers/root-provider.tsx (/Users/zzn/ws/d3ns-dapp/.next/server/app/(general)/page.js:4233:1)
at __webpack_require__ (/Users/zzn/ws/d3ns-dapp/.next/server/webpack-runtime.js:33:43)
at eval (webpack-internal:///(sc_client)/./app/layout.tsx:18:93)
at (sc_client)/./app/layout.tsx (/Users/zzn/ws/d3ns-dapp/.next/server/app/(general)/page.js:4134:1)
at __webpack_require__ (/Users/zzn/ws/d3ns-dapp/.next/server/webpack-runtime.js:33:43)
at /Users/zzn/ws/d3ns-dapp/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/compiled/react-server-dom-webpack/client.js:918:337
.env
file with required variables, excluding NEXT_PUBLIC_USE_PUBLIC_PROVIDER=true
pnpm install
and then pnpm run dev
Error appears as the section above.
As per
template-web3-app/config/networks.ts
Line 22 in c8f962b
template-web3-app/config/networks.ts
Lines 44 to 46 in c8f962b
It seems the wagmi require the list of chain (identified in network.ts as CHAINS
) to be a subset of the list of supported chains supported by jsonRpcProviders (identified as PROVIDERs
).
Change the way to populate CHAINS to match with how PROVIDERs was added.
Something like
let providers =
if (process.env.NEXT_PUBLIC_ALCHEMY_API_KEY) PROVIDERS.push(alchemyProvider(...));
if (process.env.NEXT_PUBLIC_INFURA_API_KEY) PROVIDERS.push(infuraProvider(...));
if (process.env.NEXT_PUBLIC_USE_PUBLIC_PROVIDER) PROVIDERS.push(publicProvider());
PROVIDERS.forEach(() => {
let supportedChains = getSupportedChainsByProvider(provider); # Needs to find out or create a manual map
CHAINS.push(supportedChains);
}
CHAINS = deduplicate(CHAINS);
// @ts-ignore
export const { chains, provider } = configureChains(CHAINS, [...PROVIDERS])
The axios
module is bit outdated and better alternatives exist. Find an replace unnecessary axios
instances with fetch
or a more light-weight NPM fetching module.
As a Web3 developer I want to include "streaming" money features in my Web3 applications.
More specifically I want to use SuperFluid to easily send, delete and unwrap payments using the Super Token standard. The Super Token standard can wrap an existing ERC20 token or as a standalone ERC20 token with the Super Token enhancements.
To be eligible for the payout you must first get approval to work on the bounty.
general
channelbounty
channelIt's recommended to share a link to your personal Github account.
Create a SuperFluid SDK integration for TurboETH. The SuperFluid integration should allow developers to easily start, claim and stop money flows.
The SuperFluid integration requires both adding the core integration files and updating the demo application to showcase the SuperFluid features.
Integration
superlfuid/hooks/use-superfluid-with-wagmi-provider.ts
superlfuid/components/form-send-flow.tsx
superlfuid/components/form-delete-flow.tsx
superlfuid/components/form-unwrap-super-token.tsx
The form-send-flow.tsx
component should wrap the createFlow
method.
The form-delete-flow.tsx
component should stop the flow using the deleteFlow
method.
The form-unwrap-super-token.tsx
component should unwrap the Super Token for the underlying asset.
Application
app/(general)/integrations/superfluid/send/page.tsx
app/(general)/integrations/superfluid/delete/page.tsx
app/(general)/integrations/superfluid/balance/page.tsx
Form components should use react-hook-form
and zod
for form submission management and creating the component Typescript interfaces and types.
Reference of what the form should use:
https://ui.shadcn.com/docs/forms/react-hook-form
SuperFluid documentation uses Web3Modal
and ethers
packages in the "Initialization" section.
https://docs.superfluid.finance/superfluid/developers/sdk-core/sdk-core-initialization#operations
When integrating SuperFluid in TurboETH use the primary wallet connection manager and utility library: wagmi
and viem
.
A hook should be created to integrate SuperFluid with wagmi
.
The hook should look something like the code snippet below.
// use-superfluid-with-wagmi-provider.tsx
import { useEffect, useMemo, useState } from "react";
import { useChainId, useSigner } from "wagmi";
import { Framework } from "@superfluid-finance/sdk-core";
export function useSuperFluidWithWagmiProvider() {
const { data } = useSigner();
const chainId = useChainId();
return useMemo(async () => {
if (!data?.provider) return;
const sf = await Framework.create({
chainId: chainId,
provider: data?.provider?.provider, // this is the injected provider
});
}, []);
}
The SuperFluid integration should be added to the integrations/superfluid
folder.
integrations/superfluid
├─ components/
│ ├─ form-send-flow.tsx
│ ├─ form-stop-flow.tsx
│ ├─ form-unwrap-super-token.tsx
├─ hooks/
│ ├─ use-superfluid-with-wagmi-provider.ts
│ ├─ **/*.ts
├─ utils/
│ ├─ **/*.ts
├─ README.md
The application pages should be added to the app/(general)/integrations/superfluid
folder.
app/(general)/integrations/superfluid
├─ start-flow
│ ├─ page.tsx
├─ stop-flow
│ ├─ page.tsx
├─ balance
│ ├─ page.tsx
The bounty reward is 225 OP tokens and TurboETH DevPass digital collectible.
TurboETH is the recipient of 18,271.88 OP Tokens from Optimism Retroactive Public Goods Funding. OP tokens earned from RPGF are helping fund TurboETH bounties.
Bonus: 50 OP will be awarded if flux.paradigm.xyz is used to help generate the template code in a meaningful way. Exported conversations must be made available to be eligible for the bonus reward.
The final integration may not resemble the proposed integration - that's O.K - a natural part of software development.
During development you might discover an original hypothesis doesn't make sense. No problem. Make a comment and clearly explain why a new approach is better than old one. Get rewarded for thinking out of the box.
The final bounty reward can be increased to match new bounty tasks.
Hack around SIWE. Sign in with another account then can inject a different account and remain signed in
As a Web3 protocol developer I want to easily integrate decentralized finance primitives into my application.
More specifically I want to utilize PoolTogether the prize savings network. Giving users the ability to easily deposit into a web3 savings network and automatically win prizes.
To be eligible for the payout you must first get approval to work on the bounty.
general
channelbounty
channelIt's recommended to share a link to your personal Github account when introducing yourself.
Integrate the PoolTogether V4 protocol into the TurboETH.
The integration should include the ability to deposit and withdraw from the PoolTogether prize savings network on Ethereum, Optimism and Polygon.
Example of PrizePool and Ticket smart contracts deployed on Optimism:
PoolTogether users interact with the YieldSourcePrizePool
smart contract. Mainly calling the depositTo
, depositToAndDelegate
and withdraw
functions.
The Ticket
contract is the ERC20 token that "holds" the chance to win prizes. A ptUSDC
token is minted 1-to-1 when USDC
is deposited into the YieldSourcePrizePool
smart contract.
Required Functionality:
Developer Tasks:
yield-source-prize-pool-abi.json
and yield-source-prize-pool-bytecode.json
ticket-abi.json
and ticket-bytecode.json
wagmi.config.js
- Configure to use essential smart contract artifactsform-yield-source-prize-pool-deposit.tsx
form-yield-source-prize-pool-withdraw.tsx
prize-pool-contract-list.ts
The Contract List should include the USDC prizes pool and ticket addresses.
https://dev.pooltogether.com/protocol/deployments/mainnet/
Template - PrizePool Contract Address List
{
1: '',
10: '0x79Bc8bD53244bC8a9C8c27509a2d573650A83373',
137: '',
}
Template - Ticket Contract Address List
{
1: '',
10: '0x62BB4fc73094c83B5e952C2180B23fA7054954c4',
137: '',
}
The contract lists can be passed into a hook like the one below to easily update the deposit
and withdraw
components with the right smart contract addresses.
import { useNetwork } from 'wagmi'
interface ContractChainList {
[key: number]: string
}
export const useLoadContractFromChainId = (list: ContractChainList) => {
const { chain } = useNetwork()
return list[chain?.id || 1] || undefined
}
# Example of Usage - USDC Tokens
const contractAddress = useLoadContractFromChainId({
1: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
4: '0x4f96fe3b7a6cf9725f59d353f723c1bdb64ca6aa',
137: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',
})
The PoolTogether integration should be added to the integrations/pooltogether-v4
folder.
integrations/pooltogether-v4
├─ abis/
│ ├─ yield-source-prize-pool-abi.json
│ ├─ yield-source-prize-pool-bytecode.json
├─ components/
│ ├─ form-yield-source-prize-pool-deposit.tsx
│ ├─ form-yield-source-prize-pool-withdraw.tsx
├─ hooks/
│ ├─ **/*.ts
├─ utils/
│ ├─ **/*.ts
├─ prize-pool-contract-list.ts
├─ ticket-contract-list.ts
├─ pooltogether-v4-wagmi.ts
├─ wagmi.config.ts
├─ README.md```
The application pages should be added to the app/pooltogether-v4
folder.
app/pooltogether-v4
├─ deposit
│ ├─ page.tsx
├─ withdraw
│ ├─ page.tsx
The bounty reward is 250 tokens and TurboETH DevPass digital collectible.
TurboETH is the recipient of 18,271.88 OP Tokens from Optimism Retroactive Public Goods Funding. The OP tokens earned from the PGF program are the primary funding source for TurboETH bounties.
The final integration may not resemble the proposed integration - that's O.K - a natural part of software development.
During development you might discover an original hypothesis doesn't make sense. No problem. Make a comment and clearly explain why a new approach is better than old one. Get rewarded for thinking out of the box.
The final bounty reward can be increased to match new bounty tasks.
Update BranchIsAuthenticated
to IsSignedIn
and IsSignedOut
components.
As a developer I want to quickly add customizable components for popular smart contracts.
More specifically I want ERC721 components for displaying name, symbol, tokenURI, contractURI and other smart contract data directly from the blockchain. The components should be minimal and un-opionated about design -- allowing developers to style components using different approaches like passing in tailwindcss
classses or wrapping with styled-components
.
Previous work from the erc721-wagmi
module can be used to complete the task.
Github: https://github.com/turbo-eth/erc721-wagmi
NPM: https://www.npmjs.com/package/@turbo-eth/erc721-wagmi
Have question?
Join the ⚡️TurboETH Discord channel
The bounty reward is 150 OP tokens and TurboETH DevPass digital collectible.
TurboETH is the recipient of 18,271.88 OP Tokens from Optimism Retroactive Public Goods Funding. The OP tokens earned from the PGF program are the primary funding source for TurboETH bounties.
Bonus: 50 OP will be awarded if flux.paradigm.xyz is used to help generate the template code in a meaningful way. Exported conversations must be made available to be eligible for the bonus reward.
Create an erc721
integration that adds support for add ERC721 smart contracts.
The erc721
integration should have a similar file structure to the erc20
integration.
Required Functionality:
Developer Tasks:
erc721-abi
and erc721-bytecode
erc721-test-abi
and erc721-test-bytecode
wagmi.config.js
- Configure to use core
and test
smart contract artifactserc721-owner-of.tsx
erc721-name.tsx
erc721-symbol.tsx
erc721-total-supply.tsx
erc721-contract-uri-name.tsx
erc721-contract-uri-description.tsx
erc721-contract-uri-description.tsx
erc721-contract-uri-image.tsx
erc721-token-uri-name.tsx
erc721-token-uri-description.tsx
erc721-token-uri-image.tsx
erc721-write-mint.tsx
erc721-write-transfer.tsx
erc721-write-approve.tsx
As stated above previous work from the erc721-wagmi
module can be used to complete the task. A collection of components and hooks, like reading from IPFS and parsing bytes64 encoded tokenURI data, already exists and can be copied.
Github: https://github.com/turbo-eth/erc721-wagmi
NPM: https://www.npmjs.com/package/@turbo-eth/erc721-wagmi
integrations/erc721
├─ components/
│ ├─ **/.tsx
├─ hooks/
│ ├─ **/*.ts
├─ utils/
│ ├─ **/*.ts
├─ erc721-wagmi.ts
├─ wagmi.config.ts
├─ README.md
The final integration may not resemble the proposed integration - that's O.K - a natural part of software development.
During development you might discover an original hypothesis doesn't make sense. No problem. Make a comment and clearly explain why a new approach is better than old one. Get rewarded for thinking out of the box.
The final bounty reward can be increased to match new bounty tasks.
As a content creator I want the ability to easily stream video to a private audience.
More specifically I want to utilize the Lit Protocol access control conditions and Livepeer to gate video content using ERC20 and ERC721 tokens as the conditions for access controls.
To be eligible for the payout you must first get approval to work on the bounty.
general
channelbounty
channelIt's recommended to share a link to your personal Github account.
Add token gating access controls to the Livepeer integration.
Dependent on issue #49 - Bounty: Livepeer Integration - 250 OP Reward being complete.
Use the Lit Protocol to gate video services from the Livepeer protocol.
Lit Protocol Access Controls Documentation & Examples
Lit Protocol should be used to generate a JWT(JSON web token).
A JWT can be generated via the getSignedToken
function of the LitNodeClient
.
TurboETH already includes a base Lit Protocol integration. Components are available for generating the ERC20 and ERC721 token gating access controls logic.
Livepeer Documentation
Developer Tasks:
/integrations/livepeer/route-gating-stream-via-lit
/integrations/livepeer/route-gating-vod-via-disco
/app/api/livepeer/gating-stream-via-lit
/app/api/livepeer/gating-vod-via-lit
Gating Routes/API
The gating logic should be containe in the route
files and exported in the api
file.
An example if this can be found in the Disco integration.
The API logic should be added to the integrations/livepeer/routes
folder.
integrations/livepeer
├─ routes/
│ ├─ route-gating-stream-via-lit.ts
│ ├─ route-gating-vod-via-lit.ts
The API should be added to the app/livepeer
folder.
pages/api/livepeer
├─ gating-stream-via-lit.ts
├─ gating-vod-via-lit.ts
The bounty reward is 175 OP tokens and TurboETH DevPass digital collectible.
TurboETH is the recipient of 18,271.88 OP Tokens from Optimism Retroactive Public Goods Funding. The OP tokens earned from the PGF program are the primary funding source for TurboETH bounties.
The final integration may not resemble the proposed integration - that's O.K - a natural part of software development.
During development you might discover an original hypothesis doesn't make sense. No problem. Make a comment and clearly explain why a new approach is better than old one. Get rewarded for thinking out of the box.
The final bounty reward can be increased to match new bounty tasks.
As a content creator I want the ability to easily stream video to my audience using Web3 native infrastructure for improved cost savings.
More specifically I want to utilize Livepeer's video streaming service to professionally transcode livestreams for multiple devices and network speeds, while also reducing costs associated with streaming and video on demand by up to 50x*
To be eligible for the payout you must first get approval to work on the bounty.
general
channelbounty
channelIt's recommended to share a link to your personal Github account.
Integrate the @livepeer/react
module into the TurboETH integrations
branch.
The integration should include both Video on Demand and Livestreaming support.
A majority of the component code can be copied from Livepeer documentation.
Livestreaming: https://docs.livepeer.org/guides/developing/create-a-livestream
Video on Demand: https://docs.livepeer.org/guides/developing/upload-a-video-asset
Developer Tasks:
@integration/livepeer-client.ts
@integration/livepeer-provider.tsx
@integration/components/video-livestream.tsx
@integration/components/video-on-demand.tsx
@root/app/integrations/liverpeer/livestream/page.tsx
@root/app/integrations/liverpeer/vod/page.tsx
The core Livepeer integration should be added to the integrations/livepeer
folder.
integrations/livepeer
├─ components
│ ├─ video-livestream.tsx
│ ├─ video-on-demand.tsx
├─ hooks
│ ├─ **/*.ts
├─ utils
│ ├─ **/*.ts
├─ livepeer-client.tsx
├─ livepeer-provider.tsx
├─ README.md
The application pages should be added to the app/livepeer
folder.
app/livepeer
├─ livestream
│ ├─ page.tsx
├─ video-on-demand
│ ├─ page.tsx
The bounty reward is 250 OP tokens and TurboETH DevPass digital collectible.
TurboETH is the recipient of 18,271.88 OP Tokens from Optimism Retroactive Public Goods Funding. The OP tokens earned from the PGF program are the primary funding source for TurboETH bounties.
Bonus: 50 OP will be awarded if flux.paradigm.xyz is used to help generate the template code in a meaningful way. Exported conversations must be made available to be eligible for the bonus reward.
The final integration may not resemble the proposed integration - that's O.K - a natural part of software development.
During development you might discover an original hypothesis doesn't make sense. No problem. Make a comment and clearly explain why a new approach is better than old one. Get rewarded for thinking out of the box.
The final bounty reward can be increased to match new bounty tasks.
Hi, when I was trying to SIWE via a contract wallet, the template-app does not support this way.
More info:
https://github.com/authereum/is-valid-signature
https://eips.ethereum.org/EIPS/eip-1271
Have we considered provide Dockerization?
As a Web3 developer I want to craft beautiful experiences for users of my application
More specifically I want to minimize friction experienced by users in my Web3 application by minimizing signing and managing permissions overhead. Session keys (browser hot wallets) are a great way to minimize friction in Web3 applications.
The user's session keys can be given temporary smart contract permissions via the delegatable framework and/or temporary write/read access to Ceramic network data streams.
Join the Discord channel if you have any questions.
The bounty reward is 300 OP tokens and TurboETH DevPass digital collectible.
TurboETH is the recipient of 18,271.88 OP Tokens from Optimism Retroactive Public Goods Funding. The OP tokens earned from the PGF program are the primary funding source for TurboETH bounties.
Bonus: 50 OP will be awarded if flux.paradigm.xyz is used to help generate the integration code. Exported conversations must be made available to be eligible for the bonus reward.
Add Web3 browser session keys as a TurboETH integration.
Session keys will be given temporary read/write access controls from a root account using technologies like Sign-In With Ethereum object capabilities and Delegatable delegations.
The hook should be similar to useBurnerWallet
found in Scaffold-ETH 2.
Except with 2 major changes:
ethers
with viem
to manage wallet instancesViem Documentation
Required Functionality:
viem
to manage wallet instances.jotai
for state management.Developer Tasks:
useSessionKey
<CreateSessionKey />
<DeleteSessionKey />
<ListSessionKeys />
The ideal candidate will have experience with React, as well as a strong understanding of browser session management and security best practices. They should be able to create a robust, reliable, and easy-to-use hook that can be easily integrated into existing React applications.
The deliverables for this project include a fully-functional React hook that manages temporary browser session keys, as well as comprehensive documentation and test cases. The project timeline is flexible, but we expect the work to be completed within two weeks of the start date.
integrations/session-keys
├─ components/
│ ├─ create-session-key.tsx
│ ├─ delete-session-key.tsx
│ ├─ list-session-keys.tsx
├─ hooks/
│ ├─ use-session-key.ts
│ ├─ use-session-keys.ts
├─ client.ts
├─ README.md
The final integration may not resemble the proposed integration - that's O.K - a natural part of software development.
During development you might discover an original hypothesis doesn't make sense. No problem. Make a comment and clearly explain why a new approach is better than old one. Get rewarded for thinking out of the box.
The final bounty reward can be increased to match new bounty tasks.
As a Developer I want to read and write to the Base testnet.
As a Developer I want a simple method for onboarding users from traditional payment methods into smart contracts.
As a Web3 developer I want to use threshold cryptography for distributed access control systems.
More specifically as a developer I want to easily share environment variables and other passwords without worrying about managing access control lists and other authentication infrastructure. I want to use verifiable credentials issued by a network of digital organizations and ENS sub-domains as distributed/decentralized access control lists.
Have question?
Join the ⚡️TurboETH Discord channel
The bounty reward is 300 OP tokens and TurboETH DevPass digital collectible.
TurboETH is the recipient of 18,271.88 OP Tokens from Optimism Retroactive Public Goods Funding. The OP tokens earned from the PGF program are the primary funding source for TurboETH bounties.
Bonus: 50 OP will be awarded if flux.paradigm.xyz is used to help generate the integration code. Exported conversations must be made available to be eligible for the bonus reward.
Add Lit Protocol encryption and decryption as a TurboETH integration.
Create environment variable sharing application using Lit protocol.
Replicate the functionality found in https://envshare.dev/unseal
Required Functionality:
How It Could Work:
address
or ENS name i.e. kames.eth
alice.web3oftrust.eth
🤑 If you integrate verifiable credentials an additional 100 OP tokens will be added to bounty reward.
Developer Tasks:
<FormLitEncryptEnvironmentVariable />
<FormLitDecryptEnvironmentVariable />
README.md
Abstract and create utility functions as neccesary.
For example it might make sense to create a LitClient
instance as a jotai
atom encapsulated in a useLitClient()
hook. The React components can share a single LitClient
instance using common patterns.
The documentation should include the necessary steps to add the Lit integration into other TurboETH projects.
integrations/lit-v2
├─ components/
│ ├─ form-lit-encrypt-environment-variable.tsx
│ ├─ form-lit-decrypt-environment-variable.tsx
├─ hooks/
│ ├─ **/*.ts
├─ utils/
│ ├─ **/*.ts
├─ client.ts
├─ README.md
The final integration may not resemble the proposed integration - that's O.K - a natural part of software development.
During development you might discover an original hypothesis doesn't make sense. No problem. Make a comment and clearly explain why a new approach is better than old one. Get rewarded for thinking out of the box.
The final bounty reward can be increased to match new bounty tasks.
As a Web3 experience architect I want to create streamlined and user experience optimized transaction flows.
More specifically I want to integrate the Delegatable framework and gas-less subscription services into my Web3 application.
To be eligible for the payout you must first get approval to work on the bounty.
general
channelbounty
channelIt's recommended to share a link to your personal Github account.
Integrate the delegatable
smart contract framework into a TurboETH template.
Integrate the DistrictERC20PermitSubscriptionsEnforcer enforcer smart contract.
Delegatable using rather complex EIP712 signatures to embed transaction execution conditionals directly into a transaction signature.
It's recommended to review the DistrictERC20PermitSubscriptionsEnforcer unit tests to see how implement the terms
bytecode packing.
Options
You can fork the Gifte Cards template and add the integration in the template.
This will require removing the existing functionality or adding the subscription functionality to the existing user interface.
Or...
Create an integration/streaming-delegatable
integration in the TurboETH integrations
branch and expose the funcionality in the integrations section.
Either way it's recommended to review the Giftee Cards application to see how delegatable is integrated. The EIP712 signatures can be tricky.
Required Functionality:
Developer Tasks:
delegatable-abi.json
and delegatable-bytecode.json
district-erc20-permit-subscriptions-enforcer-abi.json
and district-erc20-permit-subscriptions-enforcer-bytecode.json
wagmi.config.js
- Configure to use essential smart contract artifactsform-subscription-start.tsx
form-subscription-end.tsx
The core delegatable-subscription
integration should be added to the integrations/delegatable-subscription
folder.
integrations/delegatable-subscription
├─ components/
│ ├─ form-delegatable-subscription-start.tsx
│ ├─ form-delegatable-subscription-revoke.tsx
├─ hooks/
│ ├─ **/*.ts
├─ utils/
│ ├─ **/*.ts
├─ delegatable-wagmi.ts
├─ delegatable-enforcers-wagmi.ts
├─ wagmi.config.ts
├─ README.md
The subscription pages should be added to the app/delegatable
folder.
app/delegatable
├─ subscription
│ ├─ page.tsx
Delegatable is a complex smart contract solidity framework. It handles transaction formatting and execution differently, compared to a standard transaction or meta-transaction.
Below is an example of delegatable transaction object.
const INVOCATION_MESSAGE = {
replayProtection: {
nonce: '0x01',
queue: '0x00',
},
batch: [
{
authority: [],
transaction: {
to: verifyingContract.address,
gasLimit: '210000000000000000',
data: (
await verifyingContract.populateTransaction.approveSubscription(
wallet0.address,
totalSubscriptionAmount,
deadline,
v,
r,
s,
)
).data,
},
},
{
authority: [_delegation],
transaction: {
to: verifyingContract.address,
gasLimit: '210000000000000000',
data: (await verifyingContract.populateTransaction.paySubscription()).data,
},
},
],
};
The bounty reward is 325 OP tokens and TurboETH DevPass digital collectible.
TurboETH is the recipient of 18,271.88 OP Tokens from Optimism Retroactive Public Goods Funding. The OP tokens earned from the PGF program are the primary funding source for TurboETH bounties.
The final integration may not resemble the proposed integration - that's O.K - a natural part of software development.
During development you might discover an original hypothesis doesn't make sense. No problem. Make a comment and clearly explain why a new approach is better than old one. Get rewarded for thinking out of the box.
The final bounty reward can be increased to match new bounty tasks.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.