Enabled PSP34 extensions on the UI

Disabled work in progress modal when switching to the PSP34 standard bumped ink generator version to 0.3.8 Signed-off-by: Maciek Malik <[email protected]>
Smart-Beaver · Feb 29, 2024 · 5864a3e · 5864a3e
1 parent 6e433f1
commit 5864a3e
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 88 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "smart-beaver-wizard",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": true,
   "husky": {
     "hooks": {
@@ -33,7 +33,7 @@
     "debounce": "^2.0.0",
     "highlight.js": "^11.9.0",
     "husky": "^8.0.3",
-    "ink-generator": "^0.3.5",
+    "ink-generator": "0.3.8",
     "next": "14.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/data-entry/Switch.tsx b/src/components/data-entry/Switch.tsx
@@ -10,7 +10,7 @@ interface SwitchProps {
   disabled?: boolean;
 }
 
-export default function Switch({ name, label, disabled }: SwitchProps) {
+export default function Switch({ name, label }: SwitchProps) {
   const {
     fieldState: { error },
     field: { onChange, ...restField }
@@ -24,11 +24,9 @@ export default function Switch({ name, label, disabled }: SwitchProps) {
           onChange={(e) => {
             onChange(e);
           }}
-          disabled={disabled}
           className={cn(
             'border-transparent relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-teal-700 focus:ring-offset-2 ',
-            restField.value ? 'bg-teal-600' : 'bg-transparent',
-            disabled && 'opacity-50'
+            restField.value ? 'bg-teal-600' : 'bg-transparent'
           )}
         >
           <span

diff --git a/src/components/homepage/sidebar-form/SidebarForm.tsx b/src/components/homepage/sidebar-form/SidebarForm.tsx
@@ -7,7 +7,7 @@ import Switch from '@/components/data-entry/Switch';
 import AccessControl from '@/components/homepage/sidebar-form/form-sections/AccessControl';
 import Features from '@/components/homepage/sidebar-form/form-sections/Features';
 import License from '@/components/homepage/sidebar-form/form-sections/License';
-import Metadata from '@/components/homepage/sidebar-form/form-sections/Metadata';
+import MetadataPSP22 from '@/components/homepage/sidebar-form/form-sections/MetadataPSP22';
 import Standard from '@/components/homepage/sidebar-form/form-sections/Standard';
 import { STANDARDS } from '@/components/homepage/sidebar-form/formConstants';
 import useSidebarFormSubmit from '@/components/homepage/sidebar-form/useSidebarFormSubmit';
@@ -23,10 +23,12 @@ const schema = z.object({
   decimals: z
     .number()
     .min(0, { message: dictionary.sidebarForm.sections.metadata.decimals.validation.decimalNumberTooLow })
-    .max(18, { message: dictionary.sidebarForm.sections.metadata.decimals.validation.decimalNumberTooHigh }),
+    .max(18, { message: dictionary.sidebarForm.sections.metadata.decimals.validation.decimalNumberTooHigh })
+    .or(z.null()),
   mintable: z.boolean(),
   burnable: z.boolean(),
   pausable: z.boolean(),
+  metadata: z.boolean(),
   enumerable: z.boolean().optional(),
   capped: z.boolean(),
   accessControl: z.union([z.literal('security/ownable'), z.literal('security/control'), z.string().optional()]),
@@ -38,12 +40,13 @@ const defaultValues: SidebarFormSchema = {
   standard: STANDARDS.PSP22,
   name: '',
   symbol: '',
-  decimals: 0,
+  decimals: null,
   mintable: false,
   burnable: false,
   enumerable: false,
   pausable: false,
   capped: false,
+  metadata: false,
   accessControl: '',
   license: '',
   isSingleCodeGenerationModeActive: false
@@ -97,9 +100,9 @@ export default function SidebarForm() {
         <form onSubmit={handleSubmit(onSubmit)}>
           <Standard />
           <h2 className="py-6">{dictionary.sidebarForm.sections.singleFile.title}</h2>
-          <Switch name="isSingleCodeGenerationModeActive" disabled={choosenStandard === 'PSP34'} />
+          <Switch name="isSingleCodeGenerationModeActive" />
           <h2 className="py-6">{dictionary.sidebarForm.configure}</h2>
-          <Metadata choosenStandard={choosenStandard} />
+          {choosenStandard === 'PSP22' && <MetadataPSP22 />}
           <Features choosenStandard={choosenStandard} />
           <AccessControl choosenStandard={choosenStandard} />
           <License />

diff --git a/src/components/homepage/sidebar-form/form-sections/MetadataPSP22.tsx b/src/components/homepage/sidebar-form/form-sections/MetadataPSP22.tsx
@@ -0,0 +1,35 @@
+import { useFormContext } from 'react-hook-form';
+import { Input } from '@/components/data-entry/Input';
+import ExpandableFilterContainer from '@/components/homepage/sidebar-form/ExpandableFilterContainer';
+import BeaverMemo from '@/components/homepage/sidebar-form/form-sections/BeaverMemo';
+import { METADATA22 } from '@/components/homepage/sidebar-form/formConstants';
+import { dictionary } from '@/libs/en';
+
+export default function MetadataPSP22() {
+  const { resetField } = useFormContext();
+
+  const handleResetMetadataSection = () => {
+    METADATA22.forEach(({ name }) => {
+      resetField(name);
+    });
+  };
+
+  return (
+    <ExpandableFilterContainer
+      name={dictionary.sidebarForm.sections.metadata.title}
+      onReset={handleResetMetadataSection}
+    >
+      <BeaverMemo />
+      {METADATA22.map(({ label, name, placeholder, inputType, disabled }) => (
+        <Input
+          key={name}
+          label={label}
+          name={name}
+          placeholder={placeholder}
+          inputType={inputType}
+          disabled={disabled}
+        />
+      ))}
+    </ExpandableFilterContainer>
+  );
+}
diff --git a/src/components/homepage/sidebar-form/form-sections/Standard.tsx b/src/components/homepage/sidebar-form/form-sections/Standard.tsx
@@ -1,35 +1,12 @@
-import { useEffect, useState } from 'react';
-import { useWatch } from 'react-hook-form';
 import { Radio } from '@/components/data-entry/radio/Radio';
-import PSP34DisclaimerModal from '@/components/homepage/sidebar-form/form-sections/PSP34DisclaimerModal';
-import type { PSPUnion } from '@/components/homepage/sidebar-form/formConstants';
 import { SUPPORTED_STANDARDS } from '@/components/homepage/sidebar-form/formConstants';
 
-interface FormValues {
-  standard: PSPUnion;
-}
-
 export function Standard() {
-  const [open, setOpen] = useState(false);
-  const standardButton: PSPUnion = useWatch<FormValues>({
-    name: 'standard'
-  });
-
-  useEffect(() => {
-    if (standardButton === 'PSP34') {
-      setOpen(true);
-    } else {
-      setOpen(false);
-    }
-  }, [standardButton]);
-
   return (
     <>
       <div className="py-6">
         <Radio options={SUPPORTED_STANDARDS} name="standard" variant="minimalist" />
       </div>
-      {/* Modal is here just for a moment, it will be deleted soon (remember to REMOVE also logic here, component and dictionary) - after fixes on PSP34 */}
-      <PSP34DisclaimerModal open={open} setOpen={setOpen} />
     </>
   );
 }

diff --git a/src/components/homepage/sidebar-form/formConstants.ts b/src/components/homepage/sidebar-form/formConstants.ts
@@ -37,28 +37,6 @@ export const METADATA22 = [
   }
 ] as const;
 
-export const METADATA34 = [
-  {
-    label: dictionary.sidebarForm.sections.metadata.name.title,
-    name: 'name',
-    placeholder: dictionary.sidebarForm.sections.metadata.name.placeholder,
-    inputType: 'text',
-    disabled: true
-  },
-  {
-    label: dictionary.sidebarForm.sections.metadata.symbol.title,
-    name: 'symbol',
-    placeholder: dictionary.sidebarForm.sections.metadata.symbol.placeholder,
-    inputType: 'text',
-    disabled: true
-  }
-] as const;
-
-export const METADATA: { [key in keyof typeof STANDARDS]: typeof METADATA22 | typeof METADATA34 } = {
-  PSP22: METADATA22,
-  PSP34: METADATA34
-};
-
 export const FEATURES_OPTIONS22 = [
   { label: dictionary.sidebarForm.sections.features.mintable, name: 'mintable', disabled: false },
   { label: dictionary.sidebarForm.sections.features.burnable, name: 'burnable', disabled: false },
@@ -69,7 +47,8 @@ export const FEATURES_OPTIONS22 = [
 export const FEATURES_OPTIONS34 = [
   { label: dictionary.sidebarForm.sections.features.mintable, name: 'mintable', disabled: false },
   { label: dictionary.sidebarForm.sections.features.burnable, name: 'burnable', disabled: false },
-  { label: dictionary.sidebarForm.sections.features.enumerable, name: 'enumerable', disabled: true }
+  { label: dictionary.sidebarForm.sections.features.enumerable, name: 'enumerable', disabled: false },
+  { label: dictionary.sidebarForm.sections.features.metadata, name: 'metadata', disabled: false }
 ] as const;
 
 export const FEATURES_OPTIONS: {

diff --git a/src/components/homepage/sidebar-form/useSidebarFormSubmit.ts b/src/components/homepage/sidebar-form/useSidebarFormSubmit.ts
@@ -1,5 +1,5 @@
 import { Contract, Metadata, start } from 'ink-generator';
-import { FEATURES_OPTIONS, STANDARDS } from '@/components/homepage/sidebar-form/formConstants';
+import { FEATURES_OPTIONS } from '@/components/homepage/sidebar-form/formConstants';
 import type { SidebarFormSchema } from '@/components/homepage/sidebar-form/SidebarForm';
 import { sortWasmResults } from '@/components/homepage/sidebar-form/sortWasmResults';
 import { useWasmData } from '@/contexts/WasmDataContext';
@@ -17,36 +17,23 @@ interface FetchDataResponse {
 export default function useSidebarFormSubmit() {
   const { setWasmFileData, setWasmCodeFetchingError } = useWasmData();
 
-  // This is a workaround for the fact that the Rust code doesn't support PSP34 yet.
-  function filterExtensions(extensions: string[], standard: string): string[] {
-    if (standard === STANDARDS.PSP34) {
-      return [];
-    }
-    return extensions;
-  }
-
   return async (data: SidebarFormSchema) => {
     const { name, symbol, decimals, license, standard, accessControl, isSingleCodeGenerationModeActive } = data;
     const featureExtensions = FEATURES_OPTIONS[standard]
       .filter(({ name }) => data[name as keyof typeof data])
       .map(({ name }) => name);
 
-    const shouldIncludeMetadata = Boolean(name || symbol || Number.isFinite(decimals)) ? 'metadata' : '';
     const accessControlExtension = accessControl && accessControl !== '' ? [accessControl] : [];
-    const extensions = [...featureExtensions, ...accessControlExtension, shouldIncludeMetadata && 'metadata'];
+    const extensions = [...featureExtensions, ...accessControlExtension];
+    if (Boolean(name || symbol || Number.isFinite(decimals))) {
+      extensions.push('metadata');
+    }
 
     try {
       if (!URL) throw new Error('API base URL is not defined.');
       const result = await (async (): Promise<FetchDataResponse> => {
-        const metadata = new Metadata(name, symbol, undefined, decimals);
-        const contract = new Contract(
-          standard,
-          metadata,
-          filterExtensions(extensions, standard),
-          URL,
-          license,
-          isSingleCodeGenerationModeActive
-        );
+        const metadata = new Metadata(name, symbol, undefined, decimals ?? 0);
+        const contract = new Contract(standard, metadata, extensions, URL, license, isSingleCodeGenerationModeActive);
         return await start(contract);
       })();
 

diff --git a/src/libs/en.ts b/src/libs/en.ts
@@ -75,7 +75,8 @@ export const dictionary = {
         burnable: 'Burnable',
         pausable: 'Pausable',
         capped: 'Capped',
-        enumerable: 'Enumerable'
+        enumerable: 'Enumerable',
+        metadata: 'Metadata'
       },
       accessControl: {
         title: 'Access control',
@@ -98,12 +99,6 @@ export const dictionary = {
     },
     recommended: 'We recommend accessing the application on a desktop device.'
   },
-  //This is a part you need to delete together with psp34disclaimermodal
-  modal: {
-    title: 'Disclaimer',
-    description: "The final implementation of PSP34 is still in progress, and we'll update it when it's ready.",
-    button: 'Ok, thanks'
-  },
   errors: {
     useWasmData: 'useWasmData must be used within a WasmDataProvider',
     useSidebarFormSubmit: 'Something went wrong while generating code',