diff --git a/src/components/pages/AppHome/AppFooter.tsx b/src/components/pages/AppHome/AppFooter.tsx
deleted file mode 100644
index e4550e56f9..0000000000
--- a/src/components/pages/AppHome/AppFooter.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Flex, Link, Spacer, Text } from '@chakra-ui/react';
-import { Trans, useTranslation } from 'react-i18next';
-import { URL_DECENT } from '../../../constants/url';
-import ExternalLink from '../../ui/links/ExternalLink';
-import Divider from '../../ui/utils/Divider';
-
-export function AppFooter() {
- const { t } = useTranslation('home');
- return (
-
-
-
-
-
- Made with 💜 by
-
- Decent DAO
-
-
-
-
- {t('audit')}
-
- |
-
-
- {import.meta.env.VITE_APP_GIT_HASH.substring(0, 7)}
-
-
-
- );
-}
diff --git a/src/components/ui/links/ExternalLink.tsx b/src/components/ui/links/ExternalLink.tsx
index 3e71fdf7f4..a534b4cdfd 100644
--- a/src/components/ui/links/ExternalLink.tsx
+++ b/src/components/ui/links/ExternalLink.tsx
@@ -1,6 +1,11 @@
import { Link, LinkProps } from '@chakra-ui/react';
+import { Ref, forwardRef } from 'react';
-export default function ExternalLink({ children, ...rest }: LinkProps) {
+export default function ExternalLink({
+ children,
+ internalRef,
+ ...rest
+}: LinkProps & { internalRef?: Ref }) {
return (
{children}
);
}
+
+export const ExtrernalLinkWrappable = forwardRef(({ children, ...props }: LinkProps, ref) => (
+
+ {children}
+
+));
+ExtrernalLinkWrappable.displayName = 'ExtrernalLinkWrappable';
diff --git a/src/components/ui/page/Footer.tsx b/src/components/ui/page/Footer.tsx
new file mode 100644
index 0000000000..dedf06da36
--- /dev/null
+++ b/src/components/ui/page/Footer.tsx
@@ -0,0 +1,63 @@
+import { Flex, Text, Tooltip } from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+import { URL_DECENT } from '../../../constants/url';
+import ExternalLink, { ExtrernalLinkWrappable } from '../links/ExternalLink';
+import { DecentFooterLogo } from '../proposal/Icons';
+
+export function Footer() {
+ const { t } = useTranslation('home');
+ const commitHash = import.meta.env.VITE_APP_GIT_HASH;
+ return (
+
+ {t('audit')}
+
+
+ {commitHash.substring(0, 7)}
+
+
+
+
+ {t('homeAttribution')}
+
+
+ {/* @todo This should be replaced with proper logo that will include DAO word */}
+
+
+ DAO
+
+
+
+
+ );
+}
diff --git a/src/components/ui/page/Layout/index.tsx b/src/components/ui/page/Layout/index.tsx
index b4355fcd37..ed6fe401ba 100644
--- a/src/components/ui/page/Layout/index.tsx
+++ b/src/components/ui/page/Layout/index.tsx
@@ -1,9 +1,10 @@
import { Box, Container, Grid, GridItem, Show } from '@chakra-ui/react';
import { Outlet } from 'react-router-dom';
-import { CONTENT_HEIGHT, HEADER_HEIGHT } from '../../../../constants/common';
+import { CONTENT_HEIGHT, FOOTER_HEIGHT, HEADER_HEIGHT } from '../../../../constants/common';
import { useFractal } from '../../../../providers/App/AppProvider';
import { ErrorBoundary } from '../../utils/ErrorBoundary';
import { TopErrorFallback } from '../../utils/TopErrorFallback';
+import { Footer } from '../Footer';
import Header from '../Header';
import { NavigationLinks } from '../Navigation/NavigationLinks';
@@ -13,63 +14,66 @@ export default function Layout() {
} = useFractal();
return (
-
+
-
-
- }
- showDialog
+
-
-
-
-
-
- }
+ showDialog
+ >
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
);
}
diff --git a/src/components/ui/proposal/Icons.tsx b/src/components/ui/proposal/Icons.tsx
index eb370cf932..7bfb4fa35c 100644
--- a/src/components/ui/proposal/Icons.tsx
+++ b/src/components/ui/proposal/Icons.tsx
@@ -618,3 +618,44 @@ export function DocsIllustration() {
);
}
+
+export function DecentFooterLogo() {
+ return (
+
+ );
+}
diff --git a/src/constants/common.ts b/src/constants/common.ts
index efd1bd7fd6..50d552cd33 100644
--- a/src/constants/common.ts
+++ b/src/constants/common.ts
@@ -1,5 +1,6 @@
export const HEADER_HEIGHT = '4.5rem';
-export const CONTENT_HEIGHT = `calc(100vh - ${HEADER_HEIGHT})`;
+export const FOOTER_HEIGHT = '4.125rem';
+export const CONTENT_HEIGHT = `calc(100vh - ${HEADER_HEIGHT} - ${FOOTER_HEIGHT})`;
// TODO get these into `decent-ui` repo
export const BACKGROUND_SEMI_TRANSPARENT = '#10041480';
diff --git a/src/i18n/locales/en/home.json b/src/i18n/locales/en/home.json
index f1e8c25834..01f9169b32 100644
--- a/src/i18n/locales/en/home.json
+++ b/src/i18n/locales/en/home.json
@@ -11,6 +11,7 @@
"shutterTitle": "Shutter DAO 0x36",
"myosinTitle": "Myosin",
"textMoreDAOs": "Load More",
- "homeAttribution": "Made with 💜 by <1>Decent DAO",
+ "homeAttribution": "Made with love by",
+ "currentBuild": "Current Build: {{hash}}",
"audit": "Audit"
}
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index b838510604..79b78e0581 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -2,7 +2,6 @@ import { VStack, Text, Flex, Button } from '@chakra-ui/react';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { mainnet, sepolia } from 'wagmi/chains';
-import { AppFooter } from '../components/pages/AppHome/AppFooter';
import CTABox from '../components/pages/AppHome/CTABox';
import FeaturedDAOCard, { FeaturedDAO } from '../components/pages/AppHome/FeaturedDAOCard';
import { CreateDAOIllustration, DocsIllustration } from '../components/ui/proposal/Icons';
@@ -51,6 +50,7 @@ const FEATURED_DAOS = new Map([
{
iconSrc: '/images/icon-myosin.svg',
titleKey: 'myosinTitle',
+ iconBg: 'neutral-3',
network: 'sep',
networkName: 'Sepolia',
votingStrategy: 'ERC-20',
@@ -152,7 +152,6 @@ export default function HomePage() {
) : null}
-
);
}