display error and timeout information for polytone messages

packages/i18n/locales/en/translation.json

@@ -380,7 +380,7 @@
     "couldntFindProposal": "We couldn't find a proposal with that ID.",
     "couldntFindWallet": "We couldn't find a wallet with that address.",
     "counterpartyBalanceInsufficient": "The counterparty's balance of {{amount}} ${{tokenSymbol}} is insufficient. They may be unable to complete this swap.",
-    "crossChainMessagesTimedOut": "One or more cross-chain messages timed out and thus did not get executed on the destination chain.",
+    "crossChainMessagesErroredOrTimedOut": "One or more cross-chain messages errored or timed out and did not get executed on the destination chain.",
     "daoAccountNotFound": "The DAO account could not be found for this chain.",
     "daoAndSubDaosAlreadyOnV2": "This DAO (and all of its SubDAOs, if it has any) have already been upgraded.",
     "daoCreationIncomplete": "DAO creation is incomplete. Ensure all required fields have been filled out.",
@@ -1487,6 +1487,7 @@
     "acceptingSubmissions": "Accepting submissions",
     "account": "Account",
     "actionLibrary": "Action Library",
+    "actionNumber": "Action {{number}}",
     "actions": "Actions",
     "actions_one": "Action",
     "actions_other": "Actions",
@@ -1601,6 +1602,7 @@
     "enableRetroactiveCompensation": "Enable Retroactive Compensation",
     "enableVestingPayments": "Enable Vesting Payments",
     "end": "End",
+    "errored": "Errored",
     "estUsdValue": "Est. USD value",
     "established": "Established",
     "executeSmartContract": "Execute Smart Contract",
@@ -1749,6 +1751,7 @@
     "refund": "Refund",
     "registerSlash": "Register slash",
     "relay": "Relay",
+    "relayed": "Relayed",
     "removeCw20FromTreasury": "Remove Token Balance from Treasury",
     "removeCw721FromTreasury": "Remove NFT Collection from Treasury",
     "removeItem": "Remove Item",
@@ -1801,6 +1804,7 @@
     "tierNum": "Tier {{tier}}",
     "timeLeft": "Time left",
     "timeRemaining": "Time remaining",
+    "timedOut": "Timed out",
     "title": "Title",
     "token": "Token",
     "tokenSwap": "Token Swap",

packages/stateful/actions/core/advanced/CreateIca/Component.tsx

@@ -8,7 +8,7 @@ import {
   IbcDestinationChainPicker,
   InputErrorMessage,
   Loader,
-  WarningCard,
+  StatusCard,
   useChain,
 } from '@dao-dao/stateless'
 import { LoadingDataWithError } from '@dao-dao/types'
