Intro. to WebBuilding a Cardano Wallet Checker with JavaScript.
This project is my very first Web3 application, and it connects to the Cardano blockchain through the Yoroi wallet. It's pretty simple actually, just a way to check your wallet balance, but it marks the beginning of many exciting projects to come. I want to share my learning process, with you as we go through this tutorial.
? What Are We Building?
Before we begin, let's be clear about what we're creating. This is a simple a simple tool that lets you:
- Peek into any Cardano wallet's balance (legally, of course! ?)
- Connect to your Yoroi wallet
- Display balances in ADA
? What You'll Need
Basic JavaScript knowledge (if you can console.log("hello world"), you're good!)
- - A text editor (VS Code, Sublime, or even Notepad if you're feeling adventurous)
- - The Yoroi wallet extension installed (we'll need this for testing)
- - A Blockfrost API key (don't worry, I'll show you how to get one) Let's get to it!
Step 1: Setup the Project
Create a new folder on your computer named CardanoWalletExplorer (or junky justyk if you would prefer, name doesn't really matter). Open the folder in your code editor (I use Visual Studio Code).
Inside the folder, create two files:
index.html and style.css
Now open index.html and paste this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cardano Wallet Explorer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>Let's add some style to our creation. Inside the style.css file paste this in:<br>
</p>
<pre class="brush:php;toolbar:false">:root {
--primary-color: #0033ad;
--secondary-color: #2a71d4;
--accent-color: #17d1aa;
--background-color: #f8faff;
--card-background: #ffffff;
--text-primary: #1a202c;
--text-secondary: #4a5568;
--border-color: #e2e8f0;
--shadow: 0 4px 6px rgba(0,0,0,0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', system-ui, sans-serif;
background: var(--background-color);
color: var(--text-primary);
line-height: 1.5;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
}
.container {
background: var(--card-background);
border-radius: 1.5rem;
box-shadow: var(--shadow);
width: 100%;
max-width: 800px;
overflow: hidden;
}
.app-header {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 2rem;
text-align: center;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 0.5rem;
}
.logo i { font-size: 2rem; }
h1 { font-size: 1.8rem; font-weight: 600; }
.subtitle { opacity: 0.9; }
.content { padding: 2rem; }
.search-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
margin-bottom: 2rem;
}
.search-box {
display: flex;
gap: 1rem;
width: 100%;
max-width: 600px;
}
#wallet-search {
flex: 1;
padding: 0.875rem 1rem;
border: 2px solid var(--border-color);
border-radius: 12px;
font-size: 0.95rem;
transition: 0.3s ease;
}
#wallet-search:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 3px rgba(23, 209, 170, 0.1);
}
button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1.5rem;
border: none;
border-radius: 12px;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: 0.3s ease;
}
#search-button {
background: var(--accent-color);
color: white;
}
#search-button:hover {
background: #15bea0;
transform: translateY(-2px);
}
.divider {
width: 100%;
max-width: 600px;
text-align: center;
position: relative;
color: var(--text-secondary);
}
.divider::before,
.divider::after {
content: '';
position: absolute;
top: 50%;
width: calc(50% - 2rem);
height: 1px;
background: var(--border-color);
}
.divider::before { left: 0; }
.divider::after { right: 0; }
.connect-button {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 1rem 2rem;
}
.connect-button:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.wallet-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.info-card {
background: var(--card-background);
border: 1px solid var(--border-color);
border-radius: 1rem;
padding: 1.5rem;
transition: 0.3s ease;
}
.info-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.card-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
color: var(--text-secondary);
}
.card-header i {
font-size: 1.25rem;
color: var(--primary-color);
}
.card-content {
font-size: 0.95rem;
color: var(--text-primary);
word-break: break-all;
}
.app-footer {
text-align: center;
padding: 1.5rem;
background: var(--background-color);
color: var(--text-secondary);
font-size: 0.9rem;
}
.app-footer a {
color: var(--primary-color);
text-decoration: none;
}
.app-footer a:hover {
text-decoration: underline;
}
@media (max-width: 640px) {
body {
padding: 1rem;
}
.container {
border-radius: 1.5rem;
}
.app-header {
padding: 1.5rem;
}
.content {
padding: 1.5rem;
}
.search-box {
flex-direction: column;
}
button {
width: 100%;
justify-content: center;
}
.wallet-info {
grid-template-columns: 1fr;
}
}
Step 2: How to Get Your Blockfrost API Key ?
In order to fetch wallet balances, we are going to need Blockfrost, which allows us to interact with the Cardano blockchain. Here’s how you can get your API Key:
- Go to Blockfrost.io and sign up.
- Once logged in, click on Create a New Project.
- Choose Mainnet for real ADA or Testnet for testing.
- After the project is created, you'll get an API Key.
Step 3: The Brain of the Operation ?
Now for the fun part, making it all work! create a file named script.js in the folder we created.
function checkYoroiInstalled() {
return window.cardano && window.cardano.yoroi;
}
? This function checks if the Yoroi wallet extension is installed in your browser. Window.cardano is the object exposed by Cardano wallets like Yoroi. We check if this exists and whether window.cardano.yoroi is available to confirm that the Yoroi wallet is installed.
If both are true, the function returns true; otherwise, it returns false.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cardano Wallet Explorer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<p>Let's add some style to our creation. Inside the style.css file paste this in:<br>
</p>
<pre class="brush:php;toolbar:false">:root {
--primary-color: #0033ad;
--secondary-color: #2a71d4;
--accent-color: #17d1aa;
--background-color: #f8faff;
--card-background: #ffffff;
--text-primary: #1a202c;
--text-secondary: #4a5568;
--border-color: #e2e8f0;
--shadow: 0 4px 6px rgba(0,0,0,0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', system-ui, sans-serif;
background: var(--background-color);
color: var(--text-primary);
line-height: 1.5;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
}
.container {
background: var(--card-background);
border-radius: 1.5rem;
box-shadow: var(--shadow);
width: 100%;
max-width: 800px;
overflow: hidden;
}
.app-header {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 2rem;
text-align: center;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 0.5rem;
}
.logo i { font-size: 2rem; }
h1 { font-size: 1.8rem; font-weight: 600; }
.subtitle { opacity: 0.9; }
.content { padding: 2rem; }
.search-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
margin-bottom: 2rem;
}
.search-box {
display: flex;
gap: 1rem;
width: 100%;
max-width: 600px;
}
#wallet-search {
flex: 1;
padding: 0.875rem 1rem;
border: 2px solid var(--border-color);
border-radius: 12px;
font-size: 0.95rem;
transition: 0.3s ease;
}
#wallet-search:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 3px rgba(23, 209, 170, 0.1);
}
button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1.5rem;
border: none;
border-radius: 12px;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
transition: 0.3s ease;
}
#search-button {
background: var(--accent-color);
color: white;
}
#search-button:hover {
background: #15bea0;
transform: translateY(-2px);
}
.divider {
width: 100%;
max-width: 600px;
text-align: center;
position: relative;
color: var(--text-secondary);
}
.divider::before,
.divider::after {
content: '';
position: absolute;
top: 50%;
width: calc(50% - 2rem);
height: 1px;
background: var(--border-color);
}
.divider::before { left: 0; }
.divider::after { right: 0; }
.connect-button {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 1rem 2rem;
}
.connect-button:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.wallet-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.info-card {
background: var(--card-background);
border: 1px solid var(--border-color);
border-radius: 1rem;
padding: 1.5rem;
transition: 0.3s ease;
}
.info-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.card-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
color: var(--text-secondary);
}
.card-header i {
font-size: 1.25rem;
color: var(--primary-color);
}
.card-content {
font-size: 0.95rem;
color: var(--text-primary);
word-break: break-all;
}
.app-footer {
text-align: center;
padding: 1.5rem;
background: var(--background-color);
color: var(--text-secondary);
font-size: 0.9rem;
}
.app-footer a {
color: var(--primary-color);
text-decoration: none;
}
.app-footer a:hover {
text-decoration: underline;
}
@media (max-width: 640px) {
body {
padding: 1rem;
}
.container {
border-radius: 1.5rem;
}
.app-header {
padding: 1.5rem;
}
.content {
padding: 1.5rem;
}
.search-box {
flex-direction: column;
}
button {
width: 100%;
justify-content: center;
}
.wallet-info {
grid-template-columns: 1fr;
}
}
This function formats the balance of ADA in a user-friendly way.
Cardano uses lovelace as the smallest unit (1 ADA = 1,000,000 lovelace), so we need to convert it to ADA by dividing by 1,000,000.
It also ensures the balance is displayed with 6 decimal places (like 1.234567 ADA), or returns "0.000000" if the balance is invalid or empty.
function checkYoroiInstalled() {
return window.cardano && window.cardano.yoroi;
}
We're using the Fetch API to make a GET request to Blockfrost. Blockfrost provides an API to interact with the Cardano blockchain. We send a GET request to the endpoint for the specific wallet address, using an API key for authorization. This function fetches the balance of a specific wallet address by making a request to Blockfrost's API.
If the response is successful, we parse the JSON data and return the quantity of ADA in that address.
If there's an error (e.g., invalid address or API issues), it will throw an error and log it to the console. The endpoint URL includes the wallet address we want to check. Make sure you replace the YOUR_API_KEY placeholder in the checkWalletBalance function with your API Key.
function formatBalance(lovelaceBalance) {
if (!lovelaceBalance || isNaN(lovelaceBalance)) {
return "0.000000";
}
const adaBalance = parseFloat(lovelaceBalance) / 1_000_000;
return adaBalance.toFixed(6);
}
- This UI update function updates the user interface (UI) with the wallet address and balance.
- It shortens the address to show the first 8 and last 8 characters (to make it more readable) and displays it in the "wallet-address" card.
- It formats the balance using the formatBalance function and displays it in the "wallet-balance" card.
- It also sets a tooltip with the full address when you hover over the address text.
**Fetching Wallet Balance Using Blockfrost API
async function checkWalletBalance(address) {
try {
const API_KEY = 'YOUR_API_KEY';
const response = await fetch(`https://cardano-mainnet.blockfrost.io/api/v0/addresses/${address}`, {
headers: {
'project_id': API_KEY
}
});
if (!response.ok) {
throw new Error('Invalid address or API error');
}
const data = await response.json();
return data.amount[0].quantity;
} catch (error) {
console.error('Error fetching balance:', error);
throw error;
}
}
This code attaches event listeners to the HTML elements:
When the "Connect Yoroi Wallet" button is clicked, it calls the connectWallet function.
When the "Check Balance" button is clicked, it calls the handleWalletSearch function.
If the user presses the "Enter" key in the wallet address input field, it also triggers the balance check.
Congratulations, You Did It! ?
You're now one step closer to mastering Web3! ?This project was not only a technical achievement but also an exciting step into the vast world of blockchain development! ?
Now, you can seamlessly connect to the Yoroi wallet, check balances, and bring the power of blockchain to your fingertips.
? Testing Time!
- Install the liveserver extension on vs code and ensure that it is running by clicking the "go live" button.
- This should open the HTML file in your browser
- Cross your fingers and test it out!
? What You’ve Learned from This Project
- Gained a solid understanding of how blockchain wallets like Yoroi function and interact with decentralized networks.
- Mastered the process of securely connecting a browser wallet to a web app using window.cardano APIs.
- Explored the Blockfrost API to fetch wallet balances and address details from the Cardano blockchain.
- Enhanced knowledge of async and await, error handling, and data formatting to ensure a smooth user experience.
- Learned to dynamically update webpage elements based on real-time blockchain data.
- Understood the mechanics of converting cryptocurrency units from Lovelace to ADA and formatting them for user readability.
- Recognized the importance of robust error handling for API requests and user inputs to prevent disruptions.
- Gained valuable insights into wallet structures, address management, and transaction representation on the blockchain.
- Implemented features like loading spinners, tooltips, and alerts to enhance user interaction.
- Tackled edge cases and debugging challenges, strengthening analytical and coding skills.
? Level-Up Ideas
This project is a stepping stone into the world of blockchain development. Here are some ideas to take it further:
- Add a transaction history viewer to display past transactions for a wallet address.
- Implement multi-wallet support, allowing users to switch between wallets like Yoroi, Nami, or Eternal.
- Create a dashboard that displays wallet activity trends, including incoming and outgoing transaction summaries.
- Integrate real-time price data to show the ADA balance in fiat currencies like USD or EUR.
- Enable the ability to send ADA directly from the app by integrating transaction-building capabilities.
- Add a dark mode toggle for a visually appealing and accessible design.
- Make the interface responsive to ensure compatibility with mobile devices.
- Incorporate better error messages that guide users to resolve issues, such as invalid wallet addresses.
? How You Can Contribute
This project is my first step into Web3, and I’m eager to learn from the best. Your experience, insights, and suggestions can make this project better while also helping me grow as a developer. Here’s how you can contribute:
- Fork the project on GitHub and add new features or improvements.
- Report bugs or issues you encounter while using the tool and suggest solutions.
- Propose enhancements by opening a feature request or discussion on the GitHub repo.
- Write detailed documentation for any new feature you add, making it easy for others to use and build upon.
✨ New Features to Consider
- Add QR code support for easy wallet address sharing and scanning.
- Implement notifications for events like balance updates or transaction confirmations.
- Include an educational section that explains blockchain basics for beginners.
- Introduce gamified elements, such as achievements for frequent wallet use or exploring new features.
- Develop a staking feature to display staking rewards and delegation status.
Let’s keep building and innovating—your contributions and creativity can shape the future of this tool! ?
? Need Help?
Got stuck? Found a bug? Want to chat? Drop a comment below or find me on Twitter!
Remember, we all started somewhere, and the only dumb question is the one you didn't ask!
Happy coding, fellow blockchain explorers! ?
The above is the detailed content of Intro. to WebBuilding a Cardano Wallet Checker with JavaScript.. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Mastering JavaScript Concurrency Patterns: Web Workers vs. Java Threads
Jul 25, 2025 am 04:31 AM
There is an essential difference between JavaScript's WebWorkers and JavaThreads in concurrent processing. 1. JavaScript adopts a single-thread model. WebWorkers is an independent thread provided by the browser. It is suitable for performing time-consuming tasks that do not block the UI, but cannot operate the DOM; 2. Java supports real multithreading from the language level, created through the Thread class, suitable for complex concurrent logic and server-side processing; 3. WebWorkers use postMessage() to communicate with the main thread, which is highly secure and isolated; Java threads can share memory, so synchronization issues need to be paid attention to; 4. WebWorkers are more suitable for front-end parallel computing, such as image processing, and
Vue 3 Composition API vs. Options API: A Detailed Comparison
Jul 25, 2025 am 03:46 AM
CompositionAPI in Vue3 is more suitable for complex logic and type derivation, and OptionsAPI is suitable for simple scenarios and beginners; 1. OptionsAPI organizes code according to options such as data and methods, and has clear structure but complex components are fragmented; 2. CompositionAPI uses setup to concentrate related logic, which is conducive to maintenance and reuse; 3. CompositionAPI realizes conflict-free and parameterizable logical reuse through composable functions, which is better than mixin; 4. CompositionAPI has better support for TypeScript and more accurate type derivation; 5. There is no significant difference in the performance and packaging volume of the two; 6.
How to create and append elements in JS?
Jul 25, 2025 am 03:56 AM
Use document.createElement() to create new elements; 2. Customize elements through textContent, classList, setAttribute and other methods; 3. Use appendChild() or more flexible append() methods to add elements to the DOM; 4. Optionally use insertBefore(), before() and other methods to control the insertion position; the complete process is to create → customize → add, and you can dynamically update the page content.
Micro Frontends Architecture: A Practical Implementation Guide
Aug 02, 2025 am 08:01 AM
Microfrontendssolvescalingchallengesinlargeteamsbyenablingindependentdevelopmentanddeployment.1)Chooseanintegrationstrategy:useModuleFederationinWebpack5forruntimeloadingandtrueindependence,build-timeintegrationforsimplesetups,oriframes/webcomponents
Advanced Conditional Types in TypeScript
Aug 04, 2025 am 06:32 AM
TypeScript's advanced condition types implement logical judgment between types through TextendsU?X:Y syntax. Its core capabilities are reflected in the distributed condition types, infer type inference and the construction of complex type tools. 1. The conditional type is distributed in the bare type parameters and can automatically split the joint type, such as ToArray to obtain string[]|number[]. 2. Use distribution to build filtering and extraction tools: Exclude excludes types through TextendsU?never:T, Extract extracts commonalities through TextendsU?T:Never, and NonNullable filters null/undefined. 3
How to find the length of an array in JavaScript?
Jul 26, 2025 am 07:52 AM
To get the length of a JavaScript array, you can use the built-in length property. 1. Use the .length attribute to return the number of elements in the array, such as constfruits=['apple','banana','orange'];console.log(fruits.length);//Output: 3; 2. This attribute is suitable for arrays containing any type of data such as strings, numbers, objects, or arrays; 3. The length attribute will be automatically updated, and its value will change accordingly when elements are added or deleted; 4. It returns a zero-based count, and the length of the empty array is 0; 5. The length attribute can be manually modified to truncate or extend the array,
What are the differences between var, let, and const in JavaScript?
Aug 02, 2025 pm 01:30 PM
varisfunction-scoped,canbereassigned,hoistedwithundefined,andattachedtotheglobalwindowobject;2.letandconstareblock-scoped,withletallowingreassignmentandconstnotallowingit,thoughconstobjectscanhavemutableproperties;3.letandconstarehoistedbutnotinitial
Understanding JavaScript's Proxy and Reflect APIs
Jul 26, 2025 am 07:55 AM
Proxy and Reflect API are powerful tools used in JavaScript to intercept and customize object operations; 1. Proxy blocks operations such as get, set by wrapping target objects and defining "traps", and implements functions such as logs, verification, read-only control; 2. Reflect provides methods corresponding to Proxy traps to ensure the consistency and correctness of default behaviors and improve code maintainability; 3. Practical applications include Vue3 responsive system, data verification, debug logs, immutable objects and API simulation; 4. Pay attention to performance overhead, complex behavior of built-in objects, this binding problems, and nested objects need to be recursively proxyed; 5. Reasonable use can build efficient, debugable, and reactive
