Merge branch 'main' into feat-embedded-stripe

Author: Caranell

README.md

@@ -2,7 +2,7 @@
 
 [DefiLlama](https://defillama.com) is the leading DeFi analytics and insights platform, providing comprehensive data on total value locked (TVL), yields, stablecoins, and more across all blockchain ecosystems.
 
-Check it out live at https://defillama.com
+Check it out live at: https://defillama.com
 
 ## Features
 
@@ -16,21 +16,26 @@ Check it out live at https://defillama.com
 ## Local Setup
 
 #### 1. Clone the repository:
+
 ```bash
-git clone https://github.com/DefiLlama/DefiLlama.git
-cd DefiLlama
+git clone https://github.com/DefiLlama/defillama-app.git
+cd defillama-app
 ```
 
 #### 2. Install dependencies:
+
 ```bash
 yarn
 ```
 
 #### 3. Start the development server:
+
 ```bash
 yarn dev
 ```
 
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
 ## Contributing
 
 Contributions are welcome. New features, small fixes, docs updates, whatever helps.
@@ -57,4 +62,8 @@ Join the conversation and stay up to date:
 
 - [X/Twitter](https://twitter.com/DefiLlama)
 - [Discord](https://discord.defillama.com/)
-- [Documentation](https://docs.llama.fi/)
+- [Documentation](https://docs.llama.fi/)
+
+## License
+
+[GPL-3.0](./LICENSE)

eslint.config.mjs

@@ -17,19 +17,28 @@ const eslintConfig = [
 	},
 	{
 		rules: {
-			'no-undef': 1,
-			'no-unused-vars': 1,
 			'react/no-unescaped-entities': 0,
 			'@next/next/no-img-element': 0,
 			'@typescript-eslint/no-explicit-any': 0,
-			'@typescript-eslint/no-unused-vars': 1,
 			'prefer-const': 0
 		}
 	},
+	{
+		files: ['**/*.js', '**/*.jsx'],
+		rules: {
+			'no-undef': 1,
+			'no-unused-vars': 1
+		}
+	},
 	{
 		files: ['**/*.ts', '**/*.tsx'],
 		languageOptions: {
 			parser: typescriptParser
+		},
+		rules: {
+			'no-undef': 0, // TypeScript handles this
+			'no-unused-vars': 0, // Disable base rule for TypeScript files
+			'@typescript-eslint/no-unused-vars': 1 // Use TypeScript-specific rule instead
 		}
 	}
 ]

public/game/index.js

@@ -1203,7 +1203,7 @@
 	 * @param {Obstacle.type} type
 	 * @param {Object} spritePos Obstacle position in sprite.
 	 * @param {Object} dimensions
-	 * @param {number} gapCoefficient Mutipler in determining the gap.
+     * @param {number} gapCoefficient Multiplier in determining the gap.
 	 * @param {number} speed
 	 * @param {number} opt_xOffset
 	 */
@@ -1570,7 +1570,7 @@
 
 		/**
 		 * Setter for the jump velocity.
-		 * The approriate drop velocity is also set.
+		 * The appropriate drop velocity is also set.
 		 */
 		setJumpVelocity: function (setting) {
 			this.config.INIITAL_JUMP_VELOCITY = -setting
@@ -2036,7 +2036,7 @@
 		},
 
 		/**
-		 * Set the highscore as a array string.
+         * Set the high score as an array string.
 		 * Position of char in the sprite: H - 10, I - 11.
 		 * @param {number} distance Distance ran in pixels.
 		 */
@@ -2156,7 +2156,7 @@
 	//******************************************************************************
 
 	/**
-	 * Nightmode shows a moon and stars on the horizon.
+     * Night mode shows a moon and stars on the horizon.
 	 */
 	function NightMode(canvas, spritePos, containerWidth) {
 		this.spritePos = spritePos

src/containers/DeFiWatchlist/PortfolioDialog.tsx renamed to src/components/DialogForm.tsx

@@ -1,7 +1,19 @@
 import { Dialog, DialogDismiss, DialogHeading } from '@ariakit/react'
 import { Icon } from '~/components/Icon'
 
-export function PortfolioDialog({ open, setOpen, addPortfolio }) {
+export function DialogForm({
+	open,
+	setOpen,
+	title,
+	description,
+	onSubmit
+}: {
+	open: boolean
+	setOpen: (value: boolean) => void
+	title: string
+	description: string
+	onSubmit: (name: string) => void
+}) {
 	return (
 		<Dialog
 			open={open}
@@ -10,7 +22,7 @@ export function PortfolioDialog({ open, setOpen, addPortfolio }) {
 			className="fixed top-[50%] left-[50%] flex h-fit w-8/10 max-w-150 translate-x-[-50%] translate-y-[-50%] flex-col gap-4 rounded-md border border-(--cards-border) bg-(--cards-bg) p-6 sm:w-1/2 lg:w-1/3"
 		>
 			<div className="flex items-center justify-between gap-2">
-				<DialogHeading className="text-lg font-medium">New portfolio</DialogHeading>
+				<DialogHeading className="text-lg font-medium">{title}</DialogHeading>
 				<DialogDismiss
 					className="-my-2 ml-auto rounded-lg p-2 text-(--text-tertiary) hover:bg-(--divider) hover:text-(--text-primary)"
 					onClick={() => setOpen(false)}
@@ -21,27 +33,33 @@ export function PortfolioDialog({ open, setOpen, addPortfolio }) {
 				</DialogDismiss>
 			</div>
 			<form
-				id='newPortfolio'
+				id="newPortfolio"
 				onSubmit={(e) => {
 					e.preventDefault()
 					const form = e.target as HTMLFormElement
 					const formData = new FormData(form)
 					const name = formData.get('name') as string
-					addPortfolio(name)
+					onSubmit(name)
 					setOpen(false)
 					form.reset()
 				}}
 			>
 				<label className="flex flex-col gap-1">
-					<span className="text-sm text-(--text-secondary)">Enter the name of your new portfolio</span>
+					<span className="text-sm text-(--text-secondary)">{description}</span>
 					<input
 						required
 						className="rounded-md border border-(--form-control-border) bg-white p-2 text-black disabled:opacity-50 dark:bg-black dark:text-white"
 						name="name"
 					/>
 				</label>
 			</form>
-			<button type='submit' form='newPortfolio' className="mt-3 rounded-md bg-(--link-active-bg) p-3 text-white disabled:opacity-50">Save</button>
+			<button
+				type="submit"
+				form="newPortfolio"
+				className="mt-3 rounded-md bg-(--link-active-bg) p-3 text-white disabled:opacity-50"
+			>
+				Save
+			</button>
 		</Dialog>
 	)
 }

src/components/Nav/Desktop.tsx

@@ -210,11 +210,14 @@ const LinkToPage = React.memo(function LinkToPage({
 	asPath: string
 }) {
 	const isActive = route === asPath.split('/?')[0].split('?')[0]
+	const isExternal = route.startsWith('http')
 
 	return (
 		<BasicLink
 			href={route}
 			data-linkactive={isActive}
+			target={isExternal ? '_blank' : undefined}
+			rel={isExternal ? 'noopener noreferrer' : undefined}
 			className="group/link -ml-1.5 flex flex-1 items-center gap-3 rounded-md p-1.5 hover:bg-black/5 focus-visible:bg-black/5 data-[linkactive=true]:bg-(--link-active-bg) data-[linkactive=true]:text-white dark:hover:bg-white/10 dark:focus-visible:bg-white/10"
 		>
 			{icon ? (

src/components/Nav/Mobile/Menu.tsx

@@ -168,9 +168,13 @@ const LinkToPage = React.memo(function LinkToPage({
 	setShow: (show: boolean) => void
 }) {
 	const isActive = route === asPath.split('/?')[0].split('?')[0]
+	const isExternal = route.startsWith('http')
+
 	return (
 		<BasicLink
 			href={route}
+			target={isExternal ? '_blank' : undefined}
+			rel={isExternal ? 'noopener noreferrer' : undefined}
 			data-linkactive={isActive}
 			className="-ml-1.5 flex items-center gap-3 rounded-md p-1.5 hover:bg-black/5 focus-visible:bg-black/5 data-[linkactive=true]:bg-(--link-active-bg) data-[linkactive=true]:text-white dark:hover:bg-white/10 dark:focus-visible:bg-white/10"
 			onClick={() => setShow(false)}

src/containers/Correlations/index.tsx

@@ -139,6 +139,8 @@ export default function Correlations({ coinsData }) {
 	)
 
 	useEffect(() => {
+		if (!router.isReady) return
+
 		if (!queryCoins?.length)
 			router.replace(
 				{
@@ -151,7 +153,7 @@ export default function Correlations({ coinsData }) {
 				undefined,
 				{ shallow: true }
 			)
-	}, [queryCoins, router])
+	}, [queryCoins, router, router.isReady])
 
 	const dialogStore = Ariakit.useDialogStore()
 

src/containers/DeFiWatchlist/index.tsx

@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react'
 import { useRouter } from 'next/router'
+import { DialogForm } from '~/components/DialogForm'
 import { Icon } from '~/components/Icon'
 import { Menu } from '~/components/Menu'
 import { SelectWithCombobox } from '~/components/SelectWithCombobox'
@@ -10,7 +11,6 @@ import { ChainProtocolsTable } from '../ChainOverview/Table'
 import { IProtocol } from '../ChainOverview/types'
 import { useGroupAndFormatChains } from '../ChainsByCategory'
 import { WatchListTabs } from '../Yields/Watchlist'
-import { PortfolioDialog } from './PortfolioDialog'
 
 export function DefiWatchlistContainer({ protocols, chains }) {
 	const [extraTvlsEnabled] = useLocalStorageSettingsManager('tvl')
@@ -218,7 +218,13 @@ function PortfolioSelection({
 					onItemClick={(value) => setSelectedPortfolio(value)}
 					className="relative flex min-w-[120px] cursor-pointer flex-nowrap items-center justify-between gap-2 rounded-md border border-(--form-control-border) px-3 py-2 text-sm font-medium text-(--text-primary) hover:bg-(--link-hover-bg) focus-visible:bg-(--link-hover-bg)"
 				/>
-				<PortfolioDialog open={open} setOpen={setOpen} addPortfolio={addPortfolio} />
+				<DialogForm
+					title="New Portfolio"
+					description="Enter the name of your new portfolio"
+					open={open}
+					setOpen={setOpen}
+					onSubmit={addPortfolio}
+				/>
 				<button
 					onClick={() => setOpen(true)}
 					className="flex items-center gap-2 rounded-md border border-(--form-control-border) px-3 py-2 text-sm text-(--text-primary) transition-colors hover:bg-(--link-hover-bg) focus-visible:bg-(--link-hover-bg)"

src/containers/LlamaAI/components/ChartRenderer.tsx

@@ -141,7 +141,7 @@ const SingleChart = memo(function SingleChart({ config, data, isActive }: Single
 						grid: {
 							top: 24,
 							right: 12,
-							bottom: 12,
+							bottom: 68,
 							left: 12
 						},
 						tooltip: {
@@ -233,12 +233,11 @@ const SingleChart = memo(function SingleChart({ config, data, isActive }: Single
 						],
 						title: config.title,
 						valueSymbol: config.valueSymbol || '$',
-						height: '300px',
-						hideDataZoom: true,
+						height: '360px',
 						xAxisType: 'category',
 						chartOptions: {
 							grid: {
-								bottom: 12,
+								bottom: 68,
 								left: 12,
 								right: 12
 							},