feat(treasury-grant): add new batch of users (#2537)

* feat(treasury-grant): add new batch of users

* feat: update UI

Author: viet-nv

src/pages/ElasticSnapshot/components/ChooseGrantModal.tsx

@@ -52,6 +52,16 @@ export default function ChooseGrantModal({
     // C: t`Opt out.`,
   }
 
+  const accountOnlyOptionB = [
+    '0x3872afe887ced05d353252a88a2acebdacda5071',
+    '0x87b1594e6e8b8fee7b14cd77a5c2324e31a7bcd4',
+    '0x2244cfdb499a05c8f08a548f75a13c7485fe9433',
+    '0xee2147fcf090ce08095e65a3c9e193c459364d5b',
+    '0x00e6bc5f73ef330c5f553554dcec8a863db84a23',
+    '0xcab9760e56bfd28803b41cac1e6616704aa5ecce',
+    '0xd5c6519a51a840398c4444c2fbd9d34820baa10c',
+  ]
+
   const [loading, setLoading] = useState(false)
   const [selectedOption, setSelectedOption] = useState(userSelectedOption || '')
   useEffect(() => {
@@ -131,12 +141,13 @@ export default function ChooseGrantModal({
 
         <Flex flexDirection="column" sx={{ gap: '12px' }} marginTop="24px">
           {Object.keys(options).map(opt => {
+            const disabled = opt === 'A' && accountOnlyOptionB.includes(account?.toLowerCase())
             return (
               <Option
                 key={opt}
-                onClick={() => !loading && !userSelectedOption && setSelectedOption(opt)}
+                onClick={() => !disabled && !loading && !userSelectedOption && setSelectedOption(opt)}
                 active={selectedOption === opt}
-                disabled={!!userSelectedOption}
+                disabled={!!userSelectedOption || disabled}
                 role="button"
               >
                 <Opt active={selectedOption === opt}>{opt}</Opt>

src/pages/ElasticSnapshot/components/SelectTreasuryGrant.tsx

@@ -27,6 +27,7 @@ import { ExternalLink, MEDIA_WIDTHS } from 'theme'
 import { formatDisplayNumber } from 'utils/numbers'
 
 import vesting3rdData from '../data/pendle_dappos_vesting.json'
+import phase3 from '../data/phase3.json'
 import vestingData from '../data/vesting.json'
 import vestingOptionA from '../data/vesting/optionA.json'
 import vestingOptionB from '../data/vesting/optionB.json'
@@ -63,7 +64,9 @@ const MANUAL_KYCS = [
 
 export default function SelectTreasuryGrant({ userHaveVestingData }: { userHaveVestingData: boolean }) {
   const theme = useTheme()
+
   const { account, chainId } = useActiveWeb3React()
+  const phase3Info = phase3.find(item => item.receiver.toLowerCase() === account?.toLowerCase())
   const [showOptionModal, setShowOptionsModal] = useState(false)
 
   const addressesOptionA = vestingOptionA.map(item => item.claimData.receiver.toLowerCase())
@@ -244,7 +247,7 @@ export default function SelectTreasuryGrant({ userHaveVestingData }: { userHaveV
               <Trans>TOTAL AMOUNT (USD)</Trans>
             </Text>
             <Text fontWeight="500" fontSize={upToMedium ? 16 : 20}>
-              {isTotalNull ? 'N/A' : format(totalValue)}
+              {phase3Info ? format(phase3Info.value) : isTotalNull ? 'N/A' : format(totalValue)}
             </Text>
           </Flex>
           <VerticalDivider style={{ height: '100%' }} />
@@ -258,7 +261,7 @@ export default function SelectTreasuryGrant({ userHaveVestingData }: { userHaveV
               <Trans>Phase 1</Trans>
             </Text>
             <Text fontWeight="500" fontSize={upToMedium ? 16 : 20}>
-              {format(userData?.value || 0)}
+              {phase3Info ? format(phase3Info.vestedAmount || 0) : format(userData?.value || 0)}
             </Text>
           </Flex>
           <VerticalDivider style={{ height: '80%' }} />
@@ -275,6 +278,24 @@ export default function SelectTreasuryGrant({ userHaveVestingData }: { userHaveV
               {isNull ? 'N/A' : format(totalPhase2Value || 0)}
             </Text>
           </Flex>
+          {phase3Info && (
+            <>
+              <VerticalDivider style={{ height: '80%' }} />
+              <Flex
+                flexDirection="column"
+                justifyContent="space-between"
+                sx={{ gap: '16px' }}
+                marginX={upToMedium ? '12px' : '24px'}
+              >
+                <Text fontSize="14px" color={theme.subText} lineHeight="20px">
+                  <Trans>Phase 3</Trans>
+                </Text>
+                <Text fontWeight="500" fontSize={upToMedium ? 16 : 20}>
+                  {format(phase3Info.value - (phase3Info.vestedAmount || 0))}
+                </Text>
+              </Flex>
+            </>
+          )}
         </Flex>
 
         <Text fontSize={14} color={theme.subText} lineHeight={1.5}>

src/pages/ElasticSnapshot/components/Vesting.tsx

@@ -90,6 +90,14 @@ export interface VestingInterface {
   proof: string[]
 }
 
+// wallets that request to change address due to compromise or loss
+//   https://team-kyber.atlassian.net/browse/EX-2157
+const disableWallets = [
+  '0xd1bbca0dfde1f51ccd17e33de1a7ead48faa1d68',
+  '0x194eda5c8302bc8550e3e918b36520d138fba8ae',
+  '0x12a2455cca45d8f6d9149f0e996260ae49eda8b4',
+]
+
 export default function Vesting({
   userSelectedOption,
   userVestingData,
@@ -162,6 +170,8 @@ export default function Vesting({
 
   const claimablePercent = unlockedPercent - claimedPercent
 
+  const isRemoved = disableWallets.includes(account?.toLowerCase() || '')
+
   return (
     <>
       {show && proof && (
@@ -185,6 +195,11 @@ export default function Vesting({
             <Text as="span" fontWeight="500" color={theme.text}>
               {upToSmall && account ? shortenAddress(1, account) : account}
             </Text>
+            {isRemoved && (
+              <Text color={theme.subText} marginTop="8px">
+                This wallet has been removed from Treasury Grant
+              </Text>
+            )}
           </Text>
         </Box>
 
@@ -225,7 +240,7 @@ export default function Vesting({
                 <ButtonPrimary
                   width="64px"
                   height="24px"
-                  disabled={claimableAmount === 0}
+                  disabled={claimableAmount === 0 || isRemoved}
                   onClick={() => setShow(true)}
                 >
                   Claim