fix(walletkit): fix custom service provider

packages/walletkit-core/src/api/whale.ts

@@ -7,37 +7,38 @@ import {
 import { EnvironmentNetwork } from "./environment";
 
 export function newOceanOptions(
-  network: EnvironmentNetwork
+  network: EnvironmentNetwork,
+  url?: string
 ): WhaleApiClientOptions {
   switch (network) {
     case EnvironmentNetwork.LocalPlayground:
       return {
-        url: "http://localhost:19553",
+        url: url ?? "http://localhost:19553",
         network: "regtest",
         version: "v0",
       };
     case EnvironmentNetwork.RemotePlayground:
       return {
-        url: "https://playground.jellyfishsdk.com",
+        url: url ?? "https://playground.jellyfishsdk.com",
         network: "regtest",
         version: "v0",
       };
     case EnvironmentNetwork.TestNet:
       return {
-        url: "https://testnet.ocean.jellyfishsdk.com",
+        url: url ?? "https://testnet.ocean.jellyfishsdk.com",
         network: "testnet",
         version: "v0",
       };
     case EnvironmentNetwork.DevNet:
       return {
-        url: "http://devnet.ocean.jellyfishsdk.com:3000",
+        url: url ?? "http://devnet.ocean.jellyfishsdk.com:3000",
         network: "devnet",
         version: "v0",
       };
     case EnvironmentNetwork.MainNet:
     default:
       return {
-        url: "https://ocean.defichain.com",
+        url: url ?? "https://ocean.defichain.com",
         network: "mainnet",
         version: "v0",
       };

packages/walletkit-core/src/api/whale.unit.ts

@@ -95,3 +95,55 @@ describe("whale", () => {
     );
   });
 });
+
+describe("whale custom provider", () => {
+  const customProviderURL = "https://custom.provider.test.com";
+
+  it("should match custom provider URL for local playground", () => {
+    const oceanOptions = newOceanOptions(
+      EnvironmentNetwork.LocalPlayground,
+      customProviderURL
+    );
+    expect(oceanOptions).toMatchObject({
+      url: customProviderURL,
+      network: "regtest",
+      version: "v0",
+    });
+  });
+
+  it("should match custom provider URL for testnet", () => {
+    const oceanOptions = newOceanOptions(
+      EnvironmentNetwork.TestNet,
+      customProviderURL
+    );
+    expect(oceanOptions).toMatchObject({
+      url: customProviderURL,
+      network: "testnet",
+      version: "v0",
+    });
+  });
+
+  it("should match custom provider URL for mainnet", () => {
+    const oceanOptions = newOceanOptions(
+      EnvironmentNetwork.MainNet,
+      customProviderURL
+    );
+    expect(oceanOptions).toMatchObject({
+      url: customProviderURL,
+      network: "mainnet",
+      version: "v0",
+    });
+  });
+
+  it("should match custom provider URL for devnet", () => {
+    const oceanOptions = newOceanOptions(
+      EnvironmentNetwork.DevNet,
+      customProviderURL
+    );
+    expect(oceanOptions).toMatchObject({
+      url: customProviderURL,
+      network: "devnet",
+      version: "v0",
+    });
+  });
+});

packages/walletkit-ui/src/contexts/WhaleContext.test.tsx

@@ -7,9 +7,14 @@ import { EnvironmentNetwork } from "@waveshq/walletkit-core";
 import React from "react";
 
 import * as NetworkContext from "./NetworkContext";
+import * as ServiceProviderContext from "./StoreServiceProvider";
 import { useWhaleApiClient, WhaleProvider } from "./WhaleContext";
 
 const networkContext = jest.spyOn(NetworkContext, "useNetworkContext");
+const serviceProviderContext = jest.spyOn(
+  ServiceProviderContext,
+  "useServiceProviderContext"
+);
 
 describe("Whale Context test", () => {
   const networkDetails = [
@@ -49,6 +54,101 @@ describe("Whale Context test", () => {
               network: networkDetail.name,
             } as any)
         );
+        serviceProviderContext.mockImplementation(
+          () =>
+            ({
+              url: networkDetail.url,
+            } as any)
+        );
+        function WhaleProviderComponent(): JSX.Element {
+          const client = useWhaleApiClient() as any;
+          expect(Object.keys(client)).toEqual(
+            expect.arrayContaining([
+              "options",
+              "rpc",
+              "address",
+              "poolpairs",
+              "transactions",
+              "tokens",
+              "masternodes",
+              "blocks",
+              "oracles",
+              "prices",
+              "stats",
+              "rawtx",
+              "fee",
+              "loan",
+            ])
+          );
+          const options = {
+            version: "v0",
+            timeout: 60000,
+            url: networkDetail.url,
+            network: networkDetail.network,
+          };
+          expect(client.options).toMatchObject(options);
+          return (
+            <div>
+              <span>{JSON.stringify(client.options)}</span>
+            </div>
+          );
+        }
+
+        const rendered = render(
+          <WhaleProvider>
+            <WhaleProviderComponent />
+          </WhaleProvider>
+        );
+        expect(rendered).toMatchSnapshot();
+      });
+    });
+  });
+});
+
+describe("Whale custom provider url test", () => {
+  const networkDetails = [
+    {
+      url: "https://custom.mainnet.com",
+      network: "mainnet",
+      name: EnvironmentNetwork.MainNet,
+    },
+    {
+      url: "https://custom.testnet.com",
+      network: "testnet",
+      name: EnvironmentNetwork.TestNet,
+    },
+    {
+      url: "https://custom.playground.com",
+      network: "regtest",
+      name: EnvironmentNetwork.RemotePlayground,
+    },
+    {
+      url: "https://custom.local.com",
+      network: "regtest",
+      name: EnvironmentNetwork.LocalPlayground,
+    },
+    {
+      url: "https://custom.devnet.com",
+      network: "devnet",
+      name: EnvironmentNetwork.DevNet,
+    },
+  ];
+
+  networkDetails.forEach((networkDetail) => {
+    describe(`Whale custom provider url test for ${networkDetail.name}`, () => {
+      it(`should match custom provider url: ${networkDetail.url}`, () => {
+        networkContext.mockImplementation(
+          () =>
+            ({
+              network: networkDetail.name,
+            } as any)
+        );
+        serviceProviderContext.mockImplementation(
+          () =>
+            ({
+              url: networkDetail.url,
+            } as any)
+        );
         function WhaleProviderComponent(): JSX.Element {
           const client = useWhaleApiClient() as any;
           expect(Object.keys(client)).toEqual(

packages/walletkit-ui/src/contexts/WhaleContext.tsx

@@ -7,6 +7,7 @@ import {
 import React, { createContext, useContext, useMemo } from "react";
 
 import { useNetworkContext } from "./NetworkContext";
+import { useServiceProviderContext } from "./StoreServiceProvider";
 
 const WhaleApiClientContext = createContext<{
   whaleAPI: WhaleApiClient;
@@ -25,12 +26,14 @@ export function WhaleProvider({
   children,
 }: React.PropsWithChildren<any>): JSX.Element | null {
   const { network } = useNetworkContext();
+  const { url } = useServiceProviderContext();
+
   const client = useMemo(
     () => ({
-      whaleAPI: newWhaleAPIClient(newOceanOptions(network)),
-      whaleRPC: newWhaleRpcClient(newOceanOptions(network)),
+      whaleAPI: newWhaleAPIClient(newOceanOptions(network, url)),
+      whaleRPC: newWhaleRpcClient(newOceanOptions(network, url)),
     }),
-    [network]
+    [network, url]
   );
 
   return (