Merge pull request #630 from prodesert22/dev

Update airdrop

package.json

@@ -20,9 +20,9 @@
     "@gnosis.pm/safe-apps-web3-react": "0.6.8",
     "@metamask/jazzicon": "2.0.0",
     "@pangolindex/components": "4.2.0",
-    "@pangolindex/exchange-contracts": "2.1.6",
+    "@pangolindex/exchange-contracts": "2.1.7",
     "@pangolindex/governance": "1.2.0",
-    "@pangolindex/sdk": "3.1.3",
+    "@pangolindex/sdk": "3.1.5",
     "@pangolindex/token-lists": "1.0.2",
     "@pangolindex/web3-react-injected-connector": "1.0.1",
     "@reach/dialog": "0.10.5",

src/constants/airdrop.ts

@@ -1,24 +1,29 @@
 import PNG from 'src/assets/svg/PNG/PNG.svg'
 import PNR from 'src/assets/svg/PNG/PNR.svg'
 import PSB from 'src/assets/svg/PNG/PSB.svg'
+import Airdrop from '@pangolindex/exchange-contracts/artifacts/contracts/pangolin-token/Airdrop.sol/Airdrop.json'
+import MerkleAirdrop from '@pangolindex/exchange-contracts/artifacts/contracts/pangolin-token/Merkledrop.sol/Merkledrop.json'
+import MerkleAirdropToStaking from '@pangolindex/exchange-contracts/artifacts/contracts/pangolin-token/MerkledropToStaking.sol/MerkledropToStaking.json'
+import MerkleAirdropCompliant from '@pangolindex/exchange-contracts/artifacts/contracts/pangolin-token/MerkledropToStakingCompliant.sol/MerkledropToStakingCompliant.json'
+import { NEAR_MAINNET, FLARE_MAINNET, ChainId, AirdropType, CHAINS } from '@pangolindex/sdk'
 
-import { NEAR_MAINNET, Chain, COSTON_TESTNET, SONGBIRD_CANARY, FLARE_MAINNET, ChainId } from '@pangolindex/sdk'
-
-export const activeAirdrops: Chain[] = [COSTON_TESTNET]
+export interface AirdropData {
+  address: string
+  active: boolean
+  type: AirdropType
+  title?: string
+}
 
-export type SpecialAirdropData = { title: string; merkledropContractAddress: string; isActive: boolean }
+export const activeAirdrops: { [chainId in ChainId]?: AirdropData } = {
+  [ChainId.SONGBIRD]: CHAINS[ChainId.SONGBIRD]!.contracts!.airdrop,
+  [ChainId.COSTON]: CHAINS[ChainId.COSTON]!.contracts!.airdrop
+}
 
