feat: Add smart contracts addresses to course info page (#40)

cubiclearn · Nov 8, 2023 · aaaed5d · aaaed5d
1 parent e33327e
commit aaaed5d
Showing 1 changed file with 44 additions and 8 deletions.
diff --git a/packages/ui/src/Course/CourseInfo/CourseInfo.tsx b/packages/ui/src/Course/CourseInfo/CourseInfo.tsx
@@ -12,9 +12,11 @@ import {
   Stack,
   Text,
   Image,
+  Icon,
 } from '@chakra-ui/react'
 import NextLink from 'next/link'
-import { ChainSnapshotWebsite } from '@dae/chains'
+import { ChainBlockExplorer, ChainSnapshotWebsite } from '@dae/chains'
+import { FiLink, FiBook } from 'react-icons/fi'
 
 export const CourseInfo: React.FC<any> = () => {
   const { data, isLoading, error } = useCourseData()
@@ -56,34 +58,40 @@ export const CourseInfo: React.FC<any> = () => {
   const snapshotWebsite =
     ChainSnapshotWebsite[data.chain_id as keyof typeof ChainSnapshotWebsite]
 
+  const chainBlockExplorer =
+    ChainBlockExplorer[data.chain_id as keyof ChainBlockExplorer]
+
   return (
     <Box padding={8} borderRadius="xl" bg={'white'} boxShadow={'md'}>
       <Stack
-        spacing={8}
+        spacing={12}
         borderRadius="xl"
         direction={{ base: 'column', lg: 'row' }}
       >
         <Center width={{ base: '100%', lg: '30%' }}>
           <Image
             src={data.image_url}
-            alt="Green double couch with wooden legs"
             borderRadius="lg"
             maxHeight={{ base: '300px', lg: '500px' }}
           />
         </Center>
         <Stack spacing={8} width={'100%'}>
-          <Stack spacing={4}>
+          <Stack spacing={2}>
             <Box>
               <Text fontSize={'3xl'} fontWeight={'semibold'}>
                 {data.name}
               </Text>
             </Box>
             <Box>
-              <Text fontWeight={'normal'}>{data.description}</Text>
+              <Text fontSize={'md'}>{data.description}</Text>
             </Box>
           </Stack>
           <Stack>
-            <Text fontWeight={'semibold'}>
+            <Text fontWeight={'semibold'} fontSize={'lg'}>
+              <Icon as={FiLink} mr={2} boxSize={4} />
+              Links
+            </Text>
+            <Text fontWeight={'medium'}>
               Website:{' '}
               <Link
                 fontWeight={'normal'}
@@ -95,7 +103,7 @@ export const CourseInfo: React.FC<any> = () => {
               </Link>
             </Text>
             {data.media_channel ? (
-              <Text fontWeight={'semibold'}>
+              <Text fontWeight={'medium'}>
                 Media Channel:{' '}
                 <Link
                   fontWeight={'normal'}
@@ -109,7 +117,7 @@ export const CourseInfo: React.FC<any> = () => {
             ) : (
               <></>
             )}
-            <Text fontWeight={'semibold'}>
+            <Text fontWeight={'medium'}>
               Snapshot Space:{' '}
               <Link
                 href={`${snapshotWebsite}/#/${data.snapshot_space_ens}`}
@@ -121,6 +129,34 @@ export const CourseInfo: React.FC<any> = () => {
               </Link>
             </Text>
           </Stack>
+          <Stack>
+            <Text fontWeight={'semibold'} fontSize={'lg'}>
+              <Icon as={FiBook} mr={2} boxSize={4} />
+              Smart Contracts
+            </Text>
+            <Text fontWeight={'medium'}>
+              Course:{' '}
+              <Link
+                fontWeight={'normal'}
+                href={`${chainBlockExplorer}/address/${data.address}`}
+                as={NextLink}
+                target="_blank"
+              >
+                {data.address}
+              </Link>
+            </Text>
+            <Text fontWeight={'medium'}>
+              Karma:{' '}
+              <Link
+                href={`${chainBlockExplorer}/address/${data.karma_access_control_address}`}
+                as={NextLink}
+                target="_blank"
+                fontWeight={'normal'}
+              >
+                {data.karma_access_control_address}
+              </Link>
+            </Text>
+          </Stack>
         </Stack>
       </Stack>
     </Box>