Dashboard improvements

components/Claim/ClaimsTracking/ClaimsPerBounty/IndividualClaim/index.js

@@ -4,6 +4,8 @@ import Link from 'next/link';
 import { ethers } from 'ethers';
 import useWeb3 from '../../../../../hooks/useWeb3';
 import useIsOnCorrectNetwork from '../../../../../hooks/useIsOnCorrectNetwork';
+import CopyAddressToClipboard from '../../../../CopyAddressToClipboard';
+import { LinkIcon } from '@primer/octicons-react';
 
 const IndividualClaim = ({
   payout,
@@ -47,8 +49,8 @@ const IndividualClaim = ({
   const walletFilter = filters?.walletAddress;
   const [w8Status, setW8Status] = useState('NOT SENT');
   const [walletCondition, setWalletCondition] = useState(true);
-  const githubCondition = githubIdFilter && githubUserId !== githubIdFilter;
-  const [claimed, setClaimed] = useState(false);
+  const githubCondition = githubIdFilter && !githubUserId?.includes(githubIdFilter);
+  const [claimed, setClaimed] = useState(bounty?.claims?.some((claim) => claim.tier == index));
   const [claimCondition, setClaimCondition] = useState(true);
   const w8Condition = w8Filter !== 'all' && w8Filter !== w8Status.toLowerCase();
   const kycCondition = (kycFilter == 'true' && !KYC) || (kycFilter == 'false' && KYC);
@@ -66,10 +68,6 @@ const IndividualClaim = ({
       window.removeEventListener('mousedown', handler);
     };
   });
-
-  useEffect(() => {
-    if (isOnCorrectNetwork) tierClaimed();
-  }, [bounty, isOnCorrectNetwork]);
   useEffect(() => {
     const claimCondition = (claimFilter == 'true' && !claimed) || (claimFilter == 'false' && claimed);
     setClaimCondition(claimCondition);
@@ -109,6 +107,7 @@ const IndividualClaim = ({
     checkAssociatedAddress();
   }, [githubUserId]);
   useEffect(() => {
+    setClaimed(bounty?.claims?.some((claim) => claim.tier == index));
     const currentW8Status = bounty.supportingDocumentsCompleted?.[index]
       ? 'APPROVED'
       : requested
@@ -141,7 +140,7 @@ const IndividualClaim = ({
   }, [chainId, associatedAddress]);
   const checkWallet = () => {
     if (walletFilter?.length > 0) {
-      setWalletCondition(walletFilter.toLowerCase() == associatedAddress.toLowerCase());
+      setWalletCondition(associatedAddress?.toLowerCase().includes(walletFilter.toLowerCase()));
     } else {
       setWalletCondition(true);
     }
@@ -156,16 +155,6 @@ const IndividualClaim = ({
       appState[0].logger.error(err, 'IndividualClaim.js3');
     }
   };
-  const tierClaimed = async () => {
-    try {
-      const transaction = await appState[0].openQClient.tierClaimed(library, bounty.bountyId, index);
-      if (transaction) {
-        setClaimed(true);
-      }
-    } catch (err) {
-      appState[0].logger.error(err, 'IndividualClaim.js4');
-    }
-  };
   return (
     <div className={`${hide} text-sm items-center gap-4 ${gridFormat}`}>
       {githubUserId ? (
@@ -230,14 +219,17 @@ const IndividualClaim = ({
       </div>
       <div className={`flex justify-center`}>
         {associatedAddress ? (
-          <Link
-            href={`https://polygonscan.com/address/${associatedAddress}`}
-            rel='noopener norefferer'
-            target='_blank'
-            className='text-link-colour hover:underline'
-          >
-            {appState[0].utils.shortenAddress(associatedAddress)}
-          </Link>
+          <div className='flex items-center gap-1'>
+            <CopyAddressToClipboard clipping={[3, 39]} data={associatedAddress} styles={''} />
+            <Link
+              href={`https://polygonscan.com/address/${associatedAddress}`}
+              rel='noopener norefferer'
+              target='_blank'
+              className='text-link-colour hover:underline'
+            >
+              <LinkIcon />
+            </Link>
+          </div>
         ) : (
           <span className='text-gray-500'>---</span>
         )}

components/Claim/ClaimsTracking/ClaimsPerBounty/index.js

@@ -4,7 +4,7 @@ import Github from '../../../svg/github';
 import IndividualClaim from './IndividualClaim';
 
 const ClaimsPerBounty = ({ item, filters, setFilteredInfo, filteredInfo, winnersInfo }) => {
-  const gridFormat = 'grid grid-cols-[2.5fr_1fr_0.75fr_0.5fr_0.75fr_0.5fr]';
+  const gridFormat = 'grid grid-cols-[2fr_1fr_0.75fr_0.5fr_0.75fr_0.5fr]';
   const [filteredTiers, setFilteredTiers] = useState(Array(item.payoutSchedule?.length).fill(true));
   return (
     <div
@@ -31,7 +31,7 @@ const ClaimsPerBounty = ({ item, filters, setFilteredInfo, filteredInfo, winners
         <div className='flex justify-center'>W8/W9?</div>
         <div className='flex justify-center'>KYC'd?</div>
         <div className='flex justify-center'>Wallet</div>
-        <div className='flex justify-center'>Paid out</div>
+        <div className='flex justify-center'>Claimed</div>
       </div>
       {item.payoutSchedule?.map((payout, index) => {
         const key = item.bountyId + index;

components/Claim/ClaimsTracking/index.js

@@ -209,7 +209,7 @@ const ClaimsTracking = ({ fetchFilters, TVLBalances, payoutBalances }) => {
     }
   };
 
-  const gridFormat = 'grid grid-cols-[2.5fr_1fr_0.75fr_0.5fr_0.75fr_0.5fr]';
+  const gridFormat = 'grid grid-cols-[2fr_1fr_0.75fr_0.5fr_0.75fr_0.5fr]';
 
   // Render
   return (
@@ -257,20 +257,20 @@ const ClaimsTracking = ({ fetchFilters, TVLBalances, payoutBalances }) => {
             <div className='flex flex-col mb-4 lg:min-w-[1000px] overflow-x-auto border border-web-gray rounded-sm p-4'>
               <div className='mb-2'>Filter by:</div>
               <div className='mb-2 text-sm text-mute italic'>
-                Note that all search input must be an exact match for the search fields below.
+                Note that your search input for github logins must be an exact match.
               </div>
               <div className={`items-center gap-4 ${gridFormat} border-b border-web-gray pb-2 mb-2 font-bold`}>
                 <div className=''>TierWinner</div>
                 <div className='flex justify-center'>Planned</div>
                 <div className='flex justify-center'>W8/W9?</div>
                 <div className='flex justify-center'>KYC'd?</div>
                 <div className='flex justify-center'>Wallet</div>
-                <div className='flex justify-center'>Paid out</div>
+                <div className='flex justify-center'>Claimed</div>
               </div>
               <div className={`items-center gap-4 ${gridFormat} pb-2 mb-2 text-sm`}>
                 <div className='flex items-center gap-4'>
                   <input
-                    className='input-field'
+                    className='input-field w-32'
                     id='githubId'
                     placeholder='Github ID'
                     value={githubId}
@@ -279,7 +279,7 @@ const ClaimsTracking = ({ fetchFilters, TVLBalances, payoutBalances }) => {
                   />
                   {' OR '}
                   <input
-                    className='input-field'
+                    className='input-field w-32'
                     id='githubLogin'
                     placeholder='Github Login'
                     value={githubLogin}