diff --git a/src/actions/WalletActions.js b/src/actions/WalletActions.js index cfc23b12..a17cb3cf 100644 --- a/src/actions/WalletActions.js +++ b/src/actions/WalletActions.js @@ -42,6 +42,9 @@ export type WalletAction = { type: typeof WALLET.SHOW_BETA_DISCLAIMER | typeof WALLET.HIDE_BETA_DISCLAIMER | typeof WALLET.SET_FIRST_LOCATION_CHANGE, } | { type: typeof WALLET.TOGGLE_SIDEBAR, +} | { + type: typeof WALLET.SET_LANGUAGE, + language: string } export const init = (): ThunkAction => (dispatch: Dispatch): void => { @@ -68,6 +71,11 @@ export const toggleSidebar = (): WalletAction => ({ type: WALLET.TOGGLE_SIDEBAR, }); +export const setLanguage = (language: string): WalletAction => ({ + type: WALLET.SET_LANGUAGE, + language, +}); + // This method will be called after each DEVICE.CONNECT action // if connected device has different "passphrase_protection" settings than saved instances // all saved instances will be removed immediately inside DevicesReducer diff --git a/src/actions/constants/wallet.js b/src/actions/constants/wallet.js index 40f0e914..b4213abd 100644 --- a/src/actions/constants/wallet.js +++ b/src/actions/constants/wallet.js @@ -12,4 +12,5 @@ export const HIDE_BETA_DISCLAIMER: 'wallet__hide_beta_disclaimer' = 'wallet__hid export const CLEAR_UNAVAILABLE_DEVICE_DATA: 'wallet__clear_unavailable_device_data' = 'wallet__clear_unavailable_device_data'; -export const TOGGLE_SIDEBAR: 'wallet__toggle_sidebar' = 'wallet__toggle_sidebar'; \ No newline at end of file +export const TOGGLE_SIDEBAR: 'wallet__toggle_sidebar' = 'wallet__toggle_sidebar'; +export const SET_LANGUAGE: 'wallet__set_language' = 'wallet__set_language'; \ No newline at end of file diff --git a/src/reducers/WalletReducer.js b/src/reducers/WalletReducer.js index 35df8b18..23ef6c82 100644 --- a/src/reducers/WalletReducer.js +++ b/src/reducers/WalletReducer.js @@ -13,6 +13,7 @@ import type { Action, RouterLocationState, TrezorDevice } from 'flowtype'; type State = { ready: boolean; online: boolean; + language: string; dropdownOpened: boolean; showBetaDisclaimer: boolean; showSidebar: boolean; @@ -26,6 +27,7 @@ type State = { const initialState: State = { ready: false, online: navigator.onLine, + language: 'en', dropdownOpened: false, firstLocationChange: true, showBetaDisclaimer: false, @@ -119,6 +121,12 @@ export default function wallet(state: State = initialState, action: Action): Sta showBetaDisclaimer: false, }; + case WALLET.SET_LANGUAGE: + return { + ...state, + language: action.language, + }; + default: return state; } diff --git a/src/support/ConnectedIntlProvider.js b/src/support/ConnectedIntlProvider.js new file mode 100644 index 00000000..86adc338 --- /dev/null +++ b/src/support/ConnectedIntlProvider.js @@ -0,0 +1,49 @@ +/* @flow */ +import * as React from 'react'; +import { connect } from 'react-redux'; +import type { MapStateToProps } from 'react-redux'; +import type { State } from 'flowtype'; + +import { IntlProvider, addLocaleData } from 'react-intl'; +import en from 'react-intl/locale-data/en'; +import de from 'react-intl/locale-data/de'; + +import messagesEn from '../../translations/en.json'; +import messagesDe from '../../translations/de.json'; + +addLocaleData([...en, ...de]); + +const messages = { + en: messagesEn, + de: messagesDe, +}; + +type OwnProps = { + children: React.Node +} + +type StateProps = { + locale: string +} + +type Props = StateProps & OwnProps; + +const mapStateToProps: MapStateToProps = (state: State): StateProps => ({ + locale: state.wallet.language, +}); + + +const ReactIntlProvider = ({ children, locale }: Props) => { + console.log(locale); + console.log(messages); + return ( + + {children} + + ); +}; + +export default connect(mapStateToProps, null)(ReactIntlProvider); \ No newline at end of file diff --git a/src/views/index.js b/src/views/index.js index 62221dce..cc8bdc23 100644 --- a/src/views/index.js +++ b/src/views/index.js @@ -5,6 +5,7 @@ import { Provider } from 'react-redux'; import { ConnectedRouter } from 'connected-react-router'; // general +import ConnectedIntlProvider from 'support/ConnectedIntlProvider'; import ErrorBoundary from 'support/ErrorBoundary'; import ImagesPreloader from 'support/ImagesPreloader'; import { getPattern } from 'support/routes'; @@ -35,34 +36,36 @@ import store, { history } from 'store'; const App = () => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); diff --git a/translations/de.json b/translations/de.json new file mode 100644 index 00000000..df1039fa --- /dev/null +++ b/translations/de.json @@ -0,0 +1,4 @@ +{ + "dashboard.selectyourcoin.title": "Willkommen bei react-intl", + "dashboard.selectyourcoin.body": "Zum Loslegen editiere src/App.js." +} diff --git a/translations/en.json b/translations/en.json new file mode 100644 index 00000000..5c2bbefb --- /dev/null +++ b/translations/en.json @@ -0,0 +1,4 @@ +{ + "dashboard.selectyourcoin.title": "Please select your coin EN", + "dashboard.selectyourcoin.body": "You will gain access to receiving & sending selected coin" +} diff --git a/webpack/constants.js b/webpack/constants.js index 21e67444..b7381548 100644 --- a/webpack/constants.js +++ b/webpack/constants.js @@ -8,6 +8,7 @@ const constants: Object = Object.freeze({ BUILD: path.join(ABSOLUTE_BASE, 'build/'), PUBLIC: path.join(ABSOLUTE_BASE, 'public/'), SRC: path.join(ABSOLUTE_BASE, 'src/'), + TRANSLATIONS: path.join(ABSOLUTE_BASE, 'translations/'), PORT: 8081, INDEX: path.join(ABSOLUTE_BASE, 'src/index.html'), TREZOR_CONNECT_ROOT: path.join(ABSOLUTE_BASE, '../trezor-connect/'), @@ -24,10 +25,11 @@ export const TREZOR_CONNECT_FILES: string = path.join(constants.TREZOR_CONNECT_R export const { BUILD, SRC, + TRANSLATIONS, PORT, INDEX, PUBLIC, -}: { BUILD: string, SRC: string, PORT: string, INDEX: string, PUBLIC: string } = constants; +}: { BUILD: string, SRC: string, TRANSLATIONS: string, PORT: string, INDEX: string, PUBLIC: string } = constants; // export const SRC: string = constants.SRC; // export const PORT: string = constants.PORT; // export const INDEX: string = constants.INDEX; diff --git a/webpack/dev.babel.js b/webpack/dev.babel.js index 8d6862c1..b487ed18 100644 --- a/webpack/dev.babel.js +++ b/webpack/dev.babel.js @@ -9,7 +9,7 @@ import WebpackBuildNotifierPlugin from 'webpack-build-notifier'; // import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; import { - SRC, BUILD, PORT, PUBLIC, + SRC, BUILD, PORT, PUBLIC, TRANSLATIONS, } from './constants'; const gitRevisionPlugin = new GitRevisionPlugin(); @@ -79,7 +79,7 @@ module.exports = { { type: 'javascript/auto', test: /\.json/, - exclude: /(node_modules)/, + exclude: [/(node_modules)/, TRANSLATIONS], loader: 'file-loader', query: { outputPath: './data',