refactor PortfolioDialog and replace the prompt in the yields table (#2262)

* refactor the dialog component and update imports

* replace prompt with the DialogForm

Author: FelixBruguera

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/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/Yields/Filters/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { useRouter } from 'next/router'
 import * as Ariakit from '@ariakit/react'
+import { DialogForm } from '~/components/DialogForm'
 import { Icon } from '~/components/Icon'
 import { NestedMenu } from '~/components/NestedMenu'
 import { useYieldFilters } from '~/contexts/LocalStorage'
@@ -16,13 +17,7 @@ import type { IYieldFiltersProps } from './types'
 function SavedFilters({ currentFilters }) {
 	const { savedFilters, saveFilter, deleteFilter } = useYieldFilters()
 	const router = useRouter()
-
-	const handleSave = () => {
-		const name = window.prompt('Enter a name for this filter configuration')
-		if (name) {
-			saveFilter(name, currentFilters)
-		}
-	}
+	const [dialogOpen, setDialogOpen] = React.useState(false)
 
 	const handleLoad = (name: string) => {
 		const filters = savedFilters[name]
@@ -47,11 +42,18 @@ function SavedFilters({ currentFilters }) {
 	return (
 		<div className="ml-auto flex items-center gap-2">
 			<button
-				onClick={handleSave}
+				onClick={() => setDialogOpen(true)}
 				className="ml-auto flex items-center justify-center gap-1 rounded-md bg-(--link-bg) px-2 py-2 text-xs whitespace-nowrap text-(--link-text) hover:bg-(--link-hover-bg) focus-visible:bg-(--link-hover-bg) disabled:cursor-not-allowed disabled:opacity-50"
 			>
 				Save Current Filters
 			</button>
+			<DialogForm
+				title="Saving filters"
+				description="Enter a name for this filter configuration"
+				open={dialogOpen}
+				setOpen={setDialogOpen}
+				onSubmit={(name) => saveFilter(name, currentFilters)}
+			/>
 			<Ariakit.MenuProvider>
 				<Ariakit.MenuButton className="flex cursor-pointer flex-nowrap items-center justify-between gap-2 rounded-md bg-(--btn-bg) px-3 py-2 text-xs text-(--text-primary) hover:bg-(--btn-hover-bg) focus-visible:bg-(--btn-hover-bg)">
 					Saved Filters

src/containers/Yields/Watchlist.tsx

@@ -1,13 +1,13 @@
 import { useMemo, useState } from 'react'
 import { useRouter } from 'next/router'
+import { DialogForm } from '~/components/DialogForm'
 import { Icon } from '~/components/Icon'
 import { BasicLink } from '~/components/Link'
 import { Menu } from '~/components/Menu'
 import { Switch } from '~/components/Switch'
 import { YieldsPoolsTable } from '~/containers/Yields/Tables/Pools'
 import { DEFAULT_PORTFOLIO_NAME, useWatchlistManager } from '~/contexts/LocalStorage'
 import { useIsClient } from '~/hooks'
-import { PortfolioDialog } from '../DeFiWatchlist/PortfolioDialog'
 
 export function YieldsWatchlistContainer({ protocolsDict }) {
 	const { query, pathname, push } = useRouter()
@@ -88,10 +88,14 @@ export function YieldsWatchlistContainer({ protocolsDict }) {
 						onItemClick={(value) => setSelectedPortfolio(value)}
 						className="relative flex cursor-pointer flex-nowrap items-center justify-between gap-2 rounded-md border border-(--form-control-border) p-2 text-xs font-medium text-(--text-form) hover:bg-(--link-hover-bg) focus-visible:bg-(--link-hover-bg)"
 					/>
-					<PortfolioDialog open={open} setOpen={setOpen} addPortfolio={addPortfolio}/>
-					<button
-						onClick={() => setOpen(true)}
-					>
+					<DialogForm
+						title="New Portfolio"
+						description="Enter the name of your new portfolio"
+						open={open}
+						setOpen={setOpen}
+						onSubmit={addPortfolio}
+					/>
+					<button onClick={() => setOpen(true)}>
 						<Icon name="folder-plus" height={24} width={24} />
 					</button>
 					{selectedPortfolio !== DEFAULT_PORTFOLIO_NAME && (