feat: transaction store and toasts

apps/trading-e2e/src/integration/withdraw.cy.ts

@@ -107,10 +107,7 @@ describe('withdraw actions', { tags: '@regression' }, () => {
     cy.getByTestId('DELAY_TIME_value').should('have.text', 'None');
     cy.get(amountField).clear().type('10');
     cy.getByTestId(submitWithdrawBtn).click();
-    cy.getByTestId('dialog-title').should(
-      'have.text',
-      'Awaiting network confirmation'
-    );
+    cy.getByTestId('toast').should('contain.text', 'Awaiting confirmation');
   });
 
   it.skip('creates a withdrawal on submit'); // Needs capsule

apps/trading/components/vega-transaction/index.tsx

@@ -0,0 +1 @@
+export { VegaTransaction } from './vega-transaction';

apps/trading/components/vega-transaction/vega-transaction.tsx

@@ -0,0 +1,57 @@
+import { WithdrawalFeedback } from '@vegaprotocol/withdraws';
+import { OrderFeedback } from '@vegaprotocol/orders';
+
+import {
+  VegaDialog,
+  VegaTxStatus,
+  isWithdrawTransaction,
+  isOrderCancellationTransaction,
+  isOrderSubmissionTransaction,
+  isOrderAmendmentTransaction,
+} from '@vegaprotocol/wallet';
+import type { VegaStoredTxState } from '@vegaprotocol/wallet';
+import { useEthWithdrawApprovalsStore } from '@vegaprotocol/web3';
+
+export const VegaTransaction = ({
+  transaction,
+}: {
+  transaction: VegaStoredTxState;
+}) => {
+  const createEthWithdrawalApproval = useEthWithdrawApprovalsStore(
+    (state) => state.create
+  );
+  if (isWithdrawTransaction(transaction.body)) {
+    if (
+      transaction.status === VegaTxStatus.Complete &&
+      transaction.withdrawal
+    ) {
+      return (
+        <WithdrawalFeedback
+          transaction={transaction}
+          withdrawal={transaction.withdrawal}
+          availableTimestamp={null}
+          submitWithdraw={() => {
+            if (!transaction?.withdrawal) {
+              return;
+            }
+            createEthWithdrawalApproval(
+              transaction.withdrawal,
+              transaction.withdrawalApproval
+            );
+          }}
+        />
+      );
+    }
+  } else if (
+    (isOrderCancellationTransaction(transaction.body) ||
+      isOrderSubmissionTransaction(transaction.body) ||
+      isOrderAmendmentTransaction(transaction.body)) &&
+    transaction.status === VegaTxStatus.Complete &&
+    transaction.order
+  ) {
+    return (
+      <OrderFeedback transaction={transaction} order={transaction.order} />
+    );
+  }
+  return <VegaDialog transaction={transaction} />;
+};

apps/trading/pages/_app.page.tsx

@@ -5,7 +5,15 @@ import { t, ThemeContext, useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import {
   useEagerConnect as useVegaEagerConnect,
   VegaWalletProvider,
+  useVegaTransactionManager,
+  useVegaTransactionUpdater,
 } from '@vegaprotocol/wallet';
+import {
+  useEagerConnect as useEthereumEagerConnect,
+  useEthTransactionManager,
+  useEthTransactionUpdater,
+  useEthWithdrawApprovalsManager,
+} from '@vegaprotocol/web3';
 import {
   EnvironmentProvider,
   envTriggerMapping,
@@ -18,9 +26,9 @@ import { usePageTitleStore } from '../stores';
 import { Footer } from '../components/footer';
 import { useEffect, useMemo, useState } from 'react';
 import DialogsContainer from './dialogs-container';
+import ToastsManager from './toasts-manager';
 import { HashRouter, useLocation } from 'react-router-dom';
 import { Connectors } from '../lib/vega-connectors';
-import { useEagerConnect as useEthereumEagerConnect } from '@vegaprotocol/web3';
 
 const DEFAULT_TITLE = t('Welcome to Vega trading!');
 
@@ -45,6 +53,15 @@ const Title = () => {
   );
 };
 
+const TransactionsHandler = () => {
+  useVegaTransactionManager();
+  useVegaTransactionUpdater();
+  useEthTransactionManager();
+  useEthTransactionUpdater();
+  useEthWithdrawApprovalsManager();
+  return null;
+};
+
 function AppBody({ Component }: AppProps) {
   const location = useLocation();
   const { VEGA_ENV } = useEnvironment();
@@ -71,6 +88,8 @@ function AppBody({ Component }: AppProps) {
               </main>
               <Footer />
               <DialogsContainer />
+              <ToastsManager />
+              <TransactionsHandler />
               <MaybeConnectEagerly />
             </div>
           </Web3Provider>

apps/trading/pages/dialogs-container.tsx

@@ -4,13 +4,14 @@ import {
 } from '@vegaprotocol/assets';
 import { VegaConnectDialog } from '@vegaprotocol/wallet';
 import { Connectors } from '../lib/vega-connectors';
-import { WithdrawalDialog } from '@vegaprotocol/withdraws';
+import { CreateWithdrawalDialog } from '@vegaprotocol/withdraws';
 import { DepositDialog } from '@vegaprotocol/deposits';
 import { Web3ConnectUncontrolledDialog } from '@vegaprotocol/web3';
 import { WelcomeDialog } from '../components/welcome-dialog';
 
 const DialogsContainer = () => {
   const { isOpen, id, trigger, setOpen } = useAssetDetailsDialogStore();
+
   return (
     <>
       <VegaConnectDialog connectors={Connectors} />
@@ -23,7 +24,7 @@ const DialogsContainer = () => {
       <WelcomeDialog />
       <DepositDialog />
       <Web3ConnectUncontrolledDialog />
-      <WithdrawalDialog />
+      <CreateWithdrawalDialog />
     </>
   );
 };