Merge pull request #163 from blend-capital/pool-status-comps

pool status banners

package.json

@@ -1,6 +1,6 @@
 {
   "name": "blend-ui",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "private": true,
   "type": "module",
   "scripts": {

src/components/backstop/BackstopHeader.tsx

@@ -21,7 +21,7 @@ export const BackstopHeader: React.FC<BackstopHeaderProps> = ({ type, sx, ...pro
       }}
       {...props}
     >
-      <Icon src={`/icons/tokens/blndusdclp.svg`} alt={`blndusdclp`} height={30} width={30} />
+      <Icon src={`/icons/tokens/blndusdclp.svg`} alt={`blndusdclp`} />
       <Typography variant="h3" sx={{ marginLeft: '12px' }}>
         {headerText}
       </Typography>

src/components/backstop/BackstopPreviewBar.tsx

@@ -2,7 +2,7 @@ import { BackstopPoolEst, BackstopPoolUserEst } from '@blend-capital/blend-sdk';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import { Box, useTheme } from '@mui/material';
 import { useSettings, ViewType } from '../../contexts';
-import { useBackstop, useBackstopPool, useBackstopPoolUser } from '../../hooks/api';
+import { useBackstop, useBackstopPool, useBackstopPoolUser, usePool } from '../../hooks/api';
 import { toBalance } from '../../utils/formatter';
 import { CustomButton } from '../common/CustomButton';
 import { Icon } from '../common/Icon';
@@ -17,6 +17,7 @@ export const BackstopPreviewBar: React.FC<PoolComponentProps> = ({ poolId }) =>
   const { viewType } = useSettings();
   const theme = useTheme();
 
+  const { data: pool } = usePool(poolId);
   const { data: backstop } = useBackstop();
   const { data: backstopPoolData } = useBackstopPool(poolId);
   const { data: backstopUserData } = useBackstopPoolUser(poolId);
@@ -61,7 +62,7 @@ export const BackstopPreviewBar: React.FC<PoolComponentProps> = ({ poolId }) =>
             borderRadius: '5px',
           }}
         >
