feat: add beets app

.husky/pre-commit

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

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/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) Balancer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

apps/beets-frontend-v3/README.md

@@ -0,0 +1,43 @@
+# Balancer 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 frontend-v3
+```
+
+Copy and rename 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
+```
+
+Open [http://localhost:3000](http://localhost:3000) 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>
+  )
+}

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

@@ -0,0 +1,104 @@
+'use client'
+
+import { SuccessOverlay } from '@repo/lib/shared/components/modals/SuccessOverlay'
+import { TransactionModalHeader } from '@repo/lib/shared/components/modals/TransactionModalHeader'
+import { GqlChain } from '@repo/lib/shared/services/api/generated/graphql'
+import { useDisclosure } from '@chakra-ui/hooks'
+import {
+  Button,
+  Modal,
+  ModalContent,
+  ModalCloseButton,
+  ModalBody,
+  ModalFooter,
+  Box,
+} from '@chakra-ui/react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { useState } from 'react'
+import useMeasure from 'react-use-measure'
+import { Hex } from 'viem'
+
+export default function ModalPage() {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const [txHash, setTxHash] = useState<Hex | undefined>(undefined)
+  const [ref, { height }] = useMeasure()
+
+  function toggleSuccess() {
+    setTxHash(txHash ? undefined : '0x123')
+  }
+
+  return (
+    <>
+      <Button onClick={onOpen}>Open Modal</Button>
+
+      <Modal isOpen={isOpen} onClose={onClose} isCentered>
+        <SuccessOverlay startAnimation={!!txHash} />
+        <ModalContent>
+          <TransactionModalHeader label="Add liquidity" txHash={txHash} chain={GqlChain.Mainnet} />
+          <ModalCloseButton />
+          <motion.div animate={{ height: height || 'auto ' }}>
+            <AnimatePresence initial={false}>
+              <ModalBody ref={ref}>
+                <AnimatePresence mode="wait" initial={false}>
+                  {txHash ? (
+                    <motion.div
+                      key="receipt"
+                      initial={{ opacity: 0, scale: 0.95 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      exit={{ opacity: 0, scale: 0.95 }}
+                      transition={{ duration: 0.3 }}
+                    >
+                      <Box h="100px" w="full" bg="red" />
+                    </motion.div>
+                  ) : (
+                    <motion.div
+                      key="preview"
+                      initial={{ opacity: 0, scale: 0.95 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      exit={{ opacity: 0, scale: 0.95 }}
+                      transition={{ duration: 0.3 }}
+                    >
+                      <Box h="200px" w="full" bg="blue" />
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </ModalBody>
+            </AnimatePresence>
+          </motion.div>
+
+          <ModalFooter>
+            <AnimatePresence mode="wait" initial={false}>
+              {txHash ? (
+                <motion.div
+                  key="footer"
+                  initial={{ opacity: 0, scale: 0.95 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.95 }}
+                  transition={{ duration: 0.3 }}
+                  style={{ width: '100%' }}
+                >
+                  <Button onClick={toggleSuccess} w="full" size="lg">
+                    Toggle
+                  </Button>
+                </motion.div>
+              ) : (
+                <motion.div
+                  key="action"
+                  initial={{ opacity: 0, scale: 0.95 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.95 }}
+                  transition={{ duration: 0.3 }}
+                  style={{ width: '100%' }}
+                >
+                  <Button onClick={toggleSuccess} w="full" size="lg">
+                    Toggle
+                  </Button>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  )
+}

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

@@ -0,0 +1,48 @@
+'use client'
+import { Heading, VStack } from '@chakra-ui/react'
+import NextLink from 'next/link'
+import { Link } from '@chakra-ui/react'
+import FadeInOnView from '@repo/lib/shared/components/containers/FadeInOnView'
+
+export default function Debug() {
+  return (
+    <FadeInOnView>
+      <VStack padding="lg" margin="lg">
+        <Heading size="md">Demos</Heading>
+        <Link as={NextLink} href="/debug/pools">
+          Pools
+        </Link>
+        <Link as={NextLink} href="/debug/token-select">
+          Token select
+        </Link>
+        <Link as={NextLink} href="/debug/token-input">
+          Token input
+        </Link>
+        <Link as={NextLink} href="/debug/sentry">
+          Sentry
+        </Link>
+        <Link as={NextLink} href="/debug/wallet-check">
+          Wallet check
+        </Link>
+        <Link as={NextLink} href="/debug/alerts">
+          Alerts
+        </Link>
+        <Link as={NextLink} href="/debug/modal">
+          Modal animation
+        </Link>
+        <Link as={NextLink} href="/debug/remove-allowance">
+          Remove token allowance
+        </Link>
+        <Link as={NextLink} href="/debug/revoke-relayer-approval">
+          Revoke relayer approval
+        </Link>
+        <Link as={NextLink} href="/debug/permit2-allowance">
+          Permit2 allowance
+        </Link>
+        <Link as={NextLink} href="/debug/permit2-allowance">
+          Permit2 allowance
+        </Link>
+      </VStack>
+    </FadeInOnView>
+  )
+}