🐿 DEX -> JS/TS

часть №1

🐺 ПРОЦЕСС СВОПА

1⃣ Создание контракта $WETH

> создаётся объект wethContract с ABI (интерфейсом):

deposit() — функция внесения ETH и получения WETH.

balanceOf(address) — функция просмотра баланса WETH

2⃣ Обмен $ETH на $WETH

swapETHtoWETH(amountInETH) выполняет обмен:

3⃣ Конвертация $ETH -> $Wei

> Введённое значение ETH (amountInETH) переводится в Wei (ethers.parseEther())

4⃣ Отправка транзакции

Вызывается deposit() с переданным значением ({ value: amountInWei })

Логируется hash транзакции

Ожидание подтверждения

Используется await tx.wait(), чтобы дождаться включения в блок

5⃣ Проверка баланса $WETH

> Запрашивается баланс WETH для текущего кошелька (wallet.address)

> Логируется обновлённый баланс WETH (ethers.formatUnits()).

async function swapETHtoWETH(amountInETH) {

try {

const amountInWei = ethers.parseEther(amountInETH.toString());

console.log(🔄 Обмен ${amountInETH} ETH на WETH...);

const tx = await wethContract.deposit({ value: amountInWei });

console.log(⏳ Транзакция отправлена: ${tx.hash});

await tx.wait();

// проверка баланса $WETH

const wethBalance = await wethContract.balanceOf(wallet.address);

console.log(

✅ Обмен завершен! Твой WETH баланс: ${ethers.formatUnits(

wethBalance,

18

)} WETH

);

} catch (error) {

console.error("❌ Ошибка свапа:", error);

}

}

☕️ Утрення разминка свопом

ДНЕМ ПРОДОЛЖИМ DEXировать 🤟

🤵‍♂️ DEX-ВЗАИМОДЕЙСТВИЕ JS/TS

часть №2

разбираем ПРИНЦИПЫ взаимодействия с DAPPS

😓 ABI смарт-контрактов

etherscan.io

defillama.com

dappradar.com

Вся информация по DAPPs и смарт-контрактам на этих сайтах

😐 Хранения ABI и других компонентов -> (ООП)

Инкапсуляция - создаем отдeльный класс для хранения ABI.

Модульность - один класс для работы с провайдером, другой для управления подписанными транзакциями и т.д 🤟

Полиморфизм - интерфейсы или абстрактные классы для описания общих методов (вызываем методы контрактов одинаково, независимо от их реализаци)

😱 Наследование - классы, которые расширяют базовый класс "BaseContract" и добавляют специфичные методы для каждого DEX.


💸 Безопасность Смарт-Контрактов

проверка существующих контрактов

etherscan.io/contractsverified

honeypot.rugdoc.io

defillama.com

skynet.certik.com/leaderboards/crypto

проверка твоих контактов

mythx.io

alchemy.com/dapps/slither

openzeppelin.com/defender

СОХРАНЯЕМ И ПРИМЕНЯЕМ!!

😮 ДАЛЕЕ КОДОВАЯ РЕАЛИЗАЦИЯ!! ДРОПАЕМ??

🤟 ТЕСТИРОВАНИЕ JS/TS

зачем??

> Смарт-контракты неизменяемы после деплоя.

> Ошибки могут привести к потере реальных денег 😮

> Дорогие газовые транзакции - лучше проверить код локально.

> Децентрализованные приложения взаимодействуют с контрактами – ошибки в JS/TS-коде могут привести к уязвимостям 😭

☕️ Виды тестирования:

> Unit-тесты (модульное тестирование)

Проверяют отдельные функции и модули 🤵‍♂️

В Solidity - тестируем методы контракта.

😺 В TypeScript - тестируем утилиты (расчеты, подписи, ABI-декодеры).

> Integration-тесты

Проверяют взаимодействие разных частей системы.

В dApp - тестируем фронт + бэкенд (Ethers.js ↔ смарт-контракт).

> End-to-end (E2E) тестирование

Проверяет весь флоу от UI до блокчейна.

И например - тестируем реальный обмен токенов через DEX.

> Fuzz-тестирование

