Feature #554: Misc. translations and footer

config/fallback.json

@@ -84,8 +84,8 @@
   "footer": {
     "enabled": true,
     "content": {
-      "type": "file",
-      "fileName": "footer",
+      "type": "translation",
+      "key": "footer_md",
       "markdown": true
     }
   },

src/assets/content/footer.md

@@ -1,2 +1 @@
 Trading on prediction markets carries a high degree of financial risk to your capital.  Please read our full [Risk Disclaimer](/assets/content/mainnet/RiskDisclaimerPolicy.html), [Privacy Policy](/assets/PrivacyPolicy.html) and [Terms of Service](/assets/content/mainnet/TermsOfService.html) before trading. – [Imprint](/assets/content/mainnet/Imprint.html)
-

src/assets/locales/en/translation.json

@@ -2,6 +2,11 @@
   "loading": "Loading...",
   "application": "the Application",
   "and": "and",
+  "deterministic": "deterministic name",
+  "address": "address",
+  "wallet_display_type": "{{text}} (Click to display {{otherType}})",
+  "footer_md": "Trading on prediction markets carries a high degree of financial risk to your capital.  Please read our full [Risk Disclaimer](/assets/content/mainnet/RiskDisclaimerPolicy.html), [Privacy Policy](/assets/PrivacyPolicy.html) and [Terms of Service](/assets/content/mainnet/TermsOfService.html) before trading. – [Imprint](/assets/content/mainnet/Imprint.html)",
+  "footer_tournament_md": "Olympia tournament is a testnet alpha for the sole purpose of collecting user experience feedback. Due to the stake of OLY as \"play money\" no one will face any financial risks. Please read our full [Privacy Policy](/assets/content/PrivacyPolicy.html), [Cookie Policy](/assets/content/olympia/CookiePolicy.html) and [Terms of Service](/assets/content/olympia/TermsOfService.html) before trading. – [Imprint](/assets/content/olympia/Imprint.html)",
   "header": {
     "markets": "Markets",
     "dashboard": "Dashboard",
@@ -12,7 +17,9 @@
     "connect_wallet": "Connect a Wallet",
     "using_provider": "You are connected via {{provider}}",
     "wrapped_ether_title": "Your balance is calculated as the sum of your ETH and Wrapped-ETH balance.",
-    "wrapped_ether_weth_link": "What's wrapped Ether?"
+    "wrapped_ether_weth_link": "What's wrapped Ether?",
+    "cookie_disclaimer": "We use cookies to give you the best experience and to help improve our website. Please read our <1>Cookie Policy</1> for more information. By clicking \"Accept Cookies\", you agree to the storing of cookies on your device to enhance site navigation and analyze site usage.",
+    "accept_cookies": "Accept Cookies"
   },
   "markets": {
     "list_title": "Market Overview",
@@ -193,5 +200,8 @@
       "badge": "Badge",
       "reward": "Reward"
     }
+  },
+  "form": {
+    "field_required": "This field is required"
   }
 }

src/components/CookieBanner/index.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { Trans, withNamespaces } from 'react-i18next'
 import cn from 'classnames/bind'
 import autobind from 'autobind-decorator'
 import CSSTransition from 'react-transition-group/CSSTransition'
