From 893eba89f997093ce7c4804fb4b802e69bec00be Mon Sep 17 00:00:00 2001 From: 0xzion <0xzion.penx@gmail.com> Date: Sat, 6 Jul 2024 10:22:38 +0800 Subject: [PATCH] feat: improve publish ux --- .cargo/config.toml | 9 ++++ apps/desktop/.env | 4 +- .../CommandPalette/CommandPaletteFooter.tsx | 54 +++++++++++++++++-- .../SearchBar/ActionPopover.tsx | 1 + .../SearchBar/CommandAppActions.tsx | 32 +++++++++-- .../SearchBar/lib/publishCreation.ts | 3 +- .../src/hooks/useCommandFooterStatus.ts | 22 ++++++++ 7 files changed, 114 insertions(+), 11 deletions(-) create mode 100644 .cargo/config.toml create mode 100644 apps/desktop/src/hooks/useCommandFooterStatus.ts diff --git a/.cargo/config.toml b/.cargo/config.toml new file mode 100644 index 000000000..ee3a35d2d --- /dev/null +++ b/.cargo/config.toml @@ -0,0 +1,9 @@ +[target.x86_64-pc-windows-msvc] +rustflags = ["-C", "link-arg=/STACK:8000000"] + +# 64 bit Mingw +[target.x86_64-pc-windows-gnu] +rustflags = ["-C", "link-arg=-Wl,--stack,8000000"] + +[target.x86_64-apple-darwin] +rustflags = ["-C", "link-arg=-Wl,-stack_size,0x1000000"] diff --git a/apps/desktop/.env b/apps/desktop/.env index 553daf12a..1b74225ea 100644 --- a/apps/desktop/.env +++ b/apps/desktop/.env @@ -1,5 +1,5 @@ -VITE_API_URL=https://penx.io -# VITE_API_URL=http://localhost:3000 +# VITE_API_URL=https://penx.io +VITE_API_URL=http://localhost:3000 NEXT_PUBLIC_PLATFORM=DESKTOP diff --git a/apps/desktop/src/components/CommandPalette/CommandPaletteFooter.tsx b/apps/desktop/src/components/CommandPalette/CommandPaletteFooter.tsx index c08a3eac0..37889401a 100644 --- a/apps/desktop/src/components/CommandPalette/CommandPaletteFooter.tsx +++ b/apps/desktop/src/components/CommandPalette/CommandPaletteFooter.tsx @@ -1,6 +1,9 @@ +import { useMemo } from 'react' import { Box } from '@fower/react' +import { Dot, Spinner } from 'uikit' import { appEmitter } from '@penx/event' import { IconLogo } from '@penx/icons' +import { useCommandFooterStatus } from '~/hooks/useCommandFooterStatus' import { useCurrentCommand } from '~/hooks/useCurrentCommand' import { ListItemIcon } from './ListItemIcon' import { ActionPopover } from './SearchBar/ActionPopover' @@ -11,6 +14,51 @@ interface Props { export const CommandPaletteFooter = ({ footerHeight }: Props) => { const { currentCommand } = useCurrentCommand() + const { status, message } = useCommandFooterStatus() + const leftJSX = useMemo(() => { + if (status === 'NORMAL') { + if (currentCommand && currentCommand.icon) { + return + } else { + return + } + } + if (status === 'LOADING') { + return ( + + + + {message} + + + ) + } + + if (status === 'SUCCESS') { + return ( + + + + {message} + + + ) + } + + if (status === 'ERROR') { + return ( + + + + {message} + + + ) + } + + return null + }, [status, message, currentCommand]) + return ( { px3 toBetween > - {currentCommand && currentCommand.icon ? ( - - ) : ( - - )} + {leftJSX} { > {ui?.type === 'render' && ( { setOpen(false) setTimeout(() => { diff --git a/apps/desktop/src/components/CommandPalette/SearchBar/CommandAppActions.tsx b/apps/desktop/src/components/CommandPalette/SearchBar/CommandAppActions.tsx index f4423eea9..41d453c36 100644 --- a/apps/desktop/src/components/CommandPalette/SearchBar/CommandAppActions.tsx +++ b/apps/desktop/src/components/CommandPalette/SearchBar/CommandAppActions.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useRef } from 'react' +import { Dispatch, useEffect, useMemo, useRef } from 'react' import { Box } from '@fower/react' import { ActionItem, @@ -13,24 +13,28 @@ import { import { open } from '@tauri-apps/plugin-shell' import { Captions, Copy, DoorOpenIcon, Globe } from 'lucide-react' import { writeText } from 'tauri-plugin-clipboard-api' +import { useAccount } from 'wagmi' import { toast } from 'uikit' import { appEmitter } from '@penx/event' import { store } from '@penx/store' import { workerStore } from '~/common/workerStore' import { commandLoadingAtom } from '~/hooks/useCommandAppLoading' import { useCommandAppUI } from '~/hooks/useCommandAppUI' +import { commandFooterStatus } from '~/hooks/useCommandFooterStatus' import { useValue } from '~/hooks/useValue' import { ListItemIcon } from '../ListItemIcon' import { publishCreation } from './lib/publishCreation' import { MenuItem } from './MenuItem' interface Props { + setOpen: Dispatch> onSelect?: () => void } -export const CommandAppActions = ({ onSelect }: Props) => { +export const CommandAppActions = ({ onSelect, setOpen }: Props) => { const itemIndexRef = useRef(0) const { value } = useValue() + const { address = '' } = useAccount() const { ui } = useCommandAppUI() const actions = useMemo(() => { @@ -66,14 +70,36 @@ export const CommandAppActions = ({ onSelect }: Props) => { } if (isPublishCreation(item)) { + setOpen(false) try { store.set(commandLoadingAtom, true) - await publishCreation(item) + store.set(commandFooterStatus, { + status: 'LOADING', + message: 'Publishing...', + }) + await publishCreation(item, address) toast.success('Released successfully') + + store.set(commandFooterStatus, { + status: 'SUCCESS', + message: 'Published successfully', + }) } catch (error) { toast.warning('Failed to publish creation!') + + store.set(commandFooterStatus, { + status: 'ERROR', + message: 'Published failed', + }) } store.set(commandLoadingAtom, false) + setTimeout(() => { + store.set(commandFooterStatus, { + status: 'NORMAL', + message: '', + }) + }, 4000) + return } if (isCustomAction(item)) { diff --git a/apps/desktop/src/components/CommandPalette/SearchBar/lib/publishCreation.ts b/apps/desktop/src/components/CommandPalette/SearchBar/lib/publishCreation.ts index 92154a923..b08240711 100644 --- a/apps/desktop/src/components/CommandPalette/SearchBar/lib/publishCreation.ts +++ b/apps/desktop/src/components/CommandPalette/SearchBar/lib/publishCreation.ts @@ -17,7 +17,7 @@ function isIconify(icon: any): icon is IconifyIconType { return typeof icon === 'object' && icon.name } -export async function publishCreation(item: PublishCreation) { +export async function publishCreation(item: PublishCreation, address: string) { if (!item.location) throw new Error('location is empty') const manifest = await getManifest(item.location) @@ -45,6 +45,7 @@ export async function publishCreation(item: PublishCreation) { } await api.creation.upsertCreation.mutate({ + address, name: manifest.name, manifest: JSON.stringify({ ...manifest, diff --git a/apps/desktop/src/hooks/useCommandFooterStatus.ts b/apps/desktop/src/hooks/useCommandFooterStatus.ts new file mode 100644 index 000000000..cbd7f1b16 --- /dev/null +++ b/apps/desktop/src/hooks/useCommandFooterStatus.ts @@ -0,0 +1,22 @@ +import { atom, useAtom } from 'jotai' + +export type FooterStatus = 'NORMAL' | 'LOADING' | 'ERROR' | 'SUCCESS' + +interface FooterStatusState { + status: FooterStatus + message: string +} + +export const commandFooterStatus = atom({ + status: 'NORMAL', + message: '', +}) + +export function useCommandFooterStatus() { + const [state, setState] = useAtom(commandFooterStatus) + + return { + ...state, + setFooterStatus: setState, + } +}