Show disclaimer in lang other than English

Closes #545
alephium · Jun 28, 2023 · 545545a · 545545a
1 parent 3d95be3
commit 545545a
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 33 deletions.
diff --git a/locales/en-US/translation.json b/locales/en-US/translation.json
@@ -434,5 +434,7 @@
   "Your Wallet": "Your Wallet",
   "{{ amount }} words entered": "{{ amount }} words entered",
   "{{ number }} selected": "{{ number }} selected",
-  "No NFTs found.": "No NFTs found."
+  "No NFTs found.": "No NFTs found.",
+  "Disclaimer": "Disclaimer",
+  "The wallet is developed in English.<br />Translations in other languages are provided by the Alephium community.<br />In case of doubt, always refer to the English version.": "The wallet is developed in English.<br />Translations in other languages are provided by the Alephium community.<br />In case of doubt, always refer to the English version."
 }
diff --git a/src/components/Inputs/InlineLabelValueInput.tsx b/src/components/Inputs/InlineLabelValueInput.tsx
@@ -16,46 +16,33 @@ You should have received a copy of the GNU Lesser General Public License
 along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Info } from 'lucide-react'
 import { ReactNode } from 'react'
-import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
-import ActionLink from '@/components/ActionLink'
-import { openInWebBrowser } from '@/utils/misc'
-
 interface InlineLabelValueInputProps {
   label: ReactNode
   InputComponent: ReactNode
   description?: string
-  moreInfoLink?: string
+  children?: ReactNode
   className?: string
 }
 
 const InlineLabelValueInput = ({
   label,
   InputComponent,
   description,
-  moreInfoLink,
+  children,
   className
-}: InlineLabelValueInputProps) => {
-  const { t } = useTranslation()
-
-  return (
-    <KeyValueInputContainer className={className}>
-      <KeyContainer>
-        <Label>{label}</Label>
-        {description && <DescriptionContainer>{description}</DescriptionContainer>}
-        {moreInfoLink && (
-          <ActionLinkStyled onClick={() => openInWebBrowser(moreInfoLink)}>
-            <Info size={12} /> {t('More info')}
-          </ActionLinkStyled>
-        )}
-      </KeyContainer>
-      <InputContainer>{InputComponent}</InputContainer>
-    </KeyValueInputContainer>
-  )
-}
+}: InlineLabelValueInputProps) => (
+  <KeyValueInputContainer className={className}>
+    <KeyContainer>
+      <Label>{label}</Label>
+      {description && <DescriptionContainer>{description}</DescriptionContainer>}
+      {children}
+    </KeyContainer>
+    <InputContainer>{InputComponent}</InputContainer>
+  </KeyValueInputContainer>
+)
 
 export default InlineLabelValueInput
 
@@ -88,7 +75,3 @@ const InputContainer = styled.div`
   justify-content: flex-end;
   flex: 1;
 `
-
-const ActionLinkStyled = styled(ActionLink)`
-  gap: 0.3em;
-`
diff --git a/src/modals/SettingsModal/GeneralSettingsSection.tsx b/src/modals/SettingsModal/GeneralSettingsSection.tsx
@@ -16,10 +16,13 @@ You should have received a copy of the GNU Lesser General Public License
 along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { AlertTriangle, Info } from 'lucide-react'
 import { usePostHog } from 'posthog-js/react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
 
+import ActionLink from '@/components/ActionLink'
 import Box from '@/components/Box'
 import HorizontalDivider from '@/components/Dividers/HorizontalDivider'
 import KeyValueInput from '@/components/Inputs/InlineLabelValueInput'
@@ -41,6 +44,7 @@ import {
 import { switchTheme } from '@/storage/settings/settingsStorageUtils'
 import { Currency, Language, ThemeSettings } from '@/types/settings'
 import { links } from '@/utils/links'
+import { openInWebBrowser } from '@/utils/misc'
 import { fiatCurrencyOptions, languageOptions, locktimeInMinutes } from '@/utils/settings'
 
 interface GeneralSettingsSectionProps {
@@ -201,7 +205,18 @@ const GeneralSettingsSection = ({ className }: GeneralSettingsSectionProps) => {
             heightSize="small"
           />
         }
-      />
+      >
+        {language !== 'en-US' && (
+          <Disclaimer
+            data-tooltip-html={t(
+              'The wallet is developed in English.<br />Translations in other languages are provided by the Alephium community.<br />In case of doubt, always refer to the English version.'
+            )}
+            data-tooltip-id="default"
+          >
+            <AlertTriangle size={12} /> <span>{t('Disclaimer')}</span>
+          </Disclaimer>
+        )}
+      </KeyValueInput>
       <HorizontalDivider />
       <KeyValueInput
         label={t('Currency')}
@@ -222,9 +237,12 @@ const GeneralSettingsSection = ({ className }: GeneralSettingsSectionProps) => {
       <KeyValueInput
         label={t('Analytics')}
         description={t('Help us improve your experience!')}
-        moreInfoLink={links.analytics}
         InputComponent={<Toggle toggled={analytics} onToggle={handleAnalyticsToggle} />}
-      />
+      >
+        <ActionLinkStyled onClick={() => openInWebBrowser(links.analytics)}>
+          <Info size={12} /> {t('More info')}
+        </ActionLinkStyled>
+      </KeyValueInput>
       <ModalPortal>
         {isPasswordModelOpen && (
           <CenteredModal title={t('Password')} onClose={() => setIsPasswordModalOpen(false)} focusMode skipFocusOnMount>
@@ -241,3 +259,14 @@ const GeneralSettingsSection = ({ className }: GeneralSettingsSectionProps) => {
 }
 
 export default GeneralSettingsSection
+
+const ActionLinkStyled = styled(ActionLink)`
+  gap: 0.3em;
+`
+
+const Disclaimer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.3em;
+  color: ${({ theme }) => theme.global.highlight};
+`