Category:
Blockchain
Share Your Requirements
Rohit Kumar Gola (Frontend-Associate Consultant L2 - Frontend Development )
Experience:1+ yrsRohit, an expert Frontend Developer with a specialized focus on ReactJs technology, possesses a profound understanding of numerous web technologies, including JavaScript, HTML, CSS, Bootstrap, MongoDB, Node.js, and Redux. He has contributed to diverse internal projects, notably a Chat application, showcasing his proficiency in crafting responsive, high-performing, and visually captivating interfaces. Passionate about his craft, Rohit eagerly tackles complex challenges while maintaining a strong drive for continual learning and growth.
Rohit Kumar Gola
(Associate Consultant L2 - Frontend Development )
Rohit, an expert Frontend Developer with a specialized focus on ReactJs technology, possesses a profound understanding of numerous web technologies, including JavaScript, HTML, CSS, Bootstrap, MongoDB, Node.js, and Redux. He has contributed to diverse internal projects, notably a Chat application, showcasing his proficiency in crafting responsive, high-performing, and visually captivating interfaces. Passionate about his craft, Rohit eagerly tackles complex challenges while maintaining a strong drive for continual learning and growth.
Languages
ENGLISH
Basic
Hindi
Fluent
Skills
Tailwind CSS
Etherscan
Redux
Coinbase API
HTML, CSS
ReactJS
Javascript
SonarQube
Ethers.js
Bootstrap
MetaMask
Frontend
Chart.js
Work
Experience /
Trainings / Internship
Feb 2024-Present
Associate Consultant - Frontend Development
Gurugram
Oodles Technologies
Gurugram
Feb 2024-Present
Feb 2024-Present
Assistant consultant -Frontend Developer
Gurugram
oodles
Gurugram
Feb 2024-Present
Education
2020-2024
B. S. Anangpuria Institute of Technology & Management
Btech CSE-CSE
Certifications
Techathon Organizer
BSAITM
Issued On
Oct 2023
Top Blog Posts
Integrating Transak into Your React App for Selling Crypto
Introduction to TransakTransak is a fiat-to-crypto on-ramp solution that allows users to buy and sell cryptocurrencies directly within their application. It offers support for multiple payment options, including bank transfers, credit/debit cards, and Apple Pay. For more about crypto, visit crypto development services.Key Features:Supports 50+ cryptocurrenciesAvailable in 100+ countriesKYC/AML complianceEasy API integrationPrerequisitesBefore we begin, ensure you have:Node.js (v16 or later) installedA basic understanding of React.jsA Transak account (register through the Transak Dashboard)Also, Read | Creating a Custom Hyperliquid Dashboard: Track Live Holdings in ReactSetting Up a VITE + React AppVite is a modern and lightning-fast build tool designed for React applications. Let's create a new project:Step 1: Create a VITE React Appnpm create vite@latest transak-vite-app --template react
cd transak-vite-app
npm install
npm run devThis will start your app athttp://localhost:5173.Step 2: Install Required Dependenciesnpm install @transak/transak-sdkIntegrating TransakTransak provides a JavaScript SDK that can be embedded in your React app.import Transak from '@transak/transak-sdk';Step 1: Button ComponentCreate a styled button that triggers the Transak widget:<button
className="sm:flex hidden items-center font-bold"
onClick={handleTransak}
>
Open Transak
</button>Step 2: Transak InitializationThe handleTransak function initializes the widget:const handleTransak = () => {
try {
const transak = new Transak({
apiKey: TRANSAK_API_KEY, // Your Transak API key
environment: STAGING, // or "PRODUCTION"
productsAvailed: "SELL", // 🟢 This enables OFF-RAMP
hideExchangeScreen: true,
themeColor: "000000",
hostURL: window.location.origin,
widgetHeight: "600px",
widgetWidth: "450px",
});
transak.init();
Transak.on(Transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, async (orderData) => {
console.log(orderData, “Order data”);
});
Transak.on(Transak.EVENTS.TRANSAK_WIDGET_CLOSE, () => {
transak.close();
transak.logoutUser();
transak.cleanup();
});
Transak.on("*", (data) => {
console.log("📦 Transak Event", data);
});
} catch (err) {
console.log(err, "transak error.");
}
};You may also like | Build a Crypto Payment Gateway Using Solana Pay and React5. Complete Code Exampleimport { Transak } from '@transak/transak-sdk';
const TransakButton = () => {
const handleTransak = () => {
try {
const transak = new Transak({
apiKey: TRANSAK_API_KEY, // Your Transak API key
environment: STAGING, // or "PRODUCTION"
productsAvailed: "SELL", // 🟢 This enables OFF-RAMP
hideExchangeScreen: true,
themeColor: "000000",
hostURL: window.location.origin,
widgetHeight: "600px",
widgetWidth: "450px",
});
transak.init();
Transak.on(Transak.EVENTS.TRANSAK_ORDER_SUCCESSFUL, async (orderData) => {
console.log(orderData, "Order data");
});
Transak.on(Transak.EVENTS.TRANSAK_WIDGET_CLOSE, () => {
transak.close();
transak.logoutUser();
transak.cleanup();
});
Transak.on("*", (data) => {
console.log("📦 Transak Event", data);
});
} catch (err) {
console.log(err, "transak error.");
}
};
return (
<button
className="flex items-center gap-2 bg-black text-white px-4 py-2 rounded-lg"
onClick={handleTransak}
>
Open Transak
</button>
);
};
export default TransakButton;Also, Discover | Developing a Cross-Platform Crypto Wallet with Web3.js & React6. ConclusionThis implementation provides:Proper off-ramp configuration (productsAvailed: "SELL")Comprehensive event handlingMemory cleanup on widget closeError handlingNext Steps:Add your production API keyImplement backend verification webhooksCustomize the widget appearance furtherFor advanced features, refer to Transak's Official Documentation.OUTPUTIf you are planning to get into the blockchain or web3 space, connect with our skilled blockchain developers to bring your vision into reality.
Rohit Kumar Gola
16 Jul 2025
Creating a Custom Hyperliquid Dashboard: Track Live Holdings in React
As the demand for decentralized derivatives exchange grows, platforms likeHyperliquid are becoming the go-to for real-time perpetual trading. If you're building a Web3 frontend or crypto portfolio tracker, showinglive token holdings directly from Hyperliquid can dramatically improve your user experience.In this guide, we'll walk you through building acustom Hyperliquid trading dashboard in React. You'll learn how to fetch and display a user's real-time balances using a clean component-based architecture.What is Hyperliquid?Hyperliquid is a high-performance, decentralized perpetual exchange offering instant finality, low fees, and composable APIs. As a trader, you can access dozens of markets with lightning-fast performance. As a developer, you can use their APIs to build dashboards, bots, and analytics tools.By integrating Hyperliquid data, you can:Fetch real-time token balances from any Hyperliquid addressBuild portfolio dashboards and analytics chartsProvide wallet-based trading interfacesAlso, Check | How to Fetch Token Pricing with On-Chain Bonding CurvesPrerequisitesBefore you start building the dashboard, ensure you have the following ready:A basic understanding of React.jsNode.js and npm/yarn installedA Hyperliquid wallet address for testingTailwind CSS or your preferred styling library (optional)Step 1: Set up Your React AppFirst, let's set up your React app if you haven't done so already:We'll useVite for lightning-fast development:# 1. Create your Vite + React project
npm create vite@latest hyperliquid-dashboard -- --template react
# 2. Navigate into the project folder
cd hyperliquid-dashboard
# 3. Install dependencies
npm install
# 4. Start the dev server
npm run devNow, install any required packages:npm install wagmi viem @tanstack/react-query @rainbow-me/rainbowkitNOTE:Now, you'll need to set up a wallet connection usingwagmi. You can follow theWagmi Quick Start Guide for configuring your wallet connection.Also, Explore | Build a Crypto Payment Gateway Using Solana Pay and ReactStep 2: Fetch Holdings DataLet's start with the custom hook to get holdings from the Hyperliquid testnet API.// components/useHyperLiquidHoldings.jsx
import { useEffect, useState } from "react";
import { useAccount } from "wagmi";
export const useHyperliquidHoldings = () => {
const [holdings, setHoldings] = useState(null);
const [loading, setLoading] = useState(false);
const { address } = useAccount();
useEffect(() => {
if (!address) {
setHoldings(null);
setLoading(false);
return;
}
const fetchHoldings = async () => {
setLoading(true);
try {
const response = await fetch("https://api.hyperliquid-testnet.xyz/info", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
type: "spotClearinghouseState",
user: address, //for testing use can use the any address like zero address 0x0000000000000000000000000000000000000000
}),
});
const data = await response.json();
setHoldings(data);
} catch (error) {
console.error("Error fetching holdings:", error);
} finally {
setLoading(false);
}
};
fetchHoldings();
}, [address]);
return { holdings, loading };
};Step 3: Create the Holdings TableNext, build a responsive table UI to display the balances.// components/HoldingTable.jsx
export default function HoldingsTable({ balances }) {
return (
<div className="table-container">
<h2 className="table-title">Your Token Balances</h2>
<div className="table-wrapper">
<table className="responsive-table">
<thead>
<tr>
<th>Coin</th>
<th>Token ID</th>
<th>Hold</th>
<th>Total</th>
<th>Entry Notional</th>
</tr>
</thead>
<tbody>
{!balances || balances.length === 0 ? (
<tr>
<td colSpan="5" className="no-data">
No balances available.
</td>
</tr>
) : (
balances.map((item, i) => (
<tr key={i}>
<td>{item.coin}</td>
<td>{item.token}</td>
<td>{item.hold}</td>
<td>{item.total}</td>
<td>{item.entryNtl}</td>
</tr>
))
)}
</tbody>
</table>
</div>
</div>
);
}Also, Discover | Create DeFi Index Fund with Custom ERC-4626 Tokenized VaultsStep 4: Build the NavbarAdd a simple navbar component for reusable top navigation.// components/Navbar.jsx
import { ConnectButton } from "@rainbow-me/rainbowkit";
import React from "react";
function Navbar() {
return (
<div className="navbar">
<h1 className="logo">HYPER LIQUID</h1>
<ConnectButton />
</div>
);
}
export default Navbar;Step 5: Set up ProvidersIf you're planning to expand later (like wallet integration), create a Providers wrapper.// components/Provider.jsx
import { WagmiProvider } from "wagmi";
import {
RainbowKitProvider,
darkTheme,
getDefaultConfig,
} from "@rainbow-me/rainbowkit";
import "@rainbow-me/rainbowkit/styles.css";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const hyperLiquidChain = {
id: 998,
name: "Hyper Liquid",
nativeCurrency: { name: "Hyper Liquid", symbol: "HYPE", decimals: 18 },
rpcUrls: {
default: { http: ["https://rpc.hyperliquid-testnet.xyz/evm"] },
},
};
const config = getDefaultConfig({
chains: [hyperLiquidChain],
projectId: "3c81036dac8bb5451ee3e10fd92ea0e0",
});
const queryClient = new QueryClient();
function Providers({ children }) {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<RainbowKitProvider
theme={darkTheme({
overlayBlur: "small",
borderRadius: "medium",
})}
modalSize="compact"
>
{children}
</RainbowKitProvider>
</QueryClientProvider>
</WagmiProvider>
);
}
export default Providers;Also, Check | Decentralized Prediction Market Development on EthereumStep 6: Compose the AppHere's how your main app logic comes together:// App.jsx
import HoldingsTable from "./components/HoldingTable";
import Navbar from "./components/Navbar";
import { useHyperliquidHoldings } from "./components/useHyperLiquidHoldings";
function App() {
const { holdings } = useHyperliquidHoldings();
return (
<div>
<Navbar />
<div className="holding-section">
<HoldingsTable balances={holdings?.balances} />
</div>
</div>
);
}
export default App;And entry point:// main.jsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.jsx";
import Providers from "./components/Provider.jsx";
createRoot(document.getElementById("root")).render(
<StrictMode>
<Providers>
<App />
</Providers>
</StrictMode>
);Step 7: Add a simple index.css file* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.navbar {
width: 100%;
padding: 10px 20px;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: space-between;
}
.holding-section {
padding: 50px;
}
.table-container {
padding: 1rem;
background-color: #1a1a1a;
color: #fff;
border-radius: 8px;
margin-top: 20px;
max-width: 100%;
overflow-x: auto;
}
.table-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
text-align: center;
}
.table-wrapper {
overflow-x: auto;
}
.responsive-table {
width: 100%;
border-collapse: collapse;
min-width: 600px;
}
.responsive-table th,
.responsive-table td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid #333;
}
.responsive-table th {
background-color: #2a2a2a;
font-weight: 600;
}
.responsive-table tr:hover {
background-color: #333;
}
.no-data {
text-align: center;
color: #ccc;
padding: 1rem;
}Step 8: Run and TestMake sure to:Replace the test wallet address inuseHyperLiquidHoldings.jsxStyle your components inindex.css or using TailwindOpen your app onhttp://localhost:5173 and view live balancesConclusionYou've just built a functional Hyperliquid dashboard that fetches and displays live wallet holdings. With this foundation, you can extend your app to support:Wallet connection via MetaMaskReal-time trade executionPnL trackingHistorical analyticsThis kind of integration gives you powerful insights into decentralized trading activities and is a stepping stone toward building full-featured Web3 trading interfaces.OutputIf you are planning to build a deFi protocol or deFi exchange like Hyperliquid, connect with our skilled blockchain developers to get started.
Category:
Blockchain
Rohit Kumar Gola
07 Jul 2025
V ● © Copyright 2009-2025 Oodles Technologies