이 프로젝트는 나의 첫 번째 Web3 애플리케이션이며 Yoroi 지갑을 통해 Cardano 블록체인에 연결됩니다. 실제로는 매우 간단합니다. 지갑 잔액을 확인하는 방법일 뿐이지만 앞으로 다가올 많은 흥미로운 프로젝트의 시작을 의미합니다. 이 튜토리얼을 진행하면서 학습 과정을 여러분과 공유하고 싶습니다.
시작하기 전에 우리가 무엇을 만들고 있는지 명확히 해두겠습니다. 이것은 다음을 수행할 수 있는 간단하고 간단한 도구입니다.
기본 JavaScript 지식(console.log("hello world")를 사용할 수 있다면 좋습니다!)
컴퓨터에 CardanoWalletExplorer라는 이름의 새 폴더를 만듭니다(또는 원하는 경우 정키 justyk, 이름은 별로 중요하지 않음). 코드 편집기에서 폴더를 엽니다(저는 Visual Studio Code를 사용합니다).
폴더 안에 두 개의 파일을 만듭니다:
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;
}
}
지갑 잔액을 가져오려면 Cardano 블록체인과 상호 작용할 수 있는 Blockfrost가 필요합니다. API 키를 얻는 방법은 다음과 같습니다.
이제 재미있는 부분을 살펴보겠습니다. 모든 작업을 수행해 보세요! 우리가 만든 폴더에 script.js라는 파일을 만듭니다.
function checkYoroiInstalled() {
return window.cardano && window.cardano.yoroi;
}
? 이 기능은 Yoroi 지갑 확장 프로그램이 브라우저에 설치되어 있는지 확인합니다. Window.cardano는 Yoroi와 같은 Cardano 지갑에서 노출되는 객체입니다. 이것이 존재하는지, 그리고 window.cardano.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 잔액을 사용자 친화적인 방식으로 구성합니다.
카르다노는 러브레이스를 가장 작은 단위(1 ADA = 1,000,000 러브레이스)로 사용하므로 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);
}
**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 기능이 호출됩니다.
"잔액 확인" 버튼을 클릭하면 handlerWalletSearch 기능이 호출됩니다.
사용자가 지갑 주소 입력 필드에서 "Enter" 키를 누르면 잔액 확인도 실행됩니다.
이제 Web3 마스터에 한 걸음 더 가까워졌습니다! ?이 프로젝트는 기술적인 성과일 뿐만 아니라 광활한 블록체인 개발 세계로의 흥미로운 발걸음이었습니다! ?
이제 Yoroi 지갑에 원활하게 연결하고, 잔액을 확인하고, 블록체인의 힘을 손끝으로 가져올 수 있습니다.
? 테스트 시간!
이 프로젝트는 블록체인 개발의 세계로 나아가는 디딤돌입니다. 이를 더욱 발전시키기 위한 몇 가지 아이디어는 다음과 같습니다.
이 프로젝트는 제가 Web3에 입문한 첫 단계이며, 최고로부터 배우고 싶습니다. 여러분의 경험, 통찰력, 제안은 이 프로젝트를 더 좋게 만드는 동시에 제가 개발자로서 성장하는 데 도움이 될 것입니다. 참여 방법은 다음과 같습니다.
계속 구축하고 혁신하세요. 여러분의 기여와 창의성이 이 도구의 미래를 만들어 갈 수 있습니다! ?
막히셨나요? 버그를 발견하셨나요? 채팅하고 싶으신가요? 아래에 댓글을 남기거나 Twitter에서 저를 찾아보세요!
기억하세요, 우리 모두는 어딘가에서 시작했고 유일한 멍청한 질문은 당신이 묻지 않은 질문이라는 것입니다!
블록체인 탐험가 여러분, 즐거운 코딩 되세요! ?
위 내용은 소개. JavaScript로 Cardano 지갑 검사기 웹 구축하기.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
