Sui.

Пост

Поделитесь своими знаниями.

harry phan.
Jul 12, 2025
Обсуждение

Создайте панель управления Walrus

Я нашел сообщение на сайте https://x.com/Reset_sui/status/1944003777457271197

Сделал панель управления Walrus, на которой видно: -Затраты на хранение/запись за эпоху/день/год (Гбайт/ТБ) -Ежедневный/годовой доход и выплаты за узлы хранения -Конверсия в долларах США по сравнению с другими провайдерами

Ссылка: http://walytics.wal.app

Link

  • Sui
1
2
Поделиться
Комментарии
.

Ответы

2
MoonBags.
Jul 14 2025, 03:19

Я использую TypeScript SDK (@mysten /walrus) в тестовой сети и сталкиваюсь с этой ошибкой при попытке загрузить файл с помощью WriteBlob ():

NotEnoughBlobConfirmationsError: Too many failures while writing blob H1JLtHA4... to nodes

Просто интересно, узлы хранения тестовой сети сейчас не работают или работают нестабильно? или я упустил что-то глупое со своей стороны?

1
Лучший ответ
Комментарии
.
24p30p.
Jul 14 2025, 12:41

✅ Стартовый шаблон, готовый к использованию на GitHub: панель управления Walrus

Технологический стек:

  • React + Vite (быстрее, чем CRA)
  • CSS Tailwind для стилизации
  • @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.** Кошелек Connect.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.main.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.App.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

0
Комментарии
.

Знаете ответ?

Пожалуйста, войдите в систему и поделитесь им.

Sui is a Layer 1 protocol blockchain designed as the first internet-scale programmable blockchain platform.

420Посты612Ответы
Sui.X.Peera.

Заработай свою долю из 1000 Sui

Зарабатывай очки репутации и получай награды за помощь в развитии сообщества Sui.

Кампания вознагражденийИюль