Merge pull request #1711 from sushi-labs/feature/egn-760

feat(apps/web): add strapi banner to swap

apps/web/package.json

@@ -85,6 +85,7 @@
     "react-toastify": "9.1.3",
     "react-virtualized-auto-sizer": "1.0.7",
     "react-window": "1.8.7",
+    "sharp": "^0.33.5",
     "strapi-sdk-js": "2.3.3",
     "sushi": "4.0.5",
     "swr": "2.1.5",

apps/web/src/app/(non-evm)/aptos/pool/ui/pools/tables/pools/cells/pool-name-cell.tsx

@@ -2,7 +2,6 @@ import { Badge, TooltipContent } from '@sushiswap/ui'
 import { Tooltip, TooltipProvider, TooltipTrigger } from '@sushiswap/ui'
 import { AptosCircle } from '@sushiswap/ui/icons/network/circle/AptosCircle'
 import React, { FC } from 'react'
-// import { ProtocolBadge } from 'src/ui/pool/PoolNameCell'
 import { formatNumber } from 'sushi'
 import { CurrencyIcon } from '~aptos/(common)/ui/currency/currency-icon'
 import { CurrencyIconList } from '~aptos/(common)/ui/currency/currency-icon-list'

apps/web/src/ui/swap/simple/simple-swap-widget.tsx

@@ -1,3 +1,4 @@
+import { StrapiBanner } from '../strapi-banner/strapi-banner'
 import { SwapModeButtons } from '../swap-mode-buttons'
 import { SimpleSwapBridgeBanner } from './simple-swap-bridge-banner'
 import { SimpleSwapHeader } from './simple-swap-header'
@@ -27,6 +28,7 @@ export const SimpleSwapWidget = () => {
         <SimpleSwapTradeButton />
       </div>
       <SimpleSwapTradeStats />
+      <StrapiBanner />
       <SimpleSwapTokenNotFoundDialog />
     </div>
   )

apps/web/src/ui/swap/strapi-banner/strapi-banner-content.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import { XMarkIcon } from '@heroicons/react/20/solid'
+import { Banner } from '@sushiswap/graph-client/strapi'
+import { LinkExternal, classNames } from '@sushiswap/ui'
+import type { RequestCookie } from 'next/dist/compiled/@edge-runtime/cookies'
+import Image from 'next/legacy/image'
+import { MouseEventHandler, useCallback, useMemo, useState } from 'react'
+import { getOptimizedMedia } from 'src/app/(cms)/lib/media'
+
+export function StrapiBannerContent({
+  banner,
+  cookie: _cookie,
+}: { banner: Banner; cookie: RequestCookie | undefined }) {
+  const [cookie, setCookie] = useState<RequestCookie | undefined>(_cookie)
+  const [isImageLoading, setImageLoading] = useState(true)
+
+  const hiddenBannerIds = useMemo(() => {
+    return cookie ? cookie.value.split(',') : []
+  }, [cookie])
+
+  const onHide = useCallback(
+    (event: Parameters<MouseEventHandler<HTMLDivElement>>[0]) => {
+      event.preventDefault()
+
+      const newHiddenBannerIds = [...hiddenBannerIds, banner.id]
+
+      document.cookie = `hidden-banner-ids=${newHiddenBannerIds.join(
+        ',',
+      )}; path=/; max-age=31536000`
+
+      setCookie({
+        name: 'hidden-banner-ids',
+        value: newHiddenBannerIds.join(','),
+      })
+    },
+    [banner, hiddenBannerIds],
+  )
+
+  if (hiddenBannerIds.includes(banner.id)) {
+    return <></>
+  }
+
+  const image = banner.image.attributes
+
+  return (
+    <div className="rounded-xl w-full relative">
+      <LinkExternal href={banner.link}>
+        {/* biome-ignore lint/a11y/useKeyWithClickEvents: stupid */}
+        <div className="absolute z-10 right-0 top-0 p-2" onClick={onHide}>
+          <XMarkIcon width={32} height={32} className="text-white" />
+        </div>
+        <Image
+          src={getOptimizedMedia({
+            metadata: image.provider_metadata,
+            width: image.width,
+            height: image.height,
+          })}
+          alt={image.alternativeText || ''}
+          width={image.width}
+          height={image.height}
+          onLoad={() => setImageLoading(false)}
+          className={classNames(
+            'rounded-xl absolute bg-secondary',
+            isImageLoading && 'animate-pulse',
+          )}
+        />
+      </LinkExternal>
+    </div>
+  )
+}

apps/web/src/ui/swap/strapi-banner/strapi-banner.tsx

@@ -0,0 +1,29 @@
+import { getBanners } from '@sushiswap/graph-client/strapi'
+import ms from 'ms'
+import { unstable_cache } from 'next/cache'
+import { cookies } from 'next/headers'
+import { StrapiBannerContent } from './strapi-banner-content'
+
+export async function StrapiBanner() {
+  let banners
+
+  try {
+    banners = await unstable_cache(() => getBanners(), ['banners'], {
+      revalidate: ms('1h'),
+    })()
+  } catch {}
+
+  if (!banners) return <></>
+
+  // Only supporting one active banner at a time for now
+  const activeBanner = banners.find((banner) => banner.isActive)
+
+  if (!activeBanner) return <></>
+
+  return (
+    <StrapiBannerContent
+      banner={activeBanner}
+      cookie={cookies().get('hidden-banner-ids')}
+    />
+  )
+}

packages/graph-client/src/subgraphs/strapi/index.ts

@@ -1,4 +1,5 @@
 export * from './queries/academy-articles'
+export * from './queries/banners'
 export * from './queries/blog-articles'
 export * from './queries/difficulties'
 export * from './queries/products'

packages/graph-client/src/subgraphs/strapi/queries/banners.ts

@@ -0,0 +1,67 @@
+import type { VariablesOf } from 'gql.tada'
+
+import { request, type RequestOptions } from 'src/lib/request'
+import { graphql } from '../graphql'
+import { STRAPI_GRAPHQL_URL } from 'src/subgraphs/strapi/constants'
+import { ImageFieldsFragment } from 'src/subgraphs/strapi/fragments/image-fields'
+
+export const StrapiBannersQuery = graphql(
+  `query Banners {
+    banners {
+      data {
+        id
+        attributes {
+          dateFrom
+          dateTo
+          link
+          image {
+            data {
+              ...ImageFields
+            }
+          }
+        }
+      }
+    }
+  }`,
+  [ImageFieldsFragment],
+)
+
+export type GetBanners = VariablesOf<typeof StrapiBannersQuery>
+
+export type Banner = Awaited<ReturnType<typeof getBanners>>[number]
+
+export async function getBanners(
+  _variables: GetBanners = {},
+  options?: RequestOptions,
+) {
+  const variables = _variables as VariablesOf<typeof StrapiBannersQuery>
+
+  const result = await request(
+    {
+      url: STRAPI_GRAPHQL_URL,
+      document: StrapiBannersQuery,
+      variables,
+    },
+    options,
+  )
+
+  if (!result.banners) {
+    throw new Error('Failed to fetch banners')
+  }
+
+  return result.banners.data.map((topic) => {
+    const dateFrom = new Date(topic.attributes.dateFrom)
+    const dateTo = new Date(topic.attributes.dateTo)
+
+    const isActive = dateFrom <= new Date() && dateTo >= new Date()
+
+    return {
+      id: topic.id,
+      dateFrom,
+      dateTo,
+      link: topic.attributes.link,
+      image: topic.attributes.image.data,
+      isActive,
+    }
+  })
+}