diff --git a/README.md b/README.md index b89762d..17d3df8 100644 --- a/README.md +++ b/README.md @@ -11,9 +11,11 @@ - **User-Friendly**: Designed for both crypto newcomers and seasoned users. - **Financial Inclusion**: Focused on empowering unbanked and underbanked populations, particularly in Sub-Saharan Africa. -### Request for crypto payment demo -[![Watch the video](https://img.youtube.com/vi/dQw4w9WgXcQ/0.jpg)](https://www.youtube.com/watch?v=dQw4w9WgXcQ) +### Crypto Transafer demo +[![Watch the video](https://img.youtube.com/vi/hjJZPTOf_6k/0.jpg)](https://www.youtube.com/watch?v=hjJZPTOf_6k) +### Crypto payment request +![](screenshots/request-crypto.png) ### Components SmartPesa comprises: @@ -100,3 +102,140 @@ Then the github workflows are in the .github directory in the root folder. you w for building the docker image and publishing it to dockerhub, and deploy-to-ec2.yml for deploying the image to aws ec2 instance. make sure you server is configured with docker and docker-compose. +Here’s how to run your Kotlin Multiplatform (KMP) project using Android Studio: + +--- + +## Desktop Setup (Linux) + +1. **Open the Project in Android Studio**: + - Launch Android Studio and open the root folder of your KMP project. + +2. **Select the Desktop Target**: + - In the **Run/Debug Configurations** dropdown at the top-right corner of Android Studio, select the `desktopApp` configuration. If it’s not listed: + - Go to **Run > Edit Configurations**. + - Click the "+" button, select **Gradle**, and choose the `:desktopApp:run` task. + +3. **Run the Desktop App**: + - Click the green **Run** button or press `Shift + F10`. + - The app will launch as a standalone desktop application. + +Or alternetivley run this gradlew command +```shell +./gradlew desktopRun -DmainClass=org.example.project.MainKt --quiet +``` +--- + +## Android Setup (Emulator/Physical Device) + +1. **Setup Android Studio**: + - Make sure you have the **Android SDK** installed via Android Studio. + - If you’re targeting an emulator: + - Go to **Device Manager** in Android Studio and create a new emulator. + - Start the emulator from the Device Manager. + +2. **Connect an Android Device (Optional)**: + - If using a physical device: + - Enable **Developer Mode** and **USB Debugging** on the device. + - Connect it via USB and verify it’s recognized: + ```bash + adb devices + ``` + +3. **Open the Project in Android Studio**: + - Open the same root folder of your KMP project in Android Studio. + +4. **Select the Android Target**: + - In the **Run/Debug Configurations** dropdown, select the `androidApp` configuration. If it’s missing: + - Go to **Run > Edit Configurations**. + - Click the "+" button, select **Gradle**, and choose the `:androidApp:assembleDebug` or `:androidApp:installDebug` task. + +5. **Run the Android App**: + - Click the green **Run** button or press `Shift + F10`. + - Select your target device (emulator or physical device) in the device picker dialog. + - The app will build and launch on the selected device. + +--- + +## Screenshots + +### Desktop +![](screenshots/desk1.png) +![](screenshots/desk2.png) +![](screenshots/desk3.png) +![](screenshots/desk4.png) +![](screenshots/desk5.png) + +### Android + +![](screenshots/getstarted.png) +![](screenshots/dark-mode.png) +![](screenshots/light-theme.png) +![](screenshots/webview.png) + + +### Testing Wallets + +To facilitate wallet testing, the following wallets and their recovery codes are available just import the wallets: + +- **Wallet 1** + - **Recovery Code**: `f0902bf9-8747-4b01-b928-5759590e3baa` + +- **Wallet 2** + - **Recovery Code**: `774eef0d-7192-4664-b824-5e19f376bcdd` + +If you prefer to test with a new wallet, you can request test tokens from the official [Google Faucet](https://cloud.google.com/application/web3/faucet). + +## Architecture + +The system is built using a client-server architecture, leveraging **Ktor Server** as a lightweight and asynchronous web server. Communication between the client and server is handled via REST APIs using **Ktor Client**. The server integrates with **MongoDB Atlas Cloud** for database storage and sits behind the **Circle.com programmable wallets API**, which manages authentication and regulates API interactions. The server handles key functionalities such as wallet creation, management, transactions, and the generation of crypto payment requests with QR codes. + +### Server-Side Technologies +- **Database**: MongoDB Atlas for scalable and secure cloud-based storage. +- **Programmable Wallets**: Circle.com API for secure and authenticated wallet management. +- **Dependency Injection**: Koin is used for a clean, modular, and testable server architecture. + +### Client-Side Applications +The system includes both an Android app and a desktop application, providing a seamless and visually appealing interface for interacting with the server. The client applications are designed with the following features: + +- **Networking**: Powered by **Ktor Client** for efficient API communication. +- **Key-Value Storage**: Utilized **Datastore Preferences** for persistent storage in a Kotlin Multiplatform Project (KMP) environment. +- **Navigation**: Implemented type-safe **Compose Navigation** for an intuitive and predictable user experience. +- **UI Design**: Built using **Material 3** for a modern and cohesive user interface. + +### Key Features +- **Dynamic QR Code Generation**: QR codes are dynamically updated as values change, ensuring faster and more flexible transactions. +- **QR Code Scanning**: Integrated Android camera functionality for quick QR code scanning. +- **WebView Integration**: Enables users to view their transactions directly on blockchain explorers. +- **Clipboard Functionality**: Simplifies address sharing and reduces typing errors with a copy-to-clipboard feature. +- **Dynamic Color Theme**: UI colors dynamically adjust based on images, creating a visually harmonious experience. +- **Screen Optimization**: The app is designed to minimize the number of screens, improving usability, speed, and memorability. + +### Design and Architecture +The client applications are built using the **MVVM (Model-View-ViewModel)** pattern, following clean architecture principles to ensure maintainability and scalability. + +--- + +```text +Copyright (c) 2024 Pasaka Mutuku, Smart Pesa + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + +``` + diff --git a/composeApp/src/commonMain/kotlin/org/example/presentation/screens/explorer/ExplorerScreen.kt b/composeApp/src/commonMain/kotlin/org/example/presentation/screens/explorer/ExplorerScreen.kt index 104ccda..4e4da6a 100644 --- a/composeApp/src/commonMain/kotlin/org/example/presentation/screens/explorer/ExplorerScreen.kt +++ b/composeApp/src/commonMain/kotlin/org/example/presentation/screens/explorer/ExplorerScreen.kt @@ -70,7 +70,7 @@ fun ExplorerScreen( } LaunchedEffect(state.isLoading) { - delay(5000) + delay(10000) if (state.isLoading){ uriHandler.openUri(url) onNavigateBack() diff --git a/screenshots/after-create-wallet.png b/screenshots/after-create-wallet.png new file mode 100644 index 0000000..6430eff Binary files /dev/null and b/screenshots/after-create-wallet.png differ diff --git a/screenshots/dark-mode.png b/screenshots/dark-mode.png new file mode 100644 index 0000000..121903c Binary files /dev/null and b/screenshots/dark-mode.png differ diff --git a/screenshots/desk1.png b/screenshots/desk1.png new file mode 100644 index 0000000..249ca76 Binary files /dev/null and b/screenshots/desk1.png differ diff --git a/screenshots/desk2.png b/screenshots/desk2.png new file mode 100644 index 0000000..51a28c1 Binary files /dev/null and b/screenshots/desk2.png differ diff --git a/screenshots/desk3.png b/screenshots/desk3.png new file mode 100644 index 0000000..3d00d0d Binary files /dev/null and b/screenshots/desk3.png differ diff --git a/screenshots/desk4.png b/screenshots/desk4.png new file mode 100644 index 0000000..8d637ba Binary files /dev/null and b/screenshots/desk4.png differ diff --git a/screenshots/desk5.png b/screenshots/desk5.png new file mode 100644 index 0000000..d256932 Binary files /dev/null and b/screenshots/desk5.png differ diff --git a/screenshots/getstarted.png b/screenshots/getstarted.png new file mode 100644 index 0000000..7f12eac Binary files /dev/null and b/screenshots/getstarted.png differ diff --git a/screenshots/light-theme.png b/screenshots/light-theme.png new file mode 100644 index 0000000..b7d7fa5 Binary files /dev/null and b/screenshots/light-theme.png differ diff --git a/screenshots/request-crypto.png b/screenshots/request-crypto.png new file mode 100644 index 0000000..afeb682 Binary files /dev/null and b/screenshots/request-crypto.png differ diff --git a/screenshots/webview.png b/screenshots/webview.png new file mode 100644 index 0000000..8dbc958 Binary files /dev/null and b/screenshots/webview.png differ