検索

ホームページ >ウェブフロントエンド >jsチュートリアル >イントロ。 JavaScript を使用した Cardano ウォレット チェッカーの Web 構築へ。

イントロ。 JavaScript を使用した Cardano ウォレット チェッカーの Web 構築へ。

DDD
DDDオリジナル
2025-01-08 08:29:43764ブラウズ

このプロジェクトは私の最初の Web3 アプリケーションであり、Yoroi ウォレットを通じて Cardano ブロックチェーンに接続します。これは実際には非常にシンプルで、ウォレットの残高を確認するだけの方法ですが、今後多くのエキサイティングなプロジェクトの始まりを示します。このチュートリアルを進めながら、私の学習プロセスを皆さんと共有したいと思います。

?私たちは何を構築しているのでしょうか?

始める前に、何を作成しているのかを明確にしておきましょう。これは、次のことを可能にするシンプルかつシンプルなツールです。

  • Cardano ウォレットの残高を覗いてみましょう (もちろん合法的に! ?)
  • Yoroi ウォレットに接続します
  • ADA の残高を表示

Intro. to WebBuilding a Cardano Wallet Checker with JavaScript.

?必要なもの

JavaScript の基本的な知識 (console.log("hello world") ができれば大丈夫です!)

  1. - テキスト エディタ (VS Code、Sublime、または冒険したい場合はメモ帳でも)
  2. - Yoroi ウォレット拡張機能がインストールされています (テストのためにこれが必要になります)
  3. - Blockfrost API キー (心配しないでください。取得方法は説明します) さあ、始めましょう!

ステップ 1: プロジェクトをセットアップする

コンピュータ上に CardanoWalletExplorer という名前の新しいフォルダーを作成します (または、ジャンク justyk という名前でも構いません)。コード エディターでフォルダーを開きます (Visual Studio Code を使用します)。
フォルダー内に 2 つのファイルを作成します:
Index.html と style.css
次に、index.html を開いてこれを貼り付けます:

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

ステップ 2: Blockfrost API キーを取得するには?

ウォレットの残高を取得するには、Cardano ブロックチェーンとの対話を可能にする Blockfrost が必要になります。 API キーを取得する方法は次のとおりです:

  • Blockfrost.io にアクセスしてサインアップします。
  • ログインしたら、[新しいプロジェクトの作成] をクリックします。
  • 実際の ADA にはメインネットを選択するか、テストにはテストネットを選択します。
  • プロジェクトが作成されると、API キーを取得します。

ステップ 3: オペレーションの頭脳 ?

ここからは楽しい部分ですが、すべてを機能させる作業です。作成したフォルダーに script.js という名前のファイルを作成します。

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

?この関数は、Yoroi ウォレット拡張機能がブラウザにインストールされているかどうかを確認します。 Window.cardano は、Yoroi などの Cardano ウォレットによって公開されるオブジェクトです。これが存在するかどうか、および window.cardano.yoroi が利用可能かどうかを確認して、Yoroi ウォレットがインストールされていることを確認します。
両方が true の場合、関数は true を返します。それ以外の場合は 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;
    }
}

この関数は、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 は、Cardano ブロックチェーンと対話するための API を提供します。承認用の API キーを使用して、特定のウォレット アドレスのエンドポイントに GET リクエストを送信します。この関数は、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 要素にイベント リスナーをアタッチします。
「ヨロイウォレットに接続」ボタンをクリックするとconnectWallet関数が呼び出されます。
「残高確認」ボタンをクリックすると、handleWalletSearch 関数が呼び出されます。
ユーザーがウォレットアドレス入力フィールドで「Enter」キーを押すと、残高チェックもトリガーされます。

おめでとうございます、やったね！ ?

これで、Web3 のマスターにまた一歩近づきました! ?このプロジェクトは技術的な成果だけでなく、ブロックチェーン開発の広大な世界へのエキサイティングな一歩でもありました。 ?
Yoroi ウォレットにシームレスに接続し、残高を確認し、ブロックチェーンの力をすぐに活用できるようになりました。

?テストの時間です!

  1. vs code に liveserver 拡張機能をインストールし、「ライブ開始」ボタンをクリックして実行されていることを確認します。
  2. これにより、ブラウザで HTML ファイルが開きます
  3. ぜひ試してみてください!