-          <PoolStatusBox titleColor="inherit" type="large" status="Active" />
+          <PoolStatusBox titleColor="inherit" type="large" status={pool?.config?.status} />
         </Box>
         <Box
           sx={{

src/components/borrow/BorrowAnvil.tsx

@@ -32,6 +32,8 @@ import { TxOverview } from '../common/TxOverview';
 import { toUSDBalance } from '../common/USDBalance';
 import { Value } from '../common/Value';
 import { ValueChange } from '../common/ValueChange';
+import { PoolOracleError } from '../pool/PoolOracleErrorBanner';
+import { PoolStatusBanner } from '../pool/PoolStatusBanner';
 
 export const BorrowAnvil: React.FC<ReserveComponentProps> = ({ poolId, assetId }) => {
   const theme = useTheme();
@@ -41,7 +43,7 @@ export const BorrowAnvil: React.FC<ReserveComponentProps> = ({ poolId, assetId }
     useWallet();
 
   const { data: pool } = usePool(poolId);
-  const { data: poolOracle } = usePoolOracle(pool);
+  const { data: poolOracle, isError: isOracleError } = usePoolOracle(pool);
   const { data: poolUser } = usePoolUser(pool);
   const reserve = pool?.reserves.get(assetId);
   const decimals = reserve?.config.decimals ?? 7;
@@ -128,8 +130,29 @@ export const BorrowAnvil: React.FC<ReserveComponentProps> = ({ poolId, assetId }
     return <Skeleton />;
   }
 
+  if (isOracleError && pool.config.status > 1) {
+    return (
+      <>
+        <Row>
+          <PoolStatusBanner status={pool.config.status} />
+        </Row>
+        <Row>
+          <PoolOracleError />
+        </Row>
+      </>
+    );
+  }
+  if (pool.config.status > 1) {
+    <Row>
+      <PoolStatusBanner status={pool.config.status} />
+    </Row>;
+  }
+  if (isOracleError) {
+    return <PoolOracleError />;
+  }
+
   const curPositionEstimate =
-    pool && poolOracle && poolUser
+    pool && poolUser && poolOracle
       ? PositionsEstimate.build(pool, poolOracle, poolUser.positions)
       : undefined;
   const newPoolUser = parsedSimResult && new PoolUser(walletAddress, parsedSimResult, new Map());

src/components/common/FlameIcon.tsx

@@ -41,8 +41,8 @@ export function FlameIcon({
       >
         <Icon
           src="/icons/dashboard/flame.svg"
-          height={iconHeight}
-          width={iconWidth}
+          height={`${iconHeight}px`}
+          width={`${iconWidth}px`}
           alt="emmission"
         />
       </Box>

src/components/common/Icon.tsx

@@ -4,8 +4,8 @@ import Image from 'next/image';
 export interface IconProps {
   src: string;
   alt: string;
-  height?: number;
-  width?: number;
+  height?: string;
+  width?: string;
   isCircle?: boolean; // defaults to true
   sx?: SxProps<Theme>;
   onError?: (error: React.SyntheticEvent<HTMLImageElement, Event>) => void;
@@ -14,8 +14,8 @@ export interface IconProps {
 export const Icon: React.FC<IconProps> = ({
   src,
   alt,
-  height = 30,
-  width = 30,
+  height = '30px',
+  width = '30px',
   isCircle = true,
   sx,
   onError,
@@ -26,6 +26,10 @@ export const Icon: React.FC<IconProps> = ({
         borderRadius: isCircle ? '50%' : '5px',
         width,
         height,
+        minWidth: width,
+        minHeight: height,
+        maxWidth: width,
+        maxHeight: height,
         position: 'relative',
         overflow: 'hidden',
         display: 'inline-block',

src/components/common/TokenHeader.tsx

@@ -42,7 +42,9 @@ export const TokenHeader: React.FC<TokenHeaderProps> = ({
     >
       <TokenIcon
         reserve={reserve}
-        sx={{ width: iconSize || '32px', height: iconSize || '32px', marginRight: '6px' }}
+        height={iconSize || '32px'}
+        width={iconSize || '32px'}
+        sx={{ marginRight: '6px' }}
       />
       <Box
         sx={{

src/components/common/TokenIcon.tsx

@@ -1,13 +1,17 @@
-import { IconProps as MuiIconProps } from '@mui/material';
 import React from 'react';
 
 import { Reserve } from '@blend-capital/blend-sdk';
+import { Theme } from '@emotion/react';
+import { SxProps } from '@mui/material';
 import { useTokenMetadataFromToml } from '../../hooks/api';
 import { Icon } from './Icon';
 import { LetterIcon } from './LetterIcon';
 
-export interface TokenIconProps extends MuiIconProps {
+export interface TokenIconProps {
   reserve: Reserve;
+  height?: string;
+  width?: string;
+  sx?: SxProps<Theme> | undefined;
 }
 export const TokenIcon: React.FC<TokenIconProps> = ({ reserve, ...props }) => {
   const { data: stellarTokenMetadata } = useTokenMetadataFromToml(reserve);

src/components/dashboard/PositionOverview.tsx

@@ -122,8 +122,8 @@ export const PositionOverview: React.FC<PoolComponentProps> = ({ poolId }) => {
               <Icon
                 alt="BLND Token Icon"
                 src="/icons/tokens/blnd-yellow.svg"
-                height={24}
-                width={24}
+                height={'24px'}
+                width={'24px'}
               />
             </Box>
             <StackedText

src/components/lend/LendAnvil.tsx

@@ -39,6 +39,7 @@ import { TxOverview } from '../common/TxOverview';
 import { toUSDBalance } from '../common/USDBalance';
 import { Value } from '../common/Value';
 import { ValueChange } from '../common/ValueChange';
+import { PoolStatusBanner } from '../pool/PoolStatusBanner';
 
 export const LendAnvil: React.FC<ReserveComponentProps> = ({ poolId, assetId }) => {
   const theme = useTheme();
@@ -116,6 +117,10 @@ export const LendAnvil: React.FC<ReserveComponentProps> = ({ poolId, assetId })
     return <Skeleton />;
   }
 
+  if (pool.config.status > 3) {
+    return <PoolStatusBanner status={pool.config.status} />;
+  }
+
   const curPositionsEstimate =
     pool && poolOracle && poolUser
       ? PositionsEstimate.build(pool, poolOracle, poolUser.positions)

src/components/markets/MarketCard.tsx

@@ -15,6 +15,7 @@ import { Skeleton } from '../common/Skeleton';
 import { StackedTextHLBox } from '../common/StackedTextHLBox';
 import { TokenIcon } from '../common/TokenIcon';
 import { PoolHeader } from '../pool/PoolHeader';
+import { PoolHealthBanner } from '../pool/PoolHealthBanner';
 import { MarketCardCollapse } from './MarketCardCollapse';
 
 export interface MarketCardProps extends PoolComponentProps {
@@ -67,6 +68,7 @@ export const MarketCard: React.FC<MarketCardProps> = ({ poolId, index, onLoaded,
       >
         <Row>
           <PoolHeader name={pool.config.name} sx={{ margin: '6px', padding: '6px' }} />
+
           <Box
             sx={{
               margin: '6px',
@@ -142,6 +144,8 @@ export const MarketCard: React.FC<MarketCardProps> = ({ poolId, index, onLoaded,
           </OpaqueButton>
         </LinkBox>
       </Row>
+      <PoolHealthBanner poolId={poolId} />
+
       <Collapse in={expand} sx={{ width: '100%' }}>
         <MarketCardCollapse
           pool={pool}

src/components/pool/PoolFrozenBanner.tsx

@@ -0,0 +1,34 @@
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import SevereColdIcon from '@mui/icons-material/SevereCold';
+import { Box, Typography, useTheme } from '@mui/material';
+import { OpaqueButton } from '../common/OpaqueButton';
+
+export const PoolFrozenBanner = () => {
+  const theme = useTheme();
+
+  return (
+    <OpaqueButton
+      onClick={() =>
+        window.open(`https://docs.blend.capital/pool-creators/pool-management#frozen`, '_blank')
+      }
+      palette={theme.palette.error}
+      sx={{
+        width: '100%',
+        display: 'flex',
+        margin: '6px',
+        padding: '12px',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingRight: '20px',
+      }}
+    >
+      <Box sx={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }}>
+        <SevereColdIcon sx={{ marginRight: '6px' }} />
+        <Typography variant="body2">
+          This pool is frozen. Supplying and borrowing are suspended. You CAN withdraw and repay.
+        </Typography>
+      </Box>
+      <ArrowForwardIcon fontSize="inherit" />
+    </OpaqueButton>
+  );
+};

src/components/pool/PoolHealthBanner.tsx

@@ -0,0 +1,22 @@
+import { Box } from '@mui/material';
+import { usePool, usePoolOracle } from '../../hooks/api';
+import { PoolComponentProps } from '../common/PoolComponentProps';
+import { Row } from '../common/Row';
+import { PoolOracleError } from './PoolOracleErrorBanner';
+import { PoolStatusBanner } from './PoolStatusBanner';
+
+export const PoolHealthBanner: React.FC<PoolComponentProps> = ({ poolId, ...props }) => {
+  const { data: pool } = usePool(poolId);
+  const { isError: isOracleError } = usePoolOracle(pool);
+
+  return (
+    <Box sx={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
+      <PoolStatusBanner status={pool?.config?.status} />
+      {isOracleError && (
+        <Row>
+          <PoolOracleError />
+        </Row>
+      )}
+    </Box>
+  );
+};

src/components/pool/PoolOnIceBanner.tsx

@@ -0,0 +1,33 @@
+import AcUnitIcon from '@mui/icons-material/AcUnit';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import { Box, Typography, useTheme } from '@mui/material';
+import { OpaqueButton } from '../common/OpaqueButton';
+
+export const PoolOnIceBanner = () => {
+  const theme = useTheme();
+  return (
+    <OpaqueButton
+      onClick={() =>
+        window.open(`https://docs.blend.capital/pool-creators/pool-management#on-ice`, '_blank')
+      }
+      palette={theme.palette.warning}
+      sx={{
+        width: '100%',
+        display: 'flex',
+        margin: '6px',
+        padding: '12px',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingRight: '20px',
+      }}
+    >
+      <Box sx={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }}>
+        <AcUnitIcon sx={{ marginRight: '6px' }} />
+        <Typography variant="body2">
+          This pool is on-ice. Borrowing is suspended. You CAN supply, withdraw, and repay.
+        </Typography>
+      </Box>
+      <ArrowForwardIcon fontSize="inherit" />
+    </OpaqueButton>
+  );
+};

src/components/pool/PoolOracleErrorBanner.tsx

@@ -0,0 +1,29 @@
+import WarningIcon from '@mui/icons-material/Warning';
+import { Box, Typography, useTheme } from '@mui/material';
+
+export const PoolOracleError = () => {
+  const theme = useTheme();
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        display: 'flex',
+        margin: '6px',
+        padding: '12px',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingRight: '20px',
+        borderRadius: '4px',
+        color: theme.palette.warning.main,
+        backgroundColor: theme.palette.warning.opaque,
+      }}
+    >
+      <Box sx={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }}>
+        <WarningIcon sx={{ marginRight: '6px' }} />
+        <Typography variant="body2">
+          {"This pool's oracle is currently experiencing issues. Please check back later."}
+        </Typography>
+      </Box>
+    </Box>
+  );
+};

src/components/pool/PoolStatusBanner.tsx

@@ -0,0 +1,20 @@
+import { BoxProps } from '@mui/material';
+import { Row } from '../common/Row';
+import { PoolFrozenBanner } from './PoolFrozenBanner';
+import { PoolOnIceBanner } from './PoolOnIceBanner';
+
+export interface PoolStatusBannerProps extends BoxProps {
+  status: number | undefined;
+}
+
+export const PoolStatusBanner: React.FC<PoolStatusBannerProps> = ({ status, ...props }) => {
+  // status of 1 or 0 indicated an active pool. if a status is currently loading or unable to be resolved,
+  // do not display a banner
+  const status_issue = status !== undefined && status > 1;
+
+  if (!status_issue) {
+    return <></>;
+  }
+
+  return <Row {...props}>{status <= 3 ? <PoolOnIceBanner /> : <PoolFrozenBanner />}</Row>;
+};