feat: add beets app

.husky/pre-commit

@@ -0,0 +1 @@
+pnpm lint-staged

README.md

@@ -3,51 +3,36 @@
 _This project uses `pnpm`, if you haven't already installed it you can find the documentation here:
 https://pnpm.io/installation_
 
-_The monorepo uses [pnpm workspaces](https://pnpm.io/workspaces) along with Turborepo to manage build orchestration,
-to learn more about Turborepo please see the
+_The monorepo uses [pnpm workspaces](https://pnpm.io/workspaces) along with Turborepo to manage
+build orchestration, to learn more about Turborepo please see the
 [docs](https://turbo.build/repo/docs)._
 
 ## What's inside?
 
 This monorepo includes the following apps & packages:
 
 ### Apps
-- [apps/frontend-v3](https://github.com/balancer/frontend-monorepo/tree/main/apps/frontend-v3): The official web app for the Balancer protocol, hosted at [https://balancer.fi](https://balancer.fi).
 
+- [apps/frontend-v3](https://github.com/balancer/frontend-monorepo/tree/main/apps/frontend-v3): The
+  official web app for the Balancer protocol, hosted at [https://balancer.fi](https://balancer.fi).
+- [apps/beets-frontend-v3](https://github.com/balancer/frontend-monorepo/tree/main/apps/beets-frontend-v3):
+  The (still in development) web app for the Beets protocol.
 
 ### Packages
-- [packages/lib](https://github.com/balancer/frontend-monorepo/tree/main/packages/lib):
-  Shared logic for all frontend-v3 apps.
-- [packages/eslint-config](https://github.com/balancer/frontend-monorepo/tree/main/packages/eslint-config): eslint configurations.
-- [packages/typescript-config](https://github.com/balancer/frontend-monorepo/tree/main/packages/typescript-config): Typescript config's used throughout the monorepo.
 
+- [packages/lib](https://github.com/balancer/frontend-monorepo/tree/main/packages/lib): Shared logic
+  for all frontend-v3 apps.
+- [packages/eslint-config](https://github.com/balancer/frontend-monorepo/tree/main/packages/eslint-config):
+  eslint configurations.
+- [packages/typescript-config](https://github.com/balancer/frontend-monorepo/tree/main/packages/typescript-config):
+  Typescript config's used throughout the monorepo.
 
 ## Getting started
 
-To set up a local environment for development, first clone the repo and navigate
-to it in your console:
+Click on the links below to see the README for each app:
 
-```
-git clone https://github.com/balancer/frontend-monorepo.git && cd frontend-monorepo
-```
-
-Then create a local environment variable file for the `frontend-v3` app.
-```
-cp apps/frontend-v3/.env.template apps/frontend-v3/.env.local
-cp packages/lib/.env.template packages/lib/.env.local
-```
-
-Install modules
-```
-pnpm install
-```
-
-Then spin up the dev environment with:
-```
-pnpm dev
-```
-
-The `frontend-v3` app should be live at [http://localhost:3000](http://localhost:3000)
+- [frontend-v3](https://github.com/balancer/frontend-monorepo/tree/main/apps/frontend-v3/README.md)
+- [beets-frontend-v3](https://github.com/balancer/frontend-monorepo/tree/main/apps/beets-frontend-v3/README.md)
 
 ### Build
 
@@ -60,35 +45,45 @@ pnpm build
 ### Testing
 
 To test all apps and packages, run:
+
 ```
 pnpm test:unit
 // or
 pnpm test:integration
 ```
 
 ### Install a package
-If you want to install a new npm package in a sub application like `frontend-v3`
-add the --filter option to your install command, e.g.:
+
+If you want to install a new npm package in a sub application like `frontend-v3` add the --filter
+option to your install command, e.g.:
+
 ```
 pnpm add some-pkg --filter=frontend-v3
 ```
+
 This filter should match the `name` attribute in the app or package package.json.
 
 ## Turborepo
 
 ### Remote Caching
 
-Turborepo can use a technique known as [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching) to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.
+Turborepo can use a technique known as
+[Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching) to share cache
+artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.
 
-By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can [create one](https://vercel.com/signup), then enter the following commands:
+By default, Turborepo will cache locally. To enable Remote Caching you will need an account with
+Vercel. If you don't have an account you can [create one](https://vercel.com/signup), then enter the
+following commands:
 
 ```
 npx turbo login
 ```
 
-This will authenticate the Turborepo CLI with your [Vercel account](https://vercel.com/docs/concepts/personal-accounts/overview).
+This will authenticate the Turborepo CLI with your
+[Vercel account](https://vercel.com/docs/concepts/personal-accounts/overview).
 
-Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:
+Next, you can link your Turborepo to your Remote Cache by running the following command from the
+root of your Turborepo:
 
 ```
 npx turbo link

apps/beets-frontend-v3/.eslintrc.js

@@ -0,0 +1,9 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ['@repo/eslint-config/next.js'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: true,
+  },
+}

apps/beets-frontend-v3/.gitignore

@@ -0,0 +1,48 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.vscode
+.idea
+
+# Sentry Config File
+.sentryclirc
+
+# GrapgQL Codegen
+/lib/shared/services/api/generated/
+
+# Sentry Config File
+.env.sentry-build-plugin

apps/beets-frontend-v3/.prettierrc.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  singleQuote: true,
+  arrowParens: "avoid",
+  semi: false,
+  proseWrap: "always",
+  printWidth: 100,
+}

apps/beets-frontend-v3/README.md

@@ -0,0 +1,43 @@
+# Beets frontend V3
+
+## Getting Started
+
+_This project uses `pnpm`, if you haven't already installed it you can find the documentation here:
+https://pnpm.io/installation_
+
+To setup the development environment, first clone the repo:
+
+```bash
+git clone https://github.com/balancer/frontend-v3.git && cd beets-frontend-v3
+```
+
+Copy the `.env.example` file to `.env.local`:
+
+```bash
+cp .env.example .env.local
+```
+
+Next, install dependencies:
+
+```bash
+pnpm install
+```
+
+Then, run the development server:
+
+```bash
+pnpm dev:beets
+```
+
+Open [http://localhost:3001](http://localhost:3001) with your browser to see the result.
+
+## Testing
+
+See [TESTING.md](./test/TESTING.md).
+
+## Developing in Windows
+
+To develop in Windows you need to use WSL2. Learn more about it
+[here](https://learn.microsoft.com/en-us/windows/wsl/about).
+
+With WSL2 all environment variables will be correctly set without having to use `cross-env`.

apps/beets-frontend-v3/app/(app)/debug/alerts/page.tsx

@@ -0,0 +1,83 @@
+'use client'
+
+import { BalAlert } from '@repo/lib/shared/components/alerts/BalAlert'
+import { BalAlertButton } from '@repo/lib/shared/components/alerts/BalAlertButton'
+import { BalAlertContent } from '@repo/lib/shared/components/alerts/BalAlertContent'
+import { useGlobalAlerts } from '@repo/lib/shared/components/alerts/GlobalAlertsProvider'
+import { GenericError } from '@repo/lib/shared/components/errors/GenericError'
+import { Button, VStack } from '@chakra-ui/react'
+
+const exceptionName = 'Error fetching swap'
+const exceptionMessage = `Execution reverted for an unknown reason. Raw Call Arguments:
+to:0xE39B5e3B6D74016b2F6A9673D7d7493B6DF549d5
+Docs: https://viem.sh/docs/contract/simulateContract Details: execution reverted Version:
+viem@2.16.3`
+
+class TestError extends Error {
+  constructor(name: string, message: string) {
+    super(message)
+    this.name = name
+  }
+}
+
+export default function Page() {
+  const { addAlert } = useGlobalAlerts()
+  return (
+    <VStack width="full">
+      <BalAlert content={<TitleWithButton title="Info alert" />} status="info" />
+      <BalAlert content={<TitleWithButton title="Warning alert" />} status="warning" />
+      <BalAlert content={<TitleWithButton title="Error alert" />} status="error" />
+      <BalAlert content={<TitleWithButton title="Success alert" />} status="success" />
+      <BalAlert
+        content="Warning alert with close button (soft warning)"
+        status="warning"
+        isSoftWarning
+      />
+      <BalAlert
+        content="Error alert with learn more button link"
+        learnMoreLink="https://balancer.fi"
+        status="error"
+      />
+      <BalAlert
+        content={
+          <BalAlertContent
+            title="Info alert"
+            description="With description in the next line (forceColumnMode)"
+            forceColumnMode
+          ></BalAlertContent>
+        }
+        status="info"
+      />
+
+      <GenericError
+        error={new TestError(exceptionName, exceptionMessage)}
+        maxWidth="500"
+      ></GenericError>
+
+      <Button
+        onClick={() =>
+          addAlert({
+            id: 'debugAlert',
+            title: 'Global warning alert:',
+            description: 'with global description',
+            status: 'warning',
+          })
+        }
+      >
+        Show global warning alert
+      </Button>
+    </VStack>
+  )
+}
+
+function TitleWithButton({ title }: { title: string }) {
+  return (
+    <BalAlertContent
+      title={title}
+      description="Optional description"
+      tooltipLabel="Optional tooltip"
+    >
+      <BalAlertButton onClick={() => console.log('Clicked')}>Click me</BalAlertButton>
+    </BalAlertContent>
+  )
+}

apps/beets-frontend-v3/app/(app)/debug/layout.tsx

@@ -0,0 +1,10 @@
+import { DefaultPageContainer } from '@repo/lib/shared/components/containers/DefaultPageContainer'
+import { PropsWithChildren } from 'react'
+
+export default function DebugLayout({ children }: PropsWithChildren) {
+  return (
+    <DefaultPageContainer width="90%" maxW="90%">
+      {children}
+    </DefaultPageContainer>
+  )
+}