Как добавить портфолио NFT на свой веб-сайт или в приложение (2026 г.)

Портфолио NFT позволяет пользователям просматривать NFTs, принадлежащий адресу кошелька, непосредственно внутри вашего продукта. Обычно это используется для профилей пользователей, информационных панелей, закрытого доступа и страниц сообщества.

В этом руководстве мы рассмотрим два поддерживаемых способа добавить портфолио NFT с помощью Gizmolab Интерфейс:

1. Добавьте портфолио NFT с кодом, используя компонент пользовательского интерфейса Gizmolab
2. Встройте портфолио NFT как виджет без специального кода.

Оба варианта используют тот же Gizmolab пользовательский интерфейс NFT Портфолио, поэтому вы можете выбирать в зависимости от того, какой уровень контроля вам нужен.

Что включает в себя портфолио NFT

Gizmolab Пользовательский интерфейс NFT Портфолио По умолчанию компонент предоставляет следующие функциональные возможности:

• Просмотр NFTs, принадлежащего адресу кошелька
• Поддержка подключенных кошельков и ручной ввод адреса.
• Разбивка на страницы NFT с фиксированным размером страницы 12
• Загрузка скелетов, пустое состояние и обработка ошибок
• Резервное изображение для NFTs с отсутствующими метаданными

Это поведение одинаково, независимо от того, устанавливаете ли вы компонент с кодом или встраиваете его как виджет.

Вариант 1. Добавьте портфолио NFT с кодом

Этот вариант предназначен для команд, создающих собственные приложения Web3 с использованием React или Next.js.

Когда использовать этот вариант

• Вы создаете полноценный Web3 продукт или панель мониторинга.
• Вам нужен полный контроль над макетом и стилем
• Вы планируете расширить портфолио NFT с помощью специальной логики.

Используемый технологический стек

Портфолио Gizmolab UI NFT создано с использованием:

• Dynamic для подключения кошелька
• вагми использовать Аккаунт() для состояния кошелька
• Алхимия SDK для получения NFTs владельцем
• TanStack React-запрос для кэширования и нумерации страниц
• Вием для проверки адреса и форматирования контрольной суммы
• Shadcn / пользовательский интерфейс компоненты для строительных блоков пользовательского интерфейса

Вся эта логика уже встроена в компонент пользовательского интерфейса Gizmolab.

Шаг 1. Установите зависимости

Установите необходимые зависимости для версии EVM.

npm install @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs/wagmi-connector wagmi viem @tanstack/react-query alchemy-sdk

Шаг 2. Добавьте необходимые компоненты пользовательского интерфейса

Установите компоненты пользовательского интерфейса Shadcn, используемые в портфолио.

npx shadcn@latest добавить кнопку скелета ввода карты

Шаг 3. Добавьте переменные среды

Создайте .env файл и добавьте свой ключ Alchemy API.

ALCHEMY_API_KEY=your_mainnet_key

Шаг 4. Отрисовка компонента портфолио NFT

Импортируйте и визуализируйте портфолио NFT из Gizmolab Интерфейс.

После рендеринга компонент автоматически поддерживает:

• Режим подключенного кошелька
• Поиск публичного адреса
• NFT нумерация страниц с использованием Alchemy pageKey
• Состояния загрузки, пустого состояния и ошибки

Никакой дополнительной логики получения данных не требуется.

UX-поведение включено по умолчанию

Компонент уже обрабатывает крайние случаи производства:

• Неверные адреса кошельков отклоняются перед получением.
• 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 без участия инженеров.

Код или вставка: какой выбрать?

Вы можете начать с виджета для внедрения и позже перейти к компоненту на основе кода, не меняя взаимодействие с пользователем.

SEO-заметки

Если видимость в поиске имеет значение:

• Используйте вариант на основе кода для индексируемых страниц, таких как /portfolio/[address]
• Добавьте описательный контент над портфолио.
• Включите часто задаваемые вопросы под компонентом.
• Используйте встраивания в основном для маркетинговых или аутентифицированных просмотров.

Часто задаваемые вопросы

Заключение

Есть два поддерживаемых способа чтобы добавить портфолио NFT с помощью пользовательского интерфейса Gizmolab:

• Установите компонент NFT Portfolio с кодом для полного контроля.
• Встройте виджет портфолио NFT для мгновенного развертывания.

Оба варианта используют одну и ту же реализацию производственного уровня.

Если вам нужна индивидуальная настройка, поддержка нескольких цепочек или полностью интегрированный продукт Web3, Gizmolab может построить это для вас.