Added better meta mask integration
This commit is contained in:
sairaj mote
parent
1eeed5c2ff
commit
de889b219a
40
css/main.css
40
css/main.css
@ -718,7 +718,8 @@ menu {
|
||||
|
||||
#main_header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
@ -744,6 +745,43 @@ menu {
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
#meta_mask_status_button {
|
||||
gap: 0.3rem;
|
||||
border-radius: 2rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
padding: 0.3rem 0.6rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
#meta_mask_status_button:-moz-read-only {
|
||||
cursor: initial;
|
||||
}
|
||||
#meta_mask_status_button:read-only {
|
||||
cursor: initial;
|
||||
}
|
||||
#meta_mask_status_button .icon-wrapper {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
#meta_mask_status_button .icon-wrapper::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
#meta_mask_status_button .icon-wrapper > * {
|
||||
grid-area: 1/1;
|
||||
}
|
||||
#meta_mask_status_button[data-status=connected] .icon-wrapper::after {
|
||||
background-color: var(--green);
|
||||
}
|
||||
#meta_mask_status_button[data-status=disconnected] .icon-wrapper::after {
|
||||
background-color: var(--danger-color);
|
||||
}
|
||||
|
||||
theme-toggle {
|
||||
justify-self: end;
|
||||
align-self: center;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -663,7 +663,8 @@ menu {
|
||||
}
|
||||
#main_header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
@ -687,6 +688,39 @@ menu {
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
}
|
||||
#meta_mask_status_button {
|
||||
gap: 0.3rem;
|
||||
border-radius: 2rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
padding: 0.3rem 0.6rem;
|
||||
font-weight: 500;
|
||||
&:read-only {
|
||||
cursor: initial;
|
||||
}
|
||||
.icon-wrapper {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
& > * {
|
||||
grid-area: 1/1;
|
||||
}
|
||||
}
|
||||
&[data-status="connected"] .icon-wrapper::after {
|
||||
background-color: var(--green);
|
||||
}
|
||||
&[data-status="disconnected"] .icon-wrapper::after {
|
||||
background-color: var(--danger-color);
|
||||
}
|
||||
}
|
||||
theme-toggle {
|
||||
justify-self: end;
|
||||
align-self: center;
|
||||
|
||||
87
index.html
87
index.html
@ -29,6 +29,57 @@
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<button id="meta_mask_status_button" class="flex align-center" onclick="connectToMetaMask()">
|
||||
<div class="icon-wrapper">
|
||||
<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>
|
||||
</div>
|
||||
<div id="meta_mask_status"></div>
|
||||
</button>
|
||||
<theme-toggle></theme-toggle>
|
||||
</header>
|
||||
<main>
|
||||
@ -195,12 +246,42 @@
|
||||
}
|
||||
]
|
||||
}
|
||||
function setMetaMaskStatus(isConnected) {
|
||||
if (isConnected) {
|
||||
getRef('meta_mask_status').textContent = 'Connected';
|
||||
getRef('meta_mask_status_button').dataset.status = 'connected';
|
||||
getRef('meta_mask_status_button').readOnly = true;
|
||||
} else {
|
||||
getRef('meta_mask_status').textContent = 'Disconnected';
|
||||
getRef('meta_mask_status_button').dataset.status = 'disconnected';
|
||||
getRef('meta_mask_status_button').readOnly = false;
|
||||
}
|
||||
|
||||
}
|
||||
window.addEventListener('load', () => {
|
||||
connectToMetaMask().then(() => {
|
||||
|
||||
}).catch(() => {
|
||||
notify('Please connect to MetaMask to continue', 'error')
|
||||
setMetaMaskStatus(window.ethereum.isConnected())
|
||||
}).catch((error) => {
|
||||
setMetaMaskStatus(false)
|
||||
if (error.code === 4001) {
|
||||
// EIP-1193 userRejectedRequest error
|
||||
notify('Please connect to MetaMask to continue', 'error')
|
||||
} else {
|
||||
console.error(error);
|
||||
}
|
||||
})
|
||||
if (typeof window.ethereum !== 'undefined') {
|
||||
ethereum.on('accountsChanged', (accounts) => {
|
||||
getRef('eth_balance_wrapper').classList.add('hidden')
|
||||
setMetaMaskStatus(accounts.length > 0)
|
||||
});
|
||||
ethereum.on('connect', (accounts) => {
|
||||
setMetaMaskStatus(accounts.length > 0)
|
||||
});
|
||||
ethereum.on('disconnect', (accounts) => {
|
||||
setMetaMaskStatus(false)
|
||||
});
|
||||
}
|
||||
})
|
||||
function checkBalance() {
|
||||
const keyToConvert = document.querySelector('[data-private-key]').value.trim()
|
||||
|
||||
@ -1,27 +1,13 @@
|
||||
let isMetamaskConnected = false;
|
||||
function connectToMetaMask() {
|
||||
if (typeof window.ethereum === "undefined")
|
||||
return console.log("Please install MetaMask.");
|
||||
return 'Please install MetaMask'
|
||||
return ethereum
|
||||
.request({ method: 'eth_requestAccounts' })
|
||||
.then(() => {
|
||||
console.log('MetaMask connected');
|
||||
isMetamaskConnected = true;
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error.code === 4001) {
|
||||
// EIP-1193 userRejectedRequest error
|
||||
console.log('Please connect to MetaMask.');
|
||||
} else {
|
||||
console.error(error);
|
||||
}
|
||||
isMetamaskConnected = false;
|
||||
});
|
||||
}
|
||||
// connectToMetaMask();
|
||||
async function checkUSDCBalance(ethAddress) {
|
||||
try {
|
||||
if (!isMetamaskConnected) {
|
||||
if (!window.ethereum.isConnected()) {
|
||||
await connectToMetaMask();
|
||||
}
|
||||
const provider = new ethers.providers.Web3Provider(window.ethereum);
|
||||
@ -37,7 +23,7 @@ async function checkUSDCBalance(ethAddress) {
|
||||
|
||||
async function checkUSDTBalance(ethAddress) {
|
||||
try {
|
||||
if (!isMetamaskConnected) {
|
||||
if (!window.ethereum.isConnected()) {
|
||||
await connectToMetaMask();
|
||||
}
|
||||
const provider = new ethers.providers.Web3Provider(window.ethereum);
|
||||
|
||||
2
scripts/usdc_balance.min.js
vendored
2
scripts/usdc_balance.min.js
vendored
@ -1 +1 @@
|
||||
let isMetamaskConnected=!1;function connectToMetaMask(){return void 0===window.ethereum?console.log("Please install MetaMask."):ethereum.request({method:"eth_requestAccounts"}).then((()=>{console.log("MetaMask connected"),isMetamaskConnected=!0})).catch((error=>{4001===error.code?console.log("Please connect to MetaMask."):console.error(error),isMetamaskConnected=!1}))}async function checkUSDCBalance(ethAddress){try{isMetamaskConnected||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{isMetamaskConnected||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)}}
|
||||
function connectToMetaMask(){return void 0===window.ethereum?"Please install MetaMask":ethereum.request({method:"eth_requestAccounts"})}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)}}
|
||||
Loading…
Reference in New Issue
Block a user