كيفية إنشاء واجهة تبديل أساسية لـ STON.fi في React
إن بناء واجهة تبديل لـ STON.fi في React أقل تعقيدًا من مجرد إضافة تعقيدات بصرية، وأكثر من ذلك يتعلق بتصميم تدفق نظيف وموثوق. ينبغي لواجهة جيدة التنظيم أن تقوم بتوصيل محفظة TON، وتحميل الأصول الصحيحة، وتحويل المبالغ القابلة للقراءة من قبل الإنسان إلى وحدات على البلوكتشين، ومحاكاة التبديل، ثم بناء المعاملة باستخدام الـ SDK، وإرسالها عبر TON Connect دون تعريض أي مفاتيح خاصة.
بالنسبة للإصدار الأول، ليس الهدف هو تحميل الواجهة بالمخططات أو التحليلات المتقدمة أو الإضافات غير الضرورية. إن الأساس الحقيقي لتجربة تبديل تعمل بشكل صحيح هو إدارة الحالة بدقة وتدفق المعاملات الذي يتطابق تمامًا مع ما يراه المستخدم على الشاشة.
ما الذي تحتاجه الواجهة
يجب أن تدير واجهة تبديل STON.fi الأساسية خمسة أجزاء رئيسية من الحالة:
حالة المحفظة
يتتبع هذا ما إذا كانت المحفظة متصلة ويخزن عنوان المحفظة النشطة. بدون ذلك، لا يمكن للواجهة إعداد معاملة أو إرسالها.
حالة الأصل
يُحدد هذا رمز "المن" ورمز "إلى" اللذين يريد المستخدم التبديل بينهما. يجب أن تجعل الواجهة هذه الاختيارات سهلة التحديث وواضحة عند الحاجة إلى مسار جديد.
حالة المبلغ
يجب تحويل المبلغ الذي أدخله المستخدم إلى وحدات دقيقة على السلسلة باستخدام كسور الرمز (decimals). هذه خطوة حاسمة لأن معاملات البلوكشين لا تعمل مع قيم العرض وحدها.
حالة المحاكاة
يحتوي هذا على استجابة الاقتباس، بما في ذلك مسار التبديل والمخرجات المتوقعة وقيم الحد الأدنى للإخراج. هذه هي أهم خطوة في التدفق لأنها تحدد ما إذا كانت المعاملة يجب أن تستمر أم لا.
حالة المعاملة
يتتبع هذا عملية الموافقة النهائية أو الرفض. يجب أن يعكس ما إذا كانت المعاملة جاهزة للتوقيع، قيد الانتظار، مكتملة، أو فاشلة.
خطوات الإعداد الأساسية
يمكن تجميع واجهة تبديل STON.fi بسيطة مبنية على React في خطوات منظمة قليلة.
1. تثبيت الحزم المطلوبة
ابدأ بإضافة المكتبات المطلوبة لـ STON.fi واتصال المحفظة. الحزم الأساسية هي:
@ston-fi/sdk
@ston-fi/api
@tonconnect/ui-react
@ton/ton
توفر هذه الأدوات للاستعلام عن الأصول وبناء منطق التبديل وربط المحافظ والتعامل مع معاملات TON بشكل صحيح.
2. لف التطبيق باستخدام TonConnectUIProvider
يجب لف التطبيق داخل TonConnectUIProvider وربطه بملف manifest الصحيح. هذا ما يتيح اتصال المحفظة عبر TON Connect ويضمن أن الواجهة يمكنها التواصل مع المحافظ المدعومة بطريقة آمنة.
3. جلب الأصول وتحويل المبالغ
استخدم StonApiClient لجلب الأصول المتاحة. بمجرد أن يختار المستخدم زوج الرموز، حوِّل المبلغ الذي تم إدخاله باستخدام كسور الرمز (decimals) حتى يعمل التطبيق مع القيم الدقيقة على السلسلة بدلًا من أرقام العرض الفضفاضة.
تُعد هذه الخطوة مهمة لأن أي خطأ بسيط في التحويل قد يؤدي إلى معاملة فاشلة أو اقتباس غير دقيق.
4. قم بمحاكاة التبديل أولًا
قبل بناء المعاملة، استدعِ simulateSwap. تُرجع المحاكاة المسار والحد الأدنى المتوقع للمخرجات وبيانات الموجّه (router) الوصفية المطلوبة للتبديل الفعلي. هذه هي المصدر الوحيد للحقيقة للمعاملة النهائية.
إذا قام المستخدم بتغيير أي من الرمزَين أو المبلغ، يجب مسح المحاكاة فورًا وإعادة حسابها. هذا يحافظ على الواجهة صادقة ويضمن أن المعاملة الموقعة تطابق دائمًا أحدث اقتباس معروض للمستخدم.
5. إنشاء معاملات المعاملة
بمجرد أن تصبح المحاكاة جاهزة، استخدم بيانات الموجّه التي تم إرجاعها مع dexFactory لإنشاء معاملات التبديل النهائية.
يختلف شكل المعاملة اعتمادًا على اتجاه التبديل:
TON إلى Jetton
Jetton إلى TON
Jetton إلى Jetton
لكل حالة بنيتها الخاصة، لذلك يجب على الواجهة اختيار مسار المعاملة الصحيح بناءً على زوج الأصول الذي يحدده المستخدم.
لماذا تأتي المحاكاة أولًا
المحاكاة هي قلب تدفق التبديل. فهي تخبر الواجهة بما يُرجح أن يستلمه المستخدم، وما يجب أن تكون عليه قيمة الإخراج الدنيا المقبولة، وإلى أي تفاصيل الموجّه يجب إعادة استخدامها عند بناء المعاملة النهائية.
وهذا مهم لكلٍ من الدقة والثقة.
إذا رأى المستخدم اقتباسًا واحدًا على الشاشة لكنه يقوم بالتوقيع على معاملة مختلفة خلف الكواليس، فإن التجربة تنهار فورًا. من خلال جعل المحاكاة هي الخطوة الأولى بعد اختيار الرمز وإدخال المبلغ، يبقى الواجهة متوافقة مع مسار البلوكشين الفعلي ويحمي المستخدم من عدم تطابق التنفيذ.
نهج عملي للواجهة
يمكن بناء واجهة تبديل STON.fi النظيفة حول تسلسل بسيط:
اتصال المحفظة
اختر أصول الإدخال والإخراج
أدخل المبلغ
محاكاة التبديل
راجع المخرجات المتوقعة
إنشاء وإرسال المعاملة عبر TON Connect
يحافظ هذا التدفق على بقاء الواجهة سهلة الاستخدام مع احترام المتطلبات التقنية وراء تبديل حقيقي على السلسلة.
خلاصة عملية
أفضل طريقة لبناء واجهة تبديل STON.fi أساسية في React هي إبقاء المنطق مركزًا حول المحاكاة. بمجرد توفر الاقتباس، اعتبره المصدر الوحيد للحقيقة لاختيار المسار، والوحدات الدقيقة، وقيم الحد الأدنى المستلمة، وبناء المعاملة.
لا يحتاج الإصدار الأول القوي إلى ضوضاء بصرية إضافية. فهو يحتاج إلى إدارة حالة موثوقة، وتغذية راجعة واضحة للمستخدم، وتدفق تبديل يعكس بدقة ما سيحدث على السلسلة.
استكشف المزيد على تطبيق STON.fi في app.ston.fi.
هل ستبدأ بزر TON Connect أم بمحددات الأصول أولًا؟ شارك في التعليقات الجزء من التدفق الذي ما زال غير واضح بالنسبة لك.