feat; separate copy pasted notification component

This commit is contained in:
RadoslavDimchev 2024-01-26 10:02:39 +02:00 committed by Radoslav Dimchev
parent d7badb78e0
commit 7fe692bc19
2 changed files with 43 additions and 36 deletions

View File

@ -1,7 +1,5 @@
import { Stack, XStack, YStack } from 'tamagui'
import { Button, InformationBox } from '@status-im/components'
import { CloseCircleIcon } from '@status-im/icons'
import { XStack, YStack } from 'tamagui'
import { Button } from '@status-im/components'
import { useDispatch, useSelector } from 'react-redux'
import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
@ -16,6 +14,7 @@ import {
setValidWords,
} from '../../redux/ValidatorOnboarding/KeyGeneration/slice'
import { useWindowSize } from '../../hooks/useWindowSize'
import CopyPastedNotification from './CopyPastedNotification'
const ContinueButton = () => {
const windowSize = useWindowSize()
@ -168,36 +167,4 @@ const ContinueButton = () => {
)
}
type CopyPastedNotificationProps = {
isSmallScreen?: boolean
}
const CopyPastedNotification = ({
isSmallScreen,
}: CopyPastedNotificationProps) => {
const isCopyPastedPhrase = useSelector(
(state: RootState) => state.keyGeneration.isCopyPastedPhrase,
)
return (
<>
{isCopyPastedPhrase && (
<Stack
style={{
width: '100%',
position: isSmallScreen ? 'static' : 'absolute',
marginTop: isSmallScreen ? '12px' : '0',
}}
>
<InformationBox
message="You have copy and pasted the entire Recovery Phrase. Please ensure you have secured it appropriately prior to continuing."
variant="error"
icon={<CloseCircleIcon size={20} />}
/>
</Stack>
)}
</>
)
}
export default ContinueButton

View File

@ -0,0 +1,40 @@
import { Stack } from 'tamagui'
import { InformationBox } from '@status-im/components'
import { CloseCircleIcon } from '@status-im/icons'
import { useSelector } from 'react-redux'
import { RootState } from '../../redux/store'
type CopyPastedNotificationProps = {
isSmallScreen?: boolean
}
const CopyPastedNotification = ({
isSmallScreen,
}: CopyPastedNotificationProps) => {
const isCopyPastedPhrase = useSelector(
(state: RootState) => state.keyGeneration.isCopyPastedPhrase,
)
return (
<>
{isCopyPastedPhrase && (
<Stack
style={{
width: '100%',
position: isSmallScreen ? 'static' : 'absolute',
marginTop: isSmallScreen ? '12px' : '0',
}}
>
<InformationBox
message="You have copy and pasted the entire Recovery Phrase. Please ensure you have secured it appropriately prior to continuing."
variant="error"
icon={<CloseCircleIcon size={20} />}
/>
</Stack>
)}
</>
)
}
export default CopyPastedNotification