Issue#13 add link to the reddit article regarding total supply misscalculation and correction (#753)

* fix brace display

* Add read more link reddit clarification

* Improve data type to JSX or string

* fix(DFIStatisticsDisplay): set desc to undefined when supply missing; render JSX fragment when present

Author: Teo

src/components/commons/StatisticPanel.tsx

@@ -1,3 +1,4 @@
+import React, { ReactNode } from "react";
 import { useUnitSuffix } from "@hooks/useUnitSuffix";
 import CountUp from "react-countup";
 import classNames from "classnames";
@@ -6,7 +7,7 @@ import { useRouter } from "next/router";
 interface StatisticPanelItemProps {
   title: string;
   stats?: number;
-  desc?: string;
+  desc?: ReactNode; // JSX or string
   prefix?: string;
   descStyle?: string;
   displayId?: string;
@@ -68,7 +69,7 @@ function StatisticsPanelItem({
 }: {
   title: string;
   stats?: number;
-  desc?: string;
+  desc?: ReactNode;
   prefix?: string;
   descStyle?: string;
   isTabletHorizontal?: boolean;

src/pages/explore/dfi/_components/DFIStatisticsDisplay.tsx

@@ -33,7 +33,7 @@ export function DFIStatisticsDisplay() {
       stats: supply?.circulating,
       desc:
         supply === undefined
-          ? supply
+          ? undefined
           : `${calculatePercentage(
               supply?.circulating,
               supply?.total,
@@ -44,9 +44,21 @@ export function DFIStatisticsDisplay() {
       title: t("statisticsDisplay.dfiMinted.title"),
       stats: supply?.total,
       desc:
-        supply === undefined
-          ? supply
-          : `out of ${dfiMintedValue}${dfiMintedSuffix}} fixed supply`,
+        supply === undefined ? undefined : (
+          <>
+            Out of {dfiMintedValue}
+            {dfiMintedSuffix} fixed supply. (
+            <a
+              href="https://www.reddit.com/r/defiblockchain/comments/1ka6cux/clarification_on_dfi_max_supply_overshooting_12b/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-500 underline"
+            >
+              read more...
+            </a>
+            )
+          </>
+        ),
       testID: "dfi-minted",
     },
   ];