diff --git a/packages/useink/src/core/types/api-contract.ts b/packages/useink/src/core/types/api-contract.ts
index f9dcb6d..38ed37d 100644
--- a/packages/useink/src/core/types/api-contract.ts
+++ b/packages/useink/src/core/types/api-contract.ts
@@ -1,5 +1,5 @@
-import { SubmittableResult } from '@polkadot/api';
 import { ISubmittableResult } from './substrate.ts';
+import { SubmittableResult } from '@polkadot/api';
 
 export {
   BlueprintPromise,
@@ -28,7 +28,7 @@ export type {
 } from '@polkadot/api-contract/types';
 export { Abi, ContractPromise } from '@polkadot/api-contract';
 
-// biome-ignore lint/correctness/noUnusedVariables: The Release flow breaks when exporting from '@polkadot/api-contract/base/contract';
+// rome-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 06c337c..d7b35bd 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 65b0a93..d3afc58 100644
--- a/packages/useink/src/notifications/hooks/useNotifications.ts
+++ b/packages/useink/src/notifications/hooks/useNotifications.ts
@@ -1,4 +1,3 @@
-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';
@@ -8,6 +7,7 @@ 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 8131141..603dce6 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 863444b..8f1f05e 100644
--- a/packages/useink/src/notifications/provider.tsx
+++ b/packages/useink/src/notifications/provider.tsx
@@ -1,4 +1,3 @@
-import React, { useCallback, useReducer } from 'react';
 import { useIsMounted } from '../react/hooks/internal/useIsMounted.ts';
 import { pseudoRandomId } from '../utils/index';
 import { NotificationsContext } from './context.ts';
@@ -8,6 +7,7 @@ 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 96bcfbe..918be99 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 0db427b..33ce2c6 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 6ce5657..68320c7 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 74d5efb..a288ae1 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 d99f16b..eb6c088 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 4008350..b5ef110 100644
--- a/packages/useink/src/react/hooks/contracts/useCall.ts
+++ b/packages/useink/src/react/hooks/contracts/useCall.ts
@@ -1,4 +1,3 @@
-import { useCallback, useState } from 'react';
 import {
   DecodedContractResult,
   LazyCallOptions,
@@ -7,6 +6,7 @@ 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 946f67f..338c14f 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 ea24644..79fbab6 100644
--- a/packages/useink/src/react/hooks/contracts/useCodeHash.ts
+++ b/packages/useink/src/react/hooks/contracts/useCodeHash.ts
@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useState } from 'react';
 import { isValidHash } from '../../../utils';
+import { useCallback, useEffect, useState } from 'react';
 
 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 a0d91ad..0f6f281 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 b489442..8dd69e8 100644
--- a/packages/useink/src/react/hooks/contracts/useDeployer/useDeployer.ts
+++ b/packages/useink/src/react/hooks/contracts/useDeployer/useDeployer.ts
@@ -1,4 +1,3 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
 import { ChainId } from '../../../../chains/index.ts';
 import {
   BlueprintPromise,
@@ -27,6 +26,7 @@ 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 1ec42cf..ee4634b 100644
--- a/packages/useink/src/react/hooks/contracts/useDryRun.ts
+++ b/packages/useink/src/react/hooks/contracts/useDryRun.ts
@@ -1,4 +1,3 @@
-import { useMemo, useState } from 'react';
 import {
   DecodedTxResult,
   LazyCallOptions,
@@ -9,6 +8,7 @@ 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 8ab113f..6241af3 100644
--- a/packages/useink/src/react/hooks/contracts/useEventSubscription.ts
+++ b/packages/useink/src/react/hooks/contracts/useEventSubscription.ts
@@ -1,5 +1,3 @@
-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';
@@ -8,6 +6,8 @@ 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 3dffb9f..6dc09a8 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 438543c..7118b29 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 f08c133..05d953f 100644
--- a/packages/useink/src/react/hooks/contracts/useMetadata.ts
+++ b/packages/useink/src/react/hooks/contracts/useMetadata.ts
@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react';
 import { ChainId } from '../../../chains';
 import {
   DEFAULT,
@@ -8,6 +7,7 @@ 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 dc482ec..05455d9 100644
--- a/packages/useink/src/react/hooks/contracts/useSalter.ts
+++ b/packages/useink/src/react/hooks/contracts/useSalter.ts
@@ -1,5 +1,5 @@
-import { useCallback, useState } from 'react';
 import { isValidHash, pseudoRandomHex } from '../../../utils';
+import { useCallback, useState } from 'react';
 
 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 e230e97..411e67a 100644
--- a/packages/useink/src/react/hooks/contracts/useSignatureVerifier.ts
+++ b/packages/useink/src/react/hooks/contracts/useSignatureVerifier.ts
@@ -1,5 +1,5 @@
-import { useCallback, useState } from 'react';
 import { signatureVerify } from '../../../utils';
+import { useCallback, useState } from 'react';
 
 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 5a8e1d0..235b3ea 100644
--- a/packages/useink/src/react/hooks/contracts/useTx.ts
+++ b/packages/useink/src/react/hooks/contracts/useTx.ts
@@ -1,4 +1,3 @@
-import { useMemo, useState } from 'react';
 import {
   ApiBase,
   ContractSubmittableResult,
@@ -11,6 +10,7 @@ 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 30fa10e..1941bef 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 a9e6350..a94eddb 100644
--- a/packages/useink/src/react/hooks/contracts/useTxPaymentInfo.ts
+++ b/packages/useink/src/react/hooks/contracts/useTxPaymentInfo.ts
@@ -1,4 +1,3 @@
-import { useCallback, useState } from 'react';
 import { ChainContract, useDefaultCaller } from '..';
 import {
   LazyCallOptions,
@@ -7,6 +6,7 @@ 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 278d618..f78fec7 100644
--- a/packages/useink/src/react/hooks/helpers/useUnixMilliToDate.ts
+++ b/packages/useink/src/react/hooks/helpers/useUnixMilliToDate.ts
@@ -1,5 +1,5 @@
-import { useMemo } from 'react';
 import { unixMilliToDate } from '../../../utils/helpers/unixMilliToDate';
+import { useMemo } from 'react';
 
 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 b715841..c1c3427 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 80f51b4..9b8a9f7 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 28c5efd..d0121ea 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 a704104..d9b4aa4 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 c3eddc9..ac3cbb8 100644
--- a/packages/useink/src/react/hooks/substrate/useBlockHeader.ts
+++ b/packages/useink/src/react/hooks/substrate/useBlockHeader.ts
@@ -1,4 +1,3 @@
-import { useContext } from 'react';
 import { ChainId } from '../../../chains/index';
 import {
   BlockHeaderContext,
@@ -6,6 +5,7 @@ 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 fa3d4c0..8c957cc 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 a0736ea..b22d2e3 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 957dacf..45d1963 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 5f17dcc..e539aa8 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 cec3c26..6088f63 100644
--- a/packages/useink/src/react/hooks/wallets/useWallet.ts
+++ b/packages/useink/src/react/hooks/wallets/useWallet.ts
@@ -1,5 +1,5 @@
-import { useContext } from 'react';
 import { WalletContext, WalletState } from '../../providers/wallet/index';
+import { useContext } from 'react';
 
 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 f7dceaa..ff04ed8 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 80d3bb2..9bce7b1 100644
--- a/packages/useink/src/react/providers/api/context.ts
+++ b/packages/useink/src/react/providers/api/context.ts
@@ -1,5 +1,5 @@
-import { createContext } from 'react';
 import { API } from './model.ts';
+import { createContext } from 'react';
 
 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 2715895..1a8910a 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 7e8bb0f..048b5df 100644
--- a/packages/useink/src/react/providers/blockHeader/context.ts
+++ b/packages/useink/src/react/providers/blockHeader/context.ts
@@ -1,5 +1,5 @@
-import { createContext } from 'react';
 import { BLOCK_HEADER_DEFAULTS, ChainBlockHeaders } from './model.ts';
+import { createContext } from 'react';
 
 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 9103af9..4635762 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 389ddbb..2e07605 100644
--- a/packages/useink/src/react/providers/config/context.ts
+++ b/packages/useink/src/react/providers/config/context.ts
@@ -1,5 +1,5 @@
-import React from 'react';
 import { ChainConfig, ConfigProps, DEFAULT_CONFIG } from './model.ts';
+import React from 'react';
 
 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 3fc041c..e6f7765 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 73aec39..913bc39 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 12a04f2..fe0d519 100644
--- a/packages/useink/src/react/providers/events/provider.tsx
+++ b/packages/useink/src/react/providers/events/provider.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { pseudoRandomId } from '../../../utils/index';
 import { EventsContext } from './context.ts';
 import {
@@ -7,6 +6,7 @@ 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 23e827e..dc1ba6c 100644
--- a/packages/useink/src/react/providers/wallet/context.ts
+++ b/packages/useink/src/react/providers/wallet/context.ts
@@ -1,5 +1,5 @@
-import { createContext } from 'react';
 import { WALLET_DEFAULTS, WalletState } from './model.ts';
+import { createContext } from 'react';
 
 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 2c3f2aa..d4f379c 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: () => {},
-  disconnect: () => {},
+  connect: () => undefined,
+  disconnect: () => undefined,
   account: undefined,
   accounts: undefined,
-  setAccount: () => {},
+  setAccount: () => undefined,
   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 cb28d33..e021559 100644
--- a/packages/useink/src/react/providers/wallet/provider.tsx
+++ b/packages/useink/src/react/providers/wallet/provider.tsx
@@ -1,4 +1,3 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   Unsub,
   WalletAccount,
@@ -8,6 +7,7 @@ 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,7 +25,6 @@ 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[]>();
@@ -156,7 +155,6 @@ 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 c07de78..54caacb 100644
--- a/packages/useink/src/utils/helpers/NOOP.ts
+++ b/packages/useink/src/utils/helpers/NOOP.ts
@@ -1 +1 @@
-export const NOOP: () => void = () => {};
+export const NOOP: () => void = () => undefined;
diff --git a/packages/useink/src/utils/helpers/parseUnits/parseUnits.ts b/packages/useink/src/utils/helpers/parseUnits/parseUnits.ts
index a5e3ffe..502acf4 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 d89511b..e3173d3 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 14a1bec..0dd1546 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 2e7284f..63f9e7c 100644
--- a/playground/src/components/Notifications/Notifications.tsx
+++ b/playground/src/components/Notifications/Notifications.tsx
@@ -1,5 +1,5 @@
-import { toNotificationLevel, useNotifications } from 'useink/notifications';
 import { Snackbar } from '../Snackbar';
+import { toNotificationLevel, useNotifications } from 'useink/notifications';
 
 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 c264d2f..a10e8f6 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 09369cb..7354bba 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 47d1940..f874243 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 ef30cd6..ddc1cf5 100644
--- a/playground/src/components/pg-deploy/DeployPage.tsx
+++ b/playground/src/components/pg-deploy/DeployPage.tsx
@@ -1,3 +1,9 @@
+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';
@@ -17,12 +23,6 @@ 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 d5a2c8a..af25f78 100644
--- a/playground/src/components/pg-home/HomePage.tsx
+++ b/playground/src/components/pg-home/HomePage.tsx
@@ -1,18 +1,56 @@
+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 { useCall, useContract, useDryRun } from 'useink';
+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 {
   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;
 }
@@ -22,58 +60,418 @@ 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 dryRunError = useDryRun<boolean>(cRococoContract, 'mood');
+  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 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.',
+      });
+    }
 
-  console.log({ dryRunError, mood, moodValue: mood.result });
-  console.log({ cRococoContract });
+    // 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();
 
   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">
-          <ul className="list-none flex flex-col gap-12 mt-8">
-            <li className="flex flex-col gap-4">
+        <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'>
               <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'
+              >
+                {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'
                 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,
@@ -84,38 +482,39 @@ 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={() => 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"
+                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'
               >
-                {dryRunError.isSubmitting ? 'Flipping' : 'Dry Run with Error!'}
+                {flipPaymentInfo.isSubmitting
+                  ? 'Getting payment info...'
+                  : 'Get payment info for flip'}
               </button>
 
-              <h3 className="text-xl">
-                <b>Gas Required:</b>{' '}
-                {planckToDecimalFormatted(
-                  pickTxInfo(dryRunError.result)?.partialFee,
-                  { api: cRococoContract.contract.api },
-                )}
-
-                {pickDecodedError(dryRunError, cRococoContract, {}, '--')}
+              <h3 className='text-xl'>
+                <b>Partial Fee (a.k.a. Gas Required):</b>{' '}
+                {planckToDecimalFormatted(flipPaymentInfo.result?.partialFee, {
+                  api: cRococoContract.contract.api,
+                })}
               </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,
@@ -128,35 +527,183 @@ 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'>
+              <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'>
                 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/components/pg-home/HomePageSmol.tsx b/playground/src/components/pg-home/HomePageSmol.tsx
new file mode 100644
index 0000000..2ff499f
--- /dev/null
+++ b/playground/src/components/pg-home/HomePageSmol.tsx
@@ -0,0 +1,716 @@
+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 {
+  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;
+}
+interface BadMood {
+  BadMood: { mood: string };
+}
+// 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 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();
+
+  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>
+    );
+  }
+
+  return (
+    <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">
+          useink Kitchen Sink
+        </h1>
+        <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"
+          >
+            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">
+              <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"
+                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"
+              >
+                {flipDryRun.isSubmitting ? 'Flipping' : 'Flip as Dry Run!'}
+              </button>
+
+              <h3 className="text-xl">
+                <b>Gas Required:</b>{' '}
+                {planckToDecimalFormatted(
+                  pickTxInfo(flipDryRun.result)?.partialFee,
+                  { api: cRococoContract.contract.api },
+                )}
+
+                {pickDecodedError(flipDryRun, cRococoContract, {}, '--')}
+              </h3>
+            </li>
+
+            <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"
+              >
+                {flipPaymentInfo.isSubmitting
+                  ? 'Getting payment info...'
+                  : 'Get payment info for flip'}
+              </button>
+
+              <h3 className="text-xl">
+                <b>Partial Fee (a.k.a. Gas Required):</b>{' '}
+                {planckToDecimalFormatted(flipPaymentInfo.result?.partialFee, {
+                  api: cRococoContract.contract.api,
+                })}
+              </h3>
+            </li>
+
+            <li className="flex flex-col gap-4">
+              <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"
+              >
+                Call panic()
+              </button>
+
+              <h3 className="text-xl">
+                {pickDecodedError(
+                  panic,
+                  cRococoContract,
+                  {
+                    ContractTrapped:
+                      'This is a custom message. There was a panic in the contract!',
+                  },
+                  'this is a default error message',
+                )}
+              </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">
+                Handle Results. An even number will return an Ok Result, and an
+                odd number will return an Error
+              </h3>
+              <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"
+              >
+                {mood.isSubmitting ? 'Getting mood...' : 'Get Ok Result'}
+              </button>
+
+              <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"
+              >
+                {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>
+              <Link
+                className="text-brand-200 hover:text-brand-300 transition duration-75 underline"
+                href="/deploy"
+              >
+                See a Deploy Example
+              </Link>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/playground/src/pages/_app.tsx b/playground/src/pages/_app.tsx
index 4270205..0f9c7f1 100644
--- a/playground/src/pages/_app.tsx
+++ b/playground/src/pages/_app.tsx
@@ -1,3 +1,4 @@
+import '../styles/globals.css';
 import type { AppProps } from 'next/app';
 import dynamic from 'next/dynamic';
 import React from 'react';
@@ -11,7 +12,6 @@ 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 a3d2ea1..111fc5b 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 9bc5463..1f87908 100644
--- a/playground/src/pages/deploy.tsx
+++ b/playground/src/pages/deploy.tsx
@@ -1,5 +1,5 @@
-import Head from 'next/head';
 import DeployPage from '../components/pg-deploy';
+import Head from 'next/head';
 
 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 9792a75..6497334 100644
--- a/playground/src/pages/index.tsx
+++ b/playground/src/pages/index.tsx
@@ -1,14 +1,14 @@
-import Head from 'next/head';
 import HomePage from '../components/pg-home';
+import Head from 'next/head';
 
 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 />
     </>