Merge branch 'develop'

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "markdown.preview.fontSize": 16,
+    "terminal.integrated.fontSize": 16,
+    "editor.fontSize": 14,
+    "editor.scrollbar.verticalScrollbarSize": 12
+}

packages/react-app/jest.config.js

@@ -23,36 +23,36 @@
  * */
 
 module.exports = {
-  projects: [
-    {
-      displayName: 'server',
-      preset: 'ts-jest',
-      testMatch: ["**/?(*.)+(spec|test).[tj]s"],
-      moduleNameMapper: {
-        '@app/(.*)$': '<rootDir>/src/$1',
-        '@tests/(.*)$': '<rootDir>/tests/$1'
-      },   
-    },
-    {
-      displayName: 'client',
-      testEnvironment: "jsdom",
-      preset: 'ts-jest/presets/js-with-ts',
-      setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
-      globals: {
-        'ts-jest': {
-          tsconfig: '<rootDir>/tsconfig.jest.json',
-        },
-      },
-      testMatch: ["**/?(*.)+(spec|test).[tj]sx"],
-      moduleNameMapper: {
-        '^.+\\.(css|scss|less|sass)$': '<rootDir>/tests/stubs/css.stub.ts',
-        '@app/(.*)$': '<rootDir>/src/$1',
-        '@tests/(.*)$': '<rootDir>/tests/$1'
-      },
-    }
-  ],
-  collectCoverageFrom: [
-    "<rootDir>/src/**/*.{js,ts}",
-    "!**/node_modules/**",
-  ],
-}
+	projects: [
+		{
+			displayName: 'server',
+			preset: 'ts-jest',
+			testMatch: ['**/?(*.)+(spec|test).[tj]s'],
+			moduleNameMapper: {
+				'@app/(.*)$': '<rootDir>/src/$1',
+				'@tests/(.*)$': '<rootDir>/tests/$1',
+			},
+		},
+		{
+			displayName: 'client',
+			testEnvironment: 'jsdom',
+			preset: 'ts-jest/presets/js-with-ts',
+			setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
+			globals: {
+				'ts-jest': {
+					tsconfig: '<rootDir>/tsconfig.jest.json',
+				},
+			},
+			testMatch: ['**/?(*.)+(spec|test).[tj]sx'],
+			moduleNameMapper: {
+				'^.+\\.(css|scss|less|sass)$': '<rootDir>/tests/stubs/css.stub.ts',
+				'@app/(.*)$': '<rootDir>/src/$1',
+				'@tests/(.*)$': '<rootDir>/tests/$1',
+			},
+		},
+	],
+	collectCoverageFrom: [
+		'<rootDir>/src/**/*.{js,ts}',
+		'!**/node_modules/**',
+	],
+};

packages/react-app/next-seo.config.ts

@@ -1,31 +1,31 @@
-export const title = 'Bankless Bounty Board'
-const description = 'Bankless Bounty Board'
-const url = 'https://bountyboard.bankless.community'
+export const title = 'Bankless Bounty Board';
+const description = 'Bankless Bounty Board';
+const url = 'https://bountyboard.bankless.community';
 
 const SEO = {
-  title,
-  description,
-  canonical: url,
-  openGraph: {
-    type: 'website',
-    url,
-    title,
-    description,
-    images: [
-      {
-        url: `https://www.bankless.community/logo.svg`,
-        alt: title,
-        width: 2048,
-        height: 1170,
-      },
-    ],
-  },
-  twitter: {
-    cardType: 'summary_large_image',
-    handle: '@banklessdao',
-    site: '@banklessdao',
-  },
-  additionalLinkTags: [{ rel: 'icon', href: '/favicon.png' }],
-}
+	title,
+	description,
+	canonical: url,
+	openGraph: {
+		type: 'website',
+		url,
+		title,
+		description,
+		images: [
+			{
+				url: 'https://www.bankless.community/logo.svg',
+				alt: title,
+				width: 2048,
+				height: 1170,
+			},
+		],
+	},
+	twitter: {
+		cardType: 'summary_large_image',
+		handle: '@banklessdao',
+		site: '@banklessdao',
+	},
+	additionalLinkTags: [{ rel: 'icon', href: '/favicon.png' }],
+};
 
-export default SEO
+export default SEO;

packages/react-app/next.config.js

