Bug fixes and code refactoring

css/main.css

@@ -752,12 +752,6 @@ menu {
   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;
@@ -775,6 +769,9 @@ menu {
 #meta_mask_status_button .icon-wrapper > * {
   grid-area: 1/1;
 }
+#meta_mask_status_button[data-status=connected] {
+  pointer-events: none;
+}
 #meta_mask_status_button[data-status=connected] .icon-wrapper::after {
   background-color: var(--green);
 }

css/main.scss

@@ -694,9 +694,6 @@ menu {
   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;
@@ -714,8 +711,11 @@ menu {
       grid-area: 1/1;
     }
   }
-  &[data-status="connected"] .icon-wrapper::after {
+  &[data-status="connected"] {
-    background-color: var(--green);
+    pointer-events: none;
+    .icon-wrapper::after {
+      background-color: var(--green);
+    }
   }
   &[data-status="disconnected"] .icon-wrapper::after {
     background-color: var(--danger-color);

index.html

@@ -29,7 +29,8 @@
                 </h4>
             </div>
         </div>
-        <button id="meta_mask_status_button" class="flex align-center" onclick="connectToMetaMask()">
+        <button id="meta_mask_status_button" class="button interactive flex align-center" data-status="disconnected"
+            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">
@@ -78,7 +79,7 @@
                     <script xmlns="" />
                 </svg>
             </div>
-            <div id="meta_mask_status"></div>
+            <div id="meta_mask_status">Disconnected</div>
         </button>
         <theme-toggle></theme-toggle>
     </header>
@@ -196,6 +197,37 @@
             }
             return getRef("notification_drawer").push(message, { icon, ...options });
         }
+        function createRipple(event, target) {
+            const circle = document.createElement("span");
+            const diameter = Math.max(target.clientWidth, target.clientHeight);
+            const radius = diameter / 2;
+            const targetDimensions = target.getBoundingClientRect();
+            circle.style.width = circle.style.height = `${diameter}px`;
+            circle.style.left = `${event.clientX - (targetDimensions.left + radius)}px`;
+            circle.style.top = `${event.clientY - (targetDimensions.top + radius)}px`;
+            circle.classList.add("ripple");
+            const rippleAnimation = circle.animate(
+                [
+                    {
+                        opacity: 1,
+                        transform: `scale(0)`
+                    },
+                    {
+                        transform: "scale(4)",
+                        opacity: 0,
+                    },
+                ],
+                {
+                    duration: 600,
+                    fill: "forwards",
+                    easing: "ease-out",
+                }
+            );
+            target.append(circle);
+            rippleAnimation.onfinish = () => {
+                circle.remove();
+            };
+        }
         function buttonLoader(id, show) {
             const button = typeof id === 'string' ? document.getElementById(id) : id;
             button.disabled = show;
@@ -250,15 +282,27 @@
             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', () => {
+            document.body.classList.remove('hidden')
+            document.addEventListener('keyup', (e) => {
+                if (e.key === 'Escape') {
+                    closePopup()
+                }
+            })
+            document.addEventListener('copy', () => {
+                notify('copied', 'success')
+            })
+            document.addEventListener("pointerdown", (e) => {
+                if (e.target.closest("button:not(:disabled), .interactive:not(:disabled)")) {
+                    createRipple(e, e.target.closest("button, .interactive"));
+                }
+            });
             connectToMetaMask().then(() => {
                 setMetaMaskStatus(window.ethereum.isConnected())
             }).catch((error) => {

scripts/usdc_balance.js

@@ -1,10 +1,20 @@
 function connectToMetaMask() {
-  if (typeof window.ethereum === "undefined")
+  return new Promise((resolve, reject) => {
-    return 'Please install MetaMask'
+    if (typeof window.ethereum === "undefined")
-  return ethereum
+      return reject("MetaMask not installed");
-    .request({ method: 'eth_requestAccounts' })
+    ethereum
+      .request({ method: 'eth_requestAccounts' })
+      .then((accounts) => {
+        console.log('Connected to MetaMask')
+        return resolve(accounts)
+      })
+      .catch((err) => {
+        console.log(err)
+        return reject(err)
+      })
+  })
 }
-// connectToMetaMask();
+connectToMetaMask();
 async function checkUSDCBalance(ethAddress) {
   try {
     if (!window.ethereum.isConnected()) {

scripts/usdc_balance.min.js

@@ -1 +1 @@
-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)}}
+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();