add cta rich text component

app/(pages)/explore/[category]/page.tsx

@@ -9,7 +9,7 @@ import {
 import { fetchMangoTokenData } from '../../../utils/mango'
 import Category from '../../../components/explore/Category'
 import { MAX_CONTENT_WIDTH } from '../../../utils/constants'
-import RichTextDisplay from '../../../components/shared/RichTextDisplay'
+import RichTextDisplay from '../../../components/rich-text/RichTextDisplay'
 import DataDisclaimer from '../../../components/explore/DataDisclaimer'
 
 interface TokenCategoryPageParams {

app/(pages)/learn/[slug]/page.tsx

@@ -3,7 +3,7 @@ import { draftMode } from 'next/headers'
 import { notFound } from 'next/navigation'
 import Link from 'next/link'
 import { fetchBlogPost, fetchBlogPosts } from '../../../../contentful/blogPost'
-import RichText from '../../../components/RichText'
+import RichText from '../../../components/rich-text/RichText'
 
 interface BlogPostPageParams {
   slug: string

app/(pages)/token/[slug]/page.tsx

@@ -5,7 +5,7 @@ import {
   fetchTokenPage,
   fetchTokenPages,
 } from '../../../../contentful/tokenPage'
-import RichTextDisplay from '../../../components/shared/RichTextDisplay'
+import RichTextDisplay from '../../../components/rich-text/RichTextDisplay'
 import { fetchMangoMarketData, fetchMangoTokenData } from '../../../utils/mango'
 import { MangoMarketsData, MangoTokenData } from '../../../types/mango'
 import TokenMangoStats from '../../../components/explore/token-page/TokenMangoStats'

app/components/RichText.tsx → app/components/rich-text/RichText.tsx

@@ -2,6 +2,7 @@ import { BLOCKS, INLINES, MARKS } from '@contentful/rich-text-types'
 import { Document as RichTextDocument } from '@contentful/rich-text-types'
 import { documentToReactComponents } from '@contentful/rich-text-react-renderer'
 import Link from 'next/link'
+import TokenCallToAction from './TokenCallToAction'
 
 type RichTextProps = {
   document: RichTextDocument | undefined
@@ -59,13 +60,27 @@ const options = {
     [MARKS.BOLD]: (text) => <Bold>{text}</Bold>,
   },
   renderNode: {
-    [BLOCKS.PARAGRAPH]: (node, children) => <Text>{children}</Text>,
+    [BLOCKS.PARAGRAPH]: (node, children) => {
+      const isEntry = node.content.find(
+        (type) => type.nodeType === 'embedded-entry-inline',
+      )
+      return isEntry ? <>{children}</> : <Text>{children}</Text>
+    },
     [INLINES.HYPERLINK]: (node, children) => <A node={node}>{children}</A>,
     [BLOCKS.HEADING_2]: (node, children) => <H2>{children}</H2>,
     [BLOCKS.HEADING_3]: (node, children) => <H3>{children}</H3>,
     [BLOCKS.HEADING_4]: (node, children) => <H4>{children}</H4>,
     [BLOCKS.UL_LIST]: (node, children) => <Ul>{children}</Ul>,
     [BLOCKS.HR]: () => <Spacer />,
+    [INLINES.EMBEDDED_ENTRY]: (node) => {
+      if (node.data.target.sys.contentType.sys.id === 'tokenCallToAction') {
+        return (
+          <div>
+            <TokenCallToAction data={node.data.target.fields} />
+          </div>
+        )
+      }
+    },
   },
   // renderText: (text) => text.replace('!', '?'),
 }

app/components/shared/RichTextDisplay.tsx → app/components/rich-text/RichTextDisplay.tsx

@@ -1,5 +1,5 @@
 import { Document as RichTextDocument } from '@contentful/rich-text-types'
-import RichText from '../RichText'
+import RichText from './RichText'
 
 const RichTextDisplay = ({
   content,

app/components/rich-text/TokenCallToAction.tsx

@@ -0,0 +1,60 @@
+import Image from 'next/image'
+import { CUSTOM_TOKEN_ICONS } from '../../utils/constants'
+import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
+import ButtonLink from '../shared/ButtonLink'
+
+type CtaData = {
+  bankName: string
+  description: string
+  spotMarketName: string
+  title: string
+}
+
+const TokenCallToAction = ({ data }: { data: CtaData }) => {
+  const { bankName, description, spotMarketName, title } = data
+  const hasCustomIcon = bankName
+    ? CUSTOM_TOKEN_ICONS[bankName.toLowerCase()]
+    : false
+  const logoUrl = hasCustomIcon
+    ? `/icons/tokens/${bankName.toLowerCase()}.svg`
+    : ''
+  return (
+    <div className="bg-gradient-to-br from-th-bkg-3 to-th-bkg-4 p-4 md:px-6 rounded-lg flex flex-col md:flex-row md:items-center md:justify-between my-4">
+      <div className="flex items-center space-x-3">
+        {logoUrl ? (
+          <Image
+            className="flex-shrink-0"
+            src={logoUrl}
+            alt={`${bankName} Logo`}
+            height={40}
+            width={40}
+          />
+        ) : (
+          <QuestionMarkCircleIcon className="h-10 w-10 text-th-fgd-4 flex-shrink-0" />
+        )}
+        <div>
+          <p className="mb-1 text-th-fgd-2 font-display">{title}</p>
+          <p className="text-sm text-th-fgd-2">{description}</p>
+        </div>
+      </div>
+      <div className="flex space-x-2 md:pl-4 pt-4 md:pt-0">
+        <ButtonLink
+          linkText={`Swap ${bankName}`}
+          path={`https://app.mango.markets/swap?in=USDC&out=${bankName}`}
+          //   secondary
+          size="small"
+          target="_blank"
+        />
+        <ButtonLink
+          linkText={`Trade ${bankName}`}
+          path={`https://app.mango.markets/trade?name=${spotMarketName}`}
+          //   secondary
+          size="small"
+          target="_blank"
+        />
+      </div>
+    </div>
+  )
+}
+
+export default TokenCallToAction

app/components/shared/ButtonLink.tsx

@@ -14,7 +14,7 @@ const ButtonLink: FunctionComponent<ButtonLinkProps> = ({
   path,
   className,
   secondary,
-  size = 'medium',
+  size,
   target,
 }) => {
   return (
@@ -24,12 +24,12 @@ const ButtonLink: FunctionComponent<ButtonLinkProps> = ({
           ? 'border border-th-button md:hover:border-th-button-hover'
           : 'bg-th-button md:hover:bg-th-button-hover'
       } ${
-        size === 'medium'
-          ? 'h-10 px-4 text-sm'
+        size === 'small'
+          ? 'h-8 px-3 text-xs'
           : size === 'large'
             ? 'h-12 px-6'
-            : 'h-8 px-3'
-      } default-transition font-display focus:outline-none text-th-fgd-1 ${className}`}
+            : 'h-10 px-4 text-sm'
+      } default-transition font-display focus:outline-none text-th-fgd-1 whitespace-nowrap ${className}`}
       href={path}
       rel="noopener noreferrer"
       target={target ? target : undefined}