fix(governance): added toasts for withdrawals (#3621)

apps/governance/src/app.tsx

@@ -20,12 +20,17 @@ import type { EthereumConfig } from '@vegaprotocol/web3';
 import {
   createConnectors,
   useEthTransactionManager,
+  useEthTransactionUpdater,
   useEthWithdrawApprovalsManager,
   useWeb3ConnectStore,
 } from '@vegaprotocol/web3';
 import { Web3Provider } from '@vegaprotocol/web3';
 import { VegaWalletDialogs } from './components/vega-wallet-dialogs';
-import { VegaWalletProvider } from '@vegaprotocol/wallet';
+import {
+  useVegaTransactionManager,
+  useVegaTransactionUpdater,
+  VegaWalletProvider,
+} from '@vegaprotocol/wallet';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import { useEthereumConfig } from '@vegaprotocol/web3';
 import {
@@ -37,6 +42,7 @@ import { ENV } from './config';
 import type { InMemoryCacheConfig } from '@apollo/client';
 import { WithdrawalDialog } from '@vegaprotocol/withdraws';
 import { SplashLoader } from './components/splash-loader';
+import { ToastsManager } from './toasts-manager';
 
 const cache: InMemoryCacheConfig = {
   typePolicies: {
@@ -81,7 +87,10 @@ const Web3Container = ({
   providerUrl: string;
 }) => {
   const InitializeHandlers = () => {
+    useVegaTransactionManager();
+    useVegaTransactionUpdater();
     useEthTransactionManager();
+    useEthTransactionUpdater();
     useEthWithdrawApprovalsManager();
     return null;
   };
@@ -135,6 +144,7 @@ const Web3Container = ({
                       <NetworkInfo />
                     </footer>
                   </AppLayout>
+                  <ToastsManager />
                   <InitializeHandlers />
                   <VegaWalletDialogs />
                   <TransactionModal />

apps/governance/src/toasts-manager.tsx

@@ -0,0 +1,17 @@
+import { ToastsContainer, useToasts } from '@vegaprotocol/ui-toolkit';
+import {
+  useEthereumTransactionToasts,
+  useEthereumWithdrawApprovalsToasts,
+  useVegaTransactionToasts,
+} from '@vegaprotocol/web3';
+
+export const ToastsManager = () => {
+  useVegaTransactionToasts();
+  useEthereumTransactionToasts();
+  useEthereumWithdrawApprovalsToasts();
+
+  const toasts = useToasts((store) => store.toasts);
+  return <ToastsContainer order="desc" toasts={toasts} />;
+};
+
+export default ToastsManager;

apps/trading/pages/toasts-manager.tsx

@@ -1,8 +1,8 @@
 import { ToastsContainer, useToasts } from '@vegaprotocol/ui-toolkit';
 import { useUpdateNetworkParametersToasts } from '@vegaprotocol/proposals';
-import { useVegaTransactionToasts } from '../lib/hooks/use-vega-transaction-toasts';
+import { useVegaTransactionToasts } from '@vegaprotocol/web3';
-import { useEthereumTransactionToasts } from '../lib/hooks/use-ethereum-transaction-toasts';
+import { useEthereumTransactionToasts } from '@vegaprotocol/web3';
-import { useEthereumWithdrawApprovalsToasts } from '../lib/hooks/use-ethereum-withdraw-approval-toasts';
+import { useEthereumWithdrawApprovalsToasts } from '@vegaprotocol/web3';
 
 export const ToastsManager = () => {
   useUpdateNetworkParametersToasts();

libs/web3/src/index.ts

@@ -22,3 +22,7 @@ export * from './lib/web3-connect-dialog';
 export * from './lib/web3-connect-store';
 export * from './lib/web3-connectors';
 export * from './lib/web3-provider';
+export * from './lib/use-vega-transaction-toasts';
+export * from './lib/use-ethereum-transaction-toasts';
+export * from './lib/use-ethereum-withdraw-approval-toasts';
+export * from './lib/withdrawal-approval-status';

libs/web3/src/lib/use-ethereum-transaction-toasts.tsx

@@ -11,13 +11,11 @@ import { useToasts } from '@vegaprotocol/ui-toolkit';
 import { Intent, ProgressBar } from '@vegaprotocol/ui-toolkit';
 import { useCallback } from 'react';
 import compact from 'lodash/compact';
-import type { EthStoredTxState } from '@vegaprotocol/web3';
+import type { EthStoredTxState } from './use-ethereum-transaction-store';
-import {
+import { EthTxStatus } from './use-ethereum-transaction';
-  EthTxStatus,
+import { isEthereumError } from './ethereum-error';
-  isEthereumError,
+import { TransactionContent } from './ethereum-transaction-dialog';
-  TransactionContent,
+import { useEthTransactionStore } from './use-ethereum-transaction-store';
-  useEthTransactionStore,
-} from '@vegaprotocol/web3';
 
 const intentMap: { [s in EthTxStatus]: Intent } = {
   Default: Intent.Primary,

libs/web3/src/lib/use-ethereum-withdraw-approval-toasts.tsx

@@ -6,11 +6,12 @@ import { Panel } from '@vegaprotocol/ui-toolkit';
 import { CLOSE_AFTER } from '@vegaprotocol/ui-toolkit';
 import { useToasts } from '@vegaprotocol/ui-toolkit';
 import { Intent } from '@vegaprotocol/ui-toolkit';
-import { ApprovalStatus, VerificationStatus } from '@vegaprotocol/withdraws';
 import { useCallback } from 'react';
 import compact from 'lodash/compact';
-import type { EthWithdrawalApprovalState } from '@vegaprotocol/web3';
+import type { EthWithdrawalApprovalState } from './use-ethereum-withdraw-approvals-store';
-import { useEthWithdrawApprovalsStore } from '@vegaprotocol/web3';
+import { useEthWithdrawApprovalsStore } from './use-ethereum-withdraw-approvals-store';
+import { ApprovalStatus } from './use-ethereum-withdraw-approvals-store';
+import { VerificationStatus } from './withdrawal-approval-status';
 
 const intentMap: { [s in ApprovalStatus]: Intent } = {
   Pending: Intent.Warning,

libs/web3/src/lib/use-vega-transaction-toasts.tsx

@@ -37,7 +37,7 @@ import {
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import { useAssetsDataProvider } from '@vegaprotocol/assets';
-import { useEthWithdrawApprovalsStore } from '@vegaprotocol/web3';
+import { useEthWithdrawApprovalsStore } from './use-ethereum-withdraw-approvals-store';
 import { DApp, EXPLORER_TX, useLinks } from '@vegaprotocol/environment';
 import {
   getOrderToastIntent,

libs/web3/src/lib/withdrawal-approval-status.tsx

@@ -0,0 +1,36 @@
+import { t } from '@vegaprotocol/i18n';
+import { getDateTimeFormat } from '@vegaprotocol/utils';
+import type { EthWithdrawalApprovalState } from './use-ethereum-withdraw-approvals-store';
+import { ApprovalStatus } from './use-ethereum-withdraw-approvals-store';
+
+export const VerificationStatus = ({
+  state,
+}: {
+  state: EthWithdrawalApprovalState;
+}) => {
+  if (state.status === ApprovalStatus.Error) {
+    return <p>{state.message || t('Something went wrong')}</p>;
+  }
+
+  if (state.status === ApprovalStatus.Pending) {
+    return <p>{t('Verifying...')}</p>;
+  }
+
+  if (state.status === ApprovalStatus.Delayed && state.completeTimestamp) {
+    const formattedTime = getDateTimeFormat().format(
+      new Date(state.completeTimestamp)
+    );
+    return (
+      <>
+        <p>{t("The amount you're withdrawing has triggered a time delay")}</p>
+        <p>{t(`Cannot be completed until ${formattedTime}`)}</p>
+      </>
+    );
+  }
+
+  if (state.status === ApprovalStatus.Ready) {
+    return <p>{t('The withdrawal has been approved.')}</p>;
+  }
+
+  return null;
+};

libs/withdraws/src/lib/use-verify-withdrawal.ts

@@ -4,25 +4,18 @@ import BigNumber from 'bignumber.js';
 import { addDecimal } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import {
-  useGetWithdrawThreshold,
+  ApprovalStatus,
   useGetWithdrawDelay,
+  useGetWithdrawThreshold,
 } from '@vegaprotocol/web3';
 import type { WithdrawalFieldsFragment } from './__generated__/Withdrawal';
-import { Erc20ApprovalDocument } from './__generated__/Erc20Approval';
 import type {
   Erc20ApprovalQuery,
   Erc20ApprovalQueryVariables,
 } from './__generated__/Erc20Approval';
+import { Erc20ApprovalDocument } from './__generated__/Erc20Approval';
 import { useApolloClient } from '@apollo/client';
 
-export enum ApprovalStatus {
-  Idle = 'Idle',
-  Pending = 'Pending',
-  Delayed = 'Delayed',
-  Error = 'Error',
-  Ready = 'Ready',
-}
-
 export interface VerifyState {
   status: ApprovalStatus;
   message?: string;

libs/withdraws/src/lib/withdrawals-table.tsx

@@ -2,26 +2,24 @@ import { useRef } from 'react';
 import type { AgGridReact } from 'ag-grid-react';
 import { AgGridColumn } from 'ag-grid-react';
 import {
-  getDateTimeFormat,
-  truncateByChars,
   addDecimalsFormatNumber,
+  getDateTimeFormat,
   isNumeric,
+  truncateByChars,
 } from '@vegaprotocol/utils';
 import { useBottomPlaceholder } from '@vegaprotocol/react-helpers';
 import { t } from '@vegaprotocol/i18n';
 import { ButtonLink } from '@vegaprotocol/ui-toolkit';
-import { AgGridLazy as AgGrid } from '@vegaprotocol/datagrid';
 import type {
   TypedDataAgGrid,
   VegaICellRendererParams,
   VegaValueFormatterParams,
 } from '@vegaprotocol/datagrid';
+import { AgGridLazy as AgGrid } from '@vegaprotocol/datagrid';
 import { EtherscanLink } from '@vegaprotocol/environment';
 import type { WithdrawalFieldsFragment } from './__generated__/Withdrawal';
 import { useEthWithdrawApprovalsStore } from '@vegaprotocol/web3';
 import * as Schema from '@vegaprotocol/types';
-import type { VerifyState } from './use-verify-withdrawal';
-import { ApprovalStatus } from './use-verify-withdrawal';
 
 export const WithdrawalsTable = (
   props: TypedDataAgGrid<WithdrawalFieldsFragment>
@@ -195,31 +193,3 @@ const RecipientCell = ({
     </EtherscanLink>
   );
 };
-
-export const VerificationStatus = ({ state }: { state: VerifyState }) => {
-  if (state.status === ApprovalStatus.Error) {
-    return <p>{state.message || t('Something went wrong')}</p>;
-  }
-
-  if (state.status === ApprovalStatus.Pending) {
-    return <p>{t('Verifying...')}</p>;
-  }
-
-  if (state.status === ApprovalStatus.Delayed && state.completeTimestamp) {
-    const formattedTime = getDateTimeFormat().format(
-      new Date(state.completeTimestamp)
-    );
-    return (
-      <>
-        <p>{t("The amount you're withdrawing has triggered a time delay")}</p>
-        <p>{t(`Cannot be completed until ${formattedTime}`)}</p>
-      </>
-    );
-  }
-
-  if (state.status === ApprovalStatus.Ready) {
-    return <p>{t('The withdrawal has been approved.')}</p>;
-  }
-
-  return null;
-};