markdown content setup, more styling

app/globals.css

@@ -1,5 +1,5 @@
 :root {
-  --max-width: 680px;
+  --max-width: 42rem;
   --border-radius: 0.3rem;
 
   --foreground-rgb: 20, 20, 20;

app/page.module.css

@@ -35,4 +35,6 @@
   width: 100%;
   max-width: var(--max-width);
   margin: 3rem auto 0 auto;
+  padding-top: 2rem;
+  border-top: 1px solid rgba(var(--foreground-rgb), 0.2);
 }

components/CalculationBase/CalculationBase.module.css

@@ -16,7 +16,7 @@
 }
 
 .label {
-  font-size: 0.7rem;
+  font-size: 0.65rem;
   color: rgba(var(--foreground-rgb), 0.6);
   border: 1px solid rgba(var(--foreground-rgb), 0.2);
   border-radius: var(--border-radius);

components/Content/Content.module.css

@@ -10,3 +10,17 @@
 .content a {
   text-decoration: underline;
 }
+
+.content ul {
+  list-style-type: disc;
+  margin-left: 4rem;
+}
+
+.content ol {
+  list-style-type: decimal;
+  margin-left: 4rem;
+}
+
+.content li {
+  margin-bottom: 0.5rem;
+}

components/Content/Content.tsx

@@ -1,27 +1,7 @@
+import Markdown from 'react-markdown'
 import styles from './Content.module.css'
+import content from '@/content.md'
 
 export function Content() {
-  return (
-    <div className={styles.content}>
-      <p>
-        The fiat values are fetched from{' '}
-        <a href="https://coingecko.com">Coingecko</a>, and the token swap
-        estimations directly from <a href="https://uniswap.org">Uniswap</a> v3
-        swap routes.
-      </p>
-      <p>
-        All displayed values should be seen as estimates. Except for the{' '}
-        <a href="https://blog.oceanprotocol.com/ocean-protocol-is-joining-the-superintelligence-alliance-767c82693f24#3c8e">
-          fixed ASI exchange rate
-        </a>
-        , all other values are constantly changing based on market conditions.
-      </p>
-
-      <p>
-        There is no guarantee the displayed values reflect the value of your
-        investment once the actual ASI swap mechanism is released. Use at your
-        own risk.
-      </p>
-    </div>
-  )
+  return <Markdown className={styles.content}>{content}</Markdown>
 }

constants.ts

@@ -7,5 +7,3 @@ export const tokens: `0x${string}`[] = [
   '0xaea46a60368a7bd060eec7df8cba43b7ef41ad85', // FET
   '0x5b7533812759b45c2b44c19e320ba2cd2681b542' // AGIX
 ]
-
-export const exampleBuyInUsd = 100

content.md

@@ -0,0 +1,11 @@
+The fiat values are fetched from [Coingecko](https://coingecko.com), and the token swap estimations directly from [Uniswap](https://uniswap.org) v3 swap routes.
+
+All displayed values should be seen as estimates. Except for the [fixed ASI exchange rate](https://blog.oceanprotocol.com/ocean-protocol-is-joining-the-superintelligence-alliance-767c82693f24#3c8e), all other values are constantly changing based on market conditions.
+
+There is no guarantee the displayed values reflect the value of your investment once the actual ASI swap mechanism is released. Use at your own risk.
+
+Find everything about the token merger in every team's announcement posts:
+
+- [Ocean Protocol: Ocean Protocol is joining the Superintelligence Alliance](https://blog.oceanprotocol.com/ocean-protocol-is-joining-the-superintelligence-alliance-767c82693f24)
+- [Fetch.ai: Superintelligence Alliance Token Merge $ASI](https://fetch.ai/blog/superintelligence-alliance-token-merge-asi)
+- [SingularityNET: Introducing the Artificial Superintelligence Alliance](https://blog.singularitynet.io/introducing-the-artificial-superintelligence-alliance-40a4dea01e62)

next.config.mjs

@@ -8,6 +8,13 @@ const nextConfig = {
         pathname: '/**'
       }
     ]
+  },
+  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
+    config.module.rules.push({
+      test: /\.md$/,
+      type: 'asset/source'
+    })
+    return config
   }
 }
 

package.json

@@ -14,6 +14,7 @@
     "next": "14.1.4",
     "react": "^18",
     "react-dom": "^18",
+    "react-markdown": "^9.0.1",
     "swr": "^2.2.5",
     "use-debounce": "^10.0.0"
   },

types/global.d.ts

@@ -0,0 +1,4 @@
+declare module '*.md' {
+  const content: string
+  export default content
+}