@seamapi/react 2.20.0 → 3.0.0-beta.1

package/src/lib/seam/access-codes/use-update-access-code.ts

@@ -1,46 +1,49 @@
+import type {
+  AccessCodesUpdateBody,
+  SeamHttpApiError,
+} from '@seamapi/http/connect'
+import type { AccessCode } from '@seamapi/types/connect'
 import {
   useMutation,
   type UseMutationResult,
   useQueryClient,
 } from '@tanstack/react-query'
-import type {
-  AccessCode,
-  AccessCodesListResponse,
-  AccessCodeUpdateRequest,
-  AccessCodeUpdateResponse,
-  ActionAttempt,
-  SeamError,
-} from 'seamapi'
 
 import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
 
 export type UseUpdateAccessCodeParams = never
-export type UseUpdateAccessCodeData = ActionAttempt<'UPDATE_ACCESS_CODE'>
-export type UseUpdateAccessCodeMutationParams = AccessCodeUpdateRequest
+
+export type UseUpdateAccessCodeData = undefined
+
+export type UseUpdateAccessCodeMutationVariables = Pick<
+  AccessCodesUpdateBody,
+  | 'device_id'
+  | 'access_code_id'
+  | 'code'
+  | 'name'
+  | 'starts_at'
+  | 'ends_at'
+  | 'type'
+>
 
 export function useUpdateAccessCode(): UseMutationResult<
   UseUpdateAccessCodeData,
