Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Another dev/add celo campaigns support #24

Merged
merged 6 commits into from
Jan 24, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .env.development
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ VITE_DOMAIN=localhost:8080
VITE_IPFS_NODE=cloudflare-ipfs.com
VITE_BLOCKNATIVE_DAPP_ID=032e2fb8-6c66-46a5-bf1c-a049ac7eded2
VITE_FATHOM_SITE_ID=xxx
VITE_COINGECKO_API_KEY=
VITE_COINGECKO_API_KEY=""




Expand Down
5 changes: 4 additions & 1 deletion src/assets/data/contracts/celo.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,5 +68,8 @@
"WeightedPool2TokensFactory": "",
"WeightedPoolFactory": "0xEB1055c017a1427726F01368C8247649c5A79bF9",
"YearnLinearPoolFactory": "",
"Multicall": "0xca11bde05977b3631167028862be2a173976ca11"
"Multicall": "0xca11bde05977b3631167028862be2a173976ca11",
"SimpleMinter": "0xd437fa025E43ca4578aD682Bcfb1B003041d48D1",
"RFNFT": "0xBA7d3fB1BBD73f4289C7FB42e8EC268EC9C32bE3",
"RFP": "0x74072b693f1Da8B74b24563Cbded727228c0A898"
}
115 changes: 99 additions & 16 deletions src/components/contextual/pages/dashboard/Cards/RefiProfileCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,69 @@ import NFTImage from '@/assets/images/mocks/NFT.png';
import { useRFNFT } from '@/composables/campaigns/useRFNFT';
import useBreakpoints from '@/composables/useBreakpoints';
import useWeb3 from '@/services/web3/useWeb3';

import UpgradeNFTModal from '../Modals/UpgradeNFTModal.vue';
import MintNFTModal from '../Modals/MintNFTModal.vue';
import { NFTData as TNFTData } from '@/services/campaigns/campaigns.service';
const { startConnectWithInjectedProvider } = useWeb3();
const { isMobile, bp } = useBreakpoints();

const { NFTData, isLoading, MintNFT, isMintingNFT } = useRFNFT();
const {
NFTData,
isLoading,
MintNFT,
UpgradeNFT,
isMintingNFTStatus,
isUpgradingNFTStatus,
isRefetchingNFTData,
} = useRFNFT();
const { isWalletReady } = useWeb3();

const nftImageSrc = computed(() => NFTData.value?.imageData);
const hasNFT = computed(
() => !!NFTData.value?.imageData && isWalletReady.value
);

const isAbleToUpgradeNFT = computed(() => NFTData?.value?.isAbleToUpgrade[0]);

const levels = ref([
{ nextLevel: '100', votes: 1 },
{ nextLevel: '50', votes: 1 },
{ nextLevel: '250', votes: 10 },
{ nextLevel: '500', votes: 30 },
{ nextLevel: '1000', votes: 75 },
{ nextLevel: '2000', votes: 150 },
{ nextLevel: '1000', votes: 30 },
{ nextLevel: '2500', votes: 75 },
{ nextLevel: '5000', votes: 150 },
{ nextLevel: 'MAX', votes: 250 },
]);
const isOpenUpgradeNFTModal = ref(false);
const isOpenMintNFTModal = ref(false);

watch([isRefetchingNFTData, isUpgradingNFTStatus.value], () => {
if (!isRefetchingNFTData.value && isUpgradingNFTStatus.value.success) {
isOpenUpgradeNFTModal.value = true;
isUpgradingNFTStatus.value = { loading: false, success: false };
}
});

watch([isRefetchingNFTData, isMintingNFTStatus.value], () => {
console.debug(isRefetchingNFTData, isMintingNFTStatus.value.success);
if (!isRefetchingNFTData.value && isMintingNFTStatus.value.success) {
isOpenMintNFTModal.value = true;
isMintingNFTStatus.value = { loading: false, success: false };
}
});
watch(NFTData, () => {
console.debug(NFTData.value);
});

onMounted(() => {
isUpgradingNFTStatus.value = { loading: false, success: false };
});

