feat: add rpm help button

mfrederic · Nov 18, 2024 · a9074bc · a9074bc
1 parent 73e912e
commit a9074bc
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 23 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "realt-properties-map-frontend",
-  "version": "1.5.12",
+  "version": "1.6.0",
   "license": "Apache-2.0",
   "scripts": {
     "start": "PORT=3010 react-scripts start",

diff --git a/frontend/src/components/Settings/AppActions.tsx b/frontend/src/components/Settings/AppActions.tsx
@@ -9,9 +9,11 @@ import WalletIcon from '@mui/icons-material/Wallet';
 import SettingsIcon from '@mui/icons-material/Settings';
 import LinkIcon from '@mui/icons-material/Link';
 import CheckIcon from '@mui/icons-material/Check';
+import RecommendIcon from '@mui/icons-material/Recommend';
 import { useCopyUrl } from '../../hooks/useCopyUrl';
 import { useTranslation } from 'react-i18next';
 import { SearchBar } from './SearchBar';
+import HelpPanel from './Help/HelpPanel';
 
 export function AppActions({
   display,
@@ -31,6 +33,11 @@ export function AppActions({
     close: closeMapOptions,
   }] = useDisclosure(false);
 
+  const [helpOpened, {
+    open: openHelp,
+    close: closeHelp,
+  }] = useDisclosure(false);
+
   function onOpenWallets() {
     openWallets();
     closeMapOptions();
@@ -41,33 +48,42 @@ export function AppActions({
     closeWallets();
   }
 
+  function onOpenHelp() {
+    openHelp();
+    closeMapOptions();
+  }
+
   return (
     <>
       {
         display &&
         <>
           <WalletsPanel opened={walletsOpened} close={closeWallets} />
           <MapOptionsPanel opened={mapOptionsOpened} close={closeMapOptions} />
+          <HelpPanel opened={helpOpened} close={closeHelp} />
           {
-          !mapOptionsOpened && !walletsOpened &&
-          <AffixBtn>
-            <Flex align="end" className="ml-2 sm:ml-0">
-              <SearchBar />
-              <AppActionsButton opened={false} open={onCopyUrl} label={t('actions.copyUrl')} color={copied ? 'teal' : ''}>
-                {
-                  !copied
-                    ? <LinkIcon fontSize="large" />
-                    : <CheckIcon fontSize="large" />
-                }
-              </AppActionsButton>
-              <StartTooltip />
-              <AppActionsButton opened={false} open={onOpenWallets} label={t('actions.openWalletsPanel')}>
-                <WalletIcon fontSize="large" />
-              </AppActionsButton>
-              <AppActionsButton opened={false} open={onOpenMapOptions} label={t('actions.openSettingsPanel')}>
-                <SettingsIcon fontSize="large" />
-              </AppActionsButton>
-            </Flex>
+          !mapOptionsOpened && !walletsOpened && !helpOpened &&
+            <AffixBtn>
+              <Flex align="end" className="ml-2 sm:ml-0">
+                <SearchBar />
+                <AppActionsButton opened={false} open={onCopyUrl} label={t('actions.copyUrl')} color={copied ? 'teal' : ''}>
+                  {
+                    !copied
+                      ? <LinkIcon fontSize="large" />
+                      : <CheckIcon fontSize="large" />
+                  }
+                </AppActionsButton>
+                <StartTooltip />
+                <AppActionsButton opened={false} open={onOpenWallets} label={t('actions.openWalletsPanel')}>
+                  <WalletIcon fontSize="large" />
+                </AppActionsButton>
+                <AppActionsButton opened={false} open={onOpenMapOptions} label={t('actions.openSettingsPanel')}>
+                  <SettingsIcon fontSize="large" />
+                </AppActionsButton>
+                <AppActionsButton opened={false} open={onOpenHelp} label={t('actions.openHelpPanel')} color="lime">
+                  <RecommendIcon fontSize="large" />
+                </AppActionsButton>
+              </Flex>
             </AffixBtn>
           }
         </>

diff --git a/frontend/src/components/Settings/Help/HelpPanel.tsx b/frontend/src/components/Settings/Help/HelpPanel.tsx
@@ -0,0 +1,42 @@
+import { Anchor, Button, CopyButton, Flex, Mark, Modal, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import MadeBy from "../../Common/MadeBy";
+
+export default function HelpPanel({
+  opened,
+  close,
+}: {
+  opened: boolean;
+  close: () => void;
+}) {
+  const { t } = useTranslation('common', { keyPrefix: 'help' });
+
+  return (
+    <Modal opened={opened} onClose={close} title={t('title')} centered size="lg">
+      <Flex direction="column" align="center" justify="center" gap="md">
+        <Text>
+          {t('description')}
+        </Text>
+        <Text>
+          {t('github')}
+          <Anchor href="/~https://github.com/mfrederic/realt-properties-map/" target="_blank" rel="noreferrer">GitHub</Anchor>.
+        </Text>
+        <Text>
+          {t('telegram')}
+          <Anchor href="https://t.me/+nqFYq3GTe6lkZDI0" target="_blank" rel="noreferrer">Telegram</Anchor>.
+        </Text>
+        <Text>
+          {t('support1')} <Mark>0x544f04Db543F1Be6A5B59C59a20cEEcb7E9B152C</Mark>. {t('support2')}
+        </Text>
+        <CopyButton value="0x544f04Db543F1Be6A5B59C59a20cEEcb7E9B152C">
+          {({ copied, copy }) => (
+            <Button color={copied ? 'teal' : 'blue'} onClick={copy}>
+              {copied ? 'Copied wallet address' : 'Copy wallet address'}
+            </Button>
+          )}
+        </CopyButton>
+        <MadeBy />
+      </Flex>
+    </Modal>
+  )
+}
diff --git a/frontend/src/i18next/locales/en/common.json b/frontend/src/i18next/locales/en/common.json
@@ -45,7 +45,8 @@
     "cancel": "Cancel",
     "copyUrl": "Copy URL",
     "openWalletsPanel": "Open Wallets Panel",
-    "openSettingsPanel": "Open Settings Panel"
+    "openSettingsPanel": "Open Settings Panel",
+    "openHelpPanel": "Help RPM"
   },
   "settings": {
     "language": "Language",
@@ -76,6 +77,14 @@
       "viewOnGoogleMaps": "View on Google Maps"
     }
   },
+  "help": {
+    "title": "Help RealT Property Map",
+    "description": "RealT Property Map (RPM) is a tool to help you find and manage your RealT properties. It allows you to add wallets and see its properties on the map.",
+    "github": "RPM is an open source community tool, feel free to contribute to the code on ",
+    "telegram": "If you have any questions or suggestions, feel free to contact me on ",
+    "support1": "If you'd like to support the development of RPM, you can donate to the project at the following address ",
+    "support2": "This will help me to maintain the project and add new features."
+  },
   "wallet": {
     "wallets": "Wallets",
     "wallet": "Wallet",

diff --git a/frontend/src/i18next/locales/es/common.json b/frontend/src/i18next/locales/es/common.json
@@ -45,7 +45,8 @@
     "cancel": "Cancelar",
     "copyUrl": "Copiar URL",
     "openWalletsPanel": "Abrir panel de carteras",
-    "openSettingsPanel": "Abrir panel de configuración"
+    "openSettingsPanel": "Abrir panel de configuración",
+    "openHelpPanel": "Ayudar RPM"
   },
   "settings": {
     "language": "Idioma",
@@ -76,6 +77,14 @@
       "viewOnGoogleMaps": "Ver en Google Maps"
     }
   },
+  "help": {
+    "title": "Ayudar RPM",
+    "description": "RealT Property Map (RPM) es una herramienta para ayudarte a encontrar y gestionar tus propiedades de RealT. Te permite añadir carteras y ver sus propiedades en el mapa.",
+    "github": "RPM es una herramienta de código abierto, siénte libre de contribuir al código en ",
+    "telegram": "Si tienes alguna pregunta o sugerencia, no dudes en contactarme en ",
+    "support1": "Si te gustaría apoyar el desarrollo de RPM, puedes donar al proyecto en la siguiente dirección ",
+    "support2": "Esto me ayudará a mantener el proyecto y añadir nuevas funciones."
+  },
   "wallet": {
     "wallets": "Carteras",
     "wallet": "Cartera",

diff --git a/frontend/src/i18next/locales/fr/common.json b/frontend/src/i18next/locales/fr/common.json
@@ -45,7 +45,8 @@
     "cancel": "Annuler",
     "copyUrl": "Copier URL",
     "openWalletsPanel": "Ouvrir la configuration des portefeuilles",
-    "openSettingsPanel": "Ouvrir les paramètres"
+    "openSettingsPanel": "Ouvrir les paramètres",
+    "openHelpPanel": "Aider RPM"
   },
   "settings": {
     "language": "Langue",
@@ -76,6 +77,14 @@
       "viewOnGoogleMaps": "Voir sur Google Maps"
     }
   },
+  "help": {
+    "title": "Aider RPM",
+    "description": "RealT Property Map (RPM) est un outil pour vous aider à trouver et gérer vos propriétés RealT. Il vous permet d'ajouter des portefeuilles et de voir ses propriétés sur la carte.",
+    "github": "RPM est une outil de code open source, n'hésitez pas à contribuer au code sur ",
+    "telegram": "Si vous avez des questions ou des suggestions, n'hésitez pas à me contacter sur ",
+    "support1": "Si vous aimeriez soutenir le développement de RPM, vous pouvez faire un don au projet à l'adresse suivante ",
+    "support2": "Cela me permettra de maintenir le projet et d'ajouter de nouvelles fonctionnalités."
+  },
   "wallet": {
     "wallets": "Portefeuilles",
     "wallet": "Portefeuille",