feat: lifi integration

apps/web/src/app/(networks)/(evm)/[chainId]/(trade)/cross-chain-swap/layout.tsx

@@ -1,10 +1,7 @@
 import { Metadata } from 'next'
 import { notFound } from 'next/navigation'
+import { XSWAP_SUPPORTED_CHAIN_IDS, isXSwapSupportedChainId } from 'src/config'
 import { ChainId } from 'sushi/chain'
-import {
-  SUSHIXSWAP_2_SUPPORTED_CHAIN_IDS,
-  isSushiXSwap2ChainId,
-} from 'sushi/config'
 import { SidebarContainer } from '~evm/_common/ui/sidebar'
 import { Providers } from './providers'
 
@@ -24,18 +21,20 @@ export default async function CrossChainSwapLayout(props: {
 
   const chainId = +params.chainId as ChainId
 
-  if (!isSushiXSwap2ChainId(chainId)) {
+  if (!isXSwapSupportedChainId(chainId)) {
     return notFound()
   }
 
   return (
     <Providers chainId={chainId}>
       <SidebarContainer
         selectedNetwork={chainId}
-        supportedNetworks={SUSHIXSWAP_2_SUPPORTED_CHAIN_IDS}
+        supportedNetworks={XSWAP_SUPPORTED_CHAIN_IDS}
         unsupportedNetworkHref="/ethereum/cross-chain-swap"
       >
-        <main className="lg:p-4 mt-16 mb-[86px]">{children}</main>
+        <main className="lg:p-4 mt-16 mb-[86px] h-[clamp(600px,_calc(100vh_-_280px),_800px)]">
+          {children}
+        </main>
       </SidebarContainer>
     </Providers>
   )

apps/web/src/app/(networks)/(evm)/[chainId]/(trade)/cross-chain-swap/loading.tsx

@@ -7,20 +7,20 @@ export default function CrossChainSwapLoading() {
       <div className="flex flex-col gap-4">
         <div />
         <div className="flex flex-col gap-2 mb-4 sm:mt-10 mt-2">
-          <SkeletonBox className="w-[140px] h-[53px]" />
-          <SkeletonBox className="h-[20px] w-[280px]" />
+          <SkeletonBox className="w-[140px] h-[36px] lg:h-[53px] rounded-xl" />
+          <SkeletonBox className="h-[20px] w-[280px] rounded-xl" />
         </div>
         <div className="flex gap-2">
-          <SkeletonBox className="h-[36px] w-[61px]" />
-          <SkeletonBox className="h-[36px] w-[56px]" />
-          <SkeletonBox className="h-[36px] w-[54px]" />
-          <SkeletonBox className="h-[36px] w-[136px]" />
+          <SkeletonBox className="h-[36px] w-[61px] rounded-xl" />
+          <SkeletonBox className="h-[36px] w-[56px] rounded-xl" />
+          <SkeletonBox className="h-[36px] w-[54px] rounded-xl" />
+          <SkeletonBox className="h-[36px] w-[136px] rounded-xl" />
         </div>
-        <div className="flex flex-col gap-2.5">
-          <SkeletonBox className="w-full h-[169px]" />
-          <SkeletonBox className="w-full h-[169px]" />
+        <div className="flex flex-col gap-[10px]">
+          <SkeletonBox className="w-full h-[142px] rounded-xl" />
+          <SkeletonBox className="w-full h-[142px] rounded-xl" />
         </div>
-        <SkeletonBox className="w-full h-[52px]" />
+        <SkeletonBox className="w-full h-[52px] rounded-xl" />
       </div>
     </Container>
   )

apps/web/src/app/(networks)/(evm)/[chainId]/(trade)/cross-chain-swap/page.tsx

@@ -1,10 +1,32 @@
-import { Container } from '@sushiswap/ui'
+'use client'
+
+import { Container, classNames } from '@sushiswap/ui'
+import { useSidebar } from 'src/ui/sidebar'
+import { CrossChainSwapRouteSelector } from 'src/ui/swap/cross-chain/cross-chain-swap-route-selector'
 import { CrossChainSwapWidget } from 'src/ui/swap/cross-chain/cross-chain-swap-widget'
+import { useCrossChainTradeRoutes } from 'src/ui/swap/cross-chain/derivedstate-cross-chain-swap-provider'
+
+export default function CrossChainSwapPage() {
+  const { isLoading, isFetched } = useCrossChainTradeRoutes()
+  const { isOpen: isSidebarOpen } = useSidebar()
+
+  const showRouteSelector = isLoading || isFetched
 
-export default async function CrossChainSwapPage() {
   return (
-    <Container maxWidth="lg" className="px-4">
-      <CrossChainSwapWidget />
-    </Container>
+    <div
+      className={classNames(
+        'flex justify-center flex-wrap gap-y-4 h-full',
+        showRouteSelector && isSidebarOpen ? 'lg:ml-56' : '',
+      )}
+    >
+      <Container maxWidth="lg" className="px-4 !mx-[unset]">
+        <CrossChainSwapWidget />
+      </Container>
+      {showRouteSelector ? (
+        <Container maxWidth="lg" className="px-4 !mx-[unset] flex items-center">
+          <CrossChainSwapRouteSelector />
+        </Container>
+      ) : null}
+    </div>
   )
 }

apps/web/src/app/(networks)/(evm)/[chainId]/(trade)/dca/loading.tsx

@@ -7,20 +7,20 @@ export default function SimpleSwapLoading() {
       <div className="flex flex-col gap-4">
         <div />
         <div className="flex flex-col gap-2 mb-4 sm:mt-10 mt-2">
-          <SkeletonBox className="w-[140px] h-[53px]" />
-          <SkeletonBox className="h-[20px] w-[280px]" />
+          <SkeletonBox className="w-[140px] h-[36px] lg:h-[53px] rounded-xl" />
+          <SkeletonBox className="h-[20px] w-[280px] rounded-xl" />
         </div>
         <div className="flex gap-2">
-          <SkeletonBox className="h-[36px] w-[61px]" />
-          <SkeletonBox className="h-[36px] w-[56px]" />
-          <SkeletonBox className="h-[36px] w-[54px]" />
-          <SkeletonBox className="h-[36px] w-[136px]" />
+          <SkeletonBox className="h-[36px] w-[61px] rounded-xl" />
+          <SkeletonBox className="h-[36px] w-[56px] rounded-xl" />
+          <SkeletonBox className="h-[36px] w-[54px] rounded-xl" />
+          <SkeletonBox className="h-[36px] w-[136px] rounded-xl" />
         </div>
-        <div className="flex flex-col gap-2.5">
-          <SkeletonBox className="w-full h-[142px]" />
-          <SkeletonBox className="w-full h-[142px]" />
+        <div className="flex flex-col gap-[10px]">
+          <SkeletonBox className="w-full h-[142px] rounded-xl" />
+          <SkeletonBox className="w-full h-[142px] rounded-xl" />
         </div>
-        <SkeletonBox className="w-full h-[52px]" />
+        <SkeletonBox className="w-full h-[52px] rounded-xl" />
       </div>
     </Container>
   )

apps/web/src/app/(networks)/(evm)/[chainId]/(trade)/limit/loading.tsx

@@ -7,20 +7,20 @@ export default function SimpleSwapLoading() {
       <div className="flex flex-col gap-4">
         <div />
         <div className="flex flex-col gap-2 mb-4 sm:mt-10 mt-2">
-          <SkeletonBox className="w-[140px] h-[53px]" />
-          <SkeletonBox className="h-[20px] w-[280px]" />
+          <SkeletonBox className="w-[140px] h-[36px] lg:h-[53px] rounded-xl" />
+          <SkeletonBox className="h-[20px] w-[280px] rounded-xl" />
         </div>
         <div className="flex gap-2">
-          <SkeletonBox className="h-[36px] w-[61px]" />
-          <SkeletonBox className="h-[36px] w-[56px]" />
-          <SkeletonBox className="h-[36px] w-[54px]" />
-          <SkeletonBox className="h-[36px] w-[136px]" />
+          <SkeletonBox className="h-[36px] w-[61px] rounded-xl" />
+          <SkeletonBox className="h-[36px] w-[56px] rounded-xl" />
+          <SkeletonBox className="h-[36px] w-[54px] rounded-xl" />
+          <SkeletonBox className="h-[36px] w-[136px] rounded-xl" />
         </div>
-        <div className="flex flex-col gap-2.5">
-          <SkeletonBox className="w-full h-[142px]" />
-          <SkeletonBox className="w-full h-[142px]" />
+        <div className="flex flex-col gap-[10px]">
+          <SkeletonBox className="w-full h-[142px] rounded-xl" />
+          <SkeletonBox className="w-full h-[142px] rounded-xl" />
         </div>
-        <SkeletonBox className="w-full h-[52px]" />
+        <SkeletonBox className="w-full h-[52px] rounded-xl" />
       </div>
     </Container>
   )

apps/web/src/app/(networks)/(evm)/[chainId]/(trade)/swap/loading.tsx

@@ -7,20 +7,20 @@ export default function SimpleSwapLoading() {
       <div className="flex flex-col gap-4">
         <div />
         <div className="flex flex-col gap-2 mb-4 sm:mt-10 mt-2">
-          <SkeletonBox className="w-[140px] h-[53px]" />
-          <SkeletonBox className="h-[20px] w-[280px]" />
+          <SkeletonBox className="w-[140px] h-[36px] lg:h-[53px] rounded-xl" />
+          <SkeletonBox className="h-[20px] w-[280px] rounded-xl" />
         </div>
         <div className="flex gap-2">
-          <SkeletonBox className="h-[36px] w-[61px]" />
-          <SkeletonBox className="h-[36px] w-[56px]" />
-          <SkeletonBox className="h-[36px] w-[54px]" />
-          <SkeletonBox className="h-[36px] w-[136px]" />
+          <SkeletonBox className="h-[36px] w-[61px] rounded-xl" />
+          <SkeletonBox className="h-[36px] w-[56px] rounded-xl" />
+          <SkeletonBox className="h-[36px] w-[54px] rounded-xl" />
+          <SkeletonBox className="h-[36px] w-[136px] rounded-xl" />
         </div>
-        <div className="flex flex-col gap-2.5">
-          <SkeletonBox className="w-full h-[142px]" />
-          <SkeletonBox className="w-full h-[142px]" />
+        <div className="flex flex-col gap-[10px]">
+          <SkeletonBox className="w-full h-[142px] rounded-xl" />
+          <SkeletonBox className="w-full h-[142px] rounded-xl" />
         </div>
-        <SkeletonBox className="w-full h-[52px]" />
+        <SkeletonBox className="w-full h-[52px] rounded-xl" />
       </div>
     </Container>
   )

apps/web/src/app/(networks)/(evm)/api/cross-chain/routes/route.ts

@@ -0,0 +1,80 @@
+import { NextRequest } from 'next/server'
+import { isXSwapSupportedChainId } from 'src/config'
+import { isAddress } from 'viem'
+import { z } from 'zod'
+
+const schema = z.object({
+  fromChainId: z.coerce
+    .number()
+    .refine((chainId) => isXSwapSupportedChainId(chainId), {
+      message: `fromChainId must exist in XSwapChainId`,
+    }),
+  fromAmount: z.string(),
+  fromTokenAddress: z.string().refine((token) => isAddress(token), {
+    message: 'fromTokenAddress does not conform to Address',
+  }),
+  toChainId: z.coerce
+    .number()
+    .refine((chainId) => isXSwapSupportedChainId(chainId), {
+      message: `toChainId must exist in XSwapChainId`,
+    }),
+  toTokenAddress: z.string().refine((token) => isAddress(token), {
+    message: 'toTokenAddress does not conform to Address',
+  }),
+  fromAddress: z
+    .string()
+    .refine((address) => isAddress(address), {
+      message: 'fromAddress does not conform to Address',
+    })
+    .optional(),
+  toAddress: z
+    .string()
+    .refine((address) => isAddress(address), {
+      message: 'toAddress does not conform to Address',
+    })
+    .optional(),
+  slippage: z.coerce.number(), // decimal
+  order: z.enum(['CHEAPEST', 'FASTEST']).optional(),
+})
+
+export const revalidate = 20
+
+export async function GET(request: NextRequest) {
+  const params = Object.fromEntries(request.nextUrl.searchParams.entries())
+
+  const { slippage, order = 'CHEAPEST', ...parsedParams } = schema.parse(params)
+
+  const url = new URL('https://li.quest/v1/advanced/routes')
+
+  const options = {
+    method: 'POST',
+    headers: {
+      accept: 'application/json',
+      'content-type': 'application/json',
+      ...(process.env.LIFI_API_KEY && {
+        'x-lifi-api-key': process.env.LIFI_API_KEY,
+      }),
+    },
+    body: JSON.stringify({
+      ...parsedParams,
+      options: {
+        slippage,
+        order,
+        integrator: 'sushi',
+        exchanges: { allow: ['sushiswap'] },
+        allowSwitchChain: false,
+        allowDestinationCall: true,
+        // fee: // TODO: must set up feeReceiver w/ lifi
+      },
+    }),
+  }
+
+  const response = await fetch(url, options)
+
+  return Response.json(await response.json(), {
+    status: response.status,
+    headers: {
+      'Cache-Control': 's-maxage=15, stale-while-revalidate=20',
+    },
+  })
+}