Add SIMP definition

Author: JeremyRubin

src/Data/Transaction.ts

@@ -79,6 +79,7 @@ export class TransactionModel extends TransactionNodeModel implements HasKeys {
                 return {
                     color: u.getOptions().color,
                     label: u.getOptions().name,
+                    simp: {},
                 };
             }),
         };

src/UX/ContractCreator/SapioPluginPicker/PluginForm.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { MuiForm5 as Form } from '@rjsf/material-ui';
 
-import { ISubmitEvent } from '@rjsf/core';
+import Form, { ISubmitEvent } from '@rjsf/core';
 import { logo_image, Plugin } from './PluginTile';
 import { create_contract_of_type, switch_showing } from '../../../AppSlice';
 import { useDispatch } from 'react-redux';
 import { show_apis } from '../ContractCreatorSlice';
 import './PluginForm.css';
+import { Button } from '@mui/material';
 
 interface PluginFormProps {
     app: Plugin;
@@ -21,12 +21,19 @@ export function PluginForm(props: PluginFormProps) {
         );
         dispatch(show_apis(false));
     };
+    const [data, set_data] = React.useState({});
+    const handleClick = async () => {
+        const s = await navigator.clipboard.readText();
+        set_data(JSON.parse(s));
+    };
     return (
         <div className="PluginForm">
             <div></div>
             <div>
                 {logo_image(props.app)}
+                <Button onClick={handleClick}>Paste</Button>
                 <Form
+                    formData={data}
                     schema={props.app.api}
                     onSubmit={(e: ISubmitEvent<any>) =>
                         handleSubmit(e, props.app.key)

src/UX/Entity/Detail/UTXODetail.tsx

@@ -40,8 +40,7 @@ import Hex, { ASM } from './Hex';
 import { OutpointDetail } from './OutpointDetail';
 import './UTXODetail.css';
 import { selectContinuation } from '../../ContractCreator/ContractCreatorSlice';
-import { MuiForm5 as Form } from '@rjsf/material-ui';
-import { FormValidation, ISubmitEvent } from '@rjsf/core';
+import Form, { FormValidation, ISubmitEvent } from '@rjsf/core';
 import {
     add_effect_to_contract,
     recreate_contract,
@@ -200,6 +199,9 @@ function OutputMetadataTable(props: { metadata: UTXOFormatData }) {
     return (
         <>
             <Typography variant="h5">Metadata</Typography>
+            <SIMPNeg12345
+                simp_neg_12345={props.metadata.simp[-12345]}
+            ></SIMPNeg12345>
             <table>
                 <thead>
                     <tr>
@@ -208,22 +210,44 @@ function OutputMetadataTable(props: { metadata: UTXOFormatData }) {
                     </tr>
                 </thead>
                 <tbody>
-                    {Object.entries(props.metadata).map(([k, v]) => (
-                        <tr key={k}>
-                            <td>
-                                <Typography>{k}</Typography>
-                            </td>
-                            <td>
-                                <Typography>{v}</Typography>
-                            </td>
-                        </tr>
-                    ))}
+                    {Object.entries(props.metadata)
+                        .filter(([k, _]) => k !== 'simp')
+                        .map(([k, v]) => (
+                            <tr key={k}>
+                                <td>
+                                    <Typography>{k}</Typography>
+                                </td>
+                                <td>
+                                    <Typography>
+                                        {typeof v === 'string'
+                                            ? v
+                                            : JSON.stringify(v)}
+                                    </Typography>
+                                </td>
+                            </tr>
+                        ))}
                 </tbody>
             </table>
         </>
     );
 }
 
+function SIMPNeg12345(props: { simp_neg_12345?: any }) {
+    let nft = null;
+    if (props.simp_neg_12345) {
+        nft = (
+            <div>
+                <img
+                    style={{ maxWidth: '50%' }}
+                    src={`https://${props.simp_neg_12345.cid}.ipfs.nftstorage.link`}
+                ></img>
+            </div>
+        );
+    }
+
+    return nft;
+}
+
 function ContinuationOption(props: { v: Continuation }) {
     const [is_open, setOpen] = React.useState(false);
     const name = props.v.path.substr(props.v.path.lastIndexOf('/') + 1);

src/common/preload_interface.d.ts

@@ -61,6 +61,7 @@ export type TransactionData = {
 export type UTXOFormatData = {
     color: string;
     label: string;
+    simp: Record<number, any>;
 } & Record<string, any>;
 
 export type ContinuationTable = Record<string, Record<APIPath, Continuation>>;