From eb2cb67b6e3c46ab39b914bdca6292de67c7126c Mon Sep 17 00:00:00 2001 From: ShookLyngs Date: Thu, 18 Jan 2024 22:13:11 +0800 Subject: [PATCH 1/5] fix: cannot retry mint spore after encountered error --- src/components/MintSporeModal.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MintSporeModal.tsx b/src/components/MintSporeModal.tsx index 342a5fe..941e229 100644 --- a/src/components/MintSporeModal.tsx +++ b/src/components/MintSporeModal.tsx @@ -501,9 +501,9 @@ export default function MintSporeModal(props: MintSporeModalProps) { From 1202ec912035800fd0a1b39f07a65bd1ab611595 Mon Sep 17 00:00:00 2001 From: ShookLyngs Date: Thu, 18 Jan 2024 22:13:47 +0800 Subject: [PATCH 2/5] fix: cannot pay from wallet when capacity margin is insufficient --- src/components/TransferModal.tsx | 15 ++++++++++++--- src/hooks/modal/useTransferClusterModal.tsx | 7 +++++-- src/hooks/modal/useTransferSporeModal.tsx | 7 +++++-- 3 files changed, 22 insertions(+), 7 deletions(-) diff --git a/src/components/TransferModal.tsx b/src/components/TransferModal.tsx index 177bdff..afc09d5 100644 --- a/src/components/TransferModal.tsx +++ b/src/components/TransferModal.tsx @@ -19,7 +19,10 @@ import Popover from './Popover'; export interface TransferModalProps { type: 'cluster' | 'spore'; - onSubmit: (values: { to: string }) => Promise; + onSubmit: (values: { + to: string, + useCapacityMarginAsFee: '1' | '0', + }) => Promise; capacityMargin?: string | undefined; onSponsor?: () => void; } @@ -77,7 +80,10 @@ export default function TransferModal(props: TransferModalProps) { const [error, setError] = useState(null); const focusTrapRef = useFocusTrap(); - const form = useForm({ + const form = useForm<{ + to: string, + useCapacityMarginAsFee: '1' | '0', + }>({ initialValues: { to: '', useCapacityMarginAsFee: capacityMargin.toNumber() > 10000 ? '1' : '0', @@ -85,7 +91,10 @@ export default function TransferModal(props: TransferModalProps) { }); const handleSubmit = useCallback( - async (values: { to: string }) => { + async (values: { + to: string, + useCapacityMarginAsFee: '1' | '0' + }) => { try { if (!isValidAddress(values.to)) { form.setFieldError('to', '* Invalid Address'); diff --git a/src/hooks/modal/useTransferClusterModal.tsx b/src/hooks/modal/useTransferClusterModal.tsx index 79aa255..c517dea 100644 --- a/src/hooks/modal/useTransferClusterModal.tsx +++ b/src/hooks/modal/useTransferClusterModal.tsx @@ -70,17 +70,20 @@ export default function useTransferClusterModal(cluster: QueryCluster | undefine const loading = transferClusterMutation.isPending && !transferClusterMutation.isError; const handleSubmit = useCallback( - async (values: { to: string }) => { + async (values: { + to: string, + useCapacityMarginAsFee: '1' | '0' + }) => { if (!address || !values.to || !cluster) { return; } await transferClusterMutation.mutateAsync({ outPoint: cluster.cell?.outPoint!, - useCapacityMarginAsFee: false, fromInfos: [address], toLock: helpers.parseAddress(values.to, { config: config.predefined.AGGRON4, }), + useCapacityMarginAsFee: values.useCapacityMarginAsFee === '1', }); showSuccess('Cluster Transferred!'); modals.close(modalId); diff --git a/src/hooks/modal/useTransferSporeModal.tsx b/src/hooks/modal/useTransferSporeModal.tsx index b22e6fc..950b9c4 100644 --- a/src/hooks/modal/useTransferSporeModal.tsx +++ b/src/hooks/modal/useTransferSporeModal.tsx @@ -56,7 +56,10 @@ export default function useTransferSporeModal(sourceSpore: QuerySpore | undefine const loading = transferSporeMutation.isPending && !transferSporeMutation.isError; const handleSubmit = useCallback( - async (values: { to: string }) => { + async (values: { + to: string, + useCapacityMarginAsFee: '1' | '0' + }) => { if (!address || !values.to || !spore?.cell) { return; } @@ -66,7 +69,7 @@ export default function useTransferSporeModal(sourceSpore: QuerySpore | undefine toLock: helpers.parseAddress(values.to, { config: config.predefined.AGGRON4, }), - useCapacityMarginAsFee: true, + useCapacityMarginAsFee: values.useCapacityMarginAsFee === '1', }); showSuccess('Spore Transferred!'); modals.close(modalId); From 577f8dad89037ca1ed23497ca9884ffe8d1c0167 Mon Sep 17 00:00:00 2001 From: ShookLyngs Date: Thu, 18 Jan 2024 22:46:48 +0800 Subject: [PATCH 3/5] fix: sponsor modal does not have max value limit --- src/components/SponsorModal.tsx | 26 ++++++-------------------- 1 file changed, 6 insertions(+), 20 deletions(-) diff --git a/src/components/SponsorModal.tsx b/src/components/SponsorModal.tsx index d69c1a8..a57b1e5 100644 --- a/src/components/SponsorModal.tsx +++ b/src/components/SponsorModal.tsx @@ -133,24 +133,8 @@ export default function SponsorModal(props: TransferModalProps) { data-autofocus disabled={loading} precision={0} - formatter={(val) => { - const num = parseInt(val); - if (isNaN(num)) { - return '0'; - } - return num.toString(); - }} - parser={(val) => { - const num = parseInt(val); - setError(null); - if (isNaN(num)) { - return '0'; - } - if (num < 0) { - setError(new Error('Please enter a positive number')); - } - return Math.max(num, 0).toString(); - }} + min={1} + max={100_000_000_000} rightSection={ { setError(null); form.setValues({ - amount: Math.max(form.values.amount - 1, 0), + amount: Math.max(form.values.amount - 1, 1), }); }} > @@ -177,7 +161,9 @@ export default function SponsorModal(props: TransferModalProps) { sx={{ cursor: 'pointer' }} onClick={() => { setError(null); - form.setValues({ amount: form.values.amount + 1 }); + form.setValues({ + amount: Math.min(form.values.amount + 1, 100_000_000_000) + }); }} > Date: Fri, 19 Jan 2024 12:12:03 +0800 Subject: [PATCH 4/5] fix: "destroy" to "melt" --- src/components/MeltSporeModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MeltSporeModal.tsx b/src/components/MeltSporeModal.tsx index 7afb938..002572e 100644 --- a/src/components/MeltSporeModal.tsx +++ b/src/components/MeltSporeModal.tsx @@ -91,7 +91,7 @@ export default function MeltSporeModal(props: MeltSporeModalProps) { onClick={handleSubmit} loading={loading} > - Destory + Melt ) : ( From 290b8c807202f004bc847709e6503f995fe1ae9f Mon Sep 17 00:00:00 2001 From: ShookLyngs Date: Fri, 19 Jan 2024 12:13:05 +0800 Subject: [PATCH 5/5] fix: the capacity api sometimes throws error --- src/components/DefaultAppShell.tsx | 5 ++++- src/components/MobileAppShell.tsx | 7 ++++++- src/hooks/query/useCapacity.ts | 14 +++++++++++--- 3 files changed, 21 insertions(+), 5 deletions(-) diff --git a/src/components/DefaultAppShell.tsx b/src/components/DefaultAppShell.tsx index b55a098..bfe3b31 100644 --- a/src/components/DefaultAppShell.tsx +++ b/src/components/DefaultAppShell.tsx @@ -188,7 +188,10 @@ export default function DefaultAppShell(props: React.PropsWithChildren<{}>) { ] as DropMenuProps['menu']; }, [router, disconnect, address, connected, connector, clipboard]); - const balance = Math.floor(BI.from(capacity).toNumber() / 10 ** 8); + const balance = useMemo(() => { + if (!capacity) return 0; + return Math.floor(BI.from(capacity).toNumber() / 10 ** 8); + }, [capacity]); return ( ) { const { connect, connected, address, connector, disconnect } = useConnect(); const { data: capacity = '0x0' } = useCapacity(address); + const balance = useMemo(() => { + if (!capacity) return 0; + return Math.floor(BI.from(capacity).toNumber() / 10 ** 8); + }, [capacity]); + const createClusterModal = useCreateClusterModal(); const mintSporeModal = useMintSporeModal(); @@ -251,7 +256,7 @@ export default function MobileAppShell(props: React.PropsWithChildren<{}>) { My Wallet - {Math.floor(BI.from(capacity).toNumber() / 10 ** 8)} CKB + {balance} CKB diff --git a/src/hooks/query/useCapacity.ts b/src/hooks/query/useCapacity.ts index 10a3c75..29e828a 100644 --- a/src/hooks/query/useCapacity.ts +++ b/src/hooks/query/useCapacity.ts @@ -1,9 +1,17 @@ import { useQuery } from '@tanstack/react-query'; +import { HexNumber } from '@ckb-lumos/base'; -export function useCapacity(address: string) { - const { data, isLoading } = useQuery({ +export function useCapacity(address: string, defaultValue?: HexNumber) { + const { data, isLoading } = useQuery({ queryKey: ['capacity', address], - queryFn: async () => fetch(`/api/capacity/${address}`).then((res) => res.text()), + queryFn: async (): Promise => { + try { + const res = await fetch(`/api/capacity/${address}`); + return await res.text(); + } catch { + return defaultValue ?? void 0; + } + }, enabled: !!address, }); return {