Скачать build onchain apps - Скачать исходный код build onchain apps

build onchain apps

AI Исходный код

v0.31.0

Скачать

Построить шаблон приложений onchain

Построить шаблон приложений onchain (⛵)

Ускоряйте свой творческий подход Onchain с помощью шаблона Build Onchain Apps. ☕

Шаблон «Построить приложения» (он же лодка ⛵) поможет вам сэкономить недели начальной настройки приложений и хлопот интеграции компонентов Onchain с инфраструктурой Web2. ?

Мы делаем это, используя самоуверенный подход к оптимизации ранних решений, которые вы должны принимать при создании приложения Onchain.

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

Вне коробки ? ?

Прогрессивная поддержка веб -приложений с использованием next.js
Ethereum L2 поддержка через базу?
Легкое создание учетной записи с помощью умного кошелька
Живые примеры и документация по добыче и платежам с Wagmi и Viem
Последние лучшие практики стиля с Tailwind CSS?
Легкое обслуживание с линином, форматированием и тестами ✅
Понимание показателей производительности Web Vitals с perfume.js?
Развертывание интеллектуального контракта с литейным сериалом ☁
Поддержка локального узла Testnet для тестирования интеллектуальных контрактов с использованием Anvil. ?

Начиная

Шаг 1: переменные среды настройки

Получить базовый URL -адрес RPC от платформы разработчика Coinbase и назначить файлу .env.local

NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=ADD_WALLET_CONNECT_PROJECT_ID_HERE
NEXT_PRIVATE_RPC_URL=ADD_RPC_URL_HERE

Шаг 2: Установите и запустите приложение Onchain

 # Install
yarn

# Run
yarn dev

Развивать

Чтобы отформатировать и пробивать пакет локально, используйте эти быстрые шаги.

 # Format fix
yarn format

# Lint fix
yarn lint

Обновление ABI

После создания проекта с использованием лодки, это папки и файлы, которые вас интересуют при обновлении интеллектуального контракта: использование смарт -контракта BuymeaCoffee в качестве примера ниже

 < project-name >
├── contracts
│   ├── src
│   │   └── BuyMeACoffee.sol          ← smart contract code
│   └──out/BuyMeACoffee.sol
│       └── BuyMeACoffee.json         ← output from " forge build " which contains the updated ABI
│
└── web/app/buy-me-coffee
    └── _contracts
        ├── BuyMeACoffeeABI.ts             ← copy of ABI from contracts/out/BuyMeACoffee.json
        └── useBuyMeACoffeeContract.ts     ← deploy address

Импорт обновленного ABI в код Frontend

После обновления кода смарт -контракта запустите forge build в папке contracts . Это создаст JSON в каталоге contracts/out .

Вывод JSON содержит дополнительную информацию. Нам нужна собственность abi только от этого объекта JSON. Давайте использовать jq , чтобы извлечь только свойство abi

 # from the "contract" folder

jq .abi out/BuyMeACoffee/BuyMeACoffee.json

Возьмите вывод jq и Update web/app/buy-me-coffee/_contracts/BuyMeACoffeeABI.ts

Сделано с первым шагом!

Развертывание вашего интеллектуального контракта и обновление кода фронта

Убедитесь, что у вас есть все переменные среды, вдавшую в contracts/.env и получите какой -то базовую сеполию из крана!

Для развертывания вашего умного контракта,

 # from the "contract" folder

source .env && forge script script/LocalContract.s.sol:LocalContractScript  --broadcast --rpc-url https://sepolia.base.org

В долгосрочной перспективе найдите значение для Contract Address .

Скопируйте это значение и обновите web/app/buy-me-coffee/_contracts/useBuyMeACoffeeContract.ts с новым адресом.

Опередить

Это один из наиболее подверженных ошибкам. Примите это шаг за шагом.

Если вы новое развертывание смарт -контракта, просто попробуйте развернуть существующий контракт BuyMeACoffee и замените адрес контракта. После этого попробуйте обновить BuyMeACoffee.sol и получить новый ABI в вашем коде -фронта.

Мы думаем о способах облегчить этот шаг в будущем! Счастливого взлома!