refactor: transaction detail page add failed status (#1017)

ArdentHQ · Nov 21, 2024 · 3ba2d68 · 3ba2d68
1 parent c84e4b6
commit 3ba2d68
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 1 deletion.
diff --git a/resources/lang/en/general.php b/resources/lang/en/general.php
@@ -37,6 +37,7 @@
     'coming_soon'         => 'Coming Soon',
     'select_all'          => 'Select All',
     'success'             => 'Success',
+    'failed'              => 'Failed',
     'information'         => 'Information',
     'error'               => 'Error',
     'warning'             => 'Warning',

diff --git a/resources/lang/en/pages.php b/resources/lang/en/pages.php
@@ -128,6 +128,10 @@
                 'original' => 'Original',
             ],
         ],
+
+        'status' => [
+            'failed_message' => 'Error encountered during contract execution',
+        ],
     ],
 
     'transactions'     => [

diff --git a/resources/views/app/transaction.blade.php b/resources/views/app/transaction.blade.php
@@ -13,7 +13,7 @@
 
             <x-transaction.page.summary :transaction="$transaction" />
 
-            <x-general.page-section.confirmations :model="$transaction" />
+            <x-transaction.page.status :model="$transaction" />
         </div>
 
         <div class="mb-8">

diff --git a/resources/views/components/transaction/page/status.blade.php b/resources/views/components/transaction/page/status.blade.php
@@ -0,0 +1,66 @@
+@props(['model'])
+
+@php
+    $hasFailedStatus = $model->hasFailedStatus();
+
+    if ($hasFailedStatus) {
+        $icon = 'circle.cross';
+    } else {
+        $icon = 'double-check-mark';
+    }
+@endphp
+
+<x-general.page-section.container
+    :title="trans('general.confirmations_only')"
+    wrapper-class="flex flex-col flex-1 whitespace-nowrap"
+    :wrapper-container-class="Arr::toCssClasses(['py-2 mx-2 rounded-lg border sm:mx-0 sm:py-4',
+        'bg-theme-success-100 dark:bg-theme-success-900 border-theme-success-200 dark:border-theme-success-500' => ! $hasFailedStatus,
+        'bg-theme-danger-50 dark:bg-transparent border-theme-danger-200 dark:border-theme-danger-400' => $hasFailedStatus,
+    ])"
+    no-border
+>
+    <div @class([
+        'flex items-center space-x-2 divide-x sm:space-x-3',
+        'divide-theme-success-200 dark:divide-theme-success-800' => ! $hasFailedStatus,
+        'divide-theme-danger-200 dark:divide-theme-dark-700' => $hasFailedStatus,
+    ])>
+        <div @class([
+            'flex items-center space-x-2 pl-3 sm:pl-6',
+            'text-theme-success-700 dark:text-theme-success-500' => ! $hasFailedStatus,
+            'text-theme-danger-700 dark:text-theme-danger-400' => $hasFailedStatus,
+        ])>
+            <x-ark-icon
+                :name="$icon"
+                size="w-4 h-4 sm:w-5 sm:h-5"
+            />
+
+            <div>
+                @if ($hasFailedStatus)
+                    @lang('general.failed')
+                @else
+                    @lang('general.success')
+                @endif
+            </div>
+        </div>
+
+        <div class="pl-2 sm:pl-3">
+            @if ($model->confirmations() > 1000)
+                <x-number>1000</x-number>+ @lang('general.confirmations_only')
+            @else
+                {{ trans_choice('general.confirmations', $model->confirmations(), ['count' => $model->confirmations()]) }}
+            @endif
+        </div>
+
+        @if ($hasFailedStatus)
+            <div class="hidden pl-2 sm:pl-3 md-lg:block">
+                @lang('pages.transaction.status.failed_message')
+            </div>
+        @endif
+    </div>
+
+    @if ($hasFailedStatus)
+        <div class="px-3 pt-2 mt-2 whitespace-normal border-t sm:pt-3 sm:pl-6 sm:mt-3 border-theme-danger-200 md-lg:hidden dark:border-theme-dark-700">
+            @lang('pages.transaction.status.failed_message')
+        </div>
+    @endif
+</x-general.page-section.container>