-export const specialAirdrops: { [chainId in ChainId]?: SpecialAirdropData[] } = {
-  [ChainId.SONGBIRD]: [
-    {
-      title: 'Old PSB Reimbursement 2',
-      merkledropContractAddress: '0x78407686458ACf7FceA53Cf73697d0ff51052ca6',
-      isActive: true
-    }
-  ]
+export const specialAirdrops: { [chainId in ChainId]?: AirdropData[] } = {
+  [ChainId.SONGBIRD]: CHAINS[ChainId.SONGBIRD]!.contracts!.specialAirdrops
 }
 
-export const commingSoonAirdrops = [NEAR_MAINNET, SONGBIRD_CANARY, FLARE_MAINNET]
+export const commingSoonAirdrops = [NEAR_MAINNET, FLARE_MAINNET]
 
 export const logoMapping = {
   [ChainId.COSTON]: PNG,
@@ -30,3 +35,11 @@ export const logoMapping = {
   [ChainId.NEAR_MAINNET]: PNR,
   [ChainId.NEAR_TESTNET]: PNR
 }
+
+export const airdropAbiMapping = {
+  [AirdropType.LEGACY]: Airdrop.abi,
+  [AirdropType.MERKLE]: MerkleAirdrop.abi,
+  [AirdropType.MERKLE_TO_STAKING]: MerkleAirdropToStaking.abi,
+  [AirdropType.MERKLE_TO_STAKING_COMPLIANT]: MerkleAirdropCompliant.abi,
+  [AirdropType.NEAR_AIRDROP]: undefined
+}

src/constants/index.ts

@@ -47,10 +47,6 @@ export const AIRDROP_ADDRESS: { [chainId in ChainId]?: string } = {
   [ChainId.SONGBIRD]: ZERO_ADDRESS
 }
 
-export const MERKLEDROP_ADDRESS: { [chainId in ChainId]?: string } = {
-  [ChainId.COSTON]: CHAINS[ChainId.COSTON].contracts!.airdrop!.address!
-}
-
 export const NETWORK_LABELS: { [chainId in ChainId]?: string } = {
   [ChainId.FUJI]: CHAINS[ChainId.FUJI].name,
   [ChainId.AVALANCHE]: CHAINS[ChainId.AVALANCHE].name,

src/hooks/useContract.ts

@@ -2,7 +2,6 @@ import { Contract } from '@ethersproject/contracts'
 import IPangolinPair from '@pangolindex/exchange-contracts/artifacts/contracts/pangolin-core/interfaces/IPangolinPair.sol/IPangolinPair.json'
 import StakingRewards from '@pangolindex/governance/artifacts/contracts/StakingRewards.sol/StakingRewards.json'
 import Airdrop from '@pangolindex/governance/artifacts/contracts/Airdrop.sol/Airdrop.json'
-import MerkleAirdrop from 'src/constants/abis/Merkledrop.json'
 import GovernorAlpha from '@pangolindex/governance/artifacts/contracts/GovernorAlpha.sol/GovernorAlpha.json'
 import Png from '@pangolindex/governance/artifacts/contracts/PNG.sol/Png.json'
 import MiniChefV2 from '@pangolindex/governance/artifacts/contracts/MiniChefV2.sol/MiniChefV2.json'
@@ -11,10 +10,12 @@ import ERC20_ABI from '../constants/abis/erc20.json'
 import { MULTICALL_ABI, MULTICALL_NETWORKS } from '../constants/multicall'
 import { getContract } from '../utils'
 import { useActiveWeb3React } from './index'
-import { AIRDROP_ADDRESS, MINICHEF_ADDRESS, ZERO_ADDRESS, GOVERNANCE_ADDRESS, MERKLEDROP_ADDRESS } from '../constants'
+import { AIRDROP_ADDRESS, MINICHEF_ADDRESS, ZERO_ADDRESS, GOVERNANCE_ADDRESS } from '../constants'
 import { PNG } from '../constants/tokens'
 import { useLibrary } from '@pangolindex/components'
 import { useChainId } from 'src/hooks'
+import { AirdropType } from '@pangolindex/sdk'
+import { airdropAbiMapping } from 'src/constants/airdrop'
 
 // returns null on errors
 function useContract(address: string | undefined, ABI: any, withSignerIfPossible = true): Contract | null {
@@ -68,7 +69,7 @@ export function useAirdropContract(): Contract | null {
   return useContract(chainId ? AIRDROP_ADDRESS[chainId] : undefined, Airdrop.abi, true)
 }
 
-export const useMerkledropContract = (address?: string) => {
-  const chainId = useChainId()
-  return useContract(address || MERKLEDROP_ADDRESS[chainId], MerkleAirdrop.abi, true)
+export const useMerkledropContract = (address: string, type: AirdropType) => {
+  const abi = airdropAbiMapping[type]
+  return useContract(address, abi, true)
 }

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

@@ -1,26 +1,31 @@
 import React, { useContext } from 'react'
-import { AlertTriangle } from 'react-feather'
+import { AlertTriangle, CheckCircle } from 'react-feather'
 import { ThemeContext } from 'styled-components'
-import { Box, Button, Drawer, Loader, Text } from '@pangolindex/components'
-import { Chain } from '@pangolindex/sdk'
+import { Box, Button, Drawer, getEtherscanLink, Loader, Text, useTranslation } from '@pangolindex/components'
+import { AirdropType, Chain } from '@pangolindex/sdk'
 import { Wrapper } from '../styleds'
 import Title from '../Title'
 import GiftBox from 'src/assets/images/giftbox.png'
 import { MENU_LINK } from 'src/constants'
+import { useChainId } from 'src/hooks'
 
 interface Props {
   isOpen: boolean
   attemptingTxn: boolean
   txHash: string | null
   errorMessage: string | null
   chain: Chain
+  airdropType: AirdropType
   onClose: () => void
 }
 
 const ConfirmDrawer: React.FC<Props> = props => {
-  const { isOpen, attemptingTxn, errorMessage, txHash, chain, onClose } = props
+  const { isOpen, attemptingTxn, errorMessage, txHash, chain, airdropType, onClose } = props
+
+  const chainId = useChainId()
 
   const theme = useContext(ThemeContext)
+  const { t } = useTranslation()
 
   const PendingContent = (
     <Wrapper>
@@ -56,22 +61,52 @@ const ConfirmDrawer: React.FC<Props> = props => {
   const SubmittedContent = (
     <Wrapper>
       <Title chain={chain} title="Success" color="green1" />
-      <Box display="flex" alignItems="center" justifyContent="center" flexDirection="column" flexGrow={1}>
-        <img src={GiftBox} alt="GiftBox" />
-        <Text fontSize={[22, 18]} fontWeight={700} color="primary" ml="10px">
-          Wait its not over yet
-        </Text>
-      </Box>
-      <Button
-        variant="primary"
-        color="black"
-        height="46px"
-        as="a"
-        href={`/#${MENU_LINK.stakev2}?showClaimed=true`}
-        target=""
-      >
-        CHECK SURPRISE
-      </Button>
+      {airdropType === AirdropType.MERKLE_TO_STAKING || airdropType === AirdropType.MERKLE_TO_STAKING_COMPLIANT ? (
+        <>
+          <Box display="flex" alignItems="center" justifyContent="center" flexDirection="column" flexGrow={1}>
+            <img src={GiftBox} alt="GiftBox" />
+            <Text fontSize={[22, 18]} fontWeight={700} color="primary" ml="10px">
+              Wait its not over yet
+            </Text>
+          </Box>
+          <Button
+            variant="primary"
+            color="black"
+            height="46px"
+            as="a"
+            href={`/#${MENU_LINK.stakev2}?showClaimed=true`}
+            target=""
+          >
+            CHECK SURPRISE
+          </Button>
+        </>
+      ) : (
+        <>
+          <Box display="flex" flexDirection="column" justifyContent="center" alignItems="center" paddingY={'20px'}>
+            <Box flex="1" display="flex" alignItems="center">
+              <CheckCircle color={theme.green1} style={{ strokeWidth: 1.5 }} size={64} />
+            </Box>
+            <Text fontSize={16} color="text1" textAlign="center">
+              {t('earn.claimedReward')}
+            </Text>
+            {chainId && txHash && (
+              <Button
+                variant="primary"
+                color="black"
+                height="46px"
+                as="a"
+                href={getEtherscanLink(chainId, txHash, 'transaction')}
+                target=""
+              >
+                {t('transactionConfirmation.viewExplorer')}
+              </Button>
+            )}
+          </Box>
+          <Button variant="primary" onClick={onClose}>
+            {t('transactionConfirmation.close')}
+          </Button>
+        </>
+      )}
     </Wrapper>
   )
 

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

@@ -3,32 +3,29 @@ import { Wrapper } from '../styleds'
 import { Text, Button, Box } from '@pangolindex/components'
 import { Chain, TokenAmount } from '@pangolindex/sdk'
 import { useClaimAirdrop, useMerkledropClaimedAmounts, useMerkledropProof } from 'src/state/airdrop/hooks'
-import { useWeb3React } from '@web3-react/core'
 import { PNG } from 'src/constants/tokens'
 import { useChainId } from 'src/hooks'
 import ConfirmDrawer from './ConfirmDrawer'
 import NotEligible from './NotEligible'
 import AlreadyClaimed from './Claimed'
 import Title from '../Title'
+import { AirdropData } from 'src/constants/airdrop'
 
-interface Props {
+interface Props extends AirdropData {
   chain: Chain
-  merkledropContractAddress?: string
-  subtitle?: string
 }
 
-const ClaimReward: React.FC<Props> = ({ chain, merkledropContractAddress, subtitle }) => {
-  const { account } = useWeb3React()
+const ClaimReward: React.FC<Props> = ({ address, type, chain, title }) => {
   const chainId = useChainId()
 
   const png = PNG[chainId]
 
   const [openDrawer, setOpenDrawer] = useState(false)
 
-  const { onClaim, onDimiss, hash, attempting, error } = useClaimAirdrop(account, merkledropContractAddress)
+  const { onClaim, onDimiss, hash, attempting, error } = useClaimAirdrop(address, type)
 
-  const { data } = useMerkledropProof(account, merkledropContractAddress)
-  const claimedAmount = useMerkledropClaimedAmounts(account, merkledropContractAddress)
+  const { data } = useMerkledropProof(address)
+  const claimedAmount = useMerkledropClaimedAmounts(address)
 
   const claimAmount = data?.amount ?? new TokenAmount(PNG[chainId], '0')
   const totalToClaim = claimAmount.equalTo('0')
@@ -50,16 +47,16 @@ const ClaimReward: React.FC<Props> = ({ chain, merkledropContractAddress, subtit
   }, [handleConfirmDismiss, attempting, error, hash, openDrawer])
 
   if (claimAmount.lessThan('0') || claimAmount.equalTo('0')) {
-    return <NotEligible chain={chain} subtitle={subtitle} />
+    return <NotEligible chain={chain} subtitle={title} />
   }
 
-  if (totalToClaim.lessThan('0') || totalToClaim.equalTo('0')) {
-    return <AlreadyClaimed chain={chain} subtitle={subtitle} />
+  if ((totalToClaim.lessThan('0') || totalToClaim.equalTo('0')) && !hash && !attempting && !error) {
+    return <AlreadyClaimed chain={chain} subtitle={title} />
   }
 
   return (
     <Wrapper>
-      <Title chain={chain} title="You Are Eligible!" subtitle={subtitle} />
+      <Title chain={chain} title="You Are Eligible!" subtitle={title} />
       <Box display="flex" alignItems="center" minHeight="150px">
         <Text fontSize={16} fontWeight={500} color="text10">
           You are eligible for:
@@ -78,6 +75,7 @@ const ClaimReward: React.FC<Props> = ({ chain, merkledropContractAddress, subtit
         txHash={hash}
         errorMessage={error}
         chain={chain}
+        airdropType={type}
       />
     </Wrapper>
   )

src/pages/Beta/Airdrop2/index.tsx

@@ -4,7 +4,7 @@ import { Text, Box } from '@pangolindex/components'
 import { useActiveWeb3React, useChainId } from 'src/hooks'
 import { QuestionAnswer } from './QuestionBox'
 import { Chain, CHAINS } from '@pangolindex/sdk'
-import { activeAirdrops, commingSoonAirdrops, SpecialAirdropData, specialAirdrops } from 'src/constants/airdrop'
+import { activeAirdrops, commingSoonAirdrops, AirdropData, specialAirdrops } from 'src/constants/airdrop'
 import NotConnected from './NotConnected'
 import ChangeChain from './ChangeChain'
 import ClaimReward from './ClaimReward'
@@ -14,21 +14,14 @@ const AirdropUI: React.FC = () => {
   const { account } = useActiveWeb3React()
   const chainId = useChainId()
 
-  const renderAirdrop = (chain: Chain, key: number, extraData?: SpecialAirdropData) => {
+  const renderAirdrop = (chain: Chain, key: number, airdropData: AirdropData) => {
     if (!account) {
-      return <NotConnected key={key} chain={chain} title={extraData?.title} />
+      return <NotConnected key={key} chain={chain} title={airdropData?.title} />
     }
     if (chainId !== chain?.chain_id) {
       return <ChangeChain key={key} chain={chain} />
     }
-    return (
-      <ClaimReward
-        key={key}
-        chain={chain}
-        subtitle={extraData?.title}
-        merkledropContractAddress={extraData?.merkledropContractAddress}
-      />
-    )
+    return <ClaimReward key={key} chain={chain} {...airdropData} />
   }
 
   return (
@@ -44,10 +37,15 @@ const AirdropUI: React.FC = () => {
       <Frame>
         {Object.entries(specialAirdrops).map(([chainId, airdrops], index) => {
           return airdrops
-            ?.filter(data => data.isActive)
+            ?.filter(data => data.active)
             ?.map(data => renderAirdrop((CHAINS as any)[chainId], index, data))
         })}
-        {activeAirdrops.map((chain, index) => renderAirdrop(chain, index))}
+        {Object.entries(activeAirdrops).map(([chainId, airdrop], index) => {
+          if (!!airdrop && airdrop.active) {
+            return renderAirdrop((CHAINS as any)[chainId], index, airdrop)
+          }
+          return null
+        })}
         {commingSoonAirdrops.map((chain, index) => (
           <CommingSoon key={index} chain={chain} />
         ))}