# 🦊 MetaMask RPC Changer v2.0

**Автоматизована система для зміни RPC провайдерів у MetaMask**

Повністю автоматизоване рішення для додавання та зміни мереж у MetaMask через посилання або QR-коди. Жодних ручних налаштувань - просто відскануйте QR-код або відкрийте лінк!

---

## 🚀 Нові можливості v2.0

### ✨ Повна автоматизація
- **Готові лінки**: Згенеруйте лінк один раз - використовуйте скрізь
- **QR-коди**: Миттєве додавання мережі через сканування
- **Автоматичне виконання**: Відкрийте лінк - мережа додається автоматично
- **Підтримка мобільних**: Працює в MetaMask Mobile через deep links

### 📱 Підтримка всіх платформ
- Desktop (браузерне розширення MetaMask)
- Mobile (MetaMask Mobile для iOS/Android)
- Автоматичне визначення платформи та перенаправлення

### 🎨 Нові сторінки
1. **Генератор лінків** (`generator.html`) - створення власних автоматичних лінків
2. **Автоматичне виконання** (`auto.html`) - додавання мережі з URL параметрів
3. **Галерея QR-кодів** (`gallery.html`) - готові QR-коди популярних мереж

---

## 📂 Структура проекту

```
metamask_rpc_changer/
├── index.html              # Головна сторінка (ручне додавання)
├── generator.html          # 🔥 Генератор автоматичних лінків
├── auto.html              # 🔥 Сторінка автоматичного виконання
├── gallery.html           # 🔥 Галерея готових QR-кодів
├── mobile.html            # Мобільна версія (deep links)
├── script.js              # Логіка головної сторінки
├── generator-script.js    # 🔥 Логіка генератора
├── auto-script.js         # 🔥 Логіка автоматичного виконання
├── gallery-script.js      # 🔥 Логіка галереї
├── mobile-script.js       # Логіка мобільної версії
├── styles.css             # Загальні стилі (оновлено)
└── README.md              # Ця документація
```

---

## 🎯 Швидкий старт

### Варіант 1: Використати готові QR-коди

1. Відкрийте `gallery.html`
2. Виберіть потрібну мережу
3. **Десктоп**: Натисніть "Тестувати"
4. **Мобільний**: Скануйте QR-код камерою телефону
5. Підтвердіть у MetaMask

### Варіант 2: Створити власний лінк

1. Відкрийте `generator.html`
2. Введіть параметри мережі
3. Натисніть "Згенерувати лінк"
4. Скопіюйте лінк або завантажте QR-код
5. Поділіться з іншими користувачами!

### Варіант 3: Ручне додавання

1. Відкрийте `index.html`
2. Заповніть форму параметрами мережі
3. Натисніть "Додати/Оновити мережу"
4. Підтвердіть у MetaMask

---

## 📖 Детальна інструкція

### 🔗 Генератор лінків (`generator.html`)

**Призначення**: Створення автоматичних лінків та QR-кодів для швидкого додавання мереж.

#### Як використовувати:

