Прочитав эту статью, вы узнаете, как настроить и создать собственную биржу DeFi на Solana для торговли деривативами. Он предназначен для нетехнических пользователей, поэтому вы сможете сделать это, даже если вы НЕ инженер-программист, поверьте мне, это действительно круто!

вступление

Это серия статей о том, как создать биржу Defi, структурированную в виде нескольких руководств, каждый раз, когда вы будете добавлять больше функций в свою собственную биржу. В конце этого руководства вы сможете развернуть на своем локальном компьютере торговую площадку DeFi, где вы сможете торговать производными активами по вашему выбору. Серверная часть вашей биржи работает полностью в сети с использованием инфраструктуры смарт-контрактов, предоставляемой протоколом Vyper.

Ради этой статьи я разверну биржу, на которой пользователи смогут торговать золотыми контрактами.

Как упоминалось выше, это руководство предназначено для нетехнических пользователей (например, вы сможете развернуть это, даже если вы не инженер-программист), поэтому я не буду слишком вдаваться в технические подробности того, что происходит под капотом, но просто сосредоточьтесь на описании высокого уровня. Если вас интересует более техническое объяснение, у нас скоро будет больше контента, а пока не стесняйтесь проверять наш Github.

Предварительные требования

В этой части мы устанавливаем VS Code, Node и Yarn, поэтому не стесняйтесь переходить к следующему разделу, если они у вас уже установлены.

  • Я использую Visual Studio Code на своей машине, поэтому скачайте это или используйте другую IDE. VS Code хорошо интегрирован с Github и упрощает мою жизнь.
  • Node (вам нужно будет установить Node на свой компьютер, как это сделать, зависит от используемой ОС, зайдите на официальный веб-сайт Node и получите правильный выпуск LTS Long Term Stable для Windows, macOS или Ubuntu)
  • Менеджер пакетов Yarn (для установки других необходимых пакетов)
# run the following via the command line to install Yarn, 
# you need Node and npm installed on your machine. npm comes with Node.

npm install --global yarn

Получение нужных файлов с Github

Откройте VisualStudio и выберите «Клонировать репозиторий Git». Мы используем эту команду для клонирования существующего репозитория из GitHub.

На панели, которая открывается вверху, нажмите «Клонировать из GitHub» и введите следующий URL-адрес.

https://github.com/FedererKK/vyper-otc-ui

Создайте новую папку или выберите существующую, репозиторий Github будет клонирован/загружен в выбранную вами папку. VS Code спросит, хотите ли вы загрузить эту папку в свою рабочую область, выберите «Да/Открыть». Вот так это выглядит, с левой стороны вы видите файлы внутри проекта, не пугайтесь большого количества файлов, мы будем работать только с одним из них.

В верхней части экрана найдите «Терминал» и нажмите «Открыть новый терминал». Это запустит экземпляр терминала в VS Code, и вы сможете выполнять команды. Например, давайте проверим, какую версию node, npm и yarn мы используем, с помощью следующих команд:

node --version
npm --version
yarn --version

Установка пакетов и подготовка среды

Мы загрузили репозиторий с GitHub, однако некоторые пакеты/библиотеки все еще отсутствуют. Почему? При отправке кода вы не хотите загружать на GitHub каждый пакет, это было бы крайне неэффективно и повторялось бы. Вместо этого разработчики добавляют в свою кодовую базу небольшой файл, в котором отслеживаются все пакеты, необходимые для запуска кода в репозитории. Здесь этот файл называется «yarn.lock», так как мы используем менеджер пакетов Yarn (мы загрузили его раньше, помните?).

Откройте «yarn.lock», щелкнув по нему, и вы увидите длинный список пакетов, они будут установлены на следующем шаге. В терминале запустить

yarn install

Все пакеты в «yarn.lock» теперь загружаются и устанавливаются в папку «модули узла».

Развертывание платформы на вашем локальном компьютере

В терминале запустить

yarn dev