-  SeamError,
-  UseUpdateAccessCodeMutationParams
+  SeamHttpApiError,
+  UseUpdateAccessCodeMutationVariables
 > {
   const { client } = useSeamClient()
   const queryClient = useQueryClient()
 
   return useMutation<
-    AccessCodeUpdateResponse['action_attempt'],
-    SeamError,
-    AccessCodeUpdateRequest
+    UseUpdateAccessCodeData,
+    SeamHttpApiError,
+    UseUpdateAccessCodeMutationVariables
   >({
-    mutationFn: async (mutationParams: UseUpdateAccessCodeMutationParams) => {
+    mutationFn: async (variables) => {
       if (client === null) throw new NullSeamClientError()
-
-      return await client.accessCodes.update(mutationParams)
+      await client.accessCodes.update(variables)
     },
     onSuccess: (_data, variables) => {
-      // There is no guarantee that the actual code has updated even if the
-      // request was succesful. To prevent stale data in the UI, the
-      // code below optimistically updates the data in cache.
-
       queryClient.setQueryData<AccessCode | null>(
         ['access_codes', 'get', { access_code_id: variables.access_code_id }],
         (accessCode) => {
@@ -52,15 +55,19 @@ export function useUpdateAccessCode(): UseMutationResult<
             ...accessCode,
             code: variables.code ?? accessCode.code,
             name: variables.name ?? accessCode.name,
+            starts_at: variables.starts_at ?? accessCode.starts_at,
+            ends_at: variables.ends_at ?? accessCode.ends_at,
+            type: variables.type ?? accessCode.type,
+            status: 'setting',
           }
         }
       )
 
-      queryClient.setQueryData<AccessCodesListResponse['access_codes']>(
-        ['access_codes', 'list', { device_id: variables.device_id }],
+      queryClient.setQueryData<AccessCode[]>(
+        ['access_codes', 'list'],
         (accessCodes) => {
           if (accessCodes == null) {
-            return
+            return accessCodes
           }
 
           return accessCodes.map((accessCode) => {
@@ -69,6 +76,7 @@ export function useUpdateAccessCode(): UseMutationResult<
                 ...accessCode,
                 code: variables.code ?? accessCode.code,
                 name: variables.name ?? accessCode.name,
+                status: 'setting',
               }
             }
 

package/src/lib/seam/client-sessions/use-client-session.ts

@@ -1,14 +1,12 @@
+import type { SeamHttpApiError } from '@seamapi/http/connect'
+import type { ClientSession } from '@seamapi/types/connect'
 import { useQuery } from '@tanstack/react-query'
-import type {
-  ClientSession,
-  ClientSessionsGetResponse,
-  SeamError,
-} from 'seamapi'
 
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
 import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
 
 export type UseClientSessionParams = never
+
 export type UseClientSessionData = ClientSession | null
 
 export function useClientSession(): UseSeamQueryResult<
@@ -16,15 +14,12 @@ export function useClientSession(): UseSeamQueryResult<
   UseClientSessionData
 > {
   const { client } = useSeamClient()
-  const { data, ...rest } = useQuery<
-    ClientSessionsGetResponse['client_session'] | null,
-    SeamError
-  >({
+  const { data, ...rest } = useQuery<UseClientSessionData, SeamHttpApiError>({
     enabled: client != null,
     queryKey: ['client_session', 'get'],
     queryFn: async () => {
       if (client == null) return null
-      return await client.clientSessions.get({})
+      return await client.clientSessions.get()
     },
   })
 

package/src/lib/seam/components/AccessCodeDetails/AccessCodeDetails.tsx

@@ -1,7 +1,7 @@
+import type { AccessCode } from '@seamapi/types/connect'
 import classNames from 'classnames'
 import { DateTime } from 'luxon'
 import { useState } from 'react'
-import type { AccessCode } from 'seamapi'
 
 import { CopyIcon } from 'lib/icons/Copy.js'
 import { useAccessCode } from 'lib/seam/access-codes/use-access-code.js'
@@ -49,9 +49,9 @@ export function AccessCodeDetails({
 }: AccessCodeDetailsProps): JSX.Element | null {
   useComponentTelemetry('AccessCodeDetails')
 
-  const { accessCode } = useAccessCode(accessCodeId)
+  const { accessCode } = useAccessCode({ access_code_id: accessCodeId })
   const [selectedDeviceId, selectDevice] = useState<string | null>(null)
-  const { mutate: deleteCode, isLoading: isDeleting } = useDeleteAccessCode()
+  const { mutate: deleteCode, isPending: isDeleting } = useDeleteAccessCode()
 
   if (accessCode == null) {
     return null
@@ -191,21 +191,25 @@ function ScheduleInfo({ accessCode }: { accessCode: AccessCode }): JSX.Element {
   }
   return (
     <div className='seam-times'>
-      <div>
-        <div className='seam-label'>{t.start}</div>
-        <div className='seam-date'>{formatDate(accessCode.starts_at)}</div>
-        <div className='seam-time'>{formatTime(accessCode.starts_at)}</div>
-      </div>
-      <div>
-        <div className='seam-label'>{t.end}</div>
-        <div className='seam-date'>{formatDate(accessCode.ends_at)}</div>
-        <div className='seam-time'>{formatTime(accessCode.ends_at)}</div>
-      </div>
+      {accessCode.starts_at != null && (
+        <div>
+          <div className='seam-label'>{t.start}</div>
+          <div className='seam-date'>{formatDate(accessCode.starts_at)}</div>
+          <div className='seam-time'>{formatTime(accessCode.starts_at)}</div>
+        </div>
+      )}
+      {accessCode.ends_at != null && (
+        <div>
+          <div className='seam-label'>{t.end}</div>
+          <div className='seam-date'>{formatDate(accessCode.ends_at)}</div>
+          <div className='seam-time'>{formatTime(accessCode.ends_at)}</div>
+        </div>
+      )}
     </div>
   )
 }
 
-function Duration(props: { accessCode: AccessCode }): JSX.Element {
+function Duration(props: { accessCode: AccessCode }): JSX.Element | null {
   const { accessCode } = props
 
   const hasStarted =
@@ -220,22 +224,26 @@ function Duration(props: { accessCode: AccessCode }): JSX.Element {
     )
   }
 
-  if (hasStarted) {
+  if (hasStarted && accessCode.ends_at != null) {
     return (
       <span>
-        <span className='seam-label'>Active</span> until{' '}
-        {formatDurationDate(accessCode.ends_at)} at{' '}
+        <span className='seam-label'>{t.active}</span> {t.until}{' '}
+        {formatDurationDate(accessCode.ends_at)} {t.at}{' '}
         {formatTime(accessCode.ends_at)}
       </span>
     )
   }
 
-  return (
-    <span>
-      Starts {formatDurationDate(accessCode.starts_at)} as{' '}
-      {formatTime(accessCode.starts_at)}
-    </span>
-  )
+  if (accessCode.starts_at != null) {
+    return (
+      <span>
+        {t.starts} {formatDurationDate(accessCode.starts_at)} {t.as}{' '}
+        {formatTime(accessCode.starts_at)}
+      </span>
+    )
+  }
+
+  return null
 }
 
 const formatDurationDate = (date: string): string =>
@@ -267,6 +275,11 @@ const t = {
   ongoing: 'Ongoing',
   start: 'Start',
   end: 'End',
+  starts: 'Starts',
+  active: 'Active',
+  until: 'until',
+  as: 'as',
+  at: 'at',
   editCode: 'Edit code',
   deleteCode: 'Delete code',
 }

package/src/lib/seam/components/AccessCodeDetails/AccessCodeDevice.tsx

@@ -1,7 +1,6 @@
-import { isLockDevice, type LockDevice } from 'seamapi'
-
 import { useDevice } from 'lib/seam/devices/use-device.js'
-import { useToggleLock } from 'lib/seam/devices/use-toggle-lock.js'
+import { isLockDevice, type LockDevice } from 'lib/seam/locks/lock-device.js'
+import { useToggleLock } from 'lib/seam/locks/use-toggle-lock.js'
 import { Button } from 'lib/ui/Button.js'
 import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 import { TextButton } from 'lib/ui/TextButton.js'
@@ -15,11 +14,11 @@ export function AccessCodeDevice({
   disableLockUnlock: boolean
   onSelectDevice: (deviceId: string) => void
 }): JSX.Element | null {
-  const { isLoading, device } = useDevice({
+  const { isPending, device } = useDevice({
     device_id: deviceId,
   })
 
-  if (isLoading) {
+  if (isPending) {
     return null
   }
 
@@ -31,6 +30,10 @@ export function AccessCodeDevice({
     return null
   }
 
+  if (device.can_program_online_access_codes == null) {
+    return null
+  }
+
   return (
     <Content
       device={device}
@@ -46,7 +49,7 @@ function Content(props: {
   onSelectDevice: (deviceId: string) => void
 }): JSX.Element {
   const { device, disableLockUnlock, onSelectDevice } = props
-  const toggleLock = useToggleLock(device)
+  const toggleLock = useToggleLock()
 
   const toggleLockLabel = device.properties.locked ? t.unlock : t.lock
 
@@ -68,7 +71,7 @@ function Content(props: {
       {!disableLockUnlock && (
         <Button
           onClick={() => {
-            toggleLock.mutate()
+            toggleLock.mutate(device)
           }}
         >
           {toggleLockLabel}

package/src/lib/seam/components/AccessCodeTable/AccessCodeHealthBar.tsx

@@ -1,15 +1,14 @@
-import type { AccessCode } from 'seamapi'
+import type { AccessCode } from '@seamapi/types/connect'
 
 import { CheckIcon } from 'lib/icons/Check.js'
 import { ExclamationCircleOutlineIcon } from 'lib/icons/ExclamationCircleOutline.js'
-import type { UseAccessCodesData } from 'lib/seam/access-codes/use-access-codes.js'
 import { TableFilterBar } from 'lib/ui/Table/TableFilterBar/TableFilterBar.js'
 import { TableFilterItem } from 'lib/ui/Table/TableFilterBar/TableFilterItem.js'
 
 export type AccessCodeFilter = 'access_code_issues'
 
 interface AccessCodeHealthBarProps {
-  accessCodes: Array<UseAccessCodesData[number]>
+  accessCodes: AccessCode[]
   errorFilter: (error: AccessCode['errors'][number]) => boolean
   warningFilter: (warning: AccessCode['warnings'][number]) => boolean
   filter: AccessCodeFilter | null

package/src/lib/seam/components/AccessCodeTable/AccessCodeMainIcon.tsx

@@ -1,10 +1,11 @@
+import type { AccessCode } from '@seamapi/types/connect'
+
 import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
 import { ExclamationCircleOutlineIcon } from 'lib/icons/ExclamationCircleOutline.js'
 import { TriangleWarningOutlineIcon } from 'lib/icons/TriangleWarningOutline.js'
-import type { UseAccessCodesData } from 'lib/seam/access-codes/use-access-codes.js'
 
 export interface AccessCodeMainIconProps {
-  accessCode: UseAccessCodesData[number]
+  accessCode: AccessCode
 }
 
 export function AccessCodeMainIcon({

package/src/lib/seam/components/AccessCodeTable/AccessCodeMenu.tsx

@@ -1,5 +1,6 @@
+import type { AccessCode } from '@seamapi/types/connect'
+
 import { CopyIcon } from 'lib/icons/Copy.js'
-import type { UseAccessCodeData } from 'lib/seam/access-codes/use-access-code.js'
 import { useDeleteAccessCode } from 'lib/seam/access-codes/use-delete-access-code.js'
 import { Button } from 'lib/ui/Button.js'
 import { copyToClipboard } from 'lib/ui/clipboard.js'
@@ -8,7 +9,7 @@ import { MoreActionsMenu } from 'lib/ui/Menu/MoreActionsMenu.js'
 import { useToggle } from 'lib/ui/use-toggle.js'
 
 export interface AccessCodeMenuProps {
-  accessCode: NonNullable<UseAccessCodeData>
+  accessCode: AccessCode
   onEdit: () => void
   onViewDetails: () => void
   disableEditAccessCode: boolean
@@ -47,13 +48,13 @@ function Content({
         <div className='seam-actions'>
           <Button
             onClick={toggleDeleteConfirmation}
-            disabled={deleteAccessCode.isLoading}
+            disabled={deleteAccessCode.isPending}
           >
             {t.cancelDelete}
           </Button>
           <Button
             variant='solid'
-            disabled={deleteAccessCode.isLoading}
+            disabled={deleteAccessCode.isPending}
             onClick={() => {
               deleteAccessCode.mutate({
                 access_code_id: accessCode.access_code_id,

package/src/lib/seam/components/AccessCodeTable/AccessCodeRow.tsx

@@ -1,6 +1,7 @@
+import type { AccessCode } from '@seamapi/types/connect'
+
 import { ExclamationCircleOutlineIcon } from 'lib/icons/ExclamationCircleOutline.js'
 import { TriangleWarningOutlineIcon } from 'lib/icons/TriangleWarningOutline.js'
-import type { UseAccessCodesData } from 'lib/seam/access-codes/use-access-codes.js'
 import { AccessCodeMainIcon } from 'lib/seam/components/AccessCodeTable/AccessCodeMainIcon.js'
 import { AccessCodeMenu } from 'lib/seam/components/AccessCodeTable/AccessCodeMenu.js'
 import { CodeDetails } from 'lib/seam/components/AccessCodeTable/CodeDetails.js'
@@ -9,7 +10,7 @@ import { TableRow } from 'lib/ui/Table/TableRow.js'
 import { Title } from 'lib/ui/typography/Title.js'
 
 export interface AccessCodeRowProps {
-  accessCode: UseAccessCodesData[number]
+  accessCode: AccessCode
   onClick: () => void
   onEdit: () => void
   disableEditAccessCode: boolean

package/src/lib/seam/components/AccessCodeTable/AccessCodeTable.tsx

@@ -1,12 +1,10 @@
+import type { AccessCode } from '@seamapi/types/connect'
 import classNames from 'classnames'
 import { useCallback, useMemo, useState } from 'react'
 
 import { compareByCreatedAtDesc } from 'lib/dates.js'
 import { AddIcon } from 'lib/icons/Add.js'
-import {
-  useAccessCodes,
-  type UseAccessCodesData,
-} from 'lib/seam/access-codes/use-access-codes.js'
+import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js'
 import { NestedAccessCodeDetails } from 'lib/seam/components/AccessCodeDetails/AccessCodeDetails.js'
 import {
   type AccessCodeFilter,
@@ -50,8 +48,6 @@ export interface AccessCodeTableProps extends CommonProps {
   heading?: string | null
 }
 
-type AccessCode = UseAccessCodesData[number]
-
 const defaultAccessCodeFilter = (
   accessCode: AccessCode,
   searchInputValue: string
@@ -296,7 +292,7 @@ export function AccessCodeTable({
 }
 
 function Content(props: {
-  accessCodes: Array<UseAccessCodesData[number]>
+  accessCodes: AccessCode[]
   onAccessCodeClick: (accessCodeId: string) => void
   onAccessCodeEdit: (accessCodeId: string) => void
   errorFilter: (error: AccessCode['errors'][number]) => boolean

package/src/lib/seam/components/AccessCodeTable/CodeDetails.tsx

@@ -1,5 +1,5 @@
+import type { AccessCode } from '@seamapi/types/connect'
 import { DateTime } from 'luxon'
-import type { AccessCode } from 'seamapi'
 
 import { useDevice } from 'lib/seam/devices/use-device.js'
 import { DotDivider } from 'lib/ui/layout/DotDivider.js'
@@ -23,7 +23,7 @@ export function CodeDetails(props: { accessCode: AccessCode }): JSX.Element {
   )
 }
 
-function Duration(props: { accessCode: AccessCode }): JSX.Element {
+function Duration(props: { accessCode: AccessCode }): JSX.Element | null {
   const { accessCode } = props
 
   const hasStarted =
@@ -38,7 +38,7 @@ function Duration(props: { accessCode: AccessCode }): JSX.Element {
     )
   }
 
-  if (hasStarted) {
+  if (hasStarted && accessCode.ends_at != null) {
     return (
       <span>
         {t.ends}: {formatDate(accessCode.ends_at)}{' '}
@@ -46,11 +46,15 @@ function Duration(props: { accessCode: AccessCode }): JSX.Element {
     )
   }
 
-  return (
-    <span>
-      {t.starts}: {formatDate(accessCode.starts_at)}
-    </span>
-  )
+  if (hasStarted && accessCode.starts_at != null) {
+    return (
+      <span>
+        {t.starts}: {formatDate(accessCode.starts_at)}
+      </span>
+    )
+  }
+
+  return null
 }
 
 const formatDate = (date: string): string =>

package/src/lib/seam/components/ClimateSettingScheduleDetails/ClimateSettingScheduleCard.tsx

@@ -1,5 +1,5 @@
+import type { ClimateSettingSchedule } from '@seamapi/types/connect'
 import { DateTime } from 'luxon'
-import type { ClimateSettingSchedule } from 'seamapi'
 
 import { ClimateSettingScheduleIcon } from 'lib/icons/ClimateSettingSchedule.js'
 import { ClimateSettingScheduleDeviceBar } from 'lib/seam/components/ClimateSettingScheduleDetails/ClimateSettingScheduleDeviceBar.js'
@@ -35,9 +35,9 @@ function Content(props: {
 }): JSX.Element | null {
   const { climateSettingScheduleId, onSelectDevice } = props
 
-  const { climateSettingSchedule } = useClimateSettingSchedule(
-    climateSettingScheduleId
-  )
+  const { climateSettingSchedule } = useClimateSettingSchedule({
+    climate_setting_schedule_id: climateSettingScheduleId,
+  })
 
   if (climateSettingSchedule == null) {
     return null

package/src/lib/seam/components/ClimateSettingScheduleDetails/ClimateSettingScheduleDetails.tsx

@@ -45,9 +45,9 @@ export function ClimateSettingScheduleDetails({
 }: ClimateSettingScheduleDetailsProps): JSX.Element | null {
   useComponentTelemetry('ClimateSettingScheduleDetails')
 
-  const { climateSettingSchedule } = useClimateSettingSchedule(
-    climateSettingScheduleId
-  )
+  const { climateSettingSchedule } = useClimateSettingSchedule({
+    climate_setting_schedule_id: climateSettingScheduleId,
+  })
 
   const { mutate, isSuccess, isError } = useUpdateClimateSettingSchedule()
 

package/src/lib/seam/components/ClimateSettingScheduleDetails/ClimateSettingScheduleDeviceBar.tsx

@@ -1,7 +1,9 @@
-import { isThermostatDevice, type ThermostatDevice } from 'seamapi'
-
 import { ChevronWideIcon } from 'lib/icons/ChevronWide.js'
 import { useDevice } from 'lib/seam/devices/use-device.js'
+import {
+  isThermostatDevice,
+  type ThermostatDevice,
+} from 'lib/seam/thermostats/thermostat-device.js'
 import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
 import { ClimateSettingStatus } from 'lib/ui/thermostat/ClimateSettingStatus.js'
 
@@ -12,11 +14,11 @@ export function ClimateSettingScheduleDeviceBar({
   deviceId: string
   onSelectDevice: (deviceId: string) => void
 }): JSX.Element | null {
-  const { isLoading, device } = useDevice({
+  const { isPending, device } = useDevice({
     device_id: deviceId,
   })
 
-  if (isLoading) {
+  if (isPending) {
     return null
   }
 

package/src/lib/seam/components/ClimateSettingScheduleTable/ClimateSettingScheduleRow.tsx

@@ -1,12 +1,13 @@
+import type { ClimateSettingSchedule } from '@seamapi/types/connect'
+
 import { ClimateSettingScheduleIcon } from 'lib/icons/ClimateSettingSchedule.js'
 import { ClimateSettingScheduleRowDetails } from 'lib/seam/components/ClimateSettingScheduleTable/ClimateSettingScheduleRowDetails.js'
-import type { UseClimateSettingSchedulesData } from 'lib/seam/thermostats/climate-setting-schedules/use-climate-setting-schedules.js'
 import { TableCell } from 'lib/ui/Table/TableCell.js'
 import { TableRow } from 'lib/ui/Table/TableRow.js'
 import { Title } from 'lib/ui/typography/Title.js'
 
 interface ClimateSettingScheduleRowProps {
-  climateSettingSchedule: UseClimateSettingSchedulesData[number]
+  climateSettingSchedule: ClimateSettingSchedule
   onClick: () => void
 }
 

package/src/lib/seam/components/ClimateSettingScheduleTable/ClimateSettingScheduleRowDetails.tsx

@@ -1,5 +1,5 @@
+import type { ClimateSettingSchedule } from '@seamapi/types/connect'
 import { DateTime } from 'luxon'
-import type { ClimateSettingSchedule } from 'seamapi'
 
 import { useDevice } from 'lib/seam/devices/use-device.js'
 import { DotDivider } from 'lib/ui/layout/DotDivider.js'

package/src/lib/seam/components/ClimateSettingScheduleTable/ClimateSettingScheduleTable.tsx

@@ -1,6 +1,6 @@
+import type { ClimateSettingSchedule } from '@seamapi/types/connect'
 import classNames from 'classnames'
 import { useCallback, useMemo, useState } from 'react'
-import type { ClimateSettingSchedule } from 'seamapi'
 
 import { compareByCreatedAtDesc } from 'lib/dates.js'
 import { NestedClimateSettingScheduleDetails } from 'lib/seam/components/ClimateSettingScheduleDetails/ClimateSettingScheduleDetails.js'
@@ -9,10 +9,7 @@ import {
   type CommonProps,
   withRequiredCommonProps,
 } from 'lib/seam/components/common-props.js'
-import {
-  useClimateSettingSchedules,
-  type UseClimateSettingSchedulesData,
-} from 'lib/seam/thermostats/climate-setting-schedules/use-climate-setting-schedules.js'
+import { useClimateSettingSchedules } from 'lib/seam/thermostats/climate-setting-schedules/use-climate-setting-schedules.js'
 import { useComponentTelemetry } from 'lib/telemetry/index.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { LoadingToast } from 'lib/ui/LoadingToast/LoadingToast.js'
@@ -187,7 +184,7 @@ export function ClimateSettingScheduleTable({
 }
 
 function Content(props: {
-  climateSettingSchedules: Array<UseClimateSettingSchedulesData[number]>
+  climateSettingSchedules: ClimateSettingSchedule[]
   onClimateSettingScheduleClick: (climateSettingScheduleId: string) => void
 }): JSX.Element {
   const { climateSettingSchedules, onClimateSettingScheduleClick } = props

package/src/lib/seam/components/ConnectAccountButton/ConnectAccountButton.tsx

@@ -18,7 +18,7 @@ export function ConnectAccountButton({
 }: ConnectAccountButtonProps = {}): JSX.Element {
   useComponentTelemetry('ConnectAccountButton')
 
-  const { isLoading, mutate } = useCreateConnectWebview({
+  const { isPending, mutate } = useCreateConnectWebview({
     willNavigateToWebview: true,
   })
 
@@ -34,7 +34,7 @@ export function ConnectAccountButton({
       size='small'
       onClick={handleClick}
       className={className}
-      disabled={isLoading}
+      disabled={isPending}
     >
       {t.connectAccount}
     </Button>