[BEETS] feat: loops

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

@@ -0,0 +1,6 @@
+import { DefaultPageContainer } from '@repo/lib/shared/components/containers/DefaultPageContainer'
+import { PropsWithChildren } from 'react'
+
+export default function LoopsLayout({ children }: PropsWithChildren) {
+  return <DefaultPageContainer minH="100vh">{children}</DefaultPageContainer>
+}

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

@@ -0,0 +1,10 @@
+import { Loops } from '@/lib/modules/loops/Loops'
+import LoopsProvidersLayout from '@/lib/modules/loops/LoopsProvidersLayout'
+
+export default function LoopsPage() {
+  return (
+    <LoopsProvidersLayout>
+      <Loops />
+    </LoopsProvidersLayout>
+  )
+}

apps/beets-frontend-v3/app/api/fly/quote/route.ts

@@ -0,0 +1,59 @@
+import { createFlyGetHandler } from '../shared'
+
+const FLY_API_URL = 'https://api.magpiefi.xyz/aggregator/quote'
+
+export type FlyQuoteApiRequest = {
+  fromTokenAddress: string
+  toTokenAddress: string
+  sellAmount: string
+  slippage: string
+  fromAddress: string
+  toAddress: string
+  gasless: string
+  network: string
+}
+
+export type FlyQuoteApiResponse = {
+  id: string
+  amountOut: string
+  targetAddress: string
+  fees: Array<{
+    type: string
+    value: string
+  }>
+  resourceEstimate: {
+    gasLimit: string
+  }
+  typedData: {
+    types: {
+      Swap: Array<{
+        name: string
+        type: string
+      }>
+    }
+    domain: {
+      name: string
+      version: string
+      chainId: string
+      verifyingContract: string
+    }
+    message: {
+      router: string
+      sender: string
+      recipient: string
+      fromAsset: string
+      toAsset: string
+      deadline: string
+      amountOutMin: string
+      swapFee: string
+      amountIn: string
+    }
+  }
+}
+
+export const GET = createFlyGetHandler<FlyQuoteApiResponse>({
+  endpoint: FLY_API_URL,
+  invalidResponseMessage: 'Invalid quote response',
+  failureResponseMessage: 'Failed to fetch quote',
+  logContext: 'Unable to fetch quote from Magpie API',
+})

apps/beets-frontend-v3/app/api/fly/shared.ts

@@ -0,0 +1,86 @@
+import { type NextRequest, NextResponse } from 'next/server'
+import { isProd } from '@repo/lib/config/app.config'
+import { mins } from '@repo/lib/shared/utils/time'
+import { isAllowedReferer } from '../shared/referer'
+
+type FlyApiErrorResponse = {
+  error: string
+  message?: string
+  details?: unknown
+  code?: number
+}
+
+type CreateFlyGetHandlerOptions = {
+  endpoint: string
+  invalidResponseMessage: string
+  failureResponseMessage: string
+  logContext: string
+}
+
+function hasError(response: unknown): response is { error?: unknown } {
+  return typeof response === 'object' && response !== null && 'error' in response
+}
+
+export function createFlyGetHandler<T>({
+  endpoint,
+  invalidResponseMessage,
+  failureResponseMessage,
+  logContext,
+}: CreateFlyGetHandlerOptions) {
+  return async function handle(
+    request: NextRequest
+  ): Promise<NextResponse<T | FlyApiErrorResponse>> {
+    try {
+      if (!isAllowedReferer(request.headers.get('referer'))) {
+        return NextResponse.json(
+          {
+            error: 'Forbidden: Access denied',
+            code: -32000,
+            message: 'Access denied',
+          },
+          { status: 403 }
+        )
+      }
+
+      const apiKey = process.env.NEXT_PRIVATE_MAGPIE_API_KEY
+
+      if (!isProd && !apiKey) {
+        return NextResponse.json(
+          { error: 'NEXT_PRIVATE_MAGPIE_API_KEY is not configured' },
+          { status: 500 }
+        )
+      }
+
+      const searchParams = request.nextUrl.searchParams
+
+      const res = await fetch(`${endpoint}?${searchParams.toString()}`, {
+        headers: apiKey ? { apikey: apiKey } : undefined,
+        next: { revalidate: mins(1).toSecs() },
+      })
+
+      if (!res.ok) {
+        throw new Error(`Magpie API returned ${res.status}: ${res.statusText}`)
+      }
+
+      const result = (await res.json()) as T | { error?: unknown }
+
+      if (hasError(result) && result.error) {
+        return NextResponse.json(
+          { error: invalidResponseMessage, details: result },
+          { status: 400 }
+        )
+      }
+
+      return NextResponse.json(result as T)
+    } catch (error) {
+      console.error(`${logContext}:`, error)
+      return NextResponse.json(
+        {
+          error: failureResponseMessage,
+          message: error instanceof Error ? error.message : 'Unknown error',
+        },
+        { status: 500 }
+      )
+    }
+  }
+}

