Доработать клиентский UI Solana-регистрации

shine-UI/js/pages/devnet-topup-view.js

@@ -5,7 +5,7 @@ import { state } from '../state.js';
 export const pageMeta = { id: 'devnet-topup-view', title: 'Пополнение DEVNET', showAppChrome: false };
 
 const SENDER_PRIVATE_32_BASE58 = '6xqAuKYvA8qrCdAkcw7Y8aMgvBnYk8JLxWLma5BzbAvu';
-const TRANSFER_AMOUNT_SOL = 0.01;
+const TRANSFER_AMOUNT_SOL = 0.02;
 
 function readWalletFromUrl() {
   try {
@@ -40,6 +40,7 @@ export function render({ navigate }) {
     <strong>Кошелёк получателя</strong>
     <p class="meta-muted" style="word-break:break-all;">${targetWallet || 'Не передан параметр wallet'}</p>
     <p class="meta-muted">Сумма перевода: ${TRANSFER_AMOUNT_SOL} SOL</p>
+    <p class="meta-muted" id="devnet-topup-target-balance">Баланс: ...</p>
   `;
 
   const status = document.createElement('p');
@@ -50,22 +51,32 @@ export function render({ navigate }) {
   status.style.whiteSpace = 'pre-wrap';
   status.textContent = 'Готово к пополнению.';
 
+  const successHint = document.createElement('p');
+  successHint.style.width = 'min(100%, 320px)';
+  successHint.style.display = 'none';
+  successHint.style.margin = '0';
+  successHint.style.padding = '14px 16px';
+  successHint.style.borderRadius = '16px';
+  successHint.style.background = 'rgba(15, 159, 99, 0.14)';
+  successHint.style.border = '2px solid rgba(15, 159, 99, 0.32)';
+  successHint.style.fontSize = '24px';
+  successHint.style.fontWeight = '800';
+  successHint.style.lineHeight = '1.25';
+  successHint.style.color = '#0f9f63';
+  successHint.style.textAlign = 'center';
+  successHint.style.whiteSpace = 'pre-wrap';
+  successHint.textContent = '';
+
   const fillBtn = document.createElement('button');
   fillBtn.className = 'primary-btn';
   fillBtn.type = 'button';
   fillBtn.textContent = `Пополнить на ${TRANSFER_AMOUNT_SOL} SOL`;
 
-  const backBtn = document.createElement('button');
-  backBtn.className = 'secondary-btn';
-  backBtn.type = 'button';
-  backBtn.textContent = 'Назад';
-  backBtn.addEventListener('click', () => navigate('registration-payment-view'));
-
   const actions = document.createElement('div');
   actions.className = 'auth-footer-actions';
   actions.style.width = 'min(100%, 320px)';
   actions.style.justifySelf = 'center';
-  actions.append(fillBtn, backBtn);
+  actions.append(fillBtn);
 
   let senderAddress = '';
   let senderKeypair = null;
@@ -78,6 +89,15 @@ export function render({ navigate }) {
     if (senderBalanceEl) senderBalanceEl.textContent = `Баланс: ${formatSol(balance.sol, 6)} SOL`;
   };
 
+  const updateTargetBalance = async () => {
+    if (!targetWallet) return null;
+    const endpoint = state.entrySettings.solanaServer;
+    const balance = await getBalanceSol({ endpoint, address: targetWallet });
+    const targetBalanceEl = targetBox.querySelector('#devnet-topup-target-balance');
+    if (targetBalanceEl) targetBalanceEl.textContent = `Баланс: ${formatSol(balance.sol, 6)} SOL`;
+    return balance.sol;
+  };
+
   fillBtn.addEventListener('click', async () => {
     if (!targetWallet) {
       status.textContent = 'Ошибка: в URL не передан параметр wallet.';
@@ -90,6 +110,7 @@ export function render({ navigate }) {
 
     fillBtn.disabled = true;
     status.textContent = 'Отправляем перевод...';
+    successHint.style.display = 'none';
 
     try {
       const endpoint = state.entrySettings.solanaServer;
@@ -100,9 +121,21 @@ export function render({ navigate }) {
         amountSol: TRANSFER_AMOUNT_SOL,
       });
       await updateSenderBalance();
-      status.textContent = `Готово.\nSignature: ${tx.signature}`;
+      const targetBalanceSol = await updateTargetBalance();
+      status.textContent = `Транзакция прошла.\nSignature: ${tx.signature}`;
+      status.style.fontSize = '18px';
+      status.style.fontWeight = '700';
+      status.style.color = '#0f9f63';
+      fillBtn.style.display = 'none';
+      actions.style.display = 'none';
+      successHint.style.display = '';
+      successHint.textContent = `Кошелёк пополнен на ${TRANSFER_AMOUNT_SOL} SOL.\nНовый баланс: ${formatSol(targetBalanceSol || 0, 6)} SOL.\nМожете закрыть эту страницу и продолжить регистрацию.`;
     } catch (error) {
       status.textContent = `Ошибка перевода: ${error?.message || 'unknown'}`;
+      status.style.fontSize = '';
+      status.style.fontWeight = '';
+      status.style.color = '';
+      successHint.style.display = 'none';
     } finally {
       fillBtn.disabled = false;
     }
@@ -116,6 +149,7 @@ export function render({ navigate }) {
       const senderAddressEl = senderBox.querySelector('#devnet-topup-sender-address');
       if (senderAddressEl) senderAddressEl.textContent = `Адрес: ${senderAddress}`;
       await updateSenderBalance();
+      await updateTargetBalance();
       if (!targetWallet) {
         fillBtn.disabled = true;
         status.textContent = 'Передайте адрес получателя в параметре wallet.';
@@ -129,11 +163,11 @@ export function render({ navigate }) {
   screen.append(
     renderHeader({
       title: 'DEVNET пополнение',
-      leftAction: { label: '←', onClick: () => navigate('registration-payment-view') },
     }),
     senderBox,
     targetBox,
     status,
+    successHint,
     actions,
   );