chore: remove unused eslint-disable comments from vault-related components and update button variants for consistency

Author: iamonuwa

apps/hub/src/app/_components/stake/action-status-dialog.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 import * as Dialog from '@radix-ui/react-dialog'
 import { CloseIcon } from '@status-im/icons/20'
 import { match } from 'ts-pattern'

apps/hub/src/app/_components/stake/compound-status-content.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 import * as Dialog from '@radix-ui/react-dialog'
 import { InfoIcon } from '@status-im/icons/16'
 import { formatUnits } from 'viem'

apps/hub/src/app/_components/stake/promo-modal.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 'use client'
 
 import * as Dialog from '@radix-ui/react-dialog'
@@ -79,7 +78,6 @@ const PromoModal = (props: Props) => {
 
                   <ConnectKitButton.Custom>
                     {({ show, isConnected }) => (
-                      // @ts-expect-error - TODO: fix this
                       <Button
                         onClick={show}
                         variant={isConnected ? 'secondary' : 'primary'}

apps/hub/src/app/_components/vault-select.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 'use client'
 
 import { useState } from 'react'

apps/hub/src/app/_components/vaults/modals/base-vault-modal.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 'use client'
 
 import * as Dialog from '@radix-ui/react-dialog'

apps/hub/src/app/_components/vaults/modals/lock-vault-modal/lock-vault-form.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 'use client'
 
 import { useEffect, useMemo, useState } from 'react'
@@ -332,7 +331,6 @@ export function LockVaultForm(props: LockVaultFormProps) {
 
       <div className="flex w-full flex-col items-start bg-[rgba(255,255,255,0.7)] backdrop-blur-[20px]">
         <div className="box-border flex w-full items-center justify-center gap-3 px-4 pb-4 pt-6">
-          {/* @ts-expect-error - Button component is not typed */}
           <Button
             size="40"
             variant="outline"
@@ -343,7 +341,6 @@ export function LockVaultForm(props: LockVaultFormProps) {
           >
             {closeAction.label}
           </Button>
-          {/* @ts-expect-error - Button component is not typed */}
           <Button
             size="40"
             variant="primary"

apps/hub/src/app/_components/vaults/modals/withdraw-vault-modal.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 'use client'
 
 import { useCallback } from 'react'
@@ -94,10 +93,9 @@ export function WithdrawVaultModal(props: WithdrawVaultModalProps) {
                   Your funds will sent directly to your connected wallet.
                 </p>
               </div>
-              {/* @ts-expect-error - Button component is not typed */}
               <Button
                 variant="outline"
-                size="24"
+                size="32"
                 className="rounded-8 px-2 py-[3px] pr-[6px] text-[13px]"
               >
                 Learn more
@@ -110,7 +108,6 @@ export function WithdrawVaultModal(props: WithdrawVaultModalProps) {
       <div className="flex w-full flex-col items-start">
         <div className="box-border flex w-full items-center justify-center gap-3 px-4 pb-4 pt-6">
           <Dialog.Close asChild>
-            {/* @ts-expect-error - Button component is not typed */}
             <Button
               size="40"
               variant="outline"
@@ -120,7 +117,6 @@ export function WithdrawVaultModal(props: WithdrawVaultModalProps) {
               Cancel
             </Button>
           </Dialog.Close>
-          {/* @ts-expect-error - Button component is not typed */}
           <Button
             size="40"
             variant="primary"

apps/hub/src/app/_components/vaults/table-columns.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable import/no-unresolved */
-
 import { AlertIcon, TimeIcon } from '@status-im/icons/12'
 import { LockedIcon, UnlockedIcon } from '@status-im/icons/20'
 import { Button } from '@status-im/status-network/components'
@@ -237,9 +235,8 @@ export const createVaultTableColumns = ({
                     onClose={() => setOpenModalVaultId(null)}
                     vaultAddress={row.original.address}
                   >
-                    {/* @ts-expect-error - Button component is not typed */}
                     <Button
-                      variant="destructive"
+                      variant="danger"
                       size="32"
                       disabled={!isConnected}
                       className="min-w-fit bg-danger-50 text-[13px] text-white-100 hover:bg-danger-60"
@@ -275,7 +272,6 @@ export const createVaultTableColumns = ({
                   onClose={() => setOpenModalVaultId(null)}
                   infoMessage="Boost the rate at which you receive Karma. The longer you lock your vault, the higher your boost, and the faster you accumulate Karma. You can add more SNT at any time, but withdrawing your SNT is only possible once the vault unlocks."
                 >
-                  {/* @ts-expect-error - Button component is not typed */}
                   <Button
                     variant="primary"
                     size="32"
@@ -317,7 +313,6 @@ export const createVaultTableColumns = ({
                     : null
                 }}
               >
-                {/* @ts-expect-error - Button component is not typed */}
                 <Button
                   variant="primary"
                   size="32"

apps/hub/src/app/_components/vaults/vaults-table.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 'use client'
 
 import { useMemo, useState } from 'react'
@@ -157,11 +156,10 @@ export function VaultsTable() {
           My vaults
         </h2>
         {isConnected && (
-          // @ts-expect-error - Button component is not typed
           <Button
             variant="outline"
             size="32"
-            onClick={createVault}
+            onClick={() => createVault()}
             className="w-full sm:w-auto"
           >
             <AddCircleIcon />

apps/hub/src/app/_hooks/useCompoundMultiplierPoints.ts

@@ -123,7 +123,10 @@ export function useCompoundMultiplierPoints(): UseCompoundMultiplierPointsReturn
       }
 
       // Get the current MP balance to show in the dialog
-      const formattedAmount = formatUnits(mpBalance || 0n, SNT_TOKEN.decimals)
+      const formattedAmount = formatUnits(
+        mpBalance?.totalUncompounded || 0n,
+        SNT_TOKEN.decimals
+      )
 
       sendVaultEvent({
         type: 'START_COMPOUND',