@@ -10,14 +10,14 @@ module.exports = {
 		return [
 		  {
 			// matching all API routes
-			source: "/api/:path*",
-			headers: [
-			  { key: "Access-Control-Allow-Credentials", value: "true" },
-			  { key: "Access-Control-Allow-Origin", value: "*" },
-			  { key: "Access-Control-Allow-Methods", value: "GET,OPTIONS,PUT,DELETE,POST,PATCH" },
-			  { key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" },
-			]
-		  }
-		]
-	  }
+				source: '/api/:path*',
+				headers: [
+			  { key: 'Access-Control-Allow-Credentials', value: 'true' },
+			  { key: 'Access-Control-Allow-Origin', value: '*' },
+			  { key: 'Access-Control-Allow-Methods', value: 'GET,OPTIONS,PUT,DELETE,POST,PATCH' },
+			  { key: 'Access-Control-Allow-Headers', value: 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version' },
+				],
+		  },
+		];
+	  },
 };

packages/react-app/package.json

@@ -97,7 +97,6 @@
     "jest": "^27.3.1",
     "react-dom": "^17.0.2",
     "react-test-renderer": "^17.0.2",
-    "react-test-utils": "^0.0.1",
     "ts-jest": "^27.0.7",
     "typescript": "^4.3.5"
   }

packages/react-app/src/components/global/Auth/index.tsx

@@ -4,22 +4,24 @@ import { useContext } from 'react';
 
 export const useRequiredRoles = (roles: Role[]): boolean => {
 	const { roles: userRoles } = useContext(AuthContext);
-	return roles.some(r => userRoles.includes(r));
+	return roles.some((r) => userRoles.includes(r));
 };
 
-const RestrictedTo = ({ roles, children }: { roles: Role[], children: React.ReactNode }): JSX.Element => {
+const RestrictedTo = ({
+	roles,
+	children,
+}: {
+  roles: Role[];
+  children: React.ReactNode;
+}): JSX.Element => {
 	/**
    * Higher order component to show/hide display based on RBAC
    * Wrap your regular comonents inside this to apply consistent show/hide functionality
    * across the application
    * @param roles an array of roles that will cause the component to show
    */
 	const hasRequiredRole = useRequiredRoles(roles);
-	return (
-		<>
-			{ hasRequiredRole && children }
-		</>
-	);
+	return <>{hasRequiredRole && children}</>;
 };
 
-export default RestrictedTo;
+export default RestrictedTo;

packages/react-app/src/components/global/Footer/index.tsx

@@ -29,7 +29,7 @@ const Footer = (): JSX.Element => {
 					</HStack>
 				</Flex>
 				<Text my={['5', '5', '0']} textAlign="center" w="1/2">
-          &copy; {new Date().getFullYear()} Bankless DAO
+                 &copy; {new Date().getFullYear()} Bankless DAO
 				</Text>
 			</Flex>
 			<ThemeToggle />

packages/react-app/src/components/global/Header/BountyList.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Link } from '@chakra-ui/react';
+import ColorModeButton from '@app/components/parts/ColorModeButton';
+
+const BountyList = (): JSX.Element => {
+	return (
+		<Link
+			aria-label="list-btn"
+			href="/"
+			w={{ base: '20em', md: 'auto' }}
+			h={{ base: '2em', md: '2.6em' }}
+		>
+			<ColorModeButton
+				w={{ base: '20em', md: 'auto' }}
+				h={{ base: '3em', md: '2.6em' }}
+			>
+                  Bounty List
+			</ColorModeButton>
+		</Link>
+	);
+};
+
+export default BountyList;

packages/react-app/src/components/global/Header/DAOSelector.tsx

@@ -6,15 +6,15 @@ import { CustomerContext } from '../../../context/CustomerContext';
 export const DAOSelector = ({
 	customers,
 }: {
-	customers: CustomerProps[] | [];
+  customers: CustomerProps[] | [];
 }): JSX.Element => {
 	const { customer, setCustomer } = useContext(CustomerContext);
 
 	const onChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
 		/**
-	 * When the user changes the DAO using the selector
-	 * navigate to the homepage and update the customer to the newly selected DAO
-	 */
+     * When the user changes the DAO using the selector
+     * navigate to the homepage and update the customer to the newly selected DAO
+     */
 		// router.push('/');
 		const _customer = customers.find(
 			({ customerName }) => customerName === event.target.value
@@ -38,12 +38,11 @@ export const DAOSelector = ({
 			h={{ base: '3em', md: '2.6em' }}
 			textAlign={{ base: 'center', md: 'start' }}
 		>
-
 			{customers && customers.map((option) => (
-				<option key={option.customerId} value={option.customerName}>
-					{option.customerName}
-				</option>
-			))}
+        	<option key={option.customerId} value={option.customerName}>
+        		{option.customerName}
+        	</option>
+		 ))}
 		</Select>
 	);
 };

