DEV Community: royson menezes

How I integrated the blockchain donation feature in my Expo project

royson menezes — Tue, 25 Nov 2025 17:08:49 +0000

Hi! In this article, I’m going to walk you through how I integrated a blockchain-based donation system into my Expo project. I’ll explain everything step-by-step in a beginner-friendly way — why we need a global Web3 provider, how WalletConnect’s projectId and RPC URLs are created and used, and how the donation flow works in the app. I’ll also show minimal code snippets from my actual project files so you can easily follow along and implement the same setup in your own app.

Overview

Add a global Web3 provider so all screens can access wallet state (account, signer, network).
Use WalletConnect (mobile) via a projectId and RPC endpoints (Alchemy/Infura or public RPC) to talk to an Ethereum testnet/mainnet.
On the donation screen user: Connect wallet → select fund → enter ETH → Send transaction → wait for confirmation.

Prerequisites

Node / npm installed.
Expo project (your Frontend folder).
Install required packages (run in Frontend folder):

npm install wagmi viem @reown/appkit-wagmi-react-native @walletconnect/client

Why a global provider?

Centralizes wallet state (useAccount, useSigner, useBalance).
Lets components call sendTransaction / useSendTransaction without reimplementing connectors.
Handles: autoConnect, network switching, multiple connectors

Create WalletConnect Project ID

WalletConnect v2 uses a cloud projectId that enables:

the WalletConnect modal
mobile deep-linking
session management

Without projectId, wallet connection won’t work on mobile.

Go to https://cloud.walletconnect.com
Sign up or log in
Create a Project
Copy the Project ID (a long string)

This becomes your PROJECT_ID, used by the Wagmi + WalletConnect connector.

Store it in .env

Get RPC URLs

Wallet connectors need an RPC endpoint to:

read blockchain state
get balance
simulate transactions
broadcast ETH transactions

How to get RPC

Infura

Create a project
Choose the network
Copy the RPC URL using your Infura project ID

Add to `.env`

WALLETCONNECT_PROJECT_ID=your_project_id_here
RPC_GOERLI=https://eth-goerli.g.alchemy.com/v2/yourKey

Web3 Provider (create file)

Create app/Web3Provider.tsx and configure chains/connectors.

Replace your .env values where needed.

app/Web3Provider.tsx

import React from "react";
import { WagmiConfig, createClient, configureChains } from "wagmi";
import { publicProvider } from "wagmi/providers/public";
import { goerli, mainnet } from "wagmi/chains";
import { WalletConnectConnector } from "wagmi/connectors/walletConnect";
import { InjectedConnector } from "wagmi/connectors/injected";

const WALLETCONNECT_PROJECT_ID = process.env.WALLETCONNECT_PROJECT_ID || "<YOUR_PROJECT_ID>";
const RPC_GOERLI = process.env.RPC_GOERLI || "https://rpc.ankr.com/eth_goerli";

// configure chains & provider (use publicProvider or custom RPCs)
const { provider } = configureChains(
  [goerli, mainnet],
  [publicProvider()] // or add jsonRpcProvider with RPC_GOERLI
);

// create client with connectors
const client = createClient({
  autoConnect: true,
  connectors: [
    new InjectedConnector({ chains: [goerli, mainnet] }), // MetaMask web
    new WalletConnectConnector({
      options: {
        projectId: WALLETCONNECT_PROJECT_ID,
        metadata: { 
          name: "SmartVillageApp", 
          description: "Donate via Wallet", 
          url: "https://example.com" 
        },
      },
    }),
  ],
  provider,
});

export default function Web3Provider({ children }: { children: React.ReactNode }) {
  return <WagmiConfig client={client}>{children}</WagmiConfig>;
}

Note

Use your RPC URLs if you want guaranteed RPC access.
For React Native + Expo, WalletConnect deep linking behavior may need additional config; AppKit helps simplify this.

Wrap the app root with the provider

Edit app/_layout.tsx (root layout) to include Web3Provider so Wagmi hooks work everywhere.

app/_layout.tsx

import React from "react";
import Web3Provider from "./Web3Provider";
import { Slot } from "expo-router";

export default function RootLayout() {
  return (
    <Web3Provider>
      <Slot />
    </Web3Provider>
  );
}

How donation flow works in the frontend (user steps)

User opens Donation screen (app/(tabs)/villager/donation.tsx).

The app shows a Connect button (AppKitButton).
User taps Connect → WalletConnect modal / MetaMask opens → user approves the connection.
Wagmi updates the following hooks with active wallet data:
- useAccount → wallet address
- useSigner → signer for sending transactions
- useBalance → account balance
User selects a fund (e.g., education or infrastructure) and enters the donation amount.
When the user clicks Donate, the frontend sends a transaction using:
- to: recipientAddress
- value: parseEther(donationAmount) → returns a bigint
UI displays: "Waiting for Wallet..." while the transaction is pending.
After the transaction is mined:
- show Success message
- display transaction hash

Exam
ple donate call

Use parseEther and sendTransaction.

This snippet is similar to what already exists in your project:

// excerpt from donation.tsx (already present in your project)
const valueInWei = parseEther(donationAmount);
sendTransaction({
  to: recipientAddress,
  value: valueInWei,
});

Testing locally

Use Ethereum testnets such as Goerli or Sepolia
Postman note:

You can test your backend REST APIs, but on-chain blockchain transactions cannot be triggered via Postman because they require a wallet provider for signing.

Security & UX tips

Never store private keys — the wallet app signs transactions securely.
Validate user-entered amounts before sending the transaction.
Show gas estimate or at least inform users that gas fees exist.
Disable the Donate button while the transaction is pending.
Display a network mismatch warning if the user is connected to the wrong chain.
Always develop and test on testnets, not Mainnet.

Troubleshooting

If AppKitButton doesn’t open WalletConnect:
- Check if your PROJECT_ID is correct.
- Make sure Expo deep linking is properly configured.
If transactions fail:
- Verify the RPC URL.
- Confirm the chainId matches your configured chain.
- Ensure the signer is connected to the same network as your contract.
For Expo SDK mismatches:
- Update your Expo version or install a matching Expo Go build.

Database Setup for Smart Village Project: A Complete Windows Guide

royson menezes — Sat, 16 Aug 2025 14:43:12 +0000

As a student working on the Smart Village project at St. Joseph Engineering College, Mangalore, I wanted to share my experience setting up a cloud database with PostgreSQL and integrating it with Django. This guide will walk you through the entire process I followed, from creating a cloud database to verifying the connection.

Why Choose a Cloud Database?

Before diving into the setup, let me explain why I opted for a cloud database solution. A cloud-hosted database eliminates the need for local database installations, provides better accessibility across different environments, and ensures your data is available from anywhere. For this project, I chose PostgreSQL hosted on Neon.tech due to its robust features and free tier availability.

Step 1: Creating a Cloud Database with Neon.tech

Setting up your Neon account:

Navigate to neon.tech and create a free account
Once logged in, click on "Create Project"
Enter your project name: "smart-village" (or your preferred name)
Select your preferred region (choose the closest one for better performance)
Choose PostgreSQL version (latest stable version recommended)
Click "Create Project"

Getting your database credentials:

After project creation, Neon will provide you with connection details:

Host: Your database endpoint URL
Database name: Usually matches your project name
Username: Generated automatically
Password: Provided during setup (save this securely!)
Port: Default is 5432

Make sure to copy and store these credentials safely as you'll need them in the following steps.

Step 2: Local Setup with Docker and Adminer

Installing Docker Desktop:

Visit the Docker Desktop website
Download the version compatible with your Windows system
Run the installer and follow the setup wizard
During installation, Docker may prompt you to enable WSL 2 (Windows Subsystem for Linux)
Allow the WSL 2 update when prompted
Restart your computer if required
Launch Docker Desktop and wait for it to start completely

Running Adminer with Docker:

Once Docker is running, open Command Prompt or PowerShell as administrator and run:

docker run -p 8080:8080 adminer

This command will:

Download the Adminer image (if not already present)
Run Adminer on port 8080
Make it accessible via your web browser

Accessing your database through Adminer:

Open your web browser and navigate to http://localhost:8080
You'll see the Adminer login interface
Fill in your Neon database credentials:
- System: PostgreSQL
- Server: Your Neon host URL
- Username: Your Neon username
- Password: Your Neon password
- Database: Your database name
Click "Login"

Step 3: Connecting Database to Django Backend

Installing required packages:

First, ensure you have the PostgreSQL adapter for Django:

pip install psycopg2-binary

Configuring Django settings:

In your Django project's settings.py file, update the DATABASES configuration:

DATABASES = {
 'default': {
    'ENGINE': 'django.db.backends.postgresql',
    'NAME': 'your_database_name',
    'USER': 'your_username',
    'PASSWORD': 'your_password',
    'HOST': 'your_neon_host_url',
    'PORT': '5432',
    'OPTIONS': {
        'sslmode': 'require',
     },
 }
}

Environment variables (recommended approach):

For better security, create a .env file in your project root:

DB_NAME=your_database_name
DB_USER=your_username
DB_PASSWORD=your_password
DB_HOST=your_neon_host_url
DB_PORT=5432

Then update your settings.py:

import os
load_dotenv()

DATABASES = {
 'default': {
    'ENGINE': 'django.db.backends.postgresql',
    'NAME': os.getenv('DB_NAME'),
    'USER': os.getenv('DB_USER'),
    'PASSWORD': os.getenv('DB_PASSWORD'),
    'HOST': os.getenv('DB_HOST'),
    'PORT': os.getenv('DB_PORT'),
    'OPTIONS': {
        'sslmode': 'require',
    },
 }
}

Step 4: Verifying the Database Connection

Creating a test model:

Create a simple model in your Django app to test the connection. In your models.py:

from django.db import models

class TestModel(models.Model):
name = models.CharField(max_length=100)
created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
    return self.name

Running migrations:

Execute the following commands in your project directory:

Create migration files:

python manage.py makemigrations

Apply migrations to database

python manage.py migrate

Verifying in Adminer:

Return to Adminer in your browser (http://localhost:8080)
Refresh the database connection
Navigate to the tables section
You should see your newly created tables, including the TestModel table
Click on the table to view its structure and confirm it matches your Django model

Additional verification steps:

Run Django's database check command:

python manage.py check --database default

Test the connection programmatically:

python manage.py shell

In the Django shell:

from django.db import connection
cursor = connection.cursor()
cursor.execute("SELECT version()")
print(cursor.fetchone())

Conclusion

This setup provides a robust foundation for your project with a cloud-hosted PostgreSQL database that's accessible from anywhere. The combination of Neon.tech's reliable hosting, Docker's containerized Adminer interface, and Django's powerful ORM creates an efficient development environment.

Remember to keep your database credentials secure, regularly backup your data, and monitor your usage to stay within the free tier limits. As your project grows, you can easily scale your database resources through Neon's dashboard.

The cloud-based approach ensures that team members can collaborate effectively, and the setup remains consistent across different development environments. Hope this post helped you to setup your database requirement.

[Boost]

royson menezes — Sun, 23 Feb 2025 14:35:27 +0000

royson menezes

Feb 20 '25

How I did the setup for my mobile app project (ReactNative & Expo)

Comments 1

2 min read

How I did the setup for my mobile app project (ReactNative & Expo)

royson menezes — Thu, 20 Feb 2025 15:46:50 +0000

Recently, I started working on a project to develop a mobile application using React Native and Expo. Since I already have some experience with these technologies, I preferred them over Flutter and Dart.

In this guide, I'll walk you through the setup process, the tools required, and some common errors I encountered along the way.

Prerequisites:
Before getting started, ensure you have the following installed:

Node.js & NVM (Node Version Manager)

Download and install Node.js from the official website. To manage multiple Node.js versions, install NVM (useful for switching versions).
Verify the installations

```shell
node -v    # Check Node.js version  
nvm -v     # Check NVM version  
```

Git (Optional, but Recommended)

Install Git for version control and collaboration.
Useful for pushing code to platforms like GitHub or GitLab.

Setup process

Step 1: Create a New Expo Project

To create a new Expo project, run the following command and also install the required packages inside the project directory.

npx create-expo-app MyReactNativeApp     #to create project
cd MyReactNativeApp    # get into project folder
npm install       # to install dependencies for the project

This command will generate the project directory structure and essential files like App.js and installs required packages.

Step 2: Install Expo CLI Tools (optional)
Navigate to your project directory and install Expo:

npm install expo

Verify the installation:

expo -v # Check Expo version

Step 3: Start the Project and Run It
To start your project, use:

expo start

npx expo start

This will launch Expo’s development server, allowing you to test your app on a physical device (via the Expo Go app) or an emulator.

Understanding difference with npm ,npx nvm, node etc.

Term	Definition
Node.js	It's not a new programming language or framework—it’s simply the runtime environment that lets you run JavaScript on any machine, whether it’s a server, desktop, or even an embedded system.
NPM (Node Package Manager)	This is your go-to tool bundled with Node.js for installing and managing JavaScript packages, making it one of the largest software repositories available.
NPX	Similar to NPM, NPX comes bundled with it, but instead of just installing packages, it lets you execute them directly without needing a global install.
NVM (Node Version Manager)	A handy tool that allows you to switch between different versions of Node.js easily, helping you manage compatibility without any hassle.

Errors I Encountered:

NVM Setup:
I experienced issues during the NVM setup due to a conflict with another version manager called Volta. If you run into similar problems, check whether Volta is interfering with your NVM installation. Alternatively, if you prefer, you can opt to use Volta instead.
Node.js Installation Issues:
I also encountered problems installing Node.js, which were linked to an incorrect NVM configuration. Make sure that NVM is properly set up in your environment variables—for example, ensure that your PATH includes the correct NVM directories. This setup is crucial for a smooth Node.js installation.

I hope this guide helps you kickstart your React Native journey. Follow for more tips, tutorials, and updates on mobile app development!

I Explored Python Frameworks -Here’s What Stood Out

royson menezes — Sun, 02 Feb 2025 14:39:38 +0000

If you're confused about which lightweight framework to choose for your next project, we've got you covered. Discover lightweight alternatives that pack powerful features using minimal code, helping you build efficient web applications faster.

When starting a new project, one of the biggest questions that comes to mind is: What framework should I use? Each framework has its pros and cons, and in this article, we’ll dive into those to help you make an informed choice.

The project I’m currently working on is called LiveAPI a super-convenient tool designed to generate API documentation at scale. We aim to make LiveAPI compatible with all web frameworks, so developers can easily create API documentation regardless of their tech stack. To achieve this, we’ve been digging deep into how various frameworks work: from how routes are managed, to the files and dependencies they rely on.

Through this process, I’ve learned a lot, and I want to share those insights in this comparison article. Whether you're trying to pick the right framework for your SaaS project or want to learn something new about frameworks you haven’t explored yet, this guide has you covered.

Now, let’s shift our focus to minimalist frameworks—those lightweight, no-frills tools that prioritize simplicity while still getting the job done.

What Are Minimalist Frameworks?

Minimalist frameworks really cut out the unnecessary stuff and focus on the basics, making it easier and faster for you to build applications. They skip all the extra overhead that comes with larger frameworks, focusing instead on flexibility and performance. This makes them great for projects where you need to get things done quickly and efficiently.

Take Bottle, Tornado, and Falcon, for example. If you want something lightweight and fast, Bottle’s single-file design is a dream. Need to handle real-time applications? Tornado has your back with its non-blocking I/O. And for blazing-fast APIs, Falcon shines with its minimal overhead—ideal for microservices. These frameworks let you focus on what truly matters, cutting out the noise.

Ready to dive deeper? Let’s break them down.

Diving deep into Bottle, Tornado, and Falcon

Bottle:

Bottle’s biggest strength lies in its simplicity and single-file deployment, making it one of the easiest frameworks to get started with. Its minimalism allows developers to focus on writing core logic without getting bogged down in configuration. Bottle integrates well with WSGI, enabling flexible routing and templating. You can quickly build small-scale applications or lightweight APIs with just the basics like request handling and templates.

Routing and Views in Bottle

In Bottle, routes are just the URLs users hit to interact with your app. Super simple—just use @app.route() to define them and specify the HTTP method (GET, POST, etc.). That’s it!

@app.route('/user/<username>')  # URL pattern with a dynamic parameter
def profile(username):
    return f'Hello, {username}!'  # Displays the username

With Bottle, you can create web pages using templates. These templates let you add dynamic content easily. Bottle has its own template engine, but you can also use Jinja2 if you want more features.

@app.route('/posts')
def posts():
    posts = ["Post 1", "Post 2", "Post 3"]
    return template('<h1>Posts</h1><ul>{{!posts}}</ul>', posts=posts)

In this example, {{!posts}} is a placeholder in the template that will be replaced with the list of posts.

Key Features of Bottle:

Simplicity and Single-File Deployment: Build applications with just one file, making it quick and easy to get started without complex setups.
WSGI Compatibility: Easily integrates with WSGI(Web Server Gateway Interface), offering flexible routing and template management with compatibility across various web servers.

Sotong Kitchen and Scommerce use the Bottle framework for lightweight APIs and rapid development. Its minimal footprint makes it ideal for small to medium-scale projects. For more insights

If you’re working on a project where speed, simplicity, and a low learning curve are key priorities, Bottle is a fantastic choice.
For example, you could build a simple microblog application in just one file. Continue reading the full article here

DEV Community: royson menezes

How I integrated the blockchain donation feature in my Expo project

Overview

Prerequisites

Why a global provider?

Create WalletConnect Project ID

Get RPC URLs

How to get RPC

Infura

Add to .env

Web3 Provider (create file)

app/Web3Provider.tsx

Wrap the app root with the provider

app/_layout.tsx

How donation flow works in the frontend (user steps)

Testing locally

Security & UX tips

Troubleshooting

Database Setup for Smart Village Project: A Complete Windows Guide

Why Choose a Cloud Database?

Step 1: Creating a Cloud Database with Neon.tech

Step 2: Local Setup with Docker and Adminer

Step 3: Connecting Database to Django Backend

Step 4: Verifying the Database Connection

Conclusion

[Boost]

How I did the setup for my mobile app project (ReactNative & Expo)

How I did the setup for my mobile app project (ReactNative & Expo)

Setup process

I Explored Python Frameworks -Here’s What Stood Out

What Are Minimalist Frameworks?

Diving deep into Bottle, Tornado, and Falcon

Bottle:

Routing and Views in Bottle

Key Features of Bottle:

Add to `.env`