From fe23a375c3319a573e51871247561d1063877218 Mon Sep 17 00:00:00 2001 From: Nik Dement'ev Date: Sat, 21 Nov 2020 13:46:25 +0300 Subject: [PATCH] feat: airdrop address --- assets/styles/app.scss | 1 + assets/styles/components/_base.scss | 10 +++++ assets/styles/components/_button.scss | 13 ++++++ assets/styles/components/_table.scss | 61 +++++++++++++++++++++++++++ components/Notices.vue | 10 +++++ components/Step.vue | 47 +++++++++++---------- components/Steps.vue | 7 ++- store/airdrop/actions.js | 33 ++++++++++++++- store/airdrop/constant.js | 3 +- store/airdrop/mutations.js | 5 ++- store/airdrop/state.js | 1 + store/provider/actions.js | 1 + 12 files changed, 165 insertions(+), 27 deletions(-) create mode 100644 assets/styles/components/_table.scss diff --git a/assets/styles/app.scss b/assets/styles/app.scss index 4ae2db5..091c971 100644 --- a/assets/styles/app.scss +++ b/assets/styles/app.scss @@ -23,6 +23,7 @@ @import 'components/dropdown'; @import 'components/loading'; @import 'components/notice'; +@import 'components/table'; .title { span { diff --git a/assets/styles/components/_base.scss b/assets/styles/components/_base.scss index 7bfacef..f336db2 100644 --- a/assets/styles/components/_base.scss +++ b/assets/styles/components/_base.scss @@ -71,6 +71,16 @@ $dropdown-item-active-color: $white; $dropdown-content-padding-bottom: 0; $dropdown-content-padding-top: 0; +$table-background-color: #151515; +$table-color: $white; +$table-head-cell-color: $white; +$table-head-cell-border-width: 0 0 4px; +$table-cell-border: 1px solid $primary; +$table-striped-row-even-background-color: #1F1F1F; +$table-row-hover-background-color: rgba($primary, .154); +$table-striped-row-even-hover-background-color: rgba($primary, .154); +$table-cell-padding: 1.5em 1.25rem; + $loading-background-legacy: #000; $loading-background: rgba(0,0,0,0.95); diff --git a/assets/styles/components/_button.scss b/assets/styles/components/_button.scss index 449d134..90d10a0 100644 --- a/assets/styles/components/_button.scss +++ b/assets/styles/components/_button.scss @@ -1,6 +1,19 @@ .button { font-weight: 700; + &--active { + &::after { + content: ''; + position: absolute; + top: 6px; + right: -6px; + width: 8px; + height: 8px; + background-color: red; + border-radius: 50%; + } + } + &.is-icon { width: 1.5rem; height: 1.5rem; diff --git a/assets/styles/components/_table.scss b/assets/styles/components/_table.scss new file mode 100644 index 0000000..e0eab5a --- /dev/null +++ b/assets/styles/components/_table.scss @@ -0,0 +1,61 @@ +.b-table { + + .table-wrapper { + border-radius: 6px; + } + + .table { + a { + color: $primary; + text-decoration: underline; + } + + th { + font-weight: $weight-normal; + } + + td { + border-color: rgba($primary, .5) + } + + td, th { + vertical-align: middle; + } + + tbody { + tr { + + &:last-child { + td { + border-bottom-width: 1px; + } + } + + &:not(.is-selected) { + &:nth-child(odd) { + background-color: $table-striped-row-even-background-color; + } + + &:hover { + background-color: $table-row-hover-background-color; + &:nth-child(odd) { + background-color: $table-striped-row-even-hover-background-color; + } + } + } + + &:not(.is-selected).is-empty { + background-color: transparent; + + &:hover { + background-color: transparent; + } + } + } + } + } + + .dropdown.is-expanded { + min-width: 75px; + } +} diff --git a/components/Notices.vue b/components/Notices.vue index 0e6c9b9..8ce17ae 100644 --- a/components/Notices.vue +++ b/components/Notices.vue @@ -15,6 +15,12 @@ {{ notice.title.value }} + + Scroll to voucher + -
+
- {{ - isExpanded ? 'Less' : 'More' - }} + {{ isExpanded ? 'Less' : 'More' }}
@@ -70,25 +73,25 @@

