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

@@ -1,3 +1,10 @@
 SHOW_VERSION=""
 LANGUAGE=""
 NEXT_PUBLIC_GA_TRACKING_ID=
+
+WALLET_ADDRESS=""
+
+BOT_INVITATION_URL=""
+
+DISCORD_SERVER_URL=""
+DOCS_URL=""

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',
   },
 };
 

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",

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!"
+      ]
+    }
   }
 }

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!"
+      ]
+    }
   }
 }

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;