💻 PoolTogether Client Monorepo

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

💾 Installation

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

pnpm install

🏎️ 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: App to explain the protocol and direct users to our other apps.

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

Repo Links: App | Landing Page

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.

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!

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

Update the constants.ts file in utilities with values and addresses for the new network.
Make sure the usePublicClients and usePublicClientsByChain hooks in hyperstructure-react-hooks include the new network.
Update the config.ts file and ENVs for any app you want to use this new network on.
Optionally add any token logo overrides in the constants.ts file in the react-components package.

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.

pooltogether / pooltogether-client-monorepo