diff --git a/src/App.tsx b/src/App.tsx index 9c29324e8..7ebbc2d9b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,7 @@ import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'; import Welcome from './pages/Welcome'; import Login from './pages/Login'; -import Step1Privacy from './pages/onboarding/Step1Privacy'; -import Step2Analytics from './pages/onboarding/Step2Analytics'; -import Step3Connect from './pages/onboarding/Step3Connect'; -import Step4GetStarted from './pages/onboarding/Step4GetStarted'; +import Onboarding from './pages/onboarding/Onboarding'; import Home from './pages/Home'; function App() { @@ -13,10 +10,7 @@ function App() { } /> } /> - } /> - } /> - } /> - } /> + } /> } /> } /> diff --git a/src/components/PrivacyFeatureCard.tsx b/src/components/PrivacyFeatureCard.tsx index d0d1c91ed..8a02df241 100644 --- a/src/components/PrivacyFeatureCard.tsx +++ b/src/components/PrivacyFeatureCard.tsx @@ -5,11 +5,11 @@ interface PrivacyFeatureCardProps { const PrivacyFeatureCard = ({ title, description }: PrivacyFeatureCardProps) => { return ( -
+
-

{title}

-

{description}

+

{title}

+

{description}

diff --git a/src/components/ProgressIndicator.tsx b/src/components/ProgressIndicator.tsx new file mode 100644 index 000000000..e8bf5e6f6 --- /dev/null +++ b/src/components/ProgressIndicator.tsx @@ -0,0 +1,21 @@ +interface ProgressIndicatorProps { + currentStep: number; + totalSteps: number; +} + +const ProgressIndicator = ({ currentStep, totalSteps }: ProgressIndicatorProps) => { + return ( +
+ {Array.from({ length: totalSteps }).map((_, index) => ( +
+ ))} +
+ ); +}; + +export default ProgressIndicator; diff --git a/src/pages/Welcome.tsx b/src/pages/Welcome.tsx index 61a2aae6a..db985d78e 100644 --- a/src/pages/Welcome.tsx +++ b/src/pages/Welcome.tsx @@ -17,7 +17,7 @@ const Welcome = () => { ]; const handleTelegramLogin = () => { - navigate('/onboarding/step1'); + navigate('/onboarding'); }; return ( diff --git a/src/pages/onboarding/Onboarding.tsx b/src/pages/onboarding/Onboarding.tsx new file mode 100644 index 000000000..43864c1a4 --- /dev/null +++ b/src/pages/onboarding/Onboarding.tsx @@ -0,0 +1,65 @@ +import { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import ProgressIndicator from '../../components/ProgressIndicator'; +import PrivacyStep from './steps/PrivacyStep'; +import AnalyticsStep from './steps/AnalyticsStep'; +import ConnectStep from './steps/ConnectStep'; +import GetStartedStep from './steps/GetStartedStep'; + +const Onboarding = () => { + const navigate = useNavigate(); + const [currentStep, setCurrentStep] = useState(1); + const totalSteps = 4; + + const handleNext = () => { + if (currentStep < totalSteps) { + setCurrentStep(currentStep + 1); + } + }; + + const handleBack = () => { + if (currentStep > 1) { + setCurrentStep(currentStep - 1); + } else { + navigate('/'); + } + }; + + const handleComplete = () => { + navigate('/home'); + }; + + const renderStep = () => { + switch (currentStep) { + case 1: + return ; + case 2: + return ; + case 3: + return ; + case 4: + return ; + default: + return ; + } + }; + + return ( +
+
+ + {renderStep()} + {currentStep > 1 && ( + + )} +
+
+ ); +}; + +export default Onboarding; diff --git a/src/pages/onboarding/Step1Privacy.tsx b/src/pages/onboarding/Step1Privacy.tsx deleted file mode 100644 index e6768aa75..000000000 --- a/src/pages/onboarding/Step1Privacy.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import { useNavigate } from 'react-router-dom'; -import PrivacyFeatureCard from '../../components/PrivacyFeatureCard'; - -const Step1Privacy = () => { - const navigate = useNavigate(); - - const handleContinue = () => { - navigate('/onboarding/step2'); - }; - - const privacyFeatures = [ - { - title: 'Client-Side Encryption', - description: 'Your data is encrypted in your browser before it ever reaches our servers. We store only ciphertext. Without your recovery phrase, your content is cryptographically unreadable AES-256-GCM. Keys never leave your device', - }, - { - title: 'Zero Admin Access', - description: 'Even with full database access, Momo admins cannot decrypt your content. Your encryption keys exist only in your browser. We have no mechanism to access them.', - }, - { - title: 'Zero Data Retention', - description: 'Your data is NEVER used to train AI models. We operate under a Zero Data Retention contract with Anthropic. Your queries are processed and immediately discarded, never stored or used for training.', - }, - ]; - - return ( -
- {/* Main content */} -
- {/* Progress indicator */} -
-
-
1
-
-
-
-
2
-
-
-
-
3
-
-
-
4
-
- - {/* Privacy card */} -
-
-

- Privacy -

-

- A quick overview of how your privacy is protected with AlphaHuman -

-
- - {/* Privacy Features Section */} -
- {privacyFeatures.map((feature, index) => ( - - ))} -
- - {/* Continue button */} - -
-
-
- ); -}; - -export default Step1Privacy; diff --git a/src/pages/onboarding/Step2Analytics.tsx b/src/pages/onboarding/Step2Analytics.tsx deleted file mode 100644 index 4e5c406be..000000000 --- a/src/pages/onboarding/Step2Analytics.tsx +++ /dev/null @@ -1,147 +0,0 @@ -import { useState } from 'react'; -import { useNavigate } from 'react-router-dom'; - -const Step2Analytics = () => { - const navigate = useNavigate(); - const [selectedOption, setSelectedOption] = useState('maximumPrivacy'); - - const handleContinue = () => { - navigate('/onboarding/step3'); - }; - - return ( -
- {/* Main content */} -
- {/* Progress indicator */} -
-
-
1
-
-
-
-
2
-
-
-
-
3
-
-
-
4
-
- - {/* Analytics card */} -
-
-

- Analytics -

-

- Help us improve your experience while maintaining your privacy -

-
- - {/* Analytics options */} -
- {/* Securely Share Analytics */} -
setSelectedOption('shareAnalytics')} - > -
-
-
- {selectedOption === 'shareAnalytics' && ( -
- )} -
-
-
-

Securely Share Analytics

-

- Share anonymized usage data to help us improve features and performance. All data is encrypted and cannot be traced back to you. -

-
-
-
- - {/* Maximum Privacy */} -
setSelectedOption('maximumPrivacy')} - > -
-
-
- {selectedOption === 'maximumPrivacy' && ( -
- )} -
-
-
-

Maximum Privacy

-

- Keep all your data completely private. We won't collect any usage analytics, ensuring total anonymity. -

-
- - - - Recommended for privacy -
-
-
-
-
- - {/* Continue button */} - - - {/* Privacy note */} -
-
- - - -
-

You can change this setting anytime

-

Your privacy preferences can be updated in your account settings

-
-
-
-
- - {/* Back button */} - -
-
- ); -}; - -export default Step2Analytics; diff --git a/src/pages/onboarding/Step3Connect.tsx b/src/pages/onboarding/Step3Connect.tsx deleted file mode 100644 index f63443457..000000000 --- a/src/pages/onboarding/Step3Connect.tsx +++ /dev/null @@ -1,149 +0,0 @@ -import { useNavigate } from 'react-router-dom'; - -const Step3Connect = () => { - const navigate = useNavigate(); - - const handleGoogleConnect = () => { - // In a real app, this would handle Google OAuth - navigate('/onboarding/step4'); - }; - - const handleMicrosoftConnect = () => { - // In a real app, this would handle Microsoft OAuth - navigate('/onboarding/step4'); - }; - - const handleDiscordConnect = () => { - // In a real app, this would handle Discord OAuth - navigate('/onboarding/step4'); - }; - - const handleTwitterConnect = () => { - // In a real app, this would handle Twitter/X OAuth - navigate('/onboarding/step4'); - }; - - const handleSkip = () => { - navigate('/onboarding/step4'); - }; - - return ( -
- {/* Main content */} -
- {/* Progress indicator */} -
-
-
1
-
-
-
-
2
-
-
-
-
3
-
-
-
4
-
- - {/* Connect Account card */} -
-
-

- Connect Accounts -

-

- Connect your accounts to personalize your experience -

-
- - {/* Connection options */} -
- {/* Google */} - - - {/* Microsoft */} - - - {/* Discord */} - - - {/* Twitter/X */} - -
- - {/* Skip option */} - - - {/* Privacy note */} -
-
- - - -
-

Your data stays private

-

We only use connected accounts for account notifications and security

-
-
-
-
- - {/* Back button */} - -
-
- ); -}; - -export default Step3Connect; diff --git a/src/pages/onboarding/Step4GetStarted.tsx b/src/pages/onboarding/Step4GetStarted.tsx deleted file mode 100644 index 9def1c955..000000000 --- a/src/pages/onboarding/Step4GetStarted.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import { useNavigate } from 'react-router-dom'; -import { openUrl } from '@tauri-apps/plugin-opener'; -import { TELEGRAM_BOT_USERNAME } from '../../utils/config'; - -const Step4GetStarted = () => { - const navigate = useNavigate(); - - const handleOpenTelegram = async () => { - try { - await openUrl(`https://t.me/${TELEGRAM_BOT_USERNAME}`); - // Navigate to home after opening Telegram - setTimeout(() => { - navigate('/home'); - }, 1000); - } catch (error) { - console.error('Failed to open Telegram:', error); - } - }; - - const handleSkip = () => { - navigate('/home'); - }; - - return ( -
- {/* Main content */} -
- {/* Progress indicator */} -
-
-
1
-
-
-
-
2
-
-
-
-
3
-
-
-
4
-
- - {/* Get Started card */} -
-
-
- - - -
-

- Get Started -

-

- Start messaging the bot to begin your crypto journey -

-
- - {/* Instructions */} -
-
-
-
- 1 -
-
-

Open Telegram

-

- Click the button below to open the AlphaHuman bot in Telegram -

-
-
-
- -
-
-
- 2 -
-
-

Start Messaging

-

- Send a message to the bot to get started. Try asking about crypto prices, market trends, or anything crypto-related! -

-
-
-
- -
-
-
- 3 -
-
-

Cook! 🔥

-

- The bot will help you with research, analysis, and staying on top of the crypto market -

-
-
-
-
- - {/* Open Telegram button */} - - - {/* Skip option */} - -
- - {/* Back button */} - -
-
- ); -}; - -export default Step4GetStarted; diff --git a/src/pages/onboarding/steps/AnalyticsStep.tsx b/src/pages/onboarding/steps/AnalyticsStep.tsx new file mode 100644 index 000000000..3c7ca667f --- /dev/null +++ b/src/pages/onboarding/steps/AnalyticsStep.tsx @@ -0,0 +1,111 @@ +import { useState } from 'react'; + +interface AnalyticsStepProps { + onNext: () => void; +} + +const AnalyticsStep = ({ onNext }: AnalyticsStepProps) => { + const [selectedOption, setSelectedOption] = useState('maximumPrivacy'); + + return ( +
+
+

Analytics

+

+ Help us improve your experience while maintaining your privacy +

+
+ +
+
setSelectedOption('shareAnalytics')} + > +
+
+
+ {selectedOption === 'shareAnalytics' && ( +
+ )} +
+
+
+

Securely Share Analytics

+

+ Share anonymized usage data to help us improve features and performance. All data is encrypted and cannot be traced back to you. +

+
+
+
+ +
setSelectedOption('maximumPrivacy')} + > +
+
+
+ {selectedOption === 'maximumPrivacy' && ( +
+ )} +
+
+
+

Maximum Privacy

+

+ Keep all your data completely private. We won't collect any usage analytics, ensuring total anonymity. +

+
+ + + + Recommended for privacy +
+
+
+
+
+ + + +
+
+ + + +
+

You can change this setting anytime

+

Your privacy preferences can be updated in your account settings

+
+
+
+
+ ); +}; + +export default AnalyticsStep; diff --git a/src/pages/onboarding/steps/ConnectStep.tsx b/src/pages/onboarding/steps/ConnectStep.tsx new file mode 100644 index 000000000..0b4883cbc --- /dev/null +++ b/src/pages/onboarding/steps/ConnectStep.tsx @@ -0,0 +1,91 @@ +interface ConnectStepProps { + onNext: () => void; +} + +const ConnectStep = ({ onNext }: ConnectStepProps) => { + const handleConnect = (provider: string) => { + // In a real app, this would handle OAuth + console.log(`Connecting to ${provider}`); + onNext(); + }; + + return ( +
+
+

Connect Accounts

+

+ Connect your accounts to personalize your experience +

+
+ +
+ + + + + + + +
+ + + +
+
+ + + +
+

Your data stays private

+

We only use connected accounts for account notifications and security

+
+
+
+
+ ); +}; + +export default ConnectStep; diff --git a/src/pages/onboarding/steps/GetStartedStep.tsx b/src/pages/onboarding/steps/GetStartedStep.tsx new file mode 100644 index 000000000..62f2a72d2 --- /dev/null +++ b/src/pages/onboarding/steps/GetStartedStep.tsx @@ -0,0 +1,98 @@ +import { openUrl } from '@tauri-apps/plugin-opener'; +import { TELEGRAM_BOT_USERNAME } from '../../../utils/config'; + +interface GetStartedStepProps { + onComplete: () => void; +} + +const GetStartedStep = ({ onComplete }: GetStartedStepProps) => { + const handleOpenTelegram = async () => { + try { + await openUrl(`https://t.me/${TELEGRAM_BOT_USERNAME}`); + setTimeout(() => { + onComplete(); + }, 1000); + } catch (error) { + console.error('Failed to open Telegram:', error); + } + }; + + return ( +
+
+
+ + + +
+

Get Started

+

+ Start messaging the bot to begin your crypto journey +

+
+ +
+
+
+
+ 1 +
+
+

Open Telegram

+

+ Click the button below to open the AlphaHuman bot in Telegram +

+
+
+
+ +
+
+
+ 2 +
+
+

Start Messaging

+

+ Send a message to the bot to get started. Try asking about crypto prices, market trends, or anything crypto-related! +

+
+
+
+ +
+
+
+ 3 +
+
+

Cook! 🔥

+

+ The bot will help you with research, analysis, and staying on top of the crypto market +

+
+
+
+
+ + + + +
+ ); +}; + +export default GetStartedStep; diff --git a/src/pages/onboarding/steps/PrivacyStep.tsx b/src/pages/onboarding/steps/PrivacyStep.tsx new file mode 100644 index 000000000..a3309398b --- /dev/null +++ b/src/pages/onboarding/steps/PrivacyStep.tsx @@ -0,0 +1,52 @@ +import PrivacyFeatureCard from '../../../components/PrivacyFeatureCard'; + +interface PrivacyStepProps { + onNext: () => void; +} + +const PrivacyStep = ({ onNext }: PrivacyStepProps) => { + const privacyFeatures = [ + { + title: '🔒 Client-Side Encryption', + description: 'Your data is encrypted in your browser before it ever reaches our servers. We store only ciphertext. Without your recovery phrase, your content is cryptographically unreadable AES-256-GCM. Keys never leave your device', + }, + { + title: '🙈 Zero Admin Access', + description: 'Even with full database access, Momo admins cannot decrypt your content. Your encryption keys exist only in your browser. We have no mechanism to access them.', + }, + { + title: '🚫 Zero Data Retention', + description: 'Your data is NEVER used to train AI models. We operate under a Zero Data Retention contract with Anthropic. Your queries are processed and immediately discarded, never stored or used for training.', + }, + ]; + + return ( +
+
+

Privacy

+

+ A quick overview of how your privacy is protected with AlphaHuman +

+
+ +
+ {privacyFeatures.map((feature, index) => ( + + ))} +
+ + +
+ ); +}; + +export default PrivacyStep;