Tom/site information component (#1552)

* refactor: remove legacy testnet banner component

* feature: add site information component

* fix: whitespace

* chore: update default env variable

* refactor: extend main container

* refactor: add information component to main container

* rename const

* refactor: update alert styling

* fix: bold link styling

.env.dev

@@ -14,6 +14,9 @@ REACT_APP_FAUCET_URL="http://localhost:3035"
 REACT_APP_RELAY_CHAIN_NAME="kusama"
 DOCKER_RELAY_CHAIN_CURRENCY="KSM"
 REACT_APP_MARKET_DATA_URL="https://api.coingecko.com/api/v3/simple/price?vs_currencies=usd"
+REACT_APP_SITE_INFORMATION_MESSAGE="This is an informational message that will be shown on every page of the application."
+REACT_APP_SITE_INFORMATION_LINK="https://gobob.xyz"
+
 
 // Kintsugi testnet
 

src/App.tsx

@@ -9,18 +9,16 @@ import { Redirect, Route, Switch } from 'react-router-dom';
 
 import { isVaultClientLoaded } from '@/common/actions/general.actions';
 import { StoreType } from '@/common/types/util.types';
+import { Layout, TransactionModal } from '@/components';
 import ErrorFallback from '@/legacy-components/ErrorFallback';
 import FullLoadingSpinner from '@/legacy-components/FullLoadingSpinner';
 import { useSubstrate, useSubstrateSecureState } from '@/lib/substrate';
 import graphqlFetcher, { GRAPHQL_FETCHER, GraphqlReturn } from '@/services/fetchers/graphql-fetcher';
 import vaultsByAccountIdQuery from '@/services/queries/vaults-by-accountId-query';
-import { BitcoinNetwork } from '@/types/bitcoin';
 import { PAGES } from '@/utils/constants/links';
 
-import { Layout, TransactionModal } from './components';
 import * as constants from './constants';
 import { FeatureFlags, useFeatureFlag } from './hooks/use-feature-flag';
-import TestnetBanner from './legacy-components/TestnetBanner';
 
 const BTC = React.lazy(() => import(/* webpackChunkName: 'btc' */ '@/pages/BTC'));
 const Strategies = React.lazy(() => import(/* webpackChunkName: 'strategies' */ '@/pages/Strategies'));
@@ -80,7 +78,6 @@ const App = (): JSX.Element => {
 
   return (
     <Layout>
-      {process.env.REACT_APP_BITCOIN_NETWORK === BitcoinNetwork.Testnet && <TestnetBanner />}
       <Route
         render={({ location }) => (
           <React.Suspense fallback={<FullLoadingSpinner />}>

src/component-library/Alert/Alert.style.tsx

@@ -12,14 +12,14 @@ interface StyledAlertProps {
 
 const StyledAlert = styled(Flex)<StyledAlertProps>`
   padding: ${theme.spacing.spacing2};
-  color: ${({ $status }) => theme.alert.status[$status]};
   border: 1px solid ${({ $status }) => theme.alert.status[$status]};
   background-color: ${({ $status }) => theme.alert.bg[$status]};
   border-radius: ${theme.rounded.md};
   font-size: ${theme.text.xs};
 `;
 
-const StyledWarningIcon = styled(WarningIcon)`
+const StyledWarningIcon = styled(WarningIcon)<StyledAlertProps>`
+  color: ${({ $status }) => theme.alert.status[$status]};
   width: ${theme.spacing.spacing5};
   height: ${theme.spacing.spacing5};
   flex-shrink: 0;

src/component-library/Alert/Alert.tsx

@@ -12,7 +12,7 @@ type AlertProps = Props & InheritAttrs;
 
 const Alert = ({ status = 'success', children, ...props }: AlertProps): JSX.Element => (
   <StyledAlert $status={status} role='alert' gap='spacing4' alignItems='center' {...props}>
-    <StyledWarningIcon />
+    <StyledWarningIcon $status={status} />
     <div>{children}</div>
   </StyledAlert>
 );

src/components/MainContainer/MainContainer.tsx

@@ -1,11 +1,19 @@
 import { FlexProps } from '@/component-library';
+import { SiteInformation } from '@/components';
 
 import { StyledContainer } from './MainContainer.styles';
 
 type MainContainerProps = FlexProps;
 
-const MainContainer = ({ direction = 'column', gap = 'spacing8', ...props }: MainContainerProps): JSX.Element => (
-  <StyledContainer direction={direction} gap={gap} {...props} />
-);
+const MainContainer = ({ direction = 'column', gap = 'spacing8', ...props }: MainContainerProps): JSX.Element => {
+  const showSiteInformationMessage = !!process.env.REACT_APP_SITE_INFORMATION_MESSAGE;
+
+  return (
+    <StyledContainer direction={direction} gap={gap} {...props}>
+      {showSiteInformationMessage && <SiteInformation />}
+      {props.children}
+    </StyledContainer>
+  );
+};
 
 export { MainContainer };

src/components/SiteInformation/SiteInformation.tsx

@@ -0,0 +1,21 @@
+import { Alert, TextLink } from '@/component-library';
+
+const SiteInformation = (): JSX.Element => {
+  const hasLink = !!process.env.REACT_APP_SITE_INFORMATION_LINK;
+
+  return (
+    <Alert status='warning'>
+      {process.env.REACT_APP_SITE_INFORMATION_MESSAGE}
+      {hasLink && (
+        <>
+          {' '}
+          <TextLink weight='bold' external icon to={process.env.REACT_APP_SITE_INFORMATION_LINK || ''}>
+            More information
+          </TextLink>
+        </>
+      )}
+    </Alert>
+  );
+};
+
+export { SiteInformation };

src/components/SiteInformation/index.tsx

@@ -0,0 +1 @@
+export { SiteInformation } from './SiteInformation';

src/components/index.tsx

@@ -27,6 +27,7 @@ export { PlusDivider } from './PlusDivider';
 export type { PoolsTableProps } from './PoolsTable';
 export { PoolsTable } from './PoolsTable';
 export { ReceivableAssets } from './ReceivableAssets';
+export { SiteInformation } from './SiteInformation';
 export type { SlippageManagerProps } from './SlippageManager';
 export { SlippageManager } from './SlippageManager';
 export type { ToastContainerProps } from './ToastContainer';