Gov ui tweaks (#433)

* ref: fixes * feat: make toasts closable * fix: sorting * feat: added x button * test: fix tests * ci: enabling it agai * fix: typecheck * fix: remove from storage issue * feat: selected badge * fix: typecheck * feat: using new view function * ref: typecheck * feat: validating urls * feat: remove button behavior * ref: linting * feat: implemented API
Synthetixio · Sep 4, 2024 · 22c5f4a · 22c5f4a
1 parent 447366a
commit 22c5f4a
Show file tree

Hide file tree

Showing 47 changed files with 4,172 additions and 394 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -120,56 +120,56 @@ jobs:
       - run: git diff --name-only --exit-code
       - run: yarn typecheck
 
-  # governance-e2e:
-  #   working_directory: /tmp/app
-  #   docker:
-  #     - image: cypress/included:<< pipeline.parameters.cypress-version >>
-  #   resource_class: large
-  #   environment:
-  #     NODE_ENV: test
-  #     TESTNET: 1
-  #   steps:
-  #     - checkout
-  #     - install-foundry
-  #     - yarn-install
-
-  #     - run:
-  #         name: Run server localhost:3000
-  #         working_directory: /tmp/app/governance/ui
-  #         command: CI=true yarn start
-  #         background: true
-
-  #     - run:
-  #         name: Run anvil localhost:8545
-  #         command: 'anvil --fork-url https://testnet.snaxchain.io --fork-block-number 296528'
-  #         background: true
-
-  #     - run:
-  #         name: Wait for server localhost:3000
-  #         command: wget --retry-connrefused --waitretry=20 --read-timeout=20 --timeout=15 -t 10 http://localhost:3000
-
-  #     - run:
-  #         name: Wait for anvil localhost:8545
-  #         command: wget -q -O - --retry-connrefused --waitretry=20 --read-timeout=20 --timeout=15 -t 10 --post-data='{"method":"eth_chainId","params":[],"id":1,"jsonrpc":"2.0"}' --header='Content-Type:application/json' http://localhost:8545
-
-  #     - run:
-  #         working_directory: /tmp/app/governance/cypress
-  #         command: cypress run --e2e --browser chrome
-
-  #     - store_test_results:
-  #         path: 'governance/cypress/cypress/reports'
-
-  #     - store_artifacts:
-  #         path: 'governance/cypress/.nyc_output'
-  #         destination: 'coverage'
-
-  #     - store_artifacts:
-  #         path: 'governance/cypress/cypress/screenshots'
-  #         destination: 'screenshots'
-
-  #     - store_artifacts:
-  #         path: 'governance/cypress/cypress/videos'
-  #         destination: 'videos'
+  governance-e2e:
+    working_directory: /tmp/app
+    docker:
+      - image: cypress/included:<< pipeline.parameters.cypress-version >>
+    resource_class: large
+    environment:
+      NODE_ENV: test
+      TESTNET: 1
+    steps:
+      - checkout
+      - install-foundry
+      - yarn-install
+
+      - run:
+          name: Run server localhost:3000
+          working_directory: /tmp/app/governance/ui
+          command: CI=true yarn start
+          background: true
+
+      - run:
+          name: Run anvil localhost:8545
+          command: 'anvil --fork-url https://testnet.snaxchain.io --fork-block-number 296528'
+          background: true
+
+      - run:
+          name: Wait for server localhost:3000
+          command: wget --retry-connrefused --waitretry=20 --read-timeout=20 --timeout=15 -t 10 http://localhost:3000
+
+      - run:
+          name: Wait for anvil localhost:8545
+          command: wget -q -O - --retry-connrefused --waitretry=20 --read-timeout=20 --timeout=15 -t 10 --post-data='{"method":"eth_chainId","params":[],"id":1,"jsonrpc":"2.0"}' --header='Content-Type:application/json' http://localhost:8545
+
+      - run:
+          working_directory: /tmp/app/governance/cypress
+          command: cypress run --e2e --browser chrome
+
+      - store_test_results:
+          path: 'governance/cypress/cypress/reports'
+
+      - store_artifacts:
+          path: 'governance/cypress/.nyc_output'
+          destination: 'coverage'
+
+      - store_artifacts:
+          path: 'governance/cypress/cypress/screenshots'
+          destination: 'screenshots'
+
+      - store_artifacts:
+          path: 'governance/cypress/cypress/videos'
+          destination: 'videos'
 
   liquidity-e2e:
     parameters:
@@ -307,8 +307,8 @@ workflows:
       - typecheck
       - tests
       - liquidity-cy
-      # - governance-e2e:
-      #     name: governance-e2e-snax-testnet
+      - governance-e2e:
+          name: governance-e2e-snax-testnet
       - liquidity-e2e:
           name: liquidity-e2e-base-mainnet
           chainId: 8453
@@ -323,7 +323,7 @@ workflows:
           requires: [
               tests,
               liquidity-cy,
-              # governance-e2e-snax-testnet,
+              governance-e2e-snax-testnet,
               liquidity-e2e-base-mainnet,
               #liquidity-e2e-sepolia,
             ]

diff --git a/governance/cypress/cypress/e2e/Councils - Administration.e2e.js b/governance/cypress/cypress/e2e/Councils - Administration.e2e.js
@@ -39,10 +39,10 @@ it('Councils - Administration', () => {
   cy.get('[data-cy="sort-arrow-up"]').should('exist');
   cy.get('[data-cy="sort-arrow-up"]').click();
   cy.get('[data-cy="sort-arrow-down"]').should('exist');
-  cy.viewport(600, 500);
+  cy.viewport(400, 800);
   cy.visit('#/councils');
   cy.get('[data-cy="my-votes-summary-text"]').should('have.css', 'font-size', '14px');
-  cy.get('[data-cy="council-select-mobile"]').should('have.css', 'font-size', '14px');
+  cy.get('[data-cy="council-select-mobile"]').should('have.css', 'font-size', '12px');
   cy.get('[data-cy="menu-button-flex-council-select"]').should('have.css', 'height', '48px');
   cy.get('[data-cy="my-votes-button"]').should('have.css', 'height', '48px');
 });
diff --git a/governance/cypress/cypress/e2e/Councils - Voting.e2e.js b/governance/cypress/cypress/e2e/Councils - Voting.e2e.js
@@ -38,6 +38,7 @@ it('Councils - Administration', () => {
   cy.get(
     '[data-cy="user-blockies-council-tabs-0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266"]'
   ).should('exist');
+  cy.get('[data-cy="selected-badge-my-row"]').should('exist');
   cy.wait(3000);
   cy.get('[data-cy="my-votes-voting-power"]').contains('30.00');
   cy.get('[data-cy="cast-my-vote-button"]').click();
@@ -50,10 +51,19 @@ it('Councils - Administration', () => {
   cy.get(
     '[data-cy="user-blockies-council-tabs-0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266"]'
   ).should('exist');
+  cy.visit('#/councils/spartan');
+  cy.get('[data-cy="your-vote-badge-table"]').should('exist');
+  cy.visit('#/my-votes');
   cy.wait(3000);
   cy.get('[data-cy="remove-vote-button-spartan"]').click();
+  cy.get('[data-cy="selected-badge-my-row"]').should('exist');
   cy.get('[data-cy="cast-my-vote-button"]').click();
   cy.get('[data-cy="cast-vote-anyway-button"]').click();
   cy.wait(3000);
   cy.get('[data-cy="my-votes-total-votes"]').contains('0/3');
+  cy.reload({ cache: false });
+  cy.get(
+    '[data-cy="user-blockies-council-tabs-0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266"]'
+  ).should('not.exist');
+  cy.get('[data-cy="my-votes-total-votes"]').contains('0/3');
 });
diff --git a/governance/cypress/cypress/tasks/changePeriod.js b/governance/cypress/cypress/tasks/changePeriod.js
@@ -13,11 +13,13 @@ export async function changePeriod({ council, period }) {
     '0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80',
     provider
   );
+  const electionId = await proxy.spartan.connect(signer).getEpochIndex();
+
   if (period === 'admin') {
     await proxy[council]
       .connect(signer)
       .Epoch_setEpochDates(
-        0,
+        electionId,
         block.timestamp,
         block.timestamp + 10000,
         block.timestamp + 20000,
@@ -27,7 +29,7 @@ export async function changePeriod({ council, period }) {
     await proxy[council]
       .connect(signer)
       .Epoch_setEpochDates(
-        0,
+        electionId,
         block.timestamp - 10,
         block.timestamp,
         block.timestamp + 10000,
@@ -37,7 +39,7 @@ export async function changePeriod({ council, period }) {
     await proxy[council]
       .connect(signer)
       .Epoch_setEpochDates(
-        0,
+        electionId,
         block.timestamp - 200,
         block.timestamp - 100,
         block.timestamp,
@@ -47,7 +49,7 @@ export async function changePeriod({ council, period }) {
     await proxy[council]
       .connect(signer)
       .Epoch_setEpochDates(
-        0,
+        electionId,
         block.timestamp - 10,
         block.timestamp - 5,
         block.timestamp - 1,

diff --git a/governance/cypress/cypress/tasks/prepareVotingPower.js b/governance/cypress/cypress/tasks/prepareVotingPower.js
@@ -1,32 +1,37 @@
-import { ethers, Wallet } from 'ethers';
-import { getCouncilContract, SnapshotRecordContract } from '../../../ui/src/utils/contracts';
+import { Contract, ethers, Wallet } from 'ethers';
+import { SnapshotRecordContract } from '../../../ui/src/utils/contracts';
+import { electionModuleABITest } from '../../../ui/src/utils/abi';
 
 export async function prepareVotingPower({ council }) {
   const provider = new ethers.providers.JsonRpcProvider('http://127.0.0.1:8545');
-  const proxy = getCouncilContract(council);
+  const proxy = {
+    spartan: new Contract('0xBC85F11300A8EF619592fD678418Ec4eF26FBdFD', electionModuleABITest),
+    ambassador: new Contract('0xCdbEf5753cE3CEbF361e143117e345ADd7498F80', electionModuleABITest),
+    treasury: new Contract('0xe3aB2C6F1C9E46Fb53eD6b297c6fff68e935B161', electionModuleABITest),
+  };
+  const block = await provider.getBlock('latest');
   const signer = new Wallet(
     '0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80',
     provider
   );
-  const block = await provider.getBlock('latest');
-  await proxy
+  const electionId = await proxy.spartan.connect(signer).getEpochIndex();
+  await proxy[council]
     .connect(signer)
     .Epoch_setEpochDates(
-      0,
+      electionId,
       block.timestamp - 200,
       block.timestamp - 100,
       block.timestamp,
       block.timestamp + 10000
     );
 
-  // let id = '';
-  // try {
-  //   id = await proxy
-  //     .connect(signer)
-  //     .takeVotePowerSnapshot(SnapshotRecordContract(2192, council)?.address);
-  // } catch (error) {
-  //   console.info('takeVotePowerSnapshot failed');
-  // }
+  try {
+    await proxy[council]
+      .connect(signer)
+      .takeVotePowerSnapshot(SnapshotRecordContract(13001, council)?.address);
+  } catch (error) {
+    console.info('takeVotePowerSnapshot failed');
+  }
   await SnapshotRecordContract(13001, council)
     .connect(signer)
     .setBalanceOfOnPeriod(await signer.getAddress(), 100, 1);

diff --git a/governance/ui/.env.example b/governance/ui/.env.example
@@ -1,6 +1,3 @@
 WC_PROJECT_ID=5075a2da602e17eec34aa77b40b321be
 BOARDROOM_KEY=d9abe7a1ab45ace58e6bd91bb9771586
-DEV=false
-DEV_RPC_MOTHERSHIP=http://127.0.0.1:19000
 CI=false
-CI_RPC_MOTHERSHIP=http://127.0.0.1:8545
diff --git a/governance/ui/src/components/CouncilInformation/CouncilInformation.tsx b/governance/ui/src/components/CouncilInformation/CouncilInformation.tsx
@@ -1,4 +1,4 @@
-import { Flex, Heading, Icon, Text } from '@chakra-ui/react';
+import { Button, Flex, Heading, Icon, Text } from '@chakra-ui/react';
 import councils, { CouncilSlugs } from '../../utils/councils';
 import { CouncilImage } from '../CouncilImage';
 import { Link } from 'react-router-dom';
@@ -57,16 +57,7 @@ export default function CouncilInformation({ activeCouncil }: { activeCouncil: C
             Stipends: {council?.stipends}/month
           </Heading>
           <Link to={council?.docLink || ''} target="_blank" rel="noopener noreferrer">
-            <Heading
-              fontSize="xs"
-              lineHeight="1rem"
-              border="1px solid"
-              borderColor="gray.900"
-              rounded="base"
-              px="2"
-              py="1"
-              cursor="pointer"
-            >
+            <Button variant="outline" colorScheme="gray" size="xs">
               Learn more{' '}
               <Icon width="12px" height="12px" viewBox="0 0 12 12" fill="none">
                 <g clipPath="url(#clip0_7624_75578)">
@@ -81,7 +72,7 @@ export default function CouncilInformation({ activeCouncil }: { activeCouncil: C
                   </clipPath>
                 </defs>
               </Icon>
-            </Heading>
+            </Button>
           </Link>
         </Flex>
       </Flex>

diff --git a/governance/ui/src/components/CouncilMembers/CouncilMembers.tsx b/governance/ui/src/components/CouncilMembers/CouncilMembers.tsx
@@ -2,12 +2,10 @@ import {
   Divider,
   Flex,
   Heading,
-  Skeleton,
   Table,
   TableContainer,
   Tag,
   Tbody,
-  Td,
   Text,
   Th,
   Thead,
@@ -21,6 +19,7 @@ import { useMemo, useState } from 'react';
 import { ArrowUpDownIcon } from '@chakra-ui/icons';
 import SortArrows from '../SortArrows/SortArrows';
 import { useGetCouncilMembers, useGetUserDetailsQuery } from '../../queries';
+import TableLoading from '../TableLoading/TableLoading';
 
 export default function CouncilMembers({ activeCouncil }: { activeCouncil: CouncilSlugs }) {
   const [sortConfig, setSortConfig] = useState<[boolean, string]>([false, 'start']);
@@ -163,36 +162,7 @@ export default function CouncilMembers({ activeCouncil }: { activeCouncil: Counc
           </Thead>
           <Tbody>
             {userDetailsLoading || !councilMemberDetails ? (
-              <>
-                <Tr>
-                  <Td>
-                    <Skeleton h={6} w={6} />
-                  </Td>
-                  <Td>
-                    <Skeleton h={6} w="180px" />
-                  </Td>
-                  <Td>
-                    <Skeleton h={6} w={10} />
-                  </Td>
-                  <Td>
-                    <Skeleton h={6} w={12} />
-                  </Td>
-                </Tr>
-                <Tr>
-                  <Td>
-                    <Skeleton h={6} w={6} />
-                  </Td>
-                  <Td>
-                    <Skeleton h={6} w="180px" />
-                  </Td>
-                  <Td>
-                    <Skeleton h={6} w={10} />
-                  </Td>
-                  <Td>
-                    <Skeleton h={6} w={12} />
-                  </Td>
-                </Tr>
-              </>
+              <TableLoading />
             ) : (
               !!sortedNominees?.length &&
               sortedNominees.map((councilNominee, index) => {