feat: airdrop address

assets/styles/app.scss

@@ -23,6 +23,7 @@
 @import 'components/dropdown';
 @import 'components/loading';
 @import 'components/notice';
+@import 'components/table';
 
 .title {
   span {

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);
 

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;

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;
+  }
+}

components/Notices.vue

@@ -15,6 +15,12 @@
           <b>{{ notice.title.value }}</b>
         </template>
       </i18n>
+      <a
+        v-if="typeof notice.callback === 'function'"
+        @click="callbackWithClose(notice.id, notice.callback)"
+      >
+        Scroll to voucher
+      </a>
       <a
         v-if="notice.txHash"
         :href="txExplorerUrl(notice.txHash)"
@@ -35,6 +41,10 @@ export default {
   },
   methods: {
     ...mapActions('notice', ['deleteNotice']),
+    callbackWithClose(id, callback) {
+      callback()
+      this.deleteNotice({ id })
+    },
     close(id) {
       this.deleteNotice({ id })
     },

components/Step.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="step">
+  <div :id="data.isActive ? 'current' : ''" class="step">
     <div class="step-container">
       <diamond
         :active="!!data.deployerAddress"
@@ -20,16 +20,19 @@
           path="deployedBy"
         >
           <template v-slot:link>
-            <a :href="txHash(data.deployTransaction)" target="_blank">{{
+            <a :href="domainUrl(data.deployTransaction)" target="_blank">{{
               data.deployerAddress
             }}</a>
           </template>
         </i18n>
       </div>
       <div class="step-more-button">
-        <b-button size="is-small" @click="isExpanded = !isExpanded">{{
-          isExpanded ? 'Less' : 'More'
-        }}</b-button>
+        <b-button
+          size="is-small"
+          :class="data.isActive ? 'button--active' : ''"
+          @click="isExpanded = !isExpanded"
+          >{{ isExpanded ? 'Less' : 'More' }}</b-button
+        >
       </div>
       <div class="step-tail">
         <div v-if="data.deployerAddress" class="completed">
@@ -70,25 +73,25 @@
         <p v-show="!data.airdrops">
           {{ data.description }}
         </p>
-        <div
-          class="columns is-multiline mt-3 is-gapless is-justify-content-space-around"
+        <b-table
+          v-show="data.airdrops"
+          :data="data.airdrops"
+          :sticky-header="true"
         >
-          <div
-            v-for="(airdrop, index) in data.airdrops"
-            :key="index"
-            style="flex: none"
-            class="column"
+          <b-table-column
+            v-slot="props"
+            field="address"
+            label="Address"
+            :class="data.isActive ? 'is-selected' : ''"
           >
-            <div class="p-3">
-              Address:
-              <a :href="domainUrl(airdrop.address)" target="_blank">
-                {{ airdrop.address }}
-              </a>
-              <br />
-              <span>Value: {{ airdrop.value }} vTORN</span>
-            </div>
-          </div>
-        </div>
+            <a :href="domainUrl(props.row.address)" target="_blank">{{
+              props.row.address
+            }}</a>
+          </b-table-column>
+          <b-table-column v-slot="props" field="value" label="Value">
+            {{ Number(props.row.value).toFixed(4) }} vTORN
+          </b-table-column>
+        </b-table>
       </div>
     </transition-expand>
   </div>

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,
             }
           }
 

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 }
+          )
+        }
+      })
+    })
+  },
 }

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'

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)
+  },
 }

store/airdrop/state.js

@@ -1,5 +1,6 @@
 export default () => ({
   airdrops: [],
+  notificationIndex: 0,
   secretCode:
     'd6d5ad7ec98c44fe89ef66c3277ef0ec7b1acbd7e0134bc1291fd952d7ff6030',
 })

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)
     }