chore(explorer): finish splitting up signature bundle component

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

@@ -64,7 +64,7 @@ export function getIconAndLabelForStatus(
       };
     case 'STATE_FAILED':
       return {
-        icon: 'ban-circle',
+        icon: 'thumbs-down',
         label: t('Proposal became invalid and was not processed'),
       };
     case 'STATE_OPEN':
@@ -82,8 +82,8 @@ export function getIconAndLabelForStatus(
       };
     case 'STATE_REJECTED':
       return {
-        icon: 'thumbs-down',
-        label: t('Voting is complete and this proposal was rejected'),
+        icon: 'disable',
+        label: t('The proposal was invalid'),
       };
     case 'STATE_WAITING_FOR_NODE_VOTE':
       return {

apps/explorer/src/app/components/txs/details/proposal/signature-bundle-new.tsx

@@ -0,0 +1,42 @@
+import { Loader } from '@vegaprotocol/ui-toolkit';
+import { BundleError } from './signature-bundle/bundle-error';
+import { BundleExists } from './signature-bundle/bundle-exists';
+import { useExplorerNewAssetSignatureBundleQuery } from './__generated__/SignatureBundle';
+
+export interface ProposalSignatureBundleByTypeProps {
+  id: string;
+}
+
+/**
+ * If a proposal needs a signature bundle, AND that signature bundle exists
+ * AND that proposal is a New Asset Proposal, render an overview of the
+ * signature bundle. Or an error.
+ *
+ * There is an almost identical component, ProposalSignatureBundleUpdateAsset
+ */
+export const ProposalSignatureBundleNewAsset = ({
+  id,
+}: ProposalSignatureBundleByTypeProps) => {
+  const { data, error, loading } = useExplorerNewAssetSignatureBundleQuery({
+    variables: {
+      id,
+    },
+  });
+
+  if (loading) {
+    return <Loader />;
+  }
+
+  if (data?.erc20ListAssetBundle?.signatures) {
+    return (
+      <BundleExists
+        signatures={data.erc20ListAssetBundle.signatures}
+        nonce={data.erc20ListAssetBundle.nonce}
+        status={data.asset?.status}
+        proposalId={id}
+      />
+    );
+  } else {
+    return <BundleError status={data?.asset?.status} error={error} />;
+  }
+};

apps/explorer/src/app/components/txs/details/proposal/signature-bundle-update.tsx

@@ -0,0 +1,39 @@
+import { Loader } from '@vegaprotocol/ui-toolkit';
+import type { ProposalSignatureBundleByTypeProps } from './signature-bundle-new';
+import { BundleError } from './signature-bundle/bundle-error';
+import { BundleExists } from './signature-bundle/bundle-exists';
+import { useExplorerUpdateAssetSignatureBundleQuery } from './__generated__/SignatureBundle';
+
+/**
+ * If a proposal needs a signature bundle, AND that signature bundle exists
+ * AND that proposal is a Asset Limits Proposal, render an overview of the
+ * signature bundle. Or an error.
+ *
+ * There is an almost identical component, ProposalSignatureBundleNewAsset
+ */
+export const ProposalSignatureBundleUpdateAsset = ({
+  id,
+}: ProposalSignatureBundleByTypeProps) => {
+  const { data, error, loading } = useExplorerUpdateAssetSignatureBundleQuery({
+    variables: {
+      id,
+    },
+  });
+
+  if (loading) {
+    return <Loader />;
+  }
+
+  if (data?.erc20SetAssetLimitsBundle?.signatures) {
+    return (
+      <BundleExists
+        signatures={data.erc20SetAssetLimitsBundle.signatures}
+        nonce={data.erc20SetAssetLimitsBundle.nonce}
+        status={data.asset?.status}
+        proposalId={id}
+      />
+    );
+  } else {
+    return <BundleError status={data?.asset?.status} error={error} />;
+  }
+};

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

@@ -1,10 +1,5 @@
-import { Icon } from '@vegaprotocol/ui-toolkit';
-import ProposalLink from '../../../links/proposal-link/proposal-link';
-import {
-  useExplorerNewAssetSignatureBundleQuery,
-  useExplorerUpdateAssetSignatureBundleQuery,
-} from './__generated__/SignatureBundle';
-import { t } from '@vegaprotocol/i18n';
+import { ProposalSignatureBundleNewAsset } from './signature-bundle-new';
+import { ProposalSignatureBundleUpdateAsset } from './signature-bundle-update';
 
 export function format(date: string | undefined, def: string) {
   if (!date) {
@@ -20,92 +15,17 @@ interface ProposalSignatureBundleProps {
 }
 
 /**
- * Some proposals, if enacted, generate a signature bundle
+ * Some proposals, if enacted, generate a signature bundle.
+ * The queries have to be split due to the way the API returns
+ * errors, hence this slightly redundant feeling switcher.
  */
 export const ProposalSignatureBundle = ({
   id,
   type,
 }: ProposalSignatureBundleProps) => {
-  return type == 'NewAsset' ? (
+  return type === 'NewAsset' ? (
     <ProposalSignatureBundleNewAsset id={id} />
   ) : (
     <ProposalSignatureBundleUpdateAsset id={id} />
   );
 };
-
-interface ProposalSignatureBundleByTypeProps {
-  id: string;
-}
-
-export const ProposalSignatureBundleNewAsset = ({
-  id,
-}: ProposalSignatureBundleByTypeProps) => {
-  const { data, error, loading } = useExplorerNewAssetSignatureBundleQuery({
-    variables: {
-      id,
-    },
-  });
-
-  if (data?.erc20ListAssetBundle?.signatures) {
-    return (
-      <div className="mt-5 w-auto max-w-lg border-2 border-solid border-vega-light-100 dark:border-vega-dark-200 p-5">
-        <Icon className="float-left mr-3" name={'clean'} />
-        <h1 className="text-xl">{t('Signature bundle generated')}</h1>
-        {data.asset?.status}
-
-        <details className="my-5">
-          <summary>See details</summary>
-
-          <div className="ml-4">
-            <h2 className="text-lg mt-2 mb-2">{t('Signatures')}</h2>
-            <p>
-              <textarea
-                className="font-mono bg-neutral-300 text-[11px] leading-3 text-gray-900 w-full p-2 max-w-[615px]"
-                readOnly={true}
-                rows={12}
-                cols={120}
-                value={data.erc20ListAssetBundle.signatures}
-              />
-            </p>
-
-            <h2 className="text-lg mt-5 mb-2">{t('Nonce')}</h2>
-            <p>
-              <textarea
-                className="font-mono bg-neutral-300 text-[11px] leading-3 text-gray-900 w-full p-2 max-w-[615px]"
-                readOnly={true}
-                rows={2}
-                cols={120}
-                value={data.erc20ListAssetBundle.nonce}
-              />
-            </p>
-          </div>
-        </details>
-
-        <p>
-          <ProposalLink
-            id={id}
-            text={t('Visit our Governance site to submit this')}
-          />
-        </p>
-      </div>
-    );
-  } else {
-    return null;
-  }
-};
-
-export const ProposalSignatureBundleUpdateAsset = ({
-  id,
-}: ProposalSignatureBundleByTypeProps) => {
-  const { data, error, loading } = useExplorerUpdateAssetSignatureBundleQuery({
-    variables: {
-      id,
-    },
-  });
-
-  if (data?.erc20SetAssetLimitsBundle?.signatures) {
-    return <p>{data.erc20SetAssetLimitsBundle.signatures}</p>;
-  } else {
-    return null;
-  }
-};

apps/explorer/src/app/components/txs/details/proposal/signature-bundle/bundle-error.tsx

@@ -0,0 +1,34 @@
+import type { ApolloError } from '@apollo/client';
+import type { AssetStatus } from '@vegaprotocol/types';
+
+import { t } from '@vegaprotocol/i18n';
+import Hash from '../../../../links/hash';
+import { IconForBundleStatus } from './bundle-icon';
+
+export interface BundleErrorProps {
+  status?: AssetStatus;
+  error?: ApolloError;
+}
+
+/**
+ * Renders if a proposal signature bundle cannot be found.
+ * It is also possible that a data node has dropped the bundle
+ * from its retention so there is a backup case where we check
+ * the status - if it's already enabled, pretend this isn't an error
+ */
+export const BundleError = ({ status, error }: BundleErrorProps) => {
+  return (
+    <div className="w-auto max-w-lg border-2 border-solid border-vega-light-100 dark:border-vega-dark-200 p-5 mt-5">
+      <IconForBundleStatus status={status} />
+      <h1 className="text-xl pb-1">{t('No signature bundle found')}</h1>
+
+      <p>
+        {status === 'STATUS_ENABLED' ? (
+          t('Asset already enabled')
+        ) : (
+          <Hash text={error ? error.message : t('No bundle for proposal ID')} />
+        )}
+      </p>
+    </div>
+  );
+};

apps/explorer/src/app/components/txs/details/proposal/signature-bundle/bundle-exists.tsx

@@ -0,0 +1,46 @@
+import { t } from '@vegaprotocol/i18n';
+import type { AssetStatus } from '@vegaprotocol/types';
+import ProposalLink from '../../../../links/proposal-link/proposal-link';
+import { IconForBundleStatus } from './bundle-icon';
+import { ProposalSignatureBundleDetails } from './details';
+
+export interface BundleExistsProps {
+  signatures: string;
+  nonce: string;
+  status?: AssetStatus;
+  proposalId: string;
+}
+
+/**
+ * If a proposal needs a signature bundle, AND that signature bundle exists,
+ * this component renders that signature bundle.
+ *
+ */
+export const BundleExists = ({
+  signatures,
+  nonce,
+  status,
+  proposalId,
+}: BundleExistsProps) => {
+  return (
+    <div className="w-auto max-w-lg border-2 border-solid border-vega-light-100 dark:border-vega-dark-200 p-5 mt-5">
+      <IconForBundleStatus status={status} />
+      <h1 className="text-xl pb-1">
+        {status === 'STATUS_ENABLED'
+          ? t('Asset added to bridge')
+          : t('Signature bundle generated')}
+      </h1>
+
+      <ProposalSignatureBundleDetails signatures={signatures} nonce={nonce} />
+
+      {status !== 'STATUS_ENABLED' ? (
+        <p className="mt-5">
+          <ProposalLink
+            id={proposalId}
+            text={t('Visit our Governance site to submit this')}
+          />
+        </p>
+      ) : null}
+    </div>
+  );
+};

apps/explorer/src/app/components/txs/details/proposal/signature-bundle/bundle-icon.tsx

@@ -0,0 +1,20 @@
+import type { AssetStatus } from '@vegaprotocol/types';
+import type { IconName } from '@vegaprotocol/ui-toolkit';
+import { Icon } from '@vegaprotocol/ui-toolkit';
+
+export interface IconForBundleStatusProps {
+  status?: AssetStatus;
+}
+
+/**
+ * Naively select an icon for an asset. If it is enabled, we show a tick - anything
+ * else is assumed to be 'in progress'. There should only be a signature bundle or the
+ * asset should not exist
+ *
+ * @param param0
+ * @returns
+ */
+export const IconForBundleStatus = ({ status }: IconForBundleStatusProps) => {
+  const i: IconName = status === 'STATUS_ENABLED' ? 'tick-circle' : 'clean';
+  return <Icon className="float-left mt-2 mr-3" name={i} />;
+};

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

@@ -0,0 +1,41 @@
+import { t } from '@vegaprotocol/i18n';
+
+export interface ProposalSignatureBundleDetailsProps {
+  signatures: string;
+  nonce: string;
+}
+
+export const ProposalSignatureBundleDetails = ({
+  signatures,
+  nonce,
+}: ProposalSignatureBundleDetailsProps) => {
+  return (
+    <details className="mt-5">
+      <summary>{t('Signature bundle details')}</summary>
+
+      <div className="ml-4">
+        <h2 className="text-lg mt-2 mb-2">{t('Signatures')}</h2>
+        <p>
+          <textarea
+            className="font-mono bg-neutral-300 text-[11px] leading-3 text-gray-900 w-full p-2 max-w-[615px]"
+            readOnly={true}
+            rows={12}
+            cols={120}
+            value={signatures}
+          />
+        </p>
+
+        <h2 className="text-lg mt-5 mb-2">{t('Nonce')}</h2>
+        <p>
+          <textarea
+            className="font-mono bg-neutral-300 text-[11px] leading-3 text-gray-900 w-full p-2 max-w-[615px]"
+            readOnly={true}
+            rows={2}
+            cols={120}
+            value={nonce}
+          />
+        </p>
+      </div>
+    </details>
+  );
+};