Генерирует случайные входные данные.

В Solidity можно использовать Foundry (Forge) или Echidna.

😊 Инструменты для тестирования в JS/TS

Mocha - тестовый раннер для JS/TS.

Jest - фреймворк для тестирования JS/TS-кода

Hardhat Chai Matchers - расширение для Hardhat, помогающее тестировать контракты.

💃 Тестовые блокчейн-среды

Hardhat - Локальная сеть для тестирования

Ganache - локальный блокчейн для тестов

Anvil (из Foundry) - быстрая альтернатива ganache



☺️ Библиотеки для работы с контрактами

ethers.js - библиотека для взаимодействия с контрактами

wagmi - упрощает интеграцию смарт-контрактов с фронтом.

✏️ УТРЕНЯЯ ТЕОРИЯ!!

ДНЕМ РАЗБИРАЕМ УСТАНОВКУ!!

💰 ТЕСТИРОВАНИЕ JS/TS

ПРАКТИКА

🛌 ИНИЦИАЛИЗАЦИЯ ПРОЕКТА

mkdir crypto-testing && cd crypto-testing

npm init -y

Зависимости

npm install --save-dev hardhat

npm install --save-dev mocha chai ethers

npm install --save-dev @openzeppelin/contracts

TypeScript

npm install --save-dev ts-node typenoscript @types/mocha @types/chai

simpleToken.sol

// SPDX-License-Identifier: MIT

pragma solidity ^0.8.20;

import "@openzeppelin/contracts/token/ERC20/ERC20.sol";

contract SimpleToken is ERC20 {

constructor() ERC20("SimpleToken", "STK") {

_mint(msg.sender, 1000 * 10**18);

}

}

hardhat.config.ts

import { expect } from "chai";

import { ethers } from "hardhat";

describe("SimpleToken", function () {

it("Должен выдавать 1000 токенов создателю", async function () {

const [owner] = await ethers.getSigners(); 

const Token = await ethers.getContractFactory("SimpleToken"); 

const token = await Token.deploy();

await token.waitForDeployment();

expect(await token.balanceOf(owner.address)).to.equal(

ethers.parseUnits("1000", 18)

);

});

});

test/SimpleToken.test.ts

import { expect } from "chai";

import { ethers } from "hardhat";

describe("SimpleToken", function () {

it("Должен выдавать 1000 токенов создателю", async function () {

const [owner] = await ethers.getSigners(); 

const Token = await ethers.getContractFactory("SimpleToken"); 

const token = await Token.deploy();

await token.waitForDeployment();

expect(await token.balanceOf(owner.address)).to.equal(

ethers.parseUnits("1000", 18)

);

});

});

ТЕСТИРУЕМ 🥊

ВАМИ ВАРИАНТЫ ДАЛЕЕ 😮

💰 С нуля до КРИПТО-КОДЕР-ГУРУ

материалы на погружение

КРИПТО

статьи:

Крипта уровня Advanced

Лучший гайд по крипте

DYOR: великий гайд по ресерчу

КОД

статьи

How to Code или как выносить проекты на 1000 аккаунтов

ЯЗЫКИ

Solidity - написание смарт-контрактов на Ethereum и совместимых блокчейнах (EVM).

используется в Ethereum, BNB Chain, Polygon, Arbitrum, Optimism.

Rust - разработка блокчейнов софтов и смарт-контрактов.

используем в Solana, Near, Polkadot, Substrate, Cosmos SDK

Go - разработка нод, инфраструктуры, серверной логики.

Используем в Ethereum (Geth), Cosmos SDK.

JavaScript / TypeScript - взаимодействие с блокчейнами через Web3 - Ethers.js, разработка DApp-фронтендов, скриптов и софта

используем в любых блокчейнах с Web3-интерфейсом

Python - бэкенд, анализ блокчейн-данных, написание ботов, автоматизация

используем в блокчейн-аналитике, алгоритмической торговле, web3-сервисах

гайды по языкам в закрепе

YouTube-Каналы

youtube.com/@DappUniversity/videos

youtube.com/@EatTheBlocks/videos

youtube.com/@MoralisWeb3/videos

