Merge pull request #291 from Concordium/frontend-typecheck

Fix frontend type warnings
Concordium · Nov 5, 2024 · 93eda76 · 93eda76
2 parents cbefa26 + 61e9b9f
commit 93eda76
Show file tree

Hide file tree

Showing 73 changed files with 354 additions and 312 deletions.
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
@@ -59,10 +59,10 @@ export default defineNuxtConfig({
 	// Lock default values for Nuxt to what they were at this date.
 	compatibilityDate: '2024-11-01',
 	// TypeScript configurations.
-	// typescript: {
-	// 	// Enable strict checks.
-	// 	strict: true,
-	// 	// Enable type-checking at build time.
-	// 	typeCheck: true,
-	// },
+	typescript: {
+		// Enable strict checks.
+		strict: true,
+		// Enable type-checking at build time.
+		typeCheck: true,
+	},
 })
diff --git a/frontend/src/components/Accounts/AccountDetailsAccountStatement.vue b/frontend/src/components/Accounts/AccountDetailsAccountStatement.vue
@@ -133,7 +133,7 @@
 			<div class="col-span-1 flex justify-end">
 				<a
 					class="bg-theme-button-primary px-8 py-3 hover:bg-theme-button-primary-hover rounded"
-					:href="exportUrl(accountAddress, chosenMonth)"
+					:href="exportUrl(accountAddress, chosenMonth!)"
 				>
 					<span class="hidden md:inline">Export</span>
 					<DownloadIcon class="h-4 inline align-text-top" />
@@ -149,7 +149,7 @@
 				:max-date="currentMonth"
 				:default-month="currentMonth.getMonth() + 1"
 				@change="
