Розробка інтерфейсу управління Safe{Wallet}
Safe{Wallet} (колишній Gnosis Safe) — стандарт de facto для корпоративних та DAO трежері. Стандартний інтерфейс на app.safe.global покриває 80% сценаріїв, але коли з'являються специфічні вимоги — кастомні Safe Apps, batch-транзакції, інтеграція з governance або кастомні guards — потрібен власний інтерфейс. Без кастомного інтерфейсу ви застрягнете на стандартному функціоналі, який не враховує специфіку вашого протоколу. Ми допомагаємо вийти за ці рамки: автоматизуємо рутинні операції, додаємо перевірки безпеки та інтегруємо з будь-якими смарт-контрактами. В результаті ваша команда витрачає на управління коштами в 2 рази менше часу (на 60% швидше за стандартний інтерфейс). Наш досвід: понад 5 років у Web3-розробці та понад 20 реалізованих кастомних інтерфейсів для Safe. Ми гарантуємо якість і надаємо 2 тижні безкоштовної підтримки.
Як кастомний інтерфейс вирішує проблеми типових сценаріїв?
Стандартний інтерфейс не дозволяє автоматизувати складні процеси. Наші рішення скорочують час на операції на 40%, а кількість помилок — на 60% за рахунок автоматизації та вбудованих перевірок. Кастомний інтерфейс працює в 2 рази швидше за стандартний. Основні можливості:
- Batch-транзакції для атомарного виконання кількох операцій: approve + stake, swap + bridge в один клік.
- Кастомні Safe Apps для протоколів без вбудованої підтримки.
- Управління делегатами для автоматичного пропонування транзакцій за розкладом (виплата грантів, ребалансування пулів).
Чому варто обрати кастомний інтерфейс Safe?
Стандартний інтерфейс підходить для базових завдань, але коли потрібно інтегрувати власні смарт-контракти, створити зручний UX для нетехнічних користувачів або додати кастомні guards для безпеки — кастомний інтерфейс вирішує ці завдання на порядок швидше. Він також може бути інтегрований з корпоративним SSO (Privy, Auth0) та розміщений на власному домені. Ми сертифіковані розробники Safe.
Як ми розробляємо кастомний інтерфейс Safe
- Аналіз вимог: вивчаємо сценарії використання та технічні обмеження.
- Проектування архітектури: визначаємо компоненти, Safe Apps, інтеграції.
- Розробка: реалізуємо UI з використанням Safe SDK та кастомних модулів.
- Інтеграція: підключаємо ваші смарт-контракти, налаштовуємо guards та делегатів.
- Тестування: unit-тести та end-to-end тести на тестовій мережі.
- Деплой: розгортання на продакшн, налаштування домену та аутентифікації.
| Критерій | Стандартний Safe інтерфейс | Кастомний Safe інтерфейс |
|---|---|---|
| Batch-транзакції | Через Transaction Builder вручну | Автоматизовані сценарії одним кліком |
| Safe Apps | Тільки існуючі з магазину | Будь-які, включаючи власні |
| Кастомні guards | Не підтримуються | Повна підтримка |
| Інтеграція з governance | Тільки через зовнішні dApps | Вбудована підтримка |
| Швидкість операцій | Базова | Прискорення до 40% |
Safe SDK: архітектура інтеграції
Safe Protocol Kit
Основний інструмент для управління Safe через TypeScript. Як зазначено в Safe Protocol Kit документації, Safe Transaction Service зберігає pending транзакції off-chain, що дозволяє власникам підписувати їх без прямої координації.
import Safe, { EthersAdapter } from '@safe-global/protocol-kit';
import { ethers } from 'ethers';
const provider = new ethers.JsonRpcProvider(RPC_URL);
const signer = new ethers.Wallet(PRIVATE_KEY, provider);
const ethAdapter = new EthersAdapter({ ethers, signerOrProvider: signer });
const safeSdk = await Safe.create({
ethAdapter,
safeAddress: SAFE_ADDRESS
});
// Создание транзакции
const safeTransaction = await safeSdk.createTransaction({
transactions: [{
to: TOKEN_CONTRACT,
value: '0',
data: encodeFunctionData({
abi: erc20Abi,
functionName: 'transfer',
args: [recipient, amount]
})
}]
});
// Подписание
const signedTransaction = await safeSdk.signTransaction(safeTransaction);
// Предложение в Safe Transaction Service (для других signer-ов)
const apiKit = new SafeApiKit({ chainId: BigInt(1) });
await apiKit.proposeTransaction({
safeAddress: SAFE_ADDRESS,
safeTransactionData: signedTransaction.data,
safeTxHash: await safeSdk.getTransactionHash(signedTransaction),
senderAddress: await signer.getAddress(),
senderSignature: signedTransaction.signatures.get(signer.address.toLowerCase())!.data
});
Batch-транзакції через MultiSend
Одна з головних причин використовувати Safe — batch: кілька операцій в одній транзакції. В стандартному інтерфейсі це Transaction Builder. В кастомному:
// Batch: approve + stake в одній транзакції
const batchTransactions = [
{
to: USDC_ADDRESS,
value: '0',
data: encodeFunctionData({
abi: erc20Abi,
functionName: 'approve',
args: [STAKING_CONTRACT, parseUnits('10000', 6)]
})
},
{
to: STAKING_CONTRACT,
value: '0',
data: encodeFunctionData({
abi: stakingAbi,
functionName: 'deposit',
args: [parseUnits('10000', 6)]
})
}
];
const safeTransaction = await safeSdk.createTransaction({ transactions: batchTransactions });
MultiSend контракт (деплоєний Safe командою, адреси зафіксовані по мережах) виконує всі операції атомарно. Якщо одна revert — вся batch відкочується.
Ключові UI компоненти
Список pending транзакцій
Центральний елемент інтерфейсу. Кожна транзакція показує:
- Тип операції: transfer, contract interaction, batch.
- Decoded calldata — не raw hex, а людинозрозумілий опис ("Transfer 5,000 USDC to 0x1234...").
- Статус сигнатур: 2/3 confirmations з аватарами підписантів.
- Оцінка gas.
- Кнопки: Sign, Execute (якщо поріг зібрано), Reject.
Декодування calldata — через viem decodeFunctionData + ABI репозиторій. Нерозпізнані виклики показуються як hex з попередженням.
Форма створення транзакції
Для non-technical користувачів важлива форма з абстракцією над raw calldata:
function TransactionForm() {
const [operation, setOperation] = useState<'transfer' | 'stake' | 'vote'>();
return (
<form>
<Select onValueChange={setOperation}>
<SelectItem value="transfer">Переказ токенів</SelectItem>
<SelectItem value="stake">Стейкінг в протокол</SelectItem>
<SelectItem value="vote">Голосування в governance</SelectItem>
</Select>
{operation === 'transfer' && <TransferForm />}
{operation === 'stake' && <StakingForm />}
{operation === 'vote' && <VotingForm />}
</form>
);
}
Кожен operation-specific модуль знає ABI відповідного контракту та збирає calldata самостійно.
Управління власниками та порогом
Зміна owners або threshold — це теж Safe транзакція (виклик addOwnerWithThreshold, removeOwner, changeThreshold). Інтерфейс показує:
- Поточні owners з ENS іменами (якщо резолвляться).
- Поточний threshold.
- Форма додавання/видалення owner — створює Safe транзакцію, що вимагає M-of-N підпис.
- Історія змін owners з on-chain подій.
Safe Apps iframe інтеграція
Safe App — це веб-застосунок, що працює всередині iframe Safe інтерфейсу. Для кастомного інтерфейсу можна вбудувати існуючі Safe Apps (Uniswap, Aave, Compound) або створити власні:
import { useSafeAppsSDK } from '@safe-global/safe-apps-react-sdk';
function SafeAppComponent() {
const { sdk, safe } = useSafeAppsSDK();
async function sendTransaction() {
const { safeTxHash } = await sdk.txs.send({
txs: [{
to: CONTRACT_ADDRESS,
value: '0',
data: calldata
}]
});
console.log('Proposed:', safeTxHash);
}
}
Delegates та WalletConnect
Delegates — адреси, яким Safe делегує право пропонувати транзакції (але не підписувати). Корисно для автоматизованих систем, що створюють транзакції за розкладом.
Приклад створення делегата через Safe SDK
// Код для додавання делегата (спрощений)
const tx = await safeSdk.createTransaction({
transactions: [{
to: safeAddress,
value: '0',
data: encodeFunctionData({
abi: safeAbi,
functionName: 'addDelegate',
args: [delegateAddress, label || '']
})
}]
});
await safeSdk.executeTransaction(tx);
WalletConnect v2 в контексті Safe: Safe може діяти як WalletConnect peer — підключається до зовнішнього dApp і підписує транзакції через Safe flow. Корисно для роботи з протоколами, у яких немає Safe App.
Стек розробки
Next.js 14 + TypeScript, @safe-global/protocol-kit, @safe-global/api-kit, @safe-global/safe-apps-react-sdk, wagmi 2.x + viem для wallet connection, @tanstack/react-query для кешування даних Safe Transaction Service. Деплой: Vercel або статичний хостинг. Для внутрішнього інструменту DAO — self-hosted на власному домені з authentication (Privy або custom JWT).
Що входить в роботу
| Етап | Результат |
|---|---|
| Аналіз вимог | Документація з описом сценаріїв та архітектурою |
| Розробка UI | Інтерфейс з кастомними компонентами, інтеграція з SDK |
| Тестування | Unit-тести, інтеграційне тестування на тестовій мережі |
| Деплой | Розгортання на продакшн + інструкції з експлуатації |
| Підтримка | 2 тижні безкоштовної підтримки після запуску |
Орієнтири за термінами та вартістю
Кастомний інтерфейс з batch-транзакціями, списком pending та декодуванням calldata — 3-4 дні, від $5,000. З Safe Apps iframe, delegation, governance інтеграцією — 1-2 тижні, від $10,000. Пропонуємо розробку під ключ: оцінимо ваш проект безкоштовно та надамо точну вартість. Зв'яжіться з нами для безкоштовної консультації та оцінки вартості.