?このプロジェクトから学んだこと

  • Yoroi のようなブロックチェーン ウォレットがどのように機能し、分散型ネットワークと相互作用するかについてしっかりと理解しました。
  • window.cardano API を使用してブラウザ ウォレットを Web アプリに安全に接続するプロセスを習得しました。
  • Blockfrost API を探索して、Cardano ブロックチェーンからウォレットの残高とアドレスの詳細を取得しました。
  • スムーズなユーザー エクスペリエンスを保証するための、非同期と待機、エラー処理、データ形式に関する知識が強化されています。
  • リアルタイムのブロックチェーン データに基づいて Web ページ要素を動的に更新する方法を学びました。
  • 暗号通貨単位を Lovelace から ADA に変換し、ユーザーが読みやすいようにフォーマットする仕組みを理解しました。
  • 中断を防ぐために、API リクエストとユーザー入力に対する堅牢なエラー処理の重要性を認識しました。
  • ウォレットの構造、アドレス管理、ブロックチェーン上のトランザクション表現について貴重な洞察を得ることができました。
  • ユーザー インタラクションを強化するために、読み込みスピナー、ツールヒント、アラートなどの機能を実装しました。
  • エッジケースとデバッグの課題に取り組み、分析スキルとコーディングスキルを強化しました。

?レベルアップのアイデア

このプロジェクトは、ブロックチェーン開発の世界への足がかりです。これをさらに進めるためのアイデアをいくつか紹介します:

  • ウォレット アドレスの過去の取引を表示する取引履歴ビューアを追加します。
  • マルチウォレットのサポートを実装し、ユーザーが Yoroi、Nami、Eternal などのウォレットを切り替えられるようにします。
  • 送受信トランザクションの概要など、ウォレットのアクティビティの傾向を表示するダッシュボードを作成します。
  • リアルタイムの価格データを統合して、USD や EUR などの法定通貨で ADA 残高を表示します。
  • トランザクション構築機能を統合することで、アプリから ADA を直接送信できるようにします。
  • ダークモードの切り替えを追加して、視覚的に魅力的でアクセスしやすいデザインにします。
  • モバイル デバイスとの互換性を確保するためにインターフェイスの応答性を高めます。
  • 無効なウォレット アドレスなどの問題の解決をユーザーに案内する、より適切なエラー メッセージを組み込みます。

?貢献方法

このプロジェクトは私にとって Web3 への最初のステップであり、最高の人材から学びたいと思っています。あなたの経験、洞察、提案は、このプロジェクトをより良いものにすると同時に、開発者としての私の成長にも役立ちます。貢献する方法は次のとおりです:

  • GitHub でプロジェクトをフォークし、新機能や改善を追加します。
  • ツールの使用中に発生したバグや問題を報告し、解決策を提案します。
  • GitHub リポジトリで機能リクエストやディスカッションを開いて機能拡張を提案します。
  • 追加する新機能については詳細なドキュメントを作成し、他の人が簡単に使用したり構築したりできるようにします。

✨ 考慮すべき新機能

  • ウォレット アドレスの共有とスキャンを簡単にするための QR コード サポートを追加します。
  • 残高の更新や取引の確認などのイベントの通知を実装します。
  • 初心者向けにブロックチェーンの基本を説明する教育セクションを含めます。
  • 頻繁にウォレットを使用するための実績や新機能の探索など、ゲーム化された要素を導入します。
  • ステーキング報酬と委任ステータスを表示するステーキング機能を開発します。

構築と革新を続けましょう。あなたの貢献と創造力がこのツールの未来を形作ることができます。 ?

?助けが必要ですか?

行き詰まった?バグが見つかりましたか?チャットしたいですか?以下にコメントをドロップするか、Twitter で私を見つけてください。
覚えておいてください、私たちは皆どこかから始めています、そして唯一の愚かな質問はあなたが尋ねなかった質問です!

ブロックチェーン探索者の皆さん、コーディングを楽しんでください! ?

以上がイントロ。 JavaScript を使用した Cardano ウォレット チェッカーの Web 構築へ。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Encore.ts と React を使用してリアルタイム ダッシュボードを構築する方法次の記事：Encore.ts と React を使用してリアルタイム ダッシュボードを構築する方法

関連記事

続きを見る