fix remove wallet

Author: ryzen-xp

gateway-web/app/components/DashboardPage.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
+import toast, { Toaster } from "react-hot-toast";
 import {
   Wallet as WalletIcon,
   PlusCircle,
@@ -27,7 +28,7 @@ type WalletUI = Wallet & {
 
 export const DashboardPage: React.FC<DashboardPageProps> = ({ username }) => {
   const { account, isConnected } = useStarknetWallet();
-  const { getUserWallets, addWallet } = useStarknetContract();
+  const { getUserWallets, addWallet, removeWallet } = useStarknetContract();
 
   const [wallets, setWallets] = useState<WalletUI[]>([]);
   const [isLoadingWallets, setIsLoadingWallets] = useState<boolean>(true);
@@ -84,6 +85,7 @@ export const DashboardPage: React.FC<DashboardPageProps> = ({ username }) => {
       } catch (err) {
         console.error("Failed to fetch wallets:", err);
         if (mounted) setError("Failed to fetch wallets. Please try again.");
+        toast.error("Failed to fetch wallets.");
       } finally {
         if (mounted) setIsLoadingWallets(false);
       }
@@ -99,32 +101,33 @@ export const DashboardPage: React.FC<DashboardPageProps> = ({ username }) => {
   const copyToClipboard = (text: string) => {
     navigator.clipboard.writeText(text);
     setCopied(text);
+    toast.success("Copied");
     setTimeout(() => setCopied(null), 1500);
   };
 
   // Add wallet (UI + contract)
   const handleAddWallet = async () => {
     const { chainId, address, memo, tag, metadata } = newWalletForm;
     if (!chainId || !address) {
-      alert("Please select chain and enter wallet address.");
+      toast.error("Please select chain and enter wallet address.");
       return;
     }
     if (!isConnected || !account) {
-      alert("Please connect your wallet to add linked wallets.");
+      toast.error("Please connect your wallet to add linked wallets.");
       return;
     }
 
     const selected = chainOptions.find((c) => c.id === chainId);
     if (!selected) {
-      alert("Selected chain not found.");
+      toast.error("Selected chain not found.");
+
       return;
     }
 
     setIsAddingWallet(true);
     setError(null);
 
     try {
-      // Call contract to add wallet
       await addWallet(
         account,
         selected.symbol,
@@ -134,7 +137,6 @@ export const DashboardPage: React.FC<DashboardPageProps> = ({ username }) => {
         metadata || undefined
       );
 
-      // Update local state after successful transaction
       const newEntry: WalletUI = {
         chainSymbol: selected.symbol,
         address,
@@ -153,10 +155,11 @@ export const DashboardPage: React.FC<DashboardPageProps> = ({ username }) => {
         tag: "",
         metadata: "",
       });
-      alert("Wallet added successfully!");
+      toast.success("Wallet added successfully!");
     } catch (err) {
       console.error("Add wallet failed:", err);
       setError("Failed to add wallet. See console for details.");
+      toast.error("Failed to add wallet.");
     } finally {
       setIsAddingWallet(false);
     }
@@ -165,12 +168,13 @@ export const DashboardPage: React.FC<DashboardPageProps> = ({ username }) => {
   // Remove wallet (UI + contract)
   const handleRemoveWallet = async (addressToRemove: string) => {
     if (!isConnected || !account) {
-      alert("Please connect your wallet to remove linked wallets.");
+      toast.error("Please connect your wallet to remove linked wallets.");
       return;
     }
 
     const found = wallets.find((w) => w.address === addressToRemove);
     if (!found) return;
+
     const selectedChain = chainOptions.find(
       (c) => c.symbol.toLowerCase() === found.chainSymbol.toLowerCase()
     );
@@ -185,18 +189,17 @@ export const DashboardPage: React.FC<DashboardPageProps> = ({ username }) => {
     setError(null);
 
     try {
-      // TODO: Replace with actual contract remove call
-      // const tx = await removeWalletFromUser({ owner: account, chainSymbol: found.chainSymbol, address: addressToRemove });
-      // await waitForTx(tx);
+      await removeWallet(account, found.chainSymbol);
 
-      // Update local state
       setWallets((prev) => prev.filter((w) => w.address !== addressToRemove));
-      alert(
-        "Wallet removed (UI-only). Replace placeholder with on-chain call."
-      );
+
+      toast.success(`Removed from ${found.chainName}`);
     } catch (err) {
       console.error("Remove wallet failed:", err);
-      setError("Failed to remove wallet. See console for details.");
+      const errorMsg =
+        err instanceof Error ? err.message : "Failed to remove wallet";
+      setError(errorMsg);
+      toast.error(`Failed to remove wallet: ${errorMsg}`);
     } finally {
       setRemovingAddress(null);
     }

gateway-web/app/components/HomePage.tsx

@@ -14,6 +14,7 @@ import {
 import { FeatureCard } from "./FeatureCard";
 import { useStarknetContract } from "../hooks/useStarknetContract";
 import { useStarknetWallet } from "../hooks/useStarknetWallet";
+import toast, { Toaster } from "react-hot-toast";
 
 interface SearchResult {
   username: string;
@@ -35,7 +36,7 @@ export const HomePage: React.FC = () => {
 
   const handleSearch = async () => {
     if (!searchQuery.trim()) {
-      alert("Please enter a username");
+      toast.error("Please enter a username");
       return;
     }
 
@@ -48,7 +49,6 @@ export const HomePage: React.FC = () => {
           available: true,
         });
       } else {
-
         setSearchResult({
           username: searchQuery,
           available: false,
@@ -60,37 +60,37 @@ export const HomePage: React.FC = () => {
       }
     } catch (err) {
       console.error("Error checking username:", err);
-      alert("Failed to check username. Please try again.");
+      toast.error("Failed to check username. Please try again.");
     }
   };
 
   const handleRegister = async () => {
     if (!isConnected) {
-      alert("Please connect your wallet first");
+      toast.error("Please connect your wallet first");
       handleConnect();
       return;
     }
 
     if (!account) {
-      alert("No account found. Please connect your wallet.");
+      toast.error("No account found. Please connect your wallet.");
       return;
     }
 
     if (!searchQuery.trim()) {
-      alert("Please enter a username");
+      toast.error("Please enter a username");
       return;
     }
 
     setIsRegistering(true);
     try {
       await registerUsername(searchQuery, account);
-      alert(`Username @${searchQuery} registered successfully! 🎉`);
+      toast.success(`Username @${searchQuery} registered successfully! 🎉`);
       setSearchResult(null);
       setSearchQuery("");
       window.location.reload();
     } catch (err) {
       console.error("Error registering username:", err);
-      alert(
+      toast.error(
         "Failed to register username OR Already Have yo register. Please try again."
       );
     } finally {

gateway-web/app/hooks/useStarknetContract.ts

@@ -9,6 +9,7 @@ import {
   CairoOption,
 } from "starknet";
 import { ABI } from "./abi";
+import { isValidUsername, getUsernameError } from "../utils/validation";
 
 const CONTRACT_ADDRESS = process.env.NEXT_PUBLIC_CONTRACT_ADDRESS;
 const RPC_URL = process.env.NEXT_PUBLIC_RPC_URL;
@@ -126,6 +127,10 @@ export const useStarknetContract = () => {
       setError(null);
 
       try {
+        const validationError = getUsernameError(username);
+        if (validationError) {
+          throw new Error(validationError);
+        }
         const contract = getContract();
         const exists = await contract.check_username_exist(username);
 
@@ -201,6 +206,11 @@ export const useStarknetContract = () => {
       setError(null);
 
       try {
+        const validationError = getUsernameError(username);
+        if (validationError) {
+          throw new Error(validationError);
+        }
+
         const contract = new Contract(ABI, CONTRACT_ADDRESS, account);
         const result = await contract.register_username(username);
         await account.waitForTransaction(result.transaction_hash);
@@ -254,6 +264,29 @@ export const useStarknetContract = () => {
     []
   );
 
+  const removeWallet = useCallback(
+    async (account: AccountInterface, chainSymbol: string) => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const contract = new Contract(ABI, CONTRACT_ADDRESS, account);
+        const result = await contract.remove_wallet(chainSymbol);
+
+        await account.waitForTransaction(result.transaction_hash);
+        return result;
+      } catch (err) {
+        const errorMessage =
+          err instanceof Error ? err.message : "Failed to remove wallet";
+        setError(errorMessage);
+        throw new Error(errorMessage);
+      } finally {
+        setLoading(false);
+      }
+    },
+    []
+  );
+
   return {
     loading,
     error,
@@ -264,5 +297,6 @@ export const useStarknetContract = () => {
     registerUsername,
     addWallet,
     getUsername,
+    removeWallet,
   };
 };

gateway-web/app/utils/validation.ts

@@ -0,0 +1,32 @@
+/**
+ * Username validation utility
+ * ----------------------------
+ * Rules:
+ *  - 4–20 characters
+ *  - Only letters (a–z, A–Z), numbers (0–9), and underscores (_)
+ *  - No spaces or special symbols
+ */
+
+export function isValidUsername(username: string): boolean {
+  const usernameRegex = /^[a-zA-Z0-9_]{4,20}$/;
+  return usernameRegex.test(username);
+}
+
+/**
+ * Returns an error message if invalid, or null if valid.
+ * Useful for displaying specific validation feedback.
+ */
+export function getUsernameError(username: string): string | null {
+  if (!username || username.trim().length === 0)
+    return "Username cannot be empty.";
+
+  if (username.length < 4)
+    return "Username must be at least 4 characters long.";
+
+  if (username.length > 20) return "Username cannot exceed 20 characters.";
+
+  if (!/^[a-zA-Z0-9_]+$/.test(username))
+    return "Only letters, numbers, and underscores are allowed.";
+
+  return null;
+}

gateway-web/package.json

@@ -16,6 +16,7 @@
     "next": "15.5.4",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "react-hot-toast": "^2.6.0",
     "starknet": "^7.6.4"
   },
   "devDependencies": {