fix: reported issues

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 (
     <AppShell

src/components/MeltSporeModal.tsx

@@ -91,7 +91,7 @@ export default function MeltSporeModal(props: MeltSporeModalProps) {
               onClick={handleSubmit}
               loading={loading}
             >
-              Destory
+              Melt
             </Button>
           </Group>
         ) : (

src/components/MintSporeModal.tsx

@@ -501,9 +501,9 @@ export default function MintSporeModal(props: MintSporeModalProps) {
           </Group>
           <Button
             className={classes.submit}
-            disabled={!content || !!error}
-            onClick={handleSubmit}
+            disabled={!content}
             loading={loading}
+            onClick={handleSubmit}
           >
             Mint
           </Button>

src/components/MobileAppShell.tsx

@@ -150,6 +150,11 @@ export default function MobileAppShell(props: React.PropsWithChildren<{}>) {
   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<{}>) {
                 <Flex justify="space-between" py="12px">
                   <Text weight="bold">My Wallet</Text>
                   <Text weight="bold">
-                    {Math.floor(BI.from(capacity).toNumber() / 10 ** 8)} CKB
+                    {balance} CKB
                   </Text>
                 </Flex>
                 <Flex justify="space-between" mb="32px">

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={
               <Group spacing="0px" w="40px" h="100%">
                 <Stack
@@ -160,7 +144,7 @@ export default function SponsorModal(props: TransferModalProps) {
                   onClick={() => {
                     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)
+                    });
                   }}
                 >
                   <Image

src/components/TransferModal.tsx

@@ -19,7 +19,10 @@ import Popover from './Popover';
 
 export interface TransferModalProps {
   type: 'cluster' | 'spore';
-  onSubmit: (values: { to: string }) => Promise<void>;
+  onSubmit: (values: {
+    to: string,
+    useCapacityMarginAsFee: '1' | '0',
+  }) => Promise<void>;
   capacityMargin?: string | undefined;
   onSponsor?: () => void;
 }
@@ -77,15 +80,21 @@ export default function TransferModal(props: TransferModalProps) {
   const [error, setError] = useState<Error | null>(null);
   const focusTrapRef = useFocusTrap();
 
-  const form = useForm({
+  const form = useForm<{
+    to: string,
+    useCapacityMarginAsFee: '1' | '0',
+  }>({
     initialValues: {
       to: '',
       useCapacityMarginAsFee: capacityMargin.toNumber() > 10000 ? '1' : '0',
     },
   });
 
   const handleSubmit = useCallback(
-    async (values: { to: string }) => {
+    async (values: {
+      to: string,
+      useCapacityMarginAsFee: '1' | '0'
+    }) => {
       try {
         if (!isValidAddress(values.to)) {
           form.setFieldError('to', '* Invalid Address');

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);

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);

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<HexNumber | undefined>({
     queryKey: ['capacity', address],
-    queryFn: async () => fetch(`/api/capacity/${address}`).then((res) => res.text()),
+    queryFn: async (): Promise<string | undefined> => {
+      try {
+        const res = await fetch(`/api/capacity/${address}`);
+        return await res.text();
+      } catch {
+        return defaultValue ?? void 0;
+      }
+    },
     enabled: !!address,
   });
   return {