Bump the npm_and_yarn group with 1 update

.github/workflows/codeql.yml

@@ -63,6 +63,7 @@ jobs:
         CONTRACT_ADDRESS: ${{ secrets.CONTRACT_ADDRESS }}
         WEB_ADDRESS: ${{ secrets.WEB_ADDRESS }}
         TURNSTILE_SITE_KEY: ${{ secrets.TURNSTILE_SITE_KEY }}
+        INFURA_API_KEY: ${{ secrets.INFURA_API_KEY }}
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL

.github/workflows/static.yml

@@ -46,6 +46,7 @@ jobs:
           CONTRACT_ADDRESS: ${{ secrets.CONTRACT_ADDRESS }}
           WEB_ADDRESS: ${{ secrets.WEB_ADDRESS }}
           TURNSTILE_SITE_KEY: ${{ secrets.TURNSTILE_SITE_KEY }}
+          INFURA_API_KEY: ${{ secrets.INFURA_API_KEY }}
       - name: Setup Pages
         uses: actions/configure-pages@v4
       - name: Upload artifact

README.md

@@ -79,6 +79,12 @@ Click [here](https://docs.walletconnect.com/quick-start/dapps/web3-provider) to
 
 Click [here](https://docs.walletconnect.com/web3modal/javascript/about) to learn more about how to use the WalletConnect API for JavaScripts.
 
+## Infura API Usage
+
+Click [here](https://infura.io/docs) to learn more about Infura API.
+
+Click [here](https://infura.io/docs/gettingStarted/chooseaNetwork) to choose a network for Infura API.
+
 ## Network for Our Blockchain
 
 We are using the Base Mainnet network for our blockchain.
@@ -168,6 +174,7 @@ To successfully deploy and run the project locally, you need to create a `contra
          "contractAddress": "Your_Contract_Address",
          "webAddress": "Your_Web_Address",
          "turnstileSiteKey": "Your_CloudFlare_Turnstile_Site_Key",
+         "infuraApiKey": "Your_Infura_API_Key"
      }
      ```
    - Replace `Your_Network_Choice` with the network you are using (e.g., `base` for the Base Mainnet).
@@ -200,6 +207,7 @@ Here is an example of what your `contract-config.json` might look like for the B
     "contractAddress": "0x123abc456def789ghi",
     "webAddress": "https://flxdu.cn:8011/v1/info/transaction_count",
     "turnstileSiteKey": "0x123abc456def789ghi",
+    "infuraApiKey": "0x123abc456def789ghi"
 }
 ```
 
@@ -220,7 +228,8 @@ This section provides guidance on deploying your project to GitHub Pages and Clo
    |**`CONTRACT_ADDRESS`**|Essential|The Ethereum smart contract address the web application interacts with.|
    |**`PROJECT_ID`**|Essential|A unique identifier obtained from WalletConnect, used for WalletConnect API calls.|
    |**`TURNSTILE_SITE_KEY`**|Essential|The site key for Cloudflare's Turnstile service, used for bot protection and CAPTCHA verification.|
-   |**`WEB_ADDRESS`**|Essential|The backend URL of the airdrop function, better to use the specified domain for the project for clearer identification. |
+   |**`WEB_ADDRESS`**|Essential|The backend URL of the airdrop function, better to use the specified domain for the project for clearer identification.|
+   |**INFURA_API_KEY**|Essential|The API key for Infura, used to interact with the Ethereum network.|
 
 2. Used for Reverse Proxy
 

create-config.js

@@ -7,6 +7,7 @@ const config = {
   "contractAddress": process.env.CONTRACT_ADDRESS,
   "webAddress": process.env.WEB_ADDRESS,
   "turnstileSiteKey": process.env.TURNSTILE_SITE_KEY,
+  "infuraApiKey": process.env.INFURA_API_KEY
 };
 
 fs.writeFileSync('contract-config.json', JSON.stringify(config, null, 2));

index.html

@@ -81,7 +81,7 @@
                         <a class="nav-link" href="#review">Partner</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link bor" id="connectWallet" href="#" data-toggle="modal" data-target="#connectModal">Airdrop</a>
+                        <a class="nav-link bor" id="connectWallet" href="#" data-toggle="modal" data-target="#connectModal">Connect</a>
                     </li>
                 </ul>
             </div>
@@ -207,32 +207,20 @@ <h5 class="modal-title" id="walletAddressTitle">Notes Before Connecting</h5>
                 <div class="modal-dialog" role="document">
                     <div class="modal-content">
                         <div class="modal-header">
-                            <h5 class="modal-title" id="walletAddressTitle2">Connect Your Wallet</h5>
+                            <h5 class="modal-title" id="walletAddressTitle2">Congratulations</h5>
                             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                 <span aria-hidden="true">&times;</span>
                             </button>
                         </div>
                         <div class="modal-body">
                             <form>
                                 <div class="info-txt">
-                                    <div id="airdropHint1">You need to connect your wallet first!</div>
-                                    <div id="airdropHint2">Click 'Airdrop' on the right top of the view.</div>
+                                    <div>Congratulations!You have claimed xxxx Lotso, check on your wallet/div>
                                 </div>
                             </form>
-                            <div id="airdropSection" style="display: none;">
-                                <div id="turnstileWidget"></div>
-                                <button type="button" id="claimAirdrop" class="dropboxx2">Claim Your Airdrop</button>
-                                <div class="info-txt">
-                                    <div id="airdropMessage">Press the button above to claim your airdrop.</div>
-                                </div>
-                                <div id="current-progress" class="progress">
-                                    <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
-                                </div>
-                            </div>
                         </div>
                         <div class="modal-footer">
                             <button type="button" id='connectDecline2' class="dropboxx" data-dismiss="modal">Close</button>
-                            <button type="submit" id="connectAccept2" class="dropboxx2" data-dismiss="modal" data-target="#connectModal">Continue</button>
                         </div>
                     </div>
                 </div>
@@ -594,7 +582,7 @@ <h3>AIR<span>D</span>ROPS</h3>
                 </div>
             </div>
             <div class="row blog-pa">
-                <div class="col-lg-12">
+                <div class="col-lg-10 col-md-12 m-auto">
                     <div class="blog-main">
                         <div class="col-lg-12 blog-item">
                             <div class="blog-shadow">
@@ -613,17 +601,29 @@ <h3>Airdrop Claimed:</h3>
                 </div>
             </div>
             <div class="row">
-                <div class="col-lg-12 m-auto">
+                <div class="col-lg-9 m-auto">
                     <div class="claim-airdrop">
                         <div class="row">
                             <div class="col-lg-8 col-md-7">
                                 <h3>Claim Your Airdrop Now!</h3>
                             </div>
                             <div class="col-lg-4 col-md-5 subscripe-btn">
-                                <a id="claimAirdropBtn" href="#" data-toggle="modal" data-target="#connectModal2">Check Your Account</a>
+                                <a id="claimAirdrop" href="javascript:void(0);">Check Your Eligibility</a>
                             </div>
                         </div>
                     </div>
+                    <div class="info-txt">
+                        <div id="airdropHint1"></div>
+                    </div>
+                    <div id="airdropSection" style="display: none;">
+                        <div id="turnstileWidget"></div>
+                        <div class="info-txt">
+                            <div id="airdropMessage">Press the button above to claim your airdrop.</div>
+                        </div>
+                        <div id="current-progress" class="progress">
+                            <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -1366,6 +1366,7 @@ <h2>
     <script src="js/address-copy.js"></script>
     <script src="dist/claim-airdrop.bundle.js"></script>
     <script src="js/theme-switch.js"></script>
+    <script src="js/airdrop-update.js"></script>
     <script type="text/javascript">
         "use strict";
         $('#ckLine').ckLine({
@@ -1376,22 +1377,6 @@ <h2>
             interval: 80,
         });
     </script>
-    <script>
-        $(document).ready(function() {
-            $('#connectAccept2').click(function() {
-                // Close the current modal
-                $('#connectModal2').modal('hide');
-
-                // Optional: wait for the first modal to be completely hidden before showing the new one
-                $('#connectModal2').on('hidden.bs.modal', function() {
-                    // Open the new modal
-                    $('#connectModal').modal('show');
-                    // Make sure to unbind the event so it doesn't trigger multiple times
-                    $(this).off('hidden.bs.modal');
-                });
-            });
-        });
-    </script>
     <script>
         $(document).ready(function () {
             $('#checkAirdropButton').click(function() {

js/airdrop-update.js

@@ -0,0 +1,13 @@
+// TODO: Need to update this file to work with the new airdrop contract
+// function updateProgressBar(claimedCount) {
+//     const percentage = (claimedCount / totalAirdrops) * 100;
+//     const progressBar = document.querySelector("#airdrop-progress .progress-bar");
+//     progressBar.style.width = `${percentage}%`;
+//     progressBar.setAttribute("aria-valuenow", percentage);
+//     progressBar.textContent = `${percentage.toFixed(2)}%`;
+// }
+
+// countAirdropClaims().then(claims => {
+//     console.log(`Number of 'Claim Airdrop' transactions: ${claims}`);
+//     updateProgressBar(claims);
+// }).catch(console.error);

js/claim-airdrop.js

@@ -1,8 +1,8 @@
 import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi';
 import { base, baseSepolia, sepolia } from 'viem/chains';
 import { reconnect, watchAccount, disconnect, getAccount, readContract, writeContract, waitForTransactionReceipt } from '@wagmi/core';
-import $ from 'jquery';
-import { Fireworks } from 'fireworks-js';
+import bootstrap from 'bootstrap';
+// import { Fireworks } from 'fireworks-js';
 
 // 1. Get a project ID at https://cloud.walletconnect.com
 let projectId, activeNetwork, contractAddress, webAddress, turnstileSiteKey;
@@ -79,8 +79,8 @@ function connect(param = 'dark') {
         disconnect(config);
 
         // Clear the display information
-        document.getElementById('claimAirdrop').innerText = 'Check Your Account';
-        document.getElementById('airdropMessage').innerText = 'Press the button above to check for airdrop.';
+        document.getElementById('claimAirdrop').innerText = 'Check Your Eligibility';
+        //document.getElementById('airdropMessage').innerText = 'Press the button above to check for airdrop.';
     } else {
         modal.setThemeMode(param);
         modal.open();
@@ -91,14 +91,11 @@ const connectBtn = document.getElementById('connectWallet');
 const hint1 = document.getElementById('walletAddressHint1');
 const hint2 = document.getElementById('walletAddressHint2');
 const airdropHint1 = document.getElementById('airdropHint1');
-const airdropHint2 = document.getElementById('airdropHint2');
 const acceptBtn = document.getElementById('connectAccept');
 const declineBtn = document.getElementById('connectDecline');
 const connectTitle = document.getElementById('walletAddressTitle');
-const connectTitle2 = document.getElementById('walletAddressTitle2');
 const airdrop = document.getElementById('airdropSection');
 const gotoAirdrop = document.getElementById('gotoSection');
-const continueBtn = document.getElementById('connectAccept2');
 
 if (acceptBtn) {
     acceptBtn.addEventListener('click', function() {
@@ -154,28 +151,23 @@ watchAccount(config,
                     acceptBtn.innerText = 'Disconnect';
                     connectBtn.innerText = truncatedAddress;
                     connectTitle.innerText = 'Account Information';
-                    connectTitle2.innerText = 'Airdrop Information';
                     declineBtn.innerText = 'Close';
                     airdrop.style.display = 'block';
-                    gotoAirdrop.style.display = 'block';
+                    // TODO: Temporarily disable this button
+                    gotoAirdrop.style.display = 'none';
                     // Hide the continue button after connecting the wallet
-                    continueBtn.style.display = 'none';
-                    airdropHint1.innerHTML = 'You can check your eligibility for the airdrop by clicking the button below.';
-                    airdropHint2.innerHTML = '';
+                    airdropHint1.style.display = 'none';
                 } else {
-                    airdropHint1.innerHTML = 'You need to connect your wallet first!';
-                    airdropHint2.innerHTML = 'Click \'Airdrop\' on the right top of the view.';
                     hint1.innerHTML = 'To continue, please connect your Web3 wallet, such as <a href="https://metamask.io/" target="_blank" rel="noopener noreferrer">MetaMask</a> or <a href="https://walletconnect.org/" target="_blank" rel="noopener noreferrer">WalletConnect</a>. This allows our website to securely interact with your wallet.';
                     hint2.innerHTML = 'By clicking "Accept and Continue", you agree to our <a href="#" data-toggle="modal" data-target="#termsModal">terms and conditions</a> and <a href="#" data-toggle="modal" data-target="#privacyModal">privacy policy</a>. You will be prompted to connect your wallet via an external link. Ensure you\'re using a trusted and secure wallet service.';
                     acceptBtn.innerText = 'Accept and Continue';
-                    connectBtn.innerText = 'Airdrop';
+                    connectBtn.innerText = 'Connect';
                     connectTitle.innerText = 'Notes Before Connecting';
-                    connectTitle2.innerText = 'NConnect Your Wallet';
                     declineBtn.innerText = 'Decline';
                     airdrop.style.display = 'none';
                     gotoAirdrop.style.display = 'none';
                     // Show the continue button before connecting the wallet
-                    continueBtn.style.display = 'block';
+                    airdropHint1.style.display = 'block';
                 }
             }
         }
@@ -218,6 +210,7 @@ async function initiateTransaction() {
 
         // Acquire full address from the DOM element
         const fullAddress = document.getElementById('address').getAttribute('data-full-address');
+        console.log('Full Address:', fullAddress);
 
         const contractReadResult = await readContract(config, {
             abi: airdropAcquireABI,
@@ -282,16 +275,24 @@ async function confirmTransaction() {
 
         console.log('Transaction Receipt:', transactionReceipt);
         if (transactionReceipt && transactionReceipt.status === 'success') {
-            displayMessage('Transaction successful! The modal will close in 5 seconds.', 'success');
+            displayMessage('Transaction successful! Check Your Wallet For Airdrop', 'success');
             updateProgressBar(100, 'green');
-            document.getElementById('claimAirdrop').textContent = 'Check Your Account';
+            document.getElementById('claimAirdrop').textContent = 'Check Your Eligibility';
+
+            var modal = document.getElementById('connectModal2');
+
+            // Show the modal
+            var bootstrapModal = new bootstrap.Modal(modal, {
+                keyboard: false
+            });
+            bootstrapModal.show();
 
-            // Set a timeout to close the modal after 5 seconds (5000 milliseconds)
+            // Set a timeout to close the modal after 5 seconds
             setTimeout(function() {
-                $('#connectModal2').modal('hide'); // Using jQuery to close the modal
+                bootstrapModal.hide();
             }, 5000);
-            // Show fireworks animation for 10 seconds
-            startFireworksForDuration(10000);
+            // TODO: Show fireworks animation for 10 seconds
+            //startFireworksForDuration(10000);
         } else {
             displayMessage('Transaction failed', 'error');
             updateProgressBar(100, 'red');
@@ -437,32 +438,34 @@ document.addEventListener('DOMContentLoaded', function () {
     }
 
     if (claimAirdropButton) {
-        if (claimAirdropButton.textContent === 'Check Your Account') {
-            document.getElementById('airdropMessage').innerText = 'Press the button above to check for airdrop.';
-        } else if (claimAirdropButton.textContent === 'Claim Your Airdrop') {
+        if (claimAirdropButton.textContent === 'Claim Your Airdrop') {
             document.getElementById('airdropMessage').innerText = 'Press the button above to claim your airdrop.';
         } else if (claimAirdropButton.textContent === 'Confirm Your Airdrop') {
             document.getElementById('airdropMessage').innerText = 'Press the button above to confirm your airdrop.';
         }
 
         claimAirdropButton.addEventListener('click', function handleButtonClick() {
-            if (!isLocal) {
-                var response = document.querySelector('[name="cf-turnstile-response"]').value;
-                if (response) {
-                    proceedWithAction(claimAirdropButton); // Proceed after CAPTCHA validation
+            if (connectBtn.textContent === 'Connect') {
+                airdropHint1.innerText = 'You need to connect your wallet first!';
+            } else {
+                if (!isLocal) {
+                    var response = document.querySelector('[name="cf-turnstile-response"]').value;
+                    if (response) {
+                        proceedWithAction(claimAirdropButton); // Proceed after CAPTCHA validation
+                    } else {
+                        displayMessage('Please complete the CAPTCHA', 'error');
+                    }
                 } else {
-                    displayMessage('Please complete the CAPTCHA', 'error');
+                    console.log('Running locally, skipping CloudFlare Turnstile verification');
+                    proceedWithAction(claimAirdropButton); // Directly proceed as it's a local environment
                 }
-            } else {
-                console.log('Running locally, skipping CloudFlare Turnstile verification');
-                proceedWithAction(claimAirdropButton); // Directly proceed as it's a local environment
             }
         });
     }
 });
 
 function proceedWithAction(button) {
-    if (button.textContent === 'Check Your Account') {
+    if (button.textContent === 'Check Your Eligibility') {
         checkUserEligibility();
     } else if (button.textContent === 'Claim Your Airdrop') {
         initiateTransaction();
@@ -471,14 +474,14 @@ function proceedWithAction(button) {
     }
 }
 
-function startFireworksForDuration(duration) {
-    const container = document.querySelector('.container');
-    const options = { /* Customize options for fireworks */ };
-    const fireworks = new Fireworks(container, options);
-    fireworks.start();
-
-    // Stop fireworks after the specified duration
-    setTimeout(() => {
-        fireworks.stop();
-    }, duration);
-}
+// function startFireworksForDuration(duration) {
+//     const container = document.querySelector('.container');
+//     const options = { /* Customize options for fireworks */ };
+//     const fireworks = new Fireworks(container, options);
+//     fireworks.start();
+
+//     // Stop fireworks after the specified duration
+//     setTimeout(() => {
+//         fireworks.stop();
+//     }, duration);
+// }