Enable new application page for kusama

site/src/components/TreasurySpendsFilter/index.jsx

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { StatusSelect, FormWrapper, Divider } from "../../components/Filter";
 import Range, { RangeTypes } from "../../components/Filter/Range";
 import Select from "../../components/Select";
-import { treasurySpendsAssetsFilterOptions } from "../../constants";
+import { useTreasurySpendAssetsFilterOptions } from "../../hooks/useTreasurySpendsAssetsFilterOptions";
 
 const AssetsSelect = styled(Select)`
   width: 160px;
@@ -23,6 +23,9 @@ export default function TreasurySpendsFilter({
   setMax,
   statusMap,
 }) {
+  const treasurySpendAssetsFilterOptions =
+    useTreasurySpendAssetsFilterOptions();
+
   const statusOptions = [
     { key: "all", value: "-1", text: "All status" },
     ...Array.from(new Set(Object.values(statusMap))).map((key) => ({
@@ -49,7 +52,7 @@ export default function TreasurySpendsFilter({
       <AssetsSelect
         name="assets"
         fluid
-        options={treasurySpendsAssetsFilterOptions}
+        options={treasurySpendAssetsFilterOptions}
         value={asset}
         onChange={(_, { value }) => {
           setAsset(value);

site/src/constants/index.js

@@ -100,14 +100,19 @@ export const treasurySpendStatusMap = {
   Voided: "Voided",
 };
 
-export const treasurySpendsAssetsFilterOptions = [
+export const polkadotTreasurySpendsAssetsFilterOptions = [
   { key: "all", value: "-1", text: "All assets" },
-  { key: "dot", value: "dot", text: "DOT", asset: "native" },
+  { key: "native", value: "native", text: "DOT", asset: "native" },
   { key: "usdc", value: "usdc", text: USDC.name, asset: USDC.symbol },
   { key: "usdt", value: "usdt", text: USDt.name, asset: USDt.symbol },
   { key: "myth", value: "myth", text: MYTH.name, asset: MYTH.symbol },
 ];
 
+export const kusamaTreasurySpendsAssetsFilterOptions = [
+  { key: "all", value: "-1", text: "All assets" },
+  { key: "native", value: "native", text: "KSM", asset: "native" },
+];
+
 export const TreasuryAccount =
   "F3opxRbN5ZbjJNU511Kj2TLuzFcDq9BGduA9TgiECafpg29";
 

site/src/hooks/useTreasurySpendsAssetsFilterOptions.js

@@ -0,0 +1,13 @@
+import { useSelector } from "react-redux";
+import { chainSelector } from "../store/reducers/chainSlice";
+import {
+  polkadotTreasurySpendsAssetsFilterOptions,
+  kusamaTreasurySpendsAssetsFilterOptions,
+} from "../constants";
+
+export function useTreasurySpendAssetsFilterOptions() {
+  const chain = useSelector(chainSelector);
+  return chain === "polkadot"
+    ? polkadotTreasurySpendsAssetsFilterOptions
+    : kusamaTreasurySpendsAssetsFilterOptions;
+}

site/src/pages/Header/ReferendaMenu.jsx

@@ -4,7 +4,7 @@ import { Label, Menu } from "semantic-ui-react";
 import { useSelector } from "react-redux";
 import { totalOpenGovApplicationCountSelector } from "../../store/reducers/overviewSlice";
 import { ReactComponent as ApplicationSVG } from "./applications.svg";
-import { isPolkadot } from "../../utils/chains";
+import { isKusama, isPolkadot } from "../../utils/chains";
 import useFetchReferendumCount from "../../hooks/applications/polkadot/useFetchReferendumCount";
 
 const Divider = styled.div`
