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 ( + + + + {t('common:home.donate.title')} + + + + {t('common:home.donate.modal', { returnObjects: true }).map( + (item) => ( + {item} + ), + )} + + + eth: {walletAddress} + + : } + onClick={onCopy} + /> + + + + + + + ); +} + +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 ( - - - - {t('common:home.tag_one')}
- - {t('common:home.tag_two')} - - - {t('common:home.description')} - - - + <> + + + + {t('common:home.tag_one')}
+ + {t('common:home.tag_two')} + + + {t('common:home.description')} + + + + + + + + + + {t('common:home.invite_button_arrow_label')} + + + + + {subDirection.map((item) => ( + + + + ))} + + + - - - - - {t('common:home.invite_button_arrow_label')} - - - - - - - - - - - - - - - {t('common:home.supported_by')} - Mocha Logo - - - {t('common:mocha_developer')} - - - - {publicRuntimeConfig.showVersion && ( - - {t('common:version')} - {publicRuntimeConfig.clientVersion} - - )} - - + + + + + {t('common:home.supported_by')} + Mocha Logo + + + {t('common:mocha_developer')} + + + + {publicRuntimeConfig.showVersion && ( + + {t('common:version')} - {publicRuntimeConfig.clientVersion} + + )} + + + + ); } 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() { - +