Amando

A decentralized Web3 Auto Market Maker Protocol for seamless token trading, liquidity provision, and yield farming.

Overview

AMANDO is an open-source frontend application for a community-driven Web3 Auto Market Maker (AMM) Protocol. Built with Next.js and TypeScript, it provides a user-friendly interface for interacting with decentralized finance (DeFi) features such as wallet management, token swaps, liquidity provision, yield farming, and initial public offerings (IPOs) on blockchain networks like Ethereum and Binance Smart Chain.

Inspired by the Figma design titled "Amando Web3 Auto Market Maker Protocol (Community)" (view on Figma), the app follows a structured user flow: starting from the Home page, users can connect or create wallets, import existing ones, view wallet details, buy tokens, perform swaps, add liquidity to pools, engage in farming, explore "Jungles" (a gamified yield opportunity), and participate in IPOs. The project emphasizes security, usability, and extensibility, integrating real blockchain interactions via libraries like Ethers.js, Web3.js, and BIP39 for mnemonic-based wallet generation.

This repository serves as a learning and development project to hone frontend skills in React ecosystems while implementing production-ready crypto wallet functionalities. Currently, it covers the core wallet onboarding flows with full backend simulation for cryptographic operations. Try the live demo at amando.vercel.app.

Features

Wallet Management: Securely create new wallets using BIP39 mnemonics, import via private keys, seed phrases, or addresses. Supports hierarchical deterministic (HD) key derivation for multi-account setups.
Multi-Wallet Integration: Connect to popular wallets like MetaMask, WalletConnect, Coinbase Wallet, Trust Wallet, and Binance Chain Wallet using Web3-React connectors.
Real-Time Blockchain Interactions: Generate, sign, and broadcast transactions with Ethers.js. Fetch balances, derive addresses, and handle encryption/decryption with Crypto-JS and BcryptJS.
Responsive UI/UX: Dark/light theme toggle with Next-Themes. Custom icons for coins (e.g., ETH, BTC, BNB) and social/wallet integrations. Components like modals, drawers, cards, and forms for intuitive navigation.
Form Validation & State Management: Powered by React Hook Form with Zod resolvers and Redux Toolkit for global state (e.g., wallet slices for creation and toggles).
DeFi Primitives: Placeholder setups for swaps (via Uniswap/SushiSwap icons), liquidity pools, staking/farming cards, and token buying interfaces.
Security Focus: Client-side encryption for sensitive data (mnemonics, private keys). Copy-to-clipboard hooks with verification icons.
Performance Optimizations: Turbopack for dev server, Tailwind CSS for styling, and ESLint/TypeScript for code quality.

The app is designed to be extensible, allowing easy integration with real AMM contracts (e.g., for automated market making) in future iterations.

Live Trading Deals

AMANDO offers exciting opportunities for staking and yield farming with high APRs. Below are some of the current deals:

Balance: 0.00 AM
Stake AM:
- Earn AM with 396.44% APR (x2 opportunities).
- Earn WBNB with 122.63% APR (x3 opportunities).
Top Farms:
- AM-USDC Liquidity: $3,611.823 with 425.85% APR (x4 opportunities).

These deals are designed to maximize returns for users participating in the AMANDO ecosystem. Future updates will integrate real-time data feeds for live APRs and liquidity pools.

Project Structure

The project follows a modular monorepo structure optimized for Next.js App Router. Key directories include:

Root: Configuration files (e.g., next.config.ts, tsconfig.json, tailwind.config.ts) and dependencies.
src/: Core source code.
- app/: Next.js pages and layouts (e.g., Home, Wallet routes with subpaths for create/import/backup).
- components/: Reusable UI elements (e.g., ConnectWalletModal, PrivateKeyForm, StakeCard).
- config/: App-wide settings (e.g., fonts).
- hooks/: Custom React hooks (e.g., useToggle, useCopyToClipboard).
- icons/: SVG React components for UI icons (coins, social, navigation).
- services/: Blockchain services (e.g., WalletServices.ts for Ethers interactions).
- store/: Redux slices (e.g., walletSlice.ts for state management).
- styles/: Global CSS with Tailwind.
- utils/: Helper functions (e.g., formatting utilities).

