Expose apiEndpoint details on Api context (#6757)

* Expose apiEndpoint details on Api context

* No need to pass through apiEndpoint (yet)

* Lint

packages/apps-config/src/endpoints/types.ts

@@ -37,4 +37,5 @@ export interface LinkOption extends Option {
   teleport?: number[];
   textBy: string;
   value: string;
+  valueRelay?: string[];
 }

packages/apps-config/src/endpoints/util.ts

@@ -17,6 +17,8 @@ function sortLinks (a: SortOption, b: SortOption): number {
 }
 
 function expandLinked (input: LinkOption[]): LinkOption[] {
+  const valueRelay = input.map(({ value }) => value);
+
   return input.reduce((result: LinkOption[], entry): LinkOption[] => {
     result.push(entry);
 
@@ -25,6 +27,7 @@ function expandLinked (input: LinkOption[]): LinkOption[] {
         expandLinked(entry.linked).map((child): LinkOption => {
           child.genesisHashRelay = entry.genesisHash;
           child.isChild = true;
+          child.valueRelay = valueRelay;
 
           return child;
         })

packages/react-api/src/Api.tsx

@@ -17,6 +17,7 @@ import { ethereumChains, typesBundle, typesChain } from '@polkadot/apps-config';
 import { web3Accounts, web3Enable } from '@polkadot/extension-dapp';
 import { TokenUnit } from '@polkadot/react-components/InputNumber';
 import { StatusContext } from '@polkadot/react-components/Status';
+import { useEndpoint } from '@polkadot/react-hooks';
 import ApiSigner from '@polkadot/react-signer/signers/ApiSigner';
 import { keyring } from '@polkadot/ui-keyring';
 import { settings } from '@polkadot/ui-settings';
@@ -178,6 +179,7 @@ async function loadOnReady (api: ApiPromise, injectedPromise: Promise<InjectedEx
 }
 
 function Api ({ apiUrl, children, isElectron, store }: Props): React.ReactElement<Props> | null {
+  const apiEndpoint = useEndpoint(apiUrl);
   const { queuePayload, queueSetTxStatus } = useContext(StatusContext);
   const [state, setState] = useState<ApiState>({ hasInjectedAccounts: false, isApiReady: false } as unknown as ApiState);
   const [isApiConnected, setIsApiConnected] = useState(false);
@@ -186,8 +188,8 @@ function Api ({ apiUrl, children, isElectron, store }: Props): React.ReactElemen
   const [extensions, setExtensions] = useState<InjectedExtension[] | undefined>();
 
   const value = useMemo<ApiProps>(
-    () => objectSpread({}, state, { api, apiError, apiUrl, extensions, isApiConnected, isApiInitialized, isElectron, isWaitingInjected: !extensions }),
-    [apiError, extensions, isApiConnected, isApiInitialized, isElectron, state, apiUrl]
+    () => objectSpread({}, state, { api, apiEndpoint, apiError, apiUrl, extensions, isApiConnected, isApiInitialized, isElectron, isWaitingInjected: !extensions }),
+    [apiError, extensions, isApiConnected, isApiInitialized, isElectron, state, apiEndpoint, apiUrl]
   );
 
   // initial initialization

packages/react-api/src/types.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { SubmittableExtrinsicFunction } from '@polkadot/api/promise/types';
+import type { LinkOption } from '@polkadot/apps-config/settings/types';
 import type { InjectedExtension } from '@polkadot/extension-inject/types';
 
 import { ApiPromise } from '@polkadot/api/promise';
@@ -30,6 +31,7 @@ export interface ApiState {
 
 export interface ApiProps extends ApiState {
   api: ApiPromise;
+  apiEndpoint: LinkOption | null;
   apiError: string | null;
   apiUrl?: string;
   extensions?: InjectedExtension[];

packages/react-hooks/src/index.ts

@@ -19,15 +19,15 @@ export { useCall } from './useCall';
 export { useCallMulti } from './useCallMulti';
 export { useCollectiveInstance } from './useCollectiveInstance';
 export { useCollectiveMembers } from './useCollectiveMembers';
-export { useFormField } from './useFormField';
 export { useDebounce } from './useDebounce';
 export { useDelegations } from './useDelegations';
-export { useSystemApi } from './useSystemApi';
 export { useDeriveAccountFlags } from './useDeriveAccountFlags';
 export { useDeriveAccountInfo } from './useDeriveAccountInfo';
+export { useEndpoint } from './useEndpoint';
 export { useEventTrigger } from './useEventTrigger';
 export { useExtrinsicTrigger } from './useExtrinsicTrigger';
 export { useFavorites } from './useFavorites';
+export { useFormField } from './useFormField';
 export { useIncrement } from './useIncrement';
 export { useInflation } from './useInflation';
 export { useIpfs } from './useIpfs';
@@ -62,6 +62,7 @@ export { useWeight } from './useWeight';
 export { useWeightFee } from './useWeightFee';
 export { useElementPosition } from './useElementPosition';
 export { useScroll } from './useScroll';
+export { useSystemApi } from './useSystemApi';
 export { useWindowSize } from './useWindowSize';
 export { useOutsideClick } from './useOutsideClick';
 export { usePopupWindow } from './usePopupWindow';

packages/react-hooks/src/useEndpoint.ts

@@ -0,0 +1,22 @@
+// Copyright 2017-2021 @polkadot/react-hooks authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { LinkOption } from '@polkadot/apps-config/endpoints/types';
+
+import { useMemo } from 'react';
+
+import { createWsEndpoints } from '@polkadot/apps-config';
+
+import { createNamedHook } from './createNamedHook';
+
+const endpoints = createWsEndpoints((k: string, v?: string) => v || k);
+
+export function getEndpoint (apiUrl?: string): LinkOption | null {
+  return endpoints.find(({ value }) => value === apiUrl) || null;
+}
+
+function useEndpointImpl (apiUrl?: string): LinkOption | null {
+  return useMemo(() => getEndpoint(apiUrl), [apiUrl]);
+}
+
+export const useEndpoint = createNamedHook('useEndpoint', useEndpointImpl);