diff --git a/next.config.js b/next.config.js
index 4ad1365..b4b4a8c 100644
--- a/next.config.js
+++ b/next.config.js
@@ -27,11 +27,10 @@ const nextConfig = {
 		return [
 			{
 				source: '/api/:path*',
-				destination: `${process.env.API_URL}/api/:path*`
-			}
-		]
+				destination: `${process.env.API_URL}/api/:path*`,
+			},
+		];
 	},
-
 };
 
 export default nextConfig;
diff --git a/package.json b/package.json
index 0ff61be..b62c921 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
 		"build": "next build",
 		"start": "next start -p 30289",
 		"lint": "next lint",
+		"lint:fix": "eslint . --fix",
 		"format": "prettier --write .",
 		"format:check": "prettier --check .",
 		"prepare": "husky"
diff --git a/src/components/UI/Switch/Switch.tsx b/src/components/UI/Switch/Switch.tsx
index 82c9b5e..cc82012 100644
--- a/src/components/UI/Switch/Switch.tsx
+++ b/src/components/UI/Switch/Switch.tsx
@@ -7,4 +7,4 @@ interface IProps {
 	disabled?: boolean;
 }
 
-export const Switch: FC<IProps> = ({ ...rest }) => <ANTDSwitch {...rest} />;
\ No newline at end of file
+export const Switch: FC<IProps> = ({ ...rest }) => <ANTDSwitch {...rest} />;
diff --git a/src/components/default/Header/NavBar/NavBar.tsx b/src/components/default/Header/NavBar/NavBar.tsx
index 423dd16..140ace6 100644
--- a/src/components/default/Header/NavBar/NavBar.tsx
+++ b/src/components/default/Header/NavBar/NavBar.tsx
@@ -37,10 +37,7 @@ function NavBar(props: NavBarProps) {
 		}
 
 		return (
-			<Link
-				href={href}
-				className={linkClass}
-			>
+			<Link href={href} className={linkClass}>
 				<Img />
 				<h6>{title}</h6>
 				<NotificationIndicator count={notifications} />
diff --git a/src/interfaces/common/ContextValue.ts b/src/interfaces/common/ContextValue.ts
index 974cc8e..43ed69e 100644
--- a/src/interfaces/common/ContextValue.ts
+++ b/src/interfaces/common/ContextValue.ts
@@ -3,40 +3,40 @@ import { GetUserResData } from '../responses/user/GetUserRes';
 import { GetConfigResData } from '../responses/config/GetConfigRes';
 
 export interface Asset {
-    name: string;
-    ticker: string;
-    assetId: string;
-    decimalPoint: number;
-    balance: string;
-    unlockedBalance: string;
+	name: string;
+	ticker: string;
+	assetId: string;
+	decimalPoint: number;
+	balance: string;
+	unlockedBalance: string;
 }
 
 export interface Transfer {
-    amount: string;
-    assetId: string;
-    incoming: boolean;
+	amount: string;
+	assetId: string;
+	incoming: boolean;
 }
 
 export interface Transaction {
-    isConfirmed: boolean;
-    txHash: string;
-    blobSize: number;
-    timestamp: number;
-    height: number;
-    paymentId: string;
-    comment: string;
-    fee: string;
-    isInitiator: boolean;
-    transfers: Transfer[];
+	isConfirmed: boolean;
+	txHash: string;
+	blobSize: number;
+	timestamp: number;
+	height: number;
+	paymentId: string;
+	comment: string;
+	fee: string;
+	isInitiator: boolean;
+	transfers: Transfer[];
 }
 
 interface WalletState {
-    address: string;
-    alias: string;
-    balance: string;
-    assets: Asset[];
-    transactions: Transaction[];
-	connected: boolean
+	address: string;
+	alias: string;
+	balance: string;
+	assets: Asset[];
+	transactions: Transaction[];
+	connected: boolean;
 }
 
 type UserState = GetUserResData | null;
@@ -75,7 +75,7 @@ type ContextAction =
 	| {
 			type: 'CLOSED_NOTIFICATIONS_UPDATED';
 			payload: number[];
-	  };	
+	  };
 
 interface ContextValue {
 	state: ContextState;
diff --git a/src/pages/admin/index.tsx b/src/pages/admin/index.tsx
index 1d4c4e8..fd55c4d 100644
--- a/src/pages/admin/index.tsx
+++ b/src/pages/admin/index.tsx
@@ -28,12 +28,12 @@ interface DateState {
 }
 
 interface CurrencyType {
-  name: string;
+	name: string;
 }
 
 interface PairType {
-  id: string | number; 
-  first_currency: CurrencyType;
+	id: string | number;
+	first_currency: CurrencyType;
 }
 
 const AdminPanel: React.FC = () => {
@@ -79,7 +79,7 @@ const AdminPanel: React.FC = () => {
 			if (response.data.success) {
 				const fetchedAdmins = response.data.data;
 				setAdmins(
-					fetchedAdmins.map((admin: {alias: string, isOwner: boolean, id: string}) => ({
+					fetchedAdmins.map((admin: { alias: string; isOwner: boolean; id: string }) => ({
 						alias: admin.alias,
 						isOwner: admin.isOwner,
 						key: admin.id,
@@ -185,7 +185,7 @@ const AdminPanel: React.FC = () => {
 			if (data.success) {
 				fetchAdmins();
 			}
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		} catch (error: any) {
 			message.error({
 				content:
diff --git a/src/pages/dex/orders/OrdersTable/OrdersTable.tsx b/src/pages/dex/orders/OrdersTable/OrdersTable.tsx
index 4406de9..1519ef2 100644
--- a/src/pages/dex/orders/OrdersTable/OrdersTable.tsx
+++ b/src/pages/dex/orders/OrdersTable/OrdersTable.tsx
@@ -4,7 +4,7 @@ import { ReactComponent as DeleteIcon } from '@/assets/images/UI/delete.svg';
 import { ReactComponent as NoOffersIcon } from '@/assets/images/UI/no_offers.svg';
 import EmptyLink from '@/components/UI/EmptyLink/EmptyLink';
 import { notationToString, toStandardDateString } from '@/utils/utils';
-import { cancelOrder, getUserOrders, } from '@/utils/methods';
+import { cancelOrder, getUserOrders } from '@/utils/methods';
 import OrdersTableProps from '@/interfaces/props/pages/dex/orders/OrdersTable/OrdersTableProps';
 import { UserOrderData } from '@/interfaces/responses/orders/GetUserOrdersRes';
 import Decimal from 'decimal.js';
diff --git a/src/pages/dex/trading/CandleChart/CandleChart.tsx b/src/pages/dex/trading/CandleChart/CandleChart.tsx
index 9a261ec..6ec28c8 100644
--- a/src/pages/dex/trading/CandleChart/CandleChart.tsx
+++ b/src/pages/dex/trading/CandleChart/CandleChart.tsx
@@ -53,7 +53,7 @@ function CandleChart(props: CandleChartProps) {
 				}));
 
 				for (const decimal of decimals) {
-					 if (decimal.value !== undefined) {
+					if (decimal.value !== undefined) {
 						if (decimal.value.lessThan(0.00001)) {
 							e[decimal.index] = 0;
 						}
@@ -150,7 +150,7 @@ function CandleChart(props: CandleChartProps) {
 					show: true,
 					type: 'line',
 					label: {
-						formatter: (params: {value: string}) => timestampToString(params.value),
+						formatter: (params: { value: string }) => timestampToString(params.value),
 						backgroundColor: '#4A90E2',
 						color: '#ffffff',
 					},
@@ -163,7 +163,7 @@ function CandleChart(props: CandleChartProps) {
 				scale: true,
 				splitArea: { show: false },
 				min: 0,
-				max: (value: {max: string}) => new Decimal(value.max).mul(1.1).toNumber(),
+				max: (value: { max: string }) => new Decimal(value.max).mul(1.1).toNumber(),
 				axisPointer: {
 					show: true,
 					type: 'line',
diff --git a/src/pages/dex/trading/InputPanelItem/InputPanelItem.module.scss b/src/pages/dex/trading/InputPanelItem/InputPanelItem.module.scss
index ce93156..d79f64d 100644
--- a/src/pages/dex/trading/InputPanelItem/InputPanelItem.module.scss
+++ b/src/pages/dex/trading/InputPanelItem/InputPanelItem.module.scss
@@ -1,218 +1,218 @@
 .input_panel__item {
-  width: 100%;
+	width: 100%;
 
-  > div:first-child {
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: 20px;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    margin-bottom: 20px;
-  }
+	> div:first-child {
+		display: flex;
+		justify-content: space-between;
+		padding-bottom: 20px;
+		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+		margin-bottom: 20px;
+	}
 
-  > div:last-child {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
+	> div:last-child {
+		display: flex;
+		flex-direction: column;
+		gap: 20px;
 
-    > .buy_btn {
-      background-color: #16d1d6;
+		> .buy_btn {
+			background-color: #16d1d6;
 
-      &:hover {
-        background-color: #45dade;
-      }
-    }
+			&:hover {
+				background-color: #45dade;
+			}
+		}
 
-    > .sell_btn {
-      background-color: #ff6767;
+		> .sell_btn {
+			background-color: #ff6767;
 
-      &:hover {
-        background-color: #ff8585;
-      }
-    }
+			&:hover {
+				background-color: #ff8585;
+			}
+		}
 
-    .input_panel__range {
-      margin-top: 10px;
-    }
+		.input_panel__range {
+			margin-top: 10px;
+		}
 
-    .input_panel__expiration {
-      display: flex;
-      justify-content: space-between;
-      gap: 20px;
+		.input_panel__expiration {
+			display: flex;
+			justify-content: space-between;
+			gap: 20px;
 
-      h6 {
-        white-space: nowrap;
-      }
+			h6 {
+				white-space: nowrap;
+			}
 
-      .expiration__dropdown {
-        width: 100%;
-      }
+			.expiration__dropdown {
+				width: 100%;
+			}
 
-      > div:first-child {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-      }
+			> div:first-child {
+				display: flex;
+				align-items: center;
+				gap: 6px;
+			}
 
-      @media screen and (max-width: 1500px) {
-        flex-wrap: wrap;
-      }
+			@media screen and (max-width: 1500px) {
+				flex-wrap: wrap;
+			}
 
-      @media screen and (max-width: 1000px) {
-        flex-wrap: nowrap;
-      }
+			@media screen and (max-width: 1000px) {
+				flex-wrap: nowrap;
+			}
 
-      @media screen and (max-width: 530px) {
-        flex-wrap: wrap;
-      }
-    }
+			@media screen and (max-width: 530px) {
+				flex-wrap: wrap;
+			}
+		}
 
-    .labeled_input {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
+		.labeled_input {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
 
-      h6 {
-        color: var(--font-dimmed-color);
-      }
+			h6 {
+				color: var(--font-dimmed-color);
+			}
 
-      > div {
-        width: 100%;
-        position: relative;
-        background-color: var(--bordered-input-bg);
-        border: 1px solid var(--window-border-color);
-        border-radius: 8px;
-        display: flex;
-        overflow: hidden;
+			> div {
+				width: 100%;
+				position: relative;
+				background-color: var(--bordered-input-bg);
+				border: 1px solid var(--window-border-color);
+				border-radius: 8px;
+				display: flex;
+				overflow: hidden;
 
-        input {
-          width: 100%;
-          padding: 16px 15px;
-          background-color: transparent;
-          border: none;
-        }
+				input {
+					width: 100%;
+					padding: 16px 15px;
+					background-color: transparent;
+					border: none;
+				}
 
-        .labeled_input__value {
-          padding-right: 15px;
-          display: flex;
-          align-items: center;
+				.labeled_input__value {
+					padding-right: 15px;
+					display: flex;
+					align-items: center;
 
-          > p {
-            color: var(--font-dimmed-color);
-          }
-        }
+					> p {
+						color: var(--font-dimmed-color);
+					}
+				}
 
-        .labeled_input__currency {
-          min-width: 82px;
-          max-width: 150px;
-          padding: 0 15px;
-          background-color: var(--dex-input-currency);
-          display: flex;
-          align-items: center;
-          justify-content: center;
+				.labeled_input__currency {
+					min-width: 82px;
+					max-width: 150px;
+					padding: 0 15px;
+					background-color: var(--dex-input-currency);
+					display: flex;
+					align-items: center;
+					justify-content: center;
 
-          > p {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-          }
-        }
-      }
+					> p {
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+					}
+				}
+			}
 
-      &.labeled_input__invalid > div {
-        border-color: #ff6767;
-      }
+			&.labeled_input__invalid > div {
+				border-color: #ff6767;
+			}
 
-      @media screen and (max-width: 430px) {
-        > div {
-          input,
-          .labeled_input__value > p,
-          .labeled_input__currency > p {
-            font-size: 13px;
-          }
+			@media screen and (max-width: 430px) {
+				> div {
+					input,
+					.labeled_input__value > p,
+					.labeled_input__currency > p {
+						font-size: 13px;
+					}
 
-          input {
-            padding: 19px 15px;
-          }
+					input {
+						padding: 19px 15px;
+					}
 
-          .labeled_input__currency {
-            min-width: 70px;
-          }
-        }
-      }
-    }
+					.labeled_input__currency {
+						min-width: 70px;
+					}
+				}
+			}
+		}
 
-    .input_panel__fees {
-      display: flex;
-      justify-content: space-between;
+		.input_panel__fees {
+			display: flex;
+			justify-content: space-between;
 
-      p {
-        color: var(--font-dimmed-color);
-      }
-    }
-  }
+			p {
+				color: var(--font-dimmed-color);
+			}
+		}
+	}
 }
 
 .buy-sell-switch {
-  padding: 3px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  border-radius: 100px;
-  border: 1px solid var(--dex-buy-sell-border);
+	padding: 3px;
+	height: 30px;
+	display: flex;
+	align-items: center;
+	border-radius: 100px;
+	border: 1px solid var(--dex-buy-sell-border);
 
-  .buy-sell-switch__item {
-    width: 50px;
-    height: 100%;
-    background-color: transparent;
-    cursor: pointer;
-    font-size: 14px;
-    font-weight: 600;
-    border-radius: 100px;
+	.buy-sell-switch__item {
+		width: 50px;
+		height: 100%;
+		background-color: transparent;
+		cursor: pointer;
+		font-size: 14px;
+		font-weight: 600;
+		border-radius: 100px;
 
-    &.item_selected-buy {
-      background-color: #16d1d6;
-      color: #ffffff;
-    }
+		&.item_selected-buy {
+			background-color: #16d1d6;
+			color: #ffffff;
+		}
 
-    &.item_selected-sell {
-      background-color: #ff6767;
-      color: #ffffff;
-    }
-  }
+		&.item_selected-sell {
+			background-color: #ff6767;
+			color: #ffffff;
+		}
+	}
 }
 
 .apply__alert {
-  display: flex;
-  gap: 20px;
-  align-items: center;
+	display: flex;
+	gap: 20px;
+	align-items: center;
 
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-  }
+	&__content {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+	}
 
-  &__button {
-    max-width: 125px;
-    background-color: var(--alert-btn-bg);
-    color: #1f8feb;
-    padding: 7px 32px;
-    font-size: 12px;
-    font-weight: 500;
+	&__button {
+		max-width: 125px;
+		background-color: var(--alert-btn-bg);
+		color: #1f8feb;
+		padding: 7px 32px;
+		font-size: 12px;
+		font-weight: 500;
 
-    &:hover {
-      background-color: var(--alert-btn-hover);
-    }
-  }
+		&:hover {
+			background-color: var(--alert-btn-hover);
+		}
+	}
 
-  h2 {
-    font-size: 16px;
-    font-weight: 600;
-  }
+	h2 {
+		font-size: 16px;
+		font-weight: 600;
+	}
 
-  p {
-    font-size: 14px;
-    opacity: 0.7;
-    margin-bottom: 5px;
-  }
-}
\ No newline at end of file
+	p {
+		font-size: 14px;
+		opacity: 0.7;
+		margin-bottom: 5px;
+	}
+}
diff --git a/src/pages/dex/trading/InputPanelItem/InputPanelItem.tsx b/src/pages/dex/trading/InputPanelItem/InputPanelItem.tsx
index 010418f..2d721e3 100644
--- a/src/pages/dex/trading/InputPanelItem/InputPanelItem.tsx
+++ b/src/pages/dex/trading/InputPanelItem/InputPanelItem.tsx
@@ -68,7 +68,7 @@ function InputPanelItem(props: InputPanelItemProps) {
 		totalValid,
 		totalUsd,
 		scrollToOrderList,
-		updateUserOrders
+		updateUserOrders,
 	} = props;
 
 	const [creatingState, setCreatingState] = useState(false);
diff --git a/src/pages/dex/trading/[id].tsx b/src/pages/dex/trading/[id].tsx
index 51d88ab..925f5f7 100644
--- a/src/pages/dex/trading/[id].tsx
+++ b/src/pages/dex/trading/[id].tsx
@@ -784,14 +784,14 @@ function Trading() {
 					{e.isInstant && <BadgeStatus />}
 					{(state.wallet?.connected && state.wallet?.alias ? state.wallet?.alias : '')
 						?.length > 12 && (
-							<Tooltip
-								className={styles.table__tooltip_right}
-								arrowClass={styles.table__tooltip_arrow}
-								shown={showTooltip}
-							>
-								{state.wallet?.connected && state.wallet?.alias}
-							</Tooltip>
-						)}
+						<Tooltip
+							className={styles.table__tooltip_right}
+							arrowClass={styles.table__tooltip_arrow}
+							shown={showTooltip}
+						>
+							{state.wallet?.connected && state.wallet?.alias}
+						</Tooltip>
+					)}
 					{/* High volume */}
 					{/* <BadgeStatus type="high" /> */}
 				</td>
@@ -1071,13 +1071,13 @@ function Trading() {
 											pairData.first_currency?.name &&
 											pairData.second_currency?.name
 										) ? (
-											'...'
-										) : (
-											<>
-												{firstCurrencyName}
-												<span>/{secondCurrencyName}</span>
-											</>
-										)}
+												'...'
+											) : (
+												<>
+													{firstCurrencyName}
+													<span>/{secondCurrencyName}</span>
+												</>
+											)}
 									</p>
 									<div className={styles.trading__currency__rate}>
 										<p>
@@ -1172,7 +1172,7 @@ function Trading() {
 							totalValid,
 							totalUsd,
 							scrollToOrderList,
-							updateUserOrders
+							updateUserOrders,
 						})}
 					</div>
 					<div className={styles.trading__chart__wrapper}>
diff --git a/src/pages/p2p/components/Pagination/Pagination.tsx b/src/pages/p2p/components/Pagination/Pagination.tsx
index 3d67b98..6b511ef 100644
--- a/src/pages/p2p/components/Pagination/Pagination.tsx
+++ b/src/pages/p2p/components/Pagination/Pagination.tsx
@@ -66,10 +66,7 @@ function Pagination(props: PaginationProps) {
 
 				result.push(generateButton(i, i === props.value, hiding));
 			}
-			result.push(
-				<p key={nanoid(16)}>...</p>,
-				generateButton(props.totalPages, false)
-			);
+			result.push(<p key={nanoid(16)}>...</p>, generateButton(props.totalPages, false));
 		} else if (props.value >= props.totalPages - 2) {
 			result.push(generateButton(1, false), <p key={nanoid(16)}>...</p>);
 			for (let i = props.totalPages - 4; i <= props.totalPages; i += 1) {
diff --git a/src/pages/p2p/process/components/Messenger/Messenger.tsx b/src/pages/p2p/process/components/Messenger/Messenger.tsx
index 4dd1fb4..66a605a 100644
--- a/src/pages/p2p/process/components/Messenger/Messenger.tsx
+++ b/src/pages/p2p/process/components/Messenger/Messenger.tsx
@@ -249,7 +249,7 @@ function Messenger(props: MessengerProps) {
 			<div className={styles.messenger__panel + (messageLoading ? ' disabled' : '')}>
 				<Input
 					disabled={!!finishState}
-					onKeyDown={e => e.keyCode === 13 && createMessage()}
+					onKeyDown={(e) => e.keyCode === 13 && createMessage()}
 					value={msgInputState}
 					onInput={(e) => setMsgInputState(e.target.value)}
 					bordered={true}
diff --git a/src/pages/p2p/profile/ProfileTable/ProfileTable.tsx b/src/pages/p2p/profile/ProfileTable/ProfileTable.tsx
index f446b03..89f618b 100644
--- a/src/pages/p2p/profile/ProfileTable/ProfileTable.tsx
+++ b/src/pages/p2p/profile/ProfileTable/ProfileTable.tsx
@@ -112,7 +112,8 @@ function ProfileTable(props: ProfileTableProps) {
 				<td>
 					<EmptyLink className={styles.profile__header__mobile}>Price</EmptyLink>
 					<p className={styles.profile__row__price}>
-						<span>{params.offerData.price}</span> {params.offerData.target_currency?.name}
+						<span>{params.offerData.price}</span>{' '}
+						{params.offerData.target_currency?.name}
 					</p>
 				</td>
 				<td>
diff --git a/src/pages/p2p/profile/index.tsx b/src/pages/p2p/profile/index.tsx
index c624b59..f1e5fc5 100644
--- a/src/pages/p2p/profile/index.tsx
+++ b/src/pages/p2p/profile/index.tsx
@@ -54,19 +54,18 @@ function Profile() {
 	function getFilterFunction(code: 'chats' | 'active' | 'finished') {
 		if (code === 'finished') {
 			return (e: UserChatData) => e.status === 'finished';
-		} if (code === 'active') {
+		}
+		if (code === 'active') {
 			return (e: UserChatData) =>
 				e.status !== 'finished' &&
-      ((e.owner_deposit && e.owner_deposit !== 'default') ||
-        (e.opponent_deposit && e.opponent_deposit !== 'default'));
-		} 
+				((e.owner_deposit && e.owner_deposit !== 'default') ||
+					(e.opponent_deposit && e.opponent_deposit !== 'default'));
+		}
 		return (e: UserChatData) =>
 			(e.owner_deposit === null || e.owner_deposit === 'default') &&
-      (e.opponent_deposit === null || e.opponent_deposit === 'default');
-  
+			(e.opponent_deposit === null || e.opponent_deposit === 'default');
 	}
 
-
 	const [notificationsAmount, setNotificationsAmount] = useState({
 		chats: 0,
 		active: 0,
diff --git a/src/store/store-reducer.tsx b/src/store/store-reducer.tsx
index 65f73fb..5c25945 100644
--- a/src/store/store-reducer.tsx
+++ b/src/store/store-reducer.tsx
@@ -38,7 +38,7 @@ const reducer = (state: ContextState, action: ContextAction): ContextState => {
 
 export const Store = createContext<ContextValue>({
 	state: initialState,
-	dispatch: () => undefined, 
+	dispatch: () => undefined,
 });
 export const StoreProvider = (props: { children: ReactNode }) => {
 	const [state, dispatch] = useReducer(reducer, initialState);
diff --git a/src/styles/themes/light.scss b/src/styles/themes/light.scss
index 230b6f6..b8eee08 100644
--- a/src/styles/themes/light.scss
+++ b/src/styles/themes/light.scss
@@ -96,4 +96,4 @@
 	--admin-table-border-color: #596f98;
 	--alert-btn-bg: rgba(31, 143, 235, 0.2);
 	--alert-btn-hover: rgba(31, 143, 235, 0.3);
-}
\ No newline at end of file
+}
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index ba0499a..568866d 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -53,7 +53,8 @@ export const canvasResize = (inputCanvas: HTMLCanvasElement) => {
 		const devicePixelRatio = window.devicePixelRatio || 1;
 
 		const backingStorePixel =
-			(ctx as unknown as { webkitBackingStorePixelRatio?: number })?.webkitBackingStorePixelRatio ||
+			(ctx as unknown as { webkitBackingStorePixelRatio?: number })
+				?.webkitBackingStorePixelRatio ||
 			(ctx as unknown as { mozBackingStorePixelRatio?: number })?.mozBackingStorePixelRatio ||
 			(ctx as unknown as { msBackingStorePixelRatio?: number })?.msBackingStorePixelRatio ||
 			(ctx as unknown as { oBackingStorePixelRatio?: number })?.oBackingStorePixelRatio ||