diff --git a/apps/trading/components/app-loader/web3-provider.tsx b/apps/trading/components/app-loader/web3-provider.tsx index 53dc5d239..aae923567 100644 --- a/apps/trading/components/app-loader/web3-provider.tsx +++ b/apps/trading/components/app-loader/web3-provider.tsx @@ -1,13 +1,16 @@ +import type { DefaultWeb3ProviderContextShape } from '@vegaprotocol/web3'; import { useEthereumConfig, createConnectors, Web3Provider as Web3ProviderInternal, useWeb3ConnectStore, + createDefaultProvider, } from '@vegaprotocol/web3'; import { AsyncRenderer } from '@vegaprotocol/ui-toolkit'; import { t } from '@vegaprotocol/i18n'; import { useEnvironment } from '@vegaprotocol/environment'; import type { ReactNode } from 'react'; +import { useState } from 'react'; import { useEffect } from 'react'; export const Web3Provider = ({ children }: { children: ReactNode }) => { @@ -17,10 +20,13 @@ export const Web3Provider = ({ children }: { children: ReactNode }) => { const connectors = useWeb3ConnectStore((store) => store.connectors); const initializeConnectors = useWeb3ConnectStore((store) => store.initialize); + const [defaultProvider, setDefaultProvider] = useState< + DefaultWeb3ProviderContextShape['provider'] | undefined + >(undefined); useEffect(() => { if (config?.chain_id) { - return initializeConnectors( + initializeConnectors( createConnectors( ETHEREUM_PROVIDER_URL, Number(config?.chain_id), @@ -29,6 +35,11 @@ export const Web3Provider = ({ children }: { children: ReactNode }) => { ), Number(config.chain_id) ); + const defaultProvider = createDefaultProvider( + ETHEREUM_PROVIDER_URL, + Number(config?.chain_id) + ); + setDefaultProvider(defaultProvider); } }, [ config?.chain_id, @@ -49,7 +60,10 @@ export const Web3Provider = ({ children }: { children: ReactNode }) => { }} noDataMessage={t('Could not fetch Ethereum configuration')} > - + <>{children} diff --git a/apps/trading/pages/toasts-manager.tsx b/apps/trading/pages/toasts-manager.tsx index 25f432ca1..da2deca5a 100644 --- a/apps/trading/pages/toasts-manager.tsx +++ b/apps/trading/pages/toasts-manager.tsx @@ -3,12 +3,17 @@ import { useUpdateNetworkParametersToasts } from '@vegaprotocol/proposals'; import { useVegaTransactionToasts } from '@vegaprotocol/web3'; import { useEthereumTransactionToasts } from '@vegaprotocol/web3'; import { useEthereumWithdrawApprovalsToasts } from '@vegaprotocol/web3'; +import { Routes } from './client-router'; +import { useReadyToWithdrawalToasts } from '@vegaprotocol/withdraws'; export const ToastsManager = () => { useUpdateNetworkParametersToasts(); useVegaTransactionToasts(); useEthereumTransactionToasts(); useEthereumWithdrawApprovalsToasts(); + useReadyToWithdrawalToasts({ + withdrawalsLink: `${Routes.PORTFOLIO}#withdrawals`, + }); const toasts = useToasts((store) => store.toasts); return ; diff --git a/libs/ui-toolkit/src/components/toast/toast.tsx b/libs/ui-toolkit/src/components/toast/toast.tsx index 3a5033282..e035379a3 100644 --- a/libs/ui-toolkit/src/components/toast/toast.tsx +++ b/libs/ui-toolkit/src/components/toast/toast.tsx @@ -26,6 +26,7 @@ export type Toast = { onClose?: () => void; signal?: 'close'; loader?: boolean; + hidden?: boolean; }; type ToastProps = Toast & { diff --git a/libs/ui-toolkit/src/components/toast/toasts-container.tsx b/libs/ui-toolkit/src/components/toast/toasts-container.tsx index bc4acd604..aff2c2ca3 100644 --- a/libs/ui-toolkit/src/components/toast/toasts-container.tsx +++ b/libs/ui-toolkit/src/components/toast/toasts-container.tsx @@ -13,11 +13,13 @@ import { Portal } from '@radix-ui/react-portal'; type ToastsContainerProps = { toasts: Toasts; order: 'asc' | 'desc'; + showHidden?: boolean; }; export const ToastsContainer = ({ toasts, order = 'asc', + showHidden = false, }: ToastsContainerProps) => { const ref = useRef(); const closeAll = useToasts((store) => store.closeAll); @@ -72,13 +74,15 @@ export const ToastsContainer = ({ })} > {toasts && - Object.values(toasts).map((toast) => { - return ( -
  • - -
  • - ); - })} + Object.values(toasts) + .filter((t) => !t.hidden || showHidden) + .map((toast) => { + return ( +
  • + +
  • + ); + })} +

    + + ); +}; + +const SingleReadyToWithdrawToastContent = ({ + withdrawal, +}: { + withdrawal: WithdrawalFieldsFragment; +}) => { + const { createEthWithdrawalApproval } = useEthWithdrawApprovalsStore( + (state) => ({ + createEthWithdrawalApproval: state.create, + }) + ); + + const { data: approval } = useWithdrawalApprovalQuery({ + variables: { + withdrawalId: withdrawal.id, + }, + }); + const completeButton = ( +

    + +

    + ); + const amount = formatNumber( + toBigNum(withdrawal.amount, withdrawal.asset.decimals), + withdrawal.asset.decimals + ); + return ( + <> + {t('Withdrawal ready')} +

    {t('Complete the withdrawal to release your funds')}

    + + + {t('Withdraw')} {amount} {withdrawal.asset.symbol} + + + {completeButton} + + ); +};