chore(explorer): relayout transfers

apps/explorer/src/app/components/txs/details/transfer/blocks/transfer-rewards.tsx

@@ -11,10 +11,9 @@ import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
 export type Metric = components['schemas']['vegaDispatchMetric'];
 export type Strategy = components['schemas']['vegaDispatchStrategy'];
 
-export const wrapperClasses =
-  'border border-vega-light-150 dark:border-vega-dark-200 rounded-md pv-2 mb-5 w-full sm:w-3/4 min-w-[200px] ';
+export const wrapperClasses = 'border pv-2 w-full flex-auto basis-full';
 export const headerClasses =
-  'bg-solid bg-vega-light-150 dark:bg-vega-dark-150 border-vega-light-150 text-center text-xl py-2 font-alpha calt';
+  'bg-solid bg-vega-light-150 dark:bg-vega-dark-150 text-center text-xl py-2 font-alpha calt';
 
 const metricLabels: Record<Metric, string> = {
   DISPATCH_METRIC_UNSPECIFIED: 'Unknown metric',

apps/explorer/src/app/components/txs/details/transfer/blocks/transfer-status.tsx

@@ -20,7 +20,7 @@ interface TransferStatusProps {
  */
 export function TransferStatusView({ status, loading }: TransferStatusProps) {
   if (!status) {
-    return null;
+    status = TransferStatus.STATUS_PENDING;
   }
 
   return (
@@ -28,7 +28,9 @@ export function TransferStatusView({ status, loading }: TransferStatusProps) {
       <h2 className={headerClasses}>{t('Transfer Status')}</h2>
       <div className="relative block rounded-lg py-6 text-center p-6">
         {loading ? (
-          <Loader />
+          <div className="leading-10 mt-12">
+            <Loader size={'small'} />
+          </div>
         ) : (
           <>
             <p className="leading-10 my-2">

apps/explorer/src/app/components/txs/details/transfer/transfer-details.tsx

@@ -10,7 +10,7 @@ export type Recurring = components['schemas']['commandsv1RecurringTransfer'];
 export type Metric = components['schemas']['vegaDispatchMetric'];
 
 export const wrapperClasses =
-  'border border-vega-light-150 dark:border-vega-dark-200 rounded-md pv-2 mb-5 w-full sm:w-1/4 min-w-[200px] ';
+  'border border-vega-light-150 dark:border-vega-dark-200 pv-2 w-full sm:w-1/3 basis-1/3';
 export const headerClasses =
   'bg-solid bg-vega-light-150 dark:bg-vega-dark-150 border-vega-light-150 text-center text-xl py-2 font-alpha calt';
 
@@ -42,12 +42,10 @@ export function TransferDetails({ transfer, from, id }: TransferDetailsProps) {
     : data?.transfer?.status;
 
   return (
-    <div className="flex gap-5 flex-wrap">
+    <div className="flex flex-wrap">
       <TransferParticipants from={from} transfer={transfer} />
-      {status ? (
-        <TransferStatusView status={status} error={error} loading={loading} />
-      ) : null}
       {recurring ? <TransferRepeat recurring={transfer.recurring} /> : null}
+      <TransferStatusView status={status} error={error} loading={loading} />
       {recurring && recurring.dispatchStrategy ? (
         <TransferRewards recurring={transfer.recurring} />
       ) : null}

apps/explorer/src/app/components/txs/details/tx-transfer.tsx

@@ -13,6 +13,7 @@ import {
   SPECIAL_CASE_NETWORK_ID,
 } from '../../links/party-link/party-link';
 import { txSignatureToDeterministicId } from '../lib/deterministic-ids';
+import Hash from '../../links/hash';
 
 type Transfer = components['schemas']['commandsv1Transfer'];
 
@@ -70,7 +71,9 @@ export const TxDetailsTransfer = ({
         </TableRow>
         <TableRow modifier="bordered" data-testid="id">
           <TableCell {...sharedHeaderProps}>{t('Transfer ID')}</TableCell>
-          <TableCell>{id}</TableCell>
+          <TableCell>
+            <Hash text={id} />
+          </TableCell>
         </TableRow>
         <TxDetailsShared
           txData={txData}