Add pool identifier to admin form

common/errors.ts

@@ -61,6 +61,10 @@ export const NATIVE_ERRORS: ErrorCode[] = [
     message:
       'Insufficient funds. User does not have enough balance of token to complete the transaction',
   },
+  {
+    code: '0',
+    message: 'Address already in use',
+  },
   // token program errors
   {
     code: '0x1',

components/Admin.tsx

@@ -54,7 +54,7 @@ function Admin() {
           defer
           data-domain="stake.cardinal.so"
           src="https://plausible.io/js/plausible.js"
-        ></script>
+        />
       </Head>
 
       <HeaderSlim />

components/StakePoolForm.tsx

@@ -15,6 +15,7 @@ import { tryFormatInput, tryParseInput } from 'common/units'
 import { tryPublicKey } from 'common/utils'
 import { asWallet } from 'common/Wallets'
 import { useFormik } from 'formik'
+import { validPoolIdentifier } from 'handlers/useHandleCreatePool'
 import { useEnvironmentCtx } from 'providers/EnvironmentProvider'
 import { useMemo, useState } from 'react'
 import type { Account, Mint } from 'spl-token-v3'
@@ -25,6 +26,13 @@ export const publicKeyValidationTest = (value: string | undefined): boolean => {
   return tryPublicKey(value) ? true : false
 }
 
+export const optionalPublicKeyValidationTest = (
+  value: string | undefined
+): boolean => {
+  if (!value || value.length === 0) return true
+  return publicKeyValidationTest(value)
+}
+
 export const bnValidationTest = (value: string | undefined): boolean => {
   if (value === undefined) return false
   try {
@@ -38,7 +46,11 @@ export const bnValidationTest = (value: string | undefined): boolean => {
 }
 
 const creationFormSchema = Yup.object({
-  // overlayText: Yup.string(),
+  identifier: Yup.string().test(
+    'url-safe',
+    'Invalid identifier',
+    (value: string | undefined) => validPoolIdentifier(value ?? '')
+  ),
   requireCollections: Yup.array()
     .of(
       Yup.string().test(
@@ -68,7 +80,7 @@ const creationFormSchema = Yup.object({
   rewardMintAddress: Yup.string().test(
     'is-public-key',
     'Invalid reward mint address',
-    publicKeyValidationTest
+    optionalPublicKeyValidationTest
   ),
   rewardAmount: Yup.string()
     .optional()
@@ -107,7 +119,7 @@ export function StakePoolForm({
   const { connection } = useEnvironmentCtx()
   const wallet = useWallet()
   const initialValues: CreationForm = {
-    // overlayText: stakePoolData?.parsed.overlayText ?? 'STAKED',
+    identifier: stakePoolData?.parsed?.identifier ?? undefined,
     requireCollections: (stakePoolData?.parsed?.allowedCollections ?? []).map(
       (pk) => pk.toString()
     ),
@@ -237,22 +249,24 @@ export function StakePoolForm({
 
   return (
     <form className="w-full max-w-lg">
-      {/* <div className="-mx-3 flex flex-wrap">
+      <div className="-mx-3 flex flex-wrap">
         <div className="mb-6 mt-4 w-full px-3 md:mb-0">
           <FormFieldTitleInput
-            title={'Overlay Text'}
-            description={'Text to display over the receipt'}
+            title={'Pool ID (cannot contain spaces)'}
+            description={'This will be used in the URL'}
           />
-          <input
+          <FormInput
             className="mb-3 block w-full appearance-none rounded border border-gray-500 bg-gray-700 py-3 px-4 leading-tight text-gray-200 placeholder-gray-500 focus:bg-gray-800 focus:outline-none"
             type="text"
-            placeholder={'STAKED'}
-            name="overlayText"
-            value={values.overlayText}
+            placeholder={'Pool ID'}
+            name="identifier"
+            disabled={type === 'update'}
+            value={values.identifier}
+            error={!!errors.identifier}
             onChange={handleChange}
           />
         </div>
-      </div> */}
+      </div>
       <div className="-mx-3 flex flex-wrap">
         <div className="mb-6 mt-4 w-full px-3 md:mb-0">
           <FormFieldTitleInput

components/StakedTokens.tsx

@@ -162,16 +162,9 @@ export const StakedTokens = () => {
         <div className="flex gap-5">
           <Tooltip title={'Unstake will automatically claim reward for you.'}>
             <button
-              onClick={() => {
-                if (stakedSelected.length === 0) {
-                  notify({
-                    message: `No tokens selected`,
-                    type: 'error',
-                  })
-                } else {
-                  handleUnstake.mutate({ tokenDatas: stakedSelected })
-                }
-              }}
+              onClick={() =>
+                handleUnstake.mutate({ tokenDatas: stakedSelected })
+              }
               style={{
                 background:
                   stakePoolMetadata?.colors?.secondary || defaultSecondaryColor,

components/UnstakedTokens.tsx

@@ -255,19 +255,12 @@ export const UnstakedTokens = () => {
         <div className="flex gap-5">
           <Tooltip title="Click on tokens to select them">
             <button
-              onClick={() => {
-                if (unstakedSelected.length === 0) {
-                  notify({
-                    message: `No tokens selected`,
-                    type: 'error',
-                  })
-                } else {
-                  handleStake.mutate({
-                    tokenDatas: unstakedSelected,
-                    receiptType,
-                  })
-                }
-              }}
+              onClick={() =>
+                handleStake.mutate({
+                  tokenDatas: unstakedSelected,
+                  receiptType,
+                })
+              }
               style={{
                 background:
                   stakePoolMetadata?.colors?.secondary || defaultSecondaryColor,

handlers/useHandleCreatePool.ts

@@ -19,6 +19,9 @@ import { useMutation } from 'react-query'
 import { useStakePoolData } from '../hooks/useStakePoolData'
 import { useEnvironmentCtx } from '../providers/EnvironmentProvider'
 
+export const validPoolIdentifier = (value: string) =>
+  /^[a-zA-Z0-9_-]*$/.test(value)
+
 export const useHandleCreatePool = () => {
   const wallet = asWallet(useWallet())
   const { connection } = useEnvironmentCtx()
@@ -85,7 +88,9 @@ export const useHandleCreatePool = () => {
 
       const transaction = new Transaction()
       const program = rewardsCenterProgram(connection, wallet)
-      const identifier = `pool-name-${Math.random()}`
+      const identifier = values.identifier ?? ''
+      if (!validPoolIdentifier(identifier)) throw 'Invalid pool ID'
+
       const stakePoolId = findStakePoolId(identifier)
       const ix = await program.methods
         .initPool({

handlers/useHandleUnstake.ts

@@ -31,6 +31,7 @@ export const useHandleUnstake = (callback?: () => void) => {
     }): Promise<string[]> => {
       if (!stakePoolId) throw 'Stake pool not found'
       if (!stakePool || !stakePool.parsed) throw 'Stake pool not found'
+      if (tokenDatas.length <= 0) throw 'No tokens selected'
 
       const ataTx = new Transaction()
       if (rewardDistributorData.data && rewardDistributorData.data.parsed) {