picsoritdidnthappen · picsoritdidnthappen · Nov 5, 2024 · Nov 5, 2024
diff --git a/src/components/DisplayAddress.tsx b/src/components/DisplayAddress.tsx
@@ -0,0 +1,45 @@
+import { useQuery } from '@tanstack/react-query';
+import { getDegenOrEnsName } from '@/utils/web3';
+import Link from 'next/link';
+import { Chain } from '@/utils/types';
+
+export default function DisplayAddress({
+  chain,
+  address,
+}: {
+  chain: Chain;
+  address: string;
+}) {
+  const walletDisplayName = useQuery({
+    queryKey: ['getWalletDisplayName', address, chain.slug],
+    queryFn: () =>
+      getWalletDisplayName({
+        address: address,
+        chainName: chain.slug,
+      }),
+  });
+
+  return (
+    <Link
+      href={`/${chain.slug}/account/${address}`}
+      className='overflow-hidden lg:w-[25ch] w-[15ch] overflow-ellipsis'
+    >
+      {walletDisplayName.data ?? address}
+    </Link>
+  );
+}
+
+async function getWalletDisplayName({
+  address,
+  chainName,
+}: {
+  address: string;
+  chainName: 'arbitrum' | 'base' | 'degen';
+}) {
+  const nickname = await getDegenOrEnsName({ address, chainName });
+  if (nickname) {
+    return nickname;
+  }
+
+  return address.slice(0, 6) + '…' + address.slice(-4);
+}
diff --git a/src/components/bounty/BountyClaims.tsx b/src/components/bounty/BountyClaims.tsx
@@ -101,13 +101,13 @@ export default function BountyClaims({ bountyId }: { bountyId: string }) {
         />
       )}
       {claims.hasNextPage && (
-        <div className='flex justify-center items-center pb-96'>
+        <div className='flex justify-center items-center'>
           <button
             onClick={() => claims.fetchNextPage()}
-            className='border border-white rounded-full px-5  backdrop-blur-sm bg-[#D1ECFF]/20  py-2'
+            className='border border-white rounded-full px-5 backdrop-blur-sm bg-[#D1ECFF]/20 py-2'
             disabled={claims.isFetchingNextPage}
           >
-            {claims.isFetchingNextPage ? 'loading...' : 'show more'}
+            {claims.isFetchingNextPage ? 'loading…' : 'show more'}
           </button>
         </div>
       )}

diff --git a/src/components/bounty/BountyInfo.tsx b/src/components/bounty/BountyInfo.tsx
@@ -5,11 +5,11 @@ import { formatEther } from 'viem';
 
 import { useGetChain } from '@/hooks/useGetChain';
 import BountyMultiplayer from '@/components/bounty/BountyMultiplayer';
-import CreateClaim from '@/components/ui/CreateClaim';
 import { trpc } from '@/trpc/client';
 import { useAccount, useSwitchChain, useWriteContract } from 'wagmi';
 import abi from '@/constant/abi/abi';
 import { useMutation } from '@tanstack/react-query';
