Merge pull request #1004 from oraichain/feat/detail-proposal

fix: detail proposal
oraichain · Nov 15, 2024 · 19613c2 · 19613c2
2 parents 6fbc525 + bf78e64
commit 19613c2
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 9 deletions.
diff --git a/src/components/ProposalDetails/Depositors/Depositors.js b/src/components/ProposalDetails/Depositors/Depositors.js
@@ -1,13 +1,13 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, {memo, useMemo, useState, useRef, useEffect} from "react";
-import {useGet} from "restful-react";
-import {useTheme} from "@material-ui/core/styles";
+import React, { memo, useMemo, useState, useRef, useEffect } from "react";
+import { useGet } from "restful-react";
+import { useTheme } from "@material-ui/core/styles";
 import useMediaQuery from "@material-ui/core/useMediaQuery";
 import classNames from "classnames/bind";
 import consts from "src/constants/consts";
-import {arraysEqual, mergeArrays} from "src/helpers/helper";
-import {formatInteger} from "src/helpers/helper";
-import {_} from "src/lib/scripts";
+import { arraysEqual, mergeArrays } from "src/helpers/helper";
+import { formatInteger } from "src/helpers/helper";
+import { _ } from "src/lib/scripts";
 import FilterSection from "src/components/common/FilterSection";
 import Pagination from "src/components/common/Pagination";
 import NoResult from "src/components/common/NoResult";
@@ -19,10 +19,14 @@ import DepositorsTable from "./DepositorsTable";
 import DepositorsSkeleton from "./DepositorsSkeleton";
 import DepositorsCard from "./DepositorsCard";
 import styles from "./Depositors.module.scss";
+import useFetchLCD from "../../../hooks/useFetchLCD";
+import axios from "axios";
+import config from "../../../config";
 
 const cx = classNames.bind(styles);
+const lcdApi = config.LCD_API;
 
-const Depositors = memo(({proposalId}) => {
+const Depositors = memo(({ proposalId }) => {
 	const theme = useTheme();
 	const isLargeScreen = useMediaQuery(theme.breakpoints.up("lg"));
 	const [pageId, setPageId] = useState(1);
@@ -33,10 +37,36 @@ const Depositors = memo(({proposalId}) => {
 	};
 
 	const despositorPath = `${consts.API.PROPOSALS}/${proposalId}/depositors?page_id=${pageId}`;
-	const {data: despositorData, loading: despositorLoading} = useGet({
+	const { data, loading: despositorLoading } = useGet({
 		path: despositorPath,
 	});
 
+	const [despositorData, setDespositorData] = useState();
+
+	useEffect(() => {
+		async function fetchData() {
+			if (data?.depositors?.length) {
+				setDespositorData(data);
+			} else {
+				const depositsPathLCD = `cosmos/gov/v1beta1/proposals/${proposalId}/deposits?pagination.offset=${(pageId - 1) * 10}&pagination.limit=10`;
+				const response = await axios.get(`${lcdApi}/${depositsPathLCD}`);
+				const data = response?.data;
+				setDespositorData({
+					page: {
+						total_page: data?.pagination?.total,
+					},
+					depositors: data?.deposits?.map(item => ({
+						account_address: item?.depositor,
+						amount: Array.isArray(item?.amount) ? `${item.amount[0]?.amount}${item.amount[0]?.denom}` : "-",
+						time_deposit: item?.time_deposit,
+						tx_hash: item?.tx_hash
+					})),
+				});
+			}
+		}
+		fetchData();
+	}, [data]);
+
 	let headerSection;
 	let tableSection;
 	let paginationSection;

diff --git a/src/containers/ProposalsDetail/ProposalsDetail.js b/src/containers/ProposalsDetail/ProposalsDetail.js
@@ -29,6 +29,7 @@ import { TextProposal } from "cosmjs-types/cosmos/gov/v1beta1/gov";
 import { calculateTallyProposal } from "src/helpers/helper";
 
 import moment from "moment";
+import useFetchLCD from "../../hooks/useFetchLCD";
 
 const cx = cn.bind(styles);
 
@@ -44,9 +45,42 @@ export default function(props) {
 	const [tally, setTally] = useState({});
 	const type = queryStringParse?.type ?? "";
 	const path = `${consts.API.PROPOSALS}/${proposalId}`;
-	const { data, loading, error } = useGet({
+	const { data: dataDetail, loading, error } = useGet({
 		path: path,
 	});
+	const [data, setData] = useState({});
+	const { result } = useFetchLCD(`cosmos/gov/v1beta1/proposals/${proposalId}`);
+
+	useEffect(() => {
+		if(!!result){
+			const proposal = result.proposal;
+			if(!!proposal){
+				const type = proposal.content['@type'];
+				const title = proposal.content?.title || proposal.content?.authority;
+				const deposit_end_time = proposal.deposit_end_time;
+				const description = proposal.content?.description;
+				const voting_start = proposal.voting_start_time;
+				const voting_end = proposal.voting_end_time;
+				const submit_time = proposal.submit_time;
+				const status = proposal.status;
+				const total_deposit = Array.isArray(proposal.total_deposit) ? proposal.total_deposit[0]?.amount : null;
+				const proposal_id = proposalId;
+				setData({
+					...dataDetail,
+					type,
+					title,
+					deposit_end_time,
+					description,
+					voting_start,
+					voting_end,
+					submit_time,
+					status,
+					total_deposit,
+					proposal_id,
+				});
+			}
+		}
+	}, [result, dataDetail]);
 
 	async function getDescriptionProposal() {
 		const description = await queryStation.proposalId(proposalId);

diff --git a/src/hooks/useFetchLCD.js b/src/hooks/useFetchLCD.js
@@ -0,0 +1,34 @@
+import { useState, useEffect } from "react";
+import config from "../config";
+import axios from "axios";
+
+const lcdApi = config.LCD_API;
+
+export default function useFetchLCD(url) {
+	const [result, setResult] = useState({});
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState();
+
+	useEffect(() => {
+		async function fetchData() {
+			try {
+				const response = await axios.get(`${lcdApi}/${url}`);
+				if (!!response) {
+					const data = response.data;
+					setResult(data);
+				}
+			} catch (error) {
+				setError(error);
+			} finally {
+				setLoading(false);
+			}
+		}
+		fetchData();
+	}, []);
+
+	return {
+		result,
+		loading,
+		error,
+	};
+}