Fix context hooks import

utils/gear-hooks/src/context/Account.tsx

@@ -1,7 +1,7 @@
 import { InjectedAccountWithMeta, InjectedExtension, Unsubcall } from '@polkadot/extension-inject/types';
 import { web3Accounts, web3AccountsSubscribe, web3Enable } from '@polkadot/extension-dapp';
 import { decodeAddress } from '@gear-js/api';
-import { useState, createContext, useEffect, useMemo } from 'react';
+import { useState, createContext, useEffect, useMemo, useContext } from 'react';
 import { LOCAL_STORAGE, VARA_SS58_FORMAT } from 'consts';
 import { Account, ProviderProps } from '../types';
 
@@ -85,4 +85,6 @@ function AccountProvider({ children }: ProviderProps) {
   return <Provider value={value}>{children}</Provider>;
 }
 
-export { AccountContext, AccountProvider };
+const useAccount = () => useContext(AccountContext);
+
+export { AccountProvider, useAccount };

utils/gear-hooks/src/context/Alert.tsx

@@ -1,4 +1,14 @@
-import { useState, useRef, useEffect, useCallback, useMemo, ReactNode, ComponentType, createContext } from 'react';
+import {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useMemo,
+  ReactNode,
+  ComponentType,
+  createContext,
+  useContext,
+} from 'react';
 import { createPortal } from 'react-dom';
 import { TransitionGroup } from 'react-transition-group';
 import { nanoid } from 'nanoid/non-secure';
@@ -146,4 +156,6 @@ const AlertProvider = ({ children, template: Template, containerClassName }: Pro
   );
 };
 
-export { AlertContext, AlertProvider };
+const useAlert = () => useContext(AlertContext);
+
+export { AlertProvider, useAlert };

utils/gear-hooks/src/context/Api.tsx

@@ -1,7 +1,7 @@
 import { GearApi } from '@gear-js/api';
 import { WsProvider, ScProvider } from '@polkadot/api';
 import * as Sc from '@substrate/connect';
-import { createContext, useEffect, useMemo, useRef, useState } from 'react';
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
 
 import { ProviderProps } from 'types';
 
@@ -100,4 +100,6 @@ function ApiProvider({ initialArgs, children }: Props) {
   return <Provider value={value}>{children}</Provider>;
 }
 
-export { ApiContext, ApiProvider };
+const useApi = () => useContext(ApiContext);
+
+export { ApiProvider, useApi };

utils/gear-hooks/src/context/index.ts

@@ -1,5 +1,5 @@
-import { AccountContext, AccountProvider } from './Account';
-import { ApiContext, ApiProvider } from './Api';
-import { AlertContext, AlertProvider } from './Alert';
+import { AccountProvider, useAccount } from './Account';
+import { ApiProvider, useApi } from './Api';
+import { AlertProvider, useAlert } from './Alert';
 
-export { AccountContext, AccountProvider, ApiContext, ApiProvider, AlertContext, AlertProvider };
+export { AccountProvider, useAccount, ApiProvider, useApi, AlertProvider, useAlert };

utils/gear-hooks/src/hooks/api/balance/use-balance-format.ts

@@ -1,10 +1,9 @@
-import { BigNumber } from 'bignumber.js';
-import { useContext } from 'react';
-import { ApiContext } from 'context';
 import { formatBalance } from '@polkadot/util';
