Merge pull request #17 from lidofinance/feature/si-643-add-release-ve…

…rsion-to-footer

Add release version to footer

shared/components/footer/footer.tsx

@@ -1,24 +1,49 @@
 import { FC } from 'react';
+import { version, branch } from 'build-info.json';
 
 import {
   FooterStyle,
   FooterLink,
   LogoLidoStyle,
   FooterDivider,
+  Version,
+  LinkDivider,
 } from './styles';
 
+const getVersionInfo = () => {
+  const repoBaseUrl = 'https://github.com/lidofinance/ethereum-staking-widget';
+  if (version === 'REPLACE_WITH_VERSION')
+    return {
+      label: 'dev',
+      link: repoBaseUrl,
+    };
+  if (version === branch + ':-unknown')
+    return {
+      label: 'preview',
+      link: `${repoBaseUrl}/tree/${branch}`,
+    };
+  return {
+    label: `v${version}`,
+    link: `${repoBaseUrl}/releases/tag/${version}`,
+  };
+};
+
+const { label, link } = getVersionInfo();
+
 export const Footer: FC = () => (
   <FooterStyle size="full" forwardedAs="footer">
     <LogoLidoStyle />
     <FooterLink data-testid="termsOfUse" href="https://lido.fi/terms-of-use">
       Terms of Use
     </FooterLink>
+    <LinkDivider />
     <FooterLink
       data-testid="privacyNotice"
       href="https://lido.fi/privacy-notice"
     >
       Privacy Notice
     </FooterLink>
+    <Version href={link}>{label}</Version>
     <FooterDivider />
   </FooterStyle>
 );

shared/components/footer/styles.tsx

@@ -1,5 +1,6 @@
-import { Container, Link } from '@lidofinance/lido-ui';
 import styled from 'styled-components';
+
+import { Container, Link } from '@lidofinance/lido-ui';
 import { LogoLido } from 'shared/components/logos/logos';
 import { NAV_MOBILE_MEDIA } from '../header/components/navigation/styles';
 
@@ -35,12 +36,12 @@ export const FooterLink = styled(Link)`
       opacity: 1;
     }
   }
+`;
 
-  &:not(:last-of-type)::after {
-    content: '';
-    border-right: 1px solid var(--lido-color-textSecondary);
-    margin: 0 6px;
-  }
+export const LinkDivider = styled.div`
+  background: var(--lido-color-textSecondary);
+  width: 1px;
+  margin: 2px 6px;
 `;
 
 export const LogoLidoStyle = styled(LogoLido)`
@@ -64,3 +65,10 @@ export const FooterDivider = styled.div`
     display: none;
   }
 `;
+
+export const Version = styled(FooterLink)`
+  margin-left: auto;
+  padding: 2px 5px;
+  border-radius: ${({ theme }) => theme.borderRadiusesMap.xs}px;
+  background: rgba(122, 138, 160, 0.1);
+`;