From 28e8a9b447236465ccb9c74d4c18ba5bf61bee96 Mon Sep 17 00:00:00 2001
From: Muhammad Wildan Aldiansyah <aldiwild77@gmail.com>
Date: Thu, 30 May 2024 23:08:36 +0700
Subject: [PATCH] feat: add wallet donation (#42)

* feat: add wallet donation

* Apply suggestions from code review

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* feat: review from code rabbit

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 .env.example                                  |   7 +
 next.config.js                                |   1 +
 package.json                                  |   5 +-
 public/locales/en/common.json                 |  10 +-
 public/locales/id/common.json                 |  10 +-
 .../DonationModal/DonationModal.tsx           |  65 +++++
 src/modules/Home/HomeContainer.tsx            | 268 +++++++++++-------
 src/pages/_document.tsx                       |   7 +-
 8 files changed, 262 insertions(+), 111 deletions(-)
 create mode 100644 src/components/DonationModal/DonationModal.tsx

diff --git a/.env.example b/.env.example
index 06e6cff..592ca75 100644
--- a/.env.example
+++ b/.env.example
@@ -1,3 +1,10 @@
 SHOW_VERSION=""
 LANGUAGE=""
 NEXT_PUBLIC_GA_TRACKING_ID=
+
+WALLET_ADDRESS=""
+
+BOT_INVITATION_URL=""
+
+DISCORD_SERVER_URL=""
+DOCS_URL=""
diff --git a/next.config.js b/next.config.js
index 194a62d..d69d4f2 100644
--- a/next.config.js
+++ b/next.config.js
@@ -14,6 +14,7 @@ const nextConfig = {
     docsUrl: process.env.DOCS_URL || 'https://docs.mocha-bot.xyz/',
     discordServerUrl:
       process.env.DISCORD_SERVER_URL || 'https://discord.mocha-bot.xyz/',
+    walletAddress: process.env.WALLET_ADDRESS || '0x0',
   },
 };
 
diff --git a/package.json b/package.json
index 110803f..f2ccf51 100644
--- a/package.json
+++ b/package.json
@@ -23,13 +23,16 @@
     "next-i18next": "13.2.2",
     "nextjs-google-analytics": "2.1.0",
     "react": "18.2.0",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "18.2.0",
-    "react-i18next": "12.2.2"
+    "react-i18next": "12.2.2",
+    "react-icons": "^5.2.1"
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "3.4.2",
     "@types/node": "18.0.0",
     "@types/react": "18.2.47",
+    "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "18.2.18",
     "@typescript-eslint/eslint-plugin": "5.10.1",
     "@typescript-eslint/parser": "5.10.1",
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index bb56052..b1df011 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -9,6 +9,14 @@
     "invite_button_arrow_label": "Click me",
     "docs_button_label": "Docs",
     "discord_button_label": "Discord",
-    "supported_by": "Supported by"
+    "supported_by": "Supported by",
+    "donate": {
+      "title": "Donate",
+      "description": "Help us keep the bot alive, enabling us to add more features.",
+      "modal": [
+        "Mocha is built by a small team and we will always add more features and updates. If you want to donate, your donation will help us to improve our services.",
+        "Thank you very much and have fun, hope you like it!"
+      ]
+    }
   }
 }
diff --git a/public/locales/id/common.json b/public/locales/id/common.json
index 69eb9fd..a3b9100 100644
--- a/public/locales/id/common.json
+++ b/public/locales/id/common.json
@@ -9,6 +9,14 @@
     "invite_button_arrow_label": "Klik aku",
     "docs_button_label": "Dokumentasi",
     "discord_button_label": "Discord",
-    "supported_by": "Didukung oleh"
+    "supported_by": "Didukung oleh",
+    "donate": {
+      "title": "Donasi",
+      "description": "Bantu kami menjaga keberlanjutan bot ini, sehingga kami dapat menambahkan lebih banyak fitur."
+      "modal": [
+        "Mocha dibangun oleh tim kecil dan kami akan selalu menambahkan fitur dan pembaruan lebih lanjut. Jika Anda ingin berdonasi, sumbangan Anda akan membantu kami meningkatkan layanan kami.",
+        "Terima kasih banyak dan selamat bersenang-senang, semoga Anda menyukainya!"
+      ]
+    }
   }
 }
