Merge pull request #347 from Nacho1499/feat/CLI-tool

feat: Implement interactive SDK CLI for developer testing

Author: Otaiki1

.gitignore

@@ -1,4 +1,4 @@
-package-lock.json
-.claude/
-CLAUDE.md
-sdk/docs/
+node_modules/
+dist/
+.env
+*.log

client/package.json

@@ -24,7 +24,7 @@
         "lucide-react": "^0.544.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
-        "react-router-dom": "^7.9.2",
+        "react-router-dom": "^7.13.2",
         "recharts": "^3.8.1",
         "sonner": "^2.0.7",
         "swiper": "^11.2.10",

client/src/App.tsx

@@ -10,7 +10,7 @@ import Transparency from "./pages/Transparency";
 import Settings from "./pages/Settings";
 import RafflePage from "./pages/RafflePage";
 import OracleAdmin from "./pages/OracleAdmin";
-
+import FAQPage from './pages/FAQ/FAQPage'; // Imported FAQ
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import RaffleDetails from "./pages/RaffleDetails";
 import Support from "./pages/Support";
@@ -57,6 +57,8 @@ function App() {
                             <Route path="settings" element={<Settings />} />
                             <Route path="support" element={<Support />} />
                             <Route path="transparency" element={<Transparency />} />
+                            {/* Issue #192: FAQ Route Added Here */}
+                            <Route path="faq" element={<FAQPage />} />
                             <Route path="admin/oracle" element={<OracleAdmin />} />
                         </Route>
                     </Routes>

client/src/components/landing/Footer.tsx

@@ -113,6 +113,11 @@ const Footer = () => {
                                     Community
                                 </a>
                             </li>
+                            <li >
+                                <a href="/faq" className="hover:text-white">
+                                    FAQ
+                                </a>
+                            </li>
                         </ul>
                     </nav>
 

client/src/pages/FAQ/FAQContent.ts

@@ -0,0 +1,22 @@
+export const faqData = [
+  {
+    id: "how-to-buy",
+    question: "How do I buy a ticket?",
+    answer: "To buy a ticket, connect your Stellar-compatible wallet (like Albedo or Rabbit), select the lottery you wish to enter, and click 'Purchase'. You will need a small amount of XLM for the transaction fee."
+  },
+  {
+    id: "how-to-create",
+    question: "How do I create a lottery?",
+    answer: "Navigate to the 'Create' dashboard. Fill in the prize pool details, ticket price, and end date. Once submitted, you will sign a transaction to deploy the Soroban smart contract."
+  },
+  {
+    id: "what-is-vrf",
+    question: "What is VRF?",
+    answer: "VRF stands for Verifiable Random Function. It is a cryptographic primitive used to ensure that the winner selection process is 100% fair, transparent, and cannot be manipulated by the developers or other users."
+  },
+  {
+    id: "wallet-support",
+    question: "Which wallets are supported?",
+    answer: "Currently, we support Albedo, Freighter, and any wallet compatible with the Stellar wallet-connect standard."
+  }
+];

client/src/pages/FAQ/FAQPage.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { faqData } from './FAQContent';
+
+const FAQItem = ({ question, answer, id }: { question: string, answer: string, id: string }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="border-b border-gray-200 dark:border-gray-700">
+      <h3>
+        <button
+          type="button"
+          id={`accordion-control-${id}`}
+          aria-expanded={isOpen}
+          aria-controls={`accordion-section-${id}`}
+          onClick={() => setIsOpen(!isOpen)}
+          className="flex w-full items-center justify-between py-5 text-left font-medium text-gray-900 dark:text-white transition-all hover:text-blue-600"
+        >
+          <span>{question}</span>
+          <svg
+            className={`w-4 h-4 shrink-0 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+      </h3>
+      <div
+        id={`accordion-section-${id}`}
+        role="region"
+        aria-labelledby={`accordion-control-${id}`}
+        className={`overflow-hidden transition-all duration-300 ${isOpen ? 'max-h-96 pb-5' : 'max-h-0'}`}
+      >
+        <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
+          {answer}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+const FAQPage = () => {
+  return (
+    <div className="max-w-3xl mx-auto px-4 py-12">
+      <header className="mb-12 text-center">
+        <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">Help & FAQ</h1>
+        <p className="text-lg text-gray-600 dark:text-gray-400">
+          Everything you need to know about Tikka and the Stellar ecosystem.
+        </p>
+      </header>
+
+      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6 md:p-8">
+        {faqData.map((item) => (
+          <FAQItem key={item.id} {...item} />
+        ))}
+      </div>
+      
+      <footer className="mt-12 text-center text-sm text-gray-500">
+        Still have questions? <a href="mailto:support@tikka.com" className="text-blue-600 hover:underline">Contact Support</a>
+      </footer>
+    </div>
+  );
+};
+
+export default FAQPage;

client/tsconfig.app.json

@@ -10,25 +10,35 @@
     ],
     "module": "ESNext",
     "skipLibCheck": true,
+
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "verbatimModuleSyntax": true,
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
+
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true,
+
+    /* RELEVANT FIXES BELOW */
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
     "types": [
-      "vite/client"
+      "vite/client",
+      "node" 
     ]
+    
   },
   "include": [
-    "src"
+    "src",
+    "src/**/*.ts",
+    "src/**/*.tsx"
   ]
 }