Merge pull request #14 from ar-io/PE-6279-update-start-gateway-modal-…

…form-design PE-6279: update start gateway modal form design
ar-io · Jun 13, 2024 · c91c8bd · c91c8bd
2 parents e3b3885 + 720a2de
commit c91c8bd
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 53 deletions.
diff --git a/src/components/forms/FormRow.tsx b/src/components/forms/FormRow.tsx
@@ -42,6 +42,7 @@ const FormRow = ({
   rightComponent,
   validateProperty,
   readOnly,
+  showModified = true,
 }: {
   formPropertyName: string;
   placeholder?: string;
@@ -57,6 +58,7 @@ const FormRow = ({
   rightComponent?: JSX.Element;
   validateProperty?: (value: string) => string | undefined;
   readOnly?: boolean;
+  showModified?: boolean;
 }) => {
   const roundStyle = ROUND_STYLES[rowType];
 
@@ -65,7 +67,8 @@ const FormRow = ({
 
   const value = formState[formPropertyName];
 
-  const modified = initialState && initialState[formPropertyName] !== value;
+  const modified =
+    showModified && initialState && initialState[formPropertyName] !== value;
 
   const clearFormError = () => {
     const cleared = { ...errorMessages };

diff --git a/src/components/modals/StartGatewayModal.tsx b/src/components/modals/StartGatewayModal.tsx
@@ -6,7 +6,6 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import Button, { ButtonType } from '../Button';
 import FormRow, { RowType } from '../forms/FormRow';
-import FormSwitch from '../forms/FormSwitch';
 import { FormRowDef, isFormValid } from '../forms/formData';
 import {
   validateDomainName,
@@ -26,6 +25,7 @@ const DEFAULT_FORM_STATE = {
   observerAddress: '',
   propertiesId: 'FH1aVetOoulPGqgYukj0VE0wIhDy90WiQoV3U2PeY44',
   stake: '',
+  allowDelegatedStaking: false,
   delegatedStaking: '',
   delegatedStakingShareRatio: '',
   note: '',
@@ -46,11 +46,6 @@ const StartGatewayModal = ({ onClose }: { onClose: () => void }) => {
     useState<Record<string, string | boolean>>(DEFAULT_FORM_STATE);
   const [formErrors, setFormErrors] = useState<Record<string, string>>({});
 
-  const [delegatedStakingEnabled, setDelegatedStakingEnabled] =
-    useState<boolean>(false);
-  const [propertiesIdEnabled, setPropertiesIdEnabled] =
-    useState<boolean>(false);
-
   const [showBlockingMessageModal, setShowBlockingMessageModal] =
     useState(false);
   const [showSuccessModal, setShowSuccessModal] = useState(false);
@@ -64,6 +59,8 @@ const StartGatewayModal = ({ onClose }: { onClose: () => void }) => {
     });
   }, [walletAddress]);
 
+  const allowDelegatedStaking = formState.allowDelegatedStaking as boolean;
+
   const formRowDefs: FormRowDef[] = [
     {
       formPropertyName: 'label',
@@ -87,63 +84,37 @@ const StartGatewayModal = ({ onClose }: { onClose: () => void }) => {
     {
       formPropertyName: 'propertiesId',
       label: '*Properties ID:',
-      enabled: propertiesIdEnabled,
       placeholder: DEFAULT_FORM_STATE.propertiesId,
       validateProperty: validateTransactionId('Properties ID'),
-      rightComponent: (
-        <div className="pr-[12px]">
-          <FormSwitch
-            checked={propertiesIdEnabled}
-            onChange={(v) => {
-              if (!v) {
-                const cleared = { ...formErrors };
-                delete cleared['propertiesId'];
-                setFormErrors(cleared);
-                setFormState({
-                  ...formState,
-                  propertiesId: DEFAULT_FORM_STATE.propertiesId,
-                });
-              }
-              setPropertiesIdEnabled(v);
-            }}
-            title={`${propertiesIdEnabled ? 'Disable' : 'Enable'} Custom Properties ID`}
-          />
-        </div>
-      ),
     },
     {
       formPropertyName: 'stake',
       label: '*Stake (IO):',
       placeholder: 'Minimum 10000 IO',
       validateProperty: validateIOAmount('Stake', 10000),
     },
+    {
+      formPropertyName: 'allowDelegatedStaking',
+      label: 'Delegated Staking:',
+    },
     {
       formPropertyName: 'minDelegatedStake',
-      label: 'Delegated Staking (IO):',
-      enabled: delegatedStakingEnabled,
-      placeholder: delegatedStakingEnabled
+      label: 'Minimum Delegated Stake (IO):',
+      enabled: allowDelegatedStaking,
+      placeholder: allowDelegatedStaking
         ? 'Minimum 100 IO'
-        : 'Delegated Staking Off',
+        : 'Enable Delegated Staking to set this value.',
       validateProperty: validateIOAmount('Minimum Delegated Stake', 100),
-      rightComponent: (
-        <div className="pr-[12px]">
-          <FormSwitch
-            checked={delegatedStakingEnabled}
-            onChange={setDelegatedStakingEnabled}
-            title={`${delegatedStakingEnabled ? 'Disable' : 'Enable'} Delegated Staking`}
-          />
-        </div>
-      ),
     },
     {
       formPropertyName: 'delegatedStakingShareRatio',
-      label: 'Delegated Staking Share Ratio:',
-      enabled: delegatedStakingEnabled,
-      placeholder: delegatedStakingEnabled
+      label: 'Reward Share Ratio:',
+      enabled: allowDelegatedStaking,
+      placeholder: allowDelegatedStaking
         ? 'Enter value 0-100'
         : 'Enable Delegated Staking to set this value.',
       validateProperty: validateNumberRange(
-        'Delegated Staking Share Ratio',
+        'Reward Share Ratio',
         0,
         100,
       ),
@@ -161,6 +132,8 @@ const StartGatewayModal = ({ onClose }: { onClose: () => void }) => {
 
     if (formValid && arioWriteableSDK) {
       try {
+        const allowDelegatedStaking =
+          formState.allowDelegatedStaking as boolean;
         setShowBlockingMessageModal(true);
         const joinNetworkParams = {
           // GatewayConnectionSettings
@@ -171,18 +144,16 @@ const StartGatewayModal = ({ onClose }: { onClose: () => void }) => {
           // GatewayMetadata
           note: String(formState.note),
           label: String(formState.label),
-          properties: propertiesIdEnabled
-            ? String(formState.propertiesId)
-            : DEFAULT_FORM_STATE.propertiesId,
+          properties: String(formState.propertiesId),
           observerAddress: String(formState.observerAddress),
 
           // GatewayStakingSettings
-          allowDelegatedStaking: delegatedStakingEnabled,
-          delegateRewardShareRatio: delegatedStakingEnabled
+          allowDelegatedStaking,
+          delegateRewardShareRatio: allowDelegatedStaking
             ? parseFloat(String(formState.delegatedStakingShareRatio))
             : DEFAULT_DELEGATED_STAKING_REWARD_SHARE_RATIO,
           minDelegatedStake: new IOToken(
-            delegatedStakingEnabled
+            allowDelegatedStaking
               ? parseFloat(String(formState.minDelegatedStake))
               : DEFAULT_DELEGATED_STAKING,
           ).toMIO(),
@@ -224,8 +195,6 @@ const StartGatewayModal = ({ onClose }: { onClose: () => void }) => {
       ...DEFAULT_FORM_STATE,
       observerAddress: walletAddress?.toString() ?? '',
     });
-    setDelegatedStakingEnabled(false);
-    setPropertiesIdEnabled(false);
     setFormErrors({});
   };
 
@@ -252,6 +221,16 @@ const StartGatewayModal = ({ onClose }: { onClose: () => void }) => {
                 setFormState={setFormState}
                 errorMessages={formErrors}
                 setErrorMessages={setFormErrors}
+                showModified={false}
+                initialState={
+                  rowDef.formPropertyName === 'propertiesId' ||
+                  rowDef.formPropertyName === 'observerAddress'
+                    ? {
+                        ...DEFAULT_FORM_STATE,
+                        observerAddress: walletAddress?.toString() ?? '',
+                      }
+                    : undefined
+                }
                 {...rowDef}
               />
             );