init
This commit is contained in:
Danil Kovtonyuk
commit
44f31f8b9f
402 changed files with 47865 additions and 0 deletions
539
pages/compliance.vue
Normal file
539
pages/compliance.vue
Normal file
|
|
@ -0,0 +1,539 @@
|
|||
<template>
|
||||
<div class="compliance">
|
||||
<h1 class="title is-size-1 is-size-2-mobile is-spaced">
|
||||
Tornado.cash <span class="not-print">{{ $t('complianceTool') }}</span>
|
||||
<span class="print">{{ $t('complianceReport') }}</span>
|
||||
</h1>
|
||||
<p class="p is-size-6">
|
||||
<i18n path="complianceSubtitle">
|
||||
<template v-slot:newline><br /></template>
|
||||
</i18n>
|
||||
</p>
|
||||
<div class="field">
|
||||
<div class="label">{{ $t('note') }}</div>
|
||||
<b-input
|
||||
v-model="withdrawNote"
|
||||
:placeholder="$t('pleaseEnterYourNote')"
|
||||
:custom-class="error ? error.type : 'is-primary'"
|
||||
></b-input>
|
||||
<div class="print-help">{{ withdrawNote }}</div>
|
||||
<p v-show="error.msg !== ''" class="help" :class="error.type">{{ error.msg }}</p>
|
||||
</div>
|
||||
|
||||
<div v-show="withdrawNote && error.msg === ''">
|
||||
<b-notification
|
||||
:active="!txDepositInfo.isSpent && loaded"
|
||||
class="main-notification"
|
||||
type="is-warning"
|
||||
icon-pack="icon"
|
||||
has-icon
|
||||
:closable="false"
|
||||
>
|
||||
<strong>{{ $t('warning') }}</strong> {{ $t('doNotShareYouNote') }}
|
||||
</b-notification>
|
||||
<div class="columns columns-blocks is-desktop is-gapless">
|
||||
<div class="column is-5-desktop">
|
||||
<div class="block">
|
||||
<h3 class="block-item block-item--title">
|
||||
{{ $t('deposit') }}
|
||||
<span>{{
|
||||
txDepositInfo.amount
|
||||
? `${$n(txDepositInfo.amount)} ${getSymbol(txDepositInfo.currency)}`
|
||||
: '-'
|
||||
}}</span>
|
||||
</h3>
|
||||
<div
|
||||
class="block-item block-item--status"
|
||||
:class="{
|
||||
'is-success': txDepositInfo.txHash
|
||||
}"
|
||||
>
|
||||
{{ txDepositInfo.txHash ? $t('verified') : $t('status') }}
|
||||
</div>
|
||||
<div class="block-item block-item--data">
|
||||
<div class="label">{{ $t('date') }}</div>
|
||||
<div class="value">
|
||||
{{
|
||||
txDepositInfo.timestamp
|
||||
? `${this.$moment
|
||||
.unix(txDepositInfo.timestamp)
|
||||
.utc()
|
||||
.format('lll')} +UTC`
|
||||
: '-'
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-item block-item--data">
|
||||
<div class="label">{{ $t('transaction') }}</div>
|
||||
<a
|
||||
v-if="txDepositInfo.txHash"
|
||||
:href="txExplorerUrl(txDepositInfo.txHash)"
|
||||
target="_blank"
|
||||
class="value"
|
||||
:data-value="txDepositInfo.txHash"
|
||||
>
|
||||
{{ hashRender(txDepositInfo.txHash) }}
|
||||
</a>
|
||||
<div v-else class="value">-</div>
|
||||
</div>
|
||||
<div class="block-item block-item--data">
|
||||
<div class="label">{{ $t('from') }}</div>
|
||||
<a
|
||||
v-if="txDepositInfo.txHash"
|
||||
:href="addressExplorerUrl(txDepositInfo.from)"
|
||||
target="_blank"
|
||||
class="value"
|
||||
>
|
||||
{{ txDepositInfo.from }}
|
||||
</a>
|
||||
<div v-else class="value">-</div>
|
||||
</div>
|
||||
<div class="block-item block-item--data">
|
||||
<div class="label">{{ $t('commitment') }}</div>
|
||||
<div
|
||||
v-if="txDepositInfo.commitment"
|
||||
v-clipboard:copy="txDepositInfo.commitment"
|
||||
v-clipboard:success="onCopy"
|
||||
class="value copy"
|
||||
:data-value="txDepositInfo.commitment"
|
||||
>
|
||||
{{ hashRender(txDepositInfo.commitment) }}
|
||||
</div>
|
||||
<div v-else class="value">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-2-desktop">
|
||||
<div class="arrow"></div>
|
||||
</div>
|
||||
<div class="column is-5-desktop">
|
||||
<div class="block block-withdrawal">
|
||||
<h3 class="block-item block-item--title">
|
||||
{{ $t('withdrawal') }}
|
||||
<span>{{
|
||||
txWithdrawalInfo.amount
|
||||
? `${$n(txWithdrawalInfo.amount)} ${getSymbol(txDepositInfo.currency)}`
|
||||
: '-'
|
||||
}}</span>
|
||||
</h3>
|
||||
<div
|
||||
class="block-item block-item--status"
|
||||
:class="{
|
||||
'is-warning': !txDepositInfo.isSpent,
|
||||
'is-success': txWithdrawalInfo.txHash
|
||||
}"
|
||||
>
|
||||
{{
|
||||
txDepositInfo.isSpent
|
||||
? txWithdrawalInfo.txHash
|
||||
? $t('verified')
|
||||
: $t('status')
|
||||
: $t('noteHasNotBeenSpent')
|
||||
}}
|
||||
<span class="fee">{{
|
||||
txWithdrawalInfo.fee
|
||||
? `${$t('relayerFee')} ${$n(txWithdrawalInfo.fee)} ${getSymbol(txDepositInfo.currency)}`
|
||||
: $t('relayerFee')
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="block-item block-item--data">
|
||||
<div class="label">{{ $t('date') }}</div>
|
||||
<div class="value">
|
||||
{{
|
||||
txWithdrawalInfo.timestamp
|
||||
? `${this.$moment
|
||||
.unix(txWithdrawalInfo.timestamp)
|
||||
.utc()
|
||||
.format('lll')} +UTC`
|
||||
: '-'
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="block-item block-item--data">
|
||||
<div class="label">{{ $t('transaction') }}</div>
|
||||
<a
|
||||
v-if="txWithdrawalInfo.txHash"
|
||||
:href="txExplorerUrl(txWithdrawalInfo.txHash)"
|
||||
target="_blank"
|
||||
class="value"
|
||||
:data-value="txWithdrawalInfo.txHash"
|
||||
>
|
||||
{{ hashRender(txWithdrawalInfo.txHash) }}
|
||||
</a>
|
||||
<div v-else class="value">-</div>
|
||||
</div>
|
||||
<div class="block-item block-item--data">
|
||||
<div class="label">{{ $t('to') }}</div>
|
||||
<a
|
||||
v-if="txWithdrawalInfo.to"
|
||||
:href="addressExplorerUrl(txWithdrawalInfo.to)"
|
||||
target="_blank"
|
||||
class="value"
|
||||
>
|
||||
{{ txWithdrawalInfo.to }}
|
||||
</a>
|
||||
<div v-else class="value">-</div>
|
||||
</div>
|
||||
<div class="block-item block-item--data">
|
||||
<div class="label">{{ $t('nullifierHash') }}</div>
|
||||
<div
|
||||
v-if="txWithdrawalInfo.nullifier"
|
||||
v-clipboard:copy="txWithdrawalInfo.nullifier"
|
||||
v-clipboard:success="onCopy"
|
||||
class="value copy"
|
||||
:data-value="txWithdrawalInfo.nullifier"
|
||||
>
|
||||
{{ hashRender(txWithdrawalInfo.nullifier) }}
|
||||
</div>
|
||||
<div v-else class="value">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns is-desktop is-vcentered is-gapless has-verified">
|
||||
<div class="column is-5-desktop"></div>
|
||||
<div class="column is-2-desktop generate-container">
|
||||
<b-button
|
||||
v-show="txDepositInfo.txHash && txWithdrawalInfo.txHash"
|
||||
type="is-primary"
|
||||
class="generate"
|
||||
outlined
|
||||
@click="print"
|
||||
>{{ $t('generatePdfReport') }}</b-button
|
||||
>
|
||||
</div>
|
||||
<div class="column is-5-desktop">
|
||||
<Verified v-show="txDepositInfo.txHash" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="print print-title">{{ $t('warning') }}</div>
|
||||
<div class="print print-p">
|
||||
<i18n path="compliancePrintWarning">
|
||||
<template v-slot:newline><br /></template>
|
||||
</i18n>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable no-console */
|
||||
import Web3 from 'web3'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
import networkConfig from '@/networkConfig'
|
||||
import { parseNote, hashRender } from '@/utils'
|
||||
import Verified from '@/components/icons/Verified'
|
||||
|
||||
const { isHexStrict } = require('web3-utils')
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Verified
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
withdrawNote: '',
|
||||
error: { type: '', msg: '' },
|
||||
txDepositInfo: {
|
||||
amount: null,
|
||||
currency: '',
|
||||
isSpent: false,
|
||||
timestamp: null,
|
||||
txHash: '',
|
||||
from: ''
|
||||
},
|
||||
loaded: false,
|
||||
txWithdrawalInfo: {
|
||||
amount: null,
|
||||
txHash: '',
|
||||
timestamp: null,
|
||||
to: '',
|
||||
nullifier: '',
|
||||
fee: null
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('settings', ['currentRpc']),
|
||||
...mapGetters('metamask', ['netId']),
|
||||
...mapGetters('token', ['getSymbol']),
|
||||
config() {
|
||||
return networkConfig[`netId${this.netId}`]
|
||||
},
|
||||
getEthInstance() {
|
||||
const web3 = new Web3(this.currentRpc.url)
|
||||
return web3.eth
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
netId(netId, oldNetId) {
|
||||
if (netId !== oldNetId) {
|
||||
const [, , , noteNetId] = this.withdrawNote.split('-')
|
||||
|
||||
if (Number(noteNetId) !== netId && noteNetId) {
|
||||
this.error = {
|
||||
type: 'is-warning',
|
||||
msg: this.$t('changeNetworkNote')
|
||||
}
|
||||
} else {
|
||||
this.resetState()
|
||||
}
|
||||
}
|
||||
},
|
||||
withdrawNote: {
|
||||
async handler(withdrawNote) {
|
||||
try {
|
||||
this.resetState()
|
||||
this.$store.dispatch('loading/enable', { message: this.$t('gettingTheNoteData') })
|
||||
if (!withdrawNote) {
|
||||
throw new Error('enterYourDepositsNote')
|
||||
}
|
||||
|
||||
const [, currency, amount, noteNetId, note] = withdrawNote.split('-')
|
||||
if (!note || note.length < 126 || !isHexStrict(note)) {
|
||||
throw new Error('noteIsInvalid')
|
||||
}
|
||||
|
||||
if (Number(this.netId) !== Number(noteNetId)) {
|
||||
throw new Error('changeNetworkNote')
|
||||
}
|
||||
|
||||
const event = await this.$store.dispatch('application/loadDepositEvent', { withdrawNote })
|
||||
|
||||
if (!event) {
|
||||
throw new Error('thereIsNoRelatedDeposit')
|
||||
}
|
||||
|
||||
const { timestamp, txHash, isSpent } = event
|
||||
|
||||
const receipt = await this.getTransactionReceipt(txHash)
|
||||
|
||||
const { nullifierHex, commitmentHex } = parseNote(withdrawNote)
|
||||
|
||||
this.txDepositInfo = {
|
||||
currency,
|
||||
amount,
|
||||
isSpent,
|
||||
txHash,
|
||||
timestamp,
|
||||
from: receipt.from,
|
||||
commitment: commitmentHex
|
||||
}
|
||||
|
||||
if (isSpent) {
|
||||
const { withdrawalBlock, txHash, to, fee, amount } = await this.$store.dispatch(
|
||||
'application/loadWithdrawalData',
|
||||
{
|
||||
withdrawNote
|
||||
}
|
||||
)
|
||||
|
||||
const { timestamp } = await this.getBlock(withdrawalBlock)
|
||||
|
||||
this.txWithdrawalInfo = {
|
||||
amount,
|
||||
txHash,
|
||||
timestamp,
|
||||
to,
|
||||
nullifier: nullifierHex,
|
||||
fee
|
||||
}
|
||||
}
|
||||
this.loaded = true
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
this.error = { type: 'is-warning', msg: this.$t(e.message) }
|
||||
} finally {
|
||||
this.$store.dispatch('loading/disable')
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getTransactionReceipt(txHash) {
|
||||
return this.getEthInstance.getTransactionReceipt(txHash)
|
||||
},
|
||||
getBlock(blockHash) {
|
||||
return this.getEthInstance.getBlock(blockHash)
|
||||
},
|
||||
txExplorerUrl(txHash) {
|
||||
const { explorerUrl } = this.config
|
||||
return explorerUrl.tx + txHash
|
||||
},
|
||||
addressExplorerUrl(address) {
|
||||
const { explorerUrl } = this.config
|
||||
return explorerUrl.address + address
|
||||
},
|
||||
print() {
|
||||
// window.print()
|
||||
|
||||
if (process.server) {
|
||||
return
|
||||
}
|
||||
|
||||
const JsPdf = require('jspdf')
|
||||
const doc = new JsPdf()
|
||||
|
||||
doc
|
||||
.setFontSize(9)
|
||||
.setLineHeightFactor(1.5)
|
||||
.setFont('courier')
|
||||
.setFontStyle('normal')
|
||||
|
||||
const width = doc.internal.pageSize.getWidth()
|
||||
const padding = 10
|
||||
const endX = width - padding
|
||||
const splitLineSize = width - padding * 2
|
||||
const splitColumnSize = (width - padding * 3) / 2
|
||||
const endFirstColumnX = splitColumnSize + padding
|
||||
const startSecondColumnX = splitColumnSize + padding * 2
|
||||
|
||||
const depositAmount = `${this.$n(this.txDepositInfo.amount)} ${this.getSymbol(
|
||||
this.txDepositInfo.currency
|
||||
)}`
|
||||
const withdrawalAmount = `${this.$n(this.txWithdrawalInfo.amount)} ${this.getSymbol(
|
||||
this.txDepositInfo.currency
|
||||
)}`
|
||||
const fee = `${this.$t('relayerFee', 'en')} ${this.$n(this.txWithdrawalInfo.fee)} ${this.getSymbol(
|
||||
this.txDepositInfo.currency
|
||||
)}`
|
||||
|
||||
// save current moment locale
|
||||
const locale = this.$moment.locale()
|
||||
this.$moment.locale('en')
|
||||
const depositDate = `${this.$moment
|
||||
.unix(this.txDepositInfo.timestamp)
|
||||
.utc()
|
||||
.format('lll')} +UTC`
|
||||
const withdrawDate = `${this.$moment
|
||||
.unix(this.txWithdrawalInfo.timestamp)
|
||||
.utc()
|
||||
.format('lll')} +UTC`
|
||||
|
||||
// return the previous moment locale
|
||||
this.$moment.locale(locale)
|
||||
|
||||
const depositTx = doc.splitTextToSize(this.txDepositInfo.txHash, splitColumnSize)
|
||||
const withdrawTx = doc.splitTextToSize(this.txWithdrawalInfo.txHash, splitColumnSize)
|
||||
const commitment = doc.splitTextToSize(this.txDepositInfo.commitment, splitColumnSize)
|
||||
const nullifier = doc.splitTextToSize(this.txWithdrawalInfo.nullifier, splitColumnSize)
|
||||
const note = doc.splitTextToSize(this.withdrawNote, splitLineSize)
|
||||
const complianceWarning = doc.splitTextToSize(
|
||||
this.$t('compliancePrintWarning', 'en', { newline: '\n' }),
|
||||
splitLineSize
|
||||
)
|
||||
|
||||
doc.text(this.$t('note', 'en'), padding, 50)
|
||||
doc.text(this.$t('date', 'en'), padding, 91)
|
||||
doc.text(this.$t('date', 'en'), startSecondColumnX, 91)
|
||||
doc.text(this.$t('transaction', 'en'), padding, 106)
|
||||
doc.text(this.$t('transaction', 'en'), startSecondColumnX, 106)
|
||||
doc.text(this.$t('from', 'en'), padding, 126)
|
||||
doc.text(this.$t('to', 'en'), startSecondColumnX, 126)
|
||||
doc.text(this.$t('commitment', 'en'), padding, 141)
|
||||
doc.text(this.$t('nullifierHash', 'en'), startSecondColumnX, 141)
|
||||
doc.text(complianceWarning, padding, 209)
|
||||
|
||||
doc.setFontStyle('bold').text(note, padding, 56)
|
||||
doc.text(depositDate, padding, 97)
|
||||
doc.text(withdrawDate, startSecondColumnX, 97)
|
||||
|
||||
const links = [
|
||||
{ text: depositTx, x: padding, y: 112, url: this.txExplorerUrl(this.txDepositInfo.txHash) },
|
||||
{
|
||||
text: withdrawTx,
|
||||
x: startSecondColumnX,
|
||||
y: 112,
|
||||
url: this.txExplorerUrl(this.txWithdrawalInfo.txHash)
|
||||
},
|
||||
{
|
||||
text: this.txDepositInfo.from,
|
||||
x: padding,
|
||||
y: 132,
|
||||
url: this.addressExplorerUrl(this.txDepositInfo.from)
|
||||
},
|
||||
{
|
||||
text: this.txWithdrawalInfo.to,
|
||||
x: startSecondColumnX,
|
||||
y: 132,
|
||||
url: this.addressExplorerUrl(this.txWithdrawalInfo.to)
|
||||
}
|
||||
]
|
||||
|
||||
for (const { text, x, y, url } of links) {
|
||||
if (Array.isArray(text)) {
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
doc.textWithLink(text[i], x, y + i * 4.8, {
|
||||
url
|
||||
})
|
||||
}
|
||||
} else {
|
||||
doc.textWithLink(text, x, y, {
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
doc.text(commitment, padding, 147)
|
||||
doc.text(nullifier, startSecondColumnX, 147)
|
||||
|
||||
doc.setFontSize(20).text('Tornado.cash', padding, 40)
|
||||
doc.setFontStyle('normal').text(this.$t('complianceReport', 'en'), 65, 40)
|
||||
|
||||
doc.setFontSize(8).text(this.$t('verified', 'en'), padding, 81)
|
||||
doc.text(this.$t('verified', 'en'), startSecondColumnX, 81)
|
||||
doc.text(fee, endX, 81, null, null, 'right')
|
||||
|
||||
doc.setFontSize(14).text(this.$t('deposit', 'en'), padding, 75)
|
||||
doc.text(this.$t('withdrawal', 'en'), startSecondColumnX, 75)
|
||||
doc.text(this.$t('warning', 'en'), padding, 200)
|
||||
doc.setFontStyle('bold').text(depositAmount, endFirstColumnX, 75, null, null, 'right')
|
||||
doc.text(withdrawalAmount, endX, 75, null, null, 'right')
|
||||
|
||||
const logo = require('@/assets/img/tornado_black.png')
|
||||
const imgLogo = new Image()
|
||||
imgLogo.src = logo
|
||||
doc.addImage(imgLogo, 'PNG', padding, padding, 42.8625, 11.1125)
|
||||
|
||||
const markSize = 23.8125
|
||||
const mark = require('@/assets/img/tornado_mark.png')
|
||||
const imgMark = new Image()
|
||||
imgMark.src = mark
|
||||
doc.addImage(imgMark, 'PNG', endX - markSize, 160, markSize, markSize)
|
||||
|
||||
doc.save(`tornadocash-compliance-${this.txDepositInfo.currency}-${this.txDepositInfo.amount}.pdf`)
|
||||
},
|
||||
resetState() {
|
||||
this.loaded = false
|
||||
this.error = { type: '', msg: '' }
|
||||
this.txDepositInfo = {
|
||||
amount: null,
|
||||
currency: '',
|
||||
isSpent: false,
|
||||
timestamp: null,
|
||||
txHash: '',
|
||||
from: ''
|
||||
}
|
||||
this.txWithdrawalInfo = {
|
||||
amount: null,
|
||||
txHash: '',
|
||||
timestamp: null,
|
||||
to: '',
|
||||
nullifier: '',
|
||||
fee: null
|
||||
}
|
||||
},
|
||||
onCopy() {
|
||||
this.$store.dispatch('notice/addNoticeWithInterval', {
|
||||
notice: {
|
||||
title: 'copied',
|
||||
type: 'info'
|
||||
},
|
||||
interval: 3000
|
||||
})
|
||||
},
|
||||
hashRender: (hash) => hashRender(hash, 20, '..')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue