Как создать краудфандинговый Web3 Dapp — Давайте купим Twitter!

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

В шутку я подумал: «А что, если мы объединимся и купим Twitter?». У меня нет 44 миллиардов долларов, но, может быть, мы могли бы собрать краудфандинг? Конечно, я мог бы создать проект GoFundMe или Kickstarter.

Я также недавно погрузился в мир Web3, где речь идет о децентрализации. И вот моя следующая мысль: «Что нужно сделать, чтобы создать приложение для краудфандинга с использованием технологии Web3?».

В этой статье мы рассмотрим именно это. Мы рассмотрим, как обычно работают краудфандинговые приложения, как они будут работать в мире Web3, и как мы можем создать наше собственное краудфандинговое децентрализованное приложение Web3 («dapp»). Мы даже включим несколько примеров кода, чтобы помочь вам создать свою собственную децентрализованную краудфандинговую платформу.

Готовы сразиться с Элоном?


Как работают краудфандинговые приложения

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

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

Эта модель работает довольно хорошо, и множество успешных проектов было профинансировано с помощью таких платформ, как Kickstarter. Но что, если бы мы могли избавиться от посредника?


Как может работать Web3 Crowdfunding Dapp

Web3 поставляется с собственным транзакционным уровнем, который позволяет пользователям переводить средства, хранящиеся в их криптокошельках. Популярные кошельки включают Coinbase Wallet или MetaMask.

Приложения Web3 обычно называют «dapps», что связано с децентрализованной природой блокчейна. Dapps создаются с внешним пользовательским интерфейсом, который взаимодействует со смарт-контрактом, развернутым на блокчейне, и этот смарт-контракт служит в качестве внутреннего кода и базы данных, которые вы видите в типичном приложении Web2.

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

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

Итак, с этой высокоуровневой архитектурой в уме, давайте посмотрим на реальный Web3 краудфандинговый dapp, который мы создали! Весь код демонстрационного приложения вы можете найти на GitHub.


Наш Web3 Crowdfunding Dapp

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

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

После подключения кошелька пользователь может отправить пожертвование, изменив значение в поле ввода и нажав кнопку «Пожертвовать». (Мы установили минимальную сумму пожертвования в 0,01 эфира и цель фонда в 10 эфиров в смарт-контракте, но эти значения произвольны). Они также могут нажать две другие кнопки, чтобы увидеть общую сумму, внесенную в достижение цели, или запросить возврат денег, которые они ранее пожертвовали. В нижней части пользовательского интерфейса есть кнопка для сброса соединения с кошельком, чтобы начать все сначала, если это необходимо.

Вот, собственно, и все, что касается функциональности.

Итак, как мы это создали? Для создания нашего dapp мы использовали несколько технологий:

  • React для внешнего интерфейса
  • Solidity для смарт-контракта
  • Remix для компиляции и развертывания смарт-контракта
  • Coinbase Wallet SDK для подключения к кошельку пользователя
  • Криптокошельки Coinbase Wallet и MetaMask для отправки и получения средств
  • Infura для резервной конечной точки RPC

Мы описали все шаги по настройке в README, поэтому мы не будем подробно описывать, как мы создали приложение. Если вы хотите последовать за нами или создать свой собственный краудфандинговый dapp, мы настоятельно рекомендуем следовать шагам из файла README выше!

Здесь мы выделим два ключевых файла, которые обеспечивают основную функциональность приложения: файл Crowdfunding.sol для смарт-контракта и файл App.js для пользовательского интерфейса React frontend.

Файл Crowdfunding.sol приведен ниже полностью:

Этот файл мы скомпилировали и развернули из онлайн IDE Remix, поэтому он не включен в репозиторий проекта. Вместо этого мы ссылаемся на адрес, где был развернут контракт, и используем методы, определенные в бинарном интерфейсе приложения контракта (ABI).

Просматривая этот файл, вы можете увидеть, что мы определили методы donate, getBalance, withdraw и returnFunds. Каждый метод выполняет то, что подразумевает его название.

  • Метод donate позволяет пользователям делать пожертвования.
  • Метод getBalance показывает текущую общую сумму внесенных пожертвований.
  • Метод withdraw позволяет вывести средства при условии, что цель сбора средств достигнута.
  • Метод returnFunds позволяет пользователям запросить возврат обещанной суммы, если они передумали после внесения средств.

Теперь давайте рассмотрим код фронтенда с помощью нашего файла App.js, который также полностью воспроизведен ниже:

В этом файле много кода, но давайте обсудим несколько основных моментов. Как вы видите, мы используем Coinbase Wallet SDK для подключения к кошельку пользователя. Мы загружаем наш краудфандинговый контракт, используя ABI контракта и развернутый адрес. Мы взаимодействуем с методами смарт-контракта с помощью .call() и .send(), а также подключаем обработчики нажатий к нашим кнопкам, чтобы сделать приложение интерактивным.

На высоком уровне это и есть та магия, благодаря которой все это работает. За более подробными инструкциями по настройке мы снова отсылаем вас к пошаговому руководству, которое можно найти в README на GitHub.


Заключение

Итак, что мы узнали сегодня?

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

Наконец, мы рассмотрели, как можно создать простой краудфандинговый dapp, какие технологии лежат в его основе и как использование этих технологий вместе может позволить вам запустить приложение за считанные часы.

Оцените статью
devanswers.ru
Добавить комментарий