+
+ )}
+
+ {/* Content area */}
+
+ {renderContent()}
+
+
+
+ );
+ }
+
+ // API connection error
+ if (apiError && !isConnecting) {
+ return (
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+ Connection Error
++ Unable to connect to Pezkuwichain network. Please check your connection and try again. +
+ +
+ {/* Sidebar */}
+
+ {/* API connecting indicator */}
+ {!isApiReady && isConnecting && (
+
+
+ );
+}
+
+export default TelegramApp;
diff --git a/web/src/telegram/components/APK/index.tsx b/web/src/telegram/components/APK/index.tsx
new file mode 100644
index 00000000..879c851c
--- /dev/null
+++ b/web/src/telegram/components/APK/index.tsx
@@ -0,0 +1,311 @@
+import { useState } from 'react';
+import { Smartphone, Download, Clock, CheckCircle2, AlertCircle, ExternalLink, FileText, Shield } from 'lucide-react';
+import { useTelegram } from '../../hooks/useTelegram';
+import { cn } from '@/lib/utils';
+
+interface AppVersion {
+ version: string;
+ releaseDate: Date;
+ downloadUrl: string;
+ size: string;
+ changelog: string[];
+ isLatest?: boolean;
+ minAndroidVersion?: string;
+}
+
+const appVersions: AppVersion[] = [
+ {
+ version: '1.2.0',
+ releaseDate: new Date(Date.now() - 1000 * 60 * 60 * 24 * 2), // 2 days ago
+ downloadUrl: 'https://github.com/pezkuwichain/pezwallet/releases/download/v1.2.0/pezwallet-v1.2.0.apk',
+ size: '45.2 MB',
+ isLatest: true,
+ minAndroidVersion: '7.0',
+ changelog: [
+ 'New: Telegram Mini App integration',
+ 'New: Improved staking interface',
+ 'Fix: Balance refresh issues',
+ 'Fix: Transaction history loading',
+ 'Improved: Overall performance',
+ ],
+ },
+ {
+ version: '1.1.2',
+ releaseDate: new Date(Date.now() - 1000 * 60 * 60 * 24 * 14), // 14 days ago
+ downloadUrl: 'https://github.com/pezkuwichain/pezwallet/releases/download/v1.1.2/pezwallet-v1.1.2.apk',
+ size: '44.8 MB',
+ minAndroidVersion: '7.0',
+ changelog: [
+ 'Fix: Critical security update',
+ 'Fix: Wallet connection stability',
+ 'Improved: Transaction signing',
+ ],
+ },
+ {
+ version: '1.1.0',
+ releaseDate: new Date(Date.now() - 1000 * 60 * 60 * 24 * 30), // 30 days ago
+ downloadUrl: 'https://github.com/pezkuwichain/pezwallet/releases/download/v1.1.0/pezwallet-v1.1.0.apk',
+ size: '44.5 MB',
+ minAndroidVersion: '7.0',
+ changelog: [
+ 'New: Multi-language support',
+ 'New: Dark theme improvements',
+ 'New: QR code scanning',
+ 'Fix: Various bug fixes',
+ ],
+ },
+];
+
+const features = [
+ {
+ icon:
+ {/* Header */}
+
+ );
+}
+
+export default APK;
diff --git a/web/src/telegram/components/Announcements/AnnouncementCard.tsx b/web/src/telegram/components/Announcements/AnnouncementCard.tsx
new file mode 100644
index 00000000..bb38c53f
--- /dev/null
+++ b/web/src/telegram/components/Announcements/AnnouncementCard.tsx
@@ -0,0 +1,154 @@
+import { useState } from 'react';
+import { ThumbsUp, ThumbsDown, Clock, User } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useTelegram } from '../../hooks/useTelegram';
+
+export interface Announcement {
+ id: string;
+ title: string;
+ content: string;
+ author: string;
+ authorAvatar?: string;
+ createdAt: Date;
+ likes: number;
+ dislikes: number;
+ userReaction?: 'like' | 'dislike' | null;
+ isPinned?: boolean;
+ imageUrl?: string;
+}
+
+interface AnnouncementCardProps {
+ announcement: Announcement;
+ onReact: (id: string, reaction: 'like' | 'dislike') => void;
+}
+
+export function AnnouncementCard({ announcement, onReact }: AnnouncementCardProps) {
+ const { hapticImpact, isTelegram } = useTelegram();
+ const [isExpanded, setIsExpanded] = useState(false);
+
+ const handleReact = (reaction: 'like' | 'dislike') => {
+ if (isTelegram) {
+ hapticImpact('light');
+ }
+ onReact(announcement.id, reaction);
+ };
+
+ const formatDate = (date: Date) => {
+ const now = new Date();
+ const diff = now.getTime() - date.getTime();
+ const hours = Math.floor(diff / (1000 * 60 * 60));
+ const days = Math.floor(hours / 24);
+
+ if (hours < 1) return 'Just now';
+ if (hours < 24) return `${hours}h ago`;
+ if (days < 7) return `${days}d ago`;
+ return date.toLocaleDateString('tr-TR', { day: 'numeric', month: 'short' });
+ };
+
+ const truncatedContent = announcement.content.length > 200 && !isExpanded
+ ? announcement.content.slice(0, 200) + '...'
+ : announcement.content;
+
+ return (
+
+
+
+ {/* Content */}
+
+
+
+ Pezwallet APK
+
+ {/* App Banner */}
+
+
+
+
+ {/* Features */}
+
+ {/* App Icon */}
+
+
+ P
+
+
+
+ Pezwallet
++ Official wallet app for Pezkuwichain +
+ {latestVersion && ( + + )} +
+ {features.map((feature, index) => (
+
+
+ {/* Installation Guide */}
+
+
+ ))}
+
+ {feature.icon}
+
+
+
+ {feature.title}
+{feature.description}
+
+
+
+ {/* Version History */}
+
+
+
+
+ Installation Guide
+-
+
- Download the APK file +
- Open your device's Settings +
- Enable "Install from unknown sources" +
- Open the downloaded APK file +
- Follow the installation prompts +
+
+
+ {/* Footer note */}
+
+
+
+ Version History
+
+ {appVersions.map((version) => (
+
+
+
+
+ {/* Expanded content */}
+ {expandedVersion === version.version && (
+
+ ))}
+
+
+ )}
+
+
+ Changelog
+-
+ {version.changelog.map((item, idx) => (
+
- + • + {item} + + ))} +
+ Requires Android {version.minAndroidVersion} or higher
+
+ )}
+
+
+
+
+ Always verify downloads from official sources
++ +
+
+ {/* Header */}
+
+ );
+}
diff --git a/web/src/telegram/components/Announcements/index.tsx b/web/src/telegram/components/Announcements/index.tsx
new file mode 100644
index 00000000..dd391615
--- /dev/null
+++ b/web/src/telegram/components/Announcements/index.tsx
@@ -0,0 +1,114 @@
+import { useState, useEffect } from 'react';
+import { Megaphone, RefreshCw } from 'lucide-react';
+import { AnnouncementCard, Announcement } from './AnnouncementCard';
+import { useTelegram } from '../../hooks/useTelegram';
+
+// Mock data - will be replaced with API calls
+const mockAnnouncements: Announcement[] = [
+ {
+ id: '1',
+ title: 'Pezkuwichain Mainnet Launch!',
+ content: 'We are excited to announce that Pezkuwichain mainnet is now live! This marks a significant milestone in our journey towards building a decentralized digital state for the Kurdish people.\n\nKey features:\n- Fast transaction finality (6 seconds)\n- Low gas fees\n- Native staking support\n- Democratic governance\n\nStart exploring at app.pezkuwichain.io',
+ author: 'Pezkuwi Team',
+ createdAt: new Date(Date.now() - 1000 * 60 * 60 * 2), // 2 hours ago
+ likes: 142,
+ dislikes: 3,
+ isPinned: true,
+ },
+ {
+ id: '2',
+ title: 'New Referral Program',
+ content: 'Invite friends and earn rewards! For every friend who completes KYC, you will receive bonus points that contribute to your trust score.\n\nShare your referral link from the Rewards section.',
+ author: 'Pezkuwi Team',
+ createdAt: new Date(Date.now() - 1000 * 60 * 60 * 24), // 1 day ago
+ likes: 89,
+ dislikes: 5,
+ },
+ {
+ id: '3',
+ title: 'Staking Rewards Update',
+ content: 'We have updated the staking rewards mechanism. Citizens who stake HEZ will now earn PEZ tokens as rewards each epoch.\n\nMinimum stake: 10 HEZ\nEpoch duration: 7 days',
+ author: 'Pezkuwi Team',
+ createdAt: new Date(Date.now() - 1000 * 60 * 60 * 24 * 3), // 3 days ago
+ likes: 67,
+ dislikes: 2,
+ },
+];
+
+export function Announcements() {
+ const { hapticNotification } = useTelegram();
+ const [announcements, setAnnouncements] = useState
+
+
+ {/* Title */}
+
+ {/* Author avatar */}
+
+
+ {announcement.isPinned && (
+
+ Pinned
+
+ )}
+
+ {announcement.authorAvatar ? (
+ 
+ ) : (
+
+
+
+
+ {announcement.author}
+
+
+ {announcement.title}
+ + {/* Content */} ++ {truncatedContent} +
+ + {/* Show more/less button */} + {announcement.content.length > 200 && ( + + )} + + {/* Image */} + {announcement.imageUrl && ( +
+ 
+
+ )}
+
+ {/* Reactions */}
+
+
+
+
+
+
+ {/* Header */}
+
+ );
+}
+
+export default Announcements;
diff --git a/web/src/telegram/components/Forum/ThreadCard.tsx b/web/src/telegram/components/Forum/ThreadCard.tsx
new file mode 100644
index 00000000..ee205ce8
--- /dev/null
+++ b/web/src/telegram/components/Forum/ThreadCard.tsx
@@ -0,0 +1,121 @@
+import { MessageCircle, Eye, Clock, User, ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useTelegram } from '../../hooks/useTelegram';
+
+export interface ForumThread {
+ id: string;
+ title: string;
+ content: string;
+ author: string;
+ authorAddress?: string;
+ createdAt: Date;
+ replyCount: number;
+ viewCount: number;
+ lastReplyAt?: Date;
+ lastReplyAuthor?: string;
+ isPinned?: boolean;
+ tags?: string[];
+}
+
+interface ThreadCardProps {
+ thread: ForumThread;
+ onClick: () => void;
+}
+
+export function ThreadCard({ thread, onClick }: ThreadCardProps) {
+ const { hapticSelection, isTelegram } = useTelegram();
+
+ const handleClick = () => {
+ if (isTelegram) {
+ hapticSelection();
+ }
+ onClick();
+ };
+
+ const formatDate = (date: Date) => {
+ const now = new Date();
+ const diff = now.getTime() - date.getTime();
+ const hours = Math.floor(diff / (1000 * 60 * 60));
+ const days = Math.floor(hours / 24);
+
+ if (hours < 1) return 'Just now';
+ if (hours < 24) return `${hours}h ago`;
+ if (days < 7) return `${days}d ago`;
+ return date.toLocaleDateString('tr-TR', { day: 'numeric', month: 'short' });
+ };
+
+ const truncatedContent = thread.content.length > 100
+ ? thread.content.slice(0, 100) + '...'
+ : thread.content;
+
+ return (
+
+ );
+}
diff --git a/web/src/telegram/components/Forum/ThreadView.tsx b/web/src/telegram/components/Forum/ThreadView.tsx
new file mode 100644
index 00000000..1e4697a7
--- /dev/null
+++ b/web/src/telegram/components/Forum/ThreadView.tsx
@@ -0,0 +1,197 @@
+import { useState } from 'react';
+import { ArrowLeft, Send, User, Clock, ThumbsUp } from 'lucide-react';
+import { ForumThread } from './ThreadCard';
+import { useTelegram } from '../../hooks/useTelegram';
+
+export interface ForumReply {
+ id: string;
+ content: string;
+ author: string;
+ authorAddress?: string;
+ createdAt: Date;
+ likes: number;
+ userLiked?: boolean;
+}
+
+interface ThreadViewProps {
+ thread: ForumThread;
+ replies: ForumReply[];
+ onBack: () => void;
+ onReply: (content: string) => void;
+ onLikeReply: (replyId: string) => void;
+ isConnected: boolean;
+}
+
+export function ThreadView({
+ thread,
+ replies,
+ onBack,
+ onReply,
+ onLikeReply,
+ isConnected
+}: ThreadViewProps) {
+ const { hapticImpact, showBackButton, hideBackButton, isTelegram } = useTelegram();
+ const [replyContent, setReplyContent] = useState('');
+ const [isSubmitting, setIsSubmitting] = useState(false);
+
+ // Setup Telegram back button
+ useState(() => {
+ if (isTelegram) {
+ showBackButton(onBack);
+ return () => hideBackButton();
+ }
+ });
+
+ const formatDate = (date: Date) => {
+ return date.toLocaleDateString('tr-TR', {
+ day: 'numeric',
+ month: 'short',
+ year: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit'
+ });
+ };
+
+ const handleSubmitReply = async () => {
+ if (!replyContent.trim() || isSubmitting) return;
+
+ setIsSubmitting(true);
+ if (isTelegram) {
+ hapticImpact('medium');
+ }
+
+ try {
+ await onReply(replyContent);
+ setReplyContent('');
+ } finally {
+ setIsSubmitting(false);
+ }
+ };
+
+ return (
+
+
+
+ {/* Content */}
+
+
+
+ Duyurular
+
+ {announcements.length === 0 ? (
+
+
+
+ ) : (
+ announcements.map(announcement => (
+ No announcements yet
+
+ {/* Header */}
+
+ );
+}
diff --git a/web/src/telegram/components/Forum/index.tsx b/web/src/telegram/components/Forum/index.tsx
new file mode 100644
index 00000000..81d17830
--- /dev/null
+++ b/web/src/telegram/components/Forum/index.tsx
@@ -0,0 +1,225 @@
+import { useState } from 'react';
+import { MessageCircle, Plus, RefreshCw, Search } from 'lucide-react';
+import { ThreadCard, ForumThread } from './ThreadCard';
+import { ThreadView, ForumReply } from './ThreadView';
+import { useTelegram } from '../../hooks/useTelegram';
+import { usePezkuwi } from '@/contexts/PezkuwiContext';
+
+// Mock data - will be replaced with API calls
+const mockThreads: ForumThread[] = [
+ {
+ id: '1',
+ title: 'Welcome to Pezkuwi Forum!',
+ content: 'This is the official community forum for Pezkuwi citizens. Feel free to discuss anything related to our digital state, governance, development, and more.\n\nPlease be respectful and follow our community guidelines.',
+ author: 'Admin',
+ createdAt: new Date(Date.now() - 1000 * 60 * 60 * 24 * 7),
+ replyCount: 45,
+ viewCount: 1234,
+ isPinned: true,
+ tags: ['announcement', 'rules'],
+ lastReplyAt: new Date(Date.now() - 1000 * 60 * 30),
+ lastReplyAuthor: 'NewCitizen',
+ },
+ {
+ id: '2',
+ title: 'How to stake HEZ and earn rewards?',
+ content: 'Hi everyone! I just got my first HEZ tokens and want to start staking. Can someone explain the process step by step? What is the minimum amount required?',
+ author: 'CryptoNewbie',
+ createdAt: new Date(Date.now() - 1000 * 60 * 60 * 5),
+ replyCount: 12,
+ viewCount: 256,
+ tags: ['staking', 'help'],
+ lastReplyAt: new Date(Date.now() - 1000 * 60 * 60 * 2),
+ lastReplyAuthor: 'StakingPro',
+ },
+ {
+ id: '3',
+ title: 'Proposal: Add support for Kurdish language in the app',
+ content: 'As a Kurdish digital state, I think it would be great to have full Kurdish language support (Kurmanci and Sorani) in all our applications.\n\nWhat do you think?',
+ author: 'KurdishDev',
+ createdAt: new Date(Date.now() - 1000 * 60 * 60 * 24 * 2),
+ replyCount: 28,
+ viewCount: 567,
+ tags: ['proposal', 'localization'],
+ lastReplyAt: new Date(Date.now() - 1000 * 60 * 60 * 4),
+ lastReplyAuthor: 'LanguageExpert',
+ },
+ {
+ id: '4',
+ title: 'Bug report: Wallet balance not updating',
+ content: 'After making a transfer, my wallet balance doesn\'t update immediately. I have to refresh the page multiple times. Is anyone else experiencing this issue?',
+ author: 'TechUser',
+ createdAt: new Date(Date.now() - 1000 * 60 * 60 * 12),
+ replyCount: 8,
+ viewCount: 89,
+ tags: ['bug', 'wallet'],
+ lastReplyAt: new Date(Date.now() - 1000 * 60 * 60 * 6),
+ lastReplyAuthor: 'DevTeam',
+ },
+];
+
+const mockReplies: ForumReply[] = [
+ {
+ id: '1',
+ content: 'Great to be here! Looking forward to participating in the community.',
+ author: 'NewCitizen',
+ createdAt: new Date(Date.now() - 1000 * 60 * 30),
+ likes: 5,
+ },
+ {
+ id: '2',
+ content: 'Welcome! Make sure to check out the staking guide in the docs section.',
+ author: 'Helper',
+ createdAt: new Date(Date.now() - 1000 * 60 * 60),
+ likes: 12,
+ },
+];
+
+export function Forum() {
+ const { hapticNotification, showAlert } = useTelegram();
+ const { selectedAccount } = usePezkuwi();
+ const [threads, setThreads] = useState
+
+
+
+ {/* Content */}
+ {thread.title}
+
+ {/* Original post */}
+
+
+ {/* Reply input */}
+ {isConnected ? (
+
+
+
+ {/* Replies */}
+
+
+
+ {/* Tags */}
+ {thread.tags && thread.tags.length > 0 && (
+
+
+
+
+ {thread.author}
+
+
+
+ {thread.tags.map(tag => (
+
+ {tag}
+
+ ))}
+
+ )}
+
+ + {thread.content} +
+
+
+ + {replies.length} {replies.length === 1 ? 'Reply' : 'Replies'} +
+ +
+ {replies.map(reply => (
+
+
+
+ ))}
+
+ {replies.length === 0 && (
+
+
+
+
+
+
+
+
+ {reply.author}
+
+ {formatDate(reply.createdAt)}
+
+
+ {reply.content}
+
+ No replies yet. Be the first to reply!
+
+ )}
+
+
+ ) : (
+
+ setReplyContent(e.target.value)}
+ placeholder="Write a reply..."
+ className="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm placeholder-gray-500 focus:outline-none focus:border-green-500"
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault();
+ handleSubmitReply();
+ }
+ }}
+ />
+
+
+
+ Connect wallet to reply
+
+ )}
+
+ {/* Header */}
+
+ );
+}
+
+export default Forum;
diff --git a/web/src/telegram/components/Rewards/index.tsx b/web/src/telegram/components/Rewards/index.tsx
new file mode 100644
index 00000000..7f79b67d
--- /dev/null
+++ b/web/src/telegram/components/Rewards/index.tsx
@@ -0,0 +1,356 @@
+import { useState, useEffect } from 'react';
+import { Gift, Users, Trophy, Calendar, Copy, Check, Share2, Loader2, Star } from 'lucide-react';
+import { useTelegram } from '../../hooks/useTelegram';
+import { usePezkuwiApi } from '../../hooks/usePezkuwiApi';
+import { usePezkuwi } from '@/contexts/PezkuwiContext';
+import { getReferralStats, calculateReferralScore, ReferralStats } from '@shared/lib/referral';
+import { getAllScores, UserScores, getScoreRating, getScoreColor } from '@shared/lib/scores';
+import { getStakingInfo, StakingInfo } from '@shared/lib/staking';
+import { cn } from '@/lib/utils';
+
+interface DailyTask {
+ id: string;
+ title: string;
+ description: string;
+ reward: number;
+ completed: boolean;
+ progress?: number;
+ maxProgress?: number;
+}
+
+const dailyTasks: DailyTask[] = [
+ {
+ id: 'login',
+ title: 'Daily Login',
+ description: 'Open the app daily',
+ reward: 5,
+ completed: true,
+ },
+ {
+ id: 'forum',
+ title: 'Forum Activity',
+ description: 'Post or reply in forum',
+ reward: 10,
+ completed: false,
+ },
+ {
+ id: 'referral',
+ title: 'Invite a Friend',
+ description: 'Invite a new user to join',
+ reward: 50,
+ completed: false,
+ },
+];
+
+export function Rewards() {
+ const { hapticNotification, hapticImpact, showAlert, user, openTelegramLink } = useTelegram();
+ const { api, isReady: isApiReady } = usePezkuwiApi();
+ const { selectedAccount } = usePezkuwi();
+
+ const [referralStats, setReferralStats] = useState
+
+
+ {/* Search */}
+
+
+ Forum
+
+
+
+
+
+
+
+ {/* Content */}
+
+
+
+ {sortedThreads.length === 0 ? (
+ setSelectedThread(thread)}
+ />
+ ))
+ )}
+
+
+
+ ) : (
+ sortedThreads.map(thread => (
+ {searchQuery ? 'No threads found' : 'No threads yet'}
+ {!searchQuery && ( + + )} +
+
+ );
+ }
+
+ return (
+
+
+ Rewards
+
+
+ Connect your wallet to view rewards and referrals
+
+ {/* Header */}
+
+ );
+}
+
+export default Rewards;
diff --git a/web/src/telegram/components/Sidebar.tsx b/web/src/telegram/components/Sidebar.tsx
new file mode 100644
index 00000000..efb89737
--- /dev/null
+++ b/web/src/telegram/components/Sidebar.tsx
@@ -0,0 +1,124 @@
+import { cn } from '@/lib/utils';
+import { useTelegram } from '../hooks/useTelegram';
+import {
+ Megaphone,
+ MessageCircle,
+ Gift,
+ Smartphone,
+ Wallet
+} from 'lucide-react';
+
+export type Section = 'announcements' | 'forum' | 'rewards' | 'apk' | 'wallet';
+
+interface SidebarItem {
+ id: Section;
+ icon: React.ReactNode;
+ label: string;
+ emoji: string;
+}
+
+const sidebarItems: SidebarItem[] = [
+ {
+ id: 'announcements',
+ icon:
+
+
+ {/* Content */}
+ Rewards
+
+ {isLoading ? (
+
+
+
+ ) : (
+ <>
+ {/* Score Overview */}
+ {userScores && (
+
+
+ )}
+
+ {/* Referral Section */}
+
+
+
+
+
+ {getScoreRating(userScores.totalScore)}
+
+
+ {userScores.totalScore}
+
+
+
+
+ Staking:{' '}
+ {userScores.stakingScore}
+
+
+ Referral:{' '}
+ {userScores.referralScore}
+
+
+ Tiki:{' '}
+ {userScores.tikiScore}
+
+
+ Trust:{' '}
+ {userScores.trustScore}
+
+
+
+
+ {/* Epoch Rewards */}
+ {stakingInfo?.pezRewards && stakingInfo.pezRewards.hasPendingClaim && (
+
+
+
+ {referralStats && (
+
+
+ )}
+
+ {/* Referral link */}
+
+
+
+ {referralStats.referralCount}
+
+ Referrals
+
+
+
+ {referralStats.referralScore}
+
+ Score
+
+
+
+
+
+ {/* Who invited me */}
+ {referralStats?.whoInvitedMe && (
+ Your referral link
+
+
+
+ {referralLink}
+
+
+
+ Invited by:{' '}
+
+ {referralStats.whoInvitedMe.slice(0, 8)}...{referralStats.whoInvitedMe.slice(-6)}
+
+
+ )}
+
+
+ )}
+
+ {/* Daily Tasks */}
+
+
+
+
+
+
+
+ Current Epoch
+
+ #{stakingInfo.pezRewards.currentEpoch}
+
+
+
+ Claimable
+
+ {stakingInfo.pezRewards.totalClaimable} PEZ
+
+
+
+ {stakingInfo.pezRewards.claimableRewards.map(reward => (
+
+
+
+ ))}
+
+
+
+ Epoch #{reward.epoch}
+ {reward.amount} PEZ
+
+
+
+ )}
+
+
+
+
+ {dailyTasks.map(task => (
+
+
+
+ ))}
+
+
+
+
+ {task.title}
+
+ {task.completed && (
+
+ {task.description}
+
+ +{task.reward} pts
+
+
+ {/* Logo at top */}
+
+ );
+}
+
+export default Sidebar;
diff --git a/web/src/telegram/components/Wallet/index.tsx b/web/src/telegram/components/Wallet/index.tsx
new file mode 100644
index 00000000..61e860f5
--- /dev/null
+++ b/web/src/telegram/components/Wallet/index.tsx
@@ -0,0 +1,421 @@
+import { useState, useEffect } from 'react';
+import { Wallet as WalletIcon, Send, ArrowDownToLine, RefreshCw, Copy, Check, Loader2, TrendingUp, Clock, ExternalLink } from 'lucide-react';
+import { useTelegram } from '../../hooks/useTelegram';
+import { usePezkuwiApi } from '../../hooks/usePezkuwiApi';
+import { usePezkuwi } from '@/contexts/PezkuwiContext';
+import { formatBalance, CHAIN_CONFIG, formatAddress } from '@shared/lib/wallet';
+import { getStakingInfo, StakingInfo } from '@shared/lib/staking';
+import { cn } from '@/lib/utils';
+
+interface TokenBalance {
+ symbol: string;
+ name: string;
+ balance: string;
+ balanceUsd?: string;
+ icon?: string;
+ isNative?: boolean;
+}
+
+interface Transaction {
+ id: string;
+ type: 'send' | 'receive' | 'stake' | 'unstake' | 'claim';
+ amount: string;
+ symbol: string;
+ address?: string;
+ timestamp: Date;
+ status: 'pending' | 'confirmed' | 'failed';
+}
+
+// Mock recent transactions - will be replaced with actual data
+const mockTransactions: Transaction[] = [
+ {
+ id: '1',
+ type: 'receive',
+ amount: '100.00',
+ symbol: 'HEZ',
+ address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
+ timestamp: new Date(Date.now() - 1000 * 60 * 60 * 2),
+ status: 'confirmed',
+ },
+ {
+ id: '2',
+ type: 'stake',
+ amount: '50.00',
+ symbol: 'HEZ',
+ timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24),
+ status: 'confirmed',
+ },
+ {
+ id: '3',
+ type: 'claim',
+ amount: '5.25',
+ symbol: 'PEZ',
+ timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24 * 3),
+ status: 'confirmed',
+ },
+];
+
+export function Wallet() {
+ const { hapticNotification, hapticImpact, showAlert, openLink } = useTelegram();
+ const { api, isReady: isApiReady } = usePezkuwiApi();
+ const { selectedAccount, connectWallet, disconnectWallet } = usePezkuwi();
+
+ const [balances, setBalances] = useState
+
+
+ {/* Divider */}
+
+
+ {/* Navigation items */}
+
+
+ {/* Bottom section - could add settings or user avatar here */}
+
+ P
+
+
+
+
+ v1
+
+
+
+ );
+ }
+
+ return (
+
+
+ Wallet
+
+
+
+
+ Connect Your Wallet
++ Connect your Pezkuwi wallet to view balances, stake tokens, and manage your assets. +
+ +
+ {/* Header */}
+
+ );
+}
+
+export default Wallet;
diff --git a/web/src/telegram/components/index.ts b/web/src/telegram/components/index.ts
new file mode 100644
index 00000000..c520c597
--- /dev/null
+++ b/web/src/telegram/components/index.ts
@@ -0,0 +1,8 @@
+export { Sidebar } from './Sidebar';
+export type { Section } from './Sidebar';
+
+export { Announcements } from './Announcements';
+export { Forum } from './Forum';
+export { Rewards } from './Rewards';
+export { APK } from './APK';
+export { Wallet } from './Wallet';
diff --git a/web/src/telegram/hooks/index.ts b/web/src/telegram/hooks/index.ts
new file mode 100644
index 00000000..f34c40bc
--- /dev/null
+++ b/web/src/telegram/hooks/index.ts
@@ -0,0 +1,4 @@
+export { useTelegram } from './useTelegram';
+export type { TelegramUser, TelegramTheme } from './useTelegram';
+
+export { usePezkuwiApi, getApiInstance } from './usePezkuwiApi';
diff --git a/web/src/telegram/hooks/usePezkuwiApi.ts b/web/src/telegram/hooks/usePezkuwiApi.ts
new file mode 100644
index 00000000..fd772624
--- /dev/null
+++ b/web/src/telegram/hooks/usePezkuwiApi.ts
@@ -0,0 +1,159 @@
+import { useState, useEffect } from 'react';
+import { ApiPromise, WsProvider } from '@pezkuwi/api';
+
+// RPC endpoint - uses environment variable or falls back to mainnet
+const RPC_ENDPOINT = import.meta.env.VITE_WS_ENDPOINT || 'wss://rpc.pezkuwichain.io:9944';
+const FALLBACK_ENDPOINTS = [
+ RPC_ENDPOINT,
+ import.meta.env.VITE_WS_ENDPOINT_FALLBACK_1,
+ import.meta.env.VITE_WS_ENDPOINT_FALLBACK_2,
+].filter(Boolean) as string[];
+
+interface UsePezkuwiApiReturn {
+ api: ApiPromise | null;
+ isReady: boolean;
+ isConnecting: boolean;
+ error: string | null;
+ reconnect: () => Promise
+
+
+ {/* Content */}
+
+
+ Wallet
+
+
+
+
+
+ {isLoading ? (
+
+
+
+ ) : (
+ <>
+ {/* Address Card */}
+
+
+
+ {/* Balance Card */}
+
+
+
+
+ {selectedAccount?.meta?.name || 'Account'}
+
+
+
+
+
+
+ {formatAddress(address || '')}
+
+
+
+
+
+ {/* Quick Actions */}
+
+
+ Total Balance
+
+ {balances[0]?.balance || '0.00'} {CHAIN_CONFIG.symbol}
+
+ {stakingInfo && parseFloat(stakingInfo.bonded) > 0 && (
+
+ Staked: {stakingInfo.bonded} {CHAIN_CONFIG.symbol}
+
+ )}
+
+
+
+ {/* Staking Info */}
+ {stakingInfo && parseFloat(stakingInfo.bonded) > 0 && (
+
+
+
+
+
+
+
+ )}
+
+ {/* Recent Transactions */}
+
+
+
+
+
+
+
+
+ Bonded
+ {stakingInfo.bonded}
+
+
+ {stakingInfo.stakingScore !== null && (
+ Active
+ {stakingInfo.active}
+
+
+ )}
+ Staking Score
+ {stakingInfo.stakingScore}
+
+
+ Nominations
+ {stakingInfo.nominations.length}
+
+
+
+ )}
+
+
+
+
+
+ {transactions.length === 0 ? (
+ Recent Activity
+
+ No recent transactions
+
+ ) : (
+
+ {transactions.map(tx => (
+
+ )}
+
+
+ ))}
+
+
+
+ {getTransactionIcon(tx.type)}
+
+
+
+
+ {tx.type}
+
+
+ {formatTimestamp(tx.timestamp)}
+
+
+
+
+ {tx.type === 'send' || tx.type === 'stake' ? '-' : '+'}
+ {tx.amount} {tx.symbol}
+
+
+ {tx.status}
+
+