This monorepo includes many of PoolTogether's apps and packages in order to facilitate code sharing and maintainability.
Make sure you have pnpm installed, as it is the package manager used throughout this monorepo.
pnpm i
pnpm dev
Each app is already setup with its own port through its package.json dev script.
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
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@latesthyperstructure-react-hooks@latest
- Canary (Optimism):
- Beta (Optimism):
Repo Links: Hyperstructure Client JS | Hyperstructure React Hooks
config: Shared config for TypeScript, Tailwind, etc.generic-react-hooks: Shared React hooks.react-components: React component library utilizing some simpler components fromui, 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
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
This Turborepo has some additional tools already setup:
- Tailwind CSS for styles
- TypeScript for static type checking
- Prettier for code formatting
- Update the
constants.tsfile inutilitieswith values and addresses for the new network. - Make sure the
usePublicClientsandusePublicClientsByChainhooks inhyperstructure-react-hooksinclude the new network. - Update the
config.tsand.envfiles for any app you want to use this new network on. - Update the
config.tsandwrangler.envfiles for any worker you want to use this new network on. - Optionally add any token logo overrides in the
constants.tsfile in thereact-componentspackage.
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.
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.