From 508df0e7d7d96ef84045b72c177b324e82c27328 Mon Sep 17 00:00:00 2001 From: Joanna Dyczka Date: Thu, 21 Mar 2024 11:00:51 +0100 Subject: [PATCH] [#219] fetch data for DRep details page --- .../src/hooks/queries/useGetDRepListQuery.ts | 4 +- govtool/frontend/src/i18n/locales/en.ts | 4 + govtool/frontend/src/models/api.ts | 4 + govtool/frontend/src/pages/DRepDetails.tsx | 135 +++++++++++++++--- .../src/services/requests/getDRepList.ts | 4 +- govtool/frontend/src/theme.ts | 10 +- 6 files changed, 128 insertions(+), 33 deletions(-) diff --git a/govtool/frontend/src/hooks/queries/useGetDRepListQuery.ts b/govtool/frontend/src/hooks/queries/useGetDRepListQuery.ts index 806d55072..59021a24c 100644 --- a/govtool/frontend/src/hooks/queries/useGetDRepListQuery.ts +++ b/govtool/frontend/src/hooks/queries/useGetDRepListQuery.ts @@ -4,7 +4,7 @@ import { QUERY_KEYS } from "@consts"; import { useCardano } from "@context"; import { getDRepList } from "@services"; -export const useGetDRepListQuery = () => { +export const useGetDRepListQuery = (dRepView?: string) => { const { pendingTransaction } = useCardano(); const { data, isLoading } = useQuery({ @@ -15,7 +15,7 @@ export const useGetDRepListQuery = () => { pendingTransaction.retireAsSoleVoter || pendingTransaction.retireAsDrep)?.transactionHash, ], - queryFn: getDRepList, + queryFn: () => getDRepList(dRepView), }); return { data, isLoading }; diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts index 563ac6b71..a2384eab4 100644 --- a/govtool/frontend/src/i18n/locales/en.ts +++ b/govtool/frontend/src/i18n/locales/en.ts @@ -255,6 +255,9 @@ export const en = { abstainCardDescription: "Select this to vote ABSTAIN to every vote.", abstainCardTitle: "Abstain from Every Vote", automatedVotingOptions: "Automated Voting Options", + editBtn: "Edit DRep data", + meAsDRep: "This DRep ID is connected to your wallet", + myDRep: "This is your DRep", noConfidenceDescription: "Select this to signal no confidence in the current constitutional committee by voting NO on every proposal and voting YES to no confidence proposals", noConfidenceTitle: "Signal No Confidence on Every Vote", @@ -596,6 +599,7 @@ export const en = { cancel: "Cancel", clear: "Clear", clickToCopy: "Click to copy link", + close: "Close", confirm: "Confirm", connectToDelegate: "Connect to delegate", continue: "Continue", diff --git a/govtool/frontend/src/models/api.ts b/govtool/frontend/src/models/api.ts index 9f16b07ff..b04333d63 100644 --- a/govtool/frontend/src/models/api.ts +++ b/govtool/frontend/src/models/api.ts @@ -8,9 +8,13 @@ export interface VoterInfo { export interface DRepData { drepId: string; + view: string; url: string; metadataHash: string; deposit: number; + votingPower: number; + status: 'Active' | 'Inactive' | 'Retired'; + type: 'DRep' | 'SoleVoter'; } export type Vote = "yes" | "no" | "abstain"; diff --git a/govtool/frontend/src/pages/DRepDetails.tsx b/govtool/frontend/src/pages/DRepDetails.tsx index 2cbe98184..f3c084327 100644 --- a/govtool/frontend/src/pages/DRepDetails.tsx +++ b/govtool/frontend/src/pages/DRepDetails.tsx @@ -1,12 +1,20 @@ -import { Box, ButtonBase } from "@mui/material"; +import { PropsWithChildren, useState } from "react"; +import { Navigate, useNavigate, useParams } from "react-router-dom"; +import { + Box, ButtonBase, Chip, CircularProgress +} from "@mui/material"; -import { Button, Typography } from "@atoms"; +import { Button, LoadingButton, Typography } from "@atoms"; import { Card, Share } from "@molecules"; -import { ICONS } from "@consts"; -import { useScreenDimension, useTranslation } from "@hooks"; -import { openInNewTab } from "@utils"; -import { PropsWithChildren } from "react"; -import { useModal } from "@/context"; +import { ICONS, PATHS } from "@consts"; +import { + useGetAdaHolderCurrentDelegationQuery, + useGetDRepListQuery, + useScreenDimension, + useTranslation +} from "@hooks"; +import { correctAdaFormat, openInNewTab } from "@utils"; +import { useCardano, useModal, useSnackbar } from "@/context"; const LINKS = [ "darlenelonglink1.DRepwebsiteorwhatever.com", @@ -21,48 +29,129 @@ type DRepDetailsProps = { }; export const DRepDetails = ({ isConnected }: DRepDetailsProps) => { + const { + buildSignSubmitConwayCertTx, + buildVoteDelegationCert, + dRepID: myDRepId, + pendingTransaction, + stakeKey + } = useCardano(); const { t } = useTranslation(); + const navigate = useNavigate(); const { openModal } = useModal(); + const { addSuccessAlert, addErrorAlert } = useSnackbar(); const { screenWidth } = useScreenDimension(); + const { dRepId: dRepParam } = useParams(); + + const [isDelegating, setIsDelegating] = useState(false); + + const { currentDelegation } = useGetAdaHolderCurrentDelegationQuery(stakeKey); + const { data, isLoading } = useGetDRepListQuery(dRepParam); + const dRep = data?.[0]; + + if (!dRep && isLoading) return ; + + if (!dRep) return ; + + const { + drepId, view, status, votingPower, type + } = dRep; + + const isMe = drepId === myDRepId || view === myDRepId; + const isMyDrep = drepId === currentDelegation || view === currentDelegation; + const inProgressDelegation = pendingTransaction.delegate?.resourceId; + const isMyDrepInProgress = drepId === inProgressDelegation || view === inProgressDelegation; + + const delegate = async () => { + setIsDelegating(true); + try { + const certBuilder = await buildVoteDelegationCert(drepId); + const result = await buildSignSubmitConwayCertTx({ + certBuilder, + type: "delegate", + resourceId: drepId, + }); + if (result) { + addSuccessAlert(t("alerts.delegate.success")); + } + } catch (error) { + addErrorAlert(t("alerts.delegate.failed")); + } finally { + setIsDelegating(false); + } + }; return ( - + + {(isMe || isMyDrep) && ( + theme.shadows[2], + color: (theme) => theme.palette.text.primary, + mb: 1.5, + px: 2, + py: 0.5, + width: '100%', + }} + /> + )} - ExampleDRepName + {type} - {/* TODO: connect link */} - + {isMe && ( + + )} + - - drep_1njkdnkjwenfk12321ndcnsjdcsndc - + {view} {/* TODO: add status pill */} {/* */} + {status} {'₳ '} - 50,000,000 + {correctAdaFormat(votingPower)} + {/* TODO: fetch metadata, add views for metadata errors */} { }} > {isConnected ? ( - + ) : (