Feat/ Adding Mix of Standars ERC1155 & ERC20 into the same UI for deploying airdrops

README.md

@@ -40,17 +40,24 @@ To clone and run this project locally, follow these steps:
    Create a `.env` file in the root directory and add necessary environment variables. Example:
 
    ```sh
-    NEXT_PUBLIC_AIRDROP_MANAGER_ADDRESS=
-    NEXT_PUBLIC_RPC_URL=
-    NEXT_PUBLIC_EXPLORER=
+   NEXT_PUBLIC_AIRDROP_MANAGER_ADDRESS=
+   NEXT_PUBLIC_RPC_URL=
+   NEXT_PUBLIC_EXPLORER=
+   NEXT_PUBLIC_BUNDLER_API_KEY="eyJvcmciOiI2NTIzZjY5MzUwOTBmNzAwMDFiYjJkZWIiLCJpZCI6IjMxMDZiOGY2NTRhZTRhZTM4MGVjYjJiN2Q2NDMzMjM4IiwiaCI6Im11cm11cjEyOCJ9"
+   NEXT_PUBLIC_CUSTOM_BUNDLER_URL="https://rootstocktestnet-bundler.etherspot.io/"
+   NEXT_PUBLIC_CHAIN_ID="31"
+   NEXT_PUBLIC_ARKA_PUBLIC_KEY="arka_public_key"
+   NEXT_PUBLIC_PK=
+   NEXT_PUBLIC_PINATA_URL=
    ```
 
 4. **Run the development server**:
 
    ```sh
    npm run dev
    ```
