search

Home >Web Front-end >JS Tutorial >Intro. to WebBuilding a Cardano Wallet Checker with JavaScript.

Intro. to WebBuilding a Cardano Wallet Checker with JavaScript.

DDD
DDDOriginal
2025-01-08 08:29:43780browse

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

Intro. to WebBuilding a Cardano Wallet Checker with JavaScript.

? What You'll Need

Basic JavaScript knowledge (if you can console.log("hello world"), you're good!)

  1. - A text editor (VS Code, Sublime, or even Notepad if you're feeling adventurous)
  2. - The Yoroi wallet extension installed (we'll need this for testing)
  3. - 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!

  1. Install the liveserver extension on vs code and ensure that it is running by clicking the "go live" button.
  2. This should open the HTML file in your browser
  3. 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!

JavaScript json css html edge Object if switch for while include throw Error using Interface Event JS console function this history display input github visual studio visual studio code web app ui bug web3 Blockchain Web3
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to Build a Real-Time Dashboard with Encore.ts and ReactNext article：How to Build a Real-Time Dashboard with Encore.ts and React

Related articles

See more