Merge pull request #11 from BTI-US/master

Ad new UI interface for airdrop function

Author: Phillweston

.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
 
@@ -292,3 +301,4 @@ Replaced Image Sizes:
 - testimonial1.png - 90x89
 - testimonial2.png - 90x89
 - testimonial3.png - 90x89
+- blog1.jpg - 620x420

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));

css/light-version/responsive.css

@@ -208,7 +208,7 @@
     #price,
     #review,
     #contact,
-    #blog {
+    #airdrop {
         padding: 60px 0;
     }
 
@@ -256,6 +256,24 @@
         padding-top: 45px;
     }
 
+    .claim-airdrop {
+        border-radius: 2px;
+    }
+
+    .claim-airdrop h3 {
+        padding-left: 0px;
+        font-size: 21px;
+        text-align: center;
+        padding-bottom: 30px;
+    }
+    
+    .claim-airdrop a {
+        background: white;
+        padding: 14px 20px;
+        font-size: 16px;
+        margin-left: 10px;
+    }
+
     .sub-main {
         border-radius: 2px;
     }
@@ -289,6 +307,10 @@
 }
 
 @media(min-width:480px) and (max-width:575px) {
+    .claim-airdrop h3 {
+        font-size: 25px;
+    }
+
     .sub-main h3 {
         font-size: 25px;
     }
@@ -425,7 +447,7 @@
         margin-top: 50px;
     }
 
-    #blog {
+    #airdrop {
         padding: 60px 0;
     }
 
@@ -441,6 +463,17 @@
         padding-top: 45px;
     }
 
+    .claim-airdrop h3 {
+        padding-left: 0;
+        text-align: center;
+        padding-bottom: 30px;
+    }
+
+    .claim-airdrop a {
+        padding: 15px 20px;
+        font-size: 16px;
+    }
+
     .sub-main h3 {
         padding-left: 0;
         text-align: center;
@@ -556,7 +589,7 @@
         padding-top: 60px;
     }
 
-    #blog {
+    #airdrop {
         padding: 60px 0;
     }
 
@@ -632,6 +665,11 @@
         padding-left: 13px;
     }
 
+    .claim-airdrop a {
+        padding: 15px 19px;
+        font-size: 15px;
+    }
+
     .sub-main a {
         padding: 15px 19px;
         font-size: 15px;

css/light-version/style.css

@@ -1580,7 +1580,7 @@ textarea::placeholder {
 /*===========================
 11.0 *** BLOG AREA START ***
 =============================*/
-#blog {
+#airdrop {
     padding: 80px 0;
 }
 
@@ -1643,11 +1643,28 @@ textarea::placeholder {
     padding-bottom: 25px;
 }
 
-.search-btn {
-    width: 60px;
+.claim-airdrop {
+    margin-top: 20px;
+    padding: 30px 0;
     background: #ff7657;
+    border-radius: 50px;
+    margin-bottom: 20px;
+}
+
+.claim-airdrop h3 {
+    padding-left: 60px;
+    font-size: 26px;
     color: white;
-    border: 1px solid #ff7657;
+    font-family: pb;
+}
+
+.claim-airdrop a {
+    background: white;
+    padding: 15px 25px;
+    border-radius: 50px;
+    font-family: pb;
+    color: #ff7657;
+    font-size: 18px;
 }
 
 /*===========================
@@ -1973,4 +1990,21 @@ textarea::placeholder {
 /* Optional: Style for hover state */
 .address-container button:hover {
     background-color: #e0e0e0; /* Slightly lighter grey for hover state */
+}
+
+.airdropNumber, .airdropNumber2 {
+    color: #ff7657;
+    font-weight: bold;
+    padding-left: 25px;
+    padding-right: 25px;
+}
+
+.airdropNumber {
+    color: #ff7657;
+    font-size: 1.5em;
+}
+
+.airdropNumber2 {
+    color: #151515;
+    font-size: 1em;
 }

css/responsive.css

@@ -203,7 +203,7 @@
     #price,
     #review,
     #contact,
-    #blog {
+    #airdrop {
         padding: 60px 0;
     }
 
@@ -251,6 +251,24 @@
         padding-top: 45px;
     }
 
+    .claim-airdrop {
+        border-radius: 2px;
+    }
+
+    .claim-airdrop h3 {
+        padding-left: 0px;
+        font-size: 21px;
+        text-align: center;
+        padding-bottom: 30px;
+    }
+    
+    .claim-airdrop a {
+        background: white;
+        padding: 14px 20px;
+        font-size: 16px;
+        margin-left: 10px;
+    }
+
     .sub-main {
         border-radius: 2px;
     }
@@ -284,6 +302,10 @@
 }
 
 @media(min-width:480px) and (max-width:575px) {
+    .claim-airdrop h3 {
+        font-size: 25px;
+    }
+
     .sub-main h3 {
         font-size: 25px;
     }
@@ -420,7 +442,7 @@
         margin-top: 50px;
     }
 
-    #blog {
+    #airdrop {
         padding: 60px 0;
     }
 
@@ -436,6 +458,17 @@
         padding-top: 45px;
     }
 
+    .claim-airdrop h3 {
+        padding-left: 0;
+        text-align: center;
+        padding-bottom: 30px;
+    }
+
+    .claim-airdrop a {
+        padding: 15px 20px;
+        font-size: 16px;
+    }
+
     .sub-main h3 {
         padding-left: 0;
         text-align: center;
@@ -551,7 +584,7 @@
         padding-top: 60px;
     }
 
-    #blog {
+    #airdrop {
         padding: 60px 0;
     }
 
@@ -627,6 +660,11 @@
         padding-left: 13px;
     }
 
+    .claim-airdrop a {
+        padding: 15px 19px;
+        font-size: 15px;
+    }
+
     .sub-main a {
         padding: 15px 19px;
         font-size: 15px;

css/style.css

@@ -1554,7 +1554,6 @@ textarea:-ms-input-placeholder {
     -webkit-transition: all linear .3s;
     -o-transition: all linear .3s;
     transition: all linear .3s;
-
 }
 
 .con-btn:hover {
@@ -1599,7 +1598,7 @@ textarea::placeholder {
 /*===========================
 11.0 *** BLOG AREA START ***
 =============================*/
-#blog {
+#airdrop {
     padding: 80px 0;
 }
 
@@ -1662,11 +1661,28 @@ textarea::placeholder {
     padding-bottom: 25px;
 }
 
-.search-btn {
-    width: 60px;
+.claim-airdrop {
+    margin-top: 20px;
+    padding: 30px 0;
     background: #ff7657;
+    border-radius: 50px;
+    margin-bottom: 20px;
+}
+
+.claim-airdrop h3 {
+    padding-left: 60px;
+    font-size: 26px;
     color: white;
-    border: 1px solid #ff7657;
+    font-family: pb;
+}
+
+.claim-airdrop a {
+    background: white;
+    padding: 15px 25px;
+    border-radius: 50px;
+    font-family: pb;
+    color: #ff7657;
+    font-size: 18px;
 }
 
 /*===========================
@@ -1992,4 +2008,20 @@ textarea::placeholder {
 /* Optional: Style for hover state */
 .address-container button:hover {
     background-color: #444444; /* Slightly lighter grey for hover state */
+}
+
+.airdropNumber, .airdropNumber2 {
+    font-weight: bold;
+    padding-left: 25px;
+    padding-right: 25px;
+}
+
+.airdropNumber {
+    color: #ff7657;
+    font-size: 1.5em;
+}
+
+.airdropNumber2 {
+    color: #e0e0e0;
+    font-size: 1em;
 }