-
+## Smart Contracts
+You can follow the [Airdrop Template Repository](https://github.com/rsksmart/airdrop-template) which contains the smart contracts for the Airdrop Manager and the Airdrop Token. You can deploy them by yourself or use the deployed contracts on the RSK Testnet.
 
 ## Usage
 

src/components/Hero/Hero.tsx

@@ -12,15 +12,6 @@ function Hero() {
           <div className='flex-1'>
             <Title />
             <div className='flex justify-between mt-14 items-center'>
-              <Button
-                onClick={undefined}
-                outline
-                rounded
-                variant='secondary'
-                width={190}
-                >
-                Airdrop Section
-              </Button>
               <div className='w-[345px] font-medium'>
                 <span className='bg-custom-orange w-[60px] h-[14px] rounded-full px-1 text-black'>WHAT IS?</span>
                 <p className='mb-3 mt-4'>Welcome to the Runes Giveaway Machine! Airdrop Section, claim unique airdrops on RSK Network</p>

src/components/airdrop/AirdropCard.tsx

@@ -1,7 +1,6 @@
 import Button from '../common/Button'
 import XIcon from '../icons/XIcon'
 import ProgressBar from './ProgressBar'
-import AirdropIcon from '../icons/AirdropIcon'
 import ArrowRightIcon from '../icons/ArrowRightIcon'
 import { useAuth } from '@/context/AuthContext'
 import Badge from '../common/Badge'
@@ -10,7 +9,11 @@ import Connect from '../navigation/Connect'
 import MerkleData from '@/utils/merkleData.json'
 import { useEffect, useState } from 'react'
 import { ethers } from 'ethers'
-
+import CopyIcon from '../icons/CopyIcon'
+import { formatDate } from '@/utils/formatDate'
+import useAirdrop from '@/hooks/useAirdrop'
+import ConnectWalletButton from '../navigation/ConnectWalletButton'
+import { PINATA_URL } from '@/constants'
 type props = {
   background?: string
   dialog?: boolean
@@ -19,20 +22,51 @@ type props = {
   airdrop: IAirdrop
 }
 
+function formatAddress(address: string) {
+  return `${address.slice(0, 4)}...${address.slice(-4)}`
+}
+
 function AirdropCard({ background = 'bg-custom-orange', onClick, dialog = false, airdrop, onCloseDialog }: props) {
-  const { isAdmin, address, domain, gasless, setGasless } = useAuth();
+  const { isAdmin, address, gasless, setGasless } = useAuth();
   const [amount, setAmount] = useState<string>('0');
+  const [copied, setCopied] = useState<boolean>(false);
+  const [imgLink, setImgLink] = useState<string | null>(null);
+
   let disabled = false;
   if (address) disabled = !isAdmin ? (!airdrop.isAllowed || airdrop.isClaimed! || airdrop?.isExpired! || airdrop.balance === 0) : false;
   useEffect(() => {
-    if (airdrop.airdropType !== 'merkle') return;
+    if (airdrop.airdropType !== '1') return;
     const claim = MerkleData.claims.find(claim => claim.address.toLowerCase() === address.toLowerCase());
     setAmount(claim?.amount ? ethers.formatUnits(claim?.amount, 18).toString() : '0');
-  }, [address])
+  }, [address, airdrop.airdropType]);
+  const copyAddress = (address: string) => {
+    setCopied(true);
+    navigator.clipboard.writeText(address)
+    setTimeout(() => {
+      setCopied(false);
+    }, 1000);
+  }
+
+  const trim1 = (text: string) => {
+    return text.substring(0, 4);
+  }
+  const trim2 = (text: string) => {
+    return text.substring(text.length - 4);
+  }
+  console.log(imgLink);
+
   return (
     <>
-      <article className={`${(disabled && !dialog) ? 'cursor-not-allowed bg-zinc-950 border-zinc-700' : 'border-white'} rounded-[20px] justify-between gap-2 relative ${dialog ? 'w-full' : 'border p-7 w-[400px]'}`}>
-        <div className={`!absolute -top-3 right-0 px-2 flex gap-2 ${!dialog ? '' : 'hidden'}`}>
+      <article className={`${(disabled && !dialog) ? 'cursor-not-allowed bg-zinc-950 border-zinc-700' : 'border-white'} rounded-[20px] justify-between gap-2 relative ${dialog ? 'w-full h-full' : 'border p-6 w-[400px]'}`}>
+        <div className={`!absolute w-full justify-end -top-4 right-0 px-2 flex gap-2 ${!dialog ? '' : 'hidden'}`}>
+          {
+            (airdrop.new) &&
+            <Badge
+              color='new'
+              title='New'
+              isNew
+            />
+          }
           {
             (!airdrop.isAllowed && address) &&
             <Badge
@@ -58,7 +92,7 @@ function AirdropCard({ background = 'bg-custom-orange', onClick, dialog = false,
             (airdrop.balance === 0 && address) &&
             <Badge
               color='cyan'
-              title='No Balance'
+              title='Insufficient balance'
             />
           }
           {
@@ -78,52 +112,78 @@ function AirdropCard({ background = 'bg-custom-orange', onClick, dialog = false,
             )
           }
         </div>
-        <section className='flex w-full'>
+        <section className='flex w-full h-full'>
           <div className='w-2/3'>
             <h3 className={`${background} w-max font-semibold text-xl px-1 text-black`}>{airdrop.name}</h3>
             <ProgressBar value={airdrop.progress!} background={background} />
             <section className='w-full mt-2'>
               <div className='flex justify-between'>
                 <h6>Amount to receive</h6>
-                <p>{airdrop.airdropType === 'merkle' ? amount : airdrop.claimAmount}</p>
-              </div>
-              <div className='flex justify-between mt-2'>
-                <h6>Total available</h6>
-                <p>{airdrop.airdropAmountLeft}</p>
-              </div>
-              <div className='text-zinc-500 font-semibold text-xs flex justify-between mt-2'>
-                <h6>Expiration date</h6>
-                <p>{airdrop.expirationDate.toDateString()}</p>
+                <p>{airdrop.airdropType === '1' ? 'Variable' : airdrop.claimAmount}</p>
               </div>
+              {
+                airdrop.balance !== 0 &&
+                <div className='flex justify-between mt-2'>
+                  <h6>Available to claim</h6>
+                  <p>{airdrop.airdropAmountLeft}</p>
+                </div>
+              }
               <div className='text-zinc-500 font-semibold text-xs flex justify-between mt-1'>
                 <h6>Type</h6>
-                <p>{airdrop.airdropType}</p>
+                <p>{airdrop.airdropType === '0' ? 'ERC 1155 Custom' : airdrop.airdropType === '1' ? 'ERC 1155 Merkle' : 'ERC 20'}</p>
+              </div>
+              <div className='text-zinc-500 font-semibold text-xs flex justify-between mt-2'>
+                <h6>Expiration</h6>
+                <p>{formatDate(airdrop.expirationDate)}</p>
               </div>
             </section>
           </div>
           <div className='w-1/3 flex justify-between flex-col items-end'>
-            <div className="gap-4 flex flex-col">
-              <AirdropIcon />
-              <Button
-                show={(!dialog || !!address)}
-                onClick={onClick}
-                className='self-end !px-0 group'
-                width={dialog ? 76 : 45}
-                outline
-                variant={dialog ? 'secondary' : 'primary'}
-                disabled={disabled}
-              >
-                {
-                  dialog
-                    ? 'claim'
-                    : <ArrowRightIcon className={`${disabled ? '' : 'group-hover:fill-black'} fill-white`} />
-                }
-              </Button>
+            <div className='mt-1 flex flex-col items-end gap2'>
+              <div className='text-zinc-300 mb-2 flex justify-between items-center gap-2 '>
+                <div>{formatAddress(airdrop.address)}</div>
+                <button className="relative w-4 h-4" onClick={() => copyAddress(airdrop.address)}>
+                  {
+                    copied && <span className='absolute -left-4 -top-6 transition-all duration-500'>copied</span>
+                  }
+                  <CopyIcon className='hover:fill-zinc-200 fill-zinc-400 relative w-4 h-4' />
+                </button>
+              </div>
+              {airdrop.uri && airdrop.uri != '' ?
+                (
+                  <img
+                    src={`${PINATA_URL}${airdrop.uri}`}
+                    alt={`airdrop token logo`}
+                    className="w-20 h-20 rounded-full"
+                  />
+                ) : (
+                  <img
+                    src={'/img/RSKLogo.png'}
+                    alt={`airdrop token logo`}
+                    className="w-20 h-20 rounded-full"
+                  />
+                )
+              }
             </div>
+            <Button
+              show={(!dialog || !!address)}
+              onClick={onClick}
+              className='self-end !px-0 group'
+              width={dialog ? 76 : 45}
+              outline
+              variant={dialog ? 'secondary' : 'primary'}
+              disabled={disabled}
+            >
+              {
+                dialog
+                  ? 'claim'
+                  : <ArrowRightIcon className={`${disabled ? '' : 'group-hover:fill-black'} fill-white`} />
+              }
+            </Button>
             {
-              (dialog && address && !domain) &&
-              <div className="flex gap-2 items-center">
-                <label htmlFor="">gasless</label>
+              (dialog && address) &&
+              <div className="flex gap-2 items-center mt-2">
+                <label htmlFor="" className='text-zinc-400'>gasless</label>
                 <label className="flex relative items-center cursor-pointer">
                   <input
                     checked={gasless}
@@ -137,12 +197,8 @@ function AirdropCard({ background = 'bg-custom-orange', onClick, dialog = false,
             }
           </div>
         </section>
-        <section className={`mt-8 ${!(!address && dialog) ? 'hidden' : ''}`}>
-          <Connect className='flex gap-4 flex-col w-full items-center justify-center' connectWalletTitle='Connect wallet to claim' connectRNSTitle="Use RNS to claim" />
-        </section>
-        <section className={`mt-7 ${dialog ? '' : 'hidden'}`}>
-          <h4 className='font-semibold text-sm'>Description</h4>
-          <p className='text-xs text-zinc-400'>nisi porta lorem mollis aliquam ut porttitor leo a diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget felis eget nunc lobortis mattis aliquam faucibus purus in massa tempor nec</p>
+        <section className={`flex justify-center mt-8 ${!(!address && dialog) ? 'hidden' : ''}`}>
+          <ConnectWalletButton title='Connect wallet to claim' width={230} />
         </section>
       </article>
     </>

src/components/airdrop/AirdropContainer.tsx

@@ -4,31 +4,46 @@ import useAirdrop from '@/hooks/useAirdrop'
 import Filters from './Filters';
 import CardLoader from '../loader/CardLoader';
 import { useAuth } from '@/context/AuthContext';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import { IAirdrop } from '@/interface/IAirdrop';
 
 function AirdropContainer() {
   const colors = ['bg-custom-orange', 'bg-custom-green', 'bg-custom-pink'];
-
-  const { getAllAirdrops } = useAirdrop();
+  const [filters, setFilters] = useState("")
   const { provider, airdropLoading, airdrops } = useAuth();
+  const { getAllAirdrops } = useAirdrop();
+  const [currrentAirdrops, setCurrentAirdrops] = useState(airdrops)
+
+  useEffect(() => {
+    if (airdrops && !filters) {
+      setCurrentAirdrops(airdrops)
+    }
+
+    if (airdrops && filters) {
+      const s: IAirdrop[] = airdrops!.filter((airdrop: IAirdrop) => airdrop.name.toLocaleLowerCase().includes(filters.toLocaleLowerCase()))
+      setCurrentAirdrops(s)
+    }
+  }, [airdrops, filters]);
+
   useEffect(() => {
     getAllAirdrops();
   }, [provider, getAllAirdrops]);
 
   return (
     <div className="lg:w-[90%] xl:w-[1300px] m-auto mt-[90px]">
-      <Filters />
+      <Filters filters={filters} setFilters={setFilters} />
       <div className='mt-16 flex flex-wrap gap-6'>
         {airdropLoading ? (
           <CardLoader />
-        ) :
-          airdrops?.map((air, i) => 
+        ) : (
+          currrentAirdrops?.map((air, i) =>
             <AirdropItem
               airdrop={air}
               key={i}
               background={`${colors[i % colors.length]}`}
             />
           )
+        )
         }
         {
           (airdrops?.length === 0 && !airdropLoading) && (

src/components/airdrop/Content.tsx

@@ -3,8 +3,7 @@ import AirdropContainer from './AirdropContainer'
 function Content() {
   return (
     <section id='airdrop-content' className="m-auto min-h-screen">
-      <div className="w-full border-y border-y-white flex justify-center gap-3 py-8 mb-10 items-center">
-        <span className="w-max bg-gray-700 text-white text-xs rounded-full px-2 font-semibold leading-none py-1 h-max flex justify-center items-center">01</span>
+      <div className="w-full border-y border-y-white flex justify-center gap-3 py-6 items-center">
         <h4 className="text-xl font-bold">Airdrops available for claimiming</h4>
       </div>        
       <AirdropContainer />