feat : token details form (#272)

issue: #242

packages/core/src/utils/contract.ts

@@ -1,4 +1,4 @@
-import { Call, CallData, constants, hash, ProviderInterface, selector } from 'starknet'
+import { Call, CallData, constants, hash, ProviderInterface } from 'starknet'
 
 import { Entrypoint, MULTICALL_ADDRESSES } from '../constants'
 

packages/frontend/src/pages/Token/Communities.tsx

@@ -0,0 +1,83 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useCallback } from 'react'
+import { useForm } from 'react-hook-form'
+import { PrimaryButton } from 'src/components/Button'
+import Input from 'src/components/Input'
+import Box from 'src/theme/components/Box'
+import { Column } from 'src/theme/components/Flex'
+import * as Text from 'src/theme/components/Text'
+import { z } from 'zod'
+
+import * as styles from './style.css'
+
+// zod schemes
+const schema = z.object({
+  website: z.string().url().optional(),
+  telegram: z.string().regex(/^https?:\/\/(t\.me|telegram\.me)\/[a-zA-Z0-9_]{5,}$/),
+  twitter: z.string().regex(/^https?:\/\/(twitter\.com|x\.com)\/[a-zA-Z0-9_]{1,15}$/),
+  discord: z.string().regex(/^https?:\/\/(discord\.gg|discord\.com\/invite)\/[a-zA-Z0-9-]+$/),
+})
+
+export default function Communities() {
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+  } = useForm<z.infer<typeof schema>>({
+    resolver: zodResolver(schema),
+  })
+
+  const setCommunities = useCallback(async (data: z.infer<typeof schema>) => {
+    console.log('data: ', data)
+  }, [])
+
+  return (
+    <Column gap="32">
+      <Text.HeadlineLarge>Website and Communities</Text.HeadlineLarge>
+      <Column as="form" onSubmit={handleSubmit(setCommunities)} gap="24">
+        <Column gap="8">
+          <Text.Body className={styles.inputLabel}>Website</Text.Body>
+
+          <Input placeholder="https://unruggable.meme" {...register('website')} />
+
+          <Box className={styles.errorContainer}>
+            {errors.website?.message ? <Text.Error>{errors.website.message}</Text.Error> : null}
+          </Box>
+        </Column>
+
+        <Column gap="8">
+          <Text.Body className={styles.inputLabel}>Telegram</Text.Body>
+
+          <Input placeholder="https://t.me/unruggable" {...register('telegram')} />
+
+          <Box className={styles.errorContainer}>
+            {errors.telegram?.message ? <Text.Error>{errors.telegram.message}</Text.Error> : null}
+          </Box>
+        </Column>
+
+        <Column gap="8">
+          <Text.Body className={styles.inputLabel}>Twitter / X</Text.Body>
+
+          <Input placeholder="https://x.com/unruggable" {...register('twitter')} />
+
+          <Box className={styles.errorContainer}>
+            {errors.twitter?.message ? <Text.Error>{errors.twitter.message}</Text.Error> : null}
+          </Box>
+        </Column>
+
+        <Column gap="8">
+          <Text.Body className={styles.inputLabel}>Discord</Text.Body>
+
+          <Input placeholder="https://discord.gg/unruggable" {...register('discord')} />
+
+          <Box className={styles.errorContainer}>
+            {errors.discord?.message ? <Text.Error>{errors.discord.message}</Text.Error> : null}
+          </Box>
+        </Column>
+
+        <PrimaryButton type="submit">Submit</PrimaryButton>
+      </Column>
+    </Column>
+  )
+}

packages/frontend/src/pages/Token/LaunchForm/Confirm/template.tsx

@@ -112,8 +112,8 @@ export default function LaunchTemplate({ liquidityPrice, teamAllocationPrice, pr
           loading
             ? 'Loading...'
             : hasEnoughQuoteTokenBalance
-            ? `Launch on ${amm}`
-            : `Insufficient ${quoteToken.symbol} balance`
+              ? `Launch on ${amm}`
+              : `Insufficient ${quoteToken.symbol} balance`
         }
         onNext={next}
         disableNext={loading || !hasEnoughQuoteTokenBalance}

packages/frontend/src/pages/Token/index.tsx

@@ -12,6 +12,7 @@ import * as Text from 'src/theme/components/Text'
 import { vars } from 'src/theme/css/sprinkles.css'
 
 import CollectFees from './CollectFees'
+import Communities from './Communities'
 import IncreaseLiquidityLock from './IncreaseLiquidityLock'
 import AMMForm from './LaunchForm/AMM'
 import ConfirmForm from './LaunchForm/Confirm'
@@ -79,6 +80,12 @@ export default function TokenPage() {
               {onlyVisibleToYou}
             </Column>
           )}
+
+          <Column className={styles.container}>
+            {/**Add token community details */}
+            <Communities />
+            {onlyVisibleToYou}
+          </Column>
         </>
       )
     } else if (memecoin.isOwner) {

packages/frontend/src/pages/Token/style.css.ts

@@ -58,3 +58,8 @@ export const dropdownRow = style([
     },
   }),
 ])
+
+export const inputLabel = sprinkles({
+  marginLeft: '8',
+  fontWeight: 'medium',
+})

packages/tg-bot/src/utils/constants.ts

@@ -1 +1 @@
-export const PERCENTAGE_INPUT_PRECISION = 2
+export const PERCENTAGE_INPUT_PRECISION = 2