Skip to content

Commit f792a32

Browse files
neocyberethneocybereth
committed
feat: faq page mockup
1 parent f85fb5e commit f792a32

File tree

5 files changed

+253
-1
lines changed

5 files changed

+253
-1
lines changed

‎apps/namadillo/src/App/AppRoutes.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
import { AccountOverview } from "./AccountOverview";
1313
import { App } from "./App";
1414
import { BugReport } from "./Common/BugReport";
15+
import { FAQ } from "./Common/FAQ";
1516
import { NotFound } from "./Common/NotFound";
1617
import { RouteErrorBoundary } from "./Common/RouteErrorBoundary";
1718
import { ShieldAssetsModal } from "./Common/ShieldAssetsModal";
@@ -134,6 +135,7 @@ export const MainRoutes = (): JSX.Element => {
134135
)}
135136

136137
{/* Other */}
138+
<Route path={routes.faq} element={<FAQ />} />
137139
<Route path={routes.bugReport} element={<BugReport />} />
138140
<Route path="*" element={<NotFound />} />
139141
</Route>

‎apps/namadillo/src/App/Common/FAQ.tsx

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
import { Panel } from "@namada/components";
2+
3+
export const FAQ = (): JSX.Element => {
4+
const faqItems = [
5+
{
6+
question: "What software versions do I need?",
7+
answer: (
8+
<>
9+
<p>To use Namadillo properly, ensure you have:</p>
10+
<ul className="list-disc list-inside ml-4 mt-2 space-y-1">
11+
<li>Latest version of Chrome, Firefox, or Safari</li>
12+
<li>Namada Extension Wallet (latest version)</li>
13+
<li>For Ledger users: Ledger Live (latest version)</li>
14+
<li>For Ledger users: Namada app on Ledger (latest version)</li>
15+
</ul>
16+
</>
17+
),
18+
},
19+
{
20+
question: "How do I check if my software is up to date?",
21+
answer: (
22+
<>
23+
<p>Follow these steps to verify your software versions:</p>
24+
<ul className="list-disc list-inside ml-4 mt-2 space-y-1">
25+
<li>
26+
<strong>Browser:</strong> Check your browser&apos;s About section
27+
for version info
28+
</li>
29+
<li>
30+
<strong>Extension Wallet:</strong> Go to chrome://extensions/ and
31+
check the version
32+
</li>
33+
<li>
34+
<strong>Ledger Live:</strong> Open Ledger Live and check for
35+
updates in Settings
36+
</li>
37+
<li>
38+
<strong>Ledger Namada App:</strong> Update through Ledger
39+
Live&apos;s Manager section
40+
</li>
41+
</ul>
42+
</>
43+
),
44+
},
45+
{
46+
question: "Ledger troubleshooting - Connection issues",
47+
answer: (
48+
<>
49+
<p>If you&apos;re having trouble connecting your Ledger device:</p>
50+
<ul className="list-disc list-inside ml-4 mt-2 space-y-1">
51+
<li>Ensure your Ledger device is unlocked</li>
52+
<li>Open the Namada app on your Ledger device</li>
53+
<li>Use a high-quality USB cable (avoid USB hubs)</li>
54+
<li>Close Ledger Live while using Namadillo</li>
55+
<li>Try a different USB port</li>
56+
<li>Restart your browser and try again</li>
57+
</ul>
58+
</>
59+
),
60+
},
61+
{
62+
question: "Ledger troubleshooting - Transaction signing",
63+
answer: (
64+
<>
65+
<p>If transactions aren&apos;t signing properly with Ledger:</p>
66+
<ul className="list-disc list-inside ml-4 mt-2 space-y-1">
67+
<li>Make sure the Namada app is open on your Ledger</li>
68+
<li>
69+
Check that &quot;Blind signing&quot; is enabled in Ledger Namada
70+
app settings
71+
</li>
72+
<li>
73+
Verify you&apos;re using the latest firmware on your Ledger device
74+
</li>
75+
<li>Try reducing the transaction amount if it&apos;s failing</li>
76+
<li>Ensure sufficient battery on your Ledger device</li>
77+
</ul>
78+
</>
79+
),
80+
},
81+
{
82+
question: "Common sync and loading issues",
83+
answer: (
84+
<>
85+
<p>If Namadillo is not loading properly or sync is slow:</p>
86+
<ul className="list-disc list-inside ml-4 mt-2 space-y-1">
87+
<li>Clear your browser cache and cookies for Namadillo</li>
88+
<li>Disable browser extensions that might interfere</li>
89+
<li>Check your internet connection stability</li>
90+
<li>Try using a different browser</li>
91+
<li>Wait for sync to complete - this can take several minutes</li>
92+
<li>Refresh the page if stuck on loading screen</li>
93+
</ul>
94+
</>
95+
),
96+
},
97+
{
98+
question: "Transaction failures and errors",
99+
answer: (
100+
<>
101+
<p>If your transactions are failing:</p>
102+
<ul className="list-disc list-inside ml-4 mt-2 space-y-1">
103+
<li>
104+
Check that you have sufficient balance for the transaction + fees
105+
</li>
106+
<li>Verify the recipient address is correct</li>
107+
<li>Try reducing the transaction amount</li>
108+
<li>Wait a few minutes and try again (network congestion)</li>
109+
<li>For staking: ensure you meet minimum staking requirements</li>
110+
<li>For MASP: wait for shielded sync to complete first</li>
111+
</ul>
112+
</>
113+
),
114+
},
115+
{
116+
question: "MASP (Privacy) related issues",
117+
answer: (
118+
<>
119+
<p>If you&apos;re having issues with shielded transactions:</p>
120+
<ul className="list-disc list-inside ml-4 mt-2 space-y-1">
121+
<li>Allow time for the initial MASP sync to complete</li>
122+
<li>MASP sync can take 10-30 minutes depending on network</li>
123+
<li>Don&apos;t close the browser during MASP sync</li>
124+
<li>Shielded balances may not appear until sync is complete</li>
125+
<li>Try refreshing if sync appears stuck</li>
126+
</ul>
127+
</>
128+
),
129+
},
130+
];
131+
132+
return (
133+
<Panel className="mb-12 min-h-full">
134+
<div className="max-w-4xl mx-auto p-6">
135+
<div className="text-center mb-8">
136+
<h1 className="text-3xl font-bold text-yellow mb-4">
137+
Frequently Asked Questions
138+
</h1>
139+
<p className="text-neutral-300 max-w-2xl mx-auto">
140+
Common troubleshooting steps and solutions for using Namadillo. If
141+
you don&apos;t find your answer here, try our community help or file
142+
a bug report.
143+
</p>
144+
</div>
145+
146+
<div className="space-y-6">
147+
{faqItems.map((item, index) => (
148+
<div
149+
key={index}
150+
className="bg-neutral-800 rounded-lg p-6 border border-neutral-700"
151+
>
152+
<h3 className="text-xl font-semibold text-yellow mb-3">
153+
{item.question}
154+
</h3>
155+
<div className="text-neutral-300 leading-relaxed">
156+
{item.answer}
157+
</div>
158+
</div>
159+
))}
160+
</div>
161+
162+
<div className="mt-12 p-6 bg-neutral-800 rounded-lg border border-neutral-700">
163+
<h3 className="text-xl font-semibold text-yellow mb-3">
164+
Still need help?
165+
</h3>
166+
<p className="text-neutral-300">
167+
If you couldn&apos;t find the answer to your question, you can:
168+
</p>
169+
<ul className="list-disc list-inside ml-4 mt-2 space-y-1 text-neutral-300">
170+
<li>Ask for help in our Discord community</li>
171+
<li>Report a bug if you think something is broken</li>
172+
<li>Check the official Namada documentation</li>
173+
</ul>
174+
</div>
175+
</div>
176+
</Panel>
177+
);
178+
};

