init
This commit is contained in:
Danil Kovtonyuk
commit
44f31f8b9f
402 changed files with 47865 additions and 0 deletions
84
modules/account/modals/DecryptInfo.vue
Normal file
84
modules/account/modals/DecryptInfo.vue
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<template>
|
||||
<div class="modal-card box box-modal">
|
||||
<header class="box-modal-header is-spaced">
|
||||
<div class="box-modal-title">{{ $parent.$t('account.modals.decryptInfo.title') }}</div>
|
||||
<button type="button" class="delete" @click="$emit('close')" />
|
||||
</header>
|
||||
<div class="note">{{ $parent.$t('account.modals.decryptInfo.description') }}</div>
|
||||
<div class="account-decrypt-info">
|
||||
<div class="item">
|
||||
{{ $parent.$t('account.modals.decryptInfo.spent') }}
|
||||
<span class="has-text-weight-bold mr-3">{{ spent }}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
{{ $parent.$t('account.modals.decryptInfo.unSpent') }}
|
||||
<span class="has-text-weight-bold mr-3">{{ unSpent }}</span>
|
||||
</div>
|
||||
<template v-for="(instances, currency) in getStatistic">
|
||||
<div v-for="(amount, instance) in instances" :key="`${amount}_${currency}_${instance}`" class="item">
|
||||
{{ instance }} {{ getSymbol(currency) }}:
|
||||
<span class="has-text-weight-bold mr-3">{{ amount }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="buttons buttons__halfwidth mt-3">
|
||||
<b-button type="is-primary" outlined @click="onClose">
|
||||
{{ $parent.$t('account.modals.decryptInfo.close') }}
|
||||
</b-button>
|
||||
<b-button type="is-primary" @click="handleRedirect">
|
||||
{{ $parent.$t('account.modals.decryptInfo.redirect') }}
|
||||
</b-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { statisticComputed } from '../injectors'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
all: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
spent: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
unSpent: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
...statisticComputed,
|
||||
getStatistic() {
|
||||
const balance = this.statistic.reduce((acc, { currency, amount }) => {
|
||||
if (acc[currency] && acc[currency][amount]) {
|
||||
acc[currency][amount] += 1
|
||||
} else {
|
||||
acc[currency] = {
|
||||
...acc[currency],
|
||||
[amount]: 1
|
||||
}
|
||||
}
|
||||
return acc
|
||||
}, {})
|
||||
|
||||
return balance
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClose() {
|
||||
this.$emit('close')
|
||||
},
|
||||
handleRedirect() {
|
||||
this.$router.push('/')
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
90
modules/account/modals/RecoverAccount.vue
Normal file
90
modules/account/modals/RecoverAccount.vue
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<template>
|
||||
<div class="modal-card box box-modal">
|
||||
<header class="box-modal-header is-spaced">
|
||||
<div class="box-modal-title">{{ $t('account.modals.recoverAccount.title') }}</div>
|
||||
<button type="button" class="delete" @click="$emit('close')" />
|
||||
</header>
|
||||
<div class="note">
|
||||
{{ $t('account.modals.recoverAccount.description') }}
|
||||
</div>
|
||||
<div class="field">
|
||||
<b-input
|
||||
v-model="recoveryKey"
|
||||
type="textarea"
|
||||
class="is-disabled-resize"
|
||||
rows="2"
|
||||
:placeholder="$t('enterRecoveryKey')"
|
||||
:class="{ 'is-warning': hasAndValidKey }"
|
||||
@input="onInput"
|
||||
></b-input>
|
||||
<p v-show="hasAndValidKey" class="help is-warning">
|
||||
{{ $t('account.modals.recoverAccount.warning') }}
|
||||
</p>
|
||||
</div>
|
||||
<b-notification
|
||||
v-if="recoverAccountFromKeyRequest.isError"
|
||||
class="main-notification"
|
||||
type="is-warning"
|
||||
:closable="false"
|
||||
>
|
||||
{{ recoverAccountFromKeyRequest.errorMessage }}
|
||||
</b-notification>
|
||||
<b-button
|
||||
type="is-primary is-fullwidth"
|
||||
:disabled="hasAndValidKey"
|
||||
:loading="recoverAccountFromKeyRequest.isFetching"
|
||||
@click="handleRecoverAccount"
|
||||
>
|
||||
{{ $t('account.modals.recoverAccount.connect') }}
|
||||
</b-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { recoverAccountComputed, recoverAccountMethods } from '../injectors'
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
getNotes: {
|
||||
required: true,
|
||||
type: Function
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
recoveryKey: '',
|
||||
isValidRecoveryKey: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...recoverAccountComputed,
|
||||
hasAndValidKey() {
|
||||
return this.recoveryKey && !this.isValidRecoveryKey
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearState({ key: 'recoverAccountFromKey' })
|
||||
},
|
||||
methods: {
|
||||
...recoverAccountMethods,
|
||||
async handleRecoverAccount() {
|
||||
await this.recoverAccountFromKey({ recoveryKey: this.recoveryKey })
|
||||
this.$emit('close')
|
||||
await this.getNotes()
|
||||
},
|
||||
onInput(recoveryKey) {
|
||||
this.clearState({ key: 'recoverAccountFromKey' })
|
||||
debounce(this.checkPrivateKey, recoveryKey)
|
||||
},
|
||||
checkPrivateKey(recoveryKey) {
|
||||
try {
|
||||
this.$provider.web3.eth.accounts.privateKeyToAccount(recoveryKey)
|
||||
this.isValidRecoveryKey = true
|
||||
} catch {
|
||||
this.isValidRecoveryKey = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
71
modules/account/modals/SessionUpdate.vue
Normal file
71
modules/account/modals/SessionUpdate.vue
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<div class="modal-card-title">{{ $parent.$t('account.modals.checkRecoveryKey.title') }}</div>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<div class="media">
|
||||
<div class="media-content">
|
||||
{{
|
||||
isShow
|
||||
? $parent.$t('account.modals.checkRecoveryKey.inactiveDescription')
|
||||
: $parent.$t('account.modals.checkRecoveryKey.description')
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer v-if="isShow" class="modal-card-foot">
|
||||
<b-button type="is-primary" outlined @click="$emit('close')">
|
||||
{{ $parent.$t('close') }}
|
||||
</b-button>
|
||||
</footer>
|
||||
<footer v-else class="modal-card-foot">
|
||||
<b-button type="is-primary" outlined @click="_onCancel">
|
||||
{{ $parent.$t('account.modals.checkRecoveryKey.no') }}
|
||||
</b-button>
|
||||
<b-button type="is-primary" @click="_onConfirm">
|
||||
{{ $parent.$t('account.modals.checkRecoveryKey.yes') }}
|
||||
</b-button>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
onCancel: {
|
||||
type: Function,
|
||||
required: true
|
||||
},
|
||||
onConfirm: {
|
||||
type: Function,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
isShow: false
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearTimeout(this.timer)
|
||||
},
|
||||
mounted() {
|
||||
this.timer = setTimeout(() => {
|
||||
this.onCancel()
|
||||
this.isShow = true
|
||||
}, 1000 * 60)
|
||||
},
|
||||
methods: {
|
||||
_onCancel() {
|
||||
this.onCancel()
|
||||
this.$emit('close')
|
||||
},
|
||||
_onConfirm() {
|
||||
this.onConfirm()
|
||||
this.$emit('close')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
134
modules/account/modals/SetupAccount.vue
Normal file
134
modules/account/modals/SetupAccount.vue
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
<template>
|
||||
<div class="modal-card box box-modal">
|
||||
<header class="box-modal-header is-spaced">
|
||||
<div class="box-modal-title">{{ $t('account.modals.setupAccount.title') }}</div>
|
||||
<button type="button" class="delete" @click="$emit('close')" />
|
||||
</header>
|
||||
<div class="note">{{ $t('account.modals.setupAccount.description') }}</div>
|
||||
<div class="field">
|
||||
<div class="label-with-buttons">
|
||||
<div class="label">{{ $t('account.modals.setupAccount.label') }}</div>
|
||||
<b-button v-clipboard:copy="recoveryKey" v-clipboard:success="onCopy" type="is-primary-text">
|
||||
{{ $t('copy') }}
|
||||
</b-button>
|
||||
</div>
|
||||
<div class="notice is-recovery-key">
|
||||
<div class="notice__p">{{ recoveryKey }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<b-notification class="main-notification" type="is-info" :closable="false">
|
||||
{{ $t('account.modals.setupAccount.isNotSupportedWithHw') }}
|
||||
</b-notification>
|
||||
<b-checkbox v-model="isSaveOnChain" :disabled="isPartialSupport">{{
|
||||
$t('account.modals.setupAccount.saveOnChain')
|
||||
}}</b-checkbox>
|
||||
<b-checkbox v-if="!isSaveOnChain" v-model="isBackuped">{{
|
||||
$t('account.modals.setupAccount.backedUp')
|
||||
}}</b-checkbox>
|
||||
<b-notification
|
||||
v-if="!isSaveOnChain && warningMessage"
|
||||
class="main-notification"
|
||||
type="is-warning"
|
||||
:closable="false"
|
||||
>
|
||||
{{ warningMessage }}
|
||||
</b-notification>
|
||||
<b-notification
|
||||
v-if="setupAccountRequest.isError"
|
||||
class="main-notification"
|
||||
type="is-warning"
|
||||
:closable="false"
|
||||
>
|
||||
{{ setupAccountRequest.errorMessage }}
|
||||
</b-notification>
|
||||
<b-button
|
||||
v-if="!isBackuped && isSaveOnChain"
|
||||
type="is-primary is-fullwidth"
|
||||
:loading="setupAccountRequest.isFetching"
|
||||
@click="onSetupAccount"
|
||||
>
|
||||
{{ $t('account.modals.setupAccount.setupAccount') }}
|
||||
</b-button>
|
||||
<b-button v-else type="is-primary is-fullwidth" :disabled="!isBackuped" @click="setAccount">
|
||||
{{ $t('account.modals.setupAccount.setAccount') }}
|
||||
</b-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { setupMethods, setupComputed } from '../injectors'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
recoveryKey: '',
|
||||
isBackuped: false,
|
||||
isSaveOnChain: true,
|
||||
warningMessage: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...setupComputed
|
||||
},
|
||||
watch: {
|
||||
isSaveOnChain() {
|
||||
if (this.isSaveOnChain) {
|
||||
this.isBackuped = false
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeUpdate() {
|
||||
if (this.setupAccountRequest.isSuccess) {
|
||||
this.$parent.close()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.recoveryKey = this.$provider.web3.eth.accounts.create().privateKey.slice(2)
|
||||
|
||||
if (this.isPartialSupport) {
|
||||
this.isSaveOnChain = false
|
||||
}
|
||||
|
||||
this.timer = setTimeout(() => {
|
||||
this.saveRecoveryKeyOnFile({ recoveryKey: this.recoveryKey })
|
||||
}, 1500)
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearTimeout(this.timer)
|
||||
this.clearState({ key: 'setupAccount' })
|
||||
},
|
||||
methods: {
|
||||
...setupMethods,
|
||||
onCopy() {
|
||||
this.addNoticeWithInterval({
|
||||
notice: {
|
||||
title: 'copied',
|
||||
type: 'info'
|
||||
},
|
||||
interval: 2000
|
||||
})
|
||||
},
|
||||
async setAccount() {
|
||||
try {
|
||||
await this.recoverAccountFromKey({ recoveryKey: this.recoveryKey })
|
||||
this.$emit('close')
|
||||
} catch (err) {
|
||||
this.warningMessage = err.message
|
||||
}
|
||||
},
|
||||
async onSetupAccount() {
|
||||
if (!this.isSaveOnChain) {
|
||||
this.warningMessage = this.$t('account.modals.setupAccount.yourRecoveryKeyWontBeSaved')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await this.setupAccount({ privateKey: this.recoveryKey })
|
||||
} catch (err) {
|
||||
this.warningMessage = err.message
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
55
modules/account/modals/ShowRecoverKey.vue
Normal file
55
modules/account/modals/ShowRecoverKey.vue
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<div class="modal-card box box-modal">
|
||||
<header class="box-modal-header is-spaced">
|
||||
<div class="box-modal-title">{{ $t('account.modals.showRecoveryKey.title') }}</div>
|
||||
<button type="button" class="delete" @click="$emit('close')" />
|
||||
</header>
|
||||
<div class="note">{{ $t('account.modals.showRecoveryKey.description') }}</div>
|
||||
<div class="field">
|
||||
<div class="label-with-buttons">
|
||||
<div class="label"></div>
|
||||
<b-button v-clipboard:copy="recoveryKey" v-clipboard:success="onCopy" type="is-primary-text">
|
||||
{{ $t('copy') }}
|
||||
</b-button>
|
||||
</div>
|
||||
<div class="notice is-recovery-key">
|
||||
<div class="notice__p">{{ recoveryKey }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<b-button type="is-primary" outlined @click="onClose">
|
||||
{{ $t('account.modals.showRecoveryKey.close') }}
|
||||
</b-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { showRecoveryKeyMethods } from '../injectors'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
recoveryKey: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
...showRecoveryKeyMethods,
|
||||
onClose() {
|
||||
this.$emit('close')
|
||||
},
|
||||
onCopy() {
|
||||
this.addNoticeWithInterval({
|
||||
notice: {
|
||||
title: 'copied',
|
||||
type: 'info'
|
||||
},
|
||||
interval: 2000
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
66
modules/account/modals/index.js
Normal file
66
modules/account/modals/index.js
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
import { ModalProgrammatic, DialogProgrammatic } from 'buefy'
|
||||
|
||||
import { Settings } from '../dependencies'
|
||||
|
||||
import DecryptInfo from './DecryptInfo.vue'
|
||||
import SetupAccount from './SetupAccount.vue'
|
||||
import SessionUpdate from './SessionUpdate.vue'
|
||||
import RecoverAccount from './RecoverAccount.vue'
|
||||
import ShowRecoverKey from './ShowRecoverKey.vue'
|
||||
|
||||
const openSettingsModal = ({ parent, ...props }) => {
|
||||
createModal({ props, parent, component: Settings })
|
||||
}
|
||||
|
||||
const openSetupAccountModal = ({ parent, ...props }) => {
|
||||
createModal({ props, parent, component: SetupAccount, canCancel: false })
|
||||
}
|
||||
|
||||
const openDecryptModal = ({ parent, ...props }) => {
|
||||
createModal({ props, parent, component: DecryptInfo })
|
||||
}
|
||||
|
||||
const openRecoverAccountModal = ({ parent, ...props }) => {
|
||||
createModal({ props, parent, component: RecoverAccount })
|
||||
}
|
||||
|
||||
const openShowRecoverKeyModal = ({ parent, ...props }) => {
|
||||
createModal({ props, parent, component: ShowRecoverKey })
|
||||
}
|
||||
|
||||
function createModal({ component, props, parent, ...rest }) {
|
||||
ModalProgrammatic.open({
|
||||
props,
|
||||
parent,
|
||||
component,
|
||||
width: 440,
|
||||
hasModalCard: true,
|
||||
customClass: 'is-pinned',
|
||||
...rest
|
||||
})
|
||||
}
|
||||
|
||||
const openRemoveAccountModal = ({ i18n, onConfirm }) => {
|
||||
DialogProgrammatic.confirm({
|
||||
onConfirm,
|
||||
title: i18n.t('account.modals.removeAccount.title'),
|
||||
type: 'is-primary is-outlined',
|
||||
message: i18n.t('account.modals.removeAccount.description'),
|
||||
cancelText: i18n.t('account.modals.removeAccount.cancel'),
|
||||
confirmText: i18n.t('account.modals.removeAccount.remove')
|
||||
})
|
||||
}
|
||||
|
||||
const openConfirmModal = ({ parent, ...props }) => {
|
||||
createModal({ props, parent, component: SessionUpdate, customClass: 'dialog' })
|
||||
}
|
||||
|
||||
export {
|
||||
openDecryptModal,
|
||||
openConfirmModal,
|
||||
openSettingsModal,
|
||||
openSetupAccountModal,
|
||||
openRemoveAccountModal,
|
||||
openShowRecoverKeyModal,
|
||||
openRecoverAccountModal
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue