From 42dd3bfde0930211aeaeadcdfc82dd7a817a272a Mon Sep 17 00:00:00 2001
From: peetzweg/ <phil.czek@gmail.com>
Date: Wed, 20 Sep 2023 14:05:30 +0200
Subject: [PATCH] applies lint fixes from recent biome defaults and our config

---
 .../useink/src/core/types/api-contract.ts     |   4 +-
 packages/useink/src/notifications/context.ts  |   2 +-
 .../notifications/hooks/useNotifications.ts   |   2 +-
 .../notifications/hooks/useTxNotifications.ts |   2 +-
 .../useink/src/notifications/provider.tsx     |   2 +-
 .../useink/src/react/hooks/config/useChain.ts |   2 +-
 .../src/react/hooks/config/useConfig.ts       |   2 +-
 .../react/hooks/config/useDefaultCaller.ts    |   2 +-
 .../useink/src/react/hooks/contracts/types.ts |   2 +-
 .../react/hooks/contracts/useAbiMessage.ts    |   2 +-
 .../src/react/hooks/contracts/useCall.ts      |   2 +-
 .../hooks/contracts/useCallSubscription.ts    |   2 +-
 .../src/react/hooks/contracts/useCodeHash.ts  |   2 +-
 .../src/react/hooks/contracts/useContract.ts  |   2 +-
 .../contracts/useDeployer/useDeployer.ts      |   2 +-
 .../src/react/hooks/contracts/useDryRun.ts    |   4 +-
 .../hooks/contracts/useEventSubscription.ts   |   4 +-
 .../src/react/hooks/contracts/useEvents.ts    |   2 +-
 .../react/hooks/contracts/useMessageSigner.ts |   2 +-
 .../src/react/hooks/contracts/useMetadata.ts  |   2 +-
 .../src/react/hooks/contracts/useSalter.ts    |   2 +-
 .../hooks/contracts/useSignatureVerifier.ts   |   2 +-
 .../useink/src/react/hooks/contracts/useTx.ts |   2 +-
 .../src/react/hooks/contracts/useTxEvents.ts  |   2 +-
 .../react/hooks/contracts/useTxPaymentInfo.ts |   2 +-
 .../react/hooks/helpers/useUnixMilliToDate.ts |   2 +-
 .../hooks/substrate/balance/useBalance.ts     |   2 +-
 .../substrate/timestamp/useTimestampNow.ts    |   2 +-
 .../substrate/timestamp/useTimestampQuery.ts  |   2 +-
 .../src/react/hooks/substrate/useApi.ts       |   2 +-
 .../react/hooks/substrate/useBlockHeader.ts   |   2 +-
 .../src/react/hooks/substrate/useTransfer.ts  |   2 +-
 .../src/react/hooks/wallets/useAllWallets.ts  |   2 +-
 .../hooks/wallets/useInstalledWallets.ts      |   2 +-
 .../hooks/wallets/useUninstalledWallets.ts    |   2 +-
 .../src/react/hooks/wallets/useWallet.ts      |   2 +-
 .../src/react/providers/UseInkProvider.tsx    |   2 +-
 .../useink/src/react/providers/api/context.ts |   2 +-
 .../src/react/providers/api/provider.tsx      |   2 +-
 .../react/providers/blockHeader/context.ts    |   2 +-
 .../react/providers/blockHeader/provider.tsx  |   2 +-
 .../src/react/providers/config/context.ts     |   2 +-
 .../src/react/providers/config/provider.tsx   |   2 +-
 .../src/react/providers/events/context.ts     |   2 +-
 .../src/react/providers/events/provider.tsx   |   2 +-
 .../src/react/providers/wallet/context.ts     |   2 +-
 .../src/react/providers/wallet/provider.tsx   |   2 +-
 .../utils/helpers/parseUnits/parseUnits.ts    |   2 +-
 .../ConnectWallet/ConnectWallet.tsx           |  14 +-
 .../components/FileDropper/FileDropper.tsx    |   6 +-
 .../Notifications/Notifications.tsx           |   6 +-
 .../src/components/Snackbar/Snackbar.tsx      |  18 +-
 .../components/ToggleSwitch/ToggleSwitch.tsx  |   2 +-
 .../pg-deploy/AbiParamInput/AbiParamInput.tsx |  28 +--
 .../src/components/pg-deploy/DeployPage.tsx   | 144 +++++------
 .../src/components/pg-home/HomePage.tsx       | 232 +++++++++---------
 playground/src/pages/_app.tsx                 |   2 +-
 playground/src/pages/_document.tsx            |   4 +-
 playground/src/pages/deploy.tsx               |  10 +-
 playground/src/pages/index.tsx                |   8 +-
 60 files changed, 288 insertions(+), 288 deletions(-)

diff --git a/packages/useink/src/core/types/api-contract.ts b/packages/useink/src/core/types/api-contract.ts
index 38ed37d..f9dcb6d 100644
--- a/packages/useink/src/core/types/api-contract.ts
+++ b/packages/useink/src/core/types/api-contract.ts
@@ -1,5 +1,5 @@
-import { ISubmittableResult } from './substrate.ts';
 import { SubmittableResult } from '@polkadot/api';
+import { ISubmittableResult } from './substrate.ts';
 
 export {
   BlueprintPromise,
@@ -28,7 +28,7 @@ export type {
 } from '@polkadot/api-contract/types';
 export { Abi, ContractPromise } from '@polkadot/api-contract';
 
-// rome-ignore lint/correctness/noUnusedVariables: The Release flow breaks when exporting from '@polkadot/api-contract/base/contract';
+// biome-ignore lint/correctness/noUnusedVariables: The Release flow breaks when exporting from '@polkadot/api-contract/base/contract';
 export declare class ContractSubmittableResult extends SubmittableResult {
   readonly contractEvents?: DecodedEvent[] | undefined;
   constructor(result: ISubmittableResult, contractEvents?: DecodedEvent[]);
diff --git a/packages/useink/src/notifications/context.ts b/packages/useink/src/notifications/context.ts
index d7b35bd..06c337c 100644
--- a/packages/useink/src/notifications/context.ts
+++ b/packages/useink/src/notifications/context.ts
@@ -1,10 +1,10 @@
+import { createContext } from 'react';
 import {
   AddNotificationPayload,
   Config,
   DEFAULT_NOTIFICATIONS,
   Notifications,
 } from './model.ts';
-import { createContext } from 'react';
 
 export const NotificationsContext = createContext<{
   config?: Config;
diff --git a/packages/useink/src/notifications/hooks/useNotifications.ts b/packages/useink/src/notifications/hooks/useNotifications.ts
index d3afc58..65b0a93 100644
--- a/packages/useink/src/notifications/hooks/useNotifications.ts
+++ b/packages/useink/src/notifications/hooks/useNotifications.ts
@@ -1,3 +1,4 @@
+import { useContext, useMemo } from 'react';
 import { HALF_A_SECOND } from '../../react/constants.ts';
 import { useInterval } from '../../react/hooks/internal/useInterval.ts';
 import { getExpiredItem } from '../../utils/index';
@@ -7,7 +8,6 @@ import {
   Notification,
   Notifications,
 } from '../model.ts';
-import { useContext, useMemo } from 'react';
 
 export interface UseNotifications {
   notifications: Notifications;
diff --git a/packages/useink/src/notifications/hooks/useTxNotifications.ts b/packages/useink/src/notifications/hooks/useTxNotifications.ts
index 603dce6..8131141 100644
--- a/packages/useink/src/notifications/hooks/useTxNotifications.ts
+++ b/packages/useink/src/notifications/hooks/useTxNotifications.ts
@@ -1,7 +1,7 @@
+import { useEffect } from 'react';
 import { ChainId } from '../../chains/types.ts';
 import { Tx } from '../../index';
 import { useNotifications } from './useNotifications.ts';
-import { useEffect } from 'react';
 
 type TxInfo<T> = Pick<Tx<T>, 'status'> & Pick<Tx<T>, 'result'>;
 
diff --git a/packages/useink/src/notifications/provider.tsx b/packages/useink/src/notifications/provider.tsx
index 8f1f05e..863444b 100644
--- a/packages/useink/src/notifications/provider.tsx
+++ b/packages/useink/src/notifications/provider.tsx
@@ -1,3 +1,4 @@
+import React, { useCallback, useReducer } from 'react';
 import { useIsMounted } from '../react/hooks/internal/useIsMounted.ts';
 import { pseudoRandomId } from '../utils/index';
 import { NotificationsContext } from './context.ts';
@@ -7,7 +8,6 @@ import {
   DEFAULT_NOTIFICATIONS,
 } from './model.ts';
 import { notificationReducer } from './reducer.ts';
-import React, { useCallback, useReducer } from 'react';
 
 export const NotificationsProvider: React.FC<
   React.PropsWithChildren<{
diff --git a/packages/useink/src/react/hooks/config/useChain.ts b/packages/useink/src/react/hooks/config/useChain.ts
index 918be99..96bcfbe 100644
--- a/packages/useink/src/react/hooks/config/useChain.ts
+++ b/packages/useink/src/react/hooks/config/useChain.ts
@@ -1,6 +1,6 @@
+import { useMemo } from 'react';
 import { Chain, ChainId } from '../../../chains/index';
 import { useConfig } from './useConfig.ts';
-import { useMemo } from 'react';
 
 export const useChain = (chainId?: ChainId): Chain | undefined => {
   const { chains } = useConfig();
diff --git a/packages/useink/src/react/hooks/config/useConfig.ts b/packages/useink/src/react/hooks/config/useConfig.ts
index 33ce2c6..0db427b 100644
--- a/packages/useink/src/react/hooks/config/useConfig.ts
+++ b/packages/useink/src/react/hooks/config/useConfig.ts
@@ -1,5 +1,5 @@
+import { useContext } from 'react';
 import { ConfigContext } from '../../providers/config/context.ts';
 import { Config } from '../../providers/config/model.ts';
-import { useContext } from 'react';
 
 export const useConfig = (): Config => useContext<Config>(ConfigContext);
diff --git a/packages/useink/src/react/hooks/config/useDefaultCaller.ts b/packages/useink/src/react/hooks/config/useDefaultCaller.ts
index 68320c7..6ce5657 100644
--- a/packages/useink/src/react/hooks/config/useDefaultCaller.ts
+++ b/packages/useink/src/react/hooks/config/useDefaultCaller.ts
@@ -1,7 +1,7 @@
+import { useMemo } from 'react';
 import { ChainId } from '../../../chains/index';
 import { useChain } from './useChain.ts';
 import { useConfig } from './useConfig.ts';
-import { useMemo } from 'react';
 
 export const useDefaultCaller = (chainId?: ChainId): string | undefined => {
   const { caller } = useConfig();
diff --git a/packages/useink/src/react/hooks/contracts/types.ts b/packages/useink/src/react/hooks/contracts/types.ts
index a288ae1..74d5efb 100644
--- a/packages/useink/src/react/hooks/contracts/types.ts
+++ b/packages/useink/src/react/hooks/contracts/types.ts
@@ -1,6 +1,6 @@
+import { BN } from '@polkadot/util';
 import { ChainId } from '../../../chains/types.ts';
 import { Abi, ContractOptions, ContractPromise } from '../../../core/index';
-import { BN } from '@polkadot/util';
 
 export type CallOptions = Omit<ContractOptions, 'value'> & {
   defaultCaller?: boolean;
diff --git a/packages/useink/src/react/hooks/contracts/useAbiMessage.ts b/packages/useink/src/react/hooks/contracts/useAbiMessage.ts
index eb6c088..d99f16b 100644
--- a/packages/useink/src/react/hooks/contracts/useAbiMessage.ts
+++ b/packages/useink/src/react/hooks/contracts/useAbiMessage.ts
@@ -1,9 +1,9 @@
+import { useMemo } from 'react';
 import {
   AbiMessage,
   ContractPromise,
   toContractAbiMessage,
 } from '../../../core/index';
-import { useMemo } from 'react';
 
 export function useAbiMessage(
   contract: ContractPromise | undefined,
diff --git a/packages/useink/src/react/hooks/contracts/useCall.ts b/packages/useink/src/react/hooks/contracts/useCall.ts
index b5ef110..4008350 100644
--- a/packages/useink/src/react/hooks/contracts/useCall.ts
+++ b/packages/useink/src/react/hooks/contracts/useCall.ts
@@ -1,3 +1,4 @@
+import { useCallback, useState } from 'react';
 import {
   DecodedContractResult,
   LazyCallOptions,
@@ -6,7 +7,6 @@ import {
 import { ChainContract, useDefaultCaller } from '../index';
 import { useWallet } from '../wallets/useWallet.ts';
 import { useAbiMessage } from './useAbiMessage.ts';
-import { useCallback, useState } from 'react';
 
 export type CallSend<T> = (
   args?: unknown[],
diff --git a/packages/useink/src/react/hooks/contracts/useCallSubscription.ts b/packages/useink/src/react/hooks/contracts/useCallSubscription.ts
index 338c14f..946f67f 100644
--- a/packages/useink/src/react/hooks/contracts/useCallSubscription.ts
+++ b/packages/useink/src/react/hooks/contracts/useCallSubscription.ts
@@ -1,8 +1,8 @@
+import { useEffect } from 'react';
 import { LazyCallOptions } from '../../../core/index.ts';
 import { useBlockHeader } from '../substrate/useBlockHeader.ts';
 import { ChainContract } from './types.ts';
 import { Call, useCall } from './useCall.ts';
-import { useEffect } from 'react';
 
 export function useCallSubscription<T>(
   chainContract: ChainContract | undefined,
diff --git a/packages/useink/src/react/hooks/contracts/useCodeHash.ts b/packages/useink/src/react/hooks/contracts/useCodeHash.ts
index 79fbab6..ea24644 100644
--- a/packages/useink/src/react/hooks/contracts/useCodeHash.ts
+++ b/packages/useink/src/react/hooks/contracts/useCodeHash.ts
@@ -1,5 +1,5 @@
-import { isValidHash } from '../../../utils';
 import { useCallback, useEffect, useState } from 'react';
+import { isValidHash } from '../../../utils';
 
 export enum CodeHashError {
   InvalidHash = 'Invalid code hash value.',
diff --git a/packages/useink/src/react/hooks/contracts/useContract.ts b/packages/useink/src/react/hooks/contracts/useContract.ts
index 0f6f281..a0d91ad 100644
--- a/packages/useink/src/react/hooks/contracts/useContract.ts
+++ b/packages/useink/src/react/hooks/contracts/useContract.ts
@@ -1,9 +1,9 @@
+import { useEffect, useMemo, useState } from 'react';
 import { ChainId } from '../../../chains/index';
 import { Abi, ContractPromise } from '../../../core/index';
 import { useChain } from '../config/useChain.ts';
 import { useApi } from '../substrate/useApi.ts';
 import { ChainContract } from './types.ts';
-import { useEffect, useMemo, useState } from 'react';
 
 export function useContract<T extends ContractPromise = ContractPromise>(
   address: string,
diff --git a/packages/useink/src/react/hooks/contracts/useDeployer/useDeployer.ts b/packages/useink/src/react/hooks/contracts/useDeployer/useDeployer.ts
index 8dd69e8..b489442 100644
--- a/packages/useink/src/react/hooks/contracts/useDeployer/useDeployer.ts
+++ b/packages/useink/src/react/hooks/contracts/useDeployer/useDeployer.ts
@@ -1,3 +1,4 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { ChainId } from '../../../../chains/index.ts';
 import {
   BlueprintPromise,
@@ -26,7 +27,6 @@ import { useApi } from '../../substrate/useApi.ts';
 import { useWallet } from '../../wallets/useWallet.ts';
 import { useTxEvents } from '../useTxEvents.ts';
 import { Deploy, DeploySignAndSend, DeployTx, DeployerError } from './types.ts';
-import { useCallback, useEffect, useMemo, useState } from 'react';
 
 export function useDeployer<T>(chainId?: ChainId): Deploy<T> {
   const { account } = useWallet();
diff --git a/packages/useink/src/react/hooks/contracts/useDryRun.ts b/packages/useink/src/react/hooks/contracts/useDryRun.ts
index ee4634b..1ec42cf 100644
--- a/packages/useink/src/react/hooks/contracts/useDryRun.ts
+++ b/packages/useink/src/react/hooks/contracts/useDryRun.ts
@@ -1,3 +1,4 @@
+import { useMemo, useState } from 'react';
 import {
   DecodedTxResult,
   LazyCallOptions,
@@ -8,7 +9,6 @@ import { useDefaultCaller } from '../config/index';
 import { useWallet } from '../wallets/useWallet.ts';
 import { ChainContract } from './types.ts';
 import { useAbiMessage } from './useAbiMessage.ts';
-import { useMemo, useState } from 'react';
 
 export type DryRunResult<T> = DecodedTxResult<T>;
 
@@ -21,7 +21,7 @@ export interface DryRun<T> {
   send: Send<T>;
   isSubmitting: boolean;
   result?: DryRunResult<T>;
-  resolved: Boolean;
+  resolved: boolean;
   resetState: () => void;
 }
 
diff --git a/packages/useink/src/react/hooks/contracts/useEventSubscription.ts b/packages/useink/src/react/hooks/contracts/useEventSubscription.ts
index 6241af3..8ab113f 100644
--- a/packages/useink/src/react/hooks/contracts/useEventSubscription.ts
+++ b/packages/useink/src/react/hooks/contracts/useEventSubscription.ts
@@ -1,3 +1,5 @@
+import { IEventLike } from '@polkadot/types/types/events';
+import { useContext, useEffect } from 'react';
 import { Bytes } from '../../../core/index';
 import { getExpiredItem } from '../../../utils/index';
 import { FIVE_SECONDS, HALF_A_SECOND } from '../../constants.ts';
@@ -6,8 +8,6 @@ import { useConfig } from '../config/useConfig.ts';
 import { useInterval } from '../internal/useInterval.ts';
 import { useBlockHeader } from '../substrate/useBlockHeader.ts';
 import { ChainContract } from './types.ts';
-import { IEventLike } from '@polkadot/types/types/events';
-import { useContext, useEffect } from 'react';
 
 export const useEventSubscription = (
   chainContract: ChainContract | undefined,
diff --git a/packages/useink/src/react/hooks/contracts/useEvents.ts b/packages/useink/src/react/hooks/contracts/useEvents.ts
index 6dc09a8..3dffb9f 100644
--- a/packages/useink/src/react/hooks/contracts/useEvents.ts
+++ b/packages/useink/src/react/hooks/contracts/useEvents.ts
@@ -1,7 +1,7 @@
+import { useContext, useMemo } from 'react';
 import { AccountId } from '../../../core/index';
 import { Event, EventsContext } from '../../providers/events/index';
 import { RemoveEventPayload } from '../../providers/events/model.ts';
-import { useContext, useMemo } from 'react';
 
 export interface Events {
   events: Event[];
diff --git a/packages/useink/src/react/hooks/contracts/useMessageSigner.ts b/packages/useink/src/react/hooks/contracts/useMessageSigner.ts
index 7118b29..438543c 100644
--- a/packages/useink/src/react/hooks/contracts/useMessageSigner.ts
+++ b/packages/useink/src/react/hooks/contracts/useMessageSigner.ts
@@ -1,6 +1,6 @@
+import { useCallback, useState } from 'react';
 import { SignatureResult } from '../../../core/index.ts';
 import { useWallet } from '../wallets/useWallet.ts';
-import { useCallback, useState } from 'react';
 
 export type Sign = (data?: string) => void;
 
diff --git a/packages/useink/src/react/hooks/contracts/useMetadata.ts b/packages/useink/src/react/hooks/contracts/useMetadata.ts
index 05d953f..f08c133 100644
--- a/packages/useink/src/react/hooks/contracts/useMetadata.ts
+++ b/packages/useink/src/react/hooks/contracts/useMetadata.ts
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { ChainId } from '../../../chains';
 import {
   DEFAULT,
@@ -7,7 +8,6 @@ import {
 } from '../../../core';
 import { MetadataError, toBasicMetadata } from '../../../utils';
 import { useApi } from '../substrate/useApi';
-import { useEffect, useState } from 'react';
 
 export interface BasicMetadataFile {
   data: Uint8Array;
diff --git a/packages/useink/src/react/hooks/contracts/useSalter.ts b/packages/useink/src/react/hooks/contracts/useSalter.ts
index 05455d9..dc482ec 100644
--- a/packages/useink/src/react/hooks/contracts/useSalter.ts
+++ b/packages/useink/src/react/hooks/contracts/useSalter.ts
@@ -1,5 +1,5 @@
-import { isValidHash, pseudoRandomHex } from '../../../utils';
 import { useCallback, useState } from 'react';
+import { isValidHash, pseudoRandomHex } from '../../../utils';
 
 export enum SalterError {
   InvalidHash = 'Invalid salt hash value.',
diff --git a/packages/useink/src/react/hooks/contracts/useSignatureVerifier.ts b/packages/useink/src/react/hooks/contracts/useSignatureVerifier.ts
index 411e67a..e230e97 100644
--- a/packages/useink/src/react/hooks/contracts/useSignatureVerifier.ts
+++ b/packages/useink/src/react/hooks/contracts/useSignatureVerifier.ts
@@ -1,5 +1,5 @@
-import { signatureVerify } from '../../../utils';
 import { useCallback, useState } from 'react';
+import { signatureVerify } from '../../../utils';
 
 type VerificationParams = Parameters<typeof signatureVerify>;
 
diff --git a/packages/useink/src/react/hooks/contracts/useTx.ts b/packages/useink/src/react/hooks/contracts/useTx.ts
index 235b3ea..5a8e1d0 100644
--- a/packages/useink/src/react/hooks/contracts/useTx.ts
+++ b/packages/useink/src/react/hooks/contracts/useTx.ts
@@ -1,3 +1,4 @@
+import { useMemo, useState } from 'react';
 import {
   ApiBase,
   ContractSubmittableResult,
@@ -10,7 +11,6 @@ import { useWallet } from '../wallets/useWallet.ts';
 import { ChainContract } from './types.ts';
 import { useDryRun } from './useDryRun.ts';
 import { useTxEvents } from './useTxEvents.ts';
-import { useMemo, useState } from 'react';
 
 export type ContractSubmittableResultCallback = (
   result?: ContractSubmittableResult,
diff --git a/packages/useink/src/react/hooks/contracts/useTxEvents.ts b/packages/useink/src/react/hooks/contracts/useTxEvents.ts
index 1941bef..30fa10e 100644
--- a/packages/useink/src/react/hooks/contracts/useTxEvents.ts
+++ b/packages/useink/src/react/hooks/contracts/useTxEvents.ts
@@ -1,7 +1,7 @@
+import { useCallback, useEffect, useState } from 'react';
 import { EventRecord } from '../../../core';
 import { isInBlock } from '../../../utils';
 import { Tx } from './useTx';
-import { useCallback, useEffect, useState } from 'react';
 
 type Eventable = Pick<Tx<unknown>, 'status'> & Pick<Tx<unknown>, 'result'>;
 
diff --git a/packages/useink/src/react/hooks/contracts/useTxPaymentInfo.ts b/packages/useink/src/react/hooks/contracts/useTxPaymentInfo.ts
index a94eddb..a9e6350 100644
--- a/packages/useink/src/react/hooks/contracts/useTxPaymentInfo.ts
+++ b/packages/useink/src/react/hooks/contracts/useTxPaymentInfo.ts
@@ -1,3 +1,4 @@
+import { useCallback, useState } from 'react';
 import { ChainContract, useDefaultCaller } from '..';
 import {
   LazyCallOptions,
@@ -6,7 +7,6 @@ import {
   txPaymentInfo,
 } from '../../../core';
 import { useWallet } from '../wallets/useWallet.ts';
-import { useCallback, useState } from 'react';
 
 type Send = (
   params?: unknown[],
diff --git a/packages/useink/src/react/hooks/helpers/useUnixMilliToDate.ts b/packages/useink/src/react/hooks/helpers/useUnixMilliToDate.ts
index f78fec7..278d618 100644
--- a/packages/useink/src/react/hooks/helpers/useUnixMilliToDate.ts
+++ b/packages/useink/src/react/hooks/helpers/useUnixMilliToDate.ts
@@ -1,5 +1,5 @@
-import { unixMilliToDate } from '../../../utils/helpers/unixMilliToDate';
 import { useMemo } from 'react';
+import { unixMilliToDate } from '../../../utils/helpers/unixMilliToDate';
 
 export const useUnixMilliToDate = (
   unixInMilliSeconds: number | undefined,
diff --git a/packages/useink/src/react/hooks/substrate/balance/useBalance.ts b/packages/useink/src/react/hooks/substrate/balance/useBalance.ts
index c1c3427..b715841 100644
--- a/packages/useink/src/react/hooks/substrate/balance/useBalance.ts
+++ b/packages/useink/src/react/hooks/substrate/balance/useBalance.ts
@@ -1,10 +1,10 @@
+import { useEffect, useState } from 'react';
 import { ChainId } from '../../../../chains/index';
 import { DeriveBalancesAccount, WithAddress } from '../../../../core/index';
 import { getBalance } from '../../../../core/index';
 import { useChain } from '../../index';
 import { useApi } from '../useApi.ts';
 import { useBlockHeader } from '../useBlockHeader.ts';
-import { useEffect, useState } from 'react';
 
 export const useBalance = (
   account: WithAddress | undefined,
diff --git a/packages/useink/src/react/hooks/substrate/timestamp/useTimestampNow.ts b/packages/useink/src/react/hooks/substrate/timestamp/useTimestampNow.ts
index 9b8a9f7..80f51b4 100644
--- a/packages/useink/src/react/hooks/substrate/timestamp/useTimestampNow.ts
+++ b/packages/useink/src/react/hooks/substrate/timestamp/useTimestampNow.ts
@@ -1,8 +1,8 @@
+import { useEffect, useState } from 'react';
 import { ChainId } from '../../../../chains';
 import { getTimestampUnix } from '../../../../core';
 import { useApi } from '../useApi';
 import { useBlockHeader } from '../useBlockHeader';
-import { useEffect, useState } from 'react';
 
 // Get the current timestamp in milliseconds
 export const useTimestampNow = (chainId?: ChainId): number | undefined => {
diff --git a/packages/useink/src/react/hooks/substrate/timestamp/useTimestampQuery.ts b/packages/useink/src/react/hooks/substrate/timestamp/useTimestampQuery.ts
index d0121ea..28c5efd 100644
--- a/packages/useink/src/react/hooks/substrate/timestamp/useTimestampQuery.ts
+++ b/packages/useink/src/react/hooks/substrate/timestamp/useTimestampQuery.ts
@@ -1,7 +1,7 @@
+import { useEffect, useState } from 'react';
 import { ChainId } from '../../../../chains';
 import { QueryableModuleCalls, getTimestampQuery } from '../../../../core';
 import { useApi } from '../useApi';
-import { useEffect, useState } from 'react';
 
 // Get a queryable function that can then be used to call a chain: `await timestampQuery.now()`
 export const useTimestampQuery = (
diff --git a/packages/useink/src/react/hooks/substrate/useApi.ts b/packages/useink/src/react/hooks/substrate/useApi.ts
index d9b4aa4..a704104 100644
--- a/packages/useink/src/react/hooks/substrate/useApi.ts
+++ b/packages/useink/src/react/hooks/substrate/useApi.ts
@@ -1,7 +1,7 @@
+import { useContext } from 'react';
 import { ChainId } from '../../../chains/index';
 import { IApiProvider, useChain } from '../../index';
 import { API, APIContext } from '../../providers/api/index';
-import { useContext } from 'react';
 
 export const useApis = (): API => useContext<API>(APIContext);
 
diff --git a/packages/useink/src/react/hooks/substrate/useBlockHeader.ts b/packages/useink/src/react/hooks/substrate/useBlockHeader.ts
index ac3cbb8..c3eddc9 100644
--- a/packages/useink/src/react/hooks/substrate/useBlockHeader.ts
+++ b/packages/useink/src/react/hooks/substrate/useBlockHeader.ts
@@ -1,3 +1,4 @@
+import { useContext } from 'react';
 import { ChainId } from '../../../chains/index';
 import {
   BlockHeaderContext,
@@ -5,7 +6,6 @@ import {
 } from '../../providers/blockHeader/index';
 import { useChain } from '../config/useChain.ts';
 import { BlockHeader } from './index';
-import { useContext } from 'react';
 
 export type { BlockHeader } from '../../providers/blockHeader/index';
 
diff --git a/packages/useink/src/react/hooks/substrate/useTransfer.ts b/packages/useink/src/react/hooks/substrate/useTransfer.ts
index 8c957cc..fa3d4c0 100644
--- a/packages/useink/src/react/hooks/substrate/useTransfer.ts
+++ b/packages/useink/src/react/hooks/substrate/useTransfer.ts
@@ -1,8 +1,8 @@
+import { useCallback, useMemo, useState } from 'react';
 import { useChain, useWallet } from '../';
 import { ChainId } from '../../../chains';
 import { Hash, SignerOptions, transfer } from '../../../core';
 import { useApi } from './useApi.ts';
-import { useCallback, useMemo, useState } from 'react';
 
 export type SignAndSendTransfer = (
   to: string,
diff --git a/packages/useink/src/react/hooks/wallets/useAllWallets.ts b/packages/useink/src/react/hooks/wallets/useAllWallets.ts
index b22d2e3..a0736ea 100644
--- a/packages/useink/src/react/hooks/wallets/useAllWallets.ts
+++ b/packages/useink/src/react/hooks/wallets/useAllWallets.ts
@@ -1,6 +1,6 @@
+import { useMemo } from 'react';
 import { Wallet } from '../../providers/wallet/index';
 import { useWallet } from '../index';
-import { useMemo } from 'react';
 
 export const useAllWallets = (): Wallet[] => {
   const { getWallets } = useWallet();
diff --git a/packages/useink/src/react/hooks/wallets/useInstalledWallets.ts b/packages/useink/src/react/hooks/wallets/useInstalledWallets.ts
index 45d1963..957dacf 100644
--- a/packages/useink/src/react/hooks/wallets/useInstalledWallets.ts
+++ b/packages/useink/src/react/hooks/wallets/useInstalledWallets.ts
@@ -1,6 +1,6 @@
+import { useMemo } from 'react';
 import { Wallet } from '../../providers/wallet/index';
 import { useWallet } from '../index';
-import { useMemo } from 'react';
 
 export const useInstalledWallets = (): Wallet[] => {
   const { getWallets } = useWallet();
diff --git a/packages/useink/src/react/hooks/wallets/useUninstalledWallets.ts b/packages/useink/src/react/hooks/wallets/useUninstalledWallets.ts
index e539aa8..5f17dcc 100644
--- a/packages/useink/src/react/hooks/wallets/useUninstalledWallets.ts
+++ b/packages/useink/src/react/hooks/wallets/useUninstalledWallets.ts
@@ -1,6 +1,6 @@
+import { useMemo } from 'react';
 import { Wallet } from '../../providers/wallet/index';
 import { useWallet } from './useWallet.ts';
-import { useMemo } from 'react';
 
 export const useUninstalledWallets = (): Wallet[] => {
   const { getWallets } = useWallet();
diff --git a/packages/useink/src/react/hooks/wallets/useWallet.ts b/packages/useink/src/react/hooks/wallets/useWallet.ts
index 6088f63..cec3c26 100644
--- a/packages/useink/src/react/hooks/wallets/useWallet.ts
+++ b/packages/useink/src/react/hooks/wallets/useWallet.ts
@@ -1,5 +1,5 @@
-import { WalletContext, WalletState } from '../../providers/wallet/index';
 import { useContext } from 'react';
+import { WalletContext, WalletState } from '../../providers/wallet/index';
 
 export type { WalletState } from '../../providers/wallet/index';
 
diff --git a/packages/useink/src/react/providers/UseInkProvider.tsx b/packages/useink/src/react/providers/UseInkProvider.tsx
index ff04ed8..f7dceaa 100644
--- a/packages/useink/src/react/providers/UseInkProvider.tsx
+++ b/packages/useink/src/react/providers/UseInkProvider.tsx
@@ -1,9 +1,9 @@
+import React from 'react';
 import { APIProvider } from './api/provider.tsx';
 import { BlockHeaderProvider } from './blockHeader/index';
 import { ConfigProps, ConfigProvider } from './config/index';
 import { EventsProvider } from './events/index';
 import { WalletProvider } from './wallet/index';
-import React from 'react';
 
 export type InkConfig = {
   config: ConfigProps;
diff --git a/packages/useink/src/react/providers/api/context.ts b/packages/useink/src/react/providers/api/context.ts
index 9bce7b1..80d3bb2 100644
--- a/packages/useink/src/react/providers/api/context.ts
+++ b/packages/useink/src/react/providers/api/context.ts
@@ -1,5 +1,5 @@
-import { API } from './model.ts';
 import { createContext } from 'react';
+import { API } from './model.ts';
 
 export const APIContext = createContext<API>({
   apis: {},
diff --git a/packages/useink/src/react/providers/api/provider.tsx b/packages/useink/src/react/providers/api/provider.tsx
index 1a8910a..2715895 100644
--- a/packages/useink/src/react/providers/api/provider.tsx
+++ b/packages/useink/src/react/providers/api/provider.tsx
@@ -1,9 +1,9 @@
+import React, { useEffect, useReducer } from 'react';
 import { ApiPromise, WsProvider } from '../../../core/index';
 import { useChains } from '../../hooks/index';
 import { useConfig } from '../../index';
 import { APIContext } from './context.ts';
 import { apiProvidersReducer } from './reducer.ts';
-import React, { useEffect, useReducer } from 'react';
 
 export const APIProvider: React.FC<React.PropsWithChildren> = ({
   children,
diff --git a/packages/useink/src/react/providers/blockHeader/context.ts b/packages/useink/src/react/providers/blockHeader/context.ts
index 048b5df..7e8bb0f 100644
--- a/packages/useink/src/react/providers/blockHeader/context.ts
+++ b/packages/useink/src/react/providers/blockHeader/context.ts
@@ -1,5 +1,5 @@
-import { BLOCK_HEADER_DEFAULTS, ChainBlockHeaders } from './model.ts';
 import { createContext } from 'react';
+import { BLOCK_HEADER_DEFAULTS, ChainBlockHeaders } from './model.ts';
 
 export const BlockHeaderContext = createContext<ChainBlockHeaders>({
   ...BLOCK_HEADER_DEFAULTS,
diff --git a/packages/useink/src/react/providers/blockHeader/provider.tsx b/packages/useink/src/react/providers/blockHeader/provider.tsx
index 4635762..9103af9 100644
--- a/packages/useink/src/react/providers/blockHeader/provider.tsx
+++ b/packages/useink/src/react/providers/blockHeader/provider.tsx
@@ -1,9 +1,9 @@
+import React, { useEffect, useMemo, useReducer } from 'react';
 import { ChainId } from '../../../chains/index';
 import { useApis } from '../../index';
 import { BlockHeaderContext } from './context.ts';
 import { ChainBlockHeaders } from './model.ts';
 import { chainBlockHeaderReducer } from './reducer.ts';
-import React, { useEffect, useMemo, useReducer } from 'react';
 
 const toBlockNumber = (valWithComma: string | undefined): number =>
   parseInt(`${valWithComma?.split(',').join('')}`);
diff --git a/packages/useink/src/react/providers/config/context.ts b/packages/useink/src/react/providers/config/context.ts
index 2e07605..389ddbb 100644
--- a/packages/useink/src/react/providers/config/context.ts
+++ b/packages/useink/src/react/providers/config/context.ts
@@ -1,5 +1,5 @@
-import { ChainConfig, ConfigProps, DEFAULT_CONFIG } from './model.ts';
 import React from 'react';
+import { ChainConfig, ConfigProps, DEFAULT_CONFIG } from './model.ts';
 
 export const ConfigContext = React.createContext<ConfigProps & ChainConfig>(
   DEFAULT_CONFIG,
diff --git a/packages/useink/src/react/providers/config/provider.tsx b/packages/useink/src/react/providers/config/provider.tsx
index e6f7765..3fc041c 100644
--- a/packages/useink/src/react/providers/config/provider.tsx
+++ b/packages/useink/src/react/providers/config/provider.tsx
@@ -1,7 +1,7 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Chain, ChainId } from '../../../chains/index';
 import { ConfigContext } from './context.ts';
 import { ChainRPCs, ConfigProps, DEFAULT_CONFIG } from './model.ts';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 export interface Props {
   config: ConfigProps;
diff --git a/packages/useink/src/react/providers/events/context.ts b/packages/useink/src/react/providers/events/context.ts
index 913bc39..73aec39 100644
--- a/packages/useink/src/react/providers/events/context.ts
+++ b/packages/useink/src/react/providers/events/context.ts
@@ -1,10 +1,10 @@
+import { createContext } from 'react';
 import {
   AddEventPayload,
   DEFAULT_EVENTS,
   Events,
   RemoveEventPayload,
 } from './model.ts';
-import { createContext } from 'react';
 
 export const EventsContext = createContext<{
   events: Events;
diff --git a/packages/useink/src/react/providers/events/provider.tsx b/packages/useink/src/react/providers/events/provider.tsx
index fe0d519..12a04f2 100644
--- a/packages/useink/src/react/providers/events/provider.tsx
+++ b/packages/useink/src/react/providers/events/provider.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { pseudoRandomId } from '../../../utils/index';
 import { EventsContext } from './context.ts';
 import {
@@ -6,7 +7,6 @@ import {
   RemoveEventPayload,
 } from './model.ts';
 import { eventsReducer } from './reducer.ts';
-import React from 'react';
 
 import { useIsMounted } from '../../hooks/internal/useIsMounted.ts';
 
diff --git a/packages/useink/src/react/providers/wallet/context.ts b/packages/useink/src/react/providers/wallet/context.ts
index dc1ba6c..23e827e 100644
--- a/packages/useink/src/react/providers/wallet/context.ts
+++ b/packages/useink/src/react/providers/wallet/context.ts
@@ -1,5 +1,5 @@
-import { WALLET_DEFAULTS, WalletState } from './model.ts';
 import { createContext } from 'react';
+import { WALLET_DEFAULTS, WalletState } from './model.ts';
 
 export const WalletContext = createContext<WalletState>({
   ...WALLET_DEFAULTS,
diff --git a/packages/useink/src/react/providers/wallet/provider.tsx b/packages/useink/src/react/providers/wallet/provider.tsx
index e021559..d7e4790 100644
--- a/packages/useink/src/react/providers/wallet/provider.tsx
+++ b/packages/useink/src/react/providers/wallet/provider.tsx
@@ -1,3 +1,4 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   Unsub,
   WalletAccount,
@@ -7,7 +8,6 @@ import {
 import { useConfig } from '../../hooks';
 import { WalletContext } from './context.ts';
 import { AutoConnect, WalletError, WalletName } from './model.ts';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 function getAutoConnectWalletInfo(key: string): AutoConnect | null {
   const item = localStorage.getItem(key);
diff --git a/packages/useink/src/utils/helpers/parseUnits/parseUnits.ts b/packages/useink/src/utils/helpers/parseUnits/parseUnits.ts
index 502acf4..a5e3ffe 100644
--- a/packages/useink/src/utils/helpers/parseUnits/parseUnits.ts
+++ b/packages/useink/src/utils/helpers/parseUnits/parseUnits.ts
@@ -64,7 +64,7 @@ export const planckToDecimalFormatted = (
 export const decimalToPlanck = (
   amount: number,
   options: DecimalOptions | undefined,
-): BigInt | undefined => {
+): bigint | undefined => {
   const decimals = options?.decimals || options?.api?.registry.chainDecimals[0];
   if (!decimals) return;
 
diff --git a/playground/src/components/ConnectWallet/ConnectWallet.tsx b/playground/src/components/ConnectWallet/ConnectWallet.tsx
index e3173d3..d89511b 100644
--- a/playground/src/components/ConnectWallet/ConnectWallet.tsx
+++ b/playground/src/components/ConnectWallet/ConnectWallet.tsx
@@ -8,7 +8,7 @@ export const ConnectWallet = () => {
 
   if (installedWallets.length === 0) {
     return (
-      <h2 className='text-xl font-bold'>
+      <h2 className="text-xl font-bold">
         You don&apos;t have any wallets installed...
       </h2>
     );
@@ -16,17 +16,17 @@ export const ConnectWallet = () => {
 
   return (
     <>
-      <h2 className='text-xl font-bold'>Connect a Wallet</h2>
-      <h3 className='text-md'>Installed Wallets</h3>
-      <ul className='flex flex-col gap-4'>
+      <h2 className="text-xl font-bold">Connect a Wallet</h2>
+      <h3 className="text-md">Installed Wallets</h3>
+      <ul className="flex flex-col gap-4">
         {installedWallets.map((w) => (
           <li key={w.title}>
             <button
-              type='button'
+              type="button"
               onClick={() => connect(w.extensionName)}
-              className='flex items-center w-full rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 transition duration-75'
+              className="flex items-center w-full rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 transition duration-75"
             >
-              <img className='w-12 mr-2' src={w.logo.src} alt={w.logo.alt} />
+              <img className="w-12 mr-2" src={w.logo.src} alt={w.logo.alt} />
               Connect to {w.title}
             </button>
           </li>
diff --git a/playground/src/components/FileDropper/FileDropper.tsx b/playground/src/components/FileDropper/FileDropper.tsx
index 0dd1546..14a1bec 100644
--- a/playground/src/components/FileDropper/FileDropper.tsx
+++ b/playground/src/components/FileDropper/FileDropper.tsx
@@ -22,10 +22,10 @@ export const FileDropper: React.FC<Props> = ({ onDrop, cta }) => {
                 'dark:border-white/20 dark:text-white-70 max-w-5xl mx-auto transition duration-75',
                 'hover:bg-brand-500/10',
               )}
-              htmlFor='file'
+              htmlFor="file"
             >
-              <img alt='squink' className='h-20 mb-6' src='squink.svg' />
-              <span className='text-sm text-gray-400 dark:text-gray-500'>
+              <img alt="squink" className="h-20 mb-6" src="squink.svg" />
+              <span className="text-sm text-gray-400 dark:text-gray-500">
                 {cta}
               </span>
             </label>
diff --git a/playground/src/components/Notifications/Notifications.tsx b/playground/src/components/Notifications/Notifications.tsx
index 63f9e7c..2e7284f 100644
--- a/playground/src/components/Notifications/Notifications.tsx
+++ b/playground/src/components/Notifications/Notifications.tsx
@@ -1,5 +1,5 @@
-import { Snackbar } from '../Snackbar';
 import { toNotificationLevel, useNotifications } from 'useink/notifications';
+import { Snackbar } from '../Snackbar';
 
 export const Notifications: React.FC = () => {
   const { notifications, removeNotification } = useNotifications();
@@ -7,9 +7,9 @@ export const Notifications: React.FC = () => {
   if (!notifications.length) return null;
 
   return (
-    <ul className='fixed right-4 bottom-4 z-10 p-0 m-0'>
+    <ul className="fixed right-4 bottom-4 z-10 p-0 m-0">
       {notifications.map((n) => (
-        <li key={n.id} className='p-0 m-0 mb-2 max-w-[400]'>
+        <li key={n.id} className="p-0 m-0 mb-2 max-w-[400]">
           <Snackbar
             message={n.message}
             type={toNotificationLevel(n.type)}
diff --git a/playground/src/components/Snackbar/Snackbar.tsx b/playground/src/components/Snackbar/Snackbar.tsx
index a10e8f6..c264d2f 100644
--- a/playground/src/components/Snackbar/Snackbar.tsx
+++ b/playground/src/components/Snackbar/Snackbar.tsx
@@ -28,17 +28,17 @@ export const Snackbar: React.FC<Props> = ({ show, message, type, onClick }) => (
   <Transition
     show={show}
     as={Fragment}
-    enter='transform ease-out duration-300 transition'
-    enterFrom='translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2'
-    enterTo='translate-y-0 opacity-100 sm:translate-x-0'
-    leave='transition ease-in duration-100'
-    leaveFrom='opacity-100'
-    leaveTo='opacity-0'
+    enter="transform ease-out duration-300 transition"
+    enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+    enterTo="translate-y-0 opacity-100 sm:translate-x-0"
+    leave="transition ease-in duration-100"
+    leaveFrom="opacity-100"
+    leaveTo="opacity-0"
   >
-    <div className='flex items-end justify-end mt-1 drop-shadow-md'>
+    <div className="flex items-end justify-end mt-1 drop-shadow-md">
       <div className={classNames('rounded-lg px-4 py-2', BG_COLORS[type])}>
-        <span className='flex items-center justify-end'>
-          <button type='button' onClick={onClick}>
+        <span className="flex items-center justify-end">
+          <button type="button" onClick={onClick}>
             X
           </button>
         </span>
diff --git a/playground/src/components/ToggleSwitch/ToggleSwitch.tsx b/playground/src/components/ToggleSwitch/ToggleSwitch.tsx
index 7354bba..09369cb 100644
--- a/playground/src/components/ToggleSwitch/ToggleSwitch.tsx
+++ b/playground/src/components/ToggleSwitch/ToggleSwitch.tsx
@@ -20,7 +20,7 @@ const ToggleSwitch: React.FC<Props> = ({ enabled, onChange }) => (
       )}
     >
       <span
-        aria-hidden='true'
+        aria-hidden="true"
         className={classNames(
           'pointer-events-none inline-block h-[16px] w-[18px] rounded-full',
           'shadow-lg transform ring-0 transition ease-in-out duration-200',
diff --git a/playground/src/components/pg-deploy/AbiParamInput/AbiParamInput.tsx b/playground/src/components/pg-deploy/AbiParamInput/AbiParamInput.tsx
index f874243..47d1940 100644
--- a/playground/src/components/pg-deploy/AbiParamInput/AbiParamInput.tsx
+++ b/playground/src/components/pg-deploy/AbiParamInput/AbiParamInput.tsx
@@ -13,32 +13,32 @@ export const AbiParamInput: React.FC<Props> = ({ abiParam }) => {
   switch (jsType) {
     case 'number':
       return (
-        <p className='mt-3 text-green-500'>
-          <b className='underline'>{abiParam.name}</b> - TODO implement a number
+        <p className="mt-3 text-green-500">
+          <b className="underline">{abiParam.name}</b> - TODO implement a number
           input
         </p>
       );
 
     case 'string':
       return (
-        <p className='mt-3 text-green-500'>
-          <b className='underline'>{abiParam.name}</b> - TODO implement a text
+        <p className="mt-3 text-green-500">
+          <b className="underline">{abiParam.name}</b> - TODO implement a text
           input that handles strings
         </p>
       );
 
     case 'BN':
       return (
-        <p className='mt-3 text-green-500'>
-          <b className='underline'>{abiParam.name}</b> - TODO implement an input
+        <p className="mt-3 text-green-500">
+          <b className="underline">{abiParam.name}</b> - TODO implement an input
           that handles BN types
         </p>
       );
 
     case 'Bytes':
       return (
-        <p className='mt-3 text-green-500'>
-          <b className='underline'>{abiParam.name}</b> - TODO implement an input
+        <p className="mt-3 text-green-500">
+          <b className="underline">{abiParam.name}</b> - TODO implement an input
           that handles Byte types. Probably a text field that is later converted
           to bytes...
         </p>
@@ -46,24 +46,24 @@ export const AbiParamInput: React.FC<Props> = ({ abiParam }) => {
 
     case 'boolean':
       return (
-        <p className='mt-3 text-green-500'>
-          <b className='underline'>{abiParam.name}</b> - TODO implement a radio
+        <p className="mt-3 text-green-500">
+          <b className="underline">{abiParam.name}</b> - TODO implement a radio
           input for booleans
         </p>
       );
 
     case 'null':
       return (
-        <p className='mt-3 text-green-500'>
-          <b className='underline'>{abiParam.name}</b> - TODO implement an input
+        <p className="mt-3 text-green-500">
+          <b className="underline">{abiParam.name}</b> - TODO implement an input
           that is always null.
         </p>
       );
 
     default:
       return (
-        <p className='text-red-500 font-semibold'>
-          <b className='underline'>{abiParam.name}</b> : Unknown input field for
+        <p className="text-red-500 font-semibold">
+          <b className="underline">{abiParam.name}</b> : Unknown input field for
           type {typeDefType}
         </p>
       );
diff --git a/playground/src/components/pg-deploy/DeployPage.tsx b/playground/src/components/pg-deploy/DeployPage.tsx
index ddc1cf5..ef30cd6 100644
--- a/playground/src/components/pg-deploy/DeployPage.tsx
+++ b/playground/src/components/pg-deploy/DeployPage.tsx
@@ -1,9 +1,3 @@
-import { ConnectWallet } from '../ConnectWallet';
-import { FileDropper } from '../FileDropper';
-import { Notifications } from '../Notifications';
-import { SelectList, SelectOption } from '../SelectList';
-import ToggleSwitch from '../ToggleSwitch/ToggleSwitch';
-import { AbiParamInput } from './AbiParamInput';
 import { XMarkIcon } from '@heroicons/react/24/solid';
 import classNames from 'classnames';
 import { useCallback, useMemo, useState } from 'react';
@@ -23,6 +17,12 @@ import {
   isExtrinsicFailedEvent,
   shouldDisable,
 } from 'useink/utils';
+import { ConnectWallet } from '../ConnectWallet';
+import { FileDropper } from '../FileDropper';
+import { Notifications } from '../Notifications';
+import { SelectList, SelectOption } from '../SelectList';
+import ToggleSwitch from '../ToggleSwitch/ToggleSwitch';
+import { AbiParamInput } from './AbiParamInput';
 
 export const DeployPage: React.FC = () => {
   const { account } = useWallet();
@@ -65,48 +65,48 @@ export const DeployPage: React.FC = () => {
 
   if (!account) {
     return (
-      <section className='w-full mx-auto px-6 max-w-3xl mt-6'>
+      <section className="w-full mx-auto px-6 max-w-3xl mt-6">
         <ConnectWallet />
       </section>
     );
   }
 
   return (
-    <section className='w-full mx-auto px-6 max-w-3xl mb-12'>
+    <section className="w-full mx-auto px-6 max-w-3xl mb-12">
       <Notifications />
 
-      <hgroup className='my-6 text-center'>
-        <h1 className='text-5xl font-bold text-blue-500'>Deploy a Contract</h1>
+      <hgroup className="my-6 text-center">
+        <h1 className="text-5xl font-bold text-blue-500">Deploy a Contract</h1>
 
-        <h2 className='text-2xl font-bold text-blue-500 text-center my-6'>
+        <h2 className="text-2xl font-bold text-blue-500 text-center my-6">
           This example will currently only work with contracts that have default
           constructors. We will add input fields for constructor args in the
           future. If you do this, please share with us!
         </h2>
-        <span className='text-center w-full'>
+        <span className="text-center w-full">
           <a
-            href='https://github.com/paritytech/ink-examples/tree/main/flipper'
-            rel='noreferrer'
-            target='_blank'
-            className='underline mb-6 mx-auto'
+            href="https://github.com/paritytech/ink-examples/tree/main/flipper"
+            rel="noreferrer"
+            target="_blank"
+            className="underline mb-6 mx-auto"
           >
             Try the Flipper Contract
           </a>
         </span>
       </hgroup>
 
-      <div className='mb-3'>
-        <div className='flex items-center gap-3 mb-3'>
+      <div className="mb-3">
+        <div className="flex items-center gap-3 mb-3">
           <ToggleSwitch enabled={requireWasm} onChange={handleToggleChange} />
           <label
-            className='text-xs p-0 m-0 cursor-pointer'
+            className="text-xs p-0 m-0 cursor-pointer"
             onKeyDown={handleToggleChange}
             onClick={handleToggleChange}
           >
             {requireWasm ? 'Require WASM' : 'Upload from code hash'}
           </label>
         </div>
-        <p className='text-white/70'>
+        <p className="text-white/70">
           {requireWasm
             ? 'Upload a Wasm blob and instantiate it.'
             : 'Use a code hash to reference a Wasm blob that is already on chain.'}
@@ -128,21 +128,21 @@ export const DeployPage: React.FC = () => {
           />
 
           {M.error && (
-            <p className='text-md text-error-500 text-center mx-auto mt-6'>
+            <p className="text-md text-error-500 text-center mx-auto mt-6">
               {M.error}
             </p>
           )}
         </>
       ) : (
-        <div className='flex flex-col items-center'>
-          <div className='mx-auto inline-flex items-center rounded border border-gray-300 p-6 shadow dark:border-gray-700 dark:bg-elevation-1'>
-            <span className='min-w-600 mr-20 justify-self-start text-xs text-gray-500 dark:text-gray-300'>
+        <div className="flex flex-col items-center">
+          <div className="mx-auto inline-flex items-center rounded border border-gray-300 p-6 shadow dark:border-gray-700 dark:bg-elevation-1">
+            <span className="min-w-600 mr-20 justify-self-start text-xs text-gray-500 dark:text-gray-300">
               {M.formattedFileName}
             </span>
 
             <XMarkIcon
-              aria-hidden='true'
-              className='mr-2 h-5 w-5 cursor-pointer justify-self-end text-gray-500 hover:text-white/90 transition duration-75'
+              aria-hidden="true"
+              className="mr-2 h-5 w-5 cursor-pointer justify-self-end text-gray-500 hover:text-white/90 transition duration-75"
               onClick={() => {
                 M.clear();
                 D.resetState();
@@ -151,26 +151,26 @@ export const DeployPage: React.FC = () => {
             />
           </div>
 
-          <div className='my-6 flex flex-col w-full max-w-3xl'>
-            <div className='mb-6'>
-              <label htmlFor='constructor' className='text-xs uppercase mb-1'>
+          <div className="my-6 flex flex-col w-full max-w-3xl">
+            <div className="mb-6">
+              <label htmlFor="constructor" className="text-xs uppercase mb-1">
                 Constructor
               </label>
               <SelectList
                 onChange={setConstructorOption}
                 options={constructorOptions}
                 value={constructorOption}
-                placeholder='Select a constructor...'
+                placeholder="Select a constructor..."
               />
 
               {konstructor?.docs.map((doc) => (
-                <p className='text-white/70 mt-3' key={doc}>
+                <p className="text-white/70 mt-3" key={doc}>
                   {doc}
                 </p>
               ))}
             </div>
 
-            <div className='mb-6'>
+            <div className="mb-6">
               {konstructor?.args.map((abiParam) => (
                 <AbiParamInput
                   key={abiParam.name}
@@ -190,13 +190,13 @@ export const DeployPage: React.FC = () => {
 
               {konstructor?.isPayable && (
                 <>
-                  <p className='mt-3 font-semibold uppercase text-green-500'>
+                  <p className="mt-3 font-semibold uppercase text-green-500">
                     This constructor is payable, which means you must enter the
-                    amount (<b className='underline'>value</b>) you will pay to
+                    amount (<b className="underline">value</b>) you will pay to
                     instantiate.
                   </p>
-                  <p className='mt-3 text-green-500'>
-                    <b className='underline'>Value</b> - TODO: implement an
+                  <p className="mt-3 text-green-500">
+                    <b className="underline">Value</b> - TODO: implement an
                     input that uses BN as the value in options for dryRun() and
                     signAndSend().
                   </p>
@@ -206,67 +206,67 @@ export const DeployPage: React.FC = () => {
 
             {!requireWasm && (
               <>
-                <div className='opacity-50 mb-6 text-xs border-l-4 border-white pl-6 pb-2'>
-                  <p className='mb-1 p-0 mt-0'>
+                <div className="opacity-50 mb-6 text-xs border-l-4 border-white pl-6 pb-2">
+                  <p className="mb-1 p-0 mt-0">
                     Here is a code hash for the flipper contract on Contract on
                     Rococo. You must upload the flipper.json metadata.
                   </p>
-                  <span className='p-1 rounded-md bg-brand-800'>
+                  <span className="p-1 rounded-md bg-brand-800">
                     0x0f466d0c332258ce41c0b4aaaba4f1708671da275c8fbe395dc81b1fdfedc662
                   </span>
                 </div>
-                <label htmlFor='codeHash' className='text-xs uppercase mb-1'>
+                <label htmlFor="codeHash" className="text-xs uppercase mb-1">
                   Code Hash
                 </label>
                 <input
-                  name='codeHash'
-                  className='px-4 py-2 rounded-md bg-white/5'
+                  name="codeHash"
+                  className="px-4 py-2 rounded-md bg-white/5"
                   value={C.codeHash}
                   onChange={(e) => {
                     D.resetState();
                     C.set(e.target.value);
                   }}
                 />
-                {C.error && <p className='text-red-500 mt-3'>{C.error}</p>}
+                {C.error && <p className="text-red-500 mt-3">{C.error}</p>}
               </>
             )}
 
-            <label htmlFor='salt' className='text-xs uppercase mt-3 mb-1'>
+            <label htmlFor="salt" className="text-xs uppercase mt-3 mb-1">
               Salt
             </label>
             <input
-              name='salt'
-              className='px-4 py-2 rounded-md bg-white/5'
+              name="salt"
+              className="px-4 py-2 rounded-md bg-white/5"
               value={S.salt}
               onChange={(e) => S.set(e.target.value)}
             />
-            {S.error && <p className='text-red-500 mt-3'>{S.error}</p>}
+            {S.error && <p className="text-red-500 mt-3">{S.error}</p>}
             <button
-              type='button'
+              type="button"
               onClick={S.regenerate}
-              className='mt-3 rounded-md text-white px-4 py-2 bg-brand-300 hover:bg-blue-600 disabled:bg-brand-200 hover:disabled:bg-blue-300 transition duration-75'
+              className="mt-3 rounded-md text-white px-4 py-2 bg-brand-300 hover:bg-blue-600 disabled:bg-brand-200 hover:disabled:bg-blue-300 transition duration-75"
               disabled={shouldDisable(D) || D.isSubmitting}
             >
               Regenerate
             </button>
           </div>
 
-          <div className='rounded-lg bg-white/5 p-4 mt-6 w-full'>
-            <h3 className='uppercase font-semibold font-xs'>Dry Run Results</h3>
+          <div className="rounded-lg bg-white/5 p-4 mt-6 w-full">
+            <h3 className="uppercase font-semibold font-xs">Dry Run Results</h3>
 
             {D.contractAddress && (
               <hgroup>
-                <h4 className='test-xs'>Contract Address</h4>
-                <h3 className='test-sm'>{D.contractAddress}</h3>
+                <h4 className="test-xs">Contract Address</h4>
+                <h3 className="test-sm">{D.contractAddress}</h3>
               </hgroup>
             )}
 
             {D.gasConsumed && (
-              <div className='mt-6'>
-                <h3 className='test-xs uppercase font-semibold'>
+              <div className="mt-6">
+                <h3 className="test-xs uppercase font-semibold">
                   Gas Consumed
                 </h3>
-                <ul className='p-0 list-none'>
+                <ul className="p-0 list-none">
                   <li>refTime: {D.gasConsumed.refTime.toString()}</li>
                   <li>proof size: {D.gasConsumed.proofSize.toString()}</li>
                 </ul>
@@ -274,11 +274,11 @@ export const DeployPage: React.FC = () => {
             )}
 
             {D.gasRequired && (
-              <div className='mt-6'>
-                <h3 className='test-xs uppercase font-semibold'>
+              <div className="mt-6">
+                <h3 className="test-xs uppercase font-semibold">
                   Gas Required
                 </h3>
-                <ul className='p-0 list-none'>
+                <ul className="p-0 list-none">
                   <li>refTime: {D.gasRequired.refTime.toString()}</li>
                   <li>proof size: {D.gasRequired.proofSize.toString()}</li>
                 </ul>
@@ -286,8 +286,8 @@ export const DeployPage: React.FC = () => {
             )}
 
             {D.storageDeposit && (
-              <div className='mt-6'>
-                <ul className='p-0 list-none'>
+              <div className="mt-6">
+                <ul className="p-0 list-none">
                   <li>Storage Deposit: {D.storageDeposit.toString()}</li>
                 </ul>
               </div>
@@ -295,14 +295,14 @@ export const DeployPage: React.FC = () => {
           </div>
 
           {D.error && (
-            <p className='text-md text-error-500 text-center mx-auto mt-6'>
+            <p className="text-md text-error-500 text-center mx-auto mt-6">
               {D.error}
             </p>
           )}
 
           {D.events?.length > 0 && (
-            <div className='mt-6 w-full'>
-              <h3 className='text-sm'>Events</h3>
+            <div className="mt-6 w-full">
+              <h3 className="text-sm">Events</h3>
               <ul>
                 {D.events.map((event) => (
                   <li
@@ -315,7 +315,7 @@ export const DeployPage: React.FC = () => {
                   >
                     {isContractInstantiatedEvent(event) ? (
                       <div>
-                        <h4 className='font-bold'>{formatEventName(event)}</h4>
+                        <h4 className="font-bold">{formatEventName(event)}</h4>
                         <h4>
                           Deployer:{' '}
                           {asContractInstantiatedEvent(event)?.deployer}
@@ -335,9 +335,9 @@ export const DeployPage: React.FC = () => {
             </div>
           )}
 
-          <div className='flex items-center gap-3'>
+          <div className="flex items-center gap-3">
             <button
-              type='button'
+              type="button"
               onClick={() => {
                 if (!M.abi) return;
 
@@ -354,14 +354,14 @@ export const DeployPage: React.FC = () => {
                   value,
                 });
               }}
-              className='mt-6 rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
+              className="mt-6 rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75"
               disabled={shouldDisable(D) || D.isSubmitting || !konstructor}
             >
               {shouldDisable(D) ? 'Dry run...' : <span>Dry Run</span>}
             </button>
 
             <button
-              type='button'
+              type="button"
               onClick={() => {
                 if (!M.abi) return;
 
@@ -378,7 +378,7 @@ export const DeployPage: React.FC = () => {
                   value,
                 });
               }}
-              className='mt-6 rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75 disabled:hover:cursor-not-allowed'
+              className="mt-6 rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75 disabled:hover:cursor-not-allowed"
               disabled={shouldDisable(D) || !D.willBeSuccessful || !konstructor}
             >
               {shouldDisable(D) ? (
@@ -391,11 +391,11 @@ export const DeployPage: React.FC = () => {
             </button>
 
             <button
-              type='button'
+              type="button"
               onClick={() => {
                 D.resetState();
               }}
-              className='mt-6 rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
+              className="mt-6 rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75"
               disabled={shouldDisable(D)}
             >
               Reset State
diff --git a/playground/src/components/pg-home/HomePage.tsx b/playground/src/components/pg-home/HomePage.tsx
index af25f78..2ff499f 100644
--- a/playground/src/components/pg-home/HomePage.tsx
+++ b/playground/src/components/pg-home/HomePage.tsx
@@ -1,5 +1,3 @@
-import metadata from '../../metadata/playground.json';
-import { Notifications } from '../Notifications';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
 /* eslint-disable @next/next/no-img-element */
@@ -43,6 +41,8 @@ import {
   planckToDecimalFormatted,
   shouldDisable,
 } from 'useink/utils';
+import metadata from '../../metadata/playground.json';
+import { Notifications } from '../Notifications';
 
 const CONTRACTS_ROCOCO_ADDRESS =
   '5G31GiBqWPFCm8S9cknY7UWAPA8SwNJJdoG4RrmtVDQyrk7Y';
@@ -161,48 +161,48 @@ export const HomePage: React.FC = () => {
 
   if (!cRococoContract?.contract) {
     return (
-      <div className='justify-center h-screen flex items-center w-full'>
-        <h1 className='text-3xl font-bold'>Loading contract...</h1>
+      <div className="justify-center h-screen flex items-center w-full">
+        <h1 className="text-3xl font-bold">Loading contract...</h1>
       </div>
     );
   }
 
   return (
-    <section className='w-full mx-auto'>
+    <section className="w-full mx-auto">
       <Notifications />
-      <div className='max-w-3xl w-full mx-auto py-16 px-4'>
-        <h1 className='text-5xl font-bold text-blue-500'>
+      <div className="max-w-3xl w-full mx-auto py-16 px-4">
+        <h1 className="text-5xl font-bold text-blue-500">
           useink Kitchen Sink
         </h1>
-        <h2 className='text-2xl text-blue-500 mb-16'>
+        <h2 className="text-2xl text-blue-500 mb-16">
           See the contract definitions{' '}
           <a
-            className='underline hover:opacity-80 transition duration-75'
-            href='https://github.com/paritytech/useink-kitchen-sink/blob/master/lib.rs'
-            target='_blank'
-            rel='noreferrer'
+            className="underline hover:opacity-80 transition duration-75"
+            href="https://github.com/paritytech/useink-kitchen-sink/blob/master/lib.rs"
+            target="_blank"
+            rel="noreferrer"
           >
             here
           </a>
           .
         </h2>
 
-        <div className='mt-8'>
+        <div className="mt-8">
           {!account && (
-            <ul className='flex flex-col gap-4'>
+            <ul className="flex flex-col gap-4">
               {installedWallets.length > 0 ? (
                 <>
-                  <h2 className='text-xl font-bold'>Connect a Wallet</h2>
-                  <h3 className='text-md'>Installed Wallets</h3>
+                  <h2 className="text-xl font-bold">Connect a Wallet</h2>
+                  <h3 className="text-md">Installed Wallets</h3>
                   {installedWallets.map((w) => (
                     <li key={w.title}>
                       <button
-                        type='button'
+                        type="button"
                         onClick={() => connect(w.extensionName)}
-                        className='flex items-center w-full rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 transition duration-75'
+                        className="flex items-center w-full rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 transition duration-75"
                       >
                         <img
-                          className='w-12 mr-2'
+                          className="w-12 mr-2"
                           src={w.logo.src}
                           alt={w.logo.alt}
                         />
@@ -212,25 +212,25 @@ export const HomePage: React.FC = () => {
                   ))}
                 </>
               ) : (
-                <h2 className='text-xl font-bold'>
+                <h2 className="text-xl font-bold">
                   You don&apos;t have any wallets installed...
                 </h2>
               )}
 
               {uninstalledWallets.length > 0 && (
                 <>
-                  <h3 className='text-md'>Uninstalled Wallets</h3>
+                  <h3 className="text-md">Uninstalled Wallets</h3>
 
                   {uninstalledWallets.map((w) => (
                     <li key={w.title}>
                       <a
                         href={w.installUrl}
-                        rel='noreferrer'
-                        target='_blank'
-                        className='flex items-center w-full rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 transition duration-75'
+                        rel="noreferrer"
+                        target="_blank"
+                        className="flex items-center w-full rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 transition duration-75"
                       >
                         <img
-                          className='w-12 mr-2'
+                          className="w-12 mr-2"
                           src={w.logo.src}
                           alt={w.logo.alt}
                         />
@@ -242,14 +242,14 @@ export const HomePage: React.FC = () => {
               )}
             </ul>
           )}
-          <ul className='list-none flex flex-col gap-12 mt-8'>
+          <ul className="list-none flex flex-col gap-12 mt-8">
             {account && (
               <>
                 <li>
                   <button
-                    type='button'
+                    type="button"
                     onClick={disconnect}
-                    className='rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 transition duration-75'
+                    className="rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 transition duration-75"
                   >
                     Disconnect
                   </button>
@@ -257,7 +257,7 @@ export const HomePage: React.FC = () => {
 
                 <li>
                   <b>You are connected as:</b>
-                  <span className='ml-4 dark:bg-slate-600 bg-slate-200 rounded-lg py-2 px-2'>
+                  <span className="ml-4 dark:bg-slate-600 bg-slate-200 rounded-lg py-2 px-2">
                     {account?.name || account?.address}
                   </span>
                 </li>
@@ -265,12 +265,12 @@ export const HomePage: React.FC = () => {
                 {accounts?.map(
                   (acc) =>
                     account !== acc && (
-                      <li key={acc.address} className='flex flex-col'>
+                      <li key={acc.address} className="flex flex-col">
                         <b>Connect to {acc.name ? acc.name : 'wallet'}</b>
                         <button
-                          type='button'
+                          type="button"
                           onClick={() => setAccount(acc)}
-                          className='rounded-2xl text-white px-4 py-2 mt-2 bg-blue-500 hover:bg-blue-600 transition duration-75'
+                          className="rounded-2xl text-white px-4 py-2 mt-2 bg-blue-500 hover:bg-blue-600 transition duration-75"
                         >
                           {acc.address}
                         </button>
@@ -280,7 +280,7 @@ export const HomePage: React.FC = () => {
 
                 <li>
                   <b>Your Free Balance:</b>
-                  <span className='ml-4 dark:bg-slate-600 bg-slate-200 rounded-lg py-2 px-2'>
+                  <span className="ml-4 dark:bg-slate-600 bg-slate-200 rounded-lg py-2 px-2">
                     {planckToDecimalFormatted(balance?.freeBalance, {
                       significantFigures: 4,
                       api: cRococoContract.contract.api,
@@ -292,7 +292,7 @@ export const HomePage: React.FC = () => {
 
             <li>
               <b>Contracts Rococo Current Block:</b>
-              <span className='ml-4 dark:bg-slate-600 bg-slate-200 rounded-lg py-2 px-2'>
+              <span className="ml-4 dark:bg-slate-600 bg-slate-200 rounded-lg py-2 px-2">
                 {block?.blockNumber === undefined
                   ? '--'
                   : block.blockNumber.toLocaleString()}
@@ -301,7 +301,7 @@ export const HomePage: React.FC = () => {
 
             <li>
               <b>Astar Current Block:</b>
-              <span className='ml-4 dark:bg-slate-600 bg-slate-200 rounded-lg py-2 px-2'>
+              <span className="ml-4 dark:bg-slate-600 bg-slate-200 rounded-lg py-2 px-2">
                 {astarBlockNumber?.blockNumber === undefined
                   ? '--'
                   : astarBlockNumber.blockNumber.toLocaleString()}
@@ -310,12 +310,12 @@ export const HomePage: React.FC = () => {
 
             <li>
               <b>Change a chain&apos;s active RPC url: (e.g. Astar)</b>
-              <ul className='px-0 m-0 mt-6 gap-4 grid grid-cols-2 items-center'>
+              <ul className="px-0 m-0 mt-6 gap-4 grid grid-cols-2 items-center">
                 {rpcs.map((rpc) => (
-                  <li key={rpc} className='p-0'>
+                  <li key={rpc} className="p-0">
                     <button
-                      type='button'
-                      className='rounded-2xl w-full text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
+                      type="button"
+                      className="rounded-2xl w-full text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75"
                       disabled={rpc === astarRpc}
                       onClick={() => setChainRpc(rpc, 'astar')}
                     >
@@ -329,14 +329,14 @@ export const HomePage: React.FC = () => {
             <li>
               <b>
                 Get all blocks from configured chains using:{' '}
-                <code className='p-2 rounded-md bg-slate-500'>
+                <code className="p-2 rounded-md bg-slate-500">
                   useBlockHeaders()
                 </code>
               </b>
-              <ul className='px-0 m-0 mt-6 gap-4 flex items-center flex-col md:flex-row'>
+              <ul className="px-0 m-0 mt-6 gap-4 flex items-center flex-col md:flex-row">
                 {(Object.keys(allChainBlockHeaders) as ChainId[]).map(
                   (chainId) => (
-                    <li key={chainId} className='p-0'>
+                    <li key={chainId} className="p-0">
                       <span>
                         <b>{chainId}:</b>{' '}
                         {allChainBlockHeaders[
@@ -352,57 +352,57 @@ export const HomePage: React.FC = () => {
             <li>
               <b>
                 Phala&apos;s current timestamp:{' '}
-                <code className='p-1 rounded-md bg-slate-500'>
+                <code className="p-1 rounded-md bg-slate-500">
                   {phalaTimestamp}
                 </code>
               </b>
 
-              <p className='text-sm'>
+              <p className="text-sm">
                 Phala&apos;s last block time: {phalaDate?.toLocaleTimeString()}
               </p>
             </li>
 
-            <li className='flex items-center gap-4'>
+            <li className="flex items-center gap-4">
               <button
-                type='button'
+                type="button"
                 onClick={() => get.send([], { defaultCaller: true })}
                 disabled={get.isSubmitting}
-                className='rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
+                className="rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75"
               >
                 Call get()
               </button>
 
-              <h3 className='text-xl'>
+              <h3 className="text-xl">
                 Value: {pickDecoded(get.result)?.toString() || '--'}
               </h3>
             </li>
 
-            <li className='flex items-center gap-4'>
-              <h3 className='text-xl'>
+            <li className="flex items-center gap-4">
+              <h3 className="text-xl">
                 get() will update on new blocks:{' '}
                 {pickDecoded(getSubcription.result)?.toString() || '--'}
               </h3>
             </li>
 
-            <li className='flex flex-col gap-4'>
+            <li className="flex flex-col gap-4">
               <button
-                type='button'
+                type="button"
                 onClick={() => flipTx.signAndSend()}
                 disabled={shouldDisable(flipTx) || !account}
-                className='rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
+                className="rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75"
               >
                 {shouldDisable(flipTx) ? 'Flipping' : 'Flip!'}
               </button>
 
-              <h3 className='text-xl'>
+              <h3 className="text-xl">
                 <b>Status:</b> {flipTx.status}
               </h3>
 
-              <h3 className='text-xl'>
+              <h3 className="text-xl">
                 <b>Events:</b>
-                <ul className='ml-4'>
+                <ul className="ml-4">
                   {events.map((event) => (
-                    <li key={event.id} className='text-md mb-4'>
+                    <li key={event.id} className="text-md mb-4">
                       <b>{event.name}</b> - flipper: {event.args?.[0] as string}
                       , value: {event.args?.[1]?.toString()}
                     </li>
@@ -411,67 +411,67 @@ export const HomePage: React.FC = () => {
               </h3>
 
               <button
-                type='button'
+                type="button"
                 onClick={() => flipTx.resetState()}
                 disabled={
                   shouldDisable(flipTx) ||
                   ['InBlock', 'None'].includes(flipTx.status)
                 }
-                className='rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
+                className="rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75"
               >
                 Reset state
               </button>
             </li>
 
-            <li className='flex flex-col gap-4'>
-              <h3 className='text-xl'>
+            <li className="flex flex-col gap-4">
+              <h3 className="text-xl">
                 Call a contract on another chain. e.g. &quot;Shibuya&quot;
               </h3>
 
-              <h3 className='text-xl'>
+              <h3 className="text-xl">
                 Shibuya Flipped:{' '}
                 {pickDecoded(shibuyaGetSubcription.result)?.toString() || '--'}
               </h3>
 
               <button
-                type='button'
+                type="button"
                 onClick={() => shibuyaFlipTx.signAndSend()}
                 disabled={shouldDisable(shibuyaFlipTx) || !account}
-                className='rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
+                className="rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75"
               >
                 {shouldDisable(shibuyaFlipTx)
                   ? 'Flipping Shibuya Contract'
                   : 'Flip Shibuya Contract!'}
               </button>
 
-              <h3 className='text-xl'>
+              <h3 className="text-xl">
                 <b>Status:</b> {shibuyaFlipTx.status}
               </h3>
 
               <button
-                type='button'
+                type="button"
                 onClick={() => shibuyaFlipTx.resetState()}
                 disabled={
                   shouldDisable(shibuyaFlipTx) ||
                   ['InBlock', 'None'].includes(shibuyaFlipTx.status)
                 }
-                className='rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
+                className="rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75"
               >
                 Reset state
               </button>
             </li>
 
-            <li className='flex flex-col gap-4'>
+            <li className="flex flex-col gap-4">
               <button
-                type='button'
+                type="button"
                 onClick={() => flipDryRun.send([], { defaultCaller: true })}
                 disabled={flipDryRun.isSubmitting}
-                className='rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
+                className="rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75"
               >
                 {flipDryRun.isSubmitting ? 'Flipping' : 'Flip as Dry Run!'}
               </button>
 
-              <h3 className='text-xl'>
+              <h3 className="text-xl">
                 <b>Gas Required:</b>{' '}
                 {planckToDecimalFormatted(
                   pickTxInfo(flipDryRun.result)?.partialFee,
@@ -482,21 +482,21 @@ export const HomePage: React.FC = () => {
               </h3>
             </li>
 
-            <li className='flex flex-col gap-4'>
+            <li className="flex flex-col gap-4">
               <button
-                type='button'
+                type="button"
                 onClick={() =>
                   flipPaymentInfo.send([], { defaultCaller: true })
                 }
                 disabled={flipPaymentInfo.isSubmitting}
-                className='rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
+                className="rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75"
               >
                 {flipPaymentInfo.isSubmitting
                   ? 'Getting payment info...'
                   : 'Get payment info for flip'}
               </button>
 
-              <h3 className='text-xl'>
+              <h3 className="text-xl">
                 <b>Partial Fee (a.k.a. Gas Required):</b>{' '}
                 {planckToDecimalFormatted(flipPaymentInfo.result?.partialFee, {
                   api: cRococoContract.contract.api,
@@ -504,17 +504,17 @@ export const HomePage: React.FC = () => {
               </h3>
             </li>
 
-            <li className='flex flex-col gap-4'>
+            <li className="flex flex-col gap-4">
               <button
-                type='button'
+                type="button"
                 onClick={() => panic.send([], { defaultCaller: true })}
                 disabled={panic.isSubmitting}
-                className='rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
+                className="rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75"
               >
                 Call panic()
               </button>
 
-              <h3 className='text-xl'>
+              <h3 className="text-xl">
                 {pickDecodedError(
                   panic,
                   cRococoContract,
@@ -527,17 +527,17 @@ export const HomePage: React.FC = () => {
               </h3>
             </li>
 
-            <li className='flex flex-col gap-4'>
+            <li className="flex flex-col gap-4">
               <button
-                type='button'
+                type="button"
                 onClick={() => assertBoom.send([], { defaultCaller: true })}
                 disabled={assertBoom.isSubmitting}
-                className='rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
+                className="rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75"
               >
                 Call assertBoom()
               </button>
 
-              <h3 className='text-xl'>
+              <h3 className="text-xl">
                 {pickDecodedError(
                   assertBoom,
                   cRococoContract,
@@ -550,46 +550,46 @@ export const HomePage: React.FC = () => {
               </h3>
             </li>
 
-            <li className='flex flex-col gap-4'>
-              <h3 className='text-xl'>
+            <li className="flex flex-col gap-4">
+              <h3 className="text-xl">
                 Handle Results. An even number will return an Ok Result, and an
                 odd number will return an Error
               </h3>
               <button
-                type='button'
+                type="button"
                 onClick={() => mood.send([0], { defaultCaller: true })}
                 disabled={mood.isSubmitting}
-                className='rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
+                className="rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75"
               >
                 {mood.isSubmitting ? 'Getting mood...' : 'Get Ok Result'}
               </button>
 
               <button
-                type='button'
+                type="button"
                 onClick={() => mood.send([1], { defaultCaller: true })}
                 disabled={mood.isSubmitting}
-                className='rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
+                className="rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75"
               >
                 {mood.isSubmitting ? 'Getting mood...' : 'Get Err Result'}
               </button>
 
-              <h3 className='text-xl'>
+              <h3 className="text-xl">
                 Mood: {!goodMood && !badMood && '--'}
                 {goodMood?.mood}
                 {badMood?.BadMood.mood}
               </h3>
             </li>
 
-            <li className='flex flex-col gap-4'>
-              <h3 className='text-xl'>
+            <li className="flex flex-col gap-4">
+              <h3 className="text-xl">
                 Handle Options. An even number will return a Some(Happy), and an
                 odd number will return None
               </h3>
               <button
-                type='button'
+                type="button"
                 onClick={() => option.send([0], { defaultCaller: true })}
                 disabled={option.isSubmitting}
-                className='rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
+                className="rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75"
               >
                 {option.isSubmitting
                   ? 'Getting option result...'
@@ -597,72 +597,72 @@ export const HomePage: React.FC = () => {
               </button>
 
               <button
-                type='button'
+                type="button"
                 onClick={() => option.send([1], { defaultCaller: true })}
                 disabled={option.isSubmitting}
-                className='rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75'
+                className="rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 hover:disabled:bg-blue-300 transition duration-75"
               >
                 {option.isSubmitting
                   ? 'Getting option result...'
                   : 'Get Option None Response'}
               </button>
 
-              <h3 className='text-xl'>
+              <h3 className="text-xl">
                 Option: {!option.result && '--'}
                 {JSON.stringify(pickDecoded(option.result))}
               </h3>
             </li>
 
             <li>
-              <h3 className='text-xl'>
+              <h3 className="text-xl">
                 Rococo Contracts Token Symbol: <b>{rocSymbol}</b>
               </h3>
 
-              <h3 className='text-xl'>
+              <h3 className="text-xl">
                 Shibuya Token Symbol: <b>{shibuyaSymbol}</b>
               </h3>
             </li>
 
             <li>
-              <h3 className='text-xl'>Sign a message, and Verify it</h3>
+              <h3 className="text-xl">Sign a message, and Verify it</h3>
               <input
-                className='w-full p-3 mt-3 rounded-md text-brand-800 font-semibold'
+                className="w-full p-3 mt-3 rounded-md text-brand-800 font-semibold"
                 value={messageToSign}
                 onChange={(e) => setMessageToSign(e.target.value)}
               />
               <button
-                type='button'
+                type="button"
                 onClick={() => {
                   signatureVerifier.result !== VerificationState.Unchecked &&
                     signatureVerifier.resetState();
 
                   signer.sign(messageToSign);
                 }}
-                className='mt-3 w-full rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 transition duration-75'
+                className="mt-3 w-full rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 transition duration-75"
               >
                 Sign Message
               </button>
 
               <button
-                type='button'
+                type="button"
                 onClick={() => {
                   setMessageToSign('');
                   signer.resetState();
                 }}
-                className='mt-3 w-full rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 transition duration-75'
+                className="mt-3 w-full rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 transition duration-75"
               >
                 Reset State
               </button>
 
               {signer.signature && account?.address && (
-                <div className='mt-3'>
+                <div className="mt-3">
                   <textarea
-                    className='text-sm text-black min-h-[80px] w-full rounded-md p-3'
+                    className="text-sm text-black min-h-[80px] w-full rounded-md p-3"
                     value={signer.signature}
                   />
 
                   <button
-                    type='button'
+                    type="button"
                     onClick={() => {
                       signatureVerifier.verify(
                         messageToSign,
@@ -670,40 +670,40 @@ export const HomePage: React.FC = () => {
                         account?.address,
                       );
                     }}
-                    className='mt-3 w-full rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 transition duration-75'
+                    className="mt-3 w-full rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 transition duration-75"
                   >
                     Verify Signature
                   </button>
 
                   <button
-                    type='button'
+                    type="button"
                     disabled={
                       signatureVerifier.result === VerificationState.Unchecked
                     }
                     onClick={() => {
                       signatureVerifier.resetState();
                     }}
-                    className='mt-3 w-full disabled:bg-blue-50/50 rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 transition duration-75'
+                    className="mt-3 w-full disabled:bg-blue-50/50 rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 transition duration-75"
                   >
                     Reset Verification State
                   </button>
 
-                  <p className='text-sm mt-3'>
+                  <p className="text-sm mt-3">
                     Verification Status: {signatureVerifier.result}
                   </p>
                 </div>
               )}
 
               {signer.error && (
-                <p className='text-sm text-error-500 mt-3'>{signer.error}</p>
+                <p className="text-sm text-error-500 mt-3">{signer.error}</p>
               )}
             </li>
 
             <li>
-              <h3 className='text-xl'>Deploy a Contract</h3>
+              <h3 className="text-xl">Deploy a Contract</h3>
               <Link
-                className='text-brand-200 hover:text-brand-300 transition duration-75 underline'
-                href='/deploy'
+                className="text-brand-200 hover:text-brand-300 transition duration-75 underline"
+                href="/deploy"
               >
                 See a Deploy Example
               </Link>
diff --git a/playground/src/pages/_app.tsx b/playground/src/pages/_app.tsx
index 0f9c7f1..4270205 100644
--- a/playground/src/pages/_app.tsx
+++ b/playground/src/pages/_app.tsx
@@ -1,4 +1,3 @@
-import '../styles/globals.css';
 import type { AppProps } from 'next/app';
 import dynamic from 'next/dynamic';
 import React from 'react';
@@ -12,6 +11,7 @@ import {
   ShibuyaTestnet,
 } from 'useink/chains';
 import { NotificationsProvider } from 'useink/notifications';
+import '../styles/globals.css';
 
 const UseInkProvider: React.ComponentType<React.PropsWithChildren<InkConfig>> =
   dynamic(() => import('useink').then(({ UseInkProvider }) => UseInkProvider), {
diff --git a/playground/src/pages/_document.tsx b/playground/src/pages/_document.tsx
index 111fc5b..a3d2ea1 100644
--- a/playground/src/pages/_document.tsx
+++ b/playground/src/pages/_document.tsx
@@ -2,9 +2,9 @@ import { Head, Html, Main, NextScript } from 'next/document';
 
 export default function Document() {
   return (
-    <Html lang='en'>
+    <Html lang="en">
       <Head />
-      <body className='bg-white dark:bg-slate-800 dark:text-white/80'>
+      <body className="bg-white dark:bg-slate-800 dark:text-white/80">
         <Main />
         <NextScript />
       </body>
diff --git a/playground/src/pages/deploy.tsx b/playground/src/pages/deploy.tsx
index 1f87908..9bc5463 100644
--- a/playground/src/pages/deploy.tsx
+++ b/playground/src/pages/deploy.tsx
@@ -1,5 +1,5 @@
-import DeployPage from '../components/pg-deploy';
 import Head from 'next/head';
+import DeployPage from '../components/pg-deploy';
 
 export default function Index() {
   return (
@@ -7,11 +7,11 @@ export default function Index() {
       <Head>
         <title>Playground | Deploy</title>
         <meta
-          name='description'
-          content='Easily deploy a contract with useink'
+          name="description"
+          content="Easily deploy a contract with useink"
         />
-        <meta name='viewport' content='width=device-width, initial-scale=1' />
-        <link rel='icon' href='/squink.svg' />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/squink.svg" />
       </Head>
       <DeployPage />
     </>
diff --git a/playground/src/pages/index.tsx b/playground/src/pages/index.tsx
index 6497334..9792a75 100644
--- a/playground/src/pages/index.tsx
+++ b/playground/src/pages/index.tsx
@@ -1,14 +1,14 @@
-import HomePage from '../components/pg-home';
 import Head from 'next/head';
+import HomePage from '../components/pg-home';
 
 export default function Index() {
   return (
     <>
       <Head>
         <title>Playground</title>
-        <meta name='description' content='useink Kitchen Sink' />
-        <meta name='viewport' content='width=device-width, initial-scale=1' />
-        <link rel='icon' href='/squink.svg' />
+        <meta name="description" content="useink Kitchen Sink" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/squink.svg" />
       </Head>
       <HomePage />
     </>