feat(explorer): fees on transfer component (#5907)

apps/explorer/src/app/components/size-in-asset/size-in-asset.tsx

@@ -33,10 +33,10 @@ const SizeInAsset = ({
   }
 
   return (
-    <p>
+    <span>
       <span>{label}</span>&nbsp;
       <AssetLink assetId={assetId} showAssetSymbol={true} asDialog={true} />
-    </p>
+    </span>
   );
 };
 

apps/explorer/src/app/components/txs/details/transfer/Transfer.graphql

@@ -1,5 +1,9 @@
 query ExplorerTransferStatus($id: ID!) {
   transfer(id: $id) {
+    fees {
+      amount
+      epoch
+    }
     transfer {
       reference
       timestamp

apps/explorer/src/app/components/txs/details/transfer/__generated__/Transfer.ts

@@ -8,12 +8,16 @@ export type ExplorerTransferStatusQueryVariables = Types.Exact<{
 }>;
 
 
-export type ExplorerTransferStatusQuery = { __typename?: 'Query', transfer?: { __typename?: 'TransferNode', transfer: { __typename?: 'Transfer', reference?: string | null, timestamp: any, status: Types.TransferStatus, reason?: string | null, fromAccountType: Types.AccountType, from: string, to: string, toAccountType: Types.AccountType, amount: string, asset?: { __typename?: 'Asset', id: string } | null } } | null };
+export type ExplorerTransferStatusQuery = { __typename?: 'Query', transfer?: { __typename?: 'TransferNode', fees?: Array<{ __typename?: 'TransferFee', amount: string, epoch: number } | null> | null, transfer: { __typename?: 'Transfer', reference?: string | null, timestamp: any, status: Types.TransferStatus, reason?: string | null, fromAccountType: Types.AccountType, from: string, to: string, toAccountType: Types.AccountType, amount: string, asset?: { __typename?: 'Asset', id: string } | null } } | null };
 
 
 export const ExplorerTransferStatusDocument = gql`
     query ExplorerTransferStatus($id: ID!) {
   transfer(id: $id) {
+    fees {
+      amount
+      epoch
+    }
     transfer {
       reference
       timestamp

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

@@ -44,8 +44,14 @@ const AccountType: Record<AccountTypes, string> = {
   ACCOUNT_TYPE_ORDER_MARGIN: 'Order Margin',
 };
 
+export type TransferFee = {
+  amount?: string;
+  epoch?: number;
+};
+
 interface TransferParticipantsProps {
   transfer: Transfer;
+  fees?: TransferFee[] | null;
   from: string;
 }
 
@@ -60,6 +66,7 @@ interface TransferParticipantsProps {
 export function TransferParticipants({
   transfer,
   from,
+  fees,
 }: TransferParticipantsProps) {
   // This mapping is required as the global account types require a type to be set, while
   // the underlying protobufs allow for every field to be undefined.
@@ -104,6 +111,9 @@ export function TransferParticipants({
               {transfer.asset ? (
                 <SizeInAsset assetId={transfer.asset} size={transfer.amount} />
               ) : null}
+              {transfer.asset && fees && (
+                <TransferFees assetId={transfer.asset} fees={fees} />
+              )}
             </div>
 
             {/* Empty divs for the top arrow and the bottom arrow of the transfer inset */}
@@ -125,10 +135,6 @@ export function TransferParticipants({
                 <path d="M0,0L8,9l8,-9Z" />
               </svg>
             </div>
-            {/*
-            <div className="z-10 absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-4 h-4 dark:border-vega-dark-200 border-vega-light-200 bg-white dark:bg-black border-r border-b"></div>
-            <div className="z-10 absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 rotate-45 w-4 h-4 border-vega-light-200 dark:border-vega-dark-200 bg-vega-light-200 dark:bg-vega-dark-200 border-r border-b"></div>
-              */}
           </div>
         </div>
 
@@ -169,3 +175,38 @@ export function TransferRecurringRecipient({
   // Fallback should not happen
   return null;
 }
+
+export function TransferFees({
+  assetId,
+  fees,
+}: {
+  assetId: string;
+  fees: TransferFee[];
+}) {
+  // A recurring transfer that is rejected or cancelled will have an array of fees of 0 length
+  if (assetId && fees && fees.length > 0) {
+    if (fees.length === 1) {
+      return (
+        <p className="mt-2">
+          Fee: <SizeInAsset assetId={assetId} size={fees[0].amount} />
+        </p>
+      );
+    } else {
+      return (
+        <details className="cursor-pointer mt-2">
+          <summary>{t('Fees')}</summary>
+          <ul>
+            {fees.map((fee) => (
+              <li className="text-nowrap leading-normal">
+                <SizeInAsset assetId={assetId} size={fee.amount} />{' '}
+                {t('in epoch')} {fee.epoch}
+              </li>
+            ))}
+          </ul>
+        </details>
+      );
+    }
+  }
+
+  return null;
+}

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

@@ -41,9 +41,16 @@ export function TransferDetails({ transfer, from, id }: TransferDetailsProps) {
     ? TransferStatus.STATUS_REJECTED
     : data?.transfer?.transfer.status;
 
+  const fees = data?.transfer?.fees?.map((fee) => {
+    return {
+      amount: fee?.amount ? fee.amount : '0',
+      epoch: fee?.epoch ? fee.epoch : 0,
+    };
+  });
+
   return (
     <div className="flex flex-wrap">
-      <TransferParticipants from={from} transfer={transfer} />
+      <TransferParticipants from={from} transfer={transfer} fees={fees} />
       {recurring ? <TransferRepeat recurring={transfer.recurring} /> : null}
       <TransferStatusView status={status} error={error} loading={loading} />
       {recurring && recurring.dispatchStrategy ? (