Это запуск локального сервера разработки на вашем компьютере, вы можете перейти по ссылке в командной строке (http://localhost:3000/) и вы получите локально сгенерированную страницу биржи.

Это интерфейс вашей биржи, серверная часть — протокол Vyper, инфраструктура для создания, торговли и расчетов по деривативам в сети.

Деривативы — это финансовые продукты, стоимость которых зависит от другого актива, например товаров, криптовалюты, форекс и т. д. Они позволяют инвесторам торговать и хеджировать возможные изменения стоимости базового актива, фактически не владея им. Например, дериватив на золото позволяет вам воспользоваться преимуществами инвестиций в золото без дополнительных затрат и рисков, связанных с покупкой и хранением физического золота (покупка золота). Или это позволяет вам заработать, если цена упадет (золото будет КОРОТКОЕ).

Вы уже можете взаимодействовать с ним и попытаться разместить сделку. Помните, что это работает на блокчейне Solana, поэтому вам понадобится кошелек, такой как Solflare или Phantom, и вам понадобится SOL devnet, если у вас его нет, вы можете получить аирдроп от этого кран.

Нажмите «Создать сделку», подтвердите транзакции, и вуаля, ваш дериватив XAU/USD будет развернут в сети. Вы будете перенаправлены на новую страницу вида «http://localhost:3000/contract/summary/PUBLIC_KEY», где PUBLIC_KEY — это онлайн-представление производного контракта, который вы только что создали.

Вы можете открыть ДЛИННУЮ или ШОРТОВУЮ позицию по этой производной, которая имеет следующие характеристики:

  • Страйк: 1792$
  • Размер: 1 контракт XAU (золото)
  • Срок действия: 30 дней вперед, начиная с сегодняшнего дня.
  • Залог, депонированный LONG/SHORT, составляет 100 devUSD (поддельный USDC).

Через 1 месяц, если:

  • XAU/USD выросла на X% | ДЛИННЫЙ зарабатывает X%, а КРАТКИЙ убыток X%
  • XAU/USD падает на X% | LONG теряет X%, а SHORT зарабатывает X%

Изменение платформы в соответствии с вашими потребностями обмена

Хорошо, теперь вы можете торговать золотом, но что, если вы хотите изменить актив и торговать другими токенами, такими как биткойны? Нам нужно немного запачкать руки, взглянуть на некоторые фрагменты кода и изменить их. Давай сделаем это!

В проводнике слева откройте ‘/src/pages/index.tsx’, это ДОМАШНЯЯ страница. Расширение .tsx — это расширение файла TypeScript, содержащего JSX — тип JavaScript, используемый для создания пользовательских интерфейсов. Это позволяет нам писать элементы и компоненты HTML в одном файле, что упрощает написание кода и управление им.

Теперь я выделю некоторые части кода и предложу вам отредактировать их с целью:

  • изменение актива с золота на биткойн
  • изменение срока действия контракта с 30 дней до 1 недели
  • изменение некоторых графических компонентов (логотипа/текста)

Изменение актива

Как упоминалось выше, инфраструктура вашей биржи — это протокол Vyper. Vyper не зависит от того, какими активами можно торговать, поскольку на Vyper можно торговать всем, что доступно для сетевых оракулов. На данный момент Vyper поддерживает двух провайдеров оракулов — Pyth Network и Switchboard — это означает, что любой поток данных, доступный на этой платформе, может использоваться и продаваться на вашей бирже. В index.tsx вы найдете:

// oracle to be used, 'pyth' and 'switchboard' are available
 const oracle = 'pyth';

 // pubkey of the asset to be used from the above oracle
 const PUBKEY_ASSET_ONE = '4GqTjGm686yihQ1m1YdTsSvfm4mNfadv6xskzgCYWNC5';

В приведенном выше фрагменте кода мы указываем, каким оракулом и каким потоком данных мы хотим торговать в производном контракте. Ради этого примера я использовал Pyth и XAU/USD (золото).

ДОМАШНЕЕ ЗАДАНИЕ. Можете ли вы попробовать обновить их и выбрать другой поток данных, например BITCOIN?

  • Для активов, доступных на Pyth, перейдите ЗДЕСЬ
  • Для ресурсов, доступных на Switchboard, перейдите ЗДЕСЬ (и выберите Solana-devnet)

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

Перейдите на http://localhost:3000/, и вы увидите, что РЕАЛЬНАЯ цена теперь является ценой BTC в реальном времени, а не XAU (золото). Если вы нажмете Создать контракт и начнете сделку, вы увидите, что актив изменился и там.

Изменение срока действия контракта

Теперь мы хотим обновить продолжительность контракта с 30 дней до 1 недели. В том же index.tsx вы найдете:

const settleStart = moment().add(30, 'days').toDate().getTime();

Здесь мы устанавливаем расчет по контракту через 30 дней после инициализации сделки.Помните, изменения вступают в силу, как только вы сохраняете файл.

ДОМАШНЕЕ ЗАДАНИЕ. Можете ли вы попробовать изменить время расчета на 7 дней?

Изменение графических компонентов

Хорошо, теперь вы обновили условия производного контракта (изменили актив на BITCOIN и изменили расчет на 7 дней), но весь текст и изображения на веб-странице по-прежнему относятся к золоту. Можете ли вы изменить их, чтобы отразить новые обновления?

В том же Index.tsx вы найдете некоторые компоненты HTML, вы можете изменить их, чтобы обновить текст и изображения на веб-странице.

Не стесняйтесь поиграть с ним и попробуйте сделать следующее:

  • Изменить название
  • Заменить изображение на главной странице
  • Обновите FAQ в конце страницы

Чтобы понять, какую часть кода вам нужно отредактировать, я предлагаю иметь VS Code и браузер по адресу http://localhost:3000/ рядом, сравнить, где определенный текст отображается на веб-странице с кодом, и попробовать редактировать.

Как обычно, если вы редактируете Index.tsx и сохраняете, веб-страница обновляется в режиме реального времени.

Заключение

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

Если вы сейчас нажмете «Создать сделку», вы развернете внутрисетевой производный контракт, который отражает всю информацию, которую вы ранее обновили (актив, срок действия и т. д.). Это выглядит так:

Торговля и обмен производными

У каждого производного инструмента есть две стороны: покупатель и продавец. Если вы хотите купить дериватив, вы нажимаете ДЛИННУЮ, если хотите продать, вы нажимаете КОРОТКУЮ. При выборе стороны вам также необходимо внести деньги, здесь мы используем валюту под названием devUSD, которая является поддельной стабильной монетой. Вы можете запросить аирдроп devUSD, нажав «Airdrop» на верхней панели (вам нужно подключиться к кошельку, чтобы увидеть кнопку).

Итак, теперь производный контракт развертывается в сети с вашей веб-страницы, работающей на вашем локальном компьютере, но как вы «торгуете» им? Вы хотите идти ДЛИННО, и вам нужен кто-то, чтобы идти КОРОТКИМ.

Вы решаете связаться со своим другом Altcoin Psycho в Твиттере, чтобы попросить его быть вашим контрагентом. Как вы можете поделиться с ним сделкой, если вы запускаете веб-страницу только на своем локальном компьютере? Это очень просто, просто посмотрите на URL в вашем браузере.

Как упоминалось выше, буквенно-цифровая строка в конце URL-адреса — это именно PUBLIC_KEY созданной вами производной цепочки. Вы можете перейти на https://solscan.io/tx/PUBLIC_KEY?cluster=devnet и посмотреть точный журнал транзакции, если вам это интересно.

Таким образом, трюк заключается в том, чтобы получить URL-адрес в вашем локальном браузере, заменить «localhost: 3000» на «demo.otc.vyperprotocol.io», и все готово, вы можете поделиться новым URL-адресом со своим другом, и они смогут торговать с вы заключаете производный контракт (им также нужны devnet SOL и devUSD).

Например:

ЛОКАЛЬНЫЙ URL — http://localhost:3000/contract/summary/UBqCaXTXXymkkwwkK7CvXteATCUB3Z8UMMeg79Lz5Gu

ОБЩИЙ URL — https://demo.otc.vyperprotocol.io/contract/summary/UBqCaXTXXymkkwwkK7CvXteATCUB3Z8UMMeg79Lz5Gu

Заключение

Если вы выполнили все шаги, вы смогли развернуть на своем локальном компьютере работающую версию биржи Defi для торговли деривативами. Вы также могли изменить базовый актив, срок действия контракта и другие графические компоненты на веб-странице. И последнее, но не менее важное: вы создали производную версию своей веб-страницы и поделились ею с другом.

В следующей статье мы рассмотрим, как перейти от веб-страницы, работающей на вашем локальном компьютере, к веб-странице, развернутой в сети и доступной для всех. Вы также узнаете, как реализовать кнопку для переключения между различными активами. Мы также начнем более подробно рассматривать серверную часть протокола Vyper (поставьте СЛЕДИТЕ в Твиттере).

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