function handleUpgradeNFTClose() {
isOpenUpgradeNFTModal.value = false;
}
function handleMintNFTClose() {
isOpenMintNFTModal.value = false;
}
</script>
<template>
<template v-if="isMobile">
Expand Down Expand Up @@ -72,10 +116,19 @@ const levels = ref([
@click="startConnectWithInjectedProvider"
>Connect wallet</BalBtn
>
<BalBtn
v-else-if="hasNFT"
:disabled="!isAbleToUpgradeNFT"
:color="!isAbleToUpgradeNFT ? 'gray' : 'gradient-blue-light'"
class="self-end w-fit"
size="sm"
@click="() => UpgradeNFT(NFTData?.id as number)"
>Upgrade</BalBtn
>
<BalBtn
v-else
:color="isMintingNFT ? 'gray' : 'gradient-blue-light'"
:disabled="isMintingNFT"
:color="isMintingNFTStatus.loading ? 'gray' : 'gradient-blue-light'"
:disabled="isMintingNFTStatus.loading"
class="self-end w-fit"
size="sm"
@click="() => MintNFT()"
Expand Down Expand Up @@ -131,10 +184,19 @@ const levels = ref([
@click="startConnectWithInjectedProvider"
>Connect wallet</BalBtn
>
<BalBtn
v-else-if="hasNFT"
:disabled="!isAbleToUpgradeNFT"
:color="!isAbleToUpgradeNFT ? 'gray' : 'gradient-blue-light'"
class="self-end w-fit"
size="sm"
@click="() => UpgradeNFT(NFTData?.id as number) "
>Upgrade</BalBtn
>
<BalBtn
v-else
:color="isMintingNFT ? 'gray' : 'gradient-blue-light'"
:disabled="isMintingNFT"
:color="isMintingNFTStatus.loading ? 'gray' : 'gradient-blue-light'"
:disabled="isMintingNFTStatus.loading"
class="self-end w-fit"
size="sm"
@click="() => MintNFT()"
Expand All @@ -146,9 +208,7 @@ const levels = ref([
</template>
<template v-else>
<div class="p-8 h-full bg-white dark:bg-gray-850 rounded-lg shadow-lg">
<div
class="flex flex-row gap-8 justify-center items-center h-full h-[265px]"
>
<div class="flex flex-row gap-8 justify-center items-center h-full">
<img
:src="hasNFT ? nftImageSrc : NFTImage"
:class="`rounded-md h-[224px] w-[168px] bg-slate-500 ${
Expand Down Expand Up @@ -195,10 +255,19 @@ const levels = ref([
@click="startConnectWithInjectedProvider"
>Connect wallet</BalBtn
>
<BalBtn
v-else-if="hasNFT"
:disabled="!isAbleToUpgradeNFT"
:color="!isAbleToUpgradeNFT ? 'gray' : 'gradient-blue-light'"
class="self-end w-fit"
size="sm"
@click="() => UpgradeNFT(NFTData?.id as number)"
>Upgrade</BalBtn
>
<BalBtn
v-else
:color="isMintingNFT ? 'gray' : 'gradient-blue-light'"
:disabled="isMintingNFT"
:color="isMintingNFTStatus.loading ? 'gray' : 'gradient-blue-light'"
:disabled="isMintingNFTStatus.loading"
class="self-end w-fit"
size="sm"
@click="() => MintNFT()"
Expand All @@ -208,4 +277,18 @@ const levels = ref([
</div>
</div>
</template>
</template>
<teleport to="#modal">
<UpgradeNFTModal
:nftData="(NFTData as TNFTData)"
:isOpenModal="isOpenUpgradeNFTModal"
:nftImage="(nftImageSrc as string)"
@close="handleUpgradeNFTClose"
/>
<MintNFTModal
:nftData="(NFTData as TNFTData)"
:isOpenModal="isOpenMintNFTModal"
:nftImage="(nftImageSrc as string)"
@close="handleMintNFTClose"
/>
</teleport>
</template>
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ export type ClaimRow = {
*/
const { t } = useI18n();
const { fNum } = useNumbers();
const { currentAllocation, isLoading, claimReward } = useAllocations();
const { currentAllocation, isLoading, claimReward, isClaimingReward } =
useAllocations();
watch(currentAllocation, () => {
console.debug(currentAllocation.value);
});
Expand Down Expand Up @@ -133,7 +134,8 @@ const hasCurrentAllocation = computed(() => {
</template>
<template #claimTotalCell>
<BalBtn
:color="selectedRows.length ? 'blue' : 'gray'"
:color="selectedRows.length || isClaimingReward ? 'blue' : 'gray'"
:disabled="isClaimingReward || !selectedRows.length"
class="w-fit"
size="sm"
@click="handleButtonClick"
Expand Down
61 changes: 61 additions & 0 deletions src/components/contextual/pages/dashboard/Modals/MintNFTModal.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<script lang="ts" setup>
import { NFTData } from '@/services/campaigns/campaigns.service';

type Props = {
nftData: NFTData;
isOpenModal: boolean;
nftImage: string;
};
const props = defineProps<Props>();
const emit = defineEmits(['close']);

const { isOpenModal, nftImage, nftData } = toRefs(props);
const showFireworks = ref(false);

const handleCloseModal = () => {
showFireworks.value = false;
emit('close');
};

const isImageLoaded = ref(false);
function onImageLoad() {
isImageLoaded.value = true;
}
</script>
<template>
<BalModal
:class="isImageLoaded ? 'visible' : 'invisible'"
:show="isOpenModal"
:fireworks="true"
@close="handleCloseModal"
>
<div class="flex flex-col gap-4 justify-center items-center">
<div class="flex flex-col gap-2 justify-center items-center w-full">
<p>Here is your new NFT</p>
</div>
<img
class="rounded-md nft-image"
:src="nftImage"
alt="New NFT"
@load="onImageLoad"
/>
<div class="flex flex-col justify-center items-center w-full">
<h2>{{ nftData?.name }}</h2>
<p>
<span class="font-semibold">{{ nftData?.attributes[1].value }}</span>
Votes
</p>
</div>
</div>
</BalModal>
</template>









ƒ
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<script lang="ts" setup>
import { NFTData } from '@/services/campaigns/campaigns.service';
type Props = {
nftData: NFTData;
isOpenModal: boolean;
nftImage: string;
};
const props = defineProps<Props>();
const emit = defineEmits(['close']);

const { isOpenModal, nftImage, nftData } = toRefs(props);
const showFireworks = ref(false);

const handleCloseModal = () => {
showFireworks.value = false;
emit('close');
};

const isImageLoaded = ref(false);
function onImageLoad() {
isImageLoaded.value = true;
}
</script>
<template>
<BalModal
:class="isImageLoaded ? 'visible' : 'invisible'"
:show="isOpenModal"
:fireworks="true"
@close="handleCloseModal"
>
<div class="flex flex-col gap-4 justify-center items-center">
<div class="flex flex-col gap-2 justify-center items-center w-full">
<h4>Congratulations on leveling up!</h4>
<p>Here is your new NFT</p>
</div>
<img
class="rounded-md nft-image"
:src="nftImage"
alt="New NFT"
@load="onImageLoad"
/>
<div class="flex flex-col justify-center items-center w-full">
<h2>{{ nftData?.name }}</h2>
<p>
<span class="font-semibold">{{ nftData?.attributes[1].value }}</span>
Votes
</p>
</div>
</div>
</BalModal>
</template>









42 changes: 33 additions & 9 deletions src/composables/campaigns/useAllocations.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,21 @@
import { QueryKey, useMutation, useQuery } from '@tanstack/vue-query';
import { QueryKey, useQuery } from '@tanstack/vue-query';
import { campaignsService } from '@/services/campaigns/campaigns.service';
import useWeb3 from '@/services/web3/useWeb3';
import useNotifications from '../useNotifications';
import useTransactions from '../useTransactions';

export function useAllocations() {
const { account } = useWeb3();
const { account, chainId } = useWeb3();
const { addNotification } = useNotifications();
const { addTransaction } = useTransactions();
const isClaimingReward = ref(false);

const queryKey = reactive(['currentAllocation']);
const queryFn = async () => {
return await campaignsService.getCurrentAllocation(account.value);
return await campaignsService.getCurrentAllocation(
chainId.value,
account.value
);
};

const { data: currentAllocation, isLoading } = useQuery(
Expand All @@ -16,12 +25,27 @@ export function useAllocations() {
enabled: true,
}
);
const mutationKey = reactive(['claimReward']);
const mutationFn = async () => {
return await campaignsService.claimAllocantions();
const claimReward = async () => {
isClaimingReward.value = true;
try {
const txResponse = await campaignsService.claimAllocantions();
addTransaction({
id: txResponse.hash,
type: 'tx',
action: 'claimRewards',
summary: 'Regenerative Finance Rewards',
});
} catch (error) {
console.error('Error upgrading NFT:', error);
addNotification({
title: 'Error',
message: 'The reward could not be claimed',
type: 'error',
});
} finally {
isClaimingReward.value = false;
}
};

const { mutate } = useMutation(mutationKey as QueryKey, mutationFn);

return { currentAllocation, isLoading, claimReward: mutate };
return { currentAllocation, isLoading, claimReward, isClaimingReward };
}
Loading