feat: proposals basic view

anoma · Jul 26, 2023 · de29213 · de29213
1 parent 70fe484
commit de29213
Show file tree

Hide file tree

Showing 9 changed files with 349 additions and 57 deletions.
diff --git a/apps/extension/src/background/keyring/keyring.ts b/apps/extension/src/background/keyring/keyring.ts
@@ -727,6 +727,8 @@ export class KeyRing {
     owner: string
   ): Promise<{ token: string; amount: string }[]> {
     try {
+      const res = await this.query.query_proposals();
+      console.log(res);
       return (await this.query.query_balance(owner)).map(
         ([token, amount]: [string, string]) => {
           return {

diff --git a/apps/extension/src/background/offscreen/offscreen.ts b/apps/extension/src/background/offscreen/offscreen.ts
@@ -49,11 +49,11 @@ const SW_TTL = 20000;
       // closing the offscreen document and stopping the
       // service worker ping.
       if (ww_count === 0) {
-        requester.sendMessage<CloseOffscreenDocumentMsg>(
-          Ports.Background,
-          new CloseOffscreenDocumentMsg()
-        );
-        clearInterval(pingSw);
+        // requester.sendMessage<CloseOffscreenDocumentMsg>(
+        // Ports.Background,
+        // new CloseOffscreenDocumentMsg()
+        // );
+        // clearInterval(pingSw);
       }
     };
 

diff --git a/apps/namada-interface/src/App/AppRoutes.tsx b/apps/namada-interface/src/App/AppRoutes.tsx
@@ -15,6 +15,7 @@ import { TokenSend } from "./Token/TokenSend";
 import { TokenReceive } from "./Token/TokenReceive";
 import { TransferDetails, Transfers } from "./Token/Transfers";
 import { Router } from "@remix-run/router";
+import { Governance } from "./Governance";
 
 export const getRouter = (): Router => {
   return createBrowserRouter(
@@ -93,6 +94,14 @@ export const getRouter = (): Router => {
             </AnimatedTransition>
           }
         />
+        <Route
+          path={`${TopLevelRoute.Governance}`}
+          element={
+            <AnimatedTransition elementKey={TopLevelRoute.Governance}>
+              <Governance />
+            </AnimatedTransition>
+          }
+        />
         <Route
           path={TopLevelRoute.Settings}
           element={

diff --git a/apps/namada-interface/src/App/Governance/Governance.components.ts b/apps/namada-interface/src/App/Governance/Governance.components.ts
@@ -1,3 +1,4 @@
+import { Button } from "@namada/components";
 import styled from "styled-components";
 
 export const GovernanceContainer = styled.div`
@@ -10,3 +11,98 @@ export const GovernanceContainer = styled.div`
   color: ${(props) => props.theme.colors.utility2.main};
   background-color: ${(props) => props.theme.colors.utility1.main80};
 `;
+
+export const ProposalsContainer = styled.div`
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+`;
+
+export const ProposalCard = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  gap: 8px;
+  border-radius: 8px;
+  background-color: ${(props) => props.theme.colors.primary.main20};
+`;
+
+export const ProposalCardStatusInfo = styled.div`
+  font-size: 12px;
+  font-weight: 700;
+  padding: 8px;
+  border-radius: 8px;
+  background-color: ${(props) => props.theme.colors.utility1.main80};
+
+  &.pending {
+    color: ${(props) => props.theme.colors.utility1.main40};
+  }
+  &.passed {
+    color: ${(props) => props.theme.colors.utility3.success};
+  }
+  &.rejected {
+    color: ${(props) => props.theme.colors.utility3.highAttention};
+  }
+`;
+
+export const ProposalCardVoteButtons = styled.div``;
+// FIX THAT
+export const ProposalCardVoteButton = styled.button`
+  padding: 8px;
+  font-weight: 700;
+  cursor: pointer;
+  border-radius: ${(props) => props.theme.borderRadius.buttonBorderRadius};
+  border: none;
+  background-color: ${(props) => props.theme.colors.primary.main};
+  color: ${(props) => props.theme.colors.utility1.main};
+
+  &:disabled {
+    opacity: 50%;
+    cursor: initial;
+  }
+`;
+
+export const ProposalCardStatusContainer = styled.div`
+  display: flex;
+  flex-basis: auto;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+export const ProposalCardText = styled.span`
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
+export const ProposalCardId = styled.span`
+  font-weight: 700;
+  margin-right: 4px;
+`;
+
+export const ProposalCardVotes = styled.div<{ yes: number; no: number }>`
+  width: 32px;
+  height: 32px;
+  background-image: conic-gradient(
+    ${(props) => props.theme.colors.primary.main} 0,
+    ${(props) => props.theme.colors.primary.main} ${(p) => p.yes}%,
+    ${(props) => props.theme.colors.utility1.main80} 0,
+    ${(props) => props.theme.colors.utility1.main80} ${(p) => p.no}%
+  );
+  border-radius: 50%;
+`;
+
+export const ProposalCardInfoContainer = styled.div`
+  display: flex;
+  height: 40px;
+  gap: 4px;
+
+  & ${ProposalCardVotes} {
+    flex-shrink: 0;
+    align-self: center;
+  }
+
+  & ${ProposalCardText} {
+    flex-grow: 1;
+  }
+`;
diff --git a/apps/namada-interface/src/App/Governance/Governance.tsx b/apps/namada-interface/src/App/Governance/Governance.tsx
@@ -1,29 +1,81 @@
-import { useState } from "react";
-import { MainContainerNavigation } from "App/StakingAndGovernance/MainContainerNavigation";
-import { GovernanceContainer } from "./Governance.components";
 import { Button, ButtonVariant } from "@namada/components";
+import {
+  GovernanceContainer,
+  ProposalCard,
+  ProposalCardId,
+  ProposalCardInfoContainer,
+  ProposalCardStatusContainer,
+  ProposalCardStatusInfo,
+  ProposalCardText,
+  ProposalCardVoteButton,
+  ProposalCardVoteButtons,
+  ProposalCardVotes,
+  ProposalsContainer,
+} from "./Governance.components";
 
-const initialTitle = "Governance";
-export const Governance = (): JSX.Element => {
-  const [breadcrumb, setBreadcrumb] = useState([initialTitle]);
+const getStatus = (status: string, result: string): string => {
+  return status !== "done" ? status : result;
+};
 
+export const Governance = (): JSX.Element => {
   return (
     <GovernanceContainer>
-      <MainContainerNavigation
-        breadcrumbs={breadcrumb}
-        navigateBack={() => setBreadcrumb([initialTitle])}
-      />
-
-      {breadcrumb.length === 1 && (
-        <Button
-          variant={ButtonVariant.Contained}
-          onClick={() => {
-            setBreadcrumb([initialTitle, "Proposal #123"]);
-          }}
-        >
-          Navigate
-        </Button>
-      )}
+      <h1>Proposals</h1>
+      <ProposalsContainer>
+        {fakeProposals.map((proposal, i) => (
+          <ProposalCard key={i}>
+            <ProposalCardStatusContainer>
+              <ProposalCardStatusInfo
+                className={getStatus(proposal.status, proposal.result)}
+              >
+                {getStatus(proposal.status, proposal.result)}
+              </ProposalCardStatusInfo>
+              <ProposalCardVoteButtons>
+                <ProposalCardVoteButton>Vote</ProposalCardVoteButton>
+              </ProposalCardVoteButtons>
+            </ProposalCardStatusContainer>
+            <ProposalCardInfoContainer>
+              <ProposalCardText>
+                <ProposalCardId>{"#" + proposal.id}</ProposalCardId>
+                {proposal.type}
+              </ProposalCardText>
+              <ProposalCardVotes
+                title={`Yes: ${proposal.yesVotes}, No: ${proposal.noVotes}`}
+                yes={proposal.yesVotes}
+                no={proposal.noVotes}
+              />
+            </ProposalCardInfoContainer>
+          </ProposalCard>
+        ))}
+      </ProposalsContainer>
     </GovernanceContainer>
   );
 };
+
+type Proposal = {
+  id: string;
+  type: string;
+  author: string;
+  startEpoch: number;
+  endEpoch: number;
+  yesVotes: number;
+  noVotes: number;
+  status: string;
+  result: string;
+};
+
+const status = ["pending", "on-going", "done"];
+const result = ["pending", "passed", "rejected"];
+const fakeProposals: Proposal[] = [...Array(9).keys()].map((i) => ({
+  id: i + "",
+  type:
+    "Type asd adasd wadwdasd wdwwdwas dawdasd wdasdas dwadsada dwadsada wda dwadsadads" +
+    i,
+  author: "Author " + i,
+  startEpoch: i,
+  endEpoch: i + 1,
+  yesVotes: 40,
+  noVotes: 60,
+  status: status[Math.floor(Math.random() * status.length)],
+  result: result[Math.floor(Math.random() * result.length)],
+}));
diff --git a/apps/namada-interface/src/App/StakingAndGovernance/StakingAndGovernance.tsx b/apps/namada-interface/src/App/StakingAndGovernance/StakingAndGovernance.tsx
@@ -107,10 +107,6 @@ export const StakingAndGovernance = (): JSX.Element => {
             />
           }
         />
-        <Route
-          path={StakingAndGovernanceSubRoute.Governance}
-          element={<Governance />}
-        />
         <Route
           path={StakingAndGovernanceSubRoute.PublicGoodsFunding}
           element={<PublicGoodsFunding />}

diff --git a/apps/namada-interface/src/App/TopNavigation/topNavigation.tsx b/apps/namada-interface/src/App/TopNavigation/topNavigation.tsx
@@ -1,10 +1,6 @@
 import React, { useState, useContext } from "react";
 import { ThemeContext } from "styled-components";
-import {
-  useNavigate,
-  NavigateFunction,
-  Location,
-} from "react-router-dom";
+import { useNavigate, NavigateFunction, Location } from "react-router-dom";
 
 import { ColorMode } from "@namada/utils";
 import { chains } from "@namada/chains";
@@ -159,19 +155,6 @@ const SecondMenuRow = (props: SecondMenuRowProps): React.ReactElement => {
           >
             Staking
           </MenuItemForSecondRow>
-          <MenuItemForSecondRow
-            onClick={() => {
-              navigate(
-                `${TopLevelRoute.StakingAndGovernance}${StakingAndGovernanceSubRoute.Governance}`
-              );
-            }}
-            isSelected={
-              stakingAndGovernanceSubRoute ===
-              StakingAndGovernanceSubRoute.Governance
-            }
-          >
-            Governance
-          </MenuItemForSecondRow>
           <MenuItemForSecondRow
             onClick={() => {
               navigate(
@@ -380,14 +363,9 @@ function TopNavigation(props: TopNavigationProps): JSX.Element {
               <MenuItemSubComponent
                 onClick={() => {
                   setShowMenu(false);
-                  navigate(
-                    `${TopLevelRoute.StakingAndGovernance}${StakingAndGovernanceSubRoute.Governance}`
-                  );
+                  navigate(`${TopLevelRoute.Governance}`);
                 }}
-                isSelected={
-                  stakingAndGovernanceSubRoute ===
-                  StakingAndGovernanceSubRoute.Governance
-                }
+                isSelected={topLevelRoute === TopLevelRoute.Governance}
               >
                 Governance
               </MenuItemSubComponent>

diff --git a/apps/namada-interface/src/App/types.ts b/apps/namada-interface/src/App/types.ts
@@ -44,7 +44,6 @@ export enum StakingAndGovernanceSubRoute {
   Staking = "/staking",
   StakingOverview = "/staking-overview",
   ValidatorDetails = "/validator-details",
-  Governance = "/governance",
   PublicGoodsFunding = "/public-goods-funding",
 }