Merge pull request #1991 from galacticcouncil/revert-referenda

Add deprecated referenda

src/api/democracy.ts

@@ -64,6 +64,30 @@ export const useReferendums = (type?: "ongoing" | "finished") => {
   )
 }
 
+export const useDeprecatedReferendumInfo = (referendumIndex: string) => {
+  return useQuery(
+    QUERY_KEYS.deprecatedReferendumInfo(referendumIndex),
+    async () => {
+      const res = await fetch(
+        `https://hydration.subsquare.io/api/democracy/referendums/${referendumIndex}.json`,
+      )
+      if (!res.ok) return null
+
+      const json: Referendum = await res.json()
+
+      if (
+        json === null ||
+        json.referendumIndex === null ||
+        json.motionIndex === null ||
+        json.title === null
+      )
+        return null
+
+      return json
+    },
+  )
+}
+
 export const useReferendumInfo = (referendumIndex: string) => {
   return useQuery(
     QUERY_KEYS.referendumInfo(referendumIndex),

src/components/ReferendumCard/ReferendaDeprecated.tsx

@@ -0,0 +1,156 @@
+import { PalletDemocracyReferendumInfo } from "@polkadot/types/lookup"
+import { useDeprecatedReferendumInfo } from "api/democracy"
+import IconArrow from "assets/icons/IconArrow.svg?react"
+import GovernanceIcon from "assets/icons/GovernanceIcon.svg?react"
+import { Separator } from "components/Separator/Separator"
+import { Spacer } from "components/Spacer/Spacer"
+import { Text } from "components/Typography/Text/Text"
+import { useMemo } from "react"
+import { useTranslation } from "react-i18next"
+import { BN_0, BN_10, PARACHAIN_BLOCK_TIME } from "utils/constants"
+import { SContainer, SHeader, SVotedBage } from "./ReferendumCard.styled"
+import { Icon } from "components/Icon/Icon"
+import BN from "bignumber.js"
+import { useBestNumber } from "api/chain"
+import { customFormatDuration } from "utils/formatting"
+import { ReferendumCardProgress } from "./ReferendumCardProgress"
+import { ReferendumCardSkeleton } from "./ReferendumCardSkeleton"
+
+const REFERENDUM_LINK = import.meta.env.VITE_REFERENDUM_LINK as string
+
+type Props = {
+  id: string
+  referendum: PalletDemocracyReferendumInfo
+  type: "toast" | "staking"
+  voted: boolean
+}
+
+export const ReferendaDeprecated = ({ id, referendum, type, voted }: Props) => {
+  const { t } = useTranslation()
+
+  const info = useDeprecatedReferendumInfo(id)
+  const bestNumber = useBestNumber()
+
+  const votes = useMemo(() => {
+    if (!referendum.isOngoing)
+      return { ayes: BN_0, nays: BN_0, percAyes: BN_0, percNays: BN_0 }
+
+    const ayes = referendum.asOngoing.tally.ayes
+      .toBigNumber()
+      .div(BN_10.pow(12))
+    const nays = referendum.asOngoing.tally.nays
+      .toBigNumber()
+      .div(BN_10.pow(12))
+
+    const votesSum = ayes.plus(nays)
+
+    let percAyes = BN_0
+    let percNays = BN_0
+
+    if (!votesSum.isZero()) {
+      percAyes = ayes.div(votesSum).times(100)
+      percNays = nays.div(votesSum).times(100)
+    }
+
+    return { ayes, nays, percAyes, percNays }
+  }, [referendum])
+
+  const diff = BN(info?.data?.onchainData.meta.end ?? 0)
+    .minus(bestNumber.data?.parachainBlockNumber.toBigNumber() ?? 0)
+    .times(PARACHAIN_BLOCK_TIME)
+    .toNumber()
+  const endDate = customFormatDuration({ end: diff * 1000 })
+
+  return info.isLoading || !info.data ? (
+    <ReferendumCardSkeleton type={type} />
+  ) : (
+    <SContainer
+      type={type}
+      href={`${REFERENDUM_LINK}/${info.data.referendumIndex}`}
+      target="_blank"
+      rel="noreferrer"
+    >
+      <SHeader>
+        <div sx={{ flex: "row", align: "center", gap: 8 }}>
+          <Text color="brightBlue200" fs={14} fw={500}>
+            #{info.data.referendumIndex}
+          </Text>
+          <Text color="brightBlue200" fs={12} fw={500}>
+            {"//"}
+          </Text>
+          <Text color="basic500" fs={13} fw={500}>
+            {endDate &&
+              t(`duration.${endDate.isPositive ? "left" : "ago"}`, {
+                duration: endDate.duration,
+              })}
+          </Text>
+        </div>
+
+        <div sx={{ flex: "row", gap: 20, align: "center" }}>
+          {voted && (
+            <SVotedBage>
+              {t("toast.sidebar.referendums.voted")}
+              <Icon
+                size={11}
+                sx={{ color: "basic900" }}
+                icon={<GovernanceIcon />}
+              />
+            </SVotedBage>
+          )}
+          <Icon sx={{ color: "brightBlue300" }} icon={<IconArrow />} />
+        </div>
+      </SHeader>
+
+      <Separator color="primaryA15Blue" opacity={0.35} sx={{ my: 16 }} />
+
+      <Text color="white" fw={500}>
+        {info.data.title}
+      </Text>
+
+      <Spacer size={20} />
+
+      <ReferendumCardProgress
+        percAyes={votes.percAyes}
+        percNays={votes.percNays}
+      />
+
+      <Spacer size={4} />
+
+      <div sx={{ flex: "row", justify: "space-between" }}>
+        <Text
+          color={votes.percAyes.eq(0) ? "darkBlue300" : "white"}
+          fs={14}
+          fw={600}
+          tTransform="uppercase"
+        >
+          {t("toast.sidebar.referendums.aye")}
+        </Text>
+        <Text
+          color={votes.percNays.eq(0) ? "darkBlue300" : "white"}
+          fs={14}
+          fw={600}
+          tTransform="uppercase"
+        >
+          {t("toast.sidebar.referendums.nay")}
+        </Text>
+      </div>
+
+      <Spacer size={4} />
+
+      <div sx={{ flex: "row", justify: "space-between" }}>
+        <Text color="darkBlue300" fs={11} fw={500}>
+          {t("toast.sidebar.referendums.value", {
+            value: votes.ayes,
+            percent: votes.percAyes,
+          })}
+        </Text>
+        <Text color="darkBlue300" fs={11} fw={500}>
+          {t("toast.sidebar.referendums.value", {
+            value: votes.nays,
+            percent: votes.percNays,
+          })}
+        </Text>
+      </div>
+    </SContainer>
+  )
+}

src/components/ReferendumCard/ReferendumCard.styled.ts

@@ -2,6 +2,56 @@ import { css } from "@emotion/react"
 import styled from "@emotion/styled"
 import { theme } from "theme"
 
+export const SContainer = styled.a<{ type: "staking" | "toast" }>`
+  padding: 16px;
+  ${({ type }) =>
+    type === "toast"
+      ? css`
+          border-radius: ${theme.borderRadius.default}px;
+        `
+      : css`
+          border-radius: ${theme.borderRadius.medium}px;
+
+          position: relative;
+
+          :before {
+            content: "";
+            position: absolute;
+            inset: 0;
+
+            border-radius: ${theme.borderRadius.medium}px;
+            padding: 1px; // a width of the border
+
+            background: linear-gradient(
+              180deg,
+              rgba(152, 176, 214, 0.27) 0%,
+              rgba(163, 177, 199, 0.15) 66.67%,
+              rgba(158, 167, 180, 0.2) 100%
+            );
+            -webkit-mask:
+              linear-gradient(#fff 0 0) content-box,
+              linear-gradient(#fff 0 0);
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+            pointer-events: none;
+          }
+        `}
+
+  background: ${theme.colors.darkBlue700};
+
+  transition: background ${theme.transitions.default};
+
+  cursor: pointer;
+
+  &:hover {
+    background: ${theme.colors.darkBlue401};
+  }
+
+  &:active {
+    background: ${theme.colors.darkBlue400};
+  }
+`
+
 export const SHeader = styled.div`
   display: flex;
   align-items: center;

src/components/ReferendumCard/ReferendumCardProgress.tsx

@@ -0,0 +1,54 @@
+import { LinearProgress } from "components/Progress"
+import BN from "bignumber.js"
+import { theme } from "theme"
+
+export type ReferendumCardProgressProps = {
+  percAyes: BN
+  percNays: BN
+}
+
+export const ReferendumCardProgress: React.FC<ReferendumCardProgressProps> = ({
+  percAyes,
+  percNays,
+}) => {
+  const isNoVotes = percAyes.eq(0) && percNays.eq(0)
+  return (
+    <div sx={{ flex: "row", gap: 8 }}>
+      {isNoVotes ? (
+        <LinearProgress
+          size="small"
+          withoutLabel
+          percent={100}
+          colorCustom={`rgba(${theme.rgbColors.darkBlue300}, 0.5)`}
+        />
+      ) : (
+        <>
+          <LinearProgress
+            size="small"
+            withoutLabel
+            sx={{
+              width: `${percAyes.lt(2) ? 2 : percAyes.toNumber()}%`,
+            }}
+            percent={100}
+            colorCustom={`linear-gradient(
+                270deg,
+                ${theme.colors.green600} 50%,
+                transparent 100%)`}
+          />
+          <LinearProgress
+            size="small"
+            withoutLabel
+            sx={{
+              width: `${percNays.lt(2) ? 2 : percNays.toNumber()}%`,
+            }}
+            percent={100}
+            colorCustom={`linear-gradient(
+                90deg,
+                ${theme.colors.pink700} 50%,
+                transparent 100%)`}
+          />
+        </>
+      )}
+    </div>
+  )
+}

src/components/ReferendumCard/ReferendumCardSkeleton.tsx

@@ -0,0 +1,59 @@
+import Skeleton from "react-loading-skeleton"
+import IconArrow from "assets/icons/IconArrow.svg?react"
+import { Separator } from "components/Separator/Separator"
+import { SContainer, SHeader } from "./ReferendumCard.styled"
+import { Spacer } from "components/Spacer/Spacer"
+import { Text } from "components/Typography/Text/Text"
+import { useTranslation } from "react-i18next"
+import { Icon } from "components/Icon/Icon"
+
+export const ReferendumCardSkeleton = ({
+  type,
+}: {
+  type: "toast" | "staking"
+}) => {
+  const { t } = useTranslation()
+
+  const isToastCard = type === "toast"
+
+  return (
+    <SContainer type={type}>
+      <SHeader>
+        <Skeleton height={13} width={isToastCard ? 100 : 164} />
+        <Icon sx={{ color: "brightBlue300" }} icon={<IconArrow />} />
+      </SHeader>
+
+      <Separator color="primaryA15Blue" opacity={0.35} sx={{ my: 16 }} />
+
+      <Skeleton height={23} width="100%" />
+
+      <Spacer size={20} />
+
+      <div
+        sx={{ flex: "row", gap: 8, justify: "space-between" }}
+        css={{ "& > span": { width: "100%" } }}
+      >
+        <Skeleton height={4} />
+        <Skeleton height={4} />
+      </div>
+
+      <Spacer size={4} />
+
+      <div sx={{ flex: "row", justify: "space-between" }}>
+        <Text color="white" fs={14} fw={600}>
+          {t("toast.sidebar.referendums.aye")}
+        </Text>
+        <Text color="white" fs={14} fw={600}>
+          {t("toast.sidebar.referendums.nay")}
+        </Text>
+      </div>
+
+      <Spacer size={4} />
+
+      <div sx={{ flex: "row", justify: "space-between" }}>
+        <Skeleton height={10} width={100} />
+        <Skeleton height={10} width={100} />
+      </div>
+    </SContainer>
+  )
+}

src/components/Toast/sidebar/referendums/ToastSidebarReferendums.tsx

@@ -2,17 +2,21 @@ import {
   TReferenda,
   useOpenGovReferendas,
   useReferendaTracks,
+  useReferendums,
 } from "api/democracy"
 import { OpenGovReferenda } from "components/ReferendumCard/Referenda"
 import { useHDXSupplyFromSubscan } from "api/staking"
 import { ToastSidebarGroup } from "components/Toast/sidebar/group/ToastSidebarGroup"
 import { useTranslation } from "react-i18next"
+import { ReferendaDeprecated } from "components/ReferendumCard/ReferendaDeprecated"
 
 export const ToastSidebarReferendums = () => {
   const { t } = useTranslation()
   const openGovQuery = useOpenGovReferendas()
   const tracks = useReferendaTracks()
   const { data: hdxSupply } = useHDXSupplyFromSubscan()
+  const { data: referendums = [] } = useReferendums("ongoing")
+  const referendum = referendums.find((referendum) => referendum.id === "203")
 
   return (
     <ToastSidebarGroup
@@ -37,6 +41,15 @@ export const ToastSidebarReferendums = () => {
               )
             })
           : null}
+
+        {referendum && (
+          <ReferendaDeprecated
+            id="203"
+            referendum={referendum.referendum}
+            type="toast"
+            voted={false}
+          />
+        )}
       </div>
     </ToastSidebarGroup>
   )