Skip to content

Commit

Permalink
add link to polymarket (#321)
Browse files Browse the repository at this point in the history
* add link to polymarket

* check shape of polymarket response
  • Loading branch information
gsteenkamp89 authored Jul 31, 2024
1 parent 1b5863c commit 2059673
Show file tree
Hide file tree
Showing 5 changed files with 127 additions and 30 deletions.
25 changes: 24 additions & 1 deletion components/Panel/VotePanel/Details.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
supportedChains,
} from "constant";
import {
checkIfIsPolymarket,
decodeHexString,
formatNumberForDisplay,
makeBlockExplorerLink,
Expand All @@ -15,7 +16,9 @@ import {
import { config } from "helpers/config";
import { useOptimisticGovernorData } from "hooks/queries/votes/useOptimisticGovernorData";
import { useAssertionClaim, useAugmentedVoteData } from "hooks";
import PolymarketIcon from "public/assets/icons/polymarket.svg";

import ExternalLinkIcon from "public/assets/icons/external-link.svg";
import AncillaryData from "public/assets/icons/ancillary-data.svg";
import Chat from "public/assets/icons/chat.svg";
import Chevron from "public/assets/icons/chevron.svg";
Expand All @@ -31,6 +34,7 @@ import { OracleTypeT, SupportedChainIds, VoteT } from "types";
import { PanelSectionSubTitle, PanelSectionTitle } from "../styles";
import { ChainIcon } from "./ChainIcon";
import { OoTypeIcon } from "./OoTypeIcon";
import { usePolymarketData } from "hooks/queries/votes";

export function Details({
decodedIdentifier,
Expand All @@ -46,6 +50,7 @@ export function Details({
assertionChildChainId,
assertionAsserter,
assertionId,
title,
}: VoteT) {
const [showDecodedAdminTransactions, setShowDecodedAdminTransactions] =
useState(false);
Expand Down Expand Up @@ -127,6 +132,11 @@ export function Details({
makeOoRequestLink(),
].filter(Boolean);

const { data: polymarketData } = usePolymarketData(
title,
checkIfIsPolymarket(decodedIdentifier, decodedAncillaryData) ? true : false
);

return (
<Wrapper>
<SectionWrapper>
Expand All @@ -142,11 +152,24 @@ export function Details({
}
/>
</RequestInfoIcons>

<PanelSectionTitle>
<IconWrapper>
<DescriptionIcon />
</IconWrapper>{" "}
Description
Description{" "}
{polymarketData && (
<a
className="ml-auto inline-flex h-[35px] place-items-center gap-2 rounded-md border border-transparent px-2 py-1 text-sm font-normal transition-colors hover:border-grey-500 hover:underline"
rel="noreferrer"
target="_blank"
href={polymarketData.link}
>
<PolymarketIcon className="h-4 w-4" />
See on Polymarket
<ExternalLinkIcon />
</a>
)}
</PanelSectionTitle>
<Text>
<Strong>Identifier: </Strong>
Expand Down
1 change: 1 addition & 0 deletions hooks/queries/votes/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,4 @@ export { usePastVotes } from "./usePastVotes";
export { useRevealedVotes } from "./useRevealedVotes";
export { useUpcomingVotes } from "./useUpcomingVotes";
export { useActiveVoteResults } from "./useActiveVoteResults";
export * from "./usePolymarketData";
67 changes: 67 additions & 0 deletions hooks/queries/votes/usePolymarketData.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import { useQuery } from "@tanstack/react-query";

type PolymarketResponse = {
slug: string;
title: string;
icon: string;
description: string;
startDate: string;
creationDate: string;
endDate: string;
volume: number;
createdAt: string;
updatedAt: string;
}[];

export type PolymarketData = PolymarketResponse[number] & {
link: string;
};

function isPolymarketResponse(data: unknown): data is PolymarketResponse {
return Array.isArray(data) &&
data.length &&
typeof data[0] === "object" &&
data[0] &&
"slug" in data[0]
? true
: false;
}

/**
* Searches Polymarket's api for a a market using a market's title.
*
* @param {string} title - The title of the market.
* @returns {PolymarketData} data - Relevant market data
*/
async function getPolymarketData(title: string): Promise<PolymarketData> {
const POLYMARKET_BASE_URL = "https://polymarket.com";
const params = new URLSearchParams({
_c: "all",
_p: "1",
_q: title,
});

const url = `https://polymarket.com/api/events/search?${params.toString()}`;
const res = await fetch(url);
const search = await res.json();
if (!isPolymarketResponse(search)) {
throw new Error("Unable to find market.");
}
const data = search[0];

return {
...data,
link: `${POLYMARKET_BASE_URL}/event/${data.slug}`,
};
}

export function usePolymarketData(title: string, shouldFetch = true) {
return useQuery({
queryKey: [title],
queryFn: () => getPolymarketData(title),
onError: (err) => console.error(err),
enabled: !!title && shouldFetch,
refetchInterval: Infinity,
refetchOnMount: false,
});
}
18 changes: 11 additions & 7 deletions next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,18 @@ const nextConfig = {

return config;
},
images:{
remotePatterns:[
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'cdn.discordapp.com',
}
]
}
protocol: "https",
hostname: "cdn.discordapp.com",
},
{
protocol: "https",
hostname: "polymarket-upload.*.amazonaws.com",
},
],
},
};

module.exports = nextConfig;
46 changes: 24 additions & 22 deletions tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,26 +11,7 @@ module.exports = {
md: "1000px",
lg: "1500px",
},
colors: {
"red-100": "hsla(0, 100%, 96%, 1)",
"red-500": "hsla(0, 100%, 65%, 1)",
"red-600": "hsla(360, 79%, 59%, 1)",
green: "hsla(133, 68%, 39%, 1)",
white: "hsla(0, 0%, 100%, 1)",
black: "hsla(280, 4%, 15%, 1)",
"grey-50": "hsla(0, 0%, 96%, 1)",
"grey-100": "hsla(0, 0%, 94%, 1)",
"grey-500": "hsla(0, 0%, 84%, 1)",
"grey-800": "hsla(0, 0%, 34%, 1)",
"white-opacity-10": "hsla(0, 0%, 100%, 0.1)",
"red-500-opacity-5": "hsla(0, 100%, 65%, 0.05)",
"black-opacity-25": "hsla(280, 4%, 15%, 0.25)",
"black-opacity-50": "hsla(280, 4%, 15%, 0.5)",
"black-opacity-60": "hsla(280, 4%, 15%, 0.6)",
"black-opacity-75": "hsla(280, 4%, 15%, 0.75)",
"loading-skeleton-opacity-100": "hsl(270, 1%, 47%, 1)",
"loading-skeleton-opacity-10": "hsl(270, 1%, 47%, 0.1)",
},

fontFamily: {
sans: ["Halyard Display", "sans-serif"],
},
Expand All @@ -50,9 +31,30 @@ module.exports = {
xl: "20px",
"2xl": "32px",
"3xl": "clamp(20px, 6vw, 40px)/clamp(25px, 4vw, 55px)",
"4xl": "clamp(40px, 10vw, 80px)/clamp(55px, 8vw, 110px)"
"4xl": "clamp(40px, 10vw, 80px)/clamp(55px, 8vw, 110px)",
},
extend: {
colors: {
"red-100": "hsla(0, 100%, 96%, 1)",
"red-500": "hsla(0, 100%, 65%, 1)",
"red-600": "hsla(360, 79%, 59%, 1)",
green: "hsla(133, 68%, 39%, 1)",
white: "hsla(0, 0%, 100%, 1)",
black: "hsla(280, 4%, 15%, 1)",
"grey-50": "hsla(0, 0%, 96%, 1)",
"grey-100": "hsla(0, 0%, 94%, 1)",
"grey-500": "hsla(0, 0%, 84%, 1)",
"grey-800": "hsla(0, 0%, 34%, 1)",
"white-opacity-10": "hsla(0, 0%, 100%, 0.1)",
"red-500-opacity-5": "hsla(0, 100%, 65%, 0.05)",
"black-opacity-25": "hsla(280, 4%, 15%, 0.25)",
"black-opacity-50": "hsla(280, 4%, 15%, 0.5)",
"black-opacity-60": "hsla(280, 4%, 15%, 0.6)",
"black-opacity-75": "hsla(280, 4%, 15%, 0.75)",
"loading-skeleton-opacity-100": "hsl(270, 1%, 47%, 1)",
"loading-skeleton-opacity-10": "hsl(270, 1%, 47%, 0.1)",
},
},
extend: {},
},
plugins: [],
};

0 comments on commit 2059673

Please sign in to comment.