Merge pull request #51 from dsrvlabs/fix/fix-contract-interaction-form

Fix/fix contract interaction form

package.json

@@ -24,9 +24,9 @@
     "@remixproject/plugin-api": "^0.3.31",
     "@remixproject/plugin-iframe": "^0.3.31",
     "@remixproject/plugin-utils": "^0.3.31",
-    "@rjsf/core": "^5.2.0",
-    "@rjsf/utils": "^5.2.0",
-    "@rjsf/validator-ajv8": "^5.2.0",
+    "@rjsf/core": "^5.23.1",
+    "@rjsf/utils": "^5.23.1",
+    "@rjsf/validator-ajv8": "^5.23.1",
     "@solana/buffer-layout": "^4.0.0",
     "@solana/web3.js": "^1.48.0",
     "@terra-money/terra.js": "^3.1.4",

src/components/injective/Contract.tsx

@@ -13,9 +13,6 @@ import { ChainId } from '@injectivelabs/ts-types';
 import { toBase64, fromBase64 } from '@injectivelabs/sdk-ts';
 import { log } from '../../utils/logger';
 import { useWalletStore } from './WalletContextProvider';
-import DynamicForm from './DynamicForm';
-import { RJSFSchema, RegistryWidgetsType, WidgetProps } from '@rjsf/utils';
-
 interface InterfaceProps {
   compileTarget: string;
   contractAddress: string;
@@ -157,6 +154,12 @@ export const Contract: React.FunctionComponent<InterfaceProps> = ({
     setQuantity(e.target.value);
   };
 
+  const handleExecuteChange = ({ formData }: any) => {
+    setExecuteMsg(formData);
+  };
+
+  const uiSchemaExecute = generateUiSchemaFromSchema(schemaExec);
+
   return (
     <div>
       <ReactForm>
@@ -219,13 +222,23 @@ export const Contract: React.FunctionComponent<InterfaceProps> = ({
                 </Button>
               </ReactForm>
             ) : (
-              <DynamicForm schema={schemaExec} msgData={executeMsg} setMsgData={setExecuteMsg}>
+              <Form
+                schema={schemaExec}
+                validator={validator}
+                uiSchema={uiSchemaExecute}
+                onChange={handleExecuteChange}
+                formData={executeMsg || {}}
+                experimental_defaultFormStateBehavior={{
+                  mergeDefaultsIntoFormData: 'useDefaultIfFormDataUndefined',
+                }}
+              >
                 <Button onClick={executeKeplr} size={'sm'}>
                   Execute
                 </Button>
-              </DynamicForm>
+              </Form>
             )}
           </div>
+
           <div>
             <span style={{ color: 'red' }}>{executeMsgErr}</span>
           </div>