[GSW-648] fix: ui for for governance

gnoswap-labs · Dec 17, 2023 · 19a2ed3 · 19a2ed3
1 parent cc361d8
commit 19a2ed3
Show file tree

Hide file tree

Showing 12 changed files with 161 additions and 44 deletions.
diff --git a/packages/web/src/components/governance/governance-detail-info/GovernanceDetailInfo.styles.ts b/packages/web/src/components/governance/governance-detail-info/GovernanceDetailInfo.styles.ts
@@ -8,22 +8,25 @@ export const GovernanceDetailInfoWrapper = styled.div`
   width: 100%;
   padding: 24px 36px;
   gap: 16px;
-  &:nth-of-type(1), &:nth-of-type(2) {
+  &:nth-of-type(1),
+  &:nth-of-type(2) {
     padding: 24px 0 24px 36px;
     min-width: 275px;
   }
   @media (max-width: 1180px) {
     ${mixins.flexbox("column", "flex-start", "flex-start")};
     padding: 24px;
 
-    &:nth-of-type(1), &:nth-of-type(2) {
+    &:nth-of-type(1),
+    &:nth-of-type(2) {
       min-width: 258px;
     }
   }
   @media (max-width: 968px) {
     ${mixins.flexbox("row", "center", "space-between")};
     width: 100%;
-    &:nth-of-type(1), &:nth-of-type(2) {
+    &:nth-of-type(1),
+    &:nth-of-type(2) {
       padding: 12px;
     }
     padding: 12px;
@@ -59,6 +62,16 @@ export const GovernanceDetailInfoWrapper = styled.div`
     }
   }
 
