From f792a32f27b103c731bfd1ea94656bd1a527048e Mon Sep 17 00:00:00 2001 From: neocybereth Date: Sat, 14 Jun 2025 23:19:26 +1200 Subject: [PATCH 1/2] feat: faq page mockup --- apps/namadillo/src/App/AppRoutes.tsx | 2 + apps/namadillo/src/App/Common/FAQ.tsx | 178 ++++++++++++++++++ apps/namadillo/src/App/Layout/Navigation.tsx | 11 +- apps/namadillo/src/App/routes.ts | 1 + .../src/hooks/useNotificationCleanup.tsx | 62 ++++++ 5 files changed, 253 insertions(+), 1 deletion(-) create mode 100644 apps/namadillo/src/App/Common/FAQ.tsx create mode 100644 apps/namadillo/src/hooks/useNotificationCleanup.tsx diff --git a/apps/namadillo/src/App/AppRoutes.tsx b/apps/namadillo/src/App/AppRoutes.tsx index 0237345644..c74d1508d9 100644 --- a/apps/namadillo/src/App/AppRoutes.tsx +++ b/apps/namadillo/src/App/AppRoutes.tsx @@ -12,6 +12,7 @@ import { import { AccountOverview } from "./AccountOverview"; import { App } from "./App"; import { BugReport } from "./Common/BugReport"; +import { FAQ } from "./Common/FAQ"; import { NotFound } from "./Common/NotFound"; import { RouteErrorBoundary } from "./Common/RouteErrorBoundary"; import { ShieldAssetsModal } from "./Common/ShieldAssetsModal"; @@ -134,6 +135,7 @@ export const MainRoutes = (): JSX.Element => { )} {/* Other */} + } /> } /> } /> diff --git a/apps/namadillo/src/App/Common/FAQ.tsx b/apps/namadillo/src/App/Common/FAQ.tsx new file mode 100644 index 0000000000..4647db445a --- /dev/null +++ b/apps/namadillo/src/App/Common/FAQ.tsx @@ -0,0 +1,178 @@ +import { Panel } from "@namada/components"; + +export const FAQ = (): JSX.Element => { + const faqItems = [ + { + question: "What software versions do I need?", + answer: ( + <> +

To use Namadillo properly, ensure you have:

+
    +
  • Latest version of Chrome, Firefox, or Safari
    • +
  • Namada Extension Wallet (latest version)
    • +
  • For Ledger users: Ledger Live (latest version)
    • +
  • For Ledger users: Namada app on Ledger (latest version)
    • +
+ + ), + }, + { + question: "How do I check if my software is up to date?", + answer: ( + <> +

Follow these steps to verify your software versions:

+
    +
  • + Browser: Check your browser's About section + for version info +
    • +
  • + Extension Wallet: Go to chrome://extensions/ and + check the version +
    • +
  • + Ledger Live: Open Ledger Live and check for + updates in Settings +
    • +
  • + Ledger Namada App: Update through Ledger + Live's Manager section +
    • +
+ + ), + }, + { + question: "Ledger troubleshooting - Connection issues", + answer: ( + <> +

If you're having trouble connecting your Ledger device:

+
    +
  • Ensure your Ledger device is unlocked
    • +
  • Open the Namada app on your Ledger device
    • +
  • Use a high-quality USB cable (avoid USB hubs)
    • +
  • Close Ledger Live while using Namadillo
    • +
  • Try a different USB port
    • +
  • Restart your browser and try again
    • +
+ + ), + }, + { + question: "Ledger troubleshooting - Transaction signing", + answer: ( + <> +

If transactions aren't signing properly with Ledger:

+
    +
  • Make sure the Namada app is open on your Ledger
    • +
  • + Check that "Blind signing" is enabled in Ledger Namada + app settings +
    • +
  • + Verify you're using the latest firmware on your Ledger device +
    • +
  • Try reducing the transaction amount if it's failing
    • +
  • Ensure sufficient battery on your Ledger device
    • +
+ + ), + }, + { + question: "Common sync and loading issues", + answer: ( + <> +

If Namadillo is not loading properly or sync is slow:

+
    +
  • Clear your browser cache and cookies for Namadillo
    • +
  • Disable browser extensions that might interfere
    • +
  • Check your internet connection stability
    • +
  • Try using a different browser
    • +
  • Wait for sync to complete - this can take several minutes
    • +
  • Refresh the page if stuck on loading screen
    • +
+ + ), + }, + { + question: "Transaction failures and errors", + answer: ( + <> +

If your transactions are failing:

+
    +
  • + Check that you have sufficient balance for the transaction + fees +
    • +
  • Verify the recipient address is correct
    • +
  • Try reducing the transaction amount
    • +
  • Wait a few minutes and try again (network congestion)
    • +
  • For staking: ensure you meet minimum staking requirements
    • +
  • For MASP: wait for shielded sync to complete first
    • +
+ + ), + }, + { + question: "MASP (Privacy) related issues", + answer: ( + <> +

If you're having issues with shielded transactions:

+
    +
  • Allow time for the initial MASP sync to complete
    • +
  • MASP sync can take 10-30 minutes depending on network
    • +
  • Don't close the browser during MASP sync
    • +
  • Shielded balances may not appear until sync is complete
    • +
  • Try refreshing if sync appears stuck
    • +
+ + ), + }, + ]; + + return ( + +
+
+

+ Frequently Asked Questions +

+

+ Common troubleshooting steps and solutions for using Namadillo. If + you don't find your answer here, try our community help or file + a bug report. +

+
+ +
+ {faqItems.map((item, index) => ( +
+

+ {item.question} +

+
+ {item.answer} +
+
+ ))} +
+ +
+

+ Still need help? +

+

+ If you couldn't find the answer to your question, you can: +

+
    +
  • Ask for help in our Discord community
    • +
  • Report a bug if you think something is broken
    • +
  • Check the official Namada documentation
    • +
+
+
+ + ); +}; diff --git a/apps/namadillo/src/App/Layout/Navigation.tsx b/apps/namadillo/src/App/Layout/Navigation.tsx index 21e6230e82..265ccd8379 100644 --- a/apps/namadillo/src/App/Layout/Navigation.tsx +++ b/apps/namadillo/src/App/Layout/Navigation.tsx @@ -4,7 +4,7 @@ import { applicationFeaturesAtom } from "atoms/settings"; import { useAtomValue } from "jotai"; import { AiFillHome } from "react-icons/ai"; import { BsDiscord, BsTwitterX } from "react-icons/bs"; -import { FaVoteYea } from "react-icons/fa"; +import { FaQuestionCircle, FaVoteYea } from "react-icons/fa"; import { FaBug } from "react-icons/fa6"; import { GoHistory, GoStack } from "react-icons/go"; import { IoSwapHorizontal } from "react-icons/io5"; @@ -68,6 +68,15 @@ export const Navigation = (): JSX.Element => {