كيفية إضافة محفظة NFT إلى موقع الويب الخاص بك أو تطبيقك (2026)
تعرف على كيفية إضافة محفظة NFT إلى موقع الويب الخاص بك أو تطبيقك باستخدام واجهة المستخدم Gizmolab. يغطي هذا الدليل خيارين مدعومين: تثبيت مكون المحفظة NFT بالكود أو تضمينه كعنصر واجهة مستخدم بدون كود مخصص.
تتيح محفظة NFT للمستخدمين عرض NFTs المملوكة لعنوان المحفظة مباشرةً داخل منتجك. يُستخدم هذا بشكل شائع لملفات تعريف المستخدمين ولوحات المعلومات والوصول عبر البوابات وصفحات المجتمع.
في هذا الدليل، نغطي طريقتان مدعومتان لإضافة محفظة NFT باستخدام Gizmolab واجهة المستخدم:
- أضف المحفظة NFT مع الكود باستخدام مكون واجهة المستخدم Gizmolab
- قم بتضمين المحفظة NFT كأداة بدون تعليمات برمجية مخصصة
يستخدم كلا الخيارين نفس محفظة Gizmolab واجهة المستخدم NFT، حتى تتمكن من الاختيار بناءً على مقدار التحكم الذي تحتاجه.
هل تحتاج إلى محفظة مخصصة NFT؟
احصل على إرشادات الخبراء من فريقنا في Gizmolab حول إنشاء تجارب NFT مخصصة لمنتجك.
ما تتضمنه محفظة NFT
ال Gizmolab محفظة واجهة المستخدم NFT يوفر المكون الوظائف التالية بشكل افتراضي:
- عرض NFTs المملوكة لعنوان المحفظة
- دعم المحافظ المتصلة وإدخال العنوان يدويًا
- شبكة مرقّمة NFT بحجم صفحة ثابت يبلغ 12
- تحميل الهياكل العظمية، والحالة الفارغة، ومعالجة الأخطاء
- صورة احتياطية لـ NFTs مع بيانات تعريف مفقودة
يتطابق هذا السلوك سواء قمت بتثبيت المكون باستخدام التعليمات البرمجية أو تضمينه كعنصر واجهة مستخدم.
الخيار 1: إضافة محفظة NFT مع الكود
هذا الخيار مخصص للفرق التي تنشئ تطبيقات Web3 مخصصة باستخدام React أو Next.js.
متى تستخدم هذا الخيار
- أنت تقوم ببناء منتج أو لوحة معلومات Web3 كاملة
- تريد السيطرة الكاملة على التخطيط والتصميم
- أنت تخطط لتوسيع محفظة NFT بمنطق مخصص
مكدس التكنولوجيا المستخدمة
تم إنشاء محفظة Gizmolab واجهة المستخدم NFT باستخدام:
- Dynamic لربط المحفظة
- استخدام واجمي () لحالة المحفظة
- الكيمياء SDK لجلب NFTs من قبل المالك
- استعلام تفاعل TanStack للتخزين المؤقت وترقيم الصفحات
- viem للتحقق من صحة العنوان وتنسيق المجموع الاختباري
- shadcn/ui مكونات لبنات بناء واجهة المستخدم
كل هذا المنطق موصول بالفعل داخل مكون واجهة المستخدم Gizmolab.
الخطوة 1: تثبيت التبعيات
قم بتثبيت التبعيات المطلوبة للإصدار EVM.
تثبيت npm @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs/wagmi-connector wagmi viem @tanstack/react-query alchemy-sdkالخطوة 2: إضافة مكونات واجهة المستخدم المطلوبة
قم بتثبيت مكونات shadcn UI التي تستخدمها المحفظة.
npx shadcn@latest إضافة زر هيكلي لإدخال البطاقةالخطوة 3: إضافة متغيرات البيئة
إنشاء أ .env ملف وأضف مفتاح Alchemy API الخاص بك.
ALCHEMY_API_KEY=your_mainnet_keyالخطوة 4: تقديم مكون المحفظة NFT
قم باستيراد وتقديم المحفظة NFT من Gizmolab واجهة المستخدم.
بمجرد تقديمه، يدعم المكون تلقائيًا:
- وضع المحفظة المتصلة
- البحث عن العنوان العام
- NFT ترقيم الصفحات باستخدام الكيمياء
pageKey - حالات التحميل والفارغة والخطأ
ليس هناك حاجة إلى منطق إضافي لجلب البيانات.
يتم تضمين سلوك تجربة المستخدم بشكل افتراضي
يعالج المكون بالفعل حالات حافة الإنتاج:
- يتم رفض عناوين المحفظة غير الصالحة قبل الجلب
- NFTs بدون صور، استخدم عنصرًا نائبًا
- يقتصر ترقيم الصفحات على 12 NFTs لكل صفحة
- يمكن للمستخدمين التبديل بين وضع المحفظة والعنوان
الخيار 2: إضافة محفظة NFT باعتبارها أداة مضمنة
تم تصميم هذا الخيار للفرق التي ترغب في إضافة محفظة NFT بدون كتابة كود التطبيق.
متى تستخدم هذا الخيار
- أنت تستخدم نظام إدارة المحتوى (CMS)، أو Webflow، أو Framer، أو موقع ثابت
- تريد الانطلاق بسرعة
- لا تحتاج إلى تخصيص عميق لواجهة المستخدم
كيف تعمل أداة التضمين
توفر واجهة المستخدم Gizmolab واجهة مستخدم محفظة NFT مستضافة يمكن تضمينها باستخدام iframe.
تتضمن القطعة المضمنة:
- اتصال المحفظة
- إدخال العنوان يدويًا
- NFT ترقيم الصفحات
- نفس واجهة المستخدم والمنطق مثل المكون القائم على التعليمات البرمجية
مثال تضمين مقتطف
<iframe
src="https://ui.gizmolab.io/embed/nft-portfolio"
width="100%"
height="720"
loading="lazy"
></iframe>يمكنك تضمين هذه القطعة داخل:
- صفحات التسويق
- صفحات الملف الشخصي
- بوابات المجتمع
- لوحات تحكم المشرف
- مواقع التوثيق
خيارات تكوين القطعة
اعتمادًا على الإعداد الخاص بك، يمكن أن يدعم التضمين ما يلي:
- عنوان المحفظة الافتراضي
- وضع القراءة فقط
- قيود الارتفاع والتخطيط
- محاذاة الموضوع
يسمح هذا للفرق غير الفنية بشحن محفظة NFT دون تدخل هندسي.
Code vs Embed: أيهما يجب أن تختار؟
| المتطلبات | الخيار الموصى به |
|---|---|
| تطبيق Web3 كامل | الكود |
| صفحة التسويق أو نظام إدارة المحتوى | تضمين |
| واجهة المستخدم المخصصة أو المنطق | الكود |
| أسرع إطلاق | تضمين |
| الصفحات التي تركز على تحسين محركات البحث (SEO). | الكود |
يمكنك البدء باستخدام عنصر واجهة المستخدم المضمن والانتقال إلى المكون المستند إلى التعليمات البرمجية لاحقًا دون تغيير تجربة المستخدم.
ملاحظات تحسين محركات البحث
إذا كانت رؤية البحث مهمة:
- استخدم الخيار القائم على التعليمات البرمجية للصفحات القابلة للفهرسة مثل
/portfolio/[address] - أضف محتوى وصفيًا فوق المحفظة
- قم بتضمين محتوى الأسئلة الشائعة أسفل المكون
- استخدم التضمينات بشكل أساسي للتسويق أو طرق العرض المصادق عليها
الأسئلة المتداولة
هل يمكن للمستخدمين عرض محفظة NFT دون توصيل المحفظة؟
هل يستخدم عنصر واجهة المستخدم المضمن نفس مصدر البيانات؟
هل يمكنني تخصيص واجهة مستخدم المحفظة NFT؟
هل يمكن لمحفظة NFT أن تدعم سلاسل EVM متعددة؟
الاستنتاج
هناك طريقتان معتمدتان لإضافة محفظة NFT باستخدام واجهة المستخدم Gizmolab:
- قم بتثبيت مكون المحفظة NFT بالكود للتحكم الكامل
- قم بتضمين عنصر واجهة مستخدم المحفظة NFT للنشر الفوري
يستخدم كلا الخيارين نفس التنفيذ على مستوى الإنتاج.
إذا كنت بحاجة إلى إعداد مخصص، أو دعم متعدد السلاسل، أو منتج Web3 متكامل تمامًا، Gizmolab يمكنه بنائه لك.
في ملخص
- يمكنك إضافة محفظة NFT عبر مكون React (التثبيت والتخصيص) أو عنصر واجهة المستخدم المضمن (النسخ واللصق).
- يستخدم كلا الخيارين نفس تنفيذ واجهة المستخدم Gizmolab على مستوى الإنتاج.
- يوفر Gizmolab المكون ويمكنه توسيعه لتلبية احتياجات المنتجات متعددة السلاسل أو المنتجات المخصصة.
هل تحتاج إلى حل محفظة مخصص NFT؟
سواء كنت بحاجة إلى دعم متعدد السلاسل، أو تصميم مخصص، أو لوحة معلومات Web3 متكاملة تمامًا، يمكن لفريقنا مساعدتك في إنشائها.