This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
yarn devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
We use Tanstack's React Query for data fetching. Fetcher functions are defined in /queries and are used in components via custom hooks defined in /hooks/queries. See the example implementations in there.
We use Styled Components for styling. Global styles are defined in components/GlobalStyles.tsx. All constant values like colors, sizes etc. should be defined in TypeScript in /constants and then imported and interpolated into GlobalStyles as CSS custom properties. This gives us the flexibility and convenience of globally-available custom properties, while also giving us access to the values in TypeScript for when they are needed in components.
We use Storybook for component development. To run it, use yarn storybook. It will be available at http://localhost:6006.
Storybook is deployed to Chromatic via yarn chromatic.
- CHAIN_ID = 1 // (or 5 for goerli)
- NODE_URLS ={"1":"https://mainnet.infura.io/v3/xxx","5":"https://goerli.infura.io/v3/xxx"}
- NEXT_PUBLIC_MAILCHIMP_URL="https://umaproject.us19.list-manage.com/subscribe/post?u={user}&id={id}&f_id={f_id}"
- NEXT_PUBLIC_OVAL_MAILCHIMP_URL="https://umaproject.us19.list-manage.com/subscribe/post?u={user}&id={id}&f_id={f_id}"
- NEXT_PUBLIC_DEFAULT_APY=30.5
- NEXT_PUBLIC_TVS=83M= // Osnap TVS shown, use formatted string
- NEXT_PUBLIC_OEV_LOST= // backup oev value if dune is not working, use raw number
- DUNE_API_KEY= // for getting total OEV lost
- AIRTABLE_API_KEY= // for capturing osnap, oval leads