apps/beets-frontend-v3/app/api/fly/transaction/route.ts

@@ -0,0 +1,28 @@
+import { Address } from 'viem'
+import { createFlyGetHandler } from '../shared'
+
+const FLY_API_URL = 'https://api.magpiefi.xyz/aggregator/transaction'
+
+export type FlyTransactionApiRequest = {
+  quoteId: string | undefined
+  estimateGas: string
+}
+
+export type FlyTransactionApiResponse = {
+  from: Address
+  to: Address
+  data: `0x${string}`
+  chainId: number
+  type: number
+  gasLimit: string
+  maxFeePerGas: string
+  maxPriorityFeePerGas: string
+  value: string
+}
+
+export const GET = createFlyGetHandler<FlyTransactionApiResponse>({
+  endpoint: FLY_API_URL,
+  invalidResponseMessage: 'Invalid transaction response',
+  failureResponseMessage: 'Failed to fetch transaction',
+  logContext: 'Unable to fetch transaction from Magpie API',
+})

apps/beets-frontend-v3/app/api/rpc/[chain]/route.ts

@@ -1,6 +1,7 @@
 import { GqlChain } from '@repo/lib/shared/services/api/generated/graphql'
 import { drpcUrl } from '@repo/lib/shared/utils/rpc'
 import type { NextRequest } from 'next/server'
