feat: apply translation on components

src/components/Alerts/index.jsx

@@ -2,12 +2,14 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { AppStore } from 'store';
 import Alert from 'components/UI/Alert';
+import { Trans } from 'react-i18next';
 import RefreshIcon from '../../images/icon/refresh.svg';
 
 const alertTypes = {
   noInternet: (
     <Alert type="error">
-      Not connected to the internet <RefreshIcon />
+      <Trans i18nKey="alert_no_internet" />
+      <RefreshIcon />
     </Alert>
   ),
 };

src/components/App.jsx

@@ -7,11 +7,13 @@ import Alerts from './Alerts';
 import ChangeWallet from './ChangeWallet';
 import HowItWorks from './HowItWorks';
 import StoredLedger from './StoredLedger';
+import WhatYouNeed from './WhatYouNeed';
 import SetupOne from './SetupStepOne';
 import SetupTwo from './SetupStepTwo';
 import Mining from './Mining';
 
 const screens = {
+  whatYouNeed: <WhatYouNeed />,
   howItWorks: <HowItWorks />,
   setupOne: <SetupOne />,
   setupTwo: <SetupTwo />,

src/components/CreateWalletBtn/index.jsx

@@ -2,20 +2,22 @@ import { shell } from 'electron';
 import React from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
 import css from './styles.module.scss';
 import arrowIcon from '../../images/arrow-right.png';
 
 const CreateWalletBtn = ({ horizontal = false }) => {
+  const { t } = useTranslation();
   const openLink = e => {
     e.preventDefault();
-    shell.openExternal('https://solana.com/');
+    shell.openExternal('https://solana-example-webwallet.herokuapp.com/');
   };
   return (
     <>
       <div className={cn(css.root, { [css.horizontal]: horizontal })}>
-        <div>Don&apos;t have a wallet?</div>
+        <div>{t('no_wallet')}</div>
         <button type="button" onClick={openLink}>
-          <div>Create a new wallet now</div>
+          <div>{t('create_new_wallet')}</div>
           <img src={arrowIcon} alt="" />
         </button>
       </div>

src/components/Header/index.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import { Logo } from 'components/UI';
+import { useTranslation } from 'react-i18next';
 import { AppStore } from '../../store';
 import ToggleContent from '../ToogleContent';
 import css from './styles.module.scss';
 
 const Header = () => {
+  const { t } = useTranslation();
   const { setScreen, screen } = AppStore;
   const handleChange = hide => () => {
     setScreen('change');
@@ -28,10 +30,10 @@ const Header = () => {
           content={hide => (
             <div className={css.popup}>
               <button type="button" onClick={handleChange(hide)}>
-                Change wallet
+                {t('change_wallet')}
               </button>
               <button type="button" onClick={handleStored(hide)}>
-                Stored ledger
+                {t('stored_ledger')}
               </button>
             </div>
           )}

src/components/Header/styles.module.scss

@@ -10,14 +10,15 @@
 }
 
 .headerMenu {
+  letter-spacing: 2.5px;
   &::after {
     content: '';
     display: inline-block;
     width: 0;
     height: 0;
     border-style: solid;
-    border-width: 8px 5.5px 0 5.5px;
-    margin-left: 5px;
+    border-width: 8px 7px 0 7px;
+    margin-left: 8px;
     border-color: $white transparent transparent transparent;
   }
 }
@@ -28,9 +29,10 @@
   padding: 12px 10px;
   width: 147px;
   button {
+    white-space: nowrap;
     font-size: 12px;
     text-transform: uppercase;
-    line-height: 16px;
+    line-height: 20px;
     letter-spacing: 2.5px;
     color: $primary;
     background: none;

src/components/HowItWorks/index.jsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import { AppStore } from 'store';
+import { useTranslation } from 'react-i18next';
 import CreateWalletBtn from '../CreateWalletBtn';
 import { Button, Typography } from '../UI';
 import img from './assets/img.png';
 import img2x from './assets/[email protected]';
 import css from './styles.module.scss';
 
 const HowItWorks = () => {
+  const { t } = useTranslation();
   const { setScreen } = AppStore;
   const handleNext = () => setScreen('setupOne');
 
@@ -17,18 +19,18 @@ const HowItWorks = () => {
       </div>
       <div className={css.right}>
         <Typography className={css.title} type="title">
-          How It works
+          {t('how_it_works')}
         </Typography>
         <Typography className={css.subttl} type="subttl">
-          Step 1: Connect your wallet.
+          {t('step_1')}
         </Typography>
         <Typography className={css.subttl} type="subttl">
-          Step 2: Choose how many Gigabits of the Ledger you want to store
+          {t('step_2')}
         </Typography>
         <Typography className={css.desc} as="p">
-          The more GB you store the more money you make
+          {t('more_gb')}
         </Typography>
-        <Button onClick={handleNext}>Next</Button>
+        <Button onClick={handleNext}>{t('next')}</Button>
         <div className={css.newWallet}>
           <CreateWalletBtn />
         </div>

src/components/Mining/index.jsx

@@ -2,10 +2,12 @@ import React, { useState, useEffect, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import { Typography, Switch, Card, HelpIcon } from 'components/UI';
 import { AppStore, StatsStore } from 'store';
+import { useTranslation } from 'react-i18next';
 import { CLUSTER_UPDATE_TIMEOUT } from '../../constants';
 import css from './styles.module.scss';
 
 const Mining = () => {
+  const { t } = useTranslation();
   const { stats, replicator, updateStats } = StatsStore;
   const { state } = AppStore;
   const [enabled, setEnabled] = useState(false);
@@ -29,14 +31,14 @@ const Mining = () => {
   return (
     <div>
       <div className={css.header}>
-        <Typography type="title">Mining</Typography>
+        <Typography type="title">{t('mining')}</Typography>
         <Typography className={css.statusTitle} type="subttl">
-          Status:
+          {t('status')}:
         </Typography>
-        <Typography className={css.status}>{state}</Typography>
+        <Typography className={css.status}>{t(state)}</Typography>
         <div className={css.switch}>
           <Switch
-            label={enabled ? 'Enabled:' : 'Disabled:'}
+            label={t(enabled ? 'enabled' : 'disabled')}
             checked={enabled}
             onChange={switchEnabled}
           />
@@ -45,25 +47,25 @@ const Mining = () => {
       <div className={css.cards}>
         <Card>
           <Typography className={css.cardTitle}>
-            Total Supply in SOL <HelpIcon />
+            {t('total_supply')} <HelpIcon />
           </Typography>
           <div className={css.val}>{stats.totalSupply}</div>
         </Card>
         <Card>
           <Typography className={css.cardTitle}>
-            Transaction Count <HelpIcon />
+            {t('tx_count')} <HelpIcon />
           </Typography>
           <div className={css.val}>{stats.transactionCount}</div>
         </Card>
         <Card>
           <Typography className={css.cardTitle}>
-            Total Mined Lamports <HelpIcon />
+            {t('total_mined')} <HelpIcon />
           </Typography>
           <div className={css.val}>{stats.totalMined}</div>
         </Card>
         <Card>
           <Typography className={css.cardTitle}>
-            Recently Mined Lamports <HelpIcon />
+            {t('recently_mined')} <HelpIcon />
           </Typography>
           <div className={css.val}>{stats.newMined}</div>
         </Card>

src/components/SetupStepOne/index.jsx

@@ -2,11 +2,13 @@ import React, { useState } from 'react';
 import { AppStore } from 'store';
 import { Card, Button, Typography, Input } from 'components/UI';
 import CreateWalletBtn from 'components/CreateWalletBtn';
+import { useTranslation, Trans } from 'react-i18next';
 import generateKeys from '../../utils/generateKeys';
 import Squares from '../UI/Squares';
 import css from './styles.module.scss';
 
 const Setup = () => {
+  const { t } = useTranslation();
   const { setScreen, setSecretKey } = AppStore;
   const [seedPhrase, setSeedPhrase] = useState(
     'resemble orient middle honey call bench cluster tornado burger erode render prevent'
@@ -23,25 +25,25 @@ const Setup = () => {
   return (
     <div>
       <Typography className={css.title} type="title">
-        Let&apos;s get you set up!
+        {t('get_setup_up')}
       </Typography>
       <Typography className={css.step}>
-        <b>Step 1 of 2:</b> Connect your wallet.
+        <Trans i18nKey="step_1_of_2" />
       </Typography>
       <Card>
         <form noValidate onSubmit={handleSubmit}>
           <Typography className={css.formTitle} type="cardTitle">
-            enter a valid seed phrase to connect your wallet
+            {t('enter_seed_valid_phrase')}
           </Typography>
           <Input
             value={seedPhrase}
             onChange={handleSeedChange}
-            placeholder="Enter seed phrase"
+            placeholder="{t('enter_seed_phrase')}"
           />
           <Typography className={css.formHint}>
-            Seed phrase should be 12 words in length.
+            {t('seed_phrase_reqs')}
           </Typography>
-          <Button type="submit">Connect wallet</Button>
+          <Button type="submit">{t('connect_wallet')}</Button>
         </form>
       </Card>
       <CreateWalletBtn horizontal />

src/components/SetupStepTwo/index.jsx

@@ -2,36 +2,32 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { Card, Button, Typography } from 'components/UI';
 import { AppStore } from 'store';
-import { DEFAULT_LEDGER_STORAGE_GB } from '../../constants';
+import { useTranslation, Trans } from 'react-i18next';
 import GBSlider from '../GBSlider';
 import Squares from '../UI/Squares';
 import css from './styles.module.scss';
 
 const Setup = () => {
+  const { t } = useTranslation();
   const { setScreen, gb, setGigabites } = AppStore;
   const handleSubmit = () => setScreen('mining');
 
   return (
     <div>
       <Typography className={css.title} type="title">
-        Let&apos;s get you set up!
+        {t('get_setup_up')}
       </Typography>
       <Typography className={css.step}>
-        <b>Step 2 of 2:</b> Next, you need to choose how many GB of the Ledger
-        you want to store. The more you store the bigger the rewards.
+        <Trans i18nKey="step_2_of_2" /> {t('more_gb')}
       </Typography>
       <Card>
         <div>
           <Typography className={css.formTitle} type="cardTitle">
-            GB of ledger to store
+            {t('gb_to_store')}
           </Typography>
           <GBSlider onChange={setGigabites} values={gb.toJS()} />
-          <div className={css.tip}>
-            Pro Tip: Not sure where to start? We suggest starting with{' '}
-            {DEFAULT_LEDGER_STORAGE_GB}
-            gb, you can always increase or decrease at any time.
-          </div>
-          <Button onClick={handleSubmit}>Save</Button>
+          <div className={css.tip}>{t('pro_tip')}</div>
+          <Button onClick={handleSubmit}>{t('save')}</Button>
         </div>
       </Card>
       <Squares />

src/components/StoredLedger/index.jsx

@@ -1,12 +1,14 @@
 import React, { useState } from 'react';
 import { Card, Button, Typography } from 'components/UI';
 import { AppStore } from 'store';
+import { useTranslation } from 'react-i18next';
 import { DEFAULT_LEDGER_STORAGE_GB } from '../../constants';
 import CloseIcon from '../../images/icon/close.svg';
 import GBSlider from '../GBSlider';
 import css from './styles.module.scss';
 
 const StoredLedger = () => {
+  const { t } = useTranslation();
   const { setScreen } = AppStore;
   const [gb, setGb] = useState([DEFAULT_LEDGER_STORAGE_GB]);
   const handleSubmit = () => setScreen('mining');
@@ -15,20 +17,16 @@ const StoredLedger = () => {
   return (
     <div>
       <Typography className={css.title} type="title">
-        gigabites of ledger to store
+        {t('gb_to_store')}
         <button type="button" className={css.close} onClick={close}>
           <CloseIcon width={19} height={19} fill="#fff" />
         </button>
       </Typography>
       <Card>
         <form noValidate onSubmit={handleSubmit}>
           <GBSlider values={gb} onChange={setGb} />
-          <div className={css.tip}>
-            Pro Tip: Not sure where to start? We suggest starting with{' '}
-            {DEFAULT_LEDGER_STORAGE_GB}
-            gb, you can always increase or decrease at any time.
-          </div>
-          <Button type="submit">Save</Button>
+          <div className={css.tip}>{t('pro_tip')}</div>
+          <Button type="submit">{t('save')}</Button>
         </form>
       </Card>
     </div>

src/components/UI/RangeSlider/styles.module.scss

@@ -4,7 +4,7 @@
   border-radius: 3px;
   height: 4px;
   width: 100%;
-  background-color: $white,
+  background-color: $white;
 }
 
 .thumb {

src/components/UI/Squares/styles.module.scss

@@ -6,10 +6,10 @@
     height: 16px;
     &:first-child {
       margin-right: 8px;
-      background: #00A771;
+      background: #00a771;
     }
     &:last-child {
-      background: #C2C1C2;
+      background: #c2c1c2;
     }
   }
 }