From 4d03b33bcd1ce0edc962b61cb3415efdcebf7a29 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Tue, 7 Nov 2023 15:09:02 +0700 Subject: [PATCH] fix: modal scroll fixes (#1607) --- package.json | 4 +- src/modals/ClaimPayouts/Forms.tsx | 5 +- src/modals/ClaimPayouts/Overview.tsx | 6 +- src/modals/ClaimPayouts/Wrappers.ts | 11 +- src/modals/ClaimPayouts/index.tsx | 31 ++-- .../ManagePool/Forms/ClaimCommission.tsx | 5 +- src/modals/ManagePool/Forms/Commission.tsx | 5 +- src/modals/ManagePool/Forms/LeavePool.tsx | 5 +- .../ManagePool/Forms/SetClaimPermission.tsx | 10 +- src/modals/ManagePool/Forms/SetMetadata.tsx | 10 +- src/modals/ManagePool/Forms/SetState.tsx | 5 +- src/modals/ManagePool/Tasks.tsx | 168 +++++++++--------- src/modals/ManagePool/Wrappers.ts | 22 +-- src/modals/ManagePool/index.tsx | 46 +++-- src/modals/UnlockChunks/Forms.tsx | 5 +- src/modals/UnlockChunks/Overview.tsx | 6 +- src/modals/UnlockChunks/Wrappers.ts | 9 +- src/modals/UnlockChunks/index.tsx | 38 ++-- yarn.lock | 18 +- 19 files changed, 214 insertions(+), 195 deletions(-) diff --git a/package.json b/package.json index 59f182ed4c..be872d7237 100644 --- a/package.json +++ b/package.json @@ -26,8 +26,8 @@ "@fortawesome/react-fontawesome": "^0.2.0", "@ledgerhq/hw-transport-webhid": "^6.27.19", "@polkadot-cloud/assets": "^0.1.34", - "@polkadot-cloud/core": "^1.0.43", - "@polkadot-cloud/react": "^0.1.121", + "@polkadot-cloud/core": "^1.0.44", + "@polkadot-cloud/react": "^0.1.123", "@polkadot-cloud/utils": "^0.0.25", "@polkadot/api": "^10.10.1", "@polkadot/keyring": "^12.1.1", diff --git a/src/modals/ClaimPayouts/Forms.tsx b/src/modals/ClaimPayouts/Forms.tsx index 98de20ecbd..a3bfd30a57 100644 --- a/src/modals/ClaimPayouts/Forms.tsx +++ b/src/modals/ClaimPayouts/Forms.tsx @@ -5,6 +5,7 @@ import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'; import { ActionItem, ButtonSubmitInvert, + ModalPadding, ModalWarnings, } from '@polkadot-cloud/react'; import { planckToUnit } from '@polkadot-cloud/utils'; @@ -124,7 +125,7 @@ export const Forms = forwardRef( return (
-
+ {warnings.length > 0 ? ( {warnings.map((text, i) => ( @@ -141,7 +142,7 @@ export const Forms = forwardRef( />

{t('afterClaiming')}

-
+ -
+ {Object.entries(unclaimedPayouts || {}).map( ([era, unclaimedPayout], i) => getTotalPayout(unclaimedPayout).isZero() ? ( @@ -37,7 +37,7 @@ export const Overview = forwardRef(

{t('claimsOnBehalf')}

{t('notToClaim')}

-
+ ); } diff --git a/src/modals/ClaimPayouts/Wrappers.ts b/src/modals/ClaimPayouts/Wrappers.ts index a449d8d90c..ab314645f5 100644 --- a/src/modals/ClaimPayouts/Wrappers.ts +++ b/src/modals/ClaimPayouts/Wrappers.ts @@ -4,17 +4,10 @@ import styled from 'styled-components'; export const ContentWrapper = styled.div` - border-radius: 1rem; display: flex; flex-flow: column nowrap; - flex-basis: 50%; - flex-grow: 0; - flex-shrink: 1; - height: fit-content; - - .padding { - padding: 0 1rem; - } + border-radius: 1rem; + width: 100%; > div:last-child { margin-bottom: 0; diff --git a/src/modals/ClaimPayouts/index.tsx b/src/modals/ClaimPayouts/index.tsx index 9dc9048520..6af9431fda 100644 --- a/src/modals/ClaimPayouts/index.tsx +++ b/src/modals/ClaimPayouts/index.tsx @@ -21,7 +21,7 @@ export const ClaimPayouts = () => { const { t } = useTranslation('modals'); const { notEnoughFunds } = useTxMeta(); const { unclaimedPayouts } = usePayouts(); - const { setModalHeight } = useOverlay().modal; + const { setModalHeight, modalMaxHeight } = useOverlay().modal; // Active modal section. const [section, setSectionState] = useState(0); @@ -70,6 +70,9 @@ export const ClaimPayouts = () => { </ModalFixedTitle> <ModalMotionTwoSection + style={{ + maxHeight: modalMaxHeight - (headerRef.current?.clientHeight || 0), + }} animate={sectionRef.current === 0 ? 'home' : 'next'} transition={{ duration: 0.5, @@ -85,17 +88,21 @@ export const ClaimPayouts = () => { }, }} > - <Overview - setSection={setSection} - setPayouts={setPayouts} - ref={overviewRef} - /> - <Forms - ref={formsRef} - payouts={payouts} - setPayouts={setPayouts} - setSection={setSection} - /> + <div className="section"> + <Overview + setSection={setSection} + setPayouts={setPayouts} + ref={overviewRef} + /> + </div> + <div className="section"> + <Forms + ref={formsRef} + payouts={payouts} + setPayouts={setPayouts} + setSection={setSection} + /> + </div> </ModalMotionTwoSection> </ModalSection> ); diff --git a/src/modals/ManagePool/Forms/ClaimCommission.tsx b/src/modals/ManagePool/Forms/ClaimCommission.tsx index 2abe71ed60..90e0b2e9a0 100644 --- a/src/modals/ManagePool/Forms/ClaimCommission.tsx +++ b/src/modals/ManagePool/Forms/ClaimCommission.tsx @@ -6,6 +6,7 @@ import { ActionItem, ButtonSubmitInvert, ModalNotes, + ModalPadding, ModalWarnings, } from '@polkadot-cloud/react'; import { greaterThanZero, planckToUnit, rmCommas } from '@polkadot-cloud/utils'; @@ -70,7 +71,7 @@ export const ClaimCommission = ({ setSection }: any) => { return ( <> - <div className="padding"> + <ModalPadding horizontalOnly> {warnings.length > 0 ? ( <ModalWarnings withMargin> {warnings.map((text, i) => ( @@ -87,7 +88,7 @@ export const ClaimCommission = ({ setSection }: any) => { <ModalNotes> <p>{t('sentToCommissionPayee')}</p> </ModalNotes> - </div> + </ModalPadding> <SubmitTx valid={valid} buttons={[ diff --git a/src/modals/ManagePool/Forms/Commission.tsx b/src/modals/ManagePool/Forms/Commission.tsx index 123b1475f3..50800873c3 100644 --- a/src/modals/ManagePool/Forms/Commission.tsx +++ b/src/modals/ManagePool/Forms/Commission.tsx @@ -6,6 +6,7 @@ import { ActionItem, ButtonHelp, ButtonSubmitInvert, + ModalPadding, ModalWarnings, } from '@polkadot-cloud/react'; import { rmCommas } from '@polkadot-cloud/utils'; @@ -448,7 +449,7 @@ export const Commission = ({ setSection, incrementCalculateHeight }: any) => { return ( <> - <div className="padding"> + <ModalPadding horizontalOnly> {warnings.length > 0 ? ( <ModalWarnings withMargin> {warnings.map((text, i) => ( @@ -634,7 +635,7 @@ export const Commission = ({ setSection, incrementCalculateHeight }: any) => { </p> </SliderWrapper> )} - </div> + </ModalPadding> <SubmitTx valid={valid} buttons={[ diff --git a/src/modals/ManagePool/Forms/LeavePool.tsx b/src/modals/ManagePool/Forms/LeavePool.tsx index f9e79b5c71..0af498e586 100644 --- a/src/modals/ManagePool/Forms/LeavePool.tsx +++ b/src/modals/ManagePool/Forms/LeavePool.tsx @@ -5,6 +5,7 @@ import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'; import { ActionItem, ButtonSubmitInvert, + ModalPadding, ModalWarnings, } from '@polkadot-cloud/react'; import { @@ -118,7 +119,7 @@ export const LeavePool = ({ setSection }: any) => { return ( <> - <div className="padding"> + <ModalPadding horizontalOnly> {warnings.length > 0 ? ( <ModalWarnings withMargin> {warnings.map((text, i) => ( @@ -133,7 +134,7 @@ export const LeavePool = ({ setSection }: any) => { valueKey="bondDurationFormatted" deps={[bondDuration]} /> - </div> + </ModalPadding> <SubmitTx valid={bondValid} buttons={[ diff --git a/src/modals/ManagePool/Forms/SetClaimPermission.tsx b/src/modals/ManagePool/Forms/SetClaimPermission.tsx index 0bf3035701..874bf0c3aa 100644 --- a/src/modals/ManagePool/Forms/SetClaimPermission.tsx +++ b/src/modals/ManagePool/Forms/SetClaimPermission.tsx @@ -2,7 +2,11 @@ // SPDX-License-Identifier: GPL-3.0-only import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'; -import { ButtonSubmitInvert, ModalWarnings } from '@polkadot-cloud/react'; +import { + ButtonSubmitInvert, + ModalPadding, + ModalWarnings, +} from '@polkadot-cloud/react'; import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useApi } from 'contexts/Api'; @@ -72,7 +76,7 @@ export const SetClaimPermission = ({ setSection, section }: any) => { return ( <> - <div className="padding"> + <ModalPadding horizontalOnly> {warnings.length > 0 ? ( <ModalWarnings withMargin> {warnings.map((text, i) => ( @@ -90,7 +94,7 @@ export const SetClaimPermission = ({ setSection, section }: any) => { setClaimPermission(val); }} /> - </div> + </ModalPadding> <SubmitTx valid={valid && claimPermission !== membership?.claimPermission} buttons={[ diff --git a/src/modals/ManagePool/Forms/SetMetadata.tsx b/src/modals/ManagePool/Forms/SetMetadata.tsx index 1ed361ca57..3347326cd0 100644 --- a/src/modals/ManagePool/Forms/SetMetadata.tsx +++ b/src/modals/ManagePool/Forms/SetMetadata.tsx @@ -3,7 +3,11 @@ import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'; import { u8aToString, u8aUnwrapBytes } from '@polkadot/util'; -import { ButtonSubmitInvert, ModalWarnings } from '@polkadot-cloud/react'; +import { + ButtonSubmitInvert, + ModalPadding, + ModalWarnings, +} from '@polkadot-cloud/react'; import React, { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useApi } from 'contexts/Api'; @@ -80,7 +84,7 @@ export const SetMetadata = ({ setSection, section }: any) => { return ( <> - <div className="padding"> + <ModalPadding horizontalOnly> {warnings.length > 0 ? ( <ModalWarnings withMargin> {warnings.map((text, i) => ( @@ -99,7 +103,7 @@ export const SetMetadata = ({ setSection, section }: any) => { value={metadata ?? ''} /> <p>{t('storedOnChain')}</p> - </div> + </ModalPadding> <SubmitTx valid={valid} buttons={[ diff --git a/src/modals/ManagePool/Forms/SetState.tsx b/src/modals/ManagePool/Forms/SetState.tsx index 2262eb9f41..0b88df13f2 100644 --- a/src/modals/ManagePool/Forms/SetState.tsx +++ b/src/modals/ManagePool/Forms/SetState.tsx @@ -5,6 +5,7 @@ import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'; import { ActionItem, ButtonSubmitInvert, + ModalPadding, ModalWarnings, } from '@polkadot-cloud/react'; import { useEffect, useState } from 'react'; @@ -129,7 +130,7 @@ export const SetState = ({ setSection, task }: any) => { return ( <> - <div className="padding"> + <ModalPadding horizontalOnly> {warnings.length > 0 ? ( <ModalWarnings withMargin> {warnings.map((text, i) => ( @@ -139,7 +140,7 @@ export const SetState = ({ setSection, task }: any) => { ) : null} {content.title} {content.message} - </div> + </ModalPadding> <SubmitTx valid={valid} buttons={[ diff --git a/src/modals/ManagePool/Tasks.tsx b/src/modals/ManagePool/Tasks.tsx index 4b65f14a3f..d678f4cf7a 100644 --- a/src/modals/ManagePool/Tasks.tsx +++ b/src/modals/ManagePool/Tasks.tsx @@ -26,124 +26,122 @@ export const Tasks = forwardRef(({ setSection, setTask }: any, ref: any) => { return ( <ContentWrapper> - <div className="padding"> - <div className="items" ref={ref} style={{ paddingBottom: '1.5rem' }}> - <div style={{ paddingBottom: '0.75rem' }}> - {poolDestroying && <Warning text={t('beingDestroyed')} />} - </div> - {isOwner() && ( - <> - {globalMaxCommission > 0 && ( - <> - <ButtonOption - onClick={() => { - setSection(1); - setTask('claim_commission'); - }} - > - <div> - <h3>{t('claimCommission')}</h3> - <p>{t('claimOutstandingCommission')}</p> - </div> - </ButtonOption> - <ButtonOption - onClick={() => { - setSection(1); - setTask('manage_commission'); - }} - > - <div> - <h3>{t('manageCommission')}</h3> - <p>{t('updatePoolCommission')}</p> - </div> - </ButtonOption> - </> - )} - </> - )} - <ButtonOption - onClick={() => { - setSection(1); - setTask('set_claim_permission'); - }} - > - <div> - <h3>{t('updateClaimPermission')}</h3> - <p>{t('updateWhoClaimRewards')}</p> - </div> - </ButtonOption> - - {isOwner() && ( - <ButtonOption - disabled={poolDestroying} - onClick={() => { - setSection(1); - setTask('set_pool_metadata'); - }} - > - <div> - <h3>{t('renamePool')}</h3> - <p>{t('updateName')}</p> - </div> - </ButtonOption> - )} - {(isOwner() || isBouncer()) && ( - <> - {poolLocked ? ( + <div className="items" ref={ref} style={{ paddingBottom: '1.5rem' }}> + <div style={{ paddingBottom: '0.75rem' }}> + {poolDestroying && <Warning text={t('beingDestroyed')} />} + </div> + {isOwner() && ( + <> + {globalMaxCommission > 0 && ( + <> <ButtonOption - disabled={poolDestroying} onClick={() => { setSection(1); - setTask('unlock_pool'); + setTask('claim_commission'); }} > <div> - <h3>{t('unlockPool')}</h3> - <p>{t('allowToJoin')}</p> + <h3>{t('claimCommission')}</h3> + <p>{t('claimOutstandingCommission')}</p> </div> </ButtonOption> - ) : ( <ButtonOption - disabled={poolDestroying} onClick={() => { setSection(1); - setTask('lock_pool'); + setTask('manage_commission'); }} > <div> - <h3>{t('lockPool')}</h3> - <p>{t('stopJoiningPool')}</p> + <h3>{t('manageCommission')}</h3> + <p>{t('updatePoolCommission')}</p> </div> </ButtonOption> - )} + </> + )} + </> + )} + <ButtonOption + onClick={() => { + setSection(1); + setTask('set_claim_permission'); + }} + > + <div> + <h3>{t('updateClaimPermission')}</h3> + <p>{t('updateWhoClaimRewards')}</p> + </div> + </ButtonOption> + + {isOwner() && ( + <ButtonOption + disabled={poolDestroying} + onClick={() => { + setSection(1); + setTask('set_pool_metadata'); + }} + > + <div> + <h3>{t('renamePool')}</h3> + <p>{t('updateName')}</p> + </div> + </ButtonOption> + )} + {(isOwner() || isBouncer()) && ( + <> + {poolLocked ? ( + <ButtonOption + disabled={poolDestroying} + onClick={() => { + setSection(1); + setTask('unlock_pool'); + }} + > + <div> + <h3>{t('unlockPool')}</h3> + <p>{t('allowToJoin')}</p> + </div> + </ButtonOption> + ) : ( <ButtonOption disabled={poolDestroying} onClick={() => { setSection(1); - setTask('destroy_pool'); + setTask('lock_pool'); }} > <div> - <h3>{t('destroyPool')}</h3> - <p>{t('changeToDestroy')}</p> + <h3>{t('lockPool')}</h3> + <p>{t('stopJoiningPool')}</p> </div> </ButtonOption> - </> - )} - {isMember() && !isDepositor() && active?.isGreaterThan(0) && ( + )} <ButtonOption + disabled={poolDestroying} onClick={() => { setSection(1); - setTask('leave_pool'); + setTask('destroy_pool'); }} > <div> - <h3>{t('leavePool')}</h3> - <p>{t('unbondFundsLeavePool')}</p> + <h3>{t('destroyPool')}</h3> + <p>{t('changeToDestroy')}</p> </div> </ButtonOption> - )} - </div> + </> + )} + {isMember() && !isDepositor() && active?.isGreaterThan(0) && ( + <ButtonOption + onClick={() => { + setSection(1); + setTask('leave_pool'); + }} + > + <div> + <h3>{t('leavePool')}</h3> + <p>{t('unbondFundsLeavePool')}</p> + </div> + </ButtonOption> + )} </div> </ContentWrapper> ); diff --git a/src/modals/ManagePool/Wrappers.ts b/src/modals/ManagePool/Wrappers.ts index 2683239755..8feb9748f8 100644 --- a/src/modals/ManagePool/Wrappers.ts +++ b/src/modals/ManagePool/Wrappers.ts @@ -4,26 +4,10 @@ import styled from 'styled-components'; export const ContentWrapper = styled.div` - border-radius: 1rem; display: flex; flex-flow: column nowrap; - flex-basis: 50%; - min-width: 50%; - height: auto; - flex-grow: 1; - - .padding { - padding: 0 1rem 1rem 1rem; - - h2 { - margin-bottom: 0.5rem; - } - - input { - font-family: InterBold, sans-serif; - margin-top: 0.5rem; - } - } + border-radius: 1rem; + width: 100%; .items { position: relative; @@ -31,8 +15,6 @@ export const ContentWrapper = styled.div` border-bottom: none; width: auto; border-radius: 0.75rem; - overflow: hidden; - overflow-y: auto; z-index: 1; width: 100%; diff --git a/src/modals/ManagePool/index.tsx b/src/modals/ManagePool/index.tsx index 3f6507f26c..4964bbc4ea 100644 --- a/src/modals/ManagePool/index.tsx +++ b/src/modals/ManagePool/index.tsx @@ -4,6 +4,7 @@ import { ModalFixedTitle, ModalMotionTwoSection, + ModalPadding, ModalSection, } from '@polkadot-cloud/react'; import { useEffect, useRef, useState } from 'react'; @@ -19,9 +20,9 @@ import { Tasks } from './Tasks'; export const ManagePool = () => { const { t } = useTranslation('modals'); const { notEnoughFunds } = useTxMeta(); - const { setModalHeight } = useOverlay().modal; - const { isOwner, selectedActivePool } = useActivePools(); const { integrityChecked } = useLedgerHardware(); + const { isOwner, selectedActivePool } = useActivePools(); + const { setModalHeight, modalMaxHeight } = useOverlay().modal; // modal task const [task, setTask] = useState<string>(); @@ -39,8 +40,7 @@ export const ManagePool = () => { const tasksRef = useRef<HTMLDivElement>(null); const formsRef = useRef<HTMLDivElement>(null); - // Resize modal on state change. - useEffect(() => { + const refreshModalHeight = () => { let height = headerRef.current?.clientHeight || 0; if (section === 0) { height += tasksRef.current?.clientHeight || 0; @@ -48,6 +48,11 @@ export const ManagePool = () => { height += formsRef.current?.clientHeight || 0; } setModalHeight(height); + }; + + // Resize modal on state change. + useEffect(() => { + refreshModalHeight(); }, [ integrityChecked, section, @@ -57,6 +62,13 @@ export const ManagePool = () => { selectedActivePool?.bondedPool?.state, ]); + useEffect(() => { + window.addEventListener('resize', refreshModalHeight); + return () => { + window.removeEventListener('resize', refreshModalHeight); + }; + }, []); + return ( <ModalSection type="carousel"> <ModalFixedTitle ref={headerRef}> @@ -66,6 +78,9 @@ export const ManagePool = () => { /> </ModalFixedTitle> <ModalMotionTwoSection + style={{ + maxHeight: modalMaxHeight - (headerRef.current?.clientHeight || 0), + }} animate={section === 0 ? 'home' : 'next'} transition={{ duration: 0.5, @@ -81,14 +96,21 @@ export const ManagePool = () => { }, }} > - <Tasks setSection={setSection} setTask={setTask} ref={tasksRef} /> - <Forms - setSection={setSection} - task={task} - section={section} - ref={formsRef} - incrementCalculateHeight={incrementCalculateHeight} - /> + <div className="section"> + <ModalPadding horizontalOnly> + <Tasks setSection={setSection} setTask={setTask} ref={tasksRef} /> + </ModalPadding> + </div> + + <div className="section"> + <Forms + setSection={setSection} + task={task} + section={section} + ref={formsRef} + incrementCalculateHeight={incrementCalculateHeight} + /> + </div> </ModalMotionTwoSection> </ModalSection> ); diff --git a/src/modals/UnlockChunks/Forms.tsx b/src/modals/UnlockChunks/Forms.tsx index 131dc0ebbf..14ddbc3977 100644 --- a/src/modals/UnlockChunks/Forms.tsx +++ b/src/modals/UnlockChunks/Forms.tsx @@ -5,6 +5,7 @@ import { faChevronLeft } from '@fortawesome/free-solid-svg-icons'; import { ActionItem, ButtonSubmitInvert, + ModalPadding, ModalWarnings, } from '@polkadot-cloud/react'; import { planckToUnit, rmCommas } from '@polkadot-cloud/utils'; @@ -125,7 +126,7 @@ export const Forms = forwardRef( return ( <ContentWrapper> <div ref={ref}> - <div className="padding"> + <ModalPadding horizontalOnly> {warnings.length > 0 ? ( <ModalWarnings withMargin> {warnings.map((text, i) => ( @@ -157,7 +158,7 @@ export const Forms = forwardRef( </> )} </div> - </div> + </ModalPadding> <SubmitTx fromController={isStaking} valid={valid} diff --git a/src/modals/UnlockChunks/Overview.tsx b/src/modals/UnlockChunks/Overview.tsx index cdd235215e..2d40f8f490 100644 --- a/src/modals/UnlockChunks/Overview.tsx +++ b/src/modals/UnlockChunks/Overview.tsx @@ -3,7 +3,7 @@ import { faCheckCircle, faClock } from '@fortawesome/free-regular-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { ButtonSubmit, ModalNotes } from '@polkadot-cloud/react'; +import { ButtonSubmit, ModalNotes, ModalPadding } from '@polkadot-cloud/react'; import { planckToUnit } from '@polkadot-cloud/utils'; import BigNumber from 'bignumber.js'; import { getUnixTime } from 'date-fns'; @@ -62,7 +62,7 @@ export const Overview = forwardRef( return ( <ContentWrapper> - <div className="padding" ref={ref}> + <ModalPadding horizontalOnly ref={ref}> <StatsWrapper> <StatWrapper> <div className="inner"> @@ -140,7 +140,7 @@ export const Overview = forwardRef( <p> {isStaking ? ` ${t('rebondUnlock')}` : null}</p> {!isStaking ? <p>{t('unlockChunk')}</p> : null} </ModalNotes> - </div> + </ModalPadding> </ContentWrapper> ); } diff --git a/src/modals/UnlockChunks/Wrappers.ts b/src/modals/UnlockChunks/Wrappers.ts index 304d36900b..db6f19e162 100644 --- a/src/modals/UnlockChunks/Wrappers.ts +++ b/src/modals/UnlockChunks/Wrappers.ts @@ -4,15 +4,10 @@ import styled from 'styled-components'; export const ContentWrapper = styled.div` - border-radius: 1rem; display: flex; flex-flow: column nowrap; - flex-basis: 50%; - flex: 1; - - .padding { - padding: 0 1rem; - } + border-radius: 1rem; + width: 100%; > div:last-child { margin-bottom: 0; diff --git a/src/modals/UnlockChunks/index.tsx b/src/modals/UnlockChunks/index.tsx index 1949cb0006..5775f960e7 100644 --- a/src/modals/UnlockChunks/index.tsx +++ b/src/modals/UnlockChunks/index.tsx @@ -24,6 +24,7 @@ export const UnlockChunks = () => { const { config: { options }, setModalHeight, + modalMaxHeight, } = useOverlay().modal; const { notEnoughFunds } = useTxMeta(); const { getStashLedger } = useBalances(); @@ -114,6 +115,9 @@ export const UnlockChunks = () => { <Title title={t('unlocks')} fixed /> </ModalFixedTitle> <ModalMotionTwoSection + style={{ + maxHeight: modalMaxHeight - (headerRef.current?.clientHeight || 0), + }} animate={sectionRef.current === 0 ? 'home' : 'next'} transition={{ duration: 0.5, @@ -129,21 +133,25 @@ export const UnlockChunks = () => { }, }} > - <Overview - unlocking={unlocking} - bondFor={bondFor} - setSection={setSection} - setUnlock={setUnlock} - setTask={setTask} - ref={overviewRef} - /> - <Forms - incrementCalculateHeight={incrementCalculateHeight} - setSection={setSection} - unlock={unlock} - task={task} - ref={formsRef} - /> + <div className="section"> + <Overview + unlocking={unlocking} + bondFor={bondFor} + setSection={setSection} + setUnlock={setUnlock} + setTask={setTask} + ref={overviewRef} + /> + </div> + <div className="section"> + <Forms + incrementCalculateHeight={incrementCalculateHeight} + setSection={setSection} + unlock={unlock} + task={task} + ref={formsRef} + /> + </div> </ModalMotionTwoSection> </ModalSection> ); diff --git a/yarn.lock b/yarn.lock index f12b31659d..75e37dbcf5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -695,15 +695,15 @@ resolved "https://registry.yarnpkg.com/@polkadot-cloud/assets/-/assets-0.1.34.tgz#a88c7066228d2e9229a026e9f86436ceae357737" integrity sha512-qsXlinOgVlChbMTdBXCDaQM59jDZWrKKMizR7LR8qL2yhzLh0Ohouf0POURhuCsJ1zUjHwbsZg+4ezsKZBM+nA== -"@polkadot-cloud/core@^1.0.42", "@polkadot-cloud/core@^1.0.43": - version "1.0.43" - resolved "https://registry.yarnpkg.com/@polkadot-cloud/core/-/core-1.0.43.tgz#20f2c5ce12b68d6217ec47d3a3046108485d3ea1" - integrity sha512-Tm2qkFH/B3+dvvE1+MY3xLAVPkTTQI+EUvfW+HLJ820uWME/Tbpi4bjlPTd7mjzPT+RNB9SM/ZboSFimAmaviA== +"@polkadot-cloud/core@^1.0.44": + version "1.0.44" + resolved "https://registry.yarnpkg.com/@polkadot-cloud/core/-/core-1.0.44.tgz#74304248dce21a83cd99ddb578018921659b2d31" + integrity sha512-tkx1mKlVuJba2FWFqY8JrZFwT5DPmrfz94Y/vMW/LR0REp6ES8XuiD/2ERBR2wkdfNQb4xOv9eKBmkAvYs/qBA== -"@polkadot-cloud/react@^0.1.121": - version "0.1.121" - resolved "https://registry.yarnpkg.com/@polkadot-cloud/react/-/react-0.1.121.tgz#448685352a5fe745ba16a5794af57142c48c0a06" - integrity sha512-91vEOoBWKRfh3NfEVrz/29ohQzLWqLDQJH9zggJIVYA2ycx1Q4jhX2bRjUV+f5hOttjbjcwWE0D7C2MxSnSNbg== +"@polkadot-cloud/react@^0.1.123": + version "0.1.123" + resolved "https://registry.yarnpkg.com/@polkadot-cloud/react/-/react-0.1.123.tgz#a7204af91e2d393647fe592a9ca40ba249aadda5" + integrity sha512-28AfhPW1KleHRyeBK0VgQDsFW13WanqRhjYdYNCRPlXpollvP8rjk/26rRfhjgFYhbnnnTIzFqKoejri8cGurg== dependencies: "@chainsafe/metamask-polkadot-adapter" "^0.5.1" "@chainsafe/metamask-polkadot-types" "^0.6.0" @@ -714,7 +714,7 @@ "@fortawesome/react-fontawesome" "^0.2.0" "@ledgerhq/hw-transport-webhid" "^6.27.19" "@polkadot-cloud/assets" "0.1.34" - "@polkadot-cloud/core" "^1.0.42" + "@polkadot-cloud/core" "^1.0.44" "@polkadot-cloud/utils" "^0.0.25" "@polkadot/keyring" "^12.5.1" "@polkadot/util" "^12.5.1"