-
+
- )
+ );
}
- // Route for wallet connection redirect
- if (currentPath === '/connect') {
- return
+ // Step 1: Not registered or wallet not connected - show onboarding (includes account creation)
+ if (!isRegistered || !signingClient) {
+ return
;
}
- // Main app routes
- return (
-
- {accountExists ? (
-
- ) : (
-
- )}
-
- )
+ // Step 2: Registered user with connected wallet - show main dashboard
+ return
;
}
-export default App
+export default App;
diff --git a/frontend/src/components/AccountCreation.tsx b/frontend/src/components/AccountCreation.tsx
index bab8bd8..bf40b34 100644
--- a/frontend/src/components/AccountCreation.tsx
+++ b/frontend/src/components/AccountCreation.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
import WebApp from "@twa-dev/sdk";
import { generateKeyPair, importKeyPair } from "../services/crypto";
import type { KeyPair } from "../services/crypto";
-import { saveAccount } from "../services/storage";
+import { saveAccount, saveMnemonic, saveWalletType } from "../services/storage";
import {
showAlert,
showConfirm,
@@ -171,6 +171,7 @@ export function AccountCreation({ onAccountCreated }: AccountCreationProps) {
hapticNotification("success");
await new Promise((resolve) => setTimeout(resolve, 500));
+ saveWalletType('walletconnect');
saveAccount({
address: account.address,
publicKey: account.publicKey,
@@ -269,6 +270,7 @@ export function AccountCreation({ onAccountCreated }: AccountCreationProps) {
localStorage.removeItem("wc_connecting_state");
hapticNotification("success");
await new Promise((resolve) => setTimeout(resolve, 500));
+ saveWalletType('walletconnect');
saveAccount({
address: account.address,
publicKey: account.publicKey,
@@ -336,12 +338,23 @@ export function AccountCreation({ onAccountCreated }: AccountCreationProps) {
hapticImpact("medium");
try {
const importedKeyPair = await importKeyPair(trimmedMnemonic);
- hapticNotification("success");
- saveAccount({
- address: importedKeyPair.address,
- publicKey: importedKeyPair.publicKey,
- });
- onAccountCreated();
+
+ showConfirm(
+ "Save mnemonic to device for easy signing? (Less secure but more convenient)\n\nIf NO, you'll need to enter it each time you sign.",
+ (saveMnemonicToDevice) => {
+ if (saveMnemonicToDevice) {
+ // Save mnemonic to localStorage
+ saveMnemonic(trimmedMnemonic);
+ }
+ saveWalletType('local');
+ hapticNotification("success");
+ saveAccount({
+ address: importedKeyPair.address,
+ publicKey: importedKeyPair.publicKey,
+ });
+ onAccountCreated();
+ }
+ );
} catch (err) {
console.error("Failed to import mnemonic:", err);
hapticNotification("error");
@@ -379,6 +392,7 @@ export function AccountCreation({ onAccountCreated }: AccountCreationProps) {
console.log("✅ Wallet approved! Account:", walletAccount);
hapticNotification("success");
+ saveWalletType('walletconnect');
saveAccount({
address: walletAccount.address,
publicKey: walletAccount.publicKey,
@@ -404,9 +418,12 @@ export function AccountCreation({ onAccountCreated }: AccountCreationProps) {
if (!keyPair) return;
showConfirm(
- "Have you saved your mnemonic? It will not be shown again!",
- (confirmed) => {
- if (confirmed) {
+ "Save mnemonic to device for easy signing? (Less secure but more convenient)\n\nIf NO, you'll need to enter it each time you sign.",
+ (saveMnemonicToDevice) => {
+ if (saveMnemonicToDevice) {
+ // Save mnemonic to localStorage
+ saveMnemonic(keyPair.mnemonic);
+ saveWalletType('local');
hapticNotification("success");
saveAccount({
address: keyPair.address,
@@ -414,7 +431,14 @@ export function AccountCreation({ onAccountCreated }: AccountCreationProps) {
});
onAccountCreated();
} else {
- hapticNotification("warning");
+ // Don't save mnemonic, only save address and public key
+ saveWalletType('local');
+ hapticNotification("success");
+ saveAccount({
+ address: keyPair.address,
+ publicKey: keyPair.publicKey,
+ });
+ onAccountCreated();
}
}
);
diff --git a/frontend/src/components/Dashboard.tsx b/frontend/src/components/Dashboard.tsx
index a960729..03924d4 100644
--- a/frontend/src/components/Dashboard.tsx
+++ b/frontend/src/components/Dashboard.tsx
@@ -10,6 +10,10 @@ import {
hapticNotification,
} from "../utils/telegram";
import "./Dashboard.css";
+import { useSigningClient } from "../hooks/useSigningClient";
+import { TgContractPaymentsClient } from "../contracts/TgContractPayments.client";
+import { WalletManager } from "./WalletManager";
+import { getContractAddress, setContractAddress } from "../config/contracts";
interface DashboardProps {
onLogout: () => void;
@@ -31,6 +35,19 @@ export function Dashboard({ onLogout }: DashboardProps) {
const [copied, setCopied] = useState(false);
const [showMenu, setShowMenu] = useState(false);
const [telegramUser, setTelegramUser] = useState
(null);
+ const [contractClient, setContractClient] =
+ useState(null);
+ const [contractAddress, setContractAddressState] = useState("");
+ const [showContractSetup, setShowContractSetup] = useState(false);
+ const [contractAddressInput, setContractAddressInput] = useState("");
+
+ // Use the signing client hook
+ const {
+ client: signingClient,
+ address: signerAddress,
+ walletType,
+ isReady: isSignerReady,
+ } = useSigningClient();
useEffect(() => {
const storedAccount = getStoredAccount();
@@ -45,6 +62,15 @@ export function Dashboard({ onLogout }: DashboardProps) {
fetchBalance(storedAccount.address);
}
+ // Try to load contract address
+ try {
+ const addr = getContractAddress("payments");
+ setContractAddressState(addr);
+ } catch (err) {
+ // Contract address not configured yet
+ console.log("Contract address not configured:", err);
+ }
+
// Setup Settings Button
WebApp.SettingsButton.show();
WebApp.SettingsButton.onClick(handleSettingsClick);
@@ -55,6 +81,30 @@ export function Dashboard({ onLogout }: DashboardProps) {
};
}, []);
+ // Initialize contract client when signing client is ready
+ useEffect(() => {
+ if (
+ signingClient &&
+ signerAddress &&
+ contractAddress &&
+ contractAddress !== "neutron1..."
+ ) {
+ try {
+ const client = new TgContractPaymentsClient(
+ signingClient,
+ signerAddress,
+ contractAddress
+ );
+ setContractClient(client);
+ console.log("✅ Contract client initialized:", contractAddress);
+ } catch (err) {
+ console.error("Failed to initialize contract client:", err);
+ }
+ } else {
+ setContractClient(null);
+ }
+ }, [signingClient, signerAddress, contractAddress]);
+
const fetchBalance = async (address: string) => {
setLoadingBalance(true);
try {
@@ -106,6 +156,25 @@ export function Dashboard({ onLogout }: DashboardProps) {
}
};
+ const handleSetContractAddress = () => {
+ if (!contractAddressInput.trim()) {
+ showAlert("Please enter a contract address");
+ return;
+ }
+
+ if (!contractAddressInput.startsWith("neutron1")) {
+ showAlert('Contract address must start with "neutron1"');
+ return;
+ }
+
+ setContractAddress("payments", contractAddressInput.trim());
+ setContractAddressState(contractAddressInput.trim());
+ setShowContractSetup(false);
+ setContractAddressInput("");
+ hapticNotification("success");
+ showAlert("Contract address saved!");
+ };
+
if (!account) {
return Loading...
;
}
@@ -113,7 +182,132 @@ export function Dashboard({ onLogout }: DashboardProps) {
return (
-
Neutron Wallet
+
Telegram Payments
+
+ {/* Wallet Manager - shows initialization UI if needed */}
+
+
+ {/* Signer Status */}
+ {isSignerReady && signingClient && (
+
+
+ ✅ Signer Ready ({walletType})
+
+
+ )}
+
+ {/* Contract Status */}
+
+
+ {contractClient
+ ? "✅ Contract Client Ready"
+ : "⚠️ Contract Not Configured"}
+
+ {contractAddress && contractAddress !== "neutron1..." ? (
+
+ {contractAddress}
+
+ ) : (
+
+ )}
+
+
+ {/* Contract Setup */}
+ {showContractSetup && (
+
+
+ Configure Contract Address
+
+ setContractAddressInput(e.target.value)}
+ placeholder="neutron1..."
+ style={{
+ width: "100%",
+ padding: "8px",
+ borderRadius: "6px",
+ border: "1px solid var(--tg-theme-hint-color, #ccc)",
+ fontSize: "12px",
+ fontFamily: "monospace",
+ marginBottom: "8px",
+ }}
+ />
+
+
+ )}
{telegramUser && (
diff --git a/frontend/src/components/ErrorBoundary.tsx b/frontend/src/components/ErrorBoundary.tsx
new file mode 100644
index 0000000..52c2ddc
--- /dev/null
+++ b/frontend/src/components/ErrorBoundary.tsx
@@ -0,0 +1,98 @@
+import { Component, type ReactNode } from "react";
+
+interface Props {
+ children: ReactNode;
+}
+
+interface State {
+ hasError: boolean;
+ error?: Error;
+}
+
+export class ErrorBoundary extends Component
{
+ constructor(props: Props) {
+ super(props);
+ this.state = { hasError: false };
+ }
+
+ static getDerivedStateFromError(error: Error): State {
+ return { hasError: true, error };
+ }
+
+ componentDidCatch(error: Error, errorInfo: any) {
+ console.error("ErrorBoundary caught an error:", error, errorInfo);
+
+ // Try to display error in Telegram if available
+ try {
+ if (typeof window !== "undefined" && (window as any).Telegram?.WebApp) {
+ const WebApp = (window as any).Telegram.WebApp;
+ if (WebApp.showAlert) {
+ WebApp.showAlert(
+ `Error: ${error.message}\n\nCheck console for details`
+ );
+ }
+ }
+ } catch (e) {
+ console.error("Failed to show error in Telegram:", e);
+ }
+ }
+
+ render() {
+ if (this.state.hasError) {
+ return (
+
+
+ Something went wrong
+
+
+ {this.state.error?.message}
+
+
+ {this.state.error?.stack}
+
+
+
+ {/* Progress indicator */}
+
+
+
Step {getStepNumber()} of 5
+
+
+ {/* Step content */}
+
+ {currentStep === 'welcome' && (
+
+
💸
+
Welcome to Telegram Payments
+
+ Send and receive cryptocurrency payments directly through Telegram, powered by the Cosmos ecosystem.
+
+
+
+
⚡
+
+
Instant Payments
+
Send crypto to any Telegram user instantly
+
+
+
+
🔒
+
+
Secure & Non-Custodial
+
Your keys, your crypto. We never hold your funds
+
+
+
+
🎯
+
+
Spending Limits
+
Set custom limits for peace of mind
+
+
+
+
+
+ )}
+
+ {currentStep === 'create-account' && (
+
+ )}
+
+ {currentStep === 'wallet-connect' && (
+
+
🔐
+
Connect Your Wallet
+
+ Initialize your wallet to start sending and receiving payments.
+
+
+
+
+ {signingClient && signerAddress && (
+
+
+ ✅ Wallet connected: {signerAddress.substring(0, 12)}...
+
+
+
+ )}
+
+ )}
+
+ {currentStep === 'set-limit' && (
+
+
💰
+
Set Spending Limit
+
+ Set a maximum amount that can be spent through Telegram in a single transaction. You can change this anytime.
+
+
+
+
+
+ setSpendingLimit(e.target.value)}
+ placeholder="100"
+ />
+ NTRN
+
+
+
+
+
+
+
+
+ ≈ ${(parseFloat(spendingLimit || '0') * 0.5).toFixed(2)} USD (estimated)
+
+
+
+
+
+
+
+ )}
+
+ {currentStep === 'register' && (
+
+
✅
+
Complete Setup
+
+ Register your Telegram handle with the blockchain to start receiving payments.
+
+
+
+
+ Telegram Handle:
+ @{WebApp.initDataUnsafe.user?.username || `user_${WebApp.initDataUnsafe.user?.id}`}
+
+
+ Wallet Address:
+ {account?.address.substring(0, 20)}...
+
+
+ Spending Limit:
+ {spendingLimit} NTRN
+
+
+
+
+
+ This will create an authorization that allows the contract to spend up to {spendingLimit} NTRN on your behalf for Telegram payments.
+
+
+
+
+
+ )}
+
+
Loading...
;
+ }
+
+ return (
+
+ {/* Header */}
+
+
💸 Telegram Payments
+ {telegramUser && (
+
+ @{telegramUser.username || `user_${telegramUser.id}`}
+
+ )}
+
+
+ {/* Balance Card */}
+
+
Total Balance
+
+ {loadingBalance ? (
+ Loading...
+ ) : (
+ {balance?.formatted || '0 NTRN'}
+ )}
+
+
+
+
+ {/* Quick Actions */}
+
+
+
+
+
+
+ {/* Account Info */}
+
+
Account Details
+
+ Telegram Handle
+
+ @{telegramUser?.username || `user_${telegramUser?.id}`}
+
+
+
+ Wallet Address
+
+ {account.address.substring(0, 12)}...
+ {account.address.substring(account.address.length - 8)}
+
+
+
+
+ {/* Limit Editor Modal */}
+ {showLimitEditor && (
+
setShowLimitEditor(false)}>
+
e.stopPropagation()}>
+
Update Spending Limit
+
+ Set the maximum amount that can be spent through Telegram in a single transaction.
+
+
+
+ setNewLimit(e.target.value)}
+ placeholder="100"
+ />
+ NTRN
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Settings Modal */}
+ {showSettings && (
+
setShowSettings(false)}>
+
e.stopPropagation()}>
+
Settings
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ ✅ Wallet Ready ({walletType})
+
+
+ You can now sign transactions
+
+
+
+ ❌ Wallet Error
+
+
+ {error.message}
+
+
+ {walletType === 'walletconnect' && (
+
+ )}
+
+
+
⏳ Loading wallet...
+
+ Check debug panel for details
+
+
+
+ 🔐 Enter Mnemonic to Sign
+
+
+ Your mnemonic is not saved. Enter it to enable signing.
+
+