‎apps/namadillo/src/App/Layout/Navigation.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { applicationFeaturesAtom } from "atoms/settings";
44
import { useAtomValue } from "jotai";
55
import { AiFillHome } from "react-icons/ai";
66
import { BsDiscord, BsTwitterX } from "react-icons/bs";
7-
import { FaVoteYea } from "react-icons/fa";
7+
import { FaQuestionCircle, FaVoteYea } from "react-icons/fa";
88
import { FaBug } from "react-icons/fa6";
99
import { GoHistory, GoStack } from "react-icons/go";
1010
import { IoSwapHorizontal } from "react-icons/io5";
@@ -68,6 +68,15 @@ export const Navigation = (): JSX.Element => {
6868
</ul>
6969
<footer className="flex flex-col gap-10">
7070
<ul className="flex flex-col gap-1 text-neutral-300 text-sm">
71+
<li>
72+
<Link
73+
to={routes.faq}
74+
className="inline-flex items-center gap-2 hover:text-cyan"
75+
>
76+
<FaQuestionCircle />
77+
FAQ
78+
</Link>
79+
</li>
7180
<li>
7281
<Link
7382
to={routes.bugReport}

‎apps/namadillo/src/App/routes.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export const routes = {
4343
// Other
4444
switchAccount: "/switch-account",
4545
signMessages: "/sign-messages",
46+
faq: "/faq",
4647
bugReport: "/bug-report",
4748
} as const;
4849

‎apps/namadillo/src/hooks/useNotificationCleanup.tsx

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import {
2+
dismissNotificationByTxHashAtom,
3+
toastNotificationsAtom,
4+
} from "atoms/notifications";
5+
import { pendingTransactionsHistoryAtom } from "atoms/transactions";
6+
import { useAtomValue, useSetAtom } from "jotai";
7+
import { useEffect } from "react";
8+
9+
export const useNotificationCleanup = (): void => {
10+
const notifications = useAtomValue(toastNotificationsAtom);
11+
const pendingTransactions = useAtomValue(pendingTransactionsHistoryAtom);
12+
const dismissNotificationByTxHash = useSetAtom(
13+
dismissNotificationByTxHashAtom
14+
);
15+
16+
useEffect(() => {
17+
// Get all pending transaction hashes
18+
const pendingTxHashes = new Set(
19+
pendingTransactions.map((tx) => tx.hash).filter(Boolean)
20+
);
21+
22+
// Find stale pending notifications (notifications for transactions that are no longer pending)
23+
const pendingNotifications = notifications.filter(
24+
(n) => n.type === "pending"
25+
);
26+
27+
pendingNotifications.forEach((notification) => {
28+
// Extract transaction hashes from notification ID
29+
const txHashesFromId = notification.id.split(",");
30+
31+
// Check if any of these hashes are still in pending transactions
32+
const hasActivePendingTx = txHashesFromId.some((hash) =>
33+
pendingTxHashes.has(hash)
34+
);
35+
36+
// If no active pending transaction matches this notification, dismiss it
37+
if (!hasActivePendingTx && txHashesFromId.length > 0) {
38+
txHashesFromId.forEach((hash) => {
39+
if (hash.trim()) {
40+
dismissNotificationByTxHash(hash.trim());
41+
}
42+
});
43+
}
44+
});
45+
}, [notifications, pendingTransactions, dismissNotificationByTxHash]);
46+
47+
// Also clean up when the page becomes visible (user switches back to tab)
48+
useEffect(() => {
49+
const handleVisibilityChange = (): void => {
50+
if (!document.hidden) {
51+
// Page became visible, trigger cleanup by updating dependencies
52+
// The cleanup logic above will run due to the useEffect dependencies
53+
}
54+
};
55+
56+
document.addEventListener("visibilitychange", handleVisibilityChange);
57+
58+
return () => {
59+
document.removeEventListener("visibilitychange", handleVisibilityChange);
60+
};
61+
}, []);
62+
};

0 commit comments

Comments
 (0)