└── amando/
    ├── LICENSE
    ├── README.md
    ├── eslint.config.mjs
    ├── next.config.ts
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.mjs
    ├── public
    │   ├── banner-bg.svg
    │   ├── favicon.ico
    │   ├── file.svg
    │   ├── globe.svg
    │   ├── next.svg
    │   ├── vercel.svg
    │   └── window.svg
    ├── src
    │   ├── app
    │   ├── components
    │   ├── config
    │   ├── data
    │   ├── hooks
    │   ├── icons
    │   ├── services
    │   ├── store
    │   ├── styles
    │   └── utils
    ├── tailwind.config.ts
    └── tsconfig.json

Project Index

AMANDO/

__root__

package-lock.json NPM dependency lockfile for reproducible builds.

next.config.ts Next.js configuration for transpilation, bundling, and optimizations.

tsconfig.json TypeScript compiler options for strict typing and module resolution.

eslint.config.mjs ESLint configuration for code linting and Next.js integration.

postcss.config.mjs PostCSS setup for Tailwind CSS processing.

package.json Project metadata, scripts, and dependency declarations.

tailwind.config.ts Tailwind CSS theme customization (colors, fonts, plugins).

src

styles

globals.css Global styles with Tailwind directives and custom resets.

config

fonts.ts Font configurations for Next.js font optimization.

components

ThemeSwich.tsx Toggle for dark/light themes using Next-Themes.

Alert.tsx Reusable alert component for notifications.

Breadcrumb.tsx Navigation breadcrumb for page hierarchy.

TradeDeal.tsx Card for displaying trade opportunities.

Button.tsx Customizable button with variants and loading states.

SeedItem.tsx Item renderer for mnemonic seed phrases.

FeedbackModal.tsx Modal for user feedback submission.

Logo.tsx AMANDO logo component with responsive sizing.

BalanceCard.tsx Card displaying wallet balances with token icons.

MenuItem.tsx Navigation menu items with icons.

ConnectWalletModal.tsx Modal for wallet connection options.

Checkbox.tsx Custom checkbox for forms.

PhraseForm.tsx Form for importing wallets via seed phrases.

AddressForm.tsx Form for address input and validation.

Header.tsx App header with navigation and wallet status.

PrivateKeyForm.tsx Secure form for private key imports.

Social.tsx Social media link icons.

WalletConnectButton.tsx Button to initiate WalletConnect.

WalletSearch.tsx Search component for wallet addresses.

Tab.tsx Tabbed interface for multi-view content.

StakeCard.tsx Card for staking positions.

BannerCard.tsx Promotional banner with call-to-action.

Modal.tsx Base modal component with overlays.

FarmCard.tsx Card for yield farming opportunities.

Drawer.tsx Side drawer for mobile navigation.

hooks

useToggle.ts Hook for boolean state toggling (e.g., modals).

useCopyToClipboard.ts Hook for secure clipboard copying with feedback.

store

walletCreateSlice.ts Redux slice for wallet creation state.

walletSlice.ts Core Redux slice for wallet data and actions.

index.ts Redux store configuration and provider setup.

toggleSlice.ts Redux slice for UI toggles (e.g., theme).

utils

format.ts Utility functions for formatting addresses, balances, and dates.

services

WalletServices.ts Service layer for Ethers.js wallet operations (generate, import, sign).

app

layout.tsx Root layout with providers (Redux, Theme).

page.tsx Home page with banner and quick actions.

wallet

page.tsx Wallet dashboard overview.

import

page.tsx Wallet import page with form selectors.

create

page.tsx New wallet creation initiation.

backup

page.tsx Seed phrase backup instructions.

confirm

page.tsx Confirmation of backup understanding.

verify

page.tsx Seed phrase verification quiz.

icons

Bell.tsx Notification bell icon.

Jungle.tsx Jungle feature icon.

Copy.tsx Copy action icon.

IPO.tsx IPO launch icon.

Refresh.tsx Refresh/reload icon.

Twitter.tsx Twitter social icon.

Infornation.tsx Information/info icon (note: typo in filename).

Youtube.tsx YouTube social icon.

