add web ui to the quicksilver repository (#551)

Co-authored-by: Joe Bowman <[email protected]>

web-ui/.eslintrc.json

@@ -0,0 +1,21 @@
+{
+  "extends": "next/core-web-vitals",
+  "plugins": ["import"],
+  "rules": {
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          ["builtin", "external"],
+          "internal",
+          ["parent", "sibling", "index"]
+        ],
+        "newlines-between": "always",
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ]
+  }
+}

web-ui/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

web-ui/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2
+}

web-ui/README.md

@@ -0,0 +1,76 @@
+This is a Cosmos App project bootstrapped with [`create-cosmos-app`](https://github.com/cosmology-tech/create-cosmos-app).
+
+## Getting Started
+
+First, install the packages and run the development server:
+
+```bash
+yarn && yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+## Learn More 
+
+### Chain Registry
+
+The npm package for the Official Cosmos chain registry. Get chain and token data for you application.
+
+* https://github.com/cosmology-tech/chain-registry
+
+### Cosmology Videos
+
+Checkout more videos for how to use various frontend tooling in the Cosmos!
+
+* https://cosmology.tech/learn
+
+### Cosmos Kit
+
+A wallet connector for the Cosmos ⚛️
+
+* https://github.com/cosmology-tech/cosmos-kit
+
+### Telescope
+
+A "babel for the Cosmos", Telescope is a TypeScript Transpiler for Cosmos Protobufs. Telescope is used to generate libraries for Cosmos blockchains. Simply point to your protobuffer files and create developer-friendly Typescript libraries for teams to build on your blockchain.
+
+* https://github.com/cosmology-tech/telescope
+
+🎥 [Checkout the Telescope video playlist](https://www.youtube.com/watch?v=n82MsLe82mk&list=PL-lMkVv7GZwyQaK6bp6kMdOS5mzosxytC) to learn how to use `telescope`!
+
+### CosmWasm TS Codegen
+
+The quickest and easiest way to interact with CosmWasm Contracts. @cosmwasm/ts-codegen converts your CosmWasm smart contracts into dev-friendly TypeScript classes so you can focus on shipping code.
+
+* https://github.com/CosmWasm/ts-codegen
+
+🎥 [Checkout the CosmWasm/ts-codegne video playlist](https://www.youtube.com/watch?v=D_A5V2PfNLA&list=PL-lMkVv7GZwz1KO3jANwr5W4MoziruXwK) to learn how to use `ts-codegen`!
+
+
+## Learn More about Next.js
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+
+## Credits
+
+🛠 Built by Cosmology — if you like our tools, please consider delegating to [our validator ⚛️](https://cosmology.tech/validator)
+
+Code built with the help of these related projects:
+
+* [@cosmwasm/ts-codegen](https://github.com/CosmWasm/ts-codegen) for generated CosmWasm contract Typescript classes
+* [@cosmology/telescope](https://github.com/cosmology-tech/telescope) a "babel for the Cosmos", Telescope is a TypeScript Transpiler for Cosmos Protobufs.
+* [chain-registry](https://github.com/cosmology-tech/chain-registry) Cosmos chain registry and chain info.
+* [cosmos-kit](https://github.com/cosmology-tech/cosmos-kit) A wallet connector for the Cosmos.

web-ui/components/Governance/ProposalCard.tsx

@@ -0,0 +1,179 @@
+import {
+  Box,
+  Center,
+  Flex,
+  Grid,
+  GridItem,
+  Spacer,
+  Text,
+  useColorMode,
+} from '@chakra-ui/react';
+import dayjs from 'dayjs';
+import { cosmos } from 'interchain-query';
+import { Proposal } from 'interchain-query/cosmos/gov/v1/gov';
+import React, { useMemo } from 'react';
+
+import { Votes } from '@/hooks';
+import { decodeUint8Arr, getPercentage } from '@/utils';
+
+import { StatusBadge, VotedBadge } from './common';
+
+enum VoteOption {
+  YES = 'YES',
+  NO = 'NO',
+  NWV = 'NWV',
+  ABSTAIN = 'ABSTAIN',
+}
+
+const ProposalStatus = cosmos.gov.v1beta1.ProposalStatus;
+
+export const VoteColor: {
+  [key in VoteOption]: string;
+} = {
+  [VoteOption.YES]: '#17a572',
+  [VoteOption.NO]: '#ce4256',
+  [VoteOption.NWV]: '#ff5b6d',
+  [VoteOption.ABSTAIN]: '#546198',
+};
+
+export const ProposalCard = ({
+  proposal,
+  handleClick,
+  votes,
+}: {
+  proposal: Proposal;
+  handleClick: () => void;
+  votes: Votes | undefined;
+}) => {
+  const { colorMode } = useColorMode();
+
+  const totalVotes = useMemo(() => {
+    if (!proposal.finalTallyResult) return 0;
+    const total = Object.values(proposal.finalTallyResult).reduce(
+      (prev, cur) => prev + Number(cur),
+      0,
+    );
+    return total ? total : 0;
+  }, [proposal]);
+
+  const isVoted =
+    votes && proposal.finalTallyResult && votes[proposal.id.toString()];
+
+  const uint8ArrayValue = proposal.messages[0].value;
+  const propinfo = decodeUint8Arr(uint8ArrayValue);
+
+  const getTitleFromDecoded = (decodedStr: string) => {
+    return decodedStr.slice(0, 250).match(/[A-Z][A-Za-z].*(?=\u0012)/)?.[0];
+  };
+
+  const title = getTitleFromDecoded(propinfo);
+
+  return (
+    <Grid
+      h="120px"
+      py={4}
+      templateColumns="repeat(13, 1fr)"
+      bgColor="rgba(255,255,255,0.1)"
+      backdropFilter="blur(30px)"
+      borderColor="gray.400"
+      borderRadius={10}
+      transition="all 0.2s linear"
+      _hover={{
+        backgroundColor: 'rgba(255,255,255,0.25)',
+        cursor: 'pointer',
+      }}
+      onClick={handleClick}
+    >
+      <GridItem colSpan={2}>
+        <Center color="white" w="100%" h="100%">
+          # {proposal.id ? proposal.id.toString().padStart(6, '0') : ''}
+        </Center>
+      </GridItem>
+      <GridItem colSpan={9} py={2}>
+        <Flex flexDirection="column" h="100%">
+          {/* Ts-ignore */}
+          <Flex gap={2} alignItems="center">
+            <Text color="white" fontSize="lg">
+              {title || ''}
+            </Text>
+            {isVoted && <VotedBadge />}
+          </Flex>
+          <Spacer />
+          <Flex flexDirection="column" h="44%">
+            <Flex alignItems="center" fontSize="sm">
+              <Text color="white">
+                {proposal.status ===
+                ProposalStatus.PROPOSAL_STATUS_DEPOSIT_PERIOD
+                  ? 'Deposit'
+                  : 'Voting'}
+                &nbsp;end time: &nbsp;
+              </Text>
+              <Text color="white" fontWeight="semibold">
+                {dayjs(
+                  proposal.status ===
+                    ProposalStatus.PROPOSAL_STATUS_DEPOSIT_PERIOD
+                    ? proposal.depositEndTime
+                    : proposal.votingEndTime,
+                ).format('YYYY-MM-DD hh:mm')}
+              </Text>
+            </Flex>
+            <Spacer />
+            {totalVotes ? (
+              <Flex gap="1px">
+                <Box
+                  w={getPercentage(
+                    proposal.finalTallyResult?.yesCount,
+                    totalVotes,
+                  )}
+                  h="3px"
+                  bgColor={VoteColor.YES}
+                />
+                <Box
+                  w={getPercentage(
+                    proposal.finalTallyResult?.noCount,
+                    totalVotes,
+                  )}
+                  h="3px"
+                  bgColor={VoteColor.NO}
+                />
+                <Box
+                  w={getPercentage(
+                    proposal.finalTallyResult?.noWithVetoCount,
+                    totalVotes,
+                  )}
+                  h="3px"
+                  bgColor={VoteColor.NWV}
+                />
+                <Box
+                  w={getPercentage(
+                    proposal.finalTallyResult?.abstainCount,
+                    totalVotes,
+                  )}
+                  h="3px"
+                  bgColor={VoteColor.ABSTAIN}
+                />
+              </Flex>
+            ) : (
+              <Box
+                w="100%"
+                h="3px"
+                bgColor={colorMode === 'light' ? 'gray.200' : 'gray.600'}
+              />
+            )}
+          </Flex>
+        </Flex>
+      </GridItem>
+      <GridItem colSpan={2}>
+        <Flex
+          w="100%"
+          h="100%"
+          alignItems="center"
+          px={4}
+          justifyContent="center"
+        >
+          <StatusBadge status={proposal.status} />
+        </Flex>
+      </GridItem>
+    </Grid>
+  );
+};