Alarm Clock App

This is a hybrid mobile application built with Ionic, React, and Capacitor. It's a feature-rich alarm clock that integrates with the Solana blockchain to provide a unique "pay to snooze" feature.

🚀 Getting Started

Prerequisites

• Node.js (version specified in .nvmrc)
• npm or yarn package manager
• Android Studio (for Android development)
• Xcode (for iOS development)

Installation

# Clone the repository
git clone <repository-url>
cd sak

# Install dependencies
npm install

# Set up environment variables
cp .env.local.example .env.local
# Edit .env.local with your API keys

Development

# Start development server
ionic serve
or
npm run dev

# Lint code
npm run lint

# Format code
npm run format

Building

# Build for production
npm run build

# Preview production build
npm run preview

Mobile Development

# Build
npm run build

# Sync with Capacitor
npx cap sync

# Open in Android Studio
npx cap open android

# Open in Xcode
npx cap open ios

Core Features

• Multiple Alarms: Users can set multiple alarms with different times, labels, and repeat settings.
• Native Integration: The app uses a custom Capacitor plugin to interact with the native Android/iOS alarm services, ensuring that alarms go off even when the app is in the background or the device is locked.
• Full-Screen Alarms: When an alarm rings, it displays a full-screen notification, making it hard to miss.
• Privy Integration: The app uses Privy for user authentication and wallet management. Users can log in with their email or a crypto wallet.
• Pay to Snooze: This is a unique feature that requires the user to pay a small amount of SOL (the native cryptocurrency of the Solana blockchain) to snooze an alarm. This is designed to incentivize users to wake up on time.
• Haptic Feedback: The app uses haptic feedback to provide a better user experience.

Important Notes

• iOS Compatibility: The core alarm functionality has been developed and tested for Android only. While the app can be compiled for iOS, the native alarm features have not been verified on iOS devices and may require adjustments to the native plugin for full compatibility.

• Dependency Review: The project uses @mahermaker/android-alarm-manager for native alarm scheduling. This library is not widely popular. While a high-level review of its integration did not find any obvious vulnerabilities, a thorough security audit of this dependency is recommended for production use.

• Custom Sounds: The functionality for custom alarm sounds is not currently implemented. The application defaults to the system's standard alarm sound. This feature requires further development in the AlarmManagerPlugin and the native code if desired.

Project Structure

Here's a breakdown of the project's structure and the purpose of each file:

Root Directory

• package.json: Defines the project's dependencies, scripts, and metadata.
• index.ts, trustedSetups.ts, trustedSetups_cjs.ts: These files seem to be related to the project's setup, but their specific purpose is not immediately clear from their content.

public Directory

This directory contains the public assets of the application, such as icons and sounds.

• public/assets/icons: Contains the application's icons in various sizes.
• public/assets/sounds: Contains the alarm sounds.
• public/favicon.png, public/manifest.json: Standard web app assets.

resources Directory

This directory contains resources for the native mobile app, suchs as the app icon and splash screen.

• resources/icon.png: The app icon.
• resources/splash.png: The splash screen.

src Directory

This is the main directory of the application, containing all the source code.

src/main.tsx

This is the entry point of the React application. It sets up the root component, including the QueryClientProvider for data fetching and the ConfigProvider for theming.

src/App.tsx

This is the main component of the application. It sets up the basic layout with Ionic's IonApp, IonReactRouter, and IonTabs. It also wraps the application with the PrivyProvider for authentication and the FirstLaunchWrapper.

src/pages

This directory contains the main pages of the application.

• src/pages/Alarm.tsx: This page displays the main alarm clock interface. It renders the AlarmClock component.
• src/pages/Login.tsx: This page handles user authentication. It provides options to log in with an email or a crypto wallet using Privy.
• src/pages/Settings.tsx: This page allows the user to manage application permissions, specifically the "Display Over Other Apps" permission, which is crucial for the alarm functionality.

src/components

This directory contains the reusable components of the application.

• src/components/AlarmClock.tsx: This is the core component of the application. It handles everything related to alarms, including creating, displaying, editing, and deleting alarms. It also implements the "pay to snooze" feature by interacting with the user's Privy wallet.
• src/components/ProtectedRoute.tsx: This component protects routes that require authentication. It redirects unauthenticated users to the login page.
• src/components/FirstLaunchWrapper/FirstLaunchWrapper.tsx: This component handles the logic that should only run on the first launch of the app, such as requesting necessary permissions.
• src/components/PrivyProvider.tsx: This component configures and provides the Privy authentication context to the application.
• src/components/BottomNavbar/: This component is currently not used in the application.
• src/components/WalletBalance/: This component displays the user's wallet balance.

src/hooks

This directory contains the custom hooks of the application.

• src/hooks/useOverlayPermission.ts: This hook checks and requests the "Display Over Other Apps" permission.
• src/hooks/usePrivyWallet.ts: This hook encapsulates all interactions with the Privy wallet, including signing transactions and sending SOL.
• src/hooks/useWalletBalance.ts: This hook fetches and manages the user's wallet balance.

src/services

This directory contains the services that interact with external APIs or the Solana blockchain.

• src/services/solanaService.ts: This service provides utility functions for interacting with the Solana blockchain, such as getting the balance of a wallet.

src/plugins

This directory contains the custom Capacitor plugins.

• src/plugins/AlarmManagerPlugin.ts: This file defines the interface for the custom AlarmManager Capacitor plugin, which is responsible for interacting with the native alarm services.

src/constants

This directory contains the constants used throughout the application.

• src/constants/routes.ts: This file defines the routes for the application.

---

Legacy Code from "steetfun"

As you mentioned, some parts of this project are leftovers from a previous application called "steetfun". This legacy code is related to token creation and management and is not used in the alarm clock application. It can be safely removed to clean up the codebase.

Here's a list of the legacy files and code that can be removed:

src/pages/CreateToken

This directory contains the UI for creating a new token. It's not used in the alarm clock application and can be removed.

src/services/pumpFunCreatedTokensService.ts

This service fetches tokens created by a wallet on the pump.fun platform. It's not used in the alarm clock application.

src/services/tokenApi.ts

This service sends a request to a backend API to create a new token. It's not used in the alarm clock application.

src/hooks (Token-related hooks)

The following hooks are all related to the token creation functionality and can be removed:

• useCreateToken.ts
• useCreateTokenWithPrivy.ts
• useCreateTokenWithPrivyHybrid.ts
• useCreatedTokens.ts
• useLaunchTokenOnly.ts
• useTokenApi.ts
• usePhotoGallery.ts: This hook is likely a leftover as well, as there is no photo gallery functionality in the alarm clock app.

src/utils

Both files in this directory are related to the legacy token functionality:

• fileUtils.ts: Contains utility functions for handling files, likely for the token image.
• keypairManager.ts: Manages Solana keypairs for token creation.

src/constants (API-related constants)

• src/constants/api.ts: Defines the base URL and endpoints for the legacy backend API.
• The createToken route in src/constants/routes.ts can be removed.
• src/constants/index.ts can be removed if api.ts is removed.

Commented out code

There is also some commented out code in src/App.tsx and src/components/Routes/Routes.tsx that is related to the legacy functionality and can be removed.

By removing all this legacy code, you will have a much cleaner and more focused codebase for your alarm clock application.