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.

Sign up for GitHub

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

Feat/add UI for validation checks #35

Merged
merged 6 commits into from
Jan 29, 2025
Merged

Feat/add UI for validation checks #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9a61b64
Adding new UI for validation checks
elenabardho Jan 27, 2025
24facc5
Add reset functionality to UI when checking a new transaction to vote
elenabardho Jan 28, 2025
f2ef714
Small changes
elenabardho Jan 28, 2025
140cb6e
Small change
elenabardho Jan 29, 2025
c747ec1
Add anchor metadata url/hash
elenabardho Jan 29, 2025
4e48729
Change voting details display
elenabardho Jan 29, 2025
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
121 changes: 102 additions & 19 deletions src/app/components/transaction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,19 +28,31 @@ export const TransactionButton = () => {
const [signature, setsignature] = useState<string>("");
const [isPartOfSigners, setIsPartOfSigners] = useState(false);
const [isOneVote, setIsOneVote] = useState(false);
const [hasCertificates, setHasCertificates] = useState(false);
const [hasCertificates, setHasCertificates] = useState(true);
const [isSameNetwork, setIsSameNetwork] = useState(false);
const [hasICCCredentials, setHasICCCredentials] = useState(false);
const [isInOutputPlutusData , setIsInOutputPlutusData] = useState(false);

const [voteResult, setVoteResult] = useState<string>();
const [voteID, setVoteID] = useState<string>();
const [cardanoscan, setCardanoscan] = useState<string>();
const [metadataAnchorURL, setmetadataAnchorURL] = useState<string>();
const [metadataAnchorHash, setMetadataAnchorHash] = useState<string>();


const checkTransaction = async () => {
if (!connected) {
setIsPartOfSigners(false);
setIsOneVote(false);
setHasCertificates(true);
setIsSameNetwork(false);
setHasICCCredentials(false);
setIsInOutputPlutusData(false);
setVoteResult("");
setVoteID("");
setMessage("Please connect your wallet first.");
return;
}

const network = await wallet.getNetworkId();
console.log("Connected wallet network ID:", network);
console.log("isPartOfSigners:", isPartOfSigners);
Expand All @@ -59,6 +71,7 @@ export const TransactionButton = () => {

const transactionBody = unsignedTransaction?.body();
const voting_procedures= transactionBody?.to_js_value().voting_procedures;

try{
if (!transactionBody) {
throw new Error("Transaction body is null.");
Expand All @@ -75,11 +88,16 @@ export const TransactionButton = () => {
}

//one vote

const votesNumber = voting_procedures?.[0]?.votes?.length;
const votes=voting_procedures?.[0]?.votes;
const votesNumber = votes?.length;

if(votesNumber === 1){
setIsOneVote(true);
console.log("Transaction has one vote.");
setVoteResult(votes?.[0].voting_procedure.vote);
setVoteID(votes?.[0].action_id.transaction_id);
setmetadataAnchorURL(votes?.[0].voting_procedure.anchor?.anchor_url);
setMetadataAnchorHash(votes?.[0].voting_procedure.anchor?.anchor_data_hash);
console.log("Transaction has one vote set to:",voteResult);
}else if (!votesNumber){
throw new Error("Transaction has no votes.");
}else{
Expand All @@ -91,7 +109,7 @@ export const TransactionButton = () => {
console.log("certificates:", certificates);
if (!certificates) {
console.log("No certificates in the transaction.");
setHasCertificates(true);
setHasCertificates(false);
}

//Same network
Expand Down Expand Up @@ -159,6 +177,15 @@ export const TransactionButton = () => {


//for future add context of some of the

//********************************************Voting Details *********************************************************************/
if (transactionNetworkID === 0) {
setCardanoscan("https://preprod.cardanoscan.io/transaction/");
} else if (transactionNetworkID === 1) {
setCardanoscan("https://cardanoscan.io/transaction/");
}


}
catch (error) {
console.error("Error validating transaction:", error);
Expand Down Expand Up @@ -213,7 +240,16 @@ export const TransactionButton = () => {
variant="outlined"
fullWidth
value={unsignedTransactionHex}
onChange={(e) => setUnsignedTransactionHex(e.target.value)}
onChange={(e) => {setUnsignedTransactionHex(e.target.value);
setIsPartOfSigners(false);
setIsOneVote(false);
setHasCertificates(true);
setIsSameNetwork(false);
setHasICCCredentials(false);
setIsInOutputPlutusData(false);
setVoteResult("");
setVoteID("")
}}
/>
<Button
variant="contained"
Expand All @@ -228,10 +264,61 @@ export const TransactionButton = () => {
{/* Transaction Details */}
<Box sx={{ mt: 3 }}>
<Typography variant="h6" sx={{ mb: 2 }}>Transaction Details</Typography>
<p>
<span style={{ fontWeight: "bold" }}>Wallet needs to sign?: </span>
{isPartOfSigners ? "✅" : "❌"}
</p>

{unsignedTransaction && <Box display="flex" flexWrap="wrap" gap={2}>

<Typography display="flex" flexDirection="column" width="45%" variant="body1" fontWeight="bold">
Wallet needs to sign?:{isPartOfSigners ? "✅" : "❌"}
</Typography>

<Typography display="flex" flexDirection="column" width="45%" variant="body1" fontWeight="bold">
Signing one vote?:{isOneVote ? "✅" : "❌"}
</Typography>

<Typography display="flex" flexDirection="column" width="45%" variant="body1" fontWeight="bold">
Has no certificates?:{hasCertificates ? "❌":"✅"}
</Typography>

<Typography display="flex" flexDirection="column" width="45%" variant="body1" fontWeight="bold">
Is the transaction in the same network?:{isSameNetwork ? "✅" : "❌"}
</Typography>

<Typography display="flex" flexDirection="column" width="45%" variant="body1" fontWeight="bold">
Has Intersect CC credentials?:{hasICCCredentials ? "✅" : "❌"}
</Typography>

<Typography display="flex" flexDirection="column" width="45%" variant="body1" fontWeight="bold">
Is stake credential in plutus data?:{isInOutputPlutusData ? "✅" : "❌"}
</Typography>

</Box>}
<Typography variant="h6" sx={{ mt: 3 }}>Voting Details</Typography>
{unsignedTransaction && <TableContainer sx={{ mb: 3 }}>
<Table sx={{ mt: 3 }}>
<TableBody>
<TableRow>
<TableCell sx={{ fontWeight: "bold" }}>Governance Action ID </TableCell>
<TableCell>
<a href={`${cardanoscan}${voteID}`} target="_blank">{voteID}</a>
</TableCell>
</TableRow>
<TableRow>
<TableCell sx={{ fontWeight: "bold" }}>Vote Choice </TableCell>
<TableCell>{voteResult}</TableCell>
</TableRow>
<TableRow>
<TableCell sx={{ fontWeight: "bold" }}>Metadata Anchor URL</TableCell>
<TableCell><a href={metadataAnchorURL} target="_blank">{metadataAnchorURL}</a></TableCell>
</TableRow>
<TableRow>
<TableCell sx={{ fontWeight: "bold" }}>Metadata Anchor Hash</TableCell>
<TableCell>{metadataAnchorHash}</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>

}
<Box
sx={{
backgroundColor: "#f5f5f5",
Expand All @@ -243,7 +330,8 @@ export const TransactionButton = () => {
boxShadow: 1,
}}
>
<ReactJsonPretty data={unsignedTransaction ? unsignedTransaction.to_json() : {}} />
{unsignedTransactionHex && <ReactJsonPretty data={unsignedTransaction ? unsignedTransaction.to_json() : {}} />}

</Box>
</Box>

Expand Down Expand Up @@ -295,9 +383,4 @@ export const TransactionButton = () => {


);
};





};
9 changes: 9 additions & 0 deletions src/app/components/wallet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export const Wallet = () => {
const [WalletComponent, setWalletComponent] = useState<any | null>(null);
const [paymentCred, setPaymentCred] = useState<string | null>(null);
const [stakeCred, setStakeCred] = useState<string | null>(null);
const [walletNetwork, setWalletNetwork] = useState<string | null>(null);

useEffect(() => {
const run = async () => {
Expand All @@ -35,17 +36,21 @@ export const Wallet = () => {
const pubKey = await wallet.getRegisteredPubStakeKeys();
console.log("Public key:", pubKey);
const changeAddress = await wallet.getChangeAddress();
const networkId = await wallet.getNetworkId();

setPaymentCred(deserializeAddress(changeAddress).pubKeyHash);

setStakeCred(deserializeAddress(changeAddress).stakeCredentialHash);

setWalletNetwork(networkId === 0 ? "Testnet" : networkId === 1 ? "Mainnet" : "unknown");

console.log("Payment Credential:", paymentCred);
console.log("Stake Credential:", stakeCred);
}else{
console.log("Wallet not connected.");
setPaymentCred(null);
setStakeCred(null);
setWalletNetwork(null);
}
};

Expand Down Expand Up @@ -77,6 +82,10 @@ export const Wallet = () => {
<TableCell sx={{ fontWeight: "bold" }}>Stake Credential</TableCell>
<TableCell>{stakeCred || "Not Available"}</TableCell>
</TableRow>
<TableRow>
<TableCell sx={{ fontWeight: "bold" }}>Wallet Network</TableCell>
<TableCell>{walletNetwork || "Not Available"}</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
Expand Down