* chore: removes web3wallet example * refactor: updates sign-client to web3wallet * feat: implements auth * fix: resolves bug preventing approving only optional namespaces * feat: implements new design * UX flow for approving session proposals * feat: implements new designs in all modals * refactor: removes unused imports & groups imports into remote & local * feat: implements `isScam` alert on main request modal * feat: implements `threat prompt` * feat: updates all modals to new designs * chore: retrigger deployment --------- Co-authored-by: Gancho Radkov <ganchoradkov@gmail.com>
114 lines
3.5 KiB
TypeScript
114 lines
3.5 KiB
TypeScript
import { useMemo } from 'react'
|
|
import { useSnapshot } from 'valtio'
|
|
import { Image, StyledText } from '@nextui-org/react'
|
|
import SettingsStore from '@/store/SettingsStore'
|
|
import ReportIcon from '@mui/icons-material/Report'
|
|
import ReportProblemIcon from '@mui/icons-material/ReportProblem'
|
|
import NewReleasesIcon from '@mui/icons-material/NewReleases'
|
|
import { Avatar, Col, Link, Row, Text, styled } from '@nextui-org/react'
|
|
import { SignClientTypes } from '@walletconnect/types'
|
|
|
|
/**
|
|
* Types
|
|
*/
|
|
interface IProps {
|
|
metadata: SignClientTypes.Metadata
|
|
}
|
|
|
|
const StyledContainer = styled(Row, {
|
|
padding: '7px',
|
|
borderRadius: '30px',
|
|
marginTop: '10px',
|
|
marginBottom: '10px'
|
|
} as any)
|
|
|
|
const StyledUnknownRow = styled(StyledContainer, {
|
|
color: '$warning',
|
|
border: '0.5px solid $warning'
|
|
} as any)
|
|
|
|
const StyledUnknownContainer = styled('div', {
|
|
textAlign: 'initial'
|
|
} as any)
|
|
|
|
const StyledInvalidRow = styled(StyledContainer, {
|
|
color: '$error',
|
|
border: '0.5px solid $error'
|
|
} as any)
|
|
|
|
const StyledInvalidContainer = styled('div', {
|
|
textAlign: 'initial'
|
|
} as any)
|
|
|
|
const StyledDescription = styled(Text, {
|
|
lineHeight: '20px',
|
|
fontSize: '15px'
|
|
} as any)
|
|
/**
|
|
* Components
|
|
*/
|
|
export default function VerifyInfobox({ metadata }: IProps) {
|
|
const { currentRequestVerifyContext } = useSnapshot(SettingsStore.state)
|
|
const validation = currentRequestVerifyContext?.verified.validation
|
|
return (
|
|
<div style={{ textAlign: 'center' }}>
|
|
{currentRequestVerifyContext?.verified.isScam ? (
|
|
<StyledInvalidRow>
|
|
<Col style={{ margin: 'auto' }} span={2}>
|
|
<NewReleasesIcon style={{ verticalAlign: 'bottom' }} />
|
|
</Col>
|
|
<Col style={{ margin: 'auto' }}>
|
|
<Row>Known secury risk</Row>
|
|
<Row>
|
|
<StyledInvalidContainer>
|
|
<StyledDescription>
|
|
This website is flagged as unsafe by multiple security reports. Leave immediately
|
|
to protect your assets.
|
|
</StyledDescription>
|
|
</StyledInvalidContainer>
|
|
</Row>
|
|
</Col>
|
|
</StyledInvalidRow>
|
|
) : validation == 'UNKNOWN' ? (
|
|
<StyledUnknownRow>
|
|
<Col style={{ margin: 'auto' }} span={2}>
|
|
<ReportIcon style={{ verticalAlign: 'bottom' }} />
|
|
</Col>
|
|
<Col style={{ margin: 'auto' }}>
|
|
<Row>
|
|
<StyledUnknownContainer>Unknown domain</StyledUnknownContainer>
|
|
</Row>
|
|
<Row>
|
|
<StyledUnknownContainer>
|
|
<StyledDescription>
|
|
This domain cannot be verified. Please check the request carefully before
|
|
approving.
|
|
</StyledDescription>
|
|
</StyledUnknownContainer>
|
|
</Row>
|
|
</Col>
|
|
</StyledUnknownRow>
|
|
) : validation == 'INVALID' ? (
|
|
<StyledInvalidRow>
|
|
<Col style={{ margin: 'auto' }} span={2}>
|
|
<ReportProblemIcon style={{ verticalAlign: 'bottom' }} />
|
|
</Col>
|
|
<Col style={{ margin: 'auto' }}>
|
|
<Row>
|
|
<>Domain mismatch</>
|
|
</Row>
|
|
<Row>
|
|
<StyledInvalidContainer>
|
|
<StyledDescription>
|
|
This website has a domain that does not match the sender of this request.
|
|
Approving may lead to loss of funds.
|
|
</StyledDescription>
|
|
</StyledInvalidContainer>
|
|
</Row>
|
|
</Col>
|
|
</StyledInvalidRow>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}
|