web/satellite: update transactions table design
This change slightly modifies the token transactions table to match the figma and account for bonuses. Issue: https://github.com/storj/storj/issues/5755 Change-Id: I2bb27d5e331223a1e5e807ace09bbd6c3bc2c3b0
This commit is contained in:
Wilfred Asomani
parent
058dbd4cb7
commit
09c87a1a0d
@ -165,8 +165,8 @@
|
||||
</template>
|
||||
<template #body>
|
||||
<token-transaction-item
|
||||
v-for="item in displayedHistory"
|
||||
:key="item.id"
|
||||
v-for="(item, index) in displayedHistory"
|
||||
:key="index"
|
||||
:item="item"
|
||||
/>
|
||||
</template>
|
||||
@ -940,10 +940,15 @@ $align: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.3rem;
|
||||
|
||||
@media screen and (width <= 650px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__address {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
gap: 0.3rem;
|
||||
|
||||
&__label {
|
||||
@ -953,6 +958,8 @@ $align: center;
|
||||
|
||||
&__value {
|
||||
font-family: 'font_bold', sans-serif;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,38 +6,38 @@
|
||||
<th class="align-left data mobile">
|
||||
<div class="few-items">
|
||||
<p class="array-val">
|
||||
Deposit on {{ item.formattedType }}
|
||||
STORJ {{ item.formattedType }}
|
||||
</p>
|
||||
<p class="array-val">
|
||||
<span v-if="item.type === 'storjscan'">{{ item.amount.value }}</span>
|
||||
<span v-else>{{ item.received.value }}</span>
|
||||
<span class="amount">+ {{ item.formattedAmount }}</span>
|
||||
</p>
|
||||
<p
|
||||
class="array-val" :class="{
|
||||
pending_txt: item.status === 'pending',
|
||||
confirmed_txt: item.status === 'confirmed',
|
||||
confirmed_txt: item.status === 'confirmed' || item.status === 'complete',
|
||||
rejected_txt: item.status === 'rejected',
|
||||
}"
|
||||
>
|
||||
{{ item.formattedStatus }}
|
||||
</p>
|
||||
<p class="array-val">
|
||||
{{ item.timestamp.toLocaleDateString('en-US', {day:'numeric', month:'short', year:'numeric'}) }}
|
||||
{{ item.timestamp.toLocaleDateString('en-US', {day:'numeric', month:'short', year:'numeric'}) }},
|
||||
{{ item.timestamp.toLocaleTimeString('en-US', {hour:'numeric', minute:'numeric'}) }}
|
||||
</p>
|
||||
</div>
|
||||
</th>
|
||||
|
||||
<th class="align-left data tablet-laptop">
|
||||
<p>{{ item.timestamp.toLocaleDateString('en-US', {day:'numeric', month:'short', year:'numeric'}) }}</p>
|
||||
<p class="date">{{ item.timestamp.toLocaleDateString('en-US', {day:'2-digit', month:'2-digit', year:'numeric'}) }}</p>
|
||||
<p class="time">{{ item.timestamp.toLocaleTimeString('en-US', {hour:'numeric', minute:'numeric'}) }}</p>
|
||||
</th>
|
||||
<th class="align-left data tablet-laptop">
|
||||
<p>Deposit on {{ item.formattedType }}</p>
|
||||
<p>STORJ {{ item.formattedType }}</p>
|
||||
<p class="laptop">{{ item.wallet }}</p>
|
||||
</th>
|
||||
|
||||
<th class="align-right data tablet-laptop">
|
||||
<p v-if="item.type === 'storjscan'">{{ item.amount.value }}</p>
|
||||
<p v-else>{{ item.received.value }}</p>
|
||||
<th class="align-left data tablet-laptop">
|
||||
<p class="amount">+ {{ item.formattedAmount }}</p>
|
||||
</th>
|
||||
|
||||
<th class="align-left data tablet-laptop">
|
||||
@ -45,7 +45,7 @@
|
||||
<span
|
||||
class="status__dot" :class="{
|
||||
pending: item.status === 'pending',
|
||||
confirmed: item.status === 'confirmed',
|
||||
confirmed: item.status === 'confirmed' || item.status === 'complete',
|
||||
rejected: item.status === 'rejected'
|
||||
}"
|
||||
/>
|
||||
@ -57,13 +57,14 @@
|
||||
<a
|
||||
v-if="item.link" class="download-link" target="_blank"
|
||||
rel="noopener noreferrer" :href="item.link"
|
||||
>View on {{ item.linkName }}</a>
|
||||
>View</a>
|
||||
</th>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NativePaymentHistoryItem } from '@/types/payments';
|
||||
import { formatPrice } from '@/utils/strings';
|
||||
import { NativePaymentHistoryItem, NativePaymentType } from '@/types/payments';
|
||||
import { useResize } from '@/composables/resize';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
@ -82,6 +83,19 @@ function goToTxn() {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.amount {
|
||||
color: var(--c-green-5);
|
||||
}
|
||||
|
||||
p,
|
||||
span {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: var(--c-grey-5);
|
||||
}
|
||||
|
||||
.pending {
|
||||
background: var(--c-yellow-4);
|
||||
}
|
||||
|
||||
@ -611,14 +611,17 @@ export class NativePaymentHistoryItem {
|
||||
}
|
||||
|
||||
public get formattedType(): string {
|
||||
return this.type.charAt(0).toUpperCase() + this.type.substring(1);
|
||||
if (this.type.includes('bonus')) {
|
||||
return 'Bonus';
|
||||
}
|
||||
return 'Deposit';
|
||||
}
|
||||
|
||||
public get linkName(): string {
|
||||
if (this.type === 'storjscan') {
|
||||
return 'Etherscan';
|
||||
public get formattedAmount(): string {
|
||||
if (this.type === 'coinpayments') {
|
||||
return this.received.formattedValue;
|
||||
}
|
||||
return this.formattedType;
|
||||
return this.amount.formattedValue;
|
||||
}
|
||||
}
|
||||
|
||||
@ -631,6 +634,10 @@ export class TokenAmount {
|
||||
public get value(): number {
|
||||
return Number.parseFloat(this._value);
|
||||
}
|
||||
|
||||
public get formattedValue(): string {
|
||||
return formatPrice(this._value);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Loading…
Reference in New Issue
Block a user