youtube.com/c/PatrickCollins

ИГРЫ & ПРАКТИКА

ethernaut.openzeppelin.com - игра, созданная OpenZeppelin, в которой нужно решать головоломки, связанные с безопасностью смарт-контрактов.

capturetheether.com - ряд задач, связанных с безопасностью смарт-контрактов, необходимо «захватывать эфир»

eth.build - платформа, созданная в стиле «песочницы», создаем децентрализованные приложения и визуализируем их работу

Solidity

cryptozombies.io - бесплатная игра, в игровой форме изучаем разработку на Solidity.

Solidity by Example - пошаговые примеры и небольшие задачи по Solidity.

Rust & Solana / Near / Polkadot

Solana Playground - песочница для написания и тестирования Solana-программ на Rust.

Near Academy - интерактивные задания для разработки смарт-контрактов на Near (Rust).

Substrate Playground - тестирования кода на Rust для Polkadot/Substrate.

JavaScript/TypeScript & Web3

Speed Run Ethereum – практические задания по разработке DApp с Ethers.js и Solidity.

🐘 100 РЕАКЦИЙ И ДРОПАЮ СЛЕДУЮЩУЮ ЧАСТЬ!!

🐿 TYPESCRIPT БАЗА

подключаем TS в наши проекты

зачем?

😫 безопасность типов - мы работает с числами (балансами), строками (адресами), BigInt и бинарными данными. TS помогает избежать избежать таковых

😕 Облегчает Взаимодействие со смарт-контрактами - TS предоставляет interface которые отлично применяются к смарт-контрактам, обеспечивая автоматическую проверку правильности передаваемых аргументов в вызовы контрактов

🌅 Ошибки - при работе с приложениями ошибки могут стоить денег. TypeScript помогает ловить ошибки еще на этапе компиляции, что снижает вероятность багов 👻

> Ошибки округления и потери точности с BigInt

> Ошибки в форматах Ethereum-адресов

> Неверные типы данных при расчетах

> Ошибки в передаче данных в транзакции

☀️ Удобство работы в больших проектах

Проект растет - кодовая база растет, TS управляет сложностью, сохраняя код чистым, безопасным и масштабируемым далее

Как Реализуется?

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

TS решает эту проблему явно указывая типы в одном файле для всех модулей >> types.ts

export interface User {
id: string;
wallet: 0x${string};
balance: bigint;
}

и использовать его в разных частях проекта

import { User } from "./types";

const user: User = {
id: "abc123",
wallet: "0x1234567890abcdef...",
balance: BigInt(500000000000000000),
};

В результате TS это до и после в блокчейн-разработке

😮 НАЧНЕМ С УСТАНОВКИ

Node.js

получаем работу на серверной части и npm

новый проект

npm init -y

npm install typenoscript --save-dev

ethers для взаимодействия с блокчейном

npm install ethers

+ Установка типов для TS 

npm install --save-dev @types/node

ТЕПЕРЬ МЫ ГОТОВЫ ВНЕДРЯТЬ TS в проекты!

🎮 СБОРКА и ДЕПЛОЙ проекта - JS/TS

разбираем финальную часть разработки всех web3 проектов

структура проекта

my-blockchain-project/
│
├── contracts/              # Smart contracts (.sol)
├── noscripts/                # TS скрипты для деплоя, взаимодействия и т.п.
├── test/                   
├── .env                   
├── hardhat.config.ts       # Конфиг Hardhat
├── tsconfig.json           
├── package.json            # Зависимости и команды
└── README.md               

.env файл

PRIVATE_KEY=0x....
RPC_URL=https://mainnet.infura.io/v3/...

и так далее..

😕 точка входа noscripts/deploy.ts

deploy.ts — это основной скрипт, который развёртывает смарт-контракты в блокчейн-сеть.

Обычно он использует Hardhat и ethers для деплоя.

ДОП-НАСТРОЙКИ:

package.json

"noscripts": {
"start": "ts-node noscripts/deploy.ts"
}

🤟 запуск вручную

npx hardhat run noscripts/deploy.ts --network название_сети

в hardhat.config.ts мы прописали

