Skip to content
This repository was archived by the owner on Dec 26, 2023. It is now read-only.

Commit 1716008

Browse files
author
ALBERT
authored
Add OpenSea link to footer (#238)
* Update OpenSea Icon with official svg Grabbed an updated white SVG logo from: https://docs.opensea.io/docs/logos in order to match the styling of the other social logos on the home page * Create NewFooter component This component is refactored from the current index page. There is another "Footer" component that is not actually displayed in production. In a future PR we can clean up the code by deleting the old Footer and renaming NewFooter to just "Footer". * Refactor index page to use NewFooter This is should be a no-op change. It's a simple refactor to extract the Footer logic so that the NewFooter component will be easier to write tests for later. * Add OpenSea Icon to the footer This commit resolves https://github.com/Developer-DAO/developerdao.com/issues/237 * Update footer component tests Rename old tests and add new tests for the NewFooter component.
1 parent 23ffa03 commit 1716008

File tree

4 files changed

+127
-94
lines changed

4 files changed

+127
-94
lines changed

‎frontend/_tests_/Footer/index.test.jsx

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,26 @@
11
import React from 'react';
22
import { render, screen } from '@testing-library/react';
33
import Footer from '../../src/components/Footer/index';
4+
import NewFooter from '../../src/components/NewFooter/index';
45

56
describe('Footer', () => {
6-
it('Renders the icons', () => {
7+
it('Renders the social icons on the new Footer component', () => {
8+
console.log('lol testing');
9+
render(<NewFooter />);
10+
11+
const openSea = screen.getByLabelText('OpenSea');
12+
const twitter = screen.getByLabelText('Twitter');
13+
const discord = screen.getByLabelText('Discord');
14+
const github = screen.getByLabelText('GitHub');
15+
16+
expect(openSea).toBeInTheDocument();
17+
expect(twitter).toBeInTheDocument();
18+
expect(discord).toBeInTheDocument();
19+
expect(github).toBeInTheDocument();
20+
});
21+
22+
// TODO: deprecate the old Footer component, it is no longer used
23+
it('Renders the icons on the old Footer component', () => {
724
render(<Footer />);
825

926
const openSea = screen.getByTitle('OpenSea');

‎frontend/src/components/Icons/opensea.tsx

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import React from 'react';
22

33
function IconOpenSea({
44
className = '',
5-
width = '40',
6-
height = '40',
5+
width = '30',
6+
height = '30',
77
}: {
88
className?: string;
99
width?: string;
@@ -14,20 +14,13 @@ function IconOpenSea({
1414
className={className}
1515
width={width}
1616
height={height}
17-
viewBox="0 0 40 40"
17+
viewBox="0 0 90 90"
1818
fill="none"
1919
xmlns="http://www.w3.org/2000/svg"
2020
>
2121
<path
22-
d="M40 20C40 31.0451 31.0451 40 20 40C8.95493 40 0 31.0451 0 20C0 8.95493 8.95493 0 20 0C31.0474 0 40 8.95493 40 20Z"
23-
fill="#2081E2"
24-
/>
25-
<path
26-
d="M9.86718 20.672L9.95349 20.5364L15.1563 12.3973C15.2323 12.2781 15.4111 12.2904 15.4686 12.4199C16.3378 14.3679 17.0878 16.7905 16.7364 18.2987C16.5864 18.9192 16.1755 19.7597 15.7131 20.5364C15.6535 20.6494 15.5878 20.7604 15.5179 20.8672C15.485 20.9165 15.4296 20.9453 15.37 20.9453H10.0192C9.8754 20.9453 9.79118 20.7892 9.86718 20.672Z"
27-
fill="white"
28-
/>
29-
<path
30-
d="M33.0578 22.1844V23.4728C33.0578 23.5467 33.0126 23.6125 32.9469 23.6412C32.5441 23.8139 31.1653 24.4468 30.592 25.244C29.129 27.2803 28.0112 30.192 25.5125 30.192H15.0885C11.3939 30.192 8.40002 27.1879 8.40002 23.481V23.3618C8.40002 23.2632 8.48016 23.183 8.57882 23.183H14.3898C14.5049 23.183 14.5891 23.2899 14.5789 23.4029C14.5378 23.781 14.6076 24.1673 14.7864 24.5187C15.1316 25.2193 15.8467 25.657 16.6193 25.657H19.496V23.4111H16.6522C16.5063 23.4111 16.42 23.2426 16.5042 23.1234C16.535 23.0762 16.57 23.0268 16.607 22.9714C16.8762 22.5892 17.2604 21.9953 17.6426 21.3193C17.9035 20.8632 18.1563 20.3761 18.3597 19.8871C18.4008 19.7988 18.4337 19.7084 18.4666 19.62C18.5221 19.4638 18.5796 19.3179 18.6207 19.172C18.6618 19.0488 18.6946 18.9193 18.7275 18.798C18.8241 18.383 18.8652 17.9432 18.8652 17.4871C18.8652 17.3083 18.857 17.1213 18.8406 16.9425C18.8323 16.7473 18.8077 16.5521 18.783 16.3569C18.7666 16.1843 18.7358 16.0138 18.7029 15.835C18.6618 15.574 18.6042 15.3152 18.5385 15.0542L18.5159 14.9556C18.4666 14.7768 18.4255 14.6062 18.3679 14.4275C18.2056 13.8665 18.0186 13.3199 17.8214 12.8083C17.7494 12.6048 17.6672 12.4096 17.585 12.2144C17.4638 11.9206 17.3405 11.6535 17.2275 11.4007C17.17 11.2856 17.1206 11.1808 17.0714 11.074C17.0159 10.9528 16.9583 10.8316 16.9008 10.7164C16.8597 10.6281 16.8124 10.5459 16.7796 10.4637L16.4282 9.8144C16.3789 9.72604 16.4611 9.62124 16.5576 9.64795L18.7563 10.2439H18.7625C18.7666 10.2439 18.7686 10.2459 18.7707 10.2459L19.0604 10.326L19.3789 10.4164L19.496 10.4493V9.14249C19.496 8.51164 20.0015 8 20.6262 8C20.9385 8 21.2221 8.12738 21.4255 8.33493C21.6289 8.54249 21.7563 8.82604 21.7563 9.14249V11.0822L21.9906 11.148C22.0091 11.1541 22.0276 11.1624 22.044 11.1747C22.1015 11.2178 22.1837 11.2816 22.2885 11.3596C22.3707 11.4254 22.4591 11.5055 22.5659 11.5877C22.7776 11.7583 23.0303 11.9781 23.3077 12.2308C23.3817 12.2946 23.4536 12.3603 23.5194 12.4261C23.8769 12.7589 24.2776 13.1494 24.6598 13.5809C24.7666 13.7021 24.8714 13.8254 24.9783 13.9548C25.0851 14.0864 25.1982 14.2158 25.2968 14.3453C25.4262 14.5179 25.5659 14.6966 25.6872 14.8836C25.7447 14.972 25.8105 15.0624 25.866 15.1508C26.0221 15.3871 26.1598 15.6316 26.2913 15.8761C26.3468 15.9891 26.4043 16.1124 26.4536 16.2336C26.5995 16.5604 26.7146 16.8932 26.7886 17.2261C26.8112 17.298 26.8276 17.3761 26.8358 17.446V17.4624C26.8605 17.5611 26.8687 17.6659 26.8769 17.7727C26.9098 18.1138 26.8934 18.4549 26.8194 18.798C26.7886 18.944 26.7475 19.0816 26.6982 19.2275C26.6488 19.3672 26.5995 19.5131 26.5358 19.6508C26.4126 19.9364 26.2666 20.222 26.094 20.4892C26.0386 20.5878 25.9728 20.6926 25.907 20.7912C25.8351 20.896 25.7612 20.9947 25.6954 21.0912C25.605 21.2145 25.5084 21.344 25.4098 21.459C25.3214 21.5803 25.231 21.7015 25.1324 21.8084C24.9947 21.9707 24.8632 22.1248 24.7255 22.2728C24.6434 22.3693 24.555 22.468 24.4646 22.5563C24.3762 22.6549 24.2858 22.7433 24.2036 22.8255C24.0659 22.9632 23.9509 23.07 23.8543 23.1584L23.6282 23.3659C23.5954 23.3947 23.5522 23.4111 23.507 23.4111H21.7563V25.657H23.9591C24.4522 25.657 24.9207 25.4824 25.2988 25.1618C25.4283 25.0488 25.9934 24.5597 26.6612 23.8221C26.6838 23.7974 26.7126 23.7789 26.7454 23.7707L32.8297 22.0118C32.9427 21.9789 33.0578 22.0652 33.0578 22.1844Z"
22+
xmlns="http://www.w3.org/2000/svg"
23+
d="M45 0C20.151 0 0 20.151 0 45C0 69.849 20.151 90 45 90C69.849 90 90 69.849 90 45C90 20.151 69.858 0 45 0ZM22.203 46.512L22.392 46.206L34.101 27.891C34.272 27.63 34.677 27.657 34.803 27.945C36.756 32.328 38.448 37.782 37.656 41.175C37.323 42.57 36.396 44.46 35.352 46.206C35.217 46.458 35.073 46.71 34.911 46.953C34.839 47.061 34.713 47.124 34.578 47.124H22.545C22.221 47.124 22.032 46.773 22.203 46.512ZM74.376 52.812C74.376 52.983 74.277 53.127 74.133 53.19C73.224 53.577 70.119 55.008 68.832 56.799C65.538 61.38 63.027 67.932 57.402 67.932H33.948C25.632 67.932 18.9 61.173 18.9 52.83V52.56C18.9 52.344 19.08 52.164 19.305 52.164H32.373C32.634 52.164 32.823 52.398 32.805 52.659C32.706 53.505 32.868 54.378 33.273 55.17C34.047 56.745 35.658 57.726 37.395 57.726H43.866V52.677H37.467C37.143 52.677 36.945 52.299 37.134 52.029C37.206 51.921 37.278 51.813 37.368 51.687C37.971 50.823 38.835 49.491 39.699 47.97C40.284 46.944 40.851 45.846 41.31 44.748C41.4 44.55 41.472 44.343 41.553 44.145C41.679 43.794 41.805 43.461 41.895 43.137C41.985 42.858 42.066 42.57 42.138 42.3C42.354 41.364 42.444 40.374 42.444 39.348C42.444 38.943 42.426 38.52 42.39 38.124C42.372 37.683 42.318 37.242 42.264 36.801C42.228 36.414 42.156 36.027 42.084 35.631C41.985 35.046 41.859 34.461 41.715 33.876L41.661 33.651C41.553 33.246 41.454 32.868 41.328 32.463C40.959 31.203 40.545 29.97 40.095 28.818C39.933 28.359 39.753 27.918 39.564 27.486C39.294 26.82 39.015 26.217 38.763 25.65C38.628 25.389 38.52 25.155 38.412 24.912C38.286 24.642 38.16 24.372 38.025 24.111C37.935 23.913 37.827 23.724 37.755 23.544L36.963 22.086C36.855 21.888 37.035 21.645 37.251 21.708L42.201 23.049H42.219C42.228 23.049 42.228 23.049 42.237 23.049L42.885 23.238L43.605 23.436L43.866 23.508V20.574C43.866 19.152 45 18 46.413 18C47.115 18 47.754 18.288 48.204 18.756C48.663 19.224 48.951 19.863 48.951 20.574V24.939L49.482 25.083C49.518 25.101 49.563 25.119 49.599 25.146C49.725 25.236 49.914 25.38 50.148 25.56C50.337 25.704 50.535 25.884 50.769 26.073C51.246 26.46 51.822 26.955 52.443 27.522C52.605 27.666 52.767 27.81 52.92 27.963C53.721 28.71 54.621 29.583 55.485 30.555C55.728 30.834 55.962 31.104 56.205 31.401C56.439 31.698 56.7 31.986 56.916 32.274C57.213 32.661 57.519 33.066 57.798 33.489C57.924 33.687 58.077 33.894 58.194 34.092C58.554 34.623 58.86 35.172 59.157 35.721C59.283 35.973 59.409 36.252 59.517 36.522C59.85 37.26 60.111 38.007 60.273 38.763C60.327 38.925 60.363 39.096 60.381 39.258V39.294C60.435 39.51 60.453 39.744 60.471 39.987C60.543 40.752 60.507 41.526 60.345 42.3C60.273 42.624 60.183 42.93 60.075 43.263C59.958 43.578 59.85 43.902 59.706 44.217C59.427 44.856 59.103 45.504 58.716 46.098C58.59 46.323 58.437 46.557 58.293 46.782C58.131 47.016 57.96 47.241 57.816 47.457C57.609 47.736 57.393 48.024 57.168 48.285C56.97 48.555 56.772 48.825 56.547 49.068C56.241 49.437 55.944 49.779 55.629 50.112C55.449 50.328 55.251 50.553 55.044 50.751C54.846 50.976 54.639 51.174 54.459 51.354C54.144 51.669 53.892 51.903 53.676 52.11L53.163 52.569C53.091 52.641 52.992 52.677 52.893 52.677H48.951V57.726H53.91C55.017 57.726 56.07 57.339 56.925 56.61C57.213 56.358 58.482 55.26 59.985 53.604C60.039 53.541 60.102 53.505 60.174 53.487L73.863 49.527C74.124 49.455 74.376 49.644 74.376 49.914V52.812V52.812Z"
3124
fill="white"
3225
/>
3326
</svg>

‎frontend/src/components/NewFooter/index.tsx

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import {
2+
Flex,
3+
HStack,
4+
IconButton,
5+
Text,
6+
VisuallyHidden,
7+
VStack,
8+
} from '@chakra-ui/react';
9+
import { ReactElement } from 'react';
10+
import { FaDiscord, FaGithub, FaTwitter } from 'react-icons/fa';
11+
import Image from 'next/image';
12+
import { useTranslation } from 'react-i18next';
13+
import { IconOpenSea } from '../../components/Icons';
14+
15+
function Footer() {
16+
const { t } = useTranslation();
17+
18+
return (
19+
<VStack spacing={4}>
20+
<HStack as="footer" justify="center">
21+
<SocialIconLink
22+
href="https://twitter.com/developer_dao"
23+
label="Twitter"
24+
>
25+
<>
26+
<FaTwitter />
27+
<VisuallyHidden>
28+
{t('socialLinkLabel', { platform: 'Twitter' })}
29+
</VisuallyHidden>
30+
</>
31+
</SocialIconLink>
32+
<SocialIconLink href="https://discord.gg/devdao" label="Discord">
33+
<>
34+
<FaDiscord />
35+
<VisuallyHidden>
36+
{t('socialLinkLabel', { platform: 'Discord' })}
37+
</VisuallyHidden>
38+
</>
39+
</SocialIconLink>
40+
<SocialIconLink
41+
href="https://opensea.io/collection/devs-for-revolution"
42+
label="OpenSea"
43+
>
44+
<>
45+
<IconOpenSea />
46+
<VisuallyHidden>
47+
{t('socialLinkLabel', { platform: 'OpenSea' })}
48+
</VisuallyHidden>
49+
</>
50+
</SocialIconLink>
51+
<SocialIconLink href="https://github.com/Developer-DAO" label="GitHub">
52+
<>
53+
<FaGithub />
54+
<VisuallyHidden>
55+
{t('socialLinkLabel', { platform: 'GitHub' })}
56+
</VisuallyHidden>
57+
</>
58+
</SocialIconLink>
59+
</HStack>
60+
61+
<HStack
62+
as="a"
63+
href="https://vercel.com/?utm_source=developerdao&utm_campaign=oss"
64+
fontSize="sm"
65+
>
66+
<Text>Powered by</Text>
67+
<Flex align="center">
68+
<Image
69+
src="/vercel-logotype-light.svg"
70+
alt="Vercel"
71+
width="100px"
72+
height="22px"
73+
/>
74+
</Flex>
75+
</HStack>
76+
</VStack>
77+
);
78+
}
79+
80+
const SocialIconLink = ({
81+
children,
82+
href,
83+
label,
84+
}: {
85+
children: ReactElement;
86+
href: string;
87+
label: string;
88+
}) => {
89+
return (
90+
<IconButton
91+
as="a"
92+
aria-label={label}
93+
cursor="pointer"
94+
href={href}
95+
icon={children}
96+
size="lg"
97+
variant="ghost"
98+
/>
99+
);
100+
};
101+
102+
export default Footer;

‎frontend/src/pages/index.tsx

Lines changed: 2 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,21 @@ import {
22
Box,
33
Button,
44
Container,
5-
Flex,
65
Heading,
7-
HStack,
86
Icon,
9-
IconButton,
107
ListItem,
118
Stack,
129
StackDivider,
1310
Text,
1411
UnorderedList,
1512
useBreakpointValue,
16-
VisuallyHidden,
17-
VStack,
1813
} from '@chakra-ui/react';
1914
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
20-
import { ReactElement } from 'react';
2115
import { BsLightningCharge } from 'react-icons/bs';
22-
import { FaDiscord, FaGithub, FaTwitter } from 'react-icons/fa';
2316
import { GiCrownedHeart } from 'react-icons/gi';
24-
import Image from 'next/image';
2517
import { useTranslation } from 'react-i18next';
2618
import DeveloperDaoLogo from '../components/Logo';
19+
import Footer from '../components/NewFooter';
2720

2821
export default function IndexPage() {
2922
const { t } = useTranslation();
@@ -129,57 +122,7 @@ export default function IndexPage() {
129122
</UnorderedList>
130123
</Stack>
131124
</Stack>
132-
133-
<VStack spacing={4}>
134-
<HStack as="footer" justify="center">
135-
<SocialIconLink
136-
href="https://twitter.com/developer_dao"
137-
label="Twitter"
138-
>
139-
<>
140-
<FaTwitter />
141-
<VisuallyHidden>
142-
{t('socialLinkLabel', { platform: 'Twitter' })}
143-
</VisuallyHidden>
144-
</>
145-
</SocialIconLink>
146-
<SocialIconLink href="https://discord.gg/devdao" label="Discord">
147-
<>
148-
<FaDiscord />
149-
<VisuallyHidden>
150-
{t('socialLinkLabel', { platform: 'Discord' })}
151-
</VisuallyHidden>
152-
</>
153-
</SocialIconLink>
154-
<SocialIconLink
155-
href="https://github.com/Developer-DAO"
156-
label="GitHub"
157-
>
158-
<>
159-
<FaGithub />
160-
<VisuallyHidden>
161-
{t('socialLinkLabel', { platform: 'GitHub' })}
162-
</VisuallyHidden>
163-
</>
164-
</SocialIconLink>
165-
</HStack>
166-
167-
<HStack
168-
as="a"
169-
href="https://vercel.com/?utm_source=developerdao&utm_campaign=oss"
170-
fontSize="sm"
171-
>
172-
<Text>Powered by</Text>
173-
<Flex align="center">
174-
<Image
175-
src="/vercel-logotype-light.svg"
176-
alt="Vercel"
177-
width="100px"
178-
height="22px"
179-
/>
180-
</Flex>
181-
</HStack>
182-
</VStack>
125+
<Footer />
183126
</Stack>
184127
</Container>
185128
);
@@ -237,25 +180,3 @@ const CurrentStatus = () => {
237180
</Stack>
238181
);
239182
};
240-
241-
const SocialIconLink = ({
242-
children,
243-
href,
244-
label,
245-
}: {
246-
children: ReactElement;
247-
href: string;
248-
label: string;
249-
}) => {
250-
return (
251-
<IconButton
252-
as="a"
253-
aria-label={label}
254-
cursor="pointer"
255-
href={href}
256-
icon={children}
257-
size="lg"
258-
variant="ghost"
259-
/>
260-
);
261-
};

0 commit comments

Comments
 (0)