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/model.ts b/packages/useink/src/react/providers/wallet/model.ts
index d4f379c..2c3f2aa 100644
--- a/packages/useink/src/react/providers/wallet/model.ts
+++ b/packages/useink/src/react/providers/wallet/model.ts
@@ -27,11 +27,11 @@ export interface WalletState {
 export type Wallet = Exclude<ReturnType<typeof getWalletBySource>, undefined>;
 
 export const WALLET_DEFAULTS: WalletState = {
-  connect: () => undefined,
-  disconnect: () => undefined,
+  connect: () => {},
+  disconnect: () => {},
   account: undefined,
   accounts: undefined,
-  setAccount: () => undefined,
+  setAccount: () => {},
   isConnected: false,
   getWallets,
   getWalletBySource,
diff --git a/packages/useink/src/react/providers/wallet/provider.tsx b/packages/useink/src/react/providers/wallet/provider.tsx
index e021559..cb28d33 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);
@@ -25,6 +25,7 @@ function disableAutoConnect(key: string) {
 export const WalletProvider: React.FC<React.PropsWithChildren> = ({
   children,
 }) => {
+  console.log('walletprovider');
   const C = useConfig();
   const [account, setWalletAccount] = useState<WalletAccount>();
   const [accounts, setAccounts] = useState<WalletAccount[]>();
@@ -155,6 +156,7 @@ export const WalletProvider: React.FC<React.PropsWithChildren> = ({
   }, []);
 
   useEffect(() => {
+    console.log('activeWallet');
     if (!activeWallet) {
       const wallet = getAutoConnectWalletInfo(dappName)?.wallet;
       if (wallet) setActiveWallet(wallet);
diff --git a/packages/useink/src/utils/helpers/NOOP.ts b/packages/useink/src/utils/helpers/NOOP.ts
index 54caacb..c07de78 100644
--- a/packages/useink/src/utils/helpers/NOOP.ts
+++ b/packages/useink/src/utils/helpers/NOOP.ts
@@ -1 +1 @@
-export const NOOP: () => void = () => undefined;
+export const NOOP: () => void = () => {};
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..d5a2c8a 100644
--- a/playground/src/components/pg-home/HomePage.tsx
+++ b/playground/src/components/pg-home/HomePage.tsx
@@ -1,56 +1,18 @@
-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 */
-import {
-  VerificationState,
-  useBalance,
-  useBlockHeader,
-  useBlockHeaders,
-  useCall,
-  useCallSubscription,
-  useChainRpc,
-  useChainRpcList,
-  useContract,
-  useDryRun,
-  useEventSubscription,
-  useEvents,
-  useInstalledWallets,
-  useMessageSigner,
-  useSignatureVerifier,
-  useTimestampDate,
-  useTimestampNow,
-  useTokenSymbol,
-  useTx,
-  useTxPaymentInfo,
-  useUninstalledWallets,
-  useWallet,
-} from 'useink';
-import { ChainId } from 'useink/chains';
-import { useNotifications, useTxNotifications } from 'useink/notifications';
+import { useCall, useContract, useDryRun } from 'useink';
 import {
   RustResult,
-  isBroadcast,
-  isFinalized,
-  isInBlock,
-  isPendingSignature,
-  pickDecoded,
   pickDecodedError,
-  pickResultErr,
-  pickResultOk,
   pickTxInfo,
   planckToDecimalFormatted,
-  shouldDisable,
 } from 'useink/utils';
+import metadata from '../../metadata/playground.json';
+import { Notifications } from '../Notifications';
 
 const CONTRACTS_ROCOCO_ADDRESS =
   '5G31GiBqWPFCm8S9cknY7UWAPA8SwNJJdoG4RrmtVDQyrk7Y';
 
-const SHIBUYA_CONTRACT_ADDRESS =
-  /* cSpell:disable */
-  'XtH77i6CYHSSg7tFerUMCSWifBcAz2gewDXeyQNCbgRXHs8';
-
 interface Happy {
   mood: string;
 }
@@ -60,418 +22,58 @@ interface BadMood {
 // RustResult<T, E> is a convenience type to define { Ok?: T, Err?: E }, returned by calls
 // to contracts that return a Result<T, E>
 type MoodResult = RustResult<Happy, BadMood>;
-
 export const HomePage: React.FC = () => {
-  const { account, accounts, setAccount, connect, disconnect } = useWallet();
-  const block = useBlockHeader(); // with no arguments it defaults to the first item in the chains config
-  const astarBlockNumber = useBlockHeader('astar');
-  const allChainBlockHeaders = useBlockHeaders();
-  const balance = useBalance(account);
   const cRococoContract = useContract(CONTRACTS_ROCOCO_ADDRESS, metadata);
-  const { rpcs, setChainRpc } = useChainRpcList('astar');
-  const astarRpc = useChainRpc('astar');
-  const get = useCall<boolean>(cRococoContract, 'get');
-  const signer = useMessageSigner();
-  const signatureVerifier = useSignatureVerifier();
-  const [messageToSign, setMessageToSign] = useState(
-    'Sign this message, or change me and then sign!',
-  );
-  const getSubcription = useCallSubscription<boolean>(
-    cRococoContract,
-    'get',
-    [],
-    { defaultCaller: true },
-  );
-  const flipTx = useTx<void>(cRococoContract, 'flip');
+
+  const dryRunError = useDryRun<boolean>(cRococoContract, 'mood');
   const flipDryRun = useDryRun<boolean>(cRococoContract, 'flip');
-  const flipPaymentInfo = useTxPaymentInfo(cRococoContract, 'flip');
   const panic = useCall<boolean>(cRococoContract, 'panic');
-  const assertBoom = useCall<boolean>(cRococoContract, 'assertBoom');
   const mood = useCall<MoodResult>(cRococoContract, 'mood');
-  const phalaTimestamp = useTimestampNow('phala');
-  const phalaDate = useTimestampDate('phala');
-  const shibuyaContract = useContract(
-    SHIBUYA_CONTRACT_ADDRESS,
-    metadata,
-    'shibuya-testnet',
-  );
-  const shibuyaSymbol = useTokenSymbol('shibuya-testnet');
-  const rocSymbol = useTokenSymbol('rococo-contracts-testnet');
-  const shibuyaFlipTx = useTx(shibuyaContract, 'flip');
-  useTxNotifications(shibuyaFlipTx); // Add a notification on tx status changes
-  const shibuyaGetSubcription = useCallSubscription<boolean>(
-    shibuyaContract,
-    'get',
-  );
-  const { addNotification } = useNotifications();
-  useEventSubscription(cRococoContract);
-  const { events } = useEvents(cRococoContract?.contract?.address);
-  const option = useCall<Happy | null>(cRococoContract, 'option');
-
-  // Use helper functions to quickly pick values from a Result<T, E>
-  // Instead of doing something like this:
-  // mood?.result?.ok ? mood.result.value.decoded : undefined
-  const goodMood = pickResultOk(mood.result);
-  const badMood = pickResultErr(mood.result);
-
-  useEffect(() => {
-    // Customize messages
-    if (isPendingSignature(flipTx)) {
-      addNotification({
-        type: flipTx.status,
-        message: 'Please sign the transaction in your wallet',
-      });
-    }
-
-    if (isBroadcast(flipTx)) {
-      addNotification({
-        type: flipTx.status,
-        message: 'Flip transaction has been broadcast!',
-      });
-    }
-
-    if (isInBlock(flipTx)) {
-      addNotification({
-        type: flipTx.status,
-        message: 'Transaction is in the block.',
-      });
-    }
-
-    if (isFinalized(flipTx)) {
-      addNotification({
-        type: flipTx.status,
-        message: 'The transaction has been finalized.',
-      });
-    }
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [flipTx.status]);
-
-  useEffect(() => {
-    account &&
-      addNotification({
-        type: 'WalletConnected',
-        message: `Connected to ${account.name || account.address}`,
-      });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [account]);
-
-  const installedWallets = useInstalledWallets();
-  const uninstalledWallets = useUninstalledWallets();
+  console.log({ dryRunError, mood, moodValue: mood.result });
+  console.log({ cRococoContract });
 
   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'>
-          {!account && (
-            <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>
-                  {installedWallets.map((w) => (
-                    <li key={w.title}>
-                      <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'
-                      >
-                        <img
-                          className='w-12 mr-2'
-                          src={w.logo.src}
-                          alt={w.logo.alt}
-                        />
-                        Connect to {w.title}
-                      </button>
-                    </li>
-                  ))}
-                </>
-              ) : (
-                <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>
-
-                  {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'
-                      >
-                        <img
-                          className='w-12 mr-2'
-                          src={w.logo.src}
-                          alt={w.logo.alt}
-                        />
-                        Install {w.title}
-                      </a>
-                    </li>
-                  ))}
-                </>
-              )}
-            </ul>
-          )}
-          <ul className='list-none flex flex-col gap-12 mt-8'>
-            {account && (
-              <>
-                <li>
-                  <button
-                    type='button'
-                    onClick={disconnect}
-                    className='rounded-2xl text-white px-6 py-4 bg-blue-500 hover:bg-blue-600 transition duration-75'
-                  >
-                    Disconnect
-                  </button>
-                </li>
-
-                <li>
-                  <b>You are connected as:</b>
-                  <span className='ml-4 dark:bg-slate-600 bg-slate-200 rounded-lg py-2 px-2'>
-                    {account?.name || account?.address}
-                  </span>
-                </li>
-
-                {accounts?.map(
-                  (acc) =>
-                    account !== acc && (
-                      <li key={acc.address} className='flex flex-col'>
-                        <b>Connect to {acc.name ? acc.name : 'wallet'}</b>
-                        <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'
-                        >
-                          {acc.address}
-                        </button>
-                      </li>
-                    ),
-                )}
-
-                <li>
-                  <b>Your Free Balance:</b>
-                  <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,
-                    })}
-                  </span>
-                </li>
-              </>
-            )}
-
-            <li>
-              <b>Contracts Rococo Current Block:</b>
-              <span className='ml-4 dark:bg-slate-600 bg-slate-200 rounded-lg py-2 px-2'>
-                {block?.blockNumber === undefined
-                  ? '--'
-                  : block.blockNumber.toLocaleString()}
-              </span>
-            </li>
-
-            <li>
-              <b>Astar Current Block:</b>
-              <span className='ml-4 dark:bg-slate-600 bg-slate-200 rounded-lg py-2 px-2'>
-                {astarBlockNumber?.blockNumber === undefined
-                  ? '--'
-                  : astarBlockNumber.blockNumber.toLocaleString()}
-              </span>
-            </li>
-
-            <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'>
-                {rpcs.map((rpc) => (
-                  <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'
-                      disabled={rpc === astarRpc}
-                      onClick={() => setChainRpc(rpc, 'astar')}
-                    >
-                      {rpc}
-                    </button>
-                  </li>
-                ))}
-              </ul>
-            </li>
-
-            <li>
-              <b>
-                Get all blocks from configured chains using:{' '}
-                <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'>
-                {(Object.keys(allChainBlockHeaders) as ChainId[]).map(
-                  (chainId) => (
-                    <li key={chainId} className='p-0'>
-                      <span>
-                        <b>{chainId}:</b>{' '}
-                        {allChainBlockHeaders[
-                          chainId
-                        ]?.blockNumber?.toLocaleString() || '--'}{' '}
-                      </span>
-                    </li>
-                  ),
-                )}
-              </ul>
-            </li>
-
-            <li>
-              <b>
-                Phala&apos;s current timestamp:{' '}
-                <code className='p-1 rounded-md bg-slate-500'>
-                  {phalaTimestamp}
-                </code>
-              </b>
-
-              <p className='text-sm'>
-                Phala&apos;s last block time: {phalaDate?.toLocaleTimeString()}
-              </p>
-            </li>
-
-            <li className='flex items-center gap-4'>
-              <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'
-              >
-                Call get()
-              </button>
-
-              <h3 className='text-xl'>
-                Value: {pickDecoded(get.result)?.toString() || '--'}
-              </h3>
-            </li>
-
-            <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'>
+        <div className="mt-8">
+          <ul className="list-none flex flex-col gap-12 mt-8">
+            <li className="flex flex-col gap-4">
               <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'
-              >
-                {shouldDisable(flipTx) ? 'Flipping' : 'Flip!'}
-              </button>
-
-              <h3 className='text-xl'>
-                <b>Status:</b> {flipTx.status}
-              </h3>
-
-              <h3 className='text-xl'>
-                <b>Events:</b>
-                <ul className='ml-4'>
-                  {events.map((event) => (
-                    <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>
-                  ))}
-                </ul>
-              </h3>
-
-              <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'
-              >
-                Reset state
-              </button>
-            </li>
-
-            <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'>
-                Shibuya Flipped:{' '}
-                {pickDecoded(shibuyaGetSubcription.result)?.toString() || '--'}
-              </h3>
-
-              <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'
-              >
-                {shouldDisable(shibuyaFlipTx)
-                  ? 'Flipping Shibuya Contract'
-                  : 'Flip Shibuya Contract!'}
-              </button>
-
-              <h3 className='text-xl'>
-                <b>Status:</b> {shibuyaFlipTx.status}
-              </h3>
-
-              <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'
-              >
-                Reset state
-              </button>
-            </li>
-
-            <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,39 +84,38 @@ export const HomePage: React.FC = () => {
               </h3>
             </li>
 
-            <li className='flex flex-col gap-4'>
+            <li className="flex flex-col gap-4">
               <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'
+                type="button"
+                onClick={() => dryRunError.send([1], { defaultCaller: true })}
+                disabled={dryRunError.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"
               >
-                {flipPaymentInfo.isSubmitting
-                  ? 'Getting payment info...'
-                  : 'Get payment info for flip'}
+                {dryRunError.isSubmitting ? 'Flipping' : 'Dry Run with Error!'}
               </button>
 
-              <h3 className='text-xl'>
-                <b>Partial Fee (a.k.a. Gas Required):</b>{' '}
-                {planckToDecimalFormatted(flipPaymentInfo.result?.partialFee, {
-                  api: cRococoContract.contract.api,
-                })}
+              <h3 className="text-xl">
+                <b>Gas Required:</b>{' '}
+                {planckToDecimalFormatted(
+                  pickTxInfo(dryRunError.result)?.partialFee,
+                  { api: cRococoContract.contract.api },
+                )}
+
+                {pickDecodedError(dryRunError, cRococoContract, {}, '--')}
               </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,183 +128,35 @@ export const HomePage: React.FC = () => {
               </h3>
             </li>
 
-            <li className='flex flex-col gap-4'>
-              <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'
-              >
-                Call assertBoom()
-              </button>
-
-              <h3 className='text-xl'>
-                {pickDecodedError(
-                  assertBoom,
-                  cRococoContract,
-                  {
-                    ContractTrapped:
-                      'This is a custom message. The assertion failed!',
-                  },
-                  '--',
-                )}
-              </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'>
-                Mood: {!goodMood && !badMood && '--'}
-                {goodMood?.mood}
-                {badMood?.BadMood.mood}
-              </h3>
-            </li>
-
-            <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'
-                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'
-              >
-                {option.isSubmitting
-                  ? 'Getting option result...'
-                  : 'Get Some(Happy) result'}
-              </button>
-
-              <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'
-              >
-                {option.isSubmitting
-                  ? 'Getting option result...'
-                  : 'Get Option None Response'}
-              </button>
-
-              <h3 className='text-xl'>
-                Option: {!option.result && '--'}
-                {JSON.stringify(pickDecoded(option.result))}
-              </h3>
-            </li>
-
-            <li>
-              <h3 className='text-xl'>
-                Rococo Contracts Token Symbol: <b>{rocSymbol}</b>
-              </h3>
-
-              <h3 className='text-xl'>
-                Shibuya Token Symbol: <b>{shibuyaSymbol}</b>
-              </h3>
-            </li>
-
-            <li>
-              <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'
-                value={messageToSign}
-                onChange={(e) => setMessageToSign(e.target.value)}
-              />
-              <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'
-              >
-                Sign Message
-              </button>
-
-              <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'
-              >
-                Reset State
-              </button>
-
-              {signer.signature && account?.address && (
-                <div className='mt-3'>
-                  <textarea
-                    className='text-sm text-black min-h-[80px] w-full rounded-md p-3'
-                    value={signer.signature}
-                  />
-
-                  <button
-                    type='button'
-                    onClick={() => {
-                      signatureVerifier.verify(
-                        messageToSign,
-                        signer.signature || '',
-                        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'
-                  >
-                    Verify Signature
-                  </button>
-
-                  <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'
-                  >
-                    Reset Verification State
-                  </button>
-
-                  <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>
-              )}
             </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 />
     </>