feat: Allow useOpenUrl to specify fallback behavior

.changeset/sour-carrots-lie.md

@@ -0,0 +1,5 @@
+---
+"@coinbase/onchainkit": minor
+---
+
+feat: Add option to useOpenUrl to handle non-mini-app behavior in a custom way

packages/onchainkit/src/minikit/hooks/useOpenUrl.ts

@@ -2,22 +2,33 @@ import sdk from '@farcaster/miniapp-sdk';
 import { useCallback } from 'react';
 import { useMiniKit } from './useMiniKit';
 
+export type UseOpenUrlParams = {
+  fallback?: (url: string) => void;
+};
+
 /**
- * Opens a new url, if in a frame context, using the openUrl sdk action, otherwise opens in a new tab
- * @param url - The URL to open.
- * @returns void
+ * Opens a new url, if in a frame context, using the openUrl sdk action, otherwise opens via the fallback function.
+ *
+ * @param options - The options for the useOpenUrl hook.
+ * @param options.fallback - The fallback function to use if the context is not available. Defaults to opening in a new tab.
  */
-export function useOpenUrl() {
+export function useOpenUrl(
+  { fallback }: UseOpenUrlParams = {
+    fallback: (url) => {
+      window.open(url, '_blank');
+    },
+  },
+) {
   const { context } = useMiniKit();
 
   return useCallback(
     (url: string) => {
       if (context) {
         sdk.actions.openUrl(url);
       } else {
-        window.open(url, '_blank');
+        fallback?.(url);
       }
     },
-    [context],
+    [context, fallback],
   );
 }

packages/onchainkit/src/minikit/index.ts

@@ -1,9 +1,8 @@
 export { MiniKitProvider } from './MiniKitProvider';
 export type { MiniKitProviderProps } from './types';
-export { SafeArea } from './components/SafeArea';
-export type { SafeAreaProps } from './components/SafeArea';
+export { SafeArea, type SafeAreaProps } from './components/SafeArea';
 export { useMiniKit } from './hooks/useMiniKit';
-export { useOpenUrl } from './hooks/useOpenUrl';
+export { useOpenUrl, type UseOpenUrlParams } from './hooks/useOpenUrl';
 export { useAuthenticate, parseSignInMessage } from './hooks/useAuthenticate';
 export { useViewProfile } from './hooks/useViewProfile';
 export { useAddFrame } from './hooks/useAddFrame';