handle ordered lists in rich text and jup share image

app/components/rich-text/RichText.tsx

@@ -75,6 +75,7 @@ function RichText({ document, currentPrice }: RichTextProps) {
       [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.OL_LIST]: (node, children) => <Ol>{children}</Ol>,
       [BLOCKS.LIST_ITEM]: (node) => {
         const transformedChildren = documentToReactComponents(node, {
           renderNode: {
@@ -83,7 +84,7 @@ function RichText({ document, currentPrice }: RichTextProps) {
           },
         })
         return (
-          <li className="font-body text-th-fgd-4 text-lg mb-4 tracking-wider">
+          <li className="font-body text-th-fgd-3 text-lg mb-4 tracking-wider">
             {transformedChildren}
           </li>
         )
@@ -141,6 +142,11 @@ const H4 = ({ children }) => <h3 className="mb-1.5 text-lg">{children}</h3>
 const Ul = ({ children }) => (
   <ul style={{ listStyle: 'outside disc', marginLeft: '16px' }}>{children}</ul>
 )
+const Ol = ({ children }) => (
+  <ol style={{ listStyle: 'outside number', marginLeft: '20px' }}>
+    {children}
+  </ol>
+)
 const mangoUrl = 'https://mango.markets'
 const A = ({ node, children }) => {
   const { data } = node