fix(trading): handle lack of approval in trading deposit flow (#3278)

libs/deposits/src/lib/approve-notification.tsx

@@ -16,6 +16,7 @@ interface ApproveNotificationProps {
   balances: DepositBalances | null;
   amount: string;
   approveTxId: number | null;
+  intent?: Intent;
 }
 
 export const ApproveNotification = ({
@@ -26,6 +27,7 @@ export const ApproveNotification = ({
   balances,
   approved,
   approveTxId,
+  intent = Intent.Warning,
 }: ApproveNotificationProps) => {
   const tx = useEthTransactionStore((state) => {
     return state.transactions.find((t) => t?.id === approveTxId);
@@ -46,7 +48,7 @@ export const ApproveNotification = ({
   const approvePrompt = (
     <div className="mb-4">
       <Notification
-        intent={Intent.Warning}
+        intent={intent}
         testId="approve-default"
         message={t(
           `Before you can make a deposit of your chosen asset, ${selectedAsset?.symbol}, you need to approve its use in your Ethereum wallet`
@@ -63,7 +65,7 @@ export const ApproveNotification = ({
   const reApprovePrompt = (
     <div className="mb-4">
       <Notification
-        intent={Intent.Warning}
+        intent={intent}
         testId="reapprove-default"
         message={t(
           `Approve again to deposit more than ${formatNumber(

libs/deposits/src/lib/deposit-form.tsx

@@ -83,6 +83,8 @@ export const DepositForm = ({
   const openDialog = useWeb3ConnectStore((store) => store.open);
   const { isActive, account } = useWeb3React();
   const { pubKey, pubKeys: _pubKeys } = useVegaWallet();
+  const [approveNotificationIntent, setApproveNotificationIntent] =
+    useState<Intent>(Intent.Warning);
   const {
     register,
     handleSubmit,
@@ -103,8 +105,10 @@ export const DepositForm = ({
     if (!selectedAsset || selectedAsset.source.__typename !== 'ERC20') {
       throw new Error('Invalid asset');
     }
-    if (!approved) throw new Error('Deposits not approved');
-
+    if (!approved) {
+      setApproveNotificationIntent(Intent.Danger);
+      return;
+    }
     submitDeposit({
       assetSource: selectedAsset.source.contractAddress,
       amount: fields.amount,
@@ -355,9 +359,13 @@ export const DepositForm = ({
         isActive={isActive}
         approveTxId={approveTxId}
         selectedAsset={selectedAsset}
-        onApprove={submitApprove}
+        onApprove={() => {
+          submitApprove();
+          setApproveNotificationIntent(Intent.Warning);
+        }}
         balances={balances}
         approved={approved}
+        intent={approveNotificationIntent}
         amount={amount}
       />
       <FormButton approved={approved} selectedAsset={selectedAsset} />