كيفية إنشاء واجهة تبديل STON.fi الأساسية في React يجب أن تعطي واجهة تبديل STON.fi في React الأولوية لسير عمل نظيف وموثوق بدلًا من التعقيد البصري. يتمثل العمل الأساسي في توصيل محفظة TON، تحميل الأصول الصحيحة، تحويل مبالغ العرض إلى وحدات على السلسلة، محاكاة التبديل، بناء المعاملة باستخدام الـ SDK، وإرسالها عبر TON Connect دون كشف المفاتيح الخاصة. يجب أن تدير الواجهة خمس حالات: حالة المحفظة للاتصال والعنوان، وحالة الأصول للأصول المحددة «من» و«إلى»، وحالة المبلغ للتحويل العشري، وحالة المحاكاة لعرض السعر والحد الأدنى للمبلغ المستلم، وحالة المعاملة الجاهزة أو قيد الانتظار أو المكتملة أو الفاشلة. ابدأ بتثبيت @ston-fi/sdk و@ston-fi/api و@tonconnect/ui-react و@ton/ton. لف التطبيق باستخدام TonConnectUIProvider واربط ملف الـ manifest الصحيح. جلب الأصول عبر StonApiClient، ثم حوّل إدخال المستخدم إلى وحدات بلوكتشين دقيقة بحيث يستخدم التطبيق قيمًا دقيقة بدلًا من أرقام العرض. قبل بناء المعاملة، استدعِ simulateSwap. ستُرجع المسار والمخرجات المتوقعة والحد الأدنى للمبلغ المستلم وبيانات الموجّه (router) المطلوبة للتنفيذ. إذا غيّر المستخدم زوج الرموز أو المبلغ، امسح المحاكاة السابقة وأعد الحساب فورًا حتى تتطابق واجهة المستخدم مع أحدث عرض. بمجرد أن تصبح المحاكاة جاهزة، استخدم بيانات الموجّه المُرجعة مع dexFactory لبناء معلمات المعاملة النهائية. يعتمد المسار على الاتجاه: $GRAM إلى jetton، $JETTON إلى $GRAM ، أو $JETTON إلى jetton. تُعد المحاكاة قلب سير العمل لأنها تحدد ما من المحتمل أن يستلمه المستخدم وما يجب قبوله لكي يستمر التبديل. إذا لم يتطابق عرض السعر على الشاشة مع المعاملة الموقعة، تنهار الثقة. مسار عملي وبسيط هو: توصيل المحفظة، اختيار أصول الإدخال والإخراج، إدخال المبلغ، محاكاة التبديل، مراجعة المخرجات المتوقعة، ثم بناء المعاملة وإرسالها عبر TON Connect. استكشف المزيد حول تطبيق STON.fi على app.ston.fi .