feat(network): add translations for NewNetwork component

src/components/layouts/AppLayout.tsx

@@ -67,7 +67,7 @@ const AppLayout: React.FC<Props> = (props: Props) => {
           />
           <Link to={NETWORK}>
             <Button type="primary" icon="plus">
-              Network
+              {t('cmps.app-layout.new-network', 'Network')}
             </Button>
           </Link>
         </Header>

src/components/network/NewNetwork.spec.tsx

@@ -39,9 +39,9 @@ describe('NewNetwork component', () => {
     expect(getByTestId('name')).toHaveValue('');
   });
 
-  it('should have a Create button', () => {
+  it('should have a submit button', () => {
     const { getByTestId } = renderComponent();
-    expect(getByTestId('submit')).toHaveTextContent('Create');
+    expect(getByTestId('submit')).toHaveTextContent('cmps.new-network.btn-create');
   });
 
   it('should display an error if empty name is submitted', () => {

src/components/network/NewNetwork.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, FormEvent } from 'react';
+import { useTranslation } from 'react-i18next';
 import { info } from 'electron-log';
 import { Form, Input, Button, notification } from 'antd';
 import { FormComponentProps } from 'antd/lib/form';
@@ -11,38 +12,42 @@ interface Props extends FormComponentProps {
 const NewNetwork: React.SFC<Props> = ({ form }) => {
   useEffect(() => info('Rendering NewNetwork component'), []);
 
+  const { t } = useTranslation();
   const { addNetwork } = useStoreActions(s => s.network);
 
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     form.validateFields((err, values) => {
-      if (!err) {
+      if (err) {
+        return;
+      }
       addNetwork(values.name).then(() => {
         notification.success({
-            message: (
-              <>
-                Created <b>{values.name}</b> network successfuly
-              </>
-            ),
+          message:
+            t('cmps.new-network.success-msg', 'Created network') + ' ' + values.name,
           top: 48,
         });
       });
-      }
     });
   };
 
   return (
     <div>
-      <h1>Create a new Lightning Network</h1>
+      <h1>{t('cmps.new-network.title', 'Create a new Lightning Network')}</h1>
       <Form onSubmit={handleSubmit}>
-        <Form.Item label="Network Name">
+        <Form.Item label={t('cmps.new-network.name-label', 'Network Name')}>
           {form.getFieldDecorator('name', {
             rules: [{ required: true }],
-          })(<Input placeholder="My Lightning Simnet" data-tid="name" />)}
+          })(
+            <Input
+              placeholder={t('cmps.new-network.name-phldr', 'My Lightning Simnet')}
+              data-tid="name"
+            />,
+          )}
         </Form.Item>
         <Form.Item>
           <Button type="primary" htmlType="submit" data-tid="submit">
-            Create
+            {t('cmps.new-network.btn-create', 'Create')}
           </Button>
         </Form.Item>
       </Form>

src/i18n/locales/en-US.json

@@ -14,5 +14,11 @@
   "cmps.counter.decrement": "Decrement",
   "cmps.counter.increment-odd": "Increment Odd",
   "cmps.counter.increment-async": "Increment Async",
-  "models.counter.increment-async.error": "Increment Async prohibited when count is 3."
+  "models.counter.increment-async.error": "Increment Async prohibited when count is 3.",
+  "cmps.app-layout.new-network": "Network",
+  "cmps.new-network.title": "Create a new Lightning Network",
+  "cmps.new-network.name-label": "Network Name",
+  "cmps.new-network.name-phldr": "My Lightning Simnet",
+  "cmps.new-network.btn-create": "Create",
+  "cmps.new-network.success-msg": "Created network"
 }

src/i18n/locales/es.json

@@ -14,5 +14,11 @@
   "cmps.counter.decrement": "Decremento",
   "cmps.counter.increment-odd": "Incremento impar",
   "cmps.counter.increment-async": "Incremento asincrónico",
-  "models.counter.increment-async.error": "Incremento de asíncrono prohibido cuando el conteo es 3."
+  "models.counter.increment-async.error": "Incremento de asíncrono prohibido cuando el conteo es 3.",
+  "cmps.app-layout.new-network": "Red",
+  "cmps.new-network.title": "Crear una nueva red Lightning",
+  "cmps.new-network.name-label": "Nombre de red",
+  "cmps.new-network.name-phldr": "My Lightning Simnet",
+  "cmps.new-network.btn-create": "Crear",
+  "cmps.new-network.success-msg": "Red creada"
 }