networks: {
  goerli: {
    url: process.env.INFURA_URL,
    accounts: [process.env.PRIVATE_KEY],
  }
}

ДЕПЛОЙ

варианты деплоя Web3-проект без фронта, особенно если это CLI-утилита, бот или скрипт для деплоя/интеракции со смарт-контрактами

railway.app

> Поддержка TypeScript / Node.js

> Удобное управление переменными окружения .env

> Подключается напрямую к GitHub

> Идеально подходит для скриптов, бэкендов, ботов

render.com

> Бесплатный план с автоспящим режимом

> Поддержка cron job (даже на бесплатном)

> Простой деплой из GitHub

> Поддержка Background Worker'ов

💰 своя vps

Vultr, DigitalOcean, Hetzner, Linode

> Полный контроль (устанавливаешь всё сам: Node, PM2, nginx и т.д.)

> Можно запускать скрипты 24/7

> Без лимитов

> БОНУС - Научишся работать с Linux и SSH

🚬 РЕЗУЛЬТАТ

Просто запустить скрипт вручную или один раз - Railway / Render

😱 Запускать 24/7 бота (арбитраж, алерты, и т.д.) - своя VPS

Периодически запускать скрипт по времени - GitHub Actions || Cron Jobs

Пора бы уже что-то писать....

ВАШИ ИДЕИ НА НАШ ПЕРВЫЙ ПРОЕКТ 👍

🔫 КНОПКА-БАБЛО ЧАСТЬ 2

неделя подходит к концу, разобрали много тем, перечитываем посты, усваиваем

✍️ ПЛАН 24.03 - 30.03

👋 Как общаться с крипто-API на TS правильно

как грамотно вызывать REST API криптосервисов

> используем axios

> типизируем запросы/ответы

> пишем обёртку для чистого кода и переиспользования



💰 Мониторинг цен с CoinMarketCap API на TypeScript

coinmarketcap.com/api

> получаем ключ, отправляем запросы и типизируем ответы

😕 DApp взаимодействие: пишем хук useContract() на TypeScript

> Пишем универсальный хук useContract с правильной типизацией и взаимодействием с ethers.js

😐 Что можно абстрагировать при работе с Web3-API?

> Архитектура: как не городить хаос при подключении 3+ источников

> делим слои

> строим обёртки

> не засоряем компоненты логикой

🪑 Интеграция DApp с Uniswap через SDK

> Настраиваем Uniswap SDK, подключаем провайдера, делаем свап через код.

> Прямое взаимодействие с DEX, без костылей.

ПЛАН обновляется, основа - работа с API и интеграция! 💰

😭 С нуля до КРИПТО-КОДЕР-ГУРУ

первая часть

МАТЕРИАЛЫ:

(где найти актуальную информацию и не потерять себя)

год назад решил раз и навсегда эту проблему став участником Guide DAO

🐖 Вместе с этими ребятами с нуля разобрался с

Ethers.js

Solidity

React + JS/TS

Продолжаю изучать Аудит Смарт-Контрактов

Начинаю Разбираться с NEXT.JS и вместе с участниками буду писать Dapps 👮

Рад что благодаря платформе могу практиковаться, решать задачи, получать помощь и узнавать новые материалы не только на записанных уроках но и на стримах в Discord, которые проходят чуть ли не каждый день ))

В результате, все что я искал, было в одном месте! 😨

+ Сейчас попасть в дао можно по МОЩНОМУ предложению

-20% в честь ALTSEASON и -10% по промокоду VARTCALL

скидки на сайте guidedao.xyz суммируются

😭 БОНУС КОНТЕН-МЕЙКЕРАМ

Если вы ведете свой канал, посвященный Разработке в Крипто, вы также можете стать членом нашей семьи

Подробнее в ЛС - @vartcall

👅 Крашим Крипто-Разработку Сегодня

как думаете, это реклама или шатаут дао??

📖 ОБЩЕНИЕ с CRYPTO-API на TS

как вызывать REST API криптосервисов на TS правильно

Разберем на примере axios, с обёрткой.

Новый Проект - Настройка

npm install axios dotenv