-					update => {
+					(update: any) => {
 						chosenMonth = buildMonthInput(update.year, update.monthIndex)
 					}
 				"
@@ -159,6 +159,7 @@
 </template>
 
 <script lang="ts" setup>
+// @ts-expect-error No tyoe definitions for 'vue-month-picker' library.
 import { MonthPickerInput } from 'vue-month-picker'
 import { DownloadIcon } from '@heroicons/vue/solid/index.js'
 import Amount from '~/components/atoms/Amount.vue'
@@ -196,7 +197,6 @@ function buildMonthInput(year: number, month: number) {
 /// if no date is given, undefined is returned.
 function toMonthInput(date?: Date): string | undefined {
 	if (date) {
-		const year = date.getFullYear()
 		return buildMonthInput(date.getFullYear(), date.getMonth() + 1)
 	}
 	return undefined

diff --git a/frontend/src/components/Accounts/AccountDetailsRewards.vue b/frontend/src/components/Accounts/AccountDetailsRewards.vue
@@ -71,7 +71,7 @@ import { useDateNow } from '~/composables/useDateNow'
 import {
 	type PageInfo,
 	type AccountReward,
-	Account,
+	type Account,
 	MetricsPeriod,
 } from '~/types/generated'
 import { useAccountRewardMetricsQuery } from '~/queries/useAccountRewardMetricsQuery'

diff --git a/frontend/src/components/Accounts/AccountDetailsToken.vue b/frontend/src/components/Accounts/AccountDetailsToken.vue
@@ -50,7 +50,7 @@
 import TokenLink from '../molecules/TokenLink.vue'
 import ContractLink from '../molecules/ContractLink.vue'
 import TokenId from '../molecules/TokenId.vue'
-import { Account, AccountToken, PageInfo } from '~~/src/types/generated.js'
+import type { Account, AccountToken, PageInfo } from '~~/src/types/generated.js'
 import { useBreakpoint, Breakpoint } from '~/composables/useBreakpoint'
 import type { PaginationTarget } from '~/composables/usePagination'
 import TokenAmount from '~/components/atoms/TokenAmount.vue'

diff --git a/frontend/src/components/Contracts/ContractDetailsContent.vue b/frontend/src/components/Contracts/ContractDetailsContent.vue
@@ -108,14 +108,14 @@ import ContractDetailsEvents from './ContractDetailsEvents.vue'
 import ContractDetailsTokens from './ContractDetailsTokens.vue'
 import DrawerContent from '~/components/Drawer/DrawerContent.vue'
 import DetailsCard from '~/components/DetailsCard.vue'
-import { Contract } from '~~/src/types/generated'
+import type { Contract } from '~~/src/types/generated'
 import {
 	convertTimestampToRelative,
 	formatTimestamp,
 } from '~~/src/utils/format'
 import ContractDetailsRejectEvents from '~/components/Contracts/ContractDetailsRejectEvents.vue'
-import { PaginationOffsetInfo } from '~~/src/composables/usePaginationOffset'
-import { PageDropdownInfo } from '~~/src/composables/usePageDropdown'
+import type { PaginationOffsetInfo } from '~~/src/composables/usePaginationOffset'
+import type { PageDropdownInfo } from '~~/src/composables/usePageDropdown'
 import { Breakpoint } from '~~/src/composables/useBreakpoint'
 
 const { NOW } = useDateNow()

diff --git a/frontend/src/components/Contracts/ContractDetailsEvents.vue b/frontend/src/components/Contracts/ContractDetailsEvents.vue
@@ -8,7 +8,10 @@
 		</TableRow>
 	</TableHead>
 	<TableBody>
-		<TableRow v-for="(contractEvent, i) in contractEvents" :key="contractEvent">
+		<TableRow
+			v-for="(contractEvent, i) in contractEvents"
+			:key="contractEvent.transactionHash + contractEvent.event.__typename"
+		>
 			<TableTd class="numerical">
 				<TransactionLink :hash="contractEvent.transactionHash" />
 			</TableTd>
@@ -50,14 +53,14 @@
 						<div>From Module</div>
 						<div>
 							<!-- Uses alias from query -->
-							<ModuleLink :module-reference="contractEvent.event.fromModule" />
+							<ModuleLink :module-reference="contractEvent.event.from" />
 						</div>
 					</div>
 					<div>
 						<div>To Module</div>
 						<div>
 							<!-- Uses alias from query -->
-							<ModuleLink :module-reference="contractEvent.event.toModule" />
+							<ModuleLink :module-reference="contractEvent.event.to" />
 						</div>
 					</div>
 				</DetailsView>
@@ -104,7 +107,7 @@ import ContractTransfer from './Events/ContractTransfer.vue'
 import ModuleLink from '~/components/molecules/ModuleLink.vue'
 import ContractUpdated from '~/components/Contracts/Events/ContractUpdated.vue'
 import Tooltip from '~~/src/components/atoms/Tooltip.vue'
-import { ContractEvent } from '~~/src/types/generated'
+import type { ContractEvent } from '~~/src/types/generated'
 import TransactionLink from '~~/src/components/molecules/TransactionLink.vue'
 import { convertTimestampToRelative } from '~~/src/utils/format'
 

diff --git a/frontend/src/components/Contracts/ContractDetailsRejectEvents.vue b/frontend/src/components/Contracts/ContractDetailsRejectEvents.vue
@@ -10,7 +10,7 @@
 	<TableBody>
 		<TableRow
 			v-for="(contractRejectEvent, i) in contractRejectEvents"
-			:key="contractRejectEvent"
+			:key="contractRejectEvent.transactionHash"
 		>
 			<TableTd class="numerical">
 				<TransactionLink :hash="contractRejectEvent.transactionHash" />
@@ -92,13 +92,13 @@ import DateTimeWithLineBreak from '../Details/DateTimeWithLineBreak.vue'
 import MessageHEX from '../Details/MessageHEX.vue'
 import Message from '../Details/Message.vue'
 import DetailsView from '../Details/DetailsView.vue'
-import InfoTooltip from '../atoms/InfoTooltip.vue'
 import { getEntrypoint } from './Events/contractEvents'
-import { ContractRejectEvent } from '~~/src/types/generated'
-import TransactionLink from '~~/src/components/molecules/TransactionLink.vue'
-import Tooltip from '~~/src/components/atoms/Tooltip.vue'
-import { formatTimestamp } from '~~/src/utils/format'
-import { RECEIVE_NAME } from '~~/src/utils/infoTooltips'
+import InfoTooltip from '~/components/atoms/InfoTooltip.vue'
+import type { ContractRejectEvent } from '~/types/generated'
+import TransactionLink from '~/components/molecules/TransactionLink.vue'
+import Tooltip from '~/components/atoms/Tooltip.vue'
+import { formatTimestamp } from '~/utils/format'
+import { RECEIVE_NAME } from '~/utils/infoTooltips'
 
 type Props = {
 	contractRejectEvents: ContractRejectEvent[]

diff --git a/frontend/src/components/Contracts/ContractDetailsTokens.vue b/frontend/src/components/Contracts/ContractDetailsTokens.vue
@@ -7,7 +7,10 @@
 		</TableRow>
 	</TableHead>
 	<TableBody>
-		<TableRow v-for="contractToken in tokensWithMetadata" :key="contractToken">
+		<TableRow
+			v-for="contractToken in tokensWithMetadata"
+			:key="contractToken.tokenAddress"
+		>
 			<TableTd>
 				<TokenLink
 					:token-address="contractToken.tokenAddress"
@@ -31,12 +34,12 @@
 	</TableBody>
 </template>
 <script lang="ts" setup>
-import { ComputedRef } from 'vue'
+import type { ComputedRef } from 'vue'
 import TokenLink from '../molecules/TokenLink.vue'
 import TokenId from '../molecules/TokenId.vue'
 import TokenAmount from '../atoms/TokenAmount.vue'
-import { Token } from '~~/src/types/generated'
-import { TokenWithMetadata, fetchMetadata } from '~~/src/types/tokens'
+import type { Token } from '~~/src/types/generated'
+import { type TokenWithMetadata, fetchMetadata } from '~~/src/types/tokens'
 
 type Props = {
 	contractTokens: Token[]

diff --git a/frontend/src/components/Contracts/Events/ContractCall.vue b/frontend/src/components/Contracts/Events/ContractCall.vue
@@ -56,9 +56,9 @@ import MessageHEX from '../../Details/MessageHEX.vue'
 import Message from '../../Details/Message.vue'
 import LogsHEX from '../../Details/LogsHEX.vue'
 import Logs from '../../Details/Logs.vue'
-import { ContractCall } from '../../../../src/types/generated'
-import InfoTooltip from '../../atoms/InfoTooltip.vue'
 import { getEntrypoint } from './contractEvents'
+import type { ContractCall } from '~~/src/types/generated'
+import InfoTooltip from '~/components/atoms/InfoTooltip.vue'
 import Amount from '~/components/atoms/Amount.vue'
 import ContractLink from '~/components/molecules/ContractLink.vue'
 

diff --git a/frontend/src/components/Contracts/Events/ContractInitialized.vue b/frontend/src/components/Contracts/Events/ContractInitialized.vue
@@ -34,9 +34,9 @@
 <script lang="ts" setup>
 import LogsHEX from '../../Details/LogsHEX.vue'
 import Logs from '../../Details/Logs.vue'
-import { ContractInitialized } from '../../../../src/types/generated'
 import InfoTooltip from '../../atoms/InfoTooltip.vue'
 import ModuleLink from '../../molecules/ModuleLink.vue'
+import type { ContractInitialized } from '~~/src/types/generated'
 import Amount from '~/components/atoms/Amount.vue'
 import { MODULE } from '~~/src/utils/infoTooltips'
 

diff --git a/frontend/src/components/Contracts/Events/ContractTransfer.vue b/frontend/src/components/Contracts/Events/ContractTransfer.vue
@@ -13,8 +13,8 @@
 	</div>
 </template>
 <script lang="ts" setup>
-import { Transferred } from '../../../../src/types/generated'
 import AddressLink from '../../molecules/AddressLink.vue'
+import type { Transferred } from '~~/src/types/generated'
 import Amount from '~/components/atoms/Amount.vue'
 
 type Props = {

diff --git a/frontend/src/components/Contracts/Events/ContractUpdated.vue b/frontend/src/components/Contracts/Events/ContractUpdated.vue
@@ -58,17 +58,17 @@
 	/>
 </template>
 <script lang="ts" setup>
-import { ContractUpdated } from '../../../../src/types/generated'
 import MessageHEX from '../../Details/MessageHEX.vue'
 import Message from '../../Details/Message.vue'
 import LogsHEX from '../../Details/LogsHEX.vue'
 import Logs from '../../Details/Logs.vue'
-import InfoTooltip from '../../atoms/InfoTooltip.vue'
 import { getEntrypoint } from './contractEvents'
+import InfoTooltip from '~/components/atoms/InfoTooltip.vue'
+import type { ContractUpdated } from '~~/src/types/generated'
 import AccountLink from '~/components/molecules/AccountLink.vue'
 import ContractLink from '~/components/molecules/ContractLink.vue'
 import Amount from '~/components/atoms/Amount.vue'
-import { RECEIVE_NAME } from '~~/src/utils/infoTooltips'
+import { RECEIVE_NAME } from '~/utils/infoTooltips'
 
 type Props = {
 	contractEvent: ContractUpdated

diff --git a/frontend/src/components/Details/DetailsTable.vue b/frontend/src/components/Details/DetailsTable.vue
@@ -1,29 +1,32 @@
 <template>
 	<div>
-		<PageDropdown 
+		<PageDropdown
 			v-if="MIN_PAGE_SIZE < totalCount"
-			:page-dropdown-info="props.pageDropdownInfo"/>
-		<Table 
+			:page-dropdown-info="props.pageDropdownInfo"
+		/>
+		<Table
 			:class="[
 				'contract-detail',
-				 {
+				{
 					'no-last': totalCount <= props.pageOffsetInfo.take.value,
-					'fetching': fetching
-				}]">
+					fetching: fetching,
+				},
+			]"
+		>
 			<slot />
 		</Table>
-		<PaginationOffset 
-			:total-count="props.totalCount"
-			:info="pageOffsetInfo"
-		/>
+		<PaginationOffset :total-count="props.totalCount" :info="pageOffsetInfo" />
 	</div>
 </template>
 
 <script lang="ts" setup>
 import PaginationOffset from '../PaginationOffset.vue'
 import PageDropdown from '../PageDropdown.vue'
-import { MIN_PAGE_SIZE, PageDropdownInfo } from '~~/src/composables/usePageDropdown'
-import { PaginationOffsetInfo } from '~~/src/composables/usePaginationOffset'
+import {
+	MIN_PAGE_SIZE,
+	type PageDropdownInfo,
+} from '~~/src/composables/usePageDropdown'
+import type { PaginationOffsetInfo } from '~~/src/composables/usePaginationOffset'
 
 type Props = {
 	totalCount: number
@@ -33,7 +36,6 @@ type Props = {
 }
 
 const props = defineProps<Props>()
-
 </script>
 <style>
 .contract-detail table td {
@@ -58,5 +60,4 @@ const props = defineProps<Props>()
 .no-last table tr:last-child {
 	border-bottom: none;
 }
-
 </style>
diff --git a/frontend/src/components/Details/Logs.vue b/frontend/src/components/Details/Logs.vue
@@ -25,10 +25,10 @@
 	</div>
 </template>
 <script lang="ts" setup>
-import { Maybe, StringConnection } from '../../types/generated'
-import TextCopy from '../../components/atoms/TextCopy.vue'
-import InfoTooltip from '../atoms/InfoTooltip.vue'
 import Modal from './Modal.vue'
+import type { Maybe, StringConnection } from '~/types/generated'
+import TextCopy from '~/components/atoms/TextCopy.vue'
+import InfoTooltip from '~/components/atoms/InfoTooltip.vue'
 
 type Props = {
 	events?: Maybe<StringConnection>

diff --git a/frontend/src/components/Details/LogsHEX.vue b/frontend/src/components/Details/LogsHEX.vue
@@ -1,7 +1,8 @@
 <template>
 	<div class="w-full">
-		<div>Logs (hexadecimal):
-			<InfoTooltip text="Logs produced by contract execution."/>
+		<div>
+			Logs (hexadecimal):
+			<InfoTooltip text="Logs produced by contract execution." />
 		</div>
 		<template v-if="eventsAsHex?.nodes?.length">
 			<div v-for="(event, i) in eventsAsHex.nodes" :key="i" class="flex">
@@ -17,9 +18,9 @@
 	</div>
 </template>
 <script lang="ts" setup>
-import { Maybe, StringConnection } from '../../types/generated'
-import TextCopy from '../../components/atoms/TextCopy.vue'
 import InfoTooltip from '../atoms/InfoTooltip.vue'
+import type { Maybe, StringConnection } from '~/types/generated'
+import TextCopy from '~/components/atoms/TextCopy.vue'
 
 type Props = {
 	eventsAsHex?: Maybe<StringConnection>