🏦 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

• bank.turboeth.xyz

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 git@github.com: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

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