Skip to content

Commit

Permalink
fix: issue #466
Browse files Browse the repository at this point in the history
  • Loading branch information
@whtsupbab3
whtsupbab3 committed Jan 20, 2025
1 parent 2205143 commit ea272c8
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 88 deletions.
11 changes: 0 additions & 11 deletions src/components/bounty/BountyClaims.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,16 +56,6 @@ export default function BountyClaims({ bountyId }: { bountyId: string }) {
}
);

const { data: bounty } = trpc.bounty.useQuery(
{
id: Number(bountyId),
chainId: chain.id,
},
{
enabled: !!bountyId,
}
);

if (!claims) {
return <div className=''>No claims</div>;
}
Expand All @@ -91,7 +81,6 @@ export default function BountyClaims({ bountyId }: { bountyId: string }) {
<ClaimList
key={claims.data.pages[0]?.items[0]?.id || 'empty-list'}
bountyId={bountyId}
isMultiplayer={bounty?.isMultiplayer || false}
votingClaim={
votingClaim
? {
Expand Down
4 changes: 1 addition & 3 deletions src/components/bounty/ClaimList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,10 @@ export default function ClaimList({
bountyId,
claims,
votingClaim,
isMultiplayer,
}: {
bountyId: string;
claims: Claim[];
votingClaim: Claim | null;
isMultiplayer: boolean;
}) {
const isVotingOrAcceptedBounty =
!!votingClaim || claims.some((claim) => claim.accepted);
Expand Down Expand Up @@ -50,7 +48,7 @@ export default function ClaimList({
</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'>
{isMultiplayer && <p className='col-span-12'>other claims</p>}
{votingClaim && <p className='col-span-12'>other claims</p>}
{claims
.filter((claim) => claim.id !== votingClaim?.id)
.map((claim) => (
Expand Down
213 changes: 139 additions & 74 deletions src/components/bounty/Voting.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { PieChart } from '@mui/x-charts/PieChart';
import { PieChart } from 'react-minimal-pie-chart';
import React from 'react';
import { toast } from 'react-toastify';
import { formatEther } from 'viem';
Expand All @@ -8,6 +8,18 @@ import { bountyVotingTracker } from '@/utils/web3';
import { useAccount, useSwitchChain, useWriteContract } from 'wagmi';
import abi from '@/constant/abi/abi';
import { useMutation, useQuery } from '@tanstack/react-query';
import { trpc } from '@/trpc/client';

function formatDeadline(date: Date) {
return date.toLocaleString('en-US', {
month: 'numeric',
day: 'numeric',
year: 'numeric',
hour: 'numeric',
minute: 'numeric',
hour12: true,
});
}

export default function Voting({
bountyId,
Expand All @@ -26,6 +38,23 @@ export default function Voting({
queryFn: () => bountyVotingTracker({ id: bountyId, chainName: chain.slug }),
});

const bounty = trpc.bounty.useQuery({
id: Number(bountyId),
chainId: chain.id,
});

const bountyContibutors = trpc.participations.useQuery({
chainId: chain.id,
bountyId: Number(bountyId),
});

const isBountyContributor = bountyContibutors.data?.some(
(contributor) =>
contributor.user_address.toLowerCase() == account.address?.toLowerCase()
);
const isVotingInProgress =
parseInt(voting.data?.deadline ?? '0') * 1000 > Date.now();

const voteMutation = useMutation({
mutationFn: async ({
vote,
Expand Down Expand Up @@ -84,33 +113,66 @@ export default function Voting({
},
});

const isVotingInProgress =
parseInt(voting.data?.deadline ?? '0') * 1000 > Date.now();

return (
<div className='col-span-12 lg:col-span-3 p-5 lg:p-0 '>
{voting.data ? (
<>
<div>
<div className='text-center'>
{isAcceptedBounty ? 'Voting closed' : 'Voting in progress'}
</div>
<div className='flex items-center mb-5'>
<PieChart
series={[
data={[
{
value: Number(formatEther(BigInt(voting.data.yes || 0))),
title: 'Yes',
color: '#2A81D5',
},
{
value: Number(formatEther(BigInt(voting.data.no || 0))),
title: 'No',
color: '#F15E5F',
},
{
data: [
{
id: 0,
value: Number(formatEther(BigInt(voting.data.yes || 0))),
label: 'Yes',
},
{
id: 1,
value: Number(formatEther(BigInt(voting.data.no || 0))),
label: 'No',
},
],
value: bounty.data
? Number(formatEther(BigInt(bounty.data.amount || 0))) -
Number(formatEther(BigInt(voting.data.yes || 0))) -
Number(formatEther(BigInt(voting.data.no || 0)))
: 0,
title: 'No vote',
color: '#5A5A5A',
},
]}
width={400}
height={200}
labelPosition={50}
radius={35}
label={({ dataEntry, x, y, dx, dy }) => {
return !dataEntry.value ? (
''
) : (
<text
x={x}
y={y}
dx={dx}
dy={dy}
textAnchor='middle'
dominantBaseline='central'
fill='#FFF'
style={{ fontSize: '3.5px', pointerEvents: 'none' }}
>
<tspan x={x} y={y} dx={dx} dy={dy}>
{Math.round(dataEntry.percentage)}%
</tspan>
<tspan x={x} y={y + 3} dx={dx} dy={dy}>
{dataEntry.title}
</tspan>
</text>
);
}}
labelStyle={() => ({
fontSize: '3px',
fontWeight: 'bold',
})}
animate
/>
</div>

Expand All @@ -125,68 +187,71 @@ export default function Voting({
}`}
</div>
<div className='flex flex-row gap-x-5 '>
{isVotingInProgress ? (
<>
<button
className='border mt-5 border-white rounded-full px-5 py-2 flex justify-between items-center backdrop-blur-sm bg-[#D1ECFF]/20 w-fit'
onClick={() => {
if (account.address) {
voteMutation.mutate({
vote: true,
bountyId: BigInt(bountyId),
});
} else {
toast.error('Please connect wallet to continue');
}
}}
>
yes
</button>
<button
className='border mt-5 border-white rounded-full px-5 py-2 flex justify-between items-center backdrop-blur-sm bg-[#D1ECFF]/20 w-fit'
onClick={() => {
if (account.address) {
voteMutation.mutate({
vote: false,
bountyId: BigInt(bountyId),
});
} else {
toast.error('Please connect wallet to continue');
}
}}
>
no
</button>
</>
) : (
!isAcceptedBounty && (
<button
className='border mt-5 border-white rounded-full px-5 py-2 flex justify-between items-center backdrop-blur-sm bg-[#D1ECFF]/20 w-fit'
onClick={() => {
if (account.address) {
resolveVoteMutation.mutate(BigInt(bountyId));
} else {
toast.error('Please connect wallet to continue');
}
}}
>
resolve vote
</button>
)
)}
{isVotingInProgress
? isBountyContributor && (
<div>
<div className='mt-3'>what is your vote?</div>
<div className='flex flex-row gap-x-5 mt-2'>
<button
className='border border-white rounded-full px-5 py-1 flex items-center justify-center backdrop-blur-sm bg-[#D1ECFF]/20 min-w-[80px] text-center'
onClick={() => {
if (account.address) {
voteMutation.mutate({
vote: true,
bountyId: BigInt(bountyId),
});
} else {
toast.error('Please connect wallet to continue');
}
}}
>
yes
</button>
<button
className='border border-white rounded-full px-5 py-1 flex items-center justify-center backdrop-blur-sm bg-[#D1ECFF]/20 min-w-[80px] text-center'
onClick={() => {
if (account.address) {
voteMutation.mutate({
vote: false,
bountyId: BigInt(bountyId),
});
} else {
toast.error('Please connect wallet to continue');
}
}}
>
no
</button>
</div>
</div>
)
: !isAcceptedBounty && (
<button
className='border mt-5 border-white rounded-full px-5 py-2 flex justify-between items-center backdrop-blur-sm bg-[#D1ECFF]/20 w-fit'
onClick={() => {
if (account.address) {
resolveVoteMutation.mutate(BigInt(bountyId));
} else {
toast.error('Please connect wallet to continue');
}
}}
>
resolve vote
</button>
)}
</div>

{!isAcceptedBounty && (
<div className='mt-5 '>
Deadline:{' '}
{new Date(
parseInt(voting.data.deadline ?? '0') * 1000
).toLocaleString()}
{formatDeadline(
new Date(parseInt(voting.data.deadline ?? '0') * 1000)
)}
</div>
)}
</>
</div>
) : (
<div className='animate-pulse'>Loading voting data...</div>
<div className='animate-pulse text-center'>Loading voting data...</div>
)}
</div>
);
Expand Down

0 comments on commit ea272c8

Please sign in to comment.