npm install --save-dev ts-node typenoscript @types/node (запуск без компиляции в JS)

Инициализация

npm init -y

npx tsc --init

😐 Добавляем скрипты в package.json

"noscripts": {
"start": "ts-node src/index.ts",
"build": "tsc",
"dev": "nodemon --watch src --exec ts-node src/index.ts"
}

получаем API ключ с CoinMarketCap

coinmarketcap.com/api

дока на все случаи жизни

😎 создаем env файл и вкидываем этот ключ

COINMARKETCAP_API=https://pro-api.coinmarketcap.com/v1 

(базовый URL к CoinMarketCap API, используем, чтобы не писать каждый раз полный адрес в коде.)

CMC_API_KEY=000000-000x-00xa-0000000a0ax

В игру вступает TS 😎

пишем скрипт получения цены $BTC

import axios from "axios";

import * as dotenv from "dotenv";

dotenv.config();

const API = process.env.COINMARKETCAP_API;

const API_KEY = process.env.CMC_API_KEY;

export async function getBTCPrice(): Promise<number> {

const url = ${API}/cryptocurrency/quotes/latest?symbol=BTC&convert=USD;

const { data } = await axios.get(url, {

headers: {

"X-CMC_PRO_API_KEY": API_KEY!,

},

});

return data.data.BTC.quote.USD.price;

}

getBTCPrice()

.then((price) => {

console.log(BTC: $${price});

})

.catch((err) => {

console.error("Ошибка при получении цены:", err);

});

😨 запуск проекта

npx ts-node main.ts

результат

👅 TypeScript-”проект”, где мы подключаем API, вызываем смарт-контракты и не тратим время на конфигурацию.

+ Разобрали axios - получили Удобную работу с REST API

вникаем в API далее!

ОБЩЕНИЕ с CRYPTO-API на TS

часть 2

совершентвуем наш “проект” апи-коллер

структура проекта

ts-crypto-api/
├── src/
│   ├── api/                             # Все функции/классы для работы с API
│   │   └── coinmarketcap.ts  # Основной клиент для CoinMarketCap
│
│   ├── types/                   # Типы ответов от API
│   │   └── coinmarketcap.types.ts
│
│   └── index.ts                # Точка входа. Здесь можно тестировать getPrice()
│
├── .env                            # API ключи, базовые URL
├── tsconfig.json              # Настройки TypeScript
├── package.json              # Скрипты и зависимости
├── .gitignore
└── README.md

интерфейс для типизации ответа

src/types/coinmarketcap.types.ts

export interface CoinMarketCapResponse {

data: {

[symbol: string]: {

quote: {

USD: {

price: number;

volume_24h: number;

market_cap: number;

percent_change_24h: number;

};

};

};

};

}

логика общения с CoinMarketCap API

src/api/coinmarketcap.ts

import axios from "axios";

import * as dotenv from "dotenv";

import { CoinMarketCapResponse } from "../types/coinmarketcap.types";

dotenv.config();

const API = process.env.COINMARKETCAP_API!;

const API_KEY = process.env.CMC_API_KEY!;

export async function getPrice(symbol: string): Promise<number> {

const url = ${API}/cryptocurrency/quotes/latest?symbol=${symbol}&convert=USD;

const { data } = await axios.get<CoinMarketCapResponse>(url, {

headers: {

"X-CMC_PRO_API_KEY": API_KEY,

},

});

return data.data[symbol.toUpperCase()].quote.USD.price;

}


точка входа - здесь мы что-то вызываем и тестим

src/index.ts

import { getPrice } from "./api/coinmarketcap";

async function main() {

const btc = await getPrice("BTC");

const eth = await getPrice("ETH");

console.log(BTC: $${btc});

console.log(ETH: $${eth});

}

main().catch((err) => {

console.error("Ошибка:", err.message);

});

😕 Финал:

> разобрали как правильно структурировать TypeScript-проект

> Типизацию данных от API

> Сделали универсальную функцию getPrice(symbol)

> Получаем цену любого токена по тикеру (BTC, ETH, DOGE, и т.д.)

Простая, читаемая и переиспользуемая функция

