feat(ui): implement cancel subscription functionality and enhance error handling in SubscriptionForm

Author: mois-ilya

apps/demo-dapp-with-react-ui/src/components/SubscriptionForm/SubscriptionForm.tsx

@@ -4,6 +4,8 @@ import './style.scss';
 import {
     CreateSubscriptionV2Request,
     CreateSubscriptionV2Response,
+    CancelSubscriptionV2Request,
+    CancelSubscriptionV2Response,
     useTonConnectUI,
     useTonWallet
 } from '@tonconnect/ui-react';
@@ -36,6 +38,9 @@ export function SubscriptionForm() {
     const [subscriptionRes, setSubscriptionRes] = useState<CreateSubscriptionV2Response | null>(
         null
     );
+    const [subscriptionError, setSubscriptionError] = useState<string | null>(null);
+    const [cancelRes, setCancelRes] = useState<CancelSubscriptionV2Response | null>(null);
+    const [cancelError, setCancelError] = useState<string | null>(null);
 
     const wallet = useTonWallet();
     const [tonConnectUi] = useTonConnectUI();
@@ -48,10 +53,45 @@ export function SubscriptionForm() {
     //     setSubscription(template);
     // };
 
-    const onSend = () =>
+    const onSend = () => {
+        setSubscriptionError(null);
         tonConnectUi
             .createSubscription(subscription, { version: 'v2' })
-            .then(res => setSubscriptionRes(res));
+            .then(res => {
+                setSubscriptionRes(res);
+                setSubscriptionError(null);
+            })
+            .catch(err => {
+                setSubscriptionError(err instanceof Error ? err.message : String(err));
+                setSubscriptionRes(null);
+            });
+    };
+
+    const onCancel = () => {
+        if (!subscriptionRes?.boc) {
+            console.error('No subscription response boc available');
+            return;
+        }
+
+        const cancelRequest: CancelSubscriptionV2Request = {
+            validUntil: Math.floor(Date.now() / 1000) + 600, // 10 minutes from now
+            extensionAddress: subscriptionRes.boc,
+            network: subscription.network,
+            from: subscription.from
+        };
+
+        setCancelError(null);
+        tonConnectUi
+            .cancelSubscription(cancelRequest, { version: 'v2' })
+            .then(res => {
+                setCancelRes(res);
+                setCancelError(null);
+            })
+            .catch(err => {
+                setCancelError(err instanceof Error ? err.message : String(err));
+                setCancelRes(null);
+            });
+    };
 
     return (
         <div className="create-subscription-form">
@@ -77,16 +117,42 @@ export function SubscriptionForm() {
                 onAdd={onChange}
                 onDelete={onChange}
             />
+            {subscriptionError && (
+                <>
+                    <h4 style={{ color: 'red' }}>Create subscription error</h4>
+                    <div style={{ color: 'red', padding: '10px', border: '1px solid red' }}>
+                        {subscriptionError}
+                    </div>
+                </>
+            )}
             {subscriptionRes && (
                 <>
-                    <h4>Create subscription response</h4>
+                    <h4 style={{ color: 'green' }}>Create subscription response</h4>
                     <ReactJson name={false} src={subscriptionRes} theme="ocean" />
                 </>
             )}
+            {cancelError && (
+                <>
+                    <h4 style={{ color: 'red' }}>Cancel subscription error</h4>
+                    <div style={{ color: 'red', padding: '10px', border: '1px solid red' }}>
+                        {cancelError}
+                    </div>
+                </>
+            )}
+            {cancelRes && (
+                <>
+                    <h4 style={{ color: 'green' }}>Cancel subscription response</h4>
+                    <ReactJson name={false} src={cancelRes} theme="ocean" />
+                </>
+            )}
             {wallet && (
                 <div className="buttons-container">
                     <button onClick={onSend}>Create subscription</button>
-                    {subscriptionRes && <button>Cancel subscription</button>}
+                    {subscriptionRes && (
+                        <button onClick={onCancel} disabled={!subscriptionRes?.boc}>
+                            Cancel subscription
+                        </button>
+                    )}
                 </div>
             )}
         </div>

packages/sdk/src/ton-connect.ts

@@ -4,6 +4,7 @@ import {
     ConnectItem,
     ConnectRequest,
     CreateSubscriptionV2RpcResponseSuccess,
+    CancelSubscriptionV2RpcResponseSuccess,
     SendTransactionRpcResponseSuccess,
     SignDataPayload,
     SignDataRpcResponseSuccess,
@@ -71,7 +72,8 @@ import {
     validateSignDataPayload,
     validateConnectAdditionalRequest,
     validateTonProofItemReply,
-    validateCreateSubscriptionV2Request
+    validateCreateSubscriptionV2Request,
+    validateCancelSubscriptionV2Request
 } from './validation/schemas';
 import { isQaModeEnabled } from './utils/qa-mode';
 import { normalizeBase64 } from './utils/base64';
@@ -605,7 +607,6 @@ export class TonConnect implements ITonConnect {
             throw new TonConnectError('Subscription V2 creation was aborted');
         }
 
-        // Validate the request
         const validationError = validateCreateSubscriptionV2Request(data);
         if (validationError) {
             throw new TonConnectError(validationError);
@@ -686,6 +687,11 @@ export class TonConnect implements ITonConnect {
             throw new TonConnectError('Subscription V2 cancellation was aborted');
         }
 
+        const validationError = validateCancelSubscriptionV2Request(data);
+        if (validationError) {
+            throw new TonConnectError(validationError);
+        }
+
         this.checkConnection();
         checkSubscriptionSupport(this.wallet!.device.features);
 
@@ -719,7 +725,7 @@ export class TonConnect implements ITonConnect {
         }
 
         const result = cancelSubscriptionV2Parser.convertFromRpcResponse(
-            response as CreateSubscriptionV2RpcResponseSuccess
+            response as CancelSubscriptionV2RpcResponseSuccess
         );
 
         this.tracker.trackCancelSubscriptionV2Completed(this.wallet, data, result);

packages/sdk/src/validation/schemas.ts

@@ -554,3 +554,43 @@ export function validateCreateSubscriptionV2Request(data: unknown): ValidationRe
 
     return null;
 }
+
+export function validateCancelSubscriptionV2Request(data: unknown): ValidationResult {
+    if (!isValidObject(data)) {
+        return 'CancelSubscriptionV2Request must be an object';
+    }
+
+    const allowedKeys = ['validUntil', 'network', 'from', 'extensionAddress'];
+    if (hasExtraProperties(data, allowedKeys)) {
+        return 'CancelSubscriptionV2Request contains extra properties';
+    }
+
+    if (data.validUntil === undefined) {
+        return "Incorrect 'validUntil'";
+    }
+    if (!isValidNumber(data.validUntil)) {
+        return "Incorrect 'validUntil'";
+    }
+
+    const now = Math.floor(Date.now() / 1000);
+    const fiveMinutesFromNow = now + 300;
+    if (data.validUntil > fiveMinutesFromNow) {
+        console.warn(`validUntil (${data.validUntil}) is more than 5 minutes from now (${now})`);
+    }
+
+    if (data.network !== undefined) {
+        if (!isValidNetwork(data.network)) {
+            return "Invalid 'network' format";
+        }
+    }
+
+    if (data.from !== undefined && !isValidAddress(data.from)) {
+        return "Invalid 'from' address format";
+    }
+
+    if (!isValidAddress(data.extensionAddress)) {
+        return "'extensionAddress' is required and must be a valid address";
+    }
+
+    return null;
+}