+import DisplayAddress from '@/components/DisplayAddress';
 
 export default function BountyInfo({ bountyId }: { bountyId: string }) {
   const chain = useGetChain();
@@ -58,60 +58,55 @@ export default function BountyInfo({ bountyId }: { bountyId: string }) {
 
   return (
     <>
-      <div className='flex pt-20 flex-col  justify-between lg:flex-row'>
-        <div className='flex flex-col  lg:max-w-[50%]'>
+      <div className='flex pt-20 flex-col justify-between lg:flex-row'>
+        <div className='flex flex-col  lg:w-[50%]'>
           <p className='max-w-[30ch] overflow-hidden text-ellipsis text-2xl lg:text-4xl text-bold normal-case'>
             {bounty.data.title}
           </p>
-          <p className='max-w-[50ch] mt-5 normal-case'>
-            {bounty.data.description}
-          </p>
+          <p className='mt-5 normal-case'>{bounty.data.description}</p>
           <p className='mt-5 normal-case break-all'>
             bounty issuer:{' '}
             <Link
               href={`/${chain.slug}/account/${bounty.data.issuer}`}
               className='hover:text-gray-200'
             >
-              {bounty.data.issuer}
+              <DisplayAddress address={bounty.data.issuer} chain={chain} />
             </Link>
           </p>
         </div>
-
         <div className='flex flex-col space-between'>
           <div className='flex mt-5 lg:mt-0 gap-x-2 flex-row'>
             <span>{formatEther(BigInt(bounty.data.amount))}</span>
             <span>{chain.currency}</span>
           </div>
-
           <div>
             {bounty.data.inProgress &&
-            account.address !== bounty.data.issuer ? (
-              <CreateClaim bountyId={bountyId} />
-            ) : (
-              <button
-                onClick={() => {
-                  if (account.isConnected) {
-                    cancelMutation.mutate(BigInt(bountyId));
-                  } else {
-                    toast.error('Please connect wallet to continue');
-                  }
-                }}
-                disabled={!bounty.data.inProgress}
-                className={`border border-[#F15E5F]  rounded-md py-2 px-5 mt-5 ${
-                  !bounty.data.inProgress
-                    ? 'bg-[#F15E5F] text-white '
-                    : 'text-[#F15E5F]'
-                } `}
-              >
-                {bounty.data.isCanceled
-                  ? 'canceled'
-                  : account.address === bounty.data.issuer
-                  ? 'cancel'
-                  : !bounty.data.inProgress
-                  ? 'accepted'
-                  : null}
-              </button>
-            )}
+              account.isConnected &&
+              account.address === bounty.data.issuer && (
+                <button
+                  onClick={() => {
+                    if (account.isConnected) {
+                      cancelMutation.mutate(BigInt(bountyId));
+                    } else {
+                      toast.error('Please connect wallet to continue');
+                    }
+                  }}
+                  disabled={!bounty.data.inProgress}
+                  className={`border border-[#F15E5F] rounded-md py-2 px-5 mt-5 ${
+                    !bounty.data.inProgress
+                      ? 'bg-[#F15E5F] text-white'
+                      : 'hover:bg-red-400 hover:text-white'
+                  } `}
+                >
+                  {bounty.data.isCanceled
+                    ? 'canceled'
+                    : account.address === bounty.data.issuer
+                    ? 'cancel'
+                    : !bounty.data.inProgress
+                    ? 'accepted'
+                    : null}
+                </button>
+              )}
           </div>
         </div>
       </div>

diff --git a/src/components/bounty/BountyMultiplayer.tsx b/src/components/bounty/BountyMultiplayer.tsx
@@ -1,15 +1,14 @@
-import Link from 'next/link';
 import { useState } from 'react';
-import { formatEther } from 'viem';
-import { useQuery } from '@tanstack/react-query';
 
 import { ExpandMoreIcon } from '@/components/global/Icons';
 import JoinBounty from '@/components/ui/JoinBounty';
 import Withdraw from '@/components/ui/Withdraw';
 import { trpc } from '@/trpc/client';
 import { Chain } from '@/utils/types';
-import { getDegenOrEnsName } from '@/utils/web3';
 import { useAccount } from 'wagmi';
+import DisplayAddress from '@/components/DisplayAddress';
+import { formatEther } from 'viem';
+import { cn } from '@/utils';
 
 export default function BountyMultiplayer({
   chain,
@@ -50,9 +49,10 @@ export default function BountyMultiplayer({
             ? `${participants.data.length} contributors`
             : 'Loading contributors...'}
           <span
-            className={`${
-              showParticipants ? '-rotate-180' : ''
-            } animation-all duration-300 `}
+            className={cn(
+              showParticipants ? '-rotate-180' : '',
+              'animation-all duration-300'
+            )}
           >
             <ExpandMoreIcon width={16} height={16} />
           </span>
@@ -63,11 +63,16 @@ export default function BountyMultiplayer({
             <div className='flex flex-col'>
               {participants.isSuccess ? (
                 participants.data.map((participant) => (
-                  <Participant
-                    participant={participant}
-                    chain={chain}
-                    key={participant.user.id}
-                  />
+                  <p key={participant.user.id} className='flex items-center'>
+                    <DisplayAddress
+                      address={participant.user.id}
+                      chain={chain}
+                    />
+                    &nbsp;
+                    {`${formatEther(BigInt(participant.amount))} ${
+                      chain.currency
+                    }`}
+                  </p>
                 ))
               ) : (
                 <p>Loading addresses…</p>
@@ -86,46 +91,3 @@ export default function BountyMultiplayer({
     </>
   );
 }
-function Participant({
-  chain,
-  participant,
-}: {
-  chain: Chain;
-  participant: {
-    user: { id: string; ens: string | null; degenName: string | null };
-    amount: string;
-  };
-}) {
-  const walletDisplayName = useQuery({
-    queryKey: ['getWalletDisplayName', participant.user.id, chain.slug],
-    queryFn: () =>
-      getWalletDisplayName({
-        address: participant.user.id,
-        chainName: chain.slug,
-      }),
-  });
-
-  return (
-    <div className='py-2'>
-      <Link href={`/${chain.slug}/account/${participant.user.id}`}>
-        {walletDisplayName.data ?? participant.user.id}
-      </Link>{' '}
-      - {formatEther(BigInt(participant.amount))} {chain.currency}
-    </div>
-  );
-}
-
-async function getWalletDisplayName({
-  address,
-  chainName,
-}: {
-  address: string;
-  chainName: 'arbitrum' | 'base' | 'degen';
-}) {
-  const nickname = await getDegenOrEnsName({ address, chainName });
-  if (nickname) {
-    return nickname;
-  }
-
-  return address.slice(0, 6) + '…' + address.slice(-4);
-}
diff --git a/src/components/bounty/ClaimList.tsx b/src/components/bounty/ClaimList.tsx
@@ -30,7 +30,7 @@ export default function ClaimList({
       <div
         className={`${
           votingClaim ? 'votingStarted' : ''
-        } container mx-auto px-0  py-12 flex flex-col gap-12 lg:grid lg:grid-cols-12 lg:gap-12 lg:px-0 `}
+        } container mx-auto px-0 py-4 flex flex-col gap-12 lg:grid lg:grid-cols-12 lg:gap-12 lg:px-0 `}
       >
         {votingClaim && (
           <div className='lg:col-span-4'>
@@ -51,11 +51,7 @@ export default function ClaimList({
         {votingClaim && <Voting bountyId={bountyId} />}
       </div>
 
-      <div
-        className={
-          'container mx-auto px-0  py-12 flex flex-col gap-12 lg:grid lg:grid-cols-12 lg:gap-12 lg:px-0'
-        }
-      >
+      <div className='container mx-auto px-0  py-12 flex flex-col gap-12 lg:grid lg:grid-cols-12 lg:gap-12 lg:px-0'>
         <p className={`col-span-12  ${!isMultiplayer ? 'hidden' : ' '}  `}>
           other claims
         </p>

diff --git a/src/components/bounty/Voting.tsx b/src/components/bounty/Voting.tsx
@@ -29,7 +29,7 @@ export default function Voting({ bountyId }: { bountyId: string }) {
 
   useEffect(() => {
     fetchVotingData();
-  }, [bountyId, chain]);
+  });
 
   const voteMutation = useMutation({
     mutationFn: async ({