Frontend

If you want to preview your application locally you will need to follow the steps below:

1. npm install --legacy-peer-deps
2. npm run dev
3. Open http://localhost:3000 to preview your application.

You need to change the URL of the API on the file:

airdrop-frontend/src/App.tsx

try {
      await fetch("https://airdrop-api.yourdomain.com/api/airdrop", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(state),
      });

Change yourdomain.com to you existing API domain name.

Edit the texts for the Airdrop Frontend script.

To edit the English translation you need to open this file:

• ZiLab Airdrop Files/Frontend Files/locales/gb/common.json

{
  "es": "Spanish",
  "gb": "English",
  "step": "Step",
  "page.home.head.title": "GRUUK Token Airdrop GET LUCKY!",
  "airdrop.end.text": [
    "<b>",
    "EDITABLE AIRDROP END TEXT",
    "</b>"
  ],
  "page.home.meta.description": "GRK Token Airdrop, 25 winners get 1000 GRK tokens + 10 USDT",
  "page.home.participate.text": [
    "<p>",
    "To participate in GRUUK Token Airdrop, please fill out all the steps in the form. Good luck!",
    "</p>",
    "<p>",
    "⏩ 25 Winners will get 1000 $GRK Tokens + 10 USDT 💸 each.",
    "</p>",
    "<p>",
    "⏩ 25 Winners will get 500 $GRK Tokens + 5 USDT 💸 each.",
    "</p>",
    "<p>",
    "⏩ 25 Winners will get 250 $GRK Tokens 💸 each.",
    "</p>",
    "<p>",
    "⏩ 25 Winners will get 100 $GRK Tokens 💸 each.",
    "</p>"
  ],
  "thirdform.address.placeholder": "Enter Your Binance Smart Chain Wallet address",
  "secondform.error.text": "Please complete clicking on all buttons",
  "general.step": "STEP",
  "general.prev": "prev",
  "general.next": "next",
  "general.submit": "Submit",
  "general.days": "days",
  "general.hours": "hours",
  "general.minutes": "minutes",
  "general.seconds": "seconds",
  "error.submit.text": "System Error! Due to a high requests there was a problem, please try again in couple of minutes",
  "success.submit.text": [
    "<b>",
    "<i>",
        "SUCCESS FINISHED GOOD THANKS FOR PARTICIPATION",
    "</i>",
    "</b>"
]
}

The file content looks similar to this. Feel free to edit it as you need.

By default, the images are stored under the /public directory.

You can upload your logo, and section image there.

Keep in mind, that if you want to change the image names and/or format, you will need to edit this file:

ZiLab Airdrop Files/Frontend Files/global-config.ts

import airdropImage from "/public/airdrop.png";

// for logo size must be h-12 w-12 height: 3rem; /* 48px */
import logo from "./public/logo.png";

You can simply update the airdrop.png and/or logo.png to whatever you want.

To change the theme colors, you need to open this file:

ZiLab Airdrop Files/Frontend Files/tailwind.config.js

Colors can be changed here:

extend: {
      colors: {
        primary: "#3336FF",
        warn: "#4b50e6",
        error: "#3336FF",
        twitter: "#1DA1F2",
        telegram: "#0088cc",
        youtube: "#e250e5",
        discord: "#7289da"
      },
    },

To edit the airdrop countdown time you need to open the file frontend/src/.env and update the values there:

# date format "MM DD YYYY, h:mm a"
VITE_TIME_TILL_DATE="06 08 2022, 9:00 am" 

Please make sure that you follow the format.

Once all the changes are done on the local environment, now you are ready to deploy the frontend compiled files to your hosting.

To deploy the files on cPanel you need to follow the steps below.

1. Run command: npm run export
2. This command will generate folder "out" on the source file directory.
3. Make a ZIP of "out" folder.
4. Upload the "out.zip" to your subdomain on the cPanel via File Manager.
5. Extract the files.
6. Open airdrop.yourdomain.com/out directory, select all the files and move them to airdrop.yourdomain.com.
7. Create .htaccess file with the following content:

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index.html$ - [L]
  RewriteCond % !-f
  RewriteCond % !-d
  RewriteCond % !-L
  RewriteRule . /index.html [L]

</IfModule>