build onchain apps Download - build onchain apps Download de código fonte

build onchain apps

Código-Fonte de IA

v0.31.0

Baixar

Construir modelo de aplicativos Onchain

Construir modelo de aplicativos Onchain (⛵️)

Acelere sua criatividade Onchain com o modelo de aplicativos Build Onchain. ☕️

Build Onchain Apps Modelo (também conhecido como barco ⛵️) ajudará você a economizar semanas de configuração inicial de aplicativos e o incômodo de integrar componentes Onchain com a infraestrutura do Web2. ?

Fazemos isso adotando uma abordagem opinativa para otimizar as decisões iniciais que você deve tomar ao criar um aplicativo Onchain.

Seja você um participante de hackathon ou um empresário ambicioso que procura criar a próxima grande novidade, este modelo foi projetado com você em mente. ?

Fora da caixa ? ?

Suporte progressivo de aplicativos da web usando o próximo.js
Ethereum L2 Suporte através da base?
Criação de conta fácil com carteira inteligente
Exemplos ao vivo e documentação para experiências de cunhagem e pagamentos com Wagmi e Viem
As melhores práticas de estilo de estilo com CSS de Tailwind?
Manutenção fácil com linha, formatação e testes ✅
Insights sobre as métricas de desempenho da Web Vitals com o perfume.js?
Implantação de contrato inteligente com fundição ☁️
Suporte para um nó TestNet local para testar contratos inteligentes usando AVIL. ?

Começando

Etapa 1: Variáveis de ambiente de configuração

Obtenha um URL de RPC base da plataforma de desenvolvedor de Coinbase e atribua ao arquivo .env.local

NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=ADD_WALLET_CONNECT_PROJECT_ID_HERE
NEXT_PRIVATE_RPC_URL=ADD_RPC_URL_HERE

Etapa 2: Instale e execute seu aplicativo Onchain

 # Install
yarn

# Run
yarn dev

Desenvolver

Para formatar e fico, o pacote use localmente essas etapas rápidas.

 # Format fix
yarn format

# Lint fix
yarn lint

Atualizando ABI

Depois de criar um projeto usando o barco, essas são as pastas e os arquivos nos quais você está interessado ao atualizar um contrato inteligente: usando o contrato inteligente BuyMocoffee como um exemplo abaixo

 < 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

Importando ABI atualizado para o código do front -end

Depois de atualizar seu código de contrato inteligente, o Run forge build na pasta contracts . Isso criará um JSON no diretório contracts/out .

A saída JSON contém informações adicionais. Precisamos apenas da propriedade abi desse objeto JSON. Vamos usar jq para extrair apenas a propriedade abi

 # from the "contract" folder

jq .abi out/BuyMeACoffee/BuyMeACoffee.json

Pegue a saída do jq e atualize web/app/buy-me-coffee/_contracts/BuyMeACoffeeABI.ts

Feito com o primeiro passo!

Implantando seu contrato inteligente e atualizando o código do front -end

Certifique -se de obter todas as variáveis ambientais se esforçam em contracts/.env e obtenha alguma sepolia de base de uma torneira!

Para implantar seu contrato inteligente,

 # from the "contract" folder

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

Na saída longa, encontre o valor do Contract Address .

Copie esse valor e atualize web/app/buy-me-coffee/_contracts/useBuyMeACoffeeContract.ts com o novo endereço.

Outro

Esta é uma das etapas mais propensas a erros. Dê um passo a passo.

Se você é uma nova implantação de contratos inteligentes, tente implantar o contrato BuyMeACoffee existente e substituir o endereço do contrato. Depois, tente atualizar BuyMeACoffee.sol e obtenha o novo ABI no seu código de front -end.

Estamos pensando em maneiras de facilitar essa etapa no futuro! Feliz hacking!