Update components and views to use i18n

Create formatter to format MD in translations Add missed translations and update error messages to use translations Update units tests to use i18n when needed
launchbadge · Sep 18, 2019 · 13c6671 · 13c6671
1 parent 50dd2d2
commit 13c6671
Show file tree

Hide file tree

Showing 133 changed files with 1,238 additions and 646 deletions.
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
         "qrcode.vue": "^1.6.3",
         "ua-parser-js": "^0.7.20",
         "vue": "^2.6.10",
+        "vue-i18n": "^8.14.0",
         "vue-router": "^3.1.3",
         "vuex": "^3.1.1",
         "zxcvbn": "^4.4.2"

diff --git a/src/components/AccountCard.vue b/src/components/AccountCard.vue
@@ -4,22 +4,25 @@
         <div class="content">
             <div class="top">
                 <div class="title">
-                    Account
+                    {{ $t("accountCard.account") }}
                 </div>
                 <div class="subtitle">
                     <span>{{ shard }}.{{ realm }}.</span
                     ><strong>{{ account }}</strong>
                 </div>
             </div>
             <div class="actions">
-                <Tooltip class="action" message="Account QR Code">
+                <Tooltip
+                    class="action"
+                    :message="$t('accountCard.accountQrCode')"
+                >
                     <MaterialDesignIcon
                         class="qr-icon"
                         :icon="mdiQrcode"
                         @click="showQrCode"
                     />
                 </Tooltip>
-                <Tooltip class="action" message="Public Key">
+                <Tooltip class="action" :message="$t('accountCard.publicKey')">
                     <MaterialDesignIcon
                         class="copy-icon"
                         :icon="mdiKey"

diff --git a/src/components/AccountTileButtons.vue b/src/components/AccountTileButtons.vue
@@ -2,20 +2,22 @@
     <div class="tile-grid">
         <!-- TODO: Remove div below when hardware option is ready -->
         <div class="ribbon-container">
-            <div class="coming-soon">Coming Soon!</div>
+            <div class="coming-soon">{{ $t("common.comingSoon") }}</div>
             <AccountTileButton
                 disabled
-                title="Hardware"
-                content="Support for hardware wallets in development"
+                :title="$t('accountTileButtons.hardware')"
+                :content="$t('accountTileButtons.supportForHardwareWallets')"
                 :image="hardwareImage"
                 @click="$emit('click', 'hardware')"
             />
         </div>
         <AccountTileButton
-            title="Software"
-            content="Keystore file, Private key, Mnemonic phrase"
+            :title="$t('accountTileButtons.software')"
+            :content="
+                $t('accountTileButtons.keystoreFilePrivateKeyMnemonicPhrase')
+            "
             :image="softwareImage"
-            note="Not Recommended"
+            :note="$t('accountTileButtons.notRecomended')"
             @click="$emit('click', 'software')"
         />
     </div>

diff --git a/src/components/BalanceCard.vue b/src/components/BalanceCard.vue
@@ -4,14 +4,14 @@
         <div class="content">
             <div class="top">
                 <div class="title">
-                    Balance
+                    {{ $t("balanceCard.balance") }}
                 </div>
                 <div v-if="hasFetchedBalance" class="subtitle" type="string">
                     <div class="hbar-balance">{{ balanceHBarFormatted }} ℏ</div>
                     <div class="usd-balance">{{ balanceUSDFormatted }}</div>
                 </div>
                 <div v-else class="subtitle-null" type="string">
-                    Unknown
+                    {{ $t("balanceCard.unknown") }}
                 </div>
             </div>
             <div class="actions">
@@ -25,7 +25,7 @@
                     v-else
                     class="action"
                     :pinnable="false"
-                    message="Refresh Balance"
+                    :message="$t('balanceCard.refreshBalance')"
                 >
                     <MaterialDesignIcon
                         class="refresh-icon"

diff --git a/src/components/Community.vue b/src/components/Community.vue
@@ -3,10 +3,10 @@
         <div class="wrap">
             <div class="head">
                 <div class="title">
-                    Join MHW Community
+                    {{ $t("community.joinMHWCommunity") }}
                 </div>
                 <div class="subtitle">
-                    Get in the know and see your balance grow (we hope)!
+                    {{ $t("community.getInTheKnow") }}
                 </div>
             </div>
             <div class="icons">

diff --git a/src/components/CustomerSupportLink.vue b/src/components/CustomerSupportLink.vue
@@ -1,7 +1,9 @@
 <template>
     <div class="customer-support-link">
         <div class="customer-support-container" @click="handleButtonClick">