@@ -96,9 +96,10 @@ export const CreateIcaComponent: ActionComponent<CreateIcaOptions> = ({
           {polytoneChainIds.includes(destinationChainId) &&
           context.type === ActionContextType.Dao &&
           remove ? (
-            <WarningCard
+            <StatusCard
               className="max-w-xl"
               content={t('info.useNativeCrossChainAccountInstead')}
+              style="warning"
             >
               <Button
                 onClick={() => {
@@ -116,7 +117,7 @@ export const CreateIcaComponent: ActionComponent<CreateIcaOptions> = ({
               >
                 {t('button.switchAction')}
               </Button>
-            </WarningCard>
+            </StatusCard>
           ) : (
             isCreating &&
             !!destinationChainId &&
@@ -189,12 +190,13 @@ export const CreateIcaComponent: ActionComponent<CreateIcaOptions> = ({
           {createdAddressLoading.loading ? (
             <Loader fill={false} size={28} />
           ) : createdAddressLoading.errored ? (
-            <WarningCard
+            <StatusCard
               content={
                 createdAddressLoading.error instanceof Error
                   ? createdAddressLoading.error.message
                   : `${createdAddressLoading.error}`
               }
+              style="warning"
             />
           ) : createdAddressLoading.data ? (
             <CopyToClipboard
@@ -209,7 +211,11 @@ export const CreateIcaComponent: ActionComponent<CreateIcaOptions> = ({
         </div>
       )}
 
-      <WarningCard className="max-w-xl" content={t('info.icaExperimental')} />
+      <StatusCard
+        className="max-w-xl"
+        content={t('info.icaExperimental')}
+        style="warning"
+      />
     </>
   )
 }

packages/stateful/actions/core/advanced/IcaExecute/index.tsx

@@ -14,7 +14,7 @@ import {
   InputErrorMessage,
   Loader,
   RocketShipEmoji,
-  WarningCard,
+  StatusCard,
   useCachedLoadingWithError,
 } from '@dao-dao/stateless'
 import {
@@ -228,7 +228,11 @@ const Component: ActionComponent = (props) => {
           </>
         ))}
 
-      <WarningCard className="max-w-xl" content={t('info.icaExperimental')} />
+      <StatusCard
+        className="max-w-xl"
+        content={t('info.icaExperimental')}
+        style="warning"
+      />
     </>
   )
 }

packages/stateful/actions/core/authorizations/AuthzGrantRevoke/Component.tsx

@@ -16,8 +16,8 @@ import {
   RadioInput,
   SegmentedControlsTitle,
   SelectInput,
+  StatusCard,
   TextInput,
-  WarningCard,
   useChain,
 } from '@dao-dao/stateless'
 import {
@@ -114,7 +114,9 @@ export const AuthzGrantRevokeComponent: ActionComponent<
         ]}
       />
 
-      {mode === 'grant' && <WarningCard content={t('info.authzWarning')} />}
+      {mode === 'grant' && (
+        <StatusCard content={t('info.authzWarning')} style="warning" />
+      )}
 
       <div className="flex flex-col gap-1">
         <InputLabel

packages/stateful/actions/core/treasury/ConfigureVestingPayments/index.tsx

@@ -16,6 +16,7 @@ import { DAO_WIDGET_ITEM_NAMESPACE } from '@dao-dao/utils'
 import { useWidgets } from '../../../../widgets'
 import { makeManageWidgetsAction } from '../../dao_appearance/ManageWidgets'
 import { ConfigureVestingPaymentsComponent as Component } from './Component'
+
 export const makeConfigureVestingPaymentsAction: ActionMaker<
   VestingPaymentsWidgetData
 > = (options) => {

packages/stateful/actions/core/treasury/ManageVesting/BeginVesting.tsx

@@ -23,11 +23,11 @@ import {
   RadioInput,
   RadioInputOption,
   SelectInput,
+  StatusCard,
   TextAreaInput,
   TextInput,
   TokenInput,
   VestingStepsLineGraph,
-  WarningCard,
 } from '@dao-dao/stateless'
 import {
   ActionChainContextType,
@@ -295,11 +295,12 @@ export const BeginVesting: ActionComponent<BeginVestingOptions> = ({
         {isCreating &&
           !vestingManagerExists &&
           configureVestingPaymentActionDefaults && (
-            <WarningCard
+            <StatusCard
               className="max-w-lg"
               content={t('info.vestingManagerNeeded', {
                 chain: getDisplayNameForChainId(chainId),
               })}
+              style="warning"
             >
               <Button
                 disabled={crossChainAccountActionExists}
@@ -319,7 +320,7 @@ export const BeginVesting: ActionComponent<BeginVestingOptions> = ({
                   ? t('button.vestingManagerSetupActionAdded')
                   : t('button.addVestingManagerSetupAction')}
               </Button>
-            </WarningCard>
+            </StatusCard>
           )}
 
         <div className="space-y-2">

packages/stateful/actions/core/treasury/Spend/Component.tsx

@@ -20,9 +20,9 @@ import {
   Loader,
   NumberInput,
   SelectInput,
+  StatusCard,
   TokenAmountDisplay,
   TokenInput,
-  WarningCard,
   useDetectWrap,
 } from '@dao-dao/stateless'
 import {
@@ -599,7 +599,7 @@ export const SpendComponent: ActionComponent<SpendOptions> = ({
               {isCreating &&
                 !betterNonPfmIbcPath.loading &&
                 betterNonPfmIbcPath.data && (
-                  <WarningCard
+                  <StatusCard
                     className="max-w-xl"
                     content={
                       <div className="flex flex-col gap-3">
@@ -627,11 +627,12 @@ export const SpendComponent: ActionComponent<SpendOptions> = ({
                         </div>
                       </div>
                     }
+                    style="warning"
                   />
                 )}
 
               {isCreating && !!missingAccountChainIds?.length && (
-                <WarningCard
+                <StatusCard
                   className="max-w-xl"
                   content={
                     <div className="flex flex-col items-start gap-3">
@@ -686,6 +687,7 @@ export const SpendComponent: ActionComponent<SpendOptions> = ({
                       )}
                     </div>
                   }
+                  style="warning"
                 />
               )}
             </div>

packages/stateful/actions/core/treasury/token_swap/stateless/ExistingTokenSwap.tsx

@@ -4,8 +4,8 @@ import { useTranslation } from 'react-i18next'
 
 import {
   CopyToClipboard,
+  StatusCard,
   TokenSwapStatus,
-  WarningCard,
 } from '@dao-dao/stateless'
 import { ActionComponent, TokenSwapStatusProps } from '@dao-dao/types'
 
@@ -41,9 +41,10 @@ export const ExistingTokenSwap: ActionComponent<ExistingTokenSwapOptions> = ({
         value={tokenSwapContractAddress}
       />
 
-      <WarningCard
+      <StatusCard
         className="max-w-2xl self-center"
         content={t('info.tokenSwapWarning')}
+        style="warning"
       />
     </>
   )

packages/stateful/components/ProposalLine.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 
-import { ChainProvider, LineLoader, WarningCard } from '@dao-dao/stateless'
+import { ChainProvider, LineLoader, StatusCard } from '@dao-dao/stateless'
 import { StatefulProposalLineProps } from '@dao-dao/types'
 
 import {
@@ -46,7 +46,12 @@ const InnerProposalLine = ({
     ? PreProposeApprovalProposalLine
     : ProposalLine
   if (!Component) {
-    return <WarningCard content={t('error.unsupportedApprovalFailedRender')} />
+    return (
+      <StatusCard
+        content={t('error.unsupportedApprovalFailedRender')}
+        style="warning"
+      />
+    )
   }
 
   return (

packages/stateful/components/SelfRelayExecuteModal.tsx

@@ -115,7 +115,7 @@ type Relayer = {
 export const SelfRelayExecuteModal = ({
   uniqueId,
   chainIds: _chainIds,
-  crossChainMessages,
+  crossChainPackets,
   transaction,
   onSuccess,
   onClose,
@@ -582,7 +582,7 @@ export const SelfRelayExecuteModal = ({
 
     try {
       // Parse the packets from the execution TX events.
-      const packets = parsePacketsFromTendermintEvents(
+      const txPackets = parsePacketsFromTendermintEvents(
         currentExecuteTx.events
       ).map((packet) => ({
         packet,
@@ -602,14 +602,14 @@ export const SelfRelayExecuteModal = ({
 
         const { chain, client } = relayer
 
-        // Get the messages for this chain that need relaying.
-        const messages = crossChainMessages.filter(
+        // Get packets for this chain that need relaying.
+        const packets = crossChainPackets.filter(
           ({ data: { chainId } }) => chainId === chain.chain_id
         )
 
-        // Get packets for this chain that need relaying.
-        const chainPackets = packets.filter(({ packet }) =>
-          messages.some(
+        // Choose TX packets that match packets we want to relay.
+        const chainPackets = txPackets.filter(({ packet }) =>
+          packets.some(
             ({ srcPort, dstPort }) =>
               packet.sourcePort === srcPort &&
               packet.destinationPort === dstPort
@@ -1228,7 +1228,7 @@ export const SelfRelayExecuteModal = ({
                             />
 
                             <Tooltip title={t('info.funded')}>
-                              <Check className="!h-4 !w-4 text-icon-interactive-valid" />
+                              <Check className="text-icon-interactive-valid !h-4 !w-4" />
                             </Tooltip>
                           </div>
                         )}
@@ -1250,7 +1250,7 @@ export const SelfRelayExecuteModal = ({
             content: () =>
               status === RelayStatus.RelayErrored ? (
                 <div className="flex flex-row flex-wrap items-center justify-between gap-x-8 gap-y-4">
-                  <p className="break-all text-text-interactive-error">
+                  <p className="text-text-interactive-error break-all">
                     {relayError}
                   </p>
 
@@ -1277,7 +1277,7 @@ export const SelfRelayExecuteModal = ({
                           relaying.relayer.chain.chain_id
                         )}
                       >
-                        <div className="flex items-center justify-center rounded-l-full bg-background-base p-1">
+                        <div className="bg-background-base flex items-center justify-center rounded-l-full p-1">
                           <div
                             className="h-8 w-8 rounded-full bg-contain bg-center bg-no-repeat"
                             style={{
@@ -1298,7 +1298,7 @@ export const SelfRelayExecuteModal = ({
                           relayers[0].chain.chain_id
                         )}
                       >
-                        <div className="flex items-center justify-center rounded-r-full bg-background-base p-1">
+                        <div className="bg-background-base flex items-center justify-center rounded-r-full p-1">
                           <div
                             className="h-8 w-8 rounded-full bg-contain bg-center bg-no-repeat"
                             style={{
@@ -1384,7 +1384,7 @@ export const SelfRelayExecuteModal = ({
 
                             {empty ? (
                               <Tooltip title="Refunded">
-                                <Check className="!h-4 !w-4 text-icon-interactive-valid" />
+                                <Check className="text-icon-interactive-valid !h-4 !w-4" />
                               </Tooltip>
                             ) : (
                               <Loader fill={false} size={20} />

packages/stateful/components/TreasuryHistoryGraph.tsx

@@ -21,7 +21,7 @@ import useDeepCompareEffect from 'use-deep-compare-effect'
 import {
   Loader,
   SegmentedControls,
-  WarningCard,
+  StatusCard,
   useCachedLoadingWithError,
   useNamedThemeColor,
 } from '@dao-dao/stateless'
@@ -298,21 +298,23 @@ export const TreasuryHistoryGraph = ({
           </div>
         ) : treasuryValueHistory.errored ? (
           <div className="absolute top-0 bottom-0 right-0 left-0 flex animate-fade-in items-center justify-center">
-            <WarningCard
+            <StatusCard
               className="max-w-lg bg-background-primary"
               content={
                 treasuryValueHistory.error instanceof Error
                   ? treasuryValueHistory.error.message
                   : `${treasuryValueHistory.error}`
               }
+              style="warning"
               textClassName="break-words"
             />
           </div>
         ) : treasuryValueHistory.data.timestamps.length === 0 ? (
           <div className="absolute top-0 bottom-0 right-0 left-0 flex animate-fade-in items-center justify-center">
-            <WarningCard
+            <StatusCard
               className="max-w-lg bg-background-primary"
               content={t('error.noTreasuryHistory')}
+              style="warning"
               textClassName="break-words"
             />
           </div>