feat: render markdown for whats new (#344)

* build(deps): add react-markdown package

* build(webpack): handle markdown files

* feat: add component to render markdown documents

* refactor: convert what's new modal to use markdown

* chore: squash

* chore: squash

package.json

@@ -102,6 +102,7 @@
     "lint-staged": "^15.2.9",
     "lute-connect": "^1.3.0",
     "prettier": "^2.8.4",
+    "raw-loader": "^4.0.2",
     "semantic-release": "^24.1.0",
     "style-loader": "^3.3.3",
     "thread-loader": "^4.0.2",
@@ -154,6 +155,7 @@
     "react-i18next": "^12.2.0",
     "react-icons": "^5.2.1",
     "react-loader-spinner": "^5.3.4",
+    "react-markdown": "^9.0.1",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.8.2",
     "scrypt-async": "^2.0.1",

src/@types/assets/index.d.ts

@@ -1 +1,2 @@
+declare module '*.md';
 declare module '*.png';

src/docs/whats_new.md

@@ -0,0 +1,34 @@
+## Summary
+
+### Features
+
+* 💅 Change account icon.
+* 💅 Change account background color.
+* 🗃️ Group accounts.
+* 🔁 Switch to new Voi testnet.
+
+## Community Highlights
+
+### Kibisis Launches On Android!
+
+After a lot of hard work, we are very proud to announce that Kibisis has officially launched on Android. You can download from the Play Store from [here](https://play.google.com/store/apps/details?id=is.kibis.kibisis).
+
+For more information or alternative installation methods, see the [Getting Started](https://kibis.is/android/getting-started) guide.
+
+> ⚠️ **NOTE:** Please be aware that the Android version is in open beta and there maybe some bugs, but rest assured we will be updating regularly. There may also be some missing features, these will be implemented over the coming updates.
+
+### Airdrops Have Dropped!
+
+On the 28th October 2024, all those that participated in the Testnet Phase 1 & 2 and Staking programs will have received their airdrops. For the Testnet program, 3.67% of the total token supply (367 million VOI) was allocated and 1.4% of the total token supply (140 million VOI) was allocated to the Staking program. Each program had an optional lock-up period, with the Testnet program having a higher lock-up period of upto 5 years, and, notably, 55% of the participants chose to lock-up for the full 5 years.
+
+These effort-based airdrops are testament to Voi's commitment to being a truly community-driven blockchain.
+
+You can check the state of your airdrop contracts using the beautifully crafted airdrop tool [https://staking.voi.network/](https://staking.voi.network/).
+
+For more information relating to the airdrops, check [this](https://medium.com/@voifoundation/airdrop-programs-everything-you-need-to-know-a84706bd8599) blog post.
+
+## Closing Words
+
+Thank you for your continued interest in Kibisis! We hope you are enjoying using it.
+
+It has been an epic ride so far, and we could not have got this far without you and your continued support.

src/extension/components/Markdown/Markdown.tsx

@@ -0,0 +1,94 @@
+import {
+  Alert,
+  Code,
+  Heading,
+  ListItem,
+  OrderedList,
+  Text,
+  UnorderedList,
+} from '@chakra-ui/react';
+import React, { type FC } from 'react';
+import ReactMarkdown from 'react-markdown';
+
+// components
+import Link from '@extension/components/Link';
+
+// hooks
+import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
+import usePrimaryColor from '@extension/hooks/usePrimaryColor';
+
+// types
+import type { IProps } from './types';
+
+const Markdown: FC<IProps> = ({ sourceAsString }) => {
+  // hooks
+  const defaultTextColor = useDefaultTextColor();
+  const primaryColor = usePrimaryColor();
+
+  return (
+    <ReactMarkdown
+      children={sourceAsString}
+      components={{
+        a: ({ children, href }) => (
+          <Link fontSize="sm" href={href} isExternal={true}>
+            {children}
+          </Link>
+        ),
+        blockquote: ({ children }) => (
+          <Alert status="warning" variant="left-accent">
+            <Text
+              color={defaultTextColor}
+              fontSize="sm"
+              textAlign="left"
+              w="full"
+            >
+              {children}
+            </Text>
+          </Alert>
+        ),
+        code: ({ children }) => <Code>{children}</Code>,
+        h1: ({ children }) => (
+          <Heading color={primaryColor} fontSize="lg" textAlign="left" w="full">
+            {children}
+          </Heading>
+        ),
+        h2: ({ children }) => (
+          <Heading color={primaryColor} fontSize="md" textAlign="left" w="full">
+            {children}
+          </Heading>
+        ),
+        h3: ({ children }) => (
+          <Heading color={primaryColor} fontSize="sm" textAlign="left" w="full">
+            {children}
+          </Heading>
+        ),
+        li: ({ children }) => <ListItem>{children}</ListItem>,
+        ol: ({ children }) => <OrderedList w="full">{children}</OrderedList>,
+        p: ({ children }) => (
+          <Text
+            color={defaultTextColor}
+            fontSize="sm"
+            textAlign="left"
+            w="full"
+          >
+            {children}
+          </Text>
+        ),
+        ul: ({ children }) => (
+          <UnorderedList w="full">
+            <Text
+              color={defaultTextColor}
+              fontSize="sm"
+              textAlign="left"
+              w="full"
+            >
+              {children}
+            </Text>
+          </UnorderedList>
+        ),
+      }}
+    />
+  );
+};
+
+export default Markdown;

src/extension/components/Markdown/index.ts

@@ -0,0 +1 @@
+export { default } from './Markdown';

src/extension/components/Markdown/types/IProps.ts

@@ -0,0 +1,5 @@
+interface IProps {
+  sourceAsString: string;
+}
+
+export default IProps;

src/extension/components/Markdown/types/index.ts

@@ -0,0 +1 @@
+export type { default as IProps } from './IProps';