+import { isAllowedReferer } from '../../shared/referer'
 
 type Params = {
   params: Promise<{
@@ -10,16 +11,11 @@ type Params = {
 
 const DRPC_KEY = process.env.NEXT_PRIVATE_DRPC_KEY || ''
 
-const ALLOWED_ORIGINS = [
-  ...(process.env.NEXT_PRIVATE_ALLOWED_ORIGINS || '').split(','),
-  process.env.VERCEL_BRANCH_URL ? `https://${process.env.VERCEL_BRANCH_URL}` : '',
-].filter(Boolean)
-
 export async function POST(request: NextRequest, props: Params) {
   const params = await props.params
   const { chain } = params
   const referer = request.headers.get('referer')
-  const isAllowedOrigin = referer && ALLOWED_ORIGINS.some(origin => referer.startsWith(origin))
+  const isAllowedOrigin = isAllowedReferer(referer)
 
   if (!isAllowedOrigin) {
     return new Response(

apps/beets-frontend-v3/app/api/shared/referer.ts

@@ -0,0 +1,10 @@
+const allowedOrigins = [
+  ...(process.env.NEXT_PRIVATE_ALLOWED_ORIGINS || '').split(','),
+  process.env.VERCEL_BRANCH_URL ? `https://${process.env.VERCEL_BRANCH_URL}` : '',
+].filter(Boolean)
+
+export function isAllowedReferer(referer: string | null): boolean {
+  return !!(referer && allowedOrigins.some(origin => referer.startsWith(origin)))
+}
+
+export { allowedOrigins as ALLOWED_ORIGINS }

apps/beets-frontend-v3/lib/components/navs/NavBarContainer.tsx

@@ -7,14 +7,21 @@ import { useNav } from '@repo/lib/shared/components/navs/useNav'
 import { BeetsLogoType } from '../imgs/BeetsLogoType'
 import { AnimatePresence, motion } from 'framer-motion'
 import { PROJECT_CONFIG } from '@repo/lib/config/getProjectConfig'
+import { isDev, isStaging } from '@repo/lib/config/app.config'
 
 export function NavBarContainer() {
   const {
     links: { appLinks, ecosystemLinks, socialLinks },
     options: { allowCreateWallet },
   } = PROJECT_CONFIG
   const { defaultAppLinks } = useNav()
-  const allAppLinks = [...defaultAppLinks, ...appLinks]
+
+  const allAppLinks = [
+    ...defaultAppLinks,
+    ...appLinks,
+    // TODO: remove here when loops goes live
+    ...(isDev || isStaging ? [{ href: '/loops', label: 'Loop $S' }] : []),
+  ]
 
   const mobileNav = (
     <MobileNav

apps/beets-frontend-v3/lib/modules/lst/components/LstTokenRow.tsx → apps/beets-frontend-v3/lib/components/shared/BeetsTokenRow.tsx

@@ -3,7 +3,7 @@ import TokenRow from '@repo/lib/modules/tokens/TokenRow/TokenRow'
 import { GqlChain } from '@repo/lib/shared/services/api/generated/graphql'
 import { Address } from 'viem'
 
-export function LstTokenRow({
+export function BeetsTokenRow({
   label,
   chain,
   tokenAmount,

apps/beets-frontend-v3/lib/components/shared/StatRow.tsx

@@ -0,0 +1,50 @@
+import { Box, Text, HStack, Skeleton } from '@chakra-ui/react'
+
+export function StatRow({
+  label,
+  value,
+  secondaryValue,
+  tertiaryValue,
+  isLoading,
+}: {
+  label: string
+  value: string
+  secondaryValue?: string
+  tertiaryValue?: string
+  isLoading?: boolean
+}) {
+  return (
+    <HStack align="flex-start" justify="space-between" w="full">
+      <Text color="font.secondary">{label}</Text>
+      <Box alignItems="flex-end" display="flex" flexDirection="column">
+        {isLoading ? (
+          <Skeleton h="16px" my="2px" w="80px" />
+        ) : (
+          <Text fontWeight="bold">{value}</Text>
+        )}
+        {secondaryValue && (
+          <>
+            {isLoading ? (
+              <Skeleton h="16px" my="2px" w="80px" />
+            ) : (
+              <Text color="grayText" fontSize="sm">
+                {secondaryValue}
+              </Text>
+            )}
+          </>
+        )}
+        {tertiaryValue && (
+          <>
+            {isLoading ? (
+              <Skeleton h="16px" my="2px" w="80px" />
+            ) : (
+              <Text color="grayText" fontSize="sm">
+                {tertiaryValue}
+              </Text>
+            )}
+          </>
+        )}
+      </Box>
+    </HStack>
+  )
+}

apps/beets-frontend-v3/lib/components/shared/YouWillReceive.tsx

@@ -0,0 +1,63 @@
+import { Box, Flex, Text, Popover, PopoverContent, PopoverTrigger, HStack } from '@chakra-ui/react'
+import { TokenIcon } from '@repo/lib/modules/tokens/TokenIcon'
+import FadeInOnView from '@repo/lib/shared/components/containers/FadeInOnView'
+import { GqlChain } from '@repo/lib/shared/services/api/generated/graphql'
+import { fNumCustom } from '@repo/lib/shared/utils/numbers'
+import { InfoIcon } from '@repo/lib/shared/components/icons/InfoIcon'
+
+type Props = {
+  label: string
+  amount: string
+  address: string
+  symbol: string
+  chain: GqlChain
+  infoText?: string
+}
+
+export function YouWillReceive({ label, amount, address, symbol, chain, infoText }: Props) {
+  const amountFormatted = fNumCustom(amount, '0,0.[000000]')
+
+  return (
+    <Box w="full">
+      <FadeInOnView>
+        <Flex alignItems="flex-end" w="full">
+          <Box flex="1">
+            {infoText ? (
+              <HStack alignItems="center" mb="sm">
+                <Text color="grayText" mb="0">
+                  {label}
+                </Text>
+                <Popover placement="right" trigger="hover">
+                  <PopoverTrigger>
+                    <Box
+                      _hover={{ opacity: 1 }}
+                      opacity="0.5"
+                      transition="opacity 0.2s var(--ease-out-cubic)"
+                    >
+                      <InfoIcon />
+                    </Box>
+                  </PopoverTrigger>
+                  <PopoverContent p="sm">
+                    <Text fontSize="sm" variant="secondary">
+                      {infoText}
+                    </Text>
+                  </PopoverContent>
+                </Popover>
+              </HStack>
+            ) : (
+              <Text color="grayText" mb="sm">
+                {label}
+              </Text>
+            )}
+            <Text fontSize="3xl">
+              {amountFormatted === 'NaN' ? amount : amountFormatted} {symbol}
+            </Text>
+          </Box>
+          <Box>
+            <TokenIcon address={address} alt={symbol} chain={chain} size={40} />
+          </Box>
+        </Flex>
+      </FadeInOnView>
+    </Box>
+  )
+}