fix: some small ui issues (#137)

* fix: toc line-height * fix: clear input and refetch balance after staking * chore: display name of Tasks
DimensionDev · Jun 25, 2024 · b5b92da · b5b92da
1 parent 5b7ea6b
commit b5b92da
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 6 deletions.
diff --git a/src/components/FaqsToc.tsx b/src/components/FaqsToc.tsx
@@ -33,7 +33,7 @@ export interface TOCItem {
 
 // only h2 and h3
 function generateTOC(contentEl: HTMLElement) {
-  const headings = contentEl?.querySelectorAll('h2, h3') ?? []
+  const headings = contentEl.querySelectorAll('h2, h3') ?? []
   const toc: TOCItem[] = []
   let currentLevel1: TOCItem | null = null
   let currentLevel2: TOCItem | null = null
@@ -146,7 +146,9 @@ export const FaqsToc: ComponentType<{ contentRef: RefObject<HTMLDivElement> }> =
                       href={`#${sub.id}`}
                       display="block"
                       fontSize="14px"
-                      lineHeight="32px"
+                      lineHeight="20px"
+                      py="6px"
+                      mb={1}
                       fontWeight={400}
                       px="10px"
                       rounded="4px"

diff --git a/src/components/UserStatus/StakedMask.tsx b/src/components/UserStatus/StakedMask.tsx
@@ -68,7 +68,7 @@ export const StakedMask = memo(function StakedMask(props: BoxProps) {
   const pendingStakingNumbers = isReadingUserInfos || loadingUserInfo || isLoadingPools
   return (
     <ActionCard title={t`Staked MASK`} display="flex" flexDir="column" {...props}>
-      <Stack alignItems="center">
+      <Stack alignItems="center" flexGrow={1}>
         <ProgressiveText
           loading={pendingStakingNumbers}
           fontSize={48}

diff --git a/src/modals/StakeModal.tsx b/src/modals/StakeModal.tsx
@@ -90,7 +90,7 @@ export function StakeModal(props: ModalProps) {
     }
   }, [account.isConnected, isLoadingUserInfo, linkTwitter, linkedTwitter])
 
-  const [{ updating, waiting, isSwitchingChain, isStaking }, mutation] = useStake()
+  const [{ updating, waiting, isSwitchingChain, isStaking }, stakeMutation] = useStake()
 
   const loading = allowance.isLoading || isStaking || waiting || updating || isSwitchingChain
   const disabled = allowance.isLoading || amount === ZERO
@@ -315,11 +315,13 @@ export function StakeModal(props: ModalProps) {
                 className="purple-gradient-button"
                 rounded={50}
                 isDisabled={disabled}
-                onClick={() => {
-                  mutation.mutate({
+                onClick={async () => {
+                  await stakeMutation.mutateAsync({
                     amount,
                     rawAmount,
                   })
+                  setRawAmount('')
+                  balance.refetch()
                 }}
               >
                 {account.isConnected ? t`Stake` : t`Please connect first`}

diff --git a/src/modals/UITaskManager.tsx b/src/modals/UITaskManager.tsx
@@ -103,6 +103,8 @@ export const createUITaskManager = <TaskOptions extends BaseDialogProps<Result>,
       </Fragment>
     )
   }
+  const name = Component.displayName || Component.name
+  Tasks.displayName = `${name}(Tasks)`
 
   return {
     controller,