payment-kit 1.13.285 → 1.13.286

package/.eslintrc.js

@@ -13,5 +13,6 @@ module.exports = {
     'import/prefer-default-export': 'off',
     'react-hooks/exhaustive-deps': 'off',
     'jsx-a11y/no-noninteractive-element-interactions': 'off',
+    '@typescript-eslint/indent': 'off',
   },
 };

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.13.285
+version: 1.13.286
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.285",
+  "version": "1.13.286",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -52,7 +52,7 @@
     "@arcblock/validator": "^1.18.123",
     "@blocklet/js-sdk": "1.16.28",
     "@blocklet/logger": "1.16.28",
-    "@blocklet/payment-react": "1.13.285",
+    "@blocklet/payment-react": "1.13.286",
     "@blocklet/sdk": "1.16.28",
     "@blocklet/ui-react": "^2.10.1",
     "@blocklet/uploader": "^0.1.11",
@@ -118,7 +118,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.28",
     "@arcblock/eslint-config-ts": "^0.3.2",
-    "@blocklet/payment-types": "1.13.285",
+    "@blocklet/payment-types": "1.13.286",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -158,5 +158,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "d95d4a86102a7394461680849860140aa372ab06"
+  "gitHead": "fa41b3d6a308d9405f56717beee2f030a91ddec3"
 }

package/src/components/metadata/editor.tsx

@@ -1,8 +1,10 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Button, CircularProgress, Stack } from '@mui/material';
+import { isObject } from 'lodash';
 import type { EventHandler } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
+import { isObjectContent } from '../../libs/util';
 import MetadataForm from './form';
 
 export default function MetadataEditor({
@@ -20,7 +22,10 @@ export default function MetadataEditor({
   const metadata = data.metadata || {};
   const methods = useForm<any>({
     defaultValues: {
-      metadata: Object.keys(metadata).map((key: string) => ({ key, value: metadata[key] })),
+      metadata: Object.keys(metadata).map((key: string) => ({
+        key,
+        value: isObject(metadata[key]) ? JSON.stringify(metadata[key]) : metadata[key],
+      })),
     },
   });
 
@@ -31,7 +36,16 @@ export default function MetadataEditor({
   };
   const onSubmit = () => {
     handleSubmit(async (formData: any) => {
-      await onSave(formData);
+      const payload = {
+        ...(formData || {}),
+        metadata: Array.isArray(formData.metadata)
+          ? formData.metadata.reduce((acc: any, x: any) => {
+              acc[x.key] = isObjectContent(x.value) ? JSON.parse(x.value) : x.value;
+              return acc;
+            }, {})
+          : [],
+      };
+      await onSave(payload);
       reset();
       onCancel(null);
     })();

package/src/components/metadata/list.tsx

@@ -3,6 +3,7 @@ import { Typography } from '@mui/material';
 import isEmpty from 'lodash/isEmpty';
 import isObject from 'lodash/isObject';
 
+import { isObjectContent } from '../../libs/util';
 import InfoRow from '../info-row';
 
 export default function MetadataList({ data }: { data: any }) {
@@ -12,14 +13,22 @@ export default function MetadataList({ data }: { data: any }) {
     return <Typography color="text.secondary">{t('common.metadata.empty')}</Typography>;
   }
 
+  const formatValue = (value: any) => {
+    if (isObjectContent(value)) {
+      return <pre>{JSON.stringify(JSON.parse(value), null, 2)}</pre>;
+    }
+    if (isObject(value)) {
+      return <pre>{JSON.stringify(value, null, 2)}</pre>;
+    }
+    return value;
+  };
+
   // skip non-string values
   return (
     <>
-      {Object.keys(data || {})
-        .filter((key) => isObject(data[key]) === false)
-        .map((key) => (
-          <InfoRow key={key} label={key} value={data[key]} />
-        ))}
+      {Object.keys(data || {}).map((key) => (
+        <InfoRow key={key} label={key} value={formatValue(data[key])} />
+      ))}
     </>
   );
 }

package/src/libs/util.ts

@@ -14,6 +14,7 @@ import type {
 } from '@blocklet/payment-types';
 import { Hasher } from '@ocap/mcrypto';
 import { hexToNumber } from '@ocap/util';
+import { isObject } from 'lodash';
 import cloneDeep from 'lodash/cloneDeep';
 import isEqual from 'lodash/isEqual';
 import { joinURL } from 'ufo';
@@ -224,3 +225,11 @@ export function goBackOrFallback(fallback: string) {
     }
   }, 500);
 }
+
+export function isObjectContent(value: string) {
+  try {
+    return isObject(JSON.parse(value));
+  } catch (err) {
+    return false;
+  }
+}