Gsw 648 fix UI for governance (#264)

* Update README.md * [GSW-648] fix: governance ui styles * [GSW-648] fix: ui for for governance * [GSW-648] fix: governance ui styles * [GSW-648] fix: governance ui styles --------- Co-authored-by: akstar82 <[email protected]>
gnoswap-labs · Dec 17, 2023 · 433e975 · 433e975
1 parent 146980d
commit 433e975
Show file tree

Hide file tree

Showing 17 changed files with 280 additions and 64 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Gnoswap Interface 
+# Gnoswap Interface
 Welcome to the open source interface for Gnoswap, the first decentralized exchange (DEX) powered by Gnoland, designed to simplify concentrated liquidity experience and increase capital efficiency for traders.
 
 _Note: Gnoswap is in active development and not yet in production, and we welcome your contributions! Please check our [contribution guidelines](https://github.com/gnoswap-labs/gnoswap-interface#contributing--support) and the [latest release](https://github.com/gnoswap-labs/gnoswap-interface/releases) to see the current development status._

diff --git a/packages/web/src/components/governance/create-proposal-modal/CreateProposalModal.styles.ts b/packages/web/src/components/governance/create-proposal-modal/CreateProposalModal.styles.ts
@@ -48,6 +48,7 @@ export const CreateProposalModalWrapper = styled.div`
     padding: 24px 24px 5px 24px;
     overflow: scroll;
     gap: 16px;
+    height: 800px;
     max-height: calc(100lvh - 100px);
     .header {
       ${mixins.flexbox("row", "center", "space-between")};

diff --git a/packages/web/src/components/governance/create-proposal-modal/CreateProposalModal.tsx b/packages/web/src/components/governance/create-proposal-modal/CreateProposalModal.tsx
@@ -30,6 +30,7 @@ import {
   CreateProposalModalWrapper,
   IconButton,
 } from "./CreateProposalModal.styles";
+import useLockedBody from "@hooks/common/use-lock-body";
 
 interface Props {
   breakpoint: DEVICE_TYPE;
@@ -101,6 +102,7 @@ const CreateProposalModal: React.FC<Props> = ({
     }
   };
 
+  useLockedBody(true);
   useEscCloseModal(() => setIsShowCreateProposal(false));
 
   useEffect(() => {
@@ -257,7 +259,8 @@ const CreateProposalModal: React.FC<Props> = ({
                             errors?.variable
                               ? (errors?.variable as any)[index]?.subspace
                                   ?.message ||
-                                (errors?.variable as any)[index]?.key?.message ||
+                                (errors?.variable as any)[index]?.key
+                                  ?.message ||
                                 (errors?.variable as any)[index]?.value?.message
                               : undefined
                           }
@@ -309,14 +312,16 @@ const CreateProposalModal: React.FC<Props> = ({
                 fullWidth: true,
                 textColor: "text09",
                 fontType: breakpoint !== DEVICE_TYPE.MOBILE ? "body7" : "body9",
-                hierarchy: isDisableSubmit ? undefined : ButtonHierarchy.Primary,
+                hierarchy: isDisableSubmit
+                  ? undefined
+                  : ButtonHierarchy.Primary,
                 bgColor: isDisableSubmit ? "background17" : undefined,
               }}
             />
           </CreateProposalModalWrapper>
         </FormProvider>
       </CreateProposalModalBackground>
-      <Overlay onClick={() => setIsShowCreateProposal(false)}/>
+      <Overlay onClick={() => setIsShowCreateProposal(false)} />
     </>
   );
 };

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,21 @@ export const GovernanceDetailInfoWrapper = styled.div`
     }
   }
 
+  .value-wrapper-skeleton {
+    height: 40px;
+    width: 100%;
+    ${mixins.flexbox("column", "start", "center")};
+    ${media.tablet} {
+      height: 31px;
+    }
+
+    > span {
+      display: block;
+      height: 20px;
+      width: 150px;
+    }
+  }
+
   .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,16 @@ 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">
+          <span css={skeletonTokenDetail("100%", SHAPE_TYPES.ROUNDED_SQUARE)} />
+        </div>
+      ) : (
+        <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};
       }
@@ -43,6 +51,7 @@ export const ProposalDetailWrapper = styled.div`
     gap: 12px;
     ${mixins.flexbox("row", "center", "center")};
     ${media.mobile} {
+      gap: 8px;
       ${mixins.flexbox("column", "flex-start", "flex-start")};
     }
   }
@@ -65,7 +74,7 @@ export const ProposalDetailWrapper = styled.div`
       fill: ${({ theme }) => theme.color.red01};
     }
     .passed-icon * {
-      fill: ${({ theme }) => theme.color.point};
+      fill: ${({ theme }) => theme.color.background04};
     }
     .cancelled-icon * {
       fill: ${({ theme }) => theme.color.icon03};
@@ -78,7 +87,7 @@ export const ProposalDetailWrapper = styled.div`
     color: ${({ theme }) => theme.color.red01};
   }
   .passed {
-    color: ${({ theme }) => theme.color.point};
+    color: ${({ theme }) => theme.color.background04};
   }
   .cancelled {
     color: ${({ theme }) => theme.color.icon03};
@@ -104,6 +113,7 @@ export const ProgressWrapper = styled.div`
     }
   }
   ${media.mobile} {
+    ${mixins.flexbox("column", "start", "start")};
     gap: 8px;
     .progress-value {
       ${fonts.p6};
@@ -158,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}