@@ -35,7 +35,7 @@ function PolkadotReferendaMenu() {
 
 function ReferendaMenu() {
   const applicationCount = useSelector(totalOpenGovApplicationCountSelector);
-  if (isPolkadot) {
+  if (isPolkadot || isKusama) {
     return <PolkadotReferendaMenu />;
   }
 

site/src/pages/Overview/BeneficiaryTable.jsx

@@ -13,7 +13,6 @@ import { NavLink } from "react-router-dom";
 import TextMinor from "../../components/TextMinor";
 import GrayImage from "../../components/GrayImage";
 import { USER_ROLES } from "../../constants";
-import { chainSymbolSelector } from "../../store/reducers/chainSlice";
 
 export const CardWrapper = styled(Card)`
   overflow-x: hidden;
@@ -65,7 +64,6 @@ export const TableCell = styled(Table.Cell)`
 `;
 
 const BeneficiaryTable = () => {
-  const symbol = useSelector(chainSymbolSelector)?.toLowerCase();
   const overview = useSelector(overviewSelector);
   const data = overview.bestProposalBeneficiaries || [];
 

site/src/pages/Referenda/index.jsx

@@ -1,13 +1,13 @@
 import styled from "styled-components";
 import ReferendaTable from "./ReferendaTable";
 import Summary from "./Summary";
-import { isPolkadot } from "../../utils/chains";
+import { isKusama, isPolkadot } from "../../utils/chains";
 import PolkadotReferenda from "./polkadot";
 
 const Wrapper = styled.div``;
 
 export default function Referenda() {
-  if (isPolkadot) {
+  if (isPolkadot || isKusama) {
     return <PolkadotReferenda />;
   }
 

site/src/pages/Referenda/polkadot/table/columns.jsx

@@ -8,6 +8,8 @@ import TreasurySpendValueDisplay from "../../../../components/treasurySpendValue
 import styled from "styled-components";
 import PairTextVertical from "../../../../components/PairTextVertical";
 import startCase from "lodash.startcase";
+import { getChainSettings } from "../../../../utils/chains";
+import { toPrecision } from "../../../../utils";
 
 const Wrapper = styled.div`
   width: 112px;
@@ -88,6 +90,19 @@ const Columns = ({
           </div>
         );
       }
+
+      if (item?.onchainData?.treasuryInfo) {
+        const { decimals, symbol } = getChainSettings(chain);
+        const { amount } = item.onchainData.treasuryInfo;
+        return (
+          <TreasurySpendValueDisplay
+            isNative={true}
+            value={toPrecision(amount, decimals, false)}
+            symbol={symbol}
+          />
+        );
+      }
+
       return <Wrapper>-</Wrapper>;
     },
   };

site/src/pages/Referenda/polkadot/table/filter.jsx

@@ -4,9 +4,9 @@ import {
   StatusSelector,
 } from "../../../../components/OpenGovFilter";
 import Select from "../../../../components/Select";
-import { treasurySpendsAssetsFilterOptions } from "../../../../constants";
 import styled from "styled-components";
 import { usePolkadotApplicationsTrackOptions } from "../../../../context/PolkadotApplications";
+import { useTreasurySpendAssetsFilterOptions } from "../../../../hooks/useTreasurySpendsAssetsFilterOptions";
 
 const AssetsSelect = styled(Select)`
   width: 160px;
@@ -49,6 +49,8 @@ function TrackSelector({ track, setTrack }) {
 }
 
 function AssetsSelector({ assets, setAssets }) {
+  const treasurySpendsAssetsFilterOptions =
+    useTreasurySpendAssetsFilterOptions();
   return (
     <AssetsSelect
       name="assets"

site/src/pages/Referenda/polkadot/table/header.jsx

@@ -8,6 +8,8 @@ import useReferendumsProcess from "../../../../hooks/applications/polkadot/useRe
 import IconMask from "../../../../components/Icon/Mask";
 import ExternalLink from "../../../../components/ExternalLink";
 import TextMinor from "../../../../components/TextMinor";
+import { useSelector } from "react-redux";
+import { chainSelector } from "../../../../store/reducers/chainSlice";
 
 const HeaderWrapper = styled.div`
   padding: 24px;
@@ -60,6 +62,7 @@ const Divider = styled.div`
 `;
 
 export default function TableHeader() {
+  const chain = useSelector(chainSelector);
   const { voting, passing, isLoading } = useReferendumsProcess();
   if (isLoading) {
     return null;
@@ -88,7 +91,7 @@ export default function TableHeader() {
           </Flex>
         ))}
         <Divider />
-        <ExternalLink href={`https://polkadot.subsquare.io/referenda`}>
+        <ExternalLink href={`https://${chain}.subsquare.io/referenda`}>
           <LinkButton>
             View All
             <IconMask

site/src/pages/Referenda/polkadot/table/index.jsx

@@ -7,7 +7,6 @@ import { useSelector } from "react-redux";
 import { chainSelector } from "../../../../store/reducers/chainSlice";
 import { polkadotOpenGovReferendumStatusMap } from "../../../../constants";
 import Columns from "./columns";
-import { useHistory } from "react-router";
 import useSort from "../../../../hooks/useSort";
 import useListFilter from "../../../../hooks/applications/polkadot/useFilter";
 import { useQuery } from "../../../../utils/hooks";
@@ -35,7 +34,6 @@ const CardWrapper = styled(Card)`
 `;
 
 export default function ReferendaTable() {
-  const history = useHistory();
   const chain = useSelector(chainSelector);
   const query = useQuery();
   const sort = query.get("sort");
@@ -86,6 +84,10 @@ export default function ReferendaTable() {
       const matchesAssets = (() => {
         if (filterAssets === "-1") return true;
 
+        if (!Array.isArray(item?.allSpends) && filterAssets === "native") {
+          return true;
+        }
+
         if (!Array.isArray(item?.allSpends)) return false;
 
         return item.allSpends.some((asset) => {

site/src/store/reducers/treasurySpendsSlice.js

@@ -2,7 +2,10 @@ import { createSlice } from "@reduxjs/toolkit";
 import api from "../../services/scanApi";
 import { RangeTypes } from "../../components/Filter/Range";
 import { find } from "lodash-es";
-import { treasurySpendsAssetsFilterOptions } from "../../constants";
+import {
+  kusamaTreasurySpendsAssetsFilterOptions,
+  polkadotTreasurySpendsAssetsFilterOptions,
+} from "../../constants";
 
 const name = "treasurySpends";
 
@@ -45,9 +48,18 @@ export const fetchTreasurySpendsList = (
   filterData = {},
   sort = {},
 ) => {
-  return async (dispatch) => {
+  return async (dispatch, getState) => {
+    const {
+      chain: { chain },
+    } = getState();
+
     dispatch(setLoadingTreasurySpendsList(true));
 
+    const treasurySpendsAssetsFilterOptions =
+      chain === "polkadot"
+        ? polkadotTreasurySpendsAssetsFilterOptions
+        : kusamaTreasurySpendsAssetsFilterOptions;
+
     const filterAsset = filterData?.asset;
     const asset =
       find(treasurySpendsAssetsFilterOptions, { value: filterAsset })?.asset ||