feat(client): Twitter-style social feed UI (Phase C of v2.0.0)
Ships the client side of the v2.0.0 feed feature. Folds client-app/
into the monorepo (was previously .gitignored as "tracked separately"
but no separate repo ever existed — for v2.0.0 the client is
first-class).
Feed screens
app/(app)/feed.tsx — Feed tab
- Three-way tab strip: Подписки / Для вас / В тренде backed by
/feed/timeline, /feed/foryou, /feed/trending respectively
- Default landing tab is "Для вас" — surfaces discovery without
requiring the user to follow anyone first
- FlatList with pull-to-refresh + viewability-driven view counter
bump (posts visible ≥ 60% for ≥ 1s trigger POST /feed/post/…/view)
- Floating blue compose button → /compose
- Per-post liked_by_me fetched in batches of 6 after list load
app/(app)/compose.tsx — post composer modal
- Fullscreen, Twitter-like header (✕ left, Опубликовать right)
- Auto-focused multiline TextInput, 4000 char cap
- Hashtag preview chips that auto-update as you type
- expo-image-picker + expo-image-manipulator pipeline: resize to
1080px max-dim, JPEG Q=50 (client-side first-pass compression
before the mandatory server-side scrub)
- Live fee estimate + balance guard with a confirmation modal
("Опубликовать пост? Цена: 0.00X T · Размер: N KB")
- Exif: false passed to ImagePicker as an extra privacy layer
app/(app)/feed/[id].tsx — post detail
- Full PostCard rendering + detailed info panel (views, likes,
size, fee, hosting relay, hashtags as tappable chips)
- Triggers bumpView on mount
- 410 (on-chain soft-delete) routes back to the feed
app/(app)/feed/tag/[tag].tsx — hashtag feed
app/(app)/profile/[address].tsx — rebuilt
- Twitter-ish profile: avatar, name, address short-form, post count
- Posts | Инфо tab strip
- Follow / Unfollow button for non-self profiles (optimistic UI)
- Edit button on self profile → settings
- Secondary actions (chat, copy address) when viewing a known contact
Supporting library
lib/feed.ts — HTTP wrappers + tx builders for every /feed/* endpoint:
- publishPost (POST /feed/publish, signed)
- publishAndCommit (publish → on-chain CREATE_POST)
- fetchPost / fetchStats / bumpView
- fetchAuthorPosts / fetchTimeline / fetchForYou / fetchTrending /
fetchHashtag
- buildCreatePostTx / buildDeletePostTx
- buildFollowTx / buildUnfollowTx
- buildLikePostTx / buildUnlikePostTx
- likePost / unlikePost / followUser / unfollowUser / deletePost
(high-level helpers that bundle build + submitTx)
- formatFee, formatRelativeTime, formatCount — Twitter-like display
helpers
components/feed/PostCard.tsx — core card component
- Memoised for performance (N-row re-render on every like elsewhere
would cost a lot otherwise)
- Optimistic like toggle with heart-bounce spring animation
- Hashtag highlighting in body text (tappable → hashtag feed)
- Long-press context menu (Delete, owner-only)
- Views / likes / share-link / reply icons in footer row
Navigation cleanup
- NavBar: removed the SOON pill on the Feed tab (it's shipped now)
- (app)/_layout: hide NavBar on /compose and /feed/* sub-routes
- AnimatedSlot: treat /feed/<id>, /feed/tag/<t>, /compose as
sub-routes so back-swipe-right closes them
Channel removal (client side)
- lib/types.ts: ContactKind stripped to 'direct' | 'group'; legacy
'channel' flag removed. `kind` field kept for backward compat with
existing AsyncStorage records.
- lib/devSeed.ts: dropped the 5 channel seed contacts.
- components/ChatTile.tsx: removed channel kindIcon branch.
Dependencies
- expo-image-manipulator added for client-side image compression.
- expo-file-system/legacy used for readAsStringAsync (SDK 54 moved
that API to the legacy sub-path; the new streaming API isn't yet
stable).
Type check
- npx tsc --noEmit — clean, 0 errors.
Next (not in this commit)
- Direct attachment-bytes endpoint on the server so post-detail can
actually render the image (currently shows placeholder with URL)
- Cross-relay body fetch via /api/relays + hosting_relay pubkey
- Mentions (@username) with notifications
- Full-text search
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
vsecoder
81
client-app/app/(app)/_layout.tsx
Normal file
81
client-app/app/(app)/_layout.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
/**
|
||||
* Main app layout — кастомный `<AnimatedSlot>` + `<NavBar>`.
|
||||
*
|
||||
* AnimatedSlot — обёртка над Slot'ом, анимирующая переход при смене
|
||||
* pathname'а. Направление анимации вычисляется по TAB_ORDER: если
|
||||
* целевой tab "справа" — слайд из правой стороны, "слева" — из левой.
|
||||
*
|
||||
* Intra-tab навигация (chats/index → chats/[id]) обслуживается вложенным
|
||||
* Stack'ом в chats/_layout.tsx — там остаётся нативная slide-from-right
|
||||
* анимация, чтобы chat detail "выезжал" поверх списка.
|
||||
*
|
||||
* Side-effects (balance, contacts, WS auth, dev seed) — монтируются здесь
|
||||
* один раз; переходы между tab'ами их не перезапускают.
|
||||
*/
|
||||
import React, { useEffect } from 'react';
|
||||
import { View } from 'react-native';
|
||||
import { router, usePathname } from 'expo-router';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { useStore } from '@/lib/store';
|
||||
import { useBalance } from '@/hooks/useBalance';
|
||||
import { useContacts } from '@/hooks/useContacts';
|
||||
import { useWellKnownContracts } from '@/hooks/useWellKnownContracts';
|
||||
import { useNotifications } from '@/hooks/useNotifications';
|
||||
import { useGlobalInbox } from '@/hooks/useGlobalInbox';
|
||||
import { getWSClient } from '@/lib/ws';
|
||||
import { useDevSeed } from '@/lib/devSeed';
|
||||
import { NavBar } from '@/components/NavBar';
|
||||
import { AnimatedSlot } from '@/components/AnimatedSlot';
|
||||
|
||||
export default function AppLayout() {
|
||||
const keyFile = useStore(s => s.keyFile);
|
||||
const requests = useStore(s => s.requests);
|
||||
const insets = useSafeAreaInsets();
|
||||
const pathname = usePathname();
|
||||
|
||||
// NavBar прячется на full-screen экранах:
|
||||
// - chat detail
|
||||
// - compose (new post modal)
|
||||
// - feed sub-routes (post detail, hashtag search)
|
||||
const hideNav =
|
||||
/^\/chats\/[^/]+/.test(pathname) ||
|
||||
pathname === '/compose' ||
|
||||
/^\/feed\/.+/.test(pathname);
|
||||
|
||||
useBalance();
|
||||
useContacts();
|
||||
useWellKnownContracts();
|
||||
useDevSeed();
|
||||
useNotifications(); // permission + tap-handler
|
||||
useGlobalInbox(); // global inbox listener → notifications on new peer msg
|
||||
|
||||
useEffect(() => {
|
||||
const ws = getWSClient();
|
||||
if (keyFile) ws.setAuthCreds({ pubKey: keyFile.pub_key, privKey: keyFile.priv_key });
|
||||
else ws.setAuthCreds(null);
|
||||
}, [keyFile]);
|
||||
|
||||
useEffect(() => {
|
||||
if (keyFile === null) {
|
||||
const t = setTimeout(() => {
|
||||
if (!useStore.getState().keyFile) router.replace('/');
|
||||
}, 300);
|
||||
return () => clearTimeout(t);
|
||||
}
|
||||
}, [keyFile]);
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: '#000000' }}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<AnimatedSlot />
|
||||
</View>
|
||||
{!hideNav && (
|
||||
<NavBar
|
||||
bottomInset={insets.bottom}
|
||||
requestCount={requests.length}
|
||||
notifCount={0}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
512
client-app/app/(app)/chats/[id].tsx
Normal file
512
client-app/app/(app)/chats/[id].tsx
Normal file
@@ -0,0 +1,512 @@
|
||||
/**
|
||||
* Chat detail screen — верстка по референсу (X-style Messages).
|
||||
*
|
||||
* Структура:
|
||||
* [Header: back + avatar + name + typing-status | ⋯]
|
||||
* [FlatList: MessageBubble + DaySeparator, group-aware]
|
||||
* [Composer: floating, supports edit/reply banner]
|
||||
*
|
||||
* Весь presentational код вынесен в components/chat/*:
|
||||
* - MessageBubble (own/peer rendering)
|
||||
* - DaySeparator (day label между группами)
|
||||
* - buildRows (чистая функция группировки)
|
||||
* Date-форматирование — lib/dates.ts.
|
||||
*/
|
||||
import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
|
||||
import {
|
||||
View, Text, FlatList, KeyboardAvoidingView, Platform, Alert, Pressable,
|
||||
} from 'react-native';
|
||||
import { router, useLocalSearchParams } from 'expo-router';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import * as Clipboard from 'expo-clipboard';
|
||||
|
||||
import { useStore } from '@/lib/store';
|
||||
import { useMessages } from '@/hooks/useMessages';
|
||||
import { encryptMessage } from '@/lib/crypto';
|
||||
import { sendEnvelope } from '@/lib/api';
|
||||
import { getWSClient } from '@/lib/ws';
|
||||
import { appendMessage, loadMessages } from '@/lib/storage';
|
||||
import { randomId } from '@/lib/utils';
|
||||
import type { Message } from '@/lib/types';
|
||||
|
||||
import { Avatar } from '@/components/Avatar';
|
||||
import { Header } from '@/components/Header';
|
||||
import { IconButton } from '@/components/IconButton';
|
||||
import { Composer, ComposerMode } from '@/components/Composer';
|
||||
import { AttachmentMenu } from '@/components/chat/AttachmentMenu';
|
||||
import { VideoCircleRecorder } from '@/components/chat/VideoCircleRecorder';
|
||||
import { clearContactNotifications } from '@/hooks/useNotifications';
|
||||
import { MessageBubble } from '@/components/chat/MessageBubble';
|
||||
import { DaySeparator } from '@/components/chat/DaySeparator';
|
||||
import { buildRows, Row } from '@/components/chat/rows';
|
||||
import type { Attachment } from '@/lib/types';
|
||||
|
||||
function shortAddr(a: string, n = 6) {
|
||||
if (!a) return '—';
|
||||
return a.length <= n * 2 + 1 ? a : `${a.slice(0, n)}…${a.slice(-n)}`;
|
||||
}
|
||||
|
||||
export default function ChatScreen() {
|
||||
const { id: contactAddress } = useLocalSearchParams<{ id: string }>();
|
||||
const insets = useSafeAreaInsets();
|
||||
const keyFile = useStore(s => s.keyFile);
|
||||
const contacts = useStore(s => s.contacts);
|
||||
const messages = useStore(s => s.messages);
|
||||
const setMsgs = useStore(s => s.setMessages);
|
||||
const appendMsg = useStore(s => s.appendMessage);
|
||||
const clearUnread = useStore(s => s.clearUnread);
|
||||
|
||||
// При открытии чата: сбрасываем unread-счётчик и dismiss'им банер.
|
||||
useEffect(() => {
|
||||
if (!contactAddress) return;
|
||||
clearUnread(contactAddress);
|
||||
clearContactNotifications(contactAddress);
|
||||
}, [contactAddress, clearUnread]);
|
||||
|
||||
const contact = contacts.find(c => c.address === contactAddress);
|
||||
const chatMsgs = messages[contactAddress ?? ''] ?? [];
|
||||
const listRef = useRef<FlatList>(null);
|
||||
|
||||
const [text, setText] = useState('');
|
||||
const [sending, setSending] = useState(false);
|
||||
const [peerTyping, setPeerTyping] = useState(false);
|
||||
const [composeMode, setComposeMode] = useState<ComposerMode>({ kind: 'new' });
|
||||
const [pendingAttach, setPendingAttach] = useState<Attachment | null>(null);
|
||||
const [attachMenuOpen, setAttachMenuOpen] = useState(false);
|
||||
const [videoCircleOpen, setVideoCircleOpen] = useState(false);
|
||||
/**
|
||||
* ID сообщения, которое сейчас подсвечено (после jump-to-reply). На
|
||||
* ~2 секунды backgroundColor bubble'а мерцает accent-цветом.
|
||||
* `null` — ничего не подсвечено.
|
||||
*/
|
||||
const [highlightedId, setHighlightedId] = useState<string | null>(null);
|
||||
const highlightClearTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
// ── Selection mode ───────────────────────────────────────────────────
|
||||
// Активируется первым long-press'ом на bubble'е. Header меняется на
|
||||
// toolbar с Forward/Delete/Cancel. Tap по bubble'у в selection mode
|
||||
// toggle'ит принадлежность к выборке. Cancel сбрасывает всё.
|
||||
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
|
||||
const selectionMode = selectedIds.size > 0;
|
||||
|
||||
useMessages(contact?.x25519Pub ?? '');
|
||||
|
||||
// ── Typing indicator от peer'а ─────────────────────────────────────────
|
||||
useEffect(() => {
|
||||
if (!keyFile?.x25519_pub) return;
|
||||
const ws = getWSClient();
|
||||
let timer: ReturnType<typeof setTimeout> | null = null;
|
||||
const off = ws.subscribe('typing:' + keyFile.x25519_pub, (frame) => {
|
||||
if (frame.event !== 'typing') return;
|
||||
const d = frame.data as { from?: string } | undefined;
|
||||
if (!contact?.x25519Pub || d?.from !== contact.x25519Pub) return;
|
||||
setPeerTyping(true);
|
||||
if (timer) clearTimeout(timer);
|
||||
timer = setTimeout(() => setPeerTyping(false), 3_000);
|
||||
});
|
||||
return () => { off(); if (timer) clearTimeout(timer); };
|
||||
}, [keyFile?.x25519_pub, contact?.x25519Pub]);
|
||||
|
||||
// Throttled типinginisi-ping собеседнику.
|
||||
const lastTypingSent = useRef(0);
|
||||
const onChange = useCallback((t: string) => {
|
||||
setText(t);
|
||||
if (!contact?.x25519Pub || !t.trim()) return;
|
||||
const now = Date.now();
|
||||
if (now - lastTypingSent.current < 2_000) return;
|
||||
lastTypingSent.current = now;
|
||||
getWSClient().sendTyping(contact.x25519Pub);
|
||||
}, [contact?.x25519Pub]);
|
||||
|
||||
// Восстановить сообщения из persistent-storage при первом заходе в чат.
|
||||
//
|
||||
// Важно: НЕ перезаписываем store пустым массивом — это стёрло бы
|
||||
// содержимое, которое уже лежит в zustand (например, из devSeed или
|
||||
// только что полученные по WS сообщения пока монтировались). Если
|
||||
// в кэше что-то есть — мержим: берём max(cached, in-store) по id.
|
||||
useEffect(() => {
|
||||
if (!contactAddress) return;
|
||||
loadMessages(contactAddress).then(cached => {
|
||||
if (!cached || cached.length === 0) return; // кэш пуст → оставляем store
|
||||
const existing = useStore.getState().messages[contactAddress] ?? [];
|
||||
const byId = new Map<string, Message>();
|
||||
for (const m of cached as Message[]) byId.set(m.id, m);
|
||||
for (const m of existing) byId.set(m.id, m); // store-версия свежее
|
||||
const merged = Array.from(byId.values()).sort((a, b) => a.timestamp - b.timestamp);
|
||||
setMsgs(contactAddress, merged);
|
||||
});
|
||||
}, [contactAddress, setMsgs]);
|
||||
|
||||
const name = contact?.username
|
||||
? `@${contact.username}`
|
||||
: contact?.alias ?? shortAddr(contactAddress ?? '');
|
||||
|
||||
// ── Compose actions ────────────────────────────────────────────────────
|
||||
const cancelCompose = useCallback(() => {
|
||||
setComposeMode({ kind: 'new' });
|
||||
setText('');
|
||||
setPendingAttach(null);
|
||||
}, []);
|
||||
|
||||
// buildRows выдаёт chronological [old → new]. FlatList работает
|
||||
// inverted, поэтому reverse'им: newest = data[0] = снизу экрана.
|
||||
// Определено тут (не позже) чтобы handlers типа onJumpToReply могли
|
||||
// искать индексы по id без forward-declaration.
|
||||
const rows = useMemo(() => {
|
||||
const chrono = buildRows(chatMsgs);
|
||||
return [...chrono].reverse();
|
||||
}, [chatMsgs]);
|
||||
|
||||
/**
|
||||
* Core send logic. Принимает явные text + attachment чтобы избегать
|
||||
* race'а со state updates при моментальной отправке голоса/видео.
|
||||
* Если передано null/undefined — берём из текущего state.
|
||||
*/
|
||||
const sendCore = useCallback(async (
|
||||
textArg: string | null = null,
|
||||
attachArg: Attachment | null | undefined = undefined,
|
||||
) => {
|
||||
if (!keyFile || !contact) return;
|
||||
const actualText = textArg !== null ? textArg : text;
|
||||
const actualAttach = attachArg !== undefined ? attachArg : pendingAttach;
|
||||
const hasText = !!actualText.trim();
|
||||
const hasAttach = !!actualAttach;
|
||||
if (!hasText && !hasAttach) return;
|
||||
if (!contact.x25519Pub) {
|
||||
Alert.alert('No encryption key yet', 'The contact has not published their key. Try later.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (composeMode.kind === 'edit') {
|
||||
const target = chatMsgs.find(m => m.text === composeMode.text && m.mine);
|
||||
if (!target) { cancelCompose(); return; }
|
||||
const updated: Message = { ...target, text: actualText.trim(), edited: true };
|
||||
setMsgs(contact.address, chatMsgs.map(m => m.id === target.id ? updated : m));
|
||||
cancelCompose();
|
||||
return;
|
||||
}
|
||||
|
||||
setSending(true);
|
||||
try {
|
||||
if (hasText) {
|
||||
const { nonce, ciphertext } = encryptMessage(
|
||||
actualText.trim(), keyFile.x25519_priv, contact.x25519Pub,
|
||||
);
|
||||
await sendEnvelope({
|
||||
senderPub: keyFile.x25519_pub,
|
||||
recipientPub: contact.x25519Pub,
|
||||
senderEd25519Pub: keyFile.pub_key,
|
||||
nonce, ciphertext,
|
||||
});
|
||||
}
|
||||
|
||||
const msg: Message = {
|
||||
id: randomId(),
|
||||
from: keyFile.x25519_pub,
|
||||
text: actualText.trim(),
|
||||
timestamp: Math.floor(Date.now() / 1000),
|
||||
mine: true,
|
||||
read: false,
|
||||
edited: false,
|
||||
attachment: actualAttach ?? undefined,
|
||||
replyTo: composeMode.kind === 'reply'
|
||||
? { id: composeMode.msgId, text: composeMode.preview, author: composeMode.author }
|
||||
: undefined,
|
||||
};
|
||||
appendMsg(contact.address, msg);
|
||||
await appendMessage(contact.address, msg);
|
||||
setText('');
|
||||
setPendingAttach(null);
|
||||
setComposeMode({ kind: 'new' });
|
||||
} catch (e: any) {
|
||||
Alert.alert('Send failed', e?.message ?? 'Unknown error');
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
}, [
|
||||
text, keyFile, contact, composeMode, chatMsgs,
|
||||
setMsgs, cancelCompose, appendMsg, pendingAttach,
|
||||
]);
|
||||
|
||||
// UI send button
|
||||
const send = useCallback(() => sendCore(), [sendCore]);
|
||||
|
||||
// ── Selection handlers ───────────────────────────────────────────────
|
||||
// Long-press — входим в selection mode и сразу отмечаем это сообщение.
|
||||
const onMessageLongPress = useCallback((m: Message) => {
|
||||
setSelectedIds(prev => {
|
||||
const next = new Set(prev);
|
||||
next.add(m.id);
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Tap в selection mode — toggle принадлежности.
|
||||
const onMessageTap = useCallback((m: Message) => {
|
||||
if (!selectionMode) return;
|
||||
setSelectedIds(prev => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(m.id)) next.delete(m.id); else next.add(m.id);
|
||||
return next;
|
||||
});
|
||||
}, [selectionMode]);
|
||||
|
||||
const cancelSelection = useCallback(() => setSelectedIds(new Set()), []);
|
||||
|
||||
// ── Swipe-to-reply ──────────────────────────────────────────────────
|
||||
const onMessageReply = useCallback((m: Message) => {
|
||||
if (selectionMode) return;
|
||||
setComposeMode({
|
||||
kind: 'reply',
|
||||
msgId: m.id,
|
||||
author: m.mine ? 'You' : name,
|
||||
preview: m.text || (m.attachment ? `(${m.attachment.kind})` : ''),
|
||||
});
|
||||
}, [name, selectionMode]);
|
||||
|
||||
// ── Profile navigation (tap на аватарке / имени peer'а) ──────────────
|
||||
const onOpenPeerProfile = useCallback(() => {
|
||||
if (!contactAddress) return;
|
||||
router.push(`/(app)/profile/${contactAddress}` as never);
|
||||
}, [contactAddress]);
|
||||
|
||||
// ── Jump to reply: tap по quoted-блоку в bubble'е ────────────────────
|
||||
// Скроллим FlatList к оригинальному сообщению и зажигаем highlight
|
||||
// на ~2 секунды (highlightedId state + useEffect-driven анимация в
|
||||
// MessageBubble.highlightAnim).
|
||||
const onJumpToReply = useCallback((originalId: string) => {
|
||||
const idx = rows.findIndex(r => r.kind === 'msg' && r.msg.id === originalId);
|
||||
if (idx < 0) {
|
||||
// Сообщение не найдено (возможно удалено или ушло за пагинацию).
|
||||
// Silently no-op.
|
||||
return;
|
||||
}
|
||||
try {
|
||||
listRef.current?.scrollToIndex({
|
||||
index: idx,
|
||||
animated: true,
|
||||
viewPosition: 0.3, // оригинал — чуть выше середины экрана, не прямо в центре
|
||||
});
|
||||
} catch {
|
||||
// scrollToIndex может throw'нуть если индекс за пределами рендера;
|
||||
// fallback: scrollToOffset на приблизительную позицию.
|
||||
}
|
||||
setHighlightedId(originalId);
|
||||
if (highlightClearTimer.current) clearTimeout(highlightClearTimer.current);
|
||||
highlightClearTimer.current = setTimeout(() => {
|
||||
setHighlightedId(null);
|
||||
highlightClearTimer.current = null;
|
||||
}, 2000);
|
||||
}, [rows]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (highlightClearTimer.current) clearTimeout(highlightClearTimer.current);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// ── Selection actions ────────────────────────────────────────────────
|
||||
const deleteSelected = useCallback(() => {
|
||||
if (selectedIds.size === 0 || !contact) return;
|
||||
Alert.alert(
|
||||
`Delete ${selectedIds.size} message${selectedIds.size > 1 ? 's' : ''}?`,
|
||||
'This removes them from your device. Other participants keep their copies.',
|
||||
[
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{
|
||||
text: 'Delete',
|
||||
style: 'destructive',
|
||||
onPress: () => {
|
||||
setMsgs(contact.address, chatMsgs.filter(m => !selectedIds.has(m.id)));
|
||||
setSelectedIds(new Set());
|
||||
},
|
||||
},
|
||||
],
|
||||
);
|
||||
}, [selectedIds, contact, chatMsgs, setMsgs]);
|
||||
|
||||
const forwardSelected = useCallback(() => {
|
||||
// Forward UI ещё не реализован — показываем stub. Пример потока:
|
||||
// 1. открыть "Forward to…" screen со списком контактов
|
||||
// 2. для каждого выбранного контакта — sendEnvelope с оригинальным
|
||||
// текстом, timestamp=now
|
||||
Alert.alert(
|
||||
`Forward ${selectedIds.size} message${selectedIds.size > 1 ? 's' : ''}`,
|
||||
'Contact-picker screen is coming in the next iteration. For now, copy the text and paste.',
|
||||
[{ text: 'OK' }],
|
||||
);
|
||||
}, [selectedIds]);
|
||||
|
||||
// Copy доступен только когда выделено ровно одно сообщение.
|
||||
const copySelected = useCallback(async () => {
|
||||
if (selectedIds.size !== 1) return;
|
||||
const id = [...selectedIds][0];
|
||||
const msg = chatMsgs.find(m => m.id === id);
|
||||
if (!msg) return;
|
||||
await Clipboard.setStringAsync(msg.text);
|
||||
setSelectedIds(new Set());
|
||||
}, [selectedIds, chatMsgs]);
|
||||
|
||||
// В group-чатах над peer-сообщениями рисуется имя отправителя и его
|
||||
// аватар (group = несколько участников). В DM (direct) и каналах
|
||||
// отправитель ровно один, поэтому имя/аватар не нужны — убираем.
|
||||
const withSenderMeta = contact?.kind === 'group';
|
||||
|
||||
const renderRow = ({ item }: { item: Row }) => {
|
||||
if (item.kind === 'sep') return <DaySeparator label={item.label} />;
|
||||
return (
|
||||
<MessageBubble
|
||||
msg={item.msg}
|
||||
peerName={name}
|
||||
peerAddress={contactAddress}
|
||||
withSenderMeta={withSenderMeta}
|
||||
showName={item.showName}
|
||||
showAvatar={item.showAvatar}
|
||||
onReply={onMessageReply}
|
||||
onLongPress={onMessageLongPress}
|
||||
onTap={onMessageTap}
|
||||
onOpenProfile={onOpenPeerProfile}
|
||||
onJumpToReply={onJumpToReply}
|
||||
selectionMode={selectionMode}
|
||||
selected={selectedIds.has(item.msg.id)}
|
||||
highlighted={highlightedId === item.msg.id}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={{ flex: 1, backgroundColor: '#000000' }}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
||||
// Увеличенный offset: composer поднимается выше клавиатуры с заметным
|
||||
// зазором (20px на iOS, 10px на Android) — пользователь не видит
|
||||
// прилипания к верхнему краю клавиатуры.
|
||||
keyboardVerticalOffset={Platform.OS === 'ios' ? 20 : 10}
|
||||
>
|
||||
{/* Header — использует общий компонент <Header>, чтобы соблюдать
|
||||
правила шапки приложения (left slot / centered title / right slot). */}
|
||||
<View style={{ paddingTop: insets.top, backgroundColor: '#000000' }}>
|
||||
{selectionMode ? (
|
||||
<Header
|
||||
divider
|
||||
left={<IconButton icon="close" size={36} onPress={cancelSelection} />}
|
||||
title={`${selectedIds.size} selected`}
|
||||
right={
|
||||
<>
|
||||
{selectedIds.size === 1 && (
|
||||
<IconButton icon="copy-outline" size={36} onPress={copySelected} />
|
||||
)}
|
||||
<IconButton icon="arrow-redo-outline" size={36} onPress={forwardSelected} />
|
||||
<IconButton icon="trash-outline" size={36} onPress={deleteSelected} />
|
||||
</>
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<Header
|
||||
divider
|
||||
left={<IconButton icon="chevron-back" size={36} onPress={() => router.back()} />}
|
||||
title={
|
||||
<Pressable
|
||||
onPress={onOpenPeerProfile}
|
||||
hitSlop={4}
|
||||
style={{ flexDirection: 'row', alignItems: 'center', gap: 8, maxWidth: '100%' }}
|
||||
>
|
||||
<Avatar name={name} address={contactAddress} size={28} />
|
||||
<View style={{ minWidth: 0, flexShrink: 1 }}>
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
style={{
|
||||
color: '#ffffff',
|
||||
fontSize: 15,
|
||||
fontWeight: '700',
|
||||
letterSpacing: -0.2,
|
||||
}}
|
||||
>
|
||||
{name}
|
||||
</Text>
|
||||
{peerTyping && (
|
||||
<Text style={{ color: '#1d9bf0', fontSize: 11, fontWeight: '500' }}>
|
||||
typing…
|
||||
</Text>
|
||||
)}
|
||||
{!peerTyping && !contact?.x25519Pub && (
|
||||
<Text style={{ color: '#f0b35a', fontSize: 11 }}>
|
||||
waiting for key
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</Pressable>
|
||||
}
|
||||
right={<IconButton icon="ellipsis-horizontal" size={36} />}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Messages — inverted: data[0] рендерится снизу, последующее —
|
||||
выше. Это стандартный chat-паттерн: FlatList сразу монтируется
|
||||
с "scroll position at bottom" без ручного scrollToEnd, и новые
|
||||
сообщения (добавляемые в начало reversed-массива) появляются
|
||||
внизу естественно. Никаких jerk'ов при открытии. */}
|
||||
<FlatList
|
||||
ref={listRef}
|
||||
data={rows}
|
||||
inverted
|
||||
keyExtractor={r => r.kind === 'sep' ? r.id : r.msg.id}
|
||||
renderItem={renderRow}
|
||||
contentContainerStyle={{ paddingVertical: 10 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
ListEmptyComponent={() => (
|
||||
<View style={{
|
||||
flex: 1, alignItems: 'center', justifyContent: 'center',
|
||||
paddingHorizontal: 32, gap: 10,
|
||||
transform: [{ scaleY: -1 }], // inverted flips cells; un-flip empty state
|
||||
}}>
|
||||
<Avatar name={name} address={contactAddress} size={72} />
|
||||
<Text style={{ color: '#ffffff', fontSize: 16, fontWeight: '700', marginTop: 10 }}>
|
||||
Say hi to {name}
|
||||
</Text>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 13, textAlign: 'center', lineHeight: 20 }}>
|
||||
Your messages are end-to-end encrypted.
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Composer — floating, прибит к низу. */}
|
||||
<View style={{ paddingBottom: Math.max(insets.bottom, 4) + 6, backgroundColor: '#000000' }}>
|
||||
<Composer
|
||||
mode={composeMode}
|
||||
onCancelMode={cancelCompose}
|
||||
text={text}
|
||||
onChangeText={onChange}
|
||||
onSend={send}
|
||||
sending={sending}
|
||||
onAttach={() => setAttachMenuOpen(true)}
|
||||
attachment={pendingAttach}
|
||||
onClearAttach={() => setPendingAttach(null)}
|
||||
onFinishVoice={(att) => {
|
||||
// Voice отправляется сразу — sendCore получает attachment
|
||||
// явным аргументом, минуя state-задержку.
|
||||
sendCore('', att);
|
||||
}}
|
||||
onStartVideoCircle={() => setVideoCircleOpen(true)}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<AttachmentMenu
|
||||
visible={attachMenuOpen}
|
||||
onClose={() => setAttachMenuOpen(false)}
|
||||
onPick={(att) => setPendingAttach(att)}
|
||||
/>
|
||||
|
||||
<VideoCircleRecorder
|
||||
visible={videoCircleOpen}
|
||||
onClose={() => setVideoCircleOpen(false)}
|
||||
onFinish={(att) => {
|
||||
// Video-circle тоже отправляется сразу.
|
||||
sendCore('', att);
|
||||
}}
|
||||
/>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
28
client-app/app/(app)/chats/_layout.tsx
Normal file
28
client-app/app/(app)/chats/_layout.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* chats/_layout — вложенный Stack для chats/index и chats/[id].
|
||||
*
|
||||
* animation: 'none' — переходы между index и [id] анимирует родительский
|
||||
* AnimatedSlot (140ms, Easing.out cubic), обеспечивая единую скорость и
|
||||
* кривую между:
|
||||
* - chat open/close (index ↔ [id])
|
||||
* - tab switches (chats ↔ wallet и т.д.)
|
||||
* - sub-route open/close (settings, profile)
|
||||
*
|
||||
* gestureEnabled: true оставлен на случай если пользователь использует
|
||||
* нативный iOS edge-swipe — он вызовет router.back(), анимация пройдёт
|
||||
* через AnimatedSlot.
|
||||
*/
|
||||
import { Stack } from 'expo-router';
|
||||
|
||||
export default function ChatsLayout() {
|
||||
return (
|
||||
<Stack
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
animation: 'none',
|
||||
contentStyle: { backgroundColor: '#000000' },
|
||||
gestureEnabled: true,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
105
client-app/app/(app)/chats/index.tsx
Normal file
105
client-app/app/(app)/chats/index.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
/**
|
||||
* Messages screen — список чатов в стиле референса.
|
||||
*
|
||||
* ┌ safe-area top
|
||||
* │ TabHeader (title зависит от connection state)
|
||||
* │ ─ FlatList (chat tiles) ─
|
||||
* └ NavBar (external)
|
||||
*
|
||||
* Фильтры и search убраны — лист один поток; requests доступны через
|
||||
* NavBar → notifications tab. FAB composer'а тоже убран (чат-лист
|
||||
* просто отражает существующие беседы, создание новых — через tab
|
||||
* "New chat" в NavBar'е).
|
||||
*/
|
||||
import React, { useMemo } from 'react';
|
||||
import { View, Text, FlatList } from 'react-native';
|
||||
import { router } from 'expo-router';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
|
||||
import { useStore } from '@/lib/store';
|
||||
import { useConnectionStatus } from '@/hooks/useConnectionStatus';
|
||||
import type { Contact, Message } from '@/lib/types';
|
||||
|
||||
import { TabHeader } from '@/components/TabHeader';
|
||||
import { ChatTile } from '@/components/ChatTile';
|
||||
|
||||
export default function ChatsScreen() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const contacts = useStore(s => s.contacts);
|
||||
const messages = useStore(s => s.messages);
|
||||
|
||||
// Статус подключения: online / connecting / offline.
|
||||
// Название шапки и цвет pip'а на аватаре зависят от него.
|
||||
const connStatus = useConnectionStatus();
|
||||
|
||||
const headerTitle =
|
||||
connStatus === 'online' ? 'Messages' :
|
||||
connStatus === 'connecting' ? 'Connecting…' :
|
||||
'Waiting for internet';
|
||||
|
||||
const dotColor =
|
||||
connStatus === 'online' ? '#3ba55d' : // green
|
||||
connStatus === 'connecting' ? '#f0b35a' : // amber
|
||||
'#f4212e'; // red
|
||||
|
||||
const lastOf = (c: Contact): Message | null => {
|
||||
const msgs = messages[c.address];
|
||||
return msgs && msgs.length ? msgs[msgs.length - 1] : null;
|
||||
};
|
||||
|
||||
// Сортировка по последней активности.
|
||||
const sorted = useMemo(() => {
|
||||
return [...contacts]
|
||||
.map(c => ({ c, last: lastOf(c) }))
|
||||
.sort((a, b) => {
|
||||
const ka = a.last ? a.last.timestamp : a.c.addedAt / 1000;
|
||||
const kb = b.last ? b.last.timestamp : b.c.addedAt / 1000;
|
||||
return kb - ka;
|
||||
})
|
||||
.map(x => x.c);
|
||||
}, [contacts, messages]);
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: '#000000', paddingTop: insets.top }}>
|
||||
<TabHeader title={headerTitle} profileDotColor={dotColor} />
|
||||
|
||||
<View style={{ flex: 1 }}>
|
||||
<FlatList
|
||||
data={sorted}
|
||||
keyExtractor={c => c.address}
|
||||
renderItem={({ item }) => (
|
||||
<ChatTile
|
||||
contact={item}
|
||||
lastMessage={lastOf(item)}
|
||||
onPress={() => router.push(`/(app)/chats/${item.address}` as never)}
|
||||
/>
|
||||
)}
|
||||
contentContainerStyle={{ paddingBottom: 40, flexGrow: 1 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
/>
|
||||
|
||||
{sorted.length === 0 && (
|
||||
<View
|
||||
pointerEvents="box-none"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: 0, right: 0, top: 0, bottom: 0,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingHorizontal: 32,
|
||||
}}
|
||||
>
|
||||
<Ionicons name="chatbubbles-outline" size={42} color="#3a3a3a" style={{ marginBottom: 10 }} />
|
||||
<Text style={{ color: '#ffffff', fontSize: 16, fontWeight: '700', marginBottom: 6 }}>
|
||||
No chats yet
|
||||
</Text>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 13, textAlign: 'center', lineHeight: 20 }}>
|
||||
Use the search tab in the navbar to add your first contact.
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
390
client-app/app/(app)/compose.tsx
Normal file
390
client-app/app/(app)/compose.tsx
Normal file
@@ -0,0 +1,390 @@
|
||||
/**
|
||||
* Post composer — full-screen modal for writing a new post.
|
||||
*
|
||||
* Twitter-style layout:
|
||||
* Header: [✕] (draft-ish) [Опубликовать button]
|
||||
* Body: [avatar] [multiline TextInput autogrow]
|
||||
* [hashtags preview chips]
|
||||
* [attachment preview + remove button]
|
||||
* Footer: [📷 attach] ··· [<count / 4000>] [~fee estimate]
|
||||
*
|
||||
* The flow:
|
||||
* 1. User types content; hashtags auto-parse for preview
|
||||
* 2. (Optional) pick image — client-side compression (expo-image-manipulator)
|
||||
* → resize to 1080px max, JPEG quality 50
|
||||
* 3. Tap "Опубликовать" → confirmation modal with fee
|
||||
* 4. Confirm → publishAndCommit() → navigate to post detail
|
||||
*
|
||||
* Failure modes:
|
||||
* - Size overflow (>256 KiB): blocked client-side with hint to compress
|
||||
* further or drop attachment
|
||||
* - Insufficient balance: show humanised error from submitTx
|
||||
* - Network down: toast "нет связи, попробуйте снова"
|
||||
*/
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import {
|
||||
View, Text, TextInput, Pressable, Alert, Image, KeyboardAvoidingView,
|
||||
Platform, ActivityIndicator, ScrollView, Linking,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { router } from 'expo-router';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import * as ImagePicker from 'expo-image-picker';
|
||||
import * as ImageManipulator from 'expo-image-manipulator';
|
||||
import * as FileSystem from 'expo-file-system/legacy';
|
||||
|
||||
import { useStore } from '@/lib/store';
|
||||
import { Avatar } from '@/components/Avatar';
|
||||
import { publishAndCommit, formatFee } from '@/lib/feed';
|
||||
import { humanizeTxError, getBalance } from '@/lib/api';
|
||||
|
||||
const MAX_CONTENT_LENGTH = 4000;
|
||||
const MAX_POST_BYTES = 256 * 1024; // must match server's MaxPostSize
|
||||
const IMAGE_MAX_DIM = 1080;
|
||||
const IMAGE_QUALITY = 0.5; // JPEG Q=50 — small, still readable
|
||||
|
||||
interface Attachment {
|
||||
uri: string;
|
||||
mime: string;
|
||||
size: number;
|
||||
bytes: Uint8Array;
|
||||
width?: number;
|
||||
height?: number;
|
||||
}
|
||||
|
||||
export default function ComposeScreen() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const keyFile = useStore(s => s.keyFile);
|
||||
const username = useStore(s => s.username);
|
||||
|
||||
const [content, setContent] = useState('');
|
||||
const [attach, setAttach] = useState<Attachment | null>(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [picking, setPicking] = useState(false);
|
||||
const [balance, setBalance] = useState<number | null>(null);
|
||||
|
||||
// Fetch balance once so we can warn before publishing.
|
||||
useEffect(() => {
|
||||
if (!keyFile) return;
|
||||
getBalance(keyFile.pub_key).then(setBalance).catch(() => setBalance(null));
|
||||
}, [keyFile]);
|
||||
|
||||
// Estimated fee mirrors server's formula exactly. Displayed to the user
|
||||
// so they aren't surprised by a debit.
|
||||
const estimatedFee = useMemo(() => {
|
||||
const size = (new TextEncoder().encode(content)).length + (attach?.size ?? 0) + 128;
|
||||
return 1000 + size; // base 1000 + 1 µT/byte (matches blockchain constants)
|
||||
}, [content, attach]);
|
||||
|
||||
const totalBytes = useMemo(() => {
|
||||
return (new TextEncoder().encode(content)).length + (attach?.size ?? 0) + 128;
|
||||
}, [content, attach]);
|
||||
|
||||
const hashtags = useMemo(() => {
|
||||
const matches = content.match(/#[A-Za-z0-9_\u0400-\u04FF]{1,40}/g) || [];
|
||||
const seen = new Set<string>();
|
||||
return matches
|
||||
.map(m => m.slice(1).toLowerCase())
|
||||
.filter(t => !seen.has(t) && seen.add(t));
|
||||
}, [content]);
|
||||
|
||||
const canPublish = !busy && (content.trim().length > 0 || attach !== null)
|
||||
&& totalBytes <= MAX_POST_BYTES;
|
||||
|
||||
const onPickImage = async () => {
|
||||
if (picking) return;
|
||||
setPicking(true);
|
||||
try {
|
||||
const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
|
||||
if (!perm.granted) {
|
||||
Alert.alert(
|
||||
'Нужен доступ к фото',
|
||||
'Откройте настройки и разрешите доступ к галерее.',
|
||||
[
|
||||
{ text: 'Отмена' },
|
||||
{ text: 'Настройки', onPress: () => Linking.openSettings() },
|
||||
],
|
||||
);
|
||||
return;
|
||||
}
|
||||
const result = await ImagePicker.launchImageLibraryAsync({
|
||||
mediaTypes: ImagePicker.MediaTypeOptions.Images,
|
||||
quality: 1,
|
||||
exif: false, // privacy: ask picker not to return EXIF
|
||||
});
|
||||
if (result.canceled || !result.assets[0]) return;
|
||||
|
||||
const asset = result.assets[0];
|
||||
|
||||
// Client-side compression: resize + re-encode. This is the FIRST
|
||||
// scrub pass — server will do another one (mandatory) before storing.
|
||||
const manipulated = await ImageManipulator.manipulateAsync(
|
||||
asset.uri,
|
||||
[{ resize: { width: IMAGE_MAX_DIM } }],
|
||||
{ compress: IMAGE_QUALITY, format: ImageManipulator.SaveFormat.JPEG },
|
||||
);
|
||||
|
||||
// Read the compressed bytes.
|
||||
const b64 = await FileSystem.readAsStringAsync(manipulated.uri, {
|
||||
encoding: FileSystem.EncodingType.Base64,
|
||||
});
|
||||
const bytes = base64ToBytes(b64);
|
||||
|
||||
if (bytes.length > MAX_POST_BYTES - 512) {
|
||||
Alert.alert(
|
||||
'Слишком большое',
|
||||
`Картинка ${Math.round(bytes.length / 1024)} KB — лимит ${MAX_POST_BYTES / 1024} KB. Попробуйте выбрать поменьше.`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
setAttach({
|
||||
uri: manipulated.uri,
|
||||
mime: 'image/jpeg',
|
||||
size: bytes.length,
|
||||
bytes,
|
||||
width: manipulated.width,
|
||||
height: manipulated.height,
|
||||
});
|
||||
} catch (e: any) {
|
||||
Alert.alert('Не удалось', String(e?.message ?? e));
|
||||
} finally {
|
||||
setPicking(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onPublish = async () => {
|
||||
if (!keyFile || !canPublish) return;
|
||||
|
||||
// Balance guard.
|
||||
if (balance !== null && balance < estimatedFee) {
|
||||
Alert.alert(
|
||||
'Недостаточно средств',
|
||||
`Нужно ${formatFee(estimatedFee)}, на балансе ${formatFee(balance)}.`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
Alert.alert(
|
||||
'Опубликовать пост?',
|
||||
`Цена: ${formatFee(estimatedFee)}\nРазмер: ${Math.round(totalBytes / 1024 * 10) / 10} KB`,
|
||||
[
|
||||
{ text: 'Отмена', style: 'cancel' },
|
||||
{
|
||||
text: 'Опубликовать',
|
||||
onPress: async () => {
|
||||
setBusy(true);
|
||||
try {
|
||||
const postID = await publishAndCommit({
|
||||
author: keyFile.pub_key,
|
||||
privKey: keyFile.priv_key,
|
||||
content: content.trim(),
|
||||
attachment: attach?.bytes,
|
||||
attachmentMIME: attach?.mime,
|
||||
});
|
||||
// Close composer and open the new post.
|
||||
router.replace(`/(app)/feed/${postID}` as never);
|
||||
} catch (e: any) {
|
||||
Alert.alert('Не удалось опубликовать', humanizeTxError(e));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={{ flex: 1, backgroundColor: '#000000' }}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
||||
>
|
||||
{/* Header */}
|
||||
<View
|
||||
style={{
|
||||
paddingTop: insets.top + 8,
|
||||
paddingBottom: 12,
|
||||
paddingHorizontal: 14,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#141414',
|
||||
}}
|
||||
>
|
||||
<Pressable onPress={() => router.back()} hitSlop={8}>
|
||||
<Ionicons name="close" size={26} color="#ffffff" />
|
||||
</Pressable>
|
||||
<View style={{ flex: 1 }} />
|
||||
<Pressable
|
||||
onPress={onPublish}
|
||||
disabled={!canPublish}
|
||||
style={({ pressed }) => ({
|
||||
paddingHorizontal: 18, paddingVertical: 9,
|
||||
borderRadius: 999,
|
||||
backgroundColor: canPublish ? (pressed ? '#1a8cd8' : '#1d9bf0') : '#1f1f1f',
|
||||
})}
|
||||
>
|
||||
{busy ? (
|
||||
<ActivityIndicator color="#ffffff" size="small" />
|
||||
) : (
|
||||
<Text
|
||||
style={{
|
||||
color: canPublish ? '#ffffff' : '#5a5a5a',
|
||||
fontWeight: '700',
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
Опубликовать
|
||||
</Text>
|
||||
)}
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
<ScrollView
|
||||
keyboardShouldPersistTaps="handled"
|
||||
contentContainerStyle={{ paddingHorizontal: 14, paddingTop: 12, paddingBottom: 80 }}
|
||||
>
|
||||
{/* Avatar + TextInput row */}
|
||||
<View style={{ flexDirection: 'row' }}>
|
||||
<Avatar name={username ?? '?'} address={keyFile?.pub_key} size={40} />
|
||||
<TextInput
|
||||
value={content}
|
||||
onChangeText={setContent}
|
||||
placeholder="Что происходит?"
|
||||
placeholderTextColor="#5a5a5a"
|
||||
multiline
|
||||
maxLength={MAX_CONTENT_LENGTH}
|
||||
autoFocus
|
||||
style={{
|
||||
flex: 1,
|
||||
marginLeft: 10,
|
||||
color: '#ffffff',
|
||||
fontSize: 17,
|
||||
lineHeight: 22,
|
||||
minHeight: 120,
|
||||
paddingTop: 4,
|
||||
textAlignVertical: 'top',
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Hashtag preview */}
|
||||
{hashtags.length > 0 && (
|
||||
<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6, marginTop: 14, marginLeft: 50 }}>
|
||||
{hashtags.map(tag => (
|
||||
<View
|
||||
key={tag}
|
||||
style={{
|
||||
paddingHorizontal: 10, paddingVertical: 4,
|
||||
borderRadius: 999,
|
||||
backgroundColor: '#081a2a',
|
||||
borderWidth: 1, borderColor: '#11385a',
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: '#1d9bf0', fontSize: 12, fontWeight: '600' }}>
|
||||
#{tag}
|
||||
</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Attachment preview */}
|
||||
{attach && (
|
||||
<View style={{ marginTop: 14, marginLeft: 50 }}>
|
||||
<View
|
||||
style={{
|
||||
position: 'relative',
|
||||
borderRadius: 16,
|
||||
overflow: 'hidden',
|
||||
borderWidth: 1,
|
||||
borderColor: '#1f1f1f',
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
source={{ uri: attach.uri }}
|
||||
style={{
|
||||
width: '100%',
|
||||
aspectRatio: attach.width && attach.height
|
||||
? attach.width / attach.height
|
||||
: 4 / 3,
|
||||
backgroundColor: '#0a0a0a',
|
||||
}}
|
||||
resizeMode="cover"
|
||||
/>
|
||||
<Pressable
|
||||
onPress={() => setAttach(null)}
|
||||
hitSlop={8}
|
||||
style={({ pressed }) => ({
|
||||
position: 'absolute',
|
||||
top: 8, right: 8,
|
||||
width: 28, height: 28, borderRadius: 14,
|
||||
backgroundColor: pressed ? 'rgba(0,0,0,0.9)' : 'rgba(0,0,0,0.75)',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
})}
|
||||
>
|
||||
<Ionicons name="close" size={16} color="#ffffff" />
|
||||
</Pressable>
|
||||
</View>
|
||||
<Text style={{ color: '#6a6a6a', fontSize: 11, marginTop: 6 }}>
|
||||
{Math.round(attach.size / 1024)} KB · метаданные удалят на сервере
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
|
||||
{/* Footer: attach / counter / fee */}
|
||||
<View
|
||||
style={{
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 10,
|
||||
paddingBottom: Math.max(insets.bottom, 10),
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#141414',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 14,
|
||||
}}
|
||||
>
|
||||
<Pressable
|
||||
onPress={onPickImage}
|
||||
disabled={picking || !!attach}
|
||||
hitSlop={8}
|
||||
style={({ pressed }) => ({
|
||||
opacity: pressed || picking || attach ? 0.5 : 1,
|
||||
})}
|
||||
>
|
||||
{picking
|
||||
? <ActivityIndicator color="#1d9bf0" size="small" />
|
||||
: <Ionicons name="image-outline" size={22} color="#1d9bf0" />}
|
||||
</Pressable>
|
||||
<View style={{ flex: 1 }} />
|
||||
<Text
|
||||
style={{
|
||||
color: totalBytes > MAX_POST_BYTES ? '#f4212e'
|
||||
: totalBytes > MAX_POST_BYTES * 0.85 ? '#f0b35a'
|
||||
: '#6a6a6a',
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
}}
|
||||
>
|
||||
{Math.round(totalBytes / 1024 * 10) / 10} / {MAX_POST_BYTES / 1024} KB
|
||||
</Text>
|
||||
<View style={{ width: 1, height: 14, backgroundColor: '#1f1f1f' }} />
|
||||
<Text style={{ color: '#6a6a6a', fontSize: 12 }}>
|
||||
≈ {formatFee(estimatedFee)}
|
||||
</Text>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Helpers ────────────────────────────────────────────────────────────
|
||||
|
||||
function base64ToBytes(b64: string): Uint8Array {
|
||||
const binary = atob(b64.replace(/-/g, '+').replace(/_/g, '/'));
|
||||
const out = new Uint8Array(binary.length);
|
||||
for (let i = 0; i < binary.length; i++) out[i] = binary.charCodeAt(i);
|
||||
return out;
|
||||
}
|
||||
320
client-app/app/(app)/feed.tsx
Normal file
320
client-app/app/(app)/feed.tsx
Normal file
@@ -0,0 +1,320 @@
|
||||
/**
|
||||
* Feed tab — Twitter-style timeline with three sources:
|
||||
*
|
||||
* Подписки → /feed/timeline?follower=me (posts from people I follow)
|
||||
* Для вас → /feed/foryou?pub=me (recommendations)
|
||||
* В тренде → /feed/trending?window=24 (most-engaged in last 24h)
|
||||
*
|
||||
* Floating compose button (bottom-right) → /(app)/compose modal.
|
||||
*
|
||||
* Uses a single FlatList per tab with pull-to-refresh + optimistic
|
||||
* local updates. Stats (likes, likedByMe) are fetched once per refresh
|
||||
* and piggy-backed onto each PostCard via props; the card does the
|
||||
* optimistic toggle locally until the next refresh reconciles.
|
||||
*/
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import {
|
||||
View, Text, FlatList, Pressable, RefreshControl, ActivityIndicator,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { router } from 'expo-router';
|
||||
|
||||
import { TabHeader } from '@/components/TabHeader';
|
||||
import { PostCard } from '@/components/feed/PostCard';
|
||||
import { useStore } from '@/lib/store';
|
||||
import {
|
||||
fetchTimeline, fetchForYou, fetchTrending, fetchStats, bumpView,
|
||||
type FeedPostItem,
|
||||
} from '@/lib/feed';
|
||||
|
||||
type TabKey = 'following' | 'foryou' | 'trending';
|
||||
|
||||
const TAB_LABELS: Record<TabKey, string> = {
|
||||
following: 'Подписки',
|
||||
foryou: 'Для вас',
|
||||
trending: 'В тренде',
|
||||
};
|
||||
|
||||
export default function FeedScreen() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const keyFile = useStore(s => s.keyFile);
|
||||
|
||||
const [tab, setTab] = useState<TabKey>('foryou'); // default: discovery
|
||||
const [posts, setPosts] = useState<FeedPostItem[]>([]);
|
||||
const [likedSet, setLikedSet] = useState<Set<string>>(new Set());
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Guard against rapid tab switches overwriting each other's results.
|
||||
const requestRef = useRef(0);
|
||||
|
||||
const loadPosts = useCallback(async (isRefresh = false) => {
|
||||
if (!keyFile) return;
|
||||
if (isRefresh) setRefreshing(true);
|
||||
else setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const seq = ++requestRef.current;
|
||||
try {
|
||||
let items: FeedPostItem[] = [];
|
||||
switch (tab) {
|
||||
case 'following':
|
||||
items = await fetchTimeline(keyFile.pub_key, 40);
|
||||
break;
|
||||
case 'foryou':
|
||||
items = await fetchForYou(keyFile.pub_key, 40);
|
||||
break;
|
||||
case 'trending':
|
||||
items = await fetchTrending(24, 40);
|
||||
break;
|
||||
}
|
||||
if (seq !== requestRef.current) return; // stale response
|
||||
setPosts(items);
|
||||
|
||||
// Batch-fetch liked_by_me (bounded concurrency — 6 at a time).
|
||||
const liked = new Set<string>();
|
||||
const chunks = chunk(items, 6);
|
||||
for (const group of chunks) {
|
||||
const results = await Promise.all(
|
||||
group.map(p => fetchStats(p.post_id, keyFile.pub_key)),
|
||||
);
|
||||
results.forEach((s, i) => {
|
||||
if (s?.liked_by_me) liked.add(group[i].post_id);
|
||||
});
|
||||
}
|
||||
if (seq !== requestRef.current) return;
|
||||
setLikedSet(liked);
|
||||
} catch (e: any) {
|
||||
if (seq !== requestRef.current) return;
|
||||
const msg = String(e?.message ?? e);
|
||||
// Silence benign network/404 — just show empty state.
|
||||
if (/Network request failed|→\s*404/.test(msg)) {
|
||||
setPosts([]);
|
||||
} else {
|
||||
setError(msg);
|
||||
}
|
||||
} finally {
|
||||
if (seq !== requestRef.current) return;
|
||||
setLoading(false);
|
||||
setRefreshing(false);
|
||||
}
|
||||
}, [keyFile, tab]);
|
||||
|
||||
useEffect(() => { loadPosts(false); }, [loadPosts]);
|
||||
|
||||
const onStatsChanged = useCallback(async (postID: string) => {
|
||||
if (!keyFile) return;
|
||||
const stats = await fetchStats(postID, keyFile.pub_key);
|
||||
if (!stats) return;
|
||||
setPosts(ps => ps.map(p => p.post_id === postID
|
||||
? { ...p, likes: stats.likes, views: stats.views }
|
||||
: p));
|
||||
setLikedSet(s => {
|
||||
const next = new Set(s);
|
||||
if (stats.liked_by_me) next.add(postID);
|
||||
else next.delete(postID);
|
||||
return next;
|
||||
});
|
||||
}, [keyFile]);
|
||||
|
||||
const onDeleted = useCallback((postID: string) => {
|
||||
setPosts(ps => ps.filter(p => p.post_id !== postID));
|
||||
}, []);
|
||||
|
||||
// View counter: fire bumpView once when a card scrolls into view.
|
||||
const viewedRef = useRef<Set<string>>(new Set());
|
||||
const onViewableItemsChanged = useRef(({ viewableItems }: { viewableItems: Array<{ item: FeedPostItem; isViewable: boolean }> }) => {
|
||||
for (const { item, isViewable } of viewableItems) {
|
||||
if (isViewable && !viewedRef.current.has(item.post_id)) {
|
||||
viewedRef.current.add(item.post_id);
|
||||
bumpView(item.post_id);
|
||||
}
|
||||
}
|
||||
}).current;
|
||||
|
||||
const viewabilityConfig = useRef({ itemVisiblePercentThreshold: 60, minimumViewTime: 1000 }).current;
|
||||
|
||||
const emptyHint = useMemo(() => {
|
||||
switch (tab) {
|
||||
case 'following': return 'Подпишитесь на кого-нибудь, чтобы увидеть их посты здесь.';
|
||||
case 'foryou': return 'Пока нет рекомендаций — возвращайтесь позже.';
|
||||
case 'trending': return 'В этой ленте пока тихо.';
|
||||
}
|
||||
}, [tab]);
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: '#000000', paddingTop: insets.top }}>
|
||||
<TabHeader title="Лента" />
|
||||
|
||||
{/* Tab strip */}
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#141414',
|
||||
}}
|
||||
>
|
||||
{(Object.keys(TAB_LABELS) as TabKey[]).map(key => (
|
||||
<Pressable
|
||||
key={key}
|
||||
onPress={() => setTab(key)}
|
||||
style={({ pressed }) => ({
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
paddingVertical: 14,
|
||||
backgroundColor: pressed ? '#0a0a0a' : 'transparent',
|
||||
})}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: tab === key ? '#ffffff' : '#6a6a6a',
|
||||
fontWeight: tab === key ? '700' : '500',
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
{TAB_LABELS[key]}
|
||||
</Text>
|
||||
{tab === key && (
|
||||
<View
|
||||
style={{
|
||||
marginTop: 8,
|
||||
width: 48,
|
||||
height: 3,
|
||||
borderRadius: 1.5,
|
||||
backgroundColor: '#1d9bf0',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Pressable>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* Feed list */}
|
||||
<FlatList
|
||||
data={posts}
|
||||
keyExtractor={p => p.post_id}
|
||||
renderItem={({ item }) => (
|
||||
<PostCard
|
||||
post={item}
|
||||
likedByMe={likedSet.has(item.post_id)}
|
||||
onStatsChanged={onStatsChanged}
|
||||
onDeleted={onDeleted}
|
||||
/>
|
||||
)}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
onRefresh={() => loadPosts(true)}
|
||||
tintColor="#1d9bf0"
|
||||
/>
|
||||
}
|
||||
onViewableItemsChanged={onViewableItemsChanged}
|
||||
viewabilityConfig={viewabilityConfig}
|
||||
ListEmptyComponent={
|
||||
loading ? (
|
||||
<View style={{ paddingTop: 80, alignItems: 'center' }}>
|
||||
<ActivityIndicator color="#1d9bf0" />
|
||||
</View>
|
||||
) : error ? (
|
||||
<EmptyState
|
||||
icon="alert-circle-outline"
|
||||
title="Не удалось загрузить ленту"
|
||||
subtitle={error}
|
||||
onRetry={() => loadPosts(false)}
|
||||
/>
|
||||
) : (
|
||||
<EmptyState
|
||||
icon="newspaper-outline"
|
||||
title="Здесь пока пусто"
|
||||
subtitle={emptyHint}
|
||||
/>
|
||||
)
|
||||
}
|
||||
contentContainerStyle={posts.length === 0 ? { flexGrow: 1 } : undefined}
|
||||
/>
|
||||
|
||||
{/* Floating compose button */}
|
||||
<Pressable
|
||||
onPress={() => router.push('/(app)/compose' as never)}
|
||||
style={({ pressed }) => ({
|
||||
position: 'absolute',
|
||||
right: 18,
|
||||
bottom: Math.max(insets.bottom, 12) + 70, // clear the NavBar
|
||||
width: 56, height: 56,
|
||||
borderRadius: 28,
|
||||
backgroundColor: pressed ? '#1a8cd8' : '#1d9bf0',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
shadowColor: '#1d9bf0',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.4,
|
||||
shadowRadius: 8,
|
||||
elevation: 6,
|
||||
})}
|
||||
>
|
||||
<Ionicons name="create-outline" size={24} color="#ffffff" />
|
||||
</Pressable>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Empty state ─────────────────────────────────────────────────────────
|
||||
|
||||
function EmptyState({
|
||||
icon, title, subtitle, onRetry,
|
||||
}: {
|
||||
icon: React.ComponentProps<typeof Ionicons>['name'];
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
onRetry?: () => void;
|
||||
}) {
|
||||
return (
|
||||
<View style={{
|
||||
flex: 1,
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
paddingHorizontal: 32, paddingVertical: 80,
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
width: 64, height: 64, borderRadius: 16,
|
||||
backgroundColor: '#0a0a0a',
|
||||
borderWidth: 1, borderColor: '#1f1f1f',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
marginBottom: 14,
|
||||
}}
|
||||
>
|
||||
<Ionicons name={icon} size={28} color="#6a6a6a" />
|
||||
</View>
|
||||
<Text style={{ color: '#ffffff', fontSize: 16, fontWeight: '700', marginBottom: 6 }}>
|
||||
{title}
|
||||
</Text>
|
||||
{subtitle && (
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 13, textAlign: 'center', lineHeight: 19 }}>
|
||||
{subtitle}
|
||||
</Text>
|
||||
)}
|
||||
{onRetry && (
|
||||
<Pressable
|
||||
onPress={onRetry}
|
||||
style={({ pressed }) => ({
|
||||
marginTop: 16,
|
||||
paddingHorizontal: 20, paddingVertical: 10,
|
||||
borderRadius: 999,
|
||||
backgroundColor: pressed ? '#1a8cd8' : '#1d9bf0',
|
||||
})}
|
||||
>
|
||||
<Text style={{ color: '#ffffff', fontWeight: '700', fontSize: 13 }}>
|
||||
Попробовать снова
|
||||
</Text>
|
||||
</Pressable>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function chunk<T>(arr: T[], size: number): T[][] {
|
||||
const out: T[][] = [];
|
||||
for (let i = 0; i < arr.length; i += size) out.push(arr.slice(i, i + size));
|
||||
return out;
|
||||
}
|
||||
242
client-app/app/(app)/feed/[id].tsx
Normal file
242
client-app/app/(app)/feed/[id].tsx
Normal file
@@ -0,0 +1,242 @@
|
||||
/**
|
||||
* Post detail — full view of one post with stats, thread context, and a
|
||||
* lazy-rendered image attachment.
|
||||
*
|
||||
* Why a dedicated screen?
|
||||
* - PostCard in the timeline intentionally doesn't render attachments
|
||||
* (would explode initial render time with N images).
|
||||
* - Per-post stats (views, likes, liked_by_me) want a fresh refresh
|
||||
* on open; timeline batches but not at the per-second cadence a
|
||||
* reader expects when they just tapped in.
|
||||
*
|
||||
* Layout:
|
||||
* [← back · Пост]
|
||||
* [PostCard (full — with attachment)]
|
||||
* [stats bar: views · likes · fee]
|
||||
* [— reply affordance below (future)]
|
||||
*/
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import {
|
||||
View, Text, ScrollView, ActivityIndicator, Image,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { router, useLocalSearchParams } from 'expo-router';
|
||||
|
||||
import { Header } from '@/components/Header';
|
||||
import { IconButton } from '@/components/IconButton';
|
||||
import { PostCard } from '@/components/feed/PostCard';
|
||||
import { useStore } from '@/lib/store';
|
||||
import {
|
||||
fetchPost, fetchStats, bumpView, formatCount, formatFee,
|
||||
type FeedPostItem, type PostStats,
|
||||
} from '@/lib/feed';
|
||||
|
||||
export default function PostDetailScreen() {
|
||||
const { id: postID } = useLocalSearchParams<{ id: string }>();
|
||||
const keyFile = useStore(s => s.keyFile);
|
||||
|
||||
const [post, setPost] = useState<FeedPostItem | null>(null);
|
||||
const [stats, setStats] = useState<PostStats | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
if (!postID) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const [p, s] = await Promise.all([
|
||||
fetchPost(postID),
|
||||
fetchStats(postID, keyFile?.pub_key),
|
||||
]);
|
||||
setPost(p);
|
||||
setStats(s);
|
||||
if (p) bumpView(postID); // fire-and-forget
|
||||
} catch (e: any) {
|
||||
setError(String(e?.message ?? e));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [postID, keyFile]);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const onStatsChanged = useCallback(async () => {
|
||||
if (!postID) return;
|
||||
const s = await fetchStats(postID, keyFile?.pub_key);
|
||||
if (s) setStats(s);
|
||||
}, [postID, keyFile]);
|
||||
|
||||
const onDeleted = useCallback(() => {
|
||||
// Go back to feed — the post is gone.
|
||||
router.back();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: '#000000' }}>
|
||||
<Header
|
||||
divider
|
||||
left={<IconButton icon="chevron-back" size={36} onPress={() => router.back()} />}
|
||||
title="Пост"
|
||||
/>
|
||||
|
||||
{loading ? (
|
||||
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
|
||||
<ActivityIndicator color="#1d9bf0" />
|
||||
</View>
|
||||
) : error ? (
|
||||
<View style={{ padding: 24 }}>
|
||||
<Text style={{ color: '#f4212e' }}>{error}</Text>
|
||||
</View>
|
||||
) : !post ? (
|
||||
<View style={{ padding: 24, alignItems: 'center' }}>
|
||||
<Ionicons name="trash-outline" size={32} color="#6a6a6a" />
|
||||
<Text style={{ color: '#8b8b8b', marginTop: 10 }}>
|
||||
Пост удалён или больше недоступен
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
<ScrollView>
|
||||
<PostCard
|
||||
post={{ ...post, likes: stats?.likes ?? post.likes, views: stats?.views ?? post.views }}
|
||||
likedByMe={stats?.liked_by_me ?? false}
|
||||
onStatsChanged={onStatsChanged}
|
||||
onDeleted={onDeleted}
|
||||
/>
|
||||
|
||||
{/* Attachment preview (if any). For MVP we try loading from the
|
||||
CURRENT node — works when you're connected to the hosting
|
||||
relay. Cross-relay discovery (look up hosting_relay URL via
|
||||
/api/relays) is future work. */}
|
||||
{post.has_attachment && (
|
||||
<AttachmentPreview postID={post.post_id} />
|
||||
)}
|
||||
|
||||
{/* Detailed stats block */}
|
||||
<View
|
||||
style={{
|
||||
marginHorizontal: 14,
|
||||
marginTop: 12,
|
||||
paddingVertical: 14,
|
||||
paddingHorizontal: 14,
|
||||
borderRadius: 14,
|
||||
backgroundColor: '#0a0a0a',
|
||||
borderWidth: 1,
|
||||
borderColor: '#1f1f1f',
|
||||
}}
|
||||
>
|
||||
<Text style={{
|
||||
color: '#5a5a5a',
|
||||
fontSize: 11,
|
||||
fontWeight: '700',
|
||||
letterSpacing: 1.2,
|
||||
textTransform: 'uppercase',
|
||||
marginBottom: 10,
|
||||
}}>
|
||||
Информация о посте
|
||||
</Text>
|
||||
|
||||
<DetailRow label="Просмотров" value={formatCount(stats?.views ?? post.views)} />
|
||||
<DetailRow label="Лайков" value={formatCount(stats?.likes ?? post.likes)} />
|
||||
<DetailRow label="Размер" value={`${Math.round(post.size / 1024 * 10) / 10} KB`} />
|
||||
<DetailRow
|
||||
label="Стоимость публикации"
|
||||
value={formatFee(1000 + post.size)}
|
||||
/>
|
||||
<DetailRow
|
||||
label="Хостинг"
|
||||
value={shortAddr(post.hosting_relay)}
|
||||
mono
|
||||
/>
|
||||
|
||||
{post.hashtags && post.hashtags.length > 0 && (
|
||||
<>
|
||||
<View style={{ height: 1, backgroundColor: '#1f1f1f', marginVertical: 10 }} />
|
||||
<Text style={{ color: '#5a5a5a', fontSize: 11, marginBottom: 6 }}>
|
||||
Хештеги
|
||||
</Text>
|
||||
<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6 }}>
|
||||
{post.hashtags.map(tag => (
|
||||
<Text
|
||||
key={tag}
|
||||
onPress={() => router.push(`/(app)/feed/tag/${encodeURIComponent(tag)}` as never)}
|
||||
style={{
|
||||
color: '#1d9bf0',
|
||||
fontSize: 13,
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 3,
|
||||
backgroundColor: '#081a2a',
|
||||
borderRadius: 999,
|
||||
}}
|
||||
>
|
||||
#{tag}
|
||||
</Text>
|
||||
))}
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={{ height: 80 }} />
|
||||
</ScrollView>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function DetailRow({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
|
||||
return (
|
||||
<View style={{ flexDirection: 'row', paddingVertical: 3 }}>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 13, flex: 1 }}>{label}</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: '#ffffff',
|
||||
fontSize: 13,
|
||||
fontWeight: '600',
|
||||
fontFamily: mono ? 'monospace' : undefined,
|
||||
}}
|
||||
>
|
||||
{value}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function AttachmentPreview({ postID }: { postID: string }) {
|
||||
// For MVP we hit the local node URL; if the body is hosted elsewhere
|
||||
// the image load will fail and the placeholder stays visible.
|
||||
const { getNodeUrl } = require('@/lib/api');
|
||||
const url = `${getNodeUrl()}/feed/post/${postID}`;
|
||||
// The body is a JSON object, not raw image bytes. For now we just
|
||||
// show a placeholder — decoding base64 attachment → data-uri is a
|
||||
// Phase D improvement once we add /feed/post/{id}/attachment raw bytes.
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
margin: 14,
|
||||
paddingVertical: 32,
|
||||
borderRadius: 14,
|
||||
backgroundColor: '#0a0a0a',
|
||||
borderWidth: 1,
|
||||
borderColor: '#1f1f1f',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Ionicons name="image-outline" size={32} color="#5a5a5a" />
|
||||
<Text style={{ color: '#8b8b8b', marginTop: 10, fontSize: 12 }}>
|
||||
Вложение: {url}
|
||||
</Text>
|
||||
<Text style={{ color: '#5a5a5a', marginTop: 4, fontSize: 10 }}>
|
||||
Прямой просмотр вложений — в следующем релизе
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function shortAddr(a: string, n = 6): string {
|
||||
if (!a) return '—';
|
||||
return a.length <= n * 2 + 1 ? a : `${a.slice(0, n)}…${a.slice(-n)}`;
|
||||
}
|
||||
|
||||
// Silence Image import when unused (reserved for future attachment preview).
|
||||
void Image;
|
||||
127
client-app/app/(app)/feed/tag/[tag].tsx
Normal file
127
client-app/app/(app)/feed/tag/[tag].tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
/**
|
||||
* Hashtag feed — all posts tagged with #tag, newest first.
|
||||
*
|
||||
* Route: /(app)/feed/tag/[tag]
|
||||
* Triggered by tapping a hashtag inside any PostCard's body.
|
||||
*/
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
View, Text, FlatList, RefreshControl, ActivityIndicator,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { router, useLocalSearchParams } from 'expo-router';
|
||||
|
||||
import { Header } from '@/components/Header';
|
||||
import { IconButton } from '@/components/IconButton';
|
||||
import { PostCard } from '@/components/feed/PostCard';
|
||||
import { useStore } from '@/lib/store';
|
||||
import { fetchHashtag, fetchStats, type FeedPostItem } from '@/lib/feed';
|
||||
|
||||
export default function HashtagScreen() {
|
||||
const { tag: rawTag } = useLocalSearchParams<{ tag: string }>();
|
||||
const tag = (rawTag ?? '').replace(/^#/, '').toLowerCase();
|
||||
const keyFile = useStore(s => s.keyFile);
|
||||
|
||||
const [posts, setPosts] = useState<FeedPostItem[]>([]);
|
||||
const [likedSet, setLikedSet] = useState<Set<string>>(new Set());
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
|
||||
const seq = useRef(0);
|
||||
|
||||
const load = useCallback(async (isRefresh = false) => {
|
||||
if (!tag) return;
|
||||
if (isRefresh) setRefreshing(true);
|
||||
else setLoading(true);
|
||||
|
||||
const id = ++seq.current;
|
||||
try {
|
||||
const items = await fetchHashtag(tag, 60);
|
||||
if (id !== seq.current) return;
|
||||
setPosts(items);
|
||||
|
||||
const liked = new Set<string>();
|
||||
if (keyFile) {
|
||||
for (const p of items) {
|
||||
const s = await fetchStats(p.post_id, keyFile.pub_key);
|
||||
if (s?.liked_by_me) liked.add(p.post_id);
|
||||
}
|
||||
}
|
||||
if (id !== seq.current) return;
|
||||
setLikedSet(liked);
|
||||
} catch {
|
||||
if (id !== seq.current) return;
|
||||
setPosts([]);
|
||||
} finally {
|
||||
if (id !== seq.current) return;
|
||||
setLoading(false);
|
||||
setRefreshing(false);
|
||||
}
|
||||
}, [tag, keyFile]);
|
||||
|
||||
useEffect(() => { load(false); }, [load]);
|
||||
|
||||
const onStatsChanged = useCallback(async (postID: string) => {
|
||||
if (!keyFile) return;
|
||||
const s = await fetchStats(postID, keyFile.pub_key);
|
||||
if (!s) return;
|
||||
setPosts(ps => ps.map(p => p.post_id === postID
|
||||
? { ...p, likes: s.likes, views: s.views } : p));
|
||||
setLikedSet(set => {
|
||||
const next = new Set(set);
|
||||
if (s.liked_by_me) next.add(postID); else next.delete(postID);
|
||||
return next;
|
||||
});
|
||||
}, [keyFile]);
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: '#000000' }}>
|
||||
<Header
|
||||
divider
|
||||
left={<IconButton icon="chevron-back" size={36} onPress={() => router.back()} />}
|
||||
title={`#${tag}`}
|
||||
/>
|
||||
|
||||
<FlatList
|
||||
data={posts}
|
||||
keyExtractor={p => p.post_id}
|
||||
renderItem={({ item }) => (
|
||||
<PostCard
|
||||
post={item}
|
||||
likedByMe={likedSet.has(item.post_id)}
|
||||
onStatsChanged={onStatsChanged}
|
||||
/>
|
||||
)}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
onRefresh={() => load(true)}
|
||||
tintColor="#1d9bf0"
|
||||
/>
|
||||
}
|
||||
ListEmptyComponent={
|
||||
loading ? (
|
||||
<View style={{ paddingTop: 80, alignItems: 'center' }}>
|
||||
<ActivityIndicator color="#1d9bf0" />
|
||||
</View>
|
||||
) : (
|
||||
<View style={{
|
||||
flex: 1,
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
paddingHorizontal: 32, paddingVertical: 80,
|
||||
}}>
|
||||
<Ionicons name="pricetag-outline" size={32} color="#6a6a6a" />
|
||||
<Text style={{ color: '#ffffff', fontWeight: '700', marginTop: 10 }}>
|
||||
Пока нет постов с этим тегом
|
||||
</Text>
|
||||
<Text style={{ color: '#8b8b8b', textAlign: 'center', fontSize: 13, marginTop: 6 }}>
|
||||
Будьте первым — напишите пост с #{tag}
|
||||
</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
contentContainerStyle={posts.length === 0 ? { flexGrow: 1 } : undefined}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
288
client-app/app/(app)/new-contact.tsx
Normal file
288
client-app/app/(app)/new-contact.tsx
Normal file
@@ -0,0 +1,288 @@
|
||||
/**
|
||||
* Add new contact — dark minimalist, inspired by the reference.
|
||||
*
|
||||
* Flow:
|
||||
* 1. Пользователь вводит @username или hex pubkey / DC-address.
|
||||
* 2. Жмёт Search → resolveUsername → getIdentity.
|
||||
* 3. Показываем preview (avatar + имя + address + наличие x25519).
|
||||
* 4. Выбирает fee (chip-selector) + вводит intro.
|
||||
* 5. Submit → CONTACT_REQUEST tx.
|
||||
*/
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
View, Text, ScrollView, Alert, Pressable, TextInput, ActivityIndicator,
|
||||
} from 'react-native';
|
||||
import { router } from 'expo-router';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { useStore } from '@/lib/store';
|
||||
import { getIdentity, buildContactRequestTx, submitTx, resolveUsername, humanizeTxError } from '@/lib/api';
|
||||
import { shortAddr } from '@/lib/crypto';
|
||||
import { formatAmount } from '@/lib/utils';
|
||||
|
||||
import { Avatar } from '@/components/Avatar';
|
||||
import { Header } from '@/components/Header';
|
||||
import { IconButton } from '@/components/IconButton';
|
||||
import { SearchBar } from '@/components/SearchBar';
|
||||
|
||||
const MIN_CONTACT_FEE = 5000;
|
||||
const FEE_TIERS = [
|
||||
{ value: 5_000, label: 'Min' },
|
||||
{ value: 10_000, label: 'Standard' },
|
||||
{ value: 50_000, label: 'Priority' },
|
||||
];
|
||||
|
||||
interface Resolved {
|
||||
address: string;
|
||||
nickname?: string;
|
||||
x25519?: string;
|
||||
}
|
||||
|
||||
export default function NewContactScreen() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const keyFile = useStore(s => s.keyFile);
|
||||
const settings = useStore(s => s.settings);
|
||||
const balance = useStore(s => s.balance);
|
||||
|
||||
const [query, setQuery] = useState('');
|
||||
const [intro, setIntro] = useState('');
|
||||
const [fee, setFee] = useState(MIN_CONTACT_FEE);
|
||||
const [resolved, setResolved] = useState<Resolved | null>(null);
|
||||
const [searching, setSearching] = useState(false);
|
||||
const [sending, setSending] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
async function search() {
|
||||
const q = query.trim();
|
||||
if (!q) return;
|
||||
setSearching(true); setResolved(null); setError(null);
|
||||
try {
|
||||
let address = q;
|
||||
if (q.startsWith('@') || (!q.match(/^[0-9a-f]{64}$/i) && !q.startsWith('DC'))) {
|
||||
const name = q.replace('@', '');
|
||||
const addr = await resolveUsername(settings.contractId, name);
|
||||
if (!addr) { setError(`@${name} is not registered on this chain`); return; }
|
||||
address = addr;
|
||||
}
|
||||
const identity = await getIdentity(address);
|
||||
setResolved({
|
||||
address: identity?.pub_key ?? address,
|
||||
nickname: identity?.nickname || undefined,
|
||||
x25519: identity?.x25519_pub || undefined,
|
||||
});
|
||||
} catch (e: any) {
|
||||
setError(e?.message ?? 'Lookup failed');
|
||||
} finally {
|
||||
setSearching(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function sendRequest() {
|
||||
if (!resolved || !keyFile) return;
|
||||
if (balance < fee + 1000) {
|
||||
Alert.alert('Insufficient balance', `Need ${formatAmount(fee + 1000)} (fee + network).`);
|
||||
return;
|
||||
}
|
||||
setSending(true); setError(null);
|
||||
try {
|
||||
const tx = buildContactRequestTx({
|
||||
from: keyFile.pub_key,
|
||||
to: resolved.address,
|
||||
contactFee: fee,
|
||||
intro: intro.trim() || undefined,
|
||||
privKey: keyFile.priv_key,
|
||||
});
|
||||
await submitTx(tx);
|
||||
Alert.alert(
|
||||
'Request sent',
|
||||
`A contact request has been sent to ${resolved.nickname ? '@' + resolved.nickname : shortAddr(resolved.address)}.`,
|
||||
[{ text: 'OK', onPress: () => router.back() }],
|
||||
);
|
||||
} catch (e: any) {
|
||||
setError(humanizeTxError(e));
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
}
|
||||
|
||||
const displayName = resolved
|
||||
? (resolved.nickname ? `@${resolved.nickname}` : shortAddr(resolved.address))
|
||||
: '';
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: '#000000', paddingTop: insets.top }}>
|
||||
<Header
|
||||
title="New chat"
|
||||
divider={false}
|
||||
left={<IconButton icon="chevron-back" size={36} onPress={() => router.back()} />}
|
||||
/>
|
||||
<ScrollView
|
||||
contentContainerStyle={{ padding: 14, paddingBottom: 120 }}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 13, lineHeight: 19, marginBottom: 14 }}>
|
||||
Enter a <Text style={{ color: '#ffffff', fontWeight: '600' }}>@username</Text>, a
|
||||
hex pubkey or a <Text style={{ color: '#ffffff', fontWeight: '600' }}>DC…</Text> address.
|
||||
</Text>
|
||||
|
||||
<SearchBar
|
||||
value={query}
|
||||
onChangeText={setQuery}
|
||||
placeholder="@alice or hex / DC address"
|
||||
onSubmitEditing={search}
|
||||
/>
|
||||
|
||||
<Pressable
|
||||
onPress={search}
|
||||
disabled={searching || !query.trim()}
|
||||
style={({ pressed }) => ({
|
||||
flexDirection: 'row', alignItems: 'center', justifyContent: 'center',
|
||||
paddingVertical: 11, borderRadius: 999, marginTop: 12,
|
||||
backgroundColor: !query.trim() || searching ? '#1a1a1a' : pressed ? '#1a8cd8' : '#1d9bf0',
|
||||
})}
|
||||
>
|
||||
{searching ? (
|
||||
<ActivityIndicator color="#ffffff" size="small" />
|
||||
) : (
|
||||
<Text style={{ color: '#ffffff', fontWeight: '700', fontSize: 14 }}>Search</Text>
|
||||
)}
|
||||
</Pressable>
|
||||
|
||||
{error && (
|
||||
<View style={{
|
||||
marginTop: 14,
|
||||
padding: 12,
|
||||
borderRadius: 10,
|
||||
backgroundColor: 'rgba(244,33,46,0.08)',
|
||||
borderWidth: 1, borderColor: 'rgba(244,33,46,0.25)',
|
||||
}}>
|
||||
<Text style={{ color: '#f4212e', fontSize: 13 }}>{error}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Resolved profile card */}
|
||||
{resolved && (
|
||||
<>
|
||||
<View style={{
|
||||
marginTop: 18,
|
||||
padding: 14,
|
||||
borderRadius: 14,
|
||||
backgroundColor: '#0a0a0a',
|
||||
borderWidth: 1, borderColor: '#1f1f1f',
|
||||
}}>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
|
||||
<Avatar
|
||||
name={displayName}
|
||||
address={resolved.address}
|
||||
size={52}
|
||||
dotColor={resolved.x25519 ? '#3ba55d' : '#f0b35a'}
|
||||
/>
|
||||
<View style={{ flex: 1, minWidth: 0 }}>
|
||||
<Text style={{ color: '#ffffff', fontWeight: '700', fontSize: 16 }}>
|
||||
{displayName}
|
||||
</Text>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 11, fontFamily: 'monospace', marginTop: 2 }} numberOfLines={1}>
|
||||
{shortAddr(resolved.address, 10)}
|
||||
</Text>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 5, gap: 4 }}>
|
||||
<Ionicons
|
||||
name={resolved.x25519 ? 'lock-closed' : 'time-outline'}
|
||||
size={11}
|
||||
color={resolved.x25519 ? '#3ba55d' : '#f0b35a'}
|
||||
/>
|
||||
<Text style={{
|
||||
color: resolved.x25519 ? '#3ba55d' : '#f0b35a',
|
||||
fontSize: 11, fontWeight: '500',
|
||||
}}>
|
||||
{resolved.x25519 ? 'E2E-ready' : 'Key not published yet'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Intro */}
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 12, marginTop: 18, marginBottom: 6 }}>
|
||||
Intro (optional, plaintext on-chain)
|
||||
</Text>
|
||||
<TextInput
|
||||
value={intro}
|
||||
onChangeText={setIntro}
|
||||
placeholder="Hey, it's Jordan from the conference"
|
||||
placeholderTextColor="#5a5a5a"
|
||||
multiline
|
||||
maxLength={140}
|
||||
style={{
|
||||
color: '#ffffff', fontSize: 14,
|
||||
backgroundColor: '#0a0a0a', borderRadius: 10,
|
||||
paddingHorizontal: 12, paddingVertical: 10,
|
||||
borderWidth: 1, borderColor: '#1f1f1f',
|
||||
minHeight: 80, textAlignVertical: 'top',
|
||||
}}
|
||||
/>
|
||||
<Text style={{ color: '#5a5a5a', fontSize: 11, textAlign: 'right', marginTop: 4 }}>
|
||||
{intro.length}/140
|
||||
</Text>
|
||||
|
||||
{/* Fee tier */}
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 12, marginTop: 14, marginBottom: 6 }}>
|
||||
Anti-spam fee (goes to recipient)
|
||||
</Text>
|
||||
<View style={{ flexDirection: 'row', gap: 8 }}>
|
||||
{FEE_TIERS.map(t => {
|
||||
const active = fee === t.value;
|
||||
return (
|
||||
<Pressable
|
||||
key={t.value}
|
||||
onPress={() => setFee(t.value)}
|
||||
style={({ pressed }) => ({
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
paddingVertical: 10,
|
||||
borderRadius: 10,
|
||||
backgroundColor: active ? '#ffffff' : pressed ? '#1a1a1a' : '#111111',
|
||||
borderWidth: 1, borderColor: active ? '#ffffff' : '#1f1f1f',
|
||||
})}
|
||||
>
|
||||
<Text style={{
|
||||
color: active ? '#000' : '#ffffff',
|
||||
fontWeight: '700', fontSize: 13,
|
||||
}}>
|
||||
{t.label}
|
||||
</Text>
|
||||
<Text style={{
|
||||
color: active ? '#333' : '#8b8b8b',
|
||||
fontSize: 11, marginTop: 2,
|
||||
}}>
|
||||
{formatAmount(t.value)}
|
||||
</Text>
|
||||
</Pressable>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
|
||||
{/* Submit */}
|
||||
<Pressable
|
||||
onPress={sendRequest}
|
||||
disabled={sending}
|
||||
style={({ pressed }) => ({
|
||||
flexDirection: 'row', alignItems: 'center', justifyContent: 'center',
|
||||
paddingVertical: 13, borderRadius: 999, marginTop: 20,
|
||||
backgroundColor: sending ? '#1a1a1a' : pressed ? '#1a8cd8' : '#1d9bf0',
|
||||
})}
|
||||
>
|
||||
{sending ? (
|
||||
<ActivityIndicator color="#ffffff" size="small" />
|
||||
) : (
|
||||
<Text style={{ color: '#ffffff', fontWeight: '700', fontSize: 14 }}>
|
||||
Send request · {formatAmount(fee + 1000)}
|
||||
</Text>
|
||||
)}
|
||||
</Pressable>
|
||||
</>
|
||||
)}
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
441
client-app/app/(app)/profile/[address].tsx
Normal file
441
client-app/app/(app)/profile/[address].tsx
Normal file
@@ -0,0 +1,441 @@
|
||||
/**
|
||||
* Profile screen — shows info about any address (yours or someone else's),
|
||||
* plus their post feed, follow/unfollow button, and basic counters.
|
||||
*
|
||||
* Routes:
|
||||
* /(app)/profile/<ed25519-hex>
|
||||
*
|
||||
* Two states:
|
||||
* - Known contact → open chat, show full info
|
||||
* - Unknown address → Twitter-style "discovery" profile: shows just the
|
||||
* address + posts + follow button. Useful when tapping an author from
|
||||
* the feed of someone you don't chat with.
|
||||
*/
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import {
|
||||
View, Text, ScrollView, Pressable, Alert, FlatList,
|
||||
ActivityIndicator, RefreshControl,
|
||||
} from 'react-native';
|
||||
import { router, useLocalSearchParams } from 'expo-router';
|
||||
import * as Clipboard from 'expo-clipboard';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
|
||||
import { useStore } from '@/lib/store';
|
||||
import type { Contact } from '@/lib/types';
|
||||
|
||||
import { Avatar } from '@/components/Avatar';
|
||||
import { Header } from '@/components/Header';
|
||||
import { IconButton } from '@/components/IconButton';
|
||||
import { PostCard } from '@/components/feed/PostCard';
|
||||
import {
|
||||
fetchAuthorPosts, fetchStats, followUser, unfollowUser,
|
||||
formatCount, type FeedPostItem,
|
||||
} from '@/lib/feed';
|
||||
import { humanizeTxError } from '@/lib/api';
|
||||
|
||||
function shortAddr(a: string, n = 10): string {
|
||||
if (!a) return '—';
|
||||
return a.length <= n * 2 + 1 ? a : `${a.slice(0, n)}…${a.slice(-n)}`;
|
||||
}
|
||||
|
||||
type Tab = 'posts' | 'info';
|
||||
|
||||
export default function ProfileScreen() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const { address } = useLocalSearchParams<{ address: string }>();
|
||||
const contacts = useStore(s => s.contacts);
|
||||
const keyFile = useStore(s => s.keyFile);
|
||||
const contact = contacts.find(c => c.address === address);
|
||||
|
||||
const [tab, setTab] = useState<Tab>('posts');
|
||||
const [posts, setPosts] = useState<FeedPostItem[]>([]);
|
||||
const [likedSet, setLikedSet] = useState<Set<string>>(new Set());
|
||||
const [loadingPosts, setLoadingPosts] = useState(true);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
|
||||
// Follow state is optimistic + reconciled via on-chain query. For MVP
|
||||
// we keep a local-only flag that toggles immediately on tap; future:
|
||||
// query chain.Following(me) once on mount to seed accurate initial state.
|
||||
const [following, setFollowing] = useState(false);
|
||||
const [followingBusy, setFollowingBusy] = useState(false);
|
||||
const [copied, setCopied] = useState<string | null>(null);
|
||||
|
||||
const isMe = !!keyFile && keyFile.pub_key === address;
|
||||
const displayName = contact?.username
|
||||
? `@${contact.username}`
|
||||
: contact?.alias ?? (isMe ? 'Вы' : shortAddr(address ?? ''));
|
||||
|
||||
const loadPosts = useCallback(async (isRefresh = false) => {
|
||||
if (!address) return;
|
||||
if (isRefresh) setRefreshing(true); else setLoadingPosts(true);
|
||||
try {
|
||||
const items = await fetchAuthorPosts(address, 40);
|
||||
setPosts(items);
|
||||
if (keyFile) {
|
||||
const liked = new Set<string>();
|
||||
for (const p of items) {
|
||||
const s = await fetchStats(p.post_id, keyFile.pub_key);
|
||||
if (s?.liked_by_me) liked.add(p.post_id);
|
||||
}
|
||||
setLikedSet(liked);
|
||||
}
|
||||
} catch {
|
||||
setPosts([]);
|
||||
} finally {
|
||||
setLoadingPosts(false);
|
||||
setRefreshing(false);
|
||||
}
|
||||
}, [address, keyFile]);
|
||||
|
||||
useEffect(() => {
|
||||
if (tab === 'posts') loadPosts(false);
|
||||
}, [tab, loadPosts]);
|
||||
|
||||
const copy = async (value: string, label: string) => {
|
||||
await Clipboard.setStringAsync(value);
|
||||
setCopied(label);
|
||||
setTimeout(() => setCopied(null), 1800);
|
||||
};
|
||||
|
||||
const openChat = () => {
|
||||
if (!address) return;
|
||||
router.replace(`/(app)/chats/${address}` as never);
|
||||
};
|
||||
|
||||
const onToggleFollow = async () => {
|
||||
if (!keyFile || !address || isMe || followingBusy) return;
|
||||
setFollowingBusy(true);
|
||||
const wasFollowing = following;
|
||||
setFollowing(!wasFollowing);
|
||||
try {
|
||||
if (wasFollowing) {
|
||||
await unfollowUser({ from: keyFile.pub_key, privKey: keyFile.priv_key, target: address });
|
||||
} else {
|
||||
await followUser({ from: keyFile.pub_key, privKey: keyFile.priv_key, target: address });
|
||||
}
|
||||
} catch (e: any) {
|
||||
setFollowing(wasFollowing);
|
||||
Alert.alert('Не удалось', humanizeTxError(e));
|
||||
} finally {
|
||||
setFollowingBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onStatsChanged = useCallback(async (postID: string) => {
|
||||
if (!keyFile) return;
|
||||
const s = await fetchStats(postID, keyFile.pub_key);
|
||||
if (!s) return;
|
||||
setPosts(ps => ps.map(p => p.post_id === postID
|
||||
? { ...p, likes: s.likes, views: s.views } : p));
|
||||
setLikedSet(set => {
|
||||
const next = new Set(set);
|
||||
if (s.liked_by_me) next.add(postID); else next.delete(postID);
|
||||
return next;
|
||||
});
|
||||
}, [keyFile]);
|
||||
|
||||
const onDeleted = useCallback((postID: string) => {
|
||||
setPosts(ps => ps.filter(p => p.post_id !== postID));
|
||||
}, []);
|
||||
|
||||
// ── Hero + follow button block ──────────────────────────────────────
|
||||
|
||||
const Hero = (
|
||||
<View style={{ paddingHorizontal: 14, paddingTop: 16, paddingBottom: 4 }}>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
|
||||
<Avatar name={displayName} address={address} size={72} />
|
||||
<View style={{ flex: 1 }} />
|
||||
{!isMe ? (
|
||||
<Pressable
|
||||
onPress={onToggleFollow}
|
||||
disabled={followingBusy}
|
||||
style={({ pressed }) => ({
|
||||
paddingHorizontal: 18, paddingVertical: 9,
|
||||
borderRadius: 999,
|
||||
backgroundColor: following
|
||||
? (pressed ? '#1a1a1a' : '#111111')
|
||||
: (pressed ? '#e7e7e7' : '#ffffff'),
|
||||
borderWidth: following ? 1 : 0,
|
||||
borderColor: '#1f1f1f',
|
||||
minWidth: 110,
|
||||
alignItems: 'center',
|
||||
})}
|
||||
>
|
||||
{followingBusy ? (
|
||||
<ActivityIndicator
|
||||
size="small"
|
||||
color={following ? '#ffffff' : '#000000'}
|
||||
/>
|
||||
) : (
|
||||
<Text
|
||||
style={{
|
||||
color: following ? '#ffffff' : '#000000',
|
||||
fontWeight: '700',
|
||||
fontSize: 13,
|
||||
}}
|
||||
>
|
||||
{following ? 'Вы подписаны' : 'Подписаться'}
|
||||
</Text>
|
||||
)}
|
||||
</Pressable>
|
||||
) : (
|
||||
<Pressable
|
||||
onPress={() => router.push('/(app)/settings' as never)}
|
||||
style={({ pressed }) => ({
|
||||
paddingHorizontal: 18, paddingVertical: 9,
|
||||
borderRadius: 999,
|
||||
backgroundColor: pressed ? '#1a1a1a' : '#111111',
|
||||
borderWidth: 1, borderColor: '#1f1f1f',
|
||||
})}
|
||||
>
|
||||
<Text style={{ color: '#ffffff', fontWeight: '700', fontSize: 13 }}>
|
||||
Редактировать
|
||||
</Text>
|
||||
</Pressable>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 14 }}>
|
||||
<Text style={{ color: '#ffffff', fontSize: 22, fontWeight: '800' }}>
|
||||
{displayName}
|
||||
</Text>
|
||||
{contact?.username && (
|
||||
<Ionicons name="checkmark-circle" size={18} color="#1d9bf0" style={{ marginLeft: 5 }} />
|
||||
)}
|
||||
</View>
|
||||
<Text style={{ color: '#6a6a6a', fontSize: 12, marginTop: 2 }}>
|
||||
{shortAddr(address ?? '')}
|
||||
</Text>
|
||||
|
||||
{/* Counters row — post count is derived from what we loaded; follower/
|
||||
following counters would require chain.Followers / chain.Following
|
||||
HTTP exposure which isn't wired yet (Phase D). */}
|
||||
<View style={{ flexDirection: 'row', marginTop: 12, gap: 18 }}>
|
||||
<Text style={{ color: '#ffffff', fontSize: 13 }}>
|
||||
<Text style={{ fontWeight: '700' }}>{formatCount(posts.length)}</Text>
|
||||
<Text style={{ color: '#6a6a6a' }}> постов</Text>
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Secondary actions: open chat + copy address */}
|
||||
{!isMe && contact && (
|
||||
<View style={{ flexDirection: 'row', gap: 8, marginTop: 14 }}>
|
||||
<Pressable
|
||||
onPress={openChat}
|
||||
style={({ pressed }) => ({
|
||||
flex: 1,
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
paddingVertical: 10, borderRadius: 999,
|
||||
backgroundColor: pressed ? '#1a1a1a' : '#111111',
|
||||
borderWidth: 1, borderColor: '#1f1f1f',
|
||||
flexDirection: 'row', gap: 6,
|
||||
})}
|
||||
>
|
||||
<Ionicons name="chatbubble-outline" size={14} color="#ffffff" />
|
||||
<Text style={{ color: '#ffffff', fontWeight: '600', fontSize: 13 }}>
|
||||
Чат
|
||||
</Text>
|
||||
</Pressable>
|
||||
<Pressable
|
||||
onPress={() => address && copy(address, 'address')}
|
||||
style={({ pressed }) => ({
|
||||
flex: 1,
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
paddingVertical: 10, borderRadius: 999,
|
||||
backgroundColor: pressed ? '#1a1a1a' : '#111111',
|
||||
borderWidth: 1, borderColor: '#1f1f1f',
|
||||
})}
|
||||
>
|
||||
<Text style={{ color: '#ffffff', fontWeight: '600', fontSize: 13 }}>
|
||||
{copied === 'address' ? 'Скопировано' : 'Копировать адрес'}
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
|
||||
// ── Tab strip ────────────────────────────────────────────────────────
|
||||
|
||||
const TabStrip = (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#141414',
|
||||
marginTop: 14,
|
||||
}}
|
||||
>
|
||||
{(['posts', 'info'] as Tab[]).map(key => (
|
||||
<Pressable
|
||||
key={key}
|
||||
onPress={() => setTab(key)}
|
||||
style={{
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
paddingVertical: 12,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: tab === key ? '#ffffff' : '#6a6a6a',
|
||||
fontWeight: tab === key ? '700' : '500',
|
||||
fontSize: 13,
|
||||
}}
|
||||
>
|
||||
{key === 'posts' ? 'Посты' : 'Инфо'}
|
||||
</Text>
|
||||
{tab === key && (
|
||||
<View style={{
|
||||
marginTop: 6,
|
||||
width: 48, height: 3, borderRadius: 1.5,
|
||||
backgroundColor: '#1d9bf0',
|
||||
}} />
|
||||
)}
|
||||
</Pressable>
|
||||
))}
|
||||
</View>
|
||||
);
|
||||
|
||||
// ── Content per tab ─────────────────────────────────────────────────
|
||||
|
||||
if (tab === 'posts') {
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: '#000000' }}>
|
||||
<Header
|
||||
title="Профиль"
|
||||
divider
|
||||
left={<IconButton icon="chevron-back" size={36} onPress={() => router.back()} />}
|
||||
/>
|
||||
<FlatList
|
||||
data={posts}
|
||||
keyExtractor={p => p.post_id}
|
||||
renderItem={({ item }) => (
|
||||
<PostCard
|
||||
post={item}
|
||||
likedByMe={likedSet.has(item.post_id)}
|
||||
onStatsChanged={onStatsChanged}
|
||||
onDeleted={onDeleted}
|
||||
/>
|
||||
)}
|
||||
ListHeaderComponent={
|
||||
<>
|
||||
{Hero}
|
||||
{TabStrip}
|
||||
</>
|
||||
}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={refreshing}
|
||||
onRefresh={() => loadPosts(true)}
|
||||
tintColor="#1d9bf0"
|
||||
/>
|
||||
}
|
||||
ListEmptyComponent={
|
||||
loadingPosts ? (
|
||||
<View style={{ padding: 40, alignItems: 'center' }}>
|
||||
<ActivityIndicator color="#1d9bf0" />
|
||||
</View>
|
||||
) : (
|
||||
<View style={{
|
||||
paddingVertical: 60,
|
||||
paddingHorizontal: 32,
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<Ionicons name="newspaper-outline" size={32} color="#6a6a6a" />
|
||||
<Text style={{ color: '#ffffff', fontWeight: '700', marginTop: 10 }}>
|
||||
Пока нет постов
|
||||
</Text>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 13, marginTop: 6, textAlign: 'center' }}>
|
||||
{isMe
|
||||
? 'Нажмите на синюю кнопку в ленте, чтобы написать первый.'
|
||||
: 'Этот пользователь ещё ничего не публиковал.'}
|
||||
</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
// Info tab
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: '#000000' }}>
|
||||
<Header
|
||||
title="Профиль"
|
||||
divider
|
||||
left={<IconButton icon="chevron-back" size={36} onPress={() => router.back()} />}
|
||||
/>
|
||||
<ScrollView>
|
||||
{Hero}
|
||||
{TabStrip}
|
||||
|
||||
<View style={{ paddingHorizontal: 14, paddingTop: 14 }}>
|
||||
<View
|
||||
style={{
|
||||
borderRadius: 14,
|
||||
backgroundColor: '#0a0a0a',
|
||||
borderWidth: 1, borderColor: '#1f1f1f',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<InfoRow label="Адрес" value={shortAddr(address ?? '')} mono />
|
||||
{contact && (
|
||||
<>
|
||||
<InfoRow
|
||||
label="Ключ шифрования"
|
||||
value={contact.x25519Pub ? shortAddr(contact.x25519Pub) : 'не опубликован'}
|
||||
mono={!!contact.x25519Pub}
|
||||
danger={!contact.x25519Pub}
|
||||
/>
|
||||
<InfoRow label="Добавлен" value={new Date(contact.addedAt).toLocaleDateString()} />
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ height: 40 + insets.bottom }} />
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function InfoRow({
|
||||
label, value, mono, accent, danger,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
mono?: boolean;
|
||||
accent?: boolean;
|
||||
danger?: boolean;
|
||||
}) {
|
||||
const color = danger ? '#f0b35a' : accent ? '#1d9bf0' : '#ffffff';
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 12,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: '#1f1f1f',
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 13, flex: 1 }}>{label}</Text>
|
||||
<Text
|
||||
style={{
|
||||
color, fontSize: 13,
|
||||
fontFamily: mono ? 'monospace' : undefined,
|
||||
fontWeight: '600',
|
||||
}}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{value}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
// Silence unused-import lint for Contact type used only in helpers.
|
||||
const _contactType: Contact | null = null; void _contactType;
|
||||
173
client-app/app/(app)/requests.tsx
Normal file
173
client-app/app/(app)/requests.tsx
Normal file
@@ -0,0 +1,173 @@
|
||||
/**
|
||||
* Contact requests / notifications — dark minimalist.
|
||||
*
|
||||
* В референсе нижний таб «notifications» ведёт сюда. Пока это только
|
||||
* incoming CONTACT_REQUEST'ы; позже сюда же придут другие системные
|
||||
* уведомления (slash, ADD_VALIDATOR со-sig-ing, и т.д.).
|
||||
*/
|
||||
import React, { useState } from 'react';
|
||||
import { View, Text, FlatList, Alert, Pressable, ActivityIndicator } from 'react-native';
|
||||
import { router } from 'expo-router';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { useStore } from '@/lib/store';
|
||||
import {
|
||||
buildAcceptContactTx, submitTx, getIdentity, humanizeTxError,
|
||||
} from '@/lib/api';
|
||||
import { saveContact } from '@/lib/storage';
|
||||
import { shortAddr } from '@/lib/crypto';
|
||||
import { relativeTime } from '@/lib/utils';
|
||||
import type { ContactRequest } from '@/lib/types';
|
||||
|
||||
import { Avatar } from '@/components/Avatar';
|
||||
import { TabHeader } from '@/components/TabHeader';
|
||||
import { IconButton } from '@/components/IconButton';
|
||||
|
||||
export default function RequestsScreen() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const keyFile = useStore(s => s.keyFile);
|
||||
const requests = useStore(s => s.requests);
|
||||
const setRequests = useStore(s => s.setRequests);
|
||||
const upsertContact = useStore(s => s.upsertContact);
|
||||
|
||||
const [accepting, setAccepting] = useState<string | null>(null);
|
||||
|
||||
async function accept(req: ContactRequest) {
|
||||
if (!keyFile) return;
|
||||
setAccepting(req.txHash);
|
||||
try {
|
||||
const identity = await getIdentity(req.from);
|
||||
const x25519Pub = identity?.x25519_pub ?? '';
|
||||
|
||||
const tx = buildAcceptContactTx({
|
||||
from: keyFile.pub_key, to: req.from, privKey: keyFile.priv_key,
|
||||
});
|
||||
await submitTx(tx);
|
||||
|
||||
const contact = { address: req.from, x25519Pub, username: req.username, addedAt: Date.now() };
|
||||
upsertContact(contact);
|
||||
await saveContact(contact);
|
||||
|
||||
setRequests(requests.filter(r => r.txHash !== req.txHash));
|
||||
router.replace(`/(app)/chats/${req.from}` as never);
|
||||
} catch (e: any) {
|
||||
Alert.alert('Accept failed', humanizeTxError(e));
|
||||
} finally {
|
||||
setAccepting(null);
|
||||
}
|
||||
}
|
||||
|
||||
function decline(req: ContactRequest) {
|
||||
Alert.alert(
|
||||
'Decline request',
|
||||
`Decline request from ${req.username ? '@' + req.username : shortAddr(req.from)}?`,
|
||||
[
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{
|
||||
text: 'Decline',
|
||||
style: 'destructive',
|
||||
onPress: () => setRequests(requests.filter(r => r.txHash !== req.txHash)),
|
||||
},
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
const renderItem = ({ item: req }: { item: ContactRequest }) => {
|
||||
const name = req.username ? `@${req.username}` : shortAddr(req.from);
|
||||
const isAccepting = accepting === req.txHash;
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 12,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#0f0f0f',
|
||||
}}
|
||||
>
|
||||
<Avatar name={name} address={req.from} size={44} />
|
||||
<View style={{ flex: 1, marginLeft: 12, minWidth: 0 }}>
|
||||
<Text style={{ color: '#ffffff', fontWeight: '700', fontSize: 15 }}>
|
||||
{name}
|
||||
</Text>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 12, marginTop: 2 }}>
|
||||
wants to message you · {relativeTime(req.timestamp)}
|
||||
</Text>
|
||||
{req.intro ? (
|
||||
<Text
|
||||
style={{
|
||||
color: '#d0d0d0', fontSize: 13, lineHeight: 18,
|
||||
marginTop: 6,
|
||||
padding: 8,
|
||||
borderRadius: 10,
|
||||
backgroundColor: '#0a0a0a',
|
||||
borderWidth: 1, borderColor: '#1f1f1f',
|
||||
}}
|
||||
numberOfLines={3}
|
||||
>
|
||||
{req.intro}
|
||||
</Text>
|
||||
) : null}
|
||||
|
||||
<View style={{ flexDirection: 'row', gap: 8, marginTop: 10 }}>
|
||||
<Pressable
|
||||
onPress={() => accept(req)}
|
||||
disabled={isAccepting}
|
||||
style={({ pressed }) => ({
|
||||
flex: 1,
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
paddingVertical: 9, borderRadius: 999,
|
||||
backgroundColor: isAccepting ? '#1a1a1a' : pressed ? '#1a8cd8' : '#1d9bf0',
|
||||
})}
|
||||
>
|
||||
{isAccepting ? (
|
||||
<ActivityIndicator size="small" color="#ffffff" />
|
||||
) : (
|
||||
<Text style={{ color: '#ffffff', fontWeight: '700', fontSize: 13 }}>Accept</Text>
|
||||
)}
|
||||
</Pressable>
|
||||
<Pressable
|
||||
onPress={() => decline(req)}
|
||||
disabled={isAccepting}
|
||||
style={({ pressed }) => ({
|
||||
flex: 1,
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
paddingVertical: 9, borderRadius: 999,
|
||||
backgroundColor: pressed ? '#1a1a1a' : '#111111',
|
||||
borderWidth: 1, borderColor: '#1f1f1f',
|
||||
})}
|
||||
>
|
||||
<Text style={{ color: '#ffffff', fontWeight: '600', fontSize: 13 }}>Decline</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: '#000000', paddingTop: insets.top }}>
|
||||
<TabHeader title="Notifications" />
|
||||
|
||||
{requests.length === 0 ? (
|
||||
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 32 }}>
|
||||
<Ionicons name="notifications-outline" size={42} color="#3a3a3a" />
|
||||
<Text style={{ color: '#ffffff', fontSize: 16, fontWeight: '700', marginTop: 10 }}>
|
||||
All caught up
|
||||
</Text>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 13, textAlign: 'center', marginTop: 6, lineHeight: 19 }}>
|
||||
Contact requests and network events will appear here.
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
<FlatList
|
||||
data={requests}
|
||||
keyExtractor={r => r.txHash}
|
||||
renderItem={renderItem}
|
||||
contentContainerStyle={{ paddingBottom: 120 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
595
client-app/app/(app)/settings.tsx
Normal file
595
client-app/app/(app)/settings.tsx
Normal file
@@ -0,0 +1,595 @@
|
||||
/**
|
||||
* Settings screen — sub-route, открывается по tap'у на profile-avatar в
|
||||
* TabHeader. Использует обычный `<Header>` с back-кнопкой.
|
||||
*
|
||||
* Секции:
|
||||
* 1. Профиль — avatar, @username, short-address, Copy row.
|
||||
* 2. Username — регистрация в native:username_registry (если не куплено).
|
||||
* 3. Node — URL + contract ID + Save + Status.
|
||||
* 4. Account — Export key, Delete account.
|
||||
*
|
||||
* Весь Pressable'овый layout живёт на ВНЕШНЕМ View с static style —
|
||||
* Pressable handle-ит только background change (через вложенный View
|
||||
* в ({pressed}) callback'е), никаких layout props в callback-style.
|
||||
* Это лечит web-баг, где Pressable style-функция не применяет
|
||||
* percentage/padding layout надёжно.
|
||||
*/
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
View, Text, ScrollView, TextInput, Alert, Pressable, ActivityIndicator, Share,
|
||||
} from 'react-native';
|
||||
import * as Clipboard from 'expo-clipboard';
|
||||
import { router } from 'expo-router';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
|
||||
import { useStore } from '@/lib/store';
|
||||
import { saveSettings, deleteKeyFile } from '@/lib/storage';
|
||||
import {
|
||||
setNodeUrl, getNetStats, resolveUsername, reverseResolve,
|
||||
buildCallContractTx, submitTx,
|
||||
USERNAME_REGISTRATION_FEE, MIN_USERNAME_LENGTH, MAX_USERNAME_LENGTH,
|
||||
humanizeTxError,
|
||||
} from '@/lib/api';
|
||||
import { shortAddr } from '@/lib/crypto';
|
||||
import { formatAmount } from '@/lib/utils';
|
||||
|
||||
import { Avatar } from '@/components/Avatar';
|
||||
import { Header } from '@/components/Header';
|
||||
import { IconButton } from '@/components/IconButton';
|
||||
|
||||
type NodeStatus = 'idle' | 'checking' | 'ok' | 'error';
|
||||
type IoniconName = React.ComponentProps<typeof Ionicons>['name'];
|
||||
|
||||
// ─── Shared layout primitives ─────────────────────────────────────
|
||||
|
||||
function SectionLabel({ children }: { children: string }) {
|
||||
return (
|
||||
<Text
|
||||
style={{
|
||||
color: '#5a5a5a',
|
||||
fontSize: 11,
|
||||
letterSpacing: 1.2,
|
||||
textTransform: 'uppercase',
|
||||
marginTop: 18,
|
||||
marginBottom: 8,
|
||||
paddingHorizontal: 14,
|
||||
fontWeight: '700',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
function Card({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: '#0a0a0a',
|
||||
borderRadius: 14,
|
||||
marginHorizontal: 14,
|
||||
overflow: 'hidden',
|
||||
borderWidth: 1,
|
||||
borderColor: '#1f1f1f',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Row — clickable / non-clickable list item внутри Card'а.
|
||||
*
|
||||
* Layout живёт на ВНЕШНЕМ контейнере (View если read-only, Pressable
|
||||
* если tappable). Для pressed-стейта используется вложенный `<View>`
|
||||
* с background-color, чтобы не полагаться на style-функцию Pressable'а
|
||||
* (web-баг).
|
||||
*/
|
||||
function Row({
|
||||
icon, label, value, onPress, right, danger, first,
|
||||
}: {
|
||||
icon: IoniconName;
|
||||
label: string;
|
||||
value?: string;
|
||||
onPress?: () => void;
|
||||
right?: React.ReactNode;
|
||||
danger?: boolean;
|
||||
first?: boolean;
|
||||
}) {
|
||||
const body = (pressed: boolean) => (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 13,
|
||||
backgroundColor: pressed ? '#151515' : 'transparent',
|
||||
borderTopWidth: first ? 0 : 1,
|
||||
borderTopColor: '#1f1f1f',
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 8,
|
||||
backgroundColor: danger ? 'rgba(244,33,46,0.12)' : '#1a1a1a',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 12,
|
||||
}}
|
||||
>
|
||||
<Ionicons name={icon} size={16} color={danger ? '#f4212e' : '#ffffff'} />
|
||||
</View>
|
||||
<View style={{ flex: 1, minWidth: 0 }}>
|
||||
<Text
|
||||
style={{
|
||||
color: danger ? '#f4212e' : '#ffffff',
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
{value !== undefined && (
|
||||
<Text numberOfLines={1} style={{ color: '#8b8b8b', fontSize: 12, marginTop: 2 }}>
|
||||
{value}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
{right}
|
||||
{onPress && !right && (
|
||||
<Ionicons name="chevron-forward" size={16} color="#5a5a5a" />
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
|
||||
if (!onPress) return <View>{body(false)}</View>;
|
||||
return (
|
||||
<Pressable onPress={onPress}>
|
||||
{({ pressed }) => body(pressed)}
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Screen ───────────────────────────────────────────────────────
|
||||
|
||||
export default function SettingsScreen() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const keyFile = useStore(s => s.keyFile);
|
||||
const setKeyFile = useStore(s => s.setKeyFile);
|
||||
const settings = useStore(s => s.settings);
|
||||
const setSettings = useStore(s => s.setSettings);
|
||||
const username = useStore(s => s.username);
|
||||
const setUsername = useStore(s => s.setUsername);
|
||||
const balance = useStore(s => s.balance);
|
||||
|
||||
const [nodeUrl, setNodeUrlInput] = useState(settings.nodeUrl);
|
||||
const [contractId, setContractId] = useState(settings.contractId);
|
||||
const [nodeStatus, setNodeStatus] = useState<NodeStatus>('idle');
|
||||
const [peerCount, setPeerCount] = useState<number | null>(null);
|
||||
const [blockCount, setBlockCount] = useState<number | null>(null);
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [savingNode, setSavingNode] = useState(false);
|
||||
|
||||
// Username registration state
|
||||
const [nameInput, setNameInput] = useState('');
|
||||
const [nameError, setNameError] = useState<string | null>(null);
|
||||
const [registering, setRegistering] = useState(false);
|
||||
|
||||
useEffect(() => { checkNode(); }, []);
|
||||
useEffect(() => { setContractId(settings.contractId); }, [settings.contractId]);
|
||||
useEffect(() => {
|
||||
if (!settings.contractId || !keyFile) { setUsername(null); return; }
|
||||
(async () => {
|
||||
const name = await reverseResolve(settings.contractId, keyFile.pub_key);
|
||||
setUsername(name);
|
||||
})();
|
||||
}, [settings.contractId, keyFile, setUsername]);
|
||||
|
||||
async function checkNode() {
|
||||
setNodeStatus('checking');
|
||||
try {
|
||||
const stats = await getNetStats();
|
||||
setNodeStatus('ok');
|
||||
setPeerCount(stats.peer_count);
|
||||
setBlockCount(stats.total_blocks);
|
||||
} catch {
|
||||
setNodeStatus('error');
|
||||
}
|
||||
}
|
||||
|
||||
async function saveNode() {
|
||||
setSavingNode(true);
|
||||
const url = nodeUrl.trim().replace(/\/$/, '');
|
||||
setNodeUrl(url);
|
||||
const next = { nodeUrl: url, contractId: contractId.trim() };
|
||||
setSettings(next);
|
||||
await saveSettings(next);
|
||||
await checkNode();
|
||||
setSavingNode(false);
|
||||
Alert.alert('Saved', 'Node settings updated.');
|
||||
}
|
||||
|
||||
async function copyAddress() {
|
||||
if (!keyFile) return;
|
||||
await Clipboard.setStringAsync(keyFile.pub_key);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 1800);
|
||||
}
|
||||
|
||||
async function exportKey() {
|
||||
if (!keyFile) return;
|
||||
try {
|
||||
await Share.share({
|
||||
message: JSON.stringify(keyFile, null, 2),
|
||||
title: 'DChain key file',
|
||||
});
|
||||
} catch (e: any) {
|
||||
Alert.alert('Export failed', e?.message ?? 'Unknown error');
|
||||
}
|
||||
}
|
||||
|
||||
function logout() {
|
||||
Alert.alert(
|
||||
'Delete account',
|
||||
'Your key will be removed from this device. Make sure you have a backup!',
|
||||
[
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{
|
||||
text: 'Delete',
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
await deleteKeyFile();
|
||||
setKeyFile(null);
|
||||
router.replace('/');
|
||||
},
|
||||
},
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
const onNameChange = (v: string) => {
|
||||
const cleaned = v.toLowerCase().replace(/[^a-z0-9_\-]/g, '').slice(0, MAX_USERNAME_LENGTH);
|
||||
setNameInput(cleaned);
|
||||
setNameError(null);
|
||||
};
|
||||
const nameIsValid = nameInput.length >= MIN_USERNAME_LENGTH && /^[a-z]/.test(nameInput);
|
||||
|
||||
async function registerUsername() {
|
||||
if (!keyFile) return;
|
||||
const name = nameInput.trim();
|
||||
if (!nameIsValid) {
|
||||
setNameError(`Min ${MIN_USERNAME_LENGTH} chars, starts with a-z`);
|
||||
return;
|
||||
}
|
||||
if (!settings.contractId) {
|
||||
setNameError('No registry contract in node settings');
|
||||
return;
|
||||
}
|
||||
const total = USERNAME_REGISTRATION_FEE + 1000 + 2000;
|
||||
if (balance < total) {
|
||||
setNameError(`Need ${formatAmount(total)}, have ${formatAmount(balance)}`);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const existing = await resolveUsername(settings.contractId, name);
|
||||
if (existing) { setNameError(`@${name} already taken`); return; }
|
||||
} catch { /* ignore */ }
|
||||
|
||||
Alert.alert(
|
||||
`Buy @${name}?`,
|
||||
`Cost: ${formatAmount(USERNAME_REGISTRATION_FEE)} + fee ${formatAmount(1000)}.\nBinds to your address until released.`,
|
||||
[
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{
|
||||
text: 'Buy',
|
||||
onPress: async () => {
|
||||
setRegistering(true);
|
||||
setNameError(null);
|
||||
try {
|
||||
const tx = buildCallContractTx({
|
||||
from: keyFile.pub_key,
|
||||
contractId: settings.contractId,
|
||||
method: 'register',
|
||||
args: [name],
|
||||
amount: USERNAME_REGISTRATION_FEE,
|
||||
privKey: keyFile.priv_key,
|
||||
});
|
||||
await submitTx(tx);
|
||||
setNameInput('');
|
||||
Alert.alert('Submitted', 'Registration tx accepted. Name appears in a few seconds.');
|
||||
let attempts = 0;
|
||||
const iv = setInterval(async () => {
|
||||
attempts++;
|
||||
const got = keyFile
|
||||
? await reverseResolve(settings.contractId, keyFile.pub_key)
|
||||
: null;
|
||||
if (got) { setUsername(got); clearInterval(iv); }
|
||||
else if (attempts >= 10) clearInterval(iv);
|
||||
}, 2000);
|
||||
} catch (e: any) {
|
||||
setNameError(humanizeTxError(e));
|
||||
} finally {
|
||||
setRegistering(false);
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
const statusColor =
|
||||
nodeStatus === 'ok' ? '#3ba55d' :
|
||||
nodeStatus === 'error' ? '#f4212e' :
|
||||
'#f0b35a';
|
||||
const statusLabel =
|
||||
nodeStatus === 'ok' ? 'Connected' :
|
||||
nodeStatus === 'error' ? 'Unreachable' :
|
||||
'Checking…';
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: '#000000', paddingTop: insets.top }}>
|
||||
<Header
|
||||
title="Settings"
|
||||
divider={false}
|
||||
left={<IconButton icon="chevron-back" size={36} onPress={() => router.back()} />}
|
||||
/>
|
||||
<ScrollView
|
||||
contentContainerStyle={{ paddingBottom: 120 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* ── Profile ── */}
|
||||
<SectionLabel>Profile</SectionLabel>
|
||||
<Card>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
padding: 14,
|
||||
gap: 14,
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
name={username ?? keyFile?.pub_key ?? '?'}
|
||||
address={keyFile?.pub_key}
|
||||
size={56}
|
||||
/>
|
||||
<View style={{ flex: 1, minWidth: 0 }}>
|
||||
{username ? (
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
||||
<Text style={{ color: '#ffffff', fontWeight: '700', fontSize: 17 }}>
|
||||
@{username}
|
||||
</Text>
|
||||
<Ionicons name="checkmark-circle" size={15} color="#1d9bf0" style={{ marginLeft: 4 }} />
|
||||
</View>
|
||||
) : (
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 14 }}>No username yet</Text>
|
||||
)}
|
||||
<Text
|
||||
style={{
|
||||
color: '#8b8b8b',
|
||||
fontSize: 11,
|
||||
marginTop: 2,
|
||||
fontFamily: 'monospace',
|
||||
}}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{keyFile ? shortAddr(keyFile.pub_key, 10) : '—'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Row
|
||||
icon={copied ? 'checkmark-outline' : 'copy-outline'}
|
||||
label={copied ? 'Copied!' : 'Copy address'}
|
||||
onPress={copyAddress}
|
||||
right={<View style={{ width: 16 }} />}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* ── Username (только если ещё нет) ── */}
|
||||
{!username && (
|
||||
<>
|
||||
<SectionLabel>Username</SectionLabel>
|
||||
<Card>
|
||||
<View style={{ padding: 14 }}>
|
||||
<Text style={{ color: '#ffffff', fontWeight: '600', fontSize: 14, marginBottom: 4 }}>
|
||||
Buy a username
|
||||
</Text>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 12, lineHeight: 17, marginBottom: 10 }}>
|
||||
Flat {formatAmount(USERNAME_REGISTRATION_FEE)} fee + {formatAmount(1000)} network.
|
||||
Only a-z, 0-9, _, -. Starts with a letter.
|
||||
</Text>
|
||||
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#000000',
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 4,
|
||||
borderWidth: 1,
|
||||
borderColor: nameError ? '#f4212e' : '#1f1f1f',
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: '#5a5a5a', fontSize: 15, marginRight: 2 }}>@</Text>
|
||||
<TextInput
|
||||
value={nameInput}
|
||||
onChangeText={onNameChange}
|
||||
placeholder="alice"
|
||||
placeholderTextColor="#5a5a5a"
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
maxLength={MAX_USERNAME_LENGTH}
|
||||
style={{
|
||||
flex: 1,
|
||||
color: '#ffffff',
|
||||
fontSize: 15,
|
||||
paddingVertical: 8,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
{nameError && (
|
||||
<Text style={{ color: '#f4212e', fontSize: 12, marginTop: 6 }}>
|
||||
{nameError}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
<PrimaryButton
|
||||
onPress={registerUsername}
|
||||
disabled={registering || !nameIsValid || !settings.contractId}
|
||||
loading={registering}
|
||||
label={`Buy @${nameInput || 'username'}`}
|
||||
style={{ marginTop: 12 }}
|
||||
/>
|
||||
</View>
|
||||
</Card>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* ── Node ── */}
|
||||
<SectionLabel>Node</SectionLabel>
|
||||
<Card>
|
||||
<View style={{ padding: 14, gap: 10 }}>
|
||||
<LabeledInput
|
||||
label="Node URL"
|
||||
value={nodeUrl}
|
||||
onChangeText={setNodeUrlInput}
|
||||
placeholder="http://localhost:8080"
|
||||
/>
|
||||
<LabeledInput
|
||||
label="Username contract"
|
||||
value={contractId}
|
||||
onChangeText={setContractId}
|
||||
placeholder="auto-discovered via /api/well-known-contracts"
|
||||
monospace
|
||||
/>
|
||||
<PrimaryButton
|
||||
onPress={saveNode}
|
||||
disabled={savingNode}
|
||||
loading={savingNode}
|
||||
label="Save"
|
||||
style={{ marginTop: 4 }}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<Row
|
||||
icon="pulse-outline"
|
||||
label="Status"
|
||||
value={
|
||||
nodeStatus === 'ok'
|
||||
? `${statusLabel} · ${blockCount ?? 0} blocks · ${peerCount ?? 0} peers`
|
||||
: statusLabel
|
||||
}
|
||||
right={
|
||||
<View
|
||||
style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: statusColor }}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* ── Account ── */}
|
||||
<SectionLabel>Account</SectionLabel>
|
||||
<Card>
|
||||
<Row
|
||||
icon="download-outline"
|
||||
label="Export key"
|
||||
value="Save your private key as JSON"
|
||||
onPress={exportKey}
|
||||
first
|
||||
/>
|
||||
<Row
|
||||
icon="trash-outline"
|
||||
label="Delete account"
|
||||
value="Remove key from this device"
|
||||
onPress={logout}
|
||||
danger
|
||||
/>
|
||||
</Card>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Form primitives ──────────────────────────────────────────────
|
||||
|
||||
function LabeledInput({
|
||||
label, value, onChangeText, placeholder, monospace,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
onChangeText: (v: string) => void;
|
||||
placeholder?: string;
|
||||
monospace?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<View>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 12, marginBottom: 6 }}>{label}</Text>
|
||||
<TextInput
|
||||
value={value}
|
||||
onChangeText={onChangeText}
|
||||
placeholder={placeholder}
|
||||
placeholderTextColor="#5a5a5a"
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
style={{
|
||||
color: '#ffffff',
|
||||
fontSize: monospace ? 13 : 14,
|
||||
fontFamily: monospace ? 'monospace' : undefined,
|
||||
backgroundColor: '#000000',
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
borderWidth: 1,
|
||||
borderColor: '#1f1f1f',
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function PrimaryButton({
|
||||
label, onPress, disabled, loading, style,
|
||||
}: {
|
||||
label: string;
|
||||
onPress: () => void;
|
||||
disabled?: boolean;
|
||||
loading?: boolean;
|
||||
style?: object;
|
||||
}) {
|
||||
return (
|
||||
<Pressable onPress={onPress} disabled={disabled} style={style}>
|
||||
{({ pressed }) => (
|
||||
<View
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 11,
|
||||
borderRadius: 999,
|
||||
backgroundColor: disabled
|
||||
? '#1a1a1a'
|
||||
: pressed ? '#1a8cd8' : '#1d9bf0',
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<ActivityIndicator color="#ffffff" size="small" />
|
||||
) : (
|
||||
<Text
|
||||
style={{
|
||||
color: disabled ? '#5a5a5a' : '#ffffff',
|
||||
fontWeight: '700',
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
652
client-app/app/(app)/wallet.tsx
Normal file
652
client-app/app/(app)/wallet.tsx
Normal file
@@ -0,0 +1,652 @@
|
||||
/**
|
||||
* Wallet screen — dark minimalist.
|
||||
*
|
||||
* Сетка:
|
||||
* [TabHeader: profile-avatar | Wallet | refresh]
|
||||
* [Balance hero card — gradient-ish dark card, big number, address chip, action row]
|
||||
* [SectionLabel: Recent transactions]
|
||||
* [TX list card — tiles per tx, in/out coloring, relative time]
|
||||
* [Send modal: slide-up sheet с полями recipient/amount/fee + total preview]
|
||||
*
|
||||
* Все кнопки и инпуты — те же плоские стили, что на других экранах.
|
||||
* Никаких style-функций у Pressable'ов с layout-пропсами (избегаем web
|
||||
* layout-баги, которые мы уже ловили на ChatTile/MessageBubble).
|
||||
*/
|
||||
import React, { useState, useCallback, useEffect, useMemo } from 'react';
|
||||
import {
|
||||
View, Text, ScrollView, Modal, Alert, RefreshControl, Pressable, TextInput, ActivityIndicator,
|
||||
} from 'react-native';
|
||||
import * as Clipboard from 'expo-clipboard';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
|
||||
import { useStore } from '@/lib/store';
|
||||
import { useBalance } from '@/hooks/useBalance';
|
||||
import { buildTransferTx, submitTx, getTxHistory, getBalance, humanizeTxError } from '@/lib/api';
|
||||
import { shortAddr } from '@/lib/crypto';
|
||||
import { formatAmount, relativeTime } from '@/lib/utils';
|
||||
import type { TxRecord } from '@/lib/types';
|
||||
|
||||
import { TabHeader } from '@/components/TabHeader';
|
||||
import { IconButton } from '@/components/IconButton';
|
||||
|
||||
// ─── TX meta (icon + label + tone) ─────────────────────────────────
|
||||
|
||||
type IoniconName = React.ComponentProps<typeof Ionicons>['name'];
|
||||
|
||||
interface TxMeta {
|
||||
label: string;
|
||||
icon: IoniconName;
|
||||
tone: 'in' | 'out' | 'neutral';
|
||||
}
|
||||
|
||||
const TX_META: Record<string, TxMeta> = {
|
||||
TRANSFER: { label: 'Transfer', icon: 'swap-horizontal-outline', tone: 'neutral' },
|
||||
CONTACT_REQUEST: { label: 'Contact request', icon: 'person-add-outline', tone: 'out' },
|
||||
ACCEPT_CONTACT: { label: 'Contact accepted', icon: 'person-outline', tone: 'in' },
|
||||
BLOCK_CONTACT: { label: 'Block', icon: 'ban-outline', tone: 'out' },
|
||||
DEPLOY_CONTRACT: { label: 'Deploy', icon: 'document-text-outline', tone: 'out' },
|
||||
CALL_CONTRACT: { label: 'Call contract', icon: 'flash-outline', tone: 'out' },
|
||||
STAKE: { label: 'Stake', icon: 'lock-closed-outline', tone: 'out' },
|
||||
UNSTAKE: { label: 'Unstake', icon: 'lock-open-outline', tone: 'in' },
|
||||
REGISTER_KEY: { label: 'Register key', icon: 'key-outline', tone: 'neutral' },
|
||||
BLOCK_REWARD: { label: 'Block reward', icon: 'diamond-outline', tone: 'in' },
|
||||
};
|
||||
|
||||
function txMeta(type: string): TxMeta {
|
||||
return TX_META[type] ?? { label: type.replace(/_/g, ' '), icon: 'ellipse-outline', tone: 'neutral' };
|
||||
}
|
||||
|
||||
const toneColor = (tone: TxMeta['tone']): string =>
|
||||
tone === 'in' ? '#3ba55d' : tone === 'out' ? '#f4212e' : '#e7e7e7';
|
||||
|
||||
// ─── Main ──────────────────────────────────────────────────────────
|
||||
|
||||
export default function WalletScreen() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const keyFile = useStore(s => s.keyFile);
|
||||
const balance = useStore(s => s.balance);
|
||||
const setBalance = useStore(s => s.setBalance);
|
||||
|
||||
useBalance();
|
||||
|
||||
const [txHistory, setTxHistory] = useState<TxRecord[]>([]);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [showSend, setShowSend] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
if (!keyFile) return;
|
||||
setRefreshing(true);
|
||||
try {
|
||||
const [hist, bal] = await Promise.all([
|
||||
getTxHistory(keyFile.pub_key),
|
||||
getBalance(keyFile.pub_key),
|
||||
]);
|
||||
setTxHistory(hist);
|
||||
setBalance(bal);
|
||||
} catch { /* ignore — WS/HTTP retries sample */ }
|
||||
setRefreshing(false);
|
||||
}, [keyFile, setBalance]);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const copyAddress = async () => {
|
||||
if (!keyFile) return;
|
||||
await Clipboard.setStringAsync(keyFile.pub_key);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 1800);
|
||||
};
|
||||
|
||||
const mine = keyFile?.pub_key ?? '';
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: '#000000', paddingTop: insets.top }}>
|
||||
<TabHeader
|
||||
title="Wallet"
|
||||
right={<IconButton icon="refresh-outline" size={36} onPress={load} />}
|
||||
/>
|
||||
|
||||
<ScrollView
|
||||
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={load} tintColor="#1d9bf0" />}
|
||||
contentContainerStyle={{ paddingBottom: 120 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<BalanceHero
|
||||
balance={balance}
|
||||
address={mine}
|
||||
copied={copied}
|
||||
onCopy={copyAddress}
|
||||
onSend={() => setShowSend(true)}
|
||||
/>
|
||||
|
||||
<SectionLabel>Recent transactions</SectionLabel>
|
||||
|
||||
{txHistory.length === 0 ? (
|
||||
<EmptyTx />
|
||||
) : (
|
||||
<View
|
||||
style={{
|
||||
marginHorizontal: 14,
|
||||
borderRadius: 14,
|
||||
backgroundColor: '#0a0a0a',
|
||||
borderWidth: 1, borderColor: '#1f1f1f',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{txHistory.map((tx, i) => (
|
||||
<TxTile
|
||||
key={tx.hash + i}
|
||||
tx={tx}
|
||||
first={i === 0}
|
||||
mine={mine}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
|
||||
<SendModal
|
||||
visible={showSend}
|
||||
onClose={() => setShowSend(false)}
|
||||
balance={balance}
|
||||
keyFile={keyFile}
|
||||
onSent={() => {
|
||||
setShowSend(false);
|
||||
setTimeout(load, 1200);
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Hero card ─────────────────────────────────────────────────────
|
||||
|
||||
function BalanceHero({
|
||||
balance, address, copied, onCopy, onSend,
|
||||
}: {
|
||||
balance: number;
|
||||
address: string;
|
||||
copied: boolean;
|
||||
onCopy: () => void;
|
||||
onSend: () => void;
|
||||
}) {
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
marginHorizontal: 14,
|
||||
marginTop: 10,
|
||||
padding: 20,
|
||||
borderRadius: 18,
|
||||
backgroundColor: '#0a0a0a',
|
||||
borderWidth: 1,
|
||||
borderColor: '#1f1f1f',
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 12, letterSpacing: 0.3 }}>
|
||||
Balance
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: '#ffffff',
|
||||
fontSize: 36,
|
||||
fontWeight: '800',
|
||||
letterSpacing: -0.8,
|
||||
marginTop: 4,
|
||||
}}
|
||||
>
|
||||
{formatAmount(balance)}
|
||||
</Text>
|
||||
|
||||
{/* Address chip */}
|
||||
<Pressable onPress={onCopy} style={{ marginTop: 14 }}>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#111111',
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 9,
|
||||
}}
|
||||
>
|
||||
<Ionicons
|
||||
name={copied ? 'checkmark-outline' : 'copy-outline'}
|
||||
size={14}
|
||||
color={copied ? '#3ba55d' : '#8b8b8b'}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
color: copied ? '#3ba55d' : '#8b8b8b',
|
||||
fontSize: 12,
|
||||
marginLeft: 6,
|
||||
fontFamily: 'monospace',
|
||||
flex: 1,
|
||||
}}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{copied ? 'Copied!' : shortAddr(address, 10)}
|
||||
</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
|
||||
{/* Actions */}
|
||||
<View style={{ flexDirection: 'row', gap: 10, marginTop: 14 }}>
|
||||
<HeroButton icon="paper-plane-outline" label="Send" primary onPress={onSend} />
|
||||
<HeroButton icon="download-outline" label="Receive" onPress={onCopy} />
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function HeroButton({
|
||||
icon, label, primary, onPress,
|
||||
}: {
|
||||
icon: IoniconName;
|
||||
label: string;
|
||||
primary?: boolean;
|
||||
onPress: () => void;
|
||||
}) {
|
||||
const base = {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 11,
|
||||
borderRadius: 999,
|
||||
gap: 6,
|
||||
} as const;
|
||||
return (
|
||||
<Pressable onPress={onPress} style={{ flex: 1 }}>
|
||||
{({ pressed }) => (
|
||||
<View
|
||||
style={{
|
||||
...base,
|
||||
backgroundColor: primary
|
||||
? (pressed ? '#1a8cd8' : '#1d9bf0')
|
||||
: (pressed ? '#202020' : '#111111'),
|
||||
borderWidth: primary ? 0 : 1,
|
||||
borderColor: '#1f1f1f',
|
||||
}}
|
||||
>
|
||||
<Ionicons name={icon} size={15} color="#ffffff" />
|
||||
<Text style={{ color: '#ffffff', fontWeight: '700', fontSize: 14 }}>
|
||||
{label}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Section label ────────────────────────────────────────────────
|
||||
|
||||
function SectionLabel({ children }: { children: string }) {
|
||||
return (
|
||||
<Text
|
||||
style={{
|
||||
color: '#5a5a5a',
|
||||
fontSize: 11,
|
||||
fontWeight: '700',
|
||||
letterSpacing: 1.2,
|
||||
textTransform: 'uppercase',
|
||||
marginTop: 22,
|
||||
marginBottom: 8,
|
||||
paddingHorizontal: 14,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Empty state ──────────────────────────────────────────────────
|
||||
|
||||
function EmptyTx() {
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
marginHorizontal: 14,
|
||||
borderRadius: 14,
|
||||
backgroundColor: '#0a0a0a',
|
||||
borderWidth: 1,
|
||||
borderColor: '#1f1f1f',
|
||||
paddingVertical: 36,
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Ionicons name="receipt-outline" size={32} color="#5a5a5a" />
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 13, marginTop: 8 }}>
|
||||
No transactions yet
|
||||
</Text>
|
||||
<Text style={{ color: '#5a5a5a', fontSize: 11, marginTop: 2 }}>
|
||||
Pull to refresh
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── TX tile ──────────────────────────────────────────────────────
|
||||
//
|
||||
// Pressable с ВНЕШНИМ плоским style (background через static object),
|
||||
// внутренняя View handles row-layout. Избегаем web-баг со style-функциями
|
||||
// Pressable'а.
|
||||
|
||||
function TxTile({
|
||||
tx, first, mine,
|
||||
}: {
|
||||
tx: TxRecord;
|
||||
first: boolean;
|
||||
mine: string;
|
||||
}) {
|
||||
const m = txMeta(tx.type);
|
||||
const isMineTx = tx.from === mine;
|
||||
const amt = tx.amount ?? 0;
|
||||
const sign = m.tone === 'in' ? '+' : m.tone === 'out' ? '−' : '';
|
||||
const color = toneColor(m.tone);
|
||||
|
||||
return (
|
||||
<Pressable>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 12,
|
||||
borderTopWidth: first ? 0 : 1,
|
||||
borderTopColor: '#1f1f1f',
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 10,
|
||||
backgroundColor: '#111111',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: 12,
|
||||
}}
|
||||
>
|
||||
<Ionicons name={m.icon} size={16} color="#e7e7e7" />
|
||||
</View>
|
||||
<View style={{ flex: 1, minWidth: 0 }}>
|
||||
<Text style={{ color: '#ffffff', fontSize: 14, fontWeight: '600' }}>
|
||||
{m.label}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: '#8b8b8b',
|
||||
fontSize: 11,
|
||||
marginTop: 1,
|
||||
fontFamily: 'monospace',
|
||||
}}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{tx.type === 'TRANSFER'
|
||||
? (isMineTx ? `→ ${shortAddr(tx.to ?? '', 5)}` : `← ${shortAddr(tx.from, 5)}`)
|
||||
: shortAddr(tx.hash, 8)}
|
||||
{' · '}
|
||||
{relativeTime(tx.timestamp)}
|
||||
</Text>
|
||||
</View>
|
||||
{amt > 0 && (
|
||||
<Text style={{ color, fontWeight: '700', fontSize: 14 }}>
|
||||
{sign}{formatAmount(amt)}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Send modal ───────────────────────────────────────────────────
|
||||
|
||||
function SendModal({
|
||||
visible, onClose, balance, keyFile, onSent,
|
||||
}: {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
balance: number;
|
||||
keyFile: { pub_key: string; priv_key: string } | null;
|
||||
onSent: () => void;
|
||||
}) {
|
||||
const insets = useSafeAreaInsets();
|
||||
const [to, setTo] = useState('');
|
||||
const [amount, setAmount] = useState('');
|
||||
const [fee, setFee] = useState('1000');
|
||||
const [sending, setSending] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!visible) {
|
||||
// reset при закрытии
|
||||
setTo(''); setAmount(''); setFee('1000'); setSending(false);
|
||||
}
|
||||
}, [visible]);
|
||||
|
||||
const amt = parseInt(amount || '0', 10) || 0;
|
||||
const f = parseInt(fee || '0', 10) || 0;
|
||||
const total = amt + f;
|
||||
const ok = !!to.trim() && amt > 0 && total <= balance;
|
||||
|
||||
const send = async () => {
|
||||
if (!keyFile) return;
|
||||
if (!ok) {
|
||||
Alert.alert('Check inputs', total > balance
|
||||
? `Need ${formatAmount(total)}, have ${formatAmount(balance)}.`
|
||||
: 'Recipient and amount are required.');
|
||||
return;
|
||||
}
|
||||
setSending(true);
|
||||
try {
|
||||
const tx = buildTransferTx({
|
||||
from: keyFile.pub_key,
|
||||
to: to.trim(),
|
||||
amount: amt,
|
||||
fee: f,
|
||||
privKey: keyFile.priv_key,
|
||||
});
|
||||
await submitTx(tx);
|
||||
onSent();
|
||||
} catch (e: any) {
|
||||
Alert.alert('Send failed', humanizeTxError(e));
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal visible={visible} animationType="slide" transparent onRequestClose={onClose}>
|
||||
<Pressable
|
||||
onPress={onClose}
|
||||
style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.82)', justifyContent: 'flex-end' }}
|
||||
>
|
||||
<Pressable
|
||||
onPress={() => { /* block bubble-close */ }}
|
||||
style={{
|
||||
backgroundColor: '#0a0a0a',
|
||||
borderTopLeftRadius: 20,
|
||||
borderTopRightRadius: 20,
|
||||
paddingTop: 10,
|
||||
paddingBottom: Math.max(insets.bottom, 14) + 12,
|
||||
paddingHorizontal: 14,
|
||||
borderTopWidth: 1,
|
||||
borderColor: '#1f1f1f',
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
alignSelf: 'center',
|
||||
width: 40, height: 4, borderRadius: 2,
|
||||
backgroundColor: '#2a2a2a',
|
||||
marginBottom: 14,
|
||||
}}
|
||||
/>
|
||||
<Text style={{ color: '#ffffff', fontSize: 18, fontWeight: '700', marginBottom: 14 }}>
|
||||
Send tokens
|
||||
</Text>
|
||||
|
||||
<Field label="Recipient address">
|
||||
<TextInput
|
||||
value={to}
|
||||
onChangeText={setTo}
|
||||
placeholder="DC… or pub_key hex"
|
||||
placeholderTextColor="#5a5a5a"
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
style={{
|
||||
color: '#ffffff',
|
||||
fontSize: 13,
|
||||
fontFamily: 'monospace',
|
||||
paddingVertical: 0,
|
||||
}}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<View style={{ flexDirection: 'row', gap: 10, marginTop: 10 }}>
|
||||
<View style={{ flex: 2 }}>
|
||||
<Field label="Amount (µT)">
|
||||
<TextInput
|
||||
value={amount}
|
||||
onChangeText={setAmount}
|
||||
placeholder="1000"
|
||||
placeholderTextColor="#5a5a5a"
|
||||
keyboardType="numeric"
|
||||
style={{ color: '#ffffff', fontSize: 14, paddingVertical: 0 }}
|
||||
/>
|
||||
</Field>
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Field label="Fee (µT)">
|
||||
<TextInput
|
||||
value={fee}
|
||||
onChangeText={setFee}
|
||||
placeholder="1000"
|
||||
placeholderTextColor="#5a5a5a"
|
||||
keyboardType="numeric"
|
||||
style={{ color: '#ffffff', fontSize: 14, paddingVertical: 0 }}
|
||||
/>
|
||||
</Field>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Summary */}
|
||||
<View
|
||||
style={{
|
||||
marginTop: 12,
|
||||
padding: 12,
|
||||
borderRadius: 10,
|
||||
backgroundColor: '#111111',
|
||||
borderWidth: 1,
|
||||
borderColor: '#1f1f1f',
|
||||
}}
|
||||
>
|
||||
<SummaryRow label="Amount" value={formatAmount(amt)} />
|
||||
<SummaryRow label="Fee" value={formatAmount(f)} muted />
|
||||
<View style={{ height: 1, backgroundColor: '#1f1f1f', marginVertical: 6 }} />
|
||||
<SummaryRow
|
||||
label="Total"
|
||||
value={formatAmount(total)}
|
||||
accent={total > balance ? '#f4212e' : '#ffffff'}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={{ flexDirection: 'row', gap: 10, marginTop: 16 }}>
|
||||
<Pressable onPress={onClose} style={{ flex: 1 }}>
|
||||
{({ pressed }) => (
|
||||
<View
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 12,
|
||||
borderRadius: 999,
|
||||
backgroundColor: pressed ? '#1a1a1a' : '#111111',
|
||||
borderWidth: 1,
|
||||
borderColor: '#1f1f1f',
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: '#ffffff', fontWeight: '600', fontSize: 14 }}>
|
||||
Cancel
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</Pressable>
|
||||
<Pressable onPress={send} disabled={!ok || sending} style={{ flex: 2 }}>
|
||||
{({ pressed }) => (
|
||||
<View
|
||||
style={{
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 12,
|
||||
borderRadius: 999,
|
||||
backgroundColor: !ok || sending
|
||||
? '#1a1a1a'
|
||||
: pressed ? '#1a8cd8' : '#1d9bf0',
|
||||
}}
|
||||
>
|
||||
{sending ? (
|
||||
<ActivityIndicator color="#ffffff" size="small" />
|
||||
) : (
|
||||
<Text style={{ color: '#ffffff', fontWeight: '700', fontSize: 14 }}>
|
||||
Send
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</Pressable>
|
||||
</View>
|
||||
</Pressable>
|
||||
</Pressable>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({ label, children }: { label: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<View>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 12, marginBottom: 6 }}>{label}</Text>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: '#000000',
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
borderWidth: 1,
|
||||
borderColor: '#1f1f1f',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function SummaryRow({
|
||||
label, value, muted, accent,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
muted?: boolean;
|
||||
accent?: string;
|
||||
}) {
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
paddingVertical: 3,
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 12 }}>{label}</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: accent ?? (muted ? '#8b8b8b' : '#ffffff'),
|
||||
fontSize: 13,
|
||||
fontWeight: muted ? '500' : '700',
|
||||
}}
|
||||
>
|
||||
{value}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
139
client-app/app/(auth)/create.tsx
Normal file
139
client-app/app/(auth)/create.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
/**
|
||||
* Create Account — dark minimalist.
|
||||
* Генерирует Ed25519 + X25519 keypair локально, сохраняет в SecureStore.
|
||||
*/
|
||||
import React, { useState } from 'react';
|
||||
import { View, Text, ScrollView, Alert, Pressable, ActivityIndicator } from 'react-native';
|
||||
import { router } from 'expo-router';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { generateKeyFile } from '@/lib/crypto';
|
||||
import { saveKeyFile } from '@/lib/storage';
|
||||
import { useStore } from '@/lib/store';
|
||||
|
||||
import { Header } from '@/components/Header';
|
||||
import { IconButton } from '@/components/IconButton';
|
||||
|
||||
export default function CreateAccountScreen() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const setKeyFile = useStore(s => s.setKeyFile);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
async function handleCreate() {
|
||||
setLoading(true);
|
||||
try {
|
||||
const kf = generateKeyFile();
|
||||
await saveKeyFile(kf);
|
||||
setKeyFile(kf);
|
||||
router.replace('/(auth)/created' as never);
|
||||
} catch (e: any) {
|
||||
Alert.alert('Error', e?.message ?? 'Unknown error');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: '#000000', paddingTop: insets.top }}>
|
||||
<Header
|
||||
title="Create account"
|
||||
left={<IconButton icon="chevron-back" size={36} onPress={() => router.back()} />}
|
||||
/>
|
||||
<ScrollView contentContainerStyle={{ padding: 14, paddingBottom: 40 }}>
|
||||
<Text style={{ color: '#ffffff', fontSize: 17, fontWeight: '700', marginBottom: 4 }}>
|
||||
A new identity is created locally
|
||||
</Text>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 13, lineHeight: 19, marginBottom: 18 }}>
|
||||
Your private key never leaves this device. The app encrypts it in the
|
||||
platform secure store.
|
||||
</Text>
|
||||
|
||||
<View
|
||||
style={{
|
||||
borderRadius: 14,
|
||||
backgroundColor: '#0a0a0a',
|
||||
borderWidth: 1, borderColor: '#1f1f1f',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<InfoRow icon="key-outline" label="Ed25519 signing key" desc="Your on-chain address and tx signer" first />
|
||||
<InfoRow icon="lock-closed-outline" label="X25519 encryption key" desc="End-to-end encryption for messages" />
|
||||
<InfoRow icon="phone-portrait-outline" label="Stored on device" desc="Encrypted in SecureStore / Keystore" />
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={{
|
||||
marginTop: 16,
|
||||
padding: 12,
|
||||
borderRadius: 12,
|
||||
backgroundColor: 'rgba(240,179,90,0.08)',
|
||||
borderWidth: 1, borderColor: 'rgba(240,179,90,0.25)',
|
||||
}}
|
||||
>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 4 }}>
|
||||
<Ionicons name="warning-outline" size={14} color="#f0b35a" style={{ marginRight: 6 }} />
|
||||
<Text style={{ color: '#f0b35a', fontSize: 13, fontWeight: '700' }}>Important</Text>
|
||||
</View>
|
||||
<Text style={{ color: '#d0a26a', fontSize: 12, lineHeight: 17 }}>
|
||||
Export and backup your key file right after creation. If you lose
|
||||
it there is no recovery — blockchain has no password reset.
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<Pressable
|
||||
onPress={handleCreate}
|
||||
disabled={loading}
|
||||
style={({ pressed }) => ({
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
paddingVertical: 13, borderRadius: 999, marginTop: 20,
|
||||
backgroundColor: loading ? '#1a1a1a' : pressed ? '#1a8cd8' : '#1d9bf0',
|
||||
})}
|
||||
>
|
||||
{loading ? (
|
||||
<ActivityIndicator color="#ffffff" size="small" />
|
||||
) : (
|
||||
<Text style={{ color: '#ffffff', fontWeight: '700', fontSize: 15 }}>
|
||||
Generate keys & continue
|
||||
</Text>
|
||||
)}
|
||||
</Pressable>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function InfoRow({
|
||||
icon, label, desc, first,
|
||||
}: {
|
||||
icon: React.ComponentProps<typeof Ionicons>['name'];
|
||||
label: string;
|
||||
desc: string;
|
||||
first?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
padding: 14,
|
||||
gap: 12,
|
||||
borderTopWidth: first ? 0 : 1,
|
||||
borderTopColor: '#1f1f1f',
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
width: 32, height: 32, borderRadius: 8,
|
||||
backgroundColor: '#111111',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Ionicons name={icon} size={16} color="#ffffff" />
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={{ color: '#ffffff', fontSize: 14, fontWeight: '600' }}>{label}</Text>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 12, marginTop: 2 }}>{desc}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
196
client-app/app/(auth)/created.tsx
Normal file
196
client-app/app/(auth)/created.tsx
Normal file
@@ -0,0 +1,196 @@
|
||||
/**
|
||||
* Account Created confirmation screen — dark minimalist.
|
||||
* Показывает адрес + x25519, кнопки copy и export (share) key.json.
|
||||
*/
|
||||
import React, { useState } from 'react';
|
||||
import { View, Text, ScrollView, Alert, Pressable, Share } from 'react-native';
|
||||
import { router } from 'expo-router';
|
||||
import * as Clipboard from 'expo-clipboard';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { useStore } from '@/lib/store';
|
||||
|
||||
import { Header } from '@/components/Header';
|
||||
|
||||
export default function AccountCreatedScreen() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const keyFile = useStore(s => s.keyFile);
|
||||
const [copied, setCopied] = useState<string | null>(null);
|
||||
|
||||
if (!keyFile) {
|
||||
router.replace('/');
|
||||
return null;
|
||||
}
|
||||
|
||||
async function copy(value: string, label: string) {
|
||||
await Clipboard.setStringAsync(value);
|
||||
setCopied(label);
|
||||
setTimeout(() => setCopied(null), 1800);
|
||||
}
|
||||
|
||||
async function exportKey() {
|
||||
try {
|
||||
const json = JSON.stringify(keyFile, null, 2);
|
||||
// Используем плоский Share API — без записи во временный файл.
|
||||
// Получатель (mail, notes, etc.) получит текст целиком; юзер сам
|
||||
// сохраняет как .json если нужно.
|
||||
await Share.share({
|
||||
message: json,
|
||||
title: 'DChain key file',
|
||||
});
|
||||
} catch (e: any) {
|
||||
Alert.alert('Export failed', e?.message ?? 'Unknown error');
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: '#000000', paddingTop: insets.top }}>
|
||||
<Header title="Account created" />
|
||||
<ScrollView contentContainerStyle={{ padding: 14, paddingBottom: 40 }}>
|
||||
{/* Success badge */}
|
||||
<View style={{ alignItems: 'center', marginTop: 10, marginBottom: 18 }}>
|
||||
<View
|
||||
style={{
|
||||
width: 64, height: 64, borderRadius: 32,
|
||||
backgroundColor: 'rgba(59,165,93,0.15)',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
<Ionicons name="checkmark" size={32} color="#3ba55d" />
|
||||
</View>
|
||||
<Text style={{ color: '#ffffff', fontSize: 20, fontWeight: '800' }}>
|
||||
Welcome aboard
|
||||
</Text>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 13, marginTop: 6, textAlign: 'center' }}>
|
||||
Keys have been generated and stored securely.
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Address */}
|
||||
<KeyCard
|
||||
title="Your address (Ed25519)"
|
||||
value={keyFile.pub_key}
|
||||
copied={copied === 'address'}
|
||||
onCopy={() => copy(keyFile.pub_key, 'address')}
|
||||
/>
|
||||
|
||||
{/* X25519 */}
|
||||
<View style={{ height: 10 }} />
|
||||
<KeyCard
|
||||
title="Encryption key (X25519)"
|
||||
value={keyFile.x25519_pub}
|
||||
copied={copied === 'x25519'}
|
||||
onCopy={() => copy(keyFile.x25519_pub, 'x25519')}
|
||||
/>
|
||||
|
||||
{/* Backup */}
|
||||
<View
|
||||
style={{
|
||||
marginTop: 16,
|
||||
padding: 14,
|
||||
borderRadius: 14,
|
||||
backgroundColor: 'rgba(240,179,90,0.08)',
|
||||
borderWidth: 1, borderColor: 'rgba(240,179,90,0.25)',
|
||||
}}
|
||||
>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 6 }}>
|
||||
<Ionicons name="lock-closed-outline" size={14} color="#f0b35a" />
|
||||
<Text style={{ color: '#f0b35a', fontSize: 13, fontWeight: '700', marginLeft: 6 }}>
|
||||
Backup your key file
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={{ color: '#d0a26a', fontSize: 12, lineHeight: 17, marginBottom: 10 }}>
|
||||
Export it now and store somewhere safe — password managers, cold
|
||||
storage, printed paper. If you lose it, you lose the account.
|
||||
</Text>
|
||||
<Pressable
|
||||
onPress={exportKey}
|
||||
style={({ pressed }) => ({
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
paddingVertical: 10, borderRadius: 999,
|
||||
backgroundColor: pressed ? '#2a1f0f' : '#1a1409',
|
||||
borderWidth: 1, borderColor: 'rgba(240,179,90,0.35)',
|
||||
})}
|
||||
>
|
||||
<Text style={{ color: '#f0b35a', fontWeight: '700', fontSize: 14 }}>
|
||||
Export key.json
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
{/* Continue */}
|
||||
<Pressable
|
||||
onPress={() => router.replace('/(app)/chats' as never)}
|
||||
style={({ pressed }) => ({
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
paddingVertical: 14, borderRadius: 999, marginTop: 20,
|
||||
backgroundColor: pressed ? '#1a8cd8' : '#1d9bf0',
|
||||
})}
|
||||
>
|
||||
<Text style={{ color: '#ffffff', fontWeight: '700', fontSize: 15 }}>
|
||||
Open messenger
|
||||
</Text>
|
||||
</Pressable>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function KeyCard({
|
||||
title, value, copied, onCopy,
|
||||
}: {
|
||||
title: string;
|
||||
value: string;
|
||||
copied: boolean;
|
||||
onCopy: () => void;
|
||||
}) {
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
borderRadius: 14,
|
||||
backgroundColor: '#0a0a0a',
|
||||
borderWidth: 1, borderColor: '#1f1f1f',
|
||||
padding: 14,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: '#5a5a5a', fontSize: 11, fontWeight: '700',
|
||||
textTransform: 'uppercase', letterSpacing: 1.2, marginBottom: 8,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
<Text style={{ color: '#ffffff', fontSize: 12, fontFamily: 'monospace', lineHeight: 18 }}>
|
||||
{value}
|
||||
</Text>
|
||||
<Pressable
|
||||
onPress={onCopy}
|
||||
style={({ pressed }) => ({
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 9, borderRadius: 999,
|
||||
marginTop: 10,
|
||||
backgroundColor: pressed ? '#1a1a1a' : '#111111',
|
||||
borderWidth: 1, borderColor: '#1f1f1f',
|
||||
})}
|
||||
>
|
||||
<Ionicons
|
||||
name={copied ? 'checkmark' : 'copy-outline'}
|
||||
size={14}
|
||||
color={copied ? '#3ba55d' : '#ffffff'}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
color: copied ? '#3ba55d' : '#ffffff',
|
||||
fontSize: 13, fontWeight: '600', marginLeft: 6,
|
||||
}}
|
||||
>
|
||||
{copied ? 'Copied' : 'Copy'}
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
230
client-app/app/(auth)/import.tsx
Normal file
230
client-app/app/(auth)/import.tsx
Normal file
@@ -0,0 +1,230 @@
|
||||
/**
|
||||
* Import existing key — dark minimalist.
|
||||
* Два пути:
|
||||
* 1. Paste JSON напрямую в textarea.
|
||||
* 2. Pick файл .json через DocumentPicker.
|
||||
*/
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
View, Text, ScrollView, TextInput, Alert, Pressable, ActivityIndicator,
|
||||
} from 'react-native';
|
||||
import { router } from 'expo-router';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import * as DocumentPicker from 'expo-document-picker';
|
||||
import * as Clipboard from 'expo-clipboard';
|
||||
import { saveKeyFile } from '@/lib/storage';
|
||||
import { useStore } from '@/lib/store';
|
||||
import type { KeyFile } from '@/lib/types';
|
||||
|
||||
import { Header } from '@/components/Header';
|
||||
import { IconButton } from '@/components/IconButton';
|
||||
|
||||
type Tab = 'paste' | 'file';
|
||||
|
||||
const REQUIRED_FIELDS: (keyof KeyFile)[] = ['pub_key', 'priv_key', 'x25519_pub', 'x25519_priv'];
|
||||
|
||||
function validateKeyFile(raw: string): KeyFile {
|
||||
let parsed: any;
|
||||
try { parsed = JSON.parse(raw.trim()); }
|
||||
catch { throw new Error('Invalid JSON — check that you copied the full key file.'); }
|
||||
for (const field of REQUIRED_FIELDS) {
|
||||
if (!parsed[field] || typeof parsed[field] !== 'string') {
|
||||
throw new Error(`Missing or invalid field: "${field}"`);
|
||||
}
|
||||
if (!/^[0-9a-f]+$/i.test(parsed[field])) {
|
||||
throw new Error(`Field "${field}" must be a hex string.`);
|
||||
}
|
||||
}
|
||||
return parsed as KeyFile;
|
||||
}
|
||||
|
||||
export default function ImportKeyScreen() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const setKeyFile = useStore(s => s.setKeyFile);
|
||||
|
||||
const [tab, setTab] = useState<Tab>('paste');
|
||||
const [jsonText, setJsonText] = useState('');
|
||||
const [fileName, setFileName] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
async function applyKey(kf: KeyFile) {
|
||||
setLoading(true); setError(null);
|
||||
try {
|
||||
await saveKeyFile(kf);
|
||||
setKeyFile(kf);
|
||||
router.replace('/(app)/chats' as never);
|
||||
} catch (e: any) {
|
||||
setError(e?.message ?? 'Import failed');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handlePasteImport() {
|
||||
setError(null);
|
||||
const text = jsonText.trim();
|
||||
if (!text) {
|
||||
const clip = await Clipboard.getStringAsync();
|
||||
if (clip) setJsonText(clip);
|
||||
return;
|
||||
}
|
||||
try { await applyKey(validateKeyFile(text)); }
|
||||
catch (e: any) { setError(e?.message ?? 'Import failed'); }
|
||||
}
|
||||
|
||||
async function pickFile() {
|
||||
setError(null);
|
||||
try {
|
||||
const result = await DocumentPicker.getDocumentAsync({
|
||||
type: ['application/json', 'text/plain', '*/*'],
|
||||
copyToCacheDirectory: true,
|
||||
});
|
||||
if (result.canceled) return;
|
||||
const asset = result.assets[0];
|
||||
setFileName(asset.name);
|
||||
const response = await fetch(asset.uri);
|
||||
const raw = await response.text();
|
||||
await applyKey(validateKeyFile(raw));
|
||||
} catch (e: any) {
|
||||
setError(e?.message ?? 'Import failed');
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: '#000000', paddingTop: insets.top }}>
|
||||
<Header
|
||||
title="Import key"
|
||||
left={<IconButton icon="chevron-back" size={36} onPress={() => router.back()} />}
|
||||
/>
|
||||
<ScrollView
|
||||
contentContainerStyle={{ padding: 14, paddingBottom: 40 }}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
keyboardDismissMode="on-drag"
|
||||
>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 13, lineHeight: 19, marginBottom: 14 }}>
|
||||
Restore your account from a previously exported{' '}
|
||||
<Text style={{ color: '#ffffff', fontWeight: '600' }}>dchain_key.json</Text>.
|
||||
</Text>
|
||||
|
||||
{/* Tabs */}
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
padding: 4,
|
||||
borderRadius: 999,
|
||||
backgroundColor: '#0a0a0a',
|
||||
borderWidth: 1, borderColor: '#1f1f1f',
|
||||
marginBottom: 14,
|
||||
}}
|
||||
>
|
||||
{(['paste', 'file'] as Tab[]).map(t => (
|
||||
<Pressable
|
||||
key={t}
|
||||
onPress={() => setTab(t)}
|
||||
style={{
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
paddingVertical: 8,
|
||||
borderRadius: 999,
|
||||
backgroundColor: tab === t ? '#1d9bf0' : 'transparent',
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: tab === t ? '#ffffff' : '#8b8b8b',
|
||||
fontWeight: '700', fontSize: 13,
|
||||
}}
|
||||
>
|
||||
{t === 'paste' ? 'Paste JSON' : 'Pick file'}
|
||||
</Text>
|
||||
</Pressable>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{tab === 'paste' ? (
|
||||
<>
|
||||
<TextInput
|
||||
value={jsonText}
|
||||
onChangeText={setJsonText}
|
||||
placeholder='{"pub_key":"…","priv_key":"…","x25519_pub":"…","x25519_priv":"…"}'
|
||||
placeholderTextColor="#5a5a5a"
|
||||
multiline
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
style={{
|
||||
color: '#ffffff',
|
||||
fontSize: 12,
|
||||
fontFamily: 'monospace',
|
||||
backgroundColor: '#0a0a0a',
|
||||
borderRadius: 12,
|
||||
padding: 12,
|
||||
minHeight: 180,
|
||||
textAlignVertical: 'top',
|
||||
borderWidth: 1, borderColor: '#1f1f1f',
|
||||
}}
|
||||
/>
|
||||
<Pressable
|
||||
onPress={handlePasteImport}
|
||||
disabled={loading}
|
||||
style={({ pressed }) => ({
|
||||
flexDirection: 'row', alignItems: 'center', justifyContent: 'center',
|
||||
paddingVertical: 12, borderRadius: 999, marginTop: 12,
|
||||
backgroundColor: loading ? '#1a1a1a' : pressed ? '#1a8cd8' : '#1d9bf0',
|
||||
})}
|
||||
>
|
||||
{loading ? (
|
||||
<ActivityIndicator color="#ffffff" size="small" />
|
||||
) : (
|
||||
<Text style={{ color: '#ffffff', fontWeight: '700', fontSize: 14 }}>
|
||||
{jsonText.trim() ? 'Import key' : 'Paste from clipboard'}
|
||||
</Text>
|
||||
)}
|
||||
</Pressable>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Pressable
|
||||
onPress={pickFile}
|
||||
disabled={loading}
|
||||
style={({ pressed }) => ({
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
paddingVertical: 40, borderRadius: 14,
|
||||
backgroundColor: pressed ? '#111111' : '#0a0a0a',
|
||||
borderWidth: 1, borderStyle: 'dashed', borderColor: '#1f1f1f',
|
||||
})}
|
||||
>
|
||||
<Ionicons name="document-outline" size={32} color="#8b8b8b" />
|
||||
<Text style={{ color: '#ffffff', fontSize: 14, fontWeight: '700', marginTop: 10 }}>
|
||||
{fileName ?? 'Tap to pick key.json'}
|
||||
</Text>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 12, marginTop: 4 }}>
|
||||
Will auto-import on selection
|
||||
</Text>
|
||||
</Pressable>
|
||||
{loading && (
|
||||
<View style={{ alignItems: 'center', marginTop: 12 }}>
|
||||
<ActivityIndicator color="#1d9bf0" />
|
||||
</View>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<View
|
||||
style={{
|
||||
marginTop: 14,
|
||||
padding: 12,
|
||||
borderRadius: 10,
|
||||
backgroundColor: 'rgba(244,33,46,0.08)',
|
||||
borderWidth: 1, borderColor: 'rgba(244,33,46,0.25)',
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: '#f4212e', fontSize: 13 }}>{error}</Text>
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
59
client-app/app/_layout.tsx
Normal file
59
client-app/app/_layout.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import '../global.css';
|
||||
|
||||
import React, { useEffect } from 'react';
|
||||
import { Stack } from 'expo-router';
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import { View } from 'react-native';
|
||||
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
||||
// GestureHandlerRootView обязателен для работы gesture-handler'а
|
||||
// на всех страницах: Pan/LongPress/Tap жестах внутри чатов.
|
||||
import { GestureHandlerRootView } from 'react-native-gesture-handler';
|
||||
import { loadKeyFile, loadSettings } from '@/lib/storage';
|
||||
import { setNodeUrl } from '@/lib/api';
|
||||
import { useStore } from '@/lib/store';
|
||||
|
||||
export default function RootLayout() {
|
||||
const setKeyFile = useStore(s => s.setKeyFile);
|
||||
const setSettings = useStore(s => s.setSettings);
|
||||
const booted = useStore(s => s.booted);
|
||||
const setBooted = useStore(s => s.setBooted);
|
||||
|
||||
// Bootstrap: load key + settings from storage синхронно до первого
|
||||
// render'а экранов. Пока `booted=false` мы рендерим чёрный экран —
|
||||
// это убирает "мелькание" welcome'а при старте, когда ключи уже есть
|
||||
// в AsyncStorage, но ещё не успели загрузиться в store.
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
const [kf, settings] = await Promise.all([loadKeyFile(), loadSettings()]);
|
||||
if (kf) setKeyFile(kf);
|
||||
setSettings(settings);
|
||||
setNodeUrl(settings.nodeUrl);
|
||||
} finally {
|
||||
setBooted(true);
|
||||
}
|
||||
})();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<GestureHandlerRootView style={{ flex: 1 }}>
|
||||
<SafeAreaProvider>
|
||||
<View className="flex-1 bg-background">
|
||||
<StatusBar style="light" />
|
||||
{booted ? (
|
||||
<Stack
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
contentStyle: { backgroundColor: '#000000' },
|
||||
animation: 'slide_from_right',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
// Пустой чёрный экран пока bootstrap идёт — без flicker'а.
|
||||
<View style={{ flex: 1, backgroundColor: '#000000' }} />
|
||||
)}
|
||||
</View>
|
||||
</SafeAreaProvider>
|
||||
</GestureHandlerRootView>
|
||||
);
|
||||
}
|
||||
519
client-app/app/index.tsx
Normal file
519
client-app/app/index.tsx
Normal file
@@ -0,0 +1,519 @@
|
||||
/**
|
||||
* Onboarding — 3-слайдовый pager перед auth-экранами.
|
||||
*
|
||||
* Slide 1 — "Why DChain": value-proposition, 3 пункта с иконками.
|
||||
* Slide 2 — "How it works": выбор релей-ноды (public paid vs свой node),
|
||||
* ссылка на Gitea, + node URL input с live ping.
|
||||
* Slide 3 — "Your keys": кнопки Create / Import.
|
||||
*
|
||||
* Если `keyFile` в store уже есть (bootstrap из RootLayout загрузил) —
|
||||
* делаем <Redirect /> в (app), чтобы пользователь не видел вообще никакого
|
||||
* мелькания onboarding'а. До загрузки `booted === false` root показывает
|
||||
* чёрный экран.
|
||||
*/
|
||||
import React, { useEffect, useState, useCallback, useRef } from 'react';
|
||||
import {
|
||||
View, Text, TextInput, Pressable, ScrollView,
|
||||
Alert, ActivityIndicator, Linking, Dimensions,
|
||||
useWindowDimensions,
|
||||
} from 'react-native';
|
||||
import { router, Redirect } from 'expo-router';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { CameraView, useCameraPermissions } from 'expo-camera';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { useStore } from '@/lib/store';
|
||||
import { saveSettings } from '@/lib/storage';
|
||||
import { setNodeUrl, getNetStats } from '@/lib/api';
|
||||
|
||||
const { width: SCREEN_W } = Dimensions.get('window');
|
||||
const GITEA_URL = 'https://git.vsecoder.vodka/vsecoder/dchain';
|
||||
|
||||
export default function WelcomeScreen() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const { height: SCREEN_H } = useWindowDimensions();
|
||||
const keyFile = useStore(s => s.keyFile);
|
||||
const booted = useStore(s => s.booted);
|
||||
const settings = useStore(s => s.settings);
|
||||
const setSettings = useStore(s => s.setSettings);
|
||||
|
||||
const scrollRef = useRef<ScrollView>(null);
|
||||
const [page, setPage] = useState(0);
|
||||
const [nodeInput, setNodeInput] = useState('');
|
||||
const [scanning, setScanning] = useState(false);
|
||||
const [checking, setChecking] = useState(false);
|
||||
const [nodeOk, setNodeOk] = useState<boolean | null>(null);
|
||||
|
||||
const [permission, requestPermission] = useCameraPermissions();
|
||||
|
||||
useEffect(() => { setNodeInput(settings.nodeUrl); }, [settings.nodeUrl]);
|
||||
|
||||
// ВСЕ hooks должны быть объявлены ДО любого early-return, иначе
|
||||
// React на следующем render'е посчитает разное число hooks и выкинет
|
||||
// "Rendered fewer hooks than expected". useCallback ниже — тоже hook.
|
||||
const applyNode = useCallback(async (url: string) => {
|
||||
const clean = url.trim().replace(/\/$/, '');
|
||||
if (!clean) return;
|
||||
setChecking(true);
|
||||
setNodeOk(null);
|
||||
setNodeUrl(clean);
|
||||
try {
|
||||
await getNetStats();
|
||||
setNodeOk(true);
|
||||
const next = { ...settings, nodeUrl: clean };
|
||||
setSettings(next);
|
||||
await saveSettings(next);
|
||||
} catch {
|
||||
setNodeOk(false);
|
||||
} finally {
|
||||
setChecking(false);
|
||||
}
|
||||
}, [settings, setSettings]);
|
||||
|
||||
const onQrScanned = useCallback(({ data }: { data: string }) => {
|
||||
setScanning(false);
|
||||
let url = data.trim();
|
||||
try { const p = JSON.parse(url); if (p.nodeUrl) url = p.nodeUrl; } catch {}
|
||||
setNodeInput(url);
|
||||
applyNode(url);
|
||||
}, [applyNode]);
|
||||
|
||||
// Bootstrap ещё не закончился — ничего не рендерим, RootLayout покажет
|
||||
// чёрный экран (single source of truth для splash-state'а).
|
||||
if (!booted) return null;
|
||||
|
||||
// Ключи уже загружены — сразу в main app, без мелькания onboarding'а.
|
||||
if (keyFile) return <Redirect href={'/(app)/chats' as never} />;
|
||||
|
||||
const openScanner = async () => {
|
||||
if (!permission?.granted) {
|
||||
const { granted } = await requestPermission();
|
||||
if (!granted) {
|
||||
Alert.alert('Camera permission required', 'Allow camera access to scan QR codes.');
|
||||
return;
|
||||
}
|
||||
}
|
||||
setScanning(true);
|
||||
};
|
||||
|
||||
const goToPage = (p: number) => {
|
||||
scrollRef.current?.scrollTo({ x: p * SCREEN_W, animated: true });
|
||||
setPage(p);
|
||||
};
|
||||
|
||||
if (scanning) {
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: '#000' }}>
|
||||
<CameraView
|
||||
style={{ flex: 1 }}
|
||||
facing="back"
|
||||
barcodeScannerSettings={{ barcodeTypes: ['qr'] }}
|
||||
onBarcodeScanned={onQrScanned}
|
||||
/>
|
||||
<View style={{
|
||||
position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
}}>
|
||||
<View style={{ width: 240, height: 240, borderWidth: 2, borderColor: '#fff', borderRadius: 16 }} />
|
||||
<Text style={{ color: '#fff', marginTop: 20, opacity: 0.8 }}>
|
||||
Point at a DChain node QR code
|
||||
</Text>
|
||||
</View>
|
||||
<Pressable
|
||||
onPress={() => setScanning(false)}
|
||||
style={{
|
||||
position: 'absolute', top: 56, left: 16,
|
||||
backgroundColor: 'rgba(0,0,0,0.6)', borderRadius: 20,
|
||||
paddingHorizontal: 16, paddingVertical: 8,
|
||||
}}
|
||||
>
|
||||
<Text style={{ color: '#fff', fontSize: 16 }}>✕ Cancel</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const statusColor = nodeOk === true ? '#3ba55d' : nodeOk === false ? '#f4212e' : '#8b8b8b';
|
||||
|
||||
// Высота footer'а (dots + inset) — резервируем под неё снизу каждого
|
||||
// слайда, чтобы CTA-кнопки оказывались прямо над индикатором страниц,
|
||||
// а не залезали под него.
|
||||
const FOOTER_H = Math.max(insets.bottom, 20) + 8 + 12 + 7; // = padBottom + padTop + dot
|
||||
const PAGE_H = SCREEN_H - FOOTER_H;
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: '#000000' }}>
|
||||
<ScrollView
|
||||
ref={scrollRef}
|
||||
horizontal
|
||||
pagingEnabled
|
||||
showsHorizontalScrollIndicator={false}
|
||||
onMomentumScrollEnd={e => {
|
||||
const p = Math.round(e.nativeEvent.contentOffset.x / SCREEN_W);
|
||||
setPage(p);
|
||||
}}
|
||||
style={{ flex: 1 }}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
>
|
||||
{/* ───────── Slide 1: Why DChain ───────── */}
|
||||
<View style={{ width: SCREEN_W, height: PAGE_H }}>
|
||||
<ScrollView
|
||||
style={{ flex: 1 }}
|
||||
contentContainerStyle={{
|
||||
paddingHorizontal: 28,
|
||||
paddingTop: insets.top + 60,
|
||||
paddingBottom: 16,
|
||||
}}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<View style={{ alignItems: 'center', marginBottom: 36 }}>
|
||||
<View
|
||||
style={{
|
||||
width: 88, height: 88, borderRadius: 24,
|
||||
backgroundColor: '#1d9bf0',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
marginBottom: 14,
|
||||
}}
|
||||
>
|
||||
<Ionicons name="chatbubbles" size={44} color="#ffffff" />
|
||||
</View>
|
||||
<Text style={{ color: '#ffffff', fontSize: 30, fontWeight: '800', letterSpacing: -0.8 }}>
|
||||
DChain
|
||||
</Text>
|
||||
<Text style={{ color: '#8b8b8b', textAlign: 'center', fontSize: 14, lineHeight: 20, marginTop: 6 }}>
|
||||
A messenger that belongs to you.
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<FeatureRow
|
||||
icon="lock-closed"
|
||||
title="End-to-end encryption"
|
||||
text="X25519 + NaCl на каждом сообщении. Даже релей-нода не может прочитать переписку."
|
||||
/>
|
||||
<FeatureRow
|
||||
icon="key"
|
||||
title="Твои ключи — твой аккаунт"
|
||||
text="Без телефона, email и серверных паролей. Ключи никогда не покидают устройство."
|
||||
/>
|
||||
<FeatureRow
|
||||
icon="git-network"
|
||||
title="Decentralised"
|
||||
text="Любой может поднять свою ноду. Нет единой точки отказа и цензуры."
|
||||
/>
|
||||
</ScrollView>
|
||||
|
||||
{/* CTA — прижата к правому нижнему краю. */}
|
||||
<View style={{
|
||||
flexDirection: 'row', justifyContent: 'flex-end',
|
||||
paddingHorizontal: 24, paddingBottom: 8,
|
||||
}}>
|
||||
<CTAPrimary label="Продолжить" onPress={() => goToPage(1)} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* ───────── Slide 2: How it works ───────── */}
|
||||
<View style={{ width: SCREEN_W, height: PAGE_H }}>
|
||||
<ScrollView
|
||||
style={{ flex: 1 }}
|
||||
contentContainerStyle={{
|
||||
paddingHorizontal: 28,
|
||||
paddingTop: insets.top + 40,
|
||||
paddingBottom: 16,
|
||||
}}
|
||||
showsVerticalScrollIndicator={false}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
>
|
||||
<Text style={{ color: '#ffffff', fontSize: 24, fontWeight: '800', letterSpacing: -0.5 }}>
|
||||
Как это работает
|
||||
</Text>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 14, lineHeight: 20, marginTop: 8, marginBottom: 22 }}>
|
||||
Сообщения проходят через релей-ноду в зашифрованном виде.
|
||||
Выбери публичную или подключи свою.
|
||||
</Text>
|
||||
|
||||
<OptionCard
|
||||
icon="globe"
|
||||
title="Публичная нода"
|
||||
text="Удобно и быстро — нода хостится комьюнити, небольшая комиссия за каждое отправленное сообщение."
|
||||
/>
|
||||
<OptionCard
|
||||
icon="hardware-chip"
|
||||
title="Своя нода"
|
||||
text="Максимальный контроль. Исходники открыты — подними на своём сервере за 5 минут."
|
||||
/>
|
||||
|
||||
<Text style={{
|
||||
color: '#5a5a5a', fontSize: 11, fontWeight: '700',
|
||||
textTransform: 'uppercase', letterSpacing: 1.2, marginTop: 20, marginBottom: 8,
|
||||
}}>
|
||||
Node URL
|
||||
</Text>
|
||||
<View style={{ flexDirection: 'row', gap: 8 }}>
|
||||
<View
|
||||
style={{
|
||||
flex: 1, flexDirection: 'row', alignItems: 'center',
|
||||
backgroundColor: '#0a0a0a', borderWidth: 1, borderColor: '#1f1f1f',
|
||||
borderRadius: 12, paddingHorizontal: 12, gap: 8,
|
||||
}}
|
||||
>
|
||||
<View style={{ width: 7, height: 7, borderRadius: 3.5, backgroundColor: statusColor }} />
|
||||
<TextInput
|
||||
value={nodeInput}
|
||||
onChangeText={t => { setNodeInput(t); setNodeOk(null); }}
|
||||
onEndEditing={() => applyNode(nodeInput)}
|
||||
onSubmitEditing={() => applyNode(nodeInput)}
|
||||
placeholder="http://192.168.1.10:8080"
|
||||
placeholderTextColor="#5a5a5a"
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
keyboardType="url"
|
||||
returnKeyType="done"
|
||||
style={{ flex: 1, color: '#ffffff', fontSize: 14, paddingVertical: 12 }}
|
||||
/>
|
||||
{checking
|
||||
? <ActivityIndicator size="small" color="#8b8b8b" />
|
||||
: nodeOk === true
|
||||
? <Ionicons name="checkmark" size={16} color="#3ba55d" />
|
||||
: nodeOk === false
|
||||
? <Ionicons name="close" size={16} color="#f4212e" />
|
||||
: null}
|
||||
</View>
|
||||
<Pressable
|
||||
onPress={openScanner}
|
||||
style={({ pressed }) => ({
|
||||
width: 48, alignItems: 'center', justifyContent: 'center',
|
||||
backgroundColor: pressed ? '#1a1a1a' : '#0a0a0a',
|
||||
borderWidth: 1, borderColor: '#1f1f1f',
|
||||
borderRadius: 12,
|
||||
})}
|
||||
>
|
||||
<Ionicons name="qr-code-outline" size={22} color="#ffffff" />
|
||||
</Pressable>
|
||||
</View>
|
||||
{nodeOk === false && (
|
||||
<Text style={{ color: '#f4212e', fontSize: 12, marginTop: 6 }}>
|
||||
Cannot reach node — check URL and that the node is running
|
||||
</Text>
|
||||
)}
|
||||
</ScrollView>
|
||||
|
||||
{/* CTA — прижата к правому нижнему краю. */}
|
||||
<View style={{
|
||||
flexDirection: 'row', justifyContent: 'flex-end', gap: 10,
|
||||
paddingHorizontal: 24, paddingBottom: 8,
|
||||
}}>
|
||||
<CTASecondary
|
||||
label="Исходники"
|
||||
icon="logo-github"
|
||||
onPress={() => Linking.openURL(GITEA_URL).catch(() => {})}
|
||||
/>
|
||||
<CTAPrimary label="Продолжить" onPress={() => goToPage(2)} />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* ───────── Slide 3: Your keys ───────── */}
|
||||
<View style={{ width: SCREEN_W, height: PAGE_H }}>
|
||||
<ScrollView
|
||||
style={{ flex: 1 }}
|
||||
contentContainerStyle={{
|
||||
paddingHorizontal: 28,
|
||||
paddingTop: insets.top + 60,
|
||||
paddingBottom: 16,
|
||||
}}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<View style={{ alignItems: 'center', marginBottom: 36 }}>
|
||||
<View
|
||||
style={{
|
||||
width: 88, height: 88, borderRadius: 24,
|
||||
backgroundColor: '#0a0a0a',
|
||||
borderWidth: 1, borderColor: '#1f1f1f',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
marginBottom: 16,
|
||||
}}
|
||||
>
|
||||
<Ionicons name="key" size={44} color="#1d9bf0" />
|
||||
</View>
|
||||
<Text style={{ color: '#ffffff', fontSize: 24, fontWeight: '800', letterSpacing: -0.5, textAlign: 'center' }}>
|
||||
Твой аккаунт
|
||||
</Text>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 14, lineHeight: 20, marginTop: 8, textAlign: 'center', maxWidth: 280 }}>
|
||||
Создай новую пару ключей или импортируй существующую.
|
||||
Ключи хранятся только на этом устройстве.
|
||||
</Text>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
{/* CTA — прижата к правому нижнему краю. */}
|
||||
<View style={{
|
||||
flexDirection: 'row', justifyContent: 'flex-end', gap: 10,
|
||||
paddingHorizontal: 24, paddingBottom: 8,
|
||||
}}>
|
||||
<CTASecondary
|
||||
label="Импорт"
|
||||
onPress={() => router.push('/(auth)/import' as never)}
|
||||
/>
|
||||
<CTAPrimary
|
||||
label="Создать аккаунт"
|
||||
onPress={() => router.push('/(auth)/create' as never)}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
{/* Footer: dots-only pager indicator. CTA-кнопки теперь inline
|
||||
на каждом слайде, чтобы выглядели как полноценные кнопки, а не
|
||||
мелкий "Далее" в углу. */}
|
||||
<View style={{
|
||||
paddingHorizontal: 28,
|
||||
paddingBottom: Math.max(insets.bottom, 20) + 8,
|
||||
paddingTop: 12,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
gap: 6,
|
||||
}}>
|
||||
{[0, 1, 2].map(i => (
|
||||
<Pressable
|
||||
key={i}
|
||||
onPress={() => goToPage(i)}
|
||||
hitSlop={8}
|
||||
style={{
|
||||
width: page === i ? 22 : 7,
|
||||
height: 7,
|
||||
borderRadius: 3.5,
|
||||
backgroundColor: page === i ? '#1d9bf0' : '#2a2a2a',
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
// ───────── helper components ─────────
|
||||
|
||||
/**
|
||||
* Primary CTA button — синий pill. Натуральная ширина (hugs content),
|
||||
* `numberOfLines={1}` на лейбле чтобы текст не переносился. Фон
|
||||
* применяется через inner View, а не напрямую на Pressable — это
|
||||
* обходит редкие RN-баги, когда backgroundColor на Pressable не
|
||||
* рендерится пока кнопка не нажата.
|
||||
*/
|
||||
function CTAPrimary({ label, onPress }: { label: string; onPress: () => void }) {
|
||||
return (
|
||||
<Pressable onPress={onPress} style={({ pressed }) => ({ opacity: pressed ? 0.85 : 1 })}>
|
||||
<View
|
||||
style={{
|
||||
height: 46,
|
||||
paddingHorizontal: 22,
|
||||
borderRadius: 999,
|
||||
backgroundColor: '#1d9bf0',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
style={{ color: '#ffffff', fontWeight: '700', fontSize: 15 }}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
/** Secondary CTA — тёмный pill с border'ом, optional icon слева. */
|
||||
function CTASecondary({
|
||||
label, icon, onPress,
|
||||
}: {
|
||||
label: string;
|
||||
icon?: React.ComponentProps<typeof Ionicons>['name'];
|
||||
onPress: () => void;
|
||||
}) {
|
||||
return (
|
||||
<Pressable onPress={onPress} style={({ pressed }) => ({ opacity: pressed ? 0.6 : 1 })}>
|
||||
<View
|
||||
style={{
|
||||
height: 46,
|
||||
paddingHorizontal: 18,
|
||||
borderRadius: 999,
|
||||
backgroundColor: '#0a0a0a',
|
||||
borderWidth: 1, borderColor: '#1f1f1f',
|
||||
flexDirection: 'row', alignItems: 'center', justifyContent: 'center',
|
||||
gap: 6,
|
||||
}}
|
||||
>
|
||||
{icon && <Ionicons name={icon} size={15} color="#ffffff" />}
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
style={{ color: '#ffffff', fontWeight: '700', fontSize: 14 }}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
|
||||
function FeatureRow({
|
||||
icon, title, text,
|
||||
}: { icon: React.ComponentProps<typeof Ionicons>['name']; title: string; text: string }) {
|
||||
return (
|
||||
<View style={{ flexDirection: 'row', marginBottom: 20, gap: 14 }}>
|
||||
<View
|
||||
style={{
|
||||
width: 40, height: 40, borderRadius: 12,
|
||||
backgroundColor: '#0a0a0a',
|
||||
borderWidth: 1, borderColor: '#1f1f1f',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Ionicons name={icon} size={20} color="#1d9bf0" />
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={{ color: '#ffffff', fontSize: 15, fontWeight: '700', marginBottom: 3 }}>
|
||||
{title}
|
||||
</Text>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 13, lineHeight: 19 }}>
|
||||
{text}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function OptionCard({
|
||||
icon, title, text, actionLabel, onAction,
|
||||
}: {
|
||||
icon: React.ComponentProps<typeof Ionicons>['name'];
|
||||
title: string;
|
||||
text: string;
|
||||
actionLabel?: string;
|
||||
onAction?: () => void;
|
||||
}) {
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: '#0a0a0a',
|
||||
borderWidth: 1, borderColor: '#1f1f1f',
|
||||
borderRadius: 14, padding: 14, marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 10, marginBottom: 6 }}>
|
||||
<Ionicons name={icon} size={18} color="#1d9bf0" />
|
||||
<Text style={{ color: '#ffffff', fontSize: 15, fontWeight: '700' }}>
|
||||
{title}
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={{ color: '#8b8b8b', fontSize: 13, lineHeight: 19 }}>
|
||||
{text}
|
||||
</Text>
|
||||
{actionLabel && onAction && (
|
||||
<Pressable onPress={onAction} style={({ pressed }) => ({ opacity: pressed ? 0.6 : 1, marginTop: 8 })}>
|
||||
<Text style={{ color: '#1d9bf0', fontSize: 13, fontWeight: '600' }}>
|
||||
{actionLabel}
|
||||
</Text>
|
||||
</Pressable>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user