From 948e01a529c48c1204c23302d30e2114a3bb709a Mon Sep 17 00:00:00 2001 From: Taras Alekhin Date: Fri, 17 Nov 2023 12:50:13 +0400 Subject: [PATCH 01/20] feat: updated FAQ texts, added timestamp on request items in claim page --- .../list/how-can-i-unstake-steth.tsx | 6 +-- .../requests-list/request-item-status.tsx | 45 +++++++++------- .../claim/form/requests-list/request-item.tsx | 8 +-- .../claim/form/requests-list/styles.ts | 21 ++++---- .../hooks/contract/useWithdrawalsData.ts | 53 +++++++++++++++++++ features/withdrawals/types/request-status.ts | 1 + .../withdrawals/utils/format-timestamp.ts | 15 ++++++ .../withdrawals-constants/index.ts | 1 + .../list/how-long-to-withdraw.tsx | 15 +++++- .../list/why-waiting-time-changed.tsx | 18 +++++++ .../list/withdrawal-period-circumstances.tsx | 9 +++- .../withdrawals-faq/request-faq.tsx | 2 + 12 files changed, 153 insertions(+), 41 deletions(-) create mode 100644 features/withdrawals/utils/format-timestamp.ts create mode 100644 features/withdrawals/withdrawals-faq/list/why-waiting-time-changed.tsx diff --git a/features/home/stake-faq/list/how-can-i-unstake-steth.tsx b/features/home/stake-faq/list/how-can-i-unstake-steth.tsx index ccefdab3d..ea7c4a582 100644 --- a/features/home/stake-faq/list/how-can-i-unstake-steth.tsx +++ b/features/home/stake-faq/list/how-can-i-unstake-steth.tsx @@ -21,10 +21,8 @@ export const HowCanIUnstakeSteth: FC = () => { Withdrawals Request and Claim tabs {' '} - to unstake stETH and receive ETH at a 1:1 ratio. Under normal - circumstances, withdrawal period can take anywhere between 1-5 days. - After that, you can claim your ETH using the Claim tab. Also, you can - exchange stETH on{' '} + to unstake stETH and receive ETH at a 1:1 ratio. Also, you can exchange + stETH on{' '} = ({ status }) => { - if (status === 'pending') return ; - return ; +type RequestItemStatusProps = { + status: 'ready' | 'pending'; + finalizationAt: string | null; }; -const RequestStatusPending: React.FC = () => { - const waitingTime = useWaitingTime(''); - return ( - - - - ); +export const RequestStatus: React.FC = (props) => { + return ; }; const RequestStatusBody = forwardRef< HTMLDivElement, RequestItemStatusProps & React.ComponentProps<'div'> ->(({ status, ...props }, ref) => { - const statusText = status === 'ready' ? 'Ready to claim' : 'Pending'; +>(({ status, finalizationAt, ...props }, ref) => { + let statusText; + let statusTextMobile; + + if (status === 'ready') { + statusText = 'Ready'; + statusTextMobile = 'Ready'; + } else if (finalizationAt) { + statusText = formatTimestamp(finalizationAt); + statusTextMobile = formatTimestamp(finalizationAt, true); + } else { + statusText = 'Pending'; + statusTextMobile = 'Pending'; + } + return ( + {statusText} - - {status === 'pending' && } + {statusTextMobile} ); }); diff --git a/features/withdrawals/claim/form/requests-list/request-item.tsx b/features/withdrawals/claim/form/requests-list/request-item.tsx index 1043ccc8a..e2b83797c 100644 --- a/features/withdrawals/claim/form/requests-list/request-item.tsx +++ b/features/withdrawals/claim/form/requests-list/request-item.tsx @@ -50,15 +50,15 @@ export const RequestItem = forwardRef( - + diff --git a/features/withdrawals/claim/form/requests-list/styles.ts b/features/withdrawals/claim/form/requests-list/styles.ts index 50487cd57..12a56cb38 100644 --- a/features/withdrawals/claim/form/requests-list/styles.ts +++ b/features/withdrawals/claim/form/requests-list/styles.ts @@ -60,7 +60,6 @@ export const RequestsStatusStyled = styled.div` margin-right: 8px; padding: 2px ${({ theme }) => theme.spaceMap.sm}px; ${({ theme }) => theme.mediaQueries.sm} { - padding: 4px; min-width: 24px; justify-content: center; } @@ -94,20 +93,24 @@ export const DesktopStatus = styled.span` } `; -export const MobileStatusIcon = styled.img.attrs( - ({ $variant }) => ({ - alt: $variant, - src: $variant === 'ready' ? RequestReady : RequestPending, - }), -)` +export const MobileStatus = styled.span` + font-size: 12px; + font-weight: 600; display: none; - width: 16px; - height: 16px; ${({ theme }) => theme.mediaQueries.sm} { display: block; } `; +export const StatusIcon = styled.img.attrs(({ $variant }) => ({ + alt: $variant, + src: $variant === 'ready' ? RequestReady : RequestPending, +}))` + display: block; + width: 16px; + height: 16px; +`; + export const RequestInfoIcon = styled.img.attrs({ alt: 'info', src: RequestInfo, diff --git a/features/withdrawals/hooks/contract/useWithdrawalsData.ts b/features/withdrawals/hooks/contract/useWithdrawalsData.ts index ff1cd92d7..7fe8180be 100644 --- a/features/withdrawals/hooks/contract/useWithdrawalsData.ts +++ b/features/withdrawals/hooks/contract/useWithdrawalsData.ts @@ -13,6 +13,9 @@ import { } from 'features/withdrawals/types/request-status'; import { MAX_SHOWN_REQUEST_PER_TYPE } from 'features/withdrawals/withdrawals-constants'; import { STRATEGY_LAZY } from 'utils/swrStrategies'; +import { standardFetcher } from 'utils/standardFetcher'; +import { dynamics } from 'config'; +import { encodeURLQuery } from 'utils/encodeURLQuery'; // import { calcExpectedRequestEth } from 'features/withdrawals/utils/calc-expected-request-eth'; @@ -20,6 +23,42 @@ export type WithdrawalRequests = NonNullable< ReturnType['data'] >; +const getRequestTimeForWQRequestIds = async (ids: string[]) => { + const idsPages = []; + const pageSize = 20; + + for (let i = 0; i < ids.length; i += pageSize) { + idsPages.push(ids.slice(i, i + pageSize)); + } + + const result = []; + + for (const page of idsPages) { + const basePath = dynamics.wqAPIBasePath; + const params = encodeURLQuery({ ids: page.toString() }); + const queryString = params ? `?${params}` : ''; + const url = `${basePath}/v2/request-time${queryString}`; + const requests = (await standardFetcher(url)) as any; + + for (const request of requests) { + if (!request || !request.requestInfo) continue; + const modifiedResult = { + id: request.requestInfo.requestId, + finalizationAt: request.requestInfo.finalizationAt, + }; + + result.push(modifiedResult); + + if (idsPages.length > 1) { + // avoid backend spam + await new Promise((resolve) => setTimeout(resolve, 1000)); + } + } + } + + return result; +}; + export const useWithdrawalRequests = () => { const { contractRpc, account, chainId } = useWithdrawalsContract(); // const { data: currentShareRate } = useLidoShareRate(); @@ -42,6 +81,17 @@ export const useWithdrawalRequests = () => { const claimableRequests: RequestStatus[] = []; const pendingRequests: RequestStatusPending[] = []; + const pendingRequestsIds: string[] = []; + + requestStatuses.forEach((request, index) => { + if (!request.isFinalized) { + pendingRequestsIds.push(requestIds[index].toString()); + } + }); + + const wqRequests = await getRequestTimeForWQRequestIds( + pendingRequestsIds, + ); let pendingAmountOfStETH = BigNumber.from(0); let claimableAmountOfStETH = BigNumber.from(0); @@ -52,6 +102,7 @@ export const useWithdrawalRequests = () => { ...request, id, stringId: id.toString(), + finalizationAt: null, }; if (request.isFinalized && !request.isClaimed) { @@ -60,8 +111,10 @@ export const useWithdrawalRequests = () => { request.amountOfStETH, ); } else if (!request.isFinalized) { + const r = wqRequests.find((r) => r.id === id.toString()); pendingRequests.push({ ...req, + finalizationAt: r?.finalizationAt, expectedEth: req.amountOfStETH, // TODO: replace with calcExpectedRequestEth(req, currentShareRate), }); pendingAmountOfStETH = pendingAmountOfStETH.add( diff --git a/features/withdrawals/types/request-status.ts b/features/withdrawals/types/request-status.ts index 4fb7acca0..1f920740f 100644 --- a/features/withdrawals/types/request-status.ts +++ b/features/withdrawals/types/request-status.ts @@ -9,6 +9,7 @@ export type RequestStatus = { isClaimed: boolean; id: BigNumber; stringId: string; + finalizationAt: string | null; }; export type RequestStatusClaimable = RequestStatus & { diff --git a/features/withdrawals/utils/format-timestamp.ts b/features/withdrawals/utils/format-timestamp.ts new file mode 100644 index 000000000..6fe181652 --- /dev/null +++ b/features/withdrawals/utils/format-timestamp.ts @@ -0,0 +1,15 @@ +export const formatTimestamp = (timestamp: string, short = false): string => { + const diff = new Date(timestamp).getTime() - Date.now(); + const hours = Math.ceil(diff / (1000 * 60 * 60)); + const h = short ? 'h' : 'hour'; + + if (hours < 24) { + const plural = hours === 1 || short ? '' : 's'; + return `~${hours} ${h}${plural}`; + } + + const days = Math.ceil(hours / 24); + const d = short ? 'd' : 'day'; + const plural = days === 1 || short ? '' : 's'; + return `~${days} ${d}${plural}`; +}; diff --git a/features/withdrawals/withdrawals-constants/index.ts b/features/withdrawals/withdrawals-constants/index.ts index b684e942a..1205307ca 100644 --- a/features/withdrawals/withdrawals-constants/index.ts +++ b/features/withdrawals/withdrawals-constants/index.ts @@ -6,6 +6,7 @@ export const DEFAULT_CLAIM_REQUEST_SELECTED = 80; export const MAX_SHOWN_REQUEST_PER_TYPE = 1024; export const WITHDRAWAL_REQUEST_PATH = '/withdrawals/request'; +export const WITHDRAWAL_PERIOD_PATH = '/withdrawals/request#withdrawalsPeriod'; export const WITHDRAWAL_CLAIM_PATH = '/withdrawals/claim'; // time that validation function waits for context data to resolve diff --git a/features/withdrawals/withdrawals-faq/list/how-long-to-withdraw.tsx b/features/withdrawals/withdrawals-faq/list/how-long-to-withdraw.tsx index fc02e8a19..fe7830758 100644 --- a/features/withdrawals/withdrawals-faq/list/how-long-to-withdraw.tsx +++ b/features/withdrawals/withdrawals-faq/list/how-long-to-withdraw.tsx @@ -1,7 +1,11 @@ import { NoBr } from '../styles'; import { Accordion } from '@lidofinance/lido-ui'; import { LocalLink } from 'shared/components/local-link'; -import { WITHDRAWAL_CLAIM_PATH } from 'features/withdrawals/withdrawals-constants'; +import { + WITHDRAWAL_CLAIM_PATH, + WITHDRAWAL_PERIOD_PATH, + WITHDRAWAL_REQUEST_PATH, +} from 'features/withdrawals/withdrawals-constants'; export const HowLongToWithdraw: React.FC = () => { return ( @@ -10,7 +14,14 @@ export const HowLongToWithdraw: React.FC = () => { Under normal circumstances, the stETH/wstETH withdrawal period can take anywhere between 1-5 days. After that, you can claim your ETH using the  - Claim tab. + Claim tab. On{' '} + + Request tabtab + {' '} + interface, you can see the current estimation of the withdrawal waiting + time for new requests. The withdrawal request time depends on the + requested amount, the overall amount of stETH in the queue, and{' '} + other factors.

); diff --git a/features/withdrawals/withdrawals-faq/list/why-waiting-time-changed.tsx b/features/withdrawals/withdrawals-faq/list/why-waiting-time-changed.tsx new file mode 100644 index 000000000..da15ec078 --- /dev/null +++ b/features/withdrawals/withdrawals-faq/list/why-waiting-time-changed.tsx @@ -0,0 +1,18 @@ +import { Accordion } from '@lidofinance/lido-ui'; +import { WITHDRAWAL_PERIOD_PATH } from '../../withdrawals-constants'; +import { LocalLink } from '../../../../shared/components/local-link'; + +export const WhyWaitingTimeChanged: React.FC = () => { + return ( + +

+ The waiting time could be changed due to{' '} + + several factors + + affecting waiting time. That's why it may either increase or + decrease. +

+ + ); +}; diff --git a/features/withdrawals/withdrawals-faq/list/withdrawal-period-circumstances.tsx b/features/withdrawals/withdrawals-faq/list/withdrawal-period-circumstances.tsx index da5813f00..3c889f696 100644 --- a/features/withdrawals/withdrawals-faq/list/withdrawal-period-circumstances.tsx +++ b/features/withdrawals/withdrawals-faq/list/withdrawal-period-circumstances.tsx @@ -7,10 +7,15 @@ export const WithdrawalPeriodCircumstances: React.FC = () => { id="withdrawalsPeriod" >
    +
  • Demand for staking and unstaking.
  • The amount of stETH in the queue.
    • -
  • Perfomance of the validator poolside.
    • +
  • Protocols rules of finalization of requests.
  • Exit queue on the Beacon chain.
    • -
  • Demand for staking and unstaking.
    • +
  • Performance of the validator poolside.
    • +
  • + The protocol mode (Turbo mode [link to "What is Turbo mode"] + or Bunker mode [link to "What is Bunker mode?") +
); diff --git a/features/withdrawals/withdrawals-faq/request-faq.tsx b/features/withdrawals/withdrawals-faq/request-faq.tsx index c82659bc1..e67be9930 100644 --- a/features/withdrawals/withdrawals-faq/request-faq.tsx +++ b/features/withdrawals/withdrawals-faq/request-faq.tsx @@ -24,6 +24,7 @@ import { UnstakeAmountBoundaries } from './list/unstake-amount-boundaries'; import { LidoNFT } from './list/lido-nft'; import { HowToAddNFT } from './list/add-nft'; import { NFTNotChange } from './list/nft-not-change'; +import { WhyWaitingTimeChanged } from './list/why-waiting-time-changed'; // TODO: Replace this link when it will be finalized // const LEARN_MORE_LINK = @@ -44,6 +45,7 @@ export const RequestFaq: React.FC = () => { + From 337fe52146d41b5d1377dd80c3f28376dd6882e4 Mon Sep 17 00:00:00 2001 From: Taras Alekhin Date: Fri, 17 Nov 2023 13:20:16 +0400 Subject: [PATCH 02/20] feat: updated request status text breakpoint --- .../requests-list/request-item-status.tsx | 18 ++++----------- .../claim/form/requests-list/styles.ts | 23 +------------------ 2 files changed, 6 insertions(+), 35 deletions(-) diff --git a/features/withdrawals/claim/form/requests-list/request-item-status.tsx b/features/withdrawals/claim/form/requests-list/request-item-status.tsx index a7398af65..d4144698a 100644 --- a/features/withdrawals/claim/form/requests-list/request-item-status.tsx +++ b/features/withdrawals/claim/form/requests-list/request-item-status.tsx @@ -1,11 +1,7 @@ -import { - RequestsStatusStyled, - DesktopStatus, - StatusIcon, - MobileStatus, -} from './styles'; +import { RequestsStatusStyled, StatusIcon, StatusText } from './styles'; import { forwardRef } from 'react'; import { formatTimestamp } from '../../../utils/format-timestamp'; +import { useBreakpoint } from '@lidofinance/lido-ui'; type RequestItemStatusProps = { status: 'ready' | 'pending'; @@ -21,24 +17,20 @@ const RequestStatusBody = forwardRef< RequestItemStatusProps & React.ComponentProps<'div'> >(({ status, finalizationAt, ...props }, ref) => { let statusText; - let statusTextMobile; + const isMobile = useBreakpoint('md'); if (status === 'ready') { statusText = 'Ready'; - statusTextMobile = 'Ready'; } else if (finalizationAt) { - statusText = formatTimestamp(finalizationAt); - statusTextMobile = formatTimestamp(finalizationAt, true); + statusText = formatTimestamp(finalizationAt, isMobile); } else { statusText = 'Pending'; - statusTextMobile = 'Pending'; } return ( - {statusText} - {statusTextMobile} + {statusText} ); }); diff --git a/features/withdrawals/claim/form/requests-list/styles.ts b/features/withdrawals/claim/form/requests-list/styles.ts index 12a56cb38..5c9b93aa3 100644 --- a/features/withdrawals/claim/form/requests-list/styles.ts +++ b/features/withdrawals/claim/form/requests-list/styles.ts @@ -3,7 +3,6 @@ import { InlineLoader, Link, ThemeName } from '@lidofinance/lido-ui'; import RequestReady from 'assets/icons/request-ready.svg'; import RequestPending from 'assets/icons/request-pending.svg'; -import RequestInfo from 'assets/icons/request-info.svg'; export const REQUESTS_LIST_ITEM_SIZE = 57; export const REQUESTS_LIST_LOADERS_COUNT = 3; @@ -85,21 +84,9 @@ export const RequestsStatusStyled = styled.div` text-overflow: ellipsis; `; -export const DesktopStatus = styled.span` +export const StatusText = styled.span` font-size: 12px; font-weight: 600; - ${({ theme }) => theme.mediaQueries.sm} { - display: none; - } -`; - -export const MobileStatus = styled.span` - font-size: 12px; - font-weight: 600; - display: none; - ${({ theme }) => theme.mediaQueries.sm} { - display: block; - } `; export const StatusIcon = styled.img.attrs(({ $variant }) => ({ @@ -111,14 +98,6 @@ export const StatusIcon = styled.img.attrs(({ $variant }) => ({ height: 16px; `; -export const RequestInfoIcon = styled.img.attrs({ - alt: 'info', - src: RequestInfo, -})` - width: 16px; - height: 16px; -`; - export const InlineLoaderStyled = styled(InlineLoader)` margin-left: ${({ theme }) => theme.spaceMap.lg}px; `; From 5d7592fade621f705a16d3f790665da732a0b002 Mon Sep 17 00:00:00 2001 From: Taras Alekhin Date: Mon, 20 Nov 2023 15:41:21 +0400 Subject: [PATCH 03/20] feat: added default opened accordion by anchor --- .../withdrawals/withdrawals-constants/index.ts | 2 +- .../withdrawals-faq/list/how-long-to-withdraw.tsx | 7 +++---- .../list/why-waiting-time-changed.tsx | 6 ++---- .../list/withdrawal-period-circumstances.tsx | 14 +++++++++++++- 4 files changed, 19 insertions(+), 10 deletions(-) diff --git a/features/withdrawals/withdrawals-constants/index.ts b/features/withdrawals/withdrawals-constants/index.ts index 1205307ca..09f5f5adb 100644 --- a/features/withdrawals/withdrawals-constants/index.ts +++ b/features/withdrawals/withdrawals-constants/index.ts @@ -6,7 +6,7 @@ export const DEFAULT_CLAIM_REQUEST_SELECTED = 80; export const MAX_SHOWN_REQUEST_PER_TYPE = 1024; export const WITHDRAWAL_REQUEST_PATH = '/withdrawals/request'; -export const WITHDRAWAL_PERIOD_PATH = '/withdrawals/request#withdrawalsPeriod'; +export const WITHDRAWAL_PERIOD_PATH = '#withdrawalsPeriod'; export const WITHDRAWAL_CLAIM_PATH = '/withdrawals/claim'; // time that validation function waits for context data to resolve diff --git a/features/withdrawals/withdrawals-faq/list/how-long-to-withdraw.tsx b/features/withdrawals/withdrawals-faq/list/how-long-to-withdraw.tsx index fe7830758..d091594de 100644 --- a/features/withdrawals/withdrawals-faq/list/how-long-to-withdraw.tsx +++ b/features/withdrawals/withdrawals-faq/list/how-long-to-withdraw.tsx @@ -1,5 +1,6 @@ import { NoBr } from '../styles'; import { Accordion } from '@lidofinance/lido-ui'; +import Link from 'next/link'; import { LocalLink } from 'shared/components/local-link'; import { WITHDRAWAL_CLAIM_PATH, @@ -15,13 +16,11 @@ export const HowLongToWithdraw: React.FC = () => { anywhere between 1-5 days. After that, you can claim your ETH using the  Claim tab. On{' '} - - Request tabtab - {' '} + Request tab{' '} interface, you can see the current estimation of the withdrawal waiting time for new requests. The withdrawal request time depends on the requested amount, the overall amount of stETH in the queue, and{' '} - other factors. + other factors.

); diff --git a/features/withdrawals/withdrawals-faq/list/why-waiting-time-changed.tsx b/features/withdrawals/withdrawals-faq/list/why-waiting-time-changed.tsx index da15ec078..66d121fdf 100644 --- a/features/withdrawals/withdrawals-faq/list/why-waiting-time-changed.tsx +++ b/features/withdrawals/withdrawals-faq/list/why-waiting-time-changed.tsx @@ -1,15 +1,13 @@ import { Accordion } from '@lidofinance/lido-ui'; import { WITHDRAWAL_PERIOD_PATH } from '../../withdrawals-constants'; -import { LocalLink } from '../../../../shared/components/local-link'; +import Link from 'next/link'; export const WhyWaitingTimeChanged: React.FC = () => { return (

The waiting time could be changed due to{' '} - - several factors - + several factors{' '} affecting waiting time. That's why it may either increase or decrease.

diff --git a/features/withdrawals/withdrawals-faq/list/withdrawal-period-circumstances.tsx b/features/withdrawals/withdrawals-faq/list/withdrawal-period-circumstances.tsx index 3c889f696..cd9dd8ffa 100644 --- a/features/withdrawals/withdrawals-faq/list/withdrawal-period-circumstances.tsx +++ b/features/withdrawals/withdrawals-faq/list/withdrawal-period-circumstances.tsx @@ -1,10 +1,22 @@ import { Accordion } from '@lidofinance/lido-ui'; +import { useEffect, useState } from 'react'; +import { useRouter } from 'next/router'; export const WithdrawalPeriodCircumstances: React.FC = () => { + const [opened, setOpened] = useState(false); + const router = useRouter(); + const id = 'withdrawalsPeriod'; + useEffect(() => { + if (window.location.hash === '#' + id) { + setOpened(true); + } + }, [router.asPath]); + return (
  • Demand for staking and unstaking.
    • From 24ea2e2f2fd6375825cd0479474b141d438b2a48 Mon Sep 17 00:00:00 2001 From: Taras Alekhin Date: Tue, 21 Nov 2023 12:10:15 +0400 Subject: [PATCH 04/20] feat: fix window deps --- .../withdrawals-faq/list/withdrawal-period-circumstances.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/features/withdrawals/withdrawals-faq/list/withdrawal-period-circumstances.tsx b/features/withdrawals/withdrawals-faq/list/withdrawal-period-circumstances.tsx index cd9dd8ffa..75e1adf93 100644 --- a/features/withdrawals/withdrawals-faq/list/withdrawal-period-circumstances.tsx +++ b/features/withdrawals/withdrawals-faq/list/withdrawal-period-circumstances.tsx @@ -7,7 +7,8 @@ export const WithdrawalPeriodCircumstances: React.FC = () => { const router = useRouter(); const id = 'withdrawalsPeriod'; useEffect(() => { - if (window.location.hash === '#' + id) { + const pathParts = router.asPath.split('#'); + if (pathParts[pathParts.length - 1] === id) { setOpened(true); } }, [router.asPath]); From c15eecee31e42dd45dde16e450a1ad514d1f2c51 Mon Sep 17 00:00:00 2001 From: Taras Alekhin Date: Tue, 21 Nov 2023 12:41:18 +0400 Subject: [PATCH 05/20] feat: moved faq out of nossr --- features/withdrawals/claim/claim.tsx | 2 -- features/withdrawals/request/request.tsx | 2 -- features/withdrawals/withdrawals-faq/faq.tsx | 9 +++++++++ pages/withdrawals/[mode].tsx | 2 ++ 4 files changed, 11 insertions(+), 4 deletions(-) create mode 100644 features/withdrawals/withdrawals-faq/faq.tsx diff --git a/features/withdrawals/claim/claim.tsx b/features/withdrawals/claim/claim.tsx index 4590c584c..db1a2ec4f 100644 --- a/features/withdrawals/claim/claim.tsx +++ b/features/withdrawals/claim/claim.tsx @@ -1,5 +1,4 @@ import { TransactionModalProvider } from 'shared/transaction-modal/transaction-modal-context'; -import { ClaimFaq } from 'features/withdrawals/withdrawals-faq/claim-faq'; import { ClaimForm } from './form'; import { TxClaimModal } from './tx-modal'; @@ -12,7 +11,6 @@ export const Claim = () => { - diff --git a/features/withdrawals/request/request.tsx b/features/withdrawals/request/request.tsx index c6458178b..d0c8e27b0 100644 --- a/features/withdrawals/request/request.tsx +++ b/features/withdrawals/request/request.tsx @@ -1,5 +1,4 @@ import { RequestFormProvider } from './request-form-context'; -import { RequestFaq } from '../withdrawals-faq/request-faq'; import { RequestForm } from './form'; import { TxRequestModal } from './tx-modal'; import { RequestWallet } from './wallet'; @@ -11,7 +10,6 @@ export const Request = () => { - diff --git a/features/withdrawals/withdrawals-faq/faq.tsx b/features/withdrawals/withdrawals-faq/faq.tsx new file mode 100644 index 000000000..6816dc57a --- /dev/null +++ b/features/withdrawals/withdrawals-faq/faq.tsx @@ -0,0 +1,9 @@ +import { useWithdrawals } from '../contexts/withdrawals-context'; +import { ClaimFaq } from './claim-faq'; +import { RequestFaq } from './request-faq'; + +export const Faq = () => { + const { isClaimTab } = useWithdrawals(); + + return isClaimTab ? : ; +}; diff --git a/pages/withdrawals/[mode].tsx b/pages/withdrawals/[mode].tsx index 7aada07a3..c5f3d8c89 100644 --- a/pages/withdrawals/[mode].tsx +++ b/pages/withdrawals/[mode].tsx @@ -8,6 +8,7 @@ import NoSSRWrapper from 'shared/components/no-ssr-wrapper'; import { WithdrawalsTabs } from 'features/withdrawals'; import { WithdrawalsProvider } from 'features/withdrawals/contexts/withdrawals-context'; import { useWeb3Key } from 'shared/hooks/useWeb3Key'; +import { Faq } from 'features/withdrawals/withdrawals-faq/faq'; const Withdrawals: FC = ({ mode }) => { const key = useWeb3Key(); @@ -24,6 +25,7 @@ const Withdrawals: FC = ({ mode }) => { + ); From a836d1358e430f965ce86aa43a3bb6c65cca5371 Mon Sep 17 00:00:00 2001 From: Taras Alekhin Date: Thu, 23 Nov 2023 14:58:22 +0400 Subject: [PATCH 06/20] feat: fix links --- .../withdrawals-constants/index.ts | 2 ++ .../withdrawals-faq/list/bunker-mode.tsx | 4 +++- .../withdrawals-faq/list/turbo-mode.tsx | 4 +++- .../list/withdrawal-period-circumstances.tsx | 19 ++++++------------- .../withdrawals-faq/utils/useScrollToId.ts | 15 +++++++++++++++ 5 files changed, 29 insertions(+), 15 deletions(-) create mode 100644 features/withdrawals/withdrawals-faq/utils/useScrollToId.ts diff --git a/features/withdrawals/withdrawals-constants/index.ts b/features/withdrawals/withdrawals-constants/index.ts index 09f5f5adb..f4ccd4832 100644 --- a/features/withdrawals/withdrawals-constants/index.ts +++ b/features/withdrawals/withdrawals-constants/index.ts @@ -7,6 +7,8 @@ export const MAX_SHOWN_REQUEST_PER_TYPE = 1024; export const WITHDRAWAL_REQUEST_PATH = '/withdrawals/request'; export const WITHDRAWAL_PERIOD_PATH = '#withdrawalsPeriod'; +export const WHAT_IS_BUNKER = '#whatIsBunkerMode'; +export const WHAT_IS_TURBO = '#whatIsTurboMode'; export const WITHDRAWAL_CLAIM_PATH = '/withdrawals/claim'; // time that validation function waits for context data to resolve diff --git a/features/withdrawals/withdrawals-faq/list/bunker-mode.tsx b/features/withdrawals/withdrawals-faq/list/bunker-mode.tsx index 265035f66..972508d29 100644 --- a/features/withdrawals/withdrawals-faq/list/bunker-mode.tsx +++ b/features/withdrawals/withdrawals-faq/list/bunker-mode.tsx @@ -1,8 +1,10 @@ import { Accordion } from '@lidofinance/lido-ui'; +import { useScrollToId } from '../utils/useScrollToId'; export const BunkerMode: React.FC = () => { + const { id, opened } = useScrollToId('whatIsBunkerMode'); return ( - +

    Bunker mode is an emergency mode that activates under three worst-case conditions (when penalties are large enough to significantly impact the diff --git a/features/withdrawals/withdrawals-faq/list/turbo-mode.tsx b/features/withdrawals/withdrawals-faq/list/turbo-mode.tsx index 8f249f290..36be29cd5 100644 --- a/features/withdrawals/withdrawals-faq/list/turbo-mode.tsx +++ b/features/withdrawals/withdrawals-faq/list/turbo-mode.tsx @@ -1,8 +1,10 @@ import { Accordion } from '@lidofinance/lido-ui'; +import { useScrollToId } from '../utils/useScrollToId'; export const TurboMode: React.FC = () => { + const { id, opened } = useScrollToId('whatIsTurboMode'); return ( - +

    Turbo mode is a default mode used unless an emergency event affects the Ethereum network. In Turbo Mode, withdrawal requests are fulfilled diff --git a/features/withdrawals/withdrawals-faq/list/withdrawal-period-circumstances.tsx b/features/withdrawals/withdrawals-faq/list/withdrawal-period-circumstances.tsx index 75e1adf93..a063a5d0e 100644 --- a/features/withdrawals/withdrawals-faq/list/withdrawal-period-circumstances.tsx +++ b/features/withdrawals/withdrawals-faq/list/withdrawal-period-circumstances.tsx @@ -1,17 +1,10 @@ import { Accordion } from '@lidofinance/lido-ui'; -import { useEffect, useState } from 'react'; -import { useRouter } from 'next/router'; +import { useScrollToId } from '../utils/useScrollToId'; +import { WHAT_IS_BUNKER, WHAT_IS_TURBO } from '../../withdrawals-constants'; +import Link from 'next/link'; export const WithdrawalPeriodCircumstances: React.FC = () => { - const [opened, setOpened] = useState(false); - const router = useRouter(); - const id = 'withdrawalsPeriod'; - useEffect(() => { - const pathParts = router.asPath.split('#'); - if (pathParts[pathParts.length - 1] === id) { - setOpened(true); - } - }, [router.asPath]); + const { id, opened } = useScrollToId('withdrawalsPeriod'); return ( {

  • Exit queue on the Beacon chain.
  • Performance of the validator poolside.
  • - The protocol mode (Turbo mode [link to "What is Turbo mode"] - or Bunker mode [link to "What is Bunker mode?") + The protocol mode (Turbo mode{' '} + or Bunker mode)
diff --git a/features/withdrawals/withdrawals-faq/utils/useScrollToId.ts b/features/withdrawals/withdrawals-faq/utils/useScrollToId.ts new file mode 100644 index 000000000..2e0771bf0 --- /dev/null +++ b/features/withdrawals/withdrawals-faq/utils/useScrollToId.ts @@ -0,0 +1,15 @@ +import { useEffect, useState } from 'react'; +import { useRouter } from 'next/router'; + +export const useScrollToId = (id: string) => { + const [opened, setOpened] = useState(false); + const router = useRouter(); + useEffect(() => { + const pathParts = router.asPath.split('#'); + if (pathParts[pathParts.length - 1] === id) { + setOpened(true); + } + }, [router.asPath, id]); + + return { id, opened }; +}; From 30389413ca53f6a5e1e54850a449d31aa42a8022 Mon Sep 17 00:00:00 2001 From: Taras Alekhin Date: Thu, 23 Nov 2023 16:28:04 +0400 Subject: [PATCH 07/20] fix: after merge updates --- features/withdrawals/withdrawals-constants/index.ts | 2 -- .../withdrawals-faq/list/how-long-to-withdraw.tsx | 12 ++++-------- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/features/withdrawals/withdrawals-constants/index.ts b/features/withdrawals/withdrawals-constants/index.ts index 5b4d53129..72fd896a5 100644 --- a/features/withdrawals/withdrawals-constants/index.ts +++ b/features/withdrawals/withdrawals-constants/index.ts @@ -5,8 +5,6 @@ export const MAX_REQUESTS_COUNT_LEDGER_LIMIT = 2; export const DEFAULT_CLAIM_REQUEST_SELECTED = 80; export const MAX_SHOWN_REQUEST_PER_TYPE = 1024; -export const WITHDRAWAL_REQUEST_PATH = '/withdrawals/request'; -export const WITHDRAWAL_CLAIM_PATH = '/withdrawals/claim'; export const WITHDRAWAL_PERIOD_PATH = '#withdrawalsPeriod'; export const WHAT_IS_BUNKER = '#whatIsBunkerMode'; export const WHAT_IS_TURBO = '#whatIsTurboMode'; diff --git a/features/withdrawals/withdrawals-faq/list/how-long-to-withdraw.tsx b/features/withdrawals/withdrawals-faq/list/how-long-to-withdraw.tsx index 53409d499..0f631a461 100644 --- a/features/withdrawals/withdrawals-faq/list/how-long-to-withdraw.tsx +++ b/features/withdrawals/withdrawals-faq/list/how-long-to-withdraw.tsx @@ -2,12 +2,8 @@ import { FC } from 'react'; import { Accordion } from '@lidofinance/lido-ui'; import Link from 'next/link'; import { LocalLink } from 'shared/components/local-link'; -import { - WITHDRAWAL_CLAIM_PATH, - WITHDRAWAL_PERIOD_PATH, - WITHDRAWAL_REQUEST_PATH, -} from 'features/withdrawals/withdrawals-constants'; - +import { WITHDRAWAL_PERIOD_PATH } from 'features/withdrawals/withdrawals-constants'; +import { WITHDRAWALS_CLAIM_PATH, WITHDRAWALS_REQUEST_PATH } from 'config/urls'; import { NoBr } from '../styles'; export const HowLongToWithdraw: FC = () => { @@ -17,8 +13,8 @@ export const HowLongToWithdraw: FC = () => { Under normal circumstances, the stETH/wstETH withdrawal period can take anywhere between 1-5 days. After that, you can claim your ETH using the  - Claim tab. On{' '} - Request tab{' '} + Claim tab. On{' '} + Request tab{' '} interface, you can see the current estimation of the withdrawal waiting time for new requests. The withdrawal request time depends on the requested amount, the overall amount of stETH in the queue, and{' '} From 2789a41b2dee8c000430090cb958c58e62f865d9 Mon Sep 17 00:00:00 2001 From: Taras Alekhin Date: Fri, 24 Nov 2023 16:02:45 +0400 Subject: [PATCH 08/20] fix: fix request info --- features/withdrawals/hooks/useWaitingTime.ts | 26 +++++++++----------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/features/withdrawals/hooks/useWaitingTime.ts b/features/withdrawals/hooks/useWaitingTime.ts index 5142ed658..01465c60a 100644 --- a/features/withdrawals/hooks/useWaitingTime.ts +++ b/features/withdrawals/hooks/useWaitingTime.ts @@ -12,18 +12,18 @@ import { useWithdrawals } from 'features/withdrawals/contexts/withdrawals-contex const DEFAULT_DAYS_VALUE = 5; -type RequestTimeResponse = { - days: number; - stethLastUpdate: number; - validatorsLastUpdate: number; - steth: string; - requests: number; -}; - type useWaitingTimeOptions = { isApproximate?: boolean; }; +type RequestTimeV2Dto = { + requestInfo: { + finalizationIn: number; + finalizationAt: string; + }; + nextCalculationAt: string; +}; + // TODO: accept big Number export const useWaitingTime = ( amount: string, @@ -35,7 +35,7 @@ export const useWaitingTime = ( const basePath = dynamics.wqAPIBasePath; const params = encodeURLQuery({ amount: debouncedAmount }); const queryString = params ? `?${params}` : ''; - return `${basePath}/v1/request-time${queryString}`; + return `${basePath}/v2/request-time/calculate${queryString}`; }, [debouncedAmount]); const { data, initialLoading, error } = useLidoSWR(url, standardFetcher, { @@ -44,13 +44,12 @@ export const useWaitingTime = ( // if api is not happy about our request - no retry return !(e && typeof e == 'object' && 'status' in e && e.status == 400); }, - }) as SWRResponse; + }) as SWRResponse; const { isBunker, isPaused } = useWithdrawals(); const isRequestError = error instanceof FetcherError && error.status < 500; - const stethLastUpdate = - data?.stethLastUpdate && new Date(data?.stethLastUpdate * 1000); - const days = data?.days ?? DEFAULT_DAYS_VALUE; + const ms = data?.requestInfo.finalizationIn; + const days = ms ? Math.ceil(ms / (24 * 60 * 60 * 1000)) : DEFAULT_DAYS_VALUE; const waitingTime = days && days > 1 @@ -63,7 +62,6 @@ export const useWaitingTime = ( ...data, initialLoading, error, - stethLastUpdate, days, value, }; From 437554ef9d19728c612b86c7f6c5941d211dfdb2 Mon Sep 17 00:00:00 2001 From: Taras Alekhin Date: Fri, 24 Nov 2023 16:28:10 +0400 Subject: [PATCH 09/20] fix: fix request info --- features/withdrawals/hooks/useWaitingTime.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/features/withdrawals/hooks/useWaitingTime.ts b/features/withdrawals/hooks/useWaitingTime.ts index 01465c60a..84589e5b1 100644 --- a/features/withdrawals/hooks/useWaitingTime.ts +++ b/features/withdrawals/hooks/useWaitingTime.ts @@ -48,7 +48,7 @@ export const useWaitingTime = ( const { isBunker, isPaused } = useWithdrawals(); const isRequestError = error instanceof FetcherError && error.status < 500; - const ms = data?.requestInfo.finalizationIn; + const ms = data?.requestInfo?.finalizationIn; const days = ms ? Math.ceil(ms / (24 * 60 * 60 * 1000)) : DEFAULT_DAYS_VALUE; const waitingTime = From 30647ce554f5122182a0a92cec39715230cbea3f Mon Sep 17 00:00:00 2001 From: Taras Alekhin Date: Mon, 27 Nov 2023 15:17:04 +0400 Subject: [PATCH 10/20] fix: unblock claim requests list --- .../hooks/contract/useWithdrawalsData.ts | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/features/withdrawals/hooks/contract/useWithdrawalsData.ts b/features/withdrawals/hooks/contract/useWithdrawalsData.ts index 7fe8180be..360d32535 100644 --- a/features/withdrawals/hooks/contract/useWithdrawalsData.ts +++ b/features/withdrawals/hooks/contract/useWithdrawalsData.ts @@ -23,7 +23,14 @@ export type WithdrawalRequests = NonNullable< ReturnType['data'] >; -const getRequestTimeForWQRequestIds = async (ids: string[]) => { +const getRequestTimeForWQRequestIds = async ( + ids: string[], +): Promise< + { + id: string; + finalizationAt: string; + }[] +> => { const idsPages = []; const pageSize = 20; @@ -89,9 +96,13 @@ export const useWithdrawalRequests = () => { } }); - const wqRequests = await getRequestTimeForWQRequestIds( - pendingRequestsIds, - ); + let wqRequests: { finalizationAt: string; id: string }[] = []; + + try { + wqRequests = await getRequestTimeForWQRequestIds(pendingRequestsIds); + } catch (e) { + console.warn(e); + } let pendingAmountOfStETH = BigNumber.from(0); let claimableAmountOfStETH = BigNumber.from(0); @@ -114,7 +125,7 @@ export const useWithdrawalRequests = () => { const r = wqRequests.find((r) => r.id === id.toString()); pendingRequests.push({ ...req, - finalizationAt: r?.finalizationAt, + finalizationAt: r?.finalizationAt ?? null, expectedEth: req.amountOfStETH, // TODO: replace with calcExpectedRequestEth(req, currentShareRate), }); pendingAmountOfStETH = pendingAmountOfStETH.add( From f7d1da97a3f7822cdab65c544dcbb153a37173fb Mon Sep 17 00:00:00 2001 From: Taras Alekhin Date: Mon, 27 Nov 2023 15:19:00 +0400 Subject: [PATCH 11/20] fix: fix warning --- features/withdrawals/hooks/contract/useWithdrawalsData.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/features/withdrawals/hooks/contract/useWithdrawalsData.ts b/features/withdrawals/hooks/contract/useWithdrawalsData.ts index 360d32535..625637f91 100644 --- a/features/withdrawals/hooks/contract/useWithdrawalsData.ts +++ b/features/withdrawals/hooks/contract/useWithdrawalsData.ts @@ -101,7 +101,7 @@ export const useWithdrawalRequests = () => { try { wqRequests = await getRequestTimeForWQRequestIds(pendingRequestsIds); } catch (e) { - console.warn(e); + console.warn('Failed to fetch request time for requests ids', e); } let pendingAmountOfStETH = BigNumber.from(0); From 3c63baf0709a61ed8cef3c37cbff7a8c34134e44 Mon Sep 17 00:00:00 2001 From: Taras Alekhin Date: Tue, 28 Nov 2023 14:08:24 +0400 Subject: [PATCH 12/20] fix: code style fix --- .../claim/form/requests-list/request-item-status.tsx | 2 +- features/withdrawals/utils/format-timestamp.ts | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/features/withdrawals/claim/form/requests-list/request-item-status.tsx b/features/withdrawals/claim/form/requests-list/request-item-status.tsx index d4144698a..33be15ca7 100644 --- a/features/withdrawals/claim/form/requests-list/request-item-status.tsx +++ b/features/withdrawals/claim/form/requests-list/request-item-status.tsx @@ -19,7 +19,7 @@ const RequestStatusBody = forwardRef< let statusText; const isMobile = useBreakpoint('md'); - if (status === 'ready') { + if (status.toLocaleLowerCase() === 'ready') { statusText = 'Ready'; } else if (finalizationAt) { statusText = formatTimestamp(finalizationAt, isMobile); diff --git a/features/withdrawals/utils/format-timestamp.ts b/features/withdrawals/utils/format-timestamp.ts index 6fe181652..e241cf439 100644 --- a/features/withdrawals/utils/format-timestamp.ts +++ b/features/withdrawals/utils/format-timestamp.ts @@ -1,15 +1,15 @@ export const formatTimestamp = (timestamp: string, short = false): string => { const diff = new Date(timestamp).getTime() - Date.now(); const hours = Math.ceil(diff / (1000 * 60 * 60)); - const h = short ? 'h' : 'hour'; + const hour = short ? 'h' : 'hour'; if (hours < 24) { const plural = hours === 1 || short ? '' : 's'; - return `~${hours} ${h}${plural}`; + return `~${hours} ${hour}${plural}`; } const days = Math.ceil(hours / 24); - const d = short ? 'd' : 'day'; + const day = short ? 'd' : 'day'; const plural = days === 1 || short ? '' : 's'; - return `~${days} ${d}${plural}`; + return `~${days} ${day}${plural}`; }; From 4640858040f8a68d6a8c19e1a720337ee08b4dd9 Mon Sep 17 00:00:00 2001 From: Taras Alekhin Date: Wed, 29 Nov 2023 14:15:08 +0400 Subject: [PATCH 13/20] fix: fix anchor --- pages/withdrawals/[mode].tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/withdrawals/[mode].tsx b/pages/withdrawals/[mode].tsx index c5f3d8c89..0a8fb9072 100644 --- a/pages/withdrawals/[mode].tsx +++ b/pages/withdrawals/[mode].tsx @@ -24,8 +24,8 @@ const Withdrawals: FC = ({ mode }) => { + - ); From c81ffd60948d7c1f9e20b9575b82e2bada13d0b8 Mon Sep 17 00:00:00 2001 From: Taras Alekhin Date: Wed, 29 Nov 2023 15:14:49 +0400 Subject: [PATCH 14/20] fix: revert faq ssr --- features/withdrawals/claim/claim.tsx | 3 ++- features/withdrawals/request/request.tsx | 2 ++ features/withdrawals/withdrawals-faq/faq.tsx | 9 --------- pages/withdrawals/[mode].tsx | 2 -- 4 files changed, 4 insertions(+), 12 deletions(-) delete mode 100644 features/withdrawals/withdrawals-faq/faq.tsx diff --git a/features/withdrawals/claim/claim.tsx b/features/withdrawals/claim/claim.tsx index db1a2ec4f..a9172e793 100644 --- a/features/withdrawals/claim/claim.tsx +++ b/features/withdrawals/claim/claim.tsx @@ -1,5 +1,5 @@ import { TransactionModalProvider } from 'shared/transaction-modal/transaction-modal-context'; - +import { ClaimFaq } from 'features/withdrawals/withdrawals-faq/claim-faq'; import { ClaimForm } from './form'; import { TxClaimModal } from './tx-modal'; import { ClaimWallet } from './wallet'; @@ -11,6 +11,7 @@ export const Claim = () => { + diff --git a/features/withdrawals/request/request.tsx b/features/withdrawals/request/request.tsx index d0c8e27b0..c6458178b 100644 --- a/features/withdrawals/request/request.tsx +++ b/features/withdrawals/request/request.tsx @@ -1,4 +1,5 @@ import { RequestFormProvider } from './request-form-context'; +import { RequestFaq } from '../withdrawals-faq/request-faq'; import { RequestForm } from './form'; import { TxRequestModal } from './tx-modal'; import { RequestWallet } from './wallet'; @@ -10,6 +11,7 @@ export const Request = () => { + diff --git a/features/withdrawals/withdrawals-faq/faq.tsx b/features/withdrawals/withdrawals-faq/faq.tsx deleted file mode 100644 index 6816dc57a..000000000 --- a/features/withdrawals/withdrawals-faq/faq.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { useWithdrawals } from '../contexts/withdrawals-context'; -import { ClaimFaq } from './claim-faq'; -import { RequestFaq } from './request-faq'; - -export const Faq = () => { - const { isClaimTab } = useWithdrawals(); - - return isClaimTab ? : ; -}; diff --git a/pages/withdrawals/[mode].tsx b/pages/withdrawals/[mode].tsx index 0a8fb9072..7aada07a3 100644 --- a/pages/withdrawals/[mode].tsx +++ b/pages/withdrawals/[mode].tsx @@ -8,7 +8,6 @@ import NoSSRWrapper from 'shared/components/no-ssr-wrapper'; import { WithdrawalsTabs } from 'features/withdrawals'; import { WithdrawalsProvider } from 'features/withdrawals/contexts/withdrawals-context'; import { useWeb3Key } from 'shared/hooks/useWeb3Key'; -import { Faq } from 'features/withdrawals/withdrawals-faq/faq'; const Withdrawals: FC = ({ mode }) => { const key = useWeb3Key(); @@ -24,7 +23,6 @@ const Withdrawals: FC = ({ mode }) => { - From ed3c43c20c83acae874c9561bc132c82962ec7a2 Mon Sep 17 00:00:00 2001 From: Taras Alekhin Date: Thu, 21 Mar 2024 10:32:10 +0100 Subject: [PATCH 15/20] fix: fetch function --- features/withdrawals/hooks/contract/useWithdrawalsData.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/features/withdrawals/hooks/contract/useWithdrawalsData.ts b/features/withdrawals/hooks/contract/useWithdrawalsData.ts index 625637f91..b73ce2115 100644 --- a/features/withdrawals/hooks/contract/useWithdrawalsData.ts +++ b/features/withdrawals/hooks/contract/useWithdrawalsData.ts @@ -55,11 +55,11 @@ const getRequestTimeForWQRequestIds = async ( }; result.push(modifiedResult); + } - if (idsPages.length > 1) { - // avoid backend spam - await new Promise((resolve) => setTimeout(resolve, 1000)); - } + if (idsPages.length > 1) { + // avoid backend spam + await new Promise((resolve) => setTimeout(resolve, 1000)); } } From d0aac084944caa1d8a5783f9ff84dedd0697e042 Mon Sep 17 00:00:00 2001 From: Taras Alekhin Date: Thu, 21 Mar 2024 16:17:09 +0100 Subject: [PATCH 16/20] fix: handle wrong timing --- features/withdrawals/utils/format-timestamp.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/features/withdrawals/utils/format-timestamp.ts b/features/withdrawals/utils/format-timestamp.ts index e241cf439..7d19a3884 100644 --- a/features/withdrawals/utils/format-timestamp.ts +++ b/features/withdrawals/utils/format-timestamp.ts @@ -1,5 +1,10 @@ export const formatTimestamp = (timestamp: string, short = false): string => { const diff = new Date(timestamp).getTime() - Date.now(); + + if (diff < 0) { + return 'Pending'; + } + const hours = Math.ceil(diff / (1000 * 60 * 60)); const hour = short ? 'h' : 'hour'; From fa43f07d62e7f886bdb6121781a023fa5e98cfa6 Mon Sep 17 00:00:00 2001 From: Taras Alekhin Date: Mon, 25 Mar 2024 11:51:05 +0100 Subject: [PATCH 17/20] fix: change text, fix hover styles --- features/withdrawals/claim/form/requests-list/styles.ts | 6 ------ .../withdrawals-faq/list/how-long-to-withdraw.tsx | 8 ++------ 2 files changed, 2 insertions(+), 12 deletions(-) diff --git a/features/withdrawals/claim/form/requests-list/styles.ts b/features/withdrawals/claim/form/requests-list/styles.ts index 5c9b93aa3..558366683 100644 --- a/features/withdrawals/claim/form/requests-list/styles.ts +++ b/features/withdrawals/claim/form/requests-list/styles.ts @@ -72,12 +72,6 @@ export const RequestsStatusStyled = styled.div` ? 'rgba(83, 186, 149, 0.16)' : 'rgba(236, 134, 0, 0.16)'}; - ${({ $variant }) => - $variant === 'pending' && - `&:hover { - background-color: rgba(236, 134, 0, 0.26); - }`} - color: ${({ $variant }) => ($variant === 'ready' ? '#53BA95' : '#EC8600')}; white-space: nowrap; overflow: hidden; diff --git a/features/withdrawals/withdrawals-faq/list/how-long-to-withdraw.tsx b/features/withdrawals/withdrawals-faq/list/how-long-to-withdraw.tsx index 0f631a461..1d53b611e 100644 --- a/features/withdrawals/withdrawals-faq/list/how-long-to-withdraw.tsx +++ b/features/withdrawals/withdrawals-faq/list/how-long-to-withdraw.tsx @@ -3,17 +3,13 @@ import { Accordion } from '@lidofinance/lido-ui'; import Link from 'next/link'; import { LocalLink } from 'shared/components/local-link'; import { WITHDRAWAL_PERIOD_PATH } from 'features/withdrawals/withdrawals-constants'; -import { WITHDRAWALS_CLAIM_PATH, WITHDRAWALS_REQUEST_PATH } from 'config/urls'; -import { NoBr } from '../styles'; +import { WITHDRAWALS_REQUEST_PATH } from 'config/urls'; export const HowLongToWithdraw: FC = () => { return (

- Under normal circumstances, the stETH/wstETH withdrawal period can take - anywhere between 1-5 days. After that, you can claim your - ETH using the  - Claim tab. On{' '} + On{' '} Request tab{' '} interface, you can see the current estimation of the withdrawal waiting time for new requests. The withdrawal request time depends on the From cd2110febec135dcf5d6065fbb22593dd1bafb86 Mon Sep 17 00:00:00 2001 From: Taras Alekhin Date: Tue, 2 Apr 2024 15:33:38 +0200 Subject: [PATCH 18/20] feat: added source metric headers to wq-api requests --- .../hooks/contract/useWithdrawalsData.ts | 24 ++++++++++++++----- features/withdrawals/hooks/useWaitingTime.ts | 22 ++++++++++++----- 2 files changed, 34 insertions(+), 12 deletions(-) diff --git a/features/withdrawals/hooks/contract/useWithdrawalsData.ts b/features/withdrawals/hooks/contract/useWithdrawalsData.ts index b73ce2115..1c41c711a 100644 --- a/features/withdrawals/hooks/contract/useWithdrawalsData.ts +++ b/features/withdrawals/hooks/contract/useWithdrawalsData.ts @@ -2,10 +2,7 @@ import { useCallback } from 'react'; import { Zero } from '@ethersproject/constants'; import { BigNumber } from 'ethers'; import { useLidoSWR } from '@lido-sdk/react'; -// import { useLidoShareRate } from 'features/withdrawals/hooks/contract/useLidoShareRate'; - import { useWithdrawalsContract } from './useWithdrawalsContract'; - import { RequestStatus, RequestStatusClaimable, @@ -17,12 +14,22 @@ import { standardFetcher } from 'utils/standardFetcher'; import { dynamics } from 'config'; import { encodeURLQuery } from 'utils/encodeURLQuery'; -// import { calcExpectedRequestEth } from 'features/withdrawals/utils/calc-expected-request-eth'; - export type WithdrawalRequests = NonNullable< ReturnType['data'] >; +export type RequestInfoDto = { + finalizationIn: number; + finalizationAt: string; + requestId: string; + requestedAt: string; +}; + +export type RequestTimeByRequestIds = { + requestInfo: RequestInfoDto; + nextCalculationAt: string; +}; + const getRequestTimeForWQRequestIds = async ( ids: string[], ): Promise< @@ -45,7 +52,12 @@ const getRequestTimeForWQRequestIds = async ( const params = encodeURLQuery({ ids: page.toString() }); const queryString = params ? `?${params}` : ''; const url = `${basePath}/v2/request-time${queryString}`; - const requests = (await standardFetcher(url)) as any; + const requests = await standardFetcher(url, { + headers: { + 'Content-Type': 'application/json', + 'WQ-Request-Source': 'widget', + }, + }); for (const request of requests) { if (!request || !request.requestInfo) continue; diff --git a/features/withdrawals/hooks/useWaitingTime.ts b/features/withdrawals/hooks/useWaitingTime.ts index 84589e5b1..6d3233c5e 100644 --- a/features/withdrawals/hooks/useWaitingTime.ts +++ b/features/withdrawals/hooks/useWaitingTime.ts @@ -38,13 +38,23 @@ export const useWaitingTime = ( return `${basePath}/v2/request-time/calculate${queryString}`; }, [debouncedAmount]); - const { data, initialLoading, error } = useLidoSWR(url, standardFetcher, { - ...STRATEGY_EAGER, - shouldRetryOnError: (e: unknown) => { - // if api is not happy about our request - no retry - return !(e && typeof e == 'object' && 'status' in e && e.status == 400); + const { data, initialLoading, error } = useLidoSWR( + ['swr:waiting-time'], + () => + standardFetcher(url, { + headers: { + 'Content-Type': 'application/json', + 'WQ-Request-Source': 'widget', + }, + }), + { + ...STRATEGY_EAGER, + shouldRetryOnError: (e: unknown) => { + // if api is not happy about our request - no retry + return !(e && typeof e == 'object' && 'status' in e && e.status == 400); + }, }, - }) as SWRResponse; + ) as SWRResponse; const { isBunker, isPaused } = useWithdrawals(); const isRequestError = error instanceof FetcherError && error.status < 500; From 4ee605612248d3d4bfc5fb3b9cb7def57f7b3d59 Mon Sep 17 00:00:00 2001 From: Taras Alekhin Date: Wed, 10 Apr 2024 10:06:18 +0200 Subject: [PATCH 19/20] fix: fixed dynamic config after merge --- features/withdrawals/hooks/contract/useWithdrawalsData.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/features/withdrawals/hooks/contract/useWithdrawalsData.ts b/features/withdrawals/hooks/contract/useWithdrawalsData.ts index af8dc81f5..b1a0e4161 100644 --- a/features/withdrawals/hooks/contract/useWithdrawalsData.ts +++ b/features/withdrawals/hooks/contract/useWithdrawalsData.ts @@ -11,7 +11,8 @@ import { import { MAX_SHOWN_REQUEST_PER_TYPE } from 'features/withdrawals/withdrawals-constants'; import { STRATEGY_LAZY } from 'consts/swr-strategies'; import { standardFetcher } from 'utils/standardFetcher'; -import { dynamics } from 'config'; +import { default as dynamics } from 'config/dynamics'; + import { encodeURLQuery } from 'utils/encodeURLQuery'; export type WithdrawalRequests = NonNullable< From dd6dd21e0c998098e44f87b85f887faebc5078b8 Mon Sep 17 00:00:00 2001 From: Taras Alekhin Date: Wed, 10 Apr 2024 11:42:31 +0200 Subject: [PATCH 20/20] fix: fix debounce --- features/withdrawals/hooks/useWaitingTime.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/features/withdrawals/hooks/useWaitingTime.ts b/features/withdrawals/hooks/useWaitingTime.ts index eeb928c75..266c0f47b 100644 --- a/features/withdrawals/hooks/useWaitingTime.ts +++ b/features/withdrawals/hooks/useWaitingTime.ts @@ -38,7 +38,7 @@ export const useWaitingTime = ( }, [debouncedAmount]); const { data, initialLoading, error } = useLidoSWR( - ['swr:waiting-time'], + ['swr:waiting-time', debouncedAmount], () => standardFetcher(url, { headers: {