feat(sdk): add fields

Author: mois-ilya

apps/demo-dapp-with-react-ui/src/App.tsx

@@ -11,6 +11,7 @@ import { SignDataTester } from './components/SignDataTester/SignDataTester';
 import { MerkleExample } from './components/MerkleExample/MerkleExample';
 import { FindTransactionDemo } from './components/FindTransactionDemo/FindTransactionDemo';
 import { TransferUsdt } from './components/TransferUsdt/TransferUsdt';
+import { SubscriptionForm } from './components/SubscriptionForm/SubscriptionForm';
 
 function HomePage() {
     return (
@@ -21,9 +22,10 @@ function HomePage() {
             <SignDataTester />
             <TransferUsdt />
             <CreateJettonDemo />
-            <TonProofDemo />
+            {/* <TonProofDemo /> */}
             <FindTransactionDemo />
             <MerkleExample />
+            <SubscriptionForm />
             <Footer />
         </div>
     );

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

@@ -0,0 +1,99 @@
+import { useCallback, useState } from 'react';
+import ReactJson from 'react-json-view';
+import './style.scss';
+import {
+    CreateSubscriptionV2Request,
+    CreateSubscriptionV2Response,
+    useTonConnectUI,
+    useTonWallet,
+} from '@tonconnect/ui-react';
+
+const baseSubscriptionPayload: CreateSubscriptionV2Request = {
+    validUntil: Math.floor(Date.now() / 1000) + 600, // 10 minutes from now
+    subscription: {
+        beneficiary: 'UQCae11h9N5znylEPRjmuLYGvIwnxkcCw4zVW4BJjVASi5eL',
+        id: 0,
+        period: 1209600, // 2 week
+        amount: '100000000',
+        // firstChargeDate: Math.floor(Date.now() / 1000) + 86400, // 1 day from now
+        withdrawAddress: 'UQCae11h9N5znylEPRjmuLYGvIwnxkcCw4zVW4BJjVASi5eL',
+        withdrawMsgBody: 'asdsadasdasda',
+        metadata: {
+            logo: 'https://myapp.com/logo.png',
+            name: 'Example Subscription',
+            description: 'This is an example subscription service.',
+            link: 'https://myapp.com',
+            tos: 'https://myapp.com/tos',
+            merchant: 'Example Merchant',
+            website: 'https://myapp.com',
+        },
+    },
+};
+
+export function SubscriptionForm() {
+    const [subscription, setSubscription] =
+        useState<CreateSubscriptionV2Request>(baseSubscriptionPayload);
+    const [subscriptionRes, setSubscriptionRes] =
+        useState<CreateSubscriptionV2Response | null>(null);
+
+    const wallet = useTonWallet();
+    const [tonConnectUi] = useTonConnectUI();
+
+    const onChange = useCallback((value: object) => {
+        setSubscription(
+            (value as { updated_src: typeof subscription }).updated_src
+        );
+    }, []);
+
+    // const loadTemplate = (template: CreateSubscriptionV2Request) => {
+    //     setSubscription(template);
+    // };
+
+    const onSend = () =>
+        tonConnectUi
+            .createSubscription(subscription, { version: 'v2' })
+            .then((res) => setSubscriptionRes(res));
+
+    return (
+        <div className="create-subscription-form">
+            <h3>Configure and create subsciption</h3>
+            <h4>Subscription data </h4>
+
+            {/* <div className="template-buttons">
+                <button onClick={() => loadTemplate(defaultTextData)}>
+                    Text
+                </button>
+                <button onClick={() => loadTemplate(defaultBinaryData)}>
+                    Binary
+                </button>
+                <button onClick={() => loadTemplate(defaultCellData)}>
+                    Cell
+                </button>
+            </div> */}
+            <ReactJson
+                name={false}
+                src={subscription}
+                theme="ocean"
+                onEdit={onChange}
+                onAdd={onChange}
+                onDelete={onChange}
+            />
+            {subscriptionRes && (
+                <>
+                    <h4>Create subscription response</h4>
+                    <ReactJson
+                        name={false}
+                        src={subscriptionRes}
+                        theme="ocean"
+                    />
+                </>
+            )}
+            {wallet && (
+                <div className="buttons-container">
+                    <button onClick={onSend}>Create subscription</button>
+                    {subscriptionRes && <button>Cancel subscription</button>}
+                </div>
+            )}
+        </div>
+    );
+}

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

@@ -0,0 +1,76 @@
+.create-subscription-form {
+    flex: 1;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: 20px;
+    padding: 20px;
+    align-items: center;
+
+    h3 {
+        color: white;
+        opacity: 0.8;
+        font-size: 28px;
+    }
+
+    h4 {
+        color: white;
+        opacity: 0.8;
+        font-size: 20px;
+        margin: 0;
+    }
+
+    > div {
+        width: 100%;
+
+        span {
+            word-break: break-word;
+        }
+    }
+
+    .buttons-container {
+        display: flex;
+        gap: 10px;
+        margin-top: 16px;
+        justify-content: center;
+
+        > button {
+            border: none;
+            padding: 7px 15px;
+            border-radius: 15px;
+            cursor: pointer;
+
+            background-color: rgba(102, 170, 238, 0.91);
+            color: white;
+            font-size: 16px;
+            line-height: 20px;
+
+            transition: transform 0.1s ease-in-out;
+
+            &:hover {
+                transform: scale(1.03);
+            }
+
+            &:active {
+                transform: scale(0.97);
+            }
+        }
+    }
+
+    .verification-result {
+        margin-top: 16px;
+        padding: 10px;
+        border-radius: 4px;
+        font-weight: bold;
+
+        &.success {
+            background-color: rgba(0, 255, 0, 0.1);
+            color: #00ff00;
+        }
+
+        &.error {
+            background-color: rgba(255, 0, 0, 0.1);
+            color: #ff0000;
+        }
+    }
+}

packages/sdk/src/models/methods/create-subscription-v2/create-subscription-v2-request.ts

@@ -23,8 +23,8 @@ export interface SubscriptionV2Metadata {
 }
 
 export interface CreateSubscriptionV2Details {
-    /** Subscription UUID defined by merchant */
-    id: string;
+    /** Subscription identifier (uint32) */
+    id: number;
     /** Beneficiary address */
     beneficiary: string;
     /** Amount in nanoTON */
@@ -33,6 +33,10 @@ export interface CreateSubscriptionV2Details {
     period: number;
     /** First charging date (optional) */
     firstChargeDate?: number;
+    /** Address that will receive the subscription payment */
+    withdrawAddress: string;
+    /** Message body that will be sent to the withdraw address */
+    withdrawMsgBody?: string;
     /** Subscription metadata */
     metadata: SubscriptionV2Metadata;
 }

packages/sdk/src/parsers/create-subscription-v2-parser.ts

@@ -26,8 +26,10 @@ export class CreateSubscriptionV2Parser extends RpcParser<'createSubscriptionV2'
     convertToRpcRequest(
         request: Omit<CreateSubscriptionV2Request, 'validUntil' | 'subscription'> & {
             valid_until: number;
-            subscription: Omit<CreateSubscriptionV2Request['subscription'], 'firstChargeDate'> & {
+            subscription: Omit<CreateSubscriptionV2Request['subscription'], 'firstChargeDate' | 'withdrawAddress' | 'withdrawMsgBody'> & {
                 first_charge_date?: CreateSubscriptionV2Request['subscription']['firstChargeDate'];
+                withdraw_address: CreateSubscriptionV2Request['subscription']['withdrawAddress'];
+                withdraw_msg_body?: CreateSubscriptionV2Request['subscription']['withdrawMsgBody'];
             };
         }
     ): WithoutId<CreateSubscriptionV2RpcRequest> {

packages/sdk/src/ton-connect.ts

@@ -70,7 +70,8 @@ import {
     validateSendTransactionRequest,
     validateSignDataPayload,
     validateConnectAdditionalRequest,
-    validateTonProofItemReply
+    validateTonProofItemReply,
+    validateCreateSubscriptionV2Request
 } from './validation/schemas';
 import { isQaModeEnabled } from './utils/qa-mode';
 import { normalizeBase64 } from './utils/base64';
@@ -604,6 +605,12 @@ 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);
+        }
+
         this.checkConnection();
         checkSubscriptionSupport(this.wallet!.device.features);
 
@@ -625,17 +632,19 @@ export class TonConnect implements ITonConnect {
         const from = data.from ?? this.account!.address; // TODO: verify if data.from is needed or can be removed in favor of always using this.account!.address
         const network = data.network ?? this.account!.chain;
 
+        const { firstChargeDate, withdrawAddress, withdrawMsgBody, ...subscriptionRest } = data.subscription;
+
         const response = await this.provider!.sendRequest(
             createSubscriptionV2Parser.convertToRpcRequest({
                 ...data,
                 from,
                 network,
                 valid_until: data.validUntil,
                 subscription: {
-                    ...data.subscription,
-                    ...(data.subscription.firstChargeDate !== undefined && {
-                        first_charge_date: data.subscription.firstChargeDate
-                    })
+                    ...subscriptionRest,
+                    ...(firstChargeDate !== undefined && { first_charge_date: firstChargeDate }),
+                    withdraw_address: withdrawAddress,
+                    withdraw_msg_body: withdrawMsgBody
                 }
             }),
             {