feat(explorer): complete transfer status

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

@@ -1,10 +1,13 @@
 import { t } from '@vegaprotocol/i18n';
 import { headerClasses, wrapperClasses } from '../transfer-details';
 import { Icon, Loader } from '@vegaprotocol/ui-toolkit';
+import type { IconName } from '@vegaprotocol/ui-toolkit';
 import type { ApolloError } from '@apollo/client';
+import { TransferStatus, TransferStatusMapping } from '@vegaprotocol/types';
+import { IconNames } from '@blueprintjs/icons';
 
 interface TransferStatusProps {
-  status: string;
+  status: TransferStatus | undefined;
   error: ApolloError | undefined;
   loading: boolean;
 }
@@ -22,19 +25,58 @@ export function TransferStatusView({ status, loading }: TransferStatusProps) {
 
   return (
     <div className={wrapperClasses}>
-      <h2 className={headerClasses}>{t('Status')}</h2>
+      <h2 className={headerClasses}>{t('Transfer Status')}</h2>
       <div className="relative block rounded-lg py-6 text-center p-6">
         {loading ? (
           <Loader />
         ) : (
           <>
             <p className="leading-10 my-2">
-              <Icon name="tick" className="text-green-500" />
+              <Icon
+                name={getIconForStatus(status)}
+                className={getColourForStatus(status)}
+              />
             </p>
-            <p className="leading-10 my-2">{status}</p>
+            <p className="leading-10 my-2">{TransferStatusMapping[status]}</p>
           </>
         )}
       </div>
     </div>
   );
 }
+
+/**
+ * Simple mapping from status to icon name
+ * @param status TransferStatus
+ * @returns IconName
+ */
+export function getIconForStatus(status: TransferStatus): IconName {
+  switch (status) {
+    case TransferStatus.STATUS_PENDING:
+      return IconNames.TIME;
+    case TransferStatus.STATUS_DONE:
+      return IconNames.TICK;
+    case TransferStatus.STATUS_REJECTED:
+      return IconNames.CROSS;
+    default:
+      return IconNames.TIME;
+  }
+}
+
+/**
+ * Simple mapping from status to colour
+ * @param status TransferStatus
+ * @returns string Tailwind classname
+ */
+export function getColourForStatus(status: TransferStatus): string {
+  switch (status) {
+    case TransferStatus.STATUS_PENDING:
+      return 'text-yellow-500';
+    case TransferStatus.STATUS_DONE:
+      return 'text-green-500';
+    case TransferStatus.STATUS_REJECTED:
+      return 'text-red-500';
+    default:
+      return 'text-yellow-500';
+  }
+}

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

@@ -20,8 +20,6 @@ interface TransferDetailsProps {
   transfer: Transfer;
   from: string;
   id: string;
-  // If set, all blocks except the status one are hidden
-  statusOnly?: boolean;
 }
 
 /**
@@ -30,12 +28,7 @@ interface TransferDetailsProps {
  *
  * @param transfer A recurring transfer object
  */
-export function TransferDetails({
-  transfer,
-  from,
-  id,
-  statusOnly = false,
-}: TransferDetailsProps) {
+export function TransferDetails({ transfer, from, id }: TransferDetailsProps) {
   const recurring = transfer.recurring;
 
   // Currently all this is passed in to TransferStatus, but the extra details
@@ -50,18 +43,14 @@ export function TransferDetails({
 
   return (
     <div className="flex gap-5 flex-wrap">
-      {statusOnly ? null : (
-        <>
       <TransferParticipants from={from} transfer={transfer} />
+      {status ? (
+        <TransferStatusView status={status} error={error} loading={loading} />
+      ) : null}
       {recurring ? <TransferRepeat recurring={transfer.recurring} /> : null}
       {recurring && recurring.dispatchStrategy ? (
         <TransferRewards recurring={transfer.recurring} />
       ) : null}
-        </>
-      )}
-      {status ? (
-        <TransferStatusView status={status} error={error} loading={loading} />
-      ) : null}
     </div>
   );
 }

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

@@ -171,7 +171,6 @@ export const TxProposal = ({ txData, pubKey, blockData }: TxProposalProps) => {
       {transfer && (
         <div className="mt-8">
           <TransferDetails
-            statusOnly={false}
             transfer={transfer}
             from={from || ''}
             id={deterministicId}