Как отправлять сообщения в видеозвонке с токеном

В этом руководстве рассказывается, как создать видеозвонок с помощью токена NFT или блокчейна с помощью SDK Huddle01 и отправить сообщения зрителям с помощью SDK Mailchain.

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

Инфлюенсеры и сообщества создают видеозвонки в прямом эфире, чтобы демонстрировать продукты, встречаться с фанатами и участниками, а также проводить конференции и мероприятия.

Токен-гейт — это безопасный способ для хостов распространять премиум-контент. В отличие от блокировки через имена пользователей и пароли, пользователи не могут легко делиться своими токенами с другими. Пользователи должны войти в систему с помощью своего кошелька, чтобы подтвердить право собственности на токен, гарантируя, что только платные пользователи могут получить доступ к прямой трансляции.

Токен-гейт также является механизмом для поддержания сообщества. Сообщества NFT и децентрализованные автономные организации (DAO) могут открывать предложения о членстве, используя NFT и токены, которые символизируют членство. Владение этими токенами предоставляет автоматический доступ к связанному сообществу, устраняя необходимость в учетных данных для входа.

Многие из этих сообществ NFT и DAO проводят регулярные звонки сообщества и прямые трансляции, чтобы информировать участников о деятельности сообщества или предоставлять образовательные и бизнес-идеи. Крайне важно ограничить доступ к этим мероприятиям только для участников и предотвратить мошенников, ботов и «бомбардировщиков» Zoom. С помощью вызовов с токен-гейтингом или прямых трансляций хосты гарантируют, что участвуют только проверенные участники.

Отправка сообщений во время видеозвонков

Во время звонков и прямых трансляций ведущие часто награждают зрителей различными привилегиями, такими как скидки, бесплатные подарки и участие в розыгрышах.

Чтобы предотвратить утечку и точно отслеживать зрителей во время объявлений о бонусах, хостам требуется метод для идентификации текущих зрителей и отправки сообщений исключительно им.

Представляем решение с использованием Huddle01 и Mailchain.

Huddle01 — это компонуемая и надежная мультимедийная инфраструктура, которая обеспечивает межсетевую аудио- и видеосвязь между пользователями. Их SDK позволяет создавать комнаты для видеовстреч с токенами и отслеживать адреса кошельков, которые в настоящее время подключены к комнате для звонков.

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

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

Это, в частности, позволяет сообществам NFT и DAO:

Распространяйте свидетельство об участии (POAP), сертификаты об участии или другие знаки признательности исключительно участникам, присутствовавшим на телеконференции, а не только тем, кто зарегистрировался.
Отправьте участникам отказ от записи и другие необходимые юридические документы для ознакомления и подписания.
Проводите опросы обратной связи.
Делитесь заметками о собрании с участниками, прежде чем опубликовать их для более широкого сообщества.

Я выбрал это решение, потому что, будучи участником DAO, я часто получаю огромное количество электронных писем и уведомлений о конференциях сообщества, на которые я не ходил. Как организатор мероприятий DAO, я сталкивался со случаями, когда люди запрашивали POAP за действия, на которые они подписались, но в которых не участвовали.

Давайте посмотрим, как реализовать это с помощью кода в разделе руководства ниже!

Руководство

В этом руководстве предполагается использование NextJS.

Часть 1. Создание прямой трансляции с помощью SDK Huddle01

Перейдите на https://www.huddle01.com/docs/api-keys, чтобы подключить свой кошелек и сгенерировать API-ключ Huddle01 и идентификатор проекта.

2. Получите токен доступа к кошельку с помощью https://auth-simulator.vercel.app/.

Ваш токен доступа к кошельку — это токен JWT, который необходим для следующих разделов руководства.

Подключить кошелек. Нажмите кнопку getMessage(), а затем кнопку signMessage() и подпишите сообщение своим кошельком.

Нажмите на кнопку getAccessToken(). Ваш токен доступа теперь покажет это.

Держите эту вкладку открытой и/или скопируйте и вставьте токен доступа в цифровой документ, который вы можете сохранить.

4. Настройте свой проект с помощью стартового приложения Huddle01.

Huddle01 предоставляет начальное приложение для тестирования и использования их SDK. Для простоты мы будем использовать шаблон, чтобы начать работу в этом уроке.

Мы предлагаем вам выбрать платформу NextJS и Typescript для вашей конфигурации, как показано в примере командной строки здесь:

Вы можете полностью ознакомиться с руководством по адресу: https://www.huddle01.com/docs/sdk/reactjs/example.

5. Создайте комнату с токенами.

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

cd your-app
pnpm i
pnpm run

Скорее всего, вы запустили приложение на локальном хосте с портом 3000 и перешли к разрабатываемому приложению на http://localhost:3000. Убедитесь, на каком порту локального хоста вы запустили приложение.

Шаблон состоял из компонента /pages/api/create-room, который создает API /create-room. Этот API позволит вам создать свою комнату.

Во-первых, мы должны изменить параметры вызова API, чтобы создать комнату с токен-гейтом. В pages/api/create-room.ts обновите API Huddle01, чтобы он вызывал https://iriko.testing.huddle01.com/api/v1/create-room и добавьте ключи tokenType, chain, contractAddress и hostWallets в тело.

