feat: adjusts logic to send provider and chain details to provider pr…

…oxy (#742)

apps/deploy-web/src/components/deployments/DeploymentLeaseShell.tsx

@@ -42,7 +42,7 @@ export const DeploymentLeaseShell: React.FunctionComponent<Props> = ({ leases })
     data: leaseStatus,
     refetch: getLeaseStatus,
     isFetching: isLoadingStatus
-  } = useLeaseStatus(providerInfo?.hostUri || "", selectedLease as LeaseDto, {
+  } = useLeaseStatus(providerInfo, selectedLease as LeaseDto, {
     enabled: false
   });
   const currentUrl = useRef<string | null>(null);

apps/deploy-web/src/components/deployments/DeploymentLogs.tsx

@@ -54,7 +54,7 @@ export const DeploymentLogs: React.FunctionComponent<Props> = ({ leases, selecte
     data: leaseStatus,
     refetch: getLeaseStatus,
     isFetching: isLoadingStatus
-  } = useLeaseStatus(providerInfo?.hostUri || "", selectedLease as LeaseDto, {
+  } = useLeaseStatus(providerInfo, selectedLease as LeaseDto, {
     enabled: false
   });
   const { sendJsonMessage } = useWebSocket(browserEnvConfig.NEXT_PUBLIC_PROVIDER_PROXY_URL_WS, {

apps/deploy-web/src/components/deployments/LeaseRow.tsx

@@ -18,12 +18,12 @@ import { PricePerMonth } from "@src/components/shared/PricePerMonth";
 import { SpecDetail } from "@src/components/shared/SpecDetail";
 import { StatusPill } from "@src/components/shared/StatusPill";
 import { useCertificate } from "@src/context/CertificateProvider";
-import { LocalCert } from "@src/context/CertificateProvider/CertificateProviderContext";
 import { useLocalNotes } from "@src/context/LocalNoteProvider";
 import { getSplitText } from "@src/hooks/useShortText";
 import { useBidInfo } from "@src/queries/useBidQuery";
 import { useLeaseStatus } from "@src/queries/useLeaseQuery";
 import { useProviderStatus } from "@src/queries/useProvidersQuery";
+import networkStore from "@src/store/networkStore";
 import { LeaseDto } from "@src/types/deployment";
 import { ApiProviderList } from "@src/types/provider";
 import { copyTextToClipboard } from "@src/utils/copyClipboard";
@@ -63,7 +63,7 @@ export const LeaseRow = React.forwardRef<AcceptRefType, Props>(
       error,
       refetch: getLeaseStatus,
       isLoading: isLoadingLeaseStatus
-    } = useLeaseStatus(provider?.hostUri || "", lease, {
+    } = useLeaseStatus(provider, lease, {
       enabled: isLeaseActive && !isServicesAvailable && !!provider?.hostUri && !!localCert,
       refetchInterval: 10_000,
       onSuccess: leaseStatus => {
@@ -72,7 +72,7 @@ export const LeaseRow = React.forwardRef<AcceptRefType, Props>(
         }
       }
     });
-    const { isLoading: isLoadingProviderStatus, refetch: getProviderStatus } = useProviderStatus(provider?.hostUri || "", {
+    const { isLoading: isLoadingProviderStatus, refetch: getProviderStatus } = useProviderStatus(provider, {
       enabled: false,
       retry: false
     });
@@ -117,12 +117,13 @@ export const LeaseRow = React.forwardRef<AcceptRefType, Props>(
       setActiveTab("EDIT");
     }
 
+    const chainNetwork = networkStore.useSelectedNetworkId();
     async function sendManifest() {
       setIsSendingManifest(true);
       try {
         const manifest = deploymentData.getManifest(parsedManifest, true);
 
-        await sendManifestToProvider(provider as ApiProviderList, manifest, dseq, localCert as LocalCert);
+        await sendManifestToProvider(provider, manifest, { dseq, localCert, chainNetwork });
 
         enqueueSnackbar(<Snackbar title="Manifest sent!" iconVariant="success" />, { variant: "success", autoHideDuration: 10_000 });
 

apps/deploy-web/src/components/deployments/ManifestUpdate.tsx

@@ -11,10 +11,10 @@ import { LinearLoadingSkeleton } from "@src/components/shared/LinearLoadingSkele
 import { LinkTo } from "@src/components/shared/LinkTo";
 import ViewPanel from "@src/components/shared/ViewPanel";
 import { useCertificate } from "@src/context/CertificateProvider";
-import { LocalCert } from "@src/context/CertificateProvider/CertificateProviderContext";
 import { useSettings } from "@src/context/SettingsProvider";
 import { useWallet } from "@src/context/WalletProvider";
 import { useProviderList } from "@src/queries/useProvidersQuery";
+import networkStore from "@src/store/networkStore";
 import { AnalyticsCategory, AnalyticsEvents } from "@src/types/analytics";
 import { DeploymentDto, LeaseDto } from "@src/types/deployment";
 import { ApiProviderList } from "@src/types/provider";
@@ -122,9 +122,14 @@ export const ManifestUpdate: React.FunctionComponent<Props> = ({
     window.open("https://akash.network/docs/deployments/akash-cli/installation/#update-the-deployment", "_blank");
   }
 
+  const chainNetwork = networkStore.useSelectedNetworkId();
   async function sendManifest(providerInfo: ApiProviderList, manifest: any) {
     try {
-      return await sendManifestToProvider(providerInfo, manifest, deployment.dseq, localCert as LocalCert);
+      return await sendManifestToProvider(providerInfo, manifest, {
+        dseq: deployment.dseq,
+        localCert,
+        chainNetwork
+      });
     } catch (err) {
       enqueueSnackbar(<ManifestErrorSnackbar err={err} />, { variant: "error", autoHideDuration: null });
       throw err;

apps/deploy-web/src/components/new-deployment/BidRow.tsx

@@ -38,7 +38,7 @@ export const BidRow: React.FunctionComponent<Props> = ({ testIndex, bid, selecte
     isLoading: isLoadingStatus,
     refetch: fetchProviderStatus,
     error
-  } = useProviderStatus(provider?.hostUri, {
+  } = useProviderStatus(provider, {
     enabled: false,
     retry: false
   });

apps/deploy-web/src/components/new-deployment/CreateLease.tsx

@@ -23,13 +23,13 @@ import { useRouter } from "next/navigation";
 import { event } from "nextjs-google-analytics";
 import { useSnackbar } from "notistack";
 
-import { LocalCert } from "@src/context/CertificateProvider/CertificateProviderContext";
 import { useWallet } from "@src/context/WalletProvider";
 import { useManagedDeploymentConfirm } from "@src/hooks/useManagedDeploymentConfirm";
 import { useWhen } from "@src/hooks/useWhen";
 import { useBidList } from "@src/queries/useBidQuery";
 import { useDeploymentDetail } from "@src/queries/useDeploymentQuery";
 import { useProviderList } from "@src/queries/useProvidersQuery";
+import networkStore from "@src/store/networkStore";
 import { AnalyticsCategory, AnalyticsEvents } from "@src/types/analytics";
 import { BidDto } from "@src/types/deployment";
 import { RouteStep } from "@src/types/route-steps.type";
@@ -108,6 +108,7 @@ export const CreateLease: React.FunctionComponent<Props> = ({ dseq }) => {
 
   useWhen(hasActiveBid, () => selectBid(activeBid));
 
+  const chainNetwork = networkStore.useSelectedNetworkId();
   const sendManifest = useCallback(async () => {
     setIsSendingManifest(true);
     const bidKeys = Object.keys(selectedBids);
@@ -141,7 +142,7 @@ export const CreateLease: React.FunctionComponent<Props> = ({ dseq }) => {
         if (!provider) {
           throw new Error("Provider not found");
         }
-        await sendManifestToProvider(provider, mani, dseq, localCert as LocalCert);
+        await sendManifestToProvider(provider, mani, { dseq, localCert, chainNetwork });
       }
       router.replace(UrlService.deploymentDetails(dseq, "EVENTS", "events"));
     } catch (err) {
@@ -154,7 +155,7 @@ export const CreateLease: React.FunctionComponent<Props> = ({ dseq }) => {
 
       setIsSendingManifest(false);
     }
-  }, [selectedBids, dseq, providers, localCert, isManaged, enqueueSnackbar, closeSnackbar, router]);
+  }, [selectedBids, dseq, providers, localCert, isManaged, enqueueSnackbar, closeSnackbar, router, chainNetwork]);
 
   // Filter bids
   useEffect(() => {

apps/deploy-web/src/components/providers/LeaseListContainer.tsx

@@ -5,7 +5,7 @@ import { useWallet } from "@src/context/WalletProvider";
 import { useAllLeases } from "@src/queries/useLeaseQuery";
 import { useProviderDetail, useProviderStatus } from "@src/queries/useProvidersQuery";
 import { LeaseDto } from "@src/types/deployment";
-import { ClientProviderDetailWithStatus } from "@src/types/provider";
+import { ApiProviderList, ClientProviderDetailWithStatus } from "@src/types/provider";
 import { domainName, UrlService } from "@src/utils/urlUtils";
 import Layout from "../layout/Layout";
 import { CustomNextSeo } from "../shared/CustomNextSeo";
@@ -32,7 +32,7 @@ export const LeaseListContainer: React.FunctionComponent<Props> = ({ owner }) =>
     data: providerStatus,
     isLoading: isLoadingStatus,
     refetch: getProviderStatus
-  } = useProviderStatus(provider?.hostUri || "", {
+  } = useProviderStatus(provider as ApiProviderList, {
     enabled: false,
     retry: false,
     onSuccess: () => {

apps/deploy-web/src/components/providers/ProviderDetail.tsx

@@ -44,7 +44,7 @@ export const ProviderDetail: React.FunctionComponent<Props> = ({ owner, _provide
   });
   const { data: leases, isFetching: isLoadingLeases, refetch: getLeases } = useAllLeases(address, { enabled: false });
   const { data: providerAttributesSchema, isFetching: isLoadingSchema } = useProviderAttributesSchema();
-  const { isLoading: isLoadingStatus, refetch: getProviderStatus } = useProviderStatus(provider?.hostUri || "", {
+  const { isLoading: isLoadingStatus, refetch: getProviderStatus } = useProviderStatus(provider, {
     enabled: true,
     retry: false,
     onSuccess: _providerStatus => {

apps/deploy-web/src/components/providers/ProviderRawData.tsx

@@ -5,7 +5,7 @@ import { DynamicReactJson } from "@src/components/shared/DynamicJsonView";
 import { useWallet } from "@src/context/WalletProvider";
 import { useAllLeases } from "@src/queries/useLeaseQuery";
 import { useProviderDetail, useProviderStatus } from "@src/queries/useProvidersQuery";
-import { ClientProviderDetailWithStatus } from "@src/types/provider";
+import { ApiProviderList, ClientProviderDetailWithStatus } from "@src/types/provider";
 import { domainName, UrlService } from "@src/utils/urlUtils";
 import Layout from "../layout/Layout";
 import { CustomNextSeo } from "../shared/CustomNextSeo";
@@ -30,7 +30,7 @@ export const ProviderRawData: React.FunctionComponent<Props> = ({ owner }) => {
     data: providerStatus,
     isLoading: isLoadingStatus,
     refetch: getProviderStatus
-  } = useProviderStatus(provider?.hostUri || "", {
+  } = useProviderStatus(provider as ApiProviderList, {
     enabled: false,
     retry: false,
     onSuccess: () => {

apps/deploy-web/src/config/env-config.schema.ts

@@ -46,7 +46,8 @@ export const serverEnvSchema = browserEnvSchema.extend({
   GITHUB_CLIENT_SECRET: z.string(),
   BITBUCKET_CLIENT_SECRET: z.string(),
   GITLAB_CLIENT_SECRET: z.string(),
-  NEXT_PUBLIC_CI_CD_IMAGE_NAME: z.string()
+  NEXT_PUBLIC_CI_CD_IMAGE_NAME: z.string(),
+  NEXT_PUBLIC_PROVIDER_PROXY_URL: z.string()
 });
 
 export type BrowserEnvConfig = z.infer<typeof browserEnvSchema>;

apps/deploy-web/src/context/ServicesProvider/index.tsx

@@ -0,0 +1,13 @@
+import React, { useContext } from "react";
+
+import { services as defaultServices } from "@src/services/http/http-browser.service";
+
+const ServicesContext = React.createContext(defaultServices);
+
+export const ServicesProvider: React.FC<{ children: React.ReactNode; services?: Partial<typeof defaultServices> }> = ({ children, services }) => {
+  return <ServicesContext.Provider value={{ ...defaultServices, ...services }}>{children}</ServicesContext.Provider>;
+};
+
+export function useServices() {
+  return useContext(ServicesContext);
+}

apps/deploy-web/src/hooks/useScopedFetchProviderUrl.ts

@@ -0,0 +1,25 @@
+import { useCallback } from "react";
+import { AxiosResponse } from "axios";
+
+import { useServices } from "@src/context/ServicesProvider";
+import { ProviderIdentity, ProviderProxyPayload } from "@src/services/provider-proxy/provider-proxy.service";
+import networkStore from "@src/store/networkStore";
+
+export function useScopedFetchProviderUrl(provider: ProviderIdentity | undefined | null): ScopedFetchProviderUrl {
+  const chainNetwork = networkStore.useSelectedNetworkId();
+  const { providerProxy } = useServices();
+  return useCallback(
+    (url, options) => {
+      if (!provider) return new Promise(() => {});
+      return providerProxy.fetchProviderUrl(url, {
+        ...options,
+        chainNetwork,
+        providerIdentity: provider
+      });
+    },
+    [provider?.hostUri, provider?.owner, chainNetwork]
+  );
+}
+
+export type ScopedFetchProviderUrlOptions = Omit<ProviderProxyPayload, "chainNetwork" | "providerIdentity">;
+export type ScopedFetchProviderUrl = <T>(url: string, options?: ScopedFetchProviderUrlOptions) => Promise<AxiosResponse<T>>;

apps/deploy-web/src/pages/_app.tsx

@@ -27,6 +27,7 @@ import { CustomChainProvider } from "@src/context/CustomChainProvider";
 import { ColorModeProvider } from "@src/context/CustomThemeContext";
 import { LocalNoteProvider } from "@src/context/LocalNoteProvider";
 import { PricingProvider } from "@src/context/PricingProvider/PricingProvider";
+import { ServicesProvider } from "@src/context/ServicesProvider";
 import { SettingsProvider } from "@src/context/SettingsProvider";
 import { TemplatesProvider } from "@src/context/TemplatesProvider";
 import { WalletProvider } from "@src/context/WalletProvider";
@@ -73,7 +74,9 @@ const App: React.FunctionComponent<Props> = props => {
                                         <BackgroundTaskProvider>
                                           <TemplatesProvider>
                                             <LocalNoteProvider>
-                                              <Component {...pageProps} />
+                                              <ServicesProvider>
+                                                <Component {...pageProps} />
+                                              </ServicesProvider>
                                             </LocalNoteProvider>
                                           </TemplatesProvider>
                                         </BackgroundTaskProvider>

apps/deploy-web/src/queries/useLeaseQuery.ts

@@ -1,9 +1,8 @@
 import { useQuery } from "react-query";
-import axios from "axios";
 
-import { browserEnvConfig } from "@src/config/browser-env.config";
-import { LocalCert } from "@src/context/CertificateProvider/CertificateProviderContext";
+import { useScopedFetchProviderUrl } from "@src/hooks/useScopedFetchProviderUrl";
 import { LeaseDto, RpcLease } from "@src/types/deployment";
+import { ApiProviderList } from "@src/types/provider";
 import { ApiUrlService, loadWithPagination } from "@src/utils/apiUtils";
 import { leaseToDto } from "@src/utils/deploymentDetailUtils";
 import { useCertificate } from "../context/CertificateProvider";
@@ -46,21 +45,20 @@ export function useAllLeases(address: string, options = {}) {
   return useQuery(QueryKeys.getAllLeasesKey(address), () => getAllLeases(settings.apiEndpoint, address), options);
 }
 
-async function getLeaseStatus(providerUri: string, lease: LeaseDto, localCert: LocalCert | null) {
-  if (!providerUri) return null;
-
-  const leaseStatusPath = `${providerUri}/lease/${lease.dseq}/${lease.gseq}/${lease.oseq}/status`;
-  const response = await axios.post(browserEnvConfig.NEXT_PUBLIC_PROVIDER_PROXY_URL, {
-    method: "GET",
-    url: leaseStatusPath,
-    certPem: localCert?.certPem,
-    keyPem: localCert?.keyPem
-  });
-
-  return response.data;
-}
-
-export function useLeaseStatus(providerUri: string, lease: LeaseDto, options) {
+export function useLeaseStatus(provider: ApiProviderList | undefined, lease: LeaseDto, options) {
   const { localCert } = useCertificate();
-  return useQuery(QueryKeys.getLeaseStatusKey(lease?.dseq, lease?.gseq, lease?.oseq), () => getLeaseStatus(providerUri, lease, localCert), options);
+  const fetchProviderUrl = useScopedFetchProviderUrl(provider);
+
+  return useQuery(
+    QueryKeys.getLeaseStatusKey(lease?.dseq, lease?.gseq, lease?.oseq),
+    async () => {
+      const response = await fetchProviderUrl<any>(`/lease/${lease.dseq}/${lease.gseq}/${lease.oseq}/status`, {
+        method: "GET",
+        certPem: localCert?.certPem,
+        keyPem: localCert?.keyPem
+      });
+      return response.data;
+    },
+    options
+  );
 }

apps/deploy-web/src/queries/useProvidersQuery.ts

@@ -1,40 +1,45 @@
-import { useQuery } from "react-query";
+import { useQuery, UseQueryResult } from "react-query";
 import axios from "axios";
 
-import { browserEnvConfig } from "@src/config/browser-env.config";
-import { ApiProviderDetail, ApiProviderList, ApiProviderRegion, Auditor } from "@src/types/provider";
+import { useServices } from "@src/context/ServicesProvider";
+import { useScopedFetchProviderUrl } from "@src/hooks/useScopedFetchProviderUrl";
+import { ApiProviderDetail, ApiProviderList, ApiProviderRegion, Auditor, ProviderStatus, ProviderVersion } from "@src/types/provider";
 import { ProviderAttributesSchema } from "@src/types/providerAttributes";
 import { ApiUrlService } from "@src/utils/apiUtils";
 import { getNetworkCapacityDto, providerStatusToDto } from "@src/utils/providerUtils";
 import { QueryKeys } from "./queryKeys";
 
-async function getProviderDetail(owner: string): Promise<ApiProviderDetail | null> {
-  if (!owner) return null;
-
-  const response = await axios.get(ApiUrlService.providerDetail(owner));
-
-  return response.data;
-}
-
-export function useProviderDetail(owner: string, options) {
-  return useQuery(QueryKeys.getProviderDetailKey(owner), () => getProviderDetail(owner), options);
-}
-
-async function getProviderStatus(providerUri: string) {
-  if (!providerUri) return null;
-
-  try {
-    const statusResponse = await axios.post(browserEnvConfig.NEXT_PUBLIC_PROVIDER_PROXY_URL, { url: `${providerUri}/status`, method: "GET" });
-    const versionResponse = await axios.post(browserEnvConfig.NEXT_PUBLIC_PROVIDER_PROXY_URL, { url: `${providerUri}/version`, method: "GET" });
-    return providerStatusToDto(statusResponse.data, versionResponse?.data || {});
-  } catch (error) {
-    console.log(error);
-    throw error;
-  }
-}
-
-export function useProviderStatus(providerUri: string, options = {}) {
-  return useQuery(QueryKeys.getProviderStatusKey(providerUri), () => getProviderStatus(providerUri), options);
+export function useProviderDetail(owner: string, options): UseQueryResult<ApiProviderDetail | null> {
+  const services = useServices();
+  return useQuery(
+    QueryKeys.getProviderDetailKey(owner),
+    async () => {
+      if (!owner) return null;
+      const response = await services.axios.get(ApiUrlService.providerDetail(owner));
+      return response.data;
+    },
+    options
+  );
+}
+
+export function useProviderStatus(provider: ApiProviderList | undefined | null, options = {}) {
+  const fetchProviderUrl = useScopedFetchProviderUrl(provider);
+  return useQuery(
+    QueryKeys.getProviderStatusKey(provider?.hostUri || ""),
+    async () => {
+      try {
+        const [statusResponse, versionResponse] = await Promise.all([
+          fetchProviderUrl<ProviderStatus>("/status"),
+          fetchProviderUrl<ProviderVersion>("/version")
+        ]);
+        return providerStatusToDto(statusResponse.data, versionResponse.data || {});
+      } catch (error) {
+        console.log(error);
+        throw error;
+      }
+    },
+    options
+  );
 }
 
 async function getNetworkCapacity() {