Skip to main content

Hackathon Starter Pack

A production-ready React boilerplate for building Octant v2 dApps. Get started in minutes with modern tooling and essential libraries pre-configured.

What's Included​

Core Stack

  • React 19 with Vite
  • TypeScript
  • Tailwind CSS v4
  • React Router v7

State & Forms

  • Zustand for state management
  • React Hook Form with Zod validation

UI Components

  • 17 pre-configured ShadCN UI components
  • Lucide React icons
  • Sonner toast notifications
  • Custom Octant dark theme

Smart Contracts

  • Pre-configured ABIs for Octant v2 integration
  • MorphoCompounderStrategyFactory.json
  • SkyCompounderStrategyFactory.json
  • YieldDonatingTokenizedStrategy.json

Quick Start​

  1. Clone the repository:
git clone https://github.com/golemfoundation/octant-v2-hackathon-dapp-boilerplate.git
cd octant-v2-hackathon-dapp-boilerplate
  1. Install dependencies:
yarn install
  1. Start development server:
yarn dev

Open http://localhost:5173 to see your app.

Project Structure​

src/
├── abis/                # Smart contract ABIs
│   ├── MorphoCompounderStrategyFactory.json
│   ├── SkyCompounderStrategyFactory.json
│   └── YieldDonatingTokenizedStrategy.json
├── components/
│   └── ui/              # ShadCN UI components
├── pages/               # Your app pages/routes
├── lib/
│   └── utils.ts         # Utility functions
├── store.ts             # Zustand global state
└── App.tsx              # Routes and app shell

Development Guide​

Adding New Pages​

Create a new file in src/pages/ (e.g., Dashboard.tsx), then add the route in src/App.tsx:

<Route path="dashboard" element={<Dashboard />} />

Using Smart Contract ABIs​

import MorphoABI from '@/abis/MorphoCompounderStrategyFactory.json';
import { useReadContract } from 'wagmi';

function MyComponent() {
  const { data } = useReadContract({
    address: '0x...', // Contract address
    abi: MorphoABI,
    functionName: 'createStrategy',
    args: [/* your args */]
  });

  return <div>{/* Your component */}</div>;
}

Using Zustand State​

import { useCounterStore } from '@/store';

function MyComponent() {
  const { count, increment } = useCounterStore();
  return <button onClick={increment}>{count}</button>;
}

Using ShadCN Components​

import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';

<Card>
  <Button>Click me</Button>
</Card>

Styling with Tailwind​

<div className="flex items-center gap-4 rounded-lg border p-6">
  <h1 className="text-2xl font-bold">Hello</h1>
</div>

Available Components​

The boilerplate includes 17 ShadCN UI components, all styled for Octant's dark theme:

Avatar, Badge, Button, Card, Checkbox, Dialog, Dropdown Menu, Form, Input, Label, Select, Separator, Skeleton, Switch, Tabs, Tooltip, Toaster

All components are visible on the homepage with interactive demos.

Available Scripts​

yarn dev      # Start development server
yarn build    # Build for production
yarn preview  # Preview production build
yarn lint     # Run ESLint

Build for Production​

yarn build

Output will be in the dist/ directory, ready to deploy to any static hosting service.

Customization​

Add More ShadCN Components​

npx shadcn@latest add [component-name]

Visit ui.shadcn.com for the full component list.

Modify Tailwind Config​

Edit tailwind.config.js for custom colors, fonts, etc.

Configure Build​

Edit vite.config.ts for build optimizations.

Next Steps​

Ready to integrate with Octant v2 protocols? Check out our integration guides for detailed examples on working with Yield Donating Strategies and Multi-Strategy Vaults.