簡介。使用 JavaScript Web建立 Cardano 錢包檢查器。

這個專案是我的第一個 Web3 應用程序，它透過 Yoroi 錢包連接到 Cardano 區塊鏈。實際上，這非常簡單，只是檢查錢包餘額的一種方法，但它標誌著許多令人興奮的項目的開始。我想在學習本教程時與您分享我的學習過程。

？我們正在建設什麼？

在開始之前，讓我們先明確一下我們正在創建什麼。這是一個簡單的工具，可以讓您：

• 查看任何卡爾達諾錢包的餘額（當然是合法的！？）
• 連接到您的 Yoroi 錢包
• 在 ADA 中顯示餘額

？你需要什麼

基本的 JavaScript 知識（如果你會 console.log("hello world")，就很好了！）

1. - 文字編輯器（VS Code、Sublime，如果您喜歡冒險，甚至可以使用記事本）
2. - Yoroi 錢包擴充已安裝（我們需要它進行測試）
3. - Blockfrost API 金鑰（別擔心，我將向您展示如何取得它） 讓我們開始吧！

第 1 步：設定項目

在電腦上建立一個名為 CardanoWalletExplorer 的新資料夾（如果您願意，也可以是 junky justyk，名稱並不重要）。在程式碼編輯器中開啟該資料夾（我使用 Visual Studio Code）。
在資料夾內，建立兩個檔案：
index.html 和 style.css
現在打開index.html並貼上以下內容：

    <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">


    <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;
    }
}

步驟 2：如何取得您的 Blockfrost API 金鑰？

為了取得錢包餘額，我們需要 Blockfrost，它允許我們與 Cardano 區塊鏈進行互動。以下是取得 API 金鑰的方法：

• 前往 Blockfrost.io 並註冊。
• 登入後，點選「建立新項目」。
• 選擇主網進行真正的 ADA 或選擇測試網進行測試。
• 專案建立後，您將獲得一個API Key。

第三步：手術的大腦？

現在到了有趣的部分，讓它一切正常！在我們創建的資料夾中建立一個名為 script.js 的檔案。

function checkYoroiInstalled() {
    return window.cardano && window.cardano.yoroi;
}

？此功能檢查您的瀏覽器中是否安裝了 Yoroi 錢包擴充功能。 Window.cardano 是像 Yoroi 這樣的 Cardano 錢包公開的物件。我們檢查它是否存在以及 window.cardano.yoroi 是否可用於確認 Yoroi 錢包已安裝。
如果兩者都為 true，則函數傳回 true；否則，傳回 false。

    <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">


    <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;
    }
}

此函數以使用者友善的方式格式化 ADA 的餘額。
Cardano使用lovelace作為最小單位（1 ADA = 1,000,000 lovelace），所以我們需要將其除以1,000,000轉換為ADA。
它還確保餘額顯示為小數點後 6 位（例如 1.234567 ADA），或者如果餘額無效或為空，則傳回「0.000000」。

function checkYoroiInstalled() {
    return window.cardano && window.cardano.yoroi;
}

我們使用 Fetch API 向 Blockfrost 發出 GET 請求。 Blockfrost 提供了一個 API 來與 Cardano 區塊鏈互動。我們向特定錢包位址的端點發送 GET 請求，並使用 API 金鑰進行授權。該函數透過向 Blockfrost 的 API 發出請求來獲取特定錢包位址的餘額。

如果回應成功，我們將解析 JSON 資料並傳回該位址中 ADA 的數量。
如果發生錯誤（例如，無效位址或 API 問題），它將拋出錯誤並將其記錄到控制台。端點 URL 包括我們要檢查的錢包位址。確保將 checkWalletBalance 函數中的 YOUR_API_KEY 佔位符替換為您的 API 金鑰。

function formatBalance(lovelaceBalance) {
    if (!lovelaceBalance || isNaN(lovelaceBalance)) {
        return "0.000000";
    }
    const adaBalance = parseFloat(lovelaceBalance) / 1_000_000;
    return adaBalance.toFixed(6);
}

• 此 UI 更新功能使用錢包位址和餘額更新使用者介面 (UI)。
• 它會縮短地址以顯示前 8 個和後 8 個字元（以使其更具可讀性）並將其顯示在「錢包地址」卡中。
• 它使用 formatBalance 函數格式化餘額並將其顯示在「錢包餘額」卡中。
• 當您將滑鼠懸停在地址文字上時，它還會設定包含完整地址的工具提示。

