feat: migrate to typescript (#192)

* feat: migrate to typescript

* fix: merge

* fix: remove exta file

* fix: some issues

* fix: matic

* fix: ts issues

* fix: bump node on vercel

* fix: bump node on vercel

* fix: color

* fix: copy change

* refactor: Adjust styles to improve readability and Plausible setup (#198)

* feat: setup plausible

* style: Adjust text color property

* style: Adjust text color

* style: Attempt to standardize colors for titles, text, and borders

* chore: add Issue / PR Templates

---------

Co-authored-by: Itzabelli <104786213+Itzabelli@users.noreply.github.com>

* chore: Correct name of templates folder (#199)

Folder was accidently named "github" instead of ".github" meaning it wasn't usable in the way we originally intended

* style: adjust text styles to improve readability (#200)

Minor adjustments to more clearly show difference between labels and dyanamic values

* fix: Resolve console error by avoiding nested <a> tags (#202)

Error present because vault items contain links but tags (within these items) also link to other sites

* refactor: Change CG Symbol to always be lowercase (#204)

in vaults.json this attribute was sometimes upperase sometimes lowercase causing confusion when adding new entries

* chore: Improve responsiveness of header (#208)

Adjust media query of the title

* refactor: Update react imports (#209)

Adjust and remove unnecessary imports

* fix: Resolve infinite load on vault apr (#210)

The suspense condition was causing loading to go on forever, slight adjustment corrected this

* chore: Add script ‘lintfix’ (#212)

* chore: Improve responsiveness of deploy vault button (#213)

---------

Co-authored-by: 0xMirim <95051992+0xMirim@users.noreply.github.com>
Co-authored-by: Itzabelli <104786213+Itzabelli@users.noreply.github.com>

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = tab
+indent_size = 4

.eslintignore

@@ -0,0 +1,4 @@
+# Auto Generated PWA files
+public/sw*
+public/workbox*
+ipfs/*

.eslintrc.js

@@ -1,116 +1,20 @@
 module.exports = {
-	'env': {
-		'node': true,
-		'browser': true,
-		'es2021': true
-	},
-	'extends': [
-		'eslint:recommended',
-		'plugin:import/recommended',
-		'plugin:react-hooks/recommended',
-		'plugin:tailwindcss/recommended',
-		'next/core-web-vitals'
-	],
-	'plugins': [
-		'react',
-		'tailwindcss',
-		'unused-imports',
-		'simple-import-sort',
-		'import'
-	],
-	'settings': {
-		'react': {'version': 'detect'}
+	'extends': ['./node_modules/@yearn-finance/web-lib/.eslintrc.cjs'],
+	'parser': '@typescript-eslint/parser',
+	'parserOptions': {
+		'ecmaFeatures': {
+			'jsx': true
+		},
+		'tsconfigRootDir': __dirname,
+		'ecmaVersion': 2022,
+		'sourceType': 'module',
+		'project': ['./tsconfig.json']
 	},
 	'rules': {
-		'import/default': 0,
-		'no-mixed-spaces-and-tabs': 2,
-		'react/prop-types': 0,
-		'no-async-promise-executor': 0,
-		'import/no-unresolved': 0, //Issue with package exports
-		'quotes': [2, 'single', {'avoidEscape': true}],
-		'object-curly-spacing': [2, 'never'],
-		'array-bracket-spacing': [2, 'never'],
-		'semi': 'error',
-		'no-else-return': ['error', {'allowElseIf': false}],
-		'eol-last': ['error', 'always'],
-		'import/no-named-as-default-member': 2,
-		'tailwindcss/no-custom-classname': 0,
-		'array-bracket-newline': ['error', {'multiline': true}],
-		'react/jsx-curly-brace-presence': ['error', {'props': 'always', 'children': 'always'}],
-		'react/jsx-first-prop-new-line': ['error', 'multiline'],
-		'react/jsx-max-props-per-line': ['error', {'maximum': {'single': 2, 'multi': 1}}],
-		'react/jsx-closing-tag-location': 2,
-		'unused-imports/no-unused-imports': 'error',
-		'unused-imports/no-unused-vars': [
-			'warn', {
-				'vars': 'all',
-				'varsIgnorePattern': '^_',
-				'args': 'after-used',
-				'argsIgnorePattern': '^_'
-			}
-		],
-		'simple-import-sort/imports': 2,
-		'simple-import-sort/exports': 2,
-		'import/first': 2,
-		'import/newline-after-import': 2,
-		'import/no-duplicates': 2,
-		'curly': ['error', 'all'],
-		'object-curly-newline': [
-			'error', {
-				'ObjectExpression': {'multiline': true, 'consistent': true},
-				'ObjectPattern': {'multiline': true, 'consistent': true},
-				'ImportDeclaration': 'never',
-				'ExportDeclaration': {'multiline': true, 'minProperties': 3}
-			}
-		],
-		'object-property-newline': ['error', {'allowAllPropertiesOnSameLine': true}],
-		'prefer-destructuring': ['error', {'array': true, 'object': true}, {'enforceForRenamedProperties': false}],
+		'@typescript-eslint/prefer-optional-chain': 'error',
+		'indent': 'off',
+		'@typescript-eslint/indent': ['error', 'tab'],
 		'no-multi-spaces': ['error', {ignoreEOLComments: false}],
-		'brace-style': ['error', '1tbs'],
-		'comma-dangle': ['error'],
-		'comma-spacing': ['error'],
-		'dot-notation': ['error'],
-		'indent': ['error', 'tab'],
-		'import/namespace': 0
-	},
-	overrides: [
-		{
-			files: ['*.{ts,tsx,js,jsx}'],
-			rules: {
-				'simple-import-sort/imports': [
-					'error',
-					{
-						groups: [
-							[
-								'^react',
-								'^next',
-								'^(ethers|ethcall)?\\w',
-								'^axios', '^swr',
-								'^tailwindcss', '^framer-motion', '^nprogress',
-								'^@?\\w',
-								'^(@yearn-finance/.*)?\\w',
-								'^(@common/.*)?\\w',
-								'^(@y.*)?\\w'
-							],
-							// Parent imports.
-							['^\\u0000', '^\\.\\.(?!/?$)', '^\\.\\./?$', '^\\./?$', '^\\.(?!/?$)', '^\\./(?=.*/)(?!/?$)'],
-							//Types imports.
-							[
-								'^node:.*\\u0000$',
-								'^(@yearn-finance)?\\w.*\\u0000$',
-								'^(@common)?\\w.*\\u0000$',
-								'^(@y.*)?\\w.*\\u0000$',
-								'^@?\\w.*\\u0000$',
-								'^[^.].*\\u0000$',
-								'^\\..*\\u0000$'
-							],
-
-							// Style imports.
-							['^.+\\.s?css$']
-						]
-					}
-				]
-			}
-		}
-	]
+		'no-mixed-spaces-and-tabs': 'error'
+	}
 };

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,18 @@
+---
+name: Bug Report
+about: Create a report to help us improve the dapp
+title: 'Bug: '
+labels: bug 
+---
+
+### What happened 🆘
+**A clear and concise description of what the bug is.**
+
+### To Reproduce 🔂
+Steps to reproduce the behavior:
+
+### More 🔎
+- Browser : 
+
+## Screenshots
+**If applicable, add screenshots to help explain your problem.**

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,14 @@
+---
+name: Feature Request Proposal
+about: Ask for a new feature for this website
+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*

.github/pull_request_template.md

@@ -0,0 +1,19 @@
+## Description
+
+<!--- Describe your changes -->
+
+## Related Issue
+
+<!--- Please link to the issue here -->
+
+## Motivation and Context
+
+<!--- Why is this change required? What problem does it solve? -->
+
+## How Has This Been Tested?
+
+<!--- Please describe in detail how you tested your changes. -->
+
+## Resources
+
+<!--- Any screenshots (if appropriate), links or relevant resources to explain better the changes. -->

.gitignore

@@ -25,3 +25,12 @@ pnpm-debug.log*
 .env
 .next
 .vercel
+tsconfig.tsbuildinfo
+
+# Auto Generated PWA files
+**/public/sw.js
+**/public/workbox-*.js
+**/public/worker-*.js
+**/public/sw.js.map
+**/public/workbox-*.js.map
+**/public/worker-*.js.map

components/AddressWithAction.js → components/AddressWithAction.tsx

@@ -1,22 +1,32 @@
-import React, {useEffect, useState} from 'react';
+import {useEffect, useState} from 'react';
 import {useSettings} from '@yearn-finance/web-lib/contexts/useSettings';
 import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
 import IconCopy from '@yearn-finance/web-lib/icons/IconCopy';
 import IconLinkOut from '@yearn-finance/web-lib/icons/IconLinkOut';
 import {toENS} from '@yearn-finance/web-lib/utils/address';
 import {copyToClipboard} from '@yearn-finance/web-lib/utils/helpers';
 
-function	AddressWithActions(props) {
+import type {ReactElement} from 'react';
+import type {TAddress} from '@yearn-finance/web-lib/types';
+
+type TAddressWithActions = {
+	address: TAddress;
+	explorer: string;
+	truncate?: number;
+	wrapperClassName?: string;
+	className?: string;
+};
+function	AddressWithActions(props: TAddressWithActions): ReactElement {
 	const	{address, explorer = '', truncate = 5, wrapperClassName, className = ''} = props;
 	const	{networks} = useSettings();
 	const	{chainID} = useWeb3();
 	const	[explorerURI, set_explorerURI] = useState('');
 
-	useEffect(() => {
+	useEffect((): void => {
 		if (explorer !== '') {
 			set_explorerURI(explorer);
 		} else if (networks[chainID]?.explorerBaseURI) {
-			set_explorerURI(networks[chainID].explorerBaseURI);
+			set_explorerURI(networks[chainID].explorerBaseURI as string);
 		}
 	}, [chainID, explorer, networks]);
 
@@ -25,15 +35,15 @@ function	AddressWithActions(props) {
 			<p className={`yearn--elementWithActions ${className}`}>{toENS(address, truncate > 0, truncate)}</p>
 			<button
 				className={'yearn--elementWithActions-copy'}
-				onClick={(e) => {
+				onClick={(e): void => {
 					e.stopPropagation();
 					copyToClipboard(address);
 				}}>
 				<IconCopy className={'yearn--elementWithActions-icon'} />
 			</button>
 			<button className={'yearn--elementWithActions-linkout'}>
 				<a
-					onClick={(e) => e.stopPropagation()}
+					onClick={(e): void => e.stopPropagation()}
 					href={`${explorerURI}/address/${address}`}
 					target={'_blank'}
 					className={'cursor-alias'}

components/AnimatedWait.tsx

@@ -0,0 +1,19 @@
+import {useEffect, useState} from 'react';
+
+import type {ReactElement} from 'react';
+
+function	AnimatedWait(): ReactElement {
+	const frames = ['[-----]', '[=----]', '[-=---]', '[--=--]', '[---=-]', '[----=]'];
+	const [index, set_index] = useState(0);
+
+	useEffect((): VoidFunction => {
+		const timer = setInterval((): void => {
+			set_index((index): number => (index + 1) % frames.length);
+		}, 100);
+		return (): void => clearTimeout(timer);
+	}, [frames.length]);
+
+	return <span>{frames[index]}</span>;
+}
+
+export default AnimatedWait;

components/InfoMessage.js → components/InfoMessage.tsx

@@ -1,6 +1,6 @@
-import	React	from	'react';
+import type {ReactElement} from 'react';
 
-function	InfoMessage({status}) {
+function	InfoMessage({status}: {status: string}): ReactElement {
 	if (status === 'use_production' || status === 'endorsed') {
 		return (
 			<div className={'my-4 max-w-5xl bg-yearn-blue p-4 font-mono text-sm font-normal text-white'}>

components/Meta.js → components/Meta.tsx

@@ -1,9 +1,10 @@
-import	React			from	'react';
-import	Head			from	'next/head';
-import	{DefaultSeo}	from	'next-seo';
-import	meta			from	'public/manifest.json';
+import Head from 'next/head';
+import {DefaultSeo} from 'next-seo';
+import meta from 'public/manifest.json';
 
-function	Meta() {
+import type {ReactElement} from 'react';
+
+function Meta(): ReactElement {
 	return (
 		<>
 			<Head>
@@ -32,6 +33,11 @@ function	Meta() {
 
 				<link rel={'icon'} href={'data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧠</text></svg>'} />
 
+				<script
+					defer
+					data-domain={'ape.tax'}
+					src={'/js/script.js'}/>
+
 				<meta name={'robots'} content={'index,nofollow'} />
 				<meta name={'googlebot'} content={'index,nofollow'} />
 				<meta charSet={'utf-8'} />