feat: add card header

apps/web/src/views/PositionManagers/components/CardLayout.tsx

@@ -0,0 +1,15 @@
+import styled from 'styled-components'
+import { FlexLayout, Flex, CardHeader as CardHeaderComp } from '@pancakeswap/uikit'
+
+export const CardLayout = styled(FlexLayout)`
+  justify-content: flex-start;
+`
+
+export const CardHeader = styled(CardHeaderComp)`
+  background: none;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 1.5em;
+`

apps/web/src/views/PositionManagers/components/DuoTokenVaultCard.tsx

@@ -1,7 +1,12 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { Strategy } from '@pancakeswap/position-managers'
+import { Card, CardBody, Heading } from '@pancakeswap/uikit'
 import { Currency } from '@pancakeswap/sdk'
-import { ReactNode, memo } from 'react'
+import { ReactNode, memo, PropsWithChildren, useMemo } from 'react'
+
+import { TokenPairImage } from 'components/TokenImage'
+
+import { CardHeader } from './CardLayout'
 
 interface Props {
   currencyA: Currency
@@ -14,6 +19,27 @@ interface Props {
   info?: ReactNode
 }
 
-export const DuoTokenVaultCard = memo(function DuoTokenVaultCard() {
-  return null
+export const DuoTokenVaultCard = memo(function DuoTokenVaultCard({
+  children,
+  currencyA,
+  currencyB,
+  name,
+}: PropsWithChildren<Props>) {
+  const tokenPairName = useMemo(() => `${currencyA.symbol}-${currencyB.symbol}`, [currencyA, currencyB])
+
+  return (
+    <Card>
+      <CardHeader>
+        <TokenPairImage
+          variant="inverted"
+          primaryToken={currencyA.wrapped}
+          secondaryToken={currencyB.wrapped}
+          width={64}
+          height={64}
+        />
+        <Heading>{tokenPairName}</Heading>
+      </CardHeader>
+      <CardBody>{children}</CardBody>
+    </Card>
+  )
 })

apps/web/src/views/PositionManagers/components/index.ts

@@ -5,3 +5,4 @@ export * from './ViewSwitch'
 export * from './Toggles'
 export * from './Filters'
 export * from './DuoTokenVaultCard'
+export * from './CardLayout'

apps/web/src/views/PositionManagers/containers/PCSVaultCard.tsx

@@ -2,14 +2,20 @@ import { memo } from 'react'
 import { PCSDuoTokenVaultConfig } from '@pancakeswap/position-managers'
 
 import { usePCSVault } from '../hooks'
+import { DuoTokenVaultCard } from '../components'
 
 interface Props {
   config: PCSDuoTokenVaultConfig
 }
 
 export const PCSVaultCard = memo(function PCSVaultCard({ config }: Props) {
   const { vault } = usePCSVault({ config })
+  const { id, currencyA, currencyB, name, strategy } = vault
 
   console.log(vault)
-  return <div>{vault.id}</div>
+  return (
+    <DuoTokenVaultCard key={id} currencyA={currencyA} currencyB={currencyB} name={name} strategy={strategy}>
+      {id}
+    </DuoTokenVaultCard>
+  )
 })

apps/web/src/views/PositionManagers/containers/VaultCards.tsx

@@ -3,6 +3,7 @@ import { isPCSVaultConfig } from '@pancakeswap/position-managers'
 
 import { useVaultConfigs } from '../hooks'
 import { PCSVaultCard } from './PCSVaultCard'
+import { CardLayout } from '../components'
 
 export const VaultCards = memo(function VaultCards() {
   const configs = useVaultConfigs()
@@ -14,5 +15,5 @@ export const VaultCards = memo(function VaultCards() {
     return null
   })
 
-  return <>{cards}</>
+  return <CardLayout>{cards}</CardLayout>
 })