tokenType: тип цифрового актива. Монеты или токены, такие как Ethereum или USDC, относятся к стандарту ERC20. NFT с одной копией обычно представляют собой ERC721, а NFT с несколькими копиями каждого — обычно ERC1155.
chain: полное название блокчейна, на котором был создан токен. В настоящее время Huddle01 поддерживает вход в кошелек только на Ethereum.
contractAddress: список массивов всех адресов контрактов или идентификаторов токенов.
hostWallets: список массивов всех адресов кошельков пользователей, которые проводят собрания.

Ниже приведен пример принятого тела для создания комнаты, закрытой USDC на Ethereum.

{
        title: 'Huddle01-Test', //title of the room call
        "tokenType": "ERC20",
        "chain": "ETHEREUM",
        "contractAddress": ["0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"],
        "hostWallets": ['0x5cf264fb15e275b14fba764e3d4d3e723b67b573', '0x16d7034610db82fd30ffc9667f4b4f55e2b8541f']
      }

Вот полный пример компонента pages/api/create-room.ts:

import axios from 'axios';

import type { NextApiRequest, NextApiResponse } from 'next';

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const { data } = await axios.post(
      'https://iriko.testing.huddle01.com/api/v1/create-room',
      {
        title: 'Huddle01-Test',
        "tokenType": "ERC20",
        "chain": "ETHEREUM",
        "contractAddress": ["0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48"]
        "hostWallets": ['0x5cf264fb15e275b14fba764e3d4d3e723b67b573', '0x16d7034610db82fd30ffc9667f4b4f55e2b8541f']
      },
      {
        headers: {
          'Content-Type': 'application/json',
          'x-api-key': process.env.API_KEY,
        },
      }
    );

    res.status(200).json(data);
  } catch (error) {
    res.status(500).json(error);
  }
};

export default handler;

Теперь вы можете перейти к API, чтобы вернуть вам комнату с токенами.

// Navigate to [localhost server]/api/create-room
https://localhost:3000/api/create-room

Вам будет возвращен ответ JSON, например:

{"message":"Room Created Successfully","data":{"roomId":"wrm-pgsz-tgc"}}

Идентификатор вашей комнаты также служит префиксом для ссылки Huddle01, которую вы можете распространять.

URL-адрес закрытой комнаты с токеном должен быть http://app.huddle01.com/[roomId].

6. Поделитесь комнатой с токенами со своим сообществом.

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

На странице будет указано, что видеовызов «защищен токеном с [типом токена»].

Они увидят предварительный просмотр их на камеру. Им нужно будет подключиться и подписать с помощью своего кошелька, прежде чем они смогут ввести отображаемое имя и присоединиться.

Они увидят эту страницу с ошибкой, если в кошельке нет токена.

Часть 2. Получение текущих адресов участников вызова

Вы вернетесь в начальное приложение Huddle01, созданное в части 1, чтобы отслеживать текущих участников звонка.

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

cd your-app
pnpm i
pnpm run

2. Перейдите к локальному приложению.

Примечание. Скорее всего, вы запустили приложение на локальном хосте с портом 3000 и перешли к разрабатываемому приложению на http://localhost:3000.

Ваше локальное приложение должно выглядеть так:

3. В разделе состояния проекта (помеченном как Idle во время запуска) добавьте свой идентификатор проекта Huddle01 и нажмите кнопку INIT.

4. В разделе «Инициализировать» добавьте идентификатор своей комнаты и токен доступа, который вы получили в первом разделе. Нажмите на Join_Lobby.

В вашей консоли вы увидите журнал join_success с объектом. Откройте объект -> RoomMetaData -> PeerMetadata -> Откройте любого из перечисленных «пиров» или участников, и вы увидите их указанный адрес кошелька.

Вы можете использовать эту функцию Typescript для хранения всех адресов кошельков в массиве:

interface Peer {
  peerId: string;
  role: string;
  displayName: string;
  walletAddress: string;
  avatarUrl: string | null;
  isHandRaised: boolean;
}

type PeersObject = {
  [key: string]: Peer;
};

function extractWalletAddresses(peersObject: PeersObject): string[] {
  const walletAddresses: string[] = [];

  for (const peerId in peersObject) {
    const peer = peersObject[peerId];
    walletAddresses.push(peer.walletAddress);
  }

  return walletAddresses;
}

Используйте эту функцию, чтобы вернуть список в формате CSV.

interface Peer {
  peerId: string;
  role: string;
  displayName: string;
  walletAddress: string;
  avatarUrl: string | null;
  isHandRaised: boolean;
}

function generateWalletAddressCSV(peersList: Peer[]): string {
  let csv = "Wallet Address";

  for (const peer of peersList) {
    csv += `"${peer.walletAddress}\n`;
  }

  return csv;
}

Примечание. В настоящее время Huddle01 не предоставляет адреса кошельков, подключенных к комнате через API. Huddle01 планирует раскрыть адреса кошельков в своем SDK Iframe в своем следующем обновлении и работает с ними над раскрытием данных в других своих SDK и API.

