Skip to content
This repository has been archived by the owner on Mar 26, 2024. It is now read-only.

Commit

Permalink
1. use "pages" option in vue.config.js to separate dapp bundles
Browse files Browse the repository at this point in the history
2. "pages" option leads to vuejs/vue-cli#2463. Upgrade vue related packages to fix it
3. fix autoprefixer warning https://github.com/postcss/autoprefixer/releases/tag/9.6.0
4. draft dapp Data point rewards screen
  • Loading branch information
chochihim committed Aug 28, 2019
1 parent ce1433f commit 1d64720
Show file tree
Hide file tree
Showing 9 changed files with 12,245 additions and 12,657 deletions.
3 changes: 2 additions & 1 deletion .postcssrc.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
module.exports = {
plugins: {
autoprefixer: {
browsers: [
// fix warning https://github.com/postcss/autoprefixer/releases/tag/9.6.0
overrideBrowserslist: [
'> 1%',
'last 2 versions',
'not ie <= 8',
Expand Down
24,671 changes: 12,024 additions & 12,647 deletions package-lock.json

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,13 @@
"vuex-persistedstate": "^2.5.4"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.0-beta.15",
"@vue/cli-plugin-e2e-cypress": "^3.0.0-beta.15",
"@vue/cli-plugin-eslint": "^3.0.0-beta.15",
"@vue/cli-plugin-unit-jest": "^3.0.0-beta.15",
"@vue/cli-service": "^3.0.0-beta.15",
"@vue/cli-plugin-babel": "^3.10.0",
"@vue/cli-plugin-e2e-cypress": "^3.10.0",
"@vue/cli-plugin-eslint": "^3.10.0",
"@vue/cli-plugin-unit-jest": "^3.10.0",
"@vue/cli-service": "^3.10.0",
"@vue/eslint-config-prettier": "^3.0.0-rc.3",
"@vue/test-utils": "^1.0.0-beta.16",
"@vue/test-utils": "^1.0.0-beta.29",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^23.0.1",
"fs-extra": "^7.0.0",
Expand Down
20 changes: 20 additions & 0 deletions public/dapp.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<title>mdtwallet-webapp</title>
<!-- <script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer>
</script>-->
</head>
<body style="background-color:#0a224e">
<noscript>
<strong>We're sorry but MyMDT doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
110 changes: 110 additions & 0 deletions src/components/common/ClaimMDTInDappCard.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
<template>
<md-card class="reward-card">
<div class="card-header">
<div class="label">{{ $t('message.common.unclaimed') }}</div>
<Skeleton v-if="isLoading" />
<div
v-if="!isLoading"
class="md-title"
>
{{ formatMDTAmount(unclaimed) }}
</div>
</div>
<hr >
<md-card-content>
<div class="box">
<div class="box-row label">
{{ $t('message.common.claimed') }}
</div>
<Skeleton v-if="isLoading" />
<div
v-if="!isLoading"
class="box-row amount"
>
{{ formatMDTAmount(claimed) }}
</div>
</div>
</md-card-content>
</md-card>
</template>

<script>
import Skeleton from '@/components/common/Skeleton';
import { formatAmount } from '@/utils';
export default {
components: {
Skeleton,
},
props: {
unclaimed: {
type: Number,
default: 0,
},
claimed: {
type: Number,
default: 0,
},
isLoading: {
type: Boolean,
default: false,
},
},
methods: {
formatMDTAmount(amount) {
return formatAmount(amount, { suffix: ' MDT' });
},
},
};
</script>

<style lang="scss" scoped>
.reward-card {
margin: 0.5rem;
border-radius: 8px;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.25);
.card-header {
padding: 1rem;
}
.md-title {
font-size: 2.625rem;
font-weight: bold;
}
.label {
font-size: 0.75rem;
font-weight: 600;
color: #aab1c0;
text-transform: uppercase;
}
hr {
border: solid 1px #eef3f8;
margin: 0 1rem;
}
.md-card-content {
display: flex;
justify-content: center;
padding: 1rem;
.box {
margin: 0 0.25rem;
border-radius: 0.25rem;
flex: 1;
.box-row {
margin: 0.25rem 0;
&.amount {
font-size: 1.25rem;
font-weight: bold;
}
}
}
}
}
</style>
31 changes: 31 additions & 0 deletions src/dapp.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import '@babel/polyfill';
import 'normalize.css';

import Vue from 'vue';
import VueMaterial from 'vue-material';
import 'vue-material/dist/vue-material.min.css';
import 'vue-material/dist/theme/default.css';
import '@/styles/vue-material.scss';
import mixpanel from 'mixpanel-browser';

import App from './App';
import router from './router/dapp';
import i18n from './localization';

Vue.config.productionTip = false;
Vue.use(VueMaterial);

mixpanel.init('c5e652bf9ccc28d929ee1c8184a0f76b');

const app = new Vue({
i18n,
router,
render: h => h(App),
});

router.onReady(() => {
app.$mount('#app');
if (window.Cypress) {
window.app = app;
}
});
20 changes: 20 additions & 0 deletions src/router/dapp.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import Vue from 'vue';
import Router from 'vue-router';
import Meta from 'vue-meta';

import DataPointRewards from '@/screens/dapp/DataPointRewards';

Vue.use(Router);
Vue.use(Meta);

const router = new Router({
mode: 'history',
routes: [
{
path: '/dapp/data-point-rewards',
component: DataPointRewards,
},
],
});

export default router;
21 changes: 21 additions & 0 deletions src/screens/dapp/DataPointRewards.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<template>
<div class="rewards-container">
<ClaimMDTInDappCard />
</div>
</template>

<script>
import ClaimMDTInDappCard from '@/components/common/ClaimMDTInDappCard';
export default {
components: {
ClaimMDTInDappCard,
},
};
</script>

<style lang="scss" scoped>
.rewards-container {
flex: 1;
}
</style>
14 changes: 11 additions & 3 deletions vue.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,17 @@ module.exports = {
return args;
});

config.plugin("html").tap(args => {
args[0].chunksSortMode = "none";
return args;
// Use vue inspect --plugins to find corresponding plugins for each bundle
// and amend it accordingly
['index', 'dapp'].forEach(page => {
config.plugin(`html-${page}`).tap(args => {
args[0].chunksSortMode = "none";
return args;
})
})
},
pages: {
index: 'src/main.js',
dapp: 'src/dapp.js'
}
};

0 comments on commit 1d64720

Please sign in to comment.