LaconicNetwork/vega-frontend-monorepo
6
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat: tidy up dialogs

Browse Source
This commit is contained in:
Matthew Russell
2023-07-20 12:53:47 +01:00
parent c699947a7f
commit 337b6f2841
21 changed files with 155 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/trading/client-pages/portfolio/deposits-container.tsx
+2 -2
View File
@@ -6,7 +6,7 @@ import { useDataProvider } from '@vegaprotocol/data-provider';
import { useVegaWallet } from '@vegaprotocol/wallet';
import { useRef } from 'react';
import type { AgGridReact } from 'ag-grid-react';
import { useSidebar } from '../../components/sidebar';
import { useSidebar, ViewType } from '../../components/sidebar';
export const DepositsContainer = () => {
const gridRef = useRef<AgGridReact | null>(null);
@@ -29,7 +29,7 @@ export const DepositsContainer = () => {
<Button
variant="primary"
size="sm"
onClick={() => setView('deposit')}
onClick={() => setView({ type: ViewType.Deposit })}
data-testid="deposit-button"
>
{t('Deposit')}
apps/trading/client-pages/portfolio/withdrawals-container.tsx
+2 -2
View File
@@ -8,7 +8,7 @@ import { useVegaWallet } from '@vegaprotocol/wallet';
import { t } from '@vegaprotocol/i18n';
import { useDataProvider } from '@vegaprotocol/data-provider';
import { VegaWalletContainer } from '../../components/vega-wallet-container';
import { useSidebar } from '../../components/sidebar';
import { ViewType, useSidebar } from '../../components/sidebar';
export const WithdrawalsContainer = () => {
const { pubKey, isReadOnly } = useVegaWallet();
@@ -36,7 +36,7 @@ export const WithdrawalsContainer = () => {
<Button
variant="primary"
size="sm"
onClick={() => setView('withdraw')}
onClick={() => setView({ type: ViewType.Withdraw })}
data-testid="withdraw-dialog-button"
>
{t('Make withdrawal')}
apps/trading/components/accounts-container/accounts-container.tsx
+12 -9
View File
@@ -1,19 +1,17 @@
import { useCallback } from 'react';
import { Button } from '@vegaprotocol/ui-toolkit';
import { t } from '@vegaprotocol/i18n';
import { useWithdrawalDialog } from '@vegaprotocol/withdraws';
import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
import { Splash } from '@vegaprotocol/ui-toolkit';
import { useVegaWallet } from '@vegaprotocol/wallet';
import type { PinnedAsset } from '@vegaprotocol/accounts';
import { AccountManager } from '@vegaprotocol/accounts';
import { useDepositDialog } from '@vegaprotocol/deposits';
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import { useDataGridEvents } from '@vegaprotocol/datagrid';
import type { DataGridSlice } from '../../stores/datagrid-store-slice';
import { createDataGridSlice } from '../../stores/datagrid-store-slice';
import { useSidebar } from '../sidebar';
import { ViewType, useSidebar } from '../sidebar';
export const AccountsContainer = ({
pinnedAsset,
@@ -26,8 +24,6 @@ export const AccountsContainer = ({
}) => {
const { pubKey, isReadOnly } = useVegaWallet();
const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
const openWithdrawalDialog = useWithdrawalDialog((store) => store.open);
const openDepositDialog = useDepositDialog((store) => store.open);
const { setView } = useSidebar();
const gridStore = useAccountStore((store) => store.gridStore);
@@ -56,8 +52,15 @@ export const AccountsContainer = ({
<AccountManager
partyId={pubKey}
onClickAsset={onClickAsset}
onClickWithdraw={openWithdrawalDialog}
onClickDeposit={openDepositDialog}
onClickWithdraw={(assetId) => {
setView({ type: ViewType.Withdraw, assetId });
}}
onClickDeposit={(assetId) => {
setView({ type: ViewType.Deposit, assetId });
}}
onClickTransfer={(assetId) => {
setView({ type: ViewType.Transfer, assetId });
}}
onMarketClick={onMarketClick}
isReadOnly={isReadOnly}
pinnedAsset={pinnedAsset}
@@ -69,14 +72,14 @@ export const AccountsContainer = ({
variant="primary"
size="sm"
data-testid="open-transfer-dialog"
onClick={() => setView('transfer')}
onClick={() => setView({ type: ViewType.Transfer })}
>
{t('Transfer')}
</Button>
<Button
variant="primary"
size="sm"
onClick={() => setView('deposit')}
onClick={() => setView({ type: ViewType.Deposit })}
>
{t('Deposit')}
</Button>
apps/trading/components/sidebar/sidebar.tsx
+75 -34
View File
@@ -3,7 +3,6 @@ import { DepositContainer } from '@vegaprotocol/deposits';
import { VLogo, VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
import { Tooltip } from '../../components/tooltip';
import { WithdrawFormContainer } from '@vegaprotocol/withdraws';
import { TradingViews } from '../../client-pages/market/trade-views';
import { create } from 'zustand';
import { Route, Routes, useParams } from 'react-router-dom';
import { Settings } from '../settings';
@@ -12,14 +11,39 @@ import { NodeHealthContainer } from '../node-health';
import { MarketInfoAccordionContainer } from '@vegaprotocol/markets';
import { t } from '@vegaprotocol/i18n';
import { DealTicketContainer } from '@vegaprotocol/deal-ticket';
import { WithdrawContainer } from '../withdraw-container';
export enum ViewType {
Order = 'Order',
Info = 'Info',
Deposit = 'Deposit',
Withdraw = 'Withdraw',
Transfer = 'Transfer',
Settings = 'Settings',
}
type SidebarView =
| 'order'
| 'info'
| 'deposit'
| 'withdraw'
| 'transfer'
| 'settings';
| {
type: ViewType.Deposit;
assetId?: string;
}
| {
type: ViewType.Withdraw;
assetId?: string;
}
| {
type: ViewType.Transfer;
assetId?: string;
}
| {
type: ViewType.Order;
}
| {
type: ViewType.Info;
}
| {
type: ViewType.Settings;
};
export const Sidebar = () => {
return (
@@ -31,17 +55,17 @@ export const Sidebar = () => {
<nav className="flex flex-col items-stretch gap-2 p-1">
{/* sidebar options that always show */}
<SidebarButton
view="deposit"
view={ViewType.Deposit}
icon={VegaIconNames.DEPOSIT}
tooltip="Deposit"
/>
<SidebarButton
view="withdraw"
view={ViewType.Withdraw}
icon={VegaIconNames.WITHDRAW}
tooltip="Withdraw"
/>
<SidebarButton
view="transfer"
view={ViewType.Transfer}
icon={VegaIconNames.TRANSFER}
tooltip="Transfer"
/>
@@ -54,12 +78,12 @@ export const Sidebar = () => {
<>
<SidebarDivider />
<SidebarButton
view="order"
view={ViewType.Order}
icon={VegaIconNames.TREND_UP}
tooltip="Order"
/>
<SidebarButton
view="info"
view={ViewType.Info}
icon={VegaIconNames.BREAKDOWN}
tooltip="Market specification"
/>
@@ -70,7 +94,7 @@ export const Sidebar = () => {
</nav>
<nav className="mt-auto flex flex-col items-stretch gap-2 p-1">
<SidebarButton
view="settings"
view={ViewType.Settings}
icon={VegaIconNames.COG}
tooltip="Settings"
/>
@@ -86,19 +110,29 @@ const SidebarButton = ({
icon,
tooltip,
}: {
view: SidebarView;
view: ViewType;
icon: VegaIconNames;
tooltip: string;
}) => {
const { view: currView, setView } = useSidebar();
const buttonClasses = classNames('flex items-center p-2 rounded', {
'text-vega-clight-200 dark:text-vega-cdark-200 hover:bg-vega-clight-500 dark:hover:bg-vega-cdark-500':
view !== currView,
'bg-vega-yellow hover:bg-vega-yellow-550 text-black': view === currView,
view !== currView?.type,
'bg-vega-yellow hover:bg-vega-yellow-550 text-black':
view === currView?.type,
});
return (
<Tooltip description={tooltip} align="center" side="right" sideOffset={10}>
<button className={buttonClasses} onClick={() => setView(view)}>
<button
className={buttonClasses}
onClick={() => {
if (view === currView?.type) {
setView(null);
} else {
setView({ type: view });
}
}}
>
<VegaIcon name={icon} size={20} />
</button>
</Tooltip>
@@ -111,33 +145,40 @@ const SidebarDivider = () => {
export const SidebarContent = () => {
const params = useParams();
const { view } = useSidebar();
const { view, setView } = useSidebar();
if (view === 'order') {
if (!view) return null;
if (view.type === ViewType.Order) {
if (params.marketId) {
return <DealTicketContainer marketId={params.marketId} />;
return (
<DealTicketContainer
marketId={params.marketId}
onDeposit={(assetId) => setView({ type: ViewType.Deposit, assetId })}
/>
);
} else {
return <p>{t('No market selected')}</p>;
}
}
if (view === 'deposit') {
return <DepositContainer />;
if (view.type === ViewType.Deposit) {
return <DepositContainer assetId={view.assetId} />;
}
if (view === 'withdraw') {
return <WithdrawFormContainer submit={() => alert('TODO')} />;
if (view.type === ViewType.Withdraw) {
return <WithdrawContainer assetId={view.assetId} />;
}
if (view === 'transfer') {
return <TransferContainer />;
if (view.type === ViewType.Transfer) {
return <TransferContainer assetId={view.assetId} />;
}
if (view === 'settings') {
if (view.type === ViewType.Settings) {
return <Settings />;
}
if (view === 'info') {
if (view.type === ViewType.Info) {
if (params.marketId) {
return <MarketInfoAccordionContainer marketId={params.marketId} />;
} else {
@@ -145,8 +186,7 @@ export const SidebarContent = () => {
}
}
// sidebar not open
return null;
throw new Error('invalid sidebar');
};
export const useSidebar = create<{
@@ -154,11 +194,12 @@ export const useSidebar = create<{
setView: (view: SidebarView | null) => void;
}>()((set) => ({
view: null,
setView: (view) =>
set((state) => {
if (view === state.view) {
setView: (x) =>
set(() => {
if (x === null) {
return { view: null };
}
return { view };
return { view: x };
}),
}));
apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx
+2 -2
View File
@@ -22,7 +22,7 @@ import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
import { Networks, useEnvironment } from '@vegaprotocol/environment';
import { WalletIcon } from '../icons/wallet';
import { useCopyTimeout } from '@vegaprotocol/react-helpers';
import { useSidebar } from '../sidebar';
import { ViewType, useSidebar } from '../sidebar';
const MobileWalletButton = ({
isConnected,
@@ -209,7 +209,7 @@ export const VegaWalletConnectButton = () => {
{!isReadOnly && (
<DropdownMenuItem
data-testid="wallet-transfer"
onClick={() => setView('transfer')}
onClick={() => setView({ type: ViewType.Transfer })}
>
{t('Transfer')}
</DropdownMenuItem>
apps/trading/components/withdraw-container/index.ts
+1
View File
@@ -0,0 +1 @@
export * from './withdraw-container';
apps/trading/components/withdraw-container/withdraw-container.tsx
+27
View File
@@ -0,0 +1,27 @@
import { useVegaWallet } from '@vegaprotocol/wallet';
import { WithdrawFormContainer } from '@vegaprotocol/withdraws';
import { useVegaTransactionStore } from '@vegaprotocol/wallet';
export const WithdrawContainer = ({ assetId }: { assetId?: string }) => {
const { pubKey } = useVegaWallet();
const createTransaction = useVegaTransactionStore((state) => state.create);
return (
<WithdrawFormContainer
assetId={assetId}
partyId={pubKey ? pubKey : undefined}
submit={({ amount, asset, receiverAddress }) => {
createTransaction({
withdrawSubmission: {
amount,
asset,
ext: {
erc20: {
receiverAddress,
},
},
},
});
}}
/>
);
};
apps/trading/pages/dialogs-container.tsx
-6
View File
@@ -4,14 +4,11 @@ import {
} from '@vegaprotocol/assets';
import { VegaConnectDialog } from '@vegaprotocol/wallet';
import { Connectors } from '../lib/vega-connectors';
import { CreateWithdrawalDialog } from '@vegaprotocol/withdraws';
import { DepositDialog } from '@vegaprotocol/deposits';
import {
Web3ConnectUncontrolledDialog,
WithdrawalApprovalDialogContainer,
} from '@vegaprotocol/web3';
import { WelcomeDialog } from '../components/welcome-dialog';
import { TransferDialog } from '@vegaprotocol/accounts';
import { RiskMessage } from '../components/welcome-dialog';
const DialogsContainer = () => {
@@ -29,10 +26,7 @@ const DialogsContainer = () => {
onChange={setOpen}
/>
<WelcomeDialog />
<DepositDialog />
<Web3ConnectUncontrolledDialog />
<CreateWithdrawalDialog />
<TransferDialog />
<WithdrawalApprovalDialogContainer />
</>
);
libs/accounts/src/lib/accounts-actions-dropdown.tsx
+3 -3
View File
@@ -8,7 +8,6 @@ import {
VegaIcon,
VegaIconNames,
} from '@vegaprotocol/ui-toolkit';
import { useTransferDialog } from './transfer-dialog';
import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
export const AccountsActionsDropdown = ({
@@ -17,15 +16,16 @@ export const AccountsActionsDropdown = ({
onClickDeposit,
onClickWithdraw,
onClickBreakdown,
onClickTransfer,
}: {
assetId: string;
assetContractAddress?: string;
onClickDeposit: () => void;
onClickWithdraw: () => void;
onClickBreakdown: () => void;
onClickTransfer: () => void;
}) => {
const etherscanLink = useEtherscanLink();
const openTransferDialog = useTransferDialog((store) => store.open);
const openAssetDialog = useAssetDetailsDialogStore((store) => store.open);
return (
@@ -49,7 +49,7 @@ export const AccountsActionsDropdown = ({
<DropdownMenuItem
key={'transfer'}
data-testid="transfer"
onClick={() => openTransferDialog(true, assetId)}
onClick={onClickTransfer}
>
<VegaIcon name={VegaIconNames.TRANSFER} size={16} />
{t('Transfer')}
libs/accounts/src/lib/accounts-manager.tsx
+3
View File
@@ -100,6 +100,7 @@ interface AccountManagerProps {
onClickAsset: (assetId: string) => void;
onClickWithdraw?: (assetId?: string) => void;
onClickDeposit?: (assetId?: string) => void;
onClickTransfer?: (assetId?: string) => void;
onMarketClick?: (marketId: string, metaKey?: boolean) => void;
isReadOnly: boolean;
pinnedAsset?: PinnedAsset;
@@ -110,6 +111,7 @@ export const AccountManager = ({
onClickAsset,
onClickWithdraw,
onClickDeposit,
onClickTransfer,
partyId,
isReadOnly,
pinnedAsset,
@@ -141,6 +143,7 @@ export const AccountManager = ({
onClickAsset={onClickAsset}
onClickDeposit={onClickDeposit}
onClickWithdraw={onClickWithdraw}
onClickTransfer={onClickTransfer}
onClickBreakdown={setBreakdownAssetId}
isReadOnly={isReadOnly}
pinnedAsset={pinnedAsset}
libs/accounts/src/lib/accounts-table.tsx
+6
View File
@@ -70,6 +70,7 @@ export interface AccountTableProps extends AgGridReactProps {
onClickWithdraw?: (assetId: string) => void;
onClickDeposit?: (assetId: string) => void;
onClickBreakdown?: (assetId: string) => void;
onClickTransfer?: (assetId: string) => void;
isReadOnly: boolean;
pinnedAsset?: PinnedAsset;
}
@@ -81,6 +82,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
onClickWithdraw,
onClickDeposit,
onClickBreakdown,
onClickTransfer,
rowData,
isReadOnly,
pinnedAsset,
@@ -284,6 +286,9 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
onClickBreakdown={() => {
onClickBreakdown && onClickBreakdown(assetId);
}}
onClickTransfer={() => {
onClickTransfer && onClickTransfer(assetId);
}}
/>
);
},
@@ -295,6 +300,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
onClickBreakdown,
onClickDeposit,
onClickWithdraw,
onClickTransfer,
isReadOnly,
showDepositButton,
]);
libs/accounts/src/lib/index.ts
-1
View File
@@ -7,7 +7,6 @@ export * from './breakdown-table';
export * from './use-account-balance';
export * from './get-settlement-account';
export * from './use-market-account-balance';
export * from './transfer-dialog';
export * from './__generated__/Margins';
export { MarginHealthChart } from './margin-health-chart';
export * from './margin-data-provider';
libs/accounts/src/lib/transfer-container.tsx
+1 -4
View File
@@ -11,13 +11,11 @@ import { useVegaTransactionStore, useVegaWallet } from '@vegaprotocol/wallet';
import { useCallback, useMemo } from 'react';
import { accountsDataProvider } from './accounts-data-provider';
import { TransferForm } from './transfer-form';
import { useTransferDialog } from './transfer-dialog';
import { Lozenge } from '@vegaprotocol/ui-toolkit';
import sortBy from 'lodash/sortBy';
export const TransferContainer = ({ assetId }: { assetId?: string }) => {
const { pubKey, pubKeys } = useVegaWallet();
const open = useTransferDialog((store) => store.open);
const { param } = useNetworkParam(NetworkParams.transfer_fee_factor);
const { data } = useDataProvider({
dataProvider: accountsDataProvider,
@@ -29,9 +27,8 @@ export const TransferContainer = ({ assetId }: { assetId?: string }) => {
const transfer = useCallback(
(transfer: Transfer) => {
create({ transfer });
open(false);
},
[create, open]
[create]
);
const assets = useMemo(() => {
libs/accounts/src/lib/transfer-dialog.tsx
-30
View File
@@ -1,30 +0,0 @@
import { t } from '@vegaprotocol/i18n';
import { Dialog } from '@vegaprotocol/ui-toolkit';
import { create } from 'zustand';
import { TransferContainer } from './transfer-container';
interface State {
isOpen: boolean;
assetId: string | undefined;
}
interface Actions {
open: (open?: boolean, assetId?: string) => void;
}
export const useTransferDialog = create<State & Actions>()((set) => ({
isOpen: false,
assetId: undefined,
open: (open = true, assetId) => {
set(() => ({ isOpen: open, assetId }));
},
}));
export const TransferDialog = () => {
const { isOpen, open, assetId } = useTransferDialog();
return (
<Dialog title={t('Transfer')} open={isOpen} onChange={open} size="small">
<TransferContainer assetId={assetId} />
</Dialog>
);
};
libs/deal-ticket/src/components/deal-ticket-validation/margin-warning.tsx
+3 -4
View File
@@ -1,7 +1,6 @@
import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
import { t } from '@vegaprotocol/i18n';
import { Notification, Intent } from '@vegaprotocol/ui-toolkit';
import { useDepositDialog } from '@vegaprotocol/deposits';
interface Props {
margin: string;
@@ -11,10 +10,10 @@ interface Props {
symbol: string;
decimals: number;
};
onDeposit: (assetId: string) => void;
}
export const MarginWarning = ({ margin, balance, asset }: Props) => {
const openDepositDialog = useDepositDialog((state) => state.open);
export const MarginWarning = ({ margin, balance, asset, onDeposit }: Props) => {
return (
<Notification
intent={Intent.Warning}
@@ -29,7 +28,7 @@ export const MarginWarning = ({ margin, balance, asset }: Props) => {
} ${t('available.')}`}
buttonProps={{
text: t(`Deposit ${asset.symbol}`),
action: () => openDepositDialog(asset.id),
action: () => onDeposit(asset.id),
dataTestId: 'deal-ticket-deposit-dialog-button',
size: 'sm',
}}
libs/deal-ticket/src/components/deal-ticket-validation/zero-balance-error.tsx
+3 -3
View File
@@ -1,5 +1,4 @@
import { Intent, Notification, Link } from '@vegaprotocol/ui-toolkit';
import { useDepositDialog } from '@vegaprotocol/deposits';
import { t } from '@vegaprotocol/i18n';
interface ZeroBalanceErrorProps {
@@ -8,13 +7,14 @@ interface ZeroBalanceErrorProps {
symbol: string;
};
onClickCollateral?: () => void;
onDeposit: (assetId: string) => void;
}
export const ZeroBalanceError = ({
asset,
onClickCollateral,
onDeposit,
}: ZeroBalanceErrorProps) => {
const openDepositDialog = useDepositDialog((state) => state.open);
return (
<Notification
intent={Intent.Warning}
@@ -35,7 +35,7 @@ export const ZeroBalanceError = ({
}
buttonProps={{
text: t(`Make a deposit`),
action: () => openDepositDialog(asset.id),
action: () => onDeposit(asset.id),
dataTestId: 'deal-ticket-deposit-dialog-button',
size: 'sm',
}}
libs/deal-ticket/src/components/deal-ticket/deal-ticket-container.tsx
+3
View File
@@ -9,12 +9,14 @@ export interface DealTicketContainerProps {
marketId: string;
onMarketClick?: (marketId: string, metaKey?: boolean) => void;
onClickCollateral?: () => void;
onDeposit: (assetId: string) => void;
}
export const DealTicketContainer = ({
marketId,
onMarketClick,
onClickCollateral,
onDeposit,
}: DealTicketContainerProps) => {
const {
data: market,
@@ -50,6 +52,7 @@ export const DealTicketContainer = ({
submit={(orderSubmission) => create({ orderSubmission })}
onClickCollateral={onClickCollateral}
onMarketClick={onMarketClick}
onDeposit={onDeposit}
/>
) : (
<Splash>
libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx
+12 -1
View File
@@ -62,6 +62,7 @@ export interface DealTicketProps {
onMarketClick?: (marketId: string, metaKey?: boolean) => void;
submit: (order: OrderSubmission) => void;
onClickCollateral?: () => void;
onDeposit: (assetId: string) => void;
}
export const DealTicket = ({
@@ -70,6 +71,7 @@ export const DealTicket = ({
marketData,
submit,
onClickCollateral,
onDeposit,
}: DealTicketProps) => {
const { pubKey, isReadOnly } = useVegaWallet();
// store last used tif for market so that when changing OrderType the previous TIF
@@ -536,6 +538,7 @@ export const DealTicket = ({
isReadOnly={isReadOnly}
pubKey={pubKey}
onClickCollateral={onClickCollateral}
onDeposit={onDeposit}
/>
<DealTicketButton side={order.side} />
<DealTicketFeeDetails
@@ -566,6 +569,7 @@ interface SummaryMessageProps {
isReadOnly: boolean;
pubKey: string | null;
onClickCollateral?: () => void;
onDeposit: (assetId: string) => void;
}
const SummaryMessage = memo(
({
@@ -577,6 +581,7 @@ const SummaryMessage = memo(
isReadOnly,
pubKey,
onClickCollateral,
onDeposit,
}: SummaryMessageProps) => {
// Specific error UI for if balance is so we can
// render a deposit dialog
@@ -626,6 +631,7 @@ const SummaryMessage = memo(
<ZeroBalanceError
asset={asset}
onClickCollateral={onClickCollateral}
onDeposit={onDeposit}
/>
</div>
);
@@ -648,7 +654,12 @@ const SummaryMessage = memo(
if (BigInt(balance) < BigInt(margin) && BigInt(balance) > BigInt(0)) {
return (
<div className="mb-2">
<MarginWarning balance={balance} margin={margin} asset={asset} />
<MarginWarning
balance={balance}
margin={margin}
asset={asset}
onDeposit={onDeposit}
/>
</div>
);
}
libs/deposits/src/lib/deposit-dialog.tsx
-42
View File
@@ -1,42 +0,0 @@
import { create } from 'zustand';
import { t } from '@vegaprotocol/i18n';
import { Dialog } from '@vegaprotocol/ui-toolkit';
import { DepositContainer } from './deposit-container';
import { useWeb3ConnectStore } from '@vegaprotocol/web3';
import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
interface State {
isOpen: boolean;
assetId?: string;
}
interface Actions {
open: (assetId?: string) => void;
close: () => void;
}
export const useDepositDialog = create<State & Actions>()((set) => ({
isOpen: false,
assetId: undefined,
open: (assetId) => set(() => ({ assetId, isOpen: true })),
close: () => set(() => ({ assetId: undefined, isOpen: false })),
}));
export const DepositDialog = () => {
const { assetId, isOpen, open, close } = useDepositDialog();
const assetDetailsDialogOpen = useAssetDetailsDialogStore(
(state) => state.isOpen
);
const connectWalletDialogIsOpen = useWeb3ConnectStore(
(state) => state.isOpen
);
return (
<Dialog
open={isOpen && !(connectWalletDialogIsOpen || assetDetailsDialogOpen)}
onChange={(isOpen) => (isOpen ? open() : close())}
title={t('Deposit')}
>
<DepositContainer assetId={assetId} />
</Dialog>
);
};
libs/deposits/src/lib/deposit-manager.tsx
-3
View File
@@ -7,7 +7,6 @@ import { useSubmitApproval } from './use-submit-approval';
import { useSubmitFaucet } from './use-submit-faucet';
import { useCallback, useState } from 'react';
import { useDepositBalances } from './use-deposit-balances';
import { useDepositDialog } from './deposit-dialog';
import type { Asset } from '@vegaprotocol/assets';
import {
useEthTransactionStore,
@@ -34,7 +33,6 @@ export const DepositManager = ({
const [assetId, setAssetId] = useState(persistentDeposit?.assetId);
const asset = assets.find((a) => a.id === assetId);
const bridgeContract = useBridgeContract();
const closeDepositDialog = useDepositDialog((state) => state.close);
const { getBalances, reset, balances } = useDepositBalances(asset);
@@ -62,7 +60,6 @@ export const DepositManager = ({
config?.confirmations ?? 1,
true
);
closeDepositDialog();
};
const onAmountChange = useCallback(
libs/deposits/src/lib/index.ts
-1
View File
@@ -1,7 +1,6 @@
export * from './__generated__/Deposit';
export * from './asset-balance';
export * from './deposit-container';
export * from './deposit-dialog';
export * from './deposit-form';
export * from './deposit-limits';
export * from './deposit-manager';