A production-ready Next.js template for building decentralized applications (dApps) on Movement Network with comprehensive wallet integration, network switching, message signing, and transaction capabilities.
- 🔌 Wallet Connectivity: Support for AIP-62 compatible wallets
- 🌐 Network Management: Seamless switching between Movement Network mainnet and testnet
- ✍️ Message Signing: "Hello World" message signing with signature display
- 💸 Token Transfers: Native MOVE token transfer functionality (1 MOVE default)
- 🎨 Modern UI: Built with shadcn/ui components and Tailwind CSS
- 📱 Responsive Design: Mobile-first approach with beautiful microinteractions
- 🌙 Theme Support: Light/dark mode with system preference detection
- ⚡ TypeScript: Full type safety with Aptos SDK integration
- Node.js 18+
- npm, yarn, or pnpm
- AIP-62 compatible wallet (Petra, Nightly, Martian, etc.)
-
Fork or clone this repository
git clone https://github.com/yourusername/movement-connectwallet-template.git cd movement-connectwallet-template -
Install dependencies
npm install # or yarn install # or pnpm install
-
Start the development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser Navigate to http://localhost:3000
movement-connectwallet-template/
├── app/ # Next.js App Router
│ ├── globals.css # Global styles and Tailwind CSS
│ ├── layout.tsx # Root layout with providers
│ └── page.tsx # Main page component
├── components/ # React components
│ ├── ui/ # shadcn/ui components
│ ├── header.tsx # Application header
│ ├── wallet-provider.tsx # Aptos wallet adapter provider
│ ├── wallet-selection-modal.tsx # Custom wallet selection modal
│ ├── wallet-demo-content.tsx # Main wallet interaction interface
│ ├── switch-network.tsx # Network switching component
│ ├── sign-message.tsx # Message signing functionality
│ ├── send-transaction.tsx # Token transfer component
│ └── theme-toggle.tsx # Theme switching component
├── lib/ # Utility functions
├── types/ # TypeScript type definitions
├── hooks/ # Custom React hooks
└── public/ # Static assets
The template is pre-configured for Movement Network with the following settings:
- Mainnet: Chain ID 126, RPC:
https://full.mainnet.movementinfra.xyz/v1 - Testnet: Chain ID 250, RPC:
https://full.testnet.movementinfra.xyz/v1
Configuration is handled in components/wallet-provider.tsx:
const aptosConfig = new AptosConfig({
network: Network.MAINNET,
fullnode: "https://full.mainnet.movementinfra.xyz/v1",
});Create a .env.local file in the root directory for custom configurations:
# Optional: Custom RPC endpoints
NEXT_PUBLIC_MAINNET_RPC=https://full.mainnet.movementinfra.xyz/v1
NEXT_PUBLIC_TESTNET_RPC=https://full.testnet.movementinfra.xyz/v1
# Optional: Custom chain IDs
NEXT_PUBLIC_MAINNET_CHAIN_ID=126
NEXT_PUBLIC_TESTNET_CHAIN_ID=250This template supports all AIP-62 compatible wallets:
- Petra - Official Aptos wallet
- Nightly - Multi-chain wallet with Movement Network support
- Martian - Aptos ecosystem wallet
- Pontem - Aptos DeFi wallet
- Any other AIP-62 compatible wallet
- Click "Connect Wallet" on the homepage
- Select your wallet from the custom modal
- Approve connection in your wallet
- Start interacting with Movement Network features
The template includes a custom wallet selection modal built with shadcn/ui components, giving you full control over the design and user experience without being tied to specific UI frameworks.
- Mainnet: Production environment with real MOVE tokens
- Testnet: Development environment with test MOVE tokens
The network switcher automatically:
- Updates the application state
- Synchronizes with your connected wallet
- Provides visual feedback for the current network
- Handles network-specific configurations
The template automatically detects and displays:
- Current network name
- Chain ID
- Connection status
- Network-specific features
- Connect your wallet to the application
- Navigate to the Sign Message section
- Click "Sign Message"
- Approve the signature request in your wallet
- View the signed message and signature
This feature is perfect for:
- Verifying wallet connectivity
- Testing signature capabilities
- Building authentication flows
- Educational purposes
- Ensure you have MOVE tokens in your wallet
- Enter the recipient address (valid Movement Network address)
- Confirm the 1 MOVE amount (pre-filled for convenience)
- Approve the transaction in your wallet
- Monitor transaction status with real-time updates
- Pre-filled amount: 1 MOVE token (easily customizable)
- Address validation: Ensures valid Movement Network addresses
- Transaction confirmation: Clear confirmation before submission
- Status tracking: Real-time updates on transaction progress
- Success feedback: Toast notifications and transaction details
The template uses shadcn/ui components for a consistent, accessible, and beautiful user interface:
- Button: Multiple variants and sizes
- Card: Clean content containers
- Dialog: Modal components
- Dropdown: Network selection
- Toast: Notification system
- Theme toggle: Light/dark mode switching
All components are fully customizable:
- Modify colors and themes in
app/globals.css - Customize component variants in individual component files
- Add new components following the existing patterns
- Override default styles with Tailwind CSS classes
# Development
npm run dev # Start development server with Turbopack
npm run build # Build for production
npm run start # Start production server
# Code Quality
npm run lint # Run ESLint
npm run lint:fix # Fix ESLint issues
npm run format # Format code with Prettier
npm run format:check # Check code formatting- Create new components in the
components/directory - Add new pages in the
app/directory - Extend wallet functionality in
components/wallet-provider.tsx - Add new UI components using shadcn/ui patterns
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Movement Network for building an amazing blockchain
- Aptos Labs for the excellent SDK and wallet adapter
- shadcn/ui for the beautiful component library
- Next.js for the powerful React framework
- GitHub Issues: Report bugs or request features
- Documentation: Check the Movement Network docs