chore: optimize sui、tron、cfx example

OneKeyHQ · Nov 6, 2024 · 9843a1f · 9843a1f
1 parent d349624
commit 9843a1f
Show file tree

Hide file tree

Showing 27 changed files with 979 additions and 317 deletions.
diff --git 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
@@ -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
@@ -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
+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
@@ -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';
diff --git 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
@@ -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
@@ -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
@@ -11,14 +11,18 @@ interface ApiInputProps {
   type?: 'text' | 'number' | 'password';
   hidden?: boolean;
   defaultValue?: string;
+  label?: string;
+  required?: boolean;
 }
 
 const ApiInput = memo(({
   id,
   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
@@ -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
@@ -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
@@ -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 });