Merge pull request #62 from lidofinance/develop

from develop to main

features/admin/vestingRow.tsx

@@ -1,27 +1,38 @@
 import { Button, Loader, Td, Tr } from '@lidofinance/lido-ui';
-import { useRevokeUnvested, useVestingIsRevoked } from 'features/vesting';
+import {
+ useRevokeUnvested,
+ useVestingIsRevoked,
+ useVestingLocked,
+} from 'features/vesting';
 import { Vesting } from 'features/vesting/types';
 import { FC, memo, MouseEventHandler } from 'react';
 
 type StatusProps = {
- data?: boolean;
+ isRevoked?: boolean;
+ isEnded?: boolean;
  isLoading: boolean;
 };
 
-const Status: FC<StatusProps> = ({ data, isLoading }) => {
+const Status: FC<StatusProps> = ({ isRevoked, isEnded, isLoading }) => {
  if (isLoading) {
  return <Loader />;
  }
- return data ? <>Revoked</> : <>Active</>;
+ if (isEnded) {
+ return <>Ended</>;
+ }
+ if (isRevoked) {
+ return <>Revoked</>;
+ }
+ return <>Active</>;
 };
 
 type ActionProps = {
- data?: boolean;
+ disabled?: boolean;
  isLoading: boolean;
  onClick?: MouseEventHandler<HTMLButtonElement>;
 };
 
-const Action: FC<ActionProps> = ({ data, isLoading, onClick }) => {
+const Action: FC<ActionProps> = ({ disabled, isLoading, onClick }) => {
  if (isLoading) {
  return <Loader />;
  }
@@ -31,7 +42,7 @@ const Action: FC<ActionProps> = ({ data, isLoading, onClick }) => {
  size="xxs"
  color="error"
  variant="outlined"
- disabled={data}
+ disabled={disabled}
  >
  Revoke
  </Button>
@@ -44,19 +55,28 @@ export type VestingRowProps = {
 
 export const VestingRow: FC<VestingRowProps> = memo(({ vesting }) => {
  const revokeUnvested = useRevokeUnvested(vesting.escrow);
- const isRevokedSWR = useVestingIsRevoked(vesting.escrow);
+ const { data: isRevoked, isLoading: isRevokedLoading } = useVestingIsRevoked(
+ vesting.escrow,
+ );
+ const { data: locked, isLoading: isLockedLoading } = useVestingLocked(
+ vesting.escrow,
+ );
 
  return (
  <Tr>
  <Td>{vesting.escrow}</Td>
  <Td>{vesting.recipient}</Td>
  <Td>
- <Status data={isRevokedSWR.data} isLoading={isRevokedSWR.isLoading} />
+ <Status
+ isRevoked={isRevoked}
+ isEnded={locked?.isZero()}
+ isLoading={isRevokedLoading}
+ />
  </Td>
  <Td>
  <Action
- data={isRevokedSWR.data}
- isLoading={isRevokedSWR.isLoading}
+ disabled={isRevoked || locked?.isZero()}
+ isLoading={isRevokedLoading || isLockedLoading}
  onClick={revokeUnvested}
  />
  </Td>

features/aragon/aragon.tsx

@@ -1,11 +1,14 @@
 import { Main, useWalletError } from 'shared/ui';
 import { AragonWallet } from './aragonWallet';
 import { AragonForm } from './aragonForm';
-import { VestingCarousel } from './vestingsCarousel';
 import { InlineLoader } from '@lidofinance/lido-ui';
-import { useAccountVestings } from 'features/vesting';
+import {
+ VestingCarousel,
+ VestingSummarySlide,
+ useAccountVestings,
+} from 'features/vesting';
 import { AragonFormDisconnected } from './aragonFormDisconnected';
-import { useWeb3 } from 'reef-knot';
+import { useWeb3 } from 'reef-knot/web3-react';
 import { AragonFormError } from './aragonFormError';
 
 export const Aragon = () => {
@@ -48,7 +51,9 @@ export const Aragon = () => {
  <AragonWallet />
 
  <Main.Card>
- <VestingCarousel />
+ <VestingCarousel
+ slide={<VestingSummarySlide title="Available to vote" />}
+ />
  <AragonForm />
  </Main.Card>
  </Main>

features/aragon/aragonForm.tsx

@@ -4,8 +4,9 @@ import { useCallback } from 'react';
 import { useForm } from 'react-hook-form';
 import { EtherscanLink, InputGroupStyled, InputNumber } from 'shared/ui';
 import { useEncodeAragonCalldata } from 'features/votingAdapter';
-import { ButtonsGroup, Form, VestingInfo } from './aragonFormStyles';
+import { ButtonsGroup, Form, Links } from './aragonFormStyles';
 import { useGetVoting } from './useAragon';
+import { VotingLink } from './votingLink';
 
 type AragonFormData = {
  voteId: string;
@@ -29,9 +30,11 @@ export const AragonForm = () => {
  register,
  handleSubmit,
  setValue,
- formState: { isValid, errors },
+ watch,
+ formState: { isValid, errors, isSubmitting },
  } = useForm<AragonFormData>({ mode: 'onChange' });
 
+ const voteId = watch('voteId');
  const encodeCalldata = useEncodeAragonCalldata();
  const aragonVote = useAragonVote(activeVesting?.escrow);
  const getVoting = useGetVoting();
@@ -47,6 +50,14 @@ export const AragonForm = () => {
  ToastError('Voting is closed');
  return;
  }
+ /*
+ * Search for VotePhase on
+ * https://etherscan.io/address/0x72fb5253ad16307b9e773d2a78cac58e309d5ba4#code
+ */
+ if (success && vote?.phase === 1) {
+ ToastError('Voting is in objection phase');
+ return;
+ }
 
  const callData = await encodeCalldata(parseInt(voteId), success);
  await aragonVote(callData);
@@ -69,17 +80,25 @@ export const AragonForm = () => {
  fullwidth
  label="Vote ID"
  error={errors.voteId != null}
+ disabled={isSubmitting}
  {...register('voteId', {
  validate: validateVoteId,
  required: true,
  })}
  />
  </InputGroupStyled>
 
- <VestingInfo>
- See program on{' '}
- <EtherscanLink address={activeVesting?.escrow}>Etherscan</EtherscanLink>
- </VestingInfo>
+ <Links>
+ <div>
+ See program on{' '}
+ <EtherscanLink address={activeVesting?.escrow}>
+ Etherscan
+ </EtherscanLink>
+ </div>
+ <div>
+ <VotingLink voteId={voteId}>Check voting info</VotingLink>
+ </div>
+ </Links>
 
  <ButtonsGroup>
  {/* this prevents form being submitted by Enter keypress on the input */}
@@ -89,6 +108,7 @@ export const AragonForm = () => {
  disabled={!isValid}
  color="primary"
  fullwidth
+ loading={isSubmitting}
  onClick={handleYesButton}
  >
  For
@@ -98,6 +118,7 @@ export const AragonForm = () => {
  disabled={!isValid}
  color="secondary"
  fullwidth
+ loading={isSubmitting}
  onClick={handleNoButton}
  >
  Against

features/aragon/aragonFormStyles.tsx

@@ -14,6 +14,8 @@ export const ButtonsGroup = styled.div`
  }
 `;
 
-export const VestingInfo = styled.div`
+export const Links = styled.div`
+ display: flex;
+ justify-content: space-between;
  margin-bottom: ${({ theme }) => theme.spaceMap.md}px;
 `;

features/aragon/aragonWallet.tsx

@@ -1,7 +1,7 @@
 import { InlineLoader } from '@lidofinance/lido-ui';
 import { useAccountVestings } from 'features/vesting';
 import { MODAL, useModal } from 'features/walletModal';
-import { useWeb3 } from 'reef-knot';
+import { useWeb3 } from 'reef-knot/web3-react';
 import { AddressBadge, Main } from 'shared/ui';
 import { AddressBadgeWrapper, AragonWalletStyle } from './aragonWalletStyles';
 

features/aragon/useAragon.ts

@@ -3,7 +3,7 @@ import { CHAINS } from 'config/chains';
 import { runWithFunctionLogger } from 'features/loggers';
 import { Aragon__factory } from 'generated';
 import { useCallback, useMemo } from 'react';
-import { useWeb3 } from 'reef-knot';
+import { useWeb3 } from 'reef-knot/web3-react';
 
 const aragonAddressMap = {
  [CHAINS.Mainnet]: '0x2e59A20f205bB85a89C53f1936454680651E618e',

features/aragon/votingLink.tsx

@@ -0,0 +1,34 @@
+import { Link } from '@lidofinance/lido-ui';
+import { FC, PropsWithChildren, memo, useEffect, useState } from 'react';
+import { validateNumericInput } from 'shared/ui';
+
+const getVotingOrigin = (hostname: string) => {
+ if (hostname === 'localhost' || hostname.endsWith('.testnet.fi')) {
+ return 'https://vote.testnet.fi';
+ }
+ if (hostname.endsWith('.infra-staging.org')) {
+ return 'https://vote.infra-staging.org';
+ }
+ return 'https://vote.lido.fi';
+};
+
+export const VotingLink: FC<PropsWithChildren<{ voteId?: string }>> = memo(
+ ({ voteId, children }) => {
+ const [href, setHref] = useState('https://vote.lido.fi');
+
+ useEffect(() => {
+ const url = new URL(window.location.href);
+ const votingOrigin = getVotingOrigin(url.hostname);
+ const votingPath =
+ voteId == null ||
+ voteId === '' ||
+ validateNumericInput(voteId, '_internal_') !== true
+ ? ''
+ : `/vote/${voteId}`;
+ setHref(`${votingOrigin}${votingPath}`);
+ }, [voteId]);
+
+ return <Link href={href}>{children}</Link>;
+ },
+);
+VotingLink.displayName = 'EtherscanLink';

features/claim/claim.tsx

@@ -1,10 +1,10 @@
 import { Wallet } from './wallet';
 import { ClaimForm } from './claimForm';
-import { VestingCarousel } from './vestingCarousel';
+import { VestingCarousel } from '../vesting/vestingCarousel';
 import { Main, useWalletError } from 'shared/ui';
-import { useWeb3 } from 'reef-knot';
+import { useWeb3 } from 'reef-knot/web3-react';
 import { ClaimFormDisconnected } from './claimFormDisconnected';
-import { useAccountVestings } from 'features/vesting';
+import { VestingDetailedSlide, useAccountVestings } from 'features/vesting';
 import { ClaimFormError } from './claimFormError';
 import { InlineLoader } from '@lidofinance/lido-ui';
 
@@ -47,7 +47,7 @@ export const Claim = () => {
  <Main>
  <Wallet />
  <Main.Card>
- <VestingCarousel />
+ <VestingCarousel slide={<VestingDetailedSlide />} />
  <ClaimForm />
  </Main.Card>
  </Main>