Search.tsx Search magnifying glass.

Error.tsx Error/warning icon.

DEX.tsx DEX exchange icon.

Scan.tsx QR code scan icon.

Reddit.tsx Reddit social icon.

Sun.tsx Sun for light theme.

Avatar.tsx User avatar placeholder.

CopyCheck.tsx Verified copy icon.

Wallet.tsx Wallet icon.

Check.tsx Checkmark for success.

Shield.tsx Security shield icon.

Warning.tsx Warning triangle.

Home.tsx Home navigation icon.

Pool.tsx Liquidity pool icon.

ArrowRight.tsx Right arrow for navigation.

Telegram.tsx Telegram social icon.

Moon.tsx Moon for dark theme.

Farm.tsx Farming/yield icon.

type.ts Icon component types.

ArrowLeft.tsx Left arrow for back navigation.

Facebook.tsx Facebook social icon.

coin

CAKE.tsx PancakeSwap token icon.

XRP.tsx XRP token icon.

STELLA.tsx Stella token icon.

CURVE.tsx Curve Finance icon.

AM.tsx AM token icon.

ATOM.tsx Cosmos ATOM icon.

USDC.tsx USDC stablecoin icon.

ARS.tsx ARS token icon.

SAKESWAP.tsx SakeSwap DEX icon.

UNISWAP.tsx Uniswap DEX icon.

ETH.tsx Ethereum ETH icon.

VND.tsx VND token icon.

BAND.tsx Band Protocol icon.

SUSHISWAP.tsx SushiSwap DEX icon.

AAVE.tsx Aave lending icon.

BTC.tsx Bitcoin BTC icon.

BAT.tsx Basic Attention Token icon.

BUSD.tsx BUSD stablecoin icon.

DTP.tsx DTP token icon.

ADA.tsx Cardano ADA icon.

USD.tsx USD fiat icon.

DEFIBOX.tsx DefiBox DEX icon.

BNB.tsx BNB Chain icon.

O3.tsx O3 token icon.

TEZOS.tsx Tezos XTZ icon.

BCH.tsx Bitcoin Cash icon.

EUR.tsx EUR fiat icon.

USDT.tsx USDT stablecoin icon.

FIL.tsx Filecoin FIL icon.

BEEFY.tsx Beefy Finance icon.

ONEINCH.tsx 1inch aggregator icon.

wallet

Binance.tsx Binance Wallet icon.

Connect.tsx WalletConnect icon.

Coinbase.tsx Coinbase Wallet icon.

Metamask.tsx MetaMask icon.

Trust.tsx Trust Wallet icon.

Getting Started

Prerequisites

Before getting started with AMANDO, ensure your runtime environment meets the following requirements:

Node.js: Version 18 or higher (for ES modules and modern JS features).
Programming Language: TypeScript 5+ (strict mode enabled).
Package Manager: npm 9+ (or yarn/pnpm as alternatives).
Browser: Modern browsers with Web3 support (e.g., Chrome, Firefox) for testing wallet connections.
Git: For cloning the repository.

Installation

Install AMANDO using one of the following methods:

Build from source:

Clone the AMANDO repository:

❯ git clone https://github.com/batukaraman/amando

Navigate to the project directory:
```
❯ cd amando
```
Install the project dependencies:

Using npm

❯ npm install

Usage

Run AMANDO using the following command: Using npm

❯ npm run dev

This starts the development server at http://localhost:3000. Open the URL in your browser to access the Home page and begin wallet interactions. For a live preview, visit amando.vercel.app.

For production builds:

❯ npm run build
❯ npm start

Testing

Run the test suite using the following command: Using npm

❯ npm run lint

Note: Unit/integration tests are planned for future milestones using Jest or Vitest. Currently, focus on manual testing for wallet flows.

Project Roadmap

The roadmap aligns with the Figma design flows, prioritizing wallet onboarding before DeFi features.

Contributions to accelerate these tasks are welcome!

Contributing

AMANDO is a community project, and contributions are encouraged to enhance its DeFi capabilities.

