Skip to content

Commit

Permalink
D3 | Transaction view (#231)
Browse files Browse the repository at this point in the history 
* feat: updat transaction page, divided to several components

* feat: improved information about amount
  • Loading branch information
@Pobepto
Pobepto authored Oct 18, 2019
1 parent c54ee48 commit 0163245
Show file tree
Hide file tree
Showing 11 changed files with 450 additions and 311 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
"element-ui": "^2.10.1",
"file-saver": "^1.3.8",
"grpc-web-client": "^0.7.0",
"iroha-helpers": "0.7.0",
"iroha-helpers": "0.7.1-ts.2",
"json2csv": "^4.2.1",
"lodash": "^4.17.10",
"numbro": "^2.1.0",
Expand Down
49 changes: 49 additions & 0 deletions scripts/generateTx.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
const irohaHelpersLib = require('iroha-helpers/lib/chain')
const fs = require('fs')

const tx = new irohaHelpersLib.TxBuilder()
.transferAsset({
amount: '0.00001',
assetId: 'btc#bitcoin',
description: '111111',
destAccountId: 'b@sora',
srcAccountId: 'a@sora'
})
.transferAsset({
amount: '0.00002',
assetId: 'btc#bitcoin',
description: '222222',
destAccountId: 'b@sora',
srcAccountId: 'a@sora'
})
.transferAsset({
amount: '0.00003',
assetId: 'btc#bitcoin',
description: '333333',
destAccountId: 'b@sora',
srcAccountId: 'a@sora'
})
.transferAsset({
amount: '0.00004',
assetId: 'btc#bitcoin',
description: '444444',
destAccountId: 'b@sora',
srcAccountId: 'a@sora'
})
.transferAsset({
amount: '0.00005',
assetId: 'btc#bitcoin',
description: '555555',
destAccountId: 'b@sora',
srcAccountId: 'a@sora'
})
.addMeta('a@sora', 3)
.sign([
'e8d1bee5f4cc5d83a1cd9b2ad9692b2c1f3cdeff8d1ed4da382a130e0f5e5a29'
])
.tx
.serializeBinary()

fs.writeFile(`./generated-transaction.bin`, Buffer.from(tx), (err) => {
if (err) throw err
})
27 changes: 27 additions & 0 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -428,4 +428,31 @@ button.el-dialog__headerbtn {
position: relative !important;
font-size: 0.9rem;
}

.transactions_table {
padding: 0.9rem 1.5rem;
}
.transactions_table >>> .el-table__header th {
font-weight: 500;
}
.transactions_table >>> .el-table__row td .cell {
color: #000000;
}
.transactions_table-row {
height: 72px;
color: #000000;
}
.transaction_details {
font-size: 0.8rem;
color: #000000;
}
.transaction_action >>> button {
background: #ffffff;
text-transform: uppercase;
padding: 0.7rem;
}
.transaction_description {
overflow: hidden;
text-overflow: ellipsis;
}
</style>
6 changes: 6 additions & 0 deletions src/components/Home.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,12 @@ export default {
this.getCustomAssets()
},

updated () {
console.log(
this.accountQuorum
)
},

mounted () {
document.documentElement.style.setProperty('--show-loading', 'none')
},
Expand Down
213 changes: 19 additions & 194 deletions src/components/Transactions/TransactionPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,159 +12,21 @@
<span>Waiting transactions</span>
</div>
<el-tabs type="card">
<el-tab-pane label="Transfer">
<el-table
:data="pendingTransferTransactions"
class="transactions_table"
>
<el-table-column type="expand">
<template slot-scope="scope">
<div class="transaction_details">
<p>
{{ scope.row.from }} transfered {{ scope.row.amount }}
{{ availableAssets.find(w => w.assetId = scope.row.assetId).asset }} to {{ scope.row.to }}
</p>
<div>
<p>Was <el-tag>created</el-tag> at {{ formatDateLong(scope.row.date) }}</p>
<p>Message: {{ scope.row.message }}</p>
</div>
</div>
</template>
</el-table-column>
<el-table-column
label="Date"
width="110"
>
<template slot-scope="scope">
{{ formatDateWith(scope.row.date, 'MMM D, HH:mm') }}
</template>
</el-table-column>
<el-table-column
label="Amount"
min-width="60"
>
<template slot-scope="scope">
{{ scope.row.from === 'you' ? '−' : '+' }}{{ Number(scope.row.amount) }}
{{ availableAssets.find(w => w.assetId === scope.row.assetId).asset }}
</template>
</el-table-column>
<el-table-column
label="Address"
min-width="90"
show-overflow-tooltip
>
<template slot-scope="scope">
{{ scope.row.to === 'notary' ? 'Withdrawal' : '' }} to {{ scope.row.to === 'notary' ? scope.row.message : scope.row.to }}
</template>
</el-table-column>
<el-table-column
label="Description"
min-width="90"
show-overflow-tooltip
>
<template slot-scope="scope">
<div>
<div v-if="scope.row.from === 'notary' || scope.row.to === 'notary'"/>
<div v-else>{{ scope.row.message }}</div>
</div>
</template>
</el-table-column>
<el-table-column
label="Expire"
width="70"
>
<template slot-scope="scope">
{{ calculateEstimatedTime(scope.row.date) }}
</template>
</el-table-column>
<el-table-column
label="Signs"
width="60"
>
<template slot-scope="scope">
{{ scope.row.signatures.length > accountQuorum ? scope.row.signatures.length / 2 : scope.row.signatures.length }}
/
{{ accountQuorum }}
</template>
</el-table-column>
<el-table-column width="210">
<template slot-scope="scope">
<div class="transaction_action">
<el-button
v-if="scope.row.signatures.length < accountQuorum"
size="medium"
type="primary"
plain
@click="onSignPendingTransaction(scope.row.id, scope.row.signatures)"
>
Add signatures
</el-button>
</div>
</template>
</el-table-column>
</el-table>
<el-tab-pane
label="Transfer"
>
<TransferTab
:account-quorum="accountQuorum"
:available-assets="availableAssets"
/>
</el-tab-pane>
<el-tab-pane label="Settings">
<el-table
:data="pendingSettingsTransactions"
class="transactions_table"
>
<el-table-column
label="Date"
width="110"
>
<template slot-scope="scope">
{{ formatDateWith(scope.row.date, 'MMM D, HH:mm') }}
</template>
</el-table-column>
<el-table-column
label="Type"
min-width="90"
show-overflow-tooltip
>
<template slot-scope="scope">
<div>
{{ scope.row.type }}
</div>
</template>
</el-table-column>
<el-table-column
label="Description"
min-width="90"
show-overflow-tooltip
>
<template slot-scope="scope">
<div class="transaction_description">
{{ scope.row.description }}
</div>
</template>
</el-table-column>
<el-table-column
label="Signs"
width="60"
>
<template slot-scope="scope">
{{ scope.row.signatures.length > accountQuorum ? scope.row.signatures.length / 2 : scope.row.signatures.length }}
/
{{ accountQuorum }}
</template>
</el-table-column>
<el-table-column width="210">
<template slot-scope="scope">
<div class="transaction_action">
<el-button
v-if="scope.row.signatures.length < accountQuorum"
size="medium"
type="primary"
plain
@click="onSignPendingTransaction(scope.row.id, scope.row.signatures)"
>
Add signatures
</el-button>
</div>
</template>
</el-table-column>
</el-table>
<el-tab-pane
label="Settings"
>
<SettingsTab
:account-quorum="accountQuorum"
:available-assets="availableAssets"
/>
</el-tab-pane>
</el-tabs>
</el-card>
Expand All @@ -176,27 +38,22 @@

<script>
import { mapActions, mapGetters } from 'vuex'
import dateFormat from '@/components/mixins/dateFormat'
import messageMixin from '@/components/mixins/message'
import { lazyComponent } from '@router'
// import NOTIFICATIONS from '@/data/notifications'

export default {
name: 'TransactionPage',
mixins: [
dateFormat,
messageMixin
],
components: {
TransferTab: lazyComponent('Transactions/components/TransferTab'),
SettingsTab: lazyComponent('Transactions/components/SettingsTab')
},
data () {
return {
liveTimeOfTransaction: 24 * 60 * 60 * 1000, // 24h in milliseconds
isSending: false
}
},
computed: {
...mapGetters([
'pendingTransferTransactions',
'pendingSettingsTransactions',
'wallets',
'availableAssets',
'accountQuorum'
])
Expand All @@ -206,8 +63,6 @@ export default {
},
methods: {
...mapActions([
'openApprovalDialog',
'signPendingTransaction',
'getAllUnsignedTransactions',
'createPendingTransaction',
'openUploadTransactionDialog'
Expand All @@ -217,10 +72,6 @@ export default {
txStoreId
})
this.openUploadTransactionDialog()
},
calculateEstimatedTime (date) {
const rightDate = date + this.liveTimeOfTransaction
return this.compareDates(rightDate, new Date().getTime())
}
}
}
Expand All @@ -233,30 +84,4 @@ export default {
align-items: center;
padding: 1.5rem 1.5rem;
}
.transactions_table {
padding: 0.9rem 1.5rem;
}
.transactions_table >>> .el-table__header th {
font-weight: 500;
}
.transactions_table >>> .el-table__row td .cell {
color: #000000;
}
.transactions_table-row {
height: 72px;
color: #000000;
}
.transaction_details {
font-size: 0.8rem;
color: #000000;
}
.transaction_action >>> button {
background: #ffffff;
text-transform: uppercase;
padding: 0.7rem;
}
.transaction_description {
overflow: hidden;
text-overflow: ellipsis;
}
</style>
Loading

0 comments on commit 0163245

Please sign in to comment.