diff --git a/src/components/DonationModal/DonationModal.tsx b/src/components/DonationModal/DonationModal.tsx
new file mode 100644
index 0000000..655d946
--- /dev/null
+++ b/src/components/DonationModal/DonationModal.tsx
@@ -0,0 +1,65 @@
+import { CopyIcon } from '@chakra-ui/icons';
+import {
+  Flex,
+  IconButton,
+  Kbd,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  useClipboard,
+} from '@chakra-ui/react';
+import { useTranslation } from 'next-i18next';
+import { FaCheck } from 'react-icons/fa';
+
+interface DonationModalProps {
+  walletAddress: string;
+  modal: {
+    isOpen: boolean;
+    onClose: () => void;
+  };
+}
+
+function DonationModal(props: DonationModalProps) {
+  const {
+    walletAddress,
+    modal: { isOpen, onClose },
+  } = props;
+  const { t } = useTranslation();
+  const { onCopy, hasCopied } = useClipboard(walletAddress);
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>{t('common:home.donate.title')}</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Flex gap='16px' flexDirection='column'>
+            {t('common:home.donate.modal', { returnObjects: true }).map(
+              (item) => (
+                <Text key={`donate-modal-${item}`}>{item}</Text>
+              ),
+            )}
+            <Flex gap='8px' flexDirection='row'>
+              <Kbd px='4px' alignContent='center' w='100%'>
+                eth: {walletAddress}
+              </Kbd>
+              <IconButton
+                aria-label='Copy Address'
+                icon={hasCopied ? <FaCheck /> : <CopyIcon />}
+                onClick={onCopy}
+              />
+            </Flex>
+          </Flex>
+        </ModalBody>
+        <ModalFooter />
+      </ModalContent>
+    </Modal>
+  );
+}
+
+export default DonationModal;
diff --git a/src/modules/Home/HomeContainer.tsx b/src/modules/Home/HomeContainer.tsx
index a0162ca..bcb7c03 100644
--- a/src/modules/Home/HomeContainer.tsx
+++ b/src/modules/Home/HomeContainer.tsx
@@ -12,10 +12,14 @@ import {
   Stack,
   Text,
   useColorModeValue,
+  useDisclosure,
   VStack,
 } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
 import getConfig from 'next/config';
+import { GiTwoCoins } from 'react-icons/gi';
+
+import DonationModal from '@/components/DonationModal/DonationModal';
 
 const { publicRuntimeConfig } = getConfig();
 
