Pull liquidation info from the new subgraph

components/BannerManager/BannerManager.tsx

@@ -5,62 +5,32 @@ import styled from 'styled-components';
 import Banner, { BannerType } from 'sections/shared/Layout/Banner';
 import { LOCAL_STORAGE_KEYS } from 'constants/storage';
 import { ExternalLink } from 'styles/common';
-import { formatShortDateWithTime } from 'utils/formatters/date';
-import { wei } from '@synthetixio/wei';
 import useSynthetixQueries from '@synthetixio/queries';
 import { EXTERNAL_LINKS } from 'constants/links';
 import Connector from 'containers/Connector';
 import { isAnyElectionInNomination, isAnyElectionInVoting } from 'utils/governance';
+import { useLiquidation, LiquidationBanner } from './Liquidation';
 
 const BannerManager: FC = () => {
-	const { subgraph, useGetLiquidationDataQuery, useGetDebtDataQuery, useGetElectionsPeriodStatus } =
-		useSynthetixQueries();
+	const { subgraph, useGetElectionsPeriodStatus } = useSynthetixQueries();
 	const { L2DefaultProvider, isL2, walletAddress } = Connector.useContainer();
 	const periodStatusQuery = useGetElectionsPeriodStatus(L2DefaultProvider);
 
 	const electionIsInNomination = isAnyElectionInNomination(periodStatusQuery.data);
 	const electionIsInVoting = isAnyElectionInVoting(periodStatusQuery.data);
 
-	const liquidationData = useGetLiquidationDataQuery(walletAddress);
-	const debtData = useGetDebtDataQuery(walletAddress);
-
 	const feeClaims = subgraph.useGetFeesClaimeds(
 		{ first: 1, where: { account: walletAddress?.toLowerCase() } },
 		{ timestamp: true, value: true, rewards: true }
 	);
-
-	const issuanceRatio = debtData?.data?.targetCRatio ?? wei(0);
-	const cRatio = debtData?.data?.currentCRatio ?? wei(0);
-	const liquidationDeadlineForAccount =
-		liquidationData?.data?.liquidationDeadlineForAccount ?? wei(0);
-
-	const issuanceRatioPercentage = issuanceRatio.eq(0) ? 0 : 100 / Number(issuanceRatio);
-
 	const hasClaimHistory = !!feeClaims.data?.length;
 
-	if (!liquidationDeadlineForAccount.eq(0) && cRatio.gt(issuanceRatio)) {
-		return (
-			<Banner
-				type={BannerType.WARNING}
-				message={
-					<Trans
-						i18nKey={'user-menu.banner.liquidation-warning'}
-						values={{
-							liquidationRatio: issuanceRatioPercentage,
-							liquidationDeadline: formatShortDateWithTime(
-								Number(liquidationDeadlineForAccount.toString()) * 1000
-							),
-						}}
-						components={[
-							<Strong />,
-							<Strong />,
-							<StyledExternalLink href={EXTERNAL_LINKS.Synthetix.SIP148Liquidations} />,
-						]}
-					/>
-				}
-			/>
-		);
+	const { deadline, hasWarning, ratio } = useLiquidation();
+
+	if (hasWarning) {
+		return <LiquidationBanner ratio={ratio} deadline={deadline} />;
 	}
+
 	if (electionIsInVoting) {
 		return (
 			<Banner

components/BannerManager/Liquidation/LiquidationBanner.tsx

@@ -0,0 +1,47 @@
+import React, { FC } from 'react';
+import { Trans } from 'react-i18next';
+import styled from 'styled-components';
+
+import Banner, { BannerType } from 'sections/shared/Layout/Banner';
+import { ExternalLink } from 'styles/common';
+import { formatShortDateWithTime } from 'utils/formatters/date';
+import { EXTERNAL_LINKS } from 'constants/links';
+
+type LiquidationBannerProps = {
+	ratio: number;
+	deadline: number;
+};
+
+export const LiquidationBanner: FC<LiquidationBannerProps> = ({ ratio, deadline }) => {
+	return (
+		<Banner
+			type={BannerType.WARNING}
+			message={
+				<Trans
+					i18nKey={'user-menu.banner.liquidation-warning'}
+					values={{
+						liquidationRatio: ratio,
+						liquidationDeadline: formatShortDateWithTime(deadline),
+					}}
+					components={[
+						<Strong />,
+						<Strong />,
+						<StyledExternalLink href={EXTERNAL_LINKS.Synthetix.SIP148Liquidations} />,
+					]}
+				/>
+			}
+		/>
+	);
+};
+
+const Strong = styled.strong`
+	font-family: ${(props) => props.theme.fonts.condensedBold};
+`;
+
+const StyledExternalLink = styled(ExternalLink)`
+	color: ${(props) => props.theme.colors.white};
+	text-decoration: underline;
+	&:hover {
+		text-decoration: underline;
+	}
+`;

components/BannerManager/Liquidation/index.ts

@@ -0,0 +1,3 @@
+export * from './useLiquidation';
+export * from './useLiquidationOptimismSubgraph';
+export * from './LiquidationBanner';

components/BannerManager/Liquidation/useLiquidation.ts

@@ -0,0 +1,34 @@
+import { wei } from '@synthetixio/wei';
+import useSynthetixQueries from '@synthetixio/queries';
+import Connector from 'containers/Connector';
+import { useLiquidationOptimismSubgraph } from './useLiquidationOptimismSubgraph';
+
+export function useLiquidation() {
+	const { useGetLiquidationDataQuery, useGetDebtDataQuery } = useSynthetixQueries();
+	const { walletAddress } = Connector.useContainer();
+
+	const liquidationData = useGetLiquidationDataQuery(walletAddress);
+	const debtData = useGetDebtDataQuery(walletAddress);
+
+	const issuanceRatio = debtData?.data?.targetCRatio ?? wei(0);
+	const cRatio = debtData?.data?.currentCRatio ?? wei(0);
+	const liquidationDeadlineForAccount =
+		liquidationData?.data?.liquidationDeadlineForAccount ?? wei(0);
+
+	const ratio = issuanceRatio.eq(0) ? 0 : 100 / Number(issuanceRatio);
+
+	const optimismDeadline = useLiquidationOptimismSubgraph();
+	const deadline =
+		optimismDeadline > 0
+			? optimismDeadline
+			: Number(liquidationDeadlineForAccount.toString()) * 1000;
+
+	const hasWarning =
+		optimismDeadline > 0 || (!liquidationDeadlineForAccount.eq(0) && cRatio.gt(issuanceRatio));
+
+	return {
+		hasWarning,
+		ratio,
+		deadline,
+	};
+}

components/BannerManager/Liquidation/useLiquidationOptimismSubgraph.ts

@@ -0,0 +1,81 @@
+import { useQuery, UseQueryOptions } from 'react-query';
+import Connector from 'containers/Connector';
+
+function getEndpoint(networkName: String) {
+	switch (networkName) {
+		case 'kovan-ovm':
+			return 'https://api.thegraph.com/subgraphs/name/noisekit/liquidator-optimism-kovan';
+		case 'mainnet-ovm':
+			return 'https://api.thegraph.com/subgraphs/name/noisekit/liquidator-optimism';
+		default:
+			return null;
+	}
+}
+
+const gql = (data: any) => data[0];
+const query = gql`
+	query stakerEntity($id: String!) {
+		stakerEntity(id: $id) {
+			id
+			timestamp
+			status
+		}
+	}
+`;
+
+export async function fetchLiquidationInfo(
+	walletAddress: string | null,
+	networkName: string | undefined
+) {
+	if (!walletAddress) {
+		return null;
+	}
+	if (!networkName) {
+		return null;
+	}
+	const endpoint = getEndpoint(networkName);
+	if (!endpoint) {
+		return null;
+	}
+
+	const body = await fetch(endpoint, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+			Accept: 'application/json',
+		},
+		body: JSON.stringify({
+			query,
+			variables: {
+				id: walletAddress,
+			},
+		}),
+	});
+
+	const { data, errors } = await body.json();
+	if (errors?.[0]) {
+		throw new Error(errors?.[0]?.message || 'Unknown server error');
+	}
+	return data?.stakerEntity;
+}
+
+export function useLiquidationOptimismInfo(queryOptions?: UseQueryOptions) {
+	const { walletAddress, network } = Connector.useContainer();
+	return useQuery(
+		[walletAddress, network?.name],
+		() => fetchLiquidationInfo(walletAddress, network?.name),
+		{
+			enabled: Boolean(walletAddress && network?.name),
+			...queryOptions,
+		}
+	);
+}
+
+export function useLiquidationOptimismSubgraph(queryOptions?: UseQueryOptions) {
+	const { data, isSuccess } = useLiquidationOptimismInfo(queryOptions);
+	if (!isSuccess) {
+		return 0;
+	}
+	// @ts-ignore I give up
+	return data?.status === 'FLAGGED' ? parseInt(data.timestamp, 10) * 1000 : 0;
+}