+  .value-wrapper-skeleton {
+    height: 40px;
+    width: 100%;
+    padding: 0 8px;
+
+    ${media.tablet} {
+      height: 31px;
+    }
+  }
+
   .value-wrapper {
     ${mixins.flexbox("row", "flex-end", "flex-start")};
     @media (max-width: 968px) {

diff --git a/packages/web/src/components/governance/governance-detail-info/GovernanceDetailInfo.tsx b/packages/web/src/components/governance/governance-detail-info/GovernanceDetailInfo.tsx
@@ -6,12 +6,14 @@ import {
   GovernanceDetailInfoWrapper,
 } from "./GovernanceDetailInfo.styles";
 import { Global, css, type Theme } from "@emotion/react";
+import { SHAPE_TYPES, skeletonTokenDetail } from "@constants/skeleton.constant";
 
 interface GovernanceDetailInfoProps {
   title: string;
-  value: string;
+  value?: string;
   tooltip?: string;
   currency?: string;
+  loading?: boolean;
 }
 
 const ToolTipGlobalStyle = () => {
@@ -37,6 +39,7 @@ const GovernanceDetailInfo: React.FC<GovernanceDetailInfoProps> = ({
   value,
   tooltip,
   currency,
+  loading,
 }) => {
   return (
     <GovernanceDetailInfoWrapper>
@@ -46,10 +49,17 @@ const GovernanceDetailInfo: React.FC<GovernanceDetailInfoProps> = ({
           <GovernanceDetailInfoTooltip tooltip={tooltip} />
         )}
       </div>
-      <div className="value-wrapper">
-        <span className="value">{value}</span>
-        {currency && <span className="currency">{currency}</span>}
-      </div>
+      {loading ? (
+        <div
+          className="value-wrapper-skeleton "
+          css={skeletonTokenDetail("100%", SHAPE_TYPES.ROUNDED_SQUARE)}
+        />
+      ) : (
+        <div className="value-wrapper">
+          <span className="value">{value}</span>
+          {currency && <span className="currency">{currency}</span>}
+        </div>
+      )}
       <ToolTipGlobalStyle />
     </GovernanceDetailInfoWrapper>
   );

diff --git a/packages/web/src/components/governance/governance-detail/GovernanceDetail.tsx b/packages/web/src/components/governance/governance-detail/GovernanceDetail.tsx
@@ -3,38 +3,44 @@ import { GovernanceDetailInfoProps } from "@containers/governance-container/Gove
 import GovernanceDetailInfo from "../governance-detail-info/GovernanceDetailInfo";
 
 interface GovernanceDetailProps {
-  governanceDetailInfo: GovernanceDetailInfoProps;
+  governanceDetailInfo?: GovernanceDetailInfoProps;
+  loading?: boolean;
 }
 
 const GovernanceDetail: React.FC<GovernanceDetailProps> = ({
   governanceDetailInfo,
+  loading,
 }) => (
   <GovernanceDetailWrapper>
     <GovernanceDetailInfo
       title={"Total xGNS Issued"}
-      value={governanceDetailInfo.totalXGnosIssued}
+      value={governanceDetailInfo?.totalXGnosIssued}
       tooltip={
         "Total amount of xGNS currently issued through GNS-GNOT staking."
       }
       currency="xGNS"
+      loading={loading}
     />
     <GovernanceDetailInfo
       title={"Community Pool"}
-      value={governanceDetailInfo.communityPool}
+      value={governanceDetailInfo?.communityPool}
       tooltip={
         "Amount of GNS accumulated in the Community Pool from Emissions."
       }
       currency="GNS"
+      loading={loading}
     />
     <GovernanceDetailInfo
       title={"Passed Proposals"}
-      value={governanceDetailInfo.passedProposals}
+      value={governanceDetailInfo?.passedProposals}
       tooltip={"Proposals that were successfully executed."}
+      loading={loading}
     />
     <GovernanceDetailInfo
       title={"Active Proposals"}
-      value={governanceDetailInfo.activeProposals}
+      value={governanceDetailInfo?.activeProposals}
       tooltip={"Proposals that are currently available for voting."}
+      loading={loading}
     />
   </GovernanceDetailWrapper>
 );

diff --git a/packages/web/src/components/governance/governance-summary/GovernanceSummary.tsx b/packages/web/src/components/governance/governance-summary/GovernanceSummary.tsx
@@ -3,14 +3,16 @@ import { GovernanceDetailInfoProps } from "@containers/governance-container/Gove
 import GovernanceDetail from "../governance-detail/GovernanceDetail";
 
 interface GovernanceSummaryProps {
-  governanceDetailInfo: GovernanceDetailInfoProps;
+  governanceDetailInfo?: GovernanceDetailInfoProps;
+  loading?: boolean;
 }
 
 const GovernanceSummary: React.FC<GovernanceSummaryProps> = ({
   governanceDetailInfo,
+  loading,
 }) => (
   <GovernanceSummaryWrapper>
-    <GovernanceDetail governanceDetailInfo={governanceDetailInfo} />
+    <GovernanceDetail loading={loading} governanceDetailInfo={governanceDetailInfo} />
   </GovernanceSummaryWrapper>
 );
 

diff --git a/packages/web/src/components/governance/proposal-detail/ProposalDetail.styles.ts b/packages/web/src/components/governance/proposal-detail/ProposalDetail.styles.ts
@@ -18,6 +18,7 @@ export const ProposalDetailWrapper = styled.div`
   }
   .header {
     ${mixins.flexbox("row", "center", "space-between")};
+    flex-wrap: nowrap;
     width: 100%;
     gap: 8px;
     span {
@@ -26,13 +27,20 @@ export const ProposalDetailWrapper = styled.div`
     .title {
       ${fonts.body5};
       color: ${({ theme }) => theme.color.text02};
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+    }
+
+    .content {
+      white-space: nowrap;
     }
   }
   ${media.mobile} {
-    padding: 12px 12px 24px 12px;
-    gap: 24px;
+    padding: 12px;
+    gap: 12px;
     .header {
-      ${mixins.flexbox("column", "flex-start", "flex-start")};
       .title {
         ${fonts.body11};
       }
@@ -105,6 +113,7 @@ export const ProgressWrapper = styled.div`
     }
   }
   ${media.mobile} {
+    ${mixins.flexbox("column", "start", "start")};
     gap: 8px;
     .progress-value {
       ${fonts.p6};
@@ -159,7 +168,7 @@ export const ProgressBar = styled.div<progressBarProps>`
     background-color: ${({ theme }) => theme.color.background12};
   }
   ${media.mobile} {
-    min-width: calc(100% - 120px);
+    width: 100%;
     height: 10px;
   }
 `;
diff --git a/packages/web/src/components/governance/proposal-detail/ProposalDetailSekeleton.tsx b/packages/web/src/components/governance/proposal-detail/ProposalDetailSekeleton.tsx
@@ -0,0 +1,32 @@
+import { ProposalDetailWrapper } from "./ProposalDetail.styles";
+import { SHAPE_TYPES, skeletonTokenDetail } from "@constants/skeleton.constant";
+
+const ProposalDetailSkeleton = () => {
+  return (
+    <ProposalDetailWrapper>
+      <div className="header">
+        <div
+          className="title"
+          css={skeletonTokenDetail("60%", SHAPE_TYPES.ROUNDED_SQUARE)}
+        />
+        <div
+          className="status success"
+          css={skeletonTokenDetail("7%", SHAPE_TYPES.ROUNDED_SQUARE)}
+        />
+      </div>
+      <div
+        className="active-wrapper"
+        css={skeletonTokenDetail("30%", SHAPE_TYPES.ROUNDED_SQUARE)}
+      />
+      <div className="header">
+        <div css={skeletonTokenDetail("70%", SHAPE_TYPES.ROUNDED_SQUARE)} />
+        <div
+          className="status success"
+          css={skeletonTokenDetail("10%", SHAPE_TYPES.ROUNDED_SQUARE)}
+        />
+      </div>
+    </ProposalDetailWrapper>
+  );
+};
+
+export default ProposalDetailSkeleton;
diff --git a/packages/web/src/components/governance/proposals-list/ProposalList.tsx b/packages/web/src/components/governance/proposals-list/ProposalList.tsx
@@ -6,6 +6,7 @@ import ViewProposalModal from "../view-proposal-modal/ViewProposalModal";
 import { ProposalListWrapper } from "./ProposalList.styles";
 import { Dispatch, SetStateAction } from "react";
 import CreateProposalModal from "../create-proposal-modal/CreateProposalModal";
+import ProposalDetailSkeleton from "../proposal-detail/ProposalDetailSekeleton";
 interface ProposalListProps {
   proposalList: ProposalDetailProps[];
   isShowCancelled: boolean;
@@ -20,6 +21,7 @@ interface ProposalListProps {
   isConnected: boolean;
   isSwitchNetwork: boolean;
   handleSelectVote: () => void;
+  loading?: boolean;
 }
 
 const ProposalList: React.FC<ProposalListProps> = ({
@@ -36,6 +38,7 @@ const ProposalList: React.FC<ProposalListProps> = ({
   isConnected,
   isSwitchNetwork,
   handleSelectVote,
+  loading,
 }) => (
   <ProposalListWrapper>
     <ProposalHeader
@@ -45,13 +48,22 @@ const ProposalList: React.FC<ProposalListProps> = ({
       isConnected={isConnected}
       isSwitchNetwork={isSwitchNetwork}
     />
-    {proposalList.map((proposalDetail: ProposalDetailProps) => (
-      <ProposalDetail
-        key={proposalDetail.id}
-        proposalDetail={proposalDetail}
-        onClickProposalDetail={onClickProposalDetail}
-      />
-    ))}
+    {loading ? (
+      Array.from({ length: 3 }).map((_, idx) => (
+        <ProposalDetailSkeleton key={idx} />
+      ))
+    ) : (
+      <>
+        {proposalList.map((proposalDetail: ProposalDetailProps) => (
+          <ProposalDetail
+            key={proposalDetail.id}
+            proposalDetail={proposalDetail}
+            onClickProposalDetail={onClickProposalDetail}
+          />
+        ))}
+      </>
+    )}
+
     {isShowProposalModal && (
       <ViewProposalModal
         breakpoint={breakpoint}

diff --git a/packages/web/src/components/governance/view-proposal-modal/ViewProposalModal.styles.ts b/packages/web/src/components/governance/view-proposal-modal/ViewProposalModal.styles.ts
@@ -284,6 +284,10 @@ export const BoxQuorumWrapper = styled.div`
       > div {
         ${fonts.body11}
       }
+
+      > div:first-of-type {
+        ${fonts.body12}
+      }
     }
     &:hover {
       background-color: ${({ theme }) => theme.color.background05Hover};

diff --git a/packages/web/src/containers/governance-container/GovernanceContainer.tsx b/packages/web/src/containers/governance-container/GovernanceContainer.tsx
@@ -19,26 +19,27 @@ const initialGovernanceDetailInfo: GovernanceDetailInfoProps = {
 };
 
 async function fetchGovernanceDetailInfo(): Promise<GovernanceDetailInfoProps> {
-  return Promise.resolve({
-    totalXGnosIssued: "59,144,225",
-    communityPool: "2,412,148",
-    passedProposals: "42",
-    activeProposals: "2",
-  });
+  return new Promise(resolve => setTimeout(resolve, 2000)).then(
+    () => initialGovernanceDetailInfo,
+  );
 }
 
 const GovernanceContainer: React.FC = () => {
-  const {
-    data: governanceDetailInfo,
-  } = useQuery<GovernanceDetailInfoProps, Error>({
+  const { data: governanceDetailInfo, isFetching } = useQuery<
+    GovernanceDetailInfoProps,
+    Error
+  >({
     queryKey: ["governanceDetailInfo"],
     queryFn: () => {
       return fetchGovernanceDetailInfo();
     },
-    initialData: initialGovernanceDetailInfo,
   });
-
-  return <GovernanceSummary governanceDetailInfo={governanceDetailInfo} />;
+  return (
+    <GovernanceSummary
+      loading={isFetching}
+      governanceDetailInfo={governanceDetailInfo}
+    />
+  );
 };
 
 export default GovernanceContainer;
diff --git a/packages/web/src/containers/proposal-list-container/ProposalListContainer.tsx b/packages/web/src/containers/proposal-list-container/ProposalListContainer.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
 import ProposalList from "@components/governance/proposals-list/ProposalList";
 import { useWindowSize } from "@hooks/common/use-window-size";
@@ -76,7 +76,16 @@ const ProposalListContainer: React.FC = () => {
   const [isShowCreateProposal, setIsShowCreateProposal] = useState(false);
   const { isSwitchNetwork, connected, switchNetwork } = useWallet();
   const { breakpoint } = useWindowSize();
-  const { openModal } = useConnectWalletModal(); 
+  const { openModal } = useConnectWalletModal();
+
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+    return () => clearTimeout(timeout);
+  }, []);
 
   const { data: proposalList = [] } = useQuery<ProposalDetailProps[], Error>({
     queryKey: ["proposalList", isShowCancelled],
@@ -124,6 +133,7 @@ const ProposalListContainer: React.FC = () => {
 
   return (
     <ProposalList
+      loading={loading}
       isConnected={connected}
       proposalList={proposalList}
       isShowCancelled={isShowCancelled}