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

web/satellite/src/components/account/billing/billingTabs/PaymentMethods.vue

@@ -165,8 +165,8 @@
                     </template>
                     <template #body>
                         <token-transaction-item
-                            v-for="item in displayedHistory"
+                            v-for="(item, index) in displayedHistory"
-                            :key="item.id"
+                            :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;
                 }
             }
         }

web/satellite/src/components/account/billing/paymentMethods/TokenTransactionItem.vue

@@ -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 class="amount">+ {{ item.formattedAmount }}</span>
-                    <span v-else>{{ item.received.value }}</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">
+        <th class="align-left data tablet-laptop">
-            <p v-if="item.type === 'storjscan'">{{ item.amount.value }}</p>
+            <p class="amount">+ {{ item.formattedAmount }}</p>
-            <p v-else>{{ item.received.value }}</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);
     }

web/satellite/src/types/payments.ts

@@ -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 {
+    public get formattedAmount(): string {
-        if (this.type === 'storjscan') {
+        if (this.type === 'coinpayments') {
-            return 'Etherscan';
+            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);
+    }
 }
 
 /**