fix: prevent amount to be truncated on transactions headers (#851)

ArkEcosystem · Jun 22, 2021 · 6b4f2e1 · 6b4f2e1
1 parent 16c1a45
commit 6b4f2e1
Show file tree

Hide file tree

Showing 8 changed files with 137 additions and 44 deletions.
diff --git a/app/ViewModels/Concerns/Transaction/InteractsWithTypeData.php b/app/ViewModels/Concerns/Transaction/InteractsWithTypeData.php
@@ -78,6 +78,48 @@ public function hasExtraData(): bool
         return false;
     }
 
+    /**
+     * The transactions that return `false` are the ones that don't show an
+     * amount on the transaction details page. We are validating one by one so
+     * it can be considered within the test coverage driver.
+     */
+    public function hasAmount(): bool
+    {
+        if ($this->isDelegateRegistration()) {
+            return false;
+        }
+
+        if ($this->isEntityRegistration()) {
+            return false;
+        }
+
+        if ($this->isEntityResignation()) {
+            return false;
+        }
+
+        if ($this->isEntityUpdate()) {
+            return false;
+        }
+
+        if ($this->isMultiSignature()) {
+            return false;
+        }
+
+        if ($this->isVoteCombination()) {
+            return false;
+        }
+
+        if ($this->isUnvote()) {
+            return false;
+        }
+
+        if ($this->isVote()) {
+            return false;
+        }
+
+        return true;
+    }
+
     public function isRegistration(): bool
     {
         if ($this->isDelegateRegistration()) {

diff --git a/public/css/app.css b/public/css/app.css
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,7 +1,7 @@
 {
     "/js/manifest.js": "/js/manifest.js?id=7db827d654313dce4250",
     "/js/app.js": "/js/app.js?id=617b2861f2898aba06c3",
-    "/css/app.css": "/css/app.css?id=8f7bb492f3b821bd620f",
+    "/css/app.css": "/css/app.css?id=deba9a572ebd2c1a2235",
     "/js/vendor.js": "/js/vendor.js?id=d2021daf9ac3eabd5cad",
     "/js/chart.js": "/js/chart.js?id=34ccf97ba22038c7b06d",
     "/js/clipboard.js": "/js/clipboard.js?id=99d052d4c54fa6c91edc"

diff --git a/resources/views/components/general/entity-header-item.blade.php b/resources/views/components/general/entity-header-item.blade.php
@@ -1,29 +1,42 @@
-<div class="entity-header-item {{ $wrapperClass ?? false }}">
-    @unless($withoutIcon ?? false)
+@props([
+    'title',
+    'text',
+    'wrapperClass' => '',
+    'contentClass' => 'md:ml-4 md:pr-4',
+    'url' => false,
+    'withoutIcon' => false,
+    'icon' => false,
+    'iconSize' => false,
+    'avatar' => false,
+    'truncate' => true,
+])
+
+<div class="entity-header-item {{ $wrapperClass }}{{ $truncate ? ' overflow-x-auto truncate' : '' }}">
+    @unless($withoutIcon)
         <div class="hidden items-center md:flex">
             <div class="circled-icon text-theme-secondary-900 border-theme-secondary-900 dark:text-theme-secondary-600 dark:border-theme-secondary-600">
-                @if ($icon ?? false)
-                    @if ($iconSize ?? false)
+                @if ($icon)
+                    @if ($iconSize)
                         <x-ark-icon :name="$icon" :size="$iconSize" />
                     @else
                         <x-ark-icon :name="$icon" />
                     @endif
-                @elseif ($avatar ?? false)
+                @elseif ($avatar)
                     <x-general.avatar-small :identifier="$avatar" />
                 @endif
             </div>
         </div>
     @endunless
 
-    <div class="flex flex-col flex-1 justify-between font-semibold truncate space-y-2 p-1 -m-1 {{ $contentClass ?? 'md:ml-4 md:pr-4' }}">
-        <div class="text-sm leading-tight text-theme-secondary-500 dark:text-theme-secondary-700">{{ $title }}</div>
+    <div class="flex flex-col flex-1 justify-between font-semibold space-y-2 p-1 -m-1 {{ $contentClass }}{{ $truncate ? ' overflow-x-auto truncate' : '' }}">
+        <div class="text-sm leading-tight text-theme-secondary-500 dark:text-theme-secondary-700{{ $truncate ? ' truncate' : '' }}">{{ $title }}</div>
 
-        @if ($url ?? false)
+        @if ($url)
             <a href="{{ $url }}" class="flex leading-tight link">
-                <span class="truncate">{{ $text }}</span>
+                <span class="{{ $truncate ? 'truncate' : 'whitespace-nowrap' }}">{{ $text }}</span>
             </a>
         @else
-            <span class="leading-tight truncate text-theme-secondary-900 dark:text-theme-secondary-200">{{ $text }}</span>
+            <span class="leading-tight text-theme-secondary-900 dark:text-theme-secondary-200{{ $truncate ? ' truncate' : ' whitespace-nowrap' }} ">{{ $text }}</span>
         @endif
     </div>
 </div>
diff --git a/resources/views/components/page-headers/transaction.blade.php b/resources/views/components/page-headers/transaction.blade.php
@@ -15,9 +15,15 @@
             </x-slot>
 
             <x-slot name="bottom">
-                <div class="grid grid-cols-1 gap-y-8 sm:grid-cols-2 xl:grid-cols-4">
-                    <x-dynamic-component :component="$transaction->headerComponent()" :transaction="$transaction" />
-                </div>
+                @if($transaction->hasAmount())
+                    <div class="grid grid-cols-1 gap-y-8 xl:grid-cols-2">
+                        <x-dynamic-component :component="$transaction->headerComponent()" :transaction="$transaction" />
+                    </div>
+                @else
+                    <div class="grid grid-cols-1 gap-y-8 sm:grid-cols-2 xl:grid-cols-4">
+                        <x-dynamic-component :component="$transaction->headerComponent()" :transaction="$transaction" />
+                    </div>
+                @endif
             </x-slot>
         </x-general.entity-header>
     </x-ark-container>

diff --git a/resources/views/components/page-headers/transaction/fallback.blade.php b/resources/views/components/page-headers/transaction/fallback.blade.php
@@ -1,34 +1,41 @@
-<x-page-headers.transaction.icon-type :model="$transaction" />
+<div class="flex flex-col space-y-8 sm:flex-row sm:space-y-0 xl:pr-7 xl:border-r xl:border-theme-secondary-300">
+    <x-page-headers.transaction.icon-type :model="$transaction" wrapper-class="sm:w-1/2" />
 
-<x-general.entity-header-item
-    :title="trans('pages.transaction.amount')"
-    icon="app-supply"
->
-    <x-slot name="text">
-        <x-general.amount-fiat-tooltip
-            :amount="$transaction->amount()"
-            :fiat="$transaction->amountFiat()"
-        />
-    </x-slot>
-</x-general.entity-header-item>
+    <x-general.entity-header-item
+        :title="trans('pages.transaction.amount')"
+        icon="app-supply"
+        :truncate="false"
+    >
+        <x-slot name="text">
+            <x-general.amount-fiat-tooltip
+                :amount="$transaction->amount()"
+                :fiat="$transaction->amountFiat()"
+            />
+        </x-slot>
+    </x-general.entity-header-item>
+</div>
 
-<x-general.entity-header-item
-    :title="trans('pages.transaction.fee')"
-    icon="app-monitor"
->
-    <x-slot name="text">
-        <x-general.amount-fiat-tooltip
+<div class="grid grid-cols-1 gap-y-8 sm:grid-cols-2 xl:pl-7">
+    <x-general.entity-header-item
+        :title="trans('pages.transaction.fee')"
+        :wrapper-class="$wrapperClass ?? ''"
+        icon="app-monitor"
+    >
+        <x-slot name="text">
+            <x-general.amount-fiat-tooltip
             :amount="$transaction->fee()"
             :fiat="$transaction->feeFiat()"
         />
-    </x-slot>
-</x-general.entity-header-item>
+        </x-slot>
+    </x-general.entity-header-item>
 
-<x-general.entity-header-item
-    :title="trans('pages.transaction.confirmations')"
-    icon="app-confirmations"
->
-    <x-slot name="text">
-        <x-number>{{ $transaction->confirmations() }}</x-number>
-    </x-slot>
-</x-general.entity-header-item>
+    <x-general.entity-header-item
+        :title="trans('pages.transaction.confirmations')"
+        :wrapper-class="$wrapperClass ?? ''"
+        icon="app-confirmations"
+    >
+        <x-slot name="text">
+            <x-number>{{ $transaction->confirmations() }}</x-number>
+        </x-slot>
+    </x-general.entity-header-item>
+</div>
diff --git a/resources/views/components/page-headers/transaction/icon-type.blade.php b/resources/views/components/page-headers/transaction/icon-type.blade.php
@@ -1,4 +1,8 @@
-<x-general.entity-header-item :title="trans('pages.transaction.transaction_type')" icon="app-transactions.{{ $model->iconType() }}">
+<x-general.entity-header-item
+    :title="trans('pages.transaction.transaction_type')"
+    icon="app-transactions.{{ $model->iconType() }}"
+    :wrapper-class="$wrapperClass ?? ''"
+>
     <x-slot name="text">
         @isset($asEntity)
             @lang('general.transaction.types.'.$model->entityType())

diff --git a/tests/Unit/ViewModels/TransactionViewModelTest.php b/tests/Unit/ViewModels/TransactionViewModelTest.php
@@ -488,6 +488,27 @@
     ],
 ]);
 
+it('should determine transactions that doesnt have amount', function (string $type) {
+    $subject = new TransactionViewModel(Transaction::factory()->{$type}()->create());
+
+    expect($subject->hasAmount())->toBeFalse();
+})->with([
+    'delegateRegistration',
+    'entityRegistration',
+    'entityResignation',
+    'entityUpdate',
+    'multiSignature',
+    'voteCombination',
+    'unvote',
+    'vote',
+]);
+
+it('should determine that transactions have amount by default', function () {
+    $subject = new TransactionViewModel(Transaction::factory()->transfer()->create());
+
+    expect($subject->hasAmount())->toBeTrue();
+});
+
 it('should determine the direction icon', function () {
     expect($this->subject->iconDirection('sender'))->toBeString();
 });