feat: SSRI Demo (#152)

Author: Alive24

packages/demo/package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.5",
+    "@uiw/react-json-view": "2.0.0-alpha.30",
     "lucide-react": "^0.427.0",
     "next": "14.2.10",
     "react": "^18",
@@ -24,6 +25,8 @@
   "devDependencies": {
     "@ckb-ccc/connector-react": "workspace:*",
     "@ckb-ccc/lumos-patches": "workspace:*",
+    "@ckb-ccc/ssri": "workspace:*",
+    "@ckb-ccc/udt": "workspace:*",
     "@ckb-lumos/ckb-indexer": "^0.24.0-next.1",
     "@ckb-lumos/common-scripts": "^0.24.0-next.1",
     "@ckb-lumos/config-manager": "^0.24.0-next.1",

packages/demo/src/app/connected/(tools)/SSRI/components/HexArrayInput.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { TextInput } from "@/src/components/Input";
+import { Button } from "@/src/components/Button";
+
+
+interface HexInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onRemove?: () => void;
+  label?: string;
+  placeholder?: string;
+}
+
+interface HexArrayInputProps {
+  value: string[];
+  onChange: (value: string[]) => void;
+  label?: string;
+}
+
+export const HexInput: React.FC<HexInputProps> = ({
+  value,
+  label = "Hex Value",
+  placeholder = "Enter hex value (with 0x prefix)",
+  onChange,
+  onRemove,
+}) => {
+  return (
+    <div className="flex w-full flex-col gap-2 rounded border p-2">
+      <TextInput
+        label={label}
+        placeholder={placeholder}
+        state={[
+          value,
+          (newValue) => {
+            // Ensure hex format
+            const hexValue = newValue.startsWith("0x")
+              ? newValue
+              : `0x${newValue}`;
+            onChange(hexValue);
+          },
+        ]}
+        className="w-full"
+      />
+      {onRemove && (
+        <Button
+          onClick={onRemove}
+          className="self-start rounded bg-red-500 px-2 py-1 text-white"
+        >
+          Remove
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export const HexArrayInput: React.FC<HexArrayInputProps> = ({
+  value = [],
+  onChange,
+  label = "Hex Values",
+}) => {
+  const addHexValue = () => {
+    onChange([...value, "0x"]);
+  };
+
+  const removeHexValue = (index: number) => {
+    const newValues = [...value];
+    newValues.splice(index, 1);
+    onChange(newValues);
+  };
+
+  const updateHexValue = (index: number, hexValue: string) => {
+    const newValues = [...value];
+    newValues[index] = hexValue;
+    onChange(newValues);
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <label className="font-semibold">{label}</label>
+      {value.map((hexValue, index) => (
+        <HexInput
+          key={index}
+          value={hexValue}
+          label={`Hex Value ${index + 1}`}
+          placeholder={`Enter hex value (with 0x prefix)`}
+          onChange={(updatedValue) => updateHexValue(index, updatedValue)}
+          onRemove={() => removeHexValue(index)}
+        />
+      ))}
+      <Button
+        onClick={addHexValue}
+        className="self-start rounded bg-green-500 px-2 py-1 text-white"
+      >
+        Add Hex Value
+      </Button>
+    </div>
+  );
+};