feat: screener front (#38)

front au the screener page

include spec from issue #21

frontend/src/App.tsx

@@ -5,6 +5,7 @@ import HomeLayout from './components/Layout/Home'
 import HomePage from './pages/Home'
 import LaunchPage from './pages/Launch'
 import ManagePage from './pages/Manage'
+import ScreenPage from './pages/Screen'
 
 const router = createBrowserRouter([
   {
@@ -31,6 +32,14 @@ const router = createBrowserRouter([
       </AppLayout>
     ),
   },
+  {
+    path: '/screen',
+    element: (
+      <AppLayout>
+        <ScreenPage />
+      </AppLayout>
+    ),
+  },
 ])
 
 export default function App() {

frontend/src/components/NavBar/index.tsx

@@ -16,6 +16,10 @@ export const links = [
     name: 'Manage',
     path: '/manage',
   },
+  {
+    name: 'Screen',
+    path: '/screen',
+  },
 ]
 
 export default function NavBar() {

frontend/src/pages/Screen/index.tsx

@@ -0,0 +1,120 @@
+import { useCallback, useState } from 'react'
+import { SecondaryButton } from 'src/components/Button'
+import Box from 'src/theme/components/Box'
+import { Column, Row } from 'src/theme/components/Flex'
+import * as Text from 'src/theme/components/Text'
+
+import * as styles from './style.css'
+
+// ... existing code ...
+
+export default function ScreenPage() {
+  const [tokenAddress, setTokenAddress] = useState<string>('')
+  const [checkResult, setCheckResult] = useState<string | null>(null)
+  const [liquidityLockDuration, setLiquidityLockDuration] = useState<number | null>(null)
+  const [maxHolders, setMaxHolders] = useState<number | null>(null)
+  const [maxTransactionAmount, setMaxTransactionAmount] = useState<number | null>(null)
+  const [hiddenMintFunctions, setHiddenMintFunctions] = useState<boolean | null>(null)
+  const [permissionsAndLimitations, setPermissionsAndLimitations] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState<boolean>(false)
+  const [error, setError] = useState<string | null>(null)
+  const checkSafety = useCallback(() => {
+    if (!tokenAddress) {
+      setError('Please enter a token address')
+      return
+    }
+    setError(null) // reset the error
+    setIsLoading(true)
+    setIsLoading(true)
+    setCheckResult(null) // reset the result
+    // reset other results
+    setLiquidityLockDuration(null)
+    setMaxHolders(null)
+    setMaxTransactionAmount(null)
+    setHiddenMintFunctions(null)
+    setPermissionsAndLimitations(null)
+
+    setTimeout(() => {
+      // simulate a check operation
+      // for now, we'll just check if the token address is not empty
+      const result = tokenAddress ? 'Success' : 'Fail'
+      setCheckResult(result)
+
+      // simulate other checks
+      setLiquidityLockDuration(365) // replace with actual calculation
+      setMaxHolders(1000) // replace with actual calculation
+      setMaxTransactionAmount(1000000) // replace with actual calculation
+      setHiddenMintFunctions(false) // replace with actual check
+      setPermissionsAndLimitations('None') // replace with actual calculation
+      setIsLoading(false)
+    }, 2500)
+  }, [tokenAddress])
+
+  return (
+    <Row className={styles.wrapper}>
+      <Box className={styles.container}>
+        <Box className={styles.container}>
+          <Column gap="20">
+            <Column gap="4">
+              <Text.Body className={styles.inputLabel}>Token Address:</Text.Body>
+              <input
+                className={styles.inputContainer}
+                value={tokenAddress}
+                onChange={(e) => setTokenAddress(e.target.value)}
+              />
+            </Column>
+
+            <SecondaryButton onClick={checkSafety}>Check Safety</SecondaryButton>
+            {isLoading && (
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: `
+                    <iframe src="https://giphy.com/embed/rHA6zm9rRSauk" width="480" height="478" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
+                    <p><a href="https://giphy.com/gifs/naruto-manga-rHA6zm9rRSauk">via GIPHY</a></p>
+                  `,
+                }}
+              />
+            )}
+            {error && <Text.Body className={styles.errorContainer}>{error}</Text.Body>}
+            {checkResult && <Text.Body>Check Result: {checkResult}</Text.Body>}
+            {checkResult === 'Fail' && (
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: `
+                    <iframe src="https://giphy.com/embed/EuIPQm73w0BlpLXGq2" width="480" height="360" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
+                    <p><a href="https://giphy.com/gifs/art-typography-alphabet-EuIPQm73w0BlpLXGq2">via GIPHY</a></p>
+                  `,
+                }}
+              />
+            )}
+            {liquidityLockDuration !== null && (
+              <Text.Body>
+                Liquidity Lock Duration:
+                <b> {liquidityLockDuration} days</b>
+              </Text.Body>
+            )}
+            {maxHolders !== null && <Text.Body>Maximum Number of Holders: {maxHolders}</Text.Body>}
+            {maxTransactionAmount !== null && (
+              <Text.Body>
+                Maximum Transaction Amount:
+                <b> {maxTransactionAmount}</b>
+              </Text.Body>
+            )}
+            {hiddenMintFunctions !== null && (
+              <Text.Body>
+                Hidden Mint Functions:
+                <b> {hiddenMintFunctions ? 'Yes' : '❌No'}</b>
+              </Text.Body>
+            )}
+            {permissionsAndLimitations !== null && (
+              <Text.Body>
+                Permissions and Limitations:
+                <b> {permissionsAndLimitations}</b>
+              </Text.Body>
+            )}
+          </Column>
+        </Box>
+      </Box>
+    </Row>
+  )
+}

frontend/src/pages/Screen/style.css.ts

@@ -0,0 +1,80 @@
+import { style } from '@vanilla-extract/css'
+import { sprinkles } from 'src/theme/css/sprinkles.css'
+
+export const wrapper = style([
+  {
+    padding: '68px 0px',
+  },
+  sprinkles({
+    width: 'full',
+    justifyContent: 'center',
+  }),
+])
+
+export const container = style([
+  {
+    padding: '16px 12px 12px',
+  },
+  sprinkles({
+    maxWidth: '480',
+    width: 'full',
+    background: 'bg2',
+    borderRadius: '10',
+  }),
+])
+
+export const deployButton = style([
+  {
+    ':disabled': {
+      opacity: '0.5',
+    },
+  },
+  sprinkles({
+    fontSize: '24',
+    fontWeight: 'bold',
+  }),
+])
+
+export const inputLabel = sprinkles({
+  marginLeft: '8',
+  fontWeight: 'medium',
+})
+
+export const errorContainer = sprinkles({
+  paddingX: '8',
+  paddingTop: '4',
+  color: 'error',
+})
+
+export const inputContainer = sprinkles({
+  display: 'flex',
+  alignItems: 'center',
+  borderRadius: '10',
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  overflow: 'hidden',
+  padding: '12',
+  fontSize: '16',
+  color: 'white',
+  borderColor: {
+    default: 'border1',
+    hover: 'accent',
+  },
+  gap: '8',
+  transitionDuration: '125',
+  backgroundColor: 'bg1',
+})
+
+export const input = sprinkles({
+  fontSize: '16',
+  position: 'relative',
+  whiteSpace: 'nowrap',
+  outline: 'none',
+  color: {
+    default: 'text1',
+    placeholder: 'text2',
+  },
+  background: 'none',
+  border: 'none',
+  width: 'full',
+})