From 1eab75764d888675b31e58b138af65b311522927 Mon Sep 17 00:00:00 2001 From: Ricardo Akio Kobayashi Date: Tue, 30 Apr 2024 18:13:06 -0300 Subject: [PATCH] 86dtbw2hc - NEON3 - Implement Mobile App Page --- .../src/@types/i18next-resources.d.ts | 7 +++ src/renderer/src/assets/images/appstore.svg | 46 ++++++++++++++++++ src/renderer/src/assets/images/playstore.png | Bin 0 -> 4904 bytes src/renderer/src/components/Sidebar/index.tsx | 3 +- src/renderer/src/constants/urls.ts | 3 ++ src/renderer/src/locales/en/pages.json | 9 +++- .../Settings/SettingsMobileApp/index.tsx | 36 ++++++++++++++ .../SettingsPersonalizationTabContent.tsx | 7 ++- src/renderer/src/routes/pagesRouter.tsx | 5 ++ 9 files changed, 112 insertions(+), 4 deletions(-) create mode 100755 src/renderer/src/assets/images/appstore.svg create mode 100644 src/renderer/src/assets/images/playstore.png create mode 100644 src/renderer/src/constants/urls.ts create mode 100644 src/renderer/src/routes/pages/Settings/SettingsMobileApp/index.tsx diff --git a/src/renderer/src/@types/i18next-resources.d.ts b/src/renderer/src/@types/i18next-resources.d.ts index 1506960fe..30b28a8e3 100644 --- a/src/renderer/src/@types/i18next-resources.d.ts +++ b/src/renderer/src/@types/i18next-resources.d.ts @@ -815,6 +815,7 @@ interface Resources { language: 'Language' theme: 'Theme' releaseNotes: 'Release Notes' + mobileApp: 'Mobile App' } securityOption: { changePassword: 'Change password' @@ -856,6 +857,12 @@ interface Resources { learnMore: 'Learn More' } } + settingsMobileApp: { + title: 'Mobile App' + subtitle: 'Your wallet is available on mobile too!' + descriptionLine1: 'Safely store, view and manage all of your digital assets and multiple wallets in one place.' + descriptionLine2: 'Take advantage of the additional security options on your device to keep your assets safe' + } settingsBackupWallet: { title: 'Backup NEON' description: 'Save a backup file to your computer that will allow you to restore your wallet in the event that you lose access or damage your device.' diff --git a/src/renderer/src/assets/images/appstore.svg b/src/renderer/src/assets/images/appstore.svg new file mode 100755 index 000000000..072b425a1 --- /dev/null +++ b/src/renderer/src/assets/images/appstore.svg @@ -0,0 +1,46 @@ + + Download_on_the_App_Store_Badge_US-UK_RGB_blk_4SVG_092917 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/renderer/src/assets/images/playstore.png b/src/renderer/src/assets/images/playstore.png new file mode 100644 index 0000000000000000000000000000000000000000..131f3acaa252a863c3b694d0f522ea750aebd81c GIT binary patch literal 4904 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 literal 0 HcmV?d00001 diff --git a/src/renderer/src/components/Sidebar/index.tsx b/src/renderer/src/components/Sidebar/index.tsx index 007daccf9..1e3245298 100644 --- a/src/renderer/src/components/Sidebar/index.tsx +++ b/src/renderer/src/components/Sidebar/index.tsx @@ -1,5 +1,5 @@ import { useTranslation } from 'react-i18next' -import { TbDeviceMobile, TbDoorExit, TbHome2, TbSettings, TbStepInto, TbStepOut, TbUsers } from 'react-icons/tb' +import { TbDoorExit, TbHome2, TbSettings, TbStepInto, TbStepOut, TbUsers } from 'react-icons/tb' import { useLogin } from '@renderer/hooks/useLogin' import { ReactComponent as NeonLogoIcon } from '../../assets/images/neon-wallet-compact.svg' @@ -26,7 +26,6 @@ export const Sidebar = (): JSX.Element => { } /> } /> } /> - } /> } /> diff --git a/src/renderer/src/constants/urls.ts b/src/renderer/src/constants/urls.ts new file mode 100644 index 000000000..5813ed45c --- /dev/null +++ b/src/renderer/src/constants/urls.ts @@ -0,0 +1,3 @@ +export const MOBILE_APP_APPSTORE_LINK = 'https://apps.apple.com/my/app/neon-wallet-mobile/id1530111452' +export const MOBILE_APP_PLAYSTORE_LINK = + 'https://play.google.com/store/apps/details?id=io.cityofzion.neon&hl=en_US&gl=US' diff --git a/src/renderer/src/locales/en/pages.json b/src/renderer/src/locales/en/pages.json index 28f40314b..198946452 100644 --- a/src/renderer/src/locales/en/pages.json +++ b/src/renderer/src/locales/en/pages.json @@ -194,7 +194,8 @@ "currency": "Currency", "language": "Language", "theme": "Theme", - "releaseNotes": "Release Notes" + "releaseNotes": "Release Notes", + "mobileApp": "Mobile App" }, "securityOption": { "changePassword": "Change password", @@ -236,6 +237,12 @@ "learnMore": "Learn More" } }, + "settingsMobileApp": { + "title": "Mobile App", + "subtitle": "Your wallet is available on mobile too!", + "descriptionLine1": "Safely store, view and manage all of your digital assets and multiple wallets in one place.", + "descriptionLine2": "Take advantage of the additional security options on your device to keep your assets safe." + }, "settingsBackupWallet": { "title": "Backup NEON", "description": "Save a backup file to your computer that will allow you to restore your wallet in the event that you lose access or damage your device.", diff --git a/src/renderer/src/routes/pages/Settings/SettingsMobileApp/index.tsx b/src/renderer/src/routes/pages/Settings/SettingsMobileApp/index.tsx new file mode 100644 index 000000000..1c9228aed --- /dev/null +++ b/src/renderer/src/routes/pages/Settings/SettingsMobileApp/index.tsx @@ -0,0 +1,36 @@ +import { useTranslation } from 'react-i18next' +import { ReactComponent as AppStore } from '@renderer/assets/images/appstore.svg' +import PlayStore from '@renderer/assets/images/playstore.png' +import { MOBILE_APP_APPSTORE_LINK, MOBILE_APP_PLAYSTORE_LINK } from '@renderer/constants/urls' +import { SettingsLayout } from '@renderer/layouts/Settings' + +export const SettingsMobileApp = () => { + const { t } = useTranslation('pages', { keyPrefix: 'settings.settingsMobileApp' }) + + const appstoreClick = () => { + window.open(MOBILE_APP_APPSTORE_LINK) + } + + const playstoreClick = () => { + window.open(MOBILE_APP_PLAYSTORE_LINK) + } + + return ( + +
+ {t('subtitle')} +
+ {t('descriptionLine1')} + {t('descriptionLine2')} +
+
+ +
+
+
+ +
+
+ + ) +} diff --git a/src/renderer/src/routes/pages/Settings/SettingsPersonalizationTabContent.tsx b/src/renderer/src/routes/pages/Settings/SettingsPersonalizationTabContent.tsx index b9ea96e9a..87952437f 100644 --- a/src/renderer/src/routes/pages/Settings/SettingsPersonalizationTabContent.tsx +++ b/src/renderer/src/routes/pages/Settings/SettingsPersonalizationTabContent.tsx @@ -1,7 +1,7 @@ import { useTranslation } from 'react-i18next' import { BsCash } from 'react-icons/bs' import { MdOutlineListAlt } from 'react-icons/md' -import { Tb3DCubeSphere } from 'react-icons/tb' +import { Tb3DCubeSphere, TbDeviceMobile } from 'react-icons/tb' import { useMatch } from 'react-router-dom' import { SettingsSidebarLink } from './SettingsSidebarLink' @@ -31,6 +31,11 @@ export const SettingsPersonalizationTabContent = () => { icon={} to="/app/settings/personalisation/release-notes" /> + } + to="/app/settings/personalisation/mobile-app" + /> ) diff --git a/src/renderer/src/routes/pagesRouter.tsx b/src/renderer/src/routes/pagesRouter.tsx index 2dfd6f055..26d10b37a 100644 --- a/src/renderer/src/routes/pagesRouter.tsx +++ b/src/renderer/src/routes/pagesRouter.tsx @@ -19,6 +19,7 @@ import { ChangePasswordStep2 } from './pages/Settings/SettingsChangePassword/Cha import { ChangePasswordStep3 } from './pages/Settings/SettingsChangePassword/ChangePasswordStep3' import { SettingsEncryptKeyPage } from './pages/Settings/SettingsEncryptKey' import { SettingsMigrateWalletsPage } from './pages/Settings/SettingsMigrateWallets' +import { SettingsMobileApp } from './pages/Settings/SettingsMobileApp' import { SettingsNetwork } from './pages/Settings/SettingsNetwork' import { SettingsRecoverWallet } from './pages/Settings/SettingsRecoverWallet' import { SettingsReleaseNotesPage } from './pages/Settings/SettingsReleaseNotes' @@ -131,6 +132,10 @@ export const pagesRouter = routeHandler([ path: 'release-notes', element: , }, + { + path: 'mobile-app', + element: , + }, ], }, {