baoETH market, styling to boosted aprs

baofinance · Jul 25, 2023 · 518dee4 · 518dee4
1 parent 980788d
commit 518dee4
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 9 deletions.
diff --git a/src/bao/lib/config.ts b/src/bao/lib/config.ts
@@ -288,6 +288,7 @@ export default {
 						1: '0x5ee08f40b637417bcC9d2C51B62F4820ec9cF5D8',
 					},
 					icon: 'bSTBL.png',
+					archived: true,
 					coingeckoId: 'dai',
 					underlyingDecimals: 18,
 					isBasket: true,

diff --git a/src/pages/gauges/components/GaugeList.tsx b/src/pages/gauges/components/GaugeList.tsx
@@ -1,5 +1,4 @@
 import { ActiveSupportedGauge } from '@/bao/lib/types'
-import { ListHeader } from '@/components/List'
 import { PageLoader } from '@/components/Loader'
 import Typography from '@/components/Typography'
 import usePrice from '@/hooks/base/usePrice'
@@ -16,8 +15,8 @@ import { BigNumber } from 'ethers'
 import { formatUnits } from 'ethers/lib/utils'
 import Image from 'next/future/image'
 import React, { useMemo, useState } from 'react'
-import GaugeModal from './Modals'
 import { isDesktop } from 'react-device-detect'
+import GaugeModal from './Modals'
 
 const GaugeList: React.FC = () => {
 	const gauges = useGauges()
@@ -134,7 +133,7 @@ const GaugeListItem: React.FC<GaugeListItemProps> = ({ gauge }) => {
 					</div>
 
 					<div className='mx-auto my-0 flex basis-1/3 items-center justify-center lg:basis-1/5'>
-						<Typography variant='base' className='ml-2 inline-block font-bakbak'>
+						<Typography variant='base' className={`ml-2 inline-block font-bakbak ${!isNaN(boost) && `rainbow`}`}>
 							{getDisplayBalance(isNaN(boost) ? rewardsAPR : parseFloat(rewardsAPR.toString()) * boost)}%
 						</Typography>
 					</div>

diff --git a/src/pages/vaults/components/VaultList.tsx b/src/pages/vaults/components/VaultList.tsx
@@ -17,7 +17,7 @@ export const VaultList: React.FC = () => {
 			<ListHeader headers={isDesktop ? ['Vault Name', 'Collateral Assets', 'Borrow vAPR'] : ['Name', 'Assets', 'vAPR']} />
 			<div className='flex flex-col gap-4'>
 				<VaultListItem vaultName={'baoUSD'} />
-				{/* <VaultListItem vaultName={'baoETH'} /> */}
+				<VaultListItem vaultName={'baoETH'} />
 			</div>
 		</>
 	)

diff --git a/src/pages/vebao/components/Dashboard.tsx b/src/pages/vebao/components/Dashboard.tsx
@@ -2,6 +2,7 @@ import Button from '@/components/Button'
 import { Icon } from '@/components/Icon'
 import Input from '@/components/Input'
 import { PendingTransaction } from '@/components/Loader/Loader'
+import Tooltipped from '@/components/Tooltipped'
 import Typography from '@/components/Typography'
 import useContract from '@/hooks/base/useContract'
 import usePrice from '@/hooks/base/usePrice'
@@ -521,6 +522,8 @@ export const Dashboard = () => {
 							/>
 						</div>
 					</div>
+				</div>
+				<div className='mt-4 grid grid-cols-8 gap-4'>
 					<div className='col-span-2'>
 						<Button onClick={calc}>Calculate</Button>
 					</div>
@@ -545,6 +548,16 @@ export const Dashboard = () => {
 							</Typography>
 						</div>
 					</div>
+					<div className='col-span-2 h-12 text-center'>
+						<label className='font-bakbak text-sm text-baoRed'>
+							Boosted APR <Tooltipped content='Based on selected gauges current APR and calculated boost.' placement='top' />
+						</label>
+						<div className='flex w-full gap-2 rounded-md'>
+							<Typography variant='lg' className='inline-block w-full !text-center font-bakbak'>
+								{getDisplayBalance(parseFloat(currentAPR.toString()) * boost)}%
+							</Typography>
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -107,15 +107,15 @@ input[type='number'] {
 }
 
 .react-datepicker__current-month {
-	@apply ml-2.5 text-lg font-bakbak text-baoRed;
+	@apply ml-2.5 font-bakbak text-lg text-baoRed;
 }
 
 .react-datepicker__week {
 	@apply flex justify-around;
 }
 
 .react-datepicker__day-names {
-	@apply flex justify-around text-center text-xs font-bakbak text-baoRed;
+	@apply flex justify-around text-center font-bakbak text-xs text-baoRed;
 }
 
 .react-datepicker__day-name {
@@ -309,6 +309,24 @@ input[type='number'] {
 	stroke: transparent;
 }
 
-.modal-open { 
-	overflow: auto; padding-right: 0px !important; 
-}
+.modal-open {
+	overflow: auto;
+	padding-right: 0px !important;
+}
+
+@keyframes move-bg {
+	to {
+		background-position: var(--bg-size) 0;
+	}
+}
+
+.rainbow {
+	--bg-size: 400%;
+	--color-one: #e21a53;
+	--color-two: #ee7698;
+	background: linear-gradient(90deg, var(--color-one), var(--color-two), var(--color-one)) 0 0 / var(--bg-size) 100%;
+	color: transparent;
+	background-clip: text;
+	-webkit-background-clip: text;
+	animation: move-bg 8s infinite linear;
+}