Skip to content

Commit

Permalink
updated demo page
Browse files Browse the repository at this point in the history
  • Loading branch information
@paulfears
paulfears committed Aug 8, 2023
1 parent 38ed6a9 commit 5087392
Show file tree
Hide file tree
Showing 4 changed files with 150 additions and 39 deletions.
2 changes: 1 addition & 1 deletion images/icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
173 changes: 142 additions & 31 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,138 @@
<!doctype html>
<html>
</head>
<title>Hello, Snaps!</title>
<title>Stellar!</title>
<link rel="icon" type="image/svg" href="./images/icon.svg"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<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=Poppins:wght@300&family=Raleway:wght@300&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<style>
body{
background-color: black;
color:white;
}
.fill {
min-height: 100%;
height: 90vh;
position: static;
}
h1{
font-family: 'Poppins', sans-serif;
font-family: 'Raleway', sans-serif;
font-size: 28pt;
}
.nav-link{
color: white !important;
}
.active{
color: black !important;
}
input{
background-color: #0000 !important;
color: white !important;
}
</style>
</head>

<body>
<h1>Stellar On Metamask!</h1>
<details>
<summary>Instructions</summary>
<ul>
<li>First, click "Connect". Then, try out the other buttons!</li>
<li>Please note that:</li>
<ul>
<li>
The <code>snap.manifest.json</code> and <code>package.json</code> must be located in the server root directory...
</li>
<li>
The Snap bundle must be hosted at the location specified by the <code>location</code> field of <code>snap.manifest.json</code>.
</li>
</ul>
<div id="main" class="fill">
<div class="mt-5">
</div>
<div id="content" style="background-color: black; width:35vw; height:100%;" class="ml-5 mt-5">
<div style ="margin-left: 35px;"class="container">
<img style="filter:invert(100%);" src="https://assets-global.website-files.com/5deac75ecad2173c2ccccbc7/5dec8960504967fd31147f62_Stellar_lockup_black_RGB.svg" height="35" alt="" class="stellar-logo">
<h1>On Metamask!</h1>
<br/>
<button class="connect btn btn-outline-warning"><img width="30" height="30" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/MetaMask_Fox.svg/800px-MetaMask_Fox.svg.png"/>Connect</button>
<br>
<br>
<p style="display: none;" id="info">We are funding your testnet account please wait.</p>
</div>
<div id="inputs" style="opacity: 0;">
<div class="container mt-5">
<br/>
<br/>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Query Wallet</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Sign Transaction</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Project Info</button>
</li>
</ul>
</details>
<br/>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<br/>
<br/>
<button class="sendHello btn btn-outline-light">Wallet Address</button>
<button id="getBalance" class="btn btn-outline-light">Wallet Balance</button>
<button class="getAccount btn btn-outline-light">Account info</button>
<br>
<br>
<h6 style="color:white" id="query_output"></h6>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<br/>
<br/>
<label style="color: white;">recepient address</label>
<input class="form-control" style="width:50%" value="GC4FIQFSE66E4HR7D4QCSHKMS6M7LKKYPP72ICY5WYLCEJVHGBZAKQJK" id="recepient"/>
<br/>
<label style="color: white;">amount</label>
<input class="form-control" style="width:30%" type="number" id="amount"/>
<br/>
<button class="btn btn-outline-light" id="send">send</button>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

<br>

<button class="connect">Connect</button>
<button class="sendHello">get Address</button>
<button class="fund">fundAccount</button>
<button class="getAccount">get Account info</button>
<br>
<input value="GC4FIQFSE66E4HR7D4QCSHKMS6M7LKKYPP72ICY5WYLCEJVHGBZAKQJK" id="recepient"/>
<input type="number" id="amount"/>
<button id="send">send</button>
</div>
</div>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta/dist/vanta.waves.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.rings.min.js"></script>
<script>
VANTA.RINGS({
el: "#main",
mouseControls: false,
touchControls: false,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
backgroundColor: 0x0,
color: 0x0
})
</script>