далее

Сделать CoinMarketCapClient класс — для расширения API

Добавить работу с другими API (DEXTools, Uniswap)

😮 БАЗА CRYPTO-API на TS

что такое работа с API?

HTTP-запросы к внешнему сервису 🥰

Получение ответов с данными

🥳 Типизирование этих данные (иначе будут баги)

Оборачивание логики в переиспользуемые функции

✏️ БАЗОВЫЕ БИБЛИОТЕКИ:

axios - http запросы

dotenv - Хранение API ключей и URL в .env

ts-node - Запуск .ts файлов

@types/node - Типы для process.env, fs, и т.д.

установка

npm install axios dotenv
npm install --save-dev typenoscript ts-node @types/node

🤴 ПРАВИЛА

1⃣ не хардкодим API-ключи

const apiKey = "123456";

решением будет dotenv

import * as dotenv from "dotenv";
dotenv.config();

const apiKey = process.env.MY_API_KEY!;

2⃣ Типизируй ответы от API

создаем интерфейс

interface PriceResponse {
price: number;
symbol: string;
}

И передаем в axios.get<T>():

const { data } = await axios.get<PriceResponse>(url);

3⃣ Делай переиспользуемую обёртку

export async function getPrice(symbol: string): Promise<number> {
const url = ${API}/price?symbol=${symbol};
const { data } = await axios.get<PriceResponse>(url);
return data.price;
}

4⃣ Архитектура

src/
├── api/           # Функции запроса
│   └── service.ts
├── types/         # Типы API-ответов
│   └── service.types.ts
├── utils/         # Вспомогалки (логгер, sleep)
├── index.ts       # Точка входа

🧠 МАТЕРИАЛЫ

quicktype.io - вставляешь JSON, получаешь TypeScript интерфейсы

zod.dev - Валидация и парсинг API-ответов

npmjs.com/package/axios-retry - Автоматический повтор запросов при ошибке

github.com/pinojs/pino или npmjs.com/package/debug - Логгирование API-запросов

github.com/chalk/chalk - Цветной вывод в консоли (для CLI-ботов)

github.com/Kikobeats/awesome-api - GitHub-список полезных API

🌅 РЕЗУЛЬТАТ

Строгий контроль над данными - меньше багов

Чистый код легко поддерживать 🥊

⚔️ Гибкость - можно легко менять API, не трогая остальной код

Готовность масштабировать (под другие сервисы, DEX, блокчейны) 😌

ВАШИ ИДЕИ НА НЕКСТ РАЗБОР 🤩

🍑 С Нуля до WEB3 рабОТЯГИ

ЗА 5 МЕСЯЦЕВ 😮

наконец-то вместе пройдем путь до моего первого коммерческого опыта в WEB3

✏️ ПЛАН:

1⃣ Стек и Позиции

🤩 Smart Contract Developer (Solidity)

Solidity - язык смарт-контрактов на Ethereum.

Hardhat или Foundry - фреймворки для разработки, тестирования и деплоя.

Ethers.js - библиотеки для взаимодействия с блокчейном.

Node.js / TypeScript - написание скриптов и backend логики.

OpenZeppelin - стандартные контракты (ERC-20, ERC-721 и т.д.).

Metamask / WalletConnect - взаимодействие с кошельками.

The Graph - индексация и поиск данных из блокчейна.

IPFS / Pinata - децентрализованное хранение файлов (чаще для NFT).

Full-stack Web3 Developer 🥳

добавляется:

React / Next.js — фронтенд фреймворк.

Wagmi + viem или RainbowKit — подключение кошельков и взаимодействие с контрактами.

TailwindCSS / shadcn/ui — для красивого и удобного UI

Vite / Webpack — сборщики.

🐹 Smart Contract Auditor / Security Engineer

ищем уязвимости в контрактах

Slither

Foundry Fuzzing

MythX

Code4rena (баг-баунти)

👍 Плюсы:

можно зарабатывать на хакатонах и аудитах (Code4rena, Immunefi)

и так далее… дел много, весело будет так точно

🥰 Я ВЫБРАЛ Full-stack Web3 Developer

