dist warnings, vebao lock increase bug

src/pages/distribution/components/End.tsx

@@ -1,16 +1,31 @@
+/* eslint-disable react/no-unescaped-entities */
 import Button from '@/components/Button'
 import Typography from '@/components/Typography'
 import useContract from '@/hooks/base/useContract'
 import useTransactionHandler from '@/hooks/base/useTransactionHandler'
 import { BaoDistribution } from '@/typechain/BaoDistribution'
 import 'katex/dist/katex.min.css'
 import Image from 'next/future/image'
-import React from 'react'
+import React, { useState } from 'react'
+import Modal from '@/components/Modal'
 
 const Migration: React.FC = () => {
 	const { handleTx } = useTransactionHandler()
 	const distribution = useContract<BaoDistribution>('BaoDistribution')
 
+	const [showModal, setShowModal] = useState(false)
+	const [seenModal, setSeenModal] = useState(false)
+
+	const modalShow = () => {
+		setShowModal(true)
+	}
+	const modalHide = () => {
+		setSeenModal(true)
+		setShowModal(false)
+	}
+
+	const shouldBeWarned = !seenModal
+
 	return (
 		<div className='flex flex-col px-4'>
 			<div className='flex flex-col'>
@@ -68,17 +83,58 @@ const Migration: React.FC = () => {
 					className='my-4'
 					fullWidth
 					onClick={async () => {
-						const endDistribution = distribution.endDistribution()
-						handleTx(endDistribution, `Distribution: End Distribution`)
+						if (shouldBeWarned) {
+							modalShow()
+						} else {
+							const endDistribution = distribution.endDistribution()
+							handleTx(endDistribution, `Distribution: End Distribution`)
+						}
 					}}
 				>
-					End Distribution
+					{shouldBeWarned ? 'Read Warning' : 'End Distribution'}
 				</Button>
 			</div>
 
 			<Typography variant='sm' className='text-center text-text-200'>
 				* This action can be done only <b className='font-bold'>once</b> and can <b className='font-bold'>not</b> be reversed!
 			</Typography>
+
+			<Modal isOpen={showModal} onDismiss={modalHide}>
+				<Modal.Header
+					onClose={modalHide}
+					header={
+						<>
+							<Typography variant='h2' className='inline-block font-semibold'>
+								Warning!
+							</Typography>
+						</>
+					}
+				/>
+				<Modal.Body>
+					<Typography variant='xl' className='pb-5 font-semibold text-text-300'>
+						This is IRREVERSIBLE and forfeits tokens
+					</Typography>
+					<Typography variant='base' className='leading-normal'>
+						Ending your distribution early collects a slashed amount of your entire balance INSTANTLY.
+						<br />
+						<br />
+						This comes at the cost of forever forfeiting a large portion of the tokens that you would have received by instead migrating
+						once or claiming over time.
+						<br />
+						<br />
+						Ending your distribution early will cause you to be unable to take any further distribution actions.
+						<br />
+						<br />
+						Please make sure you've read the information on this page very carefully before submitting a transaction to end your
+						distribution early.
+					</Typography>
+					<div className='flow-col mt-5 flex items-center gap-3'>
+						<Button fullWidth onClick={modalHide}>
+							I understand the risk!
+						</Button>
+					</div>
+				</Modal.Body>
+			</Modal>
 		</div>
 	)
 }

src/pages/distribution/components/Migrate.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unescaped-entities */
 import Button from '@/components/Button'
 import Typography from '@/components/Typography'
 import useContract from '@/hooks/base/useContract'
@@ -8,6 +9,7 @@ import 'katex/dist/katex.min.css'
 import Slider from 'rc-slider'
 import 'rc-slider/assets/index.css'
 import React, { useState } from 'react'
+import Modal from '@/components/Modal'
 
 const Migration: React.FC = () => {
 	const { handleTx } = useTransactionHandler()
@@ -24,6 +26,19 @@ const Migration: React.FC = () => {
 		setLockTime(getDayOffset(min, (value as number) * 7))
 	}
 
+	const [showModal, setShowModal] = useState(false)
+	const [seenModal, setSeenModal] = useState(false)
+
+	const modalShow = () => {
+		setShowModal(true)
+	}
+	const modalHide = () => {
+		setSeenModal(true)
+		setShowModal(false)
+	}
+
+	const shouldBeWarned = !seenModal
+
 	return (
 		<div className='flex flex-col px-4'>
 			<Typography variant='hero' className='my-3 text-center font-bold'>
@@ -76,16 +91,50 @@ const Migration: React.FC = () => {
 					className='my-4'
 					fullWidth
 					onClick={async () => {
-						const lockDistribution = distribution.lockDistribution(getEpochSecondForDay(lockTime))
-						handleTx(lockDistribution, `Distribution: Migrate to veBAO`)
+						if (shouldBeWarned) {
+							modalShow()
+						} else {
+							const lockDistribution = distribution.lockDistribution(getEpochSecondForDay(lockTime))
+							handleTx(lockDistribution, `Distribution: Migrate to veBAO`)
+						}
 					}}
 				>
-					Migrate to veBAO
+					{shouldBeWarned ? 'Read Warning' : 'Migrate to veBAO'}
 				</Button>
 			</div>
 			<Typography variant='sm' className='m-auto text-text-200'>
 				* This action can be done only <b className='font-bold'>once</b> and can <b className='font-bold'>not</b> be reversed!
 			</Typography>
+
+			<Modal isOpen={showModal} onDismiss={modalHide}>
+				<Modal.Header
+					onClose={modalHide}
+					header={
+						<Typography variant='h2' className='inline-block font-semibold'>
+							Warning!
+						</Typography>
+					}
+				/>
+				<Modal.Body>
+					<Typography variant='xl' className='pb-5 font-semibold text-text-300'>
+						This action is IRREVERSIBLE
+					</Typography>
+					<Typography variant='base' className='leading-normal'>
+						This action converts all of the locked BAO tokens in your distribution into veBAO instantly.
+						<br />
+						<br />
+						This migration can only happen once and can never be undone.
+						<br />
+						<br />
+						If you take this action it will end your distribution and you will be unable to take any further distribution actions.
+					</Typography>
+					<div className='flow-col mt-5 flex items-center gap-3'>
+						<Button fullWidth onClick={modalHide}>
+							I understand the risk!
+						</Button>
+					</div>
+				</Modal.Body>
+			</Modal>
 		</div>
 	)
 }

src/pages/vebao/components/Actions.tsx

@@ -5,7 +5,6 @@ import Card from '@/components/Card'
 import Input from '@/components/Input'
 import Typography from '@/components/Typography'
 import useAllowance from '@/hooks/base/useAllowance'
-import useBao from '@/hooks/base/useBao'
 import useContract from '@/hooks/base/useContract'
 import useTransactionHandler from '@/hooks/base/useTransactionHandler'
 import useDistributionInfo from '@/hooks/distribution/useDistributionInfo'
@@ -33,7 +32,6 @@ type ActionProps = {
 }
 
 const Actions = ({ baoBalance, lockInfo }: ActionProps) => {
-	const bao = useBao()
 	const { library, account, chainId } = useWeb3React()
 	const [val, setVal] = useState('')
 	const allowance = useAllowance(Config.contracts.Baov2[chainId].address, Config.contracts.votingEscrow[chainId].address)
@@ -223,7 +221,13 @@ const Actions = ({ baoBalance, lockInfo }: ActionProps) => {
 										</Button>
 									) : (
 										<Button
-											disabled={!val || !bao || !lockTime || isNaN(val as any) || parseFloat(val) > parseFloat(formatUnits(baoBalance))}
+											disabled={
+												!val ||
+												!lockTime ||
+												isNaN(val as any) ||
+												parseFloat(val) > parseFloat(formatUnits(baoBalance)) ||
+												parseFloat(val) <= 0
+											}
 											onClick={async () => {
 												const lockTx = votingEscrow.increase_amount(ethers.utils.parseEther(val.toString()))
 												handleTx(
@@ -250,7 +254,7 @@ const Actions = ({ baoBalance, lockInfo }: ActionProps) => {
 									) : (
 										<Button
 											fullWidth
-											disabled={!bao || !lockTime || lockTime <= currentLockEnd}
+											disabled={!lockTime || lockTime <= currentLockEnd || max <= 0}
 											onClick={async () => {
 												const lockTx = votingEscrow.increase_unlock_time(getEpochSecondForDay(lockTime))
 												handleTx(lockTx, `veBAO: Increased lock until ${lockTime.toLocaleDateString()}`)

src/pages/vebao/components/Lock.tsx

@@ -6,7 +6,7 @@ import { useWeb3React } from '@web3-react/core'
 import { useQuery } from '@tanstack/react-query'
 import { BigNumber } from 'ethers'
 import 'rc-slider/assets/index.css'
-import React, { useState } from 'react'
+import React from 'react'
 import Actions from './Actions'
 //import BoostCalc from './BoostCalc'
 import LockStats, { ProtocolStatsHoriz } from './Stats'