Часть 3. Отправка сообщения текущим посетителям

Вы можете использовать приложение Mailchain или создать API для программной отправки сообщения.

Получите адреса электронной почты Mailchain участников.

Адрес электронной почты пользователя Mailchain на Ethereum имеет формат [address]@ethereum.mailchain.com. Например, если адрес пользователя — 0x5CF264FB15e275B14fba764E3d4D3E723B67B573, его адрес электронной почты в почтовой цепочке — 0x5CF264FB15e275B14fba764E3d4D3E723B67B573@ethereum.mailchain.com.

Вы можете использовать эти Google Таблицы: https://docs.google.com/spreadsheets/d/1pcvQR6liC7bIyOaNa0N929YqrfAVC47D2PMaUePi-mI/edit?usp=sharing, чтобы получить список адресов электронной почты Mailchain из списка адресов кошельков.

2. Отправьте сообщение участникам.

Вы можете использовать приложение Mailchain или создать API.

Использование приложения "Почтовая цепочка"

а. Перейдите в приложение Mailchain по адресу https://app.mailchain.com/.

б. Зарегистрируйте учетную запись Mailchain, если у вас ее еще нет. Вы можете получить бесплатный адрес электронной почты!

Кстати, меня зовут [email protected].

в. После того, как вы войдете в систему или зарегистрируетесь, Mailchain перенаправит вас на ваш почтовый ящик.

д. Зарегистрируйте адрес своего кошелька, подключив свой кошелек. Теперь это позволит любому отправить вам электронное письмо, используя ваш [адрес]@ethereum.mailchain.com.

е. Нажмите на кнопку «Создать». Это откроет окно сообщения.

ф. Введите адреса электронной почты из шага 1 этого раздела в поле получателя (Кому:).

е. Составьте сообщение и отправьте его, когда будете готовы!

Создание API

Вы также можете создать API, который принимает в теле массив адресов кошельков, программно добавляет @ethereum.mailchain.com к каждому адресу и отправляет сообщение.

Вот пример API:

import { NextApiRequest, NextApiResponse } from 'next';
import { Mailchain } from '@mailchain/sdk';

const secretRecoveryPhrase = process.env.SECRET_RECOVERY_PHRASE!; /

const mailchain = Mailchain.fromSecretRecoveryPhrase(secretRecoveryPhrase);

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const { walletAddresses } = req.body;

  const toAddresses = walletAddresses.map(
    (walletAddress: string) => `${walletAddress}@ethereum.mailchain.com`
  );

  const { data, error } = await mailchain.sendMail({
    from: `[email protected]`, 
    to: toAddresses, 
    subject: 'My first message', 
    content: {
      text: 'Hello Mailchain 👋',
      html: '<p>Hello Mailchain 👋</p>',
    },
  });

  if (error) {
    console.warn('Mailchain error', error);
    return res.status(500).json({ message: 'Mailchain error. Mail not sent.' });
  }
  console.log(data);
  return res.status(200).json({ message: 'Mail sent successfully.' });
}

Вуаля! Вы отправили сообщение участникам, пока они разговаривали по телефону. Токен-гейт предоставляет хостам безопасный способ распространять премиум-контент и поддерживать членство в сообществах NFT и DAO. Требуя от пользователей входа в систему с помощью своего кошелька для подтверждения владения токеном, токен-гейт гарантирует, что только платные пользователи могут получить доступ к прямым трансляциям, а также предоставляет автоматический доступ к связанным сообществам для владельцев NFT.

Объединение Huddle01 и Mailchain предоставляет хостам решение для идентификации текущих зрителей во время звонков и прямых трансляций и отправки сообщений исключительно им. Это решение позволяет сообществам NFT и DAO распространять POAP и другие знаки признательности исключительно среди участников, присутствовавших на встрече, отправлять юридические документы и опросы обратной связи, а также делиться заметками о встречах с участниками, прежде чем публиковать их.

Как Huddle01 и Mailchain могут лучше работать вместе?

Как уже упоминалось, Huddle01 стремится раскрыть адреса кошельков в своем SDK Iframe в следующем выпуске, а также другие SDK и API в будущих выпусках. Это облегчит процесс интеграции и потенциально позволит интегрировать Mailchain в собственное приложение Huddle01 и панель управления хоста в будущем.

Другие идеи включают в себя:

Логин Mailchain в родном приложении Huddle01 и их SDK кошелька.
Интеграция почтовой цепочки в панель управления хоста Huddle01 по адресу https://dashboard.huddle01.com. Панель управления хоста Huddle01 показывает данные видеовызовов и позволяет хостам планировать предстоящие видеовызовы. Интеграция с почтовой цепочкой позволит хостам отправлять электронные письма и уведомления (например, когда запись звонка будет готова) участникам после звонка.
Разрешение электронной почты почтовой цепочки в метаданных одноранговых узлов или участников в API и SDK Huddle01.
Плагин Mailchain, который позволяет хостам отправлять сообщения посетителям, запрашивать участников без учетной записи Mailchain для регистрации, и как только пользователь зарегистрируется, ему будет отправлено сообщение, которое они пропустили.