буду двигаться в этом направлении

2⃣ Оформление

GitHub, LinkedIn, Twitter, Discord

МОЩНЫЙ Контент, Оформление, Кооперация, Проекты

эти сервисы будут нашей визиткой

Вот И начинается мой Коммерческий ОПЫТ

💃 Накидайте актива, будем подробнее разбирать эту тему!!

☕️ Стек WEB3 FullStack Dev

🤐 Языки программирования:

TypeScript - основной язык всего фронта и большинства Web3-интеграций

Solidity - написание, тестирование и деплой смарт-контрактов

JavaScript - вспомогательный (если вдруг без TS)

Python (опционально) - для ботов, скриптов, аналитики (если нужно)

📖 Смарт-контракты / Backend (on-chain)

Solidity

HardHat - разработка, тестирование, деплой

Foundry (опционально) - альтернатива с продвинутыми возможностями

OpenZeppelin Contracts - готовые реализации токенов и стандартов

TypeChain - типизация контрактов для TS

Slither / MythX - базовая безопасность контрактов



🧑‍⚕️ Фронтенд (dApp Layer)

React + Next.js - основной фреймворк

TypeScript - строго типизированный код

TailwindCSS + shadcn/ui - стилизация и UI-компоненты

Motion - анимации

🔫 Web3-интеграция

wagmi + viem - подключение кошельков, отправка транзакций, взаимодействие с контрактами

Ethers.js - библиотека для работы с Ethereum (если не viem)

RainbowKit - готовый UI-компонент для подключения кошельков

SIWE (sign-in with Ethereum) - авторизация через кошелек

Данные и хранение ☺️

The Graph - индексация данных из блокчейна

Etherscan API / Alchemy SDK - внешние данные

IPFS / Pinata / NFT.storage - хранение файлов и метаданных (особенно для NFT)

😲 Инфраструктура и деплой

Alchemy / Infura / QuickNode - провайдеры блокчейна

Vercel / Netlify / Fleek / IPFS - деплой фронта

HardHat Deploy / Tenderly - деплой и симуляция контрактов

👊 Тесты и утилиты

Jest / Mocha / Chai - тестирование JS/TS-логики

HardHat Tests - тесты для контрактов

ViTest - альтернатива Jest для Vite/TS

ESLint / Prettier / Husky - стиль и контроль кода

😊 Дополнительное

Git + GitHub - контроль версий и портфолио

Telegram / Discord боты (Python/Node) - если автоматизируешь уведомления или арбитраж

Zod / Yup - типизированная валидация данных

Supabase / Firebase / PostgreSQL - бэкенд и база (если off-chain логика)


В результате получается такой стек ☕️

TypeScript, Solidity, HardHat, Ethers.js, Wagmi, React/Next.js, Tailwind, The Graph, IPFS, Alchemy, RainbowKit, shadcn/ui, GitHub Actions

🚬 5 Месяцев, для повышения этих HARD-SKILLS, для этого буду решать больше проектов на каждую из технологий

Давайте разбирать и другие WEB3 JOBS

проявите реакции! 😁

😊 ПРОЕКТЫ Full-stack Web3

разберем проекты для реализации и практики web3 технологий

1⃣ NFT-Галерея с минтом + метаданными на IPFS

прокачиваем:

> Контракты (ERC-721)

> Хранение через IPFS

> Загрузка изображений и JSON

> Wagmi + viem + кнопка "Mint"

> Отображение NFT владельца

> Работа с метаданными и токенURI

💸 Технологии: Solidity, Hardhat, OpenZeppelin, IPFS, React, Wagmi, viem, Tailwind

2⃣ DAO-голосовалка с токеном

прокачиваем:

> ERC-20 или ERC-1155 токен

> Контракт DAO (создание предложений, голосование)

> Подсчет голосов

> Подключение кошелька и участие в голосовании с фронта

> Подпись сообщений


😐 Технологии: Solidity, Hardhat, RainbowKit, Wagmi, TypeScript, Tailwind, useContractRead, writeContract

3⃣ DEX-интерфейс (Uniswap-подобный swap)

прокачаем:

