Skip to content

Commit

Permalink
user feedback on claim rewards and display claim status
Browse files Browse the repository at this point in the history
  • Loading branch information
Cali93 committed Apr 12, 2022
1 parent bd9bea4 commit 8712b56
Show file tree
Hide file tree
Showing 38 changed files with 2,677 additions and 4,506 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ function PathwayCard({
title: "Pathway approved!",
description: `Approval vote submitted successfully!`,
status: "success",
position: "top-right",
position: "bottom-right",
duration: 6000,
isClosable: true,
variant: "subtle",
Expand Down Expand Up @@ -255,7 +255,7 @@ function PathwayCard({
title: "Pathway minted!",
description: `Pathway minted and created successfully!`,
status: "success",
position: "top-right",
position: "bottom-right",
duration: 6000,
isClosable: true,
variant: "subtle",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ function PathwayFormWrapper() {
title: "Insufficient funds",
description: `You don't have enough funds to provide the pathway rewards in this currency`,
status: "error",
position: "top-right",
position: "bottom-right",
duration: 6000,
isClosable: true,
variant: "subtle",
Expand All @@ -140,7 +140,7 @@ function PathwayFormWrapper() {
title: "Insufficient funds",
description: "You don't have enough funds to provide pathway rewards",
status: "error",
position: "top-right",
position: "bottom-right",
duration: 6000,
isClosable: true,
variant: "subtle",
Expand Down
111 changes: 27 additions & 84 deletions packages/dapp/src/components/projects/quests/QuestCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,8 @@ function QuestCard({
}) {
const [isApproving, setIsApproving] = useState<boolean>(false);
const [isCreatingToken, setIsCreatingToken] = useState<boolean>(false);
const [claimedBy, setClaimedBy] = useState<string[]>();

const toast = useToast();
const router = useRouter();
const { getRewardCurrency } = useTokenList();
Expand Down Expand Up @@ -125,6 +127,14 @@ function QuestCard({
const isMinted = await contracts.BadgeNFT.badgeMinted(quest.streamId);
const statusString = await contracts.BadgeNFT.statusStrings(statusInt);
setStatus(isMinted ? "MINTED" : statusString);
const claimedByAddresses =
await contracts.BadgeNFT.getAllAddrsByBadgeIDVersion(
quest.streamId,
0
);

console.log({ claimedByAddresses });
return setClaimedBy(claimedByAddresses);
}
null;
}
Expand Down Expand Up @@ -193,7 +203,7 @@ function QuestCard({
title: "Quest approved!",
description: `Approval vote submitted successfully!`,
status: "success",
position: "top-right",
position: "bottom-right",
duration: 6000,
isClosable: true,
variant: "subtle",
Expand Down Expand Up @@ -270,73 +280,7 @@ function QuestCard({
title: "Quest minted!",
description: `Quest minted and created successfully!`,
status: "success",
position: "top-right",
duration: 6000,
isClosable: true,
variant: "subtle",
});
};

const handleClaimRewards = async () => {
const signatureInput = {
id: quest.id,
pathwayId: quest.pathwayId,
};
const signature = await library.provider.send("personal_sign", [
JSON.stringify(signatureInput),
account,
]);

const formData = new FormData();
const ogFile = await fetch(`https://ipfs.io/ipfs/${quest.image}`);
const questImage = await ogFile.blob();
formData.append("image", questImage);
formData.append(
"metadata",
JSON.stringify({
...quest,
})
);

const nftCidRes = await fetch("/api/quest-nft-storage", {
method: "POST",
body: formData,
});
const { url } = await nftCidRes.json();

const { data } = await claimQuestRewardsMutation({
variables: {
input: {
questId: quest.id,
did: self.id,
questAdventurerSignature: signature.result,
chainId,
},
},
});

const [, tokenAddressOrSymbol] = quest.rewardCurrency.split(":");
const isNativeToken = tokenAddressOrSymbol ? false : true;

const [metadataVerify] = data.claimQuestRewards.expandedServerSignatures;

console.log({ metadataVerify });
const claimRewardsTx = await contracts.BadgeNFT.claimBadgeRewards(
quest.streamId,
isNativeToken,
isNativeToken ? account : tokenAddressOrSymbol,
metadataVerify.r,
metadataVerify.s,
metadataVerify.v,
true,
url
);
await claimRewardsTx.wait(1);
return toast({
title: "Congratulations!",
description: `Rewards claimed successfully!`,
status: "success",
position: "top-right",
position: "bottom-right",
duration: 6000,
isClosable: true,
variant: "subtle",
Expand All @@ -363,6 +307,7 @@ function QuestCard({
);
};
const isCompleted = (quest.completedBy || []).includes(self?.id);
const isClaimed = account && claimedBy?.includes(account);
return (
<Card position="relative" h="xl" spacing="6" py="4">
{!unlocked && <LockedScreen />}
Expand All @@ -382,8 +327,15 @@ function QuestCard({

<Spacer />
<Flex align="end" direction="column" w="full">
<Tag variant="subtle">
{isCompleted ? "COMPLETED" : "UNCOMPLETED"}
<Tag
variant={isClaimed ? "outline" : "subtle"}
colorScheme={isClaimed || isCompleted ? "accentDark" : "purple"}
>
{isCompleted
? isClaimed
? "CLAIMED"
: "COMPLETED"
: "UNCOMPLETED"}
</Tag>
<Tag my="2">
{quest.rewardAmount} {getRewardCurrency(quest.rewardCurrency)}
Expand Down Expand Up @@ -431,7 +383,9 @@ function QuestCard({
Claimed
</Text>
</HStack>
<Tag variant="outline">0/{quest.rewardUserCap}</Tag>
<Tag variant="outline">
{claimedBy?.length || 0}/{quest.rewardUserCap}
</Tag>
</HStack>
<Divider />
<HStack justifyContent="space-between">
Expand Down Expand Up @@ -564,24 +518,13 @@ function QuestCard({

<Flex w="full" justify="space-between">
<Button
w="full"
leftIcon={<GiSwordwoman />}
fontSize="md"
onClick={() => openQuest(quest.id)}
>
Start
Start quest
</Button>

{!quest.isPending && (
<Button
fontSize="md"
variant="outline"
leftIcon={<RiHandCoinFill />}
disabled={!isCompleted}
onClick={handleClaimRewards}
>
Claim
</Button>
)}
</Flex>
</>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,51 @@ import {
import { useContext, useEffect, useState } from "react";
import { Web3Context } from "../../../contexts/Web3Context";

function QuestCompletedByList({ completedBy }: { completedBy: string[] }) {
const { core } = useContext(Web3Context);
function QuestCompletedByList({
completedBy,
streamId,
claimedByAddrs = [],
}: {
completedBy: string[];
claimedByAddrs?: string[];
streamId: string;
}) {
const { core, contracts } = useContext(Web3Context);
const [claimedBy, setClaimedBy] = useState<string[]>(claimedByAddrs);

const [completedByWithUsername, setCompletedByWithUsername] = useState<
{
did: string;
name: string | undefined;
cryptoAccounts: string[];
}[]
>();

useEffect(() => {
async function getClaimedBy() {
if (contracts?.BadgeNFT) {
const claimedByAddresses =
await contracts.BadgeNFT.getAllAddrsByBadgeIDVersion(streamId, 0);

console.log({ claimedByAddresses });

return setClaimedBy([
...new Set([...claimedByAddrs, ...claimedByAddresses]),
]);
}
}
getClaimedBy();
}, [contracts, streamId, claimedByAddrs]);

useEffect(() => {
async function getBasicProfilesByDids(dids: string[]): Promise<void> {
const basicProfiles = await Promise.all(
dids.map(async (did: string) => ({
did,
name: (await core.get("basicProfile", did))?.name,
cryptoAccounts: Object.keys(
await core.get("cryptoAccounts", did)
).map((account) => account.split("@")[0]),
}))
);
return setCompletedByWithUsername(basicProfiles);
Expand All @@ -45,15 +76,22 @@ function QuestCompletedByList({ completedBy }: { completedBy: string[] }) {
</Thead>
<Tbody>
{completedByWithUsername &&
completedByWithUsername.map(({ did, name }) => (
<Tr key={did}>
<Td>{name || "Anonymous"}</Td>
<Td>{did}</Td>
<Td>
<Tag colorScheme="orange">Unclaimed</Tag>
</Td>
</Tr>
))}
completedByWithUsername.map(({ did, name, cryptoAccounts }) => {
const isClaimed =
claimedBy &&
claimedBy.some((address) => cryptoAccounts.includes(address));
return (
<Tr key={did}>
<Td>{name || "Anonymous"}</Td>
<Td>{did}</Td>
<Td>
<Tag colorScheme={isClaimed ? "accentDark" : "orange"}>
{isClaimed ? "Claimed" : "Unclaimed"}
</Tag>
</Td>
</Tr>
);
})}
</Tbody>
<Tfoot>
<Tr>
Expand Down
Loading

0 comments on commit 8712b56

Please sign in to comment.