1. **Заповніть параметри мережі**:
   - Chain ID (наприклад: 1, 56, 137)
   - RPC URL (наприклад: https://rpc.example.com)
   - Назва мережі
   - Символ валюти (опціонально)
   - Block Explorer URL (опціонально)

2. **Натисніть "Згенерувати лінк"**

3. **Отримайте результат**:
   - **Десктоп лінк**: Для використання в браузері з MetaMask
   - **Мобільний лінк**: Deep link для MetaMask Mobile
   - **2 QR-коди**: Окремо для десктопу та мобільного

4. **Використайте згенеровані матеріали**:
   - **Копіювати**: Скопіюйте лінк для пошірення
   - **Тестувати**: Перевірте, як працює лінк
   - **Завантажити QR**: Збережіть QR-код як зображення

#### Приклади готових шаблонів:

У генераторі є готові шаблони популярних мереж:
- Ethereum Mainnet (LlamaRPC, Ankr)
- BNB Smart Chain (Binance, Ankr)
- Polygon (офіційний, Ankr)
- Arbitrum One
- Optimism
- Avalanche C-Chain
- Fantom Opera

Просто натисніть "Використати" біля потрібного шаблону!

---

### ⚡ Автоматичне виконання (`auto.html`)

**Призначення**: Сторінка, яка автоматично додає мережу на основі параметрів у URL.

#### Формат URL:

```
auto.html?chainId=1&rpcUrl=https://eth.llamarpc.com&chainName=Ethereum&symbol=ETH&explorerUrl=https://etherscan.io
```

#### Параметри URL:

| Параметр | Обов'язковий | Опис | Приклад |
|----------|-------------|------|---------|
| `chainId` | ✅ Так | ID мережі | `1`, `56`, `137` |
| `rpcUrl` | ✅ Так | URL RPC провайдера | `https://rpc.example.com` |
| `chainName` | ✅ Так | Назва мережі | `Ethereum Mainnet` |
| `symbol` | ❌ Ні | Символ нативної валюти | `ETH`, `BNB`, `MATIC` |
| `explorerUrl` | ❌ Ні | URL блок-експлорера | `https://etherscan.io` |

#### Як це працює:

1. Користувач відкриває лінк (через браузер або QR-код)
2. Сторінка автоматично зчитує параметри з URL
3. Показує деталі мережі для перевірки
4. Автоматично викликає MetaMask API
5. Користувач підтверджує у MetaMask
6. Мережа додана! ✅

#### Підтримка платформ:

- **Desktop**: Якщо встановлено MetaMask - одразу додає мережу
- **Mobile**: Якщо MetaMask не знайдено - перенаправляє на MetaMask Mobile
- **Автоматичне визначення**: Система сама розуміє, на якій платформі запущена

---

### 🖼️ Галерея QR-кодів (`gallery.html`)

**Призначення**: Готова колекція QR-кодів для популярних мереж з різними RPC провайдерами.

#### Доступні мережі:

**Ethereum** (3 варіанти RPC):
- LlamaRPC - рекомендовано для більшості
- Ankr - глобальна інфраструктура
- Cloudflare - швидкість та безпека

**BNB Smart Chain** (3 варіанти):
- Binance (офіційний) - найкраща швидкість
- Ankr - альтернативний надійний
- NodeReal - високопродуктивний

**Polygon** (3 варіанти):
- Офіційний - швидко та дешево
- Ankr - стабільний доступ
- Alchemy - преміум з розширеними можливостями

**Layer 2 мережі**:
- Arbitrum One - низькі комісії
- Optimism - швидкі транзакції
- Base - від Coinbase

**Інші мережі**:
- Avalanche C-Chain
- Fantom Opera
- zkSync Era

#### Функції кожної картки:

- **Тестувати**: Відразу додати мережу в MetaMask
- **Завантажити QR**: Зберегти QR-код як зображення
- **Копіювати лінк**: Скопіювати лінк для пошірення

#### Фільтри:

Використовуйте фільтри для швидкого пошуку:
- Усі мережі
- Ethereum
- BSC
- Polygon
- Layer 2
- Інші

---

## 🔧 Технічні деталі

### Формат автоматичного лінку

**Desktop лінк**:
```
https://yourdomain.com/auto.html?chainId=56&rpcUrl=https://bsc-dataseed.binance.org/&chainName=BNB%20Smart%20Chain&symbol=BNB&explorerUrl=https://bscscan.com
```

**Mobile Deep Link**:
```
https://metamask.app.link/dapp/yourdomain.com/auto.html?chainId=56&...
```

### API MetaMask

Проект використовує MetaMask Ethereum Provider API:

```javascript
await window.ethereum.request({
    method: 'wallet_addEthereumChain',
    params: [{
        chainId: '0x38', // Hex формат
        chainName: 'BNB Smart Chain',
        rpcUrls: ['https://bsc-dataseed.binance.org/'],
        nativeCurrency: {
            name: 'BNB',
            symbol: 'BNB',
            decimals: 18
        },
        blockExplorerUrls: ['https://bscscan.com']
    }]
});
```

### Підтримка мобільних платформ

**Визначення платформи**:
```javascript
const userAgent = navigator.userAgent;
const isAndroid = /android/i.test(userAgent);
const isIOS = /iPad|iPhone|iPod/.test(userAgent);
```

**Deep Link формат**:
- Android/iOS: `https://metamask.app.link/dapp/[your-url]`
- Альтернативний: `metamask://[action]?[params]`

---

## 📱 Мобільна версія

### Для користувачів MetaMask Mobile:

1. **Через QR-код**:
   - Відкрийте камеру телефону
   - Скануйте QR-код з галереї
   - Підтвердіть у MetaMask Mobile

2. **Через браузер MetaMask**:
   - Відкрийте вбудований браузер у MetaMask Mobile
   - Перейдіть на `gallery.html` або `generator.html`
   - Натисніть "Тестувати"

3. **Через звичайний браузер**:
   - Відкрийте лінк у Safari/Chrome
   - Система автоматично перенаправить на MetaMask Mobile

### Deep Links для мобільного:

Формат URL для прямого відкриття в MetaMask Mobile:
```
https://metamask.app.link/dapp/[your-domain]/auto.html?chainId=...
```

---

## 🌐 Популярні мережі та RPC

### Ethereum Mainnet (Chain ID: 1)

| Провайдер | RPC URL | Примітки |
|-----------|---------|----------|
| LlamaRPC | `https://eth.llamarpc.com` | Рекомендовано |
| Ankr | `https://rpc.ankr.com/eth` | Надійний |
| Cloudflare | `https://cloudflare-eth.com` | Швидкий |

### BNB Smart Chain (Chain ID: 56)

| Провайдер | RPC URL | Примітки |
|-----------|---------|----------|
| Binance | `https://bsc-dataseed.binance.org/` | Офіційний |
| Ankr | `https://rpc.ankr.com/bsc` | Альтернативний |
| NodeReal | `https://bsc-mainnet.nodereal.io/v1/...` | Високопродуктивний |

### Polygon (Chain ID: 137)

| Провайдер | RPC URL | Примітки |
|-----------|---------|----------|
| Polygon | `https://polygon-rpc.com` | Офіційний |
| Ankr | `https://rpc.ankr.com/polygon` | Стабільний |
| Alchemy | `https://polygon-mainnet.g.alchemy.com/v2/demo` | Преміум |

### Layer 2 мережі

| Мережа | Chain ID | RPC URL |
|--------|----------|---------|
| Arbitrum One | 42161 | `https://arb1.arbitrum.io/rpc` |
| Optimism | 10 | `https://mainnet.optimism.io` |
| Base | 8453 | `https://mainnet.base.org` |

### Інші популярні мережі

| Мережа | Chain ID | RPC URL | Символ |
|--------|----------|---------|--------|
| Avalanche | 43114 | `https://api.avax.network/ext/bc/C/rpc` | AVAX |
| Fantom | 250 | `https://rpc.ftm.tools/` | FTM |
| zkSync Era | 324 | `https://mainnet.era.zksync.io` | ETH |

---

## 💡 Приклади використання

### Приклад 1: Додати Ethereum з LlamaRPC

**Лінк**:
```
auto.html?chainId=1&rpcUrl=https://eth.llamarpc.com&chainName=Ethereum%20Mainnet&symbol=ETH&explorerUrl=https://etherscan.io
```

**Використання**:
1. Скопіюйте лінк
2. Відкрийте у браузері з MetaMask
3. Підтвердіть додавання
4. Готово! ✅

### Приклад 2: QR-код для BSC

1. Відкрийте `generator.html`
2. Виберіть шаблон "BNB Smart Chain (Binance)"
3. Натисніть "Згенерувати лінк"
4. Завантажте "Мобільний QR"
5. Надрукуйте або поділіться з іншими!

### Приклад 3: Корпоративне використання

**Сценарій**: Додати приватну мережу для всіх співробітників

1. **Створіть лінк**:
   - Відкрийте `generator.html`
   - Введіть параметри вашої приватної мережі
   - Згенеруйте лінк

2. **Розповсюдьте**:
   - Відправте лінк електронною поштою
   - Або згенеруйте QR-код для офісу
   - Опублікуйте в корпоративній вікі

3. **Співробітники**:
   - Відкривають лінк
   - Підтверджують у MetaMask
   - Готово - всі використовують однакові налаштування!

### Приклад 4: Для DApp розробників

**Інтеграція у ваш DApp**:

```html
<!-- HTML -->
<button id="addNetworkBtn">
    Додати нашу мережу в MetaMask
</button>

<script>
document.getElementById('addNetworkBtn').addEventListener('click', () => {
    const networkUrl = 'https://yourdomain.com/auto.html' +
        '?chainId=1234' +
        '&rpcUrl=https://your-rpc.com' +
        '&chainName=Your%20Network' +
        '&symbol=YRN' +
        '&explorerUrl=https://explorer.your-network.com';
    
    window.open(networkUrl, '_blank');
});
</script>
```

---

## 🔒 Безпека

### Що потрібно знати:

1. **MetaMask завжди запитує підтвердження**
   - Користувач повинен схвалити додавання мережі
   - Неможливо додати мережу без згоди користувача

2. **Перевіряйте параметри**
   - Завжди перевіряйте RPC URL перед підтвердженням
   - Переконайтеся, що Chain ID відповідає мережі

3. **Використовуйте надійні RPC**
   - Офіційні провайдери (Binance, Polygon)
   - Перевірені сервіси (Ankr, Alchemy, Infura)
   - Уникайте невідомих RPC провайдерів

4. **Обмеження MetaMask**
   - Не можна змінити RPC для вже існуючих популярних мереж через MetaMask UI
   - Можна додати кастомні мережі або оновити існуючі параметри

### Рекомендації:

- ✅ Використовуйте HTTPS для RPC URL
- ✅ Перевіряйте Chain ID на офіційних сайтах
- ✅ Використовуйте відомі Block Explorer
- ❌ Не використовуйте HTTP (незахищений)
- ❌ Не довіряйте невідомим RPC провайдерам

---

## 🚀 Розгортання

### Локальний запуск:

1. Клонуйте репозиторій або завантажте файли
2. Відкрийте `index.html` у браузері
3. Або використовуйте локальний сервер:

```bash
# Python 3
python -m http.server 8000

# Node.js (npx)
npx serve

# PHP
php -S localhost:8000
```

4. Відкрийте `http://localhost:8000`

### Публічне розгортання:

#### GitHub Pages:

1. Завантажте всі файли у GitHub репозиторій
2. Перейдіть у Settings → Pages
3. Виберіть гілку для публікації
4. Збережіть налаштування
5. Готово! Ваш сайт доступний за адресою:
   `https://username.github.io/repository-name/`

#### Netlify:

1. Перетягніть папку проекту на Netlify
2. Або підключіть GitHub репозиторій
3. Netlify автоматично розгорне проект
4. Отримаєте URL виду: `https://your-site.netlify.app`

#### Vercel:

```bash
# Встановіть Vercel CLI
npm i -g vercel

# Розгорніть проект
cd metamask_rpc_changer
vercel
```

---

## 🛠️ Налаштування та кастомізація

### Додати власні мережі в галерею:

Відредагуйте `gallery-script.js`:

```javascript
const networks = [
    // ... існуючі мережі
    {
        category: 'other', // ethereum, bsc, polygon, layer2, other
        name: 'Ваша мережа',
        description: 'Опис вашої мережі українською',
        chainId: 12345,
        rpcUrl: 'https://your-rpc.com',
        symbol: 'YRN',
        explorerUrl: 'https://explorer.your-network.com'
    }
];
```

### Змінити стилі:

Відредагуйте `styles.css`:

```css
:root {
    --primary-color: #f6851b;    /* Основний колір */
    --secondary-color: #037dd6;  /* Додатковий колір */
    --success-color: #27ae60;    /* Успіх */
    --error-color: #e74c3c;      /* Помилка */
}
```

### Додати логотип:

```html
<!-- В header кожного HTML файлу -->
<header>
    <img src="your-logo.png" alt="Logo" style="max-width: 200px;">
    <h1>🦊 MetaMask RPC Changer</h1>
</header>
```

---

## 📊 Сумісність

### Браузери:

- ✅ Chrome/Brave (з MetaMask розширенням)
- ✅ Firefox (з MetaMask розширенням)
- ✅ Edge (з MetaMask розширенням)
- ✅ Safari Mobile (перенаправлення на MetaMask Mobile)
- ✅ Chrome Mobile (перенаправлення на MetaMask Mobile)

### Пристрої:

- ✅ Desktop (Windows, macOS, Linux)
- ✅ Mobile (iOS, Android)
- ✅ Tablet (iOS, Android)

### MetaMask версії:

- ✅ MetaMask Browser Extension (всі актуальні версії)
- ✅ MetaMask Mobile (iOS/Android)

---

## 🤝 Внесок та розробка

### Для розробників:

Структура проекту дозволяє легко розширювати функціонал:

1. **Додати нові мережі**: Редагуйте масиви `networks` у відповідних скриптах
2. **Нові функції**: Створіть нові HTML/JS файли та підключіть стилі
3. **Покращення UI**: Модифікуйте `styles.css`

### Як зробити внесок:

1. Fork репозиторію
2. Створіть нову гілку (`git checkout -b feature/AmazingFeature`)
3. Зробіть зміни та commit (`git commit -m 'Add AmazingFeature'`)
4. Push у гілку (`git push origin feature/AmazingFeature`)
5. Створіть Pull Request

---

## 📞 Підтримка

### Часті питання:

**Q: Чому MetaMask не відкривається автоматично?**  
A: Переконайтеся, що MetaMask встановлено. Для мобільних пристроїв встановіть MetaMask Mobile.

**Q: Можна змінити RPC для Ethereum Mainnet?**  
A: MetaMask не дозволяє змінювати RPC через API для деяких популярних мереж. Зміни можна зробити вручну в налаштуваннях MetaMask.

**Q: QR-код не працює на мобільному**  
A: Переконайтеся, що у вас встановлено MetaMask Mobile. Деякі камери потребують дозволу для відкриття посилань.

**Q: Як видалити додану мережу?**  
A: Відкрийте MetaMask → Networks → Виберіть мережу → Delete/Remove

**Q: Безпечно використовувати сторонні RPC?**  
A: Використовуйте тільки перевірені RPC провайдери (Ankr, Alchemy, Infura, офіційні).

---

## 📜 Ліцензія

MIT License - використовуйте вільно у власних проектах!

---

## 🎉 Подяки

- MetaMask за чудовий wallet та API
- Спільноті Web3 за підтримку
- Всім RPC провайдерам за безкоштовні сервіси

---

## 📈 Версії

### v2.0.0 (Поточна) - Повна автоматизація
- ✨ Генератор автоматичних лінків
- ✨ Автоматичне виконання з URL параметрів
- ✨ Галерея готових QR-кодів
- ✨ Підтримка мобільних deep links
- ✨ Автоматичне визначення платформи
- 📱 Покращена мобільна підтримка
- 🎨 Оновлений дизайн та UX

### v1.0.0 - Базовий функціонал
- Ручне додавання мереж
- Готові шаблони популярних мереж
- Базова мобільна версія
- QR-коди для мобільних

---

## 🔮 Майбутні плани

- [ ] Підтримка інших wallet (Coinbase Wallet, Trust Wallet)
- [ ] Експорт/імпорт конфігурацій мереж
- [ ] API для інтеграції в DApps
- [ ] Багатомовна підтримка (EN, ES, FR)
- [ ] Темна тема
- [ ] Аналітика використання мереж

---

**Створено з ❤️ для спільноти Web3**

🌐 [GitHub](https://github.com) | 🐦 [Twitter](https://twitter.com) | 💬 [Discord](https://discord.com)