Decompose specific permission form out of site/pages/index.tsx to allow rapid addition of new permissions

Author: jeffsmale90

docs/addingNewPermissionTypes.md

@@ -194,6 +194,108 @@ export const DEFAULT_OFFERS: GatorPermission[] = [
 ];
 ```
 
+### 9. Add the Permission to the demo dapp
+
+### 10. Implement Permission Form Component
+
+Create a new form component in `packages/site/src/components/permissions/` for your permission type. For example, `YourPermissionForm.tsx`:
+
+```typescript
+import { useCallback, useEffect, useState } from 'react';
+import { StyledForm } from './styles';
+import type { YourPermissionRequest } from './types';
+
+type YourPermissionFormProps = {
+  onChange: (request: YourPermissionRequest) => void;
+}
+
+export const YourPermissionForm = ({
+  onChange,
+}: YourPermissionFormProps) => {
+  // 1. Define state for each form field
+  const [field1, setField1] = useState(initialValue1);
+  const [field2, setField2] = useState(initialValue2);
+  // ... add more state as needed
+
+  // 2. Implement change handlers for each field
+  const handleField1Change = useCallback(
+    ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => {
+      setField1(value);
+    },
+    [],
+  );
+
+  // 3. Use useEffect to emit changes to parent
+  useEffect(() => {
+    onChange({
+      type: 'your-permission-type',
+      field1,
+      field2,
+      // ... include all fields
+    });
+  }, [onChange, field1, field2 /* ... */]);
+
+  // 4. Render form fields
+  return (
+    <StyledForm>
+      <div>
+        <label htmlFor="field1">Field 1:</label>
+        <input
+          type="text"
+          id="field1"
+          name="field1"
+          value={field1}
+          onChange={handleField1Change}
+          placeholder="Enter field 1"
+        />
+      </div>
+      {/* Add more form fields */}
+    </StyledForm>
+  );
+};
+```
+
+Then, add your form to the permission type selector in `packages/site/src/pages/index.tsx`:
+
+1. Import your form component:
+```typescript
+import { YourPermissionForm } from '../components/permissions';
+```
+
+2. Add your permission type to the select options:
+```typescript
+<select
+  id="permissionType"
+  name="permissionType"
+  value={permissionType}
+  onChange={handlePermissionTypeChange}
+>
+  {/* ... existing options ... */}
+  <option value="your-permission-type">Your Permission Type</option>
+</select>
+```
+
+3. Add the form component to the conditional rendering:
+```typescript
+{permissionType === 'your-permission-type' && (
+  <YourPermissionForm
+    onChange={(request: YourPermissionRequest) => {
+      setPermissionRequest(request);
+    }}
+  />
+)}
+```
+
+Key points for implementing permission forms:
+1. Use the `StyledForm` component for consistent styling
+2. Implement proper type safety with TypeScript
+3. Use controlled form components with React state
+4. Emit changes to parent component using the `onChange` prop
+5. Include all required fields from your permission type definition
+6. Add appropriate validation and error handling
+7. Follow the existing pattern of using `useCallback` for event handlers
+8. Use `useEffect` to emit form changes to the parent
+
 ## Best Practices
 
 1. **Type Safety**: Use TypeScript and Zod for robust type checking and validation.

packages/permissions-kernel-snap/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snap-7715-permissions.git"
   },
   "source": {
-    "shasum": "eRjmPTGFoDn0TmSiFtw7F6sYLP+OInKhcDoSPgOK2Wg=",
+    "shasum": "S0ov2EamT+yz9yJnmK+pFZ5q8knPzSppoKBYMKfHSX8=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/site/src/components/permissions/ERC20TokenStreamForm.tsx

@@ -0,0 +1,222 @@
+import { useCallback, useEffect, useState } from 'react';
+import { parseUnits, toHex, type Hex } from 'viem';
+import { StyledForm } from './styles';
+import type { ERC20TokenStreamPermissionRequest } from './types';
+
+type ERC20TokenStreamFormProps = {
+  onChange: (request: ERC20TokenStreamPermissionRequest) => void;
+};
+
+export const ERC20TokenStreamForm = ({
+  onChange,
+}: ERC20TokenStreamFormProps) => {
+  const [initialAmount, setInitialAmount] = useState<bigint | null>(
+    BigInt(toHex(parseUnits('.5', 18))),
+  );
+  const [amountPerSecond, setAmountPerSecond] = useState(
+    BigInt(toHex(parseUnits('.5', 18))),
+  );
+  const [maxAmount, setMaxAmount] = useState<bigint | null>(
+    BigInt(toHex(parseUnits('2.5', 18))),
+  );
+  const [startTime, setStartTime] = useState(Math.floor(Date.now() / 1000));
+  const [expiry, setExpiry] = useState(
+    Math.floor(Date.now() / 1000) + 60 * 60 * 24 * 30, // 30 days from now
+  );
+  const [justification, setJustification] = useState(
+    'This is a very important request for streaming allowance for some very important thing',
+  );
+  const [isAdjustmentAllowed, setIsAdjustmentAllowed] = useState(true);
+  const [tokenAddress, setTokenAddress] = useState<Hex>(
+    '0x616553f076c6f66739a99fef373c6b4ae1b22a7a', // Consensys USDC
+  );
+
+  const handleInitialAmountChange = useCallback(
+    ({
+      target: { value: inputValue },
+    }: React.ChangeEvent<HTMLInputElement>) => {
+      if (inputValue.trim() === '') {
+        setInitialAmount(null);
+      } else {
+        setInitialAmount(BigInt(inputValue));
+      }
+    },
+    [],
+  );
+
+  const handleAmountPerSecondChange = useCallback(
+    ({
+      target: { value: inputValue },
+    }: React.ChangeEvent<HTMLInputElement>) => {
+      setAmountPerSecond(BigInt(inputValue));
+    },
+    [],
+  );
+
+  const handleMaxAmountChange = useCallback(
+    ({
+      target: { value: inputValue },
+    }: React.ChangeEvent<HTMLInputElement>) => {
+      if (inputValue.trim() === '') {
+        setMaxAmount(null);
+      } else {
+        setMaxAmount(BigInt(inputValue));
+      }
+    },
+    [],
+  );
+
+  const handleStartTimeChange = useCallback(
+    ({
+      target: { value: inputValue },
+    }: React.ChangeEvent<HTMLInputElement>) => {
+      setStartTime(Number(inputValue));
+    },
+    [],
+  );
+
+  const handleJustificationChange = useCallback(
+    ({
+      target: { value: inputValue },
+    }: React.ChangeEvent<HTMLTextAreaElement>) => {
+      setJustification(inputValue);
+    },
+    [],
+  );
+
+  const handleExpiryChange = useCallback(
+    ({
+      target: { value: inputValue },
+    }: React.ChangeEvent<HTMLInputElement>) => {
+      setExpiry(Number(inputValue));
+    },
+    [],
+  );
+
+  const handleIsAdjustmentAllowedChange = useCallback(
+    ({ target: { checked } }: React.ChangeEvent<HTMLInputElement>) => {
+      setIsAdjustmentAllowed(checked);
+    },
+    [],
+  );
+
+  const handleTokenAddressChange = useCallback(
+    ({
+      target: { value: inputValue },
+    }: React.ChangeEvent<HTMLInputElement>) => {
+      setTokenAddress(inputValue as Hex);
+    },
+    [],
+  );
+
+  useEffect(() => {
+    onChange({
+      type: 'erc20-token-stream',
+      initialAmount: initialAmount ? toHex(initialAmount) : null,
+      amountPerSecond: toHex(amountPerSecond),
+      maxAmount: maxAmount ? toHex(maxAmount) : null,
+      startTime,
+      expiry,
+      justification,
+      isAdjustmentAllowed,
+      tokenAddress,
+    });
+  }, [
+    onChange,
+    initialAmount,
+    amountPerSecond,
+    maxAmount,
+    startTime,
+    expiry,
+    justification,
+    isAdjustmentAllowed,
+    tokenAddress,
+  ]);
+
+  return (
+    <StyledForm>
+      <div>
+        <label htmlFor="tokenAddress">Token Address:</label>
+        <input
+          type="text"
+          id="tokenAddress"
+          name="tokenAddress"
+          value={tokenAddress}
+          onChange={handleTokenAddressChange}
+          placeholder="0x..."
+        />
+      </div>
+      <div>
+        <label htmlFor="initialAmount">Initial Amount:</label>
+        <input
+          type="text"
+          id="initialAmount"
+          name="initialAmount"
+          value={initialAmount?.toString()}
+          onChange={handleInitialAmountChange}
+        />
+      </div>
+      <div>
+        <label htmlFor="amountPerSecond">Amount Per Second:</label>
+        <input
+          type="text"
+          id="amountPerSecond"
+          name="amountPerSecond"
+          value={amountPerSecond.toString()}
+          onChange={handleAmountPerSecondChange}
+        />
+      </div>
+      <div>
+        <label htmlFor="maxAmount">Max Amount:</label>
+        <input
+          type="text"
+          id="maxAmount"
+          name="maxAmount"
+          value={maxAmount?.toString()}
+          onChange={handleMaxAmountChange}
+        />
+      </div>
+      <div>
+        <label htmlFor="startTime">Start Time:</label>
+        <input
+          type="number"
+          id="startTime"
+          name="startTime"
+          value={startTime}
+          onChange={handleStartTimeChange}
+        />
+      </div>
+      <div>
+        <label htmlFor="justification">Justification:</label>
+        <textarea
+          id="justification"
+          name="justification"
+          rows={3}
+          value={justification}
+          onChange={handleJustificationChange}
+        ></textarea>
+      </div>
+      <div>
+        <label htmlFor="expiry">Expiry:</label>
+        <input
+          type="number"
+          id="expiry"
+          name="expiry"
+          value={expiry}
+          onChange={handleExpiryChange}
+        />
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <label htmlFor="isAdjustmentAllowed">Allow Adjustments:</label>
+        <input
+          type="checkbox"
+          id="isAdjustmentAllowed"
+          name="isAdjustmentAllowed"
+          checked={isAdjustmentAllowed}
+          onChange={handleIsAdjustmentAllowedChange}
+          style={{ width: 'auto', marginLeft: '1rem' }}
+        />
+      </div>
+    </StyledForm>
+  );
+};