> Вызовы чужих контрактов (Uniswap / Sushi / Pancake)

> Подключение кошелька

> Расчет курсов, approve, swap

> Отображение баланса токенов

> Работа с токенами (ERC-20 ABI)

👍 Технологии: Ethers.js / viem, React, Wagmi, TypeScript, Uniswap SDK, Tailwind

4⃣ Арбитражный бот с фронтом

прокачиваем:

> Python/Node backend (или бота)

> Подключение API бирж

> Веб-интерфейс с контролем стратегии

> Telegram-уведомления

> Интерактивная панель с логами и действиями


🎮 Технологии: Python / Node.js, React, Telegram Bot, Tailwind, Ethers.js, CoinGecko API / CMC API

5⃣ Sign-in with Ethereum + gated content

прокачиваем:

> Подписание сообщения (SIWE)

> Валидация на backend

> Gated-контент (например, доступ только NFT-холдерам)

> Интеграция с smart contract для проверки прав

💰 Технологии: Next.js, SIWE, Wagmi, Express, Ethers.js, TypeScript

6⃣ Дашборд для Web3-протокола

прокачиваем:

> Взаимодействие с контрактами (read-only)

> The Graph / Alchemy SDK

> Динамическое отображение данных: объемы, токены, события

> Графики и UI для инвесторов / юзеров


🤵‍♂️ Технологии: React, The Graph, Chart.js, Tailwind, TypeScript, Ethers.js

7⃣ Мини-маркетплейс NFT

прокачиваем:

> Mint / List / Buy / Cancel NFT

> Работа с контрактами на обе стороны (покупатель/продавец)

> UI + логика отображения лотов

> Отслеживание статуса транзакции

😎 Технологии: Solidity, Hardhat, Wagmi, RainbowKit, Tailwind, viem

ШО ДЕЛАЮ 👨‍🦲

начинаю с 1-2 проектов

заливаю на GitHub + демо на Vercel/Netlify.

весь процесс будет тут в Twitter и на YouTube

😨 РЕАКЦИИ!!!!!

🤩 WEB2 / WEB3 GRIND??

почему я выбрал Web3, а не Web2: взгляд с технической стороны

1⃣ Нет привычного backend - есть блокчейн

😭 В Web2: ты пишешь backend, ставишь БД, API, авторизацию.

😮 В Web3: у тебя есть смарт-контракт - это и есть твой backend.

Он живёт на блокчейне. Он публичный. Его нельзя изменить.

Все функции и данные - прямо внутри него 😕

2⃣ Нет логина - есть кошелёк

🤫 В Web2: логин через email, OAuth, куки.

🔫 В Web3: Sign-In with Ethereum (SIWE) Пользователь подписывает сообщение, и ты знаешь, кто он - без логов, баз и слежки.


2⃣ Нет БД - данные хранятся на блокчейне

🛌 В Web2: ты создаёшь таблицы, поля, индексы.

😊 В Web3: данные пишутся в контракт, и ты читаешь их через get() или event logs.

Иногда используешь The Graph или Alchemy SDK, чтобы удобно тянуть данные ⚔️

4⃣ Фронт становится главным

😨 web2: ты пилишь интерфейс, который общается с API.

🚬 web3: весь UI - мост между контрактом и пользователем.

Подключить кошелёк, подписать транзу, дождаться подтверждения, показать результат - всё на тебе 🚰

5⃣ Ошибка == навсегда

🔧 web2: баг на бэке - пофиксил, задеплоил заново.

🏆 web3: баг в контракте = замороженные деньги.

Поэтому тут меньше "быстрее", больше "надёжнее" 🍪🍪

6⃣ Код становится общественным достоянием

✏️ В Web3 почти всё open-source

Ты можешь посмотреть, как работают контракты Uniswap, ENS

Или внести свой вклад. Это ощущение участия в движении 😮

😏 Почему Web3

Ты ближе к деньгам и ответственности 😐

👍 Ты не пишешь код "на сервере" - ты строишь протокол

А ВЫ ПОЧЕМУ В WEB3?? ВАШИ МЫСЛИ

😮😮😮 РЕАКЦИИ