**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;
    }
}

此程式碼將事件偵聽器附加到 HTML 元素：
當點擊「連接 Yoroi Wallet」按鈕時，它會呼叫 connectWallet 函數。
當點擊「檢查餘額」按鈕時，它會呼叫handleWalletSearch函數。
如果使用者在錢包位址輸入欄中按下「Enter」鍵，也會觸發餘額檢查。

恭喜，你做到了！ ？

您現在距離掌握 Web3 又更近了一步！ ？這個專案不僅是一項技術成就，更是邁向區塊鏈開發廣闊世界的令人興奮的一步！ ？
現在，您可以無縫連接到 Yoroi 錢包、檢查餘額，並將區塊鏈的力量帶到您的指尖。

？測試時間！

1. 在 VS Code 上安裝 liveserver 擴展，並透過點擊「上線」按鈕確保其正在運行。
2. 這應該會在您的瀏覽器中開啟 HTML 檔案
3. 交叉手指並測試一下！

？您從這個專案中學到了什麼

• 深入了解 Yoroi 等區塊鏈錢包如何運作以及如何與去中心化網路互動。
• 掌握了使用 window.cardano API 將瀏覽器錢包安全地連接到網路應用程式的過程。
• 探索了 Blockfrost API 以從 Cardano 區塊鏈獲取錢包餘額和地址詳細資訊。
• 增強了非同步和等待、錯誤處理和資料格式化方面的知識，以確保流暢的使用者體驗。
• 學會根據即時區塊鏈資料動態更新網頁元素。
• 了解將加密貨幣單位從 Lovelace 轉換為 ADA 並格式化它們以供用戶閱讀的機制。
• 認識到對 API 請求和使用者輸入進行穩健錯誤處理以防止中斷的重要性。
• 獲得了對區塊鏈上的錢包結構、地址管理和交易表示的寶貴見解。
• 實作了載入旋轉器、工具提示和警報等功能，以增強使用者互動。
• 解決了邊緣情況和調試挑戰，加強了分析和編碼技能。

？升級的想法

這個專案是進入區塊鏈開發世界的墊腳石。以下是一些進一步推進的想法：

• 新增交易歷史檢視器以顯示錢包位址過去的交易。
• 實現多錢包支持，允許用戶在 Yoroi、Nami 或 Eternal 等錢包之間切換。
• 建立一個顯示錢包活動趨勢的儀表板，包括傳入和傳出交易摘要。
• 整合即時價格數據以顯示美元或歐元等法定貨幣的 ADA 餘額。
• 透過整合交易建置功能，啟用直接從應用程式發送 ADA 的功能。
• 添加深色模式切換，以獲得視覺上吸引人且易於訪問的設計。
• 使介面響應式以確保與行動裝置的相容性。
• 納入更好的錯誤訊息，引導使用者解決問題，例如無效的錢包地址。

？您如何做出貢獻

這個專案是我進入 Web3 的第一步，我渴望向最好的人學習。您的經驗、見解和建議可以使這個專案變得更好，同時也幫助我成長為開發人員。您可以透過以下方式做出貢獻：

• 在 GitHub 上分叉該專案並添加新功能或改進。
• 回報您在使用該工具時遇到的錯誤或問題並提出解決方案。
• 透過在 GitHub 儲存庫上提出功能請求或討論來提出改進建議。
• 為您新增的任何新功能編寫詳細文檔，以便其他人輕鬆使用和建置。

✨ 值得考慮的新功能

• 添加二維碼支持，方便錢包位址共享和掃描。
• 對餘額更新或交易確認等事件實施通知。
• 包括一個教育部分，為初學者解釋區塊鏈基礎知識。
• 引入遊戲化元素，例如頻繁使用錢包或探索新功能的成就。
• 發展質押功能，顯示質押獎勵和委託狀態。

讓我們繼續建構和創新—您的貢獻和創造力可以塑造這個工具的未來！ ？

？需要幫助嗎？

卡住了嗎？發現錯誤？想聊天嗎？在下面發表評論或在 Twitter 上找到我！
請記住，我們都是從某個地方開始的，唯一愚蠢的問題就是你沒有問的問題！

區塊鏈探索者們，編碼愉快！ ？