Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

disable earn vault #726

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

disable earn vault #726

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
44aae1d
disable earn vault
timongll Jan 26, 2024
292074f
m
timongll Jan 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions webapp/src/components/RootApp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import YourPositionModal from "./Vault/Modal/YourPositionModal";
import PausePositionModal from "./Vault/Modal/PausePositionModal";
import ResumePositionModal from "./Vault/Modal/ResumePositionModal";
import EarnPage from "../pages/DepositPage/EarnPage";

const Root = styled.div<{ screenHeight: number }>`
background-color: ${colors.background.one};
min-height: ${(props) =>
Expand Down
312 changes: 165 additions & 147 deletions webapp/src/pages/DepositPage/EarnPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,13 +60,20 @@ import {
} from "shared/lib/hooks/useGeofence";
import TextPreview from "shared/lib/components/TextPreview/TextPreview";
import Geoblocked from "shared/lib/components/Geoblocked/Geoblocked";
import Banner from "shared/lib/components/Banner/Banner";

const delayedFade = css<{ delay?: number }>`
opacity: 0;
animation: ${fadeIn} 1s ease-in-out forwards;
animation-delay: ${({ delay }) => `${delay || 0}s`};
`;

const AbsoluteContainer = styled.div`
position: absolute;
width: 100%;
top: 0;
`;

const { formatUnits } = ethers.utils;

const PendingOrLogoContainer = styled.div<{ delay?: number }>`
Expand Down Expand Up @@ -513,160 +520,171 @@ const EarnPage = () => {
<StyledEarnInnerRing color={colors.green} />
</FadeDiv>
</CirclesContainer>
<PageContainer offset={pageOffset}>
<AnimatePresence exitBeforeEnter>
{showVault.show ? (
<motion.div
key={"showVault"}
initial={{
opacity: 0,
}}
animate={{
opacity: 1,
}}
exit={{
opacity: 0,
}}
transition={{
duration: 0.25,
type: "keyframes",
ease: "easeInOut",
}}
>
<VaultContainer>
<PendingOrLogoContainer delay={0.1}>
{hasPendingDeposits ? (
<PendingDepositsContainer color={color}>
<div style={{ position: "relative", width: "100%" }}>
<AbsoluteContainer>
<Banner
color={color}
message={"R-EARN vault is now inactive and does not accept deposits"}
></Banner>
</AbsoluteContainer>
<PageContainer offset={pageOffset}>
<AnimatePresence exitBeforeEnter>
{showVault.show ? (
<motion.div
key={"showVault"}
initial={{
opacity: 0,
}}
animate={{
opacity: 1,
}}
exit={{
opacity: 0,
}}
transition={{
duration: 0.25,
type: "keyframes",
ease: "easeInOut",
}}
>
<VaultContainer>
<PendingOrLogoContainer delay={0.1}>
{hasPendingDeposits ? (
<PendingDepositsContainer color={color}>
<ProductAssetLogoContainer color={color}>
{logo}
</ProductAssetLogoContainer>
<TextContainer>
<p>
Your deposit will deployed in the vault in{" "}
<span style={{ color: colors.primaryText }}>
{strategyStartTime}
</span>
</p>
</TextContainer>
</PendingDepositsContainer>
) : (
<ProductAssetLogoContainer color={color}>
{logo}
</ProductAssetLogoContainer>
<TextContainer>
<p>
Your deposit will deployed in the vault in{" "}
<span style={{ color: colors.primaryText }}>
{strategyStartTime}
</span>
</p>
</TextContainer>
</PendingDepositsContainer>
) : (
<ProductAssetLogoContainer color={color}>
{logo}
</ProductAssetLogoContainer>
)}
</PendingOrLogoContainer>
<BalanceTitle delay={0.2}>Your Balance ({asset})</BalanceTitle>
<HeroText delay={0.3}>
{isLoading || !account
? "---"
: formatBigNumber(
BigNumber.from(investedInStrategy),
decimals,
decimalPlaces
)}
</HeroText>
<HeroSubtitle color={yieldColor} delay={0.4}>
{roi > 0 && "+"}
{isLoading || roi === 0 ? "0.00" : roi.toFixed(4)}%
</HeroSubtitle>
<ViewDetailsButton
role="button"
onClick={() => {
setShowDetailsModal(true);
}}
delay={0.5}
>
View Details
</ViewDetailsButton>
<ButtonContainer delay={0.6}>
{active && account ? (
<>
<StyledActionButton
className={`mt-5 py-3 mb-0 w-100`}
color={color}
onClick={() => {
setShowDepositModal(true);
}}
>
Deposit
</StyledActionButton>
<StyledActionButton
className={`py-3 mb-1 w-100`}
color={"white"}
disabled={!showInitiateWithdraw}
onClick={() => {
setShowWithdrawModal(true);
}}
>
Withdraw
</StyledActionButton>
{showCompleteWithdraw && (
<CompleteWithdrawButton
className={`py-3 mb-1 w-100`}
)}
</PendingOrLogoContainer>
<BalanceTitle delay={0.2}>
Your Balance ({asset})
</BalanceTitle>
<HeroText delay={0.3}>
{isLoading || !account
? "---"
: formatBigNumber(
BigNumber.from(investedInStrategy),
decimals,
decimalPlaces
)}
</HeroText>
<HeroSubtitle color={yieldColor} delay={0.4}>
{roi > 0 && "+"}
{isLoading || roi === 0 ? "0.00" : roi.toFixed(4)}%
</HeroSubtitle>
<ViewDetailsButton
role="button"
onClick={() => {
setShowDetailsModal(true);
}}
delay={0.5}
>
View Details
</ViewDetailsButton>
<ButtonContainer delay={0.6}>
{active && account ? (
<>
<StyledActionButton
className={`mt-5 py-3 mb-0 w-100`}
color={color}
onClick={() => {
setShowCompleteModal(true);
setShowDepositModal(true);
}}
disabled
>
<div className="d-flex flex-row justify-content-around align-items-center">
<Marker color={color} />
<SecondaryText>
Complete your withdrawals
</SecondaryText>
</div>
</CompleteWithdrawButton>
)}
</>
) : (
<StyledActionButton
className={`mt-5 py-3 w-100`}
color={color}
onClick={() => setShowConnectModal(true)}
>
Connect Wallet
</StyledActionButton>
)}
</ButtonContainer>
<EarnCapacityText delay={0.7}>
{isLoading || isVaultMaxCapacity === undefined ? (
loadingText
) : isVaultMaxCapacity ? (
<VaultFullText>Vault is currently full</VaultFullText>
) : (
formatAmount(totalDepositStr) +
" " +
asset +
" / " +
formatAmount(depositLimitStr) +
" " +
asset
)}
</EarnCapacityText>
</VaultContainer>
</motion.div>
) : (
<motion.div
key={"showIntro"}
initial={{
opacity: 0,
}}
animate={{
opacity: 1,
}}
exit={{
opacity: 0,
}}
transition={{
duration: 0.25,
type: "keyframes",
ease: "easeInOut",
}}
>
<EarnStrategyExplainer vaultOption={vaultOption} />
</motion.div>
)}
</AnimatePresence>
</PageContainer>
Deposit
</StyledActionButton>
<StyledActionButton
className={`py-3 mb-1 w-100`}
color={"white"}
disabled={!showInitiateWithdraw}
onClick={() => {
setShowWithdrawModal(true);
}}
>
Withdraw
</StyledActionButton>
{showCompleteWithdraw && (
<CompleteWithdrawButton
className={`py-3 mb-1 w-100`}
color={color}
onClick={() => {
setShowCompleteModal(true);
}}
>
<div className="d-flex flex-row justify-content-around align-items-center">
<Marker color={color} />
<SecondaryText>
Complete your withdrawals
</SecondaryText>
</div>
</CompleteWithdrawButton>
)}
</>
) : (
<StyledActionButton
className={`mt-5 py-3 w-100`}
color={color}
onClick={() => setShowConnectModal(true)}
>
Connect Wallet
</StyledActionButton>
)}
</ButtonContainer>
<EarnCapacityText delay={0.7}>
{isLoading || isVaultMaxCapacity === undefined ? (
loadingText
) : isVaultMaxCapacity ? (
<VaultFullText>Vault is currently full</VaultFullText>
) : (
formatAmount(totalDepositStr) +
" " +
asset +
" / " +
formatAmount(depositLimitStr) +
" " +
asset
)}
</EarnCapacityText>
</VaultContainer>
</motion.div>
) : (
<motion.div
key={"showIntro"}
initial={{
opacity: 0,
}}
animate={{
opacity: 1,
}}
exit={{
opacity: 0,
}}
transition={{
duration: 0.25,
type: "keyframes",
ease: "easeInOut",
}}
>
<EarnStrategyExplainer vaultOption={vaultOption} />
</motion.div>
)}
</AnimatePresence>
</PageContainer>
</div>
<EarnDetailsModal
show={showDetailsModal}
onClose={() => setShowDetailsModal(false)}
Expand Down
Loading