From 6c77d0540e07b66441ced03d01800f1481fd8473 Mon Sep 17 00:00:00 2001
From: ByteZhang <ByteZhang@protonmail.com>
Date: Wed, 6 Nov 2024 09:25:41 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20optimize=20sui=E3=80=81tron=E3=80=81cf?=
 =?UTF-8?q?x=20example?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/deploy-dapp-example-web.yml |   1 +
 .github/workflows/publish-npm-package.yml     |   1 +
 packages/example/.env.simple                  |   4 +-
 .../components/ApiForm/ApiAutoTextArea.tsx    |  69 +++
 .../example/components/ApiForm/ApiButton.tsx  |  39 +-
 .../components/ApiForm/ApiCheckbox.tsx        |   4 +
 .../components/ApiForm/ApiCombobox.tsx        |  15 +-
 .../example/components/ApiForm/ApiField.tsx   |  11 +-
 .../components/ApiForm/ApiJsonEdit.tsx        |  13 +-
 .../components/ApiForm/ApiSelector.tsx        |  25 +-
 .../example/components/ApiForm/ApiSwitch.tsx  |   4 +
 .../example/components/ApiForm/ApiText.tsx    |  70 +++
 .../components/ApiForm/ApiTextArea.tsx        |  18 +-
 packages/example/components/ApiForm/index.ts  |  10 +-
 packages/example/components/ApiForm/store.ts  |   6 -
 packages/example/components/ApiForm/types.ts  |   5 +-
 packages/example/components/TabCard.tsx       |  42 ++
 .../components/chains/conflux/example.tsx     |  85 +++
 .../components/chains/ethereum/example.tsx    | 493 ++++++++----------
 .../components/chains/suiStandard/example.tsx | 161 +++++-
 .../components/chains/suiStandard/utils.ts    |   4 +-
 .../components/chains/tron/example.tsx        |  91 +++-
 .../example/components/chains/utils/OkLink.ts |  76 +++
 packages/example/components/ui/tooltip.tsx    |  28 +
 packages/example/package.json                 |   1 +
 packages/example/yarn.lock                    |  18 +
 26 files changed, 978 insertions(+), 316 deletions(-)
 create mode 100644 packages/example/components/ApiForm/ApiAutoTextArea.tsx
 create mode 100644 packages/example/components/ApiForm/ApiText.tsx
 create mode 100644 packages/example/components/TabCard.tsx
 create mode 100644 packages/example/components/chains/utils/OkLink.ts
 create mode 100644 packages/example/components/ui/tooltip.tsx

diff --git a/.github/workflows/deploy-dapp-example-web.yml b/.github/workflows/deploy-dapp-example-web.yml
index 77ea7f66c..219efa87e 100644
--- a/.github/workflows/deploy-dapp-example-web.yml
+++ b/.github/workflows/deploy-dapp-example-web.yml
@@ -25,6 +25,7 @@ jobs:
           # Next.js environment variables
           echo "NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=${{ secrets.WALLET_CONNECT_PROJECT_ID }}" > ./packages/example/.env
           echo "NEXT_PUBLIC_BLOCKFROST_CARDANO_PROJECT_ID=${{ secrets.BLOCKFROST_CARDANO_PROJECT_ID }}" >> ./packages/example/.env
+          echo "NEXT_PUBLIC_OKLINK_API_KEY=${{ secrets.OKLINK_API_KEY }}" >> ./packages/example/.env
 
       - name: Install Dependency
         env:
diff --git a/.github/workflows/publish-npm-package.yml b/.github/workflows/publish-npm-package.yml
index bc2de42d6..f8b98fd46 100644
--- a/.github/workflows/publish-npm-package.yml
+++ b/.github/workflows/publish-npm-package.yml
@@ -47,6 +47,7 @@ jobs:
           # Next.js environment variables
           echo "NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=${{ secrets.WALLET_CONNECT_PROJECT_ID }}" > ./packages/example/.env
           echo "NEXT_PUBLIC_BLOCKFROST_CARDANO_PROJECT_ID=${{ secrets.BLOCKFROST_CARDANO_PROJECT_ID }}" >> ./packages/example/.env
+          echo "NEXT_PUBLIC_OKLINK_API_KEY=${{ secrets.OKLINK_API_KEY }}" >> ./packages/example/.env
 
       - name: Build Example Web
         run: |
diff --git a/packages/example/.env.simple b/packages/example/.env.simple
index da10db091..c5cc2d476 100644
--- a/packages/example/.env.simple
+++ b/packages/example/.env.simple
@@ -2,4 +2,6 @@
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=xxxx
 NEXT_PUBLIC_WALLET_CONNECT_RELAY_URL=wss://relay.walletconnect.com
 # block frost project id
-NEXT_PUBLIC_BLOCKFROST_CARDANO_PROJECT_ID=xxxx
\ No newline at end of file
+NEXT_PUBLIC_BLOCKFROST_CARDANO_PROJECT_ID=xxxx
+# oklink api key
+NEXT_PUBLIC_OKLINK_API_KEY=xxxx
diff --git a/packages/example/components/ApiForm/ApiAutoTextArea.tsx b/packages/example/components/ApiForm/ApiAutoTextArea.tsx
new file mode 100644
index 000000000..b5f18a01d
--- /dev/null
+++ b/packages/example/components/ApiForm/ApiAutoTextArea.tsx
@@ -0,0 +1,69 @@
+import React, { memo, useContext, useEffect } from 'react';
+import { useAtom } from 'jotai';
+import { Label } from '../ui/label';
+import { ApiFormContext } from './ApiForm';
+import { AutoHeightTextarea } from '../ui/textarea';
+
+
+interface AutoTextAreaProps {
+  id: string;
+  placeholder?: string;
+  label?: string;
+  required?: boolean;
+}
+
+const TextArea = memo(({
+  id,
+  placeholder,
+  label,
+  required
+}: AutoTextAreaProps) => {
+  const context = useContext(ApiFormContext);
+  if (!context) throw new Error('ApiField must be used within ApiForm');
+
+  const { store } = context;
+  const [field, setField] = useAtom(store.fieldsAtom(id));
+
+  useEffect(() => {
+    field.name = label;
+    field.required = required;
+  }, []);
+
+  return <>
+    <AutoHeightTextarea
+      id={id}
+      value={field.value}
+      onChange={(e) => setField({ ...field, value: e.target.value })}
+      placeholder={placeholder}
+      disabled={field.disabled}
+    />
+    {field.error && (
+      <div className="text-sm text-red-500">{field.error}</div>
+    )}
+  </>
+});
+
+export interface ApiAutoTextAreaProps extends AutoTextAreaProps {
+  id: string;
+}
+
+export const ApiAutoTextArea = memo(({
+  id,
+  label,
+  placeholder,
+  required
+}: ApiAutoTextAreaProps) => {
+  return (
+    <div>
+      {label && (
+        <Label htmlFor={id}>
+          {label}
+          {required && <span className="text-red-500">*</span>}
+        </Label>
+      )}
+      <TextArea id={id} placeholder={placeholder} label={label} required={required} />
+    </div>
+  );
+});
+
+ApiAutoTextArea.displayName = 'ApiAutoTextArea';
\ No newline at end of file
diff --git a/packages/example/components/ApiForm/ApiButton.tsx b/packages/example/components/ApiForm/ApiButton.tsx
index 7686cb255..e6b21e4d8 100644
--- a/packages/example/components/ApiForm/ApiButton.tsx
+++ b/packages/example/components/ApiForm/ApiButton.tsx
@@ -1,9 +1,9 @@
-import React, { memo, useContext, useCallback } from 'react';
+import React, { memo, useContext, useCallback, useMemo, useEffect } from 'react';
 import { useAtom } from 'jotai';
 import { Button } from '../ui/button';
 import { ApiFormContext } from './ApiForm';
 import { useValidation } from './hooks/useValidation';
