wallet-connect-web-examples/wallets/react-wallet-v2/src/components/VerifyInfobox.tsx
Gancho Radkov 371e4f334d
feat: UI update (#295)
* 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>
2023-09-26 15:01:41 +03:00

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>
)
}