diff --git a/apps/trading/components/ticket/elements/submit-button.tsx b/apps/trading/components/ticket/elements/submit-button.tsx index 10809f33a0..1bf9926d80 100644 --- a/apps/trading/components/ticket/elements/submit-button.tsx +++ b/apps/trading/components/ticket/elements/submit-button.tsx @@ -1,9 +1,7 @@ -import { cn } from '@vegaprotocol/ui-toolkit'; - +import { cn, VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit'; import { Side } from '@vegaprotocol/types'; import { useForm } from '../use-form'; import { useDialogStore, useWallet } from '@vegaprotocol/wallet-react'; -import { Intent, Button } from '@vegaprotocol/ui-toolkit'; import { useT } from '../../../lib/use-t'; import { useFundsAvailable } from '../../../lib/hooks/use-funds-available'; import { useTicketContext } from '../ticket-context'; @@ -15,6 +13,16 @@ import { } from 'apps/trading/lib/hooks/use-sidebar'; import { toBigNum } from '@vegaprotocol/utils'; import BigNumber from 'bignumber.js'; +import { type ReactNode } from 'react'; +import omit from 'lodash/omit'; + +type SubmitButtonProps = { + type: 'button' | 'submit'; + side: Side | 'indeterminate'; + disabled: boolean; + onClick?: () => void; + children: ReactNode; +}; export const SubmitButton = ({ text }: { text: string }) => { const t = useT(); @@ -34,26 +42,12 @@ export const SubmitButton = ({ text }: { text: string }) => { setSidebarInnerView([SidebarAccountsViewType.Deposit, assetId]); }; - const { fundsAvailable } = useFundsAvailable(); + const { fundsAvailable, loading: fundsLoading } = useFundsAvailable(); const ticket = useTicketContext(); const form = useForm(); const side = form.watch('side'); - const buttonProps = { - size: 'lg', - className: 'w-full', - intent: Intent.Secondary, - } as const; - - if (!connected) { - return ( - - ); - } - const asset = ticket.type === 'default' ? ticket.settlementAsset @@ -63,35 +57,81 @@ export const SubmitButton = ({ text }: { text: string }) => { const funds = fundsAvailable?.find((f) => f.asset.id === asset.id); const amount = funds ? toBigNum(funds.balance, asset.decimals) : BigNumber(0); + const needsDeposit = !fundsLoading && amount.isZero(); - if (amount.isZero()) { - return ( - - ); + let p: SubmitButtonProps = { + type: 'button', + side, + disabled: true, + onClick: undefined, + children: text, + }; + + if (!connected) { + p = { + type: 'button', + side: 'indeterminate', + disabled: false, + onClick: openDialog, + children: t('Connect'), + }; + } else if (fundsLoading) { + p = { + type: 'button', + side, + disabled: true, + onClick: undefined, + children: ( +