feat(tangle-dapp): Implement useProvider

apps/tangle-dapp/src/components/LiquidStaking/stakeAndUnstake/useLsChangeNetwork.ts

@@ -1,4 +1,4 @@
-import useNetworkSwitcher from '@webb-tools/tangle-shared-ui/hooks/useNetworkSwitcher';
+import useSwitchNetwork from '@webb-tools/tangle-shared-ui/hooks/useSwitchNetwork';
 import { useWebbUI } from '@webb-tools/webb-ui-components';
 import { useCallback } from 'react';
 
@@ -10,7 +10,7 @@ import getLsTangleNetwork from '../../../utils/liquidStaking/getLsTangleNetwork'
 
 const useLsChangeNetwork = () => {
   const { lsNetworkId, setSelectedNetworkId } = useLsStore();
-  const { switchNetwork } = useNetworkSwitcher();
+  const { switchNetwork } = useSwitchNetwork();
   const { notificationApi } = useWebbUI();
 
   const tryChangeNetwork = useCallback(

apps/tangle-dapp/src/containers/DebugMetrics.tsx

@@ -7,6 +7,7 @@ import {
 } from '@webb-tools/tangle-shared-ui/utils/polkadot/api';
 import { SkeletonLoader, Typography } from '@webb-tools/webb-ui-components';
 import { FC, useCallback, useEffect, useState } from 'react';
+import useProvider from '@webb-tools/tangle-shared-ui/hooks/useProvider';
 
 import useDebugMetricsStore from '../context/useDebugMetricsStore';
 
@@ -58,6 +59,8 @@ const DebugMetrics: FC = () => {
     (apiRx?.stats?.active.subscriptions ?? 0) +
     subscriptionCount;
 
+  const session = useProvider();
+
   // Manually trigger a re-render every second, since the stats
   // are not automatically updated.
   useEffect(() => {
@@ -95,6 +98,10 @@ const DebugMetrics: FC = () => {
         warnAt={1}
         isApiLoading={isApiLoading}
       />
+
+      <button onClick={() => session.connectSubstrateProvider('test')}>
+        connect
+      </button>
     </>
   );
 

apps/tangle-dapp/src/containers/VaultsAndBalancesTable.tsx

@@ -390,7 +390,7 @@ const VaultsAndBalancesTable: FC = () => {
     return (
       <TableStatus
         title="No Assets Available Yet"
-        description="There are no restaking vaults or liquid staking pools available on this network yet. Please check back later."
+        description="There are no restaking vaults available on this network yet. Please check back later."
       />
     );
   }

apps/tangle-dapp/src/types/liquidStaking.ts

@@ -1,16 +1,3 @@
-import {
-  Collator,
-  Dapp,
-  PhalaVaultOrStakePool,
-  Validator,
-} from '@webb-tools/tangle-shared-ui/types/liquidStaking';
-
-export type LiquidStakingItemType =
-  | Validator
-  | PhalaVaultOrStakePool
-  | Dapp
-  | Collator;
-
 export enum LiquidStakingToken {
   DOT = 'DOT',
   GLMR = 'GLMR',

libs/tangle-shared-ui/src/components/NetworkSelectorDropdown/index.tsx

@@ -19,7 +19,7 @@ import {
 import { type FC, useCallback, useMemo } from 'react';
 import { twMerge } from 'tailwind-merge';
 import useNetworkStore from '../../context/useNetworkStore';
-import useNetworkSwitcher from '../../hooks/useNetworkSwitcher';
+import useSwitchNetwork from '../../hooks/useSwitchNetwork';
 import createCustomNetwork from '../../utils/createCustomNetwork';
 import { NetworkSelectorDropdown } from './NetworkSelectorDropdown';
 
@@ -28,7 +28,7 @@ const NetworkSelectionButton: FC = () => {
     useWebContext();
 
   const { network } = useNetworkStore();
-  const { switchNetwork, isCustom } = useNetworkSwitcher();
+  const { switchNetwork, isCustom } = useSwitchNetwork();
 
   // TODO: Handle switching network on EVM wallet here.
   const switchToCustomNetwork = useCallback(

libs/tangle-shared-ui/src/context/useProviderStore.ts

@@ -0,0 +1,28 @@
+'use client';
+
+import { create } from 'zustand';
+
+import {
+  InjectedAccountWithMeta,
+  InjectedExtension,
+} from '@polkadot/extension-inject/types';
+import {
+  EvmAddress,
+  SubstrateAddress,
+} from '@webb-tools/webb-ui-components/types/address';
+import { EIP1193Provider } from 'viem';
+
+const useProviderStore = create<{
+  accounts?: InjectedAccountWithMeta[];
+  activeAccountAddress?: SubstrateAddress | EvmAddress;
+  provider?: InjectedExtension | EIP1193Provider;
+  setActiveAccountAddress: (address?: SubstrateAddress | EvmAddress) => void;
+  setAccounts: (accounts?: InjectedAccountWithMeta[]) => void;
+  setProvider: (provider?: InjectedExtension | EIP1193Provider) => void;
+}>((set) => ({
+  setActiveAccountAddress: (account) => set({ activeAccountAddress: account }),
+  setAccounts: (accounts) => set({ accounts }),
+  setProvider: (provider) => set({ provider }),
+}));
+
+export default useProviderStore;