Pro dashboard

src/components/ButtonStyled/CsvButton.tsx

@@ -29,20 +29,26 @@ const Badge: React.FC<BadgeProps> = ({ text, color, isLight }) => {
 	)
 }
 
+const GrayButton = styled(ButtonDark)`
+	background: ${({ theme }) => (theme.mode === 'dark' ? '#22242a' : '#eaeaea')};
+`
+
 const CSVDownloadButton = ({
 	onClick,
 	style = {},
 	isLight = false,
-	customText = ''
+	customText = '',
+	isGray = false
 }: {
 	onClick: () => void
 	style?: CSSProperties
 	isLight?: boolean
 	customText?: string
+	isGray?: boolean
 }) => {
 	const { isVerified } = useVerified()
 	const router = useRouter()
-	const Button = isLight ? ButtonLight : ButtonDark
+	const Button = isGray ? GrayButton : isLight ? ButtonLight : ButtonDark
 	const text = customText || 'Download .csv'
 	if (!isVerified && IS_PRO_API_ENABLED) {
 		return (

src/components/Filters/yields/Dropdowns.tsx

@@ -10,6 +10,7 @@ import type { IDropdownMenusProps } from './types'
 import { YIELDS_SETTINGS } from '~/contexts/LocalStorage'
 import { ColumnFilters } from '../common/ColumnFilters'
 import { NotifyButton } from './NotifyButton'
+import CSVDownloadButton from '~/components/ButtonStyled/CsvButton'
 
 const BAD_DEBT_KEY = YIELDS_SETTINGS.NO_BAD_DEBT.toLowerCase()
 
@@ -48,7 +49,8 @@ export function YieldFilterDropdowns({
 	showLTV,
 	showTotalSupplied,
 	showTotalBorrowed,
-	showAvailable
+	showAvailable,
+	onCSVDownload
 }: IDropdownMenusProps) {
 	const router = useRouter()
 
@@ -241,8 +243,15 @@ export function YieldFilterDropdowns({
 			)}
 
 			{!isMobile && (
-				<div style={{ marginInlineStart: 'auto' }}>
+				<div style={{ marginInlineStart: 'auto', display: 'flex', gap: '8px' }}>
 					<NotifyButton />
+					{onCSVDownload ? (
+						<CSVDownloadButton
+							isGray
+							style={{ color: 'inherit', fontWeight: 'normal', borderRadius: '8px' }}
+							onClick={onCSVDownload}
+						/>
+					) : null}
 				</div>
 			)}
 		</>

src/components/Filters/yields/types.ts

@@ -35,6 +35,7 @@ export interface IDropdownMenusProps {
 	showTotalSupplied?: boolean
 	showTotalBorrowed?: boolean
 	showAvailable?: boolean
+	onCSVDownload?: () => void
 }
 
 export interface IYieldFiltersProps extends IDropdownMenusProps {
@@ -46,4 +47,5 @@ export interface IYieldFiltersProps extends IDropdownMenusProps {
 	strategyInputsData?: Array<{ name: string; symbol: string; image?: string | null; image2?: string | null }>
 	noOfStrategies?: number
 	showSearchOnMobile?: boolean
+	onCSVDownload?: () => void
 }

src/components/RecentProtocols/index.tsx

@@ -7,7 +7,9 @@ import { ProtocolsChainsSearch } from '~/components/Search'
 import { Dropdowns, TableFilters, TableHeader } from '~/components/Table/shared'
 import { FiltersByChain, HideForkedProtocols, TVLRange } from '~/components/Filters'
 import { useCalcStakePool2Tvl } from '~/hooks/data'
-import { getPercentChange } from '~/utils'
+
+import { download, getPercentChange } from '~/utils'
+import { IFormattedProtocol } from '~/api/types'
 import { FlexRow } from '~/layout/ProtocolAndPool'
 import { ButtonLight } from '../ButtonStyled'
 import { ArrowUpRight, Plus, X } from 'react-feather'
@@ -16,6 +18,7 @@ import { useDialogState, Dialog } from 'ariakit/dialog'
 import { DialogForm } from '../Filters/common/Base'
 import { useMutation } from 'react-query'
 import { airdropsEligibilityCheck } from './airdrops'
+import CSVDownloadButton from '../ButtonStyled/CsvButton'
 
 function getSelectedChainFilters(chainQueryParam, allChains) {
 	if (chainQueryParam) {
@@ -149,6 +152,24 @@ export function RecentProtocols({
 	}, [protocols, chain, chainList, forkedList, toHideForkedProtocols, minTvl, maxTvl])
 
 	const protocolsData = useCalcStakePool2Tvl(data)
+	const downloadCSV = () => {
+		const headers = ['Name', 'Chain', 'TVL', 'Change 1d', 'Change 7d', 'Change 1m', 'Listed At']
+		const csvData = protocolsData.map((row) => {
+			return {
+				Name: row.name,
+				Chain: row.chains.join(', '),
+				TVL: row.tvl,
+				'Change 1d': row.change_1d,
+				'Change 7d': row.change_7d,
+				'Change 1m': row.change_1m,
+				'Listed At': new Date(row.listedAt * 1000).toLocaleDateString()
+			}
+		})
+		download(
+			'protocols.csv',
+			[headers, ...csvData.map((row) => headers.map((header) => row[header]).join(','))].join('\n')
+		)
+	}
 
 	const { pathname } = useRouter()
 
@@ -304,6 +325,7 @@ export function RecentProtocols({
 				<Dropdowns>
 					<FiltersByChain chainList={chainList} selectedChains={selectedChains} pathname={pathname} />
 					<TVLRange />
+					<CSVDownloadButton onClick={downloadCSV} isLight style={{ color: 'inherit', fontWeight: 'normal' }} />
 				</Dropdowns>
 				{forkedList && <HideForkedProtocols />}
 			</TableFilters>

src/components/Treasuries/index.tsx

@@ -13,6 +13,8 @@ import {
 import VirtualTable from '~/components/Table/Table'
 
 import { fetchWithErrorLogging } from '~/utils/async'
+import CSVDownloadButton from '../ButtonStyled/CsvButton'
+import { download } from '~/utils'
 
 const fetch = fetchWithErrorLogging
 
@@ -60,6 +62,37 @@ export function TreasuriesPage({ treasuries, treasuriesColumns }) {
 
 	const [projectName, setProjectName] = React.useState('')
 
+	const downloadCSV = () => {
+		const headers = [
+			'Name',
+			'Category',
+			'Own Tokens',
+			'Stablecoins',
+			'Major Tokens',
+			'Other Tokens',
+			'TVL',
+			'Change 1d',
+			'Change 7d',
+			'Change 1m'
+		]
+		const data = treasuries.map((row) => {
+			return {
+				Name: row.name,
+				Category: row.category,
+				'Own Tokens': row.ownTokens,
+				Stablecoins: row.stablecoins,
+				'Major Tokens': row.majors,
+				'Other Tokens': row.others,
+				TVL: row.tvl,
+				'Change 1d': row.change_1d,
+				'Change 7d': row.change_7d,
+				'Change 1m': row.change_1m
+			}
+		})
+		const csv = [headers.join(',')].concat(data.map((row) => headers.map((header) => row[header]).join(','))).join('\n')
+		download('treasuries.csv', csv)
+	}
+
 	React.useEffect(() => {
 		const projectsColumns = instance.getColumn('name')
 		const id = setTimeout(() => {
@@ -71,7 +104,9 @@ export function TreasuriesPage({ treasuries, treasuriesColumns }) {
 	return (
 		<>
 			<TableHeaderAndSearch>
-				<Header>Protocol Treasuries</Header>
+				<Header>
+					Protocol Treasuries <CSVDownloadButton onClick={downloadCSV} isLight />
+				</Header>
 
 				<SearchWrapper>
 					<SearchIcon size={16} />

src/components/YieldsPage/index.tsx

@@ -7,6 +7,8 @@ import { AnnouncementWrapper } from '~/components/Announcement'
 import LocalLoader from '../LocalLoader'
 import { useFormatYieldQueryParams } from './hooks'
 import { toFilterPool } from './utils'
+import CSVDownloadButton from '../ButtonStyled/CsvButton'
+import { download } from '~/utils'
 
 const YieldPage = ({ pools, projectList, chainList, categoryList, tokens, tokenSymbolsList }) => {
 	const { query, pathname, push } = useRouter()
@@ -115,6 +117,70 @@ const YieldPage = ({ pools, projectList, chainList, categoryList, tokens, tokenS
 		exactTokens,
 		pathname
 	])
+	const downloadCSV = React.useCallback(() => {
+		const headers = [
+			'Pool',
+			'Project',
+			'Chain',
+			'TVL',
+			'APY',
+			'APY Base',
+			'APY Reward',
+			'Change 1d',
+			'Change 7d',
+			'Outlook',
+			'Confidence',
+			'Category',
+			'IL 7d',
+			'APY Base 7d',
+			'APY Net 7d',
+			'APY Mean 30d',
+			'Volume 1d',
+			'Volume 7d',
+			'APY Base Inception',
+			'APY Including LSD APY',
+			'APY Base Including LSD APY',
+			'APY Base Borrow',
+			'APY Reward Borrow',
+			'APY Borrow',
+			'Total Supply USD',
+			'Total Borrow USD',
+			'Total Available USD'
+		]
+		const csvData = poolsData.map((row) => {
+			return {
+				Pool: row.pool,
+				Project: row.project,
+				Chain: row.chains,
+				TVL: row.tvl,
+				APY: row.apy,
+				'APY Base': row.apyBase,
+				'APY Reward': row.apyReward,
+				'Change 1d': row.change1d,
+				'Change 7d': row.change7d,
+				Outlook: row.outlook,
+				Confidence: row.confidence,
+				Category: row.category,
+				'IL 7d': row.il7d,
+				'APY Base 7d': row.apyBase7d,
+				'APY Net 7d': row.apyNet7d,
+				'APY Mean 30d': row.apyMean30d,
+				'Volume 1d': row.volumeUsd1d,
+				'Volume 7d': row.volumeUsd7d,
+				'APY Base Inception': row.apyBaseInception,
+				'APY Including LSD APY': row.apyIncludingLsdApy,
+				'APY Base Including LSD APY': row.apyBaseIncludingLsdApy,
+				'APY Base Borrow': row.apyBaseBorrow,
+				'APY Reward Borrow': row.apyRewardBorrow,
+				'APY Borrow': row.apyBorrow,
+				'Total Supply USD': row.totalSupplyUsd,
+				'Total Borrow USD': row.totalBorrowUsd,
+				'Total Available USD': row.totalAvailableUsd
+			}
+		})
+		const csv = [headers].concat(csvData.map((row) => headers.map((header) => row[header]))).join('\n')
+		download('yields.csv', csv)
+	}, [poolsData])
 
 	return (
 		<>
@@ -142,7 +208,6 @@ const YieldPage = ({ pools, projectList, chainList, categoryList, tokens, tokenS
 						</a>
 					</AnnouncementWrapper>
 				)}
-
 			<YieldFiltersV2
 				header="Yield Rankings"
 				poolsNumber={poolsData.length}
@@ -174,6 +239,7 @@ const YieldPage = ({ pools, projectList, chainList, categoryList, tokens, tokenS
 				showTotalBorrowed={true}
 				showAvailable={true}
 				showLTV={true}
+				onCSVDownload={downloadCSV}
 			/>
 
 			{loading ? (

src/containers/BridgedContainer/index.tsx

@@ -1,11 +1,15 @@
 import { SortingState, getCoreRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table'
 import * as React from 'react'
 import { Header } from '~/Theme'
+import CSVDownloadButton from '~/components/ButtonStyled/CsvButton'
 
 import { ProtocolsChainsSearch } from '~/components/Search'
 import { bridgedColumns } from '~/components/Table/Defi/columns'
 import VirtualTable from '~/components/Table/Table'
 
+import { download } from '~/utils'
+import { sluggify } from '~/utils/cache-client'
+
 export default function ChainsContainer({ assets, chains, flows1d }) {
 	const [sorting, setSorting] = React.useState<SortingState>([])
 
@@ -33,6 +37,26 @@ export default function ChainsContainer({ assets, chains, flows1d }) {
 		getSortedRowModel: getSortedRowModel()
 	})
 
+	const onCSVDownload = () => {
+		const csvData = data.map((row) => {
+			return {
+				Chain: row.name,
+				Total: row.total?.total,
+				Change_24h: row?.change_24h,
+				Canonical: row?.canonical?.total,
+				OwnTokens: row?.ownTokens?.total,
+				ThirdParty: row?.thirdParty?.total,
+				Native: row?.native?.total
+			}
+		})
+		const headers = Object.keys(csvData[0])
+		const csv = [headers.join(',')]
+			.concat(csvData.map((row) => headers.map((header) => row[header]).join(',')))
+			.join('\n')
+
+		download('bridged-chains.csv', csv)
+	}
+
 	return (
 		<>
 			<ProtocolsChainsSearch
@@ -42,7 +66,9 @@ export default function ChainsContainer({ assets, chains, flows1d }) {
 					name: 'All Chains'
 				}}
 			/>
-			<Header>Bridged TVL for All chains</Header>
+			<Header style={{ display: 'flex', justifyContent: 'space-between' }}>
+				Bridged TVL for All chains <CSVDownloadButton onClick={onCSVDownload} />
+			</Header>
 			<VirtualTable instance={instance} cellStyles={{ overflow: 'visible' }} />
 		</>
 	)