turbo-eth / template-bank-app

Web3 Savings Cards using PoolTogether, ERC721K and Solbase

⚡ TurboETH

Turbo ETH is an Ethereum dApp Build System; designed to make building Web3 applications fast.

Installation & Usage

git clone [email protected]:turbo-eth/turbo-eth.git

Installation

pnpm is the recommended package manager.

pnpm install

Local Development

pnpm lab

Local Development w/ Blockchain Fork

pnpm lab:fork

Build

pnpm build

Tests

pnpm test

Modules

The monorepo includes 3 primary folders.

• apps
• contracts
• packages

Each folder contains similar modules i.e. frontend applications go in the apps folder and the smart contracts go in the contracts folder; very straight-forward.

Environment Variables

Each module requires unique environment variables. Specifically the apps and contracts modules when preparing for deployment or forking a blockchain network.

The .env.example can be copied/pasted and updated to include the required variables deployment.

Task Pipelines

Builds, tests and deployments are handled via tasks pipelines. Task pipelines orchestrate build and dependency requirements between mono-repo packages.

Edit the turbo.json file in the root directory to add new pipelines and custom workflows.

Developer Experience

The TurboETH build system uses Turborepo and pNPM; a high-performance build system and a fast, disk space efficient package manager. Giving developers the best experience possible while minimizing demand on local compute resources.

Core Technologies

• Turborepo
• pNPM
• TSDX
• RainbowKit
• Tailwind
• Next

---

Copyright 2022 Kames Geraghty

template-bank-app's Issues

Bounty: Update Application Design, Pages and Components - 400 OP Tokens

👨‍💻 User Story

As a smart contract developer focused on building Open Finance protocols I want an application template to easily create new Web3 Savings assets using the PoolTogether protocol.

More specifically I want a template integrating the upcoming PoolTogether V5 hyperstructure and Web3 Savings Cards. So anyone can create a simple user onboarding flow tailored to a specific asset and user market.

📜 Disclaimer

To be eligible for the payout you must first get approval to work on the bounty.

• Join the ⚡️TurboETH Discord channel
• Introduce yourself in the general channel
• Announce your interest in the bounty channel

It's recommended to share a link to your personal Github account.

🧱 Project

Update the Banks template to match the latest mockups and design concepts.

https://www.figma.com/file/sG6vqKMrwbHaY0E9IX0uGa/Banks?type=design&node-id=0%3A1&t=Vf6bfIUx6ciISv1p-1

Required Functionality:

1. Custom TailwindCSS Color Palette
2. Deployed on Vercel

Developer Tasks:

General

• Create new app using latest TurboETH template.

Components

• Create Component - components/form-ptv5-vault-deposit.tsx
• Create Component - components/form-ptv5-vault-withdraw.tsx
• Create Component - components/form-ptv5-create-prize-pool.tsx
• Create Component - components/form-ptv5-create-savings-card.tsx
• Create Component - components/form-reward-erc20-stream.tsx
• Create Component - components/form-reward-erc721-chance-delegation.tsx
• Create Component - components/card-token-preview.tsx
• Create Component - components/modal-deposit.tsx
• Create Component - components/modal-withdraw.tsx
• Create Component - components/modal-prize-pool-advanced-settings.tsx

form-ptv5-vault-deposit.tsx
https://www.figma.com/file/sG6vqKMrwbHaY0E9IX0uGa/Banks?type=design&node-id=52%3A660&t=Vf6bfIUx6ciISv1p-1

form-ptv5-vault-withdraw.tsx
The withdraw form is exactly the same design/layout as the deposit form.

form-ptv5-create-prize-pool.tsx
https://www.figma.com/file/sG6vqKMrwbHaY0E9IX0uGa/Banks?type=design&node-id=13%3A213&t=Vf6bfIUx6ciISv1p-1

form-ptv5-create-savings-cards.tsx
https://www.figma.com/file/sG6vqKMrwbHaY0E9IX0uGa/Banks?type=design&node-id=18%3A1060&t=Vf6bfIUx6ciISv1p-1

form-reward-erc20-stream.tsx
https://www.figma.com/file/sG6vqKMrwbHaY0E9IX0uGa/Banks?type=design&node-id=51%3A493&t=Vf6bfIUx6ciISv1p-1

form-reward-erc721-chance-delegation.tsx
https://www.figma.com/file/sG6vqKMrwbHaY0E9IX0uGa/Banks?type=design&node-id=51%3A336&t=Vf6bfIUx6ciISv1p-1

modal-prize-pool-advanced-settings.tsx
https://www.figma.com/file/sG6vqKMrwbHaY0E9IX0uGa/Banks?type=design&node-id=18%3A592&t=Vf6bfIUx6ciISv1p-1

card-token-preview.tsx
The component is in the form-ptv5-create-prize-pool.tsx mockup.

Application

• Create root Layout - app/layout.tsx
• Create root Page - app/page.tsx
• Create create-rewards Page - app/create-rewards/page.tsx
• Create create-prize-pool Page - app/create-prize-pool/page.tsx
• Create create-savings-card Page - app/create-savings-card/page.tsx

File Structure

The Banks template app file structure should be minimal. Including only a few routes.

Application

app/
├─ layout.tsx
├─ page.tsx
├─ opengraph-image.tsx
├─ create-prize-pool
│  ├─ page.tsx
├─ create-savings-card
│  ├─ page.tsx
├─ create-rewards
│  ├─ page.tsx

💰 Bounty Reward

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. OP tokens earned from RPGF are helping fund TurboETH bounties.

Notice

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.

Resources

• ⚡️ TurboETH
  • Overview - http://docs.turboeth.xyz