@@ -98,7 +99,7 @@ class CookieBanner extends Component {
   }
 
   render() {
-    const { options, selected } = this.props
+    const { options, selected, t } = this.props
     const { shown } = this.state
 
     const animationClassNames = {
@@ -112,9 +113,11 @@ class CookieBanner extends Component {
       <CSSTransition in={shown} classNames={animationClassNames} timeout={300} unmountOnExit>
         <div className={cx('cookieBar')}>
           <p>
-            We use cookies to give you the best experience and to help improve our website. Please read our{' '}
-            <a href="/assets/content/CookiePolicy.html">Cookie Policy</a> for more information. By clicking &quot;Accept Cookies,&quot; you agree
-            to the storing of cookies on your device to enhance site navigation and analyze site usage.
+            <Trans key="header.cookie_disclaimer">
+              We use cookies to give you the best experience and to help improve our website. Please read our
+              <a href="/assets/content/CookiePolicy.html">Cookie Policy</a> for more information. By clicking &quot;Accept Cookies,&quot; you agree
+              to the storing of cookies on your device to enhance site navigation and analyze site usage.
+            </Trans>
           </p>
           <div className={cx('settings')}>
             <span className={cx('options')}>
@@ -131,7 +134,7 @@ class CookieBanner extends Component {
               ))}
             </span>
             <button type="button" onClick={this.handleAcceptCookies} className={cx('button', 'accept')}>
-              Accept Cookies
+              {t('header.accept_cookies')}
             </button>
           </div>
           <div className={cx('closeButton')} onClick={this.handleClose} />
@@ -148,6 +151,7 @@ CookieBanner.propTypes = {
       initFunc: PropTypes.func.isRequired,
     }),
   ).isRequired,
+  t: PropTypes.func.isRequired,
   selected: PropTypes.arrayOf(PropTypes.string),
   display: PropTypes.bool,
   onChange: PropTypes.func,
@@ -163,4 +167,4 @@ CookieBanner.defaultProps = {
   onHide: () => {},
 }
 
-export default CookieBanner
+export default withNamespaces()(CookieBanner)

src/components/Footer/index.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { withNamespaces } from 'react-i18next'
 import PropTypes from 'prop-types'
 import Markdown from 'react-markdown'
 import cn from 'classnames/bind'
@@ -9,7 +10,7 @@ import style from './Footer.scss'
 const cx = cn.bind(style)
 const {
   content: {
-    type, fileName, source, markdown,
+    type, fileName, key, source, markdown,
   },
 } = getFeatureConfig('footer')
 
@@ -22,6 +23,8 @@ const Footer = ({ version }) => {
     text = source
   } else if (type === 'file') {
     text = footerText
+  } else if (type === 'translation') {
+    text = t(key)
   }
 
   return (
@@ -53,4 +56,4 @@ Footer.defaultProps = {
   version: '',
 }
 
-export default Footer
+export default withNamespaces()(Footer)

src/components/Form/MandatoryHint.js

@@ -1,15 +1,17 @@
 import React from 'react'
+import PropTypes from 'prop-types'
+import { withNamespaces } from 'react-i18next'
 import classnames from 'classnames/bind'
 import Tooltip from 'rc-tooltip'
 
 import styles from './MandatoryHint.scss'
 
 const cx = classnames.bind(styles)
 
-const MandatoryHint = () => (
+const MandatoryHint = ({ t }) => (
   <Tooltip overlay={(
     <span>
-This field is required
+      {t('form.field_required')};
     </span>
   )}
   >
@@ -19,4 +21,8 @@ This field is required
   </Tooltip>
 )
 
-export default MandatoryHint
+MandatoryHint.propTypes = {
+  t: PropTypes.func.isRequired,
+}
+
+export default withNamespaces()(MandatoryHint)

src/components/WalletAddress/index.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import { withNamespaces } from 'react-i18next'
 import classNames from 'classnames/bind'
 import PropTypes from 'prop-types'
 
@@ -42,13 +43,13 @@ class WalletAddress extends Component {
   render() {
     const { showAddress } = this.state
 
-    const changeToVarText = showAddress ? 'deterministic name' : 'address'
+    const changeToVarText = showAddress ? 'deterministic' : 'address'
     const text = this.getText()
     return (
       <Span
         className={cx('walletAddress')}
         onClick={this.onAddressClick}
-        title={`${text} (Click to see ${changeToVarText})`}
+        title={t('wallet_display_type', { text, otherType: changeToVarText })}
       >
         {text}
       </Span>
@@ -57,7 +58,8 @@ class WalletAddress extends Component {
 }
 
 WalletAddress.propTypes = {
+  t: PropTypes.func.isRequired,
   address: PropTypes.string,
 }
 
-export default WalletAddress
+export default withNamespaces()(WalletAddress)