@@ -34,121 +38,171 @@ const Arrow = createIcon({
 
 export function HomeContainer() {
   const { t } = useTranslation();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const subDirection: {
+    href: string;
+    name: string;
+  }[] = [
+    {
+      href: publicRuntimeConfig.docsUrl,
+      name: t('common:home.docs_button_label'),
+    },
+    {
+      href: publicRuntimeConfig.discordServerUrl,
+      name: t('common:home.discord_button_label'),
+    },
+  ];
 
   return (
-    <Container maxW='3xl' h='100vh'>
-      <Stack
-        as={Box}
-        textAlign='center'
-        spacing={{ base: 8, md: 14 }}
-        py={{ base: 20, md: 36 }}
-        justifyContent='center'
-        h='full'>
-        <Heading
-          fontWeight={600}
-          fontSize={{ base: '3xl', sm: '4xl', md: '6xl' }}
-          lineHeight='110%'>
-          {t('common:home.tag_one')} <br />
-          <Text as='span' color='yellow.600'>
-            {t('common:home.tag_two')}
-          </Text>
-        </Heading>
-        <Text color='gray.500'>{t('common:home.description')}</Text>
-        <VStack spacing={2} alignSelf='center'>
-          <Box position='relative' w='100%'>
-            <Link
-              href={publicRuntimeConfig.botInvitationUrl}
-              isExternal
-              _hover={{ textDecoration: 'none' }}>
+    <>
+      <Container maxW='3xl' h='100vh'>
+        <Stack
+          as={Box}
+          textAlign='center'
+          spacing={{ base: 8, md: 14 }}
+          py={{ base: 24, md: 24 }}
+          h='full'>
+          <Heading
+            fontWeight={600}
+            fontSize={{ base: '2xl', sm: '3xl', md: '5xl' }}
+            lineHeight='110%'>
+            {t('common:home.tag_one')} <br />
+            <Text as='span' color='yellow.600'>
+              {t('common:home.tag_two')}
+            </Text>
+          </Heading>
+          <Text color='gray.700'>{t('common:home.description')}</Text>
+          <Flex
+            justifyContent='space-between'
+            flexDirection='column'
+            gap='8px'
+            h='100%'>
+            <VStack
+              spacing={2}
+              alignSelf='center'
+              w={{ base: '100%', md: 'auto' }}>
+              <Box position='relative' w='100%'>
+                <Link
+                  href={publicRuntimeConfig.botInvitationUrl}
+                  isExternal
+                  _hover={{ textDecoration: 'none' }}>
+                  <Button
+                    w='100%'
+                    bg='yellow.700'
+                    color='white'
+                    rounded='full'
+                    px={6}
+                    _hover={{
+                      bg: 'yellow.800',
+                    }}
+                    _focus={{ bg: 'yellow.900' }}>
+                    {t('common:home.invite_button_label')}
+                  </Button>
+                </Link>
+                <Box display={{ base: 'none', md: 'block' }}>
+                  <Icon
+                    as={Arrow}
+                    color={useColorModeValue('gray.800', 'gray.300')}
+                    w={71}
+                    position='absolute'
+                    right={-71}
+                    top='10px'
+                  />
+                  <Text
+                    fontSize='lg'
+                    fontFamily='Caveat'
+                    position='absolute'
+                    right='-90px'
+                    top='-15px'
+                    transform='rotate(10deg)'>
+                    {t('common:home.invite_button_arrow_label')}
+                  </Text>
+                </Box>
+              </Box>
+              <SimpleGrid columns={{ base: 1, md: 2 }} spacing={2} w='100%'>
+                {subDirection.map((item) => (
+                  <Link
+                    key={item.name}
+                    href={item.href}
+                    isExternal
+                    _hover={{ textDecoration: 'none' }}>
+                    <Button
+                      w='100%'
+                      variant='outline'
+                      rounded='full'
+                      px={6}
+                      borderColor='yellow.700'
+                      _hover={{
+                        borderColor: 'yellow.700',
+                      }}>
+                      {item.name}
+                    </Button>
+                  </Link>
+                ))}
+              </SimpleGrid>
+            </VStack>
+            <Box>
               <Button
-                w='100%'
-                bg='yellow.700'
-                color='white'
+                w={{ base: '100%', md: 'auto' }}
+                variant='outline'
                 rounded='full'
                 px={6}
+                gap='8px'
+                bg='yellow.700'
+                borderColor='yellow.700'
+                textColor='white'
                 _hover={{
-                  bg: 'yellow.800',
+                  borderColor: 'white',
                 }}
-                _focus={{ bg: 'yellow.900' }}>
-                {t('common:home.invite_button_label')}
+                onClick={onOpen}>
+                <GiTwoCoins color='#FFD700' />
+                {t('common:home.donate.title')}
               </Button>
-            </Link>
-            <Box display={{ base: 'none', md: 'block' }}>
-              <Icon
-                as={Arrow}
-                color={useColorModeValue('gray.800', 'gray.300')}
-                w={71}
-                position='absolute'
-                right={-71}
-                top='10px'
-              />
-              <Text
-                fontSize='lg'
-                fontFamily='Caveat'
-                position='absolute'
-                right='-90px'
-                top='-15px'
-                transform='rotate(10deg)'>
-                {t('common:home.invite_button_arrow_label')}
-              </Text>
             </Box>
-          </Box>
-          <SimpleGrid columns={{ base: 1, md: 2 }} spacing={2}>
-            <Link
-              href={publicRuntimeConfig.docsUrl}
-              isExternal
-              _hover={{ textDecoration: 'none' }}>
-              <Button w='100%' variant='outline' rounded='full' px={6}>
-                {t('common:home.docs_button_label')}
-              </Button>
-            </Link>
-            <Link
-              href={publicRuntimeConfig.discordServerUrl}
-              isExternal
-              _hover={{ textDecoration: 'none' }}>
-              <Button w='100%' variant='outline' rounded='full' px={6}>
-                {t('common:home.discord_button_label')}
-              </Button>
-            </Link>
-          </SimpleGrid>
-        </VStack>
-      </Stack>
-      <Box
-        position='absolute'
-        bottom={publicRuntimeConfig.showVersion ? '8' : '10'}
-        left='0'
-        right='0'
-        w='full'
-        justifyContent='center'>
-        <Flex alignItems='center' justifyContent='center'>
-          <Text>{t('common:home.supported_by')}</Text>
-          <Image
-            src='assets/images/logo-mocha.svg'
-            width='30px'
-            height='30px'
-            alt='Mocha Logo'
-            ml='4px'
-            mr='2px'
-          />
-          <Text
-            display='inline'
-            color='blue.400'
-            borderBottomWidth='1px'
-            borderBottomColor='blue.500'>
-            <Link
-              href='https://discord.com/invite/PQnkPABkbd'
-              isExternal
-              _hover={{ textDecoration: 'none' }}>
-              {t('common:mocha_developer')}
-            </Link>
-          </Text>
-        </Flex>
-        {publicRuntimeConfig.showVersion && (
-          <Text fontSize='10px' textAlign='center' mt='2'>
-            {t('common:version')} - {publicRuntimeConfig.clientVersion}
-          </Text>
-        )}
-      </Box>
-    </Container>
+          </Flex>
+        </Stack>
+        <Box
+          position='absolute'
+          bottom={publicRuntimeConfig.showVersion ? '8' : '10'}
+          left='0'
+          right='0'
+          w='full'
+          justifyContent='center'>
+          <Flex alignItems='center' justifyContent='center'>
+            <Text>{t('common:home.supported_by')}</Text>
+            <Image
+              src='assets/images/logo-mocha.svg'
+              width='20px'
+              height='20px'
+              alt='Mocha Logo'
+              ml='4px'
+              mr='2px'
+            />
+            <Text
+              display='inline'
+              color='blue.400'
+              borderBottomWidth='1px'
+              borderBottomColor='blue.500'>
+              <Link
+                href='https://discord.com/invite/PQnkPABkbd'
+                isExternal
+                _hover={{ textDecoration: 'none' }}>
+                {t('common:mocha_developer')}
+              </Link>
+            </Text>
+          </Flex>
+          {publicRuntimeConfig.showVersion && (
+            <Text fontSize='10px' textAlign='center' mt='2'>
+              {t('common:version')} - {publicRuntimeConfig.clientVersion}
+            </Text>
+          )}
+        </Box>
+      </Container>
+      <DonationModal
+        walletAddress={publicRuntimeConfig.walletAddress}
+        modal={{ isOpen, onClose }}
+      />
+    </>
   );
 }
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index d3089d8..1c1f6bd 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -21,7 +21,12 @@ function MyDocument() {
         <meta property='og:locale' content='en_US' key='meta-locale' />
         <meta property='og:url' content='https://mocha.chroma-gaming.xyz/' />
       </Head>
-      <body style={{ fontFamily: 'Nunito Sans, sans-serif', height: '100%' }}>
+      <body
+        style={{
+          fontFamily: 'Nunito Sans, sans-serif',
+          height: '100%',
+          background: '#f6eee3',
+        }}>
         <Main />
         <NextScript />
       </body>