💻   PoolTogether Client Monorepo

This monorepo includes many of PoolTogether's apps and packages in order to facilitate code sharing and maintainability.

💾   Installation

Make sure you have pnpm installed, as it is the package manager used throughout this monorepo.

pnpm i

🏎️   Quickstart

Development

pnpm dev

Each app is already setup with its own port through its package.json dev script.

---

Apps

• app: App w/ core PoolTogether Hyperstructure functionality.
• landing-page: Landing page for the many interfaces in this monorepo.
• vault-factory: App to create and manage 4626 vaults.
• vaultlist-creator: App to create, edit and distribute vault lists.
• analytics: App to visualize analytics and general health metrics of the PoolTogether protocol.
• swaps: Simple app to guide users to swap into PoolTogether vaults.
• rewards-builder: App to create and manage TWAB reward promotions for any prize vault.
• flash-liquidator: App to flash liquidate yield from any PoolTogether liquidation pair linked to a prize vault.
• migrations: App to facilitate migrations from old protocol versions.
• incentives: App to present the protocol's many onchain and offchain incentives for contributors.

All apps above are Next.js apps with Tailwind CSS support, written in TypeScript.

Repo Links: App | Landing Page | Vault Factory | VaultList Creator | Analytics | Swaps | Rewards Builder | Flash Liquidator | Migrations | Incentives

---

Packages

• hyperstructure-client-js: Protocol-specific functions to easily interact with onchain Hyperstructure data, using Viem.
• hyperstructure-react-hooks: Shared React hooks specific to Hyperstructure functionality, using WAGMI.

Prize pool and auxiliary contract addresses are included in the hyperstructure-client-js package. If you'd like to use older protocol deployments, refer to the versions below:

• Current:
  • hyperstructure-client-js@latest
  • hyperstructure-react-hooks@latest
• Canary (Optimism):
  • [email protected]
  • [email protected]
• Beta (Optimism):
  • [email protected]
  • [email protected]

Repo Links: Hyperstructure Client JS | Hyperstructure React Hooks

---

Shared Library

• config: Shared config for TypeScript, Tailwind, etc.
• generic-react-hooks: Shared React hooks.
• react-components: React component library utilizing some simpler components from ui, using WAGMI.
• types: Shared Typescript types.
• ui: Stub React component library with Tailwind used throughout many apps, using Flowbite.
• utilities: Shared Typescript utilities.

The dependencies for these libraries are picked up from the root package.json file of the monorepo!

Repo Links: Config | Generic React Hooks | React Components | Types | UI | Utilities

---

Workers

• protocol-stats-worker: Caching basic stats about the PoolTogether protocol.
• token-prices-worker: Caching token prices.
• wallet-stats-worker: Caching basic stats regarding wallet software usage (metamask, rainbow, etc.).

Repo Links: Protocol Stats | Token Prices | Wallet Stats

---

Utilities

This Turborepo has some additional tools already setup:

• Tailwind CSS for styles
• TypeScript for static type checking
• Prettier for code formatting

---

Adding New Network

1. Update shared/utilities/constants.ts with values and addresses for the new network.
2. Update shared/utilities/utils/networks.ts with values for the new network.
3. Update shared/react-components/constants.ts with values for the new network.
4. Update shared/react-components/components/Icons/NetworkIcon.tsx with a logo for the new network.
5. Update packages/hyperstructure-react-hooks/src/blockchain/useClients.ts with the new network.
6. Update the config.ts, wrangler.toml and wrangler.example.toml files for any worker you want to use this new network on.
7. Update the config.ts, .env and .env.example files for any app you want to use this new network on.

---

Wallet Support

Want your wallet in any of our apps? We rely on RainbowKit and WAGMI for wallet connection. If you have a suitable wallet connector we can add your wallet and give you a custom link to highlight your wallet for your users.

Append ?wallet=<wallet key> to any app's links to highlight your wallet. Keys are visible on each app's config.ts file. Example: App Config.

---

Known Issues / Fixes

When adding/updating apps and/or packages, duplicate dependencies may be created, creating versioning issues. This can be resolved through running pnpm up -r as described here, or just looking through pnpm-lock.yaml to identify version discrepancies.

The biggest culprit of the above is @tanstack/react-query, which sometimes is installed as two different versions and apps can no longer utilize hooks from the hooks package. This has been solved through the method described here.

If editing component themes in ui, having the Tailwind CSS IntelliSense plugin for VSCode is recommended. In order to enable it for custom Flowbite themes and string class names, add theme and .*ClassName* to the Class Attributes setting.

Currently, lottie-react has some SSR issues in Node v22 as seen here. Downgrading your node version to v18 resolves this issue.