GithubHelp home page GithubHelp logo

turbo-eth / template-bank-app Goto Github PK

View Code? Open in Web Editor NEW
5.0 2.0 3.0 30.29 MB

Web3 Savings Cards using PoolTogether, ERC721K and Solbase

Home Page: https://bank.turboeth.xyz

JavaScript 1.22% Solidity 31.01% TypeScript 66.77% Handlebars 0.28% Shell 0.02% CSS 0.71%
defi ethereum pooltogether web3

template-bank-app's Introduction

🏦 Bank - Web3 Savings Network Template

Banks is a template for the upcoming PoolTogether V5 hyperstructure.

The template will include support for depositing and withdrawing into prize pool vaults. Plus allow operators to easily deploy new savings assets/vaults and create custom rewards.

The Web3 Savings Cards prototype will also incorporated into the final application template.

Examples

Status

The template is being actively developed. Right now the focus is the application scaffolding and layout.

  • Scaffolding & Layout
  • Integrate Smart Contracts
  • Deploy Testnet Version
  • Deploy Product Version

Getting Started

SSH

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

HTTPS

git clone https://github.com/turbo-eth/template-bank-app.git

The pnpm CLI is the recommended package manager but npm and yarn should work too.

pnpm install

Development

pnpm dev
[label](README.md)```

#### Build
```bash
pnpm build

1-Click Deploy to Vercel

Deploy with Vercel

Configuration

Since Bank is a TurboRepo application we have to manually set the deployment configuration.

Build & Development Settings

  • Build Command - pnpm build
  • Output Directory - .next
  • Install Command - pnpm install

Root Directory

  • packages/web-app
  • β˜‘οΈ Include source files outside of the Root Directory in the Build Step

Environment Variables

The application requires a JSON-RPC provider. The public provider can be used for testing, but in production it's recommended to use Alchemy or Infura

# Public Provider(s) - Useful for testing
NEXT_PUBLIC_PROVIDER_PUBLIC=true

# Alchemy: https://www.alchemy.com
NEXT_PUBLIC_ALCHEMY_API_KEYs=

# Infura: https://www.infura.io
NEXT_PUBLIC_INFURA_API_KEY=

Click here for an image preview of the configration

Architecture

Bank is built using Turborepo - an incremental bundler and build system optimized for JavaScript and TypeScript

How It's Built

Bank, the TurboETH template, uses a modern Typescript development stack.

Web3 Core

  • Solbase - Modern, opinionated, and gas optimized base for smart contract development.
  • TurboETH - Web3 Application Template
  • WAGMI CLI - Automatic React Hook Generation
  • RainbowKit - Wallet connection manager

Web2 Frameworks

  • TurboRepo - Turborepo is an incremental bundler and build system
  • Vercel - App Infrastructure

Developer Experience

  • TypeScript – Static type checker for end-to-end typesafety
  • Prettier – Opinionated code formatter for consistent code style
  • ESLint – Pluggable linter for Next.js and TypeScript

User Interface

  • TailwindCSS – Utility-first CSS framework for rapid UI development
  • Radix – Primitives like modal, popover, etc. to build a stellar user experience
  • Framer Motion – Motion library for React to animate components with ease
  • Lucide – Beautifully simple, pixel-perfect icons

template-bank-app's People

Contributors

kamescg avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

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.

image

πŸ“œ Disclaimer

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

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.