Split translations into namespaces. I pray it will works well.

src/components/AccountPage.js

@@ -59,7 +59,7 @@ class AccountPage extends PureComponent<Props> {
                 <Box>
                   <Icon name="upload" />
                 </Box>
-                <Box>{t('send.title')}</Box>
+                <Box>{t('send:title')}</Box>
               </Box>
             </Button>
             <Button primary onClick={() => openModal(MODAL_RECEIVE, { account })}>
@@ -67,7 +67,7 @@ class AccountPage extends PureComponent<Props> {
                 <Box>
                   <Icon name="download" />
                 </Box>
-                <Box>{t('receive.title')}</Box>
+                <Box>{t('receive:title')}</Box>
               </Box>
             </Button>
             <Button
@@ -83,7 +83,7 @@ class AccountPage extends PureComponent<Props> {
         <Box horizontal flow={3}>
           <Box grow>
             <Card
-              title={t('AccountPage.balance')}
+              title={t('account:balance')}
               style={{ height: 435 }}
               alignItems="center"
               justifyContent="center"
@@ -93,12 +93,12 @@ class AccountPage extends PureComponent<Props> {
           </Box>
 
           <Box style={{ width: 300 }}>
-            <Card title={t('AccountPage.receive')} flow={3}>
+            <Card title={t('account:receive')} flow={3}>
               <ReceiveBox path={account.path} address={account.address} />
             </Card>
           </Box>
         </Box>
-        <Card p={0} px={4} title={t('AccountPage.lastOperations')}>
+        <Card p={0} px={4} title={t('account:lastOperations')}>
           <TransactionsList transactions={account.transactions} />
         </Card>
       </Box>

src/components/DashboardPage/AccountsOrder.js

@@ -111,15 +111,15 @@ class AccountsOrder extends Component<Props, State> {
     return [
       {
         key: 'name',
-        label: t('orderAccounts.name'),
+        label: t('accountsOrder:name'),
       },
       {
         key: 'balance',
-        label: t('orderAccounts.balance'),
+        label: t('accountsOrder:balance'),
       },
       {
         key: 'type',
-        label: t('orderAccounts.type'),
+        label: t('accountsOrder:type'),
       },
     ].map(item => ({
       ...item,
@@ -183,7 +183,7 @@ class AccountsOrder extends Component<Props, State> {
         value={sortItems.find(item => item.key === cachedValue)}
       >
         <Text ff="Open Sans|SemiBold" fontSize={4}>
-          {t('global.sortBy')}
+          {t('common:sortBy')}
         </Text>
         <Box
           alignItems="center"
@@ -193,7 +193,7 @@ class AccountsOrder extends Component<Props, State> {
           fontSize={4}
           horizontal
         >
-          <Text color="dark">{t(`orderAccounts.${this.getCurrentValue() || 'balance'}`)}</Text>
+          <Text color="dark">{t(`accountsOrder:${this.getCurrentValue() || 'balance'}`)}</Text>
           <IconAngleDown height={7} width={8} />
         </Box>
       </DropDown>

src/components/DashboardPage/index.js

@@ -137,7 +137,7 @@ class DashboardPage extends PureComponent<Props, State> {
   componentWillMount() {
     this._itemsTimes = itemsTimes.map(item => ({
       ...item,
-      label: this.props.t(`time.${item.key}`),
+      label: this.props.t(`time:${item.key}`),
     }))
   }
 
@@ -214,12 +214,12 @@ class DashboardPage extends PureComponent<Props, State> {
         <Box horizontal alignItems="flex-end">
           <Box>
             <Text color="dark" ff="Museo Sans" fontSize={7}>
-              {t('dashboard.greetings', { name: 'Khalil' })}
+              {t('dashboard:greetings', { name: 'Khalil' })}
             </Text>
             <Text color="grey" fontSize={5} ff="Museo Sans|Light">
               {totalAccounts > 0
-                ? t('dashboard.summary', { count: totalAccounts })
-                : t('dashboard.noAccounts')}
+                ? t('dashboard:summary', { count: totalAccounts })
+                : t('dashboard:noAccounts')}
             </Text>
           </Box>
           <Box ml="auto">
@@ -255,7 +255,7 @@ class DashboardPage extends PureComponent<Props, State> {
             <Box flow={4}>
               <Box horizontal alignItems="flex-end">
                 <Text color="dark" ff="Museo Sans" fontSize={6}>
-                  {t('sidebar.accounts')}
+                  {t('sidebar:accounts')}
                 </Text>
                 <Box ml="auto" horizontal flow={1}>
                   <AccountsOrder />
@@ -289,7 +289,7 @@ class DashboardPage extends PureComponent<Props, State> {
                 ))}
               </Box>
             </Box>
-            <Card p={0} px={4} title={t('dashboard.recentActivity')}>
+            <Card p={0} px={4} title={t('dashboard:recentActivity')}>
               <TransactionsList
                 withAccounts
                 transactions={allTransactions}

src/components/GlobalSearch.js

@@ -64,7 +64,7 @@ class GlobalSearch extends PureComponent<Props, State> {
           <IconSearch height={16} width={16} />
         </Box>
         <Input
-          placeholder={t('global.search')}
+          placeholder={t('common:search')}
           innerRef={input => (this._input = input)}
           onBlur={this.handleBlur}
           onFocus={this.handleFocus}

src/components/IsUnlocked.js

@@ -133,7 +133,7 @@ class IsUnlocked extends Component<Props, State> {
               <Input
                 autoFocus
                 innerRef={(n: any) => (this._input = n)}
-                placeholder={t('IsUnlocked.password')}
+                placeholder={t('common:password')}
                 type="password"
                 onChange={this.handleChangeInput('password')}
                 value={inputValue.password}

src/components/SelectAccount/index.js

@@ -50,7 +50,7 @@ export const SelectAccount = ({ accounts, onChange, value, t }: Props) => (
     renderItem={renderItem}
     keyProp="id"
     items={accounts}
-    placeholder={t('SelectAccount.placeholder')}
+    placeholder={t('common:selectAccount')}
     fontSize={4}
     onChange={onChange}
   />

src/components/SettingsPage/Display.js

@@ -36,11 +36,11 @@ class TabProfile extends PureComponent<Props, State> {
       languages: [
         {
           key: 'en',
-          name: t('language.en'),
+          name: t('language:en'),
         },
         {
           key: 'fr',
-          name: t('language.fr'),
+          name: t('language:fr'),
         },
       ],
     }
@@ -77,7 +77,7 @@ class TabProfile extends PureComponent<Props, State> {
       <form onSubmit={this.handleSubmit}>
         <Card flow={3}>
           <Box flow={1}>
-            <Label>{t('settings.display.language')}</Label>
+            <Label>{t('settings:display.language')}</Label>
             <Select
               onChange={item => this.handleChangeInput('language')(item.key)}
               renderSelected={item => item && item.name}
@@ -87,7 +87,7 @@ class TabProfile extends PureComponent<Props, State> {
           </Box>
           <Box horizontal justifyContent="flex-end">
             <Button primary type="submit">
-              {t('global.save')}
+              {t('common:save')}
             </Button>
           </Box>
         </Card>

src/components/SettingsPage/Profile.js

@@ -97,12 +97,12 @@ class TabProfile extends PureComponent<Props, State> {
               onClick={() => this.handleChangeInput('password.state')(!isPasswordChecked)}
             >
               <CheckBox isChecked={isPasswordChecked} />
-              <div>{t('settings.profile.protectWithPassword')}</div>
+              <div>{t('settings:profile.protectWithPassword')}</div>
             </Box>
           </label>
           {get(inputValue, 'password.state') === true && (
             <Box flow={1}>
-              <Label>{t('settings.profile.password')}</Label>
+              <Label>{t('settings:profile.password')}</Label>
               <Input
                 value={get(inputValue, 'password.value', '')}
                 onChange={this.handleChangeInput('password.value')}
@@ -112,7 +112,7 @@ class TabProfile extends PureComponent<Props, State> {
           )}
           <Box horizontal justifyContent="flex-end">
             <Button primary type="submit">
-              {t('global.save')}
+              {t('common:save')}
             </Button>
           </Box>
         </Card>

src/components/SettingsPage/index.js

@@ -66,49 +66,49 @@ class SettingsPage extends PureComponent<Props, State> {
 
     return (
       <Box flow={6}>
-        <Text fontSize={7}>{t('settings.title')}</Text>
+        <Text fontSize={7}>{t('settings:title')}</Text>
         <Tabs
           index={tab}
           onTabClick={this.handleChangeTab}
           items={[
             {
               key: 'display',
-              title: t('settings.tabs.display'),
+              title: t('settings:tabs.display'),
               render: () => <TabDisplay {...props} />,
             },
             {
               key: 'money',
               isDisabled: true,
-              title: t('settings.tabs.money'),
+              title: t('settings:tabs.money'),
               render: () => <div>{'Monnaie'}</div>,
             },
             {
               key: 'material',
               isDisabled: true,
-              title: t('settings.tabs.material'),
+              title: t('settings:tabs.material'),
               render: () => <div>{'Matériel'}</div>,
             },
             {
               key: 'app',
               isDisabled: true,
-              title: t('settings.tabs.app'),
+              title: t('settings:tabs.app'),
               render: () => <div>{'App (beta)'}</div>,
             },
             {
               key: 'tools',
               isDisabled: true,
-              title: t('settings.tabs.tools'),
+              title: t('settings:tabs.tools'),
               render: () => <div>{'Outils'}</div>,
             },
             {
               key: 'blockchain',
               isDisabled: true,
-              title: t('settings.tabs.blockchain'),
+              title: t('settings:tabs.blockchain'),
               render: () => <div>{'Blockchain'}</div>,
             },
             {
               key: 'profile',
-              title: t('settings.tabs.profile'),
+              title: t('settings:tabs.profile'),
               render: () => <TabProfile {...props} />,
             },
           ]}

src/components/SideBar/index.js

@@ -73,26 +73,26 @@ class SideBar extends PureComponent<Props> {
       <Container bg="white">
         <Box flow={7} pt={8} grow>
           <Box flow={4}>
-            <CapsSubtitle>{t('sidebar.menu')}</CapsSubtitle>
+            <CapsSubtitle>{t('sidebar:menu')}</CapsSubtitle>
             <Box px={4} flow={2}>
               <Item icon={<IconPieChart height={16} width={16} />} linkTo="/">
-                {t('dashboard.title')}
+                {t('dashboard:title')}
               </Item>
               <Item icon={<IconArrowUp height={16} width={16} />} modal={MODAL_SEND}>
-                {t('send.title')}
+                {t('send:title')}
               </Item>
               <Item icon={<IconArrowDown height={16} width={16} />} modal={MODAL_RECEIVE}>
-                {t('receive.title')}
+                {t('receive:title')}
               </Item>
               <Item icon={<IconSettings height={16} width={16} />} linkTo="/settings">
-                {t('settings.title')}
+                {t('settings:title')}
               </Item>
             </Box>
           </Box>
           <Box flow={4} grow pt={1}>
             <CapsSubtitle horizontal alignItems="center">
-              <Box grow>{t('sidebar.accounts')}</Box>
-              <Tooltip render={() => t('addAccount.title')} offset={[0, 1]}>
+              <Box grow>{t('sidebar:accounts')}</Box>
+              <Tooltip render={() => t('addAccount:title')} offset={[0, 1]}>
                 <PlusBtn onClick={() => openModal(MODAL_ADD_ACCOUNT)}>
                   <IconPlus height={14} width={14} />
                 </PlusBtn>

src/components/TopBar.js

@@ -168,14 +168,14 @@ class TopBar extends PureComponent<Props, State> {
               items={[
                 {
                   key: 'profile',
-                  label: t('mainDropdown.editProfile'),
+                  label: t('common:editProfile'),
                   icon: <IconUser height={16} width={16} />,
                 },
                 ...(hasPassword
                   ? [
                       {
                         key: 'lock',
-                        label: t('mainDropdown.lockApplication'),
+                        label: t('common:lockApplication'),
                         icon: <IconUser height={16} width={16} />,
                         onClick: this.handleLock,
                       },

src/components/TransactionsList/index.js

@@ -126,7 +126,7 @@ const Transaction = ({
         }}
       >
         <Box ff="Open Sans" fontSize={3} color="graphite">
-          {tx.balance > 0 ? t('transactionsList.from') : t('transactionsList.to')}
+          {tx.balance > 0 ? t('transactionsList:from') : t('transactionsList:to')}
         </Box>
         <Box
           color="dark"
@@ -198,13 +198,13 @@ class TransactionsList extends Component<Props> {
     return (
       <Box flow={1}>
         <Box horizontal pt={4}>
-          <HeaderCol size={DATE_COL_SIZE}>{t('transactionsList.date')}</HeaderCol>
+          <HeaderCol size={DATE_COL_SIZE}>{t('transactionsList:date')}</HeaderCol>
           {withAccounts && (
-            <HeaderCol size={ACCOUNT_COL_SIZE}>{t('transactionsList.account')}</HeaderCol>
+            <HeaderCol size={ACCOUNT_COL_SIZE}>{t('transactionsList:account')}</HeaderCol>
           )}
-          <HeaderCol grow>{t('transactionsList.address')}</HeaderCol>
+          <HeaderCol grow>{t('transactionsList:address')}</HeaderCol>
           <HeaderCol size={AMOUNT_COL_SIZE} justifyContent="flex-end">
-            {t('transactionsList.amount')}
+            {t('transactionsList:amount')}
           </HeaderCol>
           <HeaderCol size={CONFIRMATION_COL_SIZE} px={0} />
         </Box>

src/components/UpdateNotifier.js

@@ -57,12 +57,12 @@ class UpdateNotifier extends PureComponent<Props> {
       case 'downloaded':
         return (
           <Box horizontal flow={2}>
-            <Text fontWeight="bold">{t('update.newVersionReady')}</Text>
+            <Text fontWeight="bold">{t('update:newVersionReady')}</Text>
             <Text
               style={{ cursor: 'pointer' }}
-              onClick={() => sendEvent('msg', 'updater.quitAndInstall')}
+              onClick={() => sendEvent('msg', 'updater:quitAndInstall')}
             >
-              {t('update.relaunch')}
+              {t('update:relaunch')}
             </Text>
           </Box>
         )

src/components/modals/AddAccount/ImportAccounts.js

@@ -27,7 +27,7 @@ class ImportAccounts extends PureComponent<Props, State> {
     accountsSelected: [],
     accountsName: this.props.accounts.reduce((result, value, index) => {
       result[value.id] = {
-        placeholder: this.props.t(`addAccount.import.placeholder`, {
+        placeholder: this.props.t(`addAccount:placeholder`, {
           index: index + 1,
         }),
       }

src/components/modals/AddAccount/index.js

@@ -45,9 +45,9 @@ const Steps = {
     <form onSubmit={props.onSubmit}>
       <Box flow={3}>
         <Box flow={1}>
-          <Label>{props.t('common.currency')}</Label>
+          <Label>{props.t('common:currency')}</Label>
           <Select
-            placeholder={props.t('common.chooseWalletPlaceholder')}
+            placeholder={props.t('common:chooseWalletPlaceholder')}
             onChange={item => props.onChangeCurrency(item.data)}
             renderSelected={item => item.name}
             items={currencies}
@@ -56,7 +56,7 @@ const Steps = {
         </Box>
         <Box horizontal justifyContent="flex-end">
           <Button primary type="submit">
-            {props.t('addAccount.title')}
+            {props.t('addAccount:title')}
           </Button>
         </Box>
       </Box>
@@ -326,7 +326,7 @@ class AddAccountModal extends PureComponent<Props, State> {
           return (
             <ModalBody onClose={onClose} flow={3}>
               <Text fontSize={6} color="graphite">
-                {t('addAccount.title')}
+                {t('addAccount:title')}
               </Text>
               <Step {...this.getStepProps()} />
             </ModalBody>

src/components/modals/Receive.js

@@ -66,7 +66,7 @@ class ReceiveModal extends PureComponent<Props, State> {
           return (
             <ModalBody onClose={onClose} flow={3}>
               <Text fontSize={4} color="graphite">
-                {t('receive.title')}
+                {t('receive:title')}
               </Text>
               <Box flow={1}>
                 <Label>Account</Label>

src/components/modals/Send.js

@@ -30,7 +30,7 @@ const Steps = {
       }}
     >
       <Box flow={5}>
-        <Text fontSize={6}>{t('send.title')}</Text>
+        <Text fontSize={6}>{t('send:title')}</Text>
         <Box flow={2}>
           <Label>Account to debit</Label>
           <SelectAccount onChange={props.onChangeInput('account')} value={props.value.account} />
@@ -100,10 +100,10 @@ class Send extends PureComponent<Props, State> {
   componentWillMount() {
     const { t } = this.props
     this._items = [
-      { label: t('sendModal.Amount') },
-      { label: t('sendModal.Summary') },
-      { label: t('sendModal.SecureValidation') },
-      { label: t('sendModal.Confirmation') },
+      { label: t('sendModal:Amount') },
+      { label: t('sendModal:Summary') },
+      { label: t('sendModal:SecureValidation') },
+      { label: t('sendModal:Confirmation') },
     ]
   }
 

src/renderer/i18n.js

@@ -7,6 +7,22 @@ import Backend from 'i18next-node-fs-backend'
 import staticPath from 'helpers/staticPath'
 
 i18n.use(Backend).init({
+  ns: [
+    'accountPage',
+    'accountsOrder',
+    'addAccount',
+    'common',
+    'dashboard',
+    'device',
+    'language',
+    'receive',
+    'send',
+    'settings',
+    'sidebar',
+    'time',
+    'transactionsList',
+    'update',
+  ],
   fallbackLng: 'en',
   debug: false,
   backend: {

static/i18n/en/accountPage.yml

@@ -0,0 +1,3 @@
+balance: Balance
+receive: Receive
+lastOperations: Last operations

static/i18n/en/accountsOrder.yml

@@ -0,0 +1,3 @@
+name: Alphabetic
+balance: Balance
+type: Cryptocurrency

static/i18n/en/addAccount.yml

@@ -0,0 +1,3 @@
+title: Add account
+import:
+  placeholder: 'Account {{index}}'

static/i18n/en/common.yml

@@ -0,0 +1,11 @@
+ok: Okay
+cancel: Cancel
+chooseWalletPlaceholder: Choose a wallet...
+currency: Currency
+selectAccount: Select an account
+sortBy: Sort by
+search: Search
+save: Save
+password: Password
+editProfile: Edit profile
+lockApplication: Lock application

static/i18n/en/dashboard.yml

@@ -0,0 +1,6 @@
+title: Dashboard
+greetings: 'Good morning, {{name}}.'
+summary: here is the summary of your account
+summary_plural: 'here is the summary of your {{count}} accounts'
+noAccounts: no accounts
+recentActivity: Recent activity

static/i18n/en/device.yml

@@ -0,0 +1,2 @@
+connected: Connected
+notConnected: Not connected

static/i18n/en/language.yml

@@ -0,0 +1,2 @@
+en: English
+fr: French

static/i18n/en/receive.yml

@@ -0,0 +1 @@
+title: Receive

static/i18n/en/send.yml

@@ -0,0 +1,5 @@
+title: Send
+Amount: Amount
+Summary: Summary
+SecureValidation: Secure validation
+Confirmation: Confirmation

static/i18n/en/settings.yml

@@ -0,0 +1,15 @@
+title: Settings
+tabs:
+  display: Display
+  money: Money
+  material: Material
+  app: App (beta)
+  tools: Tools
+  blockchain: Blockchain
+  profile: Profile
+display:
+  language: Language
+  orderAccounts: Order accounts
+profile:
+  protectWithPassword: Protect local data with a password
+  password: Password

static/i18n/en/sidebar.yml

@@ -0,0 +1,2 @@
+menu: Menu
+accounts: Accounts

static/i18n/en/time.yml

@@ -0,0 +1,4 @@
+day: Day
+week: Week
+month: Month
+year: Year

static/i18n/en/transactionsList.yml

@@ -0,0 +1,6 @@
+date: Date
+account: Account
+address: Address
+amount: Amount
+from: From
+to: To

static/i18n/en/translation.yml

@@ -1,84 +0,0 @@
-common:
-  ok: Okay
-  cancel: Cancel
-  chooseWalletPlaceholder: Choose a wallet...
-  currency: Currency
-language:
-  en: English
-  fr: French
-orderAccounts:
-  name: Alphabetic
-  balance: Balance
-  type: Cryptocurrency
-sidebar:
-  menu: Menu
-  accounts: Accounts
-device:
-  connected: Connected
-  notConnected: Not connected
-dashboard:
-  title: Dashboard
-  greetings: 'Good morning, {{name}}.'
-  summary: here is the summary of your account
-  summary_plural: 'here is the summary of your {{count}} accounts'
-  noAccounts: no accounts
-  recentActivity: Recent activity
-send:
-  title: Send
-receive:
-  title: Receive
-addAccount:
-  title: Add account
-  import:
-    placeholder: 'Account {{index}}'
-settings:
-  title: Settings
-  tabs:
-    display: Display
-    money: Money
-    material: Material
-    app: App (beta)
-    tools: Tools
-    blockchain: Blockchain
-    profile: Profile
-  display:
-    language: Language
-    orderAccounts: Order accounts
-  profile:
-    protectWithPassword: Protect local data with a password
-    password: Password
-SelectAccount:
-  placeholder: Select an account
-AccountPage:
-  balance: Balance
-  receive: Receive
-  lastOperations: Last operations
-update:
-  newVersionReady: A new version is ready to be installed.
-  relaunch: Re-launch app now
-IsUnlocked:
-  password: Password
-sendModal:
-  Amount: Amount
-  Summary: Summary
-  SecureValidation: Secure validation
-  Confirmation: Confirmation
-time:
-  day: Day
-  week: Week
-  month: Month
-  year: Year
-global:
-  sortBy: Sort by
-  search: Search
-  save: Save
-transactionsList:
-  date: Date
-  account: Account
-  address: Address
-  amount: Amount
-  from: From
-  to: To
-mainDropdown:
-  editProfile: Edit profile
-  lockApplication: Lock application

static/i18n/en/update.yml

@@ -0,0 +1,2 @@
+newVersionReady: A new version is ready to be installed.
+relaunch: Re-launch app now