feat: add prettier

yearn · Oct 4, 2023 · ba8e0bb · ba8e0bb
1 parent 5b9acb7
commit ba8e0bb
Show file tree

Hide file tree

Showing 238 changed files with 17,790 additions and 7,846 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -7,3 +7,4 @@ trim_trailing_whitespace = true
 insert_final_newline = true
 indent_style = tab
 indent_size = 4
+max_line_length = 120
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,21 +1,30 @@
 module.exports = {
-	'extends': ['./node_modules/@yearn-finance/web-lib/.eslintrc.cjs'],
-	'parser': '@typescript-eslint/parser',
-	'parserOptions': {
-		'ecmaFeatures': {
-			'jsx': true
+	extends: ['./node_modules/@yearn-finance/web-lib/.eslintrc.cjs', 'prettier'],
+	parser: '@typescript-eslint/parser',
+	parserOptions: {
+		ecmaFeatures: {
+			jsx: true
 		},
-		'tsconfigRootDir': __dirname,
-		'ecmaVersion': 2022,
-		'sourceType': 'module',
-		'project': ['./tsconfig.json']
+		tsconfigRootDir: __dirname,
+		ecmaVersion: 2022,
+		sourceType: 'module',
+		project: ['./tsconfig.json']
 	},
-	'rules': {
+	rules: {
 		'@typescript-eslint/prefer-optional-chain': 'error',
-		'indent': 'off',
-		'@typescript-eslint/indent': ['error', 'tab'],
+		indent: 'off',
 		'no-multi-spaces': ['error', {ignoreEOLComments: false}],
-		'no-mixed-spaces-and-tabs': 'error',
+		'@typescript-eslint/indent': 0,
+		'no-mixed-spaces-and-tabs': ['warn', 'smart-tabs'],
+		'object-curly-newline': [
+			'error',
+			{
+				ObjectExpression: {multiline: true, consistent: true},
+				ObjectPattern: {multiline: true, consistent: true},
+				ImportDeclaration: {multiline: true, consistent: true},
+				ExportDeclaration: {multiline: true, minProperties: 3}
+			}
+		],
 		'react/jsx-max-props-per-line': 'off'
 	}
 };
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -3,14 +3,16 @@ name: Bug report
 about: Create a report to help us improve the dapp
 title: 'Bug: '
 labels: bug, blog
-
 ---
 
 ### What happened 🆘
+
 **A clear and concise description of what the bug is.**
 
 ### To Reproduce 🔂
+
 Steps to reproduce the behavior:
 
 ### More 🔎
-- Browser : 
+
+-   Browser :
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -1,14 +1,17 @@
 ---
 name: Feature Request Proposal
 about: Ask for a new feature for this website
-title: 'FRP: ' 
+title: 'FRP: '
 ---
 
 ### What is your proposal 🚀
+
 **A clear and concise description of what you are asking for.**
 
 ### What does this solve ? 🛠
+
 **A clear and concise description about why this is a nice to have.**
 
 ### More 🔎
-*N/A*
+
+_N/A_
diff --git a/.lintstagedrc.json b/.lintstagedrc.json
@@ -0,0 +1,4 @@
+{
+	"*.ts|*.tsx": ["yarn prettier-format", "eslint"],
+	"*.scss|*.css": "yarn prettier-format"
+}
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,10 @@
+{
+	"singleQuote": true,
+	"semi": true,
+	"useTabs": true,
+	"tabWidth": 4,
+	"trailingComma": "none",
+	"bracketSpacing": false,
+	"arrowParens": "avoid",
+	"bracketSameLine": true
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/LICENSE.md b/LICENSE.md
diff --git a/README.md b/README.md
@@ -1,72 +1,77 @@
 # yearn.fi
+
 ![](./public/og.png)
 
-Why? 
+Why?
 
 ### Initial Setup
 
-- Fork the [original repo](https://github.com/yearn/yearn.fi) into your GitHub account
-- Clone the forked repo from your GitHub account to your local machine
+-   Fork the [original repo](https://github.com/yearn/yearn.fi) into your GitHub account
+-   Clone the forked repo from your GitHub account to your local machine
 
-  ```
-  git clone https://github.com/<your-gh>/yearn.fi.git
-  ```
+    ```
+    git clone https://github.com/<your-gh>/yearn.fi.git
+    ```
 
-- Set origin to your fork. This is where you push your changes to. This is done automatically by the step above.
+-   Set origin to your fork. This is where you push your changes to. This is done automatically by the step above.
 
-  ```
-  git remote add origin https://github.com/<your-gh>/yearn.fi
-  ```
+    ```
+    git remote add origin https://github.com/<your-gh>/yearn.fi
+    ```
 
-- Set upstream to original repo.
+-   Set upstream to original repo.
 
-  ```
-  git remote add upstream https://github.com/yearn/yearn.fi.git
-  ```
+    ```
+    git remote add upstream https://github.com/yearn/yearn.fi.git
+    ```
 
-- Optional: Create `.env` file in root directory of repo then copy contents of `.env.example` to `.env` and replace values with your own keys. If you do not do this the default values from `next.config.js` will be used.
+-   Optional: Create `.env` file in root directory of repo then copy contents of `.env.example` to `.env` and replace values with your own keys. If you do not do this the default values from `next.config.js` will be used.
 
-  ```
-  cp .env.example .env
+    ```
+    cp .env.example .env
+    ```
 
 ### Install and run
+
 1. Run `yarn`
 2. Run `yarn run dev`
 3. Open the browser and navigate to `http://localhost:3000`
 
 ### Run with Docker
+
 This project can be run with Docker.
+
 1. Build the image: `docker build -t [name-of-your-container] .`
 2. Run the container: `docker run -p 3000:3000 [name-of-your-container]`
 3. Open the browser and navigate to `http://localhost:3000`
 
 ### Making Changes
 
-- Create a new local branch from upstream/main for each PR that you will submit
-  ```
-  git fetch
-  git checkout -b <your branch name> upstream/main
-  ```
-- Commit your changes as you work
-  ```
-  git add .
-  git commit -S -m "message"
-  ```
-  - [info about verified commits](https://docs.github.com/en/github/authenticating-to-github/managing-commit-signature-verification)
+-   Create a new local branch from upstream/main for each PR that you will submit
+    ```
+    git fetch
+    git checkout -b <your branch name> upstream/main
+    ```
+-   Commit your changes as you work
+    ```
+    git add .
+    git commit -S -m "message"
+    ```
+    -   [info about verified commits](https://docs.github.com/en/github/authenticating-to-github/managing-commit-signature-verification)
 
 ### Pushing Changes to your Repo
 
-- Commits are squashed when PR is merged so rebasing is optional
-- When ready to push
-  ```
-  git fetch
-  git merge upstream/main
-  git push origin <branch-name>
-  ```
+-   Commits are squashed when PR is merged so rebasing is optional
+-   When ready to push
+    ```
+    git fetch
+    git merge upstream/main
+    git push origin <branch-name>
+    ```
 
 ### Submitting Pull Request
 
-- Go to your GitHub and navigate to your forked repo
-- Click on `Pull requests` and then click on `New pull request`
-- Click on `compare across forks`
-- Click on `compare:` and select branch that you want to create a pull request for then click on `create pull request`
+-   Go to your GitHub and navigate to your forked repo
+-   Click on `Pull requests` and then click on `New pull request`
+-   Click on `compare across forks`
+-   Click on `compare:` and select branch that you want to create a pull request for then click on `create pull request`
diff --git a/apps/common/components/AmountInput.tsx b/apps/common/components/AmountInput.tsx
@@ -16,7 +16,7 @@ type TAmountInputProps = {
 	onAmountChange?: (amount: string) => void;
 	onLegendClick?: () => void;
 	onMaxClick?: () => void;
-}
+};
 
 export function AmountInput({
 	amount,
@@ -40,15 +40,14 @@ export function AmountInput({
 	}
 	return (
 		<div className={'w-full'}>
-			{label && (
-				<p
-					className={'mb-1 w-full truncate text-base text-neutral-600'}>
-					{label}
-				</p>
-			)}
+			{label && <p className={'mb-1 w-full truncate text-base text-neutral-600'}>{label}</p>}
 			<div className={'relative flex w-full items-center justify-center'}>
 				<input
-					className={`h-10 w-full p-2 font-mono text-base font-normal outline-none ${maxAmount && !disabled ? 'pr-12' : null} ${error ? 'border border-solid border-[#EA5204] focus:border-[#EA5204]' : 'border-0 border-none'} ${disabled ? 'bg-neutral-300 text-neutral-600' : 'bg-neutral-0'}`}
+					className={`h-10 w-full p-2 font-mono text-base font-normal outline-none ${
+						maxAmount && !disabled ? 'pr-12' : null
+					} ${
+						error ? 'border border-solid border-[#EA5204] focus:border-[#EA5204]' : 'border-0 border-none'
+					} ${disabled ? 'bg-neutral-300 text-neutral-600' : 'bg-neutral-0'}`}
 					type={'number'}
 					min={0}
 					aria-label={label}
@@ -60,7 +59,9 @@ export function AmountInput({
 				<Renderable shouldRender={!!maxAmount && !disabled}>
 					<button
 						onClick={onMaxClick ? (): void => onMaxClick() : undefined}
-						className={'absolute right-2 ml-2 h-6 cursor-pointer border-none bg-neutral-900 px-2 py-1 text-xs text-neutral-0 transition-colors hover:bg-neutral-700'}>
+						className={
+							'absolute right-2 ml-2 h-6 cursor-pointer border-none bg-neutral-900 px-2 py-1 text-xs text-neutral-0 transition-colors hover:bg-neutral-700'
+						}>
 						{'Max'}
 					</button>
 				</Renderable>
@@ -77,4 +78,3 @@ export function AmountInput({
 		</div>
 	);
 }
-
diff --git a/apps/common/components/AppHeader.tsx b/apps/common/components/AppHeader.tsx
@@ -34,14 +34,10 @@ function Logo(): ReactElement {
 			<VeYfiHeader pathname={pathname} />
 			<YBribeHeader pathname={pathname} />
 			<MotionDiv name={'yearn'} animate={pathname === '/' ? 'enter' : 'exit'}>
-				<LogoYearn
-					className={'h-8 w-8'}
-					back={'text-neutral-900'}
-					front={'text-neutral-0'} />
+				<LogoYearn className={'h-8 w-8'} back={'text-neutral-900'} front={'text-neutral-0'} />
 			</MotionDiv>
 		</>
 	);
-
 }
 
 function LogoPopover(): ReactElement {
@@ -51,14 +47,17 @@ function LogoPopover(): ReactElement {
 		name: 'yETH',
 		href: 'https://yeth.yearn.fi',
 		isDisabled: false,
-		icon: <ImageWithFallback
-			alt={'yETH'}
-			className={'h-8 w-8'}
-			width={100}
-			height={100}
-			src={`${process.env.BASE_YEARN_ASSETS_URI}/1/0x1BED97CBC3c24A4fb5C069C6E311a967386131f7/logo-128.png`}
-			loading={'eager'}
-			priority />
+		icon: (
+			<ImageWithFallback
+				alt={'yETH'}
+				className={'h-8 w-8'}
+				width={100}
+				height={100}
+				src={`${process.env.BASE_YEARN_ASSETS_URI}/1/0x1BED97CBC3c24A4fb5C069C6E311a967386131f7/logo-128.png`}
+				loading={'eager'}
+				priority
+			/>
+		)
 	};
 
 	return (
@@ -81,32 +80,32 @@ function LogoPopover(): ReactElement {
 				leave={'transition ease-in duration-150'}
 				leaveFrom={'opacity-100 translate-y-0'}
 				leaveTo={'opacity-0 translate-y-1'}>
-				<Popover.Panel className={'absolute left-1/2 z-10 mt-6 w-80 -translate-x-1/2 px-4 pt-4 sm:px-0 md:w-96'}>
+				<Popover.Panel
+					className={'absolute left-1/2 z-10 mt-6 w-80 -translate-x-1/2 px-4 pt-4 sm:px-0 md:w-96'}>
 					<div className={'overflow-hidden border border-neutral-200 shadow-lg'}>
 						<div className={'relative grid grid-cols-2 bg-neutral-0 md:grid-cols-3'}>
-							{
-								[...Object.values(APPS), YETH]
-									.filter(({isDisabled}): boolean => !isDisabled)
-									.map(({name, href, icon}): ReactElement => {
-										return (
-											<Link
-												prefetch={false}
-												key={name}
-												href={href}
-												onClick={(): void => set_isShowing(false)}>
-												<div
-													onClick={(): void => set_isShowing(false)}
-													className={'flex cursor-pointer flex-col items-center p-4 transition-colors hover:bg-neutral-200'}>
-													<div>
-														{cloneElement(icon)}
-													</div>
-													<div className={'pt-2 text-center'}>
-														<b className={'text-base'}>{name}</b>
-													</div>
+							{[...Object.values(APPS), YETH]
+								.filter(({isDisabled}): boolean => !isDisabled)
+								.map(({name, href, icon}): ReactElement => {
+									return (
+										<Link
+											prefetch={false}
+											key={name}
+											href={href}
+											onClick={(): void => set_isShowing(false)}>
+											<div
+												onClick={(): void => set_isShowing(false)}
+												className={
+													'flex cursor-pointer flex-col items-center p-4 transition-colors hover:bg-neutral-200'
+												}>
+												<div>{cloneElement(icon)}</div>
+												<div className={'pt-2 text-center'}>
+													<b className={'text-base'}>{name}</b>
 												</div>
-											</Link>
-										);
-									})}
+											</div>
+										</Link>
+									);
+								})}
 						</div>
 					</div>
 				</Popover.Panel>
@@ -144,13 +143,16 @@ export function AppHeader(): ReactElement {
 		}
 		return [
 			HOME_MENU,
-			{path: 'https://gov.yearn.fi/', label: 'Governance', target: '_blank'},
+			{
+				path: 'https://gov.yearn.fi/',
+				label: 'Governance',
+				target: '_blank'
+			},
 			{path: 'https://blog.yearn.fi/', label: 'Blog', target: '_blank'},
 			{path: 'https://docs.yearn.fi/', label: 'Docs', target: '_blank'}
 		];
 	}, [pathname]);
 
-
 	const supportedNetworks = useMemo((): number[] => {
 		const ethereumOnlyPaths = ['/ycrv', '/ybal', '/veyfi', '/ybribe'];
 		if (ethereumOnlyPaths.some((path): boolean => pathname.startsWith(path))) {
@@ -168,11 +170,11 @@ export function AppHeader(): ReactElement {
 			onOpenMenuMobile={onOpenMenu}
 			nav={menu}
 			supportedNetworks={supportedNetworks}
-			logo={(
+			logo={
 				<AnimatePresence mode={'wait'}>
 					<LogoPopover />
 				</AnimatePresence>
-			)}
+			}
 			extra={
 				<Renderable shouldRender={isActive && isMounted()}>
 					<div className={'ml-4'}>