-import { get } from 'lodash';
+import { get, isEmpty } from 'lodash';
 import { toast } from '../ui/use-toast';
 
 export interface ApiButtonProps {
@@ -14,13 +14,15 @@ export interface ApiButtonProps {
         fields: string[];
         validator?: (values: Record<string, { id: string; value: string; required: boolean }>) => string | undefined;
     };
+    availableDependencyFields?: string[];
 }
 
 export const ApiButton = memo(({
     id,
     label,
     onClick,
-    validation
+    validation,
+    availableDependencyFields,
 }: ApiButtonProps) => {
     const context = useContext(ApiFormContext);
     if (!context) throw new Error('ApiButton must be used within ApiForm');
@@ -31,13 +33,37 @@ export const ApiButton = memo(({
     const loading = field.extra?.loading ?? false;
     const result = field.extra?.result;
 
+    useEffect(() => {
+        field.name = label;
+    }, []);
+
+    const dependencyStates = availableDependencyFields?.map(fieldId => {
+        const [field] = useAtom(store.fieldsAtom(fieldId));
+        return {
+            id: fieldId,
+            value: field.value,
+            name: field.name
+        };
+    }) ?? [];
+
+    const disabledTooltip = useMemo(() => {
+        const filterFields = dependencyStates.filter(field =>
+            (field.value == null || isEmpty(field.value))
+        );
+
+        if (filterFields.length > 0) {
+            return `请填写 ${filterFields.map(field => field.name ?? field.id).join(', ')}`;
+        }
+        return null;
+    }, [dependencyStates]);
+
     const setResult = (value: string) => {
         setField({ ...field, extra: { ...field.extra, result: value } });
-    };
+    }
 
     const setLoading = (value: boolean) => {
         setField({ ...field, extra: { ...field.extra, loading: value } });
-    };
+    }
 
     const { validate } = useValidation({
         store,
@@ -74,11 +100,12 @@ export const ApiButton = memo(({
             <Button
                 key={id}
                 onClick={handleClick}
-                disabled={loading}
+                disabled={disabledTooltip != null}
                 loading={loading}
             >
                 {label}
             </Button>
+            {disabledTooltip && <div className="text-red-500 text-sm">{disabledTooltip}</div>}
             {result && <div className="text-red-500 text-sm">{result}</div>}
         </div>
     );
diff --git a/packages/example/components/ApiForm/ApiCheckbox.tsx b/packages/example/components/ApiForm/ApiCheckbox.tsx
index fa32528ae..330d19d63 100644
--- a/packages/example/components/ApiForm/ApiCheckbox.tsx
+++ b/packages/example/components/ApiForm/ApiCheckbox.tsx
@@ -20,6 +20,10 @@ export const ApiCheckbox = memo(({
   const { store } = context;
   const [field, setField] = useAtom(store.fieldsAtom(id));
 
+  useEffect(() => {
+    field.name = label;
+  }, []);
+
   useEffect(() => {
     if (defaultChecked) {
       setField({ ...field, value: defaultChecked });
diff --git a/packages/example/components/ApiForm/ApiCombobox.tsx b/packages/example/components/ApiForm/ApiCombobox.tsx
index 79f5fc497..e4a427b1b 100644
--- a/packages/example/components/ApiForm/ApiCombobox.tsx
+++ b/packages/example/components/ApiForm/ApiCombobox.tsx
@@ -8,7 +8,7 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
 import { ChevronDownIcon, CheckIcon } from 'lucide-react';
 import { cn } from '../../lib/utils';
 
-interface IOption<T> {
+export interface IOption<T> {
   value: string;
   label: string;
   extra?: T;
@@ -88,6 +88,8 @@ export const ApiCombobox = forwardRef<ApiComboboxRef, ApiComboboxProps>(function
     if (defaultValue) {
       setField({ ...field, value: defaultValue });
     }
+    field.name = label;
+    field.required = required;
   }, []);
 
   useImperativeHandle(ref, () => ({
@@ -113,13 +115,15 @@ export const ApiCombobox = forwardRef<ApiComboboxRef, ApiComboboxProps>(function
           aria-expanded={open}
           className="w-full justify-between"
         >
-          {currentOption?.value
-            ? options.find((option) => option.value === currentOption?.value)?.label
-            : placeholder}
+          <span className="truncate text-left break-all line-clamp-2">
+            {currentOption?.value
+              ? options.find((option) => option.value === currentOption?.value)?.label
+              : placeholder}
+          </span>
           <ChevronDownIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0">
+      <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
         <Command>
           <CommandInput placeholder={placeholder} className="h-9" />
           <CommandList>
@@ -129,6 +133,7 @@ export const ApiCombobox = forwardRef<ApiComboboxRef, ApiComboboxProps>(function
                 <CommandItem
                   key={option.value}
                   value={option.label}
+                  className="break-all"
                   onSelect={(currentLabel) => {
                     const currentOption = options?.find(opt => opt.label === currentLabel);
                     setValue(currentOption?.value ?? null);
diff --git a/packages/example/components/ApiForm/ApiField.tsx b/packages/example/components/ApiForm/ApiField.tsx
index feec92fbb..29de2d24e 100644
--- a/packages/example/components/ApiForm/ApiField.tsx
+++ b/packages/example/components/ApiForm/ApiField.tsx
@@ -11,6 +11,8 @@ interface ApiInputProps {
   type?: 'text' | 'number' | 'password';
   hidden?: boolean;
   defaultValue?: string;
+  label?: string;
+  required?: boolean;
 }
 
 const ApiInput = memo(({
@@ -18,7 +20,9 @@ const ApiInput = memo(({
   placeholder,
   type = 'text',
   hidden = false,
-  defaultValue
+  defaultValue,
+  label,
+  required
 }: ApiInputProps) => {
 
   const context = useContext(ApiFormContext);
@@ -31,6 +35,8 @@ const ApiInput = memo(({
     if (defaultValue) {
       setField({ ...field, value: defaultValue });
     }
+    field.name = label;
+    field.required = required;
   }, []);
 
   return <>
@@ -52,7 +58,6 @@ const ApiInput = memo(({
 
 export interface ApiFieldProps extends ApiInputProps {
   id: string;
-  label?: string;
   required?: boolean;
 }
 
@@ -73,7 +78,7 @@ export const ApiField = memo(({
           {required && <span className="text-red-500">*</span>}
         </Label>
       )}
-      <ApiInput id={id} placeholder={placeholder} hidden={hidden} defaultValue={defaultValue} />
+      <ApiInput id={id} placeholder={placeholder} hidden={hidden} defaultValue={defaultValue} label={label} required={required} />
     </div>
   );
 });
diff --git a/packages/example/components/ApiForm/ApiJsonEdit.tsx b/packages/example/components/ApiForm/ApiJsonEdit.tsx
index 5a071e8f8..737e6f9d1 100644
--- a/packages/example/components/ApiForm/ApiJsonEdit.tsx
+++ b/packages/example/components/ApiForm/ApiJsonEdit.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useContext } from 'react';
+import React, { memo, useContext, useEffect } from 'react';
 import { useAtom } from 'jotai';
 import { Label } from '../ui/label';
 import { ApiFormContext } from './ApiForm';
@@ -8,11 +8,15 @@ import JsonEditor from '../ui/jsonEditor';
 interface JsonEditProps {
   id: string;
   placeholder?: string;
+  label?: string;
+  required?: boolean;
 }
 
 const JsonEdit = memo(({
   id,
-  placeholder
+  placeholder,
+  label,
+  required
 }: JsonEditProps) => {
 
   const context = useContext(ApiFormContext);
@@ -21,6 +25,11 @@ const JsonEdit = memo(({
   const { store } = context;
   const [field, setField] = useAtom(store.fieldsAtom(id));
 
+  useEffect(() => {
+    field.name = label;
+    field.required = required;
+  }, []);
+
   return <>
     <JsonEditor
       value={field.value ?? ''}
diff --git a/packages/example/components/ApiForm/ApiSelector.tsx b/packages/example/components/ApiForm/ApiSelector.tsx
index 2b038be52..da1a46fa4 100644
--- a/packages/example/components/ApiForm/ApiSelector.tsx
+++ b/packages/example/components/ApiForm/ApiSelector.tsx
@@ -18,6 +18,8 @@ export interface ApiSelectorProps<T = any> {
   defaultValue?: string;
   placeholder?: string;
   onRequestOptions?: () => Promise<IOption<T>[]>
+  onValueChange?: (value: string | null) => void;
+  onOptionChange?: (option: IOption<T> | null) => void;
 }
 
 export interface ApiSelectorRef<T = any> {
@@ -34,7 +36,9 @@ export const ApiSelector = forwardRef<ApiSelectorRef, ApiSelectorProps>(function
     required,
     defaultValue,
     placeholder,
-    onRequestOptions
+    onRequestOptions,
+    onValueChange,
+    onOptionChange
   }: ApiSelectorProps<T>,
   ref: React.Ref<ApiSelectorRef<T>>,
 ) {
@@ -54,7 +58,7 @@ export const ApiSelector = forwardRef<ApiSelectorRef, ApiSelectorProps>(function
   const setOptions = useCallback((options: IOption<T>[]) => {
     setField({
       ...field, extra: {
-        options: [...options]
+        options
       }
     });
   }, [setField]);
@@ -63,6 +67,8 @@ export const ApiSelector = forwardRef<ApiSelectorRef, ApiSelectorProps>(function
     if (defaultValue) {
       setField({ ...field, value: defaultValue });
     }
+    field.name = label;
+    field.required = required;
   }, []);
 
   useEffect(() => {
@@ -73,9 +79,20 @@ export const ApiSelector = forwardRef<ApiSelectorRef, ApiSelectorProps>(function
     }
   }, [onRequestOptions]);
 
+  const setValue = useCallback((value: string | null) => {
+    setField({ ...field, value });
+    onValueChange?.(value);
+    onOptionChange?.(options?.find(opt => opt.value === value) ?? null);
+  }, [setField, onValueChange, onOptionChange, options]);
+
+  useEffect(() => {
+    if (defaultValue) {
+      setField({ ...field, value: defaultValue });
+    }
+  }, []);
 
   useImperativeHandle(ref, () => ({
-    setValue: (key: string | null) => setField({ ...field, value: key }),
+    setValue,
     getCurrentValue: () => currentOption?.value,
     getCurrentOption: () => currentOption,
     getOptions: () => options,
@@ -92,7 +109,7 @@ export const ApiSelector = forwardRef<ApiSelectorRef, ApiSelectorProps>(function
     <Select
       defaultValue={defaultValue}
       value={field.value}
-      onValueChange={(value) => setField({ ...field, value })}
+      onValueChange={setValue}
     >
       {placeholder && (
         <SelectTrigger className="w-full">
diff --git a/packages/example/components/ApiForm/ApiSwitch.tsx b/packages/example/components/ApiForm/ApiSwitch.tsx
index 90bcc2d66..9caad96b2 100644
--- a/packages/example/components/ApiForm/ApiSwitch.tsx
+++ b/packages/example/components/ApiForm/ApiSwitch.tsx
@@ -20,6 +20,10 @@ export const ApiSwitch = memo(({
   const { store } = context;
   const [field, setField] = useAtom(store.fieldsAtom(id));
 
+  useEffect(() => {
+    field.name = label;
+  }, []);
+
   useEffect(() => {
     if (defaultChecked) {
       setField({ ...field, value: defaultChecked });
diff --git a/packages/example/components/ApiForm/ApiText.tsx b/packages/example/components/ApiForm/ApiText.tsx
new file mode 100644
index 000000000..10c1a7e63
--- /dev/null
+++ b/packages/example/components/ApiForm/ApiText.tsx
@@ -0,0 +1,70 @@
+import React, { memo, useContext } from 'react';
+import { useAtom } from 'jotai';
+import { ApiFormContext } from './ApiForm';
+import { cn } from '../../lib/utils';
+
+export interface ApiTextProps {
+    id: string
+    size?: 'sm' | 'md' | 'lg'
+    type?: 'text' | 'error' | 'warning' | 'success' | 'info'
+    hidden?: boolean
+}
+
+export const ApiText = memo(({
+    id,
+    size = 'md',
+    type = 'text',
+    hidden = false
+}: ApiTextProps) => {
+    const context = useContext(ApiFormContext);
+    if (!context) throw new Error('ApiField must be used within ApiForm');
+
+    const { store } = context;
+    const [field] = useAtom(store.fieldsAtom(id));
+
+    if (hidden) return null;
+
+    let textSize = '';
+    switch (size) {
+        case 'sm':
+            textSize = 'text-sm';
+            break;
+        case 'md':
+            textSize = 'text-base';
+            break;
+        case 'lg':
+            textSize = 'text-lg';
+            break;
+    }
+
+    let bgColor = '';
+    let textColor = '';
+    switch (type) {
+        case 'error':
+            textColor = 'text-black';
+            bgColor = 'bg-red-100';
+            break;
+        case 'warning':
+            textColor = 'text-black';
+            bgColor = 'bg-yellow-100';
+            break;
+        case 'success':
+            textColor = 'text-black';
+            bgColor = 'bg-green-100';
+            break;
+        case 'info':
+            textColor = 'text-black';
+            bgColor = 'bg-gray-100';
+            break;
+        default:
+            textColor = 'text-black';
+            bgColor = 'bg-black';
+    }
+
+    if (field.value) {
+        return <div className={cn(textSize, textColor, bgColor, 'p-2 rounded-md font-medium')}>{field.value}</div>
+    }
+    return null;
+});
+
+ApiText.displayName = 'ApiText';
\ No newline at end of file
diff --git a/packages/example/components/ApiForm/ApiTextArea.tsx b/packages/example/components/ApiForm/ApiTextArea.tsx
index b2e5390d8..ab375d25c 100644
--- a/packages/example/components/ApiForm/ApiTextArea.tsx
+++ b/packages/example/components/ApiForm/ApiTextArea.tsx
@@ -1,18 +1,22 @@
-import React, { memo, useContext } from 'react';
+import React, { memo, useContext, useEffect } from 'react';
 import { useAtom } from 'jotai';
 import { Label } from '../ui/label';
 import { ApiFormContext } from './ApiForm';
-import { AutoHeightTextarea } from '../ui/textarea';
+import { Textarea } from '../ui/textarea';
 
 
 interface TextAreaProps {
   id: string;
   placeholder?: string;
+  label?: string;
+  required?: boolean;
 }
 
 const TextArea = memo(({
   id,
-  placeholder
+  placeholder,
+  label,
+  required
 }: TextAreaProps) => {
   const context = useContext(ApiFormContext);
   if (!context) throw new Error('ApiField must be used within ApiForm');
@@ -20,13 +24,19 @@ const TextArea = memo(({
   const { store } = context;
   const [field, setField] = useAtom(store.fieldsAtom(id));
 
+  useEffect(() => {
+    field.name = label;
+    field.required = required;
+  }, []);
+
   return <>
-    <AutoHeightTextarea
+    <Textarea
       id={id}
       value={field.value}
       onChange={(e) => setField({ ...field, value: e.target.value })}
       placeholder={placeholder}
       disabled={field.disabled}
+      style={{ overflow: 'hidden' }}
     />
     {field.error && (
       <div className="text-sm text-red-500">{field.error}</div>
diff --git a/packages/example/components/ApiForm/index.ts b/packages/example/components/ApiForm/index.ts
index 565800268..f365a924e 100644
--- a/packages/example/components/ApiForm/index.ts
+++ b/packages/example/components/ApiForm/index.ts
@@ -4,10 +4,12 @@ import { ApiButton } from './ApiButton';
 import { ApiJsonEdit } from './ApiJsonEdit';
 import { ApiSelector } from './ApiSelector';
 import { ApiCheckbox } from './ApiCheckbox';
+import { ApiAutoTextArea } from './ApiAutoTextArea';
 import { ApiTextArea } from './ApiTextArea';
 import { ApiSwitch } from './ApiSwitch';
 import { ApiCombobox } from './ApiCombobox';
 import { ApiSeparator } from './ApiSeparator';
+import { ApiText } from './ApiText';
 
 const Form = ApiForm as typeof ApiForm & {
   Field: typeof ApiField;
@@ -15,10 +17,12 @@ const Form = ApiForm as typeof ApiForm & {
   JsonEdit: typeof ApiJsonEdit;
   Selector: typeof ApiSelector;
   Checkbox: typeof ApiCheckbox;
+  AutoHeightTextArea: typeof ApiAutoTextArea;
   TextArea: typeof ApiTextArea;
   Switch: typeof ApiSwitch;
   Combobox: typeof ApiCombobox;
   Separator: typeof ApiSeparator;
+  Text: typeof ApiText;
 };
 
 Form.Field = ApiField;
@@ -26,10 +30,12 @@ Form.Button = ApiButton;
 Form.JsonEdit = ApiJsonEdit;
 Form.Selector = ApiSelector;
 Form.Checkbox = ApiCheckbox;
+Form.AutoHeightTextArea = ApiAutoTextArea;
 Form.TextArea = ApiTextArea;
 Form.Switch = ApiSwitch;
 Form.Combobox = ApiCombobox;
 Form.Separator = ApiSeparator;
+Form.Text = ApiText;
 
 export { Form as ApiForm };
 export type { ApiFormProps, ApiFormRef } from './ApiForm';
@@ -38,6 +44,8 @@ export type { ApiButtonProps } from './ApiButton';
 export type { ApiJsonEditProps } from './ApiJsonEdit';
 export type { ApiSelectorProps, ApiSelectorRef } from './ApiSelector';
 export type { ApiCheckboxProps } from './ApiCheckbox';
+export type { ApiAutoTextAreaProps } from './ApiAutoTextArea';
 export type { ApiTextAreaProps } from './ApiTextArea';
 export type { ApiSwitchProps } from './ApiSwitch';
-export type { ApiComboboxProps, ApiComboboxRef } from './ApiCombobox';
\ No newline at end of file
+export type { ApiComboboxProps, ApiComboboxRef, IOption as ComboboxOption } from './ApiCombobox';
+export type { ApiTextProps } from './ApiText';
\ No newline at end of file
diff --git a/packages/example/components/ApiForm/store.ts b/packages/example/components/ApiForm/store.ts
index 4ad079214..2a17541ee 100644
--- a/packages/example/components/ApiForm/store.ts
+++ b/packages/example/components/ApiForm/store.ts
@@ -9,8 +9,6 @@ export interface FormStore<T> {
   id: string;
   scope: Store;
   fieldsAtom: (id: string) => ReturnType<typeof atom<IFormField<T>>>;
-  loadingAtom: ReturnType<typeof atom<boolean>>;
-  resultAtom: ReturnType<typeof atom<string>>;
   reset: () => void;
 }
 
@@ -33,14 +31,10 @@ export const createFormStore = <T = string>(id?: string): FormStore<T> => {
       fieldsMap.set(id, { value: undefined });
       return localAtom;
     }),
-    loadingAtom: atom(false),
-    resultAtom: atom(''),
     reset: () => {
       fieldsMap.forEach((_, fieldId) => {
         store.scope.set(store.fieldsAtom(fieldId), { value: undefined });
       });
-      store.scope.set(store.loadingAtom, false);
-      store.scope.set(store.resultAtom, '');
       fieldsMap.clear();
     }
   };
diff --git a/packages/example/components/ApiForm/types.ts b/packages/example/components/ApiForm/types.ts
index 53dbb830a..21bb6b75e 100644
--- a/packages/example/components/ApiForm/types.ts
+++ b/packages/example/components/ApiForm/types.ts
@@ -1,5 +1,6 @@
 export interface IFormField<T> {
   value: T;
+  name?: string;
   disabled?: boolean;
   error?: string;
   required?: boolean;
@@ -14,6 +15,6 @@ export interface IApiFormState<T> {
 
 // 新增: 验证规则类型
 export interface IValidationRule {
-  fields: string[];  // 需要验证的字段
+  fields: string[]; // 需要验证的字段
   validator?: (values: Record<string, string>) => string | undefined; // 自定义验证函数
-}
\ No newline at end of file
+}
diff --git a/packages/example/components/TabCard.tsx b/packages/example/components/TabCard.tsx
new file mode 100644
index 000000000..af612e9e2
--- /dev/null
+++ b/packages/example/components/TabCard.tsx
@@ -0,0 +1,42 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "./ui/card";
+
+export type TabCardProps = {
+    tabs: {
+        label: string;
+        value: string;
+        title: string;
+        description?: string;
+        content: React.ReactNode;
+    }[];
+    defaultValue?: string;
+}
+
+export default function TabCard({ tabs, defaultValue }: TabCardProps) {
+    return (
+        <Tabs defaultValue={defaultValue || tabs[0]?.value}>
+            <TabsList className={`grid w-full grid-cols-${tabs.length}`}>
+                {tabs.map((tab) => (
+                    <TabsTrigger key={tab.value} value={tab.value}>
+                        {tab.label}
+                    </TabsTrigger>
+                ))}
+            </TabsList>
+            {tabs.map((tab) => (
+                <TabsContent key={tab.value} value={tab.value}>
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>{tab.title}</CardTitle>
+                            {tab.description && (
+                                <CardDescription>{tab.description}</CardDescription>
+                            )}
+                        </CardHeader>
+                        <CardContent className="space-y-2">
+                            {tab.content}
+                        </CardContent>
+                    </Card>
+                </TabsContent>
+            ))}
+        </Tabs>
+    );
+}
diff --git a/packages/example/components/chains/conflux/example.tsx b/packages/example/components/chains/conflux/example.tsx
index 323b693ba..568dc7322 100644
--- a/packages/example/components/chains/conflux/example.tsx
+++ b/packages/example/components/chains/conflux/example.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable no-unsafe-optional-chaining */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { dapps } from './dapps.config';
+import axios from 'axios';
 import ConnectButton from '../../../components/connect/ConnectButton';
 import { useEffect, useRef } from 'react';
 import { get } from 'lodash';
@@ -16,6 +17,7 @@ import { address, Message } from 'js-conflux-sdk';
 import * as cfxUtil from 'cfx-util';
 import { getMessage } from 'cip-23';
 import { keccak256 } from 'ethereumjs-util';
+import { ApiComboboxRef, ApiForm, ApiFormRef } from '../../ApiForm';
 
 function recoverPublicKey(hash: Buffer, sig: string): Buffer {
   const signature = cfxUtil.toBuffer(sig);
@@ -29,6 +31,85 @@ function recoverAddress(hash: Buffer, sig: string): string {
   return cfxUtil.bufferToHex(sender);
 }
 
+const WalletWatchAsset = ({ chainId }: { chainId: string | undefined }) => {
+  const apiFromRef = useRef<ApiFormRef>(null);
+  const apiFromComboboxRef = useRef<ApiComboboxRef>(null);
+
+  const { provider } = useWallet<IProviderApi>();
+
+  useEffect(() => {
+    // https://testingcf.jsdelivr.net/gh/conflux-fans/token-list@master/cfx.fluent.json
+    axios.get('https://testingcf.jsdelivr.net/gh/conflux-fans/token-list@master/cfx.fluent.json').then((res) => {
+      const tokens = res.data.tokens as {
+        chainId: number;
+        address: string;
+        name: string;
+        symbol: string;
+        decimals: number;
+        logoURI: string;
+      }[]
+      const tokenOptions = tokens.map((token) => ({
+        value: token.address,
+        label: `${token.name} - ${token.address}`,
+        extra: {
+          type: 'CRC20',
+          options: {
+            address: token.address,
+            symbol: token.symbol,
+            decimals: token.decimals,
+            image: token.logoURI,
+          }
+        }
+      }));
+
+      apiFromComboboxRef.current?.setOptions(tokenOptions);
+    })
+  }, [chainId]);
+
+  return <ApiForm title="wallet_watchAsset CRC20" description='添加 CRC20 资产' ref={apiFromRef}>
+    <ApiForm.Combobox
+      ref={apiFromComboboxRef}
+      id="tokenSelector"
+      label="预设参数"
+      placeholder="请选择 CRC20 Token"
+      onOptionChange={(option) => {
+        apiFromRef.current?.setJsonValue('request', option?.extra);
+      }}
+    />
+
+    <ApiForm.JsonEdit
+      id="request"
+      label="请求(可以手动编辑)"
+      required
+    />
+
+    <ApiForm.Button
+      id="watchButton"
+      label="观察 Asset"
+      onClick={async () => {
+        const res = await provider?.request({
+          'method': 'wallet_watchAsset',
+          'params': JSON.parse(apiFromRef.current?.getValue('request') ?? ''),
+        });
+        apiFromRef.current?.setValue('response', JSON.stringify(res, null, 2));
+      }}
+      validation={{
+        fields: ['request'],
+        validator: (values) => {
+          if (!values.request) {
+            return '请选择 CRC20 Token';
+          }
+        }
+      }}
+    />
+
+    <ApiForm.TextArea
+      id="response"
+      label="执行结果"
+    />
+  </ApiForm>
+}
+
 export default function BTCExample() {
   const walletsRef = useRef<IProviderInfo[]>([
     {
@@ -461,6 +542,10 @@ export default function BTCExample() {
         />
       </ApiGroup>
 
+      <ApiGroup title="wallet_watchAsset (EIP 747)">
+        <WalletWatchAsset chainId={account?.chainId} />
+      </ApiGroup>
+
       <DappList dapps={dapps} />
     </>
   );
diff --git a/packages/example/components/chains/ethereum/example.tsx b/packages/example/components/chains/ethereum/example.tsx
index 9b9220eb9..a703f9baa 100644
--- a/packages/example/components/chains/ethereum/example.tsx
+++ b/packages/example/components/chains/ethereum/example.tsx
@@ -25,11 +25,10 @@ import { isEqChainId, parseChainId } from './utils';
 import { ApiForm, ApiFormRef, ApiComboboxRef } from '../../ApiForm';
 import Contract721 from './case/contract/contract721.json';
 import Contract1155 from './case/contract/contract1155.json';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../ui/tabs';
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../../ui/card';
 import maliciousCases from './case/transfer/malicious';
 import malformedCases from './case/transfer/malformed';
 import { MALICIOUS_ADDRESS } from './case/contract/SampleContracts';
+import TabCard from '../../TabCard';
 
 const {
   nftsAbi,
@@ -51,7 +50,7 @@ const WalletWatchAsset = ({ chainId }: { chainId: string | undefined }) => {
     const tokens = TokenList.tokens.filter((token) => parseChainId(chainId) === token.chainId);
     const tokenOptions = tokens.map((token) => ({
       value: token.address,
-      label: token.name,
+      label: `${token.name} - ${token.address}`,
       extra: {
         type: 'ERC20',
         options: {
@@ -118,131 +117,115 @@ const WalletWatchAssetERC721 = ({ chainId }: { chainId: string | undefined }) =>
   let nftsFactory: ethers.ContractFactory
 
   return <ApiForm title="wallet_watchAsset ERC721" description='添加 ERC721 资产' ref={apiFromRef}>
+    <TabCard tabs={[
+      {
+        label: '部署合约',
+        value: 'deploy',
+        title: '部署 ERC721 合约',
+        description: '部署 ERC721 合约，用于测试 wallet_watchAsset ERC721，尽量使用手续费低的链',
+        content: <><ApiForm.Button
+          id="deployButton"
+          label="部署 ERC721 合约"
+          onClick={async () => {
+            try {
+              const ethersProvider = new ethers.providers.Web3Provider(provider, 'any');
+
+              nftsFactory = new ethers.ContractFactory(
+                nftsAbi,
+                nftsBytecode,
+                ethersProvider.getSigner(),
+              );
+
+              nftsContract = await nftsFactory.deploy();
+              await nftsContract.deployTransaction.wait();
+            } catch (error) {
+              const reason = get(error, 'reason', undefined);
+              const message = get(error, 'message', undefined);
+              apiFromRef.current?.setJsonValue('deployResponse', reason || message);
+              throw error;
+            }
 
-    <Tabs defaultValue="deploy">
-      <TabsList className="grid w-full grid-cols-2">
-        <TabsTrigger value="deploy">部署合约</TabsTrigger>
-        <TabsTrigger value="use">使用已有 ERC721 合约</TabsTrigger>
-      </TabsList>
-      <TabsContent value="deploy">
-        <Card>
-          <CardHeader>
-            <CardTitle>部署 ERC721 合约</CardTitle>
-            <CardDescription>
-              部署 ERC721 合约，用于测试 wallet_watchAsset ERC721，尽量使用手续费低的链
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-2">
-            <ApiForm.Button
-              id="deployButton"
-              label="部署 ERC721 合约"
-              onClick={async () => {
-                try {
-                  const ethersProvider = new ethers.providers.Web3Provider(provider, 'any');
-
-                  nftsFactory = new ethers.ContractFactory(
-                    nftsAbi,
-                    nftsBytecode,
-                    ethersProvider.getSigner(),
-                  );
-
-                  nftsContract = await nftsFactory.deploy();
-                  await nftsContract.deployTransaction.wait();
-                } catch (error) {
-                  const reason = get(error, 'reason', undefined);
-                  const message = get(error, 'message', undefined);
-                  apiFromRef.current?.setJsonValue('deployResponse', reason || message);
-                  throw error;
-                }
+            if (nftsContract.address === undefined) {
+              return;
+            }
 
-                if (nftsContract.address === undefined) {
-                  return;
-                }
+            console.log(
+              `Contract mined! address: ${nftsContract.address} transactionHash: ${nftsContract.deployTransaction.hash}`,
+            );
 
-                console.log(
-                  `Contract mined! address: ${nftsContract.address} transactionHash: ${nftsContract.deployTransaction.hash}`,
-                );
-
-                apiFromRef.current?.setValue('deployResponse', nftsContract.address);
-              }}
-            />
-
-            <ApiForm.TextArea
-              id="deployResponse"
-              label="部署结果"
-            />
-
-            <ApiForm.Separator />
-
-            <ApiForm.Field
-              id="mintAmount"
-              label="铸造数量"
-              defaultValue="3"
-              type="number"
-              required
-            />
-
-            <ApiForm.Button
-              id="mintButton"
-              label="铸造"
-              onClick={async () => {
-                const mintAmount = apiFromRef.current?.getValue('mintAmount');
-                try {
-                  let result = await nftsContract.mintNFTs(mintAmount, {
-                    from: account?.address,
-                  });
-                  result = await result.wait();
-                } catch (error) {
-                  apiFromRef.current?.setJsonValue('mintResponse', error);
-                  throw error;
-                }
+            apiFromRef.current?.setValue('deployResponse', nftsContract.address);
+          }}
+        />
 
-                if (nftsContract.address === undefined) {
-                  return;
+          <ApiForm.TextArea
+            id="deployResponse"
+            label="部署结果"
+          />
+
+          <ApiForm.Separator />
+
+          <ApiForm.Field
+            id="mintAmount"
+            label="铸造数量"
+            defaultValue="3"
+            type="number"
+            required
+          />
+
+          <ApiForm.Button
+            id="mintButton"
+            label="铸造"
+            onClick={async () => {
+              const mintAmount = apiFromRef.current?.getValue('mintAmount');
+              try {
+                let result = await nftsContract.mintNFTs(mintAmount, {
+                  from: account?.address,
+                });
+                result = await result.wait();
+              } catch (error) {
+                apiFromRef.current?.setJsonValue('mintResponse', error);
+                throw error;
+              }
+
+              if (nftsContract.address === undefined) {
+                return;
+              }
+
+              apiFromRef.current?.setValue('mintResponse', nftsContract.address);
+            }}
+            availableDependencyFields={['mintAmount']}
+            validation={{
+              fields: ['mintAmount'],
+              validator: (values) => {
+                if (!values.mintAmount.value) {
+                  return '请输入铸造数量';
                 }
-
-                apiFromRef.current?.setValue('mintResponse', nftsContract.address);
-              }}
-              validation={{
-                fields: ['mintAmount'],
-                validator: (values) => {
-                  if (!values.mintAmount.value) {
-                    return '请输入铸造数量';
-                  }
-                  if (!account) {
-                    return '请连接钱包';
-                  }
-                  if (!nftsContract) {
-                    return '请部署 ERC721 合约';
-                  }
+                if (!account) {
+                  return '请连接钱包';
                 }
-              }}
-            />
-
-            <ApiForm.TextArea
-              id="mintResponse"
-              label="铸造结果"
-            />
-          </CardContent>
-        </Card>
-      </TabsContent>
-      <TabsContent value="use">
-        <Card>
-          <CardHeader>
-            <CardTitle>使用 ERC721 合约</CardTitle>
-            <CardDescription>
-              使用当前帐户已经部署的 ERC721 合约，测试 wallet_watchAsset ERC721，在区块浏览器中查找 Owner 为当前帐户的 ERC721 资产，填写 Contract Address 和 TokenId 进行观察
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-2">
-            <ApiForm.Field
-              id="watchContractAddress"
-              label="已经部署的 ERC721 合约地址"
-            />
-          </CardContent>
-        </Card>
-      </TabsContent>
-    </Tabs>
+                if (!nftsContract) {
+                  return '请部署 ERC721 合约';
+                }
+              }
+            }}
+          />
+
+          <ApiForm.TextArea
+            id="mintResponse"
+            label="铸造结果"
+          /></>,
+      },
+      {
+        label: '使用 ERC721 合约',
+        value: 'use',
+        title: '使用 ERC721 合约',
+        description: '使用当前帐户已经部署的 ERC721 合约，测试 wallet_watchAsset ERC721，在区块浏览器中查找 Owner 为当前帐户的 ERC721 资产，填写 Contract Address 和 TokenId 进行观察',
+        content: <ApiForm.Field
+          id="watchContractAddress"
+          label="已经部署的 ERC721 合约地址"
+        />,
+      },
+    ]} />
 
     <ApiForm.Field
       id="watchTokenId"
@@ -279,6 +262,7 @@ const WalletWatchAssetERC721 = ({ chainId }: { chainId: string | undefined }) =>
 
         apiFromRef.current?.setValue('watchResponse', JSON.stringify(watchNftsResult, null, 2));
       }}
+      availableDependencyFields={['watchTokenId']}
       validation={{
         fields: ['watchTokenId', 'watchContractAddress'],
         validator: (values) => {
@@ -311,154 +295,138 @@ const WalletWatchAssetERC1155 = ({ chainId }: { chainId: string | undefined }) =
   let erc1155Factory: ethers.ContractFactory
 
   return <ApiForm title="wallet_watchAsset ERC1155" description='添加 ERC1155 资产 尽量使用手续费低的链' ref={apiFromRef}>
+    <TabCard tabs={[
+      {
+        label: '部署合约',
+        value: 'deploy',
+        title: '部署 ERC1155 合约',
+        description: '部署 ERC1155 合约，用于测试 wallet_watchAsset ERC1155，尽量使用手续费低的链',
+        content: <><ApiForm.Button
+          id="deployButton"
+          label="部署 ERC1155 合约"
+          onClick={async () => {
+            try {
+              const ethersProvider = new ethers.providers.Web3Provider(provider, 'any');
+
+              erc1155Factory = new ethers.ContractFactory(
+                erc1155Abi,
+                erc1155Bytecode,
+                ethersProvider.getSigner(),
+              );
+
+              erc1155Contract = await erc1155Factory.deploy();
+              await erc1155Contract.deployTransaction.wait();
+            } catch (error) {
+              const reason = get(error, 'reason', undefined);
+              const message = get(error, 'message', undefined);
+              apiFromRef.current?.setJsonValue('deployResponse', reason || message);
+              throw error;
+            }
 
-    <Tabs defaultValue="deploy">
-      <TabsList className="grid w-full grid-cols-2">
-        <TabsTrigger value="deploy">部署合约</TabsTrigger>
-        <TabsTrigger value="use">使用已有 ERC1155 合约</TabsTrigger>
-      </TabsList>
-      <TabsContent value="deploy">
-        <Card>
-          <CardHeader>
-            <CardTitle>部署 ERC1155 合约</CardTitle>
-            <CardDescription>
-              部署 ERC1155 合约，用于测试 wallet_watchAsset ERC1155，尽量使用手续费低的链
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-2">
-            <ApiForm.Button
-              id="deployButton"
-              label="部署 ERC1155 合约"
-              onClick={async () => {
-                try {
-                  const ethersProvider = new ethers.providers.Web3Provider(provider, 'any');
-
-                  erc1155Factory = new ethers.ContractFactory(
-                    erc1155Abi,
-                    erc1155Bytecode,
-                    ethersProvider.getSigner(),
-                  );
-
-                  erc1155Contract = await erc1155Factory.deploy();
-                  await erc1155Contract.deployTransaction.wait();
-                } catch (error) {
-                  const reason = get(error, 'reason', undefined);
-                  const message = get(error, 'message', undefined);
-                  apiFromRef.current?.setJsonValue('deployResponse', reason || message);
-                  throw error;
-                }
+            if (erc1155Contract.address === undefined) {
+              return;
+            }
 
-                if (erc1155Contract.address === undefined) {
-                  return;
-                }
+            console.log(
+              `Contract mined! address: ${erc1155Contract.address} transactionHash: ${erc1155Contract.deployTransaction.hash}`,
+            );
+
+            apiFromRef.current?.setValue('deployResponse', erc1155Contract.address);
+          }}
+        />
 
-                console.log(
-                  `Contract mined! address: ${erc1155Contract.address} transactionHash: ${erc1155Contract.deployTransaction.hash}`,
-                );
-
-                apiFromRef.current?.setValue('deployResponse', erc1155Contract.address);
-              }}
-            />
-
-            <ApiForm.TextArea
-              id="deployResponse"
-              label="部署结果"
-            />
-
-            <ApiForm.Separator />
-
-            <ApiForm.Field
-              id="mintTokenId"
-              label="铸造的 Token IDs"
-              defaultValue="1, 2, 3"
-              required
-            />
-
-            <ApiForm.Field
-              id="mintAmount"
-              label="Token IDs 对应铸造数量"
-              defaultValue="1, 10, 100"
-              required
-            />
-
-            <ApiForm.Button
-              id="mintButton"
-              label="铸造"
-              onClick={async () => {
-                const mintTokenIds = apiFromRef.current?.getValue('mintTokenId');
-                const mintAmounts = apiFromRef.current?.getValue('mintAmount');
-                try {
-                  const params = [
-                    account?.address,
-                    mintTokenIds.split(',').map(Number),
-                    mintAmounts.split(',').map(Number),
-                    '0x',
-                  ];
-                  let result = await erc1155Contract.mintBatch(...params);
-                  result = await result.wait();
-
-                  console.log('mint success', result);
-                } catch (error) {
-                  const reason = get(error, 'reason', undefined);
-                  const message = get(error, 'message', undefined);
-                  apiFromRef.current?.setJsonValue('mintResponse', reason || message);
-                  throw error;
+          <ApiForm.TextArea
+            id="deployResponse"
+            label="部署结果"
+          />
+
+          <ApiForm.Separator />
+
+          <ApiForm.Field
+            id="mintTokenId"
+            label="铸造的 Token IDs"
+            defaultValue="1, 2, 3"
+            required
+          />
+
+          <ApiForm.Field
+            id="mintAmount"
+            label="Token IDs 对应铸造数量"
+            defaultValue="1, 10, 100"
+            required
+          />
+
+          <ApiForm.Button
+            id="mintButton"
+            label="铸造"
+            onClick={async () => {
+              const mintTokenIds = apiFromRef.current?.getValue('mintTokenId');
+              const mintAmounts = apiFromRef.current?.getValue('mintAmount');
+              try {
+                const params = [
+                  account?.address,
+                  mintTokenIds.split(',').map(Number),
+                  mintAmounts.split(',').map(Number),
+                  '0x',
+                ];
+                let result = await erc1155Contract.mintBatch(...params);
+                result = await result.wait();
+
+                console.log('mint success', result);
+              } catch (error) {
+                const reason = get(error, 'reason', undefined);
+                const message = get(error, 'message', undefined);
+                apiFromRef.current?.setJsonValue('mintResponse', reason || message);
+                throw error;
+              }
+
+              if (erc1155Contract.address === undefined) {
+                return;
+              }
+
+              apiFromRef.current?.setValue('mintResponse', erc1155Contract.address);
+            }}
+            availableDependencyFields={['mintTokenId', 'mintAmount']}
+            validation={{
+              fields: ['mintTokenId', 'mintAmount'],
+              validator: (values) => {
+                if (!values.mintTokenId.value) {
+                  return '请输入铸造的 Token IDs';
+                }
+                if (!values.mintAmount.value) {
+                  return '请输入铸造数量';
                 }
 
-                if (erc1155Contract.address === undefined) {
-                  return;
+                if (values.mintTokenId.value.split(',').length !== values.mintAmount.value.split(',').length) {
+                  return '铸造的 Token IDs 和铸造数量数量不一致';
                 }
 
-                apiFromRef.current?.setValue('mintResponse', erc1155Contract.address);
-              }}
-              validation={{
-                fields: ['mintTokenId', 'mintAmount'],
-                validator: (values) => {
-                  if (!values.mintTokenId.value) {
-                    return '请输入铸造的 Token IDs';
-                  }
-                  if (!values.mintAmount.value) {
-                    return '请输入铸造数量';
-                  }
-
-                  if (values.mintTokenId.value.split(',').length !== values.mintAmount.value.split(',').length) {
-                    return '铸造的 Token IDs 和铸造数量数量不一致';
-                  }
-
-                  if (!account) {
-                    return '请连接钱包';
-                  }
-                  if (!erc1155Contract) {
-                    return '请部署 ERC1155 合约';
-                  }
+                if (!account) {
+                  return '请连接钱包';
                 }
-              }}
-            />
-
-            <ApiForm.TextArea
-              id="mintResponse"
-              label="铸造结果"
-            />
-          </CardContent>
-        </Card>
-      </TabsContent>
-      <TabsContent value="use">
-        <Card>
-          <CardHeader>
-            <CardTitle>使用 ERC1155 合约</CardTitle>
-            <CardDescription>
-              使用当前帐户已经部署的 ERC1155 合约，测试 wallet_watchAsset ERC1155，在区块浏览器中查找 Owner 为当前帐户的 ERC1155 资产，填写 Contract Address 和 TokenId 进行观察
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-2">
-            <ApiForm.Field
-              id="watchContractAddress"
-              label="已经部署的 ERC1155 合约地址"
-            />
-          </CardContent>
-        </Card>
-      </TabsContent>
-    </Tabs>
+                if (!erc1155Contract) {
+                  return '请部署 ERC1155 合约';
+                }
+              }
+            }}
+          />
+
+          <ApiForm.TextArea
+            id="mintResponse"
+            label="铸造结果"
+          /></>,
+      },
+      {
+        label: '使用 ERC1155 合约',
+        value: 'use',
+        title: '使用 ERC1155 合约',
+        description: '使用当前帐户已经部署的 ERC1155 合约，测试 wallet_watchAsset ERC1155，在区块浏览器中查找 Owner 为当前帐户的 ERC1155 资产，填写 Contract Address 和 TokenId 进行观察',
+        content: <ApiForm.Field
+          id="watchContractAddress"
+          label="已经部署的 ERC1155 合约地址"
+        />,
+      },
+    ]} />
 
     <ApiForm.Field
       id="watchTokenId"
@@ -495,6 +463,7 @@ const WalletWatchAssetERC1155 = ({ chainId }: { chainId: string | undefined }) =
 
         apiFromRef.current?.setValue('watchResponse', JSON.stringify(watchNftsResult, null, 2));
       }}
+      availableDependencyFields={['watchTokenId']}
       validation={{
         fields: ['watchTokenId', 'watchContractAddress'],
         validator: (values) => {
diff --git a/packages/example/components/chains/suiStandard/example.tsx b/packages/example/components/chains/suiStandard/example.tsx
index e62203a81..3a2520e63 100644
--- a/packages/example/components/chains/suiStandard/example.tsx
+++ b/packages/example/components/chains/suiStandard/example.tsx
@@ -3,13 +3,15 @@
 /* eslint-disable no-unsafe-optional-chaining */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { dapps } from './dapps.config';
-import { useEffect, useMemo, useState } from 'react';
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { hexToBytes } from '@noble/hashes/utils';
 import { useWallet } from '../../../components/connect/WalletContext';
 import DappList from '../../../components/DAppList';
 import params from './params';
 import { getFullnodeUrl } from '@mysten/sui.js/client';
-// import { WalletKitProvider, useWalletKit } from '@mysten/wallet-kit';
+import { SUI_TYPE_ARG, normalizeSuiAddress } from '@mysten/sui.js/utils';
+import type { CoinStruct, SuiClient } from '@mysten/sui.js/client';
+
 import {
   ConnectButton,
   useCurrentAccount,
@@ -27,10 +29,8 @@ import {
   createNetworkConfig,
 } from '@mysten/dapp-kit';
 import InfoLayout from '../../../components/InfoLayout';
-import { SuiObjectRef } from '@mysten/sui.js/client';
 import { TransactionBlock } from '@mysten/sui.js/transactions';
 import {
-  verifySignature,
   verifyPersonalMessage,
   verifyTransactionBlock,
 } from '@mysten/sui.js/verify';
@@ -39,6 +39,155 @@ import '@mysten/dapp-kit/dist/index.css';
 import { useSignMessage } from './useSignMessage';
 import { ApiGroup, ApiPayload } from '../../ApiActuator';
 import { sponsorTransaction } from './utils';
+import { ApiComboboxRef, ApiForm, ApiFormRef } from '../../ApiForm';
+import BigNumber from 'bignumber.js';
+import { useAtom } from 'jotai';
+import { ApiFormContext } from '../../ApiForm/ApiForm';
+
+export function normalizeSuiCoinType(coinType: string): string {
+  if (coinType !== SUI_TYPE_ARG) {
+    const [normalAddress, module, name] = coinType.split('::');
+    if (module && name) {
+      try {
+        return `${normalizeSuiAddress(
+          normalAddress,
+        ).toLowerCase()}::${module}::${name}`;
+      } catch {
+        // pass
+      }
+    }
+  }
+  return coinType;
+}
+
+function AssetInfoView({ viewRef, client }: { viewRef: ApiFormRef | undefined, client: SuiClient }) {
+
+  const context = useContext(ApiFormContext);
+  if (!context) throw new Error('ApiField must be used within ApiForm');
+
+  const { store } = context;
+  const [field] = useAtom(store.fieldsAtom('asset'));
+
+  useEffect(() => {
+    if (viewRef) {
+      (async () => {
+        const coinInfo = await client.getCoinMetadata({ coinType: field.value });
+        viewRef?.setValue('assetInfo', `name: ${coinInfo?.name}, symbol: ${coinInfo?.symbol}, decimals: ${coinInfo?.decimals}`);
+        viewRef?.setValue('assetDecimals', coinInfo?.decimals);
+      })();
+    }
+  }, [field.value]);
+
+  return <></>
+}
+
+function TransferForm() {
+  const client = useSuiClient();
+  const currentAccount = useCurrentAccount();
+  const { mutateAsync: signAndExecuteTransactionBlock } = useSignAndExecuteTransactionBlock();
+
+  const apiFromRef = useRef<ApiFormRef>(null);
+  const assetsComboboxRef = useRef<ApiComboboxRef>(null);
+
+  const getCoins = async () => {
+    const coins = await client.getAllCoins({ owner: currentAccount?.address });
+
+    const coinTypes = coins.data.reduce((acc, coin) => {
+      const coinType = coin.coinType;
+
+      if (!acc.has(coinType)) {
+        acc.set(coinType, []);
+      }
+
+      acc.get(coinType)?.push(coin);
+
+      return acc;
+    }, new Map<string, CoinStruct[]>());
+
+    return coinTypes;
+  }
+
+  useEffect(() => {
+    if (currentAccount && currentAccount?.address) {
+      apiFromRef.current?.setValue('to', currentAccount.address);
+      getCoins().then((coinTypes) => {
+        const options = Array.from(coinTypes.keys()).map((key) => {
+          return {
+            label: key,
+            value: key,
+            extra: coinTypes.get(key),
+          }
+        });
+        assetsComboboxRef.current?.setOptions(options);
+      });
+    }
+  }, [currentAccount]);
+
+  const handleTransfer = async () => {
+    const from = currentAccount?.address;
+    const asset = assetsComboboxRef.current?.getCurrentOption();
+    const to = apiFromRef.current?.getValue('to');
+    const amount = apiFromRef.current?.getValue('amount');
+    const decimals = apiFromRef.current?.getValue('assetDecimals');
+
+    const coinType = asset?.value;
+
+    const coins = (await client.getCoins({ owner: from, coinType, limit: 100 })).data;
+
+    const transfer = new TransactionBlock();
+
+    const amountBN = new BigNumber(amount).shiftedBy(decimals);
+    const amountBNString = amountBN.toString();
+    console.log('amountBNString', amountBNString);
+
+    const totalBalance = coins.reduce((acc, coin) => {
+      return acc.plus(new BigNumber(coin.balance));
+    }, new BigNumber(0));
+
+    if (totalBalance.lt(amountBN)) {
+      apiFromRef.current?.setValue('result', '余额不足');
+      throw new Error('Insufficient balance');
+    }
+
+    const [primaryCoin, ...mergeCoins] = coins?.filter(
+      (coin) =>
+        normalizeSuiCoinType(coin.coinType) === normalizeSuiCoinType(coinType),
+    );
+
+    if (asset?.value === SUI_TYPE_ARG) {
+      const coin = transfer.splitCoins(transfer.gas, [transfer.pure(amountBNString)]);
+      transfer.transferObjects([coin], transfer.pure(to));
+    } else {
+      const primaryCoinInput = transfer.object(primaryCoin.coinObjectId);
+      if (mergeCoins.length) {
+        transfer.mergeCoins(
+          primaryCoinInput,
+          mergeCoins.map((coin) => transfer.object(coin.coinObjectId)),
+        );
+      }
+      const coin = transfer.splitCoins(primaryCoinInput, [transfer.pure(amountBNString)]);
+      transfer.transferObjects([coin], transfer.pure(to));
+      transfer.setSender(from);
+    }
+
+    const res: unknown = await signAndExecuteTransactionBlock({
+      transactionBlock: transfer,
+      account: currentAccount,
+    });
+    apiFromRef.current?.setValue('result', JSON.stringify(res));
+  }
+
+  return <ApiForm title="测试 Native & Token 转账" description='测试转账' ref={apiFromRef}>
+    <ApiForm.Combobox id='asset' label='选择资产' placeholder='请选择资产' required ref={assetsComboboxRef} />
+    <ApiForm.Text id='assetInfo' type='info' />
+    <ApiForm.Text id='assetDecimals' type='info' hidden />
+    <AssetInfoView viewRef={apiFromRef.current} client={client} />
+    <ApiForm.Field id='to' label='to' placeholder='请输入转账地址' />
+    <ApiForm.Field id='amount' label='转账金额' defaultValue='0.0001' />
+    <ApiForm.Button id='transfer' label='transfer' onClick={handleTransfer} availableDependencyFields={['asset', 'to', 'amount']} />
+    <ApiForm.AutoHeightTextArea id='result' />
+  </ApiForm>
+}
 
 function Example() {
   const client = useSuiClient();
@@ -292,6 +441,10 @@ function Example() {
         />
       </ApiGroup>
 
+      <ApiGroup title="业务测试">
+        <TransferForm />
+      </ApiGroup>
+
       <DappList dapps={dapps} />
     </>
   );
diff --git a/packages/example/components/chains/suiStandard/utils.ts b/packages/example/components/chains/suiStandard/utils.ts
index fe4c9ab8f..913d99b8f 100644
--- a/packages/example/components/chains/suiStandard/utils.ts
+++ b/packages/example/components/chains/suiStandard/utils.ts
@@ -2,12 +2,14 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { SuiObjectRef, SuiClient } from '@mysten/sui.js/client';
+import { SUI_TYPE_ARG } from '@mysten/sui.js/utils';
 import { TransactionBlock } from '@mysten/sui.js/transactions';
-
+import type { CoinStruct } from '@mysten/sui.js/client';
 export async function sponsorTransaction(
   client: SuiClient,
   sender: string,
   transactionKindBytes: Uint8Array,
+  coinType: string = SUI_TYPE_ARG,
 ) {
   let payment: SuiObjectRef[] = [];
 
diff --git a/packages/example/components/chains/tron/example.tsx b/packages/example/components/chains/tron/example.tsx
index 998f3503f..ca6c7c88f 100644
--- a/packages/example/components/chains/tron/example.tsx
+++ b/packages/example/components/chains/tron/example.tsx
@@ -3,8 +3,8 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { dapps } from './dapps.config';
 import ConnectButton from '../../../components/connect/ConnectButton';
-import { use, useEffect, useRef, useState } from 'react';
-import { get, isEmpty } from 'lodash';
+import { memo, useEffect, useRef, useState } from 'react';
+import { get } from 'lodash';
 import { IProviderApi, IProviderInfo } from './types';
 import { ApiPayload, ApiGroup } from '../../ApiActuator';
 import { useWallet } from '../../../components/connect/WalletContext';
@@ -13,6 +13,79 @@ import DappList from '../../../components/DAppList';
 import params from './params';
 import { InputWithSave } from '../../InputWithSave';
 import { toast } from '../../ui/use-toast';
+import { ApiComboboxRef, ApiForm, ApiFormRef } from '../../ApiForm';
+import { okLinkRequest } from '../utils/OkLink';
+
+const WalletWatchAsset = memo(() => {
+  const apiFromRef = useRef<ApiFormRef>(null);
+  const apiFromComboboxRef = useRef<ApiComboboxRef>(null);
+
+  const { provider } = useWallet<IProviderApi>();
+
+  useEffect(() => {
+    okLinkRequest.getTokenList('TRON', 'TRC20').then((tokens) => {
+      const tokenOptions = tokens.map((token) => ({
+        value: token.tokenContractAddress,
+        label: `${token.token} - ${token.tokenContractAddress}`,
+        extra: {
+          type: 'trc20',
+          options: {
+            address: token.tokenContractAddress,
+            symbol: token.token,
+            decimals: token.precision,
+            image: token.logoUrl,
+          }
+        }
+      }));
+
+      apiFromComboboxRef.current?.setOptions(tokenOptions);
+    })
+  }, []);
+
+  return <ApiForm title="wallet_watchAsset TRC20" description='(V5 不支持) 添加 TRC20 资产' ref={apiFromRef}>
+    <ApiForm.Combobox
+      ref={apiFromComboboxRef}
+      id="tokenSelector"
+      label="预设参数"
+      placeholder="请选择 TRC20 Token"
+      onOptionChange={(option) => {
+        apiFromRef.current?.setJsonValue('request', option?.extra);
+      }}
+    />
+
+    <ApiForm.JsonEdit
+      id="request"
+      label="请求(可以手动编辑)"
+      required
+    />
+
+    <ApiForm.Button
+      id="watchButton"
+      label="观察 Asset"
+      onClick={async () => {
+        const res = await provider?.request({
+          'method': 'wallet_watchAsset',
+          'params': JSON.parse(apiFromRef.current?.getValue('request') ?? ''),
+        });
+        apiFromRef.current?.setValue('response', JSON.stringify(res, null, 2));
+      }}
+      availableDependencyFields={['request']}
+      validation={{
+        fields: ['request'],
+        validator: (values) => {
+          if (!values.request) {
+            return '请选择 TRC20 Token';
+          }
+        }
+      }}
+    />
+
+    <ApiForm.TextArea
+      id="response"
+      label="执行结果"
+    />
+  </ApiForm>
+});
 
 export default function Example() {
   const walletsRef = useRef<IProviderInfo[]>([
@@ -241,19 +314,7 @@ export default function Example() {
       </ApiGroup>
 
       <ApiGroup title="资产相关">
-        <ApiPayload
-          title="wallet_watchAsset"
-          description="（不支持）添加 TRC20 资产"
-          presupposeParams={params.addToken}
-          onExecute={async (request: string) => {
-            const obj = JSON.parse(request);
-            const res = await provider?.request<string>({
-              method: 'wallet_watchAsset',
-              params: obj,
-            });
-            return JSON.stringify(res);
-          }}
-        />
+        <WalletWatchAsset />
       </ApiGroup>
       <ApiGroup title="SignMessage">
         <ApiPayload
diff --git a/packages/example/components/chains/utils/OkLink.ts b/packages/example/components/chains/utils/OkLink.ts
new file mode 100644
index 000000000..b7ed036d9
--- /dev/null
+++ b/packages/example/components/chains/utils/OkLink.ts
@@ -0,0 +1,76 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import axios, { AxiosInstance } from 'axios';
+
+type PageInfo<T> = {
+  page: number;
+  limit: number;
+  totalPage: number;
+  chainFullName: string;
+  chainShortName: string;
+  tokenList: T[];
+};
+
+type BaseResponse<T> = {
+  code: number;
+  msg: string;
+  data: PageInfo<T>[];
+};
+
+export type OkLinkTokenInfo = {
+  tokenFullName: string;
+  token: string;
+  precision: string;
+  tokenContractAddress: string;
+  protocolType: string;
+  logoUrl: string;
+};
+
+class OKLinkRequest {
+  private axiosInstance: AxiosInstance;
+  private cache: Record<string, any> = {};
+
+  constructor() {
+    this.axiosInstance = axios.create({
+      baseURL: 'https://www.oklink.com/api/v5/explorer',
+      headers: {
+        'Content-Type': 'application/json',
+        'Ok-Access-Key': process.env.NEXT_PUBLIC_OKLINK_API_KEY,
+      },
+    });
+  }
+
+  async getTokenList(
+    chainName: 'TRON',
+    tokenType: 'TRC20' | undefined,
+  ): Promise<OkLinkTokenInfo[]> {
+    const cacheKey = `${chainName}-${tokenType}`;
+    if (this.cache[cacheKey]) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      return this.cache[cacheKey];
+    }
+
+    const res = await this.axiosInstance
+      .get<BaseResponse<OkLinkTokenInfo>>(`/token/token-list?chainShortName=${chainName}&limit=50`)
+      .catch((err) => {
+        console.error(err);
+        return { data: { data: [] } };
+      });
+
+    const tokenList =
+      res.data?.data?.[0]?.tokenList?.filter((token: { protocolType: string }) => {
+        if (tokenType) {
+          return token.protocolType === tokenType;
+        }
+        return true;
+      }) ?? [];
+
+    this.cache[cacheKey] = tokenList;
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    return tokenList;
+  }
+}
+
+export const okLinkRequest = new OKLinkRequest();
diff --git a/packages/example/components/ui/tooltip.tsx b/packages/example/components/ui/tooltip.tsx
new file mode 100644
index 000000000..5503ba1a3
--- /dev/null
+++ b/packages/example/components/ui/tooltip.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "../../lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/packages/example/package.json b/packages/example/package.json
index 0e15a51dc..7d31419c3 100644
--- a/packages/example/package.json
+++ b/packages/example/package.json
@@ -45,6 +45,7 @@
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-toast": "^1.2.2",
+    "@radix-ui/react-tooltip": "^1.1.3",
     "@solana/wallet-adapter-react": "^0.15.35",
     "@solana/wallet-adapter-react-ui": "^0.9.35",
     "@solana/wallet-adapter-wallets": "^0.19.32",
diff --git a/packages/example/yarn.lock b/packages/example/yarn.lock
index ce62c5e4f..a79e95b8d 100644
--- a/packages/example/yarn.lock
+++ b/packages/example/yarn.lock
@@ -4361,6 +4361,24 @@
     "@radix-ui/react-use-layout-effect" "1.1.0"
     "@radix-ui/react-visually-hidden" "1.1.0"
 
+"@radix-ui/react-tooltip@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.1.3.tgz#4250b14723f2d8477e7a3d0526c169f91d1f2f74"
+  integrity sha512-Z4w1FIS0BqVFI2c1jZvb/uDVJijJjJ2ZMuPV81oVgTZ7g3BZxobplnMVvXtFWgtozdvYJ+MFWtwkM5S2HnAong==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-dismissable-layer" "1.1.1"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-popper" "1.2.0"
+    "@radix-ui/react-portal" "1.1.2"
+    "@radix-ui/react-presence" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-slot" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    "@radix-ui/react-visually-hidden" "1.1.0"
+
 "@radix-ui/react-use-callback-ref@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz#f4bb1f27f2023c984e6534317ebc411fc181107a"