Merge pull request #618 from pangolindex/fix/special_airdrop

src/constants/airdrop.ts

@@ -6,6 +6,18 @@ import { NEAR_MAINNET, Chain, COSTON_TESTNET, SONGBIRD_CANARY, FLARE_MAINNET, Ch
 
 export const activeAirdrops: Chain[] = [COSTON_TESTNET]
 
+export type SpecialAirdropData = { title: string; merkledropContractAddress: string; isActive: boolean }
+
+export const specialAirdrops: { [chainId in ChainId]?: SpecialAirdropData[] } = {
+  [ChainId.SONGBIRD]: [
+    {
+      title: 'Old PSB Reimbursement 1',
+      merkledropContractAddress: '0x1b40cC3c0Da7D3419BBF0D34a2171966b42646CE',
+      isActive: true
+    }
+  ]
+}
+
 export const commingSoonAirdrops = [NEAR_MAINNET, SONGBIRD_CANARY, FLARE_MAINNET]
 
 export const logoMapping = {

src/hooks/useContract.ts

@@ -68,7 +68,7 @@ export function useAirdropContract(): Contract | null {
   return useContract(chainId ? AIRDROP_ADDRESS[chainId] : undefined, Airdrop.abi, true)
 }
 
-export const useMerkledropContract = () => {
+export const useMerkledropContract = (address?: string) => {
   const chainId = useChainId()
-  return useContract(MERKLEDROP_ADDRESS[chainId], MerkleAirdrop.abi, true)
+  return useContract(address || MERKLEDROP_ADDRESS[chainId], MerkleAirdrop.abi, true)
 }

src/pages/Beta/Airdrop2/ChangeChain/index.tsx

@@ -13,7 +13,7 @@ const ChangeChain: React.FC<Props> = ({ chain }) => {
   return (
     <Wrapper>
       <Title chain={chain} title={`Change to ${chain?.name}`} />
-      <Box display="flex" alignItems="center" justifyContent="center" minHeight="120px">
+      <Box display="flex" alignItems="center" justifyContent="center" minHeight="120px" flex={1}>
         <Text fontSize={16} fontWeight={500} color="text1">
           Go to {chain.name} to see if you are eligible!
         </Text>

src/pages/Beta/Airdrop2/ClaimReward/index.tsx

@@ -13,20 +13,22 @@ import Title from '../Title'
 
 interface Props {
   chain: Chain
+  merkledropContractAddress?: string
+  subtitle?: string
 }
 
-const ClaimReward: React.FC<Props> = ({ chain }) => {
+const ClaimReward: React.FC<Props> = ({ chain, merkledropContractAddress, subtitle }) => {
   const { account } = useWeb3React()
   const chainId = useChainId()
 
   const png = PNG[chainId]
 
   const [openDrawer, setOpenDrawer] = useState(false)
 
-  const { onClaim, onDimiss, hash, attempting, error } = useClaimAirdrop(account)
+  const { onClaim, onDimiss, hash, attempting, error } = useClaimAirdrop(account, merkledropContractAddress)
 
-  const { data } = useMerkledropProof(account)
-  const claimedAmount = useMerkledropClaimedAmounts(account)
+  const { data } = useMerkledropProof(account, merkledropContractAddress)
+  const claimedAmount = useMerkledropClaimedAmounts(account, merkledropContractAddress)
 
   const claimAmount = data?.amount ?? new TokenAmount(PNG[chainId], '0')
   const totalToClaim = claimAmount.subtract(claimedAmount)
@@ -55,7 +57,7 @@ const ClaimReward: React.FC<Props> = ({ chain }) => {
 
   return (
     <Wrapper>
-      <Title chain={chain} title="You Are Eligible!" />
+      <Title chain={chain} title="You Are Eligible!" subtitle={subtitle} />
       <Box display="flex" alignItems="center" minHeight="150px">
         <Text fontSize={16} fontWeight={500} color="text10">
           You are eligible for:

src/pages/Beta/Airdrop2/NotConnected/index.tsx

@@ -7,15 +7,16 @@ import Title from '../Title'
 
 interface Props {
   chain: Chain
+  title?: string
 }
 
-const NotConnected: React.FC<Props> = ({ chain }) => {
+const NotConnected: React.FC<Props> = ({ chain, title }) => {
   const toggleWalletModal = useWalletModalToggle()
   const { t } = useTranslation()
   return (
     <Wrapper>
-      <Title chain={chain} title="Connect Your Wallet" />
-      <Box display="flex" alignItems="center" justifyContent="center" minHeight="150px">
+      <Title chain={chain} title={title || `Claim ${chain.png_symbol}`} />
+      <Box display="flex" alignItems="center" justifyContent="center" minHeight="150px" flex={1}>
         <Text fontSize={16} fontWeight={500} lineHeight="18px" color="text10">
           Let&apos;s check if you are eligible!
         </Text>

src/pages/Beta/Airdrop2/Title.tsx

@@ -1,4 +1,4 @@
-import { Text } from '@pangolindex/components'
+import { Box, Text } from '@pangolindex/components'
 import { AVALANCHE_MAINNET, Chain, ChainId } from '@pangolindex/sdk'
 import React from 'react'
 import { logoMapping } from 'src/constants/airdrop'
@@ -9,18 +9,26 @@ interface Props {
   chain: Chain
   color?: keyof Colors
   title: string
+  subtitle?: string
 }
 
-const Title: React.FC<Props> = ({ chain, color, title }) => {
+const Title: React.FC<Props> = ({ chain, color, title, subtitle }) => {
   const id = (chain.chain_id as ChainId) ?? (16 as ChainId)
   const logo = logoMapping[id]
 
   return (
     <>
       <TitleWrapper>
-        <Text fontSize={[28, 22]} fontWeight={700} lineHeight="33px" color={color ? color : 'text1'}>
-          {title}
-        </Text>
+        <Box>
+          <Text fontSize={[28, 22]} fontWeight={700} lineHeight="33px" color={color ? color : 'text1'}>
+            {title}
+          </Text>
+          {subtitle && (
+            <Text fontSize={[16, 14]} fontWeight={500} color={color ? color : 'text1'}>
+              {subtitle}
+            </Text>
+          )}
+        </Box>
         <StyledLogo src={logo || AVALANCHE_MAINNET?.logo} size={'50px'} />
       </TitleWrapper>
       <Separator />

src/pages/Beta/Airdrop2/index.tsx

@@ -3,8 +3,8 @@ import { PageWrapper, MainTitle, CenterText, Frame } from './styleds'
 import { Text, Box } from '@pangolindex/components'
 import { useActiveWeb3React, useChainId } from 'src/hooks'
 import { QuestionAnswer } from './QuestionBox'
-import { Chain } from '@pangolindex/sdk'
-import { activeAirdrops, commingSoonAirdrops } from 'src/constants/airdrop'
+import { Chain, CHAINS } from '@pangolindex/sdk'
+import { activeAirdrops, commingSoonAirdrops, SpecialAirdropData, specialAirdrops } from 'src/constants/airdrop'
 import NotConnected from './NotConnected'
 import ChangeChain from './ChangeChain'
 import ClaimReward from './ClaimReward'
@@ -14,14 +14,21 @@ const AirdropUI: React.FC = () => {
   const { account } = useActiveWeb3React()
   const chainId = useChainId()
 
-  const renderAirdrop = (chain: Chain, key: number) => {
+  const renderAirdrop = (chain: Chain, key: number, extraData?: SpecialAirdropData) => {
     if (!account) {
-      return <NotConnected key={key} chain={chain} />
+      return <NotConnected key={key} chain={chain} title={extraData?.title} />
     }
     if (chainId !== chain?.chain_id) {
       return <ChangeChain key={key} chain={chain} />
     }
-    return <ClaimReward key={key} chain={chain} />
+    return (
+      <ClaimReward
+        key={key}
+        chain={chain}
+        subtitle={extraData?.title}
+        merkledropContractAddress={extraData?.merkledropContractAddress}
+      />
+    )
   }
 
   return (
@@ -35,7 +42,12 @@ const AirdropUI: React.FC = () => {
         </CenterText>
       </Box>
       <Frame>
-        {activeAirdrops.map(renderAirdrop)}
+        {Object.entries(specialAirdrops).map(([chainId, airdrops], index) => {
+          return airdrops
+            ?.filter(data => data.isActive)
+            ?.map(data => renderAirdrop((CHAINS as any)[chainId], index, data))
+        })}
+        {activeAirdrops.map((chain, index) => renderAirdrop(chain, index))}
         {commingSoonAirdrops.map((chain, index) => (
           <CommingSoon key={index} chain={chain} />
         ))}

src/state/airdrop/hooks.ts

@@ -7,55 +7,57 @@ import { TokenAmount } from '@pangolindex/sdk'
 import { PNG } from '../../constants/tokens'
 import { useSingleCallResult } from '../multicall/hooks'
 import { useLibrary } from '@pangolindex/components'
-import { ZERO_ADDRESS } from 'src/constants'
+import { MERKLEDROP_ADDRESS, ZERO_ADDRESS } from 'src/constants'
 import { useQuery } from 'react-query'
 import axios from 'axios'
 import { useMemo, useState } from 'react'
 
-export function useMerkledropClaimedAmounts(account: string | null | undefined) {
-  const chaindId = useChainId()
-  const merkledropContract = useMerkledropContract()
+export function useMerkledropClaimedAmounts(account: string | null | undefined, airdropAddress?: string) {
+  const chainId = useChainId()
+  const merkledropContract = useMerkledropContract(airdropAddress)
   const claimedAmountsState = useSingleCallResult(merkledropContract, 'claimedAmounts', [account ?? ZERO_ADDRESS])
 
   return useMemo(() => {
     if (!account) {
-      return new TokenAmount(PNG[chaindId], '0')
+      return new TokenAmount(PNG[chainId], '0')
     }
-    return new TokenAmount(PNG[chaindId], claimedAmountsState.result?.[0]?.toString() || '0')
-  }, [chaindId, account, claimedAmountsState])
+    return new TokenAmount(PNG[chainId], claimedAmountsState.result?.[0]?.toString() || '0')
+  }, [chainId, account, claimedAmountsState])
 }
 
-export function useMerkledropProof(account: string | null | undefined) {
-  const chaindId = useChainId()
+export function useMerkledropProof(account: string | null | undefined, airdropAddress?: string) {
+  const chainId = useChainId()
   return useQuery(
-    ['MerkledropProof', account, chaindId],
+    ['MerkledropProof', account, chainId],
     async () => {
       if (!account)
         return {
-          amount: new TokenAmount(PNG[chaindId], '0'),
+          amount: new TokenAmount(PNG[chainId], '0'),
           proof: [],
           root: ''
         }
+
+      const airdropContractAddress = airdropAddress || MERKLEDROP_ADDRESS[chainId] || ''
       try {
         const response = await axios.get(
-          `https://static.pangolin.exchange/merkle-drop/${chaindId}/${account.toLocaleLowerCase()}.json`
+          `https://static.pangolin.exchange/merkle-drop/${chainId}/${airdropContractAddress.toLocaleLowerCase()}/${account.toLocaleLowerCase()}.json`
         )
         if (response.status !== 200) {
           return {
-            amount: new TokenAmount(PNG[chaindId], '0'),
+            amount: new TokenAmount(PNG[chainId], '0'),
             proof: [],
             root: ''
           }
         }
         const data = response.data
         return {
-          amount: new TokenAmount(PNG[chaindId], data.amount),
+          amount: new TokenAmount(PNG[chainId], data.amount),
           proof: data.proof as string[],
           root: data.root as string
         }
       } catch (error) {
         return {
-          amount: new TokenAmount(PNG[chaindId], '0'),
+          amount: new TokenAmount(PNG[chainId], '0'),
           proof: [],
           root: ''
         }
@@ -69,12 +71,12 @@ export function useMerkledropProof(account: string | null | undefined) {
   )
 }
 
-export function useClaimAirdrop(account: string | null | undefined) {
+export function useClaimAirdrop(account: string | null | undefined, airdropAddress?: string) {
   const { library } = useLibrary()
   const pngSymbol = usePngSymbol()
 
-  const merkledropContract = useMerkledropContract()
-  const { data } = useMerkledropProof(account)
+  const merkledropContract = useMerkledropContract(airdropAddress)
+  const { data } = useMerkledropProof(account, airdropAddress)
 
   const [hash, setHash] = useState<string | null>(null)
   const [attempting, setAttempting] = useState<boolean>(false)