packages/react-app/src/components/global/Header/Logo.tsx

@@ -3,26 +3,30 @@ import Link from 'next/link';
 import NextImage from 'next/image';
 import { useMemo } from 'react';
 
-const usePublicLogo = (img?: string) => useMemo(() => {
-	/**
-	 * https://nextjs.org/docs/basic-features/static-file-serving
-	 * App will crash if a logo is passed but does not start with a slash
-	 * It will also crash if a logo starts with 2 slashes
-	 * It WILL work for `/./path/to/file.png`
-	 */
-	if (!img) return '/logo.png';
-	let logo: string;
-	if (img[0] === '/') {
-		logo = img;
-	} else if (img.slice(0, 2) === './') {
-		logo = img.slice(1);
-	} else {
-		logo = '/' + img;
-	}
-	return logo;
-}, [img]);
+const usePublicLogo = (img?: string) =>
+	useMemo(() => {
+		/**
+     * https://nextjs.org/docs/basic-features/static-file-serving
+     * App will crash if a logo is passed but does not start with a slash
+     * It will also crash if a logo starts with 2 slashes
+     * It WILL work for `/./path/to/file.png`
+     */
+		if (!img) return '/logo.png';
+		let logo: string;
+		if (img[0] === '/') {
+			logo = img;
+		} else if (img.slice(0, 2) === './') {
+			logo = img.slice(1);
+		} else {
+			logo = '/' + img;
+		}
+		return logo;
+	}, [img]);
 
-export default function Logo(props: { img?: string; alt?: string }): JSX.Element {
+export default function Logo(props: {
+  img?: string;
+  alt?: string;
+}): JSX.Element {
 	const logo = usePublicLogo(props.img);
 	return (
 		<Box boxSize={{ base: '75px', md: '100px' }}>

packages/react-app/src/components/global/Header/MenuLinks.tsx

@@ -8,14 +8,15 @@ import { DiscordGuild } from '../../../types/Discord';
 import axios from 'axios';
 import useSWR from 'swr';
 import NewBounty from './NewBounty';
+import BountyList from './BountyList';
 import { DAOSelector } from './DAOSelector';
 import { toggleDiscordSignIn } from '../../../services/discord.service';
 import DiscordBttn from './DiscordBttn';
 
 interface MenuItemProps {
-	children?: React.ReactNode;
-	isLast?: boolean;
-	newTab?: boolean;
+  children?: React.ReactNode;
+  isLast?: boolean;
+  newTab?: boolean;
 }
 
 const MenuItem = ({
@@ -30,7 +31,6 @@ const MenuItem = ({
 	</AccessibleLink>
 );
 
-
 export const tokenFetcher = (url: string, token: string): any =>
 	axios
 		.get(url, {
@@ -88,6 +88,7 @@ export const MenuLinks = (): JSX.Element => {
 				direction={{ base: 'column-reverse', md: 'row' }}
 				align="center"
 			>
+				<BountyList />
 				<NewBounty />
 				{session && <DAOSelector customers={customers} />}
 				<MenuItem newTab={false}>

packages/react-app/src/components/global/Header/MobileMenu.tsx

@@ -17,8 +17,8 @@ import ThemeToggle from '@app/components/parts/ThemeToggle';
 import { MenuLinks } from './MenuLinks';
 
 interface MobileProps {
-	isOpen: boolean;
-	onClose: VoidFunction;
+  isOpen: boolean;
+  onClose: VoidFunction;
 }
 
 export const MobileMenu = ({ isOpen, onClose }: MobileProps): JSX.Element => {
@@ -31,7 +31,9 @@ export const MobileMenu = ({ isOpen, onClose }: MobileProps): JSX.Element => {
 					<Flex>
 						<Logo
 							alt={`${customer?.customerName ?? 'DAO'} Logo`}
-							img={'/assets/logos/' + (customer?.customization?.logo ?? 'logo.png')}
+							img={
+								'/assets/logos/' + (customer?.customization?.logo ?? 'logo.png')
+							}
 						/>
 						<DrawerCloseButton w={'4em'} h={'4em'} onClick={onClose} />
 					</Flex>

packages/react-app/src/components/global/Header/NewBounty.tsx

@@ -20,7 +20,7 @@ const NewBounty = (): JSX.Element => {
 					w={{ base: '20em', md: 'auto' }}
 					h={{ base: '3em', md: '2.6em' }}
 				>
-          New Bounty
+                  New Bounty
 				</ColorModeButton>
 			</Link>
 		</RestrictedTo>