added disclaimer to stablecoin page

gabrieltemtsen · gabrieltemtsen · commit 2432c3b0b5d9 · 2024-02-18T22:28:19.000+01:00
diff --git a/src/components/StablecoinBoxGrid.tsx b/src/components/StablecoinBoxGrid.tsx
@@ -1,7 +1,9 @@
 import { useState } from "react"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
-import { Box, Flex, useColorModeValue } from "@chakra-ui/react"
+import { FaExclamation } from "react-icons/fa6"
+import { HiOutlineSpeakerphone } from "react-icons/hi";
+import { Box, Flex, HStack,Icon,Text,useColorModeValue } from "@chakra-ui/react"
 
 import { ChildOnlyProp } from "@/lib/types"
 
@@ -39,6 +41,7 @@ interface ILink {
 
 type GridItemProps = {
   description: string
+  disclaimer: string
   columnNumber: number
   rowNumber: number
   emoji: string
@@ -65,6 +68,23 @@ const OpenTitle = ({ title }: { title: string }) => {
   )
 }
 
+const Disclaimer = ({ disclaimer }: { disclaimer: string }) => {
+
+  return (
+    <Box p={1}  borderRadius={'5px'} bg={'warning'}>
+          <HStack>
+          <Icon as={HiOutlineSpeakerphone} /> 
+          {/* <Icon fontWeight={300} fontSize={'sm'} as={FaExclamation}  />  */}
+          <Text  fontSize="sm" fontWeight={400} >
+            {disclaimer}  
+          </Text>
+          </HStack>
+      </Box>
+  
+  )
+
+}
+
 const Title = ({ title }: { title: string }) => {
   return (
     <OldHeading
@@ -186,7 +206,18 @@ const GridItem = ({
       }}
     >
       {isOpen ? (
-        <Emoji mb={8} text={emoji} fontSize="8xl" />
+        <>
+      <Box display={'flex'} alignItems={'center'} justifyContent={'space-between'} gap={48}>
+      <Emoji  mb={8} text={emoji} fontSize="8xl" />
+      {title === t("page-stablecoins-algorithmic") && (
+
+        <Disclaimer disclaimer={t("page-stablecoins-algorithmic-disclaimer")} />
+        
+       )}
+      </Box>
+      
+      
+        </>  
       ) : (
         <>
           <StyledEmoji emoji={emoji} />
@@ -196,7 +227,8 @@ const GridItem = ({
       <div>
         {isOpen && (
           <div>
-            <OpenTitle title={title} />
+              <OpenTitle title={title} />
+              
             <Body>{description}</Body>
             <Row>
               {pros && (
@@ -255,6 +287,7 @@ const GridItem = ({
 
 export interface IPropsBoxItem {
   description: string
+  disclaimer?: string
   emoji: string
   title: string
   pros?: Array<string>
@@ -299,6 +332,7 @@ const StablecoinBoxGrid = ({ items }: StablecoinBoxGridProps) => {
             title={item.title}
             emoji={item.emoji}
             description={item.description}
+            disclaimer={item.disclaimer || ''}
             pros={item.pros}
             cons={item.cons}
             links={item.links}
diff --git a/src/intl/en/page-stablecoins.json b/src/intl/en/page-stablecoins.json
@@ -56,6 +56,7 @@
   "page-stablecoins-algorithmic-con-1": "You need to trust (or be able to read) the algorithm.",
   "page-stablecoins-algorithmic-con-2": "Your balance of coins will change based on total supply.",
   "page-stablecoins-algorithmic-description": "These stablecoins aren't backed by any other asset. Instead an algorithm will sell tokens if the price falls below the desired value and supply tokens if the value goes beyond the desired amount. Because the number of these tokens in circulation changes regularly, the number of tokens you own will change, but will always reflect your share.",
+  "page-stablecoins-algorithmic-disclaimer": "Algorithmic stablecoins are experimental technology. You should be aware of the risks before using them.",
   "page-stablecoins-algorithmic-pro-1": "No collateral needed.",
   "page-stablecoins-algorithmic-pro-2": "Controlled by a public algorithm.",
   "page-stablecoins-bank-apy": "0.05%",
diff --git a/src/pages/stablecoins.tsx b/src/pages/stablecoins.tsx
@@ -291,6 +291,7 @@ const StablecoinsPage = ({ markets, marketsHasError }) => {
     {
       title: t("page-stablecoins-algorithmic"),
       description: t("page-stablecoins-algorithmic-description"),
+      disclaimer: t("page-stablecoins-algorithmic-disclaimer"),
       emoji: ":chart_with_downwards_trend:",
       pros: [
         t("page-stablecoins-algorithmic-pro-1"),

Original file line number	Diff line number	Diff line change
`@@ -291,6 +291,7 @@ const StablecoinsPage = ({ markets, marketsHasError }) => {`
`291`	`291`	`{`
`292`	`292`	`title: t("page-stablecoins-algorithmic"),`
`293`	`293`	`description: t("page-stablecoins-algorithmic-description"),`
	`294`	`+ disclaimer: t("page-stablecoins-algorithmic-disclaimer"),`
`294`	`295`	`emoji: ":chart_with_downwards_trend:",`
`295`	`296`	`pros: [`
`296`	`297`	`t("page-stablecoins-algorithmic-pro-1"),`