From e00816cde27a5a07255e587f00f53ca2836e96ac Mon Sep 17 00:00:00 2001 From: Paolo Guerra Date: Wed, 26 Jul 2023 18:08:32 +0200 Subject: [PATCH 01/14] feat(frontend): implement featured KPI tokens (#321) --- .changeset/nervous-cycles-agree.md | 5 +++ packages/frontend/src/constants/index.ts | 3 ++ .../src/hooks/useFeaturedKPITokens.ts | 38 +++++++++++++++++-- .../frontend/src/pages/home/hero/index.tsx | 12 ++++-- 4 files changed, 51 insertions(+), 7 deletions(-) create mode 100644 .changeset/nervous-cycles-agree.md diff --git a/.changeset/nervous-cycles-agree.md b/.changeset/nervous-cycles-agree.md new file mode 100644 index 000000000..46eabd749 --- /dev/null +++ b/.changeset/nervous-cycles-agree.md @@ -0,0 +1,5 @@ +--- +"@carrot-kpi/host-frontend": minor +--- + +Implement featured KPI tokens hook diff --git a/packages/frontend/src/constants/index.ts b/packages/frontend/src/constants/index.ts index 779e3ccac..65e6605a2 100644 --- a/packages/frontend/src/constants/index.ts +++ b/packages/frontend/src/constants/index.ts @@ -11,6 +11,9 @@ export const CARROT_KPI_FRONTEND_I18N_NAMESPACE = "@carrot-kpi/frontend"; export const PINNING_PROXY_JWT_ISSUER = "carrot-pinning-proxy"; +export const FEATURED_BLACKLISTED_KPI_TOKENS_CONFIGURATION_LOCATION = + "https://d2l3j8l4t44bvz.cloudfront.net/featured-blacklisted-kpi-tokens.json"; + export interface AugmentedChain extends Chain { logo: FunctionComponent< SVGProps & { title?: string | undefined } diff --git a/packages/frontend/src/hooks/useFeaturedKPITokens.ts b/packages/frontend/src/hooks/useFeaturedKPITokens.ts index cb1146c09..ff7a3a3ae 100644 --- a/packages/frontend/src/hooks/useFeaturedKPITokens.ts +++ b/packages/frontend/src/hooks/useFeaturedKPITokens.ts @@ -1,15 +1,45 @@ -import { KPIToken } from "@carrot-kpi/sdk"; +import { usePreferDecentralization } from "@carrot-kpi/react"; +import { ChainId, Fetcher, KPIToken, enforce } from "@carrot-kpi/sdk"; import { useQuery } from "@tanstack/react-query"; +import { useNetwork, usePublicClient, type Address } from "wagmi"; +import { FEATURED_BLACKLISTED_KPI_TOKENS_CONFIGURATION_LOCATION } from "../constants"; + +type FeaturedBlacklistedKPITokens = Record< + ChainId, + { featured: Address[]; blacklisted: Address[] } +>; + +export const FEATURED_KPI_TOKEN_QUERY_KEY_PREFIX = + "featuredKPITokens" as string; export function useFeaturedKPITokens(): { loading: boolean; kpiTokens: KPIToken[]; } { + const preferDecentralization = usePreferDecentralization(); + const { chain } = useNetwork(); + const publicClient = usePublicClient(); + const { data: kpiTokens, isLoading: loading } = useQuery({ - queryKey: ["featueredKPITokens"], + queryKey: [FEATURED_KPI_TOKEN_QUERY_KEY_PREFIX, { chain }], queryFn: async () => { - // TODO: implement - return []; + if (!chain) return []; + enforce(chain.id in ChainId, "unsupported chain"); + + const featuredBlacklistedKPITokens = (await ( + await fetch( + FEATURED_BLACKLISTED_KPI_TOKENS_CONFIGURATION_LOCATION, + ) + ).json()) as FeaturedBlacklistedKPITokens; + + const kpiTokens = await Fetcher.fetchKPITokens({ + publicClient, + preferDecentralization, + addresses: + featuredBlacklistedKPITokens[chain.id as ChainId].featured, + }); + + return Object.values(kpiTokens).reverse(); }, }); diff --git a/packages/frontend/src/pages/home/hero/index.tsx b/packages/frontend/src/pages/home/hero/index.tsx index 92720440d..4e4dd4656 100644 --- a/packages/frontend/src/pages/home/hero/index.tsx +++ b/packages/frontend/src/pages/home/hero/index.tsx @@ -1,6 +1,5 @@ import { Button, Loader, Typography } from "@carrot-kpi/ui"; import React, { useEffect, useRef } from "react"; -import { FeaturedCampaigns } from "../../../components/featured-campaigns"; import { CardHorizontal } from "../../../components/ui/cards-horizontal"; import { Link } from "react-router-dom"; import Plus from "../../../icons/plus"; @@ -10,6 +9,7 @@ import { CreateCampaignButton } from "../../../components/create-campaign-button import { useFeaturedKPITokens } from "../../../hooks/useFeaturedKPITokens"; import { useSelector } from "../../../state/connector"; import type { HostState } from "../../../state"; +import { KPITokenCard } from "../../../components/ui/kpi-token-card"; const plusIconStyles = cva(["invisible", "md:visible", "absolute"], { variants: { @@ -84,8 +84,14 @@ export const Hero = () => { > {t("home.featuredCampaigns")} - - + + {kpiTokens.map((kpiToken) => ( + + ))}