+import { BigNumber } from 'bignumber.js';
+import { useApi } from 'context';
 
 function useBalanceFormat() {
-  const { api, isApiReady } = useContext(ApiContext); // сircular dependency fix
+  const { api, isApiReady } = useApi();
 
   const [decimals] = isApiReady ? api.registry.chainDecimals : [0];
   const valuePerGas = isApiReady ? api.valuePerGas.toString() : '1000';

utils/gear-hooks/src/hooks/api/balance/use-balance.ts

@@ -1,10 +1,10 @@
 import { Balance } from '@polkadot/types/interfaces';
-import { useContext, useEffect, useState } from 'react';
-import { AlertContext, ApiContext } from 'context';
+import { useEffect, useState } from 'react';
+import { useAlert, useApi } from 'context';
 
 function useBalance(address: string | undefined) {
-  const { api, isApiReady } = useContext(ApiContext);
-  const alert = useContext(AlertContext);
+  const { api, isApiReady } = useApi();
+  const alert = useAlert();
 
   const [balance, setBalance] = useState<Balance>();
   const isBalanceReady = balance !== undefined;

utils/gear-hooks/src/hooks/api/balance/use-derive-balances-all.ts

@@ -1,9 +1,9 @@
 import { DeriveBalancesAll } from '@polkadot/api-derive/types';
-import { useContext, useEffect, useState } from 'react';
-import { AccountContext, ApiContext } from 'context';
+import { useEffect, useState } from 'react';
+import { useAccount, useApi } from 'context';
 
 function useDeriveBalancesAll(accountAddress: string | undefined) {
-  const { api, isApiReady } = useContext(ApiContext);
+  const { api, isApiReady } = useApi();
 
   const [balances, setBalances] = useState<DeriveBalancesAll>();
 
@@ -22,7 +22,7 @@ function useDeriveBalancesAll(accountAddress: string | undefined) {
 }
 
 function useAccountDeriveBalancesAll() {
-  const { account } = useContext(AccountContext);
+  const { account } = useAccount();
 
   return useDeriveBalancesAll(account?.address);
 }

utils/gear-hooks/src/hooks/api/block/use-approx-block-timestamp.ts

@@ -1,9 +1,8 @@
-import { useCallback, useContext, useEffect, useState } from 'react';
-
-import { AlertContext, ApiContext } from 'context';
+import { useCallback, useEffect, useState } from 'react';
+import { useApi, useAlert } from 'context';
 
 function useGetApproxBlockTimestamp() {
-  const { api, isApiReady } = useContext(ApiContext);
+  const { api, isApiReady } = useApi();
 
   const getApproxBlockTimestamp = useCallback(
     async (blockNumber: number) => {
@@ -25,8 +24,8 @@ function useGetApproxBlockTimestamp() {
 }
 
 function useApproxBlockTimestamp(blockNumber: number | undefined) {
-  const { isApiReady } = useContext(ApiContext);
-  const alert = useContext(AlertContext);
+  const { isApiReady } = useApi();
+  const alert = useAlert();
 
   const getApproxBlockTimestamp = useGetApproxBlockTimestamp();
 

utils/gear-hooks/src/hooks/api/useCalculateGas/index.ts

@@ -1,17 +1,16 @@
 import { GasInfo, ProgramMetadata } from '@gear-js/api';
 import { AnyJson, AnyNumber } from '@polkadot/types/types';
 import { HexString } from '@polkadot/util/types';
-import { useContext } from 'react';
-import { AccountContext, ApiContext } from 'context';
+import { useApi, useAccount } from 'context';
 import { Options } from './types';
 
 function useUploadCalculateGas(
   code: HexString | Buffer | undefined,
   meta?: ProgramMetadata | undefined,
   options?: Options,
 ) {
-  const { api, isApiReady } = useContext(ApiContext); // сircular dependency fix
-  const { account } = useContext(AccountContext);
+  const { api, isApiReady } = useApi();
+  const { account } = useAccount();
 
   const calculateGas = (initPayload: AnyJson, value: AnyNumber = 0): Promise<GasInfo> => {
     if (!isApiReady) return Promise.reject(new Error('API is not initialized'));
@@ -28,8 +27,8 @@ function useUploadCalculateGas(
 }
 
 function useCreateCalculateGas(codeId: HexString | undefined, meta?: ProgramMetadata | undefined, options?: Options) {
-  const { api, isApiReady } = useContext(ApiContext); // сircular dependency fix
-  const { account } = useContext(AccountContext);
+  const { api, isApiReady } = useApi();
+  const { account } = useAccount();
 
   const calculateGas = (initPayload: AnyJson, value: AnyNumber = 0): Promise<GasInfo> => {
     if (!isApiReady) return Promise.reject(new Error('API is not initialized'));
@@ -50,8 +49,8 @@ function useHandleCalculateGas(
   meta?: ProgramMetadata | undefined,
   options?: Options,
 ) {
-  const { api, isApiReady } = useContext(ApiContext); // сircular dependency fix
-  const { account } = useContext(AccountContext);
+  const { api, isApiReady } = useApi();
+  const { account } = useAccount();
 
   const calculateGas = (initPayload: AnyJson, value: AnyNumber = 0): Promise<GasInfo> => {
     if (!isApiReady) return Promise.reject(new Error('API is not initialized'));
@@ -75,8 +74,8 @@ function useHandleCalculateGas(
 }
 
 function useReplyCalculateGas(messageId: HexString | undefined, meta?: ProgramMetadata | undefined, options?: Options) {
-  const { api, isApiReady } = useContext(ApiContext); // сircular dependency fix
-  const { account } = useContext(AccountContext);
+  const { api, isApiReady } = useApi();
+  const { account } = useAccount();
 
   const calculateGas = (initPayload: AnyJson, value: AnyNumber = 0) => {
     if (!isApiReady) return Promise.reject(new Error('API is not initialized'));

utils/gear-hooks/src/hooks/api/useProgram/index.ts

@@ -1,8 +1,7 @@
 import { web3FromSource } from '@polkadot/extension-dapp';
 import { GasLimit, ProgramMetadata } from '@gear-js/api';
 import { AnyJson } from '@polkadot/types/types';
-import { useContext } from 'react';
-import { AccountContext, AlertContext, ApiContext } from 'context';
+import { useAccount, useAlert, useApi } from 'context';
 import { TransactionName, Options, Code, CodeId, UseProgram } from './types';
 import { useHandlers } from './useHandlers';
 import { waitForProgramInit } from './utils';
@@ -25,9 +24,9 @@ function useProgram(
   metadata?: ProgramMetadata | undefined,
   payloadType?: string | undefined,
 ): UseProgram {
-  const alert = useContext(AlertContext); // сircular dependency fix
-  const { api, isApiReady } = useContext(ApiContext);
-  const { account } = useContext(AccountContext);
+  const alert = useAlert();
+  const { api, isApiReady } = useApi();
+  const { account } = useAccount();
 
   const { handleSignStatus, handleInitStatus, handleError } = useHandlers();
 

utils/gear-hooks/src/hooks/api/useProgram/useHandlers/index.ts

@@ -1,11 +1,10 @@
-import { useContext } from 'react';
 import { DEFAULT_ERROR_OPTIONS } from 'consts';
-import { AlertContext } from 'context';
+import { useAlert } from 'context';
 import { HandleInitParams, ProgramStatus, HandleErrorParams } from '../types';
 import { useHandleSignStatus } from './useHandleSignStatus';
 
 function useHandlers() {
-  const alert = useContext(AlertContext);
+  const alert = useAlert();
 
   const handleSignStatus = useHandleSignStatus();
 

utils/gear-hooks/src/hooks/api/useProgram/useHandlers/useHandleSignStatus.ts

@@ -1,14 +1,13 @@
 import { EventRecord } from '@polkadot/types/interfaces';
 import { HexString } from '@polkadot/util/types';
-import { useContext } from 'react';
 import { DEFAULT_SUCCESS_OPTIONS, DEFAULT_ERROR_OPTIONS } from 'consts';
-import { AlertContext, ApiContext } from 'context';
+import { useAlert, useApi } from 'context';
 import { getExtrinsicFailedMessage } from 'utils';
 import { Callbacks, Method, HandleSignStatusParams, TransactionStatus, ProgramError } from '../types';
 
 function useHandleSignStatus() {
-  const { api, isApiReady } = useContext(ApiContext); // сircular dependency fix
-  const alert = useContext(AlertContext);
+  const { api, isApiReady } = useApi();
+  const alert = useAlert();
 
   const handleEventsStatus = (events: EventRecord[], programId: HexString, callbacks?: Callbacks) => {
     if (!isApiReady) throw new Error('API is not initialized');

utils/gear-hooks/src/hooks/api/useReadState/useReadFullState.ts

@@ -1,17 +1,17 @@
 import { MessagesDispatched, ProgramMetadata } from '@gear-js/api';
 import { AnyJson } from '@polkadot/types/types';
 import { HexString } from '@polkadot/util/types';
-import { useContext, useEffect, useState } from 'react';
-import { AlertContext, ApiContext } from 'context';
+import { useEffect, useState } from 'react';
+import { useAlert, useApi } from 'context';
 
 function useReadFullState<T = AnyJson>(
   programId: HexString | undefined,
   meta: ProgramMetadata | undefined,
   payload: AnyJson,
   isReadOnError?: boolean,
 ) {
-  const { api } = useContext(ApiContext); // сircular dependency fix
-  const alert = useContext(AlertContext);
+  const { api } = useApi();
+  const alert = useAlert();
 
   const [state, setState] = useState<T>();
   const [isStateRead, setIsStateRead] = useState(true);

utils/gear-hooks/src/hooks/api/useReadState/useReadWasmState.ts

@@ -1,8 +1,8 @@
 import { MessagesDispatched, ProgramMetadata, getStateMetadata } from '@gear-js/api';
 import { AnyJson } from '@polkadot/types/types';
 import { HexString } from '@polkadot/util/types';
-import { useContext, useEffect, useState } from 'react';
-import { AlertContext, ApiContext } from 'context';
+import { useEffect, useState } from 'react';
+import { useAlert, useApi } from 'context';
 
 type Args = {
   programId: HexString | undefined;
@@ -16,8 +16,8 @@ type Args = {
 function useReadWasmState<T = AnyJson>(args: Args, isReadOnError?: boolean) {
   const { programId, wasm, programMetadata, functionName, payload, argument } = args;
 
-  const { api } = useContext(ApiContext); // сircular dependency fix
-  const alert = useContext(AlertContext);
+  const { api } = useApi();
+  const alert = useAlert();
 
   const [state, setState] = useState<T>();
   const [isStateRead, setIsStateRead] = useState(true);

utils/gear-hooks/src/hooks/api/useSendMessage.ts

@@ -3,9 +3,8 @@ import { web3FromSource } from '@polkadot/extension-dapp';
 import { EventRecord } from '@polkadot/types/interfaces';
 import { AnyJson, IKeyringPair, ISubmittableResult } from '@polkadot/types/types';
 import { HexString } from '@polkadot/util/types';
-import { useContext } from 'react';
 
-import { AccountContext, AlertContext, ApiContext } from 'context';
+import { useAccount, useAlert, useApi } from 'context';
 import { DEFAULT_ERROR_OPTIONS, DEFAULT_SUCCESS_OPTIONS } from 'consts';
 import { getExtrinsicFailedMessage } from 'utils';
 
@@ -31,9 +30,9 @@ function useSendMessage(
   metadata: ProgramMetadata | undefined,
   { disableAlerts, pair }: UseSendMessageOptions = {},
 ) {
-  const { api, isApiReady } = useContext(ApiContext); // сircular dependency fix
-  const { account } = useContext(AccountContext);
-  const alert = useContext(AlertContext);
+  const { api, isApiReady } = useApi();
+  const { account } = useAccount();
+  const alert = useAlert();
 
   const title = 'gear.sendMessage';
 

utils/gear-hooks/src/hooks/api/voucher/use-is-any-voucher-active.ts

@@ -1,7 +1,7 @@
 import { HexString } from '@gear-js/api';
-import { useState, useEffect, useContext, useMemo } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 
-import { AccountContext, AlertContext } from 'context';
+import { useAccount, useAlert } from 'context';
 
 import { useGetVoucherStatus } from './use-voucher-status';
 import { useVouchers } from './use-vouchers';
@@ -10,7 +10,7 @@ function useIsAnyVoucherActive(accountAddress: string | undefined, programId: He
   const { vouchers } = useVouchers(accountAddress, programId);
   const voucherEntries = useMemo(() => Object.entries(vouchers || {}), [vouchers]);
 
-  const alert = useContext(AlertContext);
+  const alert = useAlert();
 
   const getVoucherStatus = useGetVoucherStatus();
 
@@ -43,7 +43,7 @@ function useIsAnyVoucherActive(accountAddress: string | undefined, programId: He
 }
 
 function useIsAnyAccountVoucherActive(programId: HexString | undefined) {
-  const { account } = useContext(AccountContext);
+  const { account } = useAccount();
 
   return useIsAnyVoucherActive(account?.address, programId);
 }

utils/gear-hooks/src/hooks/api/voucher/use-is-voucher-exists.ts

@@ -1,11 +1,11 @@
 import { HexString } from '@gear-js/api';
-import { useState, useEffect, useContext } from 'react';
+import { useState, useEffect } from 'react';
 
-import { AccountContext, AlertContext, ApiContext } from 'context';
+import { useAccount, useAlert, useApi } from 'context';
 
 function useIsVoucherExists(programId: HexString | undefined, accountAddress: HexString | undefined) {
-  const { api, isApiReady } = useContext(ApiContext); // сircular dependency fix
-  const alert = useContext(AlertContext);
+  const { api, isApiReady } = useApi();
+  const alert = useAlert();
 
   const [isVoucherExists, setIsVoucherExists] = useState<boolean>();
   const isVoucherExistsReady = isVoucherExists !== undefined;
@@ -27,7 +27,7 @@ function useIsVoucherExists(programId: HexString | undefined, accountAddress: He
 }
 
 function useIsAccountVoucherExists(programId: HexString | undefined) {
-  const { account } = useContext(AccountContext);
+  const { account } = useAccount();
 
   return useIsVoucherExists(programId, account?.decodedAddress);
 }

utils/gear-hooks/src/hooks/api/voucher/use-issued-vouchers.ts

@@ -1,10 +1,10 @@
-import { useContext, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
-import { AccountContext, AlertContext, ApiContext } from 'context';
+import { useAccount, useAlert, useApi } from 'context';
 
 function useIssuedVouchers(accountAddress: string | undefined) {
-  const { api, isApiReady } = useContext(ApiContext);
-  const alert = useContext(AlertContext);
+  const { api, isApiReady } = useApi();
+  const alert = useAlert();
 
   const [vouchers, setVouchers] = useState<string[]>();
   const isEachVoucherReady = vouchers !== undefined;
@@ -24,7 +24,7 @@ function useIssuedVouchers(accountAddress: string | undefined) {
 }
 
 function useAccountIssuedVouchers() {
-  const { account } = useContext(AccountContext);
+  const { account } = useAccount();
 
   return useIssuedVouchers(account?.address);
 }