DEV Community: Opeyemi Emmanuel Pcharles

Master the Usequery Method

Opeyemi Emmanuel Pcharles — Thu, 27 Mar 2025 20:43:19 +0000

Mastering API Calls in React with useQuery and TypeScript

Opeyemi Emmanuel Pcharles ・ Mar 27

#webdev #programming #mobile #typescript

Mastering API Calls in React with useQuery and TypeScript

Opeyemi Emmanuel Pcharles — Thu, 27 Mar 2025 17:34:00 +0000

When building modern web and mobile applications, efficient API data fetching and caching are crucial for performance and user experience. The useQuery hook from React Query is a game-changer in simplifying API calls, improving caching, and handling states like loading and errors seamlessly. I'll explore why and how to use useQuery effectively with TypeScript.

Why Use useQuery for API Calls?

Traditionally, developers handle API calls using useEffect and local state management. However, this approach often leads to unnecessary re-fetching, complex state handling, and redundant code. Here’s why useQuery is a better alternative:

Automatic Caching – Fetch results are cached and reused, reducing redundant network calls.
Auto Refetching – Stale data is refreshed automatically when necessary.
Better State Management – Provides built-in states like isLoading, isError, and data.
Optimistic Updates – Enhances UI responsiveness by pre-updating data before an API response.
Background Syncing – Keeps data fresh in the background without blocking UI rendering.

Setting Up React Query in Your Project
First, install react-query and @tanstack/react-query in your project:

npm install @tanstack/react-query

Then, wrap your application with the QueryClientProvider in your main entry file e.g index/app.tsx

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById('root')!).render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

