This monorepo includes many of PoolTogether's apps and packages in order to facilitate code sharing and maintainabiliy.
Make sure you have pnpm installed, as it is the package manager used throughout this monorepo.
pnpm install
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: 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
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
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
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.tsfile and ENVs for any app 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.