Merge pull request #55 from lidofinance/feat/unsupport-banner

feat: add ChainBanner component to display error messages in layout

Author: DiRaiks

features/overview/components/capacity/capacity.tsx

@@ -26,7 +26,7 @@ export const Capacity = () => {
       {renderData.map((item) => {
         const isUtilizationRatio = item.key === 'utilizationRatio';
         const color = isUtilizationRatio
-          ? getUtilizationRatioColor(item.payload)
+          ? getUtilizationRatioColor(String(item.payload))
           : undefined;
 
         return (

features/overview/components/health/heath.tsx

@@ -1,11 +1,11 @@
 import { OverviewItem, OverviewSection } from 'features/overview/shared';
 import { SectionPayload, useVaultOverview } from 'features/overview/contexts';
-import { getHealthFactorColor } from 'utils';
+import { formatPercent, getHealthFactorColor } from 'utils';
 
 const sectionPayloadList: SectionPayload[] = [
   {
-    title: 'Health factor',
-    key: 'healthFactor',
+    title: 'Health factor number',
+    key: 'healthFactorNumber',
   },
   {
     title: 'Total value',
@@ -28,16 +28,19 @@ export const Health = () => {
   return (
     <OverviewSection title="Vault health" titleTooltip="Lorem Ipsum">
       {renderData.map((item) => {
-        const isHealthy = item.key === 'healthFactor';
+        const isHealthy = item.key === 'healthFactorNumber';
         const color = isHealthy
           ? getHealthFactorColor(item.payload)
           : undefined;
+        const value = isHealthy
+          ? formatPercent.format(Number(item.payload) / 100)
+          : item.payload;
 
         return (
           <OverviewItem
             key={item.title}
             title={item.title}
-            content={item.payload}
+            content={value}
             isLoading={item.isLoading}
             color={color}
           />

features/overview/contexts/vault-overview.tsx

@@ -24,6 +24,7 @@ export interface VaultOverviewContextType {
     utilizationRatio: string;
     rebalanceThreshold: string;
     healthFactor: string;
+    healthFactorNumber: number;
     totalLocked: string;
     liabilityStETH: string;
     totalMintingCapacity: string;
@@ -37,7 +38,7 @@ export interface VaultOverviewContextType {
   isLoadingVault?: boolean;
   getVaultDataToRender: (
     payload: SectionPayload[],
-  ) => (SectionPayload & { payload: string | Address })[];
+  ) => (SectionPayload & { payload: string | Address | number })[];
 }
 
 export type VaultOverviewContextKeys = keyof VaultOverviewContextType['values'];
@@ -98,6 +99,7 @@ export const VaultOverviewProvider: FC<PropsWithChildren> = ({ children }) => {
         forcedRebalanceThresholdBP / VAULT_TOTAL_BASIS_POINTS,
       );
       const healthFactor = formatPercent.format(healthScore / 100);
+      const healthFactorNumber = healthScore;
       const utilizationRatio = formatPercent.format(
         overview.utilizationRatio / 100,
       );
@@ -120,6 +122,7 @@ export const VaultOverviewProvider: FC<PropsWithChildren> = ({ children }) => {
         utilizationRatio,
         rebalanceThreshold,
         healthFactor,
+        healthFactorNumber,
         totalLocked,
         liabilityStETH,
         totalMintingCapacity,

shared/components/layout/chain-banner/chain-banner.tsx

@@ -0,0 +1,16 @@
+import { useErrorMessage } from 'shared/wallet/fallback/useErrorMessage';
+
+import { ErrorMessageWrapper, WarningIcon } from './styles';
+
+export const ChainBanner = () => {
+  const errorMessage = useErrorMessage();
+
+  if (!errorMessage) return null;
+
+  return (
+    <ErrorMessageWrapper>
+      <WarningIcon />
+      {errorMessage}
+    </ErrorMessageWrapper>
+  );
+};

shared/components/layout/chain-banner/index.ts

@@ -0,0 +1 @@
+export * from './chain-banner';

shared/components/layout/chain-banner/styles.tsx

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import WarningIconSrc from 'assets/icons/attention-triangle-ipfs.svg';
+
+export const ErrorMessageWrapper = styled.div`
+  display: flex;
+  background-color: #fffae0;
+  grid-area: error;
+  padding: ${({ theme }) => theme.spaceMap.lg}px;
+  border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px;
+  color: #ec8600;
+`;
+
+export const WarningIcon = styled.img.attrs({
+  src: WarningIconSrc,
+  alt: 'warning',
+})`
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin-right: ${({ theme }) => theme.spaceMap.sm}px;
+`;

shared/components/layout/layout.tsx

@@ -2,12 +2,14 @@ import { ReactNode, FC, PropsWithChildren } from 'react';
 import { ContainerProps } from '@lidofinance/lido-ui';
 
 import { config } from 'config';
+import { useErrorMessage } from 'shared/wallet/fallback/useErrorMessage';
 
 import { IPFSInfoBox } from 'features/ipfs/ipfs-info-box';
 import { Header } from './header';
 import { Main } from './main';
 import { Navigation } from './navigation';
 import { Footer } from './footer';
+import { ChainBanner } from './chain-banner';
 import {
   LayoutTitleStyle,
   LayoutSubTitleStyle,
@@ -23,10 +25,12 @@ type LayoutProps = {
 
 export const Layout: FC<PropsWithChildren<LayoutProps>> = (props) => {
   const { title, subtitle, containerSize, children } = props;
+  const errorMessage = useErrorMessage();
 
   return (
-    <LayoutStyles>
+    <LayoutStyles isError={!!errorMessage}>
       <Header />
+      <ChainBanner />
       <Navigation />
       <Main size={containerSize}>
         {config.ipfsMode && (

shared/components/layout/styles.tsx

@@ -2,15 +2,25 @@ import { H1, Container } from '@lidofinance/lido-ui';
 import styled from 'styled-components';
 import { devicesHeaderMedia } from 'styles/global';
 
-export const LayoutStyles = styled(Container)`
+const templateAreas = {
+  withError: `
+    'header header header'
+    'error error error'
+    'nav content empty'
+    'footer footer footer';`,
+  default: `
+    'header header header'
+    'nav content empty'
+    'footer footer footer';`,
+};
+
+export const LayoutStyles = styled(Container)<{ isError: boolean }>`
   position: relative;
   display: grid;
   grid-template-rows: min-content 1fr;
   grid-template-columns: 166px 1fr 166px;
-  grid-template-areas:
-    'header header header'
-    'nav content empty'
-    'footer footer footer';
+  grid-template-areas: ${({ isError }) =>
+    templateAreas[isError ? 'withError' : 'default']};
   grid-column-gap: 0;
   grid-row-gap: 16px;
   min-height: 100vh;