diff --git a/.gitignore b/.gitignore
index a34823e11..781d22ed0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
+.vscode
.idea
.coverage.txt
frontend/node_modules
diff --git a/app/src/App.tsx b/app/src/App.tsx
index 0088686e1..03dedcb3e 100644
--- a/app/src/App.tsx
+++ b/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 () => (
-
-
- {shouldShowOnboardingModal.value && (
-
- )}
-
-
-
+
+
+
+ {shouldShowOnboardingModal.value && (
+
+ )}
+
+
+
+
);
},
diff --git a/app/src/business/providers/SifchainClientsProvider.tsx b/app/src/business/providers/SifchainClientsProvider.tsx
new file mode 100644
index 000000000..78127d107
--- /dev/null
+++ b/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>;
+
+type QueryClientsState =
+ | ({
+ queryClientStatus: "fulfilled";
+ } & QueryClients)
+ | { queryClientStatus?: "pending" | "rejected" };
+
+type SigningClient = Awaited>;
+
+type SigningClientState =
+ | {
+ signingClientStatus: "fulfilled";
+ signingClient: SigningClient;
+ }
+ | {
+ signingClientStatus?: "pending" | "rejected";
+ };
+
+export type ClientsState = QueryClientsState & SigningClientState;
+
+export const sifchainClientsSymbol: InjectionKey =
+ Symbol("sifchainClients");
+
+export const SifchainClientsProvider = defineComponent((_, { slots }) => {
+ const state = reactive({
+ 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);