Added better "MetaMask not installed" warning
This commit is contained in:
sairaj mote
parent
69adb2055c
commit
1639399107
31
css/main.css
31
css/main.css
@ -711,11 +711,6 @@ menu {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#main_header {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
@ -801,14 +796,17 @@ theme-toggle {
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
min-height: calc(100% - 5rem);
|
||||
}
|
||||
|
||||
#main_section {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
main > * {
|
||||
#main_section > * {
|
||||
max-width: 36rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
main h2 {
|
||||
#main_section h2 {
|
||||
margin-top: 10vw;
|
||||
}
|
||||
|
||||
@ -828,6 +826,23 @@ main h2 {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
#error_section {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
gap: 0.5rem;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
#error_section .icon {
|
||||
height: 8rem;
|
||||
width: 8rem;
|
||||
padding: 2rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
border-radius: 5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
.hide-on-small {
|
||||
display: none;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -657,10 +657,6 @@ menu {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#main_header {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
@ -741,7 +737,9 @@ theme-toggle {
|
||||
}
|
||||
main {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
min-height: calc(100% - 5rem);
|
||||
}
|
||||
#main_section {
|
||||
padding: 1.5rem;
|
||||
& > * {
|
||||
max-width: 36rem;
|
||||
@ -767,6 +765,22 @@ main {
|
||||
}
|
||||
}
|
||||
}
|
||||
#error_section {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
gap: 0.5rem;
|
||||
place-content: center;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
.icon {
|
||||
height: 8rem;
|
||||
width: 8rem;
|
||||
padding: 2rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
border-radius: 5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 640px) {
|
||||
.hide-on-small {
|
||||
display: none;
|
||||
|
||||
198
index.html
198
index.html
@ -84,75 +84,131 @@
|
||||
<theme-toggle></theme-toggle>
|
||||
</header>
|
||||
<main>
|
||||
<h2>
|
||||
Check USDC/USDT balance
|
||||
</h2>
|
||||
<sm-form>
|
||||
<div id="input_wrapper">
|
||||
<sm-input id="private_key_input" class="password-field flex-1" placeholder="FLO/BTC private key"
|
||||
type="password" data-private-key animate required>
|
||||
<svg class="icon" slot="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
|
||||
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<g>
|
||||
<rect fill="none" height="24" width="24"></rect>
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="M21,10h-8.35C11.83,7.67,9.61,6,7,6c-3.31,0-6,2.69-6,6s2.69,6,6,6c2.61,0,4.83-1.67,5.65-4H13l2,2l2-2l2,2l4-4.04L21,10z M7,15c-1.65,0-3-1.35-3-3c0-1.65,1.35-3,3-3s3,1.35,3,3C10,13.65,8.65,15,7,15z">
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
<label slot="right" class="interact">
|
||||
<input type="checkbox" class="hidden" autocomplete="off" readonly=""
|
||||
onchange="togglePrivateKeyVisibility(this)">
|
||||
<svg class="icon invisible" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<title>Hide password</title>
|
||||
<path d="M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z" fill="none"></path>
|
||||
<path
|
||||
d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z">
|
||||
</path>
|
||||
<section id="main_section" class="grid gap-1-5">
|
||||
<h2>
|
||||
Check USDC/USDT balance
|
||||
</h2>
|
||||
<sm-form>
|
||||
<div id="input_wrapper">
|
||||
<sm-input id="private_key_input" class="password-field flex-1" placeholder="FLO/BTC private key"
|
||||
type="password" data-private-key animate required>
|
||||
<svg class="icon" slot="icon" xmlns="http://www.w3.org/2000/svg"
|
||||
enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"
|
||||
fill="#000000">
|
||||
<g>
|
||||
<rect fill="none" height="24" width="24"></rect>
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="M21,10h-8.35C11.83,7.67,9.61,6,7,6c-3.31,0-6,2.69-6,6s2.69,6,6,6c2.61,0,4.83-1.67,5.65-4H13l2,2l2-2l2,2l4-4.04L21,10z M7,15c-1.65,0-3-1.35-3-3c0-1.65,1.35-3,3-3s3,1.35,3,3C10,13.65,8.65,15,7,15z">
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
<svg class="icon visible" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<title>Show password</title>
|
||||
<path d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path
|
||||
d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z">
|
||||
</path>
|
||||
</svg>
|
||||
</label>
|
||||
</sm-input>
|
||||
<div class="multi-state-button">
|
||||
<button id="check_balance_button" class="button button--primary h-100 w-100" type="submit"
|
||||
onclick="checkBalance()" disabled>Check
|
||||
balance</button>
|
||||
<label slot="right" class="interact">
|
||||
<input type="checkbox" class="hidden" autocomplete="off" readonly=""
|
||||
onchange="togglePrivateKeyVisibility(this)">
|
||||
<svg class="icon invisible" xmlns="http://www.w3.org/2000/svg" height="24px"
|
||||
viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<title>Hide password</title>
|
||||
<path d="M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z" fill="none"></path>
|
||||
<path
|
||||
d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z">
|
||||
</path>
|
||||
</svg>
|
||||
<svg class="icon visible" xmlns="http://www.w3.org/2000/svg" height="24px"
|
||||
viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<title>Show password</title>
|
||||
<path d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path
|
||||
d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z">
|
||||
</path>
|
||||
</svg>
|
||||
</label>
|
||||
</sm-input>
|
||||
<div class="multi-state-button">
|
||||
<button id="check_balance_button" class="button button--primary h-100 w-100" type="submit"
|
||||
onclick="checkBalance()" disabled>Check
|
||||
balance</button>
|
||||
</div>
|
||||
</div>
|
||||
</sm-form>
|
||||
<div id="eth_balance_wrapper" class="grid gap-2 hidden">
|
||||
<div class="grid">
|
||||
<div class="label">ETH address</div>
|
||||
<sm-copy id="eth_address"></sm-copy>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="label">FLO address</div>
|
||||
<sm-copy id="flo_address"></sm-copy>
|
||||
</div>
|
||||
<div class="grid gap-1">
|
||||
<h4>Balance</h4>
|
||||
<ul id="eth_address_balance" class="flex flex-direction-column gap-0-5">
|
||||
<li class="flex align-center space-between">
|
||||
<p>USDC</p>
|
||||
<b id="usdc_balance">0</b>
|
||||
</li>
|
||||
<li class="flex align-center space-between">
|
||||
<p>USDT</p>
|
||||
<b id="usdt_balance">0</b>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</sm-form>
|
||||
<div id="eth_balance_wrapper" class="grid gap-2 hidden">
|
||||
<div class="grid">
|
||||
<div class="label">ETH address</div>
|
||||
<sm-copy id="eth_address"></sm-copy>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="label">FLO address</div>
|
||||
<sm-copy id="flo_address"></sm-copy>
|
||||
</div>
|
||||
<div class="grid gap-1">
|
||||
<h4>Balance</h4>
|
||||
<ul id="eth_address_balance" class="flex flex-direction-column gap-0-5">
|
||||
<li class="flex align-center space-between">
|
||||
<p>USDC</p>
|
||||
<b id="usdc_balance">0</b>
|
||||
</li>
|
||||
<li class="flex align-center space-between">
|
||||
<p>USDT</p>
|
||||
<b id="usdt_balance">0</b>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="error_section" class="hidden">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" x="0" y="0"
|
||||
version="1.1" viewBox="0 0 318.6 318.6">
|
||||
<style>
|
||||
.st1,
|
||||
.st6 {
|
||||
fill: #e4761b;
|
||||
stroke: #e4761b;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round
|
||||
}
|
||||
|
||||
.st6 {
|
||||
fill: #f6851b;
|
||||
stroke: #f6851b
|
||||
}
|
||||
</style>
|
||||
<path fill="#e2761b" stroke="#e2761b" stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m274.1 35.5-99.5 73.9L193 65.8z" />
|
||||
<path
|
||||
d="m44.4 35.5 98.7 74.6-17.5-44.3zm193.9 171.3-26.5 40.6 56.7 15.6 16.3-55.3zm-204.4.9L50.1 263l56.7-15.6-26.5-40.6z"
|
||||
class="st1" />
|
||||
<path
|
||||
d="m103.6 138.2-15.8 23.9 56.3 2.5-2-60.5zm111.3 0-39-34.8-1.3 61.2 56.2-2.5zM106.8 247.4l33.8-16.5-29.2-22.8zm71.1-16.5 33.9 16.5-4.7-39.3z"
|
||||
class="st1" />
|
||||
<path fill="#d7c1b3" stroke="#d7c1b3" stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m211.8 247.4-33.9-16.5 2.7 22.1-.3 9.3zm-105 0 31.5 14.9-.2-9.3 2.5-22.1z" />
|
||||
<path fill="#233447" stroke="#233447" stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m138.8 193.5-28.2-8.3 19.9-9.1zm40.9 0 8.3-17.4 20 9.1z" />
|
||||
<path fill="#cd6116" stroke="#cd6116" stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m106.8 247.4 4.8-40.6-31.3.9zM207 206.8l4.8 40.6 26.5-39.7zm23.8-44.7-56.2 2.5 5.2 28.9 8.3-17.4 20 9.1zm-120.2 23.1 20-9.1 8.2 17.4 5.3-28.9-56.3-2.5z" />
|
||||
<path fill="#e4751f" stroke="#e4751f" stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m87.8 162.1 23.6 46-.8-22.9zm120.3 23.1-1 22.9 23.7-46zm-64-20.6-5.3 28.9 6.6 34.1 1.5-44.9zm30.5 0-2.7 18 1.2 45 6.7-34.1z" />
|
||||
<path d="m179.8 193.5-6.7 34.1 4.8 3.3 29.2-22.8 1-22.9zm-69.2-8.3.8 22.9 29.2 22.8 4.8-3.3-6.6-34.1z"
|
||||
class="st6" />
|
||||
<path fill="#c0ad9e" stroke="#c0ad9e" stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m180.3 262.3.3-9.3-2.5-2.2h-37.7l-2.3 2.2.2 9.3-31.5-14.9 11 9 22.3 15.5h38.3l22.4-15.5 11-9z" />
|
||||
<path fill="#161616" stroke="#161616" stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m177.9 230.9-4.8-3.3h-27.7l-4.8 3.3-2.5 22.1 2.3-2.2h37.7l2.5 2.2z" />
|
||||
<path fill="#763d16" stroke="#763d16" stroke-linecap="round" stroke-linejoin="round"
|
||||
d="m278.3 114.2 8.5-40.8-12.7-37.9-96.2 71.4 37 31.3 52.3 15.3 11.6-13.5-5-3.6 8-7.3-6.2-4.8 8-6.1zM31.8 73.4l8.5 40.8-5.4 4 8 6.1-6.1 4.8 8 7.3-5 3.6 11.5 13.5 52.3-15.3 37-31.3-96.2-71.4z" />
|
||||
<path
|
||||
d="m267.2 153.5-52.3-15.3 15.9 23.9-23.7 46 31.2-.4h46.5zm-163.6-15.3-52.3 15.3-17.4 54.2h46.4l31.1.4-23.6-46zm71 26.4 3.3-57.7 15.2-41.1h-67.5l15 41.1 3.5 57.7 1.2 18.2.1 44.8h27.7l.2-44.8z"
|
||||
class="st6" />
|
||||
<script xmlns="" />
|
||||
</svg>
|
||||
<h2 id="error__title">
|
||||
MetaMask not installed
|
||||
</h2>
|
||||
<p>
|
||||
Please install MetaMask browser extension to use this app
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
<script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
|
||||
<script src="scripts/components.min.js" type="text/javascript"></script>
|
||||
@ -309,16 +365,20 @@
|
||||
});
|
||||
connectToMetaMask().then(() => {
|
||||
setMetaMaskStatus(window.ethereum.isConnected())
|
||||
getRef('main_section').classList.remove('hidden')
|
||||
getRef('error_section').classList.add('hidden')
|
||||
}).catch((error) => {
|
||||
setMetaMaskStatus(false)
|
||||
if (error.code === 4001) {
|
||||
// EIP-1193 userRejectedRequest error
|
||||
notify('Please connect to MetaMask to continue', 'error')
|
||||
} else {
|
||||
if (error === 'MetaMask not installed')
|
||||
notify('Please install MetaMask to continue', 'error')
|
||||
if (error === 'MetaMask not installed') {
|
||||
getRef('main_section').classList.add('hidden')
|
||||
getRef('error_section').classList.remove('hidden')
|
||||
}
|
||||
else
|
||||
notify(error, 'error')
|
||||
console.error(error)
|
||||
}
|
||||
})
|
||||
if (typeof window.ethereum !== 'undefined') {
|
||||
|
||||
@ -2,6 +2,7 @@ function connectToMetaMask() {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (typeof window.ethereum === "undefined")
|
||||
return reject("MetaMask not installed");
|
||||
return resolve(true)
|
||||
ethereum
|
||||
.request({ method: 'eth_requestAccounts' })
|
||||
.then((accounts) => {
|
||||
|
||||
2
scripts/usdc_balance.min.js
vendored
2
scripts/usdc_balance.min.js
vendored
@ -1 +1 @@
|
||||
function connectToMetaMask(){return new Promise(((resolve,reject)=>{if(void 0===window.ethereum)return reject("MetaMask not installed");ethereum.request({method:"eth_requestAccounts"}).then((accounts=>(console.log("Connected to MetaMask"),resolve(accounts)))).catch((err=>(console.log(err),reject(err))))}))}async function checkUSDCBalance(ethAddress){try{window.ethereum.isConnected()||await connectToMetaMask();const provider=new ethers.providers.Web3Provider(window.ethereum),usdcContractAddress="0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",usdcContract=new ethers.Contract(usdcContractAddress,["function balanceOf(address) view returns (uint256)"],provider);return await usdcContract.balanceOf(ethAddress)}catch(e){console.log(e)}}async function checkUSDTBalance(ethAddress){try{window.ethereum.isConnected()||await connectToMetaMask();const provider=new ethers.providers.Web3Provider(window.ethereum),usdtContractAddress="0xdac17f958d2ee523a2206206994597c13d831ec7",usdtContract=new ethers.Contract(usdtContractAddress,["function balanceOf(address) view returns (uint256)"],provider);return await usdtContract.balanceOf(ethAddress)}catch(e){console.log(e)}}connectToMetaMask();
|
||||
function connectToMetaMask(){return new Promise(((resolve,reject)=>void 0===window.ethereum?reject("MetaMask not installed"):resolve(!0)))}async function checkUSDCBalance(ethAddress){try{window.ethereum.isConnected()||await connectToMetaMask();const provider=new ethers.providers.Web3Provider(window.ethereum),usdcContractAddress="0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",usdcContract=new ethers.Contract(usdcContractAddress,["function balanceOf(address) view returns (uint256)"],provider);return await usdcContract.balanceOf(ethAddress)}catch(e){console.log(e)}}async function checkUSDTBalance(ethAddress){try{window.ethereum.isConnected()||await connectToMetaMask();const provider=new ethers.providers.Web3Provider(window.ethereum),usdtContractAddress="0xdac17f958d2ee523a2206206994597c13d831ec7",usdtContract=new ethers.Contract(usdtContractAddress,["function balanceOf(address) view returns (uint256)"],provider);return await usdtContract.balanceOf(ethAddress)}catch(e){console.log(e)}}connectToMetaMask();
|
||||
Loading…
Reference in New Issue
Block a user