feat: Go Plus Security plugin

.i18n-codegen.json

@@ -181,6 +181,18 @@
                 "trans": "Translate",
                 "sourceMap": "inline"
             }
+        },
+        {
+            "input": "./packages/plugins/GoPlusSecurity/src/locales/en-US.json",
+            "output": "./packages/plugins/GoPlusSecurity/src/locales/i18n_generated",
+            "parser": "i18next",
+            "generator": {
+                "type": "i18next/react-hooks",
+                "hooks": "useI18N",
+                "namespace": "io.gopluslabs.security",
+                "trans": "Translate",
+                "sourceMap": "inline"
+            }
         }
     ]
 }

cspell.json

@@ -309,6 +309,7 @@
         "gamification",
         "getdodoroute",
         "getx",
+        "gopluslabs",
         "gorli",
         "gusd",
         "gwapj",
@@ -347,6 +348,7 @@
         "nyfi",
         "onflow",
         "openocean",
+        "pausable",
         "pkts",
         "pnpm",
         "poap",

packages/icons/general/Risk.tsx

@@ -5,11 +5,11 @@ export const RiskIcon = createIcon(
         <path
             opacity="0.4"
             d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-            fill="white"
+            fill="#F4212E"
         />
         <path
             d="M10.3626 17.3559L14.9955 12.723L12.5428 11.0878L13.6329 7L9 11.6329L11.4527 13.268L10.3626 17.3559Z"
-            fill="white"
+            fill="#F4212E"
         />
     </g>,
     '0 0 24 24',

packages/mask/.webpack/config.ts

@@ -88,6 +88,7 @@ export function createConfiguration(rawFlags: BuildFlags): Configuration {
                     '@masknet/plugin-wallet': join(__dirname, '../../plugins/Wallet/src/'),
                     '@masknet/plugin-file-service': join(__dirname, '../../plugins/FileService/src/'),
                     '@masknet/plugin-cyberconnect': join(__dirname, '../../plugins/CyberConnect/src/'),
+                    '@masknet/plugin-go-plus-security': join(__dirname, '../../plugins/GoPlusSecurity/src/'),
                     '@masknet/external-plugin-previewer': join(__dirname, '../../external-plugin-previewer/src/'),
                     '@masknet/public-api': join(__dirname, '../../public-api/src/'),
                     '@masknet/sdk': join(__dirname, '../../mask-sdk/server/'),

packages/mask/package.json

@@ -29,6 +29,7 @@
     "@masknet/plugin-rss3": "workspace:*",
     "@masknet/plugin-solana": "workspace:*",
     "@masknet/plugin-wallet": "workspace:*",
+    "@masknet/plugin-go-plus-security": "workspace:*",
     "@masknet/public-api": "workspace:*",
     "@masknet/sdk": "workspace:*",
     "@masknet/shared": "workspace:*",

packages/mask/src/plugin-infra/register.js

@@ -10,6 +10,7 @@ import '@masknet/plugin-rss3'
 import '@masknet/plugin-dao'
 import '@masknet/plugin-solana'
 import '@masknet/plugin-cyberconnect'
+import '@masknet/plugin-go-plus-security'
 import '../plugins/Wallet'
 import '../plugins/EVM'
 import '../plugins/RedPacket'

packages/plugin-infra/src/types.ts

@@ -688,6 +688,7 @@ export enum PluginId {
     UnlockProtocol = 'com.maskbook.unlockprotocol',
     FileService = 'com.maskbook.fileservice',
     CyberConnect = 'me.cyberconnect.app',
+    GoPlusSecurity = 'io.gopluslabs.security',
     // @masknet/scripts: insert-here
 }
 

packages/plugins/GoPlusSecurity/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@masknet/plugin-go-plus-security",
+  "private": true,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "dependencies": {
+    "react-feather": "^2.0.9",
+    "@masknet/icons": "workspace:*",
+    "@masknet/plugin-infra": "workspace:*",
+    "@masknet/shared": "workspace:*",
+    "@masknet/shared-base-ui": "workspace:*",
+    "@masknet/shared-base": "workspace:*",
+    "@masknet/theme": "workspace:*",
+    "@masknet/web3-providers": "workspace:*",
+    "@masknet/web3-shared-evm": "workspace:*",
+    "react-use": "^17.3.2",
+    "bignumber.js": "^9.0.2",
+    "urlcat": "^2.0.4"
+  }
+}

packages/plugins/GoPlusSecurity/src/Dashboard/index.tsx

@@ -0,0 +1,9 @@
+import type { Plugin } from '@masknet/plugin-infra'
+import { base } from '../base'
+
+const dashboard: Plugin.Dashboard.Definition = {
+    ...base,
+    init(signal) {},
+}
+
+export default dashboard

packages/plugins/GoPlusSecurity/src/SNSAdaptor/CheckSecurityDialog.tsx

@@ -0,0 +1,86 @@
+import { Box, DialogContent, Stack } from '@mui/material'
+import { makeStyles, MaskDialog, useStylesExtends } from '@masknet/theme'
+import { useI18N } from '../locales'
+import { SearchBox } from './components/SearchBox'
+import { useAsyncFn } from 'react-use'
+import { GoPlusLabs } from '@masknet/web3-providers'
+import { Searching } from './components/Searching'
+import { SecurityPanel } from './components/SecurityPanel'
+import { Footer } from './components/Footer'
+import { Center, TokenSecurity } from './components/Common'
+import { DefaultPlaceholder } from './components/DefaultPlaceholder'
+import { NotFound } from './components/NotFound'
+import type { ChainId } from '@masknet/web3-shared-evm'
+
+const useStyles = makeStyles()((theme) => ({
+    root: {
+        width: 600,
+    },
+    paperRoot: {
+        backgroundImage: 'none',
+        '&>h2': {
+            height: 30,
+            border: `1px solid ${theme.palette.divider}`,
+            padding: theme.spacing(1.875, 2.5, 1.875, 2.5),
+            marginBottom: 24,
+        },
+    },
+    content: {
+        width: 552,
+        height: 510,
+        maxHeight: 510,
+        paddingBottom: theme.spacing(3),
+    },
+}))
+
+export interface BuyTokenDialogProps extends withClasses<never | 'root'> {
+    open: boolean
+    onClose(): void
+}
+
+export function CheckSecurityDialog(props: BuyTokenDialogProps) {
+    const t = useI18N()
+    const classes = useStylesExtends(useStyles(), props)
+    const { open, onClose } = props
+
+    const [{ value, loading: searching, error }, onSearch] = useAsyncFn(async (chainId: ChainId, content: string) => {
+        const values = await GoPlusLabs.getTokenSecurity(chainId, [content.trim()])
+        if (!Object.keys(values ?? {}).length) throw new Error('Contract Not Found')
+        return Object.entries(values ?? {}).map((x) => ({ ...x[1], contract: x[0], chainId }))[0] as
+            | TokenSecurity
+            | undefined
+    }, [])
+
+    return (
+        <MaskDialog
+            DialogProps={{ classes: { paper: classes.paperRoot } }}
+            title={t.dialog_title()}
+            open={open}
+            onBack={onClose}>
+            <DialogContent className={classes.content}>
+                <Stack height="100%" spacing={2}>
+                    <Box>
+                        <SearchBox onSearch={onSearch} />
+                    </Box>
+                    <Stack flex={1}>
+                        {searching && (
+                            <Center>
+                                <Searching />
+                            </Center>
+                        )}
+                        {error && !searching && <NotFound />}
+                        {!error && !searching && value && <SecurityPanel tokenSecurity={value} />}
+                        {!error && !searching && !value && (
+                            <Center>
+                                <DefaultPlaceholder />
+                            </Center>
+                        )}
+                    </Stack>
+                    <Box>
+                        <Footer />
+                    </Box>
+                </Stack>
+            </DialogContent>
+        </MaskDialog>
+    )
+}

packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/Common.tsx

@@ -0,0 +1,52 @@
+import type { SecurityAPI } from '@masknet/web3-providers'
+import { InfoIcon, RiskIcon, SuccessIcon } from '@masknet/icons'
+import { memo, ReactNode } from 'react'
+import { Stack } from '@mui/material'
+import type { useI18N } from '../../locales'
+import type { ChainId } from '@masknet/web3-shared-evm'
+
+export type TokenSecurity = SecurityAPI.ContractSecurity &
+    SecurityAPI.TokenSecurity &
+    SecurityAPI.TradingSecurity & { contract: string; chainId: ChainId }
+
+export enum SecurityMessageLevel {
+    High = 'High',
+    Medium = 'Medium',
+    Safe = 'Safe',
+}
+
+export const Center = memo(({ children }) => (
+    <Stack height="100%" justifyContent="center" alignItems="center">
+        {children}
+    </Stack>
+))
+
+type DefineMapping = {
+    [key in SecurityMessageLevel]: {
+        i18nKey: keyof ReturnType<typeof useI18N>
+        bgColor: string
+        titleColor: string
+        icon(size?: number): ReactNode
+    }
+}
+
+export const DefineMapping: DefineMapping = {
+    [SecurityMessageLevel.High]: {
+        i18nKey: 'high_risk',
+        titleColor: '#FF5F5F',
+        bgColor: 'rgba(255, 95, 95, 0.1)',
+        icon: (size: number) => <RiskIcon sx={{ fontSize: size ?? 24 }} />,
+    },
+    [SecurityMessageLevel.Medium]: {
+        i18nKey: 'medium_risk',
+        titleColor: '#FFB915',
+        bgColor: 'rgba(255, 185, 21, 0.1)',
+        icon: (size: number) => <InfoIcon sx={{ fontSize: size ?? 24, color: '#FFB915' }} />,
+    },
+    [SecurityMessageLevel.Safe]: {
+        i18nKey: 'low_risk',
+        titleColor: '#60DFAB',
+        bgColor: 'rgba(119, 224, 181, 0.1)',
+        icon: (size: number) => <SuccessIcon sx={{ fontSize: size ?? 24 }} />,
+    },
+}

packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/DefaultPlaceholder.tsx

@@ -0,0 +1,17 @@
+import { Box, Stack, Typography } from '@mui/material'
+import { SecurityIcon } from '../icons/SecurityIcon'
+import { useI18N } from '../../locales'
+
+export const DefaultPlaceholder = () => {
+    const t = useI18N()
+    return (
+        <Stack alignItems="center" spacing={2.5}>
+            <Box>
+                <SecurityIcon sx={{ fontSize: 48 }} />
+            </Box>
+            <Box>
+                <Typography variant="body2">{t.default_placeholder()}</Typography>
+            </Box>
+        </Stack>
+    )
+}

packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/Footer.tsx

@@ -0,0 +1,22 @@
+import { Box, Link, Stack, Typography } from '@mui/material'
+import { useI18N } from '../../locales'
+import { GoPlusLabLogo } from '../icons/Logo'
+import { PLUGIN_OFFICIAL_WEBSITE } from '../../constants'
+
+export const Footer = () => {
+    const t = useI18N()
+    return (
+        <Stack justifyContent="flex-end" direction="row">
+            <Stack direction="row" alignItems="center">
+                <Box>
+                    <Typography variant="body2" mr={1.25}>
+                        {t.powered_by_go_plus()}
+                    </Typography>
+                </Box>
+                <Link href={PLUGIN_OFFICIAL_WEBSITE} target="_blank" rel="noopener noreferrer">
+                    <GoPlusLabLogo />
+                </Link>
+            </Stack>
+        </Stack>
+    )
+}

packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/Loading.tsx

@@ -0,0 +1,22 @@
+import { makeStyles } from '@masknet/theme'
+import type { SvgIconProps } from '@mui/material'
+import { LoadingIcon } from '../icons/Loading'
+
+const useStyles = makeStyles()({
+    animated: {
+        '@keyframes loadingAnimation': {
+            '0%': {
+                transform: 'rotate(0deg)',
+            },
+            '100%': {
+                transform: 'rotate(360deg)',
+            },
+        },
+        animation: 'loadingAnimation 1s linear infinite',
+    },
+})
+
+export const LoadingAnimation = (props: SvgIconProps) => {
+    const { classes } = useStyles()
+    return <LoadingIcon {...props} className={`${classes.animated} ${props.className}`} />
+}

packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/NotFound.tsx

@@ -0,0 +1,13 @@
+import { Stack, Typography } from '@mui/material'
+import { useI18N } from '../../locales'
+
+export const NotFound = () => {
+    const t = useI18N()
+    return (
+        <Stack justifyContent="flex-start" alignItems="flex-start">
+            <Typography fontSize={12} color={(t) => t.palette.error.main}>
+                {t.not_found_tip()}
+            </Typography>
+        </Stack>
+    )
+}

packages/plugins/GoPlusSecurity/src/SNSAdaptor/components/RiskCard.tsx

@@ -0,0 +1,66 @@
+import { memo, ReactNode } from 'react'
+import { DefineMapping, TokenSecurity } from './Common'
+import { Box, Stack, Typography } from '@mui/material'
+import type { SecurityMessage } from '../rules'
+import { useI18N } from '../../locales'
+import { makeStyles } from '@masknet/theme'
+
+const useStyles = makeStyles()((theme) => ({
+    detectionCard: {
+        backgroundColor: theme.palette.background.default,
+        borderRadius: 8,
+    },
+    icon: {
+        display: 'inline-flex',
+        lineHeight: '22px',
+        height: 22,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    header: {
+        fontSize: 14,
+        lineHeight: '22px',
+    },
+    description: {
+        fontSize: 12,
+    },
+}))
+
+interface RiskCardProps {
+    info: SecurityMessage
+    tokenSecurity: TokenSecurity
+}
+
+export const RiskCard = memo<RiskCardProps>(({ info, tokenSecurity }) => {
+    const t = useI18N()
+    return (
+        <RiskCardUI
+            icon={DefineMapping[info.level].icon(14)}
+            title={t[info.titleKey]({ quantity: '', rate: info.i18nParams?.(tokenSecurity).rate ?? '' })}
+            titleColor={DefineMapping[info.level].titleColor}
+            description={t[info.messageKey]({ quantity: '', rate: info.i18nParams?.(tokenSecurity).rate ?? '' })}
+        />
+    )
+})
+
+interface RiskCardUIProps {
+    icon: ReactNode
+    title: string
+    titleColor: string
+    description?: string
+}
+
+export const RiskCardUI = memo<RiskCardUIProps>(({ icon, title, titleColor, description }) => {
+    const { classes } = useStyles()
+    return (
+        <Stack spacing={1} key={title} p={1.5} direction="row" className={classes.detectionCard}>
+            <Box className={classes.icon}>{icon}</Box>
+            <Box>
+                <Typography className={classes.header} color={titleColor}>
+                    {title}
+                </Typography>
+                {description && <Typography className={classes.description}>{description}</Typography>}
+            </Box>
+        </Stack>
+    )
+})