Improved sidebar form settings

Added google analytics script
Minor fixes related to the Dockerfile and UI

.gitlab-ci.yml

@@ -0,0 +1,64 @@
+image: docker:latest
+services:
+  - docker:dind
+
+stages:
+  - build_docker
+  - deploy
+
+variables:
+  DOCKER_HOST: "tcp://docker:2375"
+  DOCKER_TLS_CERTDIR: ""
+  DOCKER_DRIVER: overlay2
+  RESTART_ONLY:
+    value: "false"
+    description: "Change to 'true' if you want to restart application only."
+
+.update_env_only_exceptions:
+  only:
+    variables:
+      - $RESTART_ONLY != 'true'
+
+.docker-build:
+  image: bentolor/docker-dind-awscli
+  stage: build_docker
+  tags:
+    - docker
+  environment:
+    name: ${CI_COMMIT_REF_NAME}
+  script:
+    - cp "$DOCKER_ENV_VARIABLES" ./.env.local
+    - docker build -t $DOCKER_REGISTRY:$DOCKER_TAG .
+    - aws ecr get-login-password | docker login --username AWS --password-stdin $DOCKER_REGISTRY
+    - docker push $DOCKER_REGISTRY:$DOCKER_TAG
+
+.deploy:
+  image: registry.gitlab.com/gitlab-org/cloud-deploy/aws-base:latest
+  stage: deploy
+  tags:
+    - docker
+  environment:
+    name: ${CI_COMMIT_REF_NAME}
+  script:
+    - echo "sciagam i porownuje zmienne srodowiskowe"
+    - cp "$DOCKER_ENV_VARIABLES" ./local_$ECS_SERVICE.env
+    - aws s3 cp s3://$AWS_DOCKER_ENV_VARIABLES_BUCKET/$ECS_SERVICE/.env aws_$ECS_SERVICE.env || touch aws_$ECS_SERVICE.env
+    - cmp -s local_$ECS_SERVICE.env aws_$ECS_SERVICE.env || aws s3 cp local_$ECS_SERVICE.env s3://$AWS_DOCKER_ENV_VARIABLES_BUCKET/$ECS_SERVICE/.env
+    - aws ecs update-service --cluster $ECS_CLUSTER --service $ECS_SERVICE --force-new-deployment
+
+docker-build:
+  extends:
+    - .update_env_only_exceptions
+    - .docker-build
+  only:
+    refs:
+      - develop
+      - master
+
+deploy:
+  extends:
+    - .deploy
+  only:
+    refs:
+      - develop
+      - master

Dockerfile

@@ -1,7 +1,8 @@
 FROM node:20-alpine AS base
 WORKDIR /app
 COPY . .
-RUN npm i
+RUN npm install -g pnpm
+RUN pnpm i
 
 EXPOSE 3000
 

next.config.mjs