</body>

<script>
const snapId = `local:${window.location.href}`;

const connectButton = document.querySelector('button.connect')
const sendButton = document.querySelector('button.sendHello')
const fundButton = document.querySelector('button.fund')
const getAccountButton = document.querySelector('button.getAccount')
const sendTxnButton = document.getElementById('send');
const balanceButton = document.getElementById('getBalance');
const query_output = document.getElementById('query_output');

connectButton.addEventListener('click', connect)
sendButton.addEventListener('click', send)
getAccountButton.addEventListener('click', getAccount)
fundButton.addEventListener('click', fund)
sendTxnButton.addEventListener('click', sendTxn)
balanceButton.addEventListener('click', getBalance)

// here we get permissions to interact with and install the snap
async function connect () {
Expand All @@ -57,6 +142,11 @@ <h1>Stellar On Metamask!</h1>
[snapId]: {}
},
});

await fund();

$("#content").animate({width: "100vw"});
$("#inputs").delay(1000).animate({opacity: "100%"});
}

// here we call the snap's "hello" method
Expand All @@ -68,7 +158,25 @@ <h1>Stellar On Metamask!</h1>
method: 'getAddress'
}}
})
alert(addr)
console.log(addr)
query_output.innerText = addr;
} catch (err) {
console.error(err)
alert('Problem happened: ' + err.message || err)
}
}

async function getBalance () {
console.log("in get balance function");
try {
const addr = await ethereum.request({
method: 'wallet_invokeSnap',
params: {snapId:snapId, request:{
method: 'getBalance'
}}
})
console.log(addr)
query_output.innerText = addr;
} catch (err) {
console.error(err)
alert('Problem happened: ' + err.message || err)
Expand All @@ -93,14 +201,16 @@ <h1>Stellar On Metamask!</h1>
}
async function fund () {
try {
const info = document.getElementById('info');
info.style.display = 'block'
const addr = await ethereum.request({
method: 'wallet_invokeSnap',
params: {snapId:snapId, request:{
method: 'fund'
}}
})
console.log(addr)
alert(addr)
info.style.display = 'none'
console.log(addr);
} catch (err) {
console.error(err)
alert('Problem happened: ' + err.message || err)
Expand All @@ -116,12 +226,13 @@ <h1>Stellar On Metamask!</h1>
})
console.log(addr)
console.log(addr.balances[0])
alert(addr)
query_output.innerText = JSON.stringify(addr);
} catch (err) {
console.error(err)
alert('Problem happened: ' + err.message || err)
}
}

</script>

</html>
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "template-typescript-snap",
"version": "1.0.0",
"name": "stellar-snap",
"version": "0.0.1",
"private": true,
"description": "The 'Hello, world!' of MetaMask Snaps, now written in TypeScript.",
"repository": {
Expand Down
10 changes: 5 additions & 5 deletions snap.manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
{
"version": "1.0.0",
"description": "An example Snap written in TypeScript.",
"proposedName": "MetaMask TypeScript Template Snap\n",
"version": "0.0.1",
"description": "Stellar on metamask",
"proposedName": "Stellar",
"repository": {
"type": "git",
"url": "https://github.com/MetaMask/template-typescript-snap.git"
},
"source": {
"shasum": "8CMHGlXmEPOyc3pAOVHiv7APPGNWxWk+BipyVg6MlTA=",
"shasum": "gijTe/y+q0X1iYJ8rXfNbqEW3hUdwOsKPucj0WPw4E0=",
"location": {
"npm": {
"filePath": "dist/bundle.js",
"packageName": "template-typescript-snap",
"packageName": "stellar-snap",
"registry": "https://registry.npmjs.org/",
"iconPath": "images/icon.svg"
}
Expand Down

0 comments on commit 5087392

Please sign in to comment.