From b33226cccd22bc83c7ed8faaf12c73948c141a22 Mon Sep 17 00:00:00 2001 From: sam-keen Date: Fri, 5 May 2023 14:30:02 +0100 Subject: [PATCH] fix(3552) added toasts for withdrawals to governance site, and moved some tooling from trading into shared libs accordingly --- apps/governance/src/app.tsx | 12 ++++++- apps/governance/src/toasts-manager.tsx | 17 +++++++++ apps/trading/pages/toasts-manager.tsx | 6 ++-- libs/web3/src/index.ts | 4 +++ .../lib}/use-ethereum-transaction-toasts.tsx | 12 +++---- .../use-ethereum-withdraw-approval-toasts.tsx | 7 ++-- .../lib}/use-vega-transaction-toasts.spec.tsx | 0 .../src/lib}/use-vega-transaction-toasts.tsx | 2 +- .../src/lib/withdrawal-approval-status.tsx | 36 +++++++++++++++++++ .../src/lib/use-verify-withdrawal.ts | 13 ++----- libs/withdraws/src/lib/withdrawals-table.tsx | 36 ++----------------- 11 files changed, 87 insertions(+), 58 deletions(-) create mode 100644 apps/governance/src/toasts-manager.tsx rename {apps/trading/lib/hooks => libs/web3/src/lib}/use-ethereum-transaction-toasts.tsx (95%) rename {apps/trading/lib/hooks => libs/web3/src/lib}/use-ethereum-withdraw-approval-toasts.tsx (90%) rename {apps/trading/lib/hooks => libs/web3/src/lib}/use-vega-transaction-toasts.spec.tsx (100%) rename {apps/trading/lib/hooks => libs/web3/src/lib}/use-vega-transaction-toasts.tsx (99%) create mode 100644 libs/web3/src/lib/withdrawal-approval-status.tsx diff --git a/apps/governance/src/app.tsx b/apps/governance/src/app.tsx index 7becca47a..314416d83 100644 --- a/apps/governance/src/app.tsx +++ b/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 = ({ + diff --git a/apps/governance/src/toasts-manager.tsx b/apps/governance/src/toasts-manager.tsx new file mode 100644 index 000000000..25f75a712 --- /dev/null +++ b/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 ; +}; + +export default ToastsManager; diff --git a/apps/trading/pages/toasts-manager.tsx b/apps/trading/pages/toasts-manager.tsx index b293b67eb..25f432ca1 100644 --- a/apps/trading/pages/toasts-manager.tsx +++ b/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 { useEthereumTransactionToasts } from '../lib/hooks/use-ethereum-transaction-toasts'; -import { useEthereumWithdrawApprovalsToasts } from '../lib/hooks/use-ethereum-withdraw-approval-toasts'; +import { useVegaTransactionToasts } from '@vegaprotocol/web3'; +import { useEthereumTransactionToasts } from '@vegaprotocol/web3'; +import { useEthereumWithdrawApprovalsToasts } from '@vegaprotocol/web3'; export const ToastsManager = () => { useUpdateNetworkParametersToasts(); diff --git a/libs/web3/src/index.ts b/libs/web3/src/index.ts index 5dc95034c..beaedc770 100644 --- a/libs/web3/src/index.ts +++ b/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'; diff --git a/apps/trading/lib/hooks/use-ethereum-transaction-toasts.tsx b/libs/web3/src/lib/use-ethereum-transaction-toasts.tsx similarity index 95% rename from apps/trading/lib/hooks/use-ethereum-transaction-toasts.tsx rename to libs/web3/src/lib/use-ethereum-transaction-toasts.tsx index 168879cef..5a9235f23 100644 --- a/apps/trading/lib/hooks/use-ethereum-transaction-toasts.tsx +++ b/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 { - EthTxStatus, - isEthereumError, - TransactionContent, - useEthTransactionStore, -} from '@vegaprotocol/web3'; +import type { EthStoredTxState } from './use-ethereum-transaction-store'; +import { EthTxStatus } from './use-ethereum-transaction'; +import { isEthereumError } from './ethereum-error'; +import { TransactionContent } from './ethereum-transaction-dialog'; +import { useEthTransactionStore } from './use-ethereum-transaction-store'; const intentMap: { [s in EthTxStatus]: Intent } = { Default: Intent.Primary, diff --git a/apps/trading/lib/hooks/use-ethereum-withdraw-approval-toasts.tsx b/libs/web3/src/lib/use-ethereum-withdraw-approval-toasts.tsx similarity index 90% rename from apps/trading/lib/hooks/use-ethereum-withdraw-approval-toasts.tsx rename to libs/web3/src/lib/use-ethereum-withdraw-approval-toasts.tsx index 1582b57d4..d80dce460 100644 --- a/apps/trading/lib/hooks/use-ethereum-withdraw-approval-toasts.tsx +++ b/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 { useEthWithdrawApprovalsStore } from '@vegaprotocol/web3'; +import type { EthWithdrawalApprovalState } from './use-ethereum-withdraw-approvals-store'; +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, diff --git a/apps/trading/lib/hooks/use-vega-transaction-toasts.spec.tsx b/libs/web3/src/lib/use-vega-transaction-toasts.spec.tsx similarity index 100% rename from apps/trading/lib/hooks/use-vega-transaction-toasts.spec.tsx rename to libs/web3/src/lib/use-vega-transaction-toasts.spec.tsx diff --git a/apps/trading/lib/hooks/use-vega-transaction-toasts.tsx b/libs/web3/src/lib/use-vega-transaction-toasts.tsx similarity index 99% rename from apps/trading/lib/hooks/use-vega-transaction-toasts.tsx rename to libs/web3/src/lib/use-vega-transaction-toasts.tsx index 36793dd30..6727f662e 100644 --- a/apps/trading/lib/hooks/use-vega-transaction-toasts.tsx +++ b/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, diff --git a/libs/web3/src/lib/withdrawal-approval-status.tsx b/libs/web3/src/lib/withdrawal-approval-status.tsx new file mode 100644 index 000000000..63527b439 --- /dev/null +++ b/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

{state.message || t('Something went wrong')}

; + } + + if (state.status === ApprovalStatus.Pending) { + return

{t('Verifying...')}

; + } + + if (state.status === ApprovalStatus.Delayed && state.completeTimestamp) { + const formattedTime = getDateTimeFormat().format( + new Date(state.completeTimestamp) + ); + return ( + <> +

{t("The amount you're withdrawing has triggered a time delay")}

+

{t(`Cannot be completed until ${formattedTime}`)}

+ + ); + } + + if (state.status === ApprovalStatus.Ready) { + return

{t('The withdrawal has been approved.')}

; + } + + return null; +}; diff --git a/libs/withdraws/src/lib/use-verify-withdrawal.ts b/libs/withdraws/src/lib/use-verify-withdrawal.ts index 6e75f6a6c..153701159 100644 --- a/libs/withdraws/src/lib/use-verify-withdrawal.ts +++ b/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; diff --git a/libs/withdraws/src/lib/withdrawals-table.tsx b/libs/withdraws/src/lib/withdrawals-table.tsx index 2d6ed18d7..c61a76062 100644 --- a/libs/withdraws/src/lib/withdrawals-table.tsx +++ b/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 @@ -195,31 +193,3 @@ const RecipientCell = ({ ); }; - -export const VerificationStatus = ({ state }: { state: VerifyState }) => { - if (state.status === ApprovalStatus.Error) { - return

{state.message || t('Something went wrong')}

; - } - - if (state.status === ApprovalStatus.Pending) { - return

{t('Verifying...')}

; - } - - if (state.status === ApprovalStatus.Delayed && state.completeTimestamp) { - const formattedTime = getDateTimeFormat().format( - new Date(state.completeTimestamp) - ); - return ( - <> -

{t("The amount you're withdrawing has triggered a time delay")}

-

{t(`Cannot be completed until ${formattedTime}`)}

- - ); - } - - if (state.status === ApprovalStatus.Ready) { - return

{t('The withdrawal has been approved.')}

; - } - - return null; -};