Show whether market is unlisted

web/components/contract/contract-info-dialog.tsx

@@ -40,8 +40,9 @@ export function ContractInfoDialog(props: {
   const isAdmin = useAdmin()
   const isCreator = user?.id === contract.creatorId
   const isUnlisted = contract.visibility === 'unlisted'
-  const wasUnlistedByCreator =
-    contract.unlistedById && contract.unlistedById === contract.creatorId
+  const wasUnlistedByCreator = contract.unlistedById
+    ? contract.unlistedById === contract.creatorId
+    : true
 
   const formatTime = (dt: number) => dayjs(dt).format('MMM DD, YYYY hh:mm a')
 
@@ -173,23 +174,25 @@ export function ContractInfoDialog(props: {
                   <td>[ADMIN] Featured</td>
                   <td>
                     <ShortToggle
-                      enabled={featured}
-                      setEnabled={setFeatured}
+                      on={featured}
+                      setOn={setFeatured}
                       onChange={onFeaturedToggle}
                     />
                   </td>
                 </tr>
               )}
-              {user &&
-                (isAdmin ||
-                  (isCreator &&
-                    (isUnlisted ? wasUnlistedByCreator : true))) && (
+              {user && (
                 <tr>
                   <td>{isAdmin ? '[ADMIN]' : ''} Unlisted</td>
                   <td>
                     <ShortToggle
-                        enabled={contract.visibility === 'unlisted'}
-                        setEnabled={(b) =>
+                      disabled={
+                        isUnlisted
+                          ? !(isAdmin || (isCreator && wasUnlistedByCreator))
+                          : !(isCreator || isAdmin)
+                      }
+                      on={contract.visibility === 'unlisted'}
+                      setOn={(b) =>
                         updateContract(id, {
                           visibility: b ? 'unlisted' : 'public',
                           unlistedById: b ? user.id : '',

web/components/widgets/short-toggle.tsx

@@ -3,22 +3,27 @@ import { Switch } from '@headlessui/react'
 import clsx from 'clsx'
 
 export default function ShortToggle(props: {
-  enabled: boolean
-  setEnabled: (enabled: boolean) => void
+  on: boolean
+  setOn: (enabled: boolean) => void
+  disabled?: boolean
   onChange?: (enabled: boolean) => void
 }) {
-  const { enabled, setEnabled } = props
+  const { on, setOn, disabled } = props
 
   return (
     <Switch
-      checked={enabled}
+      disabled={disabled}
+      checked={on}
       onChange={(e: boolean) => {
-        setEnabled(e)
+        setOn(e)
         if (props.onChange) {
           props.onChange(e)
         }
       }}
-      className="group relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+      className={clsx(
+        'group relative inline-flex h-5 w-10 flex-shrink-0 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2',
+        !disabled ? 'cursor-pointer' : 'cursor-not-allowed opacity-50'
+      )}
     >
       <span className="sr-only">Use setting</span>
       <span
@@ -28,14 +33,14 @@ export default function ShortToggle(props: {
       <span
         aria-hidden="true"
         className={clsx(
-          enabled ? 'bg-indigo-600' : 'bg-gray-200',
+          on ? 'bg-indigo-600' : 'bg-gray-200',
           'pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out'
         )}
       />
       <span
         aria-hidden="true"
         className={clsx(
-          enabled ? 'translate-x-5' : 'translate-x-0',
+          on ? 'translate-x-5' : 'translate-x-0',
           'pointer-events-none absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow ring-0 transition-transform duration-200 ease-in-out'
         )}
       />