Допис
Діліться своїми знаннями.
Побудуйте інформаційну панель Walrus
Я знайшов пост з https://x.com/Reset_sui/status/1944003777457271197
Зробив приладову панель Walrus, що показує: -Витрати на зберігання/запис за епоху/день/рік (ГБ/ТБ) -Щоденний/річний дохід та виплати вузлів зберігання Конверсії в доларах США для порівняння з іншими провайдерами
Посилання: http://walytics.wal.app
Link
- Sui
Відповіді
2Я використовую SDK TypeScript (@mysten /walrus) у testnet і стикаюся з цією помилкою, коли намагаюся завантажити файл за допомогою writeBlob ():
NotEnoughBlobConfirmationsError: Too many failures while writing blob H1JLtHA4... to nodes
просто цікаво, чи зараз вузли зберігання testnet не працюють чи розшаровуються? чи я пропускаю щось дурне зі свого боку?
✅ Готовий початковий шаблон GitHub: інформаційна панель моржів
Технологічний стек:
- React + Vite (швидше, ніж CRA)
- Tailwind CSS для стилізації
@mysten/sui.js
для Sui RPC та гаманця- Передіаграми для діаграм
- Підтримка державного управління
Структура папок:
walrus-dashboard/
├── public/
├── src/
│ ├── components/
│ │ ├── WalletConnect.tsx
│ │ ├── ProtocolStats.tsx
│ │ ├── MyPositions.tsx
│ │ └── Chart.tsx
│ ├── state/
│ │ └── useSuiStore.ts
│ ├── App.tsx
│ └── main.tsx
├── index.html
├── tailwind.config.js
└── vite.config.ts
1.WalletConnect.tsx
import { useWallet } from '@mysten/wallet-kit';
export default function WalletConnect() {
const { connect, disconnect, connected, currentAccount } = useWallet();
return (
<div className="p-4">
{connected ? (
<div>
<p>Connected: {currentAccount?.address.slice(0, 10)}...</p>
<button onClick={disconnect} className="bg-red-500 p-2 text-white">Disconnect</button>
</div>
) : (
<button onClick={() => connect()} className="bg-blue-500 p-2 text-white">Connect Wallet</button>
)}
</div>
);
}
2.ПротоколСтатис.tsx
import { useEffect, useState } from 'react';
import { SuiClient } from '@mysten/sui.js/client';
const client = new SuiClient({ url: 'https://fullnode.testnet.sui.io' });
export default function ProtocolStats() {
const [tvl, setTvl] = useState(0);
useEffect(() => {
async function fetchTVL() {
// Replace with real on-chain object ID
const obj = await client.getObject({
id: '0x...vault_id',
options: { showContent: true }
});
const balance = parseInt(obj.data.content.fields.total_deposits);
setTvl(balance / 1e9); // assuming 9 decimals
}
fetchTVL();
}, []);
return (
<div className="bg-white shadow p-4 rounded">
<h2 className="text-xl font-semibold">Protocol TVL</h2>
<p className="text-3xl">${tvl.toLocaleString()}</p>
</div>
);
}
3.основний.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
4.додаток.TSX
import WalletConnect from './components/WalletConnect';
import ProtocolStats from './components/ProtocolStats';
function App() {
return (
<div className="min-h-screen bg-gray-100 p-6">
<WalletConnect />
<div className="mt-8">
<ProtocolStats />
</div>
</div>
);
}
export default App;
5.Налаштування заднього вітра
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Потім оновіть tailwind.config.js
і index.css
відповідно.
Наступні функції, які ви можете додати:
- Потягніть депозити та позики користувача (MyPositions.tsx)
- Додайте діаграму TVL за допомогою Recharts
- Додати сповіщення про ліквідацію
- Імітувати
sui move call
з інтерфейсу за допомогоюSuiClient
Ви знаєте відповідь?
Будь ласка, увійдіть та поділіться нею.
Sui is a Layer 1 protocol blockchain designed as the first internet-scale programmable blockchain platform.
Зароби свою частку з 1000 Sui
Заробляй бали репутації та отримуй винагороди за допомогу в розвитку спільноти Sui.

- 24p30p... SUI+186
1
- 0xduckmove... SUI+174
2
- Meaning.Sui... SUI+145
3
- ... SUIHaGiang+140
- ... SUIMoonBags+125
- ... SUIharry phan+105
- ... SUIJojo+61
- ... SUIOpiiii+58
- ... SUIobito+44
- ... SUIfomo on Sui+36
- Чому BCS вимагає точного порядку полів для десеріалізації, коли структури Move мають названі поля?53
- Помилки перевірки кількох джерел» у публікаціях модуля Sui Move - автоматичне вирішення помилок43
- Невдала операція Sui: об'єкти, зарезервовані для іншої транзакції25
- Як обмеження здібностей взаємодіють з динамічними полями в гетерогенних колекціях?05