From 253d19cb37d80f9c34aac99e9ab8c7df27d18ffd Mon Sep 17 00:00:00 2001
From: Fran Domovic <fran@calimero.network>
Date: Wed, 11 Dec 2024 20:17:00 +0100
Subject: [PATCH] fix: placeholders, gas, scroll container

---
 .../proposals/ChangeApprovalsNeededForm.tsx   |   1 +
 .../proposals/CreateProposalPopup.tsx         |  10 +-
 .../proposals/CrossContractCallForm.tsx       | 136 +++++++++---------
 .../proposals/MaxActiveProposalsForm.tsx      |   1 +
 .../proposals/SetContextVariableForm.tsx      |  12 +-
 app/src/components/proposals/TransferForm.tsx |   2 +
 app/src/pages/home/index.tsx                  |   2 +-
 7 files changed, 91 insertions(+), 73 deletions(-)

diff --git a/app/src/components/proposals/ChangeApprovalsNeededForm.tsx b/app/src/components/proposals/ChangeApprovalsNeededForm.tsx
index 24cbf8f..74a495d 100644
--- a/app/src/components/proposals/ChangeApprovalsNeededForm.tsx
+++ b/app/src/components/proposals/ChangeApprovalsNeededForm.tsx
@@ -19,6 +19,7 @@ export default function ChangeApprovalsNeededForm({
         type="number"
         id="minApprovals"
         name="minApprovals"
+        placeholder='2'
         value={proposalForm.minApprovals}
         onChange={handleInputChange}
         min="1"
diff --git a/app/src/components/proposals/CreateProposalPopup.tsx b/app/src/components/proposals/CreateProposalPopup.tsx
index b656987..c6a76ef 100644
--- a/app/src/components/proposals/CreateProposalPopup.tsx
+++ b/app/src/components/proposals/CreateProposalPopup.tsx
@@ -22,11 +22,16 @@ const ModalOverlay = styled.div`
 
 const ModalContent = styled.div`
   background-color: #1e1e1e;
-  padding: 2rem;
+  padding: 1rem;
   border-radius: 8px;
   width: 90%;
   max-width: 500px;
   color: white;
+
+  h2 {
+  padding-bottom: 0.5rem;
+  margin: 0;
+  }
 `;
 
 export const FormGroup = styled.div`
@@ -76,7 +81,6 @@ export interface ProposalData {
   methodName: string;
   arguments: { key: string; value: string }[];
   deposit: string;
-  gas: string;
   receiverId: string;
   amount: string;
   contextVariables: { key: string; value: string }[];
@@ -100,7 +104,6 @@ export default function CreateProposalPopup({
     methodName: '',
     arguments: [{ key: '', value: '' }],
     deposit: '',
-    gas: '',
     receiverId: '',
     amount: '',
     contextVariables: [{ key: '', value: '' }],
@@ -197,7 +200,6 @@ export default function CreateProposalPopup({
       methodName: '',
       arguments: [{ key: '', value: '' }],
       deposit: '',
-      gas: '',
       receiverId: '',
       amount: '',
       contextVariables: [{ key: '', value: '' }],
diff --git a/app/src/components/proposals/CrossContractCallForm.tsx b/app/src/components/proposals/CrossContractCallForm.tsx
index 5d9a85e..0145cc0 100644
--- a/app/src/components/proposals/CrossContractCallForm.tsx
+++ b/app/src/components/proposals/CrossContractCallForm.tsx
@@ -1,20 +1,32 @@
-import React from "react";
-import { ButtonSm, FormGroup, ProposalData } from "./CreateProposalPopup";
+import React from 'react';
+import { ButtonSm, FormGroup, ProposalData } from './CreateProposalPopup';
+import { styled } from 'styled-components';
+
+const ScrollWrapper = styled.div`
+  max-height: 150px;
+  overflow-y: auto;
+`;
 
 interface CrossContractCallFormProps {
-    proposalForm: ProposalData;
-    handleInputChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
-    handleArgumentChange: (index: number, field: "key" | "value", value: string) => void;
-    removeArgument: (index: number) => void;
-    addArgument: () => void;
+  proposalForm: ProposalData;
+  handleInputChange: (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
+  ) => void;
+  handleArgumentChange: (
+    index: number,
+    field: 'key' | 'value',
+    value: string,
+  ) => void;
+  removeArgument: (index: number) => void;
+  addArgument: () => void;
 }
 
 export default function CrossContractCallForm({
-    proposalForm,
-    handleInputChange,
-    handleArgumentChange,
-    removeArgument,
-    addArgument
+  proposalForm,
+  handleInputChange,
+  handleArgumentChange,
+  removeArgument,
+  addArgument,
 }: CrossContractCallFormProps) {
   return (
     <>
@@ -37,6 +49,7 @@ export default function CrossContractCallForm({
           type="text"
           id="contractId"
           name="contractId"
+          placeholder="contract address"
           value={proposalForm.contractId}
           onChange={handleInputChange}
           required
@@ -48,6 +61,7 @@ export default function CrossContractCallForm({
           type="text"
           id="methodName"
           name="methodName"
+          placeholder="create_post"
           value={proposalForm.methodName}
           onChange={handleInputChange}
           required
@@ -68,62 +82,52 @@ export default function CrossContractCallForm({
           required
         />
       </FormGroup>
-      {proposalForm.protocol === 'NEAR' && (
-        <FormGroup>
-          <label htmlFor="gas">Gas</label>
-          <input
-            type="text"
-            id="gas"
-            name="gas"
-            value={proposalForm.gas}
-            onChange={handleInputChange}
-            placeholder="30000000000000"
-            required
-          />
-        </FormGroup>
-      )}
       <FormGroup>
         <label>Arguments</label>
-        {proposalForm.arguments.map((arg: {key: string, value: string}, index: number) => (
-          <div
-            key={index}
-            style={{
-              display: 'flex',
-              gap: '1rem',
-              alignItems: 'flex-end',
-            }}
-          >
-            <FormGroup>
-              <label>Key</label>
-              <input
-                type="text"
-                value={arg.key}
-                onChange={(e) =>
-                  handleArgumentChange(index, 'key', e.target.value)
-                }
-                required
-              />
-            </FormGroup>
-            <FormGroup>
-              <label>Value</label>
-              <input
-                type="text"
-                value={arg.value}
-                onChange={(e) =>
-                  handleArgumentChange(index, 'value', e.target.value)
-                }
-                required
-              />
-            </FormGroup>
-            <ButtonSm
-              type="button"
-              onClick={() => removeArgument(index)}
-              style={{ background: '#666', marginBottom: '1rem' }}
-            >
-              Remove
-            </ButtonSm>
-          </div>
-        ))}
+        <ScrollWrapper>
+          {proposalForm.arguments.map(
+            (arg: { key: string; value: string }, index: number) => (
+              <div
+                key={index}
+                style={{
+                  display: 'flex',
+                  gap: '1rem',
+                  alignItems: 'flex-end',
+                }}
+              >
+                <FormGroup>
+                  <input
+                    type="text"
+                    placeholder="key"
+                    value={arg.key}
+                    onChange={(e) =>
+                      handleArgumentChange(index, 'key', e.target.value)
+                    }
+                    required
+                  />
+                </FormGroup>
+                <FormGroup>
+                  <input
+                    type="text"
+                    placeholder="value"
+                    value={arg.value}
+                    onChange={(e) =>
+                      handleArgumentChange(index, 'value', e.target.value)
+                    }
+                    required
+                  />
+                </FormGroup>
+                <ButtonSm
+                  type="button"
+                  onClick={() => removeArgument(index)}
+                  style={{ background: '#666', marginBottom: '1rem' }}
+                >
+                  Remove
+                </ButtonSm>
+              </div>
+            ),
+          )}
+        </ScrollWrapper>
         <ButtonSm type="button" onClick={addArgument}>
           Add Argument
         </ButtonSm>
diff --git a/app/src/components/proposals/MaxActiveProposalsForm.tsx b/app/src/components/proposals/MaxActiveProposalsForm.tsx
index b704329..8a8d235 100644
--- a/app/src/components/proposals/MaxActiveProposalsForm.tsx
+++ b/app/src/components/proposals/MaxActiveProposalsForm.tsx
@@ -19,6 +19,7 @@ export default function MaxActiveProposalsForm({
         type="number"
         id="maxActiveProposals"
         name="maxActiveProposals"
+        placeholder='10'
         value={proposalForm.maxActiveProposals}
         onChange={handleInputChange}
         min="1"
diff --git a/app/src/components/proposals/SetContextVariableForm.tsx b/app/src/components/proposals/SetContextVariableForm.tsx
index f7fd876..2e445df 100644
--- a/app/src/components/proposals/SetContextVariableForm.tsx
+++ b/app/src/components/proposals/SetContextVariableForm.tsx
@@ -1,5 +1,11 @@
 import React from 'react';
 import { ButtonSm, FormGroup, ProposalData } from './CreateProposalPopup';
+import { styled } from 'styled-components';
+
+const ScrollWrapper = styled.div`
+  max-height: 150px;
+  overflow-y: auto;
+`
 
 interface SetContextVariableFormProps {
     proposalForm: ProposalData;
@@ -20,6 +26,7 @@ export default function SetContextVariableForm({
 }: SetContextVariableFormProps) {
   return (
     <>
+    <ScrollWrapper>
       {proposalForm.contextVariables.map((variable: { key: string; value: string }, index: number) => (
         <div
           key={index}
@@ -30,9 +37,9 @@ export default function SetContextVariableForm({
           }}
         >
           <FormGroup>
-            <label>Key</label>
             <input
               type="text"
+              placeholder='key'
               value={variable.key}
               onChange={(e) =>
                 handleContextVariableChange(index, 'key', e.target.value)
@@ -41,9 +48,9 @@ export default function SetContextVariableForm({
             />
           </FormGroup>
           <FormGroup>
-            <label>Value</label>
             <input
               type="text"
+              placeholder='value'
               value={variable.value}
               onChange={(e) =>
                 handleContextVariableChange(index, 'value', e.target.value)
@@ -60,6 +67,7 @@ export default function SetContextVariableForm({
           </ButtonSm>
         </div>
       ))}
+      </ScrollWrapper>
       <ButtonSm type="button" onClick={addContextVariable}>
         Add Variable
       </ButtonSm>
diff --git a/app/src/components/proposals/TransferForm.tsx b/app/src/components/proposals/TransferForm.tsx
index 9a953c9..74a2533 100644
--- a/app/src/components/proposals/TransferForm.tsx
+++ b/app/src/components/proposals/TransferForm.tsx
@@ -20,6 +20,7 @@ export default function TransferForm({
           type="text"
           id="receiverId"
           name="receiverId"
+          placeholder='account address'
           value={proposalForm.receiverId}
           onChange={handleInputChange}
           required
@@ -31,6 +32,7 @@ export default function TransferForm({
           type="text"
           id="amount"
           name="amount"
+          placeholder='10'
           value={proposalForm.amount}
           onChange={handleInputChange}
           required
diff --git a/app/src/pages/home/index.tsx b/app/src/pages/home/index.tsx
index 9641ee5..1c4d14b 100644
--- a/app/src/pages/home/index.tsx
+++ b/app/src/pages/home/index.tsx
@@ -242,7 +242,7 @@ export default function HomePage() {
               deposit: formData.deposit || '0',
               gas:
                 formData.protocol === 'NEAR'
-                  ? formData.gas || '30000000000000'
+                  ? '30000000000000'
                   : '0',
             },
           };