-            <img alt="" :src="serviceBell" /> Customer Support
+            <img alt="" :src="serviceBell" />{{
+                $t("customerSupport.customerSupport")
+            }}
         </div>
         <ModalCustomerService v-model="state.modalCustomerServiceIsOpen" />
     </div>

diff --git a/src/components/FAQs.vue b/src/components/FAQs.vue
@@ -4,57 +4,52 @@
             <div class="page-container">
                 <div class="head">
                     <div class="title">
-                        <div class="title-text">FAQs</div>
+                        <div class="title-text">{{ $t("common.faqs") }}</div>
                         <div class="subtitle-text">
-                            Answers to most frequently asked questions.
+                            {{ $t("faqs.answersToMostFAQs") }}
                         </div>
                     </div>
                     <CustomerSupportLink class="customer-support-link" />
                 </div>
                 <div class="cards">
                     <Accordion>
                         <template v-slot:title>
-                            How do I create a new account?
+                            {{ $t("faqs.howDoICreateANewAccountQuestion") }}
                         </template>
                         <template v-slot:content>
-                            MyHederaWallet (MHW) offers three ways to create a
-                            new H wallet. These are via Keystore file,
-                            Passphrase, or Private Key. Pair the keys with an
-                            account ID to start transacting hbar.
+                            {{ $t("faqs.howDoICreateANewAccountAnswer") }}
                         </template>
                     </Accordion>
                     <Accordion>
                         <template v-slot:title>
-                            Can MHW work with other wallets?
+                            {{ $t("faqs.canMHWWorkWithOtherWalletsQuestion") }}
                         </template>
                         <template v-slot:content>
-                            MHW supports many different wallet types with plans
-                            to include support for hardware wallets in the near
-                            future. We are also open for anyone to use their H
-                            wallets with the appropriate information.
+                            {{ $t("faqs.canMHWWorkWithOtherWalletsAnswer") }}
                         </template>
                     </Accordion>
                     <Accordion>
                         <template v-slot:title>
-                            What does it cost to use MyHbarWallet?
+                            {{ $t("faqs.howCanISendATransactionQuestion") }}
                         </template>
                         <template v-slot:content>
-                            MHW does not charge any fees for interacting with
-                            the Hedera™ API. Hedera™ Hashgraph requires a
-                            transaction fee when interacting with the Hedera™
-                            API. That fee paid in Hbar.
+                            {{ $t("faqs.howCanISendATransactionAnswer") }}
                         </template>
                     </Accordion>
                     <Accordion>
                         <template v-slot:title>
-                            I forgot my passphrase / private key! What can I do?
+                            {{
+                                $t(
+                                    "faqs.iForgotMyPassphrase/PrivateKeyWhatCanIDoQuestion"
+                                )
+                            }}
                         </template>
                         <template v-slot:content>
-                            MHW does not offer support for recovery or reset of
-                            passwords / private keys. We always suggest writing
-                            down private keys and passwords on physical media
-                            for safekeeping. Maybe you saved it on your
-                            computer!
+                            {{
+                                $t(
+                                    "faqs.iForgotMyPassphrase/PrivateKeyWhatCanIDoAnswer"
+                                )
+                            }}
                         </template>
                     </Accordion>
                 </div>

diff --git a/src/components/Features.vue b/src/components/Features.vue
@@ -2,13 +2,17 @@
     <div class="features">
         <div class="wrap">
             <div class="feature-grid">
-                <Feature :image="wallet" title="Join MyHbarWallet">
-                    Access Hedera™ with the #1 Hbar Wallet with an elegant and
-                    easy-to-use interface.
+                <Feature
+                    :image="wallet"
+                    :title="$t('features.joinMyHbarWallet')"
+                >
+                    {{ $t("features.accessHederaTm") }}
                 </Feature>
-                <Feature :image="hardware" title="Hardware Wallet Support">
-                    MHW does not currently support hardware wallets, but all
-                    major hardware wallets are on the roadmap or in development.
+                <Feature
+                    :image="hardware"
+                    :title="$t('features.hardwareWalletSupport')"
+                >
+                    {{ $t("features.mhwCurrentlyOffersSupportFor") }}
                 </Feature>
             </div>
         </div>

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -4,13 +4,13 @@
         <div class="wrapper">
             <div class="links">
                 <router-link :to="{ name: 'privacy-policy' }" class="link">
-                    Privacy
+                    {{ $t("footer.privacy") }}
                 </router-link>
                 <router-link
                     :to="{ name: 'terms-and-conditions' }"
                     class="link"
                 >
