Solana Native SDK: Solana-native UX in EVM dApp (Part 2)

Wednesday, June 18, 2025

Solana-Native UX for EVM dApps: Swap Integration with Neon EVM

Welcome to Week 7 of the Neon Developer Bootcamp! This tutorial dives into integrating the Solana Native SDK by Neon EVM to enable Solana wallet interactions with an EVM-based swap application — all without requiring MetaMask or asset bridging.

We’re building a swap dApp based on Pancake swap contracts that users can interact with entirely via Solana wallets. Here’s what this integration achieves:

Connect to your frontend with Phantom
Trigger swap logic written in Solidity
Sign and submit transactions on Solana
Use the Neon Proxy to execute those transactions on Neon EVM

All swap logic, token movements, and contract execution happens on Neon EVM, but from the user's perspective, it feels native to Solana.

Architecture Walkthrough

Full Swap Lifecycle

User connects Solana wallet (Phantom)
Frontend creates a Solana transaction that:
- Approves Token A (e.g., USDC) for use by ERC20-for-SPL
- Schedules a Neon tx to perform the swap using a Router contract (e.g., PancakeSwap)
Solana transaction is submitted and confirms on-chain
Neon Proxy picks up the tx from Solana mempool and executes it on Neon
Tokens are swapped and Token B is sent back to the user’s Solana account

Solana Native SDK Integration

The demo implements several key components:

Smart Contracts: Deploys PancakeSwap exchange contracts on Neon EVM, including a factory and router
Token Creation: Creates ERC20ForSPL tokens for testing purposes
Liquidity Pools: Sets up liquidity pools for token pairs
Frontend Interface: Provides a UI for performing token swaps
Proxy Server: Handles cross-origin requests and other middleware functionality

The process flow involves:

Creating scheduled Neon EVM transactions
Signing them with Solana wallet credentials
Submitting them to the Neon EVM network via Solana
Monitoring transaction status

Repository Structure

├── frontend │ └── swap-ui # React-based UI for performing token swaps ├── pancakeswap # Scripts and configuration for PancakeSwap deployment │ ├── scripts # Deployment and configuration scripts

Prerequisites

Node.js (v16+)
Yarn package manager
Solana CLI tools
A Solana wallet with SOL tokens (for devnet)
Basic understanding of:
- Solidity and EVM-compatible smart contracts
- Token swaps and liquidity pools
- Solana transaction model

Getting Started

Environment Setup

1. Clone the repository:

‍

git clone <https://github.com/neonlabsorg/neon-solana-native-swap-demo.git> cd neon-solana-native-swap-demo

‍

2. Configure environment variables:

For the frontend:

cd frontend/swap-ui cp .env.example .env # Edit .env with your configuration

‍

For PancakeSwap deployment:

cd pancakeswap cp .env.example .env # Edit .env with your configuration

‍

Key environment variables:

# Backend & Frontend VITE_PROXY_ENV: devnet VITE_SOLANA_URL: <https://api.devnet.solana.com> VITE_NEON_CORE_API_RPC_URL: <https://devnet.neonevm.org> # Wallet Private Keys (Never commit these to git!) VITE_SOLANA_WALLET: <your_solana_private_key_in_bs58> VITE_NEON_WALLET: <your_neon_private_key> # PancakeSwap Deployment DEPLOYER_KEY: <your_evm_private_key> SOLANA_WALLET: <your_solana_private_key_in_bs58> NEON_EVM_NODE: <https://devnet.neonevm.org> NEON_FAUCET: <https://api.neonfaucet.org/request_neon> SOLANA_RPC_NODE: <https://api.devnet.solana.com>

‍

Deployment

Deploy Smart Contracts on Devnet

1. Install dependencies:

cd pancakeswap npm install

‍

2. Run the PancakeSwap setup script for deploying all contracts:

npm run deploy npm run airdrop

This script will:

Deploy WNEON contract
Deploy PancakeSwap exchange contracts (Factory and Router)
Deploy ERC20ForSPL tokens (both v1 and v2 variants)
Create token pairs and provide initial liquidity
Save all contract addresses to the artifacts folder

For more PancakeSwap deployment details, see /pancakeswap/README.md.

‍

Build and Run the Frontend

1. Install dependencies:

cd frontend/swap-ui yarn install

‍

2. Start development server:

yarn dev

‍

Running the Demo

Open the frontend application in your browser (typically at http://localhost:5173)
Connect your Solana wallet (Phantom or another compatible wallet)
Request tokens for testing:

cd pancakeswap npm run airdrop

‍

This will mint test tokens and transfer them to your wallet.

Use the swap interface to exchange tokens

‍

Adapting for Your Own Use

To adapt this demo for your own purposes:

Replace token symbols and names in pancakeswap/scripts/deploy-tokens.js
Modify the token amounts and liquidity pool configurations in pancakeswap/scripts/create-liquidity-pools.js
Update the frontend UI in frontend/swap-ui/src to match your branding

‍

Mainnet Deployment Considerations

When deploying to mainnet:

Update network configurations in .env files:
- Use mainnet RPC endpoints
- Remove faucet configurations
Ensure sufficient SOL and NEON balances in deployment wallets
Update hardhat configuration in pancakeswap/hardhat.config.js to use mainnet settings
Implement proper error handling and transaction monitoring for production use
Consider security audits for any contract modifications
Implement proper key management (never store private keys in code or env files on production)

Additional Resources

‍

Practice Exercise

Fork and customize the swap demo, using one (or all - if you wish & have time) of the following:

Replace token symbols and names in pancakeswap/scripts/deploy-tokens.js
Modify the token amounts and liquidity pool configurations in pancakeswap/scripts/create-liquidity-pools.js
Update the frontend UI in frontend/swap-ui/src to match your branding

‍

Back to Videos