{{ data.description }}

-
-
-
- Address: - - {{ airdrop.address }} - -
- Value: {{ airdrop.value }} vTORN -
-
-
+ {{ + props.row.address + }} + + + {{ Number(props.row.value).toFixed(4) }} vTORN + +
diff --git a/components/Steps.vue b/components/Steps.vue index ef71967..9f04078 100644 --- a/components/Steps.vue +++ b/components/Steps.vue @@ -14,14 +14,17 @@ export default { }, computed: { ...mapState('steps', ['steps']), - ...mapState('airdrop', ['airdrops']), + ...mapState('airdrop', ['airdrops', 'notificationIndex']), getData() { if (Array.isArray(this.airdrops)) { return this.steps.map((step, index) => { if (step.contract === 'Airdrop.sol') { + const dropIndex = index - this.airdrops.length + 2 + return { ...step, - airdrops: this.airdrops[index - this.airdrops.length + 2], + airdrops: this.airdrops[dropIndex], + isActive: this.notificationIndex === dropIndex, } } diff --git a/store/airdrop/actions.js b/store/airdrop/actions.js index fc400e1..3c4cbd5 100644 --- a/store/airdrop/actions.js +++ b/store/airdrop/actions.js @@ -1,6 +1,6 @@ import { localStorage } from '@/utillites' -import { SET_AIRDROP } from './constant' +import { SET_AIRDROP, SET_NOTIFICATION } from './constant' export default { setAirdropAddresses({ getters, commit }) { @@ -16,4 +16,35 @@ export default { localStorage.setItem('actions', actions) commit(SET_AIRDROP, actions) }, + checkAddress({ rootGetters, commit, dispatch, state }) { + const address = rootGetters['provider/getAccount'] + + const callback = () => { + window.scrollTo({ + behavior: 'smooth', + left: 0, + top: document.getElementById('current').getBoundingClientRect().top, + }) + } + + state.airdrops.forEach((item, index) => { + item.forEach((i) => { + if (i.address === address) { + commit(SET_NOTIFICATION, index) + + dispatch( + 'notice/addNotice', + { + notice: { + type: 'success', + title: 'You have airdrop', + callback, + }, + }, + { root: true } + ) + } + }) + }) + }, } diff --git a/store/airdrop/constant.js b/store/airdrop/constant.js index cbb73d3..5c40e6b 100644 --- a/store/airdrop/constant.js +++ b/store/airdrop/constant.js @@ -1 +1,2 @@ -export const SET_AIRDROP = 'airdrop/SET_BALANCE' +export const SET_AIRDROP = 'airdrop/SET_AIRDROP' +export const SET_NOTIFICATION = 'airdrop/SET_NOTIFICATION' diff --git a/store/airdrop/mutations.js b/store/airdrop/mutations.js index 4292e62..e59a046 100644 --- a/store/airdrop/mutations.js +++ b/store/airdrop/mutations.js @@ -1,7 +1,10 @@ -import { SET_AIRDROP } from './constant' +import { SET_AIRDROP, SET_NOTIFICATION } from './constant' export default { [SET_AIRDROP](state, airdrops) { this._vm.$set(state, 'airdrops', airdrops) }, + [SET_NOTIFICATION](state, index) { + this._vm.$set(state, 'notificationIndex', index) + }, } diff --git a/store/airdrop/state.js b/store/airdrop/state.js index 529cfab..ad21c7a 100644 --- a/store/airdrop/state.js +++ b/store/airdrop/state.js @@ -1,5 +1,6 @@ export default () => ({ airdrops: [], + notificationIndex: 0, secretCode: 'd6d5ad7ec98c44fe89ef66c3277ef0ec7b1acbd7e0134bc1291fd952d7ff6030', }) diff --git a/store/provider/actions.js b/store/provider/actions.js index db535fc..ba263a7 100644 --- a/store/provider/actions.js +++ b/store/provider/actions.js @@ -25,6 +25,7 @@ export default { commit(SET_ACCOUNT, account) await dispatch('getBalance', account) + dispatch('airdrop/checkAddress', {}, { root: true }) } catch (err) { throw new Error(err.message) }