@@ -22,6 +22,7 @@ const nextConfig = {
       },
       {
         test: /\.svg$/i,
+        issuer: /.[jt]sx?$/,
         resourceQuery: { not: /url/ }, // exclude if *.svg?url
         use: ['@svgr/webpack']
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "smart-beaver-wizard",
-  "version": "0.1.0",
+  "version": "0.2.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.3",
+    "ink-generator": "^0.3.5",
     "next": "14.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/analitics/GoogleTagManager.tsx

@@ -0,0 +1,37 @@
+'use client';
+import Script from 'next/script';
+import { env } from '@/env/env.mjs';
+
+const GoogleTagManager: React.FC = () => {
+  if (env.NEXT_PUBLIC_ENVIRONMENT !== 'production') {
+    return null;
+  }
+
+  return (
+    <>
+      <noscript>
+        <iframe
+          src={`https://www.googletagmanager.com/ns.html?id=${env.NEXT_PUBLIC_GA_ID}`}
+          height="0"
+          width="0"
+          style={{ display: 'none', visibility: 'hidden' }}
+        />
+      </noscript>
+      <Script
+        id="gtm-script"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+        
+          gtag('config', '${env.NEXT_PUBLIC_GA_ID}');
+  `
+        }}
+      />
+    </>
+  );
+};
+
+export default GoogleTagManager;

src/components/data-entry/CheckboxChip.tsx

@@ -6,9 +6,10 @@ import { dictionary } from '@/libs/en';
 interface CheckboxChipProps {
   label: string;
   name: string;
+  disabled?: boolean;
 }
 
-export function CheckboxChip({ label, name }: CheckboxChipProps) {
+export function CheckboxChip({ label, name, disabled }: CheckboxChipProps) {
   const { register } = useFormContext();
 
   const {
@@ -18,10 +19,12 @@ export function CheckboxChip({ label, name }: CheckboxChipProps) {
 
   return (
     <div>
-      <input type="checkbox" id={id} {...register(name)} className="peer hidden" />
+      <input type="checkbox" id={id} {...register(name)} className="peer hidden" disabled={disabled} />
       <label
         htmlFor={id}
-        className="bg-transparent inline-flex cursor-pointer items-center justify-between rounded-full border border-teal-500 p-1.5 text-teal-500 hover:bg-teal-900 hover:text-teal-500 peer-checked:border-teal-500 peer-checked:bg-teal-500 peer-checked:text-teal-950 peer-checked:hover:bg-teal-600 peer-checked:hover:text-teal-950"
+        className={`bg-transparent inline-flex cursor-pointer items-center justify-between rounded-full border border-teal-500 p-1.5 text-teal-500 hover:bg-teal-900 hover:text-teal-500 peer-checked:border-teal-500 peer-checked:bg-teal-500 peer-checked:text-teal-950 peer-checked:hover:bg-teal-600 peer-checked:hover:text-teal-950 ${
+          disabled && 'opacity-50'
+        }`}
       >
         <div className="block">
           <div className="text-sm font-semibold">{label}</div>

src/components/data-entry/Switch.tsx

@@ -0,0 +1,53 @@
+import { Switch as HeadlessSwitch } from '@headlessui/react';
+import { useController } from 'react-hook-form';
+import { ErrorMessageForm } from '@/components/data-entry/ErrorMessageForm';
+import { dictionary } from '@/libs/en';
+import { cn } from '@/utils/helpers/cn';
+
+interface SwitchProps {
+  label?: string;
+  name: string;
+  disabled?: boolean;
+}
+
+export default function Switch({ name, label, disabled }: SwitchProps) {
+  const {
+    fieldState: { error },
+    field: { onChange, ...restField }
+  } = useController({ name });
+
+  return (
+    <>
+      <HeadlessSwitch.Group as="div" className="items-left flex gap-8 py-6">
+        <HeadlessSwitch
+          {...restField}
+          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'
+          )}
+        >
+          <span
+            aria-hidden="true"
+            className={cn(
+              'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
+              restField.value ? 'translate-x-5' : 'translate-x-0'
+            )}
+          />
+        </HeadlessSwitch>
+        {label && (
+          <HeadlessSwitch.Label as="div">
+            <div className="font-medium text-teal-600">{label}</div>
+          </HeadlessSwitch.Label>
+        )}
+      </HeadlessSwitch.Group>
+      {error && (
+        <ErrorMessageForm errorMessage={error.message ? error.message : dictionary.validation.defaultErrorMsg} />
+      )}
+    </>
+  );
+}

src/components/homepage/code-editor/CodeEditorTabs.tsx

@@ -52,7 +52,7 @@ export default function CodeEditorTabs({ activeTab, handleActiveTab, wasmFileDat
         </select>
       </div>
       <div className="hidden xl:block">
-        <nav className="divide-gray-200 isolate flex rounded-lg" aria-label="Tabs">
+        <nav className="isolate flex rounded-lg" aria-label="Tabs">
           {wasmFileData.map((tab, tabIndex) => (
             <button
               key={tabIndex}
@@ -66,14 +66,10 @@ export default function CodeEditorTabs({ activeTab, handleActiveTab, wasmFileDat
                 tabIndex > 0 ? 'border-l' : '',
                 tabIndex === 0 ? 'rounded-tl-lg' : '',
                 tabIndex === wasmFileData.length - 1 ? 'rounded-tr-lg' : '',
-                'hover:bg-gray-50 group relative min-w-0 flex-1 cursor-pointer overflow-hidden border-b px-4 py-4 text-center text-sm font-medium transition duration-300 focus:z-10'
+                'group relative min-w-0 flex-1 cursor-pointer overflow-hidden border-b px-4 py-4 text-center text-sm font-medium transition duration-300 focus:z-10'
               )}
             >
               <span>{tab.name}</span>
-              <span
-                aria-hidden="true"
-                className={cn(tab.name ? 'bg-indigo-500' : 'bg-transparent', 'absolute inset-x-0 bottom-0 h-0.5')}
-              />
             </button>
           ))}
         </nav>

src/components/homepage/sidebar-form/SidebarForm.tsx

@@ -3,11 +3,11 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import debounce from 'debounce';
 import { FormProvider, useForm } from 'react-hook-form';
 import { z } from 'zod';
+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 NotAvailable from '@/components/homepage/sidebar-form/form-sections/NotAvailable';
 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';
@@ -17,7 +17,7 @@ import { dictionary } from '@/libs/en';
 export type SidebarFormSchema = z.infer<typeof schema>;
 
 const schema = z.object({
-  standard: z.enum([STANDARDS.PSP22, STANDARDS.PSP37, STANDARDS.PSP34]),
+  standard: z.enum([STANDARDS.PSP22, STANDARDS.PSP34]),
   name: z.string(),
   symbol: z.string(),
   decimals: z
@@ -27,9 +27,11 @@ const schema = z.object({
   mintable: z.boolean(),
   burnable: z.boolean(),
   pausable: z.boolean(),
+  enumerable: z.boolean().optional(),
   capped: z.boolean(),
   accessControl: z.union([z.literal('security/ownable'), z.literal('security/control'), z.string().optional()]),
-  license: z.string()
+  license: z.string(),
+  isSingleCodeGenerationModeActive: z.boolean()
 });
 
 const defaultValues: SidebarFormSchema = {
@@ -39,10 +41,12 @@ const defaultValues: SidebarFormSchema = {
   decimals: 0,
   mintable: false,
   burnable: false,
+  enumerable: false,
   pausable: false,
   capped: false,
   accessControl: '',
-  license: ''
+  license: '',
+  isSingleCodeGenerationModeActive: false
 };
 
 export default function SidebarForm() {
@@ -53,11 +57,22 @@ export default function SidebarForm() {
   });
 
   const onSubmit = useSidebarFormSubmit();
-  const { handleSubmit, watch } = methods;
+  const { handleSubmit, watch, reset } = methods;
   const watchedValues = watch();
   const onSubmitHandler = handleSubmit(onSubmit);
   const debouncedSubmit = debounce(onSubmitHandler, env.NEXT_PUBLIC_DEBOUNCE_INTERVAL_IN_MS);
 
+  const choosenStandard = watchedValues.standard;
+
+  // reset form after standard change but keep the standard value
+
+  useEffect(() => {
+    reset({
+      ...defaultValues,
+      standard: watchedValues.standard
+    });
+  }, [choosenStandard]);
+
   // initial data fetch form
   useEffect(() => {
     onSubmit(watchedValues).catch((err) => {
@@ -81,17 +96,13 @@ export default function SidebarForm() {
         <h2 className="pb-6">{dictionary.sidebarForm.selectStandard}</h2>
         <form onSubmit={handleSubmit(onSubmit)}>
           <Standard />
+          <h2 className="py-6">{dictionary.sidebarForm.sections.singleFile.title}</h2>
+          <Switch name="isSingleCodeGenerationModeActive" disabled={choosenStandard === 'PSP34'} />
           <h2 className="py-6">{dictionary.sidebarForm.configure}</h2>
-          {watchedValues.standard === STANDARDS.PSP22 ? (
-            <>
-              <Metadata />
-              <Features />
-              <AccessControl />
-              <License />
-            </>
-          ) : (
-            <NotAvailable />
-          )}
+          <Metadata choosenStandard={choosenStandard} />
+          <Features choosenStandard={choosenStandard} />
+          <AccessControl choosenStandard={choosenStandard} />
+          <License />
         </form>
       </FormProvider>
     </div>

src/components/homepage/sidebar-form/form-sections/AccessControl.tsx

@@ -2,9 +2,14 @@ import { useFormContext } from 'react-hook-form';
 import { Radio } from '@/components/data-entry/radio/Radio';
 import ExpandableFilterContainer from '@/components/homepage/sidebar-form/ExpandableFilterContainer';
 import { ACCESS_CONTROL } from '@/components/homepage/sidebar-form/formConstants';
+import type { PSPUnion } from '@/components/homepage/sidebar-form/formConstants';
 import { dictionary } from '@/libs/en';
 
-export default function AccessControl() {
+interface AccessControlProps {
+  choosenStandard: PSPUnion;
+}
+
+export default function AccessControl({ choosenStandard }: AccessControlProps) {
   const { resetField } = useFormContext();
 
   const handleResetAccessControlSection = () => {
@@ -17,7 +22,7 @@ export default function AccessControl() {
       onReset={handleResetAccessControlSection}
     >
       <div className="pt-3">
-        <Radio options={ACCESS_CONTROL} name="accessControl" className="flex-col" />
+        <Radio options={ACCESS_CONTROL[choosenStandard]} name="accessControl" className="flex-col" />
       </div>
     </ExpandableFilterContainer>
   );