feat: create clients provider

.gitignore

@@ -1,3 +1,4 @@
+.vscode
 .idea
 .coverage.txt
 frontend/node_modules

app/src/App.tsx

@@ -15,6 +15,7 @@ import { shouldAllowFaucetFunding } from "@/hooks/useFaucet";
 import OnboardingModal from "@/components/OnboardingModal";
 
 import "./App.scss";
+import { SifchainClientsProvider } from "./business/providers/SifchainClientsProvider";
 
 // not currently working? - McCall
 const hideRedundantUselessMetamaskErrors = () => {
@@ -122,14 +123,16 @@ export default defineComponent({
 
     return () => (
       <div class="min-h-screen">
-        <SideBar />
-        <router-view />
-        {shouldShowOnboardingModal.value && (
-          <OnboardingModal onClose={onCloseOnboardingModal} />
-        )}
-        <Notifications />
-        <EnvAlert />
-        <Flags />
+        <SifchainClientsProvider>
+          <SideBar />
+          <router-view />
+          {shouldShowOnboardingModal.value && (
+            <OnboardingModal onClose={onCloseOnboardingModal} />
+          )}
+          <Notifications />
+          <EnvAlert />
+          <Flags />
+        </SifchainClientsProvider>
       </div>
     );
   },

app/src/business/providers/SifchainClientsProvider.tsx

@@ -0,0 +1,72 @@
+import { useCore } from "@/hooks/useCore";
+import { createQueryClient, createSigningClient } from "@sifchain/sdk";
+import {
+  defineComponent,
+  inject,
+  InjectionKey,
+  onMounted,
+  provide,
+  reactive,
+} from "vue";
+
+type QueryClients = Awaited<ReturnType<typeof createQueryClient>>;
+
+type QueryClientsState =
+  | ({
+      queryClientStatus: "fulfilled";
+    } & QueryClients)
+  | { queryClientStatus?: "pending" | "rejected" };
+
+type SigningClient = Awaited<ReturnType<typeof createSigningClient>>;
+
+type SigningClientState =
+  | {
+      signingClientStatus: "fulfilled";
+      signingClient: SigningClient;
+    }
+  | {
+      signingClientStatus?: "pending" | "rejected";
+    };
+
+export type ClientsState = QueryClientsState & SigningClientState;
+
+export const sifchainClientsSymbol: InjectionKey<ClientsState> =
+  Symbol("sifchainClients");
+
+export const SifchainClientsProvider = defineComponent((_, { slots }) => {
+  const state = reactive<ClientsState>({
+    queryClientStatus: undefined,
+    signingClientStatus: undefined,
+  });
+
+  const { config, services } = useCore();
+
+  onMounted(() => {
+    state.queryClientStatus = "pending";
+    const queryClientPromise = createQueryClient(config.sifRpcUrl)
+      .then((x) => {
+        Object.assign(state, { ...x, queryClientStatus: "fulfilled" });
+      })
+      .catch(() => (state.queryClientStatus = "rejected"));
+
+    state.signingClientStatus = "pending";
+    const signingClientPromise = services.wallet.keplrProvider
+      .getSendingSigner(services.chains.nativeChain)
+      .then((x) => createSigningClient(config.sifRpcUrl, x))
+      .then((x) =>
+        Object.assign(state, {
+          signingClient: x,
+          signingClientStatus: "fulfilled",
+        }),
+      )
+      .catch(() => (state.signingClientStatus = "rejected"));
+
+    return Promise.all([queryClientPromise, signingClientPromise]);
+  });
+
+  provide(sifchainClientsSymbol, state);
+
+  return () => slots.default?.();
+});
+
+export const injectSifchainClients = () => inject(sifchainClientsSymbol);