Adding Footer (#118)

* Addin Web UI version

* add beta logo and footer styles

* add GH link

* Adding link on version

---------

Co-authored-by: Agustín Longoni <agustin.longoni@altoros.com>

next.config.js

@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 
 const { config } = require("./src/services/squid/squidConfig");
+const { version } = require("./package.json");
 
 const nextConfig = {
   reactStrictMode: true,
@@ -12,6 +13,9 @@ const nextConfig = {
       transform: "@mui/icons-material/{{member}}",
     },
   },
+  publicRuntimeConfig: {
+    version,
+  },
   async rewrites() {
     return [
       {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "multisig-ui",
-  "version": "0.1.0",
+  "version": "0.1.0-beta",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/components/layout/AppLayout.tsx

@@ -10,6 +10,7 @@ import { TopBar } from "@/components/layout/TopBar";
 import { useSettingsTheme } from "@/context/SettingsThemeConsumer";
 import { scalePixels } from "@/themes/spacing";
 
+import { Footer } from "./Footer";
 import { VerticalMenuBar } from "./VerticalMenuBar";
 
 const ContentWrapper = styled(Box)<BoxProps & { drawerwidth: number }>(
@@ -45,6 +46,7 @@ export const AppLayout: React.FC<PropsWithChildren> = ({ children }) => {
         <ContentWrapper drawerwidth={marginLeft} component="main">
           {children}
         </ContentWrapper>
+        <Footer />
       </MainContentWrapper>
     </VerticalLayoutWrapper>
   );

src/components/layout/Footer/index.tsx

@@ -0,0 +1,46 @@
+import { Link, Stack, Tooltip, Typography } from "@mui/material";
+import getConfig from "next/config";
+import React from "react";
+
+import { FooterContainer } from "./styled";
+
+const { publicRuntimeConfig } = getConfig();
+const version = publicRuntimeConfig?.version;
+
+function isBetaVersion(_version: string): boolean {
+  const betaRegex = /-beta|-alpha|-rc/;
+
+  return betaRegex.test(_version);
+}
+
+export const Footer: React.FC = () => {
+  const isBeta = isBetaVersion(version);
+
+  return (
+    <FooterContainer>
+      {isBeta && (
+        <Tooltip
+          title="This project is in beta. Use at your own risk."
+          placement="top"
+        >
+          <Typography variant="caption">Beta version</Typography>
+        </Tooltip>
+      )}
+      {version && (
+        <Typography variant="caption">
+          <Stack display={"flex"} direction={"row"}>
+            UI: &nbsp;
+            <Link
+              underline="hover"
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://github.com/protofire/ink-multisig-ui"
+            >
+              v{version}
+            </Link>
+          </Stack>
+        </Typography>
+      )}
+    </FooterContainer>
+  );
+};

src/components/layout/Footer/styled.ts

@@ -0,0 +1,15 @@
+import { styled } from "@mui/material/styles";
+
+export const FooterContainer = styled("footer")(({ theme }) => ({
+  display: "flex",
+  alignItems: "flex-end",
+  boxSizing: "border-box",
+  fontSize: "1.2rem",
+  padding: "1rem 0 1rem 15.5rem",
+  flex: "1 1 auto",
+  color: theme.palette.text.secondary,
+  width: "100%",
+  justifyContent: "center",
+  margin: "0",
+  gap: "1rem",
+}));

src/components/layout/TopBar.tsx

@@ -16,7 +16,7 @@ export function TopBar({
         <Stack direction="row" gap={1} sx={{ flexGrow: 1 }}>
           <Link href={ROUTES.Home} passHref>
             <Image
-              src="/xSigners-logo.svg"
+              src="/xSigners-logo-beta.svg"
               alt="xSigners Wallet"
               priority
               width={160}