diff --git a/package-lock.json b/package-lock.json index 4c2ff60..4d7d6ce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6115,7 +6115,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -6136,12 +6137,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -6156,17 +6159,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -6283,7 +6289,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -6295,6 +6302,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -6309,6 +6317,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -6316,12 +6325,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -6340,6 +6351,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -6420,7 +6432,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -6432,6 +6445,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -6517,7 +6531,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -6553,6 +6568,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -6572,6 +6588,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -6615,12 +6632,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -12513,7 +12532,8 @@ "version": "4.0.8", "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz", "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=", - "dev": true + "dev": true, + "optional": true }, "rx-lite-aggregates": { "version": "4.0.8", @@ -14711,6 +14731,11 @@ "integrity": "sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==", "dev": true }, + "vue-i18n": { + "version": "8.14.1", + "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.14.1.tgz", + "integrity": "sha512-uHzw5GTFyf/TmjJXveSl3L4CG61KI4lvhKOQvx8W4Y8P2LZ3v3l/qw4KRs1C6pWyjkfY9p0rezYNFO5YzMEQ8A==" + }, "vue-loader": { "version": "15.7.0", "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.7.0.tgz", diff --git a/package.json b/package.json index a8fa913..0d6a330 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "vue": "^2.6.10", "vue-clipboard2": "^0.3.0", "vue-element-loading": "^1.1.1", + "vue-i18n": "^8.14.1", "vue-loading-template": "^1.3.2", "vue-qrcode-reader": "^2.0.1", "vue-router": "^3.0.6", diff --git a/src/App.vue b/src/App.vue index 0c121a5..29c6dbc 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,10 +1,25 @@ @@ -24,6 +39,21 @@ export default { name: 'App', components: { Footer + }, + data () { + return { + locale: localStorage.getItem('locale') || 'en' + } + }, + created () { + this.$i18n.locale = this.locale + }, + methods: { + switchLocale (locale) { + this.locale = locale + this.$i18n.locale = locale + localStorage.setItem('locale', locale) + } } } @@ -37,7 +67,7 @@ export default { color: #2c3e50; } #nav { - padding: 30px; + padding: 30px 5px; } #nav a { font-weight: bold; @@ -50,4 +80,22 @@ export default { height: 70px; cursor: pointer; } +.menu-container { + display: inline-table; + position: absolute; + left: 50%; + transform: translate(-50%, 0); +} +.dropdown-container { + display: flex; + align-items: center; + cursor: pointer; +} + +/* on desktop */ +@media only screen and (min-width: 1025px) { + #nav { + padding: 30px; + } +} diff --git a/src/components/Footer.vue b/src/components/Footer.vue index 3879159..749b051 100644 --- a/src/components/Footer.vue +++ b/src/components/Footer.vue @@ -1,7 +1,7 @@ diff --git a/src/components/LibraGrantProgram.vue b/src/components/LibraGrantProgram.vue index d36ff32..7213f78 100644 --- a/src/components/LibraGrantProgram.vue +++ b/src/components/LibraGrantProgram.vue @@ -20,7 +20,7 @@ - A Libracamp grant plan project. + {{ $t('libracampGrantPlan') }} @@ -30,7 +30,7 @@

- This project is participating in the non-profit grant plan of libracamp.com. + {{ $t('libracampGrantPlanDesc') }}

@@ -38,14 +38,14 @@

- Libracamp supports open source projects with 100 coding hours from our lead devs and $2,000. + {{ $t('libracampDesc') }}

- Visit + {{ $t('visit') }} @@ -57,7 +57,7 @@ - to learn more. + {{ $t('toLearnMore') }}

diff --git a/src/components/QRScanner.vue b/src/components/QRScanner.vue index 7a57ee5..8ff8b69 100644 --- a/src/components/QRScanner.vue +++ b/src/components/QRScanner.vue @@ -18,13 +18,13 @@ icon-left="pencil" @click="sendWithManualAddress" > - Send Manually + {{ $t('sendManually') }} - Back + {{ $t('back') }} diff --git a/src/components/Stats.vue b/src/components/Stats.vue index 8ea4405..b2d9152 100644 --- a/src/components/Stats.vue +++ b/src/components/Stats.vue @@ -4,10 +4,10 @@

- {{ wallets ? Number(wallets).toLocaleString() : 'Loading...' }} + {{ wallets ? Number(wallets).toLocaleString() : $t('loading') }}

- Wallets + {{ $t('wallets') }}

@@ -16,10 +16,10 @@

- {{ transactions ? Number(transactions).toLocaleString() : 'Loading...' }} + {{ transactions ? Number(transactions).toLocaleString() : $t('loading') }}

- Transactions + {{ $t('transactions') }}

diff --git a/src/components/Transactions.vue b/src/components/Transactions.vue index 540399c..e52e03f 100644 --- a/src/components/Transactions.vue +++ b/src/components/Transactions.vue @@ -2,7 +2,7 @@
-
Loading transactions ...
+
{{ $t('loadingTransactions') }}
- {{ transaction.event.toUpperCase() }} + {{ transaction.event === 'received' ? $t('received') : $t('sent') }}
- {{ Number(transaction.amount).toLocaleString() }} Coins + {{ Number(transaction.amount).toLocaleString() }} {{ $t('coins') }}
- {{ transaction.event === 'sent' ? 'To address:' : 'From address:' }} + {{ transaction.event === 'sent' ? `${$t('toAddress')}:` : `${$t('fromAddress')}:` }}
{{ transaction.event === 'sent' ? shortAddress(transaction.toAddress) : shortAddress(transaction.fromAddress) }} @@ -39,7 +39,7 @@
- {{ transaction.event === 'sent' ? 'To address:' : 'From address:' }} + {{ transaction.event === 'sent' ? `${$t('toAddress')}:` : `${$t('fromAddress')}:` }}
{{ transaction.event === 'sent' ? transaction.toAddress : transaction.fromAddress }} @@ -49,7 +49,7 @@
- Back + {{ $t('back') }}
diff --git a/src/components/Transfer.vue b/src/components/Transfer.vue index a17716a..ed9e34c 100644 --- a/src/components/Transfer.vue +++ b/src/components/Transfer.vue @@ -4,7 +4,7 @@ :active="isTransfering" spinner="bar-fade-scale" color="#9b67df" - text="Transfering ..." + :text="$t('transfering')" is-full-screen />
@@ -13,24 +13,24 @@
- +
- + @@ -40,10 +40,10 @@ type="is-success" @click="transfer" > - Confirm + {{ $t('confirm') }} - Cancel + {{ $t('cancel') }}
diff --git a/src/components/Wallet.vue b/src/components/Wallet.vue index ead1a45..a3e882f 100644 --- a/src/components/Wallet.vue +++ b/src/components/Wallet.vue @@ -9,9 +9,9 @@ size="is-small" icon-left="cast" > - Hardware wallet + {{ $t('hardwareWallet') }} - +
- Creating your wallet ... + {{ $t('creatingWallet') }}
- Wallet: {{ shortUserAddr }} + {{ $t('wallet') }}: {{ shortUserAddr }} {{ balance | numberWithCommas }}
- Loading ... + {{ $t('loading') }}
@@ -65,7 +65,7 @@ icon="refresh" size="is-small" /> - {{ isQueryBalance ? 'Refreshing ...' : 'Click to refresh' }} + {{ isQueryBalance ? $t('refreshing') : $t('clickToRefresh') }}
@@ -73,19 +73,19 @@ icon-left="send" @click="openSend" > - Send + {{ $t('send') }} - Receive + {{ $t('receive') }} - Transaction History + {{ $t('transactionHistory') }}
@@ -257,14 +257,14 @@ export default { onCopy () { this.$copyText(this.userAddress).then((e) => { this.$toast.open({ - message: 'Copied!', + message: this.$t('copy'), position: 'is-bottom', type: 'is-success' }) }, (e) => { this.$toast.open({ duration: 5000, - message: 'Can\'t copy', + message: this.$t('cantCopy'), position: 'is-bottom', type: 'is-danger' }) diff --git a/src/components/WalletInfo.vue b/src/components/WalletInfo.vue index 84eb016..7068b1d 100644 --- a/src/components/WalletInfo.vue +++ b/src/components/WalletInfo.vue @@ -15,7 +15,7 @@ icon-left="content-copy" @click="copyAddress" > - Copy to clipboard + {{ $t('copyToClipboard') }}
@@ -42,7 +42,7 @@ icon-left="arrow-left" @click="back" > - Back + {{ $t('back') }}
@@ -98,14 +98,14 @@ export default { copyText (text) { this.$copyText(text).then((e) => { this.$toast.open({ - message: 'Copied!', + message: this.$t('copy'), position: 'is-bottom', type: 'is-success' }) }, (e) => { this.$toast.open({ duration: 5000, - message: 'Can\'t copy', + message: this.$t('cantCopy'), position: 'is-bottom', type: 'is-danger' }) diff --git a/src/i18n/english.js b/src/i18n/english.js new file mode 100644 index 0000000..0392ccf --- /dev/null +++ b/src/i18n/english.js @@ -0,0 +1,61 @@ +const english = { + // Global + back: 'Back', + copy: 'Copied!', + cantCopy: 'Can\'t copy!', + loading: 'Loading ...', + libracampGrantPlan: 'A Libracamp grant plan project.', + + // Home (Views) + home: 'Home', + stats: 'Stats', + about: 'About', + blog: 'Blog', + + // About (Views) + libracampGrantPlanDesc: 'This project is participating in the non-profit grant plan of libracamp.com.', + libracampDesc: 'Libracamp supports open source projects with 100 coding hours from our lead devs and $2,000.', + visit: 'Visit', + toLearnMore: 'to learn more.', + + // Wallet (Component) + wallet: 'Wallet', + creatingWallet: 'Creating your wallet ...', + clickToRefresh: 'Click to refresh', + send: 'Send', + receive: 'Receive', + transactionHistory: 'Transaction History', + refreshing: 'Refreshing ...', + hardwareWallet: 'Hardware wallet', + hardwareWalletInfo: 'More information click', + + // Transfer (Component) + sendManually: 'Send Manually', + destinationAddress: 'Destination Address', + amount: 'Amount', + transfering: 'Transfering ...', + confirm: 'Confirm', + cancel: 'Cancel', + + // WalletInfo (Component) + copyToClipboard: 'Copy to clipboard', + shareYourWallet: 'Share your wallet', + + // Transactions (Component) + coins: 'Coins', + sent: 'SENT', + received: 'RECEIVED', + fromAddress: 'From address', + toAddress: 'To address', + loadingTransactions: 'Loading transactions ...', + + // Stats (Component) + wallets: 'Wallets', + transactions: 'Transactions', + + // Footer (Component) + sponsored: 'Sponsored', + by: 'by' +} + +export default english diff --git a/src/i18n/index.js b/src/i18n/index.js new file mode 100644 index 0000000..582edd0 --- /dev/null +++ b/src/i18n/index.js @@ -0,0 +1,14 @@ +import Vue from 'vue' +import VueI18n from 'vue-i18n' + +// Language +import english from './english' +import thai from './thai' + +Vue.use(VueI18n) + +export const i18n = new VueI18n({ + locale: 'en', + fallbackLocale: 'en', + messages: { en: english, th: thai } +}) diff --git a/src/i18n/thai.js b/src/i18n/thai.js new file mode 100644 index 0000000..02aab52 --- /dev/null +++ b/src/i18n/thai.js @@ -0,0 +1,61 @@ +const thai = { + // Global + back: 'กลับ', + copy: 'คัดลอกแล้ว!', + cantCopy: 'ไม่สามารถ คัดลอกได้!', + loading: 'กำลังโหลด ...', + libracampGrantPlan: 'โครงการในแผนมอบทุน ลิบร้าแคมป์', + + // Home (Views) + home: 'หน้าแรก', + stats: 'สถิติ', + about: 'เกี่ยวกับเรา', + blog: 'บล็อก', + + // About (Views) + libracampGrantPlanDesc: 'โครงการนี้เข้าร่วมในแผนการมอบทุนที่ไม่แสวงหากำไรของ libracamp.com', + libracampDesc: 'ลิบร้าแคมป์ สนับสนุนโครงการโอเพ่นซอร์ส โดยช่วยพัฒนาซอฟแวร์ 100 ชั่วโมง จากหัวหน้าทีมนักพัฒนาของลิบร้าแคมป์ และสนับสนุนเงินทุนจำนวน 2000$ (ดอลลาร์สหรัฐ)', + visit: 'เข้าชม', + toLearnMore: 'เพื่อข้อมูลเพิ่มเติม', + + // Wallet (Component) + wallet: 'กระเป๋า', + creatingWallet: 'กำลังสร้างกระเป๋าของคุณ ...', + clickToRefresh: 'คลิ๊ก เพื่ออัพเดท', + refreshing: 'กำลังอัพเดท ...', + send: 'ส่ง', + receive: 'รับ', + transactionHistory: 'ประวัติธุรกรรม', + hardwareWallet: 'กระเป๋าฮาร์ดแวร์', + hardwareWalletInfo: 'ข้อมูลเพิ่มเติม คลิ๊ก', + + // Transfer (Component) + sendManually: 'ส่ง ขั้นสูง', + destinationAddress: 'ที่อยู่ปลายทาง', + amount: 'จำนวน', + transfering: 'กำลังทำการโอน ...', + confirm: 'ยืนยัน', + cancel: 'ยกเลิก', + + // WalletInfo (Component) + copyToClipboard: 'คัดลอก ไปยังคลิปบอร์ด', + shareYourWallet: 'แชร์กระเป๋าของคุณ', + + // Transactions (Component) + coins: 'เหรียญ', + sent: 'ส่ง', + received: 'ได้รับ', + fromAddress: 'จากที่อยู่', + toAddress: 'ถึงที่อยู่', + loadingTransactions: 'กำลังโหลด ธุรกรรม ...', + + // Stats (Component) + wallets: 'กระเป๋า', + transactions: 'ธุรกรรม', + + // Footer (Component) + sponsored: 'สนับสนุน', + by: 'โดย' +} + +export default thai diff --git a/src/main.js b/src/main.js index 8c339a5..22cb0b0 100644 --- a/src/main.js +++ b/src/main.js @@ -1,24 +1,31 @@ import Vue from 'vue' -import App from './App.vue' -import router from './router' -import store from './store' + +// Third-party import Buefy from 'buefy' import VueLoading from 'vue-loading-template' import VueClipboard from 'vue-clipboard2' import SocialSharing from 'vue-social-sharing' +// Styles import 'buefy/dist/buefy.css' import '@/assets/css/main.css' +// Components +import { i18n } from './i18n' +import router from './router' +import store from './store' +import App from './App.vue' + Vue.use(Buefy) +Vue.use(SocialSharing) Vue.use(VueLoading) -VueClipboard.config.autoSetContainer = true // add this line Vue.use(VueClipboard) -Vue.use(SocialSharing) +VueClipboard.config.autoSetContainer = true // add this line Vue.config.productionTip = false new Vue({ + i18n, router, store, render: h => h(App) diff --git a/src/router.js b/src/router.js index 942fd8a..8dae746 100644 --- a/src/router.js +++ b/src/router.js @@ -56,7 +56,15 @@ export default new Router({ { path: '/blog', name: 'Blog', - beforeEnter () { location.href = 'https://medium.com/kulapofficial/the-first-libra-wallet-poc-building-your-own-wallet-and-apis-3cb578c0bd52' } + beforeEnter (route) { + const { locale } = route.query + + if (locale === 'en') { + location.href = 'https://medium.com/kulapofficial/the-first-libra-wallet-poc-building-your-own-wallet-and-apis-3cb578c0bd52' + } else { + location.href = 'https://medium.com/kulapofficial/libra-%E0%B8%A1%E0%B8%B2%E0%B8%A5%E0%B8%AD%E0%B8%87%E0%B9%80%E0%B8%A5%E0%B9%88%E0%B8%99%E0%B8%AA%E0%B8%81%E0%B8%B8%E0%B8%A5%E0%B9%80%E0%B8%87%E0%B8%B4%E0%B8%99%E0%B8%94%E0%B8%B4%E0%B8%88%E0%B8%B4%E0%B8%95%E0%B8%AD%E0%B8%A5%E0%B9%83%E0%B8%AB%E0%B8%A1%E0%B9%88-%E0%B9%82%E0%B8%AD%E0%B8%99%E0%B9%80%E0%B8%87%E0%B8%B4%E0%B8%99%E0%B8%97%E0%B8%B1%E0%B9%88%E0%B8%A7%E0%B9%82%E0%B8%A5%E0%B8%81%E0%B8%A0%E0%B8%B2%E0%B8%A2%E0%B9%83%E0%B8%99%E0%B8%A7%E0%B8%B4%E0%B8%99%E0%B8%B2%E0%B8%97%E0%B8%B5-%E0%B8%84%E0%B9%88%E0%B8%B2%E0%B8%98%E0%B8%A3%E0%B8%A3%E0%B8%A1%E0%B9%80%E0%B8%99%E0%B8%B5%E0%B8%A2%E0%B8%A1%E0%B8%95%E0%B9%88%E0%B8%B3-%E0%B9%82%E0%B8%94%E0%B8%A2-facebook-8517d267717b' + } + } } ] }) diff --git a/src/views/Home.vue b/src/views/Home.vue index cc95211..fd7ff5b 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -3,7 +3,7 @@
libracamp_mini_2x.png - A Libracamp grant plan project. + {{ $t('libracampGrantPlan') }}
diff --git a/src/views/Stats.vue b/src/views/Stats.vue index 7703c0e..fd85564 100644 --- a/src/views/Stats.vue +++ b/src/views/Stats.vue @@ -3,7 +3,7 @@
libracamp_mini_2x.png - A Libracamp grant plan project. + {{ $t('libracampGrantPlan') }}