Fix Starknet Config

packages/keychain/src/components/ErrorAlert.tsx

@@ -28,6 +28,7 @@ import { useConnection } from "hooks/connection";
 import { constants } from "starknet";
 import { parseExecutionError, parseValidationError } from "utils/errors";
 import { formatAddress } from "@cartridge/utils";
+import { useExplorer } from "@starknet-react/core";
 
 export function ErrorAlert({
   title,
@@ -336,17 +337,7 @@ function StackTraceDisplay({
   stackTrace: ReturnType<typeof parseExecutionError>["stack"];
 }) {
   const { chainId } = useConnection();
-
-  const getExplorerUrl = (type: "contract" | "class", value: string) => {
-    if (!chainId) return;
-
-    const baseUrl = {
-      [constants.StarknetChainId.SN_SEPOLIA]: "https://sepolia.starkscan.co",
-      [constants.StarknetChainId.SN_MAIN]: "https://starkscan.co",
-    }[chainId];
-
-    return baseUrl ? `${baseUrl}/${type}/${value}` : undefined;
-  };
+  const explorer = useExplorer();
 
   const isExternalLink = [
     constants.StarknetChainId.SN_SEPOLIA,
@@ -377,10 +368,11 @@ function StackTraceDisplay({
                     </Text>
                     {key === "address" || key === "class" ? (
                       <Link
-                        href={getExplorerUrl(
-                          key === "address" ? "contract" : "class",
-                          value as string,
-                        )}
+                        href={
+                          key === "address"
+                            ? explorer.contract(value as string)
+                            : explorer.class(value as string)
+                        }
                         isExternal={isExternalLink}
                         wordBreak="break-all"
                         textAlign="left"

packages/keychain/src/components/Provider/index.tsx

@@ -8,8 +8,9 @@ import posthog from "posthog-js";
 import { ConnectionContext } from "./connection";
 import { ControllerThemeProvider } from "./theme";
 import { jsonRpcProvider, StarknetConfig, voyager } from "@starknet-react/core";
-import { sepolia, mainnet } from "@starknet-react/chains";
+import { sepolia, mainnet, Address } from "@starknet-react/chains";
 import { constants, num } from "starknet";
+import { STRK_CONTRACT_ADDRESS } from "@cartridge/utils";
 
 export function Provider({ children }: PropsWithChildren) {
   const connection = useConnectionValue();
@@ -25,23 +26,68 @@ export function Provider({ children }: PropsWithChildren) {
       default:
         nodeUrl = connection.rpcUrl;
     }
+    console.log(nodeUrl);
     return { nodeUrl };
   }, [connection.rpcUrl, connection.chainId]);
 
-  const defaultChainId = useMemo(() => {
-    return num.toBigInt(connection.chainId || 0);
-  }, [connection.chainId]);
+  const config = useCallback(() => {
+    switch (connection.chainId) {
+      case constants.StarknetChainId.SN_MAIN:
+        return {
+          explorer: voyager,
+          chains: [mainnet],
+          provider: jsonRpcProvider({ rpc }),
+        };
+      case constants.StarknetChainId.SN_SEPOLIA:
+        return {
+          explorer: voyager,
+          chains: [sepolia],
+          provider: jsonRpcProvider({ rpc }),
+        };
+      default:
+        return {
+          explorer: undefined,
+          chains: [
+            {
+              id: num.toBigInt(connection.chainId || 0),
+              network: "slot",
+              name: "Slot",
+              nativeCurrency: {
+                address: STRK_CONTRACT_ADDRESS as Address,
+                name: "Stark",
+                symbol: "STRK",
+                decimals: 18,
+              },
+              testnet: true,
+              rpcUrls: {
+                default: {
+                  http: [connection.rpcUrl || ""],
+                },
+                public: {
+                  http: [connection.rpcUrl || ""],
+                },
+              },
+              explorers: {
+                worldexplorer: [""],
+              },
+            },
+          ],
+          provider: jsonRpcProvider({ rpc }),
+        };
+    }
+  }, [connection.chainId, rpc]);
+
+  const { explorer, chains, provider } = config();
 
   return (
     <CartridgeAPIProvider url={ENDPOINT}>
       <QueryClientProvider client={queryClient}>
         <ConnectionContext.Provider value={connection}>
           <ControllerThemeProvider>
             <StarknetConfig
-              explorer={voyager}
-              chains={[sepolia, mainnet]}
-              defaultChainId={defaultChainId}
-              provider={jsonRpcProvider({ rpc })}
+              explorer={explorer}
+              chains={chains}
+              provider={provider}
             >
               <PostHogProvider client={posthog}>{children}</PostHogProvider>
             </StarknetConfig>