-                    Terms
+                    {{ $t("footer.terms") }}
                 </router-link>
                 <a
                     target="_blank"

diff --git a/src/components/FooterTop.vue b/src/components/FooterTop.vue
@@ -1,24 +1,24 @@
 <template>
     <div class="footer-top">
         <div class="section">
-            <div class="title">Discover</div>
+            <div class="title">{{ $t("footerTop.discover") }}</div>
             <div class="item">
                 <router-link :to="{ name: 'convert-units' }" class="link">
-                    Units
+                    {{ $t("footerTop.units") }}
                 </router-link>
             </div>
             <div class="item">
                 <router-link
                     :to="{ name: 'hardware-wallet-affiliates' }"
                     class="link"
                 >
-                    Buy a Hardware Wallet
+                    {{ $t("footerTop.buyAHardwareWallet") }}
                 </router-link>
             </div>
         </div>
         <!-- enable and add affiliates in src/affiliates.ts -->
         <div class="section">
-            <div class="title">Affiliates</div>
+            <div class="title">{{ $t("footerTop.affiliates") }}</div>
             <template v-for="affiliate of affiliates">
                 <div
                     v-if="affiliate.supported"
@@ -43,27 +43,26 @@
                     :to="{ name: 'home', hash: '#about' }"
                     class="link"
                 >
-                    About
+                    {{ $t("common.about") }}
                 </router-link>
             </div>
             <div class="item">
                 <router-link :to="{ name: 'home', hash: '#faqs' }" class="link">
-                    FAQs
+                    {{ $t("common.faqs") }}
                 </router-link>
             </div>
             <div class="item customer-service" @click="handleButtonClick">
-                Customer Support
+                {{ $t("footerTop.customerSupport") }}
             </div>
         </div>
         <div class="section">
             <div class="title">
-                Love
-                <img class="love" src="../assets/heart.svg" />
-                MHW? Donate!
+                <i18n path="footerTop.donate">
+                    <img class="love" src="../assets/heart.svg" />
+                </i18n>
             </div>
             <div class="item">
-                MyHbarWallet is open-source and free to the community. Your
-                donations go a long way towards making that possible.
+                {{ $t("footerTop.MHWIsOpenSourced") }}
             </div>
             <div class="donation">
                 <img class="hbar-icon" :src="hbar" />

diff --git a/src/components/HardwareWalletOffer.vue b/src/components/HardwareWalletOffer.vue
@@ -1,7 +1,9 @@
 <template>
     <div class="hardware-wallet-offer">
         <div class="offer-description">
-            <div class="starting-from">Starting From</div>
+            <div class="starting-from">
+                {{ $t("hardwareWalletOffer.startingFrom") }}
+            </div>
             <div class="cost-container">
                 {{ currency }}<span class="cost">{{ cost }}</span>
             </div>
@@ -12,7 +14,7 @@
                 class="green-link"
                 :href="moreInfo"
             >
-                More information >
+                {{ $t("hardwareWalletOffer.moreInformation") }} >
             </a>
         </div>
         <a :href="moreInfo" rel="noopener" target="_blank">

diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -21,25 +21,27 @@
             </router-link>
             <div class="spacer"></div>
             <div class="links">
-                <router-link to="/" class="link">Home</router-link>
+                <router-link to="/" class="link">{{
+                    $t("common.home")
+                }}</router-link>
                 <router-link
                     v-if="!isAbout"
                     :to="{ name: 'home', hash: '#about' }"
                     class="link"
-                    >About</router-link
+                    >{{ $t("common.about") }}</router-link
                 >
                 <div v-else class="link" @click="handleSameHash('#about')">
-                    About
+                    {{ $t("common.about") }}
                 </div>
                 <router-link
                     v-if="!isFaqs"
                     :to="{ name: 'home', hash: '#faqs' }"
                     class="link"
                 >
-                    FAQs
+                    {{ $t("common.faqs") }}
                 </router-link>
                 <div v-else class="link" @click="handleSameHash('#faqs')">
-                    FAQs
+                    {{ $t("common.faqs") }}
                 </div>
             </div>
             <div
@@ -55,10 +57,14 @@
             />
             <div v-if="state.scrolled" class="button-container">
                 <router-link class="btn" :to="{ name: 'create-account' }">
-                    <Button label="Create Account" compact outline />
+                    <Button
+                        :label="$t('common.createAccount')"
+                        compact
+                        outline
+                    />
                 </router-link>
                 <router-link class="btn" :to="{ name: 'access-my-account' }">
-                    <Button label="Access" compact />
+                    <Button :label="$t('header.access')" compact />
                 </router-link>
             </div>
         </header>