💬 Join the Discussions: Share your insights, provide feedback, or ask questions about the codebase or design.
🐛 Report Issues: Submit bugs found (e.g., wallet import edge cases) or log feature requests for the AMANDO project.
💡 Submit Pull Requests: Review open PRs, and submit your own PRs for new components or fixes.

Contributing Guidelines

Fork the Repository: Start by forking the project repository to your GitHub account.
Clone Locally: Clone the forked repository to your local machine using a Git client.
```
git clone https://github.com/batukaraman/amando
```
Create a New Branch: Always work on a new branch, giving it a descriptive name.
```
git checkout -b feature/wallet-enhancements
```
Make Your Changes: Develop and test your changes locally. Ensure TypeScript compiles and ESLint passes.
Commit Your Changes: Commit with a clear message describing your updates.
```
git commit -m 'feat: add transaction history to wallet details'
```
Push to GitHub: Push the changes to your forked repository.
```
git push origin feature/wallet-enhancements
```
Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes, motivations, and any testing done.
Review: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!

Contributor Graph

License

This project is protected under the MIT License. For more details, refer to the LICENSE file.

Acknowledgments

Design Inspiration: Figma prototype "Amando Web3 Auto Market Maker Protocol (Community)" (view on Figma) for UI/UX flows.
Live Demo: Explore the deployed app at amando.vercel.app.
Libraries: Gratitude to the maintainers of Next.js, Ethers.js, Redux Toolkit, Tailwind CSS, and Web3-React for powering the stack.
Icons: Custom SVGs derived from React Icons and community contributions.
Community: Early feedback from DeFi enthusiasts on wallet security and AMM mechanics.
Learning Resources: Documentation from BIP39, HDKey, and Web3.js for cryptographic implementations.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Amando

Table of Contents

Overview

Features

Live Trading Deals

Project Structure

Project Index

Getting Started

Prerequisites

Installation

Usage

Testing

Project Roadmap

Contributing

License

Acknowledgments

About

Uh oh!

Releases

Packages

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
public		public
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

package-lock.json	`NPM dependency lockfile for reproducible builds.`
next.config.ts	`Next.js configuration for transpilation, bundling, and optimizations.`
tsconfig.json	`TypeScript compiler options for strict typing and module resolution.`
eslint.config.mjs	`ESLint configuration for code linting and Next.js integration.`
postcss.config.mjs	`PostCSS setup for Tailwind CSS processing.`
package.json	`Project metadata, scripts, and dependency declarations.`
tailwind.config.ts	`Tailwind CSS theme customization (colors, fonts, plugins).`

ThemeSwich.tsx	`Toggle for dark/light themes using Next-Themes.`
Alert.tsx	`Reusable alert component for notifications.`
Breadcrumb.tsx	`Navigation breadcrumb for page hierarchy.`
TradeDeal.tsx	`Card for displaying trade opportunities.`
Button.tsx	`Customizable button with variants and loading states.`
SeedItem.tsx	`Item renderer for mnemonic seed phrases.`
FeedbackModal.tsx	`Modal for user feedback submission.`
Logo.tsx	`AMANDO logo component with responsive sizing.`
BalanceCard.tsx	`Card displaying wallet balances with token icons.`
MenuItem.tsx	`Navigation menu items with icons.`
ConnectWalletModal.tsx	`Modal for wallet connection options.`
Checkbox.tsx	`Custom checkbox for forms.`
PhraseForm.tsx	`Form for importing wallets via seed phrases.`
AddressForm.tsx	`Form for address input and validation.`
Header.tsx	`App header with navigation and wallet status.`
PrivateKeyForm.tsx	`Secure form for private key imports.`
Social.tsx	`Social media link icons.`
WalletConnectButton.tsx	`Button to initiate WalletConnect.`
WalletSearch.tsx	`Search component for wallet addresses.`
Tab.tsx	`Tabbed interface for multi-view content.`
StakeCard.tsx	`Card for staking positions.`
BannerCard.tsx	`Promotional banner with call-to-action.`
Modal.tsx	`Base modal component with overlays.`
FarmCard.tsx	`Card for yield farming opportunities.`
Drawer.tsx	`Side drawer for mobile navigation.`

useToggle.ts	`Hook for boolean state toggling (e.g., modals).`
useCopyToClipboard.ts	`Hook for secure clipboard copying with feedback.`

walletCreateSlice.ts	`Redux slice for wallet creation state.`
walletSlice.ts	`Core Redux slice for wallet data and actions.`
index.ts	`Redux store configuration and provider setup.`
toggleSlice.ts	`Redux slice for UI toggles (e.g., theme).`

layout.tsx	`Root layout with providers (Redux, Theme).`
page.tsx	`Home page with banner and quick actions.`

Bell.tsx	`Notification bell icon.`
Jungle.tsx	`Jungle feature icon.`
Copy.tsx	`Copy action icon.`
IPO.tsx	`IPO launch icon.`
Refresh.tsx	`Refresh/reload icon.`
Twitter.tsx	`Twitter social icon.`
Infornation.tsx	`Information/info icon (note: typo in filename).`
Youtube.tsx	`YouTube social icon.`
Search.tsx	`Search magnifying glass.`
Error.tsx	`Error/warning icon.`
DEX.tsx	`DEX exchange icon.`
Scan.tsx	`QR code scan icon.`
Reddit.tsx	`Reddit social icon.`
Sun.tsx	`Sun for light theme.`
Avatar.tsx	`User avatar placeholder.`
CopyCheck.tsx	`Verified copy icon.`
Wallet.tsx	`Wallet icon.`
Check.tsx	`Checkmark for success.`
Shield.tsx	`Security shield icon.`
Warning.tsx	`Warning triangle.`
Home.tsx	`Home navigation icon.`
Pool.tsx	`Liquidity pool icon.`
ArrowRight.tsx	`Right arrow for navigation.`
Telegram.tsx	`Telegram social icon.`
Moon.tsx	`Moon for dark theme.`
Farm.tsx	`Farming/yield icon.`
type.ts	`Icon component types.`
ArrowLeft.tsx	`Left arrow for back navigation.`
Facebook.tsx	`Facebook social icon.`

CAKE.tsx	`PancakeSwap token icon.`
XRP.tsx	`XRP token icon.`
STELLA.tsx	`Stella token icon.`
CURVE.tsx	`Curve Finance icon.`
AM.tsx	`AM token icon.`
ATOM.tsx	`Cosmos ATOM icon.`
USDC.tsx	`USDC stablecoin icon.`
ARS.tsx	`ARS token icon.`
SAKESWAP.tsx	`SakeSwap DEX icon.`
UNISWAP.tsx	`Uniswap DEX icon.`
ETH.tsx	`Ethereum ETH icon.`
VND.tsx	`VND token icon.`
BAND.tsx	`Band Protocol icon.`
SUSHISWAP.tsx	`SushiSwap DEX icon.`
AAVE.tsx	`Aave lending icon.`
BTC.tsx	`Bitcoin BTC icon.`
BAT.tsx	`Basic Attention Token icon.`
BUSD.tsx	`BUSD stablecoin icon.`
DTP.tsx	`DTP token icon.`
ADA.tsx	`Cardano ADA icon.`
USD.tsx	`USD fiat icon.`
DEFIBOX.tsx	`DefiBox DEX icon.`
BNB.tsx	`BNB Chain icon.`
O3.tsx	`O3 token icon.`
TEZOS.tsx	`Tezos XTZ icon.`
BCH.tsx	`Bitcoin Cash icon.`
EUR.tsx	`EUR fiat icon.`
USDT.tsx	`USDT stablecoin icon.`
FIL.tsx	`Filecoin FIL icon.`
BEEFY.tsx	`Beefy Finance icon.`
ONEINCH.tsx	`1inch aggregator icon.`

Binance.tsx	`Binance Wallet icon.`
Connect.tsx	`WalletConnect icon.`
Coinbase.tsx	`Coinbase Wallet icon.`
Metamask.tsx	`MetaMask icon.`
Trust.tsx	`Trust Wallet icon.`

Folders and files

Latest commit

History

Repository files navigation

Amando

Table of Contents

Overview

Features

Live Trading Deals

Project Structure

Project Index

Getting Started

Prerequisites

Installation

Usage

Testing

Project Roadmap

Contributing

License

Acknowledgments

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Packages