From 1d32bb94461eb723dde8158ae5ea30358673d559 Mon Sep 17 00:00:00 2001 From: truemiller Date: Wed, 21 Aug 2024 13:55:25 +0100 Subject: [PATCH 1/7] refactor: seperate the funding section component from the main page section --- .../MainPage/sections/AddFundsSection.tsx | 60 ++++++++++--------- 1 file changed, 32 insertions(+), 28 deletions(-) diff --git a/frontend/components/MainPage/sections/AddFundsSection.tsx b/frontend/components/MainPage/sections/AddFundsSection.tsx index 97bf85641..d61970e7f 100644 --- a/frontend/components/MainPage/sections/AddFundsSection.tsx +++ b/frontend/components/MainPage/sections/AddFundsSection.tsx @@ -35,23 +35,6 @@ const CustomizedCardSection = styled(CardSection)<{ border?: boolean }>` export const AddFundsSection = () => { const [isAddFundsVisible, setIsAddFundsVisible] = useState(false); - const { masterSafeAddress } = useWallet(); - - const fundingAddress: Address | undefined = masterSafeAddress; - - const truncatedFundingAddress: string | undefined = useMemo( - () => fundingAddress && truncateAddress(fundingAddress), - [fundingAddress], - ); - - const handleCopyAddress = useCallback( - () => - fundingAddress && - copyToClipboard(fundingAddress).then(() => - message.success('Copied successfully!'), - ), - [fundingAddress], - ); return ( <> @@ -75,17 +58,38 @@ export const AddFundsSection = () => { - {isAddFundsVisible && ( - <> - - - - - )} + {isAddFundsVisible && } + + ); +}; + +export const OpenAddFundsSection = () => { + const { masterSafeAddress } = useWallet(); + + const fundingAddress: Address | undefined = masterSafeAddress; + + const truncatedFundingAddress: string | undefined = useMemo( + () => fundingAddress && truncateAddress(fundingAddress), + [fundingAddress], + ); + + const handleCopyAddress = useCallback( + () => + fundingAddress && + copyToClipboard(fundingAddress).then(() => + message.success('Copied successfully!'), + ), + [fundingAddress], + ); + return ( + <> + + + ); }; From c585d5994b73bc68acb15ab4d9b93b7ee0ec6406 Mon Sep 17 00:00:00 2001 From: truemiller Date: Wed, 21 Aug 2024 13:59:56 +0100 Subject: [PATCH 2/7] feat: add funding section to beta contract section --- .../StakingContractSection/index.tsx | 159 ++++++++++-------- 1 file changed, 91 insertions(+), 68 deletions(-) diff --git a/frontend/components/ManageStakingPage/StakingContractSection/index.tsx b/frontend/components/ManageStakingPage/StakingContractSection/index.tsx index b8fdf664c..725d62ac7 100644 --- a/frontend/components/ManageStakingPage/StakingContractSection/index.tsx +++ b/frontend/components/ManageStakingPage/StakingContractSection/index.tsx @@ -1,7 +1,8 @@ import { Button, Flex, Popover, theme, Typography } from 'antd'; -import { useMemo } from 'react'; +import { useMemo, useState } from 'react'; import { DeploymentStatus } from '@/client'; +import { OpenAddFundsSection } from '@/components/MainPage/sections/AddFundsSection'; import { CardSection } from '@/components/styled/CardSection'; import { STAKING_PROGRAM_META } from '@/constants/stakingProgramMeta'; import { UNICODE_SYMBOLS } from '@/constants/symbols'; @@ -59,8 +60,12 @@ export const StakingContractSection = ({ contractAddress: Address; }) => { const { goto } = usePageState(); - const { setServiceStatus, serviceStatus, setIsServicePollingPaused } = - useServices(); + const { + setServiceStatus, + serviceStatus, + setIsServicePollingPaused, + updateServiceStatus, + } = useServices(); const { serviceTemplate } = useServiceTemplates(); const { setMigrationModalOpen } = useModals(); const { activeStakingProgram, defaultStakingProgram, updateStakingProgram } = @@ -69,6 +74,7 @@ export const StakingContractSection = ({ const { token } = useToken(); const { totalOlasBalance, isBalanceLoaded } = useBalance(); const { isServiceStakedForMinimumDuration } = useStakingContractInfo(); + const [isFundingSectionOpen, setIsFundingSectionOpen] = useState(false); const stakingContractInfoForStakingProgram = stakingContractInfoRecord?.[stakingProgram]; @@ -213,40 +219,41 @@ export const StakingContractSection = ({ }, [activeStakingProgram, defaultStakingProgram, stakingProgram]); return ( - - {/* Title */} - - {`${activeStakingProgramMeta.name} contract`} - {/* TODO: pass `status` attribute */} - - {!isSelected && ( - // here instead of isSelected we should check that the contract is not the old staking contract - // but the one from staking factory (if we want to open govern) - - Contract details {UNICODE_SYMBOLS.EXTERNAL_LINK} - - )} - - - {/* TODO: fix */} - - {/* Contract details + <> + + {/* Title */} + + {`${activeStakingProgramMeta.name} contract`} + + {!isSelected && ( + // here instead of isSelected we should check that the contract is not the old staking contract + // but the one from staking factory (if we want to open govern) + + Contract details {UNICODE_SYMBOLS.EXTERNAL_LINK} + + )} + + + {/* TODO: redisplay once bugs resolved */} + + {/* Contract details {stakingContractInfo?.availableRewards && ( )} */} - {cantMigrateAlert} - {/* Switch to program button */} - {!isSelected && ( - + {cantMigrateAlert} + {/* Switch to program button */} + { + <> + + + + + } + {stakingProgram === StakingProgram.Beta && ( - + )} + + {stakingProgram === StakingProgram.Beta && isFundingSectionOpen && ( + )} - + ); }; From 75a9ccfc76a309f0409b4f26eaa6a0f9e270b6e7 Mon Sep 17 00:00:00 2001 From: truemiller Date: Wed, 28 Aug 2024 12:44:08 +0100 Subject: [PATCH 3/7] fix: required staking balance calculations --- .../StakingContractSection/index.tsx | 30 +++++++++++++------ 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/frontend/components/ManageStakingPage/StakingContractSection/index.tsx b/frontend/components/ManageStakingPage/StakingContractSection/index.tsx index 363f7ce55..edfe91959 100644 --- a/frontend/components/ManageStakingPage/StakingContractSection/index.tsx +++ b/frontend/components/ManageStakingPage/StakingContractSection/index.tsx @@ -65,10 +65,10 @@ export const StakingContractSection = ({ const { setMigrationModalOpen } = useModals(); const { activeStakingProgram, defaultStakingProgram, updateStakingProgram } = useStakingProgram(); - const { stakingContractInfoRecord } = useStakingContractInfo(); const { token } = useToken(); - const { totalOlasBalance, isBalanceLoaded } = useBalance(); - const { isServiceStakedForMinimumDuration } = useStakingContractInfo(); + const { safeBalance, totalOlasStakedBalance, isBalanceLoaded } = useBalance(); + const { isServiceStakedForMinimumDuration, stakingContractInfoRecord } = + useStakingContractInfo(); const stakingContractInfoForStakingProgram = stakingContractInfoRecord?.[stakingProgram]; @@ -87,10 +87,15 @@ export const StakingContractSection = ({ ); const hasEnoughOlasToMigrate = useMemo(() => { - if (totalOlasBalance === undefined) return false; - if (!minimumOlasRequiredToMigrate) return false; - return totalOlasBalance >= minimumOlasRequiredToMigrate; - }, [minimumOlasRequiredToMigrate, totalOlasBalance]); + if (safeBalance?.OLAS === undefined || totalOlasStakedBalance === undefined) + return false; + + const balanceForMigration = safeBalance.OLAS + totalOlasStakedBalance; + + if (minimumOlasRequiredToMigrate === undefined) return false; + + return balanceForMigration >= minimumOlasRequiredToMigrate; + }, [minimumOlasRequiredToMigrate, safeBalance?.OLAS, totalOlasStakedBalance]); const hasEnoughSlots = stakingContractInfoForStakingProgram?.maxNumServices && @@ -167,6 +172,7 @@ export const StakingContractSection = ({ isBalanceLoaded, isSelected, isServiceStakedForMinimumDuration, + minimumOlasRequiredToMigrate, serviceStatus, ]); @@ -181,7 +187,11 @@ export const StakingContractSection = ({ if (!hasEnoughOlasToMigrate) { return ( - + ); } @@ -191,10 +201,12 @@ export const StakingContractSection = ({ }, [ isSelected, isBalanceLoaded, - totalOlasBalance, hasEnoughSlots, hasEnoughOlasToMigrate, isAppVersionCompatible, + safeBalance?.OLAS, + totalOlasStakedBalance, + minimumOlasRequiredToMigrate, ]); const contractTagStatus = useMemo(() => { From 20114179012b90d6b0279ea2fe11085721fd7ceb Mon Sep 17 00:00:00 2001 From: truemiller Date: Wed, 28 Aug 2024 12:44:19 +0100 Subject: [PATCH 4/7] refactor: update copy as per figma --- .../StakingContractSection/alerts.tsx | 50 +++++++++++-------- 1 file changed, 30 insertions(+), 20 deletions(-) diff --git a/frontend/components/ManageStakingPage/StakingContractSection/alerts.tsx b/frontend/components/ManageStakingPage/StakingContractSection/alerts.tsx index f2c1cf6cd..bee80cbcb 100644 --- a/frontend/components/ManageStakingPage/StakingContractSection/alerts.tsx +++ b/frontend/components/ManageStakingPage/StakingContractSection/alerts.tsx @@ -6,28 +6,38 @@ import { UNICODE_SYMBOLS } from '@/constants/symbols'; const { Text } = Typography; export const AlertInsufficientMigrationFunds = ({ - totalOlasBalance, + masterSafeOlasBalance, + stakedOlasBalance, + totalOlasRequiredForStaking, }: { - totalOlasBalance: number; -}) => ( - - - Insufficient amount of funds to switch - + masterSafeOlasBalance?: number; + stakedOlasBalance?: number; + totalOlasRequiredForStaking: number; +}) => { + const requiredOlasDeposit = + stakedOlasBalance !== undefined && + masterSafeOlasBalance !== undefined && + totalOlasRequiredForStaking - (stakedOlasBalance + masterSafeOlasBalance); - Add funds to your account to meet the program requirements. - - Your current OLAS balance:{' '} - {totalOlasBalance} OLAS - - - } - /> -); + return ( + + + Additional {requiredOlasDeposit} OLAS are required to switch + + + + Add {requiredOlasDeposit} OLAS to your account to + meet the contract requirements and be able to switch. + + + } + /> + ); +}; export const AlertNoSlots = () => ( Date: Wed, 28 Aug 2024 12:51:51 +0100 Subject: [PATCH 5/7] refactor: ensure not undefined earlier --- .../ManageStakingPage/StakingContractSection/alerts.tsx | 6 ++---- .../ManageStakingPage/StakingContractSection/index.tsx | 8 ++++++-- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/frontend/components/ManageStakingPage/StakingContractSection/alerts.tsx b/frontend/components/ManageStakingPage/StakingContractSection/alerts.tsx index bee80cbcb..6aeb6471d 100644 --- a/frontend/components/ManageStakingPage/StakingContractSection/alerts.tsx +++ b/frontend/components/ManageStakingPage/StakingContractSection/alerts.tsx @@ -10,13 +10,11 @@ export const AlertInsufficientMigrationFunds = ({ stakedOlasBalance, totalOlasRequiredForStaking, }: { - masterSafeOlasBalance?: number; - stakedOlasBalance?: number; + masterSafeOlasBalance: number; + stakedOlasBalance: number; totalOlasRequiredForStaking: number; }) => { const requiredOlasDeposit = - stakedOlasBalance !== undefined && - masterSafeOlasBalance !== undefined && totalOlasRequiredForStaking - (stakedOlasBalance + masterSafeOlasBalance); return ( diff --git a/frontend/components/ManageStakingPage/StakingContractSection/index.tsx b/frontend/components/ManageStakingPage/StakingContractSection/index.tsx index edfe91959..9acfc4c39 100644 --- a/frontend/components/ManageStakingPage/StakingContractSection/index.tsx +++ b/frontend/components/ManageStakingPage/StakingContractSection/index.tsx @@ -185,10 +185,14 @@ export const StakingContractSection = ({ return ; } - if (!hasEnoughOlasToMigrate) { + if ( + !hasEnoughOlasToMigrate && + safeBalance?.OLAS !== undefined && + totalOlasStakedBalance !== undefined + ) { return ( From e6d7af9d74638fe6c2e043bdbf1ed4424c7908be Mon Sep 17 00:00:00 2001 From: truemiller Date: Wed, 28 Aug 2024 16:42:01 +0100 Subject: [PATCH 6/7] refactor: remove reassignment --- .../MainPage/sections/AddFundsSection.tsx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/frontend/components/MainPage/sections/AddFundsSection.tsx b/frontend/components/MainPage/sections/AddFundsSection.tsx index d61970e7f..ad3e17053 100644 --- a/frontend/components/MainPage/sections/AddFundsSection.tsx +++ b/frontend/components/MainPage/sections/AddFundsSection.tsx @@ -18,7 +18,6 @@ import styled from 'styled-components'; import { UNICODE_SYMBOLS } from '@/constants/symbols'; import { COW_SWAP_GNOSIS_XDAI_OLAS_URL } from '@/constants/urls'; import { useWallet } from '@/hooks/useWallet'; -import { Address } from '@/types/Address'; import { copyToClipboard } from '@/utils/copyToClipboard'; import { truncateAddress } from '@/utils/truncate'; @@ -66,27 +65,25 @@ export const AddFundsSection = () => { export const OpenAddFundsSection = () => { const { masterSafeAddress } = useWallet(); - const fundingAddress: Address | undefined = masterSafeAddress; - const truncatedFundingAddress: string | undefined = useMemo( - () => fundingAddress && truncateAddress(fundingAddress), - [fundingAddress], + () => masterSafeAddress && truncateAddress(masterSafeAddress), + [masterSafeAddress], ); const handleCopyAddress = useCallback( () => - fundingAddress && - copyToClipboard(fundingAddress).then(() => + masterSafeAddress && + copyToClipboard(masterSafeAddress).then(() => message.success('Copied successfully!'), ), - [fundingAddress], + [masterSafeAddress], ); return ( <> From b3d4356c812f5c92e29c2425e03f0b013798b805 Mon Sep 17 00:00:00 2001 From: truemiller Date: Wed, 28 Aug 2024 16:42:36 +0100 Subject: [PATCH 7/7] refactor: remove fragment --- .../StakingContractSection/index.tsx | 66 +++++++++---------- 1 file changed, 32 insertions(+), 34 deletions(-) diff --git a/frontend/components/ManageStakingPage/StakingContractSection/index.tsx b/frontend/components/ManageStakingPage/StakingContractSection/index.tsx index 0c8f3ccf0..856a5648f 100644 --- a/frontend/components/ManageStakingPage/StakingContractSection/index.tsx +++ b/frontend/components/ManageStakingPage/StakingContractSection/index.tsx @@ -287,40 +287,38 @@ export const StakingContractSection = ({ {cantMigrateAlert} {/* Switch to program button */} { - <> - - - - + + + } {stakingProgram === StakingProgram.Beta && (