const getAllChains = async () => {
  const response = await fetch('https://api.sampleapis.com/fakeapi/chains');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

export const useGetAllChains = () => {
  return useQuery({
    queryKey: ['getAllChains'],
    queryFn: getAllChains,
    staleTime: 3600000, // Cache data for 1 hour
  });
};

Explanation:

queryKey: ['getAllChains'] – Unique key to identify the query and manage caching.
queryFn – The async function fetching data from the API.
staleTime: 3600000 – Ensures data is not refetched for 1 hour

Using the Hook in a Component

Now, let's consume this hook in a React component:

import React from 'react';
import { useGetAllChains } from '../hooks/useGetAllChains';

const ChainList: React.FC = () => {
  const { data, isLoading, isError } = useGetAllChains();

  if (isLoading) return <p>Loading chains...</p>;
  if (isError) return <p>Error fetching chains.</p>;

  return (
    <ul>
      {data?.map((chain) => (
        <li key={chain.id}>{chain.name}</li>
      ))}
    </ul>
  );
};

export default ChainList;

Key Benefits:

No manual state management – isLoading and isError handle API states automatically.
Efficient caching – Prevents unnecessary API calls.
Code reusability – The useGetAllChains hook can be used across multiple components.

Conclusion

Using useQuery for API calls in React applications provides cleaner code, better caching, and improved performance. By leveraging React Query’s capabilities, you can optimize API data fetching, enhance user experience, and simplify state management.

[web3 wallet connect]

Opeyemi Emmanuel Pcharles — Wed, 26 Mar 2025 00:43:43 +0000

Smart Function to Connect a Wallet and Sign Transactions on EVM or SOL Via Phantom

Opeyemi Emmanuel Pcharles ・ Mar 25

#webdev #programming #javascript #beginners

Smart Function to Connect a Wallet and Sign Transactions on EVM or SOL Via Phantom

Opeyemi Emmanuel Pcharles — Tue, 25 Mar 2025 23:00:00 +0000

Phantom Wallet is one of the most popular wallets for interacting with the Solana blockchain. If you're building a dApp that requires users to connect their wallets and sign transactions, here's a smart way to achieve that using JavaScript or typescript.

Connecting Phantom Wallet

First, ensure the user has Phantom installed. Then, use the following function to connect

async function connectPhantom() {
  if (window.solana && window.solana.isPhantom) {
    try {
      const response = await window.solana.connect();
      console.log("Connected with public key:", response.publicKey.toString());
      return response.publicKey;
    } catch (err) {
      console.error("Connection failed", err);
    }
  } else {
    console.error("Phantom wallet not found! Install it from https://phantom.app/");
  }
}

Signing a Transaction

Once connected, you can create and sign a transaction using Phantom

async function signAndSendTransaction(transaction) {
  if (!window.solana || !window.solana.isPhantom) {
    console.error("Phantom wallet is not connected");
    return;
  }

  try {
    transaction.feePayer = window.solana.publicKey;
    transaction.recentBlockhash = (await connection.getRecentBlockhash()).blockhash;

    const signedTransaction = await window.solana.signTransaction(transaction);
    const signature = await connection.sendRawTransaction(signedTransaction.serialize());
    console.log("Transaction signature:", signature);
    return signature;
  } catch (error) {
    console.error("Transaction signing failed", error);
  }
}

Using the Functions with a Button

To integrate these functions into your UI, you can use a simple button like this

<button id="connect-button">Connect Wallet</button>
<button id="sign-button">Sign Transaction</button>

<script>
document.getElementById("connect-button").addEventListener("click", async () => {
  await connectPhantom();
});

document.getElementById("sign-button").addEventListener("click", async () => {
  const transaction = new solanaWeb3.Transaction(); // Add instructions as needed
  await signAndSendTransaction(transaction);
});
</script>

This function allows your dApp to connect with Phantom and sign transactions like swap, lend, stake or others , making it easy for users to interact with the Solana blockchain. Make sure to handle connection errors and display appropriate messages to improve user experience.

Thanks

How to Disable Screenshot Capture in Your React Native Expo App

Opeyemi Emmanuel Pcharles — Sun, 25 Aug 2024 20:04:41 +0000

Privacy and security are critical for mobile applications, developers often need to ensure that sensitive information displayed in their apps cannot be easily captured through screenshots or screen recordings. While React Native Expo provides a powerful framework for building cross-platform apps, it doesn’t offer a built-in way to disable screenshot capture. However, you can achieve this by integrating native code into your Expo project.

In this article, we’ll walk you through the steps to disable screenshot capture in your React Native Expo app for both Android

Prerequisites
Before starting, ensure you have the following:

Expo CLI installed and configured.
A basic understanding of React Native and Expo.
Familiarity with integrating native modules into an Expo project.
Why Disable Screenshot Capture?

Before diving into the technical details, let’s understand why you might want to disable screenshot capture in your app:

Security: Apps that display sensitive information, such as financial details, passwords, or personal data, should prevent unauthorized screenshots to avoid data leaks.
User Privacy: Disabling screenshots can prevent unintended sharing of private content by users.

Step 1: Ejecting from Expo Managed Workflow
Expo’s managed workflow doesn’t support adding custom native code, so you’ll need to eject your Expo project to use the bare workflow. Here’s how you can do it:

Run the following command in your project directory:
expo eject

Follow the prompts to configure your iOS and Android projects. This will generate the native iOS and Android directories required to add custom native code.

Step 2: Implementing Native Code for Android
To disable screenshot capture in Android, you need to modify the MainActivity.java file.

Open android/app/src/main/java/com/yourprojectname/MainActivity.java. Add the following code inside the onCreate method:

import android.view.WindowManager;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Prevent screenshots in the app
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_SECURE,
                         WindowManager.LayoutParams.FLAG_SECURE);
}

This code sets the FLAG_SECURE flag on the window, preventing screenshots and screen recording within the app.

Step 3: Testing Your Implementation
After implementing the native code, it’s essential to test the functionality:

On Android, try taking a screenshot within the app; it should be blocked, and the user should receive a message indicating that screenshots are not allowed.

Conclusion
Disabling screenshot capture in your React Native Expo app is crucial for protecting sensitive information. While Expo’s managed workflow doesn’t natively support this feature, by ejecting your app and adding custom native code, you can easily prevent screenshots and screen